/* MATCHDAY — "Floodlit Grass" broadcast design system.
   Built from the winning competition mockup (study of MtG Arena / Marvel Snap / Hearthstone / Runeterra).
   Drag-to-lane marking · big targets · almost no text · cinematic night-match. */
/* self-hosted fonts (latin + latin-ext woff2 from the former fonts.googleapis.com @imports) — same families/weights/unicode-ranges, no cross-origin render-block */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-slab-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-slab-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-slab-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-slab-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/saira-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/saira-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/saira-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/saira-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/saira-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/saira-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/saira-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/saira-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/saira-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/saira-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/saira-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/saira-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/saira-condensed-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/saira-condensed-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/saira-condensed-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/saira-condensed-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* ===== CLEAN RE-SKIN (FotMob + Sorare): near-black canvas, white-opacity surfaces, muted you/them, glow->elevation ===== */
  --bg:#0c1110;            /* app base: near-black, faintly cool for the night match */
  --bg-deep:#070b0a;       /* radial/vignette floor (home/setup outer, pitch veil) */
  --rgb-white:255,255,255;
  /* surface ladder — elevation is a step UP in white alpha, never a brighter grey or a glow */
  --s-50: rgba(var(--rgb-white),.05); --s-100:rgba(var(--rgb-white),.08);
  --s-150:rgba(var(--rgb-white),.12); --s-200:rgba(var(--rgb-white),.16);
  --line:rgba(var(--rgb-white),.10); --line-strong:rgba(var(--rgb-white),.18); --line-soft:var(--s-50);
  /* ink — hierarchy by opacity, not colour */
  --ink:#F2F6F4; --ink-dim:rgba(var(--rgb-white),.62); --ink-faint:rgba(var(--rgb-white),.40); --ink-ghost:rgba(var(--rgb-white),.24);
  /* team identity: YOU = ONE warm amber accent (NO BLUE); OPPONENT = NEUTRAL slate (read by position + crest) */
  --you:#D7A24A; --you-deep:#A87B2E; --you-tint:rgba(215,162,74,.15);
  --them:#8E99A6; --them-deep:#5C6571; --them-tint:rgba(142,153,166,.13); --them-ink:#D7DDE3;
  --hero:var(--you); --acc:var(--you);
  /* stat types — desaturated glyph + 2px marker (def NO LONGER blue) */
  --atk:#E0705B; --def:#A9A39A; --save:#5FC18A;
  --atk-tint:rgba(224,112,91,.16); --def-tint:rgba(169,163,154,.16); --save-tint:rgba(95,193,138,.16);
  /* accent of record — a single restrained gold (clock), no glow */
  --gold:#E8B964; --gold-tint:rgba(232,185,100,.14);
  --good:#5FC18A; --bad:#8E99A6; --threat:var(--atk); --rar-rare:#C9A05B;
  /* elevation — soft black shadows replace all neon glow */
  --el-1:0 1px 2px rgba(0,0,0,.30); --el-2:0 4px 14px rgba(0,0,0,.34); --el-3:0 10px 30px rgba(0,0,0,.42);
  --el-card:0 6px 20px rgba(0,0,0,.38); --ring:0 0 0 1.5px var(--you);
  --r8:8px; --r12:12px; --r16:16px; --r22:18px;
  --grass-near:#0a2b22; --grass-deep:#06201c; --grass-far:#041714;   /* legacy (SVG pitch) — kept in case referenced */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  /* type — Inter for body/data; Oswald = the vintage broadcast display face (scores/headers/captions) */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-num:var(--font);
  --font-display:'Oswald','Inter',system-ui,sans-serif;   /* vintage CG display */
  --font-heavy:'Anton','Oswald',sans-serif;               /* ultra-heavy flash words: GOAL + wordmark */
  --font-slab:'Roboto Slab',Georgia,serif;                /* one period slab caption: .ht-note + .reason */
  /* ===== VINTAGE BROADCAST tokens (Ceefax Night Feed) — coexist with the clean tokens; reuse --gold ===== */
  --vint-plate:#13110c; --vint-plate-2:#0e0d09;
  --vint-cream:#F3E9D2; --vint-bone:#E8DFC8; --vint-you:#F6EEDB;   /* your score = warm bright cream (NO blue) */
  --vint-amber:#F4C430; --vint-amber-dim:#C99A2E;
  --vint-rule:rgba(232,185,100,0.55); --vint-rule-soft:rgba(232,185,100,0.22);
  --vint-ink:#15120a; --vint-shadow:rgba(0,0,0,0.55); --bc-skew:-8deg;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{background:#000;height:100%}   /* the board base = the pitch image's black top edge, so the band behind the score bug matches seamlessly when the pitch pans */
#app{width:100%;height:100%;position:relative;z-index:9100}   /* board ABOVE the .bc-* CRT texture (8998-9002) — cards/chrome stay crisp; the texture grades the pitch + rails behind */
body{
  font-family:var(--font);color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;
}

/* ===== STAGE + FLOODLIT PITCH ===== */
.stage{position:relative;width:100%;max-width:430px;margin:0 auto;height:100dvh;overflow:hidden;
  padding-top:var(--sat);padding-bottom:var(--sab);display:flex;flex-direction:column}
/* floodlit broadcast pitch = a pre-rendered SVG on ONE persistent element behind the app, so it never
   re-fetches or flickers when the board re-renders (one consistent perspective for stripes/lines/circle) */
#pitchbg{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up)));width:100%;max-width:430px;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,11,10,0.62) 0%, rgba(7,11,10,0.20) 26%, rgba(7,11,10,0.18) 58%, rgba(7,11,10,0.74) 100%),
    url(pitch.jpg) center / cover no-repeat;
  background-color:#000}   /* match the image's black top edge (no seam where the panned pitch leaves its box) */
/* phones WIDER than the 430 design width (e.g. iPhone Pro Max ≈ 440) were capped at 430, leaving the board (and the
   full-width hand band) inset with grass slivers beside it. Let phones fill the screen; the ≥480 desktop card keeps its cap. */
@media (max-width:479.98px){ .stage{ max-width:none } .home,.setup{ max-width:none !important } #pitchbg{ max-width:none } }
.pitch-wrap{display:none}

/* ===== SCORE LOWER-THIRD (broadcast scorebug) ===== */
.scorebar{position:relative;z-index:6;margin:12px auto 0;height:44px;border-radius:10px;display:flex;align-items:stretch;width:max-content;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(12,21,32,0.97),rgba(6,12,20,0.99));border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);overflow:hidden}
.sb-clock{display:flex;align-items:center;justify-content:center;padding:0 11px;min-width:48px;
  font-family:var(--font);font-size:19px;letter-spacing:1px;color:#0b0e14;font-weight:700;background:var(--gold)}
.sb-team{display:flex;align-items:center;gap:8px;padding:0 14px}
.sb-team b{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:2px;color:var(--ink)}
.sb-tab{width:4px;height:22px;border-radius:2px;flex:0 0 auto}
.sb-tab.you{background:var(--you);box-shadow:0 0 10px rgba(215,162,74,0.7)}
.sb-tab.them{background:var(--them);box-shadow:0 0 10px rgba(142,153,166,0.6)}
.sb-score{display:flex;align-items:center;gap:9px;padding:0 16px;font-family:var(--font);font-size:30px;letter-spacing:1px;
  background:rgba(255,255,255,0.045);box-shadow:inset 1px 0 0 rgba(255,255,255,0.07),inset -1px 0 0 rgba(255,255,255,0.07)}
.sb-score .you{color:#ECE3CF} .sb-score .them{color:#D7DDE3} .sb-score .dash{color:rgba(255,255,255,0.3);font-size:23px}

/* ===== PHASE BANNER ===== */
.phase{position:relative;z-index:6;margin:9px auto 0;display:flex;align-items:center;gap:9px;
  padding:6px 16px 6px 12px;border-radius:999px;width:max-content;flex:0 0 auto;
  background:rgba(215,162,74,0.12);border:1px solid rgba(215,162,74,0.32);box-shadow:0 0 24px rgba(215,162,74,0.18)}
.phase.atk{background:rgba(255,209,92,0.10);border-color:rgba(255,209,92,0.34);box-shadow:0 0 24px rgba(255,209,92,0.16)}
.phase .shield{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.phase .shield svg{width:22px;height:22px}
.phase .verb{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:3px;color:#ECE3CF}
.phase.atk .verb{color:#ffe7ad}
.phase .tag{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--you);
  padding:2px 7px;border-radius:6px;background:rgba(215,162,74,0.14);border:1px solid rgba(215,162,74,0.3)}
.phase.atk .tag{color:var(--gold);background:rgba(255,209,92,0.12);border-color:rgba(255,209,92,0.3)}

/* ===== BATTLEFIELD ===== */
.field{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;padding:14px 12px 0;min-height:0}
.field.attacking{--threat:var(--gold)}
.runners{display:flex;justify-content:center;gap:8px;margin-top:6px;min-height:152px}
.lane{position:relative;width:100px;display:flex;flex-direction:column;align-items:center}
.sd-runners .lane{width:auto}
.midfield{flex:1;position:relative;min-height:84px;pointer-events:none}   /* layout spacer only — never intercept taps (the def-pan-shifted attacker lanes paint under it on MARK) */

.danger{position:absolute;top:118px;left:50%;transform:translateX(-50%);
  width:58px;height:290px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--threat) 40%, transparent), color-mix(in srgb, var(--threat) 10%, transparent) 60%, transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
  border-radius:30px;filter:blur(1px);animation:none}
.lane.open .danger{opacity:1}
@keyframes dangerPulse{0%,100%{opacity:.5}50%{opacity:.95}}
.chev{position:absolute;left:50%;transform:translateX(-50%);z-index:1;color:var(--threat);
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--threat) 90%, transparent));opacity:0}
.lane.open .chev{opacity:1}
.chev.c1{top:152px;animation:none}
.chev.c2{top:182px;animation:none}
.chev.c3{top:212px;animation:none}
@keyframes chevFall{0%,100%{opacity:.25;transform:translateX(-50%) translateY(-4px)}50%{opacity:1;transform:translateX(-50%) translateY(4px)}}

/* shared card */
.card{position:relative;width:100px;height:140px;border-radius:var(--r12);
  background-size:cover;background-position:center top;background-color:#0c1a16;
  box-shadow:0 12px 24px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition:transform .16s cubic-bezier(.2,.8,.25,1), box-shadow .16s, filter .2s, opacity .2s;will-change:transform}
.card .grad{position:absolute;inset:0;border-radius:var(--r12);
  background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,0.55) 78%,rgba(0,0,0,0.9) 100%)}
.card .spine{position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0}
.card.them-card .spine{background:var(--them);box-shadow:0 0 10px rgba(142,153,166,0.7)}
.card.you-card .spine{background:var(--you);box-shadow:0 0 10px rgba(215,162,74,0.7)}
.card .surname{position:absolute;left:9px;right:8px;bottom:24px;
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.3px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.9);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .noart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r12);
  font-family:var(--font);font-weight:700;font-size:12px;color:var(--ink-dim);text-align:center;padding:6px}
.stat{position:absolute;right:7px;bottom:7px;min-width:30px;height:26px;padding:0 7px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  font-family:var(--font);font-size:19px;letter-spacing:.5px;line-height:1;
  background:rgba(8,12,18,0.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1)}
.stat svg{width:11px;height:11px;margin-bottom:1px}
.stat.atk{color:var(--atk)} .stat.atk svg{fill:var(--atk)}
.stat.def{color:var(--def)} .stat.def svg{fill:var(--def)}
.stat.save{color:var(--save)} .stat.save svg{fill:var(--save)}

.runner{transform:translateY(0) scale(1);transform-origin:bottom center}
.lane.open .runner{transform:translateY(6px) scale(1.04);
  box-shadow:0 18px 30px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb,var(--threat) 30%,transparent), 0 0 28px color-mix(in srgb,var(--threat) 25%,transparent)}
.lane.covered .runner{transform:scale(0.9) translateY(-26px);filter:brightness(.62) saturate(.8);
  box-shadow:0 6px 14px rgba(0,0,0,0.5);z-index:1}

/* marker slides up over the runner it covers */
.markers{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:3;width:100px;height:0}
.marker{position:absolute;left:50%;top:0;width:84px;height:118px;border-radius:var(--r12);
  margin-left:-42px;background-size:cover;background-position:center top;background-color:#0c1a16;
  box-shadow:0 14px 26px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(54,194,255,0.5), 0 0 22px rgba(54,194,255,0.22)}
.marker .spine{position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--def);box-shadow:0 0 8px rgba(54,194,255,0.7)}
.marker .grad{position:absolute;inset:0;border-radius:var(--r12);background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.92))}
.marker .surname{position:absolute;left:7px;right:6px;bottom:20px;font-family:var(--font);font-weight:700;font-size:11px;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,0.9);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marker .stat{min-width:26px;height:22px;font-size:16px;right:5px;bottom:5px}
.marker.f2{margin-left:-26px;top:-6px;z-index:2} .marker.f3{margin-left:-58px;top:-6px;z-index:1}

.keeper-row{position:relative;z-index:9;display:flex;justify-content:center;margin:0 0 -36px;flex:0 0 auto}
.keeper-row.top{margin:0;z-index:4}                       /* their keeper at the top when you attack */
/* attacking phases: a FIXED top zone + runners anchored just below it, so cards never shift between phases */
.atk-top{flex:none;height:172px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:2px}
.atk-mid{flex:none;min-height:26px;display:flex;align-items:center;justify-content:center;position:relative}
.runners.atkruns{flex:none;margin:4px 0 0}
.afterspace{flex:1;min-height:6px}
.card.runner.free{box-shadow:0 16px 28px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,209,92,.55), 0 0 24px rgba(255,209,92,.3)}
.keeper{position:relative;width:94px;height:114px;border-radius:var(--r16);
  background-size:cover;background-position:center 18%;background-color:#0c1a16;
  box-shadow:0 16px 34px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(61,220,132,0.45), 0 0 34px rgba(61,220,132,0.2)}
.keeper.them-keeper{box-shadow:0 16px 34px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(142,153,166,0.4), 0 0 30px rgba(142,153,166,0.18)}
.keeper .grad{position:absolute;inset:0;border-radius:var(--r16);background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.6) 82%,rgba(0,0,0,0.92))}
.keeper .surname{position:absolute;left:10px;right:8px;bottom:26px;font-family:var(--font);font-weight:700;font-size:13px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keeper .stat{right:8px;bottom:8px}
.keeper-wall{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:150px;height:9px;border-radius:5px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--save),transparent);box-shadow:0 0 18px rgba(61,220,132,0.6);opacity:.85}
.keeper-glove{position:absolute;left:8px;top:8px;z-index:5;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(8,16,12,0.75);box-shadow:inset 0 0 0 1px rgba(61,220,132,0.4)}
.keeper-glove svg{width:14px;height:14px;fill:var(--save)}

/* legal-target halo while marking */
.lane.legal::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:148px;border-radius:16px;z-index:0;pointer-events:none;
  box-shadow:0 0 0 2px var(--save), 0 0 26px rgba(147,232,58,0.55);animation:haloPulse 1.05s ease-in-out infinite}   /* every legal target pulsates (lime) while arming/dragging */
.lane.legal.drop-hover::before{box-shadow:0 0 0 3px var(--save), 0 0 40px rgba(147,232,58,0.95);animation:none;opacity:1}   /* the hovered target = solid (no pulse) */
@keyframes haloPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* declare: empty attack lane = drop target for your runners */
.lane.empty .slot{width:100px;height:140px;border-radius:var(--r12);border:2px dashed rgba(255,209,92,0.4);
  display:flex;align-items:center;justify-content:center;color:rgba(255,209,92,0.5);font-size:30px;font-weight:300}
.lane.empty.drop-hover .slot{border-color:var(--gold);box-shadow:0 0 26px rgba(255,209,92,0.5)}


/* ===== BOTTOM THUMB ZONE ===== */
.tray-wrap{position:relative;z-index:8;margin-top:auto;padding:12px 12px calc(10px + var(--sab));flex:0 0 auto;
  background:linear-gradient(180deg,rgba(3,9,15,0) 0%,rgba(3,9,15,0.9) 22%,rgba(3,9,15,0.98))}
.tally{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:9px;min-height:34px}
.pip{width:11px;height:11px;border-radius:50%}
.pip.cov{background:var(--def);box-shadow:0 0 8px rgba(54,194,255,0.55)}
.pip.open{background:var(--threat);box-shadow:0 0 10px color-mix(in srgb,var(--threat) 85%,transparent);animation:none}
@keyframes pipPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.28);opacity:1}}
.pip.empty{background:rgba(255,255,255,0.16)}

.tray{display:flex;justify-content:center;gap:3cqw;margin-bottom:12px;min-height:118px;flex-wrap:wrap}
.dcard{position:relative;width:84px;height:118px;border-radius:var(--r12);
  background-size:cover;background-position:center top;background-color:#0c1a16;
  box-shadow:0 10px 22px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.07);transition:transform .16s, box-shadow .16s, opacity .16s;touch-action:none}
