:root{--cream:#FFF8EE;--orange:#FF7A1A;--ink:#2a2622;--peach:#FFE3C8}
body{margin:0;font-family:'Fredoka',sans-serif;color:var(--ink);background:var(--cream);
background-image:radial-gradient(circle at 1px 1px,rgba(255,122,26,.18) 1.5px,transparent 0);background-size:22px 22px;min-height:100vh}
.mono{font-family:'DM Mono',monospace}
.sticker{border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);background:#fff}
.btn{border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s;font-weight:700}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.wobble{display:inline-block;animation:wob 3s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.03)}}
.shimmer{background:linear-gradient(100deg,#eee 30%,#fafafa 50%,#eee 70%);background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.fadein{animation:fi .6s ease both}
@keyframes fi{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.shake{animation:shk .5s}
@keyframes shk{20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
.tile .ov{opacity:0;transition:opacity .2s}
.tile:hover .ov{opacity:1}
@media (hover:none){.tile .ov{opacity:1;background:transparent}}
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:60;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.prompt:focus{outline:none;box-shadow:0 0 0 4px rgba(255,122,26,.45),5px 5px 0 var(--ink)}