/* Courtside controls: the cabinet is the only illustrated frame. */
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.game.courtside-layout { display: grid; place-items: center; height: auto; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.courtside-layout .slotMachine {
  --fluid-layout: 1; --fit-scale: 1; --reel-extra: 0px;
  position: relative; inset: auto; transform: none;
  width: min(1900px, 100%, calc((100dvh - 210px) * 1.6 + 204px)); max-width: none; min-height: 0;
  display: flex; flex-direction: column; gap: 12px; margin: 0 auto; padding: 0;
}
.courtside-layout .slotStage { display: block; width: 100%; padding: 0; margin: 0; }
.courtside-layout .cabinet { display: grid; grid-template-columns: 64px minmax(0, 1fr) 100px; gap: 0 20px; width: 100%; max-width: none; position: relative; }
.courtside-layout .slotStage .reelFrame { grid-area: 1 / 2; width: 100% !important; aspect-ratio: 1.6; margin: 0; }
.courtside-layout .slotStage .reelFrame::before { inset: 0 !important; }
.courtside-layout .slotStage .reelGlass { inset: 28.2% 8.5% 13.8% !important; }
.courtside-layout .slotStage .reels { position: absolute !important; inset: 28.2% 8.5% 13.8%; width: 83% !important; height: 58%; padding: 0 !important; gap: 3px; }
.courtside-layout .slotStage .reel { height: 100%; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 0; }
.courtside-layout .slotStage .cell { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; width: 100%; min-height: 0; height: 100%; padding: 4px; }
.courtside-layout .slotStage .cell .symImg { max-width: 88%; max-height: 88%; object-fit: contain; }
.courtside-layout .slotStage .paylineHint { grid-area: 2 / 2; margin: 4px 0 0; padding: 0; font-size: 10px; line-height: 1.5; opacity: .7; }
.courtside-layout .slotStage .message { grid-area: 3 / 2; min-height: 40px; padding: 5px 0 0; }
.courtside-layout .slotStage .message .main { font-size: 17px; }
.courtside-layout .slotStage .message .sub { display: block; font-size: 11px; margin-top: 3px; }
.courtside-layout .freeSpinHud { grid-column: 2; position: relative; inset: auto; }
.courtside-layout .slotMachine > .footerNote { display: block; padding: 0 12px; font-size: 10px; line-height: 1.5; color: #adbac7; opacity: .7; }
.courtside-layout .audioPrompt { display: none; }

/* Left-side disclosure replaces the former top utility plaque. */
.courtside-layout .slotHeader { position: relative; top: 7%; grid-area: 1 / 1; align-self: center; display: block; width: 100%; min-height: 0; margin: 0; padding: 0; z-index: 30; }
.courtside-layout .glassCircle, .courtside-layout .spinActions > button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  position: relative; inset: auto; grid-area: auto; margin: 0; padding: 8px; min-width: 44px; min-height: 44px;
  width: 60px; height: 60px; max-width: none; border: 1px solid #e4edf255; border-radius: 50%;
  background: linear-gradient(145deg, #e7f0ff25, #0e192d75); color: #f6f4eb;
  box-shadow: inset 0 1px 1px #ffffff30, 0 4px 18px #0003; backdrop-filter: blur(12px);
  cursor: pointer; font-family: var(--ui-font); transition: background .18s, border-color .18s, transform .15s;
}
.courtside-layout .glassCircle svg { width: 24px; height: 24px; fill: currentColor; }
.courtside-layout .glassCircle:hover, .courtside-layout .spinActions > button:hover:not(:disabled) { background: #ffb84c26; border-color: #ffdaa1aa; filter: none; }
.courtside-layout button:focus-visible { outline: 2px solid #ffe2a1; outline-offset: 4px; }
.courtside-layout .slotHeader .headerActions {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; width: 190px; height: auto; padding: 8px; gap: 5px;
  border: 1px solid #e1bd7966; border-radius: 14px; background: #101923f2; backdrop-filter: blur(18px); box-shadow: 0 12px 36px #0008;
}
.courtside-layout .headerActions[hidden] { display: none !important; }
.courtside-layout .slotHeader .headerActions .iconBtn { display: flex; justify-content: flex-start; gap: 12px; width: 100%; height: 48px; padding: 8px 12px !important; border: 0; border-radius: 8px; background: transparent; font-size: 12px; color: #e9eff7; }
.courtside-layout .slotHeader .headerActions .iconBtn:hover { background: #ffffff12; }
.courtside-layout .slotHeader .headerActions #soundBtn { font-size: 12px; }
.courtside-layout .slotHeader .headerActions .iconBtn.active { background: #ffb84c18; box-shadow: none; }
.courtside-layout .slotHeader .headerActions .iconBtn svg, .courtside-layout .slotHeader #languageIcon { flex: 0 0 24px; width: 24px; height: 24px; }
.helpGlyph { width: 24px; text-align: center; font-size: 23px; font-weight: 800; }

/* Right-side hierarchy: Turbo / primary Spin / Auto. */
.courtside-layout .spinActions { position: relative; top: 7%; grid-area: 1 / 3; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 10; }
.courtside-layout .spinActions > button svg { width: 22px; height: 22px; }
.courtside-layout .spinActions > button small { font-size: 9px; line-height: 1.1; }
.courtside-layout .spinActions > button b { font-size: 10px; }
.courtside-layout .spinActions .autoButton { width: 66px; height: 66px; gap: 1px; }
.courtside-layout .spinActions .autoButton svg { width: 21px; height: 21px; }
.courtside-layout .spinActions > button.active { color: #ffdb96; border-color: #ffd286; background: #bd751537; box-shadow: inset 0 0 12px #ffbf3520; }
.courtside-layout .spinActions .spinBtn { width: 96px; height: 96px; padding: 12px; background: linear-gradient(145deg, #efd4a143, #573a1c80); border: 1px solid #ffe0a68c; box-shadow: inset 0 1px 2px #fff7df55, 0 4px 24px #0005; }
.courtside-layout .spinActions .spinBtn::before { content: '\27f3'; display: block; position: static; font: 40px/1 Arial, sans-serif; color: #fff5dd; margin: 0; text-shadow: none; }
.courtside-layout .spinActions .spinBtn::after { content: ''; position: absolute; inset: 5px; border: 1px solid #fff0c726; border-radius: 50%; background: none; box-shadow: none; pointer-events: none; }
.courtside-layout .spinActions .spinBtn span { width: auto; font: 800 13px/1.2 var(--ui-font); text-shadow: none; letter-spacing: .05em; }
.courtside-layout .spinActions .spinBtn small { display: none; }
.courtside-layout .spinActions > button:active:not(:disabled), .courtside-layout .glassCircle:active { transform: scale(.95); }
.courtside-layout .spinActions > button:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.courtside-layout.is-spinning .spinActions .spinBtn { opacity: .75; }
.courtside-layout.is-spinning .spinActions .spinBtn::after { border-top-color: #ffe5a7; animation: spin-ring 1s linear infinite; }

/* One transparent information bar, with no control-deck artwork. */
.courtside-layout .controlDeck {
  position: relative; inset: auto; width: calc(100% - 204px); max-width: 960px; min-height: 78px; height: auto; aspect-ratio: auto;
  margin: 0 auto; padding: 8px 12px; display: grid; grid-template-columns: 70px 1.2fr 1fr 1fr; grid-template-rows: auto; align-items: stretch; gap: 0;
  border: 1px solid #dae4ef30; border-radius: 16px; background: linear-gradient(120deg, #d1e2f116, #101b2966);
  box-shadow: inset 0 1px 0 #ffffff16, 0 8px 32px #0003; backdrop-filter: blur(16px); container-type: normal;
}
.courtside-layout .controlDeck::before, .courtside-layout .controlDeck::after { content: none; display: none; background: none; border-image: none; }
.courtside-layout .controlDeck .winReadout::before, .courtside-layout .controlDeck .winReadout::after { content: none; display: none; }
.courtside-layout .controlDeck > .deckButton, .courtside-layout .controlDeck > .balancePlaque, .courtside-layout .controlDeck > .winReadout {
  position: relative; inset: auto; grid-area: auto; width: auto; max-width: none; height: auto; min-width: 0; min-height: 56px; margin: 0; padding: 6px 14px;
  display: flex; align-items: center; justify-content: center; justify-self: stretch; align-self: stretch; gap: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; aspect-ratio: auto;
}
.courtside-layout .controlDeck > :not(:first-child) { border-left: 1px solid #ffffff1c; }
.courtside-layout .controlDeck .historyBtn, .courtside-layout .controlDeck .winReadout { flex-direction: column; gap: 4px; }
.courtside-layout .controlDeck .balancePlaque > div { position: static; width: auto; min-width: 0; }
.courtside-layout .controlDeck .balancePlaque img { display: block; width: 25px; height: 25px; }
.courtside-layout .controlDeck .deckButton svg { width: 23px; height: 23px; }
.courtside-layout .controlDeck .betReadout { gap: 4px; }
.courtside-layout .controlDeck small, .courtside-layout .controlDeck span { display: block; color: #c2cbd7; font: 600 10px/1.3 var(--ui-font); letter-spacing: .06em; }
.courtside-layout .controlDeck b { display: block; margin: 3px 0 0; font: 750 clamp(16px, 1.7vw, 24px)/1.2 var(--ui-font); letter-spacing: -.02em; color: #fff0cf; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: normal; }
.courtside-layout .controlDeck .deckButton:hover:not(:disabled) { background: #ffffff0c; border-radius: 10px; box-shadow: none; }

@media (max-width: 900px) {
  .courtside-layout .slotMachine { width: 100%; max-width: 850px; }
  .courtside-layout .cabinet { grid-template-columns: 48px minmax(0, 1fr) 72px; column-gap: 8px; }
  .courtside-layout .slotStage .reelFrame { aspect-ratio: 1.45; }
  .courtside-layout .glassCircle { width: 46px; height: 46px; }
  .courtside-layout .spinActions .spinBtn { width: 70px; height: 70px; padding: 5px; }
  .courtside-layout .spinActions .spinBtn::before { font-size: 30px; }
  .courtside-layout .spinActions .spinBtn span { font-size: 11px; }
  .courtside-layout .spinActions > button, .courtside-layout .spinActions .autoButton { width: 50px; height: 50px; padding: 4px; }
  .courtside-layout .spinActions .autoButton svg { width: 18px; height: 18px; }
  .courtside-layout .controlDeck { width: calc(100% - 100px); padding: 6px; grid-template-columns: 58px 1.2fr 1fr 1fr; }
  .courtside-layout .controlDeck > .deckButton, .courtside-layout .controlDeck > .balancePlaque, .courtside-layout .controlDeck > .winReadout { padding: 6px 8px; }
  .courtside-layout .controlDeck .balancePlaque img { display: none; }
}
@media (max-width: 540px) {
  .game.courtside-layout { padding-inline: 8px; }
  .courtside-layout .slotMachine { gap: 14px; }
  .courtside-layout .cabinet { grid-template-columns: 44px minmax(0, 1fr) 58px; column-gap: 4px; }
  .courtside-layout .slotStage .reelFrame { grid-column: 2; aspect-ratio: .78; }
  .courtside-layout .slotHeader { grid-row: 1; align-self: center; }
  .courtside-layout .slotStage .paylineHint { grid-column: 1 / 4; font-size: 9px; padding: 4px; }
  .courtside-layout .slotStage .message { grid-column: 1 / 4; padding: 4px; }
  .courtside-layout .slotStage .message .main { font-size: 14px; }
  .courtside-layout .slotStage .message .sub { font-size: 10px; }
  .courtside-layout .spinActions { gap: 14px; }
  .courtside-layout .spinActions .spinBtn { width: 56px; height: 56px; }
  .courtside-layout .spinActions .spinBtn::before { font-size: 27px; }
  .courtside-layout .spinActions .spinBtn span { font-size: 9px; letter-spacing: 0; }
  .courtside-layout .spinActions > button, .courtside-layout .spinActions .autoButton { width: 46px; height: 46px; }
  .courtside-layout .spinActions > button small { font-size: 8px; }
  .courtside-layout .slotHeader .headerActions { top: 50%; bottom: auto; left: calc(100% + 4px); transform: translateY(-50%); }
  .courtside-layout .controlDeck { width: 100%; grid-template-columns: 46px 1.2fr 1fr 1fr; min-height: 70px; padding: 4px; border-radius: 12px; }
  .courtside-layout .controlDeck > .deckButton, .courtside-layout .controlDeck > .balancePlaque, .courtside-layout .controlDeck > .winReadout { padding: 5px 4px; gap: 4px; }
  .courtside-layout .controlDeck .betButton svg { display: none; }
  .courtside-layout .controlDeck b { font-size: clamp(12px, 3.5vw, 16px); }
  .courtside-layout .controlDeck small, .courtside-layout .controlDeck span { font-size: 8px; letter-spacing: 0; }
  .courtside-layout .slotMachine > .footerNote { font-size: 9px; }
}
@media (max-height: 540px) and (min-width: 541px) {
  .game.courtside-layout { padding-block: 8px; }
  .courtside-layout .slotMachine { width: min(100%, calc((100dvh - 132px) * 1.78 + 136px)); gap: 5px; }
  .courtside-layout .slotStage .reelFrame { aspect-ratio: 1676 / 940; }
  .courtside-layout .slotStage .paylineHint, .courtside-layout .slotStage .message .sub { display: none; }
  .courtside-layout .slotStage .message { min-height: 22px; padding: 0; }
  .courtside-layout .slotStage .message .main { font-size: 12px; }
  .courtside-layout .controlDeck { min-height: 56px; }
  .courtside-layout .controlDeck > .deckButton, .courtside-layout .controlDeck > .balancePlaque, .courtside-layout .controlDeck > .winReadout { min-height: 44px; padding-block: 0; }
  .courtside-layout .slotMachine > .footerNote { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .courtside-layout.is-spinning .spinActions .spinBtn::after { animation: none; } }

/* Tablets and phones give the cabinet the entire row. The existing controls
   share one horizontal row immediately above the information deck. */
@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
  .courtside-layout .slotMachine { width: min(100%, calc((100dvh - 260px) * 1.4)); max-width: 1120px; gap: 10px; }
  .courtside-layout .cabinet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .courtside-layout .slotStage .reelFrame { grid-area: 1 / 1 / 2 / -1; aspect-ratio: 1.4; }
  .courtside-layout .slotStage .paylineHint { grid-area: 2 / 1 / 3 / -1; }
  .courtside-layout .slotStage .message { grid-area: 3 / 1 / 4 / -1; }
  .courtside-layout .freeSpinHud { grid-area: 4 / 1 / 5 / -1; }
  .courtside-layout .slotHeader { grid-area: 5 / 1; top: auto; width: auto; justify-self: center; margin-top: 12px; }
  .courtside-layout .spinActions { display: contents; }
  .courtside-layout .spinActions > button { top: auto; align-self: center; justify-self: center; margin-top: 12px; width: 54px; height: 54px; }
  .courtside-layout .spinActions .turboButton { grid-area: 5 / 2; }
  .courtside-layout .spinActions .spinBtn { grid-area: 5 / 3; width: 76px; height: 76px; }
  .courtside-layout .spinActions .autoButton { grid-area: 5 / 4; width: 58px; height: 58px; }
  .courtside-layout .glassCircle { width: 54px; height: 54px; }
  .courtside-layout .slotHeader .headerActions { top: auto; bottom: calc(100% + 10px); left: 0; transform: none; }
  .courtside-layout .controlDeck { width: 100%; max-width: none; }
}
@media (max-width: 540px) {
  .courtside-layout .slotMachine { width: 100%; }
  .courtside-layout .slotStage .reelFrame { aspect-ratio: 1.05; }
  .courtside-layout .spinActions .spinBtn { width: 70px; height: 70px; }
  .courtside-layout .spinActions .spinBtn::before { font-size: 32px; }
  .courtside-layout .spinActions .spinBtn span { font-size: 11px; }
  .courtside-layout .spinActions > button small { font-size: 9px; }
}
@media (max-height: 540px) and (min-width: 541px) and (max-width: 1180px) {
  .courtside-layout .slotMachine { width: min(100%, calc((100dvh - 185px) * 1.78)); gap: 5px; }
  .courtside-layout .slotStage .reelFrame { aspect-ratio: 1.78; }
  .courtside-layout .spinActions .spinBtn { width: 58px; height: 58px; }
  .courtside-layout .spinActions > button, .courtside-layout .spinActions .autoButton, .courtside-layout .glassCircle { width: 46px; height: 46px; }
  .courtside-layout .slotHeader, .courtside-layout .spinActions > button { margin-top: 5px; }
}