html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#2b1e2f;height:100%;margin:0;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;overflow:hidden}body{position:fixed;inset:0}#game{touch-action:none;position:absolute;inset:0}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.banner{left:50%;top:max(16px, env(safe-area-inset-top));color:#4b3a55;text-align:center;pointer-events:none;background:#fff6e5;border:4px solid #7a4a30;border-radius:10px;padding:8px 24px 6px;transition:transform .3s;position:absolute;transform:translate(-50%,-160%);box-shadow:0 4px #52301f}.banner.show{transform:translate(-50%)}.banner-name{letter-spacing:.5px;font-size:26px;font-weight:800}.banner-leaves{min-height:22px;font-size:18px}.sign{opacity:0;pointer-events:none;flex-direction:column;align-items:center;transition:transform .2s,opacity .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.6)}.sign.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.sign-board{color:#52301f;background:#d2ae74;border:4px solid #7a4a30;border-radius:6px;padding:10px 20px 4px;font-size:24px;font-weight:800;box-shadow:inset 0 -4px #a07048}.sign-sub{color:#52301f;background:#d2ae74;border:4px solid #7a4a30;border-top:0;border-radius:0 0 6px 6px;margin-top:-6px;padding:0 16px 8px;font-size:16px;font-weight:700}.sign-sub:empty{display:none}.sign-post{background:#7a4a30;border:3px solid #52301f;border-top:0;width:12px;height:28px}.problem{color:#2b1e2f;white-space:pre-wrap;background:#fff6e5;border:4px solid #b2473f;border-radius:10px;max-width:560px;height:fit-content;margin:auto;padding:16px 20px;font-size:16px;display:none;position:absolute;inset:24px}.problem.show{display:block}.offline{left:50%;bottom:max(12px, env(safe-area-inset-bottom));pointer-events:none;color:#b2473f;background:#fff6e5;border:3px solid #b2473f;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700;display:none;position:absolute;transform:translate(-50%)}.offline.show{display:block}.log-out{right:max(10px, env(safe-area-inset-right));top:max(10px, env(safe-area-inset-top));color:#4b3a55;opacity:.9;background:#fff6e5;border:3px solid #7a4a30;border-radius:10px;padding:6px 12px;font:700 15px ui-rounded,system-ui,sans-serif;display:none;position:absolute}.log-out.show{display:block}.pixel{image-rendering:pixelated;image-rendering:crisp-edges}.screens{-webkit-overflow-scrolling:touch;color:#4b3a55;touch-action:pan-y;background:#2b1e2f;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:none;position:absolute;inset:0;overflow-y:auto}.screens.show{display:block}.title-bg{image-rendering:pixelated;filter:brightness(.75);background:#2b1e2f url(/project/maps/previews/hollowbrook.png) 46% 42%/4464px 4464px no-repeat;position:fixed;inset:0}.title-safe{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100%;padding:24px 16px;display:flex;position:relative}.title-logo{filter:drop-shadow(0 6px #2b1e2f73);max-width:92vw;height:auto}.big-button{color:#52301f;cursor:pointer;background:#f6cf55;border:4px solid #7a4a30;border-radius:14px;min-height:64px;padding:12px 40px;font:800 26px ui-rounded,system-ui,sans-serif;box-shadow:0 5px #52301f}.big-button:active{transform:translateY(3px);box-shadow:0 2px #52301f}.small-button{color:#4b3a55;cursor:pointer;background:#fff6e5;border:3px solid #7a4a30;border-radius:10px;min-height:48px;padding:8px 18px;font:700 18px ui-rounded,system-ui,sans-serif}.panel{flex-direction:column;justify-content:center;align-items:center;gap:18px;max-width:760px;min-height:100%;margin:0 auto;padding:24px 16px;display:flex}.panel-title{color:#fff6e5;text-align:center;font-size:32px;font-weight:800}.panel-sub{color:#cfc6c8;font-size:20px;font-weight:700}.tiles{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.tile{color:#4b3a55;cursor:pointer;background:#fff6e5;border:4px solid #7a4a30;border-radius:12px;flex-direction:column;align-items:center;gap:6px;min-width:110px;padding:12px 14px 10px;font:800 18px ui-rounded,system-ui,sans-serif;display:flex}.tile canvas{width:64px;height:128px}.tile-im-new{background:#f6cf55}.tile-new{color:#8a7690;justify-content:center;align-items:center;width:64px;height:128px;font-size:48px;display:flex}.tile:active,.picture:active,.swatch:active,.arrow:active{transform:scale(.95)}.dots{gap:14px;display:flex}.dots span{border:3px solid #fff6e5;border-radius:50%;width:22px;height:22px}.dots span.on{background:#f6cf55;border-color:#f6cf55}.dots.shake{animation:.36s shake}@keyframes shake{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.pictures{grid-template-columns:repeat(3,96px);gap:12px;display:grid}.picture{cursor:pointer;background:#fff6e5;border:4px solid #7a4a30;border-radius:16px;width:96px;height:96px;font-size:52px;line-height:1}.message{color:#f5a9c0;text-align:center;min-height:26px;font-size:20px;font-weight:800}.creator{flex-direction:column;gap:16px;max-width:900px;margin:0 auto;padding:20px 16px 32px;display:flex}.creator-body{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;display:flex}.creator-preview{background:#74bd55;border:4px solid #7a4a30;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:18px 26px;display:flex}.preview-canvas{width:96px;height:192px}.creator-options{background:#fff6e5;border:4px solid #7a4a30;border-radius:16px;flex-direction:column;flex:360px;gap:12px;max-width:520px;padding:16px 18px;display:flex}.option{flex-direction:column;gap:6px;display:flex}.option-label{font-size:18px;font-weight:800}.option input[type=text]{color:#2b1e2f;border:3px solid #8a7690;border-radius:10px;padding:10px 12px;font:700 22px ui-rounded,system-ui,sans-serif}.hint{color:#8a7690;font-size:15px}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;border:3px solid #cfc6c8;border-radius:50%;width:44px;height:44px}.swatch.on{border:4px solid #2b1e2f;box-shadow:0 0 0 3px #f6cf55}.stepper{align-items:center;gap:10px;display:flex}.arrow{color:#52301f;cursor:pointer;background:#f6cf55;border:3px solid #7a4a30;border-radius:12px;width:48px;height:48px;font-size:20px}.step-name{text-align:center;flex:1;font-size:20px;font-weight:800}.toggle{flex-direction:row;align-items:center;gap:10px}.toggle input{width:28px;height:28px}.creator .big-button{align-self:center;margin-top:6px}.action{left:50%;bottom:max(16px, env(safe-area-inset-bottom));color:#4b3a55;text-align:center;background:#fff6e5;border:4px solid #7a4a30;border-radius:14px;flex-direction:column;align-items:center;gap:6px;min-width:240px;padding:10px 18px 12px;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:none;position:absolute;transform:translate(-50%);box-shadow:0 4px #52301f}.action.show{display:flex}.action-title{font-size:22px;font-weight:800}.action-sub{color:#8a7690;font-size:18px;font-weight:700}.action-sub:empty{display:none}.action .big-button{min-height:52px;padding:8px 28px;font-size:22px}.toast{left:50%;top:max(84px, calc(env(safe-area-inset-top) + 72px));text-align:center;pointer-events:none;color:#4b3a55;background:#fff6e5;border:4px solid #7a4a30;border-radius:14px;max-width:min(520px,100vw - 32px);padding:10px 18px;font:800 20px ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:none;position:absolute;transform:translate(-50%);box-shadow:0 4px #52301f}.toast.show{display:block}.popup{color:#4b3a55;text-align:center;background:#fff6e5;border:4px solid #7a4a30;border-radius:16px;flex-direction:column;align-items:center;gap:14px;width:min(440px,100vw - 32px);padding:18px 18px 16px;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px #52301f}.popup.show{display:flex}.popup-message{font-size:22px;font-weight:800}.popup-buttons{flex-direction:column;align-items:stretch;gap:10px;width:100%;display:flex}.popup .big-button{font-size:22px}.visitors-button{left:max(10px, env(safe-area-inset-left));top:max(10px, env(safe-area-inset-top));color:#4b3a55;background:#fff6e5;border:3px solid #7a4a30;border-radius:10px;padding:6px 12px;font:700 15px ui-rounded,system-ui,sans-serif;display:none;position:absolute}.visitors-button.show{display:block}.emoji-button{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));cursor:pointer;background:#fff6e5;border:4px solid #7a4a30;border-radius:50%;width:72px;height:72px;font-size:40px;line-height:1;transition:opacity .2s;display:none;position:absolute;box-shadow:0 4px #52301f}.emoji-button.show{display:block}.emoji-button.resting{opacity:.45}.emoji-wheel{background:#2b1e2f73;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.emoji-wheel.show{display:flex}.emoji-choice,.emoji-close{cursor:pointer;background:#fff6e5;border:4px solid #7a4a30;border-radius:50%;width:64px;height:64px;font-size:34px;line-height:1;position:absolute;box-shadow:0 3px #52301f}.emoji-close{color:#4b3a55;font-size:24px;font-weight:800}.emoji-choice:active{scale:.92}.bedtime{z-index:10;color:#fff6e5;text-align:center;background:#2b1e2f;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;display:none;position:absolute;inset:0}.bedtime.show{display:flex}.bedtime-moon{font-size:80px}.bedtime-message{max-width:560px;font-size:26px;font-weight:800}