/* =====================================================================
   DANTUZZU — site styles
   Colours, fonts and sizes are defined once in :root below.
   ===================================================================== */

@font-face { font-family: "Inter Display"; src: url("/assets/fonts/inter-display-black.woff") format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --ink: #140F17;       /* night, the main background */
  --ink-2: #1D1720;
  --ink-3: #2A2230;
  --bone: #EAE0CE;      /* text */
  --bone-dim: #B4AA9C;
  --rust: #B5531F;
  --blood: #C2121C;     /* blood moon */
  --blood-hi: #E3343C;
  --hazard: #E8B931;    /* warning-sign yellow */
  --line: rgba(234, 224, 206, .12);

  --display: "Inter Display", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 72rem;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --header-h: 4.25rem;

  /* eroded paint texture used on the big titles */
  --worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .918 0 0 0 0 .878 0 0 0 0 .808 -6 0 0 0 4.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
body::after { /* film grain over everything */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: var(--grain); opacity: .06; mix-blend-mode: overlay;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--hazard); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--hazard); outline-offset: 3px; border-radius: 2px; }
code { font: .9em/1.4 var(--mono); background: rgba(234,224,206,.07); padding: .1em .35em; border-radius: 3px; color: #f3ead9; white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.narrow { max-width: 42rem; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--bone); max-width: 38rem; }
.muted { color: var(--bone-dim); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 200; background: var(--hazard); color: var(--ink); padding: .5rem 1rem; font-weight: 600; }
.skip:focus { left: .5rem; }
.ext { display: inline-block; margin-left: .25em; font-size: .85em; }

/* --- Big eroded title ------------------------------------------------ */
.mega {
  font-size: clamp(3.6rem, 14vw, 12.5rem); line-height: .84; letter-spacing: -.055em; margin: 0 0 .25em;
  color: var(--bone);
  background-image: var(--worn); background-size: 320px 320px;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(.04em .045em 0 rgba(194, 18, 28, .85));
}

/* --- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.45rem;
  font: 600 1rem/1 var(--text); text-decoration: none; border-radius: 2px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn .ext { margin: 0; }
.btn-blood { background: var(--blood); color: #fff; box-shadow: 0 10px 30px -12px rgba(194,18,28,.8); }
.btn-blood:hover { background: var(--blood-hi); color: #fff; transform: translateY(-2px); }
.btn-ghost { color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--bone); }
.btn-ghost:hover { color: var(--ink); background: var(--bone); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hazard { height: 12px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--ink) 14px 28px); opacity: .9; }

/* =====================================================================
   HEADER
   ===================================================================== */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 15, 23, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.p-home .top { position: fixed; inset: 0 0 auto; background: linear-gradient(rgba(10,7,12,.55), rgba(10,7,12,0)); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s; }
.p-home .top.is-solid { background: rgba(20, 15, 23, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line); }
.top-row { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); padding-inline: var(--pad); max-width: 90rem; margin-inline: auto; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--bone); text-decoration: none; font: 900 1.3rem/1 var(--display); letter-spacing: -.03em; }
.brand .mark { width: 2.1rem; height: 2.1rem; }
.brand:hover .mark { animation: pulse 1.2s ease; }
.mainnav { display: flex; gap: .3rem; margin-left: auto; }
.mainnav a { color: var(--bone); text-decoration: none; font-weight: 600; padding: .5rem .8rem; border-radius: 2px; }
.mainnav a:hover { background: rgba(234,224,206,.08); color: #fff; }
.mainnav a[aria-current] { box-shadow: inset 0 -2px 0 var(--blood); }
.subnav { border-top: 1px solid var(--line); }
.subnav ul { display: flex; gap: .2rem; list-style: none; margin: 0 auto; padding: 0 var(--pad); max-width: 90rem; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: block; white-space: nowrap; padding: .7rem .8rem; color: var(--bone-dim); text-decoration: none; font-size: .95rem; }
.subnav a:hover { color: var(--bone); }
.subnav a[aria-current] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--hazard); }

