/* ================= WAIVER — SERIES DESIGN SYSTEM =================
   Direction-04 "Xbox Series" — locked by league vote (design-directions/
   SERIES-PROPAGATION.md; the law is FINAL DESIGN DIRECTION/WAIVER UI 04.html).

   Dark console grounds (#0F1115 / #080A0D), grey surfaces (#191B1F / #22252B /
   #2C3037), white/dim/faint text, and ONE accent: the literal Xbox green run
   (#107C10 / #16A916 / #3CDC3C). Amber #E0A535 is reserved for the AI GM /
   premium moments. Fonts: Inter for UI, Saira Condensed for uppercase
   labels/tabs/buttons, JetBrains Mono for clocks, stats and codes (loaded via
   the Google Fonts link in index.html).

   Every selector from the Liquid Turf sheet is kept — the JS builds markup by
   these class names. Only VALUES changed.

   Contrast discipline (checked against --surface #191B1F, the worst panel):
     #FFFFFF on #191B1F 16.9:1 · #9EA4AC 7.4:1 · #5A5F66 3.1:1 (labels ≥18px or
     decoration only) · #3CDC3C 9.5:1 · white on #107C10 5.0:1 · #080A0D on
     #3CDC3C 11.6:1 · white on the 7 position fills unchanged (all ≥5.09:1).

   The 7 position colours and the foil.js club colours are KEPT verbatim —
   league voters called them out as a feature. */
