/* Baseline Realm — Ninja Training
   Owns only Ninja scenery, actors, combat feedback and training controls.
   Shared HUD/frame geometry lives in realm-shell.css; mobile viewport geometry
   lives in realm-mobile.css. */

#ninjaPanel #realmSceneFrame.is-training-view{
  --ninja-ground:clamp(54px,9vh,104px);
  --ninja-runner-size:clamp(132px,16vw,210px);
  --ninja-enemy-size:clamp(132px,15vw,202px);
  isolation:isolate!important;
  overflow:hidden!important;
  background:#07130f!important;
}

#ninjaPanel .ninja-scene{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 52% 18%,rgba(164,201,150,.14),transparent 28%),
    linear-gradient(180deg,#17352f 0%,#0c221b 55%,#08140f 100%)!important;
  perspective:900px;
}

#ninjaPanel :is(.ninja-scene__layer,.ninja-forest-layer){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-repeat:repeat-x!important;
  background-size:auto 100%!important;
  background-position:0 bottom!important;
  transform:none!important;
  pointer-events:none!important;
  will-change:background-position;
}
#ninjaPanel :is(.ninja-scene__layer--a,.ninja-forest-layer--distant){
  z-index:0!important;
  opacity:1!important;
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/forest-distant.svg')!important;
  animation:ninjaForestDistant 72s linear infinite!important;
}
#ninjaPanel :is(.ninja-scene__layer--b,.ninja-forest-layer--middle){
  z-index:2!important;
  opacity:.86!important;
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/forest-middle.svg')!important;
  animation:ninjaForestMiddle 38s linear infinite!important;
}
#ninjaPanel .ninja-forest-layer--foreground{
  display:block!important;
  visibility:visible!important;
  z-index:10!important;
  opacity:1!important;
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/forest-foreground.svg')!important;
  animation:ninjaForestForeground 18s linear infinite!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.36));
}
@keyframes ninjaForestDistant{to{background-position:-2048px bottom}}
@keyframes ninjaForestMiddle{to{background-position:-2048px bottom}}
@keyframes ninjaForestForeground{to{background-position:-2048px bottom}}

#ninjaPanel :is(.ninja-scene__lane,.ninja-forest-ground){
  position:absolute!important;
  z-index:5!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:24%!important;
  border:0!important;
  background:
    linear-gradient(112deg,transparent 0 35%,rgba(194,166,103,.16) 44%,rgba(109,80,51,.30) 51%,rgba(194,166,103,.12) 58%,transparent 68%),
    linear-gradient(180deg,rgba(11,47,38,.08),#08251f 42%,#041713 100%)!important;
  box-shadow:inset 0 18px 28px -24px rgba(202,190,137,.28)!important;
  pointer-events:none!important;
}
#ninjaPanel :is(.ninja-scene__lane,.ninja-forest-ground)::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    radial-gradient(ellipse at 20px 18px,rgba(104,129,70,.38) 0 7px,transparent 8px),
    radial-gradient(ellipse at 77px 12px,rgba(73,103,57,.46) 0 10px,transparent 11px);
  background-size:130px 44px;
  background-repeat:repeat-x;
  animation:ninjaGroundDrift 10s linear infinite;
}
@keyframes ninjaGroundDrift{to{background-position:-130px 0}}

#ninjaPanel .ninja-scene__runner,
#ninjaPanel .ninja-scene__enemy{
  position:absolute!important;
  z-index:20!important;
  bottom:clamp(72px,9.5%,118px)!important;
  display:block!important;
  width:var(--ninja-runner-size)!important;
  height:var(--ninja-runner-size)!important;
  transform-origin:50% 88%!important;
  filter:drop-shadow(0 18px 12px rgba(0,10,8,.52))!important;
  pointer-events:none!important;
  will-change:transform,filter;
}
#ninjaPanel .ninja-scene__runner{left:13%!important;right:auto!important}
#ninjaPanel .ninja-scene__enemy{
  left:auto!important;
  right:14%!important;
  width:var(--ninja-enemy-size)!important;
  height:var(--ninja-enemy-size)!important;
}
#ninjaPanel .ninja-scene__enemy[data-enemy-kind="boss"]{
  --ninja-enemy-size:clamp(174px,20vw,270px);
  right:10%!important;
}

