:root{
  --void:#06080D; --surface:#0E1219; --surface-2:#161C27; --surface-3:#1F2836;
  --line:#232C3B; --line-soft:#19212C;
  --text:#EAEDF4; --muted:#828DA4; --dim:#5A6478; --faint:#3B4455;
  --accent:#A855F7; --accent-soft:rgba(168,85,247,.13); --accent-line:rgba(168,85,247,.42);
  --ok:#37D486; --warn:#FF4E5E;
  --tier-1:#FBBF24; --tier-2:#E879F9; --tier-3:#3B82F6; --tier-4:#4E9E86;
  --wild:#A7ADB8;
  --gutter:22px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--void); color:var(--text);
  font-family:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px; line-height:1.62; -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--gutter) 96px}
p{max-width:66ch}

.mast{padding:60px 0 30px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 14px}
h1{font-family:Anton,Impact,sans-serif; font-weight:400; margin:0;
  font-size:clamp(34px,7vw,56px); line-height:.98; text-transform:uppercase; text-wrap:balance}
.standfirst{margin:18px 0 0; color:var(--muted); font-size:17px; max-width:62ch}
section{padding-top:52px}
h2{font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(21px,3.4vw,27px); line-height:1.05; margin:0 0 6px; text-wrap:balance}
h3{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.13em;
  font-size:13px; font-weight:600; color:var(--muted); margin:32px 0 12px}
.kicker{font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 12px}
.notice{margin:26px 0 0; border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:8px; padding:14px 17px; font-size:14.5px; color:var(--text)}

/* ==================================================================
   THE CARD COMPONENT — self-contained, no dependencies.
   data-tier 1..4 · data-bg lattice|emblem|archetype|halftone
   ================================================================== */
/* Glow layers are opt-in per instance via data-glow.
   Tier cards: `metal texture frame` — everywhere, pool included.
   Ceremonial cards: add `edge`. Nothing else gets it. */
