/* Solid game panels with transparent space around and between them. */
:root {
  --game-panel: #181320;
  --game-bg: #100d18;
}

body .royal-home.royal-game-shell :is(.original-game-frame,.royal-game-frame) {
  background: transparent;
  color-scheme: dark;
}
body .royal-home.royal-game-shell :is(.crash-stage,.hl-table) {
  background: radial-gradient(ellipse at 50% 40%,#8f4bc51a,transparent 65%),var(--game-bg);
}
body .royal-home.royal-game-shell :is(.case-reel-stage,.round-history) {
  background-color: var(--game-bg);
}

/* Only desktop rails stretch; mobile controls retain their natural height. */
@media(min-width:761px) {
  body .royal-home.royal-game-shell :is(.blackjack-layout,.dice-layout,.crash-layout,.wheel-layout,.keno-layout,.mines-layout,.hl-layout,.roulette-stage,.arrow-stage,.case-opening-panel) {
    align-items: stretch;
  }
  body .royal-home.royal-game-shell :is(.royal-controls,.keno-controls,.mines-panel,.roulette-betting,.arrow-betting,.case-open-controls,.case-reel-stage) {
    align-self: stretch;
  }
  body .royal-home.royal-game-shell .round-bets-panel {
    align-self: stretch;
    max-height: none;
    min-height: 0;
    contain: size;
    display: flex;
    flex-direction: column;
  }
  body .royal-home.royal-game-shell .round-bets-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
  }
}

/* Originals run inside an iframe: never paint a solid page behind their cards. */
html:has(body > main > #game),
body:has(> main > #game) {
  background: transparent;
  color-scheme: dark;
}
body:has(> main > #game) main {
  box-sizing: border-box;
  padding: 2px;
  width: 100%;
  min-width: 0;
}
#game .game-panel {
  box-shadow: none;
  background: transparent;
  min-width: 0;
}
#game :is(.game-layout,.game-layout > *,#arena,.limbo-stage) {
  box-sizing: border-box;
  min-width: 0;
}
#game .baccarat-table {
  background: radial-gradient(ellipse at 50% 15%,#75499320,transparent 75%);
}
@media(min-width:761px) {
  #game .game-layout { align-items: stretch; }
  #game .controls { align-self: stretch; }
  #game .round-sidebar {
    align-self: stretch;
    max-height: none;
    contain: size;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #game .round-sidebar #roundBets { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
}