/* ══════════════════════════════════════════════════════════════════════════
   NW Basketball League — shared shell
   ─────────────────────────────────────────────────────────────────────────
   Press-box tearsheet: warm ink, hardwood gold, condensed broadcast type set
   against newsprint rules. Extends the language already used by the team
   stats room (team.html) so the league site and the data room read as one
   publication. Series hues are the two validated categorical slots
   (orange / blue) plus a green and an amber, stepped per colour mode.
   ══════════════════════════════════════════════════════════════════════════ */

/* The two token blocks below are also mirrored by hand inside tracker.html,
   where they back the 網站深色 / 網站淺色 skins. The scoring console cannot
   import this file — it would pull in the Archivo face, the body gradient and
   the grain overlay, all of which fight the Tailwind Play CDN it renders
   through, and it deliberately ships no modules so it still runs on iPadOS 15.
   Keep the two in step: change a value here and change it there. */

:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#100e0c; --ink-2:#15120e;
  --surface:#1a1611; --surface-2:#221c15; --surface-3:#2a231a;
  --hairline:rgba(240,228,206,.11); --hairline-2:rgba(240,228,206,.20);
  --text:#f5eee1; --text-2:#b6a894; --text-3:#7e7365;
  --gold:#e0b060; --gold-dim:rgba(224,176,96,.16); --on-gold:#1a1206;
  --s1:#d95926; --s2:#3987e5; --s3:#199e70; --s4:#c98500;
  --s1-wash:rgba(217,89,38,.18); --s2-wash:rgba(57,135,229,.18); --s4-wash:rgba(201,133,0,.14);
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --grain:.04;
}
:root[data-theme="light"]{
  color-scheme: light;
  --ink:#f4efe4; --ink-2:#efe8da;
  --surface:#fffdf7; --surface-2:#f8f2e6; --surface-3:#efe7d7;
  --hairline:rgba(26,22,17,.13); --hairline-2:rgba(26,22,17,.24);
  --text:#191510; --text-2:#5d5347; --text-3:#8a7f70;
  --gold:#9a6a12; --gold-dim:rgba(154,106,18,.13); --on-gold:#fffdf7;
  --s1:#c94f20; --s2:#2a78d6; --s3:#12855f; --s4:#a06a00;
  --s1-wash:rgba(235,104,52,.20); --s2-wash:rgba(42,120,214,.20); --s4-wash:rgba(160,106,0,.12);
  --shadow:0 20px 44px -26px rgba(60,44,20,.45);
  --grain:.028;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--text); min-height:100vh;
  font-family:'Archivo','Noto Sans TC',system-ui,sans-serif;
  font-size:15px; line-height:1.55;
  background-image:
    radial-gradient(120% 80% at 88% -10%, var(--gold-dim), transparent 60%),
    radial-gradient(90% 60% at 4% 4%, var(--s1-wash), transparent 55%);
  background-attachment:fixed;
}
body::after{
  content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:var(--on-gold)}

/* ── type ─────────────────────────────────────────────── */
.display{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;letter-spacing:.005em;line-height:.92;text-transform:uppercase}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;letter-spacing:-.01em}
.eyebrow{
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
}
.tnum{font-variant-numeric:tabular-nums}
a{color:var(--gold)}
h2.sec{
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1;letter-spacing:.01em;
}
.sechead{
  display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--hairline-2);padding-bottom:.6rem;margin-bottom:1.4rem;
}
.sechead .grow{flex:1}
.sechead p{color:var(--text-2);font-size:.88rem;margin-top:.3rem;max-width:52ch}

/* ── masthead + nav ───────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:70;
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
}
.topbar .bar{
  display:flex;align-items:center;gap:1rem;
  padding:.6rem clamp(1rem,4vw,3rem);max-width:1320px;margin:0 auto;
}
.wordmark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:inherit}
.wordmark .badge{
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;font-size:1.05rem;line-height:1;
  padding:.34rem .44rem .24rem;background:var(--text);color:var(--ink);letter-spacing:.02em;
}
.wordmark .label{
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
}
.topbar .spacer{flex:1}

.navlinks{display:flex;align-items:center;gap:.1rem;flex-wrap:wrap}
.navlinks a{
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);text-decoration:none;
  padding:.42rem .6rem;border-bottom:2px solid transparent;transition:.16s ease;white-space:nowrap;
}
.navlinks a:hover{color:var(--text);border-bottom-color:var(--hairline-2)}
.navlinks a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.navlinks a.staff{color:var(--text);border:1px solid var(--hairline-2);border-radius:999px;padding:.32rem .7rem;margin-left:.4rem}
.navlinks a.staff:hover{border-color:var(--gold);color:var(--gold)}

.navtoggle{display:none}
#navSheet{display:none}

/* ── 編輯模式 ──────────────────────────────────────────────────────────────
   Drawn into the page for a signed-in administrator and revealed by the 編輯
   button in the masthead, so turning it on and off costs no re-render and no
   request. Nothing here is ever emitted for a reader who cannot edit.
   ───────────────────────────────────────────────────────────────────────── */
