* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffd9ec;
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* display-font: chunky mobile-game look */
h1, button, #hud-dist, #hud-coins, #end-dist, #end-coins, #shop-coins, .stats {
  font-family: "Lilita One", "Nunito", sans-serif;
  font-weight: 400;
  letter-spacing: .5px;
}

/* munt-sprite als icoon in de UI */
.coin-ico {
  width: 28px; height: 28px; object-fit: contain;
  vertical-align: -5px; margin-right: 6px;
}
.coin-ico.sm { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.coin-stat { display: inline-flex; align-items: center; }
.stat-ico { width: 26px; height: 26px; object-fit: contain; vertical-align: -5px; margin-right: 4px; }
.lock-ico { width: 16px; height: 16px; object-fit: contain; vertical-align: -2px; margin-right: 6px; }

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

/* HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud-dist {
  position: absolute; top: 14px; left: 18px;
  font-size: 38px; color: #fff;
  text-shadow: 0 3px 0 #d668a4, 0 5px 12px rgba(0,0,0,.25);
}
#hud-coins {
  position: absolute; top: 18px; right: 18px;
  font-size: 28px; color: #fff;
  text-shadow: 0 3px 0 #c98a1c, 0 5px 12px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: flex-end;
}
#hud-coins .row { display: flex; align-items: center; }
#hud-coins .coin-ico { width: 32px; height: 32px; }
#hud-coins-run {
  font-size: 17px; color: #d9ffc2;
  text-shadow: 0 2px 0 rgba(60, 120, 30, .6);
  min-height: 20px;
}
#hud-dives {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
#hud-dives img { width: 30px; height: 30px; object-fit: contain; }

/* Overlays: solide achtergrond, passen op elk formaat (800x600 t/m fullscreen), nooit scrollbars */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: linear-gradient(180deg, #ff9ecd 0%, #ffc3e2 55%, #ffe3f2 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 1.6vh, 18px); text-align: center;
  padding: clamp(8px, 2vh, 24px);
  color: #7a2b57;
  overflow: hidden;
}
.overlay[hidden] { display: none; }
/* held op het startscherm: stuitert als een echte squishy */
#start-hero {
  width: clamp(90px, 17vh, 190px); height: auto;
  filter: drop-shadow(0 10px 16px rgba(160, 40, 100, .3));
  animation: hero-bounce 1.6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12%      { transform: translateY(2px) scale(1.06, .92); }
  40%      { transform: translateY(-26px) scale(.97, 1.05); }
  70%      { transform: translateY(0) scale(1, 1); }
  82%      { transform: translateY(1px) scale(1.04, .95); }
}

/* duizelige held op het eindscherm: statisch beeld, één zachte pop-in */
#end-hero {
  width: clamp(80px, 14vh, 170px); height: auto;
  filter: drop-shadow(0 10px 16px rgba(160, 40, 100, .3));
  animation: pop .5s ease;
}

