:root {
  --alarm-1: #26eef0;
  --alarm-2: #83f36b;
  --alarm-3: #ffe24a;
  --alarm-4: #ff922e;
  --alarm-5: #ff3159;
}

#gameScreen .alarm-meter {
  position: relative;
  flex-shrink: 0;
  margin-top: 6px;
  padding-bottom: 3px;
  transition: margin-bottom 260ms cubic-bezier(.16,1,.3,1);
}

#gameScreen .alarm-meter.heat-critical { margin-bottom: 0; }

.alarm-meter .heat-meter-head {
  margin-bottom: 4px;
  color: #eefcff;
  font: 1000 10px/1 var(--mono);
}

.alarm-meter .heat-meter-head span:last-child {
  color: var(--alarm-color, var(--alarm-1));
  text-shadow: 0 0 10px var(--alarm-color, var(--alarm-1));
}

#gameScreen .alarm-meter .heat-meter-track.alarm-lights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  height: 38px;
  padding: 4px;
  overflow: visible;
  border: 2px solid rgba(216, 235, 255, .36);
  border-radius: 8px;
  background: rgba(2, 6, 12, .88);
  box-shadow: inset 0 0 14px #000, 0 0 12px rgba(36, 242, 239, .08);
}

.alarm-light {
  --light-color: #fff;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: visible;
  border: 2px solid color-mix(in srgb, var(--light-color) 30%, #25303e);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.045), rgba(10,15,22,.96) 72%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.72);
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}

.alarm-light:nth-child(1) { --alert-order: 0; }
.alarm-light:nth-child(2) { --alert-order: 1; }
.alarm-light:nth-child(3) { --alert-order: 2; }
.alarm-light:nth-child(4) { --alert-order: 3; }
.alarm-light:nth-child(5) { --alert-order: 4; }

.alarm-light[data-alarm-level="1"] { --light-color: var(--alarm-1); }
.alarm-light[data-alarm-level="2"] { --light-color: var(--alarm-2); }
.alarm-light[data-alarm-level="3"] { --light-color: var(--alarm-3); }
.alarm-light[data-alarm-level="4"] { --light-color: var(--alarm-4); }
.alarm-light[data-alarm-level="5"] { --light-color: var(--alarm-5); }

.alarm-light b {
  max-width: 100%;
  padding: 0 2px;
  color: #647184;
  font: 1000 11px/1 var(--mono);
  white-space: nowrap;
}

.alarm-light.is-on {
  border-color: #fff;
  background:
    radial-gradient(circle at 50% 48%, #fff 0 8%, var(--light-color) 30%, color-mix(in srgb, var(--light-color) 70%, #070b11) 68%, #070b11 100%);
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.92),
    inset 0 0 20px var(--light-color),
    0 0 8px var(--light-color),
    0 0 18px color-mix(in srgb, var(--light-color) 78%, transparent);
  animation: alarmLightWave var(--alarm-wave-speed, 2.4s) ease-in-out infinite;
  animation-delay: calc(-2.4s + var(--alert-order, 0) * .22s);
}

.alarm-light.is-on b {
  color: #05070a;
  text-shadow: 0 1px rgba(255,255,255,.76), 0 0 7px #fff;
}

.alarm-light.is-frozen {
  border-color: #b9f9ff;
  background: repeating-linear-gradient(135deg, rgba(174,247,255,.18) 0 3px, rgba(21,72,88,.36) 3px 6px);
  box-shadow: inset 0 0 8px #7cecff, 0 0 6px rgba(124,236,255,.5);
}

.alarm-light.is-frozen b { color: #d8fdff; text-shadow: 0 1px 2px #031419, 0 -1px 2px #031419; }
.alarm-light.is-permanent-frozen::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -5px;
  border: 3px solid #8ef8ff;
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(142,248,255,.5), 0 0 12px rgba(142,248,255,.8);
  pointer-events: none;
  animation: permanentFreezeShield 1.8s ease-in-out infinite;
}
.alarm-light.is-permanent-armed::before {
  border-color: #fff;
  border-style: dashed;
  box-shadow: inset 0 0 12px #8ef8ff, 0 0 18px #8ef8ff;
  animation-duration: .7s;
}
.alarm-light.is-on.is-just-on {
  animation: alarmLightWave var(--alarm-wave-speed, 2.4s) ease-in-out infinite, alarmLightIgnite 650ms cubic-bezier(.16,1,.3,1);
  animation-delay: calc(-2.4s + var(--alert-order, 0) * .22s), 0s;
}
.alarm-light.is-just-off { animation: alarmLightClear 520ms ease-out; }
.alarm-light.is-thawing { animation: alarmLightThaw 620ms ease-out; }

.alarm-meter.heat-up { animation: alarmMeterHit 520ms ease-out; }
.alarm-meter.heat-down { animation: alarmMeterCool 620ms ease-out; }
.alarm-meter.heat-critical .alarm-lights {
  border-color: var(--alarm-5);
  box-shadow: inset 0 0 14px #000, 0 0 18px rgba(255,49,89,.72);
}

.alarm-counter-tag {
  position: relative;
  z-index: 5;
  width: max-content;
  max-width: 100%;
  margin: 6px auto 0;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 2px solid #ff3159;
  border-radius: 999px;
  background: #160308;
  color: #fff;
  box-shadow: 0 0 14px rgba(255,49,89,.82), 3px 3px 0 #000;
  white-space: nowrap;
  animation: alarmCounterTagPulse .62s ease-in-out infinite;
}

.alarm-counter-tag.show { display: flex; }
.alarm-counter-tag span { color: #ff8298; font: 1000 7px/1 var(--mono); }
.alarm-counter-tag b { color: #fff; font: 1000 11px/1 var(--mono); }

.alarm-counter-banner {
  position: absolute;
  z-index: 94;
  inset: 0;
  display: none;
  place-content: center;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,25,61,.38), rgba(10,0,6,.08) 58%, transparent 75%);
  text-align: center;
}

.alarm-counter-banner.show { display: grid; animation: alarmBannerScene 1.45s cubic-bezier(.16,1,.3,1) both; }
.alarm-counter-banner span {
  padding: 5px 12px;
  border: 2px solid #ff3159;
  background: #080208;
  color: #ff3159;
  font: 1000 13px/1 var(--mono);
  box-shadow: 0 0 20px rgba(255,49,89,.8);
}
.alarm-counter-banner strong {
  max-width: 390px;
  margin-top: 10px;
  color: #fff;
  font: 1000 39px/.9 var(--font);
  text-shadow: 5px 5px 0 #240008, 0 0 18px #ff3159, 0 0 38px #ff3159;
}
.alarm-counter-banner strong b { color: #ffe24a; }

.hand-heat-up { display: none !important; }

.cooldown-alert-lights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 7px;
  background: #06100f;
  box-shadow: inset 0 0 10px #000;
}
.cooldown-alert-lights > i {
  --light-color: #fff;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 30px;
  border: 2px solid color-mix(in srgb, var(--light-color) 36%, #25303e);
  border-radius: 5px;
  color: #65717b;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.05), #101b1b 72%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.72);
  font-style: normal;
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}
.cooldown-alert-lights > i b { font: 1000 11px/1 var(--mono); white-space: nowrap; }
.cooldown-alert-lights > i:nth-child(1) { --light-color: var(--alarm-1); --alert-order: 0; }
.cooldown-alert-lights > i:nth-child(2) { --light-color: var(--alarm-2); --alert-order: 1; }
.cooldown-alert-lights > i:nth-child(3) { --light-color: var(--alarm-3); --alert-order: 2; }
.cooldown-alert-lights > i:nth-child(4) { --light-color: var(--alarm-4); --alert-order: 3; }
.cooldown-alert-lights > i:nth-child(5) { --light-color: var(--alarm-5); --alert-order: 4; }
.cooldown-alert-lights > i.is-on {
  border-color: #fff;
  color: #070b11;
  background:
    radial-gradient(circle at 50% 48%, #fff 0 8%, var(--light-color) 30%, color-mix(in srgb, var(--light-color) 70%, #07100f) 70%, #07100f 100%);
  box-shadow: inset 0 0 8px #fff, inset 0 0 20px var(--light-color), 0 0 10px var(--light-color), 0 0 20px var(--light-color);
  animation: alarmLightWave 2.4s ease-in-out infinite;
  animation-delay: calc(-2.4s + var(--alert-order, 0) * .22s);
}
.cooldown-alert-lights > i.is-frozen { background: repeating-linear-gradient(135deg, #8eefff 0 3px, #17647a 3px 6px); color: #031419; }
.cooldown-alert-lights > i.is-permanent-frozen { outline: 3px solid #8ef8ff; outline-offset: 2px; }
.cooldown-alert-lights > i.is-permanent-armed { outline-style: dashed; filter: brightness(1.45); }

.cooldown-option.option-risky {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
}
.cooldown-option.option-risky > b {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  font-size: 20px;
  text-align: left;
}
.cooldown-option.option-risky > small { grid-row: 4; }

.score-pill.pill-alert-step {
  width: 48px;
  height: 42px;
}
.score-pill.pill-alert-step .pill-inner { font-size: 25px; }
#scoreCounter.counter-alert-steps {
  width: 126px;
  min-width: 0;
  padding: 10px 5px;
  white-space: normal;
  overflow-wrap: normal;
  font-size: 20px;
  line-height: 1.1;
}
.score-pill.pill-non-scoring-penalty .pill-inner {
  border-color: #ff9cac;
  color: #fff;
  background: linear-gradient(160deg, #ff4c67, #b2082b);
  box-shadow: 0 0 17px rgba(255,49,89,.85), inset 0 1px rgba(255,255,255,.35);
}

#gameScreen .game-spike-slot.filled { touch-action: none; }
.game-spike-slot.spike-drag-source { opacity: .3; filter: grayscale(.5); }
.game-spike-slot.spike-drop-target {
  z-index: 10;
  border-color: #fff;
  box-shadow: 0 0 0 3px #56f5ff, 0 0 24px #56f5ff, inset 0 0 16px rgba(86,245,255,.42);
  transform: translateY(-5px) scale(1.06);
}
.spike-drag-ghost {
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  transform: translate(-50%, -58%) rotate(4deg) scale(1.08);
  border: 3px solid #fff;
  border-radius: 6px;
  background: #160d1d;
  box-shadow: 0 18px 34px rgba(0,0,0,.72), 0 0 24px #56f5ff;
  pointer-events: none;
}
.game-spike-slot.spike-drop-success { overflow: visible; animation: spikeDropSuccess 760ms cubic-bezier(.16,1.35,.3,1); }
.spike-charged-tag {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 5px);
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 2px solid #fff;
  border-radius: 999px;
  color: #031014;
  background: #76ffff;
  box-shadow: 0 0 18px #76ffff, 3px 3px 0 #000;
  font: 1000 10px/1 var(--mono);
  white-space: nowrap;
  animation: spikeChargedTag 1.2s cubic-bezier(.16,1.35,.3,1) forwards;
  pointer-events: none;
}

@keyframes alarmLightWave {
  0%, 72%, 100% { filter: brightness(.92); transform: scale(.97); }
  18% { filter: brightness(1.32) saturate(1.15) drop-shadow(0 0 7px var(--light-color)); transform: scale(1.025); }
}
@keyframes permanentFreezeShield { 0%,100% { opacity: .62; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes spikeDropSuccess { 0% { transform: translateY(-12px) scale(1.18); filter: brightness(2.2); } 55% { transform: translateY(2px) scale(.98); } 100% { transform: none; filter: none; } }
@keyframes spikeChargedTag { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 22%,72% { opacity: 1; transform: translate(-50%, -7px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(.9); } }
@keyframes alarmLightIgnite { 0% { transform: scale(.65); filter: brightness(3); } 48% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes alarmLightClear { 0% { filter: brightness(2); transform: scale(1.08); } 100% { filter: brightness(.55); transform: scale(1); } }
@keyframes alarmLightThaw { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(-4px) rotate(-2deg); } 48% { transform: translateX(4px) rotate(2deg); } 72% { transform: translateX(-2px); } }
@keyframes alarmMeterHit { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
@keyframes alarmMeterCool { 0% { filter: brightness(1.8) saturate(.2); } 100% { filter: none; } }
@keyframes alarmCounterTagPulse { 0%,100% { transform: scale(.98); } 50% { transform: scale(1.05); } }
@keyframes alarmBannerScene { 0% { opacity: 0; transform: scale(1.25); } 15%, 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .alarm-light.is-on,
  .cooldown-alert-lights > i.is-on,
  .alarm-light.is-just-on,
  .alarm-light.is-permanent-frozen::before,
  .alarm-counter-tag,
  .alarm-counter-banner.show { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .game-spike-slot.spike-drop-success,
  .spike-charged-tag { animation-duration: 1ms !important; }
}
#gameScreen .crew-lane-wrap { position: relative; }
.crew-available-banner {
  position: absolute;
  inset: auto 0 0;
  z-index: 12;
  padding: 6px 4px;
  border-block: 2px solid #a2ffbc;
  background: #32ed80;
  color: #061b0e;
  font: 1000 16px/1.1 var(--mono);
  text-align: center;
  box-shadow: 0 0 18px #32ed8080;
  pointer-events: none;
  visibility: hidden;
}
.crew-available-banner.show {
  visibility: visible;
  animation: crewAvailableReveal 2.4s ease-out both;
}
@keyframes crewAvailableReveal {
  0% { opacity: 0; transform: translateY(6px); }
  12%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .crew-available-banner.show { animation: none; }
}