@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  #menu { gap: 4px; }
  #menu .top-bar { flex-wrap: wrap; gap: 4px; padding: 3px 5px 0; }
  #menu .rank-box { gap: 4px; padding: 2px 6px; }
  #menu .rank-badge { width: 34px; height: 34px; font-size: 16px; }
  #menu .rank-info b { font-size: 14px; }
  #menu .rank-info small { font-size: 10px; }
  #menu .top-right { gap: 4px; }
  #menu .streak, #menu .best { font-size: 12px; padding: 2px 6px; }
  #menu .logo { margin: 0; }
  #menu .logo .l1 { font-size: 38px; }
  #menu .logo .l2 { font-size: 45px; }
  #menu .logo .tag { font-size: 13px; margin-top: 3px; }
  #menu .menu-main { width: 100%; min-width: 0; gap: 8px; margin-top: 4px; align-items: stretch; }
  #menu .preview-card { flex: none; width: 150px; min-width: 0; }
  #menu #preview { width: 136px; height: 102px; }
  #menu .preview-name { font-size: 13px; margin: 0; }
  #menu .menu-actions { flex: 1; min-width: 0; width: auto; gap: 5px; }
  #menu .menu-actions .btn.big { font-size: 25px; min-height: 48px; }
  #menu .menu-row { gap: 4px; }
  #menu .menu-row .btn { min-width: 0; font-size: 12px; padding: 3px 5px; }
  #menu .next-goal { position: static; transform: none; max-width: 100%; margin-top: 4px; font-size: 12px; padding: 3px 8px; }
}