/* ==========================================================================
   THE LEAGUE — one stylesheet for the whole site.
   Tokens and components lifted from the approved mockups so the site, the game
   and the newsletter all read as one product. Do not fork these values.
   ========================================================================== */

:root{
  /* Palette — floodlit pitch + newsprint */
  --pitch:        #0e3b2c;   /* deep pitch green — primary ground        */
  --pitch-deep:   #0a2c21;   /* darker green — footer / shadows          */
  --pitch-line:   #1c5943;   /* chalk-line green (subtle field markings) */
  --paper:        #f4eddd;   /* warm newsprint — panels & cards          */
  --paper-edge:   #e4d9c0;   /* paper border / deckle                    */
  --ink:          #14120c;   /* near-black editorial ink                 */
  --ink-soft:     #4a4636;   /* muted ink for secondary text             */
  --post:         #f5c542;   /* goalpost yellow — THE accent             */
  --post-deep:    #d19f1f;   /* accent shadow / active                   */
  --brick:        #bf4a3b;   /* miss red — use sparingly                 */
  --good:         #3f9b6d;   /* made kick green                          */
  --chalk:        #eef3ea;   /* chalk white on green                     */
  --chalk-dim:    #a9c4b8;   /* dimmed chalk (labels on green)           */

  --font-nameplate:'UnifrakturMaguntia','Playfair Display',serif;
  --font-display:  'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:     'PT Serif',Georgia,serif;
  --font-util:     'Barlow Condensed','Arial Narrow',system-ui,sans-serif;

  --wrap: 1120px;
  --gap:  clamp(16px, 3vw, 34px);
  --radius: 3px;
  --rule: 2px solid var(--ink);
}

/* ============================ RESET / BASE ============================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pitch); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.app{ background:var(--pitch-deep); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,28px); }
.eyebrow{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.18em;
          font-weight:600; font-size:13px; }
.display{ font-family:var(--font-display); font-weight:900; letter-spacing:-.01em; line-height:1.03; }
.num{ font-family:var(--font-display); font-weight:900; font-variant-numeric:tabular-nums; }
.util{ font-family:var(--font-util); }
.center{ text-align:center; }
.stack>*+*{ margin-top:18px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline:3px solid var(--post); outline-offset:3px; border-radius:2px;
}

/* Skip link — first thing in the tab order on every page. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--post); color:var(--ink); padding:12px 18px;
  font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em; font-weight:700;
}
.skip:focus{ left:0; }

/* ============================ EAR BAR ============================ */
.earbar{ background:var(--pitch-deep); color:var(--chalk-dim);
         font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
         font-size:12px; font-weight:500; }
.earbar .wrap{ display:flex; justify-content:space-between; align-items:center;
               gap:12px; padding-block:7px; }
.earbar .motto{ font-family:var(--font-display); font-style:italic; text-transform:none;
                letter-spacing:0; color:var(--chalk); font-size:13px; }
.earbar .ear-right{ text-align:right; }

/* ============================ MASTHEAD ============================ */
.masthead{ background:var(--paper); text-align:center; padding:22px 16px 16px;
           border-bottom:var(--rule); position:relative; }
.masthead .rule-top{ border-top:4px solid var(--ink); border-bottom:1px solid var(--ink);
                     height:5px; max-width:var(--wrap); margin:0 auto 10px; }
.nameplate{ font-family:var(--font-nameplate); font-weight:400;
            font-size:clamp(52px, 11vw, 118px); line-height:.9; margin:0;
            letter-spacing:.5px; text-decoration:none; display:block; color:var(--ink); }
.subplate{ font-family:var(--font-display); font-style:italic;
           font-size:clamp(13px,1.8vw,17px); margin-top:6px; color:var(--ink-soft); }

/* ============================ NAV ============================ */
.nav{ background:var(--ink); position:sticky; top:0; z-index:40; }
.nav .wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,44px);
            padding-block:0; }
