:root{
  --bg-0:#E7EAE1;
  --bg-1:#DCE0D3;
  --pitch:#1C5C36;
  --pitch-2:#2F7A48;
  --line:#D5D0C1;
  --ink:#16212B;
  --ink-dim:#53616B;
  --gold:#B8862E;
  --gold-2:#E7C87E;
  --gold-ink:#7A5A18; /* text-safe gold: same hue, darkened for use on light panels/white where the bright --gold fails contrast */
  --accent:#5B2C8A;
  --accent-2:#3B1A63;
  --danger:#AD3226;
  --bronze:#8a6d4b;
  --silver:#9AA3A6;
  --blue:#2E5F8A;
  --purple:#6E3F9E;
  --red:#AD3226;
  --panel:#FFFFFF;
  --panel-2:#EEEBE1;
  --radius:14px;
  --font-d: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
input, textarea, [contenteditable]{-webkit-user-select:text; user-select:text;}
/* IMPORTANT - do not put user-select:none back on `*`.
   It was there to stop text being selected while tapping through the game, but
   applying it to every element also applies it to every ANCESTOR of every text
   field (html, body, #app, the screen container...). On iOS WebKit an input
   inside a -webkit-user-select:none subtree cannot be focused or typed into,
   and overriding it on the input itself does not reliably lift it - the whole
   ancestor chain has to be clear. That is what stopped the username, password
   and team name boxes from working at all.
   Selection is instead suppressed only on the specific things you tap during
   play, none of which are ancestors of a text field. */
button, .btn, .navbtn, .icon-btn, .pcard, .lt-row, .roster-row, .chip,
.topbar, .bottomnav, .howto-demo, .reveal-card-stage, .quick-tile,
canvas, svg, .coin-pill, .badge, .rarity-label, .rarity-stars{
  -webkit-user-select:none; user-select:none;
}
/* Text entry is explicitly selectable, and lifted above the decorative
   background layer on the title/sign-in screen so nothing covers the tap target. */
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
  touch-action:manipulation;
  pointer-events:auto;
  position:relative;
  z-index:3;
}
/* min-height, NOT height.
   Pinning html/body to height:100% is the specific thing that stops text
   fields being focusable when the page is launched from a home-screen
   bookmark on iOS: the page becomes a fixed-height box, and tapping a field
   inside it never raises the keyboard. Using min-height lets the document
   grow when the keyboard appears, which is what makes focus work. */
html,body{min-height:100%; background:#E7EAE1;}
body{
  margin:0;
  background:
    repeating-linear-gradient(115deg, rgba(10,36,23,0.028) 0px, rgba(10,36,23,0.028) 46px, transparent 46px, transparent 92px),
    var(--bg-0);
  color:var(--ink);
  font-family:var(--font-b);
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:520px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:28px;}
/* Every full-screen render gets a quick fade+rise so switching screens reads as a
   transition rather than an abrupt cut - cheap (opacity/transform only, no
   reflow-triggering properties) so it stays smooth on low-end phones. */
@keyframes screenIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
#app > .screen, #app > .title-screen{ animation:screenIn .22s ease-out; }
/* The reveal screen recreates its whole DOM on every single card (not just on
   entry), so animating the container would retrigger a fade+shift across the
   entire screen each tap - visible as a "shudder". Only the card itself should
   move; the container gets a one-time entrance only, applied explicitly by JS
   on the very first card and never again. */
.reveal-screen-enter{ animation:screenIn .22s ease-out; }
/* The match screen re-renders its .screen root on every single chance (not just on
   navigation) - animating that would make the canvas visibly judder mid-match, so
   it opts out and relies on its own chance-to-chance transitions instead. */
#app > .screen.no-transition{ animation:none; }
.hidden{display:none !important;}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--font-d); margin:0; letter-spacing:0.5px; text-transform:uppercase; -webkit-text-stroke:1px rgba(31,23,48,0.12); paint-order:stroke fill; text-shadow:0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(31,23,48,0.08);}
.eyebrow{font-family:var(--font-d); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; color:var(--ink-dim); font-weight:600;}
.eyebrow::before{content:""; display:inline-block; width:3px; height:11px; margin-right:7px; vertical-align:-1px; background:var(--gold); border-radius:1px;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px; position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(246,241,251,0.97), rgba(246,241,251,0.9) 80%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(111,63,158,0.08);
}
.brand{font-family:var(--font-d); font-weight:900; font-size:16px; letter-spacing:0.3px; text-shadow:0 1px 0 rgba(255,255,255,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.brand-mark{display:flex; align-items:center;}
.brand span{color:var(--gold-ink); text-shadow:0 0 18px rgba(184,134,46,0.25);}
.coin-pill{
  display:flex; align-items:center; gap:6px; background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0)), var(--panel-2);
  border:1px solid rgba(184,134,46,0.3); padding:7px 13px; border-radius:999px; font-weight:800;
  font-size:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(184,134,46,0.1);
}
.coin-pill .dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 60%, #b98a1c); box-shadow:0 0 10px rgba(184,134,46,0.65);}
.coin-pill .coin-ico{display:inline-flex; color:var(--gold-ink); filter:drop-shadow(0 0 3px rgba(184,134,46,0.4));}
.xp-pill{
  display:flex; align-items:center; gap:4px; background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0)), var(--panel-2);
  border:1px solid rgba(91,44,138,0.35); padding:7px 11px; border-radius:999px; font-weight:800;
  font-size:13px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(91,44,138,0.12); color:var(--accent);
}

/* ---------- Buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-d); font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  font-size:15px; padding:15px 18px; border-radius:14px; border:none; cursor:pointer;
  color:var(--ink); background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0)), var(--panel-2);
  border:1px solid rgba(255,255,255,0.09);
  transition:transform .08s ease, filter .15s ease; width:100%;
}
.btn:active{transform:scale(0.96); filter:brightness(0.92);}
.btn-primary{background:linear-gradient(165deg, #8A5FB0, var(--accent) 45%, var(--accent-2)); color:#F5F0FA; border:1px solid rgba(255,255,255,0.25); box-shadow:0 8px 22px rgba(111,63,158,0.38), inset 0 1px 0 rgba(255,255,255,0.35); letter-spacing:1.8px; text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.btn-gold{background:linear-gradient(165deg, #F5E9C8, var(--gold-2) 40%, var(--gold)); color:#2b1c02; border:1px solid rgba(255,255,255,0.3); box-shadow:0 8px 22px rgba(184,134,46,0.35), inset 0 1px 0 rgba(255,255,255,0.4); letter-spacing:1.8px; text-shadow:0 1px 0 rgba(255,255,255,0.35);}
.btn-danger{background:linear-gradient(180deg,#f06b60,var(--danger)); color:#2a0806;}
.btn-ghost{background:transparent; border:1px solid #c7b3e0; color:var(--ink-dim);}
.btn:disabled{opacity:0.35; filter:grayscale(0.6); cursor:not-allowed;}
.btn-row{display:flex; gap:10px;}
.btn-sm{padding:10px 14px; font-size:12px; border-radius:10px;}
.flexbetween > .btn{width:auto; flex-shrink:0;}

/* ---------- Cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:4px; align-items:stretch; justify-items:stretch;}
.grid > div{width:100%; min-width:0;}
.grid > div > .pcard{width:100%;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}

.pcard{
  position:relative; border-radius:16px; padding:12px 10px 10px;
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; border:1.5px solid var(--rc-soft, rgba(255,255,255,0.08));
  box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.06);
  color:#0c0c0c;
  transition:transform .1s ease, box-shadow .1s ease;
}
.pcard[onclick]{cursor:pointer;}
.pcard[onclick]:active{transform:scale(0.96); box-shadow:0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);}
.pcard .bg-pattern{position:absolute; inset:0; opacity:0.14; background-image:repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 14px); pointer-events:none;}
/* Small foil corner flag, tinted per-rarity via --rc. Present on every tier at
   a low opacity so it never fights the card's own colours; brighter on the
   three collectible-feeling tiers (purple/gold/goat) so a good pull reads as
   more special without changing the card's size or layout. */
.pcard-corner{position:absolute; top:-2px; right:-2px; width:38px; height:38px; pointer-events:none; z-index:0;
  background:linear-gradient(135deg, transparent 48%, var(--rc, rgba(255,255,255,0.3)) 50%, transparent 68%);
  opacity:0.35;}
.pcard.rar-purple .pcard-corner, .pcard.rar-gold .pcard-corner, .pcard.rar-goat .pcard-corner{opacity:0.8; width:44px; height:44px;}
/* Collection-grid "just pulled, not looked at yet" badge - deliberately sits
   OUTSIDE the card's own box (on its wrapper, not inside .pcard) so it can
   never collide with or push around the card's internal layout. */
