/* Design system taken from the live Premier Survivor Picks site. */
:root{
  color-scheme:dark;
  --pitch-deep:oklch(31% .06 160);
  --pitch:oklch(46% .09 158);
  --pitch-hi:oklch(55% .10 158);
  /* Matched to the live site: oklch(0.2 0.04 158). It reads dark against the
     stripes on purpose. What made it look muddy here was not the colour but
     the 12% transparency the cards used to carry, which is gone. */
  --card:oklch(24% .048 158);
  /* A step up from the card, for the strips and header rows that sit on one.
     Four rules already asked for this and it was never defined, so they were
     all painting nothing - which only showed once a sticky header needed an
     opaque background to stop rows scrolling through it. */
  --card-2:oklch(29% .05 158);
  --border:oklch(34% .045 160);
  --line:oklch(42% .06 160);
  --foreground:oklch(97% .02 150);
  /* The live site sets this to chalk, the same as the main foreground, so
     secondary copy is a matter of size and weight rather than brightness. */
  --muted-foreground:oklch(97% .02 150);
  --neon:oklch(83% .22 155);
  --primary-foreground:oklch(14% .03 160);
  --broadcast:oklch(90% .17 95);
  --strike:oklch(66% .22 25);
  --radius:.5rem;
  --font-display:"Bebas Neue","Barlow Condensed",sans-serif;
  --font-condensed:"Barlow Condensed",sans-serif;
  --font-sans:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--pitch-deep)}
body{color:var(--foreground);font-family:var(--font-sans);font-size:16px;line-height:1.5;
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
/* the live site's heading tracking */
h1,h2,h3{letter-spacing:.01em}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
img{max-width:100%}

/* the mowed pitch */
.pitch-bg{
  min-height:100vh;
  background-color:var(--pitch-deep);
  background-image:
    radial-gradient(at 20% 0%, color-mix(in oklab, var(--neon) 18%, transparent), transparent 55%),
    radial-gradient(at 100% 20%, color-mix(in oklab, var(--broadcast) 10%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, var(--pitch) 0px, var(--pitch) 90px, var(--pitch-hi) 90px, var(--pitch-hi) 180px);
}

/* ---------- banner + header ---------- */
.deadline-banner{
  background:var(--strike);color:#fff;text-align:center;padding:6px 16px;
  font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:.02em;font-size:11px;
}
.deadline-banner b{font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.08em;margin-left:6px}
@media (min-width:768px){ .deadline-banner{font-size:13px} .deadline-banner b{font-size:17px} }

header.top{border-bottom:.8px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--pitch-deep) 95%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}

/* On a league page the header, the deadline banner and the tabs freeze
   together: the tabs used to scroll away, so moving between Leaderboard and
   History from halfway down a table meant scrolling back to the top first.
   The block sticks as one, and the header inside it goes static so the two
   do not both try to pin themselves at zero. */
.stickchrome{position:sticky;top:0;z-index:30}
.stickchrome header.top{position:static;z-index:auto}
.top-in{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
@media (min-width:768px){ .top-in{padding:16px 24px} }
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .badge{display:grid;place-items:center;height:32px;width:32px;border-radius:var(--radius);background:var(--neon);color:var(--primary-foreground);font-family:var(--font-display);font-size:14px}
.brand b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.03em}
@media (min-width:768px){ .brand .badge{height:36px;width:36px;font-size:16px} .brand b{font-size:24px} }
header.top nav{display:flex;align-items:center;gap:4px}
header.top nav a{border-radius:var(--radius);padding:6px 12px;font-family:var(--font-condensed);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);text-decoration:none;transition:color .15s}
header.top nav a:hover{color:var(--foreground)}
header.top nav a.on{background:var(--neon);color:var(--primary-foreground)}
@media (max-width:620px){ .brand b{display:none} header.top nav a{padding:6px 8px;font-size:12.5px} }

.leaguebar{border-bottom:.8px solid var(--border);background:color-mix(in oklab,var(--pitch-deep) 92%,transparent);overflow-x:auto;scrollbar-width:none}
.leaguebar::-webkit-scrollbar{display:none}
.leaguebar-in{max-width:80rem;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.leaguebar .lname{font-family:var(--font-display);font-size:19px;letter-spacing:.03em;margin-right:14px;padding:10px 0}
.leaguebar a{padding:12px 10px;font-family:var(--font-condensed);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);text-decoration:none;border-bottom:2px solid transparent}
.leaguebar a:hover{color:var(--foreground)}
.leaguebar a.on{color:var(--neon);border-bottom-color:var(--neon)}

/* ---------- page furniture ---------- */
.wrap{max-width:64rem;margin:0 auto;padding:0 16px 64px}
@media (min-width:768px){ .wrap{padding:0 24px 72px} }
.narrow{max-width:42rem}
.page-head{max-width:48rem;margin:0 auto;padding:48px 24px 32px;text-align:center}
.broadcast-chip{
  display:inline-block;border-radius:999px;padding:5.6px 11.2px;
  background:color-mix(in oklab,var(--neon) 12%,transparent);
  border:.8px solid color-mix(in oklab,var(--neon) 55%,transparent);
  color:var(--neon);font-family:var(--font-condensed);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
}
h1{margin-top:16px;font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,6vw,5rem);line-height:.9;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.page-head p{margin:12px auto 0;max-width:42rem;color:var(--muted-foreground)}
.roundnav{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-family:var(--font-condensed);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.roundnav a{color:var(--muted-foreground);text-decoration:none}
.roundnav a:hover{color:var(--neon)}
.roundnav a.on{color:var(--neon)}
h2.sec{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted-foreground);margin:26px 0 12px}

/* ---------- cards ---------- */
/* Opaque. This was 88% card mixed into transparent, so the mown stripes
   behind every card showed faintly through it and the whole page read as
   slightly muddy. The card is the surface the type sits on; it should not
   have the background moving underneath it. */
.scoreboard-card{border:.8px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
.scoreboard-card + .scoreboard-card{margin-top:12px}
.pad{padding:20px}
.card-strip{display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:.8px solid var(--border);background:var(--pitch);padding:8px 16px;font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground)}
.card-strip .live{color:var(--broadcast)}
.card-strip .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--broadcast);margin-right:6px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.muted{color:var(--muted-foreground)}
.small{font-size:13px}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stat .k{font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--neon)}
.stat .v{margin-top:8px;display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:30px;line-height:1;text-transform:uppercase}
.stat .big{margin-top:8px;font-family:var(--font-display);font-size:24px;line-height:1;color:var(--neon)}
.stat .big span{font-size:16px;color:var(--muted-foreground)}
.stat .big.red{color:var(--strike)}
.stat p{margin-top:8px;font-size:14px;color:var(--muted-foreground)}

