/* ==========================================================================
   Fresh off the market — bridal shower game night
   Sizing: everything is measured in --u, 1/100th of a 16:9 "stage" that fits
   the screen, so the TV picture looks the same whichever device is sending.
   ========================================================================== */

:root {
  --cream: #FBF6EC;
  --paper: #F3EAD8;
  --leaf: #1F4A34;
  --leaf-mid: #3E7A55;
  --leaf-btn: #2F7A4F;
  --sage: #A8BFA0;
  --mint: #CDEBD8;
  --pistachio: #D7E6A8;
  --blush: #F4C9C6;
  --butter: #F7E39A;
  --lavender: #CFC6EA;
  --kraft: #C9A57A;
  --kraft-dark: #A9824F;
  --tomato: #E0604A;

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-script: 'Caveat', 'Bradley Hand', cursive;
  --f-sans: 'DM Sans', -apple-system, system-ui, sans-serif;
  --f-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  --vh100: 100vh;
  --u: min(1vw, 1.78vh);
  --awn: 12;

  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  --twine: repeating-linear-gradient(180deg, #a8804f 0 4px, #dcc196 4px 8px);
  --twine-h: repeating-linear-gradient(90deg, #a8804f 0 4px, #dcc196 4px 8px);
}
@supports (height: 100dvh) {
  :root { --vh100: 100dvh; --u: min(1vw, 1.78dvh); }
}
@media (orientation: portrait) {
  :root { --u: min(1.9vw, 1.05vh); }
  @supports (height: 100dvh) { :root { --u: min(1.9vw, 1.05dvh); } }
}
/* Short landscape screens (iPhone sideways): slimmer awnings, fewer extras. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --awn: 8.5; }
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--leaf);
}
body {
  position: fixed;
  inset: 0;
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
img, svg { display: block; }

#app {
  position: fixed;
  inset: 0;
  height: var(--vh100);
  overflow: hidden;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
html.ready #app { opacity: 1; }

/* ---------- type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 650;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.script { font-family: var(--f-script); font-weight: 600; line-height: 1.1; }

/* ---------- background: cream paper, pastel washes, grain ---------- */
#bg {
  position: absolute;
  inset: 0;
  background-color: var(--cream);
  background-image:
    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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 55% at 6% 100%, rgba(205, 235, 216, 0.75), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 96%, rgba(244, 201, 198, 0.55), transparent 70%),
    radial-gradient(ellipse 45% 40% at 96% 8%, rgba(247, 227, 154, 0.35), transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 0%, rgba(207, 198, 234, 0.35), transparent 70%);
}
#ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.amb { position: absolute; left: 0; top: 0; width: calc(var(--u) * 2.2); opacity: 0.75; }
.amb svg { width: 100%; height: auto; }

/* ---------- slides ---------- */
#deck { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--sat) + var(--u) * 8.5)
    calc(var(--sar) + var(--u) * 5)
    calc(var(--sab) + var(--u) * 8.5)
    calc(var(--sal) + var(--u) * 5);
}
.slide.is-active { display: flex; }
.s-opening, .s-menu, .s-title, .s-closing {
  padding-top: calc(var(--sat) + var(--u) * (var(--awn) + 1.5));
  padding-bottom: calc(var(--sab) + var(--u) * 5);
}

/* awnings */
.awning {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--sat) + var(--u) * var(--awn));
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 0;
}
.awning svg { width: 100%; height: 100%; }

