/* Aurora Peak (/casino/aurora): the reels set into the ice slab under the northern lights, the seven band badges above
   them, the spins plaque under the logo, the fox, and the effects that play over it all (js/casino/aurora.js). Art
   lives in /casino/slots/aurora/. */

.sl-aurora { --f1: #0d2238; --f2: #7fd3ff; --f3: #eafaff; --au-ice: #bff3ff; }

/* ----- the stage: the slab is lined up behind the reels (aurora.js alignSlab), the logo and the plaque on the left */
.sl-aurora .sl-stage { height: clamp(600px, calc(100vh - 300px), 940px); }
/* on a wide screen the game breaks out of the page column into a landscape stage centred on the page: the peaks, the
   lake and the sky fill the sides */
@media (min-width: 1100px) {
  .sl.sl-aurora { width: min(calc(100vw - 64px), 1800px); margin-left: calc(50% - min(calc(50vw - 32px), 900px)); }
}
.sl-aurora .sl-bg { inset: 0; animation: none; background-repeat: no-repeat; background-color: #050a14; transition: filter .6s; }
.sl-aurora .sl-bg::after { background: linear-gradient(180deg, rgba(4, 6, 14, .3), rgba(4, 6, 14, 0) 18%, rgba(4, 6, 14, 0) 80%, rgba(4, 6, 14, .6)); }
.sl-aurora .sl-stage.bonus .sl-bg { filter: none; }
.sl-aurora .sl-meter { display: none; }
.sl-aurora .sl-logo { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .75)) drop-shadow(0 0 14px rgba(127, 227, 255, .35)); }
.sl-aurora .sl-board { padding: clamp(58px, 8.5vh, 86px) 16px 10px; }
.sl-aurora .sl-frame { padding: 6px; border: 0; border-radius: 10px; background: linear-gradient(180deg, rgba(8, 16, 30, .5), rgba(6, 12, 24, .62)); box-shadow: inset 0 0 0 1px rgba(191, 243, 255, .28), inset 0 0 44px rgba(0, 0, 0, .55), 0 24px 60px -24px rgba(0, 0, 0, .95); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow: visible; }
.sl-aurora .sl-stage.bonus .sl-frame { box-shadow: inset 0 0 0 1px rgba(191, 243, 255, .45), inset 0 0 44px rgba(0, 0, 0, .55), 0 24px 60px -24px rgba(0, 0, 0, .95), 0 0 60px -14px var(--au-ice); }
.sl-aurora .sl-reels { background: transparent; border-radius: 6px; }
/* every column carries its colour faintly even while dark: a tinted foot and edge, so the seven bands read at a glance */
.sl-aurora .sl-reel { background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #7fd3ff) 14%, transparent), rgba(10, 22, 40, .34) 16%, rgba(6, 12, 24, .52) 84%, color-mix(in srgb, var(--tint, #7fd3ff) 16%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint, #7fd3ff) 22%, transparent); }
/* the reel's gem sits in the dark badge, so the seven colours read before any band is lit */
.au-bgem { position: absolute; left: 50%; top: 50%; width: 46%; height: 62%; transform: translate(-50%, -52%); object-fit: contain; opacity: .9; filter: drop-shadow(0 0 calc(var(--cell) * .06) color-mix(in srgb, var(--tint) 70%, transparent)); transition: opacity .3s, transform .3s; }
.au-band.lit .au-bgem { opacity: 0; transform: translate(-50%, -52%) scale(.4); }
.sl-aurora .sl-reel + .sl-reel { box-shadow: inset 1px 0 0 rgba(191, 243, 255, .1); }
.sl-aurora .sl-reel.lit { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tint) 85%, transparent), inset 0 0 calc(var(--cell) * .22) color-mix(in srgb, var(--tint) 22%, transparent); }
.au-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 45%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--tint) 38%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--tint) 30%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--tint) 30%, transparent)); mix-blend-mode: screen; animation: au-pulse 2.2s ease-in-out infinite; }
@keyframes au-pulse { 50% { filter: brightness(1.35); } }
.sl-aurora .sl-sym { width: 86%; height: 86%; filter: drop-shadow(0 calc(var(--cell) * .04) calc(var(--cell) * .05) rgba(0, 0, 0, .7)); }
.sl-aurora .sl-cell.hit::before, .sl-aurora .sl-cell.hit2::before { inset: 5%; border-radius: 22%; background: radial-gradient(circle, rgba(191, 243, 255, .26), transparent 68%); box-shadow: inset 0 0 0 1.5px rgba(234, 250, 255, .55), 0 0 calc(var(--cell) * .16) rgba(191, 243, 255, .75); }
.sl-aurora .sl-cell.hit .sl-sym, .sl-aurora .sl-cell.hit2 .sl-sym { filter: drop-shadow(0 0 calc(var(--cell) * .09) rgba(234, 250, 255, .95)) drop-shadow(0 calc(var(--cell) * .04) calc(var(--cell) * .05) rgba(0, 0, 0, .6)); }
.sl-aurora .sl-reels.dim .sl-cell:not(.hit):not(.hit2) { filter: brightness(.42) saturate(.6); }

