* { box-sizing: border-box }
html, body { width: 100%; min-height: 100%; padding: 0; margin: 0 }
body { overflow: hidden; background: #0f1112; color: #f5f7f9; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; width: min(960px, 100vw, calc((100vh - 38px) * 1.6)); transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { display: block; background: #191a1c }
.unity-desktop #unity-canvas { width: 100% !important; height: auto !important; aspect-ratio: 8 / 5 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 40px;
  background: #17191b;
  opacity: 1;
  transition: opacity 280ms ease, visibility 280ms ease;
}
#unity-loading-bar.unity-loading-complete { opacity: 0; visibility: hidden }
.unity-loading-content { width: min(680px, 100%) }
.unity-loading-eyebrow { margin-bottom: 12px; color: #60d6c8; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: uppercase }
#unity-loading-title { margin: 0; color: #ffffff; font-size: 30px; line-height: 1.25; letter-spacing: 0 }
#unity-loading-message { max-width: 600px; min-height: 48px; margin: 12px 0 30px; color: #aeb9c4; font-size: 15px; line-height: 1.7 }
.unity-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; color: #dbe2e8; font-size: 13px }
#unity-loading-percent { color: #ffffff; font-size: 15px; font-variant-numeric: tabular-nums }
#unity-progress-bar-empty { width: 100%; height: 10px; overflow: hidden; border: 1px solid #424649; border-radius: 4px; background: #272a2c }
#unity-progress-bar-full { width: 0%; height: 100%; border-radius: 3px; background: #60d6c8; transition: width 160ms linear }
.unity-loading-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid #383c3f; border-bottom: 1px solid #383c3f }
.unity-loading-stat { min-width: 0; padding: 16px 14px }
.unity-loading-stat:first-child { padding-left: 0 }
.unity-loading-stat + .unity-loading-stat { border-left: 1px solid #383c3f }
.unity-loading-stat span, .unity-loading-stat strong { display: block }
.unity-loading-stat span { margin-bottom: 7px; color: #83909c; font-size: 12px }
.unity-loading-stat strong { min-height: 20px; color: #f4f7f9; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
#unity-loading-note { min-height: 22px; margin: 16px 0 0; color: #83909c; font-size: 12px; line-height: 1.6 }
#unity-retry-button { min-width: 112px; height: 40px; margin-top: 18px; padding: 0 20px; border: 0; border-radius: 4px; background: #60d6c8; color: #10211f; font: 700 14px/40px "Microsoft YaHei", "PingFang SC", Arial, sans-serif; cursor: pointer }
#unity-retry-button:hover { background: #7de1d6 }
#unity-retry-button:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px }
.unity-loading-error #unity-progress-bar-full { background: #f2b84b }
.unity-loading-error .unity-loading-eyebrow { color: #f2b84b }
#unity-footer { position: relative; height: 38px }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; z-index: 1200; max-width: calc(100% - 32px); transform: translate(-50%); background: white; color: #151719; padding: 10px; display: none }

@media (max-width: 720px), (max-height: 620px) {
  #unity-loading-bar { align-items: flex-start; padding: 24px }
  #unity-loading-title { font-size: 24px }
  #unity-loading-message { min-height: 0; margin: 10px 0 22px; font-size: 14px }
  .unity-loading-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .unity-loading-stat { padding: 12px }
  .unity-loading-stat:nth-child(odd) { padding-left: 0; border-left: 0 }
  .unity-loading-stat:nth-child(n+3) { border-top: 1px solid #383c3f }
}

@media (prefers-reduced-motion: reduce) {
  #unity-loading-bar, #unity-progress-bar-full { transition: none }
}
