*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --hl2-gold:#D4A84B;
  --hl2-gold2:#B8903A;
  --hl2-red:#C03030;
  --hl2-orange:#E07020;
  --hl2-bg:#0a0a0a;
  --hl2-text:#cccccc;
  --menu-bg:rgba(8,8,8,0.92);
  --accent:#D4A84B;
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:Arial,sans-serif;color:var(--hl2-text);user-select:none}

/* ─ CANVAS ─ */
#game-canvas{position:fixed;inset:0;display:block;width:100%!important;height:100%!important}

/* ─ LOADING ─ */
#loading-screen{
  position:fixed;inset:0;z-index:900;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.load-logo{font-size:52px;font-weight:900;font-family:"Arial Black",sans-serif;color:#fff;letter-spacing:3px;line-height:1}
.load-logo .lx{color:var(--hl2-gold)}
.load-logo .lx2{color:var(--hl2-gold);font-size:60px}
.load-sub{font-size:13px;letter-spacing:6px;color:#555;margin-top:4px;margin-bottom:32px}
.load-bar-wrap{width:320px;height:5px;background:#1a1a1a;border:1px solid #333}
.load-bar{height:100%;width:0%;background:var(--hl2-gold);transition:width .25s ease}
.load-msg{font-size:12px;color:#444;margin-top:12px;letter-spacing:1px}

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

/* Crosshair */
#crosshair{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;pointer-events:none;
}
.ch-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:3px;background:rgba(255,255,255,0.8);border-radius:50%;
  box-shadow:0 0 0 6px rgba(255,255,255,0);
  transition:box-shadow .06s;
}
#crosshair.shooting .ch-dot{box-shadow:0 0 0 9px rgba(255,255,255,0.12)}

/* Health/Suit (bottom-left) */
#hud-left{
  position:fixed;bottom:0;left:0;
  padding:14px 22px 18px;
  background:linear-gradient(to top right,rgba(0,0,0,0.75) 0%,transparent 100%);
  display:flex;flex-direction:column;gap:4px;
}
.hud-stat{display:flex;align-items:center;gap:10px}
.hud-icon{font-size:18px;width:22px;text-align:center;opacity:0.7}
.hud-icon-hp{color:#e06060}
.hud-icon-suit{color:#60a0e0}
.hud-val{
  font-family:"Arial Black",sans-serif;font-size:36px;font-weight:900;line-height:1;
  color:var(--hl2-gold);text-shadow:0 0 10px rgba(212,168,75,0.35);
}

/* Ammo (bottom-right) */
#hud-right{
  position:fixed;bottom:0;right:0;
  padding:14px 22px 18px;text-align:right;
  background:linear-gradient(to top left,rgba(0,0,0,0.75) 0%,transparent 100%);
}
#hud-weapon-name{font-size:11px;color:#666;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
#hud-ammo-row{display:flex;align-items:baseline;justify-content:flex-end;gap:3px}
#hud-ammo-clip{font-family:"Arial Black",sans-serif;font-size:42px;font-weight:900;color:var(--hl2-gold);line-height:1}
#hud-ammo-sep{font-size:20px;color:#444;margin:0 2px}
#hud-ammo-res{font-size:22px;color:#888;font-weight:bold}

/* Messages */
#hud-msg{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  font-size:15px;color:#ddd;letter-spacing:0.5px;text-align:center;
  text-shadow:1px 1px 3px #000;pointer-events:none;
  display:none;
}
#hud-hint{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.65);border:1px solid rgba(255,255,255,0.1);
  padding:6px 16px;font-size:13px;color:#ccc;border-radius:2px;
  display:none;white-space:nowrap;
}

/* Damage vignette */
#dmg-overlay{
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(180,0,0,0) 100%);
  transition:background .08s;
}
#pickup-flash{
  position:fixed;inset:0;pointer-events:none;
  background:rgba(212,168,75,0);
  transition:background .15s;
}

/* ─ MENU SCREENS ─ */
.menu-screen{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:stretch;justify-content:flex-start;
}
.menu-screen.active{display:flex}