#editToggle.on{color:var(--on-gold);background:var(--gold);border-color:var(--gold)}
.editchip{
  display:none;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.08em;padding:.1rem .34rem;border:1px solid var(--gold);color:var(--gold);
  border-radius:2px;cursor:pointer;white-space:nowrap;
}
.editchip:hover{background:var(--gold);color:var(--on-gold)}
html[data-edit="on"] .editchip{display:inline-block}
html[data-edit="on"] [data-edit-key]{
  outline:1px dashed var(--gold);outline-offset:3px;cursor:text;
}
html[data-edit="on"] [data-edit-key]:hover{background:var(--gold-dim)}
.edittray{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surface);border-top:1px solid var(--gold);
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.5);
}
.edittray .inner{
  max-width:60rem;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 1.2rem;
  display:grid;gap:.55rem;
}
.edittray label{font-size:.78rem;color:var(--text-2)}
.edittray label .mono{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--text-3)}
.edittray textarea{width:100%;min-height:5rem;font-size:.95rem}
.edittray .acts{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.edittray .acts .msg{font-size:.8rem;color:var(--text-2)}

/* ── 記錄編輯表 ───────────────────────────────────────────────────────────
   The console's row editor, raised over whichever public page asked for it, so
   a jersey number is fixed where it was noticed. Only ever built by
   assets/editor.js, which is only ever imported after a 編輯 chip is pressed.
   ───────────────────────────────────────────────────────────────────────── */
.recsheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:clamp(.5rem,3vw,2.5rem)}
.recsheet .scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.recsheet .card{
  position:relative;width:min(46rem,100%);max-height:100%;overflow:auto;
  background:var(--surface);border:1px solid var(--hairline-2);border-top:2px solid var(--gold);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.recsheet header{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,3vw,1.6rem);background:var(--surface-2);border-bottom:1px solid var(--hairline);
}
.recsheet header h2{margin:0;font-size:1.05rem;letter-spacing:.04em}
.recsheet .x{
  border:1px solid var(--hairline-2);background:transparent;color:var(--text-2);
  width:2rem;height:2rem;border-radius:2px;font-size:1.2rem;line-height:1;cursor:pointer;
}
.recsheet .x:hover{border-color:var(--gold);color:var(--gold)}
.recsheet .body{padding:clamp(1rem,3vw,1.6rem)}
.recsheet .field.wide,.recsheet .checkline.wide{grid-column:1/-1}
.recsheet .acts{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.recsheet .delzone{
  margin-top:1.1rem;padding:.9rem 1rem;border:1px solid var(--s1);background:var(--s1-wash);
}
.recsheet .delzone p{margin:0 0 .5rem;font-size:.88rem}
.recsheet .delzone .warn{color:var(--text);font-weight:600}
.recsheet .delzone .field span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:.3rem}
.checkline{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;margin-bottom:1rem}
.del-btn{
  border:1px solid var(--s1);background:transparent;color:var(--s1);border-radius:2px;
  padding:.7rem 1.2rem;font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-left:auto;
}
.del-btn:hover{background:var(--s1);color:#fff}
.del-btn:disabled{opacity:.5;cursor:progress}
.recsheet .delzone .del-btn{margin-left:0}
/* 一行編輯鍵: the chips a row or a heading carries, kept together and out of the
   way of the words they belong to. */
.editrow{display:none;gap:.4rem;flex-wrap:wrap;align-items:center}
html[data-edit="on"] .editrow{display:inline-flex}
.editchip.add{border-style:dashed}

.ghost-btn{
  border:1px solid var(--hairline-2);background:transparent;color:var(--text-2);
  border-radius:999px;padding:.34rem .72rem;font:inherit;font-size:.75rem;font-weight:600;
  cursor:pointer;transition:.18s ease;letter-spacing:.06em;white-space:nowrap;
}
.ghost-btn:hover{color:var(--text);border-color:var(--gold);transform:translateY(-1px)}
.ghost-btn:focus-visible,.solid-btn:focus-visible,.navlinks a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.solid-btn{
  background:var(--gold);color:var(--on-gold);border:none;border-radius:2px;
  padding:.72rem 1.3rem;font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.18s ease;
  white-space:nowrap;text-decoration:none;display:inline-block;
}
.solid-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
.solid-btn:active{transform:translateY(0)}
.solid-btn:disabled{opacity:.55;cursor:progress;transform:none}
.line-btn{
  border:1px solid var(--hairline-2);background:transparent;color:var(--text);border-radius:2px;
  padding:.7rem 1.2rem;font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;
  display:inline-block;transition:.18s ease;
}
.line-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

.notice{
  background:var(--gold);color:var(--on-gold);font-weight:600;font-size:.84rem;
  padding:.5rem clamp(1rem,4vw,3rem);text-align:center;letter-spacing:.02em;
}

/* ── layout ───────────────────────────────────────────── */
.shell{max-width:1320px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 5rem}
.stack > * + *{margin-top:clamp(2.6rem,6vw,4.4rem)}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .58rem;
  border:1px solid var(--hairline-2);border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  white-space:nowrap;
}
.chip.on{border-color:var(--gold);color:var(--gold)}
.chip svg{width:.8rem;height:.8rem;stroke:currentColor;fill:none;stroke-width:1.8}

