* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: 'Segoe UI', sans-serif; }
canvas { display: block; }

/* ===== LOADING SCREEN ===== */
#loading-screen {
  position: fixed; inset: 0; background: #0a0a0a;
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.loader-content { text-align: center; }
.loader-content h1 { font-size: 3rem; color: #fff; letter-spacing: 8px; }
.loader-content h1 span { color: #ff4444; }
.progress-bar { width: 300px; height: 4px; background: #222; margin: 20px auto; }
#progress-fill { height: 100%; width: 0%; background: #ff4444; transition: width 0.3s; }

/* ===== HUD ===== */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

/* Crosshair */
#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.ch-line { position: absolute; background: rgba(255,255,255,0.8); }
.ch-top, .ch-bottom { width: 2px; height: 8px; left: -1px; }
.ch-top { top: -14px; } .ch-bottom { top: 6px; }
.ch-left, .ch-right { width: 8px; height: 2px; top: -1px; }
.ch-left { left: -14px; } .ch-right { left: 6px; }
.ch-dot { width: 2px; height: 2px; background: #ff4444; border-radius: 50%; }

/* Stats */
#stats-left { position: absolute; bottom: 30px; left: 30px; }
#stats-right { position: absolute; bottom: 30px; right: 30px; text-align: right; }
.stat-label { font-size: 0.7rem; color: #aaa; letter-spacing: 2px; }
.stat-bar { width: 200px; height: 6px; background: #222; margin: 4px 0; }
.stat-fill { height: 100%; width: 100%; background: #44ff44; transition: width 0.3s; }
#health-value { font-size: 1.5rem; color: #fff; font-weight: bold; }
.ammo-block { font-size: 2rem; color: #fff; font-weight: bold; }
#ammo-mag { color: #ff4444; }
#weapon-name { font-size: 0.8rem; color: #aaa; letter-spacing: 2px; }

/* Hitmarker */
#hitmarker {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; opacity: 0; transition: opacity 0.1s;
}
#hitmarker::before, #hitmarker::after {
  content: ''; position: absolute; width: 8px; height: 2px; background: #fff;
}
#hitmarker::before { top: 2px; left: -2px; transform: rotate(45deg); }
#hitmarker::after { top: 2px; right: -2px; transform: rotate(-45deg); }
#hitmarker.show { opacity: 1; }