/* Early splash styles (CSP-safe). Provide token fallbacks for first paint. */
:root { --color-bg: rgb(10,10,10); --color-accent: rgb(0,255,153); }
#splashScreen { position: fixed; inset: 0; background: var(--color-bg); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: var(--z-splash, 9999); }
#splashScreen .splash-title { color: var(--color-accent); font-weight: 800; letter-spacing: .04em; margin-bottom: 12px; text-align: center; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
#splashScreen .splash-gorilla { width: 96px; height: 96px; object-fit: contain; margin-bottom: 16px; }
#splashScreen .splash-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.22); border-top-color: var(--color-accent); animation: splash-spin 1s linear infinite; }
#splashScreen .splash-sub { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 10px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
#splashScreen.splash-hidden { opacity: 0; transition: opacity .22s ease-in-out; pointer-events: none; }