/* Weberplex
   Layout: one program column (max 46rem) under a lit marquee; the marquee is
   the only loud thing on the page — everything below it stays house-lights-down. */
:root {
  --velvet: #140a0f;      /* the dark house */
  --velvet-2: #1e1117;    /* raised panels */
  --velvet-3: #2a1720;    /* inputs, hover */
  --rule: #3b2530;        /* dividers and panel edges */
  --rule-strong: #7a5f6b; /* the edge of anything you tap: 3:1 on the velvets */
  --curtain: #7d1b35;     /* oxblood: primary actions */
  --curtain-hi: #9c2747;
  --bulb: #ffc76e;        /* marquee bulb amber: the accent */
  --bulb-soft: rgba(255, 199, 110, 0.16);
  --board: #fbf3e2;       /* lit marquee letter board */
  --board-ink: #1b0f0c;
  --screen: #f3e9dc;      /* projector-light text */
  --dim: #bba69c;
  --faint: #9a8389;       /* 4.8:1 or better on every velvet */
  --ticket: #f1dbc6;      /* admit-one paper */
  --ticket-ink: #2c1712;
  --ticket-label: #7a4a3e;  /* field names and small print on ticket stock */
  --admit-red: #8c2440;     /* ADMIT ONE and NOW BOOKING */
  --stripe-cream: #e8e0d6;  /* the cream in the concession stripe */
  --go: #93d9ad;
  --bad: #ff8f80;

  --f-display: 'Limelight', 'Georgia', serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --radius: 6px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-strong) var(--velvet); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--bulb); color: var(--board-ink); }
/* the jump links land a little below the top edge */
.section, .pass { scroll-margin-top: 12px; }
body {
  margin: 0;
  background: var(--velvet);
  color: var(--screen);
  font: 400 var(--step-0)/1.5 var(--f-body);
  font-stretch: 100%;
  min-height: 100vh;
}
/* faint curtain pleats beside the column, only where there is room for them */
body::before {
  content: none;
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(125, 27, 53, 0.10) 0 18px, rgba(0, 0, 0, 0.12) 18px 36px) left / 7vw 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 18px, rgba(125, 27, 53, 0.10) 18px 36px) right / 7vw 100% no-repeat;
}
@media (min-width: 900px) { body::before { content: ''; } }
img { max-width: 100%; display: block; }
a { color: var(--bulb); }
button, input, select, textarea { font: inherit; color: inherit; accent-color: var(--bulb); }
.ico { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bulb); outline-offset: 2px; }
/* a container that only takes focus from script (a repaint, an overlay) isn't a control */
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 16px; padding-block: 0 4rem; }

/* ---- top bar ------------------------------------------------------------ */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding-block: 14px;
  font-size: var(--step--1);
  color: var(--dim);
}
.topbar .house { font-family: var(--f-display); color: var(--bulb); font-size: var(--step-0); letter-spacing: 0.04em; text-decoration: none; }
.whoami { display: flex; align-items: center; gap: 6px; min-width: 0; }
.whoami b { color: var(--screen); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; min-width: 2.5em; }
.whoami .face { margin: 0; border: 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--bulb); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
/* the top bar's links are small type in the hardest corner to reach: give
   them a full 44px of tap without moving anything */
.topbar .linkish { padding: 13px 6px; margin: -13px -6px; }

/* ---- the program: jump links under the marquee ------------------------- */
.program {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px;
  margin-top: 6px; font: 700 12px/1 var(--f-body); font-stretch: 75%;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.program a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
  color: var(--dim); text-decoration: none;
}
.program a:hover { color: var(--bulb); }

/* ---- the marquee ------------------------------------------------------- */
.marquee {
  position: relative;
  padding: 16px;
  border-radius: 10px;
  background: #3a0f1d;
  box-shadow: 0 0 0 2px #5a1a2c inset, 0 18px 50px -20px rgba(255, 170, 80, 0.35);
  isolation: isolate;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; inset: 4px; border-radius: 8px; z-index: -1;
  /* bulbs: a dotted frame drawn with radial gradients along all four edges */
  --b: radial-gradient(circle, #fff3d1 0 2.2px, var(--bulb) 3px, rgba(255, 199, 110, 0) 6px);
  background:
    var(--b) 0 0 / 18px 12px repeat-x,
    var(--b) 0 100% / 18px 12px repeat-x,
    var(--b) 0 0 / 12px 18px repeat-y,
    var(--b) 100% 0 / 12px 18px repeat-y;
  animation: chase 1.2s steps(1) infinite;
}
.marquee::after { background-position: 9px 0, 9px 100%, 0 9px, 100% 9px; animation-delay: -0.6s; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: 0.25; } }
.board {
  position: relative;
  background: var(--board);
  color: var(--board-ink);
  border-radius: 4px;
  padding: 18px 16px 16px;
  text-align: center;
  box-shadow: 0 0 24px rgba(255, 233, 190, 0.55), inset 0 0 22px rgba(255, 210, 140, 0.55);
  /* letter-board grooves */
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(27, 15, 12, 0.07) 33px 34px);
}
.board .kicker {
  font: 700 var(--step--1)/1 var(--f-body); font-stretch: 75%;
  letter-spacing: 0.32em; text-transform: uppercase; color: #7d1b35;
  margin: 0 0 10px;
}
/* the title follows the board's width, so big text shrinks a word instead of splitting it */
.board { container-type: inline-size; }
.board h1 {
  margin: 0;
  font: 400 clamp(1.25rem, 10.5cqi, 3rem)/1.05 var(--f-display);
  letter-spacing: 0.03em; text-transform: uppercase;
  text-wrap: balance; overflow-wrap: break-word;
}
.board .sub {
  margin: 12px 0 0;
  font: 600 var(--step-0)/1.35 var(--f-body); font-stretch: 80%;
  letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance;
}
.board .count {
  display: inline-flex; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: 3px;
  background: var(--board-ink); color: var(--bulb);
  font: 700 var(--step--1)/1.4 var(--f-mono); letter-spacing: 0.08em;
}

/* ---- sections ---------------------------------------------------------- */
.section { margin-top: 2.5rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 0.9rem; flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font: 400 var(--step-2)/1.15 var(--f-display); color: var(--bulb); letter-spacing: 0.02em; text-wrap: balance;
}
.section-head .aside { color: var(--dim); font-size: var(--step--1); }
.head-side { display: flex; align-items: center; gap: 10px; }
/* the Subscribe panel under the calendar heading */
.sub-panel {
  margin-bottom: 0.9rem; padding: 12px 14px; border-radius: var(--radius);
  background: var(--velvet-2); border: 1px solid var(--rule);
  display: grid; gap: 10px;
}
.sub-panel .label { margin: 0; }
.sub-panel .sub-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; }
.sub-panel .row .field { flex: 1 1 14rem; width: auto; min-height: 36px; font-size: var(--step--1); }
.label {
  font: 700 var(--step--1)/1.2 var(--f-body); font-stretch: 75%;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
h3.label, h4.label { margin: 0 0 6px; }
.hint { color: var(--dim); font-size: var(--step--1); margin: 0.4rem 0 0; overflow-wrap: anywhere; }
/* a question or heading inside a panel, in sentence case */
.prompt { margin: 0; font: 600 var(--step-0)/1.3 var(--f-body); color: var(--screen); text-wrap: balance; overflow-wrap: anywhere; }
.prompt .hint { font-weight: 400; margin-left: 4px; }
.field-label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: var(--step--1); color: var(--screen); }
.field-label span { font-weight: 400; color: var(--dim); }
.fineprint > summary { cursor: pointer; color: var(--bulb); font-size: var(--step--1); min-height: 44px; display: flex; align-items: center; width: max-content; }
.fineprint[open] { display: grid; gap: 10px; }
.empty {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 1.1rem; color: var(--dim); text-align: center; font-size: var(--step--1);
}

