/* ABC 字母派對：糖果派對風格。純 CSS、無外部字體。 */

/*
 * 大寫 I 與小寫 l 在無襯線字體 (Avenir、Roboto、Segoe UI…) 幾乎長得一樣，
 * 第 2 關大小寫配對、第 4 關氣球、第 12 關母音/子音 都會同時出現 I 與 l。
 * 只針對「大寫 I」(U+0049) 改用裝置內建、I 有上下橫線的字體 (Verdana / Tahoma / 襯線體)；
 * 只用 local()，不下載任何字體，找不到時自動退回原本的字體堆疊。
 */
@font-face {
  font-family: "AP Cap I";
  src: local("Verdana Bold"), local("Verdana-Bold"), local("Tahoma Bold"), local("Tahoma-Bold"),
    local("Noto Serif Bold"), local("NotoSerif-Bold"), local("Georgia Bold"), local("Georgia-Bold"),
    local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
  font-weight: 100 900;
  unicode-range: U+0049;
}

:root {
  --ink: #3b2a4a;
  --ink-soft: #6a5a7a;
  --pink: #ff6fa5;
  --pink-d: #d9457f;
  --yellow: #ffd23f;
  --yellow-d: #d9a900;
  --mint: #3ddc97;
  --mint-d: #1fa870;
  --blue: #4cc9f0;
  --blue-d: #1f9bc4;
  --purple: #9b5de5;
  --purple-d: #6f3bb8;
  --orange: #ff9f45;
  --orange-d: #d97410;
  --red: #ef476f;
  --red-d: #b92347;
  --card: rgba(255, 255, 255, 0.92);
  --radius: 22px;
  --footer-bg: rgba(255, 255, 255, 0.94);
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "AP Cap I", "Avenir Next", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #bfeaff 0%, #ffe3f1 100%);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}
[lang="en"], .en { font-family: var(--font-en); }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 4px solid #1b6dff; outline-offset: 3px; border-radius: 12px; }

/* ---------------------------------------------------------------- 版面骨架 */
.app {
  position: relative;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body[data-theme="menu"] .app { background-image: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)), url("../assets/img/bg/bg-menu.webp"); }
body[data-theme="s1"] .app { background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)), url("../assets/img/bg/bg-s1.webp"); }
body[data-theme="s2"] .app { background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)), url("../assets/img/bg/bg-s2.webp"); }
body[data-theme="s3"] .app { background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)), url("../assets/img/bg/bg-s3.webp"); }

.topbar {
  grid-row: 1; grid-column: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 4px calc(12px + env(safe-area-inset-left, 0px));
  min-height: 56px;
}
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar { display: flex; gap: 8px; }

.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; padding: 0;
  background: var(--purple); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--purple-d), 0 6px 12px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease;
}
.icon-btn svg { width: 26px; height: 26px; fill: currentColor; }
#btn-settings { background: var(--orange); box-shadow: 0 4px 0 var(--orange-d), 0 6px 12px rgba(0,0,0,.15); }
#btn-install { background: var(--mint); box-shadow: 0 4px 0 var(--mint-d), 0 6px 12px rgba(0,0,0,.15); }
#btn-fullscreen { background: var(--blue); box-shadow: 0 4px 0 var(--blue-d), 0 6px 12px rgba(0,0,0,.15); }
.icon-btn:active, .pressed { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }

.screen {
  grid-row: 2; grid-column: 1;
  position: relative; min-height: 0; overflow-x: hidden; overflow-y: auto;
  padding: 4px calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));
  outline: none; display: flex; flex-direction: column;
}
.screen-inner { width: min(100%, 980px); margin: 0 auto; flex: 1; display: flex; flex-direction: column; min-height: 0; }

