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

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, #2b6a85 0 0.1rem, transparent 23rem),
    radial-gradient(circle at 80% 0%, #713681 0, transparent 28rem),
    linear-gradient(180deg, #071223, #0d1726 55%, #080a10);
}

main {
  width: min(98vw, 1080px);
  padding: clamp(0.6rem, 2vw, 1.25rem);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin: 0 auto 0.65rem;
}

.eyebrow {
  margin: 0 0 -0.2rem;
  color: #9ef7ff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 5.9rem);
  line-height: 0.86;
  letter-spacing: 0.04em;
  text-shadow: 0 8px 0 #0007, 0 0 34px #ff477e88;
}

.subtitle {
  max-width: 32rem;
  color: #d8e9ff;
  font-weight: 700;
  text-align: right;
}

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

.panel div,
button,
.toast {
  border: 1px solid #ffffff40;
  border-radius: 999px;
  background: linear-gradient(180deg, #253348e8, #121927e8);
  color: #fff7d8;
  box-shadow: inset 0 1px #ffffff30, 0 8px 24px #0008;
  font-weight: 900;
}

.panel div { padding: 0.55rem 0.85rem; }

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

#game {
  width: min(98vw, 960px);
  height: auto;
  max-height: 72vh;
  border: 4px solid #fff1a1;
  border-radius: 26px;
  background: #162036;
  box-shadow: 0 30px 100px #000c, 0 0 0 1px #ffffff25 inset, 0 0 70px #3ce6ff22;
  touch-action: none;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  padding: 0.8rem 1.15rem;
  max-width: min(88vw, 840px);
  text-align: center;
  border-radius: 1rem;
  background: linear-gradient(180deg, #3b253be8, #171827e8);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

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

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

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

.help {
  text-align: center;
  color: #cfe2ff;
  margin: 0.55rem auto 0;
}

@media (max-width: 760px) {
  .hero { display: block; text-align: center; }
  .subtitle { text-align: center; margin: 0.5rem auto; }
  .panel div,
  button { padding: 0.48rem 0.62rem; }
}