.dcard .spine{position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--you);box-shadow:0 0 8px rgba(215,162,74,0.7)}
.dcard .grad{position:absolute;inset:0;border-radius:var(--r12);background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,0.58) 80%,rgba(0,0,0,0.92))}
.dcard .surname{position:absolute;left:7px;right:6px;bottom:20px;font-family:var(--font);font-weight:700;font-size:11px;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,0.9);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard .role{position:absolute;left:6px;top:6px;width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;letter-spacing:.5px;color:#ECE3CF;background:rgba(8,16,28,0.7);box-shadow:inset 0 0 0 1px rgba(215,162,74,0.35)}
.dcard .stat{min-width:26px;height:22px;font-size:16px;right:5px;bottom:5px}
.dcard.armed{transform:translateY(-14px) scale(1.08);box-shadow:0 22px 34px rgba(0,0,0,0.6), 0 0 0 2px var(--hero), 0 0 30px rgba(215,162,74,0.6)}
.dcard.dragging{opacity:.32}
.dcard.spent{opacity:.4;filter:grayscale(.4)}
.dcard.inelig{opacity:.38;filter:grayscale(.65)}
.dcard .nomark{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:rgba(142,153,166,0.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.dcard .nomark.fwd{background:var(--gold);color:#2a1c00}

/* declare: the opposition wall you attack into */
.oppwall{display:flex;flex-direction:column;align-items:center;gap:4px}
.wall-line{display:flex;justify-content:center;gap:3cqw}
.wall-line.kpline{margin-bottom:0}
.wallcard{position:relative;width:54px;height:76px;border-radius:9px;background-size:cover;background-position:center top;background-color:#0c1a16;
  box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.wallcard .wspine{position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--them);box-shadow:0 0 7px rgba(142,153,166,.6)}
.wallcard .grad{position:absolute;inset:0;border-radius:9px;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.92))}
.wallcard .surname{position:absolute;left:5px;right:4px;bottom:15px;font-family:var(--font);font-weight:700;font-size:8.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallcard .stat{min-width:20px;height:17px;font-size:12px;right:3px;bottom:3px;padding:0 4px;border-radius:6px}
.wallcard .stat svg{width:9px;height:9px}
.wallcard.kp{box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(61,220,132,.5),0 0 16px rgba(61,220,132,.2)}
.wall-label{font-size:8.5px;font-weight:800;letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase;margin-top:1px}
.runners.decl{margin-top:auto;margin-bottom:8px}
.decl-lane{width:100px}

.commit{position:relative;width:100%;height:60px;border-radius:var(--r16);border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:2px;color:#fff;
  background:linear-gradient(180deg,#3b78ff,#1f4fe0);
  box-shadow:0 12px 28px rgba(31,79,224,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .12s, box-shadow .12s, opacity .12s}
.commit:active{transform:translateY(2px);box-shadow:0 6px 16px rgba(31,79,224,0.45)}
.commit:disabled{opacity:.4}
.commit.atk{background:linear-gradient(180deg,#ffcf5a,#e0a31f);color:#2a1c00;box-shadow:0 12px 28px rgba(224,163,31,0.45),inset 0 1px 0 rgba(255,255,255,0.35)}
.commit.ghost{background:linear-gradient(180deg,rgba(40,52,70,0.9),rgba(28,36,52,0.95));color:var(--ink-dim);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.commit .pips{display:flex;gap:5px;margin-left:4px}
.commit .pips i{width:7px;height:7px;border-radius:50%}
.commit .pips i.c{background:#bfe9ff} .commit .pips i.o{background:var(--threat);box-shadow:0 0 8px var(--threat)}
.btnrow{display:flex;gap:10px}.btnrow .commit{flex:1}
/* showdown PUMP — opt-in boost (default off), so a covered shot never spends a pump card silently */
.pumprow{display:flex;justify-content:center;margin-bottom:9px;min-height:34px}
.pumptoggle{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,209,92,.45);background:rgba(255,209,92,.10);color:var(--gold);
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:1px}
.pumptoggle.on{background:var(--gold);color:#2a1c00;border-color:var(--gold);box-shadow:0 0 18px rgba(255,209,92,.5)}

/* react bar (instants) */
.reacthint{text-align:center;font-size:12px;color:var(--ink-dim);margin-bottom:10px}
.reacthint b{color:var(--ink)}

/* rope + log fabs */
.rope{position:absolute;top:calc(8px + var(--sat));right:12px;z-index:9;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(6,12,20,0.6);border:1px solid rgba(255,255,255,0.07)}
.rope .num{font-family:var(--font);font-size:15px;letter-spacing:1px;color:var(--ink-dim)}
.rope .board{width:14px;height:14px;border-radius:3px;background:rgba(255,209,92,0.18);box-shadow:inset 0 0 0 1px rgba(255,209,92,0.5)}
.logfab{position:absolute;top:calc(8px + var(--sat));left:12px;z-index:9;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(6,12,20,0.6);border:1px solid rgba(255,255,255,0.07)}
.logfab svg{width:16px;height:16px;fill:var(--ink-dim)}
.hint{position:absolute;left:50%;transform:translateX(-50%);z-index:7;bottom:8px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(207,224,255,0.5);display:flex;align-items:center;gap:6px;white-space:nowrap}
.hint .dot{width:5px;height:5px;border-radius:50%;background:var(--hero);box-shadow:0 0 8px var(--hero);animation:none}

/* tappable affordance (tap-pair fallback + showdown picks + declare select) */
.tappable{cursor:pointer}
.sel{box-shadow:0 0 0 2px var(--hero), 0 0 26px rgba(215,162,74,0.55), 0 12px 24px rgba(0,0,0,.55)!important}
.sel.atk-sel{box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(255,209,92,0.55), 0 12px 24px rgba(0,0,0,.55)!important}
.dim{opacity:.4}

/* ===== SHOWDOWN ===== */
.sd-runners{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.sd-card{width:108px;height:150px}
.sd-pick{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#2a1c00;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.6)}

/* ===== HOME ===== */
.home{position:relative;width:100%;max-width:430px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;
  padding:calc(var(--sat) + 8px) 20px calc(var(--sab) + 20px);overflow:hidden;
  background:radial-gradient(120% 70% at 50% -10%, #143a55 0%, #0a2138 34%, #050d18 70%, #03080f 100%)}
.home .wordmark{text-align:center;margin-top:40px}
.home .wordmark b{font-family:var(--font);font-size:64px;letter-spacing:4px;color:#fff;display:block;line-height:.9}
.home .wordmark span{font-family:var(--font);font-weight:700;letter-spacing:6px;font-size:13px;color:var(--hero)}
.home .tagline{text-align:center;color:var(--ink-dim);font-size:13px;margin-top:12px}
.home .spacer{flex:1}
.picker{display:flex;flex-direction:column;gap:10px}
.deckbtn{position:relative;min-height:60px;border-radius:var(--r16);background:rgba(12,22,34,0.85);border:1px solid rgba(255,255,255,0.08);
  color:var(--ink);font-family:var(--font);font-weight:700;letter-spacing:2px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .12s,border-color .12s}
.deckbtn:active{transform:scale(.98);border-color:var(--hero);box-shadow:0 0 0 2px rgba(215,162,74,.3)}

/* ===== SETUP (lineup) ===== */
.setup{position:relative;width:100%;max-width:430px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;
  padding-top:calc(var(--sat) + 10px);overflow:hidden;
  background:radial-gradient(120% 70% at 50% -10%, #143a55 0%, #0a2138 34%, #050d18 70%, #03080f 100%)}
.su-head{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;padding:0 18px 2px}
.su-head .ttl{font-family:var(--font);font-size:30px;letter-spacing:2px;color:#fff}
.su-head .gk{font-size:11px;color:var(--ink-dim);font-weight:600}
.su-head .gk b{color:var(--save)}
.su-sub{flex:0 0 auto;padding:0 18px 10px;font-size:12px;color:var(--ink-dim)}
.su-grid{flex:1;min-height:0;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:12px;padding:6px 14px 14px}
.su-card{display:flex;flex-direction:column;align-items:center;gap:5px}
.su-card .card{width:86px;height:120px}
.su-pos{font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,0.06);color:var(--ink-dim)}
.su-card.p-DEF .su-pos{color:var(--def)} .su-card.p-MID .su-pos{color:var(--save)} .su-card.p-FWD .su-pos{color:var(--atk)}
.su-foot{flex:0 0 auto;padding:10px 16px calc(14px + var(--sab));background:linear-gradient(180deg,transparent,rgba(3,9,15,0.95))}
.su-foot .prompt{text-align:center;font-size:12px;color:var(--ink-dim);margin-bottom:8px}
.su-foot .prompt b{color:var(--ink)}

/* ===== RESULT overlay ===== */
.result{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(3,8,14,0.82);backdrop-filter:blur(3px);padding:24px}
.result .big{font-family:var(--font);font-size:56px;letter-spacing:3px;line-height:1}
.result .big.goal{color:var(--save);text-shadow:0 0 30px rgba(61,220,132,.6)}
.result .big.no{color:var(--ink-dim)}
.result .sub{font-size:13px;color:var(--ink-dim);text-align:center;max-width:280px}
.result .reason{font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:2.5px;color:var(--ink-dim);text-transform:uppercase;margin-top:2px}
.result .commit{max-width:300px;margin-top:14px}

/* ===== INSTANT REVEAL — a played card slams down with its effect before the action continues ===== */
.instant-fx{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;container-type:inline-size;pointer-events:none;
  background:radial-gradient(72% 56% at 50% 44%, color-mix(in srgb, var(--ifx-accent,var(--you)) 34%, transparent) 0%, transparent 72%), rgba(4,8,16,0.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.instant-fx.ifx-you{--ifx-accent:var(--you)}
.instant-fx.ifx-them{--ifx-accent:var(--atk)}
.instant-fx.out{animation:ifxFade .42s ease forwards}
.ifx-card{position:relative;width:140px;aspect-ratio:771/1248;height:auto;border-radius:8px;background-size:cover;background-position:center;background-color:#0c1a16;
  box-shadow:0 26px 50px rgba(0,0,0,.7), 0 0 9cqw color-mix(in srgb, var(--ifx-accent,var(--you)) 45%, transparent);animation:ifxDrop .5s cubic-bezier(.18,.9,.2,1.05)}
.instant-fx.out .ifx-card{animation:ifxOut .42s ease forwards}
/* headings styled like the shot-result interstitial: crest tag + big italic display label */
.ifx-tag{display:flex;align-items:center;gap:2cqw;font-family:var(--font);font-weight:700;letter-spacing:.16em;font-size:3.2cqw;text-transform:uppercase}
.ifx-crest{color:#fff;padding:.5cqw 2cqw;border-radius:2cqw;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.ifx-who{color:var(--ink-dim)}
.ifx-verb{font-family:var(--font-display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.02em;font-size:15cqw;line-height:.9;color:#fff;
  text-shadow:0 0 7cqw color-mix(in srgb, var(--ifx-accent,var(--you)) 60%, transparent), 0 3px 18px rgba(0,0,0,.6)}
.ifx-sub{font-family:var(--font);font-weight:700;font-size:4cqw;letter-spacing:.06em;color:#fff;text-transform:uppercase}
@keyframes ifxDrop{0%{transform:translateY(-230px) scale(1.35) rotate(-7deg);opacity:0}55%{opacity:1}100%{transform:translateY(0) scale(1) rotate(0);opacity:1}}
@keyframes ifxOut{to{transform:translateY(-26px) scale(.92);opacity:0}}
@keyframes ifxFade{to{opacity:0}}

/* ===== FANNED HAND (MtG-Arena arc) — your bench cards = your instant abilities ===== */
.fanstage{position:relative;height:150px;width:100%;max-width:406px;margin:0 auto}
.fan{position:absolute;left:0;right:0;bottom:0;height:118px}
/* per-count constants — the ONLY thing that changes 1..6. Near-flat at n1/n2 (mobile-honest). */
.fan.n1{--step-deg:0;   --step-x:0;   --drop:0}
.fan.n2{--step-deg:0;   --step-x:48;  --drop:0}
.fan.n3{--step-deg:8;   --step-x:50;  --drop:7}
.fan.n4{--step-deg:7;   --step-x:46;  --drop:6}
.fan.n5{--step-deg:6.5; --step-x:43;  --drop:5.5}
.fan.n6{--step-deg:6;   --step-x:39;  --drop:5}
/* every card pivots from bottom-centre off its signed offset --o (set inline); --dy uses o*o (no CSS abs) */
.fan .handcard{position:absolute;left:50%;bottom:0;margin:0;transform-origin:bottom center;z-index:var(--z);
  --rot:calc(var(--o) * var(--step-deg) * 1deg);
  --dx: calc(var(--o) * var(--step-x) * 1px);
  --dy: calc(var(--o) * var(--o) * var(--drop) * 1px);
  transform:translateX(-50%) translateX(var(--dx)) translateY(var(--dy)) rotate(var(--rot));
  transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s, filter .2s, opacity .18s}
/* LIVE card (owns this window's ability): small float-lift + accent rim recolour (rim alone tells you the phase) */
.fan[data-live] .handcard.live{transform:translateX(-50%) translateX(var(--dx)) translateY(calc(var(--dy) - 9px)) rotate(var(--rot)) scale(1.03);cursor:pointer}
.fan[data-live] .handcard.live .spine{background:var(--acc);box-shadow:0 0 9px var(--acc)}
/* DEAD card (no live ability this window): seated, quiet, inert */
.fan .handcard.dead{filter:grayscale(.55) brightness(.6)}
.fan .handcard.dead:active{transform:translateX(-50%) translateX(var(--dx)) translateY(calc(var(--dy) - 4px)) rotate(var(--rot))}
/* LIFTED card: rises straight up, upright, clear of the fan; recede the other live cards */
.fan .handcard.lifted{transform:translateX(-50%) translateX(var(--dx)) translateY(-86px) scale(1.16) rotate(0deg)!important;z-index:40!important;cursor:pointer}
.fan.lifting .handcard.live:not(.lifted){filter:brightness(.72) saturate(.85)}
/* window-coloured ring on live + lifted cards (keyed by data-live) */
.fan[data-live="assist"] .handcard.live{box-shadow:0 12px 26px rgba(0,0,0,.6),0 0 0 1.5px var(--gold),0 0 22px rgba(255,209,92,.28)}
.fan[data-live="lmt"]    .handcard.live,
.fan[data-live="otl"]    .handcard.live{box-shadow:0 12px 26px rgba(0,0,0,.6),0 0 0 1.5px var(--save),0 0 22px rgba(61,220,132,.28)}
.fan[data-live="goal"]   .handcard.live{box-shadow:0 12px 26px rgba(0,0,0,.6),0 0 0 1.5px var(--atk), 0 0 22px rgba(255,106,77,.28)}
.fan[data-live="assist"] .handcard.lifted{box-shadow:0 26px 48px rgba(0,0,0,.7),0 0 0 2px var(--gold),0 0 40px rgba(255,209,92,.55)}
.fan[data-live="lmt"]    .handcard.lifted,
.fan[data-live="otl"]    .handcard.lifted{box-shadow:0 26px 48px rgba(0,0,0,.7),0 0 0 2px var(--save),0 0 40px rgba(61,220,132,.55)}
.fan[data-live="goal"]   .handcard.lifted{box-shadow:0 26px 48px rgba(0,0,0,.7),0 0 0 2px var(--atk), 0 0 40px rgba(255,106,77,.55)}
/* armed pump fills its goal pip solid so "shootPump armed" is unmistakable */
.fan[data-live="goal"] .handcard.lifted .apip.goal{background:var(--atk);color:#2a1c00}
.fan[data-live="goal"] .handcard.lifted .apip.goal svg{fill:#2a1c00}

/* ability rail: glyph+value pips up the left edge */
.abrail{position:absolute;left:5px;top:6px;z-index:4;display:flex;flex-direction:column;gap:4px}
.apip{width:22px;min-height:30px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,12,18,0.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);opacity:.34;filter:grayscale(.5);
  transition:opacity .18s,box-shadow .18s,filter .18s,background .18s,color .18s}
.apip svg{width:15px;height:15px;display:block}
.apip b{font-family:var(--font);font-size:11px;line-height:.9;letter-spacing:.5px}
.apip.goal  {color:var(--atk)}  .apip.goal svg  {fill:var(--atk)}
.apip.assist{color:var(--gold)} .apip.assist svg{fill:var(--gold)}
.apip.lmt   {color:var(--save)} .apip.lmt svg   {fill:var(--save)}
.apip.otl   {color:var(--def)}  .apip.otl svg   {fill:var(--def)}
.apip.live{opacity:1;filter:none;animation:none}
.apip.goal.live  {box-shadow:0 0 0 1px var(--atk), 0 0 12px rgba(255,106,77,.55)}
.apip.assist.live{box-shadow:0 0 0 1px var(--gold),0 0 12px rgba(255,209,92,.6)}
.apip.lmt.live   {box-shadow:0 0 0 1px var(--save),0 0 12px rgba(61,220,132,.6)}
@keyframes apipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.fan .handcard .stat{min-width:24px;height:20px;font-size:15px;right:5px;bottom:5px}

/* full-width ghost PASS rail (chev-skip glyph = text-free decline) */
.commit.passrail{display:flex;align-items:center;justify-content:center;height:54px;margin-top:2px}
.commit.passrail svg{width:22px;height:22px;fill:var(--ink-dim)}
body.hand-lifting .commit.passrail{opacity:.55}   /* recede pass while a card is lifted; still tappable */

/* board target halos while a hand card is lifted (clone of .lane.legal::before, recoloured per window) */
body.hand-lifting .lane.assist-target::before,
body.hand-lifting .lane.lmt-target::before,
.lane.pump-target::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:148px;border-radius:16px;z-index:0;animation:none}
body.hand-lifting .lane.assist-target::before{box-shadow:0 0 0 2px var(--gold),0 0 26px rgba(255,209,92,.55)}
body.hand-lifting .lane.lmt-target::before   {box-shadow:0 0 0 2px var(--save),0 0 26px rgba(61,220,132,.55)}
.lane.pump-target::before                    {box-shadow:0 0 0 2px var(--atk), 0 0 26px rgba(255,106,77,.55)}
body.hand-lifting .lane.assist-target.drop-hover::before{box-shadow:0 0 0 3px var(--gold),0 0 36px rgba(255,209,92,.85);animation:none}
body.hand-lifting .lane.lmt-target.drop-hover::before   {box-shadow:0 0 0 3px var(--save),0 0 36px rgba(61,220,132,.85);animation:none}

/* graceful degradation: if calc on custom props fails, fall back to a flat centred row */
@supports not (transform: translateX(calc(1px * 1))){
  .fan{display:flex;justify-content:center;gap:8px;position:relative}
  .fan .handcard{position:relative;left:auto;bottom:auto;transform:none}
}

/* ===== SUBSTITUTIONS step (reuses .card/.handcard/.fan/.lane/.stat/.apip) ===== */
/* the 4 starters as cyan/red SLOTS — narrowed so 4 + the locked GK fit the 430px field */
.lane.subslot{position:relative;width:auto}
.card.sub-slot{width:74px;height:104px;transition:transform .14s, filter .14s, opacity .14s}
.card.sub-slot .spine{background:var(--acc);box-shadow:0 0 9px var(--acc)}
.card.sub-slot .surname{font-size:11px;bottom:20px}
.card.sub-slot .stat{min-width:24px;height:20px;font-size:15px;right:4px;bottom:4px}
/* GK locked slab pinned beside the slots — never a drop target */
.lane.gk-lane{width:auto;justify-content:flex-end}
.card.gk-locked{position:relative;width:66px;height:104px;border-radius:var(--r12);
  background-size:cover;background-position:center top;background-color:#0c1a16;
  filter:grayscale(.5) brightness(.7);opacity:.85;
  box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06)}
.card.gk-locked .surname{position:absolute;left:6px;right:5px;bottom:18px;font-family:var(--font);
  font-weight:700;font-size:9px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.gk-locked .stat{min-width:22px;height:18px;font-size:13px;right:4px;bottom:4px}
.slotlock{position:absolute;top:5px;right:6px;font-size:12px;opacity:.85;z-index:3}
/* legal drop halo (cyan clone of the hand-lifting target halo) */
body.hand-lifting .lane.subslot.sub-target::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:84px;height:120px;border-radius:14px;z-index:0;
  box-shadow:0 0 0 2px var(--def),0 0 26px rgba(54,194,255,.55);animation:none}
body.hand-lifting .lane.subslot.sub-target.drop-hover::before{box-shadow:0 0 0 3px var(--def),0 0 36px rgba(54,194,255,.9);animation:none}
/* illegal slot: not droppable, reads as locked */
body.hand-lifting .lane.subslot.locked .card.sub-slot{filter:grayscale(.6) brightness(.55);opacity:.6}
.card.sub-slot .slotlock{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);font-size:20px;opacity:.9}
/* the starter that would come off shows the OUT ghost while a legal card is lifted */
.card.sub-slot.willdrop{outline:1px dashed rgba(255,255,255,.35)}
.card.sub-slot .outflag{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-family:var(--font);font-size:11px;letter-spacing:1px;color:#D7DDE3;background:rgba(142,153,166,.85);padding:1px 6px;border-radius:8px;z-index:3}
/* bench fan in SUB mode: every card live + position-accented (no grey), so the kit is legible */
.fan[data-live="sub"] .handcard{filter:none}
.fan[data-live="sub"] .apip{opacity:1;filter:none}
.fan[data-live="sub"] .handcard.live .spine{background:var(--acc);box-shadow:0 0 9px var(--acc)}
.fan[data-live="sub"] .handcard.live{box-shadow:0 12px 26px rgba(0,0,0,.6),0 0 0 1.5px var(--acc),0 0 22px color-mix(in srgb, var(--acc) 28%, transparent)}
.fan[data-live="sub"] .handcard.lifted{box-shadow:0 26px 48px rgba(0,0,0,.7),0 0 0 2px var(--acc),0 0 40px color-mix(in srgb, var(--acc) 50%, transparent)}
.fan-empty{position:absolute;inset:auto 0 40px;text-align:center;font-family:var(--font);letter-spacing:2px;color:var(--ink-dim);opacity:.5;font-size:18px}
/* DUAL-USE COST: lifted card's ability pips grey out (forfeit), the player .stat stays bright */
.subfan.lifting .handcard.lifted .abrail .apip{opacity:.4;filter:grayscale(.75)}
.subfan.lifting .handcard.lifted .abrail .apip::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:2px;background:rgba(255,209,92,.85);transform:rotate(-16deg)}
.handcard .onflag{position:absolute;bottom:5px;left:5px;font-family:var(--font);font-size:11px;letter-spacing:.5px;color:#2a1c00;background:var(--gold);padding:1px 6px;border-radius:7px;z-index:5}
/* tray hint + ATTACK rail (skip/continue) */
.subhint{position:relative;z-index:4;text-align:center;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--ink-dim);margin:2px 0 6px;text-transform:uppercase}
.commit.subdone{margin-top:2px}
.commit.subdone .subtally{font-size:11px;letter-spacing:3px;margin-left:6px;color:#2a1c00;opacity:.85}
body.hand-lifting .commit.subdone{opacity:.55}
/* inline confirm chip (the irreversible-sub beat; cancellable, snappier than a modal) */
.subchip{display:flex;align-items:center;gap:8px;height:52px;padding:0 10px;border-radius:var(--r12);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--font);font-weight:700;font-size:14px;margin-bottom:8px;animation:subchipUp .18s cubic-bezier(.2,.8,.25,1)}
@keyframes subchipUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.subchip .sc-out{color:var(--them)} .subchip .sc-swap{color:var(--ink-dim);font-size:18px} .subchip .sc-in{color:var(--def);flex:1}
.subchip .sc-no,.subchip .sc-yes{width:36px;height:36px;border-radius:50%;border:0;font-size:16px;font-weight:800;flex:0 0 auto}
.subchip .sc-no{background:rgba(255,255,255,.12);color:var(--ink-dim)}
.subchip .sc-yes{background:var(--save);color:#04140b}
.subchip .sc-yes:active{transform:translateY(1px)}
/* one-shot run-on flash on a freshly-subbed starter */
.card.sub-slot.runon{animation:subRunOn .28s cubic-bezier(.2,.8,.25,1)}
@keyframes subRunOn{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}

/* ===== HALF TIME — broadcast split interstitial ===== */
.halftime{position:relative;width:100%;max-width:430px;margin:0 auto;height:100dvh;z-index:50;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#04100e}
.ht-panel{position:absolute;top:0;bottom:0;width:50.5%}
.ht-panel.you{left:0;background:linear-gradient(115deg, rgba(215,162,74,.5), rgba(8,26,64,.96) 72%);animation:htWipeL .5s cubic-bezier(.2,.85,.25,1) both}
.ht-panel.them{right:0;background:linear-gradient(245deg, rgba(142,153,166,.5), rgba(54,12,12,.96) 72%);animation:htWipeR .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes htWipeL{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes htWipeR{from{transform:translateX(100%)}to{transform:translateX(0)}}
.ht-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);z-index:2;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent);box-shadow:0 0 14px rgba(255,255,255,.4)}
.ht-body{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;
  animation:htBody .5s .28s both}
@keyframes htBody{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.ht-label{font-family:var(--font);font-size:46px;letter-spacing:7px;color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.75)}
.ht-score{display:flex;align-items:center;gap:20px}
.ht-side{display:flex;align-items:center;gap:11px}
.ht-crest{font-family:var(--font);font-weight:700;font-size:18px;letter-spacing:3px;color:var(--ink)}
.ht-num{font-family:var(--font);font-size:66px;line-height:.85}
.ht-side.you .ht-num{color:#ECE3CF;text-shadow:0 0 26px rgba(215,162,74,.65)}
.ht-side.them .ht-num{color:#D7DDE3;text-shadow:0 0 26px rgba(142,153,166,.55)}
.ht-dash{font-family:var(--font);font-size:40px;color:rgba(255,255,255,.35)}
.ht-notes{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:2px}
.ht-note{display:flex;align-items:center;gap:8px;font-family:var(--font);font-weight:700;font-size:12px;
  letter-spacing:2px;color:var(--ink-dim);text-transform:uppercase}
.ht-note svg{width:15px;height:15px;fill:var(--save)}
.ht-note:last-child svg{fill:var(--gold)}
.commit.secondhalf{max-width:300px;margin-top:10px}

/* ===== DESKTOP / WIDE VIEWPORTS — keep the mobile column at a reasonable width, centred, with an
   ambient (blurred) pitch backdrop filling the surround + a soft device frame. Mobile (<480px) is untouched. ===== */
@media (min-width: 480px) {
  body{background:#03080f}
  /* full-bleed blurred-pitch ambience behind the centred app, so the desktop surround isn't dead black */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:#03080f url(pitch.jpg) center / cover no-repeat;
    filter:blur(36px) brightness(.3) saturate(.85);transform:scale(1.14)}
  #app{display:flex;align-items:center;justify-content:center}
  /* every screen root becomes a centred portrait card, height-capped so it keeps phone proportions */
  .stage,.home,.setup,.halftime{height:min(100dvh,920px);max-height:100dvh;border-radius:30px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), 0 0 0 7px rgba(0,0,0,.28)}
  /* the persistent pitch behind the board matches the framed column exactly */
  #pitchbg{height:min(100dvh,920px);top:50%;bottom:auto;transform:translate(-50%, calc(-50% - var(--pitch-up)));border-radius:30px}
}

/* ===== DESKTOP BROADCAST RAILS — desktop-only chrome, existing tokens only.
   Mobile (<480) + Mid (480-1079): rails display:none -> board byte-identical. Wide (>=1080): rails fill the gutters. ===== */
#feedrail, #inforail{display:none}
body:not(.has-rails) #feedrail, body:not(.has-rails) #inforail{display:none !important}
@media (min-width: 1080px){
  .has-rails #feedrail, .has-rails #inforail{display:flex;flex-direction:column;gap:14px;
    position:fixed;top:clamp(16px,4vh,56px);bottom:clamp(16px,4vh,56px);
    width:auto;max-width:380px;z-index:2;pointer-events:none;
    font-family:var(--font);color:var(--ink)}
  /* 215px = half the 430px column; 24px gutter gap. margin pins the rail to the column edge. */
  .has-rails #feedrail{right:calc(50% + 215px + 24px);left:24px;margin-left:auto}
  .has-rails #inforail{left:calc(50% + 215px + 24px);right:24px;margin-right:auto}
  .has-rails .rail-hd, .has-rails .feed-body, .has-rails .scorecard, .has-rails .sheets{pointer-events:auto}
}
@media (min-width: 1440px){
  .has-rails #feedrail, .has-rails #inforail{max-width:420px;gap:16px}
  .has-rails .sc-score b{font-size:60px}
  .has-rails .frow .ftext{font-size:13.5px}
}
/* shared dark-glass panel — matches the floodlit board */
.rail-hd, .feed-body, .scorecard, .sheet{
  background:linear-gradient(180deg, rgba(14,20,26,.92), rgba(8,12,16,.92));
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r16);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.rail-hd{display:flex;align-items:center;gap:10px;padding:11px 14px;flex:0 0 auto;
  font-family:var(--font);font-weight:700;letter-spacing:.12em;font-size:12px;text-transform:uppercase;color:var(--ink)}
.rail-hd .live{display:inline-flex;align-items:center;gap:6px;color:var(--them);font-size:11px;letter-spacing:.16em}
.rail-hd .live i{width:7px;height:7px;border-radius:50%;background:var(--them);box-shadow:0 0 8px var(--them);animation:none}
@keyframes railPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
/* left: commentary feed */
.feed-body{flex:1;min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin}
.feed-body::-webkit-scrollbar{width:6px}
.feed-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.frow{display:grid;grid-template-columns:32px 20px 1fr auto;align-items:center;gap:8px;padding:7px 8px;border-radius:10px}
.frow .fmin{font-family:var(--font);font-size:15px;color:var(--ink-dim);letter-spacing:.04em;text-align:right}
.frow .ficon{font-size:14px;text-align:center}
.frow .ftext{font-size:13px;line-height:1.25;color:var(--ink)}
.frow.dim .ftext, .frow.dim .fmin{color:var(--ink-dim)}
.frow.stop .ficon{filter:drop-shadow(0 0 4px var(--save))}
.frow .fscore{font-family:var(--font);font-size:16px;padding:1px 8px;border-radius:8px;background:rgba(255,255,255,.06);letter-spacing:.06em}
.frow.goal{border:1px solid rgba(215,162,74,.35);border-left:3px solid var(--hero);
  background:linear-gradient(90deg, rgba(215,162,74,.16), transparent 70%);box-shadow:0 0 14px rgba(215,162,74,.18) inset}
.frow.goal.them{border:1px solid rgba(142,153,166,.35);border-left:3px solid var(--them);
  background:linear-gradient(90deg, rgba(142,153,166,.16), transparent 70%);box-shadow:0 0 14px rgba(142,153,166,.18) inset}
.frow.goal .ftext{font-family:var(--font);font-weight:700}
.frow.goal .ficon{font-size:16px;filter:drop-shadow(0 0 6px var(--gold))}
.frow.goal.you .fscore{color:var(--hero)} .frow.goal.them .fscore{color:var(--them)}
.fdiv{display:flex;align-items:center;justify-content:center;margin:7px 4px 4px}
.fdiv::before, .fdiv::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.fdiv::before{margin-right:10px} .fdiv::after{margin-left:10px}
.fdiv span{font-family:var(--font);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  padding:3px 12px;background:rgba(255,255,255,.05);border-radius:20px;border:1px solid rgba(255,255,255,.07);white-space:nowrap}
.fdiv.you span{color:var(--hero)} .fdiv.them span{color:var(--them)}
/* right: scoreboard + team sheets */
.scorecard{padding:14px 16px;flex:0 0 auto}
.sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sc-clock{font-family:var(--font);font-size:26px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px}
.sc-clock .livedot{width:8px;height:8px;border-radius:50%;background:var(--them);box-shadow:0 0 8px var(--them);animation:none}
.sc-round{font-family:var(--font);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}
.sc-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.sc-crest{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.08em;padding:6px 10px;border-radius:10px;display:inline-block}
.sc-crest.you{color:var(--hero);background:rgba(215,162,74,.14);border:1px solid rgba(215,162,74,.4)}
.sc-crest.them{color:var(--them);background:rgba(142,153,166,.14);border:1px solid rgba(142,153,166,.4)}
.sc-team.you{text-align:left} .sc-team.them{text-align:right}
.sc-team.att .sc-crest{box-shadow:0 0 14px currentColor}
.sc-score{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font);font-size:52px;line-height:1}
.sc-score b.you{color:var(--hero)} .sc-score b.them{color:var(--them)}
.sc-score b.lead{text-shadow:0 0 16px currentColor}
.sc-score .sc-dash{color:var(--ink-dim);font-size:34px}
.sc-prog{display:flex;gap:3px;margin-top:14px}
.sc-prog .pip{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.sc-prog .pip.done{background:rgba(255,255,255,.32)}
.sc-prog .pip.now{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.sc-prog .pip.split{margin-right:9px}
.sc-prog .pip.split::after{content:'';position:absolute;right:-6px;top:-3px;bottom:-3px;width:1px;background:rgba(255,209,92,.5)}
.sc-prog .pgoal{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%}
.sc-prog .pgoal.you{background:var(--you);box-shadow:0 0 6px var(--you)}
.sc-prog .pgoal.them{background:var(--them);box-shadow:0 0 6px var(--them)}
.sc-poss{margin-top:10px;text-align:center;font-family:var(--font);font-weight:700;font-size:10.5px;letter-spacing:.16em}
.sc-poss.you{color:var(--hero)} .sc-poss.them{color:var(--them)}
.sheets{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto}
.sheet{padding:8px}
.ts-hd{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;font-family:var(--font);font-weight:700;font-size:12px;
  letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:6px}
.ts-hd b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-crest{font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:7px;flex:0 0 auto}
.sheet.you .ts-crest{color:var(--hero);background:rgba(215,162,74,.14)}
.sheet.them .ts-crest{color:var(--them);background:rgba(142,153,166,.14)}
.sheet.you .ts-hd b{color:var(--hero)} .sheet.them .ts-hd b{color:var(--them)}
.ts-flag{flex:0 0 auto;font-size:8px;letter-spacing:.1em;padding:2px 6px;border-radius:6px;font-weight:700}
.ts-flag.att{color:var(--gold);background:rgba(255,209,92,.12);box-shadow:0 0 8px rgba(255,209,92,.25)}
.ts-flag.def{color:var(--ink-dim);background:rgba(255,255,255,.05)}
.ts-row{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:9px;padding:5px 8px;border-radius:9px}
.sheet.you .ts-row{border-left:2px solid rgba(215,162,74,.5);background:linear-gradient(90deg, rgba(215,162,74,.05), transparent 60%)}
.sheet.them .ts-row{border-left:2px solid rgba(142,153,166,.5);background:linear-gradient(90deg, rgba(142,153,166,.05), transparent 60%)}
.ts-row.ts-gk{background:rgba(61,220,132,.05) !important}
.ts-art{width:22px;height:22px;border-radius:6px;background-size:cover;background-position:center top;background-color:rgba(255,255,255,.06);flex:0 0 auto}
.ts-art.gk{border-radius:50%}
.ts-art.noart{display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:11px;color:var(--ink-dim)}
.ts-name{font-family:var(--font);font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ts-pos{font-size:9px;letter-spacing:.1em;color:var(--ink-dim)}


/* ============================================================================
   CLEAN RE-SKIN (FotMob + Sorare) — component rewrites override the old neon by source order.
   Layouts/markup unchanged; only palette / surface / typography.
   ============================================================================ */
/* ===================== CARDS (.card / .dcard / .marker / .keeper / .wallcard) ===================== */
.card{position:relative;width:100px;height:140px;border-radius:var(--r12);overflow:hidden;
  background:var(--s-100);background-size:cover;background-position:center top;background-color:#16191a;
  border:1px solid var(--line);box-shadow:var(--el-card);            /* was 0 0 Npx hue glow */
  transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease;will-change:transform}
.card .grad{position:absolute;inset:auto 0 0 0;height:54%;border-radius:0 0 var(--r12) var(--r12);
  background:linear-gradient(to top,rgba(7,11,10,.92),rgba(7,11,10,0))}
.card .spine{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;box-shadow:none}
.card.you-card .spine{background:var(--you)}    .card.them-card .spine{background:var(--them)}   /* glow removed */
.card .surname{position:absolute;left:9px;right:8px;bottom:24px;
  font:600 13px/1.1 var(--font);letter-spacing:.01em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* SELECTION = ring + accent border (was 26px halo). NB: use background-COLOR, not the `background`
   shorthand — the shorthand resets background-size:cover -> auto and blows the card photo up. */
.card.selected,.card.lifted,.sel{box-shadow:0 0 0 1.5px var(--you),var(--el-card)!important;
  border-color:var(--you);background-color:var(--you-tint)}
.sel.atk-sel{box-shadow:0 0 0 1.5px var(--gold),var(--el-card)!important;border-color:var(--gold)}
.card.danger{border-color:rgba(142,153,166,.5);box-shadow:var(--el-card);animation:none}  /* no pulse */

.dcard{width:84px;height:118px;border-radius:var(--r8);background:var(--s-100);
  border:1px solid var(--line);box-shadow:var(--el-1)}
.dcard .spine{background:var(--you);box-shadow:none}
.dcard .surname{font:600 12px/1.1 var(--font)}
.dcard .role{color:#cfe0f8;background:var(--s-200);box-shadow:inset 0 0 0 1px var(--line)}
.dcard.armed{transform:translateY(-14px) scale(1.06);box-shadow:0 0 0 1.5px var(--you),var(--el-3)} /* was 30px glow */
.dcard .nomark{background:var(--them);box-shadow:var(--el-1)} .dcard .nomark.fwd{background:var(--gold);color:#1b1408}

.marker{box-shadow:var(--el-2);border:1px solid var(--line)}
.marker .spine{background:var(--def);box-shadow:none}                /* cyan glow removed */
.keeper{border-radius:var(--r16);box-shadow:var(--el-3);
  border:1px solid color-mix(in srgb,var(--save) 45%,transparent)}   /* was 34px green glow */
.keeper.them-keeper{border-color:color-mix(in srgb,var(--them) 45%,transparent)}
.keeper.active{box-shadow:0 0 0 1.5px var(--save),var(--el-3)}
.keeper-wall{background:linear-gradient(90deg,transparent,var(--save),transparent);box-shadow:none;opacity:.7}
.keeper-glove{background:var(--s-200);box-shadow:inset 0 0 0 1px var(--line)} .keeper-glove svg{fill:var(--save)}
.wallcard{box-shadow:var(--el-1);border:1px solid var(--line)} .wallcard .wspine{background:var(--them);box-shadow:none}
.wallcard.kp{border-color:color-mix(in srgb,var(--save) 45%,transparent)}
.wall-label{font:600 8.5px/1 var(--font);letter-spacing:.06em;color:var(--ink-faint)}
.card.runner.free{box-shadow:var(--el-3);border:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent)}

/* ===================== STAT CHIP (3 loud colours -> 1 calm chip + small marker) ===================== */
.stat{position:absolute;right:7px;bottom:7px;display:inline-flex;align-items:center;gap:4px;
  min-width:30px;height:24px;padding:0 7px;border-radius:var(--r8);
  background:var(--s-200);border:1px solid var(--line);box-shadow:none;       /* per-type glow gone */
  color:var(--ink);font:700 14px/1 var(--font-num);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:0}
.stat svg{width:11px;height:11px;filter:none}
.stat.atk,.stat.def,.stat.save{color:var(--ink)}                 /* number ALWAYS neutral-white */
.stat.atk svg{fill:var(--atk)} .stat.def svg{fill:var(--def)} .stat.save svg{fill:var(--save)} /* hue only on glyph */
.stat::before{content:"";width:2px;align-self:stretch;border-radius:2px;margin-right:1px}  /* 2px type edge-marker */
.stat.atk::before{background:var(--atk)} .stat.def::before{background:var(--def)} .stat.save::before{background:var(--save)}

/* ===================== ABILITY PIPS (.apip) — neutral chip, coloured glyph, live = ring not pulse ===================== */
.apip{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:22px;min-height:30px;border-radius:7px;
  background:var(--s-150);border:1px solid var(--line);box-shadow:none;
  color:var(--ink-dim);opacity:.45;filter:none;animation:none;          /* apipPulse/pipPulse gone */
  transition:opacity .16s ease,background .16s ease,border-color .16s ease}
.apip svg{width:14px;height:14px;display:block}
.apip b{font:700 11px/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:0}
.apip.goal svg{fill:var(--atk)} .apip.assist svg{fill:var(--gold)} .apip.lmt svg{fill:var(--save)} .apip.otl svg{fill:var(--def)}
.apip.live{opacity:1;color:var(--ink);background:var(--s-200);border-color:var(--line-strong)}
.apip.goal.live  {border-color:color-mix(in srgb,var(--atk) 60%,transparent)}
.apip.assist.live{border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.apip.lmt.live   {border-color:color-mix(in srgb,var(--save) 60%,transparent)}
.apip.otl.live   {border-color:color-mix(in srgb,var(--def) 60%,transparent)}

/* ===================== PANELS / DESKTOP BROADCAST RAILS (flat rows + hairlines) ===================== */
.scorecard,.sheet,.feed-body,.halftime{background:var(--s-100);border:1px solid var(--line);
  border-radius:var(--r16);box-shadow:var(--el-2);backdrop-filter:blur(8px)}   /* dark-glass+glow -> matte */
.rail-hd{background:var(--s-50);border-bottom:1px solid var(--line);color:var(--ink-faint);
  font:600 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:10px 14px}
.frow{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;
  border-bottom:1px solid var(--line);transition:background .14s ease}        /* one container, hairline rows */
@media (hover:hover){ .frow:hover{background:var(--s-50)} }   /* hover gated: no sticky hover after iOS taps */
.frow.goal{box-shadow:inset 2px 0 0 var(--good);background:var(--s-50)}        /* goal row: left mark, no green glow */
.frow .min{color:var(--ink-faint);font-variant-numeric:tabular-nums;min-width:34px}
.fdiv{height:1px;background:var(--line);border:0;margin:0}
.sc-score{font:700 22px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sc-prog{display:flex;gap:5px}
.sc-prog i,.sc-prog .pip{width:6px;height:6px;border-radius:999px;background:var(--ink-ghost);box-shadow:none}
.sc-prog i.on,.sc-prog .pip.on{background:var(--you)}                          /* filled = team colour, no glow/pulse */
.ts-row{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line);
  font:500 14px/1.3 var(--font);color:var(--ink-dim)}
@media (hover:hover){ .ts-row:hover{background:var(--s-50)} }
.ts-row.you .ts-flag{background:var(--you)} .ts-row.them .ts-flag{background:var(--them)}
.ts-flag{width:18px;height:13px;border-radius:2px;box-shadow:none;outline:1px solid var(--line)} /* crest is the colour */

/* ===================== COMMIT BUTTONS ===================== */
.commit{position:relative;width:100%;height:56px;border:0;border-radius:var(--r12);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--you);color:#fff;box-shadow:var(--el-2);                     /* was blue gradient + glow */
  font:700 15px/1 var(--font);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  transition:background .14s ease,box-shadow .14s ease,transform .08s ease}
@media (hover:hover){ .commit:hover{background:#a8f250} } .commit:active{transform:translateY(1px);background:var(--you-deep)}
.commit:disabled{background:var(--s-200);color:var(--ink-ghost);box-shadow:none}
.commit.atk,.commit.gold{background:var(--gold);color:#1b1408}                /* attack confirm: flat gold, no glow */
@media (hover:hover){ .commit.atk:hover,.commit.gold:hover{background:#F0C778} }
.commit.ghost{background:transparent;color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--line)}
.commit .pips{display:flex;gap:5px;margin-left:4px}
.commit .pips i{width:7px;height:7px;border-radius:999px}
.commit .pips i.c{background:var(--ink-faint)} .commit .pips i.o{background:#fff;box-shadow:none} /* glow removed */
.passrail{background:var(--s-50);border:1px solid var(--line);box-shadow:none} .passrail svg{fill:var(--ink-dim)}

/* ===================== SCOREBAR (broadcast scorebug) ===================== */
.scorebar{position:relative;z-index:6;margin:12px auto 0;height:44px;width:max-content;flex:0 0 auto;
  display:flex;align-items:stretch;overflow:hidden;border-radius:var(--r12);
  background:var(--s-100);border:1px solid var(--line);box-shadow:var(--el-2);backdrop-filter:blur(8px)}
.sb-clock{display:flex;align-items:center;justify-content:center;padding:0 12px;min-width:48px;
  background:var(--s-50);color:var(--gold);                                    /* gold clock-of-record, no glow */
  font:600 14px/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sb-clock.live{color:var(--gold)} /* keep gold; live cue is the breathe-dot, not a colour flip */
.sb-team b{font:700 14px/1 var(--font);letter-spacing:.01em;color:var(--ink)}
.sb-tab{width:3px;height:20px;border-radius:2px;flex:0 0 auto;box-shadow:none}
.sb-tab.you{background:var(--you)} .sb-tab.them{background:var(--them)}        /* glow removed */
.sb-score{display:flex;align-items:center;gap:9px;padding:0 16px;
  font:700 26px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  background:var(--s-50);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line);text-shadow:none}
.sb-score .you{color:#ECE3CF} .sb-score .them{color:#D7DDE3} .sb-score .dash{color:var(--ink-faint);font-size:20px}

/* ===================== FAN HAND + LIFTED CARD (40px halos -> one clean ring per window) ===================== */
.fan .handcard{border:1px solid var(--line);box-shadow:var(--el-1);
  transition:transform .16s ease,box-shadow .16s ease}
.fan .handcard.dead{filter:grayscale(.5) brightness(.62)}
.fan[data-live] .handcard.live .spine{background:var(--acc);box-shadow:none}
.fan[data-live="goal"]   .handcard.live{border-color:color-mix(in srgb,var(--atk) 55%,transparent)}
.fan[data-live="assist"] .handcard.live{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.fan[data-live="lmt"]    .handcard.live,
.fan[data-live="otl"]    .handcard.live{border-color:color-mix(in srgb,var(--save) 55%,transparent)}
.fan.lifting .handcard.live:not(.lifted){filter:brightness(.78)}
.fan[data-live="goal"]   .handcard.lifted{transform:translateY(-22px) scale(1.06);box-shadow:0 0 0 1.5px var(--atk),var(--el-3)}
.fan[data-live="assist"] .handcard.lifted{transform:translateY(-22px) scale(1.06);box-shadow:0 0 0 1.5px var(--gold),var(--el-3)}
.fan[data-live="lmt"]    .handcard.lifted,
.fan[data-live="otl"]    .handcard.lifted{transform:translateY(-22px) scale(1.06);box-shadow:0 0 0 1.5px var(--save),var(--el-3)}
.fan[data-live="goal"] .handcard.lifted .apip.goal{background:var(--atk);color:#fff;opacity:1}  /* armed pip = solid, was glow */
.fan[data-live="goal"] .handcard.lifted .apip.goal svg{fill:#fff}
.abrail{background:var(--s-50);border-top:1px solid var(--line);box-shadow:none}

/* ===================== SELECTION / LANE / TARGET HALOS — one static ring language ===================== */
.lane.legal::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:148px;border-radius:var(--r16);z-index:0;
  background:var(--you-tint);box-shadow:0 0 0 2px var(--you);animation:none}   /* haloPulse+26px glow gone */
.lane.legal.drop-hover::before{box-shadow:0 0 0 2.5px var(--you);background:var(--you-tint)}
body.hand-lifting .lane.assist-target::before,
body.hand-lifting .lane.lmt-target::before,
.lane.pump-target::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:148px;border-radius:var(--r16);z-index:0;animation:none}
body.hand-lifting .lane.assist-target::before{box-shadow:0 0 0 2px var(--gold);background:var(--gold-tint)}
body.hand-lifting .lane.lmt-target::before   {box-shadow:0 0 0 2px var(--save);background:var(--save-tint)}
.lane.pump-target::before                    {box-shadow:0 0 0 2px var(--atk);background:var(--atk-tint)}
.lane.empty .slot{border:1.5px dashed var(--line-strong);color:var(--ink-faint)}
.lane.empty.drop-hover .slot{border-color:var(--you);box-shadow:0 0 0 1.5px var(--you)}
/* tally pips: state by fill, not infinite pulse */
.pip.cov{background:var(--def);box-shadow:none} .pip.empty{background:var(--line-strong)}
.pip.open{background:var(--threat);box-shadow:0 0 0 2px color-mix(in srgb,var(--threat) 35%,transparent);animation:none}
/* danger column + chevrons: static, no fall loop */
.danger{animation:none} .lane.open .danger{opacity:.5} .chev,.chev.c1,.chev.c2,.chev.c3{filter:none;animation:none}

/* ===================== HALFTIME SPLIT — two matte identity panels, tabular score ===================== */
.halftime{background:var(--bg)}
.ht-panel.you,.halftime .ht-you{background:var(--you-tint);border-left:3px solid var(--you);box-shadow:none}
.ht-panel.them,.halftime .ht-them{background:var(--them-tint);border-left:3px solid var(--them);box-shadow:none}
.ht-seam{background:var(--line-strong)}                                        /* glowing seam -> hairline */
.ht-label{font:600 11px/1 var(--font);letter-spacing:.06em;color:var(--ink-faint);text-shadow:none}
.ht-crest{font:700 17px/1 var(--font);letter-spacing:.01em;color:var(--ink)}
.ht-num,.ht-score{font:700 56px/.9 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:none}
.ht-side.you .ht-num,.ht-you .ht-score{color:#ECE3CF} .ht-side.them .ht-num,.ht-them .ht-score{color:#D7DDE3}
.ht-dash{font:700 38px/1 var(--font);color:var(--ink-faint)}
.ht-note svg{fill:var(--good)} .ht-note:last-child svg{fill:var(--gold)}

/* ===================== SUB STEP ===================== */
.subslot,.sub-slot{background:var(--s-50);border:none;border-radius:var(--r12);box-shadow:none}   /* no resting dash — the card art IS the slot; .willdrop keeps the mid-drag affordance */
.sub-target{border:1.5px solid var(--def);background:var(--def-tint);box-shadow:0 0 0 1.5px var(--def);animation:none} /* was cyan halo */
.subslot.locked,.locked{opacity:.5;filter:grayscale(.4);border-color:var(--line);color:var(--ink-ghost)}
.subchip{background:var(--s-200);border:1px solid var(--line);color:var(--ink-dim);box-shadow:none;
  font:700 12px/1 var(--font);letter-spacing:.01em}

/* ===================== RESULT / PHASE / HOME ===================== */
.result{background:rgba(7,11,10,.86);backdrop-filter:blur(3px)}
.result .big{font:700 50px/1 var(--font-display);letter-spacing:-.01em;text-shadow:none}
.result .big.goal{color:var(--good);text-shadow:0 2px 14px rgba(0,0,0,.5)}     /* legibility shadow only, no green glow */
.result .big.no{color:var(--ink-dim)}
.result .reason,.reason{color:var(--ink-faint);font:600 12px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase}
.phase{padding:5px 14px;border-radius:999px;background:var(--s-150);border:1px solid var(--line);box-shadow:none;animation:none}
.phase.atk{background:var(--gold-tint)}
.phase .verb{font:700 13px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.phase.atk .verb{color:#ecd9a8}
.phase .tag{font:700 10px/1 var(--font);letter-spacing:.04em;color:var(--you);background:var(--you-tint);border:1px solid var(--line);padding:2px 7px;border-radius:6px}
.phase.atk .tag{color:var(--gold);background:var(--gold-tint)}
.home,.setup{background:radial-gradient(120% 70% at 50% -10%,#1a1f1e 0%,#121615 38%,var(--bg) 72%,var(--bg-deep) 100%)}
.wordmark b,.home .wordmark b{font:800 56px/1 var(--font);letter-spacing:1px;color:#fff}     /* 4-6px tracking -> 1px */
.wordmark span,.home .wordmark span{font:700 12px/1 var(--font);letter-spacing:3px;color:var(--you)}
.deckbtn{background:var(--s-100);border:1px solid var(--line);border-radius:var(--r16);box-shadow:var(--el-2);
  color:var(--ink);font:700 15px/1 var(--font);letter-spacing:.01em}
.deckbtn:active{transform:scale(.98);border-color:var(--you);box-shadow:0 0 0 1.5px var(--you)}
.deckbtn[disabled]{opacity:.55;pointer-events:none;letter-spacing:.06em}   /* PvP halftime: WAITING FOR OPPONENT… */

/* ===== RAIL RECONCILE — re-assert my actual rail markup over the rewrite's assumed structure (source order wins) ===== */
.frow{display:grid;grid-template-columns:32px 20px 1fr auto;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;border-bottom:0;background:transparent;box-shadow:none}
@media (hover:hover){ .frow:hover{background:var(--s-50)} }
.frow.goal{border:1px solid var(--line);border-left:3px solid var(--you);background:var(--you-tint);box-shadow:none}
.frow.goal.them{border:1px solid var(--line);border-left:3px solid var(--them);background:var(--them-tint);box-shadow:none}
.frow .ficon,.frow.goal .ficon,.frow.stop .ficon{filter:none}
.frow .fmin{font-family:var(--font);font-size:13px;color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}
.frow .ftext{font-size:13px;line-height:1.25;color:var(--ink)} .frow.goal .ftext{font-weight:700}
.frow.dim .ftext,.frow.dim .fmin{color:var(--ink-faint)}
.frow .fscore{font-family:var(--font);font-variant-numeric:tabular-nums;background:var(--s-200);box-shadow:none;color:var(--ink)}
.frow.goal.you .fscore{color:var(--you)} .frow.goal.them .fscore{color:var(--them)}
.fdiv{display:flex;align-items:center;justify-content:center;margin:7px 4px 4px;height:auto;background:transparent;border:0}
.fdiv span{font-family:var(--font);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding:3px 12px;background:var(--s-100);border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.fdiv.you span{color:var(--you)} .fdiv.them span{color:var(--them)}
.fdiv::before,.fdiv::after{content:'';flex:1;height:1px;background:var(--line)}
.fdiv::before{margin-right:10px} .fdiv::after{margin-left:10px}
.ts-row{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:9px;padding:5px 8px;border-radius:9px;border-bottom:0;color:var(--ink-dim)}
.sheet.you .ts-row{border-left:2px solid color-mix(in srgb,var(--you) 55%,transparent);background:var(--you-tint)}
.sheet.them .ts-row{border-left:2px solid color-mix(in srgb,var(--them) 55%,transparent);background:var(--them-tint)}
.ts-row.ts-gk{background:var(--s-50)!important}
.ts-name{font-family:var(--font);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-pos{font-size:9px;letter-spacing:.06em;color:var(--ink-faint)}
.ts-art{width:22px;height:22px;border-radius:6px;background-size:cover;background-position:center top;background-color:var(--s-200)}
.ts-art.gk{border-radius:50%}
.ts-flag{flex:0 0 auto;width:auto;height:auto;outline:0;font-size:8px;letter-spacing:.06em;padding:2px 6px;border-radius:6px;font-weight:700}
.ts-flag.att{color:var(--gold);background:var(--gold-tint);box-shadow:none}
.ts-flag.def{color:var(--ink-dim);background:var(--s-100)}
.ts-row.you .ts-flag.att,.ts-row.them .ts-flag.att{color:var(--gold);background:var(--gold-tint)}
.sc-prog{display:flex;gap:3px;margin-top:14px}
.sc-prog .pip{position:relative;flex:1;height:4px;width:auto;border-radius:2px;background:var(--s-200);box-shadow:none}
.sc-prog .pip.done{background:var(--ink-ghost)} .sc-prog .pip.now{background:var(--gold);box-shadow:none}
.sc-prog .pip.split{margin-right:9px}
.sc-prog .pgoal{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%}
.sc-prog .pgoal.you{background:var(--you);box-shadow:none} .sc-prog .pgoal.them{background:var(--them);box-shadow:none}
.sc-crest.you{color:var(--you);background:var(--you-tint);border:1px solid var(--line)}
.sc-crest.them{color:var(--them);background:var(--them-tint);border:1px solid var(--line)}
.sc-team.att .sc-crest{box-shadow:none;border-color:currentColor}
.sc-clock .livedot{background:var(--them);box-shadow:none}
.rail-hd .live{color:var(--them)} .rail-hd .live i{background:var(--them);box-shadow:none}


/* ===== MOTION CALM — one sanctioned live-dot breathe; everything else still ===== */
.hint .dot{animation:none}
.rail-hd .live i,.sc-clock .livedot,.sb-clock.live::after{animation:railBreathe 2.4s ease-in-out infinite}
@keyframes railBreathe{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}


/* ============================================================================
   VINTAGE BROADCAST "CEEFAX NIGHT FEED" — texture overlay + chrome (appended; overrides the clean skin by source order)
   ============================================================================ */
/* ============ ANALOG TEXTURE — four faint full-viewport layers, premium=stacking-faints-not-one-strong-slider ============
   Every layer position:fixed; pointer-events:none. Tasteful baseline opacities (NOT VHS). */
.bc-overlays>*{position:fixed;inset:0;pointer-events:none}

/* warm analog cast — the amber WHISPER (sepia>0.10 = Instagram; this is ~3.5% multiply) */
.bc-warm{z-index:8998;background:rgba(255,176,92,0.035);mix-blend-mode:multiply}

/* CRT vignette — felt at the edges, never reaches content */
.bc-vignette{z-index:8999;
  background:radial-gradient(ellipse 150% 150% at 50% 50%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.35) 100%);
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,0.55)}

/* scanlines — 1px line / 3px pitch, tasteful 0.045 (pulled back from the lens's 0.05 to stay premium) */
.bc-scan{z-index:9000;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.045) 2px, rgba(0,0,0,0.045) 3px)}

/* slow archival ROLL-BAR — a 9s bright-band drift (NOT flicker) */
.bc-roll{z-index:9001;
  background:linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0) 100%);
  background-size:100% 30vh;animation:bc-roll 9s linear infinite}
@keyframes bc-roll{from{background-position:0 -30vh}to{background-position:0 130vh}}

/* monochrome film GRAIN — SVG fractalNoise; inset:-5% so the (static) tile never exposes an edge.
   # encoded %23, % encoded %25; explicit 180x180 + rect 180 (Chromium decode is strict). */
.bc-grain{inset:-5%!important;z-index:9002;opacity:0.06;mix-blend-mode:overlay;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55'/%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* warm grade on the app/stage root — muted, never punchy */
.stage,#app{filter:sepia(0.06) saturate(0.94) contrast(0.99)}

/* MOBILE GUARD — drop scanline to 0.03 (avoid retina moiré), shrink vignette spread so it doesn't eat the small screen */
@media (max-width:600px){
  .bc-scan{background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px)}
  .bc-vignette{box-shadow:inset 0 0 90px 20px rgba(0,0,0,0.5)}
  .bc-grain{opacity:0.045}
}

/* MOTION SAFETY — kill the only moving layer under reduced-motion */
@media (prefers-reduced-motion:reduce){.bc-roll{animation:none;opacity:0}}

/* KILL-SWITCH — add class .bc-plain to <body> to drop all texture + the grade (eye-strain users) */
body.bc-plain .bc-overlays{display:none}
body.bc-plain .stage, body.bc-plain #app{filter:none}
/* ============================================================
   MATCHDAY — VINTAGE BROADCAST "CEEFAX NIGHT FEED" SKIN
   RE-SKIN ONLY. Drop in at the END of style.css. Same class names + tokens.
   (the @import, --font-display swap, vintage tokens, and .bc-* texture
    live in their own deliverables; this block is the broadcast CHROME.)
   ============================================================ */

/* ===================== 1. MOBILE SCOREBUG .scorebar ===================== */
/* boxy CG lower-third: [gold clock] | kit | YOU ABBR | skewed SCORE cell | OPP ABBR | kit */
.scorebar{position:relative;z-index:6;background:var(--vint-plate);
  border:1px solid var(--line-strong);
  border-top:2px solid var(--vint-rule);border-bottom:2px solid var(--vint-rule);
  border-radius:3px;box-shadow:3px 3px 0 var(--vint-shadow), var(--el-1);overflow:hidden}
.sb-clock{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;
  color:var(--vint-ink);background:var(--gold);
  font-variant-numeric:tabular-nums;border-radius:0}
.sb-tab{border-radius:0;box-shadow:none!important}
.sb-tab.you{background:var(--you)} .sb-tab.them{background:var(--them)}
.sb-team{border-left:1px solid var(--vint-rule-soft)}
.sb-team b{font-family:var(--font-display);font-weight:600;letter-spacing:.10em;
  color:var(--vint-cream);text-transform:uppercase}
.sb-score{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;background:var(--vint-plate-2);
  box-shadow:inset 1px 0 0 var(--vint-rule-soft),inset -1px 0 0 var(--vint-rule-soft);
  transform:skewX(var(--bc-skew))}                  /* 90s oblique on the CELL */
.sb-score>*{display:inline-block;transform:skewX(calc(-1 * var(--bc-skew)))}  /* un-skew the glyphs */
.sb-score .you{color:var(--vint-you)}              /* YOUR digits keep the blue read */
.sb-score .them{color:var(--vint-bone)}
.sb-score .dash{color:var(--vint-amber-dim)}

/* ===================== 2. PHASE CAPTION .phase / .verb ===================== */
/* boxy lower-third caption: blue left-rule (def/ATTACK = your possession) vs gold (atk), amber verb */
.phase{background:var(--vint-plate);border:1px solid var(--line-strong);
  border-left:4px solid var(--you);border-radius:2px;
  box-shadow:3px 3px 0 var(--vint-shadow);overflow:hidden}
.phase.atk{border-left-color:var(--gold)}
.verb{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;
  color:var(--vint-cream);text-transform:uppercase}
.phase.atk .verb{color:var(--vint-amber)}
.tag{font-family:var(--font);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vint-ink);background:var(--gold);border-radius:0}

/* ===================== 3. DESKTOP SCOREBOARD .scorecard ===================== */
.scorecard{background:var(--vint-plate);border:1px solid var(--line-strong);
  border-top:3px solid var(--vint-rule);border-bottom:3px solid var(--vint-rule);
  border-radius:3px;box-shadow:4px 4px 0 var(--vint-shadow), var(--el-2);overflow:hidden}
.sc-top{background:var(--vint-plate-2);border-bottom:1px solid var(--vint-rule-soft)}
.sc-clock{font-family:var(--font-display);font-weight:600;letter-spacing:.08em;
  color:var(--vint-amber);text-transform:uppercase;font-variant-numeric:tabular-nums}
.sc-round i{border-radius:1px;background:var(--ink-ghost);box-shadow:none}  /* square ticks */
.sc-round i.on{background:var(--vint-amber);box-shadow:none}
.sc-crest{font-family:var(--font-display);font-weight:600;letter-spacing:.12em;
  color:var(--vint-cream);text-transform:uppercase;
  border-top:2px solid;border-bottom:2px solid;border-color:transparent}
.sc-crest.you{border-color:var(--you)} .sc-crest.them{border-color:var(--them)}  /* kit-underline */
.sc-score{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
  color:var(--vint-cream);font-variant-numeric:tabular-nums;
  border-left:2px solid var(--vint-rule);border-right:2px solid var(--vint-rule);
  transform:skewX(var(--bc-skew))}
.sc-score>*{display:inline-block;transform:skewX(calc(-1 * var(--bc-skew)))}
.sc-score .you{color:var(--vint-you)} .sc-score .them{color:var(--vint-bone)}
.sc-prog{background:rgba(232,185,100,.16);border-radius:0;overflow:hidden}
.sc-prog>*,.sc-prog .fill{border-radius:0;box-shadow:none!important}
.sc-prog .you{background:var(--you)} .sc-prog .them{background:var(--them)}  /* gameplay colour kept */
.sc-poss{font-family:var(--font-display);font-weight:600;letter-spacing:.10em;text-transform:uppercase}
.sc-poss.you{color:var(--you)} .sc-poss.them{color:var(--them)}

/* ===================== 4. RAIL HEADER + FEED TICKER ===================== */
/* the vidiprinter: amber LIVE header bar + broadcast-GREEN live dot, ruled rows, dots-and-lines dividers */
.rail-hd{font-family:var(--font-display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vint-ink);background:var(--gold);
  display:flex;align-items:center;gap:8px;border-radius:0}
.rail-hd::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2px rgba(95,193,138,.3);flex:0 0 auto;
  animation:bc-live 2.2s ease-in-out infinite}        /* the LIVE cue — broadcast green, NOT red */
@keyframes bc-live{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.rail-hd::before{animation:none}}
.feed-body{background:var(--vint-plate)}
.frow{border-top:1px solid var(--vint-rule-soft)}
.frow:nth-child(even){background:rgba(244,196,48,.035)}  /* vidiprinter alternating-row band */
.fmin{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
  color:var(--vint-amber-dim);font-variant-numeric:tabular-nums}
.ficon{color:var(--vint-amber-dim);fill:var(--vint-amber-dim)}
.ftext{font-family:var(--font);color:var(--vint-bone)}   /* Inter kept for legibility */
.fscore{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;color:var(--vint-cream)}
.fdiv{height:0;border:0;border-top:1px solid var(--vint-rule-soft);position:relative}
.fdiv::after{content:"";position:absolute;left:50%;top:-1.5px;width:3px;height:3px;
  margin-left:-1.5px;border-radius:50%;background:var(--vint-rule)}  /* the period "dots and lines" */

/* ===================== 5. TEAM SHEETS .sheet / .ts-* ===================== */
/* classic line-up graphic: small-caps names, kit-colour flag bars, alternating-row tint */
.sheet{background:var(--vint-plate);border:1px solid var(--line-strong);
  border-top:2px solid var(--vint-rule);border-bottom:2px solid var(--vint-rule);
  border-radius:3px;box-shadow:3px 3px 0 var(--vint-shadow);overflow:hidden}
.ts-hd{background:var(--vint-plate-2);border-bottom:1px solid var(--vint-rule-soft)}
.ts-crest{font-family:var(--font-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ts-crest.you{color:var(--you)} .ts-crest.them{color:var(--them-ink)}
.ts-row{border-top:1px solid var(--vint-rule-soft)}
.ts-row:nth-child(even){background:var(--s-50)}        /* line-up alt-row tint */
.ts-name{font-family:var(--font);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vint-bone)}                               /* Inter kept on long names */
.ts-flag{border-radius:0;box-shadow:none}               /* kit-colour bar, squared */
.ts-row.you .ts-flag,.sheet.you .ts-flag{background:var(--you)}
.ts-row.them .ts-flag,.sheet.them .ts-flag{background:var(--them)}

/* ===================== 6. HALFTIME .halftime / .ht-* ===================== */
.halftime{background:var(--vint-plate);border:1px solid var(--line-strong);
  border-top:3px solid var(--vint-rule);border-bottom:3px solid var(--vint-rule);
  border-radius:3px;box-shadow:4px 4px 0 var(--vint-shadow), var(--el-2);overflow:hidden}
/* if the split-panel wipe is kept, warm each panel toward the plate with a kit-edge instead of a colour flood */
.ht-panel.you{background:linear-gradient(115deg, rgba(215,162,74,.30), var(--vint-plate) 72%)}
.ht-panel.them{background:linear-gradient(245deg, rgba(142,153,166,.26), var(--vint-plate) 72%)}
.ht-label{font-family:var(--font-display);font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--vint-ink);background:var(--gold);border-radius:2px}
.ht-crest{font-family:var(--font-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vint-cream)}
.ht-num{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;color:var(--vint-cream);
  font-variant-numeric:tabular-nums;transform:skewX(var(--bc-skew))}
.ht-num>*{display:inline-block;transform:skewX(calc(-1 * var(--bc-skew)))}
.ht-side.you .ht-num{color:var(--vint-you)} .ht-side.them .ht-num{color:var(--vint-bone)}
.ht-side .ht-num{border-left:1px solid var(--vint-rule-soft);border-right:1px solid var(--vint-rule-soft)}
.ht-note{font-family:var(--font-slab);font-weight:500;font-style:italic;letter-spacing:.02em;
  color:var(--vint-amber-dim)}                          /* late-80s BBC slab-results note */

/* ===================== 7. RESULT — goal flash .result / .big / .reason ===================== */
.result{position:relative;background:var(--vint-plate);
  border-top:3px solid var(--vint-rule);border-bottom:3px solid var(--vint-rule);
  box-shadow:4px 4px 0 var(--vint-shadow)}
.result .big{font-family:var(--font-heavy);letter-spacing:.06em;line-height:1;text-transform:uppercase;
  transform:skewX(var(--bc-skew))}
.result .big>*{display:inline-block;transform:skewX(calc(-1 * var(--bc-skew)))}
.result .big.goal{color:var(--vint-amber);text-shadow:3px 3px 0 var(--vint-shadow);
  animation:bc-flash .5s steps(1) 1}                    /* single 2-frame invert, motion-safe */
@keyframes bc-flash{0%{color:var(--vint-ink);text-shadow:0 0 0 var(--vint-amber)}50%,100%{color:var(--vint-amber)}}
@media (prefers-reduced-motion:reduce){.result .big.goal{animation:none}}
.result .big.no{color:var(--ink-dim);text-shadow:3px 3px 0 var(--vint-shadow)}  /* NO GOAL stays neutral — no red */
.result .reason{font-family:var(--font-slab);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vint-amber-dim)}

/* ===================== 8. WORDMARK / TITLE CARD .home .wordmark ===================== */
.home .wordmark b{font-family:var(--font-heavy);letter-spacing:.06em;color:var(--vint-cream);
  line-height:.9;text-shadow:3px 3px 0 var(--vint-shadow)}
.home .wordmark span{font-family:var(--font-display);font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:var(--vint-amber)}

/* ===== PHOTO-CARD FRAMING GUARD (LAST) — some `background` shorthands above reset background-size:cover -> auto,
   which blows the card art up to natural size (esp. when selected). Re-enforce cover on every photo card. ===== */
.card,.dcard,.handcard,.marker,.wallcard,.card.sub-slot,
.card.selected,.card.lifted,.sel{background-size:cover!important;background-position:center top;background-repeat:no-repeat}

/* ############################################################################
   FOX-BOX-94 BOLD 90s CHROME (appended last — overrides the subtle vintage by source order)
   ############################################################################ */

/* ===== BOLD 90s FOX-BOX — fonts + saturated retro palette + moulded bevel (override vintage by source order) ===== */
:root{
  --font:'Saira',-apple-system,system-ui,sans-serif;
  --font-display:'Saira Condensed','Saira',sans-serif;
  --font-heavy:'Anton','Saira Condensed',sans-serif;
  --font-num:'Anton','Saira Condensed',sans-serif;
  --font-slab:var(--font);   /* was Roboto Slab (serif) — off the start-screen palette; captions now use Saira */
  --retro-amber:#F6B617; --retro-amber-d:#C7860A; --retro-teal:#15C0A8; --retro-teal-d:#0C7F6E;
  --retro-green:#37C24A; --retro-green-d:#1F8A30; --retro-red:#FF4133; --retro-gold:#F2B61C;
  --retro-cream:#F6ECCF; --retro-bone:#E3D6AE; --retro-ink:#14110A; --retro-well:#0a0e0c; --retro-well-2:#050807;
  --bev-hi:rgba(255,255,255,.55); --bev-hi-2:rgba(255,255,255,.30); --bev-lo:rgba(0,0,0,.58); --bev-lo-2:rgba(0,0,0,.40); --bev-frame:#000;
  --hard-shadow:4px 4px 0 rgba(0,0,0,.85); --hard-shadow-lg:6px 6px 0 rgba(0,0,0,.85);
  --bev-raise:inset 0 2px 0 var(--bev-hi),inset 2px 0 0 var(--bev-hi-2),inset 0 -3px 0 var(--bev-lo),inset -2px 0 0 var(--bev-lo-2);
  --bev-inset:inset 0 3px 5px rgba(0,0,0,.85),inset 0 -2px 0 rgba(255,255,255,.16),inset 2px 0 4px rgba(0,0,0,.55);
  --bev-well:inset 0 0 0 2px var(--retro-gold),inset 0 3px 6px rgba(0,0,0,.9),inset 0 -2px 0 rgba(255,255,255,.15);
}
/* ============================================================
   MATCHDAY — "FOX-BOX-94" BOLD 90s CHROME RE-SKIN
   Append AFTER the vintage block to win by source order. Same class names.
   ============================================================ */

/* ---------- MOBILE SCOREBUG (.scorebar) — chunky butted Fox-Box ---------- */
.scorebar{position:relative;z-index:6;margin:0 auto;height:48px;display:flex;align-items:stretch;width:max-content;
  background:var(--retro-well);border:2px solid var(--bev-frame);border-top:3px solid var(--retro-amber);border-radius:2px;
  box-shadow:var(--hard-shadow),0 0 0 1px var(--retro-amber-d);overflow:hidden;isolation:isolate}
.sb-clock{display:flex;align-items:center;justify-content:center;padding:0 13px;min-width:54px;
  font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:.02em;color:var(--retro-ink);
  font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--retro-amber),var(--retro-amber-d));
  box-shadow:var(--bev-raise);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.sb-team{display:flex;align-items:center;gap:8px;padding:0 13px;position:relative;
  background:linear-gradient(180deg,var(--retro-teal),var(--retro-teal-d));box-shadow:var(--bev-raise)}
.sb-team b{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.06em;color:var(--retro-ink);
  text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.30)}
.sb-tab{width:5px;align-self:stretch;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}   /* neutral hairline */
.sb-tab.you{background:var(--you)} .sb-tab.them{background:var(--them)}
.sb-score{display:flex;align-items:center;gap:11px;padding:0 16px;font-family:var(--font-num);font-weight:400;
  font-size:32px;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--retro-well),var(--retro-well-2));box-shadow:var(--bev-well)}
.sb-score .you,.sb-score .them{color:var(--retro-cream);text-shadow:0 1px 0 #000,0 -1px 0 rgba(255,255,255,.12)}
.sb-score .dash{color:var(--retro-amber);font-family:var(--font-display);font-weight:900;font-size:24px}
/* possession marker on the live cell (graft: fox-box-94). Defensive: works on .sb-score.active/.on/.you-poss. */
.sb-score.active,.sb-score.on,.sb-score.live{box-shadow:inset 0 4px 0 var(--retro-amber),var(--bev-well)}

/* ---------- DESKTOP SCOREBOARD (.scorecard) ---------- */
.scorecard{background:var(--retro-well);border:2px solid var(--bev-frame);border-top:4px solid var(--retro-teal);
  border-radius:2px;box-shadow:var(--hard-shadow-lg),0 0 0 1px var(--retro-amber-d);overflow:hidden;
  position:relative;isolation:isolate}
.sc-top{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;
  background:linear-gradient(180deg,var(--retro-teal),var(--retro-teal-d));box-shadow:var(--bev-raise);
  border-bottom:2px solid var(--bev-frame)}
.sc-clock,.sc-round{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.04em;
  color:var(--retro-ink);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.25);
  text-transform:uppercase}
.sc-round{display:flex;gap:5px;align-items:center}
.sc-round i{width:8px;height:8px;border-radius:2px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.sc-round i.on{background:var(--retro-amber);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 5px rgba(246,182,23,.7)}
.sc-mid{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 14px 12px}
.sc-crest{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.06em;color:var(--retro-ink);
  text-transform:uppercase;min-width:62px;text-align:center;padding:5px 0;border-radius:2px;
  background:linear-gradient(180deg,var(--retro-amber),var(--retro-amber-d));box-shadow:var(--bev-raise);
  text-shadow:0 1px 0 rgba(255,255,255,.30)}
.sc-crest.you{box-shadow:var(--bev-raise),inset 0 -4px 0 -1px var(--you)}    /* team = neutral underline only */
.sc-crest.them{box-shadow:var(--bev-raise),inset 0 -4px 0 -1px var(--them)}
.sc-score{font-family:var(--font-num);font-weight:400;font-size:46px;letter-spacing:.02em;color:var(--retro-cream);
  font-variant-numeric:tabular-nums;line-height:1;padding:2px 16px;border-radius:2px;
  background:linear-gradient(180deg,var(--retro-well),var(--retro-well-2));box-shadow:var(--bev-well);
  text-shadow:0 1px 0 #000,0 -1px 0 rgba(255,255,255,.12)}
.sc-score .dash,.sc-dash{color:var(--retro-amber);font-family:var(--font-display);font-weight:900}
.sc-prog{display:flex;justify-content:space-between;padding:8px 14px;background:linear-gradient(180deg,var(--retro-well-2),#000);
  border-top:2px solid var(--bev-frame);font-family:var(--font-display);font-weight:800;font-size:11px;
  letter-spacing:.10em;text-transform:uppercase}
.sc-poss{color:var(--ink-faint)}
.sc-poss.on,.sc-poss.you,.sc-poss.them{color:var(--retro-amber);text-shadow:0 0 8px rgba(246,182,23,.5)}  /* active side lit (defensive) */

/* ---------- TICKER (.rail-hd/.feed-body/.frow/.fdiv) ---------- */

.rail-hd{font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--retro-ink);background:linear-gradient(180deg,var(--retro-amber),var(--retro-amber-d));box-shadow:var(--bev-raise);
  padding:8px 13px;display:flex;align-items:center;gap:9px;border-bottom:2px solid var(--bev-frame);
  text-shadow:0 1px 0 rgba(255,255,255,.28)}
.rail-hd::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--retro-red);flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #000,0 0 6px rgba(255,65,51,.7)}   /* moulded LIVE LED */
.feed-body{padding:0;background:repeating-linear-gradient(180deg,var(--retro-well) 0 38px,var(--retro-well-2) 38px 76px)}
.frow{display:flex;align-items:center;gap:11px;padding:9px 13px;font-size:13px}
.fmin{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--retro-amber);min-width:32px;font-variant-numeric:tabular-nums}
.ficon{width:18px;text-align:center;color:var(--retro-teal)}
.ftext{flex:1;color:var(--retro-bone);font-family:var(--font);font-weight:500;font-size:13px;line-height:1.3;text-transform:uppercase;letter-spacing:.01em}
.fscore{font-family:var(--font-num);font-weight:400;color:var(--retro-cream);font-size:16px;letter-spacing:.02em}
.fdiv{height:2px;background:var(--bev-frame);box-shadow:0 1px 0 rgba(255,255,255,.06);border:0;margin:0}   /* thick moulded seam */

/* ---------- LINE-UP (.sheet/.ts-hd/.ts-row/.ts-name/.ts-flag/.ts-crest) ---------- */
.sheet{background:var(--retro-well);border:2px solid var(--bev-frame);border-radius:2px;box-shadow:var(--hard-shadow);overflow:hidden}
.ts-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:2px solid var(--bev-frame);
  background:linear-gradient(180deg,var(--retro-teal),var(--retro-teal-d));box-shadow:var(--bev-raise)}
.ts-crest{font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--retro-ink);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.ts-row{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:13px}
.ts-row:nth-child(even){background:var(--retro-well-2)}                                  /* alternating bold band */
.ts-flag{width:9px;align-self:stretch;min-height:16px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}  /* kit bar */
.ts-row.you .ts-flag{background:var(--you)} .ts-row.them .ts-flag{background:var(--them)}
.ts-name{flex:1;font-family:var(--font-display);font-weight:700;color:var(--retro-bone);text-transform:uppercase;letter-spacing:.05em;font-size:14px}

/* ===== BOLD phase / result / halftime / wordmark (matching the Fox-Box) ===== */
.phase{background:linear-gradient(180deg,var(--retro-teal),var(--retro-teal-d));border:2px solid var(--bev-frame);border-left:2px solid var(--bev-frame);border-radius:2px;box-shadow:var(--bev-raise),var(--hard-shadow);overflow:hidden}
.phase.atk{background:linear-gradient(180deg,var(--retro-amber),var(--retro-amber-d))}
.phase .verb{font-family:var(--font-display);font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--retro-ink);text-shadow:0 1px 0 rgba(255,255,255,.3)}
.phase.atk .verb{color:var(--retro-ink)}
.phase .shield svg path{fill:var(--retro-ink)}
.phase .tag{font-family:var(--font-display);font-weight:800;color:var(--retro-ink);background:var(--retro-cream);box-shadow:var(--bev-raise);border-radius:0}
.result{background:var(--retro-well);border-top:4px solid var(--retro-amber);border-bottom:4px solid var(--retro-amber);box-shadow:var(--hard-shadow-lg)}
.result .big{font-family:var(--font-heavy);letter-spacing:.04em;text-transform:uppercase;line-height:.9}
.result .big.goal{color:var(--retro-amber);text-shadow:4px 4px 0 #000,0 0 20px rgba(246,182,23,.45)}
.result .big.no{color:var(--retro-bone);text-shadow:4px 4px 0 #000}
.result .reason{font-family:var(--font-display);font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--retro-amber-d)}
.halftime{background:var(--retro-well);border:2px solid var(--bev-frame);border-top:4px solid var(--retro-teal);border-bottom:4px solid var(--retro-teal);box-shadow:var(--hard-shadow-lg)}
.ht-panel.you,.ht-panel.them{background:var(--retro-well)}
.ht-label{font-family:var(--font-display);font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--retro-ink);background:linear-gradient(180deg,var(--retro-amber),var(--retro-amber-d));box-shadow:var(--bev-raise);border-radius:2px}
.ht-crest{font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:var(--retro-cream)}
.ht-num,.ht-side.you .ht-num,.ht-side.them .ht-num{font-family:var(--font-num);font-weight:400;color:var(--retro-cream);text-shadow:0 1px 0 #000}
.ht-dash{color:var(--retro-amber)} .ht-seam{background:var(--retro-amber-d)}
.ht-note{font-family:var(--font-slab);font-style:italic;color:var(--retro-amber-d)}
.home .wordmark b{font-family:var(--font-heavy);letter-spacing:.04em;color:var(--retro-cream);text-shadow:4px 4px 0 #000}
.home .wordmark span{font-family:var(--font-display);font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--retro-amber)}

/* texture: turn the analog up a notch */
/* ===== TURN THE ANALOG UP A NOTCH (still legible) — override the .bc-* layers =====
   The multiply blend on the scanline is load-bearing: it DARKENS between lines without
   greying the bright amber/teal blocks, so 0.16 reads as a present CRT line yet body+digits
   stay crisp. Overlay on grain lifts lights / deepens darks → preserves text. */
.bc-overlays .bc-warm{background:rgba(255,176,92,.05);mix-blend-mode:multiply}              /* 0.035 -> 0.05 warmer */
.bc-overlays .bc-vignette{background:radial-gradient(ellipse 150% 150% at 50% 50%,
  rgba(0,0,0,0) 52%, rgba(0,0,0,.22) 80%, rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.6)}                                            /* deeper CRT corners */
.bc-overlays .bc-scan{mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,
  rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 2px, rgba(0,0,0,.16) 3px)}          /* 0.05 -> 0.16, 3px period */
.bc-overlays .bc-grain{opacity:.10;mix-blend-mode:overlay;background-size:160px 160px;       /* 0.06 -> 0.10, finer tile */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* punchier WARM grade so the blocks stay VIVID (the soulless pass desaturated to amber-grey):
   put on the same root element that currently carries the grade, or add it. */
.stage,#app{filter:none}   /* board is crisp (above the texture); the warm grade now lives on the pitch only */
#pitchbg{filter:sepia(.06) saturate(1.0) contrast(1.0)}   /* the FOOTAGE keeps the warm aged grade under the CRT texture */
/* iPhone 17 Pro Max ~460ppi: if 3px scanlines moiré, switch to 4px period (2px line/2px gap) @ .14.
   Keep .bc-roll as-is; it already respects prefers-reduced-motion. */
/* ===== SETUP — line-up ON THE PITCH (default XI in formation + bench subs) ===== */
.setup.onfield{background:transparent;display:flex;flex-direction:column;height:100dvh;width:100%;max-width:430px;margin:0 auto;
  padding:calc(var(--sat) + 12px) 12px calc(var(--sab) + 10px);overflow:hidden}
.setup.onfield .su-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:0 2px 4px}
.setup.onfield .su-head .ttl{font-family:var(--font-display);font-weight:900;font-size:23px;letter-spacing:.05em;text-transform:uppercase;color:var(--retro-cream);text-shadow:2px 2px 0 #000}
.su-form{font-family:var(--font-num);font-weight:400;font-size:22px;color:var(--retro-amber);letter-spacing:.06em;background:var(--retro-well);padding:2px 11px;border:2px solid var(--bev-frame);box-shadow:var(--bev-well)}
.su-field{flex:1;min-height:0;position:relative}
.su-slot{position:absolute;transform:translate(-50%,-50%) scale(var(--scl,1));transform-origin:center;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.card.su-pc{width:60px;height:84px;border-radius:var(--r8)}
.card.su-gk{box-shadow:var(--el-3),inset 0 0 0 1px color-mix(in srgb,var(--save) 50%,transparent)}
.setup.onfield .su-pos{font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase}
.su-slot.swap-ok .card{box-shadow:0 0 0 2px var(--retro-amber),var(--el-card);cursor:pointer}
.su-slot.swap-ok .su-pos{color:var(--retro-amber)}
.su-out{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-weight:800;font-size:9px;letter-spacing:.08em;color:var(--retro-ink);background:var(--retro-amber);padding:1px 7px;border-radius:3px;z-index:3;box-shadow:var(--bev-raise)}
.su-slot.locked .card{filter:grayscale(.6) brightness(.5);opacity:.55}
.su-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;z-index:3}
.su-benchwrap{flex:0 0 auto}
.su-bhint{text-align:center;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin:4px 0 6px}
.su-bhint.on{color:var(--retro-amber)}
.su-bench{display:flex;gap:9px;justify-content:center;overflow-x:auto;padding:2px 4px 9px;scrollbar-width:none}
.su-bench::-webkit-scrollbar{display:none}
.su-bcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .14s}
.card.su-bc{width:56px;height:78px;border-radius:6px}
.su-bcard.armed{transform:translateY(-7px)}
.su-bcard.armed .card{box-shadow:0 0 0 2px var(--retro-amber),var(--el-3)}
.su-bcard.armed .su-pos{color:var(--retro-amber)}
.setup.onfield .commit.confirmlineup{margin-top:2px}


/* ============================================================================
   MATCHDAY CARD — "the bug" broadcast stat-bar  (bold-90s, the showcase redesign)
   Appended LAST so source-order beats the legacy .card .surname/.stat/.spine/
   .grad/.abrail/.apip rules AND the background-size:cover!important guard.
   Tokens (--retro-*/--bev-*/--you/--them/--font-num/--font-display) already live.
   ========================================================================== */

/* PHOTO: over-scale + anchor high so Sorare's baked name/score is cropped off the
   foot; the opaque bug masks the remainder. !important beats the cover guard. */
.card,.marker,.dcard,.keeper,.wallcard{
  background-size:var(--bg-zoom,128%) auto!important;
  background-position:50% var(--bg-y,5%)!important;
  background-repeat:no-repeat!important;
  background-color:var(--retro-well);overflow:hidden}
.card{border:2px solid var(--bev-frame);box-shadow:var(--hard-shadow),0 0 0 1px var(--retro-amber-d)}

/* top scrim keeps the Sorare crest / competition mark crisp */
.topscrim{position:absolute;left:0;right:0;top:0;height:24%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}

/* neutralize legacy overlay bits (now owned by the bug) */
.card .spine,.dcard .spine,.wallcard .wspine,.dcard .role,.abrail,.keeper-glove{display:none}

/* ============================== THE BUG =================================== */
.bug{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;
  background:var(--retro-ink);overflow:hidden;box-shadow:var(--bev-raise),0 -2px 6px rgba(0,0,0,.5)}
.bug::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;   /* clipped-chyron seam */
  background:linear-gradient(90deg,var(--retro-amber),var(--retro-teal));opacity:.9}

/* —— name ribbon —— */
.bug-name{display:flex;align-items:center;gap:5px;height:18px;padding:0 5px;
  background:linear-gradient(180deg,#1c1810,var(--retro-ink))}
.bug-name .postab{flex:0 0 auto;min-width:14px;height:13px;padding:0 2px;border-radius:3px;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-num);font-weight:400;font-size:10px;
  color:var(--retro-ink);background:var(--retro-amber);box-shadow:var(--bev-raise)}
.bug-name .surname{display:block!important;position:static;left:auto;right:auto;bottom:auto;
  font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.02em;
  color:var(--retro-cream);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 #000;text-transform:uppercase}
/* team identity (replaces the old .spine): tint the tab + a 3px under-rail on the bug */
.them-card .bug-name .postab,.wallcard .bug-name .postab{background:var(--them);color:#fff}
.you-card  .bug-name .postab{background:var(--you);color:#1b1408}
.them-card .bug,.marker .bug,.wallcard .bug{box-shadow:var(--bev-raise),0 -2px 6px rgba(0,0,0,.5),inset 0 -3px 0 var(--them)}
.you-card  .bug,.dcard  .bug{box-shadow:var(--bev-raise),0 -2px 6px rgba(0,0,0,.5),inset 0 -3px 0 var(--you)}

/* —— stat duel (A | D) — the hero —— */
.bug-duel{display:flex;align-items:stretch;height:24px;background:var(--retro-well)}
.bug-duel .cell{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}
.bug-duel .cell svg{width:13px;height:13px;flex:0 0 auto}
.bug-duel .cell b{font-family:var(--font-num);font-weight:400;font-size:22px;line-height:1;
  color:var(--retro-cream);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 1px 0 #000}
.bug-duel .cell.save b{font-size:24px}                          /* keeper hero numeral (default) */
.bug-duel .cell.atk{background:rgba(246,182,23,.16)}  .bug-duel .cell.atk svg{fill:var(--retro-amber)}
.bug-duel .cell.def{background:rgba(21,192,168,.16)}  .bug-duel .cell.def svg{fill:var(--retro-teal)}
.bug-duel .cell.save{background:rgba(21,192,168,.16)} .bug-duel .cell.save svg{fill:var(--retro-teal)}
.bug-duel .vdiv{flex:0 0 3px;align-self:stretch;background:var(--retro-ink);box-shadow:var(--bev-inset)} /* moulded groove */

/* —— ability strip (renders on EVERY card that has a trick) —— */
.bug-abil{display:flex;justify-content:flex-end;align-items:center;gap:3px;min-height:16px;
  padding:2px 4px;background:linear-gradient(180deg,var(--retro-well-2),#000)}
.apip{display:inline-flex;align-items:center;gap:2px;height:13px;padding:0 4px;border-radius:6px;
  background:#0e1512;box-shadow:var(--bev-inset)}
.apip svg{width:10px;height:10px;fill:var(--retro-teal)}        /* resting = quiet teal */
.apip b{font-family:var(--font-num);font-weight:400;font-size:11px;color:var(--retro-cream);
  font-variant-numeric:tabular-nums}
/* LIVE (playable now, hand) = amber, glowing, pulsing — loudest thing on the card */
.apip.live{background:var(--retro-amber);box-shadow:var(--bev-raise),0 0 0 1.5px var(--retro-amber),0 0 12px rgba(246,182,23,.6);
  animation:apulse 1.1s ease-in-out infinite}
.apip.live svg{fill:var(--retro-ink)} .apip.live b{color:var(--retro-ink)}
@keyframes apulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ===================== SCALE LADDER (snap, drop layers) =================== */
/* MEDIUM — bench/hand/mark-tray .dcard 84x118, .marker 84x118, subs .sub-slot 74x104 */
.dcard .bug-name,.marker .bug-name,.card.sub-slot .bug-name{height:15px}
.dcard .bug-name .surname,.marker .bug-name .surname,.card.sub-slot .bug-name .surname{font-size:11px}
.dcard .bug-duel,.marker .bug-duel,.card.sub-slot .bug-duel{height:20px}
.dcard .bug-duel .cell b,.marker .bug-duel .cell b,.card.sub-slot .bug-duel .cell b{font-size:17px}
.dcard .bug-duel .cell svg,.marker .bug-duel .cell svg,.card.sub-slot .bug-duel .cell svg{width:11px;height:11px}
.dcard .apip,.marker .apip,.card.sub-slot .apip{height:12px}
.dcard .apip b,.marker .apip b,.card.sub-slot .apip b{font-size:10px}
.marker .bug-duel .cell.def{box-shadow:inset 0 0 0 1px rgba(21,192,168,.55)}   /* mark = D emphasis */

/* SETUP pitch + bench (60x84 / 56x78) — hide name + abilities, keep the A|D duel */
.card.su-pc .bug-name,.card.su-pc .bug-abil,.card.su-bc .bug-name,.card.su-bc .bug-abil{display:none}
.card.su-pc .bug-duel,.card.su-bc .bug-duel{height:16px}
.card.su-pc .bug-duel .cell b,.card.su-bc .bug-duel .cell b{font-size:13px}
.card.su-pc .bug-duel .cell svg,.card.su-bc .bug-duel .cell svg{width:9px;height:9px}

/* KEEPER 94x114 — name ribbon + solo SAVE cell */
.keeper .bug-name{height:16px} .keeper .bug-name .surname{font-size:11px}
.keeper .bug-duel{height:24px} .keeper .bug-duel .cell.save b{font-size:24px}
/* setup keeper (su-gk 60x84) + subs locked keeper (gk-locked 66x104) — no name, solo save */
.card.su-gk .bug-name,.card.su-gk .bug-abil,.card.gk-locked .bug-name,.card.gk-locked .bug-abil{display:none}
.card.su-gk .bug-duel{height:16px} .card.su-gk .bug-duel .cell.save b{font-size:14px}
.card.gk-locked .bug-duel{height:18px} .card.gk-locked .bug-duel .cell.save b{font-size:16px}

/* SMALL — wallcard 54x76 : one stat cell, no name/abilities; any trick -> corner dot */
.wallcard .bug-name,.wallcard .bug-abil{display:none}
.wallcard .bug-duel{height:17px;background:var(--retro-ink)}
.wallcard .bug-duel .cell b,.wallcard .bug-duel .cell.save b{font-size:12px}
.wallcard .bug-duel .cell svg{width:8px;height:8px}
.wallcard.hastrick::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--retro-amber);box-shadow:0 0 6px rgba(246,182,23,.7);z-index:5}

/* ============================================================================
   MATCHDAY — "BIG PHOTO" card-sizing reconciliation. APPEND THIS LAST (after the
   .bug block that currently ends at line 1351) so source order wins the fixed-px
   ladder. Keyed to the REAL live classes ONLY:
   .field .runners .runners.atkruns .runners.decl .lane .lane.empty .slot .card
   .markers .marker .bug .bug-name .postab .surname .bug-duel .cell .vdiv .bug-abil
   .apip .topscrim .dcard .keeper .wallcard .sd-runners .sd-card .su-pc .su-bc
   .sub-slot .gk-locked .atk-top .atk-mid .afterspace .midfield.
   It OVERRIDES the fixed-px rules at L1279 (.bug-name height:18px), L1295
   (.bug-duel height:24px), L1307 (.bug-abil min-height:16px), L1322-1349 (the
   MEDIUM/SETUP/KEEPER/SMALL ladder), and the .lane{width:100px}/.runners
   {min-height:152px}/.atk-top{height:172px} layout, purely by being appended
   after them. It does NOT touch the photo framing rule at L1259
   (background-size:var(--bg-zoom,128%) auto!important) — that survives intact.
   ========================================================================== */

/* ---- 0. one card-scaled unit. --u tracks the card's OWN width (cqw), clamped
        so text stays legible at 4-across and never balloons on 2-across. ---- */
.card{ container-type:inline-size; }
.card{ --u:clamp(1.9px, 2cqw, 3.05px); }   /* 100px->~2.45px; 190->3.05(cap); 95->~2.33 */

/* GLOBAL GUARD: the in-bug .apip must NOT inherit the legacy left-rail pip's
   min-height:30px (L680) — it would force the abil row tall. Reset every bug pip. */
.bug-abil .apip{ min-height:0; }

/* ============================ A. BOARD RUNNERS ============================ */
/* lane stops being a fixed 100px chip (L99) and becomes a flex child that fills */
.runners{ gap:8px; min-height:0; align-items:flex-end; }   /* drops L98 min-height:152px */
.runners .lane,
.runners.atkruns .lane{ flex:1 1 0; width:auto; min-width:0; max-width:190px; }
.runners.decl .lane,
.runners.decl .decl-lane{ flex:1 1 0; width:auto; min-width:0; max-width:200px; }

/* card fills its lane; height follows width via aspect-ratio (5:7) — overrides
   the fixed 100x140 at L628. !important not needed; same/higher specificity+later. */
.runners .lane > .card{ width:100%; height:auto; aspect-ratio:5 / 7; max-width:none; }
.runners .lane.empty .slot{ width:100%; height:auto; aspect-ratio:5/7; }   /* declare drop slot matches */

/* ----- the bug, re-proportioned off --u so it tracks the card (lands ~30-33%) ----- */
.runners .lane > .card .bug-name{ height:calc(var(--u) * 8); padding:0 calc(var(--u) * 2); gap:calc(var(--u) * 2); }
.runners .lane > .card .bug-name .postab{
  min-width:calc(var(--u) * 5.6); height:calc(var(--u) * 5.4); padding:0 calc(var(--u) * .8);
  font-size:clamp(8px, calc(var(--u) * 4), 13px); }
.runners .lane > .card .bug-name .surname{ font-size:clamp(10px, calc(var(--u) * 5.2), 17px); }

.runners .lane > .card .bug-duel{ height:calc(var(--u) * 10.4); }
.runners .lane > .card .bug-duel .cell{ gap:calc(var(--u) * 1.2); }
.runners .lane > .card .bug-duel .cell svg{ width:calc(var(--u) * 5.4); height:calc(var(--u) * 5.4); }
.runners .lane > .card .bug-duel .cell b{ font-size:clamp(16px, calc(var(--u) * 9.4), 30px); }   /* Anton hero numeral */
.runners .lane > .card .bug-duel .cell.save b{ font-size:clamp(16px, calc(var(--u) * 10), 32px); }

.runners .lane > .card .bug-abil{ min-height:calc(var(--u) * 7); padding:calc(var(--u) * 1) calc(var(--u) * 1.6); gap:calc(var(--u) * 1.2); }
.runners .lane > .card .apip{ height:calc(var(--u) * 5.2); min-height:0; padding:0 calc(var(--u) * 1.6); gap:calc(var(--u) * .8); }
.runners .lane > .card .apip svg{ width:calc(var(--u) * 4); height:calc(var(--u) * 4); }
.runners .lane > .card .apip b{ font-size:clamp(9px, calc(var(--u) * 4.4), 14px); }

.runners .lane > .card .topscrim{ height:18%; }   /* scrim follows card, keeps crest crisp (L1266 was 24%) */

/* 4-ACROSS belt-and-braces: narrow card (~<108px) drops the abil strip first,
   like the old SMALL tier, so the photo wins harder where cards are smallest. */
@container (max-width:108px){ .runners .lane > .card .bug-abil{ display:none; } }

/* ============================ B. RECLAIM GRASS =========================== */
/* runners row sits in the freed vertical space instead of a 152px middle well.
   Overrides L163 .atk-top{height:172px}, L164 .atk-mid, L166 .afterspace, L101 .midfield. */
.atk-top{ height:150px; }
.atk-mid{ min-height:12px; }
.runners.atkruns{ margin:6px 0 0; }
.afterspace{ flex:1; min-height:0; }
.midfield{ flex:1; min-height:0; }              /* DEFEND orientation yields to taller lanes */

/* markers are SIBLINGS of .card inside .lane (not descendants), so the card's
   container-type does NOT clip them, and the .covered scale(.9) lift is unaffected.
   Just re-centre the overlay origin now the lane is wider. (L150 was width:100px) */
.runners .lane .markers{ left:50%; width:auto; }

/* ============================ C. SHOWDOWN =============================== */
/* .sd-card is a .card (L277 108x150, .sd-runners .lane width:auto L100) — make it
   a flex hero card too. Its own container so --u is independent of the board's. */
.sd-runners{ align-items:flex-end; }
.sd-runners .lane{ flex:1 1 0; width:auto; min-width:0; max-width:200px; }
.sd-runners .lane > .card.sd-card,
.card.sd-card{ width:100%; height:auto; aspect-ratio:5/7; container-type:inline-size;
  --u:clamp(2.2px, 2cqw, 3.4px); }
.sd-runners .lane > .card .bug-name{ height:calc(var(--u) * 7.2); }
.sd-runners .lane > .card .bug-name .surname{ font-size:clamp(11px, calc(var(--u) * 5), 19px); }
.sd-runners .lane > .card .bug-duel{ height:calc(var(--u) * 9.6); }
.sd-runners .lane > .card .bug-duel .cell b{ font-size:clamp(18px, calc(var(--u) * 8.8), 34px); }
.sd-runners .lane > .card .bug-abil{ min-height:calc(var(--u) * 6.4); }

/* ===================== D. STANDALONE CARDS (tray/keeper/wall/setup) ===== */
/* These are NOT in .runners .lane, so they keep their existing footprint; we only
   give each its own container + --u so the bug re-proportions identically. This
   OVERRIDES the L1322-1349 MEDIUM/KEEPER/SETUP/SMALL fixed-px ladder. */
.dcard,.marker,.keeper,.wallcard,.card.su-pc,.card.su-bc,.card.sub-slot,.card.gk-locked{
  container-type:inline-size; }

/* MARK TRAY .dcard + on-board .marker (84x118) — bug ~33% */
.dcard,.marker{ --u:clamp(1.9px, 3cqw, 2.9px); }
.dcard .bug-name,.marker .bug-name{ height:calc(var(--u) * 5.4); }
.dcard .bug-name .surname,.marker .bug-name .surname{ font-size:clamp(10px, calc(var(--u) * 4.2), 13px); }
.dcard .bug-duel,.marker .bug-duel{ height:calc(var(--u) * 7.2); }
.dcard .bug-duel .cell b,.marker .bug-duel .cell b{ font-size:clamp(14px, calc(var(--u) * 6.6), 20px); }
.dcard .bug-duel .cell svg,.marker .bug-duel .cell svg{ width:calc(var(--u) * 4); height:calc(var(--u) * 4); }
.dcard .bug-abil,.marker .bug-abil{ min-height:calc(var(--u) * 4.4); padding:1px calc(var(--u) * 1.6); }
.dcard .apip,.marker .apip{ height:calc(var(--u) * 4.4); min-height:0; padding:0 calc(var(--u) * 1.4); }
.dcard .apip b,.marker .apip b{ font-size:clamp(9px, calc(var(--u) * 4.2), 11px); }

/* KEEPER (94x114) — name + solo SAVE cell */
.keeper{ --u:clamp(2px, 3cqw, 3px); }
.keeper .bug-name{ height:calc(var(--u) * 6.4); }
.keeper .bug-name .surname{ font-size:clamp(10px, calc(var(--u) * 4.4), 13px); }
.keeper .bug-duel{ height:calc(var(--u) * 9.6); }
.keeper .bug-duel .cell.save b{ font-size:clamp(16px, calc(var(--u) * 9.6), 26px); }

/* WALLCARD (54x76) — solo stat cell; name+abil already hidden (L1346) */
.wallcard{ --u:clamp(1.6px, 3cqw, 2.2px); }
.wallcard .bug-duel{ height:calc(var(--u) * 7.7); }
.wallcard .bug-duel .cell b,.wallcard .bug-duel .cell.save b{ font-size:clamp(11px, calc(var(--u) * 5.4), 14px); }
.wallcard .bug-duel .cell svg{ width:calc(var(--u) * 3.6); height:calc(var(--u) * 3.6); }

/* SETUP pitch (su-pc 60x84) + bench (su-bc 56x78) — A|D duel only (name+abil hidden L1332) */
.card.su-pc{ --u:clamp(1.6px, 3cqw, 2.4px); }
.card.su-bc{ --u:clamp(1.5px, 3cqw, 2.2px); }
.card.su-pc .bug-duel,.card.su-bc .bug-duel{ height:calc(var(--u) * 6.6); }
.card.su-pc .bug-duel .cell b,.card.su-bc .bug-duel .cell b{ font-size:clamp(11px, calc(var(--u) * 5.4), 14px); }
.card.su-pc .bug-duel .cell svg,.card.su-bc .bug-duel .cell svg{ width:calc(var(--u) * 3.6); height:calc(var(--u) * 3.6); }

/* subs locked keeper (gk-locked 66x104) — solo save, proportional */
.card.gk-locked{ --u:clamp(1.7px, 3cqw, 2.4px); }
.card.gk-locked .bug-duel{ height:calc(var(--u) * 7.2); }
.card.gk-locked .bug-duel .cell.save b{ font-size:clamp(13px, calc(var(--u) * 6.6), 18px); }


/* ============================================================================
   SETUP SHOWCASE — make the lineup cards BIG (was 60x84 / 56x78, too tiny).
   Appended LAST: overrides the .card.su-pc/.su-bc size + the setup bug ladder.
   Pitch cards show name+A|D (clean); bench cards add the ability kit (sub picks).
   ========================================================================== */

/* pitch XI cards — ~88x123, photo-forward, own container so the bug tracks size */
.card.su-pc{ width:88px; height:auto; aspect-ratio:5/7; border-radius:var(--r8);
  container-type:inline-size; --u:clamp(2px, 3cqw, 2.6px); }
.setup.onfield .su-slot.gk .card.su-pc{ width:86px; }   /* keeper a touch tighter */

/* bench cards — ~76x106, full kit for informed subs */
.card.su-bc{ width:76px; height:auto; aspect-ratio:5/7; border-radius:7px;
  container-type:inline-size; --u:clamp(1.8px, 3cqw, 2.3px); }

/* RE-SHOW the name ribbon (hidden in the old tiny tier) now that cards are big */
.card.su-pc .bug-name, .card.su-bc .bug-name{ display:flex; }
.card.su-bc .bug-abil{ display:flex; }                    /* bench: show the ability kit */
.card.su-pc .bug-abil{ display:none; }                    /* pitch: keep it clean (name + duel) */

/* bug rows sized off --u so they land ~30% on the bigger card */
.card.su-pc .bug-name, .card.su-bc .bug-name{ height:calc(var(--u) * 6.4); padding:0 calc(var(--u) * 2); gap:calc(var(--u) * 1.8); }
.card.su-pc .bug-name .postab, .card.su-bc .bug-name .postab{
  min-width:calc(var(--u) * 5); height:calc(var(--u) * 4.8); padding:0 calc(var(--u) * .8);
  font-size:clamp(8px, calc(var(--u) * 3.6), 11px); }
.card.su-pc .bug-name .surname, .card.su-bc .bug-name .surname{ font-size:clamp(9px, calc(var(--u) * 4.6), 13px); }

.card.su-pc .bug-duel, .card.su-bc .bug-duel{ height:calc(var(--u) * 8.6); }
.card.su-pc .bug-duel .cell b, .card.su-bc .bug-duel .cell b{ font-size:clamp(13px, calc(var(--u) * 7.4), 20px); }
.card.su-pc .bug-duel .cell.save b, .card.su-bc .bug-duel .cell.save b{ font-size:clamp(14px, calc(var(--u) * 8.2), 22px); }
.card.su-pc .bug-duel .cell svg, .card.su-bc .bug-duel .cell svg{ width:calc(var(--u) * 4.6); height:calc(var(--u) * 4.6); }

.card.su-bc .bug-abil{ min-height:calc(var(--u) * 5.4); padding:1px calc(var(--u) * 1.4); gap:calc(var(--u) * 1); }
.card.su-bc .apip{ height:calc(var(--u) * 5); min-height:0; padding:0 calc(var(--u) * 1.4); gap:calc(var(--u) * .8); }
.card.su-bc .apip svg{ width:calc(var(--u) * 3.6); height:calc(var(--u) * 3.6); }
.card.su-bc .apip b{ font-size:clamp(8px, calc(var(--u) * 3.8), 11px); }
.card.su-pc .topscrim, .card.su-bc .topscrim{ height:20%; }

/* the bench strip + wrapper accommodate the taller cards */
.su-bcard{ gap:0; }
.su-bench{ gap:8px; padding-bottom:2px; align-items:flex-end; }



/* ============================================================================
   RELATIVE SIZING LAYER — kill the magic px. Everything board-level is now
   expressed in cqw of the .stage container (430px design width), so the whole
   board scales as ONE unit with its own size: pixel-identical at >=430px (capped
   stage), fluidly smaller on narrower phones, consistent phone<->desktop.
   Anchor: 1cqw = 4.3px (stage 430/100). Card-internal type already scales via
   the per-card --u (cqw of the card), so the two-level container system is whole.
   Appended LAST → wins by source order. Hairlines/shadows/radii stay px (correct).
   ========================================================================== */

/* the four full-screen roots become the board container (430px-capped) */
.stage,.home,.setup,.halftime{ container-type:inline-size; container-name:board; }

/* ---- card OUTER sizes (nearest container = stage → cqw anchored /4.3) ---- */
.card        { width:23cqw; height:auto; aspect-ratio:5/7; }   /* base; board runners override via flex */
.dcard       { width:21cqw; height:auto; aspect-ratio:5/7; }   /* bigger active-player cards (4 stretch the full width) */
.marker      { width:20cqw; height:27cqw; margin-left:-10cqw; }
.marker.f2   { margin-left:-6cqw; top:-1cqw; }
.marker.f3   { margin-left:-13cqw; top:-1cqw; }
.keeper      { width:22cqw; height:27cqw; }
.wallcard    { width:16cqw; height:23cqw; }   /* opponent cards grown a tad (still clearly < the 20cqw active cards) */
.card.su-pc  { width:20cqw; }
.setup.onfield .su-slot.gk .card.su-pc{ width:20cqw; }
.card.su-bc  { width:18cqw; }
.card.gk-locked{ width:15cqw; height:24cqw; }
.card.sub-slot { width:17cqw; height:24cqw; }
.ifx-card    { width:34cqw; height:auto; }   /* aspect-ratio (771/1248) drives the height → full card, no crop */

/* lanes + markers overlay */
.lane              { width:23cqw; }
.runners .lane,
.runners.atkruns .lane{ flex:1 1 0; width:auto; max-width:23cqw; }   /* never grow past 1/4 of the width (the 4-in-line size) */
.runners.decl .lane{ flex:1 1 0; width:auto; max-width:47cqw; }
.sd-runners .lane  { flex:1 1 0; width:auto; max-width:47cqw; }
.runners .lane .markers{ top:12cqw; width:auto; }
.lane.empty .slot  { width:100%; height:auto; aspect-ratio:5/7; }

/* ---- board layout zones (nearest container = stage) ---- */
.field        { padding:3cqw 3cqw 0; }
.runners      { gap:3cqw; }   /* one gap for every row of players (combat / outfield / mark / wall all match) */
.atk-top      { height:35cqw; }
.atk-mid      { min-height:3cqw; }
.runners.atkruns{ margin:1cqw 0 0; }
.keeper-row   { margin:0 0 -8cqw; }
.tray-wrap    { padding-left:3cqw; padding-right:3cqw; padding-top:3cqw; }

/* ---- board chrome TYPE (direct stage children → cqw of the stage) ---- */
.scorebar          { height:11cqw; }
.sb-team b         { font-size:4cqw; }
.sb-score .dash    { font-size:6cqw; }
.phase .verb       { font-size:3cqw; }
.phase .tag        { font-size:2cqw; }
.commit            { height:13cqw; }
.commit.passrail   { height:13cqw; }
.result .big       { font-size:12cqw; }
.result .reason,.reason{ font-size:3cqw; }
.ht-label          { font-size:3cqw; }
.ht-num,.ht-score  { font-size:13cqw; }
.ht-crest          { font-size:4cqw; }
.setup.onfield .su-head .ttl{ font-size:5cqw; }
.su-form           { font-size:5cqw; }
.wordmark b,.home .wordmark b{ font-size:13cqw; }
.wordmark span,.home .wordmark span{ font-size:3cqw; }
.subhint           { font-size:3cqw; }
.deckbtn           { min-height:14cqw; }



/* ============================================================================
   SETUP — top-right KICK-OFF ring/timer + bench DRAWER (frees the pitch for
   bigger cards). All cqw (relative, anchored to the 430px stage container).
   ========================================================================== */
.setup.onfield{ position:relative; }
.setup.onfield .su-head{ align-items:center; }
.su-headr{ display:flex; align-items:center; gap:2cqw; }

/* GO pill — a depleting ring (CSS anim, resumes via negative delay) + live seconds + KICK OFF */
.su-go{ display:flex; align-items:center; gap:2cqw; height:10cqw; padding:0 4cqw 0 2cqw; border:none; cursor:pointer;
  background:var(--retro-amber); color:var(--retro-ink); border-radius:99px;
  box-shadow:var(--bev-raise),var(--hard-shadow);
  font-family:var(--font-display); font-weight:900; font-size:3cqw; letter-spacing:.04em; text-transform:uppercase; }
.su-go:active{ transform:translate(2px,2px); box-shadow:var(--bev-raise); }
.su-go-ring{ position:relative; width:8cqw; height:8cqw; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.su-ring{ position:absolute; inset:0; width:100%; height:100%; }
.rg-trk{ fill:none; stroke:rgba(20,17,10,.22); stroke-width:5; }
.rg-prg{ fill:none; stroke:var(--retro-ink); stroke-width:5; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center; stroke-dasharray:119.38;
  animation:su-deplete 30s linear forwards; }
@keyframes su-deplete{ from{stroke-dashoffset:0} to{stroke-dashoffset:119.38} }
.su-go-num{ font-family:var(--font-num); font-weight:400; font-size:4cqw; line-height:1; color:var(--retro-ink); }
.su-go-lbl{ white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .rg-prg{ animation:none; } }

/* the pitch owns the screen ABOVE the closed bench drawer. Reserve the drawer's
   peek band as a margin (cqw, width-based — same unit as the drawer reveal) so the
   keeper & back line position within the pitch area and clear the peek at ANY height. */
.su-field{ margin-bottom:22cqw; }
.card.su-pc{ width:28cqw; }
.setup.onfield .su-slot.gk .card.su-pc{ width:26cqw; }

/* ===== bench DRAWER ===== */
.su-drawer{ position:absolute; left:0; right:0; bottom:0; z-index:30;
  background:linear-gradient(180deg,#171310,var(--retro-ink));
  border-top:2px solid var(--retro-amber-d); border-radius:18px 18px 0 0;
  box-shadow:0 -8px 28px rgba(0,0,0,.55);
  transform:translateY(calc(100% - 22cqw - var(--sab)));  /* closed: handle + the TOPS of the bench cards peek, clear of the home-indicator zone */
  transition:transform .3s cubic-bezier(.2,.85,.25,1); }
.su-drawer.armed{ transform:translateY(calc(100% - 12cqw - var(--sab))); }  /* sub armed: only the handle — keep the pitch clear to pick who comes off */
.su-drawer.open{ transform:translateY(0); }
.su-handle{ position:relative; width:100%; height:12cqw; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:2cqw;
  font-family:var(--font-display); font-weight:900; font-size:3cqw; letter-spacing:.12em;
  text-transform:uppercase; color:var(--retro-bone); }
.su-handle .su-chev{ color:var(--retro-amber); font-size:4cqw; }
.su-handle.armed{ justify-content:flex-start; padding:0 4cqw; color:var(--retro-amber); background:rgba(246,182,23,.1); }
.su-handle.armed .su-handle-lbl{ font-size:3cqw; letter-spacing:.05em; }
.su-cancel{ position:absolute; right:3cqw; top:50%; transform:translateY(-50%); z-index:2;
  width:7cqw; height:7cqw; border-radius:99px; border:none; cursor:pointer;
  background:var(--retro-well); color:var(--retro-bone); font-size:3cqw; box-shadow:var(--bev-inset); }
.su-drawer-body{ padding:0.5cqw 3cqw calc(5cqw + var(--sab)); }   /* bottom row of bench cards stays out of the home-indicator swipe zone */
.su-drawer .su-bench{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:7cqw 7cqw; overflow:visible; padding-top:1cqw; }
.su-drawer .su-bcard{ flex:0 0 auto; }
.su-drawer .card.su-bc{ width:26cqw; }                  /* big bench cards in the open drawer */



/* ============================================================================
   SETUP CARD = the WHOLE Sorare card + a MINIMAL overlay. We no longer overlay
   the player name/position (the card already bakes them) or mask the art — we
   match the card's real aspect (771x1248) and show it edge-to-edge, then drop
   ONLY our game data into the nebula beside the head: stats top-right, abilities
   top-left. All cqw = % of the card's own width (card is a container).
   ========================================================================== */
.card.su-pc, .card.su-bc{
  aspect-ratio:771 / 1248; height:auto;
  background-size:cover !important; background-position:center !important;   /* full card, no zoom/crop */
  background-color:transparent;
  border:none; border-radius:5cqw; overflow:hidden;
  box-shadow:0 4cqw 9cqw rgba(0,0,0,.5);
}
.card.su-pc{ width:25cqw; }
.setup.onfield .su-slot.gk .card.su-pc{ width:24cqw; }
.su-drawer .card.su-bc{ width:25cqw; }

/* combat stats — top-right, below the baked "sorare" serial, over the nebula beside the head */
.su-stats{ position:absolute; top:12.5%; right:5%; z-index:4; display:flex; flex-direction:column; gap:2cqw; align-items:flex-end; }
.su-stat{ display:inline-flex; align-items:center; gap:1cqw; height:17cqw; padding:0 3cqw; border-radius:3cqw;
  background:rgba(6,9,7,.62); box-shadow:0 .6cqw 2cqw rgba(0,0,0,.55), inset 0 0 0 .4cqw rgba(255,255,255,.16);
  font-family:var(--font-num); font-weight:400; color:#fff; }
.su-stat svg{ width:9cqw; height:9cqw; }
.su-stat b{ font-size:13cqw; line-height:1; }
.su-stat.atk svg{ fill:var(--retro-amber); } .su-stat.def svg{ fill:var(--retro-teal); } .su-stat.save svg{ fill:var(--retro-teal); }

/* ability icons — top-left, below the baked league crest */
.su-abils{ position:absolute; top:12.5%; left:5%; z-index:4; display:flex; flex-direction:column; gap:2cqw; align-items:flex-start; }
.su-ab{ display:inline-flex; align-items:center; gap:.8cqw; height:12cqw; padding:0 2cqw; border-radius:3cqw;
  background:rgba(6,9,7,.66); box-shadow:0 .6cqw 2cqw rgba(0,0,0,.5), inset 0 0 0 .5cqw rgba(246,182,23,.45); }
.su-ab svg{ width:7cqw; height:7cqw; fill:var(--retro-cream); }
.su-ab b{ font-family:var(--font-num); font-weight:400; font-size:8cqw; color:var(--retro-cream); }



/* ============================================================================
   SETUP CARD v2 — let the card SHINE: raw Sorare PNG (transparent corners = its
   own shape), NO frame/radius/bg of ours, just a drop-shadow that hugs the
   silhouette. Stats/abilities are STUCK ON the edges (overhang), not inside the
   art, and bigger/legible. Overlays are SIBLINGS of the card (so the card's
   drop-shadow filter doesn't catch them). cqw here = % of the .setup container.
   ========================================================================== */
.su-slot{ overflow:visible; }
.su-bcard{ position:relative; overflow:visible; }

.card.su-pc, .card.su-bc{
  aspect-ratio:771 / 1248; height:auto;
  background-size:cover !important; background-position:center !important; background-color:transparent;
  border:none !important; border-radius:0 !important; overflow:visible; box-shadow:none !important;
  filter:drop-shadow(0 2cqw 2cqw rgba(0,0,0,.6));   /* follows the card's real shape */
}
.su-slot.swap-ok .card{ filter:drop-shadow(0 0 2cqw var(--retro-amber)) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.55)); cursor:pointer; }
.su-slot.locked .card{ filter:grayscale(.65) brightness(.48); opacity:.5; }
.su-slot.locked .su-stats, .su-slot.locked .su-abils{ opacity:.35; }

/* combat stats — stuck on the RIGHT edge, overhanging out; the hero numbers */
.su-stats{ position:absolute; top:6.5%; right:-2cqw; z-index:5; display:flex; flex-direction:column; gap:1cqw; align-items:flex-end; }
.su-stat{ display:inline-flex; align-items:center; gap:.9cqw; height:6cqw; padding:0 2cqw; border-radius:2cqw;
  background:rgba(8,11,9,.86); box-shadow:0 .5cqw 2cqw rgba(0,0,0,.6), inset 0 0 0 .28cqw rgba(255,255,255,.2);
  font-family:var(--font-num); font-weight:400; color:#fff; }
.su-stat svg{ width:4cqw; height:4cqw; }
.su-stat b{ font-size:4cqw; line-height:1; }
.su-stat.atk svg{ fill:var(--retro-amber); } .su-stat.def svg{ fill:var(--retro-teal); } .su-stat.save svg{ fill:var(--retro-teal); }

/* abilities — stuck on the LEFT edge, overhanging out; subordinate (cream + amber ring) */
.su-abils{ position:absolute; top:6.5%; left:-2cqw; z-index:5; display:flex; flex-direction:column; gap:1cqw; align-items:flex-start; }
.su-ab{ display:inline-flex; align-items:center; gap:.7cqw; height:5cqw; padding:0 1cqw; border-radius:1cqw;
  background:rgba(8,11,9,.84); box-shadow:0 .5cqw 2cqw rgba(0,0,0,.55), inset 0 0 0 .28cqw rgba(246,182,23,.5); }
.su-ab svg{ width:3cqw; height:3cqw; fill:var(--retro-cream); }
.su-ab b{ font-family:var(--font-num); font-weight:400; font-size:4cqw; color:var(--retro-cream); }



/* ============================================================================
   SETUP stats as SHAPED BADGES — drop the icon, the shape carries the meaning,
   the number sits inside. ATK = up-pennant (amber), DEF = shield (teal),
   SAVE = octagon/stop (teal). clip-path clips box-shadow, so depth = drop-shadow.
   ========================================================================== */
.su-stats{ gap:2cqw; }
.su-stat{ position:relative; display:flex; align-items:center; justify-content:center;
  width:8cqw; height:8cqw; padding:0; border-radius:0; box-shadow:none; background:transparent;
  filter:drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.6)); }
.su-stat svg{ display:none; }                                   /* icon removed */
.su-stat b{ font-family:var(--font-num); font-weight:400; font-size:5cqw; line-height:1;
  color:var(--retro-ink); position:relative; z-index:1; }

.su-stat.atk{ background:var(--retro-amber);
  clip-path:polygon(50% 0, 100% 27%, 100% 100%, 0 100%, 0 27%); }   /* up-pennant */
.su-stat.atk b{ transform:translateY(20%); }                        /* sit in the body, below the point */

.su-stat.def{ background:var(--retro-teal);
  clip-path:polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }      /* shield */
.su-stat.def b{ transform:translateY(-16%); }                       /* sit in the body, above the point */

.su-stat.save{ background:var(--retro-teal);
  clip-path:polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }  /* octagon */



/* ============================================================================
   SETUP stat badges — RETRO styling. SVG shape (fill + bold border), chunky ink
   Anton numeral, hard offset shadow (Fox-Box signature). Square badge → uniform
   stroke under preserveAspectRatio:none.
   ========================================================================== */
.su-stats{ gap:2cqw; }
.su-stat{ position:relative; width:9cqw; height:9cqw; display:flex; align-items:center; justify-content:center;
  background:transparent !important; clip-path:none !important; padding:0;
  filter:drop-shadow(.55cqw .55cqw 0 rgba(0,0,0,.82)); }      /* hard offset = retro */
.su-stat svg.su-shape{ display:block !important; position:absolute; inset:0; width:100% !important; height:100% !important; overflow:visible; }
.su-stat .su-shape polygon{ stroke:#0b0b09; stroke-width:7.5; stroke-linejoin:round; }
.su-stat.atk .su-shape polygon{ fill:var(--retro-amber); }
.su-stat.def .su-shape polygon{ fill:var(--retro-teal); }
.su-stat.save .su-shape polygon{ fill:var(--retro-teal); }
.su-stat b{ position:relative; z-index:1; font-family:var(--font-num); font-weight:400; line-height:1;
  font-size:5cqw; color:var(--retro-ink); text-shadow:0 .3cqw 0 rgba(0,0,0,.18); }
.su-stat.atk b{ transform:translateY(17%); }      /* sit in the body, below the point */
.su-stat.def b{ transform:translateY(-13%); }     /* sit in the body, above the point */

/* ability pills — match the retro hard shadow + bold border for a cohesive overlay set */
.su-ab{ box-shadow:none !important; border:.4cqw solid #0b0b09; background:var(--retro-ink) !important;
  filter:drop-shadow(.45cqw .45cqw 0 rgba(0,0,0,.7)); }
.su-ab svg{ fill:var(--retro-amber); }            /* amber glyph reads as the "ability" accent */
.su-ab b{ color:var(--retro-cream); }



/* ── TUNING (real-device pass): smaller cards so rows keep a margin even when iOS
   Safari's URL bar shrinks dvh; smaller stat/ability badges (less overpowering). ── */
.card.su-pc{ width:21cqw; }
.setup.onfield .su-slot.gk .card.su-pc{ width:20cqw; }

.su-stats{ gap:2cqw; }
.su-stat{ width:7cqw; height:7cqw; filter:drop-shadow(.45cqw .45cqw 0 rgba(0,0,0,.82)); }
.su-stat b{ font-size:4cqw; }

.su-abils{ gap:.9cqw; }
.su-ab{ height:4cqw; padding:0 1cqw; filter:drop-shadow(.38cqw .38cqw 0 rgba(0,0,0,.7)); }
.su-ab svg{ width:3cqw; height:3cqw; }
.su-ab b{ font-size:3cqw; }



/* ── ability colour CODE: amber = attacker instants (GOAL/ASSIST), teal = defender instants (LMT/OLC) ── */
.su-ab.goal svg, .su-ab.assist svg{ fill:var(--retro-amber); }
.su-ab.lmt svg,  .su-ab.otl svg{ fill:var(--retro-teal); }
.su-ab.goal b{ color:var(--retro-amber); }                 /* the +X reads as the attack accent */



/* ── BARE abilities: drop the pill/container, the ICON is the identity — big, with a
   4-way dark outline + hard offset so it reads over any art. GOAL = Super-Mario "+X". ── */
.su-abils{ gap:2cqw; left:-1cqw; top:5%; align-items:flex-start; }
.su-ab{ background:none !important; border:none !important; box-shadow:none !important;
  filter:none !important; padding:0 !important; height:auto !important; min-height:0 !important; border-radius:0 !important; }
.su-ab svg{ width:6cqw !important; height:6cqw !important;
  filter:drop-shadow(1px 0 0 #0a0a08) drop-shadow(-1px 0 0 #0a0a08) drop-shadow(0 1px 0 #0a0a08) drop-shadow(0 -1px 0 #0a0a08) drop-shadow(.4cqw .45cqw 0 rgba(0,0,0,.7)); }

/* GOAL = bold Mario "+X": Anton, amber, hard black outline + offset shadow */
.su-ab.goal{ display:flex; }
.su-ab.goal b{ font-family:var(--font-num); font-weight:400; font-size:7cqw; line-height:.85; color:var(--retro-amber);
  -webkit-text-stroke:.42cqw #0a0a08; paint-order:stroke fill;
  text-shadow:.1em .12em 0 rgba(0,0,0,.85); letter-spacing:-.03em; }



/* ── UNIFY the abilities into one world: the +X and the icons share the SAME bold black
   outline (real stroke / text-stroke) + the SAME hard offset shadow. ── */
.su-ab svg{ stroke:#0a0a08; stroke-width:3; paint-order:stroke; stroke-linejoin:round;
  filter:drop-shadow(.5cqw .55cqw 0 rgba(0,0,0,.85)) !important; }
.su-ab.goal b{ -webkit-text-stroke:.36cqw #0a0a08; paint-order:stroke fill;
  text-shadow:.5cqw .55cqw 0 rgba(0,0,0,.85); }



/* ── match the GOAL +X to the icon size (it was overshooting, looked ~2x taller) ── */
.su-ab.goal b{ font-size:5cqw; line-height:1; }
.su-ab.goal{ align-items:center; }



/* ── match the icons' line/shadow WEIGHT to the lighter +X: thinner stroke, softer shadow ── */
.su-ab svg{ stroke-width:1.5 !important;
  filter:drop-shadow(.34cqw .38cqw 0 rgba(0,0,0,.7)) !important; }
.su-ab.goal b{ -webkit-text-stroke:.26cqw #0a0a08; text-shadow:.34cqw .38cqw 0 rgba(0,0,0,.7); }



/* ── CORRECTION: icons stay BOLD; thicken the +X to match them (not the reverse) ── */
.su-ab svg{ stroke-width:3 !important;
  filter:drop-shadow(.5cqw .55cqw 0 rgba(0,0,0,.85)) !important; }
.su-ab.goal b{ -webkit-text-stroke:.55cqw #0a0a08; paint-order:stroke fill;
  text-shadow:.5cqw .55cqw 0 rgba(0,0,0,.85); }



/* ── uniform bounding box for every ability + widen the +X to fill it + fix its shadow ── */
.su-ab{ width:6cqw !important; height:6cqw !important; display:flex; align-items:center; justify-content:center; }
.su-ab svg{ width:100% !important; height:100% !important; }
/* GOAL +X: drop-shadow (follows the outlined glyph → no gap, matches icons); widen to fill the box */
.su-ab.goal b{ font-size:5cqw; line-height:1; letter-spacing:-.03em;
  transform:scaleX(1.33); transform-origin:center;
  text-shadow:none !important; filter:drop-shadow(.5cqw .55cqw 0 rgba(0,0,0,.85)); }



/* ── GOAL +X as SVG text: uniform width via textLength, fills the box like the icons ── */
.su-ab.goal .su-shape{ overflow:visible; }
.su-ab.goal .su-shape text{ font-family:var(--font-num); font-weight:400; font-size:17px; fill:var(--retro-amber); }



/* ── GOAL +X back to proportional HTML text, sized to match the football's visible size ── */
.su-ab.goal{ display:flex; align-items:center; justify-content:center; }
.su-ab.goal b{ font-size:4cqw !important; line-height:1; transform:none !important; letter-spacing:-.03em;
  color:var(--retro-amber); -webkit-text-stroke:.5cqw #0a0a08; paint-order:stroke fill;
  text-shadow:none !important; filter:drop-shadow(.5cqw .55cqw 0 rgba(0,0,0,.85)); }



/* ── balance the +X: enlarge the tiny "+" so it matches the digit weight (centered) ── */
.su-ab.goal b{ font-size:4cqw !important; gap:0; }
.su-ab.goal b .pl{ font-size:1.5em; line-height:0; }



/* ── move ATK/DEF/SAVE badges to the BOTTOM-RIGHT corner + tighten their vertical gap ── */
.su-stats{ top:auto !important; bottom:5%; right:-2cqw; gap:.4cqw; }



/* ── stats overflow the BOTTOM edge too (like the right); abilities → TOP-RIGHT, aligned to the same right edge ── */
.su-stats{ bottom:-2cqw; right:-2cqw; }
.su-abils{ left:auto; right:-2cqw; align-items:flex-end; top:5%; }



/* ============================================================================
   ABILITIES as a wrap-around RIBBON embracing the card's left edge (icons inside).
   ========================================================================== */
.su-abils{ position:absolute; top:9%; left:-4cqw; right:auto !important; bottom:auto !important;
  width:auto; height:auto; flex-direction:row; align-items:flex-start; gap:0; z-index:7; overflow:visible;
  filter:drop-shadow(.4cqw .7cqw .5cqw rgba(0,0,0,.45)); }

.su-ribbon{ position:relative; display:flex; flex-direction:row; align-items:center; gap:1cqw;
  height:8cqw; padding:0 4cqw 0 4cqw;
  background:linear-gradient(180deg,#7d2731 0%,#581a22 55%,#3c1018 100%);
  clip-path:polygon(0 0, calc(100% - 2cqw) 0, 100% 50%, calc(100% - 2cqw) 100%, 0 100%); }
.su-ribbon::after{ content:""; position:absolute; left:2cqw; right:3cqw; top:1cqw; bottom:1cqw;
  border-top:.3cqw dashed rgba(246,236,207,.5); border-bottom:.3cqw dashed rgba(246,236,207,.5); pointer-events:none; }

/* the wrap fold tucked behind the card's left edge (darker, points down) */
.su-rib-fold{ position:absolute; left:0; top:8cqw; width:0; height:0; z-index:-1;
  border-top:3cqw solid #2a0a10; border-right:3cqw solid transparent; }

/* icons inside the ribbon — lighter (the ribbon frames them) */
.su-ribbon .su-ab{ width:5cqw !important; height:5cqw !important; }
.su-ribbon .su-ab svg{ filter:none !important; }
.su-ribbon .su-ab.goal b{ filter:none !important; font-size:3cqw !important; }



/* ============================================================================
   ONE TINY retro ribbon per ability — top-right, colour-coded by side, no stitching.
   Each: a .su-rib band (clip-path shape + retro gradient) + a .su-rib-fold (wrap fold,
   sibling so the clip doesn't eat it). Icon/number in INK (like the stat badges).
   ========================================================================== */
.su-abils{ position:absolute !important; top:5% !important; right:-1cqw !important; left:auto !important; bottom:auto !important;
  display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:2cqw !important;
  width:auto; height:auto; z-index:7; overflow:visible; filter:none; }

.su-ribwrap{ position:relative; display:block; filter:drop-shadow(.3cqw .34cqw 0 rgba(0,0,0,.5)); }
.su-rib{ position:relative; display:flex; align-items:center; justify-content:center;
  height:4cqw; min-width:6cqw; padding:0 1cqw 0 2cqw;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 1cqw 50%); }   /* forked tail on the left (free end) */
.su-ribwrap.atkside .su-rib{ background:linear-gradient(180deg,#ffd866 0%,var(--retro-amber) 52%,var(--retro-amber-d) 100%); }
.su-ribwrap.defside .su-rib{ background:linear-gradient(180deg,#43e8cf 0%,var(--retro-teal) 52%,var(--retro-teal-d) 100%); }

/* the wrap fold tucked behind the right edge (darker shade) */
.su-rib-fold{ position:absolute; right:0; top:2cqw; width:0; height:0; z-index:-1; }
.su-ribwrap.atkside .su-rib-fold{ border-bottom:.85cqw solid var(--retro-amber-d); border-left:1cqw solid transparent; }
.su-ribwrap.defside .su-rib-fold{ border-bottom:.85cqw solid var(--retro-teal-d); border-left:1cqw solid transparent; }

/* icon/number in ink on the coloured ribbon */
.su-rib .su-ab{ width:3cqw !important; height:3cqw !important; }
.su-rib .su-ab svg{ fill:var(--retro-ink) !important; stroke:none !important; filter:none !important; }
.su-rib .su-ab.goal{ width:auto !important; }
.su-rib .su-ab.goal b{ color:var(--retro-ink) !important; -webkit-text-stroke:0 !important; filter:none !important; font-size:2cqw !important; }
.su-rib .su-ab.goal b .pl{ font-size:1.45em; }


/* drop the wraparound fold (it showed over the card) */
.su-rib-fold{ display:none !important; }


/* ── match the stat badges: black border (4-way outline on the clip shape) + hard shadow + chunky ink font ── */
.su-ribwrap{ filter:none !important; }
.su-rib{ filter:
  drop-shadow(1.3px 0 0 #0b0b09) drop-shadow(-1.3px 0 0 #0b0b09)
  drop-shadow(0 1.3px 0 #0b0b09) drop-shadow(0 -1.3px 0 #0b0b09)
  drop-shadow(.32cqw .36cqw 0 rgba(0,0,0,.55)) !important; }
.su-rib .su-ab.goal b{ font-size:3cqw !important; font-weight:400; }



/* ── simplify the ribbon shape (drop clip-path) so it can take a REAL thick border like the stats ── */
.su-rib{ clip-path:none !important; border:2px solid #0b0b09; border-radius:.8cqw;
  filter:none !important; box-shadow:.34cqw .4cqw 0 rgba(0,0,0,.6); }



/* ============================================================================
   ABILITIES as mini badges — SAME construction/border as the stat badges
   (SVG hexagon polygon + stroke-width 7.5 + ink content + hard shadow).
   Colour-coded by side. Fresh classes (.abils/.abil) → none of the old
   .su-ab and .su-rib override cruft applies (that dead CSS to be swept later).
   ========================================================================== */
.abils{ position:absolute; top:-4cqw; right:-2cqw; z-index:7;
  display:flex; flex-direction:row; align-items:flex-start; gap:.4cqw; }
.abil{ position:relative; width:6cqw; height:6cqw; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(.5cqw .55cqw 0 rgba(0,0,0,.82)); }
.abil .abil-bg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.abil .abil-bg polygon{ stroke:#0b0b09; stroke-width:7.5; stroke-linejoin:round; }
.abil.atk .abil-bg polygon{ fill:var(--retro-amber); }
.abil.def .abil-bg polygon{ fill:var(--retro-teal); }
/* content in INK, like the stat numerals */
.abil .abil-ico{ position:relative; z-index:1; width:60%; height:60%; }
.abil .abil-ico path{ fill:var(--retro-ink) !important; stroke:none !important; }
.abil .abil-num{ position:relative; z-index:1; font-family:var(--font-num); font-weight:400; color:var(--retro-ink);
  font-size:3cqw; line-height:1; display:inline-flex; align-items:center; }
.abil .abil-num .pl{ font-size:1.45em; }

/* setup FIELD cards: abilities are only a PREVIEW here (they go live in-match) →
   render the stamps in a disabled (desaturated + faded) state. Bench stays full
   colour so you can read what each sub brings. */
.su-slot .abils .abil{ filter:grayscale(1) opacity(.42) drop-shadow(.4cqw .45cqw 0 rgba(0,0,0,.45)); }

/* ============================================================================
   GAMEPLAY CARDS (2026-06-06) — two self-contained faces, both sized in cqw of
   the CARD (every .card/.dcard/.marker/.keeper/.wallcard is already a container),
   so the stamps scale per card at any size.
   • PITCH `.mini`  = TOP HALF of the Sorare art + combat stats hanging off the
     CENTRE-RIGHT edge (no chyron). runners/keeper/markers/wall/trays/sub-slots.
   • HAND  `.gfull` = the FULL setup card (art + stat badges bottom-right + ability
     stamps top-right, the playable one lit). the react/showdown/sub fans.
   ========================================================================== */

/* ---- MINI (pitch): crop to the top half of the 771x1248 card ---- */
.card.mini, .marker.mini, .keeper.mini, .wallcard.mini, .dcard.mini{
  aspect-ratio:771 / 832 !important; height:auto !important; min-height:0 !important;   /* 2/3 of the 1248-tall card */
  align-self:center !important;                    /* don't let a flex parent (.tray/.runners) stretch us → aspect can derive height */
  background-size:100% auto !important;            /* full width; natural height → bottom third clips off */
  background-position:center top !important;
  background-color:transparent;
  border:none !important; border-radius:0 !important; overflow:visible !important;
  box-shadow:none !important;
  filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5));
}
/* bottom FADE — soften the crop edge so the card melts into the pitch. A scrim (not a mask) so it
   can't clip the stat badges that overhang the right edge; sits BELOW them (z:2 vs stats z:5). */
.mini:not(.marker){ position:relative; }           /* anchor the scrim to the card (markers are already positioned) */
.mini::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,11,10,0), rgba(8,11,10,.42) 52%, rgba(8,11,10,.9)); }

/* ---- shared shaped STAT badge (pennant ATK / shield DEF / octagon SAVE) ---- */
.gstats{ position:absolute; z-index:5; display:flex; flex-direction:column; }
.mini  .gstats{ top:50%; right:-9cqw; transform:translateY(-50%); align-items:center; gap:.6cqw; }  /* hang off centre-right */
.gfull .gstats{ bottom:-6cqw; right:-8cqw; align-items:center; gap:.4cqw; }                          /* bottom-right, centre-aligned under the abilities column */
.gstat{ position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(14px, 33cqw, 30px); height:clamp(14px, 33cqw, 30px);
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.85)); }
.gstat .gshape{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gstat .gshape polygon{ stroke:#0b0b09; stroke-width:7.5; stroke-linejoin:round; }
.gstat.atk  .gshape polygon{ fill:var(--retro-amber); }
.gstat.def  .gshape polygon{ fill:var(--retro-teal); }
.gstat.save .gshape polygon{ fill:var(--retro-teal); }
.gstat b{ position:relative; z-index:1; font-family:var(--font-num); font-weight:400; line-height:1;
  color:var(--retro-ink); font-size:clamp(8px, 18cqw, 17px); }
.gstat.atk b{ transform:translateY(17%); }      /* tuck below the pennant point */
.gstat.def b{ transform:translateY(-13%); }     /* tuck above the shield point */

/* ---- FULL (hand): the whole Sorare card ---- */
.handcard.gfull{
  width:84px; aspect-ratio:771 / 1248 !important; height:auto !important; min-height:0 !important;
  background-size:cover !important; background-position:center top !important;
  background-color:transparent;
  border:none !important; border-radius:0 !important; overflow:visible !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));
}
/* ability stamps (hand only) — hexagon, top-right overhang, playable one lit */
.gabils{ position:absolute; z-index:7; display:flex; flex-direction:row; align-items:flex-start; gap:.5cqw; }
.gfull .gabils{ top:-4cqw; right:-8cqw; flex-direction:column; align-items:center; gap:.6cqw; }   /* vertical strip hanging DOWN from the top-right corner, centred over the stats */
.gabil{ position:relative; width:clamp(15px, 30cqw, 28px); height:clamp(15px, 30cqw, 28px);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.82)); }
.gabil .gabil-bg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gabil .gabil-bg polygon{ stroke:#0b0b09; stroke-width:7.5; stroke-linejoin:round; }
.gabil.atk .gabil-bg polygon{ fill:var(--retro-amber); }
.gabil.def .gabil-bg polygon{ fill:var(--retro-teal); }
.gabil .gabil-ico{ position:relative; z-index:1; width:60%; height:60%; }
.gabil[data-act]::after{ content:""; position:absolute; inset:-9px; }   /* invisible hit pad for the tappable OTL pip (defender showdown) — no visual change */
.gabil .gabil-ico path{ fill:var(--retro-ink) !important; stroke:none !important; }
.gabil .gabil-num{ position:relative; z-index:1; font-family:var(--font-num); font-weight:400;
  color:var(--retro-ink); font-size:clamp(8px, 16cqw, 15px); line-height:1; display:inline-flex; align-items:center; }
.gabil .gabil-num .pl{ font-size:1.45em; }
.gabil.live{ filter:drop-shadow(0 0 3px var(--retro-amber)) drop-shadow(1px 1px 0 rgba(0,0,0,.82)); }


/* ============================================================================
   DECLARE = DRAG-TO-ATTACK (2026-06-06). Drag a tray player UP into the central
   combat zone (or tap, as before) to send them as a runner. Runners here are a
   CONSISTENT size — no flex-grow — so picking just 1-2 no longer blows them up.
   ========================================================================== */
.atk-combat{ flex:1 1 auto; min-height:30cqw; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqw;
  border-radius:4cqw; transition:background .14s ease, box-shadow .14s ease; }
/* the drop zone wears a SLANTED border frame (mirrors the phase chip's skewX slant) — drawn on a skewed
   ::before so the runner cards inside stay upright. Accent = the attacking pink. */
.atk-combat::before{ content:''; position:absolute; inset:4cqw 2cqw; z-index:0; pointer-events:none;
  border:.5cqw solid color-mix(in srgb, var(--save) 42%, transparent); border-radius:5px; transform:skewX(-11deg);
  background:color-mix(in srgb, var(--save) 5%, transparent); transition:border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.atk-combat.drop-armed::before{ border-color:color-mix(in srgb, var(--save) 70%, transparent); background:color-mix(in srgb, var(--save) 8%, transparent); }
.atk-combat.drop-hover::before{ border-color:var(--save); background:color-mix(in srgb, var(--save) 15%, transparent); box-shadow:0 0 14px rgba(147,232,58,.4); }
.atk-combat .runners.atkruns{ margin:0; flex-wrap:wrap; position:relative; z-index:1; }   /* runners above the slanted frame */
/* the drop-zone hint = white label, centred by the zone's own flex (no chip, no icon). Hidden once a runner lands. */
.combat-hint{ position:relative; z-index:1; pointer-events:none; text-align:center;
  font-family:var(--font-display); font-style:italic; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  font-size:15px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.atk-combat:has(.runners.atkruns .lane) .combat-hint{ display:none; }
.atk-combat .runners.atkruns:empty{ display:none; }   /* no empty box (its flex gap would offset the centred hint) */
.atk-combat .runners.atkruns .lane{ flex:0 0 auto !important; width:21cqw !important; max-width:21cqw !important; }
.combat-empty{ display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none;
  font-family:var(--font-display); font-weight:900; letter-spacing:.14em; font-size:3cqw; line-height:1.35; text-transform:uppercase;
  color:rgba(246,236,207,.42); border:.4cqw dashed rgba(246,236,207,.20); border-radius:3cqw; padding:5cqw 7cqw; max-width:62cqw; }

/* ============================================================================
   ATTACK-SIDE COVER (2026-06-06) — when YOU attack, the opponent's defender shows
   ABOVE your runner (face to face) and STEPS DOWN into place (.mk-in) on entry
   instead of popping. Runners are a consistent size; the row reserves space above
   each. Scoped to react-attack via .atkruns.atk-cover (showdown is untouched).
   High specificity + !important to beat legacy `.runners .lane .markers` (0,3,0).
   ========================================================================== */
.runners.atkruns.atk-cover{ margin-top:18cqw; align-items:flex-start; }
.runners.atkruns.atk-cover .lane{ flex:0 0 auto !important; width:21cqw !important; max-width:21cqw !important; position:relative; }
/* the ATTACKER keeps the SAME size, bright & un-lifted whether free or covered — override the legacy
   `.lane.open .runner{scale(1.04)}` / `.lane.covered .runner{scale(.9) translateY(-26px) brightness(.62)}`. */
.atk-cover .lane.open .runner, .atk-cover .lane.covered .runner{ transform:none; }   /* (0,4,0) beats legacy without !important, so the runner-out animation can still move it */
.atk-cover .lane.covered .runner{ filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)); }   /* no !important → the assist-target pulse can override */
/* the DEFENDER: SMALLER than the attacker, sitting just ABOVE it — face to face, NO overlap. */
.atk-cover .lane.mk-above .markers{ position:absolute; left:50% !important; top:auto !important; bottom:calc(100% + 0.6cqw);
  transform:translateX(-50%); width:100% !important; height:auto !important; z-index:4; display:flex; justify-content:center; align-items:flex-end; }
.atk-cover .lane.mk-above .markers .marker.mini{ position:relative !important; left:auto !important; top:auto !important; margin-left:0 !important; width:72% !important; }
.atk-cover .lane.mk-above .markers .marker.mini.f2,
.atk-cover .lane.mk-above .markers .marker.mini.f3{ margin-left:-32% !important; }   /* gang-mark overlap */
.atk-cover .lane.mk-above .markers.mk-in{ animation:coverStepIn .34s cubic-bezier(.2,.85,.25,1) both; }
@keyframes coverStepIn{ from{ opacity:0; transform:translate(-50%, -22cqw); } to{ opacity:1; transform:translate(-50%, 0); } }

/* ===== assist / combat-damage choreography ===== */
/* ASSIST played: the beaten defender dims in place (post-assist pause) */
.atk-cover .lane.mk-above .markers.mk-beaten{ filter:grayscale(1) brightness(.55); opacity:.45; transition:filter .3s ease, opacity .3s ease; }
/* combat-damage count-down: highlight the stat being reduced */
.gstat.dmg{ animation:dmgFlash 1.1s ease both; }
.gstat.dmg .gshape polygon{ stroke:var(--retro-amber) !important; }
@keyframes dmgFlash{ 0%{ filter:drop-shadow(0 0 0 rgba(246,182,23,0)); } 30%{ filter:drop-shadow(0 0 3px var(--retro-amber)) brightness(1.25); } 100%{ filter:drop-shadow(0 0 1.5px rgba(246,182,23,.5)); } }
/* resolved players leave: covering defenders step UP off, stopped attackers drop DOWN away */
.atk-cover .markers.mk-out{ animation:mkUpOut .42s cubic-bezier(.4,0,.7,.4) forwards; }
@keyframes mkUpOut{ 0%{ transform:translate(-50%,0); opacity:1; } 70%,100%{ opacity:0; } 100%{ transform:translate(-50%,-42cqw); } }
.atk-cover .card.runner.runner-out{ animation:runDownOut .42s cubic-bezier(.4,0,.7,.4) forwards; }
@keyframes runDownOut{ 0%{ transform:translateY(0); opacity:1; } 70%,100%{ opacity:0; } 100%{ transform:translateY(40cqw); } }

/* EVERY drop target PULSES (no border ring) — one animation, accent colour per type via --pulse-col */
.lane.assist-target{ --pulse-col:var(--gold); }
.lane.lmt-target{ --pulse-col:var(--save); }
.lane.pump-target{ --pulse-col:var(--atk); }
.lane.subslot.sub-target{ --pulse-col:var(--def); }
.lane.open.legal{ --pulse-col:var(--save); }                              /* mark-assign target → lime */
/* kill the old border halos on every target — incl. the MARK legal-lane halo (the gold box drawn around
   the attacker you're dragging a defender onto); the card pulse below is the only highlight */
body.hand-lifting .lane.assist-target::before,
body.hand-lifting .lane.lmt-target::before,
.lane.pump-target::before,
body.hand-lifting .lane.subslot.sub-target::before,
.lane.legal::before,
.lane.legal.drop-hover::before{ display:none !important; }
.lane.subslot.sub-target{ border:none !important; box-shadow:none !important; background:none !important; }
/* valid targets pulse ONLY while you're holding/dragging a card (a card lifted, or a defender armed) — never constantly */
body.hand-lifting .lane.assist-target .card.runner,
body.hand-lifting .lane.lmt-target .card.runner,
body.hand-lifting .lane.subslot.sub-target .card,
.lane.open.legal .card.runner{ animation:targetPulse 1s ease-in-out infinite; }
/* HOVER (a card dragged over a target) FREEZES the pulse SOLID — held at peak glow, no strobe — on the hovered
   target AND every neighbouring target, so the whole set goes calm the moment you aim at one */
body:has(.lane.drop-hover) .lane.assist-target .card.runner,
body:has(.lane.drop-hover) .lane.lmt-target .card.runner,
body:has(.lane.drop-hover) .lane.subslot.sub-target .card,
.lane.drop-hover .card.runner, .lane.drop-hover .card{
  animation:none !important;
  filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)) drop-shadow(0 0 8px var(--pulse-col, var(--gold))) drop-shadow(0 0 3px var(--pulse-col, var(--gold))) !important; }
/* MARK hover: only the hovered target glows — the OTHER legal targets go calm (stop pulsing, no glow) */
body:has(.lane.drop-hover) .lane.open.legal:not(.drop-hover) .card.runner{
  animation:none !important; filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)) !important; }
@keyframes targetPulse{
  0%,100%{ filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)) drop-shadow(0 0 0 transparent); }
  50%{ filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)) drop-shadow(0 0 8px var(--pulse-col, var(--gold))) drop-shadow(0 0 3px var(--pulse-col, var(--gold))); }
}

/* GK SHOWDOWN: runners scale up only a LITTLE (constrained, was flex-grow → ~44cqw for one), with a
   clear gap; stat badges scale PROPORTIONALLY with the bigger card (no px cap). Both attacker & defender. */
.runners.sd-field{ gap:7cqw !important; flex-wrap:wrap; }
.runners.sd-field .lane{ flex:0 0 auto !important; width:26cqw !important; max-width:26cqw !important; }   /* up to 3 fit one row with a wider gap; 4 wraps (rare) */
.sd-field .gstat{ width:33cqw; height:33cqw; }
.sd-field .gstat b{ font-size:18cqw; }

/* ============================================================================
   DEFEND matchup (mark + react-defend) — mirror of atk-cover, FLIPPED: the opponent's
   ATTACKERS sit on top (consistent size), YOUR DEFENDER sits BELOW it (face to face,
   smaller, no overlap) so the active player's (your) cards stay nearest the POV. The
   just-assigned defender slides UP into place.
   ========================================================================== */
.runners.def-cover{ margin-bottom:20cqw; align-items:flex-start; }
.runners.def-cover .lane{ flex:0 0 auto !important; width:21cqw !important; max-width:21cqw !important; position:relative; }
/* attacker keeps a consistent size, bright & un-lifted (override legacy .open scale(1.04)/.covered scale(.9)+dim) */
.def-cover .lane.open .runner, .def-cover .lane.covered .runner{ transform:none; }
.def-cover .lane.covered .runner{ filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)); }
/* the DEFENDER: SMALLER, sitting just BELOW the attacker — face to face, no overlap */
.def-cover .lane.dc-lane .markers{ position:absolute; left:50% !important; top:calc(100% + 0.6cqw); bottom:auto !important;
  transform:translateX(-50%); width:100% !important; height:auto !important; z-index:4; display:flex; justify-content:center; align-items:flex-start; }
.def-cover .lane.dc-lane .markers .marker.mini{ position:relative !important; left:auto !important; top:auto !important; margin-left:0 !important; width:72% !important; }
.def-cover .lane.dc-lane .markers .marker.mini.f2,
.def-cover .lane.dc-lane .markers .marker.mini.f3{ margin-left:-32% !important; }   /* gang-mark overlap */
.def-cover .lane.dc-lane .markers.mk-in{ animation:coverStepUp .34s cubic-bezier(.2,.85,.25,1) both; }
@keyframes coverStepUp{ from{ opacity:0; transform:translate(-50%, 22cqw); } to{ opacity:1; transform:translate(-50%, 0); } }
/* an OPEN attacker's danger chevrons fall just below it, toward your keeper */
.def-cover .lane .danger{ top:auto !important; bottom:auto !important; }
.def-cover .lane .chev{ top:auto !important; }
.def-cover .lane .chev.c1{ top:calc(100% + 1cqw) !important; }
.def-cover .lane .chev.c2{ top:calc(100% + 6cqw) !important; }
.def-cover .lane .chev.c3{ top:calc(100% + 11cqw) !important; }

/* DEFEND showdown: flex spacers centre the free attackers above your keeper (mirrors the attack POV) */
.dspace{ flex:1 1 0; min-height:0; }
/* DEFEND combat resolution: resolved attackers leave UP (off the top), their defenders leave DOWN (off the bottom) */
.def-cover .card.runner.runner-out{ animation:runUpOut .42s cubic-bezier(.4,0,.7,.4) forwards; }
@keyframes runUpOut{ 0%{ transform:translateY(0); opacity:1; } 70%,100%{ opacity:0; } 100%{ transform:translateY(-40cqw); } }
.def-cover .markers.mk-out{ animation:mkDownOut .42s cubic-bezier(.4,0,.7,.4) forwards; }
@keyframes mkDownOut{ 0%{ transform:translate(-50%,0); opacity:1; } 70%,100%{ opacity:0; } 100%{ transform:translate(-50%,42cqw); } }
/* opponent's ASSIST beat your marker → it stays but reads as disabled/dimmed */
.def-cover .markers.mk-beaten{ filter:grayscale(1) brightness(.5); opacity:.4; }

/* LMT pause: the attacker the LMT will remove is previewed dimmed (mirror of the assist's mk-beaten) */
.def-cover .lane .card.runner.runner-beaten{ filter:grayscale(1) brightness(.55) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.4)) !important; opacity:.5; }

/* TARGET / picked runner cards: NEVER a static yellow ring/border — the PULSE is the only highlight */
.card.runner.free, .card.runner.sel, .card.runner.sel.atk-sel{ box-shadow:none !important; border:none !important; outline:none !important; }
/* (no constant pulse on free/selected — they only pulse on hover/lift, see below) */

/* ===================== HAND = FLAT SIDE-BY-SIDE ROW (fan/arc retired) ===================== */
/* the cards no longer pivot on an arc — they sit in a centred flat row, shrinking to fit. */
.fanstage{ height:auto !important; min-height:140px; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
.fan, .fan.subfan{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important;
  height:auto !important; width:100%; display:flex; align-items:flex-end; justify-content:center;
  gap:20px; flex-wrap:nowrap; }
.fan .handcard{ position:relative !important; left:auto !important; bottom:auto !important; margin:0;
  flex:0 1 84px; min-width:54px; transform:none !important; transform-origin:bottom center;
  transition:transform .16s cubic-bezier(.2,.8,.25,1), box-shadow .16s, filter .2s; }
/* live (playable this window): a small uniform float so the whole row lifts a touch */
.fan[data-live] .handcard.live{ transform:translateY(-8px) scale(1.03) !important; }
/* lifted (inspected/armed): rises clear of the row, upright — wins over .live via later source order */
.fan .handcard.lifted,
.fan[data-live] .handcard.lifted{ transform:translateY(-30px) scale(1.12) !important; z-index:40 !important; }
.fan .handcard.dead:active{ transform:translateY(-4px) !important; }

/* ===================== SHOWDOWN selected shooter — clean glow (retired the gold ◎ circle badge) =====================
   No floating badge, no hard ring (box-shadow is forced off on .sel). A soft gold drop-shadow halo + slight
   lift marks the picked shooter; the other free runners recede so the choice reads at a glance. */
.sd-field .card.runner.sel{
  filter:drop-shadow(0 0 2cqw rgba(255,209,92,.9)) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.45)) !important;
  transform:translateY(-1cqw) scale(1.05); z-index:3; }
/* unselected showdown runners are NOT dimmed (either POV) — only the selected one carries the lime glow */

/* ===================== HALFTIME — one authoritative look =====================
   Prior stacked theme blocks left it broken: retro teal top/bottom borders + a solid full-height amber
   seam slicing through flat black panels. This restores a clean broadcast split on the dark board. */
.halftime{ background:radial-gradient(125% 75% at 50% -12%, #143a55 0%, #0a2138 36%, #050d18 72%, #03080f 100%) !important;
  border:none !important; box-shadow:none !important; }
.ht-panel.you{ background:linear-gradient(115deg, rgba(215,162,74,.32), rgba(8,26,64,0) 64%) !important; border:none !important; }
.ht-panel.them{ background:linear-gradient(245deg, rgba(196,74,74,.28), rgba(54,12,12,0) 64%) !important; border:none !important; }
.ht-seam{ width:1px !important; box-shadow:none !important;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 28%, rgba(255,255,255,.12) 72%, transparent) !important; }
.ht-label{ background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;
  font-family:var(--font) !important; font-weight:700 !important; font-size:4cqw !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--gold) !important; text-shadow:0 2px 16px rgba(0,0,0,.6) !important; }
.ht-num{ font-size:14cqw !important; }
.ht-crest{ font-size:4cqw !important; color:var(--ink) !important; }
.ht-dash{ color:rgba(255,255,255,.4) !important; }

/* ===================== SHOT RESULT — full-screen interstitial spotlighting the decisive player ===================== */
.shotres{ position:relative; width:100%; max-width:430px; margin:0 auto; height:100dvh; z-index:60;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  container-type:inline-size; container-name:board; --sr-accent:var(--gold);
  background:radial-gradient(125% 80% at 50% 36%, color-mix(in srgb, var(--sr-accent) 24%, #061321) 0%, #050d18 54%, #03070f 100%); }
.shotres.k-goal{ --sr-accent:var(--you); }                          /* GOAL: YOUR team scores → electric blue */
.shotres.k-goal.vs-us{ --sr-accent:var(--atk); }                    /* GOAL: THEY score → magenta/pink (beats the steel vs-us below) */
.shotres.k-save{ --sr-accent:var(--you); }                          /* SAVE: YOUR keeper → electric blue */
.shotres.k-save.vs-us{ --sr-accent:var(--atk); }                    /* THEIR keeper → magenta/pink (beats the steel vs-us below) */
.shotres.k-lmt { --sr-accent:var(--you); }                          /* LMT: YOUR last-ditch block → electric blue */
.shotres.k-lmt.vs-us{ --sr-accent:var(--atk); }                     /* THEIR block → magenta/pink */
.shotres.k-olc { --sr-accent:var(--you); }                          /* OTL: YOUR defender clears → electric blue */
.shotres.k-olc.vs-us{ --sr-accent:var(--atk); }                     /* THEIR defender clears → magenta/pink */
.shotres.vs-us{ --sr-accent:#8e99a6; }                              /* the opponent's player did it → muted steel, not your colour */
.sr-rays{ position:absolute; top:50%; left:50%; width:150cqw; height:150cqw; transform:translate(-50%,-56%); pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--sr-accent) 32%, transparent) 0%, transparent 58%);
  animation:srPulse 2.6s ease-in-out infinite; }
@keyframes srPulse{ 0%,100%{ opacity:.62; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.92; transform:translate(-50%,-50%) scale(1.025); } }
.sr-body{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2cqw; padding:6cqw;
  animation:srBody .42s cubic-bezier(.2,.85,.25,1) both; }
@keyframes srBody{ from{ opacity:0; transform:translateY(3cqw) scale(.96); } to{ opacity:1; transform:none; } }
.sr-tag{ display:flex; align-items:center; gap:2cqw; font-family:var(--font); font-weight:700; letter-spacing:.16em; font-size:3cqw; }
.sr-crest{ color:#fff; padding:.5cqw 2cqw; border-radius:2cqw; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.sr-verb{ color:var(--ink-dim); }
.sr-label{ font-family:var(--font); font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:13cqw; line-height:.88; color:#fff;
  text-shadow:0 0 7cqw color-mix(in srgb, var(--sr-accent) 55%, transparent), 0 3px 18px rgba(0,0,0,.6); }
.sr-cardwrap{ margin:1cqw 0; }
.sr-card{ position:relative; width:42cqw; aspect-ratio:771/1248; border-radius:3cqw; background-size:cover; background-position:center top; overflow:hidden;
  box-shadow:0 0 0 .4cqw color-mix(in srgb, var(--sr-accent) 70%, transparent), 0 0 7cqw color-mix(in srgb, var(--sr-accent) 50%, transparent), 0 2cqw 4cqw rgba(0,0,0,.6); }
.sr-card .noart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0c1a2c; font-family:var(--font); font-weight:700; color:#fff; font-size:5cqw; }
.sr-sheen{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.30) 50%, transparent 64%); animation:srSheen 2.4s ease-in-out .35s infinite; }
@keyframes srSheen{ 0%{ transform:translateX(-65%); opacity:0; } 35%,62%{ opacity:1; } 100%{ transform:translateX(65%); opacity:0; } }
.sr-name{ font-family:var(--font); font-weight:700; letter-spacing:.06em; font-size:6cqw; color:#fff; }
.sr-nums{ font-family:var(--font); font-weight:700; font-size:4cqw; color:var(--sr-accent); letter-spacing:.04em; display:flex; align-items:center; }
.sr-nums .vs{ color:var(--ink-faint); font-size:.66em; margin:0 2cqw; font-weight:600; letter-spacing:.1em; }
.commit.sr-go{ margin-top:3cqw; max-width:72cqw; }

/* =====================================================================================
   GOLAZOS PALETTE — colours + fonts only (layout & interactions untouched; pitch kept).
   Electric-blue accent · acid-green CTAs · neon stat trio (ATK magenta / DEF cyan / SAVE green).
   Appended last so it wins by source order over the FOX-BOX/vintage/clean token blocks.
   ===================================================================================== */
:root{
  /* base — near-black, blue-tinted */
  --bg:#080d1a; --bg-deep:#04060e; --ink:#eaf0ff;
  /* electric blue = your team / selected / accent of record / chrome (the blue was fine here — kept) */
  --you:#2f6bff; --you-deep:#1c46cc; --you-tint:rgba(47,107,255,.18); --hero:#2f6bff; --acc:#2f6bff;
  --gold:#2f6bff; --gold-tint:rgba(47,107,255,.16);
  /* opponent = neutral cool slate */
  --them:#8893a6; --them-deep:#535d6e; --them-tint:rgba(136,147,166,.14); --them-ink:#d7dde3;
  /* stat trio → neon */
  --atk:#ff3d84; --def:#2fd0ff; --save:#93e83a;
  --atk-tint:rgba(255,61,132,.16); --def-tint:rgba(47,208,255,.16); --save-tint:rgba(147,232,58,.16);
  --threat:var(--atk); --good:var(--save); --bad:var(--them); --rar-rare:#93e83a;
  /* FOX-BOX chrome tokens → electric blue (scorebar, frames, bevel wells) */
  --retro-amber:#2f6bff; --retro-amber-d:#1c46cc;
  --retro-teal:#2fd0ff; --retro-teal-d:#1b8fc0;
  --cyan:var(--retro-teal);   /* the info-cyan accent (.ht-label / swap icon / .ac-kicker) — was referenced but never defined */
  --retro-gold:#2f6bff; --retro-red:#ff3d84; --retro-green:#93e83a; --retro-green-d:#5fb01f;
  --retro-cream:#eaf0ff; --retro-bone:#c7d2ec; --retro-well:#0a1326; --retro-well-2:#060c1a;
  /* vintage leftovers that still surface */
  --vint-cream:#eaf0ff; --vint-you:#eaf0ff; --vint-amber:#2f6bff; --vint-rule:rgba(47,107,255,.5); --vint-rule-soft:rgba(47,107,255,.22);
}
/* EVERY primary CTA is the SAME button as the home KICK-OFF — lime gradient, heavy italic, rounded, glow.
   bg/colour are !important so the old per-variant hovers (e.g. the gold #F0C778 atk-hover) can't leak through. */
.commit, .commit.atk, .commit.gold{
  background:linear-gradient(180deg, color-mix(in srgb, var(--save) 92%, #fff) 0%, var(--save) 100%) !important; color:#06210a !important;
  border-radius:16px; font:800 italic 18px/1 var(--font); letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(147,232,58,.32), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
@media (hover:hover){ .commit:hover, .commit.atk:hover, .commit.gold:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(147,232,58,.42), inset 0 1px 0 rgba(255,255,255,.5); } }
.commit:active, .commit.atk:active, .commit.gold:active{ transform:scale(.98); box-shadow:0 4px 14px rgba(147,232,58,.3), inset 0 1px 0 rgba(255,255,255,.4); }
/* main + secondary label (same as the home button): the button stacks when it carries a .csub line */
.commit:has(.csub){ flex-direction:column; gap:2px; }
.csub, .play span{ display:block; font:700 9.5px/1 var(--font); font-style:normal; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
/* GHOST = the secondary/cancel variant: same shape + italic, but a clean outline (NOT the lime fill) — !important to beat the gradient above */
.commit.ghost{ background:transparent !important; color:rgba(255,255,255,.82) !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.3) !important; }
@media (hover:hover){ .commit.ghost:hover{ filter:none; background:rgba(255,255,255,.08) !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55) !important; } }
.commit.ghost:active{ transform:scale(.98); background:rgba(255,255,255,.04) !important; }
/* disabled (post-tap animations OR genuinely inactive) — a SOLID muted lime, fully opaque so sunk cards behind
   it stay hidden (never see-through), non-interactive (no double-taps) */
body.busy .commit, body.busy .commit.atk, body.busy .commit.gold, .commit:disabled{ pointer-events:none !important; cursor:default;
  transform:none !important; background:#5f7d3a !important; color:rgba(8,26,4,.5) !important; box-shadow:none !important; filter:none !important; opacity:1 !important; }
/* stat hexagons → semantic neon trio (decoupled from the chrome amber/teal) */
.gstat.atk  .gshape polygon{ fill:var(--atk) !important; }
.gstat.def  .gshape polygon{ fill:var(--def) !important; }
.gstat.save .gshape polygon{ fill:var(--save) !important; }
.gstat.atk b{ color:#fff; }                 /* white reads on magenta */
.gstat.def b, .gstat.save b{ color:#06122e; }  /* dark reads on cyan/green */
/* chrome contrast: the clock cell darkened (amber→electric blue) → flip its text light */
.sb-clock{ color:#eaf0ff !important; text-shadow:0 1px 2px rgba(0,0,0,.55) !important; }
.sb-score .dash{ color:var(--def) !important; }   /* cyan dash pops on the navy well */
/* selected player / target player highlight → acid-lime (was electric blue) */
.sd-field .card.runner.sel{ filter:drop-shadow(0 0 2cqw rgba(147,232,58,.95)) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.45)) !important; }
.sel{ box-shadow:0 0 0 2px var(--save), 0 0 26px rgba(147,232,58,.5), 0 12px 24px rgba(0,0,0,.55) !important; }
.dcard.armed{ box-shadow:0 22px 34px rgba(0,0,0,.6), 0 0 0 2px var(--save), 0 0 30px rgba(147,232,58,.55) !important; }
.pumptoggle.on{ background:var(--save) !important; color:#0a2208 !important; border-color:var(--save) !important; box-shadow:0 0 18px rgba(147,232,58,.5) !important; }
.sb-tab.you{ box-shadow:0 0 10px rgba(47,107,255,.7) !important; }
/* FONT tweak — the two hero display words get the Golazos italic slant (family unchanged: Anton) */
.home .wordmark b{ font-style:italic; }
.shotres .sr-label{ font-style:italic; }

/* =====================================================================================
   VIBRANT INTERSTITIALS — bring back the exploration energy on the two NON-pitch screens
   (HOME + SHOT RESULT). The board screens keep the restrained recolor + the real pitch.
   ===================================================================================== */
/* HOME — electric gradient + diagonal hatch + glowing italic wordmark + acid-green tagline */
.home{ background:radial-gradient(120% 82% at 50% -10%, #2236ff 0%, #101a7a 38%, #060a2a 72%, #04060f 100%) !important; }
.home::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px); }
.home > *{ position:relative; z-index:1; }
.home .wordmark b{ font-style:italic !important; color:#fff !important;
  text-shadow:0 0 1px rgba(255,61,132,.9), 3px 3px 0 rgba(255,61,132,.5), 0 0 30px rgba(47,107,255,.7) !important; }
.home .wordmark span{ color:var(--save) !important; }

/* SHOT RESULT — richer magenta-purple energy field + stronger rays/ring + bigger glowing label */
.shotres{ background:
  radial-gradient(130% 100% at 50% 20%, color-mix(in srgb, var(--you) 64%, transparent) 0%, transparent 54%),     /* bright blue bloom (top) */
  radial-gradient(130% 100% at 50% 102%, color-mix(in srgb, var(--atk) 58%, transparent) 0%, transparent 54%),     /* bright pink bloom (bottom) */
  linear-gradient(168deg, #2340a0 0%, #3f2380 46%, #7a2270 100%) !important; }                                      /* lively blue → pink base */
.shotres::after{ content:""; position:absolute; top:42%; left:50%; width:96cqw; height:96cqw; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--atk) 56%, transparent) 0%, color-mix(in srgb, var(--you) 36%, transparent) 42%, transparent 64%); }
.sr-rays{ opacity:1 !important;
  background:repeating-conic-gradient(from 0deg at 50% 44%, color-mix(in srgb, var(--you) 32%, transparent) 0deg 4deg, transparent 4deg 8deg, color-mix(in srgb, var(--atk) 28%, transparent) 8deg 12deg, transparent 12deg 16deg) !important; }   /* alternating blue + pink rays */
.sr-label{ font-size:15cqw !important; font-style:italic !important;
  text-shadow:0 0 1px rgba(255,255,255,.55), 3px 3px 0 color-mix(in srgb, var(--sr-accent) 55%, transparent), 0 0 9cqw color-mix(in srgb, var(--sr-accent) 70%, transparent), 0 3px 18px rgba(0,0,0,.6) !important; }
.sr-card{ box-shadow:0 0 0 .5cqw color-mix(in srgb, var(--sr-accent) 85%, transparent), 0 0 10cqw color-mix(in srgb, var(--sr-accent) 60%, transparent), 0 2cqw 4cqw rgba(0,0,0,.6) !important; }

/* =====================================================================================
   CONSOLIDATE CARD BADGES/STAMPS — ONE scheme everywhere: ATK magenta · DEF cyan · SAVE green.
   The electric blue (#93e83a via --retro-amber) was unreadable on stamps — banished from all badges.
   ===================================================================================== */
/* ability stamps (gabil) — were electric-blue (atk) with a dark glyph = unreadable */
.gabil.atk .gabil-bg polygon{ fill:var(--atk) !important; }
.gabil.def .gabil-bg polygon{ fill:var(--def) !important; }
.gabil.atk .gabil-ico path, .gabil.atk .gabil-num{ fill:#fff !important; color:#fff !important; }          /* white reads on magenta */
.gabil.def .gabil-ico path, .gabil.def .gabil-num{ fill:#06122e !important; color:#06122e !important; }     /* dark reads on cyan */
.gabil.live{ filter:drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(1px 1px 0 rgba(0,0,0,.82)) !important; }
/* setup duel cells (bug-duel) — atk glyph was electric blue, save was cyan; now magenta/cyan/green */
.bug-duel .cell.atk svg{ fill:var(--atk) !important; }  .bug-duel .cell.atk{ background:rgba(255,61,132,.16) !important; }
.bug-duel .cell.def svg{ fill:var(--def) !important; }  .bug-duel .cell.def{ background:rgba(47,208,255,.16) !important; }
.bug-duel .cell.save svg{ fill:var(--save) !important; } .bug-duel .cell.save{ background:rgba(147,232,58,.16) !important; }
/* SETUP card stat badges (su-stat) — were electric-blue (atk) box+shape with dark text = unreadable */
.su-stat.atk{ background:var(--atk) !important; }  .su-stat.atk .su-shape polygon{ fill:var(--atk) !important; }
.su-stat.def{ background:var(--def) !important; }  .su-stat.def .su-shape polygon{ fill:var(--def) !important; }
.su-stat.save{ background:var(--save) !important; } .su-stat.save .su-shape polygon{ fill:var(--save) !important; }
.su-stat.atk b{ color:#fff !important; }  .su-stat.def b, .su-stat.save b{ color:#06122e !important; }
/* SETUP card ability badges (abil) */
.abil.atk .abil-bg polygon{ fill:var(--atk) !important; }  .abil.def .abil-bg polygon{ fill:var(--def) !important; }
.abil.atk .abil-ico path, .abil.atk .abil-num{ fill:#fff !important; color:#fff !important; }
.abil.def .abil-ico path, .abil.def .abil-num{ fill:#06122e !important; color:#06122e !important; }

/* SETUP cards are now .gfull (same markup) → they inherit the EXACT .gfull badge CSS (gstat bottom-right, gabil top-right). Only allow the overhang to show. */
.card.su-pc, .card.su-bc, .card.su-gk{ overflow:visible !important; }
/* lineup: abilities are inert during setup → dim the pitch cards' ability stamps (greyed but still readable) */
.card.su-pc .gabils{ opacity:.62; filter:grayscale(.9); }
/* SETUP-screen accents → neon lime (bench, formation pill, KICK OFF) — scoped, so the rest of the app stays electric blue */
.setup{ --retro-amber:#93e83a; --retro-amber-d:#5fb01f; --you:#93e83a; --you-deep:#5fb01f; --gold:#93e83a; --gold-tint:rgba(147,232,58,.16); --hero:#93e83a; --acc:#93e83a; }
.setup .su-handle.armed{ background:rgba(147,232,58,.12) !important; }

/* =====================================================================================
   NIKE × GOLAZOS SCOREBAR + PHASE — bold · italic · angular · vibrant (replaces the 90s bevel)
   ===================================================================================== */
.scorebar{ height:44px !important; width:max-content; border:0 !important; border-radius:0 0 5px 5px !important; overflow:hidden;   /* square top, rounded bottom */
  background:#000 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.7), 0 0 32px rgba(0,0,0,.9), 0 0 80px rgba(0,0,0,.8) !important; }   /* drop shadow + black glow (darken the board around it); no border line */
.sb-clock{ background:#000 !important; box-shadow:none !important; padding:0 13px !important;        /* clock: white on black, upright (no slant) */
  font-family:var(--font-display) !important; font-style:normal !important; font-weight:900 !important; font-size:17px !important;
  letter-spacing:.01em !important; color:#fff !important; text-shadow:none !important; }
.sb-team{ box-shadow:none !important; padding:0 14px !important; position:relative; z-index:1; }      /* teams: white on the team colour, BEHIND the score */
.sb-team.you{ background:var(--you) !important; padding-right:24px !important; }   /* more room from the score on the inner side */
.sb-team.them{ background:var(--atk) !important; padding-left:24px !important; }
.sb-team b{ font-family:var(--font-display) !important; font-style:italic !important; font-weight:900 !important; font-size:17px !important;
  letter-spacing:.05em !important; color:#fff !important; text-shadow:none !important; }
.sb-tab{ display:none !important; }                                                                  /* the cell itself is the team colour now */
.sb-score{ background:#fff !important; padding:0 17px !important; transform:skewX(-11deg); box-shadow:none !important;
  position:relative; z-index:2; margin-inline:-9px !important; }   /* score: black on white, ON TOP, overlapping the team cells so their colour fills the slant (no gaps) */
.sb-score > *{ display:inline-block; transform:skewX(11deg); }
.sb-score .you, .sb-score .them{ font-family:var(--font-heavy) !important; font-style:italic !important; font-size:26px !important;
  color:#000 !important; text-shadow:none !important; }
.sb-score .dash{ color:#000 !important; font-family:var(--font-heavy) !important; font-style:italic !important; font-size:19px !important; margin:0 1px; }
/* phase chip — angular italic tag, accent by phase (attack = green "go", else electric blue) */
.phase{ background:rgba(8,12,24,.92) !important; border:0 !important; border-radius:5px !important; transform:skewX(-11deg); padding:6px 17px !important;
  box-shadow:0 5px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(47,107,255,.45), 0 0 14px rgba(47,107,255,.2) !important; }
.phase > *{ transform:skewX(11deg); }
.phase .verb{ font-family:var(--font-display) !important; font-style:italic !important; font-weight:900 !important; letter-spacing:.07em !important; color:#eaf0ff !important; }
.phase .shield svg path{ fill:var(--you) !important; }
.phase.atk{ box-shadow:0 5px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(147,232,58,.55), 0 0 16px rgba(147,232,58,.28) !important; }
.phase.atk .verb{ color:var(--save) !important; }
.phase.atk .shield svg path{ fill:var(--save) !important; }

/* shot result — background covers the WHOLE screen (was capped at 430); content stays centred + sized to a 430 column */
.shotres{ max-width:none !important; margin:0 !important;
  background:radial-gradient(150% 130% at 50% 42%, color-mix(in srgb, var(--sr-accent) 28%, #2a1148) 0%, #150a36 50%, #07041a 100%) !important; }
.sr-body{ width:100%; max-width:430px; container-type:inline-size; }
/* the ray field is a square sized in cqw (width-based) → too short on a tall phone, leaving empty bands.
   Size it to the viewport (vmax) + centre it so the rays reach every edge, top to bottom. */
.sr-rays{ width:230vmax !important; height:230vmax !important; }

/* =====================================================================================
   HALFTIME — vibrant interstitial matching the new direction (radiating rays · deep electric base ·
   bold italic glowing type). Supersedes the earlier restrained halftime override.
   ===================================================================================== */
.halftime{ max-width:none !important; margin:0 !important; width:100% !important; overflow:hidden;
  background:radial-gradient(150% 130% at 50% 42%, #2a1148 0%, #150a36 50%, #0a1130 76%, #05060f 100%) !important; }
.halftime .ht-panel, .halftime .ht-seam{ display:none !important; }      /* the energy field replaces the split panels */
.halftime::before{ content:""; position:absolute; top:50%; left:50%; width:230vmax; height:230vmax; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; animation:srPulse 2.6s ease-in-out infinite;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(47,107,255,.16) 0deg 5deg, transparent 5deg 11deg); }
.halftime::after{ content:""; position:absolute; top:44%; left:50%; width:120vmax; height:120vmax; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; background:radial-gradient(circle, rgba(255,46,126,.26) 0%, transparent 56%); }
.ht-body{ position:relative; z-index:2; width:100%; max-width:430px; container-type:inline-size; gap:3cqw !important; }
.ht-label{ background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;
  font-family:var(--font-display) !important; font-weight:900 !important; font-style:italic !important; font-size:5cqw !important;
  letter-spacing:.24em !important; text-transform:uppercase !important; color:var(--cyan) !important; text-shadow:0 0 14px rgba(47,107,255,.7) !important; }
.ht-score{ gap:3cqw !important; }
.ht-num{ font-family:var(--font-heavy) !important; font-style:italic !important; font-size:18cqw !important; color:#fff !important;
  text-shadow:0 0 1px rgba(255,61,132,.85), 3px 3px 0 rgba(255,61,132,.45), 0 0 26px rgba(47,107,255,.65) !important; }
.ht-side.you .ht-num, .ht-side.them .ht-num{ color:#fff !important; }
.ht-crest{ font-family:var(--font-display) !important; font-weight:900 !important; font-style:italic !important; font-size:5cqw !important; letter-spacing:.04em !important; color:var(--ink) !important; }
.ht-dash{ font-family:var(--font-heavy) !important; font-style:italic !important; color:var(--you) !important; font-size:11cqw !important; }
.ht-notes{ gap:2cqw !important; margin-top:1cqw !important; }
.ht-note{ font-family:var(--font-display) !important; font-weight:700 !important; font-style:italic !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:var(--ink-dim) !important; font-size:3cqw !important; }
.ht-note svg{ fill:var(--save) !important; } .ht-note:last-child svg{ fill:var(--cyan) !important; }
.commit.secondhalf{ color:#06210a !important; font-weight:900 !important; max-width:300px; }   /* inherits the shared lime-gradient CTA look */
.ht .picker .commit.secondhalf{ max-width:none; width:100%; margin-top:0; }   /* halftime rail: the main full-width lime CTA */

/* ===================== ABILITY CHOICE — pre-state overlay (pick ASSIST vs PUMP on a 2-ability card) ===================== */
/* same look as the main (home) screen — one team colour + the diagonal hatch (no blue/pink split) */
.abil-choice{ position:relative; width:100%; height:100dvh; z-index:62; display:flex; align-items:center; justify-content:center; overflow:hidden;
  container-type:inline-size; background:radial-gradient(120% 82% at 50% -10%, #2236ff 0%, #101a7a 38%, #060a2a 72%, #04060f 100%); }
.ac-rays{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px); }
.ac-body{ position:relative; z-index:2; width:100%; max-width:430px; container-type:inline-size; display:flex; flex-direction:column; align-items:center; gap:3cqw; padding:6cqw; }
/* the ABILITY interstitial (not sub-confirm) pins its actions to the bottom: full-height column, twin
   auto-margins float the card(s) to the middle, the action rail hugs the safe area like a game-screen tray */
.abil-choice .ac-body{ height:100%; justify-content:flex-start; padding-bottom:calc(5cqw + var(--sab)); }
.abil-choice .ac-kicker{ font-family:var(--font); font-weight:800; font-style:italic; font-size:11cqw; line-height:.9;   /* the shot-result heading treatment: big bold italic WHITE */
  letter-spacing:.03em; color:#fff; text-align:center; margin-top:6cqw;
  text-shadow:0 0 7cqw rgba(147,232,58,.35), 0 3px 18px rgba(0,0,0,.6); }
.abil-choice .ac-body > .ac-card, .abil-choice .ac-stack{ margin-top:auto; }
.ac-stack{ position:relative; width:54cqw; height:70cqw; }                          /* the ability card STACKED on its target */
.ac-stack .ac-card{ position:absolute; width:38cqw; }
.ac-stack .ac-card.tgt{ left:0; top:6cqw; transform:rotate(-6deg); filter:brightness(.6) saturate(.85); }   /* the man it lands on, tucked behind */
.ac-stack .ac-card.top{ right:0; top:0; transform:rotate(5deg); box-shadow:0 8cqw 12cqw rgba(0,0,0,.55), 0 0 0 .5cqw rgba(255,255,255,.14); }
.ac-actions{ margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:2.5cqw; }
.abil-choice .ac-actions .commit{ width:100%; max-width:none; }                     /* BOTH buttons full width */
.ac-kicker{ font-family:var(--font-display); font-weight:900; font-style:italic; letter-spacing:.2em; font-size:4cqw; text-transform:uppercase; color:var(--cyan); text-shadow:0 0 12px rgba(47,107,255,.6); }
.ac-card{ position:relative; width:38cqw; aspect-ratio:771/1248; border-radius:3cqw; background-size:cover; background-position:center top; overflow:hidden;
  box-shadow:0 0 0 .4cqw rgba(120,150,255,.5), 0 0 8cqw rgba(47,107,255,.45), 0 2cqw 4cqw rgba(0,0,0,.6); }
.ac-card .noart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0c1a2c; font-family:var(--font); font-weight:700; color:#fff; font-size:5cqw; }
.ac-name{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:6cqw; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.ac-opts{ display:flex; gap:3cqw; margin-top:1cqw; width:100%; justify-content:center; }
.ac-opts .ab-opt:only-child{ flex:0 0 auto; width:54cqw; }   /* a lone option (single-ability) isn't full-bleed — sized + centred */
.ab-opt{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1cqw; padding:4cqw 3cqw; border:0; cursor:pointer; border-radius:3cqw;
  background:rgba(10,16,34,.92); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12); font-family:var(--font); color:#fff;
  transition:transform .1s ease, box-shadow .14s ease, background .14s ease, filter .1s ease; }
.ab-opt svg{ width:9cqw; height:9cqw; }
.ab-opt-lbl{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:5cqw; letter-spacing:.03em; text-transform:uppercase; }
.ab-opt-sub{ font-size:3cqw; color:var(--ink-dim); letter-spacing:.02em; text-transform:uppercase; }
/* both options use the lime accent */
.ab-opt.assist, .ab-opt.pump, .ab-opt.lmt{ box-shadow:inset 0 0 0 2px var(--save), 0 0 20px rgba(147,232,58,.3); }
.ab-opt.assist svg, .ab-opt.pump svg, .ab-opt.lmt svg{ fill:var(--save); }
.ab-opt-lbl{ color:var(--save); }
/* HOVER — brighten the surface + intensify the lime ring/glow (gated: no sticky hover after iOS taps) */
@media (hover:hover){
.ab-opt:hover{ background:rgba(20,28,56,.96); }
.ab-opt.assist:hover, .ab-opt.pump:hover, .ab-opt.lmt:hover{ box-shadow:inset 0 0 0 2.5px var(--save), 0 0 34px rgba(147,232,58,.6); }
}
/* TAPPED — press in + flash the accent fill */
.ab-opt:active{ transform:scale(.96) translateY(1px); filter:brightness(1.18); }
.ab-opt.assist:active{ background:color-mix(in srgb, var(--gold) 26%, #0a1022); }
.ab-opt.pump:active{ background:color-mix(in srgb, var(--atk) 26%, #0a1022); }
.commit.ac-cancel{ margin-top:2cqw; max-width:50cqw; }

/* ===================== REACT window with NO playable abilities ===================== */
/* DEAD cards (no playable ability this window) sink HALF their height behind the action button, their bottom
   half faded out — present but clearly secondary to the usable cards (raised + centred). Same in every hand
   window: before-combat react AND showdown (excludes only the subs tray). */
.fanstage .fan:not([data-live="sub"]) .handcard.dead{ transform:translateY(25%) !important; z-index:0 !important;
  filter:grayscale(.72) brightness(.6) !important; }   /* (no mask — it clipped the badges that overhang the card; the sink + the button on top already hide the bottom) */
.fanstage.no-abils{ position:relative; z-index:0; min-height:66px; }
/* the "No abilities available" hint now rides the SAME slot as the subs hint (a .subhint line between the hand
   and the button) — one consistent label position for every hand window. */
.fanstage ~ .commit,
.bench-shelf ~ .commit, .bench-shelf ~ .subhint{ position:relative; z-index:3; }   /* action button (+ hint) in front → sunk cards peek out from behind it (react + showdown alike) */
/* "No abilities available" — OVERLAID centred on the (dead) hand cards, not a line below them */
.bench-shelf .subhint.hand-hint{ position:absolute; left:0; right:0; top:54%; transform:translateY(-50%);
  margin:0 !important; z-index:6; pointer-events:none; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7); }

/* ===================== GAME OVER — big title, score bug under it, confetti, MVP card ===================== */
.gameover{ justify-content:flex-start !important; gap:0; }
.gameover .go-body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4cqw; padding-top:9dvh; position:relative; z-index:2; }
.gameover .picker{ flex:0 0 auto; margin-top:auto; }   /* NEW GAME pinned to the bottom */
.gameover .go-body .wordmark{ margin-top:0 !important; }
.gameover .go-body .wordmark b{ font-size:64px !important; }   /* bigger YOU WIN / YOU LOST */
.gameover .go-body .scorebar{ flex:0 0 auto; margin:5cqw auto 6cqw !important; }   /* score bug under the title, with breathing room */
.go-mvp{ display:flex; flex-direction:column; align-items:center; gap:2cqw; }
.go-mvp-tag{ font-family:var(--font-display); font-weight:900; font-style:italic; letter-spacing:.24em; font-size:4cqw; color:var(--save); text-shadow:0 0 14px rgba(147,232,58,.6); }
.go-mvp-card{ position:relative; width:38cqw; aspect-ratio:771/1248; border-radius:3cqw; background-size:cover; background-position:center; overflow:hidden;
  box-shadow:0 0 0 .4cqw rgba(147,232,58,.6), 0 0 9cqw rgba(147,232,58,.4), 0 2cqw 5cqw rgba(0,0,0,.6); }
.go-mvp-card .noart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0c1a2c; color:#fff; font-weight:700; font-size:6cqw; }
.go-mvp-name{ font-family:var(--font-display); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.04em; font-size:6cqw; color:#fff; }
.confetti{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-6%; width:7px; height:12px; border-radius:1px; opacity:0;
  animation:confettiFall var(--dur,3s) linear var(--d,0s) infinite; will-change:transform; }
@keyframes confettiFall{
  0%{ transform:translateY(-12vh) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translateY(108vh) translateX(var(--sway,0)) rotate(calc(var(--r,0deg) + 900deg)); opacity:1; } }

/* =====================================================================================
   HOME — infinite deck carousel (no vertical scroll): compact wordmark, coverflow deck
   stage with peeking neighbours, strength bars, and a lime KICK OFF for the active deck
   ===================================================================================== */
.home{ justify-content:flex-start; gap:0; padding-top:calc(var(--sat) + 6px) !important; }
.home-top{ flex:0 0 auto; }
.home .wordmark{ margin-top:30px !important; }
.home .wordmark b{ font-size:40px !important; letter-spacing:.5px !important; }
.home .wordmark span{ color:var(--save) !important; letter-spacing:.34em !important; font-size:11px !important; margin-top:3px; display:block; }

.carousel{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-inline:-20px; }   /* cancel the home's 20px side padding → the deck-stage runs full width so prev/next decks peek MORE (not clipped early) */
.deck-stage{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; --drag:0px; touch-action:pan-y; }

.deck-slide{ position:absolute; top:0; left:50%; width:74%; height:100%;
  transform:translateX(-50%) translateX(calc(var(--off) * 99% + var(--drag))) scale(var(--sc));
  transition:transform .44s cubic-bezier(.22,.61,.36,1), opacity .44s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; will-change:transform; }
.deck-stage.dragging .deck-slide{ transition:none; }                 /* 1:1 finger follow while swiping */

/* the three stat-leaders, fanned with the attacker raised on top */
.dk-cards{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:100%; }
.dk-card{ position:relative; flex:0 0 33%; }
.dk-card.hero{ flex-basis:38%; z-index:3; transform:translateY(-7%) scale(1.05); }
.dk-card.def{ z-index:1; transform:rotate(-7deg) translateY(7%); margin-right:-5%; }
.dk-card.gk{ z-index:1; transform:rotate(7deg) translateY(7%); margin-left:-5%; }
.dk-card .card{ width:100%; aspect-ratio:771/1248; height:auto; border:0; border-radius:0;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.5); }   /* home deck cards: full Sorare art (true ratio, no crop/border/round) */
.dk-card .card .grad{ display:none; }
.dk-card.hero .card{ box-shadow:0 14px 30px rgba(0,0,0,.6); }   /* drop the white ring too */
.dk-card .gabils{ display:none; }                                    /* abilities are noise in a tight fan — stat badge + role carry it */
.dk-card .gstats{ right:-3cqw !important; bottom:-4cqw !important; }
.dk-role{ display:none; }   /* removed the colored ATK/DEF/GK accent pill above each card */

/* deck identity block */
.dk-info{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:7px; padding:0 6px; }
.dk-name{ font:800 italic 27px/1 var(--font); color:#fff; letter-spacing:.01em;
  text-shadow:0 0 1px rgba(255,61,132,.8), 2px 2px 0 rgba(255,61,132,.4), 0 0 22px rgba(47,107,255,.55); }
.dk-tag{ font:800 10px/1 var(--font); letter-spacing:.22em; color:var(--save); text-transform:uppercase; }
.dk-desc{ font:500 12.5px/1.42 var(--font); color:var(--ink-dim); max-width:31ch; }
.dk-bars{ display:flex; gap:14px; margin-top:4px; }
.dk-bar{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.dk-bar i{ font:800 8px/1 var(--font); font-style:normal; letter-spacing:.14em; color:var(--ink-faint); }
.dk-bar u{ display:block; width:52px; height:5px; border-radius:3px; background:rgba(255,255,255,.13); overflow:hidden; }
.dk-bar b{ display:block; height:100%; border-radius:3px; }
.dk-bar.atk b{ background:var(--atk); } .dk-bar.def b{ background:var(--def); } .dk-bar.save b{ background:var(--save); }

/* page dots (swipe + tap-a-peek drive navigation) */
.dk-dots{ flex:0 0 auto; display:flex; justify-content:center; align-items:center; gap:7px; padding:8px 0 2px; }
.dk-dot{ position:relative; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.24); border:none; padding:0; cursor:pointer;
  transition:width .2s, background .2s; }
.dk-dot::after{ content:""; position:absolute; inset:-11px -3.5px; }   /* invisible hit pad (half the gap each side → no overlap, no visual change) */
.dk-dot.on{ width:18px; border-radius:4px; background:var(--save); }

/* lime KICK OFF for the centred deck */
.home-cta{ flex:0 0 auto; padding-top:8px; }
.play{ width:100%; min-height:56px; border-radius:16px; border:none; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb, var(--save) 92%, #fff) 0%, var(--save) 100%); color:#06210a;
  font:800 italic 19px/1 var(--font); letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(147,232,58,.32), inset 0 1px 0 rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .12s, box-shadow .12s; }
.play span{ font:700 9.5px/1 var(--font); font-style:normal; letter-spacing:.16em; opacity:.62; }
@media (hover:hover){ .play:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(147,232,58,.42), inset 0 1px 0 rgba(255,255,255,.5); } }
.play:active{ transform:scale(.98); box-shadow:0 4px 14px rgba(147,232,58,.3), inset 0 1px 0 rgba(255,255,255,.4); }

/* ===================== fatigued OPPONENT cards in the attack oppwall (dimmed like .inelig) ===================== */
.wallcard.fatigued{ opacity:.4; filter:grayscale(.7) brightness(.66); }

/* ===================== SUB CONFIRM interstitial (reuses .abil-choice / .ac-*): two cards OFF → ON ===================== */
.sub-confirm .ac-kicker{ color:var(--save); text-shadow:0 0 12px rgba(147,232,58,.55); }
.sub-confirm .sub-swap-row{ display:flex; align-items:center; justify-content:center; gap:3cqw; margin:1cqw 0 0; }
.sub-confirm .sub-side{ display:flex; flex-direction:column; align-items:center; gap:2cqw; }
.sub-confirm .sub-card{ width:33cqw; }
.sub-confirm .sub-card.out{ filter:grayscale(.55) brightness(.6); box-shadow:0 0 0 .4cqw rgba(255,61,132,.6), 0 2cqw 4cqw rgba(0,0,0,.6); }
.sub-confirm .sub-card.in{ box-shadow:0 0 0 .5cqw var(--save), 0 0 7cqw rgba(147,232,58,.5), 0 2cqw 4cqw rgba(0,0,0,.6); }
.sub-role{ position:absolute; top:1cqw; left:50%; transform:translateX(-50%); z-index:3; font:800 3cqw/1 var(--font);
  letter-spacing:.12em; padding:.7cqw 2cqw; border-radius:1cqw; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.sub-role.out{ background:var(--atk); color:#1a0410; }
.sub-role.in{ background:var(--save); color:#06140a; }
.sub-swap-ico{ font-size:7cqw; color:#fff; opacity:.6; }
.sub-confirm .ac-opts{ max-width:64cqw; margin:1cqw auto 0; }
.sub-confirm .ab-opt.sub-go{ box-shadow:inset 0 0 0 2px var(--save), 0 0 20px rgba(147,232,58,.3); }
.sub-confirm .ab-opt.sub-go .ab-opt-lbl{ color:var(--save); }
@media (hover:hover){ .sub-confirm .ab-opt.sub-go:hover{ box-shadow:inset 0 0 0 2.5px var(--save), 0 0 34px rgba(147,232,58,.55); background:rgba(20,28,56,.96); } }
.sub-confirm .ab-opt.sub-go:active{ transform:scale(.96) translateY(1px); filter:brightness(1.18); background:color-mix(in srgb, var(--save) 24%, #0a1022); }

/* ===================== SHOT SAVED → the keeper IS the wall: a BRICK texture lit by ONE team colour
   (blue your keeper / pink theirs), bright — like the GOAL ===================== */
.shotres.k-save{
  background-color:color-mix(in srgb, var(--sr-accent) 12%, #120c30) !important;                                    /* team-tinted dark mortar */
  background-image:
    radial-gradient(126% 102% at 50% 32%, color-mix(in srgb, var(--sr-accent) 72%, transparent) 0%, transparent 58%),   /* bright single-colour glow */
    radial-gradient(150% 132% at 50% 44%, transparent 56%, rgba(8,4,24,.34) 100%),                                       /* soft vignette */
    linear-gradient(335deg, color-mix(in srgb, var(--sr-accent) 26%, #2a2c5e) 23px, transparent 23px),                   /* brick courses, team-colour tinted */
    linear-gradient(155deg, color-mix(in srgb, var(--sr-accent) 26%, #2a2c5e) 23px, transparent 23px),
    linear-gradient(335deg, color-mix(in srgb, var(--sr-accent) 26%, #2a2c5e) 23px, transparent 23px),
    linear-gradient(155deg, color-mix(in srgb, var(--sr-accent) 26%, #2a2c5e) 23px, transparent 23px) !important;
  background-size:auto, auto, 58px 58px, 58px 58px, 58px 58px, 58px 58px !important;
  background-position:0 0, 0 0, 0 2px, 4px 35px, 29px 31px, 34px 6px !important;
}
.shotres.k-save .sr-rays{ display:none !important; }   /* the wall is the backdrop — no sunburst */
.shotres.k-save::after{ display:none !important; }

/* ===================== GOAL — ONE team colour (blue you / pink them), BRIGHTER + FLASHIER ===================== */
.shotres.k-goal{ background:
  radial-gradient(120% 102% at 50% 40%, color-mix(in srgb, var(--sr-accent) 82%, #fff 14%) 0%, color-mix(in srgb, var(--sr-accent) 40%, #170a36) 46%, #110522 100%) !important; }
.shotres.k-goal .sr-rays{ opacity:1 !important; animation:srPulse 1.7s ease-in-out infinite !important;   /* faster flash */
  background:repeating-conic-gradient(from 0deg at 50% 42%, color-mix(in srgb, var(--sr-accent) 72%, transparent) 0deg 3.6deg, transparent 3.6deg 8deg) !important; }   /* bright single-colour sunburst */
.shotres.k-goal::after{ background:radial-gradient(circle, color-mix(in srgb, var(--sr-accent) 90%, #fff 16%) 0%, color-mix(in srgb, var(--sr-accent) 44%, transparent) 36%, transparent 62%) !important; }   /* hot bright core */

/* GOOOOOAL is a longer word → bump the size (kept on one line) */
.shotres.k-goal .sr-label{ font-size:16cqw !important; white-space:nowrap; }

/* ===================== RETRO MOIRÉ — the pitch's CRT scanline, on the interstitial + home backgrounds ===================== */
.shotres::before, .abil-choice::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.2) 2px 3px); mix-blend-mode:multiply; }
.home::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.2) 2px 3px); mix-blend-mode:multiply; }

/* ===================== OFF THE LINE (OTL) — 4 tapered jagged corner bolts -> point behind the card ===================== */
.shotres.k-olc{ background:radial-gradient(115% 88% at 50% 50%, color-mix(in srgb, var(--sr-accent) 28%, #0a0820) 0%, #050309 78%) !important; }
.shotres.k-olc .sr-rays{ opacity:1 !important; top:0 !important; left:0 !important; transform:none !important; width:100% !important; height:100% !important;
  background:color-mix(in srgb, var(--sr-accent) 88%, #fff 12%) !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000%202170%27%3E%3Cg fill=%27%23fff%27%3E%3Cpath d=%27M-207%2095%20L-120%20384%20L224%20554%20L237%20877%20L495%201088%20L505%201082%20L335%20832%20L423%20463%20L185%20244%20L207%20-95%20Z%27/%3E%3Cpath d=%27M793%20-95%20L609%20149%20L755%20545%20L509%20760%20L495%201082%20L505%201088%20L608%20806%20L954%20637%20L914%20289%20L1207%2095%20Z%27/%3E%3Cpath d=%27M207%202265%20L347%202001%20L279%201641%20L484%201406%20L505%201088%20L495%201082%20L385%201361%20L80%201549%20L42%201861%20L-207%202075%20Z%27/%3E%3Cpath d=%27M1207%202075%20L1136%201779%20L785%201611%20L741%201303%20L505%201082%20L495%201088%20L642%201348%20L586%201703%20L831%201919%20L793%202265%20Z%27/%3E%3C/g%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000%202170%27%3E%3Cg fill=%27%23fff%27%3E%3Cpath d=%27M-207%2095%20L-120%20384%20L224%20554%20L237%20877%20L495%201088%20L505%201082%20L335%20832%20L423%20463%20L185%20244%20L207%20-95%20Z%27/%3E%3Cpath d=%27M793%20-95%20L609%20149%20L755%20545%20L509%20760%20L495%201082%20L505%201088%20L608%20806%20L954%20637%20L914%20289%20L1207%2095%20Z%27/%3E%3Cpath d=%27M207%202265%20L347%202001%20L279%201641%20L484%201406%20L505%201088%20L495%201082%20L385%201361%20L80%201549%20L42%201861%20L-207%202075%20Z%27/%3E%3Cpath d=%27M1207%202075%20L1136%201779%20L785%201611%20L741%201303%20L505%201082%20L495%201088%20L642%201348%20L586%201703%20L831%201919%20L793%202265%20Z%27/%3E%3C/g%3E%3C/svg%3E") !important;
  -webkit-mask-size:134% 134% !important; mask-size:134% 134% !important; -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;   /* oversize the bolt mask so the arms overshoot the corners (no corner gap) */
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sr-accent) 65%, transparent)) !important; animation:none !important; }
.shotres.k-olc::after{ display:none !important; }

/* ===================== LMT (last-ditch block) — horizontal SPEED streaks rushing in from the LEFT, ONE team colour ===================== */
.shotres.k-lmt{ background:linear-gradient(90deg, color-mix(in srgb, var(--sr-accent) 24%, #0a0820) 0%, #07050f 70%) !important; }
.shotres.k-lmt .sr-rays{ opacity:1 !important; top:0 !important; left:0 !important; transform:none !important; width:100% !important; height:100% !important;
  background:linear-gradient(90deg, color-mix(in srgb, var(--sr-accent) 92%, #fff 22%) 0%, var(--sr-accent) 22%, color-mix(in srgb, var(--sr-accent) 45%, transparent) 64%, transparent 92%) !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201000%202170%27%20preserveAspectRatio=%27none%27%3E%3Cg%20fill=%27%23fff%27%3E%3Cpolygon%20points=%27-160,1542.2%20720.0,1542.2%20692.9,1565.8%20-187.1,1565.8%27/%3E%3Cpolygon%20points=%27-160,992.9%20797.0,992.9%20771.5,1015.1%20-185.5,1015.1%27/%3E%3Cpolygon%20points=%27-160,2123.8%20313.0,2123.8%20292.0,2142.2%20-181.0,2142.2%27/%3E%3Cpolygon%20points=%27-160,1180.0%20631.0,1180.0%20617.3,1192.0%20-173.7,1192.0%27/%3E%3Cpolygon%20points=%27-160,2014.3%20846.0,2014.3%20823.6,2033.8%20-182.4,2033.8%27/%3E%3Cpolygon%20points=%27-160,2101.5%20873.0,2101.5%20848.9,2122.5%20-184.2,2122.5%27/%3E%3Cpolygon%20points=%27-160,886.8%20735.0,886.8%20713.8,905.2%20-181.2,905.2%27/%3E%3Cpolygon%20points=%27-160,2122.3%20308.0,2122.3%20292.5,2135.8%20-175.5,2135.8%27/%3E%3Cpolygon%20points=%27-160,1808.3%20648.0,1808.3%20632.6,1821.7%20-175.4,1821.7%27/%3E%3Cpolygon%20points=%27-160,221.1%20822.0,221.1%20796.8,242.9%20-185.2,242.9%27/%3E%3Cpolygon%20points=%27-160,1779.9%20315.0,1779.9%20289.5,1802.1%20-185.5,1802.1%27/%3E%3Cpolygon%20points=%27-160,1005.4%20574.0,1005.4%20563.3,1014.6%20-170.7,1014.6%27/%3E%3Cpolygon%20points=%27-160,1702.0%20825.0,1702.0%20804.3,1720.0%20-180.7,1720.0%27/%3E%3Cpolygon%20points=%27-160,836.1%20458.0,836.1%20446.7,845.9%20-171.3,845.9%27/%3E%3Cpolygon%20points=%27-160,1579.7%20514.0,1579.7%20487.9,1602.3%20-186.1,1602.3%27/%3E%3Cpolygon%20points=%27-160,374.1%20470.0,374.1%20442.5,397.9%20-187.5,397.9%27/%3E%3Cpolygon%20points=%27-160,991.7%20308.0,991.7%20291.2,1006.3%20-176.8,1006.3%27/%3E%3Cpolygon%20points=%27-160,747.2%20399.0,747.2%20376.5,766.8%20-182.5,766.8%27/%3E%3Cpolygon%20points=%27-160,2057.8%20700.0,2057.8%20688.2,2068.2%20-171.8,2068.2%27/%3E%3C/g%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201000%202170%27%20preserveAspectRatio=%27none%27%3E%3Cg%20fill=%27%23fff%27%3E%3Cpolygon%20points=%27-160,1542.2%20720.0,1542.2%20692.9,1565.8%20-187.1,1565.8%27/%3E%3Cpolygon%20points=%27-160,992.9%20797.0,992.9%20771.5,1015.1%20-185.5,1015.1%27/%3E%3Cpolygon%20points=%27-160,2123.8%20313.0,2123.8%20292.0,2142.2%20-181.0,2142.2%27/%3E%3Cpolygon%20points=%27-160,1180.0%20631.0,1180.0%20617.3,1192.0%20-173.7,1192.0%27/%3E%3Cpolygon%20points=%27-160,2014.3%20846.0,2014.3%20823.6,2033.8%20-182.4,2033.8%27/%3E%3Cpolygon%20points=%27-160,2101.5%20873.0,2101.5%20848.9,2122.5%20-184.2,2122.5%27/%3E%3Cpolygon%20points=%27-160,886.8%20735.0,886.8%20713.8,905.2%20-181.2,905.2%27/%3E%3Cpolygon%20points=%27-160,2122.3%20308.0,2122.3%20292.5,2135.8%20-175.5,2135.8%27/%3E%3Cpolygon%20points=%27-160,1808.3%20648.0,1808.3%20632.6,1821.7%20-175.4,1821.7%27/%3E%3Cpolygon%20points=%27-160,221.1%20822.0,221.1%20796.8,242.9%20-185.2,242.9%27/%3E%3Cpolygon%20points=%27-160,1779.9%20315.0,1779.9%20289.5,1802.1%20-185.5,1802.1%27/%3E%3Cpolygon%20points=%27-160,1005.4%20574.0,1005.4%20563.3,1014.6%20-170.7,1014.6%27/%3E%3Cpolygon%20points=%27-160,1702.0%20825.0,1702.0%20804.3,1720.0%20-180.7,1720.0%27/%3E%3Cpolygon%20points=%27-160,836.1%20458.0,836.1%20446.7,845.9%20-171.3,845.9%27/%3E%3Cpolygon%20points=%27-160,1579.7%20514.0,1579.7%20487.9,1602.3%20-186.1,1602.3%27/%3E%3Cpolygon%20points=%27-160,374.1%20470.0,374.1%20442.5,397.9%20-187.5,397.9%27/%3E%3Cpolygon%20points=%27-160,991.7%20308.0,991.7%20291.2,1006.3%20-176.8,1006.3%27/%3E%3Cpolygon%20points=%27-160,747.2%20399.0,747.2%20376.5,766.8%20-182.5,766.8%27/%3E%3Cpolygon%20points=%27-160,2057.8%20700.0,2057.8%20688.2,2068.2%20-171.8,2068.2%27/%3E%3C/g%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important; mask-size:100% 100% !important; -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sr-accent) 55%, transparent)) !important; animation:none !important; }
.shotres.k-lmt::after{ display:none !important; }
.sr-label{ text-align:center; }
/* ===================== PITCH lifted up so the opponent GK sits on the GOAL (not the stands) =====================
   The board's on-pitch cards (subs outfield + the player's keeper) ride up the SAME amount; the hand/tray stays. */
:root{ --pitch-up:11dvh;     /* the PITCH lifts this much so the opponent GK sits on the TOP goal */
       --team-up:0dvh; }     /* YOUR cards lift this much — kept low so your team sits DOWN the pitch, GK in front of your goal */
.runners{ transform:translateY(calc(-1 * var(--team-up))); }                    /* the player's on-pitch cards on every phase (declare/mark/showdown/subs) */
.keeper-row:not(.top){ transform:translateY(calc(-1 * var(--team-up) + var(--gk-rest))); }   /* the player's own keeper sits --gk-rest lower than the outfield (their keeper .top stays at the lifted goal) */

/* ===================== SUBS / board bench — a FULL-WIDTH hand background band + left gutter for the spine label ===================== */
.bench-shelf{ position:relative; margin:2cqw -3cqw 0; padding:2cqw 3cqw 0.5cqw 6cqw;   /* -3cqw cancels the tray side padding → full column width */
  background:linear-gradient(180deg, rgba(6,11,20,0) 0%, rgba(6,11,20,.55) 45%, rgba(6,11,20,.7) 100%); }   /* soft gradient only — no hard border */
/* "CARDS IN HAND" vertical spine — left edge aligned with the button below (= the tray's 3cqw side padding) */
.bench-tab{ position:absolute; left:3cqw; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--font); font-weight:800; font-size:2.3cqw; letter-spacing:.16em;
  line-height:1; color:var(--ink-dim); text-transform:uppercase; white-space:nowrap; z-index:5; opacity:.7; }
.bench-shelf .fanstage{ min-height:118px; }

/* OUTFIELD line (declare / subs / mark defenders) — hard cap at the 4-in-line width so a row of 1-3 NEVER
   grows bigger than when 4 share the line (and 5+ shrink to fit). Gap comes from the shared .runners rule. */
.runners.subs-mine .lane{ flex:1 1 0; width:auto; max-width:21cqw; }

/* ===================== CAMERA — STEP 1: pan toward the attack =====================
   When the first runner enters the attack zone (body.atk-live), the pitch eases DOWN and your defensive half
   (remaining outfield + keeper) slides off the bottom, so your GK leaves the frame. The pitch is the persistent
   element (transitions smoothly both ways); the cards re-render, so the first slide plays via a one-shot keyframe
   (.atk-pan-in) and the state is then held statically. */
:root{ --gk-rest:3dvh;         /* the keeper's resting offset below the outfield (carried through the pan) */
       --atk-pan:10dvh;        /* your keeper + remaining outfield slide TOGETHER (same distance, same pace) */
       --atk-pan-opp:13dvh;    /* opponents + the attacker descend to mid-screen (facing off) */
       --atk-commit:11dvh;     /* on commit, the whole board (pitch + cards) eases this much FURTHER down */
       --def-pan:21dvh;        /* DEFEND mark: the opponent attackers descend this far → onto the pitch, not the stands */
       --def-commit-up:8dvh;   /* DEFEND commit: the pitch slides UP this much further (matching the keeper's rise) */
       --def-commit-down:10dvh;/* DEFEND commit: the attackers + their blockers descend DOWN toward your goal */
       --combat-zoom:1.16;     /* COMBAT phase (react + damage step): the pitch is already pushed in this much */
       --sd-zoom:1.6;          /* SHOWDOWN: a more aggressive push-in (from the combat level up to here) */
       --sd-drop:4dvh; }       /* SHOWDOWN: slide the pitch background DOWN this much on the push-in */
body:has(.runners.subs-mine){ --gk-rest:5dvh; }   /* attack-family screens (subs + declare): a touch more air between the GK and the outfield row */
/* once panned, your outfield overlaps the hand's tray (which sits above the field in z-order) — let taps pass
   through the (inert, dead) hand so the remaining outfield stays draggable/tappable; keep the ATTACK button live */
body.atk-live .tray-wrap{ pointer-events:none; }
body.atk-live .tray-wrap .commit{ pointer-events:auto; }
#pitchbg{ transition:transform .42s cubic-bezier(.3,.1,.2,1); }
body.atk-live #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) + 11dvh)); }
/* DEFENDER POV: pitch slides UP (toward your goal) — overrides the attack pan on the defend screens */
body.cam-def #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) - 13dvh)) !important; }
/* MARK (picking) — the pitch sits ~a full card height LOWER than the other defend screens */
body:has(.markdline) #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) - 13dvh + 13dvh)) !important; }
/* and lift the whole field so your keeper clears the hand and is fully visible */
body.cam-def .field{ transform:translateY(-18dvh); }
body.atk-live .keeper-row:not(.top){ transform:translateY(calc(var(--atk-pan) + var(--gk-rest))); }   /* GK keeps its --gk-rest offset → same travel as the outfield */
body.atk-live .runners.subs-mine{ transform:translateY(var(--atk-pan)); }
body.atk-live .atk-top,
body.atk-live .atk-combat{ transform:translateY(var(--atk-pan-opp)); }
/* DEFEND (mark): the opponent attackers (.def-cover) start higher in their layout, so they need a BIGGER descent
   than the attack oppwall to land on the pitch (not the stands). */
body.atk-live .runners.def-cover{ transform:translateY(var(--def-pan)); }
/* DEFEND commit (mark -> react/showdown): the mirror of the attack commit. The pitch slides further UP (so it
   rises WITH the keeper), and the opponent attackers + their blockers descend DOWN toward your goal — the per-card
   FLIP (defCommitFlip) glides each attacker/blocker from its mark spot down to this committed spot. */
body.def-commit #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) - 13dvh - var(--def-commit-up) + 3dvh)) scale(var(--combat-zoom)) !important; }   /* +3dvh: goal mouth sits under the keeper, not behind him (phone feedback) */
body.def-commit .runners.def-cover{ transform:translateY(var(--def-commit-down)); }
/* COMMIT: the whole board pans further DOWN — the pitch eases down --atk-commit, and the entire react .field
   (every card) shifts down the same amount. The per-card FLIP (commitFlip) then GLIDES each card from its picking
   spot to its lower committed spot, so the reorganise + pan-down happen as one move. */
body.atk-commit #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) + 11dvh + var(--atk-commit) + 2.5dvh)) scale(var(--combat-zoom)); }   /* pitch slides a touch more than the cards */
body.atk-commit .field{ transform:translateY(var(--atk-commit)); }
/* react-attack opponent GK keeps the full picking-opponent descent (--atk-pan-opp) so it slides down to its spot. */
body:has(.atk-cover) .keeper-row.top{ transform:translateY(var(--atk-pan-opp)); }
/* the attacker/marker row descends only PART way (midway between barely-moving and the full GK drop). */
body:has(.atk-cover) .runners.atkruns.atk-cover{ transform:translateY(6.5dvh); }
/* SHOWDOWN: hold the GK + shooter at their REACT vertical positions (same descent as react) while sd-field scales
   them up; the pitch slides a touch further down than the react commit. */
body.cam-showdown .keeper-row.top{ transform:translate(var(--gk-cx,0px), calc(var(--atk-pan-opp) - 4dvh + var(--gk-cy,0px))); transition:transform .42s cubic-bezier(.3,.1,.2,1); }   /* base spot; after SHOOT, JS sets the vars and this slides the opp keeper down in front of the covered runner */
body.cam-showdown .keeper-row.top .keeper{ width:26cqw !important; height:28cqw !important; }   /* opponent GK matches the shooter card size */
body.cam-showdown .runners.sd-field{ transform:translateY(14dvh); }
body.cam-showdown #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) + 11dvh + var(--atk-commit) + 5dvh + var(--sd-drop))) scale(var(--sd-zoom)); }
/* DEFEND showdown (mirror): hold the free attacker(s) + your keeper at their REACT vertical positions so they
   DON'T jump on entry — the transform is on the row/container, the sd scale-in is on the inner card (no clash).
   The pitch already holds its def-commit position (def-commit stays on through the showdown). */
body.cam-defsd .runners.sd-field{ transform:translateY(12dvh); }      /* runners sit midfield — the hand shelf below claims the old goal-area space */
body.cam-defsd .keeper-row:not(.top){ transform:translate(var(--gk-cx,0px), calc(16dvh + var(--sab) + var(--gk-cy,0px))); transition:transform .42s cubic-bezier(.3,.1,.2,1); }   /* +var(--sab): the tray's safe-area padding lifts the field bottom on the phone — compensate so the GK still sits on the goal line */  /* keeper drops onto the goal line just above the shelf; on COVER, JS sets the vars and this transition slides the keeper in front of the covered shooter */
body.cam-defsd .keeper-row:not(.top) .keeper{ width:26cqw !important; height:28cqw !important; }   /* match the shooter card size in the showdown */
/* zoom the pitch background IN on the showdown (the camera pushes in from the combat-damage step) — same translate
   as def-commit (held position) + a scale; !important + later-in-file beats the def-commit pitch rule */
body.cam-defsd #pitchbg{ transform:translateX(-50%) translateY(calc(-1 * var(--pitch-up) - 13dvh - var(--def-commit-up) + var(--sd-drop) - 6dvh)) scale(1.38) !important; }   /* wider frame than the attack showdown (1.38 vs --sd-zoom 1.6) + extra -6dvh: goal mouth meets the keeper at his 13dvh spot */
/* entering the showdown: the GK + shooter GROW in place (from ~their react size to the bigger sd size) */
.field.sd-scalein .keeper-row.top .keeper,
.field.sd-scalein .keeper-row:not(.top) .keeper,   /* defend showdown: your keeper (at the goal) grows in too */
.field.sd-scalein .runners.sd-field .card{ animation:sdScaleIn .4s cubic-bezier(.3,.1,.2,1) both; }
@keyframes sdScaleIn{ from{ transform:scale(.76); } to{ transform:scale(1); } }
.field.atk-pan-in .keeper-row:not(.top){ animation:atkPanGk .42s cubic-bezier(.3,.1,.2,1) both; }
.field.atk-pan-in .runners.subs-mine{ animation:atkPanDown .42s cubic-bezier(.3,.1,.2,1) both; }
.field.atk-pan-in .atk-top,
.field.atk-pan-in .atk-combat{ animation:atkPanMid .42s cubic-bezier(.3,.1,.2,1) both; }
.field.atk-pan-in .runners.def-cover{ animation:defPanDown .42s cubic-bezier(.3,.1,.2,1) both; }
@keyframes defPanDown{ from{ transform:translateY(0); } to{ transform:translateY(var(--def-pan)); } }
@keyframes atkPanGk{ from{ transform:translateY(calc(-1 * var(--team-up) + var(--gk-rest))); } to{ transform:translateY(calc(var(--atk-pan) + var(--gk-rest))); } }
@keyframes atkPanDown{ from{ transform:translateY(calc(-1 * var(--team-up))); } to{ transform:translateY(var(--atk-pan)); } }
@keyframes atkPanMid{ from{ transform:translateY(0); } to{ transform:translateY(var(--atk-pan-opp)); } }
/* REVERSE: pulling the last runner back plays the same slides backwards, easing the board to its rest state
   (the pitch un-pans via its own transition). Same .42s so pitch + cards return in sync. */
.field.atk-unpan-in .keeper-row:not(.top){ animation:atkUnpanGk .42s cubic-bezier(.3,.1,.2,1) both; }
.field.atk-unpan-in .runners.subs-mine{ animation:atkUnpanOut .42s cubic-bezier(.3,.1,.2,1) both; }
.field.atk-unpan-in .atk-top,
.field.atk-unpan-in .atk-combat{ animation:atkUnpanMid .42s cubic-bezier(.3,.1,.2,1) both; }
@keyframes atkUnpanGk{ from{ transform:translateY(calc(var(--atk-pan) + var(--gk-rest))); } to{ transform:translateY(calc(-1 * var(--team-up) + var(--gk-rest))); } }
@keyframes atkUnpanOut{ from{ transform:translateY(var(--atk-pan)); } to{ transform:translateY(calc(-1 * var(--team-up))); } }
@keyframes atkUnpanMid{ from{ transform:translateY(var(--atk-pan-opp)); } to{ transform:translateY(0); } }

/* ===================== PHASE indicator floats over the CENTRE of the pitch (was a pill below the score bug) =====================
   ONLY reposition — keep the GOLAZOS skewX(-11deg) slant + green ring + 92%-opaque fill from the chip rule above. */
.phase{ position:absolute !important; left:50%; top:36%; transform:translate(-50%,-50%) skewX(-11deg); margin:0 !important; z-index:7; }
/* …but once the selection is committed (REACT + SHOWDOWN, either POV → atk-commit/def-commit), the chip docks
   just below the score bug (anchored to the scorebar's bottom edge: --sat + 12px margin + 44px bar + gap). */
body.atk-commit .phase,
body.def-commit .phase,
body:has(.markdline) .phase{ top:calc(var(--sat) + 78px); }   /* MARK docks the pill below the score bug too */
/* SUBS: the pill docks just ABOVE the cards in hand; the team lifts up to make room for it, then slides
   back DOWN to its original (declare) position when the phase moves on — see .subs-exit-slide. */
body.cam-subs .runners.subs-mine{ transform:translateY(-12dvh); }
body.cam-subs .keeper-row:not(.top){ transform:translateY(-10dvh); }   /* 2dvh below the outfield — slight gap to the row above */
body.cam-subs .phase{ top:auto; bottom:calc(230px + var(--sab)); transform:translate(-50%,0) skewX(-11deg); z-index:9; }   /* anchored in px just above the cards-in-hand band (robust across screen heights), below the GK */
body.cam-subs .tray-wrap:has(.lifting){ z-index:10; }   /* a lifted (selected) hand card pops ABOVE the pill — the pill only outranks the resting fan */
/* leaving subs → the declare players slide DOWN from the raised subs position (no jump) */
@keyframes subsExitSlide{ from{ transform:translateY(-12dvh); } to{ transform:translateY(0); } }
@keyframes subsExitSlideGk{ from{ transform:translateY(-10dvh); } to{ transform:translateY(var(--gk-rest)); } }   /* subs spot → declare rest (the base rule takes over at the same value) */
.field.subs-exit-slide .runners.subs-mine{ animation:subsExitSlide .42s cubic-bezier(.3,.1,.2,1) both; }
.field.subs-exit-slide .keeper-row:not(.top){ animation:subsExitSlideGk .42s cubic-bezier(.3,.1,.2,1) both; }
/* DECLARE only: the chip sits in the empty combat drop zone (default 36% lands there now the outfield is a
   pitch line below it), then vanishes the moment the first runner lands in the zone */
body:has(.atk-combat .runners.atkruns .lane) .phase{ display:none !important; }
/* DECLARE: the hint lives INSIDE the drop zone (so the zone's own flex centring keeps it dead-centre regardless of
   the safe-area offset) — hide the floating phase chip here entirely. No icon (just the text). */
body:has(.atk-combat) .phase{ display:none !important; }
/* MARK: the opponent attackers sit in the upper third — they're THEIR cards, so they DON'T ride the pitch-up
   lift (which, with no spacer above them now, was shoving them under the score bar). Scoped to mark via .markdline. */
body:has(.markdline) .runners.def-cover{ margin-top:7cqw; }   /* (descent now comes from the atk-live --def-pan rule) */
/* MARK defender line — arm/inelig/badge states on the .card structure (mirror the retired .dcard tray states) */
.markdline .card.runner.armed{ transform:translateY(-2cqw) scale(1.05); z-index:3;
  filter:drop-shadow(0 0 1cqw var(--you)) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)); }
.markdline .card.runner.inelig{ opacity:.4; filter:grayscale(.6); }
.markdline .card.runner .nomark{ position:absolute; top:5%; right:5%; width:5cqw; height:5cqw; border-radius:50%;
  background:rgba(142,153,166,.92); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:3cqw; font-weight:800; z-index:4; box-shadow:0 2px 6px rgba(0,0,0,.5); }

/* ===================== PvP — main menu, lobby (room code), deck-wait, connection chrome =====================
   GOLAZOS-styled: reuses .home/.play/.commit; lime = go, electric blue = the friend/online accent. */
.backbtn{ position:absolute; top:calc(var(--sat) + 8px); left:8px; z-index:6; background:none; border:0; cursor:pointer;
  color:var(--ink-dim); font:800 italic 13px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:10px 12px; }
.backbtn:active{ color:#fff; transform:scale(.96); }
.room-chip{ margin:8px auto 0; width:max-content; padding:6px 12px; border-radius:999px; background:var(--s-100); border:1px solid var(--line);
  font:700 9.5px/1 var(--font); letter-spacing:.18em; color:var(--ink-dim); text-transform:uppercase; }

/* main menu: wordmark up top, the two big actions centred */
.menu-mid{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:16px; padding-bottom:10dvh; }
.play.menu-btn{ min-height:76px; }
.play.alt{ background:linear-gradient(180deg, color-mix(in srgb, var(--you) 86%, #fff) 0%, var(--you) 100%); color:#eaf0ff;
  box-shadow:0 10px 26px rgba(47,107,255,.36), inset 0 1px 0 rgba(255,255,255,.34); }
@media (hover:hover){ .play.alt:hover{ box-shadow:0 14px 34px rgba(47,107,255,.46), inset 0 1px 0 rgba(255,255,255,.45); } }
.play.alt:active{ box-shadow:0 4px 14px rgba(47,107,255,.32), inset 0 1px 0 rgba(255,255,255,.34); }

/* lobby: the room code BIG on a raised card, then the join row */
.lobby-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.lobby-card{ background:var(--s-100); border:1px solid var(--line); border-radius:18px; padding:20px 16px 18px;
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.lobby-kicker{ font:800 10px/1 var(--font); letter-spacing:.26em; color:var(--ink-faint); text-transform:uppercase; }
.lobby-code{ background:none; border:0; cursor:pointer; padding:2px 8px;
  font:800 italic 62px/1 var(--font); letter-spacing:.16em; text-indent:.16em; color:#fff;
  text-shadow:0 0 26px rgba(47,107,255,.6); }
.lobby-code:disabled{ color:var(--ink-ghost); text-shadow:none; }
.lobby-code:active{ transform:scale(.97); }
.lobby-hint{ font:700 9px/1 var(--font); letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }
.lobby-status{ display:flex; align-items:center; gap:8px; margin-top:5px; font:600 13px/1 var(--font); color:var(--ink-dim); }
.lobby-status i, .su-wait i{ width:8px; height:8px; border-radius:50%; background:var(--save); animation:lobpulse 1.2s ease-in-out infinite; }
@keyframes lobpulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
.lobby-or{ display:flex; align-items:center; gap:12px; color:var(--ink-faint); font:800 10px/1 var(--font); letter-spacing:.22em; }
.lobby-or::before,.lobby-or::after{ content:""; flex:1 1 auto; height:1px; background:var(--line-strong); }
.lobby-join{ display:flex; gap:10px; }
.lobby-join input{ flex:1 1 auto; min-width:0; height:56px; border-radius:16px; border:1px solid var(--line-strong); background:var(--s-50); color:#fff;
  font:800 italic 24px/1 var(--font); letter-spacing:.3em; text-indent:.3em; text-align:center; text-transform:uppercase; outline:none; }
.lobby-join input::placeholder{ color:var(--ink-ghost); }
.lobby-join input:focus{ border-color:var(--you); box-shadow:0 0 0 2px var(--you-tint); }
.lobby-join .joinbtn{ flex:0 0 112px; width:auto; height:56px; }
.lobby-err{ text-align:center; color:var(--atk); font:700 11px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.dw-deck{ font:800 italic 27px/1 var(--font); color:#fff; }

/* PvP setup: the lineup is in — pulsing wait pill where the KICK OFF ring sat (wraps, never clips) */
.su-wait{ display:flex; align-items:center; gap:1.6cqw; max-width:44cqw; font:800 italic 3.2cqw/1.25 var(--font); letter-spacing:.04em;
  color:var(--ink-dim); text-transform:uppercase; text-align:right; }
.su-wait i{ flex:0 0 auto; }

/* connection chrome: slim fixed RECONNECTING banner + transient toast (JS-created, outside #app) */
#connbar{ position:fixed; top:0; left:0; right:0; z-index:99980; padding:calc(var(--sat) + 5px) 0 6px; text-align:center;
  background:linear-gradient(180deg, rgba(255,61,132,.94), rgba(255,61,132,.8)); color:#fff;
  font:800 italic 12px/1 var(--font); letter-spacing:.24em; text-transform:uppercase; animation:lobpulse 1.4s ease-in-out infinite; }
#toast{ position:fixed; left:50%; bottom:calc(var(--sab) + 88px); transform:translateX(-50%) translateY(8px); z-index:99985;
  max-width:86vw; padding:10px 16px; border-radius:999px; background:rgba(8,13,26,.94); border:1px solid var(--line-strong);
  color:#fff; font:700 12px/1.3 var(--font); letter-spacing:.04em; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; box-shadow:var(--el-3); }
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }