/* Dart_huhu 官網 —— 公告頁與排行頁共用的內容區樣式（0819）
 *
 * 來源：docs/CloudFlare/prototype/wall-mock.html 的第二塊 <style>（約 389~767 行，
 * 「內容區」那塊）與排行「書」版那塊 <style>（約 918~1132 行），⛔不是整檔複製 ——
 * 那份原型還有招牌／造字台／語言切換／靶板／「玩法」一節，這兩頁都不要。
 * 只挑：公告木板（.board/.boardin/.noticetbl/...）與排行書（.bookwrap/.bpage/
 * .ranktbl/...）真正會畫到的規則。
 *
 * ⛔ 不動 site.css／site.js／data.js。
 *
 * 版面／材質的「表面」是 assets/site.js 的 DartSite.drawBoards() 逐格畫的 ——
 * 這支 CSS 只負責版面骨架、canvas 疊放順序、DOM 文字設成透明（畫面上看到的字
 * 是 drawBoards() 畫的像素字，DOM 那份只供搜尋／選取／朗讀）。少一條規則，
 * drawBoards() 裡的 sizeOf()/plateSize() 會從 clientWidth 反推出錯的格數，
 * 而且不會報錯（同 site.js 開頭註解引的 SPEC §2-11）。
 *
 * ═══ 跟原型不一樣的地方（判斷過的取捨，不是漏搬）═══
 *
 * 1. 靶板／招牌那塊「.board 上方要留給靶板的空間」的 margin-top 算式
 *    （原本用 calc(var(--tgsz)/2 + 8px)）整條拿掉 —— 這兩頁都沒有靶板
 *    （drawHero() 根本沒被搬進 site.js，見那支檔頭的「⛔沒搬」清單），
 *    留著那個算式只會在沒有人設定 --tgw 時退回一個沒有意義的 468px 空白。
 *    `.board` 改成普通的 margin。
 *
 * 2. 排行「書」原本是兩頁（左頁名次表、右頁「點一列攤開那個人」的角色便條紙
 *    ＋裝備佔位＋政策待定說明）。右頁那一整套（.charrow/.charnote/.portraitpic/
 *    .portraitlv/.equiptoggle/.equipnote/.equipgrid/.equipslot/.kv/.blocked/
 *    .papersheet）在這裡**沒有實作**：工單只要求「三個榜、書籤切換、榜單本身」，
 *    沒有要求角色詳情；而且沒有對應資料源（DartData.board() 只回傳
 *    {rank,nick,score}，沒有裝備／頭像／樓層），做出來也只能是假資料或空殼，
 *    兩者都不對。⇒ 書只留一頁（.bpage，不分 bleft/bright），放名次表。
 *    這是判斷後的取捨，不是漏做——site.js 的 PXTARGETS 表本身也還留著
 *    `.bpage h3`／`.bpage .sub`／`.ranktbl ...` 這些選擇器，一頁版一樣用得到。
 *
 * 3. `.bookwrap` 的 aspect-ratio 從原本的 475/349（照怪物圖鑑的跨頁比例）
 *    改成 4/5（直向）。原因：跨頁比例是**兩頁並排**才需要的寬高比，
 *    drawBoards() 的書封渲染會依這個比例算 twoPage（bw > bh*1.15 就畫書脊分兩頁）
 *    ——只有一頁內容的話，維持跨頁比例會在畫面中央畫出一條沒有內容呼應的書脊。
 *    4/5 讓 twoPage 判定為假，書封畫成一頁的樣子。⚠️ 這是視覺判斷，
 *    ⛔沒有實機比對兩種比例的畫面差異，見回報「沒查的」。
 *
 * 4. 原型的 @font-face（Cubic 11／Ark Pixel 12）**沒有搬進來**：
 *    那兩支字型檔只在 docs/CloudFlare/prototype/fonts/ 底下，還沒進
 *    backend/stats-worker/public/。工單明講這一輪只能新增三個檔
 *    （index.html／rank.html／assets/page.css），字型檔不算在內，
 *    所以這裡先不建 @font-face。缺這個的後果：site.js 的 PX_FONT
 *    寫死 '"Cubic 11","Ark Pixel 12",sans-serif'，字型表兩支都載入不到時
 *    canvas 會退到瀏覽器預設 sans-serif 畫像素字——閾值化與格化仍然會跑，
 *    畫面不會壞，但字形不是原型設計的那個像素字體。這件事需要協調者另外決定
 *    要不要把字型檔（連同 OFL-Cubic-11.txt／OFL-ArkPixel.txt 授權檔一起）
 *    搬進 assets/fonts/。
 *
 * 5. body 只接掉 color／font-family／line-height，⛔不動 background——
 *    site.css 已經把 body 的背景色（--wall-flat）跟 #bg 的木牆圖綁在一起，
 *    這裡再宣告一次 background 會跟它同優先度、後載入的贏，有蓋掉的風險。
 */

