:root { --ink: #f1dfe2; --accent: #e0182d; --bg: #0a0507; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; user-select: none; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- splash ---------- */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--bg); transition: opacity .35s; }
#splash.done { opacity: 0; pointer-events: none; }
.spinner { width: 40px; height: 40px; border: 5px solid rgba(255, 255, 255, .15); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }   /* also spins the reload icon */