:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  --ink: #f6fbff;
  --line: rgba(255, 213, 99, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, #0b2849 0%, #04121d 42%, #010407 100%);
}

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

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

button:focus-visible {
  outline: max(2px, 0.14vw) solid #8cf7ff;
  outline-offset: max(2px, 0.14vw);
}

[hidden] {
  display: none !important;
}

.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;
}

#gameShell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  background: #01070b;
  isolation: isolate;
}

.gameStage {
  position: relative;
  width: min(100vw, calc(100dvh * 1.7768331562));
  max-width: 100vw;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #02151a;
  box-shadow: 0 0 8vmin rgba(0, 0, 0, 0.92);
  container-type: inline-size;
}

.sceneBackground,
.bonusRain,
.sceneVignette,
.reelBackdrop,
.sceneForeground,
#gameCanvas,
.ambientMotes,
.fairyAura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sceneBackground {
  z-index: 0;
  background-image: image-set(
    url("../assets/art/game-background.webp") type("image/webp"),
    url("../assets/art/game-background.png") type("image/png")
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: filter 0.8s ease, opacity 0.6s ease;
}

.owlAnimation {
  position: absolute;
  z-index: 0;
  left: 4.35407%;
  top: 4.12327%;
  width: 7.92464%;
  height: 23.54942%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  filter: brightness(0.88) saturate(0.9);
  transition:
    opacity 280ms ease,
    visibility 0s linear 280ms;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

.owlAnimation.isPlaying {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 280ms ease,
    visibility 0s linear 0s;
}

.gameStage.isBonus .owlAnimation {
  opacity: 0;
  visibility: hidden;
}

.logoAnimation {
  position: absolute;
  z-index: 1;
  /* Native 1672 x 941 registration: x 347, y 1.6, 995.6 x 149.665. */
  left: 20.7536%;
  top: 0.17%;
  width: 59.5455%;
  height: 15.9049%;
  aspect-ratio: 1224 / 184;
  display: block;
  object-fit: fill;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  transition: opacity 180ms ease;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 3.5%,
      #000 95.5%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 90.5%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 3.5%,
      #000 95.5%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 90.5%,
      transparent 100%
    );
  mask-composite: intersect;
}

.logoAnimation.isReady.isActive {
  opacity: 1;
  visibility: visible;
}

.gameStage.isBonus .logoAnimation {
  opacity: 0;
  visibility: hidden;
}

.bonusLogoAnimation {
  position: absolute;
  z-index: 1;
  /* Native 1672 x 941 registration: x 367, y 0, 948 x 151.68. */
  left: 21.9498%;
  top: 0;
  width: 56.6986%;
  height: 16.119%;
  aspect-ratio: 1200 / 192;
  display: block;
  object-fit: fill;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 3.5%,
      #000 95.5%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 90.5%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 3.5%,
      #000 95.5%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 90.5%,
      transparent 100%
    );
  mask-composite: intersect;
}

.bonusLogoAnimation.isReady.isPlaying {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

.bonusLogoAnimation.isReady.isPlaying.isFading {
  /*
   * The authored logo contracts slightly in its final frames. Ease the
   * registration outward during the crossfade so it remains locked to the
   * baked header underneath instead of appearing thin at the handoff.
   */
  left: 21.86%;
  top: -0.2125%;
  width: 57.2069%;
  height: 16.7906%;
  opacity: 0;
  visibility: hidden;
  transition:
    left 2s cubic-bezier(0.3, 0.04, 0.72, 1),
    top 2s cubic-bezier(0.3, 0.04, 0.72, 1),
    width 2s cubic-bezier(0.3, 0.04, 0.72, 1),
    height 2s cubic-bezier(0.3, 0.04, 0.72, 1),
    opacity 2s cubic-bezier(0.3, 0.04, 0.72, 1),
    visibility 0s linear 2s;
}

.gameStage:not(.isBonus) .bonusLogoAnimation {
  opacity: 0;
  visibility: hidden;
}

.moonGlow {
  --moon-x: 15.05%;
  --moon-y: 5.55%;
  --moon-inner-size: 6.8cqw;
  --moon-corona-size: 14.2cqw;
  --moon-inner-opacity: 0.76;
  --moon-corona-low: 0.5;
  --moon-corona-high: 0.68;
  --moon-corona-rest: 0.59;
  --moon-corona-duration: 8.8s;
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.moonGlow::before,
.moonGlow::after {
  content: "";
  position: absolute;
  left: var(--moon-x);
  top: var(--moon-y);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
}

.moonGlow::before {
  width: var(--moon-inner-size);
  opacity: var(--moon-inner-opacity);
  background: radial-gradient(
    circle,
    rgba(251, 254, 255, 0.16) 0 40%,
    rgba(175, 227, 255, 0.1) 58%,
    rgba(92, 184, 255, 0.04) 72%,
    transparent 82%
  );
  filter: blur(0.1cqw);
}

.moonGlow::after {
  width: var(--moon-corona-size);
  opacity: var(--moon-corona-low);
  background: radial-gradient(
    circle,
    transparent 0 26%,
    rgba(205, 240, 255, 0.14) 33%,
    rgba(98, 190, 255, 0.085) 47%,
    rgba(50, 105, 230, 0.035) 62%,
    transparent 76%
  );
  will-change: opacity, transform;
  animation: moon-corona-breathe var(--moon-corona-duration) ease-in-out infinite;
}

.gameStage.isBonus .moonGlow {
  --moon-x: 15.55%;
  --moon-y: 5.8%;
  --moon-inner-size: 7.2cqw;
  --moon-corona-size: 15cqw;
  --moon-inner-opacity: 0.68;
  --moon-corona-low: 0.4;
  --moon-corona-high: 0.54;
  --moon-corona-rest: 0.46;
  --moon-corona-duration: 10.6s;
}

.gameStage.isBonus .moonGlow::before {
  background: radial-gradient(
    circle,
    rgba(246, 255, 250, 0.13) 0 40%,
    rgba(184, 239, 218, 0.085) 58%,
    rgba(82, 177, 164, 0.035) 72%,
    transparent 82%
  );
}

.gameStage.isBonus .moonGlow::after {
  background: radial-gradient(
    circle,
    transparent 0 27%,
    rgba(200, 241, 227, 0.105) 35%,
    rgba(103, 201, 190, 0.06) 49%,
    rgba(54, 117, 164, 0.025) 64%,
    transparent 78%
  );
}

.bonusRain {
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  contain: strict;
  transition: opacity 650ms ease;
  will-change: opacity;
}

.gameStage.isBonus .bonusRain.isRainActive {
  opacity: 1;
}

.gameStage.isBonus .sceneBackground {
  background-image: image-set(
    url("../assets/art/haunted-free-spins-background.webp") type("image/webp"),
    url("../assets/art/haunted-free-spins-background.png") type("image/png")
  );
  filter: saturate(1.08) brightness(1.01);
}

.sceneVignette {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 48%, rgba(0, 5, 8, 0.18) 82%, rgba(0, 3, 5, 0.55) 100%),
    linear-gradient(180deg, rgba(52, 192, 255, 0.05), transparent 22%);
  mix-blend-mode: multiply;
}

.lanternGlow {
  --lantern-glow-low: 0.34;
  --lantern-glow-high: 0.48;
  --lantern-glow-mid: 0.41;
  --lantern-glow-flicker: 0.45;
  position: absolute;
  z-index: 1;
  left: 88.9%;
  top: 4.2%;
  width: 11.4%;
  height: 24%;
  pointer-events: none;
  contain: strict;
  opacity: var(--lantern-glow-low);
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(255, 252, 214, 0.42) 0 5%,
      rgba(255, 205, 96, 0.21) 20%,
      rgba(255, 151, 48, 0.075) 45%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 50% 67%,
      rgba(255, 177, 67, 0.07),
      transparent 62%
    );
  mix-blend-mode: screen;
  filter: blur(0.28cqw) brightness(1.04);
  transform-origin: 50% 42%;
  will-change: opacity, transform;
  animation: lantern-glow-breathe 4.6s cubic-bezier(0.45, 0.05, 0.28, 0.98) infinite;
}

.lanternGlow::before {
  content: "";
  position: absolute;
  inset: 19% 27% 34%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.42;
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(255, 255, 228, 0.82) 0 7%,
    rgba(255, 210, 104, 0.46) 22%,
    rgba(255, 139, 42, 0.12) 52%,
    transparent 74%
  );
  mix-blend-mode: screen;
  filter: blur(0.12cqw);
  transform-origin: 50% 58%;
  will-change: opacity, transform;
  animation: lantern-flame-flicker 1.85s ease-in-out infinite;
}

.gameStage.isBonus .lanternGlow {
  --lantern-glow-low: 0.27;
  --lantern-glow-high: 0.39;
  --lantern-glow-mid: 0.33;
  --lantern-glow-flicker: 0.36;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(222, 255, 219, 0.4) 0 5%,
      rgba(110, 255, 180, 0.2) 20%,
      rgba(51, 208, 164, 0.07) 45%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 50% 67%,
      rgba(88, 238, 182, 0.065),
      transparent 62%
    );
}

.gameStage.isBonus .lanternGlow::before {
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(240, 255, 223, 0.76) 0 7%,
    rgba(139, 255, 184, 0.4) 22%,
    rgba(50, 222, 174, 0.11) 52%,
    transparent 74%
  );
}

.reelBackdrop {
  z-index: 3;
  isolation: isolate;
  clip-path: inset(16.0468% 14.5933% 17.4283% 14.7727%);
  background-image: image-set(
    url("../assets/art/game-background.webp") type("image/webp"),
    url("../assets/art/game-background.png") type("image/png")
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.reelBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 48%, rgba(0, 5, 8, 0.18) 82%, rgba(0, 3, 5, 0.55) 100%),
    linear-gradient(180deg, rgba(52, 192, 255, 0.05), transparent 22%);
  mix-blend-mode: multiply;
}

.gameStage.isBonus .reelBackdrop {
  background-image: image-set(
    url("../assets/art/haunted-free-spins-background.webp") type("image/webp"),
    url("../assets/art/haunted-free-spins-background.png") type("image/png")
  );
  filter: saturate(1.08) brightness(1.01);
}

#gameCanvas {
  z-index: 3;
  display: block;
}

.sceneForeground {
  z-index: 4;
  clip-path: polygon(
    0 0,
    87.9187% 0,
    87.9187% 85.441%,
    100% 85.441%,
    100% 100%,
    0 100%
  );
  background-image: image-set(
    url("../assets/art/reel-foreground-base.webp") type("image/webp"),
    url("../assets/art/reel-foreground-base.png") type("image/png")
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.gameStage.isBonus .sceneForeground {
  background-image: image-set(
    url("../assets/art/reel-foreground-haunted-bonus.webp") type("image/webp"),
    url("../assets/art/reel-foreground-haunted-bonus.png") type("image/png")
  );
}

.fairyCharacter {
  position: absolute;
  z-index: 2;
  right: -6.8%;
  bottom: 7.4%;
  width: 32%;
  height: 84%;
  pointer-events: none;
  contain: layout style paint;
  transform: translate3d(55px, -32px, 0) scale(1.35);
  transform-origin: 50% 100%;
}

.fairyCharacter::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 34%;
  bottom: 4%;
  width: 38%;
  height: 6%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 3, 7, 0.82) 0 20%,
      rgba(0, 8, 13, 0.56) 42%,
      rgba(14, 55, 65, 0.24) 58%,
      transparent 76%
    ),
    radial-gradient(
      ellipse at center,
      rgba(89, 221, 255, 0.2),
      transparent 68%
    );
  filter: blur(0.38cqw);
  transform: scaleX(1.14);
}

.fairyFigureRoot {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-origin: 50% 94%;
  will-change: transform;
}

.fairyVisualStack {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 320ms ease;
}

