/* ==========================================================
   RONIN: SLASHDOWN — TABLET MASTER v3.3.5
   ONE authoritative iPad/tablet layout.
   Desktop + phones untouched.
   ========================================================== */

@media
(min-width:768px)
and (max-width:1366px)
and (pointer:coarse){

  :root{
    --ronin-tablet-dock:74px;
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  #gameScreen{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }

  /* ---------- HEADER ---------- */

  #gameScreen .game-head{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin:0 auto 12px!important;
    transform:none!important;
  }

  #gameScreen .combat-callout{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
  }

  /* ---------- MAIN COMBAT LAYOUT ---------- */

  #gameScreen .battle-layout{
    position:relative!important;
    inset:auto!important;
    transform:none!important;

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

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

    box-sizing:border-box!important;
    overflow:visible!important;
  }

  #gameScreen .board-column{
    position:relative!important;
    inset:auto!important;
    transform:none!important;

    min-width:0!important;
    max-width:none!important;

    box-sizing:border-box!important;
  }

  /* ---------- OBJECTIVE ---------- */

  #gameScreen .objective-bar{
    position:relative!important;
    inset:auto!important;
    transform:none!important;

    box-sizing:border-box!important;
    z-index:auto!important;
  }

  #gameScreen .objective-copy{
    position:relative!important;
    z-index:auto!important;
  }

  /* ---------- BOARD ----------
     IMPORTANT:
     We DO NOT modify .tile positioning.
     The persistent renderer remains authoritative.
     ----------------------------------------------- */

  #gameScreen .board-shell{
    position:relative!important;
    inset:auto!important;
    transform:none!important;

    box-sizing:border-box!important;
    aspect-ratio:1/1!important;

    flex:none!important;
    overflow:hidden!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

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

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

    aspect-ratio:1/1!important;
    margin:0!important;
  }

  /* ---------- BOOSTS ---------- */

  #gameScreen #roninBoostBar{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    transform:none!important;
    translate:none!important;

    box-sizing:border-box!important;
    max-height:none!important;
    overflow:visible!important;
    z-index:auto!important;
  }

  #gameScreen .boost-buttons{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
  }

  /* ---------- LEGEND ---------- */

  #gameScreen .legend{
    position:relative!important;
    inset:auto!important;
    transform:none!important;

    box-sizing:border-box!important;
  }

  /* ---------- DOCK ---------- */

  #mobileDock.mobile-dock{
    min-height:var(--ronin-tablet-dock)!important;
    height:var(--ronin-tablet-dock)!important;

    padding-bottom:
      env(safe-area-inset-bottom)!important;
  }


  /* ========================================================
     HOME — ENTER WARPATH / CHOOSE TRIAL
     ======================================================== */

  #homeScreen .hero-actions,
  #homeScreen .home-actions,
  #homeScreen .cta-row,
  #homeScreen .hero-cta{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;

    width:min(100%,360px)!important;
    max-width:360px!important;

    gap:10px!important;
    margin-top:18px!important;
  }

  #homeScreen .hero-actions button,
  #homeScreen .home-actions button,
  #homeScreen .cta-row button,
  #homeScreen .hero-cta button{
    width:100%!important;
    min-height:54px!important;

    box-sizing:border-box!important;

    margin:0!important;
    padding:0 18px!important;

    border-radius:14px!important;
  }
}


/* ==========================================================
   PORTRAIT iPAD / TABLET
   ========================================================== */

