/* First-install comic cover. The art is transparent; all type and controls stay live. */
.offline-loader{position:fixed;inset:0 0 auto;height:var(--app-height,100%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:12px;padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 50% 42%,#42639d 0,#203566 48%,#101b36 100%);color:#fff;text-align:center;transition:opacity .35s ease}
.offline-loader.done{opacity:0;pointer-events:none}
.offline-loader-cover{position:relative;isolation:isolate;flex:1;min-height:0;width:min(100%,580px);display:grid;place-items:center;overflow:hidden}
/* Offset comic panels and restrained halftone establish the cover without baking in words. */
.offline-loader-cover::before{content:"";position:absolute;inset:7% 5% 10%;z-index:-2;background:conic-gradient(from 8deg at 50% 48%,#ffdc5099 0 12deg,#ffffff00 12deg 25deg,#6fd8e899 25deg 38deg,#ffffff00 38deg 51deg,#ff8cb799 51deg 64deg,#ffffff00 64deg 77deg,#ffdc5099 77deg 90deg,#ffffff00 90deg 103deg,#6fd8e899 103deg 116deg,#ffffff00 116deg 129deg,#ff8cb799 129deg 142deg,#ffffff00 142deg 155deg,#ffdc5099 155deg 168deg,#ffffff00 168deg 181deg,#6fd8e899 181deg 194deg,#ffffff00 194deg 207deg,#ff8cb799 207deg 220deg,#ffffff00 220deg 233deg,#ffdc5099 233deg 246deg,#ffffff00 246deg 259deg,#6fd8e899 259deg 272deg,#ffffff00 272deg 285deg,#ff8cb799 285deg 298deg,#ffffff00 298deg 311deg,#ffdc5099 311deg 324deg,#ffffff00 324deg 337deg,#6fd8e899 337deg 350deg,#ffffff00 350deg);clip-path:polygon(49% 0,100% 8%,94% 88%,51% 100%,0 90%,6% 10%);opacity:.42}
.offline-loader-cover::after{content:"";position:absolute;inset:4% 1% 8%;z-index:-1;background:radial-gradient(circle,#fff5 1px,transparent 1.4px) 0 0/13px 13px;mask-image:linear-gradient(90deg,#0008,transparent 25%,transparent 75%,#0008);pointer-events:none}
.offline-loader-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 2px #10172e88);animation:offline-cover-arrive .6s cubic-bezier(.2,.8,.25,1) both}
@keyframes offline-cover-arrive{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.offline-loader-title{position:absolute;z-index:2;bottom:1%;left:0;right:0;margin:0;display:flex;flex-direction:column;align-items:center;line-height:.84;font-size:clamp(44px,9vh,88px);letter-spacing:1px;-webkit-text-stroke:6px var(--slate-950);paint-order:stroke fill}
.offline-loader-title span:first-child{color:#ffdf47;transform:rotate(-3deg)}
.offline-loader-title span:last-child{color:#fa89ca;transform:rotate(2deg)}
.offline-loader-status{z-index:2;flex:none;width:min(100%,380px);display:flex;flex-direction:column;align-items:center;gap:10px}
.offline-loader-bar{--progress:0;position:relative;width:100%;height:42px;border:4px solid #fff;border-radius:6px;background:var(--slate-950);box-shadow:0 5px #0007;overflow:hidden}
.offline-loader-bar i{position:absolute;inset:4px auto 4px 4px;width:calc((100% - 8px) * var(--progress));border-radius:2px;background:var(--yellow-top);box-shadow:inset 0 -3px var(--yellow);transition:width .2s ease,background .3s ease}
.offline-loader.playable .offline-loader-bar i{background:var(--green-top);box-shadow:inset 0 -3px var(--green)}
.offline-loader-bar span{position:relative;display:block;line-height:34px;font-size:26px;color:#fff;-webkit-text-stroke:5px var(--slate-950);paint-order:stroke fill}
.offline-loader-note{margin:0;font-size:14px;color:#cdd9f0}
.offline-loader-actions{display:flex;gap:10px}
.offline-loader-actions[hidden],.offline-loader-actions [hidden]{display:none}
.offline-loader-bar em{position:absolute;top:0;bottom:0;left:calc(4px + (100% - 8px) * var(--playable,0));width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px var(--slate-950)}
.offline-loader-actions .btn[data-offline="play"]{min-width:210px}
.offline-loader-actions .btn[data-offline="play"]:disabled{opacity:1;filter:grayscale(.85) brightness(.85);cursor:default}
@media(max-height:620px){.offline-loader{gap:6px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.offline-loader-title{font-size:clamp(36px,8vh,52px);-webkit-text-stroke:4px var(--slate-950)}.offline-loader-bar{height:34px}.offline-loader-bar span{line-height:26px;font-size:21px}.offline-loader-status{gap:6px}}
@media(prefers-reduced-motion:reduce){.offline-loader-art{animation:none}}