:root { --gold: #ffd23f; --pink: #ff2e88; --cyan: #00e5ff; --purple: #6b1cff; --c: #ffd23f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05030f; color: #fff; font-family: 'Bungee', system-ui, sans-serif; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes popC { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } }

#crt { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.07) 2px 3px); }

/* ---------- power ---------- */
#power { position: fixed; inset: 0; z-index: 60; background: radial-gradient(ellipse, #1a0640, #000 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; cursor: pointer; }
.power-logo { font-family: 'Bungee Shade'; font-size: clamp(48px, 9vw, 150px); color: var(--gold); text-shadow: 0 0 20px rgba(255,210,63,.6), 0 0 70px rgba(255,46,136,.6); }
.power-sub { font-family: 'VT323'; font-size: 34px; color: #9ff; letter-spacing: 3px; }
.power-load { font-family: 'VT323'; font-size: 22px; color: #777; }
#power.on { animation: crtOn .9s ease-in forwards; pointer-events: none; }
@keyframes crtOn { 0% { clip-path: inset(0); } 30% { clip-path: inset(49.6% 0 49.6% 0); background: #fff; } 60% { clip-path: inset(49.8% 48% 49.8% 48%); background: #fff; } 100% { clip-path: inset(50% 50% 50% 50%); background: #fff; } }

/* ---------- HUD ---------- */
#hud { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: stretch; gap: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); animation: pop .5s; }
.hud-cell { display: flex; flex-direction: column; align-items: center; padding: 6px 26px 8px; background: linear-gradient(#2a1a6e, #0d0630); border: 3px solid var(--k); min-width: 190px; }
.hud-cell span { font-size: 14px; color: var(--k); letter-spacing: 2px; }
.hud-cell b { font-family: 'VT323'; font-weight: normal; font-size: 46px; line-height: 40px; color: #fff; text-shadow: 0 0 10px var(--k); }
.hud-cell.host { --k: var(--gold); border-radius: 16px; }
.hud-cell.room { --k: var(--cyan); border-radius: 0 16px 16px 0; }
.hud-vs { display: flex; align-items: center; padding: 0 12px; background: var(--pink); font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #600; }
.hud-cell b.bump { animation: bump .6s; }
@keyframes bump { 30% { transform: scale(1.35); color: var(--k); } }

/* ---------- lobby ---------- */
#lobby { position: fixed; left: 3vw; top: 50%; transform: translateY(-50%); z-index: 20; max-height: 94vh; }
.lobby-panel { width: min(46vw, 760px); padding: 24px 28px; border-radius: 26px; background: linear-gradient(160deg, rgba(40,12,110,.9), rgba(8,3,30,.92)); border: 3px solid rgba(255,46,136,.9);
  box-shadow: 0 0 50px rgba(255,46,136,.45), inset 0 0 40px rgba(107,28,255,.35); animation: slideUp .7s cubic-bezier(.2,1.3,.4,1); backdrop-filter: blur(6px); }
.lobby-title { font-family: 'Bungee Shade'; font-size: clamp(30px, 3.6vw, 64px); color: var(--gold); text-shadow: 0 0 24px rgba(255,210,63,.5); margin-bottom: 14px; text-align: center; }
.lobby-row { display: flex; gap: 24px; }
.lobby-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; box-shadow: 0 0 30px rgba(0,229,255,.5); }
.qr svg { width: min(24vh, 250px); height: auto; }
.qr.small { padding: 4px; border-radius: 6px; box-shadow: none; }
.qr.small svg { width: 64px; }
.url { font-family: 'VT323'; font-size: clamp(18px, 1.6vw, 28px); color: var(--cyan); }
.lobby-players { flex: 1; min-width: 0; }
.lobby-h { font-size: clamp(14px, 1.3vw, 22px); color: var(--cyan); margin-bottom: 10px; }
.lobby-h span { background: var(--pink); color: #fff; padding: 0 10px; border-radius: 10px; margin-left: 6px; }
#playerList { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; max-height: 32vh; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'Permanent Marker'; font-size: clamp(16px, 1.4vw, 24px); padding: 4px 14px 4px 6px; border-radius: 30px; background: rgba(0,0,0,.4); border: 2px solid var(--c); color: #fff; box-shadow: 0 0 14px var(--c); animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.chip i { font-style: normal; font-size: 1.2em; }
.chip.off { opacity: .4; }
.empty { font-family: 'VT323'; font-size: 26px; color: #aaa; }
.lobby-start { margin-top: 16px; text-align: center; font-family: 'VT323'; font-size: clamp(20px, 1.8vw, 30px); letter-spacing: 2px; }
.lobby-start b { color: var(--gold); }
.remote-row { margin-top: 10px; display: flex; gap: 10px; align-items: center; justify-content: center; font-family: 'VT323'; font-size: 18px; color: #aaa; }

/* ---------- roulette ---------- */
#roulette { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 20; display: flex; flex-direction: column; align-items: center; animation: popC .5s cubic-bezier(.2,1.5,.4,1); }
.rl-label { font-size: clamp(22px, 2.6vw, 44px); color: var(--cyan); text-shadow: 0 0 20px var(--cyan), 3px 3px 0 #000; margin-bottom: 14px; letter-spacing: 3px; }
.rl-window { padding: 18px 50px; border-radius: 26px; min-width: 50vw; text-align: center; background: linear-gradient(#2a0e70, #0a0428); border: 5px solid var(--c); box-shadow: 0 0 60px var(--c), inset 0 0 40px rgba(0,0,0,.6); transition: border-color .1s, box-shadow .1s; }
#rlName { font-family: 'Bungee'; font-size: clamp(40px, 6.5vw, 120px); color: #fff; text-shadow: 0 0 30px var(--c), 5px 5px 0 #000; white-space: nowrap; }
#roulette.landed .rl-window { animation: landed .45s ease-in-out 3 alternate; }
#roulette.landed .rl-label { color: var(--gold); text-shadow: 0 0 20px var(--gold), 3px 3px 0 #000; }
@keyframes landed { to { transform: scale(1.08) rotate(-1.5deg); } }

/* ---------- lower third ---------- */
#lower { position: fixed; left: 4vw; bottom: 6vh; z-index: 18; display: flex; align-items: stretch; animation: slideUp .6s cubic-bezier(.2,1.3,.4,1); filter: drop-shadow(0 8px 20px rgba(0,0,0,.7)); }
.lt-tag { background: var(--pink); padding: 10px 16px; font-size: clamp(12px, 1.1vw, 18px); display: flex; align-items: center; border-radius: 12px 0 0 12px; letter-spacing: 2px; }
#lowerText { background: linear-gradient(90deg, #1b0a4e, rgba(10,4,40,.92)); padding: 10px 26px; font-size: clamp(20px, 2.2vw, 40px); border-radius: 0 12px 12px 0; border: 3px solid var(--c); border-left: 0; }
#lowerText b { color: var(--c); text-shadow: 0 0 14px var(--c); }

/* ---------- question card ---------- */
#card { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); transition: top .7s cubic-bezier(.3,1.2,.4,1), width .7s, height .7s, bottom .7s; }
#card.mode-full { top: 13vh; width: min(84vw, 1500px); height: 72vh; }
#card.mode-vote { top: 12vh; width: min(80vw, 1400px); height: 46vh; }
#card.mode-reveal { top: 57vh; width: min(76vw, 1300px); height: 38vh; }
.card-inner { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(40,80,255,.96) 0%, rgba(10,30,170,.96) 50%, rgba(4,10,70,.97) 100%);
  border: 5px solid #8fb0ff; box-shadow: 0 0 0 4px #0a0f40, 0 0 80px rgba(80,140,255,.55), inset 0 0 80px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6vh 5vw 7vh; }
.card-inner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%); pointer-events: none; }
#card.show .card-inner { animation: cardIn .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes cardIn { from { opacity: 0; transform: scale(.85) rotateX(12deg); } }
.card-top { position: absolute; top: 2.2vh; left: 2.5vw; right: 2.5vw; display: flex; justify-content: space-between; align-items: center; font-size: clamp(12px, 1.3vw, 22px); color: #b9ccff; letter-spacing: 2px; gap: 12px; }
#cardBy { font-family: 'Permanent Marker'; letter-spacing: 0; color: var(--c); text-shadow: 0 0 10px var(--c); }
#cardVal { color: var(--gold); }
#cardQ { font-family: 'Anton', sans-serif; font-size: clamp(26px, 4.2vw, 78px); line-height: 1.12; text-align: center; text-transform: uppercase; text-shadow: 4px 4px 0 #000; max-width: 1400px; transition: font-size .6s; }
#card.mode-vote #cardQ { font-size: clamp(20px, 2.8vw, 50px); }
#card.mode-reveal #cardQ { font-size: clamp(16px, 1.9vw, 34px); opacity: .85; }
#cardA { margin-top: 1.6vh; font-size: clamp(26px, 3.6vw, 66px); color: var(--gold); text-align: center; text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255,210,63,.6); animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
#cardA small { display: block; font-size: .32em; color: #fff; opacity: .8; letter-spacing: 5px; margin-bottom: .3em; }
#verdict { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); padding: .25em 1em .3em; border-radius: 0 0 20px 20px; font-size: clamp(20px, 2.6vw, 46px); white-space: nowrap; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6); animation: drop .6s cubic-bezier(.2,1.6,.4,1); }
#verdict.right { background: linear-gradient(#3dff8a, #12a84b); box-shadow: 0 0 40px #19d36b; }
#verdict.wrong { background: linear-gradient(#ff6b81, #c4122b); box-shadow: 0 0 40px #e3213b; }
#verdict.none { background: #444; }
@keyframes drop { from { transform: translate(-50%, -120%); } }
#status { position: absolute; bottom: 3.6vh; left: 0; right: 0; text-align: center; font-family: 'VT323'; font-size: clamp(20px, 1.9vw, 34px); letter-spacing: 2px; color: #dfe7ff; }
#status b { color: var(--gold); font-weight: normal; }
#timer { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: rgba(0,0,0,.5); }
#timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff2e88, #ffd23f); box-shadow: 0 0 16px #ffd23f; transform-origin: left; }
#timer.low i { background: #ff3b30; box-shadow: 0 0 20px #ff3b30; }
.old-votes { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.votes i { width: 16px; height: 16px; border-radius: 50%; background: #2a2a55; border: 2px solid #000; display: inline-block; }
.votes i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------- double ---------- */
#double { position: fixed; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.double-title { display: flex; flex-direction: column; align-items: center; font-family: 'Bungee Shade'; font-size: clamp(60px, 13vw, 240px); line-height: .9; animation: zoomIn 1s cubic-bezier(.2,1.5,.4,1); }
.double-title span { background: linear-gradient(180deg, #fff6a8, #ffd23f 45%, #ff7a00 55%, #ff2e88); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(6px 6px 0 #1a0040) drop-shadow(0 0 40px rgba(255,255,255,.6)); }
.double-title span:last-child { animation: wobble 1.2s ease-in-out infinite alternate; }
.double-sub { margin-top: 2vh; font-size: clamp(18px, 2.4vw, 42px); background: rgba(0,0,0,.75); padding: .3em 1em; border-radius: 12px; border: 3px solid var(--gold); color: var(--gold); }
@keyframes wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg) scale(1.06); } }
@keyframes zoomIn { from { transform: scale(0) rotate(-30deg); opacity: 0; } }

/* ---------- game over ---------- */
#over { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(30,8,80,.55), rgba(5,0,20,.85)); }
.over-h { font-size: clamp(22px, 3vw, 50px); color: var(--cyan); text-shadow: 0 0 20px var(--cyan); letter-spacing: 6px; }
.over-scores { display: flex; gap: 4vw; margin: 3vh 0; }
.os { display: flex; flex-direction: column; align-items: center; padding: 14px 40px; border-radius: 18px; background: rgba(0,0,0,.5); border: 4px solid var(--k); box-shadow: 0 0 30px var(--k); }
.os.host { --k: var(--gold); } .os.room { --k: var(--cyan); }
.os span { color: var(--k); font-size: clamp(16px, 1.8vw, 30px); }
.os b { font-family: 'VT323'; font-weight: normal; font-size: clamp(50px, 6vw, 110px); line-height: 1; }
#overWinner { font-family: 'Bungee Shade'; font-size: clamp(44px, 8vw, 150px); color: var(--c); text-shadow: 0 0 40px var(--c); animation: zoomIn 1.2s cubic-bezier(.2,1.5,.4,1) both, wobble 1.4s ease-in-out 1.2s infinite alternate; text-align: center; }
#overPickers { margin-top: 2vh; font-family: 'VT323'; font-size: 26px; color: #ccc; text-align: center; max-width: 80vw; }
.over-foot { margin-top: 3vh; font-family: 'VT323'; font-size: 28px; }
.over-foot b { color: var(--gold); }

#banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 30; font-size: clamp(30px, 5vw, 90px); padding: .2em .7em; border-radius: 20px; background: rgba(5,0,30,.85); border: 5px solid var(--gold); color: var(--gold); text-shadow: 0 0 20px var(--gold); box-shadow: 0 0 60px rgba(255,210,63,.5); white-space: nowrap; animation: popC .5s cubic-bezier(.2,1.6,.4,1); }
#confetti { position: fixed; inset: 0; z-index: 40; pointer-events: none; width: 100vw; height: 100vh; }
#help { position: fixed; bottom: 8px; right: 12px; z-index: 30; font-family: 'VT323'; font-size: 17px; color: rgba(255,255,255,.4); transition: opacity 1s; }
#conn { position: fixed; top: 10px; left: 12px; z-index: 55; font-family: 'VT323'; font-size: 22px; color: #f55; background: #000; padding: 2px 10px; }

/* ---------- bobblehead faces + FAN CAM ---------- */
img.face { width: 1.5em; height: 1.5em; object-fit: cover; object-position: 50% 30%; border-radius: 50%; background: radial-gradient(#fff, var(--c, #ff2e88)); border: 2px solid #fff; vertical-align: middle; margin-right: .25em; }
.chip img.face { width: 1.9em; height: 1.9em; margin-right: 0; }
#rlName img.face { width: 1.15em; height: 1.15em; border-width: 4px; box-shadow: 0 0 30px var(--c); }
#lowerText img.face { width: 1.6em; height: 1.6em; margin: -.3em .35em -.3em -.4em; }
#fancam { position: fixed; inset: 0; z-index: 19; pointer-events: none; font-family: 'VT323', monospace; color: #fff; }
#fancam.go { animation: fcIn .35s steps(3) both; }
@keyframes fcIn { from { opacity: 0; filter: brightness(3); } to { opacity: 1; filter: none; } }
.fc-corner { position: absolute; width: 7vw; height: 7vw; border: 6px solid rgba(255,255,255,.9); filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.fc-corner.tl { left: 4vw; top: 6vh; border-right: 0; border-bottom: 0; } .fc-corner.tr { right: 4vw; top: 6vh; border-left: 0; border-bottom: 0; }
.fc-corner.bl { left: 4vw; bottom: 6vh; border-right: 0; border-top: 0; } .fc-corner.br { right: 4vw; bottom: 6vh; border-left: 0; border-top: 0; }
.fc-rec { position: absolute; left: 6.5vw; top: 9vh; font-size: clamp(26px, 3vw, 56px); text-shadow: 2px 2px 0 #000; display: flex; align-items: center; gap: .3em; }
.fc-rec i { width: .6em; height: .6em; border-radius: 50%; background: #ff1a1a; box-shadow: 0 0 14px #ff1a1a; animation: blink 1s steps(2) infinite; }
.fc-tag { position: absolute; right: 6.5vw; top: 9vh; font-family: 'Bungee'; font-size: clamp(22px, 2.6vw, 48px); color: #ffd23f; text-shadow: 0 0 18px #ff2e88, 3px 3px 0 #000; animation: fcWob 1.2s ease-in-out infinite; }
@keyframes fcWob { 50% { transform: rotate(-4deg) scale(1.06); } }
.fc-bottom { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%) rotate(-2deg); display: flex; align-items: center; gap: 14px; background: #ffd23f; color: #12002a; padding: 10px 26px 10px 12px; border: 4px solid #12002a; box-shadow: 8px 8px 0 #ff2e88; animation: fcPop .5s .15s cubic-bezier(.2,1.6,.4,1) both; max-width: 86vw; }
@keyframes fcPop { from { transform: translateX(-50%) rotate(-2deg) scale(0); } }
.fc-bottom img { width: clamp(50px, 5vw, 90px); height: clamp(50px, 5vw, 90px); object-fit: cover; object-position: 50% 30%; border-radius: 50%; border: 3px solid #12002a; background: #fff; }
#fcCap { font-family: 'Bungee'; font-size: clamp(20px, 2.4vw, 44px); line-height: 1.1; }
#card, #lower, #roulette { transition: opacity .25s; }
body.fc #card, body.fc #lower, body.fc #roulette, body.fc #surprise { opacity: 0; }
#surprise { transition: opacity .25s; }

/* ---------- thumbs-up meter + answer clock ---------- */
#status .qrow { display: flex; align-items: center; justify-content: center; gap: 3vw; margin-bottom: .4em; }
.thumbs { display: inline-flex; gap: .5vw; }
.thumbs i { font-style: normal; font-size: clamp(30px, 3.6vw, 64px); filter: grayscale(1) brightness(.45); transition: filter .2s, transform .2s; }
.thumbs i.on { filter: drop-shadow(0 0 14px #5dff9a); animation: thumbOn .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes thumbOn { from { transform: scale(2.2) rotate(-20deg); } }
.clk { font-family: 'Bungee'; font-size: clamp(36px, 4.4vw, 80px); color: #fff; min-width: 2.2ch; text-shadow: 0 0 20px var(--gold), 4px 4px 0 #000; }
.clk::after { content: 's'; font-size: .45em; margin-left: .1em; }
.clk.low { color: #ff3b30; animation: blink .5s steps(2) infinite; }
.flythumb { position: fixed; bottom: -10vh; z-index: 30; font-size: clamp(60px, 7vw, 130px); text-align: center; pointer-events: none; animation: flyUp 2.2s cubic-bezier(.3,.7,.4,1) forwards; filter: drop-shadow(0 0 20px var(--c)); }
.flythumb small { display: block; font-family: 'Bungee'; font-size: .22em; color: var(--c); text-shadow: 2px 2px 0 #000; }
@keyframes flyUp { 0% { transform: translateY(0) scale(.5) rotate(-20deg); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-75vh) scale(1.2) rotate(15deg); opacity: 0; } }

/* ---------- COMMERCIAL BREAK: the whole TV turns into an old CRT ---------- */
/* the commercial plays as a 4:3 CRT picture floating in the studio (the 3D studio stays visible behind it) */
#ads { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  --sh: min(80vh, 58vw); --sw: calc(var(--sh) * 4 / 3);
  background: radial-gradient(ellipse at 50% 50%, rgba(10,2,30,.15), rgba(5,0,18,.5) 80%); }
#adScreen { position: relative; width: var(--sw); height: var(--sh); container-type: size; border-radius: 7% / 9%; overflow: hidden; background: #000;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 40px rgba(120,200,255,.45), 0 0 120px rgba(255,46,136,.35), 0 3vh 8vh rgba(0,0,0,.8), inset 0 0 calc(var(--sh) * .12) rgba(0,0,0,.9);
  animation: crtFlicker .12s steps(2) infinite; }
#ads.on #adScreen { animation: crtOn .55s cubic-bezier(.2,.8,.3,1) both, crtFlicker .12s steps(2) .55s infinite; }
#ads.off #adScreen { animation: crtOff .5s cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes crtOn { 0% { transform: scale(1, .004); filter: brightness(8); } 45% { transform: scale(1, .004); filter: brightness(6); } 100% { transform: none; filter: none; } }
@keyframes crtOff { 0% { transform: none; filter: brightness(1); } 55% { transform: scale(1, .004); filter: brightness(6); } 100% { transform: scale(0, .004); filter: brightness(10); } }
@keyframes crtFlicker { 50% { opacity: .965; } }
#adVids video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; filter: saturate(1.35) contrast(1.15) brightness(1.05) blur(.5px); }
#adVids video.show { opacity: 1; }
#adVids video.roll { animation: vRoll .45s cubic-bezier(.2,.9,.3,1); }
@keyframes vRoll { 0% { transform: translateY(-35%) skewX(6deg); filter: saturate(2) contrast(1.6) brightness(1.6) hue-rotate(40deg); } 60% { transform: translateY(4%) skewX(-2deg); } 100% { transform: none; } }
#adStatic { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
#adStatic.full { opacity: 1; mix-blend-mode: normal; }
#adStatic.soft { opacity: .09; }
.crt-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(255,0,0,.06) 0 1px, rgba(0,255,0,.05) 1px 2px, rgba(0,0,255,.06) 2px 3px); mix-blend-mode: multiply; }
.crt-glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%), radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.12), transparent 40%); }
#adOSD { position: absolute; top: 7%; right: 8%; font-family: 'VT323', monospace; font-size: 11cqh; color: #39ff6a; text-shadow: 0 0 12px #39ff6a, 3px 3px 0 #000; letter-spacing: 4px; opacity: 0; }
#adOSD.show { opacity: 1; }
#adVol { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); font-family: 'VT323', monospace; font-size: 5.5cqh; color: #39ff6a; text-shadow: 0 0 10px #39ff6a, 2px 2px 0 #000; opacity: 0; white-space: nowrap; }
#adVol.show { opacity: 1; }
#adBumper { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; background: #12002a; overflow: hidden; }
.ab-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, #ff2e88 0 10deg, #6b1cff 10deg 20deg, #00b8d4 20deg 30deg, #ffc21a 30deg 40deg); animation: spin 6s linear infinite; opacity: .55; }
.ab-logo { position: relative; font-family: 'Bungee Shade'; font-size: 12cqw; color: var(--gold, #ffd23f); text-shadow: 0 0 30px #ff2e88, 8px 8px 0 #12002a; animation: abSpin 2.4s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes abSpin { 0% { transform: perspective(800px) rotateY(-540deg) scale(.2); } 100% { transform: none; } }
.ab-title { position: relative; font-family: 'Bungee'; font-size: 6.4cqw; color: #fff; background: #e3213b; padding: .1em .6em; transform: rotate(-3deg); box-shadow: 10px 10px 0 #12002a; animation: abPop .6s .5s cubic-bezier(.2,1.6,.4,1) both; }
.ab-sub { position: relative; font-family: 'VT323'; font-size: 5cqw; color: #fff; text-shadow: 3px 3px 0 #000; animation: abPop .6s .9s cubic-bezier(.2,1.6,.4,1) both, blink 1s steps(2) 1.6s infinite; }
@keyframes abPop { from { transform: scale(0) rotate(-12deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- live reactions + applause meter ---------- */
.rxfly { position: fixed; z-index: 21; transform: translate(-50%, -50%); font-size: clamp(44px, 4.6vw, 90px); pointer-events: none; text-align: center; filter: drop-shadow(0 0 14px var(--c)); animation: rxUp 2.3s cubic-bezier(.2,.7,.3,1) forwards; }
.rxfly small { display: block; font-family: 'Bungee'; font-size: .24em; color: var(--c); text-shadow: 2px 2px 0 #000; }
@keyframes rxUp { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -80%) scale(1.25) rotate(var(--r)); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -330%) scale(1) rotate(calc(var(--r) * -1)); opacity: 0; } }
.rxfly.tomato { animation: rxThrow 1.1s cubic-bezier(.3,.1,.6,1) forwards; }
@keyframes rxThrow { 0% { transform: translate(-50%, -50%) scale(.6) rotate(0); } 85% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.6) rotate(540deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(3.2, .6) rotate(540deg); opacity: 0; } }
#apMeter { position: fixed; right: 2.2vw; top: 50%; transform: translate(140%, -50%); z-index: 17; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 16px; background: linear-gradient(#2a1a6e, #0d0630); border: 3px solid #7cff4f; box-shadow: 0 0 24px rgba(124,255,79,.4); transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
#apMeter.on { transform: translate(0, -50%); }
.ap-title { font-family: 'VT323'; font-size: 18px; letter-spacing: 2px; color: #7cff4f; writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: -26px; top: 50%; translate: 0 -50%; text-shadow: 0 0 8px #7cff4f; }
.ap-seg { display: flex; flex-direction: column-reverse; gap: 4px; }
.ap-seg i { width: clamp(34px, 3vw, 54px); height: clamp(12px, 1.6vh, 20px); border-radius: 4px; background: #1a1440; border: 1px solid #000; }
.ap-seg i.on:nth-child(-n+5) { background: #39ff6a; box-shadow: 0 0 10px #39ff6a; }
.ap-seg i.on:nth-child(n+6):nth-child(-n+10) { background: #ffd23f; box-shadow: 0 0 10px #ffd23f; }
.ap-seg i.on:nth-child(n+11) { background: #ff3b30; box-shadow: 0 0 12px #ff3b30; }
#apLabel { font-family: 'Bungee'; font-size: clamp(11px, .9vw, 16px); color: #fff; max-width: 90px; text-align: center; line-height: 1.1; text-shadow: 2px 2px 0 #000; }

/* ---------- SURPRISE / candy jackpot ---------- */
#surprise { position: fixed; inset: 0; z-index: 23; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sp-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255,46,136,.35) 0 9deg, rgba(255,210,63,.3) 9deg 18deg, rgba(0,229,255,.3) 18deg 27deg, rgba(124,255,79,.28) 27deg 36deg); animation: spin 5s linear infinite; mix-blend-mode: screen; }
.sp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; padding: 3vh 5vw; border-radius: 28px; background: radial-gradient(ellipse at 50% 30%, #3a0f7a, #12002a 75%);
  border: 10px dotted #ffd23f; box-shadow: 0 0 0 6px #ff2e88, 0 0 60px #ff2e88, 0 0 120px rgba(255,210,63,.6); animation: spPop .7s cubic-bezier(.2,1.6,.4,1) both, spBulbs .25s steps(2) infinite; }
@keyframes spPop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
@keyframes spBulbs { 50% { border-color: #fff6b0; } }
.sp-gift { font-size: clamp(60px, 9vw, 160px); animation: spGift .6s ease-in-out infinite alternate; filter: drop-shadow(0 0 20px #ffd23f); }
@keyframes spGift { from { transform: rotate(-10deg) scale(1); } to { transform: rotate(10deg) scale(1.12); } }
.sp-title { font-family: 'Bungee Shade'; font-size: clamp(56px, 9vw, 170px); line-height: 1; color: #ffd23f; text-shadow: 0 0 30px #ff2e88, 6px 6px 0 #12002a; animation: wobble 1s ease-in-out infinite alternate; }
.sp-sub { font-family: 'Bungee'; font-size: clamp(18px, 2.4vw, 44px); color: #fff; letter-spacing: 2px; text-shadow: 3px 3px 0 #000; }
.sp-win { font-family: 'Bungee'; font-size: clamp(22px, 3vw, 56px); color: #12002a; background: #7cff4f; padding: .15em .7em; border-radius: 14px; transform: rotate(-2deg); box-shadow: 6px 6px 0 #ff2e88; display: flex; align-items: center; gap: .4em; animation: abPop .6s .6s cubic-bezier(.2,1.6,.4,1) both; }
.sp-win img.face { width: 1.6em; height: 1.6em; margin: 0; border-color: #12002a; }
.sp-candy { font-size: clamp(30px, 3.4vw, 64px); letter-spacing: .3em; animation: blink .5s steps(2) infinite; }
#overCandy { margin-top: 1.4vh; font-family: 'Bungee'; font-size: clamp(18px, 2vw, 34px); color: #7cff4f; text-shadow: 0 0 14px #7cff4f, 3px 3px 0 #000; text-align: center; max-width: 86vw; }