/* Crosslink V133 — one scrolling portrait column on mobile.
   Desktop layout remains unchanged. No orientation lock or fullscreen request. */
@media (max-width: 800px) {
  html, body { max-width:100%; overflow-x:hidden!important; }
  body.board-view { overflow-x:hidden!important; overflow-y:auto!important; height:auto!important; min-height:100dvh!important; }
  body.board-view .app { max-width:100%!important; overflow:visible!important; height:auto!important; }
  body.board-view .board-wrap,
  body.board-view:not(.classic-mode) .board-wrap,
  body.board-view.pawn-status-hidden .board-wrap,
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap {
    --board-side:min(calc(100vw - 20px), 560px)!important;
    position:relative!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-start!important;gap:12px!important;
    width:100%!important;max-width:100vw!important;min-width:0!important;
    min-height:100dvh!important;height:auto!important;max-height:none!important;
    overflow:visible!important;
    padding:12px 10px max(24px, env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    grid-template-columns:none!important;grid-template-rows:none!important;
  }
  body.board-view canvas#board,
  body.classic-mode.board-view canvas#board,
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) canvas#board,
  body.board-view.pawn-status-hidden canvas#board {
    position:relative!important;inset:auto!important;
    order:0!important;display:block!important;flex:0 0 auto!important;
    width:var(--board-side)!important;height:var(--board-side)!important;
    max-width:calc(100vw - 20px)!important;max-height:calc(100vw - 20px)!important;
    margin:0 auto!important;
  }
  /* Opening-roll instructions flow after board, not on top of it. */
  body.board-view #rollToStartOverlay {
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;transform:none!important;
    order:1!important;flex:0 0 auto!important;align-self:center!important;
    box-sizing:border-box!important;width:100%!important;max-width:560px!important;
    min-width:0!important;max-height:none!important;overflow:visible!important;
    margin:0 auto!important;padding:14px!important;
  }
  body.board-view #rollToStartOverlay:not(.show) { display:none!important; }
  body.board-view #rollToStartOverlay .rts-title {font-size:clamp(21px,6vw,30px)!important;line-height:1.15!important;}
  body.board-view #rollToStartOverlay .rts-message {
    font-size:clamp(15px,4.5vw,22px)!important;line-height:1.3!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  body.board-view #rollToStartOverlay .rts-row {font-size:clamp(12px,3.6vw,16px)!important;gap:6px!important;min-width:0!important;}
  body.board-view #rollToStartOverlay .rts-name,
  body.board-view #rollToStartOverlay .rts-dice {min-width:0!important;overflow-wrap:anywhere!important;}
  body.board-view #rollToStartOverlay .rts-roll button {min-height:48px!important;touch-action:manipulation!important;}
  /* Menu and Options appear below the board as a normal two-button row. */
  body.board-view .board-view-tools,
  body.board-view #crosslinkTopControls {
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;transform:none!important;
    order:2!important;width:100%!important;max-width:560px!important;
    display:flex!important;flex-direction:row!important;align-items:stretch!important;
    justify-content:center!important;gap:10px!important;flex:0 0 auto!important;
    margin:0 auto!important;padding:0!important;pointer-events:auto!important;
  }
  body.board-view #crosslinkTopControls button {
    position:static!important;flex:1 1 0!important;min-width:0!important;
    min-height:46px!important;margin:0!important;touch-action:manipulation!important;
  }
  body.board-view #boardOptionsPanel {
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;transform:none!important;
    order:3!important;width:100%!important;max-width:560px!important;
    max-height:none!important;overflow:visible!important;align-self:center!important;
    margin:0 auto!important;box-sizing:border-box!important;
  }
  body.board-view #boardOptionsPanel:not(.show) {display:none!important;}
  body.board-view .playbar,
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar {
    position:relative!important;inset:auto!important;transform:none!important;
    order:4!important;width:100%!important;max-width:560px!important;
    flex:0 0 auto!important;align-self:center!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:10px!important;margin:0 auto!important;padding:12px!important;
    box-sizing:border-box!important;
  }
  body.board-view .playbar #rollBtn,
  body.board-view .playbar #skipBtn {position:static!important;width:100%!important;min-height:48px!important;touch-action:manipulation!important;}
  body.board-view .playbar .dice {display:flex!important;justify-content:center!important;gap:10px!important;}
  /* Only the opening overlay's Roll button is active before the game begins. */
  body.board-view.opening-roll-overlay-active .playbar #rollBtn {display:none!important;}
  body.board-view #expandedPawnStatus {position:relative!important;inset:auto!important;order:5!important;max-width:560px!important;width:100%!important;}
  body.board-view #boardCtaWrap {order:6!important;position:relative!important;inset:auto!important;transform:none!important;}
  body.board-view #finishBtn {position:static!important;}
  body.board-view .board-rotate-tools {position:relative!important;inset:auto!important;order:7!important;max-width:100%!important;}
}