#ninjaPanel .ninja-runtime-sprite{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  transform:translateZ(0)!important;
  filter:drop-shadow(0 14px 9px rgba(0,0,0,.58)) drop-shadow(0 0 2px rgba(220,239,211,.32))!important;
  pointer-events:none!important;
}
#ninjaPanel .ninja-runtime-sprite--runner{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/alder-veil-run.svg')!important;
  background-size:800% 100%!important;
  animation:ninjaRuntimeRunner .88s steps(8,end) infinite!important;
}
#ninjaPanel .ninja-runtime-sprite--enemy{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/mossblade-pursuer.svg')!important;
  background-size:600% 100%!important;
  animation:ninjaRuntimeEnemy 1.05s steps(6,end) infinite!important;
}
#ninjaPanel .ninja-scene__enemy[data-enemy-kind="raider"] .ninja-runtime-sprite--enemy{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/gloam-rope-raider.svg')!important;
}
#ninjaPanel .ninja-scene__enemy[data-enemy-kind="boss"] .ninja-runtime-sprite--enemy{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/hollow-crown-warden.svg')!important;
  background-size:600% 100%!important;
}
@keyframes ninjaRuntimeRunner{to{background-position:100% 0}}
@keyframes ninjaRuntimeEnemy{to{background-position:100% 0}}

#ninjaPanel .ninja-scene__runner::after,
#ninjaPanel .ninja-scene__enemy::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:13%;
  right:13%;
  bottom:2%;
  height:12%;
  border-radius:50%;
  background:rgba(0,0,0,.42);
  filter:blur(5px);
  transform:scaleX(1.1);
}

#ninjaPanel .ninja-scene__runner.is-idle-attacking,
#ninjaPanel .ninja-scene__runner.is-dash-cut{
  z-index:21!important;
  animation:ninjaDashTravel .76s cubic-bezier(.18,.82,.2,1) 1 both;
}
#ninjaPanel .ninja-scene__runner.is-dash-cut .ninja-runtime-sprite--runner,
#ninjaPanel .ninja-scene__runner.is-idle-attacking .ninja-runtime-sprite--runner{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/alder-veil-dash.svg')!important;
  background-size:800% 100%!important;
  animation:ninjaRuntimeDashCut .76s steps(7,end) 1 both!important;
}
#ninjaPanel .ninja-scene__runner.is-dash-cut::after{
  left:46%;
  right:auto;
  bottom:19%;
  width:132%;
  height:58%;
  border-radius:48% 100% 56% 22%;
  border-top:clamp(3px,.42vw,7px) solid rgba(226,247,230,.94);
  border-right:clamp(2px,.28vw,5px) solid rgba(144,218,184,.75);
  background:radial-gradient(ellipse at 66% 30%,rgba(214,255,230,.36),transparent 58%);
  filter:drop-shadow(0 0 10px rgba(159,236,190,.82));
  opacity:0;
  transform-origin:0 80%;
  animation:ninjaSlashArc .76s ease-out 1 both;
  z-index:3;
}
#ninjaPanel .ninja-scene__runner.is-throwing{
  animation:ninjaThrowWeight .60s ease-out 1 both;
}
#ninjaPanel .ninja-scene__runner.is-throwing .ninja-runtime-sprite--runner{
  background-image:url('/systems/baseline-games-hub/games/baseline-realm/ninja-training/assets/alder-veil-throw.svg')!important;
  background-size:600% 100%!important;
  animation:ninjaRuntimeThrow .60s steps(5,end) 1 both!important;
}
@keyframes ninjaRuntimeDashCut{to{background-position:100% 0}}
@keyframes ninjaRuntimeThrow{to{background-position:100% 0}}
@keyframes ninjaDashTravel{0%{transform:translateX(0) scale(1)}18%{transform:translateX(-12%) translateY(3%) scale(.96,1.04)}52%{transform:translateX(165%) translateY(-2%) scale(1.08,.94)}68%{transform:translateX(178%) scale(1)}100%{transform:translateX(0) scale(1)}}
@keyframes ninjaSlashArc{0%,33%{opacity:0;transform:rotate(-48deg) scale(.35)}46%{opacity:1;transform:rotate(12deg) scale(1)}62%{opacity:.84;transform:rotate(42deg) scale(1.16)}80%,100%{opacity:0;transform:rotate(58deg) scale(1.28)}}
@keyframes ninjaThrowWeight{0%,100%{transform:translateX(0)}30%{transform:translateX(-4%) rotate(-2deg)}62%{transform:translateX(6%) rotate(1.2deg)}}

