/* dude.com batch 31: arcade game pages on a phone held sideways (e.g. 844x390).
   The shared arcade CSS sizes the 3:4 board as (100dvh - 210px) * .75, i.e. 135x180 px at 390 px tall: the PLAY card, the
   difficulty picker and the score bar did not fit. On short landscape screens: page title + crumb hidden (the header keeps
   the brand and the close X), the board gets the height, "How to play" sits beside it. Portrait and desktop unchanged.
   Linked from each /arcade/<slug>/index.html by batch 31; a new arcade sync drops the link (re-run batch 31 or add this
   file to dude-arcade templates). */
@media (orientation: landscape) and (max-height: 520px) {
  .ar-crumb, .ar-gtitle { display: none !important; }
  .ar-top .ar-nav { display: none !important; }
  .ar-top .ar-topin { min-height: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  main.ar-wrap { padding-top: 6px !important; }
  .ar-gp {
    grid-template-columns: min(calc((100dvh - 108px) * .75), 46vw) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .ah { --ah-chrome: 108px; max-width: 100% !important; }
  .ar-side { max-height: calc(100dvh - 60px); overflow-y: auto; font-size: 14px; }
}