:root{
  color-scheme: dark;
  --ink:#0A0E13; --ink-2:#0F151C; --ink-3:#151D26; --ink-4:#1C2733;
  --line:#243040; --line-soft:#1A232E;
  --chalk:#EAF1F8; --chalk-2:#9FB0C0; --chalk-3:#808F9F;
  --gold:#E8B341; --gold-deep:#B7862A; --gold-glow:rgba(232,179,65,.16);
  --gold-solid:#E8B341; /* fixed bright gold for solid fills w/ dark text (buttons) */
  --on-color:#0A0E13;   /* fixed dark ink for text on gold/owner/position surfaces */
  --cmd-bg:rgba(10,14,19,.90); --badge-bg:linear-gradient(145deg,#1d2735,#0d131b);
  --qb:#F0736F; --rb:#3FC08A; --wr:#4FA6E6; --te:#E8963E; --k:#B78CE6; --dst:#7E8CA0;
  --good:#4CCB93; --warn:#E8B341; --live:#FF6B6B;
  --r:10px; --r-sm:7px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Oswald","Helvetica Neue",system-ui,Arial,sans-serif;
}
/* light theme — cool paper, deep-gold accent; applied by OS pref (unless overridden) or explicit toggle */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme: light;
    --ink:#F3F5F8; --ink-2:#FFFFFF; --ink-3:#EDF1F5; --ink-4:#E2E8EF;
    --line:#D3DBE4; --line-soft:#E8ECF1;
    --chalk:#182430; --chalk-2:#48586A; --chalk-3:#66788A;
    --gold:#986812; --gold-deep:#7C540B; --gold-glow:rgba(184,134,42,.13);
    /* position hues stay bright in both themes so colored badges keep contrast */
    --good:#1D8F5F; --warn:#A9791C; --live:#CE4A46;
    --cmd-bg:rgba(243,245,248,.88);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --ink:#F3F5F8; --ink-2:#FFFFFF; --ink-3:#EDF1F5; --ink-4:#E2E8EF;
  --line:#D3DBE4; --line-soft:#E8ECF1;
  --chalk:#182430; --chalk-2:#48586A; --chalk-3:#66788A;
  --gold:#986812; --gold-deep:#7C540B; --gold-glow:rgba(184,134,42,.13);
  --qb:#CE4A46; --rb:#1D8F5F; --wr:#2A75B8; --te:#B56A1C; --k:#855BBD; --dst:#586878;
  --good:#1D8F5F; --warn:#A9791C; --live:#CE4A46;
  --cmd-bg:rgba(243,245,248,.88);
}
@font-face{font-family:"Oswald"; src:url("fonts/oswald-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"Oswald"; src:url("fonts/oswald-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap}
*{box-sizing:border-box}
/* one shared, visible keyboard-focus system (WCAG 2.4.7) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:5px}
.search:focus-within{border-color:var(--gold)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--chalk); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 78% -8%, rgba(79,166,230,.06), transparent 60%),radial-gradient(900px 520px at 10% 0%, rgba(232,179,65,.05), transparent 55%); background-attachment:fixed;}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chalk-3)}
.hidden{display:none !important}

header.cmd{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:var(--cmd-bg); border-bottom:1px solid var(--line);}
.cmd-inner{max-width:1320px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:12px; min-width:0}
.crest{width:42px; height:42px; border-radius:9px; flex:none; background:linear-gradient(145deg,#1d2735,#0d131b); border:1px solid var(--line); display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(232,179,65,.08);}
.crest b{font-family:var(--disp); font-weight:800; font-size:19px; color:var(--gold); letter-spacing:-.03em}
.crestmark{width:30px; height:30px; display:block}
.mark h1{font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:-.01em; line-height:1.05; text-transform:uppercase}
.mark span{font-size:11px; color:var(--chalk-2)}
.whoami{margin-left:auto; display:flex; align-items:center; gap:10px}
.livepill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-deep); background:var(--gold-glow); padding:5px 11px; border-radius:100px}
.livepill.live{color:var(--live); border-color:var(--live)}
.livepill.done{color:var(--good); border-color:var(--good)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor; animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,115,111,.55)}70%{box-shadow:0 0 0 7px rgba(240,115,111,0)}100%{box-shadow:0 0 0 0 rgba(240,115,111,0)}}
.userchip{font-family:var(--mono); font-size:11px; color:var(--chalk-2); border:1px solid var(--line); border-radius:100px; padding:5px 11px; white-space:nowrap}
.userchip b{color:var(--chalk)} .userchip .adm{color:var(--gold)}
.themebtn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:100px; border:1px solid var(--line); background:var(--ink-2); color:var(--chalk-2); cursor:pointer; flex:none; transition:.12s; padding:0}
.themebtn:hover{color:var(--gold); border-color:var(--gold-deep)}
.themebtn svg{display:block}

nav.tabs{max-width:1320px; margin:0 auto; padding:0 12px; display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--line-soft)}
nav.tabs button{flex:none; background:none; border:0; color:var(--chalk-3); font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:13px 15px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s}
nav.tabs button:hover{color:var(--chalk-2)}
nav.tabs button[aria-selected="true"]{color:var(--chalk); border-bottom-color:var(--gold)}
nav.tabs button:focus-visible{outline:2px solid var(--gold); outline-offset:-2px; border-radius:4px}

main{max-width:1320px; margin:0 auto; padding:22px 20px 90px}
.view{display:none; animation:fade .3s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:22px}
.stat{background:var(--ink-2); padding:14px 16px}
.stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-3)}
.stat .v{font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:-.02em; margin-top:3px}
.stat .v small{font-size:13px; color:var(--chalk-2); font-weight:600}
.stat .v.gold{color:var(--gold)}

/* ===== league masthead (hero) ===== */
.masthead{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:22px 4px 16px; margin-bottom:18px; position:relative; animation:mhReveal .55s cubic-bezier(.2,.7,.2,1)}
@keyframes mhReveal{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.masthead .medallion{width:104px; height:104px; flex:none; filter:drop-shadow(0 5px 16px rgba(232,179,65,.14))}
.mh-id{min-width:0}
.mh-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.mh-word{font-family:var(--disp); font-weight:700; font-size:clamp(32px,6.4vw,60px); line-height:.9; text-transform:uppercase; letter-spacing:.004em; margin:8px 0; color:var(--chalk)}
.mh-sub{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--chalk-2)}
.mh-season{text-align:center; flex:none}
.mh-season .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--chalk-3)}
.mh-season .num{font-family:var(--disp); font-weight:700; font-size:42px; line-height:1; color:var(--gold); border:2px solid var(--gold-deep); border-radius:9px; padding:5px 15px 3px; display:inline-block; margin-top:6px; background:var(--gold-glow)}
.mh-foot{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; padding-top:13px; border-top:1px solid var(--line)}
.mh-champ{font-size:13.5px; color:var(--chalk-2)} .mh-champ b{color:var(--chalk); font-weight:600} .mh-champ .crown{color:var(--gold); margin-right:3px}
.mh-next{font-family:var(--mono); font-size:11.5px; color:var(--chalk-3)}
@media (max-width:720px){
  .masthead{grid-template-columns:66px 1fr; gap:14px; padding:14px 2px 12px}
  .masthead .medallion{width:66px; height:66px}
  .mh-season{position:absolute; top:12px; right:2px; text-align:right}
  .mh-season .lbl{display:none}
  .mh-season .num{font-size:22px; padding:2px 9px; margin:0}
  .mh-word{margin:5px 0}
  .mh-foot{margin-top:10px}
}

