html,body{margin:0;background:#000}
#pwa-boot{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(122,44,255,.22),rgba(255,79,216,.07) 35%,#000 72%);opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease}
#pwa-boot.boot-leaving{opacity:0;visibility:hidden}
#pwa-boot img{width:120px;height:120px;object-fit:cover;border-radius:26px;box-shadow:0 0 35px rgba(255,79,216,.20),0 0 80px rgba(122,44,255,.15);animation:bootPulse 1.8s ease-in-out infinite}
@keyframes bootPulse{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:1}}
#pwa-boot::after{content:"PERSEPHONE WORLD";margin-top:22px;color:rgba(255,255,255,.65);font-family:sans-serif;font-size:11px;letter-spacing:4px}
#loader{position:fixed;inset:0;z-index:999999999;isolation:isolate;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility .7s ease}
#loader.loader-visible{opacity:1;visibility:visible;pointer-events:auto}
.loader-bg{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,79,216,.08),transparent 60%);filter:blur(40px);animation:loaderPulse 4s ease-in-out infinite}
.loader-content{position:relative;z-index:2;width:min(85vw,420px);text-align:center}
.loader-logo{width:92px;height:92px;object-fit:cover;border-radius:24px;box-shadow:0 0 40px rgba(255,119,180,.25),0 0 80px rgba(122,44,255,.18);animation:loaderFloat 4s ease-in-out infinite}
.loader-title{margin-top:24px;font-size:2.4rem;font-weight:700;letter-spacing:2px;background:linear-gradient(90deg,#fff,#ff77b4,#b388ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.loader-subtitle{margin-top:10px;opacity:.65;letter-spacing:3px;font-size:.8rem;text-transform:uppercase}
.loader-progress-wrapper{position:relative;margin-top:32px}
.loader-bar{width:100%;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.loader-progress{width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#7a2cff,#ff4fd8);box-shadow:0 0 20px rgba(255,79,216,.5)}
.loader-percent{margin-top:14px;font-size:.95rem;opacity:.85}
@keyframes loaderFloat{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-10px) scale(1.03)}}
@keyframes loaderPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
#app{opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s ease;will-change:opacity}
#app.loaded{opacity:1;visibility:visible}