: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:#ead4ac; }
button, a { touch-action:none; }
button:focus-visible, a:focus-visible { outline:4px solid #e63b3b; outline-offset:2px; }
.frame { position:fixed; inset:0; }
.stage { touch-action:none; position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; overflow:hidden; box-shadow:0 8px 28px #77542a30; }
.paper { position:absolute; inset:0; background:#fffdf5; }
#drawing { position:absolute; inset:0; width:1600px; height:900px; transform-origin:50% 70%; pointer-events:none; }
#drawing.dance { animation:dance 2.4s ease-in-out; }
#drawing.tear { animation:tear .45s ease-in forwards; }
#dinoRise { position:absolute; bottom:-590px; width:350px; pointer-events:none; }
#dinoRise img { display:block; width:100%; }
#dinoRise.show { animation:dino 2.6s ease-in-out; }
#fx { position:absolute; inset:0; pointer-events:none; }
#controlFx { position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden; }
.star { position:absolute; color:#fff26a; font-size:52px; text-shadow:0 3px 0 #df8e25; animation:star .85s ease-out forwards; pointer-events:none; }
#controlFx .star { font-size:29px; }
/* All controls are unscaled screen pixels: 10 + 5*64 + 4*6 = 354px. */
.left-controls { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); z-index:50; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pill, .round { border:0; color:#fff; background:rgba(31,79,143,.92); box-shadow:0 4px 10px #0003; 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; }
.pen-tray { display:grid; grid-template-columns:repeat(2,64px); gap:4px 8px; padding:8px; border-radius:24px; background:#fff8ecef; box-shadow:0 4px 12px #77542a30; }
.pen { width:64px; height:64px; border:2px solid #e3d9c8; border-radius:18px; background:#fffef9; display:grid; place-items:center; cursor:pointer; position:relative; }
.pen[aria-pressed="true"] { border:4px solid var(--navy); background:#e6f3ff; z-index:1; }
.marker { display:block; width:22px; height:45px; border:2px solid #454b65; border-radius:7px 7px 5px 5px; background:var(--ink); transform:rotate(32deg); transition:transform .12s; position:relative; box-shadow:inset 4px 0 #ffffff60; }
.marker::before { content:""; position:absolute; left:-3px; right:-3px; top:-3px; height:17px; border:2px solid #454b65; border-radius:6px 6px 3px 3px; background:var(--ink); }
.marker::after { content:""; position:absolute; bottom:-7px; left:5px; width:8px; height:6px; background:var(--ink); border-radius:0 0 3px 3px; }
.pen[aria-pressed="true"] .marker { transform:translate(3px,-3px) rotate(32deg) scale(1.12); }
.right-controls { position:fixed; top:max(10px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); display:flex; flex-direction:column; gap:6px; z-index:50; }
.round { flex:none; width:64px; height:64px; border-radius:50%; font-size:32px; display:grid; place-items:center; padding:8px; }
.round img { width:46px; height:46px; object-fit:contain; pointer-events:none; }
.magic-button, .reset { background:var(--sun); color:#563d00; font-size:42px; }
.magic-button[aria-pressed="true"] { box-shadow:inset 0 4px 8px #89610055; background:#ffeaa0; }
.round[aria-pressed="true"], #stickers[aria-expanded="true"] { outline:3px solid #fff; outline-offset:-5px; }
.round.wobble { animation:wobble .22s ease; }
.sticker-overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:#334c702b; }
.sticker-overlay[hidden] { display:none; }
.sticker-card { display:grid; grid-template-columns:repeat(5,96px); grid-template-rows:repeat(2,96px); gap:4px; padding:10px; border-radius:25px; background:#fff8ec; box-shadow:0 8px 36px #1f4f8f40; }
.sticker-cell { width:96px; height:96px; display:grid; place-items:center; border:2px solid #e5d7bb; border-radius:18px; background:#fffef9; padding:9px; cursor:pointer; }
.sticker-cell img { width:auto; height:auto; max-width:74px; max-height:74px; object-fit:contain; pointer-events:none; }
.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, .left-controls, .right-controls, .sticker-overlay, #controlFx { display:none; } }
@keyframes dance { 0%,100% { transform:none; } 12% { transform:translateY(12px) rotate(-3deg) scale(1.03,.96); } 27% { transform:translateY(-45px) rotate(3deg) scale(.98,1.04); } 43% { transform:translateY(4px) rotate(-2deg) scale(1.03,.97); } 60% { transform:translateY(-26px) rotate(3deg); } 78% { transform:rotate(-2deg); } 92% { transform:translateY(-8px) rotate(1deg); } }
@keyframes tear { to { transform:translateY(-1150px) rotate(-9deg); opacity:0; } }
@keyframes dino { 0%,100% { transform:translateY(0); } 20% { transform:translateY(-520px) rotate(-7deg); } 32%,70% { transform:translateY(-530px) rotate(5deg); } 82% { transform:translateY(-510px) rotate(-3deg); } }
@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 wobble { 30% { transform:rotate(-7deg); } 70% { transform:rotate(7deg); } }
@media (prefers-reduced-motion:reduce) {
  .marker { transition:none; }
  #drawing.dance, .round.wobble { animation:none; }
  #drawing.tear { animation:fade .1s linear forwards; }
  .star { animation:fade .15s linear forwards; }
  #dinoRise.show { animation:none; bottom:0; }
}
@keyframes fade { to { opacity:0; } }