:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0b0812;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 20%, #302247, #0b0812 70%); }

#unity-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#unity-canvas {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  background: #171126;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#loading {
  position: absolute;
  width: min(31rem, 76vw);
  text-align: center;
  filter: drop-shadow(0 4px 16px #000a);
}

.brand { color: #ffe6a6; font-weight: 900; letter-spacing: .14em; margin-bottom: 1rem; }
.track { height: .75rem; overflow: hidden; border: 2px solid #e9c987; border-radius: 999px; background: #120e1e; }
#progress { width: 0; height: 100%; background: linear-gradient(90deg, #6de4d1, #f2bb62); transition: width .12s linear; }
#loading-label { margin-top: .7rem; color: #eee7ff; font-size: .9rem; }

#warning { position: absolute; top: 1rem; left: 50%; width: min(44rem, 90vw); transform: translateX(-50%); }
#warning > div { margin-bottom: .5rem; padding: .7rem 1rem; border-radius: .5rem; background: #5f4517ed; color: white; }
#warning > .error { background: #7b2030ed; }

#fullscreen {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid #ffffff44;
  border-radius: .65rem;
  color: white;
  background: #110d1dbb;
  cursor: pointer;
  font-size: 1.25rem;
}

@media (display-mode: fullscreen) { #fullscreen { display: none; } }