/* ----- the band badges: ice plaques above each reel, dark until lit */
.au-bands { position: absolute; left: 0; bottom: 100%; margin-bottom: 2px; height: calc(var(--cell) * .72); display: flex; z-index: 3; pointer-events: none; }
.au-band { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: grid; place-items: center; filter: brightness(.82) saturate(.7); opacity: .94; transition: filter .5s, opacity .5s; }
.au-band.lit { opacity: 1; filter: brightness(1.06) drop-shadow(0 0 calc(var(--cell) * .12) color-mix(in srgb, var(--tint) 85%, transparent)); }
.au-bimg { position: absolute; left: 50%; top: 50%; width: 126%; height: 136%; transform: translate(-50%, -50%); object-fit: contain; }
.au-bv { position: relative; z-index: 1; font: 900 calc(var(--cell) * .28)/1 var(--font-display); letter-spacing: -.02em; color: #fff; text-shadow: 0 0 calc(var(--cell) * .1) var(--tint), 0 0 2px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-band:not(.lit) .au-bv { opacity: 0; }
.au-bn { display: none; }

/* the spins plaque under the logo, and the fox */
.au-spins { position: relative; width: 100%; max-width: 232px; aspect-ratio: 900 / 430; opacity: .5; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); transition: opacity .35s, filter .35s; }
.au-spins.on { opacity: 1; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 20px rgba(191, 243, 255, .6)); }
.au-spins img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.au-sp { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 24%; display: grid; place-items: center; align-content: center; gap: 2px; }
.au-sp span { font: 800 10px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: rgba(191, 243, 255, .85); text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.au-sp b { font: 900 28px/1 var(--font-display); letter-spacing: -.02em; color: #fff; text-shadow: 0 0 14px rgba(127, 227, 255, .95), 0 0 2px #000; font-variant-numeric: tabular-nums; }
/* the sky shimmers: soft ribbons of light drift across the top of the scene (masked off the slab) */
.au-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .16; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 70px, rgba(200, 255, 230, .55) 105px, rgba(255, 210, 245, .45) 125px, rgba(255, 255, 255, 0) 160px, rgba(255, 255, 255, 0) 260px); background-size: 200% 100%; -webkit-mask: linear-gradient(180deg, #000 0%, #000 16%, rgba(0, 0, 0, .5) 30%, transparent 48%); mask: linear-gradient(180deg, #000 0%, #000 16%, rgba(0, 0, 0, .5) 30%, transparent 48%); animation: au-sky 28s linear infinite, au-skyglow 7s ease-in-out infinite; }
@keyframes au-sky { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes au-skyglow { 50% { opacity: .26; } }
.au-fox { position: absolute; left: 14px; bottom: 4px; z-index: 2; width: clamp(120px, 15vw, 236px); pointer-events: none; transform-origin: 50% 100%; animation: au-breathe 4.2s ease-in-out infinite; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .65)); }
@keyframes au-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018, 1.03); } }

