* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: monospace; }
canvas { display: block; width: 100%; height: 100%; }
#gameCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; }
body.mobile #info { display: none; }
body.mobile #hp-bar { bottom: 156px; width: 220px; }
body.mobile .mobile-btn-weapon { right: auto; left: 50%; transform: translateX(-50%); bottom: 92px; }
body.mobile .mobile-btn-inv { right: auto; left: 50%; transform: translateX(-50%); bottom: 24px; }
#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
#hp-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 300px; height: 22px; background: #222; border: 2px solid #555; border-radius: 11px; overflow: hidden; }
#hp-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #e33, #4caf50); transition: width 0.2s; }
#hp-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font: bold 12px monospace; text-shadow: 0 0 4px #000; }
#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.4); font-size: 28px; font-family: monospace; text-shadow: 0 0 6px rgba(0,0,0,0.9); pointer-events: none; user-select: none; }
#info { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.25); font: 11px monospace; white-space: nowrap; pointer-events: none; }
#z-level { position: absolute; top: 10px; right: 10px; color: #ffd700; font: 16px monospace; background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 4px; pointer-events: none; }
#z-level::before { content: 'Floor '; }
#minimap { position: absolute; top: 10px; left: 10px; border: 2px solid rgba(255,255,255,0.25); border-radius: 4px; opacity: 0.6; }
#minimap canvas { display: block; }
#debug { position: absolute; top: 40px; left: 10px; color: #0f0; font: 11px monospace; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 4px; }

#name-prompt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 100; }
#name-prompt-box { background: #1a1a2e; padding: 30px; border-radius: 12px; border: 2px solid #4fc3f7; text-align: center; }
#name-prompt-box h2 { color: #fff; margin-bottom: 20px; font-size: 18px; }
#name-input { background: #0d0d1a; border: 2px solid #4fc3f7; color: #fff; padding: 10px 16px; font: 16px monospace; border-radius: 6px; outline: none; width: 220px; }
#name-input:focus { border-color: #81d4fa; }
#name-submit { display: block; margin: 16px auto 0; background: #4fc3f7; color: #000; border: none; padding: 10px 30px; font: bold 14px monospace; border-radius: 6px; cursor: pointer; }
#name-submit:hover { background: #81d4fa; }

#inventory-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(10,10,20,0.92); border: 2px solid #4fc3f7; border-radius: 10px; padding: 20px; min-width: 300px; display: none; z-index: 50; pointer-events: auto; }
#inventory-panel h3 { color: #fff; text-align: center; margin-bottom: 12px; font-size: 16px; }
#inv-grid { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.inv-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.08); border-radius: 4px; cursor: pointer; color: #fff; font-size: 13px; transition: background 0.15s; }
.inv-item:hover { background: rgba(79,195,247,0.25); }
.inv-icon { font-size: 16px; font-weight: bold; }
.inv-name { text-transform: capitalize; }
.inv-empty { color: rgba(255,255,255,0.3); text-align: center; padding: 12px; font-size: 13px; }
#inv-info { color: rgba(255,255,255,0.4); text-align: center; margin-top: 12px; font-size: 11px; }

#scoreboard { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 16px 24px; min-width: 320px; display: none; z-index: 40; }
#scoreboard h3 { color: #fff; text-align: center; margin-bottom: 10px; font-size: 16px; }
.sb-header { display: flex; justify-content: space-between; padding: 4px 0; color: rgba(255,255,255,0.5); font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sb-row { display: flex; justify-content: space-between; padding: 4px 0; color: #ccc; font-size: 13px; }
.sb-row.sb-me { color: #f1c40f; font-weight: bold; }