:root { --viewport-width: 100vw; --viewport-height: 100dvh }
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #000; overscroll-behavior: none }
#unity-container { position: fixed; inset: 0; width: var(--viewport-width); height: var(--viewport-height); display: grid; place-items: center; background: #000; touch-action: none }
#unity-canvas { display: block; width: min(var(--viewport-width), calc(var(--viewport-height) * 1.6)); height: min(var(--viewport-height), calc(var(--viewport-width) * .625)); max-width: 100%; max-height: 100%; background: #000; outline: none }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-fullscreen-button { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; background: rgba(0,0,0,.72) url('fullscreen-button.png') no-repeat center; cursor: pointer; z-index: 3 }
#unity-fullscreen-button:hover, #unity-fullscreen-button:focus-visible { background-color: rgba(0,0,0,.95); border-color: #fff }
#unity-fullscreen-button.is-active { transform: rotate(180deg) }
#unity-warning { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); width: min(90%, 720px); transform: translateX(-50%); color: #111; background: white; font: 14px/1.4 Arial, sans-serif; text-align: center; z-index: 4; display: none }
#unity-landscape-hint { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; box-sizing: border-box; color: #fff; background: rgba(0,0,0,.82); font: 600 18px/1.3 Arial, sans-serif; text-align: center; z-index: 5; pointer-events: none }
#unity-landscape-hint[hidden] { display: none }
.unity-phone-icon { width: 34px; height: 58px; border: 3px solid #fff; border-radius: 7px; transform: rotate(90deg); animation: unity-phone-rotate 1.8s ease-in-out infinite }
@keyframes unity-phone-rotate { 0%, 30% { transform: rotate(0deg) } 70%, 100% { transform: rotate(90deg) } }
html.unity-immersive, body.unity-immersive { width: var(--viewport-width); height: var(--viewport-height) }
@media (prefers-reduced-motion: reduce) { .unity-phone-icon { animation: none; transform: rotate(90deg) } }