/* Shared royal reel frame. The reels stay inside the clear centre of the image. */
.temple,
.cabinet,
.slot-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #050403 url("./amd-slots-reel-frame.jpg") center / 100% 100% no-repeat !important;
  box-shadow: 0 0 22px rgba(214, 159, 38, .45) !important;
}

.temple::before,
.slot-stage::before {
  display: none !important;
}

.temple > .reels,
.cabinet > .reels,
.slot-stage > .reels {
  position: relative !important;
  z-index: 1 !important;
  width: 78% !important;
  height: auto !important;
  max-width: 78% !important;
  max-height: 55% !important;
  aspect-ratio: 5 / 3 !important;
  margin: 1.5% 0 0 !important;
  align-self: center !important;
}

.cabinet > .shine {
  z-index: 2;
  inset: 23% 11% 20% !important;
}

@media (max-width: 520px) {
  .temple > .reels,
  .cabinet > .reels,
  .slot-stage > .reels {
    width: 77% !important;
    max-width: 77% !important;
    max-height: 54% !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .temple,
  .cabinet,
  .slot-stage {
    width: 100% !important;
    height: 100% !important;
  }

  .temple > .reels,
  .cabinet > .reels,
  .slot-stage > .reels {
    width: auto !important;
    height: 54% !important;
    max-width: 78% !important;
    max-height: 54% !important;
  }
}