.game-controls {
  flex-wrap: wrap;
}
.game-controls #freeze {
  border-color: #527d94;
  color: #c4ecff;
  background: #283c50;
}
.game-controls #freeze.ice-ready {
  border-color: #79aebd;
}
.game-controls #freeze[aria-pressed="true"] {
  background: #acdeeb;
  color: #122636;
}
.ice-charge {
  font: 700 11px var(--mono);
  border-left: 1px solid #638393;
  padding-left: 5px;
}
#freeze:disabled {
  opacity: 0.72;
}
.ice-sight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  display: none;
}
.ice-sight line {
  stroke: #b8efff;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px #328cbe);
}
#board.ice-aim,
#board.ice-aim button {
  cursor: crosshair;
}
#board .ice-target {
  outline: 2px dashed #b8f5ff;
  outline-offset: -3px;
}
#board .floor.is-frozen {
  background: #285a70;
  box-shadow:
    inset 0 0 0 2px #92d8f4,
    inset 0 0 12px #b4faff80;
  cursor: pointer;
}
#board .is-frozen .sprite,
#board .is-frozen .fright-sprite {
  filter: saturate(0) sepia(0.8) hue-rotate(142deg) brightness(1.7);
}
#board .floor.is-frozen::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: linear-gradient(
    132deg,
    transparent 27%,
    #efffff8a 27% 31%,
    transparent 32% 51%,
    #efffff66 51% 54%,
    transparent 55%
  );
  border-radius: 3px;
}
#ghostPace.ice-bound {
  color: #b8edff;
}
.fx-frost {
  stroke: #c2f4ff;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px #37b9ff);
  animation: bolt-fade 0.5s ease-out forwards;
}
.fx-ice-shard {
  fill: #c4efff;
  stroke: #5fbad7;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: ice-shards 0.46s ease-out both;
}
@keyframes ice-shards {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(80deg) scale(0.5);
  }
}