/* ============================================================
   Starting11 — stylesheet
   "Arcade gold" theme: chunky 3D buttons with pressed edges,
   glossy gold primaries, silver-rimmed dark pills, big playful
   numbers, and a striped green pitch.
   ============================================================ */

:root{
  --bg:#0b0b13;
  --panel:#15151f;
  --panel-2:#1c1c29;
  --line:#2a2a3d;
  --txt:#f1eefa;
  --muted:#9494ac;

  /* hero gold */
  --gold-1:#ffe08a;     /* top sheen   */
  --gold-2:#ffc93d;     /* body        */
  --gold-3:#f5a91e;     /* lower body  */
  --gold-edge:#b97714;  /* pressed lip */
  --gold-ink:#241a02;

  /* dark 3D pills */
  --dark-1:#262634;
  --dark-2:#16161f;
  --dark-rim:#5a5a6e;
  --dark-edge:#08080d;

  --violet:#8b5cf6;
  --grass:#0d7a44;
  --grass-2:#0b6a3b;
  --win:#2ee06a;
  --loss:#ff5470;
  --r:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  overflow-x:hidden;   /* nothing should force horizontal scroll on mobile */
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(139,92,246,.22) 0%, transparent 60%),
    radial-gradient(820px 480px at -5% 110%, rgba(245,169,30,.10) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.004) 0 60px, transparent 60px 120px),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.hidden{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

/* ============================================================
   Chunky 3D buttons
   ============================================================ */
.btn3d{
  position:relative;
  border:none;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:transform .07s ease, box-shadow .07s ease, filter .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-ico{ width:1.05em; height:1.05em; flex:none; }

/* gold primary — glossy face, darker pressed lip, corner gleam */
.btn-gold{
  background:linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
  color:var(--gold-ink);
  box-shadow:
    0 6px 0 var(--gold-edge),
    0 14px 28px rgba(245,169,30,.22),
    inset 0 2px 0 rgba(255,255,255,.6);
}
.btn-gold::after{               /* little gleam tab in the corner */
  content:'';
  position:absolute;
  top:7px; right:10px;
  width:18px; height:13px;
  background:rgba(255,255,255,.55);
  border-radius:4px 8px 4px 12px;
  pointer-events:none;
}
.btn-gold:hover:not(:disabled){ filter:brightness(1.06); }
.btn-gold:active:not(:disabled){
  transform:translateY(5px);
  box-shadow:
    0 1px 0 var(--gold-edge),
    0 4px 10px rgba(245,169,30,.2),
    inset 0 2px 0 rgba(255,255,255,.6);
}
.btn-gold:disabled{ filter:saturate(.45) brightness(.75); cursor:default; }

/* dark secondary — silver rim + dark pressed lip */
.btn-dark{
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  color:var(--txt);
  border:1.5px solid var(--dark-rim);
  box-shadow:
    0 5px 0 var(--dark-edge),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-dark:hover{ border-color:#8b8ba2; filter:brightness(1.12); }
.btn-dark:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--dark-edge), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------------- pictures ---------------- */
.badge-img{ object-fit:contain; flex:none; vertical-align:middle; }
.face-wrap{ position:relative; display:block; flex:none; }
.face-wrap > svg{ position:absolute; inset:0; }
.face-wrap .pface{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  border-radius:30%;
  background:radial-gradient(120% 120% at 50% 0%, #2a2a3c 0%, #14141e 70%);
  border:1px solid rgba(255,255,255,.14);
}
.reel-code{ font-size:19px; font-weight:900; letter-spacing:1px; line-height:1; }
#reelTeamVal{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.xirow-meta .badge-img{ width:14px; height:14px; margin-right:2px; }

/* ---------------- top bar ---------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  background:rgba(14,14,22,.92);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(8px);
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto; overflow:hidden; }
.brand-wordmark{
  height:26px; width:auto; flex:0 1 auto; min-width:0; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.brand-sub{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right{ display:flex; align-items:center; gap:12px; flex:none; }
.round-pill{
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 4px 0 var(--dark-edge);
  padding:8px 16px; border-radius:999px; font-weight:900; font-size:14px;
  color:var(--gold-2); white-space:nowrap; flex:none;
}
.icon-btn{
  width:42px; height:42px; border-radius:13px;
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 4px 0 var(--dark-edge), inset 0 1px 0 rgba(255,255,255,.14);
  color:var(--txt); font-size:17px; line-height:1;
  transition:transform .07s, box-shadow .07s;
}
.icon-btn:hover{ border-color:#8b8ba2; }
.icon-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--dark-edge); }

/* ---------------- setup ---------------- */
.setup{ padding:42px 18px 30px; }
.setup-inner{ max-width:780px; margin:0 auto; text-align:center; }
.setup-logo{
  width:min(660px, 100%);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 60px rgba(255,201,61,.07);
  margin-bottom:20px;
}
.setup-sub{
  color:#dddbeb;
  font-size:18.5px;
  font-weight:700;
  line-height:1.55;
  margin:0 auto 26px;
  max-width:560px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* big gold numbers / grey labels */
.fun-stats{
  display:flex; justify-content:center; gap:46px; margin:0 0 34px;
}
.fun-stats b{
  display:block; font-size:34px; font-weight:900; color:var(--gold-2);
  text-shadow:0 2px 14px rgba(255,201,61,.25);
}
.fun-stats span{ color:var(--muted); font-size:13.5px; font-weight:600; }

.setup-step{ margin-bottom:30px; }
.step-label{
  color:var(--muted); font-size:12px; font-weight:900;
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mode-card{
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 6px 0 var(--dark-edge), inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:20px 18px; text-align:left; color:var(--txt);
  transition:transform .07s, box-shadow .07s, border-color .15s, filter .15s;
}
.mode-card:hover{ border-color:#8b8ba2; filter:brightness(1.1); }
.mode-card:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--dark-edge); }
.mode-card.selected{
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2) 48%, var(--gold-3));
  border-color:#fff0c4;
  color:var(--gold-ink);
  box-shadow:0 6px 0 var(--gold-edge), 0 12px 30px rgba(255,201,61,.3), inset 0 2px 0 rgba(255,255,255,.6);
}
.mode-card.selected .mode-desc{ color:#5d4a10; }
.game-card{ text-align:center; }
.game-flag{ display:block; font-size:34px; margin-bottom:8px; }
.mode-name{ display:block; font-size:20px; font-weight:900; margin-bottom:6px; }
.mode-desc{ display:block; color:var(--muted); font-size:13.5px; line-height:1.45; }
.formation-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.formation-card{
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 5px 0 var(--dark-edge), inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:14px;
  color:var(--txt); font-weight:900; font-size:15px; padding:13px 21px;
  letter-spacing:.5px;
  transition:transform .07s, box-shadow .07s, border-color .15s, filter .15s;
}
.formation-card:hover{ border-color:#8b8ba2; filter:brightness(1.12); transform:translateY(-2px); }
.formation-card:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--dark-edge); }
.formation-card.selected{
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2) 48%, var(--gold-3));
  border-color:#fff0c4;
  color:var(--gold-ink);
  box-shadow:0 5px 0 var(--gold-edge), 0 10px 24px rgba(255,201,61,.3), inset 0 2px 0 rgba(255,255,255,.6);
  transform:none;
}
.start-btn{
  margin-top:10px;
  font-size:17px;
  padding:17px 46px;
  border-radius:18px;
}

/* ---------------- game layout ---------------- */
.game{
  display:grid; grid-template-columns:minmax(330px,470px) minmax(330px,560px);
  gap:34px; justify-content:center; align-items:start;
  padding:30px 18px 60px;
}

/* ---------------- spin pane ---------------- */
.spin-pane{ padding-top:44px; text-align:center; }
.reels{ display:flex; gap:18px; justify-content:center; }
.reel{
  width:158px; height:124px; border-radius:20px;
  background:linear-gradient(180deg, #1a1a26, #101018);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  position:relative;
}
.reel-team{
  border:2px solid var(--gold-2);
  box-shadow:0 6px 0 #6e4a08, 0 0 26px rgba(255,201,61,.3), inset 0 0 20px rgba(255,201,61,.07);
}
.reel-year{
  border:2px solid var(--violet);
  box-shadow:0 6px 0 #2c1d52, 0 0 26px rgba(139,92,246,.35), inset 0 0 20px rgba(139,92,246,.09);
}
.reel-label{ font-size:11px; font-weight:900; letter-spacing:3px; }
.reel-team .reel-label{ color:var(--gold-2); }
.reel-year .reel-label{ color:#b9a3ff; }
.reel-value{ font-size:38px; font-weight:900; }
.reel.spinning .reel-value{ animation:reelFlick .12s linear infinite; }
@keyframes reelFlick{
  0%{ opacity:.55; transform:translateY(-2px); }
  50%{ opacity:1; transform:translateY(0); }
  100%{ opacity:.55; transform:translateY(2px); }
}
.reel.landed{ animation:reelLand .55s cubic-bezier(.2,.9,.3,1.4); }
@keyframes reelLand{
  0%{ transform:scale(.95); filter:brightness(1.7); }
  60%{ transform:scale(1.07); }
  100%{ transform:scale(1); filter:brightness(1); }
}
.reel-captions{
  display:flex; gap:18px; justify-content:center; margin-top:14px;
  color:var(--muted); font-size:13px; font-weight:600;
}
.reel-captions span{ width:158px; }
.spin-btn{
  margin-top:28px;
  width:230px;
  padding:17px 0;
  font-size:19px;
  letter-spacing:3px;
  border-radius:18px;
  animation:spinIdle 2.4s ease-in-out infinite;
}
.spin-btn:disabled{ animation:none; }
@keyframes spinIdle{
  0%,100%{ box-shadow:0 6px 0 var(--gold-edge), 0 14px 28px rgba(245,169,30,.22), inset 0 2px 0 rgba(255,255,255,.6); }
  50%{ box-shadow:0 6px 0 var(--gold-edge), 0 14px 42px rgba(255,201,61,.45), inset 0 2px 0 rgba(255,255,255,.6); }
}
.spin-hint{ color:var(--muted); font-size:13.5px; max-width:300px; margin:20px auto 0; line-height:1.5; }

/* ---------------- draft pane ---------------- */
.draft-pane{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.draft-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,201,61,.05), transparent);
}
.draft-title{ font-size:19px; font-weight:900; display:flex; align-items:center; gap:10px; min-width:0; }
.draft-title > span:first-child{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.draft-year{
  flex:none;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color:var(--gold-ink);
  box-shadow:0 3px 0 var(--gold-edge);
  font-size:13px; font-weight:900; padding:4px 11px; border-radius:999px;
}
.draft-search{
  flex:0 1 170px;
  background:#0d0d15;
  border:1.5px solid var(--line);
  border-radius:12px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
  color:var(--txt); padding:9px 12px; font-size:13.5px; outline:none;
}
.draft-search:focus{ border-color:var(--gold-2); }
.draft-subhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 16px; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:12.5px;
}
.stat-cols{ display:flex; gap:0; flex:none; }
.stat-cols i{ font-style:normal; width:30px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.3px; }
.stat-cols i.ov{ width:40px; color:var(--gold-2); }
.respin-btn{
  display:flex; align-items:center; justify-content:center;
  width:calc(100% - 24px); margin:10px auto 0;
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px dashed rgba(255,201,61,.55);
  box-shadow:0 4px 0 var(--dark-edge);
  border-radius:12px;
  color:var(--gold-2); font-size:13px; font-weight:800; padding:10px;
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.respin-btn:hover{ filter:brightness(1.15); }
.respin-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--dark-edge); }
.player-list{ max-height:560px; overflow-y:auto; padding:6px 0 10px; }
.prow{
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; cursor:pointer;
  border-left:3px solid transparent;
}
.prow:hover{ background:rgba(255,255,255,.035); }
.prow.selected{
  background:rgba(255,201,61,.1);
  border-left-color:var(--gold-2);
}
.prow.ineligible{ opacity:.35; cursor:default; }
.prow.ineligible:hover{ background:none; }
.prow-face{ flex:none; width:40px; height:40px; }
.prow-id{ flex:1; min-width:0; }
.prow-name{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow-meta{ color:var(--muted); font-size:12px; margin-top:1px; }
.prow-pos{
  display:inline-block; margin-right:6px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px; font-weight:800; font-size:11px; color:#c8c8dc;
}
.prow-stats{ display:flex; flex:none; }
.prow-stats b{ width:30px; text-align:center; font-size:12.5px; font-weight:700; color:#bcbcd4; }
.prow-ov{
  flex:none; width:40px; text-align:center;
  font-size:15px; font-weight:900; border-radius:10px; padding:5px 0;
}
.ov-90{ background:rgba(46,224,106,.16); color:#3df080; }
.ov-80{ background:rgba(163,230,53,.14); color:#bef264; }
.ov-75{ background:rgba(255,201,61,.14); color:var(--gold-2); }
.ov-70{ background:rgba(255,157,61,.14); color:#ffb163; }
.ov-low{ background:rgba(255,84,112,.14); color:var(--loss); }

/* expert mode hides numbers AND positions during the draft */
body.mode-expert .game .prow-stats,
body.mode-expert .game .prow-ov,
body.mode-expert .game .stat-cols,
body.mode-expert .game .prow-pos,
body.mode-expert .slot-ov{ display:none; }

/* ---------------- pitch ---------------- */
.pitch-col{ position:relative; }
.pitch{
  position:relative;
  width:100%; aspect-ratio:10 / 13.4;
  border-radius:24px;
  background:
    repeating-linear-gradient(180deg,
      var(--grass) 0, var(--grass) 11.1%,
      var(--grass-2) 11.1%, var(--grass-2) 22.2%);
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 10px 0 #06381f, 0 26px 60px rgba(0,0,0,.5), inset 0 0 80px rgba(0,0,0,.18);
  overflow:hidden;
}
.pitch-lines > div{ position:absolute; border:2px solid rgba(255,255,255,.32); }
.pl-box{ left:23%; width:54%; height:13.5%; }
.pl-box.pl-top{ top:-2px; border-top:none; }
.pl-box.pl-bottom{ bottom:-2px; border-bottom:none; }
.pl-six{ left:36%; width:28%; height:5.5%; }
.pl-six.pl-top{ top:-2px; border-top:none; }
.pl-six.pl-bottom{ bottom:-2px; border-bottom:none; }
.pl-circle{
  left:50%; top:50%; width:26%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
}
.pl-halfway{ left:0; right:0; top:50%; border-width:1px 0 0 0 !important; }
.pl-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.5); border:none !important;
  left:50%; transform:translateX(-50%);
}
.pl-dot-center{ top:calc(50% - 2px); }
.pl-dot-top{ top:9%; }
.pl-dot-bottom{ bottom:9%; }

.formation-tag{
  position:absolute; top:14px; left:16px;
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 3px 0 var(--dark-edge);
  color:var(--gold-2); border-radius:999px; padding:5px 13px;
  font-size:12px; font-weight:900; letter-spacing:1px;
}

/* slots */
.slot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  z-index:5;
}
.slot .slot-node{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#eaf4ff;
  position:relative;
}
.slot.open .slot-node{
  background:rgba(12,16,26,.8);
  border:2px dashed rgba(195,212,235,.55);
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.slot.open:hover .slot-node{ border-color:#fff; }
.slot.armed{ cursor:pointer; }
.slot.armed .slot-node{
  border:2px dashed var(--gold-2);
  animation:armPulse 1s ease-in-out infinite;
}
@keyframes armPulse{
  0%,100%{ box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 10px rgba(255,201,61,.45); }
  50%{ box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 26px rgba(255,201,61,.9); }
}
.slot.filled .slot-node{ background:none; border:none; }
.slot-ov{
  position:absolute; top:-7px; right:-9px;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color:var(--gold-ink);
  font-size:11px; font-weight:900;
  border-radius:999px; padding:2px 6px;
  border:2px solid rgba(10,10,18,.85);
  box-shadow:0 2px 0 var(--gold-edge);
}
.slot-name{
  background:rgba(10,10,18,.75); color:#fff;
  font-size:10.5px; font-weight:700;
  border-radius:8px; padding:2px 7px;
  max-width:96px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  backdrop-filter:blur(3px);
}

/* ---------------- results ---------------- */
.results{ padding:44px 18px 30px; }
.results-inner{ max-width:620px; margin:0 auto; text-align:center; }
.results-wordmark{
  height:32px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
  margin-bottom:16px;
}
.results-q{ font-size:27px; font-weight:900; margin:0 0 24px; }
.record-block{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  padding:28px 18px 32px;
}
.record-label{ color:var(--muted); font-size:12px; font-weight:900; letter-spacing:3px; }
.record-line{ font-size:78px; font-weight:900; line-height:1.1; margin:8px 0 2px; }
.rec-w{ color:var(--win); text-shadow:0 2px 18px rgba(46,224,106,.3); }
.rec-d{ color:var(--muted); }
.rec-l{ color:var(--loss); text-shadow:0 2px 18px rgba(255,84,112,.25); }
.rec-sep{ color:#3a3a55; margin:0 12px; }
.record-key{ color:var(--muted); font-size:14px; }
.record-key b{ color:#cdcde0; }
.record-key span{ color:var(--gold-2); font-weight:900; }
.tier-badge{
  display:inline-block; margin-top:22px;
  border-radius:999px; padding:12px 32px;
  font-weight:900; font-size:17px; letter-spacing:1.5px;
  color:#16100a; background:linear-gradient(135deg, var(--gold-1), var(--gold-3));
  box-shadow:0 5px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.45);
}
.results-actions{ display:flex; gap:14px; justify-content:center; margin:26px 0; }
.btn-primary{ font-size:15px; padding:15px 30px; }
.btn-ghost{ font-size:15px; padding:15px 26px; border-radius:16px; }
.xi-list{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  text-align:left; overflow:hidden;
}
.xirow{
  display:flex; align-items:center; gap:11px;
  padding:9px 16px; border-bottom:1px solid rgba(42,42,61,.6);
}
.xirow:last-child{ border-bottom:none; }
.xirow-pos{
  flex:none; width:38px; text-align:center;
  color:var(--muted); font-weight:900; font-size:12.5px;
}
.xirow-face{ flex:none; width:34px; height:34px; }
.xirow-id{ flex:1; min-width:0; }
.xirow-name{ font-weight:800; font-size:14px; }
.xirow-meta{ color:var(--muted); font-size:12px; }
.xirow-ov{
  flex:none; width:42px; text-align:center;
  font-size:14.5px; font-weight:900; border-radius:10px; padding:5px 0;
}

/* ---------------- result reveal choreography ---------------- */
/* While "revealing": digits roll, everything else holds its breath. */
.results.revealing .tier-badge,
.results.revealing .results-actions,
.results.revealing .xi-list{
  opacity:0;
  pointer-events:none;
}
.results.revealing .record-line{
  opacity:.8;
  animation:digitJitter .17s linear infinite;
}
.results.revealing .results-q{
  animation:suspensePulse 1.1s ease-in-out infinite;
}
@keyframes digitJitter{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
@keyframes suspensePulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* The landing: record pops, badge slams in, the rest cascades up. */
.results.revealed .record-line{
  animation:recordPop .55s cubic-bezier(.2,.9,.3,1.4);
}
.results.revealed .tier-badge{
  animation:badgeSlam .6s cubic-bezier(.2,.9,.3,1.45) both;
  animation-delay:.3s;
}
.results.revealed .results-actions{
  animation:fadeUp .45s ease both;
  animation-delay:.75s;
}
.results.revealed .xi-list{
  animation:fadeUp .55s ease both;
  animation-delay:.95s;
}
@keyframes recordPop{
  0%{ transform:scale(.82); filter:brightness(2); }
  55%{ transform:scale(1.1); }
  100%{ transform:scale(1); filter:brightness(1); }
}
@keyframes badgeSlam{
  0%{ opacity:0; transform:scale(2.2) rotate(-5deg); }
  65%{ opacity:1; transform:scale(.94) rotate(1deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------- about ---------------- */
.about{ border-top:1px solid var(--line); margin-top:50px; padding:40px 18px 70px; }
.about-inner{ max-width:680px; margin:0 auto; color:#bcbcd0; font-size:14.5px; line-height:1.65; }
.about h2{ color:var(--txt); font-size:21px; }
.about h3{ color:var(--txt); font-size:16px; margin-top:26px; }
.about-foot{ color:var(--muted); font-size:12.5px; margin-top:30px; }
.faq-q{ font-weight:800; color:#dcdcec; margin-top:14px; }
.faq-a{ color:var(--muted); }

/* ---------------- pre-season (squad complete) ---------------- */
.preseason{ padding:36px 18px 70px; }
.preseason-inner{ max-width:620px; margin:0 auto; }
.ps-heading{ font-size:30px; font-weight:900; margin:0 0 2px; }
.ps-formation{ color:var(--muted); font-weight:700; margin:0 0 16px; }
.ps-xi{ margin-bottom:18px; }
.ps-complete{ text-align:center; margin-bottom:22px; }
.ps-trophy{ font-size:54px; line-height:1; filter:drop-shadow(0 6px 18px rgba(255,201,61,.35)); }
.ps-title{ font-size:30px; font-weight:900; margin:10px 0 8px; }
.ps-sub{ color:var(--muted); margin:0 auto; max-width:440px; line-height:1.5; }
.ps-card{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  padding:20px 22px;
  margin-bottom:18px;
}
.ps-card-label{ color:var(--muted); font-size:12px; font-weight:900; letter-spacing:2.5px; }
.ps-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ps-card-note{ color:var(--muted); font-size:11.5px; }
.ps-overall{ font-size:54px; font-weight:900; line-height:1.1; margin:2px 0 14px; }
.ubar{ margin-bottom:13px; }
.ubar:last-child{ margin-bottom:2px; }
.ubar-row{ display:flex; justify-content:space-between; font-weight:800; font-size:14.5px; margin-bottom:6px; }
.ubar-row span{ color:#c8c8dc; }
.ubar-track, .obar-track{ height:9px; border-radius:99px; background:#23232f; overflow:hidden; }
.ubar-fill, .obar-fill{ height:100%; border-radius:99px; }
.odds-top{ display:flex; justify-content:space-between; align-items:flex-end; margin:16px 0 18px; }
.odds-cell span{
  display:block; color:var(--muted);
  font-size:11px; font-weight:900; letter-spacing:2px; margin-bottom:4px;
}
.odds-cell b{ font-size:44px; font-weight:900; line-height:1; }
.odds-cell.right{ text-align:right; }
.odds-cell b.pts{ color:var(--win); }
.obar{ margin-bottom:11px; }
.obar-row{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:5px; }
.obar-row span{ color:#c8c8dc; }
.odds-foot{ color:var(--muted); font-size:12.5px; margin:14px 0 0; line-height:1.45; }
.ps-sim-btn{ width:100%; padding:17px 0; font-size:18px; letter-spacing:2px; border-radius:18px; margin-bottom:44px; }

/* ---------------- season simulation ticker ---------------- */
.simseason{ padding:60px 18px 90px; }
.sim-inner{ max-width:480px; margin:0 auto; text-align:center; }
.sim-mw{ color:var(--gold-2); font-weight:900; letter-spacing:3px; font-size:14px; margin-bottom:18px; }
.sim-fixture{
  display:flex; align-items:center; justify-content:center; gap:18px;
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  padding:24px 16px;
  font-weight:900; font-size:18px;
  min-height:96px;
}
.simfx-us{ color:var(--gold-2); }
.simfx-score{ font-size:34px; }
.simfx-score.win{ color:var(--win); }
.simfx-score.draw{ color:var(--muted); }
.simfx-score.loss{ color:var(--loss); }
.simfx-opp{ display:flex; align-items:center; gap:8px; }
.sim-running{ display:flex; justify-content:center; gap:12px; margin:18px 0; }
.simstat{
  flex:1;
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:14px;
  box-shadow:0 4px 0 var(--dark-edge);
  padding:10px 0 8px;
}
.simstat b{ display:block; font-size:24px; font-weight:900; }
.simstat span{ color:var(--muted); font-size:10.5px; font-weight:900; letter-spacing:1.5px; }
.simstat.gold b{ color:var(--gold-2); }
.sim-feed{ display:flex; flex-direction:column; gap:6px; }
.simfeed-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.03);
  border-radius:10px; padding:7px 12px;
  font-size:13px; color:var(--muted);
  animation:fadeUp .25s ease;
}
.simfeed-row span:first-child{ width:52px; text-align:left; font-weight:800; flex:none; }
.simfeed-row span:nth-child(2){ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.simfeed-row b{ color:var(--txt); flex:none; }
.simfeed-row i{ font-style:normal; font-weight:900; width:18px; flex:none; }
.simfeed-row.win i{ color:var(--win); }
.simfeed-row.draw i{ color:var(--muted); }
.simfeed-row.loss i{ color:var(--loss); }

/* ---------------- league results blocks ---------------- */
.awards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.award-card{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 6px 0 var(--dark-edge);
  padding:16px;
  text-align:left;
}
.award-cap{ color:var(--gold-2); font-size:11px; font-weight:900; letter-spacing:1.5px; margin-bottom:6px; }
.award-name{ font-weight:900; font-size:17px; }
.award-stat{ color:var(--gold-2); font-weight:800; font-size:13.5px; margin-top:3px; }
.league-block{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  padding:16px 0 10px;
  margin-bottom:26px;
  text-align:left;
}
.lt-head{ color:var(--muted); font-size:12px; font-weight:900; letter-spacing:2.5px; padding:0 18px 10px; }
.lt-cols, .lt-row{ display:flex; align-items:center; gap:10px; padding:6px 18px; }
.lt-cols{ color:var(--muted); font-size:10.5px; font-weight:900; letter-spacing:1px; padding-bottom:8px; }
.lt-cols span:first-child{ width:24px; }
.lt-cols span:nth-child(2){ flex:1; }
.lt-cols span:nth-child(3){ width:44px; text-align:right; }
.lt-cols span:last-child{ width:36px; text-align:right; }
.lt-pos{ width:24px; color:var(--muted); font-weight:800; flex:none; }
.lt-name{ flex:1; font-weight:700; font-size:14px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-gd{ width:44px; text-align:right; color:var(--muted); font-size:13px; flex:none; }
.lt-pts{ width:36px; text-align:right; font-weight:900; flex:none; }
.lt-row.me{
  background:linear-gradient(90deg, rgba(255,201,61,.16), rgba(255,201,61,.04));
  border-left:3px solid var(--gold-2);
  padding-left:15px;
}
.lt-row.me .lt-name, .lt-row.me .lt-pts, .lt-row.me .lt-pos{ color:var(--gold-2); font-weight:900; }
.lt-row.rel-zone{ box-shadow:inset 0 2px 0 rgba(255,84,112,.45); }
/* "Share my team" card — blurred mini-pitch with the XI's faces,
   gold call-to-action pill on top. Clicking builds the squad graphic. */
.share-team-card{
  position:relative;
  display:block;
  width:100%;
  height:170px;
  border:1.5px solid rgba(255,201,61,.55);
  border-radius:var(--r);
  box-shadow:0 7px 0 var(--dark-edge), 0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  margin-bottom:26px;
  background:none;
  transition:transform .07s, box-shadow .07s, filter .15s, border-color .15s;
}
.share-team-card:hover{ filter:brightness(1.12); border-color:var(--gold-2); }
.share-team-card:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--dark-edge), 0 10px 24px rgba(0,0,0,.35); }
.share-team-card:disabled{ cursor:default; filter:saturate(.6) brightness(.85); }
.stc-pitch{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    var(--grass) 0, var(--grass) 12.5%,
    var(--grass-2) 12.5%, var(--grass-2) 25%);
  filter:blur(3px) saturate(1.15);
  transform:scale(1.07);   /* tuck the blurred edges under the border */
}
.stc-dot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:34px; height:34px;
}
.stc-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg, rgba(8,10,16,.18), rgba(8,10,16,.52));
}
.stc-title{
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2) 48%, var(--gold-3));
  color:var(--gold-ink);
  box-shadow:0 4px 0 var(--gold-edge), 0 10px 24px rgba(255,201,61,.35), inset 0 2px 0 rgba(255,255,255,.6);
  border-radius:999px;
  padding:11px 24px;
  font-weight:900; font-size:15.5px; letter-spacing:1.5px;
}
.stc-sub{
  color:#fff; font-size:12.5px; font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
.results.no-league .epl-only{ display:none; }
.results.revealing .epl-only{ opacity:0; pointer-events:none; }
.results.revealed .epl-only{ animation:fadeUp .55s ease both; animation-delay:.65s; }

/* ---------------- share modal ---------------- */
.share-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(5,5,10,.78);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto;
  padding:28px 14px;
}
.share-modal{ width:min(440px, 100%); }
.share-card{
  background:linear-gradient(165deg, #221a0b 0%, #15110a 45%, #0e0e16 100%);
  border:1.5px solid rgba(255,201,61,.4);
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 44px rgba(255,201,61,.08);
  padding:20px 20px 16px;
  margin-bottom:14px;
}
.sc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sc-brand{
  font-weight:900; letter-spacing:1px; font-size:15px;
  background:linear-gradient(90deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sc-pills{ display:flex; gap:7px; }
.sc-pills i{
  font-style:normal; font-size:11px; font-weight:800; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px;
}
.sc-record{ text-align:center; font-size:54px; font-weight:900; letter-spacing:1px; line-height:1.1; }
.sc-record em{ font-style:normal; }
.sc-record em.w{ color:var(--win); }
.sc-record em.d{ color:var(--muted); }
.sc-record em.l{ color:var(--loss); }
.sc-rec-key{ text-align:center; color:var(--muted); font-size:11px; font-weight:900; letter-spacing:3px; margin-top:2px; }
.sc-line{ text-align:center; margin:10px 0 12px; font-size:15px; }
.sc-line b{ color:var(--win); }
.sc-place{
  width:max-content; margin:0 auto 16px;
  border:1.5px solid var(--gold-2); color:var(--gold-2);
  border-radius:999px; padding:7px 18px;
  font-weight:900; font-size:13px; letter-spacing:1px;
}
.sc-xi{ display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; margin-bottom:14px; }
.sc-prow{ display:flex; align-items:center; gap:7px; font-size:12.5px; padding:3px 0; }
.sc-prow i{
  font-style:normal; font-weight:900; font-size:9.5px; color:#c8c8dc;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  padding:2px 4px; width:32px; text-align:center; flex:none;
}
.sc-prow span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.sc-prow b{ font-weight:900; }
.sc-awards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.sc-awards > div{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:12px;
  padding:10px 12px;
}
.sc-awards span{ display:block; color:var(--gold-2); font-size:9.5px; font-weight:900; letter-spacing:1.2px; margin-bottom:4px; }
.sc-awards b{ display:block; font-size:13.5px; }
.sc-awards i{ font-style:normal; color:var(--gold-2); font-size:12px; font-weight:800; }
.sc-foot{ text-align:center; border-top:1px solid var(--line); padding-top:12px; color:var(--muted); font-size:13px; }
.sc-foot b{ display:block; color:var(--gold-2); font-size:16px; letter-spacing:.5px; margin-top:2px; }
.share-main{ width:100%; padding:15px 0; font-size:15px; margin-bottom:10px; }
.share-row{ display:flex; gap:10px; margin-bottom:10px; }
.share-chip{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  border-radius:14px;
  box-shadow:0 4px 0 var(--dark-edge);
  color:var(--txt); font-weight:800; font-size:14px;
  padding:12px 0;
  text-decoration:none; cursor:pointer;
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.share-chip:hover{ filter:brightness(1.15); }
.share-chip:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--dark-edge); }
.share-chip.wa{ border-color:rgba(37,211,102,.6); color:#4ade80; }
.share-chip.wide{ flex:2; }

/* ---------------- toast & confetti ---------------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
  border:1.5px solid var(--dark-rim);
  box-shadow:0 4px 0 var(--dark-edge), 0 10px 30px rgba(0,0,0,.5);
  color:var(--txt);
  border-radius:14px; padding:12px 22px; font-size:14px; font-weight:700;
  z-index:100; animation:toastIn .18s ease-out;
}
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,8px);} to{ opacity:1; transform:translate(-50%,0);} }
.confetti-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:200;
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px){
  .game{ grid-template-columns:1fr; gap:22px; padding:18px 14px 50px; }
  .pitch-col{ order:-1; max-width:430px; margin:0 auto; width:100%; }
  .spin-pane{ padding-top:8px; }
  .brand-sub{ display:none; }
  .record-line{ font-size:56px; }
  .mode-grid{ grid-template-columns:1fr; }
  .fun-stats{ gap:30px; }
  .fun-stats b{ font-size:28px; }
  .player-list{ max-height:420px; }
  .slot .slot-node{ width:46px; height:46px; font-size:12.5px; border-radius:13px; }
  .slot-name{ font-size:9.5px; max-width:80px; }
  .odds-cell b{ font-size:34px; }
  .ps-overall{ font-size:44px; }
  .sim-fixture{ font-size:15px; gap:12px; }
  .simfx-score{ font-size:28px; }
  .sc-record{ font-size:44px; }
}

/* ---- phones: keep the topbar on one tidy row + size everything down ---- */
@media (max-width: 560px){
  .topbar{ padding:8px 12px; gap:8px; }
  .brand-wordmark{ height:20px; }
  .topbar-right{ gap:7px; }
  .round-pill{ font-size:11px; padding:6px 11px; box-shadow:0 3px 0 var(--dark-edge); }
  .icon-btn{
    width:36px; height:36px; border-radius:11px; font-size:15px;
    box-shadow:0 3px 0 var(--dark-edge), inset 0 1px 0 rgba(255,255,255,.14);
  }

  .setup{ padding:26px 14px 24px; }
  .setup-sub{ font-size:16px; margin-bottom:22px; }
  .fun-stats{ gap:22px; margin-bottom:26px; }
  .fun-stats b{ font-size:25px; }
  .fun-stats span{ font-size:12px; }
  .step-label{ font-size:11px; letter-spacing:1.8px; }
  .mode-name{ font-size:18px; }
  .mode-desc{ font-size:13px; }
  .start-btn{ font-size:16px; padding:15px 34px; width:100%; max-width:340px; }

  /* spin reels stack-friendly + draft list breathing room */
  .reel{ width:46vw; max-width:170px; height:112px; }
  .reel-captions span{ width:46vw; max-width:170px; }
  .reel-value{ font-size:34px; }
  .spin-btn{ width:min(280px,86vw); }
  .draft-head{ flex-wrap:wrap; }
  .draft-search{ flex:1 1 100%; }
  .prow{ gap:8px; padding:8px 12px; }
  .prow-stats b{ width:25px; font-size:11.5px; }
  .stat-cols i{ width:25px; font-size:9.5px; }
  .stat-cols i.ov{ width:34px; }
  .prow-ov{ width:34px; font-size:14px; }

  /* results: digits + tier fit the screen */
  .results{ padding:30px 14px 24px; }
  .results-q{ font-size:21px; }
  .record-line{ font-size:48px; }
  .rec-sep{ margin:0 7px; }
  .tier-badge{ font-size:14px; padding:10px 20px; letter-spacing:1px; }
  .results-actions{ flex-wrap:wrap; }
  .results-wordmark{ height:26px; }
  .about-inner{ font-size:14px; }
}

/* ---- very small phones (≤360px): one more notch down ---- */
@media (max-width: 360px){
  .brand-wordmark{ height:18px; }
  .round-pill{ font-size:10px; padding:5px 9px; }
  .icon-btn{ width:33px; height:33px; font-size:14px; }
  .fun-stats{ gap:16px; }
  .fun-stats b{ font-size:22px; }
}