:root {
  --bg: #07071a;
  --surf: #0f0f2e;
  --surf2: #181838;
  --cyan: #3ff0d0;
  --pink: #ff6eaa;
  --yellow: #ffd060;
  --green: #40e87a;
  --orange: #ff9a3c;
  --text: #d8d8ff;
  --muted: #5a6090;
  --r: 10px;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
}

/* ── SCREENS ── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.screen.active { display: flex; }

/* ── MENU ── */
.menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 420px;
  max-width: 95vw;
  padding: 32px 24px 28px;
  background: var(--surf);
  border-radius: 18px;
  border: 1px solid #1e1e50;
  box-shadow: 0 0 60px #3ff0d018;
}

.logo-wrap { text-align: center; }
.logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: 0.12em;
  color: var(--text);
  text-shadow: 0 0 24px #3ff0d060;
}
.logo-accent { color: var(--cyan); }
.logo-sub { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.2em; margin-top: 4px; }

/* Seed */
.seed-block { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.seed-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.seed-input {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--surf2);
  border: 1.5px solid #2a2a60;
  border-radius: var(--r);
  color: var(--cyan);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  caret-color: var(--cyan);
}
.seed-input::placeholder { color: #2e3060; font-weight: 400; font-size: 0.85rem; }
.seed-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #3ff0d020; }

/* Buttons */
.btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
  padding: 12px 32px;
}
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(0.9); }

.btn-primary {
  background: linear-gradient(135deg, var(--cyan) 0%, #1ad4b8 100%);
  color: #07071a;
  width: 100%;
}
.btn-secondary {
  background: var(--surf2);
  color: var(--pink);
  border: 1.5px solid var(--pink);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid #2a2a60;
}
.btn-small {
  font-size: 0.72rem;
  padding: 7px 18px;
  background: var(--surf2);
  color: var(--cyan);
  border: 1px solid var(--cyan);
}

/* Controls */
.controls-block { width: 100%; }
.controls-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 8px;
}
.controls-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 0.82rem;
}
.key {
  color: var(--yellow);
  background: var(--surf2);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.ctrl-desc { color: var(--text); align-self: center; }

/* Recent seeds */
.recent-block { width: 100%; }
.recent-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 8px;
}
.recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-chip {
  background: var(--surf2);
  border: 1px solid #2a2a60;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--cyan);
  cursor: pointer;
  transition: border-color 0.15s;
}
.recent-chip:hover { border-color: var(--cyan); }

.back-arcade {
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  margin-top: 4px;
  transition: color 0.15s;
}
.back-arcade:hover { color: var(--text); }

/* ── GAME SCREEN ── */
#gameScreen {
  flex-direction: column;
  gap: 0;
  background: #07071a;
}

.hud {
  width: 900px;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: #0b0b22;
  border-bottom: 1px solid #1a1a40;
}
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 110px;
}
.hud-right { justify-content: flex-end; }
.hud-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.hud-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}
.speed-val { color: var(--green); transition: color 0.3s; }
.speed-val.maxed { color: var(--pink); animation: flash 0.4s infinite alternate; }
.seed-disp { color: var(--yellow); font-size: 0.75rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-dist {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--cyan);
  text-shadow: 0 0 16px #3ff0d060;
  letter-spacing: 0.08em;
}
.hud-center { flex: 1; text-align: center; }

#canvas {
  display: block;
  max-width: 100vw;
  cursor: none;
}

.pause-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 40px var(--cyan);
  pointer-events: none;
}
.hidden { display: none !important; }

/* ── DEATH SCREEN ── */
.death-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 460px;
  max-width: 95vw;
  padding: 32px 24px;
  background: var(--surf);
  border-radius: 18px;
  border: 1px solid #1e1e50;
  box-shadow: 0 0 80px #ff6eaa18;
}

.death-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: 0.14em;
  color: var(--pink);
  text-shadow: 0 0 30px #ff6eaa80;
}

.death-stats {
  display: flex;
  gap: 24px;
  width: 100%;
}
.stat-box {
  flex: 1;
  background: var(--surf2);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
  border: 1px solid #2a2a60;
}
.stat-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 6px;
}
.stat-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
}
.cyan { color: var(--cyan); text-shadow: 0 0 14px #3ff0d050; }
.yellow { color: var(--yellow); text-shadow: 0 0 14px #ffd06050; }

/* Leaderboard */
.lb-block { width: 100%; }
.lb-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 10px;
}
.lb-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.lb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surf2);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
}
.lb-rank {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  width: 20px;
}
.lb-item.rank-1 .lb-rank { color: var(--yellow); }
.lb-item.rank-2 .lb-rank { color: #c0c0d8; }
.lb-item.rank-3 .lb-rank { color: #cd7f32; }
.lb-score { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--text); }
.lb-item.is-current { border: 1px solid var(--cyan); }
.lb-item.is-current .lb-score { color: var(--cyan); }

/* Share */
.share-block { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.share-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.share-link {
  background: var(--surf2);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.75rem;
  color: var(--cyan);
  word-break: break-all;
  cursor: text;
  border: 1px solid #2a2a60;
}

/* Death actions */
.death-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.death-actions .btn-primary { flex: 1.2; }
.death-actions .btn-secondary,
.death-actions .btn-ghost { flex: 1; }

/* ── ANIMATIONS ── */
@keyframes flash {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}