:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "Avenir Next", system-ui, sans-serif;
  background: #030712;
  color: #fff7dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 8%, #21486e 0, transparent 30rem),
    radial-gradient(circle at 80% 0%, #5d306e 0, transparent 35rem),
    linear-gradient(180deg, #030712, #07111f 45%, #02030a);
}

main {
  width: min(98vw, 1380px);
  padding: clamp(0.5rem, 1.6vw, 1.25rem);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.kicker {
  margin: 0;
  color: #8ff7ff;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.84;
  letter-spacing: 0.02em;
  text-shadow: 0 9px 0 #0008, 0 0 50px #42e8ff40, 0 0 30px #ff4d7e55;
}

.tagline {
  max-width: 40rem;
  color: #d6ecff;
  text-align: right;
  font-weight: 750;
  margin: 0 0 0.35rem;
}

.hud,
.controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.65rem 0;
}

.hud span,
button,
.caption {
  border: 1px solid #ffffff38;
  border-radius: 999px;
  background: linear-gradient(180deg, #243855df, #101827df);
  box-shadow: inset 0 1px #ffffff2e, 0 12px 30px #0008;
  color: #fff7dc;
  font-weight: 950;
}

.hud span { padding: 0.55rem 0.9rem; }

.screen-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

#game {
  width: min(98vw, 1280px);
  height: auto;
  max-height: 74vh;
  display: block;
  border: 4px solid #fbe39b;
  border-radius: 28px;
  background: #071b2e;
  box-shadow: 0 35px 120px #000d, 0 0 0 1px #ffffff24 inset, 0 0 90px #26dfff20;
  touch-action: none;
}

.caption {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  max-width: min(92vw, 980px);
  border-radius: 1.05rem;
  padding: 0.82rem 1.1rem;
  text-align: center;
  background: linear-gradient(180deg, #3b2b44e6, #111a28e6);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.caption.hidden { opacity: 0; transform: translateY(0.5rem); }

button {
  cursor: pointer;
  padding: 0.66rem 0.95rem;
  font-size: 0.95rem;
}

button:hover,
button:focus-visible { background: linear-gradient(180deg, #355a7d, #14243a); }
button:active { transform: translateY(2px); }

.help {
  margin: 0.6rem auto 0;
  color: #cae2ff;
  text-align: center;
  font-weight: 650;
}

@media (max-width: 800px) {
  header { display: block; text-align: center; }
  .tagline { text-align: center; margin: 0.45rem auto; }
  .hud span,
  button { padding: 0.48rem 0.65rem; }
}