html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #111 }
#unity-container { position: fixed; inset: 0; width: 100%; height: 100% }
#unity-container.unity-desktop { left: 0; top: 0; transform: none }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { display: block; width: 100%; height: 100%; background: #0E0E0E }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --accent: #5ec6ff;
  --accent-rgb: 94, 198, 255;
  --accent-2: #ffcc66;
  --accent-2-rgb: 255, 204, 102;
  --panel: rgba(10, 16, 22, 0.76);
  --text: #f5f8fb;
  --muted: rgba(245, 248, 251, 0.66);
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background: #071018;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#unity-loading-bar.is-done { opacity: 0; transform: scale(1.015) }
#unity-loading-bar[data-theme="day"] {
  --accent: #2377d4;
  --accent-rgb: 35, 119, 212;
  --accent-2: #f2a13a;
  --accent-2-rgb: 242, 161, 58;
  --panel: rgba(246, 249, 252, 0.82);
  --text: #142033;
  --muted: rgba(20, 32, 51, 0.64);
  background: #dfeaf5;
}
#loading-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(var(--accent-rgb), 0.42), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
}
#loading-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.86fr) minmax(280px, 1fr);
  gap: 42px;
  align-items: center;
  padding: clamp(26px, 5vw, 72px);
  box-sizing: border-box;
  background: linear-gradient(90deg, var(--panel), rgba(0, 0, 0, 0.12));
}
#loading-copy { min-width: 0 }
#loading-kicker {
  margin-bottom: 12px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
#loading-title {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 800;
  line-height: 0.98;
}
#loading-status {
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
}
#loading-facade {
  justify-self: end;
  width: min(42vw, 460px);
  aspect-ratio: 0.74;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.1vw, 14px);
  padding: clamp(18px, 2.4vw, 30px);
  box-sizing: border-box;
  border: 1px solid rgba(var(--accent-rgb), 0.48);
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.03)),
    rgba(2, 8, 14, 0.58);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), inset 0 0 70px rgba(255, 255, 255, 0.04);
  transform: perspective(900px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y));
  transition: transform 0.18s ease;
}
#loading-facade span {
  display: block;
  min-width: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background:
    radial-gradient(circle at 50% 28%, rgba(var(--accent-2-rgb), 0.7), transparent 36%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.34), #0a1119);
  opacity: 0.72;
  animation: loading-window 1.8s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
#loading-progress {
  position: absolute;
  left: clamp(26px, 5vw, 72px);
  right: clamp(26px, 5vw, 72px);
  bottom: clamp(78px, 9vw, 108px);
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
#loading-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.7);
  transition: width 0.2s ease;
}
#loading-controls {
  position: absolute;
  left: clamp(26px, 5vw, 72px);
  bottom: clamp(24px, 4vw, 42px);
  display: flex;
  gap: 8px;
}
.loading-control {
  min-width: 62px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font: 700 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.loading-control:hover,
.loading-control.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.28);
}
@keyframes loading-window {
  from { opacity: 0.45; transform: translateY(0) }
  to { opacity: 1; transform: translateY(-2px) }
}
@media (max-width: 720px) {
  #loading-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    align-content: center;
  }
  #loading-facade {
    justify-self: start;
    width: min(78vw, 310px);
  }
  #loading-title { font-size: 38px }
}
#unity-footer { display: none }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.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%; transform: translate(-50%); background: white; padding: 10px; display: none }