/* ============================================================
   SPRITE ATLAS -- swap file numbers here to change icons
   Paths are root-relative so they work from any page.
   ============================================================ */
:root {
  --sp-step1:  url('/assets/ui_030.png');
  --sp-step2:  url('/assets/ui_031.png');
  --sp-step3:  url('/assets/ui_032.png');
  --sp-key:    url('/assets/ui_020.png');
  --sp-lock:   url('/assets/ui_021.png');
  --sp-gear:   url('/assets/ui_015.png');
  --sp-bell:   url('/assets/ui_024.png');
  --sp-mag:    url('/assets/ui_011.png');
  --sp-scroll: url('/assets/ui_012.png');
  --sp-heart:  url('/assets/ui_038.png');
  --sp-star:   url('/assets/ui_034.png');
  --sp-check:  url('/assets/ui_007.png');
  --sp-x:      url('/assets/ui_006.png');
  --sp-info:   url('/assets/ui_017.png');
  --sp-q:      url('/assets/ui_018.png');
  --sp-bang:   url('/assets/ui_019.png');
  --sp-compass:url('/assets/ui_028.png');
  --sp-flag:   url('/assets/ui_027.png');
  --sp-coins:  url('/assets/ui_035.png');
  --sp-play:   url('/assets/ui_014.png');
  --sp-pause:  url('/assets/ui_013.png');
  --sp-fwd:    url('/assets/ui_000.png');
  --sp-back:   url('/assets/ui_001.png');
  --sp-gem:    url('/assets/gem_000.png');
  --sp-item:   url('/assets/item_000.png');
  --sp-biome:  url('/assets/biome_000.png');
  --sp-shield: url('/assets/ui_025.png');
  --sp-eye:    url('/assets/ui_026.png');
}

/* ============================================================
   SPRITE CLASS RULES -- apply background-image from variables
   ============================================================ */
.sp-step1   { background-image: var(--sp-step1); }
.sp-step2   { background-image: var(--sp-step2); }
.sp-step3   { background-image: var(--sp-step3); }
.sp-key     { background-image: var(--sp-key); }
.sp-lock    { background-image: var(--sp-lock); }
.sp-gear    { background-image: var(--sp-gear); }
.sp-bell    { background-image: var(--sp-bell); }
.sp-mag     { background-image: var(--sp-mag); }
.sp-scroll  { background-image: var(--sp-scroll); }
.sp-heart   { background-image: var(--sp-heart); }
.sp-star    { background-image: var(--sp-star); }
.sp-check   { background-image: var(--sp-check); }
.sp-x       { background-image: var(--sp-x); }
.sp-info    { background-image: var(--sp-info); }
.sp-q       { background-image: var(--sp-q); }
.sp-bang    { background-image: var(--sp-bang); }
.sp-compass { background-image: var(--sp-compass); }
.sp-flag    { background-image: var(--sp-flag); }
.sp-coins   { background-image: var(--sp-coins); }
.sp-play    { background-image: var(--sp-play); }
.sp-pause   { background-image: var(--sp-pause); }
.sp-fwd     { background-image: var(--sp-fwd); }
.sp-back    { background-image: var(--sp-back); }
.sp-gem     { background-image: var(--sp-gem); }
.sp-item    { background-image: var(--sp-item); }
.sp-biome   { background-image: var(--sp-biome); }
.sp-shield  { background-image: var(--sp-shield); }
.sp-eye     { background-image: var(--sp-eye); }

:root {
  /* Color palette -- dark fantasy w/ gold accents */
  --bg:       #0a0612;
  --bg2:      #100820;
  --panel:    #150a26;
  --border:   #2a1850;
  --gold:     #f0c040;
  --gold-d:   #b08020;
  --crit:     #ff3838;
  --warn:     #ff9020;
  --ok:       #50e070;
  --info:     #4090ff;
  --text:     #d8d0e8;
  --muted:    #5a4a78;
}