/* ===== 主題 token（與 quiz_engine_v2 同源） ===== */
: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;
  --ready-bg:linear-gradient(165deg,#241641,#160e2c); --ready-line:#34205e;
  --ad-bg:#160e2c; --ad-line:#34205e; --ad-ink:#6f5f97;
  --tab-ink:#9a86c8; --tab-line:#2a1c47; --tab-on-ink:#ff8ab5; --tab-on-line:#ff2d78; --tab-on-bg:rgba(255,45,120,.16);
  --badge-on-bg:rgba(40,224,208,.16); --badge-on-ink:#28e0d0;
  --badge-soon-bg:#241641; --badge-soon-ink:#6f5f97;
  --note-ink:#9a86c8;
  --gcard-soon-bg:#140c28; --gcard-soon-line:#221838;
  --lcard-open-bg:linear-gradient(165deg,#2a1a4d,#160e2c); --lcard-open-line:#7a5bd6;
  --lcard-soon-bg:#160e2c; --lcard-soon-line:#241641;
  --title-font:'Noto Sans TC',sans-serif;
}
: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;
  --ready-bg:#f5eede; --ready-line:#e2d6ba;
  --ad-bg:#efe6d0; --ad-line:#d3c2a0; --ad-ink:#a1927a;
  --tab-ink:#8a7a5c; --tab-line:#ddceac; --tab-on-ink:#b5502f; --tab-on-line:#b5502f; --tab-on-bg:#f0e2d6;
  --badge-on-bg:#f0e2d6; --badge-on-ink:#b5502f;
  --badge-soon-bg:#e6dabf; --badge-soon-ink:#a1927a;
  --note-ink:#8a7a5c;
  --gcard-soon-bg:#ece1c8; --gcard-soon-line:#ddceac;
  --lcard-open-bg:#faf3e4; --lcard-open-line:#b5502f;
  --lcard-soon-bg:#f5eede; --lcard-soon-line:#e2d6ba;
  --title-font:'Noto Serif TC',serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
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{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}
.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}
.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:hover{border-color:var(--tab-on-line)}
.themepill:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.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}
@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}
}

.wrap{max-width:760px;margin:0 auto;padding:26px 20px 70px}

/* ===== 主視覺（依 data-theme 切換） ===== */
.hero{text-align:center;padding:26px 0 8px}
.hero-zap,.hero-stamp{display:none}
:root[data-theme="arcade"] .hero-zap{display:block;font-size:64px;line-height:1;animation:floaty 3s ease-in-out infinite}
:root[data-theme="paper"] .hero-stamp{display:flex;width:88px;height:88px;margin:0 auto;border:3px solid var(--brand);
  border-radius:16px;align-items:center;justify-content:center;color:var(--brand);font-size:34px;font-weight:900;
  font-family:var(--title-font);transform:rotate(-3deg);animation:floaty 3.4s ease-in-out infinite}
.hero h1{font-size:33px;font-weight:900;margin:16px 0 10px;line-height:1.25}
.hero p{font-size:16px;color:var(--dim2);margin:0}

/* ===== 兩道門 ===== */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:520px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:24px 22px;text-decoration:none;
  border:1.5px solid;transition:transform .12s ease,border-color .15s}
.door:hover{transform:translateY(-3px);opacity:1}
.door.play:hover{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand),0 10px 26px -10px var(--brand)}
.door.read:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 10px 26px -10px var(--accent)}
.door .dico{font-size:40px;line-height:1}
.door .dtitle{font-size:24px;font-weight:900;font-family:var(--title-font)}
.door .dsub{font-size:14px;color:var(--dim2)}
.door .dmeta{font-size:12.5px;color:var(--note-ink);margin-top:2px;font-weight:700}
.door.play{background:var(--lcard-open-bg);border-color:var(--brand);color:var(--ink)}
.door.play .dtitle{color:var(--brand)}
.door.read{background:var(--ready-bg);border-color:var(--accent);color:var(--ink)}
.door.read .dtitle{color:var(--accent)}
/* 兩道門各自的補充連結。原本兩條用「·」擠在同一行置中，PC 上看不出哪一條
   對應哪一道門；改成各自放進門的格子裡，跟著門一起排版與換行。*/
.doorcell{display:flex;flex-direction:column}
.doorcell .door{flex:1}
.doornote{text-align:center;margin:9px 0 0;font-size:13.5px}
.doornote a{color:var(--dim2);text-decoration:underline;text-underline-offset:3px}
.doornote a:hover{color:var(--brand)}
/* 兩道門與「依年級選課」之間的分隔。年級卡從「點了才展開」改成常駐顯示之後，
   兩個區塊黏在一起、看不出是不同層級的內容。*/
.hr-dash{border:0;border-top:1.5px dashed var(--gcard-soon-line);margin:30px 0 0}
.grades-head{font-size:15px;font-weight:800;color:var(--dim);margin:32px 0 0;font-family:var(--title-font);scroll-margin-top:70px}
.ggrid.pulse{animation:gpulse 1s ease}
@keyframes gpulse{0%,100%{transform:none}28%{transform:scale(1.02)}}
/* 2026-07-29：不再預設隱藏。原本「卡片仍在 DOM，SEO 內鏈不受影響」的假設只對了一半——
   連結確實爬得到，但 display:none 的內容 Google 會打折，而年級 hub 是通往 315 個成語頁的
   主要路徑。實測 sitemap 346 條只有首頁 1 條進索引，不該再讓主要內鏈藏著。 */
#academy{margin-top:8px}

/* ===== 年級卡片 ===== */
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:28px}
.gcard{display:block;text-align:left;border-radius:20px;padding:22px;color:var(--ink);text-decoration:none}
.gcard.open{background:var(--ready-bg);border:1px solid var(--ready-line);
  transition:transform .12s ease,border-color .15s}
.gcard.open:hover{transform:translateY(-2px);border-color:var(--tab-on-line);opacity:1}
.gcard.soon{background:var(--gcard-soon-bg);border:1px solid var(--gcard-soon-line);cursor:default}
.gcard.soon .gname{color:var(--faint)}
.gtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gname{font-size:24px;font-weight:900;font-family:var(--title-font)}
.gbadge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;
  background:var(--badge-soon-bg);color:var(--badge-soon-ink);white-space:nowrap}
.gbadge.on{background:var(--badge-on-bg);color:var(--badge-on-ink)}
.gnote{font-size:14px;color:var(--note-ink);margin:8px 0 0}

.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 floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
:root[data-theme="paper"] .hero-stamp{animation-name:floatyR}
@keyframes floatyR{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}