.card{
  border:1px solid var(--hairline-2);background:var(--surface);border-radius:2px;
  padding:1.1rem 1.15rem;position:relative;
}
.card.accented::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--gold))}
.card.accented{padding-left:1.4rem}

.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}

/* ── stat tiles ───────────────────────────────────────── */
.tiles{display:grid;gap:0;border:1px solid var(--hairline-2);background:var(--surface);grid-template-columns:repeat(auto-fit,minmax(min(50%,9rem),1fr))}
.tile{padding:.9rem 1rem;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.tile .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.tile .v{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;font-size:1.95rem;line-height:1;margin-top:.35rem;font-variant-numeric:tabular-nums}
.tile .s{font-size:.72rem;color:var(--text-3);margin-top:.2rem}

/* ── tables ───────────────────────────────────────────── */
.tablewrap{border:1px solid var(--hairline-2);background:var(--surface);overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th,table.data td{padding:.5rem .6rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--hairline)}
table.data th{
  position:sticky;top:0;background:var(--surface-3);z-index:2;
  font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
}
table.data th:first-child,table.data td:first-child,
table.data th.l,table.data td.l{text-align:left}
table.data td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:var(--gold-dim)}
table.data tbody tr:last-child td{border-bottom:none}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--gold)}
table.data th.sorted{color:var(--gold)}
/* A name inside a table links to its own page without shouting in gold. */
table.data a.tlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline-2)}
table.data a.tlink:hover{color:var(--gold);border-bottom-color:var(--gold)}
table.data td.rank{font-family:'Saira Condensed',sans-serif;font-weight:800;color:var(--text-3);width:2.4rem}
table.data tr.top td.rank{color:var(--gold)}
/* A shared rank: the「＝」sits with the number rather than replacing it, so the
   position is still readable at a glance. */
table.data td.rank .eq{font-style:normal;color:var(--text-3);margin-right:.05em}
/* The rule under a standings table, in the same register as a table footnote. */
.tiebreak{margin:.55rem 0 0;font-size:.74rem;line-height:1.55;color:var(--text-3)}

/* ── fixture rows ─────────────────────────────────────── */
.fixtures{border:1px solid var(--hairline-2);background:var(--surface)}
.fx{
  display:grid;grid-template-columns:7.5rem 1fr auto;gap:.9rem;align-items:center;
  padding:.75rem 1rem;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;
  transition:background .16s ease;
}
.fx:last-child{border-bottom:none}
.fx:hover{background:var(--gold-dim)}
.fx .when{font-size:.74rem;color:var(--text-3);line-height:1.35}
.fx .when b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--text-2);font-weight:600}
.fx .matchup{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:1.08rem;line-height:1.15}
.fx .matchup .vs{color:var(--text-3);font-weight:500;padding:0 .35rem}
.fx .matchup .win{color:var(--gold)}
.fx .matchup .draw,.fx .score.draw,.fx .score.draw small{color:var(--s2)}
.fx .meta{font-size:.72rem;color:var(--text-3);margin-top:.15rem;display:flex;gap:.5rem;flex-wrap:wrap}
.fx .score{
  font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;text-align:right;
}
.fx .score small{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--text-3);font-weight:700}
.badge-status{
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.18rem .4rem;border:1px solid currentColor;border-radius:2px;
}
.st-scheduled{color:var(--text-3)}
.st-live{color:var(--s1);border-color:var(--s1);background:var(--s1-wash)}
.st-final{color:var(--s3)}
.st-draw{color:var(--s2);border-color:var(--s2);background:var(--s2-wash)}
.st-postponed{color:var(--s4)}
.st-cancelled{color:var(--text-3);text-decoration:line-through}

