.slot-mode {
  --slot-skin-background: url("./assets/slot-ui/pass01/png/10-background-chrome.png");
  --slot-skin-machine-frame: url("./assets/slot-ui/pass01/png/01-machine-frame.png");
  --slot-skin-reel-bay: url("./assets/slot-ui/pass01/png/02-reel-bay.png");
  --slot-skin-top-telemetry: url("./assets/slot-ui/pass01/png/03-top-telemetry.png");
  --slot-skin-control-readouts: url("./assets/slot-ui/pass02/png/03a-readout-strip.png");
  --slot-skin-control-deck: url("./assets/slot-ui/pass02/png/03b-button-deck.png");
  --slot-skin-lever-grip: url("./assets/slot-ui/pass02/png/04a-lever-grip.png");
  --slot-skin-lever-shaft: url("./assets/slot-ui/pass02/png/04b-lever-shaft.png");
  --slot-skin-lever-base: url("./assets/slot-ui/pass02/png/04c-lever-base-cutout.png");
  --slot-skin-win-table: url("./assets/slot-ui/pass01/png/06-win-table-panel.png");
  --slot-skin-result-banner: url("./assets/slot-ui/pass01/png/07-result-banner.png");
  --slot-skin-bottom-rail: url("./assets/slot-ui/pass01/png/08-bottom-status-rail.png");
  --slot-skin-side-tab: url("./assets/slot-ui/pass02/png/02-side-payline-tab.png");
}

.poster > [data-mode-panel] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  filter: blur(1.1rem);
  clip-path: inset(6% 0 6% 0);
  transition:
    opacity 620ms var(--ease-out),
    filter 760ms var(--ease-out),
    clip-path 820ms var(--ease-out),
    visibility 0ms linear 820ms;
}

.poster > [data-mode-panel].is-mode-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 620ms var(--ease-out),
    filter 760ms var(--ease-out),
    clip-path 820ms var(--ease-out),
    visibility 0ms;
}

.poster > [data-mode-panel].is-mode-exiting {
  opacity: 0;
  filter: blur(0.74rem);
  clip-path: inset(0 0 100% 0);
}

.poster-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 43%, color-mix(in srgb, var(--color-primary) 44%, transparent) 50%, transparent 57%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent-cyan) 22%, transparent), transparent);
}

body.is-switching .poster-noise::after {
  animation: mode-scan-wipe 840ms var(--ease-out) both;
}

body.is-switching .poster {
  box-shadow:
    inset 0 0 5rem color-mix(in srgb, var(--color-primary) 10%, transparent),
    0 0 4rem color-mix(in srgb, var(--color-accent-cyan) 12%, transparent);
}

.slot-mode {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1.05rem;
  height: 100%;
  padding: 8.1rem 4.6rem 6.25rem;
  overflow: visible;
}

.slot-mode::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/background/hud-background-1920x1080.svg") center / 100% 100% no-repeat,
    radial-gradient(circle at 26% 42%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 29rem),
    radial-gradient(circle at 78% 48%, color-mix(in srgb, var(--color-accent-cyan) 10%, transparent), transparent 24rem);
  mix-blend-mode: screen;
}

.slot-masthead {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
}

.slot-top-status,
.slot-payline-tab,
.slot-bottom-rail {
  display: none;
}

.slot-hint-sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.slot-brand {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 8.75rem;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  text-shadow:
    0 0 16px var(--color-primary-glow),
    0 0 58px var(--color-primary-glow);
}

.slot-status-rail {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1rem;
  min-width: 23rem;
  justify-content: center;
  padding: 0.82rem 1.2rem 0.74rem;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--color-panel-wash), transparent 62%),
    var(--color-bg-glass);
  box-shadow: var(--shadow-glow-green);
  font-family: var(--font-vcr);
  letter-spacing: 0;
  text-transform: uppercase;
  backdrop-filter: blur(20px);
}

.slot-status-label {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.slot-status-rail strong {
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 400;
}

.slot-stage {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 47.5rem);
  perspective: 56rem;
  perspective-origin: 96% 42%;
  transform-style: preserve-3d;
  transform: translateX(-5.25rem);
}

.slot-machine {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: 100%;
  min-height: 44.5rem;
  overflow: hidden;
  padding: 1.4rem 2rem 1.55rem;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/panels/panel-frame-large.svg") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 16rem),
    radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--color-accent-cyan) 14%, transparent), transparent 13rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 82%, transparent), var(--color-bg-base));
  box-shadow:
    var(--shadow-glow-green-strong),
    inset 0 0 2.8rem color-mix(in srgb, var(--color-primary) 12%, transparent);
  backdrop-filter: blur(20px);
}

.slot-machine::before,
.slot-machine::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.slot-machine::before {
  inset: 0;
  opacity: 0.34;
  background-image:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/png/textures/noise-alpha-128.png"),
    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 8rem 8rem, 100% 0.55rem, 0.55rem 100%;
  mix-blend-mode: screen;
}

.slot-machine::after {
  inset: -45% -35%;
  background: linear-gradient(
    116deg,
    transparent 32%,
    color-mix(in srgb, var(--color-text-primary) 10%, transparent) 44%,
    transparent 56%
  );
  animation: slot-sheen 4.8s ease-in-out infinite;
}

.slot-machine[data-state="armed"] {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    inset 0 0 2.8rem color-mix(in srgb, var(--color-accent-cyan) 13%, transparent);
}

.slot-machine[data-state="locked"] {
  border-color: color-mix(in srgb, var(--color-accent-orange) 48%, transparent);
  box-shadow:
    var(--shadow-glow-orange),
    inset 0 0 2.7rem color-mix(in srgb, var(--color-accent-orange) 8%, transparent);
}

.slot-machine[data-state="spinning"] {
  border-color: var(--color-accent-pink);
  box-shadow:
    var(--shadow-glow-pink),
    inset 0 0 3.2rem color-mix(in srgb, var(--color-accent-pink) 15%, transparent);
}

.slot-machine.is-super-hot {
  border-color: var(--color-accent-pink);
  box-shadow:
    var(--shadow-glow-pink),
    0 0 4.5rem color-mix(in srgb, var(--color-accent-cyan) 18%, transparent),
    inset 0 0 4.2rem color-mix(in srgb, var(--color-accent-pink) 22%, transparent);
  animation: super-hot-machine 480ms steps(2, end) infinite;
}

.slot-machine.is-super-hot .slot-machine__crown span:last-child,
.slot-machine.is-super-hot .slot-machine__footer span:first-child {
  color: var(--color-accent-pink);
  text-shadow:
    0 0 0.8rem color-mix(in srgb, var(--color-accent-pink) 58%, transparent),
    0 0 1.6rem color-mix(in srgb, var(--color-accent-cyan) 34%, transparent);
}

.slot-machine.is-miss-cue {
  border-color: var(--color-accent-orange);
  box-shadow:
    var(--shadow-glow-orange),
    inset 0 0 3.4rem color-mix(in srgb, var(--color-accent-orange) 18%, transparent);
  animation: miss-cue-machine 680ms steps(3, end) 2;
}

.slot-machine.is-loss-cue,
.slot-machine.is-denied-cue {
  border-color: var(--color-accent-orange);
  box-shadow:
    var(--shadow-glow-orange),
    0 0 4.4rem color-mix(in srgb, var(--color-accent-pink) 18%, transparent),
    inset 0 0 3.6rem color-mix(in srgb, var(--color-accent-orange) 20%, transparent);
  animation: denied-machine 520ms steps(2, end) 3;
}

.slot-machine.is-miss-cue .slot-machine__footer span:first-child {
  color: var(--color-accent-orange);
  text-shadow:
    0 0 0.8rem color-mix(in srgb, var(--color-accent-orange) 54%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--color-accent-pink) 28%, transparent);
}

.slot-machine.is-credit-cue,
.slot-machine.is-drink-cue,
.slot-machine.is-win-cue,
.slot-machine.is-major-win-cue,
.slot-machine.is-jackpot-cue {
  animation: win-machine-blink 440ms steps(2, end) infinite;
}

