/* ═══════════════════════════════════════════════════════════════
   Dead Island Epidemic: Reanimated — UI Core
   Palette · reset · typography · page chrome
═══════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Free (SIL OFL) replacements for the game's original proprietary fonts. The
   family names are kept identical so no downstream rule had to change:
     'GrimGhost'     was grimghostcond.ttf  → Oswald (heavy condensed display)
     'MyriadPro'     was MYRIADPRO-*.otf     → Source Sans 3 (Adobe's own OFL sans)
     'MyriadProCond' was MYRIADPRO-*COND.otf → Barlow Semi Condensed
   Originals catalogued in copyrighted-assets/web-ui/CATALOGUE.md. */
@font-face { font-family:'GrimGhost';     src:url('../assets/fonts/Oswald-VariableFont.ttf')          format('truetype'); font-weight:200 700; }
@font-face { font-family:'MyriadPro';     src:url('../assets/fonts/SourceSans3-VariableFont.ttf')     format('truetype'); font-weight:200 900; }
@font-face { font-family:'MyriadProCond'; src:url('../assets/fonts/BarlowSemiCondensed-Regular.ttf')  format('truetype'); font-weight:400; }
@font-face { font-family:'MyriadProCond'; src:url('../assets/fonts/BarlowSemiCondensed-Bold.ttf')     format('truetype'); font-weight:700; }

/* ── Palette ─────────────────────────────────────────────────── */
:root {
  --red:       #9a1400;
  --red-hi:    #c41800;
  --red-dim:   rgba(154,20,0,.13);
  --red-glow:  rgba(196,24,0,.30);
  --teal-dark: #091918;
  --teal-lbl:  #3a7868;
  --teal-txt:  #4e9882;
  --text:      #e0ddd0;
  --text-dim:  #aca89c;
  --muted:     #6e817a;
  --border:    #1b3730;
  --border-hi: #294e44;
  --up:        #54a438;
  --up-dim:    rgba(84,164,56,.11);
  --down:      #be2020;
  --warn:      #c47e00;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100vh; }

/* ── Body ────────────────────────────────────────────────────── */
body {
  font-family:'MyriadPro','Myriad Pro','Segoe UI',system-ui,sans-serif;
  font-weight:400; font-size:14px;
  background-color: var(--teal-dark);
  background-image: url('../assets/img/header-background.png');
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 25%, transparent 10%, rgba(2,7,7,.65) 100%);
}

/* ── Links ───────────────────────────────────────────────────── */
a { color:var(--teal-txt); cursor:pointer; text-decoration:none; transition:color .12s; }
a:hover { color:var(--text); }
code { font-family:'Segoe UI Mono','Courier New',monospace; font-size:.9em; color:var(--teal-txt); }