html.pknin-loading-scroll-lock, html.pknin-loading-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }
.ninja-loading, .ninja-loading * { box-sizing: border-box; }
.ninja-loading[hidden] { display: none; }
.ninja-loading { position: fixed; inset: 0; z-index: 200000; overflow: hidden; background: #0b2337 url('/assets/site/body.jpg') center / cover no-repeat; color: #fff0cb; font: 14px/1.7 Tahoma,Arial,sans-serif; opacity: 1; transition: opacity .35s ease; }
.ninja-loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#09213899,#10283c20 35%,#0b1c2bc9 68%,#071722); }
.ninja-loading.is-finished { opacity: 0; pointer-events: none; }
.ninja-loading .mobile-welcome-art { position: absolute; inset: 15% -20% 12%; background: url('/assets/site/branding/naruto-sasuke-rivals.png') center / contain no-repeat; filter: drop-shadow(0 10px 30px #04172588); }
.ninja-loading .mobile-welcome-brand { position: absolute; top: max(24px,env(safe-area-inset-top)); left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 2px 5px #000; }
.ninja-loading .mobile-welcome-brand img { width: min(52vw,250px); height: min(36vw,180px); object-fit: contain; filter: drop-shadow(0 5px 12px #0007); }
.ninja-loading .mobile-welcome-brand span { font-size: 12px; }
.ninja-loading .mobile-welcome-bottom { position: absolute; bottom: max(28px,env(safe-area-inset-bottom)); left: 8%; right: 8%; text-align: center; }
.ninja-loading .mobile-welcome-kicker { display: block; margin-bottom: 16px; font-size: 17px; font-weight: bold; text-shadow: 0 2px 5px #000; }
.ninja-loading .mobile-welcome-status { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 11px; color: #f2dfba; text-align: left; }
#mobile-welcome-percent { flex: none; }
.ninja-loading .mobile-welcome-track { height: 10px; padding: 2px; margin-top: 8px; border: 1px solid #d4ae66; border-radius: 20px; background: #071c2dcc; box-shadow: 0 0 12px #f4b5461a; }
:is(#mobile-welcome-fill,.game-entry-loading-fill) { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#df782b,#ffdd83); box-shadow: 0 0 10px #f7c85e88; transition: width .25s ease; }
.ninja-loading small { display: block; margin-top: 14px; color: #95afbd; font-size: 10px; letter-spacing: 1px; }
@media(orientation: landscape) { .ninja-loading .mobile-welcome-brand { width: 36%; top: 7%; } .ninja-loading .mobile-welcome-brand img { width: 160px; height: 110px; } .ninja-loading .mobile-welcome-art { inset: -10% -10% 10% 25%; } .ninja-loading .mobile-welcome-bottom { left: 8%; right: 8%; bottom: 18px; } .ninja-loading .mobile-welcome-kicker { display: none; } }
.ninja-loading.desktop-welcome .mobile-welcome-brand { width: 100%; top: 6%; }
.ninja-loading.desktop-welcome .mobile-welcome-brand img { width: 250px; height: 180px; }
.ninja-loading.desktop-welcome .mobile-welcome-art { inset: 12% 0 10%; }
.ninja-loading.desktop-welcome .mobile-welcome-bottom { width: min(640px,80%); left: 50%; right: auto; transform: translateX(-50%); bottom: 5%; }
.ninja-loading.desktop-welcome .mobile-welcome-kicker { display: block; }
.ninja-loading.desktop-welcome .mobile-welcome-status { font-size: 13px; }
@media(max-height: 550px) { .ninja-loading.desktop-welcome .mobile-welcome-brand { top: 3%; width: 32%; } .ninja-loading.desktop-welcome .mobile-welcome-brand img { width: 160px; height: 110px; } .ninja-loading.desktop-welcome .mobile-welcome-art { inset: 0 0 10% 20%; } .ninja-loading.desktop-welcome .mobile-welcome-kicker { display: none; } }
/* Keep the logo over the characters on both portrait and landscape layouts. */
.ninja-loading .mobile-welcome-brand,
.ninja-loading.desktop-welcome .mobile-welcome-brand {
  top: 53%;
  left: 50%;
  width: min(90%,480px);
  transform: translate(-50%,-50%);
  isolation: isolate;
}
.ninja-loading .mobile-welcome-brand img {
  position: relative;
  animation: welcome-logo-float 3.5s ease-in-out infinite;
  filter: drop-shadow(0 5px 12px #051b2bcc) drop-shadow(0 0 14px #ffd47566);
}
.ninja-loading .mobile-welcome-brand span { position: relative; padding: 3px 12px; border-radius: 20px; background: #09223866; color: #fff2d2; }
.ninja-loading .mobile-welcome-brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse,#ffe4a54d, #64d8f326 40%,transparent 70%);
  animation: welcome-aura 3s ease-in-out infinite;
  pointer-events: none;
}
.ninja-loading .mobile-welcome-brand::after {
  content: '';
  position: absolute;
  inset: -35px -15px;
  z-index: -1;
  background: radial-gradient(circle at 15% 30%,#ffdf81 0 2px,transparent 4px),radial-gradient(circle at 80% 20%,#bcefff 0 2px,transparent 4px),radial-gradient(circle at 30% 85%,#ffdf81 0 1px,transparent 3px),radial-gradient(circle at 85% 70%,#ffdf81 0 2px,transparent 4px),radial-gradient(circle at 55% 10%,#fff5c3 0 1px,transparent 3px);
  animation: welcome-sparks 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes welcome-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes welcome-aura { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes welcome-sparks { 0%,100% { opacity: .3; transform: translateY(9px); } 50% { opacity: 1; transform: translateY(-12px); } }
@media(max-height:550px) {
  .ninja-loading .mobile-welcome-brand, .ninja-loading.desktop-welcome .mobile-welcome-brand { top: 47%; }
  .ninja-loading .mobile-welcome-brand img, .ninja-loading.desktop-welcome .mobile-welcome-brand img { width: 180px; height: min(30vh,125px); }
  .ninja-loading .mobile-welcome-brand span { font-size: 10px; }
}
/* Phone landscape has a much shorter viewport, especially with browser bars. */
@media(orientation: landscape) {
  .ninja-loading:not(.desktop-welcome) { height: 100%; height: 100dvh; }
  .ninja-loading:not(.desktop-welcome)::before { background: linear-gradient(90deg,#09213830,#0b1c2b55 40%,#071722ed 75%); }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-art { inset: max(6px,env(safe-area-inset-top)) 42% max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background-position: center; background-size: contain; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand { top: 34%; left: 73%; width: 43%; gap: 4px; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand img { width: min(26vw,220px); height: min(37dvh,150px); }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand span { font-size: 10px; line-height: 1.5; text-align: center; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-bottom { left: 53%; right: max(22px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-status { font-size: 11px; line-height: 1.6; gap: 8px; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-status > :last-child { flex: none; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-kicker { display: none; }
  .ninja-loading:not(.desktop-welcome) small { margin-top: 8px; font-size: 9px; }
}
@media(orientation: landscape) and (max-height: 320px) {
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand { top: 28%; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand img { height: 30dvh; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-brand span { display: none; }
  .ninja-loading:not(.desktop-welcome) .mobile-welcome-bottom { bottom: max(12px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion: reduce) {
  .ninja-loading, :is(#mobile-welcome-fill,.game-entry-loading-fill) { transition: none; }
  .ninja-loading .mobile-welcome-brand img, .ninja-loading .mobile-welcome-brand::before, .ninja-loading .mobile-welcome-brand::after { animation: none; }
}