/* decor */
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.d { position: absolute; width: calc(var(--u) * var(--s)); }
.d-in svg { width: 100%; height: auto; overflow: visible; transform: rotate(var(--r)); }
@media (orientation: portrait) {
  .d { width: calc(var(--u) * var(--s) * 0.85); }
  .hide-sm { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hide-sm { display: none; }
}

/* ---------- hanging kraft tag ---------- */
.htag {
  --string: calc(var(--u) * 6);
  --cut: calc(var(--u) * 1.8);
  position: relative;
  display: inline-block;
  transform-origin: 50% calc(var(--u) * 1.9 - var(--string));
}
.htag::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--u) * 1.9);
  width: 3px;
  margin-left: -1.5px;
  height: var(--string);
  background: var(--twine);
  z-index: 2;
}
.htag-body {
  position: relative;
  display: block;
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 1.6);
  background: linear-gradient(170deg, #D6B98F 0%, var(--kraft) 55%, #BE9868 100%);
  color: var(--leaf);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.htag-body::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 0.55);
  border: 2px dashed rgba(255, 250, 238, 0.55);
  clip-path: polygon(calc(var(--cut) - var(--u) * 0.4) 0, calc(100% - var(--cut) + var(--u) * 0.4) 0, 100% calc(var(--cut) - var(--u) * 0.4), 100% 100%, 0 100%, 0 calc(var(--cut) - var(--u) * 0.4));
  pointer-events: none;
}
.htag-hole {
  position: absolute;
  top: calc(var(--u) * 1.1);
  left: 50%;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  margin-left: calc(var(--u) * -0.8);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 2px rgba(31, 74, 52, 0.18);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: max(54px, calc(var(--u) * 7));
  padding: 0 max(26px, calc(var(--u) * 4));
  border: none;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--cream);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: max(18px, calc(var(--u) * 2.6));
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 calc(var(--u) * 0.5) 0 #143424, 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(31, 74, 52, 0.22);
}
.btn .emo { font-family: var(--f-emoji); font-size: 1.05em; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--leaf-mid); }
}
.btn:focus-visible, .nav-btn:focus-visible, .menu-card:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 4px;
}

/* ==========================================================================
   Chrome: valance, progress tag, timer, corner logo, nav
   ========================================================================== */
.valance, #progress, #timer, .corner-logo, #nav {
  transition: opacity 0.4s ease, visibility 0.4s;
}
.valance {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--sat) + var(--u) * 4.4);
  border-top: calc(var(--u) * 0.7) solid var(--leaf);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.valance svg { width: 100%; height: 100%; }

#progress {
  --string: calc(var(--u) * 5.5);
  position: absolute;
  top: calc(var(--sat) + var(--u) * 5.4);
  left: calc(var(--sal) + var(--u) * 4);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
}
#progress .htag-body {
  padding: calc(var(--u) * 2.9) calc(var(--u) * 2.4) calc(var(--u) * 1);
  font-size: max(17px, calc(var(--u) * 2.8));
  white-space: nowrap;
}

/* timer: a round kraft tag with a draining ring */
#timer {
  position: absolute;
  top: calc(var(--sat) + var(--u) * 5.6);
  right: calc(var(--sar) + var(--u) * 4);
  width: max(64px, calc(var(--u) * 10.5));
  z-index: 5;
  opacity: 0;
  visibility: hidden;
}
#timer::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--u) * 1.2);
  width: 3px;
  margin-left: -1.5px;
  height: calc(var(--u) * 5);
  background: var(--twine);
}
.t-face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #DEC39B, var(--kraft) 60%, #B98F5E);
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(31, 74, 52, 0.22);
  transform-origin: 50% 0;
}
.t-face svg {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  transform: rotate(-90deg);
  overflow: visible;
}
.t-track { fill: var(--cream); stroke: rgba(31, 74, 52, 0.14); stroke-width: 9; }
.t-ring {
  fill: none;
  stroke: var(--leaf-mid);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke 0.3s;
}
.t-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 4.2);
  font-variant-numeric: tabular-nums;
  color: var(--leaf);
  padding-top: 4%;
}
.t-paused {
  position: absolute;
  left: 0; right: 0;
  bottom: 17%;
  text-align: center;
  font-size: calc(var(--u) * 1.7);
  color: var(--leaf-mid);
  opacity: 0;
}
#timer.urgent .t-ring { stroke: var(--tomato); }
#timer.urgent .t-num { color: var(--tomato); }
#timer.paused .t-paused { opacity: 1; }
#timer.paused .t-ring { stroke: var(--sage); }

