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

h1, button, #hud-stars { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; letter-spacing: 1px; }

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

/* HUD: meters linksboven */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#meters {
  position: absolute; top: 12px; left: 14px;
  display: flex; flex-direction: column; gap: clamp(4px, 0.9vh, 8px);
}
.meter {
  display: flex; align-items: center; gap: 8px;
  background: rgba(40, 22, 8, .55); border-radius: 999px;
  padding: clamp(3px, 0.6vh, 6px) clamp(8px, 1.2vw, 12px);
}
.meter img, .meter svg { width: clamp(20px, 3.4vh, 28px); height: clamp(20px, 3.4vh, 28px); object-fit: contain; }
.meter .bar {
  width: clamp(90px, 16vw, 170px); height: clamp(10px, 1.6vh, 14px);
  background: rgba(255,255,255,.28); border-radius: 999px; overflow: hidden;
}
.meter .fill { height: 100%; width: 50%; background: #8fd14f; border-radius: 999px; transition: width .2s, background .3s; }
.meter .fill.laag { background: #e2574c; }
.meter .fill.midden { background: #f6a623; }
/* vol = vast: gouden vinkje op de meter tot de ster binnen is */
.meter .check {
  display: none;
  width: clamp(18px, 3vh, 24px); height: clamp(18px, 3vh, 24px);
  border-radius: 50%; background: #f9d34c; color: #6e451f;
  font-weight: 800; font-size: clamp(12px, 2vh, 16px);
  align-items: center; justify-content: center; line-height: 1;
}
.meter.vol .check { display: flex; }
.meter.vol .fill { background: linear-gradient(90deg, #8fd14f, #f9d34c); }

#hud-stars {
  /* onder het knoppen-cluster, rechts uitgelijnd */
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px) + clamp(44px, 7.5vh, 78px) + 12px);
  right: 14px;
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 14px);
  font-size: clamp(32px, 6.5vh, 54px); color: #fff;
  background: rgba(40, 22, 8, .6);
  border: 3px solid rgba(249, 211, 76, .85);
  border-radius: 999px;
  padding: clamp(4px, 0.9vh, 10px) clamp(14px, 1.8vw, 24px);
  text-shadow: 0 3px 0 #6e451f, 0 5px 12px rgba(0,0,0,.4);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 18px rgba(249, 211, 76, .25);
}
#hud-stars svg {
  width: clamp(32px, 6vh, 50px); height: clamp(32px, 6vh, 50px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
#hud-stars.pop { animation: star-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes star-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* uitleg-balkje boven de toolbar: vertelt ALTIJD wat het gekozen
   gereedschap doet (kinderen hoeven niets te raden) */
#hint {
  position: fixed; bottom: clamp(78px, 12vh, 100px); left: 50%; transform: translateX(-50%);
  z-index: 25; max-width: 92vw;
  font-weight: 800; font-size: clamp(13px, 2.3vh, 18px); color: #fff;
  background: rgba(40, 22, 8, .8); border: 2px solid rgba(249, 211, 76, .7);
  border-radius: 999px; padding: clamp(5px, 1vh, 9px) clamp(14px, 2.6vw, 24px);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#hint[hidden] { display: none; }
.sub.goal { background: rgba(0,0,0,.22); border-radius: 999px; padding: 6px 20px; }

/* toolbar onderaan gecentreerd */
#toolbar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 25; display: flex; gap: clamp(6px, 1.2vw, 14px);
}
#toolbar[hidden] { display: none; }
button.tool {
  width: clamp(52px, 9vh, 72px); height: clamp(52px, 9vh, 72px);
  border-radius: 18px; border: 3px solid rgba(255,255,255,.5);
  background: rgba(60, 34, 12, .72); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s, border-color .15s, background .15s;
}
button.tool img, button.tool svg { width: 70%; height: 70%; object-fit: contain; }
button.tool:active { transform: scale(.92); }
button.tool.selected {
  border-color: #f9d34c; background: rgba(120, 70, 20, .85);
  box-shadow: 0 0 14px rgba(249, 211, 76, .5);
}

/* Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  background: linear-gradient(180deg, #6e451f 0%, #8a5a30 55%, #b98a4e 130%);
  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: #fff; overflow: hidden;
}
.overlay[hidden] { display: none; }
.overlay h1 {
  font-size: clamp(28px, min(7.5vh, 9vw), 76px); margin: 0; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 5px 0 #3a2410, 0 10px 24px rgba(0,0,0,.4);
}
.overlay .sub { font-size: clamp(14px, 2.6vh, 20px); font-weight: 800; max-width: 520px; margin: 0; opacity: .95; }
.hero-row { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 24px); }
#start-hero { width: clamp(170px, 34vh, 330px); height: auto; animation: bob 2.6s ease-in-out infinite; }
#start-sint { width: clamp(80px, 17vh, 165px); height: auto; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.overlay button {
  font-size: clamp(16px, 2.8vh, 24px); cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px;
  border: none; border-radius: 16px;
  padding: clamp(9px, 1.7vh, 14px) clamp(24px, 4.5vw, 52px);
  color: #6e451f; background: #f9d34c; border-bottom: 6px solid #cf9f1d;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .08s;
}
.overlay button:active { transform: translateY(4px); border-bottom-width: 2px; }

/* systeemknoppen: sinterklaas-kit-afbeeldingen (de PNG ís de knop),
   rechtsboven in één cluster — huisregel, óók op het startscherm */
#sys-knoppen {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px;
  z-index: 40; display: flex; gap: clamp(6px, 1vw, 12px);
}
#btn-mute, #btn-fs, #btn-home {
  width: clamp(44px, 7.5vh, 78px); height: clamp(44px, 7.5vh, 78px);
  border: none; padding: 0; cursor: pointer;
  background: transparent center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .08s;
  -webkit-tap-highlight-color: transparent;
}
#btn-mute:active, #btn-fs:active, #btn-home:active { transform: scale(.9); }
#btn-fs[hidden] { display: none; }