.slot-machine.is-credit-cue {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    inset 0 0 3rem color-mix(in srgb, var(--color-accent-cyan) 18%, transparent);
}

.slot-machine.is-drink-cue {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    0 0 4.8rem color-mix(in srgb, var(--color-primary) 18%, transparent),
    inset 0 0 3.4rem color-mix(in srgb, var(--color-accent-cyan) 20%, transparent);
}

.slot-machine.is-win-cue,
.slot-machine.is-major-win-cue,
.slot-machine.is-jackpot-cue {
  border-color: var(--color-primary);
  box-shadow:
    var(--shadow-glow-green-strong),
    0 0 5.4rem color-mix(in srgb, var(--color-accent-cyan) 20%, transparent),
    inset 0 0 4.2rem color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.slot-machine.is-major-win-cue,
.slot-machine.is-jackpot-cue {
  animation:
    win-machine-blink 320ms steps(2, end) infinite,
    jackpot-halo 920ms ease-in-out infinite;
}

.slot-reels::before,
.slot-reels::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 0.52rem;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle, var(--color-primary) 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle, var(--color-accent-cyan) 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle, var(--color-accent-pink) 0 0.16rem, transparent 0.18rem);
  background-position: 0 50%, 1.1rem 50%, 2.2rem 50%;
  background-size: 3.3rem 100%;
  filter: drop-shadow(0 0 0.72rem var(--color-primary-glow));
}

.slot-reels::before {
  top: 1.55rem;
}

.slot-reels::after {
  bottom: 1.25rem;
}

.slot-machine.is-credit-cue .slot-reels::before,
.slot-machine.is-credit-cue .slot-reels::after,
.slot-machine.is-drink-cue .slot-reels::before,
.slot-machine.is-drink-cue .slot-reels::after,
.slot-machine.is-win-cue .slot-reels::before,
.slot-machine.is-win-cue .slot-reels::after,
.slot-machine.is-major-win-cue .slot-reels::before,
.slot-machine.is-major-win-cue .slot-reels::after,
.slot-machine.is-jackpot-cue .slot-reels::before,
.slot-machine.is-jackpot-cue .slot-reels::after {
  opacity: 1;
  animation: bulb-chase 560ms steps(3, end) infinite;
}

.slot-signal-stack {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.42rem;
  padding: 0.34rem;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 86%, transparent), var(--color-bg-base)),
    var(--color-bg-glass);
  box-shadow:
    inset 0 0 0.7rem color-mix(in srgb, var(--color-primary) 10%, transparent),
    var(--shadow-glow-green);
}

.slot-signal-bulb {
  width: 1.1rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 24%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--color-text-primary) 65%, transparent), transparent 20%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, currentColor 36%, transparent), color-mix(in srgb, currentColor 16%, var(--color-bg-base)) 64%);
  color: var(--color-text-muted);
  opacity: 0.36;
  box-shadow:
    inset 0 -0.18rem 0.3rem color-mix(in srgb, var(--color-bg-base) 70%, transparent),
    0 0 0.36rem color-mix(in srgb, currentColor 24%, transparent);
}

.slot-signal-bulb--red {
  color: var(--color-accent-orange);
}

.slot-signal-bulb--amber {
  color: var(--color-accent-pink);
}

.slot-signal-bulb--green {
  color: var(--color-primary);
}

.slot-machine[data-state="locked"] .slot-signal-bulb--red,
.slot-machine.is-denied-cue .slot-signal-bulb--red,
.slot-machine.is-loss-cue .slot-signal-bulb--red,
.slot-machine[data-state="armed"] .slot-signal-bulb--green,
.slot-machine[data-state="spinning"] .slot-signal-bulb--amber,
.slot-machine.is-super-hot .slot-signal-bulb--amber,
.slot-machine.is-credit-cue .slot-signal-bulb--green,
.slot-machine.is-drink-cue .slot-signal-bulb--green,
.slot-machine.is-win-cue .slot-signal-bulb--green,
.slot-machine.is-major-win-cue .slot-signal-bulb--green,
.slot-machine.is-jackpot-cue .slot-signal-bulb--green {
  opacity: 1;
  box-shadow:
    inset 0 -0.14rem 0.28rem color-mix(in srgb, var(--color-bg-base) 54%, transparent),
    0 0 0.9rem color-mix(in srgb, currentColor 72%, transparent),
    0 0 1.7rem color-mix(in srgb, currentColor 42%, transparent);
}

.slot-machine.is-super-hot .slot-signal-bulb--amber,
.slot-machine.is-denied-cue .slot-signal-bulb--red,
.slot-machine.is-loss-cue .slot-signal-bulb--red,
.slot-machine.is-jackpot-cue .slot-signal-bulb--green {
  animation: analog-bulb-flicker 360ms steps(2, end) infinite;
}

.slot-machine__crown,
.slot-machine__footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-vcr);
  letter-spacing: 0;
  text-transform: uppercase;
}

.slot-machine__crown {
  grid-template-columns: 1fr 0.82fr 0.92fr;
  padding: 0.8rem 0.92rem 0.74rem;
  border-bottom: 1px solid var(--color-border-primary);
  color: var(--color-primary);
  font-size: 1rem;
}

.slot-module {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.66rem 0.74rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--color-border-primary) 68%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-bg-base) 78%, transparent);
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.slot-module b,
.slot-module i {
  display: block;
  overflow: hidden;
  font-style: normal;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-module b {
  color: var(--color-accent-cyan);
  font-size: 0.66rem;
}

.slot-module i {
  color: var(--color-primary);
  font-size: 0.94rem;
}

.slot-module--payout b {
  color: var(--color-accent-orange);
}

.slot-module--payout i {
  color: var(--color-text-primary);
  font-size: 1.1rem;
  text-shadow: 0 0 1rem color-mix(in srgb, var(--color-primary) 34%, transparent);
}

.slot-module--payout small {
  color: var(--color-primary);
  font-size: 0.58em;
}

.slot-module--state i {
  color: var(--color-primary);
  text-transform: uppercase;
}

.slot-module--signal i {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 0.18rem;
  height: 1.05rem;
}

.slot-module--signal em {
  display: block;
  min-height: 0.24rem;
  background: var(--color-primary);
  box-shadow: 0 0 0.72rem color-mix(in srgb, var(--color-primary) 72%, transparent);
}

.slot-module--signal em:nth-child(2) {
  min-height: 0.38rem;
}

.slot-module--signal em:nth-child(3) {
  min-height: 0.55rem;
}

.slot-module--signal em:nth-child(4) {
  min-height: 0.72rem;
}

.slot-module--signal em:nth-child(5) {
  min-height: 0.9rem;
}

.slot-module--signal em:nth-child(6) {
  min-height: 1.05rem;
}

.slot-reels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: center;
  padding: 2.6rem 0 2.2rem;
}

.slot-reel {
  position: relative;
  min-width: 0;
  padding: 0.66rem;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/machine/reel-window-frame.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 34%),
    var(--color-bg-base);
  box-shadow:
    inset 0 0 1.9rem color-mix(in srgb, var(--color-primary) 11%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.slot-reel::before,
.slot-reel::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  height: 28%;
  pointer-events: none;
}

.slot-reel::before {
  top: 0.65rem;
  background: linear-gradient(180deg, var(--color-bg-base), transparent);
}

.slot-reel::after {
  bottom: 0.65rem;
  background: linear-gradient(0deg, var(--color-bg-base), transparent);
}

.slot-reel__window {
  position: relative;
  display: grid;
  height: 20.4rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 8.5rem),
    linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-base));
}

.slot-reel__window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.62;
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/machine/reel-glass-overlay.svg") center / 100% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--color-text-primary) 13%, transparent), transparent 34%);
  mix-blend-mode: screen;
}

.slot-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  color: var(--color-primary);
}

.slot-strip {
  width: 100%;
  will-change: transform, filter;
}

.slot-strip-item {
  display: grid;
  height: var(--strip-item-h, 20.4rem);
  place-items: center;
}

.slot-glyph {
  display: grid;
  gap: 0.34rem;
  width: 13rem;
  place-items: center;
  color: var(--color-primary);
  text-align: center;
}

