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

:root {
  --green:       #00ff9f;
  --pink:        #ff2d78;
  --blue:        #00d4ff;
  --yellow:      #ffe44d;
  --bg:          #020408;
  --surface:     #060d14;
  --overlay-bg:  rgba(2, 4, 8, 0.93);
  --muted:       rgba(0, 255, 159, 0.38);
  --border:      rgba(0, 255, 159, 0.13);

  --glow-green:  0 0 8px rgba(0,255,159,0.85), 0 0 28px rgba(0,255,159,0.28);
  --glow-pink:   0 0 8px rgba(255,45,120,0.85), 0 0 28px rgba(255,45,120,0.28);
  --glow-yellow: 0 0 8px rgba(255,228,77,0.85), 0 0 28px rgba(255,228,77,0.28);

  --header-h:  52px;
  --footer-h:  28px;
  --dpad-h:    0px;
}

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  color: var(--green);
  font-family: 'Share Tech Mono', monospace;
}

/* ── CRT Effects ─────────────────────────────────────────────────────────── */

.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.1) 2px,
    rgba(0,0,0,0.1) 4px
  );
  pointer-events: none;
  z-index: 300;
}

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 299;
}

/* ── App shell ───────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;          /* dynamic viewport height, avoids mobile toolbar issues */
  height: 100vh;           /* fallback */
  padding: 10px 16px;
  gap: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

header {
  width: 100%;
  max-width: 600px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 6px;
}

.logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--green);
  text-shadow: var(--glow-green);
  user-select: none;
}

.logo span {
  -webkit-text-stroke: 1.5px var(--pink);
  text-shadow: var(--glow-pink);
}

.header-stats {
  display: flex;
  gap: clamp(10px, 3vw, 28px);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.stat-label {
  font-size: clamp(0.46rem, 1.4vw, 0.56rem);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.78rem, 2.2vw, 1.05rem);
  font-weight: 700;
  color: var(--green);
  text-shadow: var(--glow-green);
  letter-spacing: 0.04em;
}

/* ── Canvas wrapper ──────────────────────────────────────────────────────── */

#canvas-wrapper {
  position: relative;
  flex-shrink: 0;
  /* size is set entirely by JS via canvas.width / canvas.height */
}

#game-canvas {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  image-rendering: pixelated;
  box-shadow:
    0 0 0 1px rgba(0,255,159,0.05),
    0 0 50px rgba(0,255,159,0.07),
    inset 0 0 60px rgba(0,0,0,0.55);
}

/* ── Overlays ────────────────────────────────────────────────────────────── */

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10;
}

.overlay.active {
  display: flex;
}

.overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  /* explicit gap so elements never collapse onto each other */
  gap: 14px;
}

/* ── Glitch title (start screen) ─────────────────────────────────────────── */

/*
  CRITICAL: ::before and ::after must have opacity:0 as base.
  Without it the colored ghost copies render permanently on top
  of the real text — this was the "text on text" bug in the screenshots.
*/
.glitch-text {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--green);
  text-shadow: var(--glow-green);
  position: relative;
  user-select: none;
  animation: idle-glitch 5s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;          /* BASE: invisible — animations override this only during glitch frames */
  pointer-events: none;
}

.glitch-text::before {
  color: var(--pink);
  text-shadow: var(--glow-pink);
  clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  animation: glitch-a 5s infinite;
}

.glitch-text::after {
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue);
  clip-path: polygon(0 62%, 100% 62%, 100% 82%, 0 82%);
  animation: glitch-b 5s infinite;
}

@keyframes idle-glitch {
  0%, 90%, 100% { transform: none; }
  92%           { transform: translateX(-3px); }
  94%           { transform: translateX(3px); }
  96%           { transform: none; }
}

@keyframes glitch-a {
  0%, 90%, 100% { opacity: 0; transform: none; }
  92%           { opacity: 1; transform: translate(5px, -1px); }
  94%           { opacity: 1; transform: translate(-5px, 1px); }
  96%           { opacity: 0; transform: none; }
}

@keyframes glitch-b {
  0%, 90%, 100% { opacity: 0; transform: none; }
  92%           { opacity: 1; transform: translate(-5px, 1px); }
  94%           { opacity: 1; transform: translate(5px, -1px); }
  96%           { opacity: 0; transform: none; }
}

/* ── Overlay titles ──────────────────────────────────────────────────────── */

.overlay-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  user-select: none;
  line-height: 1;
}

/* Paused — green */
#screen-paused .overlay-title {
  color: var(--green);
  text-shadow: var(--glow-green);
}

/* Game Over — use its own class to avoid touching glitch-text */
.gameover-title {
  color: var(--pink);
  text-shadow: var(--glow-pink);
}

.overlay-sub {
  font-size: clamp(0.6rem, 2vw, 0.72rem);
  letter-spacing: 0.28em;
  color: var(--pink);
  text-shadow: var(--glow-pink);
}

