/* ==========================================================
   RONIN: SLASHDOWN
   v3.1.2 — MOBILE-FIRST APPLICATION SHELL
   ========================================================== */

:root{
  --ronin-mobile-header:64px;
  --ronin-mobile-dock:72px;
}


/* ----------------------------------------------------------
   DEVICE / VIEWPORT RESET
---------------------------------------------------------- */

html,
body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:#02050b!important;

  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  position:fixed!important;
  inset:0!important;
  touch-action:manipulation;
}

#app{
  position:fixed!important;
  inset:0!important;

  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;

  min-width:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(255,38,88,.11),
      transparent 37%
    ),
    linear-gradient(
      180deg,
      #02050b,
      #050a13 52%,
      #02050b
    )!important;
}


/* Remove desktop visual layers from phone rendering. */

.ambient,
#roninPointerFX{
  display:none!important;
}


/* ----------------------------------------------------------
   TOP COMMAND BAR
---------------------------------------------------------- */

.topbar{
  position:fixed!important;

  top:0!important;
  left:0!important;
  right:0!important;

  width:100%!important;

  height:
    calc(
      var(--ronin-mobile-header) +
      env(safe-area-inset-top)
    )!important;

  min-height:0!important;

  padding:
    calc(7px + env(safe-area-inset-top))
    max(11px,env(safe-area-inset-right))
    7px
    max(11px,env(safe-area-inset-left))!important;

  margin:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  background:
    linear-gradient(
      180deg,
      rgba(2,6,13,.99),
      rgba(3,8,16,.97)
    )!important;

  border:0!important;
  border-bottom:
    1px solid rgba(0,246,255,.13)!important;

  border-radius:0!important;

  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.36)!important;

  z-index:20000!important;
}

.topbar-logo{
  width:86px!important;
  height:46px!important;
  max-width:86px!important;
  object-fit:contain!important;
}

.brand-with-logo{
  min-width:0!important;
}

.brand-with-logo small{
  display:none!important;
}

.top-actions{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
}

.top-actions .icon-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;

  padding:0!important;

  border-radius:12px!important;

  font-size:15px!important;

  display:grid!important;
  place-items:center!important;
}

#leaderboardBtn{
  display:none!important;
}


/* ----------------------------------------------------------
   APPLICATION VIEWPORT
---------------------------------------------------------- */

#app > main{
  position:fixed!important;

  left:0!important;
  right:0!important;

  top:
    calc(
      var(--ronin-mobile-header) +
      env(safe-area-inset-top)
    )!important;

  bottom:
    calc(
      var(--ronin-mobile-dock) +
      env(safe-area-inset-bottom)
    )!important;

  width:100%!important;
  height:auto!important;

  min-width:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  z-index:10!important;
}


/* Every route occupies exactly the usable application window. */

#app > main > .screen{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  max-width:none!important;

  height:100%!important;
  max-height:none!important;
  min-height:0!important;

  margin:0!important;

  padding:
    12px
    max(12px,env(safe-area-inset-right))
    24px
    max(12px,env(safe-area-inset-left))!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  overscroll-behavior-y:contain!important;

  -webkit-overflow-scrolling:touch!important;

  scrollbar-width:none!important;

  touch-action:pan-y!important;

  z-index:1!important;
}

#app > main > .screen::-webkit-scrollbar{
  display:none!important;
}

#app > main > .screen.hidden{
  display:none!important;
}


/* ----------------------------------------------------------
   TRUE BOTTOM NAVIGATION
---------------------------------------------------------- */

#mobileDock.mobile-dock{
  position:fixed!important;

  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;

  width:100%!important;

  height:
    calc(
      var(--ronin-mobile-dock) +
      env(safe-area-inset-bottom)
    )!important;

  min-height:0!important;

  margin:0!important;

  padding:
    5px
    max(7px,env(safe-area-inset-right))
    calc(5px + env(safe-area-inset-bottom))
    max(7px,env(safe-area-inset-left))!important;

  display:grid!important;

  grid-template-columns:
    repeat(5,minmax(0,1fr))!important;

  gap:3px!important;

  align-items:stretch!important;

  background:
    linear-gradient(
      180deg,
      rgba(4,9,17,.965),
      rgba(1,4,9,.995)
    )!important;

  border:0!important;

  border-top:
    1px solid rgba(0,246,255,.17)!important;

  border-radius:0!important;

  box-shadow:
    0 -15px 40px rgba(0,0,0,.58),
    0 -1px 18px rgba(0,246,255,.05)!important;

  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;

  transform:none!important;

  opacity:1!important;

  visibility:visible!important;

  pointer-events:auto!important;

  z-index:25000!important;
}

