/* I Know That Trivia: shared styles.
   Look and feel follows the title image: scholarly serif headings, art-deco brass and parchment, bottle-green panels on dark walnut, brass plaques. */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfairdisplay-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Abril Fatface";
  src: url("../fonts/abrilfatface-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefinsans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --ink: #140d09;
  --panel: #13261b;
  --panel-raised: #1b3324;
  --gold: #cfa75c;
  --gold-bright: #edd08a;
  --gold-dim: #866d3b;
  --cream: #f3e6c8;
  --muted: #bcae8c;
  --right-bg: #2b6b42;
  --right-line: #9fe6b4;
  --wrong-bg: #5c2319;
  --wrong-line: #ec927f;

  /* Headings and labels in classical capitals; sentence-style lines in a bookish italic;
     big numbers in a fat poster serif. */
  --display: "Cinzel", "Georgia", serif;
  --phrase: "Playfair Display", "Georgia", serif;
  --figures: "Abril Fatface", "Georgia", serif;
  --body: "Josefin Sans", "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

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

html {
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--cream);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.5;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(207, 167, 92, 0.14), transparent 60%),
    radial-gradient(ellipse at 50% 115%, rgba(27, 51, 36, 0.55), transparent 60%),
    var(--ink);
}

a {
  color: var(--gold-bright);
}

:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.03em;
  line-height: 1.15;
}

/* ---------- Art-deco frame: the double gold rule used on cards and panels ---------- */

.deco-frame {
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold-dim);
  outline-offset: 6px;
  background: var(--panel);
}

/* ---------- Brass plaque buttons ----------
   Like the labels beside museum exhibits: a brushed-brass plate with cut corners, an engraved
   inner line and a screw head in each corner. (The class is still "ticket" from the movie site.) */

.ticket {
  --cut: 10px;
  --screw: radial-gradient(circle, #8a6a32 0 1.5px, #5b4419 1.5px 2.8px, #3d2d10 2.8px 3.6px, rgba(255, 246, 214, 0.7) 3.6px 4.6px, transparent 5px);
  position: relative;
  display: block;
  padding: 1.1rem 2rem 1rem;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  background:
    var(--screw) left 10px top 10px / 12px 12px no-repeat,
    var(--screw) right 10px top 10px / 12px 12px no-repeat,
    var(--screw) left 10px bottom 10px / 12px 12px no-repeat,
    var(--screw) right 10px bottom 10px / 12px 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 246, 214, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #b38c46);
  border: 0;
  font: inherit;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* The engraved line: a dark groove with a light edge beside it. */
.ticket::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(20, 13, 9, 0.5);
  box-shadow: 0 1px 0 rgba(255, 246, 214, 0.45), inset 0 1px 0 rgba(255, 246, 214, 0.45);
  pointer-events: none;
}

.ticket:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

/* The cut corners would clip a normal outline, so focus is shown inside the plaque. */
.ticket:focus-visible {
  outline: none;
  filter: brightness(1.12);
}

.ticket:focus-visible::before {
  border: 2px solid var(--ink);
}

.ticket-name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.5);
}

