/* ═══════════════════════════════════════════════════════
   English Quest — 遊戲本體樣式
   由 index.html（提案版）與 play/index.html（純遊戲版）共用。
   只放「手機畫面裡面」的東西；頁面外框樣式各自處理。
   ═══════════════════════════════════════════════════════ */
:root{
  --paper:   #FFF6E9;
  --paper-2: #FFEBD2;
  --ink:     #17322C;
  --ink-dim: #6F857E;

  --mango: #FF8A3D;
  --gold:  #FFC24B;
  --sky:   #3FA9D4;
  --mint:  #3FBE90;
  --rose:  #F2637C;

  --zh: "PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --en: "Fredoka", ui-rounded, "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.en{font-family:var(--en)}
.num{font-family:var(--en); font-variant-numeric:tabular-nums}

/* ── 遊戲容器 ─────────────────────────────
   高度與圓角由各頁面決定；這裡只管內部排版。 */
.eq-screen{
  position:relative; overflow:hidden;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column;
  font-family:var(--zh); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ── 狀態列 ─────────────────────────────── */
.hud{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:14px 16px 10px; background:var(--paper);
  position:relative; z-index:2;
}
/* 內容捲到狀態列下方時做柔化，避免文字被切一半 */
.hud::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:16px;
  background:linear-gradient(var(--paper), rgba(255,246,233,0));
  pointer-events:none;
}
.hud-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--en); font-weight:600; font-size:13px;
  background:#fff; border:1px solid rgba(23,50,44,.10); color:var(--ink);
  padding:5px 10px; border-radius:999px;
}
.hud-chip.gold{background:#FFF3D6; border-color:#F3D89A}
.hud-sp{flex:1}
.hud-back{font-size:13px; color:var(--ink-dim); padding:5px 8px; border-radius:8px}
.hud-back:hover{background:rgba(23,50,44,.06)}

/* ── 可捲動內容 ─────────────────────────── */
.view{flex:1; overflow-y:auto; padding:4px 18px 22px; scrollbar-width:thin}
.view::-webkit-scrollbar{width:5px}
.view::-webkit-scrollbar-thumb{background:rgba(23,50,44,.18); border-radius:9px}

.v-title{font-size:20px; font-weight:700; margin:10px 0 4px; letter-spacing:-.01em}
.v-sub{font-size:13.5px; color:var(--ink-dim); margin:0 0 18px; line-height:1.6}

.cta{
  display:block; width:100%; text-align:center;
  background:var(--mango); color:#fff; font-weight:700; font-size:16px;
  padding:15px; border-radius:15px; box-shadow:0 5px 0 #D9662A; transition:.12s;
}
.cta:hover{filter:brightness(1.05)}
.cta:active{transform:translateY(3px); box-shadow:0 2px 0 #D9662A}
.cta.ghost{background:#fff; color:var(--ink); box-shadow:0 3px 0 rgba(23,50,44,.14); font-size:15px}
.cta.ghost:active{box-shadow:0 1px 0 rgba(23,50,44,.14)}
.cta + .cta{margin-top:10px}

/* ── 開場 ───────────────────────────────── */
.splash{text-align:center; padding-top:26px}
.splash-art{font-size:62px; line-height:1; margin-bottom:6px; animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.splash h2{font-family:var(--en); font-size:33px; font-weight:700; margin:8px 0 2px; letter-spacing:-.02em}
.splash .zh-name{font-size:16px; font-weight:700; letter-spacing:.22em; color:var(--ink-dim); margin-bottom:20px}
.splash-note{
  background:var(--paper-2); border-radius:14px; padding:13px 15px; text-align:left;
  font-size:13.5px; line-height:1.65; margin:20px 0 22px;
}
.splash-note b{color:#C35A19}

/* ── 選擇卡 ─────────────────────────────── */
.pick{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:#fff; border:2px solid transparent; border-radius:16px;
  padding:13px 15px; margin-bottom:10px; transition:.14s;
  box-shadow:0 2px 0 rgba(23,50,44,.09);
}
.pick:hover{border-color:var(--mango); transform:translateX(2px)}
.pick-ico{font-size:26px; flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--paper-2)}
.pick-body{flex:1; min-width:0}
.pick-t{font-weight:700; font-size:15px}
.pick-s{font-size:12.5px; color:var(--ink-dim)}
.pick-go{color:var(--ink-dim); font-family:var(--en); font-size:18px}
.pick.locked{opacity:.5; box-shadow:none}
.pick.locked:hover{border-color:transparent; transform:none}

.soon{
  border:2px dashed #E3B57C; background:#FFF3E0; border-radius:16px;
  padding:13px 15px; font-size:13px; line-height:1.6; margin-top:4px;
}
.soon b{color:#C35A19}

/* ── 關卡地圖 ───────────────────────────── */
.map{display:flex; flex-direction:column; gap:0; padding:4px 0 0}
.node{display:flex; align-items:center; gap:13px; position:relative; padding:5px 0}
.node::before{
  content:""; position:absolute; left:20px; top:-8px; bottom:-8px; width:3px;
  background:repeating-linear-gradient(180deg,rgba(23,50,44,.16) 0 5px,transparent 5px 11px);
  z-index:0;
}
.node:first-child::before{top:50%}
.node:last-child::before{bottom:50%}
.node-dot{
  position:relative; z-index:1; width:41px; height:41px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--en); font-weight:700; font-size:15px;
  background:#fff; color:var(--ink-dim); border:2px solid rgba(23,50,44,.13); flex:0 0 auto;
}
.node.done .node-dot{background:var(--mint); color:#fff; border-color:var(--mint)}
.node.now .node-dot{background:var(--mango); color:#fff; border-color:var(--mango); box-shadow:0 0 0 5px rgba(255,138,61,.22)}
.node.chest .node-dot{background:var(--gold); color:#17322C; border-color:var(--gold)}
.node-txt{font-size:14px; font-weight:600}
.node-txt small{display:block; font-weight:400; font-size:12px; color:var(--ink-dim)}
.node.pend .node-txt{color:var(--ink-dim); font-weight:500}

/* ── 題目 ───────────────────────────────── */
.rolecard{
  background:#fff; border-radius:18px; padding:15px 16px 16px; margin-bottom:14px;
  box-shadow:0 3px 0 rgba(23,50,44,.09);
}
.rolecard-h{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:#C35A19; letter-spacing:.02em; margin-bottom:9px;
}
.rolecard-h .who{background:var(--paper-2); padding:3px 9px; border-radius:999px}
.line-en{font-family:var(--en); font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.01em; margin-bottom:5px}
.line-zh{font-size:13px; color:var(--ink-dim); margin-bottom:11px}
.speak-row{display:flex; gap:8px}
.speak{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--paper-2); color:#B4511A; font-weight:700; font-size:13px;
  padding:9px; border-radius:11px; transition:.14s;
}
.speak:hover{background:#FFDDB4}
.speak.slow{flex:0 0 auto; padding:9px 13px}

.scene{text-align:center; font-size:46px; line-height:1; margin:2px 0 14px}
.ask{font-size:14px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:7px}
.ask .who{background:#E1F2EA; color:#1D7A57; padding:3px 9px; border-radius:999px; font-size:12px}

.opt{
  display:block; width:100%; text-align:left; background:#fff;
  border:2px solid rgba(23,50,44,.10); border-radius:14px;
  padding:13px 15px; margin-bottom:9px; transition:.14s;
  font-family:var(--en); font-size:15.5px; font-weight:500;
}
.opt:hover:not(:disabled){border-color:var(--sky); transform:translateX(2px)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--mint); background:#E7F7F0}
.opt.wrong{border-color:var(--rose); background:#FDECEF; animation:shake .32s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.mic{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:2px dashed rgba(63,169,212,.55); color:#1D7FA8; background:#EAF6FB;
  border-radius:14px; padding:11px; font-size:13.5px; font-weight:700; margin-top:2px;
}
.mic:hover:not(:disabled){background:#DCEFF8}
.mic:disabled{cursor:default}

.verdict{border-radius:14px; padding:13px 15px; margin-top:12px; font-size:13.5px; line-height:1.6; animation:pop .25s ease-out}
.verdict.ok{background:#E7F7F0; color:#1B6B4C}
.verdict.no{background:#FDECEF; color:#A63149}
.verdict b{display:block; font-size:15px; margin-bottom:2px}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ── 星星飛出 ───────────────────────────── */
.starfly{
  position:absolute; left:50%; top:44%; font-size:38px; pointer-events:none; z-index:9;
  animation:fly .9s cubic-bezier(.3,-0.4,.5,1) forwards;
}
@keyframes fly{
  0%{opacity:0; transform:translate(-50%,0) scale(.4)}
  25%{opacity:1; transform:translate(-50%,-14px) scale(1.25)}
  100%{opacity:0; transform:translate(-160px,-215px) scale(.42)}
}

/* ── 寶箱 ───────────────────────────────── */
.chest-box{text-align:center; padding-top:22px}
.chest-art{font-size:78px; line-height:1; cursor:pointer; display:inline-block; transition:.2s}
.chest-art:hover{transform:scale(1.07)}
.chest-art.open{animation:burst .55s ease-out}
@keyframes burst{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-7deg)}100%{transform:scale(1)}}

/* ── 結算與報告 ─────────────────────────── */
.tally{background:#fff; border-radius:18px; padding:17px; box-shadow:0 3px 0 rgba(23,50,44,.09); margin-bottom:13px}
.tally-row{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:14px}
.tally-row + .tally-row{border-top:1px dashed rgba(23,50,44,.13)}
.tally-row b{font-family:var(--en); font-size:19px; font-weight:700}
.badge-got{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,#FFF3D6,#FFE3AE);
  border-radius:16px; padding:14px; margin-bottom:13px;
}
.badge-medal{font-size:36px}
.badge-got div{font-size:13px; line-height:1.55}
.badge-got b{display:block; font-size:15px}

.bar-row{margin-bottom:12px}
.bar-lab{display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px}
.bar-lab span:last-child{font-family:var(--en); font-weight:600; color:var(--ink-dim)}
.bar{height:9px; border-radius:999px; background:rgba(23,50,44,.10); overflow:hidden}
.bar i{display:block; height:100%; border-radius:999px; background:var(--mint); transition:width .8s cubic-bezier(.2,.9,.3,1)}
.bar i.low{background:var(--rose)}
.advice{background:#E9F3FF; border-radius:14px; padding:13px 15px; font-size:13px; line-height:1.65; margin-top:6px}
.advice b{color:#1A5C8A}

/* ── 兌換 ───────────────────────────────── */
.rw{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
  padding:12px 14px; margin-bottom:10px; box-shadow:0 2px 0 rgba(23,50,44,.09);
  border:2px solid transparent; transition:.14s; width:100%; text-align:left;
}
.rw:hover:not(:disabled){border-color:var(--gold)}
.rw:disabled{opacity:.45}
.rw-ico{font-size:28px; width:46px; height:46px; border-radius:13px; background:var(--paper-2); display:grid; place-items:center; flex:0 0 auto}
.rw-b{flex:1; min-width:0}
.rw-t{font-weight:700; font-size:14.5px}
.rw-s{font-size:12px; color:var(--ink-dim)}
.rw-cost{font-family:var(--en); font-weight:700; font-size:14px; color:#C35A19; white-space:nowrap}

.ticket{background:#fff; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 6px 0 rgba(23,50,44,.10); margin-bottom:14px}
.ticket-top{background:linear-gradient(135deg,#FF8A3D,#FFC24B); color:#fff; padding:18px 16px; text-align:center}
.ticket-top .t-ico{font-size:40px; line-height:1}
.ticket-top .t-name{font-weight:700; font-size:17px; margin-top:5px}
.ticket-perf{position:relative; height:0; border-top:2px dashed rgba(23,50,44,.22)}
.ticket-perf::before,.ticket-perf::after{
  content:""; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%; background:var(--paper);
}
.ticket-perf::before{left:-11px}
.ticket-perf::after{right:-11px}
.ticket-bot{padding:16px; text-align:center}
.qr{display:grid; grid-template-columns:repeat(21,1fr); width:132px; margin:0 auto 12px; aspect-ratio:1}
.qr i{background:transparent}
.qr i.on{background:var(--ink)}
.serial{font-family:var(--en); font-size:13px; letter-spacing:.09em; color:var(--ink-dim)}
.redeem-note{background:#FFF3D6; border-radius:12px; padding:11px 13px; font-size:12.5px; line-height:1.6; margin-top:12px; text-align:left}
.redeem-note b{color:#B4511A}
.countdown{font-family:var(--en); font-weight:700; color:var(--rose)}

/* ── 排行榜 ─────────────────────────────── */
.lb{background:#fff; border-radius:16px; padding:6px 14px; box-shadow:0 3px 0 rgba(23,50,44,.09); margin-bottom:14px}
.lb-row{display:flex; align-items:center; gap:11px; padding:10px 0; font-size:14px}
.lb-row + .lb-row{border-top:1px solid rgba(23,50,44,.08)}
.lb-rk{font-family:var(--en); font-weight:700; width:26px; color:var(--ink-dim)}
.lb-row.me{background:#FFF3D6; margin-inline:-14px; padding-inline:14px; border-radius:10px}
.lb-row.me .lb-rk{color:#C35A19}
.lb-nm{flex:1}
.lb-st{font-family:var(--en); font-weight:600; color:#C35A19}
.gap-note{background:#FDECEF; border-radius:13px; padding:12px 14px; font-size:13px; line-height:1.6; margin-bottom:13px}
.gap-note b{color:#A63149}

.done-panel{text-align:center; padding-top:30px}
.done-panel .big{font-size:56px; line-height:1; margin-bottom:10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}