:root{
  --bg:#0B1220; --bg2:#131B2E; --panel:#1B2540;
  --gold:#F2C14E; --emerald:#2EC4B6; --red:#D7263D;
  --text:#F5F1E6; --muted:#8B93A7;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:radial-gradient(circle at 50% -10%, #1a2745 0%, var(--bg) 55%);
  color:var(--text); font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height:100vh;
}
#app{max-width:1400px;margin:0 auto;padding:24px 32px 60px;}

.marquee{position:relative;text-align:center;padding:22px 10px 26px;margin-bottom:22px;border-radius:18px;
  background:linear-gradient(180deg, var(--bg2), var(--panel));border:2px solid #2a375c;overflow:hidden;}
.marquee h1{font-family:'Arial Black','Helvetica Neue',sans-serif;font-size:clamp(28px,5vw,54px);letter-spacing:3px;
  margin:0;color:var(--gold);text-shadow:0 0 18px rgba(242,193,78,.45);}
.marquee .sub{color:var(--emerald);font-weight:600;letter-spacing:2px;margin-top:6px;font-size:clamp(12px,1.6vw,16px);text-transform:uppercase;}
.bulbs{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:space-between;padding:0 16px;}
.bulbs span{width:10px;height:10px;border-radius:50%;background:var(--gold);opacity:.25;animation:chase 1.6s infinite;}
.bulbs span:nth-child(odd){animation-delay:.4s;}
@keyframes chase{0%,100%{opacity:.15;}50%{opacity:1;box-shadow:0 0 10px var(--gold);}}
.flagbar{height:5px;display:flex;margin-top:16px;border-radius:3px;overflow:hidden;}
.flagbar div{flex:1;} .flagbar .b{background:#000;} .flagbar .r{background:var(--red);} .flagbar .g{background:#0a8a3d;}

.navbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px;}
.navbtn{background:var(--panel);border:2px solid #2a375c;color:var(--text);padding:12px 20px;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;transition:all .15s ease;}
.navbtn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
.navbtn.active{background:var(--gold);color:#1a1200;border-color:var(--gold);}

.scorestrip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;background:var(--bg2);
  border:1px solid #2a375c;border-radius:14px;padding:14px;margin-bottom:26px;}
.chip{background:var(--panel);border:1px solid #33436d;border-radius:999px;padding:8px 16px;font-weight:700;
  font-size:14px;display:flex;gap:8px;align-items:center;}
.chip .pts{color:var(--gold);font-family:monospace;font-size:15px;}
.chip.leader{border-color:var(--gold);box-shadow:0 0 12px rgba(242,193,78,.3);}

.panel{background:var(--bg2);border:1px solid #2a375c;border-radius:18px;padding:28px;margin-bottom:22px;}
h2.title{font-family:'Arial Black',sans-serif;color:var(--gold);font-size:clamp(20px,3vw,30px);margin-top:0;letter-spacing:1px;}
.muted{color:var(--muted);}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

input[type=text],select{background:var(--panel);border:1px solid #33436d;color:var(--text);padding:10px 14px;
  border-radius:10px;font-size:15px;}
button.btn{background:var(--emerald);color:#04231f;border:none;border-radius:10px;padding:10px 18px;
  font-weight:800;font-size:14px;cursor:pointer;}
button.btn.gold{background:var(--gold);color:#1a1200;}
button.btn.red{background:var(--red);color:#fff;}
button.btn.ghost{background:transparent;border:2px solid #33436d;color:var(--text);}
button.btn:hover{filter:brightness(1.1);}
button.btn:disabled{opacity:.35;cursor:not-allowed;}

.playerline{display:flex;gap:8px;align-items:center;background:var(--panel);padding:8px 12px;border-radius:10px;margin-bottom:8px;}
.teamtag{font-size:12px;padding:3px 8px;border-radius:6px;font-weight:700;}
.teamtag.A{background:#2EC4B6;color:#04231f;} .teamtag.B{background:#F2C14E;color:#1a1200;} .teamtag.none{background:#33436d;color:var(--muted);}

.stage{text-align:center;padding:40px 20px;background:var(--panel);border-radius:16px;border:2px solid #2a375c;margin:18px 0;}
.stage .label{color:var(--emerald);text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:700;margin-bottom:14px;}
.stage .qtext{font-size:clamp(22px,3.6vw,38px);font-weight:800;line-height:1.35;}
.stage .atext{margin-top:22px;font-size:clamp(20px,3vw,30px);color:var(--gold);font-weight:900;display:none;}
.stage .atext.show{display:block;}

.controlbar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px;}

.jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.jcat{background:var(--emerald);color:#04231f;font-weight:900;text-align:center;padding:14px 6px;border-radius:8px;font-size:clamp(11px,1.4vw,15px);}
.jcell{background:var(--panel);border:2px solid #2a375c;border-radius:8px;text-align:center;padding:20px 6px;
  font-family:monospace;font-size:clamp(18px,2.4vw,26px);font-weight:900;color:var(--gold);cursor:pointer;}
.jcell:hover{border-color:var(--gold);}
.jcell.used{opacity:.2;cursor:default;pointer-events:none;color:var(--muted);}
.jcell.static{cursor:default;}

.overlay{position:fixed;inset:0;background:rgba(5,8,18,.92);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.overlay .card{max-width:900px;width:100%;background:var(--bg2);border:2px solid var(--gold);border-radius:20px;padding:36px;text-align:center;}

.timer{font-family:monospace;font-size:clamp(40px,7vw,70px);font-weight:900;color:var(--gold);text-align:center;margin:10px 0;}
.timer.low{color:var(--red);}

.scatgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px;}
.scatcat{background:var(--panel);border:1px solid #33436d;border-radius:10px;padding:14px;text-align:center;font-weight:700;}

.connbadge{position:fixed;top:14px;right:16px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;z-index:60;}
.connbadge.ok{background:rgba(46,196,182,.15);color:var(--emerald);border:1px solid var(--emerald);}
.connbadge.bad{background:rgba(215,38,61,.15);color:var(--red);border:1px solid var(--red);}

footer{text-align:center;color:var(--muted);font-size:12px;margin-top:30px;}