/* ============================================================
   base.css
     - :root theme variables
     - .biome-X classes (override sky/mountains/ground vars)
     - reset + body + #game-container + grain
     - .screen fade
     - time-of-day overlay, stars
     - fog / rain overlays
     - small screen labels (biome, direction, weather)
     - gas-ahead banner
   ============================================================ */

:root {
  --cream:         #F0E4CF;
  --cream-dark:    #D8C4A0;
  --terracotta:    #D97A5C;
  --terracotta-dk: #A84F3A;
  --olive:         #6B7A4C;
  --olive-dk:      #475236;
  --dusty-blue:    #7BA7BC;
  --dashboard:     #8B5A3C;
  --dashboard-dk:  #5C3A24;
  --wood-grain:    #6B3E1F;
  --chrome:        #C8C4B8;
  --chrome-dark:   #8A8477;

  /* biome-dependent — defaults to desert */
  --sky-top:       #FF8C42;
  --sky-mid:       #FFB17A;
  --sky-low:       #F0E4CF;
  --sky-horizon:   #7BA7BC;
  --mountain-1:    #8B7FA8;
  --mountain-2:    #6B5F8A;
  --mountain-3:    #9B8FB8;
  --ground-grad:   linear-gradient(180deg, #D8A87A 0%, #C89868 30%, #B08050 100%);
  --mesa-color:    #A84F3A;
  --foreground:    #B8956A;
  --road-gray:     #4A453E;
  --road-line:     #F4C430;

  /* sign colors (stable across biomes) */
  --sign-green:    #2D5F3F;
  --sign-blue:     #1D3E6F;
  --sign-yellow:   #F4C430;
  --sign-red:      #B03A2E;
  --sign-brown:    #6F4F2A;
  --sign-white:    #EDEAE0;
}

/* ============================================================
   BIOMES — re-skin via CSS vars
   ============================================================ */
.biome-desert {
  --sky-top:#FF8C42; --sky-mid:#FFB17A; --sky-low:#F0E4CF; --sky-horizon:#7BA7BC;
  --mountain-1:#8B7FA8; --mountain-2:#6B5F8A; --mountain-3:#9B8FB8;
  --ground-grad: linear-gradient(180deg, #D8A87A 0%, #C89868 30%, #B08050 100%);
  --mesa-color:#A84F3A; --foreground:#B8956A;
}
.biome-forest {
  --sky-top:#F0B480; --sky-mid:#F5D49A; --sky-low:#E6D3A3; --sky-horizon:#4F6E3E;
  --mountain-1:#3E5B33; --mountain-2:#2D4525; --mountain-3:#4A6B3F;
  --ground-grad: linear-gradient(180deg, #8FA268 0%, #6B8548 30%, #4A5E32 100%);
  --mesa-color:#5C4A2E; --foreground:#6B8548;
}
.biome-plains {
  --sky-top:#FFC878; --sky-mid:#FFE1A8; --sky-low:#F5E9C3; --sky-horizon:#9AAC6A;
  --mountain-1:#C4B07C; --mountain-2:#A39268; --mountain-3:#D6C28C;
  --ground-grad: linear-gradient(180deg, #E6C882 0%, #C4A868 30%, #9A8548 100%);
  --mesa-color:#8A7642; --foreground:#C4A868;
}
.biome-coastal {
  --sky-top:#6BAAD0; --sky-mid:#9ECBE2; --sky-low:#CEE3ED; --sky-horizon:#3E7BA3;
  --mountain-1:#4A6B7C; --mountain-2:#3A556B; --mountain-3:#5C7A8A;
  --ground-grad: linear-gradient(180deg, #D6C890 0%, #B8A670 30%, #8A7A4C 100%);
  --mesa-color:#3E6580; --foreground:#B8A670;
}
.biome-mountain {
  --sky-top:#B890B8; --sky-mid:#D4B0C4; --sky-low:#E6C8D0; --sky-horizon:#5C6B7B;
  --mountain-1:#4A5568; --mountain-2:#2E3644; --mountain-3:#6B7688;
  --ground-grad: linear-gradient(180deg, #8B8478 0%, #6B6458 30%, #4A4438 100%);
  --mesa-color:#3A4354; --foreground:#6B6458;
}
.biome-city {
  --sky-top:#D8805C; --sky-mid:#E8A080; --sky-low:#D8B898; --sky-horizon:#4A5060;
  --mountain-1:#3A4050; --mountain-2:#2A2F3A; --mountain-3:#4A5568;
  --ground-grad: linear-gradient(180deg, #6B6458 0%, #4A4438 30%, #2E2A24 100%);
  --mesa-color:#2E2F36; --foreground:#4A4438;
}

/* ============================================================
   RESET / CONTAINER
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'DM Mono', 'Courier New', monospace;
  background: #1a1410;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

#game-container {
  width: 100vw;
  height: 100vh;
  max-width: 1200px;
  max-height: 820px;
  position: relative;
  overflow: hidden;
  background: #2a2520;
  border: 4px solid var(--dashboard-dk);
  box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,0,0,0.3);
}
#game-container::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: overlay;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  animation: fadeIn 0.4s ease-out;
}
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   TIME / WEATHER / STARS OVERLAYS
   ============================================================ */
.time-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  transition: background 2s;
  background: transparent;
}
.time-overlay.t-day    { background: transparent; }
.time-overlay.t-golden { background: linear-gradient(180deg, rgba(255,140,66,0.22) 0%, rgba(217,122,92,0.12) 100%); }
.time-overlay.t-dusk   { background: linear-gradient(180deg, rgba(60,25,90,0.4) 0%, rgba(140,60,100,0.22) 60%, rgba(255,120,80,0.18) 100%); }
.time-overlay.t-night  { background: linear-gradient(180deg, rgba(10,10,40,0.75) 0%, rgba(20,15,35,0.55) 100%); }

.star-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s;
  z-index: 5;
}
.star-layer.visible { opacity: 1; }
.star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}

.fog-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(225,225,225,0.75) 0%,
    rgba(225,225,225,0.55) 40%,
    rgba(225,225,225,0.25) 70%,
    rgba(225,225,225,0.05) 100%);
  opacity: 0;
  transition: opacity 1.5s;
  z-index: 11;                   /* above signs (10), below night-dim (13) */
}
.fog-overlay.active { opacity: 1; }

.rain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(75deg,
    rgba(200,210,230,0.6) 0px,
    rgba(200,210,230,0.6) 1px,
    transparent 1px,
    transparent 6px);
  background-size: 20px 60px;
  animation: rainFall 0.4s linear infinite;
  opacity: 0;
  transition: opacity 1s;
  z-index: 12;                   /* above signs, gets dimmed by night-dim (13) */
}
.rain-overlay.active { opacity: 1; }
@keyframes rainFall {
  from { background-position: 0 0;      }
  to   { background-position: -20px 60px; }
}

/* SNOW — same tier as rain, gentler animation */
.snow-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: 0;
  transition: opacity 1.5s;
  background-image:
    radial-gradient(circle 1.2px at 25% 25%, rgba(255,255,255,0.9),  transparent 65%),
    radial-gradient(circle 1.8px at 70% 55%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(circle 1px   at 15% 80%, rgba(255,255,255,0.7),  transparent 70%),
    radial-gradient(circle 1.5px at 85% 20%, rgba(255,255,255,0.8),  transparent 65%);
  background-size: 180px 240px, 220px 300px, 160px 220px, 200px 280px;
  animation: snowFall 14s linear infinite;
}
.snow-overlay.active { opacity: 1; }
@keyframes snowFall {
  from { background-position: 0 0,        0 0,         0 0,        0 0;        }
  to   { background-position: -40px 240px, 30px 300px, -25px 220px, 35px 280px; }
}

/* ============================================================
   SMALL SCREEN LABELS
   ============================================================ */
.biome-label {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  color: var(--cream-dark);
  font-family: 'Special Elite', serif;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 3px 10px;
  border-radius: 2px;
  z-index: 20;
  pointer-events: none;
  text-transform: uppercase;
}
.direction-label {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--chrome-dark);
  color: var(--cream);
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  padding: 3px 10px;
  border-radius: 2px;
  z-index: 20;
  pointer-events: none;
  text-transform: uppercase;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}
.weather-chip {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,0.55);
  color: var(--cream);
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: 2px;
  z-index: 20;
  pointer-events: none;
  text-transform: uppercase;
}

/* ============================================================
   GAS-AHEAD BANNER (appears 8s before pit stop)
   ============================================================ */
.gas-ahead-banner {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sign-blue);
  color: var(--sign-white);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 8px 20px;
  border: 3px solid var(--sign-white);
  border-radius: 3px;
  z-index: 16;
  display: none;
  animation: gasAheadFlash 1.2s ease-in-out infinite;
  pointer-events: none;
}
.gas-ahead-banner.visible { display: block; }
@keyframes gasAheadFlash {
  0%, 100% { box-shadow: 0 0 0 rgba(244,196,48,0);    }
  50%      { box-shadow: 0 0 20px rgba(244,196,48,0.6); }
}