/* ---- buttons & inputs -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--curtain); color: #fff3e6; }
.btn-primary:hover { background: var(--curtain-hi); }
.btn-bulb { background: var(--bulb); color: var(--board-ink); }
.btn-bulb:hover { background: #ffd590; }
.btn-ghost { background: transparent; border-color: var(--rule-strong); color: var(--screen); }
.btn-ghost:hover { border-color: var(--screen); background: var(--velvet-2); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: var(--step--1); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn .ico { width: 1.1em; height: 1.1em; }
/* Count me in / You're in: the same control wherever a night shows. In, it's
   the good-news green, quiet; out, it's the main call (bulb). */
.btn-rsvp { min-width: 9.5rem; }
.btn-ghost.on { border-color: var(--go); color: var(--go); }
.btn-ghost.on:hover { background: rgba(147, 217, 173, 0.1); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.field {
  width: 100%; min-width: 0; min-height: 46px; padding: 0 14px;
  background: var(--velvet-3); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  caret-color: var(--bulb);
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--bulb); outline: none; box-shadow: 0 0 0 3px var(--bulb-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--velvet-2); border: 1px solid var(--rule-strong); color: var(--screen);
  cursor: pointer; font-size: var(--step--1);
}
.chip:hover { border-color: var(--bulb); }
/* the guest list: every name a 44px tag with its initial */
.guest-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; font-size: var(--step-0); }
.guest-chip .face { margin: 0; border: 0; }
.guest-chip.twin { border-color: var(--bulb); box-shadow: 0 0 0 3px var(--bulb-soft); }
.chip-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.chip-row > .label { flex: none; width: 3.2rem; margin: 0; }
.chip-row .chips { min-width: 0; }
.chip-row .sort-pick { width: auto; min-height: 40px; padding: 0 12px; font-size: var(--step--1); }

.msg { min-height: 1.2em; margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--dim); }
.msg.bad { color: var(--bad); }
.msg.good { color: var(--go); }

/* ---- guest pass (name gate) ------------------------------------------- */
.pass {
  margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radius);
  background: var(--velvet-2); border: 1px solid var(--rule);
  display: grid; gap: 0.8rem;
}
.pass h2 { margin: 0; font: 400 var(--step-1)/1.2 var(--f-display); color: var(--bulb); }
.pass form { display: flex; gap: 8px; flex-wrap: wrap; }
.pass form .field { flex: 1 1 12rem; }
.pass form .field-label { flex-basis: 100%; margin: 0; }
.pass:focus { outline: none; }
.pass { scroll-margin-top: 12px; }
.pass.flash { animation: flash 900ms ease 2; }
@keyframes flash { 50% { border-color: var(--bulb); box-shadow: 0 0 0 4px var(--bulb-soft); } }

.faces { display: inline-flex; }
.face {
  width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; flex: none;
  display: inline-grid; place-items: center;
  font: 700 11px/1 var(--f-body); letter-spacing: 0.02em;
  background: var(--velvet-3); color: var(--screen); border: 2px solid var(--velvet-2);
}
.face:first-child { margin-left: 0; }
.face.me { background: var(--bulb); color: var(--board-ink); }

.search { position: relative; margin-top: 12px; }
.search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.search-row .field { flex: 1 1 14rem; }
.results {
  margin-top: 8px; display: grid; gap: 4px; max-height: 26rem; overflow-y: auto;
  background: var(--velvet-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px;
}
.result {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  width: 100%; padding: 6px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 4px;
}
.result:hover, .result:focus-visible { background: var(--velvet-3); }
.result img, .result .noimg { width: 40px; height: 60px; object-fit: cover; border-radius: 2px; background: var(--velvet-3); }
.result .t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.result .y { color: var(--dim); font-size: var(--step--1); }
.result .add { font: 700 var(--step--1)/1 var(--f-body); color: var(--bulb); letter-spacing: 0.06em; text-transform: uppercase; }
.result.taken .add { color: var(--faint); }

.surprise {
  margin-top: 10px; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start;
  padding: 12px; border-radius: var(--radius); background: var(--velvet-2); border: 1px solid var(--bulb);
}
.surprise img { width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
.surprise h3 { margin: 0 0 4px; font-size: var(--step-1); }
.surprise p { margin: 0 0 10px; color: var(--dim); font-size: var(--step--1); }

/* ---- browse tabs (trending / new / for you) ---------------------------- */
.browse-tabs { margin-bottom: 10px; }
.poster-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap: 10px; }
.tile { min-width: 0; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--velvet-2); border: 1px solid var(--rule); }
.tile.taken { opacity: 0.55; }
.tile-poster { position: relative; aspect-ratio: 2 / 3; max-width: 100%; background: var(--velvet-3); }
.tile-poster img { width: 100%; height: 100%; object-fit: cover; }
.tile-poster .noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-family: var(--f-display); color: var(--faint); }
.tile-body { display: grid; gap: 4px; align-content: start; padding: 8px; min-width: 0; }
.tile-body b { font-size: var(--step--1); line-height: 1.25; overflow-wrap: anywhere; }
.tile-sub { font-size: 12px; color: var(--dim); }
.tile-why { font-size: 12px; color: var(--bulb); line-height: 1.3; }
.tile-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.tile-actions .mini { padding: 0 10px; }
.tile-actions .add { color: var(--bulb); border-color: var(--bulb); }
.tile-actions .add[disabled] { color: var(--faint); border-color: var(--rule); cursor: default; }

