html, body { height:100%; margin:0; background:#0f0f0f; }
canvas { display:block; width:100vw; height:100vh; background:#1a1a1a; cursor: crosshair; }
[hidden] { display:none !important; }
#hud { position: fixed; left:50%; transform:translateX(-50%); bottom:10px; color:#cfcfcf; font:12px system-ui;
    background:rgba(0,0,0,.5); padding:6px 10px; border-radius:8px; user-select:none; pointer-events:none; }
#status { position:fixed; left:10px; top:10px; color:#9ecbff; font:12px system-ui; background:rgba(0,0,0,.45); padding:6px 8px; border-radius:6px; }
#warn { position:fixed; right:10px; top:10px; color:#ffcc66; font:12px system-ui; background:rgba(0,0,0,.55); padding:6px 8px; border-radius:6px; display:none; }
#hp { position:fixed; left:10px; top:40px; color:#fca5a5; font:12px system-ui; background:rgba(0,0,0,.45); padding:6px 8px; border-radius:6px; }
 /* Индикатор выносливости спринта */
#staminaWrap { position: fixed; left:50%; transform:translateX(-50%); top:10px; width:280px; height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
#staminaBar { height:100%; width:100%; background:#6ee7b7; transition: width .1s linear; }
 /* Всплывающие события (тосты) */
#toasts { position:fixed; right:10px; top:10px; display:flex; flex-direction:column; gap:8px; z-index:1000; pointer-events:none; }
.toast { min-width:220px; max-width:320px; background:rgba(0,0,0,.7); color:#e6e6e6; font:12px system-ui; padding:8px 10px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.35); transform:translateY(-8px); opacity:0; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.join { outline:1px solid rgba(110,231,183,.35); }
.toast.leave { outline:1px solid rgba(252,165,165,.35); }
.toast.kill { outline:1px solid rgba(255,255,255,.35); }
 /* Панель онлайн-юзеров */
#users { position:fixed; right:10px; top:64px; width:220px; max-height:50vh; overflow:auto; background:rgba(0,0,0,.5); color:#dcdcdc; font:12px system-ui; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.35); }
#users header { padding:8px 10px; font-weight:600; color:#9ecbff; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); }
#users ul { list-style:none; margin:0; padding:6px 0; }
#users li { padding:6px 10px; display:flex; align-items:center; gap:8px; }
#users .dot { width:8px; height:8px; border-radius:999px; background:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.2); }
#users .me { color:#6ee7b7; }

#gameOver { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.7); color:#fff; font:24px system-ui; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#gameOver button { margin-top:20px; padding:8px 16px; font-size:16px; cursor:pointer; }