/* PumpTank broadcast: the studio stage, its camera, HUD graphics and set animation.
   Page layout, panels and forms live in app.css (loaded first; it also defines the design tokens). */

/* Wordmark: outlined Kenyan Coffee artwork with the shark bite (tools/make-wordmark.mjs). */
.wordmark { display: block; height: 1em; width: auto; }
.bug .wordmark { height: 1em; }
.podium-logo .wordmark { height: 26px; margin: 0 auto; filter: drop-shadow(0 0 6px rgba(134, 239, 172, .5)); }

/* ─── Stage + camera ──────────────────────────────────────── */
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #060608; border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); container-type: inline-size; isolation: isolate; }
.world { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; will-change: transform; }
.world > * { position: absolute; }
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 50%, rgba(0, 0, 0, .55) 100%), linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 18%, transparent 82%, rgba(0, 0, 0, .3)); }
/* Broadcast finish: fine film grain over the picture (not over the HUD). */
.vignette::after { content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* The set: a rendered studio plate with live light layers (studio.js) on top. */
.set-plate, .set { left: 0; top: 0; width: 1600px; height: 900px; }
.set-plate { display: block; user-select: none; }

/* Fills the blank screen in the set plate. */
.screen { left: 545px; top: 136px; width: 382px; height: 224px; }
.screen-frame { position: absolute; inset: 0; padding: 3px; border-radius: 3px; background: #050506; box-shadow: 0 0 50px rgba(134, 239, 172, .16); }
.screen-inner { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; position: relative;
  background: radial-gradient(400px 200px at 30% 20%, rgba(134, 239, 172, .14), transparent 70%), linear-gradient(160deg, #111113, #060608); color: var(--text-strong); }
.screen-inner::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.screen-pitch { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; height: 100%; padding: 14px 18px; }
.screen-avatar svg { width: 80px; height: 80px; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.screen-copy h2 { font: 900 24px/1.08 var(--display); letter-spacing: .01em; margin: 6px 0 8px; }
.screen-copy .ask { font-size: 17px; color: var(--text); }
.screen-copy .ask b { color: var(--accent); }
.screen-copy .by { margin-top: 6px; font-size: 12px; color: var(--muted); }
.screen-idle { height: 100%; display: grid; place-content: center; text-align: center; padding: 24px; }
.screen-idle .kicker { color: var(--accent); letter-spacing: .25em; text-transform: uppercase; font-size: 12px; }
.screen-idle h2 { font: 900 36px/1.05 var(--display); letter-spacing: .02em; margin: 8px 0; }
.screen-idle p { color: var(--muted); font-size: 14px; margin: 0; }

/* Pitcher stands on the rug behind a slim lectern. Anchored at its feet. */
.podium-group { width: 220px; height: 420px; transform: translate(-50%, -100%) scale(.9); transform-origin: 50% 100%; z-index: 900; }
.pitcher { position: absolute; inset: 0; transition: opacity .4s; }
.pitcher.empty { opacity: 0; }
/* Full-body contestant; the lectern (drawn after it) hides everything below the waist. */
.pitcher-fig { position: absolute; left: calc(50% - 160px); top: 23px; width: 320px; height: 320px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.pitcher-fig .pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .22s ease; }
.pitcher-fig .pose.on { opacity: 1; }
.pitcher-fig .pose[data-pose="talk"], .pitcher-fig .pose[data-pose="talk-closed"] { transition-duration: .04s; }
.podium { position: absolute; left: 10px; top: 178px; width: 200px; height: 242px; }
/* Rendered acrylic lectern; the wordmark and pitcher name sit on its glass front. */
.podium-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
.podium-front { position: absolute; left: 22%; right: 22%; top: 20%; bottom: 22%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.podium::after { content: ''; position: absolute; left: -30px; right: -30px; bottom: -16px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(74, 222, 128, .35), transparent 70%); }
.podium-logo { font: 900 30px/1 var(--display); letter-spacing: .04em; color: var(--text-strong); }
.podium-logo b { color: var(--accent); font-weight: 900; }
.podium-name { font-size: 15px; color: var(--text); max-width: 108px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Judges: armchair + figure + side table, anchored where the chair meets the floor and scaled by depth. */
.judges { inset: 0; pointer-events: none; }
.seat { position: absolute; width: 180px; height: 250px; transform: translate(-50%, -100%) scale(var(--s)); transform-origin: 50% 100%; }
/* Layers inside a seat: rendered armchair → judge → side table. */
.chair-img, .chair-arms { position: absolute; left: -4px; bottom: 0; width: 188px; user-select: none; }
.chair-img { z-index: 0; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); }
.chair-arms { z-index: 4; pointer-events: none; }
/* Contact shadows so chair and table sit on the platform. */
.seat::before { content: ''; position: absolute; left: 2px; right: 2px; bottom: -8px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%); z-index: 0; }
.side-table::before { content: ''; position: absolute; left: -6px; right: -6px; bottom: -5px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }
.rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
.seat .judge-figure:not(.layered) { position: absolute; left: 0; right: 0; bottom: 42px; height: 208px; z-index: 1; }
.side-table { position: absolute; left: -74px; bottom: 0; width: 72px; height: 98px; z-index: 3; }
.side-table img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }

/* Full-body judges sit in front of the seat cushion (legs over its edge), between the armrests. */
.seat .judge-figure.fullbody { z-index: 3; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.judge-figure.posed { animation: sitbreathe 4.6s ease-in-out infinite; transform-origin: 50% 72%; }
.judge-figure.posed .pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .22s ease; }
.judge-figure.posed .pose.on { opacity: 1; }
/* Mouth frames swap instantly; other pose changes cross-fade. */
.judge-figure.posed .pose[data-pose="talk"], .judge-figure.posed .pose[data-pose="talk-closed"] { transition-duration: .04s; }
.seat.speaking .judge-figure.posed { animation: posebob .42s ease-in-out infinite alternate; }
@keyframes sitbreathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.004 1.012; } }
@keyframes posebob { from { translate: 0 0; } to { translate: 0 -3px; } }
/* Seated full-body characters stay planted in the chair: no bob, hop, shake or tilt – the poses do the acting. */
.seat .judge-figure.fullbody, .seat.speaking .judge-figure.fullbody, .seat.rev-offer .judge-figure.fullbody, .seat.rev-out .judge-figure.fullbody {
  animation: none; rotate: 0deg; translate: 0 0; scale: 1; }

/* Body rig (arms + legs for bust-only art) */
.rig-arms { transform-origin: 90px 200px; translate: calc(var(--lean, 0) * 5px) 0; transition: translate .8s ease; }
.seat[data-rig] .judge-figure { rotate: 0deg; }
.leg-l { animation: kick 2.8s ease-in-out infinite alternate; }
.leg-r { animation: kick 2.8s ease-in-out -1.4s infinite alternate; }
.arm-l { animation: armidle 4.2s ease-in-out infinite alternate; }
.arm-r { animation: armidle-r 3.6s ease-in-out -1s infinite alternate; }
.seat.speaking .rig-arms { animation: armbob .45s ease-in-out infinite alternate; }
.seat.speaking .arm-r { animation: gesture-r 2s ease-in-out infinite; }
.seat.speaking .arm-r .fore { animation: fore-r 2s ease-in-out infinite; }
.seat.speaking .arm-l { animation: gesture-l 2.6s ease-in-out -.7s infinite; }
.seat.speaking .leg-l, .seat.speaking .leg-r { animation-duration: 1.1s; }
.seat.reacting .arm-r { animation: none; transform: rotate(-38deg); transition: transform .4s; }
.seat.reacting .arm-r .fore { transform: rotate(-95deg); transition: transform .4s; }
.seat.rev-offer .arm-l { animation: cheer-l 1.3s ease-out both; }
.seat.rev-offer .arm-r { animation: cheer-r 1.3s ease-out both; }
.seat.rev-offer .arm-l .fore { animation: cheer-fore-l 1.3s ease-out both; }
.seat.rev-offer .arm-r .fore { animation: cheer-fore-r 1.3s ease-out both; }
.seat.rev-offer .leg-l, .seat.rev-offer .leg-r { animation: kickfast .2s ease-in-out 6 alternate; }
.seat.rev-out .arm-r { animation: nope-arm 1.2s ease-in-out both; }
.seat.rev-out .arm-r .fore { animation: nope-fore 1.2s ease-in-out both; }
.seat[data-rig].rev-offer .rig-arms { animation: hop 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.seat[data-rig].rev-out .judge-figure, .seat[data-rig].rev-out .rig-arms { animation: shakex .9s ease-in-out both; }

@keyframes kick { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes kickfast { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
@keyframes armidle { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
@keyframes armidle-r { from { transform: rotate(3deg); } to { transform: rotate(-5deg); } }
@keyframes armbob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes gesture-r { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-70deg); } 45% { transform: rotate(-52deg); } 65% { transform: rotate(-78deg); } 85% { transform: rotate(-20deg); } }
@keyframes fore-r { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-55deg); } 45% { transform: rotate(-30deg); } 65% { transform: rotate(-65deg); } 85% { transform: rotate(-10deg); } }
@keyframes gesture-l { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(38deg); } 60% { transform: rotate(22deg); } }
@keyframes cheer-l { 0% { transform: rotate(0); } 25%, 75% { transform: rotate(118deg); } 50% { transform: rotate(104deg); } 100% { transform: rotate(0); } }
@keyframes cheer-r { 0% { transform: rotate(0); } 25%, 75% { transform: rotate(-118deg); } 50% { transform: rotate(-104deg); } 100% { transform: rotate(0); } }
@keyframes cheer-fore-l { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-30deg); } }
@keyframes cheer-fore-r { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(30deg); } }
@keyframes nope-arm { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(-95deg); } }
@keyframes nope-fore { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-70deg); } 32% { transform: rotate(-40deg); } 44% { transform: rotate(-80deg); } 56% { transform: rotate(-40deg); } 68% { transform: rotate(-80deg); } 80% { transform: rotate(-60deg); } }
@keyframes shakex { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes winglowf { from { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 6px rgba(134, 239, 172, .4)); } to { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(134, 239, 172, .95)); } }
/* In close-ups the subtitle names the speaker, so nameplates step aside. */
.world.closeup .nameplate { opacity: 0; }
.nameplate { transition: opacity .3s; }
.nameplate { position: absolute; left: 50%; bottom: -30px; z-index: 4; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; font: 900 17px/1.1 var(--display); letter-spacing: .03em; color: var(--text-strong); border-radius: 5px;
  background: linear-gradient(180deg, #272a2d, #111113); border: 1px solid color-mix(in srgb, var(--judge) 75%, #000); box-shadow: 0 0 14px color-mix(in srgb, var(--judge) 30%, transparent); }
.judge-figure { position: relative; width: 100%; height: 100%; }
.judge-figure svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
.judge-figure .body { animation: breathe 5.5s ease-in-out infinite; transform-origin: 90px 250px; }
.judge-figure .head { transform-origin: 90px 130px; transition: transform .4s; animation: idlehead 7s ease-in-out infinite; }
.judge-figure .eyes { transform-origin: 90px 84px; animation: blink 5.2s infinite; }
.seat:nth-child(2) .eyes { animation-delay: -1.7s; } .seat:nth-child(3) .eyes { animation-delay: -3.1s; } .seat:nth-child(4) .eyes { animation-delay: -.9s; }
.judge-figure .mouth { transform-box: fill-box; transform-origin: center; }
.seat.speaking .mouth { animation: talk .18s ease-in-out infinite alternate; }
.seat.speaking .head { animation: talkbob .45s ease-in-out infinite alternate; }
.seat.reacting .head { transform: rotate(-6deg) translateY(-3px); animation: none; }
.seat.speaking .judge-figure::after { content: ''; position: absolute; inset: -30px -20px 40px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--judge) 22%, transparent), transparent 70%); z-index: -1; }
.temp-badge { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font: 700 10px/1 var(--sans); letter-spacing: .12em; padding: 4px 6px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: var(--warning); border: 1px dashed rgba(250, 204, 21, .6); }
/* Real character art: sits inside the armchair – head against the backrest, lower body behind the seat and arms. */
.judge-figure.layered { position: absolute; left: calc(50% + var(--fit-x, 0px)); bottom: var(--fit-b, 40px); width: var(--fit-w, 170px); height: var(--fit-w, 170px); transform: translateX(-50%); z-index: 1;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.judge-figure.layered .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 90%; }
.layer.anim-breathe { animation: breathe 5.5s ease-in-out infinite; }
.seat.speaking .judge-figure.layered .layer.anim-breathe { animation: talkbob .45s ease-in-out infinite alternate; }
.seat.reacting .judge-figure.layered .layer { transform: rotate(-5deg) translateY(-4px); transition: transform .4s; animation: none; }
.layer.anim-blink { animation: blink 5.2s infinite; transform-origin: 50% 35%; }
.layer.anim-talk { opacity: 0; }
.seat.speaking .layer.anim-talk { opacity: 1; animation: talk .18s ease-in-out infinite alternate; }

