/* Consistent reel-cabinet scale across phone, tablet, and laptop layouts. */
@media (orientation: portrait) and (max-width: 1180px) {
  .game:not(.courtside-layout) .slotStage {
    width: 94vw !important;
    max-width: none;
    box-sizing: border-box;
    justify-self: center;
  }
  .game:not(.courtside-layout) .slotStage .cabinet,
  .game:not(.courtside-layout) .slotStage .reelFrame {
    width: 100% !important;
    max-width: none;
  }
  .game.courtside-layout .slotMachine {
    width: 94vw !important;
    max-width: none;
  }
  .game.courtside-layout .slotStage .reelFrame {
    width: 100% !important;
  }
}

@media (orientation: landscape) and (min-width: 721px) and (max-width: 1180px) {
  .game:not(.courtside-layout) .slotMachine {
    grid-template-columns: minmax(0, 1fr);
  }
  .game:not(.courtside-layout) .slotHeader,
  .game:not(.courtside-layout) .slotStage {
    grid-column: 1;
  }
  .game:not(.courtside-layout) .slotStage {
    width: min(65vw, calc((100dvh - 100px) * 1.6)) !important;
    max-width: none;
    box-sizing: border-box;
    justify-self: center;
  }
  .game:not(.courtside-layout) .slotStage .cabinet,
  .game:not(.courtside-layout) .slotStage .reelFrame {
    width: 100% !important;
    max-width: none;
  }
  .game.courtside-layout .slotMachine {
    width: min(65vw, calc((100dvh - 100px) * 1.6)) !important;
    max-width: none;
  }
  .game.courtside-layout .cabinet {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .game.courtside-layout .slotStage .reelFrame {
    grid-area: 1 / 1 / 2 / -1 !important;
    width: 100% !important;
  }
}

@media (orientation: landscape) and (min-width: 1181px) {
  .game:not(.courtside-layout) .slotStage {
    width: min(70vw, calc((100dvh - 130px) * 1.6)) !important;
    max-width: none;
    box-sizing: border-box;
    justify-self: center;
  }
  .game:not(.courtside-layout) .slotStage .cabinet,
  .game:not(.courtside-layout) .slotStage .reelFrame {
    width: 100% !important;
    max-width: none;
  }
  .game.courtside-layout .slotMachine {
    --responsive-reel-width: min(70vw, calc((100dvh - 130px) * 1.6));
    width: min(
      calc(100vw - 24px),
      calc(
        var(--responsive-reel-width) +
        var(--desktop-left-rail, 64px) +
        var(--desktop-right-rail, 100px) +
        var(--desktop-rail-gap, 20px) +
        var(--desktop-rail-gap, 20px)
      )
    ) !important;
    max-width: none;
  }
}


/* Large touch tablets use the compact, full-width cabinet composition. */
@media (orientation: landscape) and (min-width: 1181px) and (max-width: 1366px) and (pointer: coarse) {
  .game.courtside-layout .slotMachine {
    width: min(71vw, calc((100dvh - 130px) * 1.6)) !important;
  }
  .game.courtside-layout .cabinet {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .game.courtside-layout .slotStage .reelFrame {
    grid-area: 1 / 1 / 2 / -1 !important;
    width: 100% !important;
  }
}