/* ============================================================
   INFERNAL PROTOCOL — retro-modern FPS
   Palette: obsidian #07070c · ember #ff7a18 · bone #e8e2d6
            toxin #8aff5a · keycard #46b4ff · blood #ff2b2b
   ============================================================ */
:root{
  --obsidian:#07070c;
  --obsidian2:#0d0d16;
  --ember:#ff7a18;
  --ember-hot:#ffc46b;
  --bone:#e8e2d6;
  --bone-dim:#8d897f;
  --toxin:#8aff5a;
  --keyblue:#46b4ff;
  --blood:#ff2b2b;
  --hud-glow:0 0 6px rgba(255,122,24,.85),0 0 22px rgba(255,80,0,.35);
  --font-display:Impact,Haettenschweiler,'Arial Narrow Bold','Franklin Gothic Medium',sans-serif;
  --font-mono:'Cascadia Mono','SF Mono',Consolas,'Roboto Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--obsidian)}
body{
  position:fixed;inset:0;height:100dvh;
  font-family:var(--font-mono);color:var(--bone);
  touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.hidden{display:none !important}

/* ---------- generic overlay screens ---------- */
.screen{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  background:
    radial-gradient(120% 90% at 50% 110%,rgba(120,20,0,.35),transparent 60%),
    radial-gradient(closest-side at 50% 0%,rgba(20,24,40,.45),transparent 70%),
    rgba(4,4,8,.78);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-align:center;overflow-y:auto;
}
.screen::after{ /* burnt-film grain bars */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.55) 3px 4px);
}
.ttl{
  font-family:var(--font-display);font-size:clamp(46px,11vw,118px);
  line-height:.86;letter-spacing:.04em;color:var(--bone);
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(255,122,24,.55),0 0 60px rgba(255,60,0,.35),0 4px 0 #1a0c04;
}
.ttl em{
  display:block;font-style:normal;color:var(--ember);
  text-shadow:0 0 18px rgba(255,140,40,.9),0 0 70px rgba(255,60,0,.6),0 4px 0 #200;
}
.sub{
  font-size:clamp(11px,2.4vw,15px);letter-spacing:.42em;color:var(--bone-dim);
  text-transform:uppercase;
}
.sub b{color:var(--toxin);font-weight:400}
.h2{
  font-family:var(--font-display);font-size:clamp(38px,9vw,86px);letter-spacing:.05em;
  text-transform:uppercase;line-height:.9;
}
.h2.red{color:var(--blood);text-shadow:0 0 18px rgba(255,40,40,.8),0 0 70px rgba(255,0,0,.45)}
.h2.green{color:var(--toxin);text-shadow:0 0 18px rgba(120,255,80,.8),0 0 70px rgba(60,255,0,.4)}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;z-index:1}
.btn{
  font-family:var(--font-display);font-size:clamp(16px,3.4vw,24px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);background:linear-gradient(180deg,#1b1b28,#101018);
  border:1px solid #3a3a4c;border-bottom-color:#000;padding:14px 26px;cursor:pointer;
  position:relative;transition:transform .08s ease,box-shadow .12s ease,color .12s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn:hover,.btn:focus-visible{color:#fff;box-shadow:var(--hud-glow);border-color:var(--ember);outline:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#5a2406,#321102);border-color:#a64f12;color:var(--ember-hot)}
.btn.ghost{font-size:clamp(13px,2.6vw,17px);padding:10px 18px;opacity:.85}
.diff{min-width:230px}
.diff small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;color:var(--bone-dim);margin-top:4px}

.panel{
  z-index:1;background:rgba(10,10,18,.6);border:1px solid #2c2c3e;padding:14px 18px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;
  max-width:760px;
}
.panel .field{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.panel input[type=range]{width:110px;accent-color:var(--ember);cursor:pointer}
.panel select{
  background:#101018;color:var(--bone);border:1px solid #3a3a4c;font-family:var(--font-mono);
  font-size:12px;padding:5px 8px;letter-spacing:.1em;cursor:pointer;
}
.keys-help{
  z-index:1;font-size:11px;line-height:2;letter-spacing:.16em;color:var(--bone-dim);
  text-transform:uppercase;max-width:720px;
}
.keys-help b{color:var(--bone);background:#1a1a26;border:1px solid #34344a;border-bottom-color:#000;
  padding:1px 7px;margin:0 2px;font-weight:400}
.tagline{z-index:1;font-size:10px;letter-spacing:.3em;color:#5b574e;text-transform:uppercase}

.statlist{z-index:1;display:grid;grid-template-columns:auto auto;gap:8px 28px;font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.statlist dt{color:var(--bone-dim);text-align:right}
.statlist dd{color:var(--ember-hot);text-align:left;text-shadow:var(--hud-glow)}
.statlist dd.green{color:var(--toxin);text-shadow:0 0 8px rgba(120,255,80,.6)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair span{position:absolute;background:rgba(232,226,214,.92);box-shadow:0 0 4px rgba(0,0,0,.9)}
#crosshair span:nth-child(1){left:-1px;top:calc(-7px - var(--sp,0px));width:2px;height:5px}
#crosshair span:nth-child(2){left:-1px;top:calc(2px + var(--sp,0px));width:2px;height:5px}
#crosshair span:nth-child(3){top:-1px;left:calc(-7px - var(--sp,0px));height:2px;width:5px}
#crosshair span:nth-child(4){top:-1px;left:calc(2px + var(--sp,0px));height:2px;width:5px}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;
  transition:opacity .25s ease-out}
#hitmarker::before,#hitmarker::after{content:"";position:absolute;inset:0;border:2px solid var(--c,#fff);
  border-left:none;border-right:none;transform:rotate(45deg);box-shadow:0 0 6px var(--c,#fff)}
#hitmarker::after{transform:rotate(-45deg)}
#hitmarker.pop{opacity:.95;transition:none}

.statbox{position:absolute;bottom:0;display:flex;flex-direction:column;gap:3px;min-width:120px}
.statbox label{font-size:10px;letter-spacing:.34em;color:var(--bone-dim);text-transform:uppercase}
.statbox .big{
  font-family:var(--font-display);font-size:clamp(38px,7vh,56px);line-height:.9;color:var(--bone);
  text-shadow:var(--hud-glow);letter-spacing:.02em;
}
.statbox .bar{width:128px;height:5px;background:#15151f;border:1px solid #00000088;position:relative}
.statbox .bar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#ff4d00,var(--ember-hot));
  box-shadow:0 0 8px rgba(255,110,20,.7);transition:transform .15s ease-out}
.statbox .bar.blue i{background:linear-gradient(90deg,#1f6fd0,var(--keyblue));box-shadow:0 0 8px rgba(70,180,255,.7)}
#statHp{left:max(14px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}
#statHp.low .big{color:var(--blood);text-shadow:0 0 8px rgba(255,40,40,.9),0 0 26px rgba(255,0,0,.5);
  animation:lowhp .9s infinite}
@keyframes lowhp{50%{opacity:.55}}
#statArmor{left:max(14px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 88px)}
#statArmor .big{font-size:clamp(26px,4.6vh,36px);color:#bfe2ff;text-shadow:0 0 8px rgba(70,180,255,.7)}
#statAmmo{right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));align-items:flex-end;text-align:right}
#reserve{display:flex;flex-direction:column;gap:1px;font-size:10px;letter-spacing:.22em;color:var(--bone-dim);text-transform:uppercase}
#reserve b{color:var(--bone);font-weight:400}
#reserve .sel{color:var(--ember-hot)}

#slots{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;gap:6px}
.slot{width:30px;height:30px;border:1px solid #2c2c3e;background:rgba(10,10,18,.55);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#494657;
  font-family:var(--font-display);letter-spacing:.05em}
.slot.owned{color:var(--bone);border-color:#4a4a62}
.slot.active{color:var(--ember-hot);border-color:var(--ember);box-shadow:var(--hud-glow)}

#keys{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:8px}
.keycard{width:18px;height:26px;border:1px solid #000;background:#0e0e16;position:relative;opacity:.18}
.keycard::after{content:"";position:absolute;left:3px;right:3px;top:4px;height:7px;background:currentColor;box-shadow:0 0 8px currentColor}
.keycard.blue{color:var(--keyblue)}
.keycard.have{opacity:1;border-color:currentColor;animation:keypulse 1.6s infinite}
.keycard.flash{opacity:1;animation:keyflash .3s 3}
@keyframes keyflash{50%{opacity:.15;transform:translateX(2px)}}
@keyframes keypulse{50%{box-shadow:0 0 10px currentColor}}

#msgs{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));
  display:flex;flex-direction:column;gap:3px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;max-width:70vw}
#msgs div{color:var(--ember-hot);text-shadow:0 0 6px rgba(255,120,30,.6),0 1px 2px #000;opacity:0;
  animation:msg 3.2s ease-out forwards}
#msgs div.blue{color:var(--keyblue)}#msgs div.green{color:var(--toxin)}#msgs div.red{color:var(--blood)}
@keyframes msg{4%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
#centerMsg{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:clamp(22px,5vw,44px);letter-spacing:.14em;color:var(--toxin);
  text-transform:uppercase;text-shadow:0 0 16px rgba(120,255,80,.8),0 2px 0 #000;opacity:0;pointer-events:none;white-space:nowrap}
#centerMsg.show{animation:cmsg 2.4s ease-out forwards}
@keyframes cmsg{6%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(1.05)}}
#fps{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);
  font-size:10px;letter-spacing:.2em;color:#5b574e}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:25;mix-blend-mode:screen}

/* ---------- touch UI ---------- */
#touchUI{position:fixed;inset:0;z-index:30;pointer-events:none;font-family:var(--font-display)}
#touchUI .tbtn{
  position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1.5px solid rgba(232,226,214,.4);color:rgba(232,226,214,.85);
  background:radial-gradient(circle at 35% 30%,rgba(60,60,80,.45),rgba(8,8,14,.55));
  letter-spacing:.1em;text-shadow:0 1px 2px #000;backdrop-filter:blur(2px);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 0 4px rgba(0,0,0,.18);
}
#touchUI .tbtn.pressed{border-color:var(--ember);color:var(--ember-hot);box-shadow:var(--hud-glow),inset 0 0 14px rgba(0,0,0,.6)}
#btnFire{width:92px;height:92px;right:calc(20px + env(safe-area-inset-right));bottom:calc(86px + env(safe-area-inset-bottom));
  font-size:20px;border-color:rgba(255,122,24,.55);color:var(--ember-hot)}
#btnUse{width:58px;height:58px;right:calc(126px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));font-size:13px}
#btnWpn{width:58px;height:58px;right:calc(28px + env(safe-area-inset-right));bottom:calc(196px + env(safe-area-inset-bottom));font-size:13px}
#btnMap{width:46px;height:46px;right:calc(118px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));font-size:11px}
#btnPause{width:46px;height:46px;right:calc(60px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));font-size:14px}
#stickZone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:auto}
#stickBase{
  position:absolute;width:124px;height:124px;border-radius:50%;
  border:1.5px solid rgba(232,226,214,.3);background:radial-gradient(circle,rgba(20,20,32,.4),rgba(8,8,14,.55));
  left:34px;bottom:calc(40px + env(safe-area-inset-bottom));opacity:.65;
}
#stickNub{position:absolute;width:54px;height:54px;border-radius:50%;left:35px;top:35px;
  background:radial-gradient(circle at 35% 30%,#4a4a62,#15151f);
  border:1.5px solid rgba(232,226,214,.5);box-shadow:0 2px 10px rgba(0,0,0,.7)}

/* ---------- automap ---------- */
#mapCanvas{position:fixed;inset:0;z-index:34;background:rgba(3,3,7,.86);pointer-events:none}

/* ---------- rotate hint ---------- */
#rotateHint{position:fixed;inset:0;z-index:60;background:#050508;display:flex;flex-direction:column;
  gap:14px;align-items:center;justify-content:center;color:var(--bone-dim);letter-spacing:.3em;font-size:12px;text-transform:uppercase}
#rotateHint .ico{font-size:44px;animation:rot 1.6s ease-in-out infinite}
@keyframes rot{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

@media (max-height:430px){ /* landscape phones: tighten HUD */
  .statbox .big{font-size:34px}
  #statArmor{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 70px)}
  #slots{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}