html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #182848; overflow: hidden; }
#unity-container { position: absolute; inset: 0; }
#unity-canvas { width: 100%; height: 100%; background: #182848; display: block; }
#unity-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse at center, #24386a 0%, #182848 65%); }
#unity-logo { width: min(48vw, 420px); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
#unity-progress-bar-empty { width: min(60vw, 360px); height: 14px; border-radius: 7px; background: #0e1a38; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); overflow: hidden; }
#unity-progress-bar-full { width: 0%; height: 100%; border-radius: 7px; background: linear-gradient(180deg, #ffe352, #f0921a); transition: width .15s ease-out; }
#unity-loading-text { font: 600 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #f6dfa8; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); background: white; padding: 10px; display: none; }
#unity-warning:not(:empty) { display: block; }
#unity-warning .error { color: #b00020; }
/* Landscape only on touch devices: cover the game with a rotate prompt while held upright. */
#rotate-overlay { display: none; position: absolute; inset: 0; z-index: 10; background: #182848; color: #f6dfa8; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; padding: 0 32px; font: 600 20px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
#rotate-overlay .phone { width: 52px; height: 92px; border: 4px solid #f6dfa8; border-radius: 10px; box-sizing: border-box; animation: big2-rotate 1.8s ease-in-out infinite; }
#rotate-overlay p { margin: 0; }
@keyframes big2-rotate { 0%, 25% { transform: rotate(0deg); } 65%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) { #rotate-overlay { display: flex; } }