/* =========================================================
   WORLD STRIKER 2026 — broadcast/glass UI over a live 3D stage
   ========================================================= */
:root{
  --bg:#030b12;
  --ink:#f3fff9;
  --ink-dim:#90a9a1;
  --gold:#b9ff39;
  --gold-deep:#69d83b;
  --green:#37d67a;
  --red:#ff5c6c;
  --blue:#4da3ff;
  --glass:rgba(6,20,25,.68);
  --glass-brt:rgba(185,255,57,.08);
  --stroke:rgba(180,255,218,.16);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --radius:18px;
  --font:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

/* ---------- 3D stage (fixed backdrop) ---------- */
#stage3d{ position:fixed; inset:0; z-index:0; }
#game-canvas{ width:100%; height:100%; display:block; touch-action:none; }
#fx-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(1,8,12,.54),transparent 42%,rgba(1,8,12,.2)),radial-gradient(ellipse at center, transparent 48%, rgba(1,7,10,.72) 100%);
  transition:background .35s;
}
body.slowmo #fx-vignette{
  background:radial-gradient(ellipse at center, transparent 38%, rgba(2,4,14,.8) 100%);
  backdrop-filter:saturate(.65);
}
#fx-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; }
#fx-flash.on{ animation:flash .38s ease-out; }
@keyframes flash{ 0%{opacity:.85} 100%{opacity:0} }