/* ── 設計token：沿用原型 :root 那組配色，兩個主題 ──────────────── */
:root {
  --ground:   #f4ecdc;
  --ground-2: #e9dcc4;
  --ink:      #372718;
  --ink-2:    #6a5540;
  --ink-3:    #97826a;
  --rule:     #ddcdb0;
  --panel:    #fffbf2;
  --accent:   #a2632a;
  --sheet:      #f2e5c9;
  --sheet-line: #cbb187;
  --sheet-edge: #8a6a3d;
  --sheet-ink:  #33240f;
  --sheet-ink2: #6b5330;
  --plate:      #403833;
  --plate-ink:  #efe4c9;
  --st-live:    #2f6b28;
  --st-soon:    #8a5a12;
  --st-done:    #6b5330;
  --kind-event:  #8e2f1c;
  --kind-update: #24425f;
  --kind-notice: #5a4a1a;
  --font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --mono: ui-monospace, Consolas, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #1c1611;
    --ground-2: #271f17;
    --ink:      #efe1cc;
    --ink-2:    #c2aa8e;
    --ink-3:    #8e7862;
    --rule:     #3b2e22;
    --panel:    #261e16;
    --accent:   #d59a56;
    --sheet:      #241b12;
    --sheet-line: #4b3a26;
    --sheet-edge: #6b5335;
    --sheet-ink:  #f2e2c4;
    --sheet-ink2: #c1a781;
    --plate:      #2f2a25;
    --plate-ink:  #efe4c9;
    --st-live:    #8fc97f;
    --st-soon:    #e0b264;
    --st-done:    #c1a781;
    --kind-event:  #f0937c;
    --kind-update: #9dc4ea;
    --kind-notice: #dcc07a;
  }
}
:root[data-theme="dark"] {
  --ground:#1c1611; --ground-2:#271f17; --ink:#efe1cc; --ink-2:#c2aa8e; --ink-3:#8e7862;
  --rule:#3b2e22; --panel:#261e16; --accent:#d59a56;
  --sheet:#241b12; --sheet-line:#4b3a26; --sheet-edge:#6b5335;
  --sheet-ink:#f2e2c4; --sheet-ink2:#c1a781;
  --plate:#2f2a25; --plate-ink:#efe4c9;
  --st-live:#8fc97f; --st-soon:#e0b264; --st-done:#c1a781;
  --kind-event:#f0937c; --kind-update:#9dc4ea; --kind-notice:#dcc07a;
}

/* ── 像素內文的兩個結構 class（site.js 的 pxify 會動態插入 canvas.pxcv／
   span.pxsrc，這兩條規則是它們唯一依賴的 CSS）───────────────────── */
