/* ===== 主題 token（逐一照 README Design Tokens） ===== */
:root[data-theme="arcade"]{--brand-ink:#08201e;
  --page-bg:radial-gradient(120% 80% at 50% 0%,#1d1240 0%,#0b0616 60%);
  --nav-bg:rgba(13,8,32,.72); --nav-line:#241641;
  --ink:#efe8ff; --dim:#9a86c8; --dim2:#b6a7de; --dim3:#c8bbe8; --faint:#6f5f97;
  --brand:#ff2d78; --accent:#28e0d0; --warm:#ff8a3d;
  --card:#160e2c; --card2:#241641; --card3:#1c1233;
  --line:#2c1c50; --line2:#34205e; --line3:#3c2a63;
  --chip-bg:#1c1233; --chip-line:#3a2860; --chip-ink:#c8bbe8;
  --ready-bg:linear-gradient(165deg,#241641,#160e2c); --ready-line:#34205e;
  --badge-bg:#28e0d0; --badge-ink:#08201e;
  --combo-ink:#ff8a3d; --combo-bg:rgba(255,138,61,.14); --combo-line:rgba(255,138,61,.4);
  --score-ink:#28e0d0;
  --seg-done:linear-gradient(90deg,#ff2d78,#ff6a3d); --seg-cur:#28e0d0;
  --seg-cur-glow:0 0 10px 1px rgba(40,224,208,.6); --seg-todo:#241641;
  --tf-ok:#28e0d0; --tf-no:#ff2d78;
  --opt-bg:#241641; --opt-line:#3c2a63; --opt-ink:#efe8ff;
  --opt-sel-bg:#2e1a52; --opt-sel-line:#7a5bd6; --opt-sel-ink:#fff;
  --opt-ok-bg:rgba(40,224,208,.16); --opt-ok-line:#28e0d0; --opt-ok-ink:#c9fff9;
  --opt-no-bg:rgba(255,45,120,.16); --opt-no-line:#ff2d78; --opt-no-ink:#ffd2e2;
  --opt-dim-bg:#1c1233; --opt-dim-line:#2a1c47; --opt-dim-ink:#6f5f97;
  --key-bg:#160e2c; --key-line:#3a2860;
  --exp-bg:#1c1233; --exp-line:#3a2860; --exp-accent:#28e0d0; --exp-ink:#d7ccf2;
  --cta-bg:linear-gradient(90deg,#ff2d78,#ff6a3d); --cta-ink:#fff;
  --next-bg:#28e0d0; --next-ink:#08201e;
  --alt-bg:#241641; --alt-line:#3a2860; --alt-ink:#efe8ff;
  --panel-bg:#140c28; --panel-line:#241641;
  --idiom-bg:#160e2c; --idiom-line:#241641; --idiom-word:#28e0d0;
  --sub-bg:#241641; --sub-line:#34205e; --sub-ink:#efe8ff;
  --ad-bg:#160e2c; --ad-line:#34205e; --ad-ink:#6f5f97;
  --record-bg:rgba(40,224,208,.12); --record-line:#28e0d0; --record-ink:#c9fff9;
  --tab-ink:#9a86c8; --tab-line:#2a1c47; --tab-on-ink:#ff8ab5; --tab-on-line:#ff2d78; --tab-on-bg:rgba(255,45,120,.16);
  --title-font:'Noto Sans TC',sans-serif;
  --card-radius:24px;
}
:root[data-theme="paper"]{--brand-ink:#fff;
  --page-bg:#e7dcc2;
  --nav-bg:rgba(245,238,222,.82); --nav-line:#ddceac;
  --ink:#38312a; --dim:#6e6350; --dim2:#8a7a5c; --dim3:#6e6350; --faint:#a1927a;
  --brand:#b5502f; --accent:#5a8a4a; --warm:#d98a3d;
  --card:#f5eede; --card2:#efe6d0; --card3:#f0e7d3;
  --line:#e2d6ba; --line2:#ddceac; --line3:#d8c9a6;
  --chip-bg:#efe6d0; --chip-line:#ddceac; --chip-ink:#6e6350;
  --ready-bg:#f5eede; --ready-line:#e2d6ba;
  --badge-bg:#7a6a4c; --badge-ink:#fdf6e8;
  --combo-ink:#b5502f; --combo-bg:#f0e2d6; --combo-line:#e0c3b2;
  --score-ink:#b5502f;
  --seg-done:linear-gradient(90deg,#b5502f,#d98a3d); --seg-cur:#5a8a4a;
  --seg-cur-glow:0 0 0 3px rgba(90,138,74,.3); --seg-todo:#e6dabf;
  --tf-ok:#5a8a4a; --tf-no:#c1352b;
  --opt-bg:#efe6d0; --opt-line:#d8c9a6; --opt-ink:#39312a;
  --opt-sel-bg:#e7dab9; --opt-sel-line:#b5502f; --opt-sel-ink:#39312a;
  --opt-ok-bg:#e4efe0; --opt-ok-line:#5a8a4a; --opt-ok-ink:#2f4a28;
  --opt-no-bg:#f3e0dc; --opt-no-line:#b5502f; --opt-no-ink:#7a2c22;
  --opt-dim-bg:#efe6d0; --opt-dim-line:#e4dabf; --opt-dim-ink:#a99e86;
  --key-bg:#faf3e4; --key-line:#ddceac;
  --exp-bg:#efe6d0; --exp-line:#ddceac; --exp-accent:#b5502f; --exp-ink:#5c5040;
  --cta-bg:#b5502f; --cta-ink:#fdf6e8;
  --next-bg:#7a6a4c; --next-ink:#fdf6e8;
  --alt-bg:#efe6d0; --alt-line:#ddceac; --alt-ink:#5c5040;
  --panel-bg:#f0e7d3; --panel-line:#e0d3b4;
  --idiom-bg:#f5eede; --idiom-line:#e2d6ba; --idiom-word:#b5502f;
  --sub-bg:#fdf6e8; --sub-line:#e2d6ba; --sub-ink:#38312a;
  --ad-bg:#efe6d0; --ad-line:#d3c2a0; --ad-ink:#a1927a;
  --record-bg:#e4efe0; --record-line:#5a8a4a; --record-ink:#2f4a28;
  --tab-ink:#8a7a5c; --tab-line:#ddceac; --tab-on-ink:#b5502f; --tab-on-line:#b5502f; --tab-on-bg:#f0e2d6;
  --title-font:'Noto Serif TC',serif;
  --card-radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page-bg);min-height:100vh;color:var(--ink);
  font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
/* 紙感版紙紋 */
:root[data-theme="paper"] body{
  background-color:#e7dcc2;
  background-image:radial-gradient(rgba(78,58,28,.08) .5px,transparent .6px),
    radial-gradient(rgba(120,92,48,.06) .5px,transparent .6px),
    repeating-linear-gradient(90deg,rgba(96,70,32,.018) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(96,70,32,.013) 0 1px,transparent 1px 5px);
  background-size:3px 3px,6px 6px,100% 100%,100% 100%;
  background-position:0 0,1.5px 2px,0 0,0 0;
}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.85}
h1,h2{font-family:var(--title-font)}

/* ===== 導覽列 ===== */
.appbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:var(--nav-bg);border-bottom:1px solid var(--nav-line)}
.appbar .inner{max-width:760px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{background:none;border:none;color:var(--brand);font-size:18px;font-weight:900;letter-spacing:.04em;
  cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--title-font);text-decoration:none;
  flex:none;white-space:nowrap}
.abright{display:flex;align-items:center;gap:8px;min-width:0}
.iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);
  color:var(--dim);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;appearance:none}
.iconbtn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* 年級分頁（build 注入 .gtab；.on=當前年級、.soon=未開放 span） */
.gtabs{display:flex;gap:6px;align-items:center}
.gtabs:empty{display:none}
.gtab{font-size:13px;font-weight:800;padding:6px 11px;border-radius:99px;border:1px solid var(--tab-line);
  color:var(--tab-ink);background:transparent;text-decoration:none;white-space:nowrap;line-height:1.2}
a.gtab:hover{opacity:1;border-color:var(--tab-on-line)}
.gtab.on{border-color:var(--tab-on-line);background:var(--tab-on-bg);color:var(--tab-on-ink)}
.gtab.soon{opacity:.55;cursor:default}
/* 主題切換 pill：顯示目前主題（🎮 電玩／📜 紙感），點了換 */
.themepill{display:flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:99px;
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);font-size:13px;font-weight:800;
  cursor:pointer;appearance:none;font-family:inherit;line-height:1;white-space:nowrap}
