* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #071115; }
body { color: #e4f2f0; font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; }
#unity-container { position: fixed; inset: 0; display: grid; place-items: center; background: #071115; }
#unity-canvas { display: block; max-width: 100vw; max-height: 100vh; background: #17252b; outline: none; }
#unity-loading-bar { position: fixed; left: 50%; top: 50%; width: min(420px, calc(100vw - 48px)); transform: translate(-50%, -50%); padding: 24px; border: 1px solid #277e78; border-radius: 12px; background: rgba(7, 20, 24, .96); text-align: center; }
#unity-loading-bar[hidden], #unity-warning[hidden] { display: none; }
.loading-title { margin-bottom: 14px; color: #d9f1ed; font-size: 18px; font-weight: 700; }
.loading-hint { margin-top: 10px; color: #9bb7b7; font-size: 13px; }
.progress-track { height: 8px; overflow: hidden; border-radius: 8px; background: #18343a; }
#unity-progress-bar-full { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22bda9, #61e2cc); transition: width .12s linear; }
#unity-fullscreen-button { position: fixed; right: 14px; bottom: 14px; width: 42px; height: 42px; border: 1px solid #2c9991; border-radius: 9px; background: rgba(7, 24, 28, .92); color: #8df0dc; font-size: 25px; line-height: 1; cursor: pointer; }
#unity-fullscreen-button:hover { background: #12433f; }
#unity-warning { position: fixed; z-index: 5; top: 16px; left: 50%; width: min(720px, calc(100vw - 32px)); transform: translateX(-50%); }
.warning { margin-bottom: 8px; padding: 12px 16px; border: 1px solid #d4a74b; border-radius: 8px; background: #443718; color: #fff0bf; }
.warning.error { border-color: #d65b5b; background: #511f23; color: #ffe5e5; }
@media (max-width: 640px) {
  #unity-fullscreen-button { right: 8px; bottom: 8px; width: 36px; height: 36px; }
}