/* Wild West Fortune — final visual layer. */
:root {
  --bg: #130a05;
  --panel: #24130a;
  --panel2: #4b2812;
  --ink: #fff2cf;
  --muted: #cfb787;
  --accent: #a9411f;
  --accent-soft: #e28a42;
  --violet: #7a3b1b;
  --violet-soft: #d48a43;
  --gold: #f2bd4f;
  --line: #8a5529;
  --loss: #d77a63;
  --panel-fill: linear-gradient(180deg, #583117, #201108);
  --panel-shadow: inset 0 1px 0 #ffe8ad24, 0 10px 28px #0009;
  --ball-mark: url("../../public/assets/wild/wild-display.png");
}

html,
body {
  background:
    linear-gradient(180deg, #160b0594 0%, #2c150777 45%, #0b0503df 100%),
    url("../../public/assets/wild/background.png") center / cover fixed,
    #130a05 !important;
  color: var(--ink);
}

.game {
  background: linear-gradient(90deg, #0c0503a8, transparent 27% 73%, #0c0503a8) !important;
}

/* The supplied frame is 1672 × 941 and already contains the 5 × 3 reel grid. */
.courtside-layout .slotStage .reelFrame {
  aspect-ratio: 1672 / 941 !important;
}

.courtside-layout .slotStage .reelFrame::before {
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url("../../public/assets/wild/slot-frame.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 18px 30px #000c) saturate(1.08) !important;
}

.courtside-layout .slotStage .reels,
.courtside-layout .slotStage .reelGlass {
  /* Match the artwork's inner grid: x 9.1–90.9%, y 30.45–88.1%. */
  inset: 30.45% 9.1% 11.9% !important;
  width: auto !important;
  height: auto !important;
}

.slotStage .reels {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  perspective: none !important;
}

.slotStage .reels::before,
.slotStage .reels::after,
.slotStage .reel::before,
.slotStage .reel::after,
.slotStage .cell::before,
.slotStage .cell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.slotStage .reel {
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
  filter: none;
}

.slotStage .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.slotStage .reelGlass {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.slotStage .cell .symImg {
  width: 88% !important;
  height: 88% !important;
  filter: drop-shadow(0 5px 7px #000d) !important;
}

.slotStage .cell[data-id="wild"] .symImg,
.slotStage .cell[data-id="scatter"] .symImg {
  filter: drop-shadow(0 0 10px #ffbc37ad) drop-shadow(0 5px 7px #000c) !important;
}

.slotStage .cell.winner {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px #ffd878, inset 0 0 20px #e9742838, 0 0 14px #ffbb425c !important;
}

.slotStage .reels.is-spinning .cell,
.slotStage .cell.scatter-trigger {
  background: transparent !important;
}

.slotStage .cell.winner .symImg {
  filter: drop-shadow(0 0 15px #ffc760) brightness(1.1) !important;
}

/* Every interactive control uses leather, brass and ember-red states. */
.courtside-layout .glassCircle,
.courtside-layout .spinActions > button,
.audioPrompt,
.settingsBtn,
.iconBtn,
.deckButton {
  border-color: #d89a3d !important;
  color: #fff0c5 !important;
  background:
    radial-gradient(circle at 32% 20%, #f2b64a35, transparent 42%),
    linear-gradient(145deg, #653418, #2a160b 56%, #170b06) !important;
  box-shadow:
    inset 0 0 0 2px #1b0c05,
    inset 0 0 0 3px #e4a3444a,
    inset 0 0 14px #8b3b173d,
    0 7px 20px #0009 !important;
}

.courtside-layout .glassCircle:hover,
.courtside-layout .spinActions > button:hover:not(:disabled),
.audioPrompt:hover,
.iconBtn:hover,
.deckButton:hover:not(:disabled) {
  border-color: #ffe09a !important;
  color: #fff8df !important;
  background:
    radial-gradient(circle at 34% 20%, #ffd77a55, transparent 44%),
    linear-gradient(145deg, #81431d, #3a1d0d 58%, #1c0d06) !important;
  box-shadow: inset 0 0 15px #e18a314d, 0 0 19px #e29a3e5e, 0 8px 22px #0009 !important;
}

.courtside-layout button:focus-visible,
.pickerCard button:focus-visible,
.ledgerModal button:focus-visible,
.rulesClose:focus-visible {
  outline: 2px solid #ffda82 !important;
  outline-offset: 3px !important;
}

.courtside-layout .spinActions > button.active {
  color: #fff4c9 !important;
  border-color: #ffd06a !important;
  background: radial-gradient(circle at 35% 22%, #ffc14b52, transparent 45%), linear-gradient(145deg, #8a3818, #32180b) !important;
  box-shadow: inset 0 0 16px #e98b334f, 0 0 21px #e3a33d60 !important;
}

.courtside-layout .spinActions .spinBtn {
  border-color: #ffd673 !important;
  background: radial-gradient(circle at 36% 28%, #e57a38, #ad3e1f 45%, #692115 70%, #2b1009) !important;
  box-shadow:
    inset 0 0 0 3px #3a130b,
    inset 0 0 0 5px #ffd87976,
    0 0 0 3px #1b0a05,
    0 0 0 6px #a65c25,
    0 0 28px #d5762a79 !important;
}

.courtside-layout .spinActions .spinBtn::before {
  color: #fff5d5 !important;
  text-shadow: 0 0 10px #ffcf68, 0 2px 3px #4e170b !important;
}

.courtside-layout .spinActions .spinBtn::after {
  border-color: #f3bd5a75 !important;
  border-top-color: #fff5d5 !important;
}

.courtside-layout .slotHeader .headerActions {
  border-color: #b87934 !important;
  background:
    radial-gradient(circle at 10% 0, #b7612535, transparent 43%),
    linear-gradient(150deg, #4d2814f5, #211108f7 65%, #120905f7) !important;
  box-shadow: inset 0 0 0 1px #efb85832, 0 15px 42px #000c !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn {
  color: #f4dfb1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn:hover,
.courtside-layout .slotHeader .headerActions .iconBtn.active {
  color: #fff7df !important;
  background: linear-gradient(90deg, #c36c2b38, #7d361b25, transparent) !important;
  box-shadow: inset 3px 0 #f0b64e !important;
}

.slotHeader #languageIcon,
.slotHeader #soundBtn .soundIcon {
  filter: drop-shadow(0 2px 4px #000b) !important;
}

.slotHeader #languageIcon {
  object-fit: contain !important;
  filter: invert(91%) sepia(31%) saturate(712%) hue-rotate(344deg) brightness(106%) drop-shadow(0 2px 4px #000b) !important;
}

.slotHeader #soundBtn .soundIcon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.slotHeader #soundBtn[aria-pressed="false"] {
  color: #d7b27a !important;
  border-color: #8b5b32b8 !important;
  background: linear-gradient(155deg, #3b2117c9, #130b08e8) !important;
  box-shadow: inset 0 1px #fff2c624, 0 7px 18px #0008 !important;
}

.courtside-layout .controlDeck {
  border-color: #a86c30 !important;
  background:
    linear-gradient(90deg, #f1b75813, transparent 16% 84%, #f1b75813),
    linear-gradient(145deg, #4b2815e8, #1f1009ee 58%, #120905ee) !important;
  box-shadow: inset 0 0 0 2px #160a05, inset 0 0 0 3px #d79a4040, 0 10px 30px #0009 !important;
}

.courtside-layout .controlDeck > :not(:first-child) {
  border-left-color: #dca34d42 !important;
}

.courtside-layout .controlDeck small,
.courtside-layout .controlDeck span {
  color: #cfb98d !important;
}

.courtside-layout .controlDeck b,
.balancePlaque b,
.winReadout b {
  color: #ffdb7a !important;
  text-shadow: 0 1px 0 #5d2a0e, 0 0 11px #d7862f3b !important;
}

.courtside-layout .controlDeck .deckButton {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.courtside-layout .controlDeck .deckButton:hover:not(:disabled),
.courtside-layout .controlDeck .deckButton.active {
  background: linear-gradient(145deg, #d77a2b2f, #7c321718) !important;
  box-shadow: inset 0 0 14px #e9a74422 !important;
}

.balancePlaque img {
  filter: drop-shadow(0 0 8px #f1b34c75) !important;
}

/* Bet and Auto picker. */
.controlPicker,
.ledgerModal,
.rulesModal {
  background: radial-gradient(circle at 50% 25%, #8d471e55, transparent 42%), #0c0603e8 !important;
  backdrop-filter: blur(14px) saturate(.9) !important;
}

.pickerCard {
  border-color: #d99b43 !important;
  color: #fff0c8 !important;
  background:
    radial-gradient(circle at 50% -14%, #d8782c45, transparent 46%),
    repeating-linear-gradient(90deg, #ffffff02 0 1px, transparent 1px 6px),
    linear-gradient(155deg, #5a3017 0%, #2a160b 50%, #120905 100%) !important;
  box-shadow: inset 0 0 0 3px #190b05, inset 0 0 0 4px #e5aa4a55, 0 0 42px #b95d263b, 0 28px 80px #000d !important;
}

.pickerCard::before,
.pickerCard::after {
  color: #ffd46f !important;
  text-shadow: 0 0 10px #d3752f !important;
}

.pickerKicker,
.resultBrand {
  color: #e7ad50 !important;
  text-shadow: 0 0 9px #8e421d !important;
}

.pickerCard h2 {
  color: #fff0bd !important;
  text-shadow: 0 2px 0 #6a2a12, 0 0 14px #d27a315c !important;
}

.pickerCard p {
  color: #d2bd94 !important;
}

.pickerCard button {
  border-color: #98602e !important;
  color: #ead6aa !important;
  background: linear-gradient(145deg, #412410, #211108) !important;
  box-shadow: inset 0 1px #ffe5aa14 !important;
}

.pickerCard button:hover {
  border-color: #edbd61 !important;
  color: #fff3cf !important;
  background: linear-gradient(145deg, #693619, #35190c) !important;
  box-shadow: 0 0 16px #d5843240 !important;
}

.pickerCard button.selected,
#pickerConfirm {
  border-color: #ffd36e !important;
  color: #fff9e8 !important;
  background: linear-gradient(145deg, #b65328, #6d2515) !important;
  box-shadow: inset 0 0 0 1px #ffe3a17a, 0 0 18px #d8772c58 !important;
}

#pickerCancel,
#pickerMin,
#pickerMax {
  background: linear-gradient(145deg, #4b2b16, #211108) !important;
}

.pickerCard .pickerSelection {
  color: #ffda7d !important;
  text-shadow: 0 0 10px #cf742f5f !important;
}

.pickerActions {
  border-top-color: #ad713747 !important;
}

/* Tutorial / paytable. */
.rulesCard {
  border-color: #d59a44 !important;
  color: #f8e8bf !important;
  background:
    radial-gradient(circle at 50% -10%, #c66a2d3e, transparent 43%),
    repeating-linear-gradient(90deg, #ffffff02 0 1px, transparent 1px 7px),
    linear-gradient(155deg, #533016 0%, #28150a 52%, #110805 100%) !important;
  box-shadow: inset 0 0 0 3px #170a04, inset 0 0 0 5px #e2a84942, inset 0 0 46px #0b0503, 0 0 50px #a958253e, 0 28px 90px #000e !important;
  scrollbar-color: #c98236 #201006 !important;
}

.rulesCard::before {
  background: linear-gradient(90deg, transparent, #bd6a2b 18%, #f4c665 50%, #bd6a2b 82%, transparent) !important;
  box-shadow: 0 0 12px #c16b2b70 !important;
}

.rulesClose {
  border-color: #efbd5e !important;
  color: #fff4d2 !important;
  background: linear-gradient(145deg, #9b4020, #4b1d10) !important;
  box-shadow: inset 0 0 0 3px #260d06, 0 0 17px #cf762e55 !important;
}

.rulesKicker {
  color: #e6a94a !important;
  text-shadow: 0 0 10px #b75b24 !important;
}

.rulesTitle {
  color: #ffdc7c !important;
  text-shadow: 0 2px 0 #64270f, 0 0 15px #d27b315e !important;
}

.rulesIntro,
.rulesSection ol,
.rulesSection ul,
.rulesPayoutNote,
.rulesPaytable,
.rulesSymbol span {
  color: #d5c29b !important;
}

.rulesSection {
  border-color: #8c582c !important;
  background: radial-gradient(circle at 10% 0, #b85d2523, transparent 42%), linear-gradient(155deg, #3b210fe8, #160b06ec) !important;
  box-shadow: inset 0 0 18px #090402b5, inset 0 0 0 1px #e3a84a14 !important;
}

.rulesSection h3,
.rulesPaytable td:last-child,
.symbolPaytable td,
.rulesScatterArt {
  color: #f2bc58 !important;
  text-shadow: 0 0 8px #a84f2057 !important;
}

.rulesSection.rulesFeature {
  border-color: #c57b35 !important;
  box-shadow: inset 0 0 20px #9d461c31, 0 0 16px #c57a2c20 !important;
}

.rulesPaytable td,
.symbolPaytable th,
.symbolPaytable td {
  border-bottom-color: #9b602d3d !important;
}

.symbolPaytable thead th {
  color: #f3c66c !important;
  background: linear-gradient(180deg, #573019cc, #27150abb) !important;
}

.rulesSymbol img,
.rulesScatterArt img {
  filter: drop-shadow(0 0 9px #e19a3f51) drop-shadow(0 4px 6px #000b) !important;
}

.rulesNotice {
  color: #9d8968 !important;
}

/* History / Auto session panel. */
.ledgerModal .ledgerCard {
  border-color: #c8873a !important;
  color: #f9e9bf !important;
  background: radial-gradient(circle at 50% -20%, #c4682940, transparent 48%), linear-gradient(155deg, #4b2914 0%, #251309 50%, #110805 100%) !important;
  box-shadow: inset 0 0 0 5px #160904, inset 0 0 0 6px #e0a34845, 0 0 52px #a754243d, 0 28px 90px #000e !important;
}

.ledgerModal .ledgerCard::before {
  border-color: #e5b45850 !important;
}

.ledgerModal .ledgerCard::after {
  content: "✦  WILD WEST FORTUNE  ✦" !important;
  color: #e5aa4c !important;
  text-shadow: 0 0 11px #9e4a20 !important;
}

.ledgerModal .ledgerCard h2 {
  color: #ffda78 !important;
  text-shadow: 0 2px 0 #61260f, 0 0 16px #d179315f !important;
}

.ledgerModal .ledgerClose,
.ledgerModal .ledgerNavigation button,
.ledgerModal .ledgerActions button,
.ledgerLink {
  border-color: #d99d45 !important;
  color: #fff0c5 !important;
  background: linear-gradient(145deg, #91401f, #491b0e) !important;
  box-shadow: inset 0 0 0 2px #2b0f07, 0 0 16px #c16b2a42 !important;
}

.ledgerModal .ledgerNavigation {
  border-color: #945c2c !important;
  background: linear-gradient(90deg, #251208, #4d2813, #251208) !important;
  box-shadow: inset 0 0 16px #0009 !important;
}

.ledgerModal .ledgerNavigation span,
.ledgerModal .ledgerSummary strong,
.ledgerModal .ledgerSummary b,
.ledgerModal .ledgerStats b,
.ledgerModal .ledgerTable thead th {
  color: #ffd878 !important;
}

.ledgerModal .ledgerStatus,
.ledgerModal .ledgerSummary span,
.ledgerModal .ledgerStats span,
.ledgerModal .ledgerTable caption,
.ledgerModal .ledgerNote,
.ledgerModal .ledgerBalance,
.ledgerModal .ledgerEmpty {
  color: #cfba94 !important;
}

.ledgerModal .ledgerSummary > div {
  border-color: #92582a !important;
  background: linear-gradient(150deg, #4b2813, #1d0f07) !important;
}

.ledgerModal .ledgerScroll {
  border-color: #895127 !important;
  background: #160b06c7 !important;
  scrollbar-color: #c47b33 #211006 !important;
}

.ledgerModal .ledgerTableWrap {
  background: #120905d6 !important;
}

.ledgerModal .ledgerTable thead th {
  background: #4a2814 !important;
  border-color: #9e642f66 !important;
}

.ledgerModal .ledgerTable td,
.ledgerModal .ledgerTable tbody th {
  border-color: #8c54283b !important;
}

.ledgerModal .ledgerTable tbody tr:nth-child(even) {
  background: #d17a2f0b !important;
}

.ledgerModal [data-tone="profit"] {
  color: #ffdd79 !important;
}

.ledgerModal [data-tone="loss"] {
  color: #e78b70 !important;
}

/* Feature and result feedback. */
.freeSpinHud {
  border-color: #d99d45 !important;
  color: #fff0c5 !important;
  background: linear-gradient(145deg, #5a2e15eb, #211007ef) !important;
  box-shadow: inset 0 0 0 2px #1a0b05, 0 0 20px #c8722c42 !important;
}

.resultPopup .resultSigil {
  background: url("../../public/assets/wild/wild-display.png") center / contain no-repeat !important;
  filter: drop-shadow(0 0 10px #e79b3f80) drop-shadow(0 4px 7px #000a) !important;
}

.resultPopup .resultPopupCard,
.resultPopup.win .resultPopupCard {
  border-color: #e0a64b !important;
  background: radial-gradient(ellipse at 50% 0, #d7782f54, transparent 68%), linear-gradient(155deg, #543019, #140a05) !important;
  box-shadow: inset 0 0 0 4px #160904, inset 0 0 0 5px #e5ae5260, 0 0 38px #c46e2b68, 0 18px 50px #000d !important;
}

.resultPopup .resultPopupCard::before,
.resultPopup .resultPopupCard::after {
  background: linear-gradient(#f4c76d, #b95a28 50%, #6b2a16) !important;
  box-shadow: 0 0 10px #c66c2b !important;
}

.resultPopup .resultEyebrow,
.resultPopup.win .resultAmount,
.message.win .main {
  color: #ffe08a !important;
  text-shadow: 0 0 12px #d481356e, 0 2px 0 #62260f !important;
}

.resultPopup .resultDetail {
  color: #d7c39b !important;
}

.resultPopup.loss .resultPopupCard {
  border-color: #85502c !important;
  background: radial-gradient(ellipse at 50% 0, #73401f3c, transparent 70%), linear-gradient(155deg, #2f1b0f, #0e0704) !important;
}

.resultPopup.loss .resultAmount,
.resultPopup.loss .resultEyebrow,
.resultPopup.loss .resultDetail {
  color: #ad9271 !important;
  text-shadow: 0 2px 0 #160905 !important;
}

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  .courtside-layout .slotStage .reelFrame {
    aspect-ratio: 1672 / 941 !important;
  }
}

/* Mobile portrait follows the tall 440 × 956 composition in the reference. */
@media (max-width: 600px) and (orientation: portrait) {
  html,
  body {
    background-attachment: scroll !important;
    background-position: center center !important;
    overflow-x: hidden !important;
  }

  .game.courtside-layout {
    align-content: start !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: clamp(150px, 18dvh, 178px) 8px 24px !important;
    overflow: hidden !important;
  }

  .courtside-layout .slotMachine {
    width: min(calc(100vw - 16px), 424px) !important;
    max-width: 424px !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  .courtside-layout .slotStage .reelFrame {
    width: 100% !important;
    aspect-ratio: 1.05 / 1 !important;
  }

  .courtside-layout .slotHeader,
  .courtside-layout .spinActions > button {
    margin-top: 18px !important;
  }

  .courtside-layout .slotStage .cell .symImg {
    width: 82% !important;
    height: 82% !important;
  }

  .courtside-layout .controlDeck {
    width: 100% !important;
    min-height: 68px !important;
    margin: 4px 0 0 !important;
  }

  .courtside-layout .controlDeck > .deckButton,
  .courtside-layout .controlDeck > .balancePlaque,
  .courtside-layout .controlDeck > .winReadout {
    min-height: 58px !important;
  }
}

/* Wide desktop: center the complete gameplay composition in the viewport. */
@media (min-width: 1100px) and (min-aspect-ratio: 4 / 3) {
  html,
  body {
    background-position: center center !important;
  }

  .game.courtside-layout {
    place-items: center !important;
    background: linear-gradient(90deg, transparent 0 31%, #0c050338 54%, #0c050382 100%) !important;
  }

  .courtside-layout .slotMachine {
    justify-self: center !important;
    width: min(1600px, 68vw, calc((100dvh - 180px) * 1.6 + 228px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
}

/* Master UI v1.1 — transparent brass-and-leather glass controls. */
.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.courtside-layout .slotMachine {
  overflow: visible !important;
}

.courtside-layout .glassCircle,
.courtside-layout .spinActions > button,
.courtside-layout .slotHeader .headerActions .iconBtn {
  border: 1px solid #efba626e !important;
  background:
    linear-gradient(145deg, #ffd7872e, transparent 42%),
    linear-gradient(155deg, #6d351f66, #1b0e08a8 68%, #0d0705b8) !important;
  box-shadow:
    inset 0 1px 1px #fff4cc3d,
    inset 0 -8px 18px #12060338,
    0 8px 22px #0007 !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

.courtside-layout .glassCircle:hover,
.courtside-layout .spinActions > button:hover:not(:disabled),
.courtside-layout .slotHeader .headerActions .iconBtn:hover {
  border-color: #ffe09bc7 !important;
  background:
    linear-gradient(145deg, #ffe3a345, transparent 44%),
    linear-gradient(155deg, #82412278, #28120aab 68%, #100704c2) !important;
  box-shadow: inset 0 1px 2px #fff5d76b, 0 0 20px #e7953d45, 0 8px 22px #0008 !important;
}

/* Desktop settings: one straight vertical stack expanding upward. */
.courtside-layout .slotHeader {
  overflow: visible !important;
}

.courtside-layout .slotHeader > .settingsBtn {
  margin-inline: auto !important;
}

.courtside-layout .slotHeader .headerActions {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.courtside-layout .slotHeader .headerActions[hidden] {
  display: none !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 56px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 5px !important;
  gap: 2px !important;
  border-radius: 50% !important;
  color: #fff0c8 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 0;
  animation: wild-menu-rise .26s cubic-bezier(.2,.8,.2,1) forwards;
}

.courtside-layout .slotHeader .headerActions .iconBtn:nth-child(4) { animation-delay: .02s; }
.courtside-layout .slotHeader .headerActions .iconBtn:nth-child(3) { animation-delay: .07s; }
.courtside-layout .slotHeader .headerActions .iconBtn:nth-child(2) { animation-delay: .12s; }
.courtside-layout .slotHeader .headerActions .iconBtn:nth-child(1) { animation-delay: .17s; }

.courtside-layout .slotHeader .headerActions .iconBtn svg,
.courtside-layout .slotHeader .headerActions .iconBtn img,
.courtside-layout .slotHeader #languageIcon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn.active {
  border-color: #ffd676bd !important;
  background:
    radial-gradient(circle at 36% 24%, #ffd77d44, transparent 48%),
    linear-gradient(155deg, #74351f73, #160b07b8) !important;
  box-shadow: inset 0 1px #fff2c64f, 0 0 18px #e8963b45, 0 8px 20px #0007 !important;
}

.helpGlyph {
  width: auto !important;
  font-size: 22px !important;
  line-height: .9 !important;
}

@keyframes wild-menu-rise {
  from { opacity: 0; transform: translateY(15px) scale(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* One icon for Spin; state content is swapped without rebuilding the button. */
.courtside-layout .spinActions .spinBtn::before {
  content: none !important;
  display: none !important;
}

.courtside-layout .spinActions .spinBtn {
  isolation: isolate !important;
  overflow: visible !important;
}

.courtside-layout .spinActions .spinBtn .spinIcon {
  display: block;
  width: 46px !important;
  height: 46px !important;
  fill: none !important;
  stroke: #fff6db !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 7px #ffbd55) drop-shadow(0 2px 2px #4a170a);
}

.courtside-layout .spinActions .spinBtn .spinIcon[hidden],
.courtside-layout .spinActions .spinBtn .spinFreeContent[hidden],
.courtside-layout .spinActions .autoButton [hidden] {
  display: none !important;
}

.spinFreeContent {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 1px !important;
  color: #fff4c6 !important;
  line-height: 1 !important;
}

.spinFreeContent small {
  display: block !important;
  margin: 0 !important;
  font: 800 clamp(7px, .7vw, 10px)/1.05 var(--ui-font) !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

.spinFreeContent strong {
  display: block !important;
  margin-top: 2px !important;
  color: #fff8dc !important;
  font: 900 clamp(25px, 2.6vw, 40px)/.9 var(--ui-font) !important;
  text-shadow: 0 0 11px #ffc457, 0 2px 2px #4f1809 !important;
}

.courtside-layout.free-spins .spinActions .spinBtn,
.courtside-layout.free-spins .spinActions .spinBtn:disabled {
  opacity: 1 !important;
  filter: none !important;
  border-color: #ffe39c !important;
  box-shadow:
    inset 0 0 0 3px #351107,
    inset 0 0 0 5px #ffd9798f,
    0 0 0 4px #8c431b,
    0 0 28px #ffad4778 !important;
}

.courtside-layout.free-spins .spinActions .spinBtn::after {
  animation: western-free-ring 1.25s ease-in-out infinite !important;
}

@keyframes western-free-ring {
  0%, 100% { transform: rotate(0) scale(1); opacity: .58; box-shadow: 0 0 10px #e8883438; }
  50% { transform: rotate(180deg) scale(1.08); opacity: 1; box-shadow: 0 0 24px #ffbf5d80; }
}

/* Turbo: animated electrical rim plus an independent icon pulse. */
.courtside-layout .spinActions .turboButton {
  isolation: isolate !important;
  overflow: visible !important;
}

.courtside-layout .spinActions .turboButton::before,
.courtside-layout .spinActions .turboButton::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

.courtside-layout .spinActions .turboButton.active::before {
  inset: -7px;
  background: conic-gradient(from 0deg, transparent 0 10%, #fff6bb 13%, #ffbd4d 17%, transparent 22% 46%, #f47b2e 50%, transparent 57% 78%, #ffe394 82%, transparent 88%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 1;
  animation: wild-electric-wrap .85s linear infinite;
  filter: drop-shadow(0 0 6px #ffb03f);
}

.courtside-layout .spinActions .turboButton.active::after {
  inset: -3px;
  border: 1px solid #ffd77b;
  opacity: .8;
  box-shadow: 7px -3px 0 -5px #fff4c4, -6px 5px 0 -5px #ff9d3f, 0 0 16px #f59b384f;
  animation: wild-electric-spark .55s steps(2,end) infinite;
}

.courtside-layout .spinActions .turboButton.active > svg {
  transform-origin: center;
  animation: wild-lightning-pulse .72s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 7px #ffc254);
}

@keyframes wild-electric-wrap { to { transform: rotate(360deg); } }
@keyframes wild-electric-spark { 50% { opacity: .35; transform: rotate(-9deg); } }
@keyframes wild-lightning-pulse { to { transform: scale(1.15); } }

/* Auto displays icon + label at rest, and only the live remaining count while active. */
.courtside-layout .spinActions .autoButton .autoIcon {
  display: block;
}

.courtside-layout .spinActions .autoButton b {
  margin: 0 !important;
  color: #fff6d7 !important;
  font: 900 clamp(18px, 2vw, 28px)/1 var(--ui-font) !important;
  text-shadow: 0 0 9px #ffbd535c !important;
}

/* Exactly three independent information cards. */
.courtside-layout .controlDeck {
  width: calc(100% - 204px) !important;
  max-width: 1040px !important;
  min-height: 78px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.courtside-layout .controlDeck > .infoCard {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  gap: 10px !important;
  border: 1px solid #dfa34c75 !important;
  border-radius: 15px !important;
  color: #f8e7bd !important;
  background:
    linear-gradient(145deg, #ffd88820, transparent 42%),
    linear-gradient(155deg, #552a1873, #160b079c 72%, #090503ad) !important;
  box-shadow: inset 0 1px 1px #fff1c234, inset 0 -10px 22px #10050235, 0 8px 24px #0006 !important;
  backdrop-filter: blur(15px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.25) !important;
}

.courtside-layout .controlDeck > :not(:first-child) {
  border-left: 1px solid #dfa34c75 !important;
}

.courtside-layout .controlDeck .betButton:hover:not(:disabled) {
  border-color: #ffdb8cc4 !important;
  background:
    linear-gradient(145deg, #ffe1a032, transparent 44%),
    linear-gradient(155deg, #6b341d80, #1d0e08a8) !important;
  box-shadow: inset 0 1px #fff4d05c, 0 0 20px #e9973d40, 0 8px 24px #0007 !important;
}

.courtside-layout .controlDeck .infoIcon {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #f3bd61 !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 0 7px #e59a3e5c) !important;
}

.courtside-layout .controlDeck img.infoIcon {
  object-fit: contain !important;
  stroke: none !important;
}

.courtside-layout .controlDeck .infoCopy,
.courtside-layout .controlDeck .betReadout {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 2px !important;
  text-align: left !important;
}

.courtside-layout .controlDeck .infoCopy span,
.courtside-layout .controlDeck .infoCopy small {
  color: #d8c39a !important;
  font: 700 9px/1.2 var(--ui-font) !important;
  letter-spacing: .08em !important;
}

.courtside-layout .controlDeck .infoCopy b {
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  color: #ffdf86 !important;
  font: 850 clamp(15px, 1.45vw, 22px)/1.1 var(--ui-font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Independent, non-blocking notification regions. */
.freeSpinHud {
  position: fixed !important;
  z-index: 80 !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-width: 190px !important;
  max-width: min(280px, calc(100vw - 36px)) !important;
  padding: 10px 14px !important;
  gap: 10px !important;
  border: 1px solid #efb85d91 !important;
  border-radius: 15px !important;
  color: #fff0c7 !important;
  background: linear-gradient(145deg, #8a481e61, #1a0d07b5 72%) !important;
  box-shadow: inset 0 1px #fff2c53d, 0 0 24px #e58e3848, 0 12px 30px #0008 !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  pointer-events: none !important;
  opacity: 0;
}

.freeSpinHud[hidden] {
  display: none !important;
}

.freeSpinHud.show {
  animation: wild-notice-top 2.2s cubic-bezier(.2,.8,.2,1) both !important;
}

.freeSpinHud > img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px #f0ad4a85) !important;
}

.freeSpinHud > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.freeSpinHud > div > span {
  font: 850 10px/1.1 var(--ui-font) !important;
  letter-spacing: .08em !important;
}

.freeSpinHud strong {
  margin-top: 4px !important;
  color: #ffe495 !important;
  font: 800 12px/1 var(--ui-font) !important;
}

.freeSpinHud b {
  font-size: 23px !important;
}

.resultPopup {
  position: fixed !important;
  z-index: 79 !important;
  left: auto !important;
  top: auto !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  width: min(310px, calc(100vw - 36px)) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  filter: none !important;
  pointer-events: none !important;
}

.resultPopup.show {
  visibility: visible !important;
  animation: wild-result-toast 2.2s cubic-bezier(.2,.8,.2,1) both !important;
}

.resultPopup .resultPopupCard,
.resultPopup.win .resultPopupCard,
.resultPopup.loss .resultPopupCard {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 82px !important;
  padding: 10px 13px !important;
  gap: 10px !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 1px solid #dfa64f88 !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, #ffd17b22, transparent 44%),
    linear-gradient(155deg, #5c2b1870, #150a06b8 75%) !important;
  box-shadow: inset 0 1px #fff2c53d, 0 0 24px #d9843340, 0 12px 30px #0008 !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
}

.resultPopup.loss .resultPopupCard {
  border-color: #a66e4775 !important;
  background: linear-gradient(145deg, #d08a5120, transparent 44%), linear-gradient(155deg, #39201670, #100806bd 75%) !important;
}

.resultPopup .resultPopupCard::before,
.resultPopup .resultPopupCard::after {
  content: none !important;
  display: none !important;
}

.resultPopup .resultSigil {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border: 1px solid #e9b75f91 !important;
  border-radius: 50% !important;
  background: #8a461f42 !important;
  color: #ffdc7d !important;
  filter: none !important;
  box-shadow: inset 0 0 12px #e9983a25, 0 0 12px #db85363e !important;
}

.resultPopup.win .resultSigil::before { content: '★'; font-size: 22px; }
.resultPopup.loss .resultSigil::before { content: '×'; font: 800 28px/1 var(--ui-font); color: #cda27e; }

.resultPopup .resultCopy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  min-width: 0 !important;
  gap: 2px 8px !important;
}

.resultPopup .resultBrand {
  grid-column: 1 / -1 !important;
  color: #cf9c55 !important;
  font: 800 7px/1.1 var(--ui-font) !important;
  letter-spacing: .18em !important;
}

.resultPopup .resultEyebrow {
  grid-column: 1 !important;
  margin: 2px 0 0 !important;
  color: #ffe19a !important;
  font: 850 12px/1.15 var(--ui-font) !important;
  letter-spacing: .03em !important;
}

.resultPopup .resultAmount,
.resultPopup.win .resultAmount,
.resultPopup.loss .resultAmount {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  align-self: center !important;
  margin: 0 !important;
  color: #ffe292 !important;
  font: 900 clamp(18px, 2vw, 26px)/1 var(--ui-font) !important;
  text-shadow: 0 0 9px #da86354c !important;
  white-space: nowrap !important;
}

.resultPopup.loss .resultAmount {
  color: #c7a98c !important;
}

.resultPopup .resultDetail,
.resultPopup.loss .resultDetail {
  grid-column: 1 !important;
  margin: 1px 0 0 !important;
  color: #d1bd99 !important;
  font: 650 8px/1.2 var(--ui-font) !important;
  letter-spacing: .02em !important;
}

@keyframes wild-notice-top {
  0% { opacity: 0; transform: translateX(35px); }
  12%, 78% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(24px); }
}

@keyframes wild-result-toast {
  0% { opacity: 0; transform: translateX(35px); }
  14%, 78% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(24px); }
}

/* Tablets and phones: Settings lives above the machine; actions live below it. */
@media (max-width: 1180px),
       (max-width: 1366px) and (min-height: 900px),
       (pointer: coarse) and (max-width: 1366px) {
  .game.courtside-layout {
    place-items: center !important;
    align-content: center !important;
    min-height: 100dvh !important;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
  }

  .courtside-layout .slotMachine {
    width: min(calc(100vw - 24px), 1120px, calc((100dvh - 232px) * 1.78)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding-top: 64px !important;
    gap: 10px !important;
  }

  .courtside-layout .cabinet {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .courtside-layout .slotStage .reelFrame {
    grid-area: 1 / 1 / 2 / -1 !important;
    width: 100% !important;
    aspect-ratio: 1672 / 941 !important;
  }

  .courtside-layout .slotHeader {
    position: absolute !important;
    top: -64px !important;
    left: 0 !important;
    grid-area: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    z-index: 70 !important;
  }

  .courtside-layout .glassCircle,
  .courtside-layout .slotHeader .headerActions .iconBtn {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    flex-basis: 52px !important;
  }

  .courtside-layout .slotHeader .headerActions {
    left: calc(100% + 7px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    flex-direction: row !important;
    gap: 7px !important;
  }

  .courtside-layout .slotHeader .headerActions .iconBtn {
    opacity: 0;
    animation-name: wild-menu-slide !important;
    animation-delay: calc((var(--menu-index, 0)) * .05s) !important;
  }

  .courtside-layout .slotHeader .headerActions .iconBtn:nth-child(1) { --menu-index: 0; }
  .courtside-layout .slotHeader .headerActions .iconBtn:nth-child(2) { --menu-index: 1; }
  .courtside-layout .slotHeader .headerActions .iconBtn:nth-child(3) { --menu-index: 2; }
  .courtside-layout .slotHeader .headerActions .iconBtn:nth-child(4) { --menu-index: 3; }

  .courtside-layout .spinActions {
    display: contents !important;
  }

  .courtside-layout .spinActions > button {
    position: relative !important;
    top: auto !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 14px 0 2px !important;
  }

  .courtside-layout .spinActions .turboButton { grid-area: 2 / 1 !important; }
  .courtside-layout .spinActions .spinBtn { grid-area: 2 / 2 !important; }
  .courtside-layout .spinActions .autoButton { grid-area: 2 / 3 !important; }

  .courtside-layout .controlDeck {
    width: 100% !important;
    max-width: none !important;
  }

  .resultPopup {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    bottom: auto !important;
  }
}

@keyframes wild-menu-slide {
  from { opacity: 0; transform: translateX(-12px) scale(.88); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (min-width: 601px) and (max-width: 1180px) and (orientation: landscape),
       (min-width: 601px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 900px),
       (min-width: 601px) and (pointer: coarse) and (max-width: 1366px) and (orientation: landscape) {
  .game.courtside-layout {
    align-content: start !important;
  }

  .courtside-layout .slotMachine {
    width: min(calc(100vw - 24px), 1120px, calc((100dvh - 370px) * 1.78)) !important;
    min-width: 0 !important;
  }

  .resultPopup .resultPopupCard,
  .resultPopup.win .resultPopupCard,
  .resultPopup.loss .resultPopupCard {
    min-height: 64px !important;
    padding-block: 7px !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  html,
  body {
    background-attachment: scroll !important;
    background-position: center center !important;
    overflow-x: hidden !important;
  }

  .game.courtside-layout {
    align-content: center !important;
    padding: max(10px, env(safe-area-inset-top)) 8px max(18px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .courtside-layout .slotMachine {
    width: min(calc(100vw - 16px), 440px) !important;
    max-width: 440px !important;
    padding-top: 58px !important;
    gap: 8px !important;
  }

  .courtside-layout .slotHeader {
    top: -58px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .courtside-layout .glassCircle,
  .courtside-layout .slotHeader .headerActions .iconBtn {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
  }

  .courtside-layout .slotHeader .headerActions {
    left: calc(100% + 5px) !important;
    gap: 5px !important;
  }

  .courtside-layout .slotHeader .headerActions .iconBtn {
    padding: 3px !important;
    font-size: 7px !important;
  }

  .courtside-layout .slotHeader .headerActions .iconBtn svg,
  .courtside-layout .slotHeader .headerActions .iconBtn img,
  .courtside-layout .slotHeader #languageIcon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  .courtside-layout .slotStage .reelFrame {
    aspect-ratio: 1672 / 941 !important;
  }

  .courtside-layout .spinActions > button,
  .courtside-layout .spinActions .autoButton {
    width: 50px !important;
    height: 50px !important;
    margin-top: 10px !important;
  }

  .courtside-layout .spinActions .spinBtn {
    width: 70px !important;
    height: 70px !important;
  }

  .courtside-layout .spinActions .spinBtn .spinIcon {
    width: 34px !important;
    height: 34px !important;
  }

  .spinFreeContent small {
    font-size: 7px !important;
  }

  .spinFreeContent strong {
    font-size: 27px !important;
  }

  .courtside-layout .controlDeck {
    min-height: 66px !important;
    margin: 2px 0 0 !important;
    gap: 5px !important;
  }

  .courtside-layout .controlDeck > .infoCard {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    min-height: 62px !important;
    padding: 6px 5px !important;
    gap: 5px !important;
    border-radius: 11px !important;
  }

  .courtside-layout .controlDeck .infoIcon {
    width: 21px !important;
    height: 21px !important;
  }

  .courtside-layout .controlDeck .infoCopy span,
  .courtside-layout .controlDeck .infoCopy small {
    font-size: 7px !important;
    letter-spacing: 0 !important;
  }

  .courtside-layout .controlDeck .infoCopy b {
    font-size: clamp(11px, 3.2vw, 15px) !important;
    letter-spacing: -.04em !important;
  }

  .freeSpinHud {
    min-width: 158px !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 10px !important;
  }

  .freeSpinHud > img {
    width: 34px !important;
    height: 34px !important;
  }

  .resultPopup {
    width: min(280px, calc(100vw - 16px)) !important;
  }

  .resultPopup .resultPopupCard,
  .resultPopup.win .resultPopupCard,
  .resultPopup.loss .resultPopupCard {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .resultPopup .resultSigil {
    width: 36px !important;
    height: 36px !important;
  }

  .resultPopup .resultAmount,
  .resultPopup.win .resultAmount,
  .resultPopup.loss .resultAmount {
    font-size: clamp(16px, 5vw, 22px) !important;
  }
}

@media (max-height: 620px) and (min-width: 601px) and (max-width: 1180px),
       (max-height: 620px) and (min-width: 601px) and (pointer: coarse) and (max-width: 1366px) {
  .game.courtside-layout {
    align-content: start !important;
    overflow-y: auto !important;
  }

  .courtside-layout .slotMachine {
    width: min(calc(100vw - 24px), calc((100dvh - 170px) * 1.78)) !important;
    min-width: 620px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courtside-layout .slotHeader .headerActions .iconBtn,
  .courtside-layout .spinActions .turboButton.active::before,
  .courtside-layout .spinActions .turboButton.active::after,
  .courtside-layout .spinActions .turboButton.active > svg,
  .courtside-layout.free-spins .spinActions .spinBtn::after,
  .freeSpinHud.show,
  .resultPopup.show {
    animation: none !important;
  }

  .courtside-layout .slotHeader .headerActions .iconBtn,
  .freeSpinHud.show,
  .resultPopup.show {
    opacity: 1 !important;
    transform: none !important;
  }
}