/* ===== HUD v2: overlaid on a full-screen playfield, thumb zone bottom, safe areas respected ===== */
#hud{position:fixed;inset:0;z-index:4;pointer-events:none;font-family:var(--fl)}
#hud button{pointer-events:auto}
.hud-top{position:absolute;top:calc(10px + var(--safe-t));inset-inline:calc(10px + var(--safe-l)) calc(10px + var(--safe-r));display:flex;align-items:center;gap:10px}
.hud-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;border:3px solid var(--ink);background:linear-gradient(180deg,#fffdf7,var(--cream) 60%,var(--cream2));box-shadow:inset 0 3px 0 #fff,0 4px 0 var(--ink);transition:transform .08s}
.hud-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.hud-btn img.ic{width:28px;height:28px}
.hearts{display:flex;gap:1px}.hearts img.ic{width:30px;height:30px;filter:drop-shadow(0 2px 0 rgba(29,27,58,.5))}
.hearts .off img.ic,.hearts img.ic.off{filter:grayscale(1) brightness(.6) opacity(.55)}
.hearts.hurt{animation:shake .35s}@keyframes shake{25%{transform:translateX(-6px) rotate(-4deg)}75%{transform:translateX(6px) rotate(4deg)}}
.prog{position:relative;flex:1;height:16px;border-radius:10px;background:rgba(255,246,230,.85);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.prog-fill{position:absolute;inset:0;border-radius:6px;background:linear-gradient(180deg,var(--saf-l),var(--saf));transform-origin:left;transform:scaleX(0)}
[dir=rtl] .prog-fill{transform-origin:right}
.prog-bird{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;margin-inline-start:-10px;background:var(--bird) center/contain no-repeat;filter:drop-shadow(0 2px 0 var(--ink))}
[dir=rtl] .prog-bird{transform:scaleX(-1)}
.hud-seeds{display:inline-flex;align-items:center;gap:4px;height:42px;padding:0 12px 0 6px;border-radius:21px;background:rgba(255,246,230,.95);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700;font-size:18px;min-width:70px}
.hud-seeds.pop{animation:spop .25s}@keyframes spop{50%{transform:scale(1.18)}}
.hud-feathers{position:absolute;top:calc(70px + var(--safe-t));inset-inline-end:calc(14px + var(--safe-r));display:flex;gap:2px}
.hf img.ic{width:30px;height:30px}.hf img.ic{filter:grayscale(1) brightness(1.4) opacity(.4)}.hf.got img.ic{filter:drop-shadow(0 0 8px rgba(255,210,90,.9));animation:spop .4s}
.bossbar{--bc:#8a4a9a;--bc-l:#c98ad6;position:absolute;top:calc(104px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;align-items:center;width:min(78vw,400px);z-index:2;animation:bbIn .55s var(--ease) both;filter:drop-shadow(0 5px 0 rgba(29,27,58,.55))}
.bossbar[data-boss=ajaj]{--bc:#d9871f;--bc-l:#ffc56a}.bossbar[data-boss=ajaj] .bb-face{background-position:34% 9%}.bossbar[data-boss=hush]{--bc:#1f9aa6;--bc-l:#7ee6e6}
.bb-face{flex:none;position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:var(--cream) 17% 13%/260% no-repeat;border:4px solid var(--ink);box-shadow:0 0 0 4px var(--bc),inset 0 -6px 0 rgba(29,27,58,.12)}
.bb-body{flex:1;min-width:0;margin-inline-start:-16px;padding:5px 14px 9px;padding-inline-start:24px;border-radius:16px;background:linear-gradient(180deg,var(--paper),var(--cream2));border:4px solid var(--ink);display:grid;gap:3px}
.bb-name{font:700 15px/1.2 var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-track{position:relative;height:16px;border-radius:9px;background:#3a2f52;border:3px solid var(--ink);overflow:hidden}
.bb-track i{position:absolute;inset:0;transform-origin:left center;transition:transform .2s var(--out)}[dir=rtl] .bb-track i{transform-origin:right center}
.bb-ghost{background:#fff6d8;transition:transform .7s .35s var(--out)!important}
.bb-fill{background:linear-gradient(180deg,var(--bc-l),var(--bc) 60%);box-shadow:inset 0 3px 0 rgba(255,255,255,.4)}
.bb-ticks b{position:absolute;top:0;bottom:0;width:3px;margin-inline-start:-1px;background:rgba(29,27,58,.55)}.bb-ticks b.mid{background:var(--ink);width:4px}
.bossbar.hit{animation:bbHit .4s ease-out}.bossbar.hit .bb-face{animation:bbFace .4s ease-out}
.bossbar.p2 .bb-face{box-shadow:0 0 0 4px var(--coral),0 0 18px 4px rgba(255,90,78,.7),inset 0 -6px 0 rgba(29,27,58,.12);animation:bbPulse 1.1s ease-in-out infinite}
@keyframes bbIn{0%{opacity:0;transform:translate(-50%,-30px) scale(.8)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes bbHit{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 7px))}45%{transform:translateX(calc(-50% + 6px))}70%{transform:translateX(calc(-50% - 3px))}}
@keyframes bbFace{30%{filter:brightness(2.2) saturate(.3)}}
@keyframes bbPulse{50%{transform:scale(1.06)}}
.combo{position:absolute;top:calc(120px + var(--safe-t));inset-inline-start:calc(18px + var(--safe-l));font:700 40px/1 var(--fl);color:var(--saf-l);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;opacity:0;transform:scale(.5) rotate(-8deg);transition:.25s var(--ease)}
.combo.on{opacity:1;transform:scale(1) rotate(-8deg)}
.power{position:absolute;bottom:calc(22px + var(--safe-b));inset-inline-end:calc(18px + var(--safe-r));width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 50% 35%,#fffdf6,var(--cream) 55%,var(--cream2));border:4px solid var(--ink);box-shadow:inset 0 4px 0 #fff,0 6px 0 var(--ink),0 14px 26px rgba(10,8,30,.35);transition:transform .1s}
.power:active{transform:translateY(4px) scale(.97)}
.power-ring{--p:0;position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--saf) calc(var(--p)*360deg),rgba(29,27,58,.18) 0);-webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%)}
.power-ico img.ic{width:58px;height:58px;filter:grayscale(.85) opacity(.55);transition:filter .2s,transform .2s}
.power-label{position:absolute;bottom:calc(100% + 8px);white-space:nowrap;font:700 16px var(--f);color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.power.ready{animation:ready 1s ease-in-out infinite;background:radial-gradient(circle at 50% 35%,#fff7d6,var(--saf-l) 60%,var(--saf))}
.power.ready .power-ico img.ic{filter:drop-shadow(0 0 10px #fff3b0);transform:scale(1.08)}
@keyframes ready{50%{transform:scale(1.07);box-shadow:inset 0 4px 0 #fff,0 6px 0 var(--ink),0 0 0 10px rgba(255,211,110,.35),0 14px 26px rgba(10,8,30,.35)}}
.power.active .power-ring{background:conic-gradient(var(--teal-l) calc(var(--p)*360deg),rgba(29,27,58,.18) 0)}
.stage-name{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);min-width:260px;padding:22px 52px 30px;text-align:center;background:var(--ribbon) center/100% 100% no-repeat;
font:700 22px var(--f);color:var(--ink);opacity:0;animation:stage 2.6s .2s var(--out) both;white-space:nowrap}
@keyframes stage{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}}
.hint{position:absolute;bottom:calc(170px + var(--safe-b));left:50%;transform:translateX(-50%);max-width:86vw;padding:10px 20px;border-radius:999px;background:rgba(255,246,230,.96);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);
font:700 19px var(--f);line-height:1.4;text-align:center;opacity:0}
.hint.on{animation:hint 3.6s var(--out)}@keyframes hint{0%{opacity:0;transform:translate(-50%,16px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (orientation:landscape) and (max-height:500px){.power{width:84px;height:84px}.power-ico img.ic{width:50px;height:50px}.hud-feathers{top:calc(64px + var(--safe-t))}.bossbar{top:calc(8px + var(--safe-t))}}
#hud [hidden]{display:none!important}