:root{--bg: #12162a;--pad: #1d2340;--btn: #3a4270;--btn-on: #6a76c0;--a: #d84a5a;--b: #4a6ad8;--text: #e8eaf6;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}body{font-family:DotGothic16,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}#app{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}#screen{display:block;image-rendering:pixelated;background:#000;border-radius:6px;box-shadow:0 8px 30px #00000080}.keys{margin:10px 0 0;font-size:13px;opacity:.65}#pad{display:none}body.touch #app{justify-content:flex-start;padding-top:env(safe-area-inset-top)}body.touch #screen{border-radius:0;box-shadow:none}body.touch .keys{display:none}body.touch #pad{display:block;position:relative;width:100%;max-width:560px;background:var(--pad);flex:1 0 auto;padding-bottom:env(safe-area-inset-bottom)}#pad button{position:absolute;border:0;color:#fff;font:inherit;font-size:18px;background:var(--btn);box-shadow:0 4px #00000059;touch-action:none;cursor:pointer}#pad button.on{background:var(--btn-on);transform:translateY(2px);box-shadow:0 2px #00000059}.dpad{position:absolute;left:6%;top:50%;width:46vw;max-width:200px;aspect-ratio:1;transform:translateY(-52%)}.dpad .d{width:34%;height:34%;border-radius:10px}.dpad .up{left:33%;top:0}.dpad .down{left:33%;bottom:0}.dpad .left{left:0;top:33%}.dpad .right{right:0;top:33%}.dpad .hub{position:absolute;left:33%;top:33%;width:34%;height:34%;background:var(--btn);border-radius:4px}.ab{position:absolute;right:5%;top:50%;width:40vw;max-width:180px;height:46vw;max-height:190px;transform:translateY(-55%)}.ab button{width:46%;aspect-ratio:1;border-radius:50%;font-size:22px;font-weight:700}.ab .a{right:0;top:0;background:var(--a)}.ab .b{left:0;bottom:6%;background:var(--b)}.ab .a.on{background:#f07080}.ab .b.on{background:#7a90f0}#pad .start{left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translate(-50%);width:92px;height:30px;border-radius:15px;font-size:13px;background:#4a5070}.name-entry{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0c1e99;z-index:10}.name-entry form{background:#fbfbf6;color:#2e2e36;border:4px solid #2c3350;border-radius:12px;padding:18px;width:min(340px,92vw);display:flex;flex-direction:column;gap:12px}.name-entry label{font-size:18px}.name-entry input{font:inherit;font-size:22px;background:#fff;color:#2e2e36;padding:8px 10px;border:2px solid #5a6a9a;border-radius:8px;user-select:text;-webkit-user-select:text}.name-entry .row{display:flex;gap:10px;justify-content:flex-end}.name-entry button{font:inherit;font-size:16px;padding:8px 16px;border-radius:8px;border:0;background:#3a70d0;color:#fff}.name-entry button[data-def]{background:#8a8a96}.err{position:fixed;inset:auto 0 0;max-height:40%;overflow:auto;background:#400;color:#fdd;font:12px monospace;padding:8px;margin:0;white-space:pre-wrap}body.touch #pad:before{content:"Spirit Tamer ― 八紋の旅";position:absolute;top:14px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.1em;opacity:.28}body.touch.land #app{justify-content:center;padding-top:0}body.touch.land #pad{position:fixed;inset:0;max-width:none;background:transparent;pointer-events:none}body.touch.land #pad:before{display:none}body.touch.land #pad button{pointer-events:auto}body.touch.land .dpad{left:18px;width:150px}body.touch.land .ab{right:18px;width:150px;height:160px}body.touch.land #pad .start{left:auto;right:34px;transform:none;bottom:14px}