/* Timer Game — stopwatch challenge. Brand-aligned. */

:root {
  --gof-primary-dark: #157623;
  --gof-primary: #9bca3e;
  --gof-bg-light: #dde5ed;
  --gof-bg-mint: #defff0;
  --gof-accent: #ffb920;
  --gof-warm: #de6739;
  --text-primary: #2f2c28;
  --text-secondary: #5e5c5e;
  --card-bg: #ffffff;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* Stopwatch theme */
  --clock-bg: #0a0d0a;
  --clock-edge: #1b1b1b;
  --clock-glow-green: #9bca3e;
  --clock-glow-green-dim: rgba(155, 202, 62, 0.35);
  --clock-glow-red: #ff5a3e;
  --clock-glow-red-dim: rgba(255, 90, 62, 0.35);
  --clock-glow-amber: #ffb920;
  --clock-glow-amber-dim: rgba(255, 185, 32, 0.35);
}

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

[hidden] { display: none !important; }

body {
  font-family: 'Arimo', sans-serif;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--gof-bg-light) 0%, var(--gof-bg-mint) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* ===== Shared header bar (per HEADER_SPECS) ===== */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 4px 0;
  gap: 12px;
  position: relative;
  z-index: 1100;
}

.header-left { flex: 1; min-width: 0; max-width: 85%; }
.header-right { flex-shrink: 0; min-width: 52px; }

.game-title-wrap { position: relative; display: inline-block; }

.game-title-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}

.game-title-heading {
  margin: 0;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.game-title-chevron {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.game-title-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 160px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
}

.game-title-dropdown[aria-hidden="false"] { display: block; }

.game-nav-link {
  display: block;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid #e2e8f0;
}

.game-nav-link:last-child { border-bottom: none; }
.game-nav-link:hover { background: var(--gof-bg-mint); }

.mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.mode-row .mode-btn {
  appearance: none;
  border: 1.5px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.mode-row .mode-btn[aria-pressed="true"] {
  /* Informational label, not a CTA — teal (brand kit) so green is reserved
     for the action the player is supposed to take */
  background: #3abbc0;
  border-color: #3abbc0;
  color: white;
}

/* ===== Game Mode card (Target vs Guess the Time) — top-level visible card,
   not buried in More Settings (most consequential choice in the game) ===== */
.game-mode-card {
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-mode-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.game-mode-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.gameplay-mode-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gameplay-mode-btn {
  appearance: none;
  border: 1.5px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.gameplay-mode-btn[aria-pressed="true"] {
  background: var(--gof-primary-dark);
  color: white;
}

/* (Meta row / round pill / turn-callout removed in v0.2 — the player name
   lives on the big button now, and the round count surfaces in the More
   Settings summary so the main view stays compact on mobile.) */

/* ===== Twin clocks ===== */
.clocks-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
}

/* Twin row — TARGET + YOUR TIME side-by-side on mobile to save vertical space */
.clocks-twin {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}

.clock-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.clock-label {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.clock-label-target { color: var(--clock-glow-red); }
.clock-label-yours { color: var(--clock-glow-green); }

.digital {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  letter-spacing: 0.05em;
}

.clock-display {
  font-size: clamp(1.3rem, 5.5vw, 2.1rem);
  font-weight: 700;
  background: var(--clock-bg);
  border: 2px solid var(--clock-edge);
  border-radius: 10px;
  padding: 0.25rem 0.4rem;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  min-width: 0;
  text-align: center;
  user-select: none;
}

/* Guess mode: only YOUR TIME shows — let it take the full row width */
body[data-gameplay="guess"] .clocks-twin .clock-row { max-width: min(78vw, 320px); }

/* Glow blur kept small so the digits stay sharp on high-DPI mobile displays
   (heavy text-shadow blur reads as a smear at ~3x device pixel density). */
.clock-target {
  color: var(--clock-glow-red);
  text-shadow: 0 0 2px var(--clock-glow-red);
}

.clock-yours {
  color: var(--clock-glow-green);
  text-shadow: 0 0 2px var(--clock-glow-green);
}

.clock-yours.is-hidden-while-running {
  color: var(--clock-bg);
  text-shadow: none;
}

/* ===== Diff row — visually distinct from the two clocks (white card, dark text) =====
   Always rendered so the START button position never shifts. Content is hidden
   via .is-empty until the player stops; that reserved slot is also where the
   per-state instruction text will live in the next pass. */
.diff-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin-top: 2px;
  min-height: 64px;
  justify-content: center;
}

/* (Old .is-empty visibility rule removed — replaced by the display:none
   defaults further down that drive the three-state slot.) */

.diff-label {
  color: var(--text-secondary);
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.diff-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--text-primary);
  border: 2px solid #cdd5dd;
  border-radius: 10px;
  padding: 5px 12px;
  box-shadow: var(--card-shadow);
  min-width: min(72vw, 260px);
  justify-content: center;
}

.diff-number {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(1.1rem, 4.8vw, 1.6rem);
  color: var(--text-primary);
}

.diff-badge {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  color: white;
  text-transform: uppercase;
}

.diff-badge.is-over { background: var(--gof-warm); }
.diff-badge.is-under { background: var(--gof-primary-dark); }
.diff-badge.is-perfect { background: var(--gof-accent); color: var(--text-primary); }

/* === Three states for the reserved slot ===
   Default (no class)              : tagline + Learn how to play link (shown by default)
   .is-showing-diff                : after a stop — DIFFERENCE card with the delta
   .is-winner-announcement         : at round-over — ROUND WINNER green card
   (.is-empty is kept as a legacy alias for default; same visual result.) */

/* Default + .is-empty: tagline visible, diff hidden */
.diff-row .diff-tagline { display: flex; }
.diff-row .diff-label,
.diff-row .diff-card { display: none; }

/* Showing diff: hide tagline, show label + card */
.diff-row.is-showing-diff .diff-tagline { display: none; }
.diff-row.is-showing-diff .diff-label,
.diff-row.is-showing-diff .diff-card { display: inline-flex; }
.diff-row.is-showing-diff .diff-label { display: inline-block; }

/* Tagline area */
.diff-tagline {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  text-align: center;
}

.diff-tagline-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--gof-primary-dark);
  margin: 0;
  line-height: 1.15;
}

