:root { --navy:#1f4f8f; --sun:#ffd23f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; touch-action:none; overscroll-behavior:none; position:fixed; inset:0; }
body { font-family:"Comic Sans MS","Segoe Print","Chalkboard SE",sans-serif; background:#a8cd91; }
button, a { touch-action:none; }
button:focus-visible, a:focus-visible { outline:5px solid #1f4f8f; outline-offset:5px; }
.frame { position:fixed; inset:0; }
.stage { touch-action:none; position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; overflow:hidden; }
.park, #places, #fx { position:absolute; inset:0; width:100%; height:100%; }
.park, #fx { pointer-events:none; }
.art-library { position:absolute; width:0; height:0; overflow:hidden; }
#tray { position:absolute; left:480px; top:27px; width:640px; height:116px; display:flex; gap:15px; pointer-events:none; z-index:5; }
.portrait { width:116px; height:116px; flex:none; border:4px dashed #c5b893; border-radius:50%; background:#fffae8e8; box-shadow:0 6px 0 #6b93731a; display:grid; place-items:center; }
.portrait img { width:98px; height:103px; object-fit:contain; }
.portrait.filled { border-style:solid; border-color:#e9ce86; background:#fff8cf; }
.portrait.pop { animation:tray-pop .35s ease-out; }
.portrait.cheer { animation:tray-pop .5s ease-out; }
.place { position:absolute; isolation:isolate; }
.ground { position:absolute; left:12px; bottom:8px; width:226px; height:32px; border-radius:50%; background:#456f5233; filter:blur(3px); pointer-events:none; }
/* Clip at ground level, with headroom for a 300px friend. No sprite can leak below. */
.sprite-mask { position:absolute; left:0; right:0; top:-310px; bottom:22px; overflow:hidden; pointer-events:none; }
.occupant { position:absolute; width:240px; height:300px; object-fit:contain; left:5px; bottom:103px; opacity:0; transform:translateY(420px); transform-origin:50% 100%; }
.occupant.show { opacity:1; transform:none; animation:rise .65s cubic-bezier(.2,.8,.3,1) both; }
.occupant.duck, .occupant.ball { width:160px; height:160px; left:45px; }
.occupant.duck.show { animation:rise .4s ease-out, waddle .8s .4s ease-in-out; }
.occupant.ball.show { animation:ball-hop 1.3s ease-in-out both; }
.occupant.leaving { animation:tuck .22s ease-in forwards; }
.front { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; transform-origin:50% 90%; }
.front svg { width:100%; height:100%; display:block; pointer-events:none; }
.front.rustle { animation:rustle .4s ease-in-out; }
.front.hint { animation:rustle .4s ease-in-out 2; }
.place.hop { animation:hop .42s ease-in-out; animation-delay:var(--delay); }
.tell { position:absolute; width:80px; height:22px; left:85px; top:var(--peek); overflow:hidden; pointer-events:none; opacity:0; }
.tell img { width:80px; height:100px; object-fit:contain; object-position:top; display:block; }
.tell.peek { animation:peek 1.05s ease-in-out; }
.butterfly { position:absolute; width:65px; height:48px; left:93px; bottom:115px; opacity:0; pointer-events:none; }
.butterfly::before, .butterfly::after { content:""; position:absolute; width:30px; height:43px; top:0; border-radius:60% 60% 45% 45%; background:#d6b2ee; border:4px solid #ab80c9; transform:rotate(-25deg); }
.butterfly::after { left:29px; transform:rotate(25deg); background:#f4c0d9; border-color:#d994bb; }
.butterfly.show { animation:flutter 1.2s ease-out forwards; }
.flying { position:absolute; width:240px; height:300px; object-fit:contain; transform-origin:50% 50%; pointer-events:none; transition:transform .65s cubic-bezier(.35,.05,.35,1), opacity .2s; }
.star { position:absolute; color:#fff394; font-size:54px; text-shadow:0 3px 0 #d8a34c; animation:star .8s ease-out forwards; }
.confetti { position:absolute; width:16px; height:24px; border-radius:5px; background:var(--color); animation:confetti 2s ease-out forwards; }
.topbar { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); display:flex; justify-content:space-between; z-index:50; pointer-events:none; }
.pill, .round { pointer-events:auto; border:0; color:#fff; background:rgba(31,79,143,.92); box-shadow:0 4px 10px rgba(0,0,0,.2); cursor:pointer; font:inherit; }
.pill { display:grid; place-items:center; min-height:64px; min-width:64px; padding:0 22px; border-radius:999px; text-decoration:none; font-size:19px; }
.round { width:64px; height:64px; border-radius:50%; font-size:27px; display:grid; place-items:center; }
.reset { position:fixed; right:max(14px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); background:var(--sun); color:#563d00; font-size:38px; z-index:50; }
.pill:hover, .round:hover { filter:brightness(1.12); }
.rotate { display:none; position:fixed; inset:0; z-index:100; place-items:center; text-align:center; padding:28px; color:#fff; background:#1a2a44; font-size:clamp(20px,6vw,32px); }
@media (orientation:portrait) { .rotate { display:grid; } .frame, .topbar, .reset { display:none; } }
@keyframes rise { 0% { opacity:0; transform:translateY(370px) scale(.8,1.1); } 60% { opacity:1; transform:translateY(-18px) scale(.94,1.07); } 80% { transform:translateY(5px) scale(1.07,.94); } 100% { opacity:1; transform:none; } }
@keyframes rustle { 0%,100% { transform:none; } 25% { transform:rotate(-4deg) scale(1.025); } 65% { transform:rotate(4deg); } }
@keyframes hop { 50% { transform:translateY(-15px) scale(1.02,.98); } }
@keyframes tray-pop { 0%,100% { transform:none; } 45% { transform:translateY(-10px) scale(1.13); } }
@keyframes tuck { to { transform:translateY(370px); opacity:0; } }
@keyframes waddle { 25%,75% { transform:translateX(-12px) rotate(-9deg); } 50%,100% { transform:translateX(12px) rotate(9deg); } }
@keyframes ball-hop { 0% { opacity:0; transform:translateY(280px); } 20%,62% { opacity:1; transform:translateY(-40px) scale(.94,1.06); } 42%,85% { opacity:1; transform:scale(1.12,.88); } 100% { opacity:1; transform:none; } }
@keyframes flutter { 0% { opacity:0; transform:translateY(100px) scale(.5); } 25% { opacity:1; transform:translate(-15px,-35px) rotate(-15deg); } 55% { opacity:1; transform:translate(35px,-85px) rotate(15deg); } 80% { opacity:1; } 100% { opacity:0; transform:translate(65px,-180px); } }
@keyframes peek { 0%,100% { opacity:0; transform:translateY(22px); } 25%,70% { opacity:1; transform:none; } }
@keyframes star { from { transform:translate(-50%,-50%) rotate(0) translateX(6px) scale(.3); opacity:1; } to { transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(1); opacity:0; } }
@keyframes confetti { from { opacity:1; transform:translateY(-30px) rotate(0); } to { opacity:0; transform:translate(var(--drift),850px) rotate(420deg); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-out { to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .front.rustle, .front.hint { animation:none; filter:brightness(1.1); }
  .place.hop, .portrait.pop, .portrait.cheer { animation:none; }
  .occupant.show, .occupant.duck.show, .occupant.ball.show { transform:none; animation:fade-in .15s linear both; }
  .occupant.leaving { animation:fade-out .15s linear forwards; }
  .tell.peek { transform:none; animation:fade-in .15s linear both; }
  .butterfly.show { opacity:1; transform:translateY(-65px); animation:fade-in .15s linear both; }
  .flying { transition:opacity .15s; }
  .star { animation:fade-out .2s linear forwards; }
  .confetti { display:none; }
}