/* ============================================================================
   NinjaPvP WebGL loading screen — mirrors the in-game Boot splash ("Ink & Steel").
   Replaces Unity's default logo + plain progress bar with a branded dark screen:
   a centered yellow radial gradient, the NinjaPvP wordmark, and a gold progress bar.
   ============================================================================ */
body { padding: 0; margin: 0; background: #090A0E; }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-fullscreen-container { position: relative; width: 100%; height: 100%; }
#unity-canvas { position: absolute; width: 100%; height: 100%; background: #1F1F20; }

/* Branded loader overlay — covers the canvas from first paint until Unity reports 100%
   (index.html sets display:none at progress >= 1, handing off to the in-game Boot scene). */
#unity-loading-container {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #090A0E;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The "yellow radial gradient" glow, lifted slightly above centre like the Boot scene. */
#ninja-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 1100px; height: 1100px;
  margin-left: -550px; margin-top: -580px;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
      rgba(247, 201, 96, 0.22) 0%,
      rgba(247, 201, 96, 0.10) 36%,
      rgba(247, 201, 96, 0.03) 56%,
      rgba(247, 201, 96, 0) 70%);
  animation: ninja-glow-pulse 5s ease-in-out infinite;
}
@keyframes ninja-glow-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* NinjaPvP wordmark (1024x1024 source, scaled to fit). */
#ninja-logo {
  position: relative;
  z-index: 2;
  width: 300px; max-width: 72vw;
  height: 146px;
  background-image: url('ninja_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
  margin-bottom: 34px;
}

/* Boot-matched progress dock: faint track + gold fill with a bright glow tip. */
#ninja-loadwrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
#ninja-progress-track {
  width: 300px; max-width: 72vw;
  height: 3px;
  background-color: rgba(240, 242, 247, 0.09);
  border-radius: 3px;
  overflow: hidden;
}
#ninja-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #F7C960;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255, 216, 128, 0.7);
  transition: width 0.15s ease-out;
}
#ninja-stage {
  margin-top: 15px;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgb(140, 148, 164);
  text-transform: uppercase;
}

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; color: #000; padding: 10px; display: none; }