/* Stream overlay. Everything is sized in container units so the 1080p capture, the portal embed,
   and the studio preview stay proportionally identical. 1cqw is 19.2px on the broadcast. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #05061a; color: var(--cream); font-family: var(--body); overflow: hidden; }
svg.sprite { position: absolute; width: 0; height: 0; }

.scene {
  position: absolute; inset: 0; margin: auto;
  width: min(100vw, 177.778vh); height: min(100vh, 56.25vw);
  container-type: size; overflow: hidden;
  /* Keep overlays inside the visible picture when player controls are open. */
  --pad-x: 3.2cqw; --pad-top: 9cqh; --pad-bottom: 16cqh;
  --lift: 0 .32cqw 0 var(--edge), 0 .8cqw 1.5cqw rgba(5, 4, 20, .5);
}
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene svg { display: block; fill: currentColor; }

/* Darken only where props sit, so the fire and the campers stay bright. */
.scene-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 30cqw 62cqh at 11cqw 36cqh, rgba(9, 10, 36, .5), transparent 72%),
    radial-gradient(ellipse 26cqw 22cqh at 90cqw 16cqh, rgba(9, 10, 36, .4), transparent 72%),
    linear-gradient(0deg, rgba(12, 7, 20, .58), transparent 27%);
}

/* Sparks drifting up from the fire. Transform and opacity only: cheap for the software renderer. */
.embers { position: absolute; left: 52.6cqw; top: 66cqh; width: 0; height: 0; pointer-events: none; }
.embers i {
  position: absolute; left: var(--x); top: 0; width: .26cqw; height: .26cqw; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff1b8, var(--tent) 55%, var(--spark));
  box-shadow: 0 0 .5cqw .1cqw rgba(254, 140, 28, .55);
  animation: ember var(--t) linear var(--d) infinite;
}
.embers i:nth-child(1) { --x: -2.4cqw; --dx: -1.6cqw; --t: 6.5s; --d: -1s; }
.embers i:nth-child(2) { --x: -.8cqw; --dx: 1.1cqw; --t: 8s; --d: -4.2s; }
.embers i:nth-child(3) { --x: .7cqw; --dx: -.7cqw; --t: 5.6s; --d: -2.6s; }
.embers i:nth-child(4) { --x: 2.1cqw; --dx: 1.8cqw; --t: 7.4s; --d: -6s; }
.embers i:nth-child(5) { --x: -1.5cqw; --dx: .5cqw; --t: 9s; --d: -7.5s; }
.embers i:nth-child(6) { --x: 1.3cqw; --dx: -1.3cqw; --t: 6.9s; --d: -3.4s; }
.embers i:nth-child(7) { --x: 0cqw; --dx: 2.2cqw; --t: 8.6s; --d: -.4s; }
@keyframes ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: .95; }
  60% { opacity: .7; }
  100% { transform: translate(var(--dx), -30cqh) scale(.35); opacity: 0; }
}

