:root {
  color-scheme: dark;
  --ink: #f7efd9;
  --muted: #bbb0d3;
  --violet: #b8a7ff;
  --amber: #fbc481;
  --line: #453956;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: #151223;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 75% 45%, #2e2049 0%, transparent 60%),
    #151223;
}

.shell {
  width: min(100% - 3rem, 72rem);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.bar {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  font: 700 .73rem/1.4 var(--mono);
  letter-spacing: .12em;
}

.brand { display: flex; align-items: center; gap: .75rem; }
.edition, .footer { color: var(--muted); }
.edition span { color: var(--violet); }
.footer { border-top: 1px solid var(--line); border-bottom: 0; }
.blocks { display: flex; gap: 4px; }
.blocks i { width: 7px; height: 7px; background: var(--violet); }
.blocks i:nth-child(2) { opacity: .65; }
.blocks i:nth-child(3) { opacity: .35; }

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  padding-block: clamp(3rem, 10vh, 7rem);
}

.label, .status {
  display: flex;
  align-items: center;
  gap: .75rem;
  font: 700 .78rem/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.label { color: var(--violet); margin: 0 0 1.4rem; }
.label span { width: 15px; height: 2px; background: currentColor; }

h1 {
  font-size: clamp(4rem, 9vw, 8.3rem);
  font-weight: 950;
  line-height: .82;
  letter-spacing: -.085em;
  margin: 0;
}

h1 span {
  display: block;
  margin-top: .09em;
  color: var(--violet);
  text-shadow: .035em .035em 0 #574081;
}

.tagline { margin: 1.85rem 0 1.55rem; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); }
.status { width: fit-content; margin: 0; padding: .6rem .85rem; border: 1px solid #695043; color: var(--amber); background: #251b2b; }
.status span { width: 7px; height: 7px; background: currentColor; box-shadow: 0 0 10px #fbc48166; }

.machine {
  min-width: 0;
  padding: clamp(.75rem, 2vw, 1.3rem);
  border: 1px solid #6f5a92;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, #493766, #241b37 70%);
  box-shadow: inset 0 2px 0 #ffffff19, 0 8px 0 #120e20, 0 24px 48px #0c081d9c;
}

.bezel { padding: clamp(.5rem, 1.6vw, 1rem); background: #171123; border: 1px solid #100c1b; border-radius: .85rem; box-shadow: inset 0 3px 8px #080613; }
.screen { position: relative; overflow: hidden; border-radius: .55rem; border: 1px solid #554077; }
.screen svg { display: block; width: 100%; height: auto; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, #0b061930 2px 4px); }

.controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; }
.model, .test { color: #d5c6ed; font: 700 .7rem/1.2 var(--mono); letter-spacing: .09em; }
.model span { color: var(--violet); }
.test {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .35rem .6rem;
  border: 1px solid transparent;
  border-radius: .3rem;
  background: transparent;
  cursor: pointer;
}
.test[hidden] { display: none; }
.test:hover { background: #493766; }
.test:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.power { width: .65rem; height: .65rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px #fbc4817a; }
.screen.is-testing .ship { animation: launch 850ms ease-in-out; }
@keyframes launch {
  0%, 100% { transform: translateY(0); }
  45%, 60% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .screen.is-testing .ship { animation-name: flash; }
  @keyframes flash { 50% { opacity: .55; } }
}

@media (max-width: 740px) {
  .hero { grid-template-columns: 1fr; gap: 2.25rem; }
  h1 { font-size: clamp(4rem, 13vw, 6.25rem); }
  .machine { width: min(100%, 31rem); }
  .bar { min-height: 4.1rem; }
}

@media (max-width: 360px) {
  .shell { width: calc(100% - 2rem); }
  .bar { letter-spacing: .06em; }
}

.play-game {display:inline-block;margin-top:1rem;padding:1rem 1.3rem;background:#fbc481;color:#21193c;font-weight:800;text-decoration:none;border:2px solid #ffe1bd;box-shadow:5px 5px 0 #3d286b;}
.play-game:hover,.play-game:focus-visible {background:#ffe1bd;outline:3px solid #ac99ff;outline-offset:4px;}
.game-note {font-size:.85rem;color:#c8bddd;line-height:1.6;}