:root{--cream: #f9efdb;--cream-soft: rgba(249, 239, 219, .94);--ink: #3d3050;--ink-soft: #5c4d6e;--accent: #d97e5a;--accent-dark: #bd6242;--accent-deep: #96492f;--peach: #ffc9a3;--lavender: #a89ad8;--night: #232850;--gold: #ffd98a;--focus-ring: 0 0 0 3px rgba(255, 217, 138, .95), 0 0 0 6px rgba(61, 48, 80, .55);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--night);overscroll-behavior:none;font-family:Segoe UI,-apple-system,Helvetica Neue,Arial,sans-serif}#app{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game-root{position:absolute;inset:0}#game-root canvas{image-rendering:pixelated;image-rendering:crisp-edges}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(180deg,#2b3160,#232850 55%,#1b1f40);color:var(--cream);z-index:60;transition:opacity .5s ease}#loading.hidden{opacity:0;pointer-events:none}#loading p{font-size:15px;letter-spacing:.4px;opacity:.85}.loading-heart,.error-heart{width:34px;height:30px;background:#ff8fa8;clip-path:polygon(12.5% 0%,37.5% 0%,37.5% 12.5%,62.5% 12.5%,62.5% 0%,87.5% 0%,100% 12.5%,100% 50%,87.5% 62.5%,75% 75%,62.5% 87.5%,50% 100%,37.5% 87.5%,25% 75%,12.5% 62.5%,0% 50%,0% 12.5%);animation:heartbeat 1.4s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}30%{transform:scale(1.18)}45%{transform:scale(1)}}#ui{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}#ui>*{pointer-events:none}#ui button{pointer-events:auto;font-family:inherit;cursor:pointer;border:none}#ui button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.menu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));background:radial-gradient(ellipse at center,#23285000 40%,#181a3473);opacity:0;transition:opacity .6s ease}.menu.shown{opacity:1}.menu.hidden{opacity:0;pointer-events:none!important}.menu-panel{text-align:center;background:var(--cream-soft);border-radius:18px;padding:clamp(20px,4.5vmin,40px) clamp(24px,6vmin,56px);box-shadow:0 10px 40px #14102873,inset 0 0 0 2px #d97e5a59;max-width:min(520px,92vw);max-height:92%;overflow:auto}.menu-title{font-family:Georgia,Times New Roman,serif;font-size:clamp(21px,4.6vmin,34px);line-height:1.2;color:var(--ink);margin-bottom:10px}.menu-subtitle{font-size:clamp(14px,2.6vmin,17px);color:var(--ink-soft);font-style:italic;margin-bottom:clamp(16px,3.5vmin,28px)}.menu-start{display:inline-block;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff7ec;font-size:clamp(17px,3.2vmin,21px);font-weight:600;letter-spacing:.5px;padding:14px 44px;border-radius:999px;box-shadow:0 4px 0 var(--accent-deep),0 8px 18px #1410284d;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;min-height:52px}.menu-start:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 5px 0 var(--accent-deep),0 10px 20px #14102857}.menu-start:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep),0 4px 10px #1410284d}.menu-sound-note{margin-top:clamp(14px,3vmin,22px);font-size:clamp(12px,2.2vmin,14px);color:var(--ink-soft);opacity:.85}.hint{position:absolute;top:calc(18px + var(--safe-top));left:50%;transform:translate(-50%);background:#23203ab8;color:var(--cream);font-size:clamp(13px,2.4vmin,16px);padding:10px 20px;border-radius:999px;letter-spacing:.3px;opacity:0;transition:opacity .6s ease;white-space:nowrap;max-width:92vw;text-overflow:ellipsis;overflow:hidden}.hint.visible{opacity:1}.dialogue{position:absolute;left:50%;bottom:calc(clamp(96px,30vh,320px) + var(--safe-bottom));transform:translate(-50%) translateY(14px);width:min(620px,calc(100vw - 32px - var(--safe-left) - var(--safe-right)));background:var(--cream-soft);border-radius:14px;box-shadow:0 8px 30px #14102866,inset 0 0 0 2px #a89ad866;padding:14px 18px 12px;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}.dialogue.visible{opacity:1;transform:translate(-50%) translateY(0)}.dialogue-name{font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:clamp(13px,2.4vmin,15px);color:var(--accent-dark);margin-bottom:4px;letter-spacing:.6px}.dialogue-text{font-size:clamp(15px,2.9vmin,18px);line-height:1.45;color:var(--ink);min-height:2.4em}.dialogue-actions{display:flex;justify-content:flex-end;margin-top:6px}.dialogue-next{background:transparent;color:var(--accent-dark);font-size:clamp(14px,2.6vmin,16px);font-weight:600;padding:8px 14px;border-radius:10px;min-height:42px;transition:background .15s ease,transform .15s ease}.dialogue-next:hover{background:#d97e5a24}.dialogue-next:active{transform:translateY(1px)}.dialogue-next:after{content:" ▸"}.walk-button{position:absolute;right:calc(18px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));width:clamp(84px,15vmin,110px);height:clamp(84px,15vmin,110px);border-radius:50%;background:#f9efdb38;box-shadow:inset 0 0 0 2.5px #f9efdb8c;color:#f9efdbf2;font-size:clamp(30px,6vmin,40px);display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px);transition:background .15s ease,transform .1s ease;touch-action:none}.walk-button.shown{display:flex}.walk-button.pressed{background:#ffc9a36b;transform:scale(.96)}.mute-button{position:absolute;top:calc(12px + var(--safe-top));right:calc(12px + var(--safe-right));width:46px;height:46px;border-radius:50%;background:#23203a99;color:var(--cream);display:none;align-items:center;justify-content:center;transition:background .15s ease,transform .1s ease}.mute-button.shown{display:flex}.mute-button:hover{background:#23203ad9}.mute-button:active{transform:scale(.94)}.mute-button svg{width:22px;height:22px;fill:currentColor}.rotate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1b1830e0;padding:24px;opacity:1;transition:opacity .4s ease;z-index:50;pointer-events:auto!important}.rotate-overlay.hidden{opacity:0;pointer-events:none!important}.rotate-overlay.hidden button{pointer-events:none!important}.rotate-panel{text-align:center;color:var(--cream);max-width:320px}.rotate-phone{width:40px;height:64px;margin:0 auto 18px;border:3px solid var(--cream);border-radius:9px;animation:rotate-suggest 2.2s ease-in-out infinite}@keyframes rotate-suggest{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}.rotate-panel h2{font-family:Georgia,Times New Roman,serif;font-size:20px;margin-bottom:8px;font-weight:400}.rotate-panel p{font-size:14px;opacity:.8;margin-bottom:20px}.rotate-continue{background:transparent;color:var(--gold);font-size:15px;font-weight:600;padding:12px 22px;border-radius:999px;box-shadow:inset 0 0 0 2px #ffd98a99;transition:background .15s ease;min-height:46px}.rotate-continue:hover{background:#ffd98a1f}.replay-button{position:absolute;left:50%;bottom:calc(clamp(20px,5vh,48px) + var(--safe-bottom));transform:translate(-50%) translateY(10px);background:#f9efdb24;color:var(--cream);font-size:clamp(14px,2.7vmin,17px);font-weight:600;letter-spacing:.4px;padding:13px 30px;border-radius:999px;box-shadow:inset 0 0 0 2px #f9efdb80;backdrop-filter:blur(2px);opacity:0;transition:opacity .8s ease,transform .8s ease,background .15s ease;min-height:48px}.replay-button.visible{opacity:1;transform:translate(-50%) translateY(0)}.replay-button:hover{background:#f9efdb42}.replay-button:active{transform:translate(-50%) translateY(2px)}.error-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#2b3160,#232850 55%,#1b1f40);pointer-events:auto}.error-panel{text-align:center;color:var(--cream);max-width:420px}.error-heart{margin:0 auto 20px;opacity:.9}.error-panel h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(22px,4.5vmin,30px);font-weight:400;margin-bottom:12px}.error-panel p{font-size:clamp(14px,2.6vmin,16px);opacity:.85;margin-bottom:6px}.error-sub{opacity:.65!important}.error-brand{margin-top:26px;font-family:Georgia,Times New Roman,serif;letter-spacing:1.5px;font-size:13px;text-transform:uppercase;opacity:.55!important}@media(prefers-reduced-motion:reduce){.loading-heart,.error-heart,.rotate-phone{animation:none}.menu,.dialogue,.hint,.replay-button{transition-duration:.01s}}