/* More or Less — shared by every pack.
 *
 * The tokens below are the site's game palette, the same set Timeliner defines,
 * so a pack theme in packs.json overrides the same property names and the two
 * games stay recognisably from the same place. What is different here is the
 * furniture: there is no reel, no screener and no timeline. The whole interface
 * is two large pictures side by side, a question above them, and a clock.
 *
 * The two options are the design. They are buttons, they are enormous, and they
 * are identical to each other in every respect that is not the photograph and
 * the name — anything that made one of them look more likely would be a tell.
 */

:root {
  --bg: #0d0a0c;
  --surface: #1a1518;
  --surface-2: #241c20;
  --ink: #f7efe3;
  --paper: #f7efe3;
  --muted: #a3928c;
  --line: rgba(247, 239, 227, .14);
  --coral: #e0402e;
  --aqua: #3fb2a6;
  --blue: #5a78ec;
  --yellow: #f0b429;
  --gold-soft: #d9a441;
  --green: #35c98a;
  --red: #ff6046;

  --backdrop: url("/assets/backdrops/auditorium-draped.webp");
  --grain: .05;
  --glow: rgba(240, 180, 41, .18);

  --btn-top: #ea5340;
  --btn-base: #b92e1f;
  --btn-glow: rgba(224, 64, 46, .35);
}

/* The UA rule for `hidden` is a bare `[hidden] { display: none }`, which any
   layout rule with a class selector beats. Half the interface below is a flex
   or grid container that is hidden between phases, so this has to win. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  position: relative;
  color: var(--ink);
  background: var(--bg);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--backdrop) center / cover no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

::selection { background: var(--yellow); color: #1b1206; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Space Grotesk", sans-serif; letter-spacing: -.06em; }
h1 { text-shadow: 0 0 60px var(--glow); }

.shell { width: min(calc(100% - 36px), 1120px); margin-inline: auto; }
.screen { display: none; padding-bottom: 60px; }
.screen.is-active { display: block; }

.top {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-right { display: flex; align-items: center; gap: 14px; }

.pill {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(247,239,227,.06);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 10px;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(240,180,41,.7);
}

.button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}
.button:disabled { opacity: .4; cursor: default; }
.button-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--coral) 55%, var(--btn-base) 100%);
  box-shadow: 0 10px 30px var(--btn-glow);
}
.button-dark { color: #1b1206; background: var(--paper); }
.button-ghost { border: 1px solid var(--line); background: rgba(247,239,227,.08); color: var(--paper); }
.button-wide { width: 100%; }
.button-small { padding: 8px 16px; min-height: 0; font-size: 14px; }
.link-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ setup */

.setup { padding-top: 52px; text-align: center; }
.setup .shell { width: min(calc(100% - 36px), 760px); }
.setup h1 { margin-bottom: 16px; font-size: clamp(38px, 6vw, 62px); line-height: .96; }
.setup .kicker { justify-content: center; }
.lede { max-width: 52ch; margin-inline: auto; color: var(--muted); font-size: 18px; }

.setup-grid {
  margin: 38px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.setup-grid .field { width: 100%; }
.field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 800; }
.hint { margin: 8px auto 0; max-width: 46ch; color: var(--muted); font-size: 14px; }

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.segmented button {
  min-width: 56px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}
