/* ============================================================
   kids-math common.css — 游戏页统一视觉规范 v5
   ------------------------------------------------------------
   设计语言：与主站 zhaotaian.cn / 首页同一套 token
   暖米白表面 + 玫瑰 / 天空蓝 / 鼠尾草绿三色 + 楷体点缀

   ★ 加载顺序：本文件在页面 inline <style> 之后加载，
     同优先级下"后者胜"，所以这里的选择器可以覆盖 inline 里的硬编码色。
   ★ 约束：只管"外观与触感"，不改任何游戏逻辑。
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* 表面 */
  --bg-1:#FAF6F1; --bg-2:#F3EEF6;
  --card:#FFFFFF; --card-soft:rgba(255,255,255,.66);
  --card-tint-rose:rgba(225,138,166,.10);
  --card-tint-sage:rgba(143,185,107,.10);
  --card-tint-sky:rgba(111,177,230,.10);

  /* 文字 */
  --ink:#463C36; --ink-soft:#6B5F58; --muted:#9A8E85;
  --line:rgba(70,60,54,.09);

  /* 三色（与首页一致） */
  --rose:#E18AA6; --sky:#6FB1E6; --sage:#8FB96B;
  --rose-deep:#C9628A; --sky-deep:#3E86C4; --sage-deep:#5E8C3A;

  /* 语义：答对 / 答错 */
  --ok:#5E8C3A; --ok-soft:rgba(143,185,107,.18); --ok-line:#8FB96B;
  --no:#D2694F; --no-soft:rgba(210,105,79,.14); --no-line:#E0A08C;

  /* 深度 */
  --shadow-0:0 1px 2px rgba(120,100,90,.06);
  --shadow-1:0 6px 16px rgba(120,100,90,.08);
  --shadow-2:0 14px 34px rgba(120,100,90,.14);
  --shadow-3:0 22px 50px rgba(120,100,90,.20);

  /* 圆角 */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* 字体 */
  --font-body:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-round:'Baloo 2','Comic Sans MS','Arial Rounded MT Bold','PingFang SC',system-ui,sans-serif;
  --font-kai:"STKaiti","KaiTi","楷体",serif;

  /* 安全区 */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{margin:0;padding:0}
body{
  /* 覆盖 inline：字族回到正文族，标题/数字另用 --font-round */
  font-family:var(--font-body) !important;
  color:var(--ink) !important;
  min-height:100vh;min-height:100svh;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  /* 暖色三光晕背景，替代原来的大面积绿 */
  background:
    radial-gradient(120% 85% at 8% -8%, var(--card-tint-rose), transparent 60%),
    radial-gradient(110% 75% at 100% 0%, var(--card-tint-sky), transparent 58%),
    radial-gradient(120% 80% at 50% 108%, var(--card-tint-sage), transparent 62%),
    linear-gradient(165deg,var(--bg-1),var(--bg-2)) !important;
  background-attachment:fixed;
  padding:
    max(16px,calc(var(--safe-t) + 12px))
    max(14px,calc(var(--safe-r) + 14px))
    max(24px,calc(var(--safe-b) + 18px))
    max(14px,calc(var(--safe-l) + 14px));
}

/* ---------- 3. 布局容器 ---------- */
.game-wrap{
  display:flex;width:100%;max-width:1080px;gap:18px;
  align-items:flex-start;margin:0 auto;min-height:100svh;
  padding:0 !important;
}
.side-panel{width:210px;flex-shrink:0}
.side-panel.right{width:190px}
.game-area{flex:1 1 auto;min-width:0}

/* ---------- 4. 顶栏：Home / 分数 / 进度 ---------- */
.top{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  position:sticky;top:0;z-index:20;
}
.top a,.btn-back{
  font-family:var(--font-body);
  font-size:.92rem !important;font-weight:700;letter-spacing:.02em;
  padding:9px 16px !important;
  border-radius:var(--r-pill) !important;
  background:var(--card) !important;
  color:var(--ink-soft) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-1) !important;
  text-decoration:none;
  transition:transform .14s ease,box-shadow .14s ease,color .14s ease;
}
.top a:hover,.btn-back:hover{color:var(--ink) !important;box-shadow:var(--shadow-2) !important}
.top a:active,.btn-back:active{transform:scale(.96)}

.score-box{
  font-family:var(--font-round);
  font-size:1.02rem !important;font-weight:700;
  padding:10px 16px !important;
  border-radius:var(--r-pill) !important;
  background:var(--card) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-1) !important;
  white-space:nowrap;
}

