/**
 * Calm night mode for Mootsmog.
 * Soft midnight notebook — muted teal / gold / coral, easy on the eyes.
 * Activated by html.night-mode (toggled via night-mode.js).
 */

html.night-mode {
  color-scheme: dark;

  /* Core chrome */
  --bg: #1b2130;
  --bg-deep: #12161f;
  --panel: rgba(36, 42, 58, 0.82);
  --panel-solid: #262c3d;
  --panel-2: rgba(42, 50, 68, 0.92);
  --text: #e8e2d6;
  --muted: #9aa3b8;
  --accent: #6bb5a8;
  --accent-2: #8fcec4;
  --gold: #c9b07a;
  --coral: #d48972;
  --border: rgba(107, 181, 168, 0.26);
  --border-strong: rgba(143, 206, 196, 0.42);
  --glass-shine: linear-gradient(
    145deg,
    rgba(48, 56, 76, 0.95) 0%,
    rgba(32, 38, 54, 0.78) 42%,
    rgba(24, 28, 40, 0.62) 100%
  );
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.25);
  --ok: #6bb5a8;
  --bad: #d48972;
  --danger: #d48972;
  --x: #e8e2d6;

  /* Puzzle boards */
  --cell: #2a3144;
  --cell-text: #e8e2d6;
  --cell-border: #6bb5a8;
  --cell-active: #355a56;
  --cell-word: #5a4e32;
  --cell-correct: #355a56;
  --cell-wrong: #5c3a34;
  --cell-select: #355a56;
  --cell-found: #355a48;
  --cell-hint: #5a4532;
  --block: #0e121a;
  --board-bg: #1a2030;
  --grid-line: #3a4458;
  --line-select: rgba(107, 181, 168, 0.55);
  --line-found: rgba(107, 181, 168, 0.45);

  /* Eight Queens board */
  --square-light: #2a3548;
  --square-dark: #1e2a38;
  --board-rim: #6bb5a8;
  --board-frame-bg: #243040;
  --queen: #e8e2d6;
  --queen-glow: rgba(107, 181, 168, 0.35);
  --attack: rgba(212, 137, 114, 0.28);
  --attack-mark: rgba(212, 137, 114, 0.55);
  --hover: rgba(107, 181, 168, 0.28);
  --locked: rgba(120, 140, 160, 0.1);

  /* One Stroke / path games */
  --edge: #6a7d90;
  --edge-done: #6bb5a8;
  --edge-active: #8fcec4;
  --node: #2a3144;
  --node-ring: #9aa3b8;
  --node-start: #6bb5a8;
  --node-current: #8fcec4;
  --path: #6bb5a8;
  --player: #8fcec4;
  --start: #6bb5a8;
  --finish: #d4a06a;
  --mark: #c5d0de;
  --flower: #e8e2d6;
  --conflict: rgba(212, 137, 114, 0.4);

  /* Traffic lot stays readable */
  --lot: #1a2230;
  --lot-inner: #232c3c;
  --tile: #3a4658;
  --yellow: #c9b07a;
  --yellow-soft: #3d3828;

  /* Sewer (already dark — calm it slightly) */
  --bg-elevated: #1e2a32;
  --bg-card: #243440;
  --slime: #6bb5a8;
  --slime-bright: #8fcec4;
  --slime-dim: #4a9088;
  --slime-glow: rgba(107, 181, 168, 0.35);
  --rust: #d48972;
  --rust-bright: #c9b07a;
  --text-muted: #9aa3b8;
  --pipe: #3d5a50;
  --pipe-edge: #243830;
  --pipe-shine: #5a8a78;
  --tile-bg: #121a18;
  --tile-border: #1e3028;
}

/* Soft midnight notebook paper */
html.night-mode,
html.night-mode body {
  background-color: #12161f !important;
  color: var(--text);
}

html.night-mode body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M0 0.7 C7 1.45 11 0.12 17 0.78 C23 1.5 27 0.18 34 0.7' fill='none' stroke='%236BB5A8' stroke-opacity='0.14' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M0.7 0 C1.45 7 0.12 11 0.78 17 C1.5 23 0.18 27 0.7 34' fill='none' stroke='%236BB5A8' stroke-opacity='0.14' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 12% -8%, rgba(107, 181, 168, 0.12) 0%, transparent 55%),
    radial-gradient(780px 460px at 94% 8%, rgba(201, 176, 122, 0.1) 0%, transparent 52%),
    radial-gradient(720px 420px at 48% 108%, rgba(212, 137, 114, 0.08) 0%, transparent 58%),
    linear-gradient(180deg, #1a2030 0%, #161b28 42%, #12161f 100%) !important;
  background-size:
    180px 180px,
    34px 34px,
    auto,
    auto,
    auto,
    auto !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: fixed !important;
}

/* ── Toggle button ── */
.ms-night-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-shine);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    background 0.2s ease;
  line-height: 1;
}

.ms-night-toggle:hover {
  border-color: var(--border-strong);
  color: var(--accent-2);
  transform: translateY(-1px);
}

.ms-night-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ms-night-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ms-night-toggle--float {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 40;
}

