:root{
  --asphalt-950:#0A0D12;
  --steel-800:#1A2029;
  --steel-700:#222a35;
  --steel-600:#3A4252;
  --code-red:#E1261C;
  --patrol-blue:#1B5FFF;
  --rescue-amber:#FFA630;
  --paper-white:#F3F5F8;
  --font-display:'Big Shoulders Stencil',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--asphalt-950);
  color:var(--paper-white);
  font-family:var(--font-body);
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

body{
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,0.015) 0 2px,transparent 2px 26px),
    radial-gradient(circle at 20% -10%,rgba(27,95,255,0.10),transparent 45%),
    radial-gradient(circle at 80% 0%,rgba(225,38,28,0.10),transparent 45%);
}

img,button{
  -webkit-user-drag:none;
}

.mono{font-family:var(--font-mono);}

/* ---------- console header ---------- */

.console{
  border-bottom:1px solid var(--steel-600);
  background:linear-gradient(180deg,var(--steel-800),var(--asphalt-950));
}

.lightbar{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  height:10px;
}

.lightbar .cell{
  background:#2a1010;
  transition:background-color .15s linear;
}

.lightbar .cell:nth-child(even){
  background:#0d1730;
}

.lightbar.idle .cell{
  background:#1c1f26;
  animation:idlepulse 3.2s ease-in-out infinite;
}

.lightbar.idle .cell:nth-child(3n){animation-delay:.6s;}
.lightbar.idle .cell:nth-child(3n+1){animation-delay:1.2s;}

@keyframes idlepulse{
  0%,100%{opacity:.35;}
  50%{opacity:.7;}
}

.lightbar.police .cell:nth-child(odd){background:var(--code-red);animation:flashA .55s steps(1) infinite;}
.lightbar.police .cell:nth-child(even){background:var(--patrol-blue);animation:flashB .55s steps(1) infinite;}

.lightbar.fire .cell:nth-child(odd){background:var(--code-red);animation:flashA .65s steps(1) infinite;}
.lightbar.fire .cell:nth-child(even){background:var(--paper-white);animation:flashB .65s steps(1) infinite;}

.lightbar.ems .cell:nth-child(odd){background:var(--code-red);animation:flashA .45s steps(1) infinite;}
.lightbar.ems .cell:nth-child(even){background:var(--paper-white);animation:flashB .45s steps(1) infinite;}

.lightbar.police.fire.ems .cell,
.lightbar.police.fire .cell,
.lightbar.police.ems .cell,
.lightbar.fire.ems .cell{
  animation-duration:.4s;
}

@keyframes flashA{0%,49%{opacity:1;}50%,100%{opacity:.18;}}
@keyframes flashB{0%,49%{opacity:.18;}50%,100%{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .lightbar .cell{animation:none !important;opacity:.6;}
  .status-dot.live,
  .siren-btn.active .btn-status{animation:none !important;}
}

.console-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  padding:22px clamp(16px,4vw,48px) 20px;
}

.console-id{
  display:flex;
  align-items:center;
  gap:16px;
}

.badge-icon{
  width:46px;
  height:50px;
  flex:none;
  background:linear-gradient(180deg,var(--patrol-blue),var(--code-red));
  clip-path:polygon(50% 0%,100% 18%,100% 62%,50% 100%,0% 62%,0% 18%);
  box-shadow:0 0 0 2px var(--steel-600) inset;
}

.eyebrow{
  margin:0 0 4px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--rescue-amber);
  text-transform:uppercase;
}

h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px,6vw,54px);
  letter-spacing:.02em;
  line-height:.95;
  text-transform:uppercase;
}

h1 span{color:var(--code-red);}

.subtitle{
  margin:6px 0 0;
  color:#aab2c0;
  font-size:14px;
  max-width:46ch;
}

.console-stats{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}

.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.stat-label{
  font-size:10px;
  letter-spacing:.12em;
  color:#7a8294;
  text-transform:uppercase;
}