.themepill{position:relative}
.themepill .tico{width:17px;height:17px;display:block}
.themepill::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;background:rgba(20,16,25,.95);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.themepill:hover::after{opacity:1}
.themepill:hover{border-color:var(--tab-on-line)}
.themepill:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media(max-width:480px){
  .appbar .inner{padding:12px 12px;gap:8px}
  .brand{font-size:16px}
  .abright{gap:6px}
  .gtabs{overflow-x:auto;scrollbar-width:none}
  .gtabs::-webkit-scrollbar{display:none}
  .gtab{padding:5px 8px;font-size:12px}
  .themepill{padding:0 10px;flex:none}
  .themepill .tlabel{display:none}   /* 手機窄幅只剩 icon */
}

.wrap{max-width:760px;margin:0 auto;padding:20px 20px 70px}
.crumb{max-width:760px;margin:16px auto 0;padding:0 20px;font-size:13px;color:var(--dim2);font-weight:700}
.crumb:empty{display:none}
.crumb a{color:var(--dim2)}
.crumb a:hover{text-decoration:underline}

.card{border-radius:var(--card-radius);margin-top:20px}
.hidden{display:none!important}

/* ===== 開始前 ===== */
.ready{background:var(--ready-bg);border:1px solid var(--ready-line);padding:32px 24px;text-align:center}
.ready .kick{font-size:13px;color:var(--dim2);font-weight:700;letter-spacing:.05em}
.ready .lbadge{width:78px;height:78px;margin:16px auto 6px;border:3px solid var(--brand);border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:22px;font-weight:900;
  font-family:var(--title-font);box-shadow:0 0 22px -4px var(--brand)}
