/* 環遊世界小旅行：全站樣式。手機直式優先，兼顧橫向、平板與桌機。 */

:root {
  --ink: #223548;
  --ink-soft: #52667a;
  --sky: #d9f2fd;
  --sky-2: #fff6e0;
  --primary: #1b9aaa;
  --primary-dark: #137583;
  --accent: #ff7b54;
  --accent-dark: #e85d36;
  --good: #2ec27e;
  --good-soft: #d6f5e6;
  --bad: #ef476f;
  --bad-soft: #ffe0e8;
  --gold: #ffc233;
  --card: #ffffff;
  --line: #cfe3ef;
  --shadow: 0 6px 16px rgba(34, 53, 72, 0.16);
  --radius: 18px;
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe 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, var(--sky) 0%, var(--sky-2) 100%);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #ff9f1c; outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ───────── 版面骨架：工具列 / 內容 / 頁尾 ───────── */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
}

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(34, 53, 72, 0.12);
  z-index: 5;
}

.brand {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  background: none; border: 0; padding: 0 4px; font-weight: 800; font-size: 18px; color: var(--primary-dark);
}
.brand-emoji { font-size: 26px; }

.tools { display: flex; gap: 8px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; color: var(--primary-dark); display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 0 var(--line);
  transition: transform 0.1s;
}
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:active, .icon-btn.pressed { transform: translateY(2px); box-shadow: none; }
.icon-btn.active { background: var(--primary); color: #fff; border-color: var(--primary-dark); }
.icon-btn.installed { opacity: 0.6; }
#btn-settings:hover .gear-icon { transform: rotate(60deg); }
.gear-icon { transition: transform 0.4s; }

.stage-area { position: relative; min-height: 0; }

.screen {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
  -webkit-overflow-scrolling: touch;
}

.site-footer {
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  text-align: center; font-size: 12px; line-height: 1.5; color: #3b4f63;
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line);
  z-index: 5;
}
.site-footer a { color: var(--primary-dark); font-weight: 700; }

/* ───────── 共用元件 ───────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 8px 18px; border-radius: 999px;
  border: 2px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 var(--line);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
  position: relative; overflow: hidden;
}
.btn:hover:not(:disabled) { background: #f4fbff; }
.btn:active:not(:disabled), .btn.pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.btn.primary { background: linear-gradient(180deg, #ff9a6b, var(--accent)); border-color: var(--accent-dark); color: #fff; box-shadow: 0 4px 0 var(--accent-dark); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffa57a, #ff8359); }
.btn.primary:active:not(:disabled), .btn.primary.pressed { box-shadow: 0 0 0 var(--accent-dark); }
.btn.danger { border-color: #c1334f; color: #c1334f; box-shadow: 0 3px 0 #f1b3c0; }
.btn.big { min-height: 54px; font-size: 19px; padding: 10px 26px; }
.btn.small { min-height: 44px; font-size: 15px; padding: 6px 14px; }
.btn.listen { background: #eaf7ff; border-color: #9fd3ee; box-shadow: 0 3px 0 #9fd3ee; color: #0d5c79; }
.btn:disabled { opacity: 0.55; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }

/* ───────── 吉祥物 ───────── */

.mascot { display: inline-grid; place-items: center; line-height: 1; }
.mascot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mascot-fallback { font-size: 3rem; }
.mascot-big { width: min(46vw, 210px); height: min(46vw, 210px); animation: bob 3s ease-in-out infinite; }
.mascot-hud { width: 52px; height: 52px; flex: none; }
.mascot-hud .mascot-fallback { font-size: 2rem; }
.mascot-result { width: min(34vw, 150px); height: min(34vw, 150px); }
.mascot[data-mood="cheer"] { animation: hop 0.5s ease 2; }
.mascot[data-mood="sad"] { animation: droop 0.8s ease; }

/* ───────── 首頁 ───────── */

