/* My 50's Life -- hand-written CSS, no build step, no framework.
   Palette is period: cream, teal, coral, brass, charcoal. */

:root {
  --color-bg: #f4ece0;
  --color-surface: #fffaf1;
  --color-surface-alt: #ece0cd;
  --color-text: #241f1b;
  --color-text-muted: #6b5f52;
  --color-border: #cbb9a0;
  --color-primary: #1f7a75;
  --color-primary-hover: #17605c;
  --color-accent: #d4573f;
  --color-accent-hover: #b8452f;
  --color-brass: #b8894a;
  --color-danger: #a8322a;
  --color-success: #3f7a45;
  --color-wealth: #b8894a;
  --color-knowledge: #3b6ea8;
  --color-happiness: #d4573f;
  --shadow: 0 2px 0 var(--color-border), 0 6px 18px rgba(36, 31, 27, 0.12);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171a1c;
    --color-surface: #21262a;
    --color-surface-alt: #2b3136;
    --color-text: #f2ece2;
    --color-text-muted: #a79c8d;
    --color-border: #3d454b;
    --color-primary: #4bc0b8;
    --color-primary-hover: #6fd4cd;
    --color-accent: #ef7a5f;
    --color-accent-hover: #ff9276;
    --color-brass: #d6a765;
    --color-danger: #e2685e;
    --color-success: #6bbf72;
    --color-wealth: #d6a765;
    --color-knowledge: #6fa8e0;
    --color-happiness: #ef7a5f;
    --shadow: 0 2px 0 #000, 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
}

a {
  color: var(--color-primary);
}

/* --- shared shell --------------------------------------------------------- */

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.card + .card {
  margin-top: 1.25rem;
}

.muted {
  color: var(--color-text-muted);
}

.tagline {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.rule {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-accent) 0 18px,
    var(--color-primary) 18px 36px
  );
  border-radius: 2px;
  margin: 1.25rem 0;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- forms ---------------------------------------------------------------- */

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Every text-entry control is styled together. Listing only text and
   password left email inputs, number inputs, selects and the contact
   textarea on browser defaults, which is why they read as unfinished
   beside the buttons -- the era this game is set in did not do bland. */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  font: inherit;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  /* The same seated look the cards and buttons have. */
  box-shadow: inset 0 2px 0 rgba(36, 31, 27, 0.06);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea {
  display: block;
  min-height: 8rem;
  resize: vertical;
  line-height: 1.5;
}

/* The arrow is drawn here rather than fetched, so the control still has one
   with the native appearance turned off and no request goes out for it. */
select {
  appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    right 1.15rem top 55%,
    right 0.85rem top 55%;
  background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-text-muted);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 2px 0 rgba(36, 31, 27, 0.06),
              0 0 0 3px rgba(31, 122, 117, 0.18);
  outline: none;
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 1.05rem;
  height: 1.05rem;
}

input[type="range"] {
  accent-color: var(--color-primary);
}

/* Focus-visible still wins for keyboard users, over the softer focus ring. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
.avatar-option:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.field + .field {
  margin-top: 1rem;
}

.error {
  color: var(--color-danger);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* --- avatar picker -------------------------------------------------------- */

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.avatar-option {
  position: relative;
  display: block;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  padding: 0.6rem;
  cursor: pointer;
  text-align: center;
}

.avatar-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.avatar-option[data-taken="true"] {
  opacity: 0.4;
}