.segmented button.on { background: var(--yellow); color: #1b1206; }

.setup-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.setup-actions .button { min-width: 210px; }
.note { margin: 22px auto 0; max-width: 48ch; color: var(--muted); font-size: 14px; }

.mode-chosen {
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}
.mode-chosen a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

.host-identity {
  margin: 0;
  min-height: 54px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.host-identity b { font-size: 17px; }
.host-identity a { margin-left: auto; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.form-error {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(224,64,46,.4);
  background: rgba(224,64,46,.14);
  color: #ff9b8b;
  font-weight: 700;
}
.join-form { max-width: 420px; margin-inline: auto; }
.join-form .field { margin-bottom: 16px; }
.join-form label { display: block; margin-bottom: 8px; font-weight: 800; font-size: 14px; }
.join-form input,
.text-input,
.name-fields input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--paper);
  font: inherit;
  font-size: 17px;
}
.name-fields { margin-top: 24px; display: grid; gap: 12px; }
.join-form input::placeholder, .text-input::placeholder { color: rgba(247,239,227,.35); }

.open-tables-title { margin: 40px 0 6px; font-size: 24px; }
.open-table-row { max-width: 560px; margin-inline: auto; text-align: left; }
.open-table-row b { flex: none; }
.open-table-row em { flex: 1; }
.table-join-btn { text-decoration: none; padding: 8px 16px; min-height: 0; }

/* ------------------------------------------------------------------ lobby */

.lobby-cols {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 10px;
}
.join-code {
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-size: 60px;
  letter-spacing: .16em;
  text-indent: .16em;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid rgba(240,180,41,.35);
  background: linear-gradient(180deg, #241b1c 0%, #16100f 100%);
  color: var(--yellow);
  text-align: center;
  text-shadow: 0 0 28px rgba(240,180,41,.45);
  box-shadow: inset 0 0 40px rgba(240,180,41,.08), 0 20px 50px rgba(0,0,0,.45);
}
.join-code::before, .join-code::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 6px;
  background-image: radial-gradient(circle, rgba(240,180,41,.85) 40%, transparent 45%);
  background-size: 18px 6px;
  background-repeat: repeat-x;
}
.join-code::before { top: 9px; }
.join-code::after { bottom: 9px; }

.qr-box { margin-top: 14px; }
.qr-box img { border-radius: 14px; border: 1px solid var(--line); background: #fff; }

.lobby-seats { display: grid; gap: 10px; margin-bottom: 14px; }
.seat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.seat-chip b { flex: 1; }
.seat-chip em { font-style: normal; font-weight: 700; color: var(--muted); font-size: 13px; }
.seat-chip.is-empty { color: var(--muted); border-style: dashed; background: transparent; justify-content: center; }
.seat-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* -------------------------------------------------------------------- game */

body.playing::before { opacity: .22; }
.game-shell {
  min-height: calc(100dvh - var(--chrome-height));
  display: flex;
  flex-direction: column;
}
.stage { flex: 1; padding: 6px 0 30px; }

.paused-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 18px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(240,180,41,.38);
  background: rgba(240,180,41,.1);
}
.paused-bar strong { color: var(--yellow); }
.paused-bar span { color: rgba(247,239,227,.65); font-size: 14px; }

/* The question. It changes every round and it is the only instruction on the
   screen, so it is set as large as the room allows and never abbreviated. */
.duel-head { text-align: center; margin-bottom: 18px; }
.duel-q {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 4.6vw, 46px);
  letter-spacing: -.04em;
  line-height: 1.02;
  text-shadow: 0 0 60px var(--glow);
}
.duel-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

/* The clock, and with it the falling bonus. One bar, drawn from the server's
   round clock so every screen in the room empties at the same rate. */
.duel-clock {
  position: relative;
  height: 6px;
  margin: 0 auto 22px;
  max-width: 620px;
  border-radius: 999px;
  background: rgba(247,239,227,.1);
  overflow: hidden;
}
.duel-clock span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--coral));
  transition: width .25s linear;
}
.duel-clock.is-low span { background: var(--red); }

/* ------------------------------------------------------------------- duel */

.duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.duel-or {
  align-self: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--paper);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.opt:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(247,239,227,.34); }
.opt:disabled { cursor: default; }

.opt-shot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0f0b0d radial-gradient(120% 120% at 50% 0%, rgba(247,239,227,.08), transparent 60%);
}
.opt-shot img { width: 100%; height: 100%; object-fit: cover; }
/* Without a picture the card still has to fill the same space, or the pair
   stops being symmetrical and the missing one looks like the wrong answer. */
.opt-shot.is-bare::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 64px;
  color: rgba(247,239,227,.18);
}
.opt-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.opt-name {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px, 2.1vw, 23px);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.opt-credit {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(247,239,227,.38);
}
.opt-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Your pick, before anybody knows anything. */
.opt.is-mine { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(240,180,41,.45), 0 24px 60px rgba(0,0,0,.5); }
.opt.is-mine::before {
  content: "Your pick";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--yellow);
  color: #1b1206;
  font-size: 12px;
  font-weight: 800;
}

/* The reveal. */
.opt-value {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -.03em;
  color: var(--yellow);
}
.opt-source { margin: 0; font-size: 12px; color: rgba(247,239,227,.45); }
.opt.is-won { border-color: var(--green); box-shadow: 0 0 0 2px rgba(53,201,138,.5), 0 24px 60px rgba(0,0,0,.5); }
.opt.is-won .opt-value { color: var(--green); }
.opt.is-lost { opacity: .62; }
.opt.is-lost .opt-shot img { filter: saturate(.35); }

/* The payoff line. Plan section 7 calls this the thing people repeat to
   somebody who was not there, so it gets the treatment a quote deserves. */