/* ---------- fixtures ---------- */
.day{margin:24px 0 12px;display:flex;align-items:center;gap:12px}
.day span{font-family:var(--font-condensed);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground)}
.day i{display:block;height:1px;flex:1;background:var(--border)}
.fx-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}
.fx-side{display:flex;min-width:0;flex:1;align-items:center;gap:8px}
.fx-side.away{flex-direction:row-reverse;text-align:right}
.fx-side .code{display:block;font-family:var(--font-display);font-size:18px;line-height:1;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-side .cnt{display:block;margin-top:4px;font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.fx-side .cnt.on{color:var(--neon)}
.crest{height:28px;width:28px;flex:none;object-fit:contain}
.crest.sm{height:14px;width:14px}
.crest.lg{height:34px;width:34px}
.fx-score{display:flex;flex:none;align-items:center;gap:4px}
.fx-score span{display:flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:var(--radius);border:.8px solid var(--border);background:var(--pitch-deep);font-family:var(--font-display);font-size:18px;line-height:1;color:color-mix(in oklab,var(--muted-foreground) 60%,transparent)}
.fx-score span.w{border-color:color-mix(in oklab,var(--neon) 60%,transparent);background:color-mix(in oklab,var(--neon) 15%,transparent);color:var(--neon)}
.fx-score .dash{border:0;background:none;width:auto;height:auto;color:var(--muted-foreground)}
.fx-foot{border-top:.8px solid var(--border);display:flex}
.fx-foot > *{flex:1;padding:8px;text-align:center;font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);border-right:.8px solid var(--border)}
.fx-foot > *:last-child{border-right:0}
.fx-foot button{cursor:pointer;transition:color .15s}
.fx-foot button:hover{color:var(--neon)}
.fx-foot button[aria-expanded="true"]{color:var(--neon)}
.lockline{border-top:.8px solid var(--border);padding:10px 16px;font-size:13px;color:var(--muted-foreground);text-align:center}

/* ---------- pick pill ---------- */
.pick-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:var(--radius);border:.8px solid color-mix(in oklab,var(--neon) 60%,transparent);background:color-mix(in oklab,var(--neon) 15%,transparent);color:var(--neon);padding:4px 8px;font-family:var(--font-condensed);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.pick-pill.grey{border-color:var(--border);background:transparent;color:var(--muted-foreground)}
.pick-pill.red{border-color:color-mix(in oklab,var(--strike) 60%,transparent);background:color-mix(in oklab,var(--strike) 15%,transparent);color:var(--strike)}
.pick-pill.gold{border-color:color-mix(in oklab,var(--broadcast) 60%,transparent);background:color-mix(in oklab,var(--broadcast) 15%,transparent);color:var(--broadcast)}

/* ---------- tables of people ---------- */
.people{border-top:.8px solid var(--border);background:color-mix(in oklab,var(--pitch-deep) 40%,transparent)}
.prow{display:grid;grid-template-columns:1.5rem 1fr 2.5rem 3.25rem;align-items:center;gap:6px;padding:12px;border-bottom:.8px solid var(--border);text-decoration:none}
.prow:last-child{border-bottom:0}
.prow.head{background:var(--pitch);font-family:var(--font-condensed);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground)}
.prow .rk{font-family:var(--font-display);font-size:16px;line-height:1;color:var(--muted-foreground)}
.prow .who{font-family:var(--font-display);font-size:16px;text-transform:uppercase;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.prow .pts{font-family:var(--font-display);font-size:16px;line-height:1;color:var(--neon);text-align:center}
.prow .cen{display:flex;align-items:center;justify-content:center}
.prow.me{background:color-mix(in oklab,var(--neon) 10%,transparent)}
.prow.out{opacity:.5}
/* .scoreboard-card clips what overflows it, which for a table is the worst
   of the options: a column that does not fit is simply gone, with no way to
   reach it. A league set to ten strikes would lose the end of every row. Let
   it scroll instead, so the content is always reachable however wide it gets. */
.lb{overflow-x:auto}
.lb .prow{grid-template-columns:1.5rem 1fr 2.5rem 2.25rem 3.25rem}
@media (min-width:640px){
  .prow{grid-template-columns:3rem 1fr 5rem 6rem;gap:16px;padding:16px 24px}
  /* The strikes column has to hold seven marks at 24px with gaps, which is
     nearer 8rem than 6. At 6rem the last mark or two fell outside the card,
     which clips rather than scrolls - so they were invisible and unreachable
     rather than merely tight. */
  .lb .prow{grid-template-columns:3rem minmax(0,1fr) 6rem 5rem 8rem}
  .prow .rk,.prow .who,.prow .pts{font-size:24px}
  .prow .who{white-space:nowrap}
  .prow.head{font-size:10px;letter-spacing:.25em;padding:12px 24px}
}
.xs{display:inline-flex;gap:2px;justify-content:center}
.xs i{font-style:normal;font-family:var(--font-display);font-size:16px;line-height:1;color:var(--border)}
.xs i.on{color:var(--strike)}
@media (min-width:640px){ .xs{gap:4px} .xs i{font-size:24px} }

/* ---------- buttons + forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--radius);background:var(--neon);color:var(--primary-foreground);font-family:var(--font-condensed);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--foreground);border:.8px solid var(--line)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* a class rule beats the hidden attribute's own display:none, so a .btn with
   [hidden] stayed on screen - which is how "Reset to classic" showed up with
   nothing to reset */
.btn[hidden]{display:none}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-foreground);margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;padding:10px 12px;border-radius:var(--radius);border:.8px solid var(--line);background:var(--pitch-deep);color:var(--foreground)}
.hint{font-size:12.5px;color:var(--muted-foreground);margin-top:6px;opacity:.8}
.err{color:var(--strike);font-size:13px;margin-top:6px}
.toggle{display:flex;gap:8px}
.toggle button{flex:1;padding:12px;border-radius:var(--radius);border:.8px solid var(--line);text-align:left;cursor:pointer;font-weight:600}
.toggle button small{display:block;font-weight:400;color:var(--muted-foreground);font-size:12.5px}
.toggle button[aria-pressed="true"]{background:var(--neon);color:var(--primary-foreground);border-color:var(--neon)}
.toggle button[aria-pressed="true"] small{color:var(--primary-foreground)}

.bar{padding:8px 0 14px}
.bar .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.bar label{font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-foreground)}
.bar output{font-family:var(--font-display);font-size:22px;line-height:1;color:var(--neon)}
.bar .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-foreground);opacity:.75;margin-top:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:var(--border);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--neon);border:3px solid var(--card)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--neon);border:3px solid var(--card)}
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--neon);flex:none}
.check span{color:var(--muted-foreground)}
.check b{color:var(--foreground);font-weight:600}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:900px){ .cols{grid-template-columns:minmax(0,1fr) 300px} }
.kv{list-style:none}
.kv li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:.8px solid var(--border)}
.kv li:last-child{border-bottom:0}
.kv li span:first-child{color:var(--muted-foreground)}
.kv li b{text-align:right;font-weight:600}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps span{flex:1;height:4px;border-radius:2px;background:var(--border)}
.steps span.on{background:var(--neon)}
/* The verdict on how brutal the league will be. It was a 44px headline in a
   panel of its own, which made the right column taller than the sliders it
   sits beside; it is a line now, which is all it ever said. */
.survive{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 11px;border-radius:var(--radius);background:var(--pitch-deep);margin:10px 0 0}
.survive .n{font-family:var(--font-display);font-size:19px;line-height:1;letter-spacing:.03em;
  color:var(--neon)}
.survive .t{flex:1;min-width:10rem;font-size:11.5px;line-height:1.45;color:var(--muted-foreground)}
.warn{font-size:13px;color:var(--broadcast);margin-bottom:10px}
.invite{display:flex;gap:8px}
.invite input{flex:1;font:inherit;padding:10px 12px;border-radius:var(--radius);border:.8px solid var(--line);background:var(--pitch-deep);color:var(--foreground)}

/* ---------- pick screen ---------- */
.pickfx{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:12px}
.pickfx .when{grid-column:1/-1;text-align:center;font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground)}
.pickfx .vs{font-family:var(--font-display);color:var(--muted-foreground)}
.tbtn{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius);border:.8px solid var(--border);background:var(--pitch-deep);cursor:pointer;text-align:left;width:100%}
.tbtn.away{flex-direction:row-reverse;text-align:right}
.tbtn .code{font-family:var(--font-display);font-size:17px;line-height:1;text-transform:uppercase}
.tbtn .u{font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);margin-top:3px}
.tbtn:hover:not([disabled]){border-color:var(--neon)}
.tbtn[aria-pressed="true"]{border-color:var(--neon);background:color-mix(in oklab,var(--neon) 15%,transparent)}
.tbtn[disabled]{opacity:.4;cursor:not-allowed}
.plgrid{display:grid;grid-template-columns:1fr;gap:8px;padding:12px}
@media (min-width:640px){ .plgrid{grid-template-columns:1fr 1fr} }
.plbtn{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius);border:.8px solid var(--border);background:var(--pitch-deep);cursor:pointer;width:100%;text-align:left}
.plbtn .nm{font-weight:600}
.plbtn .u{margin-left:auto;font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.plbtn[aria-pressed="true"]{border-color:var(--neon);background:color-mix(in oklab,var(--neon) 15%,transparent)}
.plbtn[disabled]{opacity:.4;cursor:not-allowed}
.dock{position:sticky;bottom:0;margin-top:18px;background:color-mix(in oklab,var(--card) 96%,transparent);border:.8px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;backdrop-filter:blur(6px)}
.dock .sel{flex:1;min-width:180px}
.dock .sel .k{font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground)}
.dock .sel .v{font-family:var(--font-display);font-size:22px;line-height:1.1;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--neon);color:var(--primary-foreground);padding:10px 18px;border-radius:var(--radius);font-weight:600;z-index:50}

