/* ============================================================
   MANAGER MODE — squad pitch and game day

   Two screens. The squad is the home: nine cards laid out on a pitch, a bench
   strip under it and consumables alongside. Game day is a take-over that puts the
   ball on a field and moves it.

   Card colour is earned, not decorative: the tier is read straight off the rating,
   so a squad's quality is legible before you read a single number.
   ============================================================ */

/* ---- player card: a trading card ----------------------------------------
   Built like the real thing so a pack pull feels like one: 2.5x3.5 portrait, a
   coloured frame around a darker art panel, a nameplate across the foot, and a foil
   sheen that moves. Position sets the hue; rating sets the finish. */
.pcardwrap{perspective:1000px;width:100%}
.pcard3d{position:relative;width:100%;aspect-ratio:.715;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.pcardwrap.flipped .pcard3d{transform:rotateY(180deg)}
/* SCOPED ON PURPOSE. The Draft Room's player cards are also class "pcard", styled in
   the inline <style> of seasons/index.html - and mgr.css loads after it at equal
   specificity, so an unscoped .pcard rule here silently repainted every draft card as a
   Manager Mode trading card: container queries, aspect ratio, cqw type. One pool card
   ballooned to fill the screen with its text overlapping, which looked exactly like the
   draft had frozen. Manager Mode cards are always either inside .pcard3d or an empty
   slot, so that is what these rules are allowed to touch. */
.pcard3d .pcard,.pcard.empty{--c1:#5E7186;--c2:#8FA6C4;--ink:#0d1620;
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;border-radius:9px;padding:4px;cursor:pointer;
  background:linear-gradient(155deg,var(--c2) 0%,var(--c1) 46%,var(--c2) 100%);
  color:var(--ink);border:0;font-family:'Archivo',system-ui,sans-serif;
  container-type:inline-size;overflow:hidden;text-align:center;
  --lift:0 1px 2px rgba(0,0,0,.30), 0 5px 12px rgba(0,0,0,.32),
         0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  box-shadow:var(--lift)}
.pcard.back{transform:rotateY(180deg);justify-content:flex-start}
.pcardwrap:hover .pcard3d{transform:translateY(-5px)}
.pcardwrap.flipped:hover .pcard3d{transform:rotateY(180deg) translateY(-5px)}
.pcard3d .pcard:focus-visible,.pcard.empty:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* The moving foil. Sits above the frame, below the type. */
.tc-sheen{position:absolute;inset:-40%;pointer-events:none;z-index:2;
  background:linear-gradient(102deg,transparent 41%,rgba(255,255,255,.30) 49%,transparent 57%);
  transform:translateX(-62%)}
.pcardwrap:hover .tc-sheen{transition:transform .9s ease;transform:translateX(62%)}

/* Rating and position ride the frame, above the art panel. */
.pcard-hd{position:relative;z-index:3;display:flex;align-items:baseline;
  justify-content:space-between;padding:2px 6px 4px}
.pcard-r{font:900 clamp(15px,20cqw,30px) 'Chivo Mono',monospace;line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}
/* Colour says how good the player is; the POSITION has to say what they are - loudly. */
.pcard-p{font:900 clamp(12px,16cqw,23px) 'Chivo Mono',monospace;letter-spacing:-.02em;
  line-height:.88;opacity:.95}

/* The art panel. No photographs to use, so the player's initials carry it, ghosted
   into a darkened window the way a card's picture would sit inside its frame. */
.tc-art{position:relative;z-index:1;flex:1;display:grid;place-items:center;
  border-radius:6px;overflow:hidden;
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 11px),
    radial-gradient(85% 70% at 50% 34%,rgba(255,255,255,.22) 0%,transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.52));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tc-art b{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:68%;
  font-size:clamp(30px,46cqw,72px);line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.30);text-shadow:0 2px 10px rgba(0,0,0,.3)}

