/* ============================================================
   SWEATY DYNO — visual system
   Dark telemetry / broadcast aesthetic. Mobile-first.
   ============================================================ */

:root{
  /* ground — a wider value range so cards read as separate planes */
  --bg:#0E131A;
  --bg-2:#141B24;
  --surface:#1B232E;
  --surface-2:#242E3B;
  --surface-3:#303B4A;
  --line:#374355;
  --line-soft:#28323F;

  /* ink */
  --ink:#EDF2F8;
  --ink-2:#B4C1D1;
  --ink-3:#7C8BA0;

  /* signal */
  --heat:#FF6B2C;        /* primary — the dyno needle */
  --heat-dim:#7A3216;
  --mint:#3DDC97;        /* money in / good */
  --gold:#F5C451;        /* champion / empire */
  --violet:#9C8CFA;      /* empire pot */
  --red:#FF4D5E;         /* owed / out */
  --blue:#5AC8FA;

  /* minigame series — the brand accents re-stepped to OKLCH L 0.65 so they work
     as FILLS on the dark surface; validated for CVD separation and contrast.
     Each has a muted twin (chroma x.50, L-.06) for money allocated but not yet
     won: still clearly the section's own colour, ~dE 8.5 from its bright form so
     the split reads, and dE 24+ from the grey track so "not won yet" never looks
     like "not allocated". Pushing the chroma higher drops the split under dE 8. */
  --mg-pre:#8D7CE8; --mg-week:#EC5910; --mg-post:#229CCC; --mg-guil:#B38802;
  --mg-pre-dim:#7B76AA; --mg-week-dim:#AE694F; --mg-post-dim:#57859C; --mg-guil-dim:#8F7B4E;

  /* position chips */
  --qb:#F5695F; --rb:#3DDC97; --wr:#5AC8FA; --te:#F5A94C; --pk:#9C8CFA;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --tab-h:64px;

  --f-display:"Barlow Condensed",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
/* faint carbon weave + top heat bloom */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(110% 55% at 50% -8%, rgba(255,107,44,.13), transparent 62%),
    radial-gradient(70% 45% at 100% 12%, rgba(156,140,250,.09), transparent 65%),
    radial-gradient(80% 50% at 0% 68%, rgba(61,220,151,.055), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 34%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 1px, transparent 1px 5px);
}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:.01em; line-height:1.1}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit; font-variant-numeric:tabular-nums}
table{border-collapse:collapse; width:100%}

.ic{width:18px;height:18px;flex:none;stroke-width:2}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.mono{font-family:var(--f-display); font-weight:600; letter-spacing:.02em}
.dim{color:var(--ink-2)} .dimmer{color:var(--ink-3)}
.pos{color:var(--mint)} .neg{color:var(--red)}
.center{text-align:center} .right{text-align:right}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.app{position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:linear-gradient(180deg, rgba(14,19,26,.96), rgba(14,19,26,.80));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
/* app icon -- generated */
.brand .mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background-image:url(data:image/png;base64,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);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 18px -6px rgba(0,0,0,.6);
}
.brand .txt{min-width:0}
.brand h1{font-size:21px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.brand small{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:1px}

.season-pick{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 12px;
}
.season-pick label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.season-pick select{
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:4px 8px; font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.03em;
}

main{flex:1; padding:18px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px); max-width:1180px; width:100%; margin:0 auto}

/* ---------- nav ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(18,24,32,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--tab-h); color:var(--ink-3); position:relative;
  transition:color .16s;
}
.tabbar button span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.tabbar button svg{width:21px;height:21px;stroke-width:1.9}
.tabbar button[aria-current="page"]{color:var(--heat)}
.tabbar button[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--heat); border-radius:0 0 3px 3px;
  box-shadow:0 0 12px var(--heat);
}
.sidenav{display:none}

/* "More" sheet */
.sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed; left:0;right:0;bottom:0; z-index:61;
  background:var(--surface); border-top:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:10px 14px calc(env(safe-area-inset-bottom) + 18px);
  transform:translateY(102%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.open{transform:translateY(0)}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--surface-3);margin:6px auto 14px}
.sheet a,.sheet button.sheet-item{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 12px; border-radius:var(--r); text-decoration:none;
  font-weight:600; letter-spacing:.01em;
}
.sheet button.sheet-item:active{background:var(--surface-2)}
.sheet button.sheet-item svg{width:20px;height:20px;color:var(--ink-3);stroke-width:1.9}
.sheet button.sheet-item[aria-current="page"]{background:var(--surface-2); color:var(--heat)}
.sheet button.sheet-item[aria-current="page"] svg{color:var(--heat)}

