html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #FFF6E9; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #FFF6E9; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #FFF6E9; outline: none; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  background: #FFF6E9 url("loading_bg.jpg") center / cover no-repeat; transition: opacity 0.35s ease-in-out; z-index: 2; }
#loading-logo { width: min(36vh, 36vw); height: auto; }
#bar { width: min(44vw, 520px); height: 18px; border-radius: 9px; background: #E6E9EE; overflow: hidden; }
#bar-fill { width: 0; height: 100%; border-radius: 9px; background: #A9C7E3; transition: width 0.6s ease-in-out; }
#rotate { display: none; position: fixed; inset: 0; z-index: 3; background: #FFF6E9; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
#rotate .phone { width: 90px; height: 150px; border: 10px solid #4A4F5A; border-radius: 22px; transform: rotate(90deg); }
#rotate .arrow { font: 64px/1 sans-serif; color: #A9C7E3; }
#error { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 12px; background: #C9BEDF; color: #4A4F5A; font: 16px sans-serif; z-index: 4; }
@media (orientation: portrait) and (max-width: 1024px) { #rotate { display: flex; } }