.stat-value{
  font-size:20px;
  color:var(--paper-white);
}

.status-stat{
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--steel-600);
  box-shadow:0 0 0 0 transparent;
}

.status-dot.live{
  background:var(--code-red);
  animation:dotpulse 1s ease-in-out infinite;
}

@keyframes dotpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(225,38,28,.6);}
  50%{box-shadow:0 0 0 6px rgba(225,38,28,0);}
}

/* ---------- control strip ---------- */

.control-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px clamp(16px,4vw,48px);
  background:var(--steel-800);
  border-bottom:1px solid var(--steel-600);
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:10;
}

.volume-control{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#aab2c0;
}

.volume-control input[type="range"]{
  width:160px;
  accent-color:var(--patrol-blue);
}

.stop-all{
  border:1px solid var(--code-red);
  background:rgba(225,38,28,0.12);
  color:var(--paper-white);
  font-family:var(--font-mono);
  letter-spacing:.08em;
  font-size:13px;
  padding:10px 18px;
  border-radius:4px;
  cursor:pointer;
  transition:background-color .15s,transform .1s;
}

.stop-all:hover{background:rgba(225,38,28,0.28);}
.stop-all:active{transform:scale(.97);}

/* ---------- departments ---------- */

main{
  padding:8px clamp(16px,4vw,48px) 40px;
  max-width:1180px;
  margin:0 auto;
}

.dept{
  margin-top:34px;
}

.dept-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--steel-600);
  padding-bottom:10px;
}

.dept-icon{
  width:30px;
  height:30px;
  flex:none;
  background:var(--steel-600);
}

.icon-shield{clip-path:polygon(50% 0%,100% 16%,100% 58%,50% 100%,0% 58%,0% 16%);background:var(--patrol-blue);}
.icon-flame{clip-path:polygon(50% 0%,78% 32%,92% 70%,50% 100%,8% 70%,22% 32%);background:var(--code-red);}
.icon-cross{clip-path:polygon(38% 0%,62% 0%,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0% 62%,0% 38%,38% 38%);background:var(--code-red);}
.icon-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:var(--rescue-amber);}

.dept h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,3vw,28px);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.button-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}

.siren-btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  background:var(--steel-800);
  border:1px solid var(--steel-600);
  border-radius:6px;
  padding:16px 16px 14px;
  cursor:pointer;
  color:var(--paper-white);
  font-family:var(--font-body);
  touch-action:manipulation;
  transition:border-color .15s,background-color .15s,transform .08s;
}

.siren-btn.wide{
  grid-column:span 2;
}

.siren-btn:hover{
  border-color:var(--steel-600);
  background:#1f2733;
}

.siren-btn:active{
  transform:scale(.98);
}

.siren-btn:focus-visible{
  outline:2px solid var(--rescue-amber);
  outline-offset:2px;
}

.btn-status{
  position:absolute;
  top:14px;
  right:14px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--steel-600);
}

.siren-btn.active{
  background:rgba(225,38,28,0.08);
  border-color:var(--code-red);
  box-shadow:0 0 0 1px var(--code-red) inset,0 0 22px -6px var(--code-red);
}

.siren-btn.active .btn-status{
  background:var(--code-red);
  animation:dotpulse 1s ease-in-out infinite;
}

.btn-code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:.03em;
}

.btn-desc{
  font-size:12.5px;
  color:#9aa3b3;
  line-height:1.35;
}

/* ---------- footer ---------- */

footer{
  padding:24px clamp(16px,4vw,48px) 40px;
  border-top:1px solid var(--steel-600);
  color:#7a8294;
  font-size:12px;
  max-width:1180px;
  margin:0 auto;
}

footer p{margin:0 0 8px;line-height:1.5;}

.credit{
  font-family:var(--font-mono);
  letter-spacing:.06em;
  color:#525b6b;
}

@media (max-width:640px){
  .console-body{align-items:flex-start;}
  .console-stats{gap:18px;}
  .button-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}