.nav a{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.16em;
        font-weight:600; font-size:15px; color:var(--chalk); text-decoration:none;
        padding:14px 4px; border-bottom:3px solid transparent; transition:border-color .15s,color .15s; }
.nav a:hover{ color:var(--post); }
.nav a[aria-current="page"]{ color:var(--post); border-bottom-color:var(--post); }

/* Compact header used by the game + console, where vertical space is precious. */
.topnav{ background:var(--ink); position:sticky; top:0; z-index:40; }
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px; }
.wordmark{ font-family:var(--font-nameplate); color:var(--chalk); font-size:30px; line-height:1; text-decoration:none; }
.topnav nav{ display:flex; gap:clamp(14px,3vw,32px); }
.topnav nav a{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.14em; font-weight:600;
               font-size:14px; color:var(--chalk); text-decoration:none; padding:6px 2px; border-bottom:3px solid transparent; }
.topnav nav a:hover{ color:var(--post); }
.topnav nav a[aria-current="page"]{ color:var(--post); border-bottom-color:var(--post); }

/* ============================ TICKER ============================ */
.ticker{ background:var(--post); color:var(--ink); overflow:hidden; white-space:nowrap;
         border-bottom:var(--rule); }
.ticker .track{ display:inline-block; padding:7px 0; font-family:var(--font-util);
                font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:13px;
                animation:ticker 34s linear infinite; }
.ticker .track span{ padding:0 26px; position:relative; }
.ticker .track span::before{ content:"◆"; position:absolute; left:4px; color:var(--post-deep); }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================ HERO ============================ */
.hero{ position:relative; background:var(--pitch); color:var(--chalk);
       overflow:hidden; border-bottom:6px solid var(--post); }
.hero::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(245,197,66,.16), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(238,243,234,.05) 78px 79px);
  pointer-events:none; }
.hero .wrap{ position:relative; z-index:2; padding-block:clamp(40px,7vw,84px);
             display:grid; grid-template-columns:1.35fr .65fr; gap:var(--gap); align-items:center; }
.hero .eyebrow{ color:var(--post); }
.hero h1{ font-family:var(--font-display); font-weight:900;
          font-size:clamp(34px, 6vw, 68px); line-height:1.02; margin:.35em 0 .3em;
          letter-spacing:-.01em; }
.hero h1 em{ font-style:italic; color:var(--post); }
.hero .deck{ font-family:var(--font-body); font-size:clamp(16px,1.6vw,20px);
             color:var(--chalk); max-width:44ch; margin-bottom:26px; }
.hero .deck b{ color:#fff; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
      font-weight:700; font-size:15px; padding:13px 22px; border-radius:var(--radius);
      text-decoration:none; border:2px solid var(--post); background:var(--post); color:var(--ink);
      cursor:pointer; display:inline-block;
      transition:transform .12s, background .15s, color .15s; }