.slot-glyph img {
  width: 100%;
  height: 11.9rem;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 0 0.72rem color-mix(in srgb, currentColor 50%, transparent))
    drop-shadow(0 0 1.5rem color-mix(in srgb, currentColor 26%, transparent));
}

.slot-glyph span {
  color: var(--color-text-secondary);
  font-family: var(--font-vcr);
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slot-glyph--coin {
  color: var(--color-accent-cyan);
}

.slot-glyph--seven {
  color: var(--color-primary);
}

.slot-glyph--diamond {
  color: var(--color-accent-cyan);
}

.slot-glyph--coin span,
.slot-glyph--seven span,
.slot-glyph--diamond span {
  color: currentColor;
  text-shadow:
    0 0 0.7rem color-mix(in srgb, currentColor 38%, transparent),
    0 0 1.4rem color-mix(in srgb, currentColor 22%, transparent);
}

.slot-glyph--bonus {
  color: var(--color-accent-pink);
}

.slot-glyph--beers {
  color: var(--color-primary);
}

.slot-glyph--shots,
.slot-glyph--respin {
  color: var(--color-accent-cyan);
}

.slot-illustration {
  position: relative;
  display: grid;
  width: 12.2rem;
  height: 12.2rem;
  place-items: center;
  color: currentColor;
  filter:
    drop-shadow(0 0 0.76rem color-mix(in srgb, currentColor 42%, transparent))
    drop-shadow(0 0 1.4rem color-mix(in srgb, currentColor 22%, transparent));
}

.slot-illustration::before,
.slot-illustration::after,
.slot-illustration i {
  content: "";
  position: absolute;
  display: block;
}

.slot-illustration--respin::before {
  width: 7rem;
  height: 7rem;
  border: 0.58rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.slot-illustration--respin::after {
  top: 2.22rem;
  right: 2.2rem;
  border-top: 1.15rem solid transparent;
  border-bottom: 1.15rem solid transparent;
  border-left: 1.85rem solid currentColor;
}

.slot-illustration--respin i {
  width: 2rem;
  height: 2rem;
  border: 0.35rem solid currentColor;
  border-radius: 50%;
}

.slot-illustration--beers i,
.slot-illustration--shots i {
  bottom: 2rem;
  width: 3.3rem;
  border: 0.32rem solid currentColor;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-text-primary) 42%, transparent), transparent 18%),
    linear-gradient(180deg, transparent 22%, color-mix(in srgb, currentColor 26%, transparent) 24% 100%);
}

.slot-illustration--beers i {
  height: 6.1rem;
  border-radius: 0.32rem 0.32rem 0.78rem 0.78rem;
}

.slot-illustration--beers i::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  right: -1.35rem;
  width: 1.4rem;
  height: 2.4rem;
  border: 0.28rem solid currentColor;
  border-left: 0;
  border-radius: 0 0.8rem 0.8rem 0;
}

.slot-illustration--shots i {
  height: 5.6rem;
  clip-path: polygon(15% 0, 85% 0, 68% 100%, 32% 100%);
}

.slot-illustration--beers i:first-child,
.slot-illustration--shots i:first-child {
  left: 2.45rem;
  transform: rotate(-7deg);
}

.slot-illustration--beers i:last-child,
.slot-illustration--shots i:last-child {
  right: 2.45rem;
  transform: rotate(7deg);
}

.slot-reel.is-spinning {
  border-color: var(--color-accent-pink);
  box-shadow:
    var(--shadow-glow-pink),
    inset 0 0 2.3rem color-mix(in srgb, var(--color-accent-pink) 12%, transparent);
}

.slot-reel.is-spinning .slot-symbol {
  color: var(--color-accent-cyan);
}

.slot-reel.is-spinning .slot-reel__window {
  background:
    linear-gradient(180deg, var(--color-bg-base), transparent 14%, transparent 82%, var(--color-bg-base)),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent-pink) 14%, transparent), transparent 8.5rem),
    linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-base));
}

.slot-reel.is-braking {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    inset 0 0 2.4rem color-mix(in srgb, var(--color-accent-cyan) 13%, transparent);
}

.slot-reel.is-hot {
  border-color: var(--color-accent-pink);
  box-shadow:
    var(--shadow-glow-pink),
    0 0 3.3rem color-mix(in srgb, var(--color-accent-cyan) 20%, transparent),
    inset 0 0 3rem color-mix(in srgb, var(--color-accent-pink) 18%, transparent);
  animation: super-hot-reel 360ms steps(2, end) infinite;
}

.slot-reel.is-hot .slot-reel__window {
  background:
    linear-gradient(180deg, var(--color-bg-base), transparent 12%, transparent 84%, var(--color-bg-base)),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent-pink) 22%, transparent), transparent 8.5rem),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-accent-cyan) 16%, transparent), transparent 11rem),
    linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-base));
}

.slot-reel.is-hot .slot-symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 0.62rem,
      color-mix(in srgb, var(--color-text-primary) 16%, transparent) 0.62rem 0.7rem
    );
  mix-blend-mode: screen;
  opacity: 0.52;
  animation: super-hot-scan 620ms linear infinite;
}

.slot-reel.is-miss {
  border-color: var(--color-accent-orange);
  box-shadow:
    var(--shadow-glow-orange),
    inset 0 0 2.6rem color-mix(in srgb, var(--color-accent-orange) 15%, transparent);
}

.slot-reel.is-miss .slot-reel__window {
  background:
    linear-gradient(180deg, var(--color-bg-base), transparent 14%, transparent 82%, var(--color-bg-base)),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent-orange) 16%, transparent), transparent 8.5rem),
    linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-base));
}

.slot-reel.is-credit-cue,
.slot-reel.is-drink-cue,
.slot-reel.is-win-cue,
.slot-reel.is-major-win-cue,
.slot-reel.is-jackpot-cue {
  animation: reel-win-pop 360ms steps(2, end) infinite;
}

.slot-reel.is-credit-cue {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    inset 0 0 2.2rem color-mix(in srgb, var(--color-accent-cyan) 15%, transparent);
}

.slot-reel.is-drink-cue {
  border-color: var(--color-accent-cyan);
  box-shadow:
    var(--shadow-glow-cyan),
    inset 0 0 2.6rem color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.slot-reel.is-loss-cue {
  border-color: var(--color-accent-orange);
  box-shadow:
    var(--shadow-glow-orange),
    inset 0 0 2.8rem color-mix(in srgb, var(--color-accent-orange) 16%, transparent);
  animation: loose-reel-shudder 520ms steps(2, end) 3;
}

.slot-reel.is-win-cue,
.slot-reel.is-major-win-cue,
.slot-reel.is-jackpot-cue {
  border-color: var(--color-primary);
  box-shadow:
    var(--shadow-glow-green-strong),
    inset 0 0 2.8rem color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.slot-reel.is-locked {
  border-color: var(--color-primary);
  box-shadow:
    var(--shadow-glow-green),
    inset 0 0 2.2rem color-mix(in srgb, var(--color-primary) 13%, transparent);
}

.slot-lever {
  position: absolute;
  left: calc(100% - 1rem);
  bottom: 3.95rem;
  z-index: 4;
  width: 8.2rem;
  height: 29rem;
  pointer-events: none;
  perspective: 50rem;
  perspective-origin: 42% 18%;
  transform-style: preserve-3d;
}

.slot-lever__base,
.slot-lever__arm,
.slot-lever__shaft,
.slot-lever__grip {
  position: absolute;
  display: block;
}

.slot-lever__base {
  right: 2.55rem;
  bottom: 0;
  width: 3.8rem;
  height: 3.15rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 36% 36% 18% 18%;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-text-primary) 28%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 84%, transparent), var(--color-bg-base));
  box-shadow:
    inset 0 0 0.8rem color-mix(in srgb, var(--color-primary) 10%, transparent),
    var(--shadow-glow-green);
}