/* ---- paste a list: one row per line, what it matched and what becomes of it */
.paste-text { display: block; min-height: 8.5rem; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.paste > .row { margin-top: 10px; }
.paste-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.paste-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 8px; background: var(--velvet-2); border: 1px solid var(--rule); border-radius: var(--radius);
}
.paste-row.ready { border-color: var(--rule-strong); }
.paste-poster img, .paste-poster .noimg { width: 40px; height: 60px; object-fit: cover; border-radius: 2px; background: var(--velvet-3); }
.paste-poster .noimg { display: grid; place-items: center; font: 400 var(--step-1)/1 var(--f-display); color: var(--faint); }
.paste-main { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.paste-title { overflow-wrap: anywhere; }
.paste-title .y { color: var(--dim); font-size: var(--step--1); }
.paste-line { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.paste-state { font: 700 var(--step--1)/1.3 var(--f-body); color: var(--faint); }
.paste-row.ready .paste-state { color: var(--go); }
.paste-row.miss .paste-state { color: var(--bad); }
.paste-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: -6px; cursor: pointer; }
.paste-pick input, .check input { flex: none; width: 22px; height: 22px; }
.paste-miss { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.paste-miss .field { flex: 1 1 10rem; }
.paste-alts { width: 100%; display: grid; gap: 4px; padding: 4px; background: var(--velvet-3); border-radius: var(--radius); }
.paste-actions { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--step--1); }

/* ---- the ballot --------------------------------------------------------- */
.ballot { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: 14px; }
.card { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: var(--velvet-2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.card.lead { border-color: var(--bulb); box-shadow: 0 0 0 1px var(--bulb), 0 10px 30px -12px rgba(255, 199, 110, 0.45); }
.poster { position: relative; aspect-ratio: 2 / 3; max-width: 100%; background: var(--velvet-3); }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster .noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-family: var(--f-display); color: var(--faint); }
.ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; text-align: center;
  background: var(--bulb); color: var(--board-ink);
  font: 700 11px/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase;
}

/* Info first, then the row of actions pinned to the bottom, so thumbs line up
   across a row of cards whatever the titles and pitches run to. */
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.card-body .card-actions { margin-top: auto; }
.card h3 { margin: 0; font-size: var(--step-0); line-height: 1.25; overflow-wrap: anywhere; }
.meta { margin: 0; color: var(--dim); font-size: 12px; }
.by { margin: 0; color: var(--faint); font-size: 12px; }
/* two fixed rows: the thumb and Seen it, then the trailer, Stremio and the
   plot as one segmented strip, so a card at 360 doesn't grow a row per pill */
.card-actions { display: grid; gap: 6px; padding-top: 2px; }
.card-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px; }
.card-main > * { min-width: 0; justify-content: center; padding: 0 8px; white-space: nowrap; }
.card-more {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden;
}
.card-more > * {
  min-width: 0; min-height: 36px; display: grid; place-items: center; padding: 0 2px;
  background: transparent; border: 0; color: var(--dim); font: 600 11px/1 var(--f-body); letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.card-more > * + * { border-left: 1px solid var(--rule); }
.card-more > :hover { color: var(--screen); background: var(--velvet-3); }
.card-more > [aria-expanded="true"] { color: var(--board-ink); background: var(--screen); }
.voters-thumb { display: inline-grid; color: var(--faint); }
.voters-thumb svg { width: 13px; height: 13px; }
/* booked for a night: the oxblood ribbon, the date */
.ribbon.booked { background: var(--curtain); color: #fff3e6; }
.plot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim); overflow-wrap: anywhere; }
.voters { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.voters .faces .face { border-color: var(--velvet-2); }
.vote {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; cursor: pointer;
  background: var(--velvet-3); border: 1px solid var(--rule-strong); color: var(--screen); font-weight: 700;
}
.vote svg { width: 16px; height: 16px; }
.vote.on { background: var(--bulb); border-color: var(--bulb); color: var(--board-ink); }
.vote[disabled] { cursor: default; opacity: 0.8; }
.vote .n { font-variant-numeric: tabular-nums; }
.vote.bump .n { animation: bump 360ms ease; }
@keyframes bump { 40% { transform: scale(1.45); } }
.mini {
  min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  background: transparent; border: 1px solid var(--rule-strong); color: var(--dim); font-size: 12px; cursor: pointer; text-decoration: none;
}
.mini:hover { color: var(--screen); border-color: var(--screen); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--rule-strong);
  font: 700 11px/1.4 var(--f-body); font-stretch: 80%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim);
}
.tag-chip[data-tag="Unseen"] { border-color: var(--bulb); color: var(--bulb); }
.tag-chip[data-tag="Rewatch"] { border-color: var(--go); color: var(--go); }
.tag-chip[data-tag="Recent favorite"] { background: var(--bulb); border-color: var(--bulb); color: var(--board-ink); }
.tag-chip[data-tag="Foreign"] { border-color: var(--curtain-hi); color: #f0a9b8; }
.shelf-filter { margin-bottom: 14px; }
/* A chosen sort, filter or tab is printed on ticket stock, not lit: a default
   isn't yours, and amber stays for what is. */
.chip.on { background: var(--ticket); border-color: var(--ticket); color: var(--ticket-ink); font-weight: 600; }
.chip .n { font-family: var(--f-mono); font-size: 11px; opacity: 0.75; margin-left: 2px; }

/* ---- the ticket -------------------------------------------------------- */
.ticket {
  position: relative; display: grid; grid-template-columns: 1fr 74px;
  background: var(--ticket); color: var(--ticket-ink); border-radius: 6px;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
  /* punched notches */
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 74px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 74px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - 74px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 74px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket-main { padding: 18px 18px 16px; min-width: 0; container-type: inline-size; }
.admit { margin: 0; font: 700 11px/1 var(--f-body); letter-spacing: 0.38em; color: var(--admit-red); }
.ticket h3 { margin: 8px 0 6px; font: 400 clamp(1.25rem, 10cqi, 2rem)/1.05 var(--f-display); text-transform: uppercase; overflow-wrap: break-word; }
.ticket dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--step--1); }
.ticket dt { font: 700 11px/1.8 var(--f-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ticket-label); }
.ticket dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ticket-stub {
  border-left: 2px dashed rgba(44, 23, 18, 0.35);
  display: grid; place-items: center;
}
.ticket-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 13px/1 var(--f-mono); letter-spacing: 0.2em; }
/* Big text (or a very narrow phone): each label over its value, and the stub
   becomes a strip along the bottom behind a horizontal perforation. */
@media (max-width: 340px) {
  .ticket { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .ticket dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ticket dt { margin-top: 6px; line-height: 1.4; }
  .ticket-stub { border-left: 0; border-top: 2px dashed rgba(44, 23, 18, 0.35); padding: 8px 18px; place-items: center start; }
  .ticket-stub span { writing-mode: horizontal-tb; transform: none; }
}
.ticket-actions { margin-top: 12px; }
/* after the reveal, the ticket prints in at the top of the screen */
.ticket { scroll-margin-top: 16px; }
#nextSec { scroll-margin-top: 12px; }
/* the ticket's art: the poster once you've seen it, a card back while it's face down */
.ticket-main dl { clear: both; } /* the details run the full width under the art */
.ticket-art { float: right; width: 56px; aspect-ratio: 2 / 3; margin: 0 0 8px 12px; border-radius: 3px; overflow: hidden; box-shadow: 0 6px 14px rgba(10, 4, 7, 0.35); }
.ticket-art img, .ticket-art .noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-back {
  display: grid; place-items: center; padding: 0; border: 2px solid var(--bulb); background: var(--curtain); color: var(--bulb);
  font: 400 2rem/1 var(--f-display); box-shadow: inset 0 0 0 3px var(--curtain), inset 0 0 0 4px rgba(255, 199, 110, 0.5), 0 6px 14px rgba(10, 4, 7, 0.35);
}
button.ticket-back { width: 84px; min-height: 0; cursor: pointer; grid-template-rows: 1fr auto; padding: 6px 4px 6px; }
.ticket-back .tap { font: 700 11px/1.15 var(--f-body); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.host-card.night-face { display: flow-root; } /* not a grid: the art floats beside the heading */
.night-face > :is(.hint, .row) { margin-top: 10px; }
.night-face h3 { font: 400 var(--step-1)/1.15 var(--f-display); color: var(--bulb); } /* the night's title in marquee letters, like the ticket's */
/* it prints: the ticket comes out of the slot top first, and settles */
.ticket.printed { animation: printed 0.75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes printed {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); }
  65% { clip-path: inset(0 0 0 0); transform: translateY(2px); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
.links-row { margin-top: 8px; }

/* ---- snacks, reviews, past --------------------------------------------- */
.snacks { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.snack {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius); background: var(--velvet-2);
  border-left: 4px solid; border-image: repeating-linear-gradient(180deg, var(--stripe-cream) 0 6px, var(--curtain) 6px 12px) 4;
}
.snack b { font-weight: 600; }
.snack span { color: var(--dim); font-size: var(--step--1); }
.snack-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.snack-form .field { flex: 1 1 12rem; }

.stars { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.star { display: inline-grid; place-items: center; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--faint); }
.star svg { width: 32px; height: 32px; }
.star.on { color: var(--bulb); }
.review-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--velvet-2); border: 1px solid var(--rule); }
/* reviews read as a list inside their box, not boxes in a box */
.reviews { display: grid; gap: 0; }
.reviews:empty { display: none; }
.review { padding: 8px 0; border-top: 1px solid var(--rule); }
.review .who { display: flex; justify-content: space-between; gap: 8px; font-size: var(--step--1); color: var(--dim); }
.review .who .s { color: var(--bulb); letter-spacing: 0.1em; }
.review p { margin: 4px 0 0; }

.past { display: grid; gap: 8px; }
.past-label { margin: 18px 0 8px; }
.past-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 6px; border-radius: var(--radius); background: var(--velvet-2); }
.past-row img, .past-row .noimg { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; background: var(--velvet-3); }
.past-row .t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.past-row .d { color: var(--dim); font-size: 12px; }
.past-row .s { color: var(--bulb); font: 700 var(--step--1)/1 var(--f-mono); white-space: nowrap; }