.screen.home {
  background:
    linear-gradient(180deg, rgba(217, 242, 253, 0.55), rgba(255, 246, 224, 0.8)),
    url(../assets/img/bg_menu.webp) center / cover no-repeat;
}
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 4px; position: relative; }
.plane { position: absolute; top: 0; left: -10%; font-size: 40px; animation: fly 9s linear infinite; pointer-events: none; }
.title { margin: 4px 0 0; font-size: clamp(30px, 8vw, 52px); line-height: 1.15; color: var(--primary-dark); text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(27, 154, 170, 0.3); letter-spacing: 2px; }
.subtitle { margin: 0; font-size: clamp(16px, 4.2vw, 20px); font-weight: 700; color: var(--ink); }
.topics { margin: 0; font-size: 14px; color: var(--ink-soft); }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0 4px; }
.stats { margin: 4px 0 0; font-weight: 800; font-size: 18px; color: #a86a00; }
.hint-tap { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 10px 0 0; }

.passport { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.stamp {
  width: 76px; padding: 8px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.85);
  border: 3px dashed #b9c6d3; display: grid; justify-items: center; gap: 2px; filter: grayscale(1); opacity: 0.7;
}
.stamp-emoji { font-size: 30px; }
.stamp-city { font-size: 13px; font-weight: 800; }
.stamp.got { filter: none; opacity: 1; border: 3px solid var(--c, var(--gold)); background: #fff; transform: rotate(-4deg); box-shadow: var(--shadow); }
.stamp.got:nth-child(even) { transform: rotate(4deg); }

/* ───────── 選關 ───────── */

.screen.levels {
  background:
    linear-gradient(180deg, rgba(217, 242, 253, 0.72), rgba(255, 246, 224, 0.88)),
    url(../assets/img/bg_menu.webp) center / cover no-repeat;
}
.screen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.screen-head h2 { margin: 0; font-size: 24px; flex: 1; }
.screen-head .passport { margin: 0; flex-basis: 100%; justify-content: flex-start; }
.screen-head .stamp { width: 66px; padding: 4px 2px; }
.screen-head .stamp-emoji { font-size: 22px; }

.sec { margin: 12px 0 18px; max-width: 980px; margin-inline: auto; }
.sec-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55)), var(--bg) center / cover, var(--c);
  border-left: 8px solid var(--c); box-shadow: var(--shadow);
}
.sec-emoji { font-size: 36px; }
.sec-text h3 { margin: 0; font-size: 19px; }
.sec-text p { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }
.sec-stamp { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--good-soft); color: #14774a; font-weight: 800; font-size: 13px; }