/* MAIN MENU */
#main-menu{background:#0a0a0a}
.mm-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0a0a14 0%,#0d0d0d 50%,#0a0f0a 100%);
}
.mm-left{
  position:relative;z-index:1;
  width:340px;height:100%;
  background:linear-gradient(to right,rgba(0,0,0,0.95) 70%,transparent);
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 40px;
}
.mm-logo{
  font-family:"Arial Black",sans-serif;font-size:38px;font-weight:900;
  color:#fff;line-height:1.1;margin-bottom:48px;letter-spacing:1px;
}
.mm-logo .lx{color:var(--hl2-gold)}
.mm-nav{display:flex;flex-direction:column;gap:2px}
.mm-btn{
  background:transparent;border:none;cursor:pointer;
  font-size:20px;font-weight:bold;color:#888;
  text-align:left;padding:7px 0;letter-spacing:0.5px;
  transition:color .12s,padding-left .12s;
  font-family:Arial,sans-serif;
}
.mm-btn:hover,.mm-btn:focus{color:var(--hl2-gold);padding-left:10px;outline:none}
.mm-footer{position:absolute;bottom:20px;left:40px;font-size:11px;color:#333}

/* PAUSE */
#pause-menu{background:rgba(0,0,0,0.5);align-items:center;justify-content:center}
.pause-bg{position:absolute;inset:0}
.pause-panel{
  position:relative;
  background:rgba(6,6,8,0.96);border:1px solid rgba(212,168,75,0.2);
  padding:32px 56px;min-width:280px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.pause-title{
  font-family:"Arial Black",sans-serif;font-size:18px;color:var(--hl2-gold);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;
}
.pause-btn{
  background:transparent;border:none;cursor:pointer;
  font-size:17px;color:#aaa;padding:5px 0;width:100%;text-align:center;
  transition:color .12s;
}
.pause-btn:hover{color:var(--hl2-gold)}

/* OPTIONS */
#opts-menu{background:rgba(0,0,0,0.7);align-items:center;justify-content:center}
.opts-wrap{
  background:rgba(6,6,8,0.98);border:1px solid rgba(255,255,255,0.1);
  width:520px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,0.8);
}
.opts-title{
  font-family:"Arial Black",sans-serif;font-size:14px;letter-spacing:3px;
  text-transform:uppercase;color:var(--hl2-gold);padding:16px 20px 0;
}
.opts-tabs{
  display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,0.08);
  padding:0 10px;margin-top:6px;
}
.opts-tab{
  background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;
  font-size:12px;color:#666;padding:8px 14px;letter-spacing:1px;text-transform:uppercase;
  transition:color .12s,border-color .12s;
}
.opts-tab.active,.opts-tab:hover{color:var(--hl2-gold);border-bottom-color:var(--hl2-gold)}
.opts-body{flex:1;overflow-y:auto;padding:16px 20px}
.opts-page{display:none}
.opts-page.active{display:block}
.opts-section{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:#555;border-bottom:1px solid rgba(255,255,255,0.05);
  padding-bottom:4px;margin:12px 0 10px;
}
.opts-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.opts-row label{font-size:13px;color:#bbb;flex:0 0 140px}
.opts-row input[type=range]{flex:1;accent-color:var(--hl2-gold)}
.opts-row select{
  flex:1;background:#111;border:1px solid #333;color:#ccc;
  padding:4px 8px;font-size:12px;cursor:pointer;
}
.opts-val{font-size:12px;color:#888;width:40px;text-align:right;flex-shrink:0}
.opts-note{font-size:11px;color:#444;margin-top:8px;font-style:italic}

/* Toggle */
.toggle{position:relative;display:inline-block;width:36px;height:18px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0}
.toggle-sl{
  position:absolute;inset:0;background:#222;border:1px solid #444;transition:.2s;
}
.toggle-sl::before{
  content:"";position:absolute;height:12px;width:12px;left:2px;bottom:2px;
  background:#555;transition:.2s;
}
.toggle input:checked+.toggle-sl{background:#1a3a1a;border-color:#4a7a4a}
.toggle input:checked+.toggle-sl::before{transform:translateX(18px);background:var(--hl2-gold)}

/* Key bindings */
.key-bind-list{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}
.kb-row{display:flex;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.kb-action{font-size:12px;color:#aaa;flex:1}
.kb-key{
  background:#111;border:1px solid #333;color:var(--hl2-gold);
  font-size:11px;font-family:monospace;padding:3px 10px;cursor:pointer;min-width:70px;text-align:center;
  transition:border-color .12s;
}
.kb-key:hover{border-color:var(--hl2-gold)}
.kb-key.listening{border-color:#c03030;color:#c03030;animation:blink .6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

.opts-footer{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 20px;border-top:1px solid rgba(255,255,255,0.06);
}
.opts-btn{
  background:#111;border:1px solid #333;color:#ccc;cursor:pointer;
  font-size:12px;padding:6px 20px;transition:background .12s,border-color .12s;
}
.opts-btn:hover{background:#1a1a1a;border-color:#555}

/* SAVE/LOAD */
#savload-menu{background:rgba(0,0,0,0.7);align-items:center;justify-content:center}
.sl-wrap{
  background:rgba(6,6,8,0.98);border:1px solid rgba(255,255,255,0.1);
  width:480px;padding:24px;
}
.sl-title{
  font-family:"Arial Black",sans-serif;font-size:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--hl2-gold);margin-bottom:16px;text-align:center;
}
.sl-slots{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow-y:auto}
.sl-slot{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid rgba(255,255,255,0.07);cursor:pointer;transition:background .12s;
}
.sl-slot:hover{background:rgba(212,168,75,0.07)}
.sl-slot-n{font-size:12px;color:#555;width:40px;flex-shrink:0}
.sl-slot-info{flex:1}
.sl-slot-name{font-size:13px;color:#ccc}
.sl-slot-date{font-size:11px;color:#555;margin-top:2px}
.sl-slot-empty{font-size:12px;color:#444;font-style:italic}
.sl-slot-del{background:none;border:none;cursor:pointer;color:#444;font-size:13px;padding:2px 6px}
.sl-slot-del:hover{color:#c03030}
.sl-back{
  margin-top:14px;width:100%;background:none;border:1px solid #333;
  color:#888;font-size:13px;padding:8px;cursor:pointer;transition:color .12s;
}
.sl-back:hover{color:#fff}

/* ZONE PANEL */
#zone-panel{
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  z-index:80;background:rgba(0,0,0,0.88);border-left:1px solid rgba(255,255,255,0.08);
  padding:16px 12px;display:flex;flex-direction:column;gap:5px;min-width:170px;
}
.zp-title{font-size:10px;letter-spacing:2px;color:#555;text-transform:uppercase;text-align:center;margin-bottom:6px}
.zp-btn{
  background:none;border:1px solid rgba(255,255,255,0.07);cursor:pointer;
  font-size:12px;color:#bbb;padding:7px 12px;text-align:left;transition:all .12s;
}
.zp-btn:hover{background:rgba(212,168,75,0.1);color:var(--hl2-gold);border-color:var(--hl2-gold2)}

/* FPS counter */
#fps-counter{
  position:fixed;top:8px;right:12px;font-size:12px;color:#555;
  font-family:monospace;pointer-events:none;z-index:20;
}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#111}
::-webkit-scrollbar-thumb{background:#333}