#ninjaPanel .ninja-scene__enemy.is-hit .ninja-runtime-sprite--enemy{
  filter:brightness(1.85) saturate(.45) sepia(.18) drop-shadow(0 10px 9px rgba(0,0,0,.52))!important;
}
#ninjaPanel .ninja-scene__enemy.is-heavy-hit .ninja-runtime-sprite--enemy{
  filter:brightness(2.2) saturate(.28) drop-shadow(0 0 18px rgba(232,255,236,.72))!important;
}
#ninjaPanel .ninja-scene__enemy.is-defeated{
  animation:ninjaEnemyDefeat .70s cubic-bezier(.2,.7,.25,1) 1 both;
}
#ninjaPanel .ninja-scene__enemy.is-defeated .ninja-runtime-sprite--enemy{
  opacity:.18!important;
  transform:translateY(24%) rotate(12deg) scale(.82)!important;
  transition:transform .55s ease,opacity .55s ease!important;
}
#ninjaPanel .ninja-scene__enemy.is-entering{
  animation:ninjaEnemyEntry 1.25s cubic-bezier(.16,.72,.2,1) both!important;
}
@keyframes ninjaEnemyDefeat{0%{opacity:1;transform:translateY(0) scale(1)}42%{opacity:1;transform:translateY(-6%) rotate(8deg) scale(.96,1.04)}100%{opacity:0;transform:translateY(34%) rotate(18deg) scale(.72)}}
@keyframes ninjaEnemyEntry{from{transform:translateX(58vw);opacity:.25}to{transform:translateX(0);opacity:1}}

#ninjaPanel .ninja-hit-flash{
  position:absolute!important;
  inset:0!important;
  z-index:22!important;
  background:radial-gradient(ellipse at 73% 58%,rgba(238,255,239,.92) 0 2%,rgba(157,233,188,.54) 3% 9%,transparent 26%)!important;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none!important;
}
#ninjaPanel .ninja-hit-flash.is-live{opacity:1!important;animation:ninjaHitFlash .27s ease-out 1}
#ninjaPanel .ninja-scene.is-dash-hit-frame::after{
  content:"";
  position:absolute;
  z-index:23;
  inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 0 54%,rgba(229,255,236,.78) 55%,rgba(132,223,173,.35) 57%,transparent 61%);
  animation:ninjaHitFrame .16s ease-out 1 both;
}
@keyframes ninjaHitFlash{0%{opacity:0}26%{opacity:1}100%{opacity:0}}
@keyframes ninjaHitFrame{0%{opacity:0;transform:translateX(-8%)}30%{opacity:1}100%{opacity:0;transform:translateX(8%)}}

#ninjaPanel .ninja-shuriken-layer{
  position:absolute!important;
  inset:0!important;
  z-index:23!important;
  pointer-events:none!important;
}
#ninjaPanel .ninja-shuriken-projectile[data-original-projectile="true"]{
  position:absolute!important;
  left:calc(13% + (var(--ninja-runner-size) * .66))!important;
  top:calc(58% + (var(--shuriken-lane) * 14px))!important;
  width:clamp(25px,3vw,38px)!important;
  height:clamp(25px,3vw,38px)!important;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 7%,#edf2e9 8% 15%,#3c4a46 16% 24%,transparent 25% 32%,#edf2e9 33% 40%,#3c4a46 41% 49%,transparent 50% 57%,#edf2e9 58% 65%,#3c4a46 66% 74%,transparent 75% 82%,#edf2e9 83% 90%,#3c4a46 91% 99%)!important;
  filter:drop-shadow(0 0 5px rgba(184,240,206,.65)) drop-shadow(0 5px 4px rgba(0,0,0,.68))!important;
  animation:ninjaOriginalShuriken .84s cubic-bezier(.17,.77,.2,1) forwards!important;
}
@keyframes ninjaOriginalShuriken{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.72)}10%{opacity:1}68%{opacity:1;transform:translate(48vw,calc(var(--shuriken-lane) * -5px)) rotate(var(--shuriken-spin)) scale(1)}83%{opacity:1;transform:translate(56vw,calc(var(--shuriken-lane) * -4px)) rotate(var(--shuriken-spin)) scale(.9)}100%{opacity:0;transform:translate(61vw,calc(var(--shuriken-lane) * -4px)) rotate(var(--shuriken-spin)) scale(.62)}}

