:root { --height: 100vh; --width: min(100vw, calc(var(--height) * 9 / 16)); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
html::backdrop { background: transparent; }
body { display: grid; place-items: center; font-family: Arial, sans-serif; }
#unity-shell { position: relative; width: var(--width); height: min(var(--height), calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; overflow: hidden; background: transparent; }
#unity-canvas { display: block; width: 100%; height: 100%; outline: none; background: transparent; }
#loading-overlay { position: absolute; inset: 0; z-index: 10; color: #fff; background: transparent; opacity: 1; transition: opacity 300ms ease; }
#loading-overlay.is-closing { opacity: 0; pointer-events: none; }
#slide-viewport { position: absolute; inset: 0; overflow: hidden; }
#current-slide { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateX(0); opacity: 1; }
#current-slide.is-leaving { transform: translateX(-80px); opacity: 0; transition: transform 300ms cubic-bezier(.55,.08,.68,.53), opacity 300ms ease-in; }
#current-slide.is-entering { transform: translateX(80px); opacity: 0; }
#current-slide.is-visible { transform: translateX(0); opacity: 1; transition: transform 300ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease-out; }
#retry-loading { border: 0; border-radius: 999px; min-width: 96px; min-height: 44px; padding: 10px 22px; color: #164c66; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#loading-copy { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 1; display: grid; gap: 6px; padding: 0 7%; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
#loading-status { font-size: clamp(16px, 2.6vw, 24px); }
#loading-tip { font-size: clamp(12px, 1.8vw, 16px); }
#loading-progress { position: absolute; left: 7%; right: 7%; bottom: 9%; z-index: 1; height: 12px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
#loading-progress-fill { width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width 120ms linear; }
#loading-progress-label { position: absolute; left: 0; right: 0; bottom: 5%; z-index: 1; text-align: center; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#loading-error { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { #loading-overlay, #loading-progress-fill, #current-slide.is-leaving, #current-slide.is-visible { transition: none; } }