/* ---------- primitives ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  /* clip to the radius: a table header's square corners used to sit proud of it.
     Safe because popovers, toasts and modals all mount on <body>, not in here. */
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%);
}
.card > *{position:relative}
.card + .card{margin-top:14px}
.card-hd{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.card-hd h2,.card-hd h3{font-size:16px; text-transform:uppercase; letter-spacing:.07em}
.card-hd .sub{font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.card-hd .spacer{margin-left:auto}
.card-bd{padding:16px}
.card-bd.flush{padding:0}

.section-title{
  font-family:var(--f-display); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:26px 0 10px; display:flex; align-items:center; gap:10px;
}
.section-title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* The +/- marker is a real element with two bars, inserted only on titles that
   actually toggle — so it is never an affordance that does nothing. The vertical
   bar collapses into the horizontal one, turning the plus into a minus. */
.section-title[aria-expanded]{cursor:pointer;user-select:none}
.section-title[aria-expanded]:hover{color:var(--ink-2)}
.section-title[aria-expanded]:focus-visible{outline:2px solid var(--heat);outline-offset:3px;border-radius:4px}
.section-title[aria-expanded="false"]{color:var(--ink-2)}

/* Two real bars, not pseudo-elements: Chrome does not reliably restyle a
   pseudo when an ANCESTOR's attribute changes, which left the plus stuck as a
   minus. The state class lives on the marker itself. */
.sec-mark{position:relative;width:13px;height:13px;flex:none;display:block}
.sec-mark b{position:absolute;background:var(--heat);opacity:.85;border-radius:2px;
  transition:opacity .16s ease}
.sec-mark b:first-child{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.sec-mark b:last-child{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
.sec-mark.open b:last-child{display:none}
.section-title[aria-expanded]:hover .sec-mark b{opacity:1}

.sec-body[hidden]{display:none}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
}
.chip.heat{color:var(--heat);border-color:rgba(255,107,44,.35);background:rgba(255,107,44,.10)}
.chip.mint{color:var(--mint);border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.09)}
.chip.gold{color:var(--gold);border-color:rgba(245,196,81,.32);background:rgba(245,196,81,.10)}
.chip.violet{color:var(--violet);border-color:rgba(156,140,250,.32);background:rgba(156,140,250,.10)}
.chip.red{color:var(--red);border-color:rgba(255,77,94,.32);background:rgba(255,77,94,.10)}
/* podium places -- silver cool enough to read against gold, bronze warm but
   clear of --heat so it never looks like the minigame accent */
.chip.silver{color:#CBD5E1;border-color:rgba(203,213,225,.3);background:rgba(203,213,225,.09)}
.chip.bronze{color:#C98C4E;border-color:rgba(201,140,78,.34);background:rgba(201,140,78,.11)}
.chip.ghost{background:transparent}
.chip.plain{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:11.5px}

.pos-chip{
  display:inline-grid;place-items:center; width:26px;height:17px;border-radius:4px;
  font-family:var(--f-display);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:#080C10; flex:none;
}
.pos-QB{background:var(--qb)} .pos-RB{background:var(--rb)} .pos-WR{background:var(--wr)}
.pos-TE{background:var(--te)} .pos-K{background:var(--pk)}
.pos-none{background:var(--surface-3); color:var(--ink-3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2); font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:background .14s,border-color .14s;
}
.btn:active{background:var(--surface-3)}
.btn svg{width:15px;height:15px;stroke-width:2}
.btn.primary{background:var(--heat);border-color:var(--heat);color:#160800}
.btn.primary:active{background:#E85D22}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.4;pointer-events:none}
/* reads as an aside until you go for it */
.btn.danger{color:var(--red);border-color:rgba(255,77,94,.22)}
.btn.danger:hover{background:rgba(255,77,94,.12);border-color:rgba(255,77,94,.45)}
.btn.danger:active{background:rgba(255,77,94,.2)}

/* team identity dot — hue derived from team number */
.tname{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tname b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnum{
  font-family:var(--f-display);font-size:10px;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em; background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:1px 2px; flex:none;
  min-width:26px; text-align:center; box-sizing:border-box;   /* T1 and T10 align */
}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hero{display:flex;flex-direction:column;gap:14px}
.tile{
  --tint:255,255,255;
  background:
    linear-gradient(165deg, rgba(var(--tint),.17), rgba(var(--tint),.05) 44%, transparent 76%),
    linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; position:relative; overflow:hidden;
}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg, rgb(var(--tint)), rgba(var(--tint),.12));opacity:.85}
.tile::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 42%)}
.tile.bare{background:none;border:none;padding:0}
.tile.bare::before,.tile.bare::after{display:none}
.tile.accent{--tint:255,107,44}
.tile.mint{--tint:61,220,151}
.tile.gold{--tint:245,196,81}
.tile.violet{--tint:156,140,250}
.tile.red{--tint:255,77,94}
.tile:not(.accent):not(.mint):not(.gold):not(.violet):not(.red){--tint:132,166,214}
.tile .k{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tile .v{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1.05;margin-top:5px;letter-spacing:.005em}
.tile .m{font-size:11px;color:var(--ink-3);margin-top:3px}
.tile.accent .v{color:var(--heat)} .tile.mint .v{color:var(--mint)}
.tile.gold .v{color:var(--gold)} .tile.violet .v{color:var(--violet)}
.tile.red .v{color:var(--red)}

/* data rows */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:2px solid var(--line);
}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.row .val{font-family:var(--f-display);font-size:19px;font-weight:700;flex:none}

/* The empire header: pot and race are two halves of one card. The pot states
   the rule, the race shows who is near it, so they share a surface and a
   divider rather than being two cards with a gap between them. */
.empire-top{overflow:hidden}
.empire-top .pot-side{
  position:relative;overflow:hidden;text-align:center;
  padding:24px 16px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;justify-content:center;
}
.empire-top .pot-side::before{
  content:"";position:absolute;left:50%;top:-46%;transform:translateX(-50%);
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(156,140,250,.17),transparent 62%);
}
.empire-top .pot-side > *{position:relative}
.empire-top .race{padding:12px 0}

/* The pot's growth chart takes whatever height the race leaves, so the two
   halves finish together instead of the left one trailing off into a gap. */
.pot-growth{
  display:flex;gap:4px;justify-content:center;align-items:stretch;
  /* the rule text above wraps to two lines and was landing almost on the bars.
     Only the desktop column has slack to give -- stacked, the card is already
     snug and a big gap there would just look loose. */
  margin-top:22px;flex:1 1 auto;
  /* takes up slack, but capped: the pot plateaus once it is funded, so the flat
     grey tail would otherwise become the biggest thing on the card */
  min-height:62px;max-height:116px;
}
.pot-growth .col{
  flex:1;max-width:56px;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
}
.pot-growth .bar{width:100%;border-radius:3px;flex:none}
.pot-growth span{font-size:9.5px;color:var(--ink-3);font-weight:600;flex:none}
@media (min-width:900px){
  /* no align-items:start -- the columns stretch so the divider runs the full
     height of the card instead of stopping where the pot's content ends */
  .empire-top{display:grid;grid-template-columns:minmax(272px,336px) 1fr}
  .empire-top .pot-side{border-bottom:none;border-right:1px solid var(--line-soft)}
  .empire-top .pot-growth{margin-top:46px}
}

/* One line per manager, no rules between them -- ten of them read as a block. */
.race{display:flex;flex-direction:column}
.race-row{display:flex;align-items:center;gap:12px;padding:4px 16px}
.race-row .who{
  flex:none;width:76px;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.race-row.out .who{color:var(--ink-3);font-weight:500}
.race-row .meter{flex:1;height:10px}
.race-row .pts{
  flex:none;min-width:28px;text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--violet);
}
.race-row .pts.zero{color:var(--ink-3)}
/* Room for every crown the pot demands, filled or not, so an earned one always
   lands in the same column and the gap beside it is what is still to win. */
.race-row .ttl{
  flex:none;display:flex;align-items:center;gap:4px;
  width:calc(var(--slots,2) * 16px + (var(--slots,2) - 1) * 4px);
}
.race-row .ttl svg{width:16px;height:16px;stroke-width:2.1}
.race-row .ttl .on{color:var(--gold)}

/* meter */
.meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter > i{display:block;height:100%;border-radius:99px;background:var(--heat);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.meter.mint > i{background:var(--mint)} .meter.violet > i{background:linear-gradient(90deg,var(--violet),#C9BDFF)}
.meter.gold > i{background:var(--gold)}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt{font-size:13px; min-width:100%}
table.dt th{
  text-align:left;font-family:var(--f-display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--bg-2);z-index:1;
}
table.dt td{padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.dt tbody tr:last-child td{border-bottom:none}
/* Every body cell is opaque so the frozen first column can simply match its own
   row. Tints are a layer ON the base rather than a translucent replacement --
   a see-through sticky cell would let the scrolled columns show through it. */
table.dt tbody td{background:var(--surface)}
table.dt tbody tr.total td{
  border-top:1px solid var(--line);font-weight:700;
  background:linear-gradient(rgba(255,255,255,.022),rgba(255,255,255,.022)),var(--surface);
}
table.dt td.n,table.dt th.n{text-align:right;font-variant-numeric:tabular-nums}
table.dt td.sticky,table.dt th.sticky{
  position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line-soft);
}
table.dt th.sticky{background:var(--bg-2);z-index:3}
/* One width for every season column, so the surplus is shared evenly instead of
   going to whichever column happens to hold the widest figure. The label column
   takes width:1% -- with nowrap that collapses it to its longest name and hands
   the rest of the table to the columns that carry the data. */
/* width equalises the SURPLUS when the table is narrower than its container;
   min-width stops the columns being squeezed proportionally when it is wider,
   which is what let the "$150" column win again on a phone. With a floor, the
   table overflows instead and .tw scrolls it -- which is the intended behaviour
   there anyway. */
table.dt th.n{width:76px;min-width:76px}
table.dt th.sticky{width:1%}

/* empty state */
.empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.empty svg{width:34px;height:34px;stroke-width:1.4;color:var(--surface-3);margin-bottom:10px}
.empty p{margin:0 0 4px;font-weight:600;color:var(--ink-2);font-size:14px}
.empty small{font-size:12px;line-height:1.6;display:block;max-width:34ch;margin:0 auto}

/* banner */
.banner{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  background:rgba(255,107,44,.07);border:1px solid rgba(255,107,44,.26);font-size:12.5px;line-height:1.5;
}
.banner svg{width:17px;height:17px;color:var(--heat);flex:none;margin-top:1px;stroke-width:2}
.banner b{color:var(--heat)}

/* ---------- gauge (dashboard hero) ---------- */
.gauge-card{position:relative;overflow:hidden;padding:20px 16px 18px;text-align:center}
.gauge-card::before{
  content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,44,.16),transparent 62%);pointer-events:none;
}
.gauge{position:relative;width:230px;max-width:82vw;margin:0 auto;display:block}
.gauge-val{
  position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);text-align:center;pointer-events:none;
}
.gauge-val .big{font-family:var(--f-display);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.01em}
.gauge-val .lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;font-weight:700}
.gauge-legend{display:flex;justify-content:center;gap:18px;margin-top:2px;flex-wrap:wrap}
.gauge-legend div{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.gauge-legend i{width:8px;height:8px;border-radius:2px;display:block}

/* ---------- draft board ---------- */
.board{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 8px}
.board-grid{display:grid;gap:7px;padding:0 16px 4px;min-width:max-content}
.board-head{
  display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:flex-end;
  padding:8px 6px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);
}
.board-head .sl{font-family:var(--f-display);font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.1em}
.board-head .nm{font-size:11.5px;font-weight:700;white-space:nowrap}
.pick{
  width:132px;padding:8px 9px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;
}
.pick .no{font-family:var(--f-display);font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:.08em}
.pick .pl{font-size:12.5px;font-weight:600;line-height:1.25}
.pick .via{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--heat);display:flex;align-items:center;gap:4px;
}
.pick.traded{border-color:rgba(255,107,44,.34)}
.pick.traded::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--heat);
}
.pick .top{display:flex;align-items:center;gap:6px}
.pick.blank{background:repeating-linear-gradient(45deg,var(--surface) 0 6px,transparent 6px 12px);opacity:.5}

