/* ── EMERGENCY SERVICE TABS ──
   Shared tab bar used by emergency.html, medical.html, fire.html,
   police.html, and ses.html. Loaded alongside each page's own theme. */

.service-bar{position:relative;z-index:3;padding:32px 48px;background:rgba(5,7,10,.95);border-top:1px solid rgba(224,220,212,.06);border-bottom:1px solid rgba(224,220,212,.06);backdrop-filter:blur(12px)}
.service-tabs{display:flex;gap:2px;background:rgba(224,220,212,.04);padding:4px;border-radius:4px;max-width:720px;margin:0 auto}
.service-tab{flex:1;padding:10px 6px;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(224,220,212,.35);background:transparent;border:none;cursor:pointer;transition:all .3s;border-radius:2px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.service-tab:hover{color:#fff;background:rgba(224,220,212,.08)}
.service-tab.active.dispatch,.service-tab.dispatch:hover{background:rgba(224,220,212,.12);color:#fff}
.service-tab.active.med,.service-tab.med:hover{background:rgba(232,56,56,.15);color:var(--med-hi,#FF5050)}
.service-tab.active.fire,.service-tab.fire:hover{background:rgba(232,128,32,.15);color:var(--fire-hi,#FFA040)}
.service-tab.active.police,.service-tab.police:hover{background:rgba(56,144,232,.15);color:var(--police-hi,#60B0FF)}
.service-tab.active.ses,.service-tab.ses:hover{background:rgba(232,160,32,.15);color:var(--ses-hi,#FFC040)}
.tab-icon{width:26px;height:26px;opacity:.7;transition:opacity .3s,transform .3s;shape-rendering:crispEdges}
.service-tab:hover .tab-icon,.service-tab.active .tab-icon{opacity:1;transform:scale(1.1)}

/* Sprite hover animations */
@keyframes missilePulse{
  0%,100%{ opacity:.5 }
  50%{ opacity:1 }
}
.service-tab:hover .icon-missile .trail,
.service-tab.active .icon-missile .trail{
  animation:missilePulse .6s steps(1) infinite;
}

@keyframes pacChomp{
  0%,100%{ opacity:1 }
  50%{ opacity:0 }
}
.service-tab:hover .icon-pacman .pill,
.service-tab.active .icon-pacman .pill{
  animation:pacChomp .5s steps(1) infinite;
}

@keyframes flameFlicker{
  0%,100%{ opacity:1 }
  50%{ opacity:.6 }
}
.service-tab:hover .icon-flame,
.service-tab.active .icon-flame{
  animation:flameFlicker .35s steps(1) infinite;
}

@keyframes invaderMarch{
  0%,100%{ transform:translateX(0) }
  50%{ transform:translateX(2px) }
}
.service-tab:hover .icon-invader .leg,
.service-tab.active .icon-invader .leg{
  animation:invaderMarch .4s steps(1) infinite;
}

@keyframes tetrisRotate{
  0%,100%{ transform:rotate(0deg) }
  50%{ transform:rotate(90deg) }
}
.service-tab:hover .icon-tetris,
.service-tab.active .icon-tetris{
  animation:tetrisRotate 1s steps(1) infinite;
}

@media(max-width:600px){
  .service-bar{padding:24px 20px}
  .service-tab{font-size:8px;letter-spacing:.05em;padding:10px 4px}
}