.progress-bar{
  width:100%;height:18px !important;
  background:rgba(70,60,54,.07) !important;
  border-radius:var(--r-pill) !important;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(120,100,90,.10) !important;
  flex-shrink:0;
  position:relative;
}
/* 进度数字：页面把 "0/10" 写在 .progress-fill 内部，而 fill 的宽度就是进度百分比。
   0% 时 fill 宽为 0，文字被 overflow:hidden 裁掉；100% 时又贴边。
   → 由 common-audio.js 在 .progress-bar 内插入一个独立的居中文字层，
     并把 fill 内原文字搬过去。这里只负责样式。
     若 JS 未插入（极端情况），fill 内原文字仍然可见，样式不算坏。 */
.progress-bar .km-progress-text{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-round);font-size:.74rem;font-weight:700;
  color:var(--ink-soft);letter-spacing:.02em;
  pointer-events:none;
}
.progress-bar .progress-fill{
  background:linear-gradient(90deg,var(--sage),var(--sky)) !important;
  border-radius:var(--r-pill) !important;
  position:relative;z-index:2;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- 5. 音效开关 ---------- */
.km-sound-toggle{
  position:fixed;
  top:max(12px,calc(var(--safe-t) + 8px));
  right:max(12px,calc(var(--safe-r) + 10px));
  z-index:60;
  width:42px;height:42px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;
  background:var(--card);color:var(--ink-soft);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:var(--shadow-1);
  cursor:pointer;user-select:none;
  transition:transform .14s ease,box-shadow .14s ease,color .14s ease,background .14s ease;
}
.km-sound-toggle:hover{box-shadow:var(--shadow-2);color:var(--ink)}
.km-sound-toggle:active{transform:scale(.9)}
.km-sound-toggle:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.km-sound-toggle.is-muted{color:var(--muted);background:rgba(255,255,255,.7)}
.km-sound-toggle.is-muted::after{
  content:"";position:absolute;width:26px;height:2px;border-radius:2px;
  background:var(--no-line);transform:rotate(-38deg);
}
.km-sound-toggle.is-muted{position:fixed}
.km-sound-toggle.is-muted .km-ico{opacity:.45}

/* ---------- 6. 游戏卡片：像一块"游戏面板" ---------- */
.card{
  position:relative;
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-xl) !important;
  box-shadow:var(--shadow-2) !important;
  padding:26px 22px !important;
  max-width:640px;width:100%;text-align:center;
  animation:cardIn .4s ease both;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--rose),var(--sky),var(--sage));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  opacity:.85;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:none}
}

.question,.q{
  font-size:clamp(1.05rem,3.4vw,1.4rem) !important;
  color:var(--ink-soft) !important;
  line-height:1.5;
}
.q strong{color:var(--sage-deep) !important;font-family:var(--font-round)}
.big-target,.big-num{
  font-family:var(--font-round);
  font-size:clamp(2.6rem,11vw,4.2rem) !important;
  color:var(--sage-deep) !important;
  line-height:1.05;
}
.hint{color:var(--muted) !important;font-size:1rem !important}

.feedback{
  font-size:clamp(1.4rem,5.5vw,2.4rem) !important;
  margin-top:14px !important;min-height:56px;
  font-weight:800;line-height:1.2;
  font-family:var(--font-round);
  color:var(--ink) !important;
}

/* ---------- 7. 通用按钮 ---------- */
.btn,.btn-next,.btn-reset,.btn-anim,.btn-check,.btn-back{
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  font-size:clamp(1rem,2.6vw,1.25rem) !important;
  padding:15px 28px !important;
  border:none !important;
  border-radius:var(--r-pill) !important;
  min-height:56px;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn-next,.btn-check,.btn-anim{
  background:linear-gradient(135deg,var(--sage) 0%,var(--sage-deep) 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(94,140,58,.34) !important;
}
.btn-reset{
  background:rgba(225,138,166,.20) !important;
  color:var(--rose-deep) !important;
  box-shadow:none !important;
}
.btn:hover:not(:disabled){filter:brightness(1.04)}
.btn:active:not(:disabled){transform:scale(.95)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.btn-next:not(:disabled),.btn-check:not(:disabled),.btn-anim:not(:disabled){
  animation:breathe 2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 8px 18px rgba(94,140,58,.30)}
  50%{box-shadow:0 8px 28px rgba(94,140,58,.48)}
}

/* ---------- 8. 答案选项 ---------- */
.choice,.num-btn,.opt{
  font-family:var(--font-round) !important;
  font-weight:800 !important;
  min-width:92px;min-height:68px;
  padding:16px 22px !important;
  font-size:clamp(1.35rem,4.6vw,2.1rem) !important;
  border-radius:var(--r-lg) !important;
  border:2px solid var(--line) !important;
  background:var(--card) !important;
  color:var(--ink) !important;
  box-shadow:var(--shadow-0) !important;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.choice:hover:not(:disabled),.num-btn:hover:not(:disabled),.opt:hover:not(:disabled){
  transform:translateY(-2px) scale(1.03);
  border-color:var(--sky) !important;
  box-shadow:0 8px 18px rgba(111,177,230,.24) !important;
}
.choice:active:not(:disabled),.num-btn:active:not(:disabled),.opt:active:not(:disabled){transform:scale(.94)}
.choice:focus-visible,.num-btn:focus-visible,.opt:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

.choice.correct,.num-btn.correct,.opt.correct{
  background:var(--ok-soft) !important;
  border-color:var(--ok-line) !important;
  color:var(--sage-deep) !important;
  box-shadow:0 8px 20px rgba(94,140,58,.26) !important;
  animation:pop .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}

.choice.wrong,.num-btn.wrong,.opt.wrong{
  background:var(--no-soft) !important;
  border-color:var(--no-line) !important;
  color:var(--no) !important;
  animation:shake .4s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
.choice:disabled,.num-btn:disabled,.opt:disabled{cursor:default}

/* ---------- 9. 网格 ---------- */
.choices{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px;margin-top:18px;
}
.num-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;max-width:100% !important;margin-top:16px;
}

/* ---------- 10. 控制按钮（拆分 / 青蛙跳） ---------- */
.ctrl-btn{
  width:58px;height:58px;font-size:1.9rem;
  border-radius:50% !important;
  border:2px solid var(--line) !important;
  background:var(--card) !important;
  color:var(--ink) !important;
  box-shadow:var(--shadow-0) !important;
  cursor:pointer;touch-action:manipulation;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.ctrl-btn:hover:not(:disabled){
  background:var(--card-tint-sage) !important;
  border-color:var(--sage) !important;
  transform:scale(1.08);
}
.ctrl-btn:active:not(:disabled){transform:scale(.9)}
.ctrl-btn:disabled{opacity:.35;cursor:default}

/* ---------- 11. 十格阵 ---------- */
.ten-grid{
  grid-template-columns:repeat(5,1fr) !important;
  gap:8px;margin:16px auto;max-width:340px;
}
.tf-cell{
  width:100% !important;height:auto !important;aspect-ratio:1/1;
  border-radius:var(--r-md) !important;
  font-size:clamp(1.5rem,7vw,2.2rem);
  border:2px dashed rgba(143,185,107,.45) !important;
  background:var(--card) !important;
  color:var(--ink) !important;
  touch-action:manipulation;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.tf-cell:hover:not(.filled):not(.disabled){
  border-color:var(--sage) !important;
  background:var(--card-tint-sage) !important;
}
.tf-cell:active:not(.filled):not(.disabled){transform:scale(.94)}
.tf-cell.filled{
  border-style:solid !important;
  border-color:var(--ok-line) !important;
  background:var(--ok-soft) !important;
}
.tf-cell:disabled{cursor:default}

/* ---------- 12. 物品格（计数 / 硬币 / 拆分数） ---------- */
.item,.cherry{
  touch-action:manipulation;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
  border-radius:var(--r-md) !important;
}
.item:hover:not(.disabled){transform:scale(1.06)}
.item:active:not(.disabled){transform:scale(.92)}
.item.selected{
  background:var(--ok-soft) !important;
  border-color:var(--ok-line) !important;
}
.item.correct-item{
  background:var(--ok-soft) !important;
  border-color:var(--ok-line) !important;
}

/* ---------- 13. 数字展示盒 ---------- */
.num-box{
  background:var(--card-tint-sky) !important;
  border:1px solid var(--line);
  border-radius:var(--r-lg) !important;
  min-width:110px;
  padding:22px 36px !important;
  color:var(--ink) !important;
}
.num-box .big-n,.big-n{
  font-family:var(--font-round);
  font-size:clamp(3rem,12vw,4rem) !important;
  color:var(--sky-deep) !important;
}
.nums{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin:16px 0;
}
.nums .vs{
  font-size:1.6em !important;
  color:var(--muted) !important;
  font-family:var(--font-round);
}

/* ---------- 14. 碗 / 容器类（拆分游戏） ---------- */
.bowl{
  background:var(--card) !important;
  border:3px dashed rgba(143,185,107,.40) !important;
  border-radius:var(--r-lg) !important;
  padding:12px 14px !important;
  color:var(--ink) !important;
  box-shadow:var(--shadow-0) !important;
}
.ctrl-group{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  color:var(--ink) !important;
  box-shadow:var(--shadow-0) !important;
}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:12px 0}

/* ---------- 15. 场景（青蛙跳） ---------- */
.scene{
  max-height:46vh;
  border-radius:var(--r-lg);
  overflow:hidden;
}

/* ---------- 16. 响应式：平板横屏 ---------- */
@media (max-width:820px){
  .nums{
    flex-wrap:nowrap !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  .nums .num-box{
    min-width:0 !important;flex:1 1 0 !important;
    padding:18px 8px !important;
  }
  .nums .vs{font-size:1.6em !important}
  .nums .big-n{font-size:clamp(2.4rem,13vw,3.4rem) !important}
}
@media (min-width:821px) and (max-width:1100px){
  .game-wrap{max-width:960px;gap:14px}
  .side-panel{width:180px}
  .side-panel.right{width:170px}
}

/* ---------- 17. 响应式：手机（顶栏贴顶 + 按钮贴底） ---------- */
@media (max-width:820px){
  .game-wrap{
    flex-direction:column;gap:0;max-width:100%;
    min-height:100svh;padding:0 !important;
  }
  .side-panel{
    width:100% !important;flex:none;order:0;
    flex-direction:row !important;align-items:center;
    gap:10px;
    padding:10px 60px 10px 12px !important;   /* 右侧给音效开关留位 */
    position:sticky;top:0;z-index:30;
    background:rgba(250,246,241,.86);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 2px 14px rgba(120,100,90,.08);
    border-bottom:1px solid var(--line);
  }
  .top{
    flex-direction:row !important;width:auto !important;max-width:none !important;
    flex:0 0 auto;gap:8px !important;align-items:center;margin-bottom:0 !important;
  }
  .top a{font-size:.85rem !important;padding:8px 14px !important;border-radius:var(--r-md) !important}
  .score-box{font-size:.9rem !important;padding:8px 14px !important;border-radius:var(--r-md) !important}
  .progress-bar{flex:1 1 auto;min-width:60px;height:12px !important;margin:0 !important}
  .progress-fill{font-size:.7rem}

  .game-area{order:1;width:100%;padding:14px 14px 18px;min-width:0}
  .card{
    max-width:100% !important;width:100% !important;
    border-radius:var(--r-lg) !important;padding:20px 16px !important;
  }

  .side-panel.right{
    order:2;width:100% !important;flex:none;
    flex-direction:row !important;flex-wrap:wrap;justify-content:center;
    gap:10px;
    padding:10px 12px calc(10px + var(--safe-b)) !important;
    position:sticky;bottom:0;z-index:30;
    background:rgba(250,246,241,.90);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 -2px 14px rgba(120,100,90,.08);
    border-top:1px solid var(--line);
  }
  .side-panel.right .btn{flex:1 1 auto;min-width:120px}

  .choices{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:12px;width:100%;margin-top:16px;
  }
  .num-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
    gap:10px;
  }
  .choice,.num-btn,.opt{width:100%;min-height:64px}
  .ten-grid{max-width:300px}
  .scene{max-height:40vh}
  .items-grid{gap:8px}
}

/* ---------- 18. 窄屏 / 矮屏 ---------- */
@media (max-width:480px){
  body{padding-left:max(12px,calc(var(--safe-l) + 12px));padding-right:max(12px,calc(var(--safe-r) + 12px))}
  .card{padding:18px 12px !important}
  .top a{font-size:.8rem !important;padding:7px 11px !important}
  .score-box{font-size:.85rem !important;padding:7px 11px !important}
  .choice,.num-btn,.opt{padding:14px 10px !important;border-radius:var(--r-md) !important}
  .btn,.btn-next,.btn-reset,.btn-check{padding:14px 20px !important;min-height:52px}
  .km-sound-toggle{width:38px;height:38px;font-size:1.05rem}
}
@media (max-height:520px) and (orientation:landscape){
  .card{padding:16px 14px !important}
  .feedback{min-height:40px !important;margin-top:8px !important}
  .ten-grid{gap:6px;margin:10px auto;max-width:260px}
  .scene{max-height:34vh}
  .btn,.btn-next,.btn-reset,.btn-check{min-height:48px;padding:12px 22px !important}
  .side-panel{padding-top:7px !important;padding-bottom:7px !important}
  .side-panel.right{padding-bottom:calc(7px + var(--safe-b)) !important}
}
@media (max-width:340px){
  .choices{grid-template-columns:repeat(2,1fr) !important}
  .num-grid{grid-template-columns:repeat(3,1fr) !important}
  .side-panel{gap:6px !important;padding-right:52px !important}
  .top a{font-size:.74rem !important;padding:6px 9px !important}
}

/* ---------- 19. 尊重"减少动态效果" ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .card{animation:none}
  .card:hover{transform:none}
  .btn-next:not(:disabled),.btn-check:not(:disabled),.btn-anim:not(:disabled){animation:none}
  .choice.correct,.num-btn.correct,.opt.correct{animation:none}
}