.slot-lever__arm {
  right: 3.8rem;
  bottom: 1.55rem;
  width: 2rem;
  height: 25.5rem;
  transform:
    translateY(var(--lever-drop, 0rem))
    rotateX(var(--lever-tilt, -8deg))
    translateZ(var(--lever-depth, 0rem));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
  will-change: transform;
}

.slot-lever__shaft {
  right: 0.68rem;
  bottom: 1.95rem;
  width: 0.66rem;
  height: 20.5rem;
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 34%, transparent);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-text-primary) 34%, transparent), transparent 26% 64%, color-mix(in srgb, var(--color-bg-base) 55%, transparent)),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-text-primary) 58%, var(--color-bg-base)),
      color-mix(in srgb, var(--color-accent-cyan) 28%, var(--color-bg-base)) 58%,
      color-mix(in srgb, var(--color-bg-elevated) 68%, var(--color-bg-base))
    );
  box-shadow:
    inset 0 0 0.42rem color-mix(in srgb, var(--color-text-primary) 18%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--color-accent-cyan) 18%, transparent);
  transform: rotateY(-8deg) translateZ(0.18rem);
  transform-origin: 50% 100%;
}

.slot-lever__shaft::before {
  content: "";
  position: absolute;
  inset: 0.6rem 0.11rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-text-primary) 36%, transparent), transparent 38%);
  opacity: 0.54;
}

.slot-lever__grip {
  right: -0.44rem;
  top: 0;
  width: 3rem;
  height: 5.4rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-pink) 64%, transparent);
  border-radius: 48% 48% 34% 34%;
  background:
    radial-gradient(circle at 42% 16%, color-mix(in srgb, var(--color-text-primary) 52%, transparent), transparent 18%),
    repeating-linear-gradient(165deg, transparent 0 0.44rem, color-mix(in srgb, var(--color-bg-base) 35%, transparent) 0.44rem 0.58rem),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent-orange) 46%, var(--color-primary)),
      color-mix(in srgb, var(--color-accent-orange) 22%, var(--color-bg-base)) 48%,
      color-mix(in srgb, var(--color-bg-elevated) 74%, var(--color-bg-base))
    );
  box-shadow:
    inset 0 0 0.62rem color-mix(in srgb, var(--color-primary) 16%, transparent),
    var(--shadow-glow-pink);
  transform: translateZ(0.92rem) scale(var(--lever-grip-scale, 1));
  transform-origin: 50% 100%;
}

.slot-lever__grip::before,
.slot-lever__grip::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  right: 0.36rem;
  height: 0.32rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary) 54%, transparent);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.slot-lever__grip::before {
  top: 1.12rem;
}

.slot-lever__grip::after {
  bottom: 1.06rem;
}

.slot-lever.is-lever-pulled .slot-lever__base {
  border-color: var(--color-accent-pink);
  box-shadow:
    var(--shadow-glow-pink),
    inset 0 0 0.92rem color-mix(in srgb, var(--color-accent-pink) 14%, transparent);
}

.slot-machine[data-state="armed"] + .slot-lever .slot-lever__grip {
  border-color: var(--color-accent-cyan);
  box-shadow: var(--shadow-glow-cyan);
}

.slot-machine[data-state="locked"] + .slot-lever .slot-lever__base,
.slot-machine[data-state="locked"] + .slot-lever .slot-lever__grip,
.slot-machine.is-denied-cue + .slot-lever .slot-lever__grip {
  border-color: color-mix(in srgb, var(--color-accent-orange) 62%, transparent);
  box-shadow: var(--shadow-glow-orange);
}

.slot-machine[data-state="spinning"] + .slot-lever .slot-lever__grip,
.slot-machine.is-super-hot + .slot-lever .slot-lever__grip {
  border-color: var(--color-accent-pink);
  box-shadow: var(--shadow-glow-pink);
}

.slot-machine.is-super-hot + .slot-lever .slot-lever__grip,
.slot-machine.is-jackpot-cue + .slot-lever .slot-lever__grip {
  animation: lever-grip-flicker 420ms steps(2, end) infinite;
}

.slot-machine.is-denied-cue + .slot-lever .slot-lever__arm {
  animation: lever-denied-kick 180ms steps(2, end) 4;
}

.slot-machine[data-state="armed"] .slot-machine__footer span:first-child {
  color: var(--color-accent-cyan);
}

.slot-machine[data-state="locked"] .slot-machine__footer span:first-child,
.slot-machine.is-denied-cue .slot-machine__footer span:first-child {
  color: var(--color-accent-orange);
}

.slot-machine[data-state="spinning"] .slot-machine__footer span:first-child {
  color: var(--color-accent-pink);
}

.slot-machine.is-denied-cue .slot-machine__footer span:first-child {
  text-shadow:
    0 0 0.9rem color-mix(in srgb, var(--color-accent-orange) 58%, transparent),
    0 0 1.6rem color-mix(in srgb, var(--color-accent-pink) 32%, transparent);
}

.slot-machine__footer {
  padding: 0.78rem 0.92rem 0.2rem;
  border-top: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.slot-machine__footer span:last-child {
  color: var(--color-primary);
}

.slot-control-deck {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 0.52fr 1.24fr 0.52fr 0.85fr;
  gap: 0.54rem;
  padding: 0.78rem 0.92rem 0.86rem;
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/panels/control-deck-frame.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent);
}

.slot-deck-btn {
  display: grid;
  min-height: 2.5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-border-primary) 72%, transparent);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-text-primary) 8%, transparent), transparent),
    color-mix(in srgb, var(--color-bg-base) 74%, transparent);
  box-shadow: inset 0 0 0.9rem color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-family: var(--font-vcr);
  font-size: 0.7rem;
  line-height: 1;
  text-transform: uppercase;
}

.slot-deck-btn--spin {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/controls/spin-button-idle.svg") center / 100% 100% no-repeat,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-base));
  box-shadow:
    var(--shadow-glow-green),
    inset 0 0 1.2rem color-mix(in srgb, var(--color-primary) 16%, transparent);
  font-size: 1.1rem;
}

.slot-deck-btn--icon {
  color: var(--color-accent-cyan);
}

.slot-paytable {
  position: relative;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 47.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-accent-cyan) 48%, transparent);
  border-radius: var(--radius-lg);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/panels/paytable-frame.svg") center / 100% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent-cyan) 10%, transparent), transparent 64%),
    var(--color-bg-overlay);
  box-shadow: var(--shadow-glow-cyan);
  backdrop-filter: blur(20px);
}

.slot-paytable > span {
  display: grid;
  gap: 0.28rem;
  min-height: 4.6rem;
  align-content: center;
  padding: 0.68rem 0.72rem 0.62rem;
  border-left: 1px solid var(--color-border-subtle);
  text-align: center;
}

.slot-paytable > span:first-child {
  border-left: 0;
}

.slot-paytable b,
.slot-paytable strong,
.slot-paytable small {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slot-paytable b {
  color: var(--color-text-secondary);
  font-family: var(--font-vcr);
  font-size: 0.82rem;
}

.slot-paytable strong {
  color: var(--color-accent-cyan);
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 0.9;
  text-shadow: 0 0 1rem color-mix(in srgb, var(--color-accent-cyan) 38%, transparent);
}

.slot-paytable__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-height: 2.7rem;
}

.slot-paytable__icons img {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: contain;
  filter:
    drop-shadow(0 0 0.48rem color-mix(in srgb, var(--color-accent-cyan) 36%, transparent))
    drop-shadow(0 0 0.9rem color-mix(in srgb, var(--color-primary) 18%, transparent));
}

.slot-result {
  position: relative;
  justify-self: center;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem;
  width: min(100%, 47.5rem);
  min-height: 6.5rem;
  padding: 1.25rem 1.55rem 1.1rem;
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/panels/result-banner-frame.svg") center / 100% 100% no-repeat,
    linear-gradient(90deg, var(--color-panel-wash), transparent 64%),
    var(--color-bg-overlay);
  box-shadow: var(--shadow-glow-green);
  backdrop-filter: blur(20px);
}

.slot-result::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 0.32rem solid var(--color-primary);
}

