:root{ --bar-h:100px; --ok:#2ecc71; --err:#e74c3c; }
  h2 {
    text-align: center;
    font-family: "Butterfly Kids", cursive;
    font-weight: 600;
    font-size: 4rem;
    color: #333;
    margin: 20px 0;
  }

  /* minder kans op rubber-band scroll tijdens drag */
html, body { overscroll-behavior: none; }

/* body krijgt deze class tijdens een touch-drag */
body.no-scroll { overflow: hidden; }

/* extra: voorkom dat de browser panning/zoom gebruikt op de kaartjes tijdens drag */
#bar, #carousel, #carousel .item { touch-action: none; }


  
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#BFF8FB;}
  h2{margin:12px 16px 4px;font-weight:700}

#wrapper {max-width:900px; margin:0 auto;}

  #map-wrap{   position:relative;display:flex;justify-content:center;align-items:center;
            padding:16px;padding-bottom:calc(var(--bar-h) + 24px)}
  svg{max-width:1000px;width:95vw;height:auto;}

  /* provincies */
  .province path{ fill:#f0f0f0; stroke:#444; stroke-width:.7; cursor:grab; transition:fill .15s }
  .province.correct path,
  .province.correct { fill:var(--ok) !important; }
  .province.drop-hover path,
  .province.drop-hover { fill:#d0f5dc; }

  /* geplaatste kaartjes */
  #placements{position:absolute;inset:16px 16px calc(var(--bar-h) + 24px) 16px;pointer-events:none}
  .placed{position:absolute;transform:translate(-50%,-50%);width:120px;pointer-events:none;
          user-select:none;opacity:0;animation:pop .18s forwards}
  @keyframes pop{to{opacity:1;transform:translate(-50%,-50%) scale(1.02)}}

  /* sticky carousel */
  #bar{
    position:fixed;left:0;right:0;bottom:0;
    height:var(--bar-h);
    background:#fff; /* eventueel pastel kleur geven */
    border-top:2px solid #ddd;
    display:flex;align-items:flex-end;
    gap:8px;padding:10px 12px;z-index:1000
  }
  .arrow{flex:0 0 auto;width:44px;height:44px;border:1px solid #ccc;border-radius:10px;
         display:grid;place-items:center;cursor:pointer;background:#fff}
  #viewport{flex:1 1 auto;overflow:hidden}
  #carousel{display:flex;gap:10px;padding:4px}

  /* kaartjes */
.item {
  flex:0 0 auto;
  width:120px;
  background:transparent;
  border:none;
  box-shadow:none;
  cursor:grab;
  text-align:center;
  /* haal deze weg: margin-bottom:-20px; */
}



  .item.dragging{opacity:.9}

  .thumb {
  height:120px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:transparent;
  margin-bottom:-20px; /* laat alleen het plaatje uitsteken */
}
  .thumb img{
    max-width:100%;max-height:100%;
    object-fit:contain;
  }

  .caption{
    margin-top:2px;padding:4px 8px;font-size:13px;line-height:1.2;color:#BFF8FB;
    background:#222;border-radius:12px;display:inline-block
  }
  .caption strong{display:block;font-weight:600}
  .caption .tag{font-size:11px;color:#BFF8FB;opacity:.8}

  /* geplaatste kaartjes behouden stijl */
  .placed .item{background:transparent;border:none;box-shadow:none;cursor:default}

  .wrongflash{animation:wrong .4s}
  @keyframes wrong{0%{box-shadow:0 0 0 rgba(0,0,0,0)}
                   50%{box-shadow:0 0 0 4px rgba(231,76,60,.25)}
                   100%{box-shadow:0 0 0 rgba(0,0,0,0)}}

  .toast{
    position:fixed;left:50%;bottom:calc(var(--bar-h) + 12px);
    transform:translateX(-50%);background:#222;color:#fff;
    padding:8px 12px;border-radius:10px;font-size:14px;opacity:0;
    pointer-events:none;animation:toast .9s ease;
    z-index:2000; /* boven de balk */
  }
  @keyframes toast{10%{opacity:1}90%{opacity:1}100%{opacity:0}}

  #music-player {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
  }
  #music-toggle {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  }

  #shuffle i {
  font-size: 18px; /* pas dit aan naar wens */
}

  /* wolkjes */
.cloud {
  position: fixed;
  top: 0;
  width: 120px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow:
    -30px 10px 0 -10px #fff,
    30px 10px 0 -10px #fff,
    0 20px 0 -15px #fff;
  z-index: 0; /* achter alles */
  animation: drift linear infinite;
}

@keyframes drift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(110vw); }
}

/* optioneel: wolkjes voor de kaart (boven svg) */
.cloud.front {
  z-index: 900; /* net voor de kaart maar achter de poppetjes-balk */
  opacity: 0.8;
}