/* ================================================
   racing.css – Golden Ring Racing
   ================================================ */

body {
  margin: 0; padding: 0;
  background: #000;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* ── Canvas ── */
#race-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* ── HUD DOM (verborgen, waarden worden op canvas getekend) ── */
#hud { display: none; }

/* ── Pauze knop ── */
.pause-btn {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 60;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 1.3rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: none;   /* alleen zichtbaar tijdens race */
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pause-btn:hover { background: rgba(255,215,0,0.2); }
.pause-btn.visible { display: flex; }

/* ── Mobiele besturing ── */
#mobile-controls {
  display: none;  /* getoond na startRace() */
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: fixed;
  bottom: 24px; left: 16px;
  z-index: 60;
  pointer-events: none;
}

.ctrl-row {
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.ctrl-btn {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.25);
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: all;
  transition: background 0.1s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.ctrl-btn:active,
.ctrl-btn.pressed {
  background: rgba(255,215,0,0.3);
  border-color: #ffd700;
  transform: scale(0.92);
}

/* ── Overlays ── */
.race-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.race-overlay.hidden { display: none; }

.race-card {
  max-width: 480px;
  width: 92%;
  padding: 32px 28px;
  border-radius: 24px;
  text-align: center;
  color: white;
}

.race-icon { font-size: 3.5rem; margin-bottom: 10px; }

.race-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  margin: 0 0 10px;
}

.race-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 16px;
}

.controls-hint {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.78rem;
}
.controls-hint span {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 20px;
}

.ring-reward {
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 20px;
  padding: 8px 20px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 30px;
  display: inline-block;
}

.credits-earned {
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: #ffd700;
  margin: 16px 0;
}

/* ── Modus selectie ── */
.mode-select {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.mode-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Poppins', sans-serif;
}
.mode-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.mode-btn.selected {
  background: rgba(255,215,0,0.22);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 14px rgba(255,215,0,0.22);
}

/* ── Level selectie ── */
.level-select {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.level-btn {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  font-family: 'Poppins', sans-serif;
}
.level-btn:hover  { background: rgba(255,255,255,0.12); color: white; }
.level-btn.selected {
  background: rgba(255,215,0,0.18);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
}

/* ── Responsief ── */
@media (max-width: 480px) {
  .race-card { padding: 24px 18px; }
  .ctrl-btn  { width: 54px; height: 54px; font-size: 1.3rem; }
}

/* ── Kaart actieknoppen ── */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.card-actions-top { margin-top: 16px; }

.card-back-link { margin-top: 12px; }

/* ── Trofee icoon (geanimeerd) ── */
@keyframes gemFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.card-trophy-icon {
  font-size: 4rem;
  animation: gemFloat 2s ease-in-out infinite;
  will-change: transform;
}

/* ── Kleur hulpklassen ── */
.text-green  { color: #4ade80; }
.text-pink   { color: var(--neon-pink, #ff6ec7); }
.text-danger { color: #ff6b6b; }