.ready h1{font-size:28px;font-weight:900;margin:14px 0 8px}
.ready .lead{font-size:15px;color:var(--dim3);margin:0 0 18px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip{font-size:13px;font-weight:700;background:var(--chip-bg);border:1px solid var(--chip-line);
  color:var(--chip-ink);padding:7px 13px;border-radius:99px}
.best{margin:18px 0 0;color:var(--dim);font-size:.92rem;font-weight:700}
.best b{color:var(--brand)}
.btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:900;border-radius:14px;
  padding:15px 20px;font-size:1.05rem;width:100%;transition:filter .15s,transform .08s,box-shadow .12s}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn-go{background:var(--cta-bg);color:var(--cta-ink);box-shadow:0 10px 24px -8px var(--brand)}
.btn-go:hover{filter:brightness(1.05)}
.btn-next{background:var(--next-bg);color:var(--next-ink)}
.btn-alt{background:var(--alt-bg);color:var(--alt-ink);border:1px solid var(--alt-line)}
.ready .btn-go{margin-top:22px;width:auto;padding:16px 40px;font-size:18px}

/* ===== 答題中 ===== */
.quizcard{position:relative;background:var(--card);border:1px solid var(--line);padding:24px}
.fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.qtop{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;color:var(--dim)}
.qtop .sc{color:var(--score-ink)}
.prog{position:relative;margin-top:20px;height:36px}
.runner{position:absolute;top:0;left:0;font-size:20px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transform:translateX(-50%) scaleX(-1);transition:left .35s ease}
.segs{position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px}
.seg{flex:1;height:10px;border-radius:4px;background:var(--seg-todo);transition:background .3s,box-shadow .3s}
.seg.done{background:var(--seg-done)}
.seg.cur{background:var(--seg-cur);box-shadow:var(--seg-cur-glow)}
.combo{display:none;margin-top:14px;font-size:13px;font-weight:900;color:var(--combo-ink);
  background:var(--combo-bg);border:1px solid var(--combo-line);padding:5px 13px;border-radius:99px}
