/* A scrollable menu on small phones, and a compact two-column landscape layout. */
@media (max-width:760px) {
  #menu { position:fixed; inset:0; overflow-y:auto; }
  .menu-content { position:relative; top:auto; left:auto; margin:125px 7% 75px; width:86%; }
  .menu-bottom { position:fixed; }
}
@media (max-height:520px) and (min-width:650px) {
  .menu-wash { background:linear-gradient(90deg,#f3eee1f5,#f3eee1e6 55%,#f3eee1ce); }
  .menu-content { position:absolute; top:76px; left:5%; width:90%; max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 36px; margin:0; }
  .menu-content>.eyebrow { grid-column:1; grid-row:1; }
  .menu-content h1 { grid-column:1; grid-row:2; margin:0; font-size:42px; }
  .intro { grid-column:1; grid-row:3; font-size:10px; margin:0; }
  .mode-tabs { grid-column:2; grid-row:1; }
  .mode-options { grid-column:2; grid-row:2; margin:0; align-self:center; }
  .mode-description { grid-column:2; grid-row:3; min-height:0; padding:0; }
  .dragon-select { grid-column:1; grid-row:4; margin:8px 0; }
  .menu-content>.primary-button { grid-column:2; grid-row:4; align-self:center; }
  .practice { grid-column:2; grid-row:5; padding:0; }
  #join-controls { grid-column:2; grid-row:6; }
  .menu-meta,.region-card { display:none; }
  .menu-bottom { display:none; }
  .hud-bottom { bottom:100px; }
  .minimap-card,.ability-bar { display:none; }
  .hoard { padding:8px; min-width:130px; }
  .objective { padding-top:0; }
  .objective strong { font-size:15px; }
  .hud-top { top:10px; }
  .player-card { padding:8px; }
  .score-card { padding-top:8px; padding-bottom:8px; }
  #touch-controls button { padding:8px; }
  #touch-controls { bottom:10px; }
}