:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #06111d; color: #fff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; }
#game-shell {
  width: min(960px, 100vw, calc((100vh - 32px) * 24 / 17));
  width: min(960px, 100vw, calc((100dvh - 32px) * 24 / 17));
}
#game-view { position: relative; width: 100%; aspect-ratio: 24 / 17; background: #000; }
#unity-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
nav { height: 32px; display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 12px; background: #101f30; white-space: nowrap; }
nav span { margin-right: auto; }
nav a { color: #bee8ff; }
nav button { color: #fff; background: #254b6b; border: 1px solid #6b98b8; border-radius: 3px; padding: 3px 8px; cursor: pointer; }
#loading, #warning { position: absolute; left: 5%; right: 5%; top: 45%; padding: 16px; text-align: center; background: #102538; }
#loading progress { display: block; width: 90%; margin: 10px auto 0; accent-color: #50dbff; }
#warning { background: #631e27; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
#game-shell:fullscreen { display: grid; align-content: center; justify-content: center; width: 100%; height: 100%; background: #06111d; }
#game-shell:fullscreen #game-view { width: min(100vw, calc((100vh - 32px) * 24 / 17)); width: min(100vw, calc((100dvh - 32px) * 24 / 17)); }
#game-shell:-webkit-full-screen { display: grid; align-content: center; justify-content: center; width: 100%; height: 100%; background: #06111d; }
#game-shell:-webkit-full-screen #game-view { width: min(100vw, calc((100vh - 32px) * 24 / 17)); width: min(100vw, calc((100dvh - 32px) * 24 / 17)); }
@media (max-width: 360px) { nav { gap: 6px; font-size: 10px; padding: 0 4px; } }