:root {
  color-scheme: dark;
  --night: #030816;
  --panel: #071228;
  --line: #183e7a;
  --lime: #b9ff19;
  --cyan: #17cfff;
  --purple: #c06aff;
  --muted: #7892ba;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(26, 73, 67, .2), transparent 34rem),
    linear-gradient(rgba(10, 37, 88, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 37, 88, .11) 1px, transparent 1px),
    var(--night);
  background-size: auto, 20px 20px, 20px 20px, auto;
  color: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 10px;
  pointer-events: none;
  border: 2px solid rgba(28, 74, 147, .28);
  box-shadow: inset 0 0 32px rgba(21, 74, 163, .14);
}

.shell { width: min(1380px, 100%); margin: 0 auto; padding: 18px 22px 12px; }

.topbar {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 26px;
}

h1 {
  margin: 0;
  color: var(--lime);
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.09em;
  text-shadow: 0 4px 0 #4f850a, 0 0 22px rgba(185, 255, 25, .25);
}

.stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 12px 18px;
  border: 2px solid #2a58a2;
  background: rgba(4, 14, 35, .83);
  box-shadow: 0 5px 0 #071a41;
  font-weight: 900;
  letter-spacing: .06em;
}

.stat strong { color: var(--lime); font-size: 1.45rem; white-space: nowrap; }
.stat-lives strong { font-size: 1.15rem; letter-spacing: 0; }

.game-wrap {
  display: grid;
  grid-template-columns: minmax(155px, 1fr) minmax(380px, 600px) minmax(155px, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}

.side { display: grid; gap: 22px; justify-items: center; color: var(--cyan); font-weight: 900; text-align: center; }
.side p { margin: 0; line-height: 1.5; }
.micro { color: var(--muted); font-size: .73rem; letter-spacing: .08em; }

.mini-keys { display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; }
kbd, .dpad button {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border: 2px solid #285da8;
  border-radius: 5px;
  background: #07142d;
  box-shadow: inset 0 0 0 3px #030918, 0 4px 0 #061027;
  color: white;
  font: 900 1.15rem/1 ui-monospace, monospace;
}

.stage-frame { position: relative; width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }

.timebar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  border: 2px solid var(--lime);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #06111f;
  color: var(--lime);
  font-size: .75rem;
  font-weight: 900;
}

.time-track { flex: 1; height: 10px; background: #18222d; overflow: hidden; }
.time-track i { display: block; width: 100%; height: 100%; background: var(--lime); transition: width .1s linear, background .2s; }

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 13;
  background: #08152b;
  border: 3px solid var(--lime);
  outline: none;
  image-rendering: pixelated;
}

.overlay {
  position: absolute;
  inset: 30px 0 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 7, 18, .68);
  backdrop-filter: blur(3px);
  transition: opacity .18s, visibility .18s;
}

.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.overlay-card { width: min(390px, 94%); padding: 30px; border: 2px solid var(--lime); background: rgba(3, 11, 27, .96); text-align: center; box-shadow: 8px 8px 0 #1c5013, 0 0 60px rgba(185,255,25,.12); }
.overline { margin: 0 0 12px; color: var(--cyan); font-size: .72rem; letter-spacing: .14em; }
.overlay h2 { margin: 0; color: var(--lime); font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.06em; }
.overlay p:not(.overline) { color: #b5c6de; line-height: 1.55; }
.overlay small { display: block; margin-top: 16px; color: var(--muted); font-size: .64rem; }

button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  touch-action: manipulation;
}

#startBtn { padding: 13px 20px; background: var(--lime); color: #071109; box-shadow: 0 5px 0 #578d0c; letter-spacing: .06em; }
#startBtn:hover, #startBtn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
#startBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #578d0c; }

.utility {
  width: 100%;
  max-width: 178px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--purple);
  background: rgba(12, 10, 32, .86);
  color: var(--purple);
}
.utility:nth-child(2) { color: var(--cyan); border-color: var(--cyan); }
.utility kbd { min-width: 38px; min-height: 38px; border-color: currentColor; font-size: 1rem; }
.utility:hover, .utility:focus-visible { background: rgba(28, 25, 62, .95); transform: translateY(-2px); }
.level { color: var(--muted); font-size: .75rem; }
.level strong { color: var(--lime); font-size: 1rem; }

.dpad { display: none; width: 190px; margin: 14px auto 0; grid-template: repeat(2, 52px) / repeat(3, 52px); gap: 6px; justify-content: center; }
.dpad button { color: white; background: #091b3d; font-size: 1.5rem; }
.dpad button:first-child { grid-column: 2; }
.dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.dpad button:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px #030918, 0 1px 0 #061027; background: #12356d; }

footer { margin-top: 10px; color: #4f6b95; text-align: center; font-size: .65rem; letter-spacing: .08em; }

@media (max-width: 920px) {
  .shell { padding: 12px; }
  .topbar { grid-template-columns: 1fr 1fr; gap: 8px; }
  h1 { grid-column: 1 / -1; grid-row: 1; text-align: center; margin-bottom: 4px; }
  .stat { padding: 8px 10px; font-size: .7rem; }
  .stat strong { font-size: 1rem; }
  .game-wrap { grid-template-columns: minmax(300px, 600px); justify-content: center; }
  .side { display: none; }
  .dpad { display: grid; }
  footer { margin-top: 6px; }
}

@media (max-height: 790px) and (min-width: 921px) {
  .shell { padding-top: 10px; }
  .topbar { min-height: 58px; }
  .game-wrap { grid-template-columns: minmax(140px, 1fr) minmax(360px, 530px) minmax(140px, 1fr); }
  h1 { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}