/**
 * 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: sparks and glyphs drifting up (src/main.js builds them). */
@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0) scale(1) rotate(0deg); opacity: 0.15; }
  50% { transform: translateY(-45vh) translateX(25px) scale(1.15) rotate(180deg); opacity: 0.75; }
  100% { transform: translateY(-90vh) translateX(-20px) scale(0.9) rotate(360deg); opacity: 0.05; }
}
@media (prefers-reduced-motion: reduce) {
  #particles-bg { display: none; }
  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;
}