/* ==========================================================================
   Wasteland Pulse - Post-Apocalyptic Terminal Styling & Sprite Mapping
   Palette:
   - Obsidian: #070b14
   - Card Navy: #0d1527
   - Border Slate: #1e293b
   - Hazard Yellow: #f59e0b
   - Survival Green: #22c55e
   - Radiation Crimson: #ef4444
   - Terminal Cyan: #06b6d4
   ========================================================================== */

:root {
  --bg-obsidian: #070b14;
  --card-bg: #0d1527;
  --card-border: #1e293b;
  --hazard-yellow: #f59e0b;
  --survival-green: #22c55e;
  --rad-crimson: #ef4444;
  --terminal-cyan: #06b6d4;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  background-color: var(--bg-obsidian);
  color: #e2e8f0;
  font-family: var(--font-mono);
  overflow-x: hidden;
}

/* Clean Post-Apocalyptic Screen Styling (Scanlines disabled for clean, modern readability) */
.crt-overlay::before {
  display: none;
}

.crt-vignette::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 41;
}

/* Custom Scrollbar for Terminal Radio Feed */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090e1a;
  border-left: 1px solid #1e293b;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Pixel Art Sprite Sheet Cropping (1024x576 Unified Sprite Sheet) */
.sprite-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('../images/wasteland-sprites.png');
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Standard 32px Sprites */
.sprite-survivor     { width: 32px; height: 32px; background-size: 1024px 576px; background-position: -21px -26px; }
.sprite-scavenger    { width: 32px; height: 32px; background-size: 1024px 576px; background-position: -21px -26px; }
.sprite-farmer       { width: 32px; height: 32px; background-size: 1024px 576px; background-position: -229px -28px; }
.sprite-guard        { width: 32px; height: 32px; background-size: 1024px 576px; background-position: -424px -27px; }
.sprite-engineer     { width: 32px; height: 32px; background-size: 1024px 576px; background-position: -617px -28px; }

.sprite-hazard-rad   { width: 32px; height: 32px; background-size: 364px 205px; background-position: -288px -15px; }
.sprite-hazard-bio   { width: 32px; height: 32px; background-size: 364px 205px; background-position: -326px -15px; }
.sprite-hazard-alert { width: 32px; height: 32px; background-size: 364px 205px; background-position: -288px -54px; }
.sprite-health       { width: 32px; height: 32px; background-size: 364px 205px; background-position: -326px -54px; }

.sprite-water        { width: 32px; height: 32px; background-size: 264px 149px; background-position: 1px -67px; }
.sprite-food         { width: 32px; height: 32px; background-size: 264px 149px; background-position: -30px -68px; }
.sprite-scrap        { width: 32px; height: 32px; background-size: 237px 134px; background-position: -58px -58px; }
.sprite-power        { width: 32px; height: 32px; background-size: 237px 134px; background-position: -91px -58px; }
.sprite-turret       { width: 32px; height: 32px; background-size: 237px 134px; background-position: -126px -58px; }
.sprite-radio        { width: 32px; height: 32px; background-size: 258px 145px; background-position: -202px -67px; }

/* Small 24px Sprite Variations */
.sprite-sm.sprite-survivor     { width: 24px; height: 24px; background-size: 768px 432px; background-position: -16px -20px; }
.sprite-sm.sprite-scavenger    { width: 24px; height: 24px; background-size: 768px 432px; background-position: -16px -20px; }
.sprite-sm.sprite-farmer       { width: 24px; height: 24px; background-size: 768px 432px; background-position: -172px -21px; }
.sprite-sm.sprite-guard        { width: 24px; height: 24px; background-size: 768px 432px; background-position: -318px -20px; }
.sprite-sm.sprite-engineer     { width: 24px; height: 24px; background-size: 768px 432px; background-position: -463px -21px; }

.sprite-sm.sprite-hazard-rad   { width: 24px; height: 24px; background-size: 273px 154px; background-position: -216px -11px; }
.sprite-sm.sprite-hazard-bio   { width: 24px; height: 24px; background-size: 273px 154px; background-position: -245px -11px; }
.sprite-sm.sprite-hazard-alert { width: 24px; height: 24px; background-size: 273px 154px; background-position: -216px -41px; }
.sprite-sm.sprite-health       { width: 24px; height: 24px; background-size: 273px 154px; background-position: -245px -41px; }

