/* ==========================================================================
   场景探险：水果市场 / 动物乐园 / 我的房间
   ========================================================================== */
.scene {
  gap: clamp(10px, 1.6vh, 16px);
  min-height: 0;
}
.scene-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.scene-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.scene-heading h1 {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
}
.scene-heading span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.scene-top .chip {
  height: 54px;
  margin-left: auto;
}
.scene-top .chip img {
  width: 24px;
  height: 24px;
}

.scene-stage {
  position: relative;
  width: min(100%, calc((100dvh - 245px) * 5 / 3));
  aspect-ratio: 5 / 3;
  margin: auto;
  border-radius: clamp(24px, 3vw, 38px);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--surface-soft);
  flex: none;
  isolation: isolate;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.scene-items {
  position: absolute;
  inset: 0;
}
.scene-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  transition: transform var(--fast) var(--ease), filter var(--fast);
  touch-action: manipulation;
}
.scene-item:active {
  transform: translate(-50%, -50%) scale(0.92);
}
.scene-item__arts {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.scene-item__arts img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%) translateX(var(--dx, 0)) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  filter: drop-shadow(0 6px 8px rgba(90, 74, 60, 0.22));
  transition: transform var(--mid) var(--ease-out);
}
.scene-item:hover .scene-item__arts img,
.scene-item:focus-visible .scene-item__arts img {
  transform: translate(-50%, -50%) translateX(var(--dx, 0)) rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * 1.07));
}
.scene-item__check {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sun);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(160, 110, 20, 0.28);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--fast), transform var(--mid) var(--ease-out);
}
.scene-item.is-found .scene-item__check {
  opacity: 1;
  transform: scale(1);
}
.scene-item.is-target {
  animation: target-pulse 1s ease-in-out infinite;
  z-index: 2;
}
@keyframes target-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 196, 92, 0)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 196, 92, 0.95)); }
}

.scene-bubble {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(760px, 88%);
  padding: 12px 14px 12px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(70, 55, 50, 0.18);
  z-index: 5;
}
.scene-bubble.is-in {
  animation: pop-in 0.32s var(--ease-out) both;
}
.scene-bubble__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scene-bubble__text b {
  font-family: "Nunito", sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
}
.scene-bubble__text span {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.scene-bubble .icon-btn {
  width: 54px;
  height: 54px;
  flex: none;
}

.scene-find {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-m);
  z-index: 6;
  max-width: 90%;
}
.scene-find span {
  font-family: "Nunito", sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 900;
  white-space: nowrap;
}
.scene-find .icon-btn {
  width: 48px;
  height: 48px;
  flex: none;
}

.scene-feedback {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-m);
  z-index: 8;
  animation: pop-in 0.3s var(--ease-out) both;
  max-width: 90%;
}
.scene-feedback b {
  font-size: clamp(15px, 1.8vw, 19px);
  white-space: nowrap;
}
.scene-feedback.is-good { color: var(--green-deep); background: #e7f8ef; }
.scene-feedback.is-soft { color: #8a6a1d; background: #fff7e4; }

.scene-quiz {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 24px);
  background: rgba(255, 248, 240, 0.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.scene-quiz__card {
  width: min(560px, 92%);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  padding: clamp(16px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  animation: pop-in 0.3s var(--ease-out) both;
}
.scene-quiz__meta {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 900;
}
.scene-quiz__art {
  width: clamp(94px, 15vh, 150px);
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--unit-soft);
  display: grid;
  place-items: center;
  padding: 10px;
}
.scene-quiz__art .art--img { width: 88%; }
.scene-quiz__art .art--color,
.scene-quiz__art .art--number { width: 82%; }
.scene-quiz__prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 900;
  text-align: center;
}
.scene-quiz__prompt .icon-btn { width: 46px; height: 46px; flex: none; }
.scene-quiz__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.scene-quiz__choices.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 360px;
}
.scene-quiz__choices .choice {
  min-height: clamp(64px, 9vh, 88px);
  font-size: clamp(20px, 2.4vw, 30px);
  gap: 6px;
}
.scene-quiz__choices .choice svg { width: 1.1em; height: 1.1em; }
.choice--yes, .choice--no {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.choice__icon {
  width: clamp(40px, 5vh, 52px);
  height: clamp(40px, 5vh, 52px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.choice__icon svg {
  width: 56% !important;
  height: 56% !important;
}
.choice--yes .choice__icon { background: #5fbe96; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12); }
.choice--no .choice__icon { background: #ef8c7c; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12); }
.choice--yes { background: #effaf4; }
.choice--no { background: #fff3f0; }
.choice--yes.is-right, .choice--no.is-right { background: #d8f5e6; }
.choice--no.is-wrong, .choice--yes.is-wrong { background: #fdf1ee; }
.choice__word { font-family: "Nunito", sans-serif; font-weight: 900; }

.scene-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.scene-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.scene-hint img {
  width: 52px;
  height: 52px;
  flex: none;
}
.scene-hint div { display: grid; gap: 2px; min-width: 0; }
.scene-hint b { font-size: clamp(15px, 1.8vw, 20px); }
.scene-hint span {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.scene-bottom .btn {
  margin-left: auto;
  min-width: clamp(180px, 22vw, 260px);
}
.scene-bottom .btn.is-ready {
  animation: pulse-soft 1.6s ease-in-out infinite;
}

/* 首页场景卡 */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 28vw, 360px), 1fr));
  gap: var(--gap);
}
.scene-card {
  position: relative;
  display: block;
  height: clamp(160px, 22vh, 210px);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  box-shadow: var(--shadow-m);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast);
  isolation: isolate;
}
.scene-card:active { transform: scale(0.98); }
.scene-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.6s var(--ease-out);
}
.scene-card:hover .scene-card__bg { transform: scale(1.08); }
.scene-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 30, 45, 0.02) 20%, rgba(40, 30, 45, 0.72) 100%);
}
.scene-card__body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 38px;
  display: grid;
  gap: 1px;
  color: #fff;
}
.scene-card__body b {
  font-size: clamp(20px, 2.2vw, 27px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.scene-card__body span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 800;
}
.scene-card__body em {
  font-style: normal;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.95;
}
.scene-card__foot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.scene-card__bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
.scene-card__bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #fff;
}
.scene-card__flag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--scene-deep, var(--ink));
  font-size: 12px;
  font-weight: 900;
}

