@media (max-width: 550px) {
  html, body, .world { width: 100%; max-width: 100%; overflow-x: hidden; }
  main { grid-template-columns: minmax(0, 1fr); }
  main > *, .easel, aside, #board-viewport, #tray-wrap, .tray-bar { min-width: 0; max-width: 100%; }
  .easel { justify-self: stretch; }
  #board-viewport:not(.large) #board { min-width: 0 !important; }
  .tray-bar { flex-wrap: wrap; }
  .tray-bar > strong { white-space: normal; }
  .world:has(#menu.hidden) main { padding-bottom: 82px; }
  .world:has(#menu.hidden) aside .portrait,
  .world:has(#menu.hidden) aside .preview-frame,
  .world:has(#menu.hidden) aside #help,
  .world:has(#menu.hidden) aside .record,
  .world:has(#menu.hidden) aside .settings { display: none; }
  .world:has(#menu.hidden) aside .controls {
    position: fixed; z-index: 4; left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; padding: 6px; border-radius: 12px; background: #4e3528e8;
  }
  .world:has(#menu.hidden) aside .controls button {
    grid-column: auto; min-height: 44px; padding: 4px; font-size: 12px;
  }
}