.corner-logo {
  position: absolute;
  left: calc(var(--sal) + var(--u) * 3);
  bottom: calc(var(--sab) + var(--u) * 2);
  width: max(70px, calc(var(--u) * 11.5));
  height: auto;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

#nav {
  position: absolute;
  right: calc(var(--sar) + var(--u) * 3);
  bottom: calc(var(--sab) + var(--u) * 2);
  display: flex;
  gap: max(8px, calc(var(--u) * 1));
  z-index: 9;
  opacity: 0;
  visibility: hidden;
}
.nav-btn {
  display: grid;
  place-items: center;
  width: max(48px, calc(var(--u) * 6));
  height: max(48px, calc(var(--u) * 6));
  border: none;
  border-radius: 50%;
  background: rgba(251, 246, 236, 0.94);
  color: var(--leaf);
  box-shadow: inset 0 0 0 2px var(--leaf), 0 4px 12px rgba(31, 74, 52, 0.16);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.3s;
}
.nav-btn svg { width: 46%; height: 46%; }
.nav-next { background: var(--leaf); color: var(--cream); box-shadow: 0 4px 12px rgba(31, 74, 52, 0.25); }
.nav-btn[disabled] { opacity: 0.3; pointer-events: none; }
.nav-music .ic-off, .nav-music.is-off .ic-on { display: none; }
.nav-music.is-off .ic-off { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav-btn:hover { background: var(--mint); }
  .nav-next:hover { background: var(--leaf-mid); }
}

/* visibility of chrome per slide type */
body.started #nav { opacity: 1; visibility: visible; }
body.started.idle #nav { opacity: 0; }
body.started.idle { cursor: none; }
body[data-slide="movie"] .valance,
body[data-slide="date"] .valance,
body[data-slide="question"] .valance,
body[data-slide="video"] .valance { opacity: 1; }
body[data-slide="movie"] #progress,
body[data-slide="date"] #progress,
body[data-slide="question"] #progress,
body[data-slide="video"] #progress { opacity: 1; visibility: visible; }
body[data-slide="movie"] #timer { opacity: 1; visibility: visible; }
body[data-slide="movie"] #timer.done { opacity: 0.45; }
body.started:not([data-slide="opening"]):not([data-slide="closing"]) .corner-logo { opacity: 0.95; }

/* rotate hint (phones in portrait) */
#rotate-hint {
  position: absolute;
  left: 50%;
  top: calc(var(--sat) + var(--u) * 14);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--cream);
  font-family: var(--f-script);
  font-size: 21px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#rotate-hint svg { width: 22px; height: 22px; }

#fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.fx-piece { position: absolute; left: 0; top: 0; }
.fx-piece svg { width: 100%; height: 100%; }

/* ==========================================================================
   Opening + closing
   ========================================================================== */
.open-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 1.2);
}
.hero-logo {
  height: min(calc(var(--u) * 25), calc(var(--vh100) * 0.34));
  width: auto;
  max-width: 86vw;
  object-fit: contain;
}
.open-title { font-size: calc(var(--u) * 6.6); }
.close-title { font-size: calc(var(--u) * 9); }
.open-kicker { font-size: calc(var(--u) * 3.3); color: var(--leaf-mid); }
.open-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.4);
}
.btn-restart {
  background: var(--cream);
  color: var(--leaf);
  font-size: max(15px, calc(var(--u) * 2));
  min-height: max(48px, calc(var(--u) * 5.6));
  box-shadow: inset 0 0 0 2px var(--leaf);
}
.btn-restart[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-restart:hover { background: var(--mint); }
}
.open-hint { font-size: max(13px, calc(var(--u) * 1.5)); color: var(--leaf-mid); opacity: 0; }
@media (orientation: landscape) and (max-height: 500px) {
  .open-hint { display: none; }
  .hero-logo { height: calc(var(--vh100) * 0.3); }
}

/* ==========================================================================
   Game menu
   ========================================================================== */
