:root{font-synthesis:none;background:#102b35;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{isolation:isolate;place-items:center;min-height:100svh;margin:0;padding:20px;display:grid}.page-background{z-index:-1;object-fit:cover;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}main{width:min(1280px,100%,181.818svh - 72.7273px);min-width:0}#game{aspect-ratio:20/11;background:#173b40;outline:2px solid #56716b;width:100%;position:relative;overflow:hidden;box-shadow:0 16px 64px #071e2499}#game canvas{image-rendering:pixelated;display:block}.menu-start{-webkit-tap-highlight-color:transparent}.menu-start:focus-visible{outline-offset:5px;outline:4px solid #ffebd1!important}.menu-start:disabled{cursor:wait!important}[hidden]{display:none!important}.mobile-ui,.mobile-fullscreen,.rotate-notice{display:none}.touch-device{overscroll-behavior:none;height:100dvh;min-height:100svh;padding:0;overflow:hidden}.touch-device main{width:min(100%,181.818dvh)}.touch-device #game{box-shadow:none;touch-action:none;outline:none}.touch-device .mobile-ui{z-index:30;pointer-events:none;display:block;position:fixed;inset:0}.touch-device .mobile-fullscreen{top:max(5px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));z-index:35;color:#594038;touch-action:manipulation;background:#fff0d4db;border:1px solid #b99566;border-radius:8px;width:44px;height:44px;font-size:25px;display:block;position:fixed}.touch-pad{bottom:max(8px, env(safe-area-inset-bottom));left:max(8px, env(safe-area-inset-left));pointer-events:auto;opacity:.72;grid-template:repeat(3,44px)/repeat(3,44px);display:grid;position:absolute}.touch-pad button,.touch-action{color:#594038;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#fff0d4d9;border:1px solid #a8815c;border-radius:12px}.touch-pad button{width:44px;height:44px;padding:0;font-size:22px}.touch-pad [data-direction=up]{grid-area:1/2}.touch-pad [data-direction=left]{grid-area:2/1}.touch-pad [data-direction=right]{grid-area:2/3}.touch-pad [data-direction=down]{grid-area:3/2}.touch-pad button.is-held,.touch-action:active{background:#e7bcb0}.touch-pad:has(.is-held){opacity:.95}.touch-pad button:disabled{opacity:.35}.touch-action{pointer-events:auto;right:max(12px, env(safe-area-inset-right));bottom:max(30px, env(safe-area-inset-bottom));width:80px;height:72px;font:24px system-ui,sans-serif;position:absolute}.touch-action span{font-size:12px;display:block}.touch-action:disabled{opacity:.35}.mobile-status{left:155px;right:105px;bottom:max(5px, env(safe-area-inset-bottom));text-align:center;color:#fff0d4;white-space:nowrap;text-overflow:ellipsis;background:#3d3029cc;border-radius:5px;padding:4px 6px;font-size:12px;position:absolute;overflow:hidden}.mobile-dialogue{pointer-events:auto;color:#483b3a;touch-action:pan-y;background:#fff0d4;border:2px solid #76533e;border-radius:10px;width:min(540px,100vw - 80px);max-height:calc(100dvh - 28px);padding:14px 16px;font-size:16px;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 5px 30px #20150c66}.mobile-dialogue img{float:right;image-rendering:pixelated;background:#e5d6bd;border:1px solid #76533e;border-radius:4px;margin:0 0 7px 12px}.mobile-speaker{color:#8b485d}.mobile-line{margin:8px 0 12px;line-height:1.5}.mobile-dialogue-footer{clear:both;align-items:center;gap:12px;display:flex}.mobile-counter{margin-right:auto}.mobile-dialogue button,.exit-confirm button{color:#594038;min-width:44px;min-height:44px;font:inherit;cursor:pointer;touch-action:manipulation;background:#f5dec1;border:1px solid #76533e;border-radius:7px;padding:8px 15px}.mobile-dialogue .mobile-dialogue-close{padding:4px;font-size:21px}.touch-device.portrait-mode .rotate-notice{display:flex}.rotate-notice{z-index:10000;text-align:center;color:#fff0d4;background:#173b40;flex-direction:column;justify-content:center;align-items:center;padding:30px;position:fixed;inset:0}.rotate-icon{font-size:70px}.rotate-notice h1{font-size:25px}.rotate-notice p{max-width:360px;font-size:17px;line-height:1.6}.exit-confirm{color:#483b3a;background:#fff0d4;border:2px solid #76533e;border-radius:12px;width:min(500px,100vw - 32px);max-height:calc(100dvh - 32px);padding:22px;overflow-y:auto}.exit-confirm::backdrop{background:#102b35b8}.exit-confirm h2{margin:0;font-size:21px;line-height:1.4}.exit-confirm p{font-size:15px;line-height:1.5}.exit-confirm>div{flex-wrap:wrap;gap:10px;display:flex}.exit-confirm .exit-no{background:#dde6d0}.exit-confirm button:focus-visible,.mobile-ui button:focus-visible{outline-offset:2px;outline:3px solid #9e5167}
