:root{--ink:#3b2245;--paper:#fff6fb;--pink:#ff6fae;--pink-deep:#c2477f;--pressed:#ffb3d6;--shadow:#3b224559;--gold:#ffd447}html,body,#root{background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;height:100%;margin:0;font-family:Fredoka Variable,Comic Sans MS,system-ui,sans-serif;overflow:hidden}.stage{touch-action:none;width:100%;height:100%;position:fixed;inset:0}.hud{pointer-events:none;color:#fff;paint-order:stroke fill;-webkit-text-stroke:6px var(--ink);text-shadow:0 4px 0 var(--shadow);font-weight:600;position:fixed;inset:0}.hud button{pointer-events:auto;font:inherit;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border:0;margin:0;font-weight:600}.hud .icon{width:100%;height:100%;display:block;overflow:visible}.portrait{display:block;position:relative}.portrait canvas{display:block;position:absolute}.counter,.jar{align-items:center;height:88px;font-size:46px;line-height:1;display:flex;position:absolute;top:0;left:0}.counter .star,.jar .star{width:70px;height:70px;position:absolute;top:9px;left:9px}.counter .count,.jar .count{margin-left:84px}.counter .count{animation:.35s cubic-bezier(.2,1.6,.4,1) both bump}.corner{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));gap:10px;display:flex;position:absolute}.hud button.round{width:56px;height:56px;box-shadow:0 4px 0 var(--shadow);background:#ffffffbf;border-radius:50%;padding:11px}.hud button.round:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.rooms{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:3.5vmin;padding:80px 16px 11vh;display:flex;position:absolute;inset:0}.title{letter-spacing:.01em;color:var(--pink);-webkit-text-stroke:9px var(--ink);text-shadow:0 6px 0 var(--shadow);margin:0;font-size:clamp(52px,12vmin,128px);line-height:.9}.cards{--w:min(25vmin, calc((100vw - 56px - 4 * 2.4vmin) / 5), 214px);flex-wrap:wrap;justify-content:center;gap:2.4vmin;display:flex}.hud button.room{width:var(--w);height:calc(var(--w) * 1.28);background:0 0;padding:0}.room .face{box-sizing:border-box;width:100%;height:100%;padding:calc(var(--w) * .06) 4px calc(var(--w) * .07);background:var(--card);border:6px solid var(--ink);border-radius:calc(var(--w) * .16);box-shadow:0 8px 0 var(--shadow);flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:relative;overflow:hidden}.room .name,.room .best{z-index:1;position:relative}.hud button.room:active .face{box-shadow:0 4px 0 var(--shadow);translate:0 4px}.room .name{color:#fff;font-size:calc(var(--w) * .15);white-space:nowrap;-webkit-text-stroke:5px var(--ink);text-shadow:0 3px 0 var(--shadow);line-height:1}.room .pic{width:100%;height:58%}.room .best{color:#fff;font-size:calc(var(--w) * .14);-webkit-text-stroke:5px var(--ink);text-shadow:0 3px 0 var(--shadow);align-items:center;gap:2px;line-height:1;display:flex}.room .best .star{width:calc(var(--w) * .2);height:calc(var(--w) * .2)}.room.locked .name,.room.locked .pic,.room.locked .best{opacity:.45;filter:grayscale(.8)}.room .lock{aspect-ratio:1;width:46%;filter:drop-shadow(0 4px 0 var(--shadow));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.room.next .face{animation:.9s ease-in-out infinite alternate breathe}.room.lit .face{outline-offset:5px;outline:6px solid #fff}.room.home .pic{animation:.7s cubic-bezier(.2,1.6,.4,1) .15s both kittenHome}.room.opening .lock{animation:unlock .6s var(--open-at) ease-in both}.room.opening .name,.room.opening .pic,.room.opening .best{animation:undim .4s calc(var(--open-at) + .2s) both}.room.opening.next .face{animation:breathe .9s calc(var(--open-at) + .6s) ease-in-out infinite alternate}.title.say{color:var(--gold);white-space:nowrap;font-size:clamp(40px,min(12vmin,9vw),120px);animation:.5s cubic-bezier(.2,1.6,.4,1) both sayIn}.flight{pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;position:fixed;top:0;left:0}.flight .star{width:100%;height:100%}.hud button.fresh{left:calc(12px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 3px 0 var(--shadow);touch-action:none;background:#ffffffb3;border-radius:999px;padding:8px 16px;font-size:17px;position:absolute}.ring{pointer-events:none;width:124px;height:124px;margin:-62px 0 0 -62px;position:fixed;overflow:visible}.ring circle{fill:none;stroke-width:12px}.ring .track{stroke:#ffffffbf}.ring .fill{stroke:var(--pink);stroke-linecap:round;animation:linear forwards fillRing;transform:rotate(-90deg)}.ribbon{left:50%;top:calc(18px + env(safe-area-inset-top));align-items:center;gap:14px;width:min(36vw,440px);height:52px;display:flex;position:absolute;transform:translate(-50%)}.ribbon .track{box-sizing:border-box;border:4px solid var(--ink);background:#fffc;border-radius:7px;flex:1;height:14px;position:relative}.ribbon .fill{background:var(--pink);transform-origin:0;border-radius:4px;position:absolute;inset:0;transform:scaleX(0)}.ribbon .runner{position:absolute;inset:0}.ribbon .head{width:50px;height:50px;position:absolute;top:50%;left:0;transform:translate(-50%,-54%)}.ribbon .bed{flex:none;width:58px;height:50px}.shout{white-space:nowrap;-webkit-text-stroke:9px var(--ink);text-shadow:0 6px 0 var(--shadow);font-size:clamp(56px,12vmin,140px);line-height:1;animation:.4s cubic-bezier(.2,1.6,.4,1) both pop,.25s ease-in .65s forwards fadeAway;position:absolute;top:25%;left:50%}.shout.wow{color:var(--gold)}.shout.boing{color:#8ce99a}.shout.oops{color:#ff9ebb}.shout.yay{color:var(--pink)}.card{background:var(--paper);border:6px solid var(--ink);box-shadow:0 8px 0 var(--shadow);border-radius:36px}.card.start{flex-direction:column;align-items:center;padding:2vmin 6vmin 3vmin;animation:.35s cubic-bezier(.2,1.5,.4,1) both cardIn;display:flex;position:absolute;top:44%;left:50%}.card.start .pic{width:24vmin;height:24vmin}.card.start p{color:var(--pink);margin:0;font-size:clamp(40px,8vmin,96px);line-height:1.05}.dim{pointer-events:auto;background:#3b224580;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.card.menu{box-sizing:border-box;flex-direction:column;align-items:center;gap:2.2vmin;max-width:92vw;padding:2.4vmin 5vmin 3.4vmin;animation:.3s cubic-bezier(.2,1.5,.4,1) both menuIn;display:flex}.menu .top{align-items:center;gap:2vmin;display:flex}.menu h1{color:var(--pink);margin:0;font-size:clamp(40px,9vmin,100px);line-height:1}.menu .top .pic{width:13vmin;height:13vmin}.card.menu button{border:5px solid var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:.35em;display:inline-flex}.card.menu button .icon{width:1em;height:1em}.card.menu button:active{transform:translateY(4px)}.hud button.primary{color:#fff;background:var(--pink);box-shadow:0 8px 0 var(--pink-deep);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;padding:.18em .9em .22em .7em;font-size:clamp(30px,6.4vmin,68px)}.hud button.primary:active{box-shadow:0 4px 0 var(--pink-deep)}.hud button.secondary{box-shadow:0 6px 0 var(--shadow);background:#fff;padding:.2em .8em .24em .6em;font-size:clamp(22px,4.4vmin,46px)}.menu .pair,.menu .row{flex-wrap:wrap;justify-content:center;gap:1.6vmin;display:flex}.hud button.small{box-shadow:0 5px 0 var(--shadow);background:#fff;padding:.25em .75em .3em .55em;font-size:clamp(16px,2.8vmin,28px)}.hud button.small.off{background:#e9dfe8}.controls .zone{pointer-events:auto;touch-action:none;position:absolute;top:90px;bottom:0}.controls .zone.steer{left:calc(40px + env(safe-area-inset-left));width:calc(40% - 40px - env(safe-area-inset-left))}.controls .zone.leap{left:50%;right:0}.controls .pad,.controls .jump,.controls .blow{bottom:calc(3vmin + env(safe-area-inset-bottom));position:absolute}.controls .pad{left:calc(max(3vmin, 40px) + env(safe-area-inset-left));pointer-events:none;gap:1vmin;display:flex}.controls .half,.controls .jump,.controls .blow{box-sizing:border-box;border:max(3px, .5vmin) solid var(--ink);opacity:.35;transition:opacity 80ms}.controls .half{border-radius:3.5vmin;width:14vmin;height:14vmin;padding:3.6vmin}.controls .jump{right:calc(3vmin + env(safe-area-inset-right));pointer-events:none;border-radius:50%;width:18vmin;height:18vmin;padding:4.4vmin}.controls .blow{right:calc(6vmin + env(safe-area-inset-right));bottom:calc(23vmin + env(safe-area-inset-bottom));pointer-events:auto;touch-action:none;border-radius:50%;width:12vmin;height:12vmin;padding:1.6vmin;animation:.5s ease-in-out 6 alternate learn}.controls .on{opacity:.7;background:var(--pressed)}.controls .learn{animation:.9s ease-in-out infinite alternate learn}.controls .ghost{--pad:calc(max(3vmin, 40px) + env(safe-area-inset-left));pointer-events:none;width:10vmin;height:13vmin;filter:drop-shadow(0 4px 0 var(--shadow));margin-left:-5vmin;animation:6s ease-in-out both ghost;position:absolute}.picnic{padding:calc(5vmin + env(safe-area-inset-top)) 16px calc(4vmin + env(safe-area-inset-bottom));box-sizing:border-box;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:0}.picnic .words{white-space:nowrap;color:var(--gold);-webkit-text-stroke:9px var(--ink);text-shadow:0 6px 0 var(--shadow);margin:0;font-size:clamp(40px,min(10vmin,8vw),120px);line-height:1;animation:.6s cubic-bezier(.2,1.6,.4,1) both sayIn}.picnic .kittens{gap:2vmin;display:flex}.picnic .kittens .pic{border:5px solid var(--ink);background:var(--paper);width:15vmin;height:15vmin;box-shadow:0 6px 0 var(--shadow);border-radius:50%}.oops{color:var(--ink);background:var(--paper);white-space:pre-wrap;margin:0;padding:32px;font:600 22px/1.4 ui-monospace,monospace;position:fixed;inset:0}@media (orientation:portrait){.cards{--w:min(28vmin, 230px)}}@media (height<=500px){.rooms{gap:2.5vmin;padding:60px 12px 36px}.cards{--w:min(34vmin, calc((100vw - 56px - 4 * 2.4vmin) / 5))}.corner{gap:8px}.hud button.round{width:48px;height:48px;padding:9px}.hud button.fresh{padding:6px 12px;font-size:14px}.menu .top .pic{display:none}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)rotate(-8deg)}to{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-4deg)}}@keyframes sayIn{0%{opacity:0;rotate:-8deg;scale:.3}to{opacity:1;rotate:-3deg;scale:1}}@keyframes fadeAway{to{opacity:0}}@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes menuIn{0%{opacity:0;scale:.7}to{opacity:1;scale:1}}@keyframes bump{0%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes breathe{0%{scale:1}to{scale:1.06}}@keyframes learn{0%{scale:1}to{scale:1.1}}@keyframes kittenHome{0%{transform:scale(0)rotate(-20deg)}to{transform:scale(1)rotate(0)}}@keyframes unlock{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}35%{opacity:1;transform:translate(-50%,-62%)scale(1.25)rotate(-10deg)}to{opacity:0;transform:translate(-50%,-90%)scale(.4)rotate(20deg)}}@keyframes undim{0%{opacity:.45;filter:grayscale(.8)}to{opacity:1;filter:none}}@keyframes fillRing{to{stroke-dashoffset:0}}@keyframes ghost{0%{left:calc(var(--pad) + 7vmin);opacity:0;top:calc(100% - 8vmin);transform:scale(1)}8%{left:calc(var(--pad) + 7vmin);opacity:.9;top:calc(100% - 10vmin);transform:scale(1)}14%{transform:scale(.88)}20%{left:calc(var(--pad) + 7vmin);transform:scale(.88)}32%{left:calc(var(--pad) + 22vmin);top:calc(100% - 10vmin);transform:scale(.88)}38%{transform:scale(1)}52%{top:calc(100% - 12vmin);left:calc(100% - 12vmin);transform:scale(1)}58%{transform:scale(.85)}64%{transform:scale(1)}72%{transform:scale(.85)}78%{transform:scale(1)}90%{opacity:.9;top:calc(100% - 12vmin);left:calc(100% - 12vmin)}to{opacity:0;top:calc(100% - 10vmin);left:calc(100% - 12vmin)}}