@media
(min-width:768px)
and (max-width:1366px)
and (pointer:coarse)
and (orientation:portrait){

  #gameScreen{
    --ronin-board-size:min(78vw,66vh,720px);

    padding:
      12px
      clamp(18px,3vw,32px)
      calc(
        var(--ronin-tablet-dock) +
        env(safe-area-inset-bottom) +
        28px
      )!important;
  }

  /*
   * Portrait is deliberately simple:
   *
   * header
   * objective
   * board
   * boosts
   * legend
   *
   * No CSS grid-area tricks.
   * No absolute positioning.
   */

  #gameScreen .battle-layout{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;

    gap:0!important;
  }

  #gameScreen .board-column{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;

    width:100%!important;

    order:1!important;
  }

  #gameScreen .objective-bar{
    width:var(--ronin-board-size)!important;
    max-width:720px!important;

    min-height:76px!important;

    margin:
      0 auto
      14px!important;
  }

  #gameScreen .board-shell{
    width:var(--ronin-board-size)!important;
    height:var(--ronin-board-size)!important;

    max-width:720px!important;
    max-height:720px!important;

    margin:
      0 auto
      14px!important;
  }

  /*
   * Boost bar is a sibling of the board area in the live layout.
   * It follows the board naturally instead of being overlaid.
   */
  #gameScreen #roninBoostBar{
    order:2!important;

    width:var(--ronin-board-size)!important;
    max-width:720px!important;

    margin:
      0 auto
      14px!important;

    padding:10px!important;
  }

  #gameScreen .boost-bar-head{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;

    gap:8px!important;

    margin-bottom:8px!important;
  }

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

    max-width:55%!important;
    text-align:right!important;
  }

  #gameScreen .boost-buttons{
    display:grid!important;

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

    gap:7px!important;

    width:100%!important;
    overflow:visible!important;
  }

  #gameScreen .ronin-boost-btn{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;

    padding:7px 4px!important;
  }

  #gameScreen .legend{
    width:var(--ronin-board-size)!important;
    max-width:720px!important;

    margin:
      0 auto
      12px!important;
  }

  #homeScreen .hero-actions,
  #homeScreen .home-actions,
  #homeScreen .cta-row,
  #homeScreen .hero-cta{
    width:min(42vw,350px)!important;
  }
}


/* ==========================================================
   LANDSCAPE iPAD / TABLET
   ========================================================== */

@media
(min-width:768px)
and (max-width:1366px)
and (pointer:coarse)
and (orientation:landscape){

  #gameScreen{
    --ronin-board-size:min(68vh,63vw,690px);

    padding:
      10px
      clamp(18px,2.4vw,34px)
      calc(
        var(--ronin-tablet-dock) +
        env(safe-area-inset-bottom) +
        22px
      )!important;
  }

  /*
   * Real two-column layout.
   * BOARD COLUMN + BOOST COLUMN.
   * Nothing floats or overlays.
   */

  #gameScreen .battle-layout{
    display:grid!important;

    grid-template-columns:
      minmax(0,var(--ronin-board-size))
      clamp(132px,15vw,176px)!important;

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

    gap:16px!important;
  }

  #gameScreen .board-column{
    grid-column:1!important;

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

    width:var(--ronin-board-size)!important;
    min-width:0!important;
  }

  #gameScreen .objective-bar{
    width:100%!important;
    max-width:none!important;

    min-height:70px!important;

    margin:
      0 0
      12px!important;
  }

  #gameScreen .board-shell{
    width:var(--ronin-board-size)!important;
    height:var(--ronin-board-size)!important;

    max-width:690px!important;
    max-height:690px!important;

    margin:
      0 0
      12px!important;
  }

  #gameScreen #roninBoostBar{
    grid-column:2!important;
    grid-row:1!important;

    width:100%!important;
    max-width:176px!important;

    margin:0!important;
    padding:10px!important;

    align-self:start!important;
  }

  #gameScreen .boost-bar-head{
    display:block!important;
    margin-bottom:9px!important;
  }

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

  #gameScreen .boost-buttons{
    display:flex!important;
    flex-direction:column!important;

    width:100%!important;
    gap:7px!important;
  }

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

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

    padding:6px 4px!important;
  }

  #gameScreen .legend{
    width:100%!important;

    margin:
      0 0
      10px!important;
  }

  #homeScreen .hero-actions,
  #homeScreen .home-actions,
  #homeScreen .cta-row,
  #homeScreen .hero-cta{
    width:min(31vw,350px)!important;
  }
}