.ticket-blurb {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.ticket-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---------- Home page ---------- */

.home {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.hero {
  margin: 0 auto 2.5rem;
  /* Shown no larger than the file's native width so the current 1024px image stays sharp.
     A larger image can be dropped in without changing this. */
  max-width: min(100%, 1024px);
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}

.mode {
  padding: 1.75rem 1.5rem 2rem;
  margin: 0 0 2.5rem;
}

.mode h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
}

.mode-lede {
  max-width: 44rem;
  margin: 0 auto 1.75rem;
  color: var(--muted);
  text-align: center;
}

/* "How to play": plain text under the game modes, quieter than the mode panels. */
.how-to-play {
  max-width: 62rem;
  margin: 0 auto 2.5rem;
  padding: 0 0.5rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.how-to-play h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.how-to-play h3 {
  margin: 0 0 0.35rem;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.how-to-play p {
  margin: 0 0 1rem;
}

.how-lede {
  max-width: 46rem;
  margin: 0 auto 1.5rem !important;
  text-align: center;
}

.how-columns {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding: 1.25rem 0 0.25rem;
  border-top: 1px solid rgba(207, 167, 92, 0.2);
  border-bottom: 1px solid rgba(207, 167, 92, 0.2);
  margin-bottom: 1.25rem;
}

.how-levels strong {
  color: var(--cream);
  font-weight: 600;
}

.share-site,
.sample-link {
  margin: 0 auto 2rem;
  color: var(--muted);
  text-align: center;
}

.share-site p {
  margin: 0 0 0.75rem;
}

.share-site .control {
  font-size: 1.05rem;
  padding: 0.6rem 1.4rem;
}

.site-footer {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------- Question cards (pre-show and solo) ---------- */

.card {
  width: 100%;
  padding: clamp(1.25rem, 4vmin, 3rem);
}

.card-meta {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: clamp(0.85rem, 1.6vmin + 0.4rem, 1.6rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* Keep "1990s" from rendering as "1990S" */
.card-era {
  text-transform: none;
}

.card-prompt {
  margin: 0 0 clamp(1rem, 3vmin, 2.5rem);
  font-family: var(--body);
  font-weight: 600;
  color: var(--cream);
  font-size: clamp(1.35rem, 3.6vmin + 0.5rem, 4.25rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.choices {
  display: grid;
  gap: clamp(0.6rem, 1.8vmin, 1.5rem);
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 40rem) {
  .choices {
    grid-template-columns: 1fr;
  }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: 100%;
  min-height: 100%;
  padding: 0.7em 1em;
  color: var(--cream);
  background: var(--panel-raised);
  border: 2px solid var(--gold-dim);
  font: inherit;
  font-size: clamp(1.1rem, 2.6vmin + 0.4rem, 3rem);
  line-height: 1.25;
  text-align: left;
  transition: opacity 0.6s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.choice-letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 50%;
  font-family: var(--figures);
  font-size: 0.8em;
}

button.choice {
  cursor: pointer;
}

button.choice:not(:disabled):hover {
  border-color: var(--gold-bright);
  background: #24402f;
}

.choice.is-right {
  background: var(--right-bg);
  border-color: var(--right-line);
}

.choice.is-right .choice-letter {
  background: var(--right-line);
}

.choice.is-wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong-line);
}

.choice.is-wrong .choice-letter {
  background: var(--wrong-line);
}

.choice.is-faded {
  opacity: 0.35;
}

.card-fact {
  min-height: 1.5em;
  margin: clamp(1rem, 3vmin, 2.25rem) 0 0;
  color: var(--gold-bright);
  font-size: clamp(1rem, 2.2vmin + 0.4rem, 2.4rem);
  text-align: center;
  text-wrap: balance;
}

/* ---------- Pre-show ---------- */

.preshow {
  overflow: hidden;
}

.stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1rem, 5vmin, 4rem);
}

.preshow .card {
  max-width: 90rem;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.preshow .card.is-visible {
  opacity: 1;
  transform: none;
}

.preshow .card-fact {
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}

.preshow .card.is-revealed .card-fact {
  opacity: 1;
}

.timer {
  height: 4px;
  margin: clamp(1rem, 3vmin, 2rem) auto 0;
  max-width: 40rem;
  background: rgba(207, 167, 92, 0.18);
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.timer-fill {
  height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

.card.is-revealed .timer {
  opacity: 0;
}

.stage-message {
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(1.1rem, 2.5vmin, 2rem);
  text-align: center;
}

/* Controls sit at the top and fade away while nobody is touching the mouse or keyboard. */
.controls {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(20, 13, 9, 0.9), transparent);
  transition: opacity 0.6s ease;
}

body.is-idle .controls,
body.is-idle .preshow-footer {
  opacity: 0;
  pointer-events: none;
}

/* Pinned to the bottom of the pre-show; it hides with the controls so the TV shows only the card. */
.preshow-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 2;
  padding: 0.5rem 1rem;
  background: linear-gradient(0deg, rgba(20, 13, 9, 0.9), transparent);
  transition: opacity 0.6s ease;
}

.site-footer p {
  margin: 0.25rem 0;
}

.solo-page .site-footer {
  margin-top: 2rem;
}

/* ---------- Text pages (privacy) ---------- */

.prose .mode {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 2rem 2.25rem;
}

.prose h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 2.8rem);
}

.prose h2 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

body.is-idle {
  cursor: none;
}

.controls-title {
  margin: 0 auto 0 0;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
}

.control {
  padding: 0.45rem 0.9rem;
  color: var(--gold-bright);
  background: rgba(19, 38, 27, 0.85);
  border: 1px solid var(--gold-dim);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.control:hover {
  border-color: var(--gold-bright);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 3;
  padding: 0.6rem 1.1rem;
  color: var(--ink);
  background: var(--gold-bright);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.toast.is-shown {
  opacity: 1;
}

/* The occasional support card: a QR code big enough to scan from across the room. */
.preshow .support-card {
  max-width: 64rem;
  text-align: center;
}

.support-heading {
  margin: 0 0 0.4em;
  font-size: clamp(2rem, 6vmin, 5.5rem);
}

.support-text {
  max-width: 34em;
  margin: 0 auto clamp(1rem, 3vmin, 2.5rem);
  font-size: clamp(1.15rem, 3vmin, 2.8rem);
  line-height: 1.3;
  text-wrap: balance;
}

.support-qr {
  width: clamp(10rem, 34vmin, 30rem);
  margin: 0 auto;
  padding: 0.5rem;
  background: #fff;
  border: 2px solid var(--gold);
}

.support-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.support-address {
  margin: clamp(0.75rem, 2vmin, 1.5rem) 0 0;
  color: var(--gold-bright);
  font-size: clamp(1rem, 2.4vmin, 2.2rem);
  letter-spacing: 0.04em;
}

.result-support {
  margin: 1rem 0 0;
  color: var(--muted);
}

/* ---------- Solo ---------- */

.solo-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.solo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.5rem;
}

.solo-bar .controls-title {
  font-size: 1.25rem;
}

.scoreline {
  color: var(--muted);
  font-size: 1rem;
}

.scoreline strong {
  color: var(--gold-bright);
  font-weight: 700;
}

.solo-page .card {
  min-height: 0;
}

.solo-page .card-prompt {
  font-size: clamp(1.35rem, 2.6vw + 0.6rem, 2.6rem);
}

.solo-page .choice {
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.6rem);
}

.solo-page .card-fact {
  font-size: clamp(1rem, 1vw + 0.6rem, 1.35rem);
}

.solo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.solo-actions .ticket {
  min-width: 14rem;
}

.solo-actions .ticket-name {
  font-size: 1.25rem;
}

.result {
  padding: 2rem 1.5rem;
  text-align: center;
}

.result h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.result-score {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.result-best {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.picker h1 {
  margin: 0.5rem 0 0.25rem;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.picker .mode-lede {
  margin-bottom: 2rem;
}

.picker h1 + .ticket-row {
  margin-top: 1.5rem;
}

/* Four round lengths fit on one row on a laptop, two by two on a phone. */
.ticket-row.lengths {
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.ticket-row.lengths .ticket-name {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Seasonal events ---------- */

/* Each event re-colours the same art-deco look by overriding the palette. Halloween: pumpkin
   orange on deep purple-black, with a purple outer rule. */
.theme-halloween {
  --ink: #0c0812;
  --panel: #1a1022;
  --panel-raised: #241630;
  --gold: #f08a24;
  --gold-bright: #ffb454;
  --gold-dim: #8b55a3;
  --cream: #f6ead8;
  --muted: #c0aecb;
}

body.theme-halloween {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(139, 85, 163, 0.32), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(240, 138, 36, 0.10), transparent 55%),
    var(--ink);
}

.event-nav {
  margin: 0 0 0.5rem;
}

.event-hero {
  margin: 1rem auto 2.5rem;
  text-align: center;
}

/* The event's title image, like the home page's: never wider than the file itself. */
.event-hero img {
  display: block;
  width: 100%;
  max-width: 1376px;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}

.event-dates {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.event-home .site-footer a {
  color: var(--gold-bright);
}

/* The banner on the main home page, in the event's own colours. */
.event-banner {
  margin: 0 0 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.event-banner h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
}

.event-banner .mode-lede {
  margin: 0 auto 1.25rem;
}

.event-banner .ticket {
  display: inline-block;
  min-width: min(22rem, 100%);
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  margin: 1rem 0;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: 0.6rem 0.5rem 0.5rem;
  border: 1px solid var(--gold-dim);
  background: var(--panel-raised);
}

.countdown-unit b {
  font-family: var(--figures);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.countdown-unit small {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* What event pages show out of season. */
.out-of-season {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.out-of-season h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.out-of-season p {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

/* A seasonal sample-questions page (e.g. /halloween/trivia-questions/): plain questions to read
   aloud, with the answers behind a tap. */
.sample-page .mode {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.sample-header {
  margin: 1.5rem auto 2.5rem;
  text-align: center;
}

.sample-header h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 6vw, 3.4rem);
}

.sample-cta {
  display: flex;
  justify-content: center;
}

.sample-cta .ticket {
  min-width: min(22rem, 100%);
}

.sample-list {
  margin: 0;
  padding: 0 0 0 2.2rem;
}

.sample-q {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(139, 85, 163, 0.35);
}

.sample-q::marker {
  font-family: var(--figures);
  color: var(--gold-bright);
}

.sample-prompt {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.sample-choices {
  display: grid;
  gap: 0.35rem 1.5rem;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.sample-choices li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

@media (max-width: 34rem) {
  .sample-choices {
    grid-template-columns: 1fr;
  }
}

.sample-choices .choice-letter {
  font-size: 0.85rem;
}

.sample-q summary {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold-dim);
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}

.sample-q summary::-webkit-details-marker {
  display: none;
}

.sample-q summary:hover {
  border-color: var(--gold-bright);
}

.sample-q details[open] summary {
  display: none;
}

.sample-answer {
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: var(--panel-raised);
  border-left: 3px solid var(--gold);
}

.sample-answer strong {
  display: block;
  color: var(--gold-bright);
}

/* ---------- Group Play ---------- */

.group-home h1 {
  margin: 0.5rem 0 0.25rem;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.group-home .mode-lede {
  margin: 0 auto 2rem;
  text-align: center;
}

.group-panels {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: start;
}

.group-panels-single {
  max-width: 30rem;
  margin: 0 auto;
}

.group-panel {
  padding: 1.5rem;
}

.group-panel h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  text-align: center;
}

.group-panel h3 {
  margin: 1.25rem 0 0.6rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.group-panel .ticket-row {
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

.group-panel .ticket {
  padding: 0.8rem 1.4rem 0.7rem;
}

.group-panel .ticket-name {
  font-size: 1.2rem;
}

.group-panel .ticket-blurb {
  font-size: 0.85rem;
}

/* A chosen plaque stays lit; the others dim until picked. */
.group-panel .ticket[aria-pressed="false"] {
  filter: saturate(0.45) brightness(0.7);
}

.group-panel .ticket[aria-pressed="true"]::before {
  border: 2px solid var(--ink);
}

.field {
  display: block;
  margin: 1.25rem 0 0;
}

.field span {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.field input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  color: var(--cream);
  background: var(--panel-raised);
  border: 1px solid var(--gold-dim);
  font: inherit;
  font-size: 1.15rem;
}

.field input:focus {
  border-color: var(--gold-bright);
  outline: none;
}

.field input.code-input {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.form-error {
  min-height: 1.4em;
  margin: 0.75rem 0 0;
  color: var(--wrong-line);
}

.control-primary {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 0;
}

.control-primary:disabled {
  opacity: 0.6;
}

.note {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* The game: question in the middle, scores to the side (below it on phones). */
.group-layout {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-areas:
    "stage side"
    "controls side"
    "note note";
  align-items: start;
}

@media (max-width: 52rem) {
  .group-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "controls" "side" "note";
  }
}

.group-stage {
  grid-area: stage;
}

.group-side {
  grid-area: side;
  padding: 1rem;
  border: 1px solid var(--gold-dim);
  background: var(--panel);
}

.group-side h2 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

.group-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

/* Links styled as buttons (New game, Show on TV) centre their text like real buttons do. */
.group-controls a.control,
.invite-buttons a.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.group-controls .ticket {
  min-width: 14rem;
}

.group-note {
  grid-area: note;
  margin: 0;
  color: var(--wrong-line);
  text-align: center;
}

.group-scores,
.tv-side {
  margin: 0;
  padding: 0;
  list-style: none;
}

.score-item {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name points"
    "rank tags gain";
  column-gap: 0.5rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(207, 167, 92, 0.15);
}

.score-item:last-child {
  border-bottom: 0;
}

.score-rank {
  grid-area: rank;
  color: var(--muted);
  font-family: var(--figures);
}

.score-name {
  grid-area: name;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.score-points {
  grid-area: points;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.score-gain {
  grid-area: gain;
  color: var(--right-line);
  font-size: 0.9em;
  text-align: right;
}

.score-item.is-you .score-name {
  color: var(--gold-bright);
}

.score-item.is-away {
  opacity: 0.5;
}

.tag {
  padding: 0 0.4em;
  color: var(--muted);
  border: 1px solid var(--gold-dim);
  font-size: 0.75em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag-in {
  color: var(--right-line);
  border-color: var(--right-line);
}

/* Answers: your pick while waiting, then everyone's names on the reveal. */
.group-card .choice {
  flex-wrap: wrap;
}

.choice-text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75em;
}

.choice-names {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.35em;
}

.choice-names:empty {
  display: none;
}

.name-chip {
  padding: 0.1em 0.55em;
  color: var(--ink);
  background: var(--cream);
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
}

.name-chip.is-you {
  background: var(--gold-bright);
}

.choice.is-picked {
  border-color: var(--gold-bright);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--gold-bright);
}

.choice.is-picked .choice-letter {
  background: var(--gold-bright);
}

.group-card .choice.is-faded {
  opacity: 0.55;
}

.group-clock {
  margin: 0.75rem 0 0;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.group-card .card-fact {
  margin-top: 0.75rem;
}

.group-ready,
.group-lobby,
.group-final {
  text-align: center;
}

.group-countdown {
  margin: 0.5rem 0 0;
  color: var(--gold-bright);
  font-family: var(--figures);
  font-size: clamp(4rem, 15vmin, 9rem);
  line-height: 1;
}

.group-waiting {
  margin: 1.25rem 0 0;
  color: var(--muted);
}

.invite {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem 2rem;
  margin: 1rem 0 0;
}

.group-qr {
  width: clamp(9rem, 22vmin, 15rem);
  padding: 0.4rem;
  background: #fff;
}

.group-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.invite-text {
  max-width: 24rem;
  text-align: center;
}

.invite-label {
  margin: 0;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invite-code {
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 9vmin, 5.5rem);
  letter-spacing: 0.15em;
  line-height: 1.1;
}

.invite-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

.invite-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
}

.invite-box {
  max-width: 40rem;
  padding: 1.5rem;
  text-align: center;
}

.invite-box > .control {
  margin-top: 1rem;
}

.final-list {
  max-width: 28rem;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
}

.final-place {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(207, 167, 92, 0.15);
  text-align: left;
}

.final-rank {
  color: var(--muted);
  font-family: var(--figures);
}

/* Trophies for the top three. Real metal colours, so they stay the same in every event theme.
   Sized in rem so 1st place's bigger text doesn't push them out of their column. */
.trophy {
  display: block;
  width: 2.6rem;
  justify-self: center;
  line-height: 0;
}

.trophy svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trophy-1 {
  width: 3.3rem;
  --metal: #f5c542;
  --edge: #9a7200;
  --base: #5a3d1c;
  --num: #4a3500;
}

.trophy-2 {
  --metal: #dfe3e8;
  --edge: #7f8892;
  --base: #3d3f44;
  --num: #2f343a;
}

.trophy-3 {
  width: 2.4rem;
  --metal: #d8925a;
  --edge: #84491f;
  --base: #4a2c17;
  --num: #3c200c;
}

.trophy-metal {
  fill: var(--metal);
  stroke: var(--edge);
  stroke-width: 1.2;
}

.trophy-handle {
  fill: none;
  stroke: var(--metal);
  stroke-width: 3;
  stroke-linecap: round;
}

.trophy-shine {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.5;
}

.trophy-base {
  fill: var(--base);
  stroke: var(--edge);
  stroke-width: 1.2;
}

/* Small phones: a 10-letter 1st-place name and its score need every bit of the row. */
@media (max-width: 23rem) {
  .final-place {
    grid-template-columns: 2.9rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding-inline: 0.4rem;
  }

  .place-1 {
    font-size: 1.1em;
  }

  .final-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trophy {
    width: 2.3rem;
  }

  .trophy-1 {
    width: 2.8rem;
  }

  .trophy-3 {
    width: 2.15rem;
  }
}

.trophy text {
  fill: var(--num);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.final-score {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.place-1 {
  font-size: 1.35em;
}

.place-1 .final-rank,
.place-1 .final-name {
  color: var(--gold-bright);
}

.final-place.is-you {
  background: var(--panel-raised);
}

/* "And the winner is…": a spotlight sweeps the card while the drumroll builds, then the final
   scores pop in with the trophies landing one by one. The scores column hides meanwhile, so it
   doesn't give the game away. */
.group-layout.is-drumroll .group-side {
  visibility: hidden;
}

.group-drumroll,
.solo-page .group-drumroll {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(14rem, 45vmin, 26rem);
  overflow: hidden;
  text-align: center;
}

.drumroll-spot {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(255, 244, 214, 0.22), transparent 28%);
  animation: spot-sweep 3.6s ease-in-out both;
}

.drumroll-lead {
  position: relative;
  margin: 0;
  padding: 0 1rem;
  color: var(--gold-bright);
  font-family: var(--phrase);
  font-style: italic;
  font-size: clamp(2rem, 8vmin, 5rem);
  line-height: 1.15;
  animation: lead-in 3.6s ease-out both;
}

.drumroll-dots span {
  animation: dot-blink 0.9s infinite both;
}

.drumroll-dots span:nth-child(2) {
  animation-delay: 0.3s;
}

.drumroll-dots span:nth-child(3) {
  animation-delay: 0.6s;
}

.group-final.is-reveal .result-score {
  animation: winner-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.group-final.is-reveal .final-place {
  animation: row-in 0.45s ease-out both;
  animation-delay: calc(0.35s + var(--order) * 0.12s);
}

.group-final.is-reveal .trophy svg {
  animation: trophy-drop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  animation-delay: calc(0.45s + var(--order) * 0.12s);
}

@keyframes spot-sweep {
  0% { transform: translateX(-45%); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translateX(40%); }
  80% { transform: translateX(0); }
  100% { transform: translateX(0) scale(1.6); opacity: 1; }
}

@keyframes lead-in {
  0% { opacity: 0; transform: scale(0.85); letter-spacing: 0.15em; }
  25% { opacity: 1; }
  100% { opacity: 1; transform: scale(1.06); letter-spacing: 0.02em; }
}

@keyframes dot-blink {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

@keyframes winner-pop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes row-in {
  0% { opacity: 0; transform: translateY(0.6rem); }
  100% { opacity: 1; transform: none; }
}

@keyframes trophy-drop {
  0% { opacity: 0; transform: translateY(-1.2rem) scale(0.5) rotate(-12deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drumroll-spot,
  .drumroll-lead,
  .drumroll-dots span,
  .group-final.is-reveal .result-score,
  .group-final.is-reveal .final-place,
  .group-final.is-reveal .trophy svg {
    animation: none;
  }
}

/* The TV board: question in the middle, players down both sides, join details in the corner.
   It borrows the pre-show's full-screen page, but its cards don't fade in and out. */
.group-tv .card {
  opacity: 1;
  transform: none;
}

.group-tv-stage {
  display: block;
  padding: clamp(1rem, 3vmin, 2.5rem);
}

.tv-code-form {
  max-width: 32rem;
  margin: 10vh auto 0;
}

.tv-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 17vw) minmax(0, 1fr) minmax(10rem, 17vw);
  gap: clamp(0.75rem, 2vmin, 2rem);
  align-items: center;
  min-height: calc(100vh - 2 * clamp(1rem, 3vmin, 2.5rem));
  min-height: calc(100dvh - 2 * clamp(1rem, 3vmin, 2.5rem));
  /* Room at the bottom for the join details in the corner. */
  padding-bottom: clamp(5rem, 12vmin, 9.5rem);
}

.tv-layout.is-final .tv-side {
  visibility: hidden;
}

.tv-side {
  font-size: clamp(1rem, 1.8vmin + 0.3rem, 2rem);
}

.tv-side .score-item {
  margin: 0 0 0.6em;
  padding: 0.6em 0.5em;
  border: 1px solid var(--gold-dim);
  background: var(--panel);
}

.tv-join {
  position: fixed;
  right: clamp(0.75rem, 2vmin, 1.5rem);
  bottom: clamp(0.75rem, 2vmin, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: clamp(0.85rem, 1.4vmin + 0.2rem, 1.3rem);
}

.tv-join p {
  margin: 0;
}

.tv-join .group-qr {
  width: clamp(4.5rem, 10vmin, 8rem);
}

.group-tv .card-prompt {
  font-size: clamp(1.35rem, 3.2vmin + 0.5rem, 3.75rem);
}

.group-tv .group-clock {
  font-size: clamp(1rem, 2vmin + 0.3rem, 2rem);
}

/* After the reveal, the timer bar counts down to the next question, in a brighter style. */
.group-card.is-revealed .timer {
  opacity: 1;
}

.group-card.is-revealed .timer-fill {
  background: var(--cream);
}

.group-clock.is-next {
  color: var(--gold-bright);
  font-family: var(--phrase);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vmin + 0.7rem, 2.6rem);
  letter-spacing: 0.03em;
}

/* Shown on the TV board until the browser is allowed to play sound. */
.sound-prompt {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vmin, 1.5rem);
  z-index: 4;
  transform: translateX(-50%);
  font-size: clamp(1rem, 1.6vmin + 0.4rem, 1.5rem);
}

.sound-prompt[hidden] {
  display: none;
}

/* ---------- Contact Us ---------- */

.contact {
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.contact h1 {
  margin-top: 0;
}

.field select,
.field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  color: var(--cream);
  background: var(--panel-raised);
  border: 1px solid var(--gold-dim);
  font: inherit;
  font-size: 1.1rem;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field select:focus,
.field textarea:focus {
  border-color: var(--gold-bright);
  outline: none;
}

.field [aria-invalid="true"] {
  border-color: var(--wrong-line);
}

.char-count {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.char-count.is-over {
  color: var(--wrong-line);
}

/* The bot trap: off screen for people, still in the form for bots. */
.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-done h2 {
  margin-top: 0;
}

/* ---------- Not found (404) ---------- */

.not-found {
  max-width: 40rem;
  margin: 10vh auto 2rem;
  text-align: center;
}

.not-found h1 {
  margin: 0.25rem 0 0.75rem;
}

.not-found .ticket-row {
  margin-top: 1.5rem;
}

/* The Sound button in the solo top bar sits at the far right. */
.solo-sound {
  margin-left: auto;
  font-size: 0.85rem;
}