:root {
  color-scheme: dark;
}

@property --glow {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 2rem;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #eee;
  background: #0c0d12;
  display: flex;
  flex-direction: column;
}

header a {
  color: #a3b8d9;
}

main {
  flex: 1;
  max-width: 32rem;
  width: 100%;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #a3b8d9;
}

.hud {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter {
  display: flex;
  gap: 0.2rem;
}

.counter:empty {
  visibility: hidden;
}

/* The control panel housing: a recessed metal panel the tiles sit inside. */
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  width: min(80vw, 24rem);
  aspect-ratio: 1;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(155deg, #1c2320, #121614 60%, #0d100f);
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 0.65),
    inset 0 -1px 0 rgb(255 255 255 / 0.04),
    0 10px 24px rgb(0 0 0 / 0.5);
  border: 1px solid #262d29;
}

/* Tiles at rest: dim gunmetal indicator lamps, all identical — position is
   the only identity cue, not color. Amber (flash/hit), red (danger) and
   green (success) are the only accent hues in the whole panel. */
.tile {
  position: relative;
  --glow: 0;
  appearance: none;
  border: none;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, hsl(160 9% 21%), hsl(160 10% 13%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    inset 0 -3px 4px rgb(0 0 0 / 0.5),
    inset 0 0 0 1px hsl(160 12% 9%),
    0 0 calc(var(--glow) * 2.5rem) calc(var(--glow) * 0.4rem) hsl(38 90% 60% / var(--glow)),
    0 2px 5px rgb(0 0 0 / 0.4);
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.tile:focus-visible {
  outline: 2px solid #eee;
  outline-offset: 3px;
}

@keyframes flash-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.tile.flash {
  animation: flash-pulse 0.25s ease;
  background: linear-gradient(180deg, hsl(38 80% 48%), hsl(36 75% 36%));
  --glow: 1;
}

.tile.flash-danger {
  animation: flash-pulse 0.25s ease;
  background: hsl(4 85% 55%);
  box-shadow:
    inset 0 0 0 1px hsl(4 90% 70%),
    0 0 2.5rem 0.4rem hsl(4 95% 60% / 0.9),
    0 2px 6px rgb(0 0 0 / 0.4);
}

@keyframes tap-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.tile.hit {
  animation: tap-pop 0.18s ease;
  --glow: 0.8;
}

/* Overload spark: a quick electrical burst at the point of contact, the
   instant a trap tile is clicked — layers with the grid-wide shatter that
   follows a beat later. */
.tile::before {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(48 100% 88% / 0.95) 0%, hsl(20 100% 58% / 0.65) 35%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

@keyframes spark-burst {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.tile.spark::before {
  animation: spark-burst 0.25s ease-out;
}

/* Success ritual: a brief green sweep across every tile on round-complete —
   the one moment green appears in the whole panel, so it reads as special. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: hsl(140 70% 45% / 0.55);
  box-shadow: 0 0 1.2rem 0.2rem hsl(140 90% 55% / 0.8);
  opacity: 0;
  pointer-events: none;
}

@keyframes success-pulse {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.grid.success-flash .tile::after {
  animation: success-pulse 0.38s ease;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-0.5rem);
  }
  40% {
    transform: translateX(0.4rem);
  }
  60% {
    transform: translateX(-0.3rem);
  }
  80% {
    transform: translateX(0.2rem);
  }
}

.grid.wrong {
  animation: shake 0.35s ease;
}

@keyframes shatter {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  10% {
    transform: scale(1.03) rotate(-1deg);
    filter: brightness(2);
  }
  25% {
    transform: scale(0.97) rotate(2deg);
  }
  40% {
    transform: scale(1.02) rotate(-3deg);
  }
  55% {
    transform: scale(0.9) rotate(4deg);
  }
  100% {
    transform: scale(0.4) rotate(14deg);
    opacity: 0;
    filter: brightness(2.5) saturate(0);
  }
}

.grid.shatter {
  animation: shatter 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Seven-segment digit readout, reused for the round counter and both result
   numbers. Each digit is 7 absolutely-positioned bars; which ones light up
   is driven by data-value via attribute selectors below. Unlit segments
   stay dimly visible (the classic always-there "ghost 8" of a real digital
   display) rather than disappearing outright. */
.digit {
  position: relative;
  display: inline-block;
  --digit-w: 0.95rem;
  --digit-h: 1.7rem;
  --digit-t: 0.13rem;
  width: var(--digit-w);
  height: var(--digit-h);
}

.seg {
  position: absolute;
  background: hsl(38 45% 16%);
  border-radius: 1px;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.seg-a,
.seg-g,
.seg-d {
  left: var(--digit-t);
  right: var(--digit-t);
  height: var(--digit-t);
}
.seg-a {
  top: 0;
}
.seg-g {
  top: calc(50% - var(--digit-t) / 2);
}
.seg-d {
  bottom: 0;
}

.seg-f,
.seg-b {
  width: var(--digit-t);
  top: var(--digit-t);
  height: calc(50% - var(--digit-t) * 1.5);
}
.seg-f {
  left: 0;
}
.seg-b {
  right: 0;
}

.seg-e,
.seg-c {
  width: var(--digit-t);
  bottom: var(--digit-t);
  height: calc(50% - var(--digit-t) * 1.5);
}
.seg-e {
  left: 0;
}
.seg-c {
  right: 0;
}

.digit[data-value="0"] .seg-a,
.digit[data-value="0"] .seg-b,
.digit[data-value="0"] .seg-c,
.digit[data-value="0"] .seg-d,
.digit[data-value="0"] .seg-e,
.digit[data-value="0"] .seg-f,
.digit[data-value="1"] .seg-b,
.digit[data-value="1"] .seg-c,
.digit[data-value="2"] .seg-a,
.digit[data-value="2"] .seg-b,
.digit[data-value="2"] .seg-g,
.digit[data-value="2"] .seg-e,
.digit[data-value="2"] .seg-d,
.digit[data-value="3"] .seg-a,
.digit[data-value="3"] .seg-b,
.digit[data-value="3"] .seg-g,
.digit[data-value="3"] .seg-c,
.digit[data-value="3"] .seg-d,
.digit[data-value="4"] .seg-f,
.digit[data-value="4"] .seg-g,
.digit[data-value="4"] .seg-b,
.digit[data-value="4"] .seg-c,
.digit[data-value="5"] .seg-a,
.digit[data-value="5"] .seg-f,
.digit[data-value="5"] .seg-g,
.digit[data-value="5"] .seg-c,
.digit[data-value="5"] .seg-d,
.digit[data-value="6"] .seg-a,
.digit[data-value="6"] .seg-f,
.digit[data-value="6"] .seg-g,
.digit[data-value="6"] .seg-e,
.digit[data-value="6"] .seg-d,
.digit[data-value="6"] .seg-c,
.digit[data-value="7"] .seg-a,
.digit[data-value="7"] .seg-b,
.digit[data-value="7"] .seg-c,
.digit[data-value="8"] .seg-a,
.digit[data-value="8"] .seg-b,
.digit[data-value="8"] .seg-c,
.digit[data-value="8"] .seg-d,
.digit[data-value="8"] .seg-e,
.digit[data-value="8"] .seg-f,
.digit[data-value="8"] .seg-g,
.digit[data-value="9"] .seg-a,
.digit[data-value="9"] .seg-b,
.digit[data-value="9"] .seg-c,
.digit[data-value="9"] .seg-d,
.digit[data-value="9"] .seg-f,
.digit[data-value="9"] .seg-g {
  background: hsl(38 92% 58%);
  box-shadow: 0 0 0.5rem hsl(38 95% 60% / 0.85);
}

.result {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.result[hidden] {
  display: none;
}

.result-round {
  display: inline-flex;
  gap: 0.2rem;
  --digit-w: 1.5rem;
  --digit-h: 2.6rem;
  --digit-t: 0.2rem;
}

.result-best {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  --digit-w: 0.75rem;
  --digit-h: 1.3rem;
  --digit-t: 0.11rem;
}

.result-best::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d9a33a;
  margin-right: 0.5rem;
}