/* Pancake Stack v3 (Kit). Everything inside .stage uses a fixed 1600x900 coordinate
   system; game.js scales the stage as one unit to fit the screen. Controls sit outside. */
: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:#e8a765; }

.frame { position:fixed; inset:0; }
.stage { touch-action:none; position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; user-select:none; overflow:hidden; }

/* --- the kitchen --- */
.wall { position:absolute; inset:0; background:repeating-linear-gradient(0deg,#f6bd84 0 86px,#f0b076 86px 90px); }
.worktop { position:absolute; left:0; right:0; top:560px; height:140px; background:linear-gradient(#93ccc0,#5fa89b 80%,#62a99d); background-color:#7dbcae; border-top:16px solid #f1d5a3; box-shadow:0 10px 18px rgba(72,38,27,.25); }
.cupboards { position:absolute; left:0; right:0; top:700px; bottom:0; background:linear-gradient(90deg,#c57342,#d88a54 50%,#c57342); display:flex; gap:14px; padding:16px; }
.cupboards i { flex:1; border:5px solid rgba(117,58,31,.35); border-radius:10px; box-shadow:inset 0 0 0 8px rgba(255,195,128,.14); }
.window { position:absolute; left:640px; top:60px; width:330px; height:260px; overflow:hidden; border:16px solid #fff7dc; border-radius:10px; background:linear-gradient(#7fd5f1 0 64%,#b8d87d 64%); box-shadow:0 8px 16px rgba(93,49,34,.22); }
.window .sun { position:absolute; right:26px; top:24px; width:72px; height:72px; border-radius:50%; background:#ffe36c; box-shadow:0 0 0 14px rgba(255,237,139,.25); }
.window .hill { position:absolute; left:-10%; bottom:-42%; width:120%; height:70%; border-radius:50%; background:#78bd70; }
.window .bar-v { position:absolute; left:calc(50% - 8px); top:0; width:16px; height:100%; background:#fff7dc; }
.window .bar-h { position:absolute; top:calc(52% - 8px); left:0; height:16px; width:100%; background:#fff7dc; }
.shelf { position:absolute; left:1150px; top:150px; width:300px; height:22px; border-radius:8px; background:#a95f39; box-shadow:0 10px 0 #87472e; }
.shelf img { position:absolute; bottom:18px; width:76px; }
.shelf img:first-child { left:30px; } .shelf img:last-child { right:30px; }
.hob { position:absolute; left:150px; top:585px; width:290px; height:56px; border-radius:50%; background:#20282d; border:12px solid #42494e; box-shadow:0 0 0 12px #d4ddd8, 0 10px 12px rgba(0,0,0,.25); }

/* --- sprites (positions set here, in stage px) --- */
.spr { position:absolute; pointer-events:none; }
#dada { left:20px; top:330px; width:560px; }
#dadaFace { left:60px; top:120px; width:230px; opacity:0; transform:translateY(30px); transition:opacity .2s, transform .2s; }
#dadaFace.show { opacity:1; transform:translateY(0); }
#panPancake { left:345px; top:388px; width:145px; opacity:0; }
#panPancake.ready { opacity:1; animation:sizzle .55s ease-in-out infinite alternate; }
#steam { left:370px; top:300px; width:120px; height:90px; opacity:0; }
#steam.show { opacity:1; }
#steam i { position:absolute; bottom:0; width:6px; height:44px; border-left:5px solid rgba(255,255,255,.75); border-radius:50%; animation:steam 1.3s ease-out infinite; }
#steam i:nth-child(2) { left:45%; animation-delay:.4s; } #steam i:nth-child(3) { left:85%; animation-delay:.8s; }
#plate { left:690px; top:600px; width:330px; }
#stackBox { position:absolute; left:855px; bottom:270px; width:0; height:0; transform-origin:50% 100%; }
#stackBox.wobble { animation:wobble var(--wspeed,1s) ease-in-out infinite alternate; }
#stackBox.land { animation:land .32s cubic-bezier(.2,1.5,.5,1); }
#stackBox.eaten { animation:eaten .7s ease-in forwards; }
.stacked { position:absolute; width:170px; left:-85px; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 4px 3px rgba(80,42,20,.2)); }
.stacked.jiggle { animation:jiggle .45s ease; }
.stacked.tumble { animation:tumble .9s cubic-bezier(.35,.05,.75,.35) forwards; }
#mama { left:1090px; top:260px; width:230px; }
#winston { left:1360px; top:330px; width:230px; }
#coe { left:565px; top:625px; width:185px; transition:left .5s ease; }
#coe.catch { animation:coeCatch .7s ease; }
#winston.cheer, #mama.react, #dinoPeek.react, #dadaFace.react { animation:rock .2s ease-in-out 6 alternate; }
#jug { left:415px; top:582px; width:92px; pointer-events:auto; cursor:pointer; }
#jug.pour { animation:jugPour .9s ease; }
#dinoPeek { left:660px; top:76px; width:250px; opacity:0; transform:translateY(-60%); transition:opacity .35s, transform .45s; }
#dinoPeek.show { opacity:1; transform:translateY(0); }
#dino { right:-560px; bottom:120px; width:520px; transition:right .5s cubic-bezier(.2,.9,.3,1.05); }
#dino.show { right:-40px; }
#dino img { width:100%; }

/* --- aiming, flying, effects --- */
#aimGuide { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .15s; pointer-events:none; }
#aimGuide.show { opacity:1; }
#aimDots circle { fill:#fff; stroke:rgba(31,79,143,.75); stroke-width:3; }
#aimRing { fill:none; stroke:#fff; stroke-width:6; stroke-dasharray:14 10; animation:spin 2.5s linear infinite; transform-box:fill-box; transform-origin:center; }
#fx { position:absolute; inset:0; pointer-events:none; }
.fly { position:absolute; width:150px; margin:-40px 0 0 -75px; }
.splat { position:absolute; width:170px; margin:-85px 0 0 -85px; }
.splat.drop { transition:transform .6s ease-in, opacity .6s; transform:translateY(420px) rotate(80deg); opacity:0; }
.floorcake { position:absolute; width:160px; margin:-30px 0 0 -80px; }
.star { position:absolute; color:#fff26a; font-size:52px; text-shadow:0 3px 0 #df8e25; animation:star .85s ease-out forwards; }

/* --- controls (real screen pixels, not stage) --- */
.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; 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 sizzle { from { transform:translateY(0) rotate(-2deg); } to { transform:translateY(-4px) rotate(2deg); } }
@keyframes steam { 0% { transform:translate(0,10px) scale(.6); opacity:0; } 30% { opacity:.9; } 100% { transform:translate(12px,-48px) scale(1.2); opacity:0; } }
@keyframes wobble { from { rotate:calc(var(--wamp) * -1deg); } to { rotate:calc(var(--wamp) * 1deg); } }
@keyframes land { 0% { scale:1 1; } 45% { scale:1.04 .82; } 100% { scale:1 1; } }
@keyframes jiggle { 0%,100% { rotate:0deg; } 30% { rotate:-8deg; } 70% { rotate:6deg; } }
@keyframes tumble { 0% { translate:0 0; rotate:0deg; } 100% { translate:230px 520px; rotate:420deg; opacity:.9; } }
@keyframes coeCatch { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-56px) rotate(-5deg); } }
@keyframes rock { from { transform:rotate(-6deg); } to { transform:rotate(6deg); } }
@keyframes jugPour { 0%,100% { transform:rotate(0); } 30%,70% { transform:translate(30px,-40px) rotate(-45deg); } }
@keyframes star { from { transform:translate(-50%,-50%) rotate(0) translateX(8px) scale(.3); opacity:1; } to { transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(1.1); opacity:0; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes eaten { to { transform:translate(560px,-80px) scale(.4); opacity:0; } }

@media (prefers-reduced-motion:reduce) {
  #stackBox.wobble { animation:none; rotate:calc(var(--wamp) * .25deg); }
  #panPancake.ready { animation-duration:1.4s; }
  .star { animation-duration:.4s; }
  #aimRing { animation:none; }
}