/* ============================================================
   Guess the Movie — Saul Bass / Vertigo black + vermilion
   Plain CSS, no framework. No cream anywhere.
   ============================================================ */

:root {
  /* Ground: near-black with a faint cool teal cast (not warm) */
  --ground: #0d1311;
  --ground-2: #121b18;
  --ink: #070a09;

  /* Dominant + accents */
  --vermilion: #e63a1b;
  --vermilion-deep: #b62a10;
  --marigold: #f2a81d;
  --teal: #1ba898;

  /* Light tone is COOL chalk, never cream */
  --chalk: #eef1ea;
  --chalk-dim: #aab4ad;
  --chalk-faint: #5d6a64;

  --shadow-hard: 6px 6px 0 var(--ink);
  --font-poster: "Staatliches", "Arial Narrow", sans-serif;
  --font-ui: "Jost", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--chalk);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---- Atmosphere: flat Bass shapes, grain, projector vignette ---- */

body::before,
body::after,
.stage::before,
.stage::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

/* Big vermilion cut-paper quarter-circle bleeding off bottom-left */
body::before {
  left: -18vw;
  bottom: -22vw;
  width: 52vw;
  height: 52vw;
  background: var(--vermilion);
  border-radius: 50%;
  opacity: 0.92;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Marigold hard-edged wedge top-right */
body::after {
  right: -10vw;
  top: -16vw;
  width: 34vw;
  height: 34vw;
  background: var(--marigold);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0.9;
}

/* Projector vignette: closes in as you lose (--dark from JS, 0..1) */
.stage::after {
  inset: 0;
  z-index: 60;
  background: radial-gradient(
    ellipse 90% 80% at 50% 42%,
    transparent 40%,
    rgba(0, 0, 0, calc(0.35 + 0.6 * var(--dark, 0))) 100%
  );
  transition: background 600ms ease;
}

/* Film grain */
.stage::before {
  inset: 0;
  z-index: 61;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* ---- Layout ---- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(18px, 4vw, 48px) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vh, 40px);
}

/* ---- Wordmark ---- */

.topbar { text-align: center; }

.wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  font-family: var(--font-poster);
  line-height: 0.82;
  text-transform: uppercase;
}
.wordmark-guess {
  font-size: clamp(38px, 8vw, 86px);
  color: var(--chalk);
  letter-spacing: 0.01em;
}
.wordmark-the {
  font-size: clamp(16px, 2.4vw, 26px);
  color: var(--marigold);
  transform: rotate(-6deg);
}
.wordmark-movie {
  font-size: clamp(38px, 8vw, 86px);
  color: var(--vermilion);
  letter-spacing: 0.01em;
  position: relative;
}
.wordmark-movie::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.09em;
  background: var(--teal);
}

.tagline {
  margin-top: 0.8em;
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  font-weight: 500;
  padding-left: 0.42em;
}

/* ---- Mode toggle (Hollywood / Bollywood) ---- */

.mode {
  display: inline-flex;
  gap: 4px;
  margin-top: 1.1em;
  padding: 4px;
  border: 1.5px solid rgba(238, 241, 234, 0.16);
  border-radius: 999px;
}
.mode[hidden] { display: none; }
.mode-opt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.5em 1.1em;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.mode-opt:hover { color: var(--chalk); }
.mode-opt.is-active {
  color: var(--ground);
  background: var(--marigold);
}

.challenge-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.1em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marigold);
  border: 1.5px solid var(--marigold);
  border-radius: 999px;
  padding: 0.5em 1.2em;
}
.challenge-badge[hidden] { display: none; }

/* ---- The HOLLYWOOD sign (lives) ---- */

.sign {
  display: flex;
  gap: clamp(3px, 0.8vw, 8px);
  perspective: 600px;
}
.sign-letter {
  font-family: var(--font-poster);
  font-size: clamp(20px, 4.4vw, 42px);
  line-height: 1;
  color: var(--chalk);
  background: var(--ground-2);
  border: 2px solid var(--chalk);
  padding: 0.18em 0.16em 0.08em;
  border-radius: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transition:
    transform 520ms cubic-bezier(0.6, -0.4, 0.7, 1.4),
    color 360ms ease,
    border-color 360ms ease,
    opacity 360ms ease,
    background 360ms ease;
}
.sign-letter.dead {
  color: var(--vermilion-deep);
  border-color: var(--vermilion-deep);
  background: transparent;
  opacity: 0.5;
  transform: translateY(10px) rotate(8deg) scale(0.92);
}

