/* Interaction repairs only. Keep the current five games and their presentation. */
@media (max-width: 760px), (pointer: coarse) {
  #arcade-main button,
  #arcade-main select,
  #arcade-main summary {
    min-height: 48px;
    min-width: 48px;
  }

  .orbit-directions { grid-template-columns: repeat(3, 48px); }
  .orbit-directions button { width: 48px; height: 48px; }

  .ember-header-actions { flex-wrap: wrap; }
  .ember-header-actions > button { flex: 0 0 48px; }
  .ember-quality { min-width: 0; }
  .ember-quality select { max-width: 100%; }
  .ember-touch-deck { grid-template-columns: 154px minmax(0, 1fr); }
  .ember-dpad {
    width: 154px;
    height: 154px;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 3px;
  }
  .ember-dpad .ember-action-button { width: 48px; height: 48px; }
  .ember-touch-actions {
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    grid-auto-rows: 48px;
    gap: 3px;
  }
  .ember-touch-actions .ember-action-button { height: 48px; }
}

@media (max-width: 400px) {
  .ember-header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(48px, 1fr));
    gap: 6px;
  }
  .ember-header-actions .ember-quality { grid-column: 1 / -1; }
  .ember-header-actions > button { width: 100%; }
}