:root {
  color-scheme: dark;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  --lime: #b7ff3c;
  --green: #5cff62;
  --purple: #b83cff;
  --pink: #ff4fd8;
  --gold: #ffd75b;
  --ink: #0d0415;
  --panel: #1a0928;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050109;
}

body {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button,
input,
select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

#app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(circle at 50% 30%, rgba(108, 33, 171, .3), transparent 55%),
    #050109;
}

.gameShell {
  position: relative;
  width: min(100vw, calc(100vh * 1.7768331562));
  height: min(100vh, calc(100vw / 1.7768331562));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  background: #100523;
  box-shadow: 0 0 90px rgba(126, 30, 216, .42);
}

.cabinetBackground,
#reelCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: crisp-edges;
}

.cabinetBackground { z-index: 0; }

#reelCanvas {
  z-index: 1;
  pointer-events: none;
}

/* The canvas occupies the full reel aperture. Keep only the supplied
   transparent junction stars above it: opaque cabinet crops also contain the
   black reel face and would cut bands through animated symbol glows. */
.reelFrameForeground {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  image-rendering: pixelated;
}

.reelFrameForeground image { image-rendering: pixelated; }

/* The spin control overlaps the reel aperture. Repaint its authored cabinet
   slice above the canvas so reels and the lower frame can never cover it. */
.spinForeground {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  clip-path: ellipse(7.06% 12.33% at 50.30% 86.82%);
}

.ambientAnimations {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.ambientAnimations[hidden],
.ambientMovie[hidden] { display: none; }

.towerWindowEffects {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.towerWindow {
  --window-speed: 11.6s;
  --window-delay: 0s;
  position: absolute;
  display: block;
  isolation: isolate;
  overflow: visible;
  mix-blend-mode: screen;
  transform-origin: center;
}

/* Keep the painted window and its surrounding aura separate. Each window has
   a long, independently phased cycle so the light gently wanders like a
   candle instead of flashing in lockstep. */
.towerWindow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 42% 42% 10% 10%;
  clip-path: polygon(24% 12%, 38% 0, 62% 0, 76% 12%, 100% 24%, 100% 100%, 0 100%, 0 24%);
  background:
    linear-gradient(90deg, transparent 42%, rgba(255, 236, 124, .9) 44% 56%, transparent 58%),
    linear-gradient(rgba(255, 245, 167, .92), #ffb02d 34%, #ff6a0c 76%, #9a2100);
  filter:
    brightness(1.22) saturate(1.18)
    drop-shadow(0 0 .22em #fff9bd)
    drop-shadow(0 0 .58em #ffb020)
    drop-shadow(0 0 1.15em #ff5a00);
  opacity: .62;
  transform-origin: center;
  will-change: opacity, transform;
  animation: towerWindowCoreFlicker var(--window-speed) ease-in-out var(--window-delay) infinite;
}

.towerWindow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 340%;
  height: 180%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 251, 186, .72) 0 8%,
    rgba(255, 181, 39, .52) 22%,
    rgba(255, 88, 0, .3) 48%,
    rgba(255, 45, 0, .11) 66%,
    transparent 78%
  );
  opacity: .2;
  transform: translate3d(-50%, -50%, 0) scale(.88);
  transform-origin: center;
  will-change: opacity, transform;
  animation: towerWindowAura var(--window-speed) ease-in-out var(--window-delay) infinite;
}

.towerWindow--l1 { left: 8.19378%; top: 18.91605%; width: .59809%; height: 3.61318%; --window-delay: -6.4s; }
.towerWindow--l2 { left: 9.62919%; top: 18.91605%; width: .59809%; height: 3.71945%; --window-speed: 12.9s; --window-delay: -1.8s; }
.towerWindow--l3 { left: 12.44019%; top: 30.81828%; width: .59809%; height: 3.50691%; --window-speed: 13.7s; --window-delay: -9.2s; }
.towerWindow--l4 { left: 2.63158%; top: 32.83741%; width: .41866%; height: 1.48778%; --window-speed: 10.4s; --window-delay: -3.7s; }
.towerWindow--l5 { left: 3.76794%; top: 32.83741%; width: .29904%; height: 1.48778%; --window-speed: 12.1s; --window-delay: -8.1s; }
.towerWindow--l6 { left: 10.88517%; top: 39.42614%; width: .83732%; height: 3.93199%; --window-speed: 14.2s; --window-delay: -11.6s; }
.towerWindow--l7 { left: .83732%; top: 46.01488%; width: .53828%; height: 2.76302%; --window-speed: 10.9s; --window-delay: -4.5s; }
.towerWindow--r1 { left: 94.55742%; top: 31.77471%; width: .23923%; height: .85016%; --window-speed: 11.2s; --window-delay: -7.4s; }
.towerWindow--r2 { left: 96.05263%; top: 31.77471%; width: .23923%; height: .85016%; --window-speed: 13.4s; --window-delay: -2.8s; }
.towerWindow--r3 { left: 95.21531%; top: 36.98193%; width: .77751%; height: 4.35707%; --window-speed: 14.6s; --window-delay: -10.1s; }
.towerWindow--r4 { left: 91.02871%; top: 42.08289%; width: .29904%; height: 1.27524%; --window-speed: 10.7s; --window-delay: -6.8s; }
.towerWindow--r5 { left: 86.66268%; top: 46.86504%; width: .35885%; height: 1.80659%; --window-speed: 12.8s; --window-delay: -12.2s; }
.towerWindow--r6 { left: 84.98804%; top: 51.00956%; width: .29904%; height: 1.70032%; --window-speed: 11.9s; --window-delay: -5.4s; }

.ambientMovie {
  position: absolute;
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
  pointer-events: none;
}

.ambientFlameSlot {
  position: absolute;
  overflow: hidden;
}

.ambientFlameLeft {
  left: 21.8301%;
  top: 0;
  width: 6.3397%;
  height: 16.0468%;
}

.ambientFlameRight {
  left: 69.9761%;
  top: .8502%;
  width: 6.0407%;
  height: 15.728%;
}

.ambientFlameLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--flame-crossfade, 450ms) linear;
  will-change: opacity;
}

.ambientFlameLayer.isFlameVisible {
  opacity: 1;
}

.ambientFlame {
  inset: 0;
  width: 100%;
  height: 100%;
}

.gargoyleAnimation {
  left: 87.3804%;
  top: 46.1211%;
  width: 11.7225%;
  height: 17.322%;
  opacity: 0;
  transition: opacity var(--gargoyle-fade, 350ms) ease-in-out;
  will-change: opacity;
}

.gargoyleAnimation.isGargoyleVisible {
  opacity: 1;
}

/* A stationary 1672 x 754 stage window clips the moving character at the
   stone-platform boundary. Pull the live clip two CSS pixels inside the
   supplied foreground so fractional browser scaling cannot open a one-pixel
   seam while Dracula rises or retracts. The taller inner world restores the
   full 941px artboard coordinate system, so the authored Dracula geometry is
   unchanged while his translated canvas can never leak into the deck below. */
.draculaStage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 80.127524%;
  overflow: hidden;
  clip-path: inset(0 0 2px 0);
  pointer-events: none;
}

.draculaWorld {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 124.801061%;
}

.draculaEncounter {
  position: absolute;
  /* Artboard-locked to the small left cabinet sign. The keyed character's
     authored opaque bounds resolve to roughly x25..255 / y292..728 in the
     1672 x 941 design instead of spilling across the reel frame. */
  left: -7.65%;
  top: 28.5%;
  z-index: 2;
  width: 29%;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 560ms cubic-bezier(.18, .78, .26, 1);
  will-change: transform;
}

.draculaEncounter[hidden],
.draculaSignForeground[hidden],
.bonusParty[hidden] { display: none; }

.draculaEncounter.isRising {
  transform: translate3d(0, 60%, 0);
  transition: none;
}

.draculaEncounter.isRetracting {
  transform: translate3d(0, 60%, 0);
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(.55, 0, .9, .45);
}

.draculaThinkingMarks {
  position: absolute;
  left: 53%;
  top: -18%;
  z-index: 4;
  display: block;
  width: 39%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transform: translate3d(-50%, 8%, 0) scale(.68);
  transform-origin: 50% 70%;
  will-change: opacity, transform;
}

.draculaThinkingMarks[hidden] { display: none; }

.draculaThinkingMarks.isThinking {
  animation: draculaThinkingMarks 3.8s steps(2, end) both;
}

.draculaEncounter canvas,
.bonusParty canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Exact user-supplied alpha cutout of the ENTER IF YOU DARE rock, its skull,
   and the foreground ledge. It is registered at its measured native artboard
   coordinates so Dracula's lower body always remains physically behind it. */
.draculaSignForeground {
  position: absolute;
  left: 0;
  top: 48.777896%;
  z-index: 3;
  display: block;
  width: 19.258373%;
  height: 31.349628%;
  object-fit: fill;
  pointer-events: none;
  image-rendering: pixelated;
}

.bonusParty {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.bonusPartyLayer {
  position: absolute;
  overflow: hidden;
  opacity: 1;
  isolation: isolate;
  background: transparent;
  transition: opacity 360ms ease-in-out;
}

.bonusPartyLayer canvas {
  opacity: 1;
  background: transparent;
  mix-blend-mode: normal;
}

.bonusPartyLeft {
  /* Matched against the unchanged LEVEL frame in the supplied 816x1104
     master: scale .694, artboard origin 4/1. */
  left: .23923445%;
  top: .10626993%;
  width: 33.86985646%;
  height: 81.42146653%;
}

.bonusPartyRight {
  /* Matched against the unchanged meter frame in the supplied 784x1168
     master: scale .8, artboard origin 1043/2. */
  right: .10765550%;
  top: .21253985%;
  width: 37.51196172%;
  height: 99.29861849%;
}

/* The measured flat face of the authored ENTER IF YOU DARE sign is
   x50/y507/w117/h120. The small lower-right notch preserves the foreground
   skull which overlaps the display from x148/y614. */
.cabinetSignCarousel {
  position: absolute;
  left: 2.990430622%;
  top: 53.878852285%;
  z-index: 4;
  width: 6.997607656%;
  height: 12.752391073%;
  overflow: hidden;
  pointer-events: none;
}

.cabinetSignCarousel[hidden] { display: none; }

.cabinetSignPanel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 84% 89%, 84% 100%, 0 100%);
  image-rendering: pixelated;
  transition: opacity 720ms ease-in-out;
  will-change: opacity;
}

