html, body { height:100%; margin:0; overflow:hidden; background:#07081c; }
#stage { position:fixed; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:center; overflow:hidden; background:radial-gradient(ellipse at 50% 110%,#3a2f8f 0%,#1a1550 45%,#0b0d26 100%); font-family:var(--sans); }
#top { position:absolute; left:0; right:0; top:0; height:84px; display:flex; align-items:center; gap:16px; padding:0 40px; }
.logo { font:900 44px var(--mono); letter-spacing:.12em; color:var(--gold); text-shadow:3px 3px 0 #7a3a00; }
.spacer { flex:1; }
.chip { font:800 26px var(--mono); letter-spacing:.08em; padding:8px 20px; border:3px solid var(--line); border-radius:12px; background:#0b0d26aa; color:var(--cyan); }
.chip b { color:var(--gold); letter-spacing:.2em; }
.btn-chip { cursor:pointer; font-size:20px; } .btn-chip:hover { border-color:var(--gold); }
#main { position:absolute; left:40px; right:40px; top:92px; height:650px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
#floor { position:absolute; left:0; right:0; top:750px; bottom:0; background:repeating-linear-gradient(90deg,#241b66 0 80px,#2b2078 80px 160px); border-top:6px solid var(--gold); }
#hostbox { position:absolute; left:24px; bottom:14px; width:300px; text-align:center; }
#hostbox canvas { width:288px; height:288px; margin:0 auto; position:relative; z-index:2; filter:drop-shadow(0 8px 0 #0006); }
#hostname { font:800 22px var(--mono); color:var(--gold); letter-spacing:.06em; margin-top:-10px; text-shadow:2px 2px 0 #000a; }
#bubble { position:absolute; left:340px; top:10px; max-width:1100px; padding:6px 24px; background:#fff; color:#1b1424; font:700 28px/1.3 var(--sans); border-radius:30px; border:4px solid #1b1424; z-index:6; transition:opacity .25s; white-space:nowrap; }
#bubble:empty { opacity:0; }
#pods { position:absolute; left:340px; right:20px; top:0; bottom:0; display:flex; justify-content:center; align-items:flex-end; gap:12px; padding-bottom:12px; }
.pod { width:188px; text-align:center; position:relative; animation:pop .5s cubic-bezier(.2,1.6,.4,1); transition:transform .25s, filter .25s; }
.pod canvas { width:150px; height:150px; margin:0 auto -14px; position:relative; z-index:2; }
.pod .box { height:122px; border:4px solid var(--line); border-radius:12px 12px 0 0; background:linear-gradient(#2e2a82,#1b1a4a); padding-top:20px; box-shadow:0 0 0 0 transparent; }
.pod .nm { font:800 24px var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px; }
.pod .sc { font:900 38px var(--mono); color:var(--gold); } .pod .sc.neg { color:var(--red); }
.pod.chooser .box { border-color:var(--gold); box-shadow:0 0 36px #ffd23f88; } .pod.buzzer .box { border-color:var(--red); box-shadow:0 0 36px #ff5a6a99; } .pod.buzzer { transform:translateY(-14px); }
.pod.off { opacity:.45; filter:grayscale(.6); } .pod.out { filter:brightness(.55); } .pod.locked .box::after { content:"LOCKED IN"; position:absolute; left:0; right:0; bottom:6px; font:800 16px var(--mono); color:var(--green); }
.pod .tag { position:absolute; top:-10px; right:0; z-index:3; font:900 18px var(--mono); padding:2px 8px; border-radius:8px; background:var(--gold); color:#2a1b00; }
@keyframes pop { from { transform:scale(.3) translateY(60px); opacity:0; } }
.reduced .pod { animation:none; }
/* main screens */
.big { font:900 120px/1 var(--mono); letter-spacing:.08em; color:var(--gold); text-shadow:6px 6px 0 #7a3a00,0 0 60px #ffd23f66; text-align:center; margin:0; text-transform:uppercase; }
.mid { font:800 42px/1.2 var(--mono); color:var(--cyan); text-align:center; margin:0; letter-spacing:.04em; }
.soft { font:500 34px/1.3 var(--sans); color:var(--muted); text-align:center; margin:0; max-width:1500px; }
.code { font:900 190px/1 var(--mono); letter-spacing:.22em; padding-left:.22em; color:var(--gold); text-shadow:8px 8px 0 #7a3a00,0 0 80px #ffd23f88; }
.steps { display:flex; gap:24px; } .steps div { background:var(--panel); border:3px solid var(--line); border-radius:16px; padding:12px 24px; font:700 30px/1.25 var(--sans); text-align:center; max-width:520px; } .steps b { display:block; font:900 44px var(--mono); color:var(--gold); }
.url { color:var(--cyan); font-family:var(--mono); }
.levels { display:flex; gap:14px; } .levels span { font:800 26px var(--mono); padding:8px 20px; border-radius:30px; border:3px solid var(--line); color:var(--muted); } .levels span.on { color:#2a1b00; background:var(--gold); border-color:#fff2a8; }
.bar { width:1000px; height:22px; border:3px solid var(--line); border-radius:14px; overflow:hidden; background:#0007; } .bar i { display:block; height:100%; background:var(--green); transform-origin:left; } .bar.low i { background:var(--red); }
.grid { display:grid; gap:10px; width:100%; } .grid .cat { height:104px; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(#3b36a6,#2a2680); border:3px solid #8a84ff; border-radius:10px; font:800 30px/1.1 var(--mono); text-transform:uppercase; padding:6px 12px; color:#fff; text-shadow:2px 2px 0 #0008; }
.grid .cell { height:76px; display:flex; align-items:center; justify-content:center; background:linear-gradient(#2c3fd0,#1f2a9a); border:3px solid #8a9bff; border-radius:10px; font:900 54px var(--mono); color:var(--gold); text-shadow:3px 3px 0 #0008; }
.grid .cell.used { background:#0b0d2688; border-color:#2a2866; color:transparent; text-shadow:none; }
.grid .cell.pick { animation:glow 1s infinite alternate; } @keyframes glow { to { filter:brightness(1.35); } }
.panel { width:1640px; background:linear-gradient(#2c3fd0,#1f2a9a); border:6px solid #8a9bff; border-radius:24px; padding:30px 60px 36px; text-align:center; box-shadow:0 0 70px #2c3fd088; }
.panel .meta { font:800 34px var(--mono); letter-spacing:.14em; color:var(--cyan); text-transform:uppercase; } .panel .meta b { color:var(--gold); }
.panel .clue { font:800 64px/1.18 var(--mono); text-transform:uppercase; margin-top:16px; text-shadow:3px 3px 0 #0008; } .panel .clue.l { font-size:52px; } .panel .clue.xl { font-size:42px; }
.panel .ans { margin-top:20px; font:900 66px var(--mono); color:var(--green); text-shadow:3px 3px 0 #0008; text-transform:uppercase; }
.status { font:900 56px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-align:center; } .status.go { color:var(--red); animation:glow .5s infinite alternate; } .status.ok { color:var(--green); } .status.bad { color:var(--red); } .status.cy { color:var(--cyan); font-size:52px; }
.res { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; max-width:1700px; } .res .r { background:var(--panel); border:4px solid var(--line); border-radius:14px; padding:12px 22px; font:700 30px/1.25 var(--sans); min-width:280px; text-align:center; } .res .r.ok { border-color:var(--green); } .res .r.bad { border-color:var(--red); } .res .r b { font:900 32px var(--mono); display:block; }
.win { font:900 100px var(--mono); color:var(--gold); text-align:center; text-shadow:6px 6px 0 #7a3a00; }
.spinner { width:90px; height:90px; border:10px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.btn { font:900 38px var(--mono); padding:16px 40px; border-radius:16px; border:4px solid #fff2a8; background:var(--gold); color:#2a1b00; cursor:pointer; text-transform:uppercase; }
/* overlays */
#flash { position:absolute; left:0; right:0; top:360px; padding:18px 0; background:linear-gradient(90deg,transparent,#07081cee 18%,#07081cee 82%,transparent); text-align:center; font:900 96px var(--mono); pointer-events:none; opacity:0; z-index:20; text-shadow:6px 6px 0 #000a; } #flash.show { animation:flash 1.3s ease-out; } @keyframes flash { 0% { opacity:0; transform:scale(.6); } 15% { opacity:1; transform:scale(1.1); } 70% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1); } }
#flash.ok { color:var(--green); } #flash.bad { color:var(--red); }
#cut { position:absolute; inset:0; z-index:30; overflow:hidden; background:#07081ccc; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#cut[hidden] { display:none; }
#cut .skip { position:absolute; right:30px; bottom:20px; font:600 22px var(--mono); color:var(--muted); z-index:3; }
#cut .t1 { font:900 190px/1 var(--mono); letter-spacing:.06em; color:var(--gold); text-shadow:8px 8px 0 #7a3a00,0 0 90px #ffd23fcc; text-transform:uppercase; text-align:center; position:relative; z-index:2; }
#cut .t2 { font:800 64px var(--mono); color:var(--cyan); text-align:center; margin-top:20px; letter-spacing:.1em; text-transform:uppercase; position:relative; z-index:2; }
#cut .wipe { position:absolute; left:-10%; right:-10%; height:140px; background:linear-gradient(90deg,#ff4fa3,#ffd23f,#3ec8ff); opacity:.85; }
#cut .conf { position:absolute; width:16px; height:26px; top:-40px; }
#soundhint { position:absolute; left:900px; top:20px; z-index:40; font:700 22px var(--mono); background:var(--gold); color:#2a1b00; padding:8px 22px; border-radius:30px; cursor:pointer; } #soundhint[hidden] { display:none; }
.reduced * { animation-duration:.01ms !important; transition-duration:.01ms !important; }

.pod .float { position:absolute; left:0; right:0; top:-30px; z-index:6; font:900 44px var(--mono); text-shadow:3px 3px 0 #000a; pointer-events:none; animation:rise 1.7s ease-out forwards; } .pod .float.ok { color:var(--green); } .pod .float.bad { color:var(--red); }
@keyframes rise { 0% { opacity:0; transform:translateY(30px) scale(.7); } 15% { opacity:1; transform:translateY(0) scale(1.15); } 70% { opacity:1; } 100% { opacity:0; transform:translateY(-90px); } }