/* ============ WatchParty USA ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #171310;
  overflow: hidden;
  font-family: Righteous, sans-serif;
}

/* 16:9 stage centered and scaled to viewport */
#stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  max-height: 100vh; max-width: 177.78vh;
  background: #e9d2b0;
}

#room {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
}

/* ============ the video screen ============ */
/* mapped to the screen rect in art/room4.png: x303-1045, y92-491 of 1344x768 */
#screenWrap {
  position: absolute;
  left: 22.545%; top: 11.979%;
  width: 55.208%; height: 51.953%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

/* ============ composited layers ============ */
/* the couch crew: wide couch bottom-center, heads just below the screen */
#duo {
  position: absolute;
  left: 50%; bottom: -1%;
  transform: translateX(-50%);
  width: 44%;
  z-index: 3;
  pointer-events: none;
}

/* realish ZERO COOL cabinet, left edge (lamp peeks above it) */
#arcadeCab {
  position: absolute;
  left: 4.5%; bottom: 6.5%;
  width: 15%;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(50, 30, 15, 0.4));
  pointer-events: none;
}

/* true BTTF logo print, small accent on the left wall under ON AIR */
#bttfSign {
  position: absolute;
  left: 2.5%; top: 21%;
  width: 7%;
  border: 3px solid #3a2c1c;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(60, 40, 20, 0.35);
  z-index: 2;
}

/* WATCH U•S•A PARTY sign above the window, gentle glow pulse */
#logoSign {
  position: absolute;
  left: 85%; top: 4%;
  width: 11%;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(120, 30, 110, 0.45);
  animation: logoPulseGlow 4.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes logoPulseGlow {
  0%,100% { box-shadow: 0 4px 14px rgba(120, 30, 110, 0.45); }
  50% { box-shadow: 0 4px 26px rgba(200, 40, 160, 0.75); }
}

/* George Michael poster in the screen-window gap */
#gmPoster {
  position: absolute;
  left: 79.3%; top: 30%;
  width: 5.9%;
  border: 5px solid #3a2c1c;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(60, 40, 20, 0.35);
  z-index: 2;
}

/* snack side tables flanking the couch, in front for depth */
#tableL, #tableR {
  position: absolute;
  bottom: -2%;
  width: 9.5%;
  z-index: 4;
  filter: drop-shadow(0 8px 10px rgba(50, 30, 15, 0.35));
  pointer-events: none;
}
#tableL { left: 20%; }
#tableR { left: 70.5%; transform: scaleX(-1); }
#player, #screenWrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* static burst between programs */
#static {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 2px, transparent 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 240px 240px;
}
#static.on { animation: staticFlash 0.55s steps(6) both; }
@keyframes staticFlash {
  0% { opacity: 1; background-position: 0 0, 0 0; }
  40% { opacity: 1; background-position: 0 8px, 60px 40px; }
  99% { opacity: 1; background-position: 0 4px, 140px 90px; }
  100% { opacity: 0; }
}

/* warm screen-light on the room (sits under the iframe) */
#ambient {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 50% 38%, rgba(160, 190, 255, 0.10), transparent 70%);
  mix-blend-mode: screen;
  animation: ambientFlicker 7.3s infinite;
}
@keyframes ambientFlicker {
  0%,100% { opacity: .7; } 9% { opacity: .9; } 14% { opacity: .62; }
  31% { opacity: 1; } 42% { opacity: .74; } 58% { opacity: .95; }
  63% { opacity: .66; } 80% { opacity: .88; }
}

/* ============ glow overlays: life on the baked art ============ */
.glow {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

/* ON AIR sign — lights up only while the tape rolls */
#glowOnair {
  left: 6.5%; top: 13%; width: 9.5%; height: 8%;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 70, 48, 0.85), transparent 72%);
}
#stage.playing #glowOnair { animation: onairThrob 2.4s ease-in-out infinite; }
@keyframes onairThrob { 0%,100% { opacity: .95; } 50% { opacity: .45; } }

