/* ---------------------------------------------------------------------------------------
   FINE LEG XI, under the lights.

   IPL's own brand language: a deep floodlit blue, a trophy gold, a flame-orange-red for
   emphasis. Heavy condensed uppercase for headlines, a circular crest, a rig of floodlights
   in the corner, and a stat/step footer read in mono figures -- broadcast graphics rather
   than a printed page.
--------------------------------------------------------------------------------------- */
:root{
  --bg:#060d1f; --bg-2:#0a1730;
  --panel:#0d1c3a; --panel-2:#12274a; --panel-3:#17305a;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.24);
  --ink:#f3f6fb; --ink-2:#aebedb; --ink-3:#6c7fa3;
  --gold:#f5b83d; --gold-2:#ffd873;
  --red:#e2472e; --red-2:#ff6a4d;
  --green:#33d19a;
  /* Named for what they are, not decorative -- the Orange Cap and Purple Cap are the
     IPL's own real season-long individual awards, and cricket fans read those colours
     as those awards on sight. */
  --cap-orange:#e8823a; --cap-purple:#a06bdb;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* The single biggest thing wrong with the old screens, measured rather than felt: the
     largest text on the rooms page was a 16px input and its own title was 10px -- a
     top-to-bottom type ratio of 1.6:1, so every element whispered at the same volume and
     nothing could lead. A display face used BIG is what buys hierarchy; --display exists
     to be used at 40px and up, never at label size. */
  --display:"Anton","Archivo Black",Impact,var(--sans);
  /* Three accents, each with exactly one job, so colour carries meaning instead of
     decoration: gold = brand and selected state, mint = live/counts/numerals, hot = the
     one primary action on a screen. A fourth accent would mean none of them signals. */
  --mint:#3ddc97; --hot:#ff4a35;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* The stadium photo is GONE, and that is the point rather than a saving. Scrimmed to
     ~90% to keep text legible it contributed no readable detail, only a muddy mid-tone
     that dragged every panel toward the same value and stole the contrast flat colour
     needs to hit hard. Two wide, very dark radial washes give depth without competing;
     everything punchy on screen is now type and accent, not wallpaper. */
  background-image:
    radial-gradient(1200px 620px at 78% -12%, rgba(245,184,61,.10), transparent 62%),
    radial-gradient(1000px 560px at 8% 4%, rgba(51,160,209,.07), transparent 62%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
}
.sheet{max-width:1180px;margin:0 auto;padding:0 26px 100px;position:relative}

/* --- the nav: one bar on every page, written from web/partials/nav.html by tools.shell ---
   Before it the modes were reachable only from the home page, and every page carried its
   own copy of a masthead. Sticky, so the way out of any screen is always one tap away. */
.topnav{position:sticky;top:0;z-index:40;background:rgba(6,13,31,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav-in{max-width:1180px;margin:0 auto;padding:0 26px;height:64px;
  display:flex;align-items:center;gap:26px}
.topnav .brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;
  color:var(--ink);font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.topnav .brand img{width:30px;height:32px;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(245,184,61,.3))}
.topnav .brand b{color:var(--gold);font-weight:800}
.topnav-links{display:flex;gap:2px}
.topnav-links a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:650;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.topnav-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.topnav-links a.on{color:var(--ink);background:rgba(255,255,255,.06);
  box-shadow:inset 0 -2px 0 var(--gold)}
.topnav-r{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.topnav #authArea{display:flex;align-items:center;gap:10px}
@media (max-width:860px){
  /* The links move to their own scrolling row rather than behind a menu button: six
     short words fit a phone's width almost exactly, and a hidden menu is one tap more on
     every single navigation. */
  .topnav-in{flex-wrap:wrap;height:auto;padding:10px 16px 0;gap:10px 14px}
  .topnav-links{order:3;width:calc(100% + 32px);margin:0 -16px;padding:0 10px 6px;
    overflow-x:auto;scrollbar-width:none}
  .topnav-links::-webkit-scrollbar{display:none}
  .topnav-links a{padding:8px 10px}
  .topnav .brand span{font-size:14px}
  .topnav .auth-cta{padding:8px 14px}
  .topnav .auth-cta-sub{display:none}
  .topnav .install-pill{padding:7px 11px}
}
@media (max-width:480px){
  /* Logo, install and sign-in must share one row; the emblem alone says which site. */
  .topnav .brand span{display:none}
}

/* --- opening spread --- */
.spread{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding:52px 0 34px;
  align-items:center;position:relative;z-index:1}
.standfirst{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;font-weight:600}
.headline{font-size:clamp(34px,4.6vw,54px);line-height:1.05;margin:0 0 22px;font-weight:800;
  letter-spacing:-.5px;text-transform:uppercase}
.headline i{font-style:normal;color:var(--gold)}
.deck{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 30px;max-width:48ch}
.deck .drop{color:var(--gold);font-weight:700}

.actions{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.act{font-family:var(--sans);font-size:13.5px;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;padding:15px 26px;border-radius:8px;background:var(--panel-2);
  border:1px solid var(--line-strong);color:var(--ink);transition:border-color .15s,background .15s}
.act:hover{border-color:var(--gold);background:var(--panel-3)}
.act.lead{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1204;
  border:1px solid var(--gold);box-shadow:0 10px 26px -12px rgba(245,184,61,.55)}
.act.lead:hover{filter:brightness(1.06)}
.act:disabled{opacity:.4;cursor:not-allowed}
/* The two alternative entry points (a room, the daily) sit under the lead CTA rather than
   beside it -- three equal-weight buttons in one row read as three equally valid front
   doors, where "begin a draft" is meant to be the obvious one and the other two a
   secondary offer once it's been seen. */
.actions.minor-row{margin-top:10px;align-items:center;gap:10px}
.minor-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.act.minor{padding:9px 16px;font-size:11.5px;background:none;border-color:var(--line)}
.act.minor:hover{border-color:var(--gold);background:var(--panel-2)}
/* a screen mid network/engine call: the whole thing stops responding to clicks and dims
   slightly, so a multi-second wait (a full-tournament skip is ~3s, A63) reads as "working"
   rather than as the click having done nothing */
section.busy-wait{pointer-events:none;opacity:.6;transition:opacity .15s}

.colophon{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.stat{display:flex;align-items:center;gap:9px}
.stat .ico{width:20px;height:20px;flex:none;color:var(--gold)}
.stat .ico svg{width:100%;height:100%}
.stat .ico path,.stat .ico circle,.stat .ico rect{stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.stat b{font-family:var(--mono);font-size:18px;color:var(--ink);font-weight:700;display:block;line-height:1}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}

/* the field: a floodlit ground, glowing rather than engraved */
.field{position:relative;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(51,160,209,.14), rgba(5,11,26,.4) 72%);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(245,184,61,.05), inset 0 0 60px rgba(245,184,61,.05)}
.field::before{content:"";position:absolute;inset:9%;border:1px dashed var(--line-strong);border-radius:50%}
.wicket{width:9%;height:30%;border-radius:2px;position:relative;
  background:linear-gradient(180deg,rgba(245,184,61,.30),rgba(245,184,61,.12));
  border:1px solid rgba(245,184,61,.4)}
.wicket::before,.wicket::after{content:"";position:absolute;left:20%;right:20%;height:2px;
  background:rgba(243,246,251,.55)}
.wicket::before{top:10%} .wicket::after{bottom:10%}
.pos{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pos::before{content:"";display:block;width:5px;height:5px;background:var(--gold);border-radius:50%;
  margin:0 auto 5px;box-shadow:0 0 8px rgba(245,184,61,.7)}
.field-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-top:16px}

/* --- how it works: numbered, iconed steps --- */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 0;
  position:relative;z-index:1}
.method section{border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px}
.method h3{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  margin:0;color:var(--ink);display:flex;align-items:center;gap:10px;font-weight:750}
.method h3 span{font-family:var(--mono);color:var(--gold);font-size:14px}
.method .mico{width:22px;height:22px;flex:none;color:var(--gold)}
.method .mico svg{width:100%;height:100%}
.method .mico path,.method .mico circle{stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.method .mico.ball circle{fill:currentColor}
.method .mico.ball path{stroke:var(--panel)}
.method .mico.bat path{fill:currentColor;stroke:none}
.method p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* --- the draft: three panels --- */
.folio{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:16px;padding-top:30px;
  position:relative;z-index:1}
/* Each panel is capped to a viewport-relative height and scrolls its own list
   internally, rather than growing to fit a squad of twenty-odd names (most of them
   blocked and greyed, but still shown per A64) and pushing the whole page down past
   several screens. The header above a list and the footer below it (Play the season,
   Leave room) stay in view; only the list in between scrolls -- and on a small phone
   screen this is what keeps the draft usable at all without constant scrolling. */
.col{padding:0;border:1px solid var(--line);background:var(--panel);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 200px)}
/* -webkit-overflow-scrolling:touch matters more than the max-height rule above on an
   actual phone: without it, an overflow-y:auto div can simply refuse to respond to a
   touch-drag at all in iOS Safari and many in-app browsers (a shared link opened from
   Messages/WhatsApp/Instagram), rather than merely scrolling without momentum -- and a
   desktop-driven or CDP-automated check (mouse wheel, synthetic scroll events) never
   exercises the touch path, so this class of bug hides from every test that isn't a
   real touch gesture on a real phone. Applied to every genuinely-scrolling container
   in the sheet, not just this one. */
.col-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.col-head{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 18px;border-bottom:1px solid var(--line);margin-bottom:2px;
  display:flex;justify-content:space-between;align-items:baseline;background:var(--panel-2)}
.col-head em{font-style:normal;color:var(--gold);font-family:var(--mono);letter-spacing:0;font-weight:600}
.col-head-toggle{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:none;
  padding:4px 10px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel-3);
  color:var(--ink-2);cursor:pointer}
.col-head-toggle:hover{border-color:var(--gold);color:var(--gold)}

.fixture{padding:18px 18px 16px}
.fixture .yr{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.12em;font-weight:600}
.fixture .club{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.3px;margin-top:3px}
.reroll-row{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.act.reroll{font-size:11px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px}
#rerollCount{font-family:var(--mono);color:var(--ink-3);font-weight:600;font-size:11px}

.entry{display:grid;grid-template-columns:1fr auto 2.6em;align-items:baseline;column-gap:10px;
  padding:11px 18px;border-bottom:1px solid var(--line);transition:background .12s}
.entry:hover{background:var(--panel-2)}
.entry .nm{font-size:15px;min-width:0;display:flex;align-items:center}
.ic{display:inline-flex;width:16px;height:16px;vertical-align:-3px;margin-right:8px;flex:none}
.ic svg{width:100%;height:100%;display:block}
.ic path,.ic circle,.ic line,.ic rect{stroke:var(--ink-2);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ic.ball circle{fill:var(--red);stroke:var(--red)}
.ic.ball path{stroke:var(--panel);stroke-width:1.2}
.ic.all circle{fill:var(--gold)}
.ic.glove path{stroke:var(--gold-2)}
/* [A77] The secondary "also a proven keeper" badge -- smaller and dimmer than the
   primary icon it sits beside, so it reads as a footnote rather than a second role. */
.ic.glove-badge{width:11px;height:11px;margin-right:6px;margin-left:-3px;opacity:.7}
.ic.glove-badge path{stroke:var(--gold-2)}
.entry.off .ic path,.entry.off .ic circle{stroke:var(--ink-3)}
.entry.off .ic.ball circle{fill:var(--ink-3);stroke:var(--ink-3)}
.entry .nm .flag{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);
  margin-right:8px;vertical-align:middle;box-shadow:0 0 6px rgba(245,184,61,.7)}
.entry .nm .flag.home{background:transparent;border:1px solid var(--ink-3);box-shadow:none}
.entry .fig{font-family:var(--mono);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--green);min-width:2.4em;text-align:right}
.picks{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:5px;padding:4px 9px;color:var(--ink-2);
  background:var(--panel-3)}
.pk:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,184,61,.1)}
/* [A73] one "take" button per entry -- taking him already IS placing him, straight into
   a batting position (or Impact). If he is only eligible for one open slot right now the
   pick settles immediately; otherwise the order sheet below asks which one. */
.take{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--gold);border-radius:5px;padding:5px 11px;color:var(--gold);
  background:rgba(245,184,61,.08)}
.take:hover{background:var(--gold);color:#1a1204}
/* a candidate with more than one open eligible slot: waiting on a row click above */
.entry.pending{background:rgba(245,184,61,.09);box-shadow:inset 3px 0 0 var(--gold)}
.entry.pending .take{background:var(--gold);color:#1a1204}
.entry.off{display:block;color:var(--ink-3);padding:9px 18px}
.entry.off .nm{color:var(--ink-3)}
.entry.off .fig{display:none}
.entry.off .nm{display:block}
.why{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  color:var(--ink-3);font-style:italic;padding-left:24px;margin-top:2px}
.roster-head{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 18px 6px;border-bottom:1px solid var(--line)}

/* the squad sheet */
.tally{display:flex;align-items:baseline;gap:12px;padding:18px 18px 10px}
.tally .n{font-family:var(--mono);font-size:36px;font-variant-numeric:tabular-nums;line-height:1;
  color:var(--gold);font-weight:700}
.tally .of{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.7}
.gauge{height:3px;background:var(--panel-3);margin:0 18px 14px;border-radius:2px}
.gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .35s;border-radius:2px}
/* the room draft's per-pick countdown: ticks locally once a second (tickRoomTimer),
   so the bar gets a slower, linear transition to sweep smoothly between whole seconds
   instead of the snap the shared .gauge default is tuned for. */
.timer-gauge{margin-top:-4px}
#roomTimerBar{transition:width 1s linear,background .3s}
.tally .n.urgent{color:var(--red-2);animation:timerPulse 1s ease-in-out infinite}
.timer-gauge.urgent i{background:linear-gradient(90deg,var(--red),var(--red-2))}
@keyframes timerPulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}
/* The room's reconnecting notice. Deliberately quiet -- it reports a condition that
   usually clears itself within a poll or two, and it appears above a draft in progress,
   so it must not read as an error the player has to act on. */
.rejoin-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:22px 0 0;padding:14px 18px;border:1px solid var(--gold);
  border-radius:10px;background:color-mix(in srgb,var(--gold) 10%,transparent)}
.rejoin-card p{margin:0;font-size:15px}
.rejoin-card .act{margin:0}
.room-offline{margin:0 0 12px;padding:8px 14px;border:1px solid var(--red);
  border-radius:4px;background:rgba(226,71,46,.09);color:var(--red-2);
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.line{display:grid;grid-template-columns:96px minmax(0,1.7fr) minmax(0,1fr) 2.4em;
  align-items:baseline;column-gap:12px;padding:9px 18px;
  border-bottom:1px solid var(--line);font-size:14.5px}
.line .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.line .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-3);font-style:italic}
.line.set .who{color:var(--ink);font-style:normal;font-weight:600}
.line .fig{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;
  color:var(--green);text-align:right;font-weight:600}
.line .club{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.02em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.line.active-turn{background:rgba(245,184,61,.09);box-shadow:inset 3px 0 0 var(--gold)}
.line.active-turn .role{color:var(--gold);font-weight:700}

.verdict-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;padding:14px 18px;
  border-top:1px solid var(--line);color:var(--green);font-weight:600}
.verdict-note.no{color:var(--red-2)}
.note{font-size:14px;color:var(--ink-3);font-style:italic;padding:16px 18px}

/* [A72] the order sheet: eleven numbered batting positions plus one Impact row. Filled
   rows show who bats there; an empty row is a target while a squad member is selected. */
.orderline{display:grid;grid-template-columns:28px minmax(0,1fr) 2.4em;align-items:center;
  column-gap:10px;padding:8px 18px;border-bottom:1px solid var(--line);font-size:14px;
  cursor:pointer;transition:background .12s,opacity .12s}
.orderline:hover{background:var(--panel-2)}
.orderline .num{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center}
.orderline.impactrow .num{color:var(--gold);font-size:9px;letter-spacing:.05em}
.orderline .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-3);font-style:italic}
.orderline.filled .who{color:var(--ink);font-style:normal;font-weight:600}
.orderline .fig{font-family:var(--mono);font-size:13px;color:var(--green);text-align:right;
  font-weight:600}
/* while a squad member is selected: his eligible rows glow gold and invite a click;
   everything else dims, so the choice reads as a choice rather than a guess */
.orderline.eligible{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(245,184,61,.35)}
.orderline.ineligible{opacity:.35;cursor:not-allowed}
.orderline.ineligible:hover{background:none}
.orderline.reposition-selected{background:rgba(245,184,61,.09);box-shadow:inset 3px 0 0 var(--gold)}

/* the legality checklist -- one line per rule, a plain sentence from the server rather
   than a client-side re-derivation of what "legal" means */
.legality{padding:6px 18px 16px}
.legality .ok{font-family:var(--mono);font-size:12px;color:var(--green);padding:10px 0;
  font-weight:600}
.legality .bad{font-family:var(--mono);font-size:11.5px;color:var(--red-2);padding:5px 0;
  line-height:1.5}
.legality .bad::before{content:"· "}

.foot-actions{display:flex;gap:12px;align-items:center;padding:18px;flex-wrap:wrap}
.stamp{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  border:1px solid var(--line-strong);padding:7px 12px;border-radius:6px}

/* --- the report --- */
.report{padding:50px 0 14px;text-align:center;position:relative;z-index:1}
.report .over-line{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-3)}
.report .call{font-size:16px;letter-spacing:.24em;text-transform:uppercase;font-family:var(--sans);
  font-weight:800;margin:16px 0 8px;color:var(--red-2)}
.report .call.won{color:var(--gold)}
.report .figures{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;
  font-size:clamp(32px,6.8vw,64px);letter-spacing:-1px;line-height:1.1;white-space:nowrap;
  color:var(--ink)}
.report .margin{font-size:16.5px;font-style:italic;color:var(--ink-2);margin-top:10px}
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}

/* the room match/result screens: toss/impact/advance panels and the completed-match
   banners all reuse .report's own centered layout -- just less top padding, since they
   sit at the top of #roomResult rather than deep in a long page the way solo's own
   .report usage does -- plus a handful of named layout helpers in place of one-off
   inline styles, so a later spacing tweak is one line here instead of a hunt through
   template strings scattered across several JS functions. */
.report.compact{padding:0 0 20px}
.room-actions{justify-content:center;padding-top:14px}
.room-gap{margin-top:16px}
.room-banner{text-align:center;margin:16px 0}
.ledger div{padding:18px 10px;border:1px solid var(--line);background:var(--panel);border-radius:10px}
.ledger b{display:block;font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;
  color:var(--gold);font-weight:700}
.ledger span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}

.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.room-table{grid-template-columns:1fr}
.cards2 > div{padding:0 18px 14px;border:1px solid var(--line);background:var(--panel);
  border-radius:10px}

/* the over-by-over reveal's motion -- a score pop, a wicket flash, and each over's bar
   growing in (the scoreboard itself is styled further down, under `.sb`). Re-triggering one
   on a REPEAT tick (two good overs back to back) needs the element reflowed between
   removing and re-adding the class, not just toggling it -- see renderOverStep's own
   comment on this, it's the standard first-time gotcha with CSS keyframe replay. */