.btn:hover{ background:var(--post-deep); border-color:var(--post-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--post); }
.btn-ghost:hover{ background:rgba(245,197,66,.12); color:var(--post); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
/* On paper panels the ghost button needs the darker yellow to stay legible. */
.panel .btn-ghost{ color:var(--post-deep); }

.stat-strip{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
.stat b{ font-family:var(--font-display); font-weight:900; font-size:30px;
         display:block; line-height:1; font-variant-numeric:tabular-nums; }
.stat span{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em;
            font-size:11px; color:var(--chalk-dim); }

.posts{ align-self:stretch; display:flex; align-items:center; justify-content:center; }
.posts svg{ width:100%; max-width:260px; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }

/* ============================ SECTION SCAFFOLD ============================ */
.band{ background:var(--paper); }
.band + .band{ border-top:var(--rule); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
               padding-block:26px 10px; border-bottom:var(--rule); }
.section-head h2{ font-family:var(--font-display); font-weight:900;
                  font-size:clamp(22px,3.4vw,34px); margin:0; letter-spacing:-.01em; }
.section-head .kicker{ font-family:var(--font-util); text-transform:uppercase;
                       letter-spacing:.16em; font-weight:600; font-size:13px; color:var(--brick); }
.section-head a.more, .section-head span.more{
  font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; font-size:13px; text-decoration:none; color:var(--ink);
  border-bottom:2px solid var(--post); padding-bottom:2px; white-space:nowrap; }
.section-head span.more{ border:0; color:var(--ink-soft); }

/* ============================ NEWSLETTER CARDS ============================ */
.papers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
         padding-block:26px 40px; }
.paper-card{ background:#fbf6ea; border:var(--rule); border-radius:var(--radius);
             padding:20px 20px 18px; text-decoration:none; color:var(--ink);
             display:flex; flex-direction:column; gap:8px; transition:transform .14s, box-shadow .14s; }
.paper-card:hover{ transform:translateY(-4px); box-shadow:8px 10px 0 var(--pitch); }
.paper-card .mini-plate{ font-family:var(--font-nameplate); font-size:26px; line-height:1;
                         text-align:center; border-bottom:1px solid var(--ink); padding-bottom:8px; }
.paper-card .issue{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
                    font-size:11.5px; color:var(--ink-soft); }
.paper-card .p-hed{ font-family:var(--font-display); font-weight:900; font-size:21px; line-height:1.05; }
.paper-card .read{ margin-top:auto; font-family:var(--font-util); text-transform:uppercase;
                   letter-spacing:.1em; font-weight:700; font-size:13px; color:var(--brick); }
.paper-card.ghost{ background:repeating-linear-gradient(45deg,#efe7d5 0 9px,#f4eddd 9px 18px);
                   border-style:dashed; color:var(--ink-soft); cursor:default; }
.paper-card.ghost:hover{ transform:none; box-shadow:none; }
.paper-card.ghost .read{ color:var(--ink-soft); }

/* The archive stacks issues like a pile of front pages: newest big, rest below. */
.archive{ padding-block:26px 44px; display:grid; gap:var(--gap); }
.archive .lead-card{ grid-column:1/-1; display:grid; grid-template-columns:auto 1fr; gap:var(--gap);
                     align-items:center; background:#fbf6ea; border:var(--rule); padding:clamp(18px,3vw,30px); }
.archive .lead-card .mini-plate{ font-family:var(--font-nameplate); font-size:clamp(34px,5vw,52px); line-height:1; }
.archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.archive .empty{ background:#fbf6ea; border:2px dashed var(--ink-soft); padding:34px;
                 text-align:center; color:var(--ink-soft); font-style:italic; }

/* ============================ ROSTER / ROAST GRID ============================ */
.roster{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-block:24px 42px; }
.mgr{ background:#fbf6ea; border:1.5px solid var(--ink); border-radius:var(--radius);
      border-top:5px solid var(--post); padding:14px 15px; break-inside:avoid; }
.mgr .pos{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.14em;
           font-size:11px; font-weight:600; color:var(--ink-soft); }
.mgr .name{ font-family:var(--font-display); font-weight:900; font-size:20px; line-height:1.05;
            margin:2px 0 0; }
.mgr .nick{ font-family:var(--font-util); font-weight:600; font-size:13px; text-transform:uppercase;
            letter-spacing:.06em; color:var(--brick); }
.mgr .jab{ font-family:var(--font-body); font-style:italic; font-size:14.5px; color:var(--ink);
           margin-top:7px; line-height:1.4; }
.mgr.champ{ border-top-color:var(--pitch); background:#fff9e8; }
.mgr.champ .crown{ font-family:var(--font-util); font-weight:700; font-size:11px;
                   text-transform:uppercase; letter-spacing:.12em; color:var(--post-deep); }

/* ============================ PANELS / GAME SHELL ============================ */
.stage{ padding-block:clamp(20px,4vw,40px); min-height:70vh; }
.screen{ display:none; }
.screen.is-active{ display:block; }
.panel{ background:var(--paper); border:var(--rule); border-radius:var(--radius); }
.game{ max-width:760px; margin-inline:auto; }

/* ---- start screen ---- */
.start{ max-width:640px; margin-inline:auto; padding:clamp(24px,4vw,40px); text-align:center; }
.start h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(32px,6vw,52px); margin:.15em 0 .1em; }
.start .lede{ font-size:18px; color:var(--ink-soft); max-width:46ch; margin:0 auto 22px; }
.rules{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:0 0 26px; padding:0; list-style:none; }
.rules li{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.08em; font-size:13px;
           color:var(--ink); display:flex; align-items:center; gap:7px; }
.rules b{ font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--post-deep); }
.field{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; }
select.pick, input.pick{ font-family:var(--font-util); font-size:16px; text-transform:uppercase; letter-spacing:.06em;
            padding:13px 16px; border:2px solid var(--ink); border-radius:var(--radius); background:#fff; min-width:230px; }
.fineprint{ margin-top:16px; font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em;
            font-size:12px; color:var(--brick); }

/* Link to the field manual on the game's start screen. */
.manual-cta{ margin:-8px 0 24px; }
.manual-cta a{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
               font-weight:700; font-size:14px; color:var(--ink); text-decoration:none;
               border-bottom:2px solid var(--post); padding-bottom:2px; }
.manual-cta a:hover{ color:var(--post-deep); border-bottom-color:var(--post-deep); }
.manual-cta a::before{ content:"📄"; margin-right:7px; border:0; }
.manual-cta span{ display:block; margin-top:7px; font-family:var(--font-util);
                  text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:var(--ink-soft); }

/* ---- HUD ---- */
.hud{ display:flex; flex-wrap:wrap; gap:2px; border:var(--rule); border-bottom:0; background:var(--ink);
      border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; }
.hud .cell{ flex:1 1 0; min-width:90px; background:var(--ink); color:var(--chalk); text-align:center; padding:9px 6px; }
.hud .cell + .cell{ border-left:1px solid #2c281c; }
.hud .k{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:var(--chalk-dim); }
.hud .v{ font-family:var(--font-display); font-weight:900; font-size:20px; font-variant-numeric:tabular-nums; }
.hud .v.accent{ color:var(--post); }
.hud .wind span{ color:var(--post); }

/* ---- pitch ---- */
.pitch{ position:relative; background:var(--pitch); border:var(--rule); border-top:0; overflow:hidden;
        height:clamp(240px,42vw,340px);
        background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(238,243,234,.06) 46px 47px); }
.pitch .goal{ position:absolute; top:24px; left:50%; transform:translateX(-50%); width:min(58%,300px); }
.pitch .ball{ position:absolute; left:50%; top:78%; width:26px; height:16px; background:#7a3b1c; border:1.5px solid #eee;
              border-radius:50%; transform:translate(-50%,-50%) rotate(-22deg); }
.pitch .ball::after{ content:""; position:absolute; inset:0; margin:auto; width:14px; height:1.5px; background:#eee; }
.pitch .try-line{ position:absolute; left:0; right:0; bottom:26px; border-top:2px dashed rgba(238,243,234,.35); }
.pitch .dist{ position:absolute; right:12px; bottom:8px; font-family:var(--font-util); text-transform:uppercase;
              letter-spacing:.1em; font-size:11px; color:var(--chalk-dim); }
/* Wind streaks blow across the pitch in the direction of the crosswind. */
.pitch .windfx{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.pitch .windfx i{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(238,243,234,.55),transparent);
                  animation:gust linear infinite; }
@keyframes gust{ from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }

/* ---- control deck ----
   NOT ".deck". The home page's hero standfirst is also called a deck (the
   newspaper sense), and the two mockups this stylesheet was merged from each
   owned the name. Sharing it painted a paper-coloured panel behind the hero
   copy, which was chalk-on-chalk and therefore invisible. */
.control-deck{ background:var(--paper); border:var(--rule); border-top:0; border-radius:0 0 var(--radius) var(--radius);
       padding:16px clamp(14px,3vw,22px) 20px; }
.meter{ margin-bottom:14px; }
.meter.is-idle{ opacity:.45; }
.meter .lab{ display:flex; justify-content:space-between; font-family:var(--font-util); text-transform:uppercase;
             letter-spacing:.1em; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.meter .lab b{ color:var(--ink); }
.bar{ position:relative; height:20px; background:#e7ddc6; border:1.5px solid var(--ink); border-radius:20px; overflow:hidden; }
.bar .fill{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--good),var(--post)); }
.bar .thresh{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--brick); left:70%; }
.bar .thresh::after{ content:"NEED"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
                     font-family:var(--font-util); font-size:9px; letter-spacing:.1em; color:var(--brick); }
.aim{ position:relative; height:26px; background:#e7ddc6; border:1.5px solid var(--ink); border-radius:6px; overflow:hidden; }
.aim .window{ position:absolute; top:0; bottom:0; left:38%; width:24%; background:rgba(63,155,109,.28);
              border-left:1px solid var(--good); border-right:1px solid var(--good); }
.aim .marker{ position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink); left:50%; }
.aim .center{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(20,18,12,.3); }
.aim .landed{ position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--brick); left:50%; display:none; }
.action{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.tap{ flex:1; font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:17px;
      padding:16px; border-radius:var(--radius); border:2px solid var(--ink); background:var(--post); color:var(--ink);
      touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.tap:active{ background:var(--post-deep); }
.attempts{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em; font-size:12px;
           color:var(--ink-soft); white-space:nowrap; }

/* ---- verdict stamp ---- */
.stamp{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-9deg);
        font-family:var(--font-display); font-weight:900; font-size:clamp(44px,11vw,86px); letter-spacing:.02em;
        padding:6px 22px; border:6px double currentColor; border-radius:8px; text-transform:uppercase;
        animation:slam .32s cubic-bezier(.2,1.5,.4,1) both; }
.stamp.good{ color:var(--post); }
.stamp.miss{ color:var(--brick); }
@keyframes slam{ from{ transform:translate(-50%,-50%) rotate(-9deg) scale(2.6); opacity:0; }
                 to{ transform:translate(-50%,-50%) rotate(-9deg) scale(1); opacity:1; } }
.verdict-pts{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); font-family:var(--font-display);
              font-weight:900; font-size:clamp(16px,3.4vw,24px); color:var(--chalk); text-align:center; width:92%; }

/* ---- round end ---- */
.roundend{ max-width:560px; margin-inline:auto; padding:clamp(24px,4vw,38px); text-align:center; }
.roundend .rscore{ font-family:var(--font-display); font-weight:900; font-size:clamp(64px,16vw,120px); line-height:.9; }
.pips{ display:flex; justify-content:center; gap:8px; margin:14px 0 22px; flex-wrap:wrap; }
.pip{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:600;
      border:1.5px solid var(--ink); border-radius:20px; padding:5px 11px; }
.pip.good{ background:var(--good); color:#fff; border-color:var(--good); }
.pip.miss{ background:transparent; color:var(--brick); border-color:var(--brick); }
.best-tag{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em; font-size:13px;
           color:var(--post-deep); margin-bottom:18px; min-height:1em; }

/* ---- leaderboard / scoreboard ---- */
.board{ border:var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.board .head{ background:var(--ink); color:var(--chalk); display:flex; justify-content:space-between; align-items:center;
              gap:12px; padding:12px 16px; }
.board .head h3{ margin:0; font-family:var(--font-display); font-weight:900; font-size:20px; }
.board .head .live{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em; font-size:11px;
                    color:var(--post); display:flex; align-items:center; gap:7px; }
.board .head .live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--post);
                            box-shadow:0 0 0 0 var(--post); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(245,197,66,.6);} 70%{box-shadow:0 0 0 7px rgba(245,197,66,0);}
                  100%{box-shadow:0 0 0 0 rgba(245,197,66,0);} }
.row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; padding:11px 16px;
      border-bottom:1px solid var(--paper-edge); }
