@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--sky, #D6E6FF);
  color: #14213D;
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

/* 4:3-speelveld dat altijd helemaal in beeld past. Maten binnenin in cqw. */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 133.33vh);
  height: min(100vh, 75vw);
  container-type: size;
  overflow: hidden;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
  background: rgba(232, 243, 255, .92);
}

.big-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34vmin;
  height: 34vmin;
  padding: 0;
  background: #1D4ED8;
  border: 1vmin solid #14213D;
  border-radius: 50%;
  box-shadow: 1.2vmin 1.2vmin 0 #14213D;
  cursor: pointer;
  animation: pulse 1.4s ease-in-out infinite;
}
.big-button svg { width: 55%; height: 55%; fill: #FFFFFF; }
.big-button:focus-visible { outline: 1vmin solid #FFD23F; outline-offset: 1vmin; }

.stars { display: flex; gap: 3vmin; }
.stars svg {
  width: 22vmin;
  height: 22vmin;
  fill: #FFD23F;
  stroke: #14213D;
  stroke-width: 1.4;
  stroke-linejoin: round;
  animation: pop .5s ease-out backwards;
}
.stars svg:nth-child(2) { animation-delay: .25s; }
.stars svg:nth-child(3) { animation-delay: .5s; }

@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }

@media (prefers-reduced-motion: reduce) {
  .big-button, .stars svg { animation: none; }
}

.overlay .buttons { display: flex; gap: 6vmin; }

/* Muziek aan of uit, rechtsboven. */
.music-button {
  position: fixed; top: 3vmin; right: 3vmin; z-index: 5;
  width: 10vmin; height: 10vmin; min-width: 44px; min-height: 44px; padding: 2vmin;
  background: #FFFFFF; border: .6vmin solid #14213D; border-radius: 50%; cursor: pointer;
}
.music-button svg { display: block; width: 100%; height: 100%; fill: #14213D; stroke: #FF5A5F; }
.music-button .off { display: none; }
.music-button.muted .off { display: inline; }
.music-button:focus-visible { outline: .6vmin solid #1D4ED8; outline-offset: .4vmin; }

.overlay [hidden] { display: none; }