/* Big "Dig" Energy: styles
   Colors and fonts are the variables at the top (:root). Change those first.
   After uploading a new version, refresh the page twice if you still see the old look. */

/* Rules are layered: base layout first, then the broadcast layout, then the retro theme at the bottom wins.
   Every color and font lives in the one :root block below. */
:root {
  color-scheme: light;
  /* surfaces and text */
  --bg: #EADFC6;
  --surface: #F6EEDB;
  --solid: #F6EEDB;
  --fg: #06262A;
  --muted: #43605F;             /* 5.1:1 on --bg */
  --line: rgba(6,38,42,.2);
  /* dark bands (header, standings, leaderboard, players) */
  --band: #06262A;
  --deep: #0A3338;
  --on-band: #FFF4DC;
  --band-muted: #9FC4BF;
  /* brand */
  --ink: #06262A;
  --cream: #FFF4DC;
  --teal: #0F6B6B;
  --yel: #FFC93C;
  --rose: #F0A3B8;
  --accent: #FF5A1F;
  --on-accent: #06262A;         /* text on orange: white only reaches 3.1:1, ink reaches 5:1 */
  --accent-ink: #B83A08;        /* orange for text on light surfaces, 5:1 */
  --accent-hi: #FF7A45;
  --btn: #06262A;
  --btn-ink: #FFF4DC;
  /* status */
  --danger: #B3261E;
  --win: #0E8A58;
  --win-ink: #0B7A4E;
  --win-on-dark: #46E0A0;
  --loss-on-dark: #FF7B7B;
  /* team colors; --tag* are darker fills so small white tag text stays readable */
  --c0: #3B7BFF;
  --c1: #E0A800;
  --c2: #12A87B;
  --onc0: #FFFFFF;
  --onc1: #1A1203;
  --onc2: #FFFFFF;
  --tag0: #2B61BF;
  --tag2: #0D7A59;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  padding-block: 20px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.app { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
main { display: flex; flex-direction: column; gap: 20px; }
.k0 { --cc: var(--c0); } .k1 { --cc: var(--c1); } .k2 { --cc: var(--c2); }
.kn { --cc: var(--muted); }

header.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
h1 { font: 700 2.4rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.status { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c2); }
.status[data-k="saving"]::before { background: var(--c1); }
.status[data-k="local"]::before { background: var(--muted); }

.tabs, .seg { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs button, .seg button { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--muted); font: 600 1rem var(--font-body); border-radius: 9px; cursor: pointer; padding: 0 12px; }
.tabs button[aria-current="page"], .seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.seg { background: var(--bg); }
.seg button { min-height: 40px; font-size: .9rem; }

.daybar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.daybar .f { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font: 700 1.35rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.hint { color: var(--muted); margin: 0; font-size: .95rem; }
label, legend, .lbl { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

button { font-family: var(--font-body); }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg); font: 500 1.05rem var(--font-body); min-width: 0;
}
textarea { min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.btn { min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-ink); font: 600 1rem var(--font-body); cursor: pointer; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: .92rem; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* standings */
.st { display: grid; grid-template-columns: 1.4rem minmax(0,1fr) repeat(3, 2rem) repeat(2, 2.6rem) 3rem; align-items: center; gap: 0 6px; padding: 10px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.st.head { border-top: 0; padding-block: 0 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.st .n { text-align: right; }
.st .who { display: flex; flex-direction: column; min-width: 0; }
.st .who b { font: 700 1.3rem/1.1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; }
.st .who small { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.st .rank { font: 700 1.1rem var(--font-display); color: var(--muted); }
.st .rec { font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 4px; background: var(--cc); flex: none; display: inline-block; }
.lead .who b { font-size: 1.5rem; }

/* form */
.pairs { display: grid; gap: 8px; }
.pair { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); font: 600 1.05rem var(--font-body); cursor: pointer; }
.pair[aria-pressed="true"] { border-color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--fg); }
.vs { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.pair span.t { display: inline-flex; align-items: center; gap: 6px; }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scorebox { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 2px solid var(--cc); min-width: 0; }
.scorebox label { color: var(--fg); display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.scorebox input { font: 700 2.2rem/1 var(--font-display); text-align: center; min-height: 64px; background: var(--surface); }
.winners { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.win { min-height: 56px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--fg); font: 600 1rem var(--font-body); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; overflow-wrap: anywhere; }
.win[aria-pressed="true"] { border-width: 4px; border-color: var(--cc, var(--fg)); background: color-mix(in srgb, var(--cc, var(--fg)) 16%, var(--surface)); }
.win[aria-pressed="true"]::after { content: "✓"; font-weight: 700; }
.win.tie { --cc: var(--muted); padding-inline: 18px; }
.note { font-size: .9rem; color: var(--muted); margin: 0; }
.ok { color: var(--c2); font-weight: 600; }

/* log */
ul.log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 10px; align-items: start; }
.game { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.match { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; }
.side { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.side.r { justify-content: flex-end; text-align: right; }
.side .nm { overflow-wrap: anywhere; }
.side.w .nm { font-weight: 700; }
.side .sc { font: 700 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.side .tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--cc); color: var(--bg); }
.empty { color: var(--muted); }

/* teams */
ol.draft { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ol.draft li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 12px; }
ol.draft .num { font: 700 1.6rem/1 var(--font-display); width: 1.6rem; color: var(--muted); }
ol.draft .nm { flex: 1; min-width: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
ol.draft button { width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 1.2rem; cursor: pointer; }
ol.draft button:disabled { opacity: .3; cursor: not-allowed; }
.cap { border: 2px solid var(--cc); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.cap .badge { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--cc); color: var(--bg); margin-left: 6px; }
.players { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.players li { display: flex; align-items: center; gap: 6px; padding: 0 2px 0 10px; min-height: 48px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.players .pn { font: 700 .9rem var(--font-display); color: var(--muted); }
.players li button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; border-radius: 50%; }
.addrow { display: flex; gap: 8px; }
.addrow input { flex: 1; }

/* player stats */
.pl { display: grid; grid-template-columns: 1.4rem minmax(0,1fr) repeat(3, 2rem) 3.4rem; gap: 0 6px; align-items: center; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font: 500 1rem var(--font-body); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.pl.head { cursor: default; min-height: 0; border-top: 0; padding-block: 0 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pl[aria-pressed="true"] { background: var(--bg); border-radius: 8px; font-weight: 700; }
.pl .n { text-align: right; }
.pl .rank { font: 700 1.1rem var(--font-display); color: var(--muted); }
.pl .nm { overflow-wrap: anywhere; }
.pdetail { border: 2px solid var(--fg); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pname { font: 700 1.8rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.pline { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pline span { display: flex; flex-direction: column; font: 700 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pline i { font: 600 .7rem var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
ul.plog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.plog li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
ul.plog small { color: var(--muted); }
ul.plog b { font-weight: 700; text-align: right; }
.auth { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid var(--danger); border-radius: 12px; background: var(--bg); }
.auth .err { color: var(--danger); font-weight: 600; }

/* look v4: broadcast site layout, fluid */
html { font-size: clamp(16px, 0.55vw + 12px, 20px); background: var(--bg); }
body { margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); background-color: var(--bg); background-image: none; }
.app { max-width: none; margin: 0; display: block; }
.wrap { width: 100%; max-width: 1560px; margin: 0 auto; padding-left: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k0 { --cc: var(--c0); --onc: var(--onc0); --tagc: var(--tag0); } .k1 { --cc: var(--c1); --onc: var(--onc1); --tagc: var(--c1); } .k2 { --cc: var(--c2); --onc: var(--onc2); --tagc: var(--tag2); }
main { display: block; padding: 0; }
.band { padding-block: clamp(1.8rem, 4vw, 3.4rem); scroll-margin-top: 9rem; }
.band > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.b-tool { background: #F4F6FB; padding-block: 1.2rem; }
.b-st { background: #FFFFFF; }
.b-rec { background: #2B2F36; }
.b-vid { background: #E5EBF7; }
.b-pl { background: #5C1230; }
.b-lb { background: radial-gradient(900px 340px at 50% -8%, rgba(217,72,111,.42), transparent 70%), linear-gradient(180deg, #0A1F44, #0E2B5C); color: #fff; }
.b-aw { background: linear-gradient(180deg, #FBF6EC, #F3EADA); }
.b-cap { background: #E5EBF7; }
.b-ex { background: #F1EDEA; }
.b-st .panel { box-shadow: 0 2px 10px rgba(10,31,68,.09); }

.b-pl .panel { border-color: transparent; box-shadow: 0 14px 30px -14px rgba(0,0,0,.65); }
.video { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 1200px; margin-inline: auto; border-radius: 8px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-top: .4rem; }
.vthumb { display: flex; flex-direction: column; gap: .5rem; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--fg); font: 700 .9rem/1.25 var(--font-body); min-width: 0; }
.vthumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #D9DEE9; transition: transform .15s ease, box-shadow .15s ease; }
.vthumb span { overflow-wrap: anywhere; }
@media (hover: hover) { .vthumb:hover img { transform: translateY(-3px); box-shadow: 0 10px 18px -10px rgba(10,31,68,.6); } .vthumb:hover span { color: var(--accent); } }
.namelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .6rem 1rem; }
.namelist li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.namelist input { flex: 1; min-width: 0; }
.namelist .cnt { color: var(--muted, #5B6478); font-size: .8rem; white-space: nowrap; }
.result { margin: .2rem 0 .8rem; padding: .7rem 1rem; border-left: 4px solid var(--accent); background: rgba(10,31,68,.06); font-weight: 700; }
.tr.unq .who b { color: var(--muted); }
.pick + .seg, .sechead .seg { align-self: center; }
.quick { max-width: 640px; margin: 0 auto; padding-top: 1rem; }
.qtop { display: flex; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.qtop select { flex: 1; min-height: 52px; font-size: 1.1rem; }
.qcount { color: var(--muted); font-weight: 700; white-space: nowrap; }
.quick .pair { min-height: 64px; font-size: 1.1rem; }
.quick .scorebox input { font-size: 3.2rem; min-height: 84px; }
.btn.big { min-height: 60px; font-size: 1.2rem; flex: 1; }
.qrow { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 1.1rem; }
.qrow b { flex: 1; } .qrow .rec { font: 900 1.4rem var(--font-display); }
.qlog { list-style: none; margin: 0; padding: 0; } .qlog li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
body.gameday .hero, body.gameday .foot { display: none; }
.wllist { list-style: none; margin: .8rem 0 0; padding: 0; } .wllist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.spad { margin: .4rem 0 1rem; }
.sphead { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sphead h3 { margin: 0; font: 900 1.2rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.steam { border-left: 6px solid var(--cc); background: color-mix(in srgb, var(--cc) 7%, var(--solid, #fff)); border-radius: 10px; padding: .6rem .7rem; margin-top: .7rem; }
.stname { display: flex; align-items: center; gap: .4rem; font: 900 1.25rem var(--font-display); text-transform: uppercase; margin-bottom: .3rem; }
.steam ul { list-style: none; margin: 0; padding: 0; }
.steam li { padding: .55rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.steam .pn em { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--muted); margin-left: .5rem; }
.steam .pn { display: block; font-weight: 800; margin-bottom: .35rem; overflow-wrap: anywhere; }
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cell { position: relative; display: block; min-width: 0; }
button.stat { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border: 2px solid var(--line); border-radius: 8px; background: var(--solid, #fff); color: var(--fg); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s ease, background-color .08s ease; }
button.stat i { font: 700 .7rem var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
button.stat b { font: 900 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
button.stat:active { transform: scale(.94); background: color-mix(in srgb, var(--cc) 20%, #fff); }
button.stat.t-s { border-color: #D9486F; } button.stat.t-k { border-color: #E07A1F; } button.stat.t-b { border-color: #0A1F44; } button.stat.t-a { border-color: #7B4FD6; } button.stat.t-c { border-color: #12A87B; }
button.stat.t-e { border-color: var(--danger); border-style: dashed; } button.stat.t-n { border-color: var(--danger); border-style: dotted; }
button.stat i { text-align: center; line-height: 1.15; }
button.minus.m2 { font-size: .95rem; }
/* the minus is its own strip under each stat button, so the two hit areas never overlap */
div.cell { display: flex; flex-direction: column; gap: 4px; }
button.minus { width: 100%; min-height: 32px; border-radius: 4px; border: 1.5px solid var(--line); background: transparent; color: var(--fg); font: 900 1.1rem/1 var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
@media (hover: hover) { button.minus:hover { border-color: var(--danger); color: var(--danger); } }
button.minus:active { background: color-mix(in srgb, var(--danger) 14%, transparent); }
label.cell i { display: block; font: 700 .7rem var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
label.cell input { width: 100%; min-height: 48px; text-align: center; font: 800 1.3rem var(--font-body); }
.gst { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
/* points leaderboard */
.b-lb .panel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.b-lb .panel h2, .b-lb .panel h3 { color: #fff; }
.b-lb .hint, .b-lb .empty { color: rgba(255,255,255,.72); }
.b-lb .seg { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.b-lb .seg button { color: rgba(255,255,255,.8); }
.podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: clamp(.4rem, 2vw, 1.2rem); align-items: end; margin: 2.2rem auto 1.4rem; max-width: 52rem; }
.pod { --medal: #C9D1DD; position: relative; text-align: center; padding: 1.7rem .5rem 1rem; border-radius: 16px 16px 4px 4px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); border-top: 4px solid var(--medal); min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.pod.p1 { --medal: #F5C242; min-height: 15.5rem; box-shadow: 0 0 40px -6px rgba(245,194,66,.55); }
.pod.p2 { min-height: 12.8rem; }
.pod.p3 { --medal: #D58A4B; min-height: 11.4rem; }
.pod .medal { position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; font: 900 1.35rem var(--font-display); color: #1B1B1B; background: radial-gradient(circle at 30% 28%, #fff, var(--medal) 62%); box-shadow: 0 8px 16px rgba(0,0,0,.45); }
.pod .nm { font: 900 clamp(1.05rem, 3.6vw, 1.8rem)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; margin-top: .6rem; }
.pod .pt { font: 900 clamp(2.2rem, 8vw, 3.8rem)/1 var(--font-display); color: var(--medal); margin-top: .5rem; font-variant-numeric: tabular-nums; }
.pod .pt small { display: block; font: 700 .65rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .15rem; }
.pod .mini { font-size: .75rem; color: rgba(255,255,255,.78); margin-top: .5rem; }
.pod .pb { margin-top: .35rem; min-height: 1.4rem; }
.lboard { max-width: 52rem; margin: 0 auto; }
.lrow { display: grid; grid-template-columns: 2.2rem minmax(0, 1.4fr) minmax(4rem, 2fr) 3.4rem; gap: .7rem; align-items: center; padding: .7rem .6rem; border-top: 1px solid rgba(255,255,255,.14); transition: background-color .15s ease, transform .15s ease; }
.lrow .rk { font: 900 1.3rem var(--font-display); color: rgba(255,255,255,.55); }
.lrow .who { display: flex; flex-direction: column; min-width: 0; }
.lrow .who b { font: 900 1.25rem/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.lrow .who small { color: rgba(255,255,255,.65); font-size: .78rem; }
.lrow .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.lrow .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-hi), var(--rose)); }
.lrow .lpt { text-align: right; font: 900 1.6rem var(--font-display); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pod:hover { transform: translateY(-5px); } .lrow:hover { background: rgba(255,255,255,.08); transform: translateX(4px); } }
@media (max-width: 640px) { .lrow { grid-template-columns: 1.8rem minmax(0, 1fr) 3rem; } .lrow .bar { display: none; } .pod .mini { display: none; } }
.bdg { font-size: .72rem; line-height: 1; }
.bdgrow { display: flex; flex-wrap: wrap; gap: 2px 3px; margin-top: .15rem; min-height: .8rem; }
.pod .pb { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 4px; }
.pod .pb .bdg { font-size: .9rem; }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .7rem; }
.chipb { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 99px; background: linear-gradient(180deg, #FFF3C4, #F5D56B); color: #4A3500; font: 800 .8rem var(--font-body); box-shadow: 0 2px 6px -2px rgba(224,168,0,.7); }
/* awards */
.b-aw .panel { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.award { display: flex; gap: 1rem; align-items: center; padding: 1.1rem; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: 0 8px 20px -14px rgba(60,40,0,.5); transition: transform .18s ease, box-shadow .18s ease; }
.award .abadge { flex: none; width: 3.9rem; height: 3.9rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: radial-gradient(circle at 30% 25%, #fff, #F7E3A1 55%, #E0A800); box-shadow: inset 0 -5px 9px rgba(0,0,0,.16), 0 8px 14px -6px rgba(224,168,0,.7); }
.award h3 { margin: 0; font: 900 1.25rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.award p { margin: .1rem 0 0; }
.award .adesc { color: var(--muted); font-size: .8rem; }
.award .holder { font-weight: 800; color: var(--accent); overflow-wrap: anywhere; }
.award .aval { color: var(--fg); font-weight: 600; font-size: .85rem; margin-left: .3rem; }
.award .holder.none { color: var(--muted); font-weight: 600; }
@media (hover: hover) { .award:not(.empty):hover { transform: translateY(-4px); box-shadow: 0 16px 28px -14px rgba(60,40,0,.55); } }
.dt { font: 600 .9rem var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: .5rem; }
.warnt { color: var(--danger); font-weight: 700; }
.filebtn { cursor: pointer; display: inline-flex; align-items: center; }
.restorebox { margin-top: .8rem; padding: 1rem; border: 2px solid var(--accent); border-radius: 10px; background: rgba(255,255,255,.55); }
.rolebadge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .8rem; border-radius: 4px; background: var(--accent); color: var(--on-accent); font: 800 .75rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.band { position: relative; overflow: hidden; isolation: isolate; }
.badge-s { display: inline-block; font: 800 .7rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.game { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tr .who b, .tr .rank { transition: transform .15s ease, color .15s ease; }

/* jump menu */
.jump { background: rgba(0,0,0,.2); border-top: 1px solid rgba(255,255,255,.12); }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-block: .45rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 40px; padding: 0 1.1rem; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--band-muted); font: 800 .78rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.chips button:hover { color: var(--on-band); }
.chips button[aria-current="true"] { background: var(--on-band); color: var(--band); }
.jumpsel { display: none; width: 100%; min-height: 44px; margin-block: .5rem; background: #14346B; color: var(--on-band); border: 1px solid rgba(255,255,255,.28); border-radius: 10px; font: 700 1rem var(--font-body); padding: 0 .8rem; }

/* nav */
header.top { display: block; position: sticky; top: 0; z-index: 30; background: var(--band); color: var(--on-band); padding: env(safe-area-inset-top, 0px) 0 0; border-bottom: 3px solid var(--accent-hi); border-radius: 0; }
.navin { display: flex; align-items: center; gap: .3rem 1.4rem; flex-wrap: wrap; padding-block: .5rem; }
.brand { font: 900 1.6rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; margin-right: auto; color: var(--on-band); overflow-wrap: anywhere; }
.brand::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--accent-hi); margin-right: .45em; }
header .tabs { background: transparent; border: 0; padding: 0; gap: .2rem; border-radius: 0; }
header .tabs button { flex: none; min-height: 48px; padding: 0 1rem; color: var(--band-muted); border-radius: 0; background: transparent; box-shadow: none; font: 800 .8rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; border-bottom: 3px solid transparent; }
header .tabs button[aria-current="page"] { background: transparent; color: var(--on-band); box-shadow: none; border-bottom-color: var(--accent-hi); }
.navr { display: flex; align-items: center; gap: .8rem; }
.status { background: transparent; border: 0; padding: 0; color: var(--band-muted); font-weight: 600; font-size: .8rem; }
header .btn.ghost { background: transparent; color: var(--on-band); border: 1.5px solid rgba(255,255,255,.35); }
#signin, #signin-k { margin-top: 1.2rem; margin-bottom: 1.6rem; max-width: 30rem; }
@media (max-width: 640px) {
  /* on the dark page the box gets a light edge, room inside, and a gap before the banner below */
  #signin, #signin-k { margin: 1rem 0 1.75rem; padding: 1.25rem 1.15rem 1.4rem; gap: .9rem; border-color: var(--cream); box-shadow: 5px 5px 0 var(--accent); }
  #signin h2, #signin-k h2 { margin: 0; line-height: 1.15; }
  #signin .hint, #signin-k .hint { margin: 0; line-height: 1.5; }
}
.panel-form { display: flex; flex-direction: column; gap: 14px; }

/* hero + ticker */
.heroband { background: radial-gradient(900px 420px at 88% -30%, rgba(176,38,86,.50), transparent 60%), radial-gradient(700px 420px at -5% 120%, rgba(59,123,255,.28), transparent 60%), var(--band); color: var(--on-band); }
.hero { display: grid; gap: 1.2rem; padding-block: clamp(2.2rem, 6vw, 5rem) clamp(1.8rem, 4vw, 3.2rem); }
.eyebrow { font: 800 .8rem var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.hero h1 { font: 900 clamp(3rem, 9.5vw, 8rem)/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--on-band); margin: 0; background: none; -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; }
.hero p { color: var(--band-muted); max-width: 48ch; font-size: 1.1rem; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn.light { background: transparent; color: var(--on-band); border: 1.5px solid rgba(255,255,255,.5); }
.cta .btn:not(.light) { border-color: rgba(255,255,255,.35); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; overflow: hidden; margin-top: .6rem; }
.hero .stat { background: var(--band); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.hero .stat b { font: 900 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.hero .stat span { font: 700 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--band-muted); }
.ticker { background: var(--accent); color: var(--on-accent); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker-track span { padding: .75rem 1.8rem; white-space: nowrap; font: 700 .9rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.ticker-track b { font-weight: 900; }
.ticker-track em { font: 900 1.1rem var(--font-display); font-style: normal; opacity: .8; margin-right: .45rem; }
.ticker-track .lbl { font-weight: 900; letter-spacing: .14em; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker { overflow-x: auto; } }

/* cards and sections */
.panel, .cap { border-radius: 16px; background: var(--solid); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,31,68,.07); backdrop-filter: none; -webkit-backdrop-filter: none; padding: clamp(1rem, 2vw, 1.7rem); }
.cap { border: 2px solid var(--cc); }
h2 { font: 900 1.8rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; display: block; border: 0; padding: 0; align-self: auto; }
label, legend, .lbl { font-weight: 800; letter-spacing: .08em; }
.lbl { margin: 0; }
.sechead { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.2rem; }
.daybar .f { max-width: 34rem; }
.pick select { min-width: 14rem; }
.seg { border-radius: 6px; background: var(--solid); border: 1px solid var(--line); }
.seg button { border-radius: 4px; font: 800 .78rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--band); color: var(--on-band); box-shadow: none; }

/* buttons and inputs */
.btn { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); border-radius: 4px; font: 800 .82rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; padding: 0 1.5rem; }
.btn.small { padding: 0 1.1rem; }
.btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line); }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn.light { background: transparent; color: var(--on-band); border: 1.5px solid rgba(255,255,255,.5); }
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select, textarea { border-radius: 10px; border-width: 1.5px; background: var(--solid); }
.dot { border-radius: 3px; background: var(--cc); }

/* leaderboard tables */
.tbl { display: flex; flex-direction: column; }
.tr { display: grid; align-items: center; column-gap: .5rem; width: 100%; padding: .75rem .4rem; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font: 600 1rem var(--font-body); text-align: left; font-variant-numeric: tabular-nums; min-height: 48px; }
.tr.head { border-top: 0; padding-block: 0 .5rem; min-height: 0; font: 800 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.standings .tr { grid-template-columns: 2.4rem minmax(0, 2.8fr) repeat(8, minmax(2.4rem, 1fr)); }
.playerstbl .tr { grid-template-columns: 2.4rem minmax(0, 2.8fr) repeat(14, minmax(2.3rem, 1fr)); }
.tr .n { text-align: right; }
.tr .rank { font: 900 1.4rem var(--font-display); color: var(--muted); }
.tr.lead .rank { color: var(--accent-ink); }
.tr .who { display: flex; flex-direction: column; min-width: 0; gap: .15rem; }
.tr .who b { font: 900 1.55rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.tr .who small { color: var(--muted); font: 500 .85rem var(--font-body); overflow-wrap: anywhere; }
.tr .w { color: var(--win); font-weight: 800; }
.tr.selrow { cursor: pointer; }
.tr.selrow.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.plbtn { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }

/* forms and log */
.pair { border-radius: 12px; background: var(--solid); }
.pair[aria-pressed="true"] { border-color: var(--accent); background: var(--solid); box-shadow: inset 0 0 0 1px var(--accent); }
.scorebox { border-radius: 14px; background: color-mix(in srgb, var(--cc) 9%, var(--solid)); }
.scorebox input { font: 900 2.6rem/1 var(--font-display); background: var(--solid); border-radius: 10px; }
.win { border-radius: 12px; background: var(--solid); }
.game { border-radius: 12px; }
.side .sc { font: 900 2rem/1 var(--font-display); }
.side .tag, .cap .badge { background: var(--tagc, var(--cc)); color: var(--onc, #fff); border-radius: 4px; padding: 3px 8px; }
ol.draft li { border-radius: 12px; }
ol.draft .num { font-family: var(--font-display); font-weight: 900; }
.pdetail { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; background: var(--solid); }
.pname { font: 900 2.2rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pline span { font: 900 2.3rem/1 var(--font-display); }
.pline span:first-child { color: var(--win); }
.auth { border-radius: 12px; background: var(--solid); }
.foot { background: var(--band); color: var(--band-muted); padding-block: 1.8rem; font-size: .9rem; }

/* button hover */
.btn, .seg button, .chips button, .pair, .win, header .tabs button, .tr.selrow { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 8px 16px -8px rgba(10,31,68,.55); }
  .btn.ghost:hover:not(:disabled) { filter: none; border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--solid)); }
  .btn.danger:hover:not(:disabled) { filter: none; background: var(--danger); color: #fff; }
  .btn.light:hover { filter: none; background: rgba(255,255,255,.16); border-color: #fff; }
  header .btn.ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
  .seg button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); }
  .chips button:not([aria-current="true"]):hover { background: rgba(255,255,255,.14); color: var(--on-band); }
  header .tabs button:not([aria-current="page"]):hover { color: var(--on-band); border-bottom-color: rgba(255,255,255,.4); }
  .pair:not([aria-pressed="true"]):hover, .win:not([aria-pressed="true"]):hover { border-color: var(--accent); transform: translateY(-1px); }
  .tr.selrow:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 4px 0 0 var(--accent); }
  .tr.selrow:hover .who b { color: var(--accent); transform: translateX(8px); }
  .tr.selrow:hover .rank { color: var(--accent); }
  .game:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(10,31,68,.55); border-color: var(--accent); }
}
.btn:active:not(:disabled) { transform: translateY(0); filter: none; }
@media (prefers-reduced-motion: reduce) { .btn, .pair, .win { transition: none; } .btn:hover, .pair:hover, .win:hover, .game:hover, .tr.selrow:hover .who b { transform: none !important; } }

/* teams: three across on desktop */
@media (min-width: 900px) {
  .b-cap > .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .standings .tr, .playerstbl .tr { grid-template-columns: 1.6rem minmax(0, 1fr) repeat(3, 2.5rem); padding-inline: 0; }
  /* players keep Points on phones: rank, player, W, L, Win %, Pts */
  .playerstbl .tr { grid-template-columns: 1.6rem minmax(0, 1fr) repeat(2, 2.1rem) 2.7rem 2.4rem; column-gap: .4rem; }
  .standings .tr > :nth-child(5), .standings .tr > :nth-child(6), .standings .tr > :nth-child(8), .standings .tr > :nth-child(9), .standings .tr > :nth-child(10) { display: none; }
  .playerstbl .tr > :nth-child(5), .playerstbl .tr > :nth-child(6), .playerstbl .tr > :nth-child(n+8):nth-child(-n+14), .playerstbl .tr > :nth-child(16) { display: none; }
  .tr .who b { font-size: 1.25rem; }
  .navin { gap: .2rem 1rem; }
  .chips { display: none; }
  .jumpsel { display: block; }
  .band { scroll-margin-top: 10rem; }
}

@media (max-width: 460px) {
  h1 { font-size: 2rem; }
  .match { grid-template-columns: 1fr; gap: 6px; }
  .match .vs { display: none; }
  .side.r { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
  .winners { grid-template-columns: 1fr 1fr; }
  .win.tie { grid-column: 1 / -1; order: 3; }
}
/* ===== retro sports theme: teal ink, hot orange, sand (colors are in :root at the top) ===== */
body { background: var(--bg); color: var(--fg); padding-block: 0 0; }
.b-tool, .b-st, .b-rec, .b-vid, .b-pl, .b-cap, .b-ex, .b-aw, .b-lb { background: transparent; }
.b-st, .b-lb, .b-pl { background: var(--band); border-block: 3px solid var(--ink); }
.b-aw { background: #E2D4B3; border-block: 3px solid var(--ink); }

/* header */
header.top { background: var(--band); border-bottom: 4px solid var(--accent); }
.brand::before { display: none; }
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { height: 92px; width: auto; display: block; }
header .tabs button { font: 800 1rem var(--font-display); letter-spacing: .1em; color: var(--band-muted); }
header .tabs button[aria-current="page"] { color: var(--cream); border-bottom-color: var(--accent); }
header .btn.ghost { background: transparent; color: var(--cream); border: 2px solid var(--cream); box-shadow: none; }
.jumpsel { background: var(--deep); }

/* hero */
.heroband { background: radial-gradient(520px 380px at 50% 34%, #0E4B50 0, transparent 70%), var(--band); }
.hero { justify-items: center; text-align: center; gap: .9rem; padding-block: clamp(1.6rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.6rem); }
.herologo { width: min(440px, 76vw); height: auto; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.hero .eyebrow { font: 800 .85rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.hero .when { font: 800 clamp(1.15rem, 2.8vw, 1.7rem) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #C9DAD6; margin: 0; max-width: none; }
.hero .sub { color: var(--band-muted); max-width: 46ch; margin: 0; font-size: 1rem; }
.hero .cta { justify-content: center; }
.hero .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .9rem; width: min(100%, 62rem); background: none; border: 0; margin-top: .8rem; }
.hero .stat { background: var(--deep); border: 2px solid rgba(255,244,220,.35); border-radius: 2px; box-shadow: 4px 4px 0 var(--accent); backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; }
.hero .stat b { font-family: var(--font-display); font-weight: 900; color: var(--cream); }
.hero .stat span { color: var(--band-muted); }
.ticker { background: var(--accent); color: var(--on-accent); border-block: 3px solid var(--ink); }
.ticker-track span { font: 800 1.05rem var(--font-display); letter-spacing: .08em; }
.ticker-track span::after { content: "\2605"; margin-left: 1.8rem; }

/* cards and buttons */
.panel, .cap { background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.panel h2, .cap h2, .sechead h2 { font: 900 clamp(1.7rem, 3.2vw, 2.3rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.panel input[type="text"], .panel input[type="email"], .panel input[type="number"], .panel input[type="date"], .panel select, .daybar select { background: #FFFBEF; border: 2px solid var(--ink); border-radius: 2px; }
.btn { background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 4px 4px 0 var(--ink); font: 800 1.02rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border: 2px solid var(--danger); box-shadow: none; }
.btn.light { background: transparent; color: var(--cream); border: 2px solid var(--cream); box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.btn.small { font-size: .95rem; box-shadow: 3px 3px 0 var(--ink); }
.tabs, .seg { background: var(--cream); border: 2px solid var(--ink); border-radius: 2px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.seg button { font: 800 .95rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; border-radius: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.game { background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; }
.pair { background: var(--cream); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); }
.pair[aria-pressed="true"] { background: var(--yel); box-shadow: 3px 3px 0 var(--ink); }
.steam { background: color-mix(in srgb, var(--cc) 12%, var(--cream)); border-radius: 2px; }
.badge-s { border-radius: 2px; }

/* dark table panels (standings, leaderboard, player stats) */
.b-st .panel, .b-lb .panel, .b-pl .panel { background: var(--deep); color: var(--cream); border: 2px solid var(--cream); box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.b-st .panel h2, .b-lb .panel h2, .b-pl .panel h2 { color: var(--cream); }
.b-st .hint, .b-lb .hint, .b-pl .hint, .b-st .note, .b-pl .note, .b-lb .empty, .b-pl .empty, .b-st .empty { color: var(--band-muted); }
.b-st .tr, .b-pl .tr { color: var(--cream); border-top: 1px solid rgba(255,244,220,.1); }
.b-st .tr.head, .b-pl .tr.head { color: var(--band-muted); border-bottom: 2px solid rgba(255,244,220,.28); padding-bottom: .6rem; font: 800 .85rem var(--font-display); letter-spacing: .12em; }
.b-st .tr:not(.head):nth-child(odd), .b-pl .tr:not(.head):nth-child(odd) { background: rgba(255,244,220,.04); }
.b-st .tr .rank, .b-pl .tr .rank { color: var(--accent-hi); font-size: 1.7rem; }
.b-st .tr .who small, .b-pl .tr .who small { color: var(--band-muted); }
.b-st .tr .w, .b-pl .tr .w { color: var(--win-on-dark); }
.b-st .tr.lead .rank, .b-pl .tr.lead .rank { color: var(--yel); }
.b-pl .tr.unq .who b { color: var(--band-muted); }
.b-pl .tr:not(.unq) + .tr.unq { border-top: 2px dashed var(--accent); }
.b-pl .tr.selrow.on { background: rgba(255,90,31,.2); }
.b-st .seg, .b-lb .seg, .b-pl .seg { background: transparent; border-color: var(--cream); }
.b-st .seg button, .b-lb .seg button, .b-pl .seg button { color: var(--band-muted); }
.b-st .seg button[aria-pressed="true"], .b-lb .seg button[aria-pressed="true"], .b-pl .seg button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.b-pl .panel select, .b-st .panel select { background: var(--band); color: var(--cream); border: 2px solid var(--cream); }
.b-pl .pdetail { background: rgba(255,244,220,.06); border: 2px solid rgba(255,244,220,.3); border-radius: 0; color: var(--cream); }
.b-pl .pdetail .pline span, .b-pl .plog li { border-color: rgba(255,244,220,.15); color: var(--cream); }
.b-pl .pdetail .pline i, .b-pl .plog small { color: var(--band-muted); }
.chipb { background: rgba(255,244,220,.12); color: var(--cream); border: 1px solid rgba(255,244,220,.3); }

/* leaderboard */
.pod { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--accent); }
.pod.p1 { background: var(--yel); box-shadow: 6px 6px 0 var(--accent); }
.pod .nm, .pod .pt { color: var(--ink); font-family: var(--font-display); }
.pod .mini { color: #3E5A59; }
.pod .pt small, .pod .pt small * { color: #3E5A59 !important; opacity: 1; }
.lrow { color: var(--cream); border-color: rgba(255,244,220,.12); }
.lrow .rk { color: var(--accent-hi); font-family: var(--font-display); }
.lrow small { color: var(--band-muted); }
.lrow .bar { background: rgba(255,244,220,.1); border-radius: 0; }
.lrow .bar i { background: var(--accent); border-radius: 0; }
.lrow .lpt { color: var(--cream); font-family: var(--font-display); }

/* step chips, accordion, qualified bar */
.steps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.steps .s { display: inline-flex; gap: .5rem; align-items: center; border: 2px solid currentColor; padding: .3rem .65rem .3rem .3rem; font: 800 .95rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.steps .s i { font-style: normal; background: var(--accent); color: var(--on-accent);padding: 0 .45rem; }
.steps .ar { color: var(--accent-hi); font-weight: 800; }
details.how { border: 2px solid currentColor; }
details.how summary { list-style: none; cursor: pointer; padding: .8rem 1rem; font: 900 1.2rem var(--font-display); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary::after { content: "+"; color: var(--accent-hi); font-size: 1.6rem; line-height: 1; }
details.how[open] summary::after { content: "\2013"; }
details.how div { padding: 0 1rem 1rem; }
details.how p { margin: 0; }
.qhead { font: 900 1.5rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.qhead b { font-size: 2.4rem; margin-right: .2rem; }
.qhead small { font: 700 .85rem var(--font-body); color: var(--band-muted); text-transform: none; letter-spacing: 0; }
.qbar { display: flex; gap: 4px; flex-wrap: wrap; }
.qbar i { flex: 1 0 1.1rem; height: 1.2rem; background: rgba(255,244,220,.14); border: 1px solid rgba(255,244,220,.2); }
.qbar i.on { background: #2CC585; border-color: #2CC585; box-shadow: 0 3px 0 #0E8A58; }

/* awards */
.award { background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--teal); -webkit-backdrop-filter: none; backdrop-filter: none; }
.award:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--accent); }
.award:nth-child(3n) { box-shadow: 5px 5px 0 var(--yel); }
.award h3 { font-weight: 900; font-size: 1.45rem; }
.award .holder { color: var(--accent-ink); }
/* empty awards are dimmed through the badge and border only, so their text stays readable */
.award.empty { box-shadow: none; border-style: dashed; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.award.empty .abadge { filter: grayscale(1); opacity: .45; box-shadow: none; }

/* waitlist band + footer */
.foot { background: var(--band); color: var(--band-muted); padding: 0; }
.wlband { position: relative; overflow: hidden; background: #6B0F2A; border-block: 3px solid var(--ink); padding-block: clamp(2.4rem, 6vw, 4.8rem); }
.wlband .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 840px) { .wlband .wrap { grid-template-columns: minmax(0, 1fr) minmax(21rem, 28rem); gap: 3.5rem; } .wltext { padding-left: min(10vw, 8rem); } }
.wlband h2 { margin: 0 0 1rem; font: 900 clamp(3.4rem, 10vw, 6.8rem)/.86 var(--font-display); text-transform: uppercase; color: var(--cream); letter-spacing: .005em; }
.wlband h2 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--cream); font-size: .62em; font-weight: 800; margin-top: .1em; }
.wlband p { color: var(--cream); max-width: 38ch; margin: 0; line-height: 1.5; }
.wlghost { position: absolute; left: -4rem; bottom: -5rem; width: 20rem; max-width: 60vw; height: auto; opacity: .16; transform: rotate(-14deg); pointer-events: none; z-index: 0; }
.wlcard { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 var(--ink); padding: 1.3rem 1.4rem; display: grid; gap: .8rem; }
.wlcard h3 { margin: 0; font: 900 1.9rem/1 var(--font-display); text-transform: uppercase; }
.wlcard .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.wlcard label { display: block; font: 800 .72rem var(--font-body); letter-spacing: .06em; margin-bottom: .3rem; color: var(--ink); }
.wlcard input { width: 100%; min-height: 46px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); padding: 0 .65rem; font: 500 1rem var(--font-body); }
.wlcard .btn { width: 100%; min-height: 52px; border-radius: 0; box-shadow: none; }
.wlcard .btn:hover, .wlcard .btn:active { transform: none; box-shadow: none; filter: brightness(1.08); }
.wlcard input[type="email"], .wlcard input[type="text"] { width: 100%; min-height: 46px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); padding: 0 .65rem; }
.wlmsg { margin: 0; min-height: 1.2em; font-weight: 700; color: var(--danger); }
.wlmsg.ok { color: var(--win); }
/* season countdown under the waitlist */
.cdband { padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.cdwrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.5rem; }
.cdhead h2 { margin: 0; font: 900 clamp(2rem, 5vw, 3rem)/.95 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); }
.cdhead p { margin: .4rem 0 0; color: var(--band-muted); font-weight: 600; }
.cd { display: grid; grid-template-columns: repeat(4, minmax(4.6rem, 1fr)); gap: .8rem; }
.cdu { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .6rem .6rem; background: var(--deep); border: 2px solid rgba(255,244,220,.35); box-shadow: 4px 4px 0 var(--accent); }
.cdu b { font: 900 clamp(2.2rem, 6vw, 3.4rem)/1 var(--font-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.cdu span { font: 700 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--band-muted); }
.cdover { margin: 0; color: var(--cream); font: 800 1.2rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 640px) { .cdwrap { justify-content: center; text-align: center; } .cd { width: 100%; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .cdu { padding-inline: .2rem; } }


.chips { gap: .15rem; }
.chips button { padding: 0 .8rem; letter-spacing: .08em; }
/* ===== draft board and movement arrows ===== */
.mv { display: inline-block; font: 900 .78rem/1 var(--font-display); letter-spacing: .04em; padding: .22rem .38rem; border-radius: 2px; margin-left: .45rem; white-space: nowrap; vertical-align: middle; }
.mv.up { color: var(--win-ink); background: color-mix(in srgb, var(--win) 14%, transparent); }
.mv.dn { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.b-lb .mv.up, .b-pl .mv.up, .b-st .mv.up { color: var(--win-on-dark); background: color-mix(in srgb, var(--win-on-dark) 14%, transparent); }
.b-lb .mv.dn, .b-pl .mv.dn, .b-st .mv.dn { color: var(--loss-on-dark); background: color-mix(in srgb, var(--loss-on-dark) 14%, transparent); }
.pod .mv { font-size: .7rem; margin-left: .3rem; }
.pod .mv.up { color: var(--win-ink); background: color-mix(in srgb, var(--win) 16%, transparent); }
.pod .mv.dn { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.b-dr { background: transparent; }
.drafttbl .tr { grid-template-columns: 2.4rem minmax(0, 2fr) repeat(2, minmax(2.6rem, 1fr)) minmax(4.6rem, 1.2fr) repeat(2, minmax(2.6rem, 1fr)) minmax(11rem, 1.7fr); }
/* best pick: the pick number with the week it happened underneath */
.drafttbl .bestc b { display: block; font-weight: 900; }
.drafttbl .bestc small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.drafttbl .tr.head { color: var(--muted); border-bottom: 2px solid var(--ink); }
.drafttbl .tr:not(.head):nth-child(even) { background: rgba(6,38,42,.05); }
.drafttbl .tr .rank { color: var(--accent-ink); font-size: 1.6rem; }
.drafttbl .tr .w { color: var(--ink); font-weight: 900; }
.hm { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; align-items: end; }
.hm i { height: 1.1rem; background: rgba(255,90,31,var(--a, 0)); outline: 1px solid rgba(6,38,42,.16); outline-offset: -1px; min-width: 0; }
.drafttbl .head .hm { display: block; text-align: left; }
@media (max-width: 640px) {
  .drafttbl .tr { grid-template-columns: 2.1rem minmax(0, 1fr) repeat(2, 2.6rem) 4rem; }
  .drafttbl .tr .rank { font-size: 1.3rem; }
  .drafttbl .tr > :nth-child(n+6) { display: none; }
  .drafttbl .tr .who b { font-size: 1.2rem; flex-wrap: wrap; }
}
@media (max-width: 640px) { .brand img { height: 78px; } .wlcard .two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { color-scheme: light; } body { margin: 0; } [hidden] { display: none !important; }
input[type="email"] { width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: 500 1.05rem var(--font-body); min-width: 0; }


/* ===== game day: side by side on iPad and desktop, one column with a pinned score bar on phones ===== */
.qgrid { display: grid; gap: 12px; }
.qgrid .steam { margin-top: 0; }
.qscore { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.qscore .scores { gap: 10px; }
.qscore .result { margin: 0; }
.qscore .row { margin: 0; }
.qlower { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  #view.quick { max-width: none; padding-top: 0; }
  .wrap.quick { max-width: 1480px; padding-top: .6rem; }
  .qtop { margin-bottom: .5rem; }
  .qtop select { min-height: 46px; font-size: 1rem; max-width: 22rem; }
  .quick .qform { padding: .8rem 1rem; gap: .6rem; }
  .quick .qform > h2 { font-size: 1.5rem; }
  .quick .pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .quick .pair { min-height: 48px; font-size: 1rem; padding: 4px 10px; }
  .quick .spad { margin: 0; }
  .quick .sphint { display: none; }
  .quick .sphead h3 { font-size: 1.05rem; }
  .qgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, .85fr); align-items: start; gap: 14px; }
  .quick .steam { padding: .4rem .6rem; }
  .quick .stname { font-size: 1.2rem; margin-bottom: .1rem; }
  .quick .steam li { padding: .35rem 0; }
  .quick .steam .pn { margin-bottom: .25rem; font-size: .95rem; }
  .quick button.stat { min-height: 50px; }
  .quick button.stat b { font-size: 1.6rem; }
  .quick button.stat i { font-size: .62rem; }
  .qscore .scores { grid-template-columns: 1fr; }
  .quick .scorebox { padding: 8px 10px; }
  .quick .scorebox input { min-height: 64px; font-size: 2.6rem; }
  .qscore .btn.big { min-height: 56px; }
  .qlower { margin-top: 1rem; }
}
/* wide screens (iPad landscape): name beside the buttons so a whole team fits without scrolling */
@media (min-width: 1280px) {
  .quick .steam li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; }
  .quick .steam .pn { margin-bottom: 0; }
  .quick .steam .pn em { display: block; margin: 0; }
  .quick .cells { grid-template-columns: repeat(4, 58px); gap: .35rem; }
  .quick button.stat { min-height: 52px; }
  .quick button.stat .lf { display: none; } .quick button.stat .ls { display: inline; }
}
@media (max-width: 699px) {
  .quick .qscore { position: sticky; bottom: 0; z-index: 15; background: var(--surface); border-top: 2px solid var(--ink); margin: 0 -1rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .quick .qscore .scores { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick .scorebox { padding: 6px 8px; }
  .quick .scorebox input { min-height: 46px; font-size: 1.8rem; }
  .quick .scorebox label { font-size: .85rem; }
  .quick .result { padding: .25rem .6rem; font-size: .8rem; line-height: 1.25; }
  .quick .qscore .btn.big { min-height: 52px; }
}

/* tap buttons: keep them clear of the hero stat tiles */
button.stat { box-shadow: 3px 3px 0 var(--ink); border-radius: 4px; padding: 0 4px; gap: 0; background: rgba(255,255,255,.78); }
button.stat b { color: var(--ink); }
button.stat:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* four buttons per player: tighter label so OFFENSE and DEFENSE fit */
button.stat { padding: 0 1px; }
button.stat i { letter-spacing: .02em; }
@media (min-width: 700px) and (max-width: 1279px) { .quick .cells { gap: .35rem; } .quick button.stat i { letter-spacing: 0; } }
button.stat .ls { display: none; }
/* key above the tap buttons: what counts as offense, defense, error, serve */
.sphead { flex-wrap: wrap; }
.stkey { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; font-size: .85rem; color: var(--muted); flex: 1 1 auto; }
.stkey li { display: flex; align-items: center; gap: .35rem; }
.stkey li::before { content: ''; width: 10px; height: 10px; border-radius: 2px; border: 2px solid var(--bc); flex: none; }
.stkey .t-s { --bc: #D9486F; } .stkey .t-k { --bc: #E07A1F; } .stkey .t-b { --bc: #0A1F44; } .stkey .t-a { --bc: #7B4FD6; } .stkey .t-c { --bc: #12A87B; } .stkey .t-e, .stkey .t-n { --bc: var(--danger); }
.stkey .t-e::before { border-style: dashed; } .stkey .t-n::before { border-style: dotted; }
.stkey b { color: var(--fg); font-weight: 800; }
/* narrower than iPad landscape: the key gets its own row under the title and button */
@media (max-width: 1279px) { .stkey { order: 3; flex-basis: 100%; justify-content: flex-start; margin-top: .4rem; } }
/* phones: a 2 x 2 grid, name over description */
@media (max-width: 699px) {
  .stkey { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; font-size: .8rem; margin: .5rem 0 .4rem; }
  .stkey li { display: grid; grid-template-columns: 14px 1fr; gap: 0 .4rem; align-items: center; }
  .stkey li span { grid-column: 2; }
}
@media (min-width: 700px) and (max-width: 999px) { .quick button.stat .lf { display: none; } .quick button.stat .ls { display: inline; } }
@media (max-width: 359px) { button.stat .lf { display: none; } button.stat .ls { display: inline; } }

/* ===== accessibility pass: visible focus on dark areas ===== */
header.top :focus-visible, .heroband :focus-visible, .b-st :focus-visible, .b-lb :focus-visible, .b-pl :focus-visible, .foot :focus-visible, .wlband :focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.wlcard :focus-visible, .pod :focus-visible, .b-lb .pod :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.heroband .btn:focus-visible, .wlcard .btn:focus-visible { outline-color: var(--yel); }
/* ticker: pauses on hover, on keyboard focus, or with the pause button */
.ticker { display: flex; align-items: stretch; }
.ticker-track { flex: none; }
.tickset { display: flex; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }
.tickbtn { flex: none; position: relative; z-index: 1; width: 48px; min-height: 44px; display: grid; place-items: center; border: 0; border-right: 3px solid var(--ink); background: var(--accent); color: var(--on-accent); cursor: pointer; padding: 0; }
.tickbtn svg { width: 18px; height: 18px; fill: currentColor; }
.tickbtn .i-play, .ticker.paused .tickbtn .i-pause { display: none; }
.ticker.paused .tickbtn .i-play { display: block; }
.ticker :focus-visible { outline: 3px solid var(--ink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .tickbtn, .tickset + .tickset { display: none; } }
/* point tapping under each captain's score */
.ptap { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 6px; }
.ptbtn { min-height: 52px; border: 2px solid var(--ink); border-radius: 4px; background: var(--tagc, var(--cc)); color: var(--onc, #fff); font: 900 1.6rem/1 var(--font-display); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s ease, box-shadow .08s ease; }
.ptbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.ptbtn[aria-disabled="true"] { opacity: .4; box-shadow: none; cursor: not-allowed; transform: none; }
.ptap .minus { min-height: 52px; }
.ptap .minus:disabled { opacity: .35; cursor: not-allowed; }
.result.over { background: var(--yel); color: var(--ink); border-left-color: var(--ink); font: 900 1.35rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .03em; box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 699px) {
  .quick .scorebox input { min-height: 40px; font-size: 1.5rem; }
  .quick .ptbtn, .quick .ptap .minus { min-height: 48px; }
  .quick .result.over { font-size: 1.05rem; }
}
/* game day: delete confirm opens under its game */
.qlog li { flex-wrap: wrap; }
.qlog li .row { flex-wrap: nowrap; }
.qlog li .auth { flex-basis: 100%; }
/* game day: Today is full width with one card per captain; last games list in columns */
.qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: .8rem; }
.qcard { border: 2px solid var(--ink); border-top: 6px solid var(--cc); background: var(--surface); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.qcard.lead { background: color-mix(in srgb, var(--yel) 45%, var(--surface)); box-shadow: 4px 4px 0 var(--ink); }
.qch { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.qch .rank { font: 900 1.4rem/1 var(--font-display); color: var(--accent-ink); }
.qch b { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.qtag { font: 800 .65rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--cream); }
.qrec { font: 900 2.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .5rem; }
.qrec small { font: 700 .7rem var(--font-body); letter-spacing: .12em; color: var(--muted); }
.qstats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .6rem; }
.qstats div { min-width: 0; }
.qstats dt { font: 700 .66rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qstats dd { margin: 0; font: 900 1.25rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.qbest { margin: 0; padding-top: .5rem; border-top: 1px solid rgba(6,38,42,.15); font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.qbest b { color: var(--fg); }
.qtoday h2 .dt, .qlower h2 small { font-size: .85rem; }
/* last games: score on the left, buttons always on the right; a delete confirm spans the row */
.qlower .qlog li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem .8rem; }
.qlower .qlog li > span { min-width: 0; overflow-wrap: anywhere; }
.qlower .qlog li small { display: block; margin-top: .2rem; color: var(--muted); line-height: 1.3; }
.qlower .qlog li .auth { grid-column: 1 / -1; }
/* iPad and up: each game is a tile, and tiles in a row share one height */
@media (min-width: 700px) {
  .qlower .qlog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .7rem; align-items: stretch; }
  .qlower .qlog li { padding: .65rem .8rem; border: 2px solid var(--ink); background: var(--surface); }
}
@media (max-width: 699px) { .qcards { grid-template-columns: minmax(0, 1fr); } .qrec { font-size: 2.1rem; } }
/* undo toast */
.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 32px); padding: .5rem .5rem .5rem 1.1rem; background: var(--ink); color: var(--cream); border: 2px solid var(--cream); box-shadow: 5px 5px 0 var(--accent); font-weight: 700; }
.toast .btn { min-height: 44px; box-shadow: none; }
body.gameday .toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
/* inline field errors */
.ferr { margin: .3rem 0 0; font-size: .85rem; font-weight: 700; color: var(--danger); }
.ferr:empty { display: none; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.btn[aria-busy="true"] { cursor: progress; }
@media (max-width: 640px) { .brand { min-height: 44px; } }

/* ===== player of the game (top of the points leaderboard) ===== */
.potg { --cc: var(--accent); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin: 1.2rem 0 1.6rem; border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--accent);
  background: radial-gradient(520px 300px at 85% 30%, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(255,90,31,.35), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,244,220,.04) 22px 44px), var(--ink);
  animation: potg-in .5s cubic-bezier(.2,.8,.2,1) both; }
/* a light sweep across the card every few seconds */
.potg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,244,220,.14) 50%, transparent 65%); transform: translateX(-100%); animation: potg-shine 5s ease-in-out 1.2s infinite; }
.potg-l { position: relative; z-index: 1; padding: 1.3rem 0 1rem 1.3rem; min-width: 0; }
.potg-t { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .86; color: var(--cream); transform: skewX(-8deg); transform-origin: left; }
.potg-t .pa { display: block; font-size: clamp(2.6rem, 7vw, 4.4rem); }
.potg-t .pb { display: flex; align-items: center; gap: .3rem; font-size: clamp(2.6rem, 7vw, 4.4rem); }
.potg-t small { display: inline-block; width: 2.2em; font-size: .34em; line-height: .95; letter-spacing: .02em; }
.potg-n { margin: .55rem 0 0; font: 800 clamp(.95rem, 2.4vw, 1.15rem) var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); overflow-wrap: anywhere; }
.potg-d { margin: .15rem 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--band-muted); }
.potg-s { list-style: none; margin: 1rem 0 0 -1.3rem; padding: 0; display: grid; gap: .55rem; }
.potg-s li { display: grid; width: max-content; min-width: 9.5rem; animation: potg-tile .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.25s + var(--i) * .09s); }
.potg-s b { justify-self: start; min-width: 6.5rem; padding: .15rem 1.6rem .1rem 1.3rem; background: var(--accent); color: var(--on-accent); font: 900 clamp(2rem, 5vw, 2.7rem)/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.potg-s span { justify-self: start; margin-top: -2px; padding: .2rem 1.4rem .2rem 1.3rem; background: var(--deep); color: var(--cream); border: 2px solid var(--accent); border-left: 0; font: 900 1rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; transform: skewX(-8deg); transform-origin: left; }
.potg-s li.hi b { background: var(--yel); }
.potg-r { position: relative; display: grid; place-items: center; min-width: 0; }
.potg-ini { font: 900 clamp(7rem, 22vw, 13rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--cc) 75%, var(--cream)); transform: skewX(-8deg); opacity: .9; animation: potg-ini .9s cubic-bezier(.2,.8,.2,1) .2s both; }
.potg-f { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem 1.3rem; background: var(--accent); color: var(--on-accent); font: 800 .85rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.potg-f .dot { border: 2px solid var(--ink); }
@keyframes potg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes potg-tile { from { opacity: 0; transform: translateX(-40px); } }
@keyframes potg-ini { from { opacity: 0; transform: skewX(-8deg) scale(1.25); } }
@keyframes potg-shine { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
@media (max-width: 640px) {
  .potg { grid-template-columns: minmax(0, 1fr) 34%; }
  .potg-l { padding: 1rem 0 .9rem 1rem; }
  .potg-s { margin-left: -1rem; gap: .45rem; }
  .potg-s li { min-width: 0; }
  .potg-s b { min-width: 5rem; padding-left: 1rem; }
  .potg-s span { padding-left: 1rem; font-size: .85rem; }
  .potg-r { align-items: start; padding-top: 1rem; }
  .potg-ini { font-size: 5.5rem; -webkit-text-stroke-width: 2px; }
  .potg-f { padding-inline: 1rem; font-size: .75rem; }
}
/* wider screens: tiles in one row so the card stays short */
@media (min-width: 641px) {
  .potg { grid-template-columns: minmax(0, 1fr) minmax(9rem, 30%); }
  .potg-l { padding: 1.4rem 0 1.3rem 1.5rem; }
  .potg-s { grid-auto-flow: column; justify-content: start; margin: 1.1rem 0 0; gap: .7rem; }
  .potg-s li { min-width: 0; }
  .potg-s b { min-width: 5.2rem; padding: .2rem 1.3rem .1rem .8rem; }
  .potg-s span { padding-left: .8rem; font-size: .9rem; }
  .potg-ini { font-size: clamp(8rem, 16vw, 12rem); }
}
@media (prefers-reduced-motion: reduce) { .potg, .potg-s li, .potg-ini { animation: none; } .potg::after { display: none; } }

/* ===== panels that open and close: Games, Videos, Awards ===== */
.fh { margin: 0; }
.foldbtn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.foldbtn > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.fico { flex: none; position: relative; width: 36px; height: 36px; border: 2px solid currentColor; border-radius: 2px; }
.fico::before, .fico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; background: var(--accent); transform: translate(-50%, -50%); transition: transform .2s ease; }
.fico::after { transform: translate(-50%, -50%) rotate(90deg); }
.foldbtn[aria-expanded="true"] .fico::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) { .foldbtn:hover .fico { background: color-mix(in srgb, var(--accent) 14%, transparent); } }
.fh + * { margin-top: .9rem; }
/* collapsed preview line */
.fsum { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; cursor: pointer; }
.fcount { font: 800 .8rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.frec { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 2px solid var(--ink); background: var(--surface); font-weight: 700; }
.frec b { font: 900 1.15rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.frec.top { background: var(--yel); box-shadow: 3px 3px 0 var(--ink); }
.ficons { font-size: 1.3rem; letter-spacing: .15rem; }
.b-aw .fcount, .b-aw .fsum { color: inherit; }
/* collapsed video: one thumbnail with a play button */
.vcover { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.vimg { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--accent); overflow: hidden; }
.vimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplay { position: absolute; left: 50%; top: 50%; width: 56px; height: 40px; transform: translate(-50%, -50%); background: var(--accent); border: 2px solid var(--ink); border-radius: 8px; transition: transform .15s ease; }
.vplay::after { content: ''; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--on-accent); }
.vcap { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; color: var(--muted); }
.vcap b { font: 900 1.3rem/1.1 var(--font-display); text-transform: uppercase; color: var(--fg); }
@media (hover: hover) { .vcover:hover .vplay { transform: translate(-50%, -50%) scale(1.08); } }
.vtools { justify-content: flex-end; }
@media (max-width: 640px) { .vcover { grid-template-columns: minmax(0, 1fr); gap: .6rem; } .vtools { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .fico::before, .fico::after, .vplay { transition: none; } }

/* phone menu: logo + ☰ in a slim sticky bar; tabs, sections and sign-in drop down under it */
.menu { display: contents; }
.menubtn, .menujump { display: none; }
@media (max-width: 640px) {
  .navin { flex-wrap: nowrap; padding-block: .35rem; }
  header .jump { display: none; }
  .menubtn { display: inline-grid; place-content: center; gap: 5px; flex: none; width: 48px; height: 48px; margin-right: -6px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
  .menubtn span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--cream); transition: transform .2s ease, opacity .15s ease; }
  body.menuopen .menubtn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.menuopen .menubtn span:nth-child(2) { opacity: 0; }
  body.menuopen .menubtn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu { display: none; }
  .band { scroll-margin-top: 5rem; }
  body.menuopen { overflow: hidden; }
  body.menuopen .menu { display: flex; flex-direction: column; gap: 1.2rem; position: absolute; left: 0; right: 0; top: calc(100% + 4px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem 16px calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: var(--band); animation: menu-in .2s ease-out; }
  .menu .tabs { flex-direction: column; gap: .5rem; }
  .menu .tabs button { width: 100%; min-height: 56px; text-align: left; padding: 0 1rem; font-size: 1.4rem; color: var(--cream); border: 2px solid rgba(255,244,220,.3); border-bottom-width: 2px; }
  .menu .tabs button[aria-current="page"] { background: var(--accent); border-color: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
  .menujump:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mlabel { grid-column: 1 / -1; margin: 0; font: 800 .78rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--band-muted); }
  .menujump button { min-height: 48px; padding: 0 .8rem; text-align: left; border: 1px solid rgba(255,244,220,.22); border-radius: 2px; background: var(--deep); color: var(--cream); font: 800 .95rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .menujump button[aria-current="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  /* sign-in row first, so Admin / Scorekeeper are visible without scrolling the menu */
  .menu .navr { order: -1; flex-wrap: wrap; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,244,220,.2); }
  .menu .navr .status { flex-basis: 100%; }
  .menu .navr .btn { min-height: 48px; padding-inline: 1.2rem; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* names stay on one line; fitNames() shrinks the font of any name too long for its space */
.pod .nm, .lrow .who > b, .potg-n, .playerstbl .who > b, .drafttbl .who > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; max-width: 100%; }
.playerstbl .who > b, .drafttbl .tr .who > b { flex-wrap: nowrap; }
.playerstbl .who > b .plbtn { white-space: nowrap; overflow-wrap: normal; min-width: 0; }
.playerstbl .who > b .mv, .drafttbl .who > b .mv { flex: none; }
.playerstbl .plbtn:focus-visible { outline-offset: -3px; }

/* player card entrance, played by showPlayerCard() once the page has glided up to it */
.pdetail.wait { opacity: 0; }
.pdetail.pop { animation: pd-in .5s cubic-bezier(.2, .9, .25, 1.15) both, pd-glow 1.1s ease-out .25s; }
.pdetail.pop .pname { animation: pd-name .45s cubic-bezier(.2, .8, .2, 1) .1s both; }
.pdetail.pop .badges { animation: pd-up .35s ease-out .2s both; }
.pdetail.pop .pline span { animation: pd-up .35s ease-out both; animation-delay: calc(.22s + var(--i, 0) * 40ms); }
.pdetail.pop .pline span:nth-child(2) { --i: 1; } .pdetail.pop .pline span:nth-child(3) { --i: 2; } .pdetail.pop .pline span:nth-child(4) { --i: 3; }
.pdetail.pop .pline span:nth-child(5) { --i: 4; } .pdetail.pop .pline span:nth-child(6) { --i: 5; } .pdetail.pop .pline span:nth-child(7) { --i: 6; }
.pdetail.pop .pline span:nth-child(8) { --i: 7; } .pdetail.pop .pline span:nth-child(9) { --i: 8; } .pdetail.pop .pline span:nth-child(10) { --i: 9; }
.pdetail.pop .pline span:nth-child(n+11) { --i: 10; }
.pdetail.pop .plog, .pdetail.pop > .note { animation: pd-up .4s ease-out .6s both; }
@keyframes pd-in { from { opacity: 0; transform: translateY(22px) scale(.96); } }
@keyframes pd-name { from { opacity: 0; transform: translateX(-24px); letter-spacing: .12em; } }
@keyframes pd-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes pd-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .65); } 100% { box-shadow: 0 0 0 14px rgba(255, 90, 31, 0); } }
@media (prefers-reduced-motion: reduce) {
  .pdetail.pop, .pdetail.pop .pname, .pdetail.pop .badges, .pdetail.pop .pline span, .pdetail.pop .plog, .pdetail.pop > .note { animation: none; }
  .pdetail.wait { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .menubtn span { transition: none; } body.menuopen .menu { animation: none; } }

/* practice mode: an orange bar under the header says nothing is being saved */
.practicebar { background: var(--accent); color: var(--ink); border-top: 2px solid var(--ink); }
.practicebar .wrap { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding-block: .45rem; }
.practicebar span { font: 600 .95rem/1.3 var(--font-body); }
.practicebar b { font: 900 1.05rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; margin-right: .4rem; }
.practicebar .btn { min-height: 44px; background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.35); }

/* Player stats: name search and sort */
.plfilter { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .8rem; align-items: end; }
.plfilter label { display: block; margin-bottom: .35rem; font: 800 .78rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); }
.plfilter input, .plfilter select { width: 100%; min-height: 48px; font-size: 1rem; }
.b-pl .plfilter input { background: var(--band); color: var(--cream); border: 2px solid var(--cream); border-radius: 0; padding: 0 .8rem; }
.b-pl .plfilter input::placeholder { color: var(--band-muted); }
@media (max-width: 480px) { .plfilter { grid-template-columns: minmax(0, 1fr); } }
/* the column being sorted on is highlighted */
.playerstbl.sort-wins .tr > :nth-child(3), .playerstbl.sort-g .tr > :nth-child(6), .playerstbl.sort-pct .tr > :nth-child(7),
.playerstbl.sort-s .tr > :nth-child(8), .playerstbl.sort-k .tr > :nth-child(9), .playerstbl.sort-b .tr > :nth-child(10), .playerstbl.sort-a .tr > :nth-child(11),
.playerstbl.sort-c .tr > :nth-child(12), .playerstbl.sort-e .tr > :nth-child(13), .playerstbl.sort-n .tr > :nth-child(14),
.playerstbl.sort-pts .tr > :nth-child(15) { color: var(--accent); }
/* phones show 6 columns: the sorted column takes Win %'s place when it would otherwise be hidden */
@media (max-width: 640px) {
  .playerstbl.sort-g .tr > :nth-child(7), .playerstbl.sort-s .tr > :nth-child(7), .playerstbl.sort-k .tr > :nth-child(7), .playerstbl.sort-b .tr > :nth-child(7), .playerstbl.sort-a .tr > :nth-child(7),
  .playerstbl.sort-c .tr > :nth-child(7), .playerstbl.sort-e .tr > :nth-child(7), .playerstbl.sort-n .tr > :nth-child(7) { display: none; }
  .playerstbl.sort-g .tr > :nth-child(6), .playerstbl.sort-s .tr > :nth-child(8), .playerstbl.sort-k .tr > :nth-child(9), .playerstbl.sort-b .tr > :nth-child(10), .playerstbl.sort-a .tr > :nth-child(11),
  .playerstbl.sort-c .tr > :nth-child(12), .playerstbl.sort-e .tr > :nth-child(13), .playerstbl.sort-n .tr > :nth-child(14) { display: block; }
}

/* Player stats header rides along under the site header; stickHead() adds .stuck to slide it in with a shadow */
@supports (overflow: clip) { .b-pl { overflow: clip; } }
.playerstbl .tr.head { position: sticky; top: var(--hdr, 0px); z-index: 4; background: var(--deep); padding-top: .55rem; }
.playerstbl .tr.head.stuck { box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .75), 0 2px 0 var(--accent); animation: head-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes head-in { from { transform: translateY(-70%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .playerstbl .tr.head.stuck { animation: none; } }
.playerstbl .tr.head::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(1rem, 2vw, 1.7rem)); background: var(--deep); z-index: -1; }

/* footer: links back up to the main sections, under the season countdown */
.flinks { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: clamp(1.2rem, 3vw, 1.6rem); border-top: 1px solid rgba(255, 244, 220, .2); }
.fltitle { font: 800 .78rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--band-muted); }
.flinks ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.flinks a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border: 2px solid var(--cream); color: var(--cream); text-decoration: none; font: 800 1rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; touch-action: manipulation; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.flinks a span { color: var(--accent); transition: transform .2s ease; }
@media (hover: hover) { .flinks a:hover { background: var(--cream); color: var(--ink); } .flinks a:hover span { transform: translateY(-3px); } }
.flinks a:active { transform: translateY(1px); }
@media (max-width: 480px) { .flinks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .flinks a { width: 100%; justify-content: space-between; } }
/* the section that a footer link lands on flashes its outline once */
.panel.arrive { animation: arrive 1s ease-out; }
@keyframes arrive { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .7); } 100% { box-shadow: 0 0 0 16px rgba(255, 90, 31, 0); } }
@media (prefers-reduced-motion: reduce) { .panel.arrive { animation: none; } .flinks a, .flinks a span { transition: none; } }


/* six stats per player. Phones: one row of six with short labels (two rows of three on very small screens).
   iPad portrait: two rows of three. Wider: one row of six with short labels, name above. */
.cells { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
button.stat .lf { display: none; } button.stat .ls { display: inline; }
button.stat { min-height: 56px; }
button.stat b { font-size: 1.6rem; }
@media (max-width: 359px) { .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) {
  .quick .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .quick button.stat .lf { display: inline; } .quick button.stat .ls { display: none; }
}
@media (min-width: 1100px) { .quick .cells { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; } }
@media (min-width: 1100px) { .quick button.stat { min-height: 48px; } .quick .cell .minus { min-height: 28px; } }
/* iPad landscape: name beside the six buttons so a whole team fits without scrolling */
@media (min-width: 1280px) {
  .quick .steam li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .45rem; }
  .quick .steam .pn { margin-bottom: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quick .steam .pn em { display: block; margin: 0; }
  .quick .cells { grid-template-columns: repeat(7, 50px); gap: .25rem; }
  .qgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(190px, .5fr); }
  .quick .steam li { padding: .2rem 0; }
  .quick button.stat { min-height: 44px; } .quick .cell .minus { min-height: 24px; }
}
.stkey { gap: .35rem .8rem; }
@media (max-width: 699px) { .stkey { grid-template-columns: 1fr 1fr; } }

/* the result line shakes when a tap comes in after game over */
.result.nudge { animation: nudge .4s ease; }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Player of the Game: six tiles wrap instead of running off the card */
@media (max-width: 640px) { .potg-s { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 641px) { .potg-s { display: flex; flex-wrap: wrap; } }


/* ---------- game recap: Player of the Game style ---------- */
.recap-slot:empty { display: none; }
.recap { --cc: var(--accent); position: relative; overflow: hidden; margin-top: 1rem; border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--accent); color: var(--cream);
  background: radial-gradient(560px 320px at 88% 12%, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(255,90,31,.32), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,244,220,.04) 22px 44px), var(--ink); }
.recap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,244,220,.14) 50%, transparent 65%); transform: translateX(-100%); animation: potg-shine 5s ease-in-out 1.6s infinite; }
.recap > * { position: relative; z-index: 1; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; padding: 1.2rem 1.3rem .4rem; }
.rc-t { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .86; color: var(--cream); transform: skewX(-8deg); transform-origin: left; }
.rc-t .pa, .rc-t .pb { display: block; font-size: clamp(2.4rem, 7vw, 4rem); }
.rc-t .pb { color: var(--accent); }
.rc-board { display: flex; align-items: center; gap: .35rem; transform: skewX(-8deg); }
.rc-board i { font: 900 2.4rem var(--font-display); color: var(--band-muted); font-style: normal; }
.rc-sc { font: 900 clamp(4rem, 13vw, 6.5rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--cc) 80%, var(--cream)); }
.rc-sc.w { color: var(--cc); -webkit-text-stroke: 3px var(--cream); text-shadow: 4px 4px 0 var(--ink); }
.rc-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem 1.6rem; padding: .6rem 1.3rem 1.1rem; }
.rc-tn { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 3px solid var(--cc); font: 900 1.3rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--cream); }
.rc-tn span { min-width: 0; overflow-wrap: anywhere; }
.rc-tn em { padding: .12rem .45rem; background: var(--accent); color: var(--ink); font: 900 .75rem var(--font-display); font-style: normal; letter-spacing: .12em; transform: skewX(-8deg); }
.rc-tn b { margin-left: auto; font: 900 1rem var(--font-display); color: var(--band-muted); }
.rc-team.rc-win .rc-tn b { color: var(--cc); }
/* one angled tile per player: the number box and the skewed name label, like the Player of the Game stats */
.rc-tiles { list-style: none; margin: 0 0 0 -1.3rem; padding: 0; display: grid; gap: .5rem; }
.rc-tiles li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.rc-tiles b { min-width: 4.6rem; padding: .15rem 1.4rem .1rem 1.3rem; background: var(--cc); color: var(--ink); font: 900 2.1rem/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); display: flex; align-items: center; justify-content: flex-end; }
.rc-tiles b::before { content: '+'; font-size: .6em; margin-right: .05em; }
.rc-tiles li.lead b { background: var(--yel); }
.rc-tiles span { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin-left: -8px; padding: .25rem .9rem .25rem 1.1rem; background: var(--deep); border: 2px solid var(--cc); border-left: 0; font: 900 1.05rem/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); transform: skewX(-8deg); transform-origin: left; overflow-wrap: anywhere; }
.rc-tiles small { margin-top: .15rem; font: 600 .78rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--band-muted); }
.rc-tiles li.rc-x b { background: rgba(255,244,220,.22); color: var(--cream); }
.rc-tiles li.rc-x span { border-color: rgba(255,244,220,.3); color: var(--band-muted); }
.rc-tiles li.rc-none { display: block; padding-left: 1.3rem; color: var(--band-muted); }
.rc-team.k0 { --cc: var(--c0); } .rc-team.k1 { --cc: var(--c1); } .rc-team.k2 { --cc: var(--c2); }
.recap.k0 { --cc: var(--c0); } .recap.k1 { --cc: var(--c1); } .recap.k2 { --cc: var(--c2); }
.rc-sc.k0 { --cc: var(--c0); } .rc-sc.k1 { --cc: var(--c1); } .rc-sc.k2 { --cc: var(--c2); }
.rc-f { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .6rem 1.3rem; background: var(--accent); color: var(--on-accent); font: 800 .85rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.rc-f b { font-weight: 900; }
.rc-save { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 1rem 1.3rem 1.2rem; background: rgba(6, 38, 42, .6); }
.rc-save .btn.big { min-height: 56px; min-width: min(100%, 14rem); font-size: 1.15rem; }
.rc-save .btn.ghost { color: var(--cream); border-color: var(--cream); }
.rc-save small { color: var(--band-muted); font-size: .85rem; }
@media (max-width: 640px) {
  .rc-top, .rc-teams { padding-inline: 1rem; }
  .rc-tiles { margin-left: -1rem; }
  .rc-tiles b { min-width: 3.8rem; padding-left: 1rem; font-size: 1.8rem; }
  .rc-f, .rc-save { padding-inline: 1rem; }
  .rc-save .btn.big { flex: 1 1 100%; }
}
/* entrance, played once when the game ends */
.recap.play { animation: potg-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.recap.play .rc-t .pa { animation: rc-slam .5s cubic-bezier(.2, .9, .3, 1.3) .1s both; }
.recap.play .rc-t .pb { animation: rc-slam .5s cubic-bezier(.2, .9, .3, 1.3) .22s both; }
.recap.play .rc-sc { animation: potg-ini .8s cubic-bezier(.2, .8, .2, 1) .3s both; }
.recap.play .rc-sc + i + .rc-sc { animation-delay: .42s; }
.recap.play .rc-tn { animation: rc-up .4s ease-out .45s both; }
.recap.play .rc-tiles li { animation: potg-tile .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.55s + var(--i, 0) * 80ms); }
.recap.play .rc-f { animation: rc-up .4s ease-out 1s both; }
.recap.play .rc-save { animation: rc-up .4s ease-out 1.15s both; }
.recap.play .rc-save .btn.big { animation: rc-pulse 1.6s ease-in-out 1.6s 2; }
.recap.nudge { animation: nudge .4s ease; }
@keyframes rc-slam { from { opacity: 0; transform: translateX(-30px) scale(1.15); } }
@keyframes rc-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes rc-pulse { 0%, 100% { box-shadow: 4px 4px 0 var(--ink); } 50% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 8px rgba(255, 90, 31, .35); } }
@media (prefers-reduced-motion: reduce) { .recap::after { display: none; } .recap.play, .recap.play *, .recap.nudge { animation: none !important; } }

/* practice bar buttons: Reset scores and Exit practice side by side */
.practicebar .pbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.practicebar .btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }

/* the small Save unfinished game link under the score (games with first-to-11 rules) */
.saverow.early { justify-content: center; }
.saverow.early .btn { min-height: 40px; font-size: .85rem; }

/* player card: the name in a contrasting yellow with an orange underline, and a Total points tile that pops and counts up */
.b-pl .pdetail .pname { position: relative; justify-self: start; align-self: flex-start; padding-bottom: .35rem; color: var(--yel); text-shadow: 3px 3px 0 var(--ink); }
.b-pl .pdetail .pname::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform-origin: left; }
.pdetail.pop .pname::after { animation: pd-line .5s cubic-bezier(.2, .8, .2, 1) .35s both; }
.b-pl .pdetail .pline span.ptot { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .3rem; padding: .55rem 1.1rem; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: skewX(-6deg); }
.b-pl .pdetail .pline span.ptot i { margin: 0; color: var(--ink); font: 900 1.05rem var(--font-display); letter-spacing: .1em; }
.b-pl .pdetail .pline span.ptot b { font: 900 clamp(2.6rem, 8vw, 3.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.pdetail.pop .pline span.ptot { animation: pd-tot .55s cubic-bezier(.2, .9, .3, 1.35) .5s both, pd-totglow 1.2s ease-out 1.05s; }
@keyframes pd-line { from { transform: scaleX(0); } }
@keyframes pd-tot { from { opacity: 0; transform: skewX(-6deg) translateY(14px) scale(.85); } }
@keyframes pd-totglow { 0% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(242, 184, 7, .8); } 100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 16px rgba(242, 184, 7, 0); } }
@media (prefers-reduced-motion: reduce) { .pdetail.pop .pname::after, .pdetail.pop .pline span.ptot { animation: none; } }
@media (min-width: 641px) { .b-pl .pdetail .pline span.ptot { flex: 0 1 24rem; } }

/* player card game log: W / L / T badge beside each night's record */
.plog li > b { display: inline-flex; align-items: center; gap: .5rem; }
.plog .wl { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; font: 900 1rem/1 var(--font-display); color: var(--ink); border: 2px solid var(--ink); transform: skewX(-8deg); }
.plog .wl.w { background: var(--win-on-dark, #3DDC97); }
.plog .wl.l { background: var(--loss-on-dark, #FF6B6B); }
.plog .wl.t { background: var(--band-muted); }

/* one Undo button by the score instead of a take-back strip under every stat */
.cell { display: block; }
.btn.undo { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .4rem; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: .95rem; overflow: hidden; }
.btn.undo span[aria-hidden] { font-size: 1.3rem; line-height: 1; }
.btn.undo #undolbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.undo:disabled { opacity: .45; box-shadow: none; }
@media (max-width: 699px) { .quick .qscore .btn.undo { min-height: 44px; } }

/* play by play: every tap in order, newest first, with the score after it */
.pbp-slot:empty { display: none; }
.pbp { margin-top: 1rem; border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.pbp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 1rem; border-bottom: 2px solid var(--ink); background: var(--ink); color: var(--cream); }
.pbp-h h3 { margin: 0; font: 900 1.25rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--cream); }
.pbp-h span { font-size: .8rem; color: var(--band-muted); }
.pbp-list { list-style: none; margin: 0; padding: 0; max-height: none; }
.pbp-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 4.6rem; align-items: center; gap: .6rem; padding: .5rem 1rem; border-top: 1px solid var(--line); color: var(--ink); }
.pbp-list li:first-child { border-top: 0; animation: pbp-in .3s ease-out; }
.pbp-n { font: 800 .8rem var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pbp-w { min-width: 0; overflow-wrap: anywhere; }
.pbp-w b { font: 900 1rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.pbp-w small { display: block; color: var(--muted); font-size: .78rem; }
.pbp-w em { display: inline-block; margin-left: .3rem; padding: .05rem .35rem; background: var(--danger); color: #fff; font: 800 .68rem var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.pbp-s { font: 900 1.05rem var(--font-display); font-variant-numeric: tabular-nums; }
.pbp-list li.gone .pbp-w { text-decoration: line-through; } .pbp-list li.gone .pbp-w b, .pbp-list li.gone .pbp-w small { opacity: .6; }
.pbp-list li.undo { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.pbp-list li.undo .pbp-w b:first-child { color: var(--danger); }
@keyframes pbp-in { from { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--accent) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pbp-list li:first-child { animation: none; } }

/* Undo on any line of the play by play takes back just that tap */
.pbp-undo { min-height: 36px; padding: 0 .6rem; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.pbp-undo:hover, .pbp-undo:focus-visible { background: var(--ink); color: var(--cream); }
@media (max-width: 420px) { .pbp-list li { grid-template-columns: 1.6rem minmax(0, 1fr) auto 4rem; gap: .45rem; padding-inline: .7rem; } .pbp-undo { padding: 0 .4rem; font-size: .68rem; } }

/* share this week's standings */
.sharebtn { display: inline-flex; align-items: center; gap: .35rem; }
.sharebox { border: 2px solid var(--cream); background: var(--ink); padding: .9rem 1rem 1rem; box-shadow: 4px 4px 0 var(--accent); animation: rc-up .25s ease-out; }
.shb-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.shb-h b { font: 900 1.15rem var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--cream); }
.shb-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--cream); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.shb-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.shb-btns .btn { min-height: 48px; }
.sharebox .btn.ghost { background: transparent; color: var(--cream); border: 2px solid var(--cream); box-shadow: none; }
.shb-note { margin: .7rem 0 0; font-size: .85rem; color: var(--band-muted); }
@media (max-width: 480px) { .shb-btns .btn { flex: 1 1 100%; } }
/* the shared standings page: no tabs or menu, just the week */
body.shareview .tabs, body.shareview .menubtn, body.shareview .navr, body.shareview #flinks { display: none !important; }
.shv { padding-block: 1.2rem 2rem; display: grid; gap: 1.2rem; }
.shv-k { margin: 0; font: 800 .85rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.shv-full { margin: 0; text-align: center; }

/* Share on the Player of the Game card sits at the right end of its orange footer */
.potg-f { flex-wrap: wrap; }
.potg-sh { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .9rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cream); font: 900 .9rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.potg-sh:hover, .potg-sh:focus-visible { background: var(--cream); color: var(--ink); }
.potgbox { margin: -.6rem 0 1.4rem; }

/* Reset points: beside Type counts, with the admin password box under the header row */
.sp-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.rpbox { margin: .6rem 0 .2rem; padding: .8rem .9rem; border: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); display: grid; gap: .6rem; }
.rp-t { margin: 0; font-size: .92rem; line-height: 1.45; }
.rp-t b { display: block; font: 900 1.1rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--danger); }
.rp-f label { display: block; margin-bottom: .3rem; font: 800 .75rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.rp-f input { width: 100%; max-width: 20rem; min-height: 48px; font-size: 1rem; }
.rpbox .row { margin: 0; flex-wrap: wrap; }
.rpbox .btn:not(.ghost) { background: var(--danger); border-color: var(--ink); color: #fff; }
.pbp-list li.reset { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pbp-list li.reset .pbp-w b { color: var(--danger); }

/* ===== live draft ===== */
.ldlive { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 16px; background: var(--accent); color: var(--ink); font: 800 .9rem var(--font-body); text-decoration: none; letter-spacing: .04em; border-top: 2px solid var(--ink); }
.ldlive b { padding: .1rem .5rem; background: var(--ink); color: var(--cream); font: 900 .8rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.ldlive-dot { width: 10px; height: 10px; border-radius: 50%; background: #E3122C; box-shadow: 0 0 0 0 rgba(227, 18, 44, .7); animation: ld-dot 1.4s ease-out infinite; }
@keyframes ld-dot { 70% { box-shadow: 0 0 0 9px rgba(227, 18, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 18, 44, 0); } }
body.draftview .ldlive { display: none; }
.ldv { padding-block: 1rem 2rem; display: grid; gap: 1rem; }
.ld-setup textarea { width: 100%; font: 500 1rem/1.5 var(--font-body); padding: .6rem .8rem; }
.ld-setup select { width: 100%; max-width: 24rem; min-height: 48px; }
.ld-caps { display: flex; flex-wrap: wrap; gap: .5rem; }
/* header card in the Player of the Game style */
.ld-head { --cc: var(--accent); position: relative; overflow: hidden; padding: 1.1rem 1.2rem 1rem; border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--accent); color: var(--cream);
  background: radial-gradient(520px 300px at 88% 20%, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,244,220,.04) 22px 44px), var(--ink); }
.ld-head::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,244,220,.14) 50%, transparent 65%); transform: translateX(-100%); animation: potg-shine 5s ease-in-out 1s infinite; }
.ld-head.k0 { --cc: var(--c0); } .ld-head.k1 { --cc: var(--c1); } .ld-head.k2 { --cc: var(--c2); }
.ld-t { margin: 0; display: flex; gap: .4rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .9; font-size: clamp(2.4rem, 8vw, 3.6rem); transform: skewX(-8deg); transform-origin: left; color: var(--cream); }
.ld-t .pb { color: var(--accent); }
.ld-sub { margin: .4rem 0 0; color: var(--band-muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.ld-status { margin: .6rem 0 0; font: 900 1.25rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.ld-caps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ld-cap { --cc: var(--c0); position: relative; display: grid; gap: .1rem; padding: .6rem .6rem .55rem; border: 2px solid var(--ink); border-top: 5px solid var(--cc); background: var(--surface); min-width: 0; transition: transform .25s ease, box-shadow .25s ease; }
.ld-cap.k1 { --cc: var(--c1); } .ld-cap.k2 { --cc: var(--c2); }
.ld-cap b { font: 900 1.05rem var(--font-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-cap small { font-size: .72rem; color: var(--muted); }
.ld-pos { font: 900 .8rem var(--font-display); color: var(--cc); letter-spacing: .08em; text-transform: uppercase; }
.ld-cap.on { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--cc); animation: ld-on 1.6s ease-in-out infinite; }
.ld-cap.me b::after { content: ' (you)'; font: 700 .7rem var(--font-body); color: var(--muted); text-transform: none; }
@keyframes ld-on { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--cc) 35%, transparent); } }
/* the number reveal */
.ld-reveal { display: grid; justify-items: center; gap: .8rem; padding: 1.1rem; border: 2px solid var(--cream); background: var(--ink); color: var(--cream); box-shadow: 6px 6px 0 var(--accent); }
.ld-num { font: 900 clamp(5rem, 22vw, 8rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 3px var(--cream); transform: skewX(-8deg); }
.ld-reveal.spin .ld-num { -webkit-text-stroke-color: var(--band-muted); }
.ld-reveal.landed .ld-num { color: var(--accent); -webkit-text-stroke-color: var(--cream); animation: ld-land .55s cubic-bezier(.2, .9, .3, 1.4); }
.ld-gs { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; width: 100%; max-width: 30rem; }
.ld-gs li { --cc: var(--c0); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .8rem; padding: .45rem .8rem; border-left: 6px solid var(--cc); background: rgba(255,244,220,.06); opacity: 0; }
.ld-gs li.k1 { --cc: var(--c1); } .ld-gs li.k2 { --cc: var(--c2); }
.ld-reveal.landed .ld-gs li { opacity: 1; animation: potg-tile .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i) * .18s); }
.ld-gs b { font: 900 1.1rem var(--font-display); text-transform: uppercase; }
.ld-g { grid-row: span 2; font: 900 2rem var(--font-display); color: var(--cc); }
.ld-gs small { color: var(--band-muted); font-size: .8rem; }
@keyframes ld-land { from { transform: skewX(-8deg) scale(1.6); } }
/* this captain's number buttons */
.ld-mine { border-color: var(--accent); }
.ld-mine h3 { margin: 0 0 .7rem; font: 900 1.2rem var(--font-display); text-transform: uppercase; }
.ld-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.ld-grid button { min-height: 52px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 900 1.4rem var(--font-display); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; }
.ld-grid button[aria-pressed="true"] { background: var(--accent); color: var(--ink); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* on the clock */
.ld-clock { --cc: var(--c0); display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--cc); }
.ld-clock.k1 { --cc: var(--c1); } .ld-clock.k2 { --cc: var(--c2); }
.ld-clock b { display: block; font: 900 1.4rem var(--font-display); text-transform: uppercase; }
.ld-clock small { color: var(--muted); }
.ld-ring { --p: 100%; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--cc) var(--p), rgba(0,0,0,.1) 0); position: relative; }
.ld-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.ld-ring span { position: relative; font: 900 1.3rem var(--font-display); font-variant-numeric: tabular-nums; }
.ld-ring.low { animation: nudge .5s ease infinite; }
.ld-ring.low span { color: var(--danger); }
.ld-confirm { position: sticky; bottom: 0; z-index: 20; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--cream); border: 2px solid var(--cream); box-shadow: 0 -6px 18px rgba(0,0,0,.35); animation: rc-up .2s ease-out; }
.ld-confirm p { margin: 0 0 .6rem; font-size: 1.05rem; }
.ld-confirm b { font: 900 1.3rem var(--font-display); text-transform: uppercase; color: var(--accent); }
.ld-confirm .btn.ghost { color: var(--cream); border-color: var(--cream); }
/* teams */
.ld-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ld-col { --cc: var(--c0); min-width: 0; border: 2px solid var(--ink); border-top: 5px solid var(--cc); background: var(--surface); padding: .5rem .5rem .6rem; transition: box-shadow .3s ease; }
.ld-col.k1 { --cc: var(--c1); } .ld-col.k2 { --cc: var(--c2); }
.ld-col.on { box-shadow: 0 0 0 3px var(--cc); }
.ld-col h3 { display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; font: 900 1rem var(--font-display); text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ld-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ld-col li { display: flex; align-items: center; gap: .35rem; padding: .3rem .35rem; background: color-mix(in srgb, var(--cc) 12%, transparent); font: 700 .9rem/1.2 var(--font-body); overflow-wrap: anywhere; }
.ld-col li.new { animation: ld-glow 1.2s ease-out; }
.ld-pn { flex: none; display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; background: var(--cc); color: var(--ink); font: 900 .75rem var(--font-display); }
@keyframes ld-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc) 80%, transparent); background: var(--cc); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (max-width: 480px) { .ld-col li { font-size: .78rem; } .ld-col h3 { font-size: .85rem; } }
/* the pool */
.ld-pool h3 { margin: 0 0 .6rem; font: 900 1.15rem var(--font-display); text-transform: uppercase; }
.ld-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ld-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border: 2px solid var(--ink); background: var(--surface); font: 800 .95rem var(--font-body); color: var(--ink); }
.ld-chip.tap { cursor: pointer; box-shadow: 3px 3px 0 var(--ink); min-height: 46px; touch-action: manipulation; }
.ld-chip.tap:active, .ld-chip.sel { background: var(--accent); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* admin controls */
.ld-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ld-links li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.ld-links li > span:first-child { display: flex; align-items: center; gap: .4rem; }
.ld-links .row { margin: 0; gap: .4rem; }
.ld-ctl { flex-wrap: wrap; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .ld-head::after, .ldlive-dot { display: none; animation: none; } .ld-cap.on, .ld-ring.low, .ld-reveal.landed .ld-num, .ld-col li.new { animation: none; } .ld-reveal.landed .ld-gs li { animation: none; opacity: 1; } }
/* a reveal already played shows settled on later redraws */
.ld-reveal.still .ld-num { color: var(--accent); -webkit-text-stroke-color: var(--cream); }
.ld-reveal.still .ld-gs li { opacity: 1; animation: none; }
.ld-confirm .btn.ghost { background: transparent; box-shadow: none; }
/* names in the draft columns stay on one line; fitNames() shrinks long ones to fit */
.ld-col li { overflow-wrap: normal; }
.ld-col .ld-nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .ld-col li { gap: .25rem; padding: .3rem .25rem; } .ld-pn { min-width: 1.25rem; height: 1.25rem; font-size: .68rem; } }

/* live draft: share button, chat, host sign-in */
.ld-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.ld-chatlink { font: 800 .85rem var(--font-body); color: var(--accent); text-decoration: none; letter-spacing: .04em; }
.ldx { display: grid; gap: 1rem; padding-bottom: 1.5rem; }
.ld-chat { border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); scroll-margin-top: 6rem; }
.ldc-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; background: var(--ink); color: var(--cream); }
.ldc-h h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 900 1.25rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--cream); }
.ldc-h .btn.ghost { color: var(--cream); border-color: var(--cream); background: transparent; box-shadow: none; }
.ldc-list { list-style: none; margin: 0; padding: .6rem .8rem; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: .4rem; align-content: start; }
.ldc-msg { position: relative; display: grid; gap: .1rem; padding: .45rem 2rem .45rem .7rem; background: color-mix(in srgb, var(--ink) 6%, transparent); border-left: 3px solid var(--accent); overflow-wrap: anywhere; }
.ldc-msg b { font: 900 .9rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.ldc-pick { --cc: var(--c0); display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; background: color-mix(in srgb, var(--cc) 16%, transparent); font-size: .9rem; }
.ldc-pick.k1 { --cc: var(--c1); } .ldc-pick.k2 { --cc: var(--c2); }
.ldc-pick .ld-pn { background: var(--cc); }
.ldc-list li.new { animation: rc-up .3s ease-out; }
.ldc-empty { color: var(--muted); font-size: .9rem; }
.ldc-del { position: absolute; top: .2rem; right: .2rem; width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.ldc-form { display: grid; gap: .5rem; padding: .7rem .8rem .8rem; border-top: 2px solid var(--ink); }
.ldc-name label { display: block; margin-bottom: .2rem; font: 800 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.ldc-name input { width: 100%; max-width: 16rem; min-height: 44px; }
.ldc-say { display: flex; gap: .5rem; }
.ldc-say input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 1rem; }
.ldc-say .btn { flex: none; min-height: 48px; }
.ldc-note { margin: 0; font-size: .82rem; color: var(--muted); }
.ldc-form.off { opacity: .6; }
.ld-hostin details { border: 2px dashed var(--line); padding: .6rem .8rem; }
.ld-hostin summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.ldh-form { display: grid; gap: .6rem; margin-top: .7rem; max-width: 22rem; }
.ldh-form select, .ldh-form input { width: 100%; min-height: 48px; }
.ldh-form label { display: block; margin-bottom: .2rem; font: 800 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .ldc-list li.new { animation: none; } }

/* ===== game day on the iPad Pro 12.9" / 13" (the scorekeeper's main screen) =====
   Portrait (1024 wide): the score bar runs across the top and stays in view; the two teams sit side by side
   underneath with all seven buttons in one row per player. Landscape (1366 wide): the same teams, with the
   score column pinned on the right. */
@media (min-width: 1000px) {
  .wrap.quick { padding-inline: 1.25rem; }
  .quick .qform { padding: 1rem 1.25rem; }
  .quick .pair { min-height: 56px; font-size: 1.1rem; }
  .quick .steam { padding: .55rem .8rem .7rem; }
  .quick .stname { font-size: 1.35rem; margin-bottom: .2rem; }
  .quick .steam li { padding: .45rem 0; }
  .quick .steam .pn { font-size: 1.05rem; }
  .quick .steam .pn em { font-size: .9rem; }
  .quick button.stat .lf { display: none; } .quick button.stat .ls { display: inline; }
  .quick button.stat i { font-size: .72rem; letter-spacing: .04em; }
  .quick button.stat b { font-size: 1.75rem; }
  .quick .cell .minus { min-height: 32px; font-size: 1rem; }
  .quick .stkey { font-size: .9rem; gap: .4rem 1.1rem; }
  .quick .qscore { position: sticky; top: var(--hdr, 0px); z-index: 5; }
  .quick .ptbtn, .quick .ptap .minus { min-height: 56px; }
  .quick .btn.undo { min-height: 52px; font-size: 1rem; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .qgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .quick .qscore { order: -1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 14px; align-items: center; padding: .7rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
  .quick .qscore .scores { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .quick .scorebox { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-rows: auto auto; gap: 6px 10px; padding: 8px 12px; }
  .quick .scorebox label { grid-column: 1 / -1; font-size: 1.05rem; }
  .quick .scorebox input { min-height: 56px; font-size: 2.4rem; grid-column: 2; grid-row: 2; }
  .quick .scorebox .ptap { grid-column: 1; grid-row: 2; }
  .quick .qscore .result { margin: 0; }
  .quick .qscore .row { justify-content: flex-end; }
  .quick .cells { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .quick button.stat { min-height: 60px; }
}
@media (min-width: 1200px) {
  .qgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; gap: 14px; }
  .quick .steam li { display: block; padding: .3rem 0 .4rem; }
  .quick .steam .pn { margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quick .steam .pn em { display: inline; margin-left: .5rem; }
  .quick .cells { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .quick button.stat { min-height: 54px; }
  .quick button.stat b { font-size: 1.6rem; }
  .quick .cell .minus { min-height: 28px; }
  .quick .qscore { padding: .7rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
  .quick .scorebox input { min-height: 64px; font-size: 2.6rem; }
}

/* video sharing: WhatsApp green, Instagram gradient */
.vshare-row { margin-top: .7rem; }
.vidbox { margin-top: .8rem; }
.vidbox .btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.vidbox .btn.vs-wa { background: #25D366; color: #06301A; border-color: var(--cream); }
.vidbox .btn.vs-ig { background: linear-gradient(45deg, #F9A22C, #E1306C 45%, #833AB4); color: #fff; border-color: var(--cream); }
.vidbox .btn.vs-wa, .vidbox .btn.vs-ig { display: inline-flex; align-items: center; gap: .45rem; }
/* a shared video link glides to the videos; keep the heading clear of the pinned header */
#sec-videos { scroll-margin-top: calc(var(--hdr, 0px) + 1rem); }

/* ===== badges: a shield, hexagon or ring in the badge colour, the icon inside, the winning number on a tag ===== */
.bdg2 { --bs: 3.4rem; --bk: #0B1A24; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--bs); height: calc(var(--bs) * 54 / 48); vertical-align: middle; }
.bdg2 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bdg2 svg path, .bdg2 svg circle { fill: color-mix(in srgb, var(--bc) 14%, var(--bk)); stroke: var(--bc); stroke-width: 3.2; }
.bdg2 i { position: relative; margin-top: -5%; font-style: normal; font-size: calc(var(--bs) * .42); line-height: 1; }
.bdg2 em { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); padding: .12em .5em; border-radius: 99px; background: var(--bc); color: var(--bk); font: 900 calc(var(--bs) * .19)/1.1 var(--font-body); font-style: normal; white-space: nowrap; }
.bdg2 em.x { left: auto; right: -16%; bottom: 2%; transform: none; background: #FFF4DC; box-shadow: 0 0 0 2px var(--bk); }
.bdg2.sm { --bs: 1.3rem; } .bdg2.sm em { display: none; } .bdg2.sm svg path, .bdg2.sm svg circle { stroke-width: 4.5; }
.bdg2.lg { --bs: 4rem; }
.bdg2.off { filter: grayscale(1); opacity: .45; }
.pod .pb .bdg2.sm { --bs: 1.6rem; }
.bdgrow { gap: 3px 4px; min-height: 1rem; }
.ficons { display: inline-flex; flex-wrap: wrap; gap: .3rem; letter-spacing: 0; }
.ficons .bdg2.sm { --bs: 1.6rem; }

/* ===== player card: a dark progress report ===== */
.b-pl .pdetail.pcard { display: block; padding: clamp(1.1rem, 3.5vw, 1.8rem); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--ink)) 0%, var(--ink) 38%); border: 2px solid rgba(255,244,220,.2); border-radius: 0; box-shadow: 6px 6px 0 var(--accent); color: var(--cream); overflow: hidden; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pc-top img { width: 46px; height: 46px; }
.pc-top p { margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font: 900 1.05rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.pc-top b { color: var(--yel); } .pc-top span { color: var(--cream); font-size: .9rem; }
.b-pl .pdetail.pcard .pname { display: flex; align-items: flex-end; gap: .14em; margin: 1rem 0 0; padding: 0; color: var(--cream); text-shadow: none; font: 900 clamp(2.8rem, 10vw, 5.2rem)/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.b-pl .pdetail.pcard .pname::after { display: none; }
.pc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; padding: 1rem 0; border-block: 1px solid rgba(255,244,220,.16); }
.pc-stats > div { min-width: 0; padding-left: clamp(.6rem, 2vw, 1.1rem); border-left: 1px solid rgba(255,244,220,.16); }
.pc-stats > div:first-child { padding-left: 0; border-left: 0; }
.pc-stats b { display: block; font: 900 clamp(1.7rem, 6.4vw, 3.1rem)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-stats > div:first-child b { color: var(--yel); }
.pc-stats .up b { color: #3DDC97; } .pc-stats .dn b { color: #FF6B6B; }
.pc-stats i, .pc-brk i { display: block; margin-top: .4rem; font: 700 .66rem/1.2 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); }
.pc-brk { list-style: none; margin: 0; padding: .9rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(2.9rem, 1fr)); gap: .6rem .4rem; border-bottom: 1px solid rgba(255,244,220,.16); }
.pc-brk b { display: block; font: 900 1.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pc-brk i { margin-top: .25rem; }
.pcard h4 { margin: 0 0 .8rem; font: 700 .7rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); }
.pc-chart { padding: 1.1rem 0 1rem; border-bottom: 1px solid rgba(255,244,220,.16); }
.pc-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(.35rem, 1.6vw, .8rem); align-items: end; }
.pc-bars li { display: flex; flex-direction: column; align-items: stretch; text-align: center; min-width: 0; }
.pc-v { font: 900 1.15rem/1 var(--font-display); min-height: 1.15em; margin-bottom: .3rem; }
.pc-b { display: block; height: calc(var(--h) * 6.5rem); min-height: 6px; background: #24456B; transform-origin: bottom; }
.pc-bars li.cur .pc-b { background: #E23B2E; }
.pc-bars li.off .pc-b { height: 6px; background: rgba(255,244,220,.18); }
.pc-l { margin-top: .4rem; font: 800 .78rem var(--font-display); letter-spacing: .04em; color: var(--band-muted); }
.pc-bars li.cur .pc-l { color: var(--cream); }
.pc-bdg { padding: 1.1rem 0 .4rem; }
.pcard .pc-bdg h4 { font: 900 1.9rem/1 var(--font-display); letter-spacing: .02em; color: var(--cream); }
.pc-bdg h4 em { font-style: normal; color: var(--yel); }
.pc-bl { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; padding-bottom: .4rem; }
.pc-none { margin: 0; color: var(--band-muted); font-size: .9rem; }
.pc-acts { padding: 1rem 0 .2rem; }
.pc-sharebtn { min-height: 48px; }
.pcard .plog { margin-top: 1rem; }
.pcard .pcshare { margin-top: .6rem; box-shadow: none; }
@media (max-width: 480px) { .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; } .pc-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } }

/* the card builds up in the same order as the story video */
.pdetail.pcard.pop .pc-top { animation: pc-drop .45s ease-out both; }
.pdetail.pcard.pop .pname { transform-origin: left bottom; animation: pc-namefade .8s cubic-bezier(.2, .8, .2, 1) .2s both; }
.pdetail.pcard.pop .pc-stats > div { animation: pc-up .45s ease-out both; animation-delay: calc(.45s + var(--i, 0) * 100ms); }
.pdetail.pcard.pop .pc-brk li { animation: pc-up .35s ease-out both; animation-delay: calc(.8s + var(--i, 0) * 45ms); }
.pdetail.pcard.pop .pc-chart h4 { animation: pc-up .35s ease-out 1s both; }
.pdetail.pcard.pop .pc-b { animation: pc-grow .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.05s + var(--i, 0) * 80ms); }
.pdetail.pcard.pop .pc-v, .pdetail.pcard.pop .pc-l { animation: pc-fade .3s ease-out both; animation-delay: calc(1.3s + var(--i, 0) * 80ms); }
.pdetail.pcard.pop .pc-bdg h4, .pdetail.pcard.pop .pc-none { animation: pc-up .4s ease-out 1.6s both; }
.pdetail.pcard.pop .pc-bl .bdg2 { animation: pc-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.8s + var(--i, 0) * 140ms); }
.pdetail.pcard.pop .pc-acts, .pdetail.pcard.pop .plog, .pdetail.pcard.pop > .note { animation: pc-up .4s ease-out 1.4s both; }
@keyframes pc-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes pc-namefade { from { opacity: 0; filter: blur(8px); transform: translateY(12px) scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes pc-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes pc-fade { from { opacity: 0; } }
@keyframes pc-grow { from { transform: scaleY(0); } }
@keyframes pc-pop { from { opacity: 0; transform: scale(0) rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { .pdetail.pcard.pop *, .pdetail.pcard.pop .pc-bl .bdg2 { animation: none !important; } }

/* sharing the card: live story preview beside the buttons */
.pcs-body { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.pcs-prev { aspect-ratio: 9 / 16; background: var(--ink); border: 2px solid rgba(255,244,220,.3); overflow: hidden; }
.pcs-prev canvas { display: block; width: 100%; height: 100%; }
.pcs-side .shb-btns { flex-direction: column; align-items: stretch; }
.pcshare .btn.vs-ig { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: linear-gradient(45deg, #F9A22C, #E1306C 45%, #833AB4); color: #fff; border-color: var(--cream); }
.pcshare .btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.pcshare .btn:disabled { opacity: .45; cursor: progress; }
.pcs-help { font-size: .78rem; }
@media (max-width: 520px) { .pcs-body { grid-template-columns: minmax(0, 1fr); } .pcs-prev { width: min(62vw, 240px); margin-inline: auto; } }

/* ===== Share card pop-up: live story preview, a progress bar that turns into Share to Instagram, X outside the corner ===== */
body.pcm-open { overflow: hidden; }
.pcm { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.75rem 1.25rem; }
.pcm-back { position: absolute; inset: 0; background: rgba(3, 14, 16, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.pcm.in .pcm-back { opacity: 1; }
.pcm-box { position: relative; width: min(100%, 24rem); max-height: 100%; display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem; background: var(--ink); border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--accent); color: var(--cream); opacity: 0; transform: translateY(26px) scale(.95); transition: transform .38s cubic-bezier(.2, .9, .3, 1.2), opacity .25s ease; }
.pcm.in .pcm-box { opacity: 1; transform: none; }
.pcm-x { position: absolute; top: -20px; right: -20px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); color: var(--ink); font: 900 1.7rem/1 var(--font-body); cursor: pointer; box-shadow: 3px 3px 0 var(--accent); transition: transform .15s ease; }
.pcm-x:hover { transform: rotate(90deg); }
.pcm-x:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.pcm-t { margin: 0; padding-right: 1.4rem; font: 900 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--cream); overflow-wrap: anywhere; }
.pcm-prev { align-self: center; height: min(52dvh, 30rem); aspect-ratio: 9 / 16; max-width: 100%; border: 2px solid rgba(255,244,220,.3); background: var(--ink); overflow: hidden; }
.pcm-prev canvas { display: block; width: 100%; height: 100%; }
.pcm-acts { display: flex; flex-direction: column; gap: .6rem; }
.pcm .btn { min-height: 50px; }
.pcm-go { position: relative; overflow: hidden; width: 100%; min-height: 56px; background: rgba(255,244,220,.08); color: var(--cream); border: 2px solid var(--cream); box-shadow: none; }
.pcm-fill { position: absolute; inset: 0; background: linear-gradient(45deg, #F9A22C, #E1306C 45%, #833AB4); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s linear; }
.pcm-lbl { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.pcm-lbl svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.pcm .pcm-go:disabled { opacity: 1; cursor: progress; }
.pcm-go.ready { color: #fff; box-shadow: 4px 4px 0 var(--accent); animation: pcm-ready .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pcm-ready { 50% { transform: scale(1.04); } }
.pcm-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pcm-two .btn.ghost { background: transparent; color: var(--cream); border: 2px solid var(--cream); box-shadow: none; }
.pcm-two .btn:disabled { opacity: .4; cursor: progress; }
.pcm-msg { margin: 0; min-height: 1.2em; font-size: .82rem; line-height: 1.35; color: var(--band-muted); }
@media (max-width: 480px) { .pcm { padding: 1.6rem .9rem; } .pcm-x { top: -18px; right: -10px; } .pcm-prev { height: min(48dvh, 26rem); } }
@media (prefers-reduced-motion: reduce) { .pcm-back, .pcm-box, .pcm-fill, .pcm-x { transition: none; } .pcm-go.ready { animation: none; } }
/* share pop-up: picture previews (standings, draft), a full-width first button when there are three, brand colours */
.pcm-prev.img { height: auto; aspect-ratio: auto; display: grid; place-items: center; min-height: 8rem; }
.pcm-prev.img img { display: block; max-width: 100%; max-height: min(46dvh, 28rem); width: auto; height: auto; }
.pcm-two .btn:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.pcm-two .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.pcm-two .btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.pcm .btn.vs-wa { background: #25D366; color: #06301A; border: 2px solid var(--cream); }
.pcm .btn.vs-ig { background: linear-gradient(45deg, #F9A22C, #E1306C 45%, #833AB4); color: #fff; border: 2px solid var(--cream); }

/* ===== volleyball player outlines behind the player card and Player of the Game: each spins out, then sways ===== */
.b-pl .pdetail.pcard, .potg, .mip { isolation: isolate; }
.b-pl .pdetail.pcard { position: relative; }
.vfigs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vf { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); color: rgba(255,244,220,.13); rotate: var(--r); }
.vf:nth-child(2) { color: color-mix(in srgb, var(--accent) 30%, transparent); }
.potg .vf { color: rgba(255,244,220,.16); }
.potg .vf:nth-child(2) { color: color-mix(in srgb, var(--cc) 55%, transparent); }
.vf svg { display: block; width: 100%; height: 100%; animation: vf-sway 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.pdetail.pcard.pop .vf, .potg .vf, .mip .vf { animation: vf-out .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.1s + var(--i) * .22s); }
@keyframes vf-out { from { opacity: 0; transform: scale(0) rotate(-270deg); } }
@keyframes vf-sway { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-5%); } }
@media (prefers-reduced-motion: reduce) { .vf, .vf svg, .pdetail.pcard.pop .vf { animation: none !important; } }

/* ===== player card: last night against the week before ===== */
.pc-stats .pc-vs { display: block; margin-top: .35rem; font: 800 .78rem/1.2 var(--font-body); letter-spacing: .02em; color: var(--band-muted); }
.pc-stats .pc-vs.up { color: #3DDC97; } .pc-stats .pc-vs.dn { color: #FF6B6B; }

/* ===== Most Improved: the Player of the Game family (ink, cream frame, condensed type, player outlines)
   in mint, built around the jump from last week to this week. Parts drop, rise and pop instead of sliding. ===== */
.mip { --mint: #3DDC97; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin: -.4rem 0 1.6rem; border: 2px solid var(--cream); box-shadow: -6px 6px 0 var(--mint);
  background: radial-gradient(480px 320px at 80% 45%, color-mix(in srgb, var(--mint) 40%, transparent), transparent 70%), radial-gradient(380px 240px at 0% 0%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 70%), repeating-linear-gradient(65deg, transparent 0 22px, rgba(255,244,220,.04) 22px 44px), var(--ink);
  animation: mip-in .55s cubic-bezier(.2,.8,.2,1) both; }
/* a band of light rising up the card every few seconds */
.mip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, transparent 35%, color-mix(in srgb, var(--mint) 18%, transparent) 50%, transparent 65%); transform: translateY(100%); animation: mip-rise 5s ease-in-out 1.4s infinite; }
.mip .vf { color: rgba(255,244,220,.12); }
.mip .vf:nth-child(3) { color: color-mix(in srgb, var(--mint) 45%, transparent); }
.mip-l { position: relative; z-index: 1; padding: 1.3rem 0 1rem 1.3rem; min-width: 0; }
.mip-t { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .86; transform: skewX(-8deg); transform-origin: left; }
.mip-t .ma { display: block; color: var(--cream); font-size: clamp(2.6rem, 7vw, 4.4rem); animation: mip-drop .5s cubic-bezier(.2,.8,.2,1) .15s both; }
.mip-t .mb { display: block; color: var(--mint); font-size: clamp(2.3rem, 6.2vw, 4rem); animation: mip-up .6s cubic-bezier(.2,.8,.2,1) .35s both; }
.mip-n { margin: .55rem 0 0; font: 800 clamp(.95rem, 2.4vw, 1.15rem) var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); overflow-wrap: anywhere; }
.mip-d { margin: .15rem 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--band-muted); }
/* last week -> this week */
.mip-jump { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; }
.mip-jump > span:not(.mj-arr) { display: grid; justify-items: center; min-width: 4.6rem; }
.mip-jump b { display: block; width: 100%; padding: .15rem .9rem; text-align: center; font: 900 clamp(2rem, 5vw, 2.7rem)/1 var(--font-display); font-variant-numeric: tabular-nums; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.mip-jump i { margin-top: .3rem; font: 900 .8rem/1 var(--font-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mj-from b { color: var(--cream); background: rgba(255,244,220,.1); box-shadow: inset 0 0 0 2px rgba(255,244,220,.55); }
.mj-from i { color: var(--band-muted); }
.mj-from { animation: mip-up .45s cubic-bezier(.2,.8,.2,1) .6s both; }
.mj-to b { color: var(--ink); background: var(--mint); }
.mj-to i { color: var(--mint); }
.mj-to { animation: mip-pop .55s cubic-bezier(.3,1.6,.5,1) 1s both; }
.mj-arr { position: relative; flex: none; width: 2.2rem; height: 4px; margin-top: 1.3rem; background: var(--mint); border-radius: 2px; transform-origin: left; animation: mip-grow .35s ease-out .8s both; }
.mj-arr::after { content: ''; position: absolute; right: -6px; top: -6px; border: 8px solid transparent; border-left: 11px solid var(--mint); border-right: 0; }
/* where they improved */
.mip-s { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mip-s li { display: grid; justify-items: center; min-width: 3.6rem; padding: .3rem .5rem .35rem; border: 2px solid rgba(255,244,220,.3); border-radius: 10px; background: rgba(6,20,30,.45); animation: mip-up .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.2s + var(--i) * .1s); }
.mip-s b { font: 900 1.35rem/1 var(--font-display); color: var(--band-muted); font-variant-numeric: tabular-nums; }
.mip-s span { margin-top: .15rem; font: 800 .62rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.mip-s li.up { border-color: var(--mint); } .mip-s li.up b { color: var(--mint); }
.mip-s li.dn { border-color: #FF6B6B; } .mip-s li.dn b { color: #FF6B6B; }
/* the big jump, with chevrons climbing above it */
.mip-r { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; min-width: 0; padding: 1rem .5rem; }
.mip-chev { position: relative; width: 4.5rem; height: 5rem; }
.mip-chev i { position: absolute; left: 50%; bottom: 0; width: 3rem; height: 3rem; margin-left: -1.5rem; border: solid var(--mint); border-width: 8px 0 0 8px; border-radius: 3px; transform: rotate(45deg); opacity: 0; animation: mip-chev 2.4s linear infinite; animation-delay: calc(var(--d, 0s) + 1s); }
.mip-chev i:nth-child(2) { --d: .8s; } .mip-chev i:nth-child(3) { --d: 1.6s; }
.mip-up { font: 900 clamp(4rem, 13vw, 8rem)/.9 var(--font-display); color: var(--mint); font-variant-numeric: tabular-nums; animation: mip-pop .6s cubic-bezier(.3,1.6,.5,1) .5s both; }
.mip-upl { font: 900 .85rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.mip-f { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 1.3rem; background: var(--mint); color: var(--ink); font: 800 .85rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; animation: mip-up .45s cubic-bezier(.2,.8,.2,1) 1.6s both; }
.mip-f .dot { border: 2px solid var(--ink); }
/* a rounded pill, unlike the square Player of the Game button */
.mip-sh { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1.1rem; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--mint); font: 900 .9rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: transform .15s ease; }
.mip-sh span { font-size: .75em; }
.mip-sh:hover, .mip-sh:focus-visible { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
.mip-sh:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@keyframes mip-in { from { opacity: 0; transform: translateY(30px); } }
@keyframes mip-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes mip-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes mip-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes mip-grow { from { transform: scaleX(0); } }
@keyframes mip-chev { 0% { opacity: 0; transform: translateY(1rem) rotate(45deg); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-3.2rem) rotate(45deg); } }
@keyframes mip-rise { 0% { transform: translateY(100%); } 30%, 100% { transform: translateY(-100%); } }
@media (max-width: 640px) {
  .mip { grid-template-columns: minmax(0, 1fr) 34%; }
  .mip-l { padding: 1rem 0 .9rem 1rem; }
  .mip-jump > span:not(.mj-arr) { min-width: 3.8rem; }
  .mip-jump b { padding-inline: .6rem; }
  .mj-arr { width: 1.4rem; }
  .mip-s li { min-width: 3.1rem; padding-inline: .35rem; }
  .mip-chev { transform: scale(.75); }
  .mip-f { padding-inline: 1rem; font-size: .75rem; }
}
@media (min-width: 641px) { .mip { grid-template-columns: minmax(0, 1fr) minmax(9rem, 30%); } .mip-l { padding: 1.4rem 0 1.3rem 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .mip, .mip *, .mip::after { animation: none !important; } .mip::after { display: none; } .mip-chev i { opacity: .6; } .mip-chev i:nth-child(2) { transform: translateY(-1.4rem) rotate(45deg); } .mip-chev i:nth-child(3) { transform: translateY(-2.8rem) rotate(45deg); } }
.ld-share.fin .btn { flex: 1 1 14rem; min-height: 52px; }

/* ===== live draft: draft-night broadcast look =====
   The draft page only (body.draftview): deep navy studio, a red "live" accent, gold for the big moments,
   team colors for each captain. The tokens are swapped here so shared parts (panels, buttons, inputs) follow. */
body.draftview {
  color-scheme: dark;
  --bg: #05080F; --surface: #0D1424; --solid: #0D1424; --fg: #EEF2F8; --muted: #9AA8BF; --line: rgba(148, 170, 210, .18);
  --ink: #05080F; --accent: #E5192F; --on-accent: #FFFFFF; --accent-ink: #FF5A6A; --accent-hi: #FF3448; --band-muted: #9AA8BF; --yel: #FFC23D;
  --ld-p1: #0F182B; --ld-p2: #141F36; --ld-glow: rgba(229, 25, 47, .45); --ld-ease: cubic-bezier(.2, .8, .2, 1); --ld-pop: cubic-bezier(.3, 1.5, .5, 1);
  background: radial-gradient(1100px 520px at 50% -8%, rgba(229, 25, 47, .2), transparent 62%), radial-gradient(800px 600px at 115% 35%, rgba(59, 123, 255, .14), transparent 60%),
    radial-gradient(700px 520px at -15% 85%, rgba(18, 168, 123, .1), transparent 60%), #05080F;
  background-attachment: fixed; color: var(--fg);
}
html:has(body.draftview) { background: #05080F; }
body.draftview .top { background: rgba(5, 8, 15, .82); border-color: var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.draftview .shv-k { color: var(--muted); }
body.draftview .shv-k::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: middle; box-shadow: 0 0 10px var(--accent); }
body.draftview .hint, body.draftview .note, body.draftview .dt { color: var(--muted); }
body.draftview .note.err { color: #FF8A95; }
/* panels, buttons and fields on the dark set */
body.draftview .ldv .panel, body.draftview .ld-chat { background: linear-gradient(180deg, var(--ld-p2), var(--ld-p1)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); color: var(--fg); }
body.draftview .ldv .panel h2, body.draftview .ldv .panel h3 { color: #fff; }
body.draftview .btn { border: 1px solid transparent; border-radius: 10px; background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px var(--ld-glow); font: 800 1rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
body.draftview .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px -10px var(--ld-glow); background: var(--accent-hi); }
body.draftview .btn:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 4px 12px -6px var(--ld-glow); }
body.draftview .btn.ghost { background: rgba(255, 255, 255, .04); color: var(--fg); border-color: var(--line); box-shadow: none; }
body.draftview .btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .35); }
body.draftview .btn.small { box-shadow: none; }
body.draftview .btn:focus-visible, body.draftview .ld-chip:focus-visible, body.draftview .ld-grid button:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
body.draftview input, body.draftview select, body.draftview textarea, body.draftview .panel input[type="text"], body.draftview .panel select { background: #0A1020; color: var(--fg); border: 1px solid var(--line); border-radius: 10px; }
body.draftview input:focus, body.draftview select:focus, body.draftview textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; }
body.draftview .rpbox { background: color-mix(in srgb, var(--accent) 10%, var(--ld-p1)); border: 1px solid var(--accent); border-radius: 12px; }
body.draftview .rp-t b { color: #FF8A95; }
body.draftview .toast { background: #0F182B; border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); color: var(--fg); border-radius: 10px; }

/* the header: a studio title card with a "live" bug, the week and the format */
body.draftview .ld-head { --cc: var(--accent); padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
  background: linear-gradient(100deg, transparent 52%, color-mix(in srgb, var(--cc) 30%, transparent) 52.2%, color-mix(in srgb, var(--cc) 12%, transparent) 78%, transparent 78.2%),
    radial-gradient(500px 260px at 92% 10%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 70%), repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .025) 26px 52px), linear-gradient(160deg, #111C33, #070C18); }
body.draftview .ld-head::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--yel) 50%, var(--cc)); }
body.draftview .ld-head.k0, body.draftview .ld-head.k1, body.draftview .ld-head.k2 { transition: background .6s ease; }
.ld-bug { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.ld-bug > span { display: inline-flex; align-items: center; gap: .4rem; min-height: 26px; padding: 0 .6rem; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; font: 800 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.ld-bug .ld-live { background: var(--accent); box-shadow: 0 0 18px -2px var(--ld-glow); }
.ld-bug .ld-live .ldlive-dot { width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: ld-dotw 1.4s ease-out infinite; }
@keyframes ld-dotw { 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
body.draftview .ld-t { font-size: clamp(2.8rem, 10vw, 4.6rem); letter-spacing: -.01em; transform: skewX(-9deg); color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
body.draftview .ld-t .pb { color: var(--accent); text-shadow: 0 0 28px var(--ld-glow); }
body.draftview .ld-sub { color: var(--muted); }
body.draftview .ld-status { color: var(--yel); font-size: clamp(1.1rem, 3.6vw, 1.4rem); letter-spacing: .06em; }
.ld-prog { position: relative; height: 6px; margin-top: .7rem; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ld-prog i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--yel)); box-shadow: 0 0 12px var(--ld-glow); transition: width .8s var(--ld-ease); }
.ld-prog i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: ld-sweep 2.2s ease-in-out infinite; }
@keyframes ld-sweep { to { transform: translateX(100%); } }
.ld-door { text-align: left; }

/* the crawl along the bottom of the header */
.ld-ticker { display: flex; align-items: stretch; margin-top: -.4rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #070C18; }
.ld-tk-l { flex: none; display: flex; align-items: center; padding: 0 .9rem 0 .7rem; background: var(--accent); color: #fff; font: 900 .8rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ld-tk-w { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ld-tk { display: inline-flex; white-space: nowrap; padding: .5rem 0; animation: ld-crawl calc(8s + var(--n) * 3s) linear infinite; }
.ld-tk span { --cc: var(--c0); display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.1rem; font: 700 .9rem var(--font-body); color: var(--fg); border-right: 1px solid var(--line); }
.ld-tk span.k1 { --cc: var(--c1); } .ld-tk span.k2 { --cc: var(--c2); }
.ld-tk b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 4px; background: var(--cc); color: #05080F; font: 900 .75rem var(--font-display); }
.ld-tk i { font-style: normal; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
@keyframes ld-crawl { to { transform: translateX(-50%); } }

/* captain cards */
body.draftview .ld-caps3 { gap: .6rem; }
body.draftview .ld-cap { padding: .7rem .7rem .65rem; border: 1px solid var(--line); border-top: 0; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 18%, var(--ld-p2)), var(--ld-p1) 70%); box-shadow: inset 0 3px 0 var(--cc); overflow: hidden; }
body.draftview .ld-cap b { color: #fff; font-size: clamp(.95rem, 3.4vw, 1.2rem); }
body.draftview .ld-cap small { color: var(--muted); }
body.draftview .ld-pos { color: var(--cc); }
body.draftview .ld-cap.rdy small { color: var(--win-on-dark); font-weight: 700; }
body.draftview .ld-cap.rdy::after { content: '✓'; position: absolute; top: .45rem; right: .5rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--win-on-dark); color: #05080F; font: 900 .8rem/1 var(--font-body); animation: ld-pop .45s var(--ld-pop) both; }
body.draftview .ld-cap.on { transform: translateY(-3px); box-shadow: inset 0 3px 0 var(--cc), 0 0 0 2px var(--cc), 0 12px 30px -8px color-mix(in srgb, var(--cc) 60%, transparent); animation: ld-onx 1.6s ease-in-out infinite; }
body.draftview .ld-cap.me b::after { color: var(--muted); }
@keyframes ld-onx { 50% { box-shadow: inset 0 3px 0 var(--cc), 0 0 0 2px var(--cc), 0 12px 40px -2px color-mix(in srgb, var(--cc) 75%, transparent); } }
@keyframes ld-pop { from { transform: scale(0); opacity: 0; } }

/* the number reveal */
body.draftview .ld-reveal { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); background: radial-gradient(420px 260px at 50% 30%, rgba(229, 25, 47, .28), transparent 70%), linear-gradient(180deg, #111C33, #070C18); }
body.draftview .ld-num { -webkit-text-stroke-color: #fff; }
body.draftview .ld-reveal.landed .ld-num, body.draftview .ld-reveal.still .ld-num { color: var(--accent); -webkit-text-stroke-color: #fff; text-shadow: 0 0 40px var(--ld-glow); }
body.draftview .ld-reveal.spin .ld-num { animation: ld-shake .12s linear infinite; }
@keyframes ld-shake { 50% { transform: skewX(-8deg) translateY(-3px); } }
body.draftview .ld-gs li { border-radius: 10px; background: rgba(255, 255, 255, .05); }

/* this captain's number buttons */
body.draftview .ld-mine { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 20px 40px -20px var(--ld-glow); }
body.draftview .ld-grid button { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; box-shadow: none; transition: transform .15s var(--ld-pop), background-color .15s ease, border-color .15s ease; }
body.draftview .ld-grid button:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); }
body.draftview .ld-grid button:active { transform: scale(.92); }
body.draftview .ld-grid button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 10px 24px -8px var(--ld-glow); }

/* on the clock: a lower third */
body.draftview .ld-clock { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: 0 1rem 0 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--cc) 70%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 26%, var(--ld-p2)), var(--ld-p1) 70%); }
.ld-otc { align-self: stretch; display: grid; align-content: center; padding: .7rem .9rem .7rem .8rem; background: var(--accent); color: #fff; font: 900 1.05rem/.9 var(--font-display); text-transform: uppercase; letter-spacing: .06em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.ld-otc span:last-child { font-size: 1.45rem; }
body.draftview .ld-ring { width: 66px; height: 66px; background: conic-gradient(var(--cc) var(--p), rgba(255, 255, 255, .1) 0); transition: --p 1s linear; }
body.draftview .ld-ring::before { background: #0A1020; }
body.draftview .ld-ring span { color: #fff; }
body.draftview .ld-ring.low { --cc: var(--accent); }
body.draftview .ld-ring.low span { color: #FF8A95; }
.ld-cw { min-width: 0; padding: .6rem 0; }
body.draftview .ld-clock b { color: #fff; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.draftview .ld-clock small { display: block; color: var(--muted); }
body.draftview .ld-clock .ld-cpk { color: var(--cc); font: 800 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .15rem; }
body.draftview .ld-clock.enter { animation: ld-lower .6s var(--ld-ease) both; }
body.draftview .ld-clock.enter .ld-otc { animation: ld-wipe .5s var(--ld-ease) .1s both; }
@keyframes ld-lower { from { opacity: 0; transform: translateX(-30px); } }
@keyframes ld-wipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
body.draftview .ld-confirm { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px 16px 0 0; background: rgba(10, 16, 32, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fg); }
body.draftview .ld-confirm b { color: var(--yel); }

/* teams */
body.draftview .ld-teams { gap: .6rem; }
body.draftview .ld-col { padding: 0 0 .55rem; border: 1px solid var(--line); border-top: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--ld-p2), var(--ld-p1)); }
body.draftview .ld-col h3 { display: grid; gap: .05rem; margin: 0 0 .5rem; padding: .55rem .6rem .5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 55%, #0A1020), color-mix(in srgb, var(--cc) 20%, #0A1020)); color: #fff; font-size: clamp(.9rem, 3vw, 1.1rem); box-shadow: inset 0 3px 0 var(--cc); }
body.draftview .ld-col h3 small { font: 800 .66rem var(--font-display); letter-spacing: .16em; color: color-mix(in srgb, var(--cc) 40%, #fff); }
body.draftview .ld-col h3 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.draftview .ld-col.on { box-shadow: 0 0 0 2px var(--cc), 0 16px 34px -14px color-mix(in srgb, var(--cc) 70%, transparent); }
body.draftview .ld-col ol { padding: 0 .45rem; }
body.draftview .ld-col li { border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--fg); }
body.draftview .ld-pn { border-radius: 5px; color: #05080F; }
body.draftview .ld-col li.new { animation: ld-glowx 1.4s ease-out; }
@keyframes ld-glowx { 0% { background: var(--cc); color: #05080F; box-shadow: 0 0 0 0 var(--cc); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* the pool */
body.draftview .ld-chips { gap: .5rem; }
body.draftview .ld-chip { border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--fg); font-weight: 700; }
body.draftview .ld-chip.tap { box-shadow: none; transition: transform .15s var(--ld-pop), background-color .15s ease, border-color .15s ease, box-shadow .2s ease; }
body.draftview .ld-chip.tap:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
body.draftview .ld-chip.tap:active { transform: scale(.95); background: rgba(255, 255, 255, .12); box-shadow: none; }
body.draftview .ld-chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.05); box-shadow: 0 10px 24px -8px var(--ld-glow); }
body.draftview .ld-pool h3 .dt { color: var(--yel); }

/* admin controls */
body.draftview .ld-links li { border-top-color: var(--line); }
.ldp-btn { display: inline-flex; align-items: center; gap: .45rem; }
.ldp-btn .ldp-n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 99px; background: var(--win-on-dark); color: #05080F; font: 900 .85rem var(--font-display); letter-spacing: 0; }
.ld-auto { flex: 1 1 100%; }
.ld-auto b { color: var(--win-on-dark); }
.ldp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--win-on-dark); box-shadow: 0 0 0 0 rgba(70, 224, 160, .6); animation: ld-dotg 1.8s ease-out infinite; }
@keyframes ld-dotg { 70% { box-shadow: 0 0 0 7px rgba(70, 224, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(70, 224, 160, 0); } }

/* share row and chat */
body.draftview .ld-chatlink { color: var(--yel); }
body.draftview .ld-chat { overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
body.draftview .ldc-h { background: linear-gradient(90deg, var(--accent), #8E0E1D); }
body.draftview .ldc-h h2 { color: #fff; }
body.draftview .ldc-h .ldlive-dot { background: #fff; }
body.draftview .ldc-h .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
body.draftview .ldc-msg { border-left: 0; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, .06); justify-self: start; max-width: 88%; padding-right: 2rem; }
body.draftview .ldc-msg.mine { justify-self: end; border-radius: 14px 4px 14px 14px; background: color-mix(in srgb, var(--accent) 22%, var(--ld-p2)); }
body.draftview .ldc-msg b { color: var(--yel); }
body.draftview .ldc-pick { border-radius: 10px; color: var(--fg); }
body.draftview .ldc-pick .ld-pn { color: #05080F; }
body.draftview .ldc-del { color: var(--muted); }
body.draftview .ldc-form { border-top: 1px solid var(--line); }
body.draftview .ldc-list li.new { animation: ld-msg .35s var(--ld-pop); }
@keyframes ld-msg { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.ldc-as { margin: 0; font-size: .85rem; color: var(--muted); }
.ldc-as b { color: var(--fg); }
.ldc-ren { min-height: 32px; padding: 0 .4rem; border: 0; background: none; color: var(--yel); font: 700 .85rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ldc-err { padding: .6rem .8rem; border: 1px solid #FF8A95; border-radius: 10px; background: rgba(229, 25, 47, .12); color: #FFC4CA; font-size: .9rem; }
body.draftview .ld-hostin details { border: 1px dashed var(--line); border-radius: 12px; }
body.ld-gated #ldextra { display: none; }

/* pop-ups: the name gate and the participant list */
.ldg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem 16px; overflow-x: hidden; overflow-y: auto; background: rgba(3, 5, 10, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; color: #EEF2F8; }
.ldg.in { opacity: 1; }
.ldg::before, .ldg::after { content: ''; position: fixed; top: -30vh; width: 60vmax; height: 140vh; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 70%); filter: blur(6px); transform-origin: top center; animation: ld-beam 7s ease-in-out infinite alternate; }
.ldg::before { left: -10vmax; transform: rotate(22deg); }
.ldg::after { right: -10vmax; transform: rotate(-22deg); animation-delay: -3.5s; background: linear-gradient(180deg, rgba(229, 25, 47, .16), transparent 70%); }
@keyframes ld-beam { from { opacity: .4; } to { opacity: 1; translate: 0 0; rotate: 6deg; } }
.ldg-back { position: fixed; inset: 0; }
.ldg-box { position: relative; z-index: 1; width: min(100%, 26rem); display: grid; gap: .7rem; padding: 1.4rem 1.3rem 1.3rem; border: 1px solid rgba(148, 170, 210, .22); border-top: 4px solid #E5192F; border-radius: 18px; background: linear-gradient(160deg, #121D33, #070C18); box-shadow: 0 40px 80px -30px #000, 0 0 60px -20px rgba(229, 25, 47, .5);
  transform: translateY(24px) scale(.96); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease; }
.ldg.in .ldg-box { transform: none; opacity: 1; }
.ldg-f { display: grid; gap: .7rem; }
.ldg-k { margin: 0; display: flex; align-items: center; gap: .5rem; font: 800 .75rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #9AA8BF; }
.ldg-k .ldlive-dot { background: #E5192F; }
.ldg-t { margin: 0; font: 900 clamp(2.2rem, 9vw, 3rem)/.9 var(--font-display); text-transform: uppercase; transform: skewX(-9deg); transform-origin: left; color: #fff; }
.ldg-t span { display: block; }
.ldg-t .b { color: #E5192F; text-shadow: 0 0 26px rgba(229, 25, 47, .5); }
.ldg-p { margin: 0; color: #9AA8BF; font-size: .95rem; line-height: 1.5; }
.ldg label { font: 800 .75rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #EEF2F8; margin-top: .2rem; }
.ldg input, .ldg select { width: 100%; min-height: 54px; padding: 0 1rem; border: 1px solid rgba(148, 170, 210, .3); border-radius: 12px; background: #0A1020; color: #fff; font: 700 1.15rem var(--font-body); }
.ldg input:focus, .ldg select:focus { border-color: #E5192F; outline: 2px solid rgba(229, 25, 47, .45); outline-offset: 0; }
.ldg-msg { margin: 0; min-height: 1.2em; color: #FF8A95; font-size: .88rem; }
.ldg .btn { width: 100%; }
.ldg-go { min-height: 58px; font-size: 1.15rem; }
.ldg-go span { display: inline-block; transition: transform .2s ease; }
.ldg-go:hover span { transform: translateX(5px); }
.ldg-host { margin-top: .2rem; padding-top: .7rem; border-top: 1px solid rgba(148, 170, 210, .18); }
.ldg-host summary { cursor: pointer; color: #9AA8BF; font-weight: 700; font-size: .9rem; min-height: 32px; display: flex; align-items: center; }
.ldg-host .ldh-form { max-width: none; }
.ldg .pcm-x { top: -18px; right: -14px; background: #EEF2F8; border-color: #05080F; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .7); }
/* participants */
.ldp .ldg-box { width: min(100%, 30rem); max-height: calc(100dvh - 3rem); }
#ldp-body { overflow-y: auto; min-height: 0; margin-right: -.4rem; padding-right: .4rem; }
.ldp-sum { margin: 0 0 .6rem; color: #9AA8BF; }
.ldp-sum b { color: #46E0A0; font: 900 1.2rem var(--font-display); }
.ldp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ldp-list li { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem .5rem .75rem; border: 1px solid rgba(148, 170, 210, .16); border-radius: 12px; background: rgba(255, 255, 255, .04); animation: ld-msg .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ldp-list li.k0 { box-shadow: inset 3px 0 0 var(--c0); } .ldp-list li.k1 { box-shadow: inset 3px 0 0 var(--c1); } .ldp-list li.k2 { box-shadow: inset 3px 0 0 var(--c2); }
.ldp-list li.off .ldp-dot { background: #4A5670; animation: none; box-shadow: none; }
.ldp-who { flex: 1 1 auto; min-width: 0; display: grid; }
.ldp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.05rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.ldp-who small { color: #9AA8BF; font-size: .78rem; }
.ldp-ask { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.ldp .btn { width: auto; }
.ldp .btn.small { min-height: 40px; padding: 0 .8rem; font-size: .82rem; }
.ldp .ldp-kick { background: #E5192F; color: #fff; }
.ldp-list.out li { opacity: .75; }
.ldp-h { margin: 1rem 0 .4rem; font: 900 .9rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #FF8A95; }
.ldp-empty { color: #9AA8BF; justify-content: center; }
.ldp-note { margin: .6rem 0 0; font-size: .85rem; color: #FFC23D; }

/* the broadcast moment: "the pick is in" / "the order is set" over the whole screen */
.ldsp { --cc: #E5192F; position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: radial-gradient(600px 400px at 50% 50%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 70%), rgba(3, 5, 10, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; animation: ld-fade .25s ease both; color: #fff; overflow: hidden; }
.ldsp.k0 { --cc: var(--c0); } .ldsp.k1 { --cc: var(--c1); } .ldsp.k2 { --cc: var(--c2); }
.ldsp.out { animation: ld-fadeout .35s ease both; }
.ldsp-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.1rem; width: min(100%, 40rem); text-align: center; }
.ldsp-band { position: relative; display: block; width: 120vw; justify-self: start; margin-left: calc(50% - 60vw); padding: .5rem 0; background: #E5192F; transform: rotate(-4deg); box-shadow: 0 10px 40px -10px rgba(229, 25, 47, .8); animation: ld-band .55s cubic-bezier(.2, .8, .2, 1) both; }
.ldsp-band span { display: block; font: 900 clamp(1.8rem, 8vw, 3.2rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-style: italic; animation: ld-band-t .7s cubic-bezier(.2, .8, .2, 1) .1s both; }
.ldsp-card { display: grid; justify-items: center; gap: .35rem; padding: 1.1rem 1.4rem 1.2rem; width: min(100%, 30rem); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 40%, #0E1730), #070C18 80%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 4px 0 var(--cc), 0 30px 60px -20px #000; animation: ld-card .6s cubic-bezier(.2, .9, .3, 1.2) .35s both; }
.ldsp-card small { font: 800 .8rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--yel, #FFC23D); }
.ldsp-cap { font: 800 clamp(1rem, 4vw, 1.3rem) var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: #C9D3E4; }
.ldsp-pl { display: block; max-width: 100%; overflow-wrap: anywhere; font: 900 clamp(2.8rem, 14vw, 5.5rem)/.9 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 0 0 40px color-mix(in srgb, var(--cc) 80%, transparent); animation: ld-name .7s cubic-bezier(.2, .9, .3, 1.1) .65s both; }
.ldsp-ord { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .45rem; width: 100%; }
.ldsp-ord li { --cc: var(--c0); display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 4px 0 0 var(--cc); animation: ld-lower .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.7s + var(--i) * .18s); }
.ldsp-ord li.k1 { --cc: var(--c1); } .ldsp-ord li.k2 { --cc: var(--c2); }
.ldsp-ord i { font: 900 .9rem var(--font-display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cc); min-width: 2.6rem; }
.ldsp-ord b { font: 900 clamp(1.3rem, 5vw, 1.8rem) var(--font-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-fadeout { to { opacity: 0; } }
@keyframes ld-band { from { transform: rotate(-4deg) translateX(-110%); } }
@keyframes ld-band-t { from { opacity: 0; letter-spacing: .6em; } }
@keyframes ld-card { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes ld-name { from { opacity: 0; transform: scale(1.5); filter: blur(8px); } }

/* entrance on the first draw: the header drops, cards and columns rise in turn, chips follow */
.ldv.intro .ld-head { animation: ld-drop .6s var(--ld-ease) both; animation-delay: var(--el, 0ms); }
.ldv.intro .ld-head .ld-t .pa { display: inline-block; animation: ld-slidel .55s var(--ld-ease) both; animation-delay: calc(var(--el, 0ms) + .15s); }
.ldv.intro .ld-head .ld-t .pb { display: inline-block; animation: ld-slider .55s var(--ld-ease) both; animation-delay: calc(var(--el, 0ms) + .3s); }
.ldv.intro .ld-cap, .ldv.intro .ld-col { animation: ld-rise .5s var(--ld-ease) both; animation-delay: calc(var(--el, 0ms) + .35s + var(--i, 0) * .1s); }
.ldv.intro .ld-chip { animation: ld-rise .4s var(--ld-ease) both; animation-delay: calc(var(--el, 0ms) + .7s + var(--i, 0) * 30ms); }
.ldv.intro .ld-ticker, .ldv.intro .ld-clock, .ldv.intro .ld-host, .ldv.intro .ld-pool { animation: ld-rise .5s var(--ld-ease) both; animation-delay: calc(var(--el, 0ms) + .5s); }
@keyframes ld-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes ld-slidel { from { opacity: 0; transform: translateX(-40px); } }
@keyframes ld-slider { from { opacity: 0; transform: translateX(40px); } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 480px) {
  body.draftview .ld-clock { gap: .6rem; padding-right: .7rem; }
  .ld-otc { padding: .6rem .7rem .6rem .6rem; font-size: .85rem; }
  .ld-otc span:last-child { font-size: 1.15rem; }
  body.draftview .ld-ring { width: 56px; height: 56px; }
  body.draftview .ld-cap { padding: .6rem .5rem .55rem; }
  body.draftview .ld-cap.rdy::after { width: 18px; height: 18px; font-size: .7rem; top: .35rem; right: .35rem; }
  .ld-tk-l { font-size: .7rem; padding: 0 .7rem 0 .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ldv.intro *, .ldv.intro .ld-head, .ldsp, .ldsp *, .ldg, .ldg-box, .ldp-list li, body.draftview .ld-clock.enter, body.draftview .ld-clock.enter .ld-otc, body.draftview .ld-cap.rdy::after, body.draftview .ldc-list li.new, body.draftview .ld-reveal.spin .ld-num { animation: none !important; transition: none !important; }
  .ld-tk, .ld-prog i::after, .ldg::before, .ldg::after, .ld-bug .ld-live .ldlive-dot, .ldp-dot, body.draftview .ld-cap.on { animation: none !important; }
  .ld-tk-w { overflow-x: auto; }
  .ldg .ldg-box { transform: none; opacity: 1; }
}
.ld-rule { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0 0; padding: .25rem .6rem; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; font: 800 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.ld-rule::before { content: "\23F1"; font-size: .95rem; letter-spacing: 0; }
/* the draft room's sound switch, at the right end of the header labels */
.ld-snd { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .7rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; background: rgba(255, 255, 255, .06); color: #fff; font: 800 .75rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, transform .15s ease; }
.ld-snd:hover { background: rgba(255, 255, 255, .14); }
.ld-snd:active { transform: scale(.95); }
.ld-snd[aria-pressed="true"] { color: var(--muted, #9AA8BF); }
.ld-snd:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }

/* ===== top 10 in every ranked list: one outlined box with a slow glow, a "Top 10" tag on its bottom edge,
   and everyone below it muted, fading in one after another and lighting up on hover ===== */
.lrow.top10, .lrow.rest, .tr.top10, .tr.rest { position: relative; }
.top10 { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.top10::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--accent); border-top-width: 0; border-bottom-width: 0; animation: t10-glow 3.2s ease-in-out infinite; }
.top10.t10a::before { border-top-width: 2px; border-radius: 10px 10px 0 0; }
.top10.t10z::before { border-bottom-width: 2px; border-radius: 0 0 10px 10px; }
.top10.t10a.t10z::before { border-radius: 10px; }
.top10 .rk, .top10 .rank { color: var(--accent); }
.b-st .tr.top10 .rank, .b-pl .tr.top10 .rank, .lrow.top10 .rk { color: var(--accent-hi); }
/* the tag that sits on the box's bottom edge, with a light running across it */
.top10.t10z::after { content: 'Top 10'; position: absolute; left: .7rem; bottom: 0; z-index: 2; transform: translateY(50%); padding: .1rem .55rem; border-radius: 99px; pointer-events: none;
  background: linear-gradient(100deg, var(--accent) 40%, color-mix(in srgb, var(--accent) 45%, #fff) 50%, var(--accent) 60%) 0 0 / 300% 100%; color: #fff; font: 900 .7rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; animation: t10-tag 3.2s linear infinite; }
.lrow.t10z, .tr.t10z { margin-bottom: .5rem; }
@keyframes t10-glow { 0%, 100% { border-color: color-mix(in srgb, var(--accent) 70%, transparent); filter: none; } 50% { border-color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); } }
@keyframes t10-tag { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* below the top 10: muted, sliding in one by one, full strength again on hover or when picked */
.rest { opacity: .62; animation: t10-in .5s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .2s ease; }
.rest { animation-delay: calc(var(--r, 0) * 45ms); }
.rest .rk, .rest .rank { color: var(--muted) !important; }
.lrow.rest .rk { color: rgba(255, 244, 220, .5) !important; }
.rest:hover, .rest.on, .rest:focus-within { opacity: 1; }
@keyframes t10-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: .62; transform: none; } }
@media (prefers-reduced-motion: reduce) { .top10::before, .top10.t10z::after, .rest { animation: none; } }
/* room between the top 10 box edge and the rank numbers in the player table (the header row moves with it) */
.playerstbl .tr { padding-left: .75rem; }

/* ===== the podium: top three as dark cards in the Player of the Game family. They rise onto their steps
   3rd, 2nd, then 1st; the medal flips in and floats; the place sits behind in big outlined type; 1st glows. ===== */
.podium { margin-top: 2.6rem; gap: clamp(.45rem, 2vw, 1.1rem); }
.podium .pod { --medal: #C9D1DD; display: flex; flex-direction: column; align-items: center; isolation: isolate; padding: 1.9rem .55rem 0; color: var(--cream); border: 2px solid var(--cream); border-radius: 4px;
  background: radial-gradient(240px 180px at 50% 0%, color-mix(in srgb, var(--medal) 42%, transparent), transparent 70%), repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,244,220,.04) 18px 36px), var(--ink);
  box-shadow: 5px 5px 0 var(--medal); transform-origin: 50% 100%; animation: pod-rise .75s cubic-bezier(.25, 1.35, .5, 1) both; animation-delay: calc(var(--d, 0) * .18s); transition: transform .2s ease, box-shadow .2s ease; }
.podium .pod.p1 { --medal: #F5C242; box-shadow: 6px 6px 0 var(--accent), 0 0 44px -8px rgba(245, 194, 66, .6); animation: pod-rise .75s cubic-bezier(.25, 1.35, .5, 1) both, pod-glow 3.2s ease-in-out 1.4s infinite; animation-delay: calc(var(--d, 0) * .18s), 1.4s; }
.podium .pod.p3 { --medal: #D9894A; }
/* a band of light across 1st, every few seconds */
.podium .pod.p1::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 244, 220, .2) 50%, transparent 65%); transform: translateX(-100%); animation: potg-shine 4.5s ease-in-out 1.6s infinite; }
.podium .pod > * { position: relative; z-index: 1; }
.podium .pod .vfigs { position: absolute; z-index: 0; }
.podium .pod > .sr { position: absolute; }
.podium .pod .vf { color: rgba(255, 244, 220, .1); animation: vf-out .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.9s + var(--i) * .22s); }
.podium .pod .vf:nth-child(2) { color: color-mix(in srgb, var(--medal) 30%, transparent); }
/* the place, huge and outlined, behind everything */
.podium .pod-big { position: absolute; right: .15rem; bottom: 1.4rem; z-index: 0; font: 900 clamp(5.5rem, 17vw, 10rem)/.8 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--medal); opacity: .28; transform: skewX(-8deg); pointer-events: none; animation: pod-big .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * .18s + .35s); }
/* the medal: a metal coin that flips in, then floats */
.podium .pod .medal { position: absolute; top: -1.6rem; left: 50%; z-index: 2; width: 3.1rem; height: 3.1rem; margin-left: -1.55rem; transform: none; border: 2px solid var(--ink); color: var(--ink);
  background: radial-gradient(circle at 32% 26%, #fff 0, rgba(255,255,255,.4) 22%, transparent 45%), conic-gradient(from 200deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #fff), var(--medal), color-mix(in srgb, var(--medal) 70%, #000), var(--medal));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), 0 0 0 3px color-mix(in srgb, var(--medal) 35%, transparent); animation: pod-coin .9s cubic-bezier(.2, .8, .3, 1.2) both, pod-float 3s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .18s + .3s), calc(var(--d, 0) * .18s + 1.2s); }
.podium .pod.p1 .medal { width: 3.6rem; height: 3.6rem; margin-left: -1.8rem; top: -1.85rem; font-size: 1.6rem; }
.podium .pod .medal > span { display: block; }
.podium .pod .nm { margin-top: .5rem; color: var(--cream); transform: skewX(-6deg); animation: pod-up .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * .18s + .45s); }
.podium .pod .mv.up { color: var(--win-on-dark); background: rgba(70, 224, 160, .15); }
.podium .pod .mv.dn { color: var(--loss-on-dark); background: rgba(255, 123, 123, .15); }
.podium .pod .pt { color: var(--medal); margin-top: .35rem; animation: pod-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * .18s + .5s); }
.podium .pod.p1 .pt { font-size: clamp(2.8rem, 10vw, 4.6rem); text-shadow: 0 0 26px rgba(245, 194, 66, .45); }
.podium .pod .pt b { font: inherit; color: inherit; }
.podium .pod .pt small, .podium .pod .pt small * { color: var(--band-muted) !important; }
.podium .pod .mini { color: var(--band-muted); animation: pod-up .5s ease both; animation-delay: calc(var(--d, 0) * .18s + .7s); }
.podium .pod .pb { animation: pod-up .5s ease both; animation-delay: calc(var(--d, 0) * .18s + .85s); }
/* the step itself, built from the middle out */
.podium .pod-step { align-self: stretch; margin: auto -.55rem 0; margin-top: auto; padding: .35rem 0 .3rem; background: var(--medal); color: var(--ink); font: 900 .9rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; transform-origin: 50% 50%; animation: pod-step .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * .18s + .2s); }
.podium .pod .pb + .pod-step { margin-top: .8rem; }
.podium .pod.p1 .pod-step { font-size: 1.05rem; padding: .45rem 0 .4rem; }
@media (hover: hover) { .podium .pod:hover { transform: translateY(-6px) rotate(-.6deg); } .podium .pod.p1:hover { transform: translateY(-6px) scale(1.02); } }
@keyframes pod-rise { from { opacity: 0; transform: translateY(70px) scaleY(.7); } }
@keyframes pod-glow { 50% { box-shadow: 6px 6px 0 var(--accent), 0 0 64px -4px rgba(245, 194, 66, .8); } }
@keyframes pod-big { from { opacity: 0; transform: skewX(-8deg) translateX(40px) scale(1.2); } }
@keyframes pod-coin { from { opacity: 0; transform: translateY(-30px) rotateY(540deg) scale(.4); } }
@keyframes pod-float { 50% { translate: 0 -5px; } }
@keyframes pod-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes pod-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes pod-step { from { transform: scaleX(0); } }
@media (max-width: 640px) {
  .podium .pod { padding: 1.7rem .35rem 0; }
  .podium .pod-step { margin-inline: -.35rem; font-size: .75rem; letter-spacing: .12em; }
  .podium .pod .medal { width: 2.6rem; height: 2.6rem; margin-left: -1.3rem; top: -1.4rem; font-size: 1.1rem; }
  .podium .pod.p1 .medal { width: 3rem; height: 3rem; margin-left: -1.5rem; top: -1.6rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .podium .pod, .podium .pod *, .podium .pod::after { animation: none !important; } .podium .pod.p1::after { display: none; } }
/* a real staircase: 1st highest, then 2nd, then 3rd */
.podium .pod.p1 { min-height: 17rem; } .podium .pod.p2 { min-height: 15rem; } .podium .pod.p3 { min-height: 13.6rem; }
@media (max-width: 640px) { .podium .pod.p1 { min-height: 14.2rem; } .podium .pod.p2 { min-height: 12.6rem; } .podium .pod.p3 { min-height: 11.4rem; } }
/* 1st's light band moves inside its own box (the card can't clip, the medal sits above it) */
.podium .pod.p1::after { transform: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 220, .2) 50%, transparent 60%) 0 0 / 300% 100% no-repeat; background-position: 100% 0; animation: pod-shine 4.5s ease-in-out 1.6s infinite; }
@keyframes pod-shine { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }

/* the merged leaderboard: the range toggle sits above find and sort */
.lbctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.lbctl .seg button { min-height: 44px; padding-inline: 1rem; white-space: nowrap; }
.lbctl .seg button:disabled { opacity: .4; cursor: not-allowed; }
#sec-players .podium { margin-block: 2.6rem 1rem; }

/* ===== badge outlines come alive: a bright dash runs around the shape while you hover a player (their row, name,
   podium card or award), and on the player card once each badge has popped in ===== */
.bdg2 svg .bt path, .bdg2 svg .bt circle { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 24 76; opacity: 0; filter: drop-shadow(0 0 2px var(--bc)) drop-shadow(0 0 4px var(--bc)); }
.bdg2.sm svg .bt path, .bdg2.sm svg .bt circle { stroke-width: 5.5; }
.bdg2 svg { transition: filter .2s ease; }
.tr.selrow:hover .bdg2 svg, .tr.selrow:focus-within .bdg2 svg, .pod:hover .bdg2 svg, .award:hover .bdg2 svg, .pdetail.pcard.pop .pc-bl .bdg2 svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bc) 70%, transparent)); }
.tr.selrow:hover .bdg2 .bt *, .tr.selrow:focus-within .bdg2 .bt *, .pod:hover .bdg2 .bt *, .award:hover .bdg2 .bt * { opacity: 1; animation: bdg-trace 1.3s linear infinite; animation-delay: calc(var(--i, 0) * -.25s); }
.tr.selrow:hover .bdgrow .bdg2:nth-child(2n) .bt *, .pod:hover .pb .bdg2:nth-child(2n) .bt * { animation-delay: -.65s; }
/* the player card: each badge's light starts just after it pops in, then keeps circling */
.pdetail.pcard.pop .pc-bl .bdg2 .bt * { animation: bdg-trace-in 1.6s linear infinite; animation-delay: calc(2.2s + var(--i, 0) * 140ms); }
@keyframes bdg-trace { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes bdg-trace-in { from { opacity: 1; stroke-dashoffset: 0; } to { opacity: 1; stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .bdg2 svg .bt * { animation: none !important; stroke-dasharray: none; }
  .tr.selrow:hover .bdg2 .bt *, .pod:hover .bdg2 .bt *, .award:hover .bdg2 .bt *, .pdetail.pcard.pop .pc-bl .bdg2 .bt * { opacity: .55; }
}

/* ===== cards: a close button in the corner, the week history in fours ===== */
.pdetail.pcard { position: relative; }
.pc-x { position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255, 244, 220, .5); border-radius: 50%; background: rgba(6, 20, 30, .6); color: var(--cream); font: 900 1.6rem/1 var(--font-body); cursor: pointer; touch-action: manipulation; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.pc-x:hover { transform: rotate(90deg); background: var(--cream); color: var(--ink); border-color: var(--cream); }
.pc-x:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.pdetail.pcard .pc-top { padding-right: 3.4rem; }
.pdetail.pcard.pop .pc-x { animation: pc-pop .45s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.pc-logh { margin: 1.2rem 0 0 !important; }
.pcard .pc-logh + .plog { margin-top: .4rem; }
.plog li.more { animation: pc-up .4s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
.pc-more { margin-top: .7rem; width: 100%; min-height: 46px; }
.pc-more .dt { color: var(--band-muted); }
.b-pl .pc-more { background: transparent; color: var(--cream); border: 2px solid rgba(255, 244, 220, .4); box-shadow: none; }
.b-pl .pc-more:hover { border-color: var(--cream); }

/* ===== draft card: the player card's layout in draft gold, with a light running around the border ===== */
.pdetail.pcard.dcard { display: block; background: var(--ink); margin: .4rem 0 1.2rem; padding: clamp(1.1rem, 3.5vw, 1.8rem); color: var(--cream); border: 0; border-radius: 0; overflow: hidden; isolation: isolate; box-shadow: 6px 6px 0 var(--yel); }
/* the border light: a spinning gradient behind, with the card's face laid over all but a 3px rim */
.pdetail.pcard.dcard::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -2; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--yel) 40%, transparent) 80%, var(--yel) 88%, #fff 90%, transparent 92%); animation: dc-spin 4.5s linear infinite; }
.pdetail.pcard.dcard::after { content: ''; position: absolute; inset: 3px; z-index: -1; background: radial-gradient(520px 280px at 100% 0%, rgba(255, 201, 60, .2), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--yel) 10%, var(--ink)) 0%, var(--ink) 40%); }
.pdetail.pcard.dcard .pname { display: flex; align-items: flex-end; margin: 1rem 0 0; padding: 0; color: var(--cream); text-shadow: none; font: 900 clamp(2.8rem, 10vw, 5.2rem)/.9 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.pdetail.pcard.dcard .pname::after { display: none; }
.dcard .pc-stats > div:first-child b { color: var(--yel); }
.dcard .pc-stats .pc-vs { display: block; margin-top: .3rem; font: 800 .72rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--band-muted); }
.dcard .pc-stats .pc-vs.up { color: #3DDC97; } .dcard .pc-stats .pc-vs.dn { color: #FF6B6B; }
.dcard .pc-stats .up b { color: #3DDC97; } .dcard .pc-stats .dn b { color: #FF6B6B; }
.dcard .pc-brk li.z b { color: rgba(255, 244, 220, .35); }
.dcard h4 small { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.dcard .pc-bars li .pc-b { background: #24456B; }
.dcard .pc-bars li.cur .pc-b { background: var(--yel); box-shadow: 0 0 18px -2px rgba(255, 201, 60, .7); }
.dcard .pc-v { font-size: 1rem; }
.dcard .vf { color: rgba(255, 244, 220, .1); }
.dcard .vf:nth-child(2) { color: rgba(255, 201, 60, .2); }
.dc-by { padding: 1.1rem 0 .3rem; border-bottom: 1px solid rgba(255, 244, 220, .16); }
.dc-by ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dc-by li { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .9rem; border-radius: 99px; background: rgba(255, 244, 220, .08); border: 1px solid rgba(255, 244, 220, .2); }
.dc-by li:first-child { background: var(--yel); border-color: var(--yel); color: var(--ink); }
.dc-by b { font: 900 1.1rem var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.dc-by em { font: 800 .9rem var(--font-display); font-style: normal; opacity: .8; }
.dc-val { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: 1rem 0 .2rem; }
.dc-val b { padding: .2rem .8rem; background: var(--yel); color: var(--ink); font: 900 1.4rem/1.1 var(--font-display); text-transform: uppercase; transform: skewX(-8deg); }
.dc-val.up b { background: #3DDC97; } .dc-val.dn b { background: #FF6B6B; }
.dc-val span { color: var(--band-muted); font-size: .88rem; }
.dcard .pc-sharebtn { background: var(--yel); color: var(--ink); }
.pdetail.pcard.dcard.pop .dc-by li { animation: pc-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.6s + var(--i, 0) * 120ms); }
.pdetail.pcard.dcard.pop .dc-by h4 { animation: pc-up .35s ease-out 1.5s both; }
.pdetail.pcard.dcard.pop .dc-val { animation: pc-up .45s cubic-bezier(.2, .9, .3, 1.35) 2s both; }
@keyframes dc-spin { to { transform: rotate(1turn); } }
/* the draft table rows now open the card */
.drafttbl .tr.selrow { cursor: pointer; }
.drafttbl .tr.selrow.on { background: color-mix(in srgb, var(--yel) 18%, transparent); }
.drafttbl .plbtn { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { .pdetail.pcard.dcard::before { animation: none; background: var(--yel); } .plog li.more { animation: none; } }
/* a few weeks of picks stay as bars, not wide slabs */
.dcard .pc-bars { grid-auto-columns: minmax(0, 4.5rem); justify-content: start; }

/* drafted by: each captain with the picks they used; the value tag explained */
.dc-by li { flex-wrap: wrap; gap: .35rem .7rem; min-height: 44px; padding: .45rem .8rem; border-radius: 14px; }
.dc-cap { display: inline-flex; align-items: center; gap: .4rem; }
.dc-picks { display: flex; flex-wrap: wrap; gap: .3rem; }
.dc-picks i { padding: .12rem .5rem; border-radius: 6px; background: rgba(255, 244, 220, .1); font: 600 .78rem/1.3 var(--font-body); font-style: normal; white-space: nowrap; }
.dc-picks i b { font: 900 .9rem var(--font-display); letter-spacing: .02em; }
.dc-by li:first-child .dc-picks i { background: rgba(6, 20, 30, .14); }
.pdetail.pcard.dcard.pop .dc-picks i { animation: pc-fade .3s ease-out both; animation-delay: calc(1.9s + var(--i, 0) * 120ms); }
.dc-val strong { display: block; color: var(--cream); font-weight: 700; }
.dc-val > span { flex: 1 1 14rem; }
.dc-key { flex: 1 1 100%; margin-top: .3rem; }
.dc-key summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; cursor: pointer; color: var(--yel); font: 700 .88rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.dc-key summary::-webkit-details-marker { display: none; }
.dc-key summary::before { content: 'i'; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 2px solid currentColor; border-radius: 50%; font: 900 .7rem/1 var(--font-display); text-decoration: none; }
.dc-key p { margin: .5rem 0; color: var(--band-muted); font-size: .88rem; line-height: 1.45; }
.dc-key ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.dc-key li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); align-items: baseline; gap: .6rem; color: var(--cream); font-size: .88rem; line-height: 1.4; }
.dc-key li b { justify-self: start; padding: .1rem .5rem; background: var(--yel); color: var(--ink); font: 900 .85rem var(--font-display); text-transform: uppercase; transform: skewX(-8deg); white-space: nowrap; }
.dc-key li b.up { background: #3DDC97; } .dc-key li b.dn { background: #FF6B6B; }
.dc-key[open] ul { animation: pc-up .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .dc-key[open] ul, .pdetail.pcard.dcard.pop .dc-picks i { animation: none; } }
.dc-picks i b { text-transform: none; }

/* ===== draft card, Drafted by: a colour per captain. The chart bars wear it, a bar shows each captain's share,
   and each captain gets a row: colour, name, how many of the drafts, and every pick they used with its week ===== */
.dcard .pc-bars li .pc-b { background: color-mix(in srgb, var(--c, #24456B) 78%, transparent); }
.dcard .pc-bars li.cur .pc-b { background: var(--c, var(--yel)); box-shadow: 0 0 0 2px #fff, 0 0 18px -2px var(--c, var(--yel)); }
.dc-bc { display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c); font: 800 .66rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.dc-by h4 small { margin-left: .4rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--band-muted); }
.dc-share { display: flex; gap: 3px; height: 14px; margin: 0 0 1rem; border-radius: 99px; overflow: hidden; background: rgba(255, 244, 220, .08); }
.dc-share i { flex: 0 0 auto; width: var(--w); background: var(--c); transform-origin: left; }
.pdetail.pcard.dcard.pop .dc-share i { animation: pc-grow-x .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.6s + var(--i, 0) * 120ms); }
@keyframes pc-grow-x { from { transform: scaleX(0); } }
.dc-by .dc-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dc-by .dc-leg li, .dc-by .dc-leg li:first-child { display: grid; grid-template-columns: auto minmax(0, 8.5rem) minmax(0, 1fr); align-items: center; gap: .3rem .8rem; min-height: 0; padding: .6rem .75rem; border: 0; border-left: 4px solid var(--c); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 244, 220, .03) 70%); color: var(--cream); }
.dl-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px -1px var(--c); }
.dl-who { display: grid; min-width: 0; }
.dl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 1.15rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.dl-who small { color: var(--band-muted); font-size: .76rem; }
.dl-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
.dl-pk { display: inline-grid; justify-items: center; min-width: 2.9rem; padding: .2rem .45rem .25rem; border: 1.5px solid var(--c); border-radius: 8px; background: rgba(6, 20, 30, .45); }
.dl-pk b { font: 900 1.05rem/1 var(--font-display); color: var(--c); }
.dl-pk small { margin-top: .1rem; font: 700 .62rem var(--font-body); letter-spacing: .06em; color: var(--band-muted); }
.pdetail.pcard.dcard.pop .dc-leg li { animation: pc-up .4s ease-out both; animation-delay: calc(1.7s + var(--i, 0) * 110ms); }
.pdetail.pcard.dcard.pop .dl-pk { animation: pc-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.9s + var(--i, 0) * 110ms); }
@media (max-width: 480px) {
  .dc-by .dc-leg li, .dc-by .dc-leg li:first-child { grid-template-columns: auto minmax(0, 1fr); }
  .dl-picks { grid-column: 1 / -1; padding-left: calc(14px + .8rem); }
}
@media (prefers-reduced-motion: reduce) { .pdetail.pcard.dcard.pop .dc-share i, .pdetail.pcard.dcard.pop .dc-leg li, .pdetail.pcard.dcard.pop .dl-pk { animation: none; } }
.dl-pk b { text-transform: none; }

/* ---------- main page: choose a week ---------- */
.wkpick { display: block; position: relative; overflow: hidden; background: var(--band); color: var(--cream); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); padding: 1rem 1rem .9rem; }
.wkpick::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(255,201,60,.18), transparent 70%); animation: wk-drift 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes wk-drift { to { transform: translateX(-60%); } }
.wk-top { position: relative; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; justify-content: space-between; }
.wk-say { min-width: 0; }
.wk-kick { margin: 0; font: 900 .72rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--yel); display: flex; align-items: center; gap: .45rem; }
.wk-kick::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,90,31,.6); animation: wk-ping 1.8s ease-out infinite; }
@keyframes wk-ping { to { box-shadow: 0 0 0 .6rem rgba(255,90,31,0); } }
.wkpick h2 { margin: .35rem 0 .15rem; color: var(--cream); font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.05; }
.wkpick h2 small { font-size: .55em; color: var(--band-muted); font-weight: 800; }
.wk-now { display: inline-block; animation: wk-in .45s cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(.5rem) scale(.96); } }
.wk-hint { margin: 0; color: var(--band-muted); font-size: .9rem; }
.wk-ctl { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.wk-ctl .f { display: flex; flex-direction: column; gap: 4px; min-width: 9rem; }
.wk-ctl label { color: var(--band-muted); font-size: .8rem; }
.wkpick .wk-ctl select { background: var(--deep); color: var(--cream); border: 2px solid var(--cream); }
.wkpick .wk-ctl .btn { background: var(--accent); color: var(--on-accent); border: 2px solid var(--cream); box-shadow: none; }
.wk-rail { position: relative; display: flex; align-items: stretch; gap: .4rem; margin-top: .9rem; }
.wk-arw { flex: none; width: 2.75rem; min-height: 44px; border: 2px solid rgba(255,244,220,.35); background: transparent; color: var(--cream); font: 900 2rem/1 var(--font-display); cursor: pointer; transition: background .2s, transform .15s; display: grid; place-items: center; padding: 0 0 .2rem; }
.wk-arw:hover:not([disabled]) { background: rgba(255,244,220,.12); }
.wk-arw:active:not([disabled]) { transform: scale(.94); }
.wk-arw[disabled] { opacity: .3; cursor: default; }
.wk-scroll { flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); mask: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); padding: .75rem 1.2rem .3rem; }
.wk-scroll::-webkit-scrollbar { display: none; }
.wk-list { position: relative; display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; width: max-content; }
.wk-list > li { scroll-snap-align: center; animation: wk-pop .5s cubic-bezier(.2,.8,.2,1.3) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes wk-pop { from { opacity: 0; transform: translateY(.8rem) scale(.9); } }
.wk-list > li.wk-ind { position: absolute; left: 0; top: 0; bottom: 0; width: 0; animation: none; z-index: 0; pointer-events: none; border-radius: 6px; background: linear-gradient(135deg, var(--yel), var(--accent)); box-shadow: 0 0 1.4rem rgba(255,201,60,.45); transition: transform .5s cubic-bezier(.3,1.4,.4,1), width .5s cubic-bezier(.3,1.4,.4,1); }
.wk { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 6.2rem; min-height: 44px; padding: .55rem .75rem .6rem; border: 2px solid rgba(255,244,220,.25); border-radius: 6px; background: rgba(255,244,220,.05); color: var(--cream); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, color .2s; }
.wk:hover { border-color: var(--yel); transform: translateY(-2px); }
.wk:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.wk.on { background: transparent; border-color: transparent; color: var(--ink); transform: none; }
.wk-n { font: 900 1.35rem/1 var(--font-display); }
.wk-d { font-size: .8rem; font-weight: 700; opacity: .85; }
.wk-s { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.wk-g { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .7rem; font-weight: 700; opacity: .8; white-space: nowrap; }
.wk-g i { display: block; width: 1.6rem; height: .3rem; border-radius: 2px; background: rgba(255,244,220,.2); overflow: hidden; position: relative; }
.wk-g i::after { content: ""; position: absolute; inset: 0; background: var(--win-on-dark); transform-origin: left; transform: scaleX(var(--g)); animation: wk-grow .8s .3s ease-out both; }
.wk.on .wk-g i { background: rgba(6,38,42,.2); }
.wk.on .wk-g i::after { background: var(--ink); }
@keyframes wk-grow { from { transform: scaleX(0); } }
.wk.none { border-style: dashed; }
.wk-new { position: absolute; top: -.55rem; right: .4rem; padding: .1rem .35rem; background: var(--accent); color: var(--on-accent); font: 900 .58rem/1.2 var(--font-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.wk.on .wk-new { background: var(--ink); color: var(--cream); }
.wk-list > li:has(.wk-new) { padding-top: .2rem; }
@media (max-width: 560px) { .wk-arw { width: 2.1rem; } .wk-ctl { width: 100%; } .wk-ctl .f { flex: 1; } .wk { min-width: 4.9rem; padding: .5rem .6rem; } .wk-scroll { padding-inline: .8rem; } .wk-g i { width: 1.1rem; } }

/* player card: weeks won as captain */
.pc-capw { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .8rem; margin: .9rem 0 .4rem; padding: .7rem .9rem; border: 2px solid rgba(255,244,220,.25); background: rgba(255,244,220,.05); animation: wk-pop .5s .25s both; }
.pc-capw.won { border-color: var(--yel); background: linear-gradient(100deg, rgba(255,201,60,.16), rgba(255,201,60,.02)); }
.cw-crown { grid-row: span 3; font-size: 2rem; filter: grayscale(1); opacity: .5; }
.pc-capw.won .cw-crown { filter: none; opacity: 1; animation: cw-bob 2.4s ease-in-out infinite; }
@keyframes cw-bob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.pc-capw p { margin: 0; display: flex; align-items: baseline; gap: .45rem; }
.pc-capw p b { font: 900 1.8rem/1 var(--font-display); color: var(--yel); }
.pc-capw p span { font-weight: 800; }
.pc-capw small { opacity: .8; }
.cw-pips { display: flex; flex-wrap: wrap; gap: 4px; margin: .3rem 0 0; padding: 0; list-style: none; }
.cw-pips li { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid rgba(255,244,220,.4); animation: wk-pop .4s both; animation-delay: calc(.4s + var(--i) * 60ms); }
.cw-pips li.w { background: var(--yel); border-color: var(--yel); }
.plog .wk-won { color: var(--yel); font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .wkpick::before, .wk-kick::before, .pc-capw.won .cw-crown { animation: none; } .wk-list > li, .wk-now, .pc-capw, .cw-pips li, .wk-g i::after { animation: none; } .wk-list > li.wk-ind { transition: none; } }

/* live draft: redraft with the same captains */
.ld-rd { margin: .6rem 0 .2rem; padding: .85rem .95rem; display: grid; gap: .65rem; border: 2px solid var(--yel); background: color-mix(in srgb, var(--yel) 9%, var(--surface)); animation: wk-pop .35s cubic-bezier(.2,.8,.2,1.2) both; }
.ld-rd .rp-t { margin: 0; }
.ld-rd .row { margin: 0; flex-wrap: wrap; }
.ld-rd textarea { width: 100%; }
body.draftview .ld-rd { background: color-mix(in srgb, var(--yel) 10%, var(--ld-p1)); border: 1px solid var(--yel); border-radius: 12px; }
.ld-rdbtn span { display: inline-block; transition: transform .4s; }
.ld-rdbtn:hover span, .ld-rdbtn[aria-expanded="true"] span { transform: rotate(-180deg); }
.ld-redo { color: var(--yel); font-weight: 900; }

/* ---------- tap or drag players: the Teams bench and the live draft pool ---------- */
.pp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.pp-chips > li { animation: wk-pop .35s cubic-bezier(.2,.8,.2,1.3) both; animation-delay: calc(var(--i, 0) * 18ms); }
.ppc { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .45rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.ppc span { font-weight: 900; opacity: .6; }
.ppc:hover { border-color: var(--accent); transform: translateY(-1px); }
.ppc:active { transform: scale(.95); }
.ppc:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ppc.in { background: color-mix(in srgb, var(--win) 16%, var(--surface)); border-color: color-mix(in srgb, var(--win) 60%, transparent); }
.ppc.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.players li[data-drag] { cursor: grab; }
.dnd-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; list-style: none; transform: rotate(-3deg) scale(1.06); box-shadow: 0 14px 28px rgba(0,0,0,.35); opacity: .95; transition: none; }
.dnd-ghost.dnd-back { transition: left .2s, top .2s, opacity .2s; opacity: 0; }
.dnd-from { opacity: .35; }
body.dnd-on, body.dnd-on * { cursor: grabbing !important; }
body.dnd-on [data-drop] { outline: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 3px; transition: outline-color .15s, transform .15s; }
body.dnd-on [data-drop].dnd-over { outline: 3px solid var(--accent); transform: scale(1.01); background-image: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.bn-find input, .pp .bn-find input { width: 100%; max-width: 22rem; margin-top: .4rem; }
.bn-to { position: sticky; bottom: .6rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; padding: .6rem .7rem; background: var(--band); color: var(--cream); border: 2px solid var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.25); animation: wk-pop .3s cubic-bezier(.2,.8,.2,1.3) both; }
.bn-to > span { flex-basis: 100%; font-size: .9rem; }
.bn-to .btn { display: inline-flex; align-items: center; gap: .35rem; background: var(--cream); color: var(--ink); border: 2px solid var(--cream); box-shadow: none; }
.bn-to .btn.ghost { background: transparent; color: var(--cream); }
.pp { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: .5rem; }
@media (min-width: 760px) { .pp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pp-col { padding: .75rem .8rem .85rem; border: 2px solid var(--line); border-radius: 10px; min-width: 0; transition: border-color .2s; }
.pp-in { border-color: color-mix(in srgb, var(--win) 55%, transparent); }
.pp-col h4 { margin: 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.pp-col h4 small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.pp-n { display: inline-grid; place-items: center; min-width: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .8rem; }
.pp-in .pp-n { background: var(--win); color: #fff; }
.pp-empty { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.pp-add { display: flex; gap: .4rem; margin-top: .7rem; }
.pp-add input { flex: 1; min-width: 0; }
.pp-bulk { margin: .6rem 0 0; }
.pp-t { margin: .8rem 0 0; }
@media (prefers-reduced-motion: reduce) { .pp-chips > li, .bn-to { animation: none; } .dnd-ghost { transform: none; } }

/* the draft pool must be exactly 15 */
.pp-n.ok { background: var(--win); color: #fff; }
.pp-need { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.pp-need p { margin: 0; font-size: .88rem; font-weight: 700; color: var(--muted); }
.pp-need.ok p { color: var(--win-on-dark, var(--win)); }
.pp-need.over p, .pp-need.full p { color: var(--accent-ink); }
.pp-meter { flex: none; width: 5.5rem; height: .45rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.pp-meter i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--f)); transition: transform .35s cubic-bezier(.3,1.4,.4,1), background .2s; }
.pp-need.ok .pp-meter i { background: var(--win); }
.pp-need.full { animation: pp-shake .35s; }
@keyframes pp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pp.is-full .pp-bench .ppc { opacity: .55; }
.pp-why { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .pp-need.full { animation: none; } }

/* ---------- games and videos: dark bands like standings and the leaderboard ---------- */
.b-rec .panel.gx, .b-vid .panel.vx { background: var(--deep); color: var(--cream); border: 2px solid var(--cream); box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; overflow: hidden; }
.b-rec .panel.gx h2, .b-vid .panel.vx h2 { color: var(--cream); }
.gx .hint, .vx .hint, .gx .note, .vx .note { color: var(--band-muted); }
.gx-head, .vx .sechead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.gx-head h2 small { color: var(--band-muted); }
.gx-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border: 1.5px solid rgba(255,244,220,.35); border-radius: 999px; font: 800 .75rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.gx-pill i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--win-on-dark); box-shadow: 0 0 0 0 rgba(70,224,160,.6); animation: wk-ping 2s ease-out infinite; }
.gx-sub { margin: 1.3rem 0 .5rem; font: 900 .8rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--yel); }
.gx-empty { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 1rem; padding: 1rem; border: 2px dashed rgba(255,244,220,.25); }
.gx-empty img { animation: gx-bounce 1.6s ease-in-out infinite; }
@keyframes gx-bounce { 50% { transform: translateY(-8px) rotate(20deg); } }
.gx-empty p { margin: 0; color: var(--band-muted); }
.gx-empty b { display: block; color: var(--cream); }

/* the night at a glance */
.gx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.gx-tiles li { position: relative; padding: .8rem .9rem; border: 2px solid rgba(255,244,220,.2); background: rgba(255,244,220,.04); display: flex; flex-direction: column; gap: .15rem; overflow: hidden; animation: wk-pop .5s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--i) * 80ms); }
.gx-tiles li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); transform: translateX(-100%); animation: gx-shine 1.2s ease-out both; animation-delay: calc(.4s + var(--i) * 120ms); pointer-events: none; }
@keyframes gx-shine { to { transform: translateX(100%); } }
.gx-tiles b { font: 900 2rem/1 var(--font-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.gx-tiles span { font-weight: 800; font-size: .85rem; }
.gx-tiles small { color: var(--band-muted); font-size: .78rem; }
.gx-tiles li.hot { border-color: var(--yel); }
.gx-tiles li.hot b { color: var(--yel); }

/* head to head */
.gx-h2h { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.gx-h2h li { padding: .7rem .85rem; border: 2px solid rgba(255,244,220,.2); display: grid; gap: .45rem; animation: wk-pop .5s both; animation-delay: calc(.2s + var(--i) * 90ms); }
.h2-top { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .5rem; }
.h2-n { display: flex; align-items: center; gap: .35rem; min-width: 0; font-weight: 800; color: var(--band-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-n.r { justify-content: flex-end; }
.h2-n.up { color: var(--cream); }
.h2-s { font: 900 1.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.h2-s i { font-style: normal; opacity: .5; padding: 0 .15rem; }
.h2-bar { display: flex; height: .45rem; gap: 2px; background: rgba(255,244,220,.1); }
.h2-bar i { width: var(--w); background: var(--cc); transform-origin: left; animation: wk-grow .9s .4s cubic-bezier(.2,.8,.2,1) both; }
.h2-bar i.tie { background: var(--band-muted); }
.h2-bar i:last-child { transform-origin: right; }
.gx-h2h small { color: var(--band-muted); }

/* filter and the game cards */
.gx-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
.gx-bar .gx-sub { margin-bottom: 0; }
.gx .seg { background: transparent; border-color: var(--cream); display: flex; flex-wrap: wrap; }
.gx .seg button { color: var(--band-muted); display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; }
.gx .seg button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.gx-list { display: grid; gap: .65rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.gcard { border: 2px solid rgba(255,244,220,.22); background: rgba(255,244,220,.03); animation: gx-slide .5s cubic-bezier(.2,.8,.2,1.1) both; animation-delay: calc(var(--i) * 70ms); transition: border-color .2s, background .2s; }
@keyframes gx-slide { from { opacity: 0; transform: translateX(-14px); } }
.gcard:hover, .gcard.open { border-color: var(--yel); }
.gcard.open { background: rgba(255,201,60,.06); }
.gc-top { display: grid; gap: .55rem; width: 100%; padding: .75rem .85rem .8rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gc-top:focus-visible { outline: 3px solid var(--yel); outline-offset: -3px; }
.gc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .78rem; }
.gc-n { font: 900 .78rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); }
.gt { font: 900 .65rem/1 var(--font-display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .4rem; border-radius: 2px; }
.gt.close { background: var(--yel); color: var(--ink); animation: gx-pulse 1.8s ease-in-out infinite; }
.gt.blow { background: var(--accent); color: var(--on-accent); }
.gt.tie { background: var(--band-muted); color: var(--ink); }
@keyframes gx-pulse { 50% { box-shadow: 0 0 0 4px rgba(255,201,60,.25); } }
.gc-star { color: var(--yel); font-weight: 800; }
.gc-chev { margin-left: auto; width: .6rem; height: .6rem; border-right: 2px solid var(--band-muted); border-bottom: 2px solid var(--band-muted); transform: rotate(45deg); transition: transform .25s; }
.gcard.open .gc-chev { transform: rotate(-135deg); }
.gc-board { max-width: 44rem; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .6rem; }
.gs { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--band-muted); }
.gs.r { flex-direction: row-reverse; }
.gs.r .gs-nm { flex-direction: row-reverse; }
.gs-nm { display: flex; align-items: center; gap: .35rem; min-width: 0; font-weight: 800; }
.gs-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sc { font: 900 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; margin-left: auto; }
.gs.r .gs-sc { margin-left: 0; margin-right: auto; }
.gs.w { color: var(--cream); }
.gs.w .gs-sc { color: var(--cc); text-shadow: 0 0 18px color-mix(in srgb, var(--cc) 55%, transparent); }
.gs-w { font: 900 .62rem/1 var(--font-display); padding: .2rem .3rem; background: var(--cc); color: var(--ink); border-radius: 2px; }
.gc-vs { font: 900 .8rem/1 var(--font-display); color: var(--band-muted); letter-spacing: .1em; text-transform: uppercase; }
.gc-split { display: flex; height: .35rem; gap: 2px; }
.gc-split i { width: var(--w); background: var(--cc); transform-origin: left; animation: wk-grow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; }
.gc-split i:last-child { transform-origin: right; }
.gc-more { padding: 0 .85rem .85rem; animation: wk-pop .3s both; }
.gc-ps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,244,220,.15); }
.gc-ps li { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid rgba(255,244,220,.1); animation: gx-slide .35s both; animation-delay: calc(var(--i) * 40ms); }
.gp-nm { display: flex; align-items: center; gap: .35rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-st { color: var(--band-muted); font-size: .82rem; }
.gc-ps b { font: 900 1.1rem/1 var(--font-display); }
.gc-ps b.up { color: var(--win-on-dark); }
.gc-ps b.dn { color: var(--loss-on-dark); }
.gc-acts { margin: .6rem 0 0; }
.gx-more { margin-top: .8rem; }
@media (max-width: 480px) { .vx-play { width: 3.6rem; height: 3.6rem; top: 36%; } .gs-sc { font-size: 1.6rem; } .gc-ps li { grid-template-columns: minmax(0, 1fr) auto; } .gp-st { grid-column: 1 / -1; grid-row: 2; } }

/* videos */
.vx-cover { position: relative; display: block; width: 100%; margin-top: .8rem; padding: 0; aspect-ratio: 16 / 9; max-height: 32rem; border: 2px solid var(--cream); background: #000; color: var(--cream); cursor: pointer; overflow: hidden; text-align: left; font: inherit; }
.vx-cover .vimg, .vx-cover .vimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vx-cover .vimg img { animation: vx-kb 14s ease-in-out infinite alternate; }
@keyframes vx-kb { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-2%, -1%); } }
.vx-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,38,42,.1) 30%, rgba(6,38,42,.92)); }
.vx-play { position: absolute; left: 50%; top: 40%; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255,90,31,.55); animation: vx-ring 2s ease-out infinite; transition: transform .25s; }
.vx-play i { width: 0; height: 0; margin-left: .3rem; border-left: 1.35rem solid var(--on-accent); border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; }
@keyframes vx-ring { 70%, 100% { box-shadow: 0 0 0 1.4rem rgba(255,90,31,0); } }
.vx-cover:hover .vx-play, .vx-cover:focus-visible .vx-play { transform: translate(-50%, -50%) scale(1.1); }
.vx-cover:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
.vx-cap { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; display: grid; gap: .15rem; }
.vx-cap small { font-weight: 800; color: var(--yel); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.vx-cap b { font: 900 clamp(1.5rem, 6vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; }
.vx-cap em { font-style: normal; color: var(--band-muted); font-weight: 700; }
.vx-stage { margin-top: .8rem; animation: wk-pop .4s both; }
.vx-stage .video { border: 2px solid var(--cream); border-radius: 0; box-shadow: 0 18px 50px -12px rgba(255,90,31,.45); }
.vx-now { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .7rem; }
.vx-now p { margin: 0; flex: 1; min-width: 10rem; display: grid; }
.vx-now small { color: var(--band-muted); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.vx-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-live { width: .65rem; height: .65rem; border-radius: 50%; background: var(--accent); animation: wk-ping 1.6s ease-out infinite; }
.vx-of { font: 900 .8rem/1 var(--font-display); padding: .3rem .5rem; border: 1.5px solid rgba(255,244,220,.35); }
.vx .vtools { margin-top: .8rem; justify-content: flex-start; }
.vx-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 13rem); grid-template-columns: none; gap: .6rem; overflow-x: auto; margin-top: .8rem; padding-bottom: .5rem; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255,244,220,.3) transparent; }
.vthumb { scroll-snap-align: start; display: grid; align-content: start; gap: .35rem; padding: 0; border: 0; background: none; color: var(--cream); text-align: left; cursor: pointer; font: inherit; animation: wk-pop .4s both; animation-delay: calc(var(--i, 0) * 50ms); }
.vt-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid rgba(255,244,220,.25); transition: border-color .2s; }
.vt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vthumb:hover .vt-img img { transform: scale(1.07); }
.vthumb:hover .vt-img, .vthumb:focus-visible .vt-img { border-color: var(--yel); }
.vthumb:focus-visible { outline: none; }
.vt-n { position: absolute; left: .35rem; top: .35rem; min-width: 1.4rem; padding: .1rem .3rem; background: rgba(6,38,42,.85); font: 900 .75rem/1.2 var(--font-display); text-align: center; }
.vt-play { position: absolute; inset: 0; background: rgba(6,38,42,.35); opacity: 0; transition: opacity .2s; }
.vt-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-left: 1rem solid #fff; border-top: .6rem solid transparent; border-bottom: .6rem solid transparent; }
.vthumb:hover .vt-play { opacity: 1; }
.vthumb.on .vt-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.vthumb.on .vt-n { background: var(--accent); color: var(--on-accent); }
.vt-t { font-size: .82rem; font-weight: 700; color: var(--band-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vthumb.on .vt-t { color: var(--cream); }
.vx-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.vx-weeks li { animation: wk-pop .4s both; animation-delay: calc(var(--i) * 60ms); }
.vx-wk { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .4rem; border: 2px solid rgba(255,244,220,.2); background: rgba(255,244,220,.03); color: var(--cream); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, transform .2s; }
.vx-wk:hover { border-color: var(--yel); transform: translateY(-2px); }
.vx-th { aspect-ratio: 16 / 9; overflow: hidden; background: #000; display: grid; place-items: center; }
.vx-th img { width: 100%; height: 100%; object-fit: cover; }
.vx-noimg { color: var(--accent); font-size: 1.3rem; }
.vx-wl { display: grid; min-width: 0; }
.vx-wl small { color: var(--band-muted); }
.vx-reel { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.2rem; animation: vx-ring 2s ease-out infinite; }
.vx .badge-s { font-size: .72rem; }
@media (prefers-reduced-motion: reduce) {
  .gx-pill i, .gx-empty img, .gx-tiles li, .gx-tiles li::after, .gx-h2h li, .h2-bar i, .gcard, .gt.close, .gc-split i, .gc-more, .gc-ps li, .vx-cover .vimg img, .vx-play, .vx-stage, .vx-live, .vthumb, .vx-weeks li, .vx-reel { animation: none; }
}

/* ---------- standings: a card per captain ---------- */
.sx-list { display: grid; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sx { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; grid-template-areas: "rank who rec ring" "rank bar bar bar" "rank pills pills pills"; align-items: center; gap: .45rem .9rem; padding: .85rem 1rem .9rem .7rem; border: 2px solid rgba(255,244,220,.2); background: rgba(255,244,220,.03); overflow: hidden; animation: gx-slide .5s cubic-bezier(.2,.8,.2,1.1) both; animation-delay: calc(var(--i) * 90ms); transition: border-color .2s, transform .2s; }
.sx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc); }
.sx:hover { border-color: rgba(255,244,220,.45); }
.sx.none { opacity: .7; }
.sx-rank { grid-area: rank; align-self: start; display: grid; justify-items: center; font: 900 2rem/1 var(--font-display); color: var(--accent-hi); padding-top: .15rem; }
.sx.lead .sx-rank { color: var(--yel); }
.sx-crown { font-style: normal; font-size: 1.1rem; line-height: 1; margin-bottom: .1rem; animation: cw-bob 2.4s ease-in-out infinite; }
.sx-who { grid-area: who; min-width: 0; display: grid; gap: .15rem; }
.sx-who b { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font: 900 1.25rem/1.1 var(--font-display); text-transform: uppercase; color: var(--cream); }
.sx-who .dot { background: var(--cc); }
.sx-who small { color: var(--band-muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sx-tag { font: 900 .6rem/1 var(--font-display); font-style: normal; letter-spacing: .08em; padding: .22rem .4rem; background: var(--yel); color: var(--ink); border-radius: 2px; }
.sx-rec { grid-area: rec; display: grid; justify-items: end; }
.sx-rec b { font: 900 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--cream); }
.sx-rec small { color: var(--band-muted); font: 800 .65rem/1.3 var(--font-display); letter-spacing: .1em; }
.sx-ring { grid-area: ring; position: relative; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; }
.sx-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sx-ring circle { fill: none; stroke: rgba(255,244,220,.14); stroke-width: 4; }
.sx-ring circle.on { stroke: var(--cc); stroke-linecap: round; stroke-dasharray: 100; animation: sx-ring 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--i) * 120ms); }
@keyframes sx-ring { from { stroke-dashoffset: 100; } }
.sx-ring b { position: relative; font: 900 .85rem/1 var(--font-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.sx-bar { grid-area: bar; height: .35rem; background: rgba(255,244,220,.1); overflow: hidden; }
.sx-bar i { display: block; width: var(--w); height: 100%; background: var(--cc); transform-origin: left; animation: wk-grow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--i) * 120ms); }
.sx-pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: .35rem; }
.sx-pills span { padding: .2rem .5rem; border: 1px solid rgba(255,244,220,.18); font-size: .78rem; color: var(--band-muted); white-space: nowrap; }
.sx-pills b { color: var(--cream); font-variant-numeric: tabular-nums; }
.sx-pills .up b { color: var(--win-on-dark); }
.sx-pills .dn b { color: var(--loss-on-dark); }
.sx-pills .cw { border-color: var(--yel); }
.sx-pills .cw b { color: var(--yel); }
/* the leader: a gold rim and a slow shine across the card */
.sx.lead { border-color: var(--yel); background: linear-gradient(100deg, rgba(255,201,60,.14), rgba(255,201,60,.02) 60%); box-shadow: 0 0 0 1px rgba(255,201,60,.25), 0 14px 34px -16px rgba(255,201,60,.55); }
.sx.lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); transform: translateX(-100%); animation: sx-shine 4.5s ease-in-out 1s infinite; pointer-events: none; }
@keyframes sx-shine { 30%, 100% { transform: translateX(100%); } }
.sx.lead .sx-rec b { color: var(--yel); }
@media (max-width: 520px) {
  .sx { grid-template-columns: 2.1rem minmax(0, 1fr) auto; grid-template-areas: "rank who ring" "rank rec rec" "rank bar bar" "rank pills pills"; padding-right: .8rem; }
  .sx-rec { justify-items: start; display: flex; align-items: baseline; gap: .4rem; }
  .sx-rank { font-size: 1.6rem; }
  .sx-who b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .sx, .sx-crown, .sx-ring circle.on, .sx-bar i, .sx.lead::after { animation: none; } }
/* the shared standings page: the same dark panel as the main page */
.panel.shv-st { background: var(--deep); color: var(--cream); border: 2px solid var(--cream); box-shadow: 5px 5px 0 var(--accent); border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.panel.shv-st h2 { color: var(--cream); }
.panel.shv-st h2 .dt { color: var(--band-muted); }

/* ---------- draft card: the pick-by-week rail and the latest 3 picks per captain ---------- */
.dc-rail { display: flex; align-items: stretch; gap: .4rem; }
.dc-rail .wk-arw { align-self: center; height: 4.5rem; }
.dc-scroll { flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; padding: .2rem .4rem 0; -webkit-mask: linear-gradient(90deg, transparent, #000 .9rem, #000 calc(100% - .9rem), transparent); mask: linear-gradient(90deg, transparent, #000 .9rem, #000 calc(100% - .9rem), transparent); }
.dc-scroll::-webkit-scrollbar { display: none; }
.dc-scroll:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.dcard .dc-scroll .pc-bars { grid-auto-columns: 3.6rem; width: max-content; }
.dc-scroll .pc-bars li { scroll-snap-align: end; }
.dl-more { display: inline-grid; place-items: center; min-width: 2.9rem; min-height: 2.4rem; padding: .2rem .7rem; border: 1.5px dashed var(--c); border-radius: 8px; background: transparent; color: var(--cream); font: 800 .8rem/1 var(--font-display); letter-spacing: .04em; cursor: pointer; transition: background .2s, transform .15s; }
.dl-more:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.dl-more:active { transform: scale(.95); }
.dl-more:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.dl-more[aria-expanded="true"] { border-style: solid; color: var(--band-muted); }
.dl-pk.more { animation: pc-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .dl-pk.more { animation: none; } }
.dc-rail .wk-arw[hidden] { display: none; }
.dc-by > .dl-more { --c: var(--yel); width: 100%; margin-top: .6rem; min-height: 44px; }
.dl-picks:empty { display: none; }
.pdetail.pcard.dcard .dc-leg li.more { animation: pc-up .35s ease-out both; animation-delay: calc(var(--i, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) { .pdetail.pcard.dcard .dc-leg li.more { animation: none; } }

/* ---------- the Draft link in the main menu (a red dot while a draft is live) ---------- */
header .tabs a.tablink { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: 0 1rem; color: var(--band-muted); text-decoration: none; font: 800 1rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; }
header .tabs a.tablink:hover { color: var(--on-band, var(--cream)); border-bottom-color: rgba(255,255,255,.4); }
header .tabs a.tablink:focus-visible { outline: 3px solid var(--yel); outline-offset: -3px; }
.tl-dot { display: none; width: .5rem; height: .5rem; border-radius: 50%; background: #E5192F; box-shadow: 0 0 0 0 rgba(229,25,47,.6); animation: tl-ping 1.6s ease-out infinite; }
body.ld-live .tl-dot { display: inline-block; }
@keyframes tl-ping { 70% { box-shadow: 0 0 0 .5rem rgba(229,25,47,0); } 100% { box-shadow: 0 0 0 0 rgba(229,25,47,0); } }

/* ---------- draft page: one clear way home, and the switch between HQ and the live board ---------- */
.ld-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .2rem 0 1rem; }
.ld-home { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: .3rem 1rem .3rem .35rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--fg); text-decoration: none; transition: background .2s, border-color .2s, transform .15s; }
.ld-home:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.35); }
.ld-home:active { transform: scale(.97); }
.ld-home:focus-visible, .ld-navb:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.ld-home-i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: #fff; font: 900 1.2rem/1 var(--font-display); box-shadow: 0 6px 16px -6px var(--ld-glow); transition: transform .25s var(--ld-pop); }
.ld-home:hover .ld-home-i { transform: translateX(-3px); }
.ld-home-t { display: grid; line-height: 1.05; }
.ld-home-t small { font: 700 .66rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ld-home-t b { font: 900 1.05rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.ld-navb { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--fg); font: 800 .85rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.ld-navb:hover { background: rgba(255,255,255,.09); }
.ld-navb.live { border-color: rgba(229,25,47,.6); background: rgba(229,25,47,.14); box-shadow: 0 0 22px -6px var(--ld-glow); }
.ld-back { margin-bottom: .6rem; }

/* ---------- Draft HQ: the hero ---------- */
.hq-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.4rem, 5vw, 2.4rem) clamp(1.1rem, 4vw, 2rem) 1.3rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, #111C33, #0A1120 70%); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.hq-beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hq-beams i { position: absolute; top: -40%; left: 50%; width: 38%; height: 180%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 70%); filter: blur(6px); animation: hq-sweep 9s ease-in-out infinite alternate; }
.hq-beams i:nth-child(1) { --a: -38deg; animation-delay: -2s; }
.hq-beams i:nth-child(2) { --a: 8deg; background: linear-gradient(180deg, rgba(229,25,47,.22), transparent 70%); animation-duration: 11s; }
.hq-beams i:nth-child(3) { --a: 40deg; background: linear-gradient(180deg, rgba(255,194,61,.14), transparent 70%); animation-delay: -5s; }
@keyframes hq-sweep { from { transform: translateX(-50%) rotate(calc(var(--a) - 14deg)); } to { transform: translateX(-50%) rotate(calc(var(--a) + 14deg)); } }
.hq-ticks { position: absolute; inset: auto 0 0; height: 46%; z-index: -1; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg, rgba(148,170,210,.14) 0 2px, transparent 2px 46px); -webkit-mask: linear-gradient(180deg, transparent, #000); mask: linear-gradient(180deg, transparent, #000); transform: perspective(300px) rotateX(55deg); transform-origin: bottom; animation: hq-run 6s linear infinite; }
@keyframes hq-run { to { background-position: 46px 0; } }
.hq-k { margin: 0 0 .4rem; font: 800 .75rem var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hq-t { margin: 0; display: flex; align-items: baseline; gap: .5rem; font: 900 clamp(3.4rem, 15vw, 6.4rem)/.85 var(--font-display); text-transform: uppercase; transform: skewX(-9deg); transform-origin: left; color: #fff; text-shadow: 0 8px 34px rgba(0,0,0,.55); }
.hq-t .b { color: transparent; -webkit-text-stroke: 2px var(--accent); text-shadow: 0 0 34px var(--ld-glow); }
.hq-sub { margin: .7rem 0 0; color: var(--muted); font-size: 1rem; }
.hq-stats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.hq-stats span { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,8,15,.5); color: var(--muted); font-size: .85rem; }
.hq-stats b { color: #fff; font: 900 1.05rem var(--font-display); font-variant-numeric: tabular-nums; }
.hq-now { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,15,.55); }
.hq-now p { flex: 1 1 12rem; margin: 0; display: grid; gap: .15rem; }
.hq-now p b { font: 900 1.1rem var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.hq-now p span { color: var(--muted); font-size: .9rem; }
.hq-now.live { border-color: rgba(229,25,47,.55); background: linear-gradient(90deg, rgba(229,25,47,.2), rgba(5,8,15,.55)); }
.hq-pulse { flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); animation: tl-ping 1.6s ease-out infinite; }
.hq-pulse.off { background: var(--muted); animation: none; opacity: .6; }
.hq-hero.anim .hq-k { animation: hq-fade .5s var(--ld-ease) both; }
.hq-hero.anim .hq-t .a { display: inline-block; animation: ld-slidel .6s var(--ld-ease) .1s both; }
.hq-hero.anim .hq-t .b { display: inline-block; animation: hq-slam .7s var(--ld-pop) .35s both; }
.hq-hero.anim .hq-sub { animation: hq-fade .5s var(--ld-ease) .55s both; }
.hq-hero.anim .hq-stats span { animation: hq-up .45s var(--ld-ease) both; animation-delay: calc(.65s + var(--i) * 90ms); }
.hq-hero.anim .hq-now { animation: hq-up .5s var(--ld-ease) .95s both; }
@keyframes hq-fade { from { opacity: 0; } }
@keyframes hq-up { from { opacity: 0; transform: translateY(.8rem); } }
@keyframes hq-slam { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 60% { opacity: 1; transform: scale(.92); } }

/* ---------- Draft HQ: the picker ---------- */
.hq-pick { margin-top: 1.4rem; }
.hq-ph h2 { margin: 0; font: 900 clamp(1.8rem, 6vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; color: #fff; }
.hq-ph .hint { margin: .3rem 0 0; }
.hq-sel { display: flex; align-items: stretch; gap: .5rem; margin: .9rem 0 1rem; }
.hq-sel .wk-arw { border-color: var(--line); border-radius: 12px; color: var(--fg); }
.hq-dd { position: relative; flex: 1; min-width: 0; }
body.draftview .hq-dd select { width: 100%; height: 100%; min-height: 52px; padding: 0 2.6rem 0 1rem; -webkit-appearance: none; appearance: none; border: 1px solid rgba(255,194,61,.5); border-radius: 12px; background: linear-gradient(180deg, #16213B, #0D1527); color: #fff; font: 900 1.15rem var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 0 0 rgba(255,194,61,0); transition: box-shadow .2s, border-color .2s; }
body.draftview .hq-dd select:hover { border-color: var(--yel); box-shadow: 0 0 22px -8px rgba(255,194,61,.7); }
body.draftview .hq-dd select:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
.hq-dd-i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--yel); pointer-events: none; font-size: 1rem; }

/* ---------- Draft HQ: one draft's recap ---------- */
.hq-rc { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--ld-p2), var(--ld-p1)); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.hq-rch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.hq-rch p { margin: 0; display: grid; gap: .1rem; }
.hq-rch p b { font: 900 1.35rem var(--font-display); text-transform: uppercase; color: #fff; }
.hq-rch p span { color: var(--muted); font-size: .85rem; }
.hq-flag { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--cc, var(--yel)) 22%, transparent); border: 1px solid var(--cc, var(--yel)); color: #fff; font: 800 .8rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.hq-flag.dim { --cc: var(--muted); color: var(--muted); }
.hq-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 760px) { .hq-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hq-tile { position: relative; overflow: hidden; display: grid; align-content: start; gap: .2rem; min-height: 7.2rem; padding: .8rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,15,.5); }
.hq-tile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--cc, var(--line)); }
.hq-tile small { font: 800 .66rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hq-tile b { font: 900 1.35rem/1.05 var(--font-display); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.hq-tile span { color: var(--muted); font-size: .82rem; }
.hq-tile em { position: absolute; right: .6rem; top: .65rem; font: 900 .72rem var(--font-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--cc, var(--fg)); }
.hq-tile.gold { border-color: rgba(255,194,61,.55); background: linear-gradient(150deg, rgba(255,194,61,.18), rgba(5,8,15,.5) 65%); }
.hq-tile.gold em { font-size: 1.3rem; top: .45rem; }
.hq-tile.steal em { padding: .15rem .4rem; border-radius: 4px; background: var(--cc); color: #05080F; }
.hq-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.hq-col { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,15,.35); overflow: hidden; }
.hq-col.won { border-color: rgba(255,194,61,.6); box-shadow: 0 0 26px -10px rgba(255,194,61,.7); }
.hq-ch { position: relative; display: grid; gap: .1rem; padding: .65rem .65rem .55rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, transparent), transparent); }
.hq-slot { justify-self: start; padding: .1rem .4rem; border-radius: 4px; background: var(--cc); color: #05080F; font: 900 .7rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.hq-ch b { font: 900 1.05rem/1.1 var(--font-display); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.hq-ch b i { font-style: normal; }
.hq-ch small { color: var(--muted); font-size: .75rem; }
.hq-col ol { list-style: none; margin: 0; padding: .4rem; display: grid; gap: .3rem; }
.hq-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .3rem .4rem; border-radius: 9px; background: rgba(255,255,255,.04); border-left: 3px solid var(--cc); }
.hq-n { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 6px; background: color-mix(in srgb, var(--cc) 25%, transparent); color: var(--cc); font: 900 .85rem var(--font-display); font-variant-numeric: tabular-nums; }
.hq-nm { font-weight: 700; font-size: .88rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-pt { font: 800 .78rem var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.hq-pt.top { color: var(--yel); }
.hq-pt.dn { color: #FF8A95; }
.hq-acts { margin-top: 1rem; }
@media (max-width: 520px) {
  .hq-board { gap: .35rem; }
  .hq-col ol { padding: .3rem; }
  .hq-card { grid-template-columns: auto minmax(0, 1fr); gap: .25rem; padding: .3rem; }
  .hq-pt { grid-column: 2; font-size: .7rem; }
  .hq-n { min-width: 1.35rem; height: 1.35rem; font-size: .75rem; }
  .hq-nm { font-size: .8rem; }
  .hq-tile b { font-size: 1.15rem; }
}
/* the recap plays in: the header, the tiles popping in turn, then the board dealt out pick by pick */
.hq-rc.anim { animation: hq-up .45s var(--ld-ease) both; }
.hq-rc.anim .hq-flag { animation: hq-slam .6s var(--ld-pop) .35s both; }
.hq-rc.anim .hq-tile { animation: hq-tile .55s var(--ld-pop) both; animation-delay: calc(.2s + var(--i) * 110ms); }
@keyframes hq-tile { from { opacity: 0; transform: translateY(1rem) scale(.9) rotate(-2deg); } }
.hq-rc.anim .hq-col { animation: hq-up .45s var(--ld-ease) both; animation-delay: calc(.55s + var(--i) * 90ms); }
.hq-rc.anim .hq-card { animation: hq-deal .5s var(--ld-pop) both; animation-delay: calc(.85s + var(--p) * 75ms); }
@keyframes hq-deal { from { opacity: 0; transform: translate(-1.2rem, -1.6rem) rotate(-10deg) scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .hq-beams i, .hq-ticks, .tl-dot, .hq-pulse, .hq-hero.anim *, .hq-rc.anim, .hq-rc.anim * { animation: none !important; }
}
.hq-tile em.pill { position: static; justify-self: start; margin-top: .3rem; padding: .15rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--cc) 22%, transparent); color: #fff; font-size: .7rem; }
@media (max-width: 640px) {
  .menu .tabs a.tablink { width: 100%; min-height: 56px; padding: 0 1rem; font-size: 1.4rem; color: var(--cream); border: 2px solid rgba(255,244,220,.3); }
  .menu .tabs a.tablink::after { content: "→"; margin-left: auto; color: var(--accent); }
}
/* the drop-down's open list: dark like the page, plain readable text */
body.draftview .hq-dd select option, body.draftview .hq-dd select optgroup { background: #0D1527; color: #EEF2F8; font: 600 1rem var(--font-body); letter-spacing: 0; text-transform: none; }
body.draftview .hq-dd select optgroup { color: #FFC23D; font-weight: 800; }
body.draftview .hq-dd select option:checked { background: #E5192F; color: #fff; }