/* Soften brand gradient text */
html.night-mode .brand,
html.night-mode header h1,
html.night-mode h1 {
  background: linear-gradient(120deg, #6bb5a8 0%, #8fcec4 45%, #c9b07a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Site header / panels that use glass */
html.night-mode .site-header {
  background: var(--panel-solid) !important;
  border: 3px solid #3a4258 !important;
  box-shadow: 5px 5px 0 #d48972 !important;
}

html.night-mode .panel {
  background: var(--panel-solid) !important;
  border: 3px solid #3a4258 !important;
  box-shadow: 5px 5px 0 #6bb5a8 !important;
}

html.night-mode .nav-links a {
  color: var(--muted);
}

html.night-mode .nav-links a:hover {
  color: var(--accent-2);
}

/* Login streak chip */
html.night-mode .login-streak {
  border-color: color-mix(in srgb, var(--coral) 40%, var(--border));
  background: color-mix(in srgb, var(--gold) 18%, var(--panel-solid));
  color: #e8c4b4;
}

html.night-mode .login-streak-label {
  color: color-mix(in srgb, #e8c4b4 80%, var(--muted));
}

/* ── Hub cards (keep punchy personality, calmer night fills) ── */
html.night-mode a.card {
  border-color: #3a4258;
  color: var(--text);
}

html.night-mode a.card:nth-child(4n + 1) {
  background: #2a3144 !important;
  color: #e8e2d6 !important;
  box-shadow: 5px 5px 0 #d48972 !important;
  border-color: #4a5568 !important;
}

html.night-mode a.card:nth-child(4n + 2) {
  background: #3a8f84 !important;
  color: #f3f7f6 !important;
  box-shadow: 5px 5px 0 #2a6a62 !important;
  border-color: #2a6a62 !important;
}

html.night-mode a.card:nth-child(4n + 3) {
  background: #c9b07a !important;
  color: #1a1820 !important;
  box-shadow: 5px 5px 0 #d48972 !important;
  border-color: #3a4258 !important;
}

html.night-mode a.card:nth-child(4n) {
  background: #c4846e !important;
  color: #fff8f4 !important;
  box-shadow: 5px 5px 0 #2a3144 !important;
  border-color: #3a4258 !important;
}

html.night-mode a.card:nth-child(4n + 2) p,
html.night-mode a.card:nth-child(4n) p {
  color: rgba(243, 247, 246, 0.9) !important;
}

html.night-mode a.card:nth-child(4n + 3) p {
  color: #3a3428 !important;
}

html.night-mode a.card .card-icon {
  background: #1a2030 !important;
  border-color: #4a5568 !important;
}

html.night-mode a.card:nth-child(4n + 1) .cta,
html.night-mode a.card .cta {
  border-color: #4a5568;
}

/* Leaderboard + Eight Queens strips — still distinct, softer */
html.night-mode a.card.card-leaderboard {
  background: linear-gradient(145deg, #1a1e2a 0%, #12151e 55%, #0e1016 100%) !important;
  color: #e8ecf0 !important;
  border-color: #3a4258 !important;
  box-shadow: 5px 5px 0 #c9b07a !important;
}

html.night-mode a.card.card-leaderboard:hover,
html.night-mode a.card.card-leaderboard:focus-visible {
  box-shadow: 7px 7px 0 #d48972 !important;
  border-color: #c9b07a !important;
  background: #1a1e2a !important;
}

html.night-mode a.card.card-extreme {
  background: #b44e78 !important;
  color: #fff4f8 !important;
  border-color: #3a4258 !important;
  box-shadow: 5px 5px 0 #7a2a52 !important;
}

html.night-mode a.card.card-extreme:hover,
html.night-mode a.card.card-extreme:focus-visible {
  background: #c45d86 !important;
  box-shadow: 7px 7px 0 #7a2a52 !important;
}

html.night-mode a.card.card-extreme h2 {
  color: #fff4f8 !important;
}

html.night-mode a.card.card-extreme p {
  color: rgba(255, 244, 248, 0.92) !important;
}

html.night-mode a.card.card-extreme .card-icon {
  background: #1a2030 !important;
  border-color: #3a4258 !important;
}

html.night-mode a.card.card-leaderboard .cta {
  background: #d48972 !important;
  color: #fff8f4 !important;
  border: 2px solid #c9b07a !important;
}

html.night-mode a.card.card-extreme .cta,
html.night-mode a.card.card-extreme.is-locked .cta {
  background: #1a2030 !important;
  color: #ffd6e8 !important;
  border-color: #1a2030 !important;
}

html.night-mode a.card.card-extreme.is-unlocked .cta {
  background: #ffd6e8 !important;
  color: #5c1d3c !important;
  border-color: #3a4258 !important;
}

html.night-mode .solved-stamp {
  background: #c9b07a;
  color: #1a1820;
  border-color: #e8e2d6;
  box-shadow: 2px 2px 0 #12161f;
}

/* Hub topbar pills */
html.night-mode .topbar a,
html.night-mode .topbar button {
  background: var(--glass-shine);
  color: var(--text);
  border-color: var(--border);
}

html.night-mode .topbar a[href="/leaderboard"] {
  background: linear-gradient(180deg, #c9b07a, #a89058);
  border-color: color-mix(in srgb, #c9b07a 55%, #5a4820);
  color: #1a1820;
}

html.night-mode .topbar #btn-login,
html.night-mode .hero-kicker {
  border-color: color-mix(in srgb, #d48972 45%, transparent);
}

html.night-mode .hero-kicker {
  background: color-mix(in srgb, #d48972 14%, #1a2030);
  color: #e8b4a4;
}

/* Win modals */
html.night-mode .modal-backdrop,
html.night-mode #win-modal-backdrop,
html.night-mode #result-modal-backdrop,
html.night-mode body > .modal-backdrop,
html.night-mode .app > .modal-backdrop {
  background: rgba(10, 14, 22, 0.62);
}

html.night-mode .modal-card {
  background: rgba(36, 42, 58, 0.96);
  border-color: var(--border);
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Sewer board on cream → calm night board */
html.night-mode .board {
  background: #1a2030 !important;
  border-color: #3a4258 !important;
  box-shadow: 5px 5px 0 #6bb5a8 !important;
}

html.night-mode .setup-card,
html.night-mode .user-bar,
html.night-mode .timer-wrap {
  background: var(--panel-solid) !important;
  border-color: #3a4258 !important;
  box-shadow: 5px 5px 0 #6bb5a8 !important;
  color: var(--text) !important;
}

html.night-mode .seg span,
html.night-mode .diff-body,
html.night-mode .win-stats > div {
  background: var(--panel-solid) !important;
  border-color: #3a4258 !important;
  color: var(--text) !important;
}

/* Crossword clue numbers in cells (hardcoded dark in player.css) */
html.night-mode .cell .num {
  color: #e8e2d6 !important;
}

html.night-mode .clue-list li .n {
  color: #c5ebe4 !important;
}

html.night-mode .cell {
  color: var(--cell-text);
  border-color: #4a5568;
}

/* Common puzzle chrome panels — punchy night stickers */
html.night-mode .panel,
html.night-mode .side,
html.night-mode .clues,
html.night-mode .word-list,
html.night-mode .stats,
html.night-mode .card-panel,
html.night-mode .board-frame,
html.night-mode .hud,
html.night-mode .controls-panel {
  background: var(--panel-solid) !important;
  border: 3px solid #3a4258 !important;
  box-shadow: 5px 5px 0 #6bb5a8 !important;
  color: var(--text);
}

html.night-mode .toolbar,
html.night-mode .btn-row {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
}

html.night-mode .modal-card {
  background: var(--panel-solid) !important;
  border: 3px solid #3a4258 !important;
  box-shadow: 6px 6px 0 #c9b07a !important;
}

html.night-mode button.primary,
html.night-mode .btn-primary {
  background: linear-gradient(180deg, #6bb5a8, #4a9088, #3a7a72) !important;
  border-color: #3a4258 !important;
  color: #f3f7f6 !important;
}

html.night-mode .btn-x-share,
html.night-mode button.btn-x-share,
html.night-mode a.btn-x-share {
  background: linear-gradient(180deg, #c9b07a, #a89058) !important;
  border-color: #3a4258 !important;
  color: #1a1820 !important;
}

html.night-mode .ms-page-actions a,
html.night-mode .ms-page-actions .ms-night-toggle {
  background: var(--glass-shine);
  color: var(--text);
  border-color: var(--border);
}

html.night-mode .ms-page-actions a[href="/leaderboard"] {
  background: linear-gradient(180deg, #c9b07a, #a89058);
  color: #1a1820;
}

html.night-mode .ms-page-actions a[href="/"] {
  background: color-mix(in srgb, #d48972 16%, #1a2030);
  color: #e8b4a4;
  border-color: color-mix(in srgb, #d48972 40%, transparent);
}

html.night-mode .btn,
html.night-mode .btn-link,
html.night-mode button.primary {
  color: inherit;
}

/* Leaderboard page tables / controls */
html.night-mode .lb-table,
html.night-mode table {
  color: var(--text);
}

html.night-mode .lb-table th,
html.night-mode .lb-table td {
  border-color: var(--border);
}

html.night-mode .lb-filters select,
html.night-mode .lb-search,
html.night-mode select,
html.night-mode input[type="search"],
html.night-mode input[type="text"] {
  background: #1e2433 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

html.night-mode .scope-tab {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

html.night-mode .scope-tab.active {
  background: linear-gradient(180deg, #6bb5a8, #4a9088, #3a7a72);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

html.night-mode .panel,
html.night-mode .lb-table-wrap {
  background: var(--panel-solid) !important;
  border-color: var(--border);
}

html.night-mode .avatar.placeholder {
  background: linear-gradient(145deg, #3a4258, #2a3144);
  color: var(--accent-2);
}

/* Prefer soft transitions when toggling */
html.night-mode,
html.night-mode body,
html:not(.night-mode),
html:not(.night-mode) body {
  transition: background-color 0.35s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.night-mode,
  html.night-mode body,
  html:not(.night-mode),
  html:not(.night-mode) body,
  .ms-night-toggle {
    transition: none;
  }
}