/* ---------- home + leagues ---------- */
/* The hero is a statement, not a split screen. With the sample league's board
   gone there is no second column to balance, so it runs as one measured
   column with room around it - which is most of what reads as composed rather
   than busy. */
.hero-lead{padding:34px 0 30px;max-width:46rem}
.hero-lead h1{font-size:clamp(2.7rem,7vw,4.6rem);margin-top:16px;text-wrap:balance}
.hero-lead p{color:var(--muted-foreground);margin-top:16px;max-width:54ch;font-size:17px;line-height:1.6}
.hero-lead .btnrow{margin-top:26px}
@media (min-width:900px){ .hero-lead{padding:52px 0 44px} }
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:30px}
.leagues{display:grid;gap:12px}
.lcard{display:flex;align-items:center;gap:14px;padding:16px;text-decoration:none}
.lcard:hover{border-color:var(--neon)}
.lcard .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--pitch);font-size:20px}
.lcard .nm{font-family:var(--font-display);font-size:24px;letter-spacing:.02em;line-height:1;text-transform:uppercase}
.lcard .meta{font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);margin-top:5px}
.lcard .right{margin-left:auto;text-align:right}
footer.site{max-width:64rem;margin:0 auto;padding:20px 16px 32px;color:var(--muted-foreground);opacity:.75;font-size:11.5px;border-top:.8px solid var(--border)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- season history: week by week ---------- */
.hscroll{overflow-x:auto}
.hrow{display:grid;grid-template-columns:minmax(150px,1.4fr) 52px repeat(var(--gw),64px);
  gap:8px;align-items:center;padding:9px 14px;border-top:1px solid var(--border);white-space:nowrap}
.hrow:first-child{border-top:0}
.hrow.head{background:var(--card-2);font-family:var(--font-condensed);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--muted-foreground)}
.hrow.head span{text-align:center}
.hrow.head span:first-child{text-align:left}
.hrow.me{background:color-mix(in oklab,var(--neon) 8%,transparent)}
.hrow .nm{font-family:var(--font-condensed);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.hrow .pt{font-family:var(--font-display);font-size:19px;line-height:1}
.hp{display:block;text-align:center;font-family:var(--font-condensed);font-weight:700;
  letter-spacing:.08em;font-size:11.5px;border:1px solid var(--border);border-radius:5px;padding:3px 0}
.hp.miss{color:var(--strike);border-color:color-mix(in oklab,var(--strike) 45%,transparent);
  font-size:9px;letter-spacing:.04em}
.hp.none{border-color:transparent;color:var(--border)}

/* ---------- pricing chart ---------- */
.ptable{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:110px 1fr 62px;gap:12px;align-items:center;
  padding:7px 0;border-top:1px solid var(--border)}
.prow:first-child{border-top:0}
.prow.head{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:var(--muted-foreground);padding-bottom:9px}
.prow.head span:last-child{text-align:right}
.prow .pl{font-family:var(--font-condensed);font-weight:600;font-size:14px;letter-spacing:.04em}
.prow .pb{position:relative;display:flex;align-items:center;height:26px;
  background:var(--card-2);border-radius:5px;overflow:hidden}
.prow .pb i{position:absolute;left:0;top:0;bottom:0;background:var(--neon);opacity:.28}
.prow .pb b{position:relative;padding-left:10px;font-family:var(--font-display);
  font-size:17px;line-height:1;letter-spacing:.03em}
.prow .pe{text-align:right;font-size:13px;color:var(--muted-foreground)}
@media (max-width:520px){.prow{grid-template-columns:76px 1fr 54px;gap:8px}}

/* ---------- rule builder: segmented pickers and grids ---------- */
.sub-rules{border-left:2px solid var(--border);padding-left:14px;margin:4px 0 6px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tcell{display:flex;align-items:center;gap:7px;background:var(--card-2);
  border:1px solid var(--border);border-radius:8px;padding:5px 7px}
.tcell .crest{width:28px;height:28px;font-size:11px;border-radius:6px}
.tcell input{width:100%;min-width:0;font:inherit;background:transparent;border:0;color:var(--foreground);
  font-family:var(--font-display);font-size:19px;text-align:center}
.tcell input:focus{outline:none}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.wk{padding:7px 0;border-radius:7px;border:1px solid var(--border);background:transparent;
  font-family:var(--font-display);font-size:16px;cursor:pointer}
.wk[aria-pressed="true"]{background:var(--neon);color:var(--neon-ink);border-color:var(--neon)}

/* ---------- the optional-rules invitation ---------- */
.optcard{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  border:1px solid color-mix(in oklab,var(--neon) 45%,transparent);border-radius:12px;
  padding:16px 18px;background:color-mix(in oklab,var(--neon) 7%,transparent);
  transition:background .15s,border-color .15s}
.optcard:hover{background:color-mix(in oklab,var(--neon) 12%,transparent);
  border-color:color-mix(in oklab,var(--neon) 70%,transparent)}
.optcard.on{background:color-mix(in oklab,var(--neon) 13%,transparent);border-color:var(--neon)}
.optcard input{position:absolute;opacity:0;pointer-events:none}
.optcard .box{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--neon);color:var(--neon);font-family:var(--font-display);font-size:20px;line-height:1}
.optcard.on .box{background:var(--neon);color:var(--neon-ink)}
.optcard .txt{display:block}
.optcard b{display:block;font-family:var(--font-display);font-weight:400;font-size:24px;
  line-height:1;letter-spacing:.02em;text-transform:uppercase}
.optcard em{display:block;font-style:normal;color:var(--muted-foreground);font-size:13.5px;margin-top:6px}
.optcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.optcard .tags i{font-style:normal;font-family:var(--font-condensed);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;padding:3px 8px;border-radius:5px;
  border:1px solid color-mix(in oklab,var(--neon) 40%,transparent);color:var(--neon)}
.optcard.on .tags{display:none}

/* ---------- numbered "how it works" flow ---------- */
.stats.two{grid-template-columns:minmax(0,1fr)}
@media (min-width:660px){.stats.two{grid-template-columns:1fr 1fr}}

/* ---------- home: real screens on show ---------- */
.shots{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){.shots{grid-template-columns:1fr 1fr}}
.shot{margin:0}
.shot figcaption{margin-top:10px;font-size:13px;color:var(--muted-foreground);max-width:46ch}

/* ---------- home: the rule dials ---------- */
/* One panel, not six cards adrift on the pitch. The dials inside it are rows
   divided by hairlines rather than objects in their own right, so the section
   reads as a single thing you can set up, which is what it is. */

/* Six rows over two columns: every cell is filled, so nothing is left
   stranded alone on a final row. */
@media (min-width:700px){
  /* An odd number of dials would leave the last one alone beside an empty
     cell, so it takes the whole row instead. */
}

/* ---------- gold as the second accent ---------- */
/* Tinted toward gold but still a solid card. Mixing the accent into
   transparent instead of into the card left this one panel 91% see-through,
   so the pitch stripes ran straight through it while every card beside it
   was opaque - which reads as a rendering fault, not a highlight. */
.gold-card{border-color:color-mix(in oklab,var(--broadcast) 55%,transparent);
  background:color-mix(in oklab,var(--broadcast) 9%,var(--card))}

.stat .v.gold{color:var(--broadcast)}

/* a stronger step between the page, the cards and their strips */
.scoreboard-card{background:var(--card)}
.card-strip{background:var(--pitch)}

/* ---------- the walkthrough ---------- */
/* minmax(0,1fr), not 1fr: a plain 1fr track is sized by its content, so the
   history grid inside step 7 stretched the whole page sideways on a phone */
.walk{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;
  border:1px solid var(--border);border-radius:14px;background:color-mix(in oklab,var(--card) 88%,transparent);
  padding:20px 22px;margin-bottom:14px}
@media (min-width:860px){.walk{grid-template-columns:320px minmax(0,1fr);gap:28px}}
.walk-h{display:flex;align-items:center;gap:11px}
.walk-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--neon);color:var(--primary-foreground);font-family:var(--font-display);font-size:17px;line-height:1}
.walk-h b{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase}
.walk-txt p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted-foreground)}
.walk-demo .scoreboard-card{margin:0}
.walk-demo .stat p{font-size:12.5px}
.walk-names{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid var(--border)}
.walk-names span{background:var(--pitch-deep);border-radius:6px;padding:5px 9px;font-size:12px}
.walk-names b{color:var(--strike)}
.walk-names .more{color:var(--muted-foreground)}

