:root{--cream: #f4eddf;--sage: #b5bd9c;--sage-dark: #8e9e7a;--sage-deep: #6b7a5a;--apricot: #d99b72;--apricot-dark: #b8825f;--pink: #e8a0ac;--pink-dark: #d48896;--brown: #7a523d;--text: #5e5043;--text-muted: #967d65;font-family:Georgia,Times New Roman,serif;color:var(--text);background:var(--cream);font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--sage-dark);outline-offset:5px}button:disabled{cursor:default}#app{height:100vh;height:100dvh;min-height:480px;max-width:1500px;margin:auto;padding:0 48px;display:flex;flex-direction:column}.header{height:94px;flex-shrink:0;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-size:25px;letter-spacing:-.7px}.brand i{font-weight:400;color:var(--text-muted);font-size:21px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--cream);border:3px solid var(--sage-dark);color:var(--apricot-dark)}.brand-mark svg{width:25px;height:25px}.dedication{margin-left:auto;font:11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted)}.help{border:2px solid var(--sage-dark);background:var(--cream);color:var(--text-muted);width:29px;height:29px;font-size:17px}.game-frame{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden;border:4px solid var(--sage);box-shadow:8px 8px 0 var(--sage-dark),0 12px 36px #8e6c3b13;background:var(--apricot);image-rendering:pixelated}#game{width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;image-rendering:pixelated}canvas{display:block;touch-action:none;image-rendering:pixelated}.room-caption{position:absolute;z-index:1;left:40px;top:30px;pointer-events:none}.eyebrow{font:9px system-ui,sans-serif;letter-spacing:2.1px;color:var(--text-muted);font-weight:500}.room-caption h1{margin:10px 0 7px;font-size:29px;font-weight:400;letter-spacing:-.8px}.room-caption p{margin:0;font:11px system-ui,sans-serif;color:var(--text-muted)}.room-tag{position:absolute;right:29px;top:25px;display:flex;align-items:center;gap:7px;font:10px system-ui,sans-serif;letter-spacing:.3px;color:var(--sage-deep);pointer-events:none}.room-tag svg{width:15px;height:15px}.hud{position:absolute;z-index:2;bottom:25px;left:50%;transform:translate(-50%);width:min(480px,calc(100% - 44px));min-height:88px;padding:17px 18px;display:flex;align-items:center;gap:14px;border:3px solid var(--sage-dark);background:var(--cream);box-shadow:4px 4px 0 var(--sage-dark),0 6px 24px #61462e12}.mood-icon{color:var(--pink-dark);display:grid;place-items:center;background:var(--cream);border:3px solid var(--pink);width:42px;height:42px;flex-shrink:0;box-shadow:2px 2px 0 var(--pink-dark)}.mood-icon svg{width:22px;height:22px}.meter-block{flex:1;min-width:0}.meter-label{display:flex;justify-content:space-between;gap:12px;font:11px system-ui,sans-serif;color:var(--text)}.meter-label #happiness{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums}.meter{margin:9px 0 7px;height:8px;background:#e5d9c2;border:1px solid #d5c8b0;overflow:hidden}.meter-fill{height:100%;width:28%;background:var(--sage-dark);transition:width .4s ease}.meter-block p{margin:0;font:9px system-ui,sans-serif;color:var(--text-muted)}.gift{border:0;border-left:1px solid #ded2bc;background:none;color:var(--text-muted);display:flex;align-items:center;flex-direction:column;gap:4px;padding:4px 0 4px 13px;min-width:47px;font:9px system-ui,sans-serif}.gift:disabled{opacity:.48}.gift svg{width:23px;height:23px}.gift.unlocked{color:var(--brown)}.gift.unlocked svg{animation:gift-breathe 2s infinite ease-in-out}.encounter-panel{position:absolute;z-index:3;top:142px;left:50%;width:max-content;max-width:calc(100% - 32px);text-align:center;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 16px;border:3px solid var(--sage-dark);background:var(--cream);box-shadow:4px 4px 0 var(--sage-dark),0 6px 24px #61462e12;opacity:1;pointer-events:none;transition:opacity .3s ease}.encounter-panel.inviting{pointer-events:auto}.encounter-panel.complete{opacity:0}.encounter-panel:not(.inviting) .feed{display:none}#encounter-status{font:12px system-ui,sans-serif;color:var(--text)}.feed{display:flex;align-items:center;gap:8px;border:2px solid var(--sage-deep);background:var(--sage-dark);color:var(--cream);padding:9px 14px;font:12px system-ui,sans-serif;box-shadow:3px 3px 0 var(--sage-deep)}.feed:disabled{opacity:.5;background:#b0a89a;box-shadow:none}.feed svg{width:18px;height:18px}footer{height:53px;flex-shrink:0;display:flex;align-items:center;gap:8px;color:var(--text-muted);font:10px system-ui,sans-serif;letter-spacing:.2px}.footer-paw{width:13px;height:13px;opacity:.7}.footer-paw svg{width:100%;height:100%}.footer-right{margin-left:auto;color:#ac967b;font-size:9px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:3px solid var(--sage-dark);background:var(--cream);color:var(--text);width:min(480px,calc(100% - 36px));padding:0;max-height:calc(100dvh - 50px);box-shadow:8px 8px 0 var(--sage-dark),0 25px 80px #412e2940}dialog::backdrop{background:#50463366;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.letter-content{text-align:center;padding:38px 28px}.letter-icon{display:block;width:40px;height:40px;color:var(--apricot-dark);margin:0 auto 20px}.letter-icon svg{width:100%;height:100%}dialog h2{font-size:39px;font-weight:400;line-height:1.12;letter-spacing:-1px;margin:18px 0 24px}dialog p{font-size:15px;line-height:1.85;color:var(--text-muted)}.signature{margin-top:24px!important;font-size:13px!important}.signature i{color:var(--apricot-dark)}dialog button{border:2px solid var(--sage-deep);background:var(--sage-dark);color:var(--cream);padding:13px 25px;margin-top:16px;font:12px system-ui,sans-serif;box-shadow:3px 3px 0 var(--sage-deep)}.help-content{padding:36px}.help-content h2{font-size:32px}.help-content p{font:14px/1.8 system-ui,sans-serif}.help-content button{display:block;margin-left:auto}@keyframes gift-breathe{50%{transform:rotate(8deg) scale(1.1)}}@media(min-width:1600px){#app{max-width:1520px}}@media(max-width:760px){#app{padding:0 14px}.header{height:74px;gap:12px}.brand{font-size:21px;gap:9px}.brand i{font-size:17px}.brand-mark{width:35px;height:35px}.brand-mark svg{width:21px;height:21px}.dedication{display:none}.help{margin-left:auto;width:27px;height:27px}.game-frame{border-width:3px;box-shadow:6px 6px 0 var(--sage-dark),0 12px 36px #8e6c3b13}.room-caption{left:0;right:0;top:22px;text-align:center}.room-caption .eyebrow{font-size:8px;letter-spacing:1.8px}.room-caption h1{font-size:26px;margin-top:9px}.room-caption p{font-size:9px}.room-tag{display:none}.hud{bottom:16px;width:calc(100% - 26px);padding:13px 12px;gap:10px;min-height:82px;border-width:3px;box-shadow:3px 3px 0 var(--sage-dark),0 6px 24px #61462e12}.mood-icon{width:31px;height:31px;border-width:2px}.mood-icon svg{width:18px;height:18px}.meter-label{font-size:10px;gap:5px}.meter-label #happiness{font-size:9px}.meter-block p{font-size:8px;line-height:1.5}.gift{padding-left:9px;min-width:41px;font-size:8px}.gift svg{width:21px;height:21px}.encounter-panel{top:132px;bottom:auto;width:calc(100% - 26px);flex-direction:column;justify-content:center;padding:9px 12px;gap:8px;border-width:3px;box-shadow:3px 3px 0 var(--sage-dark),0 6px 24px #61462e12}#encounter-status{font-size:11px}.feed{padding:8px 12px;font-size:11px}footer{height:40px;justify-content:center;font-size:9px;gap:6px;padding-bottom:env(safe-area-inset-bottom,0px)}.footer-right{display:none}.letter-content{padding:26px 22px}dialog h2{font-size:34px}dialog p{font-size:14px}.letter-icon{width:32px;height:32px;margin-bottom:16px}}@media(max-height:550px)and (min-width:600px){#app{min-height:0}.header{height:44px}.room-caption{top:16px;left:25px}.room-caption h1{font-size:22px}.room-caption p,.room-tag{display:none}.hud{bottom:8px;min-height:48px;padding:7px 12px}.hud .mood-icon{width:28px;height:28px}.hud .meter{margin:5px 0 4px}.encounter-panel{top:88px;padding:6px 10px}footer{height:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}