.row:last-child{ border-bottom:0; }
.row .rank{ font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--ink-soft);
            text-align:center; font-variant-numeric:tabular-nums; }
.row .who .nm{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.1; }
.row .who .nk{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--brick); }
.row .sc{ font-family:var(--font-display); font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; }
.row.me{ background:#fff7df; }
.row.me .rank, .row.top .rank{ color:var(--post-deep); }
.row.pick1{ background:var(--ink); color:var(--chalk); }
.row.pick1 .rank, .row.pick1 .sc{ color:var(--post); }
.row.pick1 .who .nk{ color:var(--post); }
.row .pickno{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--ink-soft); }
.row.pick1 .pickno{ color:var(--chalk-dim); }
.row .admin-tools{ display:flex; gap:6px; }
.row .admin-tools button{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.08em; font-size:10px;
                          font-weight:700; border:1.5px solid var(--ink); background:transparent; color:var(--ink);
                          border-radius:20px; padding:4px 9px; }
.row .admin-tools button:hover{ background:var(--ink); color:var(--paper); }
.board .empty{ padding:28px 16px; text-align:center; color:var(--ink-soft); font-style:italic; }

/* Rows fly in one at a time during the commissioner's reveal. */
.row.revealing{ animation:dropin .42s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes dropin{ from{ transform:translateY(-14px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- share row ---- */
.share{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px; justify-content:center; }
.locked{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--ink-soft); }
.locked b{ color:var(--good); }

/* ---- commissioner console ---- */
.console-note{ background:#241f10; color:var(--chalk-dim); border:1px solid #4a431f; border-radius:var(--radius);
               padding:12px 16px; font-family:var(--font-util); text-transform:uppercase; letter-spacing:.08em;
               font-size:12.5px; margin-bottom:16px; }
.console-note b{ color:var(--post); }
.section-title{ color:var(--chalk); font-family:var(--font-display); font-weight:900; font-size:clamp(24px,4vw,36px); margin:0 0 4px; }
.section-sub{ color:var(--chalk-dim); font-family:var(--font-body); font-style:italic; margin:0 0 20px; }
.admin-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }

/* ============================ KEEPER PICK ============================ */
.keeper-group{ margin-bottom:20px; }
.keeper-group h2{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.16em;
                  font-size:13px; font-weight:700; color:var(--post); margin:0 0 9px;
                  display:flex; align-items:baseline; gap:10px; }
.keeper-group h2 span{ color:var(--chalk-dim); font-weight:500; letter-spacing:.1em; font-size:11.5px; }

.keeper-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; }

/* Each card is a real radio input so the whole group is keyboard and screen-reader
   navigable; the input itself is hidden and the label carries the styling. */
.keeper-card{ position:relative; display:block; background:var(--paper); border:2px solid var(--ink);
              border-radius:var(--radius); padding:12px 13px; cursor:pointer;
              transition:transform .12s, box-shadow .12s, border-color .12s; }
.keeper-card:hover{ transform:translateY(-2px); box-shadow:4px 5px 0 var(--pitch-deep); }
.keeper-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.keeper-card .nm{ font-family:var(--font-display); font-weight:900; font-size:17px; line-height:1.15; }
.keeper-card .meta{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
                    font-size:11px; color:var(--ink-soft); margin-top:4px; }
.keeper-card .tick{ position:absolute; top:9px; right:10px; font-size:15px; opacity:0; color:var(--post-deep); }
/* Where he went in last year's draft — the main thing you weigh when keeping. */
.keeper-card .draft{ display:inline-block; margin-top:9px; font-family:var(--font-util);
                     text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; font-weight:700;
                     background:var(--ink); color:var(--post); border-radius:20px; padding:3px 10px; }
.keeper-card .draft.undrafted{ background:transparent; color:var(--brick);
                               border:1.5px solid var(--brick); padding:2px 9px; }
.keeper-card:has(input:checked){ border-color:var(--post-deep); background:#fff7df;
                                 box-shadow:4px 5px 0 var(--post-deep); }
.keeper-card:has(input:checked) .tick{ opacity:1; }
.keeper-card:has(input:focus-visible){ outline:3px solid var(--post); outline-offset:3px; }
.keeper-card.is-current{ border-color:var(--good); }

/* First-rounders can't be kept — shown, but plainly out of reach rather than
   hidden, so nobody wonders where their best player went. */
.keeper-card.is-locked{ cursor:not-allowed; opacity:.62; border-style:dashed;
                        background:repeating-linear-gradient(45deg,#efe7d5 0 9px,#f4eddd 9px 18px); }
.keeper-card.is-locked:hover{ transform:none; box-shadow:none; }
.keeper-card .draft.locked{ background:transparent; color:var(--ink-soft);
                            border:1.5px solid var(--ink-soft); padding:2px 9px; }

/* Sticky confirm bar */
.keeper-bar{ position:sticky; bottom:0; z-index:30; display:flex; align-items:center; gap:14px;
             justify-content:space-between; flex-wrap:wrap;
             background:var(--ink); border:2px solid var(--post); border-radius:var(--radius);
             padding:12px 16px; margin-top:16px; }
.keeper-bar span{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.1em;
                  font-size:13px; color:var(--chalk); }
.keeper-bar span b{ color:var(--post); }

.keeper-current{ border-top:2px solid var(--paper-edge); margin-top:14px; padding-top:12px;
                 display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.keeper-current .t{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.12em;
                    font-size:11px; color:var(--ink-soft); }
.keeper-current .who{ font-family:var(--font-display); font-weight:900; font-size:22px; flex:1; }

/* A button that reads as a link — used for low-emphasis actions on dark ground. */
.linkish{ background:none; border:0; padding:0; font:inherit; color:var(--post);
          text-decoration:underline; cursor:pointer; }

/* ---- notices ---- */
.notice{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.08em; font-size:13px;
         padding:10px 14px; border-radius:var(--radius); margin-top:12px; display:none; }
.notice.is-shown{ display:block; }
.notice.err{ background:rgba(191,74,59,.14); border:1.5px solid var(--brick); color:var(--brick); }
.notice.ok{ background:rgba(63,155,109,.14); border:1.5px solid var(--good); color:#26694a; }

/* ============================ FOOTER ============================ */
.foot{ background:var(--pitch-deep); color:var(--chalk-dim); text-align:center; padding:26px 16px; }
.foot .plate{ font-family:var(--font-nameplate); font-size:30px; color:var(--chalk); }
.foot .colophon{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; margin-top:8px; }
.foot .colophon span{ color:var(--post); }
.foot a{ color:var(--chalk-dim); }
.foot a:hover{ color:var(--post); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:820px){
  .hero .wrap{ grid-template-columns:1fr; }
  .posts{ order:-1; max-width:180px; margin-inline:auto; }
  .papers, .archive-grid{ grid-template-columns:1fr 1fr; }
  .roster{ grid-template-columns:1fr 1fr; }
  .archive .lead-card{ grid-template-columns:1fr; text-align:center; }
}
@media (max-width:560px){
  .earbar .ear-left, .earbar .ear-right{ display:none; }
  .papers, .roster, .archive-grid{ grid-template-columns:1fr; }
  .nav .wrap{ flex-wrap:wrap; gap:0 22px; }
  .hud .cell{ min-width:33%; flex:1 1 33%; }
  .row{ grid-template-columns:40px 1fr auto; gap:8px; padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .ticker .track{ animation:none; }
  .btn:hover, .paper-card:hover{ transform:none; }
  .board .head .live::before, .pitch .windfx i{ animation:none; }
  .stamp, .row.revealing{ animation:none; }
}