.menu-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.s-menu { --awn: 9; }
.menu-kicker { font-size: calc(var(--u) * 3); color: var(--leaf-mid); }
.menu-title { font-size: calc(var(--u) * 5.6); margin-bottom: calc(var(--u) * 1.8); }
.menu-rail { position: relative; width: 100%; max-width: calc(var(--u) * 112); }
.twine-line {
  position: absolute;
  left: -4%; right: -4%;
  top: 0;
  height: 3px;
  background: var(--twine-h);
  transform-origin: 0 50%;
  border-radius: 2px;
}
.menu-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-items: stretch;
  gap: calc(var(--u) * 3.5);
  padding-top: calc(var(--u) * 3.4);
}
.mc-hang {
  position: relative;
  display: flex;
  transform-origin: 50% calc(var(--u) * -4);
}
.mc-hang::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--u) * 2);
  width: 3px;
  margin-left: -1.5px;
  height: calc(var(--u) * 6);
  background: var(--twine);
  z-index: 2;
}
.menu-card {
  --cut: calc(var(--u) * 2.4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  width: calc(var(--u) * 25);
  min-height: 100%;
  padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 2.2);
  border: none;
  background: var(--card, var(--blush));
  color: var(--leaf);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.menu-card .htag-hole { top: calc(var(--u) * 1.4); }
.mc-1 { --card: var(--blush); }
.mc-2 { --card: var(--mint); }
.mc-3 { --card: var(--lavender); }
.mc-num { font-size: calc(var(--u) * 2.8); color: var(--leaf-mid); margin-top: calc(var(--u) * 0.6); }
.mc-art { height: calc(var(--u) * 6.4); display: flex; align-items: center; }
.mc-art svg { height: 100%; width: auto; }
.mc-text { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); }
.mc-title { font-size: calc(var(--u) * 3.2); }
.mc-sub { font-size: max(13px, calc(var(--u) * 1.7)); font-weight: 600; color: var(--leaf-mid); }
@media (orientation: portrait) {
  .menu-rail { max-width: 100%; }
  .twine-line { display: none; }
  .menu-cards { flex-direction: column; align-items: center; gap: calc(var(--u) * 4.5); padding-top: calc(var(--u) * 3); }
  .menu-card {
    flex-direction: row;
    width: min(86vw, calc(var(--u) * 50));
    padding: calc(var(--u) * 3.8) calc(var(--u) * 3) calc(var(--u) * 2.2);
    gap: calc(var(--u) * 2.4);
    text-align: left;
  }
  .menu-card .htag-hole { top: calc(var(--u) * 0.8); }
  .mc-num { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 0.9); margin: 0; font-size: calc(var(--u) * 2.4); }
  .mc-art { height: calc(var(--u) * 9); width: calc(var(--u) * 9); justify-content: center; flex: none; }
  .mc-text { align-items: flex-start; }
  .mc-title { font-size: calc(var(--u) * 4.2); }
  .mc-sub { font-size: max(13px, calc(var(--u) * 2)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .menu-title { margin-bottom: calc(var(--u) * 1.4); font-size: calc(var(--u) * 5.4); }
  .menu-card { padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 2); }
  .mc-art { height: calc(var(--u) * 6); }
}

/* ==========================================================================
   Game title slides
   ========================================================================== */
.title-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 1.6);
  max-width: calc(var(--u) * 120);
}
.title-tag { --string: calc(var(--u) * 16); }
.title-tag .htag-body { padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 1.3); font-size: calc(var(--u) * 3.4); }
.title-text { font-size: calc(var(--u) * 10.5); }
.title-sub { font-size: max(16px, calc(var(--u) * 2.6)); font-weight: 500; color: var(--leaf-mid); max-width: 36ch; line-height: 1.35; text-wrap: balance; }
.s-title-3 .title-text { font-size: calc(var(--u) * 8.6); }
@media (orientation: portrait) {
  .title-text, .s-title-3 .title-text { font-size: calc(var(--u) * 8.4); }
  .scale { --k: var(--u); }
}

/* balance scale (Game 3 title) */
.scale {
  --k: calc(var(--u) * 0.75);
  position: relative;
  width: calc(var(--k) * 30);
  height: calc(var(--k) * 16.5);
  margin-top: calc(var(--k) * 0.5);
}
.scale-post { position: absolute; left: 50%; bottom: 0; width: calc(var(--k) * 8); margin-left: calc(var(--k) * -4); }
.scale-post svg { width: 100%; height: auto; }
.scale-beam {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--k) * 6.4);
  height: calc(var(--k) * 1.4);
}
.scale-beam > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scale-pan {
  position: absolute;
  top: 50%;
  width: calc(var(--k) * 9);
  transform-origin: 50% 0;
}
.scale-pan svg { width: 100%; height: auto; }
.pan-l { left: calc(var(--k) * -4.5); }
.pan-r { right: calc(var(--k) * -4.5); }
.pan-label {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--k) * 1.6);
  text-align: center;
  font-size: calc(var(--k) * 2);
}
@media (orientation: landscape) and (max-height: 500px) {
  .scale { --k: calc(var(--u) * 0.55); }
  .title-text, .s-title-3 .title-text { font-size: calc(var(--u) * 8.4); }
  .menu-kicker { display: none; }
}

