:root {
  --fg: #f2f2f2;
  --bg: #000;
  --dim: #808080;
  --font: "Press Start 2P", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-family: var(--font);
  color: var(--fg);
  overflow: hidden;
  touch-action: none;
}

#arena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.6rem;
  color: var(--fg);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  animation: flicker 5s infinite;
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  95% { opacity: 0.4; }
  96% { opacity: 1; }
}

#hud {
  display: flex;
  gap: 60px;
  align-items: center;
}

#scoreLeft, #scoreRight {
  font-size: 2rem;
  color: var(--fg);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  min-width: 1.5ch;
  text-align: center;
}

#chaosLabel {
  font-size: 0.55rem;
  letter-spacing: 0.2rem;
  color: var(--dim);
}

#chaosLabel.pulse {
  color: var(--fg);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

#seriesInfo {
  font-size: 0.55rem;
  letter-spacing: 0.1rem;
  color: var(--dim);
  margin-top: -6px;
}

#stage {
  position: relative;
  line-height: 0;
}

#game {
  display: block;
  background: var(--bg);
  border: 2px solid var(--fg);
  touch-action: none;
}

#pauseBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  color: var(--fg);
  border: 2px solid var(--fg);
  cursor: pointer;
  touch-action: manipulation;
}

#pauseBtn:hover, #pauseBtn:focus-visible {
  background: var(--fg);
  color: var(--bg);
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
}

#overlay[hidden] { display: none; }

.menuTitle {
  margin: 0 0 10px;
  font-size: 0.9rem;
  letter-spacing: 0.3rem;
  color: var(--fg);
}

.menuRow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.menuRow[hidden] { display: none; }

.modeBtn, .diffBtn, .scoreBtn {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--fg);
  padding: 12px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
}

.modeBtn:hover, .diffBtn:hover, .scoreBtn:hover,
.modeBtn:focus-visible, .diffBtn:focus-visible, .scoreBtn:focus-visible {
  background: var(--fg);
  color: var(--bg);
}

#controlsHint {
  color: var(--dim);
  font-size: 0.6rem;
  letter-spacing: 0.05rem;
  max-width: 80%;
}

#startPrompt {
  color: var(--fg);
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  animation: blink 1.2s infinite;
}

#startPrompt[hidden] { display: none; }

@keyframes blink {
  50% { opacity: 0.2; }
}

#rotateOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  text-align: center;
  padding: 24px;
}

#rotateIcon {
  font-size: 2.5rem;
  margin: 0;
  animation: rotateHint 1.6s ease-in-out infinite;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* phones held in landscape have very little vertical room once the
   browser chrome takes its cut, so shrink the surrounding HUD to leave
   the play area as much height as possible */
@media (max-height: 500px) and (orientation: landscape) {
  #arena { gap: 6px; }
  #title { font-size: 1rem; letter-spacing: 0.3rem; }
  #hud { gap: 30px; }
  #scoreLeft, #scoreRight { font-size: 1.2rem; }
  #seriesInfo { font-size: 0.45rem; margin-top: -2px; }
  #controlsHint { font-size: 0.5rem; }
}

/* only touch devices get blocked in portrait — a narrow desktop window
   is still fully usable and shouldn't be told to "rotate" */
@media (pointer: coarse) and (orientation: portrait) {
  #rotateOverlay { display: flex; }
}