.diff-tagline-sub {
  font-family: 'Arimo', sans-serif;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.3;
}

.diff-tagline-link {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Arimo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3abbc0;
  text-decoration: underline;
  padding: 2px 0 0;
}

.diff-tagline-link:hover { color: var(--gof-primary-dark); }

/* Winner announcement variant — at round-over the reserved slot stops showing
   the last player's delta and instead celebrates the round winner. */
.diff-row.is-winner-announcement .diff-tagline { display: none; }
.diff-row.is-winner-announcement .diff-label,
.diff-row.is-winner-announcement .diff-card { display: inline-flex; }
.diff-row.is-winner-announcement .diff-label { display: inline-block; color: var(--gof-primary-dark); }
.diff-row.is-winner-announcement .diff-card {
  border-color: var(--gof-primary);
  background: var(--gof-bg-mint);
}
.diff-row.is-winner-announcement .diff-number {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  color: var(--gof-primary-dark);
  font-size: clamp(1.05rem, 4.5vw, 1.55rem);
}
.diff-row.is-winner-announcement .diff-badge { display: none; }

/* ===== Guess mode rules ===== */
/* No target exists in Guess mode — hide the TARGET clock row */
body[data-gameplay="guess"] .clock-row:not(.clock-row-yours) { display: none; }

/* Diff card is meaningless before reveal in Guess mode (each player's delta
   shows in the standings table on reveal) — hide the diff-row during running
   and guessing, but show it at the resting "ready" state (so the tagline
   prompts the player) AND at reveal (so the winner announcement fires). */
body[data-gameplay="guess"] .diff-row { display: none; }
body[data-gameplay="guess"][data-phase="ready"] .diff-row,
body[data-gameplay="guess"][data-phase="round-over"] .diff-row,
body[data-gameplay="guess"][data-phase="game-over"] .diff-row {
  display: flex;
}

/* YOUR TIME clock is hidden during run-start / running / guessing phases —
   only revealed when the round is over */
body[data-gameplay="guess"][data-phase="run-start"] .clock-row-yours,
body[data-gameplay="guess"][data-phase="running"] .clock-row-yours,
body[data-gameplay="guess"][data-phase="guessing"] .clock-row-yours {
  visibility: hidden;
}

/* Big button is hidden during the guessing phase only (Submit Guess takes over);
   it returns at round-over/game-over to act as the "Next Round" / "New Game" CTA */
body[data-gameplay="guess"][data-phase="guessing"] .bigbutton-wrap {
  display: none;
}

/* Guess input is only visible during the guessing phase */
.guess-input-wrap { display: none; }
body[data-gameplay="guess"][data-phase="guessing"] .guess-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 1rem 0;
}

.guess-input-prompt {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  text-align: center;
}

.guess-input-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 2px solid var(--gof-primary);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: var(--card-shadow);
}

.guess-step-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Disable browser long-press / iOS callout menu / text selection */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.guess-step-btn:hover { background: var(--gof-bg-mint); }
.guess-step-btn:active { background: var(--gof-primary); color: white; }

