:root{--gold:#ffd43b;--blue:#075bff;--dark:#030711;--panel:rgba(5,13,35,.92);--red:#b51d2a;--green:#00d084;--purple:#8b2cff;--white:#f7fbff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#103c93 0,#07142e 35%,#03050b 85%);color:white;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 0%,rgba(255,212,59,.22),transparent 25%),radial-gradient(circle at 80% 0%,rgba(0,119,255,.25),transparent 28%);pointer-events:none;z-index:-1}
.wrap,.container{width:94%;max-width:1320px;margin:auto;padding:24px}.card{background:var(--panel);border:3px solid var(--gold);border-radius:28px;padding:28px;box-shadow:0 0 50px rgba(255,212,59,.25),inset 0 0 30px rgba(0,90,255,.14)}
.logo{font-size:62px;text-align:center;margin:0;text-transform:uppercase;letter-spacing:1px;font-weight:1000;line-height:.9;text-shadow:4px 4px #000,0 0 24px rgba(255,212,59,.7);text-decoration:none}.logo .family{color:var(--gold)}.logo .battle{color:#f4f6ff}
.header{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(3,7,17,.76);border-bottom:1px solid rgba(255,212,59,.28)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}.navbar .logo{font-size:30px}.navlinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.navlinks a{color:#dce8ff;text-decoration:none;font-weight:800;font-size:14px}
.tagline{text-align:center;font-size:22px;color:var(--gold);font-weight:900;margin:12px 0 24px}.nav,.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.btn,button{cursor:pointer;border:0;border-radius:14px;padding:15px 22px;font-size:18px;font-weight:900;background:linear-gradient(#ffe970,#ffb000);color:#111;text-decoration:none;text-align:center;display:inline-block;box-shadow:0 0 18px rgba(255,196,0,.28)}
.secondary{background:linear-gradient(#fff,#dce8ff)!important}.blue{background:linear-gradient(#1583ff,#0647b7)!important;color:white!important}.danger{background:linear-gradient(#ff4b4b,#a40000)!important;color:white!important}.green{background:linear-gradient(#27e98d,#008a4f)!important}.purple{background:linear-gradient(#b866ff,#6412c9)!important;color:white!important}.dark{background:rgba(255,255,255,.1)!important;color:white!important;border:1px solid rgba(255,255,255,.25)!important}.big{font-size:21px;padding:18px 28px;border-radius:18px}
.hero{padding:56px 0}.heroGrid,.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}.panel,.box{background:rgba(4,12,35,.82);border:1px solid rgba(255,212,59,.75);border-radius:22px;padding:22px}.lead{font-size:23px;line-height:1.35;color:#dce8ff}.badge{display:inline-flex;background:rgba(255,212,59,.12);border:1px solid rgba(255,212,59,.55);border-radius:99px;padding:9px 14px;font-weight:900;color:var(--gold);margin-bottom:18px}
h1.heroTitle{font-size:76px;line-height:.92;margin:0 0 18px;text-transform:uppercase;text-shadow:5px 5px #000,0 0 30px rgba(0,119,255,.8)}h1.heroTitle span{color:var(--gold)}h2{text-align:center}.features,.modes,.modeGrid,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.feature,.mode,.modeCard,.step{background:#07152f;border:1px solid #1e64d8;border-radius:16px;padding:16px;text-align:center;font-weight:800}.mode,.modeCard{border-color:var(--gold)}.modeIcon{font-size:40px}.section{padding:60px 0}.sectionTitle{text-align:center;font-size:44px;margin:0 0 12px;text-transform:uppercase}.sectionTitle span{color:var(--gold)}.sectionSub{text-align:center;color:#cfe0ff;max-width:780px;margin:0 auto 30px;font-size:20px}.videoBox{border:3px solid var(--gold);border-radius:28px;min-height:330px;background:linear-gradient(135deg,rgba(6,71,183,.9),rgba(3,7,17,.96));display:flex;align-items:center;justify-content:center;text-align:center}.playCircle{width:100px;height:100px;border-radius:50%;background:linear-gradient(#fff07a,#ffb000);display:grid;place-items:center;margin:0 auto 18px;color:#111;font-size:42px;font-weight:1000}
.room{font-size:22px;text-align:center;background:#101827;border:2px dashed var(--gold);border-radius:14px;padding:12px;margin:14px auto;max-width:760px}.scores{display:flex;justify-content:space-between;gap:12px;margin:18px 0}.score{flex:1;background:#101f5c;border:2px solid #fff;border-radius:14px;padding:14px;text-align:center;font-size:22px;font-weight:900}.score.red{background:#4e0610}.timer{font-size:40px;color:var(--gold)}
.question{font-size:30px;font-weight:1000;text-align:center;margin:18px 0;text-transform:uppercase}.board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.answer{min-height:64px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#092783,#0062ff);border:2px solid #fff;border-radius:14px;padding:14px 18px;font-size:23px;font-weight:1000;text-transform:uppercase;transition:.25s}.answer.reveal{animation:answerPop .55s ease}.hidden{background:#111827;color:var(--gold)}
@keyframes answerPop{0%{transform:scale(.7) rotate(-2deg);filter:brightness(2)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.form{max-width:880px;margin:20px auto;display:grid;gap:12px}input,select,textarea{padding:14px;border-radius:12px;border:2px solid var(--gold);font-size:18px;background:#07152f;color:white}.small{text-align:center;opacity:.82}
.proposal,.faqItem{font-size:19px;background:#101827;border-radius:14px;padding:14px;margin-top:10px;border:1px solid #456}.proposal b,.faqItem h3{color:var(--gold)}.list{display:grid;gap:10px;margin:18px 0}.pill{display:inline-flex;align-items:center;gap:8px;background:#101827;border:1px solid var(--gold);border-radius:99px;padding:8px 13px;margin:4px;font-weight:900}.avatar{font-size:24px}.live{color:#00ff88;font-weight:900}.offline{color:#ff5c5c;font-weight:900}.winner{font-size:38px;text-align:center;color:var(--gold);background:#111;border:3px solid var(--gold);border-radius:18px;padding:20px;margin:20px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.split{display:grid;grid-template-columns:2fr 1fr;gap:16px}.leader{width:100%;border-collapse:collapse}.leader td,.leader th{padding:10px;border-bottom:1px solid #345}.leader th{color:var(--gold);text-align:left}
.publicMode .card{min-height:92vh;display:flex;flex-direction:column;justify-content:center}.publicMode .logo{font-size:76px}.publicMode .question{font-size:42px}.publicMode .answer{font-size:30px;min-height:82px}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:#111;border:3px solid var(--gold);border-radius:16px;padding:16px 24px;font-size:26px;font-weight:900;display:none;z-index:99}.qr{background:white;color:#111;padding:10px;border-radius:12px;display:inline-block;font-weight:900}.kbd{background:#222;border:1px solid #777;padding:3px 8px;border-radius:6px}.lobbyGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.teamLobby{background:#07152f;border:2px solid #fff;border-radius:22px;padding:18px}.teamLobby.red{border-color:#ff6b7a}.teamLobby h2{text-align:center;margin-top:0}.waiting{font-size:22px;text-align:center;color:var(--gold);font-weight:1000}.footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.12);color:#9db4dd;text-align:center}.socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.social{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:16px 22px;color:white;text-decoration:none;font-weight:1000}
@media(max-width:900px){.hero,.heroGrid,.grid2,.split,.lobbyGrid{grid-template-columns:1fr}.features,.modes,.modeGrid,.steps{grid-template-columns:1fr 1fr}.board{grid-template-columns:1fr}.scores{flex-direction:column}.logo{font-size:42px}.question{font-size:23px}.publicMode .logo{font-size:46px}.publicMode .question{font-size:26px}.navlinks{display:none}}
@media(max-width:560px){.features,.modes,.modeGrid,.steps{grid-template-columns:1fr}h1.heroTitle{font-size:44px}.lead{font-size:18px}}