:root {
  --bg: #0a0f0a;
  --phosphor: #39ff14;
  --phosphor2: #00ff9f;
  --accent: #ff2e97;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--phosphor);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

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

#ui {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#start-btn {
  pointer-events: auto;
  font-family: inherit;
  font-size: clamp(1rem, 4vw, 1.5rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border: 2px solid var(--accent);
  padding: 0.7em 1.8em;
  cursor: pointer;
  text-shadow: 0 0 8px var(--accent);
  box-shadow: 0 0 14px rgba(255, 46, 151, 0.5), inset 0 0 8px rgba(255, 46, 151, 0.25);
}

#start-btn:hover {
  background: rgba(255, 46, 151, 0.14);
}

#start-btn:focus-visible {
  outline: 3px solid var(--phosphor);
  outline-offset: 3px;
}

#start-btn.hidden {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}