/* ---------- the four steps, as their own row ---------- */

/* ---------- outcome rows beside "what is survivor league" ---------- */

/* ---------- the closing neon block ---------- */
.cta-block{margin-top:34px;background:var(--neon);color:var(--primary-foreground);
  border-radius:14px;padding:34px 34px;display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between}
.cta-block h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:.96;text-transform:uppercase;margin:0}
.cta-block p{margin:8px 0 0;font-size:15px;font-weight:500;max-width:52ch}
.btn.dark{background:var(--pitch-deep);color:var(--neon)}

/* ============================================================
   Modern pass. Same palette and layout - the surfaces get depth,
   the corners get softer, and things respond when you touch them.
   ============================================================ */

:root{
  --r-card:16px;
  --r-ctl:11px;
  --r-chip:8px;
  --lift:0 1px 0 color-mix(in oklab, #fff 7%, transparent) inset,
         0 10px 26px -12px rgb(0 0 0 / .55),
         0 2px 6px -2px rgb(0 0 0 / .35);
  --lift-hi:0 1px 0 color-mix(in oklab, #fff 11%, transparent) inset,
            0 18px 40px -14px rgb(0 0 0 / .62),
            0 3px 10px -3px rgb(0 0 0 / .4);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* softer stripes: texture, not deckchair */
.pitch-bg{background-attachment:fixed}

/* surfaces lift off the pitch instead of sitting flat on it */
.scoreboard-card,.hiw-card,.walk,.optcard{
  border-radius:var(--r-card);
  border-color:color-mix(in oklab,var(--border) 78%,transparent);
  box-shadow:var(--lift);
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1),
             transform .22s cubic-bezier(.2,.8,.2,1),
             border-color .22s ease;
}
.scoreboard-card:hover,.hiw-card:hover,.walk:hover{
  box-shadow:var(--lift-hi);
  border-color:color-mix(in oklab,var(--border) 100%,transparent);
}
.lcard:hover,.optcard:hover{transform:translateY(-2px)}
.card-strip{border-bottom-color:color-mix(in oklab,var(--border) 60%,transparent)}

/* a glassy header, the way sticky bars read now */
header.top{backdrop-filter:blur(14px) saturate(1.3);
  background:color-mix(in oklab,var(--pitch-deep) 82%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.leaguebar{backdrop-filter:blur(10px);
  background:color-mix(in oklab,var(--card) 78%,transparent)}

/* controls: bigger radius, and they move when you press them */
.btn,.wk,.toggle button{border-radius:var(--r-ctl);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease}
.btn{box-shadow:0 6px 18px -8px color-mix(in oklab,var(--neon) 60%,transparent)}
.btn:hover{transform:translateY(-1px)}
.btn:active,.wk:active{transform:translateY(1px)}
.btn.ghost{box-shadow:none;border-color:color-mix(in oklab,var(--border) 90%,transparent)}
.btn.ghost:hover{border-color:var(--neon);color:var(--neon)}
.broadcast-chip,.pill{border-radius:999px}

/* The live site tracks all display headings at .01em; these were the two
   rules pulling against that. */
.cta-block h2,.walk-h b{letter-spacing:.01em}

/* more air between sections */
h2.sec{margin-top:44px}
.hero-lead{padding-bottom:26px}

/* rows highlight as you run down them */
.prow,.hrow{transition:background .15s ease}
.lb .prow:not(.head):hover,.hrow:not(.head):hover{
  background:color-mix(in oklab,var(--neon) 5%,transparent)}

/* the closing block gets the same treatment */
.cta-block{border-radius:20px;
  box-shadow:0 22px 50px -20px color-mix(in oklab,var(--neon) 55%,transparent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,.lcard:hover,.optcard:hover{transform:none}
}

/* ---------- crests: the image, and the chip it falls back to ---------- */
.crest.chip{display:grid;place-items:center;border-radius:7px;background:var(--pitch);
  color:#fff;font-family:var(--font-display);font-size:11px;line-height:1;letter-spacing:.02em}
.crest.chip.dark{color:var(--primary-foreground)}
.crest.sm.chip{border-radius:4px;font-size:7px}
.crest.lg.chip{border-radius:9px;font-size:13px}

/* ---------- the league bar on a phone ----------
   It already scrolls sideways. What it lacked was any sign that it does:
   a scroll-position-aware fade on whichever edge still has tabs hidden
   behind it. The opaque layers scroll WITH the content and mask the
   shadows flush at whichever end is fully scrolled to; the shadows stay
   pinned, so a fade only shows where there is more to see. The last layer
   is the opaque base - background layers paint bottom-up, and without it
   the page would show through this sticky bar. */
@media (max-width:760px){
  .leaguebar{
    background:
      linear-gradient(var(--card), var(--card)) left / 22px 100% no-repeat local,
      linear-gradient(var(--card), var(--card)) right / 22px 100% no-repeat local,
      linear-gradient(to right, rgb(0 0 0 / .38), rgb(0 0 0 / 0)) left / 22px 100% no-repeat scroll,
      linear-gradient(to left, rgb(0 0 0 / .38), rgb(0 0 0 / 0)) right / 22px 100% no-repeat scroll,
      linear-gradient(var(--card), var(--card)) center / 100% 100% no-repeat local;
    backdrop-filter:none;   /* the gradient stack replaces the translucent fill */
  }
  .leaguebar-in{padding:0 12px}
  .leaguebar .lname{display:none}          /* the name is already in the page heading */
  .leaguebar a{padding:12px 9px;font-size:12px;letter-spacing:.1em}
}

/* touch targets and denser tables on a phone */
@media (max-width:620px){
  .btn{padding:13px 20px}
  .prow{gap:8px}
  /* seven strike marks at desktop size overflow their column and the last
     one gets clipped, so shrink the marks rather than the column */
  .xs{gap:1px}
  .xs i{font-size:13px}
  .lb .prow{grid-template-columns:28px minmax(0,1fr) 42px 40px 74px}
  .stats,.stats.two{grid-template-columns:minmax(0,1fr)}
  .cols{grid-template-columns:minmax(0,1fr)}
  .cta-block{padding:26px 22px;border-radius:16px}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ---------- the pick screen, laid out the way the live site does it ----------
   One card per matchday, a row per fixture: home reversed on the left,
   the kick-off time boxed in the middle, away on the right. */
.mday + .mday{margin-top:24px}
.mday-h{display:flex;justify-content:center;margin-bottom:12px}
.fxlist > * + *{border-top:.8px solid var(--border)}
.fxrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.fxrow.off{grid-template-columns:1fr auto;padding:14px 16px;align-items:center;
  font-family:var(--font-condensed);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--muted-foreground)}

.fxtime{display:flex;align-items:center;justify-content:center;
  border-left:.8px solid var(--border);border-right:.8px solid var(--border);padding:0 6px}
.fxtime span{border:.8px solid var(--border);border-radius:7px;background:var(--pitch-deep);
  padding:4px 8px;font-family:var(--font-display);font-size:14px;line-height:1;
  color:var(--neon);font-variant-numeric:tabular-nums}

.tcell{position:relative;display:flex;align-items:center;gap:8px;padding:12px 10px;
  width:100%;text-align:left;cursor:pointer;background:none;border:0;
  transition:background .15s ease}
.tcell.right{flex-direction:row-reverse;text-align:right}
.tcell:hover:not(:disabled){background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.tcell.on{background:color-mix(in oklab,var(--neon) 15%,transparent)}
.tcell.on::after{content:"";position:absolute;inset:0;border:2px solid var(--neon);
  border-radius:9px;pointer-events:none}
.tcell.locked{opacity:.4;cursor:not-allowed}
.tc-txt{min-width:0;flex:1}
.tc-nm{display:block;font-family:var(--font-display);font-weight:400;font-size:16px;
  line-height:1.15;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-use{display:block;margin-top:2px;font-family:var(--font-condensed);font-weight:600;
  font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground)}

.pick-now{display:flex;align-items:center;gap:11px;margin:0 0 20px;
  border:.8px solid color-mix(in oklab,var(--neon) 50%,transparent);
  background:color-mix(in oklab,var(--neon) 14%,transparent);border-radius:10px;padding:12px 16px;
  font-family:var(--font-condensed);text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.pick-now .tick{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--neon);color:var(--primary-foreground);font-size:13px}
.pick-now b{font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:.03em}
.pick-now em{font-style:normal;text-transform:none;letter-spacing:normal;color:var(--muted-foreground)}
.pick-note{margin:22px 0 0;text-align:center;font-family:var(--font-condensed);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}

@media (min-width:640px){
  .tcell{gap:12px;padding:15px 16px}
  .tc-nm{font-size:19px}
  .tc-use{font-size:10px;letter-spacing:.14em}
  .fxtime{padding:0 16px}
  .fxtime span{padding:5px 11px;font-size:18px}
  .crest{height:34px;width:34px}
}

/* ---------- footer links and the policy pages ---------- */
footer.site p{margin:0 0 8px}
/* The footer links were 18px tall - fine for a mouse, a poor target for a
   thumb, and they sit next to each other so a near miss hits the wrong one.
   Padding takes each one to 44px without changing how the row looks: the gap
   shrinks by what the padding adds, so the spacing between the words is where
   it was. The underline is drawn on the text rather than the box, or it would
   now sit well below the word. */
footer.site .flinks{display:flex;flex-wrap:wrap;gap:0 4px;margin:6px 0 2px;
  align-items:center}
/* The space goes on the right of each link rather than both sides, so
   whichever link starts a row lines up with the paragraphs above it. A
   first-child exception would only fix the first row, and these wrap. */
footer.site .flinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 26px 0 0;
  color:var(--neon);text-decoration:none;border-bottom:0}
footer.site .flinks a:hover{text-decoration:underline;text-underline-offset:3px}
footer.site .fsmall{opacity:.8}

.legal{margin:0 0 26px}
.legal h2{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;color:var(--neon);margin:0 0 10px}
.legal p{margin:0 0 11px;font-size:14.5px;line-height:1.65;max-width:64ch}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--neon)}
.legal code{font-size:13px;background:var(--pitch-deep);border-radius:5px;padding:2px 6px}
/* the two blanks that have to be filled in before launch stand out on purpose */
.legal .todo{border-left:3px solid var(--broadcast);padding:10px 0 10px 13px;
  background:color-mix(in oklab,var(--broadcast) 7%,transparent);border-radius:0 8px 8px 0;
  color:var(--broadcast)}

/* The live site's bar: red, the countdown in a white pill, uppercase label. */
.deadline-banner a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.deadline-banner .dl-k{text-transform:uppercase;letter-spacing:.04em}
.deadline-banner .dl-cd{display:inline-block;margin:0 6px;padding:3px 8px;border-radius:5px;
  background:#fff;color:#0a0a0a;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-weight:700;font-size:12px;letter-spacing:0;vertical-align:middle}
.deadline-banner .dl-t{font-weight:600;opacity:.95}
@media (max-width:640px){ .deadline-banner .dl-t{display:block;margin-top:4px} }

/* ---------- account settings ---------- */
.acct-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:.8px solid var(--border)}
.acct-row:last-of-type{border-bottom:0}
.acct-row span{color:var(--muted-foreground)}
.acct-row b{text-align:right;font-weight:600}
.togrow{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.togrow input{margin-top:3px;width:18px;height:18px;accent-color:var(--neon);flex:none}
.togrow b{display:block;font-size:15px}
.togrow em{display:block;font-style:normal;color:var(--muted-foreground);font-size:13px;
  line-height:1.5;margin-top:4px}

/* ---------- advertising ---------- */
/* The box reserves its height before anything arrives, so the page does not
   jump when an ad loads. It is labelled, and it sits visibly apart from the
   real content rather than pretending to be part of it. */
.adslot{position:relative;margin:26px 0;padding:22px 12px 12px;min-height:110px;
  border:1px dashed var(--border);border-radius:12px;background:var(--pitch-deep);
  overflow:hidden}
/* Google marks a slot it had nothing to sell for. Early on, with little
   traffic, that is most of them - and a labelled empty box is worse than no
   box at all, so it collapses rather than leaving a hole in the page. */
.adslot:has(ins[data-ad-status="unfilled"]){display:none}
.adslot-tag{position:absolute;top:7px;left:12px;font-family:var(--font-condensed);
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;
  color:var(--muted-foreground);opacity:.7}
.adslot ins{max-width:100%}

/* ---------- the consent bar ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.8);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px))}
.consent-in{max-width:64rem;margin:0 auto;display:flex;gap:16px;align-items:center;
  flex-wrap:wrap;justify-content:space-between}
.consent p{margin:0;font-size:13px;line-height:1.55;color:var(--muted-foreground);
  max-width:64ch;flex:1 1 20rem}
.consent p a{color:var(--neon)}
.consent-btns{display:flex;gap:9px;flex:none}
.consent .btn{padding:9px 16px;font-size:13px}
.consent .btn.ghost{background:none;border:1px solid var(--border);color:var(--foreground)}
@media (max-width:560px){
  .consent-btns{width:100%}
  .consent .btn{flex:1}
}

/* The first line of the explanation does the work the three outcome cards
   used to do, so it reads a size up from the detail underneath it. */
/* Full-width card, but the text keeps a readable measure rather than running
   the whole 919px - a line of a hundred characters is hard to track back. */
/* Four short statements rather than one long card. Each is its own small
   panel, so the section is scanned in a couple of seconds instead of read. */
.hiw{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .hiw{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .hiw{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* width and style only - the shared card rule sets the border colour, and
   restating it here would override that with a solid edge while every other
   card on the page carries a softened one. */
.hiw-card{background:var(--card);border-width:.8px;border-style:solid;padding:17px 18px}
.hiw-card b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:20px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;
  color:var(--neon)}
.hiw-card p{display:block;margin:8px 0 0;font-style:normal;font-size:14px;
  line-height:1.55;color:var(--muted-foreground)}
.hiw-foot{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted-foreground);
  max-width:72ch}

/* One icon per box, always to the left of its name, always the same size.
   Sits on the baseline of the heading rather than above it, so a card with an
   icon is the same height as one without. */
.k-ic{display:inline-block;margin-right:8px;font-size:1em;line-height:1;
  -webkit-font-smoothing:auto;vertical-align:-.04em}
.hiw-card b .k-ic{font-size:.85em;vertical-align:.02em}
.stat .k .k-ic{font-size:13px;margin-right:6px;vertical-align:-.12em}

/* ---------- about ---------- */

/* The trophy cabinet. A season where one player took both titles is gold and
   carries a chip; a season the titles split shows both winners side by side,
   in the quieter treatment. */

/* the bonus description sits under its name rather than after a dash */
.check em{display:block;font-style:normal;margin-top:2px;font-size:13.5px;line-height:1.5}

/* The concept, before the mechanics. A size up from the cards, because it is
   the sentence a visitor should take in first. */
.hiw-lead{margin:0 0 16px;max-width:62ch;font-size:17px;line-height:1.6;color:var(--foreground)}
/* the opening line of the story, a size up from what follows it */
.about-lead{margin:0 0 11px;font-size:17px;line-height:1.6;color:var(--foreground)}

/* Where the settings panel used to be. The promise is the interesting part;
   the controls are one click away in the builder. */
.pitch-line{margin:0 0 4px;max-width:64ch;font-size:16px;line-height:1.65;
  color:var(--muted-foreground)}

/* ---------- league rules ---------- */
/* Every card on this page carries a heading in the same treatment, so the
   page reads as a set of sections rather than one labelled list and two
   loose ones. */
.rule-card{margin-top:14px}
.rule-card:first-of-type{margin-top:0}
.rule-h{margin:0 0 12px;font-family:var(--font-display);font-weight:400;font-size:21px;
  line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:var(--neon)}
.rule-card .kv{margin:0}

/* Five marks at full size fit both columns, so nothing here scales. */

/* ---------- leaderboards with a column switched off ----------
   A league can run without points, or without strikes. Dropping the column
   rather than filling it with zeroes means the row has to be re-tracked at
   each width; the name column absorbs the space. */
.lb.no-pts .prow{grid-template-columns:1.5rem 1fr 2.5rem 3.25rem}
.lb.no-str .prow{grid-template-columns:1.5rem 1fr 2.5rem 2.25rem}
@media (min-width:640px){
  .lb.no-pts .prow{grid-template-columns:3rem minmax(0,1fr) 6rem 8rem}
  .lb.no-str .prow{grid-template-columns:3rem minmax(0,1fr) 6rem 5rem}
}
@media (max-width:699px){
  .lb.no-pts .prow{grid-template-columns:28px minmax(0,1fr) 42px 74px}
  .lb.no-str .prow{grid-template-columns:28px minmax(0,1fr) 42px 40px}
}

/* The walkthrough's leaderboard steps use the real board's pick badge and
   its struck-through knocked-out name, so those two need their small sizes. */
.crest.xs{height:13px;width:13px;font-size:8px}
.prow .who .gone{text-decoration:line-through;text-decoration-color:var(--strike);text-decoration-thickness:2px}
.prow .who .elim{display:block;margin-top:2px;font-family:var(--font-condensed);font-size:9px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--strike)}
/* the pick column is 2.5rem on a phone, so the badge takes the small type the
   live board gives it rather than wrapping to three lines */
@media (max-width:699px){
  .lb .prow .pick-pill{font-size:9px;letter-spacing:.03em;padding:3px 4px;line-height:1.25}
  .lb .prow .pick-pill .crest.xs{display:none}
}

/* ---------- league home: the personal bits ---------- */
/* which way you moved since last week */
.move{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-condensed);
  font-size:11px;font-weight:700;letter-spacing:.08em}
.move.up{color:var(--neon)}
.move.down{color:var(--strike)}
.stat .v .move{font-size:12px}
/* a break in the ranks, where the rows either side are not neighbours */
.prow.gap{justify-items:center;padding:4px 12px;color:var(--border);letter-spacing:.3em}
.prow.gap span{grid-column:1/-1;text-align:center}

/* the clubs you have spent */
.usedgrid{display:flex;flex-wrap:wrap;gap:7px}
.usedt{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:8px;
  border:1px solid var(--border);background:var(--card-2)}
.usedt .crest{height:18px;width:18px;font-size:8px;border-radius:4px}
.usedt b{font-family:var(--font-display);font-weight:400;font-size:14px;letter-spacing:.03em}
.usedt i{font-style:normal;font-family:var(--font-condensed);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted-foreground)}
.usedt.done{opacity:.45;border-color:color-mix(in oklab,var(--strike) 40%,transparent)}
.usedt.done i{color:var(--strike)}

/* the fixture behind this week's pick, on the league home card */
.matchrow{display:flex;align-items:center;gap:10px;margin-top:10px}
.ms-side{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.ms-side:last-of-type{flex-direction:row-reverse;text-align:right}
.ms-side b{font-family:var(--font-display);font-weight:400;font-size:17px;line-height:1.1;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-side i{font-style:normal;display:grid;place-items:center;flex:none;height:28px;width:28px;
  border-radius:6px;border:1px solid var(--border);background:var(--pitch-deep);
  font-family:var(--font-display);font-size:16px;color:var(--muted-foreground)}
.ms-side i.w{border-color:color-mix(in oklab,var(--neon) 60%,transparent);
  background:color-mix(in oklab,var(--neon) 15%,transparent);color:var(--neon)}
.ms-v{flex:none;font-family:var(--font-display);font-size:15px;color:var(--muted-foreground)}

/* a pick that is in but not yet played, under the week being scored */
.nextwrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.tick-in{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--neon);color:var(--neon-ink);font-size:12px;vertical-align:middle}

/* ---------- the home page, louder ----------

   Everything here is scoped to .home so it only changes the page a stranger
   lands on. The headline is the pitch and it was sitting at about the size of
   a section title; the section titles themselves were 11px grey, which is a
   label, not a heading. The live site runs its hero near twice this size with
   the promise in green, and that version has been recruiting players for four
   seasons, so this follows it. */
.home .hero-lead{max-width:52rem}
.home .hero-lead h1{font-size:clamp(3.1rem,8.5vw,6rem);line-height:.86;letter-spacing:0}
.home .hero-lead h1 .accent{color:var(--neon)}
/* the sentence under the headline is the promise, not a footnote */
.home .hero-lead p{color:var(--foreground);font-size:clamp(17px,2.2vw,21px);line-height:1.5;
  max-width:36ch;margin-top:18px}
.home .hero-lead .btnrow{margin-top:30px}

/* section titles: a heading rather than a caption */
.home h2.sec{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1;
  color:var(--foreground);margin:46px 0 16px}
.home .hiw-lead,.home .pitch-line{font-size:clamp(16px,1.9vw,18.5px);line-height:1.62;max-width:64ch}
.home .hiw-lead{color:var(--foreground)}

/* the first line of the explainer carries the whole idea, so let it lead */
.home .hiw-lead b{font-family:var(--font-display);font-weight:400;font-size:1.18em;
  letter-spacing:.01em}

/* ---------- what it costs ----------
   Who pays, and how often, are the two things people get wrong about this,
   so they are stated first and loudest and the detail follows as a list. */
.cost-points{margin:16px 0 0;padding:0;list-style:none;max-width:46ch;display:grid;gap:11px}
.cost-points li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;
  color:var(--muted-foreground)}
.cost-points li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--neon)}
.cost-points b{color:var(--foreground);font-weight:600}

/* the competition, when there is only one of them to have */
.only-comp{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 16px;
  padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--pitch-deep)}
