/* TJK-Chess v15.1.155 — phone boards use the whole viewport; eval bars are desktop-only. */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}

  /* Vertical eval bars cost a full file of board width on a phone. */
  .analysis-eval-bar,
  .broadcast-evalbar,
  .game-review-evalbar,
  .knowledge-evalbar,
  .opp-eval-bar,
  .position-play-eval,
  .study-eval-bar,
  .training-personal-eval,
  .training-position-eval,
  [data-review-evalbar],
  [data-trainer-eval],
  [data-opp-eval-bar]{display:none!important}

  /* Remove the now-empty eval-bar track. These are the outer board shells and
     they themselves expand edge-to-edge. */
  .analysis-board-wrap,
  .broadcast-board-analysis,
  .game-review-board-row,
  .knowledge-board-with-eval,
  .knowledge-review-board-with-eval,
  .opp-board-shell,
  .study-board-shell,
  .training-personal-board-row{
    width:100vw!important;
    width:100dvw!important;
    max-width:100vw!important;
    max-width:100dvw!important;
    min-width:100vw!important;
    min-width:100dvw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    margin-left:calc(50% - 50dvw)!important;
    margin-right:calc(50% - 50dvw)!important;
    box-sizing:border-box!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .analysis-board-wrap>.analysis-board-stage,
  .game-review-board-row>.game-review-board-wrap,
  .knowledge-board-with-eval>.knowledge-board-wrap,
  .knowledge-review-board-with-eval>.knowledge-board-wrap,
  .opp-board-shell>.opp-board-stage,
  .study-board-shell>.study-board-wrap,
  .training-personal-board-row>.training-analysis-board-stage{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .broadcast-board-analysis>.broadcast-board-wrap{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important}
  .broadcast-analysis-side{grid-column:1!important}

  /* Board wrappers that do not have a separate eval-bar shell break out of
     whatever card/padding surrounds them and occupy exactly the viewport. */
  .computer-board-wrap,
  .live-board-wrap,
  .endgame-study-board-wrap,
  .knowledge-lab-board-wrap,
  .position-play-board-wrap,
  .puzzle-board-wrap,
  .training-position-board-wrap,
  .training-standard-board-stage,
  .icc-course-board,
  .icc-admin-board,
  .public-lab-board,
  .position-board{
    width:100vw!important;
    width:100dvw!important;
    max-width:100vw!important;
    max-width:100dvw!important;
    min-width:100vw!important;
    min-width:100dvw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    margin-left:calc(50% - 50dvw)!important;
    margin-right:calc(50% - 50dvw)!important;
    box-sizing:border-box!important;
  }

  /* Every actual board area remains a square after the eval bar disappears. */
  .analysis-board-stage,
  .broadcast-board-wrap,
  .computer-board-wrap,
  .live-board-wrap,
  .endgame-study-board-wrap,
  .game-review-board-wrap,
  .knowledge-board-wrap,
  .opp-board-stage,
  .opp-board-wrap,
  .position-play-board-wrap,
  .puzzle-board-wrap,
  .study-board-wrap,
  .training-analysis-board-stage,
  .training-position-board-wrap,
  .training-standard-board-stage,
  .icc-course-board,
  .icc-admin-board,
  .public-lab-board,
  .position-board{
    height:auto!important;
    aspect-ratio:1/1!important;
    box-sizing:border-box!important;
    border-radius:0!important;
  }

  .analysis-chessboard,
  .broadcast-board,
  .computer-board,
  .live-board,
  .endgame-study-board,
  .game-review-board,
  .knowledge-board,
  .position-play-board,
  .puzzle-board,
  .study-board,
  .training-analysis-board{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:1/1!important;
  }

  /* Existing play mode used viewport height to shrink the board. The phone
     requirement is viewport WIDTH, in portrait and landscape. */
  body.is-playing-game .computer-board-wrap,
  body.is-playing-game .live-board-wrap{
    width:100vw!important;
    width:100dvw!important;
    height:100vw!important;
    height:100dvw!important;
    max-width:100vw!important;
    max-width:100dvw!important;
    max-height:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    margin-left:calc(50% - 50dvw)!important;
    margin-right:calc(50% - 50dvw)!important;
  }

  .study-board-status,.study-board-navigation{width:100%!important;max-width:none!important}
}