.fairyFigure {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.fairyFigureFallback {
  z-index: 0;
  opacity: 1;
  transition: opacity 240ms ease;
}

.fairyFigureVideo {
  z-index: 1;
  opacity: 0;
  transform: scale(0.88);
  transform-origin: 50% 94%;
  transition: opacity 240ms ease;
  will-change: opacity;
}

.fairyVisualStackBase.isVideoReady .fairyFigureFallback {
  opacity: 0;
}

.fairyVisualStackBase.isVideoReady .fairyFigureVideo {
  opacity: 1;
}

.fairyVisualStackBonus {
  z-index: 2;
  opacity: 0;
}

.fairyFigureBonusVideo {
  z-index: 1;
  opacity: 1;
  -webkit-clip-path: inset(0 0 3.5% 0);
  clip-path: inset(0 0 3.5% 0);
  transform: translate3d(0, 0.8%, 0) scale(0.92);
  transform-origin: 50% 94%;
  will-change: transform;
}

.gameStage.isBonus .fairyVisualStackBase {
  opacity: 0;
}

.gameStage.isBonus .fairyVisualStackBonus.isVideoReady {
  opacity: 1;
}

.fairyVideoSource {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fairySparkles {
  position: absolute;
  z-index: 2;
  inset: 22% 8% 2%;
  opacity: 0;
  background:
    radial-gradient(circle at 25% 22%, #fff 0 0.3%, #8ef6ff 0.5%, transparent 1.2%),
    radial-gradient(circle at 78% 18%, #fff9c7 0 0.25%, #ffcb62 0.5%, transparent 1.1%),
    radial-gradient(circle at 14% 64%, #fff 0 0.35%, #d990ff 0.6%, transparent 1.25%),
    radial-gradient(circle at 84% 70%, #fff 0 0.3%, #8ef6ff 0.55%, transparent 1.15%);
  background-size: 31% 29%, 37% 33%, 29% 35%, 41% 37%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 0.54cqw #8fefff);
  will-change: transform, opacity;
}

.fairyCharacter[data-fairy-pose="flutter"] .fairySparkles,
.fairyCharacter[data-fairy-pose="giggle"] .fairySparkles,
.fairyCharacter[data-fairy-pose="cheer"] .fairySparkles {
  opacity: 0.92;
}

.gameStage.isBonus .fairyCharacter {
  right: -5.5%;
}

.gameStage.isBonus .fairyVisualStackBonus {
  /* Filtering the transformed video stack rasterizes it before the stage
     scale and softens the authored 800x1136 frames. Depth remains supplied
     by the separate aura, ground shadow, and foreground shrub. */
  filter: none;
}

.gameStage.isBonus .fairyCharacter::before {
  opacity: 0.72;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 2, 7, 0.86) 0 22%,
      rgba(8, 3, 17, 0.58) 44%,
      rgba(80, 26, 98, 0.2) 61%,
      transparent 77%
    ),
    radial-gradient(
      ellipse at center,
      rgba(155, 80, 212, 0.15),
      transparent 68%
    );
}

.fairyAura {
  z-index: 1;
  inset: auto -1% 21% auto;
  width: 19%;
  height: 55%;
  border-radius: 50%;
  opacity: 0.6;
  background: radial-gradient(ellipse, rgba(209, 144, 255, 0.34), rgba(74, 211, 255, 0.1) 46%, transparent 71%);
  filter: blur(1.8cqw);
  animation: aura-pulse 3.8s ease-in-out infinite;
}

.fairyFootShrub {
  position: absolute;
  z-index: 2;
  left: 78.2%;
  top: 65.8%;
  width: 24.5%;
  aspect-ratio: 1692 / 930;
  pointer-events: none;
  background-image: image-set(
      url("../assets/art/fairy-foot-shrub.webp") type("image/webp"),
      url("../assets/art/fairy-foot-shrub.png") type("image/png")
    ),
    image-set(
      url("../assets/art/fairy-foot-shrub.webp") type("image/webp"),
      url("../assets/art/fairy-foot-shrub.png") type("image/png")
    );
  background-position: center, 1cqw -1.6cqw;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0 68%,
    rgba(0, 0, 0, 0.95) 70%,
    rgba(0, 0, 0, 0.72) 73.5%,
    rgba(0, 0, 0, 0.34) 77%,
    transparent 81.5%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0 68%,
    rgba(0, 0, 0, 0.95) 70%,
    rgba(0, 0, 0, 0.72) 73.5%,
    rgba(0, 0, 0, 0.34) 77%,
    transparent 81.5%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: opacity 320ms ease;
}

.gameStage.isBonus .fairyFootShrub {
  opacity: 0.92;
  left: 81.6%;
  top: 69.8%;
  width: 18.4%;
  filter:
    brightness(0.68)
    saturate(0.78)
    hue-rotate(12deg)
    drop-shadow(0 0.48cqw 0.62cqw rgba(0, 0, 0, 0.72));
}

.reelSideEdge {
  position: absolute;
  z-index: 5;
  left: 84.688995%;
  top: 13.496281%;
  width: 3.708134%;
  height: 72.369819%;
  display: block;
  pointer-events: none;
  user-select: none;
  background: url("../assets/art/reel-side-edge.png") 0 0 / 100% 100% no-repeat;
}

.gameStage.isBonus .reelSideEdge {
  background-image: url("../assets/art/reel-side-edge-haunted-bonus.png");
}

.ambientMotes {
  z-index: 2;
  inset: -6%;
  width: 112%;
  height: 112%;
  overflow: hidden;
  opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(255, 245, 147, 0.9) 0 1px, transparent 2px);
  background-size: 9% 17%;
  background-position: 3% 14%;
  animation: mote-drift-a 17s linear infinite alternate;
  transition: opacity 480ms ease;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ambientMotes::before,
.ambientMotes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.ambientMotes::before {
  background-image:
    radial-gradient(circle, rgba(105, 227, 255, 0.8) 0 1px, transparent 2px);
  background-size: 13% 23%;
  background-position: 10% 40%;
  animation: mote-drift-b 23s linear infinite alternate;
}

.ambientMotes::after {
  background-image:
    radial-gradient(circle, rgba(210, 130, 255, 0.7) 0 1px, transparent 2px);
  background-size: 17% 29%;
  background-position: 2% 70%;
  animation: mote-drift-c 29s linear infinite alternate;
}

.gameStage.isBonus .ambientMotes {
  opacity: 0.08;
  animation-play-state: paused;
}

.gameStage.isBonus .ambientMotes::before,
.gameStage.isBonus .ambientMotes::after {
  animation-play-state: paused;
}

.hud,
.controls,
.paylineRail,
.activeFeatures {
  position: absolute;
  z-index: 12;
}

.hud {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.meter {
  position: absolute;
  top: 91.7%;
  height: 4.8%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.meter strong {
  display: block;
  width: 100%;
  color: #e8fbff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(9px, 1.55cqw, 27px);
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 0 #000,
    0 0 0.45cqw rgba(69, 214, 255, 0.72);
}

.balanceMeter {
  left: 12.3%;
  width: 13.5%;
}

.betMeter {
  left: 29.5%;
  width: 10.4%;
}

.winMeter {
  left: 66%;
  width: 19.7%;
}

.winMeter strong {
  color: #fff4bb;
  text-shadow:
    0 1px 0 #000,
    0 0 0.55cqw rgba(255, 187, 48, 0.88);
}

.controls {
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.artHit {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: visible;
  opacity: 1;
  background: transparent;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.artHit::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: image-set(
    url("../assets/art/button-hover-ring.webp") type("image/webp"),
    url("../assets/art/button-hover-ring.png") type("image/png")
  ) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 0.45cqw rgba(99, 238, 255, 0.8));
  transform: scale(0.9);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.16, 0.84, 0.25, 1.2);
}

.artHit:not(:disabled):hover::after,
.artHit:not(:disabled):focus-visible::after,
.artHit.isActive::after,
.spinButton.autoplayRunning:not(:disabled)::after,
.gameStage.isSpinning .spinButton:not(:disabled)::after {
  opacity: 1;
  transform: scale(1);
}

.artHit:not(:disabled):active {
  transform: scale(0.94);
}

.artHit:focus-visible {
  outline: 0;
}

.artHit:disabled {
  cursor: not-allowed;
}

.artHit:disabled::after {
  opacity: 0;
}

.menuButton {
  left: 3.6%;
  bottom: 1.75%;
  width: 7.25%;
  aspect-ratio: 1;
}

.menuButton::after {
  left: 2px;
  right: -2px;
}

.betDownButton {
  left: 26.77%;
  bottom: 4.65%;
  width: 3.75%;
  aspect-ratio: 1;
}

.betUpButton {
  left: 38.73%;
  bottom: 4.65%;
  width: 3.75%;
  aspect-ratio: 1;
}

.spinButton {
  left: 44.65%;
  bottom: 0.2%;
  width: 10.6%;
  aspect-ratio: 1;
}

.spinButton::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -5%;
  opacity: 0;
  pointer-events: none;
  background: image-set(
    url("../assets/art/spin-stop-button.webp?v=wicked-wood-spin-stop-1") type("image/webp"),
    url("../assets/art/spin-stop-button.png?v=wicked-wood-spin-stop-1") type("image/png")
  ) center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 0.22cqw 0.2cqw rgba(3, 0, 0, 0.82))
    drop-shadow(0 0 0.38cqw rgba(255, 74, 42, 0.52));
  transform: scale(0.9);
  transition:
    opacity 120ms ease,
    transform 180ms cubic-bezier(0.16, 0.84, 0.25, 1.14),
    filter 160ms ease;
}

.spinButton.autoplayRunning:not(:disabled)::before,
.gameStage.isSpinning .spinButton:not(:disabled)::before {
  opacity: 1;
  transform: scale(1);
}

.spinButton.autoplayRunning:not(:disabled):hover::before,
.spinButton.autoplayRunning:not(:disabled):focus-visible::before,
.gameStage.isSpinning .spinButton:not(:disabled):hover::before,
.gameStage.isSpinning .spinButton:not(:disabled):focus-visible::before {
  filter:
    brightness(1.1)
    saturate(1.08)
    drop-shadow(0 0.24cqw 0.2cqw rgba(3, 0, 0, 0.84))
    drop-shadow(0 0 0.58cqw rgba(255, 74, 42, 0.7))
    drop-shadow(0 0 0.26cqw rgba(255, 210, 88, 0.5));
  transform: scale(1.025);
}

.spinAutoplayCount {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50.7%;
  width: 44%;
  opacity: 0;
  color: #281406;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(20px, 2.65cqw, 44px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0.06cqw 0 rgba(255, 252, 215, 0.9),
    0 0 0.22cqw rgba(255, 239, 153, 0.72),
    0 0.15cqw 0.2cqw rgba(74, 28, 0, 0.48);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.88);
  transition: opacity 120ms ease, transform 160ms ease;
}

.spinButton.autoplayRunning:not(:disabled) .spinAutoplayCount:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.spinButton.autoplayLargeCount .spinAutoplayCount {
  width: 48%;
  font-size: clamp(17px, 2.15cqw, 36px);
  letter-spacing: -0.07em;
}

.spinButton::after {
  z-index: 3;
  inset: calc(-5.5% - 4px) -3.25% calc(-2.75% + 4px);
}

.maxBetButton {
  left: 58.25%;
  bottom: 2.75%;
  width: 7.8%;
  height: 10.8%;
  border-radius: 14%;
}

.maxBetButton::after {
  inset: 0 -0.18cqw -0.18cqw -0.24cqw;
  background-image: image-set(
    url("../assets/art/button-hover-rect.webp") type("image/webp"),
    url("../assets/art/button-hover-rect.png") type("image/png")
  );
}

.autoButton {
  right: 6.78%;
  bottom: 1.75%;
  width: 7.25%;
  aspect-ratio: 1;
}

.spinButton.autoplayRunning:not(:disabled),
.gameStage.isSpinning .spinButton:not(:disabled) {
  filter:
    drop-shadow(0 0 0.7cqw rgba(255, 54, 35, 0.62))
    drop-shadow(0 0 0.3cqw rgba(255, 215, 83, 0.5));
}

.paylineRail {
  top: 21%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 4.575%;
  height: 57%;
}

.paylineRailLeft {
  left: 11.3575%;
}

.paylineRailRight {
  right: 11.3575%;
}

.paylineBadge {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  color: #fff8cd;
  background-color: transparent;
  background-image: image-set(
    url("../assets/art/line-badges-atlas-128.webp?v=wicked-wood-line-badges-2") type("image/webp"),
    url("../assets/art/line-badges-atlas-128.png?v=wicked-wood-line-badges-2") type("image/png")
  );
  background-size: 1000% 200%;
  background-position:
    calc(var(--badge-index) * 11.111111%) 0%;
  background-repeat: no-repeat;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(15.75px, 1.845cqw, 33.75px);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 1px 1px #000,
    0 0 0.24cqw #061016;
  box-shadow: none;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.paylineBadge:hover,
.paylineBadge:focus-visible,
.paylineBadge.isActive {
  z-index: 2;
  transform: scale(1.22);
  filter: none;
  outline: 0;
}

.glassPanel {
  position: absolute;
  z-index: 40;
  overflow: visible;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1cqw 1.5cqw rgba(0, 0, 0, 0.72));
  animation: illustrated-panel-in 0.24s cubic-bezier(0.16, 0.84, 0.25, 1.12) both;
}

.glassPanel header {
  padding: 0.3cqw 0.58cqw 0.62cqw;
  text-align: center;
  border-bottom: 1px solid rgba(255, 214, 94, 0.25);
}

.glassPanel header span,
.activeFeatures header span {
  display: block;
  color: #99eaff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(6px, 0.58cqw, 11px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.glassPanel header strong,
.activeFeatures header strong {
  display: block;
  margin-top: 0.16cqw;
  color: #ffe28a;
  font-size: clamp(10px, 1.16cqw, 21px);
  text-shadow: 0 0 0.55cqw rgba(255, 191, 43, 0.55);
}

.gameMenu {
  display: flex;
  flex-direction: column;
  left: 1.8%;
  bottom: 10.7%;
  width: 22%;
  aspect-ratio: 4 / 5;
  padding: 4.65cqw 2.35cqw 2.25cqw;
  background-image: image-set(
    url("../assets/art/menu-popup-frame.webp") type("image/webp"),
    url("../assets/art/menu-popup-frame.png") type("image/png")
  );
}

.gameMenu > button {
  display: grid;
  grid-template-columns: 2.5cqw 1fr 1.2cqw;
  align-items: center;
  gap: 0.55cqw;
  width: 100%;
  min-height: 3.15cqw;
  margin-top: 0.48cqw;
  padding: 0.48cqw 0.58cqw;
  border: 1px solid rgba(137, 227, 235, 0.16);
  border-radius: 0.55cqw;
  color: #edfaff;
  text-align: left;
  background: linear-gradient(90deg, rgba(22, 89, 91, 0.42), rgba(7, 35, 40, 0.3));
}

.gameMenu > button:hover {
  border-color: rgba(255, 214, 94, 0.55);
  background: linear-gradient(90deg, rgba(34, 122, 122, 0.58), rgba(8, 47, 54, 0.48));
}

.menuSession {
  display: flex;
  justify-content: center;
  gap: 0.8cqw;
  margin-top: auto;
  margin-bottom: 0.35cqw;
  color: rgba(198, 227, 232, 0.76);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(5px, 0.48cqw, 9px);
  font-variant-numeric: tabular-nums;
}

.menuSession b {
  color: #ffeaae;
}

.gameMenu button i {
  display: grid;
  place-items: center;
  width: 2.3cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 222, 124, 0.55);
  border-radius: 50%;
  color: #ffe38b;
  font-style: normal;
  font-size: clamp(10px, 1.3cqw, 23px);
  background: rgba(0, 16, 21, 0.64);
}

.gameMenu:not([hidden]) .paytableMenuIcon {
  overflow: hidden;
  border-color: rgba(255, 222, 124, 0.76);
  color: transparent;
  background: #02090d image-set(
    url("../assets/art/paytable-menu-icon.webp?v=wicked-wood-paytable-1") type("image/webp"),
    url("../assets/art/paytable-menu-icon.png?v=wicked-wood-paytable-1") type("image/png")
  ) center / 112% 112% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(4, 10, 13, 0.92),
    0 0 0.42cqw rgba(75, 218, 255, 0.22);
}

.gameMenu button span strong,
.gameMenu button span small {
  display: block;
}

.gameMenu button span strong {
  color: #fff2be;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(8px, 0.82cqw, 15px);
}

.gameMenu button span small {
  margin-top: 0.08cqw;
  color: #9fc1c6;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(6px, 0.6cqw, 11px);
}

.gameMenu button b {
  justify-self: end;
  color: #ffdb6d;
  font-size: clamp(12px, 1.6cqw, 28px);
}

.toggle {
  position: relative;
  width: 1.8cqw;
  height: 0.9cqw;
  border: 1px solid rgba(169, 222, 227, 0.4);
  border-radius: 999px;
  background: #19353a;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 0.08cqw;
  left: 0.08cqw;
  width: 0.62cqw;
  height: 0.62cqw;
  border-radius: 50%;
  background: #79979b;
  transition: transform 0.2s ease, background 0.2s ease;
}

button[aria-pressed="true"] .toggle {
  background: #176e67;
}

button[aria-pressed="true"] .toggle::after {
  transform: translateX(0.84cqw);
  background: #9ffff0;
  box-shadow: 0 0 0.42cqw #5fffe6;
}

.autoSpinMenu {
  right: 1.9%;
  bottom: 10.7%;
  width: 31%;
  aspect-ratio: 3 / 2;
  padding: 4.2cqw 3.35cqw 2.8cqw;
  text-align: center;
  background-image: image-set(
    url("../assets/art/autospin-popup-frame.webp") type("image/webp"),
    url("../assets/art/autospin-popup-frame.png") type("image/png")
  );
}

.autoSpinOptions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.38cqw;
  margin: 0.68cqw 0 0.52cqw;
}

