:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gold: #ffd86a;
  --bright-gold: #fff3ac;
  --deep-gold: #9d5a0b;
  --lapis: #0c4c8c;
  --night: #020814;
  --ink: #06111d;
  --turquoise: #3fe4de;
  --danger: #ff5a48;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #01040a; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 28%, rgba(31, 60, 111, .26), transparent 46%),
    linear-gradient(#030715, #010307 72%);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#gameShell {
  position: relative;
  width: min(100vw, calc(100dvh * 1672 / 941));
  max-width: 100vw;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #07121f;
  box-shadow: 0 0 90px #000, 0 0 38px rgba(222, 159, 52, .19);
  touch-action: manipulation;
}

.scene,
#gameCanvas,
.screenVignette,
.screenOverlay,
.bookFeatureOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene {
  z-index: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: opacity 1.05s cubic-bezier(.32, .72, .2, 1), filter 1.05s ease;
}

.baseScene { opacity: 1; background-image: url("../assets/art/background.webp?v=clean-meters-1"), url("../assets/art/background-clean.png?v=clean-meters-1"); }
.bonusScene { opacity: 0; background-image: url("../assets/art/bonus-background.webp?v=blank-meters-1"), url("../bonusbackground.png?v=blank-meters-1"); }
#gameShell.isBonus .baseScene { opacity: 0; filter: brightness(.68) saturate(.8); }
#gameShell.isBonus .bonusScene { opacity: 1; }

#gameCanvas { z-index: 2; display: block; pointer-events: none; }