#ninjaPanel .ninja-scene.is-boss::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 78% 48%,rgba(177,77,65,.19),transparent 28%),linear-gradient(180deg,rgba(72,22,20,.12),transparent 45%);
  animation:ninjaBossAtmosphere 3.4s ease-in-out infinite;
}
@keyframes ninjaBossAtmosphere{0%,100%{opacity:.62}50%{opacity:1}}
#ninjaPanel .ninja-scene.is-paused *,
#ninjaPanel .ninja-scene.is-paused *::before,
#ninjaPanel .ninja-scene.is-paused *::after{animation-play-state:paused!important}

#ninjaPanel .realm-training-hud{
  position:absolute!important;
  inset:var(--realm-banner-height) 0 0!important;
  z-index:50!important;
  pointer-events:none!important;
}
#ninjaPanel .realm-action-dock{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:18px!important;
  z-index:60!important;
  display:flex!important;
  justify-content:center!important;
  gap:12px!important;
  pointer-events:none!important;
}
#ninjaPanel .realm-combat-btn{
  min-width:180px!important;
  min-height:62px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 14px!important;
  border:1px solid rgba(246,213,150,.44)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#70462a,#3a2114)!important;
  color:var(--realm-cream)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 9px 18px rgba(0,0,0,.28)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
}
#ninjaPanel .realm-combat-btn:is(:hover,:focus-visible){
  border-color:var(--realm-focus)!important;
  filter:brightness(1.08);
  outline:2px solid rgba(255,217,138,.32)!important;
  outline-offset:2px!important;
}
#ninjaPanel .realm-combat-btn__icon{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
}
#ninjaPanel .realm-combat-btn__copy{display:grid!important;gap:3px!important;text-align:left!important}
#ninjaPanel .realm-combat-btn__copy strong{font-size:14px!important;color:var(--realm-cream)!important}
#ninjaPanel .realm-combat-btn__copy small{font-size:10px!important;color:#ddc7a6!important}
#ninjaPanel .realm-offline-toast{
  position:absolute!important;
  left:50%!important;
  bottom:94px!important;
  transform:translateX(-50%)!important;
  max-width:min(520px,80%)!important;
  padding:9px 13px!important;
  border-radius:10px!important;
  background:rgba(22,13,8,.88)!important;
  color:var(--realm-cream)!important;
  pointer-events:none!important;
}
#ninjaPanel .realm-offline-toast[hidden]{display:none!important}

#ninjaPanel #ninjaManualStrikeBtn,
#ninjaPanel #ninjaShurikenBtn{
  position:relative!important;
  z-index:61!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled{
  opacity:1!important;
  filter:none!important;
  color:#d7cec0!important;
  cursor:not-allowed!important;
  overflow:hidden!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 0 var(--cooldown-progress,0%)!important;
  z-index:1!important;
  display:block!important;
  border-radius:inherit!important;
  background:rgba(78,75,71,.72)!important;
  transition:left .08s linear!important;
  pointer-events:none!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled::after{content:none!important;display:none!important}
#ninjaPanel #ninjaShurikenBtn:disabled :is(.realm-combat-btn__copy,.realm-combat-btn__icon){
  position:relative!important;
  z-index:2!important;
  color:#ede4d5!important;
}


@media (max-width:960px) and (orientation:landscape){
  #ninjaPanel #realmSceneFrame.is-training-view{
    --ninja-ground:clamp(38px,8vh,70px);
    --ninja-runner-size:clamp(108px,21vh,158px);
    --ninja-enemy-size:clamp(108px,20vh,154px);
  }
  #ninjaPanel .ninja-scene__runner{left:10%!important}
  #ninjaPanel .ninja-scene__enemy{right:10%!important}
}
@media (max-width:720px){
  #ninjaPanel .ninja-scene__runner{left:6%!important}
  #ninjaPanel .ninja-scene__enemy{right:6%!important}
}

@media (prefers-reduced-motion:reduce){
  #ninjaPanel :is(.ninja-scene__layer,.ninja-forest-layer,.ninja-runtime-sprite,.ninja-scene__runner,.ninja-scene__enemy,.ninja-scene.is-boss::before),
  #ninjaPanel :is(.ninja-scene__lane,.ninja-forest-ground)::before{
    animation:none!important;
    will-change:auto!important;
  }
  #ninjaPanel .ninja-runtime-sprite{background-position:0 0!important}
  #ninjaPanel .ninja-scene__enemy.is-defeated{opacity:.35!important}
  #ninjaPanel .ninja-shuriken-projectile[data-original-projectile="true"]{animation-duration:.18s!important}
}