.footer { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--faint); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer a { color: var(--dim); }
.footer .linkish, .footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- top bar ---------------------------------------------------------- */
.topbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---- since you last looked ----------------------------------------------- */
.news {
  margin-top: 1.25rem; padding: 0.6rem 1rem; border-radius: var(--radius);
  background: var(--velvet-2); border: 1px solid var(--bulb);
}
.news-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.news-bar p { margin: 0; color: var(--dim); }
.news-bar b { color: var(--screen); font-weight: 600; }
.news-poster, .tour-demo .noimg { width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; background: var(--velvet-3); }
.tour-demo .noimg { display: grid; place-items: center; padding: 4px; text-align: center; font: 400 0.7rem/1.1 var(--f-display); color: var(--faint); overflow: hidden; }
.tour-demo .vetoes { margin: 0; }
.new-chip {
  position: absolute; right: 6px; top: 6px; padding: 4px 7px; border-radius: 3px;
  background: var(--go); color: var(--board-ink); font: 700 11px/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase;
}
/* the last news card's list of everything else, like a program's back page */
.program-list { margin: 10px 0 0; padding: 10px 0 0 1.1rem; border-top: 1px dashed var(--rule); display: grid; gap: 4px; font-size: var(--step--1); color: var(--screen); overflow-wrap: anywhere; }
/* a new movie's thumbs-up, right on its news card */
.news-votes { margin-top: 10px; }
.news-votes .vote { max-width: 100%; font-size: var(--step--1); }
.news-votes .vote span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-new { font: 700 11px/1 var(--f-mono); color: var(--go); margin-left: 2px; }
.vote.on .vote-new { color: var(--board-ink); }

/* ---- the availability calendar --------------------------------------------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-wrap { container: cal / inline-size; }
.cal-head { text-align: center; font: 700 11px/1.6 var(--f-body); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.cal-head.wknd { color: var(--screen); } /* Fri, Sat, Sun: the movie nights */
.cal-head .short { display: none; }
.cal-range { font: 700 12px/1 var(--f-mono); letter-spacing: 0.04em; }
/* the program's weeks: a quiet label over each row */
.cal-week { grid-column: 1 / -1; margin: 8px 0 -1px; font: 700 11px/1.2 var(--f-body); font-stretch: 80%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
/* the evenings already gone this week: faded, dashed, not for tapping */
.day-past {
  position: relative; min-width: 0; aspect-ratio: 1 / 1.3; display: grid; grid-template-rows: 12px 1fr auto; justify-items: center; align-items: center;
  padding: 4px 2px; border-radius: var(--radius); border: 1px dashed var(--rule); color: var(--faint); opacity: 0.55; overflow: hidden;
}
.day {
  position: relative; min-width: 0; aspect-ratio: 1 / 1.3; max-width: 100%;
  display: grid; grid-template-rows: 12px 1fr auto; justify-items: center; align-items: center;
  padding: 4px 2px; border-radius: var(--radius); cursor: pointer; overflow: hidden;
  background: var(--velvet-2); border: 1px solid var(--rule-strong); color: var(--screen);
}
.day:hover { border-color: var(--screen); }
.d-dow { font: 700 11px/1 var(--f-body); font-stretch: 80%; letter-spacing: 0.08em; color: var(--faint); min-height: 11px; }
/* the date follows the cell's width, so 200% zoom shrinks it rather than spilling it */
.d-num { font: 400 clamp(0.75rem, 4.6vw, 1.45rem)/1 var(--f-display); }
.d-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; min-height: 15px; max-width: 100%; font: 700 11px/1 var(--f-mono); color: var(--dim); }
/* a night: its start on a dark tag, the way a program prints it */
.d-time { padding: 2px 4px; border-radius: 3px; background: var(--velvet); color: var(--bulb); font: 700 11px/1 var(--f-mono); white-space: nowrap; }
.d-host { display: none; color: var(--bulb); font-size: 13px; }
/* today: its date in a ring of screen light */
.day.today .d-num { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--screen); color: var(--velvet); font-size: clamp(0.75rem, 3.6vw, 1rem); }
/* the best open night: a lit star in the corner */
.d-star { position: absolute; top: 3px; right: 4px; color: var(--bulb); font-size: 12px; line-height: 1; }
.dd-best .star { color: var(--bulb); }
.day.on { background: rgba(147, 217, 173, 0.16); border-color: var(--go); }
.day.on .d-meta { color: var(--go); }
/* Too narrow for every mark (big text on a phone): each day keeps its date,
   a night keeps its house as well as its gold ring (more than color tells
   them apart), and the key drops the count the cells no longer show. */
@container cal (max-width: 280px) {
  .day { aspect-ratio: auto; min-height: 44px; grid-template-rows: 1fr auto; padding: 4px 0; }
  .d-dow, .d-time, .day:not(.lead) .d-meta { display: none; }
  .d-star, .day.fresh::after { display: none; } /* no room beside the date; the day panel says it */
  .day.lead .d-host { display: inline-flex; }
  .d-meta { min-height: 0; }
  .day-past { aspect-ratio: auto; min-height: 44px; grid-template-rows: 1fr; }
  .day-past .d-meta { display: none; }
  .cal-head .long { display: none; }
  .cal-head .short { display: inline; }
  .day.today .d-num { width: auto; height: auto; padding: 2px 3px; border-radius: 999px; } /* a slim pill: the ring won't fit */
  .d-num { font-size: clamp(0.75rem, 4.6vw, 1rem); }
  .cal-key .k-count-row { display: none; }
}
.day.lead { box-shadow: 0 0 0 2px var(--bulb); }
/* the day showing in the window below: lifted onto the projector light */
.day.sel { outline: 2px solid var(--screen); outline-offset: 1px; }
.day.fresh::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--go); }
/* the box office window for the day you picked: edged like the day itself */
.day-detail {
  margin-top: 12px; padding: 14px; border-radius: var(--radius); background: var(--velvet-2);
  border: 1px solid var(--rule-strong); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
}
/* the arrows drop under the date when there isn't room beside it (big text) */
.dd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dd-head h3 { flex: 1 1 8rem; min-width: 0; margin: 0; font: 400 var(--step-1)/1.2 var(--f-display); color: var(--screen); text-wrap: balance; overflow-wrap: anywhere; }
.dd-steps { flex: none; display: flex; gap: 6px; }
.dd-step {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); cursor: pointer;
  background: transparent; border: 1px solid var(--rule-strong); color: var(--screen); font: 700 1.25rem/1 var(--f-mono);
}
.dd-step:hover { border-color: var(--screen); }
.dd-step:disabled { opacity: 0.35; cursor: default; border-color: var(--rule); }
.dd-line { margin: 0; font-size: var(--step--1); color: var(--dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-line b { color: var(--screen); }
.dd-host { padding-top: 12px; border-top: 1px dashed var(--rule); display: grid; gap: 8px; }
.dd-host .hint { margin: 0; }

/* ---- how it works (tour) ------------------------------------------------- */
/* On a phone the cards rise from the bottom like a sheet: each is only as
   tall as it needs, the buttons sit at the same spot under your thumb from
   card to card, and the marquee stays in view above. */
.tour-overlay {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: end center;
  padding: 16px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 4, 7, 0.72);
}
.tour-card {
  width: min(26rem, 100%); min-width: 0; max-height: calc(100dvh - 72px); overflow-y: auto; overflow-wrap: anywhere;
  display: flex; flex-direction: column;
  padding: 16px 18px 18px; border-radius: 10px; background: var(--velvet-2); border: 1px solid var(--bulb);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
@media (min-width: 640px) { .tour-overlay { place-items: center; padding: 16px; } }
.tour-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.tour-top .label { min-width: 0; letter-spacing: 0.1em; }
.tour-top .btn { flex: none; white-space: nowrap; }
.tour-card h2 { margin: 14px 0 6px; font: 400 var(--step-2)/1.15 var(--f-display); color: var(--bulb); text-wrap: balance; }
/* news headlines are sentences: the body face, with a movie's name in marquee letters */
.tour-card.news h2 { font: 600 var(--step-1)/1.3 var(--f-body); color: var(--screen); }
.news-name { font: 400 1.05em/1 var(--f-display); color: var(--bulb); }
/* names on a news card: inert tags with a face, not buttons */
.name-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--velvet-3); color: var(--screen); font-size: var(--step--1); }
.name-tag .faces .face { margin-left: 0; }
.tour-card > p { margin: 0; color: var(--dim); }
.tour-foot {
  /* -18px, not 0: a sticky box stops at the card's padding edge, so 0 would
     ride 18px up over the end of the card's words */
  position: sticky; bottom: -18px; margin: auto -18px -18px; padding: 12px 18px 18px;
  background: var(--velvet-2); border-top: 1px dashed var(--rule);
}
.tour-demo { padding: 12px; border-radius: var(--radius); background: var(--velvet); border: 1px dashed var(--rule); display: grid; gap: 8px; pointer-events: none; }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.tour-dots span.on { background: var(--bulb); }
.tour-nav { justify-content: flex-end; }
.tour-mini { padding: 10px; }
.tour-mini::before, .tour-mini::after { animation: none; }
.tour-mini::after { opacity: 0.4; }
.tour-mini .board { padding: 12px 10px; }
.tour-mini .board h1 { font-size: var(--step-2); }
.tour-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tour-field { display: flex; align-items: center; flex: 1 1 8rem; }
.tour-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tour-cal .d-num { font-size: var(--step-0); }
/* How it works shows samples, stamped so, with no real dates or names */
.tour-slot { display: contents; }
.tour-demo.sample { position: relative; margin-top: 8px; }
.tour-demo.sample::before {
  content: 'Sample'; position: absolute; top: -9px; left: 10px; padding: 2px 7px; border-radius: 3px;
  background: var(--velvet-2); border: 1px solid var(--rule-strong); color: var(--dim);
  font: 700 11px/1.2 var(--f-body); font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase;
}
.tour-window { margin-top: 0; padding: 10px 12px; gap: 6px; }
.tour-window .btn { justify-self: start; }
.tour-window .dd-head h3 { font-size: var(--step-0); }
/* big text on a phone: the words carry the card; the example would crowd them */
@media (max-width: 300px) {
  .tour-demo { display: none; }
  /* the foot is one row: the dots go, Back and Next sit side by side */
  .tour-dots { display: none; }
  .tour-foot { padding-top: 8px; }
  .tour-nav { flex-wrap: nowrap; justify-content: space-between; }
  .tour-nav .btn { min-width: 0; flex: 1 1 0; }
}

