@media (max-height: 980px) {
  .page { padding: 6px 12px 10px; }
  .hub-view,
  .selector-view,
  .machine-view { gap: 12px; }

  .selector-shell { padding: 14px; gap: 12px; }
  .selector-machine-button { min-height: 220px; padding: 14px 12px 12px; gap: 8px; }

  .machine-shell { width: min(84vw, 760px); padding: 16px 16px 14px; }
  .bezel { inset: 6px; }
  .header-zone { gap: 4px; padding: 12px 12px 11px; }
  .machine-name { font-size: clamp(0.98rem, 1.6vw, 1.28rem); }
  .progressive-zone,
  .chamber-zone,
  .live-values-zone,
  .control-deck { margin-top: 8px; }
  .progressive-zone { padding: 6px 10px 7px; }
  .progressive-value { font-size: clamp(1rem, 1.9vw, 1.34rem); }
  .chamber-zone { padding: 8px; }
  .viewport-shell { padding: 4px; }
  .reel-viewport { width: min(100%, 48vh); }
  .reel-stop { gap: 4px; }
  .reel-stop span { font-size: 0.78rem; }
  .reel-stop small { font-size: 0.64rem; }
  .live-values-zone { padding: 8px 10px; gap: 4px; }
  .live-value { gap: 3px; padding: 9px 5px 8px; }
  .live-value strong { font-size: 0.96rem; }
  .control-deck { gap: 6px; padding: 7px; }
  .control-btn { min-height: 40px; border-radius: 12px; font-size: 0.88rem; }
  .payouts-panel { padding: 14px; gap: 12px; }
}

@media (max-height: 820px) {
  .selector-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .selector-machine-button { min-height: 196px; }
  .machine-shell { width: min(78vw, 700px); }
  .reel-viewport { width: min(100%, 42vh); }
}