/* ════════════════════════════════════════════════════════════════════════════
   UNREALOT — brand tokens, distilled from the live site (unrealot.com/unrealot.css)
   Theme name: "the dungeon medallion".
   Obsidian stone · amethyst arcana · STEEL "Unreal" · GOLD "OT" · torch ember.
   These values are LOCKED. Everything new must be built from this palette.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces: obsidian violet-black, never neutral grey ── */
  --void:      #060409;   /* page base */
  --stone:     #141020;   /* panel face */
  --stone-hi:  #201a30;   /* raised panel / hover */
  --stone-brd: #0a0812;   /* carved edge */

  /* ── text ── */
  --ink:       #e8e4f0;   /* cool bone body text */
  --ink-dim:   #97909f;   /* secondary */

  /* ── the arcana: amethyst. the accent, the glow, the magic ── */
  --amethyst:  #a06bff;
  --amethyst-2:#7b3ff2;
  --am-deep:   #47207e;
  --am-glow:   rgba(160,107,255,.5);

  /* ── the metals ── */
  --steel:     #ccd1e0;   /* the word "UNREAL" */
  --steel-hi:  #ffffff;
  --steel-dk:  #5c6172;
  --gold:      #f0c75e;   /* the letters "OT". PRIMARY CTAs ONLY. scarcity = power */
  --gold-hot:  #fff0c6;
  --gold-mid:  #c99a3e;
  --gold-deep: #8a651f;

  /* ── the torch ── */
  --ember:     #ff9a3c;

  /* ── semantic ── */
  --danger:    #ff8080;
  --ok:        #7fe6a3;

  /* ── hairlines. everything is edge-lit, nothing is flat ── */
  --brd:       rgba(160,150,190,.14);
  --brd-steel: rgba(204,209,224,.22);
  --brd-am:    rgba(160,107,255,.32);

  /* ── type. self-hosted woff2 on the live site; fall back to Georgia serif ──
     NO sans-serif anywhere. The serif IS the brand. */
  --body:      'Spectral','Georgia',serif;      /* 400/500 — body copy */
  --display:   'Cinzel','Georgia',serif;        /* 400/700/900 — headings, nav, buttons, labels */
  --wordmark:  'Cinzel Decorative','Cinzel',serif; /* 700/900 — the UNREALOT wordmark ONLY */

  /* ── the two foils. Applied to TEXT via background-clip:text. This is how the
     wordmark gets its metal. Never fake it with a flat colour. ── */
  --foil-steel: linear-gradient(178deg,#ffffff 0%,#e6e9f2 20%,#c3c9da 44%,#8a90a4 66%,#5c6172 86%,#9aa0b4 100%);
  --foil-gold:  linear-gradient(178deg,#fff6dc 0%,#ffe49a 22%,#f0c75e 45%,#b9903f 68%,#7d5a1a 88%,#a07a2e 100%);

  --maxw: 1180px;
}

/* ── THE DEEP: what sits behind every page. Layered amethyst nebulae over
   obsidian, one warm torch bloom low in the frame, slow breathing. No photo. ── */
.bg-arcane {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(90% 62% at 50% -12%, rgba(123,63,242,.34) 0%, rgba(123,63,242,.13) 42%, transparent 70%),
    radial-gradient(46% 38% at 18% 28%, rgba(160,107,255,.12) 0%, transparent 70%),
    radial-gradient(50% 40% at 84% 34%, rgba(90,40,170,.14) 0%, transparent 70%),
    radial-gradient(70% 34% at 50% 106%, rgba(255,120,40,.10) 0%, transparent 62%),
    linear-gradient(180deg, #0a0714 0%, var(--void) 55%, #050308 100%);
}

/* ⛔ These two layers are what make the deep breathe, and home-v3 shipped
   without them while unrealot.com has had them all along. The gradients above
   are byte-identical between the two sites; only these were missing, which is
   why this page read as one flat purple ramp next to the live one.

   ⛔ It is NOT enough to add them. home-v3 also animated the WRONG THING:
   css/base.css put `deep-breathe` on .bg-arcane itself, fading the entire
   backdrop 82% -> 100%, which is close to invisible. Live keeps the base
   static and pulses only these two extra nebulae 45% -> 100%, which is what
   you actually see moving. That animation has been taken off the element. */
.bg-arcane::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 34% at 62% 16%, rgba(160,107,255,.16) 0%, transparent 70%),
    radial-gradient(36% 30% at 30% 10%, rgba(123,63,242,.13) 0%, transparent 70%);
  animation: deep-nebulae 11s ease-in-out infinite alternate;
}
@keyframes deep-nebulae { from { opacity: .45; } to { opacity: 1; } }
.bg-arcane::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url('../assets/grain-64.png');   /* the stone tooth over the glow */
}
@media (prefers-reduced-motion: reduce) {
  .bg-arcane::before { animation: none; opacity: .72; }
}