.cabinetSignPanel.isVisible { opacity: 1; }

.cabinetMeter {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: #fff8d0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(11px, 2.65vmin, 38px);
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 3px 0 #170321, 0 0 12px rgba(216, 89, 255, .72), 0 0 3px #fff;
  white-space: nowrap;
  pointer-events: none;
}

.balanceMeter { left: 9.9%; top: 86.67%; width: 14.8%; height: 7.7%; }
.betMeter { left: 29.9%; top: 86.67%; width: 7.9%; height: 7.7%; }
.winMeter { left: 69.2%; top: 86.67%; width: 17.9%; height: 7.7%; }

.statusMessage {
  position: absolute;
  z-index: 5;
  left: 35%;
  top: 76.5%;
  width: 30%;
  min-height: 3.2%;
  display: none !important;
  place-items: center;
  padding: .25em .7em;
  color: #efffcf;
  font-size: clamp(8px, 1.45vmin, 20px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px #240331, 0 0 8px #56ff5f;
  pointer-events: none;
}

.controls { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

.hotspot {
  position: absolute;
  pointer-events: auto;
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
  outline: none;
  --button-rgb: 174, 70, 255;
  --button-accent: #d76cff;
  --fx-left: 4%;
  --fx-top: 4%;
  --fx-width: 92%;
  --fx-height: 92%;
  --fx-radius: 12%;
}

.hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hotspot::before,
.hotspot::after {
  content: "";
  position: absolute;
  left: var(--fx-left);
  top: var(--fx-top);
  width: var(--fx-width);
  height: var(--fx-height);
  pointer-events: none;
  border-radius: var(--fx-radius);
  transition: opacity 100ms ease, filter 100ms ease, transform 80ms ease, border-color 100ms ease, background 100ms ease, box-shadow 100ms ease;
}

.hotspot::before {
  opacity: 0;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .34) 0 9%, transparent 25% 66%, rgba(0, 0, 0, .32) 88%),
    repeating-linear-gradient(0deg, rgba(var(--button-rgb), .09) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 50% 42%, rgba(var(--button-rgb), .38), rgba(var(--button-rgb), .06) 62%, transparent 73%);
  box-shadow:
    inset 0 .09em .16em rgba(255, 255, 255, .38),
    inset 0 -.13em .2em rgba(0, 0, 0, .58),
    0 0 .6em rgba(var(--button-rgb), .55);
  mix-blend-mode: screen;
}

.hotspot::after {
  border: max(2px, .17vmin) solid transparent;
  box-sizing: border-box;
}

.hotspot:hover::before,
.hotspot:focus-visible::before { opacity: 1; filter: saturate(1.35) brightness(1.2); transform: translateY(-1.5%) scale(1.015); }

.hotspot:hover::after,
.hotspot:focus-visible::after {
  border-color: var(--button-accent);
  background: rgba(var(--button-rgb), .1);
  box-shadow: 0 0 1.15em var(--button-accent), inset 0 0 .8em rgba(var(--button-rgb), .52);
}

.hotspot:active::before,
.hotspot.isPressed::before { opacity: .9; transform: translateY(4%) scale(.94); filter: saturate(1.1) brightness(.68); box-shadow: inset 0 .25em .32em rgba(0, 0, 0, .7); }
.hotspot:active::after,
.hotspot.isPressed::after { transform: translateY(3%) scale(.94); filter: brightness(.68); }
.hotspot:disabled { cursor: not-allowed; filter: grayscale(.85) brightness(.65); }
.hotspot:disabled::before { opacity: 0; }
.hotspot:disabled::after { box-shadow: none; border-color: transparent; background: rgba(0, 0, 0, .15); }