.slot-result__label {
  color: var(--color-text-muted);
  font-family: var(--font-vcr);
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slot-result strong {
  justify-self: end;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: right;
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-transform: uppercase;
}

.slot-result[data-tier="loss"],
.slot-result[data-tier="bonus_loss"] {
  border-color: color-mix(in srgb, var(--color-accent-pink) 62%, transparent);
  box-shadow: var(--shadow-glow-pink);
}

.slot-result[data-tier="loss"]::before,
.slot-result[data-tier="bonus_loss"]::before {
  border-left-color: var(--color-accent-pink);
}

.slot-result[data-tier="loss"] strong,
.slot-result[data-tier="bonus_loss"] strong {
  color: var(--color-accent-pink);
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--color-accent-pink) 40%, transparent);
}

.slot-result[data-tier="respin"],
.slot-result[data-tier="triple_beer"],
.slot-result[data-tier="triple_shot"],
.slot-result[data-tier="triple_coin"] {
  border-color: color-mix(in srgb, var(--color-accent-cyan) 62%, transparent);
  box-shadow: var(--shadow-glow-cyan);
}

.slot-result[data-tier="respin"]::before,
.slot-result[data-tier="triple_beer"]::before,
.slot-result[data-tier="triple_shot"]::before,
.slot-result[data-tier="triple_coin"]::before {
  border-left-color: var(--color-accent-cyan);
}

.slot-result[data-tier="respin"] strong,
.slot-result[data-tier="triple_beer"] strong,
.slot-result[data-tier="triple_shot"] strong,
.slot-result[data-tier="triple_coin"] strong {
  color: var(--color-accent-cyan);
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--color-accent-cyan) 40%, transparent);
}

.slot-result[data-tier="triple_diamond"],
.slot-result[data-tier="triple_seven"] {
  border-color: color-mix(in srgb, var(--color-accent-pink) 72%, transparent);
  box-shadow:
    var(--shadow-glow-pink),
    0 0 3.8rem color-mix(in srgb, var(--color-primary) 16%, transparent);
  animation: result-jackpot 780ms steps(2, end) infinite;
}

.slot-result[data-tier="triple_diamond"]::before,
.slot-result[data-tier="triple_seven"]::before {
  border-left-color: var(--color-accent-pink);
}

.slot-result[data-tier="triple_diamond"] strong,
.slot-result[data-tier="triple_seven"] strong {
  color: var(--color-accent-pink);
  text-shadow:
    0 0 1.2rem color-mix(in srgb, var(--color-accent-pink) 44%, transparent),
    0 0 2rem color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.slot-result.is-credit-cue,
.slot-result.is-drink-cue,
.slot-result.is-win-cue,
.slot-result.is-major-win-cue,
.slot-result.is-jackpot-cue {
  animation: result-win-kick 420ms steps(2, end) infinite;
}

.slot-result.is-loss-cue,
.slot-result.is-denied-cue {
  animation: result-denied-kick 320ms steps(2, end) 3;
}

body[data-kiozk-view="landscape"] .slot-mode {
  grid-template-columns: minmax(0, 1.18fr) minmax(22rem, 0.72fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.25rem 2.65rem;
  padding: 8.8rem 5.6rem 5.15rem;
}

body[data-kiozk-view="landscape"] .slot-masthead {
  display: none;
}

body[data-kiozk-view="landscape"] .slot-stage {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: min(100%, 57.5rem);
  transform: translateX(-4.4rem);
}

body[data-kiozk-view="landscape"] .slot-machine {
  min-height: 43rem;
  padding: 1.28rem 1.55rem 1.14rem;
  border-color: color-mix(in srgb, var(--color-primary) 62%, transparent);
}

body[data-kiozk-view="landscape"] .slot-machine__crown,
body[data-kiozk-view="landscape"] .slot-machine__footer {
  font-size: 0.76rem;
}

body[data-kiozk-view="landscape"] .slot-machine__crown {
  gap: 0.7rem;
  padding: 0.96rem 1.04rem 0.82rem;
}

body[data-kiozk-view="landscape"] .slot-module {
  min-height: 4.4rem;
  align-content: center;
}

body[data-kiozk-view="landscape"] .slot-module b {
  font-size: 0.64rem;
}

body[data-kiozk-view="landscape"] .slot-module i {
  font-size: 0.92rem;
}

body[data-kiozk-view="landscape"] .slot-reels {
  gap: 0.82rem;
  padding: 1.55rem 0 1.3rem;
}

body[data-kiozk-view="landscape"] .slot-reel {
  padding: 0.56rem;
}

body[data-kiozk-view="landscape"] .slot-reel__window {
  height: 23.3rem;
  min-height: 23.3rem;
}

body[data-kiozk-view="landscape"] .slot-strip-item {
  height: var(--strip-item-h, 23.3rem);
}

body[data-kiozk-view="landscape"] .slot-glyph {
  width: 14rem;
  gap: 0.48rem;
}

body[data-kiozk-view="landscape"] .slot-glyph img {
  height: 12.8rem;
  max-width: 12.8rem;
  max-height: 12.8rem;
}

body[data-kiozk-view="landscape"] .slot-illustration {
  width: 12.8rem;
  height: 12.8rem;
}

body[data-kiozk-view="landscape"] .slot-machine__footer {
  padding: 0.76rem 1rem 0.64rem;
}

body[data-kiozk-view="landscape"] .slot-control-deck {
  padding: 0.76rem 1rem 0.92rem;
}

body[data-kiozk-view="landscape"] .slot-deck-btn {
  min-height: 2.7rem;
}

body[data-kiozk-view="landscape"] .slot-lever {
  left: calc(100% - 2.7rem);
  bottom: 6.4rem;
  transform: scale(1.06);
  transform-origin: 50% 100%;
}

body[data-kiozk-view="landscape"] .slot-paytable {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  grid-template-columns: 1fr;
  width: 100%;
  min-height: 0;
}

body[data-kiozk-view="landscape"] .slot-paytable > span {
  grid-template-columns: minmax(9rem, 0.88fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 0;
  padding: 0.64rem 1.05rem;
  text-align: left;
}

body[data-kiozk-view="landscape"] .slot-paytable > span + span {
  border-left: 0;
  border-top: 1px solid var(--color-border-subtle);
}

body[data-kiozk-view="landscape"] .slot-paytable__icons {
  justify-content: flex-start;
}

body[data-kiozk-view="landscape"] .slot-paytable__icons img {
  width: 2.95rem;
  height: 2.95rem;
}

body[data-kiozk-view="landscape"] .slot-paytable b {
  align-self: center;
  font-size: 0.84rem;
}

body[data-kiozk-view="landscape"] .slot-paytable strong {
  justify-self: end;
  color: var(--color-accent-cyan);
  font-size: 1.42rem;
}

body[data-kiozk-view="landscape"] .slot-result {
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  width: 100%;
  min-height: 6.5rem;
  padding: 1.1rem 1.22rem 0.96rem 1.35rem;
}

body[data-kiozk-view="landscape"] .slot-result strong {
  font-size: 2.9rem;
}

body[data-kiozk-view="landscape"] .slot-mode {
  display: block;
  padding: 0;
  overflow: hidden;
}

body[data-kiozk-view="landscape"] .slot-mode::before {
  opacity: 0.88;
  background:
    var(--slot-skin-background) center / cover no-repeat,
    radial-gradient(circle at 34% 55%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 36rem),
    radial-gradient(circle at 78% 55%, color-mix(in srgb, var(--color-accent-cyan) 10%, transparent), transparent 28rem);
  mix-blend-mode: normal;
}

body[data-kiozk-view="landscape"] .slot-top-status {
  position: absolute;
  top: 2.1rem;
  right: 3.95rem;
  z-index: 7;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.92rem;
  color: var(--color-primary);
  font-family: var(--font-vcr);
  font-size: 0.93rem;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 54%, transparent);
}

body[data-kiozk-mode="slot"][data-kiozk-view="landscape"] .ticker {
  height: 2.55rem;
  border-block-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
  background:
    url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/panels/ticker-rail.svg") center / 100% 100% no-repeat,
    color-mix(in srgb, var(--color-bg-base) 84%, transparent);
  font-size: 0.88rem;
}

body[data-kiozk-mode="slot"][data-kiozk-view="landscape"] .ticker--top {
  top: 1.08rem;
}

body[data-kiozk-mode="slot"][data-kiozk-view="landscape"] .ticker--top::after {
  content: "SYS STATUS  \25CF  ONLINE";
  position: absolute;
  top: 0;
  right: 2.45rem;
  display: grid;
  align-items: center;
  height: 100%;
  padding-left: 3rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-bg-base) 92%, transparent) 28%);
  color: var(--color-primary);
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 54%, transparent);
}

