:root {
  color-scheme: light;
}

.theme-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text, #0b1220);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

html[dir="rtl"] .theme-toggle {
  right: auto;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), 0 12px 26px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ios-separator: rgba(148, 163, 184, 0.24);
  --ios-separator-strong: rgba(148, 163, 184, 0.34);
  --ios-fill: rgba(51, 65, 85, 0.38);
  --ios-fill-strong: rgba(71, 85, 105, 0.56);
  --ios-label-secondary: rgba(226, 232, 240, 0.74);
  --bg-1: #020617;
  --bg-2: #0f172a;
  --panel: rgba(8, 15, 29, 0.84);
  --panel-soft: rgba(15, 23, 42, 0.72);
  --text: #e5eefb;
  --text-soft: rgba(226, 232, 240, 0.72);
  --bubble-opp: rgba(30, 41, 59, 0.92);
  --bg0: #08111e;
  --bg1: #101a2b;
  --card: rgba(8, 15, 29, 0.82);
  --card2: rgba(15, 23, 42, 0.92);
  --border: rgba(148, 163, 184, 0.18);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 122, 255, 0.28) 0%, transparent 56%),
    radial-gradient(circle at 88% 0%, rgba(175, 82, 222, 0.18) 0%, transparent 48%),
    radial-gradient(circle at 50% 118%, rgba(52, 199, 89, 0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1, #020617), var(--bg-2, #0f172a));
}

:root[data-theme="dark"] .theme-toggle {
  background: rgba(8, 15, 29, 0.86);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text, #e5eefb);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .game,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .category-page-card,
:root[data-theme="dark"] .invite-card,
:root[data-theme="dark"] .end-card,
:root[data-theme="dark"] .overlay-card,
:root[data-theme="dark"] .spectator-overlay-card,
:root[data-theme="dark"] .admin-kpi,
:root[data-theme="dark"] .players-list li,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .cta {
  background: rgba(8, 15, 29, 0.84);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--text);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36);
}

:root[data-theme="dark"] .card:hover {
  border-color: rgba(96, 165, 250, 0.24);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 29, 0.90));
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: rgba(148, 163, 184, 0.68);
}

:root[data-theme="dark"] .secondary-btn,
:root[data-theme="dark"] .watch-link,
:root[data-theme="dark"] .admin-link,
:root[data-theme="dark"] .count-badge,
:root[data-theme="dark"] .me-chip,
:root[data-theme="dark"] .invite-wait-status,
:root[data-theme="dark"] .challenge-visibility-row,
:root[data-theme="dark"] .score-box,
:root[data-theme="dark"] .turn-row,
:root[data-theme="dark"] #timerLabel,
:root[data-theme="dark"] .ready-pill,
:root[data-theme="dark"] .vs-pill {
  background: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--text);
}

:root[data-theme="dark"] .public-game-btn.public-off {
  background: rgba(30, 41, 59, 0.82);
  color: var(--text);
}

:root[data-theme="dark"] .public-game-btn.public-on,
:root[data-theme="dark"] .turn-toast.mine,
:root[data-theme="dark"] .game.turn-self .turn-row,
:root[data-theme="dark"] .ready-pill.ready {
  color: #bbf7d0;
}

:root[data-theme="dark"] .watch-error,
:root[data-theme="dark"] .admin-error,
:root[data-theme="dark"] .chat-message.invalid {
  background: rgba(127, 29, 29, 0.34);
  border-color: rgba(248, 113, 113, 0.36);
  color: #fecaca;
}

:root[data-theme="dark"] .chat-panel,
:root[data-theme="dark"] .category-roller,
:root[data-theme="dark"] .category-roll-window,
:root[data-theme="dark"] .answer-form,
:root[data-theme="dark"] .bar-track,
:root[data-theme="dark"] .stacked-bar {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .category-roller::before {
  background: linear-gradient(180deg, rgba(8, 15, 29, 0.98), rgba(8, 15, 29, 0));
}

:root[data-theme="dark"] .category-roller::after {
  background: linear-gradient(0deg, rgba(8, 15, 29, 0.98), rgba(8, 15, 29, 0));
}

:root[data-theme="dark"] .chat-message.opp,
:root[data-theme="dark"] .chat-message.system,
:root[data-theme="dark"] .lobby-player-row {
  background: rgba(15, 23, 42, 0.84);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .chat-message.opp.correct,
:root[data-theme="dark"] .invite-wait-status,
:root[data-theme="dark"] .round-banner,
:root[data-theme="dark"] .chat-message.system,
:root[data-theme="dark"] .game.turn-opponent .turn-row {
  color: #bfdbfe;
}

:root[data-theme="dark"] .chat-message.opp.correct {
  background: rgba(52, 199, 89, 0.18);
  border-color: rgba(52, 199, 89, 0.34);
  color: #bbf7d0;
}

:root[data-theme="dark"] .chat-message.duplicate {
  background: rgba(120, 53, 15, 0.44);
  border-color: rgba(251, 191, 36, 0.36);
  color: #fde68a;
}

:root[data-theme="dark"] .spectator-overlay,
:root[data-theme="dark"] .invite-modal,
:root[data-theme="dark"] .end-overlay {
  background: rgba(2, 6, 23, 0.72);
}

@media (max-width: 720px) {
  :root[data-theme="dark"] .answer-form {
    background: rgba(8, 15, 29, 0.92);
    border-top-color: rgba(148, 163, 184, 0.18);
  }
}