/* Moonpool: loading and offline states (boot path). Loaded next to styles.css; the boot screen's
   own critical rules are inline in index.html so they paint with the HTML. */

/* ---- calm water while the 3D tank downloads (app.js removes it after the tank's first frame) */
.tank-wait { position: absolute; inset: 0; pointer-events: none; overflow: hidden; transition: opacity .7s ease;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(143, 243, 226, .07), transparent 62%),
    linear-gradient(180deg, #06262d 0%, #03161b 55%, #020b0f 100%); }
.tank-wait.done { opacity: 0; }
.tank-wait i { position: absolute; top: -10%; width: 22%; height: 80%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(232, 241, 239, .055), transparent 85%); filter: blur(6px);
  animation: tank-ray 9s ease-in-out infinite alternate; }
.tank-wait i:nth-child(1) { left: 14%; transform: rotate(14deg); }
.tank-wait i:nth-child(2) { left: 44%; width: 14%; transform: rotate(9deg); animation-delay: -3s; animation-duration: 11s; }
.tank-wait i:nth-child(3) { left: 70%; width: 18%; transform: rotate(4deg); animation-delay: -6s; }
@keyframes tank-ray { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tank-wait i { animation: none; opacity: .7; } }

/* ---- toast: below the HUD on the aquarium tab, so it never covers the balance (app.js sets
   --toast-top from the HUD's bottom edge; 12px on the other tabs). */
#toast.toast { top: var(--toast-top, 12px); }

/* ---- offline: actions that need the server are visibly off until the connection is back */
html.offline .card .c-act,
html.offline #collect,
html.offline #wdBtn { opacity: .38; filter: saturate(0); cursor: not-allowed; }
html.offline .card .c-act,
html.offline #collect { pointer-events: none; }
html.offline #wdBtn { pointer-events: none; }
html.offline .collect.full { animation: none; box-shadow: none; }