.only-comp span{font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted-foreground)}
.only-comp b{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.02em}
.only-comp i{font-style:normal;font-size:12.5px;color:var(--muted-foreground)}

/* ---------- leaderboard and history, matching the live board ---------- */
/* search box above a table */
.tablefilter{width:100%;max-width:22rem;margin:0 0 12px;padding:10px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--pitch-deep);color:var(--foreground);
  font:inherit;font-size:14px}
.tablefilter::placeholder{color:var(--muted-foreground)}
.tablefilter:focus{outline:none;border-color:var(--neon)}
.reveal-note{margin:0 0 12px;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--pitch-deep);text-align:center;font-family:var(--font-condensed);font-size:11px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--muted-foreground)}

/* a knocked-out name, struck through where it finished */
.hrow.out{opacity:.45}
.hrow .nm .gone{text-decoration:line-through;text-decoration-color:var(--strike);text-decoration-thickness:2px}

/* history: the result colours on each week's pick */

/* history: how much of each club's allowance is gone */
/* the count, with the colour carrying the meaning - the live board prints a
   bare number rather than "1/2", and a legend underneath says what it means */
.hu{display:block;text-align:center;font-family:var(--font-display);font-weight:400;
  font-size:17px;line-height:1;color:var(--muted-foreground)}