/* ── forms ────────────────────────────────────────────── */
label.f{display:block;margin-bottom:1rem}
label.f > span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:.35rem}
.field{margin-bottom:1rem}
.field > label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:.35rem}
.field > label .req{color:var(--gold);letter-spacing:.06em}
.help{font-size:.74rem;color:var(--text-3);line-height:1.5}
.field .help{margin-top:.3rem}
input,select,textarea{
  width:100%;background:var(--ink-2);color:var(--text);border:1px solid var(--hairline-2);
  border-radius:2px;padding:.6rem .7rem;font:inherit;font-size:.9rem;transition:.16s;
}
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;vertical-align:middle}
textarea{min-height:7rem;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:var(--surface-2)}
input.mono,select.mono{font-family:'IBM Plex Mono',monospace}
.formgrid{display:grid;gap:0 1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

/* ── 打字快速選擇 ─────────────────────────────────────────
   The option list sits *in flow* under the input rather than floating over it.
   Both places these render — the record sheet (`.recsheet .card` scrolls) and
   the box score's sticky first column (`table.entry td.who`) — would clip or
   paint over an absolutely positioned popover, so the list pushes the layout
   instead and carries its own scrollbar. */
.combo{display:flex;align-items:stretch;flex-wrap:wrap}
.combo > .combo-input{flex:1 1 6rem;width:auto;min-width:0;border-right:0}
.combo > .combo-toggle{
  flex:0 0 2rem;background:var(--ink-2);color:var(--text-3);cursor:pointer;
  border:1px solid var(--hairline-2);border-radius:0 2px 2px 0;font-size:.62rem;line-height:1;
}
.combo > .combo-toggle:hover{color:var(--gold);border-color:var(--gold)}
.combo-list{
  flex:0 0 100%;order:9;list-style:none;margin:.25rem 0 0;
  max-height:13.5rem;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--hairline-2);box-shadow:var(--shadow);
}
.combo-list[hidden]{display:none}
.combo-list li{padding:.4rem .6rem;font-size:.86rem;cursor:pointer}
.combo-list li[hidden]{display:none}
.combo-list li.on,.combo-list li:hover{background:var(--gold-dim);color:var(--gold)}
.combo-list li.combo-head{
  cursor:default;background:none;color:var(--text-3);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.5rem .6rem .2rem;
}
.combo-list li.combo-none{cursor:default;background:none;color:var(--text-3);font-size:.78rem}

/* 開球時間: the typed box and the calendar box are two ways into one value,
   side by side until the column is too narrow to hold both. */
.dtpair{display:flex;flex-wrap:wrap;gap:.35rem}
.dtpair > input{flex:1 1 8.5rem;min-width:0}
.dtpair > .dt-pick{font-size:.82rem;color:var(--text-2)}
.msg{font-size:.84rem;font-weight:600;min-height:1.2rem}
.msg.err{color:var(--s1)}
.msg.ok{color:var(--s3)}
.msg.warn{color:var(--s4)}

/* ── states ───────────────────────────────────────────── */
.empty{
  border:1px dashed var(--hairline-2);background:var(--surface);padding:2.2rem 1.4rem;text-align:center;
}
.empty svg{width:2.4rem;height:2.4rem;stroke:var(--text-3);fill:none;stroke-width:1.4;margin-bottom:.7rem}
.empty h3{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em}
.empty p{color:var(--text-3);font-size:.86rem;margin-top:.4rem;max-width:44ch;margin-inline:auto}
.skel{border:1px solid var(--hairline);background:var(--surface)}
.skel .bar{height:.85rem;margin:.9rem 1rem;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:2px}
.skel .bar:nth-child(2n){width:70%}
.skel .bar:nth-child(3n){width:85%}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── filter bar ───────────────────────────────────────── */
.filters{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.filters .pill{
  border:1px solid var(--hairline-2);background:transparent;color:var(--text-2);border-radius:999px;
  padding:.34rem .8rem;font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.16s ease;
}
.filters .pill:hover{color:var(--text);border-color:var(--text-3)}
.filters .pill[aria-pressed="true"]{background:var(--text);color:var(--ink);border-color:var(--text)}
.filters .sep{width:1px;height:1.3rem;background:var(--hairline-2);margin:0 .3rem}

/* ── footer ───────────────────────────────────────────── */
.sitefoot{
  border-top:1px solid var(--hairline-2);margin-top:4rem;
  padding:2.4rem clamp(1rem,4vw,3rem) 3rem;
}
.sitefoot .inner{max-width:1320px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.sitefoot h4{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:.7rem}
.sitefoot ul{list-style:none;display:grid;gap:.35rem}
.sitefoot a{color:var(--text-2);text-decoration:none;font-size:.86rem}
.sitefoot a:hover{color:var(--gold)}
.sitefoot .rule{grid-column:1/-1;border-top:1px solid var(--hairline);padding-top:1.1rem;color:var(--text-3);font-size:.76rem;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:space-between}

/* ── motion + responsive ──────────────────────────────── */
.rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.22,1,.36,1) forwards}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
.hidden{display:none!important}