#mobileDock button{
  width:100%!important;
  min-width:0!important;
  height:100%!important;

  margin:0!important;
  padding:3px 2px!important;

  border:0!important;
  border-radius:14px!important;

  background:transparent!important;

  color:#647f8c!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  gap:1px!important;

  pointer-events:auto!important;

  touch-action:manipulation!important;

  -webkit-tap-highlight-color:transparent!important;
}

#mobileDock button span{
  font-size:22px!important;
  line-height:22px!important;
}

#mobileDock button small{
  font-size:7px!important;
  line-height:10px!important;

  font-weight:1000!important;

  letter-spacing:.13em!important;
}

#mobileDock button.active{
  color:#77f8ff!important;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(255,42,103,.21),
      transparent 70%
    )!important;

  box-shadow:
    inset 0 -2px 0 rgba(255,53,116,.43)!important;

  text-shadow:
    0 0 13px rgba(0,246,255,.44)!important;
}


/* ----------------------------------------------------------
   HOME — MOBILE HERO
---------------------------------------------------------- */

#homeScreen{
  padding:
    10px
    max(10px,env(safe-area-inset-right))
    26px
    max(10px,env(safe-area-inset-left))!important;
}

.hero-stage{
  position:relative!important;

  width:100%!important;

  min-height:
    calc(
      100dvh -
      var(--ronin-mobile-header) -
      var(--ronin-mobile-dock) -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom) -
      20px
    )!important;

  height:auto!important;

  margin:0!important;

  padding:20px 17px!important;

  overflow:hidden!important;

  display:flex!important;
  align-items:flex-end!important;

  border:
    1px solid rgba(0,246,255,.17)!important;

  border-radius:24px!important;

  background:
    linear-gradient(
      180deg,
      rgba(1,5,12,.10),
      rgba(1,5,12,.38) 46%,
      rgba(2,5,12,.96) 82%
    ),
    url('/assets/backgrounds/red-moon-pagodas-bg.webp')
      57% center/cover no-repeat!important;

  box-shadow:
    inset 0 0 80px rgba(0,246,255,.035),
    0 18px 45px rgba(0,0,0,.35)!important;
}

.hero-stage::before{
  content:""!important;

  position:absolute!important;
  inset:0!important;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(2,5,12,.20) 53%,
      rgba(2,5,12,.96) 88%
    )!important;

  pointer-events:none!important;
}

.hero-stage::after{
  display:none!important;
}

.moon-disc{
  display:none!important;
}

.hero-art{
  position:absolute!important;

  top:1%!important;
  left:auto!important;
  right:-24%!important;
  bottom:auto!important;

  width:108%!important;
  max-width:none!important;

  height:61%!important;

  object-fit:contain!important;
  object-position:right top!important;

  opacity:.91!important;

  filter:
    drop-shadow(0 22px 30px rgba(0,0,0,.66))
    drop-shadow(0 0 22px rgba(255,44,83,.13))!important;
}

.hero-copy{
  position:relative!important;

  left:auto!important;
  right:auto!important;
  top:auto!important;

  transform:none!important;

  width:100%!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  z-index:5!important;
}

.hero-copy .eyebrow{
  margin:0 0 5px!important;

  font-size:8px!important;
  letter-spacing:.25em!important;
}

.hero-logo{
  display:block!important;

  width:min(82vw,370px)!important;
  max-width:100%!important;

  height:auto!important;
  max-height:165px!important;

  margin:0 0 7px!important;

  object-fit:contain!important;
  object-position:left center!important;
}