/* ---------- trades ---------- */
.trade{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.trade + .trade{margin-top:10px}
.trade-hd{display:flex;align-items:center;gap:9px;padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.trade-hd .d{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.trade-body{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft)}
.trade-side{background:var(--surface);padding:11px 13px}
.trade-side .who{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.trade-side .who b{font-size:13.5px}
.trade-side .who .arrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.trade-side ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.trade-side li{display:flex;align-items:center;gap:7px;font-size:13px}
.trade-side li .pk{color:var(--ink-2);font-style:italic}
.cond{padding:11px 13px;background:rgba(156,140,250,.06);border-top:1px solid var(--line-soft);font-size:12.5px;line-height:1.55}
.cond .lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:4px}
.cond .out{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);color:var(--ink-2)}

/* ---------- guillotine ---------- */
.guillo{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-radius:var(--r);overflow:hidden}
.guillo .g-row{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface)}
.guillo .g-row.out{background:var(--bg-2)}
.guillo .g-row.out .tname b{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;color:var(--ink-3)}
.guillo .wk{font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;flex:none}
.guillo .g-row.alive .wk{color:var(--mint);border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.08)}

/* ---------- forms / editor ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
/* a label that carries a live count: hint in the middle, count pinned right */
.field label.has-count{display:flex;align-items:baseline;gap:6px}
.lbl-count{
  margin-left:auto;flex:none;font-family:var(--f-display);font-size:11px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.lbl-count.full{color:var(--heat)}
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;font-size:15px; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--heat);box-shadow:0 0 0 3px rgba(255,107,44,.14)}
.field textarea{resize:vertical;min-height:66px;line-height:1.5}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .tr{width:38px;height:22px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line);
  position:relative;transition:background .18s;flex:none}