.site-footer {
  grid-row: 3; grid-column: 1;
  position: relative; z-index: 30;
  background: var(--footer-bg); color: var(--ink);
  text-align: center; font-size: 12.5px; line-height: 1.45;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid rgba(155, 93, 229, .35);
}
.site-footer a { color: #1b4fd8; font-weight: 700; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- 按鈕 */
.btn {
  --c: var(--pink); --cd: var(--pink-d);
  position: relative; overflow: hidden;
  min-height: 56px; min-width: 132px; padding: 10px 26px;
  font-size: clamp(20px, 4.6vw, 26px); font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--c); border: 4px solid #fff; border-radius: 999px;
  box-shadow: 0 6px 0 var(--cd), 0 10px 18px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn:hover { filter: brightness(1.06); }
.btn:active, .btn.pressed { transform: translateY(4px); box-shadow: 0 2px 0 var(--cd), 0 4px 8px rgba(0,0,0,.18); }
.btn.blue { --c: var(--blue); --cd: var(--blue-d); }
.btn.mint { --c: var(--mint); --cd: var(--mint-d); }
.btn.yellow { --c: var(--yellow); --cd: var(--yellow-d); color: var(--ink); text-shadow: none; }
.btn.purple { --c: var(--purple); --cd: var(--purple-d); }
.btn.orange { --c: var(--orange); --cd: var(--orange-d); }
.btn.small { min-height: 46px; min-width: 0; padding: 6px 16px; font-size: 18px; }
.btn[disabled] { filter: grayscale(.7); opacity: .6; cursor: not-allowed; }
.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0);
  animation: ripple .5s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* ---------------------------------------------------------------- 主選單 */
.menu { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.title-logo { margin: 0; font-size: clamp(38px, 9vw, 76px); line-height: 1.05; font-weight: 900; letter-spacing: .02em; text-shadow: 0 4px 0 rgba(255,255,255,.9), 0 8px 14px rgba(0,0,0,.18); }
.title-logo .l1 { color: var(--pink); } .title-logo .l2 { color: var(--yellow-d); } .title-logo .l3 { color: var(--blue-d); }
.title-sub { margin: 0; font-size: clamp(18px, 3.6vw, 26px); font-weight: 700; background: rgba(255,255,255,.85); padding: 4px 18px; border-radius: 999px; }
.menu-mascot { width: clamp(130px, 30vh, 280px); height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); animation: bob 2.4s ease-in-out infinite; }
.menu-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 4px; }
.menu-stars { font-size: 20px; font-weight: 800; background: rgba(255,255,255,.88); padding: 4px 16px; border-radius: 999px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------------------------------------------------------------- 選關 */
.screen-title { margin: 4px 0 8px; font-size: clamp(26px, 5vw, 38px); font-weight: 900; text-align: center; text-shadow: 0 3px 0 rgba(255,255,255,.9); }
.section-block { background: var(--card); border-radius: var(--radius); padding: 10px 12px 14px; margin-bottom: 12px; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.1); }
.section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px 4px; }
.section-head h3 { margin: 0; font-size: 20px; }
.section-head span { font-size: 14px; color: var(--ink-soft); }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.level-card {
  position: relative; text-align: center; padding: 8px 6px 10px; min-height: 112px;
  background: #fff; border: 4px solid var(--blue); border-radius: 20px;
  box-shadow: 0 5px 0 var(--blue-d); display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.level-card:active:not(.is-locked) { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-d); }
