:root{
  /* "Primetime Under the Lights" — floodlit night-stadium broadcast palette */
  --bg:#05080f; --bg2:#0a111d; --panel:#0f1828; --panel2:#142134; --raise:#1b2c45;
  --line:rgba(150,186,230,.14); --line2:rgba(150,186,230,.28);
  --txt:#eef4fb; --dim:#9bb0c9; --faint:#6a7d96;
  --green:#1fe588; --green-dk:#0b9d5b; --gold:#ffc24a; --red:#ff3b57; --blue:#3fb4ff;
  --display:'Saira Condensed','Barlow Condensed',sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Inter Tight','Barlow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--raise) var(--bg)}
body{
  background:var(--bg); color:var(--txt); font-family:var(--body);
  min-height:100dvh; overflow-x:hidden;
  /* M2 — floodlight wash: two cold-white gantry cones from the top + a pitch up-glow */
  background-image:
    radial-gradient(900px 420px at 18% -12%, rgba(214,232,255,.10), transparent 62%),
    radial-gradient(900px 420px at 82% -12%, rgba(214,232,255,.10), transparent 62%),
    radial-gradient(1200px 700px at 50% 118%, rgba(31,229,136,.10), transparent 60%);
  background-attachment:fixed;
}
body::after{ /* M3 — halftone crowd texture (upper-tier dots fading into the night sky) */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:radial-gradient(rgba(155,176,201,.16) 1px, transparent 1.4px);
  background-size:7px 7px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 38%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 38%);
}
::selection{background:var(--green);color:#04130a}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block}

/* ---------- top broadcast bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:10px 20px;background:linear-gradient(180deg,#0b1422 0%,#070d17 100%);
  border-bottom:1px solid var(--line2);
  animation:topdrop .42s cubic-bezier(.2,.9,.3,1) both;
}
/* LED ribbon (M1) along the bottom edge of the broadcast bar */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;z-index:51;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,var(--green),var(--blue) 35%,var(--gold) 70%,var(--green));
  background-size:3px 100%,220% 100%;
  filter:saturate(1.3) brightness(1.1);
  box-shadow:0 0 14px rgba(31,229,136,.45);
  animation:led 9s linear infinite, ledwipe .5s ease-out .12s both;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .cube{
  width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green) 0%,#0fae62 100%);
  color:#04130a;font-family:var(--display);font-weight:900;font-size:14px;
  box-shadow:0 0 20px rgba(31,229,136,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand h1{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.brand h1 em{color:var(--green);font-style:normal}
.topbar .meta{margin-left:auto;display:flex;align-items:center;gap:16px;font-family:var(--cond);font-size:14px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.quit-btn{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:13px;color:var(--dim);border:1px solid var(--line2);border-radius:8px;padding:6px 12px;transition:color .15s,border-color .15s}
.quit-btn:hover{color:var(--red);border-color:var(--red)}
.live-dot{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px var(--red)}50%{opacity:.4;transform:scale(.8);box-shadow:0 0 2px var(--red)}}
/* M1 — LED perimeter advertising ribbon (the signature device) */
.diag{
  height:5px;border:0;opacity:1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    linear-gradient(90deg,var(--green),var(--blue) 35%,var(--gold) 70%,var(--green));
  background-size:3px 100%, 220% 100%;
  filter:saturate(1.3) brightness(1.1);
  box-shadow:0 0 14px rgba(31,229,136,.45), 0 0 22px rgba(63,180,255,.22);
  animation:led 9s linear infinite;
}
@keyframes led{ to{ background-position:3px 0, -220% 0 } }

/* ---------- screens ---------- */
.screen{display:none;max-width:1180px;margin:0 auto;padding:26px 20px 80px}
.screen.on{display:block;animation:rise .45s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kicker{font-family:var(--cond);text-transform:uppercase;letter-spacing:.26em;color:var(--green);font-weight:700;font-size:13px}
.h-big{font-family:var(--display);font-weight:900;font-size:clamp(30px,5.4vw,56px);line-height:.98;letter-spacing:.01em;text-transform:uppercase;margin:8px 0 6px}
.h-big .thin{color:var(--dim);font-family:var(--cond);font-weight:500;letter-spacing:.02em}
.sub{color:var(--dim);max-width:640px;line-height:1.55}

/* global broadcast focus ring (keyboard nav) */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ob:focus-visible,.tab:focus-visible,.tac-card:focus-visible,.tchip:focus-visible,.mcard:focus-visible,
.fut-row:focus-visible,.ftab:focus-visible,.prop-ob:focus-visible,.pz:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* ---------- load orchestration: "coming on air" ---------- */
@keyframes topdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ledwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- reduced motion: rest every decorative/looping animation ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
  .diag,.topbar::after,.mcard::after,.scoreboard::before,.scoreboard.goal,.sb-score span.bump,
  .topbar,.gcard,.hl,.modal,.tabpane.on,.ev,.set-row,.screen.on{animation:none}
  .diag,.topbar::after,.mcard::after,.scoreboard::before{background-position:0 0,0 0}
  .troph{animation:none;transform:none}
  .champ-name{animation:none;background-position:56% 0}
  .live-dot::before{animation:none}
}

/* ---------- team select ---------- */
.pick-tools{display:flex;gap:12px;align-items:center;margin:24px 0 14px;flex-wrap:wrap}
.search{
  flex:1;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;color:var(--txt);font-size:15px;font-family:var(--body);outline:none;transition:border .2s;
}
.search:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,229,136,.25)}
.resume-chip{
  background:linear-gradient(135deg,rgba(255,194,74,.16),rgba(255,194,74,.05));border:1px solid rgba(255,194,74,.4);
  color:var(--gold);border-radius:10px;padding:11px 16px;font-family:var(--cond);font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;display:none;
}
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.gcard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 13px 9px;
  opacity:0;animation:rise .5s forwards;
}
.gcard h3{
  font-family:var(--cond);letter-spacing:.2em;font-size:14px;color:var(--faint);text-transform:uppercase;
  display:flex;justify-content:space-between;margin-bottom:9px;
}
.tchip{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:9px;text-align:left;
  transition:background .15s,transform .15s;
}
.tchip:hover{background:var(--raise);transform:translateX(3px)}
.tchip .nm{font-weight:600;font-size:15px}
.tchip .rt{margin-left:auto;font-family:var(--cond);font-weight:700;color:var(--faint);font-size:14px}
.flag{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#1c2940;box-shadow:0 0 0 2px rgba(255,255,255,.07)}
.flag-fb{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#1c2940;font-family:var(--cond);font-size:10px;font-weight:700;color:var(--dim);box-shadow:0 0 0 2px rgba(255,255,255,.07)}
.hidden{display:none!important}

/* ---------- language selector + Google translate chrome suppression ---------- */
.lang-pick{display:inline-flex;align-items:center;gap:6px}
.lang-pick .globe{font-size:14px;line-height:1;opacity:.8}
.lang-sel{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:13px;
  color:var(--dim);background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  padding:6px 26px 6px 10px;cursor:pointer;outline:none;transition:color .15s,border-color .15s;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.lang-sel:hover{color:var(--txt);border-color:var(--green)}
.lang-sel option{background:var(--panel2);color:var(--txt)}
/* keep Google's gadget in the DOM but invisible, and kill its banner/skin */
#google_translate_element{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;overflow:hidden}
/* the banner/tooltip are appended to <body> outside our off-screen container, so hide them directly */
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,iframe.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important;position:static!important}
.goog-text-highlight{background:none!important;box-shadow:none!important;color:inherit!important}

/* ---------- confirm panel ---------- */
.confirm{
  position:fixed;inset:auto 0 0 0;z-index:60;transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.9,.25,1);
  background:linear-gradient(180deg,var(--panel2),#0c1422);border-top:2px solid var(--green);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
}
.confirm.on{transform:none}
.confirm .inner{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.confirm .flag{width:52px;height:52px}
.confirm .flag-fb{width:52px;height:52px;font-size:15px}
.confirm .who .k{font-family:var(--cond);letter-spacing:.22em;font-size:12px;color:var(--green);text-transform:uppercase}
.confirm .who .n{font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase}
.confirm .who .s{color:var(--dim);font-size:13.5px}
.btn{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:10px;transition:transform .15s,box-shadow .15s,background .15s;
}
.btn:active{transform:scale(.97)}
.btn-go{background:linear-gradient(135deg,var(--green),#0fae62);color:#04130a;box-shadow:0 6px 22px rgba(31,229,136,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-go:hover{box-shadow:0 8px 34px rgba(31,229,136,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border:1px solid var(--line2);color:var(--dim)}
.btn-ghost:hover{color:var(--txt);border-color:var(--txt)}
.btn-gold{background:linear-gradient(135deg,#ffd778,var(--gold) 55%,#e09a18);color:#231600;box-shadow:0 6px 22px rgba(255,194,74,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{box-shadow:0 8px 34px rgba(255,194,74,.5),inset 0 1px 0 rgba(255,255,255,.45)}
.ml-auto{margin-left:auto}

/* ---------- hub ---------- */
.hub-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.hub-head .stage-now{margin-left:auto;text-align:right}
.stage-now .k{font-family:var(--cond);letter-spacing:.2em;color:var(--faint);font-size:12px;text-transform:uppercase}
.stage-now .v{font-family:var(--display);font-weight:900;font-size:22px;color:var(--gold);text-transform:uppercase;font-variant-numeric:tabular-nums}
.myteam-pill{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.myteam-pill .flag{width:30px;height:30px}.myteam-pill .flag-fb{width:30px;height:30px;font-size:11px}
.myteam-pill b{font-family:var(--cond);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.form-dots{display:flex;gap:4px}
.fdot{width:9px;height:9px;border-radius:2px;background:var(--raise)}
.fdot.w{background:var(--green)}.fdot.d{background:var(--dim)}.fdot.l{background:var(--red)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:15px;color:var(--dim);
  padding:11px 18px;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,background .15s,box-shadow .15s;
}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--green);border-color:var(--green);background:linear-gradient(180deg,transparent,rgba(31,229,136,.06));box-shadow:inset 0 -3px 8px rgba(31,229,136,.25)}
.tabpane{display:none}.tabpane.on{display:block;animation:rise .35s}

.next-strip{
  position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:14px;padding:16px 18px 16px 22px;margin-bottom:20px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(214,232,255,.04);
}
/* M6 — lower-third broadcast caption accent */
.next-strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--green),var(--gold));box-shadow:0 0 14px rgba(31,229,136,.45)}
.next-strip .vs{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;font-size:21px;text-transform:uppercase}
.next-strip .vs .at{color:var(--faint);font-family:var(--cond);font-weight:600;font-size:15px}
.next-strip .ctx{color:var(--dim);font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.next-strip .flag{width:34px;height:34px}.next-strip .flag-fb{width:34px;height:34px;font-size:12px}

.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.gtable{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(214,232,255,.04)}
.gtable.mine{border-color:rgba(31,229,136,.45);box-shadow:0 0 0 1px rgba(31,229,136,.25),0 8px 26px rgba(0,0,0,.4)}
.gtable header{
  display:flex;justify-content:space-between;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--line);
  font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--dim);
}
.gtable table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.gtable td,.gtable th{padding:7px 8px;text-align:center;border-top:1px solid var(--line)}
.gtable th{font-family:var(--cond);color:var(--faint);font-weight:600;font-size:12.5px;letter-spacing:.08em}
.gtable td:first-child,.gtable th:first-child{text-align:left;padding-left:14px}
.gtable .tn{display:flex;align-items:center;gap:8px;font-weight:600}
.gtable .tn .flag{width:20px;height:20px}.gtable .tn .flag-fb{width:20px;height:20px;font-size:8px}
/* qualified = clean left-edge light bar + a whisper of tint (not a heavy fill) */
.gtable tr.q1 td{background:rgba(31,229,136,.045)}
.gtable tr.q1 td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.gtable tr.q3 td{background:rgba(255,194,74,.035)}
.gtable tr.q3 td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.gtable tr.me td{background:rgba(31,229,136,.08)}
.gtable tr.me td:first-child{box-shadow:inset 4px 0 0 var(--green)}
.gtable .pts{font-family:var(--cond);font-weight:800;font-size:16px;color:var(--txt)}

.fixrow{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:14.5px;
}
.fixrow .h{text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:8px;font-weight:600}
.fixrow .a{display:flex;align-items:center;gap:8px;font-weight:600}
.fixrow .flag{width:20px;height:20px}.fixrow .flag-fb{width:20px;height:20px;font-size:8px}
.fixrow .sc{
  font-family:var(--cond);font-weight:800;font-size:17px;background:var(--raise);border-radius:7px;padding:2px 11px;min-width:62px;text-align:center;
}
.fixrow .sc.tbd{color:var(--faint);font-weight:600}
.fixrow.upset .sc{color:var(--gold);box-shadow:0 0 0 1px rgba(255,194,74,.45)}
.fixrow.mine{background:rgba(31,229,136,.06)}
.pensc{font-size:11px;color:var(--dim);display:block}

/* headlines */
.headlines{display:flex;flex-direction:column;gap:10px}
.hl{
  background:linear-gradient(90deg,var(--panel2),var(--panel));border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:10px;padding:12px 16px;
  opacity:0;animation:rise .4s forwards;box-shadow:inset 0 1px 0 rgba(214,232,255,.04);
}
.hl.shock{border-left-color:var(--gold)}
.hl.big{border-left-color:var(--red)}
.hl .tag{font-family:var(--cond);font-size:12px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}
.hl .txt{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.01em;margin-top:3px;text-transform:uppercase;line-height:1.04}
.hl .sub2{color:var(--dim);font-size:13.5px;margin-top:3px}

/* bracket */
.bracket-wrap{overflow-x:auto;padding-bottom:8px}
.bracket{display:flex;gap:22px;min-width:1050px}
.bcol{display:flex;flex-direction:column;justify-content:space-around;gap:10px;flex:1}
.bcol>.blab{font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-size:12.5px;text-align:center}
.bm{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px;transition:border-color .15s,box-shadow .15s}
.bm:hover{border-color:var(--line2)}
.bm.mine{border-color:rgba(31,229,136,.5);box-shadow:0 0 0 1px rgba(31,229,136,.18)}
.bm .brow{display:flex;align-items:center;gap:8px;padding:6px 10px}
.bm .brow+.brow{border-top:1px solid var(--line)}
.bm .brow .flag{width:18px;height:18px}.bm .brow .flag-fb{width:18px;height:18px;font-size:7px}
.bm .brow b{font-weight:600}
.bm .brow .bs{margin-left:auto;font-family:var(--cond);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.bm .brow.wn b{color:var(--txt)} .bm .brow.ls{opacity:.45}
.bm .bvenue{border-top:1px solid var(--line);padding:4px 10px;font-family:var(--cond);font-size:10px;letter-spacing:.05em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm .brow .pn{font-size:10.5px;color:var(--gold)}

/* boot table */
.boot{width:100%;max-width:560px;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.boot td,.boot th{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.boot th{font-family:var(--cond);color:var(--faint);letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.boot td:last-child,.boot th:last-child{text-align:right}
.boot .g{font-family:var(--cond);font-weight:800;font-size:18px;color:var(--green)}
.boot .me-row{background:rgba(31,229,136,.07);box-shadow:inset 3px 0 0 var(--green)}

/* ---------- match center ---------- */
.mc-stage{max-width:860px;margin:0 auto}
.scoreboard{
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(31,229,136,.07), transparent 60%),
    linear-gradient(180deg,#101d31,#0a1322);
  border:1px solid var(--line2);border-radius:18px;
  padding:26px 26px 18px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(214,232,255,.06), 0 18px 44px rgba(0,0,0,.5);
}
/* M1 — LED perimeter board across the top edge of the scorebug */
.scoreboard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,var(--green),var(--blue) 35%,var(--gold) 70%,var(--green));
  background-size:3px 100%,220% 100%;
  filter:saturate(1.3) brightness(1.1);box-shadow:0 0 16px rgba(31,229,136,.5);
  animation:led 9s linear infinite}
/* M4 — chalk pitch-line corner (penalty arc) */
.scoreboard::after{content:"";position:absolute;left:-40px;bottom:-40px;width:160px;height:160px;
  border:2px solid rgba(255,255,255,.08);border-radius:50%;
  -webkit-mask:linear-gradient(45deg,#000 40%,transparent 41%);mask:linear-gradient(45deg,#000 40%,transparent 41%);
  pointer-events:none}
.scoreboard.goal{animation:sbBloom .6s ease-out}
@keyframes sbBloom{40%{box-shadow:inset 0 1px 0 rgba(214,232,255,.06), 0 0 60px rgba(31,229,136,.4), 0 18px 44px rgba(0,0,0,.5)}}
.sb-ctx{display:flex;justify-content:space-between;font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--dim);margin-bottom:14px;position:relative}
.sb-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;position:relative}
.sb-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sb-team .flag{width:64px;height:64px;box-shadow:0 0 0 2px var(--line2),0 0 14px rgba(63,180,255,.25)}.sb-team .flag-fb{width:64px;height:64px;font-size:18px}
.sb-team .nm{font-family:var(--display);font-weight:900;font-size:clamp(16px,2.6vw,24px);letter-spacing:.01em;text-transform:uppercase;line-height:.98}
.sb-team .tac{font-family:var(--cond);font-size:12.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.sb-team .sb-red{display:none;align-items:center;gap:5px;font-family:var(--cond);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffd0d8;background:rgba(255,59,87,.16);border:1px solid rgba(255,59,87,.5);border-radius:999px;padding:2px 9px}
.sb-team .sb-red.on{display:inline-flex;animation:rise .3s}
.sb-red .rc{display:inline-block;width:9px;height:13px;border-radius:2px;background:var(--red);box-shadow:0 0 7px rgba(255,59,87,.7)}
/* recessed LED score capsule with goal-net mesh (M5) */
.sb-score{
  font-family:var(--display);font-weight:900;font-size:clamp(44px,8vw,76px);
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'lnum' 1;
  padding:4px 18px;border-radius:14px;background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),
    var(--raise);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6),inset 0 0 0 1px var(--line);
}
.sb-score .dash{color:var(--dim);font-size:.55em}
.sb-score span{min-width:1.1em;text-align:center;transition:transform .2s}
.sb-score span.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.35);color:var(--green);text-shadow:0 0 18px rgba(31,229,136,.7)}}
.sb-clock{
  text-align:center;font-family:var(--cond);font-weight:800;font-size:20px;color:var(--gold);margin-top:8px;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.momentum{margin:16px auto 4px;max-width:520px;position:relative}
.momentum .lab{display:flex;justify-content:space-between;font-family:var(--cond);font-size:11.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin-bottom:5px}
.mo-bar{height:10px;border-radius:99px;background:var(--raise);overflow:hidden;display:flex;box-shadow:inset 0 1px 4px rgba(0,0,0,.5)}
.mo-bar .home{background:linear-gradient(90deg,var(--green-dk),var(--green));transition:width .8s cubic-bezier(.3,.8,.3,1)}
.mo-bar .away{background:linear-gradient(90deg,#1c5e8f,var(--blue));flex:1;transition:width .8s}

.feed{margin-top:18px;display:flex;flex-direction:column-reverse;gap:8px;min-height:240px}
.ev{
  display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;animation:evin .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes evin{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.ev .min{font-family:var(--cond);font-weight:800;color:var(--faint);min-width:38px;font-size:15px;font-variant-numeric:tabular-nums}
.ev .ico{font-size:16px;line-height:1.3;width:22px;text-align:center;font-family:var(--cond);font-weight:800}
.ev.goal{border-color:rgba(31,229,136,.5);border-left:3px solid var(--green);background:linear-gradient(90deg,rgba(31,229,136,.12),var(--panel))}
.ev.goal .ico{color:var(--green);text-shadow:0 0 10px rgba(31,229,136,.5)}
.ev.card .ico{color:var(--gold)} .ev.red .ico{color:var(--red)}
.ev.drama{border-color:rgba(255,194,74,.4);border-left:3px solid var(--gold)}
.ev .bd{font-size:14.5px;line-height:1.45}
.ev .bd b{font-weight:700}
.mc-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* tactic modal + shootout */
.modal-veil{position:fixed;inset:0;background:rgba(4,7,14,.82);backdrop-filter:blur(7px);z-index:80;display:none;place-items:center;padding:20px}
.modal-veil.on{display:grid}
/* LED ribbon (M1) pinned across the top edge of every modal */
.modal{background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px) top/100% 5px no-repeat,
    linear-gradient(90deg,var(--green),var(--blue) 35%,var(--gold) 70%,var(--green)) top/100% 5px no-repeat,
    var(--panel2);
  border:1px solid var(--line2);border-radius:18px;max-width:620px;width:100%;padding:26px;animation:rise .35s;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(214,232,255,.05)}
/* settlement: cap the card and let ONLY the bet list scroll, so the Continue button stays in view
   even with a dozen+ tickets (fixes mobile being unable to scroll past the results) */
#setVeil .modal{display:flex;flex-direction:column;overflow:hidden}
#setVeil #setRows{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal h3{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;margin-bottom:4px}
.modal .ms{color:var(--dim);font-size:14px;margin-bottom:18px;line-height:1.5}
.tac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tac-card{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;transition:all .15s;background:var(--panel)}
.tac-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(31,229,136,.3),0 8px 22px rgba(0,0,0,.4)}
.tac-card .t{font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.tac-card .d{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.tac-card .r{font-size:11px;color:var(--gold);margin-top:6px;font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
/* view-squad modal */
.sq-group{margin-top:14px}
.sq-h{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:6px}
.sq-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}
.sq-row:last-child{border-bottom:none}
.sq-n{font-family:var(--cond);font-weight:700;font-size:15.5px;letter-spacing:.02em}
.sq-tag{margin-left:auto;font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line2);border-radius:999px;padding:2px 9px}

/* the shoot-out target = a goal mouth: net mesh (M5) + a crossbar across the top */
.pen-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:10px;border-top:3px solid rgba(238,244,251,.5);border-radius:2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 11px)}
.pz{border:1px dashed var(--line2);border-radius:12px;padding:20px 10px;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:15px;transition:all .15s;background:rgba(31,229,136,.03)}
.pz:hover{background:rgba(31,229,136,.14);border-color:var(--green)}
.pen-track{display:flex;gap:8px;justify-content:center;margin:14px 0}
.pp{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:13px;font-weight:800;font-family:var(--cond)}
.pp.sc{background:var(--green);border-color:var(--green);color:#04130a}
.pp.ms{background:var(--red);border-color:var(--red);color:#fff}
.pen-msg{text-align:center;font-family:var(--display);font-weight:800;font-size:19px;min-height:28px;text-transform:uppercase}

/* champion */
#scrChamp{text-align:center;position:relative;isolation:isolate}
/* gold floodlight bloom + ghosted goal-net mesh behind the trophy lift */
#scrChamp::before{content:"";position:absolute;left:50%;top:30px;width:min(720px,92vw);height:440px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,194,74,.18), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px);
  -webkit-mask:radial-gradient(circle at 50% 40%, #000 28%, transparent 72%);mask:radial-gradient(circle at 50% 40%, #000 28%, transparent 72%)}
.troph{font-size:90px;margin:6px 0 4px;animation:troph 1.6s ease infinite alternate;filter:drop-shadow(0 0 24px rgba(255,194,74,.45))}
@keyframes troph{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-12px) rotate(3deg)}}
/* champion hero: the winning nation's flag in a glowing gold ring + a "World Champions" crown */
.ch-flag{margin:18px auto 0;width:max-content;animation:champPop .6s cubic-bezier(.2,1.3,.4,1) both}
.ch-flag .flag,.ch-flag .flag-fb{width:110px;height:110px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px var(--gold),0 0 0 7px rgba(255,194,74,.25),0 0 46px rgba(255,194,74,.55);background:#1c2940}
.ch-flag .flag-fb{display:grid;place-items:center;font-family:var(--cond);font-weight:800;font-size:30px;color:var(--gold)}
@keyframes champPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ch-crown{margin:4px auto 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.ch-crown .cc-lbl{font-family:var(--cond);font-weight:800;letter-spacing:.34em;text-transform:uppercase;font-size:14px;
  color:var(--gold);text-shadow:0 0 18px rgba(255,194,74,.5)}
.ch-crown .cc-team{font-family:var(--display);font-weight:900;font-size:clamp(26px,5vw,46px);text-transform:uppercase;line-height:.98;
  background:linear-gradient(120deg,#fff 0%,#ffe6ad 30%,var(--gold) 56%,#b9781a 78%,#fff 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 1.1s ease-out 1 both}
.champ-name{font-family:var(--display);font-weight:900;font-size:clamp(40px,8vw,84px);letter-spacing:.01em;text-transform:uppercase;line-height:.96;
  background:linear-gradient(120deg,#fff 0%,#ffe6ad 30%,var(--gold) 56%,#b9781a 78%,#fff 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 1.1s ease-out 1 both}
@keyframes foil{from{background-position:200% 0}to{background-position:0 0}}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:860px;margin:30px auto}
.aw{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-top:1px solid rgba(255,194,74,.3);border-radius:14px;padding:18px;box-shadow:inset 0 1px 0 rgba(214,232,255,.04)}
.aw .k{font-family:var(--cond);letter-spacing:.2em;font-size:12px;color:var(--gold);text-transform:uppercase}
.aw .v{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.01em;margin-top:6px;text-transform:uppercase}
.aw .s{color:var(--dim);font-size:13px;margin-top:3px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

/* ---------- mode select ---------- */
.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:24px 0 8px}
.mcard{
  position:relative;background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px solid var(--line2);
  border-radius:16px;padding:20px;overflow:hidden;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.mcard:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(214,232,255,.05)}
.mcard:hover::after{filter:saturate(1.4) brightness(1.5)}
.mcard.bet:hover{border-color:var(--gold)}
/* M1 LED ribbon along the bottom edge of each channel-preview card */
.mcard::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,var(--green),var(--blue) 45%,var(--green));
  background-size:3px 100%,220% 100%;
  filter:saturate(1.3) brightness(1.1);box-shadow:0 0 12px rgba(31,229,136,.4);
  animation:led 9s linear infinite}
.mcard.bet::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--gold),#fff6df 50%,var(--gold));background-size:3px 100%,220% 100%;box-shadow:0 0 12px rgba(255,194,74,.4);animation:led 9s linear infinite}
.mcard.fan:hover{border-color:var(--blue)}
.mcard.fan::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--blue),#cdebff 50%,var(--blue));background-size:3px 100%,220% 100%;box-shadow:0 0 12px rgba(63,180,255,.4);animation:led 9s linear infinite}
.mcard .mk{font-family:var(--cond);letter-spacing:.24em;font-size:12px;text-transform:uppercase;color:var(--green)}
.mcard.bet .mk{color:var(--gold)}
.mcard.fan .mk{color:var(--blue)}
.mcard .mt{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;margin:6px 0 6px}
.mcard .md2{color:var(--dim);font-size:13.5px;line-height:1.55}
.mcard .mcta{margin-top:12px;font-family:var(--cond);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--txt)}
/* home screen secondary actions (resume / hall of fame) */
.home-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 4px}

/* ---------- sportsbook ---------- */
.book-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
@media (max-width:900px){.book-grid{grid-template-columns:1fr}}
.bfx{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.bfx .bf-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.bfx .bf-top .ctx{font-family:var(--cond);font-size:12.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.bfx .bf-top .pub{font-family:var(--cond);font-size:12px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.bfx .bf-top .pub b{color:var(--blue)}
.bfx .teams{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:17px;text-transform:uppercase}
.bfx .teams .at{color:var(--faint);font-family:var(--cond);font-weight:600;font-size:13px}
.bfx .teams .flag{width:26px;height:26px}.bfx .teams .flag-fb{width:26px;height:26px;font-size:9px}
.watch-btn{margin-left:auto;font-size:17px;opacity:.45;transition:all .15s;padding:4px 8px;border-radius:8px}
.watch-btn:hover{opacity:1}
.watch-btn.on{opacity:1;background:rgba(255,59,87,.15);box-shadow:0 0 0 1px rgba(255,59,87,.5)}
.mkts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.mkt .ml{font-family:var(--cond);font-size:11.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:5px}
.obs{display:flex;gap:6px}
.ob{flex:1;background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:7px 4px;text-align:center;transition:all .13s}
.ob:hover{border-color:var(--green)}
.ob.sel{background:rgba(31,229,136,.16);border-color:var(--green);box-shadow:0 0 12px rgba(31,229,136,.22)}
.ob .ok{display:block;font-family:var(--cond);font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.ob .ov{display:block;font-family:var(--cond);font-weight:800;font-size:16px;color:var(--gold);font-variant-numeric:tabular-nums}
.upset-tag{font-family:var(--cond);font-size:11px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,194,74,.4);border-radius:5px;padding:1px 7px}

.slip{position:sticky;top:74px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:16px;padding:16px;font-variant-numeric:tabular-nums;box-shadow:inset 0 2px 0 rgba(255,194,74,.5),inset 0 3px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.4)}
.slip h4{font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--dim);display:flex;justify-content:space-between;margin-bottom:10px}
.slip .empty{color:var(--faint);font-size:13.5px;padding:14px 0;text-align:center}
.parlay-toggle{display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;margin-bottom:12px}
.parlay-toggle button{flex:1;padding:8px;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--dim)}
.parlay-toggle button.on{background:var(--green);color:#04130a}
.sliprow{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:var(--panel)}
.sliprow .sl-top{display:flex;align-items:center;gap:8px;font-size:13px}
.sliprow .sl-top b{font-weight:700}
.sliprow .sl-top .x{margin-left:auto;color:var(--faint);font-size:15px;padding:0 4px}
.sliprow .sl-top .x:hover{color:var(--red)}
.sliprow .sl-odds{font-family:var(--cond);font-weight:800;color:var(--gold)}
.sliprow .sl-bot{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.stake{width:84px;background:var(--bg2);border:1px solid var(--line2);border-radius:7px;color:var(--txt);padding:6px 8px;font-family:var(--cond);font-weight:700;font-size:15px}
.qs{font-family:var(--cond);font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-variant-numeric:tabular-nums}
.qs:hover{color:var(--green);border-color:var(--green)}
.qs-add{color:var(--green)}
.qs-sub{color:var(--red)}
.qs-sub:hover{color:#fff;border-color:var(--red)}
.steps{display:contents}  /* stepper buttons flow as flex children of .sl-bot */
.qs:disabled{opacity:.3;pointer-events:none}                       /* unaffordable amount, greyed in place */
.qs-allin{color:var(--gold);border-color:rgba(255,194,74,.45);font-weight:800;letter-spacing:.05em}
.qs-allin:hover{color:#231600;background:var(--gold);border-color:var(--gold)}
.boost-b{font-family:var(--cond);font-size:11.5px;letter-spacing:.06em;color:var(--gold);border:1px dashed rgba(255,194,74,.5);border-radius:6px;padding:4px 8px;margin-left:auto}
.boost-b.used{opacity:.35;pointer-events:none}
.boost-b.on{background:rgba(255,194,74,.18);border-style:solid}
.slip .tot{display:flex;justify-content:space-between;font-family:var(--cond);font-size:14px;color:var(--dim);margin:10px 0 4px;letter-spacing:.06em;text-transform:uppercase}
.slip .tot b{color:var(--txt)}
.slip .heat{font-family:var(--cond);font-size:12.5px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:8px}
.slip .err{color:var(--red);font-size:12.5px;text-align:center;min-height:16px;margin-top:6px}

/* settlement */
.set-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px;font-size:13.5px;opacity:0;animation:rise .4s forwards}
.set-row .res{margin-left:auto;font-family:var(--cond);font-weight:800;font-size:15px;white-space:nowrap}
.set-row.won{border-color:rgba(31,229,136,.45);background:rgba(31,229,136,.06)}
.set-row.won .res{color:var(--green)}
.set-row.lost .res{color:var(--red)}
/* per-leg hit/miss breakdown (parlays + singles) */
.set-row .parlay-head{font-family:var(--cond);letter-spacing:.04em;margin-bottom:6px}
.set-row .legs{display:flex;flex-direction:column;gap:5px}
.set-row .leg{display:flex;align-items:flex-start;gap:7px;line-height:1.32}
.set-row .leg-mk{flex:0 0 15px;text-align:center;font-weight:800}
.set-row .leg.hit .leg-mk{color:var(--green)}
.set-row .leg.miss .leg-mk{color:var(--red)}
.set-row .leg.miss .leg-pick{opacity:.72}
.set-row .leg-ctx{color:var(--faint)}
.set-net{font-family:var(--display);font-weight:900;font-size:26px;text-align:center;margin:14px 0 4px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.set-net.up{color:var(--green)} .set-net.down{color:var(--red)}
.spark{width:150px;height:34px}
.spark polyline{fill:none;stroke:var(--green);stroke-width:2}

.foot-note{margin-top:36px;color:var(--faint);font-size:12.5px;text-align:center}
@media (max-width:640px){
  .sb-team .flag{width:44px;height:44px}
  .bracket{min-width:900px}
}


/* ---------- player props on the board ---------- */
.props{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.props summary{font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--dim);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.props summary::-webkit-details-marker{display:none}
.props summary::before{content:"▸";color:var(--faint);transition:transform .15s}
.props[open] summary::before{transform:rotate(90deg)}
.props summary span{color:var(--faint);font-size:11px}
.prop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:6px;margin-top:9px}
.prop-ob{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:7px 10px;text-align:left;transition:all .13s}
.prop-ob:hover{border-color:var(--green)}
.prop-ob.sel{background:rgba(31,229,136,.16);border-color:var(--green);box-shadow:0 0 12px rgba(31,229,136,.22)}
.prop-ob .ok{font-family:var(--cond);font-size:12.5px;color:var(--txt);letter-spacing:.02em}
.prop-ob .ov{font-family:var(--cond);font-weight:800;font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- futures desk / hall-of-fame tabs ---------- */
.ftabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px}
.ftab{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:13.5px;color:var(--dim);border:1px solid var(--line2);border-radius:9px;padding:8px 14px;white-space:nowrap;transition:all .15s}
.ftab:hover{color:var(--txt);border-color:var(--txt)}
.ftab.on{background:var(--gold);color:#231600;border-color:var(--gold)}
.fut-list{display:flex;flex-direction:column;gap:7px}
.fut-row{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 14px;text-align:left;transition:all .14s;font-variant-numeric:tabular-nums}
.fut-row:hover{background:var(--raise);border-color:var(--gold);transform:translateX(2px)}
.fut-row.sel{background:rgba(255,194,74,.12);border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,194,74,.45)}
.fut-row .flag{width:28px;height:28px}.fut-row .flag-fb{width:28px;height:28px;font-size:10px}
.fr-nm{font-weight:600;font-size:15.5px;display:flex;flex-direction:column;line-height:1.2}
.fr-sub{font-family:var(--cond);font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.fr-od{margin-left:auto;font-family:var(--cond);font-weight:800;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums}
.sl-pay{margin-left:auto;font-family:var(--cond);font-weight:700;color:var(--green);font-size:13px}

button.btn:disabled{opacity:.4;pointer-events:none}

/* ---------- hall of fame ---------- */
.lb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 16px 14px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(214,232,251,.04),0 8px 26px rgba(0,0,0,.3)}
.lb-h{font-family:var(--cond);letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--dim);margin:12px 4px 4px}
.lb-load{color:var(--faint);padding:14px;text-align:center;font-size:14px}
.lb-card .boot{max-width:none}
.lb-save{border-color:rgba(255,194,74,.45)!important}
.lb-save-row{display:flex;gap:8px;margin:8px 0 4px}
.lb-save-row .search{flex:1;min-width:0}
.ht-score{font-family:var(--display);font-weight:900;font-size:24px;text-align:center;color:var(--gold);margin:2px 0 8px;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* ===== MOBILE RESPONSIVE LAYER (theme-preserving; desktop untouched) ===== */
/* ============================================================
   RESPONSIVE LAYER (merged audit findings) — desktop untouched
   Breakpoints: existing 900px / 640px reused; new 760px / 430px.
   ============================================================ */

/* ---------- 640px: extend existing finding ---------- */
@media (max-width:640px){
  /* match existing .sb-team .flag shrink for the text fallback flag too */
  .sb-team .flag-fb{width:44px;height:44px;font-size:14px}
}

/* ---------- 900px: futures/sportsbook slip un-stick once stacked ---------- */
@media (max-width:900px){
  /* .book-grid already collapses to 1fr at 900px; kill sticky on every slip
     (sportsbook + futures #futSlip) so it never pins awkwardly when stacked */
  .slip{position:static;top:auto}
  /* put the bet/futures slip (the "place bet" area) ABOVE the board on mobile */
  .book-grid>.slip{order:-1}
}

/* return-to-top FAB: jumps back to the slip/place-bet area in one tap (mobile only) */
.to-top{position:fixed;right:14px;bottom:16px;z-index:75;display:none;align-items:center;gap:6px;
  background:var(--gold);color:#16100a;border:none;border-radius:999px;padding:11px 17px;cursor:pointer;
  font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.to-top:active{transform:translateY(1px)}
@media (max-width:900px){.to-top.show{display:inline-flex}}

/* boost cooldown note in the bet slip */
.boost-note{font-family:var(--cond);font-size:12px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;
  text-align:center;border:1px dashed rgba(255,194,74,.4);border-radius:7px;padding:5px 8px;margin-bottom:8px;opacity:.85}

/* futures hub tab — live tickets list */
.fut-tickets{display:flex;flex-direction:column}
.fut-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;font-family:var(--cond);
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.fut-empty{color:var(--faint);font-size:14px;padding:20px;text-align:center}
.fut-tickets .set-row .ft-sub{font-family:var(--body);font-size:12px;color:var(--faint);
  text-transform:none;letter-spacing:0;margin-top:3px}
.fut-tickets .set-row .res{text-align:right;line-height:1.25}
.fut-tickets .set-row .ft-pot{font-size:12px;color:var(--dim);font-weight:600}
.fut-tickets .set-row:not(.won):not(.lost) .res{color:var(--gold)}

/* ========================================================== */
/* ---------- 760px: tablets / large phones ---------- */
/* ========================================================== */
@media (max-width:760px){
  /* topbar meta de-pressurise */
  .topbar .meta{gap:11px;font-size:12.5px;letter-spacing:.1em}

  /* hub grids + matchup strip */
  .cols{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
  .next-strip .vs{font-size:18px}
  .next-strip .flag,.next-strip .flag-fb{width:28px;height:28px}

  /* team-select group grids: keep tidy 2-up, no cramping */
  .groups-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

  /* sportsbook stack spacing + static slip with tighter padding */
  .book-grid{gap:12px}
  .slip{padding:13px;border-radius:14px}
}

/* ========================================================== */
/* ---------- 430px: phones (<=~390px safe) ---------- */
/* ========================================================== */
@media (max-width:430px){

  /* ----- topbar + brand + quit ----- */
  .topbar{gap:8px;padding:8px 12px;flex-wrap:wrap}
  .brand h1{font-size:15px;letter-spacing:.03em}
  .brand .cube{width:26px;height:26px;font-size:12px}
  /* meta drops to its own full-width line below the brand row */
  .topbar .meta{
    margin-left:0;order:3;width:100%;
    gap:9px;font-size:11px;letter-spacing:.06em;flex-wrap:wrap;
  }
  /* quit stays on the brand line, pushed to the right edge */
  .quit-btn{margin-left:auto;font-size:11px;letter-spacing:.06em;padding:9px 11px}

  /* ----- screens / global side padding ----- */
  .screen{padding:18px 14px 72px}

  /* ----- team-select hero ----- */
  .kicker{letter-spacing:.16em;font-size:12px}
  .h-big{font-size:clamp(24px,7.6vw,30px)}

  /* ----- mode cards ----- */
  .mode-cards{grid-template-columns:1fr;gap:12px}
  .mcard{padding:16px}
  .mcard .mt{font-size:21px}

  /* ----- pick tools / chips ----- */
  .pick-tools{gap:8px}
  .pick-tools .search{min-width:0;flex:1 1 100%}
  .resume-chip{flex:1 1 auto;text-align:center;padding:10px 12px;font-size:14px;letter-spacing:.04em}

  /* ----- group grids collapse to one column ----- */
  .groups-grid{grid-template-columns:1fr;gap:12px}

  /* ----- confirm bar: stacked full-width buttons ----- */
  .confirm .inner{gap:10px;padding:14px}
  .confirm .inner .btn{flex:1 1 100%;padding:12px 16px;font-size:14px;letter-spacing:.08em;text-align:center}
  .confirm .inner .btn.ml-auto{margin-left:0;order:3}
  .confirm .inner .btn-ghost{order:4}
  .confirm .who .n{font-size:20px}
  .confirm .flag,.confirm .flag-fb{width:40px;height:40px}
  .confirm .flag-fb{font-size:12px}

  /* ----- hub header ----- */
  .hub-head{gap:10px;margin-bottom:14px}
  .hub-head .stage-now{margin-left:0;text-align:left}
  .stage-now .v{font-size:20px}
  .myteam-pill{flex-wrap:wrap;padding:7px 12px;gap:8px}
  .myteam-pill b{font-size:15px;letter-spacing:.04em}
  .myteam-pill .flag,.myteam-pill .flag-fb{width:26px;height:26px}

  /* ----- tabs: scroll cleanly, no gutter ----- */
  .tabs{gap:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:10px 12px;font-size:13px;letter-spacing:.08em}

  /* ----- next match strip: stacked full-width buttons ----- */
  .next-strip{gap:10px;padding:14px;flex-direction:column;align-items:stretch}
  .next-strip .btn,.next-strip .btn.ml-auto{margin-left:0;width:100%;text-align:center;padding:12px 16px;font-size:14px}
  .next-strip .vs{font-size:18px;gap:8px;flex-wrap:wrap}

  /* ----- group standings columns + fixtures ----- */
  .cols{grid-template-columns:1fr;gap:10px}
  .gtable header{padding:9px 12px;font-size:11.5px;letter-spacing:.1em;gap:8px}
  .fixrow{gap:6px;padding:8px 10px;font-size:13px}
  .fixrow .sc{min-width:50px;font-size:15px;padding:2px 7px}
  .fixrow .flag,.fixrow .flag-fb{width:16px;height:16px}
  .fixrow .h,.fixrow .a{min-width:0;overflow:hidden}
  .fixrow .h span,.fixrow .a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ----- bracket: shorter horizontal scroll (wrapper handles overflow) ----- */
  .bracket{min-width:760px;gap:14px}
  .bm{font-size:12.5px}
  .bm .brow{padding:5px 8px;gap:6px}
  .bm .brow .bs{font-size:14px}

  /* ----- newsroom headlines ----- */
  .hl{padding:10px 13px}
  .hl .txt{font-size:15px;overflow-wrap:anywhere}
  .hl .sub2{font-size:12.5px}

  /* ----- golden boot + hall-of-fame tables: scroll, never widen page ----- */
  .boot{display:block;max-width:100%;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13.5px}
  .boot td,.boot th{padding:8px 7px}
  .boot th{font-size:11.5px;letter-spacing:.06em}
  .boot .g{font-size:16px}
  .lb-card{padding:4px 10px 12px}
  .lb-card .boot{white-space:nowrap}

  /* ----- match center: scoreboard ----- */
  .scoreboard{padding:18px 14px 14px}
  .sb-ctx{font-size:10.5px;letter-spacing:.08em;gap:8px}
  .sb-ctx span:last-child{text-align:right;min-width:0}
  .sb-main{grid-template-columns:1fr auto 1fr;gap:6px}
  .sb-team .nm{font-size:14px;line-height:1.05;overflow-wrap:anywhere;hyphens:auto}
  .sb-score{font-size:34px;gap:8px}

  /* match center actions */
  .mc-actions{gap:8px}
  .mc-actions .btn{flex:1 1 100%;padding:12px 16px;font-size:14px;letter-spacing:.08em}

  /* ----- modals (tactic / half-time / penalty / settlement) ----- */
  .modal-veil{padding:12px}
  .modal{padding:18px 16px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .modal h3{font-size:20px}

  /* penalty shootout: wrap pucks + zones */
  .pen-track{flex-wrap:wrap;gap:6px;margin:10px 0}
  .pen-zones{gap:6px}
  .pen-zones .pz{font-size:12.5px;letter-spacing:.04em;padding:14px 6px}

  /* ----- sportsbook: fixture board ----- */
  .bfx .bf-top{gap:8px}
  .bfx .bf-top .ctx{letter-spacing:.1em;font-size:11.5px}
  .bfx .bf-top .pub{letter-spacing:.05em}
  .bfx .teams{font-size:15px;flex:1 1 100%;flex-wrap:wrap;gap:8px}
  .mkts{gap:8px;margin-top:9px}

  /* player props -> single column, label wraps inside card */
  .prop-grid{grid-template-columns:1fr}
  .prop-ob{gap:6px}
  .prop-ob .ok{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
  .prop-ob .ov{flex:0 0 auto}

  /* ----- sportsbook: bet slip ----- */
  .slip{padding:13px;border-radius:14px}
  .parlay-toggle button{letter-spacing:.06em;padding:8px 4px}
  /* slip row: stake on its own line, six steppers as a tidy 3-up grid,
     boost button full-width beneath */
  .sliprow .sl-bot{gap:6px 5px}
  .sliprow .sl-bot .stake{flex:1 1 auto;width:auto;min-width:90px}
  .sliprow .sl-bot .qs{flex:1 1 calc(33.333% - 5px);min-width:0;padding:7px 4px;text-align:center;font-size:12px}
  .sliprow .sl-bot .boost-b{margin-left:0;flex:1 1 100%;text-align:center;padding:7px 8px}
  .slip .tot{gap:10px;letter-spacing:.03em;font-size:13px}
  .slip .heat{letter-spacing:.04em;line-height:1.4}
  #lockBtn{margin-top:4px;letter-spacing:.04em}

  /* ----- futures / hall-of-fame tabs ----- */
  .ftabs{gap:5px}
  .ftab{padding:7px 11px;font-size:12.5px;letter-spacing:.06em}

  /* ----- champion / finale ----- */
  .champ-name{font-size:clamp(28px,11vw,40px);line-height:1.04;overflow-wrap:break-word;word-break:break-word}
  .ch-flag .flag,.ch-flag .flag-fb{width:84px;height:84px}
  .troph{font-size:68px}
  .awards{grid-template-columns:1fr;gap:10px;margin:20px auto}
  .aw{padding:14px}
  .aw .v{font-size:17px}

  /* settlement rows wrap so the result amount never clips */
  .set-row{flex-wrap:wrap;gap:4px 10px;padding:9px 11px;font-size:13px}
  .set-row .res{margin-left:auto;flex-shrink:0}
  .set-row>div{flex:1 1 100%;min-width:0;overflow-wrap:break-word}

  /* save-to-board row: input full width, button drops below */
  .lb-save-row{flex-wrap:wrap}
  .lb-save-row .search{flex:1 1 100%}
  .lb-save-row .btn{flex:1 1 100%;padding:11px 18px}
}

/* ===================== FANTASY MODE ===================== */
/* chosen-XI tray: a row of position groups, each with filled/empty slots */
.xi-tray{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.xi-col{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 9px 6px;min-height:64px}
.xi-col-h{font-family:var(--cond);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;text-align:center}
.xi-slot{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:5px 8px;margin-bottom:5px;font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s}
.xi-slot:hover{border-color:var(--red)}
.xi-slot.cap{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,194,74,.4)}
.xi-slot .flag{width:18px;height:18px}.xi-slot .flag-fb{width:18px;height:18px;font-size:7px}
.xi-slot .xn{font-family:var(--cond);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.xi-slot .xc{color:var(--gold);font-weight:800}
.xi-slot.empty{color:var(--faint);font-style:italic;cursor:default;border-style:dashed}
.xi-slot.empty:hover{border-color:var(--line2)}
.draft-turn{background:linear-gradient(90deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-left:4px solid var(--blue);border-radius:10px;padding:9px 14px;margin-bottom:12px;font-family:var(--cond);font-weight:700;font-size:14px}
.draft-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.pos-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pos-tab{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;transition:all .12s}
.pos-tab.on{color:var(--blue);border-color:var(--blue);background:rgba(63,180,255,.1)}
.draft-controls .search{flex:1;min-width:160px}
.player-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;max-height:430px;overflow-y:auto;padding:2px}
.pp-row{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;transition:border-color .12s}
.pp-row:hover{border-color:var(--line2)}
.pp-row.taken{opacity:.4}.pp-row.picked{border-color:var(--green);background:rgba(31,229,136,.06)}
.pp-row .flag{width:24px;height:24px}.pp-row .flag-fb{width:24px;height:24px;font-size:9px}
.pp-meta{flex:1;min-width:0}
.pp-name{font-family:var(--cond);font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-sub{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.pp-pos{font-family:var(--cond);font-weight:800;font-size:11px;padding:1px 6px;border-radius:5px;background:var(--raise);color:var(--dim)}
.pp-price{font-family:var(--cond);font-weight:800;font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.pp-add{border:1px solid var(--green);color:var(--green);border-radius:8px;width:30px;height:30px;font-size:18px;font-weight:800;display:grid;place-items:center;flex:none}
.pp-add:hover{background:var(--green);color:#04130a}
.pp-add:disabled{opacity:.3;pointer-events:none;border-color:var(--line2);color:var(--faint)}
/* fantasy scoreboard (hub tab + final) */
.fboard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fboard-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(90deg,var(--panel2),var(--panel));border-bottom:1px solid var(--line)}
.fboard-tot{font-family:var(--display);font-weight:900;font-size:30px;color:var(--blue);line-height:1}
.fboard-lbl{font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-size:12px}
.frow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:14px}
.frow:last-child{border-bottom:none}
.frow .flag{width:22px;height:22px}.frow .flag-fb{width:22px;height:22px;font-size:8px}
.frow .fn{font-family:var(--cond);font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fcap{color:var(--gold);font-weight:800;font-size:11px;border:1px solid rgba(255,194,74,.5);border-radius:5px;padding:0 5px}
.frow .fpos{font-family:var(--cond);font-weight:800;font-size:10.5px;color:var(--faint)}
.frow .fbk{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.frow .fpts{font-family:var(--cond);font-weight:800;font-size:17px;color:var(--green);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
/* Team of the Tournament board: position-group headers + highlight the user's own picks */
.fgrp{font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-size:11px;font-weight:700;padding:8px 14px 5px;background:rgba(255,194,74,.05);border-bottom:1px solid var(--line)}
.frow.mine{background:rgba(63,180,255,.10)}
.frow .fmvp{color:var(--gold);font-size:13px;line-height:1}
.frow .fmine{color:var(--blue);font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(63,180,255,.5);border-radius:5px;padding:0 5px}
@media (max-width:640px){
  .xi-tray{grid-template-columns:1fr 1fr}
  .player-pool{grid-template-columns:1fr;max-height:none}
  .frow .fbk{display:none}
}