body[data-kiozk-mode="slot"][data-kiozk-view="landscape"] .ticker--bottom {
  display: none;
}

body[data-kiozk-view="landscape"] .slot-top-status i {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--color-primary) 72%, transparent);
}

body[data-kiozk-view="landscape"] .slot-stage {
  position: absolute;
  left: 5.9%;
  top: 11.35%;
  width: 50.4%;
  height: 74.7%;
  perspective: 58rem;
  transform: none;
}

body[data-kiozk-view="landscape"] .slot-payline-tab {
  position: absolute;
  left: -6.55rem;
  top: 22.9%;
  z-index: 3;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 5.95rem;
  height: 22.85rem;
  color: var(--color-primary);
  font-family: var(--font-vcr);
  box-sizing: border-box;
  padding-inline: 1.55rem 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateX(-0.12rem);
  background: var(--slot-skin-side-tab) center / 100% 100% no-repeat;
  text-shadow: 0 0 0.9rem color-mix(in srgb, var(--color-primary) 62%, transparent);
}

body[data-kiozk-view="landscape"] .slot-machine {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: 14.5% minmax(0, 1fr) 8.8% 12.4%;
  gap: 1.4%;
  padding: 6.8% 8.55% 4.35%;
  border: 0;
  background:
    var(--slot-skin-machine-frame) center / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 28%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 22rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 76%, var(--color-bg-base)), var(--color-bg-base));
  box-shadow:
    0 0 3.4rem color-mix(in srgb, var(--color-primary) 20%, transparent),
    inset 0 0 2.4rem color-mix(in srgb, var(--color-primary) 4%, transparent);
}

body[data-kiozk-view="landscape"] .slot-machine::before {
  opacity: 0.15;
  background-size: 8rem 8rem, 100% 0.43rem, 0.43rem 100%;
}

body[data-kiozk-view="landscape"] .slot-machine::after {
  opacity: 0.18;
}

body[data-kiozk-view="landscape"] .slot-signal-stack {
  display: none;
}

body[data-kiozk-view="landscape"] .slot-signal-bulb {
  width: 0.94rem;
}

body[data-kiozk-view="landscape"] .slot-machine__crown {
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-2.34rem);
}

body[data-kiozk-view="landscape"] .slot-module {
  position: absolute;
  display: grid;
  align-content: center;
  box-sizing: border-box;
  min-height: 0;
  gap: 0.14rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}

body[data-kiozk-view="landscape"] .slot-module--id {
  left: 9.4%;
  top: 30%;
  width: 25.1%;
  height: 42%;
  padding-left: 1.18rem;
  background: none;
}

body[data-kiozk-view="landscape"] .slot-module--payout {
  left: 37.1%;
  top: 30%;
  width: 31.7%;
  height: 49%;
  background: none;
}

body[data-kiozk-view="landscape"] .slot-module--state {
  left: 73.55%;
  top: 28.5%;
  width: 8.7%;
  height: 44%;
  background: none;
}

body[data-kiozk-view="landscape"] .slot-module b {
  display: block;
  font-size: 0.58rem;
  line-height: 1;
  opacity: 0.88;
  transform: translateY(0);
}

body[data-kiozk-view="landscape"] .slot-module i {
  display: block;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  transform: translateY(0);
}

body[data-kiozk-view="landscape"] .slot-module--payout i {
  font-size: 1.26rem;
  transform: translateY(-0.02rem);
}

body[data-kiozk-view="landscape"] .slot-module--state i {
  color: var(--color-primary);
  max-width: 3.2rem;
  font-size: 0.78rem;
  text-shadow: 0 0 0.84rem color-mix(in srgb, var(--color-primary) 42%, transparent);
}

body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(1) { min-height: 0.32rem; }
body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(2) { min-height: 0.48rem; }
body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(3) { min-height: 0.68rem; }
body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(4) { min-height: 0.98rem; }
body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(5) { min-height: 1.35rem; }
body[data-kiozk-view="landscape"] .slot-module--signal em:nth-child(6) { min-height: 1.72rem; }

body[data-kiozk-view="landscape"] .slot-reels {
  gap: 0.92rem;
  align-items: stretch;
  padding: 1.65rem 2.05rem 1.38rem;
  background: var(--slot-skin-reel-bay) center / 100% 100% no-repeat;
}

body[data-kiozk-view="landscape"] .slot-reel {
  padding: 0.28rem;
  border: 0;
  background: none;
  box-shadow: none;
}

body[data-kiozk-view="landscape"] .slot-reel__window {
  height: 100%;
  min-height: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 24%, transparent 72%, color-mix(in srgb, var(--color-bg-base) 88%, transparent)),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 0 1px, transparent 1px 0.58rem),
    color-mix(in srgb, var(--color-bg-base) 86%, var(--color-primary) 14%);
}

body[data-kiozk-view="landscape"] .slot-strip-item {
  height: var(--strip-item-h, 25.4rem);
}

body[data-kiozk-view="landscape"] .slot-glyph {
  width: 13.1rem;
  gap: 0.7rem;
}

body[data-kiozk-view="landscape"] .slot-glyph img {
  height: 11.45rem;
  max-width: 11.9rem;
  max-height: 11.9rem;
}

body[data-kiozk-view="landscape"] .slot-symbol-label {
  color: var(--color-primary);
  font-size: 1.05rem;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}

body[data-kiozk-view="landscape"] .slot-machine__footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem;
  padding: 0.56rem 1.18rem 0.44rem;
  color: var(--color-text-secondary);
  border-top: 0;
  font-size: 0.78rem;
  background: var(--slot-skin-control-readouts) center / 100% 100% no-repeat;
}

body[data-kiozk-view="landscape"] .slot-readout {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.08rem;
  min-height: 3.3rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-0.24rem);
}

body[data-kiozk-view="landscape"] .slot-readout b,
body[data-kiozk-view="landscape"] .slot-readout strong {
  font-weight: 400;
  line-height: 1;
}

body[data-kiozk-view="landscape"] .slot-readout b {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}

body[data-kiozk-view="landscape"] .slot-readout strong {
  margin-top: 0;
  color: var(--color-primary);
  font-size: 1.32rem;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 48%, transparent);
}

body[data-kiozk-view="landscape"] .slot-readout b,
body[data-kiozk-view="landscape"] .slot-readout strong {
  color: transparent;
  text-shadow: none;
}

body[data-kiozk-view="landscape"] .slot-readout--payout {
  background: transparent;
}

body[data-kiozk-view="landscape"] .slot-readout--payout strong {
  font-size: 1.72rem;
}

body[data-kiozk-view="landscape"] .slot-control-deck {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.55fr 0.7fr 1fr;
  gap: 0.72rem;
  padding: 1.34rem 2rem 1.02rem;
  background: var(--slot-skin-control-deck) center / 100% 100% no-repeat;
}

body[data-kiozk-view="landscape"] .slot-deck-btn {
  min-height: 3.05rem;
  color: var(--color-text-secondary);
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-0.18rem);
}

body[data-kiozk-view="landscape"] .slot-deck-btn--spin {
  color: var(--color-text-primary);
  font-size: 1.72rem;
  background: transparent;
  box-shadow: 0 0 1.7rem color-mix(in srgb, var(--color-primary) 42%, transparent);
  transform: translateY(-0.08rem);
}

body[data-kiozk-view="landscape"] .slot-control-deck .slot-deck-btn {
  color: transparent;
  text-shadow: none;
}

body[data-kiozk-view="landscape"] .slot-lever {
  left: 93.6%;
  bottom: 17%;
  width: 12.8rem;
  height: 34.1rem;
  transform: none;
  background: none;
  filter: drop-shadow(0 0 1.05rem color-mix(in srgb, var(--color-primary) 22%, transparent));
}

body[data-kiozk-view="landscape"] .slot-lever__base,
body[data-kiozk-view="landscape"] .slot-lever__arm,
body[data-kiozk-view="landscape"] .slot-lever__shaft,
body[data-kiozk-view="landscape"] .slot-lever__grip {
  opacity: 1;
}

body[data-kiozk-view="landscape"] .slot-lever__base {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 18.9rem;
  border: 0;
  border-radius: 0;
  background: var(--slot-skin-lever-base) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--color-primary) 26%, transparent));
}

body[data-kiozk-view="landscape"] .slot-lever__arm {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform:
    translateY(var(--lever-drop, 0rem))
    rotateX(var(--lever-tilt, -8deg))
    translateZ(var(--lever-depth, 0rem));
  transform-origin: 50% 100%;
  transition: transform 80ms linear;
  will-change: transform;
}

body[data-kiozk-view="landscape"] .slot-lever__shaft {
  left: 50%;
  top: 5.85rem;
  width: 5.82rem;
  height: 21.05rem;
  border: 0;
  background: var(--slot-skin-lever-shaft) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
  transform: translateX(-50%);
}

body[data-kiozk-view="landscape"] .slot-lever__grip {
  left: 50%;
  top: 0;
  width: 8.64rem;
  height: 7.25rem;
  border: 0;
  border-radius: 0;
  background: var(--slot-skin-lever-grip) center / 100% 100% no-repeat;
  box-shadow: none;
  transform: translateX(-50%) translateZ(1rem) scale(var(--lever-grip-scale, 1));
  filter: drop-shadow(0 0 1.1rem color-mix(in srgb, var(--color-primary) 34%, transparent));
}

body[data-kiozk-view="landscape"] .slot-lever__grip::before,
body[data-kiozk-view="landscape"] .slot-lever__grip::after,
body[data-kiozk-view="landscape"] .slot-lever__shaft::before {
  display: none;
}

body[data-kiozk-view="landscape"] .slot-paytable {
  position: absolute;
  left: 65.05%;
  top: 12.45%;
  z-index: 4;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 0.74rem;
  width: 29.85%;
  height: 59.8%;
  padding: 4.55rem 3.38rem 3.9rem;
  border: 0;
  background:
    var(--slot-skin-win-table) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 21rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 74%, var(--color-bg-base)), var(--color-bg-base));
  box-shadow:
    0 0 2.2rem color-mix(in srgb, var(--color-primary) 18%, transparent),
    inset 0 0 2.4rem color-mix(in srgb, var(--color-primary) 7%, transparent);
}

body[data-kiozk-view="landscape"] .slot-paytable::before {
  content: "";
  position: absolute;
  inset: 3.95rem 2.65rem 3.35rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 15rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-base) 94%, transparent), color-mix(in srgb, var(--color-bg-base) 86%, var(--color-primary) 14%));
  box-shadow:
    inset 0 0 1.7rem color-mix(in srgb, var(--color-bg-base) 72%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

body[data-kiozk-view="landscape"] .slot-paytable > span {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(11.2rem, 1fr) minmax(5.1rem, auto);
  align-items: center;
  gap: 1.15rem;
  min-height: 0;
  padding: 0.26rem 0.82rem 0.24rem 0.74rem;
  border-top: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 58%),
    color-mix(in srgb, var(--color-bg-base) 82%, transparent);
  box-shadow:
    inset 0 0 1rem color-mix(in srgb, var(--color-primary) 5%, transparent),
    0 0 0.8rem color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-text-secondary);
}

body[data-kiozk-view="landscape"] .slot-paytable > span + span {
  border-top: 0;
}

body[data-kiozk-view="landscape"] .slot-paytable > span + span::before {
  content: none;
}

body[data-kiozk-view="landscape"] .slot-paytable__icons {
  min-height: 0;
  gap: 0.54rem;
  justify-content: flex-start;
}

body[data-kiozk-view="landscape"] .slot-paytable__icons img {
  width: 3.78rem;
  height: 3.78rem;
  filter: drop-shadow(0 0 0.64rem color-mix(in srgb, var(--color-accent-cyan) 26%, transparent));
}

body[data-kiozk-view="landscape"] .slot-paytable b {
  display: none;
}

body[data-kiozk-view="landscape"] .slot-paytable strong {
  justify-self: end;
  color: var(--color-accent-cyan);
  font-size: 1.44rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 1rem color-mix(in srgb, var(--color-accent-cyan) 54%, transparent);
}

body[data-kiozk-view="landscape"] .slot-result {
  position: absolute;
  left: 65.05%;
  top: 71.25%;
  z-index: 4;
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr);
  align-items: center;
  width: 29.85%;
  min-height: 8.1rem;
  padding: 1.04rem 1.8rem 0.94rem 2.35rem;
  background:
    var(--slot-skin-result-banner) center / 100% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent-pink) 28%, var(--color-bg-base)), color-mix(in srgb, var(--color-bg-base) 82%, var(--color-accent-pink) 18%));
  border: 0;
  box-shadow:
    0 0 2.2rem color-mix(in srgb, var(--color-accent-pink) 30%, transparent),
    inset 0 0 1.8rem color-mix(in srgb, var(--color-accent-pink) 9%, transparent);
}

body[data-kiozk-view="landscape"] .slot-result__label {
  color: var(--color-accent-pink);
  font-size: 1.08rem;
}

body[data-kiozk-view="landscape"] .slot-result__ticker {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding-left: 0.18rem;
  text-align: left;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
}

body[data-kiozk-view="landscape"] .slot-result strong {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  color: var(--color-accent-pink);
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1.48rem, 1.88vw, 2.12rem);
  line-height: 0.9;
  white-space: nowrap;
  text-transform: none;
  text-shadow:
    0 0 1.1rem color-mix(in srgb, var(--color-accent-pink) 52%, transparent),
    0 0 2.1rem color-mix(in srgb, var(--color-accent-pink) 30%, transparent);
}

body[data-kiozk-view="landscape"] .slot-result[data-marquee="true"] strong {
  animation: result-message-marquee 12s linear infinite 2.2s;
}

body[data-kiozk-view="landscape"] .slot-result strong span {
  display: inline-block;
  min-width: max-content;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail {
  position: absolute;
  left: 1.55%;
  bottom: 0.78%;
  z-index: 6;
  display: grid;
  grid-template-columns: 1.2fr 1.08fr 0.58fr 0.82fr 0.66fr 1.18fr 0.64fr;
  align-items: center;
  width: 96.9%;
  height: 6.85%;
  padding: 0.52rem 2.35rem;
  background: var(--slot-skin-bottom-rail) center / 100% 100% no-repeat;
  color: var(--color-primary);
  font-family: var(--font-vcr);
  text-transform: uppercase;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail span {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-inline: 1.05rem;
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}

body[data-kiozk-view="landscape"] .slot-bottom-rail span:nth-child(2) {
  grid-template-columns: auto minmax(5.5rem, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.68rem;
  align-items: center;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail span:nth-child(2) b {
  grid-column: 1 / -1;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail span:first-child {
  border-left: 0;
  padding-left: 0;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail b {
  color: var(--color-accent-cyan);
  font-size: 0.76rem;
  font-weight: 400;
}

body[data-kiozk-view="landscape"] .slot-bottom-rail strong {
  color: var(--color-primary);
  font-size: 1.02rem;
  font-weight: 400;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 42%, transparent);
}

body[data-kiozk-view="landscape"] .slot-bottom-rail span:last-child b {
  align-self: center;
  color: var(--color-primary);
  font-size: 0.94rem;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary) 42%, transparent);
}

body[data-kiozk-view="landscape"] .slot-stock-meter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.18rem;
  width: 8.2rem;
  height: 0.48rem;
}

body[data-kiozk-view="landscape"] .slot-sparkline {
  display: block;
  width: 11.5rem;
  height: 1.75rem;
  margin-top: -1.4rem;
  margin-left: 5.35rem;
  background: url("./resources/%5Bzlotz%5D/kiozk-slot-ui-assets/svg/status/sparkline.svg") center / contain no-repeat;
  opacity: 0.92;
}

body[data-kiozk-view="landscape"] .slot-stock-meter em {
  background: var(--color-primary);
  opacity: 0.18;
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--color-primary) 62%, transparent);
}

