:root { color-scheme: dark; font-family: Arial, sans-serif; background: #002633; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#game-shell { position: relative; width: 100%; height: 100%; height: 100dvh; background: #00384b; }
#unity-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, #087e91, #002633); color: #d1f3f7; }
#loading[hidden], #error[hidden] { display: none; }
h1 { margin: 0; font-size: clamp(2rem, 8vw, 5rem); letter-spacing: .08em; }
progress { width: min(70vw, 24rem); height: .65rem; accent-color: #ffab24; }
#error { position: absolute; inset: 20%; padding: 2rem; background: #002633; color: #fff; border: 1px solid #ff6b5e; border-radius: 1rem; overflow-wrap: anywhere; overflow: auto; }
#fullscreen { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff5c; border-radius: 8px; background: #002633aa; color: #fff; font-size: 28px; cursor: pointer; }
#fullscreen:disabled { visibility: hidden; }
#fullscreen:focus-visible { outline: 3px solid #ffab24; outline-offset: 3px; }
@media (max-width: 600px) { #error { inset: 12%; padding: 1rem; } }