:root{ --blood:#c1272d; --amber:#ffb43a; --rust:#8a5a2b; --shake:0px; }
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0705;font-family:'Share Tech Mono',monospace;color:#fff;}
#scene-container{position:fixed;inset:0;transform:translate(var(--shake),0);}
canvas{display:block;}
.hidden{display:none!important;}

/* ---- Start Screen ---- */
#start-screen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#2a0f08 0%,#0a0503 70%);text-align:center;}
.title{font-family:'Black Ops One',cursive;font-size:clamp(48px,11vw,120px);color:var(--blood);
  text-shadow:0 0 30px rgba(193,39,45,.6),4px 4px 0 #000;letter-spacing:4px;line-height:.9;}
.title span{display:block;color:var(--amber);text-shadow:0 0 30px rgba(255,180,58,.6),4px 4px 0 #000;}
.subtitle{margin-top:14px;color:#9a7a55;letter-spacing:6px;font-size:clamp(11px,2vw,16px);}
#loadbar-wrap{margin-top:34px;width:min(320px,70vw);height:10px;border:2px solid var(--rust);background:#1a0f08;}
#loadbar{height:100%;width:0;background:linear-gradient(90deg,var(--blood),var(--amber));transition:width .2s;}
#loadtext{margin-top:10px;color:var(--amber);letter-spacing:3px;font-size:13px;}
#start-btn{margin-top:26px;padding:16px 40px;font-family:'Black Ops One',cursive;font-size:20px;letter-spacing:2px;
  background:var(--blood);color:#fff;border:3px solid var(--amber);cursor:pointer;text-shadow:2px 2px 0 #000;
  box-shadow:0 0 24px rgba(193,39,45,.5);transition:.15s;animation:pulse 1.4s infinite;}
#start-btn:hover{background:var(--amber);color:#1a0f08;transform:scale(1.05);}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(255,180,58,.8);}}
.controls-legend{margin-top:40px;display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center;max-width:600px;
  color:#8a7055;font-size:13px;letter-spacing:1px;}
.controls-legend b{color:var(--amber);}
.remix{position:fixed;bottom:14px;color:#6a5545;font-size:12px;text-decoration:none;letter-spacing:1px;}
.remix:hover{color:var(--amber);}

/* ---- HUD ---- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:'Share Tech Mono',monospace;}
#crosshair{position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);transition:.06s;}
#crosshair.fire{transform:translate(-50%,-50%) scale(1.6);}
#crosshair .t{position:absolute;background:rgba(255,180,58,.85);box-shadow:0 0 4px rgba(0,0,0,.8);}
#crosshair .top,#crosshair .bottom{width:2px;height:8px;left:14px;}
#crosshair .top{top:0;} #crosshair .bottom{bottom:0;}
#crosshair .left,#crosshair .right{height:2px;width:8px;top:14px;}
#crosshair .left{left:0;} #crosshair .right{right:0;}
#crosshair .dot{position:absolute;top:14px;left:14px;width:2px;height:2px;background:#fff;}

#hud-health,#hud-armor{position:absolute;bottom:24px;font-size:44px;font-weight:bold;text-shadow:2px 2px 0 #000,0 0 12px currentColor;display:flex;align-items:center;gap:8px;}
#hud-health{left:26px;color:#4ec26a;}
#hud-armor{left:200px;color:#3388ff;}
#hud-health .ic,#hud-armor .ic{font-size:32px;}
#hud-ammo{position:absolute;bottom:24px;right:26px;font-size:44px;font-weight:bold;color:var(--amber);text-shadow:2px 2px 0 #000,0 0 12px rgba(255,180,58,.6);text-align:right;}
#hud-ammo .wname{display:block;font-size:15px;color:#9a7a55;letter-spacing:2px;text-shadow:1px 1px 0 #000;}
#hud-frags{position:absolute;top:18px;right:26px;font-size:22px;color:var(--blood);letter-spacing:2px;text-shadow:2px 2px 0 #000;}
#hud-frags span{color:#fff;font-size:30px;}
#weapon-slots{position:absolute;bottom:88px;right:26px;display:flex;gap:6px;pointer-events:auto;}
#weapon-slots .slot{width:34px;height:34px;border:2px solid #55443a;background:rgba(20,12,8,.7);color:#7a6555;
  display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;}
#weapon-slots .slot.active{border-color:var(--amber);color:var(--amber);box-shadow:0 0 12px rgba(255,180,58,.5);}

#streak-toast{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(.6);
  font-family:'Black Ops One',cursive;font-size:44px;color:var(--amber);text-shadow:0 0 24px var(--blood),3px 3px 0 #000;
  opacity:0;transition:.2s;letter-spacing:2px;}
#streak-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

#damage-vignette{position:absolute;inset:0;opacity:0;transition:opacity .15s;pointer-events:none;
  box-shadow:inset 0 0 180px 60px rgba(193,39,45,.85);}
#hint{position:absolute;top:60%;left:50%;transform:translateX(-50%);color:#c9b090;letter-spacing:2px;font-size:14px;
  background:rgba(10,5,3,.5);padding:6px 16px;border-radius:4px;transition:opacity 1s;}
#hint.fade{opacity:0;}

/* ---- Pause ---- */
#pause-screen{position:fixed;inset:0;z-index:60;background:rgba(10,5,3,.85);display:flex;align-items:center;justify-content:center;}
.pause-box{background:#150c07;border:3px solid var(--rust);padding:34px 44px;text-align:center;min-width:280px;}
.pause-box h2{font-family:'Black Ops One',cursive;color:var(--amber);font-size:34px;margin-bottom:20px;letter-spacing:2px;}
.pause-box label{display:block;color:#9a7a55;margin:14px 0;font-size:14px;letter-spacing:1px;}
.pause-box input[type=range]{width:100%;accent-color:var(--blood);margin-top:6px;}
.pause-box button{display:block;width:100%;margin:12px 0;padding:12px;background:var(--blood);color:#fff;border:2px solid var(--amber);
  font-family:'Black Ops One',cursive;letter-spacing:1px;cursor:pointer;transition:.15s;}
.pause-box button:hover{background:var(--amber);color:#150c07;}

/* ---- Death ---- */
#death-screen{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,#3a0808 0%,#0a0303 80%);}
.death-title{font-family:'Black Ops One',cursive;font-size:clamp(50px,13vw,130px);color:var(--blood);
  text-shadow:0 0 40px rgba(193,39,45,.8),4px 4px 0 #000;animation:pulse 1.4s infinite;}
.death-frags{margin-top:20px;color:var(--amber);font-size:22px;letter-spacing:2px;}
.death-frags span{color:#fff;}
#respawn-btn{margin-top:30px;padding:16px 44px;background:var(--blood);color:#fff;border:3px solid var(--amber);
  font-family:'Black Ops One',cursive;font-size:20px;cursor:pointer;letter-spacing:2px;}
#respawn-btn:hover{background:var(--amber);color:#1a0f08;}

/* ---- Mobile ---- */
#mobile-controls{position:fixed;inset:0;z-index:30;pointer-events:none;}
#joystick{position:absolute;bottom:30px;left:30px;width:120px;height:120px;border-radius:50%;
  background:rgba(40,25,15,.4);border:2px solid rgba(255,180,58,.4);pointer-events:auto;}
#stick{position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px;border-radius:50%;
  background:rgba(255,180,58,.5);border:2px solid var(--amber);}
#fire-btn{position:absolute;bottom:40px;right:30px;width:90px;height:90px;border-radius:50%;
  background:rgba(193,39,45,.5);border:3px solid var(--amber);display:flex;align-items:center;justify-content:center;
  font-family:'Black Ops One',cursive;color:#fff;pointer-events:auto;font-size:16px;}
#jump-btn{position:absolute;bottom:150px;right:40px;width:70px;height:70px;border-radius:50%;
  background:rgba(50,90,180,.5);border:3px solid var(--amber);display:flex;align-items:center;justify-content:center;
  font-family:'Black Ops One',cursive;color:#fff;pointer-events:auto;font-size:13px;}
@media(max-width:700px){ #hud-armor{left:150px;} #hud-health,#hud-armor,#hud-ammo{font-size:32px;} }