:root {
  --sky: #8fe9f7;
  --ink: #0b1e5b;
  --pop: #ffe14d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 0%;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#gl { touch-action: none; }
#fx, #lens { pointer-events: none; }

#lens.shatter {
  animation: fall 0.9s cubic-bezier(.5, 0, .9, .4) forwards;
}

@keyframes fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  15%  { transform: translateY(-2vh) rotate(-1deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(9deg); opacity: .6; }
}

#popups { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.pop {
  position: absolute;
  font-family: "Bangers", Impact, sans-serif;
  color: var(--pop);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 2px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: pop 0.95s ease-out forwards;
}

.pop.big  { font-size: clamp(56px, 12vw, 150px); }
.pop.small {
  font-size: clamp(22px, 4vw, 40px);
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
}

@keyframes pop {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(var(--r, -8deg)); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.15) rotate(var(--r, -8deg)); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1) rotate(var(--r, -8deg)); }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1.05) rotate(var(--r, -8deg)); opacity: 0; }
}

#mute {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, .7);
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

#hint, #counter {
  position: fixed;
  bottom: 14px;
  font-family: "Bangers", Impact, sans-serif;
  letter-spacing: 1.5px;
  color: #fff;
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  z-index: 5;
}

#hint {
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  opacity: 0;
  transition: opacity .8s;
}
#hint.show { opacity: 1; }

#counter { right: 16px; font-size: 18px; }