/* ---- up next ------------------------------------------------------------ */
.night-card { gap: 14px; }
.nc-head h3 { margin: 0; font: 400 var(--step-1)/1.2 var(--f-display); color: var(--bulb); text-wrap: balance; }
.nc-head .hint { margin: 4px 0 0; }
.rsvp-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.night-card > .hint { margin: 0; }
/* If it locked now: a mini lobby card, the same ribbon as on the shelf */
.pick-now { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: var(--radius); background: var(--velvet-3); }
.pick-poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--velvet); }
.pick-poster img { width: 100%; height: 100%; object-fit: cover; }
.pick-poster .noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; text-align: center; font: 400 0.7rem/1.1 var(--f-display); color: var(--faint); }
.pick-poster .ribbon { padding: 4px 2px; letter-spacing: 0.06em; }
.pick-body { display: grid; gap: 4px; min-width: 0; }
.pick-now .label, .pick-now .hint { margin: 0; }
.pick-veto { margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.veto-note { font: 400 var(--step--1)/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--dim); }
h4 .veto-note { margin-left: 6px; }
.reveal-again { margin-top: 12px; }
.pick-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--step-1); overflow-wrap: anywhere; }
.pick-line b { font-weight: 700; }
.pick-line .mini.veto { margin-left: 0; }
/* the hosting slip: ticket stock, confirmed before the night goes up */
.host-slip {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--ticket); color: var(--ticket-ink); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
}
.host-slip .admit { text-transform: uppercase; letter-spacing: 0.3em; }
.host-slip h4 { margin: 0; font: 400 var(--step-1)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.host-slip .slip-when { margin: 0; font-weight: 600; }
.host-slip .slip-crowd { margin: 0; font-size: var(--step--1); }
.host-slip .slip-note { margin: 0; font-size: var(--step--1); color: var(--ticket-label); }
.host-slip .row { margin-top: 4px; }
.host-slip .btn-ghost { color: var(--ticket-ink); border-color: var(--ticket-label); }
.host-slip .btn-ghost:hover { background: rgba(44, 23, 18, 0.06); border-color: var(--ticket-ink); }
.host-slip :focus-visible { outline-color: var(--curtain); }
.also-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.also-rate .linkish { min-height: 44px; }
.leaders { margin: 6px 0 0; padding-left: 1.3rem; display: grid; gap: 6px; }
.leaders li { overflow-wrap: anywhere; }
.leaders .v { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-mono); color: var(--bulb); font-size: var(--step--1); margin-left: 6px; }
.leaders .v svg { width: 13px; height: 13px; }
/* tonight's ballot: a poster, the title with its thumbs, who has voted, and the buttons */
.ballot { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ballot-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border-radius: var(--radius); background: var(--velvet-3); }
.ballot-row.mine { box-shadow: inset 0 0 0 1px var(--go); }
.ballot-poster { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--velvet); }
.ballot-poster img { width: 100%; height: 100%; object-fit: cover; }
.ballot-poster .noimg { height: 100%; display: grid; place-items: center; padding: 2px; text-align: center; font: 400 0.6rem/1.1 var(--f-display); color: var(--faint); overflow: hidden; }
.ballot-body { display: grid; gap: 4px; min-width: 0; }
.ballot-body p { margin: 0; }
.ballot-title { overflow-wrap: anywhere; }
.ballot-title .v { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-mono); color: var(--bulb); font-size: var(--step--1); margin-left: 6px; }
.ballot-title .v svg { width: 13px; height: 13px; }
.ballot-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ballot-tag {
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--rule-strong);
  font: 700 11px/1.4 var(--f-body); font-stretch: 80%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere;
}
.ballot-votes { color: var(--dim); font-size: var(--step--1); overflow-wrap: anywhere; }
.ballot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ballot-actions .mini.veto { margin-left: 0; }
.tour-ballot { margin: 0; }
.tour-ballot .ballot-row { grid-template-columns: minmax(0, 1fr); }
/* Add your pick: a search over the shelf, under the ballot */
.writein { margin-top: 10px; display: grid; gap: 8px; }
.writein .hint, .writein .row { margin: 0; }
.writein-panel { display: grid; gap: 6px; padding: 10px; border-radius: var(--radius); background: var(--velvet-3); }
.writein-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.writein-list .hint { margin: 0; }
.host-tools { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.theme-line { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-line .label { margin: 0; }
.theme-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bulb); color: var(--board-ink);
  font: 700 11px/1.5 var(--f-body); font-stretch: 80%; letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere;
}
.mini.veto { margin-left: 6px; }
.vetoes { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.vetoes li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.vetoes s { color: var(--faint); text-decoration-color: var(--bad); }
.vetoes .hint { margin: 0; }
.snack-box { margin-top: 16px; display: grid; gap: 8px; }
.snack-box .snacks, .snack-box .label, .snack-box .hint { margin: 0; }
.mini.on { background: var(--go); border-color: var(--go); color: var(--board-ink); }

/* ---- the shelf ----------------------------------------------------------- */
.add-box { margin-bottom: 14px; }
.add-box > summary { list-style: none; width: max-content; }
.add-box > summary::-webkit-details-marker { display: none; }
.add-box[open] > summary { margin-bottom: 10px; }
.add-box #pitch { margin-top: 0; }
.pitch { margin: 0; font-size: 12px; color: var(--screen); font-style: italic; }
.seen-line { margin: 0; font-size: 12px; color: var(--faint); }

/* ---- stats ----------------------------------------------------------------- */
/* The long view, spelled out on a letter board: one grooved line per number,
   unlit (the marquee is the only thing that glows). */
.stat-board {
  margin: 0; padding: 12px 14px; list-style: none; text-align: center;
  background: var(--board); color: var(--board-ink); border-radius: 4px;
  font: 400 1.125rem/34px var(--f-display); letter-spacing: 0.06em; text-transform: uppercase;
}
/* letter-board grooves between the lines, never under the last one */
.stat-board li { overflow-wrap: anywhere; }
.stat-board li + li { border-top: 1px solid rgba(27, 15, 12, 0.08); }
.stat-board b { font-weight: 400; color: var(--curtain); font-variant-numeric: tabular-nums; }
.stat-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 12px; }
.stat-card {
  min-width: 0; display: grid; gap: 10px; align-content: start; padding: 12px 14px;
  border-radius: var(--radius); background: var(--velvet-2); border: 1px solid var(--rule);
}
.stat-card .label { margin: 0; }
.stat-card .hint, .stat-card .leaders { margin: 0; }
.stat-card .leaders li { overflow-wrap: anywhere; }
.stat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.taste { display: grid; gap: 5px; overflow-wrap: anywhere; }
.taste .v { font-family: var(--f-mono); color: var(--bulb); font-size: var(--step--1); margin-left: 4px; }
.taste .meter { height: 6px; border-radius: 3px; background: var(--velvet-3); overflow: hidden; }
.taste .meter::before { content: ''; display: block; height: 100%; width: var(--p); background: var(--bulb); }
.taste .hint { font-size: 12px; }