.combo.on{display:inline-block;animation:pop .3s ease}
.qtag{margin-top:18px;display:inline-block;font-size:12px;font-weight:900;letter-spacing:.08em;
  color:var(--badge-ink);background:var(--badge-bg);padding:5px 13px;border-radius:8px}
.q{margin:14px 0 0;font-size:23px;font-weight:800;line-height:1.55;text-wrap:pretty;font-family:var(--title-font)}
:root[data-theme="paper"] .q{font-weight:700;line-height:1.6}

.opts{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.opt{appearance:none;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:10px;text-align:left;cursor:pointer;font-family:inherit;font-size:17px;font-weight:800;line-height:1.4;
  padding:15px 18px;border-radius:14px;border:2px solid var(--opt-line);background:var(--opt-bg);color:var(--opt-ink);
  transition:transform .12s ease,background .15s,border-color .15s,box-shadow .15s;animation:optIn .3s ease backwards}
.opt .l{display:flex;align-items:center;gap:11px}
.opt .k{flex:none;width:27px;height:27px;border-radius:8px;background:var(--key-bg);border:1px solid var(--key-line);
  display:grid;place-items:center;font-weight:900;font-size:.85rem;color:var(--dim)}
.opt .ico{font-size:23px;font-weight:900;line-height:1}
.opt .mk{font-size:19px;font-weight:900}
.opt:hover:not(:disabled){border-color:var(--brand)}
.opt:active:not(:disabled){transform:translateY(2px)}
.opt:disabled{cursor:default}
.opt:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.opt.sel{background:var(--opt-sel-bg);border-color:var(--opt-sel-line);color:var(--opt-sel-ink)}
.opt.correct{background:var(--opt-ok-bg);border-color:var(--opt-ok-line);color:var(--opt-ok-ink);animation:pop2 .42s cubic-bezier(.22,1,.36,1)}
.opt.wrong{background:var(--opt-no-bg);border-color:var(--opt-no-line);color:var(--opt-no-ink);animation:shake .4s ease}
.opt.dim{background:var(--opt-dim-bg);border-color:var(--opt-dim-line);color:var(--opt-dim-ink)}
.opts.duo{flex-direction:row;gap:12px}
.opts.duo .opt{flex:1;flex-direction:column;gap:8px;justify-content:center;text-align:center;padding:20px 12px;font-size:1.3rem}
.opts.duo .opt .l{flex-direction:column;gap:8px}
.opts.duo .opt .mk{display:none}
.ico.ok{color:var(--tf-ok)} .ico.no{color:var(--tf-no)}

.fb{margin-top:16px;border-radius:12px;padding:15px;font-size:14px;line-height:1.75;display:none;border:1px solid;border-left:4px solid;text-wrap:pretty}
.fb.show{display:block;animation:rise .3s ease}
.fb.ok{background:var(--opt-ok-bg);border-color:var(--opt-ok-line)}
.fb.no{background:var(--opt-no-bg);border-color:var(--opt-no-line)}
.fb b{display:block;margin-bottom:3px}
.fb .mne{display:block;margin-top:6px;font-size:.95rem;color:var(--dim)}
.next{margin-top:14px;position:sticky;bottom:14px;z-index:7;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ===== 結算 ===== */
.res{background:var(--ready-bg);border:1px solid var(--ready-line);padding:34px 24px;text-align:center}
.medal{font-size:78px;animation:medalIn .55s cubic-bezier(.22,1,.36,1) backwards}
.rmsg{font-size:26px;font-weight:900;margin:6px 0 4px;font-family:var(--title-font);text-wrap:balance}
.rsub{font-size:15px;color:var(--dim3);line-height:1.9;margin:10px 0 0}
.rsub b.c{color:var(--accent)} .rsub b.s{color:var(--warm)}
.record{display:none;margin:16px auto 0;max-width:340px;background:var(--record-bg);border:1px solid var(--record-line);
  color:var(--record-ink);border-radius:12px;padding:10px;font-weight:800}
.record.show{display:block;animation:pop2 .5s cubic-bezier(.22,1,.36,1)}
.review{text-align:left;margin:18px 0 0;display:flex;flex-direction:column;gap:8px}
.review h3{font-size:.9rem;color:var(--dim);margin:0 0 2px;font-weight:800}
.ri{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px 40px;font-size:.98rem;position:relative}
.ri::before{content:"✗";position:absolute;left:14px;top:12px;color:var(--tf-no);font-weight:900}
.ri b{color:var(--brand)}
.ri a{color:var(--brand);font-weight:800}
.actions{max-width:340px;margin:20px auto 0;display:flex;flex-direction:column;gap:10px}
.linkbtn{display:block;text-align:center;background:var(--alt-bg);color:var(--alt-ink);border:1px solid var(--alt-line);
  padding:14px;border-radius:14px;font-size:15px;font-weight:800}
.ghost{background:transparent;border:none;color:var(--dim);padding:8px;font-size:14px;font-weight:800;cursor:pointer}
.cardimg{width:100%;border-radius:14px;border:1px solid var(--line2);display:block}
.dlbtn{display:block;text-align:center;background:var(--next-bg);color:var(--next-ink);padding:13px;border-radius:12px;font-size:15px;font-weight:900}
.copied{font-size:12px;color:var(--accent);font-weight:800;text-align:center;display:none}
.copied.show{display:block}

/* ===== 廣告版位（只在內容區） ===== */
.adslot{margin-top:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:110px;border:2px dashed var(--ad-line);border-radius:16px;background:var(--ad-bg);
  color:var(--ad-ink);font-size:13px;font-weight:700;text-align:center;padding:16px}
.adslot small{font-size:11px;font-weight:500}

/* ===== 影片・複習 ===== */
.divider{display:flex;align-items:center;gap:16px;margin-top:40px}
.divider span.ln{flex:1;border-top:2px dashed var(--ad-line)}
.divider span.lb{font-family:var(--title-font);font-weight:900;font-size:14px;letter-spacing:.18em;color:var(--dim2);white-space:nowrap}
.panel{margin-top:20px;background:var(--panel-bg);border:1px solid var(--panel-line);border-radius:20px;padding:22px}
.panel h2{font-size:19px;font-weight:900;margin:0 0 4px}
.panel h2.mt{margin-top:28px}
.panel p.sub{font-size:13px;color:var(--dim2);margin:0 0 14px}
.player{position:relative;width:100%;padding-bottom:56.25%;height:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--line2);background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:#000 center/cover no-repeat}
.facade .play{width:74px;height:52px;border-radius:14px;background:#c1352b;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.facade .play span{color:#fff;font-size:24px;line-height:1;margin-left:3px}
.subbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;background:var(--sub-bg);
  border:1px solid var(--sub-line);color:var(--sub-ink);padding:13px 16px;border-radius:12px;font-size:15px;font-weight:800}
.subbar .yt{background:#c1352b;color:#fff;font-weight:900;font-size:13px;padding:4px 9px;border-radius:6px}
.idioms{display:flex;flex-direction:column;gap:8px}
.idiom{display:flex;gap:14px;align-items:center;background:var(--idiom-bg);border:1px solid var(--idiom-line);
  border-radius:10px;padding:12px 14px}
.idiom .pin{flex:none;width:30px;height:30px;border-radius:8px;background:#c1352b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.idiom .word{font-size:18px;font-weight:900;color:var(--idiom-word);white-space:nowrap;font-family:var(--title-font)}
.idiom .mean{font-size:14px;color:var(--dim3);line-height:1.6;text-wrap:pretty}

/* ===== 課別導覽（build 注入三顆 <a>：上一課/回年級/下一課；.dim=無目標） ===== */

.sitefoot{color:var(--faint);font-size:13px;text-align:center;line-height:1.9;margin-top:34px}
.sitefoot a{color:var(--faint);text-decoration:underline}

/* ===== keyframes ===== */
@keyframes optIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes pop2{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes medalIn{0%{opacity:0;transform:scale(.3) rotate(-25deg)}60%{transform:scale(1.15) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}