/* ── Lente Hop — UI styling ─────────────────────────────────────────────
 * Canvas tekent het spel zelf; deze CSS regelt de UI-overlay, schaling
 * van het 800×600 podium en de overlays (startscherm + game-over). */

:root {
  --sky:        #b8e0ff;
  --sky-soft:   #d8efff;
  --grass:      #7cc04a;
  --grass-dk:   #4f8a2a;
  --pink:       #ff8fb1;
  --pink-dk:    #e85a83;
  --yellow:     #ffd84a;
  --yellow-dk:  #d99c00;
  --paper:      #ffffff;
  --cream:      #fff8e7;
  --dark:       #243a25;
  --dark-soft:  #3a4f3c;
  --shadow:     0 6px 0 rgba(36,58,37,0.18), 0 14px 28px rgba(36,58,37,0.18);
  --shadow-soft:0 3px 0 rgba(36,58,37,0.12);
  --scale: 1;
}

*,*::before,*::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  color: var(--dark);
  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;       /* Voorkomt scroll-/pinch-gestures op mobiel */
  background:
    radial-gradient(900px 600px at 30% 0%, #c4e6ff 0%, transparent 60%),
    radial-gradient(900px 600px at 70% 100%, #e9faf2 0%, transparent 60%),
    linear-gradient(180deg, #cdeaff 0%, #eaf9ee 100%);
}

button { font-family: inherit; cursor: pointer; }

/* ── App + stage (scale-to-fit 800×600) ───────────────────────────────── */
.app  { position: fixed; inset: 0; overflow: hidden; }
.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 800px; height: 600px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--scale));
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(36,58,37,0.22);
  background: #cdeaff;            /* fallback achter canvas */
}

canvas#game {
  position: absolute; inset: 0;
  width: 800px; height: 600px;
  display: block;
  image-rendering: auto;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  border: 2.5px solid var(--dark);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 900;
  font-size: 16px;
  color: var(--dark);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform 0.1s ease, filter 0.15s ease;
  min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
}
.btn:hover  { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(36,58,37,0.12); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn--primary { background: linear-gradient(180deg, #9bd96b, var(--grass-dk)); color: white; box-shadow: var(--shadow); }
.btn--ghost   { background: var(--paper); }
.btn--accent  { background: linear-gradient(180deg, #ffe27a, var(--yellow-dk)); color: var(--dark); box-shadow: var(--shadow); }
.btn--big     { padding: 14px 28px; font-size: 20px; min-height: 56px; border-radius: 22px; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--dark);
  background: var(--paper);
  font-size: 17px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.1s ease, background 0.15s ease;
  padding: 0;
  color: var(--dark);
}
.icon-btn:hover { background: var(--cream); }
.icon-btn:active { transform: scale(0.94); }

/* Variant-badge volledig verborgen (dev-only via toetsen 1-6) */
.variant-badge { display: none !important; }

/* ── Hero op startscherm ──────────────────────────────────────────────── */
.start__hero {
  display: block;
  width: 120px;
  height: auto;
  margin: 6px auto 8px;
  filter: drop-shadow(0 6px 6px rgba(36, 58, 37, 0.25));
  animation: heroBob 2.2s ease-in-out infinite alternate;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
@keyframes heroBob {
  0%   { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-10px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .start__hero { animation: none; }
}

/* ── In-game HUD (compact, niet dominant) ─────────────────────────────── */
.hud {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
  gap: 10px;
}
.hud__right { display: flex; gap: 6px; align-items: center; }
.hud__right .icon-btn,
.hud__right .hud__pill,
.hud__pill { pointer-events: auto; }
.hud__pill {
  background: rgba(255,255,255,0.88);
  border: 2px solid var(--dark);
  border-radius: 12px;
  padding: 4px 10px;
  display: flex; flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 78px;
  box-shadow: var(--shadow-soft);
}
.hud__pill--height { border-color: var(--grass-dk); }
.hud__pill--record { border-color: var(--pink-dk); }
.hud__label { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dark-soft); font-weight: 800; }
.hud__value { font-size: 16px; font-weight: 900; color: var(--dark); margin-top: 2px; font-variant-numeric: tabular-nums; }
.hud__pill--height .hud__value { color: var(--grass-dk); }
.hud__pill--record .hud__value { color: var(--pink-dk); }
.hud__sub {
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  color: var(--yellow-dk); margin-top: 1px;
}
.hud__sub:empty { display: none; }
.hud__pill--height.is-new-record { animation: pillPop 0.5s ease-out; border-color: var(--yellow-dk); background: #fff5cc; }
@keyframes pillPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Overlays (start + game-over) ─────────────────────────────────────── */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  z-index: 20;
  background: linear-gradient(180deg, rgba(184,224,255,0.55) 0%, rgba(124,192,74,0.45) 100%);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.18s ease;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

.panel {
  background: var(--paper);
  border: 3px solid var(--dark);
  border-radius: 22px;
  padding: 26px 32px 22px;
  text-align: center;
  max-width: 540px; width: 100%;
  box-shadow: var(--shadow);
  position: relative;
  animation: panelPop 0.32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes panelPop {
  0%   { transform: scale(0.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.title {
  margin: 0 0 4px;
  font-size: 48px; font-weight: 900; letter-spacing: -1px;
  color: var(--grass-dk);
  text-shadow: 0 3px 0 rgba(255,255,255,0.7);
  display: inline-flex; gap: 12px; align-items: center; justify-content: center;
  line-height: 1;
}
.title__emoji { font-size: 48px; }
.sub  { margin: 0; font-size: 20px; font-weight: 900; color: var(--dark); }
.hint { margin: 6px 0 12px; font-size: 14px; color: var(--dark-soft); font-weight: 700; }
.hint strong { color: var(--grass-dk); }
.record-pill {
  display: inline-block;
  background: rgba(255,255,255,0.92);
  border: 2.5px solid var(--yellow-dk);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 900;
  font-size: 14px;
  color: var(--dark);
  margin-bottom: 10px;
}
.record-pill strong { color: var(--yellow-dk); font-variant-numeric: tabular-nums; }
.overlay__corner {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; gap: 8px;
}

/* Game-over paneel */
.panel--over { padding: 22px 28px; max-width: 460px; }
.over__title { margin: 0 0 4px; font-size: 32px; color: var(--pink-dk); font-weight: 900; letter-spacing: -0.5px; }
.over__row   { margin: 4px 0; font-size: 16px; font-weight: 800; color: var(--dark); }
.over__row strong { color: var(--grass-dk); font-variant-numeric: tabular-nums; }
.over__row--score { font-size: 19px; margin-top: 8px; }
.over__row--score strong { color: var(--pink-dk); }
.over__record-badge {
  display: inline-block;
  margin: 8px 0 4px;
  background: linear-gradient(180deg, #fff5cc, var(--yellow));
  color: var(--dark);
  border: 2.5px solid var(--yellow-dk);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 900;
  font-size: 13px;
  animation: pillPop 0.5s cubic-bezier(.34,1.56,.64,1);
}
.over__submit {
  display: flex; justify-content: center;
  margin-top: 10px;
}
.over__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .panel, .overlay, .over__record-badge, .hud__pill--height.is-new-record { animation: none !important; }
}