/* =============================================================================
   responsive.css: Breakpoint overrides.
   ============================================================================= */

@media (max-width: 800px) {
  #header-controls {
    justify-content: center;
  }
  .torch-controls,
  .torch-controls-secondary,
  .torch-controls-mode,
  .torch-controls-remove {
    justify-content: center;
    gap: 12px;
  }
  .torch-unit {
    gap: 22px;
  }
  .torch-controls button,
  .torch-controls-secondary button,
  .torch-controls-mode button,
  .torch-controls-remove button {
    font-size: 1.05rem;
    padding: 0.55rem 0.9rem;
  }
  .torch-controls-remove .btn-remove,
  .btn-add-torch-unit {
    margin-top: 12px;
    padding: 1rem 1rem;
    font-size: 2.5rem;
    min-height: 5rem;
  }
  #global-bar-multi,
  #global-bar-clocks,
  #global-bar-row2 {
    justify-content: center;
    gap: 12px;
  }
  #global-bar-inner {
    row-gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #toast {
    top: 0.75rem;
    font-size: 18px;
    padding: 10px 20px;
  }
}
@media (max-width: 479px) {
  #stage {
    flex-direction: column;
    align-items: center;
    gap: 220px;
  }
  .torch-unit {
    width: min(300px, 88vw);
  }
}