/* ----- the effects layers over the stage */
.sl-aurora .cv-fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.sl-aurora .cv-fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.sl-aurora .cv-fxl > * { position: absolute; left: 0; top: 0; }
/* a beam of light sweeping up a column */
.au-beam { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, color-mix(in srgb, var(--tint) 55%, transparent) 30%, color-mix(in srgb, var(--tint) 35%, #fff) 46%, rgba(255, 255, 255, .95) 50%, color-mix(in srgb, var(--tint) 35%, #fff) 54%, color-mix(in srgb, var(--tint) 55%, transparent) 70%, rgba(255, 255, 255, 0) 100%) 0 130% / 100% 52% no-repeat; mix-blend-mode: screen; opacity: 0; border-radius: 4px; filter: blur(1.5px); }
/* rays behind an orb as it reveals its value */
.au-rays-sm { width: var(--s); height: var(--s); transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tint) 70%, #fff) 0deg 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); mix-blend-mode: screen; opacity: 0; }
/* numbers in flight and numbers that pop off a spot */
.au-fnum { font: 900 var(--fs, 24px)/1 var(--font-display); letter-spacing: -.03em; color: #f4fdff; white-space: nowrap; text-shadow: 0 0 12px rgba(127, 227, 255, .95), 0 0 2px #000, 0 2px 0 rgba(0, 30, 50, .8); will-change: transform; transform-origin: 50% 50%; }
.au-fnum.t-gold { color: #fff6d6; text-shadow: 0 0 12px rgba(255, 205, 90, .95), 0 0 2px #000, 0 2px 0 rgba(60, 30, 0, .8); }
.au-fnum.t-fire { color: #fff0e0; text-shadow: 0 0 14px rgba(255, 140, 40, .95), 0 0 2px #000, 0 2px 0 rgba(60, 20, 0, .8); }
.au-fnum.t-band { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .9), 0 0 2px #000, 0 2px 0 rgba(0, 0, 0, .8); }
.au-fnum.big { --fs: 44px; }
.au-item { object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(191, 243, 255, .65)); will-change: transform; }
/* a big title slamming onto the screen */
.au-slam { width: 100%; top: 44%; display: grid; justify-items: center; gap: 6px; transform: translateY(-50%); text-align: center; }
.au-slam b { font: 900 clamp(46px, 8.5vw, 124px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(180deg, #ffffff 0%, #d9f6ff 30%, #7fd3ff 58%, #2a7db8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #06243a; filter: drop-shadow(0 5px 0 #06243a) drop-shadow(0 16px 26px rgba(0, 0, 0, .75)); }
.au-slam span { font: 800 clamp(13px, 1.6vw, 19px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #eafaff; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }

/* ----- the bought round's intro */
.sl-over.au-intro-over { background: radial-gradient(70% 70% at 50% 45%, rgba(6, 12, 24, .55), rgba(3, 5, 12, .9)); }
.au-intro { display: grid; justify-items: center; gap: 4px; width: min(760px, 94%); padding: 18px 12px; }
.au-huge { font: 900 clamp(48px, 7.5vw, 104px)/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #ffffff 0%, #d9f6ff 30%, #7fd3ff 58%, #2a7db8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #06243a; filter: drop-shadow(0 5px 0 #06243a) drop-shadow(0 14px 22px rgba(0, 0, 0, .7)); }
.au-intro .sl-kick { color: #bff3ff; letter-spacing: .2em; }
.au-perks { font: 700 14px/1.4 var(--font-display); color: rgba(234, 250, 255, .9); letter-spacing: .02em; }
.au-orbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(520px, 100%); margin: 14px 0 8px; }
.au-orbs > div { display: grid; justify-items: center; gap: 6px; text-align: center; animation: au-cardin .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.au-orbs > div + div { animation-delay: .12s; }
@keyframes au-cardin { from { opacity: 0; transform: translateY(26px) scale(.8); } }
.au-orbs img { width: min(22vw, 130px); height: min(22vw, 130px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.au-orbs small { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .72); }

/* ----- the total: the ice plaque, its number in frosted white, shards firing out of both sides */
.sl-over.au-tot { background: radial-gradient(70% 70% at 50% 50%, rgba(6, 12, 24, .55), rgba(3, 5, 12, .92)); }
.au-total { position: relative; width: min(780px, 94%, calc(46vh * 1.78)); display: grid; justify-items: center; gap: 4px; transform-origin: 50% 46%; }
/* each rung of the ladder has its own colour, and the light behind the plaque turns faster and brighter */
.au-total[data-tier="2"] .au-tier { background-image: linear-gradient(180deg, #ffffff, #c8ffd9 48%, #1fa864); }
.au-total[data-tier="3"] .au-tier { background-image: linear-gradient(180deg, #ffffff, #ffd2f5 48%, #c8268c); }
.au-total[data-tier="4"] .au-tier { background-image: linear-gradient(180deg, #ffffff, #e2c8ff 48%, #6a2ac8); }
.au-total[data-tier="5"] .au-tier, .au-total[data-tier="6"] .au-tier { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffffff, #ffe08a 40%, #ffb000 62%, #8a4a00); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: au-shine 1.6s ease-in-out infinite; }
.au-total[data-tier="2"] .au-rays { animation-duration: 10s; }
.au-total[data-tier="3"] .au-rays { animation-duration: 7s; filter: brightness(1.35); }
.au-total[data-tier="4"] .au-rays { animation-duration: 5s; filter: brightness(1.6); }
.au-total[data-tier="5"] .au-rays, .au-total[data-tier="6"] .au-rays { animation-duration: 3.6s; filter: brightness(1.9); }
.au-total .au-rays { position: absolute; left: 50%; top: 48%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(191, 243, 255, .18) 0deg 6deg, rgba(191, 243, 255, 0) 6deg 16deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: au-spin 14s linear infinite; pointer-events: none; }
@keyframes au-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.au-total .au-kick { position: relative; font: 900 clamp(16px, 2.2vw, 28px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #eafaff; text-shadow: 0 0 18px rgba(127, 227, 255, .8), 0 3px 0 #06243a; }
.au-plq { position: relative; width: 100%; aspect-ratio: 900 / 430; }
.au-plq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)); }
.au-glass { position: absolute; left: 11%; right: 11%; top: 22%; bottom: 24%; display: grid; place-items: center; }
.au-glass b { font: 900 clamp(36px, 7.4vw, 96px)/1 var(--font-display); letter-spacing: -.03em; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%) 160% 0 / 250% 100% no-repeat, linear-gradient(180deg, #ffffff 0%, #e6fbff 32%, #8fdcff 60%, #2f86c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #06243a; filter: drop-shadow(0 4px 0 #06243a) drop-shadow(0 0 22px rgba(127, 227, 255, .6)); animation: au-shine 2.4s ease-in-out infinite; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes au-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.au-total .au-tier { position: relative; margin-top: -2%; font: 900 clamp(28px, 4.6vw, 62px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #ffffff, #bff3ff 50%, #3b9ad6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #06243a; filter: drop-shadow(0 4px 0 #06243a) drop-shadow(0 0 20px rgba(127, 227, 255, .6)); }
.au-total .au-x { position: relative; font: 700 15px/1 var(--font-display); color: rgba(234, 250, 255, .8); }

/* ----- the paytable's bands */
.au-pt-bands { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.au-pt-bands span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; font: 700 12px/1 var(--font-display); color: var(--text); background: var(--surface-2, rgba(127, 127, 127, .08)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 55%, transparent); }
.au-pt-bands img { width: 24px; height: 24px; object-fit: contain; }

/* ----- the bar under the slab: icy metal */
.sl-aurora .sl-bar { background: linear-gradient(180deg, #121c2c, #080d16); border-top: 1px solid rgba(127, 211, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sl-aurora .sl-spin { width: 74px; height: 74px; color: #062036; background: radial-gradient(circle at 50% 30%, #ffffff, #7fd3ff 50%, #2a7db8); box-shadow: 0 0 0 4px #182637, 0 0 0 6px rgba(127, 211, 255, .5), 0 12px 26px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .22); }
.sl-aurora .sl-round { border-color: rgba(127, 211, 255, .3); background: linear-gradient(180deg, #1b2a3e, #0f1826); }
/* the Buy button reads as the way into the aurora spins: icy, lit, never dull */
.sl-aurora .sl-buy { border-color: rgba(127, 227, 255, .7); background: linear-gradient(180deg, #1d4a68, #0f2a40); color: #fff; box-shadow: 0 0 22px -6px rgba(127, 227, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .18); }
.sl-aurora .sl-buy svg { stroke: #d9f6ff; }
.sl-aurora .sl-buy span { color: rgba(217, 246, 255, .85); }
.sl-aurora .sl-buy span b { color: #fff; text-shadow: 0 0 10px rgba(127, 227, 255, .9); }
.sl-aurora .sl-buy:hover:not(:disabled) { background: linear-gradient(180deg, #255a7c, #143450); box-shadow: 0 0 28px -4px rgba(127, 227, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sl-aurora .sl-buy:disabled { opacity: .6; }

@media (max-width: 1100px) {
  .sl-aurora .sl-top { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 0; }
  .au-spins { width: 150px; }
  .au-sp b { font-size: 19px; }
  .au-sp span { font-size: 8px; }
  .au-fox { display: none; }
  .sl-aurora .sl-board { padding: clamp(40px, 6vh, 60px) 10px 8px; }
}
@media (max-width: 720px) {
  .sl-aurora .sl-stage { height: auto; }
  .au-spins { width: 118px; }
  .au-sp b { font-size: 16px; }
  .au-bv { font-size: max(10px, calc(var(--cell) * .25)); }
  .au-orbs img { width: 90px; height: 90px; }
}