/* 陰書官網 v1（牌局外 Claude，2026-10-22）
   色票照 I32（CHANGE_REQUEST_I32_PORTING_v1 §1）：淺色預設，深色跟系統或右上切換。 */
:root{
  --paper:#F4ECDF; --paperhi:#FBF7EF; --card:#FBF6EC;
  --ink:#3A2E26; --ink2:#6B5A4C; --line:#C9B8A3; --line2:#917B63;
  --bamboo:#3F6646; --onbamboo:#FBF7EF; --bamboohi:#5F8A62; --tea:#7A5C43;
  --verm:#B4302A; --err:#A8352A; --ok:#3F6646;
  --scrim:rgba(17,11,7,.55); --shadow:rgba(58,46,38,.18);
  --paperTex:.10;
  --maxw:1080px;
  --font-title:"LXGW WenKai TC","WenKaiLocal","Noto Serif TC","Songti TC","PMingLiU",serif;
  --font-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1C1814; --paperhi:#2A231C; --card:#2E271F;
    --ink:#ECE3D3; --ink2:#B9AB97; --line:#4A3F33; --line2:#7D6C5A;
    --bamboo:#7FAE80; --onbamboo:#2E271F; --bamboohi:#A3CFA0; --tea:#C9A884;
    --verm:#D9574D; --err:#E2786C; --ok:#7FAE80;
    --scrim:rgba(0,0,0,.62); --shadow:rgba(0,0,0,.45); --paperTex:.06;
  }
}
:root[data-theme="dark"]{
  --paper:#1C1814; --paperhi:#2A231C; --card:#2E271F;
  --ink:#ECE3D3; --ink2:#B9AB97; --line:#4A3F33; --line2:#7D6C5A;
  --bamboo:#7FAE80; --onbamboo:#2E271F; --bamboohi:#A3CFA0; --tea:#C9A884;
  --verm:#D9574D; --err:#E2786C; --ok:#7FAE80;
  --scrim:rgba(0,0,0,.62); --shadow:rgba(0,0,0,.45); --paperTex:.06;
}
/* 預演用：專案裡的霞鶩文楷 TC。上線時換成子集化的 woff2（OFL 1.1，見 README）。 */
@font-face{font-family:"WenKaiLocal";src:url("assets/fonts/wenkai-tc-subset.woff2") format("woff2");font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--font-body);position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:url("assets/paper.jpg");background-size:512px;mix-blend-mode:multiply;opacity:var(--paperTex);pointer-events:none;z-index:0}
:root[data-theme="dark"] body::before{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen}}
main,header,footer{position:relative;z-index:1}
a{color:var(--bamboo);text-underline-offset:3px}
a:hover{color:var(--bamboohi)}
:focus-visible{outline:2px solid var(--bamboohi);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--font-title);font-weight:500;letter-spacing:.06em;line-height:1.35}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- 頂列 ---------- */
.bar{position:sticky;top:0;z-index:10;background:linear-gradient(var(--paperhi),var(--paper));border-bottom:1px solid var(--line);box-shadow:0 4px 14px -10px var(--shadow)}
.bar .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:34px;width:auto}
:root[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}}
.brand span{font:500 13px var(--font-body);color:var(--ink2);letter-spacing:.08em}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:4px;font-size:15px}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--bamboo);font-weight:600}
.nav a:hover{background:var(--card)}
.tools{display:flex;gap:6px;align-items:center}
.iconbtn{appearance:none;border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:4px;height:36px;min-width:36px;padding:0 10px;font:14px var(--font-body);cursor:pointer}
select.iconbtn{padding-right:6px}
.menubtn{display:none}
@media (max-width:760px){
  .nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paperhi);border-bottom:1px solid var(--line);padding:8px 16px 14px}
  .nav.open{display:flex}
  .nav a{padding:12px 8px;font-size:16px}
  .menubtn{display:inline-block;margin-left:auto}
  .brand span{display:none}
  select.iconbtn{width:96px}
}

