/* ==========================================================
   RONIN: SLASHDOWN
   v3.1.3 — NATIVE MOBILE / TABLET EXPERIENCE

   PHONE   : <= 767px
   TABLET  : 768px — 1199px
   DESKTOP : unchanged
========================================================== */


/* ==========================================================
   SHARED MOBILE + TABLET APP FOUNDATION
========================================================== */

@media(max-width:1199px){

  :root{
    --app-header:62px;
    --app-dock:70px;
    --app-gap:10px;
    --app-pad:12px;
  }

  html,
  body{
    width:100%!important;
    max-width:100%!important;

    height:100%!important;

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

    overflow:hidden!important;

    background:#02050b!important;

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

  body{
    position:fixed!important;
    inset:0!important;

    overscroll-behavior:none!important;
  }

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

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

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

    overflow:hidden!important;

    background:
      radial-gradient(
        circle at 50% -15%,
        rgba(255,40,85,.09),
        transparent 37%
      ),
      #02050b!important;
  }


  /* ========================================================
     TOP COMMAND BAR
  ======================================================== */

  .topbar{
    position:fixed!important;

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

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

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

    margin:0!important;

    border:0!important;

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

    border-radius:0!important;

    background:
      linear-gradient(
        180deg,
        rgba(2,7,14,.99),
        rgba(3,9,17,.97)
      )!important;

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

    box-shadow:
      0 8px 30px rgba(0,0,0,.40)!important;

    z-index:20000!important;
  }

  .topbar-logo{
    width:82px!important;
    height:44px!important;

    object-fit:contain!important;
  }

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

  .top-actions{
    gap:5px!important;
  }

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

    min-width:39px!important;

    padding:0!important;

    border-radius:12px!important;

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

  #leaderboardBtn{
    display:none!important;
  }


  /* ========================================================
     MAIN APP VIEWPORT
  ======================================================== */

  #app > main{
    position:fixed!important;

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

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

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

    width:auto!important;
    height:auto!important;

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

    overflow:hidden!important;
  }


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

    inset:0!important;

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

    max-width:none!important;
    max-height:none!important;

    margin:0!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;
  }

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

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


  /* ========================================================
     BOTTOM APP DOCK
  ======================================================== */

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

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

    width:100%!important;

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

    padding:
      5px
      8px
      calc(5px + env(safe-area-inset-bottom))
      8px!important;

    margin:0!important;

    display:grid!important;

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

    gap:3px!important;

    background:
      linear-gradient(
        180deg,
        rgba(3,8,16,.98),
        rgba(1,4,9,.997)
      )!important;

    border:0!important;

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

    border-radius:0!important;

    box-shadow:
      0 -14px 38px rgba(0,0,0,.55)!important;

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

    transform:none!important;

    pointer-events:auto!important;

    z-index:25000!important;
  }

  #mobileDock button{
    height:100%!important;

    margin:0!important;

    padding:4px 2px!important;

    display:flex!important;

    flex-direction:column!important;

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

    gap:1px!important;

    border:0!important;

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

    background:transparent!important;

    color:#617c89!important;

    touch-action:manipulation!important;
  }

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

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

    line-height:10px!important;

    letter-spacing:.15em!important;

    font-weight:900!important;
  }

  #mobileDock button.active{
    color:#76f6ff!important;

    background:
      radial-gradient(
        ellipse at 50% 100%,
        rgba(255,39,102,.22),
        transparent 70%
      )!important;

    box-shadow:
      inset 0 -3px 0 #c92862!important;

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


  /* ========================================================
     GENERIC MOBILE APP HEADINGS
  ======================================================== */

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

    top:0!important;

    z-index:50!important;

    min-height:64px!important;

    margin:0!important;

    padding:10px 12px!important;

    display:flex!important;

    align-items:center!important;

    gap:10px!important;

    background:
      linear-gradient(
        180deg,
        rgba(2,6,13,.995),
        rgba(2,6,13,.92)
      )!important;

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

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

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

  .back-btn{
    flex:0 0 42px!important;

    width:42px!important;
    height:42px!important;

    padding:0!important;

    border-radius:14px!important;
  }


  /* ========================================================
     ROUTE CARDS
  ======================================================== */

  .route-shell{
    max-width:none!important;

    margin:12px!important;

    padding:18px!important;

    border-radius:20px!important;
  }

  .route-hero{
    padding:8px 2px 17px!important;
  }

  .route-hero p{
    line-height:1.55!important;
  }


  /* ========================================================
     SETTINGS = NATIVE APP SHEET
  ======================================================== */

  .modal{
    position:fixed!important;

    inset:0!important;

    z-index:40000!important;

    padding:
      calc(
        var(--app-header) +
        env(safe-area-inset-top) +
        9px
      )
      8px
      calc(
        env(safe-area-inset-bottom) +
        8px
      )!important;

    display:flex!important;

    align-items:flex-start!important;
    justify-content:center!important;

    background:
      rgba(0,4,9,.68)!important;

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

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

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

    max-width:600px!important;

    max-height:100%!important;

    margin:0!important;

    overflow-y:auto!important;

    padding:20px!important;

    border-radius:22px!important;

    -webkit-overflow-scrolling:touch!important;

    box-shadow:
      0 24px 70px rgba(0,0,0,.62)!important;
  }


  /* ========================================================
     FORM CONTROLS
  ======================================================== */

  input,
  textarea,
  select,
  button{
    font-size:16px;
  }

}



