/* ============================================================================
   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.
   ============================================================================ */
@font-face { font-family: "Saira Condensed"; src: url("ninja-loader-saira.woff") format("woff"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Noto Sans JP"; src: url("ninja-loader-kanji.woff") format("woff"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Noto Sans Mono"; src: url("ninja-loader-numbers.woff") format("woff"); font-weight: 600 700; font-display: swap; }
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; outline: none; }

/* Branded loader overlay — covers the canvas from first paint until Unity's success continuation
   hands 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 browser loader enters while Unity downloads/initializes; completion interrupts this choreography and
   uses a separate bounded exit so a fast load does not flash a different screen. */
#unity-loading-container.ninja-loading-entering {
  opacity: 0;
  animation: ninja-boot-veil 1.7s ease-out forwards;
}
#unity-loading-container.ninja-loading-entering #ninja-enso {
  animation: ninja-boot-ring 1.7s ease-out both;
}
#unity-loading-container.ninja-loading-entering #ninja-logo {
  animation: ninja-boot-mark 1.7s ease-out both;
}
#unity-loading-container.ninja-loading-entering #ninja-loadwrap {
  animation: ninja-boot-rise 1.7s ease-out both;
}
#ninja-glow.ninja-loading-veil {
  animation: ninja-boot-veil 1.7s ease-out both;
}
#unity-loading-container.ninja-loading-exiting {
  opacity: 0;
  pointer-events: none;
  transition: opacity .56s ease-out;
}
#unity-loading-container.ninja-loading-exiting #ninja-washi {
  animation: ninja-loading-exit .56s ease-out forwards;
}
@keyframes ninja-boot-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes ninja-boot-ring { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes ninja-boot-mark { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ninja-boot-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ninja-loading-exit { from { opacity: 1; } to { opacity: 0; } }

/* 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); }
}

/* Fallback branding before Unity is ready. The authored wordmark is supplied beside this stylesheet. */
#ninja-logo {
  position: relative;
  z-index: 2;
  width: 300px; max-width: 72vw;
  height: 146px;
  background-image: url('ninja_wordmark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  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(242, 232, 213, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
#ninja-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #d9a13b;
  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; }

/* Loading Screen INITIAL LOADING parity (1600x900 reference). Tiny local font
   subsets and the existing authored washi preserve first-paint typography without
   a third-party font request or a dependency on Unity's downloaded asset bundles. */
#unity-loading-container {
  background: #0c0908;
  font-family: "Saira Condensed", "Arial Narrow", sans-serif;
}
#ninja-washi {
  position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:url("ninja-loader-asanoha.png"); background-repeat:repeat; background-size:520px 520px;
}
#ninja-glow {
  width:1560px; height:1180px; margin-left:-780px; margin-top:-590px; top:44%;
  background:radial-gradient(closest-side, rgba(217,161,59,.14), rgba(217,161,59,.045) 44%, rgba(12,9,8,0) 72%);
  animation:none;
}
#unity-loading-container::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(122% 92% at 50% 42%, rgba(12,9,8,0) 38%, rgba(5,4,3,.8) 100%);
}
#ninja-kanji {
  position:absolute; left:50%; top:330px; transform:translate(-50%,-50%);
  color:rgba(200,50,43,.12); font:700 250px/1 "Noto Sans JP", sans-serif; z-index:0;
  animation:ninja-kanji-breath 4s ease-in-out infinite;
}
/* Opacity only — the build notes forbid scaling the 忍, and a scaling 250px glyph would repaint the veil. */
@keyframes ninja-kanji-breath { 0%,100% { opacity:1; } 50% { opacity:.7; } }
#ninja-enso {
  position:absolute; left:50%; top:330px; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:1;
}
#ninja-enso::before, #ninja-enso::after, #ninja-enso > div {
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid transparent;
}
#ninja-enso::before { border-color:rgba(242,232,213,.09); }
#ninja-enso::after { border-top-color:rgba(217,161,59,.62); border-right-color:rgba(217,161,59,.16); animation:ninja-spin 5.5s linear infinite; }
@keyframes ninja-spin { to { transform:rotate(360deg); } }
#ninja-logo {
  position:absolute; left:50%; top:330px; transform:translate(-50%,-50%); width:434px; height:244px; margin:0; z-index:2;
  background-size:contain;
}
#ninja-loadwrap { position:absolute; left:50%; bottom:152px; transform:translateX(-50%); width:700px; z-index:2; }
#ninja-progress-track { position:relative; width:420px; max-width:80vw; height:5px; border-radius:3px; overflow:visible; }
#ninja-progress-fill { position:relative; height:5px; border-radius:3px; box-shadow:none; transition:width .15s ease-out; overflow:hidden; }
#ninja-progress-sheen { position:absolute; top:0; bottom:0; left:-55%; width:55%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(247,201,96,.85),rgba(255,255,255,0)); animation:ninja-progress-sheen 2.6s ease-in-out infinite; }
#ninja-progress-tip { position:absolute; right:0; top:0; bottom:0; width:3px; background:#f7c960; }
#ninja-progress-bloom { position:absolute; left:0; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none; transform:translateX(0); background:radial-gradient(closest-side,rgba(247,201,96,.45),rgba(247,201,96,.12) 44%,rgba(247,201,96,0) 72%); }
@keyframes ninja-progress-sheen { from { transform:translateX(0); } to { transform:translateX(282%); } }
#ninja-stage { margin-top:26px; font:700 16px/1 "Saira Condensed", sans-serif; letter-spacing:3px; color:rgba(242,232,213,.72); }
#ninja-stage-pct { margin-left:16px; color:#d9a13b; font:700 16px/1 "Noto Sans Mono", monospace; letter-spacing:.5px; }
#ninja-stage.ninja-stage-error { color:#c8322b; }
#ninja-stage-error { max-width:calc(100% - 32px); margin:10px auto 0; color:#c8322b; text-align:center; overflow-wrap:anywhere; font:600 14px/1.4 "Saira Condensed",sans-serif; letter-spacing:1.2px; }
#ninja-stagedots { display:flex; justify-content:center; align-items:center; margin-top:15px; }
#ninja-stagedots span { margin-right:26px; color:rgba(242,232,213,.32); font:700 11px/1 "Saira Condensed", sans-serif; letter-spacing:2.2px; }
#ninja-stagedots span::before { content:""; display:inline-block; width:6px; height:6px; margin:0 9px 1px 0; background:rgba(242,232,213,.18); }
#ninja-stagedots span.active { color:rgba(242,232,213,.82); }
#ninja-stagedots span.active::before { background:#d9a13b; }
#ninja-stagedots span:last-child { margin-right:0; }
#ninja-reload { margin-top:20px; min-height:44px; padding:0 24px; border:0; background:#d9a13b; color:#16120f; font:700 17px "Saira Condensed",sans-serif; letter-spacing:1.5px; cursor:pointer; }
#ninja-reload:focus-visible { outline:2px solid #f2e8d5; outline-offset:4px; }
#ninja-reload[hidden] { display:none; }
#ninja-build { position:absolute; bottom:32px; color:rgba(242,232,213,.30); font:600 11px/1 "Noto Sans Mono", monospace; letter-spacing:.8px; }
#ninja-build { left:40px; }
#ninja-copyright { position:absolute; right:40px; bottom:32px; z-index:2; color:rgba(242,232,213,.30); font:600 11px/1 "Noto Sans Mono",monospace; letter-spacing:.8px; }
#unity-warning { z-index:10; width:min(680px, calc(100% - 32px)); box-sizing:border-box; padding:14px 18px; background:rgba(18,13,10,.96); color:#f2e8d5; border-left:4px solid #c8322b; font:600 14px/1.4 "Saira Condensed", sans-serif; }
#unity-warning > div { background:transparent !important; padding:0 !important; }
#unity-warning.ninja-startup-warning-hidden { position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