.toggle .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--ink-2);transition:transform .18s,background .18s}
.toggle input:checked + .tr{background:var(--heat);border-color:var(--heat)}
.toggle input:checked + .tr::after{transform:translateX(16px);background:#160800}

/* pill switcher */
.pills{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pills button{
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink-2);
}
.pills button[aria-pressed="true"]{background:var(--heat);border-color:var(--heat);color:#160800}

/* modal */
.modal-bd{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-bd.open{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(20px);transition:transform .24s cubic-bezier(.2,.8,.2,1);
  padding:0 0 calc(env(safe-area-inset-bottom) + 16px);
}
.modal-bd.open .modal{transform:translateY(0)}
.modal-hd{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line-soft);z-index:2}
.modal-hd h3{font-size:17px;text-transform:uppercase;letter-spacing:.06em}
.modal-bd2{padding:16px 18px}
.modal-ft{display:flex;gap:9px;padding:0 18px;margin-top:4px}
.modal-ft .btn{flex:1}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
  transform:translate(-50%,14px);z-index:90;
  background:var(--surface-3);border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;font-size:13px;font-weight:600;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--tab-h:0px}
  .app{flex-direction:row}
  .tabbar{display:none}
  .sidenav{
    display:flex;flex-direction:column;gap:2px;width:216px;flex:none;
    padding:16px 12px;border-right:1px solid var(--line-soft);
    position:sticky;top:0;height:100dvh;background:var(--bg-2);
  }
  .sidenav .brand{padding:6px 8px 20px}
  .sidenav button{
    display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
    font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:left;
  }
  .sidenav button svg{width:18px;height:18px;stroke-width:1.9;color:var(--ink-3)}
  .sidenav button:hover{background:var(--surface)}
  .sidenav button[aria-current="page"]{background:rgba(255,107,44,.12);color:var(--heat)}
  .sidenav button[aria-current="page"] svg{color:var(--heat)}
  .col{display:flex;flex-direction:column;flex:1;min-width:0}
  .topbar .brand{display:none}
  .topbar{justify-content:flex-end}
  main{padding:22px 28px 60px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:12px}
  .hero{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:14px;align-items:stretch}
  .hero .tiles{grid-template-columns:repeat(2,1fr)}
  .hero .gauge-card{display:flex;flex-direction:column;justify-content:center}
  .sidenav .brand small{white-space:nowrap;letter-spacing:.11em;font-size:9.5px}
  .sidenav .brand h1{font-size:19px}
  .trade-body{grid-template-columns:1fr 1fr}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .two .card + .card{margin-top:0}
  .modal-bd{align-items:center}
  .modal{border-radius:var(--r-xl);max-height:82dvh}
  .toast{bottom:26px}
}
@media (max-width:899px){ .sidenav{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }

/* ---------- rules ---------- */
.rules-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rules-meta{display:flex;align-items:flex-end;gap:12px;margin:4px 0 14px;flex-wrap:wrap}
.rules-title{font-size:26px;text-transform:uppercase;letter-spacing:.03em}

.rules-layout{display:block}
.toc{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:14px;overflow:hidden;
}
.toc-hd{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.toc-hd svg{width:15px;height:15px}
.toc ol{list-style:none;margin:0;padding:6px;counter-reset:toc;max-height:none;overflow:visible}
.toc li{counter-increment:toc}
.toc a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  text-decoration:none;font-size:13.5px;color:var(--ink-2);line-height:1.35;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--f-display);font-size:10.5px;font-weight:700;color:var(--ink-3);
  flex:none;width:18px;
}
.toc a span{flex:1;min-width:0}
.toc a:hover{background:var(--surface-2)}
.toc a.on{background:rgba(255,107,44,.12);color:var(--heat)}
.toc a.on::before{color:var(--heat)}
.toc-dot{
  flex:none;font-style:normal;font-size:10px;font-weight:700;
  min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  display:grid;place-items:center;
  background:rgba(255,107,44,.16);color:var(--heat);border:1px solid rgba(255,107,44,.3);
}

