:root {
  color-scheme: dark;
  background: #090c0a;
  font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 45%, #273029 0%, #111612 65%, #080a08 100%);
}

.game-shell {
  position: relative;
  width: min(100vw, 100vh, 600px);
  height: min(100vw, 100vh, 600px);
  overflow: hidden;
  border-radius: 24px;
  background: #303832;
  box-shadow: 0 18px 60px rgb(0 0 0 / 55%);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#input-diagnostic {
  position: fixed;
  z-index: 100;
  inset: auto 8px 8px 8px;
  max-height: 36vh;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgb(101 232 202 / 70%);
  border-radius: 8px;
  color: #c9fff0;
  background: rgb(2 8 5 / 92%);
  font: 9px/1.35 ui-monospace, monospace;
  pointer-events: none;
  white-space: pre-wrap;
}

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff2a8;
  background: #202722;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.loading[hidden] {
  display: none;
}

.wave-status {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  min-width: 126px;
  padding: 10px 14px 9px;
  border: 1px solid rgb(193 255 76 / 45%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(16 22 17 / 92%), rgb(30 40 31 / 82%));
  box-shadow: 0 8px 26px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 7%);
  text-align: right;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.wave-status[hidden],
.start-menu[hidden],
.pause-menu[hidden],
.game-over[hidden] {
  display: none;
}

.pause-menu {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(7 10 8 / 72%);
}

.difficulty-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 18px 0;
}

