@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&family=Press+Start+2P&display=swap');

/* The shared site stylesheet owns the header so both pages stay identical. */

:root {
  --navy: #15375b;
  --navy-deep: #0d2742;
  --blue: #6796bf;
  --pink: #f08098;
  --cream: #fbf6ec;
  --paper: #fffdf8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 6% 92%, rgba(240,128,152,.12), transparent 22%),
    radial-gradient(circle at 94% 90%, rgba(103,150,191,.11), transparent 23%),
    var(--cream);
  color: var(--navy);
  font-family: 'Inter', Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.live-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: calc(92px + clamp(38px, 5vh, 62px)) 0 54px;
}
.live-stage {
  position: relative;
  isolation: isolate;
}
.live-intro {
  position: relative;
  z-index: 2;
  text-align: center;
}
.live-eyebrow {
  margin: 0 0 18px;
  color: var(--navy);
  font: 400 clamp(8px, .85vw, 11px)/1.5 'Press Start 2P', monospace;
  letter-spacing: .08em;
}
.live-eyebrow span[aria-hidden] { color: var(--pink); padding: 0 12px; }
h1 {
  margin: 0 0 clamp(28px, 4vh, 42px);
  font: 500 clamp(58px, 6vw, 88px)/.92 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.035em;
}
.stream-section { width: 100%; }
.live-plant {
  position: absolute;
  top: calc(-1 * clamp(38px, 5vh, 62px));
  right: calc((100vw - 100%) / -2);
  width: min(39vw, 590px);
  max-width: none;
  height: auto;
  pointer-events: none;
}
.live-plant-back { z-index: 0; }
.live-plant-front { z-index: 3; }
.stream-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 12px;
  overflow: hidden;
  background: var(--navy);
  border: 3px solid var(--blue);
  box-shadow: 9px 9px 0 rgba(240,128,152,.24), 0 22px 46px rgba(13,39,66,.13);
}
.stream-frame::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.55);
  pointer-events: none;
}
.youtube-player { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 0; }
.stream-waiting {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  color: white;
  background:
    radial-gradient(circle at 50% 40%, rgba(103,150,191,.18), transparent 32%),
    linear-gradient(145deg, #071b2e, var(--navy-deep));
}
.waiting-badge {
  position: absolute;
  top: 28px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--pink);
  color: white;
  font: 400 8px/1 'Press Start 2P', monospace;
}
.waiting-dot { width: 7px; height: 7px; border-radius: 50%; background: white; }
.waiting-play {
  display: grid;
  place-items: center;
  width: clamp(68px, 7vw, 92px);
  aspect-ratio: 1.45 / 1;
  margin-bottom: 24px;
  padding-left: 5px;
  border-radius: 16px;
  background: var(--pink);
  color: white;
  font-size: clamp(23px, 2.4vw, 34px);
  box-shadow: 5px 5px 0 rgba(103,150,191,.55);
}
.stream-waiting h2 { margin: 0 0 9px; font: 600 clamp(25px, 2.7vw, 40px)/1.05 'Cormorant Garamond', Georgia, serif; }
.stream-waiting p { margin: 0; color: rgba(255,255,255,.72); font-size: clamp(14px, 1.2vw, 17px); }

.stream-status {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: min(920px, 92%);
  margin: 28px auto 0;
}
.pixel-couple { width: 72px; height: auto; }
.pixel-heart { width: 22px; height: 22px; }
.stream-status p {
  margin: 0;
  font: 400 clamp(8px, .8vw, 10px)/1.6 'Press Start 2P', monospace;
  letter-spacing: .02em;
}
.youtube-link {
  padding: 9px 0 7px;
  border-bottom: 2px solid var(--blue);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
}
.site-footer-v2.live-footer {
  background: var(--blue) !important;
  background-color: var(--blue) !important;
  color: #fff !important;
  border-top-color: rgba(255,255,255,.12) !important;
}
.site-footer-v2.live-footer > span,
.site-footer-v2.live-footer .footer-credit span,
.site-footer-v2.live-footer .small-pixel {
  color: #fff !important;
}
.site-footer-v2.live-footer b {
  color: var(--pink) !important;
}
.site-footer-v2.live-footer .footer-quest-status {
  color: var(--navy) !important;
}

@media (max-width: 720px) {
  html { background: var(--blue); }
  body { min-height: auto; }
  .live-main { width: min(100% - 28px, 620px); padding: 106px 0 22px; }
  .live-eyebrow { font-size: 7px; margin-bottom: 14px; }
  .live-eyebrow span[aria-hidden] { padding: 0 5px; }
  h1 { font-size: clamp(46px, 14vw, 66px); margin-bottom: 28px; }
  .live-plant { top: -30px; width: min(68vw, 380px); }
  .live-plant-back { z-index: 3; }
  .live-plant-front { z-index: 0; }
  .stream-frame { padding: 7px; border-width: 2px; box-shadow: 5px 5px 0 rgba(240,128,152,.24); }
  .stream-frame::before { inset: 4px; }
  .stream-waiting { inset: 7px; padding: 16px; }
  .youtube-player { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .waiting-badge { top: 13px; left: 15px; padding: 6px 7px; font-size: 5px; }
  .waiting-dot { width: 5px; height: 5px; }
  .waiting-play { width: 52px; margin-bottom: 11px; border-radius: 10px; font-size: 20px; }
  .stream-waiting h2 { margin-bottom: 4px; font-size: clamp(19px, 6vw, 28px); }
  .stream-waiting p { max-width: 240px; font-size: 11px; }
  .stream-status { grid-template-columns: auto auto 1fr; gap: 10px; width: 96%; margin-top: 22px; }
  .pixel-couple { width: 56px; }
  .pixel-heart { width: 17px; height: 17px; }
  .stream-status p { font-size: 6px; line-height: 1.7; }
  .youtube-link { grid-column: 1 / -1; justify-self: center; margin-top: 4px; font-size: 9px; }
  .site-footer-v2.live-footer {
    margin: 0 !important;
    padding: 18px 5vw 16px !important;
    gap: 18px !important;
  }
}

@media (max-width: 480px) {
  .live-plant { width: min(76vw, 330px); }
}

@media (prefers-reduced-motion: no-preference) {
  .waiting-dot { animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
}