/* GRAVESIGHT — Zombie Sniper | Created by Jonas Lund 2026 */
:root{
  --blood:#b3121b; --blood-hi:#ff3b2f; --bone:#ebe2cd; --ember:#ff8a3a;
  --ink:#0b0809; --panel:rgba(14,9,10,.78); --line:rgba(235,226,205,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--bone);
  font-family:'Oswald',system-ui,sans-serif;user-select:none;-webkit-user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none!important}
kbd{font-family:'Oswald',sans-serif;font-size:.78em;padding:1px 6px;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:3px;background:rgba(255,255,255,.05);color:var(--bone)}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#060405;
  font-family:'Special Elite',monospace;letter-spacing:.2em;color:#9c8f7a;z-index:50;transition:opacity .6s}
#loading.gone{opacity:0;pointer-events:none}

/* ---------- menu ---------- */
#menu{position:fixed;inset:0;z-index:20;display:flex;align-items:center;overflow-y:auto;padding:24px 0;
  background:linear-gradient(90deg,rgba(6,3,4,.92) 0%,rgba(6,3,4,.7) 38%,rgba(6,3,4,0) 70%)}
.menu-panel{width:min(560px,92vw);margin-top:auto;margin-bottom:auto;margin-left:clamp(16px,6vw,96px);display:flex;flex-direction:column;gap:18px}
.title{font-family:'Pirata One',serif;font-weight:400;font-size:clamp(64px,11vw,132px);line-height:.85;
  color:#efe4cf;text-shadow:0 0 18px rgba(255,60,30,.55),0 0 60px rgba(180,20,10,.45),0 4px 0 #2a0405}
.subtitle{font-family:'Oswald';font-weight:600;color:var(--blood-hi);letter-spacing:.35em;font-size:clamp(13px,1.6vw,17px);margin-top:4px}
.tagline{font-family:'Special Elite',monospace;color:#a89a84;margin-top:10px;font-size:15px}
.btn{font-family:'Oswald';font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:17px;
  color:var(--bone);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:13px 22px;
  cursor:pointer;transition:all .15s;border-radius:2px}
.btn:hover{background:rgba(255,255,255,.1);border-color:rgba(235,226,205,.5)}
.btn.primary{background:linear-gradient(180deg,#9b1018,#5e080d);border-color:#d23a2a;
  box-shadow:0 0 24px rgba(200,30,20,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.btn.primary:hover{background:linear-gradient(180deg,#bf1820,#740a10);box-shadow:0 0 36px rgba(255,50,30,.5)}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
.settings label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#bfb29b}
.settings label.check{flex-direction:row;align-items:center;gap:8px}
.settings select,.settings input[type=range]{width:100%;accent-color:#c21d1d}
.settings select{background:#140c0d;color:var(--bone);border:1px solid var(--line);padding:5px;font-family:'Oswald'}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;color:#b8ab95;padding:12px 16px;background:var(--panel);border:1px solid var(--line)}
.best{font-family:'Special Elite',monospace;color:#c9b998;font-size:14px}
.best span{color:var(--ember)}
.credit{font-family:'Special Elite',monospace;font-size:13px;color:#8e826e;letter-spacing:.06em}
.credit b{color:var(--bone);font-weight:400}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(5,2,3,.72);backdrop-filter:blur(3px)}
.overlay-box{min-width:min(380px,92vw);display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--panel);border:1px solid var(--line);text-align:center}
.overlay h2{font-family:'Pirata One';font-weight:400;font-size:56px;color:#efe4cf;text-shadow:0 0 22px rgba(255,50,30,.5)}
.overlay h2.dead{color:#ff4a3a}
#go-stats{display:grid;grid-template-columns:1fr auto;gap:6px 24px;text-align:left;font-size:15px;margin:6px 0 10px;color:#cdbfa6}
#go-stats b{color:var(--bone);text-align:right}
#go-stats .hl{color:var(--ember)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .12s}
#crosshair i{position:absolute;background:rgba(240,230,210,.85);box-shadow:0 0 2px #000}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:-1px}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:-1px}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;
  background:
    linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) ,
    linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
  -webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
#hitmarker.kill{filter:drop-shadow(0 0 3px #f00) hue-rotate(0deg);background:
    linear-gradient(45deg,transparent 42%,#ff2a1a 42%,#ff2a1a 58%,transparent 58%) ,
    linear-gradient(-45deg,transparent 42%,#ff2a1a 42%,#ff2a1a 58%,transparent 58%)}

#threats{position:absolute;left:50%;top:50%;width:0;height:0}
.threat{position:absolute;left:-14px;top:-14px;width:28px;height:28px;opacity:0}
.threat::after{content:'';position:absolute;inset:0;background:#ff2a1a;
  clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%);filter:drop-shadow(0 0 6px #f00)}
.threat.hurt::after{background:#ffd0a0}

#scope{position:absolute;inset:0;--d:84vmin;--ox:0px;--oy:0px;--sx:0px;--sy:0px;--b:100}
#scope-ring{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;transform:translate(var(--ox),var(--oy));box-shadow:0 0 0 250vmax #000;overflow:hidden}
.reticle{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.illum{fill:#ff2a1a;filter:drop-shadow(0 0 1.5px #ff2a1a)}
.illum-s{stroke:#ff2a1a!important;filter:drop-shadow(0 0 1px #ff2a1a)}
#scope-shade{position:absolute;inset:-3%;border-radius:50%;
  background:radial-gradient(circle at calc(50% + var(--sx)) calc(50% + var(--sy)),rgba(0,0,0,0) 54%,rgba(0,0,0,.5) 64%,rgba(0,0,0,.92) 70%,#000 74%)}
#scope-shade::after{content:'';position:absolute;inset:3%;border-radius:50%;box-shadow:inset 0 0 4vmin 1.4vmin rgba(0,0,0,.9),inset 0 0 0 .45vmin rgba(30,24,18,1)}
#scope-glare{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 30% 22%,rgba(170,200,255,.10),rgba(170,200,255,0) 38%),linear-gradient(135deg,rgba(255,255,255,0) 60%,rgba(110,150,255,.06) 100%)}
#scope-breath{position:absolute;inset:1.5%;width:97%;height:97%;transform:rotate(90deg);overflow:visible}
#breath-arc{fill:none;stroke:rgba(200,225,240,.6);stroke-width:.7;stroke-dasharray:var(--b) 100;transition:stroke .2s}
#scope.lock #breath-arc{stroke:rgba(255,60,40,.85)}
#scope-hud{position:absolute;left:calc(50% + var(--d) / 2 + 3vmin);top:50%;transform:translateY(-50%);text-align:left;
  font-family:'Special Elite',monospace;font-size:14px;color:#d9c9a6;text-shadow:0 0 4px #000;max-width:calc(50% - var(--d) / 2 - 5vmin);line-height:1.5}
#zoom-steps{display:flex;gap:8px;margin-bottom:4px;font-size:11px;color:#6d6455}
#zoom-steps span.on{color:#ffcf8a}
#scope-target{margin-top:4px;color:#ff6a4a;letter-spacing:.12em;font-size:13px;min-height:16px}
#scope-target b{color:#ffd0a0;font-weight:400}

#topbar{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.tb-block{min-width:92px;padding:6px 14px 7px;background:linear-gradient(180deg,rgba(14,9,10,.75),rgba(14,9,10,.45));
  border-top:2px solid rgba(179,18,27,.8);display:flex;flex-direction:column;align-items:center}
.tb-label{font-size:10px;letter-spacing:.25em;color:#a99a83}
.tb-block span:last-child{font-size:24px;font-weight:600;line-height:1.05}
.tb-block.combo span:last-child{color:var(--ember)}

#vitals{position:absolute;left:28px;bottom:28px;width:260px;display:flex;flex-direction:column;gap:8px}
#hp-wrap,#breath-wrap{position:relative;height:16px;background:rgba(10,6,7,.7);border:1px solid var(--line)}
#hp-bar{height:100%;width:100%;background:linear-gradient(90deg,#6a0a10,#d0261c);box-shadow:0 0 12px rgba(220,40,20,.5);transition:width .15s}
#hp-text{position:absolute;right:6px;top:-1px;font-size:13px;font-weight:600}
#breath-wrap{height:7px}
#breath-bar{height:100%;width:100%;background:#bfd8e6}
#breath-wrap span{position:absolute;left:0;top:-15px;font-size:10px;letter-spacing:.25em;color:#a9b9c2}

#ammo{position:absolute;right:28px;bottom:26px;text-align:right}
#w-name{font-size:13px;letter-spacing:.28em;color:#c7b89c}
#w-ammo{font-weight:700;line-height:1}
#mag{font-size:58px;text-shadow:0 0 14px rgba(0,0,0,.8)}
#mag.low{color:var(--blood-hi)}
.slash{font-size:28px;color:#7d715e;margin:0 6px}
#reserve{font-size:26px;color:#bfb29b}
#gear{display:flex;gap:14px;justify-content:flex-end;font-size:12px;letter-spacing:.14em;color:#b7aa93;margin-top:4px}
#gear b{color:var(--bone);font-size:15px}
#reload-hint{margin-top:6px;font-size:13px;letter-spacing:.18em;color:var(--blood-hi);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}

#weaponbar{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.wslot{width:94px;padding:5px 7px;background:rgba(12,8,9,.55);border:1px solid rgba(235,226,205,.12);font-size:10px;letter-spacing:.1em;color:#8f846f}
.wslot b{display:block;color:#c8bba3;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wslot.on{border-color:#c9291e;background:rgba(120,12,16,.45);color:#e8d9bc}
.wslot.on b{color:#fff}

#feed{position:absolute;left:50%;top:calc(50% + 70px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.pop{font-family:'Oswald';font-weight:700;font-size:20px;letter-spacing:.08em;text-shadow:0 0 8px #000,0 2px 0 #000;animation:pop 1.4s forwards;white-space:nowrap}
.pop small{font-weight:400;color:#d8c9ad;margin-left:6px;font-size:15px}
.pop.head{color:#ff5a3a}.pop.big{color:#ffb547;font-size:24px}.pop.info{color:#cfe3ee;font-size:16px}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(1.3)}10%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}

#banner{position:absolute;left:0;right:0;top:22%;text-align:center;animation:bannerIn 3.2s forwards}
#banner-title{font-family:'Pirata One';font-size:clamp(56px,9vw,110px);color:#f1e3c8;text-shadow:0 0 28px rgba(255,50,30,.7),0 4px 0 #300}
#banner-sub{font-family:'Special Elite',monospace;font-size:18px;color:#c8b896;letter-spacing:.12em}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.15);filter:blur(6px)}12%{opacity:1;transform:none;filter:none}80%{opacity:1}100%{opacity:0}}

#killcam .kc-bar{position:absolute;left:0;right:0;height:11vh;background:#000}
#killcam .top{top:0}#killcam .bottom{bottom:0}
#kc-label{position:absolute;right:4vw;bottom:13vh;font-family:'Pirata One';font-size:44px;color:#cfe8ff;text-shadow:0 0 18px #48a8ff}

#credit-hud{position:absolute;left:28px;bottom:76px;font-family:'Special Elite',monospace;font-size:11px;color:rgba(235,226,205,.45);letter-spacing:.08em}

@media (max-width:760px){
  #weaponbar{display:none}
  .settings,.controls{grid-template-columns:1fr}
  #vitals{width:170px}
}
#hud.kc > *:not(#killcam){opacity:0!important}
#hud.scoped #topbar,#hud.scoped #credit-hud,#hud.scoped #weaponbar,#hud.scoped #threats{opacity:0}
#hud.scoped #vitals,#hud.scoped #ammo{opacity:.55}
#topbar,#credit-hud,#weaponbar,#vitals,#ammo{transition:opacity .15s}

/* ---------- save / load ---------- */
.menu-row{display:flex;gap:10px}.menu-row .btn{flex:1}
.saves-box{width:min(560px,94vw);text-align:left}
.saves-box h2{text-align:center}
.slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.slot+.slot{margin-top:6px}
.slot-info{flex:1;min-width:0}
.slot-name{font-size:12px;letter-spacing:.2em;color:#a99a83;text-transform:uppercase}
.slot-desc{font-size:16px;color:var(--bone)}
.slot-date{font-family:'Special Elite',monospace;font-size:12px;color:#8e826e}
.slot.empty .slot-desc{color:#6d6455}
.btn.small{font-size:12px;padding:7px 12px;letter-spacing:.1em}
.save-io{display:flex;gap:8px;flex-wrap:wrap}.save-io .btn{flex:1;text-align:center}
#save-msg{min-height:18px;font-family:'Special Elite',monospace;font-size:13px;color:var(--ember);text-align:center}