/* ==========================================================================
   英语冒险岛 · 主样式表
   组织顺序：基础 → 布局 → 通用组件 → 各屏 → 动效 → 响应式
   ========================================================================== */

/* ============================ 基础 ============================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--f-cn);
  font-size: var(--t-md);
  color: var(--c-ink);
  background: #0E0D1C;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

h1, h2, h3, p { margin: 0; }
svg { display: block; }

.num  { font-family: var(--f-num); font-weight: 700; letter-spacing: .01em; }
.en   { font-family: var(--f-en); font-weight: 700; letter-spacing: .01em; }
.mono { font-family: var(--f-mono); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================ 应用外壳 ============================ */
#app {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #F7F8FC;
}

/* 每一屏 */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  animation: screen-in var(--dur-slow) var(--ease);
}
.screen.is-active { display: flex; }

.screen--sky   { background: var(--g-sky); }
.screen--party { background: var(--g-party); }
.screen--soft  { background: var(--g-soft); }
.screen--dark  { background: var(--x-bg); color: var(--x-ink); }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* 让内容区吃满剩余高度 */
.grow { flex: 1; min-height: 0; }

/* 底部浮动主操作区 */
.dock {
  position: sticky;
  bottom: 0;
  padding: var(--s-4) clamp(16px, 4vw, 40px) calc(var(--s-4) + var(--safe-b));
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .92) 38%);
  backdrop-filter: blur(8px);
}

/* ============================ 顶栏 ============================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) clamp(16px, 4vw, 40px);
  flex: 0 0 auto;
}

.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.brand__logo { width: 40px; height: 40px; flex: 0 0 auto; }
.brand__name { font-size: var(--t-md); font-weight: 700; white-space: nowrap; }
.brand__sub  { font-size: var(--t-xs); color: var(--c-ink3); margin-top: 2px; }

.topbar__right { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

/* 圆形图标按钮 */
.icon-btn {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-btn:hover  { transform: translateY(-1px); box-shadow: var(--sh-brand); }
.icon-btn:active { transform: scale(.94); }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 0 var(--s-6);
  min-height: 48px;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--c-grad); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { filter: brightness(1.06); }

.btn--ghost {
  background: #fff;
  border: 1.5px solid var(--c-line2);
  color: var(--c-ink2);
}
.btn--ghost:hover { border-color: var(--c-purple); color: var(--c-purple); }

.btn--danger { background: #FF5A5A; color: #fff; box-shadow: 0 10px 24px rgba(250, 89, 92, .3); }

.btn--lg { min-height: 60px; font-size: var(--t-lg); padding-inline: var(--s-10); }
.btn--block { width: 100%; }

.btn[disabled] {
  background: #E6E2F2 !important;
  color: var(--c-ink4) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

/* ============================ 卡片 / 面板 ============================ */
.card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s-5);
}
.card--tight { padding: var(--s-4); border-radius: var(--r-md); }
.card--pad   { padding: clamp(20px, 3vw, 32px); }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center  { justify-content: center; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }

/* 小标签 */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  background: var(--c-lav);
  color: var(--c-purple);
  white-space: nowrap;
}

/* 进度条 */
.track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}
.track__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-grad);
  transition: width var(--dur) var(--ease);
}

/* 弹层 */
.modal {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: var(--s-5);
  z-index: 60;
}
.modal[hidden] { display: none; }
.modal__mask {
  position: absolute; inset: 0;
  background: rgba(43, 39, 79, .52);
  animation: fade-in var(--dur) var(--ease);
}
.modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 90dvh;
  overflow: auto;
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--sh-4);
  animation: pop-in var(--dur-slow) var(--ease);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
}

/* 轻提示 */
.toast {
  position: fixed;
  left: 50%; bottom: calc(24px + var(--safe-b));
  transform: translateX(-50%);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: rgba(28, 26, 56, .92);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  z-index: 80;
  animation: toast-in var(--dur) var(--ease);
  pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
}

/* ============================ 首页 ============================ */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6) clamp(16px, 4vw, 40px) 0;
  text-align: center;
}
.hero__mascot { width: clamp(120px, 16vw, 168px); height: auto; }
.hero__title  { font-size: var(--t-3xl); font-weight: 700; line-height: 1.15; }
.hero__sub    { font-size: var(--t-md); color: var(--c-ink2); max-width: 30ch; }

