/* Loading states: page-change progress bar, image shimmer, busy buttons. */
.lbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; background: linear-gradient(90deg, #F50332, #FF5C7C); box-shadow: 0 0 12px rgba(245, 3, 50, .7); opacity: 0; transition: opacity .2s; pointer-events: none; }
html.is-navigating .lbar { opacity: 1; animation: lbar 2.4s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes lbar { 0% { width: 0; } 30% { width: 45%; } 100% { width: 88%; } }
.toon .lbar { background: linear-gradient(90deg, #F0457B, #FFD43B); box-shadow: 0 0 12px rgba(240, 69, 123, .7); }
.is-loading { background-color: rgba(255, 255, 255, .04); background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
img.fade { opacity: 0; transition: opacity .45s ease; }
img.fade.is-ready { opacity: 1; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: busy-spin .7s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html.is-navigating .lbar { animation: none; width: 60%; }
  .is-loading { animation: none; }
  .is-busy::after { animation-duration: 1.8s; }
  img.fade { transition: none; }
}
.lmini { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 301; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(14, 19, 32, .94); border: 1px solid #233049; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
html.is-navigating .lmini { opacity: 1; transform: none; }
.lmini img { width: 22px; height: auto; filter: drop-shadow(0 0 8px rgba(245, 3, 50, .55)); }
.lmini svg { width: 70px; height: 20px; fill: none; stroke: #F50332; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: lm-beat 1.4s ease-in-out infinite; }
@keyframes lm-beat { 0% { stroke-dashoffset: 420; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -420; } }
.toon .lmini { background: rgba(26, 6, 16, .94); border-color: #5A1530; }
.toon .lmini svg { stroke: #F0457B; }
@media (prefers-reduced-motion: reduce) { .lmini svg { animation: none; stroke-dashoffset: 0; } .lmini { transition: none; } }