.level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 640px) { .level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.level-card {
  position: relative; display: grid; gap: 3px; align-content: start; text-align: left;
  min-height: 132px; padding: 10px 12px 10px 52px; border-radius: 16px; background: #fff;
  border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform 0.1s;
}
.level-card:hover:not(.locked) { transform: translateY(-2px); border-color: var(--primary); }
.level-card:active, .level-card.pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.level-card.done { border-color: #f6d36b; background: #fffbea; }
.level-card.locked { background: #eef2f6; color: #7d8b99; border-style: dashed; }
.lv-num {
  position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; background: var(--primary); color: #fff; font-size: 17px;
}
.locked .lv-num { background: #aab6c2; font-size: 16px; }
.lv-name { font-weight: 800; font-size: 16px; line-height: 1.25; }
.lv-eng { font-size: 12.5px; color: var(--ink-soft); }
.lv-stars { color: #f5a300; font-size: 20px; letter-spacing: 2px; }
.locked .lv-stars { color: #b8c2cc; }
.lv-best { font-size: 12.5px; color: var(--ink-soft); }

/* ───────── 遊戲中：HUD 與舞台 ───────── */

.screen.play {
  display: flex; flex-direction: column; gap: 8px; padding-top: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), var(--bg) center / cover no-repeat, var(--sky);
}
.hud { display: grid; gap: 6px; flex: none; max-width: 860px; width: 100%; margin-inline: auto; position: sticky; top: -8px; z-index: 2; padding: 8px 0 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 80%, rgba(255, 255, 255, 0)); }
.hud-row { display: flex; align-items: center; gap: 10px; }
.hud-row.stats { flex-wrap: wrap; gap: 8px; }
.hud-title { flex: 1; min-width: 0; display: grid; }
.hud-lv { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }
.hud-name { font-size: 18px; font-weight: 900; line-height: 1.2; }
.hud-box { padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: 17px; min-height: 34px; display: inline-flex; align-items: center; }
.hud-lives { letter-spacing: 1px; font-size: 16px; }
.hud-combo { padding: 4px 12px; border-radius: 999px; background: #ffe9d6; color: #b34700; font-weight: 800; border: 2px solid #ffc9a1; animation: pulse 0.4s; }
.hud-box.prog { margin-left: auto; }
.timer { height: 12px; border-radius: 999px; background: rgba(34, 53, 72, 0.14); overflow: hidden; }
.timer-fill { height: 100%; transform-origin: left center; background: linear-gradient(90deg, #4cc9a7, #ffd23f); border-radius: 999px; }
.timer.low .timer-fill { background: linear-gradient(90deg, #ef476f, #ff9f1c); }

.stage { position: relative; flex: 1 0 auto; min-height: 300px; width: 100%; max-width: 860px; margin-inline: auto; }

.intro { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; animation: fadeIn 0.3s; }
.intro.leaving { animation: fadeOut 0.6s forwards; }
.intro-card {
  width: min(100%, 460px); padding: 22px 20px; border-radius: 24px; background: #fff; text-align: center;
  box-shadow: var(--shadow); border: 3px solid var(--c, var(--line)); display: grid; gap: 8px; justify-items: center;
}
.intro-card h2 { margin: 0; font-size: 26px; }
.intro-card p { margin: 0; }
.intro-sec { font-weight: 800; color: var(--ink-soft); }
.intro-eng { display: inline-block; padding: 3px 14px; border-radius: 999px; background: #eaf7ff; font-weight: 800; color: #0d5c79; }
.intro-tip { font-size: 18px; font-weight: 700; line-height: 1.5; }
.intro-rule, .intro-need { color: var(--ink-soft); font-size: 14.5px; }

/* ───────── 選擇題 ───────── */

.quiz, .spell, .order, .mapfollow, .mappick, .match, .whack, .fall { width: 100%; }
.q-enter { display: grid; gap: 12px; animation: slideIn 0.3s; }
.q-prompt { display: grid; justify-items: center; gap: 8px; text-align: center; }
.q-img { width: min(54vw, 240px); height: min(54vw, 240px); object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); }
.q-emoji { font-size: clamp(56px, 16vw, 88px); line-height: 1.1; }
.q-text { font-size: clamp(20px, 5.4vw, 28px); font-weight: 800; line-height: 1.35; }
.q-zh { font-size: 18px; font-weight: 700; color: var(--ink-soft); }
.q-zh.big { font-size: clamp(20px, 5.4vw, 26px); color: var(--ink); }

.q-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.q-options.sentence, .q-options.n3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .q-options.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: 64px; padding: 10px 12px 10px 30px; border-radius: 16px; background: #fff; border: 3px solid var(--line);
  box-shadow: 0 4px 0 var(--line); font-weight: 800; font-size: clamp(17px, 4.6vw, 22px); text-align: center; line-height: 1.3;
  transition: transform 0.1s, background 0.15s;
}
.opt.sentence { justify-content: flex-start; text-align: left; font-size: clamp(16px, 4.2vw, 19px); font-weight: 700; }
.opt:hover:not(:disabled) { border-color: var(--primary); background: #f4fbff; }
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.opt-key { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; border-radius: 6px; background: #e8f1f8; color: var(--ink-soft); font-size: 12px; display: grid; place-items: center; }
.opt-emoji { font-size: 1.3em; }
.opt-icon { font-size: clamp(34px, 9vw, 48px); line-height: 1; }
.opt.icon-only { min-height: 92px; flex-direction: column; gap: 2px; }
.opt.icon-only .opt-label { font-size: 14px; color: var(--ink-soft); }
.opt.correct { background: var(--good-soft); border-color: var(--good); box-shadow: 0 4px 0 #8ad9b3; animation: pulse 0.5s; }
.opt.wrong { background: var(--bad-soft); border-color: var(--bad); box-shadow: 0 4px 0 #f4a9bb; }
.opt:disabled:not(.correct):not(.wrong) { opacity: 0.6; }

.q-reveal { min-height: 28px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; align-items: baseline; }
.reveal-en { font-size: clamp(18px, 4.6vw, 24px); color: #0d5c79; }
.reveal-zh { color: var(--ink-soft); font-size: 16px; font-weight: 700; }

/* ───────── 翻牌配對 ───────── */

.match-help { text-align: center; margin: 0 0 8px; font-weight: 700; color: var(--ink-soft); }
.match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin: 0 auto; }
.mcard { aspect-ratio: 1 / 1.05; border: 0; background: none; padding: 0; perspective: 600px; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s; }
.mcard.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden;
  border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.card-front { background: repeating-linear-gradient(45deg, #1b9aaa, #1b9aaa 10px, #26b0c1 10px, #26b0c1 20px); font-size: clamp(22px, 6vw, 34px); color: #fff; border-color: var(--primary-dark); }
.card-back { background: #fff; transform: rotateY(180deg); padding: 2px; }
.card-word { font-weight: 900; font-size: clamp(13px, 3.8vw, 20px); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.card-emoji { font-size: clamp(30px, 9vw, 52px); }
.mcard.matched .card-back { background: var(--good-soft); border-color: var(--good); }
.mcard.miss .card-back { background: var(--bad-soft); border-color: var(--bad); }
.mcard.matched { animation: pulse 0.5s; }
.mcard.miss { animation: shake 0.45s; }

/* ───────── 下落接字 ───────── */

.fall-rule { text-align: center; margin: 0 0 6px; font-weight: 800; font-size: 17px; }
.fall-keys { display: none; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .fall-keys { display: inline; } }
.fall-field {
  position: relative; height: clamp(300px, 54vh, 520px); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #bfe8ff, #e9f8ff 60%, #fff4d6); border: 3px solid #a6d8f0;
}
.fall-ground { height: 28px; margin-top: -6px; text-align: center; font-size: 22px; background: #7bd389; border-radius: 0 0 16px 16px; }
.fall-item {
  position: absolute; top: 0; left: 0; width: min(22%, 116px); padding: 6px 2px; border-radius: 18px;
  background: #fff; border: 3px solid #ffb703; box-shadow: 0 4px 0 #e09f00; display: grid; justify-items: center; gap: 0;
  will-change: transform; touch-action: manipulation; user-select: none;
}
.fall-emoji { font-size: clamp(22px, 6vw, 32px); line-height: 1.1; }
.fall-word { font-size: clamp(12px, 3.4vw, 17px); font-weight: 900; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.fall-item.caught { border-color: var(--good); background: var(--good-soft); }
.fall-item.oops { border-color: var(--bad); background: var(--bad-soft); }
.fall-item.missed { border-color: #999; background: #eee; opacity: 0.6; }
.fall-item.gone { opacity: 0; transition: opacity 0.4s; }
.fall-item.caught, .fall-item.oops { transition: opacity 0.5s; opacity: 0.2; }

/* ───────── 打地鼠 ───────── */

.whack { display: grid; gap: 10px; justify-items: center; }
.whack-say { min-height: 32px; font-size: 20px; font-weight: 800; text-align: center; }
.whack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 380px); }
.hole { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; overflow: hidden; border-radius: 22px; }
.dirt { position: absolute; left: 6%; right: 6%; bottom: 6%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #5b3a29, #3b2418); box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.4); }
.hole::before { content: ""; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, #c8f2c0, #94d98a); z-index: -1; }
.mole {
  position: absolute; left: 50%; bottom: 14%; transform: translate(-50%, 90%); font-size: clamp(34px, 10vw, 54px); line-height: 1;
  width: 74%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #b98760; border: 3px solid #8b5a3c;
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--d, 0ms);
}
.hole.up .mole { transform: translate(-50%, 0); }
.hole.hit .mole { background: #ffe38a; border-color: var(--gold); animation: pulse 0.5s; }
.hole.oops .mole { background: var(--bad-soft); border-color: var(--bad); }

/* ───────── 拼字與排序 ───────── */

.slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.slot {
  width: clamp(32px, 9.5vw, 46px); height: clamp(42px, 12vw, 56px); border-radius: 10px; border-bottom: 5px solid var(--primary);
  background: #fff; display: grid; place-items: center; font-size: clamp(24px, 7vw, 34px); font-weight: 900; border-top: 2px solid var(--line); border-inline: 2px solid var(--line);
}
.slot.filled { background: var(--good-soft); border-color: var(--good); }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tile {
  width: clamp(44px, 12.5vw, 58px); height: clamp(48px, 13vw, 60px); border-radius: 14px; border: 3px solid var(--line); background: #fff;
  box-shadow: 0 4px 0 var(--line); font-size: clamp(24px, 7vw, 32px); font-weight: 900; transition: transform 0.1s;
}
.tile:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.tile.used { opacity: 0.25; }
.tile.wrong, .word-tile.wrong { background: var(--bad-soft); border-color: var(--bad); animation: shake 0.45s; }

.placed-wrap { min-height: 76px; border-radius: 16px; background: rgba(255, 255, 255, 0.85); border: 3px dashed var(--line); padding: 8px; display: flex; align-items: center; }
.placed { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.placed-word { padding: 6px 12px; border-radius: 12px; background: var(--good-soft); border: 2px solid var(--good); font-weight: 800; font-size: clamp(16px, 4.4vw, 20px); animation: pop 0.25s; }
.word-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.word-tile {
  min-height: 48px; padding: 6px 14px; border-radius: 14px; border: 3px solid var(--line); background: #fff; box-shadow: 0 4px 0 var(--line);
  font-weight: 800; font-size: clamp(16px, 4.6vw, 21px);
}
.word-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.word-tile.used { opacity: 0.25; }

/* ───────── 地圖 ───────── */

.follow-tip, .scene-q { margin: 0; text-align: center; font-weight: 800; font-size: 16px; }
.scene-q { font-size: clamp(19px, 5vw, 25px); }
/* 地圖寬度同時受「可用高度」限制 (--map-max-h × 長寬比)，讓操作按鈕不必捲動就看得到 */
.map-wrap { position: relative; container-type: inline-size; width: min(100%, 560px, calc(var(--map-max-h, 9999px) * var(--ratio, 1.4))); margin: 0 auto; border-radius: 18px; overflow: hidden; background: #b7e4c7; border: 3px solid #8cc9a1; }
.map-grid { display: grid; width: 100%; height: 100%; }
.road { background: #dde5ee; border: 1px solid rgba(255, 255, 255, 0.7); }
.road.on-path { background: #ffe9a8; box-shadow: inset 0 0 0 2px #ffcf4d; }
.bldg {
  position: relative; display: grid; place-items: center; align-content: center; gap: 0; margin: 4%; padding: 0; border-radius: 12px;
  background: #fff; border: 2px solid #a9c4d6; box-shadow: 0 2px 0 #a9c4d6; min-width: 0;
}
.bldg-emoji { font-size: calc(100cqw / var(--colsfr, 13) * 0.95); line-height: 1; }
.bldg-name { font-size: max(8px, calc(100cqw / var(--colsfr, 13) * 0.3)); font-weight: 800; line-height: 1.05; text-align: center; color: var(--ink-soft); overflow-wrap: normal; word-break: normal; }
button.bldg:hover:not(:disabled) { border-color: var(--primary); }
.bldg.target { background: var(--good-soft); border-color: var(--good); box-shadow: 0 0 0 3px #9be3bf; animation: pulse 0.6s; }
.bldg.wrong { background: var(--bad-soft); border-color: var(--bad); }
.bldg:disabled:not(.target):not(.wrong) { opacity: 0.8; }
.avatar {
  position: absolute; width: calc(100cqw / var(--colsfr, 13) * 0.95); aspect-ratio: 1; transform: translate(-50%, -50%);
  transition: left 0.28s ease, top 0.28s ease; z-index: 2; pointer-events: none;
}
.avatar-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid var(--accent); font-size: calc(100cqw / var(--colsfr, 13) * 0.6); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.avatar-arrow { position: absolute; inset: -22% -22% -22% -22%; display: grid; justify-items: center; align-items: start; color: var(--accent-dark); font-size: calc(100cqw / var(--colsfr, 13) * 0.4); transition: transform 0.25s; line-height: 1; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-weight: 700; font-size: 15px; }
.chip.hidden-chip { background: #eef2f6; color: transparent; border-style: dashed; user-select: none; min-width: 52px; }
.chip.hidden-chip .chip-text { visibility: hidden; }
.chip.shown { animation: pop 0.25s; border-color: var(--primary); }

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 460px; width: 100%; margin: 0 auto; }
.ctl {
  display: grid; justify-items: center; gap: 0; min-height: 76px; padding: 6px; border-radius: 16px; background: #fff; border: 3px solid var(--primary); box-shadow: 0 4px 0 var(--primary-dark); font-weight: 800;
}
.ctl:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.ctl-icon { font-size: 26px; line-height: 1.1; }
.ctl-zh { font-size: 17px; }
.ctl-en { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.ctl.wrong { background: var(--bad-soft); border-color: var(--bad); animation: shake 0.45s; }
.ctl:disabled { opacity: 0.5; }
.mapfollow .q-enter, .mappick .q-enter { justify-items: center; }
.mapfollow { --map-max-h: max(180px, calc(100dvh - 480px)); }
.mappick.route { --map-max-h: max(200px, calc(100dvh - 420px)); }
/* 橫向矮螢幕 (手機橫拿、小筆電)：地圖在左、指令與按鈕在右，兩者同時可見 */
@media (orientation: landscape) and (max-height: 620px) {
  .mapfollow .q-enter, .mappick.route .q-enter { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; }
  .mapfollow .q-enter > *, .mappick.route .q-enter > * { grid-column: 2; }
  .mapfollow .q-enter > .map-wrap, .mappick.route .q-enter > .map-wrap { grid-column: 1; grid-row: 1 / span 6; width: min(56vw, calc((100dvh - 185px) * var(--ratio, 1.4))); }
  .mapfollow .ctl { min-height: 60px; }
  .mapfollow .follow-tip { font-size: 14px; }
  .mapfollow .q-reveal:empty { display: none; }
}
.mapfollow .listen, .mappick .listen { justify-self: center; }

.street { display: grid; gap: 6px; width: min(100%, 560px); margin: 0 auto; }
.street-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bldg.big { aspect-ratio: 1 / 0.95; margin: 0; }
.bldg.big .bldg-emoji { font-size: clamp(34px, 10vw, 54px); }
.bldg.big .bldg-name { font-size: clamp(12px, 3.4vw, 16px); }
.street-road { height: 38px; border-radius: 10px; background: repeating-linear-gradient(90deg, #cfd8e2 0 24px, #dde5ee 24px 48px); display: grid; place-items: center; letter-spacing: 4px; }

/* ───────── 結算 ───────── */

.screen.result {
  display: grid; place-items: start center;
  background: linear-gradient(180deg, rgba(217, 242, 253, 0.85), rgba(255, 246, 224, 0.92)), url(../assets/img/bg_menu.webp) center / cover no-repeat;
}
.result-card { width: min(100%, 520px); padding: 18px 18px 22px; border-radius: 26px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow); text-align: center; display: grid; justify-items: center; gap: 6px; animation: slideIn 0.35s; }
.result-card h2 { margin: 0; font-size: 30px; color: var(--primary-dark); }
.result-card p { margin: 0; }
.result-sub { color: var(--ink-soft); font-weight: 700; }
.big-stars { display: flex; gap: 8px; font-size: clamp(48px, 14vw, 68px); line-height: 1; }
.big-star { color: #d3dbe3; transition: transform 0.3s; }
.big-star.on { color: #ffc233; }
.big-star.on.pop { animation: starPop 0.5s; }
.result-score { font-size: 22px; font-weight: 800; }
.score-num { font-size: 38px; color: var(--accent-dark); font-weight: 900; }
.result-best { font-weight: 800; color: #a86a00; }
.result-detail { color: var(--ink-soft); font-size: 15px; }
.result-need { color: var(--bad); font-weight: 700; font-size: 15px; }
.stamp-pop { margin-top: 6px; padding: 10px 18px; border-radius: 16px; border: 4px double var(--c); background: #fff; color: var(--ink); transform: rotate(-3deg); animation: stampIn 0.6s 1.2s both; font-size: 18px; display: flex; gap: 8px; align-items: center; }

/* ───────── 對話框 ───────── */

.dialog { border: 0; padding: 0; border-radius: 22px; width: min(92vw, 440px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); color: var(--ink); font-family: var(--font); }
.dialog::backdrop { background: rgba(20, 40, 60, 0.55); }
.dlg-body { display: grid; gap: 12px; padding: 20px 20px 18px; }
.dlg-body h2 { margin: 0; font-size: 24px; text-align: center; }
.row { display: grid; gap: 4px; font-weight: 700; }
.row input[type="range"] { width: 100%; height: 36px; accent-color: var(--primary); }
.row.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.row.check input { width: 24px; height: 24px; accent-color: var(--primary); }
.reset-zone { display: grid; gap: 8px; justify-items: start; padding-top: 6px; border-top: 2px dashed var(--line); }
.reset-confirm p { margin: 0 0 6px; color: #b3243f; font-weight: 700; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 17px; line-height: 1.5; }

/* ───────── 特效 ───────── */

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti { position: absolute; width: 9px; height: 13px; border-radius: 2px; }
.float-text { position: absolute; font-weight: 900; font-size: 26px; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; white-space: nowrap; }
.float-text.good { color: #12a060; }
.float-text.bad { color: var(--bad); }
.flash-ring { position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 6px solid; }
.banner {
  position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); max-width: 92vw;
  padding: 12px 22px; border-radius: 999px; background: #fff3c4; border: 3px solid var(--gold); color: #7a4b00;
  font-weight: 900; font-size: 18px; text-align: center; box-shadow: var(--shadow); animation: bannerIn 0.4s;
}

.shake { animation: shake 0.45s; }
.shake-soft { animation: flashBad 0.45s; }
.pulse { animation: pulse 0.45s; }

/* ───────── 動畫 ───────── */

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(1.08); } }
@keyframes droop { 0% { transform: rotate(0); } 30% { transform: rotate(-8deg) translateY(4px); } 60% { transform: rotate(6deg) translateY(2px); } 100% { transform: rotate(0); } }
@keyframes fly { 0% { transform: translateX(-10vw) translateY(10px) rotate(-6deg); } 100% { transform: translateX(110vw) translateY(-20px) rotate(-6deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes flashBad { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px var(--bad)) saturate(1.4); } }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes starPop { 0% { transform: scale(0.2) rotate(-40deg); } 60% { transform: scale(1.4) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes stampIn { 0% { transform: scale(3) rotate(-3deg); opacity: 0; } 70% { transform: scale(0.92) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ───────── 動畫減弱 (系統設定或遊戲設定)：保留顏色與提示等視覺回饋 ───────── */

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
.reduce-motion .plane { display: none; }

/* ───────── 版面微調：窄螢幕、橫向手機 ───────── */

@media (max-width: 380px) {
  .brand-name { font-size: 15px; }
  .hud-name { font-size: 16px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .toolbar { padding-top: calc(3px + env(safe-area-inset-top, 0px)); padding-bottom: 3px; }
  .site-footer { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); font-size: 11px; }
  .mascot-big { width: 90px; height: 90px; }
  .hero { gap: 2px; }
  .title { font-size: 26px; }
  .q-img { width: 120px; height: 120px; }
  .q-emoji { font-size: 48px; }
  .fall-field { height: 220px; }
  .stage { min-height: 240px; }
  .screen.play { padding-bottom: 6px; }
  .mascot-hud, .hud-lv { display: none; }
  .hud { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 0 2px; }
  .hud-row { flex: 0 1 auto; }
  .hud-row:first-child { flex: 1 1 auto; }
  .hud-box { min-height: 30px; font-size: 15px; padding: 2px 10px; }
  .hud .timer { flex-basis: 100%; height: 8px; }
  .opt { min-height: 52px; }
  .opt.icon-only { min-height: 70px; }
}