@media (max-width:1080px){
  .navlinks{display:none}
  .navtoggle{display:inline-flex}
  #navSheet.open{
    display:grid;gap:.1rem;padding:.5rem clamp(1rem,4vw,3rem) 1rem;
    border-top:1px solid var(--hairline);
  }
  #navSheet a{
    font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:700;font-size:1.05rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);text-decoration:none;
    padding:.5rem 0;border-bottom:1px solid var(--hairline);
  }
  #navSheet a[aria-current="page"]{color:var(--gold)}
}
@media (max-width:640px){
  .wordmark .label{display:none}
  .fx{grid-template-columns:1fr auto;row-gap:.3rem}
  .fx .when{grid-area:1/1}
  .fx .score{grid-area:1/2}
  .fx .matchup{grid-area:2/1/auto/span 2}
  .tile .v{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
}

/* ── 生涯成就 ──────────────────────────────────────────────────────────────
   One card per badge. `t1`–`t5` is the tier the API assigned: the harder the
   badge, the warmer the card reads, so a wall of them still has a shape. A
   pending badge is outlined instead of filled — it has not been earned yet. */
.achlist{list-style:none;display:grid;gap:.05rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));
  border:1px solid var(--hairline-2);background:var(--surface)}
.achlist .ach{padding:.75rem .9rem;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:grid;gap:.15rem}
.achlist .grp{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.achlist .nm{font-family:'Saira Condensed','Noto Sans TC',sans-serif;font-weight:800;font-size:1.15rem;line-height:1.05;color:var(--gold)}
.achlist .nt{font-size:.76rem;color:var(--text-2)}
.achlist .dt{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.achlist .ach.t1 .nm{color:var(--text)}
.achlist .ach.t2 .nm{color:var(--text)}
.achlist .ach.t4{background:var(--gold-dim)}
.achlist .ach.t5{background:var(--gold-dim);box-shadow:inset 3px 0 0 var(--gold)}
.achlist .ach.pend{opacity:.72}
.achlist .ach.pend .nm{color:var(--text-3)}
.achlist.fun .ach{background:transparent}
.achlist.fun .nm{color:var(--text-2);font-size:1.05rem}
.achlist.fun .grp{color:var(--text-3)}
.achnote{font-size:.82rem;color:var(--text-3);margin-bottom:.7rem}

/* ── 同名球員 ─────────────────────────────────────────────
   The chooser `wirePlayerIdentity` inserts after 球員姓名. It sits inside the
   form grid but spans it, because the question it asks — is this the same
   person? — is about the row as a whole and its answer needs room to show
   where each candidate has played. */
.idpanel{
  grid-column:1/-1;margin:-.4rem 0 1rem;padding:.7rem .85rem;
  border:1px solid var(--s4);background:var(--s4-wash);border-radius:3px;
}
.idhead{margin:0 0 .55rem;font-size:.82rem;line-height:1.6}
.idpick{display:flex;gap:.55rem;align-items:flex-start;padding:.42rem .1rem;cursor:pointer;font-size:.82rem}
.idpick + .idpick{border-top:1px solid var(--hairline)}
.idpick input{margin-top:.25rem;flex:none}
.idpick > span{display:flex;flex-wrap:wrap;gap:.2rem .55rem;align-items:baseline}
.idpick b{letter-spacing:.04em}
.idpick .mono{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--gold)}
.idgames{font-size:.74rem;color:var(--text-2)}
.idwarn{font-size:.74rem;color:var(--s1);font-weight:600}
.idwhere{flex-basis:100%;font-size:.74rem;color:var(--text-3);line-height:1.5}
.idnote{margin:.5rem 0 0;font-size:.78rem;color:var(--text-2);line-height:1.6}