/* on the clock */
.oc{display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:var(--r); margin-bottom:20px; border:1px solid var(--gold-deep);
  background:linear-gradient(100deg, var(--gold-glow), transparent 70%)}
.oc .ocpk{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.1em; text-transform:uppercase}
.oc .ocwho{font-family:var(--disp); font-weight:700; font-size:clamp(26px, 7vw, 40px); line-height:1.02; letter-spacing:.005em}
.oc .ocmini{font-size:12.5px; color:var(--chalk-2)}
.oc .ocav{width:44px;height:44px;border-radius:10px; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:16px; color:var(--on-color); background:var(--ac,var(--gold))}

.banner{display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--r); background:linear-gradient(180deg, rgba(232,179,65,.07), rgba(232,179,65,.02)); border:1px solid var(--gold-deep); margin-bottom:22px}
.banner .b-ic{font-family:var(--disp); font-weight:800; color:var(--gold); font-size:20px}
.banner h3{font-size:14.5px}
.banner p{margin:4px 0 0; color:var(--chalk-2); font-size:13.5px}
.banner .dates{display:flex; gap:16px; flex-wrap:wrap; margin-top:9px}
.banner .dates b{font-family:var(--mono); color:var(--chalk); font-weight:600; font-size:12.5px}
.banner .dates b i{color:var(--chalk-3); font-style:normal; display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}

.shead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px}
.shead h2{font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:-.02em; text-transform:uppercase}
.shead p{margin:0; color:var(--chalk-2); font-size:13.5px}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.chips{display:flex; gap:5px; flex-wrap:wrap}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 10px; border-radius:100px; border:1px solid var(--line); background:var(--ink-2); color:var(--chalk-2); cursor:pointer; transition:.12s}
.chip:hover{color:var(--chalk)}
.chip[aria-pressed="true"]{color:var(--ink); background:var(--chalk); border-color:var(--chalk); font-weight:600}
.chip.pos[aria-pressed="true"]{background:var(--pc); border-color:var(--pc); color:#0A0E13}
.search{margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--ink-2); border:1px solid var(--line); border-radius:100px; padding:7px 13px}
.search input{background:none; border:0; color:var(--chalk); font-family:var(--sans); font-size:13px; width:170px; outline:none}
.search input::placeholder{color:var(--chalk-3)}
.search svg{opacity:.5}
.seasonseg{display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; background:var(--ink-2)}
.seasonseg button{background:none; border:0; color:var(--chalk-3); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; padding:7px 14px; cursor:pointer}
.seasonseg button[aria-pressed="true"]{background:var(--gold-glow); color:var(--gold)}
.toggle{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--chalk-2); cursor:pointer; user-select:none}
.toggle input{appearance:none; width:34px; height:19px; border-radius:100px; background:var(--ink-4); border:1px solid var(--line); position:relative; cursor:pointer; transition:.15s}
.toggle input::after{content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--chalk-3); transition:.15s}
.toggle input:checked{background:var(--gold-glow); border-color:var(--gold-deep)}
.toggle input:checked::after{left:16px; background:var(--gold)}

