:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f0c;
  --card: #171a15;
  --ink: #f3ebdd;
  --muted: #b8b6ad;
  --line: #3a4035;
  --strong-line: #9aa58f;
  --accent: #a8d672;
  --accent-soft: #26351f;
  --warm: #efb37f;
  --danger: #ff9b91;
  --blue: #86c7e8;
  --shadow: 0 12px 40px rgba(0, 0, 0, .32);
}

html,
body,
.app-shell,
main {
  background: var(--bg);
}

html,
body {
  min-height: 100%;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.game-theme-toggle {
  display: none;
  position: fixed;
  z-index: 170;
  top: max(8px, env(safe-area-inset-top));
  right: 12px;
}

body.game-focus .game-theme-toggle {
  display: block;
}

body.game-focus,
body.game-focus .app-shell,
body.game-focus main,
body.game-focus .page.active,
body.game-focus .game-mount,
body.game-focus .game-shell,
body.game-focus .spectate-shell {
  background: var(--bg);
}

:root[data-theme="dark"] body {
  background-color: var(--bg) !important;
}

:root[data-theme="dark"] .topbar {
  background: rgba(13, 15, 12, .95);
}

:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .race-card,
:root[data-theme="dark"] .profile-pill,
:root[data-theme="dark"] .status-badge,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .focus-racer,
:root[data-theme="dark"] .reaction-row button {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .racer {
  background: #20241d;
}

:root[data-theme="dark"] .racer.me {
  background: var(--accent-soft);
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] input {
  background: #20241d;
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .primary {
  background: var(--accent);
  color: #10130d;
}

:root[data-theme="dark"] .secondary {
  background: #294226;
  color: #e9f5dc;
}

:root[data-theme="dark"] .ghost {
  background: #272c24;
  color: var(--ink);
}

:root[data-theme="dark"] .danger-button {
  background: #442825;
  color: #ffc1bb;
}

:root[data-theme="dark"] .board,
:root[data-theme="dark"] .spectator-board {
  background: var(--strong-line);
  border-color: var(--strong-line);
}

:root[data-theme="dark"] .cell,
:root[data-theme="dark"] .cell.peer,
:root[data-theme="dark"] .cell.same-number,
:root[data-theme="dark"] .cell.wrong,
:root[data-theme="dark"] .spectator-cell {
  background: #151814;
  color: var(--blue);
  border-color: #384035;
}

:root[data-theme="dark"] .cell.given,
:root[data-theme="dark"] .cell.given.peer,
:root[data-theme="dark"] .cell.given.same-number,
:root[data-theme="dark"] .cell.given.wrong,
:root[data-theme="dark"] .spectator-cell.given {
  background: #22261f;
  color: var(--ink);
}

:root[data-theme="dark"] .cell.selected,
:root[data-theme="dark"] .cell.given.selected {
  background: #3c522f;
  box-shadow: inset 0 0 0 2px var(--accent);
}

:root[data-theme="dark"] .notes {
  color: #b7cbbd;
}

:root[data-theme="dark"] .number-pad button {
  background: #222720;
  color: var(--blue);
  border: 1px solid #343b31;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
}

:root[data-theme="dark"] .tool-row button {
  background: #2b3028;
  color: var(--ink);
  border: 1px solid #363d33;
}

:root[data-theme="dark"] .tool-row button.active {
  background: var(--accent);
  color: #10130d;
}

:root[data-theme="dark"] .bottom-nav {
  background: rgba(18, 21, 17, .97);
  border-color: var(--line);
}

:root[data-theme="dark"] .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

:root[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, .72);
}

:root[data-theme="dark"] .modal-card {
  background: var(--card);
}

:root[data-theme="dark"] .profile-choice.liam {
  background: #263b46;
  color: #eef8fc;
}

:root[data-theme="dark"] .profile-choice.sofi {
  background: #49302b;
  color: #fff0eb;
}

:root[data-theme="dark"] .profile-choice span {
  background: rgba(255, 255, 255, .1);
}

:root[data-theme="dark"] .stat-box {
  background: var(--card);
  border-color: var(--line);
}

:root[data-theme="dark"] .progress {
  background: rgba(255, 255, 255, .14);
}

:root[data-theme="dark"] .progress > span {
  background: var(--accent);
}

:root[data-theme="dark"] .countdown {
  background: rgba(8, 9, 7, .95);
}

:root[data-theme="dark"] .toast {
  background: var(--ink);
  color: #11130f;
}

:root[data-theme="dark"] .reaction-bubble {
  background: rgba(23, 26, 21, .98);
  border-color: var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.spectator-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1;
  background: var(--strong-line);
  border: 2px solid var(--strong-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.spectator-cell {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 700;
}

.spectator-cell.given {
  background: #fbfaf6;
  color: var(--ink);
  font-weight: 850;
}

.spectator-cell.box-right {
  border-right: 2px solid var(--strong-line);
}

.spectator-cell.box-bottom {
  border-bottom: 2px solid var(--strong-line);
}

.spectator-cell:nth-child(9n) {
  border-right: 0;
}

.spectator-cell:nth-child(n+73) {
  border-bottom: 0;
}

.spectate-board-wrap {
  width: min(calc(100vw - 24px), 560px);
  margin: 0 auto;
}

@media (max-width: 430px) {
  .topbar-actions {
    gap: 5px;
  }

  .theme-toggle,
  .profile-pill {
    padding-left: 10px;
    padding-right: 10px;
  }
}