/* ---- The movie title board ---- */

.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 1.4vw, 16px);
  max-width: 880px;
}
.word {
  display: flex;
  gap: clamp(4px, 0.7vw, 8px);
}
.tile {
  width: clamp(26px, 5.4vw, 52px);
  height: clamp(36px, 7vw, 68px);
  display: grid;
  place-items: center;
  font-family: var(--font-poster);
  font-size: clamp(22px, 4.6vw, 44px);
  color: var(--ground);
  background: var(--chalk);
  border-radius: 3px;
  box-shadow: var(--shadow-hard);
  transform: translateY(0);
}
.tile.blank {
  background: transparent;
  color: transparent;
  border-bottom: 4px solid var(--chalk-faint);
  border-radius: 0;
  box-shadow: none;
  height: clamp(30px, 6vw, 56px);
}
.tile.revealed {
  animation: stamp 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.tile.punct {
  background: transparent;
  color: var(--chalk-dim);
  box-shadow: none;
  width: auto;
  min-width: 0.4em;
}
@keyframes stamp {
  0% { transform: translateY(-14px) scale(1.25) rotate(-4deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

/* ---- Heard feedback ---- */

.heard {
  min-height: 1.6em;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  text-align: center;
}
.heard b {
  color: var(--marigold);
  font-weight: 600;
}
.heard.miss b { color: var(--vermilion); }
.heard.hit b { color: var(--teal); }

/* ---- Mic: the Vertigo spiral ---- */

.controls { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.mic {
  position: relative;
  width: clamp(96px, 18vw, 132px);
  height: clamp(96px, 18vw, 132px);
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
}
.mic:focus-visible { outline: 3px solid var(--marigold); outline-offset: 6px; border-radius: 50%; }

.mic-spiral {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.0;
  transition: opacity 300ms ease;
}
.mic-spiral svg { width: 100%; height: 100%; display: block; }

.mic-core {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: var(--vermilion);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px var(--ground), 0 0 0 8px var(--vermilion);
  transition: transform 200ms ease, background 200ms ease;
}
.mic-icon {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mic:hover .mic-core { transform: scale(1.05); }

.mic.listening .mic-spiral { opacity: 1; animation: spin 2.4s linear infinite; }
.mic.listening .mic-core { background: var(--marigold); animation: pulse 1.1s ease-in-out infinite; }
.mic.listening .mic-icon { stroke: var(--ground); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 6px var(--ground), 0 0 0 8px var(--marigold); }
  50% { box-shadow: 0 0 0 6px var(--ground), 0 0 0 14px rgba(242, 168, 29, 0.35); }
}

.mic-label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  font-weight: 500;
}

/* ---- Record toggle ---- */

.rec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  background: transparent;
  border: 1.5px solid rgba(238, 241, 234, 0.18);
  border-radius: 999px;
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.rec-toggle:hover { color: var(--chalk); border-color: var(--chalk); }
.rec-toggle .rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--chalk-faint);
  transition: background 160ms ease;
}
.rec-toggle[aria-pressed="true"] {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.rec-toggle[aria-pressed="true"] .rec-dot {
  background: var(--vermilion);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* ---- Background picker (recording only) ---- */
.bgbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.bgbar[hidden] { display: none; }
.bgbar-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.bgbar-opts { display: inline-flex; gap: 6px; }
.bgopt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  background: var(--ground-2);
  border: 1.5px solid rgba(238, 241, 234, 0.16);
  border-radius: 999px;
  padding: 0.42em 0.9em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.bgopt:hover { color: var(--chalk); border-color: var(--chalk); }
.bgopt.is-active {
  color: var(--ground);
  background: var(--marigold);
  border-color: var(--marigold);
}
.bg-recapture {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--chalk-faint);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bg-recapture[hidden] { display: none; }
.bg-recapture:hover { color: var(--chalk-dim); }

/* ---- Live webcam PiP while recording ---- */

.campip {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  width: clamp(120px, 22vw, 168px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--vermilion);
  box-shadow: var(--shadow-hard);
  background: #000;
  cursor: grab;
  touch-action: none; /* let us drag on touch without scrolling the page */
}
.campip.dragging { cursor: grabbing; }
.campip[hidden] { display: none; }
/* Tiny grip affordance so it reads as movable */
.campip::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 14px; height: 8px;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 4px 4px;
  color: rgba(238, 241, 234, 0.7);
  pointer-events: none;
}
.campip video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* selfie mirror */
}
.campip-fx {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* selfie mirror, matches the video */
  pointer-events: none;
}
.campip-fx[hidden] { display: none; }
.campip-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  background: rgba(7, 10, 9, 0.72);
  color: var(--chalk);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  z-index: 2;
  pointer-events: none;
}
.campip-count[hidden] { display: none; }
.rec-badge {
  position: absolute;
  top: 7px; left: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--chalk);
  background: rgba(7, 10, 9, 0.7);
  padding: 3px 7px;
  border-radius: 3px;
}
.rec-badge .rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vermilion);
  animation: blink 1.1s steps(2, start) infinite;
}