.boardwrap{border:1px solid var(--line); border-radius:var(--r); overflow:auto; max-height:78vh; background:var(--ink-2)}
table.board{border-collapse:separate; border-spacing:0; width:100%; min-width:1180px; table-layout:fixed}
table.board thead th{position:sticky; top:0; z-index:3; background:var(--ink-3); font-family:var(--mono); font-size:11px; font-weight:600; color:var(--chalk); padding:9px 8px; border-bottom:1px solid var(--line); border-left:1px solid var(--line-soft); white-space:nowrap}
table.board thead th .seatno{color:var(--gold); font-size:10px}
table.board thead th.rail{left:0; z-index:5; width:46px; background:var(--ink-3)}
th.rail, td.rail{position:sticky; left:0; z-index:2; width:46px; background:var(--ink-3); border-right:1px solid var(--line); font-family:var(--mono); text-align:center; color:var(--chalk-2)}
td.rail .rd{font-size:14px; font-weight:700; color:var(--chalk)}
td.rail .ar{font-size:11px; color:var(--gold); opacity:.7}
td.cell{border-bottom:1px solid var(--line-soft); border-left:1px solid var(--line-soft); padding:0; vertical-align:top}
.tile{position:relative; padding:7px 9px 8px; min-height:56px; border-left:3px solid var(--pc); background:linear-gradient(100deg, color-mix(in srgb, var(--pc) 9%, transparent), transparent 70%); transition:.12s}
.tile:hover{background:color-mix(in srgb, var(--pc) 15%, var(--ink-3))}
.tile .pk{font-family:var(--mono); font-size:9.5px; color:var(--chalk-3)}
.tile .pl{font-size:12.5px; font-weight:600; line-height:1.2; margin-top:2px; color:var(--chalk)}
.tile .mt{font-family:var(--mono); font-size:10px; color:var(--chalk-2); margin-top:3px}
.tile .pos{color:color-mix(in srgb, var(--pc) 74%, var(--chalk)); font-weight:700}
.tile .via{display:inline-block; margin-top:4px; font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--chalk-3); border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.tile.keeper{box-shadow:inset 0 0 0 1px var(--gold-deep)}
.tile.keeper::after{content:"★ KEEP"; position:absolute; top:6px; right:7px; font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; color:var(--gold); font-weight:700}
.tile.keeper .pl{padding-right:44px}
.tile.dim{opacity:.16; filter:grayscale(.5)}
.tile.hit{box-shadow:inset 0 0 0 2px var(--wr)}
/* empty + on-clock seats (live board) */
td.cell .seat-empty{min-height:56px; padding:9px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--chalk-3); opacity:.5}
td.cell.oc-cell{outline:2px solid var(--gold); outline-offset:-2px; background:var(--gold-glow); animation:ocpulse 2s infinite}
@keyframes ocpulse{0%,100%{background:rgba(232,179,65,.06)}50%{background:rgba(232,179,65,.16)}}
td.cell.oc-cell .seat-empty{color:var(--gold); opacity:1; font-weight:700; flex-direction:column; gap:3px}

.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--chalk-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block}
/* fixed-width columns: keep long names inside their cell */
td.cell{overflow:hidden}
.tile .pl, .tile .pk{overflow-wrap:anywhere}

/* mobile-friendly pick feed (alternative to the grid) */
.feed{display:flex; flex-direction:column; gap:8px}
.feedcard{display:flex; align-items:center; gap:12px; background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--pc); border-radius:var(--r-sm); padding:10px 13px}
.feedcard.keeper{box-shadow:inset 0 0 0 1px var(--gold-deep)}
.feedcard.hit{box-shadow:inset 0 0 0 2px var(--wr)}
.feedcard.dim{display:none}
.feedcard .fnum{font-family:var(--mono); font-size:10px; color:var(--chalk-3); width:50px; flex:none; text-align:center; line-height:1.3}
.feedcard .fnum b{display:block; color:var(--gold); font-size:15px}
.feedcard .fav{width:30px;height:30px;border-radius:7px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:11px; color:var(--on-color); background:var(--ac,var(--chalk))}
.feedcard .fbody{flex:1; min-width:0}
.feedcard .fp{font-size:14px; font-weight:600; line-height:1.25}
.feedcard .fm{font-family:var(--mono); font-size:11px; color:var(--chalk-2); margin-top:2px}
.feedcard .fm .pos{color:color-mix(in srgb, var(--pc) 74%, var(--chalk)); font-weight:700}
.feedcard .ftag{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:4px; flex:none; align-self:flex-start}
.feedcard .ftag.k{color:var(--gold); border:1px solid var(--gold-deep)}
.feedcard .ftag.v{color:var(--chalk-3); border:1px solid var(--line)}
.feedhint{color:var(--chalk-3); font-family:var(--mono); font-size:12.5px; text-align:center; padding:26px 10px; border:1px dashed var(--line); border-radius:var(--r)}

.grid{display:grid; gap:14px}
.g-own{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.own{display:flex; flex-direction:column; gap:2px}
.own .top{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.av{width:40px;height:40px;border-radius:9px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:15px; color:var(--on-color); background:var(--ac, var(--chalk))}
.own h3{font-size:15px; font-weight:700; letter-spacing:-.01em}
.own .nick{font-family:var(--mono); font-size:11px; color:var(--gold)}
.own .role{font-size:11.5px; color:var(--chalk-2)}
.own .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft)}
.tag{font-family:var(--mono); font-size:10.5px; color:var(--chalk-2); background:var(--ink-3); border:1px solid var(--line); border-radius:5px; padding:3px 7px}
.tag b{color:var(--chalk)}
.tag.titles{color:var(--gold); border-color:var(--gold-deep); background:var(--gold-glow)}

.keepgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.kcol h3{font-size:14px; display:flex; align-items:center; gap:9px; margin-bottom:11px}
.kcol h3 .kav{width:26px;height:26px;border-radius:6px; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:11px; color:var(--on-color); background:var(--ac,var(--chalk))}
.krow{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft)}
.krow:first-of-type{border-top:0}
.kpos{font-family:var(--mono); font-size:10px; font-weight:700; color:var(--on-color); background:var(--pc); border-radius:4px; padding:2px 6px; flex:none}
.krow .kn{font-size:13px; font-weight:600; flex:1; min-width:0}
.krow .kn small{display:block; font-family:var(--mono); font-size:10px; color:var(--chalk-3); font-weight:400}
.krow .cost{font-family:var(--mono); font-size:10.5px; color:var(--warn); text-align:right; flex:none}
.krow .cost i{display:block; font-style:normal; color:var(--chalk-3); font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.krow .kill{flex:none; background:none; border:0; color:var(--chalk-3); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px}
.krow .kill:hover{color:var(--qb)}
.emptyhint{color:var(--chalk-3); font-size:13px; padding:8px 0}

.calc{display:grid; grid-template-columns:1fr; gap:14px; max-width:560px}
.calc .field label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3); display:block; margin-bottom:7px}
.calc select, .calc input[type=number]{width:100%; background:var(--ink-3); border:1px solid var(--line); color:var(--chalk); border-radius:var(--r-sm); padding:11px 12px; font-family:var(--mono); font-size:14px}
.calc .out{background:linear-gradient(180deg, rgba(232,179,65,.08), transparent); border:1px solid var(--gold-deep); border-radius:var(--r); padding:16px}
.calc .out .lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-3)}
.calc .out .res{font-family:var(--disp); font-weight:800; font-size:22px; color:var(--gold); margin-top:5px}
.calc .out .note{font-size:12.5px; color:var(--chalk-2); margin-top:7px}

.rulegrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card h3.ch{font-family:var(--disp); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:11px; color:var(--chalk); display:flex; gap:9px; align-items:center}
.card h3.ch .no{font-family:var(--mono); font-size:12px; color:var(--gold); font-weight:600}
.card ul.rl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.card ul.rl li{font-size:13px; color:var(--chalk-2); padding-left:16px; position:relative; line-height:1.5}
.card ul.rl li::before{content:"›"; position:absolute; left:0; color:var(--gold); font-weight:700}
.card ul.rl li b{color:var(--chalk); font-weight:600}
.scoregrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.srow{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--line-soft); font-size:13px}
.srow:first-child{border-top:0}
.srow span{color:var(--chalk-2)} .srow b{font-family:var(--mono); color:var(--chalk); font-weight:600}
.srow b.pos{color:var(--good)} .srow b.neg{color:var(--live)}

.champs{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.champ{display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; background:var(--ink-2); padding:12px 16px}
.champ .yr{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--gold)}
.champ .who{font-size:15px; font-weight:600}
.champ .who small{color:var(--chalk-3); font-weight:400; font-family:var(--mono); font-size:11px; margin-left:8px}
.champ .amt{font-family:var(--mono); font-size:13px; color:var(--chalk-2)}
.champ.tbd{opacity:.62} .champ.tbd .who{color:var(--chalk-2); font-style:italic} .champ.tbd .yr{color:var(--chalk-3)}