.paylineMarkers {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

.paylineMarker {
  --line-color: #ffe06a;
  position: absolute;
  width: 3.24%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  appearance: none;
  padding: 0;
  border: 0;
  color: var(--line-color);
  background: url("../assets/art/ui/line-marker-circular.png") center / contain no-repeat;
  filter: drop-shadow(0 0 clamp(2px, .28cqw, 5px) var(--line-color)) drop-shadow(0 clamp(1px, .16cqw, 3px) clamp(1px, .18cqw, 3px) rgba(0, 0, 0, .82));
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center;
  transition: transform 150ms cubic-bezier(.2, .8, .2, 1), filter 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.paylineMarker:is(:hover, :focus-visible, .isPreviewed) {
  z-index: 2;
  outline: none;
  transform: scale(1.17);
  filter:
    brightness(1.19) saturate(1.16)
    drop-shadow(0 0 clamp(4px, .48cqw, 9px) var(--line-color))
    drop-shadow(0 clamp(1px, .16cqw, 3px) clamp(2px, .24cqw, 5px) rgba(0, 0, 0, .9));
}
.paylineMarker:active { transform: scale(1.08); }

.paylineMarker[data-side="left"] { left: 16.56%; }
.paylineMarker[data-side="right"] { right: 16.56%; }
.paylineMarker.markerSlot1 { top: 18.18%; }
.paylineMarker.markerSlot2 { top: 31.68%; }
.paylineMarker.markerSlot3 { top: 45.18%; }
.paylineMarker.markerSlot4 { top: 58.68%; }
.paylineMarker.markerSlot5 { top: 72.18%; }

.paylineMarker b {
  position: absolute;
  left: 49.707%;
  top: 52.539%;
  display: block;
  color: var(--line-color);
  font: 900 clamp(6px, 1.02cqw, 18px)/1 Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 clamp(1px, .12cqw, 3px) #000;
  transform: translate(-50%, -50%) translate(0, -.19em);
}

.paylineMarker[data-line="10"] b {
  font-size: clamp(5px, .82cqw, 14px);
  letter-spacing: -.08em;
  transform: translate(-50%, -50%) translate(-.075em, -.12em);
}
.paylineMarker[data-line="1"] { --line-color: #ffe06a; }
.paylineMarker[data-line="2"] { --line-color: #5cecff; }
.paylineMarker[data-line="3"] { --line-color: #ff6bc9; }
.paylineMarker[data-line="4"] { --line-color: #8dff6b; }
.paylineMarker[data-line="5"] { --line-color: #ff795d; }
.paylineMarker[data-line="6"] { --line-color: #a989ff; }
.paylineMarker[data-line="7"] { --line-color: #fff4a6; }
.paylineMarker[data-line="8"] { --line-color: #4ca7ff; }
.paylineMarker[data-line="9"] { --line-color: #ffae43; }
.paylineMarker[data-line="10"] { --line-color: #62ffd0; }

.sunBloom {
  position: absolute;
  z-index: 1;
  left: 8.463%;
  top: 33.55%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .72;
  background: radial-gradient(
    circle,
    rgba(255, 255, 242, .96) 0 7%,
    rgba(255, 247, 190, .7) 11%,
    rgba(255, 220, 112, .34) 23%,
    rgba(255, 178, 59, .15) 42%,
    rgba(255, 151, 33, .055) 57%,
    transparent 72%
  );
  filter: blur(1.5px) brightness(1.04);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(.98);
  transform-origin: center;
  animation: sunBreathe 6.4s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: opacity, filter, transform;
}

/* The supplied 595x83 matte is registered to x543/y54 on the 1672x941
   cabinet. Only the light band moves; the title-shaped mask never does. */
.logoShine {
  position: absolute;
  z-index: 4;
  left: 32.476077%;
  top: 5.738576%;
  width: 35.586124%;
  height: 8.820404%;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 37%,
      rgba(255, 215, 102, .08) 41%,
      rgba(255, 238, 174, .52) 45%,
      rgba(255, 255, 255, .98) 49.5%,
      rgba(255, 225, 121, .7) 53%,
      rgba(255, 201, 69, .12) 58%,
      transparent 63%
    ) 130% 50% / 270% 100% no-repeat;
  -webkit-mask: url("../assets/art/ui/book-of-isis-shine.png") center / 100% 100% no-repeat;
  mask: url("../assets/art/ui/book-of-isis-shine.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  filter: brightness(1.08) drop-shadow(0 0 clamp(1px, .2cqw, 4px) rgba(255, 223, 125, .72));
  animation: logoShineCycle 11s cubic-bezier(.2, .72, .18, 1) infinite;
  will-change: opacity, background-position;
}

@keyframes logoShineCycle {
  0%, 2% {
    opacity: 0;
    background-position: 130% 50%;
  }
  4% { opacity: .38; }
  6% { opacity: 1; }
  14% {
    opacity: .92;
    background-position: -30% 50%;
  }
  17%, 100% {
    opacity: 0;
    background-position: -30% 50%;
  }
}

.screenVignette {
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .15) 83%, rgba(0, 0, 0, .38));
  mix-blend-mode: multiply;
}

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

/* Loading */
.preloader {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff1bd;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(12, 90, 135, .18), transparent 38%),
    linear-gradient(rgba(3, 6, 18, .54), rgba(1, 3, 10, .94)),
    url("../assets/art/background.webp?v=clean-meters-1") center / cover;
  transition: opacity 780ms ease, visibility 780ms ease, filter 780ms ease;
}
.preloader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 126%;
  aspect-ratio: 1;
  opacity: .34;
  background:
    repeating-conic-gradient(from -4deg, rgba(255, 226, 113, .3) 0 1.4deg, transparent 2.4deg 9deg),
    repeating-conic-gradient(from 2deg, rgba(49, 214, 237, .12) 0 1deg, transparent 1.8deg 13deg);
  -webkit-mask: radial-gradient(circle, #000 0 13%, rgba(0,0,0,.88) 34%, transparent 72%);
  mask: radial-gradient(circle, #000 0 13%, rgba(0,0,0,.88) 34%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: loaderRaysRotate 24s linear infinite;
}
.preloader::after {
  content: "";
  position: absolute;
  inset: -12%;
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255, 235, 153, .88) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(80, 225, 241, .65) 0 1px, transparent 1.7px);
  background-position: 0 0, 8cqw 5cqw;
  background-size: 17cqw 14cqw, 21cqw 18cqw;
  mix-blend-mode: screen;
  animation: loaderDustDrift 8s ease-in-out infinite alternate;
}
.preloader.isLeaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: brightness(1.7) saturate(1.14);
}
.preloader.isLeaving .loaderCard { animation: loaderTempleDepart 780ms cubic-bezier(.3, 0, .65, 1) both; }
.preloader.isLeaving::before { animation: loaderPortalBurst 780ms cubic-bezier(.18, .72, .22, 1) both; }

.loaderCard {
  position: relative;
  z-index: 1;
  width: min(61%, 960px);
  min-height: 60%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(4px, .82cqw, 14px);
  padding: 7.2% 10% 6.4%;
  isolation: isolate;
  clip-path: polygon(7% 0, 93% 0, 100% 12%, 100% 88%, 93% 100%, 7% 100%, 0 88%, 0 12%);
  background:
    radial-gradient(ellipse at 50% 7%, rgba(255, 204, 66, .19), transparent 32%),
    radial-gradient(ellipse at 50% 58%, rgba(8, 91, 138, .3), transparent 56%),
    linear-gradient(135deg, rgba(255, 236, 166, .07), transparent 27% 72%, rgba(255, 226, 134, .06)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, rgba(8, 32, 57, .97), rgba(2, 11, 24, .99));
  filter:
    drop-shadow(0 2.4cqh 2.2cqh rgba(0, 0, 0, .82))
    drop-shadow(0 0 1.5cqh rgba(255, 185, 42, .34))
    drop-shadow(0 0 3.6cqh rgba(31, 179, 217, .18));
  animation: loaderArrive 720ms cubic-bezier(.16, .85, .25, 1.08) both;
}

.loaderCard::before,
.loaderCard::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.loaderCard::before {
  inset: 0;
  border: clamp(3px, .38cqw, 7px) solid #d99b28;
  clip-path: inherit;
  box-shadow:
    inset 0 0 0 clamp(2px, .38cqw, 7px) #522806,
    inset 0 0 0 clamp(4px, .62cqw, 11px) rgba(238, 173, 44, .38),
    inset 0 0 5cqw rgba(0, 0, 0, .84);
}
.loaderCard::after {
  inset: 2.2%;
  border: 1px solid rgba(255, 211, 95, .48);
  clip-path: polygon(6% 0, 94% 0, 100% 10%, 100% 90%, 94% 100%, 6% 100%, 0 90%, 0 10%);
  background:
    linear-gradient(90deg, transparent 7%, rgba(255, 211, 95, .7) 7% 7.35%, transparent 7.35% 92.65%, rgba(255, 211, 95, .7) 92.65% 93%, transparent 93%),
    linear-gradient(rgba(255, 255, 255, .03), transparent 18% 82%, rgba(255, 193, 47, .05));
  box-shadow: inset 0 0 2.4cqw rgba(11, 125, 169, .23);
}
.loaderCard > * { position: relative; z-index: 2; }

.loaderEyebrow,
.loaderStatus {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: clamp(7px, .9cqw, 16px);
  font-weight: 800;
}
.loaderEyebrow {
  display: flex;
  align-items: center;
  gap: .9em;
  color: #74e7f3;
  text-shadow: 0 0 .65em rgba(53, 212, 239, .72);
}
.loaderEyebrow::before,
.loaderEyebrow::after {
  content: "";
  width: clamp(24px, 4.2cqw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8b33c);
  box-shadow: 0 0 6px rgba(255, 205, 75, .55);
}
.loaderEyebrow::after { transform: scaleX(-1); }
.loaderCard h1 {
  margin: -.03em 0 .02em;
  color: #ffe38d;
  font: 900 clamp(34px, 5.75cqw, 96px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
  text-shadow: 0 .055em 0 #673408, 0 .13em .2em rgba(0,0,0,.88), 0 0 .3em rgba(255, 206, 79, .78);
}
.loaderStatus { color: #f8e8bc; letter-spacing: .12em; font-weight: 750; text-shadow: 0 2px 3px #000; }

.loaderScarab {
  position: relative;
  width: clamp(48px, 6.6cqw, 112px);
  aspect-ratio: 1.45;
  margin-bottom: clamp(2px, .35cqw, 6px);
  filter: drop-shadow(0 .22em .18em rgba(0,0,0,.8)) drop-shadow(0 0 .24em rgba(255, 206, 73, .82));
  animation: scarabHover 1.9s ease-in-out infinite alternate;
}
.loaderScarab::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 36%; top: 8%; width: 28%; height: 82%;
  border: max(1px, .18cqw) solid #ffda68;
  border-radius: 55% 55% 45% 45%;
  background:
    radial-gradient(circle at 40% 27%, #fffbd2 0 4%, #6af4ef 12%, #0b67a8 36%, #041a40 76%);
  box-shadow: inset 0 0 .22em rgba(255,255,255,.46), 0 0 .24em rgba(62,221,239,.7);
}
.loaderScarab::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 45%;
  top: 39%;
  width: 10%;
  aspect-ratio: 1;
  border: 1px solid #fff2a4;
  border-radius: 50%;
  background: #7af6f0;
  box-shadow: 0 0 .26em #54edf0, 0 0 .48em #ffd65a;
}
.loaderScarab i,
.loaderScarab b {
  position: absolute;
  z-index: 2;
  top: 21%; width: 45%; height: 58%;
  border: max(1px, .18cqw) solid #e7a827;
  background: linear-gradient(145deg, #39d9e2 0 8%, #175b91 26%, #0b203f 57%, #d78c17 100%);
  box-shadow: inset 0 0 .22em rgba(255,255,255,.23);
}
.loaderScarab i { left: 0; border-radius: 80% 10% 70% 20%; transform: rotate(-13deg); }
.loaderScarab b { right: 0; border-radius: 10% 80% 20% 70%; transform: rotate(13deg); }
.loaderScarab span {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 142%;
  aspect-ratio: 1;
  border: max(1px, .11cqw) solid rgba(255, 210, 86, .7);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 213, 85, .56) 0 2deg, transparent 2.6deg 14deg);
  box-shadow: 0 0 .3em rgba(255, 200, 55, .6), inset 0 0 .35em rgba(46, 206, 231, .34);
  transform: translate(-50%, -50%);
  animation: loaderSealSpin 18s linear infinite;
}

.loaderProgress {
  width: min(38cqw, 630px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.05cqw, 18px);
  margin-top: clamp(2px, .45cqw, 8px);
}
.loaderTrack {
  width: 100%;
  height: clamp(8px, .82cqw, 15px);
  overflow: hidden;
  border: clamp(1px, .1cqw, 2px) solid #c38a24;
  border-radius: 99px;
  background: #020814;
  box-shadow: inset 0 2px 8px #000, 0 0 0 2px rgba(72,34,5,.82), 0 0 12px rgba(255, 198, 67, .18);
}
.loaderTrack div {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a477a, #21bbd2 35%, #75eee5 58%, #ffe16c 84%, #fffbd5);
  box-shadow: 0 0 1.1em #f9d866;
  transition: width 180ms ease;
}
.loaderTrack div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.78) 50%, transparent 66%);
  transform: translateX(-120%);
  animation: loaderProgressShine 1.4s ease-in-out infinite;
}
.loaderProgress > strong {
  min-width: 3.7em;
  color: #ffe79a;
  font: 900 clamp(9px, 1.02cqw, 18px)/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-shadow: 0 2px 2px #000, 0 0 .55em rgba(255, 201, 61, .68);
}
.preloader.hasError .loaderScarab { filter: drop-shadow(0 0 14px #ff5e4c); }
.preloader.hasError .loaderTrack div { background: linear-gradient(90deg, #701c16, #ff6653); }

.goldAction {
  min-width: clamp(120px, 16cqw, 260px);
  padding: clamp(7px, 1cqw, 15px) clamp(16px, 2.2cqw, 34px);
  border: 2px solid #ffd86f;
  border-radius: 999px;
  color: #251003;
  background: linear-gradient(#fff3b0 0 13%, #f4bf43 43%, #ad5c0b 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 5px rgba(77,31,0,.45), 0 5px 0 #582700, 0 0 20px rgba(255,202,70,.42);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .09em;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.goldAction:hover,
.goldAction:focus-visible { filter: brightness(1.12); box-shadow: inset 0 2px 0 #fff, 0 5px 0 #582700, 0 0 28px rgba(255,224,113,.72); outline: none; }
.goldAction:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 2px 0 #582700, 0 0 16px rgba(255,202,70,.5); }

/* HUD and controls */
.hud { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.meterPatch {
  position: absolute;
  display: grid;
  place-items: center;
  color: #fffdf2;
  text-align: center;
  background: transparent;
}
.meterPatch strong {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 .12em .04em;
  overflow: visible;
  background: none;
  font: 700 clamp(8px, 1.85cqw, 33px)/1 Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 0 2px 2px #000;
}
.balancePatch { left: 12.62%; top: 87.56%; width: 13.58%; height: 5.72%; }
.betPatch { left: 32.236842%; top: 87.56%; width: 7.236842%; height: 5.72%; }
.winPatch { left: 67.13%; top: 87.56%; width: 17.72%; height: 5.72%; }
.balancePatch strong { font-size: clamp(8px, 1.7cqw, 30px); }
.betPatch strong { font-size: clamp(8px, 1.72cqw, 30px); }
.winPatch strong { font-size: clamp(8px, 2.05cqw, 36px); }

.bonusHud { position: absolute; inset: 0; color: #fff2b1; pointer-events: none; opacity: 1; transition: opacity 320ms ease; }
#gameShell.isSunriseReturn .bonusHud { opacity: 0; }
.bonusHudPanel {
  position: absolute;
  z-index: 1;
  /* Each art half has a slightly different transparent top inset. Individual
     panel positions are registered in the 1672x941 cabinet coordinate space. */
  top: var(--bonus-panel-top);
  width: 15%;
  height: 53.2%;
  opacity: 0;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.78));
  animation: hudPanelArrive 620ms cubic-bezier(.16,.85,.25,1.08) forwards;
}
.bonusPanelArt {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../assets/art/ui/bonus-hud-panels.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}
.chosenSymbolPanel { --bonus-panel-top: calc(1.11517% + 5px); left: .4%; transform: translateX(-22%); }
.chosenSymbolPanel .bonusPanelArt { background-position: left center; }
.chosenSymbolViewport {
  position: absolute;
  left: 18.7%;
  top: 23.4%;
  width: 69.9%;
  height: 35.2%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}
.chosenSymbolViewport img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: center;
  animation: chosenSymbolGlow 1.8s ease-in-out infinite;
}
.bonusPanelLabel {
  position: absolute;
  /* Register the copy to the navy inset in the left atlas cell. The plaque
     is intentionally offset to the right of the overall winged artwork. */
  left: 22.33%;
  right: 15.95%;
  top: 69.86%;
  height: 10.37%;
  display: grid;
  place-items: center;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000, 0 0 9px rgba(71,210,255,.74);
  color: #70e9ff;
  font-size: clamp(5px, .66cqw, 11px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: .94;
  white-space: normal;
}
.bonusTotalsPanel { --bonus-panel-top: 4.027301%; right: .4%; transform: translateX(22%); animation-delay: 90ms; }
.bonusTotalsPanel .bonusPanelArt { background-position: right center; }
.bonusTotalsPanel .bonusStat {
  position: absolute;
  left: 13.7%;
  right: 16.6%;
  width: auto;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .3em;
  place-items: center;
  place-content: center;
  text-align: center;
  color: #fff0aa;
}
.bonusTotalsPanel .freeSpinsStat { top: 25.3%; height: 21.7%; }
.bonusTotalsPanel .bonusWinStat { top: 52.95%; height: 22.25%; }
.bonusTotalsPanel .bonusStat span {
  align-self: auto;
  color: #70e9ff;
  font-size: clamp(5px, .59cqw, 11px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}
.bonusTotalsPanel .bonusStat strong {
  align-self: auto;
  width: 100%;
  margin-top: 0;
  text-align: center;
  font: 900 clamp(10px, 1.34cqw, 24px)/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 3px #000, 0 0 11px rgba(255,213,85,.68);
}
.bonusTotalsPanel .freeSpinsStat strong {
  font-size: clamp(22px, 2.65cqw, 46px);
  line-height: .9;
}
@keyframes hudPanelArrive { to { opacity: 1; transform: translateX(0); } }

.controls { position: absolute; z-index: 12; inset: 0; pointer-events: none; }
.artHit {
  position: absolute;
  isolation: isolate;
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}
.controlStateArt {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: var(--control-hover-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 130ms ease, filter 100ms ease;
}
.artHit:is(:hover, :focus-visible):not(:disabled) .controlStateArt { opacity: 1; }
.artHit:focus-visible { outline: none; }
.artHit:active .controlStateArt { filter: brightness(.82) saturate(.9); }
.artHit:disabled { cursor: not-allowed; }
.artHit:disabled .controlStateArt { opacity: 0; }

/* Exact registrations on the supplied 1672 x 941 cabinet art. The matching
   raster overlays must use these source crops without adding outer padding. */
.menuButton { --control-hover-image: url("../assets/art/ui/menu-button-hover.png?v=3"); left: 3.050239%; top: 82.252922%; width: 7.894737%; height: 13.708820%; }
.betDownButton { --control-hover-image: url("../assets/art/ui/bet-down-hover.png?v=3"); left: 28.708134%; top: 87.353879%; width: 3.468900%; height: 6.376196%; }
.betUpButton { --control-hover-image: url("../assets/art/ui/bet-up-hover.png?v=3"); left: 39.473684%; top: 87.353879%; width: 3.468900%; height: 6.376196%; }
.spinButton { --control-hover-image: url("../assets/art/ui/spin-button-hover.png?v=5"); left: 43.540670%; top: 73.857598%; width: 13.038278%; height: 23.910733%; }
.maxBetButton { --control-hover-image: url("../assets/art/ui/max-bet-hover.png?v=3"); left: 56.698565%; top: 82.359192%; width: 9.449761%; height: 13.390011%; border-radius: 14%; }
.autoButton { --control-hover-image: url("../assets/art/ui/auto-button-hover.png?v=3"); left: 86.543062%; top: 82.252922%; width: 8.253589%; height: 13.815090%; }

/* The idle button cannot live only in the cabinet background: its top edge
   overlaps the reel canvas. This source-registered cutout keeps it in the
   controls layer at all times while the child supplies hover and STOP art. */
.spinButton {
  background: url("../assets/art/ui/spin-button.png?v=5") center / 100% 100% no-repeat;
}

.spinButton.isStopping .controlStateArt {
  opacity: 1;
  background-image: url("../assets/art/ui/stop-button.png?v=5");
  transform: translateY(-1px);
}
.spinButton.isStopping:is(:hover, :focus-visible) .controlStateArt {
  background-image: url("../assets/art/ui/stop-button-hover.png?v=5");
}
#autoCountBadge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% - 1px);
  width: 38%;
  height: 38%;
  display: grid;
  place-items: center;
  color: #351404;
  font: 900 clamp(12px, 1.75cqw, 29px)/1 Georgia, serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px rgba(255,250,198,.68), 0 -1px rgba(91,42,4,.72), 0 0 5px rgba(255,232,119,.36);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#autoCountBadge[hidden] { display: none; }

/* Loopback-only deterministic test drawer. It stays above the cabinet and
   normal menus, but below every win, Book, orientation and loading overlay. */
.devPanel {
  position: absolute;
  z-index: 38;
  top: .85%;
  right: .75%;
  display: grid;
  justify-items: end;
  gap: clamp(3px, .34cqw, 6px);
  pointer-events: auto;
}
.devToggle {
  min-width: clamp(45px, 4.7cqw, 78px);
  min-height: clamp(25px, 2.45cqw, 41px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .48em;
  padding: .25em .72em;
  border: clamp(1px, .1cqw, 2px) solid #f2c558;
  clip-path: polygon(8% 0, 92% 0, 100% 25%, 100% 75%, 92% 100%, 8% 100%, 0 75%, 0 25%);
  color: #fff1a6;
  background:
    linear-gradient(120deg, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(#123d6a, #06152b 62%, #020817);
  box-shadow: inset 0 0 0 clamp(1px, .12cqw, 2px) rgba(97,48,7,.85), 0 0 clamp(5px, .55cqw, 10px) rgba(255,194,61,.35), 0 3px 8px rgba(0,0,0,.68);
  font: 900 clamp(7px, .72cqw, 12px)/1 Georgia, serif;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255,215,105,.6);
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms ease;
}
.devToggle i {
  color: #62edf3;
  font: normal 900 1.2em/1 sans-serif;
  transition: transform 180ms ease;
}
.devToggle:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
  filter: brightness(1.2) saturate(1.12);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 clamp(1px, .12cqw, 2px) #8b520c, 0 0 clamp(8px, .82cqw, 15px) rgba(255,213,92,.68), 0 4px 9px rgba(0,0,0,.75);
}
.devToggle:disabled { opacity: .46; cursor: not-allowed; }
.devPanel:not(.isCollapsed) .devToggle i { transform: rotate(45deg); }
.devTools {
  width: clamp(218px, 18.7cqw, 312px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3px, .38cqw, 7px);
  padding: clamp(6px, .7cqw, 12px);
  border: clamp(1px, .13cqw, 2px) solid #dca83e;
  clip-path: polygon(3% 0, 97% 0, 100% 10%, 100% 90%, 97% 100%, 3% 100%, 0 90%, 0 10%);
  color: #f9edc5;
  background:
    radial-gradient(circle at 80% 0, rgba(52,151,191,.18), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(10,38,65,.98), rgba(2,10,23,.99));
  box-shadow: inset 0 0 0 clamp(2px, .22cqw, 4px) rgba(100,50,8,.92), inset 0 0 18px rgba(0,0,0,.72), 0 8px 20px rgba(0,0,0,.75), 0 0 15px rgba(234,177,57,.24);
  animation: panelEnter 180ms cubic-bezier(.18,.8,.25,1.08) both;
}
.devPanel.isCollapsed .devTools { display: none; }
.devTools > strong {
  grid-column: 1 / -1;
  color: #ffd96c;
  font: 900 clamp(7px, .72cqw, 12px)/1 Georgia, serif;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
.devTools > button {
  min-height: clamp(35px, 3.5cqw, 58px);
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  gap: .32em;
  padding: .45em .38em;
  border: 1px solid rgba(222,172,64,.72);
  border-radius: clamp(3px, .32cqw, 6px);
  color: #fff0ab;
  background: linear-gradient(155deg, #174f78, #071a30 68%);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.55);
  font-size: clamp(6px, .65cqw, 11px);
  font-weight: 900;
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.devTools > button i {
  width: 1.72em;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #e8b63d;
  border-radius: 50%;
  color: #4ce8ee;
  background: #04101f;
  font: normal 900 1em/1 Georgia, serif;
  box-shadow: 0 0 5px rgba(68,223,231,.32);
}
.devTools > button:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
  filter: brightness(1.24) saturate(1.15);
  transform: translateY(-1px);
  border-color: #ffe184;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 10px rgba(67,222,232,.4), 0 4px 8px rgba(0,0,0,.62);
}
.devTools > button:active:not(:disabled) { transform: translateY(1px); }
.devTools > button:disabled { opacity: .42; filter: grayscale(.35); cursor: not-allowed; }

/* Panels */
.templePanel {
  position: absolute;
  z-index: 25;
  overflow: hidden;
  border: clamp(1px, .2cqw, 4px) solid #e3a62f;
  clip-path: polygon(3% 0, 97% 0, 100% 7%, 100% 93%, 97% 100%, 3% 100%, 0 93%, 0 7%);
  color: #f9edc5;
  background:
    linear-gradient(125deg, rgba(255,238,164,.04), transparent 32% 70%, rgba(255,211,95,.04)),
    repeating-linear-gradient(0deg, rgba(92,174,202,.018) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, rgba(12,41,65,.98), rgba(3,13,26,.99));
  box-shadow: inset 0 0 0 clamp(2px, .36cqw, 6px) #6b3508, inset 0 0 30px rgba(0,0,0,.75), 0 16px 35px rgba(0,0,0,.75), 0 0 22px rgba(245,181,52,.25);
  animation: panelEnter 240ms cubic-bezier(.18,.8,.25,1.08) both;
}
.templePanel > header {
  min-height: clamp(30px, 3.7cqw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 3% 11%;
  border-bottom: 1px solid rgba(227,166,47,.4);
  color: #ffdc72;
  background: linear-gradient(90deg, transparent, rgba(255,201,73,.08), transparent);
}
.templePanel h2 { margin: 0; font: 900 clamp(13px, 1.65cqw, 28px)/1 Georgia, serif; text-transform: uppercase; letter-spacing: .06em; }
.panelClose {
  position: absolute;
  right: 4%; top: 3%;
  width: clamp(25px, 3cqw, 44px);
  aspect-ratio: 1;
  border: 1px solid #c18728;
  border-radius: 50%;
  color: #ffe39a;
  background: #07192a;
  cursor: pointer;
}
.panelClose:hover,
.panelClose:focus-visible { outline: none; filter: brightness(1.25); box-shadow: 0 0 10px #eeb746; }

.gameMenu { left: 4.2%; bottom: 15.7%; width: 30%; max-height: 67%; }
.menuGrid { display: grid; gap: clamp(3px, .45cqw, 8px); padding: 4% 5% 2%; }
.menuGrid > button {
  min-height: clamp(38px, 4.4cqw, 70px);
  display: grid;
  grid-template-columns: 14% 1fr;
  align-items: center;
  gap: 4%;
  padding: 2.2% 5%;
  border: 1px solid rgba(223,166,55,.34);
  border-radius: 6px;
  color: #f8e9bb;
  text-align: left;
  background: linear-gradient(90deg, rgba(16,62,90,.75), rgba(5,22,40,.8));
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}
.menuGrid > button:hover,
.menuGrid > button:focus-visible { outline: none; filter: brightness(1.22); border-color: #e9b84a; transform: translateX(1%); }
.menuGrid i { color: #55e5e4; font: normal 900 clamp(15px, 2.2cqw, 36px)/1 Georgia, serif; text-align: center; }
.menuGrid span { display: grid; gap: .15em; }
.menuGrid strong { color: #ffdf79; font: 800 clamp(8px, 1cqw, 17px)/1.1 Georgia, serif; text-transform: uppercase; }
.menuGrid small { color: #a9c0cb; font-size: clamp(6px, .68cqw, 11px); }

.volumeMixer { display: grid; gap: clamp(4px, .6cqw, 10px); padding: 3% 7% 6%; border-top: 1px solid rgba(229,169,49,.25); }
.volumeMixer label { display: grid; grid-template-columns: 22% 1fr; align-items: center; gap: 4%; color: #d3dce0; font-size: clamp(6px, .72cqw, 12px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.volumeMixer input { width: 100%; accent-color: #e7b13d; cursor: pointer; }

.autoSpinPanel { right: 3.9%; bottom: 15.4%; width: 24%; }
.autoOptions { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(4px, .65cqw, 10px); padding: 7%; }
.autoOptions button {
  display: grid;
  place-items: center;
  padding: 8% 4%;
  border: 1px solid #c78f2a;
  border-radius: 8px;
  color: #ffdf79;
  background: linear-gradient(#123c5c, #061a2d);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
  font: 900 clamp(14px, 2cqw, 32px)/1 Georgia, serif;
  cursor: pointer;
}
.autoOptions button small { margin-top: .2em; color: #9ccbd3; font: 700 clamp(6px, .65cqw, 11px)/1 sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.autoOptions button:hover,
.autoOptions button:focus-visible { outline: none; filter: brightness(1.25); box-shadow: 0 0 14px rgba(76,222,235,.42); }
.autoRule { display: flex; align-items: center; gap: .5em; padding: 0 8% 7%; color: #b9ced4; font-size: clamp(6px, .73cqw, 12px); }
.autoRule input { accent-color: #dfad3c; }

/* General and win overlays */
.screenOverlay { z-index: 45; display: grid; place-items: center; background: radial-gradient(circle, rgba(7,18,31,.15), rgba(1,4,10,.84)); }
.messageCard { position: relative; width: min(48%, 760px); min-height: 43%; display: grid; place-content: center; justify-items: center; gap: clamp(5px, 1cqw, 16px); padding: 8% 10%; text-align: center; }
.messageCard small { color: #57d8e4; font-size: clamp(7px, .9cqw, 15px); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.messageCard h2 { margin: 0; color: #ffe085; font: 900 clamp(24px, 4.5cqw, 76px)/.96 Georgia, serif; text-shadow: 0 3px 0 #623006, 0 0 18px rgba(255,204,71,.55); }
.messageCard p { max-width: 90%; margin: 0; color: #e7e1ca; font-size: clamp(8px, 1.15cqw, 19px); line-height: 1.45; }
.messageCard > strong { color: #fff4b0; font: 900 clamp(20px, 3.4cqw, 58px)/1 Georgia, serif; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px #f1ad31; }

.retriggerAwardOverlay {
  z-index: 51;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: radial-gradient(circle at 50% 49%, rgba(24, 132, 190, .14) 0 18%, rgba(5, 18, 40, .72) 58%, rgba(0, 2, 8, .9) 100%);
}
.retriggerAwardAura {
  position: absolute;
  z-index: 0;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 248, 173, .9) 0 1.2%, rgba(255, 185, 31, .42) 7%, rgba(43, 199, 229, .14) 25%, transparent 56%),
    radial-gradient(ellipse at 50% 49%, rgba(18, 95, 155, .35), transparent 57%);
  mix-blend-mode: screen;
  animation: retriggerAwardAuraPulse 720ms ease-in-out infinite alternate;
}
.retriggerAwardRays {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 49%;
  width: 74%;
  aspect-ratio: 1;
  opacity: .48;
  background: repeating-conic-gradient(rgba(255, 220, 91, .23) 0 1.5deg, transparent 2.5deg 10deg);
  mask-image: radial-gradient(circle, #000 0 12%, transparent 64%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  animation: retriggerAwardRaysSpin 15s linear infinite;
}
.retriggerAwardPopup {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 64%;
  height: 74%;
  aspect-ratio: 1;
  background: url("../assets/art/ui/bonus-total-win-popup-v1.png") center / contain no-repeat;
  filter:
    drop-shadow(0 1.35cqh 1.15cqh rgba(0, 0, 0, .86))
    drop-shadow(0 0 1.3cqh rgba(255, 196, 42, .72))
    drop-shadow(0 0 3cqh rgba(35, 196, 229, .38));
  animation: retriggerAwardPopupArrive 520ms cubic-bezier(.12, .8, .18, 1.16) both;
}
.retriggerAwardReadout {
  position: absolute;
  inset: 34.5% 18% 25.5%;
  display: grid;
  grid-template-rows: 1.15fr .85fr;
  place-items: center;
  gap: clamp(1px, .25cqw, 4px);
  text-align: center;
}
.retriggerAwardAmount {
  align-self: end;
  min-width: 0;
  display: grid;
  place-items: center;
}
.retriggerAwardDigits {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: clamp(46px, 8.3cqw, 139px);
  filter: drop-shadow(0 .08em .05em rgba(0,0,0,.96)) drop-shadow(0 0 .14em rgba(255,217,70,.92));
}
.retriggerAwardDigits .illustratedCurrencyGlyph.isFallback {
  flex-basis: .5em;
  width: .5em;
  font-size: 1.18em;
  transform: translateY(-.025em);
}
.retriggerAwardReadout > strong {
  align-self: start;
  color: #ffe897;
  font: 900 clamp(24px, 3.55cqw, 59px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 .06em 0 #6e2c04, 0 .13em .2em rgba(0,0,0,.94), 0 0 .22em #ffc332, 0 0 .58em rgba(255,241,151,.58);
  animation: retriggerAwardTitleGlow 620ms ease-in-out infinite alternate;
}
.retriggerAwardOverlay.isExiting { animation: retriggerAwardOverlayExit 450ms cubic-bezier(.4, 0, .72, 1) both; }
.retriggerAwardOverlay.isExiting .retriggerAwardPopup { animation: retriggerAwardPopupExit 450ms cubic-bezier(.4, 0, .72, 1) both; }
.retriggerAwardOverlay.isPaused,
.retriggerAwardOverlay.isPaused *,
.retriggerAwardOverlay.isPaused *::before,
.retriggerAwardOverlay.isPaused *::after { animation-play-state: paused !important; }

.bonusCompleteOverlay {
  z-index: 54;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.bonusCompleteAura {
  position: absolute;
  z-index: 0;
  inset: -6%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(22, 118, 177, .24) 0 18%, rgba(4, 17, 38, .86) 57%, rgba(0, 2, 8, .97) 100%),
    repeating-conic-gradient(from -4deg at 50% 48%, rgba(255, 219, 94, .09) 0 2deg, transparent 3deg 12deg);
  animation: bonusCompleteAuraPulse 1.4s ease-in-out infinite alternate;
}
.bonusCompletePopup {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 82%;
  height: 96%;
  aspect-ratio: 1;
  background: url("../assets/art/ui/bonus-total-win-popup-v1.png") center / contain no-repeat;
  filter:
    drop-shadow(0 1.5cqh 1.3cqh rgba(0, 0, 0, .88))
    drop-shadow(0 0 1.45cqh rgba(255, 194, 34, .62))
    drop-shadow(0 0 3.4cqh rgba(25, 183, 231, .3));
  animation: bonusCompletePopupArrive 760ms cubic-bezier(.12, .78, .18, 1.14) both;
}
.bonusCompleteReadout {
  position: absolute;
  inset: 34% 18.2% 23.5%;
  display: grid;
  grid-template-rows: .8fr 1.2fr;
  place-items: center;
  gap: clamp(2px, .45cqw, 8px);
  text-align: center;
}
.bonusCompleteReadout h2 {
  align-self: end;
  margin: 0;
  color: #ffe68d;
  font: 900 clamp(29px, 4.8cqw, 81px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 .06em 0 #6b2c04,
    0 .13em .2em rgba(0, 0, 0, .92),
    0 0 .2em #ffbd29,
    0 0 .55em rgba(255, 239, 144, .54);
  animation: bonusCompleteTitleGlow 840ms ease-in-out infinite alternate;
}
.bigWinAmount,
.bonusCompleteAmount,
.retriggerAwardAmount {
  --illustrated-digit-sheet: url("../assets/art/ui/numbers.png?v=2");
}
.bonusCompleteAmount {
  align-self: start;
  width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
}
.bonusCompleteDigits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 1em;
  font-size: clamp(34px, 6.6cqw, 111px);
  filter: drop-shadow(0 .085em .05em rgba(0,0,0,.96)) drop-shadow(0 0 .15em rgba(255,219,83,.9));
}
.bonusCompleteAmount[data-length="10"] .bonusCompleteDigits { font-size: clamp(29px, 5.55cqw, 93px); }
.bonusCompleteAmount[data-length="11"] .bonusCompleteDigits,
.bonusCompleteAmount[data-length="12"] .bonusCompleteDigits { font-size: clamp(26px, 5cqw, 84px); }
.bonusCompleteSunrise {
  position: absolute;
  z-index: 5;
  inset: -14%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.bonusCompleteSunrise > i { position: absolute; display: block; }
.sunriseRays {
  left: 50%;
  top: 72%;
  width: 158%;
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(from -3deg, rgba(255, 247, 190, .9) 0 2.1deg, transparent 2.8deg 8.5deg),
    repeating-conic-gradient(from 2deg, rgba(255, 153, 17, .62) 0 1.2deg, transparent 2deg 12deg);
  mix-blend-mode: screen;
  filter: blur(1px) saturate(1.25);
  transform: translate(-50%, -50%) scale(.08) rotate(-10deg);
}
.sunriseDisc {
  left: 50%;
  top: 69%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 44%, #fff 0 7%, #fff6bf 17%, #ffd04a 42%, #ff8610 68%, rgba(255, 96, 0, 0) 72%);
  box-shadow: 0 0 2.6cqw #fff8cf, 0 0 7cqw #ffc43f, 0 0 16cqw #f36b11;
  transform: translate(-50%, -50%) scale(.12);
}
.sunriseHorizon {
  left: 50%;
  top: 69%;
  width: 130%;
  height: 24%;
  background: radial-gradient(ellipse at 50% 50%, #fffce3 0 2%, rgba(255, 219, 99, .94) 7%, rgba(255, 134, 17, .48) 29%, transparent 67%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scaleX(.16);
}
.sunriseVeil {
  inset: -5%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 68%, #fff 0 10%, rgba(255, 249, 213, .99) 31%, rgba(255, 194, 72, .87) 58%, rgba(255, 139, 24, .18) 78%, transparent 100%),
    linear-gradient(rgba(255, 249, 225, .96), rgba(255, 207, 106, .88));
  mix-blend-mode: screen;
}
.bonusCompleteOverlay.isSunrise .bonusCompleteAura { animation: bonusCompleteAuraReturn 1.9s ease both; }
.bonusCompleteOverlay.isSunrise .bonusCompletePopup { animation: bonusCompletePopupReturn 1.9s cubic-bezier(.2, .7, .2, 1) both; }
.bonusCompleteOverlay.isSunrise .bonusCompleteSunrise { animation: bonusCompleteSunriseField 1.9s ease both; }
.bonusCompleteOverlay.isSunrise .sunriseRays { animation: bonusCompleteSunriseRays 1.9s cubic-bezier(.13, .72, .18, 1) both; }
.bonusCompleteOverlay.isSunrise .sunriseDisc { animation: bonusCompleteSunriseDisc 1.9s cubic-bezier(.13, .72, .18, 1) both; }
.bonusCompleteOverlay.isSunrise .sunriseHorizon { animation: bonusCompleteSunriseHorizon 1.9s ease both; }
.bonusCompleteOverlay.isSunrise .sunriseVeil { animation: bonusCompleteSunriseVeil 1.9s ease both; }
.bonusCompleteOverlay.isReduced.isSunrise :is(.bonusCompleteAura, .bonusCompletePopup, .bonusCompleteSunrise, .sunriseRays, .sunriseDisc, .sunriseHorizon, .sunriseVeil) {
  animation-duration: 420ms;
}
.bonusCompleteOverlay.isPaused,
.bonusCompleteOverlay.isPaused *,
.bonusCompleteOverlay.isPaused *::before,
.bonusCompleteOverlay.isPaused *::after { animation-play-state: paused !important; }

.bigWinOverlay {
  z-index: 52;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(37, 162, 204, .12) 0 18%, rgba(8, 28, 57, .72) 55%, rgba(0, 2, 8, .94) 100%);
  isolation: isolate;
}
.bigWinEnergy {
  position: absolute;
  z-index: 0;
  inset: -2%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 251, 184, .93) 0 1.5%, rgba(255, 189, 34, .48) 7%, rgba(31, 196, 232, .22) 26%, transparent 62%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 207, 74, .28), transparent 42%),
    radial-gradient(ellipse at 50% 100%, rgba(29, 186, 233, .22), transparent 46%);
  mix-blend-mode: screen;
  animation: bigWinEnergyPulse 760ms ease-in-out infinite alternate;
}
.bigWinRays {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  width: 140%;
  aspect-ratio: 1;
  opacity: .78;
  background:
    repeating-conic-gradient(from 3deg, rgba(255, 237, 142, .31) 0 2.3deg, transparent 3deg 9.5deg),
    repeating-conic-gradient(from 5deg, rgba(46, 214, 240, .13) 0 1.1deg, transparent 1.8deg 13deg);
  mix-blend-mode: screen;
  filter: blur(1.5px) saturate(1.35);
  transform: translate(-50%, -50%);
  animation: bigRaysSpin 13s linear infinite;
}
.diamondBurst {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.diamondBurst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--diamond-size, 16px);
  aspect-ratio: 1;
  opacity: 0;
  border: max(1px, .12em) solid #fff7af;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96) 0 16%, transparent 17% 48%, rgba(255,255,255,.7) 49% 57%, transparent 58%),
    linear-gradient(45deg, #066fbd 0 22%, #70f7ff 23% 48%, #0879cf 49% 72%, #b6ffff 73% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 .35em #fff8c5, 0 0 .9em #24dff4, 0 0 1.4em rgba(255,190,42,.8);
  animation: diamondLaunch var(--diamond-duration, 1.55s) cubic-bezier(.12,.55,.2,1) var(--diamond-delay, 0s) both;
}
.bigWinPopup {
  position: relative;
  z-index: 3;
  width: auto;
  max-width: 68%;
  height: 92%;
  aspect-ratio: 1335 / 1178;
  background: url("../assets/art/ui/big-win-popup.png") center / contain no-repeat;
  filter:
    drop-shadow(0 1.4cqh 1.2cqh rgba(0,0,0,.78))
    drop-shadow(0 0 1.7cqh rgba(255,196,47,.74))
    drop-shadow(0 0 3.2cqh rgba(36,204,229,.4));
  animation: bigWinPopupArrive 720ms cubic-bezier(.12,.78,.18,1.18) both, bigWinPopupFloat 1.2s 720ms ease-in-out infinite alternate;
}
.bigWinReadout {
  position: absolute;
  z-index: 3;
  inset: 30% 18% 22%;
  display: grid;
  grid-template-rows: 1fr 1.05fr;
  place-items: center;
  gap: clamp(2px, .45cqw, 8px);
  text-align: center;
}
.bigWinReadout h2 {
  align-self: center;
  margin: 0;
  color: #ffe078;
  font: 900 clamp(36px, 6.2cqw, 104px)/.82 Georgia, serif;
  letter-spacing: -.055em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 .055em 0 #7c3b07, 0 .12em .22em #000, 0 0 .22em #ffbf38, 0 0 .5em rgba(255,246,169,.72);
  animation: winTitlePulse .72s ease-in-out infinite alternate;
}
.bigWinAmount {
  align-self: start;
  min-width: 0;
  display: grid;
  place-items: center;
  transition: opacity 600ms ease, transform 600ms ease;
}
.bigWinDigits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 1em;
  font-size: clamp(31px, 6.4cqw, 106px);
  filter: drop-shadow(0 .085em .05em rgba(0,0,0,.94)) drop-shadow(0 0 .12em rgba(255,214,69,.85));
}
.bigWinAmount[data-length="10"] .bigWinDigits { font-size: clamp(28px, 5.55cqw, 92px); }
.bigWinAmount[data-length="11"] .bigWinDigits,
.bigWinAmount[data-length="12"] .bigWinDigits { font-size: clamp(25px, 5.05cqw, 84px); }
.illustratedCurrencyGlyph {
  position: relative;
  flex: 0 0 .72em;
  width: .72em;
  height: 1em;
  display: block;
  overflow: visible;
  margin-inline: -.02em;
  font-size: 1em;
  font-style: normal;
}
.illustratedCurrencyGlyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1em;
  height: 1em;
  background-image: var(--illustrated-digit-sheet);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: var(--glyph-x) var(--glyph-y);
  transform: translateX(-50%);
}
.illustratedCurrencyGlyph.isPunctuation {
  flex-basis: .27em;
  width: .27em;
  margin-inline: -.03em;
}
.illustratedCurrencyGlyph.isPunctuation::before {
  left: 50%;
}
.illustratedCurrencyGlyph.isFallback {
  flex-basis: .42em;
  width: .42em;
  display: grid;
  place-items: center;
  color: #ffe56e;
  font: 900 .68em/1 Georgia, serif;
  text-shadow: 0 .07em #632300, 0 0 .15em #ffca42;
}
.illustratedCurrencyGlyph.isFallback::before { content: none; }
.bigWinOverlay.isExiting {
  pointer-events: none;
  animation: bigWinOverlayExit 600ms cubic-bezier(.4,0,.7,1) both;
}
.bigWinOverlay.isExiting .bigWinPopup {
  animation: bigWinPopupExit 600ms cubic-bezier(.4,0,.7,1) both;
}
.coinShower { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.coinShower i {
  position: absolute;
  top: -12%;
  left: var(--coin-x);
  width: var(--coin-size);
  aspect-ratio: 1;
  border: 2px solid #fff0a0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8b7, #f9c23a 38%, #a85207 75%);
  box-shadow: inset 0 0 3px #7d3b06, 0 0 7px #ffcc51;
  animation: coinFall var(--coin-duration) linear var(--coin-delay) infinite;
}

/* Book reveal */
.bookFeatureOverlay {
  z-index: 60;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: 1500px;
}
.bookScrim { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(5,22,40,.26), rgba(1,3,9,.88)); opacity: 0; transition: opacity 650ms ease; }
.bookFeatureOverlay.is-active .bookScrim { opacity: 1; }
.bookRays {
  position: absolute;
  left: 50%; top: 49%;
  width: 82%; aspect-ratio: 1;
  opacity: 0;
  background: repeating-conic-gradient(rgba(255,218,97,.2) 0 1.4deg, transparent 2deg 9deg);
  mix-blend-mode: screen;
  filter: blur(3px);
  transform: translate(-50%, -50%) scale(.5);
}
.bookFeatureOverlay.is-active .bookRays { animation: bookRaysIn 1s ease forwards, bigRaysSpin 18s 1s linear infinite; }
.bookStage { position: relative; width: 74%; height: 74%; display: grid; place-items: center; transform-style: preserve-3d; }
.closedBook {
  position: absolute;
  z-index: 5;
  width: 39%;
  height: 66%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,188,47,.48));
  transform: translateY(28%) scale(.42) rotate(-8deg);
  transform-origin: center;
}
.phase-summon .closedBook { animation: closedBookSummon 920ms cubic-bezier(.12,.76,.18,1.12) forwards, closedBookFloat 2s 920ms ease-in-out infinite alternate; }
.phase-opening .closedBook { opacity: 1; animation: closedBookOpenAway 620ms cubic-bezier(.32,.02,.55,1) forwards; }
.phase-reveal .closedBook,
.phase-departure .closedBook { display: none; }

.physicalBook {
  position: absolute;
  z-index: 4;
  left: 50%; top: 50%;
  width: 78%;
  aspect-ratio: 2.04;
  opacity: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -46%) rotateX(56deg) scale(.45);
}
.phase-opening .physicalBook { animation: physicalBookArrive 850ms 300ms cubic-bezier(.17,.72,.2,1.08) forwards; }
.phase-reveal .physicalBook { opacity: 1; transform: translate(-50%, -50%) rotateX(12deg) scale(1); animation: openBookBreathe 2.2s ease-in-out infinite alternate; }
.phase-departure .physicalBook { opacity: 1; animation: bookDepart 620ms ease-in forwards; }

.bookBackCover {
  position: absolute;
  inset: 4% 1% 1%;
  border: clamp(4px, .7cqw, 12px) solid #b86c10;
  border-radius: 4% 5% 5% 4%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 9% 91%, rgba(0,0,0,.3)),
    url("../assets/art/symbols/book.png") center 28% / 48% auto repeat-x,
    linear-gradient(145deg, #17639a, #061f4c 50%, #a95408);
  box-shadow: inset 0 0 0 clamp(2px, .45cqw, 8px) #f4bd3e, inset 0 0 32px #000, 0 30px 35px rgba(0,0,0,.75), 0 0 25px rgba(255,190,52,.43);
  transform: translateZ(-16px);
}
.pageBlock {
  position: absolute;
  top: 5%; bottom: 3%; width: 47%;
  border: 2px solid #c9943a;
  background: repeating-linear-gradient(0deg, #c99c4f 0 1px, #f3d893 1px 3px, #ab762f 3px 4px);
  box-shadow: 0 6px 0 #8d5721, 0 12px 0 #5b3516, 0 17px 13px rgba(0,0,0,.55);
}
.pageBlockLeft { left: 3%; border-radius: 7% 1% 1% 5%; transform: rotateY(2deg); }
.pageBlockRight { right: 3%; border-radius: 1% 7% 5% 1%; transform: rotateY(-2deg); }
.openPage,
.turningPage {
  position: absolute;
  top: 3.5%;
  width: 47.5%;
  height: 91%;
  border: 1px solid #d2a459;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.38), transparent 30%),
    repeating-linear-gradient(0deg, rgba(90,49,13,.035) 0 1px, transparent 1px 7px),
    linear-gradient(100deg, #b98237, #f8e7ae 6% 88%, #b2772d);
  box-shadow: inset 0 0 24px rgba(97,52,13,.3), 0 3px 5px rgba(0,0,0,.38);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.openPage::before,
.turningPage::before {
  content: "𓂀 𓋹 𓆣 𓁹 𓃭 𓂀\A𓆣 𓋹 𓁹 𓂀 𓃭 𓆣\A𓁹 𓂀 𓋹 𓆣 𓃭 𓁹";
  white-space: pre;
  position: absolute;
  inset: 13% 12%;
  color: rgba(99,57,16,.32);
  font: clamp(8px, 1.4cqw, 25px)/2 Georgia, serif;
  letter-spacing: .4em;
  text-align: center;
}
.openPage i,
.turningPage i { position: absolute; inset: 4%; border: 1px solid rgba(132,79,23,.25); border-radius: 2%; }
.openPage b,
.turningPage b { position: absolute; left: 14%; right: 14%; top: 48%; height: 1px; background: rgba(122,73,24,.23); box-shadow: 0 18px rgba(122,73,24,.18), 0 -18px rgba(122,73,24,.18); }
.openPageLeft { left: 3%; border-radius: 7% 1% 2% 6%; transform-origin: right center; transform: rotateY(2deg); }
.openPageRight { left: 50%; border-radius: 1% 7% 6% 2%; transform-origin: left center; transform: rotateY(-2deg); }
.turningPage { left: 50%; z-index: 8; border-radius: 1% 7% 6% 2%; transform-origin: left center; transform: rotateY(0deg); }
.turningPage::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(73,38,10,.5), transparent 17% 72%, rgba(255,255,255,.34));
  opacity: 0;
}
.phase-opening .pageOne { animation: pageTurn 720ms 570ms cubic-bezier(.3,.02,.28,1) forwards; }
.phase-opening .pageTwo { animation: pageTurn 760ms 960ms cubic-bezier(.3,.02,.28,1) forwards; }
.phase-opening .pageThree { animation: pageTurn 720ms 1.35s cubic-bezier(.3,.02,.28,1) forwards; }
.phase-opening .pageFour { animation: pageTurn 760ms 1.72s cubic-bezier(.3,.02,.28,1) forwards; }
.phase-opening .pageFive { animation: pageTurn 720ms 2.06s cubic-bezier(.3,.02,.28,1) forwards; }
.phase-opening .turningPage::after { animation: pageCurlLight 720ms ease-in-out forwards; }
.bookSpine {
  position: absolute;
  z-index: 12;
  left: 49%; top: 4%; bottom: 3%; width: 2.2%;
  border-radius: 50%;
  background: linear-gradient(90deg, #5b2c0b, #e4ad3c 45%, #6d360d);
  box-shadow: 0 0 11px rgba(0,0,0,.66), inset 0 0 4px #fff0a0;
  transform: translateZ(7px);
}

.bookInstruction {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  color: #fff0ae;
  opacity: 0;
  font: 800 clamp(8px, 1.1cqw, 18px)/1 Georgia, serif;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 2px 4px #000, 0 0 12px #d48617;
  text-transform: uppercase;
}
.phase-summon .bookInstruction,
.phase-opening .bookInstruction { animation: instructionIn 500ms 500ms ease forwards; }
.phase-reveal .bookInstruction { display: none; }
.bookSkip {
  position: absolute;
  z-index: 14;
  right: 3.2%; bottom: 4%;
  padding: .55em 1.3em;
  border: 1px solid rgba(255,218,112,.7);
  border-radius: 99px;
  color: #fff1bc;
  background: rgba(3,15,27,.68);
  font-size: clamp(7px, .8cqw, 13px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
}
.bookSkip:hover,
.bookSkip:focus-visible { outline: none; background: rgba(20,60,83,.9); box-shadow: 0 0 12px #e9b13e; }
.bookMagicParticles { position: absolute; inset: 0; pointer-events: none; }
.bookMagicParticles i {
  position: absolute;
  left: var(--particle-x); top: var(--particle-y);
  width: var(--particle-size); height: var(--particle-size);
  border-radius: 50%;
  opacity: 0;
  background: #fff2a5;
  box-shadow: 0 0 8px #ffbd2c, 0 0 17px rgba(255,202,54,.58);
}
.bookFeatureOverlay.is-active .bookMagicParticles i { animation: bookSpark var(--particle-duration) ease-in-out var(--particle-delay) infinite; }
.bookFeatureOverlay.is-paused,
.bookFeatureOverlay.is-paused * { animation-play-state: paused !important; }

/* Illustrated Book of Isis feature sequence. The artwork carries every hard
   edge; CSS is limited to motion, light, dust and exact sprite registration. */
.bookFeatureOverlay .bookStage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transition: opacity 240ms ease;
}
.bookFeatureOverlay .closedBook {
  z-index: 8;
  width: min(31%, 440px);
  height: min(62%, 590px);
  display: block;
  opacity: 0;
  object-fit: contain;
  filter: drop-shadow(0 34px 32px rgba(0,0,0,.9)) drop-shadow(0 0 28px rgba(255,187,43,.62));
  transform: translateY(-185%) rotate(-6deg) scale(.72);
  transform-origin: 50% 78%;
}
.bookFeatureOverlay.phase-summon .closedBook {
  display: block;
  animation: isisBookDrop 1.08s cubic-bezier(.17,.72,.18,1.04) forwards;
}
.bookFeatureOverlay.phase-summon.has-impacted .closedBook {
  opacity: 1;
  transform: translateY(1%) rotate(0) scale(1);
}
.bookFeatureOverlay.phase-opening .closedBook {
  display: block;
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  animation: hdClosedBookOpenAway var(--book-open-duration, 1760ms) cubic-bezier(.22,.72,.2,1) both;
}
.bookFeatureOverlay:is(.phase-pages,.phase-reveal,.phase-doors-closing,.phase-doors-opening,.phase-departure) .closedBook {
  display: none;
}
.openingBookSprite {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 49%;
  /* The full 1664px illustration stays at high source density throughout the
     opening. Motion comes from 3D unfolding, never from enlarging atlas cells. */
  width: min(75.4%, 1014px);
  aspect-ratio: 1;
  display: none;
  opacity: 0;
  background: url("../assets/art/ui/book-open-final-hd-v1.png") 50% 50% / 100% 100% no-repeat;
  filter: drop-shadow(0 35px 32px rgba(0,0,0,.86)) drop-shadow(0 0 31px rgba(255,193,51,.55));
  transform: translate(-50%, -50%);
  transform-origin: 50% 70%;
  will-change: opacity, transform;
}
.bookFeatureOverlay:is(.phase-opening,.phase-pages,.phase-reveal,.phase-doors-closing) .openingBookSprite { display: block; }
.bookFeatureOverlay.phase-opening .openingBookSprite {
  animation: hdBookOpen var(--book-open-duration, 1760ms) cubic-bezier(.2,.72,.18,1) both;
}
.bookFeatureOverlay:is(.phase-pages,.phase-reveal,.phase-doors-closing) .openingBookSprite {
  opacity: 1;
  animation: openSpriteBreathe 1.6s ease-in-out infinite alternate;
}
.pageSelectionStage {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 49%;
  /* This is the original 320px logical frame, registered exactly beneath the
     padded sprite visual above. Page coordinates are measured in this box. */
  width: min(58%, 780px);
  aspect-ratio: 1;
  display: none;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.bookFeatureOverlay:is(.phase-pages,.phase-reveal,.phase-doors-closing) .pageSelectionStage { display: grid; }
.bookFeatureOverlay:is(.phase-pages,.phase-reveal,.phase-doors-closing) .pageSelectionStage {
  animation: pageStageBreathe 1.6s ease-in-out infinite alternate;
}
.pageAura {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,202,.7), rgba(255,193,42,.27) 42%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: pageAuraPulse 900ms ease-in-out infinite alternate;
}
.pageUnderSymbol {
  position: absolute;
  z-index: 3;
  left: 60%;
  top: 50.46875%;
  width: 20%;
  height: 22.8125%;
  object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(255,199,52,.92));
  transform: translate(-50%, -50%);
}
.pageFlipLeaf {
  --page-turn-duration: 320ms;
  position: absolute;
  z-index: 4;
  left: 42.1875%;
  top: 25%;
  width: 37.1875%;
  height: 51.875%;
  overflow: hidden;
  opacity: 0;
  border-radius: 4% 48% 46% 4%;
  /* This is the exact right-page region from the same HD open-book artwork.
     It keeps the paper texture, colour and edges registered while it turns. */
  background-image: url("../assets/art/ui/book-open-final-hd-v1.png");
  background-repeat: no-repeat;
  background-size: 349.58% 250.60%;
  background-position: 61.616% 51.197%;
  box-shadow: 0 5px 10px rgba(0,0,0,.42);
  clip-path: polygon(2% 2%, 94% 3%, 100% 94%, 2% 98%);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.pageFlipSymbol {
  position: absolute;
  z-index: 1;
  left: 21.008403%;
  top: 27.108434%;
  width: 53.781513%;
  height: 43.975904%;
  object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(255,199,52,.92));
  backface-visibility: hidden;
}
.pageFlipLeaf.is-turning { animation: illustratedPageFlick var(--page-turn-duration) cubic-bezier(.3,.02,.28,1) both; }
.pageFlipLeaf.is-final-turn { filter: drop-shadow(0 0 18px rgba(255,211,89,.68)); }
.pageFreeSpinsAward {
  position: absolute;
  z-index: 3;
  /* Optical centre of the left parchment in the 1280px page-registration
     crop. This deliberately does not mirror the symbol's logical box: the
     HD book artwork is asymmetrically padded inside its square canvas. */
  left: 26%;
  top: 46.6%;
  width: 27%;
  height: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .45cqw, 7px);
  opacity: 0;
  color: #7a3e08;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,248,194,.9), 0 2px 2px rgba(79,35,4,.22);
  transform: translate(-50%, -50%);
}
.pageFreeSpinsValue {
  color: #9b550b;
  font: 900 clamp(24px, 3.8cqw, 60px)/.86 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}
.pageFreeSpinsAward span {
  font: 900 clamp(8px, 1.15cqw, 18px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .095em;
  white-space: nowrap;
}
.bookFeatureOverlay.phase-reveal .pageFreeSpinsAward,
.bookFeatureOverlay.phase-doors-closing .pageFreeSpinsAward {
  animation: pageFreeSpinsAwardIn var(--page-award-fade-duration, 600ms) ease-out both;
}
.bookFeatureOverlay.phase-doors-closing .pageSelectionStage,
.bookFeatureOverlay.phase-doors-closing .openingBookSprite { opacity: .82; }
.bookFeatureOverlay .bookInstruction {
  left: 10%;
  right: 10%;
  bottom: 6.5%;
  z-index: 14;
  opacity: 0;
  color: #fff0ae;
  font: 800 clamp(8px, 1.08cqw, 18px)/1.2 Georgia, serif;
  letter-spacing: .13em;
  text-shadow: 0 2px 4px #000, 0 0 14px #d48617;
}
.bookFeatureOverlay:is(.phase-summon,.phase-opening,.phase-pages) .bookInstruction { animation: instructionIn 420ms 320ms ease forwards; }
.bookFeatureOverlay:is(.phase-reveal,.phase-doors-closing,.phase-doors-opening) .bookInstruction { display: none; }
.bookImpactDust {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bookImpactDust i {
  position: absolute;
  left: var(--dust-x);
  top: 67%;
  width: var(--dust-size);
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,214,145,.68), rgba(159,105,44,.27) 48%, transparent 72%);
  filter: blur(5px);
}
.bookFeatureOverlay.has-impacted .bookImpactDust i { animation: impactDustBurst 1.1s ease-out var(--dust-delay) both; }
.tombDoors {
  position: absolute;
  z-index: 30;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.tombDoor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #080704;
  background-image: url("../assets/art/ui/bonus-transition-doors-v2.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  filter: drop-shadow(0 0 36px rgba(0,0,0,.94));
  backface-visibility: hidden;
  will-change: transform;
}
.tombDoorLeft { left: 0; background-position: left center; transform: translateX(-101%); }
.tombDoorRight { right: 0; background-position: right center; transform: translateX(101%); }
.phase-doors-closing .tombDoorLeft {
  animation: tombDoorCloseLeft var(--door-close-duration, 960ms) cubic-bezier(.2,.74,.14,1) forwards;
}
.phase-doors-closing .tombDoorRight {
  animation: tombDoorCloseRight var(--door-close-duration, 960ms) cubic-bezier(.2,.74,.14,1) forwards;
}
.phase-doors-opening .tombDoorLeft {
  transform: translateX(0);
  animation: tombDoorOpenLeft var(--door-open-duration, 1100ms) cubic-bezier(.68,.01,.78,.3) forwards;
}
.phase-doors-opening .tombDoorRight {
  transform: translateX(0);
  animation: tombDoorOpenRight var(--door-open-duration, 1100ms) cubic-bezier(.68,.01,.78,.3) forwards;
}
.doorSeamImpact {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.doorSeamFlash {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  bottom: 0;
  width: max(3px, .3cqw);
  opacity: 0;
  background: linear-gradient(180deg, transparent, #ffe387 8%, #fffbe3 50%, #ffc728 92%, transparent);
  box-shadow: 0 0 9px #fff, 0 0 24px #ffd541, 0 0 58px #ef9a16, 0 0 110px rgba(255,126,0,.72);
  transform: translateX(-50%);
}
.doorSeamSpark {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.06);
  background: radial-gradient(circle, #fff 0 2%, #fff2a7 3%, rgba(255,177,29,.92) 7%, rgba(255,105,0,.32) 20%, transparent 58%);
  filter: blur(.25px) drop-shadow(0 0 14px #ffbe32);
  mix-blend-mode: screen;
}
.doorSeamSpark::before,
.doorSeamSpark::after {
  content: "";
  position: absolute;
  inset: 41% -22%;
  background: linear-gradient(90deg, transparent, #ffd95d 36%, #fff 50%, #ffc538 64%, transparent);
  clip-path: polygon(0 48%, 44% 42%, 50% 0, 56% 42%, 100% 49%, 56% 57%, 50% 100%, 44% 57%);
}
.doorSeamSpark::after { transform: rotate(37deg) scale(.72); }
.doorDebris {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.doorDebris i {
  position: absolute;
  left: 50%;
  top: var(--door-debris-y);
  width: var(--door-debris-size);
  height: calc(var(--door-debris-size) * .62);
  opacity: 0;
  background: linear-gradient(135deg, #ffe18a, #9e621d 48%, #3f210d);
  box-shadow: 0 0 5px rgba(255,196,73,.72);
  clip-path: polygon(8% 14%, 100% 0, 77% 100%, 0 74%);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.phase-doors-closing .doorSeamFlash {
  animation: doorSeamIgnite calc(var(--door-close-duration, 960ms) + 220ms) ease-out both;
}
.phase-doors-closing .doorSeamSpark {
  animation: doorSparkImpact 460ms cubic-bezier(.1,.72,.2,1) var(--door-impact-delay, 810ms) both;
}
.phase-doors-closing .doorDebris i {
  animation: doorDebrisBurst var(--door-debris-duration) cubic-bezier(.12,.62,.18,1) calc(var(--door-impact-delay, 810ms) + var(--door-debris-delay)) both;
}
.phase-doors-opening .doorSeamFlash { animation: doorSeamRelease 480ms ease-out both; }
.bookFeatureOverlay:is(.phase-reveal,.phase-doors-closing,.phase-doors-opening,.phase-departure) .bookSkip {
  opacity: 0;
  pointer-events: none;
}
.bookFeatureOverlay.phase-doors-opening .bookStage,
.bookFeatureOverlay.phase-doors-opening .bookRays,
.bookFeatureOverlay.phase-doors-opening .bookMagicParticles,
.bookFeatureOverlay.phase-doors-opening .bookImpactDust {
  opacity: 0;
  visibility: hidden;
}
.bookFeatureOverlay.phase-doors-opening .bookRays { animation: none; }
.bookFeatureOverlay.phase-doors-opening .bookScrim { opacity: 0; transition-duration: 300ms; }
.bookFeatureOverlay.phase-departure {
  opacity: 0;
  visibility: hidden;
  background: transparent;
}

@keyframes isisBookDrop {
  0% { opacity: 0; transform: translateY(-185%) rotate(-7deg) scale(.7); }
  48% { opacity: 1; transform: translateY(-18%) rotate(2deg) scale(.96); }
  58% { transform: translateY(4%) rotate(0) scale(1.06,.92); }
  70% { transform: translateY(-4%) scale(.98,1.03); }
  83% { transform: translateY(1.6%) scale(1.01,.98); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes hdClosedBookOpenAway {
  0%, 12% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: brightness(1); }
  24% { opacity: .58; transform: translateY(1%) perspective(900px) rotateX(24deg) scale(.9,.7); filter: brightness(1.55); }
  34%, 100% { opacity: 0; transform: translateY(5%) perspective(900px) rotateX(58deg) scale(.54,.26); filter: brightness(2.1); }
}
@keyframes hdBookOpen {
  0%, 18% {
    opacity: 0;
    transform: translate(-50%, -41%) perspective(1100px) rotateX(68deg) scale(.5,.3);
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.82)) brightness(1.65);
  }
  32% {
    opacity: .82;
    transform: translate(-50%, -43%) perspective(1100px) rotateX(56deg) scale(.6,.42);
    filter: drop-shadow(0 21px 22px rgba(0,0,0,.84)) brightness(1.48);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -45%) perspective(1100px) rotateX(47deg) scale(.68,.52);
    filter: drop-shadow(0 24px 24px rgba(0,0,0,.85)) brightness(1.36);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -49%) perspective(1100px) rotateX(16deg) scale(.95,.9);
    filter: drop-shadow(0 31px 29px rgba(0,0,0,.87)) brightness(1.08);
  }
  88% { transform: translate(-50%, -50.5%) perspective(1100px) rotateX(-2deg) scale(1.015,1.02); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(1100px) rotateX(0) scale(1);
    filter: drop-shadow(0 35px 32px rgba(0,0,0,.86)) drop-shadow(0 0 31px rgba(255,193,51,.55));
  }
}
@keyframes openSpriteBreathe {
  from { transform: translate(-50%, -50%) scale(.985); filter: drop-shadow(0 31px 29px rgba(0,0,0,.86)) drop-shadow(0 0 24px rgba(255,193,51,.48)); }
  to { transform: translate(-50%, -51%) scale(1.015); filter: drop-shadow(0 36px 33px rgba(0,0,0,.9)) drop-shadow(0 0 38px rgba(255,205,71,.7)); }
}
@keyframes pageStageBreathe {
  from { transform: translate(-50%, -50%) scale(.985); }
  to { transform: translate(-50%, -51%) scale(1.015); }
}
@keyframes illustratedPageFlick {
  0% { opacity: 1; transform: perspective(680px) rotateY(0deg) skewY(0); }
  48% { opacity: 1; transform: perspective(680px) rotateY(-88deg) skewY(-3deg); }
  52% { opacity: 1; transform: perspective(680px) rotateY(-96deg) skewY(-3deg); }
  92% { opacity: .94; transform: perspective(680px) rotateY(-178deg) skewY(0); }
  100% { opacity: 0; transform: perspective(680px) rotateY(-180deg) skewY(0); }
}
@keyframes pageAuraPulse { from { opacity: .45; transform: scale(.88); } to { opacity: 1; transform: scale(1.16); } }
@keyframes pageFreeSpinsAwardIn {
  from { opacity: 0; transform: translate(-50%, -44%); filter: blur(5px) brightness(1.65); }
  to { opacity: 1; transform: translate(-50%, -50%); filter: blur(0) brightness(1); }
}
@keyframes impactDustBurst {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.22); }
  18% { opacity: .88; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dust-drift)), calc(0px - var(--dust-rise))) scale(2.2); }
}
@keyframes tombDoorCloseLeft {
  0% { transform: translateX(-101%); }
  68% { transform: translateX(-6%); }
  84.375% { transform: translateX(0); }
  89% { transform: translateX(1.05%); }
  95% { transform: translateX(-.28%); }
  100% { transform: translateX(0); }
}
@keyframes tombDoorCloseRight {
  0% { transform: translateX(101%); }
  68% { transform: translateX(6%); }
  84.375% { transform: translateX(0); }
  89% { transform: translateX(-1.05%); }
  95% { transform: translateX(.28%); }
  100% { transform: translateX(0); }
}
@keyframes tombDoorOpenLeft { from { transform: translateX(0); } to { transform: translateX(-101%); } }
@keyframes tombDoorOpenRight { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes doorSeamIgnite {
  0%, 63% { opacity: 0; }
  67% { opacity: .14; }
  70% { opacity: 1; }
  78% { opacity: .48; }
  100% { opacity: .12; }
}
@keyframes doorSparkImpact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03) rotate(-8deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(3deg); }
  42% { opacity: .72; transform: translate(-50%, -50%) scale(.78) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(8deg); }
}
@keyframes doorDebrisBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0); }
  12% { opacity: 1; }
  68% { opacity: .92; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--door-debris-drift-x)), calc(-50% + var(--door-debris-drift-y))) scale(.14) rotate(var(--door-debris-spin));
  }
}
@keyframes doorSeamRelease { 0% { opacity: 1; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(18); } }

/* Paytable */
dialog {
  width: min(88vw, 1420px);
  height: min(86vh, 780px);
  padding: 0;
  border: 0;
  color: #f7ebc6;
  background: transparent;
  overflow: visible;
}
dialog::backdrop { background: rgba(0,3,9,.84); backdrop-filter: blur(5px); }
.paytableFrame {
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: clamp(2px, .3vw, 5px) solid #e2a633;
  clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
  background:
    linear-gradient(135deg, rgba(255,229,133,.035), transparent 30% 70%, rgba(255,229,133,.03)),
    linear-gradient(155deg, #0c314f, #03101f 70%);
  box-shadow: inset 0 0 0 clamp(3px, .55vw, 9px) #663307, inset 0 0 45px #000, 0 25px 60px #000;
}
.paytableFrame > header { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.1em; min-height: 15%; padding: 2% 8%; border-bottom: 1px solid rgba(224,165,46,.45); background: linear-gradient(90deg, transparent, rgba(255,204,80,.08), transparent); }
.paytableFrame > header > span { color: #55e2e2; font-size: clamp(25px, 4vw, 64px); text-shadow: 0 0 15px #0f7d96; }
.paytableFrame > header div { display: grid; text-align: center; }
.paytableFrame > header small { color: #5cdee4; font-size: clamp(8px, .9vw, 14px); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.paytableFrame > header h2 { margin: 0; color: #ffdc70; font: 900 clamp(22px, 3.2vw, 52px)/1 Georgia, serif; text-shadow: 0 3px #642e04; }
#closePaytableButton { position: absolute; right: 4%; top: 27%; width: clamp(32px, 4vw, 54px); aspect-ratio: 1; border: 1px solid #d19a30; border-radius: 50%; color: #ffe59b; background: #06182b; font-size: clamp(18px, 2.2vw, 34px); cursor: pointer; }
#closePaytableButton:hover,
#closePaytableButton:focus-visible { outline: none; filter: brightness(1.3); box-shadow: 0 0 12px #e3ae3c; }
.paytableContent { min-height: 0; padding: 2.4% 4%; overflow: auto; scrollbar-color: #b97b1f #061322; }
.paytablePage { min-height: 100%; display: grid; align-content: center; gap: clamp(8px, 1.2vw, 18px); animation: pageContentIn 220ms ease both; }
.paytablePage > h3 { margin: 0; color: #ffdc73; font: 900 clamp(20px, 3vw, 46px)/1 Georgia, serif; text-align: center; text-transform: uppercase; }
.paytablePage > p { max-width: 920px; margin: 0 auto; color: #bcd1d3; font-size: clamp(10px, 1.15vw, 17px); line-height: 1.5; text-align: center; }
.symbolPayGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(7px, 1vw, 15px); }
.symbolPayCard { min-height: 150px; display: grid; grid-template-columns: minmax(70px, 42%) 1fr; align-items: center; gap: 3%; padding: 4%; border: 1px solid rgba(218,157,46,.36); border-radius: 9px; background: linear-gradient(135deg, rgba(19,69,96,.72), rgba(3,18,34,.8)); box-shadow: inset 0 0 14px rgba(0,0,0,.5); }
.symbolPayCard img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px #000); }
.symbolPayCard div { display: grid; gap: .3em; }
.symbolPayCard h4 { margin: 0; color: #ffdc74; font: 900 clamp(10px, 1.2vw, 18px)/1 Georgia, serif; text-transform: uppercase; }
.symbolPayCard p { margin: 0; color: #e7e3ce; font-size: clamp(8px, .9vw, 14px); line-height: 1.45; }
.featureRules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 18px); }
.featureRule { display: grid; align-content: start; justify-items: center; gap: .5em; padding: 6%; border: 1px solid rgba(225,165,48,.4); border-radius: 10px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(32,102,132,.4), rgba(3,15,29,.82) 70%); }
.featureRule img { width: min(58%, 180px); aspect-ratio: 1; object-fit: contain; }
.featureRule h4 { margin: 0; color: #ffdc75; font: 900 clamp(12px, 1.4vw, 21px)/1 Georgia, serif; }
.featureRule p { margin: 0; color: #bed0d0; font-size: clamp(9px, 1vw, 15px); line-height: 1.45; }
.lineDiagram { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1vw, 15px); }
.lineCard { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4%; padding: 3%; border: 1px solid rgba(219,158,45,.35); border-radius: 8px; background: rgba(2,17,31,.72); }
.lineCard > strong { width: 2.3em; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font: 900 clamp(11px, 1.3vw, 19px)/1 Georgia, serif; }
.miniLine { position: relative; height: clamp(42px, 6vw, 82px); }
.miniLine i { position: absolute; z-index: 2; left: var(--line-x); top: var(--line-y); width: clamp(6px, .75vw, 11px); aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; transform: translate(-50%, -50%); }
.miniLine svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.infoGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.2vw, 18px); }
.infoGrid article { padding: 5%; border: 1px solid rgba(217,157,46,.34); border-radius: 9px; background: rgba(5,27,45,.72); }
.infoGrid h4 { margin: 0 0 .4em; color: #ffdc72; font: 900 clamp(12px, 1.35vw, 20px)/1 Georgia, serif; }
.infoGrid p { margin: 0; color: #bfd1d3; font-size: clamp(9px, 1vw, 15px); line-height: 1.5; }
.paytableTabs { min-height: 11%; display: flex; justify-content: center; align-items: center; gap: 1%; padding: 1.2% 5%; border-top: 1px solid rgba(222,162,46,.37); }
.paytableTabs button { min-width: 9%; padding: .6em 1em; border: 1px solid #a8711e; border-radius: 99px; color: #b9ccce; background: #06192b; font-size: clamp(8px, .9vw, 14px); font-weight: 850; cursor: pointer; }
.paytableTabs button:hover,
.paytableTabs button:focus-visible,
.paytableTabs button.isActive { outline: none; color: #fff1ac; border-color: #f0c04d; background: #123c58; box-shadow: 0 0 9px rgba(69,221,231,.35); }

/* Orientation */
.orientationHint { position: absolute; z-index: 95; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1em; color: #ffeda5; text-align: center; background: rgba(2,6,14,.9); }
.orientationHint span { font-size: clamp(40px, 15cqw, 120px); animation: rotateHint 1.4s ease-in-out infinite alternate; }
.orientationHint strong { font: 900 clamp(13px, 4cqw, 30px)/1.2 Georgia, serif; text-transform: uppercase; letter-spacing: .08em; }

/* Animations */
@keyframes sunBreathe {
  to {
    opacity: .94;
    filter: blur(2.4px) brightness(1.13);
    transform: translate(-50%, -50%) scale(1.055);
  }
}
@keyframes loaderArrive { from { opacity: 0; transform: translateY(5%) scale(.92); } }
@keyframes loaderRaysRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes loaderDustDrift { to { opacity: .68; transform: translate3d(1.5%, -2%, 0) scale(1.03); } }
@keyframes loaderTempleDepart {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(1.025); filter: brightness(1.35); }
  100% { opacity: 0; transform: scale(1.12); filter: brightness(2.3) blur(5px); }
}
@keyframes loaderPortalBurst {
  0% { opacity: .34; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.55) rotate(8deg); }
}
@keyframes loaderSealSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes loaderProgressShine {
  0%, 30% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}
@keyframes scarabHover { to { transform: translateY(-8%) scale(1.04); } }
@keyframes hudArrive { from { opacity: 0; transform: translateY(-25%) scale(.85); } }
@keyframes chosenSymbolGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(246,200,64,.62)); }
  50% { filter: brightness(1.08) drop-shadow(0 0 11px rgba(255,224,110,.9)) drop-shadow(0 0 3px rgba(112,233,255,.58)); }
}
@keyframes stopPulse { to { transform: scale(1.06); } }
@keyframes panelEnter { from { opacity: 0; transform: translateY(5%) scale(.96); } }
@keyframes retriggerAwardAuraPulse { to { opacity: .82; filter: brightness(1.3) saturate(1.18); transform: scale(1.04); } }
@keyframes retriggerAwardRaysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes retriggerAwardPopupArrive {
  0% { opacity: 0; transform: translateY(9%) scale(.38) rotate(-2deg); filter: brightness(2.2) blur(6px); }
  62% { opacity: 1; transform: translateY(-1.5%) scale(1.045) rotate(.4deg); filter: brightness(1.28) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes retriggerAwardTitleGlow { to { filter: brightness(1.22); transform: scale(1.035); } }
@keyframes retriggerAwardOverlayExit { to { opacity: 0; filter: brightness(1.7) blur(3px); } }
@keyframes retriggerAwardPopupExit { to { opacity: 0; transform: translateY(-5%) scale(1.14); filter: brightness(2.35) blur(5px); } }
@keyframes bonusCompleteAuraPulse { to { filter: brightness(1.15) saturate(1.12); transform: scale(1.02); } }
@keyframes bonusCompletePopupArrive {
  0% { opacity: 0; transform: translateY(10%) scale(.58); filter: brightness(2.1) blur(5px); }
  63% { opacity: 1; transform: translateY(-1.4%) scale(1.035); filter: brightness(1.22) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bonusCompleteTitleGlow { to { filter: brightness(1.2); transform: scale(1.025); } }
@keyframes bonusCompleteAuraReturn {
  0%, 34% { opacity: 1; filter: brightness(1); }
  60% { opacity: .8; filter: brightness(1.65) saturate(1.25); }
  100% { opacity: 0; filter: brightness(2); }
}
@keyframes bonusCompletePopupReturn {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  24% { opacity: .9; transform: translateY(-3%) scale(1.04); filter: brightness(1.6); }
  36% { opacity: 0; transform: translateY(-7%) scale(1.15); filter: brightness(2.6) blur(5px); }
  100% { opacity: 0; transform: translateY(-9%) scale(1.18); filter: brightness(2.6) blur(6px); }
}
@keyframes bonusCompleteSunriseField {
  0% { opacity: 0; }
  7%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bonusCompleteSunriseRays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(-10deg); }
  15% { opacity: .72; }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
  74% { opacity: .78; transform: translate(-50%, -50%) scale(1.42) rotate(9deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(13deg); }
}
@keyframes bonusCompleteSunriseDisc {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  10% { opacity: 1; }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  70% { opacity: .84; transform: translate(-50%, -115%) scale(2.4); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(3.2); }
}
@keyframes bonusCompleteSunriseHorizon {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.16); }
  15% { opacity: .9; }
  36% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  76% { opacity: .58; transform: translate(-50%, -88%) scale(1.18, 1.55); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.35, 1.9); }
}
@keyframes bonusCompleteSunriseVeil {
  0%, 13% { opacity: 0; }
  32% { opacity: .98; }
  58% { opacity: .94; }
  78% { opacity: .42; }
  100% { opacity: 0; }
}
@keyframes bigRaysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bigWinEnergyPulse { to { filter: brightness(1.32) saturate(1.24); transform: scale(1.045); } }
@keyframes bigWinPopupArrive {
  0% { opacity: 0; transform: translateY(12%) scale(.28) rotate(-3deg); filter: brightness(2.2) blur(6px); }
  62% { opacity: 1; transform: translateY(-2%) scale(1.045) rotate(.5deg); filter: brightness(1.32) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes bigWinPopupFloat { to { transform: translateY(-1.25%) scale(1.012); filter: drop-shadow(0 1.5cqh 1.2cqh rgba(0,0,0,.75)) drop-shadow(0 0 2.1cqh rgba(255,211,75,.92)) drop-shadow(0 0 3.8cqh rgba(36,204,229,.52)); } }
@keyframes winTitlePulse { to { transform: scale(1.04); filter: brightness(1.18); } }
@keyframes diamondLaunch {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.15); }
  12% { opacity: 1; }
  58% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--diamond-x)), calc(-50% + var(--diamond-y))) rotate(var(--diamond-rotate, 320deg)) scale(var(--diamond-scale, 1)); }
}
@keyframes bigWinOverlayExit { to { opacity: 0; filter: brightness(1.65) blur(4px); } }
@keyframes bigWinPopupExit { to { opacity: 0; transform: translateY(-5%) scale(1.12); filter: brightness(2.2) blur(4px); } }
@keyframes coinFall { from { transform: translate3d(0,-10%,0) rotateY(0) rotateZ(0); } to { transform: translate3d(var(--coin-drift), 125vh, 0) rotateY(1080deg) rotateZ(520deg); } }
@keyframes bookRaysIn { to { opacity: .62; transform: translate(-50%, -50%) scale(1); } }
@keyframes closedBookSummon { 0% { opacity: 0; transform: translateY(34%) scale(.28) rotate(-11deg); } 65% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); } }
@keyframes closedBookFloat { to { transform: translateY(-3%) scale(1.025) rotate(-1deg); filter: drop-shadow(0 34px 31px rgba(0,0,0,.82)) drop-shadow(0 0 34px rgba(255,202,65,.73)); } }
@keyframes closedBookOpenAway { 0% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); } 55% { opacity: 1; transform: translateY(-4%) scale(1.08) rotate(0); } 100% { opacity: 0; transform: translateY(-3%) scale(1.32) rotateX(62deg); } }
@keyframes physicalBookArrive { 0% { opacity: 0; transform: translate(-50%, -46%) rotateX(65deg) scale(.38); } 45% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) rotateX(12deg) scale(1); } }
@keyframes openBookBreathe { to { transform: translate(-50%, -52%) rotateX(10deg) scale(1.02); filter: drop-shadow(0 0 10px rgba(255,205,75,.28)); } }
@keyframes bookDepart { to { opacity: 0; transform: translate(-50%, -62%) rotateX(28deg) scale(.72); filter: blur(4px); } }
@keyframes pageTurn { 0% { transform: rotateY(0); } 46% { transform: rotateY(-86deg) translateZ(18px); filter: brightness(1.18); } 100% { transform: rotateY(-178deg); z-index: 2; } }
@keyframes pageCurlLight { 0%,100% { opacity: 0; } 43%,64% { opacity: 1; } }
@keyframes instructionIn { to { opacity: 1; } }
@keyframes bookSpark { 0% { opacity: 0; transform: translate(0,32px) scale(.3); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--particle-drift), -110px) scale(1.2); } }
@keyframes pageContentIn { from { opacity: 0; transform: translateY(5px); } }
@keyframes rotateHint { to { transform: rotate(90deg); } }

@media (max-aspect-ratio: 1/1) and (max-width: 760px) {
  #gameShell { width: 100vw; max-height: 100dvh; }
}

@media (max-height: 520px) {
  .gameMenu { bottom: 10%; max-height: 83%; }
  .autoSpinPanel { bottom: 11%; }
  .loaderCard { width: 50%; min-height: 68%; padding-block: 4%; }
  dialog { height: 94vh; }
  .paytableFrame > header { min-height: 12%; }
  .symbolPayCard { min-height: 112px; }
}

@media (pointer: coarse) {
  .artHit::before { content: ""; position: absolute; inset: -7%; }
  .paylineMarker::before { content: ""; position: absolute; inset: -12%; }
  .bookSkip { padding: .8em 1.5em; }
}

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