/* Inner pages run the deep quieter so forms lead. Hero pages omit this. */
.bg-arcane--page { filter: brightness(.72) saturate(.9); }

/* The particle canvas sits above the deep, below the content. Driven by scene.js:
   rising arcane motes, warm torch embers, drifting dust, a rare meteor. */
#fx { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

/* ── FILM GRAIN + VIGNETTE: the tactile layer. Every surface has tooth.
   Fixed overlay, pointer-events none, opacity ~.07. No blend modes (mobile GPUs). ── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .07;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 52%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, 160px 160px;
}

/* ── THE PLATE: the one surface primitive. A carved stone slab, top-lit, with a
   hairline highlight on the upper edge and darkness pooling at the bottom.
   Every card, panel, form and band on the site is a plate. ── */
.plate {
  /* The face is a variable so depth modifiers can re-tint the stone without
     wiping the tooth or the sheen. Override --plate-face, never `background`. */
  --plate-face: linear-gradient(180deg, var(--stone-hi), var(--stone) 46%, #0c0916);
  position: relative;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(232,228,240,.045), transparent 34%),   /* top sheen */
    url('../assets/grain-64.png'),                                       /* stone tooth */
    var(--plate-face);
  border: 1px solid var(--stone-brd);
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(204,209,224,.14),                              /* steel inlay hairline */
    inset 0 1px 0 rgba(232,228,240,.08),
    inset 0 -18px 40px -24px rgba(0,0,0,.85);
}
/* Amethyst points set in the top corners, like the medallion's gems. */
.plate::before, .plate::after {
  content: "◆"; position: absolute; top: 10px; font-size: 9px;
  color: var(--amethyst); opacity: .75; text-shadow: 0 0 10px var(--am-glow);
}
.plate::before { left: 13px; }
.plate::after  { right: 13px; }

/* ── BUTTON HIERARCHY. Exactly one gold button per screen. ──
   .btn-gold   — the single primary action (PLAY). gold foil, ember glow on hover.
   .btn-ghost  — secondary. amethyst hairline, transparent fill.
   .btn-discord— tertiary, brand blurple #5865F2.
   Buttons are Cinzel, uppercase, letter-spacing ~1.6px. */

/* ── MOTION LAW ──
   Everything moves like stone and candlelight, never like a web app.
   - transitions 180-260ms, ease-out
   - the deep "breathes" on an 11s alternate loop
   - amethyst glows pulse slowly, they never blink
   - reveal-on-scroll: 14px rise + fade, 60ms stagger between siblings
   - honour prefers-reduced-motion: kill parallax and particles, keep opacity fades */

/* ── WHAT THE BRAND IS NOT ──
   Not neon. Not cyberpunk. Not flat-design SaaS. No pure-black #000, no pure-grey.
   No sans-serif. No rounded pill cards with soft drop shadows. No purple-to-pink
   gradients. No stock fantasy photography. No emoji as iconography.
   Icons are carved glyphs, gem facets, or real game sprites. */