/* ==========================================================================
   Game 1 — Reel Produce
   ========================================================================== */
.movie-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas: 'main';
  place-items: center;
}
.movie-stage > * { grid-area: main; }

.clue {
  --fs: min(calc(78vw / (var(--n) * 1.3)), calc(var(--u) * 17));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--fs) * 0.16) calc(var(--fs) * 0.22);
  max-width: 90vw;
  font-size: var(--fs);
  line-height: 1.12;
}
.tok { display: inline-block; font-family: var(--f-emoji); }
.tok-word {
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 0.6em;
  color: var(--leaf);
  padding: 0 0.12em;
}
.clue-stack {
  --fs: min(6.4vw, calc(var(--u) * 11.5));
  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: calc(var(--fs) * 0.1) calc(var(--fs) * 0.16);
}
.clue-stack .row { display: contents; }

.btn-reveal {
  visibility: hidden;
  font-size: max(19px, calc(var(--u) * 3.2));
  min-height: max(60px, calc(var(--u) * 8.4));
  padding: 0 max(32px, calc(var(--u) * 5.4));
}
.s-movie[data-state="b"] .btn-reveal { visibility: visible; }

.answer { display: none; }
.s-movie[data-state="c"] .movie-stage {
  grid-template-areas: 'clue' 'ans';
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: calc(var(--u) * 2.4);
}
.s-movie[data-state="c"] .clue { grid-area: clue; --fs: min(calc(60vw / (var(--n) * 1.3)), calc(var(--u) * 9)); }
.s-movie[data-state="c"] .clue-stack { --fs: min(4vw, calc(var(--u) * 6)); }
.s-movie[data-state="c"] .btn-reveal { display: none; }
.s-movie[data-state="c"] .answer { display: flex; grid-area: ans; justify-content: center; }

.answer-tag { --string: calc(var(--u) * 3); --cut: calc(var(--u) * 2.6); }
.answer-tag .htag-body {
  padding: calc(var(--u) * 3.4) calc(var(--u) * 5) calc(var(--u) * 2.4);
  text-align: center;
  min-width: calc(var(--u) * 40);
  max-width: 82vw;
  background: linear-gradient(170deg, #FBEFB8 0%, var(--butter) 60%, #EED37A 100%);
}
.answer-kicker { display: block; font-size: calc(var(--u) * 2.8); color: var(--leaf-mid); }
.answer-title { display: block; font-size: calc(var(--u) * 7); margin-top: calc(var(--u) * 0.4); }
.answer-alt { display: block; font-size: calc(var(--u) * 2.6); color: var(--leaf-mid); margin-top: calc(var(--u) * 0.8); }

@media (orientation: portrait) {
  .clue { --fs: min(calc(84vw / 3.5), calc(var(--u) * 13)); max-width: 92vw; }
  .s-movie[data-state="c"] .clue { --fs: min(calc(84vw / 5.2), calc(var(--u) * 7)); }
  .clue-stack {
    --fs: min(10.5vw, calc(var(--u) * 8));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--fs) * 0.06);
  }
  .clue-stack .row { display: flex; gap: calc(var(--fs) * 0.14); }
  .s-movie[data-state="c"] .clue-stack { --fs: min(6.4vw, calc(var(--u) * 4.6)); }
  .answer-title { font-size: calc(var(--u) * 6); }
  .answer-tag .htag-body { min-width: 0; padding-left: calc(var(--u) * 3.4); padding-right: calc(var(--u) * 3.4); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .s-movie[data-state="c"] .clue { --fs: min(calc(60vw / (var(--n) * 1.3)), calc(var(--u) * 7.5)); }
  .s-movie[data-state="c"] .clue-stack { --fs: min(3.4vw, calc(var(--u) * 5)); }
  .s-movie[data-state="c"] .movie-stage { row-gap: calc(var(--u) * 1.4); }
  .answer-title { font-size: calc(var(--u) * 5.6); }
  .answer-tag .htag-body { padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 1.6); }
}

/* ==========================================================================
   Game 2 — Smash or Pass
   ========================================================================== */
