/* ==========================================================
   RONIN: SLASHDOWN
   v3.1.5 — MAX BOARD / SAFE TILE ART
   FINAL gameplay-size override.
========================================================== */


/* ==========================================================
   PHONE — PORTRAIT
========================================================== */

@media(max-width:767px){

  /*
   * GAME SCREEN
   * Remove essentially all unnecessary horizontal gutter.
   */
  #gameScreen{
    width:100%!important;
    max-width:100%!important;

    padding:0!important;

    overflow-x:hidden!important;
  }


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

    margin:0!important;

    padding:
      4px
      2px
      7px!important;

    box-sizing:border-box!important;

    overflow-x:hidden!important;
  }


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

    min-width:0!important;

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

    box-sizing:border-box!important;

    display:flex!important;
    flex-direction:column!important;

    align-items:center!important;
  }


  /* ========================================================
     MAXIMUM BOARD WIDTH
     
     Uses the actual content container rather than 100vw.
     This avoids Safari's visual-viewport overflow bug.
  ======================================================== */

  #gameScreen .board-shell{
    position:relative!important;

    width:calc(100% - 2px)!important;
    max-width:calc(100% - 2px)!important;

    height:auto!important;

    aspect-ratio:1 / 1!important;

    margin:
      2px auto 0!important;

    padding:3px!important;

    box-sizing:border-box!important;

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

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

    transform:none!important;

    border-radius:17px!important;

    overflow:hidden!important;
  }


  /*
   * The board itself fills the shell completely.
   *
   * 3px outside padding provides just enough protection for
   * the outermost tile borders/effects.
   */
  #gameScreen .board{
    width:100%!important;
    height:100%!important;

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

    margin:0!important;

    padding:2px!important;

    gap:2px!important;

    box-sizing:border-box!important;

    overflow:visible!important;

    touch-action:none!important;
  }


  /* ========================================================
     TILE GEOMETRY
  ======================================================== */

  #gameScreen .tile{
    position:relative!important;

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

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

    margin:0!important;

    padding:1px!important;

    box-sizing:border-box!important;

    border-radius:9px!important;

    overflow:hidden!important;

    isolation:isolate!important;

    touch-action:none!important;
  }


  /*
   * TILE ART SAFETY
   *
   * 88% gives each asset a guaranteed internal safety zone.
   * object-fit:contain guarantees swords / masks / flames etc.
   * cannot be cropped by their image box.
   */
  #gameScreen .tile img{
    position:absolute!important;

    left:50%!important;
    top:50%!important;

    width:88%!important;
    height:88%!important;

    max-width:88%!important;
    max-height:88%!important;

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

    transform:
      translate(-50%,-50%)!important;

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

    box-sizing:border-box!important;

    pointer-events:none!important;

    z-index:2!important;
  }


  /*
   * Slightly larger visual footprint for round/compact pieces
   * while still preserving the universal no-crop rule.
   */
  #gameScreen .tile img[src*="moon"],
  #gameScreen .tile img[src*="ember"],
  #gameScreen .tile img[src*="mask"],
  #gameScreen .tile img[src*="crest"],
  #gameScreen .tile img[src*="skull"]{
    width:90%!important;
    height:90%!important;

    max-width:90%!important;
    max-height:90%!important;
  }


  /*
   * Long sword assets need additional vertical/diagonal room,
   * so keep them at 84%.
   */
  #gameScreen .tile img[src*="katana"],
  #gameScreen .tile img[src*="blade"],
  #gameScreen .tile img[src*="sword"]{
    width:84%!important;
    height:84%!important;

    max-width:84%!important;
    max-height:84%!important;
  }


  /* ========================================================
     STATUS / CURSE / CHAIN OVERLAYS
     
     These must sit INSIDE the tile rather than extend beyond
     its bounds and accidentally disappear.
  ======================================================== */

  #gameScreen .tile-status-seal{
    position:absolute!important;

    inset:2px!important;

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

    box-sizing:border-box!important;

    z-index:8!important;

    pointer-events:none!important;
  }


  #gameScreen .curse-status-seal,
  #gameScreen .chain-status-seal{
    overflow:hidden!important;
  }


  /* ========================================================
     BOOST / OBJECTIVE HUD
     Prevent them from generating horizontal page width.
  ======================================================== */

  #gameScreen .objective-bar,
  #gameScreen #roninBoostBar,
  #gameScreen .boost-buttons,
  #gameScreen .legend{
    width:100%!important;
    max-width:100%!important;

    box-sizing:border-box!important;
  }


  #gameScreen #roninBoostBar{
    overflow:hidden!important;
  }


  #gameScreen .boost-buttons{
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }


  /* Legend remains below board without reducing board width. */

  #gameScreen .legend{
    margin:2px 0 0!important;

    padding:
      4px 2px!important;

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

}


/* ==========================================================
   VERY SMALL PHONE
========================================================== */

@media(max-width:390px){

  #gameScreen .battle-layout{
    padding-left:1px!important;
    padding-right:1px!important;
  }

  #gameScreen .board-shell{
    width:100%!important;
    max-width:100%!important;

    padding:3px!important;
  }

  #gameScreen .board{
    gap:2px!important;
  }

  #gameScreen .tile img{
    width:87%!important;
    height:87%!important;

    max-width:87%!important;
    max-height:87%!important;
  }

}


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

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

  /*
   * Tablet board should also push toward the limit of its
   * dedicated gameplay region without touching the side rail.
   */
  #gameScreen .board-column{
    min-width:0!important;

    padding:0!important;

    display:flex!important;

    flex-direction:column!important;

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


  #gameScreen .board-shell{
    width:
      min(
        calc(100% - 4px),
        720px,
        calc(
          100dvh -
          var(--app-header) -
          var(--app-dock) -
          135px
        )
      )!important;

    max-width:720px!important;

    height:auto!important;

    aspect-ratio:1 / 1!important;

    margin:auto!important;

    padding:5px!important;

    box-sizing:border-box!important;

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

    transform:none!important;

    overflow:hidden!important;
  }


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

    padding:2px!important;

    gap:3px!important;

    box-sizing:border-box!important;
  }


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

    padding:2px!important;

    overflow:hidden!important;

    box-sizing:border-box!important;
  }


  #gameScreen .tile img{
    position:absolute!important;

    left:50%!important;
    top:50%!important;

    width:89%!important;
    height:89%!important;

    max-width:89%!important;
    max-height:89%!important;

    transform:
      translate(-50%,-50%)!important;

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

    pointer-events:none!important;
  }

}


/* ==========================================================
   PHONE LANDSCAPE
========================================================== */

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

  #gameScreen .board-shell{
    width:
      min(
        calc(100vh - 120px),
        66vw
      )!important;

    max-width:none!important;

    height:auto!important;

    aspect-ratio:1/1!important;

    padding:3px!important;
  }


  #gameScreen .board{
    padding:2px!important;

    gap:2px!important;
  }

}