/* ===========================================================================
   Structural tokens and primitives. Identical in every world; the palette and
   typography overrides live in worlds.css.
   ======================================================================== */
:root {
  --serif:  'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:   'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --techno: 'Orbitron', ui-monospace, 'SF Mono', Menlo, monospace;
  /* The 8-bit display face. Used by the neon world only, so the four worlds
     stay visually distinct; it is ~40% wider per character than Orbitron, so
     anything switching to it also needs a size correction. */
  --pixel:  'Press Start 2P', ui-monospace, 'SF Mono', Menlo, monospace;
  --mono:   ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* overridable per world; every world is neon now, so this is the neon look */
  --display: var(--techno);
  --display-weight: 800;
  --display-transform: uppercase;
  --display-spacing: 0.06em;
  --radius: 6px;
  --radius-sm: 3px;
  --chrome-font: var(--techno);

  --marquee-h: 56px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The background stack: particles, world overlay, texture, vignette. */
#atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.vignette, .overlay, .texture { position: fixed; inset: 0; pointer-events: none; }
.overlay  { z-index: 1; }
.texture  { z-index: 2; }
/* Interactive scenery: after .texture in the document, so above it; under the
   vignette. It never takes a click - shell/scenery.js listens on the window. */
#scenery  { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.vignette { z-index: 3; background: var(--vignette); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================================== type */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  text-transform: var(--display-transform);
  margin: 0;
}

.glow-text {
  color: var(--accent-soft);
  text-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.35),
    0 0 48px rgba(var(--accent-rgb), 0.22),
    0 0 90px rgba(var(--accent-rgb), 0.12);
}

kbd {
  padding: 0.1em 0.42em;
  border-radius: 5px;
  border: 1px solid var(--mist-strong);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--ink);
}

/* ================================================================= buttons */
.btn {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--mist-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: var(--chrome-font);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out),
              transform .25s var(--ease-out), color .25s var(--ease-out);
}
.btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(170deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08));
  color: var(--accent-soft);
  font-weight: 600;
}
.btn--primary:hover { background: linear-gradient(170deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.14)); }

.btn--small { padding: 0.36rem 0.8rem; font-size: 0.74rem; }
.btn--icon { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ============================================================== segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mist);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.segmented button {
  padding: 0.38rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--chrome-font);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-checked='true'] {
  color: var(--night);
  background: linear-gradient(170deg, var(--accent-soft), var(--accent));
  box-shadow: 0 0 20px -4px rgba(var(--accent-rgb), 0.6);
  font-weight: 600;
}
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.control { text-align: center; }
.control.is-hidden { display: none; }
.control__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ================================================================== panels */
.panel {
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--mist);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
  }
  .overlay, .texture { animation: none !important; }
}