.hu.part{color:var(--broadcast)}
.hu.full{color:var(--strike)}
.hu-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;
  font-family:var(--font-condensed);font-size:10px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--muted-foreground)}
.hu-key span{display:inline-flex;align-items:center;gap:7px}
.hu-key i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--border);font-size:10px}
.hu-key i.part{border-color:var(--broadcast)}
.hu-key i.full{border-color:var(--strike)}

/* ---------- history: frozen panes ----------

   The season grid is wider than any phone, so the two columns that say who a
   row belongs to have to stay put while the weeks scroll under them, and the
   header has to stay put while the players scroll up under it. Same widths the
   live board uses: 6rem for the name on a phone and 8rem from the small
   breakpoint up, with points parked immediately to its right. */
.freeze{max-height:70vh;overflow:auto;border:.8px solid var(--border);border-radius:12px;
  background:var(--card);-webkit-overflow-scrolling:touch}
.ftable{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
.ftable th,.ftable td{padding:9px 10px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--border);background:var(--card)}
.ftable tbody tr:last-child th,.ftable tbody tr:last-child td{border-bottom:0}
.ftable thead th{position:sticky;top:0;z-index:4;background:var(--card-2);
  font-family:var(--font-condensed);font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted-foreground)}
/* the two frozen columns */
.ftable .c-name{position:sticky;left:0;z-index:2;width:6rem;min-width:6rem;max-width:6rem;
  text-align:left;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-condensed);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--foreground)}