/* ---- long text never widens a card or the page ---------------------------- */
.card { grid-template-columns: minmax(0, 1fr); }
.pitch, .by, .seen-line, .meta, .review p, .snack b, .dd-line, .tile-why { overflow-wrap: anywhere; }
.review .who > span:first-child, .past-row .d, .pick-opt > span { min-width: 0; overflow-wrap: anywhere; }
.snack > div { min-width: 0; }
.day.sel:focus-visible, .day:focus-visible { outline: 3px solid var(--bulb); outline-offset: 2px; }

/* ---- toast ------------------------------------------------------------- */
/* Good news drops in at the top of the screen, never under the thumb where the
   next button is, and taps go through it. A problem (an error, "Not sent yet")
   sits at the bottom until it's tapped away. Left and right both set, so a long
   message wraps across the screen, not half of it. */
.toast {
  position: fixed; left: 16px; right: 16px; margin-inline: auto; width: fit-content;
  top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateY(-20px);
  max-width: 30rem; padding: 12px 16px; border-radius: var(--radius);
  background: var(--board); color: var(--board-ink); font-weight: 600; font-size: var(--step--1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.bad { background: var(--bad); top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(20px); }
.toast.bad.show { transform: translateY(0); } /* the next tap anywhere puts it away, and still lands */
/* over a walkthrough or news sheet a problem goes to the top too, and lets taps
   through, so it never covers the sheet's buttons */
body:has(.tour-overlay) .toast.bad { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translateY(-20px); }
body:has(.tour-overlay) .toast.bad.show { pointer-events: none; transform: translateY(0); }
/* nothing talks over the reel or the reveal */
body:has(.reel-overlay, .reveal-overlay) .toast { visibility: hidden; }

/* ---- spin the reel ----------------------------------------------------- */
/* Both event scrims are nearly opaque: the house goes dark for the moment, and
   nothing behind gives the movie away. */
.reel-overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 4, 7, 0.97); overflow-y: auto; overscroll-behavior: contain;
}
.reel-box { width: min(19rem, 100%); text-align: center; }
.reel-box h2 { margin: 0 0 14px; font: 400 var(--step-2)/1.1 var(--f-display); color: var(--bulb); }
.reel-window {
  position: relative; height: 18rem; overflow: hidden; border-radius: 8px;
  background: #050203; border: 3px solid var(--bulb);
  box-shadow: 0 0 40px rgba(255, 199, 110, 0.35);
}
.reel-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 2, 3, 0.9), transparent 25%, transparent 75%, rgba(5, 2, 3, 0.9)); }
.reel-track { display: grid; }
.reel-item { height: 18rem; display: flex; align-items: center; justify-content: center; padding: 12px; }
.reel-item img { height: 100%; max-height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.reel-item .noimg { font-family: var(--f-display); color: var(--screen); font-size: var(--step-2); }
/* it lands like the reveal: the title in marquee letters, the window lit */
.reel-result { margin: 14px 0 0; min-height: 1.2em; font: 400 var(--step-3)/1.1 var(--f-display); color: var(--bulb); text-wrap: balance; overflow-wrap: break-word; }
.reel-window.landed { box-shadow: 0 0 40px rgba(255, 199, 110, 0.35), 0 0 0 3px var(--bulb); }

/* ---- the reveal ------------------------------------------------------------ */
/* The house lights go down (the page fades to black over most of a second),
   then the card comes up out of the dark. */
.reveal-overlay {
  position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 16px;
  background: #0a0407; overflow-y: auto; overscroll-behavior: contain;
  animation: lights-down 0.9s ease-in both;
}
.reveal-overlay > .reveal-box { position: relative; z-index: 1; animation: comes-up 0.6s ease-out 0.55s both; }
/* The tap: the house narrows to a spotlight on the card, and the card comes
   forward as it turns, so the poster lands bigger than the back it replaced. */
.reveal-overlay::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease-out;
  background: radial-gradient(ellipse 62% 46% at 50% 40%, rgba(0, 0, 0, 0) 0 42%, rgba(0, 0, 0, 0.72) 100%);
}
.reveal-overlay.turning::before { opacity: 1; }
.reveal-stage { transition: transform 0.9s cubic-bezier(.3, .7, .2, 1); }
.reveal-overlay.turning .reveal-stage { transform: scale(1.08); }
/* Leaving: the house lights come up over a moment instead of a cut. */
:is(.reveal-overlay, .reel-overlay).closing { animation: lights-up 0.38s ease-out forwards; pointer-events: none; }
@keyframes lights-up { to { opacity: 0; } }
/* the curtain opens onto it: the house is already dark */
.reveal-overlay.at-once, .reveal-overlay.at-once > .reveal-box { animation: none; }
/* It lands as a sentence: the title finishes "The movie is…" in marquee letters,
   then when and where, who's coming and who wanted it arrive one after another,
   then the buttons (about a second in all). The reel lands the same way. */
