/*
 * Scene-first interface overrides for Going to School and Shopping Game.
 * Loaded after everyday-adventures.css by the expansion shell.
 */

.ad3d-school > .ad3d-progress,
.ad3d-shopping > .ad3d-progress {
  display: none;
}

.ad3d-school .ad3d-panel,
.ad3d-shopping .ad3d-panel {
  bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
  width: min(940px, calc(100% - 20px));
  padding: 8px 9px;
  border-width: 2px;
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(55, 42, 70, .1), 0 14px 28px rgba(55, 42, 70, .14);
}

.ad3d-school .ad3d-panel > .ad3d-stage-count,
.ad3d-school .ad3d-panel > .ad3d-prompt,
.ad3d-school .ad3d-panel > .ad3d-instruction,
.ad3d-school .ad3d-panel > .ad3d-sequence,
.ad3d-shopping .ad3d-panel > .ad3d-stage-count,
.ad3d-shopping .ad3d-panel > .ad3d-prompt,
.ad3d-shopping .ad3d-panel > .ad3d-instruction,
.ad3d-shopping .ad3d-panel > .ad3d-sequence {
  display: none;
}

.ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game choices"],
.ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 2px 2px 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
  grid-template-columns: repeat(5, minmax(92px, 1fr));
}

.ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game tools"],
.ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(72px, auto));
  gap: 6px;
  margin: 0;
  padding-bottom: 7px;
}

.ad3d-school .ad3d-panel .ad3d-action,
.ad3d-shopping .ad3d-panel .ad3d-action {
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.05;
  box-shadow: 0 3px 0 rgba(65, 48, 76, .13);
}

.ad3d-school .ad3d-panel .ad3d-action__key,
.ad3d-shopping .ad3d-panel .ad3d-action__key {
  min-width: 19px;
  height: 19px;
  margin-right: 4px;
  border-radius: 6px;
  font-size: 9px;
}

.ad3d-school .ad3d-feedback,
.ad3d-shopping .ad3d-feedback {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  margin: -3px 4px 0 !important;
  color: #71475f !important;
  font-size: 10px !important;
}

.ad3d-school .ad3d-feedback:empty,
.ad3d-shopping .ad3d-feedback:empty {
  display: none;
}

.ad3d-school-guide {
  top: clamp(68px, 8.5vh, 82px);
  left: clamp(10px, 1.5vw, 16px);
  width: min(370px, calc(100% - 20px));
  padding: 9px 11px 10px;
  border-radius: 17px;
}

.ad3d-school-guide__label {
  padding: 3px 7px;
  font-size: 9px;
}

.ad3d-school-guide > strong {
  margin: 5px 0 2px;
  font-size: clamp(16px, 1.9vw, 20px);
}

.ad3d-school-guide > p {
  font-size: 11px;
}

.ad3d-school-guide__steps {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.ad3d-school-guide__steps span {
  display: block;
  width: 28px;
  min-width: 28px;
  height: 8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e8e3eb;
}

.ad3d-school-guide__steps i,
.ad3d-school-guide__steps b {
  display: none;
}

.ad3d-school-guide__steps span.is-next {
  background: #5fc8dc;
  box-shadow: 0 0 0 3px rgba(95, 200, 220, .2);
}

.ad3d-school-guide__steps span.is-done {
  background: #55bf9f;
}

.ad3d-shopping-guide {
  position: absolute;
  z-index: 5;
  top: clamp(68px, 8.5vh, 82px);
  left: clamp(10px, 1.5vw, 16px);
  width: min(440px, calc(100% - 20px));
  padding: 9px 11px 10px;
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 18px;
  background: rgba(255, 253, 246, .95);
  color: #403451;
  box-shadow: 0 7px 0 rgba(55, 42, 70, .11), 0 15px 30px rgba(55, 42, 70, .14);
  backdrop-filter: blur(15px);
  pointer-events: none;
}

.ad3d-shopping-guide__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ad3d-shopping-guide__heading span {
  color: #c45172;
  font: 900 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad3d-shopping-guide__heading strong {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffe9ef;
  color: #a43d5d;
  font: 900 10px/1 'Outfit', system-ui, sans-serif;
}

.ad3d-shopping-guide > p {
  margin: 5px 0 0;
  color: #5f5368;
  font: 750 11px/1.2 'Inter', system-ui, sans-serif;
}

.ad3d-shopping-guide__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.ad3d-shopping-guide__list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #e7dce5;
  border-radius: 9px;
  background: #fff;
  color: #594c62;
}

.ad3d-shopping-guide__list i {
  width: 9px;
  height: 9px;
  border: 2px solid #ef6d8d;
  border-radius: 3px;
  background: #fff;
}

.ad3d-shopping-guide__list b {
  font: 850 10px/1 'Inter', system-ui, sans-serif;
}

.ad3d-shopping-guide__list span.is-next {
  border-color: #ef6d8d;
  background: #fff1f5;
}

.ad3d-shopping-guide__list span.is-done {
  border-color: #70c9aa;
  background: #e9faf4;
  color: #29745f;
}

.ad3d-shopping-guide__list span.is-done i {
  border-color: #4fb390;
  background: #4fb390;
  box-shadow: inset 0 0 0 2px #e9faf4;
}

.ad3d-shopping-guide.is-complete {
  border-color: #76cbae;
  background: rgba(235, 255, 247, .97);
}

.ad3d-shopping-action.is-complete {
  border-color: #70c9aa;
  background: linear-gradient(180deg, #effcf7, #d9f6eb);
  color: #25775f;
  opacity: .76;
}

@media (max-width: 760px), (max-height: 720px) {
  .ad3d-school .ad3d-panel,
  .ad3d-shopping .ad3d-panel {
    bottom: 7px;
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 14px);
    padding: 6px 7px;
  }

  .ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game choices"],
  .ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 4px;
  }

  .ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game tools"],
  .ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game tools"] {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }

  .ad3d-school .ad3d-feedback,
  .ad3d-shopping .ad3d-feedback {
    grid-row: 3;
  }

  .ad3d-school-guide,
  .ad3d-shopping-guide {
    top: 64px;
    left: 8px;
    width: min(410px, calc(100% - 16px));
    padding: 7px 9px 8px;
  }

  .ad3d-school-guide > strong {
    font-size: 15px;
  }

  .ad3d-school-guide > p,
  .ad3d-shopping-guide > p {
    font-size: 10px;
  }

  .ad3d-shopping-guide__list {
    gap: 4px;
    margin-top: 5px;
  }

  .ad3d-shopping-guide__list span {
    min-height: 23px;
    padding: 4px 6px;
  }

  .ad3d-shopping-guide__list b {
    font-size: 9px;
  }
}

@media (max-width: 560px) {
  .ad3d-school .ad3d-panel > .ad3d-actions[aria-label="Game choices"],
  .ad3d-shopping .ad3d-panel > .ad3d-actions[aria-label="Game choices"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    touch-action: manipulation;
  }

  .ad3d-school .ad3d-panel .ad3d-action,
  .ad3d-shopping .ad3d-panel .ad3d-action {
    min-height: 38px;
  }

  .ad3d-school-guide__steps {
    display: none;
  }

  .ad3d-shopping-guide {
    width: calc(100% - 16px);
  }

  .ad3d-shopping-guide__list span {
    flex: 1 1 auto;
    justify-content: center;
  }
}