.tags { inset: 0; pointer-events: none; }
/* Offer tags over the judges: the same dark glass as the other graphics, amount in accent, a thin accent rule on top. */
.tag { position: absolute; translate: -50% -100%; scale: var(--s, 1); transform-origin: 50% 100%; z-index: 1000; padding: 7px 14px 8px; border-radius: 8px; text-align: center; font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; background: linear-gradient(180deg, rgba(18, 18, 21, .9), rgba(10, 10, 12, .92)); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: tagin .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.tag small { display: block; font: 600 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; color: var(--muted); }
.tag.offer { color: var(--accent); border-top: 2px solid var(--accent); }
.tag.offer.winner { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); scale: calc(var(--s, 1) * 1.08); }
.tag.offer.winner small { color: rgba(5, 46, 22, .75); }
.tag.out { color: var(--subtle); font-size: 18px; letter-spacing: .12em; padding: 8px 14px; }
.haze { inset: 0; pointer-events: none; background: radial-gradient(800px 300px at 800px 380px, rgba(236, 253, 245, .04), transparent 70%); mix-blend-mode: screen; }

/* ─── HUD (outside the camera: always readable) ───────────── */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-size: clamp(12px, 1.6cqw, 20px); }
.hud .btn, .hud a { pointer-events: auto; }
.bug { position: absolute; left: 2.2%; top: 3.5%; display: flex; align-items: center; gap: .5em; font: 900 1em/1 var(--display); letter-spacing: .08em; padding: .45em .8em; background: rgba(10, 10, 12, .6); backdrop-filter: blur(6px); border-radius: 6px; color: var(--text-strong); }
.bug em { font-style: normal; color: var(--accent); }
.live-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--error); box-shadow: 0 0 10px var(--error); animation: pulse 1.6s infinite; display: inline-block; }
.sim-bug { position: absolute; left: 50%; top: 3.5%; transform: translateX(-50%); font: 600 .62em/1 var(--sans); letter-spacing: .14em; padding: .55em .8em; border-radius: 6px; background: rgba(10, 10, 12, .6); backdrop-filter: blur(6px); color: #fcd34d; }

.subtitle { position: absolute; left: 50%; bottom: 5.5%; transform: translate(-50%, 10px); width: max-content; max-width: 84%; text-align: center; opacity: 0; transition: opacity .35s, transform .35s; }
.subtitle.on { opacity: 1; transform: translate(-50%, 0); }
.subtitle .speaker { display: inline-block; margin-bottom: .35em; padding: .25em .7em; border-radius: 4px; font: 700 .72em/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #0b0b0e; background: var(--sp, var(--accent)); }
.subtitle .text { display: block; font: 600 1.3em/1.35 var(--sans); padding: .35em .8em .45em; background: rgba(8, 8, 10, .8); border-radius: 8px; color: var(--text-strong); text-shadow: 0 1px 2px #000; box-decoration-break: clone; }
.subtitle.reaction .text { font-style: italic; font-weight: 500; color: var(--muted); }

.lower-third { position: absolute; left: 3%; bottom: 24%; display: flex; gap: .8em; align-items: center; padding: .6em 1.1em .6em .6em; border-radius: 10px; background: linear-gradient(90deg, rgba(17, 17, 19, .94), rgba(17, 17, 19, .72)); border-left: 4px solid var(--accent); opacity: 0; transform: translateX(-20px); transition: opacity .4s, transform .4s; }
.lower-third.on { opacity: 1; transform: none; }
.lt-avatar svg { width: 3em; height: 3em; border-radius: 10px; display: block; }
.lt-name { font: 900 1.4em/1.05 var(--display); letter-spacing: .02em; color: var(--text-strong); }
.lt-meta { font-size: .78em; color: var(--muted); }

.center-card { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .45s, transform .45s; max-width: 86%; }
.center-card.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@container (max-width: 560px) {
  .card.tech p { display: none; }
  .sim-bug { left: auto; right: 2.2%; transform: none; font-size: .6em; }
  .bug { font-size: .8em; }
}
/* On-air graphics: dark glass panels with a hairline edge and one thin accent rule; type does the work, not colour. */
.card { position: relative; background: linear-gradient(180deg, rgba(18, 18, 21, .9), rgba(10, 10, 12, .92)); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 1.1em 1.7em 1.2em; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); opacity: .85; }
.card .kicker { font: 600 .66em/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.card h2 { font: 900 2.2em/1.05 var(--display); letter-spacing: .02em; margin: .3em 0 .2em; color: var(--text-strong); }
.card h3 { font: 900 1.6em/1.1 var(--display); letter-spacing: .02em; margin: .4em 0 .3em; color: var(--text-strong); }
.card p { margin: .3em 0; color: var(--text); font-size: .9em; }
.card.mini { display: flex; align-items: center; gap: .7em; padding: .6em 1.1em; font-size: .9em; color: var(--text); }
.card.mini::before { display: none; }
.card.sting { padding: 1.4em 2.4em; animation: sting 3.6s ease both; }
.sting-ask { color: var(--accent); font-weight: 600; }
/* Result band: lower left like a TV deal graphic. A solid stamp wipes in, then the details slide out of it. */
.center-card.band { left: 0; top: auto; bottom: 31%; transform: none; max-width: 92%; }
.center-card.band.on { transform: none; }
.deal { display: flex; align-items: stretch; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.deal-stamp { display: flex; align-items: center; padding: .1em .55em .05em 1.1em; font: 900 3.1em/1 var(--display); letter-spacing: .01em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); clip-path: inset(0 100% 0 0); animation: stampin .45s cubic-bezier(.2, .9, .3, 1) .05s forwards; }
.deal.rejected .deal-stamp { background: #e4e4e7; color: #0a0a0c; }
.deal-body { display: grid; align-content: center; gap: .2em; padding: .45em 1.3em .5em 1em; background: rgba(10, 10, 12, .9); backdrop-filter: blur(10px); clip-path: inset(0 100% 0 0); animation: stampin .5s cubic-bezier(.2, .9, .3, 1) .35s forwards; }
.deal-amount { font: 900 2.3em/1 var(--display); color: #fff; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.deal-amount small { font-size: .5em; margin-left: .2em; color: var(--accent); }
.deal.rejected .deal-amount { font-size: 1.7em; }
.deal-from { font: 500 .8em/1.3 var(--sans); color: #a1a1aa; max-width: 26em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-from b { color: #fff; font-weight: 600; }
@keyframes stampin { to { clip-path: inset(0 0 0 0); } }
.deal-from a { color: var(--accent); }
.payout .warn, .warn { color: var(--warning); }
.simtag { display: inline-block; font-size: .72em; padding: .2em .5em; border-radius: 4px; border: 1px dashed rgba(250, 204, 21, .6); color: var(--warning); }
.tech { border-color: rgba(248, 113, 113, .6); }
.rule-chip { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); font-size: .72em; padding: .4em .8em; border-radius: 6px; background: rgba(66, 32, 6, .9); border: 1px solid rgba(250, 204, 21, .5); color: #fde68a; opacity: 0; transition: opacity .3s; max-width: 80%; text-align: center; }
.rule-chip.on { opacity: 1; }
.idle-card { pointer-events: auto; max-width: 30em; }
.idle-card .btn { margin-top: .6em; font-size: .9em; }
.dots { display: inline-flex; gap: .25em; }
.dots i { width: .4em; height: .4em; border-radius: 50%; background: var(--accent); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }


.screen-copy .badge { font-size: 13px; padding: 4px 8px; margin-right: 6px; }

/* ─── Set life: lights, props and character animation ────── */
.pendant { animation: sway 6s ease-in-out infinite alternate; }
.tw { animation: twinkle 4.5s ease-in-out infinite; }
.neon image { animation: flicker 9s linear infinite; }
.led-chase { animation: chase 6s linear infinite; }
.beams { animation: beampulse 5s ease-in-out infinite alternate; }
.screen::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 18px 4px var(--accent-glow); animation: glowpulse 3s ease-in-out infinite alternate; }

/* Moving-head lights sweeping across the back wall */
.movers { inset: 0; pointer-events: none; mix-blend-mode: screen; }
.mover { position: absolute; top: -10px; width: 200px; height: 820px; transform-origin: 50% 0; filter: blur(8px);
  background: linear-gradient(180deg, rgba(236, 253, 245, .26), rgba(134, 239, 172, .08) 55%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: sweep 11s ease-in-out infinite alternate; }
.mover.m1 { left: 330px; --a: -30deg; --b: 16deg; }
.mover.m2 { left: 1080px; --a: 28deg; --b: -18deg; animation-delay: -5.5s; }

/* The pot, as a glass tank that fills with the real pot balance */
.pot-tank { width: 112px; height: 292px; transform: translate(-50%, -100%) scale(.85); transform-origin: 50% 100%; z-index: 600; }
.pot-tank::before { content: ''; position: absolute; left: -30px; right: -30px; bottom: -12px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(134, 239, 172, .35), transparent 70%); }
.pt-glass { position: absolute; left: 14px; right: 14px; top: 0; height: 222px; border-radius: 42px; overflow: hidden;
  border: 3px solid rgba(228, 228, 231, .45); background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(96, 165, 250, .05));
  box-shadow: inset 0 0 22px rgba(255, 255, 255, .1), 0 0 34px rgba(134, 239, 172, .25); }
.pt-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; transition: height 2.4s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(180deg, #86efac, #22c55e 40%, #15803d); box-shadow: 0 0 30px rgba(134, 239, 172, .6); }
.pt-liquid::before { content: ''; position: absolute; left: -20%; right: -20%; top: -6px; height: 12px; border-radius: 50%; background: #bbf7d0; opacity: .8; animation: slosh 3.2s ease-in-out infinite alternate; }
.pt-liquid i { position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .65); animation: bubble 3.4s linear infinite; }
.pt-liquid i:nth-child(1) { left: 18%; animation-delay: -.4s; } .pt-liquid i:nth-child(2) { left: 42%; width: 5px; height: 5px; animation-delay: -1.6s; }
.pt-liquid i:nth-child(3) { left: 63%; animation-delay: -2.5s; } .pt-liquid i:nth-child(4) { left: 30%; width: 4px; height: 4px; animation-delay: -3s; }
.pt-liquid i:nth-child(5) { left: 76%; width: 5px; height: 5px; animation-delay: -1s; }
.pt-shine { position: absolute; left: 14%; top: 8%; width: 12%; height: 80%; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); }
.pt-base { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; border-radius: 8px; border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, #3f3f46, #18181b); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 900 13px/1 var(--display); letter-spacing: .14em; color: var(--muted); box-shadow: 0 10px 20px rgba(0, 0, 0, .55); }
.pt-base b { font: 900 21px/1.1 var(--display); letter-spacing: .02em; color: var(--accent); }

/* Judges: turn toward the speaker, bounce on an offer, shake on "out" */
.judge-figure { rotate: calc(var(--lean, 0) * 3.5deg); translate: calc(var(--lean, 0) * 5px) 0; transform-origin: 50% 92%; transition: rotate .8s ease, translate .8s ease; }
.seat.rev-offer .judge-figure { animation: hop 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.seat.rev-offer::after { content: ''; position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 0 30px var(--accent-glow); animation: ring 1.1s ease-out both; pointer-events: none; z-index: 5; }
.seat.rev-out .judge-figure { animation: nope .9s ease-in-out both; }
.seat.has-offer .chair-front { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(134, 239, 172, .75)); }
.seat.is-out { filter: brightness(.8) saturate(.7); transition: filter 1s; }
.seat.is-winner .chair-back { animation: winglowf 1.6s ease-in-out infinite alternate; }

/* Pitcher walks on for each new pitch */
/* Walk on from beyond the right edge of the frame and back off it (no fades: they really leave the shot).
   --walk / --walk-delay come from studio.js so the timing follows the shared show clock. */
.pitcher.enter { animation: walkin var(--walk, 2.4s) cubic-bezier(.3, .45, .45, 1) var(--walk-delay, 0s) both; }
.pitcher.enter .pitcher-fig { animation: walkbob .3s ease-in-out var(--walk-delay, 0s) 8 alternate; }
.pitcher.exit { animation: walkout var(--walk, 2.4s) cubic-bezier(.55, 0, .7, .55) var(--walk-delay, 0s) both; }
.pitcher.exit .pitcher-fig { animation: walkbob .3s ease-in-out var(--walk-delay, 0s) 8 alternate; }

/* Confetti + SOL coins on a funded reveal (HUD layer, above the picture) */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.confetti i { position: absolute; top: -6%; width: .5em; height: .85em; border-radius: 2px; background: var(--c); animation: fall var(--t) cubic-bezier(.25, .6, .35, 1) var(--d) both; }
.confetti i.coin { width: 1.1em; height: 1.1em; border-radius: 50%; background: linear-gradient(135deg, #9945ff, #14f195); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }

@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes twinkle { 0%, 100% { opacity: .8; } 50% { opacity: .08; } }
@keyframes flicker { 0%, 31%, 34%, 70%, 72.5%, 100% { opacity: 1; } 32%, 71% { opacity: .45; } 33% { opacity: .9; } }
@keyframes chase { to { stroke-dashoffset: -620; } }
@keyframes beampulse { from { opacity: .7; } to { opacity: 1; } }
@keyframes glowpulse { from { opacity: .65; } to { opacity: 1; } }
@keyframes sweep { from { rotate: var(--a); } to { rotate: var(--b); } }
@keyframes slosh { from { transform: translateX(-8%) rotate(-2deg); } to { transform: translateX(8%) rotate(2deg); } }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-230px); opacity: 0; } }
@keyframes hop { 0% { translate: 0 0; } 30% { translate: 0 -18px; scale: 1.04; } 55% { translate: 0 0; scale: 1; } 72% { translate: 0 -6px; } 100% { translate: 0 0; } }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes nope { 0%, 100% { rotate: 0deg; } 18% { rotate: -5deg; } 36% { rotate: 5deg; } 54% { rotate: -4deg; } 72% { rotate: 3deg; } }
@keyframes winglow { from { box-shadow: inset 0 -26px 34px rgba(0, 0, 0, .35), 0 0 0 2px rgba(134, 239, 172, .4), 0 0 24px rgba(134, 239, 172, .3); } to { box-shadow: inset 0 -26px 34px rgba(0, 0, 0, .35), 0 0 0 3px var(--accent), 0 0 46px var(--accent-glow); } }
@keyframes walkout { from { translate: 0 0; } to { translate: 780px 0; } }
@keyframes walkin { from { translate: 780px 0; } to { translate: 0 0; } }
@keyframes walkbob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--x), 62cqw) rotate(var(--r)); opacity: 0; } }