.hero-copy p:not(.eyebrow){
  width:100%!important;
  max-width:94%!important;

  margin:6px 0 13px!important;

  font-size:13px!important;
  line-height:1.52!important;

  color:#c7dbe4!important;
}

.hero-copy .primary-btn,
.hero-copy .secondary-btn{
  width:100%!important;

  min-height:50px!important;

  margin:7px 0 0!important;

  border-radius:15px!important;
}

.feature-strip{
  display:none!important;
}


/* ----------------------------------------------------------
   MOBILE HOME EXTRAS
---------------------------------------------------------- */

#homeScreen > #newsletterBlock,
#homeScreen > #roninCommunityBar{
  width:100%!important;

  max-width:none!important;

  margin:14px 0 0!important;
}

.newsletter-block,
.ronin-community-bar{
  border:
    1px solid rgba(0,246,255,.15)!important;

  border-radius:22px!important;

  overflow:hidden!important;

  background:
    linear-gradient(
      145deg,
      rgba(5,13,24,.97),
      rgba(7,6,17,.98)
    )!important;
}

.newsletter-inner{
  display:block!important;

  padding:20px 16px!important;
}

.newsletter-copy h2{
  font-size:27px!important;
  line-height:1!important;
}

.newsletter-copy p{
  font-size:12px!important;
  line-height:1.55!important;
}

.newsletter-form{
  display:grid!important;

  grid-template-columns:1fr!important;

  gap:10px!important;

  margin-top:15px!important;
}

.newsletter-form input{
  width:100%!important;

  min-height:52px!important;

  font-size:16px!important;
}

.newsletter-form .primary-btn{
  width:100%!important;

  min-height:52px!important;

  margin:0!important;
}

.newsletter-link-row{
  display:grid!important;

  grid-template-columns:1fr 1fr!important;

  gap:1px!important;
}

.newsletter-link-row button{
  min-height:44px!important;
}

.ronin-community-inner{
  display:block!important;

  padding:20px 16px!important;
}

.ronin-community-actions{
  display:grid!important;

  grid-template-columns:1fr 1fr!important;

  gap:8px!important;
}

.ronin-community-link{
  min-height:48px!important;

  display:grid!important;

  place-items:center!important;
}

.ronin-donation{
  display:grid!important;

  grid-template-columns:1fr auto!important;

  gap:8px!important;
}

.ronin-donation > span{
  grid-column:1/-1!important;
}

.ronin-donation code{
  min-width:0!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.site-footer{
  display:none!important;
}


/* ----------------------------------------------------------
   WAR MAP
---------------------------------------------------------- */

#levelScreen{
  padding:0!important;
}

.screen-head,
.route-head{
  position:sticky!important;

  top:0!important;

  width:100%!important;

  min-height:64px!important;

  margin:0!important;

  padding:
    9px
    11px!important;

  display:flex!important;
  align-items:center!important;

  gap:9px!important;

  background:
    linear-gradient(
      180deg,
      rgba(2,6,13,.995),
      rgba(3,8,16,.95)
    )!important;

  border-bottom:
    1px solid rgba(0,246,255,.10)!important;

  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;

  z-index:50!important;
}

.screen-head h2,
.route-head h2{
  margin:1px 0!important;

  font-size:20px!important;
}

.screen-head .eyebrow,
.route-head .eyebrow{
  font-size:7px!important;
}

.back-btn{
  width:40px!important;
  height:40px!important;

  min-width:40px!important;

  padding:0!important;
}

.level-map{
  width:100%!important;

  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  gap:9px!important;

  padding:11px 10px 28px!important;
}

.chapter-label{
  grid-column:1/-1!important;

  margin:7px 0 0!important;

  padding:9px 11px!important;
}

.level-card{
  width:100%!important;

  min-width:0!important;
  min-height:112px!important;

  padding:12px!important;

  border-radius:15px!important;
}

.level-card small{
  font-size:7px!important;
}

.level-card strong{
  margin:7px 0 14px!important;

  font-size:12px!important;
  line-height:1.15!important;
}

.level-card .stars{
  font-size:13px!important;
}