.sprite-sm.sprite-water        { width: 24px; height: 24px; background-size: 198px 111px; background-position: 0px -50px; }
.sprite-sm.sprite-food         { width: 24px; height: 24px; background-size: 198px 111px; background-position: -22px -51px; }
.sprite-sm.sprite-scrap        { width: 24px; height: 24px; background-size: 178px 100px; background-position: -43px -43px; }
.sprite-sm.sprite-power        { width: 24px; height: 24px; background-size: 178px 100px; background-position: -69px -43px; }
.sprite-sm.sprite-turret       { width: 24px; height: 24px; background-size: 178px 100px; background-position: -94px -43px; }
.sprite-sm.sprite-radio        { width: 24px; height: 24px; background-size: 194px 109px; background-position: -151px -50px; }

/* Large 40px Sprite Variations */
.sprite-lg.sprite-survivor     { width: 40px; height: 40px; background-size: 1280px 720px; background-position: -26px -33px; }
.sprite-lg.sprite-scavenger    { width: 40px; height: 40px; background-size: 1280px 720px; background-position: -26px -33px; }
.sprite-lg.sprite-farmer       { width: 40px; height: 40px; background-size: 1280px 720px; background-position: -286px -35px; }
.sprite-lg.sprite-guard        { width: 40px; height: 40px; background-size: 1280px 720px; background-position: -530px -34px; }
.sprite-lg.sprite-engineer     { width: 40px; height: 40px; background-size: 1280px 720px; background-position: -771px -35px; }

.sprite-lg.sprite-hazard-rad   { width: 40px; height: 40px; background-size: 455px 256px; background-position: -360px -18px; }
.sprite-lg.sprite-hazard-bio   { width: 40px; height: 40px; background-size: 455px 256px; background-position: -408px -18px; }
.sprite-lg.sprite-hazard-alert { width: 40px; height: 40px; background-size: 455px 256px; background-position: -360px -68px; }
.sprite-lg.sprite-health       { width: 40px; height: 40px; background-size: 455px 256px; background-position: -408px -68px; }

.sprite-lg.sprite-water        { width: 40px; height: 40px; background-size: 330px 186px; background-position: 1px -83px; }
.sprite-lg.sprite-food         { width: 40px; height: 40px; background-size: 330px 186px; background-position: -37px -85px; }
.sprite-lg.sprite-scrap        { width: 40px; height: 40px; background-size: 297px 167px; background-position: -72px -72px; }
.sprite-lg.sprite-power        { width: 40px; height: 40px; background-size: 297px 167px; background-position: -114px -72px; }
.sprite-lg.sprite-turret       { width: 40px; height: 40px; background-size: 297px 167px; background-position: -157px -72px; }
.sprite-lg.sprite-radio        { width: 40px; height: 40px; background-size: 323px 181px; background-position: -252px -83px; }

/* Terminal Accents & Glow */
.border-glow-amber {
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.border-glow-crimson {
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
}
.border-glow-cyan {
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}
.border-glow-green {
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.text-glow-amber {
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.text-glow-green {
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.text-glow-red {
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.text-glow-cyan {
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

/* Pulsing radar dot animation */
@keyframes radar-ping {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.9; }
}
.animate-radar-ping {
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Subtle CRT flicker */
@keyframes screen-flicker {
  0% { opacity: 0.985; }
  50% { opacity: 1; }
  52% { opacity: 0.97; }
  54% { opacity: 1; }
  100% { opacity: 0.99; }
}
.crt-flicker {
  animation: screen-flicker 0.15s infinite;
}

/* Delegation input range customization */
input[type="range"] {
  accent-color: #06b6d4;
}
input[type="range"]::-webkit-slider-thumb {
  cursor: pointer;
  border: 1px solid #06b6d4;
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
}

/* Badge tags */
.hazard-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}