/* ── EMERGENCY RETRO ARCADE BACKGROUND ──
   Loaded by emergency.html, medical.html, fire.html, police.html, ses.html.
   Each page sets --dept-tint to its department colour. */

:root{
  --retro-bg:#05070a;
  --dept-tint:#a0a0a0;
}

/* Layer 1: animated starfield */
.retro-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(224,220,212,.45) 1px, transparent 1px),
    radial-gradient(circle, rgba(224,220,212,.25) 1px, transparent 1px),
    radial-gradient(circle, rgba(224,220,212,.12) 1px, transparent 1px);
  background-size: 4px 4px, 16px 16px, 64px 64px;
  background-position: 0 0, 8px 8px, 32px 32px;
  animation: starDrift 60s linear infinite;
}

@keyframes starDrift{
  from { background-position: 0 0, 8px 8px, 32px 32px; }
  to   { background-position: 0 64px, 8px 72px, 32px 96px; }
}

/* Layer 2: CRT scanlines */
.retro-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.10),
    rgba(0,0,0,.10) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  z-index:1;
}

/* Layer 3: vignette */
.retro-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
  z-index:2;
}

/* Layer 4: department grid */
.retro-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--dept-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--dept-tint) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.18;
}

.retro-grid::before,
.retro-grid::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.retro-grid::before{
  opacity:.62;
  mix-blend-mode:screen;
  background:
    var(--retro-scene-a, radial-gradient(circle at 50% 52%, color-mix(in srgb,var(--dept-tint) 18%,transparent), transparent 28%)),
    var(--retro-scene-b, linear-gradient(transparent, transparent));
}

.retro-grid::after{
  opacity:.42;
  background:var(--retro-scene-c, linear-gradient(transparent, transparent));
}

