/* HUD, after the original: angled weapon plate (top left), weapon row (bottom right), XP strip, round status gauge (top right) */
#hud{position:fixed;inset:0;pointer-events:none;font-family:var(--f-lcd)}
#hTop{position:absolute;left:0;right:0;top:0;height:calc(28px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 380px 0 250px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--steelbar),var(--brushed);border-bottom:1px solid #0d0f10;box-shadow:0 2px 6px rgba(0,0,0,.6);font:bold 13px var(--f-ui);color:#1d2122;text-shadow:0 1px 0 rgba(255,255,255,.6);white-space:nowrap}
#hXp{flex:0 1 340px;height:13px;background:#1b1e1f;border:1px solid #0d0f10;box-shadow:inset 0 1px 3px #000}
#hXp i{display:block;height:100%;background:linear-gradient(#ffc75a,#e0870f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#hMid{position:absolute;left:50%;top:calc(36px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;gap:42px;color:#3cf03c;font:13px var(--f-ui);text-shadow:0 1px 2px #000,0 0 6px #000;white-space:nowrap}
#wPanel{position:absolute;left:0;top:0;width:250px;height:146px;padding:10px 0 0 34px;background:var(--steelbar),var(--brushed);clip-path:polygon(0 0,100% 0,62% 100%,0 100%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
#wPanel::before{content:'%';position:absolute;left:9px;top:46px;font:bold 17px var(--f-ui);color:#2b3033;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hl{background:#0b170b repeating-linear-gradient(90deg,transparent 0 13px,rgba(134,242,106,.07) 13px 14px),#0b170b;border:2px solid #2b3133;box-shadow:inset 0 0 10px #000;color:#7dff5f;text-shadow:0 0 6px rgba(125,255,95,.6);font-family:'VT323',var(--f-lcd)}
#wName{height:30px;width:196px;padding:2px 8px;font-size:22px;letter-spacing:2px;text-transform:uppercase;line-height:24px;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
#wBar{width:150px;height:5px;margin:4px 0 6px 8px;background:#14240f}
#wBar i{display:block;height:100%;background:#3fc23a;box-shadow:0 0 6px #3fc23a}
#wNums{width:120px;padding:2px 8px 4px;line-height:.95;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
#wNums small{display:block;font-size:14px;letter-spacing:2px}
#wNums b{display:block;font-weight:normal;font-size:28px}
#wNums b.red{color:#ff5a3a;text-shadow:0 0 6px rgba(255,90,58,.6)}
#wbar{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));top:150px;display:flex;flex-direction:column;gap:4px}
.slot{position:relative;width:88px;height:clamp(26px,calc((100vh - 176px) / 9 - 4px),58px);border:1px solid #6e7477;border-radius:2px 2px 9px 2px;background:linear-gradient(#41484b,#23282b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.6);color:#e6ece6;font:10px var(--f-ui);pointer-events:auto;cursor:pointer}
.slot img{position:absolute;left:8px;right:8px;top:3px;bottom:12px;width:calc(100% - 16px);height:calc(100% - 15px);object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.slot .a{position:absolute;right:6px;bottom:1px;text-shadow:0 1px 1px #000}
.slot.on{background:linear-gradient(#69c552,#2d7a22);border-color:#b4ff9e;box-shadow:0 0 8px rgba(110,255,90,.55)}
.slot.lock{opacity:.55;cursor:default}
.slot.lock img{filter:grayscale(1) brightness(.6)}
.slot.empty .a{color:#ff7a5c}
.lockI{display:inline-block;width:8px;height:6px;margin-top:4px;background:#cfd5d8;border-radius:1px;position:relative}
.lockI::before{content:'';position:absolute;left:1px;top:-4px;width:4px;height:4px;border:1px solid #cfd5d8;border-bottom:0;border-radius:3px 3px 0 0}
#gauge{position:absolute;right:0;top:0;width:370px;height:150px;pointer-events:none}
#gauge::before{content:'';position:absolute;right:0;top:0;width:340px;height:118px;border-radius:60px 0 0 60px;background:var(--steelbar),var(--brushed);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
#gaugeC{position:absolute;right:112px;top:6px;width:140px;height:140px}
#gLogout{position:absolute;right:262px;top:8px;pointer-events:auto}
#gNums{position:absolute;right:40px;top:44px;text-align:right;font-family:'VT323',var(--f-lcd);line-height:.85}
#gNums b{display:block;font-weight:normal;font-size:30px;color:#7dff5f;text-shadow:0 0 6px rgba(125,255,95,.7),0 1px 1px #000}
#gNums span{display:block;font-size:22px;color:#5aa0ff;text-shadow:0 0 6px rgba(90,160,255,.7),0 1px 1px #000}
#gBtns{position:absolute;right:6px;top:10px;display:flex;flex-direction:column;gap:6px}
#gBtns button{pointer-events:auto;width:24px;height:24px;padding:0;border:1px solid #2a2e30;border-radius:3px;cursor:pointer;font:bold 14px var(--f-ui);color:#3cbf2c;background:linear-gradient(#e6e8e8,#a5aaab);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.6)}
#gBtns button.off{color:#9a3a2a}
#log{position:absolute;left:calc(108px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(360px,40vw);height:86px;padding:5px 10px;font-size:12px;line-height:1.35;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(5,12,5,.55);color:#86f26a;text-shadow:0 1px 1px #000;border-radius:4px}
#log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#log .y{color:var(--hazard)}
#log .r{color:#ff7a5c}
#center{position:absolute;left:0;right:0;top:34%;text-align:center;z-index:2}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1}
#center .m{display:inline-block;font-family:var(--f-head);font-size:clamp(28px,6vw,60px);letter-spacing:4px;color:var(--paper);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);animation:pop .3s ease-out}
#center .s{display:block;margin-top:6px;font-size:clamp(13px,2vw,18px);letter-spacing:3px;color:var(--hazard);text-shadow:2px 2px 0 var(--ink)}
@keyframes pop{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
/* "Controls of the mech" panel with keycaps, as in the original */
#ctrlHelp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 24px));padding:20px 26px 22px;border-radius:30px;background:rgba(10,14,16,.9);box-shadow:0 10px 30px rgba(0,0,0,.6);color:#3cf03c;font:15px var(--f-ui);pointer-events:auto}
#ctrlHelp h3{font:bold 24px var(--f-ui);text-align:center;margin-bottom:12px}
#ctrlHelp .x{position:absolute;right:26px;top:18px;font:bold 22px var(--f-ui);color:#3cf03c;background:none;border:0;cursor:pointer}
#ctrlHelp p{margin-bottom:16px;line-height:1.5}
.kgrid{display:grid;grid-template-columns:auto auto 1fr;gap:10px 26px;align-items:end}
.kgrid .lab{display:block;text-align:center;margin-top:8px;font-size:14px}
.krow{display:flex;gap:7px;justify-content:center}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:54px;padding:0 10px;border-radius:8px;background:linear-gradient(#f4f4f3,#c2c6c7);box-shadow:0 5px 0 #6f7476,inset 0 -3px 0 rgba(0,0,0,.12),0 6px 6px rgba(0,0,0,.5);font:bold 20px Arial,sans-serif;color:#2b2f31}
.key.w{min-width:150px}.key.c{min-width:84px}
.arrows{display:grid;grid-template-columns:repeat(3,54px);gap:7px;justify-content:center}
.arrows .up{grid-column:2}.arrows .up+.key{grid-column:1}
/* ---- HUD frames rendered with Krea 2 (tools/gen_hud.sh, tools/prep_hud.py): a plate with three display windows top left,
   the same plate mirrored with the radar bezel top right, metal tiles for the weapon column, a riveted strip on top */
#hTop{padding-left:300px;background:#2a2e30 url(../assets/hud/strip.jpg) repeat-x center/auto 100%;color:#e6eae4;text-shadow:0 1px 2px #000;font-weight:normal}
#wPanel{width:300px;height:149px;padding:0;background:url(../assets/hud/plate.png) no-repeat 0 0/100% 100%;clip-path:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.75))}
#wPanel::before{content:none}
#wPanel #wName,#wPanel #wNums small,#wPanel #wNums b{color:#86f26a;text-shadow:0 0 6px rgba(125,255,95,.55);font-family:'VT323',var(--f-lcd)}
#wName{position:absolute;left:116px;top:30px;width:120px;height:auto;padding:0;background:none;border:0;box-shadow:none;clip-path:none;font-size:24px;line-height:24px;letter-spacing:2px;white-space:nowrap;overflow:hidden}
#wBar{position:absolute;left:117px;top:62px;width:116px;height:5px;margin:0;background:#10200d}
#wNums{position:static;width:auto;padding:0;background:none;border:0;box-shadow:none;clip-path:none}
#wNums .wA,#wNums .wS{position:absolute;left:21px;width:64px;text-align:center;line-height:1}
#wNums .wA{top:20px}#wNums .wS{top:82px}
#wNums small{font-size:11px;letter-spacing:2px;opacity:.85}
#wNums b{font-size:24px;font-weight:normal}
#wbar{top:154px}
.slot{width:64px;border:0;border-radius:0;background:url(../assets/hud/slot.png) no-repeat center/100% 100%;box-shadow:none}
/* the selected slot: the same tile, its recess lit green from inside and a green rim glow */
.slot.on{background:url(../assets/hud/slot.png) no-repeat center/100% 100%;border:0;box-shadow:none;filter:drop-shadow(0 0 4px rgba(110,255,90,.7))}
.slot.on::before{content:'';position:absolute;left:15%;right:15%;top:13%;bottom:17%;border-radius:2px;background:radial-gradient(rgba(120,255,95,.38),rgba(60,170,45,.22));box-shadow:inset 0 0 8px rgba(130,255,100,.55)}
.slot img{z-index:1}
.slot img{left:16%;right:16%;top:14%;bottom:24%;width:68%;height:62%}
.slot .a{right:8px;bottom:3px;font-size:10px;color:#d6dad4}
#gauge{width:380px;height:186px}
#gauge::before{content:'';position:absolute;right:0;top:0;width:300px;height:149px;border-radius:0;background:url(../assets/hud/plate.png) no-repeat 0 0/100% 100%;box-shadow:none;transform:scaleX(-1);filter:drop-shadow(0 3px 5px rgba(0,0,0,.75))}
#gauge::after{content:'';position:absolute;right:130px;top:2px;width:128px;height:128px;background:url(../assets/hud/bezel.png) no-repeat center/100% 100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
#gaugeC{right:147px;top:19px;width:94px;height:94px;border-radius:50%;z-index:1}
#gNums{right:0;top:0;width:100%;height:100%;line-height:1}
#gNums b,#gNums span{position:absolute;right:24px;width:62px;text-align:center}
#gNums b,#gNums span{font-family:var(--f-lcd);letter-spacing:1px}
#gNums b{top:31px;font-size:18px}#gNums span{top:93px;font-size:16px}
#gLogout{right:300px;top:10px}
#gBtns{right:auto;left:0;top:44px}
/* the message log in a bolted console frame (tools/gen_hud.sh) */
#log{width:430px;max-width:calc(100vw - 120px);height:150px;padding:30px 44px 44px;background:url(../assets/hud/logframe.png) no-repeat center/100% 100%;border-radius:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
/* top strip: the XP bar in a bolted gauge frame, metal push buttons, the instance line on a slim display bar */
#hXp{position:relative;flex:0 1 340px;height:30px;background:url(../assets/hud/xpframe.png) no-repeat center/100% 100%;border:0;box-shadow:none}
#hXp i{position:absolute;left:4.5%;top:39%;height:23%;border-radius:2px;background:linear-gradient(#ffd27a,#d98a12);box-shadow:0 0 6px rgba(255,180,60,.5),inset 0 1px 0 rgba(255,255,255,.35)}
#hTop{height:calc(34px + env(safe-area-inset-top,0px))}
#hMid{top:calc(42px + env(safe-area-inset-top,0px));gap:34px;padding:7px 34px 8px;background:url(../assets/hud/infobar.png) no-repeat center/100% 100%;font:12px var(--f-lcd);color:#86f26a;text-shadow:0 0 5px rgba(125,255,95,.45)}
#gLogout{padding:0;width:66px;height:36px;border:0;border-radius:0;background:url(../assets/hud/btnwide.png) no-repeat center/100% 100%;box-shadow:none;color:#e6eae4;font:13px var(--f-lcd);letter-spacing:2px;text-shadow:0 1px 2px #000}
#gLogout:hover{color:#9dff80;filter:brightness(1.1)}
#gBtns button{width:30px;height:30px;border:0;border-radius:0;background:url(../assets/hud/btn.png) no-repeat center/100% 100%;box-shadow:none;color:#9dff80;font:15px var(--f-lcd);text-shadow:0 0 5px rgba(125,255,95,.5)}
#gBtns button.off{color:#8a8f8a;text-shadow:none}
#gBtns button:hover{filter:brightness(1.15)}
/* bottom row: the log on the left, the weapons centred on a bolted rack (rack_h.png is the left half of rack.png turned on its side and mirrored, so both bolted end caps match; they are kept unstretched),
   the radar scope on the right. --slot sizes the bays; the log gets whatever is left of its half */
#hud{--slot:clamp(34px,calc((100vw - 760px) / 9),52px)}
#wbar{left:50%;top:auto;right:auto;transform:translateX(-50%);bottom:calc(4px + env(safe-area-inset-bottom,0px));flex-direction:row;gap:3px;padding:8px 22px;border:0 solid transparent;border-image:url(../assets/hud/rack_h.png) 0 80 fill / 0 26px stretch;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
/* square armored bays (baysq.png); the dark tray spans 12-88 % of the tile */
.slot,.slot.on{width:var(--slot);height:auto;aspect-ratio:1;background:url(../assets/hud/baysq.png) no-repeat center/100% 100%;filter:none}
.slot img{left:16%;right:16%;top:16%;bottom:20%;width:68%;height:64%}
.slot .a{right:15%;bottom:13%;font-size:9px;color:#d6dad4}
.slot.on::before{left:12%;right:12%;top:12%;bottom:12%;border-radius:1px;background:radial-gradient(rgba(120,255,95,.32),rgba(60,170,45,.16));box-shadow:inset 0 0 7px rgba(130,255,100,.6),0 0 6px rgba(110,255,90,.35)}
.slot.lock{opacity:1;filter:grayscale(1) brightness(.8)}
/* log flush left; the help / pause / music buttons in a row at the right edge, under the gauge */
#log{left:calc(4px + env(safe-area-inset-left,0px));width:min(430px,calc(50vw - var(--slot) * 4.5 - 64px))}
#radar{position:absolute;right:calc(4px + env(safe-area-inset-right,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));width:200px;height:200px;background:url(../assets/hud/radar.png) no-repeat center/100% 100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
/* the canvas sits on the scope's dark glass (tools/prep_hud.py) */
#radarC{position:absolute;left:17.5%;top:17.7%;width:65%;height:65%;border-radius:50%}
#gBtns{left:auto;right:8px;top:152px;flex-direction:row}