:root{--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);--color-sky-top: #ffe9cc;--color-sky-bottom: #ffd5a8;--color-text: #302824;--color-hud-bg: rgba(48, 40, 36, .6);--color-hud-fg: #fff8ee;color-scheme:light;font-family:system-ui,-apple-system,Hiragino Maru Gothic ProN,Yu Gothic UI,Meiryo,sans-serif}*{box-sizing:border-box}html{margin:0;padding:0;width:100%;height:100%}body{margin:0;padding:0;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;height:100dvh;height:-webkit-fill-available;overflow:hidden;overscroll-behavior:none;background:linear-gradient(180deg,var(--color-sky-top) 0%,var(--color-sky-bottom) 100%);color:var(--color-text);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%;position:relative}.app-shell{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.app-shell canvas{display:block;width:100%!important;height:100%!important}.hud{position:absolute;pointer-events:none;z-index:10}.hud>*{pointer-events:auto}.hud-top{top:0;left:0;right:0;padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) 12px calc(12px + var(--safe-left))}.hud-bottom{bottom:0;left:0;right:0;padding:12px calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left))}.title{margin:0;font-size:18px;font-weight:600;color:var(--color-hud-fg);background-color:var(--color-hud-bg);padding:6px 12px;border-radius:10px;display:inline-block}.world-hud{position:absolute;top:calc(8px + var(--safe-top));right:calc(8px + var(--safe-right));z-index:11;pointer-events:none;display:flex;gap:6px;align-items:center}.hud-chip{background-color:var(--color-hud-bg);color:var(--color-hud-fg);padding:5px 11px;border-radius:999px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:5px;line-height:1}.hud-chip-icon{font-size:15px;line-height:1}.title-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:linear-gradient(180deg,var(--color-sky-top) 0%,var(--color-sky-bottom) 100%);display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left))}.title-screen-card{background:#fff8eeeb;color:var(--color-text);padding:32px 36px;border-radius:20px;border:2px solid rgba(48,40,36,.15);box-shadow:0 8px 24px #30282440;text-align:center;max-width:420px;width:100%}.title-screen-title{margin:0 0 8px;font-size:32px;font-weight:700;letter-spacing:.04em}.title-screen-subtitle{margin:0 0 24px;font-size:13px;opacity:.7;letter-spacing:.08em}.title-screen-buttons{display:flex;flex-direction:column;gap:12px}.title-screen-btn{padding:14px 22px;background:#302824b3;color:var(--color-hud-fg);border:2px solid transparent;border-radius:12px;font-size:15px;font-weight:600;font-family:inherit;letter-spacing:.04em;cursor:pointer;transition:transform .08s ease-out,background-color .08s ease-out}.title-screen-btn.is-primary{background:#508c46eb}.title-screen-btn:hover:not(:disabled){background:#302824d9}.title-screen-btn.is-primary:hover:not(:disabled){background:#508c46}.title-screen-btn:active:not(:disabled){transform:scale(.97)}.title-screen-btn:disabled{opacity:.4;cursor:not-allowed}.title-screen-btn-tiny{margin-top:14px;padding:8px 14px;font-size:12px;background:#30282459}.gender-grid{display:flex;gap:16px;justify-content:center;margin:8px 0 4px}.gender-card{flex:1;min-width:0;padding:18px 12px;background:#fff8ee99;border:2px solid rgba(48,40,36,.2);border-radius:14px;cursor:pointer;font-family:inherit;color:var(--color-text);display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .08s ease-out,background-color .08s ease-out,border-color .08s ease-out}.gender-card:hover{background:#fff8eed9;border-color:#508c4699}.gender-card:active{transform:scale(.97)}.gender-icon{font-size:42px;line-height:1}.gender-label{font-size:14px;font-weight:600}.interact-button{position:absolute;right:calc(24px + var(--safe-right));bottom:calc(24px + var(--safe-bottom));z-index:20;width:72px;height:72px;border-radius:999px;background:#508c46eb;color:var(--color-hud-fg);border:3px solid rgba(255,248,238,.9);box-shadow:0 4px 14px #30282459;font-family:inherit;font-size:28px;font-weight:700;letter-spacing:.04em;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:transform .08s ease-out,background-color .08s ease-out;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.interact-button:hover{background:#508c46}.interact-button:active{transform:scale(.94);background:#3c6e37}.scene-fade-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:#000;pointer-events:none;will-change:opacity}.orientation-notice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:linear-gradient(180deg,var(--color-sky-top) 0%,var(--color-sky-bottom) 100%);display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left))}.orientation-notice-card{text-align:center;max-width:320px}.orientation-notice-icon{font-size:48px;margin-bottom:16px;letter-spacing:.2em}.orientation-notice-text{font-size:16px;white-space:pre-line;line-height:1.7;color:var(--color-text);margin:0}.joystick-wrapper{position:absolute;left:calc(24px + var(--safe-left));bottom:calc(24px + var(--safe-bottom));z-index:20;touch-action:none}.joystick-base{width:120px;height:120px;border-radius:50%;background:#30282438;border:2px solid rgba(255,248,238,.5);position:relative;touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none}.joystick-knob{position:absolute;width:44px;height:44px;border-radius:50%;background:#fff8eee6;border:2px solid rgba(48,40,36,.45);top:50%;left:50%;margin-top:-22px;margin-left:-22px;transition:transform .05s linear;pointer-events:none;box-shadow:0 2px 6px #30282440}.interaction-hint{position:absolute;top:calc(56px + var(--safe-top));left:50%;transform:translate(-50%);z-index:11;background:var(--color-hud-bg);color:var(--color-hud-fg);padding:6px 14px;border-radius:16px;font-size:13px;letter-spacing:.04em;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px #0003}.hint-bar{position:absolute;bottom:calc(20px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:5;pointer-events:none;display:flex;gap:8px}.hint{background:var(--color-hud-bg);color:var(--color-hud-fg);padding:6px 12px;border-radius:8px;font-size:12px;letter-spacing:.02em;opacity:.85}.debug-panel{position:absolute;top:calc(60px + var(--safe-top));left:calc(12px + var(--safe-left));z-index:15;background:#0000008c;color:#fff;font-family:ui-monospace,Cascadia Code,Source Code Pro,monospace;font-size:11px;line-height:1.5;padding:6px 10px;border-radius:6px;pointer-events:none}.placement-hint{position:absolute;bottom:calc(104px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:11;display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--color-hud-bg);color:var(--color-hud-fg);border-radius:8px;font-size:12px;letter-spacing:.02em;pointer-events:none;max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placement-hint-name{font-weight:600}.placement-hint-sep{opacity:.4}.placement-hint-terrain{opacity:.92}.inventory-panel{position:absolute;bottom:calc(56px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:12;display:flex;gap:6px;pointer-events:auto;max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right));overflow-x:auto;scrollbar-width:none}.inventory-panel::-webkit-scrollbar{display:none}.inv-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--color-hud-bg);color:var(--color-hud-fg);border-radius:8px;border:2px solid transparent;cursor:pointer;font-size:12px;min-height:36px;white-space:nowrap;font-family:inherit}.inv-chip.is-selected{border-color:var(--color-hud-fg);background:#302824d9}.inv-chip:hover:not(.is-selected){background:#302824bf}.inv-chip:active{transform:scale(.96)}.inv-chip{transition:transform .08s ease-out,background-color .08s ease-out}.inv-chip-color{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(255,248,238,.4)}.inv-chip-count{opacity:.85;font-variant-numeric:tabular-nums}.inv-chip-icon{width:18px;height:18px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#fff8ee2e;color:var(--color-hud-fg);font-size:11px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid rgba(255,248,238,.4)}.inv-chip-readonly{cursor:default}.inv-chip-readonly:hover{background:var(--color-hud-bg);transform:none}.inv-tabs{position:absolute;bottom:calc(94px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:12;display:flex;gap:4px;pointer-events:auto}.inv-tab{background:var(--color-hud-bg);color:var(--color-hud-fg);border:2px solid transparent;padding:4px 14px;border-radius:8px 8px 0 0;font-size:11px;font-weight:500;font-family:inherit;cursor:pointer;opacity:.55;letter-spacing:.04em}.inv-tab.is-active{opacity:1;background:#302824d9}.inv-tab:hover:not(.is-active){opacity:.8}.placement-controls{position:absolute;right:calc(24px + var(--safe-right));bottom:calc(24px + var(--safe-bottom));z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:auto}.placement-btn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,248,238,.5);background:var(--color-hud-bg);color:var(--color-hud-fg);font-size:22px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:manipulation}.placement-btn.is-confirm{background:#508c46d9}.placement-btn.is-cancel{background:#963c32d9}.placement-btn{transition:transform .08s ease-out,filter .08s ease-out}.placement-btn:active{transform:scale(.94);filter:brightness(.88)}.dialogue-next{transition:transform .08s ease-out,background-color .08s ease-out}.dialogue-next:active{transform:scale(.92);background:#fff8eeb3}.dialogue-overlay{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:0 calc(24px + var(--safe-right)) calc(80px + var(--safe-bottom)) calc(24px + var(--safe-left));pointer-events:none}.dialogue-box{width:100%;max-width:640px;background:var(--color-hud-bg);color:var(--color-hud-fg);padding:14px 18px;border-radius:12px;border:2px solid rgba(255,248,238,.4);box-shadow:0 4px 16px #0000004d;cursor:pointer;font-size:15px;pointer-events:auto;transition:transform .08s ease-out,background-color .08s ease-out}.dialogue-box:active{transform:scale(.985);background:#302824cc}.dialogue-speaker{font-weight:600;font-size:13px;letter-spacing:.04em;margin-bottom:6px;opacity:.9}.dialogue-text{white-space:pre-line;line-height:1.6;margin-bottom:10px}.dialogue-controls{display:flex;align-items:center;justify-content:space-between}.dialogue-progress{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}.dialogue-next{background:#fff8eeeb;color:#302824;border:none;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}.dialogue-next:hover{background:#fff8ee}.dialogue-choices{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.dialogue-choice{width:100%;text-align:left;background:#fff8eee6;border:1px solid rgba(120,90,60,.4);border-radius:8px;padding:8px 12px;font-size:14px;color:#5c3a28;cursor:pointer;font-family:inherit;transition:background .1s ease}.dialogue-choice:hover,.dialogue-choice:active{background:#ffe6c8}.dialogue-choice-num{display:inline-block;min-width:18px;font-weight:700;color:#8c5a2a;margin-right:4px}