@keyframes scorePop{
  0%{transform:scale(1)}
  35%{transform:scale(1.1);color:var(--gold-2)}
  100%{transform:scale(1)}
}
@keyframes wicketFlash{
  0%{color:var(--ink)}
  25%{color:var(--red-2)}
  65%{color:var(--red-2)}
  100%{color:var(--ink)}
}
@keyframes chipIn{
  0%{transform:translateY(4px) scale(.85);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes barIn{
  0%{transform:scaleY(0)}
  100%{transform:scaleY(1)}
}
#overScoreLine{display:inline-block}
#overScoreLine.score-pop{animation:scorePop .45s ease-out}
#overScoreLine.wicket-flash{animation:wicketFlash .6s ease-out}

table{width:100%;border-collapse:collapse;font-size:14px}
caption{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-align:left;
  padding:16px 0 8px;color:var(--ink)}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:9px 0 6px;font-weight:600;border-bottom:1px solid var(--line)}
th.n,td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td{padding:6px 0;border-bottom:1px solid var(--line)}
tr.tail td{color:var(--ink-3);font-style:italic}

.season{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.season > div{padding:0 18px 14px;border:1px solid var(--line);background:var(--panel);
  border-radius:10px;position:relative;overflow:hidden}
tr.you td{font-weight:700;color:var(--ink)}
tr.you td:first-child{box-shadow:inset 3px 0 0 var(--gold);padding-left:9px}
tr.cut td{border-bottom:1.5px solid var(--gold)}

/* --- panel-head: a bolder, two-line masthead for the season/room result screens' two
   main panels (league table, your matches) -- .col-head's own small utility-bar label
   is reused across many unrelated screens (the deal panel, the squad panel), so this is
   a new, scoped treatment rather than a change to it. Mirrors a broadcast graphics
   package's own title-plus-stat-block convention: a bold section name, a number that
   actually matters set apart in gold, and what it means underneath in small caps. */
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:20px 18px 14px;margin:0 -18px 6px;border-bottom:2px solid rgba(245,184,61,.4);
  background:linear-gradient(180deg,rgba(245,184,61,.07),transparent);position:relative;z-index:1}
.panel-head h3{margin:0;font-family:var(--sans);font-size:15px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.panel-head .stat{text-align:right;line-height:1.35}
.panel-head .stat b{display:block;font-family:var(--mono);color:var(--gold-2);
  font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.panel-head .stat span{display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.panel-glow{position:absolute;top:-50px;right:-50px;width:190px;height:190px;
  background:radial-gradient(circle,rgba(245,184,61,.15),transparent 70%);
  pointer-events:none;z-index:0}

/* A real franchise-season shows its crest (`.team-crest`, era-correct -- web/crests.py).
   The generated, colour-coded initial is kept only for a side that is no single franchise,
   such as another player's drafted twelve in a room; the viewer's own row is the gold star. */
.team-crest{width:26px;height:22px;object-fit:contain;margin-right:9px;vertical-align:-6px}
.team-badge{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:8.5px;font-weight:800;
  color:rgba(5,11,26,.82);margin-right:8px;font-family:var(--mono);
  vertical-align:-5px;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.team-badge.you-badge{background:var(--gold-2)!important;color:#2b2005}
.you-pill{display:inline-block;font-family:var(--mono);font-size:8px;font-weight:700;
  letter-spacing:.1em;color:#2b2005;background:var(--gold-2);border-radius:4px;
  padding:2px 6px;margin-left:8px;vertical-align:2px}

/* --- standings: the league table's own richer treatment, scoped separately from the
   shared table/th/td rules above (which the scorecard's batting/bowling tables also
   use -- rank, leader and points styling has no meaning there). A standings table is
   read top-down for exactly two things: who's leading, and where the cutoff falls --
   both get a real visual anchor instead of 10 identically-weighted rows. */
.standings th{border-bottom:1.5px solid rgba(245,184,61,.35)}
.standings tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
.standings tbody tr:first-child td{background:linear-gradient(90deg,rgba(245,184,61,.12),transparent 65%)}
.standings tbody tr:first-child td:first-child{color:var(--gold-2);font-weight:800}
.standings td.pts{font-weight:700;color:var(--ink)}
.standings td.nrr-pos{color:var(--green)}
.standings td.nrr-neg{color:var(--red-2)}

/* --- the points table, IPL-style [A153] -- see reveal.js `standingsHtml` for the why. The
   points column is the one that stands out (it decides the table), the cut under fourth is
   a clear rule rather than a faint border, and For/Against sit in quieter type because they
   are the working behind NRR, not a second headline. */
.season > .season-wide{grid-column:1 / -1}
.st-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.standings{font-size:13.5px}
.standings th,.standings td{padding-left:6px;padding-right:6px}
.standings .st-pos{width:30px;text-align:left;font-family:var(--mono);color:var(--ink-3);padding-left:10px}
.standings tbody tr.top .st-pos{color:var(--gold-2);font-weight:800}
/* The leader's glow is painted once across the ROW -- the older per-cell gradient restarted
   in every cell, which across eleven columns read as a row of patches. */
.standings tbody tr.top td:not(.st-pts){background:none}
.standings tbody tr.top{background:linear-gradient(90deg,rgba(245,184,61,.14),transparent 70%)}
.standings td.st-team{white-space:nowrap}
.standings .st-mark{margin-right:10px;vertical-align:middle}
.standings img.st-mark{width:28px;height:24px;object-fit:contain}
.standings .kit-badge.st-mark{width:24px;height:24px;font-size:8px}
.st-full{font-weight:650;color:var(--ink)}
.standings tr.you .st-full{font-weight:800}
.st-short{display:none;font-weight:700;color:var(--ink)}
.st-q{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:9px;border-radius:50%;
  font:800 9px var(--mono);font-style:normal;color:#9cc8ff;background:rgba(80,150,255,.18);
  box-shadow:0 0 0 1px rgba(120,180,255,.35) inset;vertical-align:1px}
.st-cup{font-style:normal;margin-left:7px;font-size:14px}
.standings th.st-pts{color:var(--gold-2)}
/* tr-qualified so it outranks the striped and leader-row backgrounds above */
.standings tbody tr td.st-pts,.standings thead tr th.st-pts{text-align:center;background:rgba(245,184,61,.08)}
.standings td.st-pts{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--gold-2)}
.standings td.st-fa{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.standings .st-formcell{text-align:right;padding-right:10px}
.st-form{display:inline-flex;gap:4px}
.fm{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font:800 8.5px var(--mono);font-style:normal}
.fm-w{background:var(--green);color:#04231a}
.fm-l{background:var(--red);color:#2b0705}
.fm-t{background:var(--ink-3);color:var(--bg)}
.standings tr.cut td{border-bottom:2px solid rgba(120,180,255,.55)}
.standings .st-wl{display:none}
.st-toggle{display:none;gap:6px;margin:10px 0 6px}
.st-toggle button{font:700 11px var(--mono);letter-spacing:.06em;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line-strong);background:none;color:var(--ink-2);cursor:pointer}
.st-toggle button.sel{background:var(--gold);border-color:var(--gold);color:#2b2005}
@media (max-width:900px){
  .standings .st-wide{display:none}
}
@media (max-width:640px){
  .st-toggle{display:flex}
  .st-full{display:none}
  .st-short{display:inline}
  .standings .st-formcell{display:none}
  .st-wrap.form-view .st-formcell{display:table-cell}
  .st-wrap.form-view .st-std{display:none}
  .standings .you-pill{display:none}
  /* one W-L column in place of two, as the IPL's own phone table does */
  .standings .st-sep{display:none}
  .standings .st-wl{display:table-cell;white-space:nowrap}
  .st-wrap.form-view .st-wl{display:none}
  .standings th,.standings td{padding-left:4px;padding-right:4px}
  .standings .st-pos{width:22px;padding-left:4px}
  .standings .st-mark{margin-right:6px}
  .standings img.st-mark{width:22px;height:20px}
  .standings .kit-badge.st-mark{width:20px;height:20px;font-size:7px}
  .st-q{margin-left:5px;width:14px;height:14px;font-size:8px}
  .season > .season-wide{padding-left:8px;padding-right:8px}
  .season > .season-wide .panel-head{margin-left:-8px;margin-right:-8px;padding-left:10px;padding-right:10px}
  .standings{font-size:12.5px}
  .standings tbody tr td.st-pts{font-size:13.5px}
  .fm{width:16px;height:16px;font-size:8px}
  .st-form{gap:3px}
}

/* --- the season's verdict [A153] -- a finishing badge, or the champion's moment. */
.hero{display:flex;align-items:center;justify-content:center;gap:28px 48px;flex-wrap:wrap;
  margin:14px auto 6px;max-width:760px}
#roomMatchBody > .hero{margin-bottom:22px}
.hero-finish{text-align:center}
.hero-pos{font-family:var(--display);font-size:clamp(64px,12vw,112px);line-height:.9;color:var(--ink)}
.hero-pos span{display:block;font:600 12px var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-top:10px}
.hero-sub{font:700 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.hero-record{font:600 13px var(--mono);color:var(--ink-2);margin-top:8px;letter-spacing:.04em}
.hero-winner{display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);text-align:left}
.hero-winner .hero-sub{margin:0 0 4px;color:var(--gold)}
.hero-winner-mark{width:78px;height:70px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.hero-winner .kit-badge.hero-winner-mark{width:62px;height:62px;font-size:18px}
.hero-winner-name{font:800 18px var(--sans);color:var(--ink);max-width:260px}
.hero.champ{flex-direction:column;gap:6px;padding:26px 24px 30px;border-radius:20px;position:relative;
  overflow:hidden;border:1px solid rgba(245,184,61,.45);
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--team,var(--gold)) 30%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(245,184,61,.10),transparent);text-align:center}
.hero.champ::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,236,170,.16) 45%,transparent 60%);
  transform:translateX(-100%);animation:heroShine 3.2s ease-in-out 0.4s 2}
@keyframes heroShine{to{transform:translateX(100%)}}
.hero-trophy{font-size:42px;line-height:1;animation:heroLift .8s ease-out both}
@keyframes heroLift{from{transform:translateY(10px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.hero.champ .hero-mark{width:120px;height:108px;object-fit:contain;margin:8px 0 2px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.5))}
.hero.champ .kit-badge.hero-mark{width:104px;height:104px;font-size:30px;
  box-shadow:0 0 0 4px var(--team) inset,0 0 40px color-mix(in srgb,var(--team) 50%,transparent)}
.hero-title{font-family:var(--display);font-size:clamp(46px,9vw,84px);line-height:.95;letter-spacing:.02em;
  color:var(--gold-2);text-shadow:0 6px 30px rgba(245,184,61,.35);text-transform:uppercase}
.hero-name{font:800 20px var(--sans);color:var(--ink)}
.hero-line{font-size:14.5px;color:var(--ink-2);font-style:italic}
@media (prefers-reduced-motion:reduce){.hero.champ::after,.hero-trophy{animation:none}}

/* --- the cap cards [A153]: the winner's team crest (or kit) large on the right. */
.cap-card{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cap-text{min-width:0}
.cap-card .cap-name{font-size:16px}
.cap-card .cap-value{font-size:12px;color:var(--ink-2)}
.cap-team{font:600 10.5px var(--mono);color:var(--ink-3);margin-top:4px;line-height:1.35}
.cap-mark{flex:0 0 auto;width:54px;height:48px;object-fit:contain;opacity:.95}
.kit-badge.cap-mark{width:44px;height:44px;font-size:13px}

/* --- cap-row: the tournament's Orange Cap (top scorer) and Purple Cap (top wicket
   taker), sitting in the league table's own card below the ten rows -- a ten-row
   standings table leaves real empty space under a fourteen-row "your matches" card
   beside it, and these are the two individual honours a real IPL table's own space
   would carry rather than leaving it blank. */
.cap-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 4px}
.cap-card{position:relative;padding:12px 14px 12px 17px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.cap-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px}
.cap-card.cap-orange::before{background:var(--cap-orange)}
.cap-card.cap-purple::before{background:var(--cap-purple)}
.cap-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:5px}
.cap-orange .cap-label{color:var(--cap-orange)}
.cap-purple .cap-label{color:var(--cap-purple)}
.cap-name{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-value{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.fx{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;transition:background .12s}
.fx[onclick]:hover{background:var(--panel-2)}
.fx .wl{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;width:1.8em;text-align:center;
  padding:3px 0;border-radius:4px;border:1px solid var(--line-strong);color:var(--ink-3)}
.fx .wl.w{background:var(--green);border-color:var(--green);color:#04231a;font-weight:700}
.fx .wl.l{background:var(--red);border-color:var(--red);color:#2b0705;font-weight:700}
.fx .sc{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tie-stage{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);padding-top:16px;font-weight:600}
.hide{display:none!important}
.slip{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel-3);
  color:var(--ink);padding:13px 22px;font-family:var(--sans);font-size:13px;z-index:60;
  border:1px solid var(--gold);border-radius:8px}

/* the shareable journey card: a hand-drawn canvas, previewed full height and downloadable
   as a real PNG -- no server-side image generation, no new dependency.
   The canvas is drawn portrait, phone-screen shaped (1080x2470) -- capping its PREVIEW
   by height (the original rule: max-height:80vh;width:auto) forces that whole tall
   image into 80% of the viewport regardless of width, which on an ordinary desktop
   window scales it down to roughly 30% of native size and every font on it along with
   it. `.scorecard-frame` right below solves the same "content taller than the screen"
   problem the other way -- cap by width, scroll for height -- and that is the
   correct direction for a portrait image; only the canvas itself scrolls, so Download/
   Close stay pinned and reachable without hunting for them at the bottom. */
.card-overlay{position:fixed;inset:0;background:rgba(3,7,17,.92);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:24px}
.card-frame{display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%}
.card-scroll{max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.card-frame canvas{display:block;width:min(92vw,640px);height:auto;border-radius:14px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7);border:1px solid var(--line-strong)}
.card-actions{display:flex;gap:12px;flex:none}
.card-actions a.act{text-decoration:none;display:inline-flex;align-items:center}

/* the scorecard overlay: reuses .card-overlay's backdrop, a scrolling frame of its own
   since two full elevens' worth of batting and bowling can run taller than the screen.
   Close is a SIBLING of the scrolling frame, not its last child -- the journey card's
   own .card-actions already got this right (pinned, always visible); the scorecard/stat
   overlays originally buried Close at the very bottom of the scrollable content itself,
   so reaching it meant scrolling past two full innings' worth of batting and bowling
   first, which on a phone reads as "stuck" long before it reads as "just needs a scroll". */
.scorecard-shell{display:flex;flex-direction:column;align-items:stretch;gap:10px;
  max-height:100%;width:100%;max-width:960px}
.scorecard-frame{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:14px;
  width:100%;max-height:calc(88vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 26px 26px}
.scorecard-frame .report{padding:22px 0 4px}
.scorecard-close{display:flex;justify-content:center;flex:none}
.stat-frame{max-width:340px}
.stat-tiles{justify-content:center;gap:28px;margin:20px 0 6px}
.auth-frame{max-width:360px;padding:26px}
.auth-error{min-height:16px;margin-top:14px;font-family:var(--mono);font-size:11.5px;
  color:var(--red)}
.entry .nm.clickable,.who.clickable{cursor:pointer}
.entry .nm.clickable:hover,.who.clickable:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.impact-tag{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#1a1204;
  background:var(--gold);border-radius:3px;padding:1px 4px;vertical-align:middle;font-weight:700}
/* Tiered rather than uniform: the scale is 70-99, so an untiered badge put every card in
   one 30-point band and a 99 looked exactly like a 74. Weight climbs with the number so a
   great card is visible while skimming, without the figure itself ever being hidden. */
.rating-badge{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-3);
  border:1px solid var(--line);border-radius:3px;padding:2px 6px;
  vertical-align:middle;margin-left:7px;letter-spacing:.02em}
.rating-badge.good{color:var(--green);border-color:rgba(51,209,154,.38)}
.rating-badge.strong{color:var(--mint);border-color:rgba(61,220,151,.55);
  background:rgba(61,220,151,.10);font-size:11.5px}
/* Only the top of the deck gets a solid fill -- if several tiers did, none would read as
   exceptional and the tiering would be decoration again. */
.rating-badge.elite{color:#17120a;background:var(--gold);border-color:var(--gold);
  font-size:12px;font-weight:800;box-shadow:0 0 12px -2px rgba(245,184,61,.6)}
.fow{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.8;
  padding:12px 0 4px;white-space:pre-line}

/* the super over. Below the two innings and outside `.cards2` deliberately: those two
   columns ARE the match, and a super over is what happened after it -- putting one in a
   column would read as a third innings of the same game. Compact rather than a full
   scorecard table, since six balls, three batters and one bowler fill almost none of
   one. A repeat gets its own block, numbered; a single one is just "Super over". */
.so-wrap{margin-top:26px}
.so-block{border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:14px 18px;margin-top:12px}
.so-head{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.so-verdict{color:var(--gold);letter-spacing:.08em}
.so-row{display:grid;grid-template-columns:auto auto 1fr;gap:6px 14px;align-items:baseline;
  padding:9px 0 0}
.so-team{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.so-score{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink)}
.so-detail{font-size:12.5px;color:var(--ink-3);line-height:1.6}
@media (max-width:720px){
  /* Three columns of mixed width do not survive a phone -- the detail line wraps under
     the score rather than squeezing it. */
  .so-row{grid-template-columns:auto 1fr}
  .so-detail{grid-column:1 / -1}
}

/* room setup: create/join */
.room-label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.room-input{width:100%;font:inherit;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:8px;
  padding:12px 14px}
.room-input:focus{outline:none;border-color:var(--gold)}
.room-choices{display:flex;gap:10px;flex-wrap:wrap}
.room-choice{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;padding:10px 16px;
  border-radius:7px;border:1px solid var(--line-strong);background:var(--panel-2);
  color:var(--ink-2)}
.room-choice.sel{border-color:var(--gold);color:var(--gold);background:rgba(245,184,61,.08)}
.room-note{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-4);
  line-height:1.5}
.imprint{margin-top:72px;padding:26px 0 0;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:13px;position:relative;z-index:1}
.imprint a{color:var(--ink-2);text-decoration:none}
.imprint a:hover{color:var(--gold)}
.imprint-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:600}
#footStats{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase}
.imprint-fine{margin:14px 0 0;max-width:720px;font-size:12px;line-height:1.6;color:var(--ink-3)}
.imprint-fine a{color:var(--ink-3);text-decoration:underline}

/* --- about/faq/terms/privacy: a plain readable column, not a dashboard screen --- */
.prose{max-width:660px;margin:0 auto;padding:6px 0 20px;position:relative;z-index:1}
.prose h2{font-family:var(--sans);font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:38px 0 12px;font-weight:800}
.prose h2:first-child{margin-top:0}
.prose p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.prose ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.prose li{margin-bottom:7px}
.prose a{color:var(--gold);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--ink)}
.prose .stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:30px}
.legal-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:0 0 8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.legal-nav a{color:var(--ink-3);text-decoration:none}
.legal-nav a:hover,.legal-nav a.sel{color:var(--gold)}
.faq-q{font-family:var(--sans);font-size:15.5px;font-weight:750;color:var(--ink);margin:26px 0 6px}
.faq-q:first-of-type{margin-top:0}

@media (max-width:900px){
  .spread{grid-template-columns:1fr;gap:34px}
  .field{max-width:360px;margin:0 auto;width:100%}
  .method{grid-template-columns:1fr;gap:12px}
  .folio,.cards2,.season{grid-template-columns:1fr}
  .line .club{display:none}
  .actions{width:100%;flex-direction:column;flex-wrap:nowrap}
  .act{text-align:center}
  .ledger{grid-template-columns:1fr 1fr}
  /* The desktop .col height cap (max-height:calc(100vh - 200px)) exists so three
     side-by-side columns of different lengths don't grow to different heights --
     once .folio stacks them to one column above, that reason is gone, and keeping the
     cap just means three separate nearly-full-screen scrolling boxes in a row instead
     of one page that scrolls naturally. */
  .col{max-height:none}
  /* Tap targets: the highest-frequency interaction in the app (Take, an order-sheet
     slot) measured 27px/39px tall on a real phone viewport, both under the ~44px
     minimum every mobile HIG recommends. Desktop density is untouched. */
  .take{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;
    justify-content:center;font-size:11px}
  .orderline{min-height:44px}
}

/* =========================================================================================
   THE LOBBY SCALE

   A screen-level type system, added after measuring why the old lobby read as a settings
   dialog: its title was 10px, its buttons 12.5px, its biggest element a 16px text input.
   Nothing could lead because everything was the same size. These classes exist to restore
   a real ladder -- roughly 6:1 top to bottom, the same ratio a scoreboard or a sports
   masthead uses:

     .screen-title   clamp(44px..76px)   the one thing you read first
     .pick-name      21px                a choice worth making
     .pick-num       34px mono           the numeral that anchors each row
     .pick-desc      14.5px              what the choice means
     .eyebrow/.rule-note  10.5px         labels, and only labels

   Type does the work here, not chrome: no card wrapper, no rounded translucent panel, no
   drop shadows. Content sits directly on the background separated by hairline rules, so
   the page reads as one confident surface rather than a dialog floating on wallpaper.
========================================================================================= */

.lobby{max-width:760px;margin:0 auto;padding:46px 0 40px;position:relative;z-index:1}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:14px}
.eyebrow.mute{color:var(--ink-3)}

.screen-title{font-family:var(--display);font-size:clamp(44px,7.4vw,76px);line-height:.92;
  margin:0 0 16px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink);
  font-weight:400}

/* The strip under a title: what this screen is for on the left, its shape on the right --
   the same "PICK YOUR TOURNAMENT / 3 MODES · LOCAL AND ONLINE" move that tells you the
   scope of a screen before you read any option. */
.title-strip{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:26px;
  border-bottom:1px solid var(--line)}

/* --- the choice list: the hero of the screen, not a row of equal buttons --- */
.picks{display:flex;flex-direction:column}
.pick{display:grid;grid-template-columns:auto 1fr auto;gap:0 22px;align-items:center;
  padding:22px 4px;border-bottom:1px dashed var(--line);cursor:pointer;text-align:left;
  width:100%;background:none;transition:background .14s,padding .14s}
.pick:hover{background:rgba(255,255,255,.028);padding-left:12px;padding-right:12px}
.pick.sel{background:rgba(245,184,61,.07)}
.pick-num{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1;
  color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .14s}
.pick:hover .pick-num{color:var(--mint)}
.pick.sel .pick-num{color:var(--mint)}
.pick-name{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink);line-height:1.1}
.pick.sel .pick-name{color:var(--gold)}
.pick-desc{grid-column:2;font-size:14.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.pick-seats{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;align-self:center}
.pick.sel .pick-seats{color:var(--gold)}

/* --- a section rule with a label on the left and a live count on the right --- */
.rule-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin:38px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3)}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--mint);font-weight:600}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:livePulse 2s infinite}
@keyframes livePulse{
  70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}

/* --- the one primary action on the screen --- */
.go{display:block;width:100%;font-family:var(--sans);font-size:15px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--hot);
  border:none;border-radius:3px;padding:19px 26px;margin-top:26px;cursor:pointer;
  transition:filter .14s,transform .08s}
.go:hover{filter:brightness(1.08)}
.go:active{transform:translateY(1px)}
.go.ghost{background:none;color:var(--ink-2);border:1px solid var(--line-strong)}
.go.ghost:hover{border-color:var(--gold);color:var(--gold);filter:none}

/* --- settings, deliberately quieter than the choice above them --- */
.settings{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:center;
  margin-top:26px}
.settings > .room-label{margin:0;white-space:nowrap}
.settings .room-choices{margin:0}

/* An open-room row: name and shape on the left, one action on the right, hairline ruled --
   the same anatomy as .pick so the two read as one family. */
.room-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 4px;border-bottom:1px dashed var(--line)}
.room-row .rr-name{font-family:var(--sans);font-size:16px;font-weight:750;color:var(--ink);
  text-transform:uppercase;letter-spacing:.3px}
.room-row .rr-name{display:block}
.room-row .rr-meta{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}

@media (max-width:640px){
  .pick{grid-template-columns:auto 1fr;gap:0 16px}
  .pick-seats{grid-column:2;margin-top:6px}
  .settings{grid-template-columns:1fr;gap:6px 0}
  .settings .room-choices{margin-bottom:14px}
}

/* =========================================================================================
   THE FIELD WHEEL  --  this site's signature device

   Cricket draws two things nothing else does: the fielding map and the wagon wheel, both
   a circle with the pitch at its centre and marks set around it. This is both at once, and
   it is load-bearing UI rather than an illustration: a room's FORMAT is drawn as a field
   setting, one marker per seat, evenly placed around the boundary the way a captain sets a
   field. Filled marker = seat taken, hollow = still open.

   The reason it works rather than merely decorates: a League room holds 10 seats and a
   captain sets exactly 10 fielders. The metaphor is not stretched onto the product, it was
   already true of it -- which is also why no football or basketball site can lift this.

   It scales down: at 34px, with the pitch and inner ring dropped, the same wheel is a
   room's seat gauge in a list. Same object, two sizes, one idea.
========================================================================================= */

svg.wheel{display:block;width:100%;height:auto;overflow:visible}
.wheel-grass{fill:url(#wheelGrass)}
.wheel-rope{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.wheel-inner{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 6}
.wheel-spoke{stroke:rgba(255,255,255,.05);stroke-width:1}
.wheel-spoke.on{stroke:rgba(245,184,61,.26)}
.wheel-crease{stroke:rgba(255,255,255,.20);stroke-width:1}
.wheel-pitch{fill:rgba(245,184,61,.10);stroke:rgba(245,184,61,.34);stroke-width:1}
.wheel-dot{fill:var(--bg);stroke:var(--ink-3);stroke-width:1.6;
  transform-box:fill-box;transform-origin:center;animation:dotIn .32s cubic-bezier(.2,1.4,.4,1) backwards}
.wheel-dot.on{fill:var(--gold);stroke:var(--gold-2);
  filter:drop-shadow(0 0 7px rgba(245,184,61,.55))}
@keyframes dotIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* The wheel and its readout sit as one unit: the diagram states the shape of the room,
   the figures under it state the same thing in numbers, so neither has to be decoded. */
.wheel-wrap{position:relative}
.wheel-read{text-align:center;margin-top:18px}
.wheel-read b{display:block;font-family:var(--display);font-size:40px;line-height:1;
  letter-spacing:.5px;text-transform:uppercase;color:var(--gold);font-weight:400}
.wheel-read span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* The list version: a seat gauge you can read at a glance. Selector has to out-specify
   `svg.wheel{width:100%}` above (0,1,1) or the mini renders full-bleed -- which it did. */
svg.wheel.wheel-mini{width:46px;height:46px;flex:none}
/* Scaled down this far the 1.6px hairline stroke all but vanishes, so the mini's markers
   carry their own weights rather than inheriting the big wheel's. */
svg.wheel.wheel-mini .wheel-dot{stroke-width:7}
svg.wheel.wheel-mini .wheel-rope{stroke-width:3}
svg.wheel.wheel-mini .wheel-spoke{display:none}

/* --- the lobby laid out around the wheel --- */
.field-split{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start;
  margin-top:26px}
@media (max-width:820px){
  .field-split{grid-template-columns:1fr;gap:34px}
  .field-split .wheel-wrap{max-width:280px;margin:0 auto}
}

/* --- lobby controls: out of the terminal, into the type system ---------------------------
   The settings block kept the old language after the rest of the screen moved on -- mono
   at 10.5-12.5px with wide tracking, which is config-screen grammar, not something you
   want to click. Same controls, same behaviour, stated in the page's own voice: Archivo
   with real weight, bigger, and a SELECTED state that is a solid fill rather than a tinted
   outline, so which option is live is legible at a glance instead of on inspection.

   Scoped to .lobby on purpose: .room-choice/.room-label/.room-input are also the auth
   modal's and the older screens' controls, and half-restyling those while they still sit
   in the old scale would look worse than leaving them alone until they are converted. */

.lobby .room-label{font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}

.lobby .room-input{font-family:var(--sans);font-size:17px;font-weight:600;
  letter-spacing:.2px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:3px;padding:15px 16px;transition:border-color .14s,background .14s}
.lobby .room-input::placeholder{color:var(--ink-3);font-weight:500}
.lobby .room-input:focus{border-color:var(--gold);background:var(--panel-2)}

.lobby .room-choice{font-family:var(--sans);font-size:13.5px;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;border-radius:3px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);
  transition:border-color .14s,background .14s,color .14s}
.lobby .room-choice:hover{border-color:var(--gold);color:var(--ink)}
/* Solid, not tinted: a filled chip reads as ON from across the room, a 8%-alpha wash
   reads as "possibly hovered". */
.lobby .room-choice.sel{background:var(--gold);border-color:var(--gold);color:#17120a}
.lobby .room-choice.sel:hover{background:var(--gold-2);color:#17120a}

/* --- the format choice as a gate ---------------------------------------------------------
   Animating to a content height nobody knows in advance is the usual reason these panels
   are done with a guessed `max-height`, which either clips tall content or coasts through
   dead space on short content. `grid-template-rows: 0fr -> 1fr` interpolates to the row's
   OWN height, so it is exact at any content length and needs no magic number. The inner
   element carries the overflow clip; `min-height:0` is what lets a grid row actually go
   to zero. */
.reveal-panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1),opacity .3s ease,
             margin-top .42s cubic-bezier(.4,0,.2,1);
  opacity:0;margin-top:0}
.reveal-panel > .reveal-inner{overflow:hidden;min-height:0}
.reveal-panel.open{grid-template-rows:1fr;opacity:1}

/* Until a format is chosen the ground is empty and says so, rather than showing a figure
   for a room that does not exist yet. */
.wheel-read b:empty{display:none}

/* A prompt sitting under the list while nothing is picked -- it disappears the moment the
   choice it is asking for has been made. */
.pick-prompt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-top:18px;
  display:flex;align-items:center;gap:9px}
.pick-prompt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  animation:livePulse 2s infinite;box-shadow:0 0 0 0 rgba(245,184,61,.6)}
.picked .pick-prompt{display:none}

/* --- the panel as part of the row it belongs to ------------------------------------------
   Opening in place under the chosen row rather than below the whole list means the panel
   has to read as a continuation of that row, not as a separate block that happens to sit
   nearby: it carries the same tint as `.pick.sel`, and the selected row drops its own
   bottom rule so the two share one edge. */
.reveal-panel.open{background:rgba(245,184,61,.05)}
.pick.sel{border-bottom-color:transparent}

.config-body{display:grid;grid-template-columns:190px 1fr;gap:38px;align-items:start;
  padding:26px 22px 30px}
.config-body .wheel-read{margin-top:14px}
.config-body .wheel-read b{font-size:34px}
/* The wheel now lives inside the reveal, so its own heading rule would be the panel's
   first element and fight the name label opposite it -- the diagram introduces itself. */
.config-main .rule-head:first-child{margin-top:0}

@media (max-width:700px){
  .config-body{grid-template-columns:1fr;gap:22px;padding:22px 14px 26px}
  .config-body .wheel-wrap{max-width:190px;margin:0 auto}
}

/* --- home, brought onto the same scale ---------------------------------------------------
   The front door was the last screen still setting its headline in bold body-sans and its
   three steps as soft rounded cards. Both now speak the lobby's language: the headline in
   the display face at real size, and the steps as rule-topped columns led by their numeral
   rather than boxes led by a small icon. */

.headline{font-family:var(--display);font-size:clamp(42px,6.2vw,72px);line-height:.94;
  font-weight:400;letter-spacing:.5px;margin:0 0 24px}
.headline i{font-style:normal;color:var(--gold)}

.method{gap:26px}
/* No card: a gold rule across the top and air underneath. Three boxes on a dark ground
   read as three buttons; three ruled columns read as a contents page, which is what they
   are -- nothing here is clickable. */
.method section{background:none;border:0;border-top:2px solid var(--gold);border-radius:0;
  padding:18px 0 0;gap:9px}
.method h3{font-family:var(--sans);font-size:16.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;align-items:baseline;gap:12px}
/* The little 22px glyph was doing less than the numeral beside it and competing with it
   for the same eye -- the numeral is the thing that says "step one of three". */
.method h3 .mico{display:none}
.method h3 span:not(.mico){font-family:var(--mono);font-size:29px;font-weight:700;
  color:var(--ink-3);line-height:1}
.method p{font-size:14.5px;color:var(--ink-3);line-height:1.62}

/* The ground on home and the wheel in the lobby are the same object seen twice, so they
   share stroke weights -- previously home's was a 1px hairline with an 8px gold halo and
   the wheel's a 1.2px rope, which read as two different diagrams. */
.field{box-shadow:none;border-color:var(--line-strong);border-width:1.2px}
.field::before{border-color:var(--line)}

/* --- about / faq / terms / privacy --------------------------------------------------------
   These four are the one place on the site where reading is the whole job, so they get a
   real page title rather than a 16px tracked chip, and body copy sized to be read rather
   than scanned. Everything else about them was already right -- one column, generous
   measure, hairline rules. */

.prose-page .report{padding:44px 0 6px;text-align:left}
.prose-page .report .over-line{color:var(--gold)}
/* The shared `.call` is 16px uppercase with .24em tracking -- correct as a verdict line on
   a match result, far too small as the name of a page you are about to read. */
.prose-page .report .call{font-family:var(--display);font-size:clamp(38px,5.4vw,58px);
  font-weight:400;letter-spacing:.5px;line-height:.96;color:var(--ink);margin:12px 0 0;
  text-transform:uppercase}
.prose-page .legal-nav{justify-content:flex-start;margin:26px 0 0;padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.prose-page .prose{margin:0;padding-top:30px}
.prose{max-width:68ch}
.prose h2{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em}
.prose p,.prose ul{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
/* `.prose p` is (0,1,1) and would otherwise win over a bare `.faq-q` (0,1,0), leaving
   every question set at body size -- which is exactly what it did. */
.prose p.faq-q{font-size:19px;font-weight:800;letter-spacing:.1px;margin:34px 0 8px;
  color:var(--ink)}

/* --- the draft's completed state ---------------------------------------------------------
   While drafting, the left column is the deal: a franchise-season and its available men.
   The moment the twelfth pick lands that column has nothing left to say, and it used to
   sit there as an empty box captioned "Selection closed" -- a third of the screen going
   blank at the exact moment the screen should feel best.

   It now shows the thing that was actually just built: a full field, every position set,
   with the squad's three ratings under it. Same wheel as the lobby's, so "a side" looks
   like the same object everywhere in the app. */

.squad-done{padding:22px 18px 26px;text-align:center}
.squad-done .wheel-wrap{max-width:210px;margin:0 auto}
.squad-done .done-line{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mint);margin-top:18px;
  display:flex;align-items:center;justify-content:center;gap:8px}
.squad-done .done-line::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px rgba(61,220,151,.7)}
.squad-done .ledger{grid-template-columns:repeat(3,1fr);margin-top:22px;gap:8px}
.squad-done .ledger div{padding:14px 6px}
.squad-done .ledger b{font-family:var(--display);font-size:30px;color:var(--gold);
  font-weight:400;line-height:1}

/* --- your own season, made readable --------------------------------------------------------
   Two fixes to the same panel. A result read "130/10 · 157/7" with nothing marking which
   half was YOURS -- the data was right (season.js works out `mine`/`theirs` correctly), it
   just went to screen as two identical numbers. Your score is now the bright one.

   And the header counted "9 won, 5 lost" while throwing away the ORDER, which is the part
   a season actually has a shape in -- four straight losses to finish reads nothing like
   four spread out. The strip restores the sequence in the space one line of text took. */

.form-strip{display:flex;gap:4px;flex-wrap:wrap;padding:14px 0 4px}
.form-strip i{width:22px;height:22px;border-radius:3px;font-style:normal;
  font-family:var(--mono);font-size:10px;font-weight:700;display:flex;
  align-items:center;justify-content:center;color:var(--bg);background:var(--ink-3)}
.form-strip i.w{background:var(--mint)}
.form-strip i.l{background:var(--red)}
.form-strip i.t{background:var(--ink-3)}

.fx .sc .mine{color:var(--ink);font-weight:700}
.fx .sc .theirs{color:var(--ink-3)}

/* --- the toss ------------------------------------------------------------------------------
   The biggest single moment in a match was set at 16px with .24em tracking and left the
   bottom half of the screen empty. It is a coin landing your way -- it should feel like it.
   Scoped to #tossScreen so `.call` keeps its ordinary size everywhere else it is used. */

#tossScreen .report{padding:64px 0 10px}
#tossScreen .call{font-family:var(--display);font-size:clamp(40px,6.6vw,72px);
  font-weight:400;letter-spacing:.5px;line-height:.96;color:var(--gold);
  text-transform:uppercase;margin:18px 0 6px}
#tossScreen .margin{font-size:17px;color:var(--ink-2);font-style:normal}
#tossScreen .actions .act{font-size:15px;padding:19px 40px}
/* The coin: struck once on arrival rather than looping, because it is announcing a result
   that has already happened, not waiting on one. */
.toss-coin{width:74px;height:74px;margin:0 auto 6px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-2),var(--gold) 55%,#a97615);
  box-shadow:0 10px 30px -10px rgba(245,184,61,.75), inset 0 -3px 8px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:30px;color:#17120a;
  animation:tossFlip 1.05s cubic-bezier(.3,.7,.3,1) 1}
@keyframes tossFlip{
  0%{transform:rotateY(0) translateY(-26px) scale(.7);opacity:0}
  60%{transform:rotateY(1080deg) translateY(0) scale(1.06);opacity:1}
  100%{transform:rotateY(1080deg) translateY(0) scale(1)}
}

/* --- the scorecard --------------------------------------------------------------------------
   The result was smaller than the tables under it: you read two innings of numbers before
   learning who won. Verdict first, at size, then the detail. */

.scorecard-frame .report .call{font-family:var(--display);
  font-size:clamp(30px,4.4vw,46px);font-weight:400;letter-spacing:.4px;
  text-transform:uppercase;line-height:1;margin:10px 0 6px}
.scorecard-frame .report .margin{font-size:15.5px;color:var(--ink-2)}
/* Each innings' best contribution, so a scorecard has a subject rather than being a wall
   of equally-weighted rows. */
.scorecard-frame tr.top-bat td{background:rgba(245,184,61,.08)}
.scorecard-frame tr.top-bat td:first-child{color:var(--gold-2);font-weight:750;
  box-shadow:inset 2px 0 0 var(--gold)}
/* [A217] Your own player, where the page has one (Build a Career). After .top-bat, so a
   row that is both reads as yours. */
.scorecard-frame tr.you-row td{background:rgba(52,211,153,.10)}
.scorecard-frame tr.you-row td:first-child{color:var(--ink);font-weight:750;box-shadow:inset 3px 0 0 var(--mint)}
/* [A115] A zero boundary count is a dash, dimmed further than an ordinary cell, so the
   eye lands on the batters who did clear the rope rather than filtering past a column of
   noughts to find them. */
