:root {
  --cream: #efe4d2;
  --ink: #1f3f8f;
}
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
canvas#world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  touch-action: none;
}
#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition: opacity .6s;
  z-index: 5;
}
#loading.gone { opacity: 0; pointer-events: none; }
#loading .egg {
  width: 70px;
  height: 90px;
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 30% 30%, #fff 0 8%, transparent 9%),
              radial-gradient(circle at 65% 55%, #e04a8a 0 9%, transparent 10%),
              radial-gradient(circle at 35% 70%, #e04a8a 0 8%, transparent 9%),
              #f6efe9;
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.08), 0 6px 0 rgba(0,0,0,.08);
  animation: wobble 1s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
#grownups {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  z-index: 3;
}
#grownups button {
  --p: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background:
    conic-gradient(#1f3f8f calc(var(--p) * 1turn), transparent 0) border-box;
  display: grid;
  place-items: center;
  opacity: .55;
  cursor: pointer;
  touch-action: none;
}
#grownups button .icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}
#grownups button.on { opacity: .9; }
#grownups button.rec .icon { background: #ff6b6b; animation: pulse .6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
#btnAgain {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 6px solid #fff;
  background: #ffd84a;
  font-size: 48px;
  line-height: 1;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
  animation: bounce 1.1s ease-in-out infinite;
  z-index: 3;
  cursor: pointer;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-12px) scale(1.06); }
}