.date-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 7);
  width: 100%;
}
.s-date { padding-top: calc(var(--sat) + var(--u) * 12); padding-bottom: calc(var(--sab) + var(--u) * 6); }
.pol-col { position: relative; flex: none; }
.pol-tilt { transform: rotate(-2.5deg); }
.polaroid {
  --pw: min(calc(var(--u) * 34), calc((var(--vh100) - var(--u) * 35) * 0.8));
  position: relative;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0;
  background: #FFFDF8;
  border-radius: 3px;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(31, 74, 52, 0.18), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform-origin: 50% 0;
}
.photo {
  position: relative;
  width: var(--pw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mint);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-ph {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 2);
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--mint) 0 14px, #DBF1E3 14px 28px);
}
.no-photo .photo-ph { display: flex; }
.no-photo .photo img { display: none; }
.ph-initials {
  display: grid;
  place-items: center;
  width: calc(var(--pw) * 0.42);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  font-size: calc(var(--pw) * 0.16);
  box-shadow: inset 0 0 0 3px var(--leaf);
}
.ph-name { font-size: calc(var(--pw) * 0.09); margin-top: calc(var(--u) * 0.6); }
.ph-note { font-size: max(11px, calc(var(--pw) * 0.035)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf-mid); }
.pol-caption {
  height: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 3);
  color: var(--leaf-mid);
}
.pin {
  position: absolute;
  top: calc(var(--u) * -3.8);
  left: 50%;
  width: calc(var(--u) * 3.2);
  margin-left: calc(var(--u) * -1.6);
  z-index: 2;
}
.pin svg { width: 100%; height: auto; }
.stamp {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  padding: 0.08em 0.4em;
  border: calc(var(--u) * 0.6) solid currentColor;
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255, 253, 248, 0.6);
  color: var(--tomato);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: calc(var(--pw) * 0.17);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.stamp.is-date { color: var(--leaf-btn); font-size: calc(var(--pw) * 0.16); }

.wilt {
  position: absolute;
  left: calc(var(--u) * -3);
  bottom: calc(var(--u) * -1);
  width: calc(var(--u) * 5);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.wilt-stem { position: relative; width: 100%; transform-origin: 50% 100%; }
.wilt-stem > svg { width: 100%; height: auto; }
.wilt-head {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--u) * 0.8);
  width: calc(var(--u) * 5.4);
  margin-left: calc(var(--u) * -2.7);
  transform-origin: 50% 100%;
}
.wilt-head svg { width: 100%; height: auto; }

.date-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 1.2);
  max-width: calc(var(--u) * 54);
}
.date-name { font-size: calc(var(--u) * 8); }
.date-from { font-size: calc(var(--u) * 2.8); color: var(--leaf-mid); }
.date-from .script { font-size: 1.25em; }
.date-from em { font-family: var(--f-display); font-style: italic; font-weight: 500; }
.date-btns { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2.2); }
.date-btns .btn {
  font-size: max(19px, calc(var(--u) * 3.1));
  min-height: max(60px, calc(var(--u) * 8.4));
  padding: 0 max(28px, calc(var(--u) * 4.4));
}
.btn-date { background: var(--leaf-btn); }
.btn-pass {
  background: var(--cream);
  color: var(--leaf);
  box-shadow: inset 0 0 0 3px var(--leaf), 0 calc(var(--u) * 0.5) 0 #143424, 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(31, 74, 52, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .btn-pass:hover { background: var(--blush); }
}

@media (orientation: portrait) {
  .date-wrap { flex-direction: column; gap: calc(var(--u) * 3); }
  .polaroid { --pw: min(60vw, calc(var(--vh100) * 0.36 * 0.8)); }
  .date-info { align-items: center; text-align: center; }
  .date-name { font-size: calc(var(--u) * 6.4); }
  .date-btns { justify-content: center; margin-top: calc(var(--u) * 1); }
  .wilt { left: calc(var(--u) * -3.4); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .polaroid { --pw: calc((var(--vh100) - var(--u) * 27) * 0.8); }
  .pol-caption { height: calc(var(--u) * 4.6); font-size: calc(var(--u) * 2.6); }
  .date-name { font-size: calc(var(--u) * 7); }
  .date-btns { margin-top: calc(var(--u) * 1); }
}

/* ==========================================================================
   Game 3 — Weighed & Measured
   ========================================================================== */
.q-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 2.4);
  max-width: calc(var(--u) * 124);
}
.q-tag { --string: calc(var(--u) * 7); }
.q-tag .htag-body {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 1.2);
  background: linear-gradient(170deg, #E3DCF5 0%, var(--lavender) 60%, #BCB1E2 100%);
}
.q-tag .script { font-size: calc(var(--u) * 2.8); }
.q-num { font-size: calc(var(--u) * 4.2); }
.q-text {
  font-size: calc(var(--u) * 5.8);
  line-height: 1.14;
  max-width: 22ch;
  text-wrap: balance;
}
.q-text.q-long { font-size: calc(var(--u) * 4.9); max-width: 27ch; }
.q-prompt { font-size: calc(var(--u) * 3.1); color: var(--leaf-mid); }
@media (orientation: portrait) {
  .q-text { font-size: calc(var(--u) * 5.4); }
  .q-text.q-long { font-size: calc(var(--u) * 4.6); }
}