/* ==========================================================
   PHONE APP
   ========================================================== */

@media(max-width:767px){

  :root{
    --app-header:61px;
    --app-dock:69px;
    --app-pad:9px;
  }


  /* ========================================================
     HOME
  ======================================================== */

  #homeScreen{
    padding:9px!important;
  }

  .hero-stage{
    width:100%!important;

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

    height:auto!important;

    margin:0!important;

    padding:18px!important;

    border-radius:23px!important;

    display:flex!important;

    align-items:flex-end!important;

    overflow:hidden!important;
  }

  .hero-copy{
    width:100%!important;

    position:relative!important;

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

    transform:none!important;

    z-index:5!important;
  }

  .hero-logo{
    width:min(78vw,320px)!important;

    max-height:145px!important;

    margin:0 0 5px!important;
  }

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

    margin:8px 0 14px!important;

    font-size:14px!important;
    line-height:1.45!important;
  }

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

    min-height:52px!important;

    margin:7px 0 0!important;

    border-radius:15px!important;
  }

  .hero-art{
    position:absolute!important;

    top:2%!important;
    right:-25%!important;

    width:105%!important;
    height:60%!important;

    object-fit:contain!important;

    opacity:.92!important;

    pointer-events:none!important;
  }

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


  /* ========================================================
     WAR MAP — PHONE
  ======================================================== */

  #levelScreen{
    padding:0!important;
  }

  .ronin-spirit-panel{
    width:auto!important;

    margin:10px!important;

    padding:14px!important;

    display:grid!important;

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

    gap:11px!important;

    border-radius:18px!important;
  }

  .spirit-copy strong{
    font-size:20px!important;
  }

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

    width:100%!important;

    display:flex!important;

    flex-wrap:wrap!important;

    gap:6px!important;
  }

  .arsenal-summary > span{
    flex:0 0 auto!important;
  }

  .arsenal-rule{
    width:100%!important;
  }

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

    display:grid!important;

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

    gap:9px!important;

    padding:10px!important;
  }

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

    margin:8px 0 0!important;

    padding:12px!important;
  }

  .level-card{
    min-height:128px!important;

    padding:14px!important;

    border-radius:18px!important;
  }

  .level-card strong{
    font-size:14px!important;

    line-height:1.2!important;
  }


  /* ========================================================
     GAME — PHONE — HIGHEST PRIORITY
  ======================================================== */

  #gameScreen{
    padding:0!important;

    overflow-y:auto!important;

    touch-action:pan-y!important;

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


  /*
   * Tiny combat header.
   * The board — not chrome — owns the phone.
   */
  .game-head{
    position:sticky!important;

    top:0!important;

    min-height:52px!important;

    width:100%!important;

    margin:0!important;

    padding:5px 7px!important;

    display:grid!important;

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

    gap:6px!important;

    align-items:center!important;

    background:
      rgba(2,7,14,.97)!important;

    border-radius:0!important;

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

    z-index:100!important;
  }

  .game-head .back-btn{
    width:36px!important;
    height:36px!important;

    min-width:36px!important;
  }

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

  .game-head .level-meta strong{
    display:block!important;

    max-width:100%!important;

    overflow:hidden!important;

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

    font-size:9px!important;
  }

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

    padding:4px 6px!important;
  }

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

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


  /*
   * Remove desktop combat sidebars entirely on phones.
   */
  .fighter-panel{
    display:none!important;
  }


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

    height:auto!important;

    min-height:0!important;

    margin:0!important;

    padding:6px!important;

    display:block!important;

    overflow:visible!important;
  }


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

    height:auto!important;

    min-width:0!important;

    display:flex!important;

    flex-direction:column!important;

    gap:6px!important;
  }


  /*
   * Mission HUD becomes one compact strip.
   */
  .objective-bar{
    width:100%!important;

    min-height:55px!important;

    margin:0!important;

    padding:0!important;

    display:grid!important;

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

    gap:6px!important;
  }

  .moves,
  .objective-copy{
    min-height:55px!important;

    padding:7px 9px!important;

    border-radius:14px!important;
  }

  .moves small,
  .objective-copy small{
    font-size:6px!important;

    letter-spacing:.14em!important;
  }

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

  .objective-copy strong{
    font-size:10px!important;
    line-height:1.2!important;
  }


  /*
   * Spirit becomes a tiny combat chip.
   */
  .combat-life-chip{
    min-width:104px!important;

    min-height:38px!important;

    padding:4px 7px 4px 29px!important;

    margin:0!important;

    border-radius:12px!important;
  }

  .combat-life-chip:before{
    left:8px!important;

    width:17px!important;
    height:17px!important;
  }

  .combat-life-chip small{
    display:none!important;
  }

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

  .combat-life-chip span{
    font-size:6px!important;
  }


  /*
   * Boosts become a native horizontal action rail.
   */
  #roninBoostBar{
    width:100%!important;

    margin:0!important;

    padding:7px 7px 6px!important;

    border-radius:14px!important;
  }

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

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

    gap:6px!important;
  }

  .boost-bar-head small{
    font-size:7px!important;

    letter-spacing:.17em!important;
  }

  .boost-bar-head span{
    display:none!important;
  }

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

    display:flex!important;

    gap:5px!important;

    overflow-x:auto!important;

    padding:5px 0 0!important;

    scroll-snap-type:x proximity!important;

    -webkit-overflow-scrolling:touch!important;

    scrollbar-width:none!important;
  }

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

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

    min-width:78px!important;

    min-height:51px!important;

    padding:6px 5px!important;

    border-radius:12px!important;

    scroll-snap-align:start!important;
  }

  .ronin-boost-btn strong{
    font-size:7px!important;
  }

  .ronin-boost-btn small{
    font-size:5px!important;
  }

  .ronin-boost-btn b{
    font-size:11px!important;
  }


  /* ========================================================
     THE BOARD
     Nearly the full phone width.
  ======================================================== */

  .board-shell{
    width:
      calc(
        100vw -
        12px -
        env(safe-area-inset-left) -
        env(safe-area-inset-right)
      )!important;

    max-width:none!important;

    height:auto!important;

    max-height:none!important;

    aspect-ratio:1/1!important;

    margin:0 auto!important;

    padding:5px!important;

    align-self:center!important;

    border-radius:17px!important;

    flex:0 0 auto!important;
  }

  .board{
    width:100%!important;

    height:100%!important;

    padding:0!important;

    gap:3px!important;

    touch-action:none!important;
  }

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

    border-radius:9px!important;

    padding:2px!important;

    touch-action:none!important;
  }

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


  .legend{
    width:100%!important;

    margin:0!important;

    padding:4px!important;

    display:flex!important;

    justify-content:center!important;

    gap:7px!important;

    overflow-x:auto!important;

    white-space:nowrap!important;

    font-size:6px!important;

    scrollbar-width:none!important;
  }


  /* ========================================================
     RANK
  ======================================================== */

  #leaderboardScreen .route-shell{
    margin:10px!important;

    padding:16px!important;
  }

  #leaderboardScreen .route-hero h1{
    font-size:29px!important;

    line-height:1!important;
  }

  #leaderboardScreen [data-period]{
    min-height:48px!important;
  }


  /* ========================================================
     LORE
  ======================================================== */

  #chronicleScreen .route-shell{
    margin:10px!important;

    padding:17px!important;
  }

  #chronicleScreen h2,
  #chronicleScreen h3{
    line-height:1.12!important;
  }

  #chronicleScreen p{
    font-size:15px!important;

    line-height:1.52!important;
  }


  /* ========================================================
     SETTINGS
  ======================================================== */

  .settings-grid{
    display:block!important;
  }

  .settings-grid label{
    margin:13px 0!important;
  }

}



