.hud{position:absolute;inset:0;z-index:10;pointer-events:none;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8);padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l))}
.hud button{pointer-events:auto}
.hud-left{position:absolute;left:calc(10px + var(--safe-l));top:calc(8px + var(--safe-t));display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.chip{display:flex;align-items:center;gap:8px;background:rgba(5,10,24,.62);border:1px solid rgba(120,190,255,.45);border-radius:10px;padding:3px 12px;font-size:clamp(.9rem,calc(var(--u)*3.2),1.4rem);min-width:92px}
.chip .lbl{font-size:.6em;letter-spacing:.14em;color:var(--mute)}.chip b{color:#fff;font-variant-numeric:tabular-nums}
.ring-ico{width:1.1em;height:1.1em;border-radius:50%;border:.22em solid var(--gold);box-shadow:0 0 8px var(--gold);display:inline-block}
.hearts{display:flex;gap:4px}.heart{width:clamp(16px,calc(var(--u)*3.6),26px);height:clamp(16px,calc(var(--u)*3.6),26px);background:var(--em);clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);filter:drop-shadow(0 0 4px #20d890);transition:transform .2s}
.heart.off{background:#27353a;filter:none;opacity:.7}
.hud-mid{position:absolute;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(46%,420px)}
.lvl{font-size:clamp(.7rem,calc(var(--u)*2.4),1rem);letter-spacing:.2em;color:var(--mute);background:rgba(5,10,24,.5);padding:2px 12px;border-radius:8px}
.boss-bar,.power{width:100%;text-align:center;font-size:clamp(.65rem,calc(var(--u)*2.2),.9rem);letter-spacing:.2em}.boss-bar .bar>i{background:linear-gradient(90deg,#ff3a2a,#ff9a2a)}.power .bar>i{background:linear-gradient(90deg,var(--cyan),#fff)}
.hud-right{position:absolute;right:calc(10px + var(--safe-r));top:calc(8px + var(--safe-t));display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:2px solid rgba(120,190,255,.55);background:rgba(5,10,24,.7);color:#fff;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}.icon-btn:hover{border-color:var(--cyan)}
.fs{position:absolute;right:10px;bottom:10px;z-index:15;opacity:.8}
.hud-bottom{position:absolute;left:50%;bottom:calc(8px + var(--safe-b));transform:translateX(-50%);display:flex;gap:16px;width:min(60%,520px)}
.meter{flex:1;font-size:.65rem;letter-spacing:.18em;color:var(--mute)}.meter .bar>i{background:linear-gradient(90deg,var(--em),var(--cyan))}.meter .energy>i{background:linear-gradient(90deg,#ff9a2a,var(--gold))}
.banner{position:absolute;left:0;right:0;top:26%;text-align:center;font-size:clamp(1.4rem,calc(var(--u)*8),3.4rem);letter-spacing:.2em;color:#fff;opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s;-webkit-text-stroke:1px rgba(0,0,0,.6);text-shadow:0 0 24px var(--blue),0 3px 6px #000}
.banner.show{opacity:1;transform:scale(1)}.banner.boss{color:#ff5a3a;text-shadow:0 0 28px #ff2a1a,0 3px 6px #000}
.prompt{position:absolute;left:0;right:0;bottom:34%;padding:0 12px;text-align:center;font-size:clamp(.8rem,calc(var(--u)*3),1.3rem);color:var(--gold);letter-spacing:.1em;opacity:0;transition:opacity .2s}.prompt.show{opacity:1}.prompt.pulse{animation:pulse .5s infinite alternate}@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.flash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,30,30,.55));opacity:0}.flash.on{animation:fl .4s ease-out}@keyframes fl{from{opacity:1}to{opacity:0}}
.reduce-motion .prompt.pulse{animation:none}