.payoff {
  margin: 22px auto 0;
  max-width: 62ch;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid rgba(240,180,41,.3);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(240,180,41,.13), transparent 62%),
    var(--surface);
  text-align: center;
  font-size: 18px;
}
.payoff p { margin: 0; }
.payoff .verdict {
  display: block;
  margin-bottom: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  letter-spacing: -.02em;
}
.payoff .verdict.is-right { color: var(--green); }
.payoff .verdict.is-wrong { color: var(--red); }
.payoff .earned { color: var(--yellow); font-weight: 800; }
.payoff .next-in { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* Who is in, before anybody knows what they picked. Watching the last two
   names light up is most of the tension in the round. */
.answer-strip {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.answer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(247,239,227,.05);
  font-size: 14px;
  font-weight: 700;
  color: rgba(247,239,227,.5);
}
.answer-chip.is-in { color: var(--paper); border-color: rgba(53,201,138,.55); background: rgba(53,201,138,.14); }
.answer-chip.is-away { opacity: .4; }
.answer-chip .seat-dot { width: 10px; height: 10px; }
.answer-chip .pts { color: var(--yellow); font-weight: 800; }
.answer-chip .miss { color: rgba(247,239,227,.4); }

/* The running scoreboard, along the bottom where it can be ignored. */
.scoreboard {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.score-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 12px;
  border: 1px solid rgba(247,239,227,.13);
  background: rgba(247,239,227,.06);
}
.score-chip b { font-weight: 700; }
.score-chip .pts { font-family: "Space Grotesk", sans-serif; font-size: 19px; color: var(--yellow); }
.score-chip .streak { font-size: 13px; color: var(--coral); font-weight: 800; }
.score-chip.is-away { opacity: .45; }

.waiting-note {
  margin: 22px auto 0;
  max-width: 46ch;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------------------ board */
/* The shared screen. Read from the sofa, so everything grows and nothing is
   tappable — the phones are the controls. */
.board .duel-q { font-size: clamp(34px, 4.4vw, 62px); }
.board .opt-name { font-size: clamp(20px, 2.2vw, 30px); }
.board .opt-value { font-size: clamp(30px, 3.6vw, 52px); }
.board .payoff { font-size: 21px; max-width: 70ch; }
.board .answer-chip { font-size: 17px; padding: 10px 18px; }
.board .score-chip { padding: 12px 20px; }
.board .score-chip .pts { font-size: 24px; }
.board .opt-credit { font-size: 12px; }

/* ----------------------------------------------------------------- finish */

.finish { padding-top: 52px; text-align: center; }
.finish .shell { width: min(calc(100% - 36px), 760px); }
.finish h1 { font-size: clamp(34px, 5vw, 54px); }
.finish-board { display: grid; gap: 10px; margin: 26px 0; text-align: left; }
.finish-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.finish-row .rank { width: 26px; font-family: "Space Grotesk", sans-serif; font-size: 20px; color: var(--muted); }
.finish-row b { flex: 1; }
.finish-row .pts { font-family: "Space Grotesk", sans-serif; font-size: 22px; color: var(--yellow); }
.finish-row em { font-style: normal; color: var(--muted); font-size: 14px; }
.finish-row.is-winner { border-color: rgba(240,180,41,.5); box-shadow: 0 0 30px rgba(240,180,41,.14); }

.finish-signup {
  margin: 22px 0 6px;
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(240,180,41,.34);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(240,180,41,.16), transparent 62%),
    var(--surface);
  box-shadow: 0 0 44px rgba(240,180,41,.12);
  text-align: center;
}
.finish-signup h2 { margin: 0 0 8px; font-size: clamp(21px, 3.4vw, 27px); letter-spacing: -.01em; }
.finish-signup p { margin: 0 auto 18px; max-width: 46ch; color: var(--muted); }

/* ------------------------------------------------------------- responsive */
/* The pair stays side by side on a phone. Stacking it would put one option
   below the fold, and a choice you have to scroll to see is not a choice
   between two things — it is two questions. The cards simply get narrower. */
@media (max-width: 760px) {
  .duel { gap: 10px; }
  .duel-or { font-size: 14px; }
  .opt { border-radius: 16px; }
  .opt-body { padding: 12px 12px 14px; }
  .opt-name { font-size: 16px; }
  .opt-credit { display: none; }
  .payoff { padding: 16px; font-size: 16px; }
  .lobby-cols { grid-template-columns: 1fr; }

  /* Two narrow columns make a square picture small, and a small picture is a
     small tap target for the only two things on the screen worth tapping. On a
     phone the picture is sized off the viewport instead, so the pair fills the
     hand rather than sitting in the top third of it. */
  .opt-shot { aspect-ratio: auto; height: min(44vh, 320px); }
}