:root{color-scheme:dark}html,body{margin:0;padding:0;background:#000;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}#app{position:relative;width:100%;height:100%;touch-action:none}#app canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px 24px;background:#050508d9;border:1px solid rgba(255,100,80,.15);border-radius:12px;max-width:min(520px,calc(100% - 28px));pointer-events:auto;text-align:center;color:#ddd}.hud .title{font-size:22px;margin:0 0 10px;color:#f86;letter-spacing:.04em}.hud button{cursor:pointer;border:1px solid rgba(255,100,80,.25);background:#ff503c1a;color:#eee;border-radius:10px;padding:10px 18px;font-size:16px;transition:background .15s}.hud button:hover{background:#ff503c33}.hud .jumpscareOverlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;transition:opacity .12s linear;pointer-events:none}.hud .jumpscareOverlay.on{opacity:1}.joystickBase{position:absolute;left:18px;bottom:18px;width:92px;height:92px;border-radius:999px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);pointer-events:auto;display:grid;place-items:center}.joystickStick{width:42px;height:42px;border-radius:999px;background:#ffffff1f;border:1px solid rgba(255,255,255,.12);transform:translate(0);pointer-events:auto}.touchHint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);color:#ffffff80;font-size:12px;letter-spacing:.02em;pointer-events:none}.watch-ui{position:fixed;bottom:20px;right:20px;display:none;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;z-index:100}.watch-ui[style*="display: block"]{display:flex!important}.watch-proximity{display:flex;gap:4px;padding:6px 10px;background:#00000080;border:1px solid rgba(255,100,0,.2);border-radius:20px}.watch-dot{width:8px;height:8px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);transition:background .2s,box-shadow .2s}.watch-dot.active{box-shadow:0 0 6px currentColor}.key-indicator{position:fixed;top:16px;left:16px;display:flex;align-items:center;gap:6px;padding:6px 12px;background:#00000080;border:1px solid rgba(255,200,50,.2);border-radius:8px;font-size:14px;color:#ffffff80;pointer-events:none;z-index:100}.key-icon{font-size:18px}.key-text.key-found{color:#da2;text-shadow:0 0 8px rgba(220,170,30,.5)}.game-message{position:fixed;bottom:80px;left:50%;transform:translate(-50%);font-size:16px;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.4);padding:8px 20px;background:#0009;border-radius:8px;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:100;white-space:nowrap}.inventory-bar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:6px 10px;background:#0009;border:1px solid rgba(255,255,255,.1);border-radius:12px;z-index:120;pointer-events:auto}.inv-slot{width:48px;height:48px;border-radius:8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;font-size:24px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;user-select:none;-webkit-user-select:none}.inv-slot.has-item:hover{background:#ffffff14}.inv-slot.active{border-color:#ffc832b3;background:#ffc8321f;transform:scale(1.1);box-shadow:0 0 10px #ffc8324d}.crosshair{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%;background:#ffffff4d;pointer-events:none;z-index:100;transition:background .15s,box-shadow .15s,transform .15s}.crosshair.active{background:#ffdc64e6;box-shadow:0 0 8px #ffc83280;transform:translate(-50%,-50%) scale(1.8)}.interact-prompt{position:fixed;top:calc(50% + 20px);left:50%;transform:translate(-50%);font-size:14px;color:#ffdc64e6;text-shadow:0 0 8px rgba(255,200,50,.4);padding:4px 14px;background:#00000080;border:1px solid rgba(255,200,50,.2);border-radius:6px;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:100;white-space:nowrap}.watch-hint{font-size:13px;color:#b4ffb4cc;text-shadow:0 0 8px rgba(100,255,100,.3);padding:4px 12px;background:#0006;border-radius:8px;transition:opacity .5s ease;max-width:200px;text-align:right;letter-spacing:.02em}.keypad-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 24px;background:#0f0f14eb;border:2px solid rgba(100,200,255,.3);border-radius:12px;z-index:200;box-shadow:0 0 30px #0064c833}.keypad-title{font-size:16px;color:#b4dcffe6;text-transform:uppercase;letter-spacing:.15em}.keypad-display{font-family:monospace;font-size:32px;color:#4fdb4f;text-shadow:0 0 10px rgba(80,220,80,.5);background:#0009;padding:8px 24px;border-radius:6px;border:1px solid rgba(80,220,80,.2);letter-spacing:.3em;min-width:140px;text-align:center}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad-btn{width:52px;height:48px;font-size:20px;font-weight:700;color:#ddd;background:#32323ce6;border:1px solid rgba(120,120,140,.4);border-radius:8px;cursor:pointer;transition:background .15s}.keypad-btn:active{background:#5078b499}.keypad-clear{color:#f88}.keypad-ok{color:#8f8}.keypad-cancel{margin-top:6px;font-size:13px;color:#c8c8c8b3;background:none;border:none;cursor:pointer;text-decoration:underline}