/* Responsive rules adapted from the FormaFX player. */
@media (max-width: 640px) {
  .ffx-controls {
    left: 6px;
    right: 6px;
    bottom: 6px;
    grid-template-columns: auto minmax(52px, 1fr) auto auto auto auto;
    gap: 5px;
    padding: 6px;
    border-radius: 24px;
  }

  .ffx-controls .ffx-rewind10,
  .ffx-controls .ffx-forward10 { display: none; }

  .ffx-center-overlay { gap: 12px; }

  .ffx-center-overlay .ffx-btn {
    width: 52px;
    height: 52px;
  }

  .ffx-center-overlay .ffx-centerPlay {
    width: 62px;
    height: 62px;
  }

  .ffx-time { min-width: 72px; font-size: 11px; }
  .ffx-btn { width: 38px; height: 38px; }
  .ffx-speed { min-width: 44px; padding-inline: 10px; }
}

@media (max-width: 440px) {
  .ffx-controls {
    grid-template-columns: auto minmax(44px, 1fr) auto auto auto;
  }

  .ffx-controls .ffx-time { display: none; }
  .ffx-center-overlay .ffx-seek-btn { display: none; }
}

@media (max-width: 340px) {
  .ffx-controls {
    grid-template-columns: auto minmax(36px, 1fr) auto auto;
  }

  .ffx-controls .ffx-speed-wrap { display: none; }
}