.autoSpinOptions button {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 221, 118, 0.56);
  border-radius: 50%;
  color: #fff1bc;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(9px, 0.96cqw, 18px);
  font-weight: 900;
  background:
    radial-gradient(circle at 34% 27%, #41a99e, #0b4148 58%, #020e13 100%);
  box-shadow:
    inset 0 0 0.65cqw rgba(90, 244, 255, 0.14),
    0 0.25cqw 0.6cqw rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.autoSpinOptions button:hover {
  color: #fff;
  transform: translateY(-4%) scale(1.05);
  filter: brightness(1.28);
  box-shadow: 0 0 0.8cqw rgba(75, 238, 255, 0.44);
}

.autoSpinMenu > small {
  color: #93b6bb;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(5px, 0.52cqw, 10px);
  line-height: 1.35;
}

.activeFeatures {
  z-index: 11;
  left: -0.5%;
  top: 7.2%;
  width: 17.5%;
  aspect-ratio: 809 / 1942;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  background-image: image-set(
    url("../assets/art/free-spins-info-panel.webp?v=wicked-wood-free-spins-panel-1") type("image/webp"),
    url("../assets/art/free-spins-info-panel.png?v=wicked-wood-free-spins-panel-1") type("image/png")
  );
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0.18cqw 0.34cqw 0.5cqw rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 0.24cqw rgba(66, 210, 255, 0.24));
  transform: translate3d(-112%, 0, 0) scale(0.975);
  transform-origin: 0 50%;
  transition:
    opacity 200ms ease,
    transform 380ms cubic-bezier(0.46, 0.02, 0.82, 0.42);
  will-change: opacity, transform;
}

.activeFeatures::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 26%;
  top: 1.4%;
  width: 51%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(135, 238, 255, 0.28),
    rgba(65, 129, 255, 0.1) 42%,
    transparent 72%
  );
  mix-blend-mode: screen;
  filter: blur(0.45cqw);
  transition: opacity 420ms 260ms ease;
}

.activeFeatures.isVisible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: free-spins-panel-arrive 660ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.activeFeatures.isVisible::before {
  opacity: 1;
  animation: free-spins-panel-moon 4.8s 680ms ease-in-out infinite;
}

.bonusInfoStat,
.bonusInfoFeatures {
  position: absolute;
  left: 21.5%;
  width: 54%;
  color: #f6fbff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  text-align: center;
}

.bonusInfoStat {
  display: grid;
  grid-template-rows: min-content min-content;
  place-content: center;
  justify-items: center;
  row-gap: 0.24cqw;
  height: 11.2%;
  padding: 0 0.18cqw;
}

.bonusInfoMultiplier {
  top: 16.6%;
}

.bonusInfoSpins {
  top: 29.7%;
}

.bonusInfoTotal {
  left: 19.5%;
  top: 42.9%;
  width: 58%;
}

.bonusInfoStat span {
  display: block;
  width: 100%;
  color: #9defff;
  font-size: clamp(9px, 0.68cqw, 12px);
  font-weight: 900;
  letter-spacing: 0.065em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 0.34cqw rgba(59, 217, 255, 0.55);
}

.bonusInfoStat strong {
  display: block;
  width: 96%;
  max-width: 96%;
  margin: 0;
  overflow: visible;
  color: #fff4bd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.62cqw, 29px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 1px #000,
    0 0 0.26cqw rgba(255, 211, 81, 0.88),
    0 0 0.58cqw rgba(75, 216, 255, 0.36);
}

.bonusInfoTotal strong {
  font-size: clamp(15px, 1.22cqw, 21px);
  letter-spacing: -0.018em;
}

.bonusInfoFeatures {
  display: flex;
  flex-direction: column;
  top: 57.2%;
  height: 34.2%;
  padding: 0.22cqw 0.06cqw 0.3cqw;
}

.activeFeatures .bonusInfoFeatures header {
  flex: 0 0 auto;
  margin: 0 0 0.18cqw;
  padding: 0;
  text-align: center;
  border: 0;
}

.activeFeatures .bonusInfoFeatures header strong {
  display: block;
  margin: 0;
  color: #ffe296;
  font-size: clamp(8px, 0.65cqw, 12px);
  letter-spacing: 0.06em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow:
    0 1px 1px #000,
    0 0 0.38cqw rgba(255, 200, 67, 0.62);
}

.activeFeatureList {
  --special-columns: 2;
  --special-icon-size: 3.1cqw;
  --special-gap: 0.2cqw;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(var(--special-columns), var(--special-icon-size));
  grid-auto-rows: var(--special-icon-size);
  place-content: center;
  place-items: center;
  gap: var(--special-gap);
  padding: 0.04cqw 0 0.2cqw;
  overflow: hidden;
  pointer-events: none;
}

.activeFeatureList[data-layout="solo"] {
  --special-columns: 1;
  --special-icon-size: 6.3cqw;
}

.activeFeatureList[data-layout="pair"] {
  --special-columns: 1;
  --special-icon-size: 4.85cqw;
}

.activeFeatureList[data-layout="quad"] {
  --special-columns: 2;
  --special-icon-size: 3.85cqw;
}

.activeFeatureList[data-layout="dense"] {
  --special-columns: 2;
  --special-icon-size: 3.1cqw;
}

.activeFeatureList[data-layout="compact"] {
  --special-columns: 2;
  --special-icon-size: 2.65cqw;
}

.activeFeatureList[data-layout="crowded"] {
  --special-columns: 3;
  --special-icon-size: 2.2cqw;
  --special-gap: 0.14cqw;
}

.activeFeatureList:is(
  [data-layout="quad"],
  [data-layout="dense"],
  [data-layout="compact"]
) .featureChip:last-child:nth-child(odd),
.activeFeatureList[data-layout="crowded"] .featureChip:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.bonusInfoEmpty {
  display: grid;
  place-items: center;
  height: calc(100% - 1.7cqw);
  margin: 0;
  padding: 0 0.28cqw;
  color: rgba(170, 217, 225, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 0.56cqw, 10px);
  font-style: italic;
  line-height: 1.25;
  text-shadow: 0 1px 1px #000;
}

.featureChip {
  display: grid;
  grid-template-columns: 2.1cqw 1fr;
  align-items: center;
  min-height: 2.05cqw;
  padding: 0.16cqw 0.3cqw 0.16cqw 0.14cqw;
  border: 1px solid rgba(255, 221, 117, 0.25);
  border-radius: 999px;
  color: #f8edc6;
  background: linear-gradient(90deg, rgba(26, 80, 92, 0.82), rgba(6, 30, 38, 0.8));
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(5px, 0.54cqw, 10px);
  font-weight: 800;
  line-height: 1.08;
}

.featureIcon {
  display: block;
  width: 1.8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: image-set(
    url("../assets/art/feature-icons-atlas.webp?v=wicked-wood-feature-icons-4") type("image/webp"),
    url("../assets/art/feature-icons-atlas.png?v=wicked-wood-feature-icons-4") type("image/png")
  );
  background-size: 400% 400%;
  background-position: var(--icon-x, 0%) var(--icon-y, 0%);
  filter: drop-shadow(0 0 0.22cqw rgba(111, 229, 255, 0.45));
}

.activeFeatures .featureChip {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  width: var(--special-icon-size);
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff1c5;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.activeFeatures .featureIcon {
  width: 100%;
  filter:
    drop-shadow(0 0.08cqw 0.08cqw rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 0.18cqw rgba(111, 229, 255, 0.42));
}

.activeFeatures .featureChipRepeat {
  position: absolute;
  z-index: 2;
  right: -0.04cqw;
  top: -0.04cqw;
  display: grid;
  min-width: 1.05cqw;
  height: 1.05cqw;
  place-items: center;
  padding: 0 0.18cqw;
  border: 1px solid rgba(255, 239, 164, 0.88);
  border-radius: 999px;
  color: #fff8d0;
  background:
    radial-gradient(circle at 38% 30%, #3bdfff, #126f91 44%, #082333 76%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 0.56cqw, 10px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #000;
  box-shadow:
    0 0.08cqw 0.18cqw rgba(0, 0, 0, 0.75),
    0 0 0.24cqw rgba(77, 222, 255, 0.58);
}

.presentationOverlay,
.mushroomScene,
.preloader,
.orientationHint {
  position: absolute;
  inset: 0;
  z-index: 100;
}

.presentationOverlay {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(35, 137, 166, 0.2), transparent 45%),
    rgba(0, 5, 10, 0.78);
  backdrop-filter: blur(0.48cqw);
}

.bigWinCanvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

.bigWinCanvas[hidden] {
  display: none;
}

.presentationCoinFx {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
  transition: opacity 700ms ease-in;
}

.presentationOverlay.isBigWin {
  z-index: 160;
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
}

.presentationOverlay.isBigWin:not(.isDismissing) {
  cursor: pointer;
  touch-action: manipulation;
}

.presentationOverlay.isBigWin.isDismissing {
  cursor: default;
}

.presentationOverlay.isBigWin::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 47%, rgba(46, 158, 173, 0.2), transparent 48%),
    rgba(1, 5, 8, 0.84);
  backdrop-filter: blur(0.34cqw);
  transition: opacity 700ms ease-in;
  animation: big-win-overlay-in 420ms ease-out both;
}

