/**
 * The base of the page: tokens, reset, the body, the container, the particle backdrop and the
 * sticky header shell. Ported from the Wonderland site's main.css with every realm skin
 * (Valtima, Proxima Maxi, Wonderland), the gump/plaque/parchment art and the glow helpers
 * removed; the DLNE look itself lives in dlne.css and wins wherever the two meet
 * (html/body[data-portal="dlne"]).
 * Fonts are loaded by index.html (the <link> there, not an @import here).
 */

:root {
  /* Wood and leather — the grounds. */
  --night: #0b0805;
  --wood-950: #0e0a06;
  --wood-900: #17100a;
  --wood-850: #1d140c;
  --wood-800: #251a10;
  --leather-700: #3a2616;
  --leather-600: #4d321c;

  /* Brass and gold leaf — the trim. */
  --gold-100: #f6e4a6;
  --gold-300: #f0d07a;
  --gold-400: #e8c25a;
  --gold-500: #cfa545;
  --gold-600: #a8812f;
  --gold-800: #6b5226;

  /* Parchment and ink — what is read. */
  --parch-100: #f1e6c6;
  --parch-200: #e6d7ae;
  --parch-300: #d6c28f;
  --parch-edge: #b79c63;
  --ink: #2b1d0e;
  --ink-soft: #5a452a;
  --ink-red: #8e2a1e;

  /* Light — rune glow, torch ember, banner red, and the status gems. */
  --rune: #4cc9e0;
  --rune-bright: #9be8f3;
  --rune-glow: rgba(76, 201, 224, 0.45);
  --ember: #e0662a;
  --ember-bright: #ee8f4a;
  --banner-red: #9b2a22;
  --banner-red-deep: #5a130e;
  --violet: #a98cec;
  --violet-deep: #3b2a6b;
  --ok: #7fcf72;
  --bad: #e0705c;
  --warn: #e8c25a;

  --text-primary: #f3ead2;
  --text-secondary: #cdbf9d;
  --text-muted: #928468;
  --text-gold: var(--gold-400);

  --border-card: rgba(207, 165, 69, 0.28);
  --border-subtle: rgba(232, 214, 170, 0.09);
  --border-cyan: rgba(76, 201, 224, 0.28);
  --border-gold: rgba(232, 194, 90, 0.42);
  --border-active: rgba(232, 194, 90, 0.75);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s ease;

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-sans: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Alegreya', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-body: var(--font-sans);

  /* Fine grain, laid over wood and parchment alike. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .72 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Nav jumps land below the sticky bar rather than underneath it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.75rem;
}

body {
  background-color: var(--night);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color var(--transition-slow), color var(--transition-slow);
  background-image:
    radial-gradient(ellipse 90% 48% at 50% -8%, rgba(224, 102, 42, 0.17), transparent 62%),
    radial-gradient(ellipse 46% 40% at 96% 38%, rgba(76, 201, 224, 0.07), transparent 70%),
    radial-gradient(ellipse 52% 38% at 2% 72%, rgba(155, 42, 34, 0.12), transparent 70%),
    var(--grain),
    linear-gradient(180deg, #0b0805 0%, #130d08 52%, #080604 100%);
  background-attachment: fixed;
}

/* Button & interactive defaults */
button {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--rune);
  outline-offset: 2px;
}

::selection {
  background: rgba(207, 165, 69, 0.35);
  color: var(--parch-100);
}

/* Scrollbars (dlne.css repaints them cyan and pink for this page). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0805;
  border-left: 1px solid rgba(207, 165, 69, 0.12);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8a6a24, #cfa545 50%, #8a6a24);
  border-radius: 5px;
  border: 2px solid #0b0805;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #a8812f, #f0d07a 50%, #a8812f);
}
* {
  scrollbar-color: #a8812f #0b0805;
}

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

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

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* The backdrop: chip and graphics-card silhouettes (src/utils/backdrop.js builds them).
 * Two layers of motion, both CSS transform and opacity only, no script per frame:
 *   .chips-field  the conveyor. One tile (a viewport high) and an identical copy directly below it rise together,
 *                 linear and endless, by exactly one tile per cycle, so the wrap has no seam and the spacing between
 *                 objects never changes. The duration (set inline) is the time to rise one viewport at ~16 px/s.
 *   .chip-in      an object's own life: a sway sideways, a slow turn and a breathing opacity, each on its own random
 *                 cycle, on an inner element so it never fights the conveyor.
 * Thin strokes in the theme's cyan or violet, a soft glow, low opacity: the text above is never contested. */
#chips-bg {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#chips-bg .chips-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  animation: chipRise 50s linear infinite;
}
#chips-bg .chip-tile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#chips-bg .chip-copy { top: 100%; }
#chips-bg .chip {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
#chips-bg .chip-in {
  opacity: var(--lo, 0.15);
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 0 4px currentColor);
  will-change: transform, opacity;
  animation: chipLife 9s ease-in-out infinite alternate;
}
#chips-bg .chip-in svg { display: block; width: 100%; height: auto; }
#chips-bg .chip-in svg * { vector-effect: non-scaling-stroke; }
@keyframes chipRise {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); } /* the field is one viewport tall, so this is exactly one tile */
}
@keyframes chipLife {
  0% { transform: translateX(calc(var(--sway, 10px) * -1)) rotate(calc(var(--rot, 0deg) - var(--turn, 20deg))); opacity: var(--lo, 0.15); }
  100% { transform: translateX(var(--sway, 10px)) rotate(calc(var(--rot, 0deg) + var(--turn, 20deg))); opacity: var(--hi, 0.3); }
}
/* No motion asked for: the same shapes stay where they are, at rest. */
@media (prefers-reduced-motion: reduce) {
  #chips-bg .chips-field { animation: none; will-change: auto; }
  #chips-bg .chip-in { animation: none; will-change: auto; }
  html { scroll-behavior: auto; }
}

/* The header rides along as the page scrolls. A sticky element with no offset never sticks, and
 * with no z-index it is painted UNDER every section after it, so both are stated here. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* The shell clips what drifts past its sides with `clip`, NOT `hidden`. Any `overflow` other than
 * visible/clip on one axis turns the other axis into `auto`, which makes #app a scroll container of
 * its own — and a sticky header sticks to its nearest scroll container. */
#app { overflow-x: clip; }

/* The bar itself is dressed by dlne.css ([data-portal="dlne"] .top-nav-bar). */
.top-nav-bar {
  position: relative;
}