html,body{margin:0;padding:0;height:100%;background:#0b0a08;color:#f4e9c8;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app{position:relative;width:100vw;height:100vh}#game-canvas{display:block;width:100%;height:100%;cursor:crosshair}.hud-compass{position:absolute;z-index:3;top:0;left:50%;transform:translate(-50%);width:min(520px,96vw);padding:4px 0 6px;pointer-events:none;-webkit-user-select:none;user-select:none}.hud-compass.hidden{display:none}.hud-compass-strip-wrap{position:relative;height:26px;margin:0 auto;overflow:hidden;border-radius:0 0 8px 8px;background:#00000073;border:1px solid rgba(244,233,200,.2);border-top:none}.hud-compass-track{position:relative;height:100%;width:100%}.hud-compass-track-inner{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:row;align-items:center;will-change:transform}.hud-compass-cell{flex:0 0 52px;width:52px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;color:#f4e9c8e0;opacity:.92}.hud-compass-pointer{position:absolute;left:50%;bottom:0;width:0;height:0;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid rgba(212,168,72,.95);z-index:2;filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.hud-compass-enemies{position:relative;width:100%;height:10px;margin-top:2px}.hud-compass-enemy{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:#c04040;box-shadow:0 0 0 1px #000000a6,0 0 6px #c84040a6;z-index:1}.hud-compass-enemy--near{width:9px;height:9px;background:#e86868}.hud{position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:8px 14px;background:#0000008c;border:1px solid rgba(244,233,200,.25);border-radius:6px;font-size:13px;pointer-events:none;-webkit-user-select:none;user-select:none}.hud.hidden{display:none}.hud p{margin:0}.hud-safe{position:absolute;top:52px;left:50%;transform:translate(-50%);padding:6px 12px;background:#143728a6;border:1px solid rgba(160,220,180,.35);border-radius:6px;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.hud-safe.hidden{display:none}.hud-combat{position:absolute;top:52px;left:16px;min-width:200px;padding:10px 12px;background:#0000008c;border:1px solid rgba(244,233,200,.25);border-radius:6px;font-size:13px;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;gap:6px}.hud-combat.hidden{display:none}.hud-combat-row{display:flex;align-items:center;gap:8px}.hud-label{width:22px;font-size:11px;opacity:.75}.hud-bar{flex:1;height:8px;background:#ffffff1f;border-radius:3px;overflow:hidden}.hud-bar-fill{height:100%;width:100%;border-radius:3px;transition:width .08s linear}.hud-hp{background:linear-gradient(90deg,#8a3030,#c05050)}.hud-st{background:linear-gradient(90deg,#305a8a,#5090c0)}.hud-combat-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;opacity:.92}.weapon-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}.weapon-slot{flex:1;min-width:0;padding:4px 8px;font-size:11px;line-height:1.3;text-align:center;border-radius:4px;border:1px solid rgba(244,233,200,.2);background:#ffffff0f;color:#f4e9c8b8;transition:background .12s ease,border-color .12s ease,color .12s ease}.weapon-slot.weapon-slot--active{border-color:#d4a848d9;background:#d4a84838;color:#f4e9c8;font-weight:600;box-shadow:0 0 0 1px #d4a84859}.weapon-kbd{display:inline-block;margin-right:4px;padding:1px 5px;font-size:10px;font-family:inherit;border-radius:3px;border:1px solid rgba(244,233,200,.35);background:#00000059;color:#f4e9c8e6}.hud-current-weapon{margin:0;font-size:12px;opacity:.95}.join-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:radial-gradient(ellipse at center,#14100ceb,#080706f7);pointer-events:auto}.join-panel.hidden{display:none}.death-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:radial-gradient(ellipse at center,#240e0ef0,#0a0606fa);pointer-events:auto;border:1px solid rgba(200,80,80,.25)}.death-panel.hidden{display:none}.death-title{margin:0 0 4px;font-size:1.65rem;font-weight:600;letter-spacing:.04em;color:#e8a0a0}.death-sub{margin:0 0 8px;font-size:14px;opacity:.88;max-width:320px;text-align:center}.death-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}.death-btn{padding:10px 20px;font-size:15px;font-weight:600;border-radius:6px;cursor:pointer;border:none;font-family:inherit}.death-btn--primary{background:linear-gradient(180deg,#c49a4a,#8a6a2a);color:#1a1208}.death-btn--secondary{background:#0006;color:#f4e9c8;border:1px solid rgba(244,233,200,.28)}.join-title{margin:0 0 4px;font-size:1.75rem;font-weight:600;letter-spacing:.04em}.join-sub{margin:0 0 8px;font-size:14px;opacity:.85}.join-label{align-self:stretch;max-width:320px;font-size:12px;opacity:.8}.join-input{width:min(320px,100%);padding:10px 12px;font-size:15px;border-radius:6px;border:1px solid rgba(244,233,200,.25);background:#00000059;color:#f4e9c8}.join-submit{margin-top:6px;padding:10px 22px;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;background:linear-gradient(180deg,#c49a4a,#8a6a2a);color:#1a1208}.join-submit:disabled{opacity:.55;cursor:wait}.join-error{margin:4px 0 0;max-width:320px;font-size:13px;color:#ffb0a0;text-align:center}.join-error.hidden{display:none}.world-mob-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.mob-hp-bar-outer{position:absolute;width:44px;height:6px;margin-left:-22px;margin-top:-6px;border-radius:2px;background:#0000008c;border:1px solid rgba(244,233,200,.22);overflow:hidden}.mob-hp-bar-fill{height:100%;width:100%;border-radius:1px;background:linear-gradient(90deg,#6a3030,#c85858);transform-origin:left center}.damage-float{position:absolute;margin-left:-20px;margin-top:-10px;font-size:15px;font-weight:700;color:#ffdca8;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.85);-webkit-user-select:none;user-select:none}