/* ----------------------------------------------------------
   SPIRIT / WAR MAP ECONOMY
---------------------------------------------------------- */

.ronin-spirit-panel{
  width:calc(100% - 20px)!important;

  margin:10px!important;

  padding:12px!important;

  display:grid!important;

  grid-template-columns:1fr auto!important;

  gap:9px!important;

  border-radius:16px!important;
}

.arsenal-summary{
  grid-column:1/-1!important;

  width:100%!important;

  overflow-x:auto!important;

  justify-content:flex-start!important;

  -webkit-overflow-scrolling:touch!important;
}


/* ----------------------------------------------------------
   GAME SCREEN
---------------------------------------------------------- */

#gameScreen{
  padding:0!important;

  overflow:hidden!important;

  touch-action:none!important;
}

.game-head{
  position:relative!important;

  top:auto!important;

  width:100%!important;

  min-height:59px!important;

  margin:0!important;

  padding:6px 8px!important;

  display:grid!important;

  grid-template-columns:
    38px minmax(0,1fr) auto!important;

  gap:6px!important;

  align-items:center!important;

  border-radius:0!important;

  border-bottom:
    1px solid rgba(0,246,255,.09)!important;

  background:#030811!important;

  z-index:15!important;
}

.game-head .level-meta{
  min-width:0!important;
}

.game-head .level-meta small{
  font-size:6px!important;
}

.game-head .level-meta strong{
  font-size:9px!important;

  overflow:hidden!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.score-box{
  min-width:70px!important;

  padding:4px 6px!important;
}

.score-box small{
  font-size:6px!important;
}

.score-box b{
  font-size:14px!important;
}

.combat-life-chip{
  min-width:115px!important;

  min-height:45px!important;

  margin:0!important;

  padding:
    6px 7px 6px 34px!important;
}

.combat-life-chip strong{
  font-size:10px!important;
}

.battle-layout{
  width:100%!important;

  height:
    calc(100% - 59px)!important;

  margin:0!important;

  padding:7px!important;

  display:block!important;

  overflow:hidden!important;
}

.fighter-panel{
  display:none!important;
}

.board-column{
  width:100%!important;
  height:100%!important;

  min-width:0!important;

  margin:0!important;

  display:grid!important;

  grid-template-rows:
    auto auto minmax(0,1fr) auto!important;

  gap:5px!important;
}

.objective-bar{
  width:100%!important;

  min-height:54px!important;

  margin:0!important;

  grid-template-columns:
    64px minmax(0,1fr)!important;

  gap:6px!important;
}

.moves,
.objective-copy{
  padding:7px!important;

  border-radius:12px!important;
}

.moves b{
  font-size:23px!important;
}

.objective-copy strong{
  font-size:9px!important;
}

#roninBoostBar{
  width:100%!important;

  margin:0!important;

  padding:7px!important;

  border-radius:12px!important;
}

.boost-bar-head{
  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  gap:8px!important;
}

.boost-bar-head span{
  max-width:62%!important;

  font-size:6px!important;
  line-height:1.2!important;

  text-align:right!important;
}

.boost-buttons{
  width:100%!important;

  display:flex!important;

  gap:5px!important;

  overflow-x:auto!important;

  padding:5px 0 1px!important;

  -webkit-overflow-scrolling:touch!important;

  scrollbar-width:none!important;
}

.boost-buttons::-webkit-scrollbar{
  display:none!important;
}

.ronin-boost-btn{
  flex:0 0 72px!important;

  min-width:72px!important;

  padding:6px 4px!important;
}

.board-shell{
  width:
    min(
      calc(100vw - 14px),
      calc(
        100dvh -
        var(--ronin-mobile-header) -
        var(--ronin-mobile-dock) -
        238px
      )
    )!important;

  max-width:100%!important;

  max-height:100%!important;

  aspect-ratio:1/1!important;

  margin:0 auto!important;

  padding:5px!important;

  align-self:center!important;
  justify-self:center!important;

  border-radius:16px!important;
}

.board{
  width:100%!important;
  height:100%!important;

  gap:3px!important;

  padding:0!important;

  touch-action:none!important;
}