.s-video { padding-top: calc(var(--sat) + var(--u) * 7); padding-bottom: calc(var(--sab) + var(--u) * 7); }
/* Landscape: tall portrait video on the left, the question beside it. */
.v-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4.5);
}
.v-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.v-info {
  flex: 0 1 calc(var(--u) * 38);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
}
.v-qtag { --string: calc(var(--u) * 4); }
.v-q {
  font-size: calc(var(--u) * 4.2);
  line-height: 1.14;
  text-wrap: balance;
}
.v-q.q-long { font-size: calc(var(--u) * 3.6); }
.v-prompt { font-size: calc(var(--u) * 3.2); color: var(--leaf-mid); text-wrap: balance; }
@media (orientation: landscape) and (max-height: 500px) {
  .v-q, .v-q.q-long { font-size: calc(var(--u) * 3.4); }
  .v-info { gap: calc(var(--u) * 1.2); }
  /* Phone sideways: size the video column to the portrait clip and center the pair. */
  .v-stage {
    flex: 0 0 auto;
    width: calc((var(--vh100) - var(--u) * 14 - var(--sat) - var(--sab)) * 0.5625 + 28px);
    justify-content: center;
  }
}
/* Portrait phone: question small on top, video fills the rest. */
@media (orientation: portrait) {
  .s-video { padding-top: calc(var(--sat) + var(--u) * 13.5); }
  .v-wrap { flex-direction: column-reverse; justify-content: flex-end; gap: calc(var(--u) * 3); }
  .v-stage { flex: 1 1 0; width: 100%; min-height: 0; justify-content: center; }
  .v-info { flex: none; align-items: center; text-align: center; }
  .v-qtag, .v-prompt { display: none; }
  .v-q { font-size: calc(var(--u) * 3.4); }
  .v-q.q-long { font-size: calc(var(--u) * 3); }
}
.v-frame {
  position: relative;
  width: 640px;
  height: 360px;
  border-radius: calc(var(--u) * 1.4);
  box-shadow:
    0 0 0 calc(var(--u) * 0.9) var(--kraft),
    0 0 0 calc(var(--u) * 1.15) var(--kraft-dark),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(31, 74, 52, 0.25);
}
.v-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #163626;
}
.v-clip video { width: 100%; height: 100%; object-fit: contain; background: #163626; }
.v-label-row {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * -6.2);
  display: flex;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.v-label { --string: calc(var(--u) * 3); }
.v-label .htag-body {
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2.2) calc(var(--u) * 0.8);
  font-size: max(16px, calc(var(--u) * 2.6));
  white-space: nowrap;
}
.v-label::before { display: none; }
.v-ph {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 3);
  text-align: center;
  background: repeating-linear-gradient(-45deg, var(--cream) 0 18px, #F6EEDD 18px 36px);
}
.v-ph-art { width: calc(var(--u) * 11); }
.v-ph-art svg { width: 100%; height: auto; }
.v-ph-title { font-size: calc(var(--u) * 4.8); }
.v-ph-sub { font-size: calc(var(--u) * 2.6); color: var(--leaf-mid); }
.s-video.is-missing .v-ph { display: flex; }
.s-video.is-missing video { visibility: hidden; }
.v-play {
  --size: max(76px, calc(var(--u) * 11));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(251, 246, 236, 0.94);
  color: var(--leaf);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 2;
}
.v-play svg { width: 40%; height: 40%; margin-left: 8%; }
.s-video.is-paused:not(.is-missing) .v-play { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .valance, #progress, #timer, .corner-logo, #nav, #app { transition: none; }
}