.ftable .c-pts{position:sticky;left:6rem;z-index:2;width:3.5rem;min-width:3.5rem;
  border-right:1px solid var(--border);
  font-family:var(--font-display);font-weight:400;font-size:17px;color:var(--neon)}
/* the frozen header corner has to sit above both the frozen column and the
   scrolling header, or rows slide out underneath it and show through */
.ftable thead .c-name,.ftable thead .c-pts{z-index:5}
@media (min-width:640px){
  .ftable .c-name{width:8rem;min-width:8rem;max-width:8rem;font-size:14px}
  .ftable .c-pts{left:8rem;width:5rem;min-width:5rem;font-size:19px}
  .ftable th,.ftable td{padding:10px 12px}
}
/* a highlighted or faded row has to carry its colour into the frozen cells,
   which paint their own background to stop the weeks showing through */
.ftable tr.me th,.ftable tr.me td{background:color-mix(in oklab,var(--neon) 10%,var(--card))}
.ftable tr.out{opacity:.45}
.ftable tr.hide{display:none}
.ftable .gone{text-decoration:line-through;text-decoration-color:var(--strike);text-decoration-thickness:2px}
/* the open round, pinned against the played weeks */
.ftable .cur{border-right:1px solid var(--border)}
.ftable thead .cur{color:var(--neon)}
/* the pick pills inside the grid */
.ftable .hp{display:block;min-width:3.1rem;text-align:center;font-family:var(--font-condensed);
  font-weight:700;letter-spacing:.08em;font-size:11.5px;border:1px solid var(--border);
  border-radius:5px;padding:3px 6px}
.ftable .hp.miss{color:var(--strike);border-color:color-mix(in oklab,var(--strike) 45%,transparent);
  font-size:9.5px;letter-spacing:.02em}
.ftable .hp.none{border-color:transparent;color:var(--border)}
/* team usage counts: the colour carries the meaning */
.ftable td.hu{font-family:var(--font-display);font-size:17px;color:var(--muted-foreground)}
.ftable td.hu.part{color:var(--broadcast)}
.ftable td.hu.full{color:var(--strike)}
/* the filter hides rows with a class rather than [hidden], because a table row
   keeps its table display and ignores the attribute */
.hide{display:none!important}

/* a strip with something on each end, rather than one label in the middle */
.card-strip.split{justify-content:space-between;gap:12px}
.card-strip .still{color:var(--muted-foreground);white-space:nowrap}
.card-strip .still b{font-family:var(--font-display);font-weight:400;font-size:15px;
  letter-spacing:.04em;color:var(--neon);vertical-align:-1px}

/* ---------- commissioner tools ---------- */
.roster{display:grid;gap:2px}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border)}
.rrow:last-child{border-bottom:0}
.rrow .rn{font-family:var(--font-condensed);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.03em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rrow .rp{grid-column:1;font-size:12px;color:var(--muted-foreground)}
.rrow .ra{grid-column:2;grid-row:1/3;display:flex;gap:6px;align-items:center}
.mini{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--foreground);cursor:pointer;
  font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.mini:hover{border-color:var(--neon);color:var(--neon)}
.mini.danger:hover{border-color:var(--strike);color:var(--strike)}
.mini.off{opacity:.4;cursor:not-allowed}
.mini.off:hover{border-color:var(--border);color:var(--foreground)}
/* a row of controls that act together */
.ovr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ovr select{flex:1;min-width:9rem;min-height:44px;padding:0 12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--pitch-deep);color:var(--foreground);font:inherit;font-size:14px}
.ovr select:focus{outline:none;border-color:var(--neon)}
.ovr .rn{flex:1;min-width:8rem}
.btn.danger{background:transparent;color:var(--strike);
  border:1px solid color-mix(in oklab,var(--strike) 60%,transparent)}
.btn.danger:hover{background:color-mix(in oklab,var(--strike) 15%,transparent)}

/* ---------- pick page: the player strip and the panels ---------- */
.whoami{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.whoami .wn{font-family:var(--font-display);font-size:24px;line-height:1;text-transform:uppercase;
  letter-spacing:.02em}
.whoami .ws{margin-top:5px;font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted-foreground)}
.whoami .gone-txt{color:var(--strike)}
.linkish{background:none;border:0;cursor:pointer;padding:10px 0;
  font-family:var(--font-condensed);font-size:11px;text-transform:uppercase;letter-spacing:.25em;
  color:var(--muted-foreground);text-decoration:underline;text-underline-offset:4px}
.linkish:hover{color:var(--foreground)}

/* the ask-first panel, and the one that says it landed */
.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgb(0 0 0 / .6)}
.sheet[hidden]{display:none}
.sheet-in{width:100%;max-width:26rem;text-align:center;margin:0}
.sheet-h{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;
  text-transform:uppercase;margin:0}
.sheet .btnrow{justify-content:center}
.sheet .btn{flex:1}
.sheet .btn.block{flex:1 0 100%}

/* ---------- picked or not, for the week that is open ----------
   The live site's tick and hourglass: a small tinted pill, green for in,
   amber for still to do. */
.pstat{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  padding:2px 7px;font-size:13px;line-height:1.3}
.pstat.in{background:color-mix(in oklab,var(--neon) 15%,transparent)}
.pstat.wait{background:color-mix(in oklab,var(--broadcast) 15%,transparent)}
.pstat-key{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0 0 12px;
  font-family:var(--font-condensed);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-foreground)}
.pstat-key > span{display:inline-flex;align-items:center;gap:6px}

/* ---------- owner dashboard ---------- */
.own-status{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.own-status span{padding:6px 11px;border-radius:999px;font-size:12.5px;border:1px solid var(--border);
  background:var(--card)}
.own-status .ok{border-color:color-mix(in oklab,var(--neon) 55%,transparent);color:var(--neon)}
.own-status .warn{border-color:color-mix(in oklab,var(--broadcast) 60%,transparent);color:var(--broadcast)}
.tiles.own-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.tiles.own-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.own-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.own-grid{grid-template-columns:minmax(0,1fr)}}
.own-grid .scoreboard-card{margin:0}
.wbars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-items:end;height:110px}
.wbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px}
.wbar b{font-family:var(--font-condensed);font-size:11px;color:var(--muted-foreground)}
.wbar i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--neon)}
.wbar:last-child i{background:var(--broadcast)}
.wbar-ends{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--font-condensed);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.own-table{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);background:var(--card)}
.own-table table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.own-table th,.own-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.own-table thead th{font-family:var(--font-condensed);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-foreground);background:var(--card-2)}
.own-table small{display:block;font-size:11.5px;color:var(--muted-foreground);margin-top:2px}
.own-table small.q{color:var(--broadcast)}
.own-table tr.quiet th a{color:var(--broadcast)}