/* arcade screen — attract-mode flicker (over the composited cabinet's CRT) */
#glowArcade {
  left: 5.8%; top: 41%; width: 11%; height: 12.5%;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(90, 230, 255, 0.45), transparent 70%);
  animation: arcadeFlicker 3.8s steps(3) infinite;
  z-index: 2;
}
@keyframes arcadeFlicker {
  0%,100% { opacity: .38; } 25% { opacity: .6; } 50% { opacity: .3; } 75% { opacity: .55; }
}

/* ============ speech bubbles ============ */
.bubble {
  position: absolute;
  max-width: 17%;
  padding: .7em .9em;
  background: #fffef6;
  color: #2a2118;
  font-size: clamp(9px, 1.05vw, 19px);
  line-height: 1.35;
  border-radius: 16px;
  border: 3px solid #2a2118;
  box-shadow: 0 4px 0 rgba(42, 33, 24, 0.18);
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  z-index: 5;
}
.bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.bubble::after {
  content: "";
  position: absolute; bottom: -14px;
  border: 8px solid transparent;
  border-top: 14px solid #2a2118;
}
#bubbleBobby { left: 17%; bottom: 27%; }
#bubbleBobby::after { right: 14%; transform: rotate(18deg); }
#bubbleJason { right: 21%; bottom: 27%; }
#bubbleJason::after { left: 14%; transform: rotate(-18deg); }

/* ============ chyron ============ */
#chyron {
  position: absolute;
  left: 2%; bottom: 2.5%;
  display: flex; align-items: center; gap: .8em;
  padding: .55em 1em;
  background: rgba(30, 24, 18, .88);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .4s, transform .4s;
  z-index: 6;
  max-width: 40%;
}
#chyron.show { opacity: 1; transform: translateX(0); }
#chyronLabel {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, .6vw, 11px);
  color: #ffb35c;
  white-space: nowrap;
}
#chyronTitle {
  font-size: clamp(10px, 1vw, 18px);
  color: #fff8ea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============ remote ============ */
#remote {
  position: absolute;
  right: 1.6%; bottom: 2.5%;
  display: flex; gap: .5em;
  z-index: 6;
}
#remote button {
  font-family: Righteous, sans-serif;
  font-size: clamp(9px, .8vw, 14px);
  letter-spacing: .06em;
  color: #fff8ea;
  background: rgba(30, 24, 18, .85);
  border: 0;
  border-radius: 12px;
  padding: .8em 1.1em;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: background .2s, color .2s, transform .1s;
}
#remote button:hover { background: #3a2f22; color: #ffd9a0; }
#remote button:active { transform: translateY(2px); box-shadow: none; }
#btnLive.synced { color: #ff6b5e; }

/* ============ boot overlay ============ */
#boot {
  position: absolute; inset: 0;
  background: #16110d;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  transition: opacity .6s;
}
#boot.off { opacity: 0; pointer-events: none; }
#bootInner { text-align: center; position: relative; z-index: 2; }
#bootLogo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 3.4vw, 58px);
  color: #1fb9d8;
  text-shadow: 0 0 18px rgba(31, 185, 216, .7), 4px 4px 0 #ff2d78;
  margin-bottom: .8em;
  animation: logoPulse 2.6s ease-in-out infinite;
}
#bootLogo span { color: #ff2d78; text-shadow: 0 0 18px rgba(255, 45, 120, .7), 4px 4px 0 #1fb9d8; }
@keyframes logoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
#bootTag {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, .85vw, 15px);
  color: #b09a7e;
  margin-bottom: 3em;
  letter-spacing: .1em;
}
#pressStart {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(13px, 1.5vw, 26px);
  color: #ffd24d;
  background: none;
  border: 3px solid #ffd24d;
  border-radius: 12px;
  padding: .9em 1.4em;
  cursor: pointer;
  animation: startBlink 1.2s steps(1) infinite;
  transition: transform .15s;
}
#pressStart:hover { transform: scale(1.06); animation: none; }
@keyframes startBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
#bootHint {
  margin-top: 2.2em;
  font-size: clamp(10px, .95vw, 16px);
  color: #8a7660;
  font-family: Righteous, sans-serif;
}
#scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .bubble { max-width: 24%; }
}