/* Dark theme and the theme toggle. assets/theme.js sets data-theme on <html> before the page paints:
   the visitor's saved choice if they used the toggle, otherwise their system setting.
   Token names cover both site.css (--surface) and the PvE dashboard's own sheet (--card, --soft, --pve...). */
:root {
  --on-primary: #FFFFFF;
  --up: #15803D;
  --dn: #DC2626;
  --hover: #F0F5FF;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0A1630;
  --surface: #111F3D;
  --card: #111F3D;
  --soft: #172848;
  --ink: #E6EEF8;
  --mute: #9AABC6;
  --line: #26395F;
  --primary: #5B8CFF;
  --on-primary: #0A1630;
  --up: #4ADE80;
  --dn: #F87171;
  --pve: #4ADE80;
  --pvp: #F87171;
  --neu: #FACC15;
  --hover: #1A2C52;
  color-scheme: dark;
}
html[data-theme="dark"] .dots { filter: brightness(1.15); }
html[data-theme="dark"] .has-thumb::before { filter: saturate(.9) brightness(.8); }

/* Toggle: top right of every page, scrolls away with the page. */
.theme-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--surface, var(--card));
  color: var(--primary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--primary); color: var(--on-primary); outline: none; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Footer links to the legal pages. */
.legal { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.legal a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover, .legal a:focus-visible { color: var(--primary); }
/* Phones: start the content below the toggle so it never covers the top navigation. */
@media (max-width: 640px) {
  .page { padding-top: 66px; }
  body > .wrap { padding-top: 62px; }   /* beats the PvE page's own .wrap padding, declared after this sheet */
}