/* =======================================================
   DINO DRIVER — HELMET RUN
   Palette gebaseerd op de officiële Dino Driver-referenties:
   crème #EFE2BE, racegroen #3E4B24, dinogroen #7CA13F,
   racerood #B23A22, goud #D7A73B, hout/bruin #6B4423
   ======================================================= */

:root{
  --cream: #f2e8cb;
  --cream-deep: #e6d6a8;
  --forest: #2f3a1f;
  --forest-deep: #202917;
  --dino-green: #7ca13f;
  --dino-green-dark: #5c7c2c;
  --race-red: #b23a22;
  --race-red-dark: #8a2a18;
  --gold: #d7a73b;
  --wood: #6b4423;
  --sky-top: #a9dcef;
  --sky-bottom: #eaf6e0;
  --ink: #2a2416;
  --font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

@font-face{
  font-family: 'Baloo 2';
  src: local('Baloo 2');
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--forest-deep);
  font-family: var(--font-body), sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

#app{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---------- Backdrop (ambient photo art, Ken Burns) ---------- */
#gameplay-view{
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}
#gameplay-view.mission-tint{
  /* Bewust subtiel: een kleine kleurdraai (geen halve cirkel meer) zodat
     Dim's groen en de rode auto herkenbaar blijven, maar de sfeer toch
     duidelijk anders aanvoelt dan gewoon Vonkendal. */
  filter: hue-rotate(15deg) saturate(1.18) brightness(1.03) contrast(1.04);
  transition: filter 1.2s ease;
}
#gameplay-view.mission-tint-garage{
  /* Warmer, amber-achtig — sfeer van een werkplaats onder een looplamp. */
  filter: hue-rotate(-10deg) saturate(1.12) brightness(1.02) contrast(1.05) sepia(0.08);
  transition: filter 1.2s ease;
}
#gameplay-view.mission-tint-night{
  /* Koeler, iets blauwer voor een nachtelijke droomsfeer — bewust NIET
     donkerder (brightness blijft rond 1), alleen kouder van kleur. */
  filter: hue-rotate(-18deg) saturate(1.1) brightness(1.0) contrast(1.05);
  transition: filter 1.2s ease;
}
#gameplay-view.mission-punch{
  animation: mission-punch 0.5s ease;
}
@keyframes mission-punch{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
#backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--forest-deep);
}
.bg-layer{
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center 65%;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenburns 34s ease-in-out infinite alternate;
  filter: saturate(0.92) brightness(0.88);
}
.bg-layer.bg-active{ opacity: 1; }
#bg-world1{ background-image: url('assets/bg-world1.jpg'); background-position: center 40%; }
#bg-bridge{ background-image: url('assets/scene_bridge_broken.jpg'); background-position: center 50%; }
#bg-world2{ background-image: url('assets/bg-vonkendal.jpg'); background-position: center 55%; }

@keyframes kenburns{
  0%   { transform: scale(1.0) translate(0,0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

#sky-gradient{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(20,26,12,0.15) 0%,
    rgba(20,26,12,0.05) 45%,
    rgba(20,26,12,0.55) 100%);
}

/* ---------- Canvas ---------- */
#game-canvas{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */
#hud{
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
}
.hud-left, .hud-right{
  display: flex;
  gap: 8px;
}
.hud-pill{
  background: rgba(42, 36, 22, 0.55);
  backdrop-filter: blur(3px);
  color: var(--cream);
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.2vw, 18px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(215, 167, 59, 0.55);
  white-space: nowrap;
}
#mute-btn{
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  pointer-events: auto;
}

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(215, 167, 59, 0.55);
  background: rgba(42, 36, 22, 0.55);
  color: var(--cream);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn.small{
  position: static;
  margin-top: 14px;
  width: 36px;
  height: 36px;
  font-size: 16px;
}

/* mute button sits above hud-right on the right; reposition when hud active */
#hud #mute-btn{ position: absolute; }