/* ==========================================================
   SMALL PHONES
========================================================== */

@media(max-width:390px){

  :root{
    --app-header:58px;
    --app-dock:66px;
  }

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

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

    min-width:35px!important;
  }

  #mobileDock button span{
    font-size:20px!important;
  }

  .level-card{
    min-height:116px!important;

    padding:11px!important;
  }

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

    min-width:72px!important;
  }

}



/* ==========================================================
   TABLET / iPAD APP
   768px — 1199px
========================================================== */

@media(min-width:768px) and (max-width:1199px){

  :root{
    --app-header:74px;
    --app-dock:78px;
  }


  .topbar{
    padding:
      calc(9px + env(safe-area-inset-top))
      20px
      9px!important;
  }

  .topbar-logo{
    width:110px!important;
    height:54px!important;
  }

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

    min-width:47px!important;
  }


  #mobileDock.mobile-dock{
    max-width:720px!important;

    left:50%!important;
    right:auto!important;

    transform:translateX(-50%)!important;

    border-left:
      1px solid rgba(0,238,255,.12)!important;

    border-right:
      1px solid rgba(0,238,255,.12)!important;

    border-radius:
      22px 22px 0 0!important;
  }


  /* --------------------------------------------------------
     TABLET HOME
  -------------------------------------------------------- */

  #homeScreen{
    padding:18px!important;
  }

  .hero-stage{
    min-height:
      calc(
        100dvh -
        var(--app-header) -
        var(--app-dock) -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom) -
        36px
      )!important;

    padding:38px!important;

    border-radius:28px!important;
  }

  .hero-copy{
    max-width:52%!important;

    align-self:center!important;
  }

  .hero-logo{
    width:min(46vw,500px)!important;
  }

  .hero-copy p:not(.eyebrow){
    font-size:18px!important;

    line-height:1.55!important;
  }

  .hero-art{
    right:-5%!important;

    width:64%!important;
    height:92%!important;
  }


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

  #levelScreen{
    padding:0!important;
  }

  .ronin-spirit-panel{
    max-width:1060px!important;

    margin:18px auto!important;

    padding:19px!important;

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

  .level-map{
    width:min(1060px,100%)!important;

    margin:0 auto!important;

    padding:16px!important;

    display:grid!important;

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

    gap:13px!important;
  }

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

  .level-card{
    min-height:155px!important;

    padding:18px!important;
  }


  /* ========================================================
     TABLET GAME
     Board left, combat controls right.
  ======================================================== */

  #gameScreen{
    padding:0!important;

    overflow:hidden!important;
  }

  .game-head{
    min-height:66px!important;

    padding:8px 16px!important;
  }

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

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

    min-height:0!important;

    padding:12px!important;

    display:grid!important;

    grid-template-columns:
      minmax(0,1.55fr)
      minmax(260px,.75fr)!important;

    gap:13px!important;

    overflow:hidden!important;
  }


  /*
   * Desktop fighter panels still stay hidden.
   * Tablet gets a dedicated control rail instead.
   */
  .fighter-panel{
    display:none!important;
  }


  .board-column{
    min-width:0!important;

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

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    gap:8px!important;
  }

  .board-shell{
    width:
      min(
        100%,
        calc(
          100dvh -
          var(--app-header) -
          var(--app-dock) -
          190px
        )
      )!important;

    max-width:680px!important;

    aspect-ratio:1/1!important;

    margin:auto!important;

    padding:7px!important;

    border-radius:21px!important;
  }

  .board{
    gap:4px!important;
  }

  .tile{
    border-radius:11px!important;
  }


  /*
   * Tablet controls become a side rail.
   */
  .objective-bar{
    grid-column:2!important;

    width:100%!important;

    min-height:0!important;

    align-self:start!important;

    grid-template-columns:1fr!important;

    gap:9px!important;
  }

  #roninBoostBar{
    position:absolute!important;

    right:12px!important;

    top:150px!important;

    width:
      min(
        30vw,
        310px
      )!important;

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

    overflow-y:auto!important;

    padding:13px!important;

    border-radius:18px!important;
  }

  .boost-bar-head span{
    display:block!important;

    margin-top:4px!important;

    font-size:8px!important;
  }

  .boost-buttons{
    display:grid!important;

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

    gap:8px!important;

    overflow:visible!important;
  }

  .ronin-boost-btn{
    width:100%!important;

    min-height:65px!important;
  }

  .legend{
    font-size:8px!important;
  }


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

  .route-shell{
    width:min(960px,calc(100% - 36px))!important;

    margin:18px auto!important;

    padding:28px!important;

    border-radius:24px!important;
  }

  .route-hero h1{
    font-size:38px!important;
  }

  .route-hero p{
    font-size:18px!important;
  }

}



/* ==========================================================
   PHONE LANDSCAPE GAME MODE
========================================================== */

@media(
  max-width:1199px
)
and (orientation:landscape)
and (max-height:600px){

  :root{
    --app-header:48px;
    --app-dock:55px;
  }

  .topbar{
    padding:
      calc(3px + env(safe-area-inset-top))
      8px
      3px!important;
  }

  .topbar-logo{
    width:66px!important;
    height:38px!important;
  }

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

    min-width:32px!important;
  }

  #mobileDock button span{
    font-size:17px!important;
  }

  #mobileDock button small{
    font-size:6px!important;
  }

  #gameScreen .game-head{
    min-height:42px!important;
  }

  #gameScreen .battle-layout{
    height:auto!important;
  }

  #gameScreen .board-shell{
    width:
      min(
        62vh,
        52vw
      )!important;

    margin:0 auto!important;
  }

}