/* ==========================================================================
   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); }

/* ============================ ACCOUNT MENU ============================ */
/* The avatar sits in the top-right of both header styles. */
.acct{ position:relative; display:flex; align-items:center; }
/* On the newspaper header the nav links are centred, so the avatar is positioned
   out of flow — otherwise adding it shunts every link off-centre. */
.nav .wrap{ position:relative; }
.nav .acct{ position:absolute; right:clamp(16px,4vw,28px); top:50%; transform:translateY(-50%); }

.acct-btn{ display:flex; align-items:center; justify-content:center; padding:0;
           background:none; border:0; border-radius:50%; cursor:pointer; line-height:0; }
.acct-btn:focus-visible{ outline:3px solid var(--post); outline-offset:3px; }

.acct-avatar{ display:flex; align-items:center; justify-content:center;
              width:34px; height:34px; border-radius:50%; object-fit:cover;
              border:2px solid var(--post); background:var(--pitch-deep);
              color:var(--post); font-family:var(--font-util); font-weight:700;
              font-size:13px; letter-spacing:.04em; }
.acct-avatar-out{ border-style:dashed; color:var(--chalk-dim); font-size:16px; }
.acct:hover .acct-avatar{ border-color:var(--chalk); }

.acct-menu{ position:absolute; top:calc(100% + 10px); right:0; z-index:60;
            min-width:250px; background:var(--paper); border:var(--rule);
            border-radius:var(--radius); box-shadow:6px 8px 0 rgba(0,0,0,.35);
            padding:6px; }
.acct-head{ padding:10px 12px 9px; border-bottom:1.5px solid var(--paper-edge); margin-bottom:5px; }
.acct-name{ font-family:var(--font-display); font-weight:900; font-size:17px; line-height:1.15; }
.acct-sub{ font-family:var(--font-util); text-transform:uppercase; letter-spacing:.06em;
           font-size:11px; color:var(--ink-soft); margin-top:3px; word-break:break-word; }

/* Scoped under .acct-menu on purpose, not bare .acct-item.
   The menu is mounted INSIDE the page nav, so `.nav a` and `.topnav nav a` —
   both (0,1,1) — outrank a bare `.acct-item` (0,1,0) and were painting every
   link chalk-white on cream, and inflating it with the nav's 14px padding.
   Sign out escaped only because it is a <button>, which is what made the bug
   so legible: every link invisible, one button fine.
   These selectors are (0,2,0)/(0,2,1) and explicitly restate every property the
   nav sets, so the menu cannot inherit its way back into a mess. */
.acct-menu .acct-item{
  display:block; width:100%; text-align:left; background:none;
  border:0; border-bottom:0;
  padding:9px 12px; margin:0; border-radius:var(--radius); text-decoration:none;
  color:var(--ink); font-family:var(--font-util); text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; font-size:13px; line-height:1.25; cursor:pointer;
}
.acct-menu .acct-item:hover{ background:var(--ink); color:var(--paper); border-bottom-color:transparent; }
.acct-menu .acct-item:focus-visible{ outline:3px solid var(--post); outline-offset:-3px; }
.acct-menu .acct-commish{ color:var(--brick); }
.acct-menu .acct-commish:hover{ background:var(--brick); color:var(--paper); }
.acct-menu .acct-signout{ border-top:1.5px solid var(--paper-edge); margin-top:5px; border-radius:0; }
.acct-signin{ padding:8px 10px 10px; display:flex; justify-content:center; }

@media (max-width:560px){
  .acct-menu{ position:fixed; left:12px; right:12px; top:auto; min-width:0; }
}

/* ============================ 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; }
}