@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');

:root { --primary: #e67e22; }
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
body, html { width: 100vw; height: 100vh; overflow: hidden; background-color: #000; font-family: 'Roboto', sans-serif; color: white; touch-action: none; }
.hidden { display: none !important; }

#login-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle, #2c3e50, #000); z-index: 100; }
.login-box { background: rgba(0,0,0,0.85); padding: 30px; border-radius: 12px; border: 3px solid var(--primary); text-align: center; width: 90%; max-width: 350px; backdrop-filter: blur(5px); }
.login-box h1 { color: var(--primary); font-size: 28px; margin-bottom: 10px; font-weight: 900; }
.login-box p { font-size: 12px; color: #aaa; margin-bottom: 20px;}
.login-box input { width: 100%; padding: 15px; font-size: 18px; font-weight: bold; border: 2px solid #555; border-radius: 8px; margin-bottom: 15px; text-align: center; background: #1a1a24; color: white; outline: none; }
.login-box input:focus { border-color: var(--primary); }
.btn { background: var(--primary); color: #fff; padding: 15px; border-radius: 8px; font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.1s; text-transform: uppercase; }
.btn:active { transform: scale(0.95); }

#game-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;}

#desktop-prompt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 50; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; pointer-events: auto;}
#desktop-prompt h2 { color: var(--primary); font-size: 40px; margin-bottom: 10px; }

#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; z-index: 10; pointer-events: none; }
.ch-dot { position: absolute; top: 13px; left: 13px; width: 4px; height: 4px; background: #e74c3c; border-radius: 50%; box-shadow: 0 0 4px #000;}
.ch-line { position: absolute; background: rgba(255,255,255,0.9); box-shadow: 0 0 2px #000; }
.ch-line.top { top: 0; left: 14px; width: 2px; height: 10px; }
.ch-line.bottom { bottom: 0; left: 14px; width: 2px; height: 10px; }
.ch-line.left { top: 14px; left: 0; width: 10px; height: 2px; }
.ch-line.right { top: 14px; right: 0; width: 10px; height: 2px; }

#hud-top { position: absolute; top: 15px; left: 15px; z-index: 10; display: flex; flex-direction: column; gap: 5px; pointer-events: none;}
.hp-bar-bg { width: 200px; height: 20px; background: rgba(0,0,0,0.7); border: 2px solid #fff; border-radius: 4px; overflow: hidden; }
#hp-bar-fill { width: 100%; height: 100%; background: #2ecc71; transition: width 0.2s; }
.hud-stats { font-size: 14px; background: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 4px; width: fit-content; text-shadow: 1px 1px 0 #000;}
#admin-badge { color: #fff; font-weight: 900; font-size: 12px; border: 2px solid #ff4757; padding: 4px 8px; border-radius: 4px; background: #ff4757; width: fit-content;}
#admin-panel { position: absolute; top: 15px; right: 15px; z-index: 20; display: flex; flex-direction: column; gap: 8px; pointer-events: auto;}
.admin-btn { background: rgba(255, 71, 87, 0.8); padding: 10px; border-radius: 5px; font-size: 12px; font-weight: bold; border: 2px solid #ff4757; text-align: center; cursor: pointer; }
.admin-btn.active-toggle { background: #2ecc71; border-color: #27ae60; }
#weapon-hud { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; }
#ammo-display { font-size: 32px; font-weight: 900; text-shadow: 2px 2px 0 #000; color: #f1c40f;}

#loot-ui { position: absolute; top: 20%; right: 20px; background: rgba(0,0,0,0.8); border: 2px solid var(--primary); border-radius: 8px; padding: 10px; z-index: 30; width: 200px; max-height: 40%; overflow-y: auto; pointer-events: auto;}
#loot-ui h3 { color: var(--primary); font-size: 14px; text-transform: uppercase; margin-bottom: 10px; text-align: center; border-bottom: 1px solid #555; padding-bottom: 5px;}
.loot-item-btn { background: #2c3e50; padding: 10px; margin-bottom: 5px; border-radius: 5px; font-size: 12px; font-weight: bold; text-align: center; cursor: pointer; border: 1px solid #34495e;}
.loot-item-btn:active { background: var(--primary); }

#mobile-controls { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; pointer-events: none;}
#left-controls { position: absolute; bottom: 30px; left: 30px; display: flex; flex-direction: column; gap: 20px; pointer-events: auto;}
#left-actions { display: flex; align-items: center; gap: 15px; }
.action-col { display: flex; flex-direction: column; gap: 10px; }
.action-btn { background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); color: white; touch-action: none;}
.action-btn:active { background: rgba(255,255,255,0.4); transform: scale(0.9); }
.fire-btn { background: rgba(231, 76, 60, 0.7); width: 80px; height: 80px; font-size: 28px; border-color: #ff7979; }
.small-btn { width: 55px; height: 55px; font-size: 20px; }

#dpad-zone { display: flex; flex-direction: column; align-items: center; }
.dpad-row { display: flex; justify-content: center; }
.dpad-btn { width: 55px; height: 55px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; margin: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: background 0.1s; }
.dpad-btn.active { background: rgba(255,255,255,0.6); transform: scale(0.95); }
.dpad-center { width: 55px; height: 55px; margin: 4px; }

#look-zone { position: absolute; top: 0; right: 0; width: 50%; height: 100%; touch-action: none; pointer-events: auto; }
#damage-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,0,0,0.5); z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.1s; }

@media (pointer: fine) { #mobile-controls { display: none; } }