/* QUAKE 2 WEB — Main Stylesheet */
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:'Courier New',monospace;color:#0f0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
canvas{display:block}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;opacity:0.8}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:#0f0}
#crosshair::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#crosshair::after{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}

/* 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;background:#fff;width:3px;height:20px;left:8px}
#hitmarker::before{transform:rotate(45deg)}
#hitmarker::after{transform:rotate(-45deg)}
#hitmarker.show{opacity:1}

/* Damage indicator */
#damage-overlay{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(transparent 50%,transparent 80%,rgba(120,0,0,0));transition:background 0.15s}

/* Low HP vignette */
#hp-vignette{position:fixed;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 200px rgba(120,0,0,0);opacity:0;transition:opacity 0.3s}
#hp-vignette.active{opacity:1}

/* Bottom bar */
#bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;padding:12px 24px;background:linear-gradient(transparent,rgba(0,0,0,0.85));font-size:13px;letter-spacing:2px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .label{font-size:11px;color:#088;opacity:0.7}
.stat .val{font-size:24px;font-weight:bold;color:#0f0}
.stat .val.low{color:#f00;animation:pulse 0.5s infinite alternate}
.stat .val.mid{color:#fa0}
@keyframes pulse{from{opacity:1}to{opacity:0.5}}

/* Weapon slots */
#weapon-slots{position:absolute;bottom:60px;right:24px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.weapon-slot{display:flex;align-items:center;gap:8px;padding:4px 12px;background:rgba(0,0,0,0.6);border:1px solid #222;font-size:12px;color:#555;letter-spacing:1px}
.weapon-slot.active{color:#0f0;border-color:#0f0;background:rgba(0,40,0,0.6)}
.weapon-slot .key{font-size:10px;color:#888;background:#111;padding:1px 5px;border-radius:2px}
.weapon-slot.active .key{color:#0f0;background:#020}

/* Center messages */
#msg{position:absolute;top:25%;left:50%;transform:translateX(-50%);font-size:32px;text-shadow:2px 2px 0 #400;display:none;text-align:center;letter-spacing:4px;z-index:15}
#msg.kill{color:#fa0;text-shadow:0 0 20px #fa0}
#msg.objective{color:#0f0;text-shadow:0 0 15px #0f0}
#msg.death{color:#f00;text-shadow:0 0 30px #f00;font-size:48px}
#msg.subtitle{font-size:18px;opacity:0.8}

/* Kill feed */
#killfeed{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;align-items:center;z-index:12}
.killfeed-item{background:rgba(0,0,0,0.7);padding:4px 16px;font-size:13px;color:#fa0;border-left:2px solid #f00;animation:slideIn 0.3s,fadeOut 0.5s 2.5s forwards}
@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0}}

/* Damage numbers */
.dmg-num{position:absolute;color:#ff0;font-size:18px;font-weight:bold;text-shadow:1px 1px 0 #400;pointer-events:none;z-index:8;animation:dmgFloat 0.8s forwards}
.dmg-num.crit{color:#f0f;font-size:24px}
@keyframes dmgFloat{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}

/* Loading screen */
#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;letter-spacing:4px}

/* Start screen */
#start-screen{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;cursor:pointer}
#start-screen h1{color:#d22;font-size:56px;letter-spacing:8px;text-shadow:0 0 30px #d22,0 0 60px #800;margin-bottom:4px}
#start-screen h2{color:#0f0;font-size:22px;letter-spacing:6px;margin-bottom:30px;opacity:0.8}
#start-screen .controls{margin-top:24px;color:#0f0;font-size:13px;line-height:2;text-align:center;opacity:0.7}
#start-screen .start-btn{margin-top:30px;padding:14px 60px;border:2px solid #0f0;color:#0f0;font-size:22px;letter-spacing:6px;background:transparent;font-family:'Courier New',monospace;cursor:pointer;transition:all 0.2s}
#start-screen .start-btn:hover{background:#0f0;color:#000;box-shadow:0 0 30px #0f0}

/* Pause screen */
#pause-screen{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:18}
#pause-screen.show{display:flex}
#pause-screen h2{color:#0f0;font-size:36px;letter-spacing:6px;margin-bottom:20px}
#pause-screen .btn{padding:10px 40px;margin:8px;border:1px solid #0f0;color:#0f0;background:transparent;font-family:'Courier New',monospace;font-size:16px;cursor:pointer;letter-spacing:3px}
#pause-screen .btn:hover{background:#0f0;color:#000}

/* Minimap */
#minimap{position:absolute;top:12px;right:12px;width:180px;height:180px;border:1px solid #0f0;background:rgba(0,20,0,0.5);border-radius:2px;box-shadow:0 0 10px rgba(0,255,0,0.2)}

/* Stamina bar */
#stamina-bar{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);width:200px;height:4px;background:rgba(0,0,0,0.5);border:1px solid #222}
#stamina-fill{height:100%;background:#0fa;transition:width 0.1s}

/* Objective tracker */
#objective{position:absolute;top:12px;left:12px;padding:8px 16px;background:rgba(0,0,0,0.6);border-left:3px solid #0f0;font-size:13px;color:#0f0;letter-spacing:1px;max-width:280px}
#objective .obj-title{font-size:11px;color:#088;margin-bottom:2px}
#objective .obj-text{font-size:14px}

/* Pickup notification */
#pickup-notif{position:absolute;top:40%;left:50%;transform:translateX(-50%);font-size:16px;color:#0f0;text-shadow:0 0 10px #0f0;opacity:0;transition:opacity 0.3s;z-index:11}
#pickup-notif.show{opacity:1;animation:pickupSlide 1.5s forwards}
@keyframes pickupSlide{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}

/* ====== DESKTOP / MOBILE VISIBILITY ====== */
.desktop-only{display:inline}
.mobile-only{display:none}
body.mobile .desktop-only{display:none}
body.mobile .mobile-only{display:inline}

/* Hide desktop weapon slots on mobile (we have our own) */
body.mobile #weapon-slots{display:none}
body.mobile #stamina-bar{bottom:140px}

/* ====== MOBILE CONTROLS ====== */
#mobile-controls{display:none}
body.mobile #mobile-controls{display:block}

#mobile-move{
  position:fixed;bottom:100px;left:30px;width:120px;height:120px;
  background:rgba(0,30,0,0.25);border:2px solid rgba(0,255,0,0.3);border-radius:60px;
  z-index:20;touch-action:none;
}
#mobile-move-knob{
  position:absolute;top:50%;left:50%;width:50px;height:50px;
  transform:translate(-50%,-50%);background:rgba(0,255,0,0.35);border-radius:25px;
  border:2px solid rgba(0,255,0,0.5);transition:transform 0.05s;
}
#mobile-look{
  position:fixed;top:0;right:0;width:55%;height:60%;
  z-index:15;touch-action:none;
}
#mobile-fire{
  position:fixed;bottom:120px;right:30px;width:80px;height:80px;
  background:rgba(255,0,0,0.3);border:2px solid rgba(255,0,0,0.5);border-radius:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:bold;color:rgba(255,100,100,0.8);letter-spacing:2px;
  z-index:20;touch-action:none;
}
#mobile-reload{
  position:fixed;bottom:210px;right:30px;width:50px;height:50px;
  background:rgba(0,100,255,0.25);border:2px solid rgba(0,100,255,0.4);border-radius:25px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:bold;color:rgba(100,150,255,0.8);
  z-index:20;touch-action:none;
}
#mobile-pause{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);width:40px;height:40px;
  background:rgba(0,0,0,0.5);border:1px solid rgba(0,255,0,0.4);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:rgba(0,255,0,0.6);
  z-index:20;touch-action:none;
}
#fullscreen-btn{
  position:fixed;top:12px;right:12px;width:40px;height:40px;
  background:rgba(0,0,0,0.5);border:1px solid rgba(0,255,0,0.4);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:rgba(0,255,0,0.6);cursor:pointer;
  z-index:25;touch-action:none;
}
#fullscreen-btn:active{background:rgba(0,60,0,0.6)}
body.mobile #fullscreen-btn{top:60px}
#mobile-weapons{
  position:fixed;bottom:30px;right:30px;display:flex;gap:6px;z-index:20;
}
.mobile-weapon{
  width:38px;height:38px;
  background:rgba(0,0,0,0.5);border:1px solid rgba(0,255,0,0.3);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:rgba(0,255,0,0.6);
  touch-action:none;
}
.mobile-weapon:active{background:rgba(0,60,0,0.6);color:#0f0}

/* Mobile minimap smaller */
body.mobile #minimap{width:120px;height:120px}
body.mobile #minimap{top:60px}

/* Mobile bottom bar adjustments */
body.mobile #bottom-bar{padding:8px 12px;font-size:10px;gap:4px}
body.mobile .stat .val{font-size:18px}
body.mobile .stat .label{font-size:9px}
body.mobile #objective{font-size:11px;max-width:200px;padding:6px 10px}
body.mobile #objective .obj-text{font-size:12px}

/* Mobile start screen */
body.mobile #start-screen h1{font-size:36px}
body.mobile #start-screen h2{font-size:16px}
body.mobile #start-screen .controls{font-size:11px}