/* ---------- 按鍵 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:3.5px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:500 16px var(--font-title);letter-spacing:.08em;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 var(--shadow)}
.btn:hover{filter:brightness(.97);color:var(--ink)}
.btn.pri{background:var(--bamboo);border-color:var(--bamboo);color:var(--onbamboo)}
.btn.pri:hover{color:var(--onbamboo)}
.btn[disabled],.btn.disabled{background:transparent;border:1.5px dashed var(--line2);color:var(--ink2);box-shadow:none;cursor:not-allowed}
.btn.steam{background:#171a21;border-color:#171a21;color:#fff}
.btn.discord{background:#5865F2;border-color:#5865F2;color:#fff;font-family:var(--font-body)}
.btn.block{width:100%}

/* ---------- 卡片、段落 ---------- */
.box{background:var(--paperhi);border:1px solid var(--line);border-radius:4px;padding:22px 24px}
:root[data-theme="dark"] .box{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .box{background:var(--card)}}
.lbl{font-size:13px;color:var(--ink2)}
.tag{display:inline-block;border:1px solid var(--line);color:var(--tea);font-size:12px;padding:1px 8px;border-radius:3px;letter-spacing:.06em}
.todo{background:rgba(180,48,42,.10);outline:1px dashed var(--verm);border-radius:2px;padding:0 3px}
[hidden]{display:none!important}
.todo-note{display:none}  /* 給團隊的說明框：上線版一律不顯示（隱私權頁由產生器輸出，不改 html） */
code{overflow-wrap:anywhere}
.todo-note{overflow-wrap:anywhere;border:1px dashed var(--verm);color:var(--verm);background:rgba(180,48,42,.06);border-radius:4px;padding:10px 14px;font-size:14px;margin:16px 0}

/* ---------- 頁尾 ---------- */
footer{margin-top:64px;border-top:1px solid var(--line);background:var(--paperhi);color:var(--ink2);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding-top:22px;padding-bottom:28px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--ink2)}
footer .copy{margin-left:auto}
@media (max-width:760px){footer .copy{margin-left:0;width:100%}}

/* ---------- 文件頁（隱私權、刪除帳號） ---------- */
.doc{max-width:780px;margin:0 auto;padding:36px 20px 0}
.doc h1{font-size:34px;margin:0 0 6px}
.doc .updated{color:var(--ink2);font-size:14px;margin-bottom:28px}
.doc h2{font-size:23px;margin:44px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.doc h3{font-size:18px;margin:28px 0 8px}
.doc p,.doc li{font-size:16px}
.doc ul,.doc ol{padding-left:1.4em}
.doc li{margin:4px 0}
.doc table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:15px;background:var(--paperhi)}
:root[data-theme="dark"] .doc table{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .doc table{background:var(--card)}}
.doc th,.doc td{border:1px solid var(--line);padding:9px 12px;vertical-align:top;text-align:left}
.doc th{background:var(--paper);font-weight:600;white-space:nowrap}
.doc code{font:14px Consolas,monospace;background:var(--paper);border:1px solid var(--line);padding:0 4px;border-radius:3px;word-break:break-all}
.toc{border:1px solid var(--line);border-radius:4px;padding:14px 18px;background:var(--paperhi);margin:0 0 8px}
.toc b{font-family:var(--font-title);font-weight:500}
.toc ol{margin:6px 0 0;columns:2;column-gap:28px;list-style:none;padding-left:0}  /* 標題本身已有編號 */
.toc li{break-inside:avoid;font-size:15px}
@media (max-width:640px){
  .doc h1{font-size:28px}
  .toc ol{columns:1}
  .doc table,.doc thead,.doc tbody,.doc tr,.doc th,.doc td{display:block;width:100%}
  .doc thead{display:none}
  .doc tr{border:1px solid var(--line);border-radius:4px;margin:0 0 10px;background:var(--paperhi)}
  .doc td{border:0;border-top:1px solid var(--line);padding:8px 12px}
  .doc td:first-child{border-top:0;font-weight:600}
  .doc td[data-h]::before{content:attr(data-h);display:block;font-size:12px;color:var(--ink2);font-weight:400}
  .doc td:first-child::before{display:none}
}