.presentationOverlay.isBigWin.isEnchantedWin::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(71, 255, 146, 0.28), transparent 43%),
    radial-gradient(circle at 50% 50%, rgba(9, 104, 77, 0.22), transparent 67%),
    rgba(0, 10, 7, 0.88);
  backdrop-filter: blur(0.42cqw) saturate(1.18);
}

.presentationOverlay.isBigWin.isEnchantedWin .presentationCoinFx {
  filter: saturate(1.16) brightness(1.08);
}

.presentationOverlay.isBigWin.isDismissing::before,
.presentationOverlay.isBigWin.isDismissing .presentationCoinFx,
.presentationOverlay.isBigWin.isDismissing .skipPresentationButton {
  opacity: 0;
}

.presentationOverlay.isBigWin .presentationBurst {
  display: none;
}

.presentationOverlay.isBigWin .presentationCard {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.presentationOverlay.isBigWin .presentationCard::before,
.presentationOverlay.isBigWin .presentationCard::after,
.presentationOverlay.isBigWin #presentationFairy {
  display: none;
}

.presentationOverlay.isBigWin #presentationKicker,
.presentationOverlay.isBigWin #presentationTitle,
.presentationOverlay.isBigWin #presentationCopy,
.presentationOverlay.isBigWin #presentationValue {
  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;
}

.presentationOverlay.isBigWin #presentationContinue {
  display: none;
}

.presentationBurst {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.72;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 228, 124, 0.32) 0 2deg, transparent 3deg 8deg);
  mask-image: radial-gradient(circle, #000 0 16%, transparent 64%);
  animation: burst-turn 22s linear infinite;
}

.presentationCard {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 41%;
  min-height: 53%;
  padding: 3% 4.5% 2.6%;
  border: max(2px, 0.15cqw) solid rgba(255, 221, 111, 0.82);
  border-radius: 2.3cqw 0.8cqw 2.3cqw 0.8cqw;
  text-align: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(91, 215, 255, 0.2), transparent 35%),
    linear-gradient(150deg, rgba(7, 61, 68, 0.97), rgba(2, 16, 27, 0.98) 62%, rgba(46, 23, 52, 0.98));
  box-shadow:
    inset 0 0 3cqw rgba(93, 223, 255, 0.16),
    0 0 0 0.35cqw rgba(14, 58, 64, 0.8),
    0 0 3.5cqw rgba(97, 221, 255, 0.38),
    0 2cqw 4cqw rgba(0, 0, 0, 0.78);
  animation: card-arrive 0.5s cubic-bezier(0.18, 0.9, 0.28, 1.15) both;
}

.presentationCard::before,
.presentationCard::after {
  content: "✦";
  position: absolute;
  top: 1.1cqw;
  color: #ffe78d;
  font-size: clamp(12px, 1.8cqw, 32px);
  text-shadow: 0 0 0.8cqw #ffc13d;
}

.presentationCard::before {
  left: 1.2cqw;
}

.presentationCard::after {
  right: 1.2cqw;
}

#presentationFairy {
  position: absolute;
  right: -26%;
  bottom: -18%;
  width: 58%;
  height: 120%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 0.7cqw rgba(225, 180, 255, 0.9))
    drop-shadow(0 0 1.5cqw rgba(80, 217, 255, 0.5));
}

#presentationKicker {
  color: #8bf1ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(7px, 0.78cqw, 14px);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#presentationTitle {
  max-width: 90%;
  margin: 0.65cqw 0 0;
  color: #ffe688;
  font-size: clamp(24px, 3.2cqw, 57px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow:
    0 0.1cqw 0 #643400,
    0 0 0.75cqw #ff9e22,
    0 0 1.8cqw rgba(255, 180, 39, 0.5);
}

#presentationCopy {
  max-width: 84%;
  margin: 0.82cqw auto 0;
  color: #d3e9ed;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(8px, 0.9cqw, 16px);
  line-height: 1.45;
}

#presentationValue {
  display: block;
  margin-top: 0.65cqw;
  color: #fff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(18px, 2.3cqw, 42px);
  text-shadow: 0 0 0.9cqw #6fe8ff;
}

#presentationContinue {
  position: relative;
  z-index: 2;
  min-width: 10cqw;
  margin-top: 1cqw;
  padding: 0.72cqw 1.4cqw;
  border: max(1px, 0.1cqw) solid #ffe283;
  border-radius: 999px;
  color: #fff6c9;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(8px, 0.88cqw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, #1fa797, #07524e 58%, #032e33);
  box-shadow:
    inset 0 0 0.75cqw rgba(147, 255, 234, 0.34),
    0 0 1cqw rgba(56, 255, 220, 0.28);
}

#presentationContinue:hover {
  filter: brightness(1.22);
  transform: translateY(-0.08cqw);
}

.presentationOverlay.isBonusSummary {
  z-index: 150;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 47%, rgba(73, 206, 235, 0.14), transparent 48%),
    rgba(0, 5, 9, 0.2);
  backdrop-filter: none;
  transition: opacity var(--bonus-summary-fade-time, 600ms) ease-in;
}

.presentationOverlay.isBonusSummary.isDismissing {
  opacity: 0;
  pointer-events: none;
}

.presentationOverlay.isBonusSummary .presentationBurst {
  width: 72%;
  opacity: 0.5;
  filter: hue-rotate(16deg) saturate(0.82);
  mask-image: radial-gradient(circle, #000 0 14%, transparent 67%);
}

.presentationOverlay.isBonusSummary .presentationCard {
  display: block;
  width: 58cqw;
  min-height: 0;
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: image-set(
    url("../assets/art/bonus-summary-popup.webp?v=wicked-wood-bonus-summary-1") type("image/webp"),
    url("../assets/art/bonus-summary-popup.png?v=wicked-wood-bonus-summary-1") type("image/png")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  filter:
    drop-shadow(0 1.2cqw 1.5cqw rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 1.25cqw rgba(85, 222, 255, 0.34))
    drop-shadow(0 0 0.5cqw rgba(255, 204, 92, 0.18));
}

.presentationOverlay.isBonusSummary .presentationCard,
.presentationOverlay.isBonusSummary .bigWinCanvas {
  animation: bonus-summary-arrive 560ms cubic-bezier(0.16, 0.88, 0.24, 1.12) both;
}

.presentationOverlay.isBonusSummary .presentationCard::before,
.presentationOverlay.isBonusSummary .presentationCard::after {
  display: none;
}

.presentationOverlay.isBonusSummary .bigWinCanvas {
  z-index: 3;
}

.presentationOverlay.isBonusSummary #presentationFairy,
.presentationOverlay.isBonusSummary #presentationKicker,
.presentationOverlay.isBonusSummary #presentationCopy,
.presentationOverlay.isBonusSummary #presentationContinue {
  display: none;
}

.presentationOverlay.isBonusSummary.hasBonusSummaryGlyphs #presentationTitle,
.presentationOverlay.isBonusSummary.hasBonusSummaryGlyphs #presentationValue {
  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;
}

.presentationOverlay.isBonusSummary:not(.hasBonusSummaryGlyphs) #presentationTitle,
.presentationOverlay.isBonusSummary:not(.hasBonusSummaryGlyphs) #presentationValue {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 72%;
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.presentationOverlay.isBonusSummary:not(.hasBonusSummaryGlyphs) #presentationTitle {
  top: 42%;
}

.presentationOverlay.isBonusSummary:not(.hasBonusSummaryGlyphs) #presentationValue {
  top: 59%;
}

.presentationOverlay.isBonusSummary .skipPresentationButton {
  display: none;
}

.skipPresentationButton {
  position: absolute;
  z-index: 3;
  right: 1.4%;
  bottom: 2.2%;
  padding: 0.42cqw 0.85cqw;
  border: 1px solid rgba(180, 225, 233, 0.38);
  border-radius: 999px;
  color: #bed4d8;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(6px, 0.6cqw, 11px);
  background: rgba(0, 17, 24, 0.78);
  transition: opacity 700ms ease-in;
}

.bonusIntro {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #fff3c0;
  --bonus-closing-time: 1250ms;
  --bonus-fade-time: 480ms;
  --bonus-opening-time: 1250ms;
  --bonus-gate-close-time: 1180ms;
  --bonus-gate-open-time: 1180ms;
}

.bonusIntroBackdrop,
.bonusGateStage,
.bonusIntroMotes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bonusIntroBackdrop {
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(14, 89, 91, 0.38), transparent 39%),
    rgba(0, 4, 7, 0.88);
  backdrop-filter: blur(0.28cqw) saturate(1.16);
}

.bonusIntro[data-phase="closing"] .bonusIntroBackdrop {
  animation: bonus-backdrop-close var(--bonus-closing-time) linear both;
}

.bonusIntro[data-phase="sealed"] .bonusIntroBackdrop,
.bonusIntro[data-phase="popup"] .bonusIntroBackdrop,
.bonusIntro[data-phase="fade"] .bonusIntroBackdrop {
  opacity: 1;
}

.bonusIntro[data-phase="opening"] .bonusIntroBackdrop {
  animation: bonus-backdrop-open var(--bonus-opening-time) linear both;
}

.bonusGateStage {
  z-index: 2;
  overflow: hidden;
}

.bonusGateLeaf {
  position: absolute;
  top: -3%;
  display: block;
  width: 50.4785%;
  height: 106%;
  filter:
    drop-shadow(0 0.35cqw 0.65cqw rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 0.22cqw rgba(64, 221, 255, 0.16));
  transform: translate3d(var(--gate-open-x), 0, 0);
  backface-visibility: hidden;
  contain: layout paint;
  will-change: transform;
}

.bonusGateLeafLeft {
  --gate-open-x: calc(-100% - 1cqw);
  left: 0;
}

.bonusGateLeafRight {
  --gate-open-x: calc(100% + 1cqw);
  right: 0;
}

.bonusGateLeaf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

.bonusIntro[data-phase="closing"] .bonusGateLeafLeft {
  animation: bonus-gate-close-left var(--bonus-gate-close-time) both;
}

.bonusIntro[data-phase="closing"] .bonusGateLeafRight {
  animation: bonus-gate-close-right var(--bonus-gate-close-time) both;
}

.bonusIntro[data-phase="sealed"] .bonusGateLeaf,
.bonusIntro[data-phase="popup"] .bonusGateLeaf,
.bonusIntro[data-phase="fade"] .bonusGateLeaf {
  animation: none;
  transform: translate3d(0, 0, 0);
}

.bonusIntro[data-phase="opening"] .bonusGateLeafLeft {
  animation: bonus-gate-open-left var(--bonus-gate-open-time) both;
}

.bonusIntro[data-phase="opening"] .bonusGateLeafRight {
  animation: bonus-gate-open-right var(--bonus-gate-open-time) both;
}

.bonusGateImpact {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2.6%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(0.2);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(108, 245, 255, 0.58), transparent 54%),
    linear-gradient(
      to right,
      transparent,
      rgba(255, 214, 98, 0.56) 39%,
      rgba(160, 250, 255, 0.95) 50%,
      rgba(255, 214, 98, 0.56) 61%,
      transparent
    );
  filter:
    blur(0.08cqw)
    drop-shadow(0 0 0.55cqw rgba(84, 232, 255, 0.88))
    drop-shadow(0 0 1.25cqw rgba(255, 184, 54, 0.44));
}