.rulebook{font-size:14px;line-height:1.65}
.rule-sec{scroll-margin-top:80px}
.rule-sec + .rule-sec{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft)}
.rule-sec h2{
  font-size:19px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
  display:flex;align-items:center;
}
.rule-sec h2 .edit-pencil{margin-left:7px}
.rule-sec > ul{list-style:none;margin:0;padding:0}
.rule-item{
  position:relative;padding:5px 0 5px 18px;scroll-margin-top:86px;
  color:var(--ink-2);
}
.rule-item::before{
  content:"";position:absolute;left:3px;top:13px;width:5px;height:5px;border-radius:50%;
  background:var(--surface-3);
}
.rule-item.d1{padding-left:38px} .rule-item.d1::before{left:23px;width:4px;height:4px}
.rule-item.d2{padding-left:58px} .rule-item.d2::before{left:43px;width:4px;height:4px;border-radius:1px}
.rule-item.d3{padding-left:78px} .rule-item.d3::before{left:63px;width:4px;height:4px;border-radius:1px}
.rule-item.d0{color:var(--ink)}
.rule-text{display:inline}

/* change marks */
.rule-item.mk-added,.rule-item.mk-changed{
  border-radius:6px;margin:2px 0;
}
.rule-item.mk-added{background:rgba(61,220,151,.07);box-shadow:inset 2px 0 0 var(--mint)}
.rule-item.mk-changed{background:rgba(255,107,44,.07);box-shadow:inset 2px 0 0 var(--heat)}
.rule-flag{
  display:inline-block;vertical-align:1px;margin-right:7px;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:1px 6px;border-radius:99px;
}
.rule-flag.mint{background:rgba(61,220,151,.16);color:var(--mint)}
.rule-flag.heat{background:rgba(255,107,44,.16);color:var(--heat)}
.rule-flag.red{background:rgba(255,77,94,.16);color:var(--red)}

ins{text-decoration:none;background:rgba(61,220,151,.18);color:#9BF0C8;border-radius:3px;padding:0 2px}
del{text-decoration:line-through;text-decoration-color:var(--red);background:rgba(255,77,94,.12);
  color:var(--ink-3);border-radius:3px;padding:0 2px}

.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%,20%{background:rgba(255,107,44,.22)}100%{background:transparent}}