.guess-input-row input {
  width: 6ch;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-primary);
  text-align: center;
  -moz-appearance: textfield;
}

.guess-input-row input::-webkit-outer-spin-button,
.guess-input-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.guess-unit {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.guess-input-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: -4px;
}

/* ===== Big button ===== */
.bigbutton-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
}

.big-button {
  appearance: none;
  border: none;
  cursor: pointer;
  width: min(55vw, 205px);
  height: min(55vw, 205px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #c0e26d 0%, var(--gof-primary) 38%, var(--gof-primary-dark) 100%);
  box-shadow:
    0 12px 0 #0e5018,
    0 14px 24px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.35);
  color: white;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.big-button-player {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(0.78rem, 2.9vw, 0.95rem);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  opacity: 0.95;
  max-width: 85%;
  text-align: center;
  line-height: 1.15;
  /* Allow wrap for longer instructions like "Hide score, pass to". The bottom
     label (player name / verb) stays the visually dominant element. */
  white-space: normal;
}

.big-button:active,
.big-button.is-pressed {
  transform: translateY(8px);
  box-shadow:
    0 4px 0 #0e5018,
    0 6px 10px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.35);
}

.big-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.big-button-label {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  letter-spacing: 0.1em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  line-height: 1;
}

.big-button.is-running {
  background: radial-gradient(circle at 30% 28%, #f3a07a 0%, var(--gof-warm) 38%, #94391d 100%);
  box-shadow:
    0 12px 0 #6b2913,
    0 14px 24px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.35);
}

.big-button.is-running:active,
.big-button.is-running.is-pressed {
  box-shadow:
    0 4px 0 #6b2913,
    0 6px 10px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.35);
}

/* Advance buttons (pass / reveal / next round / new game): slate blue-gray so
   they read as neutral "advance" actions, clearly distinct from green START and
   orange STOP. Anything that isn't the timer action itself uses this. Players
   were mistaking the green advance buttons for START. */
.big-button.is-handoff {
  background: radial-gradient(circle at 30% 28%, #c3cdda 0%, #64748b 38%, #3f4b5b 100%);
  box-shadow:
    0 12px 0 #2a3340,
    0 14px 24px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.3);
}

.big-button.is-handoff:active,
.big-button.is-handoff.is-pressed {
  box-shadow:
    0 4px 0 #2a3340,
    0 6px 10px rgba(0, 0, 0, 0.3),
    inset 0 6px 14px rgba(255, 255, 255, 0.3);
}

/* (Round-over card removed — round results consolidated into the standings table.) */

/* ===== Play actions ===== */
.play-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* Action buttons — rounded rectangles, NOT pills, so they read as "click me"
   rather than "label/toggle". Green stays primary; secondary uses a neutral
   outline to be visibly subordinate. */
.primary-btn, .secondary-btn {
  appearance: none;
  cursor: pointer;
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 12px 26px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.primary-btn {
  background: var(--gof-primary-dark);
  color: white;
  border: 2px solid var(--gof-primary-dark);
  box-shadow: 0 3px 0 #0d4a16, 0 4px 12px rgba(21, 118, 35, 0.25);
}

.primary-btn:hover { background: #1a8d2a; }

.primary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0d4a16, 0 2px 6px rgba(21, 118, 35, 0.25);
}

.secondary-btn {
  background: white;
  color: var(--text-primary);
  border: 2px solid #cdd5dd;
}

.secondary-btn:hover { background: #f5f7fa; }

/* ===== Settings panel ===== */
.settings-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0.25rem;
}

.players-details, .more-settings {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.settings-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}

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

.settings-summary-label { flex: 1; }
.settings-summary-value {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
}

.settings-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setup-section { display: flex; flex-direction: column; gap: 8px; }

.setup-label {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.setup-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ===== Consolidated standings + player setup =====
   v0.2: the standalone "# of Players" panel is gone. The Standings table is
   the single source of truth for who's playing, what they scored, and how
   their name reads. +/- to add/remove players sits below the table. Names
   are editable inline via a pencil button next to each name. */
.standings-count-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 0 2px;
  border-top: 1px solid #e2e8f0;
  margin-top: 8px;
}

.standings-count-label {
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  min-width: 80px;
  text-align: center;
}

/* Inline name + pencil edit button in the standings PLAYER column */
.standings-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.name-edit-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 6px;
}

.name-edit-btn:hover { background: var(--gof-bg-mint); color: var(--gof-primary-dark); }
.name-edit-btn svg { display: block; }

