/* =========================================================
   SMOOTH JAZZ SOLITAIRE — FINAL SCROLLING PLAY BOARD
   Full-size readable cards, natural tableau growth,
   mouse-wheel and trackpad scrolling.
========================================================= */

html,
body{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-behavior:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

body[data-screen="play"]{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
}

body[data-screen="play"] .app-shell,
body[data-screen="play"] .app-main,
body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid,
body[data-screen="play"] .game-panel{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body[data-screen="play"] .game-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  padding-bottom:32px!important;
}

/* Keep header, controls and board on the same centered frame. */

body[data-screen="play"] .board-hud,
body[data-screen="play"] .play-actions.toolbar-actions,
body[data-screen="play"] #gameBoard.game-board{
  width:min(calc(100% - 24px),1180px)!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Natural-height game board. */

body[data-screen="play"] #gameBoard.game-board{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  padding-bottom:28px!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}

/* One exact seven-column grid for the complete board. */

body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  column-gap:var(--gap,7px)!important;
  row-gap:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

body[data-screen="play"] #gameBoard .board-top{
  margin-bottom:16px!important;
}

/* Stable top piles. */

body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:5 / 7!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

/* Tableau grows to the actual tallest stack. */

body[data-screen="play"] #tableau.tableau{
  position:relative!important;
  height:var(--tableau-h,520px)!important;
  min-height:var(--tableau-h,520px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:32px!important;
  transform:none!important;
  touch-action:pan-y!important;
}

body[data-screen="play"] #tableau > .column{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--tableau-h,520px)!important;
  min-height:var(--tableau-h,520px)!important;
  max-height:none!important;
  margin:0!important;
  padding:0 0 32px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  touch-action:pan-y!important;
}

/* Consistent full-width cards in every column. */

body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:5 / 7!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  box-sizing:border-box!important;
  touch-action:none!important;

  transition:
    filter .10s ease,
    box-shadow .10s ease,
    opacity .10s ease!important;
}

body[data-screen="play"] #tableau .sjs-card img,
body[data-screen="play"] #tableau .card img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
}

/* No geometry animation or stack zipping. */

body[data-screen="play"] #gameBoard,
body[data-screen="play"] #tableau,
body[data-screen="play"] #tableau > .column,
body[data-screen="play"] #tableau .sjs-card,
body[data-screen="play"] #tableau .card{
  animation:none!important;
}

body.card-drag-active #tableau .sjs-card,
body.card-drag-active #tableau .card,
body[data-screen="play"] .dragging-source,
.sjs-drag-layer{
  transition:none!important;
}

/* Keep the final cards above the fixed bottom navigation. */

body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    64px
  )!important;
}

body[data-screen="play"] #screen-play::after{
  content:""!important;
  display:block!important;
  width:100%!important;
  height:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    44px
  )!important;
}

body[data-screen="play"] .bottom-nav{
  position:fixed!important;
  z-index:100!important;
}

/* Mouse and trackpad scrolling over non-card board areas. */

body[data-screen="play"] .game-panel,
body[data-screen="play"] #gameBoard,
body[data-screen="play"] .board-top,
body[data-screen="play"] #tableau,
body[data-screen="play"] #tableau > .column{
  overscroll-behavior:auto!important;
}

@media (max-width:720px){
  body[data-screen="play"] .board-hud,
  body[data-screen="play"] .play-actions.toolbar-actions,
  body[data-screen="play"] #gameBoard.game-board{
    width:calc(100% - 10px)!important;
  }

  body[data-screen="play"] #gameBoard .board-top{
    margin-bottom:10px!important;
  }

  body[data-screen="play"] #tableau.tableau,
  body[data-screen="play"] #tableau > .column{
    padding-bottom:24px!important;
  }
}

/* =========================================================
   FORCE MOUSE + TRACKPAD SCROLLING — 1.0.1
========================================================= */

html,
body{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}

body[data-screen="play"],
body[data-screen="play"] .app-shell,
body[data-screen="play"] .app-main,
body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid,
body[data-screen="play"] .game-panel,
body[data-screen="play"] #gameBoard,
body[data-screen="play"] #tableau{
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}

/* Allow wheel and trackpad scrolling over empty column areas. */
body[data-screen="play"] #tableau > .column{
  touch-action:pan-y!important;
  overscroll-behavior:auto!important;
}

/* Cards still support dragging. */
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card{
  touch-action:none!important;
}

/* Ensure no parent traps the wheel event. */
body[data-screen="play"] .game-panel,
body[data-screen="play"] #gameBoard,
body[data-screen="play"] .board-top,
body[data-screen="play"] #tableau{
  pointer-events:auto!important;
}

/* Keep enough space to scroll the final card above the bottom nav. */
body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    96px
  )!important;
}

body[data-screen="play"] #screen-play::after{
  content:""!important;
  display:block!important;
  height:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    72px
  )!important;
}


/* =========================================================
   REMOVE EXCESS PLAY-BOTTOM GAP — 1.0.2
========================================================= */

/* Remove accumulated bottom spacing from earlier patches. */
body[data-screen="play"] .game-panel{
  padding-bottom:12px!important;
}

body[data-screen="play"] #gameBoard.game-board{
  padding-bottom:8px!important;
  margin-bottom:0!important;
}

body[data-screen="play"] #tableau.tableau{
  padding-bottom:8px!important;
  margin-bottom:0!important;
}

body[data-screen="play"] #tableau > .column{
  padding-bottom:8px!important;
  margin-bottom:0!important;
}

/*
  Use only one modest page-bottom clearance so the final card
  can scroll above the fixed navigation.
*/
body[data-screen="play"] .app-main{
  padding-bottom:calc(
    var(--bottom-nav-h,92px) +
    var(--safe-bottom,0px) +
    16px
  )!important;
}

/* Remove the oversized artificial spacer after the Play screen. */
body[data-screen="play"] #screen-play::after{
  content:""!important;
  display:block!important;
  width:100%!important;
  height:16px!important;
}

/* Keep the fixed nav close to the content without covering cards. */
body[data-screen="play"] .bottom-nav{
  bottom:max(5px,var(--safe-bottom,0px))!important;
}

@media (max-width:720px){
  body[data-screen="play"] .game-panel{
    padding-bottom:8px!important;
  }

  body[data-screen="play"] #gameBoard.game-board,
  body[data-screen="play"] #tableau.tableau,
  body[data-screen="play"] #tableau > .column{
    padding-bottom:6px!important;
  }

  body[data-screen="play"] .app-main{
    padding-bottom:calc(
      var(--bottom-nav-h,92px) +
      var(--safe-bottom,0px) +
      10px
    )!important;
  }

  body[data-screen="play"] #screen-play::after{
    height:10px!important;
  }
}