/* OOM! RF4 CSS layer: tokens-base.css */
/* ============================================================
   OOM! — Out of Mana · torchlit obsidian & gold MMO-UI parody
   ============================================================ */
:root {
  --ink: #0c0913;
  --ink2: #151021;
  --panel-a: #1d1730;
  --panel-b: #120d1e;
  --gold: #d9ab4f;
  --gold-hi: #f5d98a;
  --gold-dim: #7a6535;
  --parchment: #ece0c8;
  --text: #d8d0c4;
  --dim: #8f8698;
  --heal: #56e88c;
  --mana: #4fa4ff;
  --danger: #ff5b4a;
  --warn: #ffb84a;
  --rar-common: #b9bcc9;
  --rar-rare: #58aaff;
  --rar-legendary: #ff9d2e;
  --font-display: "Grenze Gotisch", "Palatino Linotype", serif;
  --font-body: "Alegreya Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(1200px 700px at 50% -10%, #241a3a 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 110%, #1d1226 0%, transparent 55%),
    radial-gradient(900px 600px at 10% 100%, #14101f 0%, transparent 55%),
    var(--ink);
}
#app::before { /* film grain */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 180px 60px rgba(0, 0, 0, 0.65);
}
#bg-torches i {
  position: fixed; width: 500px; height: 700px; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(60px);
  background: radial-gradient(closest-side, rgba(255, 150, 50, 0.13), transparent);
  animation: torch 3.2s ease-in-out infinite alternate;
}
#bg-torches i:first-child { left: -180px; top: 15%; }
#bg-torches i:last-child { right: -180px; top: 30%; animation-delay: -1.7s; }
@keyframes torch { from { opacity: 0.65; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }