/* The machine and the pedestal use separate coordinate spaces from layout.json. */
.veil:has(.modal-casino) { background: radial-gradient(ellipse at 50% 35%, #263a37e8, #121c24f5 75%); }
.modal-casino { border-radius: 0; background: none; box-shadow: none; }
.modal-casino .modal-body { padding: 8px 0 10px; }

.modal-casino .korni-stage {
  width: 100%;
  aspect-ratio: 1000 / 750;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.slot-sprite {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  object-fit: fill;
}
.slot-gear { left: 2.6%; top: 41.4667%; width: 25.9%; height: 33.6493%; transform-origin: 50.24% 49.2611%; }
.slot-cabinet { z-index: 1; left: 12.6%; top: 0; width: 74.8%; height: 99.7333%; }
.slot-arm {
  z-index: 4;
  left: 77.385%;
  top: 14.5227%;
  width: 8.849%;
  height: 45.8667%;
  transform-origin: 19.38% 97.41%;
  transform: rotate(8deg);
}
.slot-hub { z-index: 5; left: 75.572%; top: 53.9773%; width: 7%; height: 9.7773%; }
.korni-stage .slot-reels {
  position: absolute;
  z-index: 2;
  inset: 0;
  height: auto;
  display: block;
  pointer-events: none;
}
.korni-stage .slot-reel {
  position: absolute;
  top: 34.2667%;
  height: 54.1333%;
  border-radius: 10% / 5%;
}
.korni-stage .slot-reel:nth-child(1) { left: 25.6%; width: 15%; }
.korni-stage .slot-reel:nth-child(2) { left: 43%; width: 14%; }
.korni-stage .slot-reel:nth-child(3) { left: 59.8%; width: 14.5%; }
.korni-stage .slot-reel::after {
  background: linear-gradient(#1e100733, transparent 15% 86%, #1e100749);
  box-shadow: none;
}
.korni-stage .reel-track {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% * var(--rows) / 3);
  display: flex;
  flex-direction: column;
}
.korni-stage .reel-symbol { height: auto; flex: 1 1 0; min-height: 0; padding: 0; }
.korni-stage .reel-symbol img {
  width: 89%;
  height: 90%;
  min-height: 0;
  filter: drop-shadow(0 1.5px 1.5px #31170b75);
}
.korni-stage .slot-payline {
  left: 25%;
  right: 24.5%;
  top: 61.3333%;
  transform: translateY(-50%);
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e59e3b, #ffe1a0 14% 86%, #e59e3b);
  box-shadow: 0 0 4px #ffbf5688;
  opacity: .75;
  animation: none;
}
.korni-stage.has-win .slot-payline { height: 2px; opacity: 1; box-shadow: 0 0 6px #ffbf56; }
.korni-stage .slot-lever {
  z-index: 6;
  left: 86.655%;
  right: auto;
  top: 21.04%;
  width: 10%;
  height: 13.3333%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 42%;
  transform: translate(-50%, -50%);
  touch-action: none;
  transition: none;
}
.korni-stage .slot-lever:focus-visible { outline: 2px solid #ffe6a3; outline-offset: 3px; }
.korni-stage .slot-lever:disabled { cursor: wait; }

.korni-controls { container-type: inline-size; padding-bottom: 2px; }
.korni-pedestal {
  position: relative;
  isolation: isolate;
  width: 81%;
  aspect-ratio: 1000 / 330;
  min-height: 96px;
  margin: -1% auto 0;
}
.slot-slate { inset: 0; width: 100%; height: 100%; }
.korni-pedestal .casino-balance {
  position: absolute;
  left: 28%;
  top: 4.85%;
  width: 44%;
  height: 22.73%;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 1px #14131a;
}
.korni-pedestal .casino-balance b { font-size: clamp(13px, 4.35cqw, 22px); }
.korni-pedestal .currency-art { width: clamp(15px, 4.4cqw, 22px); height: auto; aspect-ratio: 1; flex: none; }
.korni-pedestal .slot-stakes {
  position: absolute;
  left: 8.2%;
  top: 33.64%;
  width: 83.6%;
  height: 50.3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  margin: 0;
}
.korni-pedestal .slot-stakes button {
  min-height: 44px;
  height: 78%;
  padding: 0 2px;
  border: 1px solid #ba9060;
  border-radius: 8px;
  background: linear-gradient(#2e4c4b, #223636);
  color: #ffe3ac;
  box-shadow: inset 0 1px #ffffff20, 0 2px 3px #0008;
  font-size: clamp(12px, 4.1cqw, 18px);
  white-space: nowrap;
}
.korni-pedestal .slot-stakes button[aria-pressed="true"] {
  border-color: #ffd581;
  background: linear-gradient(#53752a, #334e17);
  box-shadow: inset 0 1px #ffffff40, 0 2px 3px #0008;
  opacity: 1;
  filter: none;
}
.korni-controls .slot-result { min-height: 32px; padding: 7px 8px 2px; }
.korni-controls .free-spins-badge { width: 81%; margin: 2px auto 0; padding: 4px 6px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .korni-controls .slot-result { animation: none; }
}