.bonusGateImpact::after {
  position: absolute;
  inset: 7% -120%;
  content: "";
  background:
    radial-gradient(circle at 12% 13%, #fff5a2 0 0.08cqw, transparent 0.17cqw),
    radial-gradient(circle at 74% 24%, #79efff 0 0.07cqw, transparent 0.16cqw),
    radial-gradient(circle at 31% 42%, #ffd267 0 0.09cqw, transparent 0.18cqw),
    radial-gradient(circle at 67% 58%, #b6fbff 0 0.08cqw, transparent 0.18cqw),
    radial-gradient(circle at 18% 77%, #64e8ff 0 0.07cqw, transparent 0.16cqw),
    radial-gradient(circle at 82% 88%, #ffe28a 0 0.08cqw, transparent 0.17cqw);
}

.bonusIntro[data-phase="closing"] .bonusGateImpact {
  animation: bonus-gate-impact var(--bonus-gate-close-time) both;
}

.bonusIntro[data-phase="sealed"] .bonusGateImpact,
.bonusIntro[data-phase="popup"] .bonusGateImpact,
.bonusIntro[data-phase="fade"] .bonusGateImpact {
  opacity: 0.16;
  transform: translateX(-50%) scaleX(0.32);
}

.bonusGateDebris {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.bonusGateDebris::before {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 4.8cqw;
  content: "";
  opacity: 0;
  transform: translateX(-50%) scaleX(0.08);
  background:
    radial-gradient(ellipse at 50% 14%, rgba(193, 253, 255, 0.94), transparent 22%),
    radial-gradient(ellipse at 50% 38%, rgba(255, 211, 80, 0.82), transparent 20%),
    radial-gradient(ellipse at 50% 62%, rgba(110, 240, 255, 0.9), transparent 22%),
    radial-gradient(ellipse at 50% 86%, rgba(255, 219, 102, 0.86), transparent 21%);
  filter:
    blur(0.16cqw)
    drop-shadow(0 0 0.8cqw rgba(82, 233, 255, 0.92))
    drop-shadow(0 0 1.5cqw rgba(255, 176, 35, 0.62));
}

.bonusGateDebris > i {
  position: absolute;
  top: var(--debris-y);
  left: 50%;
  width: 0.54cqw;
  height: 0.82cqw;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.16) rotate(0deg);
  background: linear-gradient(135deg, #f8ffff 0 18%, #7cf4ff 20% 49%, #178bad 51% 67%, #ffd76b 70% 100%);
  border: 0.04cqw solid rgba(232, 255, 255, 0.82);
  clip-path: polygon(48% 0, 100% 23%, 72% 100%, 12% 78%, 0 28%);
  box-shadow:
    0 0 0.28cqw rgba(106, 244, 255, 0.96),
    0 0 0.72cqw rgba(43, 205, 255, 0.82);
  filter:
    brightness(1.3)
    drop-shadow(0 0 0.25cqw rgba(142, 250, 255, 1))
    drop-shadow(0 0 0.72cqw rgba(47, 215, 255, 0.92));
  will-change: transform, opacity;
}

.bonusGateDebris > i.isGold {
  background: linear-gradient(135deg, #fffbd0 0 20%, #ffd85d 22% 55%, #d16f12 58% 73%, #7cf3ff 76% 100%);
  border-color: rgba(255, 247, 191, 0.88);
  box-shadow:
    0 0 0.3cqw rgba(255, 218, 91, 0.98),
    0 0 0.78cqw rgba(255, 139, 23, 0.78);
  filter:
    brightness(1.34)
    drop-shadow(0 0 0.27cqw rgba(255, 240, 146, 1))
    drop-shadow(0 0 0.76cqw rgba(255, 147, 28, 0.94));
}

.bonusGateDebris > i.isSpark {
  width: 0.18cqw;
  height: 1.08cqw;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f5ffff 25% 72%, #66ebff);
}

.bonusIntro[data-phase="closing"] .bonusGateDebris {
  opacity: 1;
}

.bonusIntro[data-phase="closing"] .bonusGateDebris::before {
  animation: bonus-gate-debris-flare var(--bonus-gate-close-time) linear both;
}

.bonusIntro[data-phase="closing"] .bonusGateDebris > i {
  animation:
    bonus-gate-debris
    var(--bonus-gate-close-time)
    linear
    var(--debris-delay, 0ms)
    both;
}

.bonusIntroMotes {
  z-index: 3;
  opacity: 0;
  background:
    radial-gradient(circle at 8% 20%, #9ef7ff 0 0.1cqw, transparent 0.16cqw),
    radial-gradient(circle at 21% 76%, #ffe88d 0 0.09cqw, transparent 0.15cqw),
    radial-gradient(circle at 34% 34%, #8df2ff 0 0.08cqw, transparent 0.14cqw),
    radial-gradient(circle at 47% 82%, #fff0a1 0 0.1cqw, transparent 0.16cqw),
    radial-gradient(circle at 61% 18%, #8befff 0 0.09cqw, transparent 0.15cqw),
    radial-gradient(circle at 74% 70%, #ffe178 0 0.11cqw, transparent 0.17cqw),
    radial-gradient(circle at 89% 29%, #91f4ff 0 0.09cqw, transparent 0.15cqw);
  filter: drop-shadow(0 0 0.45cqw #58ddff);
}

.bonusIntro[data-phase="popup"] .bonusIntroMotes,
.bonusIntro[data-phase="fade"] .bonusIntroMotes {
  opacity: 0.9;
  animation: bonus-motes-drift 2.6s ease-in-out infinite alternate;
}

.bonusIntro.isMushroomExit .bonusAwardPlaque,
.bonusIntro.isMushroomExit .bonusAwardCanvas,
.bonusIntro.isMushroomExit .bonusIntroMotes,
.bonusIntro.isMushroomExit .bonusIntroSkip,
.bonusIntro.isBonusExit .bonusAwardPlaque,
.bonusIntro.isBonusExit .bonusAwardCanvas,
.bonusIntro.isBonusExit .bonusIntroMotes,
.bonusIntro.isBonusExit .bonusIntroSkip {
  display: none;
}

.bonusAwardPlaque {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 58cqw;
  aspect-ratio: 3 / 2;
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  background-color: transparent;
  background-image: image-set(
    url("../assets/art/bonus-summary-popup.webp?v=wicked-wood-bonus-summary-1") type("image/webp"),
    url("../assets/art/bonus-summary-popup.png?v=wicked-wood-bonus-summary-1") type("image/png")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%) scale(0.54) rotate(-2deg);
  filter: blur(0.8cqw);
  transform-origin: 50% 50%;
}

.bonusPlaqueGlow {
  position: absolute;
  z-index: -1;
  inset: 7% 4%;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 45% 50%, rgba(90, 237, 255, 0.46), transparent 58%),
    radial-gradient(ellipse at 50% 52%, rgba(255, 194, 68, 0.34), transparent 72%);
  filter: blur(2.1cqw);
  animation: bonus-plaque-glow 1.5s ease-in-out infinite alternate;
}

.bonusAwardCopy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8% 15% 5%;
  text-align: center;
  filter: drop-shadow(0 0.2cqw 0.18cqw #001318);
}

#bonusIntroSpins {
  display: block;
  max-width: 70%;
  margin: 0;
  color: #fff7cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3.35cqw, 58px);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-shadow:
    0 0.14cqw #4d2500,
    0 0 0.82cqw #ffc041,
    0 0 1.7cqw rgba(255, 189, 64, 0.45);
}

.bonusAwardCanvas {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.bonusAwardCanvas[hidden] {
  display: none;
}

.bonusIntro.hasBonusAwardGlyphs #bonusIntroSpins {
  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;
}

.bonusIntro[data-phase="popup"] .bonusAwardPlaque {
  animation: bonus-plaque-arrive 680ms cubic-bezier(0.13, 0.88, 0.24, 1.18) both;
}

.bonusIntro.hasBonusAwardGlyphs[data-phase="popup"] .bonusAwardCanvas {
  animation: bonus-award-glyph-arrive 620ms 70ms cubic-bezier(0.16, 0.88, 0.24, 1.08) both;
}

.bonusIntro[data-phase="fade"] .bonusAwardPlaque {
  animation: bonus-plaque-fade var(--bonus-fade-time) ease-in both;
}

.bonusIntro.hasBonusAwardGlyphs[data-phase="fade"] .bonusAwardCanvas {
  animation: bonus-award-glyph-fade var(--bonus-fade-time) ease-in both;
}

.bonusIntroSkip {
  position: absolute;
  z-index: 6;
  right: 1.5%;
  bottom: 2.2%;
  padding: 0.48cqw 0.95cqw;
  border: 1px solid rgba(193, 234, 235, 0.48);
  border-radius: 999px;
  color: #d8eef0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(7px, 0.65cqw, 12px);
  font-weight: 850;
  letter-spacing: 0.06em;
  background: rgba(0, 24, 29, 0.82);
  box-shadow: 0 0 0.8cqw rgba(71, 226, 238, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.bonusIntro[data-phase="popup"] .bonusIntroSkip,
.bonusIntro[data-phase="fade"] .bonusIntroSkip {
  opacity: 1;
  pointer-events: auto;
  animation: bonus-skip-arrive 0.3s 0.65s ease both;
}

.bonusIntroSkip:hover,
.bonusIntroSkip:focus-visible {
  filter: brightness(1.25);
  transform: translateY(-0.08cqw);
}

.mushroomScene {
  overflow: hidden;
  background-image: image-set(
    url("../assets/art/mushroom-pick-background-infected.webp?v=wicked-wood-mushroom-field-2") type("image/webp"),
    url("../assets/art/mushroom-pick-background-infected.png?v=wicked-wood-mushroom-field-2") type("image/png")
  );
  background-size: 100% 100%;
}

.mushroomStorm {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity 650ms ease;
  will-change: opacity;
}

.mushroomStorm.isRainActive {
  opacity: 0.76;
}

.mushroomShade {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 7, 19, 0.4), transparent 31%, transparent 79%, rgba(0, 4, 7, 0.46)),
    radial-gradient(ellipse at 50% 52%, transparent 30%, rgba(0, 6, 14, 0.18) 75%);
}

.mushroomHeader {
  position: absolute;
  z-index: 4;
  top: 2.6%;
  left: 50%;
  width: 58%;
  transform: translateX(-50%);
  text-align: center;
  filter: drop-shadow(0 0.3cqw 0.4cqw #00111c);
}

.mushroomHeader > span {
  color: #8af2ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(6px, 0.72cqw, 13px);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mushroomHeader h2 {
  margin: 0.16cqw 0 0;
  color: #ffe388;
  font-size: clamp(22px, 3.1cqw, 56px);
  line-height: 1;
  text-shadow:
    0 0.12cqw #4b2400,
    0 0 0.7cqw #f89d24,
    0 0 1.5cqw rgba(255, 169, 43, 0.45);
}

.mushroomHeader p {
  margin: 0.4cqw 0 0;
  color: #d6f0f3;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(7px, 0.8cqw, 15px);
}

.mushroomHeader > strong {
  display: inline-flex;
  gap: 0.35cqw;
  margin-top: 0.42cqw;
  color: #fff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(8px, 0.86cqw, 16px);
  text-shadow:
    0 0.14cqw 0.24cqw #00111c,
    0 0 0.55cqw rgba(61, 222, 255, 0.68);
}

.mushroomHeader > strong b {
  color: #ffe583;
}

.mushroomGrid {
  position: absolute;
  z-index: 3;
  left: 14%;
  top: 19%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1.1cqw 1.3cqw;
  width: 72%;
  height: 72%;
}

.mushroomPick {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.mushroomPick:focus-visible {
  outline: 0;
}

.mushroomSprite {
  display: block;
  width: 80%;
  aspect-ratio: 1;
  background-image: image-set(
    url("../assets/art/mushrooms-atlas.webp") type("image/webp"),
    url("../assets/art/mushrooms-atlas.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--mushroom-x, 0%) var(--mushroom-y, 0%);
  filter:
    drop-shadow(0 0.55cqw 0.32cqw rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 0.55cqw rgba(83, 224, 255, 0.35));
  transform-origin: 50% 88%;
  animation: mushroom-float calc(2.4s + var(--mushroom-delay, 0s)) ease-in-out infinite;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.32s ease;
}

.mushroomPick:not(:disabled):hover .mushroomSprite,
.mushroomPick:focus-visible .mushroomSprite {
  transform: translateY(-0.45cqw) scale(1.03);
  filter:
    drop-shadow(0 0.65cqw 0.36cqw rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 1.1cqw rgba(105, 239, 255, 0.92))
    brightness(1.18);
}

.mushroomPick.isHinted:not(:disabled):not(.isPicked) {
  z-index: 6;
  animation:
    mushroom-pick-hint
    var(--mushroom-hint-time, 850ms)
    cubic-bezier(0.2, 0.72, 0.22, 1)
    both;
  will-change: transform, filter;
}

.mushroomPick.isPicked .mushroomSprite {
  opacity: 0;
  transform: scale(0.45) rotate(-9deg);
  animation: none;
}

.mushroomPick.isPicked {
  z-index: 4;
}

.mushroomPick.isUnchosen .mushroomSprite {
  opacity: 0.3;
  filter: grayscale(0.8) brightness(0.7);
  animation: none;
}

.mushroomGrid.isCompleting .mushroomPick.isUnchosen {
  opacity: 0;
  transform: scale(0.72);
  filter: blur(0.18cqw);
  transition:
    opacity 260ms ease,
    transform 320ms ease,
    filter 260ms ease;
}

.mushroomGrid.isGathering .mushroomPick.isPicked {
  z-index: 9;
  transform:
    translate3d(
      var(--mushroom-gather-x, 0),
      var(--mushroom-gather-y, 0),
      0
    );
  transition:
    transform var(--mushroom-gather-time, 520ms)
      cubic-bezier(0.16, 0.82, 0.22, 1);
  transition-delay: var(--mushroom-gather-delay, 0ms);
  will-change: transform, filter;
}

.mushroomGrid.isFlashing .mushroomPick.isPicked {
  animation:
    mushroom-reward-flash
    var(--mushroom-flash-time, 300ms)
    ease-in-out
    2;
}

.pickReveal {
  position: absolute;
  inset: 0 4%;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  text-align: center;
  transform: rotateY(90deg) scale(0.82);
  opacity: 0;
}

.mushroomPick.isPicked .pickReveal {
  animation: reveal-turn 0.56s 0.18s cubic-bezier(0.2, 0.8, 0.25, 1.16) forwards;
}

.pickReveal .featureIcon {
  grid-area: 1 / 1;
  width: 86%;
  margin: 0;
  filter:
    drop-shadow(0 0.55cqw 0.38cqw rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 0.78cqw rgba(96, 222, 255, 0.52));
}

.toast {
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: 12%;
  max-width: 54%;
  transform: translateX(-50%);
  padding: 0.62cqw 1.1cqw;
  border: 1px solid rgba(255, 224, 124, 0.68);
  border-radius: 999px;
  color: #fff1c3;
  text-align: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(7px, 0.78cqw, 14px);
  font-weight: 800;
  background: rgba(2, 21, 28, 0.95);
  box-shadow: 0 0 1.2cqw rgba(80, 218, 255, 0.36);
  animation: toast-in 0.3s ease-out both;
}

.coinFx {
  position: absolute;
  z-index: 52;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

.devPanel {
  position: absolute;
  z-index: 120;
  top: 0.75%;
  right: 0.75%;
  display: flex;
  align-items: flex-start;
  gap: 0.35cqw;
  color: #fff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(5px, 0.5cqw, 9px);
}

.devToggle {
  min-width: 3.4cqw;
  padding: 0.36cqw 0.5cqw;
  border: 1px solid rgba(122, 245, 255, 0.75);
  border-radius: 999px;
  color: #d9fbff;
  font-size: clamp(6px, 0.56cqw, 10px);
  font-weight: 900;
  letter-spacing: 0.12em;
  background:
    linear-gradient(180deg, rgba(24, 104, 112, 0.96), rgba(2, 29, 38, 0.96));
  box-shadow:
    inset 0 0 0.6cqw rgba(102, 242, 255, 0.18),
    0 0 0.65cqw rgba(80, 218, 255, 0.36);
}

.devTools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3cqw;
  width: 22.5cqw;
  padding: 0.5cqw;
  border: 1px solid rgba(139, 238, 255, 0.55);
  border-radius: 0.65cqw;
  background:
    linear-gradient(150deg, rgba(8, 63, 72, 0.96), rgba(2, 20, 30, 0.97));
  box-shadow:
    inset 0 0 0.75cqw rgba(113, 237, 255, 0.12),
    0 0.7cqw 1.5cqw rgba(0, 0, 0, 0.62);
}

.devPanel.isCollapsed .devTools {
  display: none;
}

.devTools strong {
  flex: 1 0 100%;
  color: #ffe8a0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.devTools button {
  padding: 0.24cqw 0.4cqw;
  border: 1px solid rgba(116, 229, 241, 0.45);
  border-radius: 0.3cqw;
  background: linear-gradient(180deg, #195d67, #0a303b);
}

.devTools button:hover,
.devTools button:focus-visible {
  border-color: #ffe189;
  filter: brightness(1.22);
}

.preloader {
  position: fixed;
  z-index: 500;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(31, 111, 157, 0.58), transparent 33%),
    linear-gradient(180deg, #03111d, #01070b 72%);
}

.preloader {
  align-content: center;
  gap: 0.6rem;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.preloader.isLeaving {
  opacity: 0;
  visibility: hidden;
}

.loaderMoon {
  position: relative;
  width: clamp(68px, 8vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 5%, #bff5ff 18%, #52c8ff 48%, #1c67bc 68%, #0b234c 100%);
  box-shadow:
    0 0 1rem #8cecff,
    0 0 4rem rgba(70, 183, 255, 0.7);
  animation: moon-pulse 2.2s ease-in-out infinite;
}

.loaderMoon i {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  opacity: 0.38;
  background:
    radial-gradient(circle at 28% 34%, #244f88 0 6%, transparent 7%),
    radial-gradient(circle at 68% 22%, #27689b 0 4%, transparent 5%),
    radial-gradient(circle at 62% 68%, #285b91 0 9%, transparent 10%);
}

.preloader > span {
  color: #7befff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(10px, 1vw, 18px);
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.preloader h1 {
  margin: 0;
  color: #ffe17c;
  font-size: clamp(44px, 6vw, 106px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-shadow:
    0 0.08em #6b3400,
    0 0 0.25em #ff9e29,
    0 0 0.8em rgba(255, 175, 33, 0.43);
}

.preloaderTrack {
  width: min(420px, 52vw);
  height: 8px;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(139, 229, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 14, 22, 0.7);
}

.preloaderTrack i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #238a98, #7ff8ff, #ffe16a);
  box-shadow: 0 0 1rem #68edff;
  transition: width 0.18s ease;
}

.preloader > strong {
  color: #c9f8ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(12px, 1.2vw, 21px);
}

.orientationHint {
  position: fixed;
  z-index: 1000;
  display: none;
  place-content: center;
  gap: 0.6rem;
  padding: 10vw;
  color: #e8fbff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(60, 175, 220, 0.4), transparent 35%),
    #020a10;
}

.orientationHint strong {
  color: #ffe184;
  font-size: clamp(28px, 9vw, 64px);
}

.orientationHint span {
  color: #acd0d6;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(14px, 4vw, 23px);
}

#paytableDialog {
  width: min(1600px, 98vw);
  max-width: 98vw;
  height: min(920px, 96dvh);
  max-height: 96dvh;
  padding: 0;
  border: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
}

#paytableDialog::backdrop {
  background: rgba(0, 5, 10, 0.84);
  backdrop-filter: blur(8px);
}

.paytableFrame {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  padding: clamp(4px, 0.55vw, 9px);
  overflow: hidden;
  border: 1px solid rgba(255, 220, 110, 0.48);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0, rgba(64, 178, 196, 0.17), transparent 40%),
    linear-gradient(180deg, rgba(4, 23, 30, 0.99), rgba(1, 7, 12, 0.995));
  box-shadow:
    inset 0 0 42px rgba(82, 221, 255, 0.07),
    0 0 42px rgba(67, 209, 255, 0.2),
    0 25px 70px rgba(0, 0, 0, 0.86);
}

#closePaytableButton {
  position: absolute;
  z-index: 30;
  top: clamp(16px, 2.6%, 26px);
  right: clamp(18px, 2.5%, 31px);
  display: grid;
  place-items: center;
  width: clamp(34px, 3.2vw, 48px);
  aspect-ratio: 1;
  padding: 0 0 4px;
  border: 2px solid rgba(255, 225, 129, 0.72);
  border-radius: 50%;
  color: #fff2bd;
  background:
    radial-gradient(circle at 50% 30%, rgba(54, 185, 205, 0.28), transparent 52%),
    linear-gradient(180deg, #174f53, #081b23);
  font: 300 clamp(25px, 2.7vw, 39px)/1 Arial, sans-serif;
  text-shadow: 0 2px 0 #061016;
  box-shadow:
    inset 0 0 0 2px rgba(2, 12, 17, 0.75),
    0 0 14px rgba(76, 223, 239, 0.32);
}

#closePaytableButton:hover,
#closePaytableButton:focus-visible {
  color: #fffbe0;
  border-color: #fff2ab;
  filter: brightness(1.18);
}

.paytableContent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1px;
  overflow: hidden;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.paytableStage {
  position: relative;
  flex: none;
  width: min(100%, calc((min(920px, 96dvh) - 82px) * 1.776833));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 8px;
  background:
    #020a0f
    image-set(
      url("../assets/art/paytable-grimoire.webp?v=wicked-wood-paytable-1") type("image/webp"),
      url("../assets/art/paytable-grimoire.png?v=wicked-wood-paytable-1") type("image/png")
    )
    center / 100% 100% no-repeat;
  box-shadow:
    0 13px 36px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 221, 121, 0.17),
    0 0 22px rgba(71, 208, 226, 0.1);
}

.paytablePage {
  --page-accent: #79efff;
  --page-accent-rgb: 121, 239, 255;
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: paytable-page-arrive 260ms ease-out both;
}

.paytablePage-fortunes { --page-accent: #ffd96b; --page-accent-rgb: 255, 207, 86; }
.paytablePage-runes { --page-accent: #75dfff; --page-accent-rgb: 83, 196, 255; }
.paytablePage-special { --page-accent: #ffb44e; --page-accent-rgb: 255, 163, 54; }
.paytablePage-stacks { --page-accent: #f1a5ff; --page-accent-rgb: 211, 112, 255; }
.paytablePage-transformations { --page-accent: #89ffb9; --page-accent-rgb: 94, 232, 160; }
.paytablePage-multipliers { --page-accent: #ca8cff; --page-accent-rgb: 181, 105, 255; }
.paytablePage-mushrooms { --page-accent: #78f0ff; --page-accent-rgb: 77, 213, 240; }
.paytablePage-lines { --page-accent: #ffe172; --page-accent-rgb: 255, 210, 83; }
.paytablePage-wins { --page-accent: #7be7ff; --page-accent-rgb: 74, 205, 240; }
.paytablePage-information { --page-accent: #ffe18b; --page-accent-rgb: 255, 211, 106; }

.paytablePageTitle {
  position: absolute;
  z-index: 4;
  left: 25.5%;
  top: 18.5%;
  display: grid;
  place-items: center;
  width: 49%;
  height: 10.5%;
  border: 1px solid color-mix(in srgb, var(--page-accent) 72%, #8b5b21);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 0, rgba(var(--page-accent-rgb), 0.18), transparent 58%),
    linear-gradient(180deg, rgba(19, 83, 92, 0.95), rgba(3, 24, 33, 0.98) 55%, rgba(12, 42, 49, 0.97));
  box-shadow:
    inset 0 0 0 3px rgba(1, 13, 18, 0.72),
    inset 0 0 20px rgba(var(--page-accent-rgb), 0.12),
    0 7px 15px rgba(0, 0, 0, 0.58),
    0 0 17px rgba(var(--page-accent-rgb), 0.14);
  text-align: center;
  text-transform: uppercase;
}

.paytablePageTitle span {
  align-self: end;
  color: color-mix(in srgb, var(--page-accent) 88%, white);
  font-size: clamp(6px, 0.67vw, 11px);
  font-weight: 950;
  letter-spacing: 0.2em;
  line-height: 1;
}

.paytablePageTitle h3 {
  align-self: start;
  margin: 0;
  color: #ffe79a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 2.18vw, 35px);
  line-height: 1.02;
  letter-spacing: 0.025em;
  text-shadow:
    0 2px 0 #56340d,
    0 0 10px rgba(var(--page-accent-rgb), 0.28);
}

.paytablePageBody {
  position: absolute;
  z-index: 2;
  inset: 30.4% 10.7% 15.2%;
  min-width: 0;
  min-height: 0;
}

.paytablePageLead {
  height: 7.4%;
  margin: 0 0 0.7%;
  color: #c9dde0;
  font-size: clamp(7px, 0.8vw, 13px);
  font-weight: 780;
  line-height: 1.12;
  text-align: center;
}

.paytablePayoutCard,
.paytableSpecialCard,
.paytableBonusAwards article,
.paytableFeatureMedallion,
.paytableMultiplierEquation article,
.paytableMushroomHero,
.paytableMushroomSteps article,
.paytableLineCard,
.paytableWildHero,
.paytableRuleList article,
.paytableStatCard,
.paytableInfoNotes,
.paytableRibbon {
  border: 1px solid rgba(var(--page-accent-rgb), 0.48);
  background:
    radial-gradient(circle at 50% 0, rgba(var(--page-accent-rgb), 0.1), transparent 45%),
    linear-gradient(160deg, rgba(11, 68, 74, 0.77), rgba(2, 18, 27, 0.9) 68%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.64),
    inset 0 0 14px rgba(var(--page-accent-rgb), 0.06),
    0 6px 12px rgba(0, 0, 0, 0.42);
}

.paytablePayoutCards {
  display: grid;
  height: 91.5%;
  gap: clamp(4px, 0.64vw, 10px);
}

.paytablePayoutCards.fortunes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.paytablePayoutCards.runes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: 5.5%;
}

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

.paytablePayoutCard:first-child {
  border-color: rgba(255, 226, 128, 0.82);
  box-shadow:
    inset 0 0 19px rgba(255, 206, 88, 0.14),
    0 0 15px rgba(255, 191, 55, 0.16),
    0 6px 12px rgba(0, 0, 0, 0.42);
}

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

.paytableSymbolCanvas {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 7px rgba(var(--page-accent-rgb), 0.17));
}

.paytablePayoutSymbol .paytableSymbolCanvas {
  max-width: 94%;
  max-height: 100%;
}

.paytablePayoutCard h4,
.paytableSpecialCard h4 {
  margin: 0 0 4px;
  color: #ffe395;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 0.9vw, 14px);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #321a08;
}

.paytablePayoutMatrix {
  display: grid;
  grid-template-columns: repeat(var(--pay-columns), minmax(0, 1fr));
  grid-template-rows: 35% 65%;
  min-height: clamp(43px, 6vw, 85px);
  overflow: hidden;
  border: 1px solid rgba(var(--page-accent-rgb), 0.42);
  border-radius: 6px;
  background: rgba(1, 12, 18, 0.86);
}

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

.paytablePayoutMatrix > *:first-child,
.paytablePayoutMatrix > strong:first-of-type {
  border-left: 0;
}

.paytablePayoutMatrix span {
  border-bottom: 1px solid rgba(var(--page-accent-rgb), 0.32);
  color: #ffe17e;
  background: rgba(30, 103, 110, 0.3);
  font-size: clamp(7px, 0.92vw, 14px);
  font-weight: 950;
}

.paytablePayoutMatrix strong {
  color: #fff0b5;
  font-size: clamp(8px, 1.08vw, 17px);
  line-height: 1;
  text-shadow: 0 1px 0 #4b2a09, 0 0 7px rgba(var(--page-accent-rgb), 0.25);
  white-space: nowrap;
}

.paytableSpecialGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 68%;
  gap: clamp(5px, 0.85vw, 13px);
}

.paytableSpecialCard {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, 0.75vw, 11px);
  overflow: hidden;
  border-radius: 9px;
}

.paytableSpecialCard span {
  color: var(--page-accent);
  font-size: clamp(6px, 0.68vw, 10px);
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.paytableSpecialCard p,
.paytableFeatureMedallion p,
.paytableMushroomHero p,
.paytableMushroomSteps p,
.paytableRuleList p,
.paytableInfoNotes p {
  margin: 0;
  color: #d2e4e5;
  font-size: clamp(6px, 0.72vw, 11px);
  line-height: 1.25;
}

.paytableBonusAwards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 29%;
  margin-top: 1%;
  gap: clamp(5px, 0.85vw, 13px);
}

.paytableBonusAwards article {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: 56% 44%;
  align-items: center;
  min-width: 0;
  padding: 3% 7%;
  border-radius: 8px;
}

.paytableBonusAwards strong {
  grid-row: 1 / -1;
  color: #ffe18a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 3vw, 47px);
  line-height: 1;
}

.paytableBonusAwards span {
  grid-row: 1 / -1;
  margin-left: 0.25em;
  color: var(--page-accent);
  font-size: clamp(6px, 0.64vw, 10px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.paytableBonusAwards b,
.paytableBonusAwards small {
  margin-left: 8%;
  white-space: nowrap;
}

.paytableBonusAwards b {
  align-self: end;
  color: #fff0b0;
  font-size: clamp(8px, 1.05vw, 16px);
  text-transform: uppercase;
}

.paytableBonusAwards small {
  align-self: start;
  color: #b9d9dd;
  font-size: clamp(6px, 0.66vw, 10px);
}

.paytableStackShowcase {
  display: grid;
  grid-template-rows: 1.05fr 0.92fr;
  height: 88%;
  gap: clamp(4px, 0.6vw, 9px);
}

.paytableStackPair,
.paytableWildReelRow,
.paytableTransformationGrid,
.paytableTransformationSupport,
.paytableMultiplierGrid {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: clamp(4px, 0.65vw, 10px);
}

.paytableStackPair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 52%;
  margin-inline: auto;
}

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

.paytableFeatureMedallion {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(2px, 0.4vw, 6px);
  overflow: hidden;
  border-radius: 9px;
  text-align: center;
}

.paytableFeatureArt {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  container-type: size;
}

.paytableFeatureIcon.featureIcon {
  width: min(94cqw, 94cqh, 230px);
  max-height: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 8px rgba(var(--page-accent-rgb), 0.27));
}

.paytableFeatureMedallion p {
  min-height: 2.5em;
  padding: 0 3% 2%;
}

.paytableRibbon {
  display: grid;
  place-items: center;
  height: 10.4%;
  margin: 0.8% auto 0;
  padding: 0 2%;
  border-radius: 7px;
  color: #fff0b4;
  font-size: clamp(6px, 0.72vw, 11px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.paytableTransformationGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 57%;
}

.paytableTransformationSupport {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 55%;
  height: 41.5%;
  margin: 0.7% auto 0;
}

.paytableTransformationSupport .paytableFeatureMedallion {
  grid-template-columns: 43% minmax(0, 1fr);
  grid-template-rows: 1fr;
  text-align: left;
}

.paytableTransformationSupport .paytableFeatureMedallion p {
  min-height: 0;
  padding: 4%;
}

.paytableMultiplierGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 67%;
  height: 59%;
  margin-inline: auto;
}

.paytableMultiplierEquation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  width: 84%;
  height: 25%;
  margin: 0.8% auto 0;
  gap: clamp(4px, 0.75vw, 11px);
}

.paytableMultiplierEquation article {
  display: grid;
  place-items: center;
  align-content: center;
  height: 100%;
  border-radius: 7px;
  text-align: center;
}

.paytableMultiplierEquation strong {
  color: #ffe394;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.9vw, 29px);
  line-height: 1;
}

.paytableMultiplierEquation span {
  color: #bfd9dd;
  font-size: clamp(6px, 0.63vw, 10px);
  font-weight: 850;
  text-transform: uppercase;
}

.paytableMultiplierEquation > i {
  color: var(--page-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 2.4vw, 37px);
  font-style: normal;
}

.paytablePage-multipliers .paytableRibbon {
  height: 11%;
}

.paytableMushroomLayout {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  height: 86%;
  gap: clamp(5px, 0.82vw, 12px);
}

.paytableMushroomHero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, 0.65vw, 10px);
  overflow: hidden;
  border-radius: 9px;
  text-align: center;
}

.paytableMushroomHero > div {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  min-height: 0;
}

.paytableMushroomHero .paytableSymbolCanvas {
  grid-area: 1 / 1;
  width: 68%;
  height: 100%;
}

.paytableMushroomHero .paytableSymbolCanvas:first-child {
  transform: translateX(-23%) scale(0.92);
}

.paytableMushroomHero .paytableSymbolCanvas:last-child {
  transform: translateX(26%) scale(0.72);
}

.paytableMushroomHero strong {
  color: #ffe39a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 1.25vw, 19px);
  line-height: 1.05;
  text-transform: uppercase;
}

.paytableMushroomSteps {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-height: 0;
  gap: clamp(3px, 0.46vw, 7px);
}

.paytableMushroomSteps article,
.paytableRuleList article {
  display: grid;
  grid-template-columns: clamp(22px, 3vw, 44px) minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: 2px clamp(6px, 0.8vw, 12px) 2px 4px;
  border-radius: 7px;
}

.paytableMushroomSteps b,
.paytableRuleList b {
  display: grid;
  place-items: center;
  width: clamp(19px, 2.5vw, 36px);
  aspect-ratio: 1;
  border: 1px solid #f9d780;
  border-radius: 50%;
  color: #082027;
  background: radial-gradient(circle at 36% 30%, #efffff, #68dce9 36%, #b47c27 72%, #3d2209);
  font-size: clamp(7px, 0.83vw, 13px);
  box-shadow: 0 0 8px rgba(var(--page-accent-rgb), 0.45);
}

.paytableMushroomSteps strong {
  color: #ffe291;
  font-size: clamp(7px, 0.86vw, 13px);
  text-transform: uppercase;
}

.paytablePage-mushrooms .paytableRibbon {
  height: 11.5%;
}

.paytableLineCards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 91.5%;
  gap: clamp(3px, 0.48vw, 7px);
}

.paytableLineCard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(2px, 0.38vw, 6px);
  overflow: hidden;
  border-radius: 7px;
}

.paytableLineCard > strong {
  justify-self: center;
  color: var(--line-color);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 1.1vw, 17px);
  line-height: 1;
  text-shadow: 0 0 7px var(--line-color);
}

.paytableLineCard svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.paytableLineBoard {
  fill: rgba(1, 15, 22, 0.72);
  stroke: rgba(159, 220, 226, 0.2);
  stroke-width: 2;
}

.paytableLineGrid {
  fill: none;
  stroke: rgba(157, 210, 216, 0.13);
  stroke-width: 1;
}

.paytableLineCell {
  fill: rgba(162, 221, 226, 0.15);
}

.paytableLinePath {
  fill: none;
  stroke: var(--line-color);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--line-color));
}

.paytableLinePoint {
  fill: #f4ffff;
  stroke: var(--line-color);
  stroke-width: 4;
}

.paytableRulesLayout {
  display: grid;
  grid-template-columns: 29% minmax(0, 1fr);
  height: 87%;
  gap: clamp(5px, 0.8vw, 12px);
}

.paytableWildHero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: 5%;
  overflow: hidden;
  border-radius: 9px;
  text-align: center;
}

.paytableWildHero strong {
  color: #ffe392;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 1.2vw, 18px);
  line-height: 1;
  text-transform: uppercase;
}

.paytableWildHero span {
  color: var(--page-accent);
  font-size: clamp(6px, 0.7vw, 11px);
  font-weight: 900;
  text-transform: uppercase;
}

.paytableRuleList {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
  gap: clamp(3px, 0.45vw, 7px);
}

.paytablePage-wins .paytableRibbon {
  height: 11.3%;
}

.paytableStatsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 68%;
  gap: clamp(4px, 0.65vw, 10px);
}

.paytableStatCard {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 0;
  padding: 4%;
  border-radius: 8px;
  text-align: center;
}

.paytableStatCard strong {
  color: #ffe393;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 2.05vw, 32px);
  line-height: 1;
  text-shadow: 0 2px 0 #412307, 0 0 8px rgba(var(--page-accent-rgb), 0.25);
}

.paytableStatCard span {
  margin-top: 4px;
  color: #c9dee0;
  font-size: clamp(6px, 0.72vw, 11px);
  font-weight: 850;
  line-height: 1.08;
  text-transform: uppercase;
}

.paytableInfoNotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 29%;
  margin-top: 1%;
  overflow: hidden;
  border-radius: 8px;
}

.paytableInfoNotes p {
  padding: clamp(4px, 0.7vw, 10px);
  border-left: 1px solid rgba(var(--page-accent-rgb), 0.26);
}

.paytableInfoNotes p:first-child {
  border-left: 0;
}

.paytableInfoNotes strong {
  color: #ffe18b;
}

#paytableTabs.paytableControls {
  display: grid;
  grid-template-columns: clamp(34px, 3.7vw, 48px) minmax(0, 1fr) clamp(34px, 3.7vw, 48px);
  align-items: center;
  justify-self: center;
  width: min(760px, 90%);
  margin: 3px auto 1px;
  padding: 4px clamp(7px, 0.9vw, 13px);
  gap: clamp(6px, 0.85vw, 12px);
  overflow: visible;
  border: 1px solid rgba(255, 216, 112, 0.25);
  border-radius: 10px;
  background: rgba(2, 14, 20, 0.82);
  box-shadow: inset 0 1px rgba(218, 251, 255, 0.08), 0 6px 15px rgba(0, 0, 0, 0.4);
}

#paytableTabs button {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

#paytableTabs .paytableNavButton {
  width: 100%;
  height: clamp(27px, 3vw, 38px);
  border: 1px solid rgba(255, 224, 139, 0.5);
  border-radius: 8px;
  color: #fff0b1;
  background: linear-gradient(180deg, #176d72, #082d36);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.5vw, 33px);
  font-weight: 950;
  line-height: 0.72;
  text-shadow: 0 2px 0 #06161d;
  box-shadow: inset 0 1px rgba(222, 255, 255, 0.15);
}

#paytableTabs .paytableNavButton:hover,
#paytableTabs .paytableNavButton:focus-visible {
  border-color: #ffe594;
  color: #fffbdc;
  filter: brightness(1.2);
}

.paytablePager {
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: 3px;
}

.paytableCurrentPage {
  color: #e9ddbb;
  font-size: clamp(7px, 0.72vw, 11px);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.paytableDots {
  display: flex;
  gap: clamp(4px, 0.58vw, 9px);
}

#paytableTabs .paytableDot {
  width: clamp(8px, 0.83vw, 13px);
  height: clamp(8px, 0.83vw, 13px);
  border: 1px solid rgba(144, 224, 235, 0.52);
  border-radius: 50%;
  background: #071f28;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}

#paytableTabs .paytableDot.isActive {
  border-color: #fff0aa;
  background: radial-gradient(circle, #f3ffff 0 22%, #5ce4ef 39%, #ca8c31 68%, #53300e 100%);
  box-shadow: 0 0 10px rgba(79, 230, 240, 0.68);
}

@keyframes paytable-page-arrive {
  from {
    opacity: 0;
    transform: translateY(0.7%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 600px) {
  .paytableFrame {
    padding: 3px 6px;
  }

  .paytableStage {
    width: min(100%, calc((96dvh - 66px) * 1.776833));
  }

  #paytableTabs.paytableControls {
    margin-block: 1px;
    padding-block: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paytablePage {
    animation: none;
  }
}

@keyframes aura-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

@keyframes moon-corona-breathe {
  0%,
  100% {
    opacity: var(--moon-corona-low);
    transform: translate3d(-50%, -50%, 0) scale(0.985);
  }
  52% {
    opacity: var(--moon-corona-high);
    transform: translate3d(-50%, -50%, 0) scale(1.025);
  }
  78% {
    opacity: var(--moon-corona-rest);
    transform: translate3d(-50%, -50%, 0) scale(1.005);
  }
}

@keyframes lantern-glow-breathe {
  0%,
  100% {
    opacity: var(--lantern-glow-low);
    transform: translate3d(0, 0.08cqw, 0) scale(0.96, 0.94);
  }
  19% {
    opacity: var(--lantern-glow-mid);
    transform: translate3d(0.04cqw, 0, 0) scale(1.015, 0.99);
  }
  46% {
    opacity: var(--lantern-glow-high);
    transform: translate3d(-0.03cqw, -0.07cqw, 0) scale(1.065, 1.075);
  }
  69% {
    opacity: var(--lantern-glow-mid);
    transform: translate3d(0.02cqw, 0.02cqw, 0) scale(0.99, 1.025);
  }
  83% {
    opacity: var(--lantern-glow-flicker);
    transform: translate3d(-0.02cqw, -0.03cqw, 0) scale(1.035, 1.045);
  }
}

@keyframes lantern-flame-flicker {
  0%,
  100% {
    opacity: 0.32;
    transform: translate3d(0, 0.08cqw, 0) scale(0.84, 0.92);
  }
  17% {
    opacity: 0.58;
    transform: translate3d(0.03cqw, -0.04cqw, 0) scale(1.02, 1.08);
  }
  34% {
    opacity: 0.4;
    transform: translate3d(-0.025cqw, 0.015cqw, 0) scale(0.91, 0.98);
  }
  56% {
    opacity: 0.68;
    transform: translate3d(0.015cqw, -0.07cqw, 0) scale(1.08, 1.14);
  }
  76% {
    opacity: 0.45;
    transform: translate3d(-0.035cqw, -0.01cqw, 0) scale(0.95, 1.03);
  }
}

@keyframes mote-drift-a {
  from {
    transform: translate3d(-1.5%, 2%, 0);
  }
  to {
    transform: translate3d(2%, -3%, 0);
  }
}

@keyframes mote-drift-b {
  from {
    transform: translate3d(2.5%, -1%, 0);
  }
  to {
    transform: translate3d(-2%, 2.5%, 0);
  }
}

@keyframes mote-drift-c {
  from {
    transform: translate3d(-2%, -2%, 0);
  }
  to {
    transform: translate3d(2.5%, 1.5%, 0);
  }
}

@keyframes burst-turn {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes big-win-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}

@keyframes card-arrive {
  from {
    opacity: 0;
    transform: translateY(1.8cqw) scale(0.84);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bonus-summary-arrive {
  from {
    opacity: 0;
    filter:
      brightness(0.68)
      saturate(0.72)
      drop-shadow(0 0.8cqw 1.1cqw rgba(0, 0, 0, 0.72));
    transform: translateY(1.2cqw) scale(0.9);
  }
}

@keyframes mushroom-float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.4deg);
  }
  50% {
    transform: translateY(-0.36cqw) rotate(0.5deg);
  }
}

@keyframes mushroom-pick-hint {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 0 rgba(108, 255, 180, 0))
      drop-shadow(0 0 0 rgba(255, 220, 105, 0));
  }
  48% {
    transform: translate3d(0, -0.32cqw, 0) scale(1.085);
    filter:
      brightness(1.82)
      saturate(1.32)
      drop-shadow(0 0 1.15cqw rgba(112, 255, 190, 0.98))
      drop-shadow(0 0 0.64cqw rgba(255, 220, 105, 0.92));
  }
}

@keyframes reveal-turn {
  from {
    opacity: 0;
    transform: rotateY(90deg) scale(0.82);
  }
  to {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

@keyframes mushroom-reward-flash {
  0%,
  100% {
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 0 rgba(112, 242, 255, 0));
  }
  50% {
    filter:
      brightness(1.82)
      saturate(1.28)
      drop-shadow(0 0 1.15cqw rgba(121, 239, 255, 0.98))
      drop-shadow(0 0 0.65cqw rgba(255, 220, 112, 0.86));
  }
}

@keyframes bonus-backdrop-close {
  0% {
    opacity: 0;
  }
  52% {
    opacity: 0.18;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bonus-backdrop-open {
  0%,
  12% {
    opacity: 1;
  }
  56% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bonus-gate-close-left {
  0% {
    transform: translate3d(calc(-100% - 1cqw), 0, 0);
    animation-timing-function: cubic-bezier(0.48, 0.02, 0.9, 0.42);
  }
  70% {
    transform: translate3d(0.36cqw, 0, 0);
    animation-timing-function: cubic-bezier(0.16, 0.82, 0.24, 1);
  }
  82% {
    transform: translate3d(-0.13cqw, 0, 0);
  }
  91% {
    transform: translate3d(0.05cqw, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bonus-gate-close-right {
  0% {
    transform: translate3d(calc(100% + 1cqw), 0, 0);
    animation-timing-function: cubic-bezier(0.48, 0.02, 0.9, 0.42);
  }
  70% {
    transform: translate3d(-0.36cqw, 0, 0);
    animation-timing-function: cubic-bezier(0.16, 0.82, 0.24, 1);
  }
  82% {
    transform: translate3d(0.13cqw, 0, 0);
  }
  91% {
    transform: translate3d(-0.05cqw, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bonus-gate-open-left {
  0%,
  9% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.62, 0.02, 0.9, 0.48);
  }
  15% {
    transform: translate3d(0.12cqw, 0, 0);
    animation-timing-function: cubic-bezier(0.52, 0.04, 0.88, 0.5);
  }
  100% {
    transform: translate3d(calc(-100% - 1cqw), 0, 0);
  }
}

@keyframes bonus-gate-open-right {
  0%,
  9% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.62, 0.02, 0.9, 0.48);
  }
  15% {
    transform: translate3d(-0.12cqw, 0, 0);
    animation-timing-function: cubic-bezier(0.52, 0.04, 0.88, 0.5);
  }
  100% {
    transform: translate3d(calc(100% + 1cqw), 0, 0);
  }
}

@keyframes bonus-gate-impact {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.18);
  }
  65% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.18);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.35);
  }
  77% {
    opacity: 0.68;
    transform: translateX(-50%) scaleX(0.72);
  }
  100% {
    opacity: 0.16;
    transform: translateX(-50%) scaleX(0.32);
  }
}

@keyframes bonus-gate-debris-flare {
  0%,
  67% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.08);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  79% {
    opacity: 0.46;
    transform: translateX(-50%) scaleX(2.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(3.2);
  }
}

@keyframes bonus-gate-debris {
  0%,
  68% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.16) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.58) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--debris-x)),
        calc(-50% + var(--debris-drift)),
        0
      )
      scale(0.16)
      rotate(var(--debris-spin));
  }
}

@keyframes bonus-plaque-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.54) rotate(-2deg);
    filter: blur(0.8cqw) brightness(1.7);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.045) rotate(0.5deg);
    filter: blur(0) brightness(1.17);
  }
  78% {
    transform: translate(-50%, -50%) scale(0.985) rotate(-0.2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: blur(0) brightness(1);
  }
}

@keyframes bonus-plaque-fade {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0) brightness(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(0.55cqw) brightness(1.32);
  }
}

@keyframes bonus-award-glyph-arrive {
  from {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(0.55cqw) brightness(1.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes bonus-award-glyph-fade {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
  to {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(0.42cqw) brightness(1.25);
  }
}

@keyframes bonus-plaque-glow {
  from {
    opacity: 0.52;
    transform: scale(0.96);
  }
  to {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes bonus-motes-drift {
  from {
    transform: translateY(0) scale(0.96);
  }
  to {
    transform: translateY(-1.3cqw) scale(1.035);
  }
}

@keyframes bonus-skip-arrive {
  from {
    opacity: 0;
    transform: translateY(0.4cqw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.7cqw);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes illustrated-panel-in {
  from {
    opacity: 0;
    transform: translateY(3%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes free-spins-panel-arrive {
  0% {
    opacity: 0;
    transform: translate3d(-112%, 0, 0) scale(0.975);
  }
  72% {
    opacity: 1;
    transform: translate3d(2.6%, 0, 0) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes free-spins-panel-moon {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes moon-pulse {
  0%,
  100% {
    transform: scale(0.97);
    filter: brightness(0.94);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.12);
  }
}

@container (max-width: 900px) {
  .featureChip {
    grid-template-columns: 2.35cqw 1fr;
  }

  .featureIcon {
    width: 2.1cqw;
  }

  .mushroomHeader p {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .gameStage {
    visibility: hidden;
  }

  .orientationHint {
    display: grid;
  }
}

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

  .ambientMotes,
  .bonusRain,
  .mushroomStorm,
  .fairyAura,
  .owlAnimation,
  .logoAnimation,
  .bonusLogoAnimation,
  .presentationBurst,
  .bonusIntroMotes,
  .bonusPlaqueGlow {
    display: none;
  }

  .lanternGlow {
    animation: none;
    opacity: 0.38;
    transform: none;
    filter: blur(0.28cqw);
  }

  .lanternGlow::before {
    animation: none;
    opacity: 0.42;
    transform: none;
  }

  .gameStage.isBonus .lanternGlow {
    opacity: 0.31;
  }

  .mushroomGrid.isGathering .mushroomPick.isPicked {
    transition: none !important;
  }

  .mushroomGrid.isFlashing .mushroomPick.isPicked {
    animation: none !important;
    filter: none;
  }

  .mushroomPick.isHinted {
    animation: none !important;
    filter: none;
    transform: none;
  }

  .presentationOverlay.isBonusSummary .presentationCard,
  .presentationOverlay.isBonusSummary .bigWinCanvas {
    animation: none !important;
    transition: none !important;
  }

  .activeFeatures,
  .activeFeatures::before {
    animation: none !important;
    transition: none !important;
  }

  .activeFeatures.isVisible {
    transform: none;
  }

  .moonGlow::after {
    animation: none;
    opacity: var(--moon-corona-rest);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .bonusIntro[data-phase="closing"] .bonusGateLeaf,
  .bonusIntro[data-phase="popup"] .bonusGateLeaf,
  .bonusIntro[data-phase="fade"] .bonusGateLeaf {
    animation: none !important;
    transform: translate3d(0, 0, 0);
  }

  .bonusIntro[data-phase="opening"] .bonusGateLeaf {
    animation: none !important;
    transform: translate3d(var(--gate-open-x), 0, 0);
  }

  .bonusIntro[data-phase="closing"] .bonusGateImpact,
  .bonusIntro[data-phase="popup"] .bonusGateImpact,
  .bonusIntro[data-phase="fade"] .bonusGateImpact {
    animation: none !important;
    opacity: 0.16;
    transform: translateX(-50%) scaleX(0.32);
  }

  .bonusIntro[data-phase="opening"] .bonusGateImpact {
    animation: none !important;
    opacity: 0;
  }

  .bonusGateDebris,
  .bonusGateDebris::before,
  .bonusGateDebris > i {
    animation: none !important;
    opacity: 0 !important;
  }
}

@media (prefers-contrast: more) {
  .glassPanel,
  .presentationCard {
    background: #001319;
  }

  .activeFeatures .bonusInfoStat,
  .activeFeatures .bonusInfoFeatures {
    text-shadow: 0 1px 1px #000;
  }

  .paylineBadge {
    border-width: 2px;
  }
}