.menuButton {
  left: 1.6746%; top: 79.4899%; width: 8.3134%; height: 18.491%;
  --button-rgb: 184, 67, 255; --button-accent: #e37aff;
  --fx-left: 10.072%; --fx-top: 10.345%; --fx-width: 72.662%; --fx-height: 71.839%; --fx-radius: 13%;
}
.betDownButton,
.betUpButton { --button-rgb: 211, 64, 255; --button-accent: #f19aff; --fx-radius: 12%; }
.betDownButton {
  left: 25%; top: 83.5282%; width: 5.7416%; height: 10.8395%;
  --fx-left: 17.708%; --fx-top: 26.471%; --fx-width: 69.792%; --fx-height: 74.51%;
}
.betUpButton {
  left: 37.0215%; top: 83.5282%; width: 5.7416%; height: 10.8395%;
  --fx-left: 15.625%; --fx-top: 26.471%; --fx-width: 68.75%; --fx-height: 70.588%;
}
.spinButton {
  left: 43.5407%; top: 74.9203%; width: 14.5335%; height: 24.4421%;
  z-index: 2;
  isolation: isolate;
  border-radius: 50%;
  --button-rgb: 113, 255, 67; --button-accent: #dfff72;
  --fx-left: 9.053%; --fx-top: 6.087%; --fx-width: 75.309%; --fx-height: 80.87%; --fx-radius: 50%;
  /* One registration rectangle owns both the supplied Stop illustration and
     its autoplay counter, so their centers cannot drift at fractional scale. */
  --stop-art-left: -10.50%;
  --stop-art-top: -9.37%;
  --stop-art-width: 114.51%;
  --stop-art-height: 118.93%;
}
.maxBetButton {
  left: 59.2105%; top: 80.659%; width: 10.8254%; height: 17.1095%;
  --button-rgb: 55, 171, 255; --button-accent: #8ed9ff;
  --fx-left: 3.315%; --fx-top: 3.106%; --fx-width: 81.768%; --fx-height: 83.851%; --fx-radius: 8%;
}
.autoplayButton {
  left: 87.3206%; top: 80.4463%; width: 11.0048%; height: 17.4283%;
  border-radius: 50%;
  --button-rgb: 255, 153, 42; --button-accent: #ffe077;
  --fx-left: 8.696%; --fx-top: 7.927%; --fx-width: 66.304%; --fx-height: 73.171%; --fx-radius: 50%;
}
.spinButton.isStop { --button-rgb: 255, 30, 45; --button-accent: #ffcf63; }
.stopControlArt {
  position: absolute;
  /* The source canvas has transparent authoring margins. These measured values
     register its visible 1060x1059 alpha bounds to the painted Spin rim rather
     than the slightly larger interaction hotspot. */
  left: var(--stop-art-left);
  top: var(--stop-art-top);
  z-index: 1;
  width: var(--stop-art-width);
  height: var(--stop-art-height);
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transition: opacity 40ms linear, filter 100ms ease;
}
.spinButton.isStop .stopControlArt { opacity: 1; }
.spinButton.isStop::before,
.spinButton.isStop::after { z-index: 2; }
.spinButton .spinAutoplayCount {
  position: absolute;
  left: var(--stop-art-left);
  top: var(--stop-art-top);
  z-index: 3;
  width: var(--stop-art-width);
  height: var(--stop-art-height);
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  border: 0;
  color: #310520;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(22px, 4.6vmin, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .045em rgba(255, 255, 255, .95), 0 0 .18em rgba(255, 238, 162, .8), 0 .09em .12em rgba(82, 6, 20, .42);
  white-space: nowrap;
  pointer-events: none;
  transform: none;
}
.spinButton .spinAutoplayCount[hidden] { display: none; }
.spinButton.autoplayLargeCount .spinAutoplayCount {
  font-size: clamp(18px, 3.7vmin, 44px);
  letter-spacing: -.065em;
}
.spinButton.isStop:hover .stopControlArt,
.spinButton.isStop:focus-visible .stopControlArt { filter: saturate(1.18) brightness(1.12) drop-shadow(0 0 .5em rgba(255, 35, 49, .7)); }
.spinButton.isStop:active .stopControlArt,
.spinButton.isStop.isPressed .stopControlArt { filter: saturate(1.05) brightness(.72); }
.autoplayButton.isActive::after { background: rgba(88, 255, 105, .22); border-color: var(--lime); box-shadow: 0 0 1.1em var(--lime); }

.devButton {
  position: absolute;
  left: 94.976076555%;
  top: 1.275239107%;
  z-index: 12;
  width: 4.306220096%;
  height: 3.40063762%;
  padding: .28em .7em;
  border: max(2px, .2vmin) solid #ffd75b;
  border-radius: .38em;
  color: #f5ffbf;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(#8d29d1, #3a075d);
  box-shadow:
    inset 0 0 0 max(1px, .11vmin) #dd78ff,
    inset 0 -.18em .16em rgba(15,0,24,.62),
    0 .16em 0 #160321,
    0 0 .65em rgba(192,65,255,.55);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(9px, 1.55vmin, 22px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-shadow: 0 .1em #260238, 0 0 .35em #b7ff3c;
  cursor: pointer;
}
.devButton[hidden] { display: none; }
.devButton:hover,
.devButton:focus-visible { filter: brightness(1.25) saturate(1.2); transform: translateY(-2%); }
.devButton:active { filter: brightness(.75); transform: translateY(7%) scale(.96); }
.devButton:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }

.bonusHud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bonusHud[hidden] { display: none; }

.bonusLevel {
  position: absolute;
  left: 24.5%;
  top: 10.3%;
  width: 8.2%;
  height: 5.1%;
  display: grid;
  place-items: center;
  color: #d9ff4f;
  font-size: clamp(12px, 3.1vmin, 44px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 3px #2e063e, 0 0 12px #62ff5b;
}

.potionMeter {
  position: absolute;
  left: 36.602870813%;
  top: 5.844845909%;
  width: 25.299043062%;
  height: 11.264612115%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.potionMeter span {
  display: block;
  width: 29.314420804%;
  height: 100%;
  /* Preserve the large collector bottle while keeping its measured alpha
     bounds (y 80..395 in the 500px source) wholly inside the slot. */
  background: url("../assets/art/ui/potionnobg.png") 50% 43.25% / 160% 157% no-repeat;
  opacity: .085;
  filter: grayscale(1) brightness(.42);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.potionMeter span.isFilled {
  opacity: 1;
  filter: drop-shadow(0 0 .42em #62ff5f) saturate(1.22) brightness(1.07);
  transform: scale(1.04);
}

.potionMeter span.isReceiving {
  opacity: 1;
  animation: collectorReceive 420ms steps(5, end) both;
}

.potionMeter.isComplete span.isFilled {
  animation: potionMeterCompleteFlash 820ms steps(1, end) both;
}

.potionMeter.isClearing span {
  opacity: 0;
  filter: brightness(1.8) drop-shadow(0 0 1em #efffa1);
  transform: scale(.72);
  transition: opacity 300ms ease-in, filter 300ms ease-in, transform 300ms ease-in;
}

.ignitionMeter {
  --ignition-hidden: 100%;
  position: absolute;
  left: 64.772727273%;
  top: 10.41445271%;
  width: 13.397129187%;
  height: 5.844845909%;
}

.ignitionMeter img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}

.ignitionIconsBase {
  opacity: .18;
  filter: grayscale(1) brightness(.58) saturate(.35);
}

.ignitionMeterFill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 var(--ignition-hidden) 0 0);
  filter: drop-shadow(0 0 .28em rgba(111, 255, 75, .78));
  transition: clip-path 260ms steps(5, end);
}

.ignitionMeterFill img {
  animation: meterPulse 900ms steps(2, end) infinite;
}

.bonusFxLayer {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

.flyingPotion {
  position: absolute;
  width: 13.755980861%;
  aspect-ratio: 1;
  z-index: 2;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 .18em .22em rgba(0, 0, 0, .82))
    drop-shadow(0 0 .45em #79ff58);
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
}

.collectorSpark {
  position: absolute;
  z-index: 3;
  width: .66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #faff9b;
  box-shadow: 0 0 .28em #79ff52, 0 0 .65em #c33dff;
  animation: collectorSpark 520ms steps(7, end) forwards;
}

.bonusStatsPanel {
  position: absolute;
  left: 34.6%;
  top: 18.15%;
  width: 30.8%;
  aspect-ratio: 1824 / 135;
}

.bonusStatsPanel > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 .2em .18em rgba(0, 0, 0, .72));
}

.bonusStat {
  position: absolute;
  top: 18%;
  transform: translateY(2px);
  width: 46.8%;
  height: 64%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .58em;
  color: #fff6a7;
  font-size: clamp(6px, 1.18vmin, 17px);
  font-weight: 900;
  text-align: center;
  letter-spacing: .045em;
  line-height: 1;
  text-shadow: 0 .09em #1a0226, 0 0 .28em rgba(204, 78, 255, .55);
  white-space: nowrap;
}

.bonusFreeSpins { left: 2.2%; }
.bonusTotalWin { right: 2.2%; }
.bonusStat strong { color: var(--lime); font-size: 1.32em; }
.bonusTotalWin strong { color: var(--gold); }

.overlay,
.bigWinOverlay,
.levelUpOverlay,
.draculaConversionOverlay,
.bonusTransition,
.loadingScreen,
.orientationHint,
.doorCurtain {
  position: absolute;
  inset: 0;
}

.overlay[hidden],
.bigWinOverlay[hidden],
.levelUpOverlay[hidden],
.draculaConversionOverlay[hidden],
.bonusTransition[hidden],
.loadingScreen[hidden],
.orientationHint[hidden],
.doorCurtain[hidden],
.toast[hidden] { display: none; }

.overlay {
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 3.2%;
  background: rgba(5, 0, 12, .76);
  backdrop-filter: blur(3px);
}

.panelFrame {
  position: relative;
  width: min(86%, 1300px);
  height: 88%;
  background: url("../assets/art/ui/popup-frame.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 1.2em 1.5em rgba(0, 0, 0, .75));
  animation: panelIn 180ms steps(4, end) both;
}

.panelContent {
  position: absolute;
  inset: 15.5% 12% 13.5%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #8b35c4 #190724;
  padding: 1% 2% 2%;
  color: #f7eaff;
  user-select: text;
  -webkit-user-select: text;
}

.panelClose {
  position: absolute;
  right: 5.2%;
  top: 7.5%;
  width: 7%;
  aspect-ratio: 1;
  border: 2px solid #ffd45d;
  border-radius: 50%;
  color: #fff8b8;
  background: #5a176e;
  box-shadow: 0 0 .7em #c93cff;
  font-size: clamp(16px, 4vmin, 56px);
  line-height: 1;
  cursor: pointer;
}

.panelClose:hover,
.panelClose:focus-visible { background: #8530a1; outline: 2px solid var(--lime); }

.panelTitle {
  margin: 0 0 .55em;
  color: var(--lime);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(20px, 5vmin, 68px);
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .06em #251031, 0 0 .22em rgba(115, 255, 73, .75);
}

.panelLead {
  margin: .3em auto 1em;
  max-width: 58em;
  color: #eadcf4;
  font-size: clamp(9px, 1.55vmin, 20px);
  line-height: 1.45;
  text-align: center;
}

.panelTabs,
.choiceGrid,
.menuGrid {
  display: grid;
  gap: .7em;
}

.panelTabs { grid-template-columns: repeat(4, 1fr); margin-bottom: 1em; }
.menuGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menuGrid.isSimple {
  width: 90%;
  margin: 4% auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
}
.choiceGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.qaSectionTitle {
  margin: 1em 0 .55em;
  color: #fff5b0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(12px, 2.1vmin, 28px);
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .08em #251031, 0 0 .4em rgba(189, 84, 255, .75);
}

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

.choiceButton.isArmed {
  border-color: var(--lime);
  color: #fff;
  background: linear-gradient(#744317, #371531);
  box-shadow: inset 0 0 0 2px #190521, 0 0 .85em rgba(185, 255, 79, .72), 0 .2em 0 #110318;
}

.pixelButton,
.panelTabs button,
.menuTile,
.choiceButton {
  min-height: 3.2em;
  border: 2px solid #70369b;
  border-radius: .45em;
  color: #fff5b0;
  background: linear-gradient(#53206c, #260b35);
  box-shadow: inset 0 0 0 2px #14051e, 0 .24em 0 #110318;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.pixelButton:hover,
.pixelButton:focus-visible,
.panelTabs button:hover,
.panelTabs button:focus-visible,
.panelTabs button.isActive,
.menuTile:hover,
.menuTile:focus-visible,
.choiceButton:hover,
.choiceButton:focus-visible {
  border-color: var(--lime);
  color: #fff;
  background: linear-gradient(#7a3196, #351048);
  outline: none;
  box-shadow: inset 0 0 0 2px #190521, 0 0 .8em rgba(132, 255, 70, .55), 0 .2em 0 #110318;
}

.pixelButton:active,
.menuTile:active,
.choiceButton:active { transform: translateY(.18em); box-shadow: inset 0 0 0 2px #190521; }

.menuTile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7em;
  padding: .7em 1em;
  text-align: left;
}

.menuGrid.isSimple .menuTile {
  min-height: 8em;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: .5em;
  text-align: center;
}

.menuIcon { color: var(--lime); font-size: 1.5em; }
.menuValue { color: #cdb8dc; font-size: .84em; }

.togglePill {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #8a4aac;
  border-radius: 999px;
  overflow: hidden;
}

.togglePill span { padding: .25em .55em; color: #8e789d; }
.togglePill[data-on="true"] span:last-child,
.togglePill[data-on="false"] span:first-child { color: #0b0710; background: var(--lime); }

.paytableMenuThumb {
  display: block;
  width: 2.4em;
  aspect-ratio: 1;
  border: 1px solid #c769ee;
  border-radius: .24em;
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 0 0 .55em rgba(158, 255, 64, .46);
}

/* Native-resolution illustrated laboratory manual. It is a separate dialog
   because the cabinet's general-purpose 4:3 popup should never be stretched
   around this wide 1672 × 941 presentation. */
#paytableDialog {
  width: min(98vw, 170.7dvh, 1672px);
  height: min(96dvh, 55.14vw, 941px);
  max-width: 98vw;
  max-height: 96dvh;
  aspect-ratio: 1672 / 941;
  margin: auto;
  padding: 0;
  border: 0;
  color: #f7ecff;
  background: transparent;
  overflow: hidden;
}

#paytableDialog:not([open]) { display: none; }

#paytableDialog::backdrop {
  background:
    radial-gradient(circle at 50% 35%, rgba(102, 27, 151, .26), transparent 54%),
    rgba(3, 0, 9, .88);
  backdrop-filter: blur(4px) saturate(.78);
}

.paytableFrame {
  position: relative;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: drop-shadow(0 1.3em 1.7em rgba(0, 0, 0, .86));
  animation: paytableOpen 140ms ease-out;
}

.paytableContent {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.paytableStage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #08030e url("../assets/art/ui/paytable/laboratory-manual.png") center / contain no-repeat;
  image-rendering: pixelated;
}

.paytablePage {
  --page-accent: #9dff46;
  --page-accent-rgb: 157, 255, 70;
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: paytablePageIn 160ms ease-out;
}

.paytablePage-monsters { --page-accent: #ffd35a; --page-accent-rgb: 255, 211, 90; }
.paytablePage-runes { --page-accent: #6bdcff; --page-accent-rgb: 107, 220, 255; }
.paytablePage-special { --page-accent: #9dff46; --page-accent-rgb: 157, 255, 70; }
.paytablePage-dracula { --page-accent: #ff626c; --page-accent-rgb: 255, 98, 108; }
.paytablePage-bonus { --page-accent: #ff83e7; --page-accent-rgb: 255, 131, 231; }
.paytablePage-levels { --page-accent: #a5ff4d; --page-accent-rgb: 165, 255, 77; }
.paytablePage-doors { --page-accent: #a56cff; --page-accent-rgb: 165, 108, 255; }
.paytablePage-ways { --page-accent: #ffcf4c; --page-accent-rgb: 255, 207, 76; }
.paytablePage-information { --page-accent: #7fe7ff; --page-accent-rgb: 127, 231, 255; }

.paytablePageTitle {
  position: absolute;
  z-index: 3;
  left: 25%;
  top: 17.4%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 50%;
  height: 10.2%;
  border: max(1px, .13cqw) solid rgba(var(--page-accent-rgb), .78);
  border-radius: .5em;
  background:
    linear-gradient(180deg, rgba(80, 31, 105, .97), rgba(9, 5, 18, .98) 42% 72%, rgba(48, 18, 68, .97));
  box-shadow:
    inset 0 0 0 max(1px, .16cqw) rgba(0, 0, 0, .68),
    inset 0 0 1em rgba(var(--page-accent-rgb), .12),
    0 .4em .8em rgba(0, 0, 0, .66),
    0 0 1.1em rgba(var(--page-accent-rgb), .18);
  text-align: center;
  text-transform: uppercase;
}

.paytablePageTitle span {
  color: var(--page-accent);
  font-size: clamp(7px, .68cqw, 12px);
  font-weight: 950;
  letter-spacing: .18em;
  line-height: 1;
}

.paytablePageTitle h3 {
  margin: .08em 0 0;
  color: #ffe37e;
  background: linear-gradient(#fff5ba 2%, #ffd24f 44%, #e97924 82%, #ffc74a);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(15px, 2.05cqw, 38px);
  letter-spacing: .035em;
  line-height: .96;
  filter: drop-shadow(0 .1em 0 #50133e) drop-shadow(0 0 .22em rgba(var(--page-accent-rgb), .24));
}

.paytablePageBody {
  position: absolute;
  z-index: 2;
  inset: 29.6% 8.7% 15.7%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.paytablePageLead {
  height: 8.5%;
  margin: 0 0 .7%;
  color: #ddd0e8;
  font-size: clamp(7px, .78cqw, 13px);
  font-weight: 760;
  line-height: 1.16;
  text-align: center;
}

.paytablePayoutCard,
.paytableFeatureCard,
.potionAwardCard,
.draculaChoiceStep,
.paytableCompactRules,
.paytableLevelRow,
.doorFlow article,
.waysDiagram,
.waysRules,
.paytableStatsGrid article,
.paytableInfoNotes,
.paytableRibbon {
  border: 1px solid rgba(var(--page-accent-rgb), .56);
  background:
    radial-gradient(circle at 50% 0, rgba(var(--page-accent-rgb), .11), transparent 38%),
    linear-gradient(155deg, rgba(52, 18, 67, .9), rgba(5, 7, 14, .95) 66%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .72),
    inset 0 0 1em rgba(var(--page-accent-rgb), .06),
    0 .42em .8em rgba(0, 0, 0, .44);
}

.paytableSymbol {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 .32em .3em rgba(0, 0, 0, .7)) drop-shadow(0 0 .35em rgba(var(--page-accent-rgb), .16));
}

.paytablePayoutCards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 90.8%;
  gap: clamp(4px, .65cqw, 11px);
}

.paytablePayoutCard {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(3px, .52cqw, 9px);
  overflow: hidden;
  border-radius: .48em;
  text-align: center;
}

.paytablePayoutCard.topAward {
  border-color: rgba(255, 219, 86, .94);
  box-shadow: inset 0 0 1.2em rgba(255, 197, 35, .16), 0 0 1em rgba(255, 184, 38, .2), 0 .42em .8em rgba(0, 0, 0, .45);
}

.paytablePayoutSymbol {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.paytablePayoutSymbol .paytableSymbol { width: 100%; height: 100%; }

.paytablePayoutCard h4 {
  min-height: 2em;
  margin: -.08em 0 .28em;
  color: #ffe792;
  font-size: clamp(7px, .85cqw, 14px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 .12em #4b103f;
}

.paytablePayoutMatrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 35% 65%;
  min-height: clamp(40px, 5.8cqw, 80px);
  overflow: hidden;
  border: 1px solid rgba(var(--page-accent-rgb), .46);
  border-radius: .35em;
  background: rgba(2, 3, 8, .78);
}

.paytablePayoutMatrix > * {
  display: grid;
  place-items: center;
  min-width: 0;
  border-left: 1px solid rgba(var(--page-accent-rgb), .28);
}

.paytablePayoutMatrix > :nth-child(1),
.paytablePayoutMatrix > :nth-child(4) { border-left: 0; }

.paytablePayoutMatrix span {
  border-bottom: 1px solid rgba(var(--page-accent-rgb), .34);
  color: var(--page-accent);
  background: rgba(var(--page-accent-rgb), .08);
  font-size: clamp(7px, .82cqw, 13px);
  font-weight: 950;
}

.paytablePayoutMatrix strong {
  color: #fff0ad;
  font-size: clamp(8px, 1.02cqw, 17px);
  line-height: 1;
  text-shadow: 0 .1em #4e143b, 0 0 .4em rgba(var(--page-accent-rgb), .28);
}

.paytableSpecialGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 88.8%;
  gap: clamp(4px, .78cqw, 13px);
}

.paytableFeatureCard {
  display: grid;
  grid-template-rows: 54% minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(4px, .65cqw, 11px);
  overflow: hidden;
  border-radius: .55em;
  text-align: center;
}

.paytableFeatureSymbol {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.paytableFeatureSymbol .paytableSymbol { width: 82%; height: 100%; }
.paytableFeatureCopy { min-width: 0; }
.paytableFeatureCopy > span {
  color: var(--page-accent);
  font-size: clamp(6px, .67cqw, 11px);
  font-weight: 950;
  letter-spacing: .14em;
}
.paytableFeatureCopy h4 {
  margin: .12em 0 .24em;
  color: #ffe78e;
  font-family: Impact, sans-serif;
  font-size: clamp(11px, 1.42cqw, 24px);
  letter-spacing: .04em;
  text-shadow: 0 .1em #4a0d3d;
}
.paytableFeatureCopy p,
.doorFlow p,
.paytableCompactRules,
.paytableInfoNotes p {
  margin: 0;
  color: #e6d9ed;
  font-size: clamp(7px, .72cqw, 12px);
  line-height: 1.24;
}

.paytableRibbon {
  display: grid;
  place-items: center;
  height: 9.3%;
  margin: .7% auto 0;
  padding: 0 2%;
  border-radius: .38em;
  color: #fff0b2;
  font-size: clamp(6px, .76cqw, 12px);
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.08;
  text-align: center;
}

.paytableSplitPage {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: clamp(5px, .8cqw, 13px);
}

.paytableVignette {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--page-accent-rgb), .68);
  border-radius: .58em;
  background: #09040f;
  box-shadow: inset 0 0 1em rgba(var(--page-accent-rgb), .12), 0 .45em .8em rgba(0, 0, 0, .52), 0 0 1em rgba(var(--page-accent-rgb), .12);
}

.paytableVignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.draculaPageLayout {
  grid-template-columns: 34% minmax(0, 1fr);
  height: 100%;
}

.draculaPageLayout .paytableVignette { position: relative; }
.draculaPageLayout .paytableVignette figcaption {
  position: absolute;
  left: 22%;
  bottom: 24.5%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 57%;
  height: 24%;
  color: #b6ff61;
  font-size: clamp(6px, .66cqw, 11px);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px #061006, 0 0 .45em rgba(116, 255, 72, .72);
}
.draculaPageLayout .paytableVignette figcaption strong {
  color: #ecff9b;
  font-size: 1.13em;
}
.draculaPageLayout .paytableVignette figcaption span { margin-top: .35em; }

.draculaChoiceExplainer {
  display: grid;
  grid-template-rows: 9% 43% minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 1.8%;
}

.draculaChoiceExplainer .paytablePageLead {
  height: auto;
  margin: 0;
  text-align: left;
}

.draculaChoiceOrder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2px, .4cqw, 7px);
  min-height: 0;
}

.draculaChoiceStep {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 5% 4% 3%;
  overflow: hidden;
  border-radius: .42em;
}

.draculaChoiceStep > small {
  position: absolute;
  top: 4%;
  left: 7%;
  display: grid;
  place-items: center;
  width: 1.6em;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #18051f;
  background: var(--page-accent);
  font-size: clamp(5px, .56cqw, 9px);
  font-weight: 950;
}

.choiceOriginal {
  color: #ffe68a;
  font-size: clamp(7px, .8cqw, 13px);
  font-weight: 950;
}

.draculaChoiceStep .paytableSymbol { width: 92%; height: 96%; }
.draculaChoiceStep > b {
  color: var(--page-accent);
  font-size: clamp(6px, .7cqw, 11px);
}
.draculaChoiceStep.is-miss {
  border-color: rgba(255, 61, 73, .92);
  box-shadow: inset 0 0 1em rgba(255, 31, 47, .23), 0 0 .85em rgba(255, 31, 47, .24);
}
.draculaChoiceStep.is-miss > b {
  position: absolute;
  inset: 13% 4% 4%;
  display: grid;
  place-items: center;
  color: #ff3847;
  font-size: clamp(30px, 5cqw, 82px);
  line-height: 1;
  text-shadow: 0 .05em #2a0005, 0 0 .18em #ff2839;
}
.draculaChoiceStep.is-unreached { opacity: .38; filter: grayscale(.7); }

.paytableCompactRules {
  display: grid;
  align-content: center;
  gap: .32em;
  min-height: 0;
  margin: 0;
  padding: 2.5% 3% 2.5% 7%;
  overflow: hidden;
  border-radius: .48em;
}
.paytableCompactRules li::marker { color: var(--page-accent); font-weight: 950; }
.paytableCompactRules strong { color: #ffe478; }

.potionAwardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 79.5%;
  gap: clamp(5px, .85cqw, 14px);
}

.potionAwardCard {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 2.5% 3% 4%;
  overflow: hidden;
  border-radius: .58em;
  text-align: center;
}

.potionCluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.potionCluster img {
  width: 46%;
  height: 100%;
  margin-inline: -9%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 .45em rgba(120, 255, 78, .55));
}
.potionCluster-4 img { width: 39%; margin-inline: -8.5%; }
.potionCluster-5 img { width: 34%; margin-inline: -7.2%; }
.potionAwardCard > span {
  color: var(--page-accent);
  font-size: clamp(7px, .79cqw, 13px);
  font-weight: 950;
  letter-spacing: .08em;
}
.potionAwardCard > strong {
  color: #fff0a4;
  font-family: Impact, sans-serif;
  font-size: clamp(25px, 4.2cqw, 70px);
  line-height: .88;
  text-shadow: 0 .08em #521247, 0 0 .18em rgba(var(--page-accent-rgb), .42);
}
.potionAwardCard > b {
  color: #ffe46f;
  font-size: clamp(7px, .82cqw, 14px);
}
.potionRibbon { height: 9.3%; }

.levelsPageLayout {
  grid-template-columns: 31.5% minmax(0, 1fr);
  height: 77.5%;
}

.levelLadder {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(2px, .28cqw, 5px);
  min-width: 0;
  min-height: 0;
}

.paytableLevelRow {
  display: grid;
  grid-template-columns: 19% minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 1px .5em;
  overflow: hidden;
  border-radius: .34em;
}
.paytableLevelRow > strong {
  color: #ffe58b;
  font-size: clamp(6px, .71cqw, 12px);
  line-height: 1;
}
.paytableLevelRow.isMax {
  border-color: rgba(177, 255, 79, .94);
  box-shadow: inset 0 0 1em rgba(133, 255, 53, .2), 0 0 .75em rgba(133, 255, 53, .18);
}
.paytableLevelSymbols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.levelSymbolChip {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid rgba(var(--page-accent-rgb), .15);
}
.levelSymbolChip small {
  position: absolute;
  z-index: 2;
  left: 4%;
  bottom: 3%;
  color: #fff0a4;
  font-size: clamp(5px, .5cqw, 8px);
  font-weight: 950;
  text-shadow: 0 1px 2px #000;
}
.levelSymbolChip .paytableSymbol { width: 88%; height: 100%; }
.levelSymbolChip.isConverted { background: rgba(136, 255, 61, .06); }
.levelSymbolChip.isConverted .paytableSymbol { filter: drop-shadow(0 0 .35em rgba(152, 255, 79, .42)); }
.levelRibbon { height: 10.3%; margin-top: .6%; }
.paytableFinePrint {
  height: 8.4%;
  margin: .45% 0 0;
  color: #d9cae4;
  font-size: clamp(6px, .65cqw, 11px);
  font-weight: 760;
  line-height: 1.05;
  text-align: center;
}

.doorsPageLayout {
  grid-template-columns: 33.5% minmax(0, 1fr);
  height: 88.8%;
}

.doorFlow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3px, .5cqw, 8px);
  min-width: 0;
  min-height: 0;
}
.doorFlow article {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 5% 5% 6%;
  overflow: hidden;
  border-radius: .45em;
  text-align: center;
}
.doorFlow article > small {
  position: absolute;
  z-index: 2;
  top: 3%;
  left: 5%;
  display: grid;
  place-items: center;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #12041c;
  background: var(--page-accent);
  font-size: clamp(6px, .62cqw, 10px);
  font-weight: 950;
}
.doorTriplet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.doorTriplet .paytableSymbol {
  width: 54%;
  height: 100%;
  margin-inline: -11%;
}
.revealTriplet .paytableSymbol { width: 56%; margin-inline: -12%; }
.doorFlow strong {
  margin: .2em 0 .28em;
  color: #ffe784;
  font-size: clamp(7px, .83cqw, 14px);
  line-height: 1;
}
.doorFlow p { font-size: clamp(6px, .62cqw, 10px); }
.doorRibbon { height: 9.5%; }

.waysPageLayout {
  display: grid;
  grid-template-columns: 49% minmax(0, 1fr);
  height: 100%;
  gap: clamp(5px, .8cqw, 13px);
}
.waysDiagram,
.waysRules {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: .52em;
}
.waysDiagram {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 19%;
  padding: 2.2%;
}
.waysExampleGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  min-width: 0;
  min-height: 0;
  gap: clamp(2px, .32cqw, 5px);
}
.waysCell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 75, 148, .38);
  border-radius: .25em;
  background: rgba(3, 3, 9, .72);
  opacity: .27;
  filter: grayscale(.65);
}
.waysCell.isActive {
  border-color: rgba(var(--page-accent-rgb), .9);
  background: rgba(var(--page-accent-rgb), .11);
  opacity: 1;
  filter: none;
  box-shadow: inset 0 0 .8em rgba(var(--page-accent-rgb), .18), 0 0 .5em rgba(var(--page-accent-rgb), .22);
}
.waysCell .paytableSymbol { width: 100%; height: 100%; }
.waysEquation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  color: #cab7d5;
  font-size: clamp(8px, 1cqw, 16px);
  font-weight: 950;
}
.waysEquation span {
  display: grid;
  place-items: center;
  width: 1.9em;
  aspect-ratio: 1;
  border: 1px solid var(--page-accent);
  border-radius: 50%;
  color: #1b071c;
  background: linear-gradient(#fff19d, #e59d28);
}
.waysEquation strong { color: #ffe37a; font-size: 1.2em; }
.waysRules {
  display: grid;
  grid-template-rows: 24% minmax(0, 1fr);
  gap: 2.4%;
  padding: 3%;
}
.waysHeadline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  color: #dccbe7;
  text-align: center;
}
.waysHeadline strong {
  color: #ffe67f;
  font-family: Impact, sans-serif;
  font-size: clamp(25px, 4.1cqw, 68px);
  line-height: .85;
  text-shadow: 0 .08em #541347, 0 0 .18em rgba(var(--page-accent-rgb), .32);
}
.waysHeadline sup { color: var(--page-accent); font-size: .48em; }
.waysHeadline span { font-size: clamp(8px, 1.02cqw, 17px); font-weight: 950; }
.waysRules .paytableCompactRules { border: 0; background: transparent; box-shadow: none; padding-block: 0; }

.paytableStatsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 64%;
  gap: clamp(4px, .65cqw, 11px);
}
.paytableStatsGrid article {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 0;
  border-radius: .46em;
  text-align: center;
}
.paytableStatsGrid span {
  color: var(--page-accent);
  font-size: clamp(6px, .67cqw, 11px);
  font-weight: 950;
  letter-spacing: .09em;
}
.paytableStatsGrid strong {
  margin-top: .1em;
  color: #ffe78b;
  font-family: Impact, sans-serif;
  font-size: clamp(14px, 2cqw, 34px);
  letter-spacing: .03em;
  line-height: 1;
  text-shadow: 0 .08em #4d123f;
}
.paytableInfoNotes {
  display: grid;
  grid-template-columns: 1.05fr 1.4fr 1.05fr 1.05fr;
  height: 32.4%;
  margin-top: .8%;
  padding: 1.2% 1.5%;
  overflow: hidden;
  border-radius: .48em;
}
.paytableInfoNotes p {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0 4%;
  border-left: 1px solid rgba(var(--page-accent-rgb), .22);
  text-align: center;
}
.paytableInfoNotes p:first-child { border-left: 0; }
.paytableInfoNotes strong {
  display: block;
  margin-bottom: .28em;
  color: #ffe17e;
  font-size: .94em;
}

.paytableClose {
  position: absolute;
  z-index: 30;
  top: 5.2%;
  right: 4.2%;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.6cqw, 58px);
  aspect-ratio: 1;
  padding: 0 0 .08em;
  border: 2px solid #ffd66a;
  border-radius: .3em;
  color: #fff3b6;
  background: linear-gradient(#742568, #260a35);
  box-shadow: inset 0 0 0 2px #13031b, 0 .18em 0 #0a020e, 0 0 .8em rgba(194, 65, 255, .42);
  font-family: Georgia, serif;
  font-size: clamp(21px, 2.6cqw, 42px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.paytableClose:hover,
.paytableClose:focus-visible,
.paytableNavButton:hover,
.paytableNavButton:focus-visible {
  color: #fff;
  border-color: var(--lime);
  filter: brightness(1.2);
  outline: 2px solid rgba(188, 255, 96, .72);
}
.paytableClose:active,
.paytableNavButton:active { transform: translateY(.12em); }

.paytableControls {
  position: absolute;
  z-index: 20;
  left: 19%;
  right: 19%;
  bottom: 2.6%;
  display: grid;
  grid-template-columns: 8.5% minmax(0, 1fr) 8.5%;
  align-items: center;
  height: 8.3%;
  gap: 2.2%;
  padding: .45% .8%;
  border: 1px solid rgba(190, 92, 235, .62);
  border-radius: .48em;
  background: linear-gradient(180deg, rgba(54, 18, 70, .96), rgba(7, 4, 13, .98));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .62), 0 .38em .7em rgba(0, 0, 0, .58), 0 0 .8em rgba(140, 43, 194, .22);
}
.paytableNavButton {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 .08em;
  border: 1px solid #d484ff;
  border-radius: .28em;
  color: #ffe48b;
  background: linear-gradient(#672482, #280b39);
  box-shadow: inset 0 0 0 1px #120419, 0 .14em 0 #09010c;
  font-family: Georgia, serif;
  font-size: clamp(22px, 3.1cqw, 50px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.paytablePager {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  gap: 8%;
}
.paytableCurrentPage {
  overflow: hidden;
  color: #ffe28a;
  font-size: clamp(7px, .8cqw, 13px);
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.paytableDots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .62cqw, 10px);
}
.paytableDots button {
  position: relative;
  width: clamp(12px, 1.05cqw, 17px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #9b60b5;
  border-radius: 50%;
  background: #16071f;
  box-shadow: inset 0 0 0 2px #08010c;
  cursor: pointer;
}
.paytableDots button::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.paytableDots button:hover,
.paytableDots button:focus-visible { border-color: #fff2a0; outline: none; }
.paytableDots button.isActive {
  border-color: #e7ff97;
  background: var(--lime);
  box-shadow: inset 0 0 0 2px #1c4c0b, 0 0 .55em rgba(160, 255, 70, .75);
}

.rulesGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.ruleCard { padding: .8em 1em; border-left: .28em solid var(--purple); background: rgba(15, 4, 24, .76); line-height: 1.4; }
.ruleCard strong { display: block; margin-bottom: .25em; color: var(--lime); }

.featureAward { display: grid; place-items: center; height: 100%; text-align: center; }
.featureAward .awardNumber { color: var(--gold); font-family: Impact, sans-serif; font-size: clamp(40px, 13vmin, 170px); line-height: .9; text-shadow: 0 .05em #30103c, 0 0 .2em #ff7ae6; }
.featureAward .awardLabel { color: #fff; font-size: clamp(12px, 3.3vmin, 46px); font-weight: 900; }

.bigWinOverlay {
  --big-win-fade-duration: 680ms;
  z-index: 40;
  display: grid;
  place-items: center;
  opacity: 1;
  background:
    radial-gradient(circle, rgba(155, 37, 255, .3), transparent 58%),
    rgba(4, 0, 10, .7);
  transition: opacity var(--big-win-fade-duration) ease-in;
}

.bigWinArt {
  position: relative;
  width: 72%;
  aspect-ratio: 79 / 45;
  background: url("../assets/art/ui/big-win-video-poster.png") center / contain no-repeat;
  filter: drop-shadow(0 1em 1.2em rgba(0, 0, 0, .75));
  animation: bigWinIn 260ms steps(5, end) both;
  transition:
    transform var(--big-win-fade-duration) ease-in,
    filter var(--big-win-fade-duration) ease-in;
}

.bigWinFrameCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.bigWinTitle {
  position: absolute;
  top: 28.5%;
  left: 12%;
  z-index: 1;
  width: 76%;
  height: 33%;
  margin: 0;
}

.bigWinTitle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  /* Warm the keyed illustration so its olive face reads as polished gold
     without resampling or replacing any authored pixels. */
  filter:
    contrast(.76)
    sepia(.88)
    saturate(3.2)
    hue-rotate(350deg)
    brightness(1.28)
    drop-shadow(0 .16em .08em rgba(0, 0, 0, .72))
    drop-shadow(0 0 .24em rgba(255, 194, 44, .48));
}

.bigWinAmount {
  position: absolute;
  top: 55.5%;
  left: 16%;
  z-index: 1;
  width: 68%;
  height: 24%;
  display: grid;
  place-items: center;
  overflow: visible;
  transition:
    opacity var(--big-win-fade-duration) ease-in,
    transform var(--big-win-fade-duration) ease-in;
}

.bigWinDigits {
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .018em;
  filter: drop-shadow(0 .08em .04em rgba(0, 0, 0, .9)) drop-shadow(0 0 .1em rgba(109, 255, 55, .38));
}

.bigWinGlyph {
  position: relative;
  flex: 0 0 .75em;
  width: .75em;
  height: 1em;
  display: block;
  overflow: hidden;
  font-size: clamp(32px, 10.8vmin, 136px);
  font-style: normal;
}

.bigWinGlyph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/art/ui/numbers.png");
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--glyph-x) var(--glyph-y);
  image-rendering: pixelated;
  transform: translate(var(--glyph-offset-x), var(--glyph-offset-y));
}

.bigWinGlyph.isPunctuation {
  flex-basis: .28em;
  width: .28em;
  overflow: visible;
}

.bigWinGlyph.isPunctuation::before {
  inset: 0 auto 0 50%;
  width: .75em;
  transform: translate(calc(-50% + var(--glyph-offset-x)), var(--glyph-offset-y));
}

.bigWinGlyphText {
  flex-basis: .42em;
  width: .42em;
  display: grid;
  place-items: end center;
  padding-bottom: .14em;
  color: #fff29a;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(22px, 7vmin, 88px);
  line-height: 1;
  text-shadow: .04em .06em #301039, 0 0 .14em #7dff3c;
}

.bigWinGlyphText::before { content: none; }

.bigWinSuffix {
  position: relative;
  top: .1em;
  flex: 0 0 auto;
  min-width: .7em;
  display: block;
  overflow: visible;
  padding: 0 .04em .08em .02em;
  color: #ffe66c;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(25px, 8vmin, 100px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  -webkit-text-stroke: .025em #34103d;
  paint-order: stroke fill;
  text-shadow:
    .045em .065em 0 #301039,
    0 0 .12em rgba(125, 255, 60, .9),
    0 0 .03em #fff6a8;
}

.bigWinArt p {
  position: absolute;
  left: 30%;
  bottom: 15.5%;
  width: 40%;
  margin: 0;
  color: #c4abd2;
  font-size: clamp(7px, 1.15vmin, 15px);
  font-weight: 900;
  text-align: center;
  letter-spacing: .12em;
}

.bigWinOverlay.isLeaving { opacity: 0; }

.bigWinOverlay.isLeaving .bigWinArt {
  animation: none;
  transform: scale(.95);
  filter: drop-shadow(0 .4em .5em rgba(0, 0, 0, .4)) brightness(.72);
}

.bigWinOverlay.isLeaving .bigWinAmount {
  opacity: 0;
  transform: translateY(-5%) scale(.9);
}

/* Once the blocking reel/Door work has settled, paidSpinReady turns the
   cabinet control back into Spin even while this cosmetic count continues.
   Lift only its already-authored cabinet slice and clipped hotspot through
   the overlay; every other overlay pixel remains a click-to-skip surface. */
.gameShell:has(.bigWinOverlay:not([hidden])) .spinForeground {
  z-index: 41;
}

.gameShell:has(.bigWinOverlay:not([hidden])) .controls {
  z-index: 42;
  clip-path: none;
}

.levelUpOverlay {
  z-index: 45;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 53, 241, .3), transparent 44%),
    rgba(4, 0, 11, .58);
  opacity: 1;
  transition: opacity 340ms ease-in;
}

.levelUpOverlay.isLeaving { opacity: 0; }

.levelUpCard {
  position: relative;
  width: min(58%, 970px);
  aspect-ratio: 1431 / 821;
  filter: drop-shadow(0 .8em 1em rgba(0, 0, 0, .82));
  animation: conversionCardIn 250ms steps(5, end) both;
}

.levelUpFrame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.levelUpContents {
  position: absolute;
  inset: 0;
}

.levelUpTitle {
  position: absolute;
  left: 23%;
  top: 7.3%;
  width: 54%;
  height: 14.5%;
  display: grid;
  place-items: center;
  color: #ffe779;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(18px, 4.25vmin, 60px);
  font-weight: 1000;
  letter-spacing: .065em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 .08em #3d0c54, 0 0 .2em #a64cff;
}

.levelUpEquation {
  position: absolute;
  left: 17%;
  top: 25%;
  width: 66%;
  height: 48%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18% minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}

.levelUpSymbol,
.levelUpDoor {
  display: block;
  width: 72%;
  height: 92%;
  object-fit: contain;
  image-rendering: pixelated;
}

.levelUpSymbol {
  filter: drop-shadow(0 .35em .25em rgba(0, 0, 0, .72)) drop-shadow(0 0 .3em rgba(212, 91, 255, .6));
}

.levelUpDoor {
  filter: drop-shadow(0 .35em .25em rgba(0, 0, 0, .72)) drop-shadow(0 0 .28em #7aff50);
}

.conversionArrow {
  position: relative;
  width: 84%;
  height: 18%;
  filter: drop-shadow(0 0 .3em #72ff55);
}

.conversionArrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34%;
  width: 66%;
  height: 32%;
  background: linear-gradient(#faffad, #68ff48 52%, #23992e);
  box-shadow: inset 0 0 0 max(1px, .12vmin) #f5ffc9;
}

.conversionArrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 44%;
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 64%, 20% 36%);
  background: linear-gradient(135deg, #faffad, #62f948 55%, #207c2c);
}

.levelUpSpins {
  position: absolute;
  left: 29%;
  bottom: 5.6%;
  width: 42%;
  height: 14%;
  display: grid;
  place-items: center;
  color: #d9ff65;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(16px, 3.8vmin, 54px);
  font-weight: 1000;
  letter-spacing: .075em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 .08em #28083a, 0 0 .28em rgba(99, 255, 70, .72);
}

.draculaConversionOverlay {
  z-index: 44;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(170, 20, 42, .23), transparent 42%),
    rgba(4, 0, 9, .68);
  opacity: 1;
  transition: opacity 420ms ease-in;
}

.draculaConversionOverlay.isLeaving { opacity: 0; }

.draculaConversionCard {
  position: relative;
  width: min(62%, 1035px);
  aspect-ratio: 1431 / 821;
  filter: drop-shadow(0 .9em 1.1em rgba(0, 0, 0, .86));
  animation: conversionCardIn 260ms steps(5, end) both;
}

.draculaConversionFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: hue-rotate(292deg) saturate(1.12);
}

.draculaConversionContents {
  position: absolute;
  inset: 0;
}

.draculaConversionContents h2 {
  position: absolute;
  left: 23%;
  top: 7.3%;
  width: 54%;
  height: 14.5%;
  margin: 0;
  display: grid;
  place-items: center;
  color: #ffe58a;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(18px, 4.25vmin, 60px);
  letter-spacing: .065em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 .09em #35020d, 0 0 .32em #ff354b;
}

.draculaConversionList {
  --choice-count: 5;
  position: absolute;
  left: 11.5%;
  top: 28%;
  width: 77%;
  height: 42%;
  display: grid;
  grid-template-columns: repeat(var(--choice-count), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 1.6%;
}

.draculaChoice {
  position: relative;
  width: min(100%, 10.5em);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: max(2px, .16vmin) solid rgba(255, 210, 82, .52);
  background: radial-gradient(circle, rgba(108, 22, 124, .6), rgba(11, 2, 17, .9) 72%);
  box-shadow: inset 0 0 .8em rgba(226, 81, 255, .32), 0 0 .45em rgba(255, 48, 73, .3);
}

.draculaChoice img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 .22em .18em rgba(0, 0, 0, .76));
}

.draculaChoice.isConverting {
  animation: draculaChoiceConvert 620ms steps(7, end) both;
}

.draculaChoice.isConverted {
  border-color: #cfff6c;
  box-shadow: inset 0 0 1.1em rgba(128, 255, 79, .36), 0 0 .85em rgba(125, 255, 75, .72);
}

.draculaChoice.isMissing {
  animation: draculaChoiceMiss 640ms steps(8, end) both;
}

.draculaChoice.isMissing::after,
.draculaChoice.isMissed::after {
  content: "\00d7";
  position: absolute;
  inset: 3%;
  display: grid;
  place-items: center;
  color: #ff314a;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(38px, 10vmin, 142px);
  line-height: 1;
  text-shadow: 0 .055em #3e0009, 0 0 .22em rgba(255, 22, 62, .95);
}

.draculaChoice.isMissed {
  border-color: #ff314a;
  filter: saturate(.55) brightness(.7);
  box-shadow: inset 0 0 1.1em rgba(255, 30, 61, .32), 0 0 .72em rgba(255, 31, 70, .64);
}

.draculaChoice.isUnreached {
  opacity: .46;
  filter: grayscale(.45) brightness(.72);
}

.draculaConversionContents > strong {
  position: absolute;
  left: 29%;
  bottom: 5.6%;
  width: 42%;
  height: 14%;
  display: grid;
  place-items: center;
  color: #e6ff86;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(16px, 3.8vmin, 54px);
  letter-spacing: .075em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 .08em #270332, 0 0 .25em #76ff53;
}

.bonusTransition {
  --transition-duration: 3000ms;
  z-index: 55;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  color: #fff4a7;
  background: #070114;
  animation: bonusTransitionLifetime var(--transition-duration) ease-in-out both;
}

.bonusTransition.isAwaitingAudio {
  animation: none;
  opacity: 1;
}

.bonusTransition.isAwaitingAudio .bonusTransitionBackdrop,
.bonusTransition.isAwaitingAudio .bonusTransitionCopy {
  animation: none;
}

.bonusTransition.isAwaitingAudio .bonusTransitionBackdrop {
  transform: scale(1.035);
}

.bonusTransition.isAwaitingAudio .bonusTransitionBats {
  visibility: hidden;
}

.bonusRecoveryPrompt {
  position: absolute;
  left: 50%;
  bottom: 9.5%;
  z-index: 2;
  padding: .48em 1.15em .42em;
  border: max(2px, .16vmin) solid rgba(217, 255, 97, .82);
  border-radius: .32em;
  color: #f7ffbd;
  background: rgba(23, 3, 40, .84);
  box-shadow: inset 0 0 .65em rgba(197, 68, 255, .25), 0 0 .8em rgba(111, 255, 74, .4);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(10px, 2.1vmin, 30px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .08em #2b073a, 0 0 .28em #62ff4a;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: recoveryAudioPromptPulse 1.1s steps(2, end) infinite;
}

.bonusRecoveryPrompt[hidden] { display: none; }

.bonusTransitionBackdrop,
.bonusTransitionVignette,
.bonusTransitionBats,
.bonusTransitionCopy {
  position: absolute;
  inset: 0;
}

.bonusTransitionBackdrop {
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  animation: moonApproach var(--transition-duration) ease-out both;
}

.bonusTransitionVignette {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 48%, transparent 28%, rgba(49, 6, 77, .18) 54%, rgba(3, 0, 11, .78) 100%),
    linear-gradient(180deg, rgba(17, 1, 36, .28), transparent 34%, rgba(5, 0, 14, .5));
}

.bonusTransitionBats { z-index: -1; }

.bonusBatSprite {
  position: absolute;
  left: var(--bat-x);
  top: var(--bat-y);
  width: 10.5%;
  aspect-ratio: 1;
  display: block;
  background-image: url("../assets/art/ui/bat-flap-sheet.png");
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0 0;
  image-rendering: pixelated;
  opacity: 0;
  filter: drop-shadow(0 0 .18em rgba(201, 92, 255, .7));
  transform: translate(-50%, -50%) scale(.08);
  transform-origin: center;
  animation:
    batRush var(--bat-flight) cubic-bezier(.28, .02, .72, 1) var(--bat-delay) both,
    batFlap 620ms steps(1, end) var(--flap-offset) infinite;
}

.bonusTransitionCopy {
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0 0 10%;
  text-align: center;
  transform: rotate(-1deg);
  animation: transitionCopyIn var(--transition-duration) steps(10, end) both;
}

.bonusTransition.isOutro .bonusTransitionCopy { padding-bottom: 14%; }
.bonusTransition.isOutro .bonusTransitionCopy small { margin-bottom: .42em; }
.bonusTransition.isOutro .bonusTransitionCopy strong {
  font-size: clamp(44px, 15vmin, 196px);
  line-height: .86;
  letter-spacing: -.015em;
}
.bonusTransition.isOutro .bonusTransitionCopy span { margin-top: .54em; }

.bonusTransitionCopy small {
  margin-bottom: .22em;
  color: #d9ff61;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(11px, 2.8vmin, 40px);
  font-weight: 1000;
  letter-spacing: .22em;
  line-height: 1;
  text-shadow: 0 .1em #2e083e, 0 0 .35em #64ff42;
}

.bonusTransitionCopy strong {
  color: #fff5a2;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(68px, 24vmin, 310px);
  font-weight: 1000;
  letter-spacing: -.035em;
  line-height: .72;
  -webkit-text-stroke: max(2px, .35vmin) #53116d;
  text-shadow:
    0 .055em #260435,
    0 .1em #100019,
    .035em 0 #ffd957,
    -.035em 0 #ffd957,
    0 0 .18em rgba(255, 221, 76, .84),
    0 0 .45em rgba(179, 62, 255, .7);
}

.bonusTransitionCopy span {
  margin-top: .38em;
  color: #fff0a0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(25px, 7vmin, 94px);
  font-weight: 1000;
  letter-spacing: .13em;
  line-height: 1;
  -webkit-text-stroke: max(1px, .16vmin) #431057;
  text-shadow: 0 .09em #180122, 0 0 .25em #c43cff;
}

/* Open the entry composition around its fixed central spin count. Keep these
   offsets entry-only so BONUS COMPLETE / TOTAL WIN retains its tuned layout. */
.bonusTransition:not(.isOutro) #bonusTransitionKicker {
  transform: translateY(-1.2vmin);
}

.bonusTransition:not(.isOutro) #bonusTransitionLabel {
  transform: translateY(1.2vmin);
}

.loadingScreen {
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #f5eaff;
  background: #09020e;
}

.loadingScreen::before,
.loadingScreen::after {
  content: "";
  position: absolute;
  inset: -3%;
  pointer-events: none;
}

.loadingScreen::before {
  z-index: -2;
  background: url("../assets/art/backgrounds/gamebackground.png") center / cover no-repeat;
  filter: saturate(.78) brightness(.42) blur(1px);
  transform: scale(1.035);
  animation: loadingBackdrop 8s ease-in-out infinite alternate;
}

.loadingScreen::after {
  z-index: -1;
  background:
    radial-gradient(circle at 50% 37%, rgba(132, 35, 193, .42), transparent 30%),
    radial-gradient(ellipse at center, transparent 28%, rgba(5, 0, 12, .68) 70%, #030006 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
}

.loadingCard {
  position: relative;
  width: min(54%, 880px);
  min-height: 59%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2.2%;
  padding: 4.6% 5.5% 3.8%;
  border: max(2px, .18vmin) solid #7d35a8;
  border-radius: 2.4%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 18% 82%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(90deg, rgba(139, 52, 177, .055) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(37, 10, 55, .96), rgba(13, 3, 23, .97));
  box-shadow:
    inset 0 0 0 max(3px, .38vmin) #12051c,
    inset 0 0 2.2em rgba(169, 54, 226, .22),
    0 .9em 2.3em rgba(0, 0, 0, .72),
    0 0 2.4em rgba(122, 32, 184, .34);
}

.loadingCard::before,
.loadingCard::after {
  content: "";
  position: absolute;
  width: 2.1%;
  aspect-ratio: 1;
  top: 4.4%;
  border: max(1px, .1vmin) solid #e7b757;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff0a8 0 12%, #a85b24 18% 48%, #2d0c32 56%);
  box-shadow: 0 0 .45em rgba(255, 144, 36, .62);
}

.loadingCard::before { left: 3.2%; }
.loadingCard::after { right: 3.2%; }

.loadingSpecimen {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 18%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
}

.loadingSpecimen::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: max(2px, .18vmin) solid rgba(200, 91, 247, .66);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 255, 82, .25), rgba(107, 24, 145, .16) 52%, transparent 68%);
  box-shadow: 0 0 1.2em rgba(106, 255, 80, .35), inset 0 0 .8em rgba(204, 69, 255, .38);
}

.loadingSpecimen img {
  position: relative;
  width: 76%;
  height: 76%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 .3em .35em #020003) drop-shadow(0 0 .45em rgba(87, 255, 67, .48));
  animation: loadingSpecimenFloat 2.6s steps(8, end) infinite;
}

.loadingEyebrow {
  margin-top: 3.5%;
  color: #d2a6e7;
  font-size: clamp(7px, 1.15vmin, 16px);
  font-weight: 900;
  letter-spacing: .42em;
  text-indent: .42em;
  text-shadow: 0 2px #08010d;
}

.loadingLogo {
  display: grid;
  justify-items: center;
  row-gap: clamp(3px, .65vmin, 9px);
  font-family: Impact, "Arial Black", sans-serif;
  line-height: .9;
  text-align: center;
  transform: skew(-1deg);
}

.loadingLogo span {
  color: var(--lime);
  font-size: clamp(31px, 7.3vmin, 100px);
  letter-spacing: .1em;
  text-indent: .1em;
  text-shadow: .045em .045em #142301, -.025em -.025em #efff9c, 0 0 .22em rgba(98, 255, 95, .66);
}

.loadingLogo strong {
  color: #ed59ff;
  font-size: clamp(37px, 9.1vmin, 124px);
  letter-spacing: .035em;
  text-indent: .035em;
  text-shadow: .045em .045em #30103c, -.025em -.025em #ffd2ff, 0 0 .22em rgba(186, 56, 255, .72);
}

.loadingDivider {
  width: 78%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4%;
  color: #ffbd4a;
  font-size: clamp(7px, 1.2vmin, 17px);
}

.loadingDivider i {
  height: max(1px, .1vmin);
  background: linear-gradient(90deg, transparent, #8d3caf 24%, #ffb73f);
  box-shadow: 0 0 .35em rgba(233, 76, 255, .45);
}

.loadingDivider i:last-child { transform: scaleX(-1); }
.loadingDivider b { text-shadow: 0 0 .5em #ff7a1c; }

.loadingTrack {
  position: relative;
  width: 72%;
  height: clamp(10px, 2.05vmin, 25px);
  overflow: hidden;
  padding: max(2px, .22vmin);
  border: max(2px, .16vmin) solid #7e389f;
  border-radius: 999px;
  background: #0a020f;
  box-shadow: inset 0 .18em .28em #030005, 0 0 .75em rgba(133, 47, 184, .58);
}

.loadingTrack span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .3) 0 7px, transparent 7px 14px),
    linear-gradient(90deg, #963bde, #eb51ff 34%, #bfff45 72%, #fff181);
  box-shadow: 0 0 .55em #baff4c;
  transition: width 180ms linear;
}

.loadingTrack span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: translateX(-100%);
  animation: loadingScan 1.1s linear infinite;
}

.loadingStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 1.8em;
}

.loadingStatus > i {
  width: .62em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9cff43;
  box-shadow: 0 0 .7em #6dff45;
  animation: loadingLamp 1s steps(2, end) infinite;
}

.loadingScreen p {
  margin: 0;
  color: #efe1f7;
  font-size: clamp(7px, 1.35vmin, 18px);
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 2px #08010d;
}

.loadingScreen #startButton:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.loadingScreen:has(#startButton:not([hidden])) .loadingCard {
  animation: loadingReady 1.8s ease-in-out infinite;
}

.loadingScreen:has(#startButton:focus-visible) .loadingCard {
  outline: max(2px, .2vmin) solid #d9ff55;
  outline-offset: max(3px, .35vmin);
}

.doorCurtain { z-index: 50; overflow: hidden; pointer-events: none; background: rgba(5, 0, 10, .28); }
.doorLeaf { position: absolute; top: 0; width: 51%; height: 100%; background-image: url("../assets/art/symbols/door.png"); background-repeat: no-repeat; background-size: 200% 100%; image-rendering: pixelated; filter: brightness(.68) contrast(1.2) drop-shadow(0 0 1em #000); transition: transform 620ms steps(12, end); }
.doorLeafLeft { left: 0; background-position: left center; transform: translateX(-102%); }
.doorLeafRight { right: 0; background-position: right center; transform: translateX(102%); }
.doorCurtain.isClosed .doorLeaf { transform: translateX(0); }
.doorCurtainLabel { position: absolute; inset: 0; display: grid; place-items: center; color: #d9ff57; font-family: Impact, sans-serif; font-size: clamp(25px, 8vmin, 110px); text-shadow: 0 .07em #1b0822, 0 0 .2em #61ff4b; opacity: 0; transition: opacity 180ms ease 360ms; }
.doorCurtain.isClosed .doorCurtainLabel { opacity: 1; }

.toast {
  position: absolute;
  z-index: 25;
  left: 31%;
  top: 36%;
  width: 38%;
  padding: .45em .8em;
  border: 3px solid #dfff67;
  border-radius: .3em;
  color: #fff59c;
  background: rgba(49, 10, 65, .94);
  box-shadow: 0 0 1em #8e36c6, inset 0 0 .7em rgba(112, 255, 69, .25);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(15px, 4.5vmin, 62px);
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 .05em #25082e;
  animation: toastIn 150ms steps(3, end) both;
}

.orientationHint {
  z-index: 80;
  display: none;
  place-content: center;
  gap: 1em;
  padding: 10vw;
  color: #fff;
  background: #0d0317;
  text-align: center;
}
.orientationHint strong { color: var(--lime); font-size: 7vw; }
.orientationHint span { font-size: 4vw; }

.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes meterPulse { 50% { filter: brightness(1.5); } }
@keyframes collectorReceive {
  0% { transform: scale(.9); filter: brightness(1.25) drop-shadow(0 0 .2em #7aff55); }
  45% { transform: scale(1.24); filter: brightness(1.65) drop-shadow(0 0 .85em #baff71); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 .42em #62ff5f) saturate(1.22) brightness(1.07); }
}
@keyframes potionMeterCompleteFlash {
  0%, 22%, 52%, 100% {
    opacity: 1;
    transform: scale(1.04);
    filter: drop-shadow(0 0 .42em #62ff5f) saturate(1.22) brightness(1.07);
  }
  23%, 45%, 53%, 78% {
    opacity: 1;
    transform: scale(1.2);
    filter: brightness(1.85) saturate(1.45) drop-shadow(0 0 1em #efff93) drop-shadow(0 0 1.5em #c13fff);
  }
}
@keyframes collectorSpark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.35); }
}
@keyframes conversionCardIn {
  from { opacity: 0; transform: scale(.76) translateY(6%); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bonusTransitionLifetime {
  0% { opacity: 0; }
  11%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes moonApproach {
  from { transform: scale(1.09); filter: brightness(.62) saturate(.72); }
  18% { filter: brightness(1) saturate(1.08); }
  to { transform: scale(1); filter: brightness(.92) saturate(1.04); }
}
@keyframes transitionCopyIn {
  0%, 14% { opacity: 0; transform: scale(.64) translateY(9%); }
  28%, 76% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.08) translateY(-2%); }
}
@keyframes recoveryAudioPromptPulse {
  0%, 100% { filter: brightness(.9); transform: translateX(-50%) scale(.98); }
  50% { filter: brightness(1.25); transform: translateX(-50%) scale(1.03); }
}
@keyframes batRush {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.06) rotate(0deg); }
  12% { opacity: .9; }
  70% { opacity: .96; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--bat-end-x)), calc(-50% + var(--bat-end-y))) scale(var(--bat-end-scale)) rotate(var(--bat-turn));
  }
}
@keyframes batFlap {
  0% { background-position: 0 0; }
  6.25% { background-position: 33.333333% 0; }
  12.5% { background-position: 66.666667% 0; }
  18.75% { background-position: 100% 0; }
  25% { background-position: 0 33.333333%; }
  31.25% { background-position: 33.333333% 33.333333%; }
  37.5% { background-position: 66.666667% 33.333333%; }
  43.75% { background-position: 100% 33.333333%; }
  50% { background-position: 0 66.666667%; }
  56.25% { background-position: 33.333333% 66.666667%; }
  62.5% { background-position: 66.666667% 66.666667%; }
  68.75% { background-position: 100% 66.666667%; }
  75% { background-position: 0 100%; }
  81.25% { background-position: 33.333333% 100%; }
  87.5% { background-position: 66.666667% 100%; }
  93.75%, 100% { background-position: 100% 100%; }
}
@keyframes draculaThinkingMarks {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 8%, 0) scale(.68) rotate(0deg);
  }
  7% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1.12) rotate(0deg);
  }
  13% { transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg); }
  20%, 36%, 52% { transform: translate3d(calc(-50% - 3px), -1px, 0) scale(1) rotate(-2deg); }
  28%, 44%, 60% { transform: translate3d(calc(-50% + 3px), 1px, 0) scale(1) rotate(2deg); }
  68%, 76% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -8%, 0) scale(.94) rotate(0deg);
  }
}
@keyframes draculaChoiceConvert {
  0% { transform: scale(1); filter: brightness(1); }
  28% { transform: scale(1.15) rotate(-2deg); filter: brightness(1.7) saturate(1.4); }
  48% { transform: scale(.08) rotate(5deg); filter: brightness(2.2) drop-shadow(0 0 1em #ff354d); }
  70% { transform: scale(1.18) rotate(-1deg); filter: brightness(1.65) drop-shadow(0 0 1em #95ff59); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes draculaChoiceMiss {
  0%, 100% { transform: translateX(0) scale(1); filter: brightness(1); }
  18% { transform: translateX(-7%) scale(1.04); filter: brightness(1.45) saturate(1.25); }
  34% { transform: translateX(7%) scale(1.04); }
  50% { transform: translateX(-5%) scale(1.02); filter: brightness(1.8) saturate(.72); }
  66% { transform: translateX(5%) scale(1.02); }
  82% { transform: translateX(-2%) scale(1); filter: brightness(.72) saturate(.58); }
}
@keyframes towerWindowCoreFlicker {
  0%, 100% { opacity: .62; transform: scale(.985, .99); }
  14% { opacity: .68; transform: scale(1, 1.005); }
  33% { opacity: .58; transform: scale(.975, .99); }
  49% { opacity: .72; transform: scale(1.01, 1.015); }
  66% { opacity: .64; transform: scale(.99, 1); }
  81% { opacity: .7; transform: scale(1.005, 1.01); }
  92% { opacity: .6; transform: scale(.98, .995); }
}
@keyframes towerWindowAura {
  0%, 100% { opacity: .2; transform: translate3d(-50%, -50%, 0) scale(.88); }
  17% { opacity: .26; transform: translate3d(-50%, -50%, 0) scale(.96); }
  36% { opacity: .18; transform: translate3d(-50%, -50%, 0) scale(.86); }
  52% { opacity: .3; transform: translate3d(-50%, -50%, 0) scale(1); }
  68% { opacity: .22; transform: translate3d(-50%, -50%, 0) scale(.92); }
  84% { opacity: .27; transform: translate3d(-50%, -50%, 0) scale(.97); }
}
@keyframes loadingBackdrop { to { filter: saturate(.86) brightness(.48) blur(1px); transform: scale(1.055); } }
@keyframes loadingSpecimenFloat { 50% { transform: translateY(-5%) scale(1.025); filter: drop-shadow(0 .42em .42em #020003) drop-shadow(0 0 .65em rgba(87, 255, 67, .66)); } }
@keyframes loadingScan { to { transform: translateX(100%); } }
@keyframes loadingLamp { 50% { opacity: .45; } }
@keyframes loadingReady {
  50% {
    border-color: #b361df;
    box-shadow: inset 0 0 0 max(3px, .38vmin) #12051c, inset 0 0 2.5em rgba(169, 54, 226, .28), 0 .9em 2.3em rgba(0, 0, 0, .72), 0 0 2.8em rgba(151, 57, 215, .5);
  }
}
@keyframes paytableOpen {
  from { opacity: .35; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes paytablePageIn {
  from { opacity: 0; transform: translateY(.7%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panelIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes bigWinIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pressPulse { 50% { filter: brightness(1.35); transform: scale(1.025); } }

@media (orientation: portrait) and (max-width: 900px) {
  .orientationHint:not([hidden]) { display: grid; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .paytablePageTitle { top: 16.8%; height: 10.8%; }
  .paytablePageBody { inset: 29.4% 8.7% 17.8%; }
  .paytableControls { bottom: 1.8%; height: 11.5%; }
  .paytableNavButton { min-width: 0; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (prefers-contrast: more) {
  .panelContent { color: #fff; }
  .hotspot:focus-visible::after { border-width: 4px; }
  .statusMessage, .cabinetMeter { text-shadow: 0 2px #000, 0 0 5px #000; }
}