.level-card .num { font-size: 30px; font-weight: 900; line-height: 1; color: var(--pink-d); }
.level-card .name { font-size: 14px; font-weight: 700; line-height: 1.2; }
.level-card .stars { font-size: 20px; letter-spacing: 2px; color: #cfc6dc; }
.level-card .stars .on { color: var(--yellow-d); text-shadow: 0 1px 0 #fff; }
.level-card .best { font-size: 12px; color: var(--ink-soft); }
.level-card.is-locked { border-color: #b9b0c6; box-shadow: 0 5px 0 #8f86a0; background: #eceaf2; color: #6f6680; }
.level-card.is-locked .num { color: #6f6680; }
.level-card svg { width: 26px; height: 26px; fill: #6f6680; }
.level-card.shake { animation: shake .4s; }
.level-card.s2 { border-color: var(--mint); box-shadow: 0 5px 0 var(--mint-d); }
.level-card.s3 { border-color: var(--orange); box-shadow: 0 5px 0 var(--orange-d); }
.level-card.s4 { border-color: var(--purple); box-shadow: 0 5px 0 var(--purple-d); }

/* ---------------------------------------------------------------- 遊戲 HUD */
.play { gap: 8px; }
.hud { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.hud-mascot { width: 62px; height: 62px; flex: none; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.hud-main { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.hud-level { font-size: 16px; font-weight: 800; background: rgba(255,255,255,.88); border-radius: 999px; padding: 2px 12px; width: fit-content; }
.bubble { font-size: 15px; font-weight: 700; min-height: 22px; background: #fff; border: 3px solid var(--purple); border-radius: 14px; padding: 2px 10px; width: fit-content; max-width: 100%; }
.hud-chip { background: rgba(255,255,255,.92); border: 3px solid var(--blue); border-radius: 16px; padding: 2px 12px; text-align: center; min-width: 74px; }
.hud-chip small { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.1; }
.hud-chip b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hearts { display: flex; gap: 2px; align-items: center; background: rgba(255,255,255,.92); border: 3px solid var(--red); border-radius: 16px; padding: 4px 10px; }
.heart { width: 24px; height: 24px; fill: var(--red); transition: transform .2s; }
.heart.lost { fill: #cbbfd3; transform: scale(.85); }
.combo-badge { background: var(--yellow); border: 3px solid #fff; color: var(--ink); font-weight: 900; border-radius: 999px; padding: 2px 12px; font-size: 16px; box-shadow: 0 3px 0 var(--yellow-d); }
.progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.8); overflow: hidden; border: 2px solid #fff; }
.progress > i { display: block; height: 100%; width: 0; background: var(--mint); transition: width .3s; }
.timer { height: 14px; border-radius: 999px; background: rgba(255,255,255,.85); overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.timer > i { display: block; height: 100%; width: 100%; transform-origin: left center; background: linear-gradient(90deg, var(--mint), var(--yellow)); }
.timer.urgent > i { background: linear-gradient(90deg, var(--orange), var(--red)); }
.timer.idle { visibility: hidden; }

.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- 選擇題 */
.q-card { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 14px); background: var(--card); border: 4px solid #fff; border-radius: 28px; padding: 10px 12px; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.q-title { font-size: clamp(18px, 3.8vw, 26px); font-weight: 800; text-align: center; }
.q-prompt { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 0; }
.q-prompt img.prompt-img { width: clamp(90px, 24vh, 210px); height: clamp(90px, 24vh, 210px); object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.speaker-btn { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 5px 0 var(--blue-d); padding: 0; }
.speaker-btn svg { width: 34px; height: 34px; fill: currentColor; }
.speaker-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-d); }
.big-text { font-family: var(--font-en); font-weight: 900; font-size: clamp(44px, 12vh, 92px); line-height: 1; letter-spacing: .12em; color: var(--purple-d); }
.seq-letters { display: flex; gap: clamp(6px, 2vw, 14px); flex-wrap: wrap; justify-content: center; }
.seq-letters .cell { font-family: var(--font-en); min-width: clamp(46px, 11vw, 80px); height: clamp(52px, 12vw, 88px); display: grid; place-items: center; border-radius: 16px; font-size: clamp(30px, 7vw, 54px); font-weight: 900; background: #fff; border: 4px solid var(--blue); color: var(--ink); }
.seq-letters .cell.gap { border-style: dashed; border-color: var(--pink); color: var(--pink); background: #fff4f9; }
.options { display: grid; width: 100%; max-width: 760px; gap: clamp(8px, 1.6vh, 14px); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.options[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.options[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .options[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .options[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.opt {
  --c: var(--blue); --cd: var(--blue-d);
  position: relative; min-height: 64px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-en); font-weight: 900; font-size: clamp(28px, 6.5vw, 44px);
  background: #fff; color: var(--ink); border: 4px solid var(--c); border-radius: 20px; box-shadow: 0 6px 0 var(--cd);
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.opt:nth-child(2) { --c: var(--pink); --cd: var(--pink-d); }
.opt:nth-child(3) { --c: var(--mint); --cd: var(--mint-d); }
.opt:nth-child(4) { --c: var(--orange); --cd: var(--orange-d); }
.opt:nth-child(5) { --c: var(--purple); --cd: var(--purple-d); }
.opt:hover:not([disabled]) { background: #fffbe6; }
.opt:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 2px 0 var(--cd); }
.opt .key { position: absolute; left: 8px; top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); font-family: var(--font); }
.opt img { width: clamp(52px, 11vh, 90px); height: clamp(52px, 11vh, 90px); object-fit: contain; }
.opt .opt-label { font-size: clamp(20px, 4.4vw, 30px); }
.opt.correct { background: #d8ffe9 !important; border-color: var(--mint-d); animation: pop-bounce .5s; }
.opt.wrong { background: #ffe0e8 !important; border-color: var(--red); animation: shake .45s; }
.opt.reveal { background: #d8ffe9 !important; border-color: var(--mint-d); box-shadow: 0 0 0 5px rgba(61,220,151,.5); }
.opt[disabled] { cursor: default; }
.answer-note { min-height: 28px; font-size: clamp(16px, 3.4vw, 22px); font-weight: 800; text-align: center; color: var(--purple-d); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pop-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- 拼字 */
.slots, .tray { display: flex; gap: clamp(6px, 1.6vw, 12px); justify-content: center; flex-wrap: wrap; }
.slot, .tile {
  font-family: var(--font-en); font-weight: 900; width: clamp(52px, 13vw, 74px); height: clamp(60px, 13vw, 82px);
  display: grid; place-items: center; border-radius: 16px; font-size: clamp(32px, 8vw, 48px); padding: 0;
}
.slot { background: #fff; border: 4px dashed var(--blue); color: var(--ink); }
.slot.filled { border-style: solid; background: #fffbe6; }
.slot.given { border-style: solid; background: #e6f9ff; color: var(--blue-d); cursor: default; }
.slot.correct { background: #d8ffe9; border-color: var(--mint-d); animation: pop-bounce .5s; }
.slot.wrong { background: #ffe0e8; border-color: var(--red); animation: shake .45s; }
.tile { background: var(--yellow); border: 4px solid #fff; color: var(--ink); box-shadow: 0 5px 0 var(--yellow-d); transition: transform .12s ease; }
.tile:nth-child(3n+2) { background: #ffb3d1; box-shadow: 0 5px 0 var(--pink-d); }
.tile:nth-child(3n) { background: #a8f0d0; box-shadow: 0 5px 0 var(--mint-d); }
.tile:active:not([disabled]) { transform: translateY(3px); }
.tile.used { visibility: hidden; }
.spell-tools { display: flex; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------------- 配對 / 翻牌 */
.match-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: var(--card); border: 4px solid #fff; border-radius: 28px; padding: 10px; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.card-grid { display: grid; gap: clamp(8px, 1.8vw, 14px); width: 100%; max-width: 700px; grid-template-columns: repeat(3, 1fr); }
.card-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.m-card { position: relative; perspective: 600px; aspect-ratio: 1 / 1; min-height: 70px; max-height: 24vh; border: 0; background: none; padding: 0; width: 100%; justify-self: center; }
.m-face, .m-back { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .35s ease; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.m-face { background: #fff; border-color: var(--blue); font-family: var(--font-en); font-weight: 900; font-size: clamp(32px, 8vw, 56px); transform: rotateY(0); }
.m-face img { width: 78%; height: 78%; object-fit: contain; }
.m-back { background: repeating-linear-gradient(45deg, var(--pink), var(--pink) 10px, #ff8fbb 10px, #ff8fbb 20px); transform: rotateY(180deg); color: #fff; font-size: 34px; }
/* 翻牌記憶的字母牌是「W w」兩個字，手機 4 欄時要縮小且不換行，否則小寫會被切掉 */
.m-card.letter .m-face { white-space: nowrap; font-size: clamp(22px, 6vw, 48px); }
.m-card.hidden-face .m-face { transform: rotateY(-180deg); }
.m-card.hidden-face .m-back { transform: rotateY(0); }
.m-card.upper .m-face { border-color: var(--pink); }
.m-card.lower .m-face { border-color: var(--mint-d); }
.m-card.selected .m-face { background: #fffbe6; box-shadow: 0 0 0 6px var(--yellow), 0 5px 0 rgba(0,0,0,.18); transform: scale(1.06); }
.m-card.matched .m-face { background: #d8ffe9; border-color: var(--mint-d); animation: pop-bounce .5s; }
.m-card.matched { pointer-events: none; }
.m-card.wrong .m-face { background: #ffe0e8; border-color: var(--red); animation: shake .45s; }
.m-card.reveal .m-face { box-shadow: 0 0 0 5px rgba(61,220,151,.6); }
.match-note { font-weight: 800; font-size: clamp(16px, 3.4vw, 22px); text-align: center; }

/* ---------------------------------------------------------------- 氣球 */
.field { position: relative; flex: 1; min-height: 160px; overflow: hidden; border-radius: 28px; border: 4px solid #fff; background: linear-gradient(180deg, rgba(191,234,255,.85), rgba(255,243,200,.85)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 8px 18px rgba(0,0,0,.12); touch-action: manipulation; }
.field-banner { position: absolute; left: 0; right: 0; top: 8px; text-align: center; z-index: 3; pointer-events: none; display: flex; justify-content: center; gap: 10px; align-items: center; }
.field-banner > * { pointer-events: auto; }
.field-banner .chip { background: #fff; border: 3px solid var(--purple); border-radius: 999px; padding: 4px 16px; font-weight: 800; font-size: clamp(16px, 3.6vw, 22px); }
.balloon { position: absolute; left: 0; top: 0; width: clamp(74px, 17vw, 112px); height: clamp(92px, 21vw, 140px); border: 0; background: none; padding: 0; will-change: transform; touch-action: manipulation; }
.balloon svg { width: 100%; height: 100%; overflow: visible; }
.balloon .lbl { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-family: var(--font-en); font-weight: 900; font-size: clamp(30px, 7vw, 48px); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); pointer-events: none; }
.balloon.popped { animation: balloon-pop .35s forwards; pointer-events: none; }
.balloon.wrong { animation: shake .45s; }
.balloon.hint .lbl { color: var(--yellow); }
@keyframes balloon-pop { 0% { opacity: 1; } 40% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 0; filter: blur(3px); } }

/* ---------------------------------------------------------------- 打地鼠 */
.mole-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(6px, 1.6vw, 14px); padding: 44px 10px 10px; width: 100%; max-width: 640px; margin: 0 auto; }
.hole { position: relative; border: 0; background: none; padding: 0; overflow: hidden; min-height: 70px; border-radius: 18px; }
.hole::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 6%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at center, #5a3b2e 0%, #3a241b 70%); box-shadow: inset 0 6px 8px rgba(0,0,0,.45); }
.hole .critter { position: absolute; left: 14%; right: 14%; bottom: 18%; height: 78%; display: grid; place-items: center; transform: translateY(110%); transition: transform .18s ease-out; }
.hole .critter img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.hole.up .critter { transform: translateY(0); }
.hole::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 24%; border-radius: 0 0 18px 18px; background: linear-gradient(#7bd88f, #4cb869); }
.hole.hit .critter { filter: brightness(1.2); }
.hole.bad { animation: shake .4s; }
.hole.poke { animation: shake .25s; }

/* ---------------------------------------------------------------- 分類 */
.sort-card { position: absolute; left: 50%; top: 0; width: clamp(110px, 26vw, 170px); transform: translate(-50%, 0); text-align: center; background: #fff; border: 5px solid var(--purple); border-radius: 22px; padding: 6px; box-shadow: 0 6px 0 var(--purple-d); will-change: transform; }
.sort-card img { width: 100%; max-height: clamp(70px, 14vh, 120px); object-fit: contain; }
.sort-card .sc-label { display: block; font-family: var(--font-en); font-weight: 900; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; }
.sort-card.letter .sc-label { font-size: clamp(54px, 12vw, 90px); }
.sort-card.good { animation: pop-bounce .4s; border-color: var(--mint-d); background: #d8ffe9; }
.sort-card.bad { animation: shake .45s; border-color: var(--red); background: #ffe0e8; }
.sort-line { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--red) 0 16px, #fff 16px 32px); opacity: .8; }
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.cat-btn { --c: var(--blue); --cd: var(--blue-d); min-height: 72px; font-family: var(--font-en); font-weight: 900; font-size: clamp(32px, 7vw, 52px); background: var(--c); color: #fff; border: 4px solid #fff; border-radius: 22px; box-shadow: 0 6px 0 var(--cd); text-shadow: 0 2px 0 rgba(0,0,0,.2); position: relative; }
.cat-btn:nth-child(2) { --c: var(--pink); --cd: var(--pink-d); }
.cat-btn:nth-child(3) { --c: var(--mint); --cd: var(--mint-d); }
.cat-btn .key { position: absolute; left: 10px; top: 4px; font-size: 12px; font-family: var(--font); opacity: .85; }
.cat-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cd); }
.cat-btn.reveal { box-shadow: 0 0 0 6px rgba(255,255,255,.95), 0 6px 0 var(--cd); animation: pop-bounce .5s; }
.cat-btn .zh { font-family: var(--font); font-size: .6em; }

/* ---------------------------------------------------------------- 結算 / 對話框 */
.result { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.result-card { background: var(--card); border: 5px solid #fff; border-radius: 30px; padding: 16px 22px; box-shadow: 0 10px 24px rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; width: 100%; }
.result-card h2 { margin: 0; font-size: clamp(26px, 6vw, 38px); }
.result-mascot { width: clamp(100px, 22vh, 170px); }
.big-stars { display: flex; gap: 6px; }
.big-stars svg { width: clamp(52px, 12vw, 76px); height: clamp(52px, 12vw, 76px); fill: #ddd3e6; transform: scale(.7); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), fill .2s; }
.big-stars svg.on { fill: var(--yellow); stroke: var(--yellow-d); stroke-width: 1.2; transform: scale(1); }
.result-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 18px; font-size: 18px; text-align: left; }
.result-stats b { font-variant-numeric: tabular-nums; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.new-best { color: var(--red); font-weight: 900; }

.modal-root { grid-row: 2; grid-column: 1; position: relative; z-index: 20; pointer-events: none; min-height: 0; }
.overlay { position: absolute; inset: 0; background: rgba(59, 42, 74, .55); display: grid; place-items: center; padding: 12px; pointer-events: auto; }
.modal { background: #fff; border: 5px solid var(--purple); border-radius: 26px; padding: 16px 18px; width: min(100%, 460px); max-height: 100%; overflow: auto; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.modal h2 { margin: 0 0 8px; font-size: 24px; text-align: center; }
.modal p { margin: 6px 0; line-height: 1.55; }
.modal ol { padding-left: 22px; line-height: 1.7; }
.modal .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.setting-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 6px 0; font-weight: 700; }
.setting-row input[type="range"] { width: min(46vw, 200px); height: 32px; accent-color: var(--pink); }
.setting-row input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--purple); }
.confirm-box { background: #fff1f4; border: 3px solid var(--red); border-radius: 16px; padding: 10px; margin-top: 10px; text-align: center; }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 25; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; pointer-events: none; max-width: 92%; text-align: center; }
.banner { position: fixed; left: 0; right: 0; top: 30%; z-index: 60; text-align: center; pointer-events: none; }
.banner span { display: inline-block; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--mint)); color: #fff; font-weight: 900; font-size: clamp(24px, 6vw, 44px); padding: 12px 28px; border-radius: 999px; border: 5px solid #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25); box-shadow: 0 10px 24px rgba(0,0,0,.3); animation: banner-in .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes banner-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------------- 特效層 */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti { position: absolute; width: 10px; height: 14px; border-radius: 3px; will-change: transform, opacity; }
.float-text { position: absolute; font-weight: 900; font-size: 28px; color: var(--mint-d); text-shadow: 0 2px 0 #fff, 0 0 8px #fff; white-space: nowrap; will-change: transform, opacity; }
.float-text.bad { color: var(--red); }

/* ---------------------------------------------------------------- 減少動畫 */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}
.reduce-motion .menu-mascot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .menu-mascot { animation: none; }
}

/* ---------------------------------------------------------------- 響應式 */
@media (max-width: 520px) {
  .icon-btn { width: 42px; height: 42px; }
  .site-footer { font-size: 11.5px; }
  .hud-mascot { width: 48px; height: 48px; }
  .hud-chip { min-width: 62px; padding: 1px 8px; }
  .hud-chip b { font-size: 19px; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 520px) {
  .topbar { min-height: 46px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 2px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 22px; height: 22px; }
  .site-footer { padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); font-size: 11px; }
  .menu-mascot { width: 110px; }
  .q-prompt img.prompt-img { width: 80px; height: 80px; }
  .opt { min-height: 52px; }
  .hud-mascot { display: none; }
  .bubble { display: none; }
  .title-logo { font-size: 36px; }
  .level-grid { grid-template-columns: repeat(4, 1fr); }
  .big-text { font-size: 48px; }

  /* 手機橫向：HUD 與各玩法壓縮，確保整個操作區不需要捲動、不會被頁尾蓋住 */
  .play { gap: 4px; }
  .stage { gap: 6px; }
  .hud { gap: 4px 8px; }
  .hud-level { font-size: 14px; }
  .hud-chip { min-width: 58px; padding: 0 8px; border-width: 2px; }
  .hud-chip small { font-size: 10px; }
  .hud-chip b { font-size: 17px; }
  .hearts { padding: 2px 8px; border-width: 2px; }
  .heart { width: 18px; height: 18px; }
  .progress { height: 6px; }
  .timer { height: 10px; border-width: 2px; }
  .q-card, .match-wrap { padding: 6px 10px; gap: 6px; border-radius: 22px; }
  .q-title { font-size: 18px; }
  .speaker-btn { width: 48px; height: 48px; }
  .speaker-btn svg { width: 26px; height: 26px; }
  .answer-note { min-height: 22px; font-size: 16px; }
  .match-note { font-size: 15px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); max-width: 100%; }
  .card-grid.cols4 { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .m-card { max-height: 30vh; min-height: 60px; }
  .field { min-height: 0; border-radius: 22px; }
  .field-banner { top: 4px; }
  .field-banner .chip { font-size: 15px; padding: 2px 12px; }
  .cat-btn { min-height: 52px; font-size: 30px; border-radius: 18px; }
  .sort-card { width: 112px; padding: 4px; border-width: 4px; }
  .sort-card img { max-height: 52px; }
  .sort-card .sc-label { font-size: 26px; }
  .sort-card.letter .sc-label { font-size: 46px; }
  .mole-grid { padding-top: 38px; }
  /* 拼字：圖片 / 喇叭在左，格子與積木在右 */
  .q-card.spell { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; column-gap: 20px; row-gap: 6px; }
  .q-card.spell .q-title, .q-card.spell .answer-note { grid-column: 1 / -1; }
  .q-card.spell .q-prompt { grid-column: 1; grid-row: 2 / span 3; flex-direction: column; gap: 6px; }
  .q-card.spell .slots, .q-card.spell .tray, .q-card.spell .spell-tools { grid-column: 2; }
  .slot, .tile { width: 48px; height: 52px; font-size: 30px; border-radius: 12px; }
  .seq-letters .cell { min-width: 48px; height: 52px; font-size: 32px; border-width: 3px; }
}
/* 更矮的橫向手機 (例如 740×360)：再縮一級，避免字母列與選項、分類卡與底線重疊 */
@media (max-height: 400px) {
  .seq-letters .cell { min-width: 42px; height: 44px; font-size: 28px; border-radius: 12px; }
  .opt { min-height: 46px; font-size: 28px; }
  .sort-card { width: 96px; }
  .sort-card img { max-height: 36px; }
  .sort-card .sc-label { font-size: 22px; }
  .sort-card.letter .sc-label { font-size: 38px; }
  .cat-btn { min-height: 46px; }
}