html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b1026; }
body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: Arial, Helvetica, sans-serif; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #0b1026; outline: none; touch-action: none; }

#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff;
  background: radial-gradient(ellipse at 50% 40%, #1d2a5c 0%, #0b1026 70%); }
#loading .title { display: flex; flex-direction: column; align-items: center; line-height: 1; }
#loading .vigo { font-size: clamp(54px, 14vmin, 120px); font-weight: 900; letter-spacing: .08em; color: #ffd36b; text-shadow: 0 0 18px #ffb23f99, 0 3px 0 #a86a10; }
#loading .sub { margin-top: 8px; font-size: clamp(14px, 3.4vmin, 28px); font-weight: 700; letter-spacing: .28em; color: #ff6b6b; }
#loading .bar { width: min(60vw, 360px); height: 12px; border-radius: 6px; background: #ffffff22; overflow: hidden; margin-top: 10px; }
#bar-full { width: 0%; height: 100%; background: linear-gradient(90deg, #ffb23f, #ffe08a); transition: width .2s; }
#loading-text { font-size: 15px; opacity: .85; }
#loading-hint { font-size: 13px; opacity: .6; padding: 0 16px; text-align: center; }

#rotate { display: none; position: absolute; inset: 0; z-index: 50; background: #0b1026f2; color: #fff; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 20px; padding: 0 24px; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid #ffd36b; border-radius: 10px; margin-bottom: 22px; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.mobile #rotate { display: flex; } }

#fullscreen { position: absolute; right: 6px; bottom: 6px; z-index: 20; width: 30px; height: 30px; border: 0; border-radius: 6px; background: #0008; color: #fff; font-size: 18px; line-height: 30px; padding: 0; opacity: .5; cursor: pointer; }
#fullscreen:hover { opacity: 1; }
body.mobile #fullscreen { display: none; }

#warning { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); z-index: 60; max-width: 90vw; }
#warning div { padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; color: #000; background: #ffd36b; font-size: 14px; }
#warning div.error { background: #e74c3c; color: #fff; }