.health-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; isolation:isolate; box-sizing:border-box; padding:24px; font:13px/1.5 "Segoe UI",sans-serif; color:var(--nav-ink,#243c61); background:radial-gradient(ellipse at 25% 20%,#54d7ed22,transparent 55%),radial-gradient(ellipse at 80% 85%,#9c6ee92a,transparent 55%),var(--hud-background,#edf5ff); }
.health-loading[hidden] { display:none; }
.health-loading::before { content:""; position:absolute; inset:10%; border:1px solid #799ee222; border-radius:50%; transform:rotate(-22deg) scaleX(1.3); z-index:-1; }
.health-loading-halo { position:relative; display:grid; place-items:center; width:146px; height:146px; margin-bottom:8px; border-radius:50%; background:radial-gradient(circle,#68cfff22,transparent 70%); }
.health-loading-halo img { width:92px; height:92px; object-fit:contain; filter:drop-shadow(0 8px 16px #667bea44); animation:health-breathe 3s ease-in-out infinite; }
.health-loading-orbit { position:absolute; inset:0; border:1px solid #8c9de644; border-radius:50%; border-top:2px solid #58caef; border-right:2px solid #a48af0; animation:health-orbit 7s linear infinite; box-shadow:0 0 24px #6ccff41a,inset 0 0 22px #8997ef16; }
.health-loading-orbit::after { content:""; position:absolute; top:18px; right:18px; width:7px; height:7px; border-radius:50%; background:#64d5ef; box-shadow:0 0 12px #6dcfff; }
.health-loading small { font-size:9px; font-weight:750; letter-spacing:2px; color:var(--nav-accent,#566dba); }
.health-loading h1 { margin:0; font-size:25px; line-height:1.2; letter-spacing:-.5px; }
.health-loading p { margin:0; opacity:.8; }
.health-loading-track { width:148px; height:3px; border-radius:4px; overflow:hidden; background:#829fe52a; margin-top:8px; }
.health-loading-track span { display:block; height:100%; width:45%; border-radius:4px; background:linear-gradient(90deg,#4fcde7,#9474ee); animation:health-flow 1.8s ease-in-out infinite; }
.health-loading-caption { font-size:10px; opacity:.7; }
@keyframes health-orbit { to { transform:rotate(360deg); } }
@keyframes health-breathe { 50% { transform:translateY(-4px); } }
@keyframes health-flow { from { transform:translateX(-105%); } to { transform:translateX(325%); } }
@media(prefers-reduced-motion:reduce) { .health-loading * { animation:none!important; } }