// 糖果色 · 童心风格
:root {
  --sky1: #bfe9ff;
  --sky2: #ffe4f2;
  --sky3: #fff6d6;
  --card: rgba(255, 255, 255, 0.82);
  --card-line: rgba(255, 255, 255, 0.9);
  --ink: #4a3b5c;
  --ink-dim: #8b7ba0;
  --pink: #ff8fb8;
  --purple: #b79bf0;
  --mint: #7ee0c0;
  --yellow: #ffd166;
  --blue: #7ec8f0;
  --shadow: 0 12px 30px -12px rgba(120, 90, 160, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Comic Sans MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  padding: 20px 14px 60px;
  display: flex;
  justify-content: center;
  background: linear-gradient(160deg, var(--sky1) 0%, var(--sky2) 48%, var(--sky3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* 飘动的云 */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 220px; height: 80px;
  top: 8%; left: -60px;
  animation: drift 42s linear infinite;
  box-shadow: 90px 14px 0 -8px rgba(255,255,255,.6), 170px -6px 0 -14px rgba(255,255,255,.55);
}
body::after {
  width: 180px; height: 66px;
  top: 36%; left: -40px;
  opacity: .7;
  animation: drift 58s linear infinite 6s;
  box-shadow: 76px 10px 0 -6px rgba(255,255,255,.5);
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(120vw); }
}

/* 烟花画布铺满全屏，压在内容之下、背景之上 */
#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 780px;
}

.screen { display: none; }
.screen.active { display: block; animation: popIn .35s ease; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 标题 ---------- */
.title {
  font-size: 38px;
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #ff8fb8, #ffb86b, #7ee0c0, #7ec8f0, #b79bf0);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowMove 6s linear infinite;
  text-shadow: 0 4px 0 rgba(255,255,255,.6);
}
@keyframes rainbowMove {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.subtitle { text-align: center; color: var(--ink-dim); font-size: 14px; margin-bottom: 24px; }

/* ---------- 水晶球（ReactBits CrystalizedBall 原生移植）---------- */
.crystal-ball {
  width: 185px;
  height: 185px;
  margin: 0 auto 18px;
  position: relative;
  overflow: hidden;
}

/* ---------- 选宠卡片 ---------- */
.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.pet-card {
  position: relative;
  background: var(--card);
  border: 3px solid var(--card-line);
  border-radius: 24px;
  padding: 18px 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.pet-card::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--c);
  opacity: .18;
  filter: blur(6px);
}
.pet-card:hover, .pet-card:active {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 18px 34px -14px var(--c);
}
.pet-emoji { font-size: 48px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.pet-name { font-size: 17px; font-weight: 700; }
.pet-desc { font-size: 12px; color: var(--ink-dim); text-align: center; line-height: 1.45; }

.hint { text-align: center; color: var(--ink-dim); font-size: 13px; margin-top: 22px; }

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 3px solid var(--card-line);
  border-radius: 22px;
  padding: 12px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  gap: 10px;
}
.hud-pet { display: flex; align-items: center; gap: 12px; }
/* HUD 圆形头像（序列帧截图派生） */
.hud-emoji img,
#hud-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background: #fff4ec;
  box-shadow: 0 0 0 2px rgba(247, 163, 75, 0.38), 0 2px 6px rgba(122, 74, 99, 0.16);
}

.hud-emoji { font-size: 34px; }
.hud-name { font-size: 16px; font-weight: 700; }
.hud-lv { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

.stage-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--mint), var(--blue));
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

