/* =========================================================
   FROST-VELLUM — Frostmaiden landing design system
   ========================================================= */

:root {
  /* Parchment */
  --vellum: #e8e0cf;
  --vellum-warm: #ebe1cc;
  --vellum-cool: #dde3dd;
  --vellum-edge: #c9bfa6;
  --vellum-deep: #a89a7a;
  --vellum-stain: #b09770;

  /* Ink */
  --ink: #1b2033;
  --ink-soft: #2f3750;
  --ink-faded: #4a5370;
  --ink-ghost: #7d8399;

  /* Frost */
  --frost-pale: #e6eef3;
  --frost: #c7dde8;
  --frost-mid: #8fb5c9;
  --frost-deep: #567b92;
  --frost-shadow: #3d5a70;

  /* Accents */
  --rime: #7ab2c9;
  --wax: #6b2a2a;
  --gold: #9a7b3a;
  --gold-dim: #77582a;
  --moss: #4a5a3f;

  /* Type */
  --font-display: 'IM Fell DW Pica SC', 'IM Fell DW Pica', 'Cormorant Unicase', serif;
  --font-display-italic: 'IM Fell DW Pica', serif;
  --font-body: 'EB Garamond', 'Palatino Linotype', 'Palatino', serif;
  --font-label: 'Cormorant Unicase', 'Cormorant Garamond', serif;
  --font-mono: 'Cormorant Garamond', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #2b2922;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.parchment {
  background-color: var(--vellum);
  background-image:
    radial-gradient(ellipse at 12% 20%, rgba(176, 151, 112, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(160, 140, 100, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(200, 185, 155, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse at 90% 10%, rgba(143, 181, 201, 0.22) 0%, transparent 35%),
    radial-gradient(ellipse at 5% 95%, rgba(143, 181, 201, 0.18) 0%, transparent 40%),
    repeating-linear-gradient(23deg,
      transparent 0 2px,
      rgba(130, 110, 80, 0.025) 2px 3px,
      transparent 3px 7px),
    repeating-linear-gradient(-47deg,
      transparent 0 3px,
      rgba(100, 120, 140, 0.02) 3px 4px,
      transparent 4px 9px);
  position: relative;
}
.parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(80, 60, 30, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 13%, rgba(80, 60, 30, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 60%, rgba(80, 60, 30, 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 80%, rgba(80, 60, 30, 0.12) 0 1px, transparent 2px);
  background-size: 200px 200px, 250px 250px, 180px 180px, 220px 220px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.parchment-edge { position: relative; }
.parchment-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 120px 10px rgba(60, 40, 10, 0.35),
    inset 0 0 300px 40px rgba(90, 65, 30, 0.18);
}

.frost-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--frost-strength, 0.6);
  background-image:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(199, 221, 232, 0.85) 0%, rgba(199, 221, 232, 0.4) 20%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(199, 221, 232, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse 55% 30% at 0% 100%, rgba(199, 221, 232, 0.7) 0%, transparent 60%),
    radial-gradient(ellipse 45% 28% at 100% 100%, rgba(199, 221, 232, 0.7) 0%, transparent 60%);
  mix-blend-mode: screen;
}

.inklink {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--ink-faded) 0%, var(--ink-faded) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 95%;
  transition: background-size 0.3s ease, color 0.2s ease;
  padding-bottom: 1px;
}
.inklink:hover {
  color: var(--frost-shadow);
  background-image: linear-gradient(to right, var(--rime), var(--rime));
  background-size: 100% 2px;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78em;
  color: var(--ink-soft);
}

.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 5em;
  float: left;
  line-height: 0.85;
  padding: 0.1em 0.15em 0 0;
  color: var(--gold);
  text-shadow: 0 0 1px rgba(154, 123, 58, 0.4);
}

.rule-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-faded);
}
.rule-ornament::before,
.rule-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ink-faded), transparent);
}
.rule-ornament .glyph {
  font-family: var(--font-display);
  font-size: 1.3em;
  opacity: 0.7;
}

.snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.snow span {
  position: absolute;
  top: -10px;
  background: rgba(240, 248, 252, 0.85);
  border-radius: 50%;
  filter: blur(0.3px);
  animation: snowfall linear infinite;
}
@keyframes snowfall {
  0%   { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translate3d(var(--drift, 20px), 110vh, 0) rotate(360deg); opacity: 0; }
}

/* ─── NIGHT / NATTBOK ─── */
.night {
  --vellum: #171e2b;
  --vellum-warm: #1a2332;
  --vellum-cool: #151c2a;
  --vellum-edge: #0d131c;
  --vellum-deep: #0a0f18;
  --vellum-stain: #2b3448;
  --ink: #e4ecf2;
  --ink-soft: #c9d4de;
  --ink-faded: #92a1b2;
  --ink-ghost: #6a7a8c;
  --gold: #d4b26a;
  --gold-dim: #9a7e44;
  --rime: #8cc5df;
  --wax: #a34545;
}
.night.parchment {
  background-color: var(--vellum);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(70, 100, 130, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(80, 100, 140, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 10%, rgba(140, 197, 223, 0.08) 0%, transparent 50%),
    repeating-linear-gradient(23deg,
      transparent 0 2px,
      rgba(140, 180, 210, 0.03) 2px 3px,
      transparent 3px 8px);
}
.night.parchment::before {
  background-image:
    radial-gradient(circle at 15% 25%, rgba(180, 200, 220, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 13%, rgba(180, 200, 220, 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 60%, rgba(180, 200, 220, 0.07) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 80%, rgba(180, 200, 220, 0.1) 0 1px, transparent 2px);
  mix-blend-mode: screen;
}
.night.parchment-edge::after {
  box-shadow:
    inset 0 0 140px 20px rgba(0, 0, 0, 0.65),
    inset 0 0 320px 40px rgba(0, 0, 0, 0.4);
}
.night .frost-overlay {
  background-image:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(140, 197, 223, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(140, 197, 223, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 30% at 0% 100%, rgba(140, 197, 223, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 28% at 100% 100%, rgba(140, 197, 223, 0.18) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.night .drop-cap::first-letter { color: var(--gold); }
.night .inklink { color: var(--ink); background-image: linear-gradient(to right, var(--ink-faded), var(--ink-faded)); }
.night .inklink:hover { color: var(--rime); background-image: linear-gradient(to right, var(--rime), var(--rime)); }

/* ─── MAP PIN TYPE COLOURS ─── */
.map-pin[data-type="mountain"] .pin-dot { background: var(--frost-deep); box-shadow: 0 0 0 1px var(--frost-mid), 0 0 14px rgba(86,123,146,0.5); }
.map-pin[data-type="faction"]  .pin-dot { background: var(--moss);       box-shadow: 0 0 0 1px var(--moss),      0 0 10px rgba(74,90,63,0.4); }
.map-pin[data-type="fortress"] .pin-dot,
.map-pin[data-type="event"]    .pin-dot { background: var(--wax);        box-shadow: 0 0 0 1px var(--wax),       0 0 14px rgba(107,42,42,0.5); }

@media (prefers-reduced-motion: reduce) {
  .snow span { animation: none; opacity: 0; }
  .scroll-cue-line { animation: none; }
  .floating-compass { transition: none; }
}