/* ---- Clip download in the curtain ---- */

.clip {
  margin-top: 1.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.clip[hidden] { display: none; }
.clip-preview {
  width: min(260px, 70vw);
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  border: 2px solid rgba(238, 241, 234, 0.2);
  background: #000;
  object-fit: cover;
}
.save-clip {
  font-family: var(--font-poster);
  font-size: clamp(15px, 2.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ground);
  background: var(--teal);
  text-decoration: none;
  padding: 0.5em 1.3em 0.36em;
  border-radius: 3px;
  box-shadow: var(--shadow-hard);
  transition: transform 140ms ease;
}
.save-clip:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }

/* ---- Keyboard fallback ---- */

.keyboard {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: clamp(4px, 0.8vw, 7px);
  width: 100%;
  max-width: 620px;
}
.key {
  aspect-ratio: 1;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(12px, 2vw, 16px);
  color: var(--chalk);
  background: var(--ground-2);
  border: 1.5px solid rgba(238, 241, 234, 0.16);
  border-radius: 3px;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
  text-transform: uppercase;
}
.key:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--chalk); }
.key:disabled { cursor: default; }
.key.hit { background: var(--teal); color: var(--ground); border-color: var(--teal); }
.key.miss { background: transparent; color: var(--vermilion-deep); border-color: transparent; opacity: 0.4; }

/* ---- Mute toggle ---- */

.mute {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 75;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px 0 11px;
  border-radius: 999px;
  background: var(--ground-2);
  border: 1.5px solid rgba(238, 241, 234, 0.16);
  color: var(--chalk-dim);
  cursor: pointer;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}
.mute:hover { color: var(--chalk); border-color: var(--chalk); }
.mute svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mute .wave { transition: opacity 120ms ease; }
.mute .slash { opacity: 0; }
.mute.muted { color: var(--vermilion); border-color: var(--vermilion); }
.mute.muted .wave { opacity: 0; }
.mute.muted .slash { opacity: 1; }

/* ---- Footnote ---- */