/* 2025 final standings */
.standings{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.strow{display:grid; grid-template-columns:34px 30px 1fr auto auto auto; gap:12px; align-items:center; background:var(--ink-2); padding:9px 14px}
.strow .srank{font-family:var(--mono); color:var(--gold); text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.strow .stm b{font-size:14px} .strow .stm small{display:block; color:var(--chalk-3); font-family:var(--mono); font-size:10px}
.strow .srec{color:var(--chalk)} .strow .spf{color:var(--chalk-3); font-size:12px}
.fin{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:100px; white-space:nowrap}
.fin.champ{color:var(--gold); border:1px solid var(--gold-deep); background:var(--gold-glow)}
.fin.run{color:var(--chalk-2); border:1px solid var(--line)} .fin.third{color:var(--chalk-3); border:1px solid var(--line)}

/* 2025 rosters */
.rostergrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rcard{padding:0; overflow:hidden}
.rhead{display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--ink-3)}
.rhead h3{font-size:14.5px} .rsub{font-family:var(--mono); font-size:11px; color:var(--chalk-2)}
.rrow{display:flex; align-items:center; gap:10px; padding:8px 16px; border-top:1px solid var(--line-soft)}
.rrow:first-of-type{border-top:0}
.rrow .rn{flex:1; min-width:0; font-size:13px; font-weight:600}
.rrow .rn small{color:var(--chalk-3); font-family:var(--mono); font-size:10px; margin-left:6px; font-weight:400}
.acq{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:5px; border:1px solid var(--line); color:var(--chalk-2); flex:none}
.acq-Draft{color:var(--wr); border-color:rgba(79,166,230,.4)}
.acq-Keeper{color:var(--gold); border-color:var(--gold-deep); background:var(--gold-glow)}
.acq-Trade{color:var(--te); border-color:rgba(232,150,62,.4)}
.acq-Waiver{color:var(--chalk-3)}

/* ================= record book ================= */
.recgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.reccard{padding:14px 16px}
.reccard .recval{font-family:var(--disp); font-weight:700; font-size:30px; color:var(--gold); line-height:1; margin:6px 0 4px}
.reccard .recsub{font-size:12px; color:var(--chalk-2)}
.lb{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.lbrow{display:grid; grid-template-columns:30px 32px 1fr auto 18px; gap:12px; align-items:center; background:var(--ink-2); padding:10px 14px; cursor:pointer}
.lbrow:hover{background:var(--ink-3)}
.lbrank{color:var(--chalk-3); text-align:center; font-size:13px}
.lbmid{min-width:0}
.lbmid b{font-size:14px} .lbmid small{display:block; color:var(--chalk-3); font-family:var(--mono); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbpts{font-family:var(--disp); font-weight:700; font-size:22px; color:var(--chalk); font-variant-numeric:tabular-nums}
.lbx{color:var(--chalk-3); transition:transform .15s; text-align:center}
.lbrow.open .lbx{transform:rotate(180deg); color:var(--gold)}
.lbexp{background:var(--ink-3); border-top:1px solid var(--line-soft); padding:10px 16px}
.lblineup{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:3px 18px}
.lblineup.none{color:var(--chalk-3); font-family:var(--mono); font-size:12px; display:block}
.lpl{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px}
.lpl .lpn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lpl .lpp{color:var(--gold); font-weight:600}
.h2hwrap, .atwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2)}
table.h2h{border-collapse:collapse; width:100%; min-width:760px; font-family:var(--mono)}
table.h2h th, table.h2h td{padding:7px 6px; text-align:center; font-size:11.5px; border:1px solid var(--line-soft); white-space:nowrap}
table.h2h thead th{background:var(--ink-3); color:var(--chalk); font-weight:600}
table.h2h th.corner{position:sticky; left:0; z-index:3; background:var(--ink-3); color:var(--chalk-3)}
table.h2h th.rowh{position:sticky; left:0; z-index:1; background:var(--ink-3); text-align:left; color:var(--chalk)}
table.h2h th.rowh .av{display:inline-grid; vertical-align:middle; margin-right:7px}
table.h2h td.win{background:rgba(76,203,147,.16); color:#8fe0b8}
table.h2h td.lose{background:rgba(255,107,107,.13); color:#f0a3a0}
table.h2h td.even{color:var(--chalk-2)}
table.h2h td.diag{background:var(--ink-3)} table.h2h td.empty{color:var(--chalk-3)}
table.attbl{border-collapse:collapse; width:100%; min-width:460px}
table.attbl th, table.attbl td{padding:9px 14px; text-align:right; font-size:13px; border-top:1px solid var(--line-soft)}
table.attbl thead th{background:var(--ink-3); color:var(--chalk-2); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-top:0}
table.attbl th:first-child, table.attbl td:first-child{text-align:left}
table.attbl td.atn{display:flex; align-items:center; gap:9px; font-weight:600}
.lbrow.static{grid-template-columns:30px 32px 1fr auto; cursor:default}
.lbrow.static:hover{background:var(--ink-2)}
.sbgrid{grid-template-columns:1fr 1fr}
.effbars{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.effrow{display:grid; grid-template-columns:72px 1fr 50px; gap:10px; align-items:center}
.effrow .effn{font-size:12.5px; color:var(--chalk-2); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.effrow .effbar{height:14px; background:var(--ink-3); border:1px solid var(--line-soft); border-radius:100px; overflow:hidden}
.effrow .efffill{height:100%; background:var(--ac,var(--gold)); border-radius:100px}
.effrow .effv{font-size:12px; color:var(--chalk); text-align:right}
@media(max-width:640px){.sbgrid{grid-template-columns:1fr} .effrow{grid-template-columns:60px 1fr 44px}}
/* box-score deep links */
.lbrow{text-decoration:none; color:inherit}
.lbrow.static.box{grid-template-columns:30px 32px 1fr auto 16px; cursor:pointer}
.boxarrow{color:var(--gold); font-size:12px; text-align:center; opacity:.55; transition:opacity .12s}
.lbrow.box:hover .boxarrow, .reccard.link:hover .boxarrow{opacity:1}
.boxlink{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--gold); text-decoration:none; margin-bottom:9px; border:1px solid var(--gold-deep); border-radius:5px; padding:4px 9px; background:var(--gold-glow)}
.boxlink:hover{background:rgba(232,179,65,.2)}
.reccard.link{display:block; text-decoration:none; color:inherit; position:relative; transition:border-color .12s}
.reccard.link:hover{border-color:var(--gold-deep)}
.reccard.link .boxarrow{position:absolute; top:12px; right:14px}
@media(max-width:640px){.strow{grid-template-columns:28px 1fr auto; gap:8px} .strow .av,.strow .spf{display:none}}

.trade{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:13px 0; border-top:1px solid var(--line-soft)}
.trade:first-of-type{border-top:0}
.trade .side{display:flex; flex-direction:column; gap:3px}
.trade .side .nm{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.03em}
.trade .side .gets{font-size:12.5px; color:var(--chalk-2)}
.trade .side.r{text-align:right}
.trade .swap{font-family:var(--mono); color:var(--chalk-3); font-size:16px}
.livetrade{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft)}
.livetrade:first-of-type{border-top:0}
.livetrade .lt-ts{font-family:var(--mono); font-size:10px; color:var(--chalk-3); flex:none; width:64px}
.livetrade .lt-tx{font-size:13px; flex:1}
.vialist{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.viacard{display:flex; align-items:center; gap:10px; background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:9px 11px; font-size:12.5px}
.viacard .rnd{font-family:var(--mono); font-size:11px; color:var(--gold); flex:none}
.viacard b{color:var(--chalk)} .viacard span{color:var(--chalk-2)}
/* about bar (owners page) */
.aboutbar{display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; padding:16px 18px; margin-bottom:16px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(100deg, rgba(232,179,65,.06), transparent 72%)}
.aboutbar .abouttxt h3{font-family:var(--disp); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.01em}
.aboutbar .abouttxt p{margin:4px 0 0; color:var(--chalk-2); font-size:13px; max-width:62ch}
.aboutbar a.btn{flex:none; text-decoration:none; display:inline-block}
/* 2025 in-season trades */
.trade2{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 0; border-top:1px solid var(--line-soft)}
.trade2:first-of-type{border-top:0}
.trade2 .tdate{font-size:10.5px; color:var(--chalk-3); width:48px; flex:none}
.trade2 .tside{display:flex; flex-direction:column; gap:2px; min-width:0}
.trade2 .tside .nm{font-family:var(--mono); font-size:11.5px; color:var(--gold)}
.trade2 .tside .gets{font-size:13px; color:var(--chalk-2)}
.trade2 .tside .gets em{color:var(--chalk-3); font-style:normal; font-family:var(--mono); font-size:10.5px}
.trade2 .swap{color:var(--chalk-3); font-family:var(--mono)}
.finehint{margin:12px 0 0; font-size:11.5px; color:var(--chalk-3); font-family:var(--mono); line-height:1.5}

/* buttons / admin */
.btn{font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; border-radius:var(--r-sm); padding:9px 14px; border:1px solid var(--line); background:var(--ink-3); color:var(--chalk); cursor:pointer; transition:.12s}
.btn:hover{border-color:var(--chalk-3)}
.btn.gold{background:var(--gold-solid); color:var(--on-color); border-color:var(--gold-solid); font-weight:700}
.btn.gold:hover{background:#f0c05a}
.btn.ghost{background:none}
.btn.danger{color:var(--qb); border-color:rgba(240,115,111,.4)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.adminbar{position:sticky; bottom:0; z-index:30; margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:12px 16px; border:1px solid var(--gold-deep); border-radius:var(--r); background:color-mix(in srgb, var(--ink-2) 94%, transparent); backdrop-filter:blur(8px)}
.adminbar .albl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-right:2px}
.adminbar .sp{flex:1}

/* setup / order editor */
.setup{max-width:620px}
.orderlist{display:flex; flex-direction:column; gap:6px; margin:14px 0}
.orderrow{display:flex; align-items:center; gap:12px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px}
.orderrow .seatn{font-family:var(--mono); font-size:13px; color:var(--gold); width:22px; text-align:center}
.orderrow .av{width:30px;height:30px;font-size:12px}
.orderrow select{flex:1; background:var(--ink-2); border:1px solid var(--line); color:var(--chalk); border-radius:6px; padding:8px; font-family:var(--sans); font-size:13px}
.orderrow .arrows{display:flex; gap:3px}
.orderrow .arrows button{background:var(--ink-2); border:1px solid var(--line); color:var(--chalk-2); border-radius:5px; width:26px; height:26px; cursor:pointer}
.orderrow .arrows button:hover{color:var(--chalk)}

/* modal */
.modal{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(5,8,11,.7); backdrop-filter:blur(4px)}
.modal.on{display:flex}
.sheet{width:100%; max-width:440px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sheet h3{font-family:var(--disp); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:4px}
.sheet .sub{color:var(--chalk-2); font-size:13px; margin-bottom:16px}
.formrow{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.formrow.two{flex-direction:row; gap:10px} .formrow.two > *{flex:1}
.formrow label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3)}
.formrow input, .formrow select{background:var(--ink-3); border:1px solid var(--line); color:var(--chalk); border-radius:var(--r-sm); padding:10px 12px; font-family:var(--sans); font-size:14px; width:100%}
.sheet .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
.poschips-mini{display:flex; gap:5px; flex-wrap:wrap}
.poschips-mini button{font-family:var(--mono); font-size:11px; padding:6px 9px; border-radius:6px; border:1px solid var(--line); background:var(--ink-3); color:var(--chalk-2); cursor:pointer}
.poschips-mini button[aria-pressed="true"]{background:var(--pc); border-color:var(--pc); color:var(--on-color); font-weight:700}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:80; background:var(--ink-3); border:1px solid var(--line); border-radius:100px; padding:10px 18px; font-family:var(--mono); font-size:12.5px; opacity:0; transition:.25s; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--qb); color:var(--qb)}
.toast.ok{border-color:var(--good); color:var(--good)}

.foot{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--chalk-3); font-size:12px; font-family:var(--mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
/* ================= mobile / touch pass ================= */
@media (max-width:860px){
  main{padding:16px 14px 30px}
  body.is-admin #v-board{padding-bottom:86px}
  /* larger tap targets everywhere touch happens */
  nav.tabs button{padding:14px 14px}
  .chip{padding:9px 12px}
  .seasonseg button{padding:10px 15px}
  .btn{padding:11px 15px}
  .poschips-mini button{padding:10px 12px}
  .toggle input{width:40px; height:23px}
  .toggle input::after{width:17px; height:17px}
  .toggle input:checked::after{left:19px}
  #calcWrap{grid-template-columns:1fr !important}
}
@media (max-width:640px){
  .cmd-inner{padding:10px 14px; gap:9px}
  .crest{width:38px; height:38px}
  .crestmark{width:27px; height:27px}
  .mark h1{font-size:14px}
  .mark span{display:none}
  /* status pill sits left; the ⛶/theme/identity controls group together on the right
     (not scattered by space-between), and wrap cleanly if the row gets tight */
  .whoami{order:3; width:100%; margin-left:0; gap:8px; flex-wrap:wrap; justify-content:flex-start}
  .whoami #statusPill{margin-right:auto}
  /* War Room is a projector/big-screen presentation mode — hide its button on phones */
  #btnRoom{display:none}
  .strip{grid-template-columns:1fr 1fr}
  .search{margin-left:0; flex:1 1 100%}
  .oc{gap:12px; padding:12px 14px}
  .oc .ocmini{display:none}
  .champ{grid-template-columns:60px 1fr} .champ .amt{grid-column:2; font-size:12px}
  .trade{grid-template-columns:1fr; gap:6px} .trade .side.r{text-align:left} .trade .swap{display:none}
  .rostergrid, .keepgrid, .rulegrid, .g-own, .scoregrid, .champs{grid-template-columns:1fr}
  .boardwrap{max-height:68vh}
  .adminbar{gap:8px; padding:10px 12px}
  .foot{font-size:11px}
}
@media (max-width:420px){
  .strip{grid-template-columns:1fr 1fr}
  .formrow.two{flex-direction:column}
  .sheet{padding:16px}
}

/* ===================== live draft: clock · best available · player board · war room ===================== */

/* --- on-the-clock card: timer + context --- */
.oc{flex-wrap:wrap}
.oc .ocmid{min-width:0; flex:1 1 auto}
.oc .ocnext{font-family:var(--mono); font-size:11.5px; color:var(--chalk-3); letter-spacing:.03em; margin-top:3px}
.oc .ocright{margin-left:auto; text-align:right; flex:none}
.oc .oclast{font-size:12px; color:var(--chalk-2); margin-top:4px} .oc .oclast small{color:var(--chalk-3)}
.occlock{flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; order:-1; min-width:104px}
.octime{font-family:var(--disp); font-weight:800; font-size:clamp(30px,8vw,46px); line-height:.9; color:var(--gold); font-variant-numeric:tabular-nums}
.ocbar{width:100%; height:5px; border-radius:100px; background:var(--ink-4); overflow:hidden}
.ocfill{height:100%; width:100%; background:var(--gold); border-radius:100px; transition:width .25s linear}
.occlock.warn .octime{color:var(--warn)} .occlock.warn .ocfill{background:var(--warn)}
.occlock.urgent .octime{color:var(--live); animation:tickpulse 1s steps(1) infinite} .occlock.urgent .ocfill{background:var(--live)}
@keyframes tickpulse{50%{opacity:.35}}
.oc.buzz{animation:ocbuzz .5s ease 2}
@keyframes ocbuzz{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* --- rankings freshness bar --- */
.rankbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.rankmeta{font-size:12px; color:var(--chalk-2); letter-spacing:.03em}
.ranksrc{font-size:11px; color:var(--chalk-3)} .ranksrc.warnsrc{color:var(--live)}
.rankbar .btn{margin-left:auto}

/* --- Player Board table --- */
.pbwrap{max-height:none}
table.pbtbl{min-width:720px}
table.pbtbl th.pbh{cursor:pointer; user-select:none; white-space:nowrap; text-align:right}
table.pbtbl th.pbh:first-child, table.pbtbl th.pbh.atn{text-align:left}
table.pbtbl th.pbh:hover{color:var(--chalk)}
table.pbtbl th.pbh.sorted{color:var(--gold)}
table.pbtbl td.ln{font-weight:600; white-space:nowrap}
table.pbtbl td .posrank{color:var(--chalk-3); font-size:11px; margin-left:6px}
table.pbtbl td.pos{display:flex; align-items:center; gap:2px; justify-content:flex-start}
table.pbtbl td small{color:var(--chalk-3); font-weight:400}
td.projcell{position:relative}
td.projcell::before{content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--h,0)*1%); background:linear-gradient(90deg, transparent, var(--rb)); opacity:.14; pointer-events:none}
.injtag{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--live); border:1px solid rgba(255,107,107,.4); border-radius:4px; padding:0 4px; margin-left:5px; vertical-align:middle}
.pbempty{padding:30px; text-align:center; color:var(--chalk-3); font-family:var(--mono); font-size:13px}

/* --- Best Available (live pool) --- */
.availwrap{margin-top:22px; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); overflow:hidden}
.availhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line-soft); background:var(--ink-3)}
.availtitle{display:flex; align-items:baseline; gap:9px} .availtitle h3{font-family:var(--disp); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.01em}
.availcount{color:var(--gold); font-size:12px}
.availtools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.chips.mini .chip{padding:4px 8px; font-size:10px}
.search.sm{padding:5px 10px} .search.sm input{width:130px; font-size:12px}
.availlist{max-height:440px; overflow-y:auto; padding:6px}
.availfoot{padding:6px 14px 10px; color:var(--chalk-3); font-size:11px}
.availfoot:empty{display:none}
.avrow{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); border:1px solid transparent}
.avrow + .avrow{border-top:1px solid var(--line-soft)}
.avrow .avrank{width:30px; color:var(--chalk-3); font-size:12px; text-align:right; flex:none}
.avrow .avmid{min-width:0; flex:1 1 auto} .avrow .avn{font-size:14px} .avrow .avmid small{display:block; color:var(--chalk-3); font-size:11px}
.avrow .avproj{width:44px; text-align:right; color:var(--chalk); font-size:13px; flex:none}
.avrow .avadp{width:44px; text-align:right; color:var(--chalk-2); font-size:12px; flex:none}
.avrow .avdraft{flex:none; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-color); background:var(--gold-solid); border-radius:5px; padding:5px 9px; opacity:0; transition:.12s}
.avrow.draftable{cursor:pointer}
.avrow.draftable:hover, .avrow.draftable:focus-visible{background:var(--gold-glow); border-color:var(--gold-deep); outline:none}
.avrow.draftable:hover .avdraft, .avrow.draftable:focus-visible .avdraft{opacity:1}
@media (hover:none){ .avrow.draftable .avdraft{opacity:1} }