.scorecard-frame td.bdy-none{color:var(--ink-3);opacity:.55}
/* The shared `td` rule is `padding:6px 0` -- no horizontal padding at all. Four numeric
   columns had enough natural width to survive that; six do not, and on a phone the row
   ran together into "1046110 6170.5" with no way to tell where one column ended. The
   separation has to be real space rather than a smaller font, because these are the
   numbers the card exists to show. Scoped to the scorecard so the standings table, which
   shares the same base rules and is not crowded, is untouched. */
.scorecard-frame th.n,.scorecard-frame td.n{padding-left:9px;white-space:nowrap}
.scorecard-frame td:first-child{padding-right:4px}

/* --- legality: a list of what is LEFT, not a list of what is WRONG --------------------------
   The panel showed red failure lines throughout a draft that is going perfectly well --
   twelve picks in, having filled none of them yet is not an error, it is the start. Same
   sentences (still the server's own, never re-derived here), read as outstanding work. */

#legality .bad{color:var(--ink-2);font-size:13.5px;line-height:1.5;padding:9px 0 9px 22px;
  position:relative;border-bottom:1px dashed var(--line)}
#legality .bad::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:9px;
  border:1.5px solid var(--gold);border-radius:2px}
#legality .bad:last-child{border-bottom:0}
#legality .ok{color:var(--mint);font-style:normal;font-weight:700;font-size:14px;
  display:flex;align-items:center;gap:9px}
#legality .ok::before{content:"";width:9px;height:9px;border-radius:2px;
  background:var(--mint);box-shadow:0 0 10px rgba(61,220,151,.8)}

/* --- panels: rules, not boxes ---------------------------------------------------------------
   The last screens still wrapping every column in a rounded translucent card. Home, the
   lobby and the content pages all dropped that chrome; these kept it, which is why the
   game screens read as a different app from the pages around them. */

.col{background:none;border:0;border-top:2px solid var(--line-strong);border-radius:0}
.col-head{padding:14px 4px;border-bottom:1px solid var(--line)}
.col-head:first-child{padding-top:12px}
.folio{gap:30px}


/* --- background: two dark washes, no photograph ------------------------------------------
   The stadium photo is gone for good. Scrimmed to keep text legible it added a muddy
   mid-tone and no detail, and once real crests arrived it competed with the one place on
   screen colour should come from: the teams. 75 kB saved on every first visit too. */
body{
  background-image:
    radial-gradient(1100px 560px at 85% -12%, rgba(245,184,61,.11), transparent 60%),
    radial-gradient(900px 520px at 0% 28%, rgba(60,120,255,.07), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* --- column titles, and whose turn it is ----------------------------------------------------
   `.col-head` was 10px mono at .2em tracking in --ink-3, the dimmest ink on the palette --
   a caption whispering the name of the thing under it. These are the labels that tell you
   what each third of the screen IS, so they get the body face with real weight and enough
   contrast to be read rather than deciphered. */
.col-head{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.col-head em{color:var(--gold);font-family:var(--mono);font-size:11px;font-weight:700}

/* Whose turn it is, in a room. This is the single most time-sensitive fact on the screen --
   everyone is waiting on it -- and it rendered at the same 10px as every other caption.
   The gold and the pulse mark it as live rather than as a heading that happens to change. */
#roomDealLabel{font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.04em;
  text-transform:none;color:var(--gold);display:flex;align-items:center;gap:9px}
#roomDealLabel::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(245,184,61,.65);animation:livePulse 2s infinite}
/* On your OWN turn the label reads "Dealt to you" and the urgency belongs to the timer
   instead, so the marker stands down. */
#roomDealLabel.mine{color:var(--ink-2);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
#roomDealLabel.mine::before{display:none}

/* --- the player card -----------------------------------------------------------------------
   Two problems, one cause. The Career panel held two small tiles inside a box sized for far
   more, so the top third of the page was empty; and both leaderboards rendered 710 runs and
   378 runs at identical weight, so the ranking was carried entirely by row order.

   The lists are named for what they ARE -- the Orange Cap and the Purple Cap, the IPL's own
   season-long awards, whose colours already existed as --cap-orange/--cap-purple. A bar
   behind each name makes the gaps legible at a glance; the figure stays for anyone reading
   properly. Nothing was invented to make this louder, it just stopped hiding what it had. */

.career-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:34px 0 0;
  background:var(--line);border-top:2px solid var(--gold);border-bottom:1px solid var(--line)}
.career-band div{background:var(--bg);padding:26px 20px;text-align:center}
.career-band b{display:block;font-family:var(--display);font-size:clamp(44px,6vw,68px);
  font-weight:400;line-height:.9;color:var(--gold)}
.career-band span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-top:12px}

.caps{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
@media (max-width:760px){.caps{grid-template-columns:1fr;gap:34px}}
.cap-head{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.cap-head em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-3);font-weight:400;margin-left:auto}
.cap-head .dot{width:11px;height:11px;border-radius:50%;flex:none}
.cap-col.orange .dot{background:var(--cap-orange);box-shadow:0 0 10px rgba(201,122,53,.8)}
.cap-col.purple .dot{background:var(--cap-purple);box-shadow:0 0 10px rgba(143,102,184,.8)}

/* Each row is its own bar: the fill sits behind the text rather than beside it, so a name
   is never pushed around by how many runs it has. */
.cap-row{position:relative;display:flex;align-items:center;gap:12px;padding:13px 12px;
  border-bottom:1px dashed var(--line);overflow:hidden}
.cap-row .bar{position:absolute;inset:0 auto 0 0;z-index:0;border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.3,1,.4,1)}
.cap-col.orange .bar{background:linear-gradient(90deg,rgba(201,122,53,.30),rgba(201,122,53,.07))}
.cap-col.purple .bar{background:linear-gradient(90deg,rgba(143,102,184,.30),rgba(143,102,184,.07))}
.cap-row .rk{position:relative;z-index:1;font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--ink-3);width:16px;flex:none}
.cap-row .nm{position:relative;z-index:1;font-size:15.5px;font-weight:650;color:var(--ink-2)}
.cap-row .val{position:relative;z-index:1;margin-left:auto;font-family:var(--mono);
  font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}

/* Only the leader is dressed up -- a cap has one holder, and if every row were gold the
   ranking would read as a list again. */
.cap-row.lead{padding:17px 12px}
.cap-row.lead .nm{font-size:19px;font-weight:800;color:var(--ink)}
.cap-row.lead .val{font-size:15px}
.cap-col.orange .cap-row.lead .nm,.cap-col.orange .cap-row.lead .val{color:var(--cap-orange)}
.cap-col.purple .cap-row.lead .nm,.cap-col.purple .cap-row.lead .val{color:var(--cap-purple)}
.cap-row.lead .rk{color:var(--ink)}
.cap-empty{padding:22px 12px;font-size:14.5px;color:var(--ink-3);line-height:1.6}

/* The six career totals: a quieter grid under the three headline figures, so the band
   above stays the thing you read first and these are the detail you scan after. */
.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.career-grid div{background:var(--bg);padding:20px 16px;text-align:center}
.career-grid b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;
  line-height:1;color:var(--ink)}
.career-grid span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-top:10px}
@media (max-width:700px){.career-grid{grid-template-columns:repeat(2,1fr)}}

/* --- the account control --------------------------------------------------------------------
   It used to be a 10.5px mono link sitting as a third line inside `.edition`, so it
   inherited caption styling and read as more masthead metadata than as the one thing up
   here you can actually click. It now has its own slot and looks like a control.

   The copy matters as much as the styling: the whole game is playable without an account,
   so "Sign in" alone asks for effort and names no return. "Save your career" is what the
   profile actually gives you -- runs, wickets, titles, the two caps. */


/* Install and the account control share one masthead slot, and the hierarchy between them
   is the whole reason this is a pill and not a second CTA: signing in is the invitation,
   installing is a convenience for somebody who has already decided. So it borrows the
   quiet mono treatment of `.auth-out` rather than the gold of `.auth-cta`, and it never
   competes for the eye with the one thing up here worth clicking.

   A sibling of #authArea, never a child: `renderAuthArea` rewrites that element's whole
   innerHTML on every `loadMe()`, so anything nested inside it would vanish the moment
   somebody signed in. */

.install-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);background:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;
  transition:border-color .16s,color .16s,background .16s}
.install-pill:hover{border-color:var(--gold);color:var(--gold);background:var(--panel-2)}
.install-pill:active{transform:translateY(1px)}

.auth-cta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 18px;border-radius:4px;cursor:pointer;
  border:1px solid var(--gold);background:rgba(245,184,61,.07);
  transition:background .16s,box-shadow .16s,transform .08s}
.auth-cta:hover{background:var(--gold);box-shadow:0 8px 22px -10px rgba(245,184,61,.8)}
.auth-cta:active{transform:translateY(1px)}
.auth-cta-main{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);line-height:1.1}
.auth-cta-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.1}
.auth-cta:hover .auth-cta-main{color:#17120a}
.auth-cta:hover .auth-cta-sub{color:rgba(23,18,10,.72)}

/* Signed in: the chip is the way TO the card, so it says so. */
.auth-me{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--panel);transition:border-color .16s,background .16s}
.auth-me:hover{border-color:var(--gold);background:var(--panel-2)}
.auth-avatar{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-size:15px;
  color:#17120a;background:linear-gradient(145deg,var(--gold-2),var(--gold))}
.auth-me-text{display:flex;flex-direction:column;line-height:1.15}
.auth-me-text b{font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);
  text-transform:none;letter-spacing:0}
.auth-me-text em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.auth-me:hover .auth-me-text em{color:var(--gold)}

.auth-out{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);background:none;border:0;cursor:pointer;padding:4px}
.auth-out:hover{color:var(--red-2)}
/* [A154] Admins only -- a small gold tag beside the chip, not another nav item. */
.auth-admin{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;padding:5px 9px;border-radius:999px;
  border:1px solid rgba(245,184,61,.45)}
.auth-admin:hover{background:rgba(245,184,61,.1)}

/* --- the admin console [A154] -----------------------------------------------------------------
   Built from the pieces the profile page already uses (.career-grid tiles, .room-choices tabs,
   .room-input) plus a plain data table, since this page is read, not played. */
.adm-denied{padding:30px 0;color:var(--ink-2)}
.adm-tabs{margin:18px 0 22px}
.adm-panel{padding-bottom:40px}
.adm-stats{margin-bottom:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){.adm-stats{grid-template-columns:repeat(2,1fr)}}
.adm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.adm-two{grid-template-columns:1fr}}
.adm-card{border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:14px 16px;margin-bottom:14px;min-width:0}
.adm-card p{margin:6px 0 0;color:var(--ink-2)}
.adm-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.adm-card-head em{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
.adm-card-head a{color:var(--gold);text-decoration:none}
.adm-bars{display:flex;align-items:flex-end;gap:3px;height:90px}
.adm-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;position:relative}
.adm-bar span{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.adm-bar em{position:absolute;top:-2px;font-style:normal;font-family:var(--mono);font-size:9px;
  color:var(--ink-3)}
.adm-bars-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;
  color:var(--ink-3);margin-top:6px}
.adm-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.adm-dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.adm-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.adm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm-table{min-width:560px;font-size:13.5px}
.adm-table th,.adm-table td{padding:8px 10px 8px 0;white-space:nowrap}
.adm-table td a{color:var(--ink);text-decoration:none}
.adm-click{cursor:pointer}
.adm-click:hover td{background:var(--panel-2)}
.adm-dim{color:var(--ink-3)}
.adm-ok{color:var(--green)}
.adm-mono{font-family:var(--mono);letter-spacing:.08em}
.adm-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(245,184,61,.45);border-radius:4px;padding:1px 5px;
  vertical-align:middle}
.adm-search{display:flex;gap:10px;margin-bottom:14px}
.adm-search .room-input{flex:1;min-width:0}
.adm-toolbar{display:flex;gap:10px;justify-content:flex-end;margin:12px 0}
.adm-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:0 0 8px}
.adm-empty{color:var(--ink-3);font-size:13.5px}
.adm-acct-head{padding:4px 0 16px}
.adm-acct-name{font-family:var(--display);font-size:32px;color:var(--ink);margin:4px 0}
.adm-actions .room-label{margin-top:12px}
.adm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm-row .room-input{flex:1;min-width:180px}
.adm-danger{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.adm-del{color:var(--red-2);border-color:rgba(226,71,46,.5)}
.adm-del:hover{border-color:var(--red-2);background:rgba(226,71,46,.12)}
#adminAccountOverlay .scorecard-shell{max-width:760px}



/* --- the sign-in window ----------------------------------------------------------------------
   It reused the scorecard shell verbatim: two small mono tab chips, mono labels and a plain
   frame, so the moment someone finally decides to sign up looks like a settings dialog. It
   is a sales page in a box -- it gets a headline, and it repeats the promise the masthead
   button made rather than making the visitor remember it. */

.auth-frame{max-width:420px;padding:0;overflow:hidden}
.auth-hero{padding:30px 30px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,184,61,.10),transparent)}
.auth-hero-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.auth-hero-title{font-family:var(--display);font-size:38px;font-weight:400;line-height:1;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin:12px 0 10px}
.auth-hero-sub{font-size:14px;line-height:1.55;color:var(--ink-3)}
.auth-body{padding:24px 30px 28px}
.auth-frame .room-choices{margin-bottom:20px}
.auth-frame .room-choice{flex:1;text-align:center;font-family:var(--sans);font-size:12.5px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:12px 10px;
  border-radius:3px;background:var(--panel);border:1px solid var(--line-strong);
  color:var(--ink-3)}
.auth-frame .room-choice.sel{background:var(--gold);border-color:var(--gold);color:#17120a}
.auth-frame .room-label{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.auth-frame .room-input{font-family:var(--sans);font-size:16px;font-weight:600;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:3px;
  padding:14px 15px}
.auth-frame .room-input:focus{border-color:var(--gold);background:var(--panel-2)}
.auth-frame .act.lead{width:100%;text-align:center;border-radius:3px;padding:17px 26px;
  font-size:14px;letter-spacing:.1em}
/* What an account is actually for, listed rather than asserted -- the same three things
   the player card shows, so the promise and the payoff match. */
.auth-perks{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px dashed var(--line)}
.auth-perks li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-3);
  padding:5px 0}
.auth-perks li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--gold)}

/* --- the moment worth asking at --------------------------------------------------------------
   A season just ended and the numbers exist; that is when "save your career" means
   something concrete, rather than in a masthead before anything has happened. Shown only
   to a signed-OUT visitor with a finished season. */
.save-prompt{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;
  margin:26px auto 0;max-width:640px;padding:20px 24px;border-radius:4px;
  border:1px solid var(--gold);background:rgba(245,184,61,.07);text-align:left}
.save-prompt .sp-text b{display:block;font-family:var(--sans);font-size:15.5px;
  font-weight:800;color:var(--ink);letter-spacing:.01em}
.save-prompt .sp-text span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px}
.save-prompt .act{flex:none}

/* --- tips ---------------------------------------------------------------------------------
   Deliberately warmer and softer than the sign-in window: that one is asking for a commitment
   and leans on the gold CTA language, this one is asking for a favour and should read as an
   invitation you can decline without noticing. */
.tip-frame{max-width:420px;padding:0;overflow:hidden}
.tip-hero{padding:28px 30px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,184,61,.09),transparent)}
.tip-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.tip-title{font-family:var(--display);font-size:34px;font-weight:400;line-height:1;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin:12px 0 12px}
.tip-sub{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0}
.tip-body{padding:24px 30px 28px;text-align:center}
/* White plate behind the code on purpose: a UPI QR is often photographed off this screen by
   a second phone, and inverting it for the dark theme trades scan reliability for styling. */
.tip-qr{display:block;margin:0 auto 20px;border-radius:6px;background:#fff;padding:10px;
  width:188px;height:188px}
.tip-id{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:12px 14px;border:1px dashed var(--line-strong);border-radius:4px}
.tip-id-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.tip-id code{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold-2)}
.tip-id .act{padding:7px 14px;font-size:11px}
.tip-open{display:block;margin-top:16px;text-align:center;text-decoration:none}
.tip-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);
  margin:14px 0 0;line-height:1.6}
/* Its own line above the legal links, and shaped like a control rather than text. It used
   to sit inside that row behind a separator, which made the one actionable thing in the
   footer read as a fifth piece of boilerplate. */
.tip-foot-row{padding:4px 0 18px}
.tip-foot{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
  padding:11px 22px;border-radius:999px;border:1px solid var(--gold);
  background:rgba(245,184,61,.08);
  transition:background .16s,color .16s,box-shadow .16s,transform .08s}
.tip-foot:hover{background:var(--gold);color:#17120a;
  box-shadow:0 10px 26px -12px rgba(245,184,61,.85)}
.tip-foot:active{transform:translateY(1px)}
.tip-foot svg{width:15px;height:15px;flex:none}
/* Seam lines stroked, ball filled -- the same construction `.ic.ball` uses elsewhere, so
   the mark reads as the site's own ball rather than a generic circle. */
.tip-foot svg circle{fill:currentColor;stroke:currentColor;stroke-width:1.4}
.tip-foot svg path{fill:none;stroke:rgba(10,15,28,.55);stroke-width:1.4;stroke-linecap:round}
.tip-foot:hover svg path{stroke:rgba(23,18,10,.5)}

/* The post-season ask, kept visually quieter than the save-career prompt beside it -- one is
   the thing we want people to do, the other is a favour. */
.tip-inline{margin:14px auto 0;max-width:640px;text-align:center;font-size:13.5px;
  color:var(--ink-3)}
.tip-inline button{font:inherit;color:var(--gold);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tip-inline button:hover{color:var(--gold-2)}

/* ============ SEASON ANALYSIS ============
   Broadcast-graphic register: a dark plate, a display-face headline, and phase colour used
   consistently everywhere (powerplay gold, middle steel, death red) so a viewer learns the
   key once on the Manhattan and reads every other chart for free. */
.an-wrap{max-width:1120px;margin:0 auto;padding:0 4px 40px}

.an-panel{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018);
  padding:20px 20px 16px;margin-bottom:20px}
.an-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:16px}
.an-panel-head h3{font-family:var(--display);font-size:22px;text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 4px;color:var(--ink);font-weight:400}
.an-panel-head p{margin:0;font-size:13px;color:var(--ink-3);max-width:52ch}
.an-controls{display:flex;gap:10px;flex-wrap:wrap}
.an-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.an-tab{background:none;border:0;padding:7px 14px;cursor:pointer;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  transition:background .15s,color .15s}
.an-tab + .an-tab{border-left:1px solid var(--line-strong)}
.an-tab:hover{color:var(--ink)}
.an-tab.sel{background:var(--gold);color:#141414;font-weight:700}

/* Wide charts scroll inside their own box; the page body never scrolls sideways. */
.an-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.an-chart{display:block;width:100%;min-width:560px;height:auto}
.an-axis{font-family:var(--mono);font-size:10px;fill:var(--ink-3);letter-spacing:.06em}
.an-band-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;opacity:.85}
.an-seg{font-family:var(--mono);font-size:11px;fill:#0e1116;font-weight:700}
.an-col rect{transition:opacity .12s}
.an-col:hover rect{opacity:1}

.an-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:18px}
.an-phase{border:1px solid var(--line);border-left:3px solid var(--tint);border-radius:8px;
  padding:14px 16px;background:rgba(255,255,255,.015)}
.an-phase-name{font-family:var(--display);font-size:19px;text-transform:uppercase;
  color:var(--tint);letter-spacing:.02em}
.an-phase-overs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.an-phase-rate{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.an-phase-rate b{font-family:var(--mono);font-size:26px;color:var(--ink);line-height:1}
.an-phase-rate span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.an-phase-rows div{font-size:12.5px;color:var(--ink-3);line-height:1.75}
.an-phase-rows em{font-family:var(--mono);font-style:normal;color:var(--ink-2)}

.an-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
/* Five boards is a prime count, so `auto-fit` orphans one of them onto a row of its own
   at any width that fits four -- stretched to full width and looking like a different
   component. The count is fixed and known, so it is stated rather than inferred. */
.an-lists-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1180px){.an-lists-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.an-lists-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:470px){.an-lists-5{grid-template-columns:minmax(0,1fr)}}
.an-lead{border:1px solid var(--line);border-radius:12px;padding:14px 16px 10px;
  background:rgba(255,255,255,.018);border-top:3px solid var(--ink-3)}
.an-lead-orange{border-top-color:#ff8c1a}
.an-lead-purple{border-top-color:#9b5de5}
.an-lead-econ{border-top-color:var(--mint)}
.an-lead-sr{border-top-color:var(--gold)}
.an-lead-rating{border-top-color:#4aa8ff}

.an-lead-head{margin-bottom:10px}
.an-lead-head b{display:block;font-family:var(--display);font-size:19px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);font-weight:400}
.an-lead-head span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
/* Two lines per row: name and value on the first, team and detail on the second. Five
   boards across a desktop width leave each card ~215px, which one line cannot hold a
   name, a team tag, a detail and a number in -- the name lost that contest and ellipsised
   to "T St...". Giving the name the whole line minus its own number is what makes it
   legible; nothing was dropped, it moved down. `min-width:0` is what actually lets the
   ellipsis apply inside a grid track, whose default `auto` minimum refuses to shrink. */
.an-lead-row{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:baseline;
  column-gap:7px;row-gap:1px;padding:8px 0;border-top:1px solid var(--line);font-size:13.8px}
.an-lead-pos{grid-column:1;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.an-lead-name{grid-column:2;min-width:0;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-lead-value{grid-column:3;font-family:var(--mono);font-size:14.5px;color:var(--ink);font-weight:700}
.an-lead-sub{grid-column:2/4;min-width:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-lead-sub .an-team{margin:0 6px 0 0}
.an-lead-row.top .an-lead-name{color:var(--ink);font-weight:650}
.an-lead-row.top .an-lead-value{color:var(--gold-2)}

.an-key{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 2px 0}
.an-key-pip{width:7px;height:7px;border-radius:50%;background:var(--hot);opacity:.9;flex:none}

/* --- [A110] phase specialists, setting/chasing, batting order --- */
.an-lists-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.an-lead-death{border-top-color:var(--hot)}
.an-lead-power{border-top-color:var(--gold)}
.an-lead-avg{border-top-color:#4aa8ff}
.an-lead .cap-empty{font-size:12.5px;color:var(--ink-3);padding:10px 0 4px}

/* --- [A115] boundaries --- */
.an-bdy{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-bottom:16px}
.an-bdy-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  background:rgba(255,255,255,.015);border-top:3px solid var(--tint,var(--ink-3))}
.an-bdy-head b{display:block;font-family:var(--display);font-size:18px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--tint);font-weight:400}
.an-bdy-head span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.an-bdy-counts{display:flex;gap:26px;margin:12px 0 14px}
.an-bdy-counts em{display:block;font-family:var(--mono);font-size:26px;font-style:normal;
  font-weight:700;color:var(--ink);line-height:1.1}
.an-bdy-counts span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.an-bdy-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;
  margin-bottom:7px}
.an-bdy-bar span{display:block;height:100%;background:var(--tint,var(--ink-3));
  border-radius:3px}
.an-bdy-share b{font-family:var(--mono);font-size:15px;color:var(--ink);font-weight:700}
.an-bdy-share span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-left:7px}
.an-lead-six{border-top-color:#9b5de5}
.an-lead-four{border-top-color:#4aa8ff}

.an-vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.an-split{border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  background:rgba(255,255,255,.015);border-left:3px solid var(--tint,var(--ink-3))}
.an-split-first{--tint:var(--gold)}
.an-split-chase{--tint:var(--mint)}
.an-split-title{font-family:var(--display);font-size:19px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--tint)}
.an-split-big{font-family:var(--mono);font-size:30px;color:var(--ink);line-height:1.2;
  margin:6px 0 10px}
.an-split-big i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-left:8px}
.an-split-gauge{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;
  margin-bottom:10px}
.an-split-gauge span{display:block;height:100%;background:var(--tint);border-radius:3px}
.an-split-rows div{font-size:12.5px;color:var(--ink-3);line-height:1.75}
.an-split-rows em{font-family:var(--mono);font-style:normal;color:var(--ink-2)}

/* [A113] spin against pace, per phase */
.an-sty{width:100%;border-collapse:collapse;min-width:460px}
.an-sty th,.an-sty td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.an-sty thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;white-space:nowrap}
.an-sty thead th i{display:block;font-style:normal;font-size:9.5px;color:var(--ink-3);
  opacity:.75;letter-spacing:.1em;margin-top:2px}
.an-sty tbody th{font-family:var(--display);font-size:15px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-2);font-weight:400;white-space:nowrap}
.an-sty tbody td b{font-family:var(--mono);font-size:16px;color:var(--ink);font-weight:700}
.an-sty tbody td i{display:block;font-family:var(--mono);font-style:normal;font-size:10px;
  color:var(--ink-3);margin-top:3px;white-space:nowrap}
.an-sty tbody tr:last-child th,.an-sty tbody tr:last-child td{border-bottom:none}
/* A style gets a colour so the two rows read apart at a glance; unknown stays neutral
   deliberately -- it is an absence of information, not a third kind of bowling. */
.an-sty-pace tbody th,.an-sty-pace th[scope=row]{color:var(--hot)}
.an-sty-spin tbody th,.an-sty-spin th[scope=row]{color:#4aa8ff}
.an-sty-unknown th[scope=row]{color:var(--ink-3)}
.an-sty-none{color:var(--ink-3);font-family:var(--mono)}
.an-sty-foot{margin:12px 0 0;font-size:12px;color:var(--ink-3);max-width:70ch;line-height:1.6}
.an-sty-foot b{color:var(--ink-2);font-weight:600}

.an-key-swatch{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block;
  margin:0 6px 0 14px;vertical-align:middle}
.an-key-swatch:first-child{margin-left:0}
.an-key-swatch.gold{background:var(--gold);opacity:.7}
.an-key-swatch.mint{background:var(--mint)}
.an-team{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-strong);
  border-radius:3px;padding:1px 4px;margin-left:5px;white-space:nowrap}

/* --- the analysis page's frame: hero, chapter bar, chapters, honours ---------------------
   One loud thing per screen: the hero's headline, then each chapter's number and title.
   Everything inside a chapter stays at panel volume so the chapters, not the panels, are
   what the eye steps between. */
.an-hero{position:relative;padding:34px 0 30px;margin-bottom:6px;overflow:hidden}
.an-hero::after{content:"";position:absolute;right:-60px;top:-40px;width:420px;height:420px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,184,61,.16),transparent 70%)}
.an-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.an-title{font-family:var(--display);font-size:clamp(42px,7.4vw,86px);line-height:.92;
  text-transform:uppercase;letter-spacing:.005em;color:var(--ink);margin:0 0 30px;font-weight:400}
.an-hero-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.an-hero-stat{padding:16px 18px 14px;border-left:1px solid var(--line)}
.an-hero-stat:first-child{border-left:0;padding-left:0}
.an-hero-stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,42px);
  line-height:1;color:var(--gold-2);letter-spacing:.01em}
.an-hero-stat.six b{color:var(--hot)}
.an-hero-stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* Sits under the site's own sticky bar (64px) rather than over it. */
.an-nav{position:sticky;top:64px;z-index:20;display:flex;align-items:center;gap:14px;
  justify-content:space-between;margin:0 -10px 10px;padding:10px;
  background:rgba(6,13,31,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.an-nav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.an-nav-links::-webkit-scrollbar{display:none}
.an-nav-links button{flex:none;background:none;border:0;cursor:pointer;padding:7px 11px;
  border-radius:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.an-nav-links button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.an-nav-links button i{font-style:normal;color:var(--gold);margin-right:7px}
.an-nav-scope{flex:none}

.an-chapter{padding:40px 0 8px;scroll-margin-top:130px}
.an-chapter-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  align-items:start;margin-bottom:22px}
.an-chapter-num{font-family:var(--display);font-size:64px;line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(245,184,61,.55);padding-top:2px}
.an-chapter-title{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,36px);
  text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:0 0 10px;color:var(--ink);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.an-chapter-line{margin:0;max-width:66ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.an-chapter-line b{color:var(--ink);font-weight:650}
.an-scope-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:4px 8px;
  border-radius:4px;border:1px solid var(--line-strong);color:var(--ink-3)}
.an-scope-tag.yours{border-color:var(--gold);color:var(--gold)}
.an-sub{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);margin:26px 0 12px}
.an-sub span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink-3);margin-top:3px}
.an-chapter .an-lists{margin-bottom:20px}
.an-lists-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.an-lists-3{grid-template-columns:minmax(0,1fr)}}

/* The honours: six cards, the four awards carrying their winner's crest large and faint
   behind the number, the way a broadcast puts a team's badge behind a player's stat. */
.an-honours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.an-award{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px 16px;min-height:168px;--acc:var(--gold);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 16%,transparent),rgba(255,255,255,.015) 60%)}
.an-award::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.an-award-orange{--acc:var(--cap-orange)}
.an-award-purple{--acc:var(--cap-purple)}
.an-award-econ{--acc:var(--mint)}
.an-award-sr{--acc:var(--gold)}
.an-award-moment{--acc:var(--hot)}
.an-award-crest{position:absolute;right:-14px;bottom:-18px;width:132px;height:132px;
  object-fit:contain;opacity:.16;pointer-events:none}
.an-award-star{display:flex;align-items:center;justify-content:center;font-size:110px;
  color:var(--gold);line-height:1}