.chg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.chg li{padding-left:12px;border-left:2px solid var(--line)}
.chg-sec{
  display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);text-decoration:none;margin-bottom:4px;
}
.chg-sec:hover{color:var(--heat)}
.chg-body{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

@media (min-width:900px){
  .rules-layout{display:grid;grid-template-columns:246px 1fr;gap:18px;align-items:start}
  .toc{position:sticky;top:80px;margin-bottom:0;max-height:calc(100dvh - 110px);display:flex;flex-direction:column}
  .toc ol{overflow-y:auto}
}
@media (max-width:899px){
  .toc ol{max-height:236px;overflow-y:auto}
}

/* ---------- accordions ---------- */
.acc-hd{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 16px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.acc-hd h3{font-family:var(--f-display);font-size:17px;text-transform:uppercase;letter-spacing:.06em}
.acc-hd.sub.first{border-top:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.acc-hd.sub{
  border-top:2px solid var(--line);border-radius:0;
  padding:11px 16px;font-size:13px;font-weight:600;color:var(--ink-2);background:none;
}
.acc-caret{transition:transform .18s;color:var(--ink-3);flex:none}
.acc-hd[aria-expanded="true"] .acc-caret{transform:rotate(90deg)}
.acc-hd:active{background:var(--surface-2)}
.acc-bd{display:none}
.card.acc.open > .acc-bd,.acc-bd.open{display:block}
.card.acc > .acc-bd{border-top:1px solid var(--line-soft)}

/* payout category lines */
.pay-line{border-bottom:2px solid var(--line)}
.pay-line:last-child{border-bottom:none}
.pay-hd{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 16px;
}
.pay-hd:disabled{opacity:.75;cursor:default}
.pay-hd .grow{flex:1;min-width:0}
.pay-hd .s{font-size:11.5px;color:var(--ink-3)}
.pay-val{font-family:var(--f-display);font-size:19px;font-weight:700;flex:none}
.pay-val.zero{color:var(--ink-3)}
/* fully paid out: same green the slate uses for a decided prize */
.pay-val.won{color:var(--mint)}
.pay-line .acc-caret{transition:transform .18s}
.pay-line.open .acc-caret{transform:rotate(90deg)}
.pay-rows{display:none;list-style:none;margin:0;padding:0 16px 12px 44px}
.pay-line.open .pay-rows{display:block}
.pay-rows li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line-soft);
}
.pay-rows li:first-child{border-top:none}
.pay-rows b{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink)}

/* buy-in rate row — sits directly under the year headers so every figure in
   this table is visible at once, no expanding required. */
table.dt tbody tr.rate-row td{
  background:linear-gradient(rgba(255,255,255,.028),rgba(255,255,255,.028)),var(--surface);
  border-bottom:1px solid var(--line);
  padding-top:9px;padding-bottom:9px;
}
table.dt tbody tr.rate-row td.sticky{
  font-family:var(--f-display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.rate-in{
  width:62px;text-align:right;background:none;border:0;border-bottom:1px solid transparent;
  border-radius:0;padding:1px 0 2px;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
}
.rate-in:hover{border-bottom-color:var(--line)}
.rate-in:focus{outline:none;border-bottom-color:var(--heat);color:var(--heat);box-shadow:none}

/* editable table cells */
.cell-in{
  width:66px;text-align:right;background:transparent;border:1px solid transparent;border-radius:6px;
  padding:4px 6px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-3);
  -moz-appearance:textfield;
}
.cell-in::-webkit-outer-spin-button,.cell-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell-in:hover{border-color:var(--line)}
.cell-in:focus{outline:none;background:var(--bg-2);border-color:var(--heat);
  box-shadow:0 0 0 3px rgba(255,107,44,.14);color:var(--ink)}
td.cell-full .cell-in{color:var(--mint);font-weight:600}
td.cell-part .cell-in{color:var(--gold);font-weight:600}
table.dt tbody tr.total.sub td{background:var(--surface);font-weight:500;border-top:none}

/* ---------- payout paid state ---------- */
.pay-rows li{display:flex;align-items:center;gap:12px}
.pay-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-rows b{flex:none;min-width:56px;text-align:right}
.paid-btn{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  transition:background .14s,color .14s,border-color .14s;
}
.paid-btn svg{width:12px;height:12px;stroke-width:2.6}
.paid-btn:hover{border-color:var(--ink-3);color:var(--ink-2)}
.paid-btn.on{background:rgba(61,220,151,.12);border-color:rgba(61,220,151,.35);color:var(--mint)}
.paid-tag{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);
}
.paid-tag.on{color:var(--mint);border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.09)}
.dot-owed{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;margin-right:2px;
  box-shadow:0 0 7px -1px var(--red);
}
.owed-flag{color:var(--gold);font-weight:700;margin-left:3px}

/* ---------- the season's minigame money ---------- */
.money .card-hd{gap:10px}
.money .card-hd .grow{flex:1;min-width:0}
.money .card-hd h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The numbers and the bar share one line; the bar drops below them only when
   there is genuinely no room for it. Everything aligns to the TOP so the slash
   and the bar sit on the numbers' line, not on the middle of the taller
   number+label block. */
