:root {
  --bg-day:       #f0f2f5;
  --bg-night:     #1a1a2e;
  --surface:      #ffffff;
  --surface-dark: #16213e;
  --faithful:     #2196F3;
  --traitor:      #c62828;
  --success:      #43a047;
  --danger:       #e53935;
  --text:         #2d3436;
  --text-light:   #ecf0f1;
  --text-muted:   #636e72;
  --border:       #dfe6e9;
  --shadow:       rgba(0,0,0,0.1);
}

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

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-day);
  color: var(--text);
  min-height: 100dvh;
  transition: background 0.4s, color 0.4s;
  line-height: 1.5;
}

body.night {
  background: var(--bg-night);
  color: var(--text-light);
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page--wide {
  max-width: 900px;
}

header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

body.night header {
  background: var(--surface-dark);
  border-color: #2e3a5a;
}

header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--day   { background: #fff3cd; color: #856404; }
.badge--night { background: #2e3a5a; color: #93c5fd; }
.badge--round { background: var(--border); color: var(--text-muted); }

/* ─── Cards / Surfaces ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px var(--shadow);
}

body.night .card {
  background: var(--surface-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.card__title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

body.night .card__title { color: #8892a4; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

button:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--faithful);
  color: #fff;
  width: 100%;
}

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

.btn--success {
  background: var(--success);
  color: #fff;
}

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

body.night .btn--ghost {
  border-color: #2e3a5a;
  color: var(--text-light);
}

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

.btn--xl {
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  min-height: 56px;
}

.action-btn {
  width: 100%;
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--faithful);
  color: #fff;
  margin-top: 0.5rem;
}

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

/* ─── Forms ───────────────────────────────────────────────────────────────── */

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

input[type="text"],
input[type="number"] {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
  min-height: 48px;
}

input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--faithful);
}

body.night input {
  background: #1e2d4a;
  border-color: #2e3a5a;
  color: var(--text-light);
}

.field { margin-bottom: 1rem; }

/* ─── Player list items ────────────────────────────────────────────────────── */

.player-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.4rem;
  background: var(--surface);
}

body.night .player-item {
  background: var(--surface-dark);
}

