/* The loader index.html draws before the app's code has arrived, so a page opened from an email
   shows a loading indicator from its very first frame. It is the app's LoadingScreen
   (app/components/ui/court-memory: .cm-loading-screen + LoaderCircle + the line under it) drawn without
   the app: keep the colours, sizes and positions identical, or the hand-over shows.
   It stays up while #root is empty (the app has not drawn yet, or draws only its own loader,
   which renders into <body>) and goes the moment the app draws a screen into #root. */
.boot-loader { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; background: #f5f5f4; color: #2d6951; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
#root:not(:empty) ~ .boot-loader { display: none; }
.boot-loader-stack { position: relative; display: grid; place-items: center; }
.boot-loader-message { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(320px, calc(100vw - 48px)); color: #626c66; font-size: 15px; line-height: 1.45; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.boot-loader svg { animation: boot-loader-spin 1s linear infinite; }
@keyframes boot-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-loader svg { animation: none; } }