:root{--bg:#fbf7f0;--ink:#2a3550;--primary:#3fa7f5;--primary-dark:#2d86cc;--accent:#ffb23e;--accent-dark:#c9871f;--coral:#ff6b6b;--green:#46c26b;--purple:#9b6be0;--card:#fff;--radius:28px;font-family:Fredoka,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{flex-direction:column;min-height:100dvh;display:flex}.screen{min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(16px,4vh,36px);display:flex}.title{color:var(--primary-dark);margin:0;font-size:clamp(2rem,7vw,3rem);font-weight:700}.subtitle{opacity:.8;max-width:22ch;margin:0;font-size:1.25rem}.home-buttons{flex-direction:column;gap:22px;width:min(420px,86vw);display:flex}.big-btn{color:#fff;background:var(--primary);border-radius:var(--radius);min-height:104px;box-shadow:0 8px 0 var(--primary-dark), 0 12px 22px #00000026;cursor:pointer;border:none;justify-content:center;align-items:center;gap:16px;padding:18px 28px;font-family:inherit;font-size:1.6rem;font-weight:600;transition:transform 80ms,box-shadow 80ms;display:flex}.big-btn:active{box-shadow:0 2px 0 var(--primary-dark), 0 6px 12px #0000002e;transform:translateY(6px)}.big-btn__icon{font-size:2.4rem;line-height:1}.big-btn.back-btn{background:var(--accent);box-shadow:0 8px 0 var(--accent-dark), 0 12px 22px #00000026}.big-btn.back-btn:active{box-shadow:0 2px 0 var(--accent-dark), 0 6px 12px #0000002e}.mascot{display:inline-block}.mascot svg{width:100%;height:100%;display:block}.bob{transform-origin:bottom;animation:2.6s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-10px)rotate(1deg)}}.tap-start{background:radial-gradient(120% 120% at 50% 30%, #fff 0%, var(--bg) 70%);z-index:50;flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex;position:fixed;inset:0}.tap-start__hint{flex-direction:column;align-items:center;gap:6px;animation:1.4s ease-in-out infinite pulse;display:flex}.tap-start__big{color:var(--primary-dark);font-size:clamp(2rem,8vw,3rem);font-weight:700}.tap-start__icon{font-size:2.5rem}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.bob,.tap-start__hint{animation:none}}.topbar{justify-content:flex-start;width:min(680px,92vw);display:flex}.icon-btn{background:var(--accent);width:72px;height:72px;box-shadow:0 6px 0 var(--accent-dark);cursor:pointer;border:none;border-radius:20px;font-size:2rem;transition:transform 80ms,box-shadow 80ms}.icon-btn:active{box-shadow:0 2px 0 var(--accent-dark);transform:translateY(4px)}.pickphoto .big-btn{width:min(420px,86vw)}.screen.drawing{padding-top:max(18px, env(safe-area-inset-top));justify-content:flex-start;gap:18px}.whiteboard{aspect-ratio:1;background:#fff;border-radius:24px;width:min(600px,92vw,62vh);position:relative;overflow:hidden;box-shadow:0 10px 30px #0000001f,inset 0 0 0 6px #eef1f6}.draw-svg{z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.color-canvas{object-fit:contain;z-index:0;width:100%;height:100%;position:absolute;inset:0}.crayon{pointer-events:none;z-index:2;filter:drop-shadow(0 5px 6px #00000047);will-change:transform;width:170px;transition:opacity .4s;position:absolute;top:0;left:0}.crayon svg{width:100%;height:auto;display:block}.hand-wrap{pointer-events:none;filter:drop-shadow(0 3px 4px #0000004d);transition:opacity .4s}.caption{color:var(--primary-dark);min-height:1.6em;font-size:1.4rem;font-weight:600}.next-wrap{gap:14px;display:flex}.next-wrap .big-btn{width:min(420px,86vw)}.mascot-corner{position:fixed;bottom:14px;right:14px}.screen.coloring{padding-top:max(18px, env(safe-area-inset-top));justify-content:flex-start;gap:16px}.palette{flex-wrap:wrap;justify-content:center;gap:12px;width:min(680px,92vw);display:flex}.swatch{cursor:pointer;border:6px solid #0000;border-radius:50%;width:76px;height:76px;padding:0;transition:transform 80ms,border-color 80ms;box-shadow:0 4px 10px #00000026}.swatch.selected{border-color:var(--ink);transform:scale(1.12)}.swatch:active{transform:scale(.94)}.done-btn{background:var(--green);width:min(340px,86vw);box-shadow:0 8px #2e9e50,0 12px 22px #00000026}.done-btn:active{box-shadow:0 2px #2e9e50,0 6px 12px #0000002e}.wiggle{animation:.45s ease-in-out 2 wiggle}@keyframes wiggle{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(-5deg)scale(1.06)}75%{transform:rotate(5deg)scale(1.06)}}.sparkle{pointer-events:none;z-index:5;transform:translate(-50%, -50%) rotate(var(--rot,0deg));font-size:2.2rem;animation:.7s ease-out forwards sparkle-pop;position:absolute}@keyframes sparkle-pop{0%{opacity:0;transform:translate(-50%, -50%) scale(.3) rotate(var(--rot,0deg))}30%{opacity:1;transform:translate(-50%, -80%) scale(1.25) rotate(var(--rot,0deg))}to{opacity:0;transform:translate(-50%, -150%) scale(.9) rotate(var(--rot,0deg))}}.choice-btn{flex-direction:column;gap:8px;min-width:168px;min-height:148px;padding:18px 22px}.choice-btn .big-btn__icon{font-size:3.2rem}.art-sticker{background:#fff;border:10px solid #fff;border-radius:20px;width:min(340px,64vw,38vh);animation:.55s cubic-bezier(.34,1.56,.64,1) both pop-in;box-shadow:0 12px 30px #00000038}@keyframes pop-in{0%{transform:scale(0)rotate(-14deg)}70%{transform:scale(1.1)rotate(4deg)}to{transform:scale(1)rotate(0)}}.screen.stickerbook{padding-top:max(18px, env(safe-area-inset-top));justify-content:flex-start}.sticker-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;width:min(680px,92vw);display:grid}.sticker-card{cursor:pointer;background:#fff;border:none;border-radius:18px;padding:10px;transition:transform 80ms;box-shadow:0 6px 16px #0000001f}.sticker-card:active{transform:scale(.95)}.sticker-card img{aspect-ratio:1;object-fit:contain;border-radius:10px;width:100%;display:block}.sticker-view{z-index:60;background:#2a35508c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sticker-view .art-sticker{width:min(440px,84vw,60vh)}@media (prefers-reduced-motion:reduce){.sparkle,.art-sticker,.wiggle{animation:none}}