.overlay h1 {
  font-size: clamp(30px, 8vh, 86px); margin: 0; line-height: 1;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 5px 0 #d668a4, 0 10px 24px rgba(160, 40, 100, .35);
  letter-spacing: 2px;
}
.overlay .sub { font-size: clamp(14px, 2.6vh, 20px); font-weight: 800; max-width: 480px; margin: 0; }
.overlay .hint { font-size: 15px; font-weight: 600; opacity: .75; margin: 4px 0 0; }
.stats {
  display: flex; gap: clamp(12px, 2vw, 26px);
  font-size: clamp(15px, 2.8vh, 22px); font-weight: 800;
  background: rgba(255,255,255,.55);
  padding: clamp(6px, 1.2vh, 10px) clamp(14px, 2.6vw, 26px); border-radius: 999px;
}
.overlay button {
  font-size: clamp(16px, 2.8vh, 24px); cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
  border: none; border-radius: 18px;
  padding: clamp(8px, 1.6vh, 14px) clamp(22px, 4vw, 48px); color: #fff;
  background: #ff5fa8; border-bottom: 6px solid #d6488b;
  box-shadow: 0 6px 14px rgba(214, 72, 139, .35);
  transition: transform .08s;
}
.overlay button:active { transform: translateY(4px); border-bottom-width: 2px; }
.overlay button.secondary { background: #8f78ff; border-bottom-color: #6e58d8; box-shadow: 0 6px 14px rgba(110, 88, 216, .35); }
.overlay button:disabled { filter: grayscale(.7); opacity: .6; cursor: default; }
.btn-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* Eindscherm */
#end-score-label {
  font-family: "Lilita One", sans-serif;
  font-size: clamp(14px, 2.4vh, 22px); letter-spacing: 8px; text-transform: uppercase;
  opacity: .75;
}
#end-dist {
  font-weight: 800; font-size: clamp(44px, 12vh, 120px); line-height: 1;
  color: #fff; text-shadow: 0 6px 0 #d668a4, 0 12px 26px rgba(160,40,100,.35);
}
#end-record { font-size: clamp(17px, 3vh, 26px); font-weight: 800; color: #b8005f; animation: pop .5s ease; }
#end-coins { font-size: clamp(19px, 3.4vh, 30px); font-weight: 800; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Winkel — past ALTIJD binnen het scherm, nooit scrollbars */
#shop h1 { font-size: clamp(24px, 6vh, 64px); }
#shop-coins {
  font-size: clamp(15px, 2.6vh, 26px); font-weight: 800;
  background: rgba(255,255,255,.55);
  padding: clamp(4px, 0.8vh, 8px) clamp(14px, 2.4vw, 24px); border-radius: 999px;
  display: flex; align-items: center;
}
.shop-scroll {
  width: min(1080px, 96vw);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.shop-h {
  font-family: "Lilita One", sans-serif; font-weight: 400;
  font-size: clamp(13px, 2.4vh, 24px); letter-spacing: 2px; text-transform: uppercase;
  margin: clamp(4px, 1vh, 14px) 0 clamp(3px, 0.8vh, 10px); color: #fff;
  text-shadow: 0 3px 0 #d668a4;
}
#shop-items {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1vw, 14px);
}
#shop-skins {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(5px, 0.9vw, 14px);
}
@media (max-width: 640px) {
  #shop-items { grid-template-columns: repeat(2, 1fr); }
  #shop-skins { grid-template-columns: repeat(3, 1fr); }
}
.shop-card {
  background: rgba(255,255,255,.72); border-radius: clamp(10px, 1.6vh, 20px);
  padding: clamp(5px, 1.2vh, 16px) clamp(4px, 1vw, 14px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2px, 0.6vh, 6px);
  min-width: 0;
}
.shop-card .ico-img {
  width: clamp(30px, 8vh, 84px); height: clamp(30px, 8vh, 84px); object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(160, 40, 100, .25));
}
.shop-card h3 {
  margin: 0; font-size: clamp(11px, 2vh, 21px);
  font-family: "Lilita One", sans-serif; font-weight: 400;
}
.shop-card .desc { font-size: clamp(9px, 1.5vh, 14px); font-weight: 700; opacity: .8; }
.shop-card .pips { display: flex; gap: clamp(2px, 0.4vw, 5px); margin: 2px 0; }
.pip { width: clamp(9px, 1.4vw, 16px); height: clamp(6px, 1vh, 10px); border-radius: 5px; background: #e8c2d8; }
.pip.on { background: #ff5fa8; }
.shop-card button {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(10px, 1.8vh, 17px);
  padding: clamp(3px, 0.8vh, 8px) clamp(6px, 1.6vw, 22px);
  border-radius: 12px; border-bottom-width: 4px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skin-card.selected { outline: 4px solid #ff5fa8; outline-offset: -2px; }
.skin-card .ico-img.locked { filter: grayscale(.85) brightness(.75); }

/* skin-unlock banner op het eindscherm */
#end-unlock {
  display: flex; align-items: center; gap: clamp(6px, 1vw, 12px);
  background: rgba(255,255,255,.7); border-radius: 999px;
  padding: clamp(4px, 0.9vh, 8px) clamp(12px, 2.2vw, 24px);
  font-weight: 800; font-size: clamp(13px, 2.2vh, 18px);
  animation: pop .5s ease;
}
#end-unlock[hidden] { display: none; }
#end-unlock img { width: clamp(28px, 5vh, 44px); height: clamp(28px, 5vh, 44px); object-fit: contain; }

/* mute-knop: altijd zichtbaar, ook boven overlays */
#btn-mute {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 54px; height: 54px; border-radius: 50%; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 10px rgba(160, 40, 100, .3);
  transition: transform .08s;
}
#btn-mute img { width: 30px; height: 30px; object-fit: contain; }
#btn-mute:active { transform: scale(.92); }