/* ── Key hints ───────────────────────────────────────────────────────────── */

.key-hints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.6rem, 1.8vw, 0.7rem);
  color: var(--muted);
}

.hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

kbd {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  border: 1px solid rgba(0,255,159,0.22);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--green);
  background: rgba(0,255,159,0.05);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */

.legend {
  display: flex;
  gap: 18px;
  font-size: clamp(0.56rem, 1.6vw, 0.65rem);
  color: var(--muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.dot-food {
  border-radius: 50%;
  background: var(--pink);
  box-shadow: var(--glow-pink);
}

.dot-special {
  background: var(--yellow);
  box-shadow: var(--glow-yellow);
  transform: rotate(45deg);
}

/* ── Score block (game over) ─────────────────────────────────────────────── */

/*
  This sits in a flex-column with gap:14px — it will never overlap
  the title above it. No position:absolute, no translate tricks.
*/
.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid rgba(255,228,77,0.2);
  background: rgba(255,228,77,0.04);
}

.score-label {
  font-size: clamp(0.52rem, 1.6vw, 0.62rem);
  letter-spacing: 0.18em;
  color: var(--muted);
}

.score-number {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: var(--glow-yellow);
  letter-spacing: 0.04em;
  display: block;
  line-height: 1;
}

/* ── New record badge ────────────────────────────────────────────────────── */

.new-best {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.58rem, 1.8vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-shadow: var(--glow-pink);
  border: 1px solid rgba(255,45,120,0.35);
  padding: 4px 14px;
  animation: badge-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes badge-pulse {
  from { opacity: 0.6; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.04); box-shadow: var(--glow-pink); }
}

.hidden {
  display: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn-primary {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.7rem, 2vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: clamp(10px, 1.8vh, 14px) clamp(22px, 5vw, 40px);
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.16s, box-shadow 0.16s, transform 0.1s;
  box-shadow: var(--glow-green);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
  z-index: -1;
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  transform: scaleX(1);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--bg);
  outline: none;
  box-shadow: var(--glow-green), 0 0 60px rgba(0,255,159,0.35);
}

.btn-primary:active {
  transform: scale(0.96);
}

/* Arrow-key focused state on pause menu */
.btn-primary.menu-focus {
  color: var(--bg);
  box-shadow: var(--glow-green), 0 0 60px rgba(0,255,159,0.35);
}

.btn-primary.menu-focus::before {
  transform: scaleX(1);
}

.btn-ghost.menu-focus {
  color: var(--green);
  border-color: rgba(0,255,159,0.4);
  box-shadow: 0 0 8px rgba(0,255,159,0.3);
}

.btn-ghost {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.6rem, 1.8vw, 0.73rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: clamp(8px, 1.4vh, 11px) clamp(18px, 4vw, 30px);
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(0,255,159,0.14);
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--green);
  border-color: rgba(0,255,159,0.4);
  outline: none;
}

.btn-ghost:active {
  transform: scale(0.96);
}

/* ── Mobile D-pad ────────────────────────────────────────────────────────── */

#touch-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
  padding-top: 8px;
}

.dpad-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.dpad-btn {
  width: 54px;
  height: 54px;
  background: rgba(0,255,159,0.05);
  border: 1px solid rgba(0,255,159,0.18);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.08s, box-shadow 0.08s;
  user-select: none;
  -webkit-user-select: none;
}

.dpad-btn svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.dpad-btn.pressed,
.dpad-btn:active {
  background: rgba(0,255,159,0.16);
  box-shadow: var(--glow-green);
}

.dpad-center {
  background: rgba(255,45,120,0.05);
  border-color: rgba(255,45,120,0.2);
  color: var(--pink);
}

.dpad-center.pressed,
.dpad-center:active {
  background: rgba(255,45,120,0.16);
  box-shadow: var(--glow-pink);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer {
  height: var(--footer-h);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

footer span {
  font-size: clamp(0.44rem, 1.4vw, 0.56rem);
  letter-spacing: 0.14em;
  color: rgba(0,255,159,0.17);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Touch devices: show d-pad, hide footer & keyboard hints */
@media (hover: none) and (pointer: coarse) {
  #touch-controls {
    display: flex;
  }
  footer,
  .key-hints {
    display: none;
  }
}

/* Small-width phones */
@media (max-width: 480px) {
  #touch-controls {
    display: flex;
  }
  footer,
  .key-hints {
    display: none;
  }
  #app {
    padding: 8px 10px;
  }
  .dpad-btn {
    width: 50px;
    height: 50px;
  }
}

/* Very short screens — hide optional decorative elements */
@media (max-height: 600px) {
  .legend,
  .overlay-sub {
    display: none;
  }
  .overlay-content {
    gap: 10px;
  }
}

@media (max-height: 480px) {
  .key-hints {
    display: none;
  }
}