:root{--bg: #1a2e1f;--panel: rgba(18, 28, 22, .92);--panel-border: rgba(210, 230, 200, .25);--text: #f2f7ef;--muted: #b7c9b4;--accent: #7ec8a3;--accent-strong: #4faf7f;--danger: #e07a6a;--shadow: 0 8px 28px rgba(0, 0, 0, .35);--font: "Segoe UI", "Trebuchet MS", sans-serif;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);touch-action:none;user-select:none}#app{position:relative;width:100%;height:100%}#game-canvas{display:block;width:100%;height:100%}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root .panel,#ui-root .ui-btn,#mobile-controls,#orientation-hint{pointer-events:auto}#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;padding-left:calc(14px + var(--safe-left));padding-right:calc(14px + var(--safe-right))}#hud-left{display:flex;flex-direction:column;gap:4px}#area-label{font-size:15px;font-weight:650;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.55)}#save-status{font-size:12px;color:var(--muted);min-height:1em}#hud-right{display:flex;gap:8px;pointer-events:auto}.ui-btn{appearance:none;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}.ui-btn:active{transform:translateY(1px)}.ui-btn.secondary{background:transparent;box-shadow:none}.ui-btn.primary{background:var(--accent-strong);border-color:transparent;color:#102016}.panel{position:absolute;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translate(-50%);width:min(420px,calc(100% - 24px));background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}.panel.hidden,.hidden{display:none!important}#action-title,#dialogue-speaker{margin:0 0 8px;font-weight:700}#dialogue-text{margin:0 0 14px;line-height:1.45;color:var(--muted)}#action-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}#inventory-title{margin:0 0 10px;font-weight:700}#inventory-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow-y:auto}#inventory-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#ffffff0f;border:1px solid rgba(210,230,200,.12)}#inventory-list .item-swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0}#inventory-list .item-name{font-size:14px;font-weight:600}#inventory-empty.muted,.muted{color:var(--muted);margin:0 0 12px;font-size:13px}#toast{position:absolute;top:64px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:8px 14px;font-size:13px;box-shadow:var(--shadow);pointer-events:none}#travel-fade{position:absolute;inset:0;background:#1a1510;opacity:0;pointer-events:none;z-index:15;transition:opacity .16s ease}#travel-fade.active{opacity:1}#orientation-hint{position:absolute;inset:0;display:grid;place-items:center;background:#080e0aeb;z-index:20;text-align:center;padding:24px;font-size:18px}#mobile-controls{position:absolute;left:calc(18px + var(--safe-left));bottom:calc(18px + var(--safe-bottom));z-index:5}#joystick-zone{width:140px;height:140px;display:grid;place-items:center;touch-action:none}#joystick-base{position:relative;width:120px;height:120px;border-radius:50%;background:#14201873;border:2px solid rgba(255,255,255,.22)}#joystick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin-left:-26px;margin-top:-26px;border-radius:50%;background:#7ec8a3d9;border:2px solid rgba(255,255,255,.35);touch-action:none}#hud-right .ui-btn{min-height:40px;min-width:52px;padding:10px 12px}@media(pointer:fine){#mobile-controls{display:none!important}}@media(pointer:coarse){#mobile-controls:not(.hidden){display:block}}@media(orientation:portrait)and (pointer:coarse){#orientation-hint:not(.hidden){display:grid}}