body[data-service="000"]{
  --retro-scene-a:
    radial-gradient(circle at 50% 50%, transparent 0 12%, color-mix(in srgb,var(--dept-tint) 30%,transparent) 12.5% 13%, transparent 13.5% 24%, color-mix(in srgb,#E88020 24%,transparent) 24.5% 25%, transparent 25.5% 36%, color-mix(in srgb,#3890E8 22%,transparent) 36.5% 37%, transparent 37.5%);
  --retro-scene-b:
    linear-gradient(90deg, transparent 0 49.8%, color-mix(in srgb,var(--dept-tint) 34%,transparent) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 0 49.8%, color-mix(in srgb,#E8A020 28%,transparent) 50%, transparent 50.2%);
  --retro-scene-c:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(224,220,212,.08) 35px 36px);
}

body[data-service="medical"]{
  --retro-scene-a:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb,var(--dept-tint) 22%,transparent) 8.2% 8.4%, transparent 8.6% 100%),
    linear-gradient(90deg, transparent 0 91.6%, color-mix(in srgb,var(--dept-tint) 18%,transparent) 91.8% 92%, transparent 92.2% 100%),
    radial-gradient(ellipse at 50% 64%, color-mix(in srgb,var(--dept-tint) 20%,transparent), transparent 42%);
  --retro-scene-b:
    linear-gradient(120deg, transparent 0 43%, color-mix(in srgb,var(--dept-tint) 26%,transparent) 43.2% 43.5%, transparent 43.7%),
    linear-gradient(60deg, transparent 0 56%, color-mix(in srgb,var(--dept-tint) 16%,transparent) 56.2% 56.5%, transparent 56.7%);
  --retro-scene-c:
    repeating-linear-gradient(90deg, transparent 0 44px, color-mix(in srgb,var(--dept-tint) 16%,transparent) 45px 46px, transparent 47px 120px);
}

body[data-service="fire"]{
  --retro-scene-a:
    radial-gradient(ellipse at 30% 78%, color-mix(in srgb,var(--dept-tint) 30%,transparent), transparent 34%),
    radial-gradient(ellipse at 70% 76%, color-mix(in srgb,#FF5A20 22%,transparent), transparent 30%);
  --retro-scene-b:
    repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb,var(--dept-tint) 18%,transparent) 35px 37px, transparent 38px 86px),
    linear-gradient(0deg, color-mix(in srgb,var(--dept-tint) 18%,transparent), transparent 38%);
  --retro-scene-c:
    repeating-radial-gradient(ellipse at 50% 86%, rgba(255,159,64,.1) 0 2px, transparent 3px 22px);
}

body[data-service="police"]{
  --retro-scene-a:
    radial-gradient(ellipse at 28% 50%, color-mix(in srgb,#FF5A5F 16%,transparent), transparent 24%),
    radial-gradient(ellipse at 72% 50%, color-mix(in srgb,var(--dept-tint) 24%,transparent), transparent 26%);
  --retro-scene-b:
    repeating-linear-gradient(90deg, transparent 0 76px, color-mix(in srgb,var(--dept-tint) 16%,transparent) 77px 79px, transparent 80px 150px),
    repeating-linear-gradient(0deg, transparent 0 58px, color-mix(in srgb,var(--dept-tint) 12%,transparent) 59px 61px, transparent 62px 140px);
  --retro-scene-c:
    linear-gradient(90deg, transparent 0 47%, rgba(255,90,95,.1) 47.2% 47.8%, transparent 48%, transparent 52%, color-mix(in srgb,var(--dept-tint) 18%,transparent) 52.2% 52.8%, transparent 53%);
}

body[data-service="ses"]{
  --retro-scene-a:
    radial-gradient(ellipse at 50% 76%, color-mix(in srgb,var(--dept-tint) 24%,transparent), transparent 42%),
    radial-gradient(ellipse at 50% 30%, rgba(94,234,212,.08), transparent 26%);
  --retro-scene-b:
    repeating-linear-gradient(8deg, transparent 0 44px, color-mix(in srgb,var(--dept-tint) 16%,transparent) 45px 47px, transparent 48px 96px),
    repeating-linear-gradient(98deg, transparent 0 66px, rgba(94,234,212,.09) 67px 69px, transparent 70px 132px);
  --retro-scene-c:
    repeating-radial-gradient(ellipse at 50% 88%, transparent 0 28px, color-mix(in srgb,var(--dept-tint) 14%,transparent) 29px 31px, transparent 32px 58px);
}

/* CRT flash for Konami easter egg */
.crt-flash{
  animation: crtFlash .4s ease-out;
}
@keyframes crtFlash{
  0%   { filter: brightness(2.5) contrast(1.5) saturate(0); }
  100% { filter: brightness(1) contrast(1) saturate(1); }
}

/* Arcade bezel helper for CTA sections */
.arcade-bezel{
  position:relative;
  border:18px solid rgba(20,24,30,.92);
  border-radius:28px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.9),
    0 0 0 1px rgba(224,220,212,.08),
    0 20px 80px rgba(0,0,0,.6);
  margin:0 auto;
  max-width:1100px;
}
.arcade-bezel::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:28px;
  pointer-events:none;
  box-shadow:inset 0 0 18px rgba(224,220,212,.06);
}

/* Visible mini-game injected by emergency-konami.js */
.retro-game{
  position:fixed;
  left:clamp(12px,2vw,22px);
  bottom:clamp(12px,2vw,22px);
  z-index:70;
  width:min(188px,calc(100vw - 24px));
  border:1px solid color-mix(in srgb,var(--dept-tint) 58%,rgba(224,220,212,.18));
  background:linear-gradient(180deg,rgba(5,7,10,.92),rgba(8,12,16,.84));
  box-shadow:0 18px 54px rgba(0,0,0,.46),0 0 30px color-mix(in srgb,var(--dept-tint) 16%,transparent);
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  color:rgba(224,220,212,.92);
  overflow:hidden;
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
}
.retro-game-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-bottom:1px solid rgba(224,220,212,.08);
  background:color-mix(in srgb,var(--dept-tint) 9%,transparent);
}
.retro-game-title{
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dept-tint);
}
.retro-game-score{
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(224,220,212,.72);
  white-space:nowrap;
}
.retro-game-canvas{
  display:block;
  width:100%;
  aspect-ratio:220 / 128;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--dept-tint) 12%,transparent),transparent 45%),
    #05070a;
}
.retro-game-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px 9px;
  border-top:1px solid rgba(224,220,212,.08);
  color:rgba(224,220,212,.46);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.retro-game-toggle{
  border:0;
  background:transparent;
  color:rgba(224,220,212,.54);
  font:inherit;
  font-size:9px;
  cursor:pointer;
  padding:0;
}
.retro-game-toggle:hover{color:var(--dept-tint)}
.retro-game.minimized .retro-game-canvas,
.retro-game.minimized .retro-game-foot{display:none}
.retro-game.boost{box-shadow:0 18px 54px rgba(0,0,0,.46),0 0 42px var(--dept-tint)}

@media (prefers-reduced-motion: reduce){
  .retro-bg{ animation:none; }
}

@media (max-width: 768px){
  .retro-grid{ opacity:.07; }
  .arcade-bezel{ border-width:10px; border-radius:16px; margin:0 20px; }
  .arcade-bezel::before{ inset:-10px; border-radius:16px; }
  .retro-game{left:auto;right:10px;bottom:10px;transform:none;width:min(168px,calc(100vw - 20px))}
  .retro-game:not(.minimized) .retro-game-foot{display:none}
  .retro-game-canvas{aspect-ratio:220 / 104}
}

@media (max-width: 560px){
  .retro-game{display:none}
}

/* ── CONTENT VISIBILITY BOOST ──
   Makes body text and cards brighter against the retro background. */
/* The hero must be transparent so the ambient arcade canvas (z0, fixed)
   shows through it — the per-department game lives behind the hero. */
body.emergency-layout .hero{ background:transparent !important; }
.content{background:rgba(5,7,10,.72) !important}
.section-lead{color:rgba(224,220,212,.92) !important}
.card-body{color:rgba(224,220,212,.88) !important}
.card-meta{color:rgba(224,220,212,.65) !important}
.status-addr{color:rgba(224,220,212,.7) !important}
.status-stats{color:rgba(224,220,212,.85) !important}
.log-row{color:rgba(224,220,212,.85) !important}
.tier-table td{color:rgba(224,220,212,.88) !important}