/* 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;
}

.diff-row.is-empty .diff-card,
.diff-row.is-empty .diff-label { visibility: hidden; }

.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); }

.diff-row.is-empty .diff-card,
.diff-row.is-empty .diff-label { visibility: hidden; }

/* 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-label { 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 entire diff-row, but
   bring it back at reveal to host the round-winner announcement. */
body[data-gameplay="guess"] .diff-row { display: none; }
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);
}

/* (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);
}

/* ===== How to play ===== */
.how-to {
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.how-to-summary {
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}

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

.how-to-body {
  padding: 0 14px 14px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.how-to-body ol {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Mode-tagged sections — only the one matching the current Game Mode shows */
.how-to-mode-tag {
  display: inline-block;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  background: #3abbc0;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

body[data-gameplay="target"] .how-to-guess { display: none; }
body[data-gameplay="guess"] .how-to-target { display: none; }

/* ===== 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);
}