.player-item:hover { border-color: var(--faithful); }
.player-item.selected {
  border-color: var(--faithful);
  background: #e3f2fd;
}
body.night .player-item.selected { background: #1a2a4a; }

.player-item.traitor-item { border-color: var(--traitor) !important; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.dot.online   { background: var(--success); }
.dot.offline  { background: #ccc; }
.dot.banished { background: var(--danger); }
.dot.murdered { background: #333; }

.player-name {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
}

.player-role-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 4px;
}

.role-faithful { background: #e3f2fd; color: var(--faithful); }
.role-traitor  { background: #ffebee; color: var(--traitor); }

/* ─── Role reveal ─────────────────────────────────────────────────────────── */

.role-reveal {
  text-align: center;
  padding: 2rem 1rem;
}

.role-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1rem;
}

.role-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.role-title.faithful { color: var(--faithful); }
.role-title.traitor  { color: var(--traitor); }

.role-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

body.night .role-subtitle { color: #8892a4; }

/* ─── Status feed ─────────────────────────────────────────────────────────── */

.feed-item {
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--border);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.feed-item.banished { border-color: var(--danger); }
.feed-item.murdered { border-color: #333; }
.feed-item.phase    { border-color: var(--faithful); font-weight: 600; }

body.night .feed-item { border-color: #2e3a5a; }
body.night .feed-item.banished { border-color: var(--danger); }
body.night .feed-item.murdered { border-color: #6b7280; }
body.night .feed-item.phase    { border-color: #4a90d9; }

/* ─── Vote tally table ─────────────────────────────────────────────────────── */

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

.tally-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}

body.night .tally-table th {
  border-color: #2e3a5a;
  color: #8892a4;
}

.tally-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

body.night .tally-table td { border-color: #1e2d4a; }

.tally-table tr.leading td { font-weight: 700; background: #fff9c4; }
body.night .tally-table tr.leading td { background: #2a2010; }

/* ─── Waiting / atmospheric ────────────────────────────────────────────────── */

.waiting {
  text-align: center;
  padding: 3rem 1rem;
}

.waiting__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.waiting__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.waiting__sub {
  color: var(--text-muted);
  font-size: 0.95rem;
}

body.night .waiting__sub { color: #8892a4; }

/* ─── Vote progress bar ────────────────────────────────────────────────────── */

.vote-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.vote-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

body.night .vote-bar-wrap { background: #2e3a5a; }

.vote-bar {
  height: 100%;
  background: var(--faithful);
  border-radius: 4px;
  transition: width 0.3s;
}

.vote-count-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

body.night .vote-count-text { color: #8892a4; }

/* ─── QR projector ─────────────────────────────────────────────────────────── */

.qr-projector {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.qr-projector.active { display: flex; }

.qr-projector svg {
  max-width: min(80vw, 80vh);
  height: auto;
}

.qr-projector .qr-label {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.qr-projector .qr-url {
  color: #aaa;
  font-size: 1rem;
  text-align: center;
  word-break: break-all;
}

.qr-controls {
  display: flex;
  gap: 1rem;
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Admin player row (editable name) ─────────────────────────────────────── */

.admin-player-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

body.night .admin-player-row { border-color: #1e2d4a; }

.admin-player-row .name-input {
  border: none;
  background: transparent;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
  padding: 0.1rem 0.25rem;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
  min-height: unset;
}

.admin-player-row .name-input:focus {
  outline: none;
  border-bottom-color: var(--faithful);
}

.status-pill {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 4px;
}

.status-active   { background: #e8f5e9; color: var(--success); }
.status-banished { background: #ffebee; color: var(--danger); }
.status-murdered { background: #f5f5f5; color: #555; }
body.night .status-active   { background: #1b3a1f; }
body.night .status-banished { background: #3a1b1b; }
body.night .status-murdered { background: #222; color: #aaa; }

/* ─── Win banner ───────────────────────────────────────────────────────────── */

.win-banner {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.win-banner.faithfuls {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #0d47a1;
}

.win-banner.traitors {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #b71c1c;
}

.win-banner__icon  { font-size: 3rem; }
.win-banner__title { font-size: 2rem; font-weight: 800; margin: 0.5rem 0; }
.win-banner__sub   { font-size: 1.1rem; opacity: 0.8; }

/* ─── Tie-breaking ─────────────────────────────────────────────────────────── */

.tie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

body.night .tie-option { border-color: #2e3a5a; }

/* ─── Utility ──────────────────────────────────────────────────────────────── */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); font-size: 0.9rem; }
body.night .text-muted { color: #8892a4; }

.hidden { display: none !important; }

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.alert--info    { background: #e3f2fd; color: #0d47a1; }
.alert--warning { background: #fff3cd; color: #856404; }
.alert--danger  { background: #ffebee; color: #b71c1c; }
.alert--success { background: #e8f5e9; color: #1b5e20; }

/* ─── Landing page ─────────────────────────────────────────────────────────── */

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.5rem;
  text-align: center;
}

.landing__logo {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.landing__title {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.landing__sub {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.landing .field {
  width: 100%;
  max-width: 320px;
  text-align: left;
}

.landing input {
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.landing .btn--primary {
  max-width: 320px;
  width: 100%;
  margin-top: 1rem;
}

/* ─── Eliminated view ──────────────────────────────────────────────────────── */

.eliminated-banner {
  text-align: center;
  padding: 1.5rem;
  border-radius: 12px;
  background: #f5f5f5;
  margin-bottom: 1.5rem;
}

body.night .eliminated-banner {
  background: #1e1e1e;
}

.eliminated-banner .icon { font-size: 2.5rem; }
.eliminated-banner .title { font-size: 1.3rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.eliminated-banner .sub   { font-size: 0.9rem; color: var(--text-muted); }
body.night .eliminated-banner .sub { color: #8892a4; }