/* Align the live machine with measured surfaces in the 865 × 1819 clearing. */
.veil.fullscreen-section:has(.modal-casino) {
  --casino-scene-width: min(100vw, var(--game-width, 480px));
  --casino-window-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  --casino-scene-height: max(var(--casino-window-height), calc(var(--casino-scene-width) * 1.6));
  --casino-art-unit: max(calc(var(--casino-scene-width) / 865), calc(var(--casino-scene-height) / 1819));
  --casino-art-top: calc((var(--casino-scene-height) - var(--casino-art-unit) * 1819) / 2);
  /* Plant the cabinet on the upper slab, and the controls on the lower step. */
  --casino-machine-base: calc(var(--casino-art-top) + var(--casino-art-unit) * 1175);
  --casino-controls-base: calc(var(--casino-art-top) + var(--casino-art-unit) * 1525);
  --casino-balance-height: calc(var(--casino-scene-width) * .56 * 166 / 880);
  --casino-bets-height: calc(var(--casino-scene-width) * .92 * 542 / 2072);
  background: #0b202b;
}
@supports (height: 100dvh) {
  .veil.fullscreen-section:has(.modal-casino) {
    --casino-window-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }
}
.fullscreen-section .modal-casino .modal-body {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.modal-casino .modal-body::-webkit-scrollbar { display: none; }
.modal-casino .modal-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--casino-scene-height);
  z-index: 0;
  background: #0b202b url('./assets/casino-night-ruby-v1/night-clearing.webp') center / cover no-repeat;
  pointer-events: none;
}
.modal-casino .casino-vfx-host {
  position: absolute;
  z-index: 1;
  top: calc(var(--casino-machine-base) - var(--casino-scene-width) * .75);
  left: 0;
  width: 100%;
  height: calc(var(--casino-scene-width) * .75);
  margin: 0;
}
.modal-casino .casino-vfx-host .korni-stage { height: 100%; margin: 0; }
.modal-casino .modal-body > .korni-controls {
  position: absolute;
  z-index: 2;
  top: calc(var(--casino-controls-base) - var(--casino-balance-height) - var(--casino-bets-height) - 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}