/* Phase 2 atmosphere: per-zone color-grade overlays (spec §5A).
   Keyed on the body.zone-* classes toggled by js/world/lighting.js. The 3D-side
   grade (fog color/density, sun + hemisphere tints) lives in lighting.js; these
   rules only re-dress the existing #vignette and #grain overlay divs from
   css/style.css (read-only). This file is linked after style.css, so equal
   specificity wins over the base zone-b/zone-c grain rules. */

/* Zone A — Novyy Mir / Red Bastion: warm sepia lift, orange midtones,
   slight vignette. Hopeful. */
body.zone-a #vignette {
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(46, 26, 6, 0.5) 100%),
    linear-gradient(rgba(255, 166, 60, 0.045), rgba(255, 166, 60, 0.045));
}
body.zone-a #grain { opacity: 0.03; }

/* Zone B — Outskirts: matches Zone A's warm sepia lift (player request —
   the sickly dark treatment made exploring feel dreary). */
body.zone-b #vignette {
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(46, 26, 6, 0.5) 100%),
    linear-gradient(rgba(255, 166, 60, 0.045), rgba(255, 166, 60, 0.045));
}
body.zone-b #grain { opacity: 0.03; }

/* Zone C — Deadlands: matches Zone A's warm sepia lift (player request —
   the near-monochrome dark red grade made exploring feel dreary). */
body.zone-c #vignette {
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(46, 26, 6, 0.5) 100%),
    linear-gradient(rgba(255, 166, 60, 0.045), rgba(255, 166, 60, 0.045));
}
body.zone-c #grain { opacity: 0.03; }

/* Zone D — Old City Ruins: matches Zone A's warm sepia lift (player request —
   the cold blue-grey grade read as too dark/dreary next to the safe city). */
body.zone-d #vignette {
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(46, 26, 6, 0.5) 100%),
    linear-gradient(rgba(255, 166, 60, 0.045), rgba(255, 166, 60, 0.045));
}
body.zone-d #grain { opacity: 0.03; }

/* Phase 8: gas mask overlay — two round viewports + condensation + dark surround.
   Toggled by js/player/weapons.js via body.gas-mask class when state.player.gasMask. */
#gas-mask-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 38% 48%, transparent 16%, rgba(10,12,8,0.92) 22%),
              radial-gradient(ellipse at 62% 48%, transparent 16%, rgba(10,12,8,0.92) 22%);
}
body.gas-mask #gas-mask-overlay { display: block; }
/* Condensation shimmer on the lenses */
body.gas-mask #gas-mask-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 38% 48%, rgba(180,200,180,0.06) 0%, transparent 14%),
    radial-gradient(ellipse at 62% 48%, rgba(180,200,180,0.06) 0%, transparent 14%);
  animation: gasCondensation 4s ease-in-out infinite alternate;
}
@keyframes gasCondensation {
  0%   { opacity: 0.4; }
  100% { opacity: 0.8; }
}