/* ─── Motion ──────────────────────────────────────────────── */
@keyframes breathe { 50% { transform: translateY(2px) scaleY(.995); } }
@keyframes idlehead { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(1.2deg); } 70% { transform: rotate(-1deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes talk { from { transform: scaleY(.6); } to { transform: scaleY(2.4); } }
@keyframes talkbob { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-3px) rotate(.8deg); } }
@keyframes tagin { from { opacity: 0; transform: translateY(16px) scale(.8); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
@keyframes sting { 0% { opacity: 0; letter-spacing: .3em; } 15%, 85% { opacity: 1; letter-spacing: normal; } 100% { opacity: 0; } }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) { .stage { border-radius: 10px; } }
@media (max-width: 600px) {
  .hud { font-size: 12px; }
  .subtitle { max-width: 94%; bottom: 4%; }
  .subtitle .text { font-size: 1.15em; }
  .lower-third { bottom: 26%; }
  .card { padding: .8em 1em; }
  .deal-stamp { font-size: 2.2em; }
  .deal-amount { font-size: 1.7em; }
}

/* Live 3D pitcher (pitcher3d.js frames the resting body at 70% of the canvas): sized so its feet
   land on the same line as the sprite poses, with headroom for raised arms and hops. */
.pitcher-fig .pitcher-3d { position: absolute; left: -53px; top: -103px; width: 425px; height: 425px; }
/* Stand-in when a 3D pitcher can't render: the character's picture, acting each state with simple motion. */
.pitcher-fig .pitcher-fallback { position: absolute; left: 10%; bottom: 13px; width: 80%; height: 93%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; }
.pitcher-fig[data-state="talk"] .pitcher-fallback { animation: fb-talk .5s ease-in-out infinite alternate; }
.pitcher-fig[data-state="nervous"] .pitcher-fallback { animation: fb-shake .18s linear infinite; }
.pitcher-fig[data-state="cheer"] .pitcher-fallback, .pitcher-fig[data-state="dance"] .pitcher-fallback { animation: fb-hop .45s cubic-bezier(.3, 0, .5, 1) infinite alternate; }
.pitcher-fig[data-state="dance"] .pitcher-fallback { animation-name: fb-dance; animation-duration: .9s; }
.pitcher-fig[data-state="sad"] .pitcher-fallback { transform: rotate(4deg) scale(.96, .93); transition: transform .8s; filter: saturate(.6) brightness(.85); }
.pitcher-fig[data-state="swear"] .pitcher-fallback { animation: fb-shake .09s linear infinite; }
.pitcher-fig[data-state^="walk"] .pitcher-fallback { animation: fb-walk .3s ease-in-out infinite alternate; }
@keyframes fb-talk { from { transform: rotate(-2deg) scaleY(1); } to { transform: rotate(2deg) scaleY(1.02); } }
@keyframes fb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-1deg); } 75% { transform: translateX(3px) rotate(1deg); } }
@keyframes fb-hop { from { transform: translateY(0) scale(1.03, .97); } to { transform: translateY(-26px) scale(.98, 1.03); } }
@keyframes fb-dance { 0% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(0) translateY(-14px); } 100% { transform: rotate(8deg) translateY(0); } }
@keyframes fb-walk { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-8px) rotate(5deg); } }