.avatar-swatch {
  width: 100%;
  height: 4.5rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

.avatar-name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

/* --- controller (phone) --------------------------------------------------- */

/* --- the phone controller ------------------------------------------------- */

/* A controller is a game pad, not a document, and every browser gesture that
   treats it as a document is a bug in the middle of somebody's turn.
   `overscroll-behavior: none` is the one that matters: on Chrome for Android
   a downward swipe on a non-scrolling page triggers pull-to-refresh, which
   reloads the controller mid-question. It has to be set on the element that
   defines the viewport, hence the `:has()` on `html` as well as the body.
   The horizontal half stops an edge swipe from navigating back. */

html:has(body.controller-body),
body.controller-body {
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden;
}

body.controller-body {
  /* No double-tap zoom and no 300ms wait before a tap registers. */
  touch-action: manipulation;
  /* A long press on a button should not offer to copy its label. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Anything a player genuinely types into stays selectable. */
body.controller-body input,
body.controller-body textarea {
  -webkit-user-select: text;
  user-select: text;
}

.controller {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Clear of the notch, the rounded corners and the home indicator. */
  padding:
    calc(0.9rem + env(safe-area-inset-top))
    calc(0.9rem + env(safe-area-inset-right))
    calc(0.9rem + env(safe-area-inset-bottom))
    calc(0.9rem + env(safe-area-inset-left));
}


.ctl-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
}

.ctl-chip {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid var(--color-border);
}

.ctl-name {
  font-weight: 800;
}

.ctl-tracks {
  display: flex;
  gap: 0.4rem;
  font-size: 0.78rem;
  margin-left: auto;
  text-align: right;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.track {
  font-weight: 700;
  white-space: nowrap;
}

.track-wealth { color: var(--color-wealth); }
.track-knowledge { color: var(--color-knowledge); }
.track-happiness { color: var(--color-happiness); }

.ctl-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  /* The prompt is the only thing on the controller that scrolls, and its
     scrolling never escapes to the page behind it -- which is the other
     half of keeping a stray swipe from reloading the game. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ctl-status {
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 2rem 1rem;
}

.ctl-prompt {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.ctl-choices {
  display: grid;
  gap: 0.6rem;
}

.choice-btn {
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 1rem;
  min-height: 3.6rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.choice-btn:active {
  background: var(--color-surface-alt);
}

.choice-effects {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.distance-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.distance-btn {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 1rem 0;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}

/* With previews the buttons carry a label, so they need room to say it and
   two to a row rather than five. */

.distance-grid.is-detailed {
  grid-template-columns: repeat(2, 1fr);
}

.distance-btn.is-detailed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
  line-height: 1.25;
}

.distance-btn .distance-n {
  font-size: 1.25rem;
  font-weight: 800;
}

.distance-btn .distance-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}

.distance-btn .distance-extra {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-wealth);
}

/* The space kinds worth spotting from across a room. */

.distance-btn.kind-payday {
  border-color: var(--color-wealth);
  color: var(--color-wealth);
}

.distance-btn.kind-gated {
  border-color: var(--color-brass);
  color: var(--color-brass);
}

.distance-btn.kind-contest {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.distance-btn.kind-goal {
  border-color: var(--color-knowledge);
  color: var(--color-knowledge);
}

.distance-btn.kind-junction,
.distance-btn.kind-finish {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
}

.method-grid {
  display: grid;
  gap: 0.75rem;
}

.method-btn {
  font: inherit;
  padding: 1.4rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.method-btn strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
}

.method-btn span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.method-btn.is-dice { border-color: var(--color-primary); }
.method-btn.is-skill { border-color: var(--color-accent); }

.verdict {
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: var(--radius);
}

.verdict-correct { background: var(--color-success); color: #fff; }
.verdict-near { background: var(--color-brass); color: #fff; }
.verdict-far { background: var(--color-danger); color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 50;
  max-width: calc(100vw - 2rem);
}

/* --- big screen ----------------------------------------------------------- */

body.display-body {
  overflow: hidden;
  background: #0d1113;
}

#scene {
  position: fixed;
  inset: 0;
  display: block;
}

.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-family: system-ui, sans-serif;
}

.hud {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hud-player {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(14, 18, 20, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-left-width: 6px;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  color: #f2ece2;
  min-width: 20rem;
}

.hud-player.is-active {
  border-color: #f0d264;
  box-shadow: 0 0 0 2px rgba(240, 210, 100, 0.35);
}

.hud-player .hud-name {
  font-weight: 800;
  font-size: 1.05rem;
}

.hud-player .hud-stats {
  margin-left: auto;
  display: flex;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Sound controls. They sit above the lobby panel so the same control works
   before, during and after a game. The big screen is dark in both themes,
   so these colors are stated rather than drawn from the palette tokens. */

.sound-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.6rem 0.85rem;
  background: rgba(14, 18, 20, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #f2ece2;
}

.sound-toggle {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #f2ece2;
}

.sound-toggle:hover {
  border-color: #f0d264;
}

.sound-toggle.is-muted {
  border-color: #ef7a5f;
  color: #ef7a5f;
}

.sound-level {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a79c8d;
}

.sound-level input[type="range"] {
  width: 7rem;
  accent-color: #f0d264;
}

.banner {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  background: rgba(14, 18, 20, 0.9);
  border: 2px solid #f0d264;
  border-radius: 10px;
  color: #f2ece2;
  padding: 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  max-width: 70vw;
}

.ticker {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: min(34rem, 40vw);
  background: rgba(14, 18, 20, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #d8d2c6;
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  max-height: 9rem;
  overflow: hidden;
}

.ticker div + div {
  margin-top: 0.2rem;
}

.question-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(52rem, 80vw);
  background: rgba(14, 18, 20, 0.94);
  border: 3px solid #4bc0b8;
  border-radius: 14px;
  color: #f7f2e8;
  padding: 2rem;
  text-align: center;
}

.question-card .q-subject {
  color: #f0d264;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

.question-card .q-prompt {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.35;
}

.question-card .q-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.question-card .q-option {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.event-card {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: min(30rem, 34vw);
  background: rgba(14, 18, 20, 0.94);
  border: 3px solid #ef7a5f;
  border-radius: 14px;
  color: #f7f2e8;
  padding: 1.5rem;
}

.event-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  color: #f0d264;
}

.event-card p {
  font-size: 1.05rem;
  line-height: 1.5;
}

.event-card ol {
  margin: 1rem 0 0 1.1rem;
  font-size: 0.98rem;
}

.event-card li + li {
  margin-top: 0.4rem;
}

.lobby-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background: rgba(9, 12, 14, 0.9);
  color: #f7f2e8;
  pointer-events: auto;
  padding: 2rem;
  flex-wrap: wrap;
}

.lobby-panel .qr {
  background: #fffaf1;
  padding: 1rem;
  border-radius: 12px;
  width: 18rem;
  height: 18rem;
}

.lobby-panel .qr svg {
  width: 100%;
  height: 100%;
}

.lobby-code {
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #f0d264;
  line-height: 1;
}

.lobby-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
  max-width: 32rem;
}

.roster-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  font-weight: 700;
}

.roster-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* Recenter. Top right is the only corner the game does not already use: the
   HUD holds top left, the banner top center, the log bottom left and the sound
   controls bottom right. Deliberately quiet -- it is a way out of a pan, not a
   feature to advertise, and it is only on screen while a pan is in effect. */
.recenter-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  color: #e8e0d2;
  background: rgba(14, 18, 20, 0.66);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease;
}

.recenter-btn:hover,
.recenter-btn:focus-visible {
  opacity: 1;
  color: #f0d264;
  border-color: #f0d264;
}

.recenter-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.recenter-btn svg .pip {
  fill: currentColor;
  stroke: none;
}

.standings {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 14, 0.94);
  color: #f7f2e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: auto;
  overflow-y: auto;
}