/* --- draft clock controls (admin bar) --- */
.clockctl{display:inline-flex; align-items:center; gap:6px}
.btn.mini{padding:6px 9px; font-size:11px}
.btn.mini.on{background:var(--gold-solid); color:var(--on-color); border-color:var(--gold-solid); font-weight:700}
#btnClock.on{border-color:var(--gold-deep); color:var(--gold)}
.clocksecs{display:inline-flex; align-items:center; gap:4px}

/* --- floating war-room exit --- */
.roomexit{position:fixed; z-index:60; top:14px; right:14px; display:none; font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  border:1px solid var(--line); background:var(--cmd-bg); backdrop-filter:blur(8px); color:var(--chalk); border-radius:100px; padding:8px 14px; cursor:pointer}
.roomexit.show{display:block}
.roomexit:hover{border-color:var(--gold-deep); color:var(--gold)}

/* --- sound controls: bottom-left while a draft is live, top-right in the war room --- */
.sndbar{position:fixed; z-index:55; left:14px; bottom:14px; display:none; gap:6px}
body.is-live .sndbar, body.room .sndbar{display:flex}
/* in the war room, tuck the sound controls into the empty top-left of the clock pane
   (the Exit button owns the top-right, over the Best Available header) */
body.room .sndbar{left:14px; right:auto; top:14px; bottom:auto}
.sndbtn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:100px; border:1px solid var(--line);
  background:var(--cmd-bg); backdrop-filter:blur(8px); color:var(--chalk-2); cursor:pointer; font-size:16px; line-height:1; transition:.12s}