.an-award-label{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);font-weight:700}
.an-award-value{position:relative;font-family:var(--display);font-size:54px;line-height:1.02;
  color:var(--ink);margin:8px 0 2px}
.an-award-value i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-left:8px}
.an-award-name{position:relative;font-size:17px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-award-detail{position:relative;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  margin-top:3px}
.an-award-detail .an-team{margin:0 6px 0 0}
.an-award.yours .an-award-name::after{content:" · your side";font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:400}
@media (max-width:900px){.an-honours{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .an-honours{gap:10px}
  .an-award{min-height:0;padding:14px 14px 12px}
  .an-award-value{font-size:36px}
  .an-award-value i{display:block;margin:2px 0 0;font-size:9.5px}
  .an-award-name{font-size:15px}
  .an-award-crest{width:92px;height:92px}
  .an-award-star{font-size:78px}
  .an-award.yours .an-award-name::after{content:none}
}

/* Phase cards with their three share bars. */
.an-chapter .an-phases{margin:14px 0 0}
.an-phase{padding:16px 18px}
.an-phase-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  margin-bottom:12px}
.an-phase-top .an-phase-overs{margin-bottom:0}
.an-phase-top .an-phase-rate{flex-direction:column;align-items:flex-end;gap:2px;margin:0}
.an-phase-top .an-phase-rate b{font-size:30px;color:var(--tint)}
.an-phase-rows{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.an-shares{display:grid;gap:6px}
.an-share{display:grid;grid-template-columns:58px minmax(0,1fr) 38px;align-items:center;gap:8px}
.an-share span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.an-share div{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.an-share div i{display:block;height:100%;background:var(--tint);border-radius:3px;opacity:.85}
.an-share b{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}

/* Setting against chasing: two cards facing off. */
.an-chapter .an-vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  margin-bottom:20px}
.an-vs-mid{font-family:var(--display);font-size:26px;color:var(--ink-3);text-transform:uppercase}
.an-chapter .an-split-big{font-family:var(--display);font-size:56px;line-height:1}
@media (max-width:560px){
  .an-chapter .an-vs{grid-template-columns:minmax(0,1fr)}
  .an-vs-mid{display:none}
}

.an-bdy-totals{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:16px}
.an-bdy-totals b{display:block;font-family:var(--display);font-weight:400;font-size:44px;
  line-height:1;color:var(--ink)}
.an-bdy-totals div:nth-child(2) b{color:var(--hot)}
.an-bdy-totals div:nth-child(3) b{color:var(--gold-2)}
.an-bdy-totals span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* Leaderboard rows gain a bar measured against the leader (--frac), and your own side's
   rows are lit. The "show all" fold hides rows past the limit until asked. */
.an-lead-row{position:relative}
.an-lead-bar{grid-column:2/4;height:3px;border-radius:2px;margin-top:5px;
  background:linear-gradient(90deg,var(--lead-acc,var(--ink-3)) calc(var(--frac)*100%),rgba(255,255,255,.05) 0)}
.an-lead-orange{--lead-acc:var(--cap-orange)}
.an-lead-purple,.an-lead-six{--lead-acc:var(--cap-purple)}
.an-lead-econ{--lead-acc:var(--mint)}
.an-lead-sr,.an-lead-power{--lead-acc:var(--gold)}
.an-lead-avg,.an-lead-four,.an-lead-rating{--lead-acc:#4aa8ff}
.an-lead-death{--lead-acc:var(--hot)}
.an-lead-row.yours{background:linear-gradient(90deg,rgba(245,184,61,.08),transparent);
  margin:0 -8px;padding-left:8px;padding-right:8px}
.an-lead-limit-5:not(.open) .an-lead-row:nth-child(n+7){display:none}
.an-lead-more-btn{display:block;width:100%;margin-top:6px;padding:9px 0 4px;background:none;
  border:0;border-top:1px solid var(--line);cursor:pointer;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.an-lead-more-btn:hover{color:var(--gold)}

@media (max-width:760px){
  .an-hero{padding-top:20px}
  .an-hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .an-hero-stat{padding:12px 10px 10px}
  .an-hero-stat:nth-child(4){border-left:0;padding-left:0}
  .an-hero-stat:nth-child(n+4){border-top:1px solid var(--line)}
  .an-nav{gap:8px;padding:8px 10px}
  .an-nav-links{flex:1}
  .an-nav-links button{padding:7px 8px;font-size:10.5px}
  .an-nav-scope .an-tab{padding:7px 9px;font-size:10px}
  .an-nav-scope .an-long{display:none}
  .an-chapter{padding-top:30px}
  .an-chapter-head{gap:14px}
  .an-chapter-num{font-size:44px}
  .an-chapter-line{font-size:14.5px}
}

/* --- the slot picker: a draft pick placed from the bottom of a phone screen ----------------
   Only ever opened when the draft's columns are stacked (<=900px); see common.js. Tap
   targets are 52px, over the ~44px every mobile HIG asks for, because this is the single
   most repeated action in the app -- twelve times a draft. */
.slot-sheet{position:fixed;inset:0;z-index:65}
.slot-sheet-back{position:absolute;inset:0;background:rgba(3,7,17,.62)}
.slot-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--panel);
  border-top:2px solid var(--gold);border-radius:14px 14px 0 0;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 32px -8px rgba(0,0,0,.6);animation:slotSheetUp .18s ease-out}
@keyframes slotSheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.slot-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.slot-sheet-head span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.slot-sheet-head b{display:block;font-family:var(--display);font-size:24px;font-weight:400;
  text-transform:uppercase;color:var(--ink);line-height:1.1;margin-top:2px}
.slot-sheet-x{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:7px;padding:9px 12px;flex:none}
.slot-sheet-status{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  margin:6px 0 14px}
.slot-sheet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.slot-sheet-slot{min-height:52px;font-family:var(--mono);font-size:15px;font-weight:700;
  border:1px solid var(--gold);border-radius:8px;background:rgba(245,184,61,.08);color:var(--gold-2)}
.slot-sheet-slot:active{background:var(--gold);color:#17120a}
.slot-sheet-slot.impact{grid-column:span 2}

/* ---------------------------------------------------------------------------------------
   THE AUCTION [A136]. A broadcast auction table: one player on the stage, the price in big
   mint figures, the leading franchise's colours beside it, every purse in the room at a
   glance. Franchise colours appear ONLY as team identity (chips, purse bars, the SOLD
   stamp) -- the page's own accents keep their one job each.
--------------------------------------------------------------------------------------- */
.auc-hero{padding:34px 0 8px;position:relative;z-index:1;max-width:760px}
.auc-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold)}
.auc-title{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,72px);line-height:.95;
  margin:10px 0 14px;text-transform:uppercase;letter-spacing:.01em}
.auc-title span{color:var(--gold)}
.auc-lede{color:var(--ink-2);font-size:15.5px;margin:0}

.auc-franchises{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px;
  position:relative;z-index:1}
.auc-fr{font:inherit;cursor:pointer;text-align:left;position:relative;overflow:hidden;
  border:1px solid var(--line);border-top:3px solid var(--team,var(--line));
  background:radial-gradient(170px 120px at 8% 108%,var(--team,transparent),transparent 72%),
    var(--team-deep,var(--panel));
  border-radius:12px;padding:14px 14px 16px;color:var(--ink);min-height:128px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;transition:transform .12s,border-color .12s}
.auc-fr-crest{position:absolute;right:10px;top:10px;height:56px;max-width:64px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.auc-fr b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:#fff;position:relative}
.auc-fr span{font-size:12.5px;color:var(--ink-2);line-height:1.3}
.auc-fr:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.auc-fr.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 10px 30px rgba(245,184,61,.2)}

.auc-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:var(--mono);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 7px 3px 4px;border-radius:6px;
  min-width:40px;line-height:1.2;background:var(--team-deep,#334);color:var(--team-ink,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--team,#fff) 45%,transparent)}
.auc-chip img{height:16px;width:18px;object-fit:contain}
.auc-chip.big{font-size:15px;padding:5px 11px 5px 6px;min-width:58px;border-radius:8px;gap:7px}
.auc-chip.big img{height:26px;width:30px}

.auc-floor{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;padding-top:26px;position:relative;z-index:1}
.auc-lotbar{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.auc-lotbar em{font-style:normal;color:var(--ink-3);letter-spacing:.1em}

.auc-stage{position:relative;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
  background:
    radial-gradient(420px 220px at 85% 0%,rgba(245,184,61,.16),transparent 70%),
    linear-gradient(180deg,var(--panel-2),var(--panel))}
.auc-card{padding:22px 24px 18px}
.auc-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.auc-card-season{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gold);
  text-transform:uppercase}
.auc-card-name{font-family:var(--display);font-size:clamp(36px,5.6vw,58px);line-height:1;
  text-transform:uppercase;margin:6px 0 10px;letter-spacing:.01em}
.auc-card-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px}
.auc-card-meta > span:not(.ic){margin-right:8px}
.auc-card-rating .rating-badge{font-size:22px;padding:8px 12px;border-radius:9px}
.auc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:4px;padding:2px 7px;color:var(--ink-2)}
.auc-tag.os{border-color:rgba(61,220,151,.5);color:var(--mint)}
.auc-stats{justify-content:flex-start;margin:18px 0 4px;gap:30px}
.auc-card-base{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px}
.auc-card-base b{color:var(--ink);font-size:13px;letter-spacing:0;margin-left:6px}

.auc-stamp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;background:rgba(5,11,26,.72);pointer-events:none}
.auc-stamp b{font-family:var(--display);font-weight:400;font-size:clamp(64px,11vw,112px);line-height:1;
  color:var(--stamp);border:6px solid var(--stamp);border-radius:14px;padding:4px 22px 0;
  transform:rotate(-9deg);letter-spacing:.04em;text-shadow:0 0 30px rgba(0,0,0,.4)}
.auc-stamp span{font-family:var(--mono);font-size:20px;font-weight:700;display:flex;gap:10px;align-items:center}
.auc-stamp.on b{animation:stampIn .38s cubic-bezier(.2,1.6,.4,1) both}
.auc-stamp.on span{animation:fadeUp .4s .25s ease-out both}
@keyframes stampIn{from{transform:rotate(-9deg) scale(2.6);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:1}}
@keyframes fadeUp{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.auc-bidbox{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:18px 20px 16px}
.auc-bidrow{display:flex;align-items:center;gap:18px}
.auc-price-wrap{flex:1;min-width:0}
.auc-price-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.auc-price{font-family:var(--display);font-size:clamp(46px,7vw,72px);line-height:1;color:var(--mint);
  font-variant-numeric:tabular-nums;margin-top:4px}
.auc-price.bump{animation:bump .22s ease-out}
@keyframes bump{from{transform:scale(1.07);color:var(--gold-2)}to{transform:none}}
.auc-leader{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);min-width:70px}
.auc-leader.you span{color:var(--gold)}
.auc-ring{position:relative;width:62px;height:62px;flex:none}
.auc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.auc-ring circle{fill:none;stroke-width:4}
.auc-ring .track{stroke:var(--panel-3)}
.auc-ring .fill{stroke:var(--gold);stroke-linecap:round;transition:stroke .2s}
.auc-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:19px}
.auc-ring.urgent .fill{stroke:var(--hot)}
.auc-ring.urgent b{color:var(--red-2);animation:timerPulse 1s ease-in-out infinite}
.auc-bigbid{width:100%;margin-top:16px;padding:18px;font-size:18px;letter-spacing:.06em}
.auc-limit{display:flex;align-items:center;gap:12px;margin-top:16px}
.auc-limit .act.minor{font-size:20px;padding:6px 18px}
.auc-limit-val{flex:1;text-align:center}
.auc-limit-val span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.auc-limit-val b{font-family:var(--mono);font-size:26px;font-variant-numeric:tabular-nums}
.auc-limit-quick{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.auc-bidbox.rolling .act{opacity:.35;pointer-events:none}
.auc-note{min-height:20px;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.auc-upnext{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.auc-upnext span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-right:6px}

.auc-side-col{border:1px solid var(--line);background:var(--panel);border-radius:14px;overflow:hidden;
  align-self:start}
.auc-purse{padding:14px 18px 8px;display:flex;flex-direction:column;gap:2px}
.auc-purse b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--ink)}
.auc-purse span{font-size:12.5px;color:var(--ink-3)}
.auc-teams{padding:6px 12px 10px}
.auc-team{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  padding:6px 6px;border-radius:7px;font-size:12px}
.auc-team.you{background:rgba(245,184,61,.08);box-shadow:inset 0 0 0 1px rgba(245,184,61,.3)}
.auc-team-bar{height:6px;background:var(--panel-3);border-radius:3px;overflow:hidden}
.auc-team-bar i{display:block;height:100%;border-radius:3px;transition:width .5s ease}
.auc-team b{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.auc-team span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);min-width:54px;text-align:right}
.auc-feed{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 12px 12px}
.auc-feed-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:7px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.auc-feed-row em{font-style:normal;color:var(--ink-3);font-family:var(--mono);font-size:11px}
.auc-feed-row b{font-family:var(--mono);font-size:12px;min-width:62px;text-align:right}
.auc-feed-row .dim{color:var(--ink-3);font-weight:500}
.auc-feed-row.unsold .auc-feed-name{color:var(--ink-3)}
.auc-feed-row.mine{background:rgba(245,184,61,.07)}
.auc-feed-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.auc-squad-wrap{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  overflow:hidden;position:relative;z-index:1}
.auc-squad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:12px}
.auc-slot{min-height:54px;border:1px dashed var(--line-strong);border-radius:8px;opacity:.5}
.auc-slot.filled{opacity:1;border:1px solid var(--line);background:var(--panel-2);padding:8px 9px;
  display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.auc-slot.filled span{font-size:12.5px;font-weight:700;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.auc-slot.filled b{font-family:var(--mono);font-size:11px;color:var(--mint)}
.auc-slot .ic{margin:0 0 2px}

.auc-fill-list{margin-top:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  position:relative;z-index:1}
.auc-fill-row{display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid var(--line)}
.auc-fill-name{flex:1;cursor:pointer;font-weight:700}
.auc-fill-name em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--ink-3)}

.auc-twelve{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:22px;position:relative;z-index:1}
.auc-twelve .col{max-height:none}
.auc-order-row{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s}
.auc-order-row:hover{background:var(--panel-2)}
.auc-order-row.sel{background:rgba(245,184,61,.14);box-shadow:inset 3px 0 0 var(--gold)}
.auc-order-row.bad .auc-o-name{color:var(--red-2)}
.auc-order-row.bench.target{box-shadow:inset 3px 0 0 var(--mint)}
.auc-order-row b{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-left:auto}
.auc-pos{font-family:var(--mono);font-size:10.5px;color:var(--gold);min-width:52px;letter-spacing:.06em}
.auc-o-name{font-weight:700;font-size:14px}

@media (max-width:900px){
  .auc-floor,.auc-twelve{grid-template-columns:1fr}
  .auc-franchises{grid-template-columns:repeat(2,1fr)}
  .auc-squad{grid-template-columns:repeat(3,1fr)}
  .auc-card{padding:18px 16px 14px}
  .auc-stats{gap:18px}
  /* Not sticky: the box is taller than what is left of a phone screen, so pinning it
     covered the very player being bid on (seen on a 375px viewport, not guessed). */
  .auc-bidbox{padding:14px 14px 12px}
  .auc-bigbid{margin-top:12px;padding:15px}
  .auc-bidbox .actions.minor-row{flex-wrap:nowrap;gap:6px}
  .auc-bidbox .act.minor{padding:9px 8px;font-size:10px;letter-spacing:.02em;flex:1}
  .auc-limit-quick .act.minor{flex:0 1 auto}
}

/* --- the auction: retentions and Right to Match [A138] --- */
.auc-retain{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:22px;position:relative;z-index:1}
.auc-retain-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.auc-retain-row.kept{background:rgba(245,184,61,.1);box-shadow:inset 3px 0 0 var(--gold)}
.auc-retain-name{flex:1;font-weight:700;cursor:pointer;font-size:14px}
.auc-retain-name .auc-tag{margin-left:6px;font-style:normal}
.auc-season{font-family:var(--mono);font-size:12px;background:var(--panel-3);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:6px;padding:5px 6px}
.auc-season-one{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:0 6px}
.auc-kept-row{display:grid;grid-template-columns:22px 1fr auto auto;gap:8px;align-items:baseline;
  padding:10px 18px;border-bottom:1px solid var(--line);font-size:14px}
.auc-kept-row span,.auc-kept-row em{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-style:normal}
.auc-kept-row i{font-style:normal;font-family:var(--mono);color:var(--mint);font-size:12.5px}
.auc-retain-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px}
.auc-retain-totals div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel-2)}
.auc-retain-totals b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.auc-retain-totals span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.auc-rtm-shell{max-width:520px}
.auc-rtm .over-line{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold)}
.auc-rtm .call{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;
  text-transform:uppercase;margin:8px 0 12px}
.auc-rtm .room-note{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);line-height:1.55}
.auc-rtm p{color:var(--ink-2);font-size:15px}
.auc-rtm p b{color:var(--ink)}
.auc-rtm p em{font-style:normal;color:var(--ink-3);font-size:13px}
.auc-rtm .actions{margin-top:18px}
.auc-rtm-tag{font-style:normal;color:var(--gold)!important;font-weight:700}
.auc-stamp em{font-family:var(--mono);font-size:13px;color:var(--gold-2);font-style:normal;letter-spacing:.04em;
  animation:fadeUp .4s .35s ease-out both}
@media (max-width:900px){
  .auc-retain{grid-template-columns:1fr}
  /* Name on its own line, controls beneath: at 375px one line clipped the Keep button. */
  .auc-retain-row{flex-wrap:wrap;row-gap:8px}
  .auc-retain-name{flex:1 1 calc(100% - 60px)}
  .auc-retain-row .act.minor{margin-left:auto}
}

/* --- auction rooms [A139] --- */
.auc-style-switch{margin:14px 0 0}
.auc-style-switch .room-choice{padding:6px 12px;font-size:11px}
.auc-owner{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--gold);
  max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auc-team:has(.auc-owner){grid-template-columns:auto auto 1fr auto auto}
.auc-lobby-franchises{grid-template-columns:repeat(5,1fr);padding:12px;margin-top:0;gap:8px}
.auc-lobby-franchises .auc-fr{min-height:96px;padding:10px}
.auc-lobby-franchises .auc-fr-crest{height:40px;max-width:46px}
.auc-lobby-franchises .auc-fr b{font-size:22px}
.auc-fr.taken{opacity:.45;cursor:not-allowed}
.auc-fr .auc-fr-owner{font-family:var(--mono);font-size:10px;color:var(--gold)}
@media (max-width:900px){ .auc-lobby-franchises{grid-template-columns:repeat(3,1fr)} }
/* The lobby column is height-capped like the draft's panels, so the franchise grid added
   under the player list squeezed the list to nothing. A lobby is short; let it grow. */
#roomLobby .col{max-height:none}
#roomLobby #lobbyPlayers{flex:none}
.auc-retain-row.taken{opacity:.45}

/* --- auction sound switches [A143] --- */
.auc-lotbar{flex-wrap:wrap;gap:8px}
.auc-lotbar em{margin-left:auto}
.auc-sound{display:inline-flex;gap:6px;margin-left:10px}
.auc-sound-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid var(--line-strong);background:none;
  color:var(--ink-3);cursor:pointer}
.auc-sound-btn.on{color:var(--gold);border-color:rgba(245,184,61,.5)}

/* =========================================================================================
   THE REDESIGN (2026-09-30): crests and team colour. Everything below is new; the team
   colour variables (--team, --team-deep, --team-ink) come from crests.css, generated from
   the crest images themselves by tools.build_crests, and reach an element through
   crestClass(url) in common.js.
   ========================================================================================= */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  font-family:var(--sans);font-weight:750;font-size:15px;padding:13px 22px;cursor:pointer;
  border:1px solid transparent;text-decoration:none;transition:filter .15s,border-color .15s,background .15s}
.btn.primary{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1204;
  box-shadow:0 10px 26px -8px rgba(245,184,61,.55)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.03)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn:disabled{opacity:.5;cursor:wait}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;
  box-shadow:0 0 0 4px rgba(61,220,151,.15)}

/* --- home --- */
.home-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:32px;align-items:center;padding:60px 0 36px}
.home .kicker{font:600 11px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.home-title{font:400 clamp(46px,6.4vw,84px)/.94 var(--display);text-transform:uppercase;
  margin:18px 0 20px;letter-spacing:.01em}
.home-title em{font-style:normal;color:var(--gold)}
.home-lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:520px;margin:0 0 28px}
.home-lede b{color:var(--ink)}
.home-cta{display:flex;gap:12px;flex-wrap:wrap}
/* [A201] Three heroes, three buttons: a little less side padding keeps them on one line at
   1024 px (they needed 456 px of a 452 px column); narrower screens still wrap. */
.home-cta .btn{padding-left:18px;padding-right:18px}
.home-mode{display:flex;align-items:center;gap:12px;margin-top:18px}
.home-mode-label{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.home-mode .room-choices{margin:0}
.home-today{display:flex;align-items:center;gap:12px;margin-top:24px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);max-width:520px;
  font-size:14px;line-height:1.45;color:var(--ink-2);text-decoration:none;transition:border-color .15s}
.home-today:hover{border-color:var(--line-strong)}
.home-today img{height:34px;width:40px;object-fit:contain;flex:none}
.home-today b{color:var(--ink)}

/* three real franchise-seasons, fanned -- the game's whole idea in one picture */
.home-fan{position:relative;height:430px}
.fan-card{position:absolute;width:212px;border-radius:18px;overflow:hidden;background:var(--panel);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.fan-band{height:132px;position:relative;padding:16px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(200px 130px at 6% 110%,var(--team) 0%,transparent 75%),var(--team-deep);
  border-top:4px solid var(--team)}
.fan-band img{position:absolute;right:10px;top:12px;height:62px;max-width:78px;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.fan-name{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--team-ink);max-width:104px;line-height:1.25;position:relative}
.fan-year{font:400 50px/1 var(--display);color:#fff;position:relative}
.fan-rows{padding:6px 14px 12px}
.fan-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.fan-row:last-child{border:0}
.fan-row.star{font-weight:750}
.fan-role{font:10px var(--mono);color:var(--ink-3);letter-spacing:.1em;width:34px;flex:none}
.fan-rate{margin-left:auto;font:700 13px var(--mono);padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.07)}
.fan-row.star .fan-rate{background:var(--gold);color:#1a1204}
.fan-0{left:0;top:56px;transform:rotate(-5deg)}
/* Anchored to the column's centre and right edge rather than fixed offsets, so the three
   close up on a narrower window instead of the last one running off the page. */
.fan-1{left:calc(50% - 106px);top:10px;z-index:2;transform:rotate(1deg)}
.fan-2{right:0;top:66px;transform:rotate(5deg)}
.fan-0 .fan-rows{padding-right:30px}      /* clear of the middle card's edge */

/* every crest there has been, rolling past -- full-bleed out of the centred sheet */
.crest-marquee{margin:18px calc(50% - 50vw) 0;border-block:1px solid var(--line);
  background:rgba(255,255,255,.02);overflow:hidden;position:relative}
.crest-marquee::before,.crest-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1}
.crest-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.crest-marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.crest-track{display:flex;gap:56px;align-items:center;padding:22px 0;width:max-content;
  animation:crest-roll 70s linear infinite}
.crest-track img{height:56px;width:auto}
@keyframes crest-roll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.crest-track{animation:none}}
.home-stats{display:flex;justify-content:center;gap:48px;padding:18px 0 0;
  font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.home-stats b{display:block;font:400 30px/1 var(--display);color:var(--ink);letter-spacing:.02em;margin-bottom:4px}

.home-h2{font:400 36px/1 var(--display);text-transform:uppercase;margin:72px 0 8px;letter-spacing:.01em}
.home-sub{color:var(--ink-2);margin:0 0 26px}
.modes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
/* [A186] Draft and Auction are the heroes: equal, large, and the only big tiles. Rooms and
   the daily challenge are a smaller second row, and the puzzles are one quiet strip.
   [A199] Build a Career is the third hero, ratified by the user; three equal columns, which
   fall to two and then one as the screen narrows. */
.modes.heroes{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){ .modes.heroes{grid-template-columns:1fr 1fr} .modes.heroes .mode.big:last-child{grid-column:1/-1;min-height:0} }
.modes.heroes .mode.big{grid-row:auto;min-height:268px}
/* The art sits in the bottom corner beside the "Start" link: in the top corner of a
   third-width tile it ran into the title (A199), and the link line has room for it. */
.modes.heroes .mode.big .mode-art{top:auto;bottom:16px;right:18px}
.modes.heroes .mode.big .mode-art img{height:44px;margin-left:-14px}
.modes.heroes .mode.big h3{font-size:38px}
.modes.more{grid-template-columns:1fr 1fr;margin-top:16px}
.modes.more .mode{min-height:158px}
.puzzle-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:16px;
  padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.puzzle-strip:hover{border-color:var(--gold);transform:translateY(-1px)}
.puzzle-strip b{flex:1 1 320px;font:700 15px var(--sans);color:var(--ink)}
.puzzle-strip .mode-go{margin:0;padding:0}
.mode{position:relative;overflow:hidden;min-height:196px;display:flex;flex-direction:column;
  padding:22px;border-radius:18px;border:1px solid var(--line);text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));transition:border-color .15s,transform .15s}
.mode:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.mode.big{grid-row:span 2;background:linear-gradient(160deg,#16305f,#0a1633 70%)}
.mode-tag{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mode h3{font:400 28px/1 var(--display);text-transform:uppercase;margin:10px 0 8px;letter-spacing:.01em}
.mode.big h3{font-size:46px}
.mode p{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0;max-width:330px}
.mode-go{margin-top:auto;padding-top:16px;font-weight:750;font-size:14px;color:var(--gold)}
.mode-art{position:absolute;right:16px;bottom:16px;display:flex;opacity:.55;pointer-events:none}
.mode-art img{height:46px;width:auto;margin-left:-10px}
.mode.big .mode-art{bottom:18px;right:18px;opacity:1}
.mode.big .mode-art img{height:96px;margin-left:-20px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.home-how{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.home-how div{border-top:2px solid var(--gold);padding-top:14px}
.home-how b{font:400 22px var(--display);text-transform:uppercase;display:block;margin-bottom:6px}
.home-how span{color:var(--ink-2);font-size:14.5px;line-height:1.55}

/* Between the phone layout and a wide window the column is too narrow for three cards
   at full size, so the whole fan scales down together rather than the cards overlapping
   into each other's names and ratings. */
@media (min-width:901px) and (max-width:1099px){.home-fan{zoom:.75}}
@media (min-width:1100px) and (max-width:1239px){.home-fan{zoom:.86}}
@media (max-width:900px){
  .home-hero{grid-template-columns:1fr;padding-top:34px;gap:10px}
  /* The fan becomes a row you swipe: on a phone three tilted cards overlap into mush. */
  .home-fan{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:10px -16px 0;padding:6px 16px 16px;scrollbar-width:none}
  .home-fan::-webkit-scrollbar{display:none}
  .fan-card{position:static;transform:none;flex:0 0 232px;scroll-snap-align:start}
  .fan-0 .fan-rows{padding-right:14px}
  .modes,.modes.heroes,.modes.more{grid-template-columns:1fr}
  .modes.heroes .mode.big{min-height:0}
  .modes.heroes .mode.big .mode-art{position:static;align-self:flex-end;margin-top:12px}
  .modes.heroes .mode.big .mode-art img{height:52px}
  .mode.big{grid-row:auto}
  .mode{min-height:0}
  .mode.big .mode-art,.mode .mode-art{position:static;align-self:flex-end;margin-top:12px;opacity:.9}
  .mode.big .mode-art img{height:64px}
  .home-how{grid-template-columns:1fr;gap:18px}
  .home-stats{gap:26px}
  .crest-track{gap:36px}
  .crest-track img{height:44px}
}

/* --- the deal: the dealt franchise-season in its own colours ---------------------------------
   Neutral while the names roll, then the crest arrives and the panel takes the team's
   colour (`.landed` + a `.crest-KEY` class, both set by rollDeal when the roll stops). */
.fixture{position:relative;overflow:hidden;min-height:128px;flex:none;padding:20px 18px 16px;
  border-top:4px solid var(--team,var(--line-strong));
  background:radial-gradient(300px 170px at 6% 112%,var(--team,transparent),transparent 72%),
    var(--team-deep,var(--panel));transition:border-color .3s}
.fixture .deal-crest{position:absolute;right:14px;top:14px;height:96px;max-width:112px;
  object-fit:contain;opacity:0;transform:scale(.7) rotate(-8deg);pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.4,.4,1)}
.fixture .deal-crest.in{opacity:1;transform:none}
.fixture .yr{font:400 54px/1 var(--display);color:#fff;letter-spacing:.01em;position:relative}
.fixture .club{position:relative;max-width:calc(100% - 120px);margin-top:6px;font-size:15px;
  line-height:1.25;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--team-ink,var(--ink))}
.fixture .reroll-row{position:relative;margin-top:14px}
.row-crest{width:24px;height:22px;object-fit:contain;vertical-align:middle;margin-right:8px;flex:none}
@media (max-width:640px){
  .fixture .yr{font-size:44px}
  .fixture .deal-crest{height:76px;max-width:90px}
}
.fx .row-crest{width:22px;height:20px;margin:0 6px 0 2px;vertical-align:-5px}
#resCrest{display:flex;justify-content:center}
.res-crest{height:72px;width:auto;margin-top:16px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
caption .row-crest{width:24px;height:22px;margin-right:8px;vertical-align:-6px}
#aucCard{border-top:3px solid var(--team,var(--line));
  background:radial-gradient(420px 200px at 0% 0%,color-mix(in srgb,var(--team,transparent) 26%,transparent),transparent 70%),var(--panel)}
.auc-card-season{display:flex;align-items:center;gap:10px;color:var(--team-ink,var(--gold))}
.auc-card-crest{height:34px;width:40px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.lead-crest{width:22px;height:20px;object-fit:contain;margin-right:7px;vertical-align:-5px}
#dailyCrest{display:flex;justify-content:center}
.daily-crest{height:84px;width:auto;margin:6px 0 4px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
/* The nav is sticky, so anything scrolled into view (a new auction lot, a reveal) must
   stop below it rather than underneath it. */
html{scroll-padding-top:80px}
@media (max-width:860px){html{scroll-padding-top:112px}}

/* --- the match reveal: a broadcast scoreboard [A151] ------------------------------------
   Two team panels, each in its own side's colours (a crest's `.crest-KEY` or a kit's inline
   variables), and the board as a whole in the BATTING side's -- that is what colours the
   top rule, the progress bar and the twenty over bars. The score is the largest thing on
   the screen, because it is the thing being watched. */
.sb{--team:var(--gold);max-width:760px;margin:18px auto 0;padding:18px 22px 16px;
  border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--team-deep,var(--panel)) 70%,var(--panel)),var(--panel) 62%);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.sb::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--team)}
.sb-stage{font:600 10.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin:2px 0 14px}
.sb-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.sb-team{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border-radius:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--team,var(--panel-3)) 22%,transparent),transparent);
  border-left:3px solid var(--team,var(--line))}
