:root {
  --bg: #ffffff;
  --text: #17212b;
  --hint: #707579;
  --link: #3390ec;
  --button: #3390ec;
  --button-text: #ffffff;
  --card: #f4f4f5;
  --danger: #e53e3e;
  --success: #2ecc71;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17212b;
    --text: #f5f5f5;
    --hint: #8a97a4;
    --link: #6ab3f3;
    --button: #6ab3f3;
    --button-text: #0e1621;
    --card: #232e3c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Header strips share the content column's width so they line up with the seat list
   instead of running edge-to-edge past it on wide screens. */
#topbar,
.nominated-banner,
.last-action-hint {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid rgba(128,128,128,0.2);
}

/* Day/night marker + round number, e.g. "☀️ 2" — no "Круг" word, like the reference. */
.round-badge {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

#topbar #title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Timer lives top-right in the bar; margin:0 overrides the block version's spacing. */
#topbar-timer {
  margin: 0;
  text-align: right;
  font-size: 30px;
  min-height: 0;
  white-space: nowrap;
}

.link-btn {
  background: none;
  border: none;
  color: var(--link);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
}

.nominated-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  min-height: 44px;
}

.nominated-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  border: 2px solid var(--link);
  color: var(--link);
  font-size: 18px;
  font-weight: 700;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}

.timer-display {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  margin: 12px 0;
  min-height: 48px;
}
.timer-display.warn { color: var(--danger); }

#screen {
  padding: 12px 16px 32px;
  max-width: 720px;
  margin: 0 auto;
}

h2 { font-size: 18px; margin: 4px 0 12px; }
p.hint { color: var(--hint); font-size: 14px; }

.primary-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: none;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.secondary-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid var(--link);
  border-radius: 10px;
  background: transparent;
  color: var(--link);
  font-size: 15px;
  cursor: pointer;
}

/* The seat list is the same table as a result card: fixed columns, thin rules, the
   phase's buttons in a fixed-width cell on the right so they never move between phases. */
.seats-grid {
  margin: 12px 0;
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 10px;
  overflow: hidden;
}

.seats-grid .gc-icon {
  width: 30px;
  padding: 0 2px;
  text-align: center;
  line-height: 0;
}
.seats-grid .gc-icon img,
.seats-grid .gc-icon svg { vertical-align: middle; }

.seats-grid .gc-name { line-height: 1.25; }
.seats-grid .gc-role { width: 72px; color: var(--hint); }
.seats-grid .gc-act {
  width: 92px;
  padding: 2px 4px;
  white-space: nowrap;
  text-align: right;
}
.seats-grid.roles-table .gc-act { width: 156px; }

.seat { background: transparent; }
.seat:nth-child(odd) { background: var(--card); }
.seat.dead { opacity: 0.4; }
.seat.dead .gc-name { text-decoration: line-through; }

/* State is shown by tint/weight only — no outline boxes around the speaking or nominated
   seat; they read as visual noise next to the reference tool's flat rows. */
.seat.selected,
.seat.active-nom { background: rgba(229, 62, 62, 0.12); }
.seat.speaking { font-weight: 600; }

.seat .role {
  display: block;
  min-height: 15px;
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
}

.seat .fouls {
  display: block;
  min-height: 15px;
  font-size: 12px;
  margin-top: 2px;
}

.foul-btn, .thumb-btn {
  flex-shrink: 0;
  width: 40px;
  height: 32px;
  margin: 0 0 0 4px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
}

.foul-btn.has-fouls {
  background: rgba(229, 62, 62, 0.15);
  color: var(--danger);
}

.role-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.role-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--bg);
  font-size: 15px;
  cursor: pointer;
}

.role-icon-btn.active {
  border-color: var(--link);
  background: var(--card);
}

/* Fixed-height header so the action buttons below never shift between phases, however
   much text a phase puts here. Overflow is visible, so an unusually long line still
   reads — it just pushes past the reserved box instead of being clipped. */
.phase-card { margin-bottom: 12px; }

.phase-header {
  /* Fixed, not min-height: a heading that wraps to two lines must not push the buttons
     down, which is exactly what made them jump between phases. Sized to fit the longest
     heading + sub + hint combination in use. */
  height: 108px;
  overflow: hidden;
  padding: 10px 12px;
}

.phase-header h2 {
  margin: 0 0 4px;
  min-height: 22px;
}

.phase-sub {
  font-size: 17px;
  font-weight: 600;
  min-height: 22px;
}

.phase-hint {
  color: var(--hint);
  font-size: 14px;
  min-height: 34px;
  margin-top: 2px;
}

.phase-actions {
  /* padding-top (not margin) so the first button's own top margin can't collapse out of
     this box and shift it; zeroing that margin makes every phase's first button start at
     exactly the same y, whether it's a primary, secondary, or a number picker. */
  padding-top: 8px;
  margin-bottom: 6px;
}

.phase-actions > :first-child {
  margin-top: 0;
}

.number-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

.number-picker button {
  min-width: 52px;
  min-height: 52px;
  padding: 4px 6px;
  border-radius: 10px;
  border: none;
  background: var(--link);
  color: var(--button-text);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.number-picker .np-main { font-size: 18px; line-height: 1; }
/* What the final candidate would auto-receive if this number is picked. */
.number-picker .np-sub { font-size: 10px; opacity: 0.75; line-height: 1; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  margin-left: 6px;
}

input[type="number"] {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid rgba(128,128,128,0.4);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.last-action-hint {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--hint);
  min-height: 24px;
}

.error-text { color: var(--danger); font-size: 14px; }

/* Game day screen: result cards in the shape of the club results table — a coloured
   header banner (red = city won, dark = mafia won) over the seating with roles/points.
   They tile on wide screens and stack on a phone. */
.game-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 12px 16px 24px;
  max-width: 720px;
  margin: 0 auto;
}

.game-card {
  background: var(--card);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.game-card-head {
  padding: 8px 10px;
  color: #fff;
}

.game-card-head.win-city { background: #b02a37; }
.game-card-head.win-mafia { background: #212529; }
.game-card-head.in-progress {
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid rgba(128,128,128,0.25);
}

.game-card-title {
  font-size: 16px;
  font-weight: 700;
}

.game-card-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.game-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.game-card-table td {
  padding: 4px 8px;
  border: 1px solid rgba(128,128,128,0.25);
  white-space: nowrap;
}

/* Fixed columns: the seat number sits in a narrow cell right against the name, and the
   role/points columns keep the same width across every card instead of being re-fitted
   to each card's longest name. */
.game-card-table { table-layout: fixed; }

/* Prefixed classes: the host console already owns .seat/.name/.role globally (the seat
   list styles .seat as a flex row, which quietly broke these table cells). */
.game-card-table .gc-num {
  width: 30px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  color: var(--hint);
}
.game-card-table .gc-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
.game-card-table .gc-role { width: 72px; }
.game-card-table .gc-pts { width: 42px; text-align: right; }

/* The round-0 victim's role cell — green when their best move scored, dark when it missed. */
.game-card-table .gc-role.best-move { background: var(--success); color: #0e1621; }
.game-card-table .gc-role.best-move-missed { background: #212529; color: #fff; }

/* Game day list: same card header as a match card, without a table under it. */
.day-card .game-card-head { border-bottom: none; }
.game-card-head.tournament { background: #6f4d1f; color: #fff; }