.pxcv { position:absolute; image-rendering:pixelated; z-index:0; pointer-events:none; }
.pxsrc { position:absolute; overflow:hidden; color:transparent; z-index:1; letter-spacing:0; }
.pxsrc::selection { background:#f3cb92; }

* { box-sizing: border-box; }
body { color: var(--ink); font-family: var(--font); line-height:1.7; }

/* 🔴 0819 實機：上內距原本是 0，皮革名牌會貼著視窗頂邊被切到。
   ⚠️ 遊戲內 WebView 沒有網址列也沒有分頁列，頂邊比桌機瀏覽器更貼 ⇒ 這個內距在那裡更需要。 */
.site { max-width: 980px; margin: 0 auto; padding: 40px 24px 90px; }
.site h2 { font-size: 20px; letter-spacing:.06em; margin: 0 0 14px; }

/* ══ 公告：木板是外框，公告本體坐在一張不透明的紙上 ═══════════════ */
.board { position:relative; margin: 24px 0 64px; }
.boardbg { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.boardin { position:relative; padding: 24px 28px 28px; }

.boardhead { display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin:0 0 14px; }
.boardin .boardtitle, .site h2.secttl {
  position:relative; margin:0; padding:0; border:0;
  background:var(--plate); color:transparent;
  font-family:var(--font); font-size:20px; font-weight:700;
  letter-spacing:0; text-transform:none; text-shadow:none;
  overflow:hidden;
}
.site h2.secttl { display:inline-block; margin:0 0 14px var(--bkpad, 60px); }
.nfilter { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.nfilter button {
  position:relative; font:inherit; font-size:13px; font-weight:700; letter-spacing:0;
  padding:0; border:0; border-radius:0; cursor:pointer; overflow:hidden;
  background:var(--plate); color:transparent; text-shadow:none;
}
.boardin .boardtitle canvas, .nfilter button canvas, .secttl canvas {
  position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated;
}
.boardin .boardtitle span, .nfilter button span, .npager button span, .secttl span {
  position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;
}
.nfilter button[aria-pressed="true"] { color:transparent; }
.nfilter button[disabled] { color:transparent; text-shadow:none; cursor:default; }
.nfilter button:focus-visible { outline:3px solid #f3cb92; outline-offset:3px; }

/* 語言切換（0819 補回）。⚠️ 原型把它絕對定位在招牌右側，而兩頁沒有招牌
   ⇒ 改成獨立一排靠右，⛔不要照抄原型那組 position:absolute 的座標。 */
.langsw { display:flex; gap:6px; justify-content:flex-end; margin:0 0 14px; }
.langsw button {
  position:relative; font:inherit; font-size:13px; font-weight:700; letter-spacing:0;
  padding:0; border:0; border-radius:0; cursor:pointer; overflow:hidden;
  background:var(--plate); color:transparent; text-shadow:none;
}
.langsw button canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.langsw button span { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.langsw button:focus-visible { outline:3px solid #f3cb92; outline-offset:3px; }

.boardin .tablewrap {
  position:relative; background:var(--sheet); border:0;
  box-shadow: 4px 4px 0 rgba(0,0,0,.30);
}
.boardin .tablewrap .sheetbg {
  position:absolute; inset:0; width:100%; height:100%;
  image-rendering:pixelated; z-index:0;
}
.boardin .tablewrap table, .boardin .tablewrap .foot { position:relative; z-index:1; }
.boardin table { margin:0; }
.boardin .tablewrap .foot {
  margin:0; padding:12px 16px; line-height:1.6;
  color:transparent; background:transparent;
  border-top:4px solid var(--sheet-line);
}

.npager {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:16px 16px 4px;
}
.npager:empty { display:none; }
.npager button {
  position:relative; font:inherit; font-size:14px; font-weight:700; letter-spacing:0;
  padding:0; border:0; border-radius:0; cursor:pointer; overflow:hidden;
  background:var(--plate); color:transparent; text-shadow:none;
}
.npager button canvas {
  position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated;
}
.npager button[aria-current="page"] { color:transparent; }
.npager button[disabled] { color:transparent; text-shadow:none; cursor:default; }
.npager button:focus-visible { outline:3px solid #f3cb92; outline-offset:3px; }

/* ── 公告表 ── */
.noticetbl { width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; }
/* 🔴 136 只是 JS 接手前的初始值。真正的寬度由 index.html 的 fitKindColumn()
   照實際量到的分類小片設定 —— 分類標籤的字數逐語言不同（中文 2 字、
   日文「アップデート」6 字），寫死任何一個數字都會在某個語言爆掉。 */
.noticetbl col.c-kind { width:136px; }
.noticetbl col.c-time { width:200px; }
.noticetbl td {
  text-align:left; padding:16px; vertical-align:top;
  border-bottom:4px solid var(--sheet-line);
}
.noticetbl tbody tr:last-child td { border-bottom:0; }
.noticetbl tr.pinnedrow { background:transparent; }
.noticetbl tr.pinnedrow td:first-child { box-shadow: inset 4px 0 0 var(--kind-event); }

.noticetbl .ttl { position:relative; margin:0 0 4px; }
.noticetbl .ttl canvas { position:absolute; left:0; top:0; image-rendering:pixelated; }
.noticetbl .ntitle {
  position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;
  font-size:33px; font-weight:400; color:transparent;
  letter-spacing:0; line-height:36px;
}
.noticetbl .ntitle::selection { background:#f3cb92; }
.noticetbl td:first-child .chip { display:block; margin:0 0 8px; }
.noticetbl td:first-child .chip:last-child { margin-bottom:0; }
.noticetbl .nbody { margin:12px 0 0; color:transparent; }
.noticetbl .ntime {
  font-family:var(--mono); color:transparent;
  font-variant-numeric:tabular-nums;
}
.noticetbl .ntime span { display:block; white-space:nowrap; }
.noticetbl .ntime .t2 { color:transparent; }
.noticetbl .ntime .nstate { display:inline-block; }
.noticetbl .nempty td {
  padding:32px 16px; text-align:center; color:transparent; letter-spacing:0;
}
.nstate {
  margin:0 0 8px;
  font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.08em;
  white-space:nowrap;
}
.nstate.s-live { color:var(--st-live); }
.nstate.s-soon { color:var(--st-soon); }
.nstate.s-done { color:var(--st-done); }

/* ── 像素標記（分類／置頂／檔期狀態）：canvas 畫框、字留 DOM ── */
.chip { position:relative; display:inline-block; vertical-align:middle; }
.chip canvas {
  position:absolute; left:0; top:0;
  image-rendering:pixelated; z-index:0;
}
.chip > span {
  position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;
  color:transparent; font-size:12px; line-height:1.2; z-index:1;
}
.chip > span::selection { background:#f3cb92; }

.kind {
  font-size:16px; font-weight:700; letter-spacing:.16em;
  color:var(--kind-notice);
}
.kind.k-event  { color:var(--kind-event); }
.kind.k-update { color:var(--kind-update); }
.kind.k-notice { color:var(--kind-notice); }

@media (max-width: 640px) {
  .noticetbl, .noticetbl tbody, .noticetbl tr, .noticetbl td { display:block; width:auto; }
  .noticetbl tr { border-bottom:4px solid var(--sheet-line); }
  .noticetbl tbody tr:last-child { border-bottom:0; }
  .noticetbl td { border-bottom:0; padding:12px 16px 0; }
  .noticetbl td.ntime { padding:8px 16px 16px; }
  .noticetbl .ntime span { display:inline; }
  .noticetbl .ntime .nstate { margin-right:8px; }
  .noticetbl .ntime .t2 { margin-left:4px; }
  .noticetbl tr.pinnedrow td:first-child { box-shadow:none; }
  .noticetbl tr.pinnedrow { box-shadow: inset 4px 0 0 var(--kind-event); }
  .boardin { padding:20px 16px 20px; }
  .nfilter { margin-left:0; }
}

/* ══ 排行「書」：書籤 ＋ 一頁名次表 ═══════════════════════════════
   （原型是兩頁書，右頁「點一列攤開角色」那套沒有搬進來，見檔頭「跟原型
   不一樣的地方」第 2 條）*/
.bmarks {
  display:flex; gap:6px; flex-wrap:wrap; position:relative; z-index:2;
  margin: 0 0 calc(-1 * (var(--bkpad, 60px) + 24px)) calc(var(--bkpad, 60px) + 16px);
}
.bmarks button {
  position:relative; font:inherit; font-size:13px; font-weight:700; letter-spacing:0;
  padding:0; border:0; background:var(--plate); cursor:pointer; overflow:hidden;
  color:transparent; text-shadow:none;
}
.bmarks canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.bmarks span { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.bmarks button[aria-selected="true"] { color:transparent; }
.bmarks button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* 🔴 0819 實機調整（螢幕上看過才改的，⛔不是讀碼推的）：
   書收窄到 700 並置中。原本吃滿 980 寬 ⇒ 依 aspect-ratio 算出來的書身
   超過一個視窗高，十列名次只填到上面四成，底下一大片空紙。 */
.bookboard { margin: 0 auto 64px; max-width: 700px; }
/* 直向、單頁（見檔頭第 3 條的理由，⛔跟原型的 475/349 跨頁比例不同） */
/* 🔴 這個比例的下限是 drawBoards() 的 twoPage 判定：bw > bh*1.15 就會畫書脊。
   ⇒ 要維持單頁必須 bh >= bw/1.15 ≈ 0.87bw。取 0.95 留一點邊際，
   ⛔不要為了再壓矮而貼著 0.87 —— 貼著寫的話換一個斷點就會突然長出書脊。 */
.bookwrap { position:relative; aspect-ratio: 1 / 0.95; }
.bookbg { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.bookin {
  position:relative; min-height:100%; display:grid;
  grid-template-columns: minmax(0,1fr);
}
.bpage { min-width:0; color:#3f2c18; }
.bpage h3 {
  margin:0 0 8px; letter-spacing:0; color:transparent;
  border-bottom:1px solid rgba(90,64,35,.35); padding-bottom:4px;
}
.bpage .sub { margin:0 0 12px; color:transparent; }
.ranktbl { width:100%; min-width:0; border-collapse:collapse; margin:0; table-layout:fixed; }
.ranktbl th, .ranktbl td {
  padding:9px 4px; border:0; color:transparent; letter-spacing:0;
  border-bottom:1px solid rgba(90,64,35,.18);
}
.ranktbl th { text-transform:none; }
.ranktbl .n { width:40px; }
.ranktbl .k { text-align:right; width:100px; }