.mb-top{display:flex;align-items:flex-start;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.mb-stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.mb-fig{font-family:var(--f-display);font-size:29px;font-weight:700;line-height:1}
/* money already in someone's hands reads as money in */
.mb-fig.won{color:var(--mint)}
.mb-div{font-family:var(--f-display);font-size:29px;font-weight:400;line-height:1;color:var(--ink-3)}
.mb-lbl{
  font-family:var(--f-display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
/* part-to-whole against a cap: the empty track is the money still free */
.mb-track{
  display:flex;gap:2px;height:18px;border-radius:99px;overflow:hidden;
  background:var(--surface-3);flex:1 1 128px;margin-left:12px;
  margin-top:5.5px;   /* centred on the 29px number line: (29 - 18) / 2 */
}
/* one block per section; inside it, no gap — the shade change is the boundary */
.mb-part{display:flex;height:100%;min-width:4px}
.mb-part > i{display:block;height:100%}
.mb-pre{background:var(--mg-pre)} .mb-pre.dim{background:var(--mg-pre-dim)}
.mb-week{background:var(--mg-week)} .mb-week.dim{background:var(--mg-week-dim)}
.mb-post{background:var(--mg-post)} .mb-post.dim{background:var(--mg-post-dim)}
.mb-guil{background:var(--mg-guil)} .mb-guil.dim{background:var(--mg-guil-dim)}

/* Four sections, so 2x2 or 4-across and never an orphaned third column. Each
   pair is centred in its own share of the line rather than ragged-left.
   Keyed off the CARD's width, not the viewport: the sidenav appears at 900px and
   takes width a viewport query cannot see, which would crush the labels. */
.money .card-bd{container-type:inline-size}
.mb-legend{
  list-style:none;margin:15px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 26px;
}
@container (min-width:660px){ .mb-legend{grid-template-columns:repeat(4,1fr)} }
.mb-legend li{
  display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;min-width:0;
  padding:5px 0;border-top:1px solid var(--line-soft);
}
.mb-legend li.nil{opacity:.45}
/* the swatch carries the series colour, so it must out-specify the shared size rule */
.mb-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.mb-legend span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the amount sits against its own label, not floated to the far edge where it
   reads as belonging to the next column along */
.mb-legend b{font-family:var(--f-display);font-size:16px;font-weight:700}


/* adding a game is its own action, sitting under that section's card */
.mg-add{margin-top:10px}

/* ---------- minigame rows ---------- */
.mg-list{display:flex;flex-direction:column}
.mg{border-bottom:2px solid var(--line)}
.mg:last-child{border-bottom:none}
/* fade the row's content, never the pencil — a blank week is exactly the one
   you most need to be able to click into */
.mg.quiet .mg-hd,.mg.quiet .mg-bd{opacity:.42}
/* One row per game. max-content on the right-hand tracks so the name and its
   summary absorb any squeeze rather than the winner being shaved to an initial. */
.mg-hd{
  display:grid;width:100%;text-align:left;padding:9px 14px;min-height:42px;
  /* main shrink-wraps so the pencil hugs the end of the summary; the bare 1fr
     column after it is the empty gap that pushes winner and prize to the right */
  grid-template-columns:auto minmax(0,auto) max-content 1fr max-content max-content max-content;
  grid-template-areas:"wk main pen . win prize chev";
  align-items:center;column-gap:10px;
}
.mg-hd[role]{cursor:pointer}
.mg-wk{grid-area:wk}
.mg-main{grid-area:main;display:flex;align-items:baseline;gap:8px;min-width:0}
.edit-pencil{grid-area:pen}
.mg-win{grid-area:win}
.mg-prize{grid-area:prize}
.mg-hd > .acc-caret,.mg-nochev{grid-area:chev}
.mg-nochev{width:18px}
.mg-hd .chip{grid-area:win;justify-self:end}
.mg-hd[role]:active{background:var(--surface-2)}
.mg-hd[role]:focus-visible{outline:2px solid var(--heat);outline-offset:-2px}
.mg .acc-caret{transition:transform .18s;color:var(--ink-3)}
.mg.open .acc-caret{transform:rotate(90deg)}

.mg-wk{
  font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.09em;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:2px 5px;flex:none;min-width:38px;text-align:center;
}
.mg-title{
  font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:.005em;
  flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mg-title.unset{font-size:13px;color:var(--ink-3);font-weight:500}
/* shrinks twice as fast as the name, so a long summary truncates first */
.mg-sum{
  flex:0 2 auto;min-width:0;
  font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mg-sum::before{content:'\2022';margin-right:8px;color:var(--line)}
.mg-win{
  max-width:104px;font-size:13px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mg-win.none{color:var(--ink-3)}
.mg-prize{
  min-width:44px;text-align:right;
  font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink-3);
}
/* decided: the money has a name on it, so it reads as money out like the card above */
.mg-prize.won{color:var(--mint)}

.mg-bd{display:none;padding:0 14px 13px 62px}
.mg.open .mg-bd{display:block}
.mg-rules{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.mg-places{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* one line: WINNER  manager  what won it */
.mg-places li{
  display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:13px;
  border-top:1px solid var(--line-soft);
}
.mg-places li:first-child{border-top:none}
.mg-places .pl{
  font-family:var(--f-display);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);flex:none;min-width:58px;
}
.mg-places .who{flex:none;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the note gives up room first — the manager and the money always stay whole */
.mg-places .val{
  flex:1 1 0;min-width:0;font-size:12px;color:var(--ink-3);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mg-edit{margin-top:11px}

/* Editing lives on the thing itself: a pencil that surfaces when you hover its
   parent, so the affordance is where the thing is rather than a button buried
   somewhere below it. Touch devices have no hover, so there it stays visible. */
.edit-pencil{
  flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:var(--r-sm);color:var(--ink-3);
}
.edit-pencil svg{width:15px;height:15px}
.edit-pencil:hover,.edit-pencil:focus-visible{color:var(--heat)}
@media (hover:hover){
  .edit-pencil{opacity:0;transition:opacity .14s}
  /* whatever holds it reveals it -- no per-container selector to remember */
  *:hover > .edit-pencil,.edit-pencil:focus-visible{opacity:1}
}


@media (max-width:420px){
  .mg-bd{padding-left:14px}
  .mg-win{max-width:88px}
  /* no room for it alongside a winner and a prize — it is in the detail anyway */
  .mg-sum{display:none}
  .mg-places .pl{min-width:52px}
}

/* ---------- guillotine ---------- */
/* Collapsed it is a single line, like a minigame row; the weeks inside then
   open one at a time. */
.guil .card-hd{padding:0;gap:0}
.guil-toggle{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;
  text-align:left;padding:14px 16px;cursor:pointer;
}
.guil-toggle .gap{flex:1;min-width:0}
.guil-toggle:focus-visible{outline:2px solid var(--heat);outline-offset:-2px}
/* name and its one-line summary share a line, exactly like a minigame row */
.guil-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.guil-main h3{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guil-toggle .chip{flex:none}
.guil .acc-caret{transition:transform .18s;color:var(--ink-3);flex:none}
.guil.open > .card-hd .acc-caret{transform:rotate(90deg)}
.guil-bd{display:none}
.guil.open .guil-bd{display:block}
/* nothing below it to divide from, so the header is the whole card */
.guil:not(.open) .card-hd{border-bottom:none;border-radius:var(--r-lg)}

/* the pool: who is still in, who has gone */
.guil-pool{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.gp{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12px;font-weight:600;padding:4px 9px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
}
.gp .wk{font-family:var(--f-display);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3)}
.gp svg{width:13px;height:13px}
/* chopped: greyed back, with a red line through the name */
.gp.out{
  background:transparent;border-color:rgba(255,77,94,.2);color:var(--ink-3);font-weight:500;
  text-decoration:line-through;text-decoration-color:rgba(255,77,94,.7);
}
.gp.win{color:var(--gold);border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.1)}

.guil-weeks{display:flex;flex-direction:column}
.gw{border-bottom:2px solid var(--line)}
.gw:last-child{border-bottom:none}
.gw-hd{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 16px}
.gw-hd .wk{font-family:var(--f-display);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;flex:none;min-width:34px;text-align:center}
.gw-hd .grow{flex:1;min-width:0}
.gw .acc-caret{transition:transform .18s}
.gw.open .acc-caret{transform:rotate(90deg)}
.gw-out{font-size:13.5px;font-weight:600}
.gw-win{font-size:11.5px;color:var(--gold);display:flex;align-items:center;gap:5px;margin-top:3px}
.gw-win svg{width:13px;height:13px}
.gw-wait{font-size:13px;color:var(--ink-3)}
.gw-score{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink-2);flex:none}
.gw-bd{display:none}
.gw.open .gw-bd{display:block}
.gw-scores{list-style:none;margin:0;padding:2px 16px 12px 44px}
.gw-scores li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;
  border-top:1px solid var(--line-soft)}
.gw-scores li:first-child{border-top:none}
.gw-scores .rank{font-family:var(--f-display);font-size:10.5px;font-weight:700;color:var(--ink-3);
  width:16px;flex:none}
.gw-scores .who{flex:1;min-width:0}
.gw-scores b{font-family:var(--f-display);font-size:14px;font-weight:700;flex:none}
.gw-scores li.out .who b{color:var(--red)}
.gw-scores li.out b{color:var(--red)}
.gw-scores li.out .rank{color:var(--red)}
.gw-force{padding:0 16px 13px 44px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gw-force label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.gw-force select{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 8px;font-size:12.5px}
.carry{font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px;white-space:nowrap}

/* ---------- info popover ---------- */
.info{
  display:inline-grid;place-items:center;width:15px;height:15px;flex:none;
  border-radius:50%;border:1px solid var(--line);background:var(--surface-2);
  font-family:var(--f-body);font-size:9.5px;font-weight:700;font-style:italic;
  line-height:1;color:var(--ink-3);cursor:pointer;vertical-align:middle;
  margin-left:5px;letter-spacing:0;text-transform:none;
  transition:color .14s,border-color .14s,background .14s;
}
.info:hover,.info:focus-visible{color:var(--heat);border-color:rgba(255,107,44,.45);
  background:rgba(255,107,44,.10);outline:none}
.info-pop{
  position:absolute;z-index:80;
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  box-shadow:var(--shadow);pointer-events:none;
  opacity:0;transform:translateY(-3px);transition:opacity .14s,transform .14s;
  text-align:left;font-weight:400;letter-spacing:0;text-transform:none;
}
.info-pop.show{opacity:1;transform:translateY(0)}

/* ---------- connection status ---------- */
.conn{display:flex;align-items:flex-start;gap:11px}
.conn-dot{
  width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;
}
.conn-dot.on{background:var(--mint);box-shadow:0 0 8px -1px var(--mint)}
.conn-dot.off{background:var(--gold);box-shadow:0 0 8px -1px var(--gold)}
.conn-main{font-size:13.5px;font-weight:600}
.conn-sub{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:2px}