:root{
  --bg:#1b201d; --ink:#e8e4d9; --dim:#96a49c; --line:#3a4440;
  --panel:#232a26; --paper:#cbbd9b; --paper-ink:#2a2620; --paper-dim:#6b6252;
  --paper-bar:#b0a488; --stamp:#b8412f; --soon:#2c332f; --soon-ink:#79857e;
  --serif:Georgia,"Noto Serif CJK TC","Songti TC",serif;
  --sans:"Helvetica Neue","PingFang TC","Noto Sans CJK TC",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif)}
.wrap{max-width:1160px;margin:0 auto;padding:44px 48px;min-height:100vh;display:flex;flex-direction:column;gap:28px}

.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}
.brand{margin:0;font-size:36px;font-weight:400;letter-spacing:.16em}
.sub{margin:7px 0 0;font:13px/1.5 var(--sans);color:var(--dim);letter-spacing:.08em}
.acct{position:relative;display:flex;align-items:center;gap:22px;font:13px/1 var(--sans)}
.acct .stat{display:flex;align-items:center;gap:7px;color:#c7cec8;white-space:nowrap}
.btn{border:1px solid #5c6b64;background:none;color:#cfd6d0;padding:9px 18px;font:13px var(--sans);cursor:pointer}
.btn:hover{border-color:#7e8b84}
.btn.solid{background:var(--stamp);border-color:var(--stamp);color:#fbf7ee}

.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;flex-grow:1;align-content:start}
.loading{grid-column:1/-1;color:var(--dim);font:13px var(--sans)}

.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tab{width:168px;height:24px;background:var(--paper);border-radius:4px 16px 0 0}
.body{background:var(--paper);color:var(--paper-ink);padding:26px 28px 24px;display:flex;flex-direction:column;gap:13px;flex-grow:1}
.exam{font:11px var(--sans);letter-spacing:.2em;color:var(--paper-dim)}
.prog{font-size:12px}
.due{background:var(--stamp);color:#fbf7ee;font:11px var(--sans);letter-spacing:.1em;padding:5px 10px;white-space:nowrap}
.title{font-size:28px}
.tag{font:13px/1.8 var(--sans);color:#5a5346}
.meter{height:6px;background:var(--paper-bar)}
.meter i{display:block;height:6px;background:var(--accent,var(--stamp))}
.card[data-slug]{cursor:pointer}
.golane{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.go{background:var(--accent,var(--stamp));color:#fbf7ee;padding:12px 30px;font-size:15px;letter-spacing:.16em;
    text-decoration:none;margin-left:auto}
/* 風格 chip。選中態用 accent 底配深字——白字壓 accent 過不了 4.5（§九的硬規則） */
.skins{display:flex;gap:7px}
.skins .chip{font:12px var(--sans);letter-spacing:.08em;padding:7px 13px;cursor:pointer;
    border:1px solid #6d6145;background:none;color:#4f4839}
.skins .chip:hover{border-color:var(--paper-ink)}
.skins .chip.on{background:var(--paper-ink);border-color:var(--paper-ink);color:#fbf7ee;font-weight:600}
.skins .chip:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

/* ---- 卡片即時預覽：點 chip 的當下那張卡就換樣（設計稿 §3.3）----
   使用者原話：「偵探、可愛 切換後沒有變化」。機制本來就是通的（選了、按繼續就切），
   但點下去只有一顆小按鈕變深，看不出選中了什麼——所以卡片自己要說。
   只動這一張卡：首頁其他地方不套主題，那條定案沒變。
   飽和色塊一律配深字（§九規則），白字壓 #ff8fab 只有 2.15。 */
.card{transition:background-color .15s,color .15s}
.card .tab,.card .body,.card .go,.card .due,.card .meter,.card .meter i,.card .title{transition:inherit}
.card[data-skin="cute-a"]{
  --paper:#fff6ec; --paper-ink:#3b3340; --paper-dim:#6f6577; --paper-bar:#f3dcc8;
}
/* 卡片的 --accent 是 games.json 的顏色，用 inline style 設的，這裡的規則贏不過它——
   所以用到它的地方（.go、.meter i）在下面各自指名顏色，不要想靠覆蓋 token 解決。 */
.card[data-skin="cute-a"] .tab{border-radius:14px 14px 0 0;background:#ff8fab}
.card[data-skin="cute-a"] .body{border-radius:0 18px 18px 18px}
.card[data-skin="cute-a"] .title{font-family:var(--sans);font-weight:700;letter-spacing:.02em}
.card[data-skin="cute-a"] .tag{color:#6f6577}
.card[data-skin="cute-a"] .due{background:#ffd7e2;color:#7a2f45;border-radius:12px;font-weight:700}
.card[data-skin="cute-a"] .meter{border-radius:6px;overflow:hidden}
.card[data-skin="cute-a"] .meter i{background:#c0355f}
.card[data-skin="cute-a"] .go{border-radius:16px;background:#ff8fab;color:#3b3340;font-weight:700;letter-spacing:.1em}
.card[data-skin="cute-a"] .skins .chip{border-color:#96697d;color:#5a4a52;border-radius:12px}
.card[data-skin="cute-a"] .skins .chip.on{background:#c0355f;border-color:#c0355f;color:#fbf7ee}
@media (prefers-reduced-motion:reduce){.card,.card *{transition:none}}

.card.soon .tab,.card.soon .body{background:var(--soon);color:var(--soon-ink)}
.card.soon .body{padding:26px 28px;border:1px dashed #414b45;border-top:none}
.card.soon .title{color:#5d6862}
.card.soon .exam,.card.soon .tag{color:var(--soon-ink)}

.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font:13px var(--sans);color:var(--dim)}
.foot .k{letter-spacing:.24em;font-size:11px}
/* 講義連結是 JS 塞進 #notes 的；display:contents 讓那幾個 <a> 仍然是 .foot 的
   flex 子項，才吃得到 gap——包一層 span 會讓它們擠成一團。 */
#notes{display:contents}
.foot a{color:#d9a441;text-decoration:none}
.foot a:hover{color:#f0c163}
.foot .note{margin-left:auto;font-size:11px}

@media (max-width:760px){
  .wrap{padding:26px 20px;gap:18px}
  .brand{font-size:24px;letter-spacing:.14em}
  .sub{font-size:11px;letter-spacing:normal}
  /* 窄版讓帳號列自成完整一列：原本 column 會把每個 .stat 各推一列（未登入 3 列、
     登入後 5 列），而且純文字的右緣切齊容器邊、按鈕的字卻被 18px 內距往內推，
     看起來沒對齊。改成整列靠右的一排，兩態都只佔一列，右緣也一致。 */
  .head{flex-wrap:wrap;align-items:center;padding-bottom:14px}
  .acct{width:100%;justify-content:flex-end;gap:14px}
  .shelf{grid-template-columns:1fr;gap:16px}
  .tab{width:120px;height:20px}
  .body{padding:20px}
  .exam{font-size:10px;letter-spacing:.18em}
  .due{font-size:10px;letter-spacing:.08em;padding:4px 8px}
  .tag{font-size:12px;line-height:1.75}
  .prog{font-size:11px}
  .title{font-size:23px}
  /* 手機放不下就讓 chip 佔滿一列、按鈕另起一列 */
  .golane{flex-direction:column;align-items:stretch;gap:10px}
  .skins{justify-content:center}
  .skins .chip{flex:1}
  .go{align-self:stretch;text-align:center;padding:13px 0;font-size:14px;margin-left:0}
  .foot{flex-direction:column;align-items:flex-start;gap:9px}
  .foot .note{margin-left:0}
}

.ring{display:flex;align-items:center;gap:8px}
.gear{background:none;border:0;padding:4px;cursor:pointer;line-height:0;color:var(--dim)}
.gear:hover{color:var(--ink)}
.sep{width:1px;height:22px;background:var(--line)}

.pop{position:absolute;top:calc(100% + 10px);right:0;width:272px;background:var(--panel);border:1px solid #3f4a45;
     padding:18px 20px;display:flex;flex-direction:column;gap:14px;font:13px var(--sans);z-index:5}
.pop .k{font-size:10px;letter-spacing:.24em;color:#8f9b94}
.pop .row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#cfd6d0}
.pop .row b{color:var(--ink);font-weight:400}
.pop hr{border:0;border-top:1px solid var(--line);margin:0}
.pop .act{background:none;border:0;padding:0;text-align:left;color:#cfd6d0;font:13px var(--sans);cursor:pointer}
.pop .act:hover{color:var(--ink)}
.pop .act.danger{color:#8a5049}
.pop input,.pop select{background:#1b201d;border:1px solid var(--line);color:var(--ink);
     font:13px var(--sans);padding:7px 9px;min-width:0}
.pop .msg{font-size:12px;color:#8f9b94;min-height:1em}
/* Google 按鈕：照品牌規範走白底深字，不套站上的牛皮色 */
.pop .gbtn{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
     background:#fff;border:1px solid #dadce0;color:#1f1f1f;padding:9px 14px;
     font:500 13px var(--sans);cursor:pointer}
.pop .gbtn:hover{background:#f7f8f8;border-color:#c6c9cc}
.pop .gbtn svg{flex:none}
.pop .or{display:flex;align-items:center;gap:10px;font-size:11px;color:#8f9b94}
.pop .linkish{background:none;border:0;padding:0;text-align:left;font:12px var(--sans);
     color:#8f9b94;text-decoration:underline;cursor:pointer}
.pop .linkish:hover{color:var(--ink)}
.pop .or::before,.pop .or::after{content:"";flex:1;border-top:1px solid var(--line)}
@media (max-width:760px){.pop{top:auto;left:20px;right:20px;width:auto;position:fixed;bottom:20px}}