/* Film Feud — filmfeud.co
   The app's own world, translated to the street front: after-dark field,
   showboard panels mounted with brass, ticket stock for dense print, and
   amber reserved for action and state — a light needs darkness to read. */

:root {
  --field: #160F19;
  --field-raised: #211724;
  --showboard: #0F0D10;
  --ticket: #F1E2BF;
  --ticket-raised: #F9EFD5;
  --ticket-ink: #271D27;
  --amber: #F4B843;
  --amber-pressed: #D99B2E;
  --bulb: #FFD98A;
  --brass: #9A713B;
  --ink: #FFF7E8;
  --muted: #CBBECC;
  --r-control: 14px;
  --r-panel: 18px;
  --r-ticket: 20px;
  --s-xs: 6px; --s-sm: 10px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--field);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Inline links keep their underline: amber and the muted body tone sit
   too close in luminance for color alone to mark a link (WCAG 1.4.1).
   Navigation rows are recognizably links by placement, so they stay quiet. */
a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
footer nav a, .page header a { text-decoration: none; }
footer nav a:hover, .page header a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--s-lg); }

/* ── The marquee ─────────────────────────────────────────────────────── */

.marquee { padding-block: var(--s-xxl) var(--s-xl); text-align: center; }

.marquee-board {
  display: inline-block;
  background: var(--showboard);
  border: 1.5px solid var(--brass);
  border-radius: var(--r-panel);
  padding: var(--s-xl) clamp(var(--s-lg), 6vw, 72px) var(--s-lg);
  position: relative;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 64px rgba(244, 184, 67, 0.07);
}

/* The bulb ring: state made of light, the app's own signature. */
.bulbs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--s-lg);
}
.bulbs span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bulb);
  box-shadow: 0 1px 8px rgba(255, 217, 138, 0.85);
  animation: glimmer 2.6s ease-in-out infinite;
}
.bulbs span:nth-child(2n) { animation-delay: 0.65s; }
.bulbs span:nth-child(3n) { animation-delay: 1.3s; }
@keyframes glimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .bulbs span { animation: none; }
  html { scroll-behavior: auto; }
}

.marquee h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: clamp(44px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
}

.marquee .tonight {
  margin-top: var(--s-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.hook {
  margin: var(--s-xl) auto 0;
  max-width: 34ch;
  font-size: clamp(21px, 3.2vw, 27px);
  font-weight: 650;
  line-height: 1.25;
  text-wrap: balance;
}

.hook + p {
  margin: var(--s-md) auto 0;
  max-width: 52ch;
  color: var(--muted);
}

.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
  max-width: 100%;
  background: var(--amber);
  color: var(--ticket-ink);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 26px;
  border-radius: var(--r-control);
  box-shadow: 0 8px 28px rgba(244, 184, 67, 0.28);
  text-align: left;
}
.coming-soon .dot { flex-shrink: 0; }
.coming-soon .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ticket-ink);
  opacity: 0.85;
}

/* ── Tonight's programme: the mechanism as showtimes ─────────────────── */

.programme { padding-block: var(--s-xxl); }

.programme h2, .cases h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-lg);
}

.showtimes {
  background: var(--showboard);
  border: 1.5px solid var(--brass);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.showtime {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--s-lg);
  padding: var(--s-lg);
  border-top: 1px solid rgba(154, 113, 59, 0.35);
  align-items: baseline;
}
.showtime:first-child { border-top: none; }

.showtime time {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 500;
  color: var(--amber);
}

.showtime h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.showtime p {
  margin-top: var(--s-xs);
  color: var(--muted);
  max-width: 62ch;
}

/* ── The poster case: the app itself, lit ────────────────────────────── */

.cases { padding-block: var(--s-lg) var(--s-xxl); }

.case-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
}

.case { text-align: center; }

.case-frame {
  display: inline-block;
  max-width: 100%;
  background: var(--showboard);
  border: 1.5px solid var(--brass);
  border-radius: 26px;
  padding: 9px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 44px rgba(244, 184, 67, 0.06);
}

.case-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel);
}

.case figcaption {
  margin-top: var(--s-md);
  color: var(--muted);
  font-size: 15px;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}
.case figcaption strong { color: var(--ink); font-weight: 650; }

/* ── The ticket window: what the night costs (nothing) ───────────────── */

.ticket-window { padding-block: 0 var(--s-xxl); }

.ticket-strip {
  overflow: clip; /* the notch circles read as punched edges, never as page overflow */
  background: var(--ticket);
  color: var(--ticket-ink);
  border-radius: var(--r-ticket);
  padding: var(--s-xl) var(--s-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
  position: relative;
}
/* Ticket edge notches — the stock is a physical object. */
.ticket-strip::before, .ticket-strip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--field);
  transform: translateY(-50%);
}
.ticket-strip::before { left: -11px; }
.ticket-strip::after { right: -11px; }

.ticket-strip h3 {
  font-size: 17px;
  font-weight: 700;
}
.ticket-strip p {
  margin-top: var(--s-xs);
  font-size: 15px;
  color: #574B57;
  max-width: 36ch;
}

/* ── The fine print ──────────────────────────────────────────────────── */

footer {
  border-top: 1px solid rgba(154, 113, 59, 0.35);
  padding: var(--s-xl) 0 var(--s-xxl);
  color: var(--muted);
  font-size: 14px;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  justify-content: space-between;
  align-items: baseline;
}
footer nav { display: flex; gap: var(--s-lg); }
footer .tmdb { max-width: 46ch; }

/* ── Utility pages (privacy, support, join) ──────────────────────────── */

.page { padding: var(--s-xxl) 0; }
.page .wrap { max-width: 720px; }

.page header { margin-bottom: var(--s-xl); }
.page header a { font-size: 14px; }

.page h1 {
  font-size: clamp(30px, 5vw, 38px);
  font-weight: 750;
  margin-top: var(--s-sm);
  line-height: 1.12;
}
.page .dateline { margin-top: var(--s-sm); color: var(--muted); font-size: 14px; }

.page h2 {
  font-size: 21px;
  font-weight: 700;
  margin: var(--s-xl) 0 var(--s-sm);
}
.page p, .page li { color: var(--muted); max-width: 68ch; }
.page p strong, .page li strong { color: var(--ink); font-weight: 650; }
.page ul { padding-left: 1.2em; margin-top: var(--s-sm); }
.page li { margin-top: var(--s-xs); }

/* The join page's code, set like the app sets it. */
.code-board {
  margin: var(--s-xl) 0;
  text-align: center;
  background: var(--showboard);
  border: 1.5px solid var(--brass);
  border-radius: var(--r-panel);
  padding: var(--s-xl);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.code-board .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.code-board .code {
  display: block;
  margin-top: var(--s-md);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: clamp(40px, 9vw, 56px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .case-row { grid-template-columns: 1fr; gap: var(--s-xl); }
  .case-frame { max-width: 320px; }
  .ticket-strip { grid-template-columns: 1fr; }
  .showtime { grid-template-columns: 64px 1fr; gap: var(--s-md); }
  .showtime time { font-size: 16px; }
  .coming-soon { font-size: 15px; padding: 14px 20px; }
  .marquee-board { padding-left: var(--s-lg); padding-right: var(--s-lg); }
}

/* Grid items may never mint a horizontal scrollbar out of long words. */
.showtime > div, .ticket-strip > div, .case { min-width: 0; }