:root {
  /* ---- SERIES accent (the only accent) ---- */
  --teal:   #107C10;      /* xbg — brand green */
  --teal-2: #16A916;      /* xbg-bright */
  --aqua:   #3CDC3C;      /* xbg-glow */
  --lime:   #3CDC3C;
  --spring: #16A916;
  --green:  #107C10;
  --signal: #E0A535;      /* amber — premium / AI GM */
  --signal-deep: #0A4D0A; /* xbg-deep */

  /* ---- ground ---- */
  --bg: #0F1115;
  --bg2: #080A0D;
  /* Frosted panel — blurred dark, the SERIES rail/deck surface. */
  --card: rgba(25, 27, 31, 0.92);
  /* Opaque twin. Sticky table headers, dropdown menus and metric tiles MUST use
     this -- rows scrolling under a translucent sticky header show through it. */
  --card-solid: #191B1F;
  --glass: blur(20px);

  /* ---- ink (light on dark now) ---- */
  --ink: #FFFFFF;
  --ink-2: #9EA4AC;
  --line: rgba(255, 255, 255, 0.08);
  --line-cool: rgba(255, 255, 255, 0.18);

  /* ---- interactive ---- */
  --accent: #107C10;      /* fills · white label 5.0:1 */
  --accent-2: #16A916;    /* gradient end / hover */
  --accent-ink: #0A4D0A;  /* pressed */
  --lime-ink: #3CDC3C;    /* glow green as text · 9.5:1 on surface */
  --amber: #E0A535;       /* premium · carries DARK #1A0F02 labels (8.0:1) */

  /* ---- surfaces (the old bright-pop set, now SERIES greys/greens) ---- */
  --pop: #22252B;         /* surface-2 */
  --pop-2: #2C3037;       /* surface-3 */
  --pop-teal: #107C10;    /* green fill · white label 5.0:1 */
  --pop-soft: #22252B;    /* chip / rail ground */
  --pop-line: rgba(60, 220, 60, 0.28); /* hairline-green */
  --ink-pop: #9EA4AC;     /* secondary copy on a surface fill */
  --amber-deep: #E0A535;  /* amber that reads on dark · 8.4:1 on bg */

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 10px 34px rgba(0, 0, 0, 0.30);
  --glow: 0 0 0 1px rgba(60, 220, 60, 0.28), 0 0 20px rgba(16, 124, 16, 0.25);
  --radius: 4px;

  /* ---- fonts ---- */
  --font-ui: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-tab: "Saira Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- positions ----
     KEPT EXACTLY. Seven chips, white label on each, all ≥5.09:1.
     Mirrored in POS_COLORS at app.js -- change both or neither. */
  --pos-QB:  #c11a0b;
  --pos-RB:  #0a6b3d;
  --pos-WR:  #0f53a6;
  --pos-TE:  #a85a00;
  --pos-K:   #7a6a00;
  --pos-DEF: #525a5e;
  --pos-FLEX:#6b5540;
  --win: #3CDC3C;         /* glow green as text on dark · 9.5:1 */
  --lose: #FF6B5A;        /* red as TEXT on dark · 7.0:1 (fills use #A84A3F) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  /* The fallback the whole background story rests on. waiver-bg.js paints a canvas
     over this; with no WebGL, or with the CDN unreachable, this is what ships, and
     the page is still a SERIES page. Never make this a flat colour. */
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(16, 124, 16, 0.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(60, 220, 60, 0.05), transparent 65%),
    radial-gradient(700px 700px at 50% 50%, rgba(255, 255, 255, 0.012), transparent 70%),
    linear-gradient(180deg, #0F1115 0%, #080A0D 100%);
  background-attachment: fixed;
  background-color: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- SERIES surface layer ----------
   The blurred dark shells. Only the OUTERMOST surfaces get a backdrop-filter: a
   full-screen shader under a dozen stacked blur layers is how you turn a gradient
   into a fan. Everything nested inside these uses a solid colour. */
.panel, .header, .last-card, .ticker, .sea-tabs, .team-card, .mvs, .set-card,
.chat-feed, .chat-composer, .dm-panel, .ai-panel, .cw-summary,
.lock-box, .lgm-card, .set-commish, .sea-header, .app-foot, .league-hub {
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
}

/* Boot fade. Panels rise into place once, staggered, and then rest -- no loops. */
@keyframes hk-rise { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
.panel, .team-card, .mvs, .set-card, .sea-tabs, .last-card, .ticker, .cw-summary {
  animation: hk-rise .5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.layout .col:nth-child(2) .panel { animation-delay: .05s; }
.layout .col:nth-child(3) .panel { animation-delay: .1s; }
.set-grid .set-card:nth-child(2) { animation-delay: .05s; }
.set-grid .set-card:nth-child(3) { animation-delay: .1s; }
.set-grid .set-card:nth-child(4) { animation-delay: .15s; }

/* A light sweep across the primary buttons on hover. One pass, then it rests. */
@keyframes hk-sweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
.enter-btn, .pp-btn, .draftbtn, .cw-btn.primary, .sea-chip, .modal-cta button {
  position: relative; overflow: hidden;
}
.enter-btn::after, .pp-btn::after, .draftbtn::after, .cw-btn.primary::after,
.sea-chip::after, .modal-cta button::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;   /* the sweep is decoration: it must never swallow the click */
}
.enter-btn:hover::after, .pp-btn:hover::after, .draftbtn:hover:not(:disabled)::after,
.cw-btn.primary:hover::after, .sea-chip:hover::after, .modal-cta button:hover:not(:disabled)::after {
  animation: hk-sweep .62s ease-out;
}

/* Everything above collapses for anyone who asked for less motion. The shader
   makes the same promise in waiver-bg.js: one frame, then silence. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
.cond { font-family: var(--font-tab); font-stretch: normal; letter-spacing: 0.06em; }
.italic-head { font-style: normal; font-weight: 700; letter-spacing: 0.04em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
select, input { font-family: inherit; font-size: 13px; }
[hidden] { display: none !important; }

/* Dark scrollbars — SERIES signature */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb { background: rgba(60,220,60,0.30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(60,220,60,0.50); }

/* ---------- Header ---------- */
.app { max-width: 1560px; margin: 0 auto; padding: 12px; }
.header {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 16px; padding: 12px 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.brand .logo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: contain;
  background: var(--card-solid); border: 1px solid var(--line-cool);
  box-shadow: 0 0 14px rgba(16, 124, 16, 0.45);
}
.brand h1 { font-family: var(--font-tab); font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: .06em; }
.brand .sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }

.clock { margin: 0 auto; text-align: center; min-width: 220px; }
.clock .time {
  font-family: var(--font-mono);
  font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--lime-ink); text-shadow: 0 0 18px rgba(60, 220, 60, 0.55);
  transition: color .2s, transform .2s;
}
.clock.warn .time { color: var(--amber); text-shadow: 0 0 18px rgba(224, 165, 53, 0.5); }
.clock.danger .time { color: var(--lose); text-shadow: 0 0 18px rgba(255, 107, 90, 0.5); animation: pulse .6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.clock .status { font-family: var(--font-tab); font-size: 12px; color: var(--ink-2); margin-top: 3px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; }
.clock .status b { color: var(--lime-ink); }

.header-actions { display: flex; gap: 8px; align-items: center; }
.iconbtn {
  width: 34px; height: 34px; border-radius: var(--radius); background: var(--pop-soft);
  border: 1px solid var(--line); color: var(--ink-2);
  display: grid; place-items: center; font-size: 15px; transition: background .15s, color .15s, border-color .15s;
}
.iconbtn:hover { background: var(--pop-2); border-color: var(--line-cool); color: var(--ink); }
.iconbtn.premium { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 12px; }
.iconbtn.on { background: var(--accent); border-color: var(--pop-line); color: #fff; box-shadow: 0 0 12px rgba(16,124,16,.4); }
.menu-toggle { display: none; }
.enter-btn {
  padding: 10px 18px; border-radius: 2px; font-family: var(--font-tab); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--accent); white-space: nowrap;
  box-shadow: 0 0 20px rgba(16, 124, 16, 0.35);
  transition: background .18s, box-shadow .18s;
}
.enter-btn:hover { background: var(--accent-2); box-shadow: 0 0 28px rgba(60, 220, 60, 0.45); }

/* ---------- Ticker ---------- */
.ticker-row { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.last-card {
  background: linear-gradient(90deg, rgba(16,124,16,0.18) 0%, var(--card-solid) 100%);
  border: 1px solid var(--pop-line); border-left: 3px solid var(--aqua);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 12px;
  min-width: 190px; display: flex; flex-direction: column; justify-content: center;
}
.last-card .lbl { font-family: var(--font-tab); font-size: 10px; color: var(--lime-ink); text-transform: uppercase; font-weight: 700; letter-spacing: .22em; }
.last-card .pl { font-family: var(--font-tab); font-size: 14px; font-weight: 600; margin-top: 2px; letter-spacing: .02em; }
.last-card .by { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.ticker { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.ticker-track::-webkit-scrollbar { display: none; }
/* No opacity on this chip (see the old sheet's contrast-audit note — still true
   on dark). The chip recedes by being a plain surface; the active one lights green. */
.tk { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 2px; background: var(--pop-soft); border: 1px solid var(--line); flex: 0 0 auto; transition: all .2s; }
.tk.active { background: rgba(16,124,16,0.16); border-color: var(--aqua); box-shadow: 0 0 12px rgba(16,124,16,0.20); }
.tk.you { font-weight: 700; }
.tk .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.tk .nm { font-family: var(--font-tab); font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.tk .pk { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); letter-spacing: .06em; }
.tk-note { display: flex; align-items: center; min-height: 34px; padding: 0 6px; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 290px; gap: 12px; margin-top: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 14px; }

/* The AI GM promo — the system's "gate" glow surface. */
.promo { border-radius: var(--radius); padding: 14px; color: var(--ink);
  background: linear-gradient(135deg, rgba(16,124,16,0.30) 0%, rgba(10,77,10,0.6) 100%);
  border: 1px solid var(--aqua); box-shadow: 0 0 20px rgba(16,124,16,0.20);
  position: relative; overflow: hidden; }
.promo h3 { font-family: var(--font-tab); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--lime-ink); }
.promo p { font-size: 11px; color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.5; }
.promo .sub-pill { position: absolute; top: 12px; right: 12px; background: var(--aqua); color: var(--bg2); padding: 4px 12px; border-radius: 2px;
  font-family: var(--font-tab); font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  box-shadow: 0 0 12px rgba(60,220,60,0.4); }

.seg { display: flex; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 0; }
.seg button { flex: 1; padding: 10px 0 8px; border-radius: 0; font-family: var(--font-tab); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 3px solid transparent; transition: all .18s; }
.seg button.on { background: linear-gradient(180deg, rgba(16,124,16,0.14) 0%, transparent 100%); color: var(--ink); font-weight: 700; border-bottom-color: var(--aqua); box-shadow: none; }

.empty { text-align: center; padding: 26px 14px; color: var(--ink-2); }
.empty .star { font-size: 40px; color: var(--lime-ink); text-shadow: 0 0 16px rgba(16,124,16,.35); }
.empty p { font-size: 12px; margin-top: 8px; }
.empty .hint { font-size: 11px; color: var(--ink-2); margin-top: 4px; }

.autodraft-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 2px; }
.autodraft-row .note { font-size: 11px; color: var(--ink-2); }
.toggle { padding: 7px 14px; border-radius: 2px; background: var(--pop-soft); border: 1px solid var(--line-cool);
  font-family: var(--font-tab); font-weight: 700; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-2); }
.toggle.on { background: var(--accent); border-color: var(--aqua); color: #fff; box-shadow: 0 0 12px rgba(16,124,16,.35); }

.feed-item { display: flex; gap: 9px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: none; }
.feed-item .num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); font-weight: 700; width: 34px; }
.feed-item .who { font-size: 11px; color: var(--ink-2); }
.feed-item .pl { font-size: 12px; font-weight: 700; }
.sysmsg { font-size: 11px; color: var(--ink-2); font-style: italic; padding: 6px 4px; text-align: center; }

.queue-item { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.queue-item .rank { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); width: 20px; }
.queue-item .g { flex: 1; min-width: 0; }
.queue-item .g .n { font-size: 12px; font-weight: 700; margin-bottom: 3px; line-height: 1.25; }
.queue-item .g .m { font-size: 11px; color: var(--ink-2); line-height: 1.3; }

.queue-turnbar { background: linear-gradient(90deg, rgba(16,124,16,0.30), rgba(10,77,10,0.55)); color: var(--lime-ink);
  font-family: var(--font-tab); font-weight: 700; text-align: center; padding: 9px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .16em; border-bottom: 1px solid var(--pop-line); }

.queue-item.on-deck { border-left: 3px solid var(--amber); background: rgba(224, 165, 53, 0.08); padding: 12px 6px 12px 9px; }

.pick-tag { display: inline-block; margin-bottom: 5px; padding: 2px 8px; border-radius: 2px; background: var(--amber); color: #1A0F02;
  font-family: var(--font-tab); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }

.qdraft { padding: 7px 12px; font-size: 11px; flex: 0 0 auto; }

/* ---------- Tabs — 3px green underline, SERIES signature ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 4px 8px 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 12px 18px 10px; font-family: var(--font-tab); font-size: 14px; font-weight: 600; color: var(--ink-2);
  position: relative; white-space: nowrap; text-transform: uppercase; letter-spacing: .14em; transition: color .18s; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 700;
  background: linear-gradient(180deg, rgba(16,124,16,0.16) 0%, transparent 100%);
  text-shadow: 0 0 12px rgba(60,220,60,0.35); }
.tab .ul { position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 0; background: var(--aqua); transform: scaleX(0); transition: transform .25s; box-shadow: 0 0 8px rgba(60,220,60,.5); }
.tab.on .ul { transform: scaleX(1); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.toolbar input[type=text] { flex: 1; min-width: 140px; padding: 9px 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink); outline: none; transition: border-color .18s; }
.toolbar input[type=text]:focus { border-color: var(--pop-line); }
.toolbar input[type=text]::placeholder { color: #5A5F66; }
.toolbar select { padding: 8px 10px; border-radius: 2px; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink);
  font-family: var(--font-tab); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* NFL / College player-pool toggle on the PLAYERS tab. A segmented control that
   sits full-width on its own row above the search + filters. */
.wpool { display: flex; flex: 1 1 100%; border: 1px solid var(--line); border-radius: 2px; background: var(--card-solid); overflow: hidden; }
.wpool-seg { flex: 1; padding: 9px 0; font-family: var(--font-tab); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: none; cursor: pointer; transition: background .15s, color .15s; }
.wpool-seg.on { background: var(--accent); color: #fff; font-weight: 700; }
.wpool-seg:not(.on):hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.check { display: flex; align-items: center; gap: 6px; font-family: var(--font-tab); font-size: 12px; color: var(--ink-2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }
th, td { padding: 9px 10px; text-align: right; }
th { color: var(--ink-2); font-family: var(--font-tab); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .18em;
  position: sticky; top: 0; background: #22252B; border-bottom: 1px solid var(--line-cool); z-index: 2; cursor: pointer; user-select: none; }
th.l, td.l { text-align: left; }
td { border-bottom: 1px solid rgba(255,255,255,0.05); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
td.l { font-family: var(--font-ui); color: var(--ink); }
tr.prow { cursor: pointer; transition: background .1s; }
tr.prow:hover { background: rgba(16,124,16,0.07); }
tr.drafted-row { opacity: .38; }
.sticky-name { position: sticky; left: 0; background: var(--card-solid); z-index: 1; }
tr.prow:hover .sticky-name { background: #1C231C; }
.pcell { display: flex; align-items: center; gap: 9px; }
/* The initials chip. Kept moulded — gloss on top, shadow under — in the player's
   CLUB colour (headEl picks the label colour for contrast; foil.js colours kept).
   Decoration, not a control: no cursor, no hover, and it never takes a pointer. */
.head { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px;
  letter-spacing: .02em; pointer-events: none; user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow:
    0 .05em .05em -.01em rgba(0,0,0,.85),
    .06em .16em .12em -.02em rgba(0,0,0,.3),
    0 0 0 .04em rgba(255,255,255,.22) inset,
    .03em .05em .1em 0 rgba(255,255,255,.55) inset,
    -.04em -.12em .18em .04em rgba(0,0,0,.32) inset; }
/* the wet highlight across the top of the sphere */
.head::after { content: ""; position: absolute; left: 14%; right: 14%; top: 7%; height: 34%;
  border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  opacity: .7; }
/* Player headshot (or DEF team logo) on the team-colour circle. Rendered only
   when the player HAS an image, so there are no initials behind it; onerror
   removes a failed/absent image, leaving the bare team-colour circle. */
.head-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; }
.head-img.logo { object-fit: contain; padding: 2px; }
.pcell .nm { font-family: var(--font-tab); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.pcell .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
/* The hollow star. Faint until you want it; starred stays amber (premium tell). */
.starbtn { font-size: 16px; color: #767C84; transition: transform .15s, color .15s, text-shadow .15s; } /* 4.6:1 on surface */
.starbtn:hover { color: var(--lime-ink); text-shadow: 0 0 8px rgba(60,220,60,.6); }
.starbtn.on { color: var(--amber); }
.starbtn:active { transform: scale(1.4); }

/* Position pill. The COLOUR stays the position's own (kept exactly): those seven
   are tuned so a white label clears AA on each, and they are how a manager reads
   the board at a glance. The moulded surface stays; it reads fine on dark. */
.badge { position: relative; display: inline-block; padding: 4px 9px; border-radius: 2px;
  font-family: var(--font-tab); font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none; user-select: none; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow:
    0 .05em .05em -.01em rgba(0,0,0,.8),
    .05em .14em .1em -.02em rgba(0,0,0,.28),
    0 0 0 .04em rgba(255,255,255,.2) inset,
    .03em .05em .09em 0 rgba(255,255,255,.4) inset,
    -.04em -.1em .16em .03em rgba(0,0,0,.3) inset; }
.badge::after { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; height: 36%;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); opacity: .7; }

/* Superflex only: badge() emits "SUPER<br>FLEX" with this extra class. Center
   the shorter FLEX line under SUPER and keep line-height tight so the pill
   stays the same rough height as every one-line pill beside it -- the base
   .badge rule sets no line-height, so two lines would otherwise use the
   browser default and visibly balloon. The chip COLOR is untouched: badge()
   still keys it off the unmodified "Q/W/R/T" string. */
.badge-2l { text-align: center; line-height: 1.05; }

/* turn banner ⇐ direction-04 mock hero, verbatim treatment */
.turn-banner {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(16,124,16,0.20) 0%, rgba(16,124,16,0.05) 50%, rgba(0,0,0,0.4) 100%),
    linear-gradient(180deg, #1B2820 0%, #0A1F0A 100%);
  border: 1px solid var(--hairline-strong);
  padding: 16px 24px; border-radius: 2px;
  display: flex; align-items: center; gap: 18px; }
.turn-banner::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background: radial-gradient(circle at 70% 50%, rgba(60,220,60,0.20) 0%, transparent 60%); pointer-events: none; }
.turn-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-tab);
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--xbg-glow); }
.turn-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--xbg-glow); box-shadow: 0 0 10px var(--xbg-glow); animation: heroPulse 1.5s ease-in-out infinite; }
.turn-title { font-family: var(--font-display); font-size: 26px; font-weight: 200; letter-spacing: -.02em;
  color: var(--text); line-height: 1.05; position: relative; z-index: 1; text-transform: none; }
.turn-title strong { font-weight: 700; }
.turn-clock { margin-left: auto; position: relative; z-index: 1; font-family: var(--font-mono);
  font-size: 22px; font-weight: 700; color: var(--xbg-glow); text-shadow: 0 0 16px rgba(60,220,60,0.5); }

/* Draft: the SERIES primary action — glow green with a dark label, sharp corners. */
.draftbtn { position: relative; padding: 7px 16px; border-radius: 2px;
  background: var(--aqua);
  color: var(--bg2); font-family: var(--font-tab); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, transform 140ms ease;
  box-shadow: 0 0 12px rgba(60, 220, 60, 0.4); }
.draftbtn::before { display: none; }
.draftbtn::after { display: none; }          /* no shimmer sweep on the primary action */
.draftbtn:hover:not(:disabled) { background: #5BE85B; box-shadow: 0 0 20px rgba(60, 220, 60, 0.6); }
.draftbtn:active:not(:disabled) { transform: scale(.97); }
.draftbtn:disabled { background: var(--pop-2); color: #9EA4AC; cursor: not-allowed;
  text-shadow: none; box-shadow: none; } /* 6.0:1 */
.draftbtn:disabled::before { display: none; }
.owned-tag { margin-left: 10px; padding: 7px 12px; border-radius: 2px; background: var(--pop-2); color: var(--ink-2);
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Draft-room toast (app.js draftNote). Sits ABOVE the board and BELOW the player
   card. pointer-events: none is load-bearing — a toast that swallowed a tap would
   recreate the exact failure it exists to report. Achievement-toast language:
   dark blurred card, green edge, glow. Label 9.5:1. */
.draft-note {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  z-index: 95; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 2px;
  background: rgba(25, 27, 31, 0.96);
  border: 1px solid var(--aqua); border-left: 6px solid var(--aqua);
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 14px rgba(16,124,16,.30);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.4;
  text-align: center;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.draft-note.show { opacity: 1; transform: translate(-50%, 0); }

/* Board */
.board-scroll { overflow-x: auto; padding: 4px; }
.board { border-collapse: separate; border-spacing: 4px; }
.board th { position: static; background: none; border: none; padding: 4px; }
.board .mgr-h { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px; }
.board .mgr-h .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.board .mgr-h .nm { font-family: var(--font-tab); font-size: 10px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; color: var(--ink); }
.board .rnd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); font-weight: 700; padding-right: 6px; }
.cell { width: 92px; height: 46px; border-radius: 2px; padding: 5px 6px; background: var(--pop-soft); color: #fff; overflow: hidden;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
.cell:hover { transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(60,220,60,.2); }
.cell.empty { background: var(--pop-soft); color: #9EA4AC; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; }
.cell .cn { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .cm { font-size: 9px; opacity: .9; }
.cell .cp { font-size: 9px; opacity: .8; }

.subtabs { display: flex; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; }
.subtab { padding: 7px 13px; border-radius: 2px; font-family: var(--font-tab); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase; color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); }
.subtab.on { background: var(--accent); border-color: var(--pop-line); color: #fff; box-shadow: 0 0 12px rgba(16,124,16,.3); }

.rslot { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 2px; background: var(--pop-soft); border: 1px solid transparent; margin-bottom: 7px; transition: border-color .18s; }
.rslot:hover { border-color: var(--line-cool); }
.rslot .pos { width: 44px; text-align: center; flex: 0 0 auto; }
.rslot .g { flex: 1; min-width: 0; }
.rslot .g .n { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rslot .g .m { font-size: 10px; color: var(--ink-2); }
.rslot .pts { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--lime-ink); }
.rslot.empty-slot { background: transparent; border: 1px dashed var(--line-cool); }

.grid-heat td, .grid-heat th { text-align: center; padding: 7px 9px; font-size: 12px; }
.heat { border-radius: 2px; padding: 5px 0; font-weight: 700; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 14px; font-size: 11px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

.you-row { background: rgba(16,124,16,0.14) !important; }
.you-row td { font-weight: 700; color: var(--ink); }

.roster-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.roster-head h3 { font-family: var(--font-tab); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.roster-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--lime-ink); font-weight: 700; letter-spacing: .10em; }
.roster-body { padding: 12px; }

/* ---------- Modal ---------- */
/* The scrim drops the page behind the modal — near-black, SERIES depth. */
.modal-back { position: fixed; inset: 0; background: rgba(8, 10, 13, .72); display: grid; place-items: center; z-index: 100; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-back.show { opacity: 1; pointer-events: auto; }
.modal { background: var(--card-solid); border: 1px solid var(--line-cool); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(16px) scale(.98); transition: transform .25s; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(16,124,16,.10); }
.modal-back.show .modal { transform: translateY(0) scale(1); }
/* Gate-glow cap: the hero-card surface with white type on it. */
.modal-hd { background:
    linear-gradient(135deg, rgba(16,124,16,0.28) 0%, rgba(16,124,16,0.06) 50%, rgba(0,0,0,0.4) 100%),
    linear-gradient(180deg, #1B2820 0%, #0A1F0A 100%);
  color: var(--ink); padding: 18px 20px; display: flex; gap: 14px; align-items: center; position: relative; }
.modal-hd .head { width: 54px; height: 54px; font-size: 20px; }
.modal-hd h2 { font-family: var(--font-tab); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.modal-hd .mmeta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 5px; }
.modal-hd .x { position: absolute; top: 14px; right: 16px; font-size: 20px; color: var(--ink-2); }
.modal-hd .mstar { font-size: 22px; color: rgba(255,255,255,.72); }
.modal-hd .mstar.on { color: var(--amber); }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.metric { background: #22252B; padding: 12px; text-align: center; }
.metric .v { font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.metric .k { font-family: var(--font-tab); font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .18em; margin-top: 2px; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-body h4 { font-family: var(--font-tab); font-size: 11px; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 8px; letter-spacing: .18em; }
.stat-compare { width: 100%; font-size: 12px; }
.stat-compare th, .stat-compare td { padding: 7px 6px; }
.outlook { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 12px; }
.outlook .date { font-family: var(--font-tab); font-size: 10px; color: var(--lime-ink); text-transform: uppercase; font-weight: 700; letter-spacing: .18em; margin-bottom: 5px; }
.modal-cta { padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-cta button { width: 100%; padding: 14px; border-radius: 2px; background: var(--aqua); color: var(--bg2);
  font-family: var(--font-tab); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(60,220,60,.4); transition: background .18s; }
.modal-cta button:hover:not(:disabled) { background: #5BE85B; }
.modal-cta button:disabled { background: var(--pop-2); color: #9EA4AC; box-shadow: none; }

.drawer-scrim { display: none; }

/* Keyboard focus. Glow-green ring — reads on every dark surface. */
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 2px; }

/* ================= SEASON (post-draft league) ================= */
/* The season header is the SERIES blurred topbar: near-black glass with the
   green wash coming through, hairline below, white type. */
.sea-header { background: rgba(15, 17, 21, 0.92); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  /* The backdrop-filter on .sea-header and .sea-tabs makes each its own stacking
     context. As siblings with no explicit z-index the later one (.sea-tabs)
     paints on top, so the league-switcher dropdown -- which overflows down out
     of this header -- was covered by the nav. Lift the whole header above the
     nav so the open menu is on top and clickable. */
  position: relative; z-index: 20; }
.sea-header .logo { width: 46px; height: 46px; border-radius: 50%; background: var(--card-solid); border: 1px solid var(--line-cool); padding: 2px; object-fit: contain; box-shadow: 0 0 14px rgba(16,124,16,.45); }
.sea-header .titles h1 { font-family: var(--font-tab); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sea-header .titles .sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.league-switcher { position: relative; }
.lsw-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px; cursor: pointer; font: inherit; color: var(--ink); transition: background .15s, border-color .15s; }
.lsw-btn:hover { background: var(--pop-2); border-color: var(--line-cool); }
.lsw-name { font-family: var(--font-tab); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lsw-caret { font-size: 13px; opacity: 1; color: var(--lime-ink); }
.lsw-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--card-solid); border: 1px solid var(--line-cool); border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.6); min-width: 240px; z-index: 200; overflow: hidden; }
.lsw-item, .lsw-action { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: none; cursor: pointer; font-size: 14px; color: var(--ink); }
.lsw-item:hover, .lsw-action:hover { background: rgba(16,124,16,0.14); }
.lsw-item.current { background: rgba(16,124,16,0.20); font-weight: 700; }
.lsw-badge { margin-left: auto; }
.lsw-sep { height: 1px; background: var(--line); }
.lsw-action { color: var(--lime-ink); font-weight: 600; }
.lsw-empty { padding: 12px 14px; color: var(--ink-2); font-size: 13px; }
.sea-header .spacer { flex: 1; }
.sea-header .wk-pill { display: flex; align-items: center; gap: 8px; background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 5px 8px; }
.sea-header .wk-pill button { width: 28px; height: 28px; border-radius: 2px; background: var(--pop-2); color: var(--ink); font-size: 15px; display: grid; place-items: center; transition: background .15s; }
.sea-header .wk-pill button:hover { background: #3A3F47; }
.sea-header .wk-pill .wk { font-family: var(--font-tab); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; min-width: 92px; text-align: center; }
.sea-header .wk-pill .wk small { display: block; font-family: var(--font-mono); font-size: 8px; color: var(--ink-2); font-weight: 500; text-transform: uppercase; letter-spacing: .10em; }
.sea-back { padding: 8px 14px; border-radius: 2px; background: var(--pop-soft); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-tab); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: all .18s; }
.sea-back:hover { background: var(--pop-2); border-color: var(--line-cool); }

.sea-tabs { display: flex; gap: 4px; margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
.sea-tabs::-webkit-scrollbar { display: none; }
.sea-tab { flex: 1; min-width: 96px; padding: 13px 12px 10px; border-radius: 0; font-family: var(--font-tab); font-weight: 600; font-size: 14px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; border-bottom: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.sea-tab:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
/* Four tabs at a 96px floor need 406px, so on a phone the last one ("League")
   was cut off the right edge. Drop the floor and let flex share the width. */
@media (max-width: 560px) {
  .sea-tab { min-width: 0; padding: 12px 4px 9px; font-size: 12px; letter-spacing: .06em; }
}
.sea-tab.on { background: linear-gradient(180deg, rgba(16,124,16,0.16) 0%, transparent 100%); color: var(--ink); font-weight: 700;
  border-bottom-color: var(--aqua); box-shadow: none; text-shadow: 0 0 12px rgba(60,220,60,0.35); }

.sea-body { margin-top: 12px; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }

/* team header card */
.team-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.team-card .av { width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; flex: 0 0 auto; }
.team-card .g { flex: 1; min-width: 0; }
.team-card .g h2 { font-family: var(--font-tab); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.team-card .g .rec { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); font-weight: 500; margin-top: 2px; }
.team-card .proj { text-align: right; }
.team-card .proj .v { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--lime-ink); line-height: 1; text-shadow: 0 0 14px rgba(60,220,60,.35); }
.team-card .proj .k { font-family: var(--font-tab); font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }

.lineup-section-title { font-family: var(--font-tab); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .20em; color: var(--ink-2); padding: 14px 16px 6px; display: flex; justify-content: space-between; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.lrow:hover { background: rgba(16,124,16,0.07); }
.lrow.sel { background: rgba(16,124,16,0.16); box-shadow: inset 3px 0 0 var(--aqua); }
.lrow.swap-ok { background: rgba(60,220,60,0.10); box-shadow: inset 3px 0 0 var(--win); }
.lrow.bye { opacity: .82; }
.lrow .slot { width: 46px; text-align: center; flex: 0 0 auto; }
.lrow .head { width: 34px; height: 34px; }
.lrow .g { flex: 1; min-width: 0; }
.lrow .g .n { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .g .m { font-size: 11px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lrow .pts { text-align: right; flex: 0 0 auto; }
.lrow .pts .v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.lrow .pts .k { font-family: var(--font-tab); font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; }
.tag { font-family: var(--font-tab); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: .10em; }
.tag.bye { background: var(--pop-2); color: var(--ink-2); }
.tag.q { background: #3A2C10; color: #F0C465; }   /* amber pair on dark · 7.6:1 */
.tag.o { background: #3A1B17; color: #FFB4A8; }   /* red pair on dark · 8.5:1 */
.tag.ok { background: #0F3B18; color: #7DE87D; }  /* green pair on dark · 8.3:1 */

.hint-bar { padding: 10px 14px; font-size: 11px; color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; margin: 10px 14px; text-align: center; }

/* matchup */
.mvs { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.mvs-banner { background: linear-gradient(90deg, rgba(16,124,16,0.30), rgba(10,77,10,0.55)); color: var(--lime-ink); text-align: center;
  font-family: var(--font-tab); font-weight: 700; font-size: 12px; padding: 8px; text-transform: uppercase; letter-spacing: .20em;
  border-bottom: 1px solid var(--pop-line); }
.mvs-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px; }
.mvs-team { display: flex; align-items: center; gap: 10px; }
.mvs-team.r { flex-direction: row-reverse; text-align: right; }
.mvs-team .av { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; color: #fff; font-weight: 800; }
.mvs-team .n { font-family: var(--font-tab); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.mvs-team .rec { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); }
.mvs-score { text-align: center; }
.mvs-score .s { font-family: var(--font-mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvs-score .vs { font-family: var(--font-tab); font-size: 11px; color: var(--ink-2); font-weight: 700; letter-spacing: .14em; }
/* The team's projected total under its live/final score, amber like iOS headProj. */
.mvs-score .s-proj { font-family: var(--font-mono); font-size: 11px; color: var(--amber); font-variant-numeric: tabular-nums; }
.mvs-score .win { color: var(--win); text-shadow: 0 0 12px rgba(60,220,60,.4); }
.mvs-score .lose { color: var(--lose); }
.cmp-row { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; }
.cmp-row .side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-row .side.r { flex-direction: row-reverse; text-align: right; }
.cmp-row .side .nm-wrap { display: flex; flex-direction: column; min-width: 0; }
.cmp-row .side.r .nm-wrap { align-items: flex-end; }
.cmp-row .side .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* The box-score line under a starter's name ("217 Pass Yds, 3 TD"). */
.cmp-row .side .stat-line { font-family: var(--font-mono); font-weight: 400; font-size: 9px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Stacked score: live/final actual (white) over the projection (amber). */
.cmp-row .side .pt { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-family: var(--font-mono); font-weight: 700; flex: 0 0 auto; }
.cmp-row .side .pt-act { color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-row .side .pt.muted .pt-act { color: var(--ink-2); }
.cmp-row .side .pt-proj { font-size: 9px; color: var(--amber); font-variant-numeric: tabular-nums; margin-top: 1px; }
.cmp-row .mid { text-align: center; font-family: var(--font-tab); color: var(--ink-2); letter-spacing: .10em; }
.cmp-row.winL .side.l .pt-act, .cmp-row.winR .side.r .pt-act { color: var(--win); }

.mini-matchup { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.mini-matchup .t { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.mini-matchup .t .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-matchup .sc { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 8px; color: var(--ink-2); }

/* standings */
.rank-cell { display: flex; align-items: center; gap: 8px; }
.rank-cell .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; flex: 0 0 auto; }
.clinch { color: var(--win); font-weight: 800; }

/* ================= LEAGUE CHAT / ACTIVITY ================= */
.sea-chip { padding: 8px 14px; border-radius: 2px; background: var(--accent); color: #fff;
  font-family: var(--font-tab); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(16,124,16,.30); transition: background .18s, box-shadow .18s; }
.sea-chip:hover { background: var(--accent-2); box-shadow: 0 0 20px rgba(60,220,60,.4); }
.chat-filter { display: flex; flex-wrap: wrap; gap: 4px; background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 4px; }
.chat-filter button { padding: 6px 12px; border-radius: 2px; font-family: var(--font-tab); font-size: 12px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-2); }
.chat-filter button.on { background: var(--accent); color: #fff; }

.chat-main { display: flex; gap: 12px; margin-top: 12px; height: calc(100vh - 150px); min-height: 380px; }
.chat-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.chat-feed {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.chat-empty { text-align: center; color: var(--ink-2); font-size: 13px; padding: 40px 16px; margin: auto; }

/* DM side panel */
.dm-panel { flex: 0 0 360px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.dm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(16,124,16,0.30) 0%, rgba(10,77,10,0.6) 100%);
  border-bottom: 1px solid var(--pop-line); color: var(--ink); }
.dm-head span { font-family: var(--font-tab); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--lime-ink); }
.dm-close { color: var(--ink-2); font-size: 16px; }
.dm-close:hover { color: var(--ink); }
.dm-rail { display: flex; gap: 8px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.dm-rail::-webkit-scrollbar { display: none; }
.dm-rail .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: 0 0 auto; cursor: pointer; opacity: .55; transition: opacity .15s, box-shadow .15s; }
.dm-rail .av:hover { opacity: .85; }
.dm-rail .av.on { opacity: 1; box-shadow: 0 0 0 3px var(--aqua); }
.dm-activebar { padding: 9px 14px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.dm-activebar b { color: var(--ink); font-family: var(--font-tab); text-transform: uppercase; letter-spacing: .06em; }
.dm-thread { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-msg { max-width: 85%; padding: 8px 11px; border-radius: 2px; font-size: 13px; line-height: 1.4; }
.dm-msg.them { background: var(--pop-2); align-self: flex-start; border-left: 3px solid var(--line-cool); }
.dm-msg.me { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; align-self: flex-end; border-right: 3px solid var(--aqua); }
.dm-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.dm-composer input { flex: 1; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--pop-soft); color: var(--ink); font-size: 13px; outline: none; transition: border-color .18s; }
.dm-composer input:focus { border-color: var(--pop-line); }
.dm-composer input::placeholder { color: #767C84; }
.dm-composer button { padding: 10px 16px; border-radius: 2px; background: var(--accent); color: #fff;
  font-family: var(--font-tab); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dm-composer button:hover { background: var(--accent-2); }
.msg-ava { cursor: pointer; }
.msg-ava:hover { box-shadow: 0 0 0 2px var(--aqua); }
.tx-chip { cursor: pointer; transition: box-shadow .12s; }
.tx-chip:hover { box-shadow: 0 0 0 2px var(--aqua); }

/* player action panel */
.pp-body { flex: 1; overflow-y: auto; padding: 14px; }
.pp-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.pp-hero .head { width: 48px; height: 48px; font-size: 16px; }
.pp-name { font-family: var(--font-tab); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.pp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.pp-status { font-size: 12px; color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 9px 11px; margin: 12px 0; }
.pp-status b { color: var(--ink); }
.pp-status.fa b { color: var(--win); }
.pp-note { font-size: 11px; color: var(--ink-2); margin: 8px 2px; }
.pp-btn { display: block; width: 100%; padding: 12px; border-radius: 2px; background: var(--accent); color: #fff;
  font-family: var(--font-tab); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px;
  box-shadow: 0 0 14px rgba(16,124,16,.25); transition: background .18s; }
.pp-btn:hover { background: var(--accent-2); }
.pp-btn.ghost { background: var(--pop-soft); border: 1px solid var(--line-cool); color: var(--ink-2); box-shadow: none; }
.pp-btn.ghost:hover { background: var(--pop-2); color: var(--ink); }
/* A disabled action is a real state in the season engine: the commissioner
   cannot close a week whose stats have not landed, and the button must look as
   dead as it is instead of taking a click that will only throw. */
.pp-btn:disabled, .pp-btn:disabled:hover { background: var(--pop-2); color: #9EA4AC; cursor: not-allowed; box-shadow: none; }
/* FAB bid box on a waiver claim. Same 2px control radius as .pp-btn. */
.pp-bid { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 2px; background: var(--pop-soft); color: var(--ink); font-family: var(--font-mono); font-size: 14px; }
.pp-bid:focus { outline: none; border-color: var(--pop-line); }
.pp-offer { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 46vh; overflow-y: auto; }
.pp-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font-size: 13px; background: var(--pop-soft); }
.pp-opt:hover { background: rgba(16,124,16,0.12); border-color: var(--pop-line); }
.pp-opt input { flex: 0 0 auto; }
.pp-opt .g { flex: 1; min-width: 0; }
.pp-opt .g .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-opt .g small { color: var(--ink-2); }

/* transaction (system) row */
.tx-row { display: flex; gap: 10px; align-items: flex-start; }
.tx-ava { width: 30px; height: 30px; border-radius: 2px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
/* The Waiver mark, where a transaction row is the app talking rather than a
   person. Same 30px tile, but the artwork carries its own colour, so the accent
   fill is dropped and the tile goes dark like the app icon's own ground. The
   `.tx-ava` rule stays as-is for the poll rows, which are still an emoji on a
   coloured tile. */
.tx-ava-mark { background: var(--card-solid); object-fit: contain; padding: 2px; }
.tx-body { flex: 1; min-width: 0; background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; }
.tx-head { font-size: 11px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.tx-head b { color: var(--lime-ink); font-size: 12px; }
.tx-time { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); }
.tx-txt { font-size: 13px; margin: 3px 0 8px; }
.tx-team { color: var(--lime-ink); cursor: pointer; }
.tx-team:hover { text-decoration: underline; }
.tx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tx-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 2px; padding: 5px 9px 5px 5px; }
.tx-chip .cn { font-size: 12px; font-weight: 700; }
.tx-chip .cm { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); }

/* chat message bubbles */
.msg-row { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.msg-row.me { margin-left: auto; flex-direction: row-reverse; }
.msg-ava { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.msg-bub { background: var(--pop-2); border-radius: 2px; padding: 8px 12px; }
.msg-row.me .msg-bub { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.msg-sender { font-family: var(--font-tab); font-size: 10px; font-weight: 700; color: var(--lime-ink); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .10em; }
.msg-row.me .msg-sender { color: rgba(255,255,255,.85); }
/* pre-line, because a message body can now contain real newlines. The
   week-final announcement is the first one that does: it is one line per
   matchup, and HTML collapses \n to a space, so without this a 12-team
   league's results arrive as a single run-on paragraph. `pre-line` keeps the
   line breaks and still wraps and collapses runs of spaces, which is what a
   chat bubble wants -- `pre` would give it a horizontal scrollbar. */
.msg-txt { font-size: 13px; line-height: 1.4; white-space: pre-line; }

.chat-composer { display: flex; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.chat-composer input { flex: 1; padding: 12px 14px; border-radius: 2px; border: 1px solid var(--line); background: var(--pop-soft); color: var(--ink); font-size: 14px; outline: none; transition: border-color .18s; }
.chat-composer input:focus { border-color: var(--pop-line); }
.chat-composer input::placeholder { color: #767C84; }
.chat-composer button { padding: 12px 22px; border-radius: 2px; background: var(--accent); color: #fff;
  font-family: var(--font-tab); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.chat-composer button:hover { background: var(--accent-2); }

/* ================= DRAFT-DAY COUNTDOWN STICKER ================= */
/* Achievement-toast language now: blurred dark card, green edge, mono countdown. */
.draft-sticker {
  position: fixed; top: auto; left: auto; right: 20px; bottom: 20px; z-index: 80;
  background: rgba(25, 27, 31, 0.96);
  color: var(--ink); border-radius: 2px; padding: 9px 14px; text-align: center; min-width: 156px;
  border: 1px solid var(--aqua); border-left: 6px solid var(--aqua);
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 14px rgba(16,124,16,.30);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transform: none; animation: stickpop .35s ease;
}
@keyframes stickpop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.draft-sticker .ds-top { font-family: var(--font-tab); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--lime-ink); }
.draft-sticker .ds-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 3px 0; letter-spacing: .02em; }
.draft-sticker .ds-num small { font-size: 10px; color: var(--ink-2); font-weight: 700; margin-right: 3px; }
.draft-sticker .ds-date { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); font-weight: 500; letter-spacing: .06em; }
/* On a phone the sticker is fixed to the viewport. Keep it cornered in the
   bottom-right dead space so it never covers content. */
@media (max-width: 700px) {
  .draft-sticker { top: auto; left: auto; right: 8px; bottom: 8px; transform: scale(.85); transform-origin: bottom right; }
  /* It is fixed, so it would now sit on whatever the last row happens to be.
     Reserve its height at the end of the page instead. */
  #seasonRoot { padding-bottom: 96px; }
}

/* ================= RULES & SETTINGS ================= */
.sea-gear { width: 38px; height: 38px; border-radius: 2px; background: var(--pop-soft); border: 1px solid var(--line); color: var(--ink); font-size: 16px; display: grid; place-items: center; flex: 0 0 auto; transition: all .18s; }
.sea-gear:hover { background: var(--pop-2); border-color: var(--line-cool); }
.set-body { margin-top: 12px; }
.set-commish { background: linear-gradient(135deg, rgba(16,124,16,0.30) 0%, rgba(10,77,10,0.6) 100%);
  border: 1px solid var(--aqua); box-shadow: 0 0 20px rgba(16,124,16,0.20);
  color: var(--ink); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.set-commish b { font-family: var(--font-tab); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.cbadge { background: rgba(255,255,255,.14); border: 1px solid var(--line-cool); padding: 3px 10px; border-radius: 2px;
  font-family: var(--font-tab); font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.cnote { font-size: 12px; color: rgba(255,255,255,.78); font-weight: 500; }
/* Secondary badge on the commissioner banner (the league's mode). */
.cbadge.ghost { background: rgba(255,255,255,.08); font-weight: 600; }
.cnote.wide { flex-basis: 100%; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 0 6px; overflow: hidden; }
/* The no-league Create/Join cards: same dark glass, a touch more presence. */
#leagueForms .set-card {
  background: rgba(25, 27, 31, 0.80);
  border: 1px solid var(--line-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.set-card-h { font-family: var(--font-tab); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; padding: 12px 16px 8px; color: var(--ink); border-bottom: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-label { font-size: 13px; color: var(--ink-2); }
.set-val { font-size: 13px; font-weight: 700; text-align: right; }
.set-select, .set-input { font-size: 13px; padding: 7px 9px; border-radius: 2px; border: 1px solid var(--line); background: var(--pop-soft); color: var(--ink); max-width: 190px; outline: none; }
.set-select:focus, .set-input:focus { border-color: var(--pop-line); }
.set-input::placeholder { color: #767C84; }
.set-select { cursor: pointer; }
textarea.set-input { width: 100%; max-width: none; resize: vertical; margin-bottom: 8px; }
.set-create { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 4px; }
.set-create .set-input { max-width: none; }
.set-card .pp-btn { margin: 8px 16px; width: calc(100% - 32px); }
.set-note { font-size: 11px; color: var(--ink-2); padding: 0 16px 12px; }
.invite-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.invite-chip { font-family: var(--font-mono); font-size: 11px; background: var(--pop-soft); border: 1px solid var(--line); color: var(--lime-ink); padding: 4px 9px; border-radius: 2px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; }
.invite-x { color: var(--ink-2); font-size: 11px; line-height: 1; padding: 0 1px; }
.invite-x:hover { color: var(--lose); }
.invite-link { padding: 2px 16px 6px; }
.invite-link .set-input { width: 100%; max-width: 100%; }

/* ---------- Delete account (Settings, last card) ----------
   Red is the only warning colour in the system; it is deliberately the ONLY red
   card on the screen so the danger zone cannot be mistaken for a normal section. */
.set-card.danger { border: 1px solid rgba(200, 74, 74, 0.45); box-shadow: 0 2px 10px rgba(200, 74, 74, .12); }
.set-card.danger .set-card-h { color: var(--lose); border-bottom-color: rgba(200, 74, 74, 0.30); }
.pp-btn.danger { background: #A84A3F; color: #fff; box-shadow: none; } /* white label 5.8:1 */
.pp-btn.danger:hover { background: #8F3B32; }
.pp-btn.danger:disabled { background: #4A2A26; color: #B08A84; cursor: not-allowed; }
.del-warn { font-size: 12px; color: var(--ink); padding: 10px 16px 4px; line-height: 1.45; }
.del-warn b { color: var(--lose); display: block; margin-bottom: 6px; font-size: 13px; }
.del-warn ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.del-warn li { margin-bottom: 4px; }
.del-input { width: calc(100% - 32px); max-width: none; margin: 0 16px 4px; }
.del-err { color: var(--lose); font-weight: 700; }

.poll-actions { display: flex; gap: 8px; margin-top: 4px; }
.poll-btn { padding: 7px 14px; border-radius: 2px; font-family: var(--font-tab); font-weight: 700; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: #fff; }
.poll-btn.yes { background: var(--accent); box-shadow: 0 0 10px rgba(16,124,16,.3); }
.poll-btn.no { background: #A84A3F; }
.poll-btn:hover { filter: brightness(1.12); }

/* ================= CREATE LEAGUE WIZARD ================= */
#createRoot { position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(16,124,16,0.20), transparent 60%),
    linear-gradient(180deg, rgba(15,17,21,.94) 0%, rgba(8,10,13,.96) 100%);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.cw-wrap { max-width: 820px; margin: 0 auto; padding: 34px 20px 120px; }
.cw-step { font-family: var(--font-tab); font-size: 11px; text-align: center; color: var(--lime-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .24em; margin-bottom: 8px; }
.cw-title { text-align: center; font-family: var(--font-tab); font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.cw-sub { text-align: center; color: var(--ink-2); margin-top: 8px; font-weight: 500; font-size: 14px; }
.cw-label { font-family: var(--font-tab); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); margin: 26px 0 10px; }
.cw-sublabel { font-weight: 600; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.cw-input { width: 100%; padding: 14px 16px; border-radius: 2px; border: 1px solid var(--line-cool); background: var(--card-solid); font-size: 16px; color: var(--ink); outline: none; }
.cw-input:focus { border-color: var(--pop-line); }
.cw-input::placeholder { color: #767C84; }
textarea.cw-input { resize: vertical; }
.cw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-card { border: 1px solid var(--line-cool); border-radius: 2px; padding: 16px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; background: var(--card-solid); transition: border-color .15s, background .15s, box-shadow .15s; }
.cw-card:hover { border-color: var(--pop-line); }
.cw-card.on { border-color: var(--aqua); background: rgba(16,124,16,0.14); box-shadow: 0 0 16px rgba(16,124,16,.18); }
.cw-card .ci { font-size: 22px; flex: 0 0 auto; }
.cw-card h4 { font-size: 15px; font-weight: 700; }
.cw-card p { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.cw-card .radio { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-cool); flex: 0 0 auto; display: grid; place-items: center; }
.cw-card.on .radio { border-color: var(--aqua); }
.cw-card.on .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 8px rgba(60,220,60,.6); }
/* .cw-league-card styles removed with the wizard's "copy existing settings"
   branch -- it was backed by two hardcoded leagues nobody had ever joined. */
.cw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-cards .cw-card.full { grid-column: 1 / -1; }
.fmt-tag { font-family: var(--font-tab); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 2px; background: var(--pop-2); color: var(--lime-ink); text-transform: uppercase; letter-spacing: .12em; vertical-align: middle; }
.fmt-tag.new { background: var(--accent); color: #fff; }
.cw-card .fmt-sub { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 1px; }
.cw-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.elim-row { opacity: .45; }
.elim-row td { text-decoration: line-through; }
.cw-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.cw-summary .kv { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.cw-summary .kv:last-child { border-bottom: none; }
.cw-summary .kv .k { color: var(--ink-2); }
.cw-summary .kv .v { font-weight: 700; }
.cw-note { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 10px; }
.cw-foot { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(15,17,21,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); padding: 14px; display: flex; gap: 12px; justify-content: center; z-index: 210; }
.cw-btn { padding: 14px 34px; border-radius: 2px; font-family: var(--font-tab); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.cw-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 0 20px rgba(16,124,16,.35); }
.cw-btn.primary:hover { background: var(--accent-2); box-shadow: 0 0 28px rgba(60,220,60,.45); }
.cw-btn.ghost { background: transparent; border: 1px solid var(--line-cool); color: var(--ink-2); }
.cw-btn.ghost:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
@media (max-width: 640px) { .cw-cards, .cw-grid2 { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .menu-toggle { display: grid; }
  .col.side, .col.roster { position: fixed; top: 0; bottom: 0; width: 300px; max-width: 88vw; z-index: 90;
    background: var(--bg); border: 1px solid var(--line); padding: 12px; overflow-y: auto; transition: transform .28s;
    box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .col.side { left: 0; transform: translateX(-105%); }
  .col.roster { right: 0; transform: translateX(105%); }
  .col.side.open, .col.roster.open { transform: translateX(0); }
  .drawer-scrim.show { display: block; position: fixed; inset: 0; background: rgba(8,10,13,.66); z-index: 85; }
  .sea-header .titles h1 { font-size: 15px; }
}
@media (min-width: 1081px) { .menu-toggle { display: none; } }
@media (min-width: 900px) {
  .sea-body.two { grid-template-columns: minmax(0,1fr) 340px; }
}
@media (max-width: 899px) {
  .dm-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; flex-basis: auto; width: 340px; max-width: 92vw; border-radius: 0; box-shadow: 0 0 40px rgba(0,0,0,.7); }
}

/* ---------- Phone (≤480px): direction-04 mobile reading ----------
   Sticky clock/status strip in the draft room, compact header, cards breathe.
   Matches design-directions/direction-04-xbox/mobile/index.html. */
@media (max-width: 480px) {
  .app { padding: 8px; }
  .header { position: sticky; top: 0; z-index: 40; padding: 8px 10px; gap: 8px;
    background: rgba(15,17,21,0.92); border-radius: 0; margin: -8px -8px 0; border-left: none; border-right: none; border-top: none; }
  .brand { min-width: 0; }
  .brand .logo { width: 32px; height: 32px; }
  .brand h1 { font-size: 13px; }
  .brand .sub { font-size: 8px; white-space: nowrap; }
  /* the clock becomes the pinned strip's heart */
  .clock { min-width: 0; margin: 0; order: 5; flex-basis: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left; padding: 8px 12px; margin: 4px -4px -4px;
    background: linear-gradient(135deg, rgba(16,124,16,0.28) 0%, rgba(10,77,10,0.65) 100%);
    border-top: 1px solid var(--pop-line); border-radius: 0 0 2px 2px; }
  .clock .time { font-size: 26px; }
  .clock .status { margin-top: 0; font-size: 10px; }
  .header-actions { margin-left: auto; }
  .iconbtn { width: 30px; height: 30px; font-size: 12px; }
  .enter-btn { padding: 8px 12px; font-size: 11px; }
  .ticker-row { flex-direction: column; }
  .last-card { min-width: 0; }
  .sea-header { padding: 10px 12px; gap: 8px; }
  .lsw-name { font-size: 15px; }
  .modal-hd h2 { font-size: 19px; }
  th, td { padding: 8px 7px; }
}

/* ===================== LOCK SCREEN ===================== */
/* flex + `margin:auto` on the box (rather than place-items:center) so a tall
   lock box -- sign-in providers plus the legal block -- SCROLLS instead of
   being clipped off the top and bottom on a short phone viewport. */
#lockScreen { position: fixed; inset: 0; z-index: 1000; display: flex; overflow-y: auto;
  padding: 24px 12px; -webkit-overflow-scrolling: touch;
  /* Hero login: the WAIVER draft-world art full-bleed, with a scrim over it so
     the sign-in card and the legal type stay legible. First thing anyone sees. */
  background:
    linear-gradient(180deg, rgba(8,10,13,.48) 0%, rgba(8,10,13,.32) 38%, rgba(8,10,13,.82) 100%),
    url('hero-login-web.jpg') center center / cover no-repeat,
    #080A0D;
  background-attachment: fixed, fixed, fixed;
  transition: opacity .4s ease; }
#lockScreen[hidden] { display: none; }
#lockScreen.unlocked { opacity: 0; pointer-events: none; }
.lock-box { width: min(400px, 100%); margin: auto; flex: 0 0 auto; text-align: center; padding: 34px 26px; border-radius: var(--radius);
  background: rgba(25,27,31,.92); border: 1px solid var(--line-cool);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(16,124,16,.12); }
.lock-logo { width: 118px; height: 118px; object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(16,124,16,.55)); }
.lock-title { margin-top: 14px; font-family: var(--font-tab); font-weight: 700; letter-spacing: .18em; font-size: 27px; color: var(--ink); }
.lock-sub { color: var(--lime-ink); font-family: var(--font-tab); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; margin-top: 3px; font-weight: 600; }
#clerkSignIn { margin-top: 22px; display: flex; justify-content: center; width: 100%; }
#clerkSignIn .cl-rootBox, #clerkSignIn .cl-cardBox, #clerkSignIn .cl-card {
  width: 100% !important; max-width: 100% !important; }
/* App Store Guideline 4.8: Sign in with Apple must be at least as prominent as
   the other sign-in options. Clerk lays the social buttons out as a 2-column
   grid (Apple beside Google); one column stacks them, and order:-1 pins Apple
   to the top even if the provider order changes in the Clerk dashboard. */
#clerkSignIn .cl-socialButtons { grid-template-columns: 1fr !important; }
#clerkSignIn .cl-socialButtonsBlockButton__apple { order: -1; }
/* Clerk's development-instance badge (#f36b16) is the only element on the lock
   screen we do not paint; it never renders on a production Clerk instance.
   Lightened here so it reads on the dark box. Keyed on .cl-footer (a stable
   Clerk element class), and inert if that markup changes. */
#clerkSignIn .cl-footer p { color: #FFB27A !important; }
.lock-box.shake { animation: lockshake .4s; }
@keyframes lockshake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } }

/* ===================== LEAGUE PICKER ===================== */
#leaguesRoot { position: fixed; inset: 0; z-index: 900; overflow-y: auto;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(16,124,16,.26), transparent 60%),
    linear-gradient(180deg, rgba(15,17,21,.90) 0%, rgba(8,10,13,.94) 100%);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
#leaguesRoot[hidden] { display: none; }
.lg-wrap { width: min(880px, 92vw); margin: 0 auto; padding: 42px 0 60px; }
.lg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.lg-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(16,124,16,.5)); }
.lg-title { font-family: var(--font-tab); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: 30px; color: var(--ink); line-height: 1.05; }
.lg-sub { color: var(--lime-ink); font-family: var(--font-tab); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-top: 4px; font-weight: 600; }
.lg-list { display: grid; gap: 10px; margin-bottom: 20px; }
.lg-empty { color: var(--ink-2); font-size: 13px; padding: 20px; text-align: center;
  background: var(--card); border: 1px dashed var(--pop-line); border-radius: var(--radius); }
.lg-card { display: block; width: 100%; text-align: left; padding: 15px 18px; border-radius: var(--radius);
  background: var(--card-solid); border: 1px solid var(--line); transition: background .15s, transform .15s, border-color .15s, box-shadow .15s; }
.lg-card:hover { background: #1E2126; border-color: var(--pop-line); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(60,220,60,0.10); }
.lg-card-name { color: var(--ink); font-family: var(--font-tab); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.lg-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lg-tag { font-family: var(--font-tab); font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px;
  background: var(--accent); color: #fff; }
.lg-tag.gold { background: var(--amber); color: #1A0F02; } /* dark label on amber: 8.0:1 */
.lg-tag.ghost { background: var(--pop-2); color: var(--ink-2); }
.lg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lg-form { display: grid; gap: 9px; padding: 12px 16px 6px; }
.lg-form .set-input, .lg-form .set-select { max-width: 100%; width: 100%; }
.lg-form .pp-btn { margin: 4px 0 0; width: 100%; }
.lg-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lg-mode-opt { display: block; text-align: left; padding: 9px 11px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--pop-soft); transition: border-color .15s, background .15s; }
.lg-mode-opt.on { border-color: var(--aqua); background: rgba(16,124,16,0.16); box-shadow: 0 0 10px rgba(16,124,16,.18); }
.lg-mode-t { display: block; font-family: var(--font-tab); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lg-mode-s { display: block; font-size: 10px; color: var(--ink-2); margin-top: 2px; }
.lg-preview { font-size: 12px; color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 9px 11px; }
.lg-preview[hidden] { display: none; }
/* Opaque on purpose: a translucent red over the shader goes muddy. Dark now —
   the same pairing is inlined in auth.js's failure box. */
.lg-err { margin-top: 16px; font-size: 13px; font-weight: 600; color: #FFB4A8;
  background: #3A1B17; border: 1px solid #7A3A30; border-radius: 2px; padding: 11px 14px; }
.lg-err[hidden] { display: none; }
/* Season-engine errors, in the season shell rather than the sign-in card. Same
   opaque red pairing as .lg-err above -- change both or neither. */
.sea-err { margin: 10px 14px 0; font-size: 13px; font-weight: 600; color: #FFB4A8;
  background: #3A1B17; border: 1px solid #7A3A30; border-radius: 2px; padding: 11px 14px; }
.sea-err[hidden] { display: none; }
/* The same box carrying a PROMPT rather than a failure -- "pick who comes out"
   is the app waiting on you, not the app breaking. Neutral, not red. */
.sea-err.is-note { color: var(--ink); background: var(--pop-2); border-color: var(--line); }
.lg-signout { display: block; margin: 26px auto 0; color: var(--lime-ink); font-family: var(--font-tab); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  background: var(--pop-soft); border: 1px solid var(--line); border-radius: 2px; padding: 9px 18px; }
.lg-signout:hover { color: var(--ink); border-color: var(--line-cool); text-decoration: none; }
@media (max-width: 720px) { .lg-cards { grid-template-columns: 1fr; } .lg-title { font-size: 24px; } }

.seat-list { display: grid; gap: 1px; background: var(--line); border-radius: 2px; overflow: hidden; }
.seat-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; background: var(--card-solid); }
.seat-row.open { background: var(--pop-soft); }
.seat-n { width: 22px; height: 22px; border-radius: 50%; background: var(--pop-2); color: var(--ink-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.seat-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.seat-row.open .seat-t { color: var(--ink-2); font-style: italic; font-weight: 600; }
.seat-m { font-size: 11px; color: var(--ink-2); margin-top: 1px; }
.seat-cpu { font-family: var(--font-tab); font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 2px 5px; border-radius: 2px;
  background: var(--pos-DEF); color: #fff; vertical-align: middle; margin-left: 4px; }
.seat-you { font-family: var(--font-tab); font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 2px 5px; border-radius: 2px;
  background: var(--accent); color: #fff; vertical-align: middle; margin-left: 4px; }
.predraft-note { padding: 4px 16px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ===================== LEAGUE TAB: NO-LEAGUE HUB ===================== */
/* The hub renders straight into #seaBody, which has no surface of its own, so
   its copy gets a blurred panel to sit on. */
.league-hub { padding: 22px 18px; max-width: 760px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hub-head { text-align: center; margin-bottom: 16px; }
.hub-title { font-family: var(--font-tab); font-size: 23px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.hub-sub { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.hub-nudges { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
/* Scoped so this doesn't clobber the existing .pp-btn.ghost look used by
   chat.js's "Back Off" and settings.js's "Make a Shareable Link" buttons. */
.hub-nudges .pp-btn.ghost { background: var(--pop-soft); color: var(--lime-ink); border: 1px solid var(--pop-line); }
#leagueForms.in-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { #leagueForms.in-hub { grid-template-columns: 1fr; } }

/* Create/Join switcher modal -- #leagueForms relocates in here when a user
   with a league opens Create/Join from the header switcher. */
.lgm-back { position: fixed; inset: 0; background: rgba(8,10,13,.72); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 16px; }
.lgm-card { background: var(--card-solid); border: 1px solid var(--line-cool); border-radius: var(--radius); padding: 20px; max-width: 720px; width: 100%; position: relative; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.lgm-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--ink-2); }

/* ===================== AI GM ASSISTANT ===================== */
/* Amber is the premium tell in SERIES — the one place it leads. Dark label. */
.sea-chip.ai-chip { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none;
  box-shadow: 0 0 14px rgba(16,124,16,.35); }
/* Green fill, white label (the app's --accent convention, 5.0:1), matching the draft. */
.sea-chip.ai-chip:hover { filter: brightness(1.08); }
.ai-panel { position: fixed; right: 18px; bottom: 18px; top: auto; left: auto; z-index: 120;
  width: min(340px, calc(100vw - 24px)); height: 480px; max-height: 74vh;
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-cool);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 24px rgba(16,124,16,.12); }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; color: #fff;
  font-family: var(--font-tab); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; cursor: move; touch-action: none;
  user-select: none; -webkit-user-select: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ai-head.dragging { cursor: grabbing; }
.ai-head .ai-title { display: flex; align-items: center; gap: 7px; }
.ai-grip { font-style: normal; color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: -1px; }
.ai-head .dm-close { color: #fff; cursor: pointer; }
/* Body wrapper: positioning context so the offer overlay can float over the
   chat + composer without removing them from the panel. */
.ai-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ai-thread { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); }
.ai-thread .dm-msg { max-width: 90%; font-size: 13px; }
/* The GM's opening pitch runs long (its capability bullets sell the feature);
   let it read as a block rather than a squeezed bubble. */
.ai-thread .dm-msg.them:first-child { max-width: 100%; }
.ai-typing { opacity: .7; font-style: italic; }
/* Kept harmless: the chat + composer are no longer hidden for the offer. */
.ai-thread[hidden], .dm-composer[hidden] { display: none; }

/* Send button gated for a known non-payer: a click opens the offer instead of
   sending. Green flags "action needed" — white label, matching the draft/app. */
.dm-composer button.locked { background: var(--accent); color: #fff; }
.dm-composer button.locked:hover { background: var(--accent-2); }

/* AI GM offer — a dismissible overlay that slides over the chat when unpaid.
   All copy is contained inside one dark card; green accents, gate glow. */
.ai-paywall { position: absolute; inset: 0; z-index: 4; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #15171B 0%, #0B0D10 100%); }
.ai-paywall[hidden] { display: none; }
.aip-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 28px; height: 28px;
  border-radius: 2px; display: grid; place-items: center; font-size: 13px; line-height: 1;
  color: var(--ink-2); background: var(--pop-soft); border: 1px solid var(--line); cursor: pointer; }
.aip-close:hover { color: var(--ink); background: var(--pop-2); }
.aip-card { background: var(--card-solid); border: 1px solid rgba(16,124,16,.45); border-radius: 2px;
  padding: 16px 15px 17px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(16,124,16,.14); }
.aip-kicker { font-family: var(--font-tab); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lime-ink); }
.aip-title { font-family: var(--font-tab); font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin-top: 4px; }
.aip-copy { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 7px; }
.aip-opt { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: left; margin-top: 11px; padding: 13px 14px;
  border-radius: 2px; border: 1px solid var(--line-cool); background: var(--pop-soft);
  box-shadow: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.aip-opt:hover { transform: translateY(-1px); border-color: rgba(16,124,16,.55); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.aip-opt:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.aip-opt.best { border-color: var(--accent); background: linear-gradient(135deg, rgba(16,124,16,.14), var(--pop-soft)); }
.aip-opt-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aip-opt-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.aip-opt-s { font-size: 11px; color: var(--ink-2); }
.aip-price { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--lime-ink); white-space: nowrap; }
.aip-per { font-size: 10px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.aip-tag { position: absolute; top: -8px; left: 12px; padding: 2px 8px; border-radius: 2px;
  background: var(--accent); color: #fff; font-family: var(--font-tab); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; }
.aip-note { margin-top: 10px; font-size: 11px; color: var(--ink-2); font-style: italic; }
.aip-err { margin-top: 10px; padding: 9px 11px; border-radius: 2px; font-size: 12px;
  font-weight: 600; color: #FFB4A8; background: #3A1B17; border: 1px solid #7A3A30; }
.aip-err[hidden] { display: none; }
.aip-later { display: block; width: 100%; margin-top: 12px; padding: 9px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--ink-2); background: none; cursor: pointer; }
.aip-later:hover { color: var(--ink); text-decoration: underline; }

/* clickable player names -> detail card (league) */
.pname { cursor: pointer; }
.pname:hover { color: var(--lime-ink); text-decoration: underline; }
.pc-line { font-size: 13px; color: var(--ink); padding: 6px 0 2px; }
.pc-live { margin-top: 12px; font-size: 12px; color: var(--ink-2); font-style: italic; }

/* ===================== LEGAL FOOTER =====================
   Persistent NFL/NCAA non-affiliation disclaimer. Lives at the end of .app so
   it rides along with every in-app screen, and a compact version sits under the
   sign-in box on the lock screen (which covers .app until you're signed in). */
.app-foot {
  margin: 26px 0 6px; padding: 16px 18px 18px;
  /* Dark glass: the shader reads through the shared backdrop blur (this class
     is in the blurred-shell list above). */
  background: rgba(25, 27, 31, 0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink-2); font-size: 11px; line-height: 1.55;
}
.app-foot-disclaimer { max-width: 860px; }
.app-foot-disclaimer strong { color: var(--ink); font-weight: 600; }
.app-foot-nav {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; font-size: 11px; font-weight: 600;
}
.app-foot-nav a { color: var(--lime-ink); text-decoration: none; }
.app-foot-nav a:hover { text-decoration: underline; }
.app-foot-co { color: var(--ink-2); font-weight: 500; }
@media (max-width: 640px) {
  .app-foot { margin-top: 20px; padding: 14px 12px 16px; font-size: 10.5px; }
  .app-foot-nav { gap: 6px 14px; }
}

/* compact copy on the lock screen */
.lock-legal { margin-top: 18px; color: var(--ink-2); font-size: 10.5px; line-height: 1.5; }
.lock-legal p { margin: 0; }
.lock-legal nav { margin-top: 8px; display: flex; justify-content: center; gap: 14px; }
.lock-legal a { color: var(--lime-ink); font-weight: 600; text-decoration: none; }
.lock-legal a:hover { color: var(--ink); text-decoration: underline; }

/* =========================================================================
   Buttons that opted into .btn3d. The moulded push-button era is over: on
   SERIES these flatten into the system's own button language, sharp and lit.
   Selector names kept (index.html hardcodes them); ::before/::after kept as
   no-ops so the old markup renders clean.
     .btn3d          → neutral surface button (the mock's .top-btn)
     .btn3d.is-green → primary green with the brand glow
     .btn3d.is-pig   → pigskin leather KEPT: brown + white stripes reads
                       beautifully on the dark ground, and it is the one
                       playful signature the league knows. White label 7.2:1.
   ========================================================================= */
.btn3d {
  position: relative; isolation: isolate; overflow: visible;
  border: 1px solid var(--line); background: var(--pop-soft); cursor: pointer;
  border-radius: 2px; padding: 11px 18px;
  font-family: var(--font-tab); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.btn3d::before { display: none; }
.btn3d::after { display: none; }        /* kill the inherited shimmer sweep */
.btn3d:hover { background: var(--pop-2); border-color: var(--line-cool); }
.btn3d:hover::before { display: none; }
.btn3d:active { transform: scale(.985); }
.btn3d:disabled, .btn3d:disabled:hover { cursor: not-allowed; opacity: .5; }
.btn3d:disabled::before { display: none; }

/* PRIMARY — the brand green, glowing */
.btn3d.is-green { background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 0 16px rgba(16, 124, 16, 0.35); }
.btn3d.is-green:hover { background: var(--accent-2); border-color: transparent;
  box-shadow: 0 0 24px rgba(60, 220, 60, 0.45); }
.btn3d.is-green::before { display: none; }

/* Pigskin retired: every draft-entry button is now the SERIES green primary.
   Kept as an alias to .is-green so any lingering .is-pig renders on-system. */
.btn3d.is-pig { color: #fff; background: var(--accent); border-color: transparent;
  box-shadow: 0 0 16px rgba(16, 124, 16, 0.35); padding: 11px 18px; text-shadow: none; }
.btn3d.is-pig:hover { background: var(--accent-2); filter: none;
  box-shadow: 0 0 24px rgba(60, 220, 60, 0.45); }
.btn3d.is-pig::before, .btn3d.is-pig::after { display: none; }

/* =========================================================================
   Team foil on the player card. foil.js paints the club's own two colours
   into .foil-c, which sits behind the WHOLE card; every panel above it goes
   translucent-dark so the foil reads through, and the copy turns white.
   Scoped to .modal.is-foil -- any other modal keeps the SERIES treatment.
   KEPT: this is the league's favourite surface. Chrome around it is SERIES.
   ========================================================================= */
.modal.is-foil { position: relative; background: #0A0F0A; color: #fff; }
.modal.is-foil .foil-c { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; border: 0; }
.modal.is-foil > *:not(.foil-c) { position: relative; z-index: 1; }

/* header band: the gradient goes, the foil shows through */
.modal.is-foil .modal-hd { background: transparent; color: #fff; }
.modal.is-foil .modal-hd h2 { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.modal.is-foil .modal-hd .mmeta { color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.modal.is-foil .modal-hd .x,
.modal.is-foil .modal-hd .mstar { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.modal.is-foil .modal-hd .mstar.on { color: var(--amber); }
.modal.is-foil .modal-hd .head { box-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* metric tiles: smoked glass on the foil, same grid */
.modal.is-foil .metrics { background: transparent; gap: 8px; padding: 0 16px 4px; }
.modal.is-foil .metric { background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal.is-foil .metric .v { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.modal.is-foil .metric .k { color: rgba(255,255,255,.78); }

/* body: tables and copy sit straight on the foil */
.modal.is-foil .modal-body { color: #fff; }
.modal.is-foil .modal-body h4 { color: rgba(255,255,255,.75); }
/* Each stats table becomes its own smoked-glass card, matching the metric
   tiles above it, so the numbers read against a steady ground instead of
   whatever the foil is doing underneath. Styling the class covers all three
   tables the card can show (season stats, live 2026, recent 2025 games). */
.modal.is-foil .stat-compare { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  background: rgba(0,0,0,.44); border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px; border-collapse: separate; border-spacing: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden; margin-top: 2px; }
.modal.is-foil .stat-compare th,
.modal.is-foil .stat-compare td { padding: 10px 12px; }
.modal.is-foil .stat-compare tbody tr:last-child td { border-bottom: 0; }
/* the global sticky `th` paints a solid surface; on the foil it goes clear */
.modal.is-foil .stat-compare th { color: rgba(255,255,255,.8); background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.28); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.modal.is-foil .stat-compare td { border-bottom: 1px solid rgba(255,255,255,.12); }
.modal.is-foil .pc-line { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.65); }
.modal.is-foil .pc-live { color: rgba(255,255,255,.8); }
.modal.is-foil .outlook { background: rgba(0,0,0,.42); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18); }
.modal.is-foil .outlook .date { color: rgba(255,255,255,.72); }

/* draft CTA keeps its own solid fill so it still reads as the action */
.modal.is-foil .modal-cta { border-top: 1px solid rgba(255,255,255,.2); }

/* =========================================================================
   SERIES EXACT-MATCH — direction-04 mock parity (desktop + mobile)
   Ports _MOCK-desktop.css / _MOCK-mobile.css treatment + type scale onto the
   real draft-room selectors. Scoped to #draftRoot so the season shell keeps its
   own framing; the 7 position colours, the club-colour initials ball and the
   team-foil card are KEPT. JS untouched except the proj/rank cell class above.
   ========================================================================= */

/* ---- full-bleed console shell (the mock's edge-to-edge grid) ---- */
.app { max-width: none; margin: 0; padding: 0; }
#seasonRoot { max-width: 1560px; margin: 0 auto; padding: 12px; }
#draftRoot { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---- TOPBAR (.header ⇐ .topbar) ---- */
#draftRoot .header {
  flex: 0 0 56px; height: 56px; padding: 0 24px; gap: 18px; flex-wrap: nowrap;
  background: rgba(15,17,21,0.92); border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
#draftRoot .brand { min-width: 0; gap: 12px; }
#draftRoot .brand .logo { width: 32px; height: 32px; border: 1px solid var(--line-cool); box-shadow: 0 0 14px rgba(16,124,16,.55); }
#draftRoot .brand h1 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: none; }
#draftRoot .brand .sub { letter-spacing: .14em; }

/* clock ⇐ .clock-block / .clock-time / .clock-tag */
#draftRoot .clock { min-width: 0; margin: 0 auto; display: flex; align-items: center; gap: 14px; text-align: left; }
#draftRoot .clock .time { font-size: 30px; letter-spacing: .04em; }
#draftRoot .clock .status { margin-top: 0; font-family: var(--font-tab); font-size: 11px; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase; color: var(--lime-ink); }

/* header actions ⇐ .top-btn */
#draftRoot .header-actions { gap: 10px; }
#draftRoot .header .enter-btn { padding: 7px 12px; font-size: 12px; letter-spacing: .10em;
  background: var(--card-solid); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
#draftRoot .header .enter-btn:hover { background: var(--pop); border-color: var(--line-cool); box-shadow: none; }
#draftRoot .header .iconbtn { border-radius: 2px; }

/* ---- TICKER ROW (.ticker-row ⇐ .tickerbar) ---- */
#draftRoot .ticker-row {
  flex: 0 0 auto; margin-top: 0; padding: 12px 24px; gap: 14px; align-items: center; overflow: hidden;
  background: rgba(25,27,31,0.75); border-bottom: 1px solid var(--line);
}
#draftRoot .last-card { min-width: 0; padding: 8px 18px 8px 14px; box-shadow: none; }
#draftRoot .last-card .lbl { letter-spacing: .24em; }
#draftRoot .last-card .pl { font-size: 16px; }
#draftRoot .ticker { background: transparent; border: none; box-shadow: none; }
#draftRoot .ticker-track { gap: 10px; padding: 0; }
#draftRoot .tk { padding: 7px 12px; background: var(--card-solid); border: 1px solid var(--line); gap: 8px; }
#draftRoot .tk .av { display: none; }
#draftRoot .tk .nm { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }
#draftRoot .tk.you .nm, #draftRoot .tk.active .nm { color: var(--ink); }
#draftRoot .tk .pk { background: var(--pop-2); padding: 1px 6px; border-radius: 10px; }
#draftRoot .tk.active { background: rgba(16,124,16,0.14); border-color: var(--aqua); box-shadow: 0 0 12px rgba(16,124,16,0.18); }
#draftRoot .tk.active .pk { background: var(--accent); color: #fff; }

/* ---- BODY: full-height 3-column grid, hairline dividers, no gaps ---- */
#draftRoot .layout { flex: 1; min-height: 0; margin-top: 0; gap: 0;
  grid-template-columns: 300px minmax(0,1fr) 320px; align-items: stretch; }
#draftRoot .col { gap: 16px; min-height: 0; }
#draftRoot .col.side { background: rgba(25,27,31,0.95); border-right: 1px solid var(--line);
  padding: 20px 18px; overflow-y: auto; }
#draftRoot .col.roster { background: rgba(25,27,31,0.92); border-left: 1px solid var(--line);
  padding: 20px 18px; overflow-y: auto; }
#draftRoot .col:not(.side):not(.roster) { padding: 18px 22px 12px; gap: 14px; overflow: hidden; }

/* centre panel sheds its card and stacks like the mock centre */
#draftRoot .col:not(.side):not(.roster) > .panel {
  background: transparent; border: none; box-shadow: none;
  display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
#draftRoot #tabContent { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }

/* tabs ⇐ .tabs (14px Saira, 3px green underline already in base) */
#draftRoot .tabs { padding: 0; gap: 4px; }
#draftRoot .tab { padding: 10px 20px 8px; font-size: 14px; letter-spacing: .14em; }
#draftRoot .tab .ul { left: 0; right: 0; }

/* filters ⇐ .filters / .search / .select / .checkline */
#draftRoot .toolbar { padding: 0; gap: 10px; align-items: center; }
#draftRoot .toolbar input[type=text] { flex: 0 1 320px; min-width: 0; padding: 9px 14px; font-size: 13px; background: var(--card-solid); }
#draftRoot .toolbar select { padding: 9px 30px 9px 14px; background: var(--card-solid); }
#draftRoot .check { margin-left: auto; }

/* table ⇐ .table-card / .table-scroll (the .table-wrap is both) */
#draftRoot .table-wrap { flex: 1; min-height: 0; overflow: auto;
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 2px; }
#draftRoot table { min-width: 1080px; }
#draftRoot thead th { padding: 10px 10px; }
#draftRoot .nm { font-size: 14px; }
#draftRoot .meta { color: var(--text-faint); }
#draftRoot td.rank-td { color: var(--ink); font-weight: 700; font-family: var(--font-mono); }
#draftRoot td.proj-td { color: var(--lime-ink); font-weight: 700; font-family: var(--font-mono); }
/* DRAFT column pinned to the right edge, stats scroll under it */
#draftRoot thead th:last-child, #draftRoot tbody td:last-child {
  position: sticky; right: 0; z-index: 3; background: var(--card-solid);
  border-left: 1px solid var(--line); box-shadow: -10px 0 14px rgba(8,10,13,0.55); }
#draftRoot thead th:last-child { background: #22252B; z-index: 4; }
#draftRoot tr.prow:hover td:last-child { background: #1C231C; }

/* turn banner (in-table colspan row) softened to the mock hero gradient */
#draftRoot .turn-banner { padding: 14px 20px; }

/* ---- LEFT RAIL: gate + queue deck ---- */
#draftRoot .col.side .panel { background: var(--card-solid); border: 1px solid var(--line); box-shadow: none; }
#draftRoot .col.side .panel.panel-pad { padding: 0; }
#draftRoot #sideContent { margin-top: 0 !important; }
#draftRoot .empty { padding: 28px 22px; }
#draftRoot .empty .star { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto; display: grid;
  place-items: center; font-size: 20px; background: var(--pop); border: 1px solid var(--line-cool);
  box-shadow: 0 0 16px rgba(16,124,16,0.18); text-shadow: none; }
#draftRoot .empty p { font-family: var(--font-tab); font-size: 15px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); margin-top: 10px; }
#draftRoot .empty .hint { font-size: 12px; color: var(--ink-2); margin-top: 8px; }

/* ---- RIGHT DECK: roster ⇐ .deck ---- */
#draftRoot .col.roster .panel { background: transparent; border: none; box-shadow: none; }
#draftRoot .roster-head { padding: 0 0 4px; border-bottom: none; }
#draftRoot .roster-head h3 { font-family: var(--font-ui); font-size: 18px; font-weight: 300; letter-spacing: -.01em; text-transform: none; }
#draftRoot .roster-head .count { font-size: 11px; }
#draftRoot .roster-body { padding: 0; }
#draftRoot .rslot { gap: 10px; padding: 9px 12px; margin-bottom: 6px; background: var(--pop); border: 1px solid transparent; }
#draftRoot .rslot.empty-slot { background: var(--pop); border: 1px solid transparent; }
#draftRoot .rslot .pos { width: 52px; }
#draftRoot .rslot.empty-slot .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint) !important; }

/* position pill shape ⇐ mock .pos-pill (colours KEPT via inline bg) */
.badge { padding: 2px 8px; letter-spacing: .14em; }

/* ---- MOBILE (≤480) ⇐ _MOCK-mobile.css ---- */
@media (max-width: 480px) {
  /* Belt-and-braces: nothing may push the page wider than the phone. The ticker
     scrolls inside its own track; the header and rows stay within 100%. */
  html, body, .app, #draftRoot { max-width: 100%; overflow-x: hidden; }
  #draftRoot .header { max-width: 100%; }
  #draftRoot .ticker { overflow-x: auto; }
  #draftRoot .ticker-row { min-width: 0; }
  #draftRoot { height: auto; overflow: visible; }
  #draftRoot .header { position: sticky; top: 0; z-index: 40; height: auto; flex: 0 0 auto;
    padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  #draftRoot .brand .logo { width: 28px; height: 28px; }
  #draftRoot .brand h1 { font-size: 13px; }
  #draftRoot .brand .sub { font-size: 8px; white-space: nowrap; }
  /* clock becomes the pinned green strip under the header */
  #draftRoot .clock { order: 5; flex-basis: 100%; margin: 4px -14px -10px; padding: 10px 14px;
    justify-content: flex-start; gap: 12px;
    background: linear-gradient(135deg, rgba(16,124,16,0.28) 0%, rgba(10,77,10,0.65) 100%);
    border-top: 1px solid var(--pop-line); border-radius: 0; }
  #draftRoot .clock .time { font-size: 26px; }
  #draftRoot .header-actions { margin-left: auto; gap: 6px; }
  #draftRoot .header .iconbtn { width: 30px; height: 30px; font-size: 12px; }
  #draftRoot .header .enter-btn { padding: 8px 12px; font-size: 11px; }
  #draftRoot .ticker-row { flex-direction: row; padding: 10px 14px; gap: 8px; }
  #draftRoot .last-card { flex-direction: column; }
  /* stacked single column */
  #draftRoot .layout { display: block; }
  #draftRoot .col.side, #draftRoot .col.roster { position: static; width: auto; max-width: none;
    transform: none; background: transparent; border: none; padding: 12px 14px; box-shadow: none; }
  #draftRoot .col:not(.side):not(.roster) { padding: 12px 14px; overflow: visible; }
  #draftRoot .table-wrap { min-height: 0; }
}

/* ---- AI GM gate (.promo ⇐ .gate): full mock structure ---- */
#draftRoot .promo { padding: 16px 18px; }
#draftRoot .promo .gate-tag { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-tab); font-size: 10px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--lime-ink); }
#draftRoot .promo .gate-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aqua); box-shadow: 0 0 10px var(--aqua); animation: heroPulse 1.5s ease-in-out infinite; }
@keyframes heroPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
#draftRoot .promo .gate-title { font-family: var(--font-ui); font-size: 22px; font-weight: 200;
  letter-spacing: -.02em; line-height: 1.1; text-transform: none; color: var(--ink); margin-top: 4px; }
#draftRoot .promo .gate-title strong { font-weight: 700; }
#draftRoot .promo .gate-sub { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 8px; line-height: 1.5; }
#draftRoot .promo .gate-price { font-family: var(--font-mono); font-size: 11px; color: var(--lime-ink);
  margin-top: 10px; letter-spacing: .04em; }
#draftRoot .promo .gate-price .alt { color: var(--ink-2); }
#draftRoot .promo .gate-actions { display: flex; gap: 8px; margin-top: 14px; }
#draftRoot .promo .gate-btn { flex: 1; font-family: var(--font-tab); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; text-align: center;
  background: rgba(255,255,255,.12); color: var(--ink); border: none; border-radius: 2px; transition: background .18s; }
#draftRoot .promo .gate-btn:hover { background: rgba(255,255,255,.22); }
#draftRoot .promo .gate-btn.primary { background: var(--aqua); color: var(--bg2); box-shadow: 0 0 12px rgba(60,220,60,.4); }
#draftRoot .promo .gate-btn.primary:hover { background: #5BE85B; }

/* in-table turn banner ⇐ mock hero: left-aligned green gradient, larger type */
#draftRoot .turn-banner { padding: 12px 16px; }
  #draftRoot .turn-title { font-size: 20px; }
  #draftRoot .turn-clock { font-size: 18px; }

/* ---- MOBILE table→cards + even tabs ⇐ _MOCK-mobile.css hard rule ---- */
@media (max-width: 480px) {
  /* four tabs share the width, none clipped */
  #draftRoot .tabs { overflow: visible; }
  #draftRoot .tabs .tab { flex: 1 1 0; min-width: 0; padding: 10px 4px 8px; font-size: 12px; letter-spacing: .06em; text-align: center; }
  #draftRoot .tab .ul { left: 0; right: 0; }

  /* player table collapses to stacked cards (.m-player language) */
  #draftRoot .table-wrap { background: transparent; border: none; overflow: visible; }
  #draftRoot table { min-width: 0; }
  #draftRoot thead { display: none; }
  #draftRoot tbody, #draftRoot table { display: block; }
  #draftRoot tr.prow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
    background: var(--card-solid); border: 1px solid var(--line); border-radius: 2px; padding: 9px 10px; margin-bottom: 6px; }
  #draftRoot tr.prow td { display: none; }
  #draftRoot tr.prow td.sticky-name { display: block; grid-column: 1; padding: 0; border: none; position: static; background: transparent; }
  #draftRoot tr.prow td.proj-td { display: block; grid-column: 2; padding: 0; border: none; text-align: right; font-size: 14px; }
  #draftRoot tr.prow td:last-child { display: block; grid-column: 3; padding: 0; border: none; position: static; box-shadow: none; background: transparent; }
  /* the in-table turn banner stays a full-width block */
  #draftRoot tr:has(> .turn-banner) { display: block; }
  #draftRoot .turn-banner { display: block; }
}

/* .app is now full-bleed for the draft room; keep the persistent legal footer
   aligned to the season frame (max-width + centred) instead of touching edges. */
.app-foot { max-width: 1560px; margin: 26px auto 6px; }

/* ===================== WAIVERS: DROP · CLAIMS STRIP · ROSTER STATUS =====================
   Additive only. Every colour is an existing token so the three surfaces read as
   one system with the rest of the season screen. */

/* Drop on your own roster row (and on an IR row). Deliberately quiet: it sits
   inside a row whose whole job is tap-to-swap, so it must never look like the
   primary thing to press. */
.rowdrop { flex: 0 0 auto; margin-left: 10px; padding: 5px 9px; border-radius: 2px;
  background: var(--pop-2); color: var(--ink-2); border: 1px solid var(--line);
  font-family: var(--font-tab); font-weight: 700; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.rowdrop:hover:not(:disabled) { background: #3A1B17; color: #FFB4A8; border-color: #5A2A24; }
.rowdrop:disabled { opacity: .5; cursor: not-allowed; }

/* Start / Bench / Swap / Cancel -- the lineup control, one per roster row.
   Same metrics as .rowdrop next to it so the two read as one control strip,
   but this one IS the primary thing to press: Drop stays quiet and grey,
   while an armed Swap target lights up in the same green the .swap-ok row
   tint uses. */
.rowslot { flex: 0 0 auto; margin-left: 10px; padding: 5px 9px; border-radius: 2px;
  background: var(--pop-2); color: var(--ink); border: 1px solid var(--line);
  font-family: var(--font-tab); font-weight: 700; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.rowslot:disabled, .rowslot.is-off { opacity: .35; }
/* Drawn dead, still clickable: it answers with the reason instead of being a
   silent control. `disabled` would swallow the event entirely. */
.rowslot.is-off { cursor: help; }
.rowslot.is-ok { background: rgba(60,220,60,0.16); color: #CFF7CF; border-color: var(--win); }
.rowslot.is-sel { background: rgba(16,124,16,0.30); color: #E6FFE6; border-color: var(--aqua); }
/* AFTER the state rules, and matched on them, so hovering an armed green Swap
   brightens it instead of dimming it back to the idle hover colour --
   `:hover:not(:disabled)` is (0,3,0) and was outranking the (0,2,0) states. */
.rowslot:hover:not(:disabled):not(.is-off) { background: rgba(16,124,16,0.18); border-color: var(--aqua); }
.rowslot.is-ok:hover:not(:disabled) { background: rgba(60,220,60,0.28); border-color: var(--win); }
.rowslot.is-sel:hover:not(:disabled) { background: rgba(16,124,16,0.42); border-color: var(--aqua); }

/* Pending waiver claims, in processing order. */
.claim-row { display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); }
.claim-row:last-child { border-bottom: none; }
.claim-n { width: 22px; height: 22px; border-radius: 50%; background: var(--pop-2); color: var(--ink-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.claim-g { flex: 1; min-width: 0; }
.claim-t { font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.claim-m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); margin-top: 2px; }
.claim-btns { display: flex; gap: 5px; flex: 0 0 auto; }
.claim-b { width: 26px; height: 26px; border-radius: 2px; background: var(--pop-2); color: var(--ink-2);
  border: 1px solid var(--line); font-size: 11px; line-height: 1; cursor: pointer;
  transition: background 140ms ease, color 140ms ease; }
.claim-b:hover:not(:disabled) { background: rgba(16,124,16,0.16); color: var(--ink); }
.claim-b.x:hover:not(:disabled) { background: #3A1B17; color: #FFB4A8; }
.claim-b.w:hover:not(:disabled) { background: rgba(16,124,16,0.28); color: #B7FFB7; }
.claim-b:disabled { opacity: .35; cursor: not-allowed; }

/* Roster Status cell on the Players tab. Same column rhythm as .lrow .pts. */
.wstat { flex: 0 0 auto; width: 92px; text-align: right; }
.wstat .k { font-family: var(--font-tab); font-size: 9px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.wtag { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
  padding: 2px 7px; border-radius: 2px; background: var(--pop-2); color: var(--ink-2);
  font-family: var(--font-tab); font-size: 10px; font-weight: 700; letter-spacing: .10em; }
.wtag.fa { background: #0F3B18; color: #7DE87D; }   /* green pair on dark · 8.3:1 */
.wtag.w { background: #3A2C10; color: #F0C465; }    /* amber pair on dark · 7.6:1 */
.wtag.own { font-family: var(--font-mono); letter-spacing: 0; font-size: 10px; }

/* ---- League History (year over year) ---- */
.hist-season { border-top: 1px solid rgba(255,255,255,0.06); }
.hist-season:first-of-type { border-top: 0; }
.hist-season > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px; padding: 11px 14px; }
.hist-season > summary::-webkit-details-marker { display: none; }
.hist-season > summary::after { content: '▸'; margin-left: auto; color: var(--lime-ink); opacity: .7; font-size: 12px; }
.hist-season[open] > summary::after { content: '▾'; }
.hist-yr { font-family: var(--font-tab); font-weight: 800; letter-spacing: .06em; color: var(--lime-ink); }
.hist-chip { font-size: 11px; display: inline-flex; align-items: baseline; gap: 4px; }
.hist-chip .hist-lb { text-transform: uppercase; letter-spacing: .08em; opacity: .55; font-size: 9px; }
.hist-chip .hist-nm { font-weight: 700; }
.hist-mgr { display: block; font-size: 10px; opacity: .55; }
.hist-season table td.hist-champ, .hist-season tr.hist-champ td { background: rgba(60,220,60,0.07); }
.hist-season tr.hist-last td { opacity: .6; }

/* ===================== PLAY REPLAY =====================
   A player's week on the field (replay.js). Mirror of the iOS sheet
   platform/src/features/season/PlayReplay.tsx: club-colour wash, club @ opp
   pill, live points, the tilted field, the reel, the caption, the box score.
   A phone-shaped column centred on desktop, full screen on a phone. */
/* REPLAY sits where the position pill under the name used to be. */
.rowreplay { flex: 0 0 auto; padding: 2px 6px; border-radius: 2px;
  background: rgba(16,124,16,0.30); color: var(--win); border: 1px solid rgba(60,220,60,0.55);
  font-family: var(--font-tab); font-weight: 700; font-size: 9px; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background 140ms ease; }
.rowreplay:hover { background: rgba(16,124,16,0.45); }
.rowreplay:focus-visible { outline: 2px solid var(--win); outline-offset: 2px; }

body.rp-open { overflow: hidden; }
.rp-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; }
.rp { position: relative; width: min(440px, 100vw); height: min(900px, 100dvh);
  overflow-y: auto; overscroll-behavior: contain; background: #080A0D; color: #fff;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding-bottom: 28px;
  font-family: var(--font-ui); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.rp-bg { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(8,10,13,0) 30%, rgba(8,10,13,.92) 100%),
    radial-gradient(circle, rgba(255,255,255,.06) 1.1px, transparent 1.2px) 0 0 / 7px 7px,
    linear-gradient(115deg, var(--rp-a, #22252B) 0%, #080A0D 44%, #080A0D 56%, var(--rp-b, #22252B) 100%); }
.rp > *:not(.rp-bg) { position: relative; }
.rp-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 0; }
.rp-back, .rp-back-spacer { width: 40px; height: 40px; border-radius: 20px; flex: 0 0 auto; }
.rp-back { border: 0; background: rgba(255,255,255,.10); color: #fff; font-size: 26px; line-height: 1;
  padding-bottom: 3px; cursor: pointer; font-family: var(--font-ui); }
.rp-back:hover { background: rgba(255,255,255,.18); }
.rp-back:focus-visible, .rp-stage:focus-visible { outline: 2px solid var(--win); outline-offset: 2px; }
.rp-pill { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 20px; background: rgba(255,255,255,.10); }
.rp-pill-logo { width: 22px; height: 22px; object-fit: contain; }
.rp-pill-at { font-weight: 600; font-size: 13px; }
.rp-pill-wk { font-family: var(--font-tab); font-weight: 600; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #9EA4AC; margin-left: 4px; }
.rp-score { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; margin-top: 22px; }
.rp-club { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rp-club-logo { width: 46px; height: 46px; object-fit: contain; }
.rp-club-blank { border-radius: 23px; opacity: .35; }
.rp-club-abbr { font-weight: 600; font-size: 13px; }
.rp-score-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rp-score-k { font-family: var(--font-tab); font-weight: 700; font-size: 11px; letter-spacing: .18em; color: var(--win); }
.rp-score-v { font-family: var(--font-mono); font-weight: 700; font-size: 44px; line-height: 1.1; letter-spacing: -1px; }
.rp-score-sub { font-family: var(--font-mono); font-size: 12px; color: #E0A535; }
.rp-stage { position: relative; height: 168px; margin: 18px 16px 0; cursor: pointer; }
.rp-stage[role="img"] { cursor: default; }
.rp-field-slot, .rp-scenes, .rp-scene, .rp-td { position: absolute; inset: 0; pointer-events: none; }
.rp-field { display: block; }
.rp-pin { position: absolute; width: 36px; }
.rp-pin-pop { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.rp-pin-head { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #111;
  box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.rp-pin-head .head { margin: 0; border: 0; }
.rp-stick { width: 2px; height: 22px; background: rgba(255,255,255,.85); }
.rp-foot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #fff; box-sizing: border-box; }
.rp-mover { position: absolute; inset: 0; }
.rp-dot { position: absolute; width: 4px; height: 4px; border-radius: 2px; background: #fff; opacity: 0; }
.rp-run { position: absolute; height: 3px; border-radius: 1.5px; transform-origin: 0 50%; }
.rp-td-logo { position: absolute; width: 88px; height: 88px; object-fit: contain; opacity: 0; }
.rp-ray { position: absolute; width: 2px; height: 22px; border-radius: 1px; background: #fff; opacity: 0;
  transform-origin: 50% 50%; }
.rp-word { position: absolute; left: 0; right: 0; display: flex; justify-content: center; opacity: 0; }
.rp-letter { font-family: var(--font-tab); font-weight: 700; font-size: 44px; line-height: 48px;
  text-shadow: 0 2px 6px rgba(0,0,0,.55); display: inline-block; }
.rp-cap { padding: 0 20px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.rp-cap-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-cap-logo { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.rp-cap-lead { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cap-tag { font-family: var(--font-tab); font-weight: 600; font-size: 10px; letter-spacing: .16em;
  color: #9EA4AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-cap-body { font-size: 13px; line-height: 18px; color: #9EA4AC; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-cap-err { color: #FFB4A8; }
.rp-progress { display: flex; gap: 5px; margin-top: 4px; }
.rp-progress span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.22); }
.rp-progress span.on { background: var(--win); }
.rp-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; margin-top: 18px; }
.rp-tile { flex: 1 0 78px; padding: 10px 12px; border-radius: 4px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10); }
.rp-tile-v { font-family: var(--font-mono); font-weight: 700; font-size: 18px; }
.rp-tile-k { font-family: var(--font-tab); font-weight: 600; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #9EA4AC; margin-top: 2px; }
@media (max-width: 480px) {
  .rp { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}