:is(.reveal-overlay, .reel-overlay).landed :is(.reveal-title, .reel-result) { animation: title-lands 0.55s cubic-bezier(.2, .8, .2, 1) both; }
:is(.reveal-overlay, .reel-overlay).landed :is(.reveal-when, .reveal-who, .reveal-why, .reveal-actions) { animation: arrives 0.35s ease-out both; }
:is(.reveal-overlay, .reel-overlay).landed .reveal-when { animation-delay: 0.25s; }
:is(.reveal-overlay, .reel-overlay).landed .reveal-who { animation-delay: 0.5s; }
:is(.reveal-overlay, .reel-overlay).landed .reveal-why { animation-delay: 0.75s; }
:is(.reveal-overlay, .reel-overlay).landed .reveal-actions { animation-delay: 1s; }
@keyframes title-lands { from { opacity: 0; letter-spacing: 0.18em; } }
@keyframes arrives { from { opacity: 0; transform: translateY(6px); } }
@keyframes lights-down { from { background-color: rgba(10, 4, 7, 0); } to { background-color: #0a0407; } }
@keyframes comes-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal-who { margin: 0 0 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: var(--step--1); color: var(--dim); text-wrap: balance; }
/* Every line keeps its place from the start, so nothing jumps as they arrive. */
.reveal-who { min-height: 24px; }
:is(.reveal-overlay, .reel-overlay) .reveal-actions[hidden] { display: flex !important; visibility: hidden; }
.reveal-overlay .reveal-hint[hidden] { display: block !important; visibility: hidden; }
.reveal-who .faces { padding-left: 6px; }
.reveal-why { margin: 0 0 14px; min-height: 1.4em; font-size: var(--step--1); color: var(--screen); text-wrap: balance; }
.reveal-why::first-letter { text-transform: uppercase; }
.reveal-box { width: min(19rem, 100%); text-align: center; }
.reveal-box h2 { margin: 0 0 14px; font: 400 var(--step-2)/1.1 var(--f-display); color: var(--bulb); }
/* The card waits in a ring of bulbs, chasing like the marquee's until you turn it. */
.reveal-stage { position: relative; isolation: isolate; width: fit-content; margin: 0 auto; padding: 16px; border-radius: 10px; perspective: 1100px; }
.reveal-stage::before, .reveal-stage::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px; z-index: -1;
  --b: radial-gradient(circle, #fff3d1 0 2.2px, var(--bulb) 3px, rgba(255, 199, 110, 0) 6px);
  background:
    var(--b) 0 0 / 18px 12px repeat-x,
    var(--b) 0 100% / 18px 12px repeat-x,
    var(--b) 0 0 / 12px 18px repeat-y,
    var(--b) 100% 0 / 12px 18px repeat-y;
}
.reveal-stage::after { background-position: 9px 0, 9px 100%, 0 9px, 100% 9px; }
.reveal-stage.waiting::before, .reveal-stage.waiting::after { animation: chase 0.9s steps(1) infinite; }
.reveal-stage.waiting::after { animation-delay: -0.45s; }
/* turned: the bulbs flash three times and hold lit, with the reel's glow */
.reveal-stage.landed { box-shadow: 0 0 40px rgba(255, 199, 110, 0.35); }
.reveal-stage.landed::before, .reveal-stage.landed::after { animation: blaze 0.24s steps(1) 4; }
@keyframes blaze { 0% { opacity: 1; } 50% { opacity: 0.15; } }
.reveal-card {
  position: relative; display: block; width: min(13rem, 62vw); aspect-ratio: 2 / 3; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 8px;
  transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, .7, .2, 1);
}
/* the keyboard's ring sits on the bulb frame, so it doesn't turn with the card */
.reveal-card:focus-visible { outline: none; }
.reveal-stage:has(.reveal-card:focus-visible) { outline: 3px solid var(--screen); outline-offset: 4px; }
/* after a tap, focus a script moves shows no ring (ui.js tracks the input) */
html[data-input="pointer"] :focus-visible, html[data-input="pointer"] .reveal-stage:has(.reveal-card:focus-visible) { outline: none; }
.reveal-hint { margin: 14px 0 0; font: 700 0.8125rem/1.3 var(--f-body); font-stretch: 75%; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bulb); }
.reveal-actions { justify-content: center; }
.reveal-card.flipped { transform: rotateY(180deg); }
.reveal-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 8px; border: 3px solid var(--bulb);
  backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
