:root {
  --bg: #0a0d14;
  --panel: #0e1320;
  --neon: #2ee6ff;
  --neon-dim: #1596ab;
  --accent: #b44dff;
  --text: #e8f4f8;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  -webkit-user-select: none; user-select: none;
}

h1, .display { font-family: "Russo One", "Rajdhani", sans-serif; font-weight: 400; }

#game { position: fixed; inset: 0; display: block; cursor: crosshair; }

/* HUD */
#hud {
  position: fixed; left: 20px; bottom: 16px; z-index: 5;
  font-weight: 700; font-size: 22px; line-height: 1.3;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 12px rgba(46, 230, 255, .5);
  pointer-events: none;
}
#best { font-size: 15px; color: var(--text); opacity: .6; }

#minimap {
  position: fixed; right: 16px; bottom: 14px; z-index: 5;
  border-radius: 50%;
  background: rgba(8, 12, 20, .6);
  box-shadow: 0 0 0 2px rgba(46, 230, 255, .35), 0 0 18px rgba(46, 230, 255, .15);
  pointer-events: none;
}

/* Overlays: solide achtergrond, geen doorkijk naar het spel */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background:
    radial-gradient(ellipse at 50% 35%, #131a2c 0%, var(--panel) 55%, #090c14 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay h1 {
  font-size: clamp(38px, 7vw, 76px); margin: 0;
  text-transform: uppercase; letter-spacing: 4px;
  color: #fff;
  text-shadow:
    0 0 8px rgba(46, 230, 255, .9),
    0 0 28px rgba(46, 230, 255, .45),
    0 0 70px rgba(180, 77, 255, .35);
}
.overlay p {
  font-size: 19px; font-weight: 600; max-width: 520px; margin: 0;
  color: #aebfd4; letter-spacing: .4px;
}
.overlay button {
  font-family: "Russo One", "Rajdhani", sans-serif;
  font-size: 20px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; color: #061018;
  border: none; border-radius: 6px; padding: 15px 46px;
  background: linear-gradient(180deg, #4df0ff, #17b6d4);
  box-shadow: 0 0 16px rgba(46, 230, 255, .45), 0 4px 0 #0d7e93;
  transition: transform .08s, box-shadow .08s;
}
.overlay button:hover { box-shadow: 0 0 26px rgba(46, 230, 255, .7), 0 4px 0 #0d7e93; }
.overlay button:active { transform: translateY(3px); box-shadow: 0 0 16px rgba(46,230,255,.45), 0 1px 0 #0d7e93; }
.overlay button.secondary {
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(46, 230, 255, .55);
}
.overlay button.secondary:hover { box-shadow: inset 0 0 0 2px var(--neon), 0 0 18px rgba(46, 230, 255, .35); }
.overlay button:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* eindscherm: SCORE groot in beeld */
#death-score-label {
  font-family: "Rajdhani", sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: 10px; text-transform: uppercase;
  color: #aebfd4; margin-top: 6px;
}
#death-score {
  font-family: "Russo One", "Rajdhani", sans-serif;
  font-size: clamp(80px, 15vw, 150px); line-height: 1;
  color: #fff;
  text-shadow: 0 0 14px rgba(46, 230, 255, .8), 0 0 50px rgba(46, 230, 255, .35);
  margin-bottom: 8px;
}