#hud-root{--u:clamp(9px,.8vw,40px);--red:#ff2a3a;--amber:#ffb020;position:fixed;inset:0;z-index:1000;pointer-events:none;color:#fff;
 font-family:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;text-transform:uppercase;letter-spacing:.14em;user-select:none;overflow:hidden}
#hud-root .h{display:none}
#hud-root .h.on{display:block}
#hud-root .panel{background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.35);padding:calc(var(--u)*.8) calc(var(--u)*1.4)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*1.2);background:rgba(0,0,0,.88);padding:2vh 4vw;box-sizing:border-box}
.screen.on{display:flex}
.screen.clickable{pointer-events:auto;cursor:pointer}
.title{font-size:calc(var(--u)*6);font-weight:700;letter-spacing:.3em;margin:0}
.sub{font-size:calc(var(--u)*2);letter-spacing:.5em;color:#ddd;margin:0}
.rule{width:calc(var(--u)*30);height:1px;background:var(--red)}
.cta{font-size:calc(var(--u)*2);color:var(--red);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.big{font-size:calc(var(--u)*2.4)}
.bar{font-size:calc(var(--u)*2.4);letter-spacing:.05em}
.small{font-size:calc(var(--u)*1.4);color:#ddd}
.warn{color:var(--amber);font-size:calc(var(--u)*1.3)}
.items{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2);justify-content:center;font-size:calc(var(--u)*1.4);color:#999}
.items .done{color:#fff;border-bottom:1px solid var(--red)}
.controls{display:grid;grid-template-columns:repeat(2,auto);gap:calc(var(--u)*.4) calc(var(--u)*3);font-size:calc(var(--u)*1.5);text-align:left}
.controls b{color:var(--red);font-weight:700;margin-right:.6em}
.quality{display:flex;align-items:center;gap:calc(var(--u)*.8);pointer-events:auto;cursor:default}
.quality span{font-size:calc(var(--u)*1.3);color:#ccc}
.quality button{font:inherit;font-size:calc(var(--u)*1.4);letter-spacing:.14em;color:#fff;background:#000;border:1px solid rgba(255,255,255,.5);padding:calc(var(--u)*.5) calc(var(--u)*1.1);cursor:pointer}
.quality button.sel{border-color:var(--red);color:var(--red);background:rgba(255,42,58,.12)}
.quality button:hover{border-color:#fff}
/* in-game */
.corner{position:absolute;margin:calc(var(--u)*2.5)}
#hp{left:0;bottom:0;min-width:calc(var(--u)*16)}
#ammo{right:0;bottom:0;text-align:right}
#targets{right:0;top:0;font-size:calc(var(--u)*1.8)}
#hp .num{font-size:calc(var(--u)*3);font-weight:700}
#hp .track{height:calc(var(--u)*.35);background:rgba(255,255,255,.25);margin-top:calc(var(--u)*.5)}
#hp .fill{height:100%;background:#fff;width:100%}
#hp.low .num{color:var(--red)}#hp.low .fill{background:var(--red)}
#ammo .num{font-size:calc(var(--u)*5);font-weight:700;letter-spacing:.06em}
#ammo.empty .num{color:var(--red)}
#ammo .wpn{font-size:calc(var(--u)*1.5);color:#ddd}
#ammo .rl{font-size:calc(var(--u)*1.6);color:var(--red);height:calc(var(--u)*2)}
#debug{left:0;top:0;font-size:calc(var(--u)*1.2);letter-spacing:.05em;line-height:1.5;margin:calc(var(--u)*1)}
.cross{position:absolute;left:50%;top:50%;width:0;height:0}
.cross i{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.cross .t,.cross .b{width:2px;height:calc(var(--u)*.9);margin-left:-1px}
.cross .l,.cross .r{height:2px;width:calc(var(--u)*.9);margin-top:-1px}
.cross .t{bottom:var(--sp,6px)}.cross .b{top:var(--sp,6px)}.cross .l{right:var(--sp,6px)}.cross .r{left:var(--sp,6px)}
#hm{position:absolute;left:50%;top:50%;width:calc(var(--u)*3);height:calc(var(--u)*3);margin:calc(var(--u)*-1.5);opacity:0}
#hm i{position:absolute;left:50%;top:50%;width:calc(var(--u)*.2);height:100%;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
#hm i+i{transform:translate(-50%,-50%) rotate(-45deg)}
#hm.red i{background:var(--red)}
#hm.flash{opacity:1}
#hmtext{position:absolute;left:0;right:0;top:calc(50% + var(--u)*4);text-align:center;font-size:calc(var(--u)*1.8);font-weight:700;opacity:0;transition:opacity .25s}
#hmtext.on{opacity:1}#hmtext.red{color:var(--red)}
#vig{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 20vmin 6vmin rgba(255,20,30,.75)}
#dmg{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#dmg i{position:absolute;left:calc(var(--u)*-9);top:calc(var(--u)*-17);width:calc(var(--u)*18);height:calc(var(--u)*4);border-top:calc(var(--u)*.5) solid var(--red);border-radius:50% 50% 0 0/100% 100% 0 0}
#banner{position:absolute;left:0;right:0;top:14%;text-align:center;font-size:calc(var(--u)*3);font-weight:700;color:var(--amber);text-shadow:0 0 calc(var(--u)*.6) #000,0 2px 0 #000}
#mission{position:absolute;left:calc(var(--u)*4);top:22%;border-left:calc(var(--u)*.4) solid var(--red);transition:opacity .8s}
#mission .a{font-size:calc(var(--u)*1.5);color:var(--red)}
#mission .b{font-size:calc(var(--u)*3.2);font-weight:700}
#mission .c{font-size:calc(var(--u)*1.5);color:#ddd;margin-top:.5em}
.stats{display:flex;gap:calc(var(--u)*4)}
.stats div{font-size:calc(var(--u)*1.3);color:#ccc}
.stats b{display:block;font-size:calc(var(--u)*3.4);color:#fff}
#end.defeat .title{color:var(--red)}