@media (max-width: 700px) {
  #ninja-enso { width:360px; height:360px; margin:-180px 0 0 -180px; top:280px; }
  #ninja-kanji { top:280px; font-size:160px; }
  #ninja-logo { top:280px; width:292px; height:164px; }
  #ninja-loadwrap { bottom:80px; width:100%; }
  #ninja-stage { font-size:13px; }
  #ninja-stage-error { font-size:12px; letter-spacing:1px; }
  #ninja-stagedots { display:flex; flex-wrap:wrap; gap:8px; max-width:calc(100% - 32px); margin-top:10px; }
  #ninja-stagedots span { margin-right:0; font-size:9px; letter-spacing:1.5px; }
  #ninja-stagedots span::before { width:5px; height:5px; margin-right:4px; }
  #ninja-build, #ninja-copyright { display:none; }
}

/* Keep branding above the progress dock in short browser windows without changing the reference canvas. */
@media (max-height: 440px) {
  #ninja-enso { top:min(145px, 34vh); width:min(280px, 64vh); height:min(280px, 64vh); margin:max(-140px, -32vh) 0 0 max(-140px, -32vh); }
  #ninja-kanji { top:min(145px, 34vh); font-size:min(135px, 31vh); }
  #ninja-logo { top:min(145px, 34vh); width:min(240px, 55vh); height:min(135px, 31vh); }
  #ninja-loadwrap { bottom:28px; }
  #ninja-build, #ninja-copyright { display:none; }
}
@media (max-width:700px) and (min-height:441px) and (max-height:620px) {
  #ninja-enso { top:200px; width:320px; height:320px; margin:-160px 0 0 -160px; }
  #ninja-kanji { top:200px; font-size:145px; }
  #ninja-logo { top:200px; width:260px; height:146px; }
  #ninja-loadwrap { bottom:48px; }
}
/* Recovery takes precedence over decoration when space is limited; long errors remain scrollable. */
@media (max-height:650px) {
  .ninja-loading-failed #ninja-enso, .ninja-loading-failed #ninja-kanji,
  .ninja-loading-failed #ninja-logo { display:none; }
  .ninja-loading-failed #ninja-loadwrap { bottom:16px; max-height:calc(100% - 32px); overflow-y:auto; }
  .ninja-loading-failed #ninja-stage-error { max-height:30vh; overflow-y:auto; flex-shrink:0; }
}

@media (prefers-reduced-motion: reduce) {
  #unity-loading-container.ninja-loading-entering,
  #unity-loading-container.ninja-loading-exiting,
  #unity-loading-container.ninja-loading-entering #ninja-enso,
  #unity-loading-container.ninja-loading-entering #ninja-logo,
  #unity-loading-container.ninja-loading-entering #ninja-loadwrap,
  #ninja-glow.ninja-loading-veil,
  #unity-loading-container.ninja-loading-exiting #ninja-washi { animation:none; transition:none; }
  #ninja-enso::after { animation:none; }
  #ninja-kanji { animation:none; }
  #ninja-progress-fill { transition:none; }
  #ninja-progress-sheen { animation:none; }
}