/* ─── Chat on the stream (Kick-style overlay) ─────────────── */
/* Top right, over the studio window: clear of the judges, the pot tank and the subtitles. */
.stream-chat { position: absolute; right: 1.6%; top: 13%; height: 30%; width: min(32%, 360px); display: flex; flex-direction: column; justify-content: flex-end; gap: .35em; z-index: 5; pointer-events: none; font-size: clamp(10px, 1.45cqw, 15px); overflow: hidden; }
.stream-chat .chat-msg { align-self: flex-end; max-width: 100%; padding: .35em .7em; border-radius: .7em; background: rgba(10, 10, 12, .62); backdrop-filter: blur(6px); color: #f4f4f5; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); animation: chatin .35s cubic-bezier(.2, 1.2, .4, 1) both; transition: opacity .6s, transform .6s; }
.stream-chat .chat-msg.system { color: #e4e4e7; font-size: 1em; margin: 0; }
.stream-chat .chat-msg.out { opacity: 0; transform: translateX(12px); }
@keyframes chatin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .stream-chat { width: 48%; height: 38%; top: 14%; }
  .stream-chat .chat-msg:nth-last-child(n+4) { display: none; }
}

/* ─── Chat vote: live meter under the bug, then the "chat has spoken" card ─── */
.vote-meter { position: absolute; left: 2.2%; top: 10%; display: flex; align-items: center; gap: .55em; padding: .4em .7em; border-radius: 6px; background: rgba(10, 10, 12, .6); backdrop-filter: blur(6px); font: 600 .62em/1 var(--sans); color: var(--text); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.vote-meter.on { opacity: 1; transform: none; }
.vote-meter .vm-label { letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vote-meter .vm-bar { width: 6em; height: .45em; border-radius: 99px; background: rgba(148, 163, 184, .35); overflow: hidden; }
.vote-meter .vm-fire { display: block; height: 100%; background: linear-gradient(90deg, #f97316, #facc15); transition: width .4s; }
.card.chat-verdict .cv-row { display: flex; align-items: center; gap: .7em; margin: .55em 0 .35em; font: 900 1.25em/1 var(--display); }
.card.chat-verdict .cv-bar { width: 9em; height: .5em; border-radius: 99px; background: rgba(148, 163, 184, .35); overflow: hidden; }
.card.chat-verdict .cv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f97316, #facc15); }
.card.chat-verdict .cv-fire { color: #fb923c; }
.card.chat-verdict .cv-skull { color: #cbd5e1; }
.card.chat-verdict .cv-n { font-size: .62em; color: var(--muted); }
/* ─── Counter-offer countdown ─── */
.card.counter::before { background: #facc15; }
.card.counter h3 b { color: var(--accent); }

/* ─── The operator's coin: a card on the stream while the narrator gives it a shout-out ─── */
.coin-card { position: absolute; right: 2.2%; bottom: 34%; display: flex; align-items: center; gap: .8em; padding: .7em 1em .7em .8em; border-radius: 10px; background: linear-gradient(180deg, rgba(18, 18, 21, .92), rgba(10, 10, 12, .94)); border: 1px solid rgba(134, 239, 172, .35); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; max-width: 70%; }
.coin-card.on { opacity: 1; transform: none; }
.coin-card .coin-badge { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #052e16; font: 900 .9em/1 var(--display); }
.coin-card .coin-kicker { font: 600 .55em/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.coin-card .coin-name { font: 900 1.05em/1.1 var(--display); color: var(--accent); margin: .2em 0; }
.coin-card code { display: block; font: 600 .62em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fafafa; word-break: break-all; }

/* ─── Tank check: on-chain and market facts beside the pitch (top left, under the bug) ─── */
.check-card { position: absolute; left: 2.2%; top: 11%; max-width: 38%; padding: .6em .85em .65em; border-radius: 10px; background: rgba(10, 10, 12, .82); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; }
.check-card.on { opacity: 1; transform: none; }
.check-card .check-kicker { font: 700 .55em/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .45em; }
.check-card .check-row { font: 600 .66em/1.45 var(--sans); color: #e4e4e7; font-variant-numeric: tabular-nums; }

.bug .bug-viewers { font: 600 .62em/1 var(--sans); letter-spacing: .02em; color: #e4e4e7; padding-left: .55em; margin-left: .2em; border-left: 1px solid rgba(255, 255, 255, .2); font-variant-numeric: tabular-nums; }

/* ─── A judge answering the chat: the message on a card ─── */
.card.chat-q { max-width: 70%; text-align: left; padding: .9em 1.2em; }
.card.chat-q .chat-q-msg { margin-top: .45em; font: 600 1.05em/1.35 var(--sans); color: #fafafa; }
.card.chat-q .chat-q-msg b { color: var(--accent); margin-right: .35em; }

/* ─── The pitched coin's real data on the big screen ─── */
.screen-pitch .coin-facts { margin-top: .35em; font: 700 .8em/1.3 var(--sans); color: #e4e4e7; }
.screen-pitch .coin-facts b { color: #86efac; }
.screen-pitch .coin-facts span { color: #a1a1aa; margin-right: .4em; }
.screen-pitch .coin-facts em { display: block; font-style: normal; font-weight: 600; color: #d4d4d8; font-variant-numeric: tabular-nums; }

/* ─── "Tap for sound": browsers keep audio off until the viewer clicks, so make that click obvious ─── */
.tap-sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.25em; border: 0; border-radius: 999px; background: var(--accent, #86efac); color: var(--accent-ink, #052e16);
  font: 800 clamp(13px, 1.6cqw, 18px)/1 var(--sans, system-ui); cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: tapPulse 1.8s ease-in-out infinite; }
.tap-sound .icon { width: 1.2em; height: 1.2em; }
.tap-sound[hidden] { display: none; }
@keyframes tapPulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tap-sound { animation: none; } }

/* ─── The narrator's recap (every few pitches) ─── */
.card.recap { min-width: min(70%, 520px); max-width: 78%; text-align: left; padding: .9em 1.3em 1em; }
.card.recap .recap-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 600 .95em/1.25 var(--sans); }
.card.recap .recap-row:first-of-type { margin-top: .4em; }
.card.recap .recap-title { color: #fafafa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card.recap .recap-res { flex: none; font-size: .82em; font-weight: 800; padding: .25em .6em; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #a1a1aa; }
.card.recap .recap-res.deal { background: var(--accent); color: var(--accent-ink, #052e16); }
.card.recap .recap-res.no-deal { color: #fca5a5; background: rgba(248, 113, 113, .12); }
.card.recap .recap-today { margin-top: .7em; font: 600 .82em/1.3 var(--sans); color: #a1a1aa; font-variant-numeric: tabular-nums; }
.card.recap .recap-today b { color: #fafafa; }

/* ─── Backstage room (alxcooks with the pitcher, before and after the Tank) ───
   The room art is /assets/room/backstage.webp when it exists; until then the CSS below stands in for it. */
.room { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity .08s linear, visibility .08s; overflow: hidden; }   /* swapped behind the wipe */
.room.on { opacity: 1; visibility: visible; }
.room-inner { position: absolute; inset: 0; transform-origin: 50% 62%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
  background:
    url(/assets/room/backstage.webp) center / cover no-repeat,
    radial-gradient(ellipse 60% 45% at 50% 12%, rgba(134, 239, 172, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #1b1f24 0%, #15181c 64%, #0c0d0f 64.3%, #191b1f 100%); }
.room.shot-host .room-inner { transform: scale(1.32) translate(13%, -3%); }
.room.shot-pitcher .room-inner { transform: scale(1.32) translate(-13%, -3%); }
.room-sign { position: absolute; left: 50%; top: 7%; translate: -50% 0; padding: .35em 1em; border-radius: 10px; border: 2px solid rgba(134, 239, 172, .55);
  font: 900 clamp(14px, 2.6cqw, 34px)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #bbf7d0;
  text-shadow: 0 0 12px rgba(134, 239, 172, .9), 0 0 30px rgba(34, 197, 94, .6); box-shadow: 0 0 24px rgba(34, 197, 94, .35), inset 0 0 18px rgba(34, 197, 94, .2); }
.room-door { position: absolute; right: 5%; bottom: 36%; width: 13%; height: 46%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #23272d, #171a1e);
  border: 3px solid #30353c; border-bottom: 0; box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); }
.room-door b { position: absolute; left: 50%; top: 10%; translate: -50% 0; white-space: nowrap; padding: .2em .5em; border-radius: 4px; background: #052e16; color: #86efac;
  font: 800 clamp(8px, 1.1cqw, 14px)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.room-couch { position: absolute; left: 5%; bottom: 13%; width: 40%; height: 26%; border-radius: 26px 26px 12px 12px;
  background: linear-gradient(180deg, #2e5a43 0%, #1f4231 55%, #16301f 100%); box-shadow: inset 0 8px 0 rgba(255, 255, 255, .05), 0 24px 40px rgba(0, 0, 0, .65); }
.room-couch::before { content: ''; position: absolute; left: 4%; right: 4%; top: -28%; height: 45%; border-radius: 22px 22px 6px 6px; background: linear-gradient(180deg, #356a4f, #24503a); }
.room-host, .room-pitcher { position: absolute; bottom: 9%; height: 64%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); transform-origin: 50% 100%; }
.room-host { left: 9%; animation: room-breathe 3.2s ease-in-out infinite; }
.room-pitcher { right: 22%; bottom: 7%; height: 60%; animation: room-breathe 2.8s ease-in-out infinite; }
.room .talking { animation: room-talk .3s ease-in-out infinite alternate; }
.room[data-mood="before"] .room-pitcher:not(.talking) { animation: room-fidget 1.4s ease-in-out infinite; }
.room[data-mood="deal"] .room-pitcher:not(.talking) { animation: room-hop .5s ease-in-out infinite alternate; }
.room[data-mood="nodeal"] .room-pitcher.talking { animation: room-rant .22s ease-in-out infinite alternate; }
.room[data-mood="nodeal"] .room-pitcher:not(.talking) { animation: room-slump 2.4s ease-in-out infinite; }
@keyframes room-breathe { 50% { transform: scaleY(1.012); } }
@keyframes room-talk { to { transform: translateY(-1.2%) scaleY(1.015); } }
@keyframes room-fidget { 25% { transform: translateX(-1.5%) rotate(-1.5deg); } 75% { transform: translateX(1.5%) rotate(1.5deg); } }
@keyframes room-hop { to { transform: translateY(-5%); } }
@keyframes room-rant { from { transform: rotate(-2deg) translateX(-1%); } to { transform: rotate(2deg) translateX(1%) translateY(-1%); } }
@keyframes room-slump { 50% { transform: translateY(1.5%) scaleY(.985); } }
@media (prefers-reduced-motion: reduce) { .room-inner { transition: none; } .room * { animation: none !important; } }
.room.has-art .room-couch, .room.has-art .room-door { display: none; }

/* The wipe into (and out of) the backstage room: a slanted green band with the fin sweeps across. */
.room-wipe { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.room-wipe-band { position: absolute; top: -10%; bottom: -10%; left: -10%; width: 120%; display: flex; align-items: center; justify-content: center; gap: .6em;
  translate: -120% 0; skew: -12deg; background: linear-gradient(90deg, #052e16 0%, #15803d 18%, #22c55e 50%, #15803d 82%, #052e16 100%);
  box-shadow: 0 0 60px rgba(34, 197, 94, .6); }
.room-wipe-band img { height: 22%; skew: 12deg; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.room-wipe-band span { skew: 12deg; font: 900 clamp(18px, 4.2cqw, 56px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #052e16; }
.room-wipe.go .room-wipe-band { animation: wipe-across .8s cubic-bezier(.7, 0, .3, 1) both; }
.room-wipe.back .room-wipe-band { animation: wipe-back .8s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes wipe-across { 0% { translate: -120% 0; } 40%, 52% { translate: 0 0; } 100% { translate: 120% 0; } }
@keyframes wipe-back { 0% { translate: 120% 0; } 40%, 52% { translate: 0 0; } 100% { translate: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .room-wipe { display: none; } }
/* With the real room art: alxcooks stands left of centre, the pitcher right of centre, both on the open floor. */
.room.has-art .room-host { left: 29%; translate: -50% 0; bottom: 2%; height: 84%; }
.room.has-art .room-pitcher { left: 61%; right: auto; translate: -50% 0; bottom: 4%; height: 62%; }
.room.has-art.shot-host .room-inner { transform: scale(1.3) translate(11%, -2%); }
.room.has-art.shot-pitcher .room-inner { transform: scale(1.3) translate(-8%, -2%); }
.room.has-art .room-sign { top: 5%; }
/* Sizes tuned on air: host and pitcher about the same height, and a gentler push so both stay in frame. */
.room.has-art .room-host { left: 31%; height: 70%; bottom: 3%; }
.room.has-art .room-pitcher { left: 62%; height: 64%; bottom: 3%; }
.room.has-art.shot-host .room-inner { transform: scale(1.18) translate(8%, -1%); }
.room.has-art.shot-pitcher .room-inner { transform: scale(1.18) translate(-6%, -1%); }
/* A 3D pitcher backstage: the live model's canvas, standing where the picture would be. */
.room-pitcher-3d { position: absolute; left: 62%; bottom: -2%; height: 84%; aspect-ratio: 1; translate: -50% 0; display: none; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.room-pitcher-3d canvas { width: 100%; height: 100%; display: block; }
.room.pitcher-3d .room-pitcher-3d { display: block; }
.room.pitcher-3d .room-pitcher { display: none; }
/* alxcooks stands still: no breathing bob and no bounce while talking (only his poses change). */
.room .room-host, .room .room-host.talking { animation: none; }

/* The chat poll (DEAL / NO DEAL typed in chat): bigger and clearer, green for deal, red for no deal. */
.vote-meter { top: 11%; gap: .7em; padding: .55em .85em; font-size: .78em; border: 1px solid rgba(255, 255, 255, .1); }
.vote-meter .vm-label { display: flex; flex-direction: column; gap: .25em; color: #fafafa; font-weight: 800; }
.vote-meter .vm-label small { font-size: .78em; letter-spacing: .06em; text-transform: none; color: var(--muted); font-weight: 600; }
.vote-meter .vm-bar { width: 8em; height: .6em; background: #ef4444; }
.vote-meter .vm-fire { background: linear-gradient(90deg, #16a34a, #22c55e); }
.vote-meter .vm-n { font-variant-numeric: tabular-nums; font-weight: 800; color: #fafafa; white-space: nowrap; }
.card.chat-verdict .cv-fire { color: #4ade80; }
.card.chat-verdict .cv-skull { color: #f87171; }
.card.chat-verdict .cv-bar { background: #ef4444; }
.card.chat-verdict .cv-bar i { background: linear-gradient(90deg, #16a34a, #22c55e); }
.vote-meter { top: 15.5%; }