.ghost {
  background: #fff;
  border: 2px solid #e8e0f2;
  color: var(--ink-dim);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: all .15s;
  white-space: nowrap;
}
.ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- 状态条 ---------- */
.bars { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.bar-row { display: grid; grid-template-columns: 42px 1fr 66px; align-items: center; gap: 10px; }
.bar-label { font-size: 13px; color: var(--ink-dim); font-weight: 700; }
.bar {
  height: 14px;
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(150,120,180,.18);
}
.fill { height: 100%; width: 0%; border-radius: 999px; transition: width .4s cubic-bezier(.34,1.56,.64,1); }
.fill.exp  { background: linear-gradient(90deg, #7ee0c0, #7ec8f0); }
.fill.food { background: linear-gradient(90deg, #ffd166, #ff9f68); }
.fill.mood { background: linear-gradient(90deg, #ff8fb8, #b79bf0); }
.bar-num { font-size: 12px; color: var(--ink-dim); text-align: right; font-weight: 700; }

/* ---------- 舞台 ---------- */
.stage-area {
  position: relative;
  /* 2026-10-22：取消铺满背景，改回中性浅底；房间由 canvas 内绘制，与小猫共用同一条地平线 */
  background-color: #fdf7ef;
  background-image: none;
  border: 4px solid #fff;
  border-radius: 30px;
  padding: 18px 16px 14px;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
}
/* 地上的草与光晕 */
/* 房间图已铺满，不再叠加底部光斑（2026-10-22） */
.stage-area::after { content: none; }

#pet-canvas {
  /* 2026-10-22：拉正——撑满舞台宽度，房间与小猫同一坐标系、同一地平线 */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: transparent;
}

.pet-status {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-dim);
  min-height: 20px;
  position: relative;
  z-index: 1;
  font-weight: 600;
}

.stage-label {
  box-shadow: 0 2px 8px rgba(120, 80, 60, 0.18);
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  padding: 3px 14px;
  border-radius: 999px;
  font-weight: 700;
}

/* 浮动文字 */
.float-text {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 22px;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 2px 0 #fff, 0 0 12px rgba(255,255,255,.9);
  animation: floatUp 1.15s ease-out forwards;
  z-index: 5;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  25%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* 屏幕轻微震动 */
body.shaking .wrap { animation: shakeIt .4s ease; }
@keyframes shakeIt {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(3px, 3px); }
}

/* ---------- 控制区 ---------- */
.controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

select {
  flex: 1;
  min-width: 118px;
  background: #fff;
  border: 3px solid #fff;
  color: var(--ink);
  padding: 11px 14px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(120,90,160,.4);
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--pink); }

.primary {
  background: linear-gradient(160deg, #ffb45c 0%, #ff8f4a 55%, #ff7a3d 100%);
  border: none;
  color: #fff;
  font-weight: 800;
  padding: 11px 28px;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 1px;
  box-shadow: 0 10px 22px -10px rgba(255, 122, 61, 0.95),
              inset 0 3px 6px rgba(255, 255, 255, 0.45),
              inset 0 -4px 0 rgba(190, 80, 30, 0.22);
  transition: transform .14s, filter .2s;
}
.primary:hover { filter: brightness(1.05); }
.primary:active { transform: scale(.96); }
.primary:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* ---------- 答题 ---------- */
.quiz-area {
  background: var(--card);
  border: 3px solid var(--card-line);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  animation: popIn .3s ease;
}
.hidden { display: none; }

.quiz-meta { display: flex; justify-content: space-between; margin-bottom: 12px; }
.quiz-tag {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  padding: 3px 12px;
  border-radius: 999px;
}
.quiz-progress { font-size: 12px; color: var(--ink-dim); font-weight: 700; }

.quiz-q { font-size: 17px; line-height: 1.65; margin-bottom: 16px; font-weight: 700; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; }

.opt {
  text-align: left;
  background: #fff;
  border: 3px solid #efe8f8;
  color: var(--ink);
  padding: 13px 18px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: transform .14s, border-color .15s, background .15s;
  box-shadow: 0 4px 10px -8px rgba(120,90,160,.5);
}
/* 选项按钮：实物感——奶油方糖块（2026-10-22） */
.opt {
  position: relative;
  background: linear-gradient(180deg, #fffdf8 0%, #fff3e0 100%);
  border: 2px solid #f6c98f;
  border-width: 2px 2px 5px;
  color: #6b4a35;
  padding: 13px 18px 14px 46px;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px -12px rgba(198, 126, 58, 0.75),
              inset 0 2px 0 #fffefb,
              inset 0 -2px 0 rgba(226, 160, 90, 0.25);
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
/* 左侧字母：糖霜小圆徽 */
.opt::before {
  content: attr(data-key);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ffe2bd 55%, #ffc07a 100%);
  color: #a35d1e;
  font-size: 12px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
  box-shadow: inset 0 -1px 2px rgba(190, 120, 45, 0.35), 0 1px 2px rgba(190, 120, 45, 0.2);
}

.opt:hover:not(:disabled) {
  border-color: #f0a95c;
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -14px rgba(198, 126, 58, 0.95),
              inset 0 2px 0 #fffefb,
              inset 0 -2px 0 rgba(226, 160, 90, 0.25);
}

.opt:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.opt:disabled { cursor: default; }
.opt.correct {
  border-color: #58cf9b;
  background: linear-gradient(180deg, #f4fff9 0%, #d9f8e7 100%);
  color: #1f7a52;
  animation: popIn .3s ease;
}
.opt.correct::before { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #b8f0d2 60%, #58cf9b 100%); color: #17643f; }
.opt.wrong {
  border-color: #ff8fa3;
  background: linear-gradient(180deg, #fff8f9 0%, #ffe3e9 100%);
  color: #b03a53;
}
.opt.wrong::before { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ffc8d3 60%, #ff8fa3 100%); color: #93273d; }

.quiz-feedback { margin-top: 14px; font-size: 14px; line-height: 1.65; min-height: 20px; font-weight: 600; }
.quiz-feedback .ok { color: #35c98a; }
.quiz-feedback .no { color: #ff6b81; }
.quiz-feedback .exp { color: var(--ink-dim); display: block; margin-top: 6px; font-size: 13px; font-weight: 500; }

/* ---------- 按钮排 ---------- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

.chip {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fff5e9 100%);
  border: 2px solid #ffe0bd;
  border-width: 2px 2px 4px;
  color: #7a5232;
  padding: 10px 18px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 8px 16px -13px rgba(198, 126, 58, 0.85),
              inset 0 1px 0 #ffffff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.chip:hover {
  border-color: #ffc98c;
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -14px rgba(230, 140, 60, 0.95),
              inset 0 1px 0 #ffffff;
}
.chip:active { transform: scale(.96); }

@media (max-width: 540px) {
  body { padding: 14px 10px 40px; }
  .title { font-size: 27px; letter-spacing: 1px; }
  #pet-canvas { width: 210px; height: 210px; }
  .hud { flex-direction: row; flex-wrap: wrap; }
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .pet-emoji { font-size: 40px; }
  .bar-row { grid-template-columns: 38px 1fr 56px; }
  .opt { font-size: 14px; padding: 12px 14px; }
}

/* 尊重减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .title { animation: none; }
}

/* ===== 封面：竖版欢迎图 + 木牌热区（2026-10-22） ===== */
body.cover-open{overflow:hidden}
.cover{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#8fd0f2 0%,#bfe3f6 26%,#efe0a6 58%,#f3c96b 100%);
  transition:opacity .45s ease,visibility .45s ease}
.cover.hide{opacity:0;visibility:hidden;pointer-events:none}
.cover-stage{position:relative;width:100%;height:100%;overflow:hidden}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
@media (min-aspect-ratio:1/1){.cover-img{object-fit:contain}}
.sign-hotspot{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sign-ring{position:absolute;inset:-8px;border-radius:16px;
  box-shadow:0 0 0 3px rgba(255,240,175,.9),0 0 26px 8px rgba(255,203,70,.6);
  animation:signPulse 2.1s ease-in-out infinite;pointer-events:none}
.sign-hint{position:absolute;left:50%;top:-36px;transform:translateX(-50%);white-space:nowrap;
  font-size:13px;font-weight:800;color:#6b3f12;background:rgba(255,249,220,.95);
  padding:5px 12px;border-radius:999px;box-shadow:0 3px 12px rgba(120,70,10,.3);
  animation:hintBob 1.8s ease-in-out infinite;pointer-events:none}
.sign-hotspot.hint-below .sign-hint{top:auto;bottom:-36px}
@keyframes signPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes hintBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
@media (prefers-reduced-motion:reduce){.sign-ring,.sign-hint{animation:none}}

/* ===== 小猫说话（TTS）+ 输入框：2026-10-22 ===== */
.cat-bubble{position:absolute;left:50%;top:10px;transform:translate(-50%,-6px) scale(.96);
  max-width:86%;padding:9px 15px;border-radius:16px;background:#fff;color:#5b4136;
  font-size:14px;line-height:1.4;font-weight:800;text-align:center;word-break:break-word;
  box-shadow:0 10px 22px -12px rgba(120,80,60,.75),inset 0 0 0 2px #ffe3ef;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;z-index:5}
.cat-bubble.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.cat-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;
  margin-left:-6px;background:#fff;border-radius:2px;transform:rotate(45deg);
  box-shadow:2px 2px 0 0 #ffe3ef}

.voice-bar{display:flex;gap:8px;align-items:center;margin-top:12px}
.voice-toggle{flex:0 0 auto;width:44px;height:44px;line-height:1;font-size:18px;cursor:pointer;
  border:2px solid #ffe0bd;border-width:2px 2px 4px;border-radius:50%;
  background:linear-gradient(180deg,#fff 0%,#fff5e9 100%);color:#7a5232;font-family:inherit}
.voice-toggle:active{transform:scale(.94)}
.voice-toggle.off{filter:grayscale(1);opacity:.7}
.voice-input{flex:1 1 auto;min-width:0;padding:10px 15px;border-radius:999px;
  border:2px solid #ffe0bd;border-width:2px 2px 4px;background:#fff;
  font-size:14px;color:#5b4136;font-family:inherit;outline:none}
.voice-input:focus{border-color:#ffb8d0;box-shadow:0 0 0 3px rgba(255,168,200,.25)}
.voice-input::placeholder{color:#bda79a}
.voice-send{flex:0 0 auto;padding:10px 20px 11px;border-radius:999px;font-size:14px;font-weight:800;
  font-family:inherit;cursor:pointer;color:#95405f;
  border:2px solid #ffc9de;border-width:2px 2px 4px;
  background:linear-gradient(180deg,#ffd9e6 0%,#ffbcd3 100%)}
.voice-send:active{transform:scale(.96)}
@media (max-width:540px){
  .cat-bubble{font-size:13px;padding:8px 12px;max-width:92%}
  .voice-toggle{width:40px;height:40px;font-size:16px}
}


/* ===== 本地问答：示例问题 chip（2026-10-22） ===== */
.qa-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.qa-chip{flex:0 1 auto;max-width:100%;padding:6px 12px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;line-height:1.3;color:#95405f;
  border:2px solid #ffd3e2;border-width:2px 2px 3px;
  background:linear-gradient(180deg,#fff 0%,#fff0f6 100%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .12s ease,background .12s ease}
.qa-chip:hover{background:linear-gradient(180deg,#fff6fa 0%,#ffe3ee 100%)}
.qa-chip:active{transform:scale(.96)}
.qa-chip::before{content:"💬 ";}
@media (max-width:540px){
  .qa-chips{gap:6px;margin-top:8px}
  .qa-chip{font-size:12px;padding:5px 9px;border-width:2px 2px 3px}
}

/* ===== 2026-10-23 手机端：语音输入条改为底部固定（不用滚到底就能看到） ===== */
/* 仅追加，不改上面任何既有规则；#voice-bar 由 cat-voice.js 动态生成在 #screen-game 里 */
body:has(#voice-bar){ padding-bottom: calc(var(--vb-h, 80px) + 8px); } /* 80px：语音条实测高 68.3px + 余量，保证滚到底时最后一行离视口底 ≥76px */

#voice-bar.voice-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: 100%;
  margin-top: 0;
  /* 桌面端内容仍与 .wrap（max-width:780px）对齐，磨砂底铺满整宽 */
  padding: 10px max(12px, calc((100vw - 780px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 250, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border-top: 2px solid rgba(255, 224, 189, .95);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 26px -18px rgba(120, 80, 60, .65);
}
/* 封面（隐私遮罩）打开时隐藏，别压住封面 */
body.cover-open #voice-bar.voice-bar{ display: none; }
/* 屏上键盘弹出时 iOS 的 fixed 会漂移，这里只保证输入框不会被电池条压住 */
@media (max-width: 540px){
  #voice-bar.voice-bar{ padding-left: 10px; padding-right: 10px; }
}


/* =========================================================
   限时口算 · 60 秒（2026-10-23 追加）
   只在文件末尾追加，不改任何既有规则。
   ========================================================= */
.arith-mask{
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 12px; overflow-y: auto;
  background: rgba(58, 42, 78, .42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.arith-mask.show{ display: flex; }
.arith-card{
  position: relative; margin: auto;
  width: min(560px, 100%); max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 16px 16px 14px;
  background: rgba(255, 253, 250, .96);
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 22px;
  box-shadow: 0 24px 60px -22px rgba(70, 48, 100, .6);
  display: flex; flex-direction: column; gap: 10px;
  animation: arithIn .22s ease both;
}
@keyframes arithIn{ from{ opacity: 0; transform: translateY(14px) scale(.98); } to{ opacity: 1; transform: none; } }

.arith-grades{ display: flex; flex-wrap: wrap; gap: 6px; }
.arith-g{
  appearance: none; border: 2px solid rgba(183, 155, 240, .45);
  background: rgba(255, 255, 255, .9); color: var(--ink-dim);
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.arith-g:active{ transform: scale(.95); }
.arith-g.on{
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 8px 18px -10px rgba(150, 110, 220, .9);
}

.arith-timer{ display: flex; align-items: center; gap: 10px; }
.arith-time{
  min-width: 62px; text-align: right;
  font-size: 24px; font-weight: 800; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; color: var(--purple);
}
.arith-time.urgent{ color: #f0506e; animation: arithPulse .8s ease-in-out infinite; }
@keyframes arithPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }
.arith-bar{
  flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(183, 155, 240, .2);
}
.arith-bar > i{
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--blue), var(--purple));
}
.arith-time.urgent ~ .arith-bar > i{ background: linear-gradient(90deg, #ffb0c4, #f0506e); }

.arith-body{ display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.arith-body.hidden, .arith-result.hidden{ display: none; }
.arith-q{
  font-size: clamp(30px, 9vw, 44px); font-weight: 800; line-height: 1.25;
  text-align: center; color: var(--ink);
  padding: 10px 4px; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.arith-q.pop{ animation: arithQ .22s ease both; }
@keyframes arithQ{ from{ transform: scale(.94); opacity: .5; } to{ transform: none; opacity: 1; } }
.arith-q.right{ color: #2fa87a; }
.arith-q.wrong{ color: #e8455f; }

.arith-row{ display: flex; gap: 8px; align-items: stretch; }
.arith-input{
  flex: 1; min-width: 0;
  font: inherit; font-size: 24px; font-weight: 700; text-align: center;
  color: var(--ink); padding: 10px 12px;
  border: 2px solid rgba(183, 155, 240, .55); border-radius: 14px;
  background: #fff; outline: none;
  font-variant-numeric: tabular-nums;
}
.arith-input:focus{ border-color: var(--purple); box-shadow: 0 0 0 4px rgba(183, 155, 240, .22); }
.arith-input.bad{ border-color: #e8455f; animation: arithShake .32s ease; }
@keyframes arithShake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-7px); } 40%{ transform: translateX(7px); }
  60%{ transform: translateX(-4px); } 80%{ transform: translateX(4px); }
}
.arith-submit{
  appearance: none; border: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; color: #fff;
  padding: 0 20px; border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 10px 20px -12px rgba(150, 110, 220, .95);
}
.arith-submit:active{ transform: scale(.97); }
.arith-stat{
  text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.arith-float{
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, 0);
  font-size: 22px; font-weight: 800; color: #2fa87a;
  pointer-events: none; text-shadow: 0 2px 10px rgba(255, 255, 255, .9);
  animation: arithFloat .9s ease-out both;
}
@keyframes arithFloat{
  0%{ opacity: 0; transform: translate(-50%, 10px) scale(.8); }
  30%{ opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100%{ opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

.arith-result{ display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.arith-rank{
  align-self: center; width: 64px; height: 64px; line-height: 60px;
  text-align: center; font-size: 34px; font-weight: 900; color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 14px 26px -14px rgba(150, 110, 220, 1);
}
.arith-rank.rank-S{ background: linear-gradient(135deg, #ffd166, #ff9f43); }
.arith-rank.rank-A{ background: linear-gradient(135deg, var(--mint), var(--blue)); }
.arith-rank.rank-B{ background: linear-gradient(135deg, var(--blue), var(--purple)); }
.arith-rank.rank-C{ background: linear-gradient(135deg, #c9bcd8, #a996c2); }
.arith-title{ text-align: center; font-size: 17px; font-weight: 800; }

.arith-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.arith-grid > div{
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 14px;
  background: rgba(183, 155, 240, .12);
}
.arith-grid b{ font-size: 19px; font-variant-numeric: tabular-nums; }
.arith-grid span{ font-size: 11px; color: var(--ink-dim); font-weight: 700; }

.arith-coins{ list-style: none; display: flex; flex-direction: column; gap: 4px; }
.arith-coins li{
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--ink-dim);
  padding: 5px 10px; border-radius: 10px;
  background: rgba(255, 209, 102, .18);
}
.arith-coins li.sum{ color: var(--ink); background: rgba(255, 209, 102, .34); }
.arith-coins li span{ font-variant-numeric: tabular-nums; }

.arith-best, .arith-grade{
  text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.arith-new{ color: #e8455f; }

.arith-foot{ display: flex; gap: 8px; padding-top: 2px; }
.arith-ghost{
  flex: 1; appearance: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-dim);
  padding: 10px 12px; border-radius: 14px;
  border: 2px solid rgba(183, 155, 240, .38);
  background: rgba(255, 255, 255, .92);
}
.arith-ghost:active{ transform: scale(.98); }

@media (max-width: 400px){
  .arith-card{ padding: 12px 12px 10px; border-radius: 18px; }
  .arith-grid{ gap: 6px; }
  .arith-grid b{ font-size: 17px; }
}

@media (prefers-reduced-motion: reduce){
  .arith-card, .arith-q.pop, .arith-float, .arith-input.bad, .arith-time.urgent{ animation: none !important; }
}


/* 口算窗口打开时锁住背后的页面滚动（2026-10-23 追加） */
body.arith-open{ overflow: hidden; }

/* ===== 移动端适配兜底（2026-10-23 追加，纯增量，不改上方任何规则）===== */
/* 1) 页面永不超出视口宽度：兜底裁切，横竖都不许出现左右滚动 */
html, body{ max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip){ html, body{ overflow-x: clip; } }

/* 2) 所有媒体元素按容器收缩，不再撑破布局 */
img, video{ max-width: 100%; height: auto; }
svg{ max-width: 100%; }
/* 猫每帧绘制的房间画布保持原尺寸比例，只在超宽时收窄 */
#pet-canvas{ max-width: 100%; height: auto; }
/* 6 个 960px 的隐藏语音 video 宿主：从源头裁住，避免撑开页面 */
#pet-video-host{ max-width: 100%; overflow: hidden; }
#pet-video-host video{ max-width: 100%; height: auto; }

/* 3) 主容器改为流式上限，窄屏不再固定 780 */
.wrap{ width: 100%; max-width: min(780px, 100%); }

/* 4) 顶部 HUD / 金币胶囊 / 换一只：允许收缩，不许溢出 */
.hud{ width: 100%; }
.hud-pet{ min-width: 0; }
.hud-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-coins{ flex: 0 1 auto; min-width: 0; }
#btn-reset{ flex: 0 0 auto; }

/* 5) 进度条三列：标签与数值列固定，中间弹性列 min-width:0 才会缩 */
.bar-row{ grid-template-columns: auto minmax(0, 1fr) auto; }
.bar{ min-width: 0; }
.bar-num{ white-space: nowrap; }

/* 6) 下拉与按钮：可换行、可收缩、文字不撑破 */
.controls{ width: 100%; }
.controls select{ flex: 0 1 auto; min-width: 0; max-width: 100%; }
.controls .primary{ flex: 0 1 auto; min-width: 0; max-width: 100%; }
.actions{ width: 100%; }
.actions .chip{ flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* 7) 答题区/选项卡：长文本换行不溢出 */
.quiz-q, .quiz-options, .quiz-feedback{ max-width: 100%; overflow-wrap: anywhere; }
.opt{ max-width: 100%; }

/* 8) 口算窗口：输入行在窄屏收紧，题目字号流式 */
.arith-row{ max-width: 100%; }
.arith-input{ min-width: 0; }
.arith-q{ font-size: clamp(19px, 6.4vw, 26px); }
.arith-card{ max-width: 100%; }
.arith-foot .arith-ghost{ flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* 9) 选蛋网格：窄屏更密，不出现横向撑破 */
.pet-grid{ max-width: 100%; }

/* 10) 极窄屏（320px 级）再收一档 */
@media (max-width: 360px){
  body{ padding: 12px 8px 40px; }
  .hud{ padding: 10px 12px; gap: 6px; }
  .hud-coins{ font-size: 13px; height: 30px; padding: 0 10px 0 6px; }
  .hud-coins svg{ width: 17px; height: 17px; }
  .hud-name{ font-size: 14px; }
  #btn-reset{ padding: 6px 12px; font-size: 12px; }
  .chip{ font-size: 12px; padding: 9px 12px 10px; }
  .controls select{ font-size: 13px; padding: 9px 10px; }
  .controls .primary{ font-size: 14px; padding: 10px 16px; }
  .title{ font-size: 24px; }
  .arith-card{ padding: 10px 10px 8px; }
  .arith-g{ font-size: 12px; padding: 7px 10px; }
  .arith-submit{ font-size: 14px; padding: 10px 12px; }
}

/* 11) 手机上禁用固定背景，避免移动端 background-attachment 造成重绘与错位 */
@media (max-width: 700px){
  body{ background-attachment: scroll; }
}

/* ============================================================
   2026-10-23 追加：「更换宠物」按钮 + 蛋区折叠
   默认展开（脚本没加载也能选蛋）；有存档时由 pet-picker.js
   加 .is-collapsed 收起。只追加，不改上方任何既有规则。
   ============================================================ */
.pet-change-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 10px 22px 11px;
  min-height: 44px;
}
.pet-change-ico { font-size: 15px; line-height: 1; }

.pet-picker {
  overflow: hidden;
  max-height: 640px;
  opacity: 1;
  transition: max-height .3s ease, opacity .22s ease, margin-bottom .3s ease;
}
.pet-picker.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

@media (max-width: 540px) {
  .pet-change-btn { width: 100%; max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-picker { transition: none; }
}

/* ============================================================
   2026-10-23 追加：小屏「一屏放下」（纯追加，不改上方任何规则）
   - 320/360 宽手机竖向空间紧张，宠物画布按视口高度收缩
   - 只作用于窄屏（<=560px），桌面与平板保持原样
   ============================================================ */
@media (max-width: 560px) {
  #pet-canvas {
    width: min(206px, 56vw, calc(100vh - 453px));
    width: min(206px, 56vw, calc(100dvh - 453px));
    height: auto;
    aspect-ratio: 1 / 1;
  }
  body { padding-top: 6px; }
  .hud { padding: 8px 10px; border-radius: 18px; margin-bottom: 8px; }
  #hud-avatar { width: 38px; height: 38px; }
  .bars { gap: 5px; margin-bottom: 8px; }
  .bar { height: 11px; }
  .stage-area { padding: 8px 8px 6px; border-radius: 22px; margin-bottom: 8px; }
  .pet-status { font-size: 12px; min-height: 16px; margin-top: 2px; }
  .stage-label { font-size: 11px; padding: 2px 10px; margin-top: 2px; }
  .controls { gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; }
  .controls select { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 12px; border-radius: 14px; }
  .controls .primary { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; border-radius: 14px; }
  .actions { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .actions .chip { flex: 0 0 auto; font-size: 12px; padding: 7px 10px 8px; }
  .qa-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 5px; margin-top: 6px; }
  .qa-chip { flex: 0 0 auto; font-size: 11px; padding: 4px 8px; }
  body:has(#voice-bar) { padding-bottom: calc(var(--vb-h, 66px) + 6px); }
  #voice-bar.voice-bar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .voice-toggle { width: 34px; height: 34px; font-size: 14px; }
  .voice-input { padding: 7px 12px; font-size: 13px; }
  .voice-send { padding: 7px 14px 8px; font-size: 13px; }
}


/* 水族馆关卡 v1 —— 2026-10-23 新增（素材 Kenney Fish Pack 2.0 / CC0） */
.aq-screen{position:fixed;inset:0;z-index:9000;display:none;background:#2E7FA8}
.aq-screen.open{display:block}
.aq-screen canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair}
.aq-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none}
.aq-top > *{pointer-events:auto}
.aq-btn{border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;color:#0C3B52;background:rgba(255,255,255,.92);box-shadow:0 3px 10px rgba(0,40,60,.28);cursor:pointer}
.aq-btn:active{transform:translateY(1px)}
.aq-close{margin-right:auto}
.aq-coins{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#0C3B52;font-weight:700;font-size:14px;box-shadow:0 3px 10px rgba(0,40,60,.24)}
.aq-coin-icon{color:#E0A22B;font-size:15px}
.aq-tip{position:absolute;left:50%;top:calc(56px + env(safe-area-inset-top));transform:translateX(-50%);padding:7px 15px;border-radius:999px;background:rgba(6,44,66,.62);color:#F2FBFF;font-size:13px;letter-spacing:.02em;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.aq-tip.hide{opacity:0}
.aq-catch{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);color:#FFF6D2;font-weight:800;font-size:22px;text-shadow:0 2px 10px rgba(0,30,50,.7);pointer-events:none;opacity:0;transition:opacity .18s}
.aq-catch.show{opacity:1}
.aq-dex{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(6,44,66,.55);border-radius:14px;padding:8px 10px;color:#EAF8FF;backdrop-filter:blur(4px)}
.aq-dex-title{font-size:12px;letter-spacing:.04em;opacity:.9;margin-bottom:6px}
.aq-dex-list{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.aq-dex-list::-webkit-scrollbar{display:none}
.aq-dex-item{flex:0 0 auto;width:44px;text-align:center;font-size:10px;line-height:1.15;opacity:.35;filter:grayscale(1)}
.aq-dex-item.got{opacity:1;filter:none}
.aq-dex-item img{width:36px;height:36px;object-fit:contain;display:block;margin:0 auto 2px}
@media (max-width:560px){
  .aq-top{gap:6px;left:8px;right:8px}
  .aq-btn{padding:6px 11px;font-size:13px}
  .aq-coins{height:30px;padding:0 9px;font-size:12px}
  .aq-tip{font-size:12px;padding:6px 12px;top:calc(50px + env(safe-area-inset-top))}
  .aq-dex-item{width:40px}
  .aq-dex-item img{width:32px;height:32px}
}


/* 星际战机关卡 v1 —— 2026-10-23 新增（素材 Kenney Pixel Shmup 1.1 / CC0） */
.sm-screen{position:fixed;inset:0;z-index:9010;display:none;background:#040A18}
.sm-screen.open{display:block}
.sm-screen canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sm-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:7px;pointer-events:none;flex-wrap:wrap}
.sm-top > *{pointer-events:auto}
.sm-btn{border:0;border-radius:999px;padding:7px 13px;font:inherit;font-weight:700;color:#0A1830;background:rgba(224,242,255,.94);box-shadow:0 3px 10px rgba(0,10,30,.5);cursor:pointer}
.sm-btn:active{transform:translateY(1px)}
.sm-close{margin-right:auto}
.sm-pill{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;background:rgba(224,242,255,.9);color:#0A1830;font-weight:700;font-size:13px;box-shadow:0 3px 10px rgba(0,10,30,.4)}
.sm-ico{color:#B5651D;font-size:14px}
.sm-hp{color:#E23E57;letter-spacing:1px}
.sm-tip{position:absolute;left:50%;top:calc(52px + env(safe-area-inset-top));transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(10,24,48,.75);color:#DFF6FF;font-size:12.5px;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.sm-tip.hide{opacity:0}
.sm-msg{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);color:#FFE37A;font-weight:800;font-size:20px;text-shadow:0 2px 10px rgba(0,10,30,.85);pointer-events:none;opacity:0;transition:opacity .18s}
.sm-msg.show{opacity:1}
.sm-retry{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:none}
.sm-screen.dead .sm-retry{display:block}
@media (max-width:560px){
  .sm-top{gap:5px;left:8px;right:8px}
  .sm-btn{padding:6px 10px;font-size:12px}
  .sm-pill{height:26px;padding:0 8px;font-size:12px}
  .sm-tip{font-size:11.5px;top:calc(46px + env(safe-area-inset-top))}
}

/* =========================================================
   B2 · 平面原木积木玩具主界面（2026-10-23 追加）
   仅追加到文件末尾，不改上面任何既有规则；新样式统一 .wb- 前缀。
   色板：底 #FBF6EC / 主木色 #C89B6A / 深木字 #5B3A1E / 木面 #D8B084
   ========================================================= */
.wb-screen{
  position: relative;
  padding: 10px 8px 18px;
  border-radius: 22px;
  overscroll-behavior-x: none;
  background:
    linear-gradient(180deg, #E7F4FD 0%, #F3FAFE 10%, #FBF6EC 32%, #FBF6EC 100%);
}
.wb-screen.active{ animation: wbScreenIn .3s ease both; }
@keyframes wbScreenIn{ from{ opacity:.65; transform: translateY(4px); } to{ opacity:1; transform:none; } }

.wb-controls{ max-width: 460px; margin: 0 auto 10px; }

/* ---------- 圆木块棋盘 ---------- */
.wb-hub{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "task reward bag shop"
    "pet  start  start sound"
    "back back   back  back";
  gap: 8px 6px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 12px 8px;
  border-radius: 22px;
  background-color: #F3E7D3;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    repeating-linear-gradient(0deg, rgba(200,155,106,.06) 0 1px, rgba(200,155,106,0) 1px 15px),
    linear-gradient(180deg, #FAF1E2 0%, #F3E7D3 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.45),
    inset 0 2px 5px rgba(255,255,255,.7),
    0 10px 22px -18px rgba(91,58,30,.5);
}
.wb-task{ grid-area: task; }
.wb-reward{ grid-area: reward; }
.wb-bag{ grid-area: bag; }
.wb-shop{ grid-area: shop; }
.wb-pet{ grid-area: pet; }
.wb-sound{ grid-area: sound; }
.wb-back{ grid-area: back; }

/* ---------- 七块圆木 ---------- */
.wb-blk{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #5B3A1E;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  background-color: #D8B084;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.07) 0 1px, rgba(91,58,30,0) 1px 8px),
    repeating-linear-gradient(0deg, rgba(91,58,30,.045) 0 1px, rgba(91,58,30,0) 1px 13px),
    linear-gradient(180deg, #E3BF98 0%, #D8B084 58%, #CFA274 100%);
  box-shadow:
    0 3px 9px rgba(91,58,30,.20),
    inset 0 0 0 2px rgba(91,58,30,.16),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -3px 4px rgba(91,58,30,.13);
  transition: transform .09s ease, box-shadow .09s ease;
}
.wb-blk:active,
.wb-blk.is-press{
  transform: scale(.97);
  box-shadow:
    0 1px 4px rgba(91,58,30,.18),
    inset 0 0 0 2px rgba(91,58,30,.26),
    inset 0 3px 7px rgba(91,58,30,.26);
}
.wb-blk:focus-visible{ outline: 3px solid #8FB6CF; outline-offset: 3px; }
.wb-ico{ font-size: 19px; line-height: 1; }
.wb-lbl{ font-size: clamp(10px, 3vw, 12px); letter-spacing: .5px; }

/* ---------- 中心最大卡片：开始小游戏 ---------- */
.wb-start{
  grid-area: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: clamp(104px, 32vw, 148px);
  padding: 14px 8px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  font-family: inherit;
  color: #4A2C12;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  background-color: #D8B084;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.075) 0 1px, rgba(91,58,30,0) 1px 10px),
    repeating-linear-gradient(0deg, rgba(91,58,30,.05) 0 1px, rgba(91,58,30,0) 1px 16px),
    linear-gradient(160deg, #E7C69F 0%, #DAB387 58%, #CFA476 100%);
  box-shadow:
    0 7px 16px -8px rgba(91,58,30,.5),
    inset 0 0 0 3px rgba(91,58,30,.14),
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -4px 6px rgba(91,58,30,.13);
  transition: transform .11s ease, box-shadow .11s ease;
}
/* 中心卡片极少量金色星点（纯 CSS，8 个，12s 缓慢飘散） */
.wb-start::before{
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.6px at 15% 22%, rgba(255,228,150,.95) 98%, transparent 100%),
    radial-gradient(circle 1.3px at 78% 16%, rgba(255,228,150,.9) 98%, transparent 100%),
    radial-gradient(circle 1.8px at 88% 62%, rgba(255,232,170,.95) 98%, transparent 100%),
    radial-gradient(circle 1.2px at 31% 76%, rgba(255,228,150,.85) 98%, transparent 100%),
    radial-gradient(circle 1.5px at 62% 88%, rgba(255,232,170,.9) 98%, transparent 100%),
    radial-gradient(circle 1.2px at 46% 34%, rgba(255,228,150,.75) 98%, transparent 100%),
    radial-gradient(circle 1.4px at 8% 54%, rgba(255,232,170,.8) 98%, transparent 100%),
    radial-gradient(circle 1.2px at 95% 32%, rgba(255,228,150,.8) 98%, transparent 100%);
  opacity: .7;
  animation: wbStars 12s ease-in-out infinite alternate;
}
@keyframes wbStars{
  from{ opacity:.42; transform: translateY(0) scale(.99); }
  to{ opacity:.9; transform: translateY(3px) scale(1.01); }
}
.wb-start-title{
  position: relative;
  z-index: 1;
  font-size: clamp(19px, 6vw, 23px);
  font-weight: 900;
  letter-spacing: 2px;
}
.wb-start-sub{
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  color: #6B4A2A;
}
.wb-start:active{
  transform: scale(.97);
  box-shadow:
    0 2px 6px rgba(91,58,30,.24),
    inset 0 0 0 3px rgba(91,58,30,.24),
    inset 0 4px 9px rgba(91,58,30,.24);
}
.wb-start:disabled{ opacity: .62; cursor: default; transform: none; }
.wb-start:focus-visible{ outline: 3px solid #8FB6CF; outline-offset: 3px; }

/* ---------- 音效声波（Pressed 时浮现，≤600ms，非独立圆块）---------- */
.wb-wave{
  position: absolute;
  right: calc(100% - 12px);
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.wb-wave i{
  position: absolute;
  right: 0;
  top: 50%;
  border: 2px solid rgba(91,58,30,.6);
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%);
}
.wb-wave i:nth-child(1){ width: 16px; height: 16px; right: 12px; }
.wb-wave i:nth-child(2){ width: 26px; height: 26px; right: 8px; }
.wb-wave i:nth-child(3){ width: 36px; height: 36px; right: 4px; }
.wb-sound.is-ping .wb-wave i{ animation: wbPing .5s ease-out 1 both; }
.wb-sound.is-ping .wb-wave i:nth-child(2){ animation-delay: .07s; }
.wb-sound.is-ping .wb-wave i:nth-child(3){ animation-delay: .14s; }
@keyframes wbPing{
  0%{ opacity: .85; transform: translateY(-50%) scale(.5); }
  100%{ opacity: 0; transform: translateY(-50%) scale(1.15); }
}

/* ---------- 木牌面板 ---------- */
.wb-panel{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(58,42,24,.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wb-panel[hidden]{ display: none; }
.wb-panel-card{
  position: relative;
  width: min(340px, 100%);
  max-height: min(80vh, 520px);
  overflow-y: auto;
  padding: 18px 16px 16px;
  border-radius: 20px;
  color: #4A2C12;
  background-color: #FBF6EC;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    linear-gradient(180deg, #FFFCF5 0%, #F6EDDD 100%);
  box-shadow:
    0 18px 40px -20px rgba(40,26,12,.55),
    inset 0 0 0 3px rgba(200,155,106,.5),
    inset 0 1px 3px rgba(255,255,255,.8);
  animation: wbPanelIn .18s ease both;
}
@keyframes wbPanelIn{ from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.wb-panel-title{
  margin: 0 34px 8px 2px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #5B3A1E;
}
.wb-panel-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #5B3A1E;
  cursor: pointer;
  background: #EAD9BF;
  box-shadow: inset 0 0 0 2px rgba(200,155,106,.6);
}
.wb-panel-close:active{ transform: scale(.97); }
.wb-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  font-size: 14px;
  border-bottom: 1px dashed rgba(200,155,106,.55);
}
.wb-row:last-of-type{ border-bottom: 0; }
.wb-row b{ font-variant-numeric: tabular-nums; color: #4A2C12; }
.wb-pet-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  font-size: 14px;
  border-bottom: 1px dashed rgba(200,155,106,.55);
}
.wb-pet-ico{ font-size: 20px; line-height: 1; }
.wb-pet-badge{
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  background: #EAD9BF;
  color: #5B3A1E;
}
.wb-pet-badge.on{ background: #C89B6A; color: #3F2610; }
.wb-note{
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #7A5B3C;
}

@media (max-width: 360px){
  .wb-hub{ gap: 7px 4px; padding: 10px 6px; }
  .wb-ico{ font-size: 17px; }
  .wb-start-title{ letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce){
  .wb-screen.active,
  .wb-panel-card{ animation: none; }
  .wb-start::before{ animation: none; }
  .wb-blk,
  .wb-start{ transition: none; }
  .wb-sound.is-ping .wb-wave i{ animation: none; opacity: .5; }
}

/* ==========================================================================
   B3 版式重排（2026-10-23）· 平面无透视原木风
   五区自上而下：A 三栏状态+下拉 / B 七块圆木 / C 开始卡 / D 宠物卡 / E 底部条
   色板：#FBF6EC 底 · #C89B6A 主木色 · #5B3A1E 字色。全部木纹用 CSS 渐变，无图片。
   ========================================================================== */
:root{
  --b3-bg:#FBF6EC;
  --b3-wood:#C89B6A;
  --b3-ink:#5B3A1E;
  --b3-ink-2:#7A5230;
  --b3-panel:#F4E6D1;
  --b3-panel-2:#F9EFDF;
}

/* ---------- 整屏：奶油米白底，去掉旧的蓝调渐变 ---------- */
.wb-screen{
  padding: 10px 10px 16px;
  border-radius: 24px;
  overflow-x: clip;
  background: var(--b3-bg);
  background-image: none;
  box-shadow: none;
}
.wb-zone{ width:100%; max-width:460px; margin:0 auto; }

/* ---------- 顶部 HUD：压扁成一条木色小条 ---------- */
#screen-game .hud.wb-hud{
  max-width: 460px;
  margin: 0 auto 10px;
  padding: 8px 10px;
  border-radius: 16px;
  color: var(--b3-ink);
  background-color: var(--b3-panel);
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 13px),
    linear-gradient(180deg, #FBF2E3 0%, #F2E4CE 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.5),
    0 6px 14px -12px rgba(91,58,30,.55);
}

/* ================= A 区 ================= */
.wb-bars{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.wb-stat{
  display: block;
  padding: 9px 9px 8px;
  border-radius: 14px;
  background-color: var(--b3-panel-2);
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    repeating-linear-gradient(0deg, rgba(200,155,106,.05) 0 1px, rgba(200,155,106,0) 1px 15px),
    linear-gradient(180deg, #FCF4E6 0%, #F3E5CF 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.42),
    0 5px 12px -12px rgba(91,58,30,.55);
}
.wb-stat-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
}
.wb-stat .wb-stat-lbl{
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--b3-ink);
  padding: 0;
}
.wb-stat .wb-pct{
  font-size: 11px;
  font-weight: 800;
  color: var(--b3-ink-2);
  font-variant-numeric: tabular-nums;
}
.wb-stat .wb-track{
  height: 9px;
  border-radius: 999px;
  background: #E7D5BB;
  box-shadow: inset 0 1px 2px rgba(91,58,30,.20);
  overflow: hidden;
}
.wb-stat .wb-track .fill{ border-radius: 999px; height: 100%; }
.wb-stat .wb-num{
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 700;
  text-align: left;
  color: #6B4A2A;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- A 区下半：两个圆角木质下拉 ---------- */
.wb-controls{
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 12px;
}
.wb-select{
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
}
.wb-select select{
  width: 100%;
  height: 40px;
  padding: 0 24px 0 10px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--b3-ink);
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: #EFDDC0;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.13) 0 1px, rgba(200,155,106,0) 1px 10px),
    linear-gradient(180deg, #F7E9D2 0%, #EBD6B5 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.55),
    inset 0 -2px 3px rgba(91,58,30,.08),
    0 5px 12px -12px rgba(91,58,30,.7);
}
.wb-select::after{
  content: "▾";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--b3-ink-2);
  pointer-events: none;
}
.wb-select select:focus-visible{
  outline: 3px solid #8FB6CF;
  outline-offset: 2px;
}

/* ================= B 区：七块圆木 4+3 ================= */
.wb-hub{
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  grid-template-areas: none;
  gap: 9px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 12px;
  padding: 11px 9px;
  border-radius: 20px;
  background-color: #F3E7D3;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    repeating-linear-gradient(0deg, rgba(200,155,106,.05) 0 1px, rgba(200,155,106,0) 1px 16px),
    linear-gradient(180deg, #FAF1E2 0%, #F2E5CF 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.42),
    0 8px 18px -18px rgba(91,58,30,.55);
}
/* 覆盖 B2 的具名网格区：全部回到自动流，第 5~7 块居中成第二行 */
.wb-hub > .wb-blk{
  grid-area: auto;
  grid-column: span 2;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 0;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--b3-ink);
  background-color: #E0BD95;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.055) 0 1px, rgba(91,58,30,0) 1px 8px),
    repeating-linear-gradient(0deg, rgba(91,58,30,.035) 0 1px, rgba(91,58,30,0) 1px 12px),
    linear-gradient(180deg, #EACAA5 0%, #DEBB93 60%, #D5AE84 100%);
  box-shadow:
    0 3px 8px -3px rgba(91,58,30,.36),
    inset 0 0 0 2px rgba(91,58,30,.14),
    inset 0 2px 2px rgba(255,255,255,.42),
    inset 0 -3px 4px rgba(91,58,30,.10);
  transition: transform .09s ease, box-shadow .09s ease;
}
.wb-hub > .wb-blk:nth-child(5){ grid-column: 2 / span 2; }
.wb-hub > .wb-blk:nth-child(6){ grid-column: 4 / span 2; }
.wb-hub > .wb-blk:nth-child(7){ grid-column: 6 / span 2; }
.wb-hub .wb-ico{ font-size: clamp(16px, 5.2vw, 20px); line-height: 1; }
.wb-hub .wb-lbl{ font-size: clamp(9.5px, 2.9vw, 11px); letter-spacing: .5px; }
.wb-hub > .wb-blk:active,
.wb-hub > .wb-blk.is-press{
  transform: scale(.97);
  box-shadow:
    0 1px 3px rgba(91,58,30,.20),
    inset 0 0 0 2px rgba(91,58,30,.24),
    inset 0 3px 6px rgba(91,58,30,.24);
}
/* 音效声波收进圆块内，避免溢出网格 */
.wb-hub .wb-wave{
  right: auto;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 50%;
}
.wb-hub .wb-wave i{ display: none; }

/* ================= C 区：C 位开始卡 ================= */
.wb-startzone{ margin: 0 auto 12px; }
.wb-start{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: clamp(142px, 44vw, 182px);
  padding: 18px 12px;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  font-family: inherit;
  color: #4A2C12;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  background-color: #D8B084;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.055) 0 1px, rgba(91,58,30,0) 1px 11px),
    repeating-linear-gradient(0deg, rgba(91,58,30,.035) 0 1px, rgba(91,58,30,0) 1px 17px),
    linear-gradient(168deg, #EBD0AB 0%, #DDB88C 58%, #D2A87C 100%);
  box-shadow:
    0 0 0 1px rgba(255,238,205,.65),
    0 12px 26px -16px rgba(91,58,30,.55),
    inset 0 0 0 3px rgba(91,58,30,.10),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -5px 8px rgba(91,58,30,.10);
  transition: transform .09s ease, box-shadow .09s ease;
}
/* 零星金色星光：两层不同节奏，纯 CSS */
.wb-start::before,
.wb-start::after{
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 18px;
  pointer-events: none;
  background-repeat: no-repeat;
}
.wb-start::before{
  background-image:
    radial-gradient(circle 1.7px at 14% 24%, rgba(255,231,160,.95) 98%, transparent 100%),
    radial-gradient(circle 1.3px at 79% 19%, rgba(255,231,160,.85) 98%, transparent 100%),
    radial-gradient(circle 1.9px at 90% 66%, rgba(255,238,186,.9) 98%, transparent 100%),
    radial-gradient(circle 1.2px at 33% 79%, rgba(255,231,160,.8) 98%, transparent 100%);
  animation: wbStarA 15s ease-in-out infinite alternate;
}
.wb-start::after{
  background-image:
    radial-gradient(circle 1.4px at 63% 86%, rgba(255,238,186,.85) 98%, transparent 100%),
    radial-gradient(circle 1.1px at 47% 33%, rgba(255,231,160,.7) 98%, transparent 100%),
    radial-gradient(circle 1.5px at 7% 57%, rgba(255,238,186,.75) 98%, transparent 100%),
    radial-gradient(circle 1.1px at 96% 38%, rgba(255,231,160,.7) 98%, transparent 100%);
  animation: wbStarB 21s ease-in-out infinite alternate;
}
@keyframes wbStarA{
  from{ opacity:.35; transform: translate3d(0,0,0); }
  50%{ opacity:.85; }
  to{ opacity:.55; transform: translate3d(1.5px,-5px,0); }
}
@keyframes wbStarB{
  from{ opacity:.6; transform: translate3d(0,2px,0); }
  to{ opacity:.3; transform: translate3d(-2px,-4px,0); }
}
.wb-start .wb-start-title{
  position: relative;
  z-index: 1;
  font-size: clamp(21px, 6.4vw, 25px);
  font-weight: 900;
  letter-spacing: 2.5px;
}
.wb-start .wb-start-sub{
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #6B4A2A;
}
.wb-start:active{
  transform: scale(.97);
  box-shadow:
    0 0 0 1px rgba(255,238,205,.5),
    0 3px 8px -6px rgba(91,58,30,.5),
    inset 0 0 0 3px rgba(91,58,30,.20),
    inset 0 5px 10px rgba(91,58,30,.22);
}

/* ================= D 区：宠物木卡 + CSS 房间 ================= */
#screen-game .wb-stage{
  position: relative;
  display: block;
  padding: 52px 14px 13px;
  margin: 0 auto 12px;
  max-width: 460px;
  border: 0;
  border-radius: 22px;
  background-color: #F6E9D4;
  text-align: center;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 3px rgba(200,155,106,.55),
    0 10px 22px -18px rgba(91,58,30,.55);
}
/* 房间层：墙面 + 护墙线 + 木地板 + 窗户 + 地毯，全部 CSS 渐变 */
.wb-room{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}
.wb-room-wall{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 57%;
  background-color: #FBF2E2;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.09) 0 2px, rgba(200,155,106,0) 2px 34px),
    linear-gradient(180deg, #FCF5E8 0%, #F1E0C6 100%);
}
.wb-room-base{
  position: absolute;
  left: 0; right: 0;
  top: calc(57% - 7px);
  height: 7px;
  background: linear-gradient(180deg, #EDD8B8 0%, #CFA77E 100%);
  box-shadow: 0 1px 0 rgba(91,58,30,.14);
}
.wb-room-floor{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 43%;
  background-color: #DCBB93;
  background-image:
    repeating-linear-gradient(0deg, rgba(91,58,30,.10) 0 1px, rgba(91,58,30,0) 1px 14px),
    repeating-linear-gradient(90deg, rgba(91,58,30,.05) 0 1px, rgba(91,58,30,0) 1px 48px),
    linear-gradient(180deg, #E4C69E 0%, #D2AC83 100%);
}
.wb-room-win{
  position: absolute;
  top: 9px;
  left: 14px;
  width: 70px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, #E6F1F6 0%, #F7FBFD 100%);
  box-shadow:
    inset 0 0 0 3px #C89B6A,
    0 2px 5px -3px rgba(91,58,30,.45);
}
.wb-room-win i{ position: absolute; background: #E2D2BA; }
.wb-room-win i:nth-child(1){ left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.wb-room-win i:nth-child(2){ top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.wb-room-win i:nth-child(3),
.wb-room-win i:nth-child(4){ display: none; }
.wb-room-rug{
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 78%;
  height: 30%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(216,173,126,.55) 0%, rgba(216,173,126,.28) 55%, rgba(216,173,126,0) 72%);
}
/* 阶段木牌徽章（右上角，复用 #stage-name 动态值） */
.wb-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  color: #4A2C12;
  background-color: #E7C9A3;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.07) 0 1px, rgba(91,58,30,0) 1px 7px),
    linear-gradient(180deg, #F2D9B6 0%, #E3C49B 100%);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.16),
    0 3px 7px -5px rgba(91,58,30,.7);
}
.wb-badge .stage-label{
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #7A5230;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.wb-badge #stage-name{ letter-spacing: .5px; }

#screen-game .wb-stage #pet-canvas{
  position: relative;
  z-index: 2;
  width: min(74%, 238px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 2px auto 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 8px 18px -14px rgba(91,58,30,.7);
}
#screen-game .wb-stage .pet-status{
  position: relative;
  z-index: 2;
  margin: 8px auto 0;
  max-width: 92%;
  min-height: 19px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--b3-ink);
}
/* 动态文案为空时的静态兜底（game.js 一旦写入就优先生效） */
#screen-game .wb-stage .pet-status:empty::before{
  content: "橘猫饿得发慌…答对题才能吃饭";
  color: #7A5230;
}

/* ================= 次要区 + E 区底部条 ================= */
.wb-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto 10px;
}
.wb-actions .chip{
  flex: 0 1 auto;
  padding: 8px 13px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--b3-ink);
  border: 0;
  background-color: #F6EAD8;
  background-image: linear-gradient(180deg, #FCF4E7 0%, #F2E3CD 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.45),
    0 4px 10px -10px rgba(91,58,30,.6);
}
.wb-actions .chip:active{ transform: scale(.97); }
/* 限时口算的旧 chip 由 arith.js 注入到 .actions，这里隐藏以免出现两个入口（E 区已有同一入口） */
#btn-arith{ display: none !important; }

.wb-foot{
  display: flex;
  gap: 7px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 18px;
  background-color: #F3E7D3;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    linear-gradient(180deg, #FAF1E2 0%, #F2E5CF 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.42),
    0 8px 18px -18px rgba(91,58,30,.55);
}
.wb-foot .wb-foot-btn{
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: clamp(10.5px, 3.1vw, 12.5px);
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--b3-ink);
  cursor: pointer;
  background-color: #E9D3B2;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.05) 0 1px, rgba(91,58,30,0) 1px 8px),
    linear-gradient(180deg, #F4E1C4 0%, #E4CBA8 100%);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.12),
    inset 0 1px 2px rgba(255,255,255,.45),
    0 3px 8px -8px rgba(91,58,30,.7);
  transition: transform .09s ease, box-shadow .09s ease;
}
.wb-foot .wb-foot-btn:active{
  transform: scale(.97);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.22),
    inset 0 3px 6px rgba(91,58,30,.22);
}
.wb-foot .wb-foot-btn:focus-visible{ outline: 3px solid #8FB6CF; outline-offset: 2px; }

/* ---------- 小屏微调：320 级 ---------- */
@media (max-width: 360px){
  .wb-screen{ padding: 8px 6px 14px; }
  .wb-hub{ gap: 7px; padding: 9px 7px; }
  .wb-stat{ padding: 8px 7px 7px; }
  .wb-stat .wb-stat-lbl{ font-size: 10.5px; }
  .wb-stat .wb-pct{ font-size: 10px; }
  .wb-foot{ gap: 6px; padding: 7px; }
  .wb-foot .wb-foot-btn{ height: 40px; font-size: 10.5px; padding: 0 2px; }
  .wb-start{ min-height: 140px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .wb-start::before,
  .wb-start::after{ animation: none; opacity: .45; }
  .wb-foot .wb-foot-btn,
  .wb-hub > .wb-blk{ transition: none; }
}

/* B3：进入游戏屏时整页也换成奶油米白底，去掉天空渐变与飘云 */
body:has(#screen-game.active){ background:#FBF6EC; background-image:none; }
body:has(#screen-game.active)::before,
body:has(#screen-game.active)::after{ display:none; }


/* ==========================================================================
   B5（2026-10-23）· 两个筛选下拉从「独占 40px 横带」压成贴顶窄胶囊
   目的：不再占住宠物展示区上方的整条横带，把中间空间让给 #wb-hub / #stage-area。
   约束：只改外观与排布；#sel-grade / #sel-subject 的 id、value、aria-label 全不动。
   说明：方案 A（与 .wb-bars 同一横向行）在 320px 下必然与三栏状态卡相交，
        与「相交面积必须为 0」冲突，故按方案 B 实现：一行居中窄胶囊，高 ≤ 32px。
   ========================================================================== */
.wb-zone-a .wb-bars{ margin-bottom: 2px; }
.wb-zone-a .wb-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  height: 30px;
  margin: 2px auto 8px;
}
.wb-zone-a .wb-controls > .wb-select{
  flex: 0 1 46%;
  max-width: 46%;
  height: 30px;
}
.wb-zone-a .wb-controls > .wb-select select{
  height: 30px;
  padding: 0 18px 0 8px;
  font-size: 12px;
  letter-spacing: .3px;
  line-height: 28px;
  border-radius: 14px;
}
.wb-zone-a .wb-controls > .wb-select::after{
  right: 7px;
  font-size: 10px;
}
@media (max-width: 360px){
  .wb-zone-a .wb-bars{ margin-bottom: 1px; }
  .wb-zone-a .wb-controls{
    height: 28px;
    margin: 1px auto 6px;
  }
  .wb-zone-a .wb-controls > .wb-select,
  .wb-zone-a .wb-controls > .wb-select select{ height: 28px; }
  .wb-zone-a .wb-controls > .wb-select select{
    font-size: 11.5px;
    padding: 0 16px 0 6px;
    line-height: 26px;
  }
}

/* ==========================================================================
   B6（2026-10-23）· 七块轮盘压紧 + 中央开始卡降高 + 手机端放开纵向滚动
   目的：手机首屏不再只剩轮盘，能看到下面的宠物/游戏区。
   约束：只追加；全部 .wb- 前缀；不改 id / value / aria-label / 点击行为 /
        游戏逻辑 / 存档键；不改上方任何既有规则。
   ========================================================================== */

/* 1) 放开纵向滚动：html/body 不再被裁切；封面、口算这类临时态仍锁滚 */
html, body{
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.cover-open,
body.arith-open{ overflow: hidden; }

/* 2) 七块圆木：固定尺寸 + 居中，横向留白收紧（仍是 4+3 居中布局） */
.wb-hub{
  gap: 5px;
  padding: 5px 8px;
  margin-bottom: 8px;
  grid-auto-rows: auto;
}
.wb-hub > .wb-blk{
  width: 64px;
  height: 64px;
  max-width: 64px;
  aspect-ratio: auto;
  justify-self: center;
  align-self: center;
}
.wb-hub .wb-ico{ font-size: 17px; }
.wb-hub .wb-lbl{ font-size: 10.5px; }

/* 3) 中央开始卡降高（仍是全页最大木块：圆角 + 星光 + 完整文案） */
.wb-startzone{ margin-bottom: 8px; }
.wb-start{
  min-height: 130px;
  padding: 12px 10px;
  gap: 6px;
  border-radius: 24px;
}
.wb-start .wb-start-title{ font-size: clamp(20px, 6vw, 23px); letter-spacing: 2px; }
.wb-start .wb-start-sub{ font-size: 11px; }

/* 4) 320 级再收一档 */
@media (max-width: 360px){
  .wb-hub{ gap: 4px; padding: 4px 6px; }
  .wb-hub > .wb-blk{ width: 56px; height: 56px; max-width: 56px; }
  .wb-hub .wb-ico{ font-size: 15px; }
  .wb-hub .wb-lbl{ font-size: 9.5px; }
  .wb-start{ min-height: 110px; padding: 10px 8px; gap: 5px; border-radius: 22px; }
  .wb-start .wb-start-title{ font-size: 19px; letter-spacing: 1.5px; }
  .wb-start .wb-start-sub{ font-size: 10.5px; }
}

/* 5) 兜底：只有封面真的还挂在屏幕上时才锁滚。
      万一 body.cover-open 残留（封面已被移除），页面仍可正常纵向滚动。 */
body.cover-open:has(#cover:not(.hide)){ overflow: hidden; }

/* 6) 封面真正显示时，连 html 一起锁住（背景不许跟着滚）；封面移除后自动放开 */
html:has(body.cover-open #cover:not(.hide)){ overflow: hidden; }

/* ==========================================================================
   B7（2026-10-23）：答题进行中收起首页内容，题干/选项顶到首屏
   只在文件末尾追加，全部限定在 body.quiz-open 下，不影响非答题状态。
   body.quiz-open 由 wb-hub.js 用 MutationObserver 自动加/去。
   ========================================================================== */
body.quiz-open{ padding-top: 8px; }

/* 1) 首页内容（含三栏状态条与次要按钮）整体收起；不 display:none 的见下面 #stage-area */
body.quiz-open #wb-hub,
body.quiz-open .wb-zone-a,
body.quiz-open .wb-startzone,
body.quiz-open .wb-foot,
body.quiz-open .wb-controls,
body.quiz-open .wb-actions{
  display: none !important;
}

/* 2) 宠物展示卡：脱离文档流 + 不可见（不用 display:none，避免宠物 canvas 尺寸被清零） */
body.quiz-open #stage-area{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 460px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* 3) 顶部血条保留（#screen-game .hud），只压一下它与答题卡之间的间距 */
body.quiz-open #screen-game .hud.wb-hud{ margin-bottom: 8px; }

/* 4) 答题卡：紧跟 hud，压缩内边距；超高时卡内滚动，避免把选项顶出屏幕 */
body.quiz-open #quiz-area{
  margin: 0 auto 8px;
  max-width: 460px;
  padding: 12px;
  max-height: calc(100dvh - 96px - 60px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: none;
}
body.quiz-open #quiz-area .quiz-meta{ margin-bottom: 6px; }
body.quiz-open #quiz-area .quiz-q{
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 8px;
  scroll-margin-top: 8px;
}
body.quiz-open #quiz-area .quiz-options{ gap: 8px; }
body.quiz-open #quiz-area .opt{
  min-height: 44px;
  padding: 10px 12px 10px 44px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 15px;
}
body.quiz-open #quiz-area .quiz-feedback{ margin-top: 8px; font-size: 13px; line-height: 1.55; min-height: 18px; }

/* 5) 底部固定语音条不遮挡：body 已有 80px 下边距（> 要求的 60px + 安全区） */
body.quiz-open{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   B8（2026-10-23）：水族馆 / 星际战机 并入 #wb-hub（3+3+3 居中），
   商店 + 水族馆 + 星际战机 同一行左右相邻；.wb-foot 只留「导入存档 / 限时活动」。
   仅文件末尾追加，.wb- 前缀，不改任何旧规则。
   ========================================================================== */
.wb-hub{
  grid-template-columns: repeat(5, max-content);
  justify-content: center;
  align-content: center;
  gap: 8px;
}
.wb-hub > .wb-blk,
.wb-hub > .wb-blk:nth-child(5),
.wb-hub > .wb-blk:nth-child(6),
.wb-hub > .wb-blk:nth-child(7){
  grid-column: auto;
  grid-row: auto;
}
.wb-hub > .wb-blk .wb-lbl{ white-space: nowrap; }
.wb-hub > #btn-shmup .wb-lbl{ font-size: 9px; letter-spacing: 0; }
.wb-hub > #btn-spectral .wb-lbl{ font-size: 9.5px; letter-spacing: 0; }

@media (max-width: 360px){
  .wb-hub{ gap: 6px; }
  .wb-hub > #btn-shmup .wb-lbl{ font-size: 8.5px; }
}

/* 底部两键：居中、不拉满，宽度收在 150px 内 */
.wb-foot{
  justify-content: center;
  gap: 10px;
}
.wb-foot .wb-foot-btn{
  flex: 0 1 150px;
  max-width: 150px;
}
@media (max-width: 360px){
  .wb-foot{ gap: 8px; }
  .wb-foot .wb-foot-btn{ flex: 0 1 138px; max-width: 138px; }
}

/* ==========================================================================
   B12（2026-10-23）：答题面板撑满可用高度 —— 答案区不再被压成一条，
   下半屏空白改由「解析卡」占住。全部限定 body.quiz-open，前缀 pet-fix-，
   不改 game.js / cat-qa.js / src。
   ========================================================================== */
body.quiz-open{
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 0;
}
body.quiz-open #screen-game{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100dvh - 14px);
  padding-bottom: calc(var(--vb-h, 62px) + 6px);
}
body.quiz-open #screen-game .hud{
  flex: 0 0 auto;
}
/* 答题卡：flex 撑满剩余高度，卡内滚动只作为极端兜底 */
body.quiz-open #quiz-area{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 0;
  padding: 14px 14px 12px;
}
body.quiz-open #quiz-area > .quiz-meta,
body.quiz-open #quiz-area > .quiz-q{
  flex: 0 0 auto;
}
/* 选项区按剩余高度均分：手指好点，也不再把答案挤成一条 */
body.quiz-open #quiz-area > .quiz-options{
  flex: 1 1 auto;
  min-height: min-content;
  justify-content: flex-start;
}
body.quiz-open #quiz-area .opt{
  flex: 1 1 0;
  min-height: 48px;
  max-height: 88px;
}
/* 解析/反馈卡：占住下半屏，答案对错与解释都在这里，不再留白 */
body.quiz-open #quiz-area > .quiz-feedback{
  flex: 0 0 auto;
  min-height: 92px;
  max-height: 46%;
  overflow-y: auto;
  margin-top: 10px;
  padding: 12px 13px 11px;
  border-radius: 16px;
  background: rgba(183, 155, 240, .10);
  border: 1px dashed rgba(183, 155, 240, .40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
body.quiz-open #quiz-area > .quiz-feedback:empty::after{
  content: "选一个答案，答完这里会给出解析";
  color: rgba(120, 100, 150, .55);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
@media (max-height: 700px){
  body.quiz-open #quiz-area{ padding: 10px 11px 8px; }
  body.quiz-open #quiz-area .opt{ min-height: 44px; max-height: 70px; }
  body.quiz-open #quiz-area > .quiz-feedback{ min-height: 72px; max-height: 42%; }
}
@media (max-width: 365px){
  body.quiz-open #quiz-area{ padding: 9px 10px 7px; }
  body.quiz-open #quiz-area > .quiz-feedback{ padding: 10px 11px 9px; }
}

/* B12 修正：答题卡要撑满宽度（flex 列里 margin:auto 会缩成内容宽）；
   页面锁定在 100dvh 内，纵向溢出交给卡内滚动，base 的 60px 下边距在答题态归零。 */
body.quiz-open{
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0 !important;
}
body.quiz-open #screen-game{
  min-height: 0;
  height: auto;
}
body.quiz-open #quiz-area{
  width: 100%;
  max-width: 460px;
  align-self: stretch;
  margin: 0 auto;
  box-sizing: border-box;
}
body.quiz-open #screen-game #qa-chips{
  flex: 0 0 auto;
}

/* B12 修正2：上一版把 #screen-game 改成 height:auto 导致内容缩成自身高度，
   这里恢复成列向 flex 撑满，并把剩余高度全部交给答题卡与反馈区。 */
body.quiz-open{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
  margin: 0;
}
body.quiz-open .wrap{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  max-height: 100dvh;
}
body.quiz-open #screen-game{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
body.quiz-open #screen-game > .hud{
  flex: 0 0 auto;
}
body.quiz-open #quiz-area{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 460px;
  align-self: center;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.quiz-open .quiz-options{
  flex: 1 1 auto;
  min-height: min-content;
  justify-content: flex-start;
}
body.quiz-open .quiz-feedback{
  flex: 1 1 auto;
  min-height: 92px;
  max-height: none;
  overflow-y: auto;
}
body.quiz-open #qa-chips{
  flex: 0 0 auto;
}

/* ==========================================================================
   B13（2026-10-24）：快捷操作条 —— 限时活动 / 喂食 / 陪玩 / 导入存档 / 导出存档
   原来散在页底 .actions 与 .wb-foot 两处，现统一搬到积木板下方、紧邻商店，
   一行五键等宽排列，不换行、不出横向滚动。
   返回按钮样式在 /js/back-btn.js 内注入，本文件不重复。
   ========================================================================== */
.wb-quick{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  margin: -4px auto 10px;
  padding: 7px 8px;
  border-radius: 16px;
  background-color: #F3E7D3;
  background-image:
    repeating-linear-gradient(90deg, rgba(200,155,106,.10) 0 1px, rgba(200,155,106,0) 1px 9px),
    linear-gradient(180deg, #FAF1E2 0%, #F2E5CF 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,155,106,.42),
    0 6px 14px -14px rgba(91,58,30,.55);
}
.wb-quick-btn{
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 0;
  border-radius: 13px;
  font-family: inherit;
  font-size: clamp(9.5px, 2.8vw, 11.5px);
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--b3-ink, #5B3A1E);
  cursor: pointer;
  background-color: #E9D3B2;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.05) 0 1px, rgba(91,58,30,0) 1px 8px),
    linear-gradient(180deg, #F4E1C4 0%, #E4CBA8 100%);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.12),
    inset 0 1px 2px rgba(255,255,255,.45),
    0 3px 8px -8px rgba(91,58,30,.7);
  transition: transform .09s ease, box-shadow .09s ease;
  -webkit-tap-highlight-color: transparent;
}
.wb-quick-btn:active{
  transform: scale(.97);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.22),
    inset 0 3px 6px rgba(91,58,30,.22);
}
.wb-quick-btn:focus-visible{ outline: 3px solid #8FB6CF; outline-offset: 2px; }
@media (max-width: 360px){
  .wb-quick{ gap: 5px; padding: 6px; }
  .wb-quick-btn{ min-height: 44px; font-size: 9.5px; }
}