/* the card back is a printed ticket back: the house on top, the question, the night at the foot */
.reveal-cover {
  display: grid; grid-template-rows: auto 1fr auto; place-items: center; padding: 16px 10px 14px;
  background: repeating-radial-gradient(circle at 50% 46%, rgba(255, 199, 110, 0.07) 0 1.5px, transparent 1.5px 9px), var(--curtain);
  box-shadow: inset 0 0 0 6px var(--curtain), inset 0 0 0 7px rgba(255, 199, 110, 0.55);
  color: var(--bulb); font: 400 4.5rem/1 var(--f-display);
}
.rc-house { font: 700 11px/1 var(--f-body); font-stretch: 75%; letter-spacing: 0.32em; text-transform: uppercase; }
.rc-night { font: 700 12px/1.35 var(--f-body); font-stretch: 75%; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.reveal-poster { display: block; } /* a span inside the card's button; the cover stays a grid */
.reveal-poster { transform: rotateY(180deg); background: #050203; }
.reveal-poster img, .reveal-poster .noimg { width: 100%; height: 100%; object-fit: cover; }
.reveal-poster .noimg { display: grid; place-items: center; padding: 12px; font-family: var(--f-display); color: var(--screen); }
.reveal-title { margin: 16px 0 0; min-height: 1.4em; font: 400 var(--step-3)/1.1 var(--f-display); color: var(--bulb); text-wrap: balance; overflow-wrap: break-word; }
.reveal-when { margin: 4px 0 14px; min-height: 1.5em; color: var(--dim); }

/* a landscape phone is about 390px tall: shrink the posters so the OK button fits */
@media (max-height: 520px) {
  .reel-overlay, .reveal-overlay { padding: 8px; }
  .reel-box h2, .reveal-box h2 { margin-bottom: 8px; font-size: var(--step-1); }
  .reel-window { height: 11rem; }
  .reel-result { margin-top: 8px; font-size: var(--step-1); }
  .reel-box, .reveal-box { width: min(30rem, 100%); }
  .reveal-card { width: min(6.5rem, 62vw); }
  .reveal-stage { padding: 12px; }
  .reveal-hint { margin-top: 8px; }
  .reveal-cover { font-size: 3rem; }
  .reveal-title { margin-top: 6px; font-size: var(--step-1); }
  .reveal-when { margin-bottom: 2px; }
  .reveal-why { margin-bottom: 6px; }
  .reveal-who .faces { display: none; } /* the names say it; the faces cost a line */
  .reveal-overlay .reveal-hint[hidden] { display: none !important; } /* no room to hold its place */
  .reveal-overlay.turning .reveal-stage { transform: none; } /* no room to come forward */
}

/* the curtain's oxblood pleats (the house curtain and the screen's) */
:root {
  --pleats:
    linear-gradient(180deg, rgba(10, 4, 7, 0.35), transparent 22%, transparent 70%, rgba(10, 4, 7, 0.6)),
    repeating-linear-gradient(90deg, #3e0a19 0, var(--curtain) 1.6rem, var(--curtain-hi) 2.3rem, var(--curtain) 3rem, #3e0a19 4.4rem);
}

/* ---- the house curtain ---------------------------------------------------
   Every load opens on the curtain: two oxblood panels, pleated in light and
   shadow under a fringed valance. It stays closed while the page loads (app.js
   adds .open once the page knows what's next, at most 2.5 s in), then the
   panels gather to the sides (their pleats bunch as they go) and the valance
   lifts away. Closed, it takes the taps; parting, it lets them through. Without
   app.js it opens by itself at 2.5 s. With reduced motion there's no curtain. */
.curtain {
  position: fixed; inset: 0; z-index: 90; display: flex; overflow: hidden;
  animation: curtain-gone 0s linear 5.4s forwards;
}
.curtain.open { pointer-events: none; animation-name: curtain-gone-open; animation-delay: 1.3s; }
.curtain.parting { pointer-events: none; } /* already parting on its own: let it finish */
.curtain-l, .curtain-r {
  flex: 1 1 50%; height: 100%; will-change: transform, opacity, filter;
  background: var(--pleats);
  /* the house lights go down while the page loads, then it parts */
  animation: house-dims 0.7s ease-in 0.35s both, curtain-part 1.25s cubic-bezier(.7, 0, .2, 1) 4s both;
}
.curtain.open :is(.curtain-l, .curtain-r) { animation-name: house-dims, curtain-part-now; animation-delay: 0.35s, 0s; }
/* footlights: a warm glow on the curtain's hem that goes out with the house lights */
.curtain::after {
  content: ''; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 199, 110, 0.32), rgba(255, 199, 110, 0) 70%);
  animation: footlights-out 0.7s ease-in 0.35s both;
}
@keyframes house-dims { to { filter: brightness(0.62); } }
@keyframes footlights-out { to { opacity: 0; } }
.curtain-l { transform-origin: left center; box-shadow: inset -18px 0 26px rgba(10, 4, 7, 0.55); }
.curtain-r { transform-origin: right center; box-shadow: inset 18px 0 26px rgba(10, 4, 7, 0.55); }
/* the valance: a pleated pelmet edged with a gold rope and a scalloped fringe */
.curtain::before {
  content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: clamp(28px, 7vh, 54px);
  background:
    radial-gradient(circle at 50% 0, #c99a3e 0 4px, transparent 4.5px) 0 100% / 18px 8px repeat-x,
    linear-gradient(#c99a3e, #c99a3e) 0 calc(100% - 8px) / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #3e0a19 0, var(--curtain) 0.8rem, var(--curtain-hi) 1.2rem, var(--curtain) 1.6rem, #3e0a19 2.2rem) 0 0 / 100% calc(100% - 8px) no-repeat;
  box-shadow: 0 6px 14px rgba(10, 4, 7, 0.6);
  animation: valance-lift 0.5s cubic-bezier(.5, 0, .75, 0) 4.9s both;
}
.curtain.open::before { animation-name: valance-lift-now; animation-delay: 0.9s; }
/* the same moves under a second name, so .open starts them fresh */
@keyframes curtain-part { 70% { opacity: 1; } to { transform: scaleX(0.06); opacity: 0; } }
@keyframes curtain-part-now { 70% { opacity: 1; } to { transform: scaleX(0.06); opacity: 0; } }
@keyframes valance-lift { to { transform: translateY(-110%); } }
@keyframes valance-lift-now { to { transform: translateY(-110%); } }
@keyframes curtain-gone { to { visibility: hidden; } }
@keyframes curtain-gone-open { to { visibility: hidden; } }

/* ---- the screening room (trailers) ------------------------------------------
   A trailer plays on the house screen: the lights go down, the room comes up
   out of the dark, the screen's own curtain parts as the projector starts, and
   the screen glows faintly once it's rolling. Seat backs line the bottom. */
.screen-overlay {
  position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; padding: 16px 16px 76px;
  background: #050203; overflow-y: auto; overscroll-behavior: contain;
  animation: lights-down 0.6s ease-in both;
}
.screen-room {
  position: relative; z-index: 1; /* over the seats */
  width: min(60rem, 100%, calc((100dvh - 210px) * 16 / 9)); display: grid; gap: 14px; justify-items: center;
  animation: comes-up 0.5s ease-out 0.3s both;
}
.screen-marquee { margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.screen-now { font: 700 11px/1 var(--f-body); font-stretch: 75%; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); }
.screen-title { font: 400 var(--step-2)/1.1 var(--f-display); color: var(--bulb); text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 0 18px rgba(255, 199, 110, 0.35); }
.screen-year { font-size: 0.6em; color: var(--dim); text-shadow: none; }
/* the screen: 16:9 in a gilt frame, lit from the booth once it rolls */
.screen-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 6px solid #c99a3e; border-radius: 4px; background: #000;
  box-shadow: inset 0 0 0 2px #050203, 0 0 0 1px rgba(255, 199, 110, 0.35), 0 20px 50px rgba(0, 0, 0, 0.7);
  transition: box-shadow 1.2s ease-out;
}
.screen-overlay.rolling .screen-frame {
  box-shadow: inset 0 0 0 2px #050203, 0 0 0 1px rgba(255, 199, 110, 0.35), 0 0 80px rgba(200, 215, 255, 0.16), 0 20px 50px rgba(0, 0, 0, 0.7);
}
.screen-picture, .screen-picture iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen-curtain { position: absolute; inset: 0; display: flex; pointer-events: none; }
.screen-curtain span { flex: 1 1 50%; background: var(--pleats); animation: curtain-part-now 1.1s cubic-bezier(.7, 0, .2, 1) 0.6s both; }
.screen-curtain span:first-child { transform-origin: left center; }
.screen-curtain span:last-child { transform-origin: right center; }
.screen-actions { justify-content: center; align-items: center; gap: 10px 18px; }
/* the house: two rows of seat backs along the bottom of the dark */
.screen-seats {
  position: fixed; inset: auto 0 0; height: 60px; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 100% at 50% 100%, #1c0b12 0 97%, transparent 100%) 0 100% / 56px 34px repeat-x,
    radial-gradient(ellipse 44% 100% at 50% 100%, #10060a 0 97%, transparent 100%) 28px 100% / 56px 56px repeat-x;
}
/* a landscape phone: a smaller room so the Close button stays on screen */
@media (max-height: 520px) {
  .screen-overlay { padding: 8px 8px 34px; }
  .screen-room { width: min(100%, calc((100dvh - 120px) * 16 / 9)); gap: 6px; }
  .screen-title { font-size: var(--step-1); }
  .screen-seats { height: 30px; }
}

/* ---- host console ------------------------------------------------------- */
.host-card { padding: 1rem; border-radius: var(--radius); background: var(--velvet-2); border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* the column never outgrows the card */
.host-card h3 { margin: 0; font-size: var(--step-1); }
.date-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.date-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border-radius: 4px; background: var(--velvet-3); font-size: var(--step--1); }
.date-item .field[type=datetime-local] { flex: 1 1 12rem; }
.field.place { flex: 0 1 9rem; width: auto; }
.pick-list { display: grid; gap: 6px; }
.pick-opt { display: grid; grid-template-columns: auto 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px; background: var(--velvet-3); cursor: pointer; font-size: var(--step--1); }
.pick-opt img, .pick-opt .noimg { width: 36px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; background: var(--velvet); }
.pick-opt:has(input:checked) { outline: 1px solid var(--bulb); }
.pick-opt .v { font-family: var(--f-mono); color: var(--bulb); }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share .field { flex: 1 1 14rem; font-family: var(--f-mono); font-size: var(--step--1); }
/* the calendar's key, printed under the grid */
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; font-style: normal; }
.cal-key .k-free { background: rgba(147, 217, 173, 0.16); border: 1px solid var(--go); }
.cal-key .k-count { width: auto; display: inline-flex; gap: 2px; }
.cal-key .k-count b { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }
.cal-key .k-night { width: auto; height: auto; padding: 2px 4px; background: var(--velvet); color: var(--bulb); font: 700 11px/1 var(--f-mono); box-shadow: 0 0 0 2px var(--bulb); }
.cal-key .k-star { width: auto; color: var(--bulb); }

/* Big text on a phone (or 200% zoom) leaves ~200px: the top bar keeps the
   name (How it works is in the footer too), and the marquee tightens up. */
@media (max-width: 300px) {
  .topbar-right > [data-action="tour"], .whoami .face { display: none; }
  .marquee { padding: 10px; }
  .board { padding: 12px 8px 10px; }
  .board .kicker { letter-spacing: 0.16em; }
  .board .sub { font-size: var(--step--1); letter-spacing: 0.04em; }
  .program { gap: 0 12px; }
  /* nothing runs past the screen's edge: buttons wrap their words, the
     If-it-locked-now poster sits over its line, and the section heads step
     down so the marquee title stays the biggest thing on the page */
  .btn { max-width: 100%; padding: 0 12px; text-align: center; }
  .btn-rsvp { min-width: min(9.5rem, 100%); }
  .pick-now { grid-template-columns: minmax(0, 1fr); }
  .section-head h2 { font-size: 1.125rem; }
}

@media (min-width: 640px) {
  .ballot { grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); }
  .marquee { padding: 20px; }
  .board { padding: 24px 22px 20px; }
  .stat-board { columns: 2; column-gap: 24px; }
  .stat-board li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .screen-curtain { display: none; }
  .screen-overlay, .screen-room { animation: none; }
  .reveal-overlay, .reveal-overlay > .reveal-box { animation: none; } /* no lights-down: it's simply there */
  .reveal-overlay.turning .reveal-stage { transform: none; }
  :is(.reveal-overlay, .reel-overlay).landed * { animation-delay: 0s !important; } /* it lands all at once */
  .marquee::before, .marquee::after, .reveal-stage::before, .reveal-stage::after, .reveal-stage.landed::before, .reveal-stage.landed::after { animation: none; }
  .marquee::after, .reveal-stage::after { opacity: 0.4; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}