.standings-name-input {
  width: 100%;
  max-width: 180px;
  padding: 4px 8px;
  border: 1.5px solid var(--gof-primary);
  border-radius: 6px;
  font-family: 'Arimo', sans-serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(155, 202, 62, 0.25);
}

/* Reset-game link — secondary destructive action, lives below the standings
   count row. Only visible after a round has progressed (set in JS). */
.reset-game-link {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Arimo', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  padding: 6px 0 0;
  align-self: center;
}

.reset-game-link:hover { color: var(--gof-warm); }

.count-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.count-btn:hover:not([disabled]) { background: var(--gof-bg-mint); }
.count-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.count-number {
  min-width: 32px;
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.player-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-name-row .player-num {
  font-family: 'Share Tech Mono', monospace;
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 22px;
}

.player-name-input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #cdd5dd;
  border-radius: 8px;
  font-family: 'Arimo', sans-serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: white;
}

.player-name-input:focus {
  outline: none;
  border-color: var(--gof-primary);
  box-shadow: 0 0 0 3px rgba(155, 202, 62, 0.25);
}

.max-target-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.max-btn {
  appearance: none;
  border: 1.5px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.max-btn[aria-pressed="true"] {
  background: var(--gof-primary-dark);
  color: white;
}

.rounds-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rounds-btn {
  appearance: none;
  border: 1.5px solid var(--gof-primary-dark);
  background: white;
  color: var(--gof-primary-dark);
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.rounds-btn[aria-pressed="true"] {
  background: var(--gof-primary-dark);
  color: white;
}

/* ===== Standings table (below the fold) ===== */
.standings-wrap {
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.standings-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arimo', sans-serif;
  font-size: 0.95rem;
}

.standings-table th {
  text-align: left;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-bottom: 1px solid #e2e8f0;
}

.standings-table th.num,
.standings-table td.num {
  text-align: right;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  color: var(--gof-primary-dark);
}

/* "submitted" badge in the Time column (Guess mode pre-reveal) — reads as a
   status, not as a numeric value */
.standings-table td.submitted-flag {
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gof-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.standings-table td {
  padding: 6px;
  color: var(--text-primary);
  border-bottom: 1px solid #f0f3f6;
}

.standings-table tr:last-child td { border-bottom: none; }

.standings-table tr.is-current td { background: #f0f7e8; }

.standings-table tr.is-leader td { font-weight: 700; }

/* Round winner row — overrides .is-current so the green highlight is unambiguous */
.standings-table tr.is-round-winner td {
  background: var(--gof-bg-mint);
  font-weight: 800;
  color: var(--gof-primary-dark);
  border-left: 4px solid var(--gof-primary);
}

.standings-table tr.is-round-winner td:first-child {
  position: relative;
}

/* ===== Game-over banner ===== */
.game-over-banner {
  width: 100%;
  background: var(--gof-accent);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--card-shadow);
}

.game-over-banner .winner-detail {
  display: block;
  margin-top: 4px;
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* ===== SEO article: full how-to + variations + tips + FAQ.
   Lives in the DOM (collapsed by default) so the content indexes without
   pushing the game off the screen. Pattern matches apps/island/. */
.article {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-section {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Quick start — always-visible intro card at the top of the article */
.article-quick-start {
  padding: 14px 16px;
}

.article-quick-start h2,
.article-section__head h2 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.article-quick-start p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 8px 0 0;
}

/* Collapsible section heads */
.article-section__head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.article-section__head::-webkit-details-marker { display: none; }

.article-chevron {
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.article-section[open] .article-chevron { transform: rotate(180deg); }

.article-body {
  padding: 0 16px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.article-body h3 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 14px 0 4px;
}

.article-body p { margin: 0 0 10px; }
.article-body ol, .article-body ul { margin: 0 0 10px; padding-left: 1.2rem; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--gof-primary-dark); }
.article-body em { font-style: italic; color: var(--text-secondary); }

/* FAQ — slightly more breathing room between Q&A pairs */
.article-faq h3 { margin-top: 16px; }
.article-faq h3:first-child { margin-top: 0; }

/* ===== Footer ===== */
.footer {
  width: 100%;
  padding: 1rem;
  text-align: center;
}

.footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--gof-primary-dark);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover { text-decoration: underline; }

/* ===== Round-over banner ===== */
.round-banner {
  width: 100%;
  background: var(--gof-bg-mint);
  border: 2px solid var(--gof-primary);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  font-family: 'Arimo', sans-serif;
}

.round-banner .banner-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--gof-primary-dark);
  display: block;
  margin-bottom: 4px;
}

.round-banner .banner-detail {
  font-size: 0.9rem;
  color: var(--text-primary);
}