/* ---------- Vonkendal banner ---------- */
#vonkendal-banner{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 6;
  background: linear-gradient(135deg, var(--gold), #f0cf74);
  color: var(--forest-deep);
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(16px, 4.8vw, 30px);
  padding: 10px 26px;
  border-radius: 14px;
  border: 3px solid var(--forest-deep);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
}
#vonkendal-banner.show{
  animation: banner-pop 2.2s ease forwards;
}
@keyframes banner-pop{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

#bridge-banner{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 6;
  background: linear-gradient(135deg, var(--wood), #8a5a2e);
  color: var(--cream);
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(16px, 4.8vw, 30px);
  padding: 10px 26px;
  border-radius: 14px;
  border: 3px solid var(--forest-deep);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
}
#bridge-banner.show{
  animation: banner-pop 2.2s ease forwards;
}

#distance-milestone-banner{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 6;
  background: linear-gradient(135deg, var(--gold), #c9932a);
  color: var(--forest-deep);
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: clamp(14px, 4.2vw, 24px);
  padding: 9px 22px;
  border-radius: 14px;
  border: 3px solid var(--forest-deep);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  text-align: center;
  max-width: 84vw;
}
#distance-milestone-banner.show{
  animation: banner-pop 2.4s ease forwards;
}

/* ---------- Car-restored banner (Opa Ben's #22 fully restored) ---------- */
#car-restored-banner{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 6;
  background: linear-gradient(135deg, var(--race-red), #d24a2c);
  color: var(--cream);
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(15px, 4.4vw, 26px);
  padding: 12px 28px;
  border-radius: 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  text-align: center;
  max-width: 88vw;
}
#car-restored-banner.show{
  animation: banner-pop-long 3.2s ease forwards;
}
@keyframes banner-pop-long{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  18%  { transform: translate(-50%, -50%) scale(1); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

#pause-hint{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  background: rgba(20, 20, 12, 0.82);
  color: var(--cream);
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 20px);
  padding: 14px 26px;
  border-radius: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  text-align: center;
  max-width: 84vw;
  pointer-events: none;
  animation: pause-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes pause-hint-pulse{
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ---------- Story scene (volledige-scherm verhaalplaten) ---------- */
#story-scene{
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #0d0f08;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: story-fade-in 0.4s ease;
}
#story-scene-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-hint{
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--cream);
  background: rgba(20, 20, 12, 0.55);
  border: 2px solid rgba(215, 167, 59, 0.6);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: clamp(12px, 3.2vw, 15px);
  letter-spacing: 0.5px;
  animation: story-hint-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes story-fade-in{
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes story-hint-pulse{
  0%, 100% { opacity: 0.75; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1; transform: translateX(-50%) translateY(-4px); }
}

/* ---------- Screens ---------- */
.screen{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* voorkomt dat het begin van te lange inhoud onbereikbaar wordt bij scrollen */
  text-align: center;
  padding: 20px;
  background: radial-gradient(ellipse at center 40%, rgba(50,60,30,0.35) 0%, rgba(20,24,12,0.72) 75%);
  /* Bij veel inhoud (bijv. het game-over-scherm met alle onderdelen +
     ranglijst-knoppen) past niet alles altijd op een liggend mobiel
     scherm. De rest van de pagina blijft bewust vergrendeld (geen
     ongewenst scrollen tijdens het spelen), maar dit scherm mag intern
     wél scrollen zodat niets ontoegankelijk wordt. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.hidden{ display: none !important; }

.logo-badge{
  width: min(38vw, 190px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  animation: float 3.4s ease-in-out infinite;
}
@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.game-title{
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 9vw, 54px);
  color: var(--cream);
  margin: 14px 0 0;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 var(--race-red-dark), 0 8px 18px rgba(0,0,0,0.5);
}
.game-subtitle{
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 20px);
  color: var(--gold);
  letter-spacing: 6px;
  margin: 2px 0 22px;
}

.primary-btn{
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 4.6vw, 22px);
  color: var(--cream);
  background: linear-gradient(180deg, #d24a2c, var(--race-red-dark));
  border: 3px solid #7a2114;
  border-radius: 999px;
  padding: 16px 38px;
  box-shadow: 0 6px 0 #6b1d10, 0 12px 24px rgba(0,0,0,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.08s ease;
  touch-action: manipulation;
}
.primary-btn:active{
  transform: translateY(4px);
  box-shadow: 0 2px 0 #6b1d10, 0 6px 14px rgba(0,0,0,0.4);
}
.btn-flag{ font-size: 1.15em; }

.secondary-btn{
  margin-top: 14px;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 16px);
  color: var(--forest-deep);
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: 0 4px 0 #b89357, 0 8px 16px rgba(0,0,0,0.3);
  touch-action: manipulation;
}
.secondary-btn:active{ transform: translateY(3px); box-shadow: none; }

/* ---------- Ranglijst ---------- */
.leaderboard-columns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 640px;
  margin: 8px 0 18px;
}
.leaderboard-col{
  background: rgba(42, 36, 22, 0.55);
  border: 2px solid rgba(215, 167, 59, 0.5);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 140px;
  flex: 1 1 150px;
}
.leaderboard-col h3{
  margin: 0 0 8px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(13px, 3.4vw, 15px);
  color: var(--gold);
  text-align: center;
}
.leaderboard-list{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}
.leaderboard-list li{
  counter-increment: rank;
  color: var(--cream);
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(242,232,203,0.15);
  display: flex;
  gap: 6px;
}
.leaderboard-list li::before{
  content: counter(rank) ".";
  color: var(--gold);
  min-width: 16px;
}
.leaderboard-empty{
  color: rgba(242,232,203,0.5);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

.leaderboard-submit{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
#leaderboard-name-input{
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: 999px;
  padding: 9px 16px;
  width: 160px;
  max-width: 50vw;
}
#leaderboard-name-input:focus{ outline: 2px solid var(--gold); }
.small-btn{
  margin-top: 0;
  padding: 9px 16px;
  font-size: 13px;
}
.small-btn:disabled{ opacity: 0.6; cursor: default; }
.leaderboard-status{
  font-size: 12px;
  color: var(--gold);
  text-align: center;
  margin: 0 0 8px;
  min-height: 16px;
}

.hint-text{
  margin-top: 16px;
  color: var(--cream);
  opacity: 0.85;
  font-size: clamp(12px, 3.2vw, 15px);
}
.teaser-text{
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  color: var(--cream);
  opacity: 0.55;
  font-size: clamp(10px, 2.6vw, 12px);
  font-style: italic;
}

/* ---------- Game over ---------- */
.gameover-title{
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  color: var(--cream);
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: 3px;
  margin: 0 0 10px;
}
.gameover-stats{
  background: rgba(42,36,22,0.6);
  border: 2px solid rgba(215,167,59,0.5);
  border-radius: 18px;
  padding: 16px 26px;
  margin-bottom: 6px;
  min-width: 240px;
}
.stat-row{
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(15px, 4.4vw, 19px);
  padding: 5px 0;
  letter-spacing: 0.5px;
}
.best-row{
  color: var(--gold);
  border-top: 1px dashed rgba(215,167,59,0.5);
  margin-top: 4px;
  padding-top: 10px;
}
.parts-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 2px;
  max-width: 280px;
}
.part-chip{
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(242, 232, 203, 0.55);
  background: rgba(20, 20, 12, 0.35);
  border: 1px solid rgba(242, 232, 203, 0.2);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.part-chip.found{
  color: var(--forest-deep);
  background: var(--gold);
  border-color: #a8791f;
}
.new-record{
  color: var(--gold);
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 4vw, 18px);
  margin-bottom: 12px;
  animation: pulse 0.9s ease-in-out infinite;
}
.record-encouragement{
  color: var(--cream);
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 3.4vw, 15px);
  background: rgba(215, 167, 59, 0.16);
  border: 2px solid rgba(215, 167, 59, 0.4);
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 12px;
  max-width: 84vw;
}
@keyframes pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ---------- Toast ---------- */
.toast{
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ---------- Rotate overlay ---------- */
#rotate-overlay{
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--forest-deep);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 5vw, 22px);
  padding: 20px;
}
.rotate-icon{
  font-size: 50px;
  margin-bottom: 14px;
  animation: rotate-hint 1.6s ease-in-out infinite;
}
@keyframes rotate-hint{
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

/* Show rotate overlay only in portrait on small screens */
@media (orientation: portrait) and (max-width: 900px){
  #rotate-overlay.portrait-active{ display: flex; }
}

/* -------------------------------------------------------
   COMPACTE WEERGAVE bij weinig verticale ruimte
   Liggende telefoons zijn vaak breed genoeg (dus vw-gebaseerde maten
   staan al op hun maximum) maar hebben weinig HOOGTE, zeker met een
   zichtbare adresbalk. Deze query reageert specifiek op hoogte, niet
   breedte, en maakt alles compacter zodat het altijd past — zonder te
   hoeven scrollen. Puur kleinere maten/marges, geen functionaliteit
   verandert.
   ------------------------------------------------------- */
@media (max-height: 500px){
  .screen{ padding: 8px; }

  .logo-badge{ width: min(13vw, 60px); margin-bottom: 0; }
  .game-title{ font-size: clamp(16px, 4.4vw, 26px); margin: 3px 0 0; letter-spacing: 1px; }
  .game-subtitle{ font-size: clamp(9px, 2.2vw, 13px); margin: 0 0 6px; letter-spacing: 3px; }
  .hint-text{ margin-top: 4px; font-size: 11px; }
  .teaser-text{ font-size: 9px; bottom: max(6px, env(safe-area-inset-bottom)); }

  .gameover-title{ font-size: clamp(15px, 3.6vw, 20px); margin: 0 0 3px; letter-spacing: 1px; }
  .gameover-stats{ padding: 6px 14px; margin-bottom: 2px; min-width: 0; }
  .stat-row{ font-size: clamp(10px, 2.6vw, 13px); padding: 1px 0; }
  .best-row{ margin-top: 1px; padding-top: 3px; }
  .parts-grid{ margin: 3px 0 0; gap: 3px; max-width: 260px; }
  .part-chip{ font-size: 8px; padding: 1px 5px; }
  .new-record{ font-size: clamp(10px, 2.6vw, 13px); margin-bottom: 3px; }
  .record-encouragement{ font-size: clamp(9px, 2.2vw, 11px); padding: 3px 8px; margin-bottom: 3px; }

  .primary-btn{ font-size: clamp(12px, 3vw, 15px); padding: 6px 18px; gap: 5px; }
  .secondary-btn{ margin-top: 5px; font-size: clamp(10px, 2.6vw, 12px); padding: 5px 14px; }

  .leaderboard-columns{ margin: 3px 0 6px; gap: 5px; }
  .leaderboard-col{ padding: 5px 8px; min-width: 96px; }
  .leaderboard-col h3{ margin: 0 0 3px; font-size: clamp(10px, 2.6vw, 12px); }
  .leaderboard-list li{ font-size: clamp(9px, 2.4vw, 11px); padding: 1px 0; }
  .leaderboard-submit{ margin-bottom: 3px; }
  #leaderboard-name-input{ padding: 5px 12px; font-size: 11px; width: 120px; }
  .small-btn{ padding: 5px 12px; font-size: 10px; }
  .leaderboard-status{ font-size: 10px; margin: 0 0 4px; min-height: 12px; }
}

/* Score popup text spawned by JS (canvas draws most, but reuse for DOM-based popups if needed) */