.play__ico--scene {
  background-size: cover;
  background-position: center;
}
.unit-row__ico--scene {
  background-size: cover;
  background-position: center;
}

@media (orientation: portrait) {
  .scene-stage { width: 100%; }
  .scene-bottom { flex-wrap: wrap; }
  .scene-bottom .btn { width: 100%; margin-left: 0; }
  .scene-hint { width: 100%; }
  .scene-grid { grid-template-columns: 1fr; }
  .scene-card { height: 170px; }
}

/* 场景单词条：竖屏时填补空间，方便复习 */
.scene-wordstrip {
  display: none;
  flex: none;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-s);
}
.scene-wordstrip__head {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-left: 4px;
}
.scene-wordstrip__list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.scene-wordstrip .chipword {
  padding: 6px 2px;
  border-radius: 14px;
  box-shadow: none;
  background: transparent;
  gap: 2px;
}
.scene-wordstrip .chipword .art--img { width: 36px; }
.scene-wordstrip .chipword .art--color,
.scene-wordstrip .chipword .art--number { width: 36px; border-radius: 12px; }
.scene-wordstrip .chipword .art--number { font-size: 20px; }
.scene-wordstrip .chipword b { font-size: 11px; }

@media (orientation: portrait) {
  .scene-wordstrip { display: grid; }
  .scene-stage { margin: 2px auto 0; }
}

/* 准备好答题：只做光晕呼吸，不做位移，避免误触和不可点击 */
.scene-bottom .btn.is-ready {
  animation: ready-glow 1.8s ease-in-out infinite;
}
@keyframes ready-glow {
  0%, 100% { box-shadow: 0 5px 0 var(--btn-shadow), 0 12px 22px rgba(94, 78, 110, 0.1); }
  50% { box-shadow: 0 5px 0 var(--btn-shadow), 0 0 0 12px rgba(110, 199, 159, 0.14); }
}

/* 问题行：文字在上，小喇叭在下，避免与选项按钮视觉重叠 */
.scene-quiz__prompt {
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
}
.scene-quiz__prompt .icon-btn {
  width: 40px;
  height: 40px;
}

/* 颜色场景：气球 */
.scene-balloon {
  position: relative;
  display: block;
  width: 78%;
  aspect-ratio: 0.84;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 44%),
    var(--c, #ef8c7c);
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.08), 0 8px 14px rgba(94, 78, 110, 0.18);
}
.scene-balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--c, #ef8c7c);
}
.scene-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: 2px;
  height: 64%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #c9a47c;
  opacity: 0.75;
}
.scene-quiz__art .scene-balloon {
  width: 68%;
}
.scene-quiz__art .scene-balloon::after {
  display: none;
}

/* 数字场景：糖果罐 */
.scene-jar {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 0.92;
  background: rgba(255, 255, 255, 0.72);
  border: 3px solid #e6d2be;
  border-radius: 16px 16px 26px 26px;
  box-shadow: inset 0 -10px 0 rgba(255, 255, 255, 0.55), 0 8px 14px rgba(94, 78, 110, 0.16);
}
.scene-jar__lid {
  position: absolute;
  top: -9px;
  left: 10%;
  right: 10%;
  height: 15px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffd97a, #f0b94a);
  box-shadow: 0 2px 0 rgba(180, 120, 20, 0.25);
}
.scene-jar__candies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 3px;
  width: 80%;
}
.scene-jar__candies i {
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c, #f2938a);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}
.scene-quiz__art .scene-jar {
  width: 70%;
}
.scene-quiz__art .scene-jar { width: 82%; }

/* 数一数：数字选项（不依赖识字） */
.scene-quiz__choices.is-numeral {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 430px;
}
.numeral {
  min-height: clamp(70px, 10vh, 96px);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 5px 0 rgba(94, 78, 110, 0.09), 0 12px 22px rgba(94, 78, 110, 0.08);
  font-family: "Nunito", sans-serif;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 900;
  color: var(--ink);
  transition: transform var(--fast) var(--ease);
}
.numeral:active { transform: translateY(3px); }
.numeral.is-right { background: linear-gradient(180deg, #d8f5e6, #b6e9cf); }
.numeral.is-wrong { background: #fdf1ee; animation: wobble 0.5s var(--ease); }