.standings table {
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.standings th,
.standings td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.standings tr:first-child td {
  color: #f0d264;
  font-weight: 800;
}

.hidden {
  display: none !important;
}

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

/* --- resuming a game ------------------------------------------------------ */

.resume-list {
  margin: 0 0 1.25rem;
}

.resume-list h3 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.resume-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.resume-row:hover {
  border-color: var(--color-primary);
}

.resume-code {
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  color: var(--color-primary);
}

.resume-detail {
  font-size: 0.88rem;
  font-weight: 600;
}

.resume-go {
  margin-left: auto;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Taking a seat back in a game already under way. */

.seat-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.seat-btn {
  font: inherit;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.seat-btn:hover {
  border-color: var(--color-primary);
}

.seat-chip {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid var(--color-border);
}

.seat-name {
  font-weight: 800;
}

.seat-take {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- host menubar --------------------------------------------------------- */
/* Sits above the hero, dark against the board art below it, so a signed-in
   host has one place for account and console links. */

.menubar {
  background: #171a1c;
  color: #f2ece2;
  border-bottom: 3px solid var(--color-brass);
}

.menubar-inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.menubar-brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f2ece2;
  text-decoration: none;
}

.menubar-brand:hover {
  color: #4bc0b8;
}

.menubar-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.menubar-links a {
  color: #d8cfc1;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.menubar-links a:hover {
  color: #f2ece2;
  border-bottom-color: var(--color-brass);
}

.menubar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
}

.menubar-name {
  color: #a79c8d;
  font-weight: 700;
}

.menubar-user form {
  display: inline;
}

.menubar-user .linkish {
  color: #4bc0b8;
  font-weight: 700;
}

@media (max-width: 34rem) {
  .menubar-user {
    margin-left: 0;
    width: 100%;
  }
}

/* --- landing page --------------------------------------------------------- */

/* Deep teal, and no board.
   A hand-faked board used to fill this header, which meant the first thing the
   page showed was a board the generator would never produce -- advertising the
   wrong game to anybody who then played it. The type was never legible over it
   without a scrim heavy enough to hide most of it anyway, so the scrim is now
   simply the background, with a brass glow where the sun used to be. */
.landing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38% 46% at 88% 6%, rgba(240, 210, 100, 0.24) 0%,
                                       rgba(240, 210, 100, 0) 100%),
    radial-gradient(110% 80% at 10% 0%, #16414a 0%, rgba(22, 65, 74, 0) 62%),
    linear-gradient(165deg, #103038 0%, #0b2026 58%, #123840 100%);
  color: #f7f2e8;
  /* Deep enough that the overlapping card below still sits on the hero. */
  padding: 3.5rem 0 7rem;
  border-bottom: 6px solid var(--color-accent);
}

.landing-hero .wrap {
  position: relative;
  z-index: 1;
}

/* --- countdown ------------------------------------------------------------ */

.countdown {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.count-cell {
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(240, 210, 100, 0.45);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  text-align: center;
  min-width: 4.4rem;
}

.count-n {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  color: #f0d264;
  font-variant-numeric: tabular-nums;
}

.count-l {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(247, 242, 232, 0.8);
  margin-top: 0.2rem;
}

.countdown-note {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: rgba(247, 242, 232, 0.78);
}

.beta-card {
  border-color: var(--color-accent);
  border-width: 3px;
}


.landing-hero h1 {
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  letter-spacing: -0.02em;
}

.landing-hero .wrap {
  padding-bottom: 0;
}

.beta-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.hero-line {
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 600;
  margin-top: 0.75rem;
  color: #f0d264;
}

.hero-sub {
  margin-top: 1rem;
  max-width: 34rem;
  color: rgba(247, 242, 232, 0.85);
}

/* The card overlaps the hero on purpose, but it has to land inside the
   colored band with air on both sides -- flush against the accent rule it
   reads as a collision rather than a layer. */
.join-card {
  position: relative;
  margin-top: -3.25rem;
}

.landing-hero + .wrap {
  padding-top: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.feature h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--color-primary);
}

.feature p {
  font-size: 0.95rem;
}

.host-card {
  border-color: var(--color-primary);
  border-width: 3px;
}

.footer-note {
  margin-top: 3rem;
  font-size: 0.88rem;
  text-align: center;
}

/* --- legal pages and footer ----------------------------------------------- */

.legal-content h2 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.5rem;
  color: var(--color-primary);
}

.legal-content p,
.legal-content ul {
  margin-bottom: 0.75rem;
}

.legal-content ul {
  padding-left: 1.4rem;
}

.legal-content li {
  margin-bottom: 0.3rem;
}

.site-footer {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer p {
  margin-bottom: 0.4rem;
}

.site-footer span {
  color: var(--color-text-muted);
  margin: 0 0.4rem;
}

/* --- utilities ------------------------------------------------------------ */

.u-hide { display: none !important; }

.u-visually-hidden,
.form-aux {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-nowrap { white-space: nowrap; }

.u-right { text-align: right; }

/* A duel is the one prompt two phones hold at once, so it is marked as
   clearly as the milestone prompts are. */

.duel-tag {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.ctl-prompt.is-duel {
  border-color: var(--color-accent);
}

.milestone-tag {
  display: inline-block;
  background: var(--color-brass);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

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

.vote-block {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
}

.vote-block.is-agreed {
  border-color: var(--color-success);
}

.vote-question {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.vote-choices {
  display: grid;
  gap: 0.4rem;
}

.vote-btn {
  font: inherit;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.vote-btn.is-picked {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.vote-label {
  font-weight: 700;
  display: block;
}

.vote-count {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
}

.ctl-status.agreed {
  color: var(--color-success);
}

.lobby-options {
  margin: 0.75rem 0 1rem;
  max-width: 32rem;
}

.opt-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.opt-row.is-agreed .opt-label {
  color: #6bbf72;
}

.opt-label {
  flex: 0 0 13rem;
  color: #a79c8d;
}

.opt-choice {
  margin-right: 0.7rem;
  color: #d8d2c6;
}

.opt-choice.is-settled {
  color: #f0d264;
  font-weight: 700;
}

/* --- management console --------------------------------------------------- */

body.console-body {
  background: var(--color-bg);
}

.console {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

.console-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: 1.5rem;
}

.console-brand {
  font-weight: 900;
  text-decoration: none;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.console-nav {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.console-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.console-nav a.is-active {
  color: var(--color-accent);
}

.console-user {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.linkish {
  background: none;
  border: 0;
  font: inherit;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.flash {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-success);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.panel {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
}

.panel h2 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.stat {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem;
  text-align: center;
}

.stat-n {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--color-primary);
}

.stat-l {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.grid th,
table.grid td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

table.grid th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.inline-form input {
  width: auto;
  flex: 1 1 10rem;
}

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.codebox {
  background: var(--color-surface-alt);
  border-radius: 6px;
  padding: 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  overflow-x: auto;
  max-height: 22rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.logbox {
  font-size: 0.85rem;
  max-height: 22rem;
  overflow-y: auto;
}

.logbox div {
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--color-border);
}

.qr-block {
  background: #fffaf1;
  padding: 0.75rem;
  border-radius: 8px;
  width: 15rem;
  height: 15rem;
}

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

.ok { color: var(--color-success); font-weight: 800; }
.bad { color: var(--color-danger); font-weight: 800; }

.draft ol { margin: 0.6rem 0 0.9rem 1.2rem; }