#startup-screen { position: fixed; inset: 0; z-index: 1000; background: #111; color: #eee; opacity: 1; transition: opacity .35s ease; animation: startupFailsafe 0s 15s forwards; }
#startup-screen.is-running { animation: none; }
#startup-screen[data-theme="light"] { background: #faf8f0; color: #17160f; }
#startup-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#startup-screen[data-theme="light"] canvas { filter: brightness(.68) saturate(1.25); }
#startup-screen img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(340px, 68vw); height: auto; opacity: 0; }
#startup-screen.still img { opacity: 1; }
#startup-screen.still canvas { display: none; }
#startup-screen button { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 10px 24px; border: 1px solid #ffffff30; border-radius: 999px; background: transparent; color: #aaa; font: 16px Arial, sans-serif; cursor: pointer; }
#startup-screen button:hover { color: #fff; border-color: #ffffff80; }
#startup-screen[data-theme="light"] button { border-color: #17160f45; color: #625d4f; }
#startup-screen[data-theme="light"] button:hover { border-color: #17160fa8; color: #17160f; }
#startup-screen button:focus-visible { outline: 2px solid #f5d752; outline-offset: 3px; }
#startup-screen.is-leaving { opacity: 0; pointer-events: none; }
@keyframes startupFailsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { #startup-screen { transition: none; } #startup-screen canvas { display: none; } #startup-screen img { opacity: 1; } }
html.reduce-motion #startup-screen { transition: none; }
html.reduce-motion #startup-screen canvas { display: none; }
html.reduce-motion #startup-screen img { opacity: 1; }