@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:dark;
  --bg:#07101d;
  --panel:#0d1727cc;
  --panel-strong:#101b2df2;
  --line:rgba(255,255,255,.09);
  --muted:#9fb2cf;
  --text:#edf4ff;
  --navy:#18265b;
  --red:#ff3b3b;
  --gold:#f2d568;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(circle at 15% 10%,rgba(43,124,255,.28),transparent 28%),
    radial-gradient(circle at 85% 12%,rgba(255,61,61,.18),transparent 25%),
    radial-gradient(circle at 30% 100%,rgba(110,255,121,.12),transparent 28%),
    linear-gradient(180deg,#040812 0%,#08111d 42%,#060b13 100%);
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.16;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 92%);
}
.display{font-family:'Barlow',sans-serif;letter-spacing:.02em}
.panel{
  background:linear-gradient(180deg,rgba(14,23,39,.92),rgba(9,16,29,.92));
  border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
}
.panel-soft{
  background:rgba(15,24,40,.72);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
}
.edge-glow{position:relative;overflow:hidden}
.edge-glow::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,rgba(66,143,255,.7),rgba(255,255,255,.08),rgba(255,79,79,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.metric-card{position:relative;overflow:hidden}
.metric-card::after{
  content:'';position:absolute;inset:auto -30% -55% auto;width:150px;height:150px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);opacity:.4;
}
.btn-main,.btn-alt,.btn-danger,.btn-team{
  border:0;border-radius:1rem;padding:.9rem 1.15rem;font-weight:800;cursor:pointer;transition:.18s transform,.18s filter,.18s opacity,.18s background;
}
.btn-main{background:linear-gradient(135deg,#f2d568 0%,#ff6a3d 48%,#ff4040 100%);color:#111827;box-shadow:0 12px 26px rgba(255,110,70,.28)}
.btn-main:hover,.btn-alt:hover,.btn-danger:hover,.btn-team:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-alt{background:#15243c;color:#d8e6ff;border:1px solid rgba(255,255,255,.1)}
.btn-danger{background:linear-gradient(135deg,#7f1d1d,#ef4444);color:#fff}
.btn-team{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));color:#e9f2ff;border:1px solid rgba(255,255,255,.1)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important}
.field,.select{
  width:100%;
  background:#0a1322;
  color:white;
  border:1px solid rgba(255,255,255,.11);
  border-radius:1rem;
  padding:.9rem 1rem;
  outline:none;
}
.field:focus,.select:focus{border-color:#78b0ff;box-shadow:0 0 0 3px rgba(120,176,255,.16)}
option{background:#0a1322;color:#fff}
.subtle{color:var(--muted)}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.38rem .75rem;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.06);color:#cfe0ff;border:1px solid rgba(255,255,255,.08);
}
.badge.live{background:rgba(40,180,99,.12);border-color:rgba(52,211,153,.35);color:#91ffd0}
.brand-chip{background:linear-gradient(135deg,rgba(24,38,91,.9),rgba(255,59,59,.15));border:1px solid rgba(255,255,255,.09)}
.logo-shadow{filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.team-card{position:relative;overflow:hidden;border-radius:1.4rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,24,39,.92),rgba(8,13,22,.96));}
.team-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,var(--glow),transparent 42%);opacity:.9;pointer-events:none}
.team-card .team-bar{height:4px;background:linear-gradient(90deg,var(--team),transparent)}
.team-card.active{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 22px 54px color-mix(in srgb,var(--team) 22%, transparent)}
.player-card{border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;background:linear-gradient(180deg,rgba(17,28,48,.88),rgba(9,15,27,.92));transition:.18s transform,.18s border-color,.18s box-shadow}
.player-card:hover{transform:translateY(-2px);border-color:rgba(122,180,255,.45);box-shadow:0 18px 34px rgba(0,0,0,.25)}
.player-card.selected{border-color:#f2d568;box-shadow:0 0 0 1px rgba(242,213,104,.25),0 18px 34px rgba(0,0,0,.25)}
.pick-card{position:relative;overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(18,27,45,.93),rgba(9,14,25,.98));}
.pick-card::after{content:'';position:absolute;inset:auto -5% -25% auto;width:180px;height:180px;border-radius:999px;background:radial-gradient(circle,var(--glow),transparent 66%)}
.pick-card.winner{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 26px 54px rgba(0,0,0,.3)}
.countdown-dot{width:.55rem;height:.55rem;border-radius:999px;background:#3b82f6;box-shadow:0 0 0 6px rgba(59,130,246,.14)}
.hero-board{position:relative;overflow:hidden}
.hero-board::before{content:'';position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 30%,transparent 70%,rgba(255,255,255,.08));opacity:.4;pointer-events:none}
.empty-state{border:1px dashed rgba(255,255,255,.12);border-radius:1.4rem;background:rgba(10,18,30,.56)}
#toast > div{min-width:280px;max-width:420px}
@media (max-width:700px){
  .hide-mobile{display:none}
}

/* Decorative glows must never cover selection controls. */
.pick-card::after,.team-card::before,.hero-board::before,.edge-glow::before{pointer-events:none!important;z-index:0}
.pick-card > *, .team-card > * {position:relative;z-index:1}
.pick-card .pick-now{position:relative;z-index:10;pointer-events:auto;min-height:48px;isolation:isolate;display:block}
.sequence-choice{position:relative;z-index:2}