.langsel { position: relative; }
.langsel-btn { display: flex; align-items: center; gap: .45rem; background: none; border: 1px solid var(--line); color: var(--bone); font: 600 .9rem/1 var(--text); padding: .5rem .65rem; border-radius: 3px; cursor: pointer; }
.langsel-btn:hover { border-color: var(--bone-dim); }
.flag { width: 1.35rem; height: .9rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); object-fit: cover; }
.flag[viewBox="0 0 3 2"] { height: .9rem; }
.chev { width: .6rem; }
.langsel-list { position: absolute; right: 0; top: calc(100% + .4rem); list-style: none; margin: 0; padding: .35rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; min-width: 7.5rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); }
.langsel-list a { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; color: var(--bone); text-decoration: none; font-weight: 600; border-radius: 3px; }
.langsel-list a:hover { background: rgba(234,224,206,.08); }
.langsel-list a[aria-current] { color: var(--hazard); }

/* =====================================================================
   HOME — the 7-day scroll scene
   ===================================================================== */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.p-home main, .p-home .foot { position: relative; z-index: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sky { position: absolute; inset: 0; }
.sky-dawn  { background: linear-gradient(#251d3d 0%, #6c3f66 38%, #d97a55 70%, #f3c27b 100%); }
.sky-day   { background: linear-gradient(#35628f 0%, #7ea6c6 55%, #d8c7a0 100%); opacity: var(--o-day, 0); }
.sky-dusk  { background: linear-gradient(#1a1430 0%, #5d2546 40%, #c9502a 78%, #ee8e3a 100%); opacity: var(--o-dusk, 0); }
.sky-night { background: linear-gradient(#06050b 0%, #120d1f 60%, #26142c 100%); opacity: var(--o-night, 0); }
.sky-blood { background: radial-gradient(ellipse 90% 70% at 50% 30%, #6a0812 0%, #33040b 45%, #0c0307 85%); opacity: var(--o-blood, 0); }
.stars {
  position: absolute; inset: 0 0 35%; opacity: var(--stars, 0);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 38%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 65%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 70%, #fff 50%, transparent 51%);
  background-size: 420px 300px;
}
.sun {
  position: absolute; width: 16vmin; aspect-ratio: 1; border-radius: 50%;
  left: var(--sun-x, 10%); top: var(--sun-y, 70%); translate: -50% -50%;
  background: radial-gradient(circle, #fff7df 0 38%, #ffd690 55%, rgba(255,190,110,0) 72%);
  box-shadow: 0 0 120px 40px rgba(255, 196, 120, .35);
  opacity: var(--o-sun, 1);
}
.moon {
  position: absolute; left: 68%; top: calc(var(--moon-y, 110%) - var(--moon-lift, 0%)); width: 24vmin; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ff6d55 0%, #d81b22 40%, #8c0b14 78%, #5c050c 100%);
  box-shadow: inset -2.2vmin -1.6vmin 0 rgba(60, 0, 6, .45), inset 1vmin .6vmin 3vmin rgba(255, 170, 140, .25);
}
.moon::before, .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(90, 4, 12, .35); }
.moon::before { width: 22%; height: 22%; left: 24%; top: 54%; }
.moon::after { width: 13%; height: 13%; left: 60%; top: 26%; }
.moon-glow { position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(226, 30, 40, .45), rgba(226, 30, 40, 0) 62%); z-index: -1; }
.haze { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(255, 140, 80, calc(.25 * (1 - var(--o-night, 0))))); }
.ruins { position: absolute; left: 0; bottom: 0; width: 100%; }
.ruins-far { height: 34vh; color: #221927; bottom: 9vh; opacity: .88; }
.ruins-near { height: 22vh; color: #0b080d; }
.horde-wrap {
  position: absolute; left: 0; right: 0; bottom: 6vh; height: 30vh;
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--horde, 0)) * 6vh)) scale(calc(.5 + var(--horde, 0) * .7));
  opacity: calc(var(--horde, 0) * 1.6);
  color: #120c14;
}
/* the second wave rises from the bottom of the screen on horde night */
.horde-near {
  bottom: -2vh; height: 46vh; color: #050305;
  transform: translateY(calc((1 - var(--hn, 0)) * 48vh)) scale(1.15);
  opacity: 1;
}
.horde { width: 100%; height: 100%; }
.zw use { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--t, 2s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes sway { from { rotate: -4deg; } to { rotate: 5deg; translate: 0 -2px; } }
.fog {
  position: absolute; inset: auto -20% 0; height: 30vh; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 30% 100%, rgba(200, 190, 210, .18), transparent 70%),
              radial-gradient(ellipse 35% 50% at 75% 100%, rgba(200, 190, 210, .14), transparent 70%);
  animation: drift 38s linear infinite alternate;
}
@keyframes drift { to { transform: translateX(12%); } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hud {
  position: fixed; z-index: 40; top: calc(var(--header-h) + 1rem); right: var(--pad); pointer-events: none; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  font-family: var(--display); font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
}
.hud-day { font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: -.02em; }
.hud-label { opacity: .8; }
.hud-time { font-family: var(--text); font-weight: 600; font-size: 1rem; opacity: .8; letter-spacing: .02em; }
.is-horde .hud-num, .is-horde .hud-label { color: var(--blood-hi); }
.hud-lines { list-style: none; margin: .5rem 0 0; padding: 0; position: relative; width: min(22rem, 60vw); height: 2.6em; font: 600 .95rem/1.3 var(--text); }
.hud-lines li { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(.4rem); transition: opacity .45s, transform .45s; }
.hud-lines li.on { opacity: .95; transform: none; }
.hud-lines li:last-child { color: var(--blood-hi); }
.hud-horde { display: block; font: 900 clamp(1.4rem, 3vw, 2.2rem)/1 var(--display); color: var(--blood-hi); letter-spacing: -.03em; opacity: 0; text-shadow: 0 0 24px rgba(227,52,60,.6); }
.is-horde .hud-horde { animation: flicker 2.4s steps(1) forwards; }

/* home content floats over the sky */
.hero-mods { padding: calc(var(--header-h) + 9vh) 0 4rem; }
.hero-mods .mega { max-width: 9ch; }
.hero-mods .lead { text-shadow: 0 1px 2px rgba(20,10,20,.55), 0 2px 24px rgba(20,10,20,.6); max-width: 34rem; }
.hero-mods .orbs { margin-top: 3rem; }
.hero-mods .mod { background: rgba(16, 11, 18, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 14px; padding: 1.8rem 1.3rem 1.4rem; box-shadow: 0 0 0 1px rgba(234,224,206,.08); }
.hero-mods .scroll-hint { margin-top: 3rem; }
.glass { background: rgba(16, 11, 18, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.principles.glass { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.callout-server { padding: clamp(7rem, 16vw, 12rem) 0; }
.callout-server h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 12ch; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.callout-server p { max-width: 34rem; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 20px rgba(0,0,0,.6); }
.horde-space { height: 100vh; }
/* mod image inside the round frame */
.orb-base { position: absolute; inset: 0; display: grid; place-items: center; }
.orb-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.orb:hover .orb-img, .orb:focus-visible .orb-img, .orb.is-open .orb-img { transform: scale(1.06); }
.orb.has-img .orb-ring { z-index: 2; }
/* showcase on server home */
.showcase { padding: clamp(3.5rem, 7vw, 5rem) 0; background: linear-gradient(var(--ink), #1a1019 50%, var(--ink)); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 3rem 3.5rem; margin: 2.5rem 0 2.5rem; }
.sc h3 { font-size: 1.6rem; }
.sc > p { color: var(--bone-dim); max-width: 38rem; }
.panel { position: relative; margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: 6px; background: linear-gradient(#211821, #160f17); box-shadow: inset 0 0 0 1px rgba(232,185,49,.22), 0 24px 50px -24px #000; }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(-45deg, var(--hazard) 0 8px, transparent 8px 16px); opacity: .6; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed rgba(234,224,206,.12); }
.rows li:last-child { border-bottom: 0; }
.qty { color: var(--bone-dim); font-size: .88em; margin-left: .3rem; }
.price { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--hazard); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk { width: 1.05em; height: .75em; display: inline-block; vertical-align: -.05em; color: var(--hazard); }
.bp-track { position: relative; height: 10px; margin: 1.3rem .4rem .6rem; border-radius: 99px; background: rgba(234,224,206,.1); }
.bp-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--rust), var(--blood-hi)); box-shadow: 0 0 16px rgba(227,52,60,.6); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.is-visible .bp-fill { width: 58%; }
.bp-node { position: absolute; top: 50%; left: calc(var(--i) / 7 * 100%); width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: #2a2030; box-shadow: 0 0 0 2px var(--bone-dim); }
.is-visible .bp-node:nth-child(-n+6) { background: var(--blood-hi); box-shadow: 0 0 0 2px #fff, 0 0 12px var(--blood-hi); transition: background .3s calc(var(--i) * .2s), box-shadow .3s calc(var(--i) * .2s); }
.bp-ends { display: flex; justify-content: space-between; font-size: .82rem; color: var(--bone-dim); margin-bottom: .8rem; }
.bp-prizes { margin: 0; padding-left: 1.4rem; columns: 2 12rem; column-gap: 1.5rem; font-size: .95rem; }
.bp-prizes li { break-inside: avoid; padding: .2rem 0; }
.bp-prizes li::marker { color: var(--hazard); font-weight: 600; }
.tag-example { position: absolute; top: .9rem; right: 1rem; font-size: .75rem; font-weight: 600; color: var(--bone-dim); box-shadow: inset 0 0 0 1px var(--bone-dim); border-radius: 99px; padding: .1rem .5rem; }
.listing { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: .9rem 1rem; margin: .6rem 0 1rem; background: rgba(234,224,206,.05); border-radius: 4px; }
.listing-item strong { font-size: 1.1rem; }
.listing-meta { grid-column: 1; display: flex; gap: 1rem; flex-wrap: wrap; color: var(--bone-dim); font-size: .85rem; }
.listing .price { grid-column: 2; grid-row: 1 / span 2; font-size: 1.25rem; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.facts li { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; padding: .25rem .6rem; border-radius: 99px; background: rgba(234,224,206,.07); }
.free { color: #8fd16a; font-weight: 600; }
.cost { white-space: nowrap; }
.small { font-size: .82rem; }

/* installed mods list */
.installed { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.ilist { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.ilist li { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem; background: var(--ink-2); border-radius: 10px; box-shadow: inset 3px 0 0 var(--hazard); }
.ilist img { width: 96px; height: 96px; border-radius: 50%; }
.ilist h3 { margin-bottom: .35rem; }
.ilist p { margin: 0 0 .4rem; color: var(--bone-dim); }
.ilist .ilist-link { margin: 0; }
.ilist-icon { width: 96px; color: var(--hazard); }

.scene-title {
  position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--header-h) + 12vh);
  opacity: var(--title, 1); transform: translateY(calc((1 - var(--title, 1)) * -5vh));
}
.scene-title .lead { text-shadow: 0 1px 2px rgba(20, 10, 20, .5), 0 2px 24px rgba(20, 10, 20, .55); }
.scroll-hint { margin-top: 1.5rem; font-size: .95rem; color: var(--bone); opacity: .85; display: flex; align-items: center; gap: .6rem; }
.scroll-hint::before { content: ""; width: 1.1rem; height: 1.8rem; border: 2px solid currentColor; border-radius: 1rem; background: radial-gradient(circle 2px at 50% 30%, currentColor 98%, transparent) no-repeat; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 50% { background-position: 0 6px; } }

.scene-lines { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); right: var(--pad); top: 30%; }
.scene-lines li {
  position: absolute; inset: 0 auto auto 0; max-width: 18ch;
  font: 900 clamp(2rem, 5.4vw, 4.6rem)/1 var(--display); letter-spacing: -.035em; color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(1.2rem); transition: opacity .5s ease, transform .5s ease;
}
.scene-lines li.on { opacity: 1; transform: none; }
.scene-lines li:last-child { color: var(--blood-hi); }
.horde-call {
  position: absolute; inset: auto 0 20vh; text-align: center; margin: 0;
  font: 900 clamp(3rem, 12vw, 10rem)/1 var(--display); letter-spacing: -.05em; color: var(--blood-hi);
  text-shadow: 0 0 40px rgba(227, 52, 60, .55);
  opacity: 0; pointer-events: none; z-index: 2;
}
.is-horde .horde-call { animation: flicker 2.4s steps(1) forwards; }
@keyframes flicker { 0%{opacity:0} 6%{opacity:.9} 9%{opacity:.1} 13%{opacity:.85} 18%{opacity:.2} 24%,100%{opacity:.85} }
.stage.do-shake { animation: shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90%{translate:-2px 0} 20%,80%{translate:4px 1px} 30%,50%,70%{translate:-7px -1px} 40%,60%{translate:7px 1px} }

/* =====================================================================
   HOME — mods as round "orbs"
   ===================================================================== */
.mods { position: relative; padding: clamp(5rem, 10vw, 8rem) 0 clamp(6rem, 12vw, 10rem); background: linear-gradient(#0c0307, var(--ink) 30%); }
.mods h2 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.intro { color: var(--bone-dim); max-width: 40rem; }
.orbs { list-style: none; margin: 4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 4.5rem 3rem; }
.mod { text-align: center; }
@media (min-width: 60rem) { .orbs .mod:nth-child(3n+2) { margin-top: 5rem; } .orbs .mod:nth-child(3n) { margin-top: 1.5rem; } }
.orb {
  position: relative; display: grid; place-items: center; margin: 0 auto 1.4rem;
  width: min(15.5rem, 72vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 38%, #352a3b, #1a141d 62%, #0f0b11);
  box-shadow: 0 0 0 1px rgba(234,224,206,.14), 0 0 0 10px rgba(20,15,23,.9), 0 0 0 11px rgba(232,185,49,.25), 0 40px 70px -30px #000;
  text-decoration: none; color: var(--hazard);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.orb-ring { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgba(232,185,49,.4); animation: spin 50s linear infinite; }
.orb-ring::after { content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--blood-hi); box-shadow: 0 0 12px 3px rgba(227,52,60,.7); }
@keyframes spin { to { rotate: 360deg; } }
.orb-face { width: 50%; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.orb-face svg { width: 100%; height: auto; overflow: visible; }
.orb-cover { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); transition: clip-path .7s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.orb-cover img { width: 100%; height: 100%; object-fit: cover; }
.orb-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 45%, rgba(10,6,10,.75)); }
.orb-go {
  position: absolute; left: 50%; bottom: 13%; translate: -50% 8px; z-index: 2; white-space: nowrap;
  background: var(--blood); color: #fff; font: 600 .82rem/1 var(--text); padding: .45rem .7rem; border-radius: 99px;
  opacity: 0; transition: opacity .3s, translate .3s;
}
.orb:hover, .orb:focus-visible, .orb.is-open { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(234,224,206,.2), 0 0 0 10px rgba(20,15,23,.9), 0 0 0 11px var(--blood), 0 0 60px 10px rgba(194,18,28,.35), 0 40px 70px -30px #000; }
.orb:hover .orb-cover, .orb:focus-visible .orb-cover, .orb.is-open .orb-cover { clip-path: circle(72% at 50% 50%); }
.orb:hover .orb-face, .orb:focus-visible .orb-face, .orb.is-open .orb-face { transform: scale(1.12); }
.orb:hover .orb-go, .orb:focus-visible .orb-go, .orb.is-open .orb-go { opacity: 1; translate: -50% 0; }
.orb:hover .orb-ring { border-color: rgba(232,185,49,.75); }
.icon-fuel .bolt { animation: bolt 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bolt { 0%, 80%, 100% { opacity: 1; } 85% { opacity: .2; } 90% { opacity: 1; } 94% { opacity: .3; } }
.icon-extractor .pump { animation: pump 2.4s ease-in-out infinite; transform-origin: 56px 35px; }
@keyframes pump { 50% { rotate: 9deg; } }
.mod-name { margin-bottom: .45rem; }
.mod-text { color: var(--bone-dim); max-width: 32ch; margin-inline: auto; font-size: .98rem; }
.mod-meta { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.badge { font-size: .78rem; font-weight: 600; padding: .22rem .6rem; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--bone-dim); color: var(--bone-dim); }
.badge.ok { color: var(--hazard); box-shadow: inset 0 0 0 1px var(--hazard); }
.badge.ghost { box-shadow: none; background: rgba(234,224,206,.07); }

/* --- principles / features as ruled lists ----------------------------- */
.principles { padding: 2rem 0 clamp(5rem, 9vw, 7rem); }
.plist, .flist { display: grid; gap: 0 3rem; margin: 2rem 0 0; }
.plist { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.flist { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.plist > div, .flist > div { border-top: 2px solid var(--ink-3); padding: 1.1rem 0 1.6rem; }
.plist > div:first-child { border-top-color: var(--hazard); }
.plist dt, .flist dt { font: 900 1.3rem/1.15 var(--display); letter-spacing: -.015em; margin-bottom: .45rem; }
.plist dd, .flist dd { margin: 0; color: var(--bone-dim); }
.flist.small dt { font-size: 1.1rem; }

/* --- callouts ----------------------------------------------------------- */
.callout { position: relative; overflow: hidden; padding: clamp(6rem, 14vw, 11rem) 0; background: linear-gradient(#0a070d, #1b0a12 60%, #120610); isolation: isolate; }
.callout-art { position: absolute; inset: 0; z-index: -1; }
.moon-big { position: absolute; right: -8vmin; top: 8%; width: 60vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #ff6d55, #c4141c 42%, #6c0710 80%); box-shadow: 0 0 160px 40px rgba(194,18,28,.35); opacity: .9; }
.ruins-call { height: 26vh; color: #0a070b; }
.callout h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 12ch; }
.callout p { max-width: 34rem; font-size: 1.15rem; }
.support { padding: clamp(5rem, 9vw, 7rem) 0; text-align: center; }
.support .narrow { margin-inline: auto; }

/* =====================================================================
   SERVER HOME
   ===================================================================== */
.shero { position: relative; min-height: min(92vh, 60rem); display: flex; align-items: flex-end; padding: 8rem 0 clamp(4rem, 9vh, 7rem); overflow: hidden; isolation: isolate; }
.shero-art { position: absolute; inset: 0; z-index: -1; --o-night: 1; --stars: .9; --horde: .55; }
.moon-static { top: 30%; left: 74%; width: 30vmin; }
.horde-static { bottom: 7vh; }
.shero-in .mega { font-size: clamp(3.2rem, 11vw, 9.5rem); }
.radio {
  margin: 2rem 0; max-width: 40rem; padding: 1.1rem 1.25rem;
  background: rgba(8, 6, 10, .78); border: 1px solid rgba(232,185,49,.35); border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(232,185,49,.05);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.radio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .55rem 0; }
.radio-row + .radio-row { border-top: 1px dashed rgba(232,185,49,.2); }
.radio-k { color: var(--bone-dim); font-size: .92rem; }
.radio-v { display: flex; align-items: center; gap: .55rem; font-weight: 600; flex-wrap: wrap; }
.radio-v code { white-space: normal; }
.radio-note { margin: .1rem 0 .4rem; color: var(--bone-dim); font-size: .92rem; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.dot-soon { background: var(--hazard); box-shadow: 0 0 0 0 rgba(232,185,49,.6); animation: ping 1.8s ease-out infinite; }
.dot-on { background: #6fdc4a; box-shadow: 0 0 0 0 rgba(111,220,74,.6); animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 10px rgba(0,0,0,0); } }
.copy { background: none; border: 1px solid var(--line); color: var(--bone); font: 600 .8rem/1 var(--text); padding: .4rem .6rem; border-radius: 3px; cursor: pointer; }
.copy:hover { border-color: var(--hazard); color: var(--hazard); }
.features { padding: clamp(4rem, 8vw, 6rem) 0; }
.langs { padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.langs .narrow { margin-inline: auto; }
.flagrow { display: flex; gap: .8rem; justify-content: center; }
.flagrow .flag { width: 3rem; height: 2rem; }
.pagelinks { padding: 0 0 clamp(5rem, 9vw, 7rem); }
.plinks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); border-top: 1px solid var(--line); }
.plinks a { display: block; padding: 1.2rem 1rem 1.3rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--bone-dim); transition: padding .2s, color .2s; }
.plinks a strong { display: block; font: 900 1.35rem/1.2 var(--display); color: var(--bone); margin-bottom: .3rem; }
.plinks a:hover { padding-left: .6rem; color: var(--bone); }
.plinks a:hover strong { color: var(--hazard); }

/* =====================================================================
   CONTENT PAGES
   ===================================================================== */
.phead { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 7rem) 0 clamp(5rem, 11vw, 8rem); background: linear-gradient(#0a070d, #1d0d18); isolation: isolate; }
.phead-art { position: absolute; inset: 0; z-index: -1; }
.moon-sm { position: absolute; right: 9%; top: 18%; width: 18vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #ff6d55, #c4141c 42%, #6c0710 80%); box-shadow: 0 0 90px 20px rgba(194,18,28,.3); }
.ruins-sm { height: 12vh; color: var(--ink); }
.phead h1 { font-size: clamp(2.8rem, 8vw, 6rem); letter-spacing: -.045em; }
.draft { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--ink); background: var(--hazard); padding: .35rem .7rem; border-radius: 2px; }
.content { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(5rem, 9vw, 7rem); }
.content > * { max-width: 46rem; }
.content.wide > * { max-width: none; }
.content section { margin-bottom: 3rem; }
.content h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.narrowp { max-width: 46rem; }
.steps { list-style: none; counter-reset: s; margin: 0 0 2rem; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 1.6rem 4.2rem; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: -.2rem; font: 900 2.6rem/1 var(--display); color: var(--hazard); width: 3rem; text-align: right; }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 3.6rem; top: .3rem; bottom: .3rem; width: 1px; background: var(--ink-3); }
.steps h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.steps p { color: var(--bone-dim); }
.steps.compact > li { padding-bottom: .9rem; }
.steps.compact > li::before { font-size: 1.8rem; }
.steps.compact p { color: var(--bone); margin: 0; }
.note { border-left: 4px solid var(--hazard); background: var(--ink-2); padding: 1.2rem 1.4rem; margin: 2rem 0 3rem; border-radius: 0 4px 4px 0; }
.note h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.note p:last-child { margin: 0; }
.rule { scroll-margin-top: 8rem; }
.rule h2 { display: flex; align-items: baseline; gap: .8rem; }
.rnum { font-size: 1em; color: var(--blood-hi); min-width: 1.4ch; }
.rule ol { padding-left: 1.3rem; margin: 0; }
.rule li { margin-bottom: .6rem; color: var(--bone); }
.rule li::marker { color: var(--bone-dim); font-weight: 600; }

.tablewrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .98rem; }
th, td { text-align: left; padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: .85rem; color: var(--bone-dim); font-weight: 600; border-bottom-color: var(--bone-dim); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmds td:first-child { white-space: nowrap; }
.cmds code { white-space: nowrap; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin: 1.5rem 0; }
.mini caption { text-align: left; font: 900 1.1rem/1 var(--display); padding-bottom: .6rem; color: var(--hazard); }
.mini td { padding: .5rem 0; }
.vipt th[scope="row"] { font-weight: 600; }
.tag { font-weight: 600; font-family: var(--mono); }

.nf { padding: 8rem 0; text-align: center; }
.nf .narrow { margin-inline: auto; }
.nf-code { font: 900 clamp(6rem, 22vw, 14rem)/.9 var(--display); letter-spacing: -.06em; color: var(--blood); margin: 0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot { background: #0d0910; }
.foot-in { width: min(var(--wrap), 100% - 2 * var(--pad)); margin: 0 auto; padding: 3rem 0 2.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .foot-in { grid-template-columns: 1fr 1.6fr; } .foot-small { grid-column: 1 / -1; } }
.foot-brand { display: flex; gap: 1rem; align-items: flex-start; color: var(--bone-dim); font-size: .95rem; }
.foot-brand .mark { width: 2.6rem; height: 2.6rem; flex: none; }
.foot-links { list-style: none; margin: 0; padding: 0; columns: 2 12rem; column-gap: 2rem; }
.foot-links li { break-inside: avoid; }
.foot-links a { display: inline-block; padding: .3rem 0; color: var(--bone); text-decoration: none; }
.foot-links a:hover { color: var(--hazard); }
.foot-small { font-size: .82rem; color: #8c8290; margin: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; }

@keyframes pulse { 40% { transform: scale(1.12); } }

/* =====================================================================
   SMALL SCREENS
   ===================================================================== */
@media (max-width: 40rem) {
  :root { --header-h: 3.75rem; }
  .brand span { display: none; }
  .top-row { gap: .5rem; }
  .mainnav a { padding: .5rem .55rem; font-size: .95rem; }
  .langsel-btn .code { display: none; }
  .hud-lines { display: none; }
  .hud { top: auto; bottom: .8rem; right: .8rem; flex-direction: row; align-items: baseline; gap: .6rem; padding: .45rem .75rem; border-radius: 99px; background: rgba(16, 11, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(234,224,206,.12); }
  .hud-day { font-size: 1.05rem; }
  .hud-time { font-size: .85rem; }
  .hud-horde { font-size: .95rem; }
  .is-horde .hud-horde { animation: none; opacity: 1; }
  .hero-mods { padding-top: calc(var(--header-h) + 14vh); }
  .ilist li { grid-template-columns: 64px 1fr; }
  .ilist img, .ilist-icon { width: 64px; height: 64px; }
  .scene-lines { top: 40%; }
  .scene-title { top: calc(var(--header-h) + 22vh); }
  .horde-near { height: 34vh; }
  .ruins-far { height: 24vh; }
  .ruins-near { height: 15vh; }
  .horde-wrap { height: 20vh; }
  .moon { left: 72%; width: 30vmin; --moon-lift: 6%; }
  .moon-static { top: 16%; left: 80%; width: 34vmin; }
  .moon-sm { right: -4vmin; top: 6%; width: 26vmin; opacity: .7; }
  .sun { width: 22vmin; }
  .steps > li { padding-left: 3.4rem; }
  .steps > li::before { width: 2.4rem; font-size: 2.1rem; }
  .steps > li:not(:last-child)::after { left: 2.9rem; }
  .moon-big { width: 90vmin; right: -30vmin; opacity: .55; }
  .phead { padding: 3rem 0 4.5rem; }
  .ruins-sm { height: 8vh; }
  /* commands table becomes a list of small blocks */
  .cmds thead { display: none; }
  .cmds tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .cmds td { border: 0; padding: 0; }
  .cmds td:nth-child(2) { grid-column: 1 / -1; color: var(--bone-dim); }
  .cmds td:nth-child(2):empty { display: none; }
  .cmds td:nth-child(3) { grid-column: 1 / -1; color: var(--bone-dim); font-size: .95rem; }
  .cmds td:nth-child(4), .cmds td:nth-child(5) { text-align: left; font-size: .9rem; }
  .cmds td:nth-child(4)::before, .cmds td:nth-child(5)::before { content: attr(data-label) ": "; color: var(--bone-dim); }
  .vipt { font-size: .9rem; }
  .vipt th, .vipt td { padding-right: .55rem; }
}

/* =====================================================================
   REDUCED MOTION: keep the scroll scene, drop everything that moves on its own
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .embers { display: none; }
}