/* BraiZone loading screen. Loaded before every other stylesheet, which sit after the splash in <body>: the browser
   paints this screen without waiting for the app's styles, and the app's scripts still wait for all of them. */
html:has(> body > #boot-splash) { background: #09111f; }
/* ---------- Loading screen (first load only; lib/boot-splash.js) ----------
   Always BraiZone night blue (#09111f = manifest background_color, so the Android launch screen hands over without a
   seam), in every theme. Light runs along a glass frame and the official owl breathes. Composite-only motion
   (transform/opacity) on small layers; the owl image itself never gets filters or masks. It leaves on the app's real
   first render, never on a timer. */
.boot-splash { --boot-blue: #09111f; --boot-light: #4fb8ff; --boot-cyan: #8fe3ff; --boot-loop: 5.6s; --boot-owl: clamp(120px, 28vmin, 200px);
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; color-scheme: dark;
  background: radial-gradient(ellipse 70% 55% at 50% 46%, #0d1d36 0%, var(--boot-blue) 72%); transition: opacity 240ms cubic-bezier(.23, 1, .32, 1); }
.boot-splash.is-done { opacity: 0; pointer-events: none; }
/* Glass frame: static rim, inner light and a faint reflection, painted once. */
.boot-glass { position: absolute; inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  border: 1px solid rgba(124, 196, 255, .26); border-radius: 30px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .05), transparent 26%, transparent 74%, rgba(79, 184, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), inset 0 0 56px rgba(79, 184, 255, .11), 0 0 36px rgba(79, 184, 255, .07);
  animation: boot-fade 520ms cubic-bezier(.23, 1, .32, 1) both; }
/* Light along each straight edge: a short comet on its own small layer. Top then right, bottom then left: two lights
   circulating around the perimeter, each edge active for half of the loop. Bottom and left are the top and right
   strips turned 180°, so they run the other way. */
.boot-edge { position: absolute; overflow: hidden; pointer-events: none; }
.boot-edge.is-top, .boot-edge.is-bottom { left: 30px; right: 30px; height: 24px; }
.boot-edge.is-top { top: -13px; }
.boot-edge.is-bottom { bottom: -13px; transform: rotate(180deg); }
.boot-edge.is-right, .boot-edge.is-left { top: 30px; bottom: 30px; width: 24px; }
.boot-edge.is-right { right: -13px; }
.boot-edge.is-left { left: -13px; transform: rotate(180deg); }
.boot-edge > i { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.boot-edge > i::before, .boot-edge > i::after { content: ""; position: absolute; }
.is-top > i::before, .is-bottom > i::before { right: 0; top: 50%; width: min(220px, 40%); height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(79, 184, 255, .6) 50%, var(--boot-cyan) 84%, #fff 93%, transparent); }
.is-top > i::after, .is-bottom > i::after { right: 0; top: 0; width: min(220px, 40%); height: 100%;
  background: radial-gradient(ellipse 50% 50% at 80% 50%, rgba(79, 184, 255, .6), transparent 72%); }
.is-right > i::before, .is-left > i::before { bottom: 0; left: 50%; height: min(220px, 30%); width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, rgba(79, 184, 255, .6) 50%, var(--boot-cyan) 84%, #fff 93%, transparent); }
.is-right > i::after, .is-left > i::after { bottom: 0; left: 0; height: min(220px, 30%); width: 100%;
  background: radial-gradient(ellipse 50% 50% at 50% 80%, rgba(79, 184, 255, .6), transparent 72%); }
.is-top > i, .is-bottom > i { animation: boot-run-x var(--boot-loop) linear infinite; }
.is-right > i, .is-left > i { animation: boot-run-y var(--boot-loop) linear infinite calc(var(--boot-loop) * -.5); }
/* The owl: official mark (transparent extraction of PR #35), breathing between 1 and 1.045 with its light. */
.boot-owl { position: relative; width: var(--boot-owl); aspect-ratio: 1; }
/* The owl fades in when its file has arrived (lib/boot-splash.js sets data-owl="wait" until then): no pop-in. */
.boot-splash[data-owl="wait"] .boot-owl { opacity: 0; }
.boot-splash:not([data-owl="wait"]) .boot-owl { animation: boot-owl-in 420ms cubic-bezier(.23, 1, .32, 1) both; }
.boot-owl-glow { position: absolute; inset: -26%; border-radius: 50%; opacity: .5;
  background: radial-gradient(closest-side, rgba(79, 184, 255, .34), rgba(58, 120, 255, .12) 58%, transparent); }
.boot-splash-logo { position: relative; display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) .boot-splash-logo { animation: boot-breathe 1.1s cubic-bezier(.45, 0, .55, 1) 420ms infinite alternate; }
  html:not([data-motion="reduced"]) .boot-owl-glow { animation: boot-glow 1.1s cubic-bezier(.45, 0, .55, 1) 420ms infinite alternate; }
}
/* State line: hidden while loading normally; appears only for a real slow, offline or failed load. */
.boot-splash-status { position: absolute; left: 50%; top: calc(50% + var(--boot-owl) / 2 + 28px); width: min(340px, calc(100% - 48px)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; margin: 0; text-align: center; font-size: 14px; line-height: 1.45; color: rgba(222, 236, 255, .78);
  opacity: 0; transition: opacity 240ms cubic-bezier(.23, 1, .32, 1); }
.boot-splash[data-state] .boot-splash-status { opacity: 1; }
.boot-splash-status strong { color: #f3f8ff; font-size: 16px; font-weight: 600; }
.boot-splash-retry { margin-top: 10px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
  color: #04111f; background: var(--boot-light); }
.boot-splash-retry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.boot-splash[data-state="error"] .boot-edge > i { animation-play-state: paused; opacity: 0; }
.boot-splash[data-state="error"] .boot-splash-logo, .boot-splash[data-state="error"] .boot-owl-glow { animation: none; }
@keyframes boot-fade { from { opacity: 0; } }
@keyframes boot-owl-in { from { opacity: 0; transform: scale(.96); } }
@keyframes boot-breathe { to { transform: scale(1.045); } }
@keyframes boot-glow { to { opacity: .95; } }
@keyframes boot-run-x { 0% { transform: translateX(-100%); opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 50%, 100% { transform: translateX(min(220px, 40%)); opacity: 0; } }
@keyframes boot-run-y { 0% { transform: translateY(-100%); opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 50%, 100% { transform: translateY(min(220px, 30%)); opacity: 0; } }
@media (min-width: 900px) { .boot-glass { border-radius: 24px; } .boot-edge.is-top, .boot-edge.is-bottom { left: 24px; right: 24px; } .boot-edge.is-right, .boot-edge.is-left { top: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .boot-splash, .boot-splash-status { transition: none; }
  .boot-glass, .boot-owl, .boot-splash-logo, .boot-owl-glow, .boot-edge > i { animation: none; }
}
html[data-motion="reduced"] :is(.boot-glass, .boot-owl, .boot-splash-logo, .boot-owl-glow, .boot-edge > i) { animation: none; }
@media (forced-colors: active) { .boot-glass { border-color: CanvasText; } .boot-edge { display: none; } }