/* 乘法方塊大冒險 — 樣式（design §3）
 * 規則：骨架 token（--c-*／--fs-*／--sp-*…）任何主題都不改；主題只覆寫 --t-*。
 * 遊戲層（games/*.js）不要寫死顏色，請用這裡的 token 或 class。 */

/* ── 3.1 共同骨架 token ── */
:root {
  --c-ink: #1C2340;  --c-paper: #FFFFFF;  --c-cream: #FFF6DC;
  --c-stone: #6B7390;  --c-stone-lite: #C9D1E3;
  --c-ok: #2EC4B6;  --c-ok-deep: #15998D;
  --c-bad: #FF8C42; --c-bad-deep: #D9651E;
  --c-warn: #FFD23F; --c-danger: #FF3B6B; --c-gold: #FFD23F;
  --c-p1: #3FA9F5;  --c-p2: #FFC933;
  --stroke-w: 4px; --stroke: var(--stroke-w) solid var(--c-ink);
  --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px;
  --block-shadow: 0 6px 0 var(--c-ink); --block-shadow-pressed: 0 2px 0 var(--c-ink);
  --card-shadow: 0 8px 0 rgba(28,35,64,.25);
  --fs-question: clamp(56px, 9vw, 112px); --fs-answer: clamp(44px, 7vw, 80px);
  --fs-option: clamp(36px, 5vw, 56px);    --fs-key: clamp(28px, 4vw, 40px);
  --fs-h1: clamp(36px, 6vw, 64px); --fs-h2: clamp(28px, 4vw, 40px);
  --fs-body: clamp(20px, 2.4vw, 26px); --fs-small: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --ease-pop: cubic-bezier(.34,1.56,.64,1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 480ms;
  --z-deco: 0; --z-hud: 10; --z-popup: 50; --z-particles: 60; --z-toast: 70;
  --font: "Fredoka", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}

/* ── 3.2／3.5 九個主題 token ── */
body[data-theme="meadow"] { --t-bg-top:#3FA9F5; --t-bg-bottom:#9BE2FF; --t-ground:#5BD35B; --t-ground-2:#3FB63F; --t-primary:#FFC933; --t-accent:#FF5E3A; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.85); --t-timer:#2F8F3A; --t-deco:"☁️ 🌳 🌼 🐝"; }
body[data-theme="jungle"] { --t-bg-top:#0F5E3C; --t-bg-bottom:#2FA66A; --t-ground:#7BD36A; --t-ground-2:#5BB24E; --t-primary:#FFB703; --t-accent:#FF6F3C; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.88); --t-timer:#3C8D2F; --t-deco:"🌴 🐒 🍌 🦜"; }
body[data-theme="candy"]  { --t-bg-top:#FF9ACB; --t-bg-bottom:#FFD6EC; --t-ground:#FFF1A8; --t-ground-2:#FFE26B; --t-primary:#7C4DFF; --t-accent:#FF4FA3; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.88); --t-timer:#D63384; --t-deco:"🍭 🍬 🧁 🍩"; }
body[data-theme="ocean"]  { --t-bg-top:#0B3D91; --t-bg-bottom:#1FA2FF; --t-ground:#F2D398; --t-ground-2:#E0BE7A; --t-primary:#FFC933; --t-accent:#FF7F50; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.88); --t-timer:#1C78C0; --t-deco:"🐠 🐙 🫧 🐚"; }
body[data-theme="ice"]    { --t-bg-top:#7FD8FF; --t-bg-bottom:#EAF9FF; --t-ground:#FFFFFF; --t-ground-2:#D6F0FF; --t-primary:#1E6FD9; --t-accent:#FF4FA3; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.88); --t-timer:#1E6FD9; --t-deco:"❄️ ⛄ 🧊 🏔"; }
body[data-theme="lava"]   { --t-bg-top:#2B0A0A; --t-bg-bottom:#7A1F1F; --t-ground:#3A3A3A; --t-ground-2:#2A2A2A; --t-primary:#FF7A00; --t-accent:#FFD23F; --t-card:#FFF6DC; --t-hud:rgba(255,246,220,.92); --t-timer:#E8590C; --t-deco:"🌋 🔥 🪨 🦇"; }
body[data-theme="race"]   { --t-primary-ui:#FF5470; --t-bg-top:#1E6FD9; --t-bg-bottom:#D7E9FF; --t-ground:#3A3F4B; --t-ground-2:#FFFFFF; --t-primary:#FF1744; --t-accent:#FFD23F; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.9); --t-timer:#1F7FC4; --t-deco:"🏁 🏎️ 🚦 🛞"; }
body[data-theme="space"]  { --t-bg-top:#070B2B; --t-bg-bottom:#2A1D6B; --t-ground:#5A4FCF; --t-ground-2:#4538B0; --t-primary:#00E5FF; --t-accent:#FF4FA3; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.9); --t-timer:#8A5CF6; --t-deco:"🚀 🪐 ⭐ 👾"; }
body[data-theme="pixel"]  { --t-bg-top:#1A1A2E; --t-bg-bottom:#4B2E83; --t-ground:#5C5C7A; --t-ground-2:#3E3E55; --t-primary:#FFD23F; --t-accent:#FF3B6B; --t-card:#FFFFFF; --t-hud:rgba(255,255,255,.9); --t-timer:#A04CD8; --t-deco:"🏰 👾 🗡️ 🛡️"; }

/* ── 基礎 ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); font-weight: 600; color: var(--c-ink); font-size: var(--fs-body);
  background: linear-gradient(180deg, var(--t-bg-top), var(--t-bg-bottom));
  transition: background var(--dur-slow);
  -webkit-text-size-adjust: 100%;
}
button, [role="button"], .opt, .key, .cell, .btn-mode {
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--c-danger); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }

/* 背景層：天空漸層＋地面（主題差異見下方） */
#bg { position: fixed; inset: 0; z-index: var(--z-deco); pointer-events: none; overflow: hidden; }
#bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14vh;
  background: repeating-linear-gradient(90deg, var(--t-ground) 0 32px, var(--t-ground-2) 32px 64px);
  border-top: var(--stroke); }
#bg::before { content: ""; position: absolute; inset: 0; }
body[data-theme="meadow"] #bg::before { background:
  radial-gradient(circle at 18% 18%, #fff 0 22px, transparent 23px), radial-gradient(circle at 22% 16%, #fff 0 28px, transparent 29px),
  radial-gradient(circle at 75% 24%, #fff 0 20px, transparent 21px), radial-gradient(circle at 79% 22%, #fff 0 26px, transparent 27px); opacity: .85; }
body[data-theme="jungle"] #bg::before { background:
  radial-gradient(circle at 10% 100%, #1F7A4D 0 140px, transparent 141px), radial-gradient(circle at 35% 100%, #2FA66A 0 110px, transparent 111px),
  radial-gradient(circle at 65% 100%, #1F7A4D 0 150px, transparent 151px), radial-gradient(circle at 92% 100%, #2FA66A 0 120px, transparent 121px); bottom: 12vh; }
body[data-theme="candy"] #bg::before { background:
  repeating-radial-gradient(circle at 0 0, #fff 0 10px, #FF4FA3 10px 20px) 0 0/160px 160px no-repeat,
  repeating-radial-gradient(circle at 100% 0, #fff 0 10px, #7C4DFF 10px 20px) 100% 0/160px 160px no-repeat; opacity: .35; }
body[data-theme="candy"] #bg::after { border-radius: 40px 40px 0 0; }
body[data-theme="ocean"] #bg::before { background:
  radial-gradient(circle at 15% 70%, rgba(255,255,255,.25) 0 14px, transparent 15px), radial-gradient(circle at 30% 40%, rgba(255,255,255,.2) 0 9px, transparent 10px),
  radial-gradient(circle at 80% 60%, rgba(255,255,255,.25) 0 18px, transparent 19px), radial-gradient(circle at 60% 25%, rgba(255,255,255,.2) 0 8px, transparent 9px),
  linear-gradient(180deg, rgba(255,255,255,.25), transparent 12%); }
body[data-theme="ice"] #bg::before { background: linear-gradient(135deg, #fff, #BFE8FF); bottom: 14vh; top: auto; height: 30vh;
  clip-path: polygon(0 100%, 12% 30%, 24% 100%, 30% 100%, 48% 10%, 66% 100%, 72% 100%, 86% 40%, 100% 100%); }
body[data-theme="lava"] #bg::after { background: repeating-linear-gradient(90deg, #FF7A00 0 24px, #FF3B00 24px 48px); }
body[data-theme="lava"] #bg::before { background: linear-gradient(90deg, #3A3A3A 50%, transparent 50%) 0 0/48px 28px repeat-x; top: auto; bottom: 14vh; height: 56px; }
body[data-theme="race"] #bg::after { background: linear-gradient(0deg, transparent 46%, #fff 46% 54%, transparent 54%) 0 0/64px 100%, var(--t-ground); }
body[data-theme="race"] #bg::before { background:
  repeating-conic-gradient(#1C2340 0 25%, #fff 0 50%) 0 0/24px 24px; width: 48px; left: 0; right: auto; opacity: .7; }
body[data-theme="space"] #bg::before { background:
  radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent),
  radial-gradient(1px 1px at 50% 10%, #fff, transparent), radial-gradient(3px 3px at 70% 40%, #fff, transparent),
  radial-gradient(2px 2px at 85% 75%, #fff, transparent), radial-gradient(1px 1px at 20% 85%, #fff, transparent),
  radial-gradient(2px 2px at 60% 80%, #fff, transparent), radial-gradient(1px 1px at 90% 15%, #fff, transparent);
  background-size: 320px 320px; }
body[data-theme="space"] #bg::after { border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
body[data-theme="pixel"] #bg::before { background:
  linear-gradient(90deg, rgba(255,255,255,.05) 50%, transparent 50%) 0 0/32px 32px,
  linear-gradient(0deg, rgba(255,255,255,.05) 50%, transparent 50%) 0 0/32px 32px; }
body[data-theme="pixel"] #bg::after { background: repeating-linear-gradient(90deg, var(--t-ground) 0 16px, var(--t-ground-2) 16px 32px); }

#deco { position: fixed; inset: 0; z-index: var(--z-deco); pointer-events: none; overflow: hidden; }
#deco span { position: absolute; font-size: 40px; opacity: .8; animation: decoFloat var(--d, 4s) ease-in-out infinite alternate; }
@keyframes decoFloat { from { transform: translateY(-6px); } to { transform: translateY(6px); } }

#app { position: fixed; inset: 0; z-index: 1;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; animation: screenSlide .28s ease-out; }
@keyframes screenSlide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }

/* ── 3.4 元件 ── */
.btn, .btn-primary, .btn-icon, .btn-mode {
  border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--block-shadow);
  font-weight: 700; cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.btn { min-height: 64px; min-width: 160px; padding: 0 var(--sp-6); background: var(--c-paper); font-size: var(--fs-body); }
/* --t-primary-ui：按鈕／選取狀態用的主色，預設＝--t-primary；賽車 #FF1744 上 ink 字只有 4.0:1，按鈕改用同色系較亮的 #FF5470（ink 4.95:1；第 1 輪驗收） */
.btn-primary { min-height: 72px; min-width: 200px; padding: 0 var(--sp-8); background: var(--t-primary-ui, var(--t-primary)); font-size: var(--fs-h2); color: var(--c-ink); }
body[data-theme="candy"] .btn-primary, body[data-theme="ice"] .btn-primary { color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.btn-icon { width: 64px; height: 64px; min-width: 64px; padding: 0; background: var(--c-paper); font-size: 32px; border-radius: var(--radius-md); }
.btn-mode { min-width: 96px; min-height: 64px; font-size: var(--fs-body); border-radius: var(--radius-md); }
.btn-mode.p1 { background: var(--c-p1); color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.btn-mode.p2 { background: var(--c-p2); color: var(--c-ink); }
.pressed, .btn:active, .btn-primary:active, .btn-icon:active, .btn-mode:active, .key:active, .opt:active, .tf-btn:active, .lane-btn:active, .cell:active {
  transform: translateY(4px); box-shadow: var(--block-shadow-pressed);
}
button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .6; }

.title-stroke { font-weight: 700; color: #fff; -webkit-text-stroke: 3px var(--c-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--c-ink); }

.topbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--t-hud);
  border-bottom: var(--stroke); position: relative; z-index: var(--z-hud); min-height: 88px; }
.topbar .grow { flex: 1; text-align: center; font-size: var(--fs-h2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* min-width 64＋不被 flex 壓縮：雙人設定「題數 10」在直向被擠到 59 px（第 1 輪驗收 A5） */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 64px; min-width: 64px; flex-shrink: 0; padding: 0 var(--sp-4); border: var(--stroke);
  border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow); font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.chip.sel { background: var(--t-primary-ui, var(--t-primary)); }
/* 雙人設定：黃方還是預設名字 → 名字鈕虛線框提示「點我取名字」（第 1 輪驗收 L7） */
.chip.ds-default { outline: 4px dashed var(--c-danger); outline-offset: 3px; }

/* S0 開始遮罩 */
#s-start { align-items: center; justify-content: center; gap: var(--sp-8); text-align: center; }
.logo { font-size: var(--fs-h1); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 var(--sp-4); }
.logo span { display: inline-block; animation: dropIn .6s var(--ease-pop) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes dropIn { from { transform: translateY(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
.btn-start { min-height: 96px; min-width: 320px; font-size: var(--fs-h1); }
.start-men { display: flex; gap: var(--sp-8); }

/* 方塊夥伴（CSS 方塊人，§3.6） */
.blockman { --body: #3FA9F5; position: relative; width: 76px; height: 132px; display: inline-block; flex: none; animation: idle 1.6s ease-in-out infinite; }
.blockman .bm-head { position: absolute; left: 14px; top: 0; width: 48px; height: 48px; border: var(--stroke); border-radius: 8px; background: #FFD9A8;
  display: flex; align-items: center; justify-content: center; font-size: 26px; }
.blockman .bm-body { position: absolute; left: 18px; top: 46px; width: 40px; height: 44px; border: var(--stroke); border-radius: 6px; background: var(--body); }
.blockman .bm-arm, .blockman .bm-leg { position: absolute; width: 14px; height: 36px; border: var(--stroke); border-radius: 5px; background: var(--body); }
.blockman .bm-arm.l { left: 4px; top: 48px; } .blockman .bm-arm.r { right: 4px; top: 48px; }
.blockman .bm-leg { background: var(--c-ink); top: 88px; height: 40px; } .blockman .bm-leg.l { left: 20px; } .blockman .bm-leg.r { left: 42px; }
.blockman .bm-acc { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 26px; }
.blockman.small { transform: scale(.6); transform-origin: top left; width: 46px; height: 80px; }
@keyframes idle { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.blockman.jump { animation: charJump .4s var(--ease-pop); }
.blockman.shake { animation: charShake .3s; }
.blockman.dance { animation: charDance .6s ease-in-out infinite; }
@keyframes charJump { 0% { translate: 0 0; } 40% { translate: 0 -24px; } 80% { translate: 0 0; scale: 1.1 .9; } 100% { scale: 1 1; } }
@keyframes charShake { 0%,100% { translate: 0 0; } 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
@keyframes charDance { 0%,100% { translate: -8px 0; rotate: -6deg; } 50% { translate: 8px -12px; rotate: 6deg; } }

/* S1 大廳 */
.lobby-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); padding-bottom: 18vh; }
.game-card { position: relative; min-height: 220px; background: var(--g-color, #fff); border: var(--stroke); border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow), var(--block-shadow); padding: var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  animation: cardCascade .6s var(--ease-pop) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes cardCascade { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.game-card .gc-icon { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(28,35,64,.35)); }
.game-card .gc-name { font-size: var(--fs-h2); font-weight: 700; background: rgba(255,255,255,.92); border: 3px solid var(--c-ink); border-radius: var(--radius-sm); padding: 0 var(--sp-3); white-space: nowrap; }
.game-card .gc-stars { font-size: var(--fs-small); background: rgba(255,255,255,.92); border-radius: var(--radius-sm); padding: 0 var(--sp-2); }
.game-card .gc-modes { display: flex; gap: var(--sp-2); margin-top: auto; }
.game-card.wip .gc-modes { opacity: .55; }
.game-card .gc-wip { position: absolute; top: 10px; right: -6px; rotate: 10deg; background: var(--c-warn); border: 3px solid var(--c-ink); border-radius: var(--radius-sm);
  padding: 2px var(--sp-2); font-size: var(--fs-small); font-weight: 700; }
.lobby-me { cursor: pointer; }
.lobby-me .stars { color: var(--c-ink); }

/* S2 玩家 */
.form-area { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); align-items: center; padding-bottom: 18vh; }
.panel { background: var(--t-card); border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: var(--sp-6); width: min(860px, 100%); }
.panel h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-h2); }
.name-input { font: inherit; font-size: var(--fs-h2); height: 80px; width: min(420px, 100%); border: var(--stroke); border-radius: var(--radius-md); padding: 0 var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hint { font-size: var(--fs-small); color: var(--c-stone); }
.hint.bad { color: var(--c-bad-deep); font-weight: 700; }
.avatar-pick { width: 120px; height: 160px; border: var(--stroke); border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; cursor: pointer; position: relative; overflow: hidden; }
.avatar-pick.sel { background: var(--t-primary-ui, var(--t-primary)); }
/* S2 玩家設定：「出發！」固定在底部，橫向 1024×768 不用捲動就看得到（第 1 輪驗收 M1） */
.footer-bar { flex: none; display: flex; justify-content: center; padding: var(--sp-3) var(--sp-4); background: var(--t-hud); border-top: var(--stroke); position: relative; z-index: var(--z-hud); }
#s-profile .form-area { padding-bottom: var(--sp-6); }
.avatar-pick .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; background: rgba(201,209,227,.75); }

/* S3 關卡格 */
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: var(--sp-4); padding: var(--sp-6); align-content: start; padding-bottom: 18vh; }
.level-tile { min-height: 150px; border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--block-shadow); background: var(--lt-color, var(--t-primary));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; cursor: pointer; padding: var(--sp-2); }
.level-tile .lt-table { font-size: var(--fs-h2); background: rgba(255,255,255,.9); border-radius: var(--radius-sm); padding: 0 var(--sp-3); }
.level-tile .lt-name { font-size: var(--fs-small); background: rgba(255,255,255,.9); border-radius: var(--radius-sm); padding: 0 var(--sp-2); }
/* 星星放白底小牌：關卡格底色改成主題色（糖果紫、冰雪藍…）後，☆ 直接放在色塊上對比不足 */
.level-tile .lt-stars { font-size: 24px; background: rgba(255,255,255,.9); border-radius: var(--radius-sm); padding: 0 var(--sp-2); }
.level-tile.locked { filter: grayscale(1); cursor: not-allowed; }
.level-tile.mix { grid-column: span 2; }
.wrongbook-note { padding: 0 var(--sp-6); font-size: var(--fs-small); }

/* S5 單人遊玩 */
.hud { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--t-hud); border-bottom: var(--stroke); z-index: var(--z-hud); min-height: 80px; }
.hud .hud-title { font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }
.hud .hud-item { font-size: var(--fs-body); white-space: nowrap; }
.hud .hud-score { margin-left: auto; font-size: var(--fs-h2); font-weight: 700; display: inline-block; }
.hud .hud-score.bump { animation: bump .3s var(--ease-pop); }
.hud .hud-custom { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-body); }
@keyframes bump { 50% { transform: scale(1.3); } }
.hud .hud-progress:empty { display: none; }
/* 總時間最後 10 秒（totalTimer 緊張段）：變橘脈動 */
.hud .timer-total.hot { color: var(--c-bad-deep); animation: totalHot .6s ease-in-out infinite alternate; }
@keyframes totalHot { to { transform: scale(1.12); } }
.timer-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.timer { flex: 1; height: 20px; border: 3px solid var(--c-ink); border-radius: 10px; background: var(--c-paper); overflow: hidden; }
/* 計時條填色：--t-timer（主題 token，預設＝--t-ground）；淺色地面（冰雪白、糖果黃…）或深色地面（熔岩、像素）
   在白底軌道上看不清，各主題給一個對白底、對 ink 描邊都 ≥ 3:1 的中明度色（見 BUGFIX_LOG #6） */
.timer .fill { height: 100%; width: 100%; background: var(--t-timer, var(--t-ground)); transform-origin: left center; }
.timer.warn .fill { background: var(--c-warn); }
.timer.danger .fill { background: var(--c-danger); }
.timer.danger { animation: timerPulse .6s ease-in-out infinite; }
@keyframes timerPulse { 50% { transform: scaleY(1.25); } }
.timer-label { min-width: 72px; font-size: var(--fs-body); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;
  background: var(--t-hud); border-radius: var(--radius-sm); padding: 0 var(--sp-2); }

.solo-main { flex: 1; display: grid; grid-template-columns: 180px 1fr auto; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-4); min-height: 0; }
.solo-side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); }
.combo { min-height: 48px; padding: 0 var(--sp-3); border: 3px solid var(--c-ink); border-radius: var(--radius-md); background: var(--c-paper);
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }
.combo.off { visibility: hidden; }
/* 單人左欄 180 px：火焰與「連擊 ×N」分兩行，連擊 ≥10（三朵火）也不溢出 */
.solo-side { min-width: 0; }
.solo-side .combo { flex-direction: column; gap: 0; max-width: 100%; padding: 2px var(--sp-2); line-height: 1.15; }
.solo-side .combo .combo-n { white-space: nowrap; }
.combo .flame { display: inline-block; animation: flame .35s ease-in-out infinite alternate; }
@keyframes flame { from { transform: translateY(0) scale(1); } to { transform: translateY(-3px) scale(1.12); } }
.mult { font-size: var(--fs-small); background: var(--t-hud); border-radius: var(--radius-sm); padding: 0 var(--sp-2); }
.revenge-badge { background: var(--c-danger); color: #fff; text-shadow: 0 2px 0 var(--c-ink); border: 3px solid var(--c-ink); border-radius: var(--radius-md);
  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-body); font-weight: 700; animation: revengeBadge .3s var(--ease-pop); white-space: nowrap; }
@keyframes revengeBadge { from { transform: scale(.3) rotate(-8deg); } to { transform: none; } }
.stage { background: var(--t-card); border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-4); min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.q-text { font-size: var(--fs-question); font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; }
.q-sub { font-size: var(--fs-body); text-align: center; }
.q-text .hole { display: inline-block; min-width: .8em; border: 4px dashed var(--c-ink); border-radius: var(--radius-sm); padding: 0 .1em; animation: holeBlink 1s steps(2) infinite; }
@keyframes holeBlink { 50% { border-color: var(--t-accent); } }
.answer-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); }
.answer-box { min-width: 220px; height: 88px; border: var(--stroke); border-radius: var(--radius-md); background: var(--c-cream);
  font-size: var(--fs-answer); font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.answer-box .caret { animation: holeBlink 1s steps(2) infinite; opacity: .7; }
.answer-box.ok { background: var(--c-ok); color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.answer-box.bad { background: var(--c-bad); }
.feedback { font-size: var(--fs-h2); font-weight: 700; min-height: 1.2em; }
.feedback.ok { color: var(--c-ok-deep); } .feedback.bad { color: var(--c-bad-deep); }
.wrongShake { animation: wrongShake .3s; }
@keyframes wrongShake { 0%,100% { translate: 0 0; } 20%,60% { translate: -8px 0; } 40%,80% { translate: 8px 0; } }

.input-area { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.keypad { display: grid; grid-template-columns: repeat(3, 88px); grid-auto-rows: 72px; gap: 12px; }
.key { border: var(--stroke); border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow); font-size: var(--fs-key); font-weight: 700; cursor: pointer; }
.key.k-back { background: var(--c-cream); } .key.k-ok { background: var(--c-ok-deep); color: #fff; }
.tf-row { display: flex; gap: var(--sp-4); }
.tf-btn { min-height: 120px; min-width: 280px; border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--block-shadow); color: #fff; font-size: var(--fs-h2); font-weight: 700; cursor: pointer; text-shadow: 0 2px 0 var(--c-ink); }
.tf-btn.t { background: var(--c-ok-deep); } .tf-btn.f { background: var(--c-bad-deep); }
/* 對錯雙鈕版型（橫向）：雙鈕放在題目區下方、與題目區同寬，不和題目區搶同一列（否則題目區只剩 ~200 px） */
@media (orientation: landscape) {
  .solo-main[data-input="tf"] { grid-template-columns: 180px 1fr; grid-template-rows: 1fr auto; }
  .solo-main[data-input="tf"] .solo-side { grid-row: 1 / span 2; }
  .solo-main[data-input="tf"] .input-area { grid-column: 2; align-items: center; }
  .solo-main[data-input="tf"] .tf-btn { min-height: 112px; }
}
.cells { display: grid; gap: var(--sp-2); grid-template-columns: repeat(var(--cols, 4), 96px); grid-auto-rows: 96px; }
.cell { border: var(--stroke); border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow); font-size: var(--fs-key); font-weight: 700; cursor: pointer; position: relative; }
.cell.marked { background: var(--c-ok); color: #fff; } .cell.marked::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-size: 20px; }
.cell.p1 { background: var(--c-p1); color: #fff; } .cell.p2 { background: var(--c-p2); }
.lanes { display: flex; gap: var(--sp-3); }
.lane-btn { min-height: 96px; flex: 1; min-width: 120px; border: var(--stroke); border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow); font-size: var(--fs-option); font-weight: 700; cursor: pointer; }

/* S6 雙人 */
#s-duel { display: none; }
#s-duel.active { display: grid; grid-template-rows: 1fr auto 1fr; }
.half { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); min-height: 0; position: relative; }
.half.rot { transform: rotate(180deg); }
.half[data-side="P1"] { --pc: var(--c-p1); }
.half[data-side="P2"] { --pc: var(--c-p2); }
.side-hud { display: flex; align-items: center; gap: var(--sp-3); background: var(--t-hud); border: 3px solid var(--c-ink); border-left: 12px solid var(--pc);
  border-radius: var(--radius-md); padding: 2px var(--sp-3); min-height: 56px; }
.side-hud .sh-name { font-weight: 700; font-size: var(--fs-body); white-space: nowrap; }
.side-hud .sh-score { font-weight: 700; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.side-hud .timer { min-width: 120px; }
.side-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 0; }
.side-q { font-size: clamp(44px, 6vw, 72px); font-weight: 700; white-space: nowrap; }
.opts { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: var(--sp-3); width: 100%; touch-action: none; }
.opt { min-height: 96px; border: var(--stroke); border-radius: var(--radius-md); background: var(--c-paper); box-shadow: var(--block-shadow);
  font-size: var(--fs-option); font-weight: 700; cursor: pointer; position: relative; touch-action: none; }
.opt.ok { background: var(--c-ok); color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.opt.ok::after { content: "✓"; position: absolute; top: 2px; right: 8px; font-size: 24px; }
.opt.bad { background: var(--c-bad); animation: wrongShake .3s; }
.opt.bad::after { content: "✗"; position: absolute; top: 2px; right: 8px; font-size: 24px; }
.opt.reveal { outline: 4px dashed var(--c-ok-deep); outline-offset: -8px; }
.opt.dim { opacity: .45; }
/* both 模式：已作答但還沒揭曉（不洩漏對錯） */
.opt.picked { background: var(--c-stone-lite); outline: 5px solid var(--c-ink); outline-offset: -9px; }
.opt.picked::after { content: "⏳"; position: absolute; top: 2px; right: 8px; font-size: 22px; }
.side-msg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: var(--fs-h2); font-weight: 700; background: var(--c-paper);
  border: var(--stroke); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-6); box-shadow: var(--block-shadow); pointer-events: none; white-space: nowrap; z-index: 5; animation: stealSlide .3s var(--ease-pop); }
.side-msg.win { background: var(--c-ok); color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.side-msg.tie { background: var(--c-gold); }
.side-msg.bad { background: var(--c-bad); }
@keyframes stealSlide { from { translate: -50% 40%; opacity: 0; } to { translate: -50% -50%; opacity: 1; } }
.half.waiting .side-body > * { visibility: hidden; }
/* 輪流制：沒輪到的那半不顯示計時條（引擎也只讓作答那半倒數；第 1 輪驗收 L4） */
.half.waiting .side-hud .timer, .half.waiting .side-hud .timer-label { visibility: hidden; }
.half.waiting::after { content: "等等換你！"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-h2); font-weight: 700; background: rgba(28,35,64,.45); color: #fff; border-radius: var(--radius-lg); }
.half.tieflash { animation: tieFlash .4s; }
@keyframes tieFlash { 50% { background: rgba(255,210,63,.5); } }
.center-band { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--t-hud); border-top: var(--stroke); border-bottom: var(--stroke);
  min-height: 80px; touch-action: none; z-index: var(--z-hud); }
.center-band .cb-progress { font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }
.center-band .cb-slot { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-body); }
.vs-score { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.vs-score .p1 { color: var(--c-p1); -webkit-text-stroke: 1px var(--c-ink); } .vs-score .p2 { color: var(--c-p2); -webkit-text-stroke: 1px var(--c-ink); }

/* S4 雙人設定 */
#s-duelsetup.active { display: grid; grid-template-rows: 1fr auto 1fr; }
.ds-half { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); }
.ds-half.rot { transform: rotate(180deg); }
.ds-half .ready { min-height: 96px; font-size: var(--fs-h2); }
.ds-half[data-side="P1"] .ready { background: var(--c-p1); color: #fff; text-shadow: 0 2px 0 var(--c-ink); }
.ds-half[data-side="P2"] .ready { background: var(--c-p2); }
.ds-half .ready.on { outline: 6px solid var(--c-ok); }
.ds-mid { background: var(--t-hud); border-top: var(--stroke); border-bottom: var(--stroke); padding: var(--sp-3) var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ds-mid .ds-title { font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }

/* 結算 */
.result { align-items: center; justify-content: center; text-align: center; gap: var(--sp-3); padding: var(--sp-4); }
/* 結算卡：內容區可捲動（加分列多時），按鈕列固定在底部永遠看得到 */
.result .result-body { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.result .result-body > :first-child { margin-top: auto; }
.result .result-body > :last-child { margin-bottom: auto; }
.result .actions { flex: none; }
@media (max-height: 820px) {
  .result .stars-big { font-size: 56px; min-height: 68px; }
  .result .upload-msg { min-height: 48px; }
  .result .stat b { font-size: var(--fs-body); }
}
.result h1 { margin: 0; font-size: var(--fs-h1); }
.result .stars-big { font-size: 72px; display: flex; gap: var(--sp-4); justify-content: center; min-height: 90px; }
.result .stars-big span { display: inline-block; opacity: 0; }
.result .stars-big span.pop { animation: starPop .5s var(--ease-pop) forwards; }
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.result .stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.stat { background: var(--t-card); border: 3px solid var(--c-ink); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); }
.stat b { font-size: var(--fs-h2); }
.result .actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.upload-msg { min-height: 64px; display: flex; align-items: center; justify-content: center; }
.duel-rows { display: flex; flex-direction: column; gap: var(--sp-3); width: min(900px, 100%); }
.duel-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: center; background: var(--t-card); border: var(--stroke);
  border-left: 16px solid var(--pc); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); }

/* 英雄榜 */
.board-tabs { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; align-items: center; }
.board-table { width: min(960px, calc(100% - 32px)); margin: 0 auto 18vh; border-collapse: separate; border-spacing: 0 6px; font-size: var(--fs-body); }
.board-table td, .board-table th { background: var(--t-card); padding: var(--sp-2) var(--sp-3); text-align: left; white-space: nowrap; }
.board-table th { font-size: var(--fs-small); background: var(--t-hud); }
.board-table tr td:first-child, .board-table tr th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.board-table tr td:last-child, .board-table tr th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.board-table tr.me td { background: var(--c-gold); }
.board-failed { padding: 0 var(--sp-4) var(--sp-3); justify-content: center; }
.board-select { font: inherit; font-size: var(--fs-body); min-height: 64px; border: var(--stroke); border-radius: var(--radius-md); padding: 0 var(--sp-3); background: var(--c-paper); }

/* 彈窗、toast、橫幅 */
#popup-layer { position: fixed; inset: 0; z-index: var(--z-popup); display: none; align-items: center; justify-content: center; background: rgba(28,35,64,.6); padding: var(--sp-4); }
#popup-layer.open { display: flex; }
.popup { background: var(--c-paper); border: var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--block-shadow); width: min(560px, 100%);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); max-height: 92vh; overflow-y: auto; animation: popIn .25s var(--ease-pop); }
.popup h2 { margin: 0; text-align: center; font-size: var(--fs-h2); }
.popup .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.set-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-body); }
.toggle { min-width: 96px; min-height: 64px; border: var(--stroke); border-radius: var(--radius-md); background: var(--c-stone-lite); box-shadow: var(--block-shadow); font-weight: 700; font-size: var(--fs-small); cursor: pointer; }
.toggle.on { background: var(--c-ok-deep); color: #fff; }
.slider { width: 100%; height: 64px; accent-color: var(--c-ink); }
#toast-layer { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; pointer-events: none; }
.toast { min-height: 56px; padding: 0 var(--sp-6); display: flex; align-items: center; background: var(--c-ink); color: #fff; border-radius: var(--radius-md); font-size: var(--fs-body); box-shadow: var(--block-shadow); animation: popIn .25s var(--ease-pop); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-particles); pointer-events: none; }
#banner-layer { position: fixed; inset: 0; z-index: var(--z-particles); pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: var(--fs-h1); padding: var(--sp-3) 0; background: var(--t-accent);
  border-top: var(--stroke); border-bottom: var(--stroke); animation: bannerIn .9s ease-out forwards; }
@keyframes bannerIn { 0% { transform: translateX(-100%); } 25%,75% { transform: none; } 100% { transform: translateX(100%); opacity: 0; } }
.bigtext { font-size: clamp(64px, 14vw, 160px); animation: bigPop 1.2s var(--ease-pop) forwards; }
.bigtext.rainbow { background: linear-gradient(90deg, #FF3B6B, #FFD23F, #2EC4B6, #3FA9F5, #7C4DFF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3px var(--c-ink); }
@keyframes bigPop { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.flash { position: fixed; inset: 0; background: #fff; animation: flash .4s forwards; }
.flash.gold { background: transparent; border: 16px solid var(--c-gold); }
@keyframes flash { from { opacity: .8; } to { opacity: 0; } }
.fly { position: fixed; z-index: var(--z-particles); font-size: var(--fs-h2); font-weight: 700; color: var(--c-gold); -webkit-text-stroke: 2px var(--c-ink); pointer-events: none;
  transition: transform .6s cubic-bezier(.5,-0.3,.6,1), opacity .6s; }
#app.shake { animation: screenShake .3s; }
#app.shake-big { animation: screenShakeBig .3s; }
@keyframes screenShake { 0%,100% { transform: none; } 20%,60% { transform: translate(-6px, 2px); } 40%,80% { transform: translate(6px, -2px); } }
@keyframes screenShakeBig { 0%,100% { transform: none; } 20%,60% { transform: translate(-10px, 3px); } 40%,80% { transform: translate(10px, -3px); } }
.countdown { position: fixed; inset: 0; z-index: var(--z-popup); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.countdown span { font-size: clamp(120px, 24vw, 240px); animation: bigPop .9s var(--ease-pop) forwards; }
.tooltip-pop { text-align: center; font-size: var(--fs-body); }
.tooltip-pop .ti { font-size: 80px; }

/* ── 直向（768×1024 等） ── */
@media (orientation: portrait) {
  .lobby-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .level-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .level-tile.mix { grid-column: span 3; }
  .solo-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .solo-side { flex-direction: row; padding-top: 0; justify-content: center; min-height: 56px; }
  .solo-side .blockman { display: none; }
  .keypad { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 84px; width: 100%; }
  .tf-btn { min-width: 0; flex: 1; }
  .opts { grid-template-columns: repeat(2, 1fr); }
  .topbar .grow { font-size: var(--fs-body); }
}
@media (orientation: landscape) and (max-height: 820px) {
  .side-q { font-size: clamp(40px, 5vw, 60px); }
}

/* 減少動畫（§6 效能規範／§10） */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 迷你頭像（大廳玩家鈕、雙人 HUD） */
.bm-mini { position: relative; flex: none; width: 48px; height: 48px; border: 3px solid var(--c-ink); border-radius: 10px; background: var(--body);
  display: inline-flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; }
.bm-mini .bm-acc { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 18px; }
/* 雙人題目：深色主題上也要可讀（卡片底） */
.side-q { background: var(--t-card); border: 3px solid var(--c-ink); border-radius: var(--radius-md); padding: 0 var(--sp-6); line-height: 1.25; }