:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #040914; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 35%, #17264a, #040914 72%); color: #eff8ff; }
#shell { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #07101e; outline: none; touch-action: none; }
#loading, #error { position: absolute; width: min(32rem, calc(100% - 3rem)); padding: 2rem; border: 1px solid #466895; background: rgba(5, 12, 27, .94); box-shadow: 0 1.5rem 5rem #0009; text-align: center; }
.brand { margin-bottom: 1.4rem; color: #ffd56a; font-weight: 900; letter-spacing: .32em; }
.track { height: .65rem; overflow: hidden; border: 1px solid #466895; background: #101a31; }
#progress { width: 0; height: 100%; background: #5de4c7; transition: width .12s linear; }
#status { margin-top: .8rem; color: #abc4df; font-size: .88rem; }
#error { display: grid; gap: 1rem; }
#error[hidden] { display: none; }
button { border: 1px solid #ffd56a; border-radius: 0; padding: .55rem .9rem; background: #111d35; color: #fff; cursor: pointer; }
footer { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .8rem; color: #9bb4ce; font-size: .72rem; }
@media (max-aspect-ratio: 4/3) { footer { left: 1rem; justify-content: space-between; } }