body.night-reading {
  color-scheme: dark;
  --ink: #f7ead2;
  --mist: #d8c8ac;
  --leaf: #c7dca7;
  --amber: #e9bd74;
  --line: rgba(247, 234, 210, 0.2);
  --panel: rgba(6, 10, 18, 0.9);
  --deep: rgba(6, 10, 18, 0.9);
  --bg: #05070d;
  background:
    radial-gradient(circle at 18% 10%, rgba(199, 220, 167, 0.13), transparent 24rem),
    radial-gradient(circle at 86% 8%, rgba(233, 189, 116, 0.1), transparent 22rem),
    linear-gradient(160deg, #05070d 0%, #09111c 52%, #060f12 100%) !important;
  color: var(--ink);
}

body.night-reading::before {
  opacity: 0.38;
}

body.night-reading .panel,
body.night-reading .post,
body.night-reading .game-shell,
body.night-reading .tile,
body.night-reading .sign,
body.night-reading .rules,
body.night-reading .toy,
body.night-reading .break-shell,
body.night-reading .prompt-card,
body.night-reading .timer-card,
body.night-reading .change-card,
body.night-reading .rollback-note {
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.36);
}

body.night-reading .stage {
  background:
    linear-gradient(rgba(247, 234, 210, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 234, 210, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(199, 220, 167, 0.05), rgba(5, 7, 13, 0.16));
  background-size: 42px 42px, 42px 42px, auto;
}

body.night-reading .moon {
  opacity: 0.68;
  box-shadow: 0 0 36px rgba(233, 189, 116, 0.26);
}

.night-reading-toggle {
  position: fixed;
  z-index: 20;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line, rgba(247, 234, 210, 0.2));
  border-radius: 999px;
  background: rgba(5, 7, 13, 0.82);
  color: var(--ink, #f7ead2);
  font: 700 0.86rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.night-reading-toggle:hover,
.night-reading-toggle:focus-visible {
  border-color: var(--leaf, #c7dca7);
  color: var(--leaf, #c7dca7);
  outline: none;
}

.night-reading-toggle[aria-pressed="true"] {
  background: rgba(199, 220, 167, 0.16);
}

@media (max-width: 640px) {
  .night-reading-toggle {
    position: sticky;
    top: 10px;
    right: auto;
    display: flex;
    width: max-content;
    margin: 10px 10px 0 auto;
  }
}