:root {
  --bg: #07060f;
  --panel: #120f24;
  --pink: #ff2fd0;
  --cyan: #19f3ff;
  --lime: #7dff3a;
  --yellow: #ffe14d;
  --orange: #ff8a1f;
  --text: #e8e6ff;
  --dim: #7c78a8;
  --font: "Press Start 2P", "Courier New", ui-monospace, monospace;
}

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

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

body {
  background:
    radial-gradient(ellipse at 50% 30%, #1c1240 0%, var(--bg) 70%);
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  gap: 10px;
}

/* ---------- HUD ---------- */
.hud {
  width: 100%;
  max-width: var(--board, 640px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  position: relative;
}
.hud-box { display: flex; flex-direction: column; gap: 6px; }
.hud-right { align-items: flex-end; }
.hud-label { font-size: 9px; color: var(--dim); letter-spacing: 2px; }
.hud-value { font-size: 18px; color: var(--yellow); text-shadow: 0 0 8px rgba(255, 225, 77, .6); }
.hud-value.hi { color: var(--cyan); text-shadow: 0 0 8px rgba(25, 243, 255, .6); }
.hud-title { font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
.t-grok { color: var(--pink); text-shadow: 0 0 10px rgba(255, 47, 208, .7); }
.t-snake { color: var(--lime); text-shadow: 0 0 10px rgba(125, 255, 58, .7); }

.pause-btn {
  display: none;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--dim);
  width: 36px; height: 36px;
  cursor: pointer;
}

/* ---------- Board ---------- */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#boardWrap {
  position: relative;
  border: 4px solid var(--cyan);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 8px var(--pink),
    0 0 24px 6px rgba(255, 47, 208, .35),
    inset 0 0 24px rgba(25, 243, 255, .25);
  background: #0b0919;
  line-height: 0;
}
#board { display: block; image-rendering: pixelated; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  line-height: 1.6;
  padding: 16px;
  background: rgba(7, 6, 15, .78);
  cursor: pointer;
}
.overlay.show { display: flex; }

.logo { display: flex; flex-direction: column; align-items: center; gap: 10px; line-height: 1; }
.logo-line { font-size: clamp(28px, 9vmin, 64px); letter-spacing: 4px; }
.l1 { color: var(--pink); text-shadow: 4px 4px 0 #6d0b5a, 0 0 18px rgba(255, 47, 208, .8); }
.l2 { color: var(--lime); text-shadow: 4px 4px 0 #1f5a07, 0 0 18px rgba(125, 255, 58, .8); }

.start-hint { font-size: clamp(10px, 2.4vmin, 14px); color: var(--yellow); }
.howto { font-size: clamp(8px, 1.8vmin, 10px); color: var(--text); display: flex; flex-direction: column; gap: 8px; }
.title-hi { font-size: clamp(9px, 2vmin, 12px); color: var(--cyan); }

.big { font-size: clamp(26px, 7vmin, 48px); color: var(--yellow); text-shadow: 4px 4px 0 #7a5b00, 0 0 16px rgba(255, 225, 77, .7); line-height: 1.2; }
.big.over { color: var(--pink); text-shadow: 4px 4px 0 #6d0b5a, 0 0 16px rgba(255, 47, 208, .8); }
.final { font-size: clamp(12px, 3vmin, 18px); color: var(--text); }
.final span { color: var(--yellow); }
.new-hi { display: none; font-size: clamp(9px, 2vmin, 12px); color: var(--lime); animation: pulse .6s steps(2) infinite; }
.new-hi.show { display: block; }
.small-hint { font-size: 9px; color: var(--dim); }

.btn {
  font-family: var(--font);
  font-size: 14px;
  color: var(--bg);
  background: var(--lime);
  border: none;
  padding: 14px 20px;
  box-shadow: 4px 4px 0 #1f5a07, 0 0 16px rgba(125, 255, 58, .6);
  cursor: pointer;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1f5a07; }

.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { color: var(--yellow); } }

/* Show desktop vs touch hints */
.touch { display: none; }
body.is-touch .desk { display: none; }
body.is-touch .touch { display: inline; }

/* ---------- D-pad ---------- */
#dpad {
  display: none;
  grid-template-columns: repeat(3, min(26vw, 104px));
  grid-template-rows: repeat(2, min(9.5vh, 80px));
  gap: 12px;
  grid-template-areas:
    "pause up    ."
    "left  down  right";
  flex: 0 0 auto;
  margin-bottom: 8px;
}
body.is-touch #dpad { display: grid; }
.dir {
  font-family: var(--font);
  font-size: 24px;
  color: var(--cyan);
  background: var(--panel);
  border: 3px solid var(--cyan);
  box-shadow: 0 4px 0 #0b6c72, 0 0 10px rgba(25, 243, 255, .35);
  touch-action: none;
  cursor: pointer;
}
.dir:active, .dir.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #0b6c72; background: #1a2b40; }
.up { grid-area: up; } .down { grid-area: down; } .left { grid-area: left; } .right { grid-area: right; }

/* ---------- Touch / small layout ---------- */
body.is-touch .pause-btn {
  display: block;
  grid-area: pause;
  width: 60%; height: 70%;
  justify-self: center; align-self: center;
  font-size: 12px;
  color: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 3px 0 #7a5b00;
}

@media (min-width: 900px) and (min-height: 600px) {
  .hud-title { font-size: 22px; }
  .hud-value { font-size: 24px; }
  .hud-label { font-size: 11px; }
}

@media (max-width: 520px) {
  .hud-title { font-size: 11px; }
  .hud-value { font-size: 14px; }
  .hud-label { font-size: 8px; }
}

/* ---------- CRT scanlines ---------- */
.crt {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .22) 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .45) 100%);
  animation: flicker 4s infinite steps(1);
}
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: .92; } }

@media (prefers-reduced-motion: reduce) {
  .blink, .crt, .new-hi { animation: none; }
}