/* Spit Happens! — the club stage and phone extras. Loaded after style.css (shared with Bust a Nut!). */
:root { --bpm-s: .6667s; --purple: #8b3dff; }

/* logo */
.sh-logo { font-family: var(--display); line-height: .9; color: var(--cyan); text-shadow: 0 0 18px rgba(45, 226, 255, .55), 4px 4px 0 var(--purple); }
.sh-logo b { color: var(--gold); font-weight: 400; text-shadow: 0 0 18px rgba(255, 200, 61, .55), 4px 4px 0 var(--pink); }
.sh-logo.big { font-size: clamp(64px, 12vw, 210px); transform: rotate(-4deg); animation: hubFlicker 5s infinite; }
/* the room code, small, under the corner logo (for anyone who refreshes their phone mid-game) */
.roomtag { position: absolute; top: calc(2vh + clamp(26px, 2.6vw, 42px)); left: 2vw; z-index: 5; pointer-events: none; font-size: clamp(11px, .85vw, 15px); font-weight: 800; letter-spacing: .12em; color: rgba(255, 255, 255, .6);
  background: rgba(10, 3, 20, .55); border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: .35em .9em; }
.roomtag b { color: var(--gold); font-size: 1.35em; letter-spacing: .18em; margin-left: .3em; }
.sh-logo.corner { position: absolute; top: 2vh; left: 2vw; font-size: clamp(18px, 1.8vw, 30px); z-index: 5; text-shadow: 2px 2px 0 var(--purple); }
/* the home screen logo: sized to the phone so "HAPPENS!" never gets cut off */
.hub-logo.sh-logo { font-size: min(76px, 14.5vw); padding: 0 8px 6px 0; text-shadow: 0 0 18px rgba(45, 226, 255, .55), 3px 3px 0 var(--purple); }
.hub-logo.sh-logo b { text-shadow: 0 0 18px rgba(255, 200, 61, .55), 3px 3px 0 var(--pink); }
.phone header .sh-logo { font-size: 24px; text-shadow: 2px 2px 0 var(--purple); }
.phone header .sh-logo b { text-shadow: 2px 2px 0 var(--pink); }
.fill { color: var(--gold); background: rgba(255, 200, 61, .12); padding: 0 .2em; border-radius: .25em; font-weight: 900; }

/* ======================= TV ======================= */
.tvbody { overflow: hidden; }
.club { position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(139, 61, 255, .45), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 0, 0, .35) 38px 41px),
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(0, 0, 0, .25) 86px 89px),
    linear-gradient(#1a0a2e, #0b0414); }
.beams { position: absolute; inset: 0; pointer-events: none; }
.beams i { position: absolute; top: -10vh; width: 30vw; height: 130vh; transform-origin: 50% 0; opacity: .22; filter: blur(8px);
  background: linear-gradient(rgba(255, 255, 255, .9), transparent 80%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: sweep 7s ease-in-out infinite alternate; }
.beams i:nth-child(1) { left: 5vw; background: linear-gradient(var(--pink), transparent 80%); }
.beams i:nth-child(2) { left: 35vw; background: linear-gradient(var(--cyan), transparent 80%); animation-duration: 9s; animation-delay: -3s; }
.beams i:nth-child(3) { left: 65vw; background: linear-gradient(var(--gold), transparent 80%); animation-duration: 8s; animation-delay: -5s; }
@keyframes sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; background: linear-gradient(transparent, rgba(0, 0, 0, .7)), repeating-linear-gradient(90deg, #1b0f2a 0 60px, #22123a 60px 120px); border-top: 3px solid rgba(139, 61, 255, .5); box-shadow: 0 -10px 40px rgba(139, 61, 255, .3); }

/* the music-video TV mounted on the club wall (behind everything on stage) */
/* centered on the back wall, between the battle title and the lyrics (the lyrics box sits low to make room) */
.walltv { position: absolute; top: 18vh; left: 50%; transform: translateX(-50%); width: clamp(200px, 19vw, 330px); z-index: 1; pointer-events: none; }
.walltv-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 10px solid #0d0d10; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 2px #2a2a33, 0 18px 40px rgba(0, 0, 0, .6), 0 0 60px rgba(139, 61, 255, .35); }
.walltv-screen canvas, .walltv-screen video { width: 100%; height: 100%; display: block; object-fit: cover; }
.walltv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }
.walltv-bug { position: absolute; top: 6px; right: 8px; font-family: var(--display); font-size: 11px; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 3px #000; }
.walltv-cap { display: none; position: absolute; left: 8px; bottom: 6px; font-weight: 800; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 4px; }
.tvstage { position: absolute; inset: 7vh 3vw 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.tvcontrols { z-index: 10; }
.crowd { position: absolute; left: 2vw; right: 2vw; bottom: 76px; display: flex; justify-content: center; gap: 14px; z-index: 3; pointer-events: none; }
.crowd .cm.gone { opacity: .3; }
.bob { animation: bob var(--bpm-s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.club .floaters { z-index: 8; }
/* reactions gently raining down on the person in the Deathmatch hot seat */
.floaters .rain { position: absolute; bottom: auto; font-size: var(--sz); opacity: 0; transform: translate(-50%, 0); animation: rainDrop 2.8s ease-in forwards; }
@keyframes rainDrop {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(-8deg); }
  12% { opacity: 1; }
  35% { transform: translate(calc(-50% + var(--sway)), calc(var(--fall) * .3)) rotate(8deg); }
  70% { opacity: 1; transform: translate(calc(-50% - var(--sway) * .6), calc(var(--fall) * .7)) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, var(--fall)) rotate(0); }
}
/* reactions sprinkling out of both sides of the wall TV: the outer span drifts sideways, the inner one goes up and
   falls back down (two animations together make the arc), spinning and fading as it lands */
.floaters .spr { position: absolute; bottom: auto; font-size: var(--sz); opacity: 0; animation: sprX 1.6s linear forwards; }
.floaters .spr i { display: block; font-style: normal; transform: translate(-50%, -50%); animation: sprY 1.6s linear forwards; }
@keyframes sprX { 0% { opacity: 1; transform: translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes sprY {
  0% { transform: translate(-50%, -50%) translateY(0) scale(.4) rotate(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  30% { transform: translate(-50%, -50%) translateY(var(--up)) scale(1) rotate(calc(var(--rot) * .3)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  100% { transform: translate(-50%, -50%) translateY(var(--fall)) scale(.85) rotate(var(--rot)); }
}

.kicker .hot, .hot { color: var(--gold); }
.slam { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 120px); margin: 0; line-height: .95; text-align: center; animation: slam .45s cubic-bezier(.2, 1.4, .4, 1) both; text-shadow: 0 6px 30px rgba(0, 0, 0, .6), 5px 5px 0 var(--purple); }
.slam.fire { color: var(--gold); text-shadow: 0 0 30px rgba(255, 120, 0, .7), 5px 5px 0 #a3220a; }
.sub { font-size: clamp(16px, 1.6vw, 28px); font-weight: 700; text-align: center; max-width: 70vw; margin: 1.5vh 0; text-shadow: 0 2px 10px #000; }
.ring-timer { width: clamp(70px, 7vw, 120px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: clamp(28px, 3vw, 54px); color: var(--gold); border: 5px solid var(--gold); background: rgba(0, 0, 0, .5); box-shadow: 0 0 24px rgba(255, 200, 61, .4); flex: none; }
.ring-timer.low { color: var(--red); border-color: var(--red); animation: pulse .5s infinite alternate; }
.nametag { background: rgba(0, 0, 0, .7); border: 2px solid var(--line); padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: clamp(14px, 1.3vw, 22px); text-align: center; }
.nametag small { display: block; font-size: .65em; color: var(--muted); font-weight: 700; }
.choked { display: inline-block; background: var(--red); color: #fff; font-weight: 800; font-size: .7em; padding: 2px 10px; border-radius: 999px; }

/* lobby */
.lobby { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; }
.joincard { text-align: center; background: rgba(18, 6, 31, .8); border: 2px solid var(--cyan); border-radius: 28px; padding: 2.4vh 4vw; box-shadow: 0 0 40px rgba(45, 226, 255, .3); }
.joincard .url { font-size: clamp(20px, 2.4vw, 40px); font-weight: 900; }
.joincard.withqr { display: flex; align-items: center; gap: 3vw; text-align: left; }
.joincard .qr { text-align: center; }
.joincard .qr svg { display: block; width: clamp(130px, 15vh, 220px); height: auto; background: #fff; border-radius: 12px; padding: 6px; }
.joincard .qr .kicker { margin-top: 8px; }
.bigcode { font-family: var(--display); font-size: clamp(60px, 9vw, 160px); letter-spacing: .12em; color: var(--gold); line-height: 1; text-shadow: 5px 5px 0 var(--pink); }
.crew { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 1.6vw; min-height: 120px; }
.crew .slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crew .fig { --h: clamp(110px, 20vh, 210px) !important; }
.crew .kick { background: var(--red); color: #fff; border-radius: 8px; font-size: 11px; padding: 2px 6px; margin-left: 4px; }
.lobbybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: rgba(0, 0, 0, .55); padding: 10px 20px; border-radius: 999px; font-size: clamp(14px, 1.2vw, 20px); }
.lobbybar .sep { width: 1px; height: 22px; background: var(--line); }
.btn.bsm { padding: 4px 14px; font-size: 18px; color: var(--text); }
.muted.big { font-size: clamp(18px, 2vw, 30px); }

/* ---------- Lil' Diddy's intro video: the studio ---------- */
.studio { position: fixed; inset: 0; z-index: 4; overflow: hidden; background: #050208; }
.studio .cam { position: absolute; left: 0; top: 0; width: 200vw; height: 100vh; transform-origin: 0 0; transition: transform 1.6s cubic-bezier(.45, 0, .2, 1), filter .4s; }
.studio.dark .cam { filter: brightness(0); }
.studio.lit .cam { animation: lightsOn 1s steps(1) both; }
@keyframes lightsOn { 0% { filter: brightness(0); } 15% { filter: brightness(.9); } 25% { filter: brightness(.1); } 40% { filter: brightness(1); } 50% { filter: brightness(.3); } 60%, 100% { filter: brightness(1); } }
.cam.shot-wide { transform: translate(0, 0) scale(1); }
.cam.shot-desk { transform: translate(-14vw, -18vh) scale(1.35); }
.cam.shot-booth { transform: translate(-100vw, 0) scale(1); }
/* back wall: acoustic foam */
.studio .foam { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 25% 30%, rgba(255, 45, 138, .25), transparent 40%), radial-gradient(ellipse at 75% 30%, rgba(45, 226, 255, .2), transparent 40%),
  conic-gradient(from 45deg at 50% 50%, #241238 0 25%, #1a0c2a 0 50%, #241238 0 75%, #1a0c2a 0) 0 0 / 46px 46px; }
.studio .foam::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; background: linear-gradient(#2a1a12, #140a06); border-top: 4px solid #3a2416; } /* the floor */
.studio .records { position: absolute; left: 6vw; top: 10vh; display: flex; gap: 1.6vw; }
.studio .records i { width: 9vh; height: 11vh; background: #111; border: 4px solid #c9a227; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.studio .records i::after { content: ""; width: 7vh; height: 7vh; border-radius: 50%; background: radial-gradient(circle, #111 0 14%, #ffd75e 15% 18%, #e0b43c 19% 100%); }
/* the gallery wall: the players' portraits in mismatched cute frames, each on a little nail */
.studio .gallery { position: absolute; left: 18vw; top: 25vh; width: 45vw; height: 30vh; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 2.2vh 2.4vw; }
.studio .gframe { position: relative; display: grid; place-items: center; padding: 1vh; transform: translateY(var(--dy)) rotate(var(--rot)); box-shadow: 0 1vh 2vh rgba(0, 0, 0, .55); background: #fff6e6; }
.studio .gframe::before { content: ""; position: absolute; left: 50%; top: -1.6vh; width: .9vh; height: .9vh; margin-left: -.45vh; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eee, #777); box-shadow: 0 .2vh .3vh rgba(0, 0, 0, .6); }
.studio .gframe .av { box-shadow: none; }
.studio .gframe.f-gold { border: 1vh solid #d4a537; outline: .4vh solid #8a6514; outline-offset: -.4vh; background: #3a1d4a; border-radius: 3px; box-shadow: inset 0 0 0 .4vh #ffe08a, 0 1vh 2vh rgba(0, 0, 0, .55); }
.studio .gframe.f-round { border-radius: 50%; border: .9vh solid #ff7ab8; outline: .5vh dotted #ffd1e6; outline-offset: .3vh; background: #ffe4f1; }
.studio .gframe.f-polaroid { padding: .9vh .9vh 3.6vh; background: #fdfdf8; border-radius: 2px; }
.studio .gframe.f-scallop { border-radius: 2.2vh; border: .8vh dashed #6fdcff; background: #e3f8ff; }
.studio .gframe.f-wood { border: 1.1vh solid #7a4a25; background: #f3e2c4; border-radius: 4px; box-shadow: inset 0 0 0 .3vh #4d2c13, 0 1vh 2vh rgba(0, 0, 0, .55); }
.studio .gframe.f-neon { background: #120624; border: .4vh solid #2de2ff; border-radius: 1.2vh; box-shadow: 0 0 1.4vh #2de2ff, inset 0 0 1.2vh rgba(45, 226, 255, .5); }
.studio .gframe.f-arch { border-radius: 50% 50% 1vh 1vh; border: .9vh solid #b98aff; background: #f0e6ff; padding-top: 2vh; }
.studio .gframe .sticker { position: absolute; right: -1.4vh; top: -1.2vh; font-size: 3vh; transform: rotate(14deg); filter: drop-shadow(0 .3vh .3vh rgba(0, 0, 0, .4)); }
.studio .neon { position: absolute; left: 32vw; top: 7vh; font-family: var(--display); font-size: 6vh; color: #fff; text-align: center; line-height: 1; padding: 1.4vh 2vw; border: 3px solid var(--pink); border-radius: 14px;
  text-shadow: 0 0 8px var(--pink), 0 0 22px var(--pink), 0 0 40px var(--pink); box-shadow: 0 0 20px var(--pink), inset 0 0 20px rgba(255, 45, 138, .4); animation: hubFlicker 4s infinite; }
.studio .neon small { display: block; font-size: .45em; letter-spacing: .5em; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); margin-top: .6vh; }
.studio .onair { position: absolute; left: 76vw; top: 8vh; font-family: var(--display); font-size: 3.4vh; color: #fff; background: #c4102a; padding: .8vh 1.4vw; border-radius: 8px; box-shadow: 0 0 30px #ff2040; animation: pulse 1s infinite alternate; }
.studio .speaker { position: absolute; bottom: 22vh; width: 11vw; height: 34vh; background: linear-gradient(#1b1b20, #0c0c10); border: 3px solid #000; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.studio .speaker.l { left: 6vw; } .studio .speaker.r { left: 80vw; }
.studio .speaker i { width: 7vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #333 0 18%, #0a0a0a 20% 55%, #2a2a2e 57% 62%, #111 64%); animation: thump calc(var(--bpm-s)) ease-out infinite; }
.studio .speaker i:first-child { width: 4.4vw; }
@keyframes thump { 0% { transform: scale(1.08); } 40%, 100% { transform: scale(1); } }
.studio .desk { position: absolute; left: 24vw; bottom: 14vh; width: 50vw; height: 22vh; background: linear-gradient(#2c2c34, #15151a); border: 3px solid #000; border-radius: 16px 16px 6px 6px; transform: perspective(800px) rotateX(18deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .6); padding: 2vh 2vw; display: flex; flex-direction: column; gap: 2vh; }
.studio .faders { display: flex; justify-content: space-between; height: 11vh; }
.studio .faders span { width: 1vw; background: #0a0a0c; border-radius: 4px; position: relative; }
.studio .faders span i { position: absolute; left: -.6vw; width: 2.2vw; height: 1.6vh; background: linear-gradient(#ddd, #888); border-radius: 3px; animation: fader 2.2s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes fader { from { top: 10%; } to { top: 80%; } }
.studio .leds { display: flex; justify-content: space-between; }
.studio .leds i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 8px #3dff9a; animation: blink .7s steps(1) infinite; animation-delay: var(--d); }
.studio .leds i:nth-child(3n) { background: var(--gold); box-shadow: 0 0 8px var(--gold); } .studio .leds i:nth-child(5n) { background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes blink { 50% { opacity: .2; } }
/* the vocal booth (the second half of the set) */
.studio .booth { position: absolute; left: 112vw; top: 8vh; width: 76vw; height: 70vh; }
.studio .booth .glass { position: absolute; inset: 0; border: 10px solid #15151a; border-radius: 12px; background: linear-gradient(135deg, rgba(120, 200, 255, .12), rgba(255, 255, 255, .02) 40%, rgba(120, 200, 255, .1)); box-shadow: inset 0 0 60px rgba(0, 0, 0, .6); }
.studio .boothspot { position: absolute; left: 50%; top: 0; width: 40vw; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(255, 240, 200, .5), transparent 70%); animation: pulse 2.4s infinite alternate; }
.studio .stand { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.studio .stand .boothmic { width: 7vh; transform: rotate(-12deg); filter: drop-shadow(0 0 20px rgba(255, 255, 255, .4)); }
.studio .stand i { width: 6px; height: 30vh; background: linear-gradient(90deg, #333, #999, #333); }
.studio .booth-sign { position: absolute; left: 3vw; top: 3vh; font-family: var(--display); color: var(--gold); font-size: 3vh; letter-spacing: .2em; text-shadow: 0 0 12px var(--gold); }
/* Lil' Diddy, walking around the set (inside the camera) */
.studio .diddy { position: absolute; left: -20vw; bottom: 3vh; z-index: 2; transition: left 1.5s ease-in-out; }
.studio .diddy .fig { --h: 70vh !important; }
.studio .diddy .rapper { transform-origin: 50% 100%; }
.studio .diddy.walking .rapper { animation: walk .28s ease-in-out infinite alternate; }
@keyframes walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-10px) rotate(3deg); } }
.studio .diddy.reach .rapper { animation: reach .45s ease-in-out; }
@keyframes reach { 50% { transform: translateY(-14px) rotate(7deg) scale(1.03); } }
.studio .diddy.thumbs .rapper { animation: bob var(--bpm-s) ease-in-out infinite alternate; }
.studio.dark .cam { filter: brightness(.22) saturate(.6); }
/* the things he switches on */
.studio .lightswitch, .studio .onair-switch { position: absolute; width: 3vw; height: 5.4vh; background: #eee; border: 2px solid #999; border-radius: 6px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.studio .lightswitch { left: 65vw; top: 44vh; } .studio .onair-switch { left: 75vw; top: 44vh; background: #c4102a; border-color: #700; }
.studio .lightswitch i, .studio .onair-switch i { width: 30%; height: 50%; background: #777; border-radius: 3px; transform: translateY(40%); transition: transform .2s; }
.studio .lightswitch.on i, .studio .onair-switch.on i { transform: translateY(-40%); background: #333; }
.studio .onair { opacity: .35; box-shadow: none; animation: none; background: #5a1018; }
.studio .onair.on { opacity: 1; background: #e01030; box-shadow: 0 0 40px #ff2040, 0 0 80px rgba(255, 32, 64, .5); animation: pulse 1s infinite alternate; }
.studio .desk .faders span i { top: 80%; animation: none; transition: top .6s cubic-bezier(.2, 1.4, .4, 1); }
.studio .desk.on .faders span i { animation: fader 2.2s ease-in-out infinite alternate; animation-delay: var(--d); }
.studio .desk .leds i { opacity: .15; animation: none; box-shadow: none; }
.studio .desk.on .leds i { opacity: 1; animation: blink .7s steps(1) infinite; animation-delay: var(--d); box-shadow: 0 0 8px currentColor; }
.studio .booth .boothspot { opacity: 0; animation: none; transition: opacity .6s; }
.studio .booth.on .boothspot { opacity: 1; animation: pulse 2.4s infinite alternate; }
.studio .booth .boothmic { filter: brightness(.5); transition: filter .6s; }
.studio .booth.on .boothmic { filter: drop-shadow(0 0 20px rgba(255, 255, 255, .6)); }
/* the instruction cards */
/* small, up in the top-left corner (below the logo), out of Lil' Diddy's way */
.studio .introcard { position: absolute; left: 2vw; top: 9vh; z-index: 4; max-width: 34vw; transform-origin: 0 50%; transform: scale(.7); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.5, .4, 1);
  background: rgba(10, 3, 20, .88); border: 3px solid var(--gold); border-radius: 22px; padding: 2vh 2.4vw; display: flex; align-items: center; gap: 1.4vw;
  font-weight: 900; font-size: clamp(15px, 1.7vw, 30px); line-height: 1.15; color: #fff; text-align: left; box-shadow: 0 0 40px rgba(255, 200, 61, .35), 0 20px 50px rgba(0, 0, 0, .6); }
.studio .introcard span { font-size: 1.6em; }
.studio .introcard.show { opacity: 1; transform: scale(1); }
.studio .bubble2 { position: absolute; left: 22vw; bottom: 50vh; max-width: 46vw; background: #fffaf0; color: #1a1010; border-radius: 24px; padding: 2.2vh 2vw; font-weight: 900; font-size: clamp(18px, 2.3vw, 40px); line-height: 1.2; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); z-index: 3; opacity: 0; transform: scale(.7); transform-origin: 0 100%; transition: opacity .25s, transform .3s cubic-bezier(.2, 1.5, .4, 1); }
.studio .bubble2::before { content: ""; position: absolute; left: -18px; bottom: 26px; border: 14px solid transparent; border-right: 22px solid #fffaf0; }
.studio .bubble2.show { opacity: 1; transform: scale(1); }
.studio .introlog { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(10, 3, 20, .55), rgba(10, 3, 20, .85)); transition: opacity .3s; }
.studio .introlog.show { opacity: 1; }
.studio .introlog.show .sh-logo { animation: slam .6s cubic-bezier(.2, 1.4, .4, 1) both; font-size: 16vh; }
.studio .confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.studio .confetti i { position: absolute; top: -4vh; left: var(--x); width: 12px; height: 18px; background: var(--c); transform: rotate(var(--r)); animation: confetti 3s ease-in var(--d) forwards; }
@keyframes confetti { to { transform: translateY(110vh) rotate(calc(var(--r) + 720deg)); } }

/* intro */
.intro { display: flex; align-items: center; gap: 4vw; width: 100%; justify-content: center; }
.dj-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.djbubble { background: #fffaf0; color: #1a1010; border-radius: 20px; padding: 14px 20px; font-weight: 800; font-size: clamp(14px, 1.3vw, 22px); max-width: 300px; text-align: center; }
.howto { display: flex; flex-direction: column; gap: 2vh; max-width: 760px; }
.gstep { display: flex; gap: 18px; align-items: center; background: rgba(18, 6, 31, .8); border: 1px solid var(--line); border-radius: 20px; padding: 16px 22px; animation: rise .6s both; animation-delay: var(--d); }
.gstep .ge { font-size: clamp(34px, 3.4vw, 56px); }
.gstep b { font-size: clamp(18px, 1.9vw, 32px); }
.gstep p { margin: 4px 0 0; color: var(--muted); font-weight: 700; font-size: clamp(13px, 1.15vw, 19px); }
.intro .ring-timer { position: absolute; right: 0; top: 0; }

/* writing */
.write { display: flex; flex-direction: column; align-items: center; gap: 1.5vh; width: 100%; }
.matchups { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 1vh; }
.match { display: flex; align-items: center; gap: 12px; background: rgba(18, 6, 31, .8); border: 1px solid var(--line); border-radius: 22px; padding: 12px 18px; }
.mside { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; position: relative; min-width: 90px; background: rgba(18, 6, 31, .5); border-radius: 18px; padding: 10px; }
.mside i { font-style: normal; font-size: 20px; }
.mside.done { box-shadow: 0 0 0 2px var(--green); }
.vs { font-family: var(--display); color: var(--pink); font-size: 26px; }

/* the battle */
.battle { display: flex; flex-direction: column; align-items: center; gap: 2vh; width: 100%; height: 100%; }
.beatname { text-align: center; }
.beatname h2 { font-size: clamp(24px, 3vw, 54px); margin-top: 4px; }
.arena { flex: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr) minmax(0, 1fr); align-items: end; gap: 2vw; min-height: 0; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; transition: filter .4s, transform .4s; }
.mc.left { grid-column: 1; grid-row: 1; } .mc.right { grid-column: 3; grid-row: 1; }
.mc .fig { --h: clamp(180px, 40vh, 380px) !important; }
.mc .spot { position: absolute; left: 50%; bottom: 30px; width: 130%; height: 115%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255, 240, 200, .45), transparent 65%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.mc.live .spot { opacity: 1; }
/* the rapper: figure + mic + a mouth that flaps while their line is being rapped */
.rapper { position: relative; display: inline-block; line-height: 0; }
.rapper .mouth { position: absolute; left: 50%; top: 26.2%; width: 11%; aspect-ratio: 1.5; transform: translate(-50%, -50%) scaleY(.2); border-radius: 45% 45% 55% 55%;
  background: radial-gradient(ellipse at 50% 85%, #e0566e 0 30%, #3a0710 32%); border: 2px solid #170c08; opacity: 0; transition: opacity .1s; }
.rapper.selfie .mouth { top: 21%; width: 14%; }
.mc.talking .mouth { opacity: 1; animation: talk .11s ease-in-out infinite alternate; }
/* the puppet jaw, ventriloquist-dummy style: cut along the lips, with hinge lines running from the corners of the
   mouth down to the jaw. That piece drops open while they rap, showing teeth and a tongue behind it. */
.rapper .jaw, .rapper .cavity { position: absolute; left: 0; top: 0; pointer-events: none;
  clip-path: polygon(41.7% 26.8%, 58.3% 26.8%, 65.8% 28.6%, 58.3% 30.2%, 50% 32%, 41.7% 30.2%, 34.2% 28.6%); }
.rapper .cavity { display: none; filter: none;
  background: radial-gradient(ellipse 8% 1.6% at 50% 29.4%, #e0566e 0 70%, transparent 74%), linear-gradient(#f6efe6 0 27.5%, #2a0408 27.5%); }
.mc.talking .rapper .cavity { display: block; }
.mc.talking .rapper .jaw { animation: jaw .3s ease-in-out infinite; }
@keyframes jaw { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(2.3%); } 55% { transform: translateY(.6%); } 75% { transform: translateY(1.8%); } }
/* when the voice reports its words, the jaw chomps once per word instead of looping */
.mc.talking.wordy .rapper .jaw, .mc.talking.wordy .mouth { animation: none; }
.mc.talking.wordy.chomp .rapper .jaw { animation: chomp .26s ease-out; }
.mc.talking.wordy.chomp .mouth { animation: mouthchomp .26s ease-out; }
@keyframes chomp { 0% { transform: translateY(0); } 35% { transform: translateY(2.4%); } 100% { transform: translateY(0); } }
@keyframes mouthchomp { 0%, 100% { transform: translate(-50%, -50%) scaleY(.15); } 35% { transform: translate(-50%, -50%) scaleY(1); } }
@keyframes talk { from { transform: translate(-50%, -50%) scaleY(.15); } to { transform: translate(-50%, -50%) scaleY(1); } }
.rapper .mic { position: absolute; left: 53%; top: 23%; width: 21%; transform-origin: 50% 12%; transform: rotate(-28deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.rapper .mic svg { width: 100%; height: auto; display: block; }
.mc.right .rapper .mic { left: 26%; transform: rotate(28deg); }
.mc.talking .rapper .mic { animation: micbob calc(var(--bpm-s) / 2) ease-in-out infinite alternate; }
@keyframes micbob { from { margin-top: 0; } to { margin-top: 4px; } }
/* the dance: bounce on every beat, sway side to side, squash and stretch */
.mc.live .rapper { animation: rapdance calc(var(--bpm-s) * 2) ease-in-out infinite; transform-origin: 50% 100%; }
.mc.right.live .rapper { animation-direction: reverse; }
@keyframes rapdance {
  0% { transform: translateY(0) rotate(-5deg) scale(1.03, .97); }
  25% { transform: translateY(-20px) rotate(0) scale(.97, 1.04); }
  50% { transform: translateY(0) rotate(5deg) scale(1.03, .97); }
  75% { transform: translateY(-20px) rotate(0) scale(.97, 1.04); }
  100% { transform: translateY(0) rotate(-5deg) scale(1.03, .97); }
}
/* the one waiting their turn nods along, unimpressed */
.mc.dim .rapper { animation: nod calc(var(--bpm-s) * 2) ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes nod { 50% { transform: rotate(2deg) translateY(3px); } }
/* BOOM: lights flash and the club shakes on punchlines */
.club::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .55), rgba(255, 45, 138, .35) 40%, transparent 75%); }
.club.boom::after { animation: flashbang .7s ease-out; }
.club.boom .tvstage { animation: shake .45s; }
.club.boom .tvstage:has(.studio) { animation: none; } /* the intro video is full-screen; don't shake it out of place */
@keyframes flashbang { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shake { 10%, 50%, 90% { transform: translate(-8px, 3px); } 30%, 70% { transform: translate(8px, -3px); } }
.lyrics .ln.punch { color: #fff; text-shadow: 0 0 18px rgba(255, 200, 61, .6); animation: lineIn .35s cubic-bezier(.2, 1.4, .4, 1) both, punchpop .5s .35s; }
@keyframes punchpop { 50% { transform: scale(1.06); } }
.mc.live .nametag { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 200, 61, .5); }
.mc.dim { filter: brightness(.45) saturate(.5); }
.mc.dim .rapper { scale: .92; }
@keyframes rap { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-14px) rotate(3deg); } }
.lyrics { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4vh; background: rgba(10, 3, 20, .82); border: 2px solid rgba(139, 61, 255, .6); border-radius: 26px; padding: 2vh 2vw; min-height: 24vh; display: flex; flex-direction: column; justify-content: center; gap: 1.2vh; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lyrics .who { font-family: var(--display); color: var(--cyan); font-size: clamp(18px, 1.8vw, 32px); }
.lyrics .beattag { float: right; font-family: var(--body); font-weight: 800; font-size: .6em; color: var(--muted); }
.lyrics .verse { display: flex; flex-direction: column; gap: 1.2vh; }
.lyrics .ln { font-size: clamp(16px, 1.75vw, 32px); font-weight: 900; line-height: 1.2; }
.ln.in { animation: lineIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-30px) scale(.95); } }
.vsintro { display: flex; align-items: center; justify-content: center; gap: 2vw; flex-wrap: wrap; text-align: center; }
.vsintro span { font-family: var(--display); font-size: clamp(24px, 3vw, 56px); }
.vsintro b { font-family: var(--display); font-weight: 400; color: var(--pink); font-size: clamp(40px, 5vw, 96px); animation: slam .5s cubic-bezier(.2, 1.4, .4, 1) both; }

/* voting */
.vote2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2vw; align-items: center; width: 100%; }
.vcard { background: rgba(10, 3, 20, .85); border: 2px solid var(--line); border-radius: 24px; padding: 2vh 1.6vw; }
.vcard.left { border-color: var(--cyan); } .vcard.right { border-color: var(--pink); }
.vhead { display: flex; align-items: center; gap: 12px; margin-bottom: 1.4vh; flex-wrap: wrap; font-size: clamp(18px, 1.8vw, 30px); }
.vcard .verse .ln { font-size: clamp(15px, 1.5vw, 26px); font-weight: 800; line-height: 1.25; margin-top: .6vh; }
.bigvs { font-family: var(--display); font-size: clamp(36px, 4vw, 80px); color: var(--gold); }
.votebar { display: flex; align-items: center; gap: 20px; font-size: clamp(18px, 1.8vw, 30px); font-weight: 800; margin-top: 2vh; }

/* results */
.results2 { display: flex; justify-content: center; gap: 10vw; align-items: flex-end; flex: 1; }
.rcol { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.rcol .fig { --h: clamp(160px, 34vh, 320px) !important; }
.rcol.won .fig { animation: rap var(--bpm-s) ease-in-out infinite alternate; filter: drop-shadow(0 0 30px var(--gold)); }
.rcol.lost .fig { filter: grayscale(.8) brightness(.6); transform: rotate(-8deg) translateY(10px); }
.stamp { position: absolute; top: 10%; z-index: 2; font-family: var(--display); font-size: clamp(36px, 4.4vw, 80px); color: var(--gold); border: 6px solid var(--gold); padding: 4px 18px; border-radius: 14px; transform: rotate(-10deg); background: rgba(0, 0, 0, .55); animation: stampin .5s .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.stamp.bodied { color: #fff; border-color: #fff; font-size: clamp(22px, 2.6vw, 46px); transform: rotate(8deg); }
.pct { width: clamp(180px, 22vw, 380px); height: 34px; background: rgba(255, 255, 255, .08); border-radius: 99px; position: relative; overflow: hidden; }
.pct i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--pink), var(--gold)); animation: grow 1.2s .4s both; }
@keyframes grow { from { width: 0; } }
.pct span { position: relative; display: block; text-align: center; line-height: 34px; font-weight: 900; text-shadow: 0 1px 4px #000; }
.gain { font-family: var(--display); font-size: clamp(24px, 2.4vw, 44px); color: var(--green); }
.gain.muted { font-family: var(--body); font-size: 16px; color: var(--muted); }

/* scoreboard */
.scoreboard { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; width: 100%; }
.sboard { display: flex; flex-direction: column; gap: 10px; width: min(900px, 80vw); }
.brow { display: grid; grid-template-columns: 40px 60px minmax(0, 220px) 1fr 90px; align-items: center; gap: 14px; background: rgba(18, 6, 31, .82); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; animation: rise .5s both; animation-delay: var(--d); font-size: clamp(16px, 1.5vw, 24px); }
.brow .rank { font-family: var(--display); color: var(--gold); font-size: 1.3em; }
.brow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbar { height: 14px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.bbar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--purple), var(--cyan)); animation: grow 1.2s .5s both; }
.brow .pts { font-family: var(--display); text-align: right; }

/* the Roast Cypher */
.roaststage { display: flex; flex-direction: column; align-items: center; gap: 2vh; width: 100%; height: 100%; }
.hotseat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; animation: rise .5s both; }
.hotseat .fig { --h: clamp(150px, 30vh, 330px) !important; animation: tremble .12s infinite alternate; }
.hotseat .spot { position: absolute; inset: -10% -40% 10%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 120, 40, .5), transparent 65%); pointer-events: none; }
.roastline { min-height: 0; width: min(1100px, 86vw); text-align: center; align-self: center; margin-bottom: 0; }
.roastline .punch { font-size: clamp(26px, 3vw, 56px); }
.roastgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; width: 100%; max-height: 52vh; overflow: hidden; }
.rcard { position: relative; display: flex; gap: 12px; align-items: center; background: rgba(18, 6, 31, .85); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px 12px 44px; font-weight: 800; font-size: clamp(14px, 1.25vw, 21px); }
.rcard p { margin: 0; }
.rcard .num { position: absolute; left: 12px; top: 10px; font-family: var(--display); color: var(--gold); font-size: 22px; }

/* the champion brawl */
.brawl { position: absolute; inset: 0; z-index: 9; background: radial-gradient(circle at 50% 60%, rgba(60, 10, 60, .75), rgba(5, 0, 10, .92)); overflow: hidden; transition: opacity .5s; }
.brawl.out { opacity: 0; }
.brawl-title { position: absolute; top: 7vh; left: 0; right: 0; text-align: center; font-family: var(--display); font-size: clamp(30px, 4.6vw, 80px); color: var(--gold); text-shadow: 0 0 30px rgba(255, 200, 61, .6), 5px 5px 0 var(--pink); animation: slam .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.brawl .champ { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.brawl .champ .fig { --h: 40vh !important; }
.brawl .crown { position: absolute; left: 50%; top: -5vh; transform: translateX(-50%) rotate(-8deg); font-size: 8vh; filter: drop-shadow(0 0 14px rgba(255, 200, 61, .8)); }
.brawl .dizzy { position: absolute; left: 50%; top: 2vh; width: 16vh; height: 6vh; transform: translateX(-50%); opacity: 0; }
.brawl .dizzy i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 4vh; animation: orbit 1s linear infinite; }
.brawl .dizzy i:nth-child(2) { animation-delay: -.33s; } .brawl .dizzy i:nth-child(3) { animation-delay: -.66s; }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0) translateX(7vh) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(7vh) rotate(-360deg); } }
.brawl .attacker { position: absolute; bottom: 14vh; transition: left .9s cubic-bezier(.5, 0, .7, 1), opacity .25s; }
.brawl .attacker .fig { --h: 34vh !important; }
.brawl .attacker.l { left: calc(-18vw - var(--i) * 7vw); } .brawl .attacker.r { left: calc(108vw + var(--i) * 7vw); }
.brawl .attacker.r .fig { transform: scaleX(-1); }
.brawl.rush .attacker .fig { animation: walk .14s ease-in-out infinite alternate; }
.brawl.rush .attacker.l { left: calc(22vw - var(--i) * 6vw); } .brawl.rush .attacker.r { left: calc(66vw + var(--i) * 6vw); }
.brawl.shoot .attacker .fig { animation: none; }
/* their weapons: held out at hand height, pointing at the champion */
.brawl .attacker .weapon { position: absolute; top: 40%; font-size: 7vh; opacity: 0; transition: opacity .2s; }
.brawl .attacker.l .weapon { right: -4vh; transform: scaleX(-1); } /* the emoji points left; flip it to point right */
.brawl .attacker.r .weapon { left: -4vh; }
.brawl.rush .attacker .weapon { opacity: 1; }
.brawl.shoot .attacker .weapon { animation: recoil .14s ease-out infinite; }
.brawl.shoot .attacker.l .weapon { animation-name: recoilL; }
@keyframes recoil { 50% { transform: translateX(6px) rotate(8deg); } }
@keyframes recoilL { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateX(6px) rotate(8deg); } }
/* the water guns spray white skeet at the champion: each drop flies from the gun (--x0,--y0) to the champ (--x1,--y1) */
.brawl .pops span.squirt { left: var(--x0); top: var(--y0); font-size: 4.5vh; filter: grayscale(1) brightness(2.2) drop-shadow(0 0 6px rgba(255, 255, 255, .8)); animation: squirt .45s linear forwards; }
@keyframes squirt { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.5); } 90% { opacity: 1; } 100% { opacity: 0; left: var(--x1); top: var(--y1); transform: translate(-50%, -50%) scale(1.2); } }
.brawl.shoot .champ { animation: hit .09s linear infinite alternate; }
@keyframes hit { from { transform: translateX(-52%) rotate(-3deg); } to { transform: translateX(-48%) rotate(3deg); } }
/* the melee: they close in and take turns lunging at the champion (skeeting point-blank) */
.brawl.fight .attacker.l { left: calc(36vw - var(--i) * 5vw); } .brawl.fight .attacker.r { left: calc(54vw + var(--i) * 5vw); }
.brawl.fight .attacker .weapon { animation: none; }
.brawl.fight .attacker.l { animation: lungeR .42s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }
.brawl.fight .attacker.r { animation: lungeL .42s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s - .21s); }
@keyframes lungeR { 0%, 100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(4vw) rotate(9deg); } 55% { transform: translateX(3.4vw) rotate(4deg); } }
@keyframes lungeL { 0%, 100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(-4vw) rotate(-9deg); } 55% { transform: translateX(-3.4vw) rotate(-4deg); } }
.brawl.fight .champ { z-index: 1; animation: beaten .21s linear infinite; }
@keyframes beaten {
  0% { transform: translateX(-50%) rotate(0); filter: none; }
  25% { transform: translateX(-46%) rotate(5deg); filter: brightness(2.2) saturate(.3); }
  50% { transform: translateX(-53%) rotate(-6deg); filter: none; }
  75% { transform: translateX(-49%) rotate(3deg) translateY(1vh); filter: brightness(1.8) saturate(.3); }
  100% { transform: translateX(-50%) rotate(0); filter: none; }
}
/* afterwards they back off and celebrate; the champion drops */
.brawl.after .attacker.l, .brawl.after .attacker.r { animation: none; }
.brawl.after .attacker.l { left: calc(18vw - var(--i) * 7vw); } .brawl.after .attacker.r { left: calc(72vw + var(--i) * 7vw); }
.brawl.after .attacker .fig { animation: bob var(--bpm-s) ease-in-out infinite alternate; }
.brawl.after .champ { opacity: 1; animation: none; transform: translateX(-50%) translateY(-2vh) rotate(-84deg); }
.brawl.after .dizzy { opacity: 1; transition: opacity .3s .3s; }
.brawl .pops span { position: absolute; font-size: 8vh; transform: translate(-50%, -50%) rotate(var(--r)); animation: brawlpop .7s ease-out forwards; z-index: 2; }
.brawl .pops span.word { font-family: var(--display); font-size: 6vh; color: #ffe14a; -webkit-text-stroke: 3px #1a0a2a; text-shadow: 4px 4px 0 var(--pink); }
@keyframes brawlpop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } }

/* the finale */
.final { display: flex; flex-direction: column; align-items: center; gap: 2vh; width: 100%; }
.bestroast { background: rgba(18, 6, 31, .85); border: 2px solid var(--gold); border-radius: 22px; padding: 14px 26px; text-align: center; max-width: 80vw; font-size: clamp(16px, 1.6vw, 28px); font-weight: 800; animation: rise .6s 1.8s both; }
.bestroast p { margin: 8px 0 0; }
.podium { display: flex; align-items: flex-end; gap: 2vw; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: rise .7s both; animation-delay: var(--d); }
.pod .block { width: clamp(120px, 12vw, 200px); background: linear-gradient(var(--purple), #3a1470); border-radius: 12px 12px 0 0; text-align: center; font-family: var(--display); font-size: clamp(16px, 1.6vw, 28px); padding: 10px 0; }
.pod .block span { display: block; font-size: 2em; color: var(--gold); }
.pod.p1 .block { min-height: 13vh; } .pod.p2 .block { min-height: 10vh; } .pod.p3 .block { min-height: 8vh; }
.pod .block span { line-height: 1; }
.final { gap: 1.4vh; }
.final .podium .fig { --h: clamp(100px, 19vh, 200px) !important; }
.pod.p1 .fig { animation: rap var(--bpm-s) ease-in-out infinite alternate; filter: drop-shadow(0 0 30px var(--gold)); }

/* ======================= PHONE ======================= */
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voice { display: flex; background: var(--ink-3); border-radius: 14px; border: 2px solid transparent; overflow: hidden; }
.voice.on { border-color: var(--gold); background: #3d1d0a; }
.vpick { flex: 1; background: none; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0; }
.vpick .ve { font-size: 24px; }
.vpick b { font-size: 15px; }
.vpick small { font-size: 11px; color: var(--muted); }
.beatfam { font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--cyan); margin: 14px 0 8px; text-transform: uppercase; }
.vplay { background: rgba(255, 255, 255, .06); width: 44px; font-size: 18px; flex: none; }
.verse.vsm { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.blank { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 99px; background: var(--pink); color: #fff; font-family: var(--display); font-size: .8em; vertical-align: middle; }
.blankf .row input { flex: 1; min-width: 0; background: var(--ink); border: 2px solid var(--ink-3); border-radius: 12px; padding: 14px; color: var(--text); font-size: 18px; outline: none; }
.blankf .row input:focus, .field .row input:focus { border-color: var(--pink); }
.field .row input { flex: 1; min-width: 0; background: var(--ink); border: 2px solid var(--ink-3); border-radius: 12px; padding: 14px; color: var(--text); font-size: 18px; outline: none; }
.dice { padding: 10px 14px; font-size: 22px; flex: none; }
.rhymef label { color: var(--gold); }
.rhymef label b { color: #fff; text-transform: uppercase; }
.rhymef .row input { border-color: rgba(255, 200, 61, .5); }
.whochips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.whochips .pill { border: 1px solid var(--line); color: var(--text); }
.vopt { display: flex; flex-direction: column; gap: 4px; }
.vopt b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--cyan); }
.vopt .ln { font-size: 15px; font-weight: 700; }
.upnext { background: linear-gradient(135deg, #3a1470, #8b3dff); text-align: center; }
.roastme { background: linear-gradient(135deg, #5a1a00, #b04000); }
.reacts button.pop { animation: reactPop .25s; }
.reacts button .emo { font-style: normal; display: block; }
/* reactions drawn white instead of their usual color (the 💦) */
.white-emo { filter: grayscale(1) brightness(2.2) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }