html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #2a1a10; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body { display: flex; align-items: center; justify-content: center; }
#frame { position: relative; height: 100vh; height: 100dvh; aspect-ratio: 9 / 16; max-width: 100vw; max-height: calc(100vw * 16 / 9); background: #52633C; box-shadow: 0 0 60px rgba(0,0,0,0.6); }
/* Phones taller than 9:16 use the whole screen (the UI scales by width), clear of the notch. */
@media (max-aspect-ratio: 9/16) { #frame { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; max-height: none; box-sizing: border-box; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0; background: #3C2015; } }
#unity-canvas { width: 100%; height: 100%; display: block; background: #52633C; outline: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #3C2015; color: #FFF7E1; font-family: Georgia, serif; }
#loading-logo { width: 38%; border-radius: 24%; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
#loading-title { font-size: 7vmin; margin-top: 4vmin; font-weight: bold; color: #FFF7AF; }
#loading-sub { font-size: 3.6vmin; margin-top: 1vmin; opacity: 0.8; font-style: italic; }
#bar { width: 60%; height: 2.4vmin; margin-top: 4vmin; background: rgba(255,255,255,0.15); border-radius: 2vmin; overflow: hidden; }
#bar-fill { width: 0; height: 100%; background: #E8B83A; border-radius: 2vmin; transition: width 0.2s; }
#warning { display: none; position: absolute; left: 5%; right: 5%; top: 5%; background: #B4412E; color: white; padding: 12px; border-radius: 10px; font-family: sans-serif; }