.difficulty-picker button {
  min-height: 42px;
  border: 1px solid #69756d;
  border-radius: 8px;
  color: #bdc8c0;
  background: #151b17;
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.difficulty-picker button.is-selected {
  border-color: #e2b64f;
  color: #fff2a8;
  background: linear-gradient(180deg, #55421d, #2a2417);
  box-shadow: inset 0 0 0 1px rgb(255 218 112 / 18%);
}

.pause-card {
  width: min(360px, 100%);
  padding: 30px 26px 26px;
  border: 2px solid #7f8f82;
  border-radius: 18px;
  background: linear-gradient(180deg, #222b24 0%, #121713 100%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 5%);
  text-align: center;
}

.pause-kicker {
  margin: 0 0 8px;
  color: #d5a94b;
  font: 800 11px/1.2 Arial, sans-serif;
  letter-spacing: .13em;
}

.pause-card h2 {
  margin: 0 0 22px;
  color: #fff2a8;
  font: 900 40px/1 Arial, sans-serif;
  letter-spacing: .06em;
}

.resume-game {
  width: 100%;
  min-height: 70px;
  border: 2px solid #e8bd55;
  border-radius: 12px;
  color: #15170f;
  background: linear-gradient(180deg, #ffdb70 0%, #d99d36 100%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
  cursor: pointer;
  touch-action: manipulation;
}

.resume-game:active {
  transform: translateY(2px);
}

.resume-game span,
.resume-game small {
  display: block;
}

.resume-game span {
  font: 900 22px/1 Arial, sans-serif;
}

.resume-game small {
  margin-top: 6px;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .12em;
}

.wave-status span {
  display: block;
}

#wave-label {
  color: #eaffb6;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

#wave-detail {
  margin-top: 3px;
  color: #90a295;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.start-menu {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 38%, rgb(39 111 94 / 28%), transparent 42%),
    linear-gradient(rgb(6 10 8 / 54%), rgb(6 10 8 / 90%));
  backdrop-filter: blur(5px) saturate(.72);
}

.start-card {
  position: relative;
  width: min(100%, 410px);
  padding: 34px 34px 25px;
  overflow: hidden;
  border: 1px solid rgb(108 243 205 / 40%);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(24 35 29 / 97%), rgb(13 19 16 / 98%));
  box-shadow: 0 28px 80px rgb(0 0 0 / 65%), 0 0 42px rgb(70 255 192 / 9%), inset 0 1px rgb(255 255 255 / 7%);
  text-align: center;
  animation: game-over-rise 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.start-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #65e8ca 26%, #fff07a 50%, #65e8ca 74%, transparent);
  box-shadow: 0 0 20px #47ddbd;
}

.start-kicker {
  margin: 0 0 8px;
  color: #6de9ce;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
}

.start-card h1 {
  margin: 0;
  color: #f5ffe9;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(42px, 9vw, 58px);
  letter-spacing: .055em;
  line-height: 1;
  text-shadow: 0 4px 0 #21463c, 0 0 25px rgb(95 255 213 / 16%);
}

.start-subtitle {
  margin: 8px 0 20px;
  color: #a9b8ae;
  font-size: 13px;
  font-weight: 650;
}

.controls-guide {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.control-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  min-height: 56px;
  padding: 8px 13px;
  border: 1px solid rgb(141 174 151 / 20%);
  border-radius: 12px;
  background: rgb(255 255 255 / 3.5%);
  text-align: left;
}

.control-key {
  color: #fff18b;
  font-size: 21px;
  font-weight: 950;
  letter-spacing: .05em;
}

.control-key-wide {
  font-size: 13px;
  letter-spacing: .12em;
}

.control-row strong,
.control-row small {
  display: block;
}

.control-row strong {
  color: #edf7ef;
  font-size: 12px;
  letter-spacing: .12em;
}

.control-row small {
  margin-top: 2px;
  color: #829188;
  font-size: 10px;
  font-weight: 700;
}

.start-game {
  width: 100%;
  padding: 14px 18px 12px;
  border: 1px solid #b8fff0;
  border-radius: 13px;
  color: #0b1b16;
  background: linear-gradient(180deg, #88f3da, #4fcbae);
  box-shadow: 0 8px 24px rgb(63 226 188 / 22%), inset 0 1px rgb(255 255 255 / 55%);
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease;
}

.start-game:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 11px 30px rgb(63 226 188 / 30%), inset 0 1px rgb(255 255 255 / 65%);
}

.start-game:active { transform: translateY(1px); }

.start-game:focus-visible {
  outline: 3px solid #fff07a;
  outline-offset: 4px;
}

.start-game span,
.start-game small {
  display: block;
}

.start-game span {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .1em;
}

.start-game small {
  margin-top: 2px;
  color: rgb(11 44 35 / 65%);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.keyboard-hint {
  margin: 11px 0 0;
  color: #617168;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
}

.game-over {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    radial-gradient(circle at 50% 44%, rgb(100 18 25 / 32%), transparent 36%),
    linear-gradient(rgb(7 10 8 / 62%), rgb(7 10 8 / 92%));
  backdrop-filter: blur(5px) saturate(0.68);
  animation: game-over-fade 260ms ease-out both;
}

.game-over-card {
  position: relative;
  width: min(100%, 390px);
  padding: 38px 34px 32px;
  overflow: hidden;
  border: 1px solid rgb(255 88 72 / 48%);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgb(37 31 28 / 97%), rgb(18 23 19 / 98%)),
    #161c17;
  box-shadow:
    0 28px 80px rgb(0 0 0 / 65%),
    0 0 44px rgb(255 38 54 / 13%),
    inset 0 1px rgb(255 255 255 / 8%);
  text-align: center;
  animation: game-over-rise 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.game-over-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff4338 25%, #ffc260 50%, #ff4338 75%, transparent);
  box-shadow: 0 0 20px #ff473f;
}

.danger-mark {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 19px;
  place-items: center;
  transform: rotate(45deg);
  border: 2px solid #ff594a;
  border-radius: 12px;
  background: rgb(255 56 55 / 10%);
  box-shadow: 0 0 22px rgb(255 52 48 / 28%);
}

.danger-mark span {
  width: 7px;
  height: 25px;
  transform: rotate(-45deg);
  border-radius: 5px;
  background: #ffd5a1;
  box-shadow: 0 0 10px #ff6c46;
}

.game-over-kicker {
  margin: 0 0 7px;
  color: #ff8a70;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.25em;
}

.game-over h1 {
  margin: 0;
  color: #fff1db;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(44px, 10vw, 62px);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 0.98;
  text-shadow: 0 4px 0 #6d211f, 0 0 26px rgb(255 76 57 / 24%);
}

.death-summary {
  margin: 18px 0 24px;
  color: #aebbb1;
  font-size: 14px;
  font-weight: 650;
}

.play-again {
  width: 100%;
  padding: 15px 20px 13px;
  border: 1px solid #ffe37e;
  border-radius: 13px;
  color: #17170e;
  background: linear-gradient(180deg, #ffe875, #eebd3f);
  box-shadow: 0 8px 24px rgb(255 182 48 / 24%), inset 0 1px rgb(255 255 255 / 65%);
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease;
}

.play-again:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 11px 30px rgb(255 182 48 / 32%), inset 0 1px rgb(255 255 255 / 70%);
}

.play-again:active {
  transform: translateY(1px);
}

.play-again:focus-visible {
  outline: 3px solid #8af8ff;
  outline-offset: 4px;
}

.play-again span,
.play-again small {
  display: block;
}

.play-again span {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.play-again small {
  margin-top: 3px;
  color: rgb(42 39 21 / 70%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

@keyframes game-over-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes game-over-rise {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .game-over, .start-menu { padding: 18px; }
  .game-over-card { padding: 32px 24px 26px; }
  .start-card { padding: 29px 22px 21px; }
  .control-row { min-height: 51px; }
  .wave-status { top: 14px; right: 14px; }
}