.scl-card{
  --tier:var(--tier-4); --duo:url(#duo-4); --wash:.14;
  position:relative; width:var(--card-w,100%); max-width:272px; aspect-ratio:3/4;
  background:var(--surface);
  /* D251: B · Tactical. The renderer sets --clip from its one OUTLINE and draws
     the metallic frame (.scl-frame) along the same polygon; a card without it
     (the sample cards below) falls back to today's rounded border. */
  border:2px solid var(--tier); border-radius:12px; clip-path:var(--clip, none);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:Archivo,system-ui,sans-serif; isolation:isolate;
  container-type:inline-size;
}
.scl-card[style*="--clip"]{border-color:transparent; border-radius:0}
/* The 2px border stays, transparent: every width the card was measured at —
   D222's compact line above all, which reads the content box inside it — is
   unchanged by the new outline. */
.scl-frame{position:absolute; inset:0; width:100%; height:100%; z-index:20; pointer-events:none}
.scl-card[data-tier="1"]{--tier:var(--tier-1); --duo:url(#duo-1); --wash:.20}
.scl-card[data-tier="2"]{--tier:var(--tier-2); --duo:url(#duo-2); --wash:.15}
.scl-card[data-tier="3"]{--tier:var(--tier-3); --duo:url(#duo-3); --wash:.15}
.scl-card[data-tier="4"]{--tier:var(--tier-4); --duo:url(#duo-4); --wash:.14}

.scl-portrait{position:relative; flex:0 0 46%; overflow:hidden;
  background:linear-gradient(180deg, rgb(from var(--tier) r g b / var(--wash)) 0%,
             rgb(from var(--tier) r g b / calc(var(--wash)*.22)) 100%), var(--surface-2)}
@supports not (color: rgb(from white r g b / 1)){
  .scl-portrait{background:var(--surface-2)}
  .scl-portrait::before{content:""; position:absolute; inset:0; background:var(--tier); opacity:.15}
}

/* ---- portrait backgrounds ---- */
.scl-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.scl-bg svg{position:absolute; inset:0; width:100%; height:100%}

/* A · lattice — the legacy card's triangle mesh, rebuilt */
[data-bg="lattice"] .scl-bg{
  background-image:
    repeating-linear-gradient( 60deg, transparent 0 13px, rgb(from var(--tier) r g b / .16) 13px 13.7px),
    repeating-linear-gradient(-60deg, transparent 0 13px, rgb(from var(--tier) r g b / .16) 13px 13.7px),
    repeating-linear-gradient(  0deg, transparent 0 11.2px, rgb(from var(--tier) r g b / .09) 11.2px 11.9px);
  -webkit-mask-image:radial-gradient(120% 82% at 50% 8%, #000 12%, transparent 82%);
          mask-image:radial-gradient(120% 82% at 50% 8%, #000 12%, transparent 82%);
}
/* B · emblem — the Plate mark, ghosted, cropped by the frame */
[data-bg="emblem"] .scl-bg svg, [data-bg="archetype"] .scl-bg svg{color:var(--tier)}
/* C · archetype — a different motif per playstyle */
/* D · halftone — dot field, dense at the shoulders */
[data-bg="halftone"] .scl-bg{
  background-image:radial-gradient(rgb(from var(--tier) r g b / .42) .9px, transparent 1px);
  background-size:6px 6px;
  -webkit-mask-image:radial-gradient(78% 68% at 50% 34%, #000 4%, transparent 74%);
          mask-image:radial-gradient(78% 68% at 50% 34%, #000 4%, transparent 74%);
}
/* tier 1 gets a touch more presence — the only tier that does */
.scl-card[data-tier="1"] .scl-bg{opacity:1}
.scl-card[data-tier="2"] .scl-bg{opacity:.86}
.scl-card[data-tier="3"] .scl-bg{opacity:.76}
.scl-card[data-tier="4"] .scl-bg{opacity:.62}
/* D246 · THE PLAYSTYLE MOTIF SITS BEHIND THE OPERATOR, NOT OVER HIM. Tobi, 23
   September: the shapes behind the character (rings, shield, chevrons, lines)
   "are currently too visible and even overlay/overlap card characters. just
   like we did for wildcards, can we reduce the opacity". So a tier card's motif
   drops to the wildcard's own level, .10, times the tier's presence above. The
   fifth time this frozen file is reopened on the owner's instruction. */
.scl-card:is([data-tier="1"],[data-tier="2"],[data-tier="3"],[data-tier="4"]) .scl-bg svg{opacity:.10}

/* D212 · THE WILDCARD — a newcomer's card. Not a tier: a newcomer has no
   rating, so no colour band and no archetype (§8.2, D147). A steel frame, a
   diagonal split ground, a slim four-point star at 10% where a tier card's
   archetype motif sits, and the operator as a flat silhouette at 22% — Tobi's
   pick from the options sheet (04-DESIGN/directions/wildcard.html), after his
   note that the first star was too thick and sat over the operator. No tier
   colour, violet, ok/warn or ceremonial metal, so the ladder (D049) and the
   accent rule are untouched. The fourth time this frozen file is reopened on
   the owner's instruction. */
.scl-card[data-tier="wild"]{--tier:var(--wild); --duo:none; --wash:.10}
.scl-card[data-tier="wild"] .scl-portrait{background:linear-gradient(135deg, #1B212C 0 50%, #222A37 50% 100%)}
.scl-card[data-tier="wild"] .scl-bg{opacity:1}
.scl-card[data-tier="wild"] .scl-bg svg{opacity:.10}
.scl-card[data-tier="wild"] .scl-figure{filter:brightness(0) invert(1); opacity:.22}
/* Dashes in --muted: the D138 floor for small type on the stat grid. */
.scl-card[data-tier="wild"] .stat .v, .scl-card[data-tier="wild"] .scl-avail .v{color:var(--muted)}

.scl-figure{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:96%; width:auto; display:block; filter:var(--duo); z-index:2}
/* D251 · D3, Tobi: a character keeps its own colours, slightly quietened, under
   a light wash of the card's colour — recognisable, and still of its card. The
   wash is one flat layer in `color` blend: no blur. The wildcard keeps its own
   silhouette rule (D212) and has no wash. */
.scl-card:not([data-tier="wild"]) .scl-figure{filter:saturate(.72) contrast(1.04)}
.scl-cast{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--tier); mix-blend-mode:color; opacity:.32}

/* ---- OVR plate ---- */
/* D248, Tobi: with the flag gone the plate shrank and "looks out of line"
   beside the crest. So the plate is as tall as the crest plus the crest's gap
   above it, twice — which centres the crest on the plate — and the numeral sits
   in its middle. Neither is rescaled. --org-top is the crest's offset; the
   crest's height rides on the card as --badge-h (config, D140). */
/* D251: on B the plate steps in from the cut corner by 14 of the outline's 300
   units, and the crest drops by the same so it stays centred on the plate. */
.scl-portrait{--org-top:9px; --plate-inset:0px}
.scl-card[style*="--clip"] .scl-portrait{--plate-inset:4.667cqw}
.scl-ovr{position:absolute; top:var(--plate-inset); left:var(--plate-inset); z-index:4; background:var(--void);
  box-sizing:border-box; height:calc(2 * var(--org-top) + var(--badge-h,26px));
  display:flex; align-items:center;
  padding:0 20px 0 11px; clip-path:polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  border-right:1px solid rgb(from var(--tier) r g b / .5);
  border-bottom:1px solid rgb(from var(--tier) r g b / .5)}
/* D138: the "OVR" label is gone. The numeral is the largest thing on the card
   and reads as a rating without being told, which is how every card game since
   Panini has done it. This rule is kept, unused, because the ceremonials still
   set a label above a numeral and share the plate's geometry. */
.scl-ovr .lbl{display:block; font-family:'Barlow Condensed',sans-serif; font-size:9.5px;
  letter-spacing:.18em; color:var(--tier); line-height:1; margin-bottom:1px; font-weight:600}
.scl-ovr .num{display:block; font-family:Anton,Impact,sans-serif; font-size:31px; line-height:.86;
  color:var(--text); font-variant-numeric:tabular-nums;
  /* D248: Anton's figures draw 1px high in their line box — measured, at both
     sizes — so they are nudged down to sit in the plate's true middle. */
  transform:translateY(1px)}
.scl-flag{display:block; width:17px; height:11.3px; border-radius:1.5px;
  outline:1px solid rgb(234 237 244 / .22); outline-offset:-1px}

/* D141: centred, not right-aligned. The block shrink-wraps to whichever mark it
   holds, and the season label sits under that mark. Right-aligning it worked
   while the mark was a rectangle; a crest tapers to a point, so its optical
   centre is nowhere near its right edge and `S38` read as though it had slipped.
   Centring is correct for the text badge too. */
.scl-org{position:absolute; top:calc(var(--plate-inset, 0px) + var(--org-top)); right:10px; z-index:4; text-align:center;
  font-family:'Barlow Condensed',sans-serif; line-height:1.15}
.scl-org .badge{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.13em;
  color:var(--text); border:1px solid var(--line); background:rgb(6 8 13 / .72);
  border-radius:3px; padding:2px 6px}
/* D140: the mark's height is config, carried in --badge-h. D246: a TINTED mark
   is the card's own colour poured through a one-colour file used as a mask
   (Tobi, 23 September: the crest's own colours stood out against the card
   body); the image inside only gives the box its proportions and is never
   drawn. */
.scl-org .badge-mark{display:block; height:var(--badge-h,26px); width:auto}
/* D248: the crest in its own colours again, faded so they are not loud against
   the card — Tobi's pick of 60, 75 and 90%. A tinted mark is the card's own
   colour already and is left at full strength. */
.scl-org .badge-mark:not(.tint){opacity:.75}
.scl-org .badge-mark.tint{background:var(--tier);
  -webkit-mask:var(--mark) center / contain no-repeat;
          mask:var(--mark) center / contain no-repeat}
.scl-org .badge-mark.tint img{display:block; height:100%; width:auto; visibility:hidden}
/* D248: the fourth colour is Jade (#4E9E86), not a dark slate, so its crest
   takes the card's own colour like the other three — the --muted lift that
   Shadow needed is gone. */
/* D138: --muted for the same reason as .stat .k — 9.5px is nowhere near the
   large-text threshold, so --dim fails AA here too. */
.scl-org .season{display:block; font-size:9.5px; letter-spacing:.14em; color:var(--muted); margin-top:2px}

.scl-rail{position:absolute; left:8px; right:8px; bottom:7px; z-index:4;
  display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.chip{font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; line-height:1; padding:4px 7px;
  border-radius:3px; white-space:nowrap; background:rgb(6 8 13 / .78);
  border:1px solid var(--line); color:var(--muted)}
.chip.arch{color:var(--tier); border-color:rgb(from var(--tier) r g b / .48)}
.chip.form{font-variant-numeric:tabular-nums}
.chip.form.up{color:var(--ok); border-color:rgb(55 212 134 / .42)}
.chip.form.down{color:var(--warn); border-color:rgb(255 78 94 / .42)}
.chip.form.flat{color:var(--dim)}
.chip.flag-pending{color:var(--warn); border-color:rgb(255 78 94 / .45)}
.chip.flag-new{color:var(--text); border-color:var(--line-soft)}
/* A registered player on a different team from his card's (Tobi, 23 September).
   The New chip's quiet style: a fact about the card, not a warning. G4 dresses it. */
.chip.flag-team{color:var(--text); border-color:var(--line-soft)}

/* D249, Tobi: the name sits on a DOG TAG — the callsign plate he picked out of
   three mock-ups, replacing the black band with diagonal stripes he found
   "templated, generic". Inset from the card's edges and lifted 7px over the
   portrait, rounded, edged in the tier colour, a punched hole at the left, a
   fine brushed-metal finish. The name's own font is unchanged (Stage G owns
   typography). */
.scl-name{position:relative; overflow:hidden; display:flex; align-items:center; gap:7px;
  margin:-7px 7px 0; padding:7px 11px 8px 22px; z-index:5; border-radius:8px;
  border:1px solid rgb(from var(--tier) r g b / .5);
  /* D251, Tobi: "a polished, metallic look; like the shine on card edges, but
     with a black tone that isn't too loud". A crisp sheen over the top half, two
     soft diagonal glints, a deep black beneath, a light line on the top edge.
     Flat gradients: no blur, no motion (DESIGN-SYSTEM §6, §7). */
  background:
    linear-gradient(180deg, rgb(255 255 255 / .13) 0%, rgb(255 255 255 / .035) 46%, rgb(255 255 255 / 0) 47%),
    linear-gradient(104deg, transparent 18%, rgb(255 255 255 / .08) 30%, transparent 40%, transparent 64%, rgb(255 255 255 / .045) 72%, transparent 80%),
    linear-gradient(180deg, #2B313B 0%, #151920 48%, #06080B 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .24), inset 0 -1px 0 rgb(0 0 0 / .7), 0 1px 2px rgb(0 0 0 / .5)}
.scl-name::after{content:""; position:absolute; left:8px; top:50%; width:7px; height:7px;
  margin-top:-3.5px; border-radius:50%; background:var(--void);
  box-shadow:inset 0 0 0 1px rgb(from var(--tier) r g b / .6)}
/* D248: the flag follows the name (it sat under the OVR numeral until then).
   The name gives way first — min-width:0 lets its ellipsis work inside the
   row — and the flag never shrinks, so it always shows. */
.scl-name b{display:block; position:relative; min-width:0; font-family:Anton,Impact,sans-serif; font-weight:400;
  font-size:clamp(15px,5.4cqw,20px); line-height:1.04; letter-spacing:.035em;
  text-transform:uppercase; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scl-name .scl-flag{flex:none; position:relative}

.scl-meta{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:6px 11px; background:var(--surface-2); border-bottom:1px solid var(--line-soft);
  font-family:'Barlow Condensed',sans-serif}
.scl-meta .team{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scl-meta .price{font-size:13.5px; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums; flex:none}
/* D138: --muted. The currency unit is 9.5px and was failing AA at --dim. */
.scl-meta .price u{text-decoration:none; font-size:9.5px; letter-spacing:.1em; color:var(--muted); margin-left:2px}

.scl-stats{flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft); padding:1px 0 0}
.scl-stats.five{grid-template-columns:repeat(6,1fr)}
.scl-stats.five .stat:nth-child(-n+3){grid-column:span 2}
.scl-stats.five .stat:nth-child(n+4){grid-column:span 3}
.stat{background:var(--surface); padding:5px 4px 6px; text-align:center; position:relative;
  display:flex; flex-direction:column; justify-content:center; min-width:0}
/* D138: --muted, not --dim. At 8.5px the stat labels are far below the WCAG
   large-text threshold, so the 4.5:1 floor applies and --dim (#5A6478) gives
   3.17:1 against the panel - a contrast failure, not a taste question, and
   DESIGN-AUTHORITY 1 calls that a defect rather than a trade-off. --muted
   (#828DA4) is an existing token and gives 5.66:1. No new colour was invented
   and nothing else about the grid changes. */
.stat .k{font-family:'Barlow Condensed',sans-serif; font-size:8.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); line-height:1.1;
  display:flex; align-items:center; justify-content:center; gap:3px; position:relative}
.stat .v{font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600;
  line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; position:relative}
.stat .v.neg{color:var(--warn)}
.stat .v.pos{color:var(--ok)}
.stat .v.none{color:var(--faint)}

/* D246 chunk 3 · THE STATS IN GROUPS. Tobi, 23 September: group the stats
   FPL-style so managers can use them — Fragging, Team play, Reliability, his
   names. Two rows on a six-column grid: FRAGGING over its three cells, then
   TEAM PLAY and RELIABILITY side by side over theirs; each heading spans its
   cells (set by the renderer). The headings sit at the stat labels' own size
   and colour (D138's contrast floor). A card is a fixed 3:4 and had 2px to
   spare, so the room comes from the portrait on an opened card — his pick of
   three, measured first. The sixth time this frozen file is reopened on the
   owner's instruction. */
.scl-stats.grouped{grid-template-columns:repeat(6,1fr)}
.scl-stats.grouped .stat{grid-column:span 2; padding:3px 4px 3px}
.scl-stats.grouped .grp{background:var(--surface-2);
  font-family:'Barlow Condensed',sans-serif; font-size:8.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  line-height:1; padding:3px 11px 0; text-align:left}
/* D249, Tobi: the labels "moved just a bit down, so they almost sit on the boxes
   below them" — 1px from the top to the bottom of the same 3px, so the row's
   height, and the fixed 3:4 card, do not change. */
/* The portrait gives up the rest: 46% to 43% on an opened card. A small card
   sets its own portrait (66%, below) and is untouched. */
@container (min-width: 266px){
  .scl-card:has(.scl-stats.grouped) .scl-portrait{flex-basis:43%}
}

/* ---- the info affordance ----
   Violet because it is the one thing on the card you can tap, and the
   reservation rule says interactive means violet. The glyph is 11px but the
   hit area is expanded to 30px by the ::after, so it meets the touch minimum
   without a 30px dot dominating a 45px-wide stat cell. */
.info{
  position:relative; flex:none; width:11px; height:11px; padding:0; border:0;
  border-radius:50%; background:none; cursor:pointer; line-height:0;
  color:var(--accent); opacity:.72; transition:opacity .12s;
}
.info svg{width:11px; height:11px; display:block}
.info::after{content:""; position:absolute; left:50%; top:50%;
  width:30px; height:30px; transform:translate(-50%,-50%)}
.info:hover, .info:focus-visible{opacity:1}
.info:focus-visible{outline:2px solid var(--accent-line); outline-offset:3px; border-radius:50%}

.scl-avail{flex:none; padding:5px 11px 7px; background:var(--surface-2);
  border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; position:relative}
/* D138: same contrast floor as .stat .k above. */
.scl-avail .k{font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); flex:none; font-weight:600; display:flex; align-items:center; gap:3px}
.scl-avail .track{flex:1; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden}
.scl-avail .track i{display:block; height:100%; background:var(--tier); border-radius:2px}
.scl-avail .v{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}

/* ---- COMPACT CARD: the tile treatment, up to 265px (D222; 185px until then) ----
   MUST STAY BELOW `.scl-avail`, and that is not a style preference. This block
   sat ABOVE it until E1 step 6b (D165), where `.scl-avail{...display:flex}` at
   equal specificity won on source order and the availability bar survived into
   a card that had no room for it — overflowing the 3:4 box and clipping the
   player's name.

   Invisible until then, because the PNG pipeline renders at full size and the
   query never matched. The pool browser is the first thing to draw a card this
   small.

   UP TO 265px SINCE D222, which closes the dead zone rather than working round
   it. Between 186px and 265px the full face does not fit its own 3:4 box: the
   name bar was squeezed until its text was cut in half and the availability bar
   fell off the bottom — measured on Tobi's squad sheet, 15 September; the pool
   had met the same band at 6b (D165) and kept its tiles out of it. So the card
   is compact wherever the full face cannot fit, on any screen. The query reads
   the card's own content box, inside its 2px border, so the full face starts
   with a card 270px wide; the print cards, drawn 272px wide, are unchanged. */
@container (max-width: 265px){
  .scl-stats, .scl-avail{display:none}
  .scl-portrait{flex:0 0 66%}
  /* D251 · T1, Tobi: the picture grows into the space under the team line. */
  .scl-card[style*="--clip"] .scl-portrait{flex:1 1 auto}
  /* The small card's crest is a fixed 23px (D246), so its plate is sized from
     that and the 6px gap above it: 35px, the numeral centred, not rescaled. */
  .scl-portrait{--org-top:6px}
  .scl-ovr{padding:0 16px 0 8px; height:calc(2 * var(--org-top) + 23px)}
  /* D249: the reticle ticks read too thick on a small card (Tobi) — 1.5px by
     8px here, 2px by 10px on an opened card. The rule is in the texture layer,
     below; this narrows it. */
  .scl-card .scl-ovr{background-size:8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px, 8px 1.5px, 8px 1.5px}
  .scl-ovr .num{font-size:24px}
  .scl-flag{width:14px; height:9.3px}
  .scl-org{right:7px}
  /* D246: on a small card the mark is about half the rating plate's height —
     Tobi: the crest "looks out of place on the card and too prominent". The
     plate is 46px here, so 23px. An opened card keeps the height config gives. */
  .scl-org .badge-mark{height:23px}
  .scl-rail .chip.form, .scl-rail .chip.flag-new, .scl-rail .chip.flag-pending, .scl-rail .chip.flag-team{display:none}
  .scl-meta{padding:5px 9px}
}

.scl-card[data-inactive]{filter:saturate(.28) brightness(.82)}
.scl-card[data-inactive]::after{content:"INACTIVE"; position:absolute; z-index:5;
  top:23%; left:0; right:0; transform:translateY(-50%) rotate(-6deg); text-align:center;
  font-family:Anton,Impact,sans-serif; font-size:clamp(15px,8cqw,26px); letter-spacing:.16em;
  color:rgb(234 237 244 / .30); background:rgb(6 8 13 / .34); padding:5px 0;
  border-top:1px solid rgb(234 237 244 / .16); border-bottom:1px solid rgb(234 237 244 / .16)}

/* ---- explainer sheet: bottom sheet on mobile, centred on desktop ---- */
.sheet-scrim{position:fixed; inset:0; z-index:90; background:rgb(6 8 13 / .68);
  opacity:0; pointer-events:none; transition:opacity .16s}
.sheet-scrim[data-open]{opacity:1; pointer-events:auto}
/* POINTER-EVENTS, FOR THE SAME REASON THE SCRIM ABOVE HAS THEM (7i, 6 Sep).
   A closed sheet is hidden by TRANSFORM AND OPACITY, both of which leave the
   element laid out, rendered and hit-testable. On a phone that is harmless —
   translateY(101%) parks it off the bottom of the screen. On desktop the media
   query below replaces that with a centred transform and opacity:0, so an
   INVISIBLE 430x186 dialog sits at z-index 91 in the middle of every viewport
   and swallows every click underneath it. Measured on the Draft: three of five
   Field checkboxes reachable, two returning the sheet's own <b> from
   elementFromPoint. It is live on /pool too, and has been since D151.
   The scrim two rules up was written with the pair; the sheet was missed. */
.sheet{position:fixed; z-index:91; left:0; right:0; bottom:0;
  background:var(--surface); border-top:1px solid var(--accent-line);
  border-radius:13px 13px 0 0; padding:20px 20px 26px; pointer-events:none;
  transform:translateY(101%); transition:transform .2s cubic-bezier(.22,.8,.3,1)}
.sheet[data-open]{transform:translateY(0); pointer-events:auto}
@media(min-width:640px){
  .sheet{left:50%; right:auto; bottom:auto; top:50%; width:min(430px,calc(100vw - 44px));
    border-radius:13px; border:1px solid var(--accent-line);
    transform:translate(-50%,-46%) scale(.97); opacity:0}
  .sheet[data-open]{transform:translate(-50%,-50%) scale(1); opacity:1}
}
.sheet .eb{font-family:'Barlow Condensed',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}
.sheet h4{margin:0 0 9px; font-family:Anton,Impact,sans-serif; font-weight:400;
  font-size:21px; text-transform:uppercase; letter-spacing:.02em; line-height:1.06}
.sheet p{margin:0; color:var(--muted); font-size:14.5px; max-width:none}
.sheet .why{margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft);
  color:var(--text); font-size:14.5px}
.sheet .why b{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.13em; font-size:10.5px; color:var(--dim); display:block; margin-bottom:3px; font-weight:600}
.sheet .close{position:absolute; top:12px; right:12px; width:30px; height:30px;
  border-radius:7px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0}
.sheet .close:hover{color:var(--text); background:var(--surface-3)}
.sheet .close:focus-visible{outline:2px solid var(--accent-line); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .sheet, .sheet-scrim{transition:none}
}
/* ============================================================
   GLOW LAYERS — each independent, set via data-glow token list
   ============================================================ */

/* L2 · METAL — gradient ramp with a highlight band, clipped to the glyphs.
   Legacy uses tier-metal on the OVR numeral and steel on the name band. */
@supports (background-clip:text) or (-webkit-background-clip:text){
  [data-glow~="metal"] .scl-ovr .num{
    background:linear-gradient(174deg,
      color-mix(in srgb, var(--tier) 30%, #fff) 0%,
      var(--tier) 30%,
      color-mix(in srgb, var(--tier) 62%, #000) 50%,
      color-mix(in srgb, var(--tier) 18%, #fff) 58%,
      var(--tier) 74%,
      color-mix(in srgb, var(--tier) 70%, #000) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  [data-glow~="metal"] .scl-name b{
    background:linear-gradient(174deg, #FFFFFF 0%, #C9D2E0 30%, #7E8899 50%,
                               #FFFFFF 58%, #C9D2E0 76%, #6E7686 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  /* Deliberately NOT applied to stat values. A metal ramp costs contrast, and
     the legacy card could afford it because its stats were big round integers.
     Ours are dense ratios with signs and dashes on the most information-heavy
     part of the card, so data type stays flat white. Display type gets metal;
     data type does not. */
}

/* L3 · TEXTURE — halftone on the grid. D249: the diagonal stripes on the plate
   and the name band are gone (Tobi: "templated, generic"). The name band is a
   dog tag with its own brushed finish (above); the plate keeps its slanted
   shape and gains RETICLE CORNERS in the tier colour, 2px by 10px — an L at
   each left corner, and a tick along the top and along the bottom at the right,
   the bottom one ending where the slant does (13px in), since an L there would
   be cut by the clip. */
.scl-ovr{
  background-image:
    linear-gradient(var(--tier),var(--tier)), linear-gradient(var(--tier),var(--tier)),
    linear-gradient(var(--tier),var(--tier)), linear-gradient(var(--tier),var(--tier)),
    linear-gradient(var(--tier),var(--tier)), linear-gradient(var(--tier),var(--tier));
  background-size:10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 10px 2px;
  background-position:0 0, 0 0, 0 100%, 0 100%, 100% 0, calc(100% - 13px) 100%;
  background-repeat:no-repeat;
}

/* D249 · FOIL. Tobi liked a foil sheen on Gold and asked for it on every card,
   much subtler below Gold. Static — two linear gradients under an overlay
   blend, no blur and no animation (DESIGN-SYSTEM §6, §7) — over the operator
   and under the plate, crest and chips. */
.scl-portrait::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  mix-blend-mode:overlay; opacity:.35;
  background:linear-gradient(118deg, transparent 18%, rgb(255 246 214 / .55) 30%, transparent 40%,
               transparent 52%, rgb(255 255 255 / .45) 60%, transparent 70%),
             repeating-linear-gradient(118deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 5px)}
.scl-card[data-tier="1"] .scl-portrait::after{opacity:.9}
[data-glow~="texture"] .stat::before, [data-glow~="texture"] .scl-avail::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgb(234 237 244 / .05) .8px, transparent .9px);
  background-size:4px 4px;
}

/* L4 · FRAME — inner rule and corner ticks, from the legacy border */
.scl-card[style*="--clip"][data-glow~="frame"]::before, .scl-card[style*="--clip"][data-glow~="frame"]::after{display:none}
[data-glow~="frame"]::before{
  content:""; position:absolute; inset:3px; z-index:6; pointer-events:none;
  border:1px solid rgb(from var(--tier) r g b / .30); border-radius:9px;
}
[data-glow~="frame"]::after{
  content:""; position:absolute; inset:3px; z-index:6; pointer-events:none; border-radius:9px;
  background:
    linear-gradient(var(--tier),var(--tier)) 0 0/9px 1px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 0 0/1px 9px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 100% 0/9px 1px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 100% 0/1px 9px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 0 100%/9px 1px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 0 100%/1px 9px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 100% 100%/9px 1px no-repeat,
    linear-gradient(var(--tier),var(--tier)) 100% 100%/1px 9px no-repeat;
  opacity:.75;
}

/* L5 · EDGE — ceremonial cards only (D052 rev.2).
   The only blurred box-shadow in the set. Reserved for MVP of the Night, TOTS,
   Next-Rated TOTS and Manager of the Day, where a card is the whole screen and
   there is exactly one of it. Never on a tier card, never in the pool. */
[data-glow~="edge"]{
  box-shadow:
    0 0 0 1px rgb(from var(--tier) r g b / .22),
    0 0 22px -4px rgb(from var(--tier) r g b / .40),
    0 6px 18px -8px rgb(0 0 0 / .8);
}
/* tier 1 earns more, tier 4 barely any — the ladder holds here too */
[data-glow~="edge"][data-tier="1"]{box-shadow:0 0 0 1px rgb(from var(--tier) r g b / .3),
  0 0 30px -3px rgb(from var(--tier) r g b / .55), 0 6px 18px -8px rgb(0 0 0 / .8)}
[data-glow~="edge"][data-tier="4"]{box-shadow:0 0 0 1px rgb(from var(--tier) r g b / .14),
  0 0 14px -6px rgb(from var(--tier) r g b / .22), 0 6px 18px -8px rgb(0 0 0 / .8)}

/* ================= END CARD COMPONENT ================= */

.shelf{display:grid; gap:20px; margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.shelf.tight{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cell{display:flex; flex-direction:column; align-items:center; gap:11px}
.cell .cap{font-family:'Barlow Condensed',sans-serif; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); text-align:center}
.cell .cap b{color:var(--muted); font-weight:600}

.tablewrap{overflow-x:auto; margin:20px 0 0; border:1px solid var(--line); border-radius:6px}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14px}
th,td{text-align:left; padding:10px 15px; border-bottom:1px solid var(--line-soft); vertical-align:top}
thead th{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.13em;
  font-size:11.5px; color:var(--dim); font-weight:600; background:var(--surface); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.mono,code{font-family:'Barlow Condensed',sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums}
code{background:var(--surface-2); border:1px solid var(--line-soft); padding:1px 6px;
  border-radius:3px; color:var(--text); font-size:14.5px}
.flagrow{display:flex; flex-wrap:wrap; gap:16px; margin-top:22px}
.flagrow div{text-align:center; font-family:'Barlow Condensed',sans-serif;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim)}
.flagrow svg{display:block; width:46px; height:30.6px; border-radius:2px; margin:0 auto 6px;
  outline:1px solid rgb(234 237 244 / .2); outline-offset:-1px}
.flagrow em{font-style:normal; color:var(--warn)}

ul{padding-left:19px; max-width:66ch}
li{margin:7px 0}
li::marker{color:var(--faint)}
.stack{display:grid; gap:14px; margin-top:20px}
@media(min-width:760px){.stack.two{grid-template-columns:1fr 1fr}}
.block{border:1px solid var(--line); border-radius:8px; padding:17px 19px; background:var(--surface)}
.block h4{margin:0 0 7px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:12.5px; font-weight:600; color:var(--muted)}
.block p{margin:0; font-size:14.5px; color:var(--muted); max-width:none}
.block.pick{border-color:var(--accent-line); background:var(--accent-soft)}
.block.pick h4{color:var(--accent)}
.block.open h4{color:var(--warn)}
footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--faint); font-family:'Barlow Condensed',sans-serif;
  font-size:12.5px; letter-spacing:.07em; text-transform:uppercase}