.sb-bowl{flex-direction:row-reverse;text-align:right;opacity:.8;border-left:0;
  border-right:3px solid var(--team,var(--line));
  background:linear-gradient(270deg,color-mix(in srgb,var(--team,var(--panel-3)) 16%,transparent),transparent)}
.sb-badge{flex:0 0 auto;display:grid;place-items:center}
.sb-badge .team-crest{width:64px;height:56px;margin:0;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.sb-bowl .sb-badge .team-crest{width:46px;height:40px}
.sb-badge .kit-badge{width:52px;height:52px;font-size:17px;margin:0}
.sb-bowl .sb-badge .kit-badge{width:38px;height:38px;font-size:13px}
.sb-badge .team-badge{width:44px;height:44px;font-size:14px;margin:0}
.sb-name{min-width:0;display:flex;flex-direction:column;gap:3px}
.sb-name b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.02em;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sb-bowl .sb-name b{font-size:13px;color:var(--ink-2);font-weight:700}
.sb-name em{font:700 9.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;
  font-style:normal;color:var(--team-ink,var(--ink-3))}
.sb-centre{text-align:center;padding:0 6px}
.sb-score{font-family:var(--display);font-size:clamp(58px,11vw,104px);line-height:.95;
  color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  text-shadow:0 6px 30px color-mix(in srgb,var(--team) 35%,transparent)}
.sb-overs{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin-top:8px;white-space:nowrap}
.sb-target{text-align:center;font:800 15px var(--sans);color:var(--gold-2);margin:14px 0 0;letter-spacing:.02em}
.sb-target:empty{display:none}
.sb-gauge{height:4px;background:var(--panel-3);border-radius:2px;margin:16px 0 0;overflow:hidden}
.sb-gauge i{display:block;height:100%;background:var(--team);transition:width .35s ease-out}
.sb-last{font-size:14px;color:var(--ink-2);text-align:center;margin:12px 0 0;min-height:1.3em}
.sb-bars{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;height:118px;margin:16px 0 0;
  align-items:end}
.sb-bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;border-radius:4px;padding-bottom:16px}
.sb-bar.pp,.sb-bar.death{background:rgba(255,255,255,.035)}
.sb-bar i{display:block;width:100%;border-radius:3px 3px 1px 1px;position:relative;
  background:color-mix(in srgb,var(--team) 72%,transparent);transform-origin:bottom}