/* Clay slabs: grain, a soft top highlight, a deep lower edge. */
.scene-status, .track-station, .reconnect-note, .audio-notice > span {
  --edge: #080a24;
  background: var(--grain) 0 0 / 6.67cqw, linear-gradient(170deg, #30347f, #191d54 72%);
  box-shadow: inset 0 .1cqw 0 rgba(206, 198, 255, .32), inset 0 -.24cqw .3cqw rgba(5, 6, 28, .55), var(--lift);
}
/* Wooden props share the generated board and plank art; text sits on their recessed panels. */
.donate-station, .winner-toast { background: url('/assets/clay-board.webp') center / 100% 100% no-repeat; aspect-ratio: 2.131; filter: drop-shadow(0 .5cqw .7cqw rgba(6, 4, 18, .55)); }

/* Wheel */
.wheel-station { position: absolute; left: var(--pad-x); top: var(--pad-top); width: 18.4cqw; text-align: center; }
.wheel-banner {
  display: flex; align-items: center; justify-content: center; gap: .55cqw; margin-bottom: .45cqw;
  font-size: .74cqw; line-height: 1.3; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 .08cqw .1cqw #0a0820, 0 0 .6cqw #0a0820;
}
.wheel-banner svg { width: .78cqw; height: .78cqw; color: var(--flame); flex: none; }
.wheel-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.wheel-core { position: absolute; inset: 15% 14% 13%; }
.wheel-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--clay-500); will-change: transform; }
.wheel-face svg { width: 100%; height: 100%; }
.wheel-face text { font-family: var(--body); font-weight: 700; letter-spacing: .01em; }
.wheel-rim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .3cqw .5cqw rgba(8, 6, 24, .5)); }
.wheel-hub {
  position: absolute; inset: 38.5%; border-radius: 50%; display: grid; place-items: center; color: var(--clay-700);
  background: var(--grain) 0 0 / 6.67cqw, radial-gradient(circle at 36% 28%, #fff4d2, #f0cf96 46%, #c98f52);
  box-shadow: inset 0 -.14cqw .2cqw rgba(110, 56, 18, .55), 0 0 0 .2cqw var(--clay-600), 0 0 0 .3cqw #f0b879, 0 .3cqw .5cqw rgba(30, 10, 4, .6);
}
.wheel-hub svg { width: 56%; height: 56%; }

/* Countdown plaque. The art leaves a recessed panel between 27% and 73% of its height. */
.countdown-sign { position: relative; width: 100%; margin-top: .2cqw; aspect-ratio: 3; }
.countdown-sign img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .3cqw .5cqw rgba(8, 6, 24, .5)); }
.countdown-copy { position: absolute; inset: 25% 10% 26% 11.5%; display: flex; align-items: center; justify-content: space-between; gap: .5cqw; }
#countdown { font-size: 2.55cqw; line-height: 1; font-weight: 900; color: var(--cream); text-shadow: 0 .13cqw 0 #230b03; }
.countdown-sparks { display: none; gap: .5cqw; padding-left: .5cqw; color: var(--flame); }
.countdown-sparks svg { width: 1.5cqw; height: 1.5cqw; animation: twinkle 1.2s ease-in-out infinite alternate; }
.countdown-sparks svg:nth-child(2) { animation-delay: -.4s; }
.countdown-sparks svg:nth-child(3) { animation-delay: -.8s; }
.countdown-sign[data-state='busy'] #countdown { display: none; }
.countdown-sign[data-state='busy'] .countdown-sparks { display: flex; }
@keyframes twinkle { from { transform: scale(.55) rotate(-12deg); opacity: .5; } to { transform: scale(1) rotate(12deg); opacity: 1; } }
.countdown-side { display: flex; flex-direction: column; align-items: flex-end; gap: .34cqw; min-width: 0; text-align: right; }
#timer-label { font-size: .56cqw; line-height: 1.25; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #f2c9a0; }
.prize {
  font-size: .76cqw; line-height: 1; font-weight: 800; white-space: nowrap; color: #4a1f0e;
  padding: .3cqw .6cqw; border-radius: 1cqw;
  background: linear-gradient(175deg, #ffe08a, #f0a93c);
  box-shadow: inset 0 .07cqw 0 rgba(255, 250, 220, .7), inset 0 -.1cqw 0 rgba(150, 70, 10, .45), 0 .12cqw 0 #230b03;
}
.entrants {
  --edge: #0a1b18;
  display: inline-flex; align-items: center; gap: .5cqw; margin: .55cqw 0 0; padding: .42cqw .95cqw .42cqw .75cqw; border-radius: 2cqw;
  font-size: .8cqw; line-height: 1.3; font-weight: 600; color: var(--cream);
  background: var(--grain) 0 0 / 6.67cqw, linear-gradient(170deg, #3f7860, #1f4a3c 78%);
  box-shadow: inset 0 .1cqw 0 rgba(200, 240, 200, .32), inset 0 -.2cqw .25cqw rgba(4, 22, 18, .55), var(--lift);
}
.entrants svg { width: 1cqw; height: 1cqw; color: #c8e6b6; flex: none; }

/* Top right: mode and now playing */
.scene-top-right { position: absolute; top: var(--pad-top); right: var(--pad-x); display: flex; flex-direction: column; align-items: flex-end; gap: .95cqw; }
.scene-status {
  display: flex; align-items: center; gap: .6cqw; padding: .55cqw 1.05cqw .55cqw .85cqw; border-radius: 2cqw;
  font-size: .72cqw; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.scene-status-dot { width: .56cqw; height: .56cqw; border-radius: 50%; background: var(--flame); box-shadow: 0 0 .5cqw var(--tent); }
.scene[data-mode='live'] .scene-status-dot { background: #ff6a55; box-shadow: 0 0 .6cqw var(--berry); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.track-station { display: flex; align-items: center; gap: .9cqw; max-width: 24cqw; padding: .75cqw 1.15cqw .8cqw 1cqw; border-radius: 1.15cqw 1cqw 1.2cqw 1.05cqw; }
.track-station div { display: flex; flex-direction: column; gap: .22cqw; min-width: 0; }
.track-station div > span { font-size: .56cqw; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dusk-200); }
.track-station strong { font-size: .88cqw; line-height: 1.3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-bars { display: flex; align-items: center; gap: .22cqw; height: 1.7cqw; flex: none; }
.sound-bars i { display: block; width: .2cqw; height: 45%; border-radius: .1cqw; background: linear-gradient(var(--flame), var(--ember)); animation: sound 1.1s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height: 100%; animation-delay: -.4s; }
.sound-bars i:nth-child(3) { height: 70%; animation-delay: -.7s; }
.sound-bars i:nth-child(4) { height: 50%; animation-delay: -.2s; }
@keyframes sound { to { transform: scaleY(.3); } }

/* Donation board. Its panel spans 8.5% to 91% across and 22% to 81.5% down. */
.donate-station {
  position: absolute; left: calc(var(--pad-x) - .7cqw); bottom: calc(var(--pad-bottom) - 1cqh); width: 25.5cqw;
  display: flex; align-items: center; gap: 1.05cqw; padding: .45cqw 2.6cqw 0 1.75cqw;
}
.qr-box {
  width: 7cqw; height: 7cqw; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: .7cqw;
  background: #fff6df; box-shadow: 0 0 0 .16cqw #f1d6a4, 0 .26cqw 0 .16cqw #2b0e05, 0 .7cqw .8cqw rgba(20, 6, 2, .5);
  transform: rotate(-2deg);
}
.qr-box img { width: 100%; height: 100%; }
.wallet-placeholder { width: 44%; color: #caa173; }
.wallet-placeholder svg { width: 100%; height: auto; }
.donate-copy { display: flex; flex-direction: column; gap: .34cqw; min-width: 0; }
.donate-eyebrow { font-size: .56cqw; line-height: 1.3; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; color: #f2c9a0; }
.donate-copy strong { font-size: 1.2cqw; line-height: 1.15; white-space: nowrap; text-shadow: 0 .1cqw 0 #230b03; }
.donate-copy > span:last-child { font-size: .76cqw; line-height: 1.35; color: #ffe7c9; }

/* Call to action on the plank. Its panel spans 6% to 94% across and 26% to 76% down. */
.chat-instruction {
  position: absolute; left: 50%; bottom: 9.6cqh; transform: translateX(-50%); width: 42cqw; aspect-ratio: 8.29;
  display: flex; align-items: center; justify-content: center; gap: .7cqw; padding: .1cqw 3.1cqw 0; white-space: nowrap;
  background: url('/assets/clay-ribbon.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 .45cqw .6cqw rgba(6, 4, 18, .55));
}
.chat-instruction svg { width: 1.2cqw; height: 1.2cqw; color: var(--flame); flex: none; }
.chat-instruction strong { font-size: .94cqw; line-height: 1.3; font-weight: 700; text-shadow: 0 .08cqw 0 #230b03; }
.chat-instruction span { font-size: .8cqw; line-height: 1.3; color: #f2c9a0; padding-left: .75cqw; border-left: .09cqw solid rgba(242, 201, 160, .4); }
.chat-instruction b { font-weight: 700; color: var(--cream); }

/* Wordmark */
.scene-brand { position: absolute; right: var(--pad-x); bottom: var(--pad-bottom); display: flex; align-items: center; gap: .6cqw; }
.scene-brand img { height: 3.3cqw; width: auto; filter: drop-shadow(0 .2cqw .4cqw rgba(8, 6, 24, .7)); }
.scene-brand .clay-type { display: block; font-size: 1.8cqw; line-height: 1.05; text-shadow: 0 .12cqw 0 #1c0e2c, 0 .3cqw .7cqw rgba(8, 6, 24, .8); }
.scene-brand small { display: block; margin-top: .25cqw; font-size: .72cqw; line-height: 1.3; font-weight: 600; letter-spacing: .16em; color: #ffe7c9; text-shadow: 0 .08cqw .3cqw #0a0820; }

/* Winner board, dropped in from the top */
.winner-toast {
  position: absolute; left: 50%; top: calc(var(--pad-top) - 2cqh); width: 32cqw;
  display: flex; align-items: center; gap: 1.2cqw; padding: .5cqw 3.6cqw 0 3.5cqw;
  opacity: 0; transform: translate(-50%, -3cqw) rotate(-3deg) scale(.9); transform-origin: 50% 0;
  transition: opacity .3s ease-out, transform .6s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none;
}
.winner-toast.show { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); }
.winner-star {
  width: 4.4cqw; height: 4.4cqw; flex: none; display: grid; place-items: center; border-radius: 50%; color: #7a3319;
  background: radial-gradient(circle at 36% 28%, #fff3b8, #fcd96b 50%, #eb9f30);
  box-shadow: inset 0 -.16cqw .2cqw rgba(150, 70, 10, .5), 0 .24cqw 0 #230b03;
}
.winner-star svg { width: 56%; height: 56%; }
.winner-toast.show .winner-star svg { animation: twinkle 1s ease-in-out infinite alternate; }
.winner-toast div { display: flex; flex-direction: column; gap: .32cqw; min-width: 0; }
.winner-toast small { font-size: .62cqw; line-height: 1.3; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f2c9a0; }
.winner-toast strong { font-size: 2cqw; line-height: 1.08; overflow-wrap: anywhere; text-shadow: 0 .12cqw 0 #230b03; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.winner-toast div > span { font-size: .84cqw; line-height: 1.35; font-weight: 500; color: #ffe7c9; }

/* Notices */
.reconnect-note { position: absolute; left: 50%; bottom: 24cqh; transform: translateX(-50%); padding: .7cqw 1.3cqw; border-radius: 2cqw; font-size: .95cqw; line-height: 1.3; font-weight: 600; }
.audio-notice { position: absolute; inset: 0; place-items: center; background: rgba(8, 9, 30, .35); cursor: pointer; }
.audio-notice:not([hidden]) { display: grid; }
.audio-notice > span { display: flex; align-items: center; gap: .8cqw; padding: 1cqw 1.9cqw 1.05cqw 1.5cqw; border-radius: 3cqw; font-size: 1.4cqw; line-height: 1.3; font-weight: 700; }
.audio-notice svg { width: 1.7cqw; height: 1.7cqw; color: var(--tent); }

@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
  .sound-bars i, .countdown-sparks svg, .winner-toast.show .winner-star svg, .scene-status-dot { animation: none !important; }
  .winner-toast { transition: none; }
}