/* Nameplate across the foot. */
.tc-plate{position:relative;z-index:3;padding:5px 4px 2px}
.pcard-n{display:block;width:100%;font-family:'Archivo',system-ui,sans-serif;
  font-weight:900;font-stretch:68%;font-size:clamp(11px,15cqw,21px);
  line-height:.95;letter-spacing:-.005em;text-transform:uppercase;
  overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
.pcard-sub{display:block;font:700 clamp(5px,5.6cqw,8px) 'Chivo Mono',monospace;
  letter-spacing:.08em;opacity:.72;text-transform:uppercase;margin-top:2px}
.pcard-form{position:absolute;right:5%;top:34%;z-index:3;
  font-size:clamp(9px,11cqw,16px);font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pcard-form.up{color:#0d6b32}.pcard-form.down{color:#8f1c16}
.pcard.sel{outline:3px solid #27d3f2;outline-offset:2px}
.pcardwrap.dim,.pcard.dim{opacity:.42}
.pcard.empty{background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(234,246,255,.24);color:#91a7b9;
  justify-content:center;gap:4px}
.pcard.empty .tc-art,.pcard.empty .tc-sheen{display:none}
.pcard.empty .pcard-hd{justify-content:center}
.pcard.empty .pcard-n{font-size:15px;opacity:.5}

/* ---- rarity finish ------------------------------------------------------
   Applied on top of the position hue, so quality reads at a glance without
   overriding what a player actually is. */

/* ---- card back: the attributes ----------------------------------------- */
/* Fill the card rather than sitting in the top third: the back is a stat sheet, so the
   four rows spread down it evenly. */
.pcard-stats{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;
  gap:10px 10px;align-content:center;padding:0 3px 6px}
.pstat{display:grid;grid-template-columns:22px 1fr;gap:4px;align-items:center;
  position:relative}
.pstat i{font-style:normal;font:800 7.5px 'Chivo Mono',monospace;letter-spacing:.04em;
  opacity:.75}
.pstat b{font:900 11px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums;
  justify-self:end;grid-column:2;display:flex;align-items:baseline;gap:2px}
/* A consumable that moved a stat says so on the card, in green, permanently. */
.pstat.up b{color:#0b7a37}
.pstat s{text-decoration:none;font-size:7px;color:#0b7a37;letter-spacing:-.02em}
.pstat.up u{background:#0b7a37;box-shadow:0 0 6px rgba(11,122,55,.6)}
.pstat u{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(0,0,0,.55);
  text-decoration:none;display:block}
.pcard-act{height:16px;padding:0 8px;border:0;border-radius:5px;
  background:rgba(0,0,0,.34);color:inherit;cursor:pointer;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.1em}
.pcard-act:hover{background:rgba(0,0,0,.5)}

/* ---- grade ---------------------------------------------------------------
   Bronze under 75, Silver to 83, Gold to 90, and Rare above it. Rare is gold with
   royal accents and a moving sheen so it cannot be mistaken for an ordinary gold. */
.pcard.grade-bronze{--c1:#7A5326;--c2:#C98B45;--ink:#241503}
.pcard.grade-silver{--c1:#6D7A86;--c2:#CED8E2;--ink:#161d24}
.pcard.grade-gold  {--c1:#9A7A24;--c2:#F0D68A;--ink:#251c05}
/* RARE: black and gold. The only card in the game that is dark, because it is the only
   one a normal pack can never produce - a 90+ should be recognisable across a room and
   from nothing more than its colour. */
.pcard.grade-rare  {--c1:#0B0B0C;--c2:#F3D98B;--ink:#F6E7B8;
  background:
    linear-gradient(160deg,#141416 0%,#0A0A0B 38%,#1C1A16 62%,#0A0A0B 100%)}
/* A gold rim over the black, with the sheen sweeping across it. */
.pcard.grade-rare::after{content:"";position:absolute;inset:0;border-radius:9px;z-index:4;
  pointer-events:none;padding:2px;
  background:linear-gradient(140deg,#7A5C10,#F7E3A6 26%,#FFFBEA 50%,#F7E3A6 74%,#7A5C10);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.pcard.grade-rare .pcard-r,.pcard.grade-rare .pcard-p,
.pcard.grade-rare .pcard-n,.pcard.grade-rare .pcard-sub{color:#F7E3A6}
.pcard.grade-rare .tc-plate{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.pcard.grade-rare .tc-art{box-shadow:inset 0 0 0 1px rgba(247,227,166,.34)}
.pcard.grade-rare .tc-art b{color:rgba(247,227,166,.22)}
/* Rare shimmers on its own, not only on hover. */
.pcard.grade-rare .tc-sheen{animation:rareshine 4.5s ease-in-out infinite}
@keyframes rareshine{0%,100%{transform:translateX(-62%)}55%{transform:translateX(62%)}}
.pcard.grade-silver{box-shadow:var(--lift),inset 0 0 0 1px rgba(255,255,255,.45)}
.pcard.grade-gold{box-shadow:var(--lift),inset 0 0 0 1px rgba(255,236,170,.75)}
.pcard.grade-rare{box-shadow:var(--lift),0 0 26px rgba(247,227,166,.34),inset 0 0 0 1px rgba(247,227,166,.28)}

.pcard.empty{background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(234,246,255,.24);color:#91a7b9;
  justify-content:center;gap:4px}
.pcard.empty .tc-art,.pcard.empty .tc-sheen{display:none}
.pcard.empty .pcard-hd{justify-content:center}
.pcard.empty .pcard-n{font-size:15px;opacity:.5}

/* ---- rarity finish ------------------------------------------------------
   Applied on top of the position hue, so quality reads at a glance without
   overriding what a player actually is. */

/* ---- card back: the attributes ----------------------------------------- */
/* Fill the card rather than sitting in the top third: the back is a stat sheet, so the
   four rows spread down it evenly. */
.pcard-stats{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;
  gap:10px 10px;align-content:center;padding:0 3px 6px}
.pstat{display:grid;grid-template-columns:22px 1fr;gap:4px;align-items:center;
  position:relative}
.pstat i{font-style:normal;font:800 7.5px 'Chivo Mono',monospace;letter-spacing:.04em;
  opacity:.75}
.pstat b{font:900 11px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums;
  justify-self:end;grid-column:2;display:flex;align-items:baseline;gap:2px}
/* A consumable that moved a stat says so on the card, in green, permanently. */
.pstat.up b{color:#0b7a37}
.pstat s{text-decoration:none;font-size:7px;color:#0b7a37;letter-spacing:-.02em}
.pstat.up u{background:#0b7a37;box-shadow:0 0 6px rgba(11,122,55,.6)}
.pstat u{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(0,0,0,.55);
  text-decoration:none;display:block}
.pcard-act{height:16px;padding:0 8px;border:0;border-radius:5px;
  background:rgba(0,0,0,.34);color:inherit;cursor:pointer;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.1em}
.pcard-act:hover{background:rgba(0,0,0,.5)}

/* Position palette, shared with the Draft Room so a QB is the same pink in both places.
   Offence gets its own hues; the defensive three stay in the yellow family, which is the
   convention the draft board already established. */
.poschip.pos-qb{--c1:#B22E52;--c2:#F2547D;--ink:#2c0512}
.poschip.pos-rb{--c1:#1B9E6E;--c2:#37D399;--ink:#04241a}
.poschip.pos-wr{--c1:#1885AA;--c2:#2AC4F2;--ink:#03202b}
.poschip.pos-te{--c1:#C07A08;--c2:#FFB020;--ink:#2b1a01}
.poschip.pos-ol{--c1:#5E7186;--c2:#8FA6C4;--ink:#0d1620}
.poschip.pos-dl{--c1:#8A7008;--c2:#D4AC0D;--ink:#241d01}
.poschip.pos-lb{--c1:#A99411;--c2:#F7DC28;--ink:#282302}
.poschip.pos-db{--c1:#A79E56;--c2:#FCF0A3;--ink:#26230c}

/* ---- the pitch ---------------------------------------------------------- */
/* The gridiron sits behind the entire mode - header, tabs and all - rather than inside a
   panel. It is painted by a pseudo-element that overflows the screen box and is masked
   away top and bottom, so it never reads as a container with edges. */
#scrMgrSquad{position:relative;isolation:isolate}
#scrMgrSquad::before{content:"";position:absolute;inset:-30px -50vw -60px;z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 2px,transparent 2px 56px),
    radial-gradient(90% 62% at 50% 30%,#11472e 0%,#0c3121 38%,#07211a 62%,transparent 84%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 62%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 62%,transparent 96%)}
#scrMgrSquad > *{position:relative;z-index:1}
/* The pitch element keeps only its spacing - the turf behind it is the screen's. */
.mgrpitch{position:relative;padding:20px 12px 26px;border:0;background:none}
/* Rows of cards, centred, narrowing towards the goal line. Each unit gets a label so
   offence and defence read as two groups rather than nine loose cards. */
.unitlabel{text-align:center;font:800 8px 'Chivo Mono',monospace;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(190,235,210,.6);margin:6px 0 8px}
.unitlabel:not(:first-child){margin-top:20px;padding-top:16px}
.unitlabel:not(:first-child)::before{content:"";position:absolute;left:22%;right:22%;
  top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.unitrow{display:flex;justify-content:center;gap:8px;margin-bottom:8px}
.mgrslotcard{flex:0 1 132px;min-width:0}
/* Chemistry outlines the card. It composes with --lift so adding a ring never costs
   the card its depth. */
.mgrslotcard.chem0 .pcard:not(.empty){box-shadow:var(--lift),0 0 0 2px rgba(255,99,120,.85)}
.mgrslotcard.chem1 .pcard:not(.empty){box-shadow:var(--lift),0 0 0 2px rgba(231,185,60,.6)}
.mgrslotcard.chem3 .pcard:not(.empty){box-shadow:var(--lift),0 0 0 2px rgba(66,217,139,.65)}

/* ---- bench + consumables ------------------------------------------------ */
.mgrtabs{display:flex;gap:6px;margin:16px 0 10px}
.mgrtab{flex:1;height:38px;border:1px solid rgba(145,167,185,.24);border-radius:9px;
  background:transparent;color:#91a7b9;font:800 8px 'Chivo Mono',monospace;
  letter-spacing:.12em;cursor:pointer;text-transform:uppercase}
.mgrtab.on{border-color:#27d3f2;background:rgba(39,211,242,.12);color:#27d3f2}
.mgrtray{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px}
.mgrtray .pcard{width:100%}
.mgrempty{grid-column:1/-1;color:#91a7b9;font-size:12px;padding:14px 2px}

.mgrconsum{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.mgrcons{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:11px;
  border:1px solid rgba(145,167,185,.24);background:rgba(1,12,21,.42);cursor:pointer;
  text-align:left;color:#edf4fa;transition:border-color .16s}
.mgrcons:hover:not(:disabled){border-color:#27d3f2}
.mgrcons:disabled{opacity:.4;cursor:default}
.mgrcons b{font:800 12px 'Archivo',sans-serif}
.mgrcons em{font-style:normal;font:600 8px 'Chivo Mono',monospace;color:#91a7b9;
  letter-spacing:.05em;line-height:1.45}
.mgrcons .q{position:absolute}
.mgrcons-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mgrcons-n{font:900 11px 'Chivo Mono',monospace;color:#27d3f2}

/* ---- squad header ------------------------------------------------------- */
.mgrhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:14px}
.mgrhead h2{margin:0;font-size:clamp(21px,5vw,30px);font-style:italic;letter-spacing:-.04em}
.mgrpill{display:flex;flex-direction:column;padding:8px 13px;border-radius:10px;
  border:1px solid rgba(39,211,242,.24);background:rgba(39,211,242,.06)}
.mgrpill span{font:700 7px 'Chivo Mono',monospace;letter-spacing:.1em;color:#91a7b9}
.mgrpill b{font:900 17px 'Chivo Mono',monospace;color:#27d3f2;
  font-variant-numeric:tabular-nums}
.mgractions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}

/* ---- game day -----------------------------------------------------------
   The same gridiron as the squad screen, so walking into a game is a change of
   view rather than a change of world. The field is the centrepiece: wide, lit, with
   the ball and the drive direction always legible. */
#scrMgrGame{position:relative;isolation:isolate}
#scrMgrGame::before{content:"";position:absolute;inset:-30px -50vw -60px;z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 56px),
    radial-gradient(90% 62% at 50% 34%,#11472e 0%,#0c3121 38%,#07211a 62%,transparent 84%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 66%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 66%,transparent 96%)}
#scrMgrGame > *{position:relative;z-index:1}

.gdscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:18px 16px;border-radius:14px;border:0;
  background:rgba(4,18,28,.62);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.35)}
.gdteam{text-align:center;min-width:0}
.gdteam .t{font:800 9px 'Chivo Mono',monospace;letter-spacing:.1em;color:#91a7b9;
  text-transform:uppercase;display:block;margin-bottom:6px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gdteam .s{font:900 clamp(34px,11vw,54px) 'Chivo Mono',monospace;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.gdteam.has .s{color:#27d3f2;text-shadow:0 0 26px rgba(39,211,242,.35)}
.gdmid{text-align:center;font:800 9px 'Chivo Mono',monospace;letter-spacing:.1em;
  color:#91a7b9;line-height:1.7}
.gdmid b{display:block;font-size:16px;color:#edf4fa}

/* The field. 100 yards plus two end zones; the ball drives left to right or back. */
.gdfield{position:relative;margin-top:14px;height:150px;border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,#14563a 0%,#0d3a26 52%,#092a1d 100%);
  box-shadow:inset 0 0 0 1px rgba(120,220,170,.22),inset 0 20px 40px rgba(0,0,0,.35),
             0 14px 34px rgba(0,0,0,.4)}
.gdgrass{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 10%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 6%,transparent 6% 12%)}
.gdez{position:absolute;top:0;bottom:0;width:10%;display:grid;place-items:center;
  font:900 8px 'Chivo Mono',monospace;letter-spacing:.16em;color:rgba(255,255,255,.62)}
.gdez.l{left:0;background:linear-gradient(90deg,rgba(39,211,242,.34),rgba(39,211,242,.14));
  writing-mode:vertical-rl;rotate:180deg}
.gdez.r{right:0;background:linear-gradient(270deg,rgba(255,120,160,.34),rgba(255,120,160,.14));
  writing-mode:vertical-rl}
.gdmark{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.gdmark.fifty{background:rgba(255,255,255,.45)}
/* Where the ball is, and which way the drive is going. */
.gdball{position:absolute;top:50%;width:17px;height:17px;translate:-50% -50%;
  border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 32%,#fff,#c8862f 58%,#7a4e14);
  box-shadow:0 0 20px rgba(255,220,150,.85),0 3px 8px rgba(0,0,0,.5);
  transition:left .5s cubic-bezier(.3,.7,.3,1)}
.gdarrow{position:absolute;top:50%;height:4px;translate:0 -50%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--dir,#27d3f2));
  box-shadow:0 0 12px var(--dir,#27d3f2);
  transition:left .5s ease,width .5s ease;opacity:.9;z-index:3}
.gdlos{position:absolute;top:0;bottom:0;width:2px;background:#27d3f2;opacity:.8;
  box-shadow:0 0 10px rgba(39,211,242,.7);
  transition:left .5s cubic-bezier(.3,.7,.3,1);z-index:2}
.gdfd{position:absolute;top:0;bottom:0;width:2px;background:#e7b93c;opacity:.7;
  box-shadow:0 0 10px rgba(231,185,60,.6);
  transition:left .5s cubic-bezier(.3,.7,.3,1);z-index:2}
.gdfield.flash{animation:gdflash .6s ease}
@keyframes gdflash{0%,100%{filter:none}35%{filter:brightness(2.2) saturate(1.35)}}

.gddown{display:flex;justify-content:space-between;gap:10px;margin-top:11px;
  padding:9px 14px;border-radius:10px;background:rgba(4,18,28,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font:800 9px 'Chivo Mono',monospace;letter-spacing:.09em;color:#91a7b9;
  text-transform:uppercase}
.gddown b{color:#edf4fa}

.gdfeed{margin-top:14px;display:flex;flex-direction:column;gap:6px;max-height:250px;
  overflow-y:auto;overscroll-behavior:contain}
.gdplay{padding:10px 13px;border-radius:9px;background:rgba(4,18,28,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  border-left:3px solid rgba(145,167,185,.35);font-size:12.5px;line-height:1.45;
  color:#edf4fa;animation:gdin .3s ease}
@keyframes gdin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gdplay.me{border-left-color:#27d3f2}
.gdplay.opp{border-left-color:#ff7b8d}
.gdplay.big{border-left-color:#e7b93c;background:rgba(231,185,60,.11);font-weight:700}
.gdplay .w{font:700 8px 'Chivo Mono',monospace;color:#91a7b9;letter-spacing:.08em;
  display:block;margin-bottom:2px;text-transform:uppercase}
#scrMgrGame .ghost,#scrMgrGame .cta{border:0}
#scrMgrGame .ghost{background:rgba(255,255,255,.09);color:#edf4fa}

@media (max-width:520px){
  .unitrow{gap:5px}
  .mgrslotcard{flex:0 1 98px}
  .mgrpitch{padding:14px 8px 18px}
  .gdfield{height:112px}
}
@media (prefers-reduced-motion:reduce){
  .gdball,.gdlos,.gdfd,.gdarrow{transition:none}
  .gdplay{animation:none}
  .pcard3d .pcard,.pcard.empty{transition:none}
}

/* ---- Manager Mode tab shell ---------------------------------------------
   The top row is the mode: Play, Squad, Consumables, Calendar, Table. It is the
   spine of the screen, so it stays put while the panel under it changes. */
.mgrnav{display:flex;gap:2px;margin:0 0 18px;padding:4px;border-radius:12px;
  background:rgba(1,12,21,.55);border:1px solid rgba(145,167,185,.18);
  overflow-x:auto;scrollbar-width:none}
.mgrnav::-webkit-scrollbar{display:none}
.mgrnav button{flex:1 0 auto;min-width:88px;height:42px;border:0;border-radius:9px;
  background:transparent;color:#91a7b9;cursor:pointer;white-space:nowrap;
  font:800 9px 'Chivo Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  transition:background .16s,color .16s}
.mgrnav button:hover{color:#edf4fa}
.mgrnav button.on{background:#27d3f2;color:#04121c}
.mgrpanel{display:none}
.mgrpanel.on{display:block;animation:mgrfade .22s ease}
@keyframes mgrfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---- next fixture (Play tab) --------------------------------------------- */
.mgrfix{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:22px 18px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(150deg,#0d2f4a,#071726);border:1px solid rgba(39,211,242,.22)}
.mgrfix-t{text-align:center}
.mgrfix-t b{display:block;font:900 clamp(14px,3.6vw,20px) 'Archivo',sans-serif;
  font-style:italic;letter-spacing:-.03em;line-height:1.1}
.mgrfix-t span{display:block;margin-top:5px;font:700 8px 'Chivo Mono',monospace;
  letter-spacing:.1em;color:#91a7b9;text-transform:uppercase}
.mgrfix-vs{font:900 13px 'Chivo Mono',monospace;color:#27d3f2}
.mgrwk{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-top:12px}
.mgrwk-c{padding:11px 13px;border-radius:10px;background:rgba(1,12,21,.45);
  border:1px solid rgba(145,167,185,.2);font-size:12px}
.mgrwk-c span{display:block;font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em;
  color:#91a7b9;text-transform:uppercase;margin-bottom:3px}

/* ---- table --------------------------------------------------------------- */
.mgrtable-wrap{overflow-x:auto;border:1px solid rgba(145,167,185,.18);border-radius:12px}
.mgrtable{width:100%;border-collapse:collapse;min-width:400px;font-size:12.5px}
.mgrtable th{position:sticky;top:0;text-align:left;padding:10px 12px;background:#0a1a2a;
  color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.mgrtable td{padding:9px 12px;border-top:1px solid rgba(145,167,185,.13);
  font-variant-numeric:tabular-nums}
.mgrtable tr.you td{background:rgba(39,211,242,.1);font-weight:800}
.mgrtable tr.you td:first-child{box-shadow:inset 3px 0 0 #27d3f2}
.mgrtable td:nth-child(2){font-weight:700}
.mgrtable .pos{color:#91a7b9;font:700 10px 'Chivo Mono',monospace}

/* ---- squad bar: which squad, which shape, how well it links ------------- */
.mgrbar2{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.mgrfield{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:0}
.mgrfield span{font:700 8px 'Chivo Mono',monospace;letter-spacing:.1em;color:#91a7b9;
  text-transform:uppercase}
.mgrfield select{height:40px;border-radius:9px;border:1px solid rgba(145,167,185,.26);
  background:rgba(1,12,21,.55);color:#edf4fa;padding:0 10px;font-weight:700;
  font-family:'Archivo',sans-serif;cursor:pointer;min-width:0}
.mgrchem{flex:1 1 150px;display:flex;flex-direction:column;gap:5px}
.mgrchem span{font:700 8px 'Chivo Mono',monospace;letter-spacing:.1em;color:#91a7b9}
.mgrchem b{font:900 17px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums}
.mgrchem i{display:block;height:6px;border-radius:100px;background:rgba(145,167,185,.2);
  overflow:hidden}
.mgrchem i u{display:block;height:100%;width:0;border-radius:100px;transition:width .3s}
.mgrchem i.hi u{background:#42d98b}.mgrchem i.mid u{background:#e7b93c}
.mgrchem i.lo u{background:#ff6378}

/* per-slot chemistry pip under each card */
.slotchem{display:block;margin-top:4px;text-align:center;font:800 7px 'Chivo Mono',monospace;
  letter-spacing:.08em;color:#91a7b9;text-transform:uppercase}
.slotchem.c3{color:#42d98b}.slotchem.c2{color:#9fe6c0}
.slotchem.c1{color:#e7b93c}.slotchem.c0{color:#ff6378}

/* ---- club list ---------------------------------------------------------- */
.mgrfilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
  margin-bottom:12px}
.mgrfilters input,.mgrfilters select{height:40px;border-radius:9px;
  border:1px solid rgba(145,167,185,.26);background:rgba(1,12,21,.55);color:#edf4fa;
  padding:0 11px;font-family:'Archivo',sans-serif;font-weight:600;min-width:0}
.mgrfilters input:focus,.mgrfilters select:focus{outline:none;border-color:#27d3f2}
.mgrclublist{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;margin-top:12px}
.clcell{position:relative;min-width:0}
.clcell.in .pcard{box-shadow:var(--lift),0 0 0 2px rgba(39,211,242,.75)}
.clflag{position:absolute;left:50%;bottom:-7px;translate:-50% 0;padding:2px 8px;
  border-radius:100px;background:#27d3f2;color:#04121c;white-space:nowrap;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.12em}

/* ---- consumable cards: same shape as a player, its own mark ------------- */
.conscard{--c1:#1B7A4A;--c2:#3ddc84;position:relative;overflow:hidden;aspect-ratio:.715;
  border:0;border-radius:11px;padding:4px;cursor:pointer;display:flex;flex-direction:column;
  text-align:center;color:#08210f;container-type:inline-size;
  background:linear-gradient(155deg,var(--c2) 0%,var(--c1) 48%,var(--c2) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.32),
             0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .16s}
.conscard:hover{transform:translateY(-4px)}
.conscard.rar-rare{--c1:#0E7A66;--c2:#00e0a4;color:#02231d}
.conscard.rar-epic{--c1:#9B2374;--c2:#ff5cc8;color:#2b0722}
.conscard-h{position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;padding:3px 7px}
.conscard-r{font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.14em;opacity:.85}
.conscard-x{font:900 11px 'Chivo Mono',monospace}
.conscard-art{position:relative;z-index:1;flex:1;display:grid;place-items:center;
  border-radius:7px;margin:0 1px;
  background:radial-gradient(80% 70% at 50% 32%,rgba(255,255,255,.28) 0%,transparent 64%),
             linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.46))}
.conscard-art svg{width:52%;max-width:46px;height:auto;fill:currentColor;
  stroke:currentColor;stroke-linejoin:round;opacity:.92}
.conscard-p{position:relative;z-index:3;padding:5px 3px 3px}
.conscard-n{display:block;font-family:'Archivo',sans-serif;font-weight:900;
  font-stretch:70%;font-size:clamp(9px,12cqw,14px);line-height:1;text-transform:uppercase;
  overflow-wrap:anywhere}
.conscard-d{display:block;font:700 6px 'Chivo Mono',monospace;letter-spacing:.1em;
  opacity:.7;margin-top:2px}
.mgrconsum{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}

/* ---- the club-name field, matched to everything else ------------------- */
.namefield{display:block;width:100%;height:52px;margin-top:10px;padding:0 16px;border:0;
  border-radius:12px;background:rgba(4,18,28,.6);color:#edf4fa;
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-stretch:78%;
  font-size:19px;letter-spacing:.01em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .16s}
.namefield::placeholder{font-weight:600;font-stretch:100%;font-size:13px;
  text-transform:none;color:#7e93a5;letter-spacing:0}
.namefield:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(39,211,242,.7),
  0 0 0 4px rgba(39,211,242,.12)}


/* Seasons' .ghost is a full-width block button, which is right for a primary action and
   wrong for a row of three. Constrain them here rather than changing the shared class. */
#panSquad .mgractions{gap:8px}
#panSquad .mgractions .ghost{width:auto;flex:0 1 auto;min-width:0;padding:0 16px;height:38px;
  font-size:8px}

/* ---- season pass --------------------------------------------------------
   One track for the whole site. The head states where you are; the list below is
   the ladder, with what is already claimed dimmed back so the eye lands on what is
   ready and what is next. */
.passhead{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px;
  border-radius:14px;margin-bottom:14px;
  background:linear-gradient(150deg,#0d2f4a,#071726);border:1px solid rgba(39,211,242,.24)}
.passlvl{display:flex;flex-direction:column;align-items:center;min-width:64px;
  padding:10px 14px;border-radius:12px;background:rgba(39,211,242,.1);
  border:1px solid rgba(39,211,242,.3)}
.passlvl span{font:700 7px 'Chivo Mono',monospace;letter-spacing:.12em;color:#91a7b9}
.passlvl b{font:900 26px 'Chivo Mono',monospace;color:#27d3f2;line-height:1.1}
.passbar{flex:1 1 200px;min-width:0}
.passbar-t{display:flex;justify-content:space-between;gap:10px;
  font:700 9px 'Chivo Mono',monospace;letter-spacing:.08em;color:#91a7b9;
  text-transform:uppercase;margin-bottom:6px}
.passbar i{display:block;height:9px;border-radius:100px;background:rgba(145,167,185,.2);
  overflow:hidden}
.passbar i u{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,#27d3f2,#8fe9ff);transition:width .4s}
.passbar small{display:block;margin-top:6px;color:#91a7b9;font-size:11px}

.passtrack{display:grid;gap:5px;margin-top:14px;max-height:440px;overflow-y:auto;
  overscroll-behavior:contain;padding-right:2px}
.passrow{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;border-radius:9px;background:rgba(1,12,21,.45);
  border:1px solid rgba(145,167,185,.14)}
.passrow.ready{border-color:#27d3f2;background:rgba(39,211,242,.09)}
.passrow.done{opacity:.42}
.passrow-l{font:900 13px 'Chivo Mono',monospace;color:#91a7b9;text-align:center}
.passrow.ready .passrow-l{color:#27d3f2}
.passrow-r b{display:block;font:800 12.5px 'Archivo',sans-serif}
.passrow-r em{display:block;font-style:normal;font:600 8px 'Chivo Mono',monospace;
  letter-spacing:.06em;color:#e7b93c;margin-top:2px;text-transform:uppercase}
.passrow-s{font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em;color:#91a7b9;
  text-transform:uppercase;white-space:nowrap}
.passrow.ready .passrow-s{color:#27d3f2}

/* Seasons' .cta is a full-width block button. In the pass header it sits beside the
   progress bar, so it sizes to its label instead. */
.passhead .cta{width:auto;flex:0 0 auto;margin-top:0;height:44px;padding:0 22px}
@media(max-width:560px){.passhead .cta{width:100%;flex:1 1 100%}}

/* ---- sleeker controls ---------------------------------------------------
   Borders were fighting the turf behind them. Everything in this mode now reads as a
   soft translucent surface instead, which keeps the gridiron visible through the chrome. */
.mgrnav{border:0;background:rgba(4,18,28,.55);backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,.28)}
.mgrnav button{border-radius:8px}
.mgrnav button.on{box-shadow:0 2px 10px rgba(39,211,242,.35)}

#scrMgrSquad .ghost,#scrMgrSquad .cta{border:0}
#scrMgrSquad .ghost{background:rgba(255,255,255,.09);color:#edf4fa;
  backdrop-filter:blur(6px)}
#scrMgrSquad .ghost:hover{background:rgba(255,255,255,.16);color:#fff}

.mgrfield select,.mgrfilters input,.mgrfilters select{border:0;
  background:rgba(4,18,28,.55);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.mgrfield select:focus,.mgrfilters input:focus,.mgrfilters select:focus{
  box-shadow:inset 0 0 0 1px rgba(39,211,242,.55)}

.mgrpill,.mgrwk-c,.mgrcons,.mgrclub-r,.passrow,.mgrtable-wrap,.passhead,.mgrfix{
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.mgrpill{background:rgba(4,18,28,.5)}
.mgrwk-c,.mgrcons,.mgrclub-r,.passrow{background:rgba(4,18,28,.5)}
.mgrcons:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(39,211,242,.6)}
.mgrclub-r.in,.passrow.ready{box-shadow:inset 0 0 0 1px rgba(39,211,242,.55)}
.mgrtable th{background:rgba(4,18,28,.85)}
.mgrtable td{border-top:1px solid rgba(255,255,255,.06)}
.mgrchem i{background:rgba(0,0,0,.35)}
.mgrtray .pcardwrap,.mgrclub-c .pcardwrap{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

/* the club row's action column had no rule of its own */
.mgrclub-a{display:flex;align-items:center;justify-content:flex-end;min-width:64px}

/* What has been applied to a player, on the front of their card. */
.tc-cons{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:3px}
.tc-cons em{font-style:normal;font:800 5.5px 'Chivo Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;padding:1px 4px;border-radius:100px;
  background:rgba(0,0,0,.26);color:inherit;opacity:.85;white-space:nowrap}

/* The rules, stated once, where the consumables are. */
.conslegend{display:grid;gap:7px;margin-top:12px;padding:13px 15px;border-radius:11px;
  background:rgba(4,18,28,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:12px;line-height:1.55;color:#91a7b9}
.conslegend b{color:#edf4fa}
.conslegend em{font-style:normal;color:#42d98b;font-weight:700}

/* ---- card action sheet --------------------------------------------------
   One place for everything a card can do. It replaced the flip, which showed stats
   but gave no way to act on them. */
.csheet{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px}
.csheet[hidden]{display:none}
.csheet-bg{position:absolute;inset:0;background:rgba(2,10,16,.78);backdrop-filter:blur(6px)}
.csheet-box{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);
  overflow:auto;border-radius:16px;padding:20px;
  background:linear-gradient(160deg,#0d2f4a,#071726);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 80px rgba(0,0,0,.6);
  animation:cspop .2s ease}
@keyframes cspop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.csheet-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(255,255,255,.09);color:#edf4fa;font-size:20px;
  cursor:pointer;line-height:1;z-index:2}
.csheet-top{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
.csheet-card{pointer-events:none}
.csheet-card .pcardwrap{width:120px}
.csheet-info h3{margin:0;font:900 21px 'Archivo',sans-serif;font-style:italic;
  letter-spacing:-.03em;line-height:1.05}
.csheet-info p{margin:5px 0 12px;font:700 8.5px 'Chivo Mono',monospace;letter-spacing:.07em;
  color:#91a7b9;text-transform:uppercase;line-height:1.6}
.csheet-stats{display:grid;gap:7px}
.csstat{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:baseline}
.csstat i{font-style:normal;font:700 8px 'Chivo Mono',monospace;letter-spacing:.07em;
  color:#91a7b9;text-transform:uppercase}
.csstat b{font:900 12px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums}
.csstat s{text-decoration:none;font-size:8px;color:#42d98b}
.csstat.up b{color:#42d98b}
.csstat u{grid-column:1/-1;height:3px;border-radius:2px;background:#27d3f2;
  text-decoration:none;display:block}
.csstat.up u{background:#42d98b}

.csheet-acts{display:grid;gap:7px;margin-top:18px}
.csact{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;
  border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#edf4fa;
  cursor:pointer;text-align:left;transition:background .16s}
.csact:hover{background:rgba(39,211,242,.16)}
.csact b{font:800 12px 'Archivo',sans-serif}
.csact em{font-style:normal;font:600 8px 'Chivo Mono',monospace;letter-spacing:.05em;
  color:#91a7b9;line-height:1.5}
.csact.cons b{color:#42d98b}
.csact.back{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.csq{font-size:9px;opacity:.7}
@media(max-width:520px){
  .csheet-top{grid-template-columns:96px 1fr;gap:12px}
  .csheet-card .pcardwrap{width:96px}
}

/* ---- bench: eight places, drawn whether filled or not ------------------- */
.benchcell{min-width:0}
.benchcell.empty{aspect-ratio:.715;border-radius:9px;display:grid;place-items:center;
  align-content:center;gap:3px;text-align:center;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(234,246,255,.16)}
.benchcell.empty span{font:800 9px 'Chivo Mono',monospace;letter-spacing:.12em;
  color:#91a7b9;text-transform:uppercase}
.benchcell.empty em{font-style:normal;font:600 7.5px 'Chivo Mono',monospace;
  letter-spacing:.06em;color:rgba(145,167,185,.6);text-transform:uppercase}

/* ---- dragging ----------------------------------------------------------- */
/* The card follows the pointer; the browser's own text/image drag must not fight it. */
.pcard3d .pcard,.pcard.empty{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.dragghost{position:fixed;z-index:9500;pointer-events:none;translate:-50% -50%;
  opacity:.92;rotate:-3deg;box-shadow:0 20px 44px rgba(0,0,0,.55)}
.pcard.dragging{opacity:.4}
.dragmode .pcard:not(.droptarget):not(.dragging){opacity:.35}
.pcard.droptarget{outline:2px dashed #42d98b;outline-offset:3px}

/* ---- fourth down: the one moment you actually manage --------------------- */
.gdchoice{margin-top:12px;padding:14px;border-radius:12px;
  background:rgba(231,185,60,.10);box-shadow:inset 0 0 0 1px rgba(231,185,60,.45);
  animation:gd4in .25s ease}
@keyframes gd4in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gdchoice[hidden]{display:none}
.gdchoice-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:800 10px 'Chivo Mono',monospace;letter-spacing:.14em;color:#e7b93c;
  text-transform:uppercase;margin-bottom:8px}
.gdchoice-t{color:#91a7b9;letter-spacing:.08em}
.gdchoice-t b{color:#e7b93c;font-size:12px}
.gdchoice-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.4);overflow:hidden;
  margin-bottom:11px}
.gdchoice-bar i{display:block;height:100%;width:100%;background:#e7b93c;
  transition:width 1s linear}
.gdopt.rec{box-shadow:inset 0 0 0 1px rgba(231,185,60,.8)}
.recflag{font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.1em;padding:1px 5px;
  border-radius:100px;background:#e7b93c;color:#04121c;vertical-align:middle;margin-left:5px}
.gdchoice-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.gdopt{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:0;
  border-radius:10px;background:rgba(4,18,28,.6);color:#edf4fa;cursor:pointer;
  text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:.16s}
.gdopt:hover{background:rgba(231,185,60,.2);box-shadow:inset 0 0 0 1px rgba(231,185,60,.7)}
.gdopt b{font:900 12px 'Archivo',sans-serif;letter-spacing:.02em}
.gdopt em{font-style:normal;font:600 8px 'Chivo Mono',monospace;letter-spacing:.04em;
  color:#91a7b9;line-height:1.5}

/* ---- weekly objectives --------------------------------------------------- */
.objlist{display:grid;gap:6px;margin-top:10px}
.objrow{display:grid;grid-template-columns:1fr 90px auto;gap:12px;align-items:center;
  padding:11px 14px;border-radius:10px;background:rgba(4,18,28,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.objrow.ready{box-shadow:inset 0 0 0 1px rgba(66,217,139,.6);background:rgba(66,217,139,.08)}
.objrow.done{opacity:.55}
.objrow-n b{display:block;font:800 12.5px 'Archivo',sans-serif}
.objrow-n em{display:block;font-style:normal;font:600 8px 'Chivo Mono',monospace;
  letter-spacing:.05em;color:#91a7b9;margin-top:2px}
.objrow-p{height:5px;border-radius:100px;background:rgba(0,0,0,.35);overflow:hidden}
.objrow-p i{display:block;height:100%;background:#27d3f2;border-radius:100px;
  transition:width .3s}
.objrow.ready .objrow-p i{background:#42d98b}
.objrow-c{font:800 9px 'Chivo Mono',monospace;color:#91a7b9;white-space:nowrap}
.objrow.ready .objrow-c{color:#42d98b}
@media(max-width:520px){
  .objrow{grid-template-columns:1fr auto;gap:8px}
  .objrow-p{grid-column:1/-1}
}

/* ---- head to head -------------------------------------------------------- */
#scrH2H{position:relative;isolation:isolate}
#scrH2H::before{content:"";position:absolute;inset:-30px -50vw -60px;z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 56px),
    radial-gradient(90% 62% at 50% 30%,#11472e 0%,#0c3121 38%,#07211a 62%,transparent 84%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 64%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 64%,transparent 96%)}
#scrH2H > *{position:relative;z-index:1}
#scrH2H .ghost,#scrH2H .cta{border:0}
#scrH2H .ghost{background:rgba(255,255,255,.09);color:#edf4fa}

.h2hboard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  margin-top:14px;padding:20px 16px;border-radius:14px;background:rgba(4,18,28,.6);
  backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.h2hside{text-align:center;min-width:0}
.h2hname{display:block;font:900 15px 'Archivo',sans-serif;font-style:italic;
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2hpts{display:block;font:900 clamp(38px,12vw,60px) 'Chivo Mono',monospace;line-height:1;
  font-variant-numeric:tabular-nums;margin:4px 0}
.h2hside.lead .h2hpts{color:#42d98b;text-shadow:0 0 26px rgba(66,217,139,.35)}
.h2hovr{display:block;font:700 7.5px 'Chivo Mono',monospace;letter-spacing:.08em;
  color:#91a7b9;text-transform:uppercase}
.h2hvs{font:800 9px 'Chivo Mono',monospace;letter-spacing:.14em;color:#e7b93c;
  text-transform:uppercase;text-align:center;white-space:nowrap}

.h2hjoin{display:grid;gap:12px}
.h2hjoin-r{display:flex;gap:8px;align-items:center}
.h2hjoin-r input{flex:1;height:46px;border:0;border-radius:10px;padding:0 14px;
  background:rgba(4,18,28,.6);color:#edf4fa;font:800 16px 'Chivo Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.h2hjoin-r input:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(39,211,242,.6)}
.h2hjoin-r .cta,.h2hjoin-r .ghost{margin-top:0}

.h2hgames{display:grid;gap:5px;margin-top:16px}
.h2hgame{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:10px 14px;border-radius:9px;background:rgba(4,18,28,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:12.5px}
.h2hgame span{color:#91a7b9;font:700 9px 'Chivo Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase}
.h2hgame b{font:900 14px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums}
.h2hgame em{font-style:normal;font:800 9px 'Chivo Mono',monospace;min-width:22px;
  text-align:right}
.h2hgame.w b,.h2hgame.w em{color:#42d98b}
.h2hgame.l b,.h2hgame.l em{color:#ff6378}
.h2hgame.d b,.h2hgame.d em{color:#e7b93c}
@media(max-width:520px){
  .h2hboard{grid-template-columns:1fr;gap:8px;text-align:center}
  .h2hvs{order:0}
}

/* ---- welcome pack -------------------------------------------------------- */
.csheet-box.welcome{width:min(400px,100%);text-align:left}
.wkick{display:block;font:800 9px 'Chivo Mono',monospace;letter-spacing:.2em;
  color:#27d3f2;text-transform:uppercase}
.csheet-box.welcome h3{margin:8px 0 4px;font:900 26px 'Archivo',sans-serif;
  font-style:italic;letter-spacing:-.035em;line-height:1}
.wgrid{display:grid;gap:7px;margin-top:16px}
.wrow{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;
  padding:11px 13px;border-radius:10px;background:rgba(66,217,139,.08);
  box-shadow:inset 0 0 0 1px rgba(66,217,139,.28)}
.wi{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:rgba(66,217,139,.18);color:#42d98b;font-size:16px}
.wn b{display:block;font:800 13px 'Archivo',sans-serif}
.wn em{display:block;font-style:normal;font:600 8px 'Chivo Mono',monospace;
  letter-spacing:.05em;color:#91a7b9;margin-top:2px}

/* ---- pack shelf ---------------------------------------------------------- */
.packshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px;
  margin-top:12px}
.packcard{--pk:#27d3f2;position:relative;overflow:hidden;aspect-ratio:.68;border:0;
  border-radius:12px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;text-align:center;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 9px),
    linear-gradient(160deg,#16324a 0%,#0a1a2a 46%,#122b40 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pk) 55%,transparent),
             0 8px 22px rgba(0,0,0,.45);
  color:#edf4fa;transition:transform .16s,box-shadow .16s}
.packcard:hover:not(:disabled){transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--pk),0 16px 34px rgba(0,0,0,.55)}
.packcard:disabled{opacity:.45;cursor:default}
/* the foil seam, hinting at what happens when you tap it */
.packcard-f{position:absolute;left:0;right:0;top:50%;height:2px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,var(--pk),transparent);opacity:.5}
.packcard-k{font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.16em;
  color:var(--pk);text-transform:uppercase}
.packcard-n{font:900 13px 'Archivo',sans-serif;font-stretch:80%;line-height:1.05;
  text-transform:uppercase;margin-top:2px}
.packcard-b{font:700 7px 'Chivo Mono',monospace;letter-spacing:.08em;color:#91a7b9;
  text-transform:uppercase}
.packcard-o{margin-top:8px;padding:4px 12px;border-radius:100px;background:var(--pk);
  color:#04121c;font:800 7.5px 'Chivo Mono',monospace;letter-spacing:.12em}

/* a consumable shown large in the action sheet */
.consbig{--pk:#3ddc84;aspect-ratio:.715;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--pk) 80%,#fff),var(--pk));
  box-shadow:0 10px 24px rgba(0,0,0,.45)}
.consbig span{font-size:44px;color:#0d1620}

/* ---- collapsing long grids ---------------------------------------------- */
.collapser{position:relative}
.collapser > .mgrclublist,.collapser > .mgrconsum{overflow:hidden;transition:max-height .3s ease}
/* The fade only exists while something is hidden behind it. */
.collapser.clipped::after{content:"";position:absolute;left:0;right:0;bottom:34px;height:90px;
  pointer-events:none;background:linear-gradient(180deg,transparent,#061c2b 85%)}
.showall{display:block;width:100%;margin-top:10px;height:40px;border:0;border-radius:10px;
  background:rgba(255,255,255,.07);color:#edf4fa;cursor:pointer;position:relative;z-index:2;
  font:800 9px 'Chivo Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  transition:background .16s}
.showall:hover{background:rgba(39,211,242,.18);color:#fff}
.showall span::after{content:" \25BC";font-size:8px;opacity:.8}
.showall.up span::after{content:" \25B2"}

/* ---- perk + boost markers on a card ------------------------------------- */
.tc-perk{position:absolute;left:50%;top:30%;translate:-50% 0;z-index:4;max-width:88%;
  padding:2px 8px;border-radius:100px;background:var(--pk);color:#08131c;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font:800 6.5px 'Chivo Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tc-temp{position:absolute;right:5px;top:calc(30% + 16px);z-index:4;padding:2px 6px;
  border-radius:100px;background:#e7b93c;color:#231a00;
  font:800 6px 'Chivo Mono',monospace;letter-spacing:.1em}
/* A temporary lift reads amber, a permanent one green, so they are never confused. */
.pstat.up.temp b,.pstat.up.temp s{color:#8a6408}
.pstat.up.temp u{background:#e7b93c;box-shadow:0 0 6px rgba(231,185,60,.5)}

/* ---- perk cards ---------------------------------------------------------- */
.perkcard{--pk:#2AC4F2;position:relative;overflow:hidden;aspect-ratio:.715;border-radius:11px;
  padding:4px;display:flex;flex-direction:column;text-align:center;color:#06161f;
  container-type:inline-size;
  background:linear-gradient(155deg,color-mix(in srgb,var(--pk) 88%,#fff) 0%,
             var(--pk) 44%,color-mix(in srgb,var(--pk) 62%,#000) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.32),
             0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.32)}
.perkcard-h{position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;padding:3px 7px;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.18em;opacity:.85}
.perkcard-x{font:900 11px 'Chivo Mono',monospace;letter-spacing:0}
.perkcard-art{position:relative;z-index:1;flex:1;display:grid;place-items:center;
  border-radius:7px;margin:0 1px;
  background:radial-gradient(80% 70% at 50% 32%,rgba(255,255,255,.3) 0%,transparent 64%),
             linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.44))}
.perkcard-art svg{width:50%;max-width:44px;height:auto;fill:currentColor;
  stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;opacity:.92}
.perkcard-p{position:relative;z-index:3;padding:5px 3px 3px}
.perkcard-n{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-stretch:70%;
  font-size:clamp(9px,12cqw,14px);line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.perkcard-d{display:block;font:700 6px 'Chivo Mono',monospace;letter-spacing:.08em;
  opacity:.72;margin-top:2px}
.csact.perk b{color:var(--pk)}

/* ---- the picker ---------------------------------------------------------- */
.csheet-box.picker{width:min(560px,100%)}
.pickfind{width:100%;height:44px;margin:12px 0 4px;border:0;border-radius:10px;padding:0 14px;
  background:rgba(4,18,28,.6);color:#edf4fa;font-family:'Archivo',sans-serif;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pickfind:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(39,211,242,.65)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;
  margin-top:12px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.pickcell{position:relative;cursor:pointer;min-width:0}
.pickcell:hover .pcard3d{transform:translateY(-4px)}

/* ---- market -------------------------------------------------------------- */
.mktprices{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;
  margin:12px 0}
.mktprice{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;
  border-radius:10px;background:rgba(4,18,28,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mktprice b{font:800 9px 'Chivo Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.mktprice em{font-style:normal;font:900 15px 'Chivo Mono',monospace;
  font-variant-numeric:tabular-nums;color:#edf4fa}
.mktprice.grade-bronze b{color:#C98B45}
.mktprice.grade-silver b{color:#CED8E2}
.mktprice.grade-gold   b{color:#F0D68A}
.mktprice.grade-rare   b{color:#B08CFF}

.mktgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;
  margin-top:12px}
.mktcell{position:relative;min-width:0}
.mktcell .pcard{cursor:default}
.mktbuy{display:block;width:100%;margin-top:6px;height:30px;border:0;border-radius:8px;
  cursor:pointer;color:#08131c;font:900 10px 'Chivo Mono',monospace;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;transition:filter .16s}
.mktbuy:hover{filter:brightness(1.12)}
.mktbuy.grade-bronze{background:#C98B45}
.mktbuy.grade-silver{background:#CED8E2}
.mktbuy.grade-gold  {background:#F0D68A}
.mktbuy.grade-rare  {background:linear-gradient(120deg,#FFE9A8,#B08CFF)}
.mktowned{display:block;margin-top:6px;height:30px;line-height:30px;text-align:center;
  border-radius:8px;background:rgba(39,211,242,.16);color:#27d3f2;
  font:800 8px 'Chivo Mono',monospace;letter-spacing:.1em}
.perkcard.buy{border:0;cursor:pointer;transition:transform .16s}
.perkcard.buy:hover{transform:translateY(-4px)}

/* ==========================================================================
   PHONE
   Everything above is built mobile-first with auto-fill grids, so this only has
   to do three things: keep cards big enough to tap, stop any row forcing a
   sideways scroll, and give the modals the full screen rather than a cramped box.
   ========================================================================== */
@media (max-width:560px){
  .mgrhead{gap:8px 10px}
  .mgrhead h2{font-size:clamp(19px,6vw,26px)}
  .mgrpill{padding:6px 10px;flex:1 1 auto;min-width:0}
  .mgrpill b{font-size:15px}
  .mgrnav{gap:1px;padding:3px}
  .mgrnav button{min-width:74px;height:38px;font-size:8px;letter-spacing:.08em}

  /* Three cards a row on a phone, never fewer - two looks broken. */
  .mgrclublist,.mktgrid,.mgrconsum,.packshelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .pickgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:46vh}
  .mgrtray{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .unitrow{gap:5px}
  .mgrslotcard{flex:0 1 96px}

  /* Modals take the screen instead of floating in a box. */
  .csheet{padding:0}
  .csheet-box{width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;
    padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px))}
  .csheet-top{grid-template-columns:88px 1fr;gap:12px}
  .csheet-card .pcardwrap{width:88px}
  .csheet-x{right:10px;top:10px}

  /* Two-up rather than four-up so nothing is squeezed to nothing. */
  .mktprices{grid-template-columns:repeat(2,1fr)}
  .mgrfilters{grid-template-columns:1fr 1fr}
  .mgrbar2{gap:8px}
  .mgrfield{flex:1 1 100%}
  .mgrchem{flex:1 1 100%}
  .gdscore{padding:14px 10px}
  .gdfield{height:96px}
  .h2hboard{padding:16px 12px}
  .objrow{grid-template-columns:1fr auto}
  .mgractions{gap:7px}
  #panSquad .mgractions .ghost{padding:0 12px;height:34px}
}
/* Very small phones: two a row, and let the type shrink with the card. */
@media (max-width:360px){
  .mgrclublist,.mktgrid,.mgrconsum,.packshelf,.pickgrid,.mgrtray{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgrslotcard{flex:0 1 84px}
  .mgrnav button{min-width:64px}
}

/* ---- Icon: the only card from outside the current league ----------------- */
.pcard.grade-icon{--c1:#0B0B0F;--c2:#3A3A46;--ink:#FFE9A8;
  background:
    linear-gradient(140deg,rgba(255,215,106,.28) 0%,transparent 30%,transparent 70%,rgba(255,215,106,.28) 100%),
    linear-gradient(160deg,#2A2A33 0%,#0B0B0F 46%,#2A2A33 100%)}
.pcard.grade-icon::after{content:"";position:absolute;inset:0;border-radius:9px;z-index:4;
  pointer-events:none;padding:2px;
  background:linear-gradient(140deg,#FFD76A,#FFF3C4 30%,#C9A227 55%,#FFF3C4 78%,#FFD76A);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.pcard.grade-icon{box-shadow:var(--lift),0 0 26px rgba(255,215,106,.32)}
.pcard.grade-icon .tc-art{box-shadow:inset 0 0 0 1px rgba(255,215,106,.35)}
.pcard.grade-icon .tc-art b{color:rgba(255,215,106,.4)}
.pcard.grade-icon .pcard-n,.pcard.grade-icon .pcard-r{color:#FFE9A8}
.pcard.grade-icon .tc-sheen{animation:rareshine 5s ease-in-out infinite}
.mktprice.grade-icon b{color:#FFD76A}

/* ---- energy + injury on the card ---------------------------------------- */
.tc-energy{position:absolute;left:8%;right:8%;bottom:4px;height:3px;border-radius:2px;
  background:rgba(0,0,0,.4);overflow:hidden;z-index:4}
.tc-energy i{display:block;height:100%;background:#42d98b;border-radius:2px;
  transition:width .3s}
.tc-energy.low i{background:#e7b93c}
.tc-energy.out i{background:#ff6378}
.tc-inj{position:absolute;left:50%;top:46%;translate:-50% 0;z-index:5;padding:2px 8px;
  border-radius:100px;background:#ff6378;color:#2a0509;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.12em}

/* ---- the full player page ------------------------------------------------ */
.statpage{position:fixed;inset:0;z-index:9200;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(170deg,#0d2f4a 0%,#071726 46%,#04121e 100%);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.statpage.in{transform:none}
.statpage[hidden]{display:none}
.statpage-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:rgba(4,18,28,.82);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
  font:800 11px 'Chivo Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.statback{width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.09);
  color:#edf4fa;font-size:18px;cursor:pointer;flex:0 0 auto}
.statpage-body{max-width:640px;margin:0 auto;padding:20px 16px 60px}
.statpage-head{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start}
.statpage-card{pointer-events:none}
.statpage-card .pcardwrap{width:130px}
.statpage-id h2{margin:0;font:900 26px 'Archivo',sans-serif;font-style:italic;
  letter-spacing:-.035em;line-height:1.05}
.statpage-id p{margin:6px 0 0;font:700 8.5px 'Chivo Mono',monospace;letter-spacing:.07em;
  color:#91a7b9;text-transform:uppercase;line-height:1.7}
.statchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.statchip{padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.09);
  font:800 7.5px 'Chivo Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#edf4fa}
.statchip.icon{background:#FFD76A;color:#231a00}
.statchip.perk{background:#B98CFF;color:#1a0b2b}
.statchip.temp{background:#e7b93c;color:#231a00}
.statchip.inj{background:#ff6378;color:#2a0509}
.statpage h3{margin:26px 0 10px;font:800 9px 'Chivo Mono',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:#27d3f2}
.statbars{display:grid;gap:8px}
.statbar{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;
  padding:10px 13px;border-radius:10px;background:rgba(4,18,28,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.statbar-n{font:800 12px 'Archivo',sans-serif;display:flex;flex-direction:column}
.statbar-n em{font-style:normal;font:700 7.5px 'Chivo Mono',monospace;color:#91a7b9;
  letter-spacing:.09em;margin-top:1px}
.statbar-t{height:6px;border-radius:100px;background:rgba(0,0,0,.4);overflow:hidden}
.statbar-t i{display:block;height:100%;background:#27d3f2;border-radius:100px}
.statbar.up .statbar-t i{background:#42d98b}
.statbar.tired .statbar-t i{background:#ff6378}
.statbar-v{font:900 15px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:3px}
.statbar-v s{text-decoration:none;font-size:8px}
.statbar-v s.p{color:#42d98b}.statbar-v s.t{color:#e7b93c}.statbar-v s.d{color:#ff6378}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.statcell{padding:11px 13px;border-radius:10px;background:rgba(4,18,28,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.statcell span{display:block;font:700 7.5px 'Chivo Mono',monospace;letter-spacing:.1em;
  color:#91a7b9;text-transform:uppercase}
.statcell b{display:block;font:900 15px 'Archivo',sans-serif;margin-top:3px}
.statcell.good b{color:#42d98b}.statcell.warn b{color:#e7b93c}.statcell.bad b{color:#ff6378}
@media (max-width:560px){
  .statpage-head{grid-template-columns:104px 1fr;gap:12px}
  .statpage-card .pcardwrap{width:104px}
  .statbar{grid-template-columns:86px 1fr auto;gap:9px;padding:9px 11px}
  .statgrid{grid-template-columns:1fr 1fr}
}

/* ---- the pack itself -----------------------------------------------------
   Presented as an object you could pick up: tall foil, a hot band of colour through
   the middle, a gloss that moves, and the price sitting underneath it. */
/* The container holds the section grids; it must not be a grid itself or each section
   is squeezed into a single column and the packs stack one per row. */
#mgrPackList{display:block}
.mgrpacks,.packshelf{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:16px;margin-top:14px}
#mgrPackList .mgrpacks{margin-bottom:26px}
.storepack{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.bigpack{--pk:#27d3f2;position:relative;width:100%;aspect-ratio:.7;border:0;border-radius:12px;
  cursor:pointer;overflow:hidden;padding:0;display:block;
  background:
    linear-gradient(150deg,rgba(255,255,255,.16) 0%,transparent 26%),
    linear-gradient(200deg,color-mix(in srgb,var(--pk) 78%,#000) 0%,
      color-mix(in srgb,var(--pk) 30%,#0a1622) 46%,#070f18 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.5),
             0 28px 56px rgba(0,0,0,.35),
             inset 0 0 0 1px color-mix(in srgb,var(--pk) 55%,transparent);
  transition:transform .18s,box-shadow .18s}
.bigpack:hover:not(:disabled){transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 4px 8px rgba(0,0,0,.45),0 22px 44px rgba(0,0,0,.55),
             0 40px 70px rgba(0,0,0,.4),inset 0 0 0 1px var(--pk)}
.bigpack:disabled{opacity:.4;cursor:default}
/* Diagonal ribs, like a foil wrapper catching the light. */
.bigpack-foil{position:absolute;inset:0;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.09) 0 3px,transparent 3px 13px)}
/* The hot core - what makes it read as a pack rather than a card. */
.bigpack-glow{position:absolute;left:-20%;right:-20%;top:34%;height:34%;
  background:radial-gradient(60% 100% at 50% 50%,color-mix(in srgb,var(--pk) 95%,#fff) 0%,
             color-mix(in srgb,var(--pk) 60%,transparent) 40%,transparent 72%);
  filter:blur(3px)}
.bigpack-edge{position:absolute;inset:5px;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bigpack-side{position:absolute;left:8px;top:50%;translate:0 -50%;writing-mode:vertical-rl;
  rotate:180deg;font:800 7px 'Chivo Mono',monospace;letter-spacing:.28em;
  color:rgba(255,255,255,.72);text-transform:uppercase;max-height:80%;overflow:hidden}
.bigpack-mid{position:absolute;left:50%;top:47%;translate:-50% -50%;
  font-family:'Archivo',sans-serif;font-weight:900;font-stretch:66%;font-size:34px;
  letter-spacing:-.04em;color:rgba(255,255,255,.92);
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.bigpack-odds{position:absolute;left:6px;right:6px;bottom:8px;text-align:center;
  font:800 6.5px 'Chivo Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.8);
  text-transform:uppercase}
.storepack-n{margin-top:9px;font:900 12px 'Archivo',sans-serif;font-stretch:80%;
  text-transform:uppercase;text-align:center;line-height:1.1}
.storepack-s{font:700 7px 'Chivo Mono',monospace;letter-spacing:.08em;color:#91a7b9;
  text-transform:uppercase;text-align:center}
.storepack-p{margin-top:4px;padding:3px 12px;border-radius:100px;background:rgba(231,185,60,.16);
  color:#e7b93c;font:900 11px 'Chivo Mono',monospace;font-variant-numeric:tabular-nums}

/* ---- the two ways into a career ----------------------------------------- */
.startpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
  margin-top:22px}
.startcard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;
  border:0;border-radius:14px;cursor:pointer;text-align:left;color:#edf4fa;
  background:linear-gradient(160deg,#0d2f4a,#071726);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:.18s}
.startcard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(39,211,242,.6)}
.startcard.rookie:hover{box-shadow:inset 0 0 0 1px rgba(66,217,139,.6)}
.startcard-k{font:800 8px 'Chivo Mono',monospace;letter-spacing:.2em;color:#27d3f2;
  text-transform:uppercase}
.startcard.rookie .startcard-k{color:#42d98b}
.startcard-t{font:900 21px 'Archivo',sans-serif;font-style:italic;letter-spacing:-.03em}
.startcard-d{font-size:13px;line-height:1.6;color:#91a7b9}
.startcard-m{margin-top:6px;padding:4px 11px;border-radius:100px;
  background:rgba(255,255,255,.08);font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase}
.findfield{font-size:15px !important;text-transform:none !important;font-stretch:100% !important;
  font-weight:700 !important}
.mktcell.picked .pcard{box-shadow:var(--lift),0 0 0 2px #42d98b}
.mktbuy.on{background:#42d98b;color:#04211a}
@media (max-width:560px){
  .mgrpacks,.packshelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bigpack-mid{font-size:26px}
  .startpick{grid-template-columns:1fr}
}

/* ============================================================
   MOBILE: make Manager Mode behave like an app, not a page

   Most people play this on a phone, so the phone layout is the one that has to be
   right. Three things were breaking the illusion: a tab bar too wide for the screen
   that you had to swipe, a league table 400px across in a 343px box, and the squad
   sitting 533px down the page behind controls and three admin buttons.
   ============================================================ */

/* ---- tabs: icon over label, five across, no swiping ---- */
.mgrnav button i{display:none}
@media (max-width:560px){
  /* A real bottom tab bar. Fixed, thumb-reachable, and it never scrolls because the
     buttons share the width equally instead of each demanding 88px. */
  /* #scrMgrSquad > * sets position:relative for the gridiron backdrop, and an id
     selector outranks a class - so this has to match that specificity to win. */
  #scrMgrSquad > .mgrnav{position:fixed;left:0;right:0;bottom:0;z-index:60;
    margin:0;gap:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    border-radius:0;overflow:visible;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(4,18,28,.92);backdrop-filter:blur(14px);
    box-shadow:0 -6px 24px rgba(0,0,0,.4)}
  .mgrnav button{flex:1 1 0;min-width:0;height:auto;padding:5px 2px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border-radius:10px;background:transparent;box-shadow:none}
  .mgrnav button i{display:block;font-size:15px;line-height:1;font-style:normal;opacity:.75}
  .mgrnav button span{display:block;font:800 9px 'Chivo Mono',monospace;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mgrnav button.on{background:transparent;color:#27d3f2;box-shadow:none}
  .mgrnav button.on i{opacity:1}
  /* Room so the bar never covers the last row of content. */
  #scrMgrSquad{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* ---- league table: no sideways scrolling on a phone ---- */
.mgrtable .c-rec,.mgrtable .c-diff{display:none}
@media (max-width:560px){
  .mgrtable{min-width:0;font-size:12px}
  .mgrtable .c-w,.mgrtable .c-l,.mgrtable .c-pf,.mgrtable .c-pa{display:none}
  .mgrtable .c-rec,.mgrtable .c-diff{display:table-cell;
    font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  .mgrtable th,.mgrtable td{padding:10px 8px}
  .mgrtable .c-club{max-width:0;width:99%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mgrtable-wrap{overflow-x:hidden}
}

/* ---- the squad, higher up the screen ---- */
.mgrmore{display:none}
.mgrmanage{margin:0 0 14px}
@media (max-width:560px){
  .mgrbar2{gap:8px;align-items:flex-end;flex-wrap:nowrap;margin-bottom:10px}
  .mgrbar2 .mgrfield{flex:1 1 0;min-width:0}
  .mgrfield select{height:44px}
  /* One tap to reach New squad / Rename / Delete, none of which belong in front of
     your team. 44px square, per the platform minimum. */
  .mgrmore{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
    border:0;border-radius:11px;background:rgba(255,255,255,.07);
    color:#edf4fa;font-size:19px;line-height:1;cursor:pointer}
  .mgrmore[aria-expanded="true"]{background:#27d3f2;color:#04121c}
  #sqChemBox{margin-bottom:12px}
  .mgrchem b{font-size:15px}
  .mgrmanage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .mgrmanage .ghost{width:100%;height:44px}
}

/* ---- legible text and reachable targets ---- */
@media (max-width:560px){
  /* Nothing under 9px: 5-7px is fine on a monitor and unreadable at arm's length. */
  .pcard-sub{font-size:clamp(7px,5.6cqw,9px)}
  .pcard-act{height:26px;min-width:44px;padding:0 10px;font-size:9px}
  .perkcard-d,.storepack-s,.bigpack-side,.bigpack-odds{font-size:9px}
  .bigpack-side{letter-spacing:.2em}
  .mgrpill span,.mgrfield span,.mgrchem span{font-size:9px}
  .passrow-s{font-size:9.5px}
  /* Anything tappable clears 44px in its short dimension. */
  .mgrslot-go,.mgrslot-del,.csact,.mktbuy,.ghost,.cta{min-height:44px}
  .mgrslot-del{min-width:44px}
}

/* A class that sets `display` beats the browser's own [hidden] rule, so `hidden` on an
   element like .mgractions did nothing. Manager Mode uses the attribute to open and
   close things (the squad menu, the sheets), so it has to actually win. */
#scrMgrSquad [hidden],#scrMgrPacks [hidden],#scrMgrGame [hidden],
.mgrpanel [hidden],.mgractions[hidden]{display:none!important}

/* Second pass on phone legibility: the classes still sitting at 6-8px. Kept to an
   explicit list rather than a blanket rule, because the player cards size their own
   text in container units and a global floor would burst them. */
@media (max-width:560px){
  .unitlabel,.clflag,.perkcard-h,.conscard-r,.conscard-d,.conscard-n,
  .mgrslot-b em,.mgrfix-t span,.passrow-n,.storepack-s,.mktprice b{font-size:9px}
  .pcard-sub{font-size:clamp(8px,5.6cqw,9.5px)}
  .mgrtable th{font-size:9px}
  .mgrtable td{font-size:12px}
  .mgrtable .pos{font-size:10px}
  .mgrtable .c-rec,.mgrtable .c-diff{font-size:11.5px}
  /* Tab buttons fill the bar so the whole 44px band is the target, not just the label. */
  #scrMgrSquad > .mgrnav button{min-height:44px}
}

/* The squad menu is a phone affordance. On desktop there is no "..." button to open it,
   so the three actions must simply be there - the `hidden` attribute that drives the
   mobile toggle would otherwise strand them behind a control that does not exist. */
@media (min-width:561px){
  #sqManage[hidden]{display:flex!important}
}

/* ---- collection capacity ---------------------------------------------------
   A franchise tops out at 100 player cards and 50 consumables. The meters are always
   on screen so filling up is something you watch approaching, rather than something
   you discover when a pack refuses to open. */
.clcap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px}
.clcap-r{padding:10px 12px;border-radius:11px;border:1px solid rgba(145,167,185,.2);
  background:rgba(4,18,28,.45)}
.clcap-r span{display:block;font:700 8px 'Chivo Mono',monospace;letter-spacing:.1em;color:#91a7b9}
.clcap-r b{display:block;margin:4px 0 6px;font:900 15px 'Chivo Mono',monospace;color:#edf4fa;
  font-variant-numeric:tabular-nums}
.clcap-r i{display:block;height:5px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
.clcap-r i u{display:block;height:100%;border-radius:100px;background:#27d3f2;transition:width .3s}
.clcap-r i.high u{background:#e7b93c}
.clcap-r i.full u{background:#ff6378}
.mgrfilters #clReset{height:40px;padding:0 14px;flex:0 0 auto}
@media (max-width:560px){
  .clcap{grid-template-columns:1fr;gap:8px}
  .clcap-r span{font-size:9px}
  .mgrfilters #clReset{width:100%;min-height:44px}
}

/* ---- offence / defence, one page ------------------------------------------
   Twelve cards stacked is a lot of thumb travel, and the two units are read
   separately anyway. Two panes that snap, with tabs and dots so it is obvious
   there is a second one to reach. */
.unitswitch{display:flex;gap:6px;margin:0 0 12px}
.unitswitch button{flex:1;min-height:42px;border:1px solid rgba(255,255,255,.1);border-radius:11px;
  background:rgba(4,18,28,.5);color:#91a7b9;cursor:pointer;
  font:800 10px 'Chivo Mono',monospace;letter-spacing:.1em}
.unitswitch button b{margin-left:7px;color:#edf4fa;font-size:12px}
.unitswitch button.on{background:#27d3f2;border-color:#27d3f2;color:#04121c}
.unitswitch button.on b{color:#04121c}
.unitpane{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.unitpane::-webkit-scrollbar{display:none}
.unitslide{flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always}
.unitdots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.unitdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:.2s}
.unitdots i.on{background:#27d3f2;width:20px;border-radius:100px}

/* ---- grade chips ---- */
.gradechips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 10px}
.gchip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;
  border:1px solid rgba(145,167,185,.24);border-radius:100px;background:rgba(4,18,28,.5);
  color:#edf4fa;cursor:pointer;font:800 10px 'Chivo Mono',monospace;letter-spacing:.06em}
.gchip b{font-size:11px;color:#91a7b9}
.gchip.on{border-color:#27d3f2;background:rgba(39,211,242,.14)}
.gchip.on b{color:#27d3f2}
.gchip.grade-rare{border-color:rgba(247,227,166,.5);color:#F7E3A6}
.gchip.grade-gold{border-color:rgba(240,214,138,.45);color:#F0D68A}
.gchip.grade-silver{border-color:rgba(206,216,226,.4);color:#CED8E2}
.gchip.grade-bronze{border-color:rgba(201,139,69,.45);color:#C98B45}
.gchip.grade-icon{border-color:rgba(176,140,255,.5);color:#C9B3FF}
@media (max-width:560px){ .gchip{min-height:40px} }