.sb-bar.big i{background:var(--team);box-shadow:0 0 14px color-mix(in srgb,var(--team) 55%,transparent)}
.sb-bar.future i{height:2px;background:var(--panel-3)}
.sb-bar.new i{animation:barIn .35s ease-out}
.sb-bar i b{position:absolute;bottom:100%;left:0;right:0;text-align:center;margin-bottom:2px;
  font:700 10px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.sb-bar.big i b{color:var(--ink)}
.sb-bar u{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;text-decoration:none}
.sb-bar u s{display:block;width:7px;height:7px;border-radius:50%;background:var(--red-2);
  box-shadow:0 0 6px rgba(255,106,77,.7)}
.sb-bar > span{position:absolute;bottom:0;left:0;right:0;text-align:center;
  font:600 9px var(--mono);color:var(--ink-3)}
.sb-phases{display:grid;grid-template-columns:6fr 9fr 5fr;gap:4px;margin-top:6px;
  font:600 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.sb-phases span{border-top:1px solid var(--line);padding-top:5px}
.sb-prior{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.sb-prior-label{font:700 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sb-prior b{color:var(--ink);font-weight:800}
@media (max-width:640px){
  .sb{padding:14px 12px 12px;border-radius:14px}
  .sb-main{grid-template-columns:1fr 1fr;gap:8px}
  .sb-centre{grid-column:1 / -1;grid-row:1;padding:4px 0 6px}
  .sb-team{padding:8px;gap:8px}
  .sb-bowl{flex-direction:row-reverse}
  .sb-badge .team-crest{width:44px;height:38px}
  .sb-bowl .sb-badge .team-crest{width:36px;height:32px}
  .sb-badge .kit-badge{width:38px;height:38px;font-size:13px}
  .sb-bowl .sb-badge .kit-badge{width:32px;height:32px;font-size:11px}
  .sb-name b{font-size:13px}
  .sb-bowl .sb-name b{font-size:12px}
  .sb-bars{gap:2px;height:96px}
  .sb-bar i b{font-size:8.5px}
  .sb-bar > span{font-size:8px}
  .sb-bar u s{width:5px;height:5px}
  .sb-phases{font-size:8px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .sb-bar.new i,#overScoreLine.score-pop,#overScoreLine.wicket-flash{animation:none}
  .sb-gauge i{transition:none}
}

/* --- who is in, and the milestone banner --------------------------------------------- */
.sb-crease{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center}
.sb-crease:empty{display:none}
.sb-bats{display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-bat-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto;align-items:baseline;
  gap:8px;padding:7px 12px 7px 8px;border-radius:10px;background:rgba(255,255,255,.035);
  border:1px solid transparent;font-size:14px;color:var(--ink-2)}
.sb-bat-row b{color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-bat-row.on{background:color-mix(in srgb,var(--team) 16%,transparent);
  border-color:color-mix(in srgb,var(--team) 45%,transparent)}
.sb-bat-row.on b{font-weight:800}
.sb-strike{color:var(--team);font-weight:900;text-align:center}
.sb-fig{font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-fig strong{font:800 17px var(--sans);color:var(--ink)}
.sb-fig em{font-style:normal;color:var(--ink-3);font-size:13px}
.sb-extra{font:600 11px var(--mono);color:var(--ink-3);white-space:nowrap}
.sb-bat-row.landmark .sb-fig strong{color:var(--gold-2)}
.sb-bat-row.fresh{animation:batIn .5s ease-out}
.sb-bat-row.you{border-color:var(--gold)}
.sb-bowl-row.you b{color:var(--gold-2)}
.sb-bowl-row{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
  padding-left:16px;border-left:1px solid var(--line);font-size:14px}
.sb-bowl-row > span:first-child{font:700 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sb-bowl-row b{color:var(--ink);font-weight:700;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes batIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.sb-milestone{position:absolute;left:50%;top:74%;z-index:5;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.6);display:flex;flex-direction:column;gap:8px;
  min-width:min(420px,86%);padding:18px 26px;border-radius:16px;text-align:center;
  background:linear-gradient(135deg,var(--gold),#c98a12);color:#1b1200;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 3px rgba(255,216,115,.35)}
.sb-milestone.ms-hattrick,.sb-milestone.ms-five_for,.sb-milestone.ms-three_in_over{
  background:linear-gradient(135deg,#ff6a4d,#b8261a);color:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 3px rgba(255,106,77,.35)}
.sb-milestone.ms-hundred{box-shadow:0 20px 70px rgba(0,0,0,.55),0 0 50px rgba(255,216,115,.7)}
.sb-ms-item{display:flex;flex-direction:column;gap:2px}
.sb-ms-item b{font-family:var(--display);font-size:clamp(30px,6vw,46px);line-height:1;
  letter-spacing:.03em;text-transform:uppercase}
.sb-ms-item span{font:700 14px var(--sans)}
.sb-ms-item + .sb-ms-item{border-top:1px solid rgba(0,0,0,.18);padding-top:8px}
.sb-ms-item + .sb-ms-item b{font-size:clamp(20px,4vw,28px)}
.sb-milestone.show{animation:msIn 2.4s cubic-bezier(.2,.9,.3,1.2) forwards}
.sb-milestone.show.ms-hundred,.sb-milestone.show.ms-hattrick{animation:msIn 2.4s cubic-bezier(.2,.9,.3,1.2) forwards,msGlow .5s ease-in-out 3 alternate}
@keyframes msIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  22%{transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-60%) scale(.96)}}
@keyframes msGlow{from{filter:brightness(1)}to{filter:brightness(1.18)}}
@media (max-width:640px){
  .sb-crease{grid-template-columns:1fr}
  .sb-bat-row{grid-template-columns:12px minmax(0,1fr) auto;font-size:13px;padding:6px 10px 6px 6px}
  .sb-extra{display:none}
  .sb-bowl-row{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;
    border-left:0;padding-left:6px;text-align:left}
  .sb-milestone{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){
  .sb-bat-row.fresh{animation:none}
  .sb-milestone.show,.sb-milestone.show.ms-hundred,.sb-milestone.show.ms-hattrick{
    animation:msFade 2.4s linear forwards}
  @keyframes msFade{0%,85%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}
}

/* --- the champion's celebration: full screen, over everything -------------------------- */
.champ-fx{--team:var(--gold);position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:16px;cursor:pointer;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--team) 30%,rgba(6,9,20,.9)) 0%,rgba(4,6,14,.96) 70%)}
.champ-fx.on{opacity:1}
.champ-fx.off{opacity:0;pointer-events:none}
.champ-fx-sky{position:absolute;inset:0;pointer-events:none}
.champ-fx-rays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;
  pointer-events:none;opacity:.22;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--team) 70%,transparent) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 55%);mask:radial-gradient(circle,#000 0%,transparent 55%);
  animation:champSpin 30s linear infinite}
.champ-fx-card{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:560px;width:100%;cursor:default;
  transform:scale(.7) translateY(30px);opacity:0}
.champ-fx.on .champ-fx-card{animation:champIn .9s cubic-bezier(.2,1.2,.35,1) .25s forwards}
.champ-fx-trophy{font-size:clamp(70px,16vw,128px);line-height:1;
  filter:drop-shadow(0 0 30px rgba(255,216,115,.65));animation:champBob 2.4s ease-in-out 1.2s infinite}
.champ-fx-kicker{font:700 12px var(--mono);letter-spacing:.38em;text-transform:uppercase;color:var(--gold-2)}
.champ-fx-badge{margin:6px 0 2px}
.champ-fx-badge .team-crest{width:120px;height:104px;margin:0;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.champ-fx-badge .kit-badge{width:96px;height:96px;font-size:30px;margin:0}
.champ-fx-badge .team-badge{width:84px;height:84px;font-size:26px;margin:0}
.champ-fx-name{font-family:var(--display);font-size:clamp(38px,8.5vw,76px);line-height:1;color:#fff;
  letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere;
  text-shadow:0 0 34px color-mix(in srgb,var(--team) 80%,transparent),0 6px 24px rgba(0,0,0,.6)}
.champ-fx-sub{font-size:16px;color:var(--ink-2)}
.champ-fx-close{margin-top:14px;min-width:180px}
@keyframes champIn{to{transform:none;opacity:1}}
@keyframes champBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes champSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .champ-fx-rays,.champ-fx-trophy{animation:none}
  .champ-fx.on .champ-fx-card{animation:none;transform:none;opacity:1}
}

/* --- team kits [A151]: a drafted side's badge -- its monogram in `ink` on `deep`, ringed in
   its own colour. `ink` is lifted until it clears 4.5:1 on `deep` (web/colours.py), which is
   why the badge uses that pairing and never the bright base colour behind text. */
.kit-badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  flex:0 0 auto;background:var(--team-deep);color:var(--team-ink);
  box-shadow:0 0 0 2px var(--team) inset,0 2px 8px rgba(0,0,0,.35);
  font:800 8px var(--mono);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.kit-badge-row{margin-right:9px;vertical-align:-6px;width:24px;height:24px;font-size:8px}
.kit-badge-toss{width:40px;height:40px;font-size:13px;margin-right:10px;vertical-align:middle}
.kit-team{font-style:normal;color:var(--ink-3);font-size:12px;margin-left:6px}
.kit-badge-lg{width:72px;height:72px;font-size:22px;box-shadow:0 0 0 3px var(--team) inset,0 8px 24px rgba(0,0,0,.4)}
.kit-editor{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.kit-editor-back{position:absolute;inset:0;background:rgba(3,7,18,.72)}
.kit-editor-panel{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;padding:18px 20px 20px}
.kit-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kit-editor-head b{font:800 15px var(--sans);letter-spacing:.05em;text-transform:uppercase}
.kit-editor-x{background:none;border:0;color:var(--ink-3);font:600 12px var(--mono);cursor:pointer}
.kit-editor .room-label{margin-top:14px}
.kit-mono-input{text-transform:uppercase;letter-spacing:.2em;font-family:var(--mono)!important;max-width:120px}
.kit-preview-card{display:flex;align-items:center;gap:16px;padding:14px;border-radius:12px;
  border-left:4px solid var(--team);
  background:linear-gradient(90deg,color-mix(in srgb,var(--team) 20%,transparent),transparent)}
.kit-preview-card b{display:block;font:800 18px var(--sans);color:var(--ink);word-break:break-word}
.kit-preview-card em{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-style:normal;color:var(--team-ink)}
.kit-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.kit-swatch{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:radial-gradient(circle at 35% 35%,var(--team),color-mix(in srgb,var(--team) 60%,var(--team-deep)))}
.kit-swatch.sel{border-color:var(--ink);box-shadow:0 0 0 3px var(--team)}
.kit-swatch:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.kit-editor .actions{margin-top:18px;justify-content:flex-end}
.kit-strip{display:flex;align-items:center;gap:12px;
  margin:14px auto 0;padding:10px 14px;border-radius:12px;max-width:520px;
  border:1px solid var(--line);border-left:4px solid var(--team);
  background:linear-gradient(90deg,color-mix(in srgb,var(--team) 16%,transparent),transparent)}
.kit-strip-text{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.kit-strip b{font:800 15px var(--sans);color:var(--ink);overflow-wrap:anywhere;line-height:1.2}
#profileKit .kit-strip{margin:16px 0 0}
.squad-done .kit-strip{flex-wrap:wrap;margin:0 0 18px;text-align:left}
.squad-done .kit-strip-text{flex:1 1 110px}
.kit-strip em{font:600 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.kit-strip .kit-badge{width:40px;height:40px;font-size:13px}
.kit-strip-text{flex:1}
.kit-strip-edit{margin-left:auto;flex:0 0 auto;background:none;border:1px solid var(--line-strong);color:var(--ink-2);
  border-radius:8px;padding:6px 12px;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.kit-strip-edit:hover{border-color:var(--team);color:var(--ink)}
.toss-crest{height:44px;width:auto;vertical-align:middle;margin-right:10px}

/* --- Flashback: a ten-question quiz [A147] --------------------------------------------- */
.qz{max-width:760px;margin:0 auto}
.qz-lede{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:56ch;margin:6px 0 26px}
.qz-challenge{border:1px solid var(--gold);border-radius:12px;padding:14px 18px;margin:0 0 24px;
  background:rgba(245,184,61,.08);color:var(--ink)}
.qz-challenge b{color:var(--gold-2)}
.qz-rules{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:12px}
.qz-rules li{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:rgba(255,255,255,.02)}
.qz-rules b{display:block;font-family:var(--display);font-size:30px;line-height:1;color:var(--gold);
  font-weight:400}
.qz-rules span{font-size:13.5px;color:var(--ink-2)}
.qz-best{font-family:var(--mono);font-size:13px;color:var(--ink-2);min-height:1em;margin-bottom:6px}
.qz-best b{color:var(--gold-2)}
.qz-go{font-size:16px;padding:15px 30px}

.qz-play{padding-top:34px}
.qz-hud{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.qz-dots{display:flex;gap:6px;flex-wrap:wrap}
.qz-dots i{width:22px;height:8px;border-radius:4px;background:var(--panel-3);transition:background .2s}
.qz-dots i.now{background:var(--gold);box-shadow:0 0 10px rgba(245,184,61,.6)}
.qz-dots i.right{background:var(--mint)}
.qz-dots i.wrong{background:var(--hot)}
.qz-score{display:flex;align-items:baseline;gap:8px;font-family:var(--mono)}
.qz-score b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--ink);
  display:inline-block}
.qz-score b.bump{animation:qzBump .45s ease}
.qz-score i{font-style:normal;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
.qz-streak{font-size:15px;color:var(--gold-2);font-weight:700}
@keyframes qzBump{0%{transform:scale(1)}40%{transform:scale(1.25);color:var(--gold-2)}100%{transform:scale(1)}}
.qz-timer{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;margin-bottom:18px}
.qz-timer i{display:block;height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .08s linear}
.qz-timer i.urgent{background:var(--hot);animation:qzPulse .6s ease-in-out infinite alternate}
@keyframes qzPulse{from{opacity:1}to{opacity:.55}}

.qz-card{border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;
  background:linear-gradient(180deg,var(--panel),rgba(13,28,58,.55))}
.qz-card.enter{animation:qzEnter .35s ease}
@keyframes qzEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qz-num{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.qz-q{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.qz-crest{height:54px;width:auto;flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.qz-q h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(24px,3.6vw,34px);
  line-height:1.08;letter-spacing:.005em}
.qz-clues{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.qz-clues li{font-size:15px;color:var(--ink);padding:10px 14px;border-left:3px solid var(--gold);
  background:rgba(255,255,255,.03);border-radius:0 8px 8px 0}
.qz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qz-opt{display:flex;align-items:center;gap:10px;text-align:left;min-height:62px;
  padding:12px 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--panel-2);
  color:var(--ink);font:inherit;font-size:15.5px;font-weight:650;cursor:pointer;flex-wrap:wrap;
  transition:border-color .15s,background .15s,transform .1s}
.qz-opt:hover:not(:disabled){border-color:var(--gold);background:var(--panel-3);transform:translateY(-1px)}
.qz-opt:disabled{cursor:default}
.qz-opt kbd{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;flex:none}
.qz-opt-crest{height:26px;width:auto;flex:none}
.qz-opt-label{flex:1 1 auto;min-width:0}
.qz-opt-detail{flex-basis:100%;font-family:var(--mono);font-size:12.5px;font-weight:500;
  color:var(--ink-2);padding-left:32px}
.qz-opt-detail:empty{display:none}
.qz-opt.correct{border-color:var(--mint);background:rgba(61,220,151,.13);animation:qzRight .4s ease}
.qz-opt.correct .qz-opt-detail{color:var(--mint)}
.qz-opt.wrong{border-color:var(--hot);background:rgba(255,74,53,.12);animation:qzWrong .35s ease}
.qz-opt.dim{opacity:.55}
@keyframes qzRight{50%{transform:scale(1.03)}}
@keyframes qzWrong{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.qz-after{margin-top:20px;animation:qzEnter .3s ease}
.qz-verdict{font-family:var(--display);font-size:clamp(26px,4vw,36px);line-height:1}
.qz-verdict.good{color:var(--mint)}
.qz-verdict.bad{color:var(--hot)}
.qz-pop{display:inline-block;font-size:.7em;color:var(--gold-2);margin-left:8px;animation:qzPop .6s ease}
@keyframes qzPop{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}}
.qz-reveal{color:var(--ink-2);margin:8px 0 16px}
.qz-keys{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:14px}

.qz-done{padding-top:40px}
.qz-over{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold)}
.qz-title{font-family:var(--display);font-size:clamp(46px,8vw,84px);line-height:.95;margin:8px 0 4px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent;animation:qzEnter .5s ease}
.qz-final{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.qz-final b{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,56px);line-height:1}
.qz-final span{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.qz-grid{font-size:24px;letter-spacing:2px;margin-bottom:10px}
.qz-stats{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink-2);font-size:14.5px;margin-bottom:14px}
.qz-stats b{color:var(--ink)}
.qz-newbest{color:var(--gold-2);font-weight:700}
.qz-vs{border-radius:10px;padding:12px 16px;margin-bottom:10px;border:1px solid var(--line);font-weight:650}
.qz-vs.good{border-color:var(--mint);color:var(--mint);background:rgba(61,220,151,.08)}
.qz-vs.bad{border-color:var(--hot);color:var(--hot);background:rgba(255,74,53,.08)}
.qz-review{margin-top:26px}
.qz-review ol{margin:0;padding:0 20px 18px 40px;display:flex;flex-direction:column;gap:14px}
.qz-review li{padding-left:6px}
.qz-review li.right::marker{color:var(--mint)}
.qz-review li.wrong::marker{color:var(--hot)}
.qz-rv-q{font-weight:650}
.qz-rv-a{font-size:14.5px;color:var(--ink)}
.qz-rv-a span{color:var(--hot)}
.qz-rv-why{font-size:13.5px;color:var(--ink-2)}
@media (max-width:640px){
  .qz-options{grid-template-columns:1fr}
  .qz-options.two{grid-template-columns:1fr}
  .qz-card{padding:20px 16px 18px}
  .qz-crest{height:42px}
  .qz-opt{min-height:54px}
  .qz-keys{display:none}
  .qz-dots i{width:16px}
}
.qz-q > span:empty{display:none}

/* --- the auction: the bidding war and your squad [A155] ------------------------------------
   Colours come from the crest-derived `.crest-KEY` variables, never picked here. */
.auc-price.tier-high{color:var(--gold)}
.auc-price.tier-hot{color:var(--hot);text-shadow:0 0 28px rgba(255,74,53,.35)}
.auc-feed-row b.tier-high,.auc-slot.filled b.tier-high{color:var(--gold)}
.auc-feed-row b.tier-hot,.auc-slot.filled b.tier-hot{color:var(--hot)}

/* The leader's colour glows behind the price and changes hands with every bid. */
.auc-bidbox{position:relative;overflow:hidden;transition:border-color .25s}
.auc-bidbox::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(360px 180px at 12% 0%,color-mix(in srgb,var(--team,transparent) 26%,transparent),transparent 72%);
  transition:opacity .25s}
.auc-bidbox > *{position:relative}
.auc-bidbox.has-lead::before{opacity:1}
.auc-bidbox.has-lead{border-color:color-mix(in srgb,var(--team,#fff) 45%,var(--line))}
.auc-bidbox.lead-flash::before{animation:leadFlash .35s ease-out}
@keyframes leadFlash{from{opacity:1;filter:brightness(1.9)}to{opacity:1;filter:none}}

.auc-trail{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.auc-trail-sum{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.auc-trail-sum b{color:var(--ink);font-size:12px;letter-spacing:0}
.auc-trail-bids{display:flex;gap:5px;overflow:hidden;justify-content:flex-end;min-width:0}
.auc-trail-bid{display:inline-flex;align-items:center;gap:4px;flex:none;font-family:var(--mono);
  font-size:10.5px;font-weight:700;padding:3px 7px 3px 4px;border-radius:6px;opacity:.6;
  background:var(--team-deep,#223);color:var(--team-ink,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--team,#fff) 40%,transparent)}
.auc-trail-bid:last-child{opacity:1}
.auc-trail-bid.mine{box-shadow:inset 0 0 0 1px var(--gold)}
.auc-trail-bid img{height:15px;width:17px;object-fit:contain}
.auc-trail-bid i{font-style:normal}
.auc-trail-bid.new{animation:trailIn .18s ease-out}
@keyframes trailIn{from{transform:translateX(10px);opacity:0}to{transform:none;opacity:1}}

/* The room panel: who is in this lot, who leads, who just raised. */
.auc-team{transition:background .2s,opacity .2s}
.auc-team.in-lot{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}
.auc-team.leading{background:color-mix(in srgb,var(--gold) 10%,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.auc-team.bid-flash{animation:rowFlash .45s ease-out}
@keyframes rowFlash{from{background:color-mix(in srgb,var(--gold) 30%,transparent)}}

/* Your squad: the purse split, what a legal twelve still needs, and the places themselves. */
.auc-squad-needs{padding:12px 12px 0;display:flex;flex-direction:column;gap:10px}
.auc-spend-bar{display:flex;height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden}
.auc-spend-bar i{display:block;height:100%;transition:width .5s ease}
/* Kept is the team colour STRIPED and bought the same colour solid, so the two stay apart
   for every franchise -- a fixed gold for "kept" vanished against KKR's own gold. */
.auc-spend-bar i.kept,.auc-spend-key .kept::before{background:repeating-linear-gradient(135deg,
  var(--team,var(--gold)) 0 3px,color-mix(in srgb,var(--team,var(--gold)) 35%,transparent) 3px 6px)}
.auc-spend-bar i.bought{background:var(--team,var(--mint))}
.auc-spend-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.auc-spend-key b{color:var(--ink);letter-spacing:0;margin-left:4px}
.auc-spend-key span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  margin-right:6px;vertical-align:0;background:var(--panel-3)}
.auc-spend-key .bought::before{background:var(--team,var(--mint))}
.auc-needs{display:flex;gap:6px;flex-wrap:wrap}
.auc-need{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 11px}
.auc-need b{font-family:var(--mono);font-size:12px;color:var(--ink)}
.auc-need.want{border-color:color-mix(in srgb,var(--hot) 55%,transparent)}
.auc-need.want b{color:var(--red-2)}
.auc-need.ok{border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.auc-need.ok b{color:var(--mint)}
.auc-need.full{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.auc-need.full b{color:var(--gold)}
.auc-need.plain{border-style:dashed}

.auc-slot.filled{box-shadow:inset 3px 0 0 var(--team,var(--line-strong))}
.auc-slot.filled.new{animation:chipIn .3s ease-out}
.auc-slot-top{display:flex;align-items:center;gap:5px;min-height:18px}
.auc-slot-top .ic{margin:0}
.auc-slot-os{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--mint);
  border:1px solid rgba(61,220,151,.45);border-radius:3px;padding:0 4px}
.auc-slot-rt{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-2)}
.auc-slot.want{opacity:1;border-color:color-mix(in srgb,var(--hot) 45%,transparent);display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:1px}
.auc-slot.want span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-2)}
.auc-slot.want em{font-style:normal;font-size:10.5px;color:var(--ink-3)}

@media (max-width:900px){
  /* The strip takes its own line under the count on a phone rather than clipping a chip. */
  .auc-trail{flex-wrap:wrap;row-gap:6px}
  .auc-trail-bids{justify-content:flex-start;width:100%}
  .auc-trail-bid:nth-last-child(n+4){display:none}
  /* The global phone rule stacks every .actions row; these three belong side by side. */
  .auc-bidbox .actions.minor-row{flex-direction:row}
}
@media (prefers-reduced-motion:reduce){
  .auc-bidbox.lead-flash::before,.auc-trail-bid.new,.auc-team.bid-flash,.auc-slot.filled.new{animation:none}
}

/* --- the auction: the lot card and the sets [A156] ------------------------------------------
   Every overlay here has no pointer events and waits on nothing, so none of it slows a lot. */
.auc-card{position:relative}
.auc-card > *:not(.auc-card-wm){position:relative}
/* The season's crest, large and faint behind the player, with its colour washing the card. */
.auc-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 100% 100%,color-mix(in srgb,var(--team,transparent) 20%,transparent),transparent 70%)}
.auc-card-wm{position:absolute;right:-26px;bottom:-40px;height:250px;width:auto;max-width:60%;
  object-fit:contain;opacity:.13;pointer-events:none;filter:saturate(1.2)}

/* The auctioneer's closing words, and the stage's border pulsing with them. */
.auc-stage.closing{animation:stagePulse 1s ease-in-out infinite}
@keyframes stagePulse{50%{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot),0 0 26px rgba(255,74,53,.25)}}
/* Bottom right, over the base-price row: never over the name the room is bidding on. */
.auc-closing{position:absolute;bottom:14px;right:16px;pointer-events:none;
  font-family:var(--display);font-size:clamp(18px,2.6vw,26px);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--hot);padding:4px 14px 2px;border-radius:6px;white-space:nowrap;
  box-shadow:0 8px 24px rgba(255,74,53,.35);opacity:0}
.auc-closing:empty{display:none}
.auc-closing.on{animation:closingIn .35s ease-out both}
@keyframes closingIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* The gavel: one jolt, and a record sale says so. */
.auc-stage.gavel{animation:gavel .32s cubic-bezier(.3,1.8,.5,1)}
@keyframes gavel{0%{transform:translateY(0)}25%{transform:translateY(5px) rotate(-.3deg)}
  55%{transform:translateY(-2px) rotate(.2deg)}100%{transform:none}}
.auc-record{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#1a1204;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  padding:5px 12px;border-radius:5px;box-shadow:0 6px 22px rgba(245,184,61,.35)}
.auc-stamp.on .auc-record{animation:fadeUp .35s .2s ease-out both}

/* A buy of your own bursts outwards in your colours. */
.auc-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.auc-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:2px;
  background:var(--team,var(--gold));opacity:0;
  animation:burst .95s var(--delay) cubic-bezier(.15,.7,.3,1) forwards}
.auc-burst i.alt{background:var(--gold-2);border-radius:50%;width:8px;height:8px}
@keyframes burst{
  0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.4)}}

/* A set opens: a broadcast title card for a second, then the first lot underneath. */
.auc-setcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;pointer-events:none;opacity:0;padding:0 18px;
  background:linear-gradient(90deg,rgba(5,11,26,.2),rgba(5,11,26,.94) 18%,rgba(5,11,26,.94) 82%,rgba(5,11,26,.2))}
.auc-setcard em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold)}
.auc-setcard b{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1;
  text-transform:uppercase;color:#fff}
.auc-setcard span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.auc-setcard b::after{content:"";display:block;height:3px;width:60%;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.auc-setcard.accel{background:linear-gradient(90deg,rgba(26,5,8,.2),rgba(26,6,10,.95) 18%,rgba(26,6,10,.95) 82%,rgba(26,5,8,.2))}
.auc-setcard.accel em{color:var(--red-2)}
.auc-setcard.accel b::after{background:linear-gradient(90deg,transparent,var(--hot),transparent)}
.auc-setcard.on{animation:setCard 1.25s ease-in-out both}
.auc-setcard.on b{animation:setSweep 1.25s ease-out both}
@keyframes setCard{0%{opacity:0}14%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes setSweep{0%{transform:translateX(-24px);opacity:0}20%{transform:none;opacity:1}100%{transform:translateX(8px)}}

/* Still to come, as chips rather than a run of names. */
.auc-upnext > span{display:block;margin-bottom:6px}
.auc-up-chips{display:flex;flex-wrap:wrap;gap:5px}
.auc-up{font-style:normal;font-size:12px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.auc-up.more{color:var(--ink-3);border-style:dashed}

@media (max-width:900px){
  /* The phone rule above stretches every .act.minor in the bid box; the limit's − and +
     must not, or they squeeze the limit itself onto two lines. */
  .auc-limit .act.minor{flex:0 0 auto}
  .auc-card-wm{height:180px;right:-20px;bottom:-30px}
  .auc-up{font-size:11.5px;padding:2px 9px}
}
@media (prefers-reduced-motion:reduce){
  .auc-stage.closing,.auc-stage.gavel,.auc-setcard.on b,.auc-closing.on{animation:none}
  .auc-closing{opacity:1}
  .auc-burst{display:none}
}

/* [A158] where a player can bat: a band tag on squad places and twelve rows */
.auc-band{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;white-space:nowrap;
  padding:1px 5px;border-radius:4px;border:1px solid var(--line);color:var(--ink-2);align-self:flex-start}
.auc-band.band-top{color:#7cc4ff;border-color:color-mix(in srgb,#7cc4ff 45%,transparent)}
.auc-band.band-middle{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.auc-band.band-finisher{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.auc-band.band-tail{color:var(--ink-3)}
.auc-bands{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.auc-bands .auc-band{font-size:11px;padding:3px 8px}
.auc-bands .auc-band b{font-size:12px}
.auc-bands .auc-band.none{opacity:.5}
.auc-slot.filled .auc-band{margin:2px 0}
.auc-order-row .auc-band{margin-left:2px}
.auc-order-row.fits{box-shadow:inset 3px 0 0 var(--mint)}
.auc-order-row.nofit{opacity:.4}
@media (max-width:520px){
  .auc-order-row .auc-band .bn{display:none}
  .auc-order-row{gap:6px;padding:10px 12px}
  .auc-order-row .auc-o-name{min-width:0;flex:1 1 auto}
  .auc-order-row b{white-space:nowrap}
}

/* --- the match result and the innings break, in the scoreboard's own language ---------
   Both are broadcast cards in the same panel, rule and team tints as .sb, so a match reads
   as one sequence: board, break, board, result. The result card is tinted in the WINNER's
   colours; the break shows the total to chase or defend and the Impact Player beside it. */
.mr,.ib{--team:var(--gold);max-width:820px;margin:28px auto 0;padding:26px 26px 22px;
  border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--team-deep,var(--panel)) 70%,var(--panel)),var(--panel) 66%);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
/* clip, not hidden: hidden would make .ib the sticky container and pin nothing (phone confirm bar) */
.ib{overflow:clip}
.mr::before,.ib::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--team)}
.mr-stage{font:600 10.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.mr-headline,.ib-head{font-family:var(--display);font-size:clamp(44px,8vw,76px);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;text-align:center;margin:12px 0 6px;color:var(--ink)}
.mr-headline.won{color:var(--gold-2);text-shadow:0 6px 34px color-mix(in srgb,var(--gold) 45%,transparent)}
.mr-headline.lost{color:var(--red-2)}
.ib-head{color:var(--ink);font-size:clamp(36px,6.5vw,58px)}
.mr-margin{text-align:center;font-size:17px;color:var(--ink-2);font-weight:600}
.mr.you-won::after{content:"";position:absolute;inset:-40% -20% auto;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--team) 22%,transparent),transparent);
  animation:mrGlow 2.4s ease-out both}
@keyframes mrGlow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.mr-teams{all:unset;box-sizing:border-box;cursor:pointer;display:grid;width:100%;
  grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px;margin:22px 0 0;position:relative;z-index:1}
.mr-teams:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:14px}
.mr-team{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 14px;
  border-radius:14px;text-align:center;min-width:0;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--team,var(--panel-3)) 20%,transparent),rgba(255,255,255,.02));
  opacity:.72;transition:opacity .2s,transform .2s}
.mr-team.won{opacity:1;border-color:color-mix(in srgb,var(--team,var(--gold)) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--team,var(--gold)) 30%,transparent),0 12px 30px rgba(0,0,0,.3)}
.mr-teams:hover .mr-team{opacity:1}
.mr-team .team-crest.mr-badge{width:64px;height:56px;margin:0;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.mr-team .kit-badge.mr-badge{width:52px;height:52px;font-size:17px;margin:0}
.mr-team .team-badge.mr-badge{width:48px;height:48px;font-size:15px;margin:0}
.mr-name{font-size:15px;font-weight:800;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.mr-score{font-family:var(--display);font-size:clamp(34px,6vw,50px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center;gap:4px}
.mr-score small{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.mr-v{align-self:center;font:700 12px var(--mono);letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}

.mr-stars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;position:relative;z-index:1}
.mr-stars:empty{display:none}
.mr-stars > div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);font-size:13.5px;color:var(--ink-2);min-width:0}
.mr-stars b,.ib-stars b{color:var(--ink);font-weight:700}
.mr-stars em,.ib-stars em{font-style:normal;color:var(--ink-3);font-size:12px}
.mr-lbl{font:700 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mr-season{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center;
  position:relative;z-index:1}
.mr-form{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.mr-form i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 10px var(--mono);
  font-style:normal;border:1px dashed var(--line-strong);color:var(--ink-3)}
.mr-form i.w{background:var(--green);border:0;color:#04231a}
.mr-form i.l{background:var(--red);border:0;color:#2b0705}
.mr-form i.t{background:var(--ink-3);border:0;color:var(--bg)}
.mr-form i.now{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold);animation:formPop .5s ease-out .4s both}
@keyframes formPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.mr-record{margin-top:10px;font-size:14px;color:var(--ink-2)}
.mr-record b{color:var(--ink)}

.mr-actions{max-width:820px;margin:18px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.mr-actions .actions{justify-content:center}
.mr-primary .act.lead{min-width:200px}

/* the innings break */
.ib-top{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-top:18px}
.ib-first,.ib-impact{border-radius:14px;padding:16px;border:1px solid var(--line);min-width:0;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--team,var(--panel-3)) 20%,transparent),rgba(255,255,255,.02))}
.ib-label{font:700 9.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--team-ink,var(--ink-3))}
.ib-side{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:15px;color:var(--ink);font-weight:800}
.ib-side .team-crest.ib-badge{width:40px;height:36px;margin:0}
.ib-side .kit-badge.ib-badge{width:36px;height:36px;font-size:12px;margin:0}
.ib-side .team-badge.ib-badge{width:34px;height:34px;font-size:12px;margin:0}
.ib-score{font-family:var(--display);font-size:clamp(46px,8vw,68px);line-height:1;color:var(--ink);
  margin-top:10px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:10px}
.ib-score small{font:600 12px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.ib-stars{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.ib-stars i{display:block;font:700 9px var(--mono);font-style:normal;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.ib-need{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:15px;color:var(--gold-2);font-weight:700}
.ib-need b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink);letter-spacing:.02em}
.ib-impact{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.ib-crest{position:absolute;right:-14px;bottom:-14px;width:120px;height:110px;object-fit:contain;opacity:.16;pointer-events:none}
.ib-imp-name{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:20px;color:var(--ink)}
.ib-imp-name b{font-weight:800;line-height:1.2}
.ib-imp-name .ic{margin-right:0}
.ib-imp-meta{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.ib-imp-role{margin-top:auto;padding-top:14px;font-size:14px;color:var(--ink-2)}
.ib-imp-role b{color:var(--team-ink,var(--gold-2))}

.ib-ask{margin-top:22px;text-align:center}
.ib-ask h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.ib-ask p{margin:4px 0 0;font-size:13.5px;color:var(--ink-3)}
.ib-xi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ib-tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:10px 12px;border-radius:11px;position:relative;
  background:rgba(255,255,255,.035);border:1px solid var(--line);transition:border-color .15s,background .15s,transform .15s}
.ib-tile:hover{border-color:var(--line-strong);background:rgba(255,255,255,.06)}
.ib-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ib-tile.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);
  box-shadow:0 0 0 1px var(--gold)}
.ib-tile.on .ib-slot{background:var(--gold);color:#1a1204}
.ib-tile.suggested{border-style:dashed;border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.ib-tile.on.suggested{border-style:solid}
.ib-slot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:700 11px var(--mono);background:var(--panel-3);color:var(--ink-2)}
.ib-who{display:flex;align-items:center;min-width:0;gap:0;font-size:14.5px;color:var(--ink)}
.ib-who b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-who em{font:600 10.5px var(--mono);font-style:normal;color:var(--ink-3);margin-left:8px;white-space:nowrap}
.ib-sugg{position:absolute;top:-8px;right:10px;font:700 8.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--panel);color:var(--gold-2);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.ib-confirm{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.ib-confirm .act.lead{min-width:260px}
.ib-confirm .act.lead:disabled{opacity:1;background:var(--panel-3);color:var(--ink-3);border-color:var(--line)}

@media (max-width:640px){
  .mr,.ib{padding:18px 14px 16px;border-radius:14px;margin-top:16px}
  .mr-teams{gap:6px}
  .mr-team{padding:12px 6px}
  .mr-team .team-crest.mr-badge{width:46px;height:40px}
  .mr-team .kit-badge.mr-badge{width:40px;height:40px;font-size:13px}
  .mr-name{font-size:13px}
  .mr-stars{grid-template-columns:1fr}
  .mr-form{gap:4px;flex-wrap:nowrap}
  .mr-form i{width:18px;height:18px;font-size:8px;flex:none}
  .ib-top{grid-template-columns:1fr}
  .ib-xi{grid-template-columns:1fr}
  .mr-actions .act{flex:1 1 100%}
  /* eleven tiles push the confirm below the fold, so it rides along at the bottom */
  .ib-confirm{position:sticky;bottom:0;z-index:2;margin:14px -14px -16px;padding:18px 14px 14px;gap:8px;
    background:linear-gradient(180deg,transparent,var(--panel) 22%)}
  .ib-confirm .act{flex:1 1 40%;padding-left:10px;padding-right:10px;font-size:12px}
  .ib-confirm .act.lead{flex-basis:100%;font-size:13px}
  .ib-confirm .act.lead,.mr-primary .act.lead{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .mr.you-won::after,.mr-form i.now{animation:none}
}

/* [A172] The sets: "This set" and "All sets" on the auction floor. */
.auc-sets-shell{width:min(640px,100%)}
.auc-sets-shell .scorecard-frame{padding:20px 22px;max-height:calc(100vh - 120px);overflow-y:auto}
.auc-sets-head{margin-bottom:14px}
.auc-sets-head span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.auc-sets-head h3{margin:4px 0 2px;font-family:var(--display);font-size:24px;text-transform:uppercase}
.auc-sets-head em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.auc-sets-empty{color:var(--ink-3);margin:6px 0}
.auc-sets-table{width:100%;border-collapse:collapse}
.auc-sets-table td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle}
.auc-sets-rt{width:40px}
.auc-sets-name{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auc-sets-where{font-size:12px;color:var(--ink-3)}
.auc-sets-st{text-align:right;white-space:nowrap;font-size:12.5px;color:var(--ink-3)}
.auc-sets-st b{color:var(--ink)}
.auc-sets-sold .auc-sets-name,.auc-sets-unsold .auc-sets-name{opacity:.62}
.auc-sets-current{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.auc-sets-current .auc-sets-st b{color:var(--gold)}
.auc-sets-set{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.auc-sets-set.now{border-color:var(--gold)}
.auc-sets-set summary{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  list-style:none}
.auc-sets-set summary::-webkit-details-marker{display:none}
.auc-sets-set summary::after{content:'▾';margin-left:8px;color:var(--ink-3);transition:transform .15s}
.auc-sets-set[open] summary::after{transform:rotate(180deg)}
.auc-sets-set summary i{font-style:normal;font-family:var(--mono);color:var(--ink-3);width:22px}
.auc-sets-set summary span{flex:1;font-weight:600}
.auc-sets-set summary span b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bg);background:var(--gold);padding:2px 6px;border-radius:4px;
  margin-left:6px}
.auc-sets-set summary em{font-style:normal;font-size:12px;color:var(--ink-3);text-align:right}
.auc-sets-set .auc-sets-table{margin:0 0 4px}
.auc-sets-set .auc-sets-table td:first-child{padding-left:14px}
.auc-sets-set .auc-sets-table td:last-child{padding-right:14px}
@media (max-width:560px){
  .auc-sets-shell .scorecard-frame{padding:16px 12px}
  .auc-sets-set summary{flex-wrap:wrap;gap:4px 10px}
  .auc-sets-set summary em{width:100%;text-align:left;padding-left:32px;order:3}
  .auc-sets-set summary::after{order:2}
}

/* ============ FILL ROUND, rebuilt [A174] ============
   Was one long list read top-down, best first. Now a toolbar that filters by role, by
   batting band and by overseas, sorts several ways, and groups the cards under headings,
   above a grid of cards -- with what the squad still lacks shown first, since that is
   what decides most fill picks. */
.auc-fill-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.auc-fill-clock{font-family:var(--mono);font-size:13px;color:var(--ink-2);padding:5px 10px;
  border:1px solid var(--line);border-radius:999px}
.auc-fill-clock.urgent{color:var(--hot);border-color:var(--hot);animation:aucPulse .9s ease-in-out infinite}
.auc-fill-tools{position:sticky;top:0;z-index:5;margin-top:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:rgba(10,23,48,.94);
  backdrop-filter:blur(6px);display:grid;gap:10px}
.auc-fill-tools .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.auc-fill-tools .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);min-width:62px}
.fchip{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font:600 12.5px/1 var(--sans);padding:7px 11px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.fchip:hover{border-color:var(--line-strong);color:var(--ink)}
.fchip.sel{background:var(--gold);border-color:var(--gold);color:#1b1300}
.fchip .n{font-family:var(--mono);font-size:11px;opacity:.7}
.fchip.need{border-color:var(--hot);color:var(--hot)}
.fchip.need.sel{background:var(--hot);color:#fff}
.fchip:disabled{opacity:.35;cursor:default}
.fsort{appearance:none;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;font:600 12.5px var(--sans);padding:7px 28px 7px 10px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.auc-fill-groups{margin-top:18px;display:grid;gap:22px}
.auc-fill-group h4{margin:0 0 10px;display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em}
.auc-fill-group h4 em{font:500 12px var(--mono);color:var(--ink-3);font-style:normal}
.auc-fill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.fcard{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(160deg,var(--team-deep,var(--panel-2)) 0%,var(--panel) 70%);
  padding:12px 12px 10px;display:grid;gap:6px;transition:transform .15s,border-color .15s}
.fcard:hover{transform:translateY(-2px);border-color:var(--team,var(--line-strong))}
.fcard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--team,var(--line))}
.fcard .top{display:flex;align-items:center;gap:7px}
.fcard .rt{margin-left:auto}
.fcard .nm{font-weight:800;font-size:15px;line-height:1.2;cursor:pointer}
.fcard .nm em{display:block;font:400 11.5px var(--sans);color:var(--ink-3);font-style:normal;margin-top:2px}
.fcard .meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.fcard .fills{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.fcard button{margin-top:4px;width:100%}
.fcard.wanted{border-color:rgba(255,74,53,.55);box-shadow:0 0 0 1px rgba(255,74,53,.25) inset}
.auc-fill-empty{padding:28px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);border-radius:14px}

/* ============ THE TRADE WINDOW [A174] ============
   Its own room: a dark trading desk, your squad on the left, a partner's on the right and
   the deal itself on the table between them, with the two players squaring up. */
#aucTrade{--trd-glow:rgba(61,220,151,.18)}
.trd-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:30px 0 10px;border-bottom:1px solid var(--line)}
.trd-hero .auc-title{font-size:clamp(40px,7vw,68px)}
.trd-hero .auc-title span{color:var(--mint)}
.trd-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.trd-clock{font:700 26px var(--mono);color:var(--mint);min-width:76px;text-align:center;
  padding:6px 12px;border:1px solid rgba(61,220,151,.4);border-radius:10px;background:rgba(61,220,151,.06)}
.trd-clock.urgent{color:var(--hot);border-color:var(--hot);background:rgba(255,74,53,.08);animation:aucPulse .9s ease-in-out infinite}
.trd-pips{display:flex;align-items:center;gap:5px;font:600 11px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.trd-pips i{width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
.trd-pips i.used{background:transparent;border:1px solid var(--ink-3);box-shadow:none}
.trd-desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr) minmax(0,1fr);gap:16px;margin-top:18px;align-items:start}
.trd-col{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.trd-col-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(90deg,var(--team-deep,var(--panel-2)),transparent);border-bottom:1px solid var(--line)}
.trd-col-head b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.02em}
.trd-col-head em{margin-left:auto;font:500 11.5px var(--mono);color:var(--ink-3);font-style:normal}
.trd-filter{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line)}
.trd-filter .fchip{padding:5px 9px;font-size:11.5px}
.trd-list{max-height:520px;overflow-y:auto}
.trd-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s}
.trd-row:hover{background:rgba(255,255,255,.04)}
.trd-row .nm{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trd-row .nm em{display:block;font:400 11px var(--sans);color:var(--ink-3);font-style:normal}
.trd-row .pr{font:600 12px var(--mono);color:var(--ink-2)}
.trd-row.sel{background:linear-gradient(90deg,rgba(61,220,151,.22),rgba(61,220,151,.04));
  box-shadow:inset 3px 0 0 var(--mint)}
.trd-row.locked{opacity:.45;cursor:not-allowed}
.trd-row.locked .nm::after{content:" · arrived in a trade";font-weight:400;font-size:11px;color:var(--ink-3)}
.trd-partners{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.trd-partner{appearance:none;display:flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);font:600 12.5px var(--sans);cursor:pointer;white-space:nowrap}
.trd-partner.sel{border-color:var(--team,var(--gold));background:var(--team-deep,var(--panel-2));color:var(--ink)}
.trd-partner .rdy{font:700 9.5px var(--mono);letter-spacing:.1em;color:var(--mint)}
.trd-partner .out{font:700 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.trd-table{border:1px solid rgba(61,220,151,.35);border-radius:16px;padding:16px;
  background:radial-gradient(120% 90% at 50% 0%,var(--trd-glow),transparent 60%),var(--panel);
  box-shadow:0 18px 50px rgba(0,0,0,.35);position:sticky;top:12px}
.trd-table h3{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.03em;text-align:center}
.trd-faceoff{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:6px}
.trd-slot{min-width:0;min-height:132px;border:1px dashed var(--line-strong);border-radius:12px;padding:10px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:5px;
  background:linear-gradient(170deg,var(--team-deep,transparent),transparent 75%)}
.trd-slot.filled{border-style:solid;border-color:var(--team,var(--line-strong))}
.trd-slot .cap{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.trd-slot .who{font-weight:800;font-size:15px;line-height:1.2}
.trd-slot .who em{display:block;font:400 11px var(--sans);color:var(--ink-3);font-style:normal}
.trd-slot.filled{animation:trdLand .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes trdLand{from{transform:scale(.88);opacity:.3}to{transform:none;opacity:1}}
.trd-swap{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  color:var(--mint);border:1px solid rgba(61,220,151,.45);background:rgba(61,220,151,.08)}
.trd-swap.live{animation:trdSpin 2.4s ease-in-out infinite}
@keyframes trdSpin{0%,60%{transform:rotate(0)}80%,100%{transform:rotate(180deg)}}
.trd-verdict{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trd-delta{border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:center}
.trd-delta span{display:block;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.trd-delta b{font:700 20px var(--mono)}
.trd-delta b.up{color:var(--mint)} .trd-delta b.down{color:var(--red-2)} .trd-delta b.flat{color:var(--ink-2)}
.trd-errors{margin-top:10px;font-size:13px;color:var(--red-2);display:grid;gap:3px}
.trd-hint{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:center}
.trd-send{margin-top:12px;width:100%}
.trd-offers{margin-top:16px;display:grid;gap:8px}
.trd-offers h4{margin:6px 0 0;font:700 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.trd-offer{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:7px;background:var(--panel-2)}
.trd-offer.incoming.open{border-color:var(--gold);box-shadow:0 0 0 1px rgba(245,184,61,.3),0 0 22px rgba(245,184,61,.12);animation:trdNudge 2.2s ease-in-out infinite}
@keyframes trdNudge{0%,100%{box-shadow:0 0 0 1px rgba(245,184,61,.3),0 0 10px rgba(245,184,61,.08)}50%{box-shadow:0 0 0 1px rgba(245,184,61,.55),0 0 26px rgba(245,184,61,.22)}}
.trd-offer .line{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.trd-offer .line b{font-weight:800}
.trd-offer .arrow{color:var(--mint);font-weight:800}
.trd-offer .st{margin-left:auto;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.trd-offer .st.accepted{color:var(--mint)} .trd-offer .st.declined,.trd-offer .st.void{color:var(--red-2)}
.trd-offer .acts{display:flex;gap:6px}
.trd-offer .acts .act{flex:1;padding:8px 10px}
.trd-offer.closed{opacity:.55}
.trd-wire{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.trd-wire h4{margin:0 0 10px;font:700 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.trd-wire-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.trd-wire-row .arrow{color:var(--mint)}
.trd-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px}
@media (max-width:980px){
  .trd-desk{grid-template-columns:minmax(0,1fr)}
  .trd-table{position:static;order:-1}
  .trd-list{max-height:340px}
}

/* A completed trade, announced to the whole room. */
.trd-flash{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:16px;
  background:radial-gradient(80% 60% at 50% 50%,rgba(6,13,31,.82),rgba(6,13,31,.96));
  animation:trdFade .3s ease-out;cursor:pointer}
.trd-flash.out{animation:trdFadeOut .35s ease-in forwards}
@keyframes trdFade{from{opacity:0}}
@keyframes trdFadeOut{to{opacity:0}}
.trd-flash-inner{width:min(760px,100%);text-align:center}
.trd-flash-kicker{font:700 12px var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--mint)}
.trd-flash-title{font-family:var(--display);font-weight:400;font-size:clamp(64px,15vw,150px);line-height:.9;
  letter-spacing:.03em;margin:4px 0 18px;color:var(--ink);
  text-shadow:0 0 30px rgba(61,220,151,.45);animation:trdStamp .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes trdStamp{from{transform:scale(2.4) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.trd-flash-deal{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);align-items:center;gap:8px}
.trd-flash-side{border-radius:16px;padding:16px 12px;display:grid;justify-items:center;gap:6px;
  background:linear-gradient(170deg,var(--team-deep,var(--panel-2)),var(--panel));border:1px solid var(--team,var(--line))}
.trd-flash-side .crest-img{width:64px;height:64px}
.trd-flash-side .fr{font-family:var(--display);font-size:22px;letter-spacing:.03em}
.trd-flash-side .ow{font-size:12px;color:var(--ink-3)}
.trd-flash-side .gets{margin-top:6px;font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.trd-flash-side .pl{font-weight:800;font-size:18px;line-height:1.2}
.trd-flash-side .pl em{display:block;font:400 12px var(--sans);color:var(--ink-3);font-style:normal}
.trd-flash-side.left{animation:trdInL .6s .25s cubic-bezier(.2,1.2,.4,1) both}
.trd-flash-side.right{animation:trdInR .6s .25s cubic-bezier(.2,1.2,.4,1) both}
@keyframes trdInL{from{transform:translateX(-60%);opacity:0}}
@keyframes trdInR{from{transform:translateX(60%);opacity:0}}
.trd-flash-side .pl{animation:trdPlate .8s .9s ease-out both}
@keyframes trdPlate{from{opacity:0;transform:translateY(10px)}}
.trd-flash-swap{font-size:34px;color:var(--mint);animation:trdSpinOnce 1s .6s ease-in-out both}
@keyframes trdSpinOnce{from{transform:rotate(-180deg) scale(.4);opacity:0}}
.trd-flash-tap{margin-top:16px;font-size:12px;color:var(--ink-3)}
@media (max-width:560px){
  .trd-flash-deal{grid-template-columns:minmax(0,1fr);gap:6px}
  .trd-flash-swap{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  .trd-flash,.trd-flash *,.trd-swap.live,.trd-offer.incoming.open,.trd-slot.filled{animation:none!important}
}
@keyframes aucPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (max-width:600px){
  .auc-fill-tools{position:static}
  /* One swipeable line per filter on a phone, rather than three wrapped rows each. */
  .auc-fill-tools .row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .auc-fill-tools .row::-webkit-scrollbar{display:none}
  .auc-fill-tools .fchip{flex:none}
  .auc-fill-tools .lbl{min-width:54px;flex:none}
}

/* --- the daily challenge's finished day: the season's result card plus the challenge
   strip and today's board (daily.js showDone) --------------------------------------- */
.dr{margin-top:6px}
.dr-match{color:var(--ink-3);font-weight:500}
.dr-ask{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1.4;
  position:relative;z-index:1}
.dr-ask-crest{width:38px;height:34px;object-fit:contain;flex:none}
.dr-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;position:relative;z-index:1}
.dr-chip{display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13.5px;color:var(--ink-2)}
.dr-chip i{font:700 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.dr-chip b{color:var(--ink);font-weight:800}
.dr-chip em{font-style:normal;color:var(--ink-3);font-size:12px}
.dr-chip.gold{border-color:color-mix(in srgb,var(--gold) 50%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.dr-chip.gold b{color:var(--gold-2)}
.dr-chip.fire{border-color:color-mix(in srgb,var(--hot) 45%,transparent)}

.db{max-width:820px;margin:30px auto 0}
.db-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px;
  border-bottom:2px solid var(--gold)}
.db-head span{font-family:var(--display);font-size:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.db-head em{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.db-row{display:grid;grid-template-columns:34px 36px minmax(0,1fr) 28px auto 44px;align-items:center;gap:10px;
  padding:10px 8px;border-bottom:1px solid var(--line)}
.db-row.you{background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.db-rank{font-family:var(--display);font-size:20px;color:var(--ink-3);text-align:center}
.db-row.top .db-rank{color:var(--gold-2)}
.db-badge.kit-badge,.db-badge.team-badge{width:32px;height:32px;font-size:11px;margin:0}
.db-name{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-name em{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--gold)}
.db-met{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800}
.db-met.y{background:var(--green);color:#04231a}
.db-met.n{background:transparent;border:1px solid var(--red);color:var(--red-2)}
.db-margin{font-size:13.5px;color:var(--ink-2);text-align:right}
.db-bonus{font:700 12px var(--mono);color:var(--gold-2);text-align:right}
.db-empty,.db-foot{color:var(--ink-3);font-size:14px;padding:14px 4px 0}
@media (max-width:560px){
  /* The margin moves under the name: beside it, a long "over the 17 allowed" left the
     name three letters wide. */
  .db-row{grid-template-columns:26px 30px minmax(0,1fr) auto 24px;
    grid-template-areas:"rank badge name bonus met" "rank badge margin margin met";
    gap:2px 8px;padding:9px 4px}
  .db-rank{grid-area:rank}.db-badge{grid-area:badge}.db-name{grid-area:name}
  .db-met{grid-area:met}.db-bonus{grid-area:bonus}
  .db-margin{grid-area:margin;text-align:left;font-size:12.5px}
  .dr-ask{font-size:13px}
}

/* The daily's scenario banner, above the draft: the result card's language, compact. */
.dbn{display:flex;align-items:center;gap:22px;margin:6px auto 22px;max-width:none;padding:20px 24px}
.dbn-crest{flex:none}
.dbn-crest .daily-crest{height:92px;margin:0}
.dbn-body{min-width:0;position:relative;z-index:1}
.dbn .mr-stage{text-align:left;margin-bottom:8px}
.dbn-scenario{font-family:var(--display);font-size:clamp(22px,3vw,32px);line-height:1.12;color:var(--ink);
  letter-spacing:.01em;text-transform:uppercase}
.dbn-chips{justify-content:flex-start;margin-top:12px}
@media (max-width:560px){
  .dbn{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .dbn-crest .daily-crest{height:64px}
}

/* --- the profile: a player card in your own kit's colours ------------------------------ */
.pf{max-width:980px;margin:0 auto;padding-bottom:30px}
.pf-hero{max-width:none;margin:22px 0 0;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:28px 30px}
.pf-hero::after{content:"";position:absolute;right:-12%;top:-60%;width:60%;height:200%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--team) 22%,transparent),transparent)}
.pf-id{display:flex;align-items:center;gap:20px;min-width:0;position:relative;z-index:1}
.pf-badge.kit-badge{width:88px;height:88px;font-size:26px;margin:0;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.pf-who{min-width:0}
.pf-who .mr-stage{text-align:left;margin-bottom:6px}
.pf-name{font-family:var(--display);font-size:clamp(34px,6vw,58px);line-height:1;margin:0;color:var(--ink);
  overflow-wrap:anywhere}
.pf-team{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--team-ink,var(--gold-2));
  font-weight:700;font-size:15px}
.pf-kit-btn{padding:5px 10px;font-size:10.5px;white-space:nowrap;flex:none}
.pf-heroes{display:flex;gap:28px;position:relative;z-index:1}
.pf-heroes div{text-align:center}
.pf-heroes b{display:block;font-family:var(--display);font-size:clamp(38px,5vw,56px);line-height:1;color:var(--gold-2)}
.pf-heroes span,.pf-stats span{display:block;font:600 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-top:6px}

.pf-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pf-panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px 20px}
.pf-head{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;align-items:baseline;font:700 11px var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.pf-link{color:var(--gold);letter-spacing:.08em;text-decoration:none}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.pf-stats.two{grid-template-columns:repeat(2,1fr)}
.pf-stats b{display:block;font-family:var(--display);font-size:32px;line-height:1;color:var(--ink)}
.pf-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;justify-content:center}
.pf-form i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--mono);font-style:normal}
.pf-form i.w{background:var(--green);color:#04231a}
.pf-form i.l{border:1px solid var(--red);color:var(--red-2)}

.pf-recent{margin-top:16px}
.pf-game{display:grid;grid-template-columns:minmax(0,1fr) 70px 130px 70px;align-items:center;gap:12px;
  padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.pf-game:last-child{border-bottom:0}
.pf-game-kind{font-weight:700;color:var(--ink)}
.pf-game-rec{font:700 14px var(--mono);color:var(--ink);text-align:center}
.pf-game-res{color:var(--gold-2);font-weight:700}
.pf-game-date{font:600 11px var(--mono);color:var(--ink-3);text-align:right;letter-spacing:.06em}
.pf-game.champ{box-shadow:inset 3px 0 0 var(--gold);padding-left:12px}
.pf .caps{margin-top:22px}
@media (max-width:700px){
  .pf-hero{padding:22px 20px}
  .pf-badge.kit-badge{width:64px;height:64px;font-size:20px}
  .pf-heroes{width:100%;justify-content:space-around;gap:10px}
  .pf-split{grid-template-columns:1fr}
  .pf-game{grid-template-columns:minmax(0,1fr) 54px auto;gap:8px}
  .pf-game-date{grid-column:1;text-align:left;margin-top:-6px}
  .pf-game-res{grid-column:2 / -1;grid-row:1 / 3;align-self:center;text-align:right;grid-column:3}
}

/* --- a room's lobby: the code first, then the seats as cards --------------------------- */
.lb{max-width:760px;margin:0 auto;padding:6px 0 30px}
.lb-card{max-width:none;text-align:center}
.lb-code{font-family:var(--display);font-size:clamp(64px,13vw,112px);line-height:1;letter-spacing:.08em;
  color:var(--gold-2);margin:10px 0 14px;position:relative;z-index:1;
  text-shadow:0 8px 40px color-mix(in srgb,var(--gold) 35%,transparent)}
.lb-copy{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.lb-note{color:var(--ink-3);font-size:13.5px;line-height:1.5;margin:14px auto 0;max-width:460px;position:relative;z-index:1}
.lb-block{margin-top:22px}
.lb-block .pf-head em{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--ink-3);font-weight:500}
.lb-seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-seat{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;min-width:0;
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--team-deep,var(--panel-2)) 60%,var(--panel)),var(--panel));
  box-shadow:inset 3px 0 0 var(--team,var(--line-strong))}
.lb-seat.me{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.lb-mark{flex:none;display:grid;place-items:center;width:40px;height:40px}
.lb-mark .kit-badge,.lb-mark .team-badge{width:40px;height:40px;font-size:13px;margin:0}
.lb-mark .row-crest{width:40px;height:36px;object-fit:contain}
.lb-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lb-who b{color:var(--ink);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-who em{font-style:normal;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font:700 9px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
.lb-tag.host{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-2)}
.lb-tag.you{background:rgba(255,255,255,.08);color:var(--ink-2)}
.lb-name{display:flex;align-items:center;gap:6px;min-width:0}
.lb-name .lb-tag{flex:none;margin-left:0}
.lb-kick{flex:none;padding:5px 10px;font-size:10.5px}
.lb-seat.empty{background:transparent;border:1px dashed var(--line-strong);box-shadow:none}
.lb-seat.empty .lb-mark i{width:36px;height:36px;border-radius:50%;border:1px dashed var(--line-strong)}
.lb-seat.empty b{color:var(--ink-3)}
.lb-seat.more{justify-content:center}
.lb-seat.more .lb-who{align-items:center;flex-direction:row;gap:8px;flex:none}
.lb-actions{justify-content:center;margin-top:26px}
.lb-wait{text-align:center;color:var(--ink-3);margin-top:10px}
@media (max-width:560px){
  .lb-seats{grid-template-columns:1fr}
}

/* --- a room's in-between screens: the result card's language for waiting, reviewing and
   finishing (room.js roomCard) -------------------------------------------------------- */
.rs{text-align:center;margin-top:18px}
.rs-title{font-family:var(--display);font-size:clamp(34px,6vw,54px);line-height:1;color:var(--ink);
  margin:6px 0 14px;position:relative;z-index:1}
.rs-title span{font-size:.5em;color:var(--ink-3);letter-spacing:.02em}
.rs-status{color:var(--ink-2);font-size:14.5px;margin:12px 0 0;min-height:1em;position:relative;z-index:1}
.rs-status:empty{display:none}
.rs-note{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:520px;margin:0 auto;position:relative;z-index:1}
.rs-reason{margin-top:10px;font:12px var(--mono);color:var(--ink-3)}
.rs-actions{justify-content:center;margin-top:16px;position:relative;z-index:1}
.rs-gauge{max-width:460px;margin:4px auto 0}
.rs.out{--team:var(--red)}
.rs-fx{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px;margin-top:10px;
  border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line);position:relative;z-index:1}
.rs-fx.mine{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.rs-fx-stage{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.rs-fx-stage em{font-style:normal;color:var(--gold);margin-left:6px}
.rs-fx-teams{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.rs-fx-teams i{font:700 11px var(--mono);color:var(--ink-3);font-style:normal;text-transform:uppercase}
.rs-side{display:flex;align-items:center;gap:8px;min-width:0}
.rs-side b{color:var(--ink);font-weight:800}
.rs-badge.team-crest{width:38px;height:34px;margin:0;object-fit:contain}
.rs-badge.kit-badge,.rs-badge.team-badge{width:34px;height:34px;font-size:11px;margin:0}
.rs-fx-wait{font-size:13px;color:var(--ink-2)}
.rs-squad-id{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;z-index:1}
.rs-squad-id .rs-title{margin:6px 0}
.rs-squad-badge.kit-badge{width:58px;height:58px;font-size:18px;margin:0}
.rs-ratings{display:flex;justify-content:center;gap:34px;margin-top:12px;position:relative;z-index:1}
.rs-ratings b{display:block;font-family:var(--display);font-size:40px;line-height:1;color:var(--gold-2)}
.rs-ratings span{display:block;font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--ink-3);margin-top:6px}
.rs-bar{max-width:820px;margin:14px auto 0;font:600 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.rs-bar b{color:var(--gold-2);letter-spacing:.16em}
.rs-list{max-width:820px;margin-left:auto;margin-right:auto}
.rs-kit{position:relative;z-index:1;margin-top:4px;padding:5px 10px;font-size:10.5px}

/* --- Bingo: a 3x3 grid of "name a player who is both" [A182] ---------------------------- */
.bg{max-width:760px;margin:0 auto}
.bg-tabs{display:flex;gap:8px;margin:0 0 14px}
.bg-hud{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px}
.bg-pips{display:flex;gap:6px}
.bg-pips i{width:22px;height:8px;border-radius:4px;background:var(--panel-3);transition:background .2s}
.bg-pips i.right{background:var(--mint)}
.bg-pips i.wrong{background:var(--hot)}
.bg-score{display:flex;align-items:baseline;gap:8px;font-family:var(--mono)}
.bg-score b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bg-score i{font-style:normal;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}

.bg-board{display:grid;grid-template-columns:minmax(78px,.9fr) repeat(3,1fr);gap:8px}
.bg-axis{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:8px 4px;font:700 12.5px/1.2 var(--sans);color:var(--ink-2);min-height:64px}
.bg-axis img{height:30px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.bg-axis.franchise{color:var(--ink)}
.bg-axis.stat span{color:var(--gold-2)}
.bg-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:92px;padding:8px 6px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:inherit;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s}
.bg-cell:hover:not(:disabled){border-color:var(--gold);background:var(--panel-2)}
.bg-cell:disabled{cursor:default}
.bg-cell.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,184,61,.35);background:var(--panel-2)}
.bg-plus{font:300 28px/1 var(--sans);color:var(--ink-3)}
.bg-cell b{font:800 14px/1.15 var(--sans);overflow-wrap:anywhere}
.bg-cell i{font:600 10.5px var(--mono);font-style:normal;color:var(--ink-3);letter-spacing:.04em}
.bg-cell.filled{border-color:var(--mint);background:rgba(61,220,151,.11)}
.bg-cell.filled i{color:var(--mint)}
.bg-cell.filled.rare{border-color:var(--cap-purple);background:rgba(160,107,219,.16);
  box-shadow:0 0 18px rgba(160,107,219,.28)}
.bg-cell.filled.rare i{color:var(--cap-purple)}
.bg-cell.missed{background:var(--panel);border-style:dashed}
.bg-eg{font:600 11px/1.25 var(--sans);color:var(--ink-2)}
.bg-tried{color:var(--hot)!important}
.bg-cell.pop{animation:bgPop .4s ease}
.bg-cell.shake{animation:bgShake .35s ease}
@keyframes bgPop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes bgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.bg-picker{margin:18px 0 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bg-picker-q{font-size:15px;color:var(--ink-2);margin-bottom:10px}
.bg-picker-q b{color:var(--gold-2)}
.bg-results{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.bg-results button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;border:1px solid transparent;background:var(--panel-2);
  color:var(--ink);font:600 15px var(--sans);text-align:left;cursor:pointer}
.bg-results button:hover:not(:disabled),.bg-results button.act-row{border-color:var(--gold);background:var(--panel-3)}
.bg-results button:disabled{opacity:.45;cursor:default}
.bg-results em{font:600 10.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bg-none{padding:10px 4px;font-size:13.5px;color:var(--ink-3)}
.bg-cancel{margin-top:10px;background:none;border:0;color:var(--ink-3);font:600 12px var(--mono);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.bg-hint{margin:14px 0 0;font:13px var(--mono);color:var(--ink-3);min-height:1.2em;text-align:center}
.bg-done{margin-top:26px}
.bg-share-preview{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);font:15px/1.5 var(--sans);white-space:pre-wrap;display:inline-block;min-width:200px}
#bgStreak b{color:var(--gold-2)}
@media (max-width:560px){
  .bg-board{grid-template-columns:minmax(62px,.8fr) repeat(3,1fr);gap:6px}
  .bg-axis{font-size:11px;min-height:56px;padding:6px 2px}
  .bg-axis img{height:24px}
  .bg-cell{min-height:80px;padding:6px 3px}
  .bg-cell b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.bg-cell.pop,.bg-cell.shake{animation:none}}

/* --- Guess the Player [A183] ------------------------------------------------------------ */
.gp-left{font:700 13px var(--mono);color:var(--ink-2)}
.bg-pips i.used{background:var(--ink-3)}
.gp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;font:12px var(--mono);color:var(--ink-3)}
.gp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
.gp-legend i.match,.gp-tile.match{--tc:var(--mint)}
.gp-legend i.close,.gp-tile.close{--tc:var(--gold)}
.gp-legend i.miss,.gp-tile.miss,.gp-tile.unknown{--tc:var(--ink-3)}
.gp-legend i{background:var(--tc)}
.gp .bg-picker{margin:0 0 16px}
.gp-rows{display:flex;flex-direction:column;gap:12px}
.gp-row{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel)}
.gp-name{font:800 16px var(--sans);margin:0 0 8px;color:var(--ink)}
.gp-name b{color:var(--gold-2)}
.gp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:62px;padding:6px 4px;border-radius:9px;text-align:center;
  border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
  background:color-mix(in srgb,var(--tc) 30%,var(--panel-2))}
.gp-tile.miss,.gp-tile.unknown{background:var(--panel-2);border-color:var(--line)}
.gp-tile i{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gp-tile b{font:800 13px/1.15 var(--sans);overflow-wrap:anywhere}
.gp-tile em{font-style:normal;font-size:11px;color:var(--ink)}
.gp-tile.match i,.gp-tile.close i{color:color-mix(in srgb,var(--tc) 75%,var(--ink))}
.gp-clubs{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.gp-club{height:26px;width:auto;opacity:.45;filter:grayscale(1)}
.gp-club.shared{opacity:1;filter:none;filter:drop-shadow(0 0 5px rgba(61,220,151,.7))}
span.gp-club{display:inline-grid;place-items:center;min-width:26px;font:700 9px var(--mono)}
.gp-tile.fresh{animation:gpFlip .5s ease both;animation-delay:calc(var(--i) * 90ms)}
@keyframes gpFlip{0%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
.gp-answer{margin:14px 0}
.gp-answer .gp-tiles{max-width:520px}
@media (max-width:560px){
  .gp-tile{min-height:58px}.gp-tile b{font-size:12px}
  .gp-club{height:20px}span.gp-club{min-width:20px}
}
@media (prefers-reduced-motion:reduce){.gp-tile.fresh{animation:none}}

/* --- Common Ground [A188] (replaces Teammate Chain; .ch-lives and .ch-n are still Name the XI's) --- */
.ch-lives{display:flex;gap:8px}
.ch-lives i{width:26px;height:10px;border-radius:5px;background:var(--hot);transition:background .2s,opacity .2s}
.ch-lives i.lost{background:var(--panel-3);opacity:.7}
.ch-n{font:700 10px var(--mono);letter-spacing:.14em;color:var(--ink-3);min-width:34px}
.cg .gp-club{opacity:1;filter:none;height:22px}
.cg .bg-picker{margin:0 0 18px}
.cg .bg-picker.shake{animation:bgShake .35s ease}
.cg-intro{padding:26px 22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  text-align:center;margin:0 0 16px}
.cg-intro-n{font:400 64px/1 var(--display);color:var(--gold-2);letter-spacing:.02em}
.cg-intro p{color:var(--ink-2);font-size:15px;line-height:1.55;max-width:520px;margin:10px auto 18px}
.cg-intro .room-note{margin:14px auto 0;font-size:12.5px}
.cg-clock{display:flex;align-items:center;gap:14px;margin:0 0 14px;position:sticky;top:0;z-index:5;
  padding:8px 0;background:linear-gradient(var(--bg,#050b1a) 70%,transparent)}
.cg-clock b{font:400 38px/1 var(--display);min-width:92px;color:var(--ink);font-variant-numeric:tabular-nums}
.cg-bar{flex:1;height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden}
.cg-bar i{display:block;height:100%;width:100%;border-radius:4px;transition:width .2s linear;
  background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.cg-clock.urgent b{color:var(--hot);animation:timerPulse 1s ease-in-out infinite}
.cg-clock.urgent .cg-bar i{background:var(--hot)}
.cg-pair{display:flex;align-items:stretch;gap:10px;margin:0 0 14px}
.cg-player{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px 10px;border:1px solid var(--gold);border-radius:12px;background:var(--panel-2);
  text-align:center;box-shadow:0 0 0 1px rgba(245,184,61,.2)}
.cg-player b{font:800 17px/1.2 var(--sans);overflow-wrap:anywhere}
.cg-player .gp-clubs{justify-content:center}
.cg-and{align-self:center;font:400 28px var(--display);color:var(--gold-2)}
.cg-found{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.cg-hit{padding:11px 14px;border-radius:12px;border:1px solid var(--mint);background:rgba(61,220,151,.08)}
.cg-hit.fresh{animation:bgPop .4s ease}
.cg-hit.missed{border:1px dashed var(--line);background:var(--panel)}
.cg-hit-name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}
.cg-hit-name b{font:800 15px var(--sans);min-width:0;overflow-wrap:anywhere}
.cg-hit-name .gp-clubs{flex:none;max-width:45%;justify-content:flex-end}
.cg-hit-with{font:600 11.5px/1.4 var(--mono);color:var(--ink-2)}
.cg-hit-with i{font-style:normal;color:var(--mint);margin-right:6px}
.cg-hit.missed .cg-hit-with i{color:var(--ink-3)}
.cg-wrong{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.cg-sum{max-width:340px;margin:0 auto 18px;font:600 13px var(--mono);color:var(--ink-2)}
.cg-sum div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line)}
.cg-sum b{color:var(--ink)}
.cg-reveal{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;text-align:left}
@media (max-width:560px){
  .cg-intro-n{font-size:52px}.cg-clock b{font-size:32px;min-width:78px}
  .cg-pair{flex-direction:column}.cg-and{align-self:center;line-height:1}
  .cg-player{padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){.cg-hit.fresh,.cg .bg-picker.shake,.cg-clock.urgent b{animation:none}}

/* --- Three to Make [A196] (reuses Common Ground's intro, clock and picker) --- */
.tr-target{text-align:center;padding:18px 14px;margin:0 0 14px;border:1px solid var(--gold);border-radius:14px;
  background:var(--panel-2);box-shadow:0 0 0 1px rgba(245,184,61,.2)}
.tr-target b{display:block;font:400 64px/1 var(--display);color:var(--gold-2);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.tr-target span{display:block;margin-top:6px;font:700 12px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.tr-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.tr-slot{min-height:56px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;
  border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.tr-slot i{font:400 24px var(--display);font-style:normal;color:var(--ink-3)}
.tr-slot.on{border:1px solid var(--mint);background:rgba(61,220,151,.08);animation:bgPop .3s ease;justify-content:space-between}
.tr-slot b{font:800 14px/1.2 var(--sans);min-width:0;overflow-wrap:anywhere}
.tr-slot button{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer}
.tr-slot button:hover{color:var(--hot);border-color:var(--hot)}
.tr-sheet,.tr-example{max-width:420px;margin:0 auto 18px;text-align:left}
.tr-example .gp-name{margin:0 0 6px}
.tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.tr-row > span{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.tr-row b{font:800 15px var(--sans);overflow-wrap:anywhere}
.tr-row em{font:700 15px var(--mono);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.tr-row.tot{border-bottom:2px solid var(--ink-3)}
.tr-row.tot span,.tr-row.tgt span{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tr-row.tgt em{color:var(--gold-2)}
.tr .gp-clubs .gp-club{height:20px}
@media (max-width:560px){
  .tr-target b{font-size:52px}
  .tr-slots{grid-template-columns:1fr}.tr-slot{min-height:46px}
}
@media (prefers-reduced-motion:reduce){.tr-slot.on{animation:none}}

/* --- Name the XI [A185] ----------------------------------------------------------------- */
.xi-match{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  margin:0 0 16px;text-align:center}
.xi-title{font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.xi-teams{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0}
.xi-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.xi-team b{font:800 14px/1.2 var(--sans);overflow-wrap:anywhere}
.xi-team img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.xi-v{font:700 12px var(--mono);color:var(--ink-3)}
.xi-meta{font:12.5px/1.4 var(--sans);color:var(--ink-2)}
.xi-ask{margin-top:12px;font-size:15px;color:var(--ink-2)}
.xi-ask b{color:var(--gold-2)}
.xi .bg-picker{margin:0 0 12px}
.xi-wrong{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;min-height:0}
.xi-chip{padding:5px 10px;border-radius:999px;border:1px solid var(--hot);background:rgba(255,74,53,.1);
  font:600 12px var(--sans);color:var(--ink-2);text-decoration:line-through}
.xi-chip.other{border-color:var(--gold);background:rgba(245,184,61,.1);text-decoration:none}
.xi-slots{display:flex;flex-direction:column;gap:6px}
.xi-slot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.xi-slot .ch-n{min-width:20px;text-align:center;color:var(--ink-3)}
.xi-clue{flex:1;min-width:0;font:600 12px/1.3 var(--mono);color:var(--ink-2)}
.xi-slot b{font:800 14px var(--sans);text-align:right;overflow-wrap:anywhere}
.xi-blank{color:var(--ink-3);letter-spacing:.2em;font-weight:400!important}
.xi-slot.found{border-color:var(--mint);background:rgba(61,220,151,.1)}
.xi-slot.found .ch-n{color:var(--mint)}
.xi-slot.missed{border-style:dashed}
.xi-slot.missed b{color:var(--ink-2);font-weight:600}
.xi-slot.fresh{animation:bgPop .4s ease}
.xi .bg-picker.shake{animation:bgShake .35s ease}
@media (max-width:560px){.xi-clue{font-size:11px}.xi-team img{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.xi-slot.fresh,.xi .bg-picker.shake{animation:none}}


/* --- the puzzle bar and the Puzzles hub [A186] ------------------------------------------ */
.pznav{border-bottom:1px solid var(--line);background:rgba(6,13,31,.55)}
.pznav-in{max-width:1180px;margin:0 auto;padding:0 26px;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.pznav-in::-webkit-scrollbar{display:none}
.pznav a{flex:none;padding:11px 12px;font:650 13px var(--sans);color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.pznav a:hover{color:var(--ink)}
.pznav a.on{color:var(--gold-2);border-bottom-color:var(--gold)}
.pznav .pznav-all{color:var(--ink-3);padding-right:16px;margin-right:6px;border-right:1px solid var(--line)}
@media (max-width:900px){.pznav-in{padding:0 12px}}
.pz{max-width:860px;margin:0 auto}
.pz-h2{font:400 30px/1 var(--display);text-transform:uppercase;margin:34px 0 14px;letter-spacing:.01em}
.pz-h2 span{font:600 13px var(--mono);letter-spacing:.08em;color:var(--ink-3);text-transform:none}
.pz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pz-grid.one{grid-template-columns:1fr}
.pz-card{display:flex;flex-direction:column;min-height:176px;padding:20px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s}
.pz-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.pz-tag{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pz-card h3{font:400 28px/1 var(--display);text-transform:uppercase;margin:10px 0 8px}
.pz-card p{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0}
.pz-go{margin-top:auto;padding-top:14px;font-weight:750;font-size:14px;color:var(--gold)}
.pz-card.done{border-color:rgba(61,220,151,.5);background:linear-gradient(160deg,rgba(61,220,151,.08),var(--panel))}
.pz-card.done .pz-go{color:var(--mint)}
@media (max-width:640px){.pz-grid{grid-template-columns:1fr}.pz-card{min-height:0}}


/* --- puzzle boards and ranks [A188] ---------------------------------------------------- */
.pzb{margin:18px 0}
.pzb-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px;
  border-bottom:1px solid var(--line)}
.pzb-head span{font-family:var(--display);font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.pzb-head em{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.pzb-row{display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto 56px;align-items:center;gap:10px;
  padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.05)}
.pzb-row.you{background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.pzb-rank{font-family:var(--display);font-size:19px;color:var(--ink-3);text-align:center}
.pzb-row.top .pzb-rank{color:var(--gold-2)}
.pzb-badge.kit-badge,.pzb-badge.team-badge{width:30px;height:30px;font-size:10.5px;margin:0}
.pzb-name{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pzb-name em{font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--gold)}
.pzb-note{font:600 12px var(--mono);color:var(--ink-3);text-align:right;white-space:nowrap}
.pzb-pts{font:700 15px var(--mono);color:var(--gold-2);text-align:right}
.pzb-gap{text-align:center;color:var(--ink-3);padding:2px 0;letter-spacing:.3em}
.pzb-empty{color:var(--ink-3);font-size:14px;padding:14px 4px}
.pzr{margin:14px 0 4px}
.pzr-chip{display:inline-flex;align-items:baseline;gap:10px;padding:9px 16px;border:1px solid var(--gold);
  border-radius:999px;background:rgba(245,184,61,.08);font:600 13px var(--mono);color:var(--ink-2)}
.pzr-chip i{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pzr-chip b{font:400 24px var(--display);color:var(--gold-2)}
.pzr-chip span{color:var(--ink-3)}
.pzr-note{color:var(--ink-3);font-size:14px}
.pzr-note .act{margin-left:8px}
.pzr-reset{display:block;margin:10px 0 0}
.pz-tabs{margin:0 0 4px}
.pz-note{margin:6px 0 0}
@media (max-width:560px){
  .pzb-row{grid-template-columns:24px 30px minmax(0,1fr) 48px;gap:8px}
  .pzb-note{display:none}
}

/* --- rarity [A191] ---------------------------------------------------------------------- */
.pzy-wrap{margin:8px 0 4px}
.pzy-note{color:var(--ink-3);font-size:13.5px}
.pzy{padding:12px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.pzy-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pzy-head i,.pzy-rare i{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.pzy-head b{font:400 26px var(--display);color:var(--mint)}
.pzy-head span{color:var(--ink-3);font-size:13px}
.pzy-rare{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.pzy-rare span b{color:var(--ink);margin-right:4px}

/* --- puzzle record and badges on the profile [A188] -------------------------------------- */
.pz-games{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.pz-game{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  display:flex;flex-direction:column;gap:2px}
.pz-game b{font:700 14px var(--sans);color:var(--ink)}
.pz-game span{font:600 12px var(--mono);color:var(--ink-3)}
.pz-badges-head{margin-top:18px}
.pz-badges-head em{font:600 11px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--ink-3);margin-left:8px}
.pz-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:8px}
.pzbg{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 38px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);opacity:.62}
.pzbg.on{opacity:1;border-color:var(--gold);background:linear-gradient(160deg,rgba(245,184,61,.1),var(--panel))}
.pzbg-mark{position:absolute;left:13px;top:11px;font-size:16px;color:var(--ink-3)}
.pzbg.on .pzbg-mark{color:var(--gold-2)}
.pzbg b{font:800 14px var(--sans);color:var(--ink)}
.pzbg span:not(.pzbg-mark){font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.pzbg em{font:600 11px var(--mono);font-style:normal;color:var(--gold-2)}
.pzbg:not(.on) em{color:var(--ink-3)}
.pzbg-bar{height:4px;border-radius:2px;background:var(--panel-3);margin-top:4px;overflow:hidden}
.pzbg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
@media (max-width:560px){.pz-games{grid-template-columns:1fr}.pz-badges{grid-template-columns:1fr}}

/* ===== Build a Career [A199] ============================================================
   `cr-`, not `career-`: the profile page already owns .career-grid. One column of steps
   under a running header and a strip of season cards, so the career so far is always in
   view while the next decision is made. */
.cr{max-width:860px;margin:0 auto}
.cr-panel{max-width:620px;margin:0 auto}
/* [A217] the page title belongs to the create screen; once a career is under way every step
   starts at the player bar, so the decision itself sits higher up the screen */
.cr.started > .report{display:none}
.cr-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:22px 0 8px}
.cr-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* [A219] the create screen: a card per role, the debut years as chips */
.cr-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cr-role.room-choice{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 10px;
  align-items:center;text-align:left;padding:10px 12px;margin:0;white-space:normal;height:100%}
.cr-role-icon{grid-row:span 2;width:30px;height:30px;color:var(--ink-3)}
.cr-role-icon svg{width:100%;height:100%}
.cr-role b{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.cr-role-blurb{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;line-height:1.35;color:var(--ink-3)}
.cr-role.sel .cr-role-icon{color:var(--gold)}
.cr-role-note{display:none}
@media (max-width:560px){
  .cr-roles{grid-template-columns:1fr 1fr}
  .cr-role.room-choice{grid-template-rows:auto;padding:9px 10px}
  .cr-role-icon{grid-row:auto;width:24px;height:24px}
  .cr-role .cr-role-blurb{display:none}
  .cr-role-note{display:block;grid-column:1/-1;margin:2px 2px 0;font-size:13px;color:var(--ink-3)}
}
.cr-years{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cr-years .room-choice{margin:0;padding:8px 4px;text-align:center}
/* held back until the spin settles, but keeping its place so nothing jumps */
.cr-held{visibility:hidden}
/* [A214] the player card and the path of a career */
.cr-head{padding:4px 0 0}
/* [A217] a slim player bar: Rating, name, club in one row; potential and totals under it */
.cr-pc{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:center;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);
  border-radius:16px;padding:10px 14px}
.cr-pc-rating{grid-row:span 2;width:64px;height:70px;border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border:2px solid var(--line-strong);background:rgba(255,255,255,.03)}
.cr-pc-rating b{font-family:var(--display);font-size:38px;line-height:1;font-weight:400}
.cr-pc-rating span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cr-pc-rating.good{border-color:var(--mint)}
.cr-pc-rating.star{border-color:var(--gold);color:var(--gold-2)}
.cr-pc-rating.elite{border-color:var(--gold);color:#1a1204;background:linear-gradient(160deg,#ffd77a,var(--gold))}
.cr-pc-rating.elite span{color:#3a2a06}
.cr-pc-who{min-width:0}
.cr-pc-who > b{display:block;font-family:var(--display);font-size:clamp(22px,3.4vw,30px);letter-spacing:.01em;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-pc-who > span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cr-pc-foot{grid-column:2/-1;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.cr-pot{display:flex;align-items:center;gap:10px;flex:1 1 220px;max-width:360px}
.cr-pot-bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;max-width:320px}
.cr-pot-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--gold))}
.cr-pot span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cr-pot b{color:var(--gold-2)}
.cr-pc-club{display:flex;align-items:center;gap:8px;max-width:220px;text-align:right}
.cr-pc-club span{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.3}
.cr-pc-crest{height:38px;width:38px;object-fit:contain;order:2}
.cr-tot{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cr-tot b{color:var(--mint);font-size:14px}
/* [A217] the career chart folds away behind its own line; open on the season and career cards */
.cr-path-wrap{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cr-path-wrap > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;white-space:nowrap;
  padding:9px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gold-2)}
.cr-path-wrap > summary::-webkit-details-marker{display:none}
.cr-path-wrap > summary::before{content:'▸';transition:transform .15s;color:var(--ink-3)}
.cr-path-wrap[open] > summary::before{transform:rotate(90deg)}
.cr-path-wrap > summary span{color:var(--ink-3);letter-spacing:0}
.cr-path{padding:0 12px 8px}
.cr-path-key{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-bottom:6px}
.cr-path-key i{display:inline-block;vertical-align:middle;margin-right:5px}
.cr-path-key i.bar{width:9px;height:12px;border-radius:2px;background:var(--mint)}
.cr-path-key i.dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(255,255,255,.35)}
.cr-path-key i.dot.hot{background:var(--mint)}
.cr-path-key i.dot.cold{background:var(--red-2)}
.cr-path-key i.t{width:9px;height:11px;border-radius:2px;margin:0 3px 0 6px}
.cr-path-key i.dot{margin:0 4px 0 8px}
.cr-path-key i.t.base{background:rgba(52,211,153,.32)}
.cr-path-key i.t.good{background:rgba(52,211,153,.6)}
.cr-path-key i.t.star{background:rgba(245,184,61,.75)}
.cr-path-key i.t.elite{background:var(--gold)}
.cr-path-key i.t.faded{opacity:.45}
.cr-path-key i.pot{width:14px;border-top:2px dashed var(--gold)}
.cr-path-plot{position:relative;display:flex;gap:0;overflow-x:auto;padding:4px 0 0 22px;background-attachment:local}
.cr-path-pot{position:absolute;left:0;right:0;border-top:2px dashed rgba(245,184,61,.6);pointer-events:none;z-index:1}
/* [A218] the gridlines' numbers, in the plot's left gutter beside the first column */
.cr-path-axis{position:absolute;left:-21px;margin-bottom:-6px;font-family:var(--mono);font-size:9px;line-height:1;color:var(--ink-3)}
.cr-path-cup{position:absolute;left:0;right:0;text-align:center;font-size:13px;line-height:1;margin-bottom:3px;z-index:2}
.cr-path-col{flex:1 0 40px;max-width:60px;display:flex;flex-direction:column;align-items:center;gap:3px}
.cr-path-area{position:relative;width:100%;height:120px}
.cr-path-bar{position:absolute;left:14%;right:14%;bottom:0;border-radius:6px 6px 2px 2px;background:rgba(52,211,153,.6);
  display:flex;justify-content:center;align-items:flex-start}
.cr-path-bar b{margin-top:3px;font-family:var(--mono);font-size:11px;font-weight:700;color:#04150d}
.cr-path-bar.star{background:rgba(245,184,61,.75)}
.cr-path-bar.star b,.cr-path-bar.elite b{color:#1a1204}
.cr-path-bar.elite{background:var(--gold)}
.cr-path-bar.base{background:rgba(52,211,153,.32)}
.cr-path-bar.base b{color:var(--ink)}
.cr-path-dot{position:absolute;right:4px;width:12px;height:12px;margin-bottom:-6px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(255,255,255,.35);z-index:2}
.cr-path-dot.hot{background:var(--mint)}
.cr-path-dot.cold{background:var(--red-2)}
.cr-path-col.squad .cr-path-bar{opacity:.45}
.cr-path-col span{font-family:var(--mono);font-size:10px;color:var(--ink-3);line-height:1}
.cr-path-col.champ span{color:var(--gold-2);font-weight:700}
.cr-path-crest{height:18px;width:18px;object-fit:contain}
.cr-path-area{margin-top:16px}
@media (max-width:560px){
  .cr-pc{gap:8px 12px;padding:10px 12px}
  .cr-pc-rating{grid-row:auto;width:56px;height:62px}
  .cr-pc-rating b{font-size:32px}
  .cr-pc-who > span{font-size:11px}
  .cr-pc-club span{display:none}
  .cr-pc-crest{height:32px;width:32px}
  .cr-pc-foot{grid-column:1/-1;gap:6px 14px}
  .cr-pot{flex-basis:100%;max-width:none}
}
.cr-stage{padding-top:18px}
.cr-step{max-width:720px;margin:0 auto}
.cr-step > .over-line{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--gold);text-align:center}
.cr-h{font-family:var(--display);font-size:clamp(32px,5vw,48px);font-weight:400;text-align:center;margin:6px 0 14px}
.cr-warn{background:rgba(226,71,46,.12);border:1px solid rgba(226,71,46,.4);border-radius:12px;
  padding:12px 16px;color:var(--ink);font-size:14.5px;margin:6px 0 16px}
.cr-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cr-offer{position:relative;font:inherit;color:var(--ink);background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-strong);border-radius:16px;padding:20px 14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .12s,border-color .12s}
.cr-offer:hover,.cr-offer:focus-visible{transform:translateY(-2px);border-color:var(--gold)}
.cr-offer b{font-size:15px;line-height:1.25}
/* [A218] each offer in its club's colours (a .crest-KEY class carries --team and --team-deep),
   and the deal pinned to the bottom so the buttons line up whatever the name's length */
.cr-offer[class*="crest-"]{background:linear-gradient(170deg,color-mix(in srgb,var(--team-deep) 85%,var(--panel-2)),var(--panel) 80%);
  border-color:color-mix(in srgb,var(--team) 40%,var(--line-strong))}
.cr-offer[class*="crest-"]::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;border-radius:16px 16px 0 0;background:var(--team)}
.cr-offer .cr-deal{margin-top:auto;padding-top:8px}
.cr-offer-crest{height:64px;width:64px;object-fit:contain}
.cr-price{font-family:var(--mono);font-size:18px;font-weight:800;color:var(--mint)}
.cr-place{font-family:var(--mono);font-size:12.5px;color:var(--gold-2)}
.cr-deal{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:8px}
.cr-deal .act{width:100%;padding:10px 8px;font-size:12.5px}
.cr-deal span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cr-strength{display:flex;align-items:center;gap:8px;width:100%;max-width:200px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cr-strength i{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cr-strength i b{display:block;height:100%;border-radius:inherit;background:var(--team,var(--mint))}
.cr-strength em{font-style:normal;color:var(--ink);font-weight:700;font-size:12.5px}
.cr-tag{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--gold);color:#1a1204;border-radius:6px;padding:2px 7px}
.cr-event{background:linear-gradient(170deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);
  border-radius:20px;padding:26px 22px 20px;text-align:center;margin-top:10px}
.cr-event-icon{font-size:34px;line-height:1}
.cr-event p{color:var(--ink-2);font-size:16px;max-width:46ch;margin:0 auto 18px}
.cr-event-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cr-opt{font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:14px;padding:14px 16px;transition:transform .12s,border-color .12s}
.cr-opt:hover,.cr-opt:focus-visible{border-color:var(--gold);transform:translateY(-1px)}
.cr-opt.lead{border-color:rgba(245,184,61,.6)}
.cr-opt b{font-size:16px}
.cr-opt span{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.45}
.cr-event-now{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.cr-event-now b{color:var(--ink)}
.cr-event-injury,.cr-event-niggle,.cr-event-fracture{border-color:rgba(226,71,46,.45)}
.cr-notes{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:4px 14px 6px;background:rgba(255,255,255,.02)}
.cr-notes .cr-label{margin:10px 0 8px}
/* [A218] each note a small card, marked ▲ when it helped you and ▼ when it cost you */
.cr-note-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cr-note{display:flex;gap:10px;align-items:baseline;margin:0;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:14.5px;line-height:1.45}
.cr-note i{font-style:normal;flex:0 0 auto;font-size:11px;color:var(--ink-3)}
.cr-note.up{border-color:rgba(52,211,153,.35)}.cr-note.up i{color:var(--mint)}
.cr-note.down{border-color:rgba(226,71,46,.35)}.cr-note.down i{color:var(--red-2)}
.cr-spin-num{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.cr-spin-num b{font-family:var(--display);font-size:40px;font-weight:400;line-height:1}
.cr-spin-card.ceiling .cr-spin-num b{color:var(--gold-2)}
.cr-spin-num i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cr-matches{margin-top:16px}
.cr-matches summary{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--gold-2);padding:6px 0 10px}
.cr-matches .cr-feed-list{max-height:none}
.cr-fr.open{cursor:pointer}
.cr-fr.open:hover{background:rgba(255,255,255,.04)}
.cr-loading{display:flex;flex-direction:column;align-items:center;gap:8px;padding:60px 0;text-align:center}
.cr-loading b{font-family:var(--display);font-size:32px;font-weight:400}
.cr-loading span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.cr-ball{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6a4d,#a3200f);
  animation:cr-bounce .7s ease-in-out infinite alternate}
@keyframes cr-bounce{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
.cr-spin{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 6px}
.cr-spin-card{background:var(--panel);border:1px solid var(--line-strong);border-radius:18px;padding:22px 16px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cr-spin-card.ceiling{border-color:var(--gold);background:linear-gradient(170deg,#2a2208,var(--panel) 70%)}
.cr-spin-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cr-spin-crest{height:56px;width:56px;object-fit:contain}
.cr-roll{font-family:var(--display);font-size:clamp(24px,4vw,34px);font-weight:400;min-height:1.2em}
.cr-roll.settled{color:var(--gold-2)}
.cr-spin-card span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cr-season,.cr-final{background:linear-gradient(170deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);
  border-radius:20px;padding:22px}
.cr-season.champ{border-color:var(--gold);box-shadow:0 0 30px rgba(245,184,61,.18)}
/* [A218] the season card in its club's colours; a title season keeps the gold edge and gets a ribbon */
.cr-season[class*="crest-"]{position:relative;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--team-deep) 90%,var(--panel-2)),var(--panel) 70%)}
.cr-season[class*="crest-"]:not(.champ){border-color:color-mix(in srgb,var(--team) 45%,var(--line-strong))}
.cr-season[class*="crest-"]::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--team)}
.cr-season.champ::before{background:linear-gradient(90deg,var(--gold),#ffe08a,var(--gold))}
.cr-ribbon{margin:-6px auto 14px;width:max-content;max-width:100%;font-family:var(--mono);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#1a1204;background:linear-gradient(90deg,var(--gold),#ffe08a,var(--gold));
  border-radius:999px;padding:5px 16px;box-shadow:0 0 18px rgba(245,184,61,.35)}
.cr-season-top{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.cr-season-top .over-line{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.cr-season-crest{height:60px;width:60px;object-fit:contain}
.cr-finish{font-family:var(--display);font-size:clamp(26px,4vw,36px);line-height:1.1}
.cr-cards{display:flex;gap:8px}
.cr-card{text-align:center;border:2px solid var(--line-strong);border-radius:14px;padding:6px 14px;min-width:84px}
.cr-card.rating.good{border-color:var(--mint)}
.cr-card.rating.star,.cr-card.rating.elite{border-color:var(--gold);color:var(--gold-2)}
.cr-card b{display:block;font-family:var(--display);font-size:48px;line-height:1;font-weight:400}
.cr-card span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cr-card.elite{border-color:var(--gold);color:var(--gold-2)}
/* [A217] where the Rating goes next season, under this season's: the bar above already shows it */
.cr-card em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.cr-card em.up{color:var(--mint)}
.cr-card em.down{color:var(--red-2)}
.cr-badges{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.cr-badge{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong)}
.cr-badge.gold{background:var(--gold);color:#1a1204;border-color:var(--gold)}
.cr-badge.orange{background:var(--cap-orange);color:#1a0d02;border-color:var(--cap-orange)}
.cr-badge.purple{background:var(--cap-purple);color:#120624;border-color:var(--cap-purple)}
.cr-badge.dim{color:var(--ink-3)}
.cr-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:14px}
.cr-lines > div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cr-lines b{font-family:var(--mono);font-size:22px;color:var(--mint);font-variant-numeric:tabular-nums}
.cr-lines span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:2px}
.cr-hl{margin-top:16px}
.cr-hl > div:not(.cr-label){display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.cr-hl span{color:var(--ink-3);font-family:var(--mono);font-size:12px}
.cr-final{text-align:center}
.cr-final .over-line{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold)}
.cr-final-name{font-family:var(--display);font-size:clamp(40px,7vw,64px);font-weight:400;margin:4px 0}
.cr-final-sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.cr-final-crests{display:flex;justify-content:center;gap:10px;margin:16px 0 6px;flex-wrap:wrap}
.cr-final-crest{height:46px;width:46px;object-fit:contain}
.cr-rank{font-family:var(--mono);font-size:14px;color:var(--ink-2);margin-top:4px}
.cr-rank b{color:var(--gold-2);font-size:20px}
.cr-final .cr-lines,.cr-final .cr-msl{text-align:left}
@media (max-width:560px){
  .cr-row,.cr-spin{grid-template-columns:1fr}
  .cr-offers{grid-template-columns:1fr 1fr}
  .cr-offer-crest{height:48px;width:48px}
  .cr-season-top{grid-template-columns:auto 1fr}
  .cr-cards{grid-column:1/-1;justify-content:center}
  .cr-card{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;justify-content:center}
  .cr-card em{flex-basis:100%;text-align:center}
  .cr-card b{font-size:40px}
}

/* the season as it happens [A202] */
.cr-feed-panel{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 14px;
  position:sticky;top:70px;z-index:2;background:var(--bg);padding:8px 0}
.cr-feed-panel > div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}
.cr-feed-panel span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.cr-feed-panel b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-feed-panel i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mint)}
.cr-cap.you{border-color:var(--gold)}
.cr-cap.you b{color:var(--gold-2)}
.cr-feed-list{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto;
  border:1px solid var(--line);border-radius:14px}
.cr-fr{display:grid;grid-template-columns:72px 28px minmax(84px,.9fr) minmax(0,1.5fr) auto;gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px;animation:cr-in .25s ease-out}
.cr-fr:last-child{border-bottom:0}
.cr-fr.po{background:rgba(245,184,61,.07)}
@keyframes cr-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cr-fr-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cr-fr-opp{display:flex;align-items:center;gap:6px;font-weight:600;min-width:0}
.cr-fr-crest{height:20px;width:20px;object-fit:contain;flex:0 0 auto}
.cr-fr-res{font-family:var(--mono);font-weight:800;text-align:center;border-radius:6px;padding:1px 0}
.cr-fr.won .cr-fr-res{background:var(--green);color:#03140c}
.cr-fr.lost .cr-fr-res{background:var(--red);color:#fff}
.cr-fr-score{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.cr-fr-score i{color:var(--ink-3);font-style:normal}
.cr-fr-you{font-family:var(--mono);font-size:12.5px}
.cr-fr-score{text-align:right}
/* [A218] a big game gold, a good one green, a poor one red; the rest plain */
.cr-fig{white-space:nowrap}
.cr-fig b{color:var(--ink)}
.cr-fig i{font-style:normal;color:var(--ink-3)}
.cr-fig.good b{color:var(--mint)}
.cr-fig.great b{color:var(--gold-2)}
.cr-fig.great{background:rgba(245,184,61,.12);border-radius:5px;padding:1px 5px}
.cr-fig.poor b{color:var(--red-2)}
.cr-dnp{color:var(--ink-3)}
.cr-table-wrap{margin-top:16px}
/* the IPL points table needs about 750px; the feed's step takes the page's full width */
.cr-step.cr-feed{max-width:none}
@media (max-width:560px){
  /* two columns, your own line across both: three squeezed "11 runs · …" and the cap
     leaders' names into ellipses */
  /* [A218] one compact strip rather than five tiles, and the match list flows with the page
     rather than scrolling inside it (a scroll box inside a scrolling page catches the thumb) */
  .cr-feed-panel{display:flex;flex-wrap:wrap;gap:6px 14px;position:static;border:1px solid var(--line);
    border-radius:12px;background:var(--panel);padding:9px 12px}
  .cr-feed-panel > div{background:none;border:0;padding:0;display:flex;align-items:baseline;gap:6px}
  .cr-feed-panel b{font-size:13px}
  .cr-feed-panel i{font-size:11px}
  .cr-feed-panel > .cr-cap span{display:none}
  .cr-feed-panel > .cr-cap::before{font-family:var(--mono);font-size:10px;letter-spacing:.1em}
  .cr-feed-panel > .cr-cap:nth-of-type(4)::before{content:'🟧'}
  .cr-feed-panel > .cr-cap:nth-of-type(5)::before{content:'🟪'}
  .cr-feed-panel > .cr-form{flex-basis:100%;border-top:1px solid var(--line);padding-top:6px}
  .cr-feed-list{max-height:none;overflow:visible}
  .cr-fr{grid-template-columns:auto 1fr auto;grid-template-areas:"n opp res" "you you score"}
  .cr-fr-n{grid-area:n}.cr-fr-opp{grid-area:opp}
  .cr-fr-res{grid-area:res;justify-self:end;min-width:26px;padding:1px 6px}
  .cr-fr-score{grid-area:score}.cr-fr-you{grid-area:you}
  .cr-fr-you{white-space:normal}
}

/* career milestones [A209] */
.cr-ms{display:flex;flex-wrap:wrap;gap:6px;padding:7px 12px 9px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(245,184,61,.16),transparent);animation:cr-ms-in .6s ease-out}
.cr-ms span{font-family:var(--mono);font-size:12px;font-weight:700;color:#1a1204;background:var(--gold);
  border-radius:999px;padding:3px 10px;animation:cr-ms-pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes cr-ms-in{from{background-color:rgba(245,184,61,.5)}}
@keyframes cr-ms-pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cr-ms,.cr-ms span{animation:none}}
.cr-msl{margin-top:16px}
.cr-msl > div:not(.cr-label){padding:7px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--gold-2)}
/* [A219] the career card's story: a row per year, its club, and what happened, by kind */
.cr-story{margin-top:18px;text-align:left}
.cr-story ol{list-style:none;margin:0;padding:0 0 0 6px;border-left:2px solid var(--line-strong)}
.cr-story li{position:relative;display:grid;grid-template-columns:70px 1fr;gap:10px;padding:8px 0 8px 14px}
.cr-story li::before{content:'';position:absolute;left:-7px;top:15px;width:12px;height:12px;border-radius:50%;
  background:var(--panel-2);border:2px solid var(--line-strong)}
.cr-story li.champ::before{background:var(--gold);border-color:var(--gold)}
.cr-story-when{display:flex;align-items:center;gap:6px}
.cr-story-when b{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.cr-story li.champ .cr-story-when b{color:var(--gold-2)}
.cr-story-crest{height:22px;width:22px;object-fit:contain}
.cr-story-what{display:flex;flex-wrap:wrap;gap:6px}
.cr-story-chip{font-size:13.5px;line-height:1.3;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink)}
.cr-story-chip.gold{background:var(--gold);border-color:var(--gold);color:#1a1204;font-weight:700}
.cr-story-chip.orange{background:var(--cap-orange);border-color:var(--cap-orange);color:#1a0d02;font-weight:700}
.cr-story-chip.purple{background:var(--cap-purple);border-color:var(--cap-purple);color:#120624;font-weight:700}
.cr-story-chip.elite{border-color:var(--gold);color:var(--gold-2)}
.cr-story-chip.capt{border-color:var(--mint);color:var(--mint)}
.cr-story-chip.inj{border-color:rgba(226,71,46,.5);color:var(--red-2);background:rgba(226,71,46,.08)}
@media (max-width:560px){.cr-story li{grid-template-columns:1fr;gap:6px}}

/* keeping a career, and the profile's Hall of Fame [A210] */
.cr-keep{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:14px 0 4px;
  font-size:14.5px;color:var(--ink-2)}
.cr-keep:empty{display:none}
.pf-hof{margin-top:16px;scroll-margin-top:80px}
.pf-empty{color:var(--ink-3);font-size:14px;margin:6px 0 0}
.hof{border-top:1px solid var(--line)}
.hof:first-child{border-top:0}
.hof summary{display:grid;grid-template-columns:auto 1.4fr 1fr 1fr;gap:6px 14px;align-items:center;
  padding:12px 2px;cursor:pointer;list-style:none}
.hof summary::-webkit-details-marker{display:none}
.hof-crests{display:flex;gap:2px}
.hof-crest{height:24px;width:24px;object-fit:contain}
.hof-who{display:flex;flex-direction:column;min-width:0}
.hof-who b{font-size:16px}
.hof-who span,.hof-num{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.hof-num b{color:var(--ink);font-size:13.5px}
.hof-rank{grid-column:2/-1;font-style:normal;font-family:var(--mono);font-size:11.5px;color:#1a1204;
  background:var(--gold);border-radius:999px;padding:2px 9px;justify-self:start}
.hof-ms{list-style:none;margin:0 0 12px;padding:0 2px}
.hof-ms li{display:flex;gap:12px;padding:5px 0;font-size:14px;color:var(--gold-2)}
.hof-ms span{font-family:var(--mono);font-size:12px;color:var(--ink-3);flex:0 0 38px}
@media (max-width:560px){
  .hof summary{grid-template-columns:auto 1fr;}
  .hof-num{grid-column:2}
}

/* a mega-auction year [A212] */
.cr-mega{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* [A217] no retention offer: one centred auction card, the note above it, not a stray column */
.cr-mega.solo{grid-template-columns:minmax(0,440px);justify-content:center}
.cr-mega-note{text-align:center;margin:0 auto 14px;max-width:52ch}
.cr-bases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin:6px 0 2px}
.cr-bases .room-choice{padding:6px 4px;font-size:13px;margin:0;white-space:nowrap}
@media (max-width:560px){.cr-bases .room-choice{font-size:11.5px;letter-spacing:0;padding:6px 2px}}
.cr-bases .room-choice i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.cr-auc-stage{position:relative;text-align:center;border:1px solid var(--line-strong);border-radius:18px;
  background:linear-gradient(170deg,#1d1606,var(--panel) 70%);padding:26px 18px 30px;overflow:hidden}
.cr-auc-stage .over-line{color:var(--gold);letter-spacing:.2em}
.cr-auc-lead{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;min-height:150px}
.cr-auc-crest{height:72px;width:72px;object-fit:contain}
.cr-auc-price{font-family:var(--display);font-size:clamp(40px,8vw,64px);font-weight:400;color:var(--gold-2)}
.cr-auc-lead span{font-size:15px;color:var(--ink-2)}
.cr-auc-stage[class*="crest-"]{background:linear-gradient(170deg,color-mix(in srgb,var(--team-deep) 90%,#1d1606),var(--panel) 70%);
  transition:background .2s}
.cr-auc-sound{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.cr-auc-trail{margin:6px auto 0;max-width:520px;text-align:left}
@media (max-width:560px){.cr-auc-sound{position:static;justify-content:flex-start;margin:-10px 0 12px -6px}
  .cr-auc-stamp{top:12px;right:10px;font-size:15px;padding:3px 8px;border-width:2px}}
.cr-auc-stamp{position:absolute;top:18px;right:18px;font-family:var(--display);font-size:22px;letter-spacing:.06em;
  padding:4px 12px;border:3px solid currentColor;border-radius:8px;transform:rotate(-8deg);opacity:0}
.cr-auc-stage.sold .cr-auc-stamp{color:var(--mint);opacity:1;animation:cr-ms-pop .5s cubic-bezier(.2,1.6,.4,1)}
.cr-auc-stage.unsold .cr-auc-stamp{color:var(--red-2);opacity:1}
.cr-auc-stage.sold{border-color:var(--gold)}

/* the captain's bowling plan [A213] */
.cr-plan{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.cr-plan-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cr-plan-who{display:flex;flex-direction:column;min-width:0}
.cr-plan-who i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cr-plan-ph{display:flex;gap:4px;flex-wrap:wrap}
.cr-plan-ph .room-choice{padding:5px 10px;font-size:12.5px}
.cr-plan-moment{margin:10px 0 12px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.cr-plan-moment summary{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--gold-2)}
.cr-plan-card > div:not(.cr-label){color:var(--ink-2)}

/* a key moment [A204] */
.cr-moment{width:100%;background:linear-gradient(170deg,#2a2208,var(--panel) 70%);border:1px solid var(--gold);
  border-radius:18px;padding:20px;margin-top:6px}
.cr-moment-top{display:flex;gap:14px;align-items:center}
.cr-moment-top .over-line{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold)}
.cr-moment-top b{font-family:var(--display);font-size:clamp(22px,4vw,30px);font-weight:400}
.cr-moment-crest{height:52px;width:52px;object-fit:contain}
.cr-moment-stakes{font-size:16px;color:var(--ink);margin:12px 0 14px}
.cr-moment-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cr-moment-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cr-moment-opt{font:inherit;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);
  border-radius:14px;padding:14px 10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:center}
.cr-moment-opt:hover,.cr-moment-opt:focus-visible{border-color:var(--gold);transform:translateY(-1px)}
.cr-moment-opt b{font-size:16px}
.cr-moment-opt span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cr-call{font-style:normal;font-family:var(--mono);font-size:10.5px;color:#1a1204;background:var(--gold);
  border-radius:5px;padding:1px 5px;margin-right:4px}
.cr-call.mob{background:var(--red-2);color:#1a0603}
.cr-verdict{font-style:normal;font-family:var(--mono);font-size:10.5px;border-radius:5px;padding:1px 5px;margin-left:4px}
.cr-verdict.kept{color:#04150d;background:var(--mint)}
.cr-verdict.dropped{color:#1a0603;background:var(--red-2)}
.cr-dnp.drop{color:var(--red-2)}
.cr-dnp.out{color:var(--gold-2)}
/* the live form line [A205] */
.cr-feed-panel > .cr-form{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cr-form span{flex:0 0 auto}
.cr-form b{flex:0 0 auto}
.cr-form i{color:var(--ink-2)}
.cr-form.hot b{color:var(--mint)}
.cr-form.cold b{color:var(--red-2)}
.cr-moment.mob{border-color:var(--red-2);background:linear-gradient(170deg,#2a0c08,var(--panel) 70%)}
.cr-moment.mob .over-line{color:var(--red-2)}
.cr-loading.small{padding:14px 0}
.cr-loading.small b{font-size:22px}
@media (max-width:560px){ .cr-moment-opts{grid-template-columns:1fr} }

/* [A215] career legends in an auction room's lobby */
.lg-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.lg-row{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:8px 10px;
  border:1px solid var(--gold);border-radius:12px;background:linear-gradient(160deg,#2a2208,var(--panel) 70%)}
.lg-rating{grid-row:span 2;font-family:var(--display);font-size:28px;color:var(--gold-2);min-width:40px;text-align:center}
.lg-row b{font-size:15px}
.lg-row i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.lg-pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lg-pick select{flex:1;min-width:200px;appearance:auto}