@media (max-width: 520px), (max-height: 620px) {
  .menu-screen { padding: 14px 20px 12px; }
  .brand-icon { width: 28px; height: 28px; margin-bottom: 3px; }
  .brand-icon span { inset: 5px; }
  .brand-icon i { top: -3px; left: 13px; width: 3px; height: 34px; }
  h1 { font-size: 58px; }
  .tagline { margin: 9px 0 10px; font-size: 9px; }
  .primary-button, .secondary-button { min-height: 43px; font-size: 16px; }
  .record-grid { margin-top: 8px; }
  .record-grid > div { padding: 6px; }
  .text-button { padding: 7px 4px; }
  .control-hint { display: none; }
  .panel { padding: 18px 18px 16px; }
  .panel h2 { margin-bottom: 11px; font-size: 34px; }
  .tutorial-list { margin: 11px 0; }
  .tutorial-list li { padding: 5px 0; font-size: 10px; }
  .result-score strong { font-size: 42px; }
  .result-grid { margin-bottom: 12px; }
  .result-grid div { padding: 7px 5px; }
  .hud-stat { top: 10px; left: 10px; min-width: 80px; padding: 6px 8px; }
  .hud-level { left: 50%; }
  .icon-button { top: 9px; right: 10px; width: 36px; height: 36px; }
  .knives-panel { right: 10px; bottom: 9px; min-width: 115px; padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