/* ---------- beta ---------- */
.beta-note{margin:0 0 16px;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;
  border:1px solid color-mix(in oklab,var(--neon) 50%,transparent);
  background:color-mix(in oklab,var(--neon) 10%,transparent)}
.beta-note b{color:var(--neon)}

/* ---------- the champion ---------- */
.champ{margin:0 0 16px;border-color:color-mix(in oklab,var(--broadcast) 55%,transparent)}
.champ .card-strip{background:color-mix(in oklab,var(--broadcast) 14%,transparent);color:var(--broadcast)}
.champ-row{display:flex;gap:12px;align-items:flex-start}
.champ-row + .champ-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.champ-ic{font-size:26px;line-height:1}
.champ-k{font-family:var(--font-condensed);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--broadcast)}
.champ-h{font-family:var(--font-display);font-size:24px;line-height:1.05;letter-spacing:.02em;margin-top:3px}
.champ-row.me .champ-h{color:var(--broadcast)}
.champ-p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
.winpop .sheet-in{border-color:color-mix(in oklab,var(--broadcast) 60%,transparent)}
.win-burst{font-size:52px;line-height:1;margin-bottom:6px;animation:win-pop .5s var(--ease) both}
.win-kicker{margin:0 0 10px;font-family:var(--font-condensed);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-foreground)}
.win-title + .win-title{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.win-title .sheet-h{margin-top:4px}
@keyframes win-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.win-burst{animation:none}}

/* ---------- which entry you are picking for ----------
   Only ever on screen when somebody holds more than one, and then it is the
   thing they most need to get right, so it is a switch rather than a link. */
.entrytabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:10px;margin-top:20px;text-align:left}
.etab{display:block;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);text-decoration:none;transition:border-color .15s,background .15s}
.etab:hover{border-color:color-mix(in oklab,var(--neon) 60%,transparent)}
.etab .et-n{display:block;font-family:var(--font-display);font-weight:400;font-size:26px;
  line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-foreground)}
.etab .et-s{display:block;margin-top:8px;font-family:var(--font-condensed);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}
.etab.on{border-color:var(--neon);background:color-mix(in oklab,var(--neon) 12%,transparent)}
.etab.on .et-n{color:var(--foreground)}
.etab.on .et-s{color:var(--neon)}

/* arriving from the Game Week board: the row says here I am, then stops */
.prow.flash{background:color-mix(in oklab,var(--neon) 22%,transparent);
  transition:background .6s ease}
/* the people who forgot, as names rather than a second table */
.dnp-list{display:flex;flex-wrap:wrap;gap:8px}
.dnp{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;
  border:1px solid color-mix(in oklab,var(--strike) 60%,transparent);
  background:color-mix(in oklab,var(--strike) 15%,transparent);color:var(--strike);
  text-decoration:none;font-family:var(--font-condensed);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em}
.dnp:hover{filter:brightness(1.15)}
/* a player row inside a fixture is a link now, so keep it looking like a row */
.people a.prow{text-decoration:none;color:inherit}
.people a.prow:hover{background:color-mix(in oklab,var(--pitch) 40%,transparent)}


/* ---------- the builder's two panels ----------
   One box was doing two jobs: listing what we suggest, and standing in for
   what you were building. They read as the same thing, so neither was clear.
   Two cards of the same shape - the fixed one you can copy, and the live one
   that is yours - and the difference between them is the whole point. */
.rulecols{display:grid;gap:14px;align-content:start}
@media (min-width:860px){.rulecols{position:sticky;top:80px}}
.rulecols .scoreboard-card{margin:0}
.rc-h{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em}
.rc-sub{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-foreground)}
/* the suggestion sits back; the live one leans forward */
.yourcard{border-color:color-mix(in oklab,var(--neon) 45%,transparent)}
.yourcard .card-strip{background:color-mix(in oklab,var(--neon) 12%,transparent);color:var(--neon)}
/* There is no second treatment. A card whose rules differ from the preset
   used to turn amber, which is the colour this palette uses for warnings and
   for a deadline running out - it made a league of somebody's own look like a
   mistake they had made. */
.yourcard .rc-h{color:var(--foreground)}

/* ---------- the rule-set switch ----------
   Replaces a card that listed the recommended rules a second time: the card
   below already shows them whenever Classic is on, so this only has to say
   which set you are on and offer the way back. */
.preset{margin:0}
.preset-note{margin:0 2px 9px;font-size:12px;line-height:1.5;color:var(--muted-foreground)}
.preset-note b{color:var(--foreground)}

/* The rules as the numbers themselves. The figure is what you read; the
   label underneath explains it, the way the live site's own pages do it. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 2px}
.tile{padding:12px 10px;border-radius:11px;background:var(--card-2);text-align:center}
.tn{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--neon);letter-spacing:.02em}
.tn .sm{font-size:20px;opacity:.55}
.tl{margin-top:4px;font-family:var(--font-condensed);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-foreground);opacity:.85}

/* How hard the league will be, as a step on a scale rather than a figure.
   Painted in two places at once, so everything here is a class. */
.meter{margin-top:14px}
.mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.mh span{font-family:var(--font-condensed);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-foreground);opacity:.8}
.mh b{font-family:var(--font-display);font-size:22px;letter-spacing:.04em;color:var(--broadcast)}
.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
/* as with .btn, a display rule here would beat the hidden attribute */
.segs[hidden],.mends[hidden]{display:none}
.segs i{height:8px;border-radius:4px;background:var(--border)}
.segs i.on{background:var(--broadcast)}
.segs i.on:nth-child(1){opacity:.35}
.segs i.on:nth-child(2){opacity:.6}
.segs i.on:nth-child(3){opacity:.82}
.mends{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--font-condensed);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);opacity:.6}
.mline{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-foreground)}

.introcard .rc-h{font-family:var(--font-display);font-size:26px;letter-spacing:.03em;line-height:1}

/* The phone's bar. The sidebar it replaces sits under the whole form on a
   narrow screen, which put the verdict and the button 1,400px down. */
.rulebar{display:none}
@media (max-width:899px){
  .rulebar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:var(--card);
    border-top:1px solid var(--line);box-shadow:0 -12px 28px -14px rgb(0 0 0/.7)}
  .rb-m{flex:1 1 auto;min-width:0}
  .rb-h{display:flex;align-items:baseline;gap:8px}
  .rb-h span{font-family:var(--font-condensed);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted-foreground);opacity:.8;white-space:nowrap}
  .rb-h b{font-family:var(--font-display);font-size:21px;letter-spacing:.04em;color:var(--broadcast)}
  .rulebar .segs{margin-top:6px}
  .rulebar .segs i{height:6px}
  .rulebar .btn{flex:0 0 auto;padding:14px 18px}
  /* so the last card is not left under the bar */
  .cols{padding-bottom:104px}
}
/* your league, said in a line instead of a table */
.yr-line{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--foreground)}
.yr-line.dim{color:var(--muted-foreground);font-size:12px}

/* ---------- the builder's two section headings ----------
   They were the same 11px grey label as every other section marker on the
   site, which is too quiet for the one place a page is split into "you must"
   and "you may". */
h2.sec.big{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--foreground);
  margin:30px 0 8px;display:flex;align-items:center;gap:9px}
h2.sec.big:first-child{margin-top:0}
/* the star: on the heading it is a key, on a label it is the mark */
.req{font-style:normal;color:var(--neon);line-height:1}
h2.sec.big .req{font-size:.62em}
.bar .t label .req{font-size:11px;vertical-align:1px;opacity:.9}

/* "is this a betting site" is a question people ask before signing up, not
   after, so it is answered where the money is discussed rather than only in
   the terms. Quiet, not a warning: it is a fact about what we are. */
.nogamble{margin-top:18px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--pitch-deep);max-width:46ch}
.nogamble b{display:block;font-family:var(--font-condensed);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--foreground)}
.nogamble p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--muted-foreground)}
footer.site .fsmall b{color:var(--foreground)}
footer.site .fsmall a{color:var(--neon);text-decoration:underline;text-underline-offset:3px}