.grid-new-badge{position:absolute; top:-5px; left:-5px; z-index:3; background:var(--accent); color:#fff; font-family:var(--font-d); font-weight:900; font-size:9px; letter-spacing:0.5px; padding:3px 7px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.4); pointer-events:none;}
/* Pack Opener results: all 5 cards in one row, scaled well down, so the
   whole pack + total + sell button fits without scrolling on a phone screen
   instead of the usual 2-column grid stacking into 3 rows. */
.opener-results-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; align-items:end;}
.opener-best-badge{position:absolute; top:-4px; left:50%; transform:translateX(-50%); z-index:3; background:var(--gold-ink); color:#fff; font-size:10px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.35); pointer-events:none;}
.opener-card-value{margin-top:3px; font-weight:800; font-size:9px;}
/* Sits at the bottom edge of the modal itself (which is already anchored low
   on screen) rather than wherever the content happens to end, so the primary
   action is always right where a thumb naturally rests instead of requiring
   a stretch up the screen. */
.modal-sticky-cta{position:sticky; bottom:-22px; margin:12px -22px -22px; padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); width:calc(100% + 44px); border-radius:0 0 20px 20px; box-shadow:0 -8px 16px rgba(0,0,0,0.25);}
.pcard-jersey{display:flex; justify-content:center; margin:2px 0;}
.pcard-jersey-svg{width:52%; height:auto; display:block; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.28));}
.pcard .top-row{display:flex; justify-content:space-between; align-items:flex-start; z-index:1; position:relative;}
.pcard-body{position:relative; z-index:1;}
.pcard .rating-row{display:flex; align-items:baseline; gap:2px;}
.pcard .rating{font-family:var(--font-d); font-weight:900; font-size:27px; line-height:1; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 5px rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.18);}
.pcard .rating-max{font-family:var(--font-d); font-weight:700; font-size:10.5px; line-height:1; opacity:0.75; white-space:nowrap; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5);}
.pcard .rating-bar{position:absolute; left:1px; bottom:-5px; width:22px; height:3px; border-radius:2px; background:var(--rc, rgba(0,0,0,0.3)); box-shadow:0 0 6px var(--rc-soft, transparent); pointer-events:none;}
.pcard .pos{font-family:var(--font-d); font-weight:800; font-size:11px; background:rgba(0,0,0,0.18); padding:3px 7px; border-radius:6px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.12), inset 0 -1px 0 rgba(255,255,255,0.15);}
.pcard .rarity-label{font-family:var(--font-d); font-weight:800; font-size:9px; letter-spacing:1.6px; opacity:0.9; margin-top:4px; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5);}
.pcard .rarity-stars{position:absolute; right:0; bottom:-10px; font-size:8px; letter-spacing:1.5px; white-space:nowrap; color:var(--rc, currentColor); opacity:0.9; text-shadow:0 1px 1px rgba(0,0,0,0.15); pointer-events:none;}
.pcard-divider{height:1px; background:linear-gradient(90deg, transparent, var(--rc-soft, rgba(0,0,0,0.16)), transparent); margin:4px 0;}
.pcard .name{font-family:var(--font-d); font-weight:900; font-size:13px; line-height:1.05; letter-spacing:0.2px; text-transform:uppercase; z-index:1; margin-top:2px; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pcard .club{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; opacity:0.95; z-index:1; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5);}
.pcard .season{font-size:9px; font-weight:600; opacity:0.75; z-index:1; margin-top:1px; text-shadow:0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5);}
.pcard .maxrow{font-size:9px; font-weight:800; z-index:1; background:rgba(0,0,0,0.14); padding:4px 7px 5px; border-radius:8px; margin-top:5px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.1); flex-shrink:0;}
.pcard .maxrow-top{display:flex; justify-content:space-between; align-items:center;}
.pcard .maxrow-bar{height:3px; border-radius:3px; background:rgba(0,0,0,0.2); overflow:hidden; margin-top:4px;}
.pcard .maxrow-bar > div{height:100%; background:rgba(255,255,255,0.7); border-radius:3px;}
.pcard.small{aspect-ratio:3/4;}
.pcard.locked{background:linear-gradient(160deg,#362a49,#221a30); color:var(--ink-dim); display:flex; align-items:center; justify-content:center; text-align:center;}
.pcard.locked .qm{font-family:var(--font-d); font-size:34px; font-weight:900; color:#3a2d4a;}

/* Rarity tiers: background + a few tier-appropriate touches. Higher tiers get
   a slightly stronger ring glow and richer inner highlight - same card
   geometry throughout, only the finish changes. */
.rar-grey{background:linear-gradient(160deg,#e2e5eb,#9aa0ab); color:#14151a;}
.rar-green{background:linear-gradient(160deg,#94f0bb,#18a851); color:#062010; box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(0,0,0,0.06);}
.rar-blue{background:linear-gradient(160deg,#8ec1f5,#2f79cf); color:#081522; box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 10px rgba(47,121,207,0.28);}
.rar-purple{background:linear-gradient(160deg,#9E7EC0,#7C4FA8); color:#F5F0FA; box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16), 0 0 14px rgba(124,79,168,0.4); text-shadow:0 1px 2px rgba(0,0,0,0.35);}
.pcard.rar-purple .rating, .pcard.rar-purple .rating-max, .pcard.rar-purple .name, .pcard.rar-purple .club, .pcard.rar-purple .season, .pcard.rar-purple .rarity-label{
  text-shadow:0 0 2px rgba(0,0,0,0.75), 0 0 5px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
}
.rar-gold{background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#2b1c02; box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 18px rgba(184,134,46,0.5);}
.rar-goat{
  background:linear-gradient(135deg,#F5E9C8,#B8862E 30%,#F5E9C8 55%,#B8862E 80%);
  background-size:220% 220%; animation:goatshine 3.5s ease infinite;
  color:#2b1c02; box-shadow:0 0 22px rgba(184,134,46,0.65), inset 0 1px 0 rgba(255,255,255,0.5);
  border:1px solid #E7C87E;
}
@keyframes goatshine{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* Trophy cards - rarer than GOAT, one per tier, extreme pull odds. Each gets
   its own finish so Gold/Diamond/Platinum read as visibly different tiers of
   the same idea, not just three colour swaps. */
.rar-trophy-gold{
  background:linear-gradient(135deg,#fff2cf,#caa544 30%,#fff2cf 55%,#caa544 80%);
  background-size:220% 220%; animation:goatshine 3.2s ease infinite;
  color:#2b1c02; box-shadow:0 0 24px rgba(202,165,68,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
  border:1px solid #f0d999;
}
.rar-trophy-diamond{
  background:linear-gradient(135deg,#eafdff,#4fa9c9 30%,#eafdff 55%,#4fa9c9 80%);
  background-size:220% 220%; animation:goatshine 2.8s ease infinite;
  color:#04202a; box-shadow:0 0 26px rgba(120,220,255,0.65), inset 0 1px 0 rgba(255,255,255,0.6);
  border:1px solid #bdeeff;
}
.rar-trophy-platinum{
  background:linear-gradient(135deg,#ffffff,#c7ccd6 22%,#ffffff 44%,#c7ccd6 66%,#ffffff 88%);
  background-size:280% 280%; animation:platinumshine 2.2s ease infinite;
  color:#1a1c22; box-shadow:0 0 30px rgba(255,255,255,0.85), 0 0 50px rgba(180,190,255,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  border:1px solid #ffffff;
}
@keyframes platinumshine{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* ---------- Sections / Panels ---------- */
.screen{padding:6px 16px 90px;}
.panel{
  background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 45%), var(--panel);
  border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:16px; margin-bottom:14px;
  box-shadow:0 10px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative;
}
.panel-glow{
  border-color:rgba(111,63,158,0.4);
  box-shadow:0 10px 30px rgba(111,63,158,0.18), 0 0 0 1px rgba(111,63,158,0.15) inset, inset 0 1px 0 rgba(255,255,255,0.06);
}
.panel-gold{
  border-color:rgba(184,134,46,0.35);
  box-shadow:0 10px 26px rgba(184,134,46,0.12), 0 0 0 1px rgba(184,134,46,0.12) inset, inset 0 1px 0 rgba(255,255,255,0.05);
}
.section-title{font-family:var(--font-d); font-weight:900; letter-spacing:1.5px; font-size:13px; color:var(--ink-dim); text-transform:uppercase; margin-bottom:10px; text-shadow:0 1px 0 rgba(255,255,255,0.6);}
.glow-num{text-shadow:0 0 24px rgba(111,63,158,0.5);}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:14px 0;}

/* ---------- Title Screen ---------- */
/* min-height:100vh alone measures against the LARGER virtual viewport mobile
   Safari uses when its toolbars are visible, which is taller than what's
   actually on screen - this screen's few, short fields then centered against
   that overshoot, spreading them out with a large empty gap in the middle,
   exactly as seen with the address bar showing. 100dvh tracks the real,
   currently-visible height instead. The vh version stays first as a fallback
   for browsers that don't understand dvh; dvh overrides it where it's understood. */
.title-screen{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; position:relative;}
.title-screen::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(111,63,158,0.12), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 40px, rgba(255,255,255,0.015) 40px 41px);
  pointer-events:none;
}
/* Locked, fixed-height screen for the team-reveal sequence - no scroll, no
   layout shift between cards, so the only motion is the card's own flip-in. */
.reveal-screen{height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; position:relative;}
.reveal-card-stage{display:flex; justify-content:center; align-items:center; margin-top:22px; width:210px; height:280px; perspective:800px;}
@keyframes revealGlowPulse{ 0%{box-shadow:0 0 0 rgba(184,134,46,0);} 45%{box-shadow:0 0 46px 6px rgba(184,134,46,0.5);} 100%{box-shadow:0 0 0 rgba(184,134,46,0);} }
.reveal-standout{ animation:revealGlowPulse 1.1s ease-out; border-radius:16px; }
.logo-badge{
  width:88px; height:auto; margin:0 auto 16px; position:relative;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 12px 26px rgba(59,26,99,0.45)) drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.logo-badge::before{
  content:""; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,63,158,0.4), rgba(184,134,46,0.12) 55%, transparent 72%);
  animation:logoAura 2.8s ease-in-out infinite; z-index:-1;
}
@keyframes logoAura{ 0%,100%{opacity:0.55; transform:scale(0.9);} 50%{opacity:1; transform:scale(1.08);} }
.title-screen h1{
  font-family:var(--font-d); font-size:42px; font-weight:900; line-height:1.0; z-index:1; letter-spacing:1.5px;
  color:#fff;
  background:linear-gradient(180deg, #ffffff 0%, #f1e2ff 35%, #cd9bff 70%, #9b5cf0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 3px 0 rgba(76,15,148,0.25), 0 10px 26px rgba(59,26,99,0.55), 0 2px 40px rgba(111,63,158,0.35);
}
.title-screen h1 span{
  display:inline-block; margin-top:3px; letter-spacing:3px;
  background:linear-gradient(180deg, #fffaea 0%, var(--gold) 55%, #b9812a 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 3px 0 rgba(139,95,10,0.3), 0 8px 22px rgba(184,134,46,0.55);
}
.title-sub{color:var(--ink-dim); margin:10px 0 30px; font-size:14px; z-index:1; max-width:280px;}
/* The decorative ::before layer is absolutely positioned, so it paints above
   any static sibling regardless of that sibling's z-index (z-index has no
   effect without a position). Every child of this screen therefore has to be
   positioned to sit above it - otherwise the overlay covers the inputs and
   buttons, and on some browsers swallows taps aimed at them. This screen is
   used for BOTH the title/naming screen and the sign-in screen. */
.title-screen > *{position:relative; z-index:1;}
.title-btns{display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; z-index:1; position:relative;}
/* Positioned so its own stacking context sits above the decorative ::before
   layer - z-index alone does nothing on a static element, which left the
   controls beneath the overlay. */
.title-account{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px;
}
.title-btns .btn[disabled]{position:relative;}
.lock-tag{font-size:9.5px; letter-spacing:1px; opacity:0.75;}

/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px;
  display:flex; background:rgba(255,255,255,0.94); backdrop-filter:blur(10px);
  border-top:1px solid rgba(111,63,158,0.12); z-index:50; padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,0.3);
}
.navbtn{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px; background:none; border:none; color:var(--ink-dim); font-family:var(--font-d); font-size:10px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; border-radius:14px; transition:background .15s ease, transform .08s ease; position:relative;}
.navbtn:active{transform:scale(0.92);}
.navbtn.active{color:var(--accent); background:rgba(111,63,158,0.12);}
.navbtn.active::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:18px; height:3px; border-radius:0 0 3px 3px; background:var(--accent); box-shadow:0 0 6px rgba(111,63,158,0.6);}
.navbtn .ic{display:flex; filter:drop-shadow(0 0 0 transparent); transition:filter .15s ease; transform:scale(1.08);}
.icon-btn{width:auto !important; padding:9px !important; border-radius:999px; display:inline-flex !important; align-items:center; justify-content:center; color:var(--ink-dim);}
.navbtn.active .ic{filter:drop-shadow(0 0 6px rgba(111,63,158,0.6));}

/* ---------- Modal ---------- */
.ll-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:rgba(20,14,32,0.94); color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; font-weight:700; z-index:300; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:88vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.ll-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.modal-overlay{
  position:fixed; inset:0; background:rgba(14,10,20,0.75); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
  animation:fadein .18s ease;
}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Pack reveals fill the entire screen edge-to-edge - no rounded card, no
   surrounding backdrop to tap through, nothing behind it to accidentally
   reach. This is deliberately NOT a "pop-up" in look or behaviour. */
.pack-reveal-overlay{ padding:0; }
.pack-reveal-overlay .modal-box{
  max-width:none; width:100%; height:100%; max-height:100%;
  border-radius:0; border:0; padding:26px 16px;
  display:flex; flex-direction:column; justify-content:center;
  overflow-y:auto; box-shadow:none;
}
.modal-box{
  background:linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%), var(--panel-2);
  border:1px solid rgba(111,63,158,0.25); border-radius:20px; padding:22px;
  max-width:400px; width:100%; max-height:86vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(111,63,158,0.1);
  animation:popin .22s cubic-bezier(.2,1.4,.4,1);
  /* No modal in the game contains a text field, so this is always safe: tapping
     - or tapping-and-dragging slightly, which a real finger does far more often
     than a mouse click - could otherwise select the modal's own text and pop up
     the browser's native copy/lookup bubble over the screen behind it. That
     bubble is what "pulling up text from the screen behind" was. */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
@keyframes popin{from{transform:scale(0.85); opacity:0;}to{transform:scale(1); opacity:1;}}
/* This is authored as a dramatic dark card (white text, gold accents) but was
   rendering inside the light modal-box with no background of its own - the
   white copy was nearly invisible against the light panel. Gives it its own
   full-bleed dark background (covering the modal-box's padding) so the
   white/gold text it already uses actually reads. */
.big-chance-modal{
  margin:-22px; padding:26px 22px; border-radius:20px;
  background:linear-gradient(165deg, rgba(50,20,70,0.98), rgba(20,10,30,0.98));
  box-shadow:inset 0 0 40px rgba(0,0,0,0.25);
}
.big-chance-modal .tiny{color:rgba(255,255,255,0.6);}
.big-chance-modal h1{animation:bigChancePulse 1.3s ease-in-out infinite;}
@keyframes bigChancePulse{0%,100%{text-shadow:0 0 0 rgba(184,134,46,0);}50%{text-shadow:0 0 22px rgba(184,134,46,0.65);}}
.modal-box h2{font-size:20px; margin-bottom:8px; text-shadow:0 1px 0 rgba(255,255,255,0.5);}

/* pack reveal */
.pack-stage{text-align:center; position:relative;}
.pack-skip-btn{
  position:absolute; top:0; right:0; z-index:10; background:rgba(0,0,0,0.3); color:#fff; border:1px solid rgba(255,255,255,0.25);
  border-radius:999px; padding:5px 12px; font-size:10.5px; font-weight:800; letter-spacing:0.5px; cursor:pointer;
}
.pack-skip-btn:active{transform:scale(0.94);}
.walkout-skip-btn{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3);}
.pack-result-badge{display:inline-block; font-family:var(--font-d); font-weight:900; font-size:11px; letter-spacing:1px; padding:5px 12px; border-radius:999px;}
.pack-result-badge.badge-new{background:rgba(91,44,138,0.18); color:var(--accent);}
.pack-result-badge.badge-upgrade{background:rgba(184,134,46,0.22); color:var(--gold-ink);}
.pack-result-badge.badge-dup{background:rgba(255,255,255,0.08); color:var(--ink-dim);}
.pack-anim-area{position:relative; min-height:250px; display:flex; align-items:center; justify-content:center; margin:10px 0;}
.pack-icon{display:flex; animation:packPulse 0.6s ease infinite; filter:drop-shadow(0 0 16px rgba(111,63,158,0.55));}
@keyframes packPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.pack-burst{
  position:absolute; width:10px; height:10px; border-radius:50%; left:50%; top:50%;
  transform:translate(-50%,-50%); background:radial-gradient(circle, var(--burst-color), transparent 70%);
  opacity:0; pointer-events:none;
}
.pack-burst.go{animation:burstExpand 0.7s ease-out forwards;}
@keyframes burstExpand{0%{width:10px; height:10px; opacity:0.9;}60%{opacity:0.5;}100%{width:380px; height:380px; opacity:0;}}
.pack-flash{
  position:absolute; inset:-40px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.95), transparent 60%);
  opacity:0; pointer-events:none;
}
.pack-flash.go{animation:flashPulse 0.5s ease-out forwards;}
@keyframes flashPulse{0%{opacity:0.85; transform:scale(0.3);}100%{opacity:0; transform:scale(1.7);}}
.pack-confetti{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.confetti-bit{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:2px;
  animation:confettiFly 0.9s ease-out forwards;
}
@keyframes confettiFly{
  0%{transform:translate(-50%,-50%) rotate(0deg); opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(360deg); opacity:0;}
}
.pack-card-wrap{
  position:absolute; width:150px; opacity:0; transform:scale(0.4) rotateY(90deg);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,1.6,.4,1);
}
.pack-card-wrap.show{opacity:1; transform:scale(1) rotateY(0deg);}
.pack-card-shine{position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:16px; overflow:hidden;}
.pack-card-shine::after{
  content:""; position:absolute; top:-50%; left:-150%; width:60%; height:200%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:rotate(20deg); animation:shineSweep 1.1s ease-in-out 0.5s 1;
}
@keyframes shineSweep{0%{left:-150%;}100%{left:150%;}}
.modal-box p{color:var(--ink-dim); font-size:14px; line-height:1.5;}

/* Ambient light rays behind EVERY pack reveal, not just walkouts - a rotating
   soft conic sweep tinted to the pull's own rarity colour, subtle on common
   pulls and more present on rarer ones, so even a bronze pack feels like it's
   happening on a proper stage instead of a flat white modal. */
.pack-rays{
  position:absolute; inset:-60%; pointer-events:none; opacity:0.5;
  background:conic-gradient(from 0deg, transparent 0deg, var(--burst-color, #5B2C8A) 6deg, transparent 16deg, transparent 180deg, var(--burst-color, #5B2C8A) 186deg, transparent 196deg, transparent 360deg);
  filter:blur(2px);
  animation:packRaysSpin 9s linear infinite;
  mix-blend-mode:screen;
}
@keyframes packRaysSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.pack-piece-glow{animation:packPieceGlow .5s ease;}
@keyframes packPieceGlow{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));}35%{filter:drop-shadow(0 0 10px rgba(255,255,255,0.85));}100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));}}

/* ---------- WALKOUT reveal (88+) / SUPER WALKOUT (94+) ---------- */
.walkout-stage{
  position:relative; text-align:center; overflow:hidden; border-radius:20px; padding:22px 14px 20px; margin:-4px;
  background:radial-gradient(ellipse at 50% 22%, #2a1240 0%, #0a0612 65%, #050308 100%);
}
.walkout-stage.super{background:radial-gradient(ellipse at 50% 22%, #402a05 0%, #140d02 65%, #050301 100%);}
.walkout-stage.shake{animation:walkoutShake .45s ease;}
@keyframes walkoutShake{0%,100%{transform:translate(0,0);}20%{transform:translate(-5px,3px);}40%{transform:translate(5px,-2px);}60%{transform:translate(-4px,2px);}80%{transform:translate(3px,-1px);}}
.walkout-rays{position:absolute; inset:-50%; pointer-events:none; opacity:0.55; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(91,44,138,0.55) 10deg, transparent 24deg, transparent 160deg, rgba(91,44,138,0.55) 174deg, transparent 188deg, transparent 336deg, rgba(91,44,138,0.55) 350deg, transparent 360deg);
  animation:packRaysSpin 6s linear infinite;
}
.walkout-stage.super .walkout-rays{background:conic-gradient(from 0deg, transparent 0deg, rgba(184,134,46,0.6) 10deg, transparent 24deg, transparent 160deg, rgba(184,134,46,0.6) 174deg, transparent 188deg, transparent 336deg, rgba(184,134,46,0.6) 350deg, transparent 360deg);}
.walkout-floor{position:absolute; left:0; right:0; bottom:0; height:45%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(91,44,138,0.22));
}
.walkout-stage.super .walkout-floor{background:linear-gradient(180deg, transparent, rgba(184,134,46,0.25));}
.walkout-beam{position:absolute; top:-15%; bottom:-15%; width:26px; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.5), transparent); opacity:0; pointer-events:none; mix-blend-mode:screen;}
.walkout-beam.go{animation:walkoutBeamSweep 1.4s ease-out forwards;}
@keyframes walkoutBeamSweep{0%{opacity:0; width:8px;}25%{opacity:0.9;}100%{opacity:0; width:100px;}}
.walkout-eyebrow{font-family:var(--font-d); font-weight:900; letter-spacing:3px; font-size:11px; color:rgba(255,255,255,0.55); opacity:0; animation:walkoutFadeIn .4s ease .1s forwards;}
@keyframes walkoutFadeIn{to{opacity:1;}}
.walkout-title{
  font-family:var(--font-d); font-weight:900; font-size:28px; letter-spacing:2px; color:#fff; margin-top:2px;
  text-shadow:0 0 18px rgba(91,44,138,0.95), 0 0 42px rgba(91,44,138,0.55); opacity:0;
  animation:walkoutTitleIn .65s cubic-bezier(.2,1.7,.3,1) .12s forwards;
}
.walkout-stage.super .walkout-title{color:#fff6d9; text-shadow:0 0 22px rgba(184,134,46,1), 0 0 50px rgba(184,134,46,0.65);}
@keyframes walkoutTitleIn{0%{opacity:0; transform:scale(0.35) translateY(18px);}55%{opacity:1; transform:scale(1.18) translateY(0);}100%{opacity:1; transform:scale(1) translateY(0);}}
.walkout-card-wrap{position:relative; width:150px; opacity:0; transform:scale(0.4) rotateY(90deg); transition:opacity .5s ease, transform .5s cubic-bezier(.2,1.6,.4,1); filter:drop-shadow(0 0 26px rgba(91,44,138,0.6));}
.walkout-card-wrap.show{opacity:1; transform:scale(1.28) rotateY(0deg);}
.walkout-stage.super .walkout-card-wrap{filter:drop-shadow(0 0 32px rgba(184,134,46,0.75));}
.walkout-stage.super .walkout-card-wrap.show{transform:scale(1.38) rotateY(0deg);}
.walkout-tag{margin-top:20px; font-family:var(--font-d); font-weight:900; letter-spacing:1.5px; font-size:15px; color:var(--gold-ink); text-shadow:0 1px 0 rgba(255,255,255,0.3);}
.walkout-stage.super .walkout-tag{font-size:16px; color:#fff6d9;}
.camera-flash-field{position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden;}
.camera-flash-pop{position:absolute; width:5px; height:5px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px 4px rgba(255,255,255,0.95), 0 0 22px 10px rgba(255,255,255,0.4);
  animation:camFlashPop .26s ease-out forwards;}
@keyframes camFlashPop{0%{opacity:0; transform:scale(0.3);}25%{opacity:1; transform:scale(1.3);}100%{opacity:0; transform:scale(0.6);}}

/* ---------- multi-select quick sell ---------- */
.select-bar{
  position:sticky; bottom:70px; z-index:12; margin:10px -2px 0; padding:11px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(30,20,45,0.97), rgba(20,14,32,0.97)); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.select-card-wrap{position:relative;}
.select-check{
  position:absolute; top:6px; left:6px; z-index:6; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.55); background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#fff; pointer-events:none;
}
.select-card-wrap.picked .select-check{background:var(--accent); border-color:var(--accent);}
.select-card-wrap.picked .pcard{outline:3px solid var(--accent); outline-offset:2px;}
.select-card-wrap.unselectable .pcard{opacity:0.4; filter:grayscale(0.4);}
.select-card-wrap.unselectable .select-check{display:none;}


/* ---------- Pitch visuals ---------- */
.pitch-wrap{
  background:
    linear-gradient(180deg, var(--pitch-2) 0%, var(--pitch) 100%);
  border-radius:16px; padding:14px 10px; position:relative; overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.35);
}
.pitch-wrap::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 40px, transparent 40px 80px);
}
.pitch-lines{position:absolute; inset:8px; border:2px solid rgba(255,255,255,0.25); border-radius:8px; pointer-events:none;}
.pitch-lines::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.25); transform:translateX(-50%);}
.pitch-lines::after{content:""; position:absolute; left:50%; top:50%; width:70px; height:70px; border:2px solid rgba(255,255,255,0.25); border-radius:50%; transform:translate(-50%,-50%);}
.pitch-rows{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px;}
.pitch-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.pitch-wrap-cards{padding:16px 8px;}
.pitch-wrap-cards .pitch-rows{gap:14px;}
.pitch-card{
  width:98px; height:131px; overflow:hidden; position:relative; cursor:pointer;
  border-radius:12px; box-shadow:0 6px 14px rgba(0,0,0,0.35);
}
.pitch-card > div{ width:150px; position:absolute; top:0; left:0; transform:scale(0.653); transform-origin:top left; }
.pitch-wrap-cards-sm{padding:14px 10px;}
.cardgrid-sm{position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:7px;}
.pitch-card-sm{width:66px; height:88px; overflow:hidden; position:relative; border-radius:9px; box-shadow:0 4px 10px rgba(0,0,0,0.35);}
.pitch-card-sm > div{ width:150px; position:absolute; top:0; left:0; transform:scale(0.44); transform-origin:top left; }
.pitch-card-modal{width:84px; height:112px; overflow:hidden; position:relative; cursor:default; border-radius:11px; box-shadow:0 5px 12px rgba(0,0,0,0.35);}
.pitch-card-modal > div{ width:150px; position:absolute; top:0; left:0; transform:scale(0.56); transform-origin:top left; }
.roster-list{display:flex; flex-direction:column; gap:6px;}
.roster-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--panel-2); font-size:12.5px;}
.roster-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.roster-dot.rar-grey{background:#9aa0ab;}
.roster-dot.rar-green{background:#18a851;}
.roster-dot.rar-blue{background:#2f79cf;}
.roster-dot.rar-purple{background:#7C4FA8;}
.roster-dot.rar-gold{background:#B8862E;}
.roster-dot.rar-goat{background:#B8862E; box-shadow:0 0 6px #B8862E;}
.roster-pos{font-family:var(--font-d); font-weight:800; font-size:10px; color:var(--ink-dim); width:26px; flex-shrink:0;}
.roster-name{flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.roster-rating{font-weight:900; flex-shrink:0;}
.mini-card{
  width:78px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
}
.mini-card .chip{
  width:56px; height:56px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:900; box-shadow:0 4px 10px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2);
  transition:transform .1s ease;
}
.mini-card:active .chip{transform:scale(0.9);}
.mini-card .chip .r{font-size:17px; line-height:1;}
.mini-card .chip .p{font-size:8px; opacity:0.8;}
.mini-card .nm{font-size:9px; font-weight:800; text-align:center; text-transform:uppercase; line-height:1.1; color:var(--ink);}

/* ---------- Compact card-info row (list view alternative to full cards) ---------- */
.prow{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; margin-bottom:7px; box-shadow:0 4px 10px rgba(0,0,0,0.18); cursor:pointer; transition:transform .1s ease;}
.prow:active{transform:scale(0.98);}
.prow-rating{font-family:var(--font-d); font-weight:900; font-size:19px; line-height:1; flex-shrink:0; min-width:32px; text-align:center;}
.prow-rating .prow-max{display:block; font-size:9px; font-weight:700; opacity:.65; margin-top:2px;}
.prow-main{flex:1; min-width:0;}
.prow-name{font-weight:800; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prow-sub{font-size:10.5px; opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prow-pos{flex-shrink:0; font-size:9.5px; font-weight:900; letter-spacing:.4px; padding:4px 9px; border-radius:999px; background:rgba(0,0,0,0.14);}
.prow.locked{opacity:.55; cursor:default;}
.prow.team-active-row{outline:2px solid rgba(142,242,168,.7); outline-offset:2px;}
.prow-active-tag{flex-shrink:0; font-size:8px; font-weight:1000; letter-spacing:.4px; background:rgba(142,242,168,.94); color:#10251a; border-radius:7px; padding:4px 6px;}
.prow-list{display:flex; flex-direction:column;}
.prow-check{flex-shrink:0; width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,0.35); background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;}
.prow-picked{outline:3px solid var(--accent); outline-offset:1px;}
.prow-picked .prow-check{background:var(--accent); border-color:var(--accent); color:#fff;}
.prow-unselectable{opacity:0.4; filter:grayscale(0.4); cursor:default;}
.prow-unselectable:active{transform:none;}

/* ---------- Progress bars ---------- */
.pbar{height:8px; border-radius:6px; background:#ece0f7; overflow:hidden; border:1px solid var(--line); box-shadow:inset 0 1px 3px rgba(80,40,120,0.12);}
.pbar > div{height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:width .5s ease;}
.pbar.gold > div{background:linear-gradient(90deg, var(--gold), var(--gold-2));}

/* ---------- Stats grid ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-box{background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0)), var(--panel-2); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}

/* quick-action tiles (Home screen) */
.quick-tile{
  background:linear-gradient(165deg, rgba(255,255,255,0.7), rgba(255,255,255,0)), var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:16px 12px;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  box-shadow:0 8px 20px rgba(90,50,140,0.1); cursor:pointer; transition:transform .08s ease;
}
.quick-tile:active{transform:scale(0.96);}
.qt-icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:23px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 14px rgba(0,0,0,0.12);}
.qt-label{font-family:var(--font-d); font-weight:900; letter-spacing:1px; font-size:12.5px; color:var(--ink);}

/* pack tiles */
.pack-tile-icon{display:flex; justify-content:center; margin:8px 0;}
.pack-stats-row{display:flex; justify-content:center; gap:18px; margin:10px 0 4px;}
.pack-stat{text-align:center;}
.pack-stat .ps-v{font-family:var(--font-d); font-weight:900; font-size:17px;}
.pack-stat .ps-l{font-size:8.5px; letter-spacing:0.8px; color:var(--ink-dim); font-weight:800;}
.pack-tone-bronze{box-shadow:0 8px 24px rgba(138,109,75,0.18); border-color:rgba(138,109,75,0.4)!important;}
.pack-tone-silver{box-shadow:0 8px 24px rgba(150,160,170,0.18); border-color:rgba(150,160,170,0.4)!important;}
.pack-tone-gold{box-shadow:0 8px 24px rgba(184,134,46,0.22); border-color:rgba(184,134,46,0.45)!important;}
.pack-tone-premium{box-shadow:0 10px 28px rgba(91,44,138,0.24); border-color:rgba(91,44,138,0.5)!important;}
.pack-tone-elite{
  box-shadow:0 12px 32px rgba(184,134,46,0.3), 0 0 0 1px rgba(184,134,46,0.3) inset;
  border-color:rgba(184,134,46,0.6)!important;
  background:linear-gradient(165deg, rgba(255,248,223,0.5), rgba(255,255,255,0)), var(--panel)!important;
}
.win-pips{display:flex; gap:5px;}
.win-pips .pip{width:18px; height:7px; border-radius:4px; background:var(--line);}
.win-pips .pip.filled{background:linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow:0 0 6px rgba(91,44,138,0.4);}
.league-table{display:flex; flex-direction:column; gap:4px;}
.next-match-card{display:flex; align-items:center; justify-content:space-between; gap:8px; background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0)), var(--panel-2); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 10px;}
.next-match-card.nm-emph{border-color:rgba(111,63,158,0.35); box-shadow:0 0 0 1px rgba(111,63,158,0.08) inset, 0 6px 20px rgba(59,26,99,0.12);}
.stakes-line{margin-top:10px; text-align:center; font-family:var(--font-d); font-weight:800; font-size:11.5px; letter-spacing:0.3px; color:var(--gold-ink); background:rgba(184,134,46,0.14); border:1px solid rgba(184,134,46,0.3); border-radius:10px; padding:7px 10px;}
.nm-side{flex:1; min-width:0; text-align:center;}
.nm-side .nm-name{font-family:var(--font-d); font-weight:800; font-size:12.5px; letter-spacing:0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px;}
.nm-side .nm-rating{font-family:var(--font-d); font-weight:900; font-size:26px; margin-top:4px; color:var(--accent); font-variant-numeric:tabular-nums;}
.nm-vs{font-family:var(--font-d); font-weight:900; font-size:12px; color:var(--ink-dim); flex-shrink:0; padding:0 6px;}
.lt-row{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; background:var(--panel-2); border-left:3px solid transparent; font-size:12px; flex-wrap:wrap;}
.lt-row.lt-up{border-left-color:var(--accent);}
.lt-row.lt-down{border-left-color:var(--danger);}
.lt-row.lt-you{background:linear-gradient(90deg, rgba(91,44,138,0.14), transparent); font-weight:900;}
.lt-pos{width:16px; text-align:center; font-weight:900; color:var(--ink-dim);}
.lt-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.lt-rec{font-weight:800; color:var(--ink-dim);}
.lt-zone{font-family:var(--font-d); font-weight:800; font-size:9px; letter-spacing:0.4px; padding:3px 7px; border-radius:999px; flex-shrink:0; white-space:nowrap;}
.lt-zone.zone-up{background:rgba(91,44,138,0.16); color:var(--accent);}
.lt-zone.zone-down{background:rgba(173,50,38,0.14); color:var(--danger);}
.div-ladder{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.div-ladder-row{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--panel-2); border:1px solid rgba(255,255,255,0.06); opacity:0.55;}
.div-ladder-row.current{opacity:1; background:linear-gradient(90deg, rgba(91,44,138,0.18), rgba(184,134,46,0.08)); border-color:rgba(91,44,138,0.4);}
.dl-num{font-family:var(--font-d); font-weight:900; font-size:13px; width:18px; text-align:center; color:var(--ink-dim);}
.div-ladder-row.current .dl-num{color:var(--accent);}
.dl-name{font-family:var(--font-d); font-weight:800; font-size:12px; letter-spacing:0.5px; flex:1;}
.dl-you{font-family:var(--font-d); font-weight:900; font-size:9.5px; letter-spacing:0.5px; color:var(--gold-ink); flex-shrink:0;}
.squad-strip{display:flex; gap:6px;}
.squad-strip .sw{width:24px; height:24px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);}
.stat-box .v{font-family:var(--font-d); font-weight:900; font-size:22px; text-shadow:0 1px 0 rgba(255,255,255,0.6); font-variant-numeric:tabular-nums;}
.stat-box .l{font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.5px;}

/* ---------- Match / challenge screen ---------- */
/* ---------- Match scene ---------- */
/* Match/penalty screens use this modifier on their outer .screen wrapper to
   turn the whole thing into a real, dynamic-viewport-height flex column, so
   .match-frame -> .match-scene can flex to fill every last pixel down to the
   true bottom of the device's screen. The old fixed 68vh/660px cap left a
   visible gap of plain page background below the pitch on plenty of real
   phones - vh doesn't account for mobile browser chrome the way dvh does,
   and a hard max-height doesn't know how tall any given screen actually is. */
.match-screen{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  overflow-y:auto;
}
.match-frame{
  margin:0 -16px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(111,63,158,0.12);
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
}
.scoreboard{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,#211934,#1b1424);
  padding:11px 18px; border-bottom:2px solid rgba(111,63,158,0.35);
  flex:0 0 auto;
}
.scoreboard .sb-chance{font-family:var(--font-d); font-weight:900; letter-spacing:1.5px; font-size:12px; color:#cabde3; display:flex; align-items:center; gap:7px;}
.scoreboard .sb-chance .livedot{width:7px; height:7px; border-radius:50%; background:var(--danger); box-shadow:0 0 8px rgba(173,50,38,0.85); animation:livepulse 1.3s ease infinite;}
.scoreboard .sb-score{font-family:var(--font-d); font-weight:900; font-size:19px; color:var(--gold); letter-spacing:1px; text-shadow:0 0 14px rgba(184,134,46,0.4); font-variant-numeric:tabular-nums;}
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
.match-scene{
  position:relative; overflow:hidden;
  flex:1 1 auto; min-height:0;
}
#matchCanvas{width:100%; height:100%; display:block; touch-action:none;}
/* 3D layer sits behind the existing 2D canvas. The 2D canvas becomes the
   HUD overlay (text, bars, grid) when 3D is active for a chance - it's
   given a transparent background so the WebGL scene shows through - and
   reverts to being the whole picture, as before, for every other chance
   type. This is why the 2D canvas keeps drawing its UI exactly as it
   always has: only the pitch/players/ball move to the 3D layer underneath. */
#matchCanvas3D{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; z-index:0;}
#matchCanvas{position:relative; z-index:1;}
.match-scene.mode-3d #matchCanvas{background:transparent;}
/* A soft darkening toward the edges of the 3D scene. Every broadcast picture
   has one, and it pulls the eye to the middle of the frame where the goal and
   the ball are. Done in CSS rather than on the canvas so it costs nothing per
   frame - the compositor draws it once and leaves it there. */
.match-scene.mode-3d::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 82% 62% at 50% 40%, rgba(0,0,0,0) 55%, rgba(4,10,16,0.34) 100%);
}
.tackle-lane-controls{position:absolute;left:10px;right:10px;bottom:66px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:8;pointer-events:auto;}
.tackle-lane-controls button{min-height:46px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(12,9,20,.84);color:#fff;font-family:var(--font-d);font-weight:900;font-size:11px;letter-spacing:.8px;box-shadow:0 5px 14px rgba(0,0,0,.25);touch-action:manipulation;}
.tackle-lane-controls button.selected{border-color:var(--gold);background:rgba(184,134,46,.18);color:var(--gold);}
.tackle-lane-controls button.pressed{transform:scale(.96);}

.chance-banner{
  position:absolute; top:10px; left:12px; right:12px; text-align:center; z-index:5; pointer-events:none;
  padding:6px 10px;
  background:rgba(10,8,16,.58);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.chance-banner .cb0{font-family:var(--font-d); font-weight:900; letter-spacing:1.2px; font-size:12px; color:var(--accent); -webkit-text-stroke:2.5px rgba(0,0,0,0.6); paint-order:stroke fill; text-shadow:0 2px 6px rgba(0,0,0,0.7); margin-bottom:2px;}
.chance-banner .cb1{font-family:var(--font-d); font-weight:900; letter-spacing:1.5px; font-size:11px; color:var(--gold); -webkit-text-stroke:2.5px rgba(0,0,0,0.65); paint-order:stroke fill; text-shadow:0 2px 6px rgba(0,0,0,0.7);}
.chance-banner .cb2{display:none; font-family:var(--font-d); font-weight:800; font-size:18px; color:#fff; -webkit-text-stroke:3px rgba(0,0,0,0.65); paint-order:stroke fill; text-shadow:0 2px 8px rgba(0,0,0,0.8); margin-top:2px;}
.power-meter{position:absolute; left:14px; bottom:14px; top:14px; width:14px; background:rgba(0,0,0,0.35); border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.2); z-index:5;}
/* "How to play" example animations shown on the pre-chance popup - a tiny
   looping demo of the actual gesture (tap / two-step tap / swipe / drag) so
   what to do is something you see, not just read. */
.howto-demo{display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0 6px; height:56px;}
.howto-tap{position:relative; width:50px; height:50px;}
.howto-ring{position:absolute; inset:0; border:3px solid var(--accent); border-radius:50%; opacity:0; animation:howtoring 1.4s ease-out infinite;}
@keyframes howtoring{0%{transform:scale(0.3); opacity:0.9;} 100%{transform:scale(1); opacity:0;}}
.howto-dot{position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:var(--accent); border-radius:50%; box-shadow:0 0 8px rgba(111,63,158,0.7);}
.howto-step{position:absolute; bottom:-17px; left:0; right:0; text-align:center; font-family:var(--font-d); font-weight:900; font-size:10px; color:var(--ink-dim);}
.howto-arrow{font-size:18px; color:var(--ink-dim);}
.howto-swipe{position:relative; width:110px; height:34px; overflow:hidden;}
.howto-swipe-arrow{position:absolute; top:4px; font-size:24px; color:var(--accent); animation:howtoswipe 1.3s ease-in-out infinite;}
@keyframes howtoswipe{0%{left:0; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:78px; opacity:0;}}
.howto-drag{position:relative; width:110px; height:34px;}
.howto-drag-hand{position:absolute; top:2px; font-size:24px; animation:howtodrag 1.6s ease-in-out infinite;}
@keyframes howtodrag{0%,100%{left:0;} 50%{left:78px;}}
.power-meter .fill{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, var(--accent-2), var(--gold)); transition:height .02s linear;}
.instruct{position:absolute; bottom:52px; left:10px; right:10px; text-align:center; z-index:5; font-size:12.5px; line-height:1.25; color:#fff; font-weight:850; background:rgba(10,8,16,.72); border:1px solid rgba(255,255,255,.14); border-radius:11px; box-shadow:0 6px 18px rgba(0,0,0,.28); padding:8px 12px; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);}

/* ---------- Objective pill + hit feedback ---------- */
.objective-pill{
  position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:6px 14px; border-radius:999px; pointer-events:none;
  background:rgba(10,8,16,.72); border:1px solid rgba(224,178,86,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:objIn .3s ease both;
}
.objective-pill .obj-label{font-size:9px; letter-spacing:1.6px; font-weight:900; color:var(--gold, #e0b256); opacity:.85;}
.objective-pill .obj-text{font-family:var(--font-d); font-size:15px; font-weight:900; letter-spacing:.6px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8);}
@keyframes objIn{from{opacity:0; transform:translateX(-50%) translateY(-6px);} to{opacity:1; transform:translateX(-50%) translateY(0);}}

/* A short punch of colour and movement on the moments that matter. Purely
   presentational - it never changes what the chance scored. */
.match-scene.fx-goal{animation:fxGoal .55s ease-out;}
.match-scene.fx-concede{animation:fxConcede .5s ease-out;}
.match-scene.fx-save{animation:fxSave .45s ease-out;}
@keyframes fxGoal{
  0%{filter:brightness(1.5) saturate(1.3); transform:scale(1.012) translate(0,0);}
  25%{transform:scale(1.012) translate(-4px,2px);}
  50%{transform:scale(1.008) translate(4px,-2px);}
  75%{transform:scale(1.004) translate(-2px,0);}
  100%{filter:none; transform:none;}
}
@keyframes fxConcede{
  0%{filter:brightness(.72) saturate(.5);}
  30%{transform:translate(3px,0);}
  60%{transform:translate(-3px,0);}
  100%{filter:none; transform:none;}
}
@keyframes fxSave{
  0%{filter:brightness(1.35) contrast(1.1);}
  100%{filter:none;}
}
@media (prefers-reduced-motion: reduce){
  .match-scene.fx-goal,.match-scene.fx-concede,.match-scene.fx-save{animation:none;}
  .objective-pill{animation:none;}
}

/* ---------- Result flash ---------- */
.chance-toast{
  position:fixed; top:16%; left:50%; z-index:300;
  background:rgba(20,14,28,0.95); border:1px solid rgba(111,63,158,0.4); border-radius:16px;
  padding:14px 24px; text-align:center; max-width:82%;
  box-shadow:0 14px 32px rgba(0,0,0,0.4); color:#fff;
  animation:toastpop 1s ease forwards;
}
.chance-toast h2{font-size:26px; margin:2px 0; letter-spacing:0.5px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.chance-toast .sub{margin-top:4px; font-size:13px; color:var(--gold); font-weight:800;}
.chance-toast .coins-anim{margin-top:3px; font-size:12px; color:#D9D3C4;}
/* A single, unmistakable "you just earned coins" badge - reused everywhere
   coins are awarded (per-chance toast, goal/concede toast, post-match
   summary) so the moment always reads the same way and is never easy to miss. */
.coin-pop{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  background:linear-gradient(135deg, rgba(184,134,46,0.28), rgba(184,134,46,0.10));
  border:1.5px solid rgba(184,134,46,0.65); border-radius:999px;
  padding:7px 16px; font-weight:900; font-size:16px; color:var(--gold);
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
  box-shadow:0 0 18px rgba(184,134,46,0.28);
  animation:coinPop .55s cubic-bezier(.2,1.8,.4,1) both;
}
.coin-pop .coin-pop-ico{display:inline-flex; filter:drop-shadow(0 0 4px rgba(184,134,46,0.6));}
@keyframes coinPop{
  0%{opacity:0; transform:scale(0.4) translateY(6px);}
  55%{opacity:1; transform:scale(1.18) translateY(0);}
  80%{transform:scale(0.96);}
  100%{transform:scale(1);}
}
@keyframes toastpop{
  0%{opacity:0; transform:translate(-50%,-8px) scale(0.9);}
  14%{opacity:1; transform:translate(-50%,0) scale(1);}
  78%{opacity:1; transform:translate(-50%,0) scale(1);}
  100%{opacity:0; transform:translate(-50%,-6px) scale(0.96);}
}
.goal-toast{
  /* Sits below the goal rather than on top of it: the ball hitting the net is
     the moment worth watching, and the card was landing squarely over it. */
  position:fixed; top:40%; left:50%; transform:translateX(-50%); z-index:310; text-align:center;
  background:linear-gradient(165deg, rgba(50,20,70,0.97), rgba(20,10,30,0.97));
  border:1px solid rgba(184,134,46,0.55); border-radius:20px; padding:18px 24px;
  max-width:min(320px, 88vw); width:max-content;
  box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 40px rgba(184,134,46,0.25); color:#fff;
  animation:goalpop 1.15s cubic-bezier(.2,1.6,.4,1) forwards;
}
.goal-toast .goal-scorer{overflow-wrap:break-word; word-break:break-word;}
.goal-toast .goal-emoji{font-size:34px;}
.goal-toast h2{font-size:30px; margin:2px 0; color:var(--gold); text-shadow:0 2px 10px rgba(0,0,0,0.5); letter-spacing:1px;}
.goal-toast .goal-scorer{font-weight:900; font-size:15px; letter-spacing:0.5px;}
.goal-toast .goal-score{margin-top:5px; font-size:13px; color:#D9D3C4; font-weight:700;}
.goal-toast.concede{
  border-color:rgba(173,50,38,0.6);
  box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 40px rgba(173,50,38,0.3);
  animation:concedeShake 1.15s cubic-bezier(.2,1.4,.4,1) forwards;
}
.goal-toast.concede h2{color:var(--danger);}
@keyframes concedeShake{
  0%{opacity:0; transform:translateX(-50%) scale(0.6);}
  16%{opacity:1; transform:translateX(-50%) scale(1.05);}
  24%{transform:translate(calc(-50% - 6px),0) scale(1);}
  30%{transform:translate(calc(-50% + 6px),0) scale(1);}
  36%{transform:translateX(-50%) scale(1);}
  82%{opacity:1; transform:translateX(-50%) scale(1);}
  100%{opacity:0; transform:translateX(-50%) scale(0.95);}
}
@keyframes goalpop{
  0%{opacity:0; transform:translateX(-50%) scale(0.6) rotate(-4deg);}
  18%{opacity:1; transform:translateX(-50%) scale(1.08) rotate(1deg);}
  30%{transform:translateX(-50%) scale(1) rotate(0);}
  82%{opacity:1; transform:translateX(-50%) scale(1);}
  100%{opacity:0; transform:translateX(-50%) scale(0.95);}
}
.achieve-toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:320;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(165deg, rgba(40,18,60,0.97), rgba(20,10,30,0.97));
  border:1px solid rgba(184,134,46,0.5); border-radius:14px; padding:10px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,0.4); color:#fff; max-width:88%;
  animation:achievein 1.6s ease forwards;
}
.achieve-toast .at-icon{font-size:22px;}
.achieve-toast .at-sub{font-size:9.5px; letter-spacing:1.5px; color:var(--gold); font-weight:800;}
.achieve-toast .at-title{font-size:13px; font-weight:900;}
@keyframes achievein{
  0%{opacity:0; transform:translateX(-50%) translateY(-14px);}
  10%{opacity:1; transform:translateX(-50%) translateY(0);}
  88%{opacity:1; transform:translateX(-50%) translateY(0);}
  100%{opacity:0; transform:translateX(-50%) translateY(-10px);}
}

/* ---------- Bracket ---------- */
.bracket-round{margin-bottom:16px;}
.bracket-round .rname{font-family:var(--font-d); font-weight:800; font-size:12px; letter-spacing:1px; color:var(--ink-dim); margin-bottom:6px; text-transform:uppercase;}
.match-line{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; margin-bottom:6px;
  background:var(--panel-2); border:1px solid #251c33; font-size:12.5px; font-weight:700;
}
.match-line.you{border-color:var(--accent); box-shadow:0 0 0 1px rgba(111,63,158,0.3) inset;}
.match-line .res{font-family:var(--font-d); font-weight:900; font-size:11px; padding:3px 8px; border-radius:6px;}
.res-win{background:rgba(111,63,158,0.18); color:var(--accent);}
.res-lose{background:rgba(173,50,38,0.18); color:var(--danger);}
.res-locked{color:var(--ink-dim); opacity:0.6;}

/* filter chips */
.chipbar{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px;}
.chip{flex:0 0 auto; padding:8px 13px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-dim); white-space:nowrap;}
.chip.active{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#F5F0FA; border-color:transparent;}

/* warning banner */
.warn{background:rgba(173,50,38,0.1); border:1px solid rgba(173,50,38,0.35); color:#a5241a; padding:9px 12px; border-radius:10px; font-size:12px; font-weight:700; margin-bottom:10px;}

.center-txt{text-align:center;}
.tiny{font-size:11px; color:var(--ink-dim);}
.flexbetween{display:flex; align-items:center; justify-content:space-between;}

/* ---------- Docked primary action ----------
   Keeps a screen's one key action (start match, continue, go to next fixture)
   reachable without scrolling: it stays pinned just above the bottom nav as the
   panels above it scroll past, instead of sitting at the very end of the content. */
.cta-dock{
  position:sticky; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:35;
  margin-top:14px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,0.22));
}

/* ---------- Auth screen ---------- */
.auth-field{width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-size:16px; margin-bottom:10px; font-family:var(--font-b);}
/* 16px is deliberate: iOS Safari force-zooms the page when focusing any field
   smaller than that, which shoves the layout sideways mid-typing. */
.auth-field:focus{outline:2px solid var(--accent); outline-offset:1px;}
/* Social/leaderboard layout: the name may shrink, but the share/friend actions never do. */
.lb-row{display:flex;align-items:center;gap:8px;min-width:0;width:100%;}
.lb-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.lb-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-share{flex:0 0 20px;text-align:center;font-size:13px;}
.lb-score{flex:0 0 auto;text-align:right;margin-left:4px;}

/* ---------- Leaderboard v2 ---------- */
.lb-header-panel{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.lb-countdown{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:0.4px; color:var(--gold-ink); background:rgba(184,134,46,0.12); border:1px solid rgba(184,134,46,0.3); padding:6px 10px; border-radius:999px;}
.lb-countdown-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(184,134,46,0.8); animation:livepulse 1.6s ease infinite;}
.lb-rank-panel{background:linear-gradient(160deg, rgba(91,44,138,0.14), rgba(184,134,46,0.06)); border:1px solid rgba(91,44,138,0.22);}
.lb-list{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.lb-row-v2{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:12px; cursor:pointer; background:var(--panel-2); border:1px solid transparent; transition:background .15s ease;}
.lb-row-v2:active{background:rgba(91,44,138,0.10);}
.lb-row-v2.lb-row-top3{background:linear-gradient(90deg, rgba(184,134,46,0.10), rgba(184,134,46,0.02)); border-color:rgba(184,134,46,0.18);}
.lb-row-v2.lb-row-me{background:rgba(91,44,138,0.14); border-color:rgba(91,44,138,0.4);}
.lb-rank-badge{flex:0 0 26px; text-align:center; font-family:var(--font-d); font-weight:900; font-size:15px; color:var(--ink-dim);}
.lb-row-top3 .lb-rank-badge{font-size:19px;}
.lb-avatar{flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-weight:900; font-size:14px; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 5px rgba(0,0,0,0.2);}
.lb-identity{flex:1; min-width:0;}
.lb-name-row{display:flex; align-items:center; gap:6px; min-width:0;}
.lb-name-row .lb-name{font-weight:800; flex:0 1 auto;}
.lb-you-tag{flex:0 0 auto; font-family:var(--font-d); font-weight:900; font-size:9px; letter-spacing:0.6px; color:var(--gold-ink); background:rgba(184,134,46,0.18); padding:2px 6px; border-radius:6px;}
.lb-share-icon{flex:0 0 auto; font-size:12px; opacity:0.8;}
.lb-row-v2 .lb-score{text-align:right; flex:0 0 auto;}
.lb-score-main{font-family:var(--font-d); font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:flex-end; gap:3px; white-space:nowrap;}
.lb-score-unit{font-size:10px; font-weight:700; opacity:0.7;}
.lb-score-sub{font-size:10px; opacity:0.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px;}
.friend-bubble{max-width:78%;padding:9px 11px;border-radius:14px;margin:5px 0;font-size:13px;line-height:1.35;word-break:break-word;}
.friend-bubble.me{margin-left:auto;background:var(--accent);color:#fff;border-bottom-right-radius:4px;}
.friend-bubble.them{margin-right:auto;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px;}
.friend-chat{display:flex;flex-direction:column;gap:2px;min-height:160px;max-height:48vh;overflow-y:auto;padding:4px 2px;}
.friend-meta{font-size:9px;color:var(--ink-dim);margin-top:2px;}
.transaction-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.transaction-row:last-child{border-bottom:0;}
.transaction-credit{color:#168a45;font-weight:900;white-space:nowrap;}
.transaction-debit{color:var(--danger);font-weight:900;white-space:nowrap;}
.postmatch-coin-flyer{position:fixed;z-index:500;left:50%;top:44%;transform:translate(-50%,-50%) scale(.72);display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:rgba(28,19,40,.96);border:1px solid rgba(184,134,46,.7);box-shadow:0 14px 38px rgba(0,0,0,.35),0 0 24px rgba(184,134,46,.25);color:var(--gold);font-family:var(--font-d);font-weight:900;font-size:25px;pointer-events:none;opacity:0;}
.postmatch-coin-flyer.spend{border-color:rgba(173,50,38,.7);box-shadow:0 14px 38px rgba(0,0,0,.35),0 0 24px rgba(173,50,38,.25);color:#ff9a90;}
.postmatch-coin-flyer.intro{animation:postCoinIntro .55s cubic-bezier(.2,1.7,.35,1) forwards;}
.postmatch-coin-flyer.fly{animation:postCoinFly .75s cubic-bezier(.55,.05,.2,1) forwards;}
@keyframes postCoinIntro{0%{opacity:0;transform:translate(-50%,-35%) scale(.45)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes postCoinFly{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.15;transform:translate(calc(50vw - 52px),calc(-50vh + 42px)) scale(.35)}}

/* On-screen keypad - text entry using taps only */
.kp-wrap{text-align:center;}
.kp-display{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; min-height:44px; font-size:17px; font-weight:800; letter-spacing:1px; word-break:break-all;}
.kp-row{display:flex; gap:4px; justify-content:center; margin-bottom:4px;}
.kp-key{flex:1; min-width:0; padding:11px 2px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-family:var(--font-d); font-weight:800; font-size:14px; cursor:pointer;}
.kp-key:active{background:var(--accent); color:#fff;}
.kp-key.kp-wide{flex:2; font-size:11px; letter-spacing:0.5px;}
.kp-key.active{background:var(--accent); color:#fff;}
.kp-echo{font-family:var(--font-d); font-weight:800; letter-spacing:1px; color:var(--ink); min-height:16px; margin:-4px 0 8px; text-align:left;}
.auth-error{color:var(--danger); font-size:12.5px; font-weight:700; margin:-2px 0 10px; min-height:16px;}
.save-toast{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:320; display:flex; align-items:center; gap:8px;
  background:rgba(20,14,28,0.94); color:#fff; border-radius:999px; padding:9px 16px;
  font-family:var(--font-d); font-weight:800; font-size:12.5px; letter-spacing:0.3px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); animation:fadein .15s ease;
  max-width:88vw; text-align:left;
}
.save-toast-spin{display:inline-flex; animation:spin 1s linear infinite;}
.save-toast-ok{display:inline-flex; color:#8ef2a8;}
.save-toast-fail{display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; border-radius:50%; background:var(--danger); font-size:12px;}
@keyframes spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.version-log-bar-track{width:100%; height:4px; border-radius:2px; background:var(--panel-2); overflow:hidden;}
.version-log-bar-fill{height:100%; width:100%; background:var(--accent); border-radius:2px; transform-origin:left; animation:versionLogShrink 5s linear forwards;}
@keyframes versionLogShrink{ from{transform:scaleX(1);} to{transform:scaleX(0);} }
.auth-switch{margin-top:16px; font-size:13px; color:var(--ink-dim);}
.auth-switch a{color:var(--accent); font-weight:800; cursor:pointer; text-decoration:underline;}
.account-row{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-dim); padding:0 2px 10px;}
/* ============================================================
   MATCH PLAYER SELECTION
   ============================================================ */
.chance-selection-modal{max-width:720px;margin:0 auto;}
.chance-selection-rule{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);font-size:12px;}
.chance-selection-rule span:first-child{font-weight:950;color:var(--accent);letter-spacing:1px;}
.chance-selection-rule span:last-child{color:var(--ink-dim);text-align:right;}
.chance-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:min(62vh,620px);overflow-y:auto;padding:2px 2px 4px;}
.chance-player-option{min-width:0;border:1px solid var(--line);border-radius:18px;padding:9px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;}
.chance-player-option:hover{transform:translateY(-2px);border-color:rgba(111,63,158,.55);}
.chance-player-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chance-player-option.selected{border-color:var(--accent);background:linear-gradient(145deg,rgba(111,63,158,.16),rgba(255,255,255,.035));box-shadow:0 0 0 1px rgba(111,63,158,.18),0 10px 28px rgba(0,0,0,.18);}
.chance-player-card-wrap{pointer-events:none;}
.chance-player-card-wrap .pcard{width:100%;}
.chance-player-selectbar{display:flex;align-items:center;gap:8px;padding:9px 3px 2px;}
.chance-player-name{font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chance-select-indicator{flex-shrink:0;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:950;letter-spacing:1px;border:1px solid var(--line);color:var(--ink-dim);}
.chance-player-option.selected .chance-select-indicator{border-color:rgba(111,63,158,.55);background:rgba(111,63,158,.18);color:#fff;}
@media(max-width:520px){.chance-player-grid{grid-template-columns:1fr 1fr;gap:8px;}.chance-player-option{padding:6px;border-radius:14px;}.chance-player-selectbar{padding-top:7px;}.chance-player-name{font-size:12px;}.chance-player-selectbar .tiny{font-size:9px;}.chance-select-indicator{font-size:8px;padding:4px 6px;}.chance-selection-rule{align-items:flex-start;flex-direction:column;}.chance-selection-rule span:last-child{text-align:left;}}



.next-match-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,0.25)!important;background:linear-gradient(165deg,#ffe9a8,var(--gold) 55%,#d99a1f);color:#3d2a05!important;font-weight:900;letter-spacing:.3px;box-shadow:0 8px 22px rgba(184,134,46,0.38), inset 0 1px 0 rgba(255,255,255,0.45);text-shadow:0 1px 0 rgba(255,255,255,0.3);}
.next-match-cta:hover{filter:brightness(1.04);}
.next-match-icon{font-size:18px;line-height:1}.next-match-arrow{margin-left:auto;font-size:18px;opacity:.75}.team-collection-card{position:relative}.team-active-badge{position:absolute;z-index:3;top:7px;left:7px;background:rgba(142,242,168,.94);color:#10251a;border-radius:8px;padding:4px 7px;font-size:8px;font-weight:1000;letter-spacing:.5px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.team-collection-active .pcard{outline:2px solid rgba(142,242,168,.55);outline-offset:2px}

/* v8.7 compact division ladder + pack cards */
.division-mini-wrap{display:flex;gap:4px;overflow-x:auto;padding:6px 2px 9px;scrollbar-width:none;align-items:stretch}
.division-mini-wrap::-webkit-scrollbar{display:none}
.div-mini{flex:1 0 34px;min-width:34px;max-width:58px;position:relative;border:1px solid var(--line);border-radius:8px;padding:5px 3px;text-align:center;background:var(--panel);line-height:1.05}
.div-mini.current{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 1px rgba(184,134,46,.22)}
.div-mini-num{display:block;font-family:var(--font-d);font-size:13px;font-weight:900}.div-mini-name{display:block;font-size:7px;font-weight:800;color:var(--ink-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.div-mini-you{display:block;font-size:6px;font-weight:900;color:var(--gold-ink);margin-top:2px}
.pack-list{display:grid;gap:7px}.pack-row{padding:9px 10px}.pack-row-main{display:flex;align-items:center;gap:8px;min-width:0}.pack-row-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px}.pack-row-copy{min-width:0;flex:1}.pack-row-copy .eyebrow{margin-bottom:2px}.pack-row-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:8px;font-weight:800;color:var(--ink-dim)}.pack-row-meta span{white-space:nowrap}.pack-row-price{font-family:var(--font-d);font-size:13px;font-weight:900;white-space:nowrap}.pack-row>.btn{margin-top:7px;width:100%}
/* Roughly double a normal pack-row's height (that's ~70-75px all in; this
   targets ~150px) since this is a whole separate mode, not just another
   tier in the list - it needs to read as a bigger, different kind of thing. */
.pack-opener-cta{display:flex; align-items:center; gap:12px; padding:22px 16px; margin-bottom:10px; cursor:pointer; min-height:150px; box-sizing:border-box;
  background:linear-gradient(135deg, #123c38, #0a2624); border:1.5px solid #2bb8a3; border-radius:16px; box-shadow:0 10px 26px rgba(43,184,163,0.25);
  transition:transform .1s ease;}
.pack-opener-cta:active{transform:scale(0.98);}
.pack-opener-cta-icon{flex-shrink:0; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:rgba(107,224,204,0.15); border-radius:14px; color:#6be0cc;}
.pack-opener-cta-copy{flex:1; min-width:0; color:#fff;}
.pack-opener-cta-copy h2{color:#fff;}
.pack-opener-cta-copy p{color:rgba(255,255,255,0.75);}
.pack-opener-cta-arrow{flex-shrink:0; font-size:24px; color:#6be0cc; font-weight:900;}
/* Every panel styled with a dark custom background (the Pack Opener header,
   the CTA banner) needs its OWN text colours - .tiny and .btn-ghost both
   default to colours tuned for light panels (--ink-dim is a dark grey-purple,
   .btn-ghost's border a pale lilac), so left alone they were nearly
   unreadable against a dark teal background. This scopes light-friendly
   overrides to just these dark panels rather than touching the site-wide
   defaults everything else still relies on. */
.on-dark-panel, .on-dark-panel h2{color:#fff;}
.on-dark-panel .tiny{color:rgba(255,255,255,0.72);}
.on-dark-panel .btn-ghost{color:#fff; border-color:rgba(255,255,255,0.45);}

/* FIFA-style foil pack art for the Pack Opener tier picker - a sealed,
   portrait pack rather than a plain list row, closer to how real pack-
   opening games present their packs. Scaled down (2-up grid) so all four
   tiers fit comfortably without scrolling on a phone screen. */
.fifa-pack-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.fifa-pack{
  position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; padding:12px 8px;
  box-shadow:0 10px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  border:2px solid rgba(255,255,255,0.28); transition:transform .1s ease;
}
.fifa-pack:active{transform:scale(0.96);}
.fifa-pack::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.07) 0 7px, transparent 7px 18px);
}
.fifa-pack-shine{
  position:absolute; top:-70%; left:-70%; width:55%; height:240%; pointer-events:none;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transform:rotate(20deg);
  animation:fifaPackShine 3.4s ease-in-out infinite;
}
@keyframes fifaPackShine{0%{left:-70%;}50%{left:150%;}100%{left:150%;}}
.fifa-pack.tone-bronze{background:linear-gradient(160deg,#d3a86e,#7a5326);}
.fifa-pack.tone-silver{background:linear-gradient(160deg,#e2e8ed,#8b95a1);}
.fifa-pack.tone-gold{background:linear-gradient(160deg,#ffe9a8,#c9962c);}
.fifa-pack.tone-premium{background:linear-gradient(160deg,#d3b3ff,#6a23c9);}
.fifa-pack-locked{filter:grayscale(0.7); opacity:0.55; cursor:default;}
.fifa-pack-locked .fifa-pack-shine{animation:none; display:none;}
.fifa-pack-count{align-self:flex-end; background:rgba(0,0,0,0.4); color:#fff; font-weight:900; font-size:10px; padding:2px 7px; border-radius:999px; position:relative; z-index:2;}
.fifa-pack-icon{position:relative; z-index:2; display:flex; justify-content:center; color:#fff; margin:2px 0; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));}
.fifa-pack-label{position:relative; z-index:2; text-align:center; font-family:var(--font-d); font-weight:900; font-size:12px; letter-spacing:0.8px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.5);}
.fifa-pack-footer{position:relative; z-index:2; display:flex; flex-direction:column; gap:4px; align-items:center;}
.fifa-pack-price{font-weight:900; font-size:11px; color:#fff; background:rgba(0,0,0,0.4); padding:2px 9px; border-radius:999px;}
.fifa-pack-avg{font-size:7.5px; font-weight:800; color:rgba(255,255,255,0.85); letter-spacing:0.4px; text-align:center;}
@media(min-width:600px){.pack-row{display:flex;align-items:center;gap:10px}.pack-row-main{flex:1}.pack-row>.btn{width:auto;margin-top:0;min-width:108px}}

/* v8.11: keep shooting help clear of the ball/pitch action */
.instruct{position:relative;z-index:5;transform:translateY(8px);}

/* ---------- New Star Soccer live match presentation ---------- */
.rivals-round-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 16px;background:linear-gradient(90deg,rgba(111,63,158,.30),rgba(173,50,38,.22));border-bottom:1px solid rgba(255,255,255,.10);flex:0 0 auto;}
.rivals-round-strip .rrs-round{font-family:var(--font-d);font-weight:900;font-size:11px;letter-spacing:1.4px;color:var(--gold);white-space:nowrap;}
.rivals-round-strip .rrs-mods{font-family:var(--font-d);font-weight:800;font-size:9px;letter-spacing:.9px;color:#e2d8f0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nss-match-screen{background:linear-gradient(180deg,#f7f5fa 0%,#eeebf2 100%);color:#211b29;}
.nss-broadcast{width:100%;max-width:760px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff 0%,#f3f0f6 100%);}
.nss-scorebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 18px 10px;flex:0 0 auto;background:linear-gradient(135deg,#ffffff,#f4eff9);border-bottom:1px solid #ddd3e7;box-shadow:0 2px 10px rgba(54,35,70,.08);}
.nss-club{font-family:var(--font-d);font-weight:900;font-size:11px;letter-spacing:1.1px;color:#30243a;display:flex;align-items:center;gap:7px;min-width:0;}.nss-club span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.nss-away{justify-content:flex-end;text-align:right;color:#6f6378;}.nss-live-dot{width:7px;height:7px;border-radius:50%;background:#e64d4d;box-shadow:0 0 12px rgba(230,77,77,.8);animation:livepulse 1.1s ease infinite;flex:0 0 auto;}
.nss-score{font-family:var(--font-d);font-size:30px;font-weight:950;letter-spacing:3px;color:#5b2c8a;background:#fff;border:1px solid #ded4e8;border-radius:14px;padding:6px 13px;box-shadow:0 3px 10px rgba(54,35,70,.08);font-variant-numeric:tabular-nums;white-space:nowrap;}.nss-score i{font-style:normal;color:rgba(255,255,255,.4);margin:0 7px;}
.nss-clockbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:8px 18px;flex:0 0 auto;background:linear-gradient(180deg,#faf8fc,#f0ebf5);border-bottom:1px solid rgba(255,255,255,.07);}.nss-minute{font-family:var(--font-d);font-weight:950;font-size:24px;color:#5b2c8a;background:#fff;border:1px solid #d9cee4;border-radius:10px;padding:5px 10px;min-width:58px;text-align:center;box-shadow:0 2px 7px rgba(54,35,70,.07);min-width:42px;}.nss-clock-middle{min-width:0;}.nss-status{font-family:var(--font-d);font-size:9px;letter-spacing:1.2px;font-weight:900;color:#6f6378;margin-bottom:5px;}.nss-track{height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;}.nss-track>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:inherit;transition:width .2s linear;}.nss-speed{font-family:var(--font-d);font-size:8px;font-weight:900;letter-spacing:1px;color:#8a7d91;white-space:nowrap;}
.nss-pitch-strip{height:54px;flex:0 0 auto;position:relative;overflow:hidden;background:linear-gradient(180deg,#257c46,#1b6539);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:inset 0 -20px 35px rgba(0,0,0,.16);}.nss-pitch-strip:before,.nss-pitch-strip:after{content:"";position:absolute;top:0;bottom:0;width:18%;background:rgba(255,255,255,.025);}.nss-pitch-strip:before{left:0;}.nss-pitch-strip:after{right:0;}.nss-pitch-line{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.48);}.nss-pitch-circle{position:absolute;left:50%;top:50%;width:82px;height:82px;border:1px solid rgba(255,255,255,.45);border-radius:50%;transform:translate(-50%,-50%);}.nss-pitch-circle:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);}.nss-pitch-ball{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.nss-content{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;}.nss-feed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;}.nss-feed-head h1{margin:2px 0 0;font-size:21px;letter-spacing:-.5px;color:#241c2b;}.nss-minute-large{font-family:var(--font-d);font-size:40px;font-weight:950;color:#5b2c8a;line-height:.9;letter-spacing:-2px;}.nss-feed{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}.nss-feed-row{display:grid;grid-template-columns:43px 30px 1fr;align-items:center;gap:8px;min-height:52px;padding:8px 10px;border:1px solid #ded8e4;border-radius:13px;background:#ffffff;box-shadow:0 2px 7px rgba(50,35,65,.04);}.nss-feed-row.goal{border-color:rgba(184,134,46,.5);background:linear-gradient(90deg,rgba(184,134,46,.14),#fff);}.nss-feed-row.chance{border-color:rgba(111,63,158,.34);}.nss-feed-row.opponent.goal{border-color:rgba(173,50,38,.42);background:linear-gradient(90deg,rgba(173,50,38,.11),#fff);}.nss-feed-minute{font-family:var(--font-d);font-size:13px;font-weight:950;color:#9a6d16;}.nss-feed-row.opponent .nss-feed-minute{color:#b13f34;}.nss-feed-icon{display:flex;justify-content:center;align-items:center;color:var(--accent);}.nss-feed-row.goal .nss-feed-icon{color:#b8862e;}.nss-feed-copy{font-size:12px;font-weight:800;line-height:1.25;color:#302838;}.nss-feed-sub{font-size:8px;letter-spacing:1px;color:#887d90;font-family:var(--font-d);margin-top:3px;font-weight:900;}.nss-empty-feed{min-height:115px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #d6cedd;border-radius:16px;color:#756a7e;font-size:12px;}.nss-feed-ball{color:#b8862e;opacity:.85;}.nss-skip-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));width:min(calc(100% - 32px),728px);display:flex;align-items:stretch;z-index:120;pointer-events:auto;}.nss-skip-btn{margin:0!important;width:100%;animation:none!important;pointer-events:auto;touch-action:manipulation;min-height:52px;box-shadow:0 10px 26px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.18);}.nss-skip-btn:active{transform:scale(.97);}.nss-feed{padding-bottom:64px;}.nss-next{margin-top:auto;padding:13px 14px;border-radius:15px;background:linear-gradient(135deg,rgba(111,63,158,.10),rgba(184,134,46,.08));border:1px solid rgba(111,63,158,.25);}.nss-next-kicker{font-family:var(--font-d);font-size:8px;font-weight:950;letter-spacing:1.2px;color:#8c6314;}.nss-next-title{font-family:var(--font-d);font-size:17px;font-weight:950;color:#30243a;margin-top:3px;}.nss-next-copy{font-size:11px;color:#756b7c;margin-top:3px;line-height:1.35;}.nss-break-card{margin-top:auto;text-align:center;padding:20px;border-radius:17px;background:linear-gradient(135deg,rgba(111,63,158,.10),rgba(184,134,46,.10));border:1px solid rgba(184,134,46,.35);}.nss-break-score{font-family:var(--font-d);font-size:42px;font-weight:950;color:#9b711a;margin:4px 0;}.nss-match-screen .eyebrow{font-size:9px;letter-spacing:1.5px;}.nss-match-screen .tiny{color:#776d80;}
.nss-minute-large-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}.nss-minute-large-label{font-family:var(--font-d);font-size:8px;font-weight:950;letter-spacing:1.5px;color:#8a7d91;}
/* BUGFIX: these notes were originally written with JavaScript-style `//`
   comments, which are NOT valid CSS. The CSS parser treated each line as a
   bogus selector and consumed tokens trying to recover - swallowing the
   @keyframes rule immediately below it, and destabilising the rules after.
   CSS comments must use this form. */
@keyframes nssFeedIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.nss-feed-row-new{animation:nssFeedIn .32s cubic-bezier(.2,.8,.2,1);}
.nss-minute-tick{border-left:3px solid rgba(91,44,138,.28);background:#faf8fc;}
@media (min-width:700px){.nss-content{padding:18px 24px 20px;}.nss-scorebar{padding-left:28px;padding-right:28px;}.nss-clockbar{padding-left:28px;padding-right:28px;}.nss-feed-head h1{font-size:26px;}.nss-minute-large{font-size:50px;}}


/* ---- The quick card (RC 1.17): one dark sheet over the pitch, one tap ---- */
.modal-overlay.qc-overlay{align-items:flex-end;padding:12px 12px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(10,6,16,.15),rgba(10,6,16,.72) 55%);backdrop-filter:none;-webkit-backdrop-filter:none;}
.qc-overlay .modal-box{max-width:440px;margin:0 auto;padding:0;background:none;border:0;box-shadow:none;overflow:visible;animation:qcUp .26s cubic-bezier(.2,.9,.3,1);}
@keyframes qcUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.qc{position:relative;border-radius:22px;padding:16px 16px 12px;color:#fff;text-align:center;background:linear-gradient(165deg,rgba(62,32,96,.97),rgba(20,12,32,.98) 60%);border:1px solid rgba(184,134,46,.32);box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);}
.qc-big{border-color:rgba(231,200,126,.75);box-shadow:0 0 0 1px rgba(231,200,126,.25),0 18px 50px rgba(184,134,46,.35);}
.qc-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-d);font-weight:900;letter-spacing:1.4px;font-size:11px;}
.qc-min{color:#1b1206;background:var(--gold-2);border-radius:8px;padding:2px 8px;}
.qc-kicker{color:var(--gold-2);display:inline-flex;align-items:center;gap:4px;}
.qc-ctx{margin-top:10px;font-family:var(--font-d);font-weight:900;font-size:12px;letter-spacing:1.3px;color:#ffd77a;text-shadow:0 0 14px rgba(255,200,90,.35);}
.qc-title{font-family:var(--font-d);font-weight:900;font-size:30px;letter-spacing:1px;line-height:1.05;margin-top:6px;}
.qc-big .qc-title{color:var(--gold-2);animation:bigChancePulse 1.3s ease-in-out infinite;}
.qc-obj{font-size:12px;font-weight:800;letter-spacing:1.4px;color:rgba(255,255,255,.62);margin-top:2px;text-transform:uppercase;}
.qc-player{display:flex;align-items:center;gap:11px;text-align:left;margin:12px 0 0;padding:9px 11px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);}
.qc-shirt{flex:0 0 auto;width:38px;height:38px;border-radius:11px;border:3px solid;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:900;font-size:16px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.qc-pname{min-width:0;display:flex;flex-direction:column;gap:1px;}
.qc-pname b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qc-pname span{font-size:10.5px;font-weight:800;letter-spacing:.8px;color:rgba(255,255,255,.6);}
.qc-pname i{font-style:normal;color:var(--gold-2);}
.qc-swap{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.qc-swap::-webkit-scrollbar{display:none;}
.qc-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font:800 12px var(--font-b);cursor:pointer;touch-action:manipulation;}
.qc-chip em{font-style:normal;color:rgba(255,255,255,.55);font-size:11px;}
.qc-chip.on{background:var(--gold-2);border-color:var(--gold-2);color:#1b1206;}
.qc-chip.on em{color:#5a4310;}
.qc .howto-demo{margin:10px 0 2px;height:50px;}
.qc-how{font-size:11.5px;line-height:1.35;font-weight:800;color:rgba(255,255,255,.85);margin-top:4px;}
.qc-how-short{margin-top:10px;color:rgba(255,255,255,.6);font-weight:700;}
.qc-go{margin-top:12px;width:100%;}
.qc-go2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.qc-go2 .btn{height:auto;min-height:54px;padding:9px 8px;display:flex;flex-direction:column;gap:2px;}
.qc-go2 small{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:none;opacity:.8;}
.qc-tap{font-size:10.5px;color:rgba(255,255,255,.4);margin-top:7px;}
.chance-toast .chain-line{font-family:var(--font-d);font-weight:900;letter-spacing:1.6px;font-size:13px;color:#ffd77a;margin-bottom:4px;}

/* ---- The live match broadcast (RC 1.17): dark, like the mini-games ---- */
.bc-screen{background:#0d0915;color:#fff;}
.bc{width:100%;max-width:760px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:radial-gradient(120% 60% at 50% 0%,#2a1640 0%,#120b1c 55%,#0b0812 100%);padding-bottom:calc(76px + env(safe-area-inset-bottom));}
.bc-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 6px;}
.bc-team{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--font-d);font-weight:900;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#f1eaf8;}
.bc-team.opp{justify-content:flex-end;text-align:right;color:#c9bfd4;}
.bc-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-team i{flex:0 0 auto;width:12px;height:12px;border-radius:4px;box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.bc-sc{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:900;font-size:32px;line-height:1;color:#fff;background:linear-gradient(180deg,#3d2160,#22132f);border:1px solid rgba(231,200,126,.35);border-radius:14px;padding:6px 14px;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.bc-sc em{font-style:normal;color:rgba(231,200,126,.6);font-size:24px;}
.bc-clock{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:4px 14px 10px;}
.bc-min{font-family:var(--font-d);font-weight:900;font-size:18px;color:#1b1206;background:var(--gold-2);border-radius:9px;padding:2px 9px;min-width:46px;text-align:center;font-variant-numeric:tabular-nums;}
.bc-track{position:relative;height:5px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;}
.bc-track>div{height:100%;background:linear-gradient(90deg,#8E5BD6,var(--gold-2));border-radius:inherit;transition:width .25s linear;}
.bc-track>i{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35);}
.bc-status{font-family:var(--font-d);font-weight:900;font-size:10px;letter-spacing:1.4px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.bc-status.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e64d4d;box-shadow:0 0 10px rgba(230,77,77,.9);animation:livepulse 1.1s ease infinite;}
.bc-pitch{position:relative;margin:0 12px;flex:0 0 auto;aspect-ratio:105/66;max-height:36vh;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);}
.bc-pitch canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bc-alert{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.bc-alert-in{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 18px;border-radius:14px;background:rgba(18,10,28,.78);border:1px solid rgba(231,200,126,.6);box-shadow:0 0 30px rgba(231,200,126,.35);animation:bcAlert .35s cubic-bezier(.2,1.4,.4,1);}
.bc-alert-in span{font-family:var(--font-d);font-weight:900;font-size:10px;letter-spacing:2px;color:var(--gold-2);}
.bc-alert-in b{font-family:var(--font-d);font-weight:900;font-size:24px;letter-spacing:1px;color:#fff;}
.bc-alert-in.danger{border-color:rgba(255,110,100,.7);box-shadow:0 0 30px rgba(230,77,77,.4);}
.bc-alert-in.danger span{color:#ff9d93;}
.bc-alert-in.soft{border-color:rgba(255,255,255,.3);box-shadow:none;}
.bc-alert-in.soft b{font-size:16px;}
@keyframes bcAlert{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.bc-mom{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:10px 16px 4px;font-family:var(--font-d);font-weight:900;font-size:9px;letter-spacing:1.2px;color:rgba(255,255,255,.55);}
.bc-mom span{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-mombar{position:relative;height:8px;border-radius:9px;background:linear-gradient(90deg,rgba(142,91,214,.25),rgba(255,255,255,.06) 50%,rgba(230,77,77,.2));overflow:hidden;}
.bc-mombar>div{position:absolute;top:0;bottom:0;left:calc(50% - var(--m,0%));width:4px;margin-left:-2px;border-radius:4px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);transition:left .5s ease;}
.bc-stats{display:flex;flex-direction:column;gap:5px;padding:6px 16px 8px;}
.bc-stat{display:grid;grid-template-columns:34px 1fr auto 1fr 34px;align-items:center;gap:7px;font-size:12px;}
.bc-stat b{font-family:var(--font-d);font-weight:900;font-variant-numeric:tabular-nums;text-align:center;}
.bc-stat span{font-family:var(--font-d);font-weight:900;font-size:9px;letter-spacing:1.3px;color:rgba(255,255,255,.5);min-width:78px;text-align:center;}
.bc-sbar{height:5px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;justify-content:flex-end;overflow:hidden;}
.bc-sbar.opp{justify-content:flex-start;}
.bc-sbar i{display:block;height:100%;border-radius:inherit;background:#8E5BD6;transition:width .5s ease;}
.bc-sbar.opp i{background:#d8584c;}
.bc-feedwrap{flex:1;min-height:0;padding:4px 12px 0;display:flex;flex-direction:column;}
.bc .nss-feed{gap:5px;padding-bottom:8px;}
.bc .nss-feed-row{flex:0 0 auto;grid-template-columns:34px 22px 1fr;min-height:0;padding:7px 9px;border-radius:11px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);box-shadow:none;}
.bc .nss-feed-row.info{background:none;border-color:transparent;padding-top:3px;padding-bottom:3px;}
.bc .nss-feed-row.info .nss-feed-copy{color:rgba(255,255,255,.6);font-weight:700;}
.bc .nss-feed-row.goal{border-color:rgba(231,200,126,.5);background:linear-gradient(90deg,rgba(231,200,126,.22),rgba(255,255,255,.03));}
.bc .nss-feed-row.opponent.goal{border-color:rgba(230,77,77,.5);background:linear-gradient(90deg,rgba(230,77,77,.2),rgba(255,255,255,.03));}
.bc .nss-feed-row.chance{border-color:rgba(142,91,214,.45);}
.bc .nss-feed-row.break{background:rgba(255,255,255,.07);}
.bc .nss-feed-minute{color:var(--gold-2);font-size:12px;}
.bc .nss-feed-row.opponent .nss-feed-minute{color:#ff9d93;}
.bc .nss-feed-icon{color:#b99be6;}
.bc .nss-feed-row.goal .nss-feed-icon{color:var(--gold-2);}
.bc .nss-feed-copy{color:#f1eaf8;font-size:12px;}
.bc .nss-feed-sub{color:rgba(255,255,255,.45);}
.bc .nss-empty-feed{min-height:60px;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5);}
.nss-ycard{display:inline-block;width:10px;height:14px;border-radius:2px;background:#f2d024;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.bc .nss-skip-btn{min-height:48px;font-size:13px;}
.bc-break{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:110;width:min(300px,82vw);text-align:center;padding:20px;border-radius:20px;background:linear-gradient(165deg,rgba(62,32,96,.97),rgba(20,12,32,.98));border:1px solid rgba(231,200,126,.4);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:bcBreak .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes bcBreak{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.bc-break .eyebrow{color:var(--gold-2);}
.bc-break-score{font-family:var(--font-d);font-weight:900;font-size:46px;color:#fff;margin:4px 0;}
.bc-break-stats{font-size:12px;font-weight:800;color:rgba(255,255,255,.75);margin-bottom:6px;}
.bc-break .tiny{color:rgba(255,255,255,.5)!important;}
@media (min-height:760px){.bc-stat{font-size:13px}.bc .nss-feed-copy{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.bc-alert-in,.bc-break{animation:none}}