.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--s-3);
  width: 100%;
  max-width: 760px;
  margin-top: var(--s-2);
}

.grade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-2);
  border: 3px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.grade-card:hover { transform: translateY(-3px); }
.grade-card__badge {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  font-family: var(--f-num);
  font-size: var(--t-xl);
  font-weight: 700;
}
.grade-card__name { font-size: var(--t-md); font-weight: 700; }
.grade-card__meta { font-size: var(--t-xs); color: var(--c-ink3); }
.grade-card.is-on {
  border-color: var(--c-purple);
  background: var(--c-lav);
  box-shadow: 0 10px 24px rgba(125, 92, 255, .28);
}

/* ============================ 关卡地图 ============================ */
.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}

.unit-card {
  position: relative;
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-2);
  border: 2px solid transparent;
  text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

.unit-card__no {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  font-family: var(--f-num);
  font-size: var(--t-xl);
  font-weight: 700;
  background: var(--c-lav);
  color: var(--c-purple);
}
.unit-card__info { flex: 1; min-width: 0; }
.unit-card__name {
  font-size: var(--t-md);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-card__meta { font-size: var(--t-xs); color: var(--c-ink3); margin-top: 4px; }

.unit-card.is-locked { opacity: .55; cursor: not-allowed; }
.unit-card.is-locked .unit-card__no { background: var(--c-line); color: var(--c-ink4); }
.unit-card.is-current { border-color: var(--c-purple); box-shadow: 0 12px 28px rgba(125, 92, 255, .26); }
.unit-card.is-done .unit-card__no { background: var(--c-green-bg); color: var(--c-green); }

.stars { display: flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; }

/* ============================ 玩法通用 ============================ */
.play-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) clamp(16px, 4vw, 40px) 0;
}

.play-ask {
  font-size: var(--t-sm);
  color: var(--c-ink2);
  font-weight: 500;
}

.play-progress { display: flex; align-items: center; gap: var(--s-3); }
.play-progress .track { width: clamp(120px, 22vw, 220px); }
.play-progress__num { font-family: var(--f-num); font-size: var(--t-sm); font-weight: 700; color: var(--c-purple); }

/* 反馈条 */
.feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feedback.is-ok  { background: var(--c-green-bg); }
.feedback.is-bad { background: var(--c-red-bg); }
.feedback__icon { width: 34px; height: 34px; flex: 0 0 auto; }
.feedback__title { font-size: var(--t-md); font-weight: 700; }
.feedback__sub   { font-size: var(--t-sm); color: var(--c-ink3); margin-top: 2px; }
.feedback.is-pop { animation: pop-in var(--dur) var(--ease); }

/* 配对：图片卡 + 单词卡 */
.pic-grid, .word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--s-3);
}

.pic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-2);
  border: 3px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pic-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.pic-card.is-sel     { border-color: var(--c-purple); box-shadow: 0 10px 26px rgba(125, 92, 255, .3); }
.pic-card.is-matched { border-color: var(--c-green); background: var(--c-green-card); }
.pic-card.is-matched:hover { transform: none; }

/* 插画 + 中文：三种玩法共用的一块题面 */
.wpic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
}
.wpic__art { display: block; width: 68%; margin-inline: auto; }
.wpic__art svg { width: 100%; height: auto; }
.wpic__zh {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
  max-width: 100%;
  text-align: center;
  word-break: break-word;
}

/* 听音选图：选项卡略矮，中文也收一点，保证一屏放得下 4 个 */
.pic-grid--opt .wpic__art { width: 58%; }
.pic-grid--opt .wpic__zh   { font-size: var(--t-sm); }

.word-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-2);
  border: 3px solid transparent;
  font-family: var(--f-en);
  font-size: var(--t-lg);
  font-weight: 700;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.word-card:hover { transform: translateY(-3px); border-color: #C9B8FF; }
.word-card.is-sel     { border-color: var(--c-purple); background: var(--c-lav); }
.word-card.is-matched { border-color: var(--c-green); background: var(--c-green-card); opacity: .8; }

.badge-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-green);
}
.badge-check svg { width: 18px; height: 18px; }

.is-shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

/* 字母拼写 */
.spell-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-2);
}
.spell-prompt svg { width: clamp(88px, 14vw, 132px); height: auto; }
.spell-prompt__zh { font-size: var(--t-xl); font-weight: 700; }
.spell-prompt__ph { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-ink3); }

.slots {
  display: flex;
  flex-wrap: wrap;            /* 长单词（hamburger 等）在窄屏需要折行 */
  gap: clamp(6px, 1.4vw, 14px);
  justify-content: center;
  max-width: 100%;
}
.slot {
  width: clamp(46px, 8vw, 72px);
  height: clamp(54px, 9vw, 84px);
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 3px dashed var(--c-line2);
  background: #fff;
  font-family: var(--f-en);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.slot.is-filled { border-style: solid; border-color: #C9B8FF; background: var(--c-lav); }
.slot.is-active { border-color: var(--c-purple); box-shadow: 0 0 0 5px rgba(125, 92, 255, .16); }
/* 提示送进来的字母：暖色标出来，孩子一眼知道哪些不是自己拼的 */
.slot.is-hinted { border-color: #F3C25B; background: var(--c-warm); }

/* 拼写页的提示按钮与提示说明 */
.btn--hint { color: var(--c-warm-ink); border-color: #F3D89B; }
.btn--hint:hover { background: var(--c-warm); }
.spell-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-warm);
  color: var(--c-warm-ink);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.spell-note[hidden] { display: none; }

.letter-pool {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 14px);
  justify-content: center;
  max-width: 100%;
}
.letter {
  width: clamp(46px, 7.4vw, 64px);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-2);
  font-family: var(--f-en);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.letter:hover:not([disabled]) { transform: translateY(-3px); background: var(--c-lav); color: var(--c-purple); }
.letter[disabled] { background: #F0EEF7; color: #C6C1D8; box-shadow: none; cursor: default; }

/* 听音选图 */
.speaker {
  width: clamp(120px, 18vw, 180px);
  height: clamp(120px, 18vw, 180px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(125, 92, 255, .1);
  transition: background var(--dur) var(--ease);
}
.speaker:hover { background: rgba(125, 92, 255, .16); }
.speaker svg { width: 62%; height: auto; }
.speaker.is-playing { animation: pulse .9s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(125, 92, 255, .34); }
  100% { box-shadow: 0 0 0 42px rgba(125, 92, 255, 0); }
}

/* ============================ 结算 ============================ */
.result-card {
  width: min(680px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-4);
  text-align: center;
}
.result-card__art { width: clamp(110px, 16vw, 150px); height: auto; }
.result-card__title { font-size: var(--t-2xl); font-weight: 700; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  width: 100%;
}
.stat {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-lav);
}
.stat__val { font-family: var(--f-num); font-size: var(--t-xl); font-weight: 700; color: var(--c-ink); }
.stat__label { font-size: var(--t-xs); color: var(--c-ink3); margin-top: 2px; }

/* ============================ 通用动效 ============================ */
.flash-ok  { animation: flash-ok .5s var(--ease); }
.flash-bad { animation: flash-bad .5s var(--ease); }
@keyframes flash-ok  { 50% { background: var(--c-green-bg); } }
@keyframes flash-bad { 50% { background: var(--c-red-bg); } }

/* ============================ 响应式 ============================ */
@media (max-width: 640px) {
  .brand__sub { display: none; }
  .pic-grid  { grid-template-columns: repeat(2, 1fr); }
  .word-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: 1fr; }
  .feedback  { flex-direction: column; align-items: flex-start; }
  .feedback .btn { width: 100%; }
}

/* 横屏手机：压缩纵向留白 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { gap: var(--s-2); padding-top: var(--s-3); }
  .hero__mascot { width: 84px; }
  .hero__title  { font-size: var(--t-xl); }
  .hero__sub    { display: none; }
}

/* 大屏：适度放大留白，避免内容散开 */
@media (min-width: 1100px) {
  .grade-grid { max-width: 900px; }
}