:root{--page: #2a2522;--stage: #c4afa4;--stage-deep: #ab968b;--ink: #161210;--paper: #fffaf3;--buddy: #3aa6c9;--quit: #d63a2f;--muted: #b9aca4;--gold: #f2c230;--display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;--body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}body{background:var(--stage);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.5;overflow:hidden;overscroll-behavior:none}.wrap{height:100vh;height:100dvh}button,.buddy{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.window{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--stage);color:var(--ink)}.titlebar{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 8px calc(14px + env(safe-area-inset-left,0px));background:var(--paper);border-bottom:4px solid var(--ink);font-family:var(--display);font-size:22px}.titlebar .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.titlebar .age{font-family:var(--body);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.pill{flex:none;font-family:var(--body);font-size:13px;font-weight:700;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:1px 12px;cursor:pointer}.game{flex:1;min-height:0;display:grid;grid-template-columns:172px 1fr}.rail{background:var(--stage-deep);border-right:4px solid var(--ink);padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:10px}.act{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .06s,box-shadow .06s;text-align:left}.act:hover{background:#fff}.act:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.act:focus-visible,.pill:focus-visible{outline:3px solid var(--buddy);outline-offset:2px}.act svg{width:22px;height:22px;flex:none}.act.code{margin-top:auto;background:var(--buddy);color:var(--paper)}.act.quit{background:var(--quit);color:var(--paper)}.act.home{background:var(--gold)}.act.home:hover{background:#ffd54f}.act.quit:hover{background:#e8463a}.stage{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:18px calc(18px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) 18px;gap:6px;min-width:0;overflow:hidden;transition:background .4s}.stage[data-place=holiday]{background:repeating-linear-gradient(transparent 0 12px,#ffc47899 12px,#ffc47899 15px) 74% 72% / 22% 24% no-repeat,linear-gradient(transparent 0 62%,#3d5f93 62%,#1d3461),radial-gradient(circle at 74% 62%,#ffe08a 0 50px,rgba(255,210,120,.45) 51px 66px,transparent 67px),linear-gradient(#35285f,#8c3f7f 26%,#e2626a 44%,#f79a4d 56%,#ffc76a 62%)}.stage[data-place=holiday] .trip{color:var(--paper)}.stage[data-place=holiday] .buddy:not(.bounce):not(.wiggle){animation:rock 3.4s ease-in-out infinite}@keyframes rock{0%,to{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}.puppet .oar{transform-box:view-box}.puppet .oar-l{transform-origin:0px 302px}.puppet .oar-r{transform-origin:420px 302px}.puppet.rowing .oar-l{animation:row-l 1.7s ease-in-out infinite}.puppet.rowing .oar-r{animation:row-r 1.7s ease-in-out infinite}.puppet.rowing:not(.wave):not(.flail):not(.cheer) .arm-l{animation:pull-l 1.7s ease-in-out infinite}.puppet.rowing:not(.wave):not(.flail):not(.cheer) .arm-r{animation:pull-r 1.7s ease-in-out infinite}@keyframes row-l{0%,to{transform:rotate(14deg)}50%{transform:rotate(-12deg)}}@keyframes row-r{0%,to{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}@keyframes pull-l{0%,to{transform:rotate(-14deg)}50%{transform:rotate(10deg)}}@keyframes pull-r{0%,to{transform:rotate(14deg)}50%{transform:rotate(-10deg)}}.stage[data-place=work]{background:linear-gradient(90deg,transparent 0 8%,#b9dcf0 8% 30%,transparent 30%) 0 12% / 100% 34% no-repeat,linear-gradient(#d9d4c7 0,#d9d4c7 72%,#6b4f3a 72%,#6b4f3a 76%,#8a6a52 76%)}.stage[data-place=kitchen]{background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,0,0,.08) 38px 40px),repeating-linear-gradient(transparent 0 38px,#00000014 38px,#00000014 40px),linear-gradient(#f4efe6 0,#f4efe6 70%,#c9b49a 70%,#c9b49a 74%,#a98d6e 74%)}.bubble{justify-self:center;position:relative;z-index:2;max-width:380px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:10px 16px;font-family:var(--display);font-size:22px;line-height:1.2;text-align:center;min-height:52px;display:grid;place-items:center;text-wrap:balance}.bubble:after{content:"";position:absolute;left:50%;bottom:-15px;width:22px;height:22px;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translate(-50%) rotate(45deg)}.bubble.pop{animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.85)}to{transform:scale(1)}}.buddyspot{display:grid;place-items:end center;position:relative;padding-top:60px;min-height:0}.buddy{position:relative;width:min(440px,62vw,46vh);width:min(440px,62vw,46dvh);max-width:100%;transform-origin:50% 100%;animation:idle 2.6s ease-in-out infinite;-webkit-user-select:none;user-select:none;cursor:pointer}.puppet{display:block;width:100%;height:auto;overflow:visible}.puppet .arm{transform-box:view-box;transition:transform .25s}.puppet .arm-l{transform-origin:108px 198px;animation:sway-l 3.2s ease-in-out infinite}.puppet .arm-r{transform-origin:340px 206px;animation:sway-r 3.6s ease-in-out infinite}.puppet .eye{transform-box:view-box;transition:transform .06s}.puppet .tail{transform-box:view-box;animation:wag 1.4s ease-in-out infinite}.buddy:hover .puppet .tail,.puppet.wave .tail,.puppet.cheer .tail{animation-duration:.4s}.puppet.blink .eye{transform:scaleY(.1)}.puppet.wave .arm-r{animation:wave .35s ease-in-out 4 alternate}.puppet.flail .arm-l{animation:flail-l .18s ease-in-out 5 alternate}.puppet.flail .arm-r{animation:flail-r .18s ease-in-out 5 alternate}.puppet.cheer .arm-l{animation:none;transform:rotate(150deg)}.puppet.cheer .arm-r{animation:none;transform:rotate(-150deg)}@keyframes sway-l{0%,to{transform:rotate(0)}50%{transform:rotate(5deg)}}@keyframes sway-r{0%,to{transform:rotate(0)}50%{transform:rotate(-6deg)}}@keyframes wag{0%,to{transform:rotate(0)}50%{transform:rotate(-7deg)}}@keyframes wave{0%{transform:rotate(-120deg)}to{transform:rotate(-160deg)}}@keyframes flail-l{0%{transform:rotate(60deg)}to{transform:rotate(140deg)}}@keyframes flail-r{0%{transform:rotate(-60deg)}to{transform:rotate(-140deg)}}.buddy.bounce{animation:bounce .45s ease-out}.buddy.wiggle{animation:wiggle .5s ease-in-out}@keyframes idle{0%,to{transform:scale(1)}50%{transform:scale(1.025,.975)}}@keyframes bounce{0%{transform:translateY(0) scale(1.08,.9)}40%{transform:translateY(-34px) scale(.95,1.05)}to{transform:translateY(0) scale(1)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}.fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.fx span{position:absolute;font-family:var(--display);font-size:26px;animation:rise 1.1s ease-out forwards;color:var(--ink)}@keyframes rise{0%{transform:translateY(0);opacity:1}to{transform:translateY(-90px);opacity:0}}.pile{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.trip{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;font-weight:700;position:relative;z-index:2}.shelf{position:absolute;z-index:0;top:96px;left:18px;max-width:min(30%,300px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 10px;padding:0 8px;--row: 50px;background:repeating-linear-gradient(transparent 0 calc(var(--row) - 10px),var(--ink) calc(var(--row) - 10px) calc(var(--row) - 7px),#8a6a52 calc(var(--row) - 7px) calc(var(--row) - 3px),var(--ink) calc(var(--row) - 3px) var(--row))}.stage:not([data-place=""]) .shelf{display:none}.shelf svg{height:40px;width:auto;margin-bottom:10px;flex:none;overflow:visible}.shelf svg.new{animation:pop .4s ease-out 3}.buried{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.buried svg{height:22px;width:auto}.code-word{display:inline-block;background:var(--gold);border:2px solid var(--ink);border-radius:6px;padding:0 5px;letter-spacing:.04em;transform:rotate(-2deg);animation:wig 1.6s ease-in-out infinite}@keyframes wig{50%{transform:rotate(2deg) scale(1.06)}}.known{display:grid;gap:6px}.known>span{font-family:var(--display);font-size:15px}.notes{display:flex;flex-wrap:wrap;gap:8px}.codebox .note{font-family:var(--display);font-size:16px;letter-spacing:.04em;background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:4px;padding:2px 12px;box-shadow:0 3px 0 var(--ink);cursor:pointer;transform:rotate(-2deg)}.codebox .note:nth-child(2n){transform:rotate(2deg)}.pantry{font-size:20px;letter-spacing:2px}.pantry .new{display:inline-block;animation:pop .4s ease-out 2}.codebox{position:absolute;z-index:3;inset:auto 18px 60px 18px;background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:12px;display:grid;gap:8px;box-shadow:0 6px 0 var(--ink)}.codebox label{font-family:var(--display);font-size:18px}.codebox .row{display:flex;gap:8px}.codebox input{flex:1;min-width:0;font:inherit;font-size:18px;text-transform:uppercase;letter-spacing:.1em;border:3px solid var(--ink);border-radius:10px;padding:6px 10px;background:#fff;color:var(--ink)}.codebox button{font-family:var(--display);font-size:17px;border:3px solid var(--ink);border-radius:10px;background:var(--buddy);color:var(--paper);padding:4px 14px;cursor:pointer}.gravepanel{position:absolute;z-index:5;top:calc(56px + env(safe-area-inset-top,0px));right:12px;width:min(360px,calc(100% - 24px));max-height:60%;overflow:auto;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:0 6px 0 var(--ink);font-size:14px}.gravepanel h2{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:20px}.gravepanel ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}@media(max-width:620px){.titlebar{font-size:19px;gap:8px}.titlebar .age{display:none}.pill{font-size:12px;padding:1px 10px}.game{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.stage{grid-row:1;padding:12px 12px 8px}.rail{grid-row:2;border-right:0;border-top:4px solid var(--ink);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:10px calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}.act{flex-direction:column;justify-content:center;gap:2px;padding:6px 4px;font-size:14px;line-height:1.1;text-align:center}.act svg{width:24px;height:24px}.act.code{margin-top:0}.bubble{font-size:18px;padding:8px 12px;min-height:44px}.buddyspot{padding-top:50px}.buddy{width:min(80vw,40vh);width:min(80vw,40dvh)}.codebox{inset:auto 12px 12px 12px}.shelf{top:80px;left:10px;max-width:34%;--row: 38px;gap:0 6px;padding:0 4px}.shelf svg{height:28px}}@media(max-height:500px)and (min-width:621px){.titlebar{font-size:18px;padding-block:calc(4px + env(safe-area-inset-top,0px)) 4px}.game{grid-template-columns:150px 1fr}.rail{padding-block:8px calc(8px + env(safe-area-inset-bottom,0px));gap:6px}.act{font-size:16px;padding:4px 8px}.bubble{font-size:17px;padding:6px 12px;min-height:40px}.buddyspot{padding-top:40px}.stage{padding-top:10px}}@media(prefers-reduced-motion:reduce){.buddy,.buddy.bounce,.buddy.wiggle,.stage .buddy,.puppet .arm,.puppet .tail,.puppet .oar,.fx span,.bubble.pop,.code-word,.shelf svg.new{animation:none!important}}.app,.app *{touch-action:manipulation}
