/* =========================================================
   Devils Lair – base.css
   Tokens, Schriften, Reset, Hintergrund, Typografie
   ========================================================= */

@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("/assets/fonts/cinzel-900.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Unifraktur"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/unifraktur-400.woff2") format("woff2"); }

:root {
  /* Flaechen: tiefes Schwarz mit leichtem Blau-Stich (passt zu Chrom) */
  --bg: #030304;
  --bg-2: #07070a;
  --bg-3: #0d0d12;
  --panel: rgba(8, 8, 12, .78);
  --line: rgba(190, 200, 218, .11);
  --line-red: rgba(var(--glow-rgb), .42);

  /* Blutrot (aus Blutmond/Banner) */
  --red: #d1001c;
  --red-hot: #ff1f3a;
  --red-deep: #7a0010;
  --red-dark: #2a0006;

  /* Chrom / Silber (aus den Cybersigil-Ornamenten) */
  --silver: #c8ced8;
  --silver-hi: #f4f7fb;
  --silver-lo: #6b7381;
  --chrome: linear-gradient(180deg, #ffffff 0%, #dde2ea 26%, #8a92a1 50%, #eef1f6 68%, #7f8794 100%);

  /* RGB-Tripel fuer rgba(var(--x), a): Glut, Highlight, Tiefe, Dunkel, Hintergrund.
     Die Saison-Themes (seasons.css) ueberschreiben diese Werte. Fraktionsfarben (--c-*) bleiben immer gleich. */
  --glow-rgb: 209, 0, 28;
  --hot-rgb: 255, 31, 58;
  --deep-rgb: 122, 0, 16;
  --dark-rgb: 42, 0, 6;
  --bg-rgb: 3, 3, 4;
  --silver-rgb: 200, 206, 216;
  --img-filter: none;

  /* Text: kuehles Silberweiss */
  --bone: #e9edf3;
  --ash: #9ba2af;
  --dim: #666d79;

  /* Fraktionsfarben */
  --c-vampire: #e5121f;
  --c-valkyre: #f2b42a;
  --c-wald: #3fae4a;
  --c-mensch: #3d70e6;
  --c-events: #9b5de5;
  --c-erde: #22b8cf;

  --ok: #2fd16b;
  --warn: #f2b42a;

  /* scharfkantig statt rund */
  --radius: 3px;
  --radius-lg: 4px;
  --wrap: 1180px;
  --cut: 12px;

  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-black: "Unifraktur", "Cinzel", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; min-height: 100vh; position: relative;
  background: var(--bg); color: var(--bone);
  font: 400 1rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--red); color: #fff; text-shadow: none; }

/* Blutmond-Glow + Vignette hinter allem */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(820px 560px at 82% -10%, rgba(var(--glow-rgb), .30), transparent 64%),
    radial-gradient(640px 460px at 0% 30%, rgba(var(--silver-rgb), .05), transparent 62%),
    radial-gradient(900px 600px at 50% 125%, rgba(var(--deep-rgb), .20), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Typografie */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); text-transform: uppercase; }
h3 { font-size: 1.15rem; }
p { color: var(--ash); }
strong { color: var(--bone); font-weight: 600; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--red); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

/* Scroll-Reveal (nur mit JS) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}