.tile{
  min-width:0!important;
  min-height:0!important;

  padding:2px!important;

  border-radius:9px!important;

  touch-action:none!important;
}

.tile img{
  width:89%!important;
  height:89%!important;
}

.legend{
  width:100%!important;

  padding:2px!important;

  font-size:6px!important;

  gap:4px!important;

  overflow:hidden!important;

  white-space:nowrap!important;
}


/* ----------------------------------------------------------
   STANDARD ROUTES
---------------------------------------------------------- */

.route-screen{
  padding:0!important;
}

.route-shell{
  width:auto!important;

  margin:10px!important;

  padding:15px!important;

  border-radius:18px!important;
}

.route-hero{
  padding:7px 1px 15px!important;
}

.route-hero h1,
.route-hero h2,
.route-hero h3{
  font-size:22px!important;
}

.route-hero p{
  font-size:12px!important;
  line-height:1.55!important;
}

.profile-stats{
  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;
}


/* ----------------------------------------------------------
   ACCOUNT MENU
---------------------------------------------------------- */

.member-menu-root{
  top:
    calc(
      env(safe-area-inset-top) +
      7px
    )!important;

  right:
    max(8px,env(safe-area-inset-right))!important;
}

.member-copy{
  display:none!important;
}

.member-dropdown{
  position:fixed!important;

  top:
    calc(
      var(--ronin-mobile-header) +
      env(safe-area-inset-top) +
      3px
    )!important;

  right:
    max(8px,env(safe-area-inset-right))!important;

  width:
    min(
      320px,
      calc(100vw - 16px)
    )!important;

  max-height:
    calc(
      100dvh -
      var(--ronin-mobile-header) -
      18px
    )!important;

  overflow-y:auto!important;

  z-index:30000!important;
}


/* ----------------------------------------------------------
   AUTH
---------------------------------------------------------- */

.auth-gate{
  position:fixed!important;

  inset:0!important;

  padding:
    calc(12px + env(safe-area-inset-top))
    13px
    calc(12px + env(safe-area-inset-bottom))!important;

  overflow-y:auto!important;

  -webkit-overflow-scrolling:touch!important;

  z-index:50000!important;
}

.auth-gate.hidden{
  display:none!important;
}

.auth-panel{
  width:100%!important;
  max-width:430px!important;

  margin:auto!important;

  padding:20px 17px!important;

  border-radius:22px!important;
}

.auth-logo{
  width:min(230px,68%)!important;

  max-height:125px!important;
}

.auth-field input{
  font-size:16px!important;
}


/* ----------------------------------------------------------
   MODALS / RESULTS
---------------------------------------------------------- */

.modal{
  position:fixed!important;

  inset:0!important;

  display:flex!important;

  align-items:flex-end!important;

  padding:0!important;

  z-index:40000!important;
}

.modal.hidden{
  display:none!important;
}

.modal-card{
  width:100%!important;
  max-width:none!important;

  max-height:84dvh!important;

  margin:0!important;

  padding:
    22px
    16px
    calc(20px + env(safe-area-inset-bottom))!important;

  overflow-y:auto!important;

  border-radius:
    23px 23px 0 0!important;

  -webkit-overflow-scrolling:touch!important;
}


/* ----------------------------------------------------------
   FORMS
---------------------------------------------------------- */

.contact-form{
  grid-template-columns:1fr!important;
}

.contact-message-label,
.contact-form .primary-btn,
.contact-status{
  grid-column:1!important;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  font-size:16px!important;
}


/* ----------------------------------------------------------
   VERY SMALL PHONES
---------------------------------------------------------- */

@media(max-width:390px){

  :root{
    --ronin-mobile-header:60px;
    --ronin-mobile-dock:68px;
  }

  .topbar-logo{
    width:78px!important;
  }

  .top-actions .icon-btn{
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
  }

  .level-map{
    gap:6px!important;
    padding:8px!important;
  }

  .level-card{
    min-height:102px!important;
    padding:10px!important;
  }

  .hero-art{
    width:117%!important;
    right:-31%!important;
  }

}