/* Baseline Realm mobile layout.
   This is the only file allowed to own Realm mobile viewport geometry. */
@media (max-width:1024px), (pointer:coarse){
  html[data-baseline-realm-mobile-active="true"],
  body.bl-mobile-game-mode[data-mobile-game="ninja"]{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    background:#172b1d!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .bl-homebar,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .hero,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #gamesOverviewCard,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel > .mobile-game-exit{
    display:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .bl-scroll,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] main,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #games,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel .realm-shell-card,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel .realm-shell,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel .realm-game-mount,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaGameCard,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmWindow,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame{
    position:fixed!important;
    inset:0!important;
    display:block!important;
    width:100vw!important;
    width:100dvw!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-width:100dvw!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-width:100vw!important;
    max-width:100dvw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    overflow:hidden!important;
    aspect-ratio:auto!important;
    background:#172b1d!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaPanel{
    z-index:2147483000!important;
    gap:0!important;
  }
}

@media (orientation:portrait) and (max-width:1024px){
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > :not(.realm-orientation-gate){
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > .realm-orientation-gate{
    position:fixed!important;
    inset:0!important;
    z-index:2147483647!important;
    display:grid!important;
    place-items:center!important;
    width:100vw!important;
    width:100dvw!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-width:100dvw!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-width:100vw!important;
    max-width:100dvw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:24px!important;
    visibility:visible!important;
    pointer-events:auto!important;
    color:#fff0cf!important;
    -webkit-text-fill-color:#fff0cf!important;
  }
}

@media (orientation:landscape) and (max-width:1024px){
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame{
    --realm-banner-height:76px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > .realm-orientation-gate{
    display:none!important;
  }

  /* One compact row: location, centred Coins, persistent touch controls. */
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner{
    position:absolute!important;
    inset:0 0 auto 0!important;
    z-index:50!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    grid-template-rows:76px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    margin:0!important;
    padding:
      max(6px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      6px
      max(8px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner__status{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    width:auto!important;
    max-width:100%!important;
    padding:2px 4px!important;
    overflow:hidden!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-route-meta strong{
    font-size:clamp(16px,2.8vw,22px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-route-meta span,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-top-strip__meta{
    font-size:9px!important;
    line-height:1.15!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-shared-status{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    min-width:88px!important;
    padding:2px 10px!important;
    border-top:0!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-coin-mark{
    width:22px!important;
    height:22px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-coin-copy strong{
    font-size:17px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-utility{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-fab{
    flex:0 0 62px!important;
    width:62px!important;
    min-width:62px!important;
    min-height:56px!important;
    height:56px!important;
    grid-template-rows:26px auto!important;
    gap:3px!important;
    padding:4px!important;
    border-radius:9px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-fab__icon{
    width:26px!important;
    height:26px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-fab__label{
    font-size:8px!important;
    line-height:1!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-hotkey-hint{
    display:none!important;
  }

  /* Training has one additional status column but remains a single row. */
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame.is-training-view .realm-command-banner{
    grid-template-columns:minmax(150px,1fr) auto minmax(150px,.8fr) minmax(205px,auto)!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame.is-training-view .realm-command-banner .realm-enemy-status{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    border-top:0!important;
    border-left:1px solid rgba(93,58,30,.18)!important;
    padding:2px 8px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame.is-training-view .realm-command-banner .realm-utility{
    grid-column:4!important;
  }

  /* Only the active primary surface may occupy the stage. */
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > :is(
    #ninjaScene,
    #realmBasecampScreen,
    #realmWorkshopScreen,
    #realmExplorationScreen
  ){
    position:absolute!important;
    inset:76px 0 max(0px,env(safe-area-inset-bottom)) 0!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > :is(
    #ninjaScene,
    #realmBasecampScreen,
    #realmWorkshopScreen,
    #realmExplorationScreen
  )[hidden]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > :is(
    #ninjaScene,
    #realmBasecampScreen,
    #realmWorkshopScreen,
    #realmExplorationScreen
  ):not([hidden]){
    display:block!important;
    visibility:visible!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmBasecampScreen.realm-basecamp-screen{
    inset:76px 0 max(0px,env(safe-area-inset-bottom)) 0!important;
    width:100%!important;
    background-size:100% 100%!important;
    background-position:center center!important;
  }

  /* Management is a true overlaying drawer on mobile, never a page-width layer
     underneath the Basecamp artwork. */
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-drawer{
    position:absolute!important;
    top:76px!important;
    right:0!important;
    bottom:max(0px,env(safe-area-inset-bottom))!important;
    left:auto!important;
    z-index:82!important;
    width:min(430px,86vw)!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:auto!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-drawer[hidden]{
    display:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] :is(.realm-context-action,.realm-home-action){
    top:82px!important;
    min-height:34px!important;
    padding:4px 8px!important;
    gap:5px!important;
    border-radius:9px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-context-action{right:max(8px,env(safe-area-inset-right))!important}
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-home-action{left:max(8px,env(safe-area-inset-left))!important}

  body.bl-mobile-game-mode[data-mobile-game="ninja"] :is(.realm-context-action,.realm-home-action) .realm-fab__icon{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] :is(.realm-context-action,.realm-home-action) .realm-fab__label{
    font-size:9px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-training-hud{
    position:absolute!important;
    inset:76px 0 max(0px,env(safe-area-inset-bottom)) 0!important;
    z-index:60!important;
    display:block!important;
    visibility:visible!important;
    pointer-events:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-training-hud[hidden]{
    display:none!important;
    visibility:hidden!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-action-dock{
    position:absolute!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    z-index:70!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-combat-btn,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaManualStrikeBtn,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #ninjaShurikenBtn{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    visibility:visible!important;
    opacity:1;
    pointer-events:auto!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .ninja-scene__runner,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .ninja-scene__enemy{
    position:absolute!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    top:auto!important;
    bottom:64px!important;
    z-index:20!important;
    pointer-events:none!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .ninja-scene__runner{
    left:6%!important;
    width:min(18vw,132px)!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .ninja-scene__enemy{
    right:6%!important;
    width:min(18vw,132px)!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .ninja-scene.is-boss .ninja-scene__enemy{
    width:min(21vw,154px)!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-inventory-grid{
    grid-template-columns:1fr!important;
  }
}

@media (orientation:landscape) and (max-width:720px){
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame{
    --realm-banner-height:68px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    grid-template-rows:68px!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    gap:5px!important;
    padding:5px 6px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-fab{
    flex-basis:54px!important;
    width:54px!important;
    min-width:54px!important;
    min-height:50px!important;
    height:50px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-command-banner .realm-fab__label{
    font-size:7.5px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmSceneFrame > :is(
    #ninjaScene,
    #realmBasecampScreen,
    #realmWorkshopScreen,
    #realmExplorationScreen
  ),
  body.bl-mobile-game-mode[data-mobile-game="ninja"] #realmBasecampScreen.realm-basecamp-screen,
  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-training-hud{
    top:68px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] .realm-drawer{
    top:68px!important;
  }

  body.bl-mobile-game-mode[data-mobile-game="ninja"] :is(.realm-context-action,.realm-home-action){
    top:74px!important;
  }
}