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

body {
  background: #000;
  overflow: hidden;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- CANVAS ---- */
#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

/* ---- SCREENS (overlays) ---- */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: rgba(2, 2, 8, 0.88);
}

.screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px;
  max-width: 400px;
  width: 90%;
}

/* ---- TITLE ---- */
.title-main {
  font-size: 4em;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #0ff;
  text-shadow:
    0 0 10px #0ff,
    0 0 30px rgba(0, 255, 255, 0.4),
    0 0 60px rgba(0, 255, 255, 0.15);
  line-height: 1;
}

.title-accent {
  color: #f0f;
  text-shadow:
    0 0 10px #f0f,
    0 0 30px rgba(255, 0, 255, 0.4),
    0 0 60px rgba(255, 0, 255, 0.15);
}

.subtitle {
  font-size: 0.85em;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.4);
  margin-top: -5px;
}

.controls-hint {
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.1em;
  margin-top: 10px;
}

.quick-restart-hint {
  animation: hintPulse 2s ease infinite alternate;
}

@keyframes hintPulse {
  from { opacity: 0.25; }
  to { opacity: 0.5; }
}

.high-score-label {
  font-size: 1em;
  color: #f0f;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
  letter-spacing: 0.15em;
  min-height: 1.2em;
}

/* ---- GAME OVER ---- */
.gameover-title {
  font-size: 3em;
  font-weight: 900;
  color: #f33;
  text-shadow:
    0 0 10px #f33,
    0 0 40px rgba(255, 50, 50, 0.4);
  letter-spacing: 0.1em;
}

.score-row {
  display: flex;
  gap: 30px;
  margin: 6px 0;
}

.score-box {
  text-align: center;
}

.score-label {
  font-size: 0.7em;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.score-value {
  font-size: 2em;
  font-weight: 900;
}

.cyan-text {
  color: #0ff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.magenta-text {
  color: #f0f;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

.orange-text {
  color: #f80;
  text-shadow: 0 0 8px rgba(255, 136, 0, 0.6);
}

.green-text {
  color: #0f8;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.new-best {
  font-size: 1.1em;
  font-weight: 700;
  color: #f80;
  text-shadow: 0 0 12px rgba(255, 136, 0, 0.7);
  letter-spacing: 0.2em;
  animation: newBestPulse 0.6s ease infinite alternate;
}

@keyframes newBestPulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.1); opacity: 1; }
}

/* ---- SETTINGS ---- */
.settings-title {
  font-size: 2em;
  color: #a0f;
  text-shadow: 0 0 10px rgba(160, 0, 255, 0.5);
  letter-spacing: 0.15em;
}

.settings-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-label {
  font-size: 0.75em;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- LEADERBOARD ---- */
.leaderboard-title {
  font-size: 2em;
  color: #ff0;
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
  letter-spacing: 0.15em;
}

.leaderboard-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.lb-rank {
  font-size: 1.1em;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.lb-score {
  font-size: 1.3em;
  font-weight: 900;
  color: #0ff;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

.lb-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9em;
  padding: 20px;
}

/* ---- BUTTONS ---- */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 250px;
}

.neon-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid;
  border-radius: 8px;
  padding: 14px 30px;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.neon-btn.cyan {
  color: #0ff;
  border-color: #0ff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.05);
  text-shadow: 0 0 8px #0ff;
}

.neon-btn.cyan:active {
  background: rgba(0, 255, 255, 0.15);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.neon-btn.magenta {
  color: #f0f;
  border-color: #f0f;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 15px rgba(255, 0, 255, 0.03);
  text-shadow: 0 0 8px #f0f;
}

.neon-btn.magenta:active {
  background: rgba(255, 0, 255, 0.15);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.4), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.neon-btn.purple {
  color: #a0f;
  border-color: #a0f;
  box-shadow: 0 0 15px rgba(160, 0, 255, 0.15), inset 0 0 15px rgba(160, 0, 255, 0.03);
  text-shadow: 0 0 8px #a0f;
}

.neon-btn.purple:active {
  background: rgba(160, 0, 255, 0.15);
  box-shadow: 0 0 25px rgba(160, 0, 255, 0.4), inset 0 0 20px rgba(160, 0, 255, 0.1);
}

/* ---- SLIDER ---- */
.neon-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  outline: none;
}

.neon-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  cursor: pointer;
}

.neon-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  cursor: pointer;
  border: none;
}

/* ---- HUD ---- */
#hud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  display: none;
}

#hudTop {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
}

#hudScore, #hudDistance, #hudCombo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#hudCombo {
  display: none;
}

.hud-label {
  font-size: 0.6em;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.35);
}

#scoreValue {
  font-size: 1.6em;
  font-weight: 900;
  color: #0ff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

#distValue {
  font-size: 1.6em;
  font-weight: 900;
  color: #f0f;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

#comboValue {
  font-size: 1.4em;
  font-weight: 900;
  color: #f80;
  text-shadow: 0 0 8px rgba(255, 136, 0, 0.5);
}

.combo-mult {
  font-size: 0.75em;
  font-weight: 700;
  color: #0ff;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
  letter-spacing: 0.1em;
}

#hudShield {
  text-align: center;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #0f8;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
  padding: 4px;
  display: none;
  animation: shieldBlink 1s ease infinite alternate;
}

#hudAnnounce {
  text-align: center;
  pointer-events: none;
}

@keyframes shieldBlink {
  from { opacity: 0.6; }
  to { opacity: 1; }
}