.sndbtn:hover{color:var(--gold); border-color:var(--gold-deep)}
.sndbtn.on{color:var(--gold); border-color:var(--gold-deep); background:var(--gold-glow)}
.sndbtn.off{opacity:.55}

/* --- newly-landed pick pops in --- */
@keyframes landpop{0%{transform:scale(.92)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
.tile.justland, .feedcard.justland{animation:landpop .8s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 0 2px var(--gold), 0 8px 24px rgba(232,179,65,.18)}

/* --- broadcast pick reveal (à la a real draft-day board) --- */
.pickreveal{position:fixed; z-index:70; left:50%; top:80px; transform:translateX(-50%) translateY(-14px); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .28s, transform .28s, visibility .28s; width:min(560px, calc(100vw - 24px))}
.pickreveal.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.prcard{position:relative; display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:14px;
  background:var(--ink-2); border:1px solid var(--ac,var(--gold)); box-shadow:0 18px 50px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.03)}
.prpk{position:absolute; top:-9px; left:16px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-color); background:var(--ac,var(--gold)); padding:2px 8px; border-radius:100px}
.prav{width:48px; height:48px; border-radius:11px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:18px; color:var(--on-color); background:var(--ac,var(--gold))}
.prtxt{min-width:0}
.prwho{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-2)}
.prpl{font-family:var(--disp); font-weight:700; font-size:26px; line-height:1.05; letter-spacing:.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prmeta{font-size:12px; color:var(--chalk-2); margin-top:3px}
.prmeta .kpos{margin-right:4px}
body.room .pickreveal{top:auto; bottom:92px; width:min(720px, calc(100vw - 40px))}
body.room .prpl{font-size:clamp(28px,4vw,40px)}
body.room .prav{width:60px; height:60px; font-size:22px}

/* ===================== WAR ROOM (presentation) ===================== */
body.room{overflow:hidden}
body.room header.cmd, body.room .masthead, body.room #v-board > .shead, body.room #v-board > .toolbar,
body.room .legend, body.room .foot, body.room #bannerSlot, body.room #setupSlot{display:none !important}
body.room main{max-width:none; margin:0; padding:0; height:100vh}
body.room .view{animation:none}
body.room #v-board{display:grid; grid-template-columns:minmax(360px,40%) 1fr; grid-template-rows:1fr auto; gap:0; height:100vh}
body.room #ocSlot{grid-column:1; grid-row:1; padding:26px; border-right:1px solid var(--line); overflow:auto; display:flex; align-items:center}
body.room #ocSlot .oc{width:100%; margin:0; flex-direction:column; align-items:flex-start; gap:18px; border:0; background:none; padding:0}
body.room #ocSlot .occlock{align-self:stretch; min-width:0; align-items:flex-start}
body.room #ocSlot .octime{font-size:clamp(76px,13vw,150px)}
body.room #ocSlot .ocbar{height:10px}
body.room #ocSlot .ocav{width:64px; height:64px; font-size:24px}
body.room #ocSlot .ocwho{font-size:clamp(40px,5.4vw,74px)}
body.room #ocSlot .ocpk{font-size:14px}
body.room #ocSlot .ocnext{font-size:15px}
body.room #ocSlot .ocright{margin-left:0; text-align:left}
body.room #ocSlot .ocmini{font-size:15px}
body.room #boardWrap, body.room #boardFeed{display:none !important}
body.room #availWrap{grid-column:2; grid-row:1; margin:0; border:0; border-radius:0; display:flex; flex-direction:column; min-height:0; height:100%}
body.room #availWrap.hidden{display:none !important}
body.room .availhead{padding-right:120px}   /* clear the floating Exit button top-right */
body.room .availlist{max-height:none; flex:1 1 auto; padding:8px 10px}
body.room .avrow{padding:11px 12px} body.room .avrow .avn{font-size:16px}
body.room .adminbar{grid-column:1 / -1; grid-row:2; margin:0; border-top:1px solid var(--line); border-radius:0}
@media (max-width:860px){
  body.room #v-board{grid-template-columns:1fr; grid-template-rows:auto 1fr auto}
  body.room #ocSlot{grid-column:1; grid-row:1; border-right:0; border-bottom:1px solid var(--line); padding:16px}
  body.room #ocSlot .oc{flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px}
  body.room #ocSlot .octime{font-size:clamp(48px,15vw,72px)}
  body.room #ocSlot .ocwho{font-size:clamp(26px,7vw,40px)}
  body.room #availWrap{grid-column:1; grid-row:2}
  .roommute{right:100px}
}

/* room controls / player board on small screens */
@media (max-width:720px){
  .availtools{width:100%; margin-left:0}
  .availlist{max-height:52vh}
  table.pbtbl{min-width:640px}
}