.footnote {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.footnote-dot { color: var(--chalk-faint); }
.make-challenge {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--marigold);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.make-challenge:hover { opacity: 0.7; }

/* ---- Challenge creator overlay ---- */

.creator {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 10, 9, 0.88);
  backdrop-filter: blur(5px);
  animation: fade 320ms ease both;
}
.creator[hidden] { display: none; }
.creator-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--ground-2);
  border: 1.5px solid rgba(238, 241, 234, 0.14);
  border-radius: 10px;
  padding: clamp(24px, 5vw, 40px);
  box-shadow: var(--shadow-hard);
  animation: rise 420ms cubic-bezier(0.2, 1, 0.3, 1) both;
}
.creator-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  font-size: 26px; line-height: 1;
  color: var(--chalk-dim);
  background: none; border: none; cursor: pointer;
  transition: color 160ms ease;
}
.creator-close:hover { color: var(--chalk); }
.creator-kicker {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--marigold);
  font-weight: 600;
}
.creator-title {
  font-family: var(--font-poster);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 0.96;
  color: var(--chalk);
  margin: 0.3em 0 0.3em;
}
.creator-sub {
  font-size: 13px;
  color: var(--chalk-dim);
  line-height: 1.5;
  margin-bottom: 1.6em;
}
.creator-field { display: block; margin-bottom: 1.2em; }
.creator-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin-bottom: 0.5em;
}
.creator-field input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--chalk);
  background: var(--ground);
  border: 1.5px solid rgba(238, 241, 234, 0.18);
  border-radius: 5px;
  padding: 0.7em 0.8em;
  outline: none;
  transition: border-color 160ms ease;
}
.creator-field input:focus { border-color: var(--marigold); }
#challengeInput { text-transform: uppercase; letter-spacing: 0.06em; }
.counter {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.counter.over { color: var(--vermilion); }
.creator-make {
  width: 100%;
  font-family: var(--font-poster);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ground);
  background: var(--marigold);
  border: none;
  border-radius: 5px;
  padding: 0.5em;
  cursor: pointer;
  transition: transform 140ms ease, opacity 160ms ease;
}
.creator-make:hover { transform: translateY(-2px); }
.creator-make:disabled { opacity: 0.4; cursor: default; transform: none; }
.creator-result { margin-top: 1.6em; }
.share-row { display: flex; gap: 8px; }
.share-url {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--chalk-dim);
  background: var(--ground);
  border: 1.5px solid rgba(238, 241, 234, 0.18);
  border-radius: 5px;
  padding: 0.6em 0.7em;
  outline: none;
}
.copy-url {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--teal);
  border: none;
  border-radius: 5px;
  padding: 0 1.1em;
  cursor: pointer;
}
.creator-note {
  margin-top: 1em;
  font-size: 11px;
  line-height: 1.5;
  color: var(--chalk-faint);
}

/* ---- Curtain actions ---- */

.curtain-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.8em;
}
.challenge-friend {
  font-family: var(--font-poster);
  font-size: clamp(18px, 3vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chalk);
  background: transparent;
  border: 2px solid var(--chalk);
  padding: 0.5em 1.2em 0.38em;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 140ms ease, background 160ms ease, color 160ms ease;
}
.challenge-friend:hover { background: var(--chalk); color: var(--ground); transform: translateY(-2px); }
.play-random {
  display: inline-block;
  margin-top: 1.4em;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--chalk-faint);
  padding-bottom: 2px;
}
.play-random[hidden] { display: none; }
.play-random:hover { color: var(--chalk); }

/* ---- Curtain (win / lose) ---- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(7, 10, 9, 0.86);
  backdrop-filter: blur(4px);
  animation: fade 360ms ease both;
}
.curtain[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.curtain-card {
  text-align: center;
  max-width: 560px;
  padding: 0 28px;
  animation: rise 460ms cubic-bezier(0.2, 1, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.curtain-kicker {
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
}
.curtain.won .curtain-kicker { color: var(--teal); }
.curtain.lost .curtain-kicker { color: var(--vermilion); }

.curtain-title {
  font-family: var(--font-poster);
  font-size: clamp(40px, 9vw, 92px);
  line-height: 0.92;
  margin: 0.18em 0 0.12em;
  color: var(--chalk);
}
.curtain-sub {
  font-size: clamp(14px, 2vw, 17px);
  color: var(--chalk-dim);
  letter-spacing: 0.04em;
}
.play-again {
  margin-top: 1.8em;
  font-family: var(--font-poster);
  font-size: clamp(18px, 3vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ground);
  background: var(--marigold);
  border: none;
  padding: 0.5em 1.4em 0.38em;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: transform 140ms ease;
}
.play-again:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.play-again:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }

/* ---- Slim screens ---- */
/* On phones the centered wordmark reaches the top-right corner and would
   collide with the fixed SFX button. Give the stage a top inset so the
   wordmark starts below the button, and shrink the button to an icon-only
   circle so it takes less room. */
@media (max-width: 560px) {
  .stage { padding-top: 60px; }
  .mute {
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    padding: 0; gap: 0;
    justify-content: center;
  }
  .mute .mute-tag { display: none; }
  /* Default the webcam preview to the top-right (clear of the bottom
     keyboard) and make it smaller. It is draggable from here. */
  .campip {
    width: clamp(86px, 28vw, 116px);
    top: 56px; right: 10px;
    left: auto; bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}