/* ---------- app layer ---------- */
#app{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(rgba(3,11,18,.92), rgba(3,11,18,.38) 80%, transparent);
  border-top:2px solid rgba(185,255,57,.72);
}
.brand{
  display:flex; align-items:center; gap:11px; font-weight:900; font-size:1.02rem; letter-spacing:.1em; cursor:pointer; user-select:none;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.brand-mark{ width:22px; height:22px; border:2px solid var(--gold); border-radius:50%; position:relative; box-shadow:0 0 16px rgba(185,255,57,.4); }
.brand-mark::before,.brand-mark::after{ content:''; position:absolute; background:var(--gold); }
.brand-mark::before{ width:4px; height:4px; border-radius:50%; left:7px; top:7px; box-shadow:-6px 3px 0 -1px var(--gold),6px 3px 0 -1px var(--gold); }
.brand-mark::after{ height:2px; width:14px; left:2px; top:9px; transform:rotate(-38deg); }
.brand-copy{ color:var(--ink); }
.brand b{ color:var(--gold); }
.top-right{ display:flex; align-items:center; gap:10px; }
.system-status{ display:flex; align-items:center; gap:8px; color:#9bb4aa; font-size:.64rem; font-weight:800; letter-spacing:.17em; border-right:1px solid var(--stroke); padding-right:16px; }
.system-status span,.live-dot{ width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:statusPulse 1.9s ease-in-out infinite; }
@keyframes statusPulse{ 50%{ opacity:.45; box-shadow:0 0 3px var(--gold); } }
#coin-pill{
  display:flex; align-items:center; gap:7px;
  background:var(--glass); border:1px solid var(--stroke);
  padding:7px 15px; border-radius:999px; font-weight:800;
  backdrop-filter:blur(12px);
}
#coin-pill.bump{ animation:bump .45s ease; }
@keyframes bump{ 30%{ transform:scale(1.16); box-shadow:0 0 22px rgba(255,213,74,.5);} }
.icon-btn{
  background:var(--glass); border:1px solid var(--stroke); color:var(--ink);
  width:40px; height:40px; border-radius:12px; font-size:1.05rem; cursor:pointer;
  backdrop-filter:blur(12px); transition:transform .15s, background .15s;
}
.icon-btn:hover{ transform:translateY(-1px); background:var(--glass-brt); }

/* ---------- screens ---------- */
#screens{ flex:1; display:flex; flex-direction:column; }
.screen{ display:none; }
.screen.active{
  display:flex; flex-direction:column; align-items:center;
  flex:1; padding:12px 18px 48px;
  animation:screenIn .45s cubic-bezier(.2,.9,.25,1);
}
@keyframes screenIn{ from{ opacity:0; transform:translateY(26px) scale(.985);} to{ opacity:1; transform:none;} }
.hidden{ display:none !important; }

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; font-weight:800; letter-spacing:.03em;
  background:var(--glass); color:var(--ink);
  border:1px solid var(--stroke); border-radius:14px;
  padding:11px 22px; font-size:1rem; cursor:pointer;
  backdrop-filter:blur(12px);
  transition:transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn:hover{ transform:translateY(-2px); background:var(--glass-brt); border-color:rgba(255,255,255,.3); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:disabled{ opacity:.4; cursor:default; transform:none; }
.btn.big{ padding:16px 30px; font-size:1.12rem; border-radius:16px; }
.btn-primary{
  background:linear-gradient(115deg,#caff4f,#78e832); color:#071008;
  border-color:rgba(220,255,166,.7);
  box-shadow:0 8px 32px rgba(133,241,47,.2), inset 0 1px rgba(255,255,255,.4);
}
.btn-primary:hover{ background:linear-gradient(115deg,#d8ff76,#8bf044); box-shadow:0 10px 38px rgba(133,241,47,.32); }
.btn-gold{
  background:linear-gradient(135deg,#ffd54a,#e2a90e); color:#241b00;
  border-color:rgba(255,230,150,.55);
  box-shadow:0 8px 26px rgba(255,196,40,.3);
}
.btn-gold:hover{ background:linear-gradient(135deg,#ffe27a,#f0b81e); }
.back-btn{ padding:8px 16px; font-size:.9rem; }

/* ---------- home / hero ---------- */
#screen-home.active{ justify-content:center; align-items:stretch; }
.home-shell{ width:min(1180px,94vw); margin:auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(350px,.72fr); gap:clamp(42px,7vw,96px); align-items:center; }
.hero{ text-align:left; max-width:680px; padding:4vh 0 5vh; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; font-size:.67rem; font-weight:800; letter-spacing:.22em;
  color:var(--ink); border:1px solid rgba(185,255,57,.25); border-radius:4px;
  padding:8px 11px; margin-bottom:23px;
  background:rgba(9,27,30,.74); backdrop-filter:blur(12px);
}
.hero-badge b{ color:var(--gold); font-size:.58rem; letter-spacing:.15em; border-left:1px solid var(--stroke); padding-left:9px; }
.eyebrow{ color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.38em; margin-bottom:8px; }
.hero h1{
  font-size:clamp(3.4rem, 7vw, 6.6rem); font-weight:950; line-height:.82;
  letter-spacing:-.055em; text-shadow:0 6px 40px rgba(0,0,0,.65); font-style:italic;
}
.hero .gold{
  background:linear-gradient(180deg,#e8ffb0,#b9ff39 48%,#6ce238);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,213,74,.35));
}
.tagline{ color:#a6bbb3; margin:25px 0 28px; line-height:1.6; font-size:1rem; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.menu-buttons{ display:flex; flex-direction:column; gap:10px; align-items:stretch; max-width:510px; }
.menu-buttons .btn{ width:100%; }
.menu-buttons .btn.big{ text-align:left; padding:15px 18px; border-radius:8px; position:relative; }
.menu-buttons .btn span{ display:block; font-size:.82rem; font-weight:950; letter-spacing:.12em; }
.menu-buttons .btn small{ display:block; font-size:.68rem; font-weight:600; letter-spacing:.03em; opacity:.65; margin-top:3px; }
.menu-buttons .btn-primary{ padding:17px 20px; }
.menu-buttons .btn-primary i{ position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-style:normal; }
.menu-secondary{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.text-btn{ align-self:flex-start; color:#a7bdb4; background:transparent; border:0; font:800 .67rem var(--font); letter-spacing:.17em; padding:9px 2px; cursor:pointer; }
.text-btn:hover{ color:var(--gold); }
.player-btn{ display:flex; align-items:center; gap:12px; text-align:left; padding:12px 16px; border-color:rgba(185,255,57,.28); background:linear-gradient(90deg,rgba(185,255,57,.1),rgba(4,17,20,.68)); }
.player-btn span{ flex:none; color:var(--gold); }.player-btn small{ flex:1; margin:0 !important; }.player-btn i{ font-style:normal; color:var(--gold); font-size:1.1rem; }
.menu-buttons.row{ flex-direction:row; justify-content:center; }
.menu-buttons.row .btn{ width:auto; }
.home-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:26px; max-width:510px; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
}
.home-stats div{
  background:rgba(4,17,20,.5); border-right:1px solid var(--stroke);
  padding:11px 12px; font-size:.58rem; letter-spacing:.11em; color:var(--ink-dim); backdrop-filter:blur(12px); text-transform:uppercase;
}
.home-stats div:last-child{ border-right:0; }
.home-stats b{ display:block; color:var(--ink); margin-top:3px; font-size:1rem; letter-spacing:0; }

/* ---------- AI match intelligence ---------- */
.intel-card{ position:relative; background:linear-gradient(150deg,rgba(8,29,31,.86),rgba(3,13,18,.78)); border:1px solid rgba(185,255,57,.3); padding:18px; box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 60px rgba(88,255,154,.035); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); backdrop-filter:blur(18px); }
.intel-card::before,.intel-card::after{ content:''; position:absolute; width:36px; height:2px; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.intel-card::before{ left:0; top:0; }.intel-card::after{ right:0; bottom:0; }
.intel-head{ display:flex; justify-content:space-between; color:#b9cbc3; font-size:.64rem; font-weight:900; letter-spacing:.2em; padding-bottom:14px; border-bottom:1px solid var(--stroke); }
.intel-head b{ color:var(--gold); }
.scan-viz{ height:280px; position:relative; margin:14px 0; overflow:hidden; background:radial-gradient(circle at 50% 54%,rgba(185,255,57,.12),transparent 29%),linear-gradient(rgba(185,255,57,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(185,255,57,.03) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; border:1px solid rgba(160,240,210,.1); }
.scan-viz::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.8%,rgba(185,255,57,.16) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(185,255,57,.16) 50%,transparent 50.2%); }
.goal-frame{ position:absolute; left:13%; right:13%; top:24%; height:50%; border:2px solid rgba(206,255,226,.7); border-bottom:4px solid rgba(206,255,226,.86); perspective:200px; box-shadow:0 0 20px rgba(185,255,57,.06); }
.goal-frame::before{ content:''; position:absolute; inset:0; background:linear-gradient(rgba(200,255,220,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,220,.08) 1px,transparent 1px); background-size:22px 22px; }
.goal-frame i{ position:absolute; bottom:0; width:11px; height:42px; background:linear-gradient(var(--gold),transparent); opacity:.5; }
.goal-frame i:nth-child(1){ left:20%; }.goal-frame i:nth-child(2){ left:50%; height:70px; }.goal-frame i:nth-child(3){ right:15%; height:25px; }
.target-lock{ position:absolute; width:70px; height:70px; left:21%; top:30%; border:1px solid rgba(185,255,57,.8); border-radius:50%; box-shadow:0 0 24px rgba(185,255,57,.16); animation:targetSpin 7s linear infinite; }
.target-lock::before,.target-lock::after{ content:''; position:absolute; background:var(--gold); }
.target-lock::before{ height:1px; left:-12px; right:-12px; top:50%; }.target-lock::after{ width:1px; top:-12px; bottom:-12px; left:50%; }
.target-lock span{ position:absolute; inset:17px; border:1px dashed var(--gold); border-radius:50%; }
@keyframes targetSpin{ to{ transform:rotate(360deg); } }
.scan-line{ position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 12px var(--gold); animation:scan 3s ease-in-out infinite; }
@keyframes scan{ 0%,100%{ top:15%; opacity:.3; } 50%{ top:82%; opacity:1; } }
.scan-viz label{ position:absolute; left:16px; bottom:12px; color:var(--gold); font-size:.55rem; font-weight:900; letter-spacing:.19em; }
.intel-readout{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.intel-readout div{ padding:11px 12px; background:rgba(153,255,188,.035); border:1px solid var(--stroke); }
.intel-readout span{ display:block; color:#769187; font-size:.52rem; font-weight:800; letter-spacing:.15em; }
.intel-readout strong{ display:block; color:var(--gold); font-size:.86rem; margin-top:5px; letter-spacing:.05em; }
.ai-tip{ display:flex; gap:12px; align-items:center; margin-top:9px; padding:11px 12px; background:rgba(185,255,57,.07); border-left:2px solid var(--gold); }
.ai-tip>span{ display:grid; place-items:center; flex:none; width:31px; height:31px; color:#08110b; background:var(--gold); font-size:.65rem; font-weight:950; border-radius:50%; box-shadow:0 0 18px rgba(185,255,57,.28); }
.ai-tip p{ color:#9cb2a9; font-size:.64rem; line-height:1.45; }.ai-tip b{ display:block; color:var(--ink); font-size:.52rem; letter-spacing:.13em; margin-bottom:2px; }

/* ---------- panels ---------- */
.panel{
  width:min(880px, 96vw);
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:26px 28px; backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.panel-head{ display:flex; align-items:center; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.panel-head h2{ font-size:1.5rem; font-weight:900; letter-spacing:.02em; }
.panel-sub{ color:var(--ink-dim); font-size:.92rem; margin:8px 0 20px; }
.star-badge{
  margin-left:auto; background:rgba(255,213,74,.14); color:var(--gold);
  border:1px solid rgba(255,213,74,.4); border-radius:999px; padding:6px 14px;
  font-size:.8rem; font-weight:800;
}

/* ---------- tournament road ---------- */
.stage-list{ display:flex; flex-direction:column; gap:0; position:relative; padding-left:8px; }
.stage-card{
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--stroke);
  border-radius:14px; padding:14px 18px; margin-bottom:12px;
  position:relative; transition:transform .18s, border-color .18s;
}
.stage-card::before{ /* progress spine */
  content:''; position:absolute; left:29px; top:100%; width:3px; height:12px;
  background:var(--stroke);
}
.stage-card:last-child::before{ display:none; }
.stage-card.done{ opacity:.62; }
.stage-card.done .stage-num{ background:var(--green); color:#04220f; border-color:transparent; }
.stage-card.done::before{ background:var(--green); }
.stage-card.current{
  border-color:rgba(255,213,74,.55);
  background:linear-gradient(120deg, rgba(255,213,74,.1), rgba(255,255,255,.03) 55%);
  box-shadow:0 0 34px rgba(255,213,74,.12);
  transform:scale(1.015);
}
.stage-card.current .stage-num{ background:var(--gold); color:#241b00; border-color:transparent; box-shadow:0 0 18px rgba(255,213,74,.55); }
.stage-card.locked{ opacity:.42; filter:saturate(.5); }
.stage-num{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-weight:900; font-size:1.05rem;
  background:rgba(255,255,255,.06); border:1px solid var(--stroke);
}
.stage-info{ flex:1; min-width:0; }
.stage-name{ font-weight:800; font-size:1.02rem; }
.stage-opp{ color:var(--ink-dim); font-size:.85rem; margin-top:3px; }
.tier-stars{ color:var(--gold); letter-spacing:.08em; }
.stage-reward{ font-weight:800; color:var(--gold); font-size:.9rem; white-space:nowrap; }

/* ---------- free play grid ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px;
}
.team-card{
  background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:14px;
  padding:0 0 14px; cursor:pointer; overflow:hidden; text-align:center;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.team-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.35); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.team-flag{ display:flex; height:52px; transform:skewY(-3deg) scale(1.08); margin-bottom:16px; }
.team-flag span{ flex:1; }
.team-name{ font-weight:800; font-size:1.02rem; }
.team-meta{ display:flex; justify-content:center; gap:12px; color:var(--ink-dim); font-size:.8rem; margin-top:7px; }

/* ---------- shop ---------- */
.coin-pill-lg{
  margin-left:auto; background:rgba(255,213,74,.1); border:1px solid rgba(255,213,74,.35);
  color:var(--gold); border-radius:999px; padding:8px 18px; font-weight:900;
}
.shop-tabs{
  display:flex; gap:6px; background:rgba(0,0,0,.3); border:1px solid var(--stroke);
  border-radius:999px; padding:5px; width:max-content; max-width:100%; margin-bottom:20px;
  overflow-x:auto;
}
.tab{
  font-family:inherit; font-weight:700; font-size:.88rem; color:var(--ink-dim);
  background:transparent; border:0; border-radius:999px; padding:9px 18px; cursor:pointer;
  white-space:nowrap; transition:background .18s, color .18s;
}
.tab.active{ background:linear-gradient(135deg,#ffd54a,#e2a90e); color:#241b00; }
.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); gap:14px;
}
.shop-card{
  background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:16px;
  padding:18px 16px 14px; text-align:center; display:flex; flex-direction:column; gap:9px;
  transition:transform .18s, border-color .18s;
}
.shop-card:hover{ transform:translateY(-3px); }
.shop-card.equipped{
  border-color:rgba(255,213,74,.65);
  box-shadow:0 0 0 1px rgba(255,213,74,.4), 0 0 28px rgba(255,213,74,.14);
  animation:equipGlow 2.4s ease-in-out infinite;
}
@keyframes equipGlow{ 50%{ box-shadow:0 0 0 1px rgba(255,213,74,.7), 0 0 40px rgba(255,213,74,.24);} }
.shop-emoji{ font-size:2.3rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.shop-name{ font-weight:800; }
.shop-desc{ color:var(--ink-dim); font-size:.8rem; line-height:1.45; flex:1; }
.shop-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.price{ color:var(--gold); font-weight:900; font-size:.92rem; }
.owned-tag{ color:var(--green); font-weight:800; font-size:.8rem; }
.lvl-pips{ color:var(--gold); font-size:.82rem; font-weight:700; letter-spacing:.12em; }
.shop-note{ color:var(--ink-dim); font-size:.82rem; margin-top:18px; text-align:center; }
.shop-swatch{ display:flex; justify-content:center; gap:6px; }
.shop-swatch span{ width:26px; height:26px; border-radius:8px; border:1px solid var(--stroke); }
/* kit + ball previews */
.kit-preview{ position:relative; height:64px; margin:2px auto 0; width:74px; }
.kit-body{ position:absolute; left:15px; right:15px; top:4px; bottom:4px; border-radius:9px 9px 12px 12px; }
.kit-sleeve{ position:absolute; top:6px; width:16px; height:26px; border-radius:6px; }
.kit-sleeve.l{ left:0; transform:rotate(14deg); }
.kit-sleeve.r{ right:0; transform:rotate(-14deg); }
.ball-preview{ width:58px; height:58px; border-radius:50%; margin:2px auto 0; border:1px solid rgba(255,255,255,.2); }

/* ---------- how ---------- */
.how-body h3{ margin:18px 0 7px; font-size:1.05rem; color:var(--gold); }
.how-body p{ color:var(--ink-dim); line-height:1.6; font-size:.94rem; }

/* ---------- custom player lab ---------- */
#screen-player.active{ justify-content:center; }
.player-panel{ width:min(1060px,96vw); background:linear-gradient(145deg,rgba(5,22,25,.96),rgba(2,12,17,.94)); }
.panel-kicker{ color:var(--gold); font-size:.58rem; font-weight:900; letter-spacing:.25em; margin-bottom:3px; }
.saved-chip{ margin-left:auto; display:flex; align-items:center; gap:7px; color:#82a096; font-size:.56rem; font-weight:800; letter-spacing:.14em; }
.saved-chip span{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.player-builder{ display:grid; grid-template-columns:minmax(300px,.85fr) minmax(390px,1.15fr); gap:28px; margin-top:24px; }
.avatar-stage{ display:grid; place-items:center; min-height:510px; background:radial-gradient(circle at 50% 43%,rgba(185,255,57,.13),transparent 35%),linear-gradient(rgba(185,255,57,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(185,255,57,.035) 1px,transparent 1px); background-size:auto,30px 30px,30px 30px; border:1px solid var(--stroke); overflow:hidden; position:relative; }
.avatar-card{ --avatar-skin:#d99a6c; --avatar-hair:#1b1110; width:260px; height:440px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:24px; }
.avatar-glow{ position:absolute; width:210px; height:210px; border:1px solid rgba(185,255,57,.34); border-radius:50%; top:55px; box-shadow:0 0 60px rgba(185,255,57,.12),inset 0 0 50px rgba(185,255,57,.07); }
.avatar-glow::after{ content:''; position:absolute; inset:20px; border:1px dashed rgba(185,255,57,.25); border-radius:50%; animation:targetSpin 12s linear infinite; }
.avatar-character{ width:150px; height:300px; position:relative; z-index:1; filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)); animation:avatarIdle 2.6s ease-in-out infinite; }
@keyframes avatarIdle{50%{transform:translateY(-5px) rotate(-.6deg)}}
.avatar-head{ position:absolute; width:72px; height:78px; left:39px; top:16px; border-radius:46% 46% 48% 48%; background:var(--avatar-skin); border:3px solid #07100d; box-shadow:inset 8px -8px rgba(0,0,0,.08); z-index:3; }
.avatar-head i{ position:absolute; width:8px; height:10px; top:34px; border-radius:50%; background:#101c1a; }.avatar-head i:first-child{left:18px}.avatar-head i:nth-child(2){right:18px}
.avatar-head b{ position:absolute; width:23px; height:9px; left:22px; bottom:12px; border-bottom:3px solid #663c33; border-radius:50%; }
.avatar-hair{ position:absolute; width:78px; height:38px; left:36px; top:6px; border-radius:50% 50% 25% 25%; background:var(--avatar-hair); border:3px solid #07100d; z-index:4; transform-origin:center bottom; }
.avatar-card[data-hair="spike"] .avatar-hair{ clip-path:polygon(0 100%,6% 32%,18% 48%,27% 4%,40% 42%,54% 0,65% 44%,79% 10%,88% 51%,100% 27%,95% 100%); height:55px; top:-7px; border:0; }
.avatar-card[data-hair="buzz"] .avatar-hair{ height:24px; top:9px; border-radius:55% 55% 16% 16%; }
.avatar-shirt{ position:absolute; width:112px; height:116px; left:19px; top:88px; border-radius:32px 32px 20px 20px; background:linear-gradient(135deg,var(--gold),#66d82e); border:4px solid #07100d; z-index:2; display:grid; place-items:center; box-shadow:inset -13px -9px rgba(0,0,0,.12); }
.avatar-card[data-style="power"] .avatar-shirt{ width:128px; left:11px; }.avatar-card[data-style="precision"] .avatar-shirt{ width:98px; left:26px; }.avatar-card[data-style="keeper"] .avatar-shirt{ background:linear-gradient(135deg,#55bdff,#2164d0); }
.avatar-shirt strong{ color:#061009; font-size:2rem; font-style:italic; text-shadow:0 1px rgba(255,255,255,.35); }
.avatar-arms i{ position:absolute; width:27px; height:114px; top:97px; background:linear-gradient(var(--gold) 0 42%,var(--avatar-skin) 42%); border:4px solid #07100d; border-radius:15px; transform-origin:top; }.avatar-arms i:first-child{left:7px;transform:rotate(9deg)}.avatar-arms i:last-child{right:7px;transform:rotate(-9deg)}
.avatar-shorts{ position:absolute; width:103px; height:65px; top:194px; left:23px; border:4px solid #07100d; border-radius:12px 12px 22px 22px; background:#edf8f3; z-index:3; }
.avatar-legs i{ position:absolute; top:246px; width:31px; height:84px; border:4px solid #07100d; border-radius:0 0 14px 14px; background:linear-gradient(#edf8f3 0 37%,var(--avatar-skin) 37% 78%,#111c20 78%); }.avatar-legs i:first-child{left:35px}.avatar-legs i:last-child{right:35px}
.avatar-name{ color:#fff; font-size:1.18rem; font-weight:950; letter-spacing:.1em; z-index:2; }.avatar-role{ color:var(--gold); font-size:.57rem; font-weight:850; letter-spacing:.18em; margin-top:6px; z-index:2; }
.player-form{ display:flex; flex-direction:column; gap:15px; padding:4px 0; }
.player-form>.btn{ text-align:center; }.player-form>.btn span,.player-form>.btn small{ display:block; }.player-form>.btn small{ margin-top:3px; opacity:.62; }
.player-form label{ color:#829c93; font-size:.6rem; font-weight:900; letter-spacing:.16em; }
.player-form input,.player-form select{ display:block; width:100%; margin-top:7px; padding:13px 14px; border-radius:8px; border:1px solid var(--stroke); background:rgba(2,12,16,.72); color:var(--ink); font:750 .95rem var(--font); outline:none; }
.player-form input:focus,.player-form select:focus{ border-color:rgba(185,255,57,.6); box-shadow:0 0 0 3px rgba(185,255,57,.08); }
.form-row{ display:grid; grid-template-columns:.65fr 1.35fr; gap:12px; }
.choice-row,.segment-row{ display:flex; gap:9px; margin-top:8px; }
.choice-row button{ width:36px; height:36px; border-radius:50%; background:var(--choice); border:3px solid rgba(255,255,255,.13); cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.choice-row button.active{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,255,57,.16),0 0 16px rgba(185,255,57,.22); transform:scale(1.05); }
.segment-row button{ flex:1; background:rgba(255,255,255,.035); color:#8ea49c; border:1px solid var(--stroke); border-radius:7px; padding:10px; font:800 .7rem var(--font); text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.segment-row button.active{ background:rgba(185,255,57,.12); border-color:rgba(185,255,57,.5); color:var(--gold); }
.player-perks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.player-perks>div{ display:flex; align-items:center; gap:9px; padding:10px; background:rgba(255,255,255,.025); border:1px solid var(--stroke); }
.player-perks span{ color:var(--gold); font-size:1.1rem; }.player-perks p{ color:#728b82; font-size:.61rem; line-height:1.35; }.player-perks b{ color:#c7d6d0; display:block; font-size:.54rem; letter-spacing:.1em; }

/* ============================================================
   MATCH — transparent overlay layer over the 3D stage
   ============================================================ */
body.in-match #topbar{ background:transparent; }
#screen-match.active{
  position:fixed; inset:0; padding:0; z-index:2;
  pointer-events:none;   /* aiming input goes to window; buttons re-enable below */
  animation:none;
}
#screen-match button, #screen-match .retry-card{ pointer-events:auto; }

/* live round-by-round shootout table */
#penalty-ledger{ position:absolute; left:18px; top:84px; width:min(320px,25vw); background:rgba(3,15,19,.78); border:1px solid rgba(185,255,57,.24); backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.32); pointer-events:none; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.ledger-head{ display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--stroke); font-size:.55rem; font-weight:900; letter-spacing:.17em; color:#94aaa2; }.ledger-head b{ color:var(--gold); }
#penalty-ledger table{ width:100%; border-collapse:collapse; table-layout:fixed; }
#penalty-ledger th{ padding:8px 6px; color:#698078; font-size:.46rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--stroke); }
#penalty-ledger th:first-child{ width:28px; }
#penalty-ledger td{ height:31px; padding:5px 6px; text-align:center; border-bottom:1px solid rgba(255,255,255,.045); color:#61746d; font-size:.58rem; font-weight:900; }
#penalty-ledger tr.current{ background:rgba(185,255,57,.055); box-shadow:inset 2px 0 var(--gold); }
#penalty-ledger td span{ display:inline-block; min-width:55px; padding:4px 6px; border-radius:4px; letter-spacing:.06em; }
#penalty-ledger .good{ color:#07120a; background:var(--gold); }#penalty-ledger .bad{ color:#ffd8dc; background:rgba(255,92,108,.24); }#penalty-ledger .neutral{ color:#f2d99a; background:rgba(255,197,86,.14); }#penalty-ledger .pending{ color:#52645e; background:rgba(255,255,255,.025); }

/* broadcast scoreboard bug */
#match-hud{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:stretch; gap:0;
  background:var(--glass); border:1px solid var(--stroke); border-radius:14px;
  overflow:hidden; backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hud-team{
  display:flex; align-items:center; gap:9px; padding:10px 16px;
  font-weight:900; letter-spacing:.04em; font-size:.92rem;
  background:rgba(255,255,255,.04);
}
.kit-dot{ width:13px; height:13px; border-radius:4px; box-shadow:0 0 8px rgba(0,0,0,.5); }
.hud-mid{ text-align:center; padding:7px 20px; min-width:150px; }
#hud-stage{ font-size:.62rem; letter-spacing:.28em; color:var(--gold); font-weight:800; text-transform:uppercase; }
#hud-score{ font-size:1.5rem; font-weight:900; line-height:1.15; font-variant-numeric:tabular-nums; }
#hud-pips{ display:flex; gap:4px; justify-content:center; margin-top:3px; min-height:8px; }
.pip{ width:9px; height:9px; transform:rotate(45deg); border-radius:2px; }
.pip.goal{ background:var(--green); box-shadow:0 0 7px rgba(55,214,122,.8); }
.pip.miss{ background:var(--red); }
.pip.sep{ width:2px; background:var(--stroke); border-radius:1px; transform:none; }

/* banner: broadcast lower-third */
#match-banner{
  position:absolute; left:50%; top:34%; transform:translateX(-50%);
  font-size:clamp(2rem, 6vw, 3.6rem); font-weight:900; letter-spacing:.05em;
  padding:14px 44px; white-space:nowrap;
  background:linear-gradient(120deg, rgba(6,9,26,.9), rgba(6,9,26,.65));
  border-top:3px solid currentColor; border-radius:8px;
  text-shadow:0 4px 26px rgba(0,0,0,.7);
  animation:bannerPop .55s cubic-bezier(.2,1.4,.35,1);
}
@keyframes bannerPop{
  0%{ transform:translateX(-50%) scale(.55); opacity:0; }
  60%{ transform:translateX(-50%) scale(1.07); opacity:1; }
  100%{ transform:translateX(-50%) scale(1); }
}

#match-prompt{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  background:var(--glass); border:1px solid var(--stroke); border-radius:999px;
  padding:11px 26px; font-weight:700; font-size:.98rem; white-space:nowrap;
  backdrop-filter:blur(12px); max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
#match-prompt:empty{ display:none; }

/* vertical power meter */
#power-wrap{
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
#power-track{
  width:16px; height:min(260px, 38vh); border-radius:10px;
  background:rgba(0,0,0,.5); border:1px solid var(--stroke);
  display:flex; align-items:flex-end; overflow:hidden;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
}
#power-bar{
  width:100%; height:0%;
  background:linear-gradient(to top, #37d67a, #ffd54a 55%, #ff5c5c 90%);
  border-radius:8px 8px 0 0;
  box-shadow:0 0 16px rgba(255,213,74,.5);
}
#power-label{ font-size:.66rem; letter-spacing:.3em; color:var(--ink-dim); font-weight:800; }

.power-btn{
  position:absolute; left:5%; bottom:9%;
  background:linear-gradient(135deg,#3fb7ff,#1668c9); color:#fff;
  border:1px solid rgba(150,220,255,.5); border-radius:999px;
  padding:12px 22px; font-weight:900; font-family:inherit; font-size:.95rem; cursor:pointer;
  box-shadow:0 8px 26px rgba(60,160,255,.4);
  transition:transform .15s;
}
.power-btn:hover{ transform:scale(1.05); }

#quit-match{ position:absolute; top:14px; right:16px; }

#match-earnings{
  position:absolute; bottom:16px; right:18px;
  background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
  padding:8px 15px; font-size:.82rem; color:var(--ink-dim); font-weight:700;
  backdrop-filter:blur(12px);
}
#match-earnings #earnings-count{ color:var(--gold); font-weight:900; }
#gold-touch-badge{ color:var(--gold); }

/* retry modal */
#retry-prompt{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(3,5,16,.55); backdrop-filter:blur(4px);
  pointer-events:auto;
}
.retry-card{
  background:var(--glass); border:1px solid var(--stroke); border-radius:18px;
  padding:28px 34px; text-align:center; font-size:1.15rem; font-weight:800;
  backdrop-filter:blur(18px); box-shadow:var(--shadow);
  animation:screenIn .3s ease;
}
.retry-sub{ color:var(--ink-dim); font-size:.9rem; font-weight:600; margin:10px 0 18px; }
.retry-btns{ display:flex; gap:12px; justify-content:center; }

/* ---------- result / champion ---------- */
#screen-result.active, #screen-champion.active{ justify-content:center; }
.result-panel{ text-align:center; width:min(520px, 94vw); }
#result-title{ font-size:2.6rem; font-weight:900; letter-spacing:.04em; }
#result-title.win{ color:var(--gold); text-shadow:0 0 34px rgba(255,213,74,.45); }
#result-title.lose{ color:var(--red); }
.result-score{ font-size:1.25rem; font-weight:800; color:var(--ink-dim); margin:12px 0 22px; }
.result-breakdown{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.result-breakdown .row{
  display:flex; justify-content:space-between; padding:10px 16px;
  background:rgba(255,255,255,.045); border:1px solid var(--stroke); border-radius:11px;
  font-size:.94rem; animation:rowIn .4s ease backwards;
}
.result-breakdown .row:nth-child(2){ animation-delay:.08s; }
.result-breakdown .row:nth-child(3){ animation-delay:.16s; }
.result-breakdown .row:nth-child(4){ animation-delay:.24s; }
.result-breakdown .row:nth-child(5){ animation-delay:.32s; }
@keyframes rowIn{ from{ opacity:0; transform:translateX(-16px);} }
.result-breakdown .row span{ color:var(--gold); font-weight:900; }
.result-total{ font-size:1.7rem; font-weight:900; color:var(--gold); margin-bottom:24px; text-shadow:0 0 24px rgba(255,213,74,.35); }

.champion .trophy{ font-size:5rem; animation:trophyBounce 1.6s ease infinite; filter:drop-shadow(0 10px 30px rgba(255,213,74,.4)); }
@keyframes trophyBounce{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-16px) rotate(3deg);} }
.champion h2{ font-size:2.2rem; font-weight:900; margin:10px 0; }
.champion .gold{ color:var(--gold); text-shadow:0 0 34px rgba(255,213,74,.5); }
.champion p{ color:var(--ink-dim); margin:8px 0; line-height:1.5; }
.champion-sub{ font-size:.88rem; }
.champion .menu-buttons{ margin-top:22px; }

/* ---------- toasts ---------- */
#toast-wrap{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:9px; z-index:50; pointer-events:none;
}
.toast{
  background:var(--glass); border:1px solid var(--stroke); border-radius:999px;
  padding:11px 24px; font-weight:700; font-size:.92rem; white-space:nowrap;
  backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:toastIn .35s cubic-bezier(.2,1.3,.4,1);
}
.toast.out{ animation:toastOut .45s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(18px) scale(.9);} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(12px) scale(.94);} }

/* ---------- mobile ---------- */
@media (max-width:640px){
  #topbar{ padding:10px 14px; }
  .brand{ font-size:.98rem; }
  .brand-copy{ display:none; }
  .system-status{ display:none; }
  #mute-btn{ display:none; }
  .panel{ padding:20px 16px; }
  .hud-team{ padding:8px 10px; font-size:.78rem; }
  .hud-mid{ min-width:110px; padding:6px 10px; }
  #hud-score{ font-size:1.2rem; }
  #match-banner{ padding:10px 22px; }
  #power-wrap{ right:3.5%; }
  #match-earnings{ font-size:.72rem; bottom:12px; right:12px; }
  .power-btn{ left:4%; bottom:8%; padding:10px 17px; }
  .menu-buttons .btn{ width:100%; }
  .home-shell{ display:block; width:100%; }
  .hero{ padding:6vh 0 4vh; text-align:left; }
  .hero h1{ font-size:clamp(2.8rem,13.5vw,4rem); line-height:.88; letter-spacing:-.06em; }
  .hero-badge{ margin-bottom:18px; }
  .eyebrow{ font-size:.62rem; letter-spacing:.28em; }
  .tagline{ max-width:92%; padding:8px 10px; margin-left:-10px; background:rgba(3,11,18,.5); backdrop-filter:blur(4px); }
  .tagline br{ display:none; }
  .menu-buttons,.home-stats{ max-width:none; }
  .menu-secondary{ grid-template-columns:1fr 1fr; }
  .menu-secondary .btn.big{ padding:14px 12px; }
  .menu-secondary .btn span{ font-size:.7rem; }
  .menu-secondary .btn small{ font-size:.58rem; white-space:normal; }
  .home-stats div{ padding:10px 8px; font-size:.48rem; letter-spacing:.08em; }
  .home-stats b{ font-size:.9rem; }
  .intel-card{ margin-bottom:42px; }
  .scan-viz{ height:220px; }
  .player-panel{ width:100%; }
  .player-panel .panel-head{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; }
  .player-panel .panel-head h2{ font-size:1.18rem; line-height:1.05; }
  .player-panel .panel-kicker{ font-size:.5rem; }
  .saved-chip{ display:none; }
  .player-builder{ grid-template-columns:1fr; }
  .avatar-stage{ min-height:440px; }
  .player-form{ padding-bottom:20px; }
  .form-row,.player-perks{ grid-template-columns:1fr; }
  #penalty-ledger{ left:8px; right:8px; top:76px; width:auto; }
  #penalty-ledger td{ height:25px; padding:3px; }
  #penalty-ledger td span{ min-width:46px; padding:3px 4px; }
  .ledger-head{ padding:7px 9px; }
}

@media (min-width:641px) and (max-width:940px){
  .home-shell{ grid-template-columns:1fr .72fr; gap:30px; }
  .hero h1{ font-size:clamp(3.2rem,7vw,5rem); }
  .scan-viz{ height:230px; }
  .system-status{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}