body[data-kiozk-view="landscape"] .slot-stock-meter em.is-filled {
  opacity: 1;
}

@keyframes slot-sheen {
  0%,
  22% {
    transform: translateX(-18%) rotate(0deg);
    opacity: 0;
  }
  43% {
    opacity: 1;
  }
  70%,
  100% {
    transform: translateX(18%) rotate(0deg);
    opacity: 0;
  }
}

@keyframes mode-scan-wipe {
  0% {
    transform: translateY(-72%);
    opacity: 0;
  }
  18%,
  66% {
    opacity: 1;
  }
  100% {
    transform: translateY(72%);
    opacity: 0;
  }
}

@keyframes lever-pull {
  0%,
  100% {
    transform: translateY(0);
  }
  28%,
  64% {
    transform: translateY(9.5rem);
  }
}

@keyframes lever-denied-kick {
  50% {
    transform:
      translateY(var(--lever-drop, 0rem))
      rotateX(calc(var(--lever-tilt, -8deg) - 7deg))
      translateZ(var(--lever-depth, 0rem));
  }
}

@keyframes lever-grip-flicker {
  50% {
    box-shadow:
      0 0 1rem color-mix(in srgb, var(--color-text-primary) 38%, transparent),
      0 0 2.4rem color-mix(in srgb, var(--color-accent-pink) 52%, transparent);
  }
}

@keyframes analog-bulb-flicker {
  50% {
    opacity: 0.46;
    filter: brightness(0.72);
  }
}

@keyframes denied-machine {
  50% {
    box-shadow:
      var(--shadow-glow-pink),
      0 0 4.8rem color-mix(in srgb, var(--color-accent-orange) 24%, transparent),
      inset 0 0 4rem color-mix(in srgb, var(--color-accent-pink) 18%, transparent);
  }
}

@keyframes loose-reel-shudder {
  50% {
    transform: translateX(0.2rem);
  }
}

@keyframes result-denied-kick {
  50% {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--color-accent-orange) 18%, transparent), transparent 64%),
      var(--color-bg-overlay);
  }
}

@keyframes result-jackpot {
  50% {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--color-accent-pink) 14%, transparent), transparent 64%),
      var(--color-bg-overlay);
  }
}

@keyframes super-hot-machine {
  50% {
    box-shadow:
      var(--shadow-glow-cyan),
      0 0 5.2rem color-mix(in srgb, var(--color-accent-pink) 24%, transparent),
      inset 0 0 4.4rem color-mix(in srgb, var(--color-accent-cyan) 18%, transparent);
  }
}

@keyframes super-hot-reel {
  50% {
    border-color: var(--color-accent-cyan);
    box-shadow:
      var(--shadow-glow-cyan),
      0 0 3.6rem color-mix(in srgb, var(--color-accent-pink) 24%, transparent),
      inset 0 0 3.2rem color-mix(in srgb, var(--color-accent-cyan) 20%, transparent);
  }
}

@keyframes super-hot-scan {
  0% {
    transform: translateY(-18%);
  }
  100% {
    transform: translateY(18%);
  }
}

@keyframes miss-cue-machine {
  50% {
    box-shadow:
      var(--shadow-glow-pink),
      inset 0 0 3.6rem color-mix(in srgb, var(--color-accent-pink) 14%, transparent);
  }
}

@keyframes win-machine-blink {
  50% {
    border-color: var(--color-text-primary);
    box-shadow:
      0 0 4.8rem color-mix(in srgb, var(--color-text-primary) 26%, transparent),
      inset 0 0 4.6rem color-mix(in srgb, var(--color-primary) 26%, transparent);
  }
}

@keyframes jackpot-halo {
  50% {
    box-shadow:
      var(--shadow-glow-pink),
      0 0 6.4rem color-mix(in srgb, var(--color-accent-cyan) 26%, transparent),
      inset 0 0 5.2rem color-mix(in srgb, var(--color-accent-pink) 22%, transparent);
  }
}

@keyframes bulb-chase {
  50% {
    background-position: 1.1rem 50%, 2.2rem 50%, 3.3rem 50%;
    filter:
      drop-shadow(0 0 0.82rem var(--color-primary-glow))
      drop-shadow(0 0 1.2rem color-mix(in srgb, var(--color-accent-cyan) 36%, transparent));
  }
}

@keyframes reel-win-pop {
  50% {
    border-color: var(--color-text-primary);
    box-shadow:
      0 0 2.4rem color-mix(in srgb, var(--color-primary) 34%, transparent),
      inset 0 0 3.2rem color-mix(in srgb, var(--color-accent-cyan) 18%, transparent);
  }
}

@keyframes result-win-kick {
  50% {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 64%),
      var(--color-bg-overlay);
  }
}

@keyframes result-message-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 1.5rem), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-machine::after,
  .slot-machine.is-super-hot,
  .slot-machine.is-miss-cue,
  .slot-machine.is-loss-cue,
  .slot-machine.is-denied-cue,
  .slot-machine.is-credit-cue,
  .slot-machine.is-drink-cue,
  .slot-machine.is-win-cue,
  .slot-machine.is-major-win-cue,
  .slot-machine.is-jackpot-cue,
  .slot-machine.is-credit-cue .slot-reels::before,
  .slot-machine.is-credit-cue .slot-reels::after,
  .slot-machine.is-drink-cue .slot-reels::before,
  .slot-machine.is-drink-cue .slot-reels::after,
  .slot-machine.is-win-cue .slot-reels::before,
  .slot-machine.is-win-cue .slot-reels::after,
  .slot-machine.is-major-win-cue .slot-reels::before,
  .slot-machine.is-major-win-cue .slot-reels::after,
  .slot-machine.is-jackpot-cue .slot-reels::before,
  .slot-machine.is-jackpot-cue .slot-reels::after,
  .slot-reel.is-hot,
  .slot-reel.is-hot .slot-symbol::after,
  .slot-reel.is-credit-cue,
  .slot-reel.is-drink-cue,
  .slot-reel.is-loss-cue,
  .slot-reel.is-win-cue,
  .slot-reel.is-major-win-cue,
  .slot-reel.is-jackpot-cue,
  .slot-result.is-credit-cue,
  .slot-result.is-drink-cue,
  .slot-result.is-loss-cue,
  .slot-result.is-denied-cue,
  .slot-result.is-win-cue,
  .slot-result.is-major-win-cue,
  .slot-result.is-jackpot-cue,
  body[data-kiozk-view="landscape"] .slot-result strong,
  .slot-result[data-tier="triple_diamond"],
  .slot-result[data-tier="triple_seven"] {
    animation: none;
  }
}

@media (max-width: 560px) {
  .slot-mode {
    padding-inline: 3.1rem;
  }

  .slot-brand {
    font-size: 7.4rem;
  }

  .slot-machine {
    width: min(100%, 41.5rem);
    min-height: 41rem;
    padding-inline: 1.45rem;
  }

  .slot-stage {
    width: min(100%, 41.5rem);
    transform: translateX(-3.4rem);
  }

  .slot-reels {
    gap: 0.72rem;
  }

  .slot-reel__window {
    height: 16.6rem;
  }

  .slot-glyph {
    width: 9.2rem;
  }

  .slot-glyph img {
    height: 9.2rem;
  }

  .slot-illustration {
    width: 9.2rem;
    height: 9.2rem;
  }

  .slot-paytable {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slot-lever {
    left: calc(100% - 1.35rem);
    bottom: 3.35rem;
    transform: scale(0.82);
    transform-origin: 50% 100%;
  }
}