.rotate-device { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  body:not(.in-lobby) .rotate-device {
    display: grid; place-content: center; text-align: center; gap: 12px;
    position: fixed; inset: 0; z-index: 390; padding: 30px;
    color: #fff8dc; background: #28462a;
  }
  .rotate-device strong { font-size: 28px; }
  .rotate-device button { padding: 14px; border-radius: 12px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  body:not(.in-lobby) > header, body:not(.in-lobby) > .social-area { display: none; }
  body:not(.in-lobby) #gameShell {
    --mobile-board: min(54vw, calc(100dvh - 64px));
    display: grid; grid-template-columns: minmax(100px, 160px) var(--mobile-board) minmax(100px, 160px);
    grid-template-areas: "p board bot"; align-items: start; align-content: start;
    justify-content: center; gap: 10px; width: 100%; max-width: none;
    min-height: 100dvh; height: auto; margin: 0;
    padding: 5px max(12px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left));
  }
  #gameShell .game { width: 100%; min-width: 0; padding: 0; margin: 0; }
  #gameShell .board-stage { width: 100%; margin: 0; }
  #gameShell #board { width: 100%; padding: 3px; gap: 2px; }
  #gameShell .player { width: 100%; min-width: 0; padding: 0; margin: 0; }
  #gameShell .identity { margin: 0 0 2px; gap: 4px; }
  #gameShell .identity h2 { font-size: 11px; }
  #gameShell .identity small, #gameShell .rating { font-size: 8px; }
  #gameShell .avatar { width: 26px; height: 26px; font-size: 17px; }
  #gameShell .wall-progress { height: 22px; margin: 2px 0 4px; font-size: 10px; }
  #gameShell .wall-progress::before { width: 25px; height: 25px; }
  #gameShell .inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  #gameShell .inventory .inv.useful { height: 36px; min-height: 0; padding: 1px; }
  #gameShell .inventory .inv i { width: 27px; height: 27px; }
  #gameShell .inventory .inv > span { display: none; }
  #gameShell .inventory .inv > b { font-size: 10px; padding: 1px; }
  #gameShell .inventory .inv.free { height: 20px; min-height: 0; padding: 1px; }
  #gameShell .inventory .inv.free i { width: 18px; height: 18px; }
  #gameShell #playerCard > .powers, #gameShell #botCard > .rival-abilities { margin: 3px 0 0; padding: 2px 0 0; }
  #gameShell #powers, #gameShell #botPowersStatus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  #gameShell #powers .power, #gameShell .rival-power-status {
    height: clamp(26px, calc((100dvh - 160px) / 4), 55px) !important;
    min-height: 0 !important; aspect-ratio: auto; padding: 1px; border-width: 2px;
  }
  #gameShell .powers h2, #gameShell .rival-abilities h3, #gameShell .game-chat { display: none; }
  #gameShell .abandon { margin: 2px 0 0; padding: 2px; font-size: 9px; }
  #gameShell .turn-banner { min-height: 26px; height: 26px; padding: 2px 5px; margin: 0 0 3px; font-size: 11px; }
  #gameShell .turn-timer { width: 22px; height: 22px; font-size: 12px; }
  #gameShell .fullscreen-toggle { padding: 2px 5px; }
  #gameShell .fullscreen-toggle b { display: none; }
  #gameShell #message { margin: 3px 0 0; padding: 2px; min-height: 0; font-size: 10px; }
}