:root { --aqua:#4FC3F7; --deep:#0b4f6c; --polo:#1f8a5b; --sun:#ffd93d; }
body { margin:0; font-family:'Fredoka',sans-serif; color:var(--deep); }
.font-display { font-family:'Fredoka',sans-serif; }
.mono { font-family:'Chivo Mono',monospace; }
.tiles {
  background-color:var(--aqua);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 40px 20px, 6px 4px, 6px 4px; } }
.sign { background:var(--sun); border:4px solid var(--deep); border-radius:22px; box-shadow:6px 6px 0 var(--deep); color:var(--polo); text-shadow:2px 2px 0 #fff; }
.card { background:#fff; border:4px solid var(--deep); border-radius:28px; box-shadow:6px 6px 0 var(--deep); animation: rise .6s both; }
@keyframes rise { from { opacity:0; transform:translateY(20px);} }
.meterfill { background:linear-gradient(90deg,var(--polo),var(--sun),#ff5a5a); transition:width .6s cubic-bezier(.3,1.6,.5,1); }
.bubble { background:#fff; border:3px solid var(--deep); border-radius:18px; padding:8px 12px; font-weight:600; animation: pop .4s both; }
@keyframes pop { from { transform:scale(.6); opacity:0; } }
.zone { border:3px dashed var(--sun); border-radius:50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { border-color:#fff; } }
.spoon { animation: shake .7s; }
@keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-35deg)} 75%{transform:rotate(35deg)} }
.toy { font-weight:700; font-size:1.15rem; padding:14px 18px; border:4px solid var(--deep); border-radius:999px; box-shadow:0 6px 0 var(--deep); transition:transform .1s, box-shadow .1s; }
.toy:active { transform:translateY(5px); box-shadow:0 1px 0 var(--deep); }
.toy.big { background:#ff5a5a; color:#fff; font-size:1.6rem; padding:20px; letter-spacing:.02em; }
.toy:disabled { opacity:.6; }
.chip { border:3px solid var(--deep); border-radius:999px; padding:6px 14px; font-weight:600; background:#f0fbff; }
.chip:hover { animation: wobble .4s; }
.chip-on { background:var(--polo); color:#fff; }
@keyframes wobble { 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
.cert { background:var(--sun); border:3px double var(--deep); border-radius:16px; border-width:6px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--deep); color:#fff; padding:12px 20px; border-radius:16px; max-width:90vw; z-index:50; animation: pop .3s; }
.confetti { position:fixed; top:-40px; font-size:28px; z-index:60; animation: fall 3s linear forwards; pointer-events:none; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }
.bubbles { display:flex; gap:8px; }
.bubbles i { width:18px; height:18px; border-radius:50%; background:#fff; animation: bob 1s infinite; }
.bubbles i:nth-child(2){animation-delay:.2s} .bubbles i:nth-child(3){animation-delay:.4s}
@keyframes bob { 50% { transform:translateY(-14px); opacity:.5; } }