/* Sunspire (/casino/sunspire): the sky temple at golden hour, the 7x7 grid in its gold frame, the princess on the
   balcony, the free-spins plaque under the logo, and everything that plays over it (js/casino/sunspire.js). Art lives
   in /casino/slots/sunspire/. */

.sl-sunspire { --f1: #5a3a08; --f2: #e2a93a; --f3: #fff1c9; --ss-gold: #ffd27a; --ss-warm: #ffb347; }

/* ----- the stage: a landscape scene that breaks out of the page column on a wide screen, so the terrace, the sky and
   the princess fill the sides instead of empty margins */
.sl-sunspire .sl-stage { height: clamp(600px, calc(100vh - 220px), 980px); }
@media (min-width: 1100px) {
  .sl.sl-sunspire { width: min(calc(100vw - 64px), 1800px); margin-left: calc(50% - min(calc(50vw - 32px), 900px)); }
}
.sl-sunspire .sl-bg { inset: 0; animation: none; background-size: cover; background-position: center 42%; background-color: #1a1408; transition: filter .8s; transform-origin: 30% 30%; }
.sl-sunspire .sl-bg::after { background: linear-gradient(180deg, rgba(10, 8, 4, .18), rgba(10, 8, 4, 0) 20%, rgba(10, 8, 4, 0) 76%, rgba(10, 8, 4, .5)), radial-gradient(60% 70% at 50% 52%, rgba(12, 10, 6, .32), rgba(12, 10, 6, 0) 70%); }
.sl-sunspire .sl-stage.bonus .sl-bg { filter: saturate(1.08) brightness(1.04); }
.sl-sunspire .sl-meter { display: none; }
.sl-sunspire .sl-logo { filter: drop-shadow(0 10px 18px rgba(40, 20, 0, .55)) drop-shadow(0 0 18px rgba(255, 210, 122, .35)); }
/* room above the frame for its sun crest, and under it for its jewel */
.sl-sunspire .sl-board { position: relative; z-index: 3; padding: clamp(90px, 13vh, 132px) 16px clamp(40px, 6vh, 60px); }
/* the reels: deep blue glass with fine gold lines between the cells, set in the gold frame (ss-gframe) */
.sl-sunspire .sl-frame { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.sl-sunspire .sl-reels { border-radius: 4px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, rgba(16, 28, 58, .78), rgba(6, 12, 30, .9)); box-shadow: 0 30px 70px -30px rgba(20, 10, 0, .9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sl-sunspire .sl-reel { background: none; }
.sl-sunspire .sl-reel + .sl-reel { box-shadow: inset 1px 0 0 rgba(255, 214, 140, .14); }
.sl-sunspire .sl-cell { box-shadow: inset 0 -1px 0 rgba(255, 214, 140, .1); }
.sl-sunspire .sl-cell::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 220, 150, .1), rgba(255, 220, 150, 0) 70%); pointer-events: none; }
.ss-gframe { position: absolute; z-index: 2; pointer-events: none; max-width: none; filter: drop-shadow(0 16px 26px rgba(40, 20, 0, .55)); }

/* symbols: the jewels sit a little smaller than the medallions, the wild and the scatter fill their cells */
.sl-sunspire .sl-sym { width: 88%; height: 88%; filter: drop-shadow(0 calc(var(--cell) * .035) calc(var(--cell) * .045) rgba(0, 0, 0, .6)); }
.sl-sunspire .sl-sym[src$="/topaz.webp"], .sl-sunspire .sl-sym[src$="/amethyst.webp"], .sl-sunspire .sl-sym[src$="/emerald.webp"], .sl-sunspire .sl-sym[src$="/sapphire.webp"], .sl-sunspire .sl-sym[src$="/ruby.webp"] { width: 80%; height: 80%; }
.sl-sunspire .sl-sym[src$="/wild.webp"], .sl-sunspire .sl-sym[src$="/scatter.webp"] { width: 96%; height: 96%; }
.sl-sunspire .sl-tag { display: none; }
.sl-sunspire .sl-cell.wild::before, .sl-sunspire .sl-cell.ss-glow::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 214, 120, .5), rgba(255, 180, 60, 0) 68%); animation: ss-halo 1.6s ease-in-out infinite alternate; }
@keyframes ss-halo { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
/* a wild that stays (High Noon, the Eclipse) sits in a gold ring */
.sl-sunspire .sl-cell.ss-stay::before { inset: 3%; border-radius: 14%; background: radial-gradient(circle, rgba(255, 224, 140, .5), rgba(255, 180, 60, .1) 72%); box-shadow: inset 0 0 0 calc(var(--cell) * .03) #ffd27a, inset 0 0 calc(var(--cell) * .16) rgba(255, 200, 90, .55), 0 0 calc(var(--cell) * .2) rgba(255, 190, 70, .85); animation: ss-stay 1.3s ease-in-out infinite alternate; }
@keyframes ss-stay { to { box-shadow: inset 0 0 0 calc(var(--cell) * .03) #fff0c4, inset 0 0 calc(var(--cell) * .24) rgba(255, 214, 120, .75), 0 0 calc(var(--cell) * .32) rgba(255, 200, 90, 1); } }
/* wins: a gold frame round each winning symbol, the rest dims */
.sl-sunspire .sl-cell.hit::before, .sl-sunspire .sl-cell.hit2::before { inset: 4%; z-index: 0; border-radius: 16%; background: radial-gradient(circle, rgba(255, 220, 140, .3), rgba(255, 200, 90, .04) 70%); box-shadow: inset 0 0 0 calc(var(--cell) * .026) #ffd27a, inset 0 0 calc(var(--cell) * .12) rgba(255, 190, 70, .5), 0 0 calc(var(--cell) * .14) rgba(255, 190, 70, .7); animation: none; }
.sl-sunspire .sl-cell.hit .sl-sym, .sl-sunspire .sl-cell.hit2 .sl-sym { position: relative; z-index: 1; filter: drop-shadow(0 0 calc(var(--cell) * .09) rgba(255, 226, 150, .95)) drop-shadow(0 calc(var(--cell) * .035) calc(var(--cell) * .045) rgba(0, 0, 0, .55)); }
.sl-sunspire .sl-reels.dim .sl-cell:not(.hit):not(.hit2) { filter: brightness(.38) saturate(.55); }
/* a sunbeam: everything it hasn't touched dims */
.sl-sunspire .sl-reels.ss-beaming .sl-cell:not(.ss-lit) { filter: brightness(.42) saturate(.6); }
.sl-sunspire .sl-reels.ss-beaming .sl-cell.ss-lit { filter: brightness(1.12); }
.sl-sunspire .sl-reel.tease { background: linear-gradient(180deg, rgba(255, 214, 130, .38), rgba(255, 214, 130, .06) 32%, rgba(255, 214, 130, .06) 68%, rgba(255, 214, 130, .38)); box-shadow: inset 0 0 0 2px rgba(255, 220, 140, .95), inset 0 0 calc(var(--cell) * .45) rgba(255, 190, 70, .6); animation: ss-tease-glow .5s ease-in-out infinite alternate; }
.sl-sunspire .sl-reel.tease::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(255, 244, 210, 0) 0%, rgba(255, 244, 210, 0) 36%, rgba(255, 244, 210, .5) 50%, rgba(255, 244, 210, 0) 64%, rgba(255, 244, 210, 0) 100%); background-size: 100% 260%; mix-blend-mode: screen; animation: ss-tease-sweep .8s linear infinite; }
@keyframes ss-tease-sweep { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes ss-tease-glow { to { box-shadow: inset 0 0 0 2px #fff0c4, inset 0 0 calc(var(--cell) * .7) rgba(255, 200, 90, .8); } }

/* ----- the beams' layer over the reels: frames, rays, and the wilds' multiplier badges above it all */
.ss-beams, .ss-badges { position: absolute; pointer-events: none; }
.ss-beams { z-index: 3; }
.ss-badges { z-index: 4; }
.ss-frame { position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 214, 120, .9)) drop-shadow(0 0 22px rgba(255, 180, 60, .55)); will-change: transform; animation: ss-frame-glow 1.2s ease-in-out infinite alternate; }
@keyframes ss-frame-glow { to { filter: drop-shadow(0 0 16px rgba(255, 226, 150, 1)) drop-shadow(0 0 34px rgba(255, 180, 60, .75)); } }
.ss-ray { position: absolute; display: block; border-radius: 999px; mix-blend-mode: screen; will-change: transform; filter: blur(.6px); }
.ss-ray.h { background: linear-gradient(180deg, rgba(255, 190, 70, 0) 0%, rgba(255, 196, 80, .55) 22%, rgba(255, 238, 180, .95) 42%, #ffffff 50%, rgba(255, 238, 180, .95) 58%, rgba(255, 196, 80, .55) 78%, rgba(255, 190, 70, 0) 100%); box-shadow: 0 0 calc(var(--cell) * .3) rgba(255, 196, 80, .65); }
.ss-ray.v { background: linear-gradient(90deg, rgba(255, 190, 70, 0) 0%, rgba(255, 196, 80, .55) 22%, rgba(255, 238, 180, .95) 42%, #ffffff 50%, rgba(255, 238, 180, .95) 58%, rgba(255, 196, 80, .55) 78%, rgba(255, 190, 70, 0) 100%); box-shadow: 0 0 calc(var(--cell) * .3) rgba(255, 196, 80, .65); }
.ss-mult { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; }
.ss-mult::before { content: ""; position: absolute; left: 50%; top: 52%; width: calc(var(--s) * .62); height: calc(var(--s) * .36); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 14, 0, .62), rgba(70, 14, 0, 0)); }
.ss-mult b { position: relative; font: 900 calc(var(--s) * .36)/1 var(--font-display); letter-spacing: -.045em; white-space: nowrap; background: linear-gradient(180deg, #ffffff 0%, #fff1bf 30%, #ffc94a 62%, #d07a08 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(var(--s) * .018) #4a1300; filter: drop-shadow(0 calc(var(--s) * .022) 0 rgba(60, 14, 0, .95)) drop-shadow(0 0 calc(var(--s) * .08) rgba(255, 150, 40, .9)); font-variant-numeric: tabular-nums; }
.ss-mult[data-big="1"] b { font-size: calc(var(--s) * .3); }
.ss-mult b small { font-size: .6em; margin-right: .02em; vertical-align: .2em; }

/* ----- the princess on the balcony: she breathes, and changes pose (casting, cheering) with a crossfade */
.ss-princess { position: absolute; right: 0; bottom: 0; z-index: 2; height: 94%; aspect-ratio: 900 / 1374; pointer-events: none; transform-origin: 50% 100%; }
.ss-p { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .32s ease; filter: drop-shadow(0 16px 24px rgba(40, 20, 0, .45)); }
.ss-p.on { opacity: 1; }
.ss-p-idle.on { animation: ss-breathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ss-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.012, 1.018) rotate(-.4deg); } }
.ss-aura { position: absolute; left: 10%; right: 10%; top: 2%; height: 44%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .55), rgba(255, 200, 90, 0) 70%); filter: blur(10px); opacity: .55; animation: ss-aura 3.4s ease-in-out infinite alternate; }
.ss-princess[data-pose="cast"] .ss-aura, .ss-princess[data-pose="cheer"] .ss-aura { opacity: 1; animation-duration: .9s; }
@keyframes ss-aura { to { opacity: .9; transform: scale(1.08); } }

/* ----- the free-spins plaque under the logo, and a spin mode's ribbon under the frame */
.ss-spins { position: relative; width: 100%; max-width: 236px; aspect-ratio: 900 / 611; opacity: 0; transform: translateY(-8px) scale(.94); transition: opacity .35s, transform .35s var(--spring); filter: drop-shadow(0 10px 16px rgba(40, 20, 0, .6)); }
.ss-spins.on { opacity: 1; transform: none; }
.ss-spins img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ss-sp { position: absolute; left: 14%; right: 14%; top: 39%; bottom: 17%; display: grid; place-items: center; align-content: center; gap: 1px; }
.ss-sp span { font: 800 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 226, 160, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; }
.ss-sp b { font: 900 30px/1 var(--font-display); letter-spacing: -.02em; color: #fff; text-shadow: 0 0 14px rgba(255, 196, 80, .95), 0 0 2px #000; font-variant-numeric: tabular-nums; }
.ss-mode { position: absolute; left: 50%; bottom: calc(var(--cell) * -.62); z-index: 5; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 2px; padding: 7px 22px 8px; border-radius: 999px; background: linear-gradient(180deg, #8a1f14, #5a0f08); box-shadow: inset 0 0 0 1.5px #ffd27a, 0 8px 20px -8px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(255, 190, 70, .8); white-space: nowrap; pointer-events: none; }
.ss-mode b { font: 900 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #ffe7a8; }
.ss-mode span { font: 700 11px/1 var(--font-display); color: rgba(255, 238, 200, .85); }

/* ----- effects over the stage */
.sl-sunspire .cv-fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.sl-sunspire .cv-fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.sl-sunspire .cv-fxl > * { position: absolute; left: 0; top: 0; }
.ss-num { font: 900 var(--fs, 26px)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(180deg, #fffbe9 0%, #ffe9a6 34%, #ffc23e 62%, #c97b06 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(var(--fs, 26px) * .045) #4a2600; filter: drop-shadow(0 3px 0 rgba(60, 28, 0, .85)) drop-shadow(0 0 12px rgba(255, 200, 90, .7)); will-change: transform; transform-origin: 50% 50%; font-variant-numeric: tabular-nums; }
.ss-num.t-fire { background-image: linear-gradient(180deg, #fff6e6 0%, #ffd27a 30%, #ff8a2b 64%, #c2340a 100%); filter: drop-shadow(0 3px 0 rgba(70, 18, 0, .85)) drop-shadow(0 0 14px rgba(255, 120, 40, .8)); }
/* a small win's total over the grid */
.ss-winbanner { display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.ss-winbanner span { font: 900 calc(var(--fs) * .3)/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: #fff3cf; text-shadow: 0 0 12px rgba(255, 196, 80, .9), 0 2px 0 #4a2600; }
.ss-winbanner b { font: 900 var(--fs)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(180deg, #fffbe9 0%, #ffe9a6 34%, #ffc23e 62%, #c97b06 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(var(--fs) * .04) #4a2600; filter: drop-shadow(0 4px 0 rgba(60, 28, 0, .9)) drop-shadow(0 0 22px rgba(255, 196, 80, .75)); font-variant-numeric: tabular-nums; }
.ss-item { object-fit: contain; filter: drop-shadow(0 0 16px rgba(255, 214, 120, .9)); will-change: transform; mix-blend-mode: screen; }
.ss-slam { width: 100%; top: 44%; display: grid; justify-items: center; gap: 6px; transform: translateY(-50%); text-align: center; }
.ss-slam b { font: 900 clamp(46px, 8vw, 118px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(180deg, #fffbe9 0%, #ffe9a6 30%, #ffc23e 60%, #b56a04 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #4a2600; filter: drop-shadow(0 5px 0 #4a2600) drop-shadow(0 16px 26px rgba(0, 0, 0, .6)); }
.ss-slam span { font: 800 clamp(13px, 1.6vw, 19px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff6dc; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
/* a flare of sunlight that covers the stage while the scene changes */
.ss-flare { left: 50% !important; top: 42% !important; width: 140%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ffffff 0%, #fff8e0 22%, rgba(255, 228, 160, .95) 40%, rgba(255, 196, 90, .7) 58%, rgba(255, 180, 60, 0) 72%); mix-blend-mode: screen; opacity: 0; }

/* ----- the bonus intro: the princess in the light, the bonus's name in gold */
.sl-over.ss-intro-over { background: #1a1206; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.ss-intro { position: absolute; inset: 0; display: grid; align-items: center; }
.ss-intro-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.ss-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 24, 2, .62), rgba(40, 24, 2, .2) 42%, rgba(40, 24, 2, 0) 60%); }
.ss-intro-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 6px; max-width: min(520px, 46%); margin-left: clamp(24px, 6vw, 110px); text-align: left; }
.ss-kick { font: 800 14px/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: #fff3cf; text-shadow: 0 2px 6px rgba(60, 30, 0, .8); }
.ss-title { font: 900 clamp(48px, 7.4vw, 112px)/.92 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(180deg, #fffbe9 0%, #ffe9a6 30%, #ffc23e 60%, #b56a04 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #4a2600; filter: drop-shadow(0 5px 0 #4a2600) drop-shadow(0 14px 24px rgba(60, 30, 0, .55)); }
.ss-won { font: 900 clamp(22px, 2.6vw, 34px)/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(255, 200, 90, .9), 0 3px 0 #4a2600; }
.ss-intro-copy p { max-width: 38ch; margin-top: 4px; color: #fff7e2; font-size: 15px; line-height: 1.5; text-shadow: 0 1px 3px rgba(40, 20, 0, .9); }
.ss-intro-copy .sl-hint { color: rgba(255, 246, 220, .85); text-shadow: 0 1px 3px rgba(40, 20, 0, .9); }
.ss-intro[data-kind="eclipse"] .ss-intro-art { filter: hue-rotate(-12deg) saturate(.9) brightness(.82) contrast(1.08); }

/* ----- the total: the great sun plaque, its number in gold, light and coins firing out of both sides */
.sl-over.ss-tot { background: radial-gradient(70% 70% at 50% 50%, rgba(30, 18, 2, .45), rgba(12, 8, 2, .9)); }
.ss-total { position: relative; width: min(760px, 92%, calc(56vh * 1.12)); display: grid; justify-items: center; gap: 2px; transform-origin: 50% 46%; }
.ss-total .ss-rays { position: absolute; left: 50%; top: 52%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .22) 0deg 6deg, rgba(255, 214, 120, 0) 6deg 15deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: ss-spin 14s linear infinite; pointer-events: none; }
@keyframes ss-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ss-total[data-tier="2"] .ss-rays { animation-duration: 10s; }
.ss-total[data-tier="3"] .ss-rays { animation-duration: 7s; filter: brightness(1.35); }
.ss-total[data-tier="4"] .ss-rays { animation-duration: 5s; filter: brightness(1.6); }
.ss-total[data-tier="5"] .ss-rays, .ss-total[data-tier="6"] .ss-rays { animation-duration: 3.6s; filter: brightness(1.9); }
.ss-tkick { position: relative; font: 900 clamp(15px, 2vw, 26px)/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #fff3cf; text-shadow: 0 0 18px rgba(255, 196, 80, .8), 0 3px 0 #4a2600; }
.ss-plq { position: relative; width: 100%; aspect-ratio: 1200 / 1074; margin-top: -2%; }
.ss-plq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .75)); }
.ss-glass { position: absolute; left: 13%; right: 13%; top: 47%; bottom: 13%; display: grid; place-items: center; }
.ss-glass b { font: 900 clamp(34px, 6.6vw, 92px)/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, #fffbe9 0%, #ffe9a6 34%, #ffc23e 62%, #c97b06 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #4a2600; filter: drop-shadow(0 4px 0 #4a2600) drop-shadow(0 0 22px rgba(255, 196, 80, .55)); animation: ss-shine 2.4s ease-in-out infinite; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes ss-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.ss-tier { position: relative; margin-top: -4%; font: 900 clamp(28px, 4.4vw, 60px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #fffbe9, #ffe08a 45%, #e08a0b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #4a2600; filter: drop-shadow(0 4px 0 #4a2600) drop-shadow(0 0 20px rgba(255, 196, 80, .6)); }
.ss-total[data-tier="3"] .ss-tier { background-image: linear-gradient(180deg, #ffffff, #ffd0a8 45%, #ff6a2b); }
.ss-total[data-tier="4"] .ss-tier { background-image: linear-gradient(180deg, #ffffff, #ffc4e2 45%, #d6267a); }
.ss-total[data-tier="5"] .ss-tier, .ss-total[data-tier="6"] .ss-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: ss-shine 1.6s ease-in-out infinite; }
.ss-x { position: relative; font: 700 15px/1 var(--font-display); color: rgba(255, 246, 220, .82); }

/* ----- the bar: warm gold, the Buy Bonus button a glowing gold-and-ruby medallion */
.sl-sunspire .sl-bar { background: linear-gradient(180deg, #23180a, #130d05); border-top: 1px solid rgba(255, 210, 122, .32); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .06); }
.sl-sunspire .sl-spin { width: 76px; height: 76px; color: #4a2600; background: radial-gradient(circle at 50% 30%, #fffbe9, #ffd27a 45%, #d9890f 80%, #9a5a04); box-shadow: 0 0 0 4px #3a2808, 0 0 0 6px rgba(255, 210, 122, .55), 0 12px 26px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(120, 60, 0, .35); }
.sl-sunspire .sl-round { border-color: rgba(255, 210, 122, .32); background: linear-gradient(180deg, #33240e, #1c1407); color: rgba(255, 236, 200, .8); }
.sl-sunspire .sl-round.on { background: #ffd27a; color: #3a2200; }
.sl-sunspire .sl-buy { position: relative; width: 92px; height: 92px; margin: -26px 0 -10px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: url(/casino/slots/sunspire/buybtn.webp) center / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(255, 196, 80, .55)); animation: ss-buy 2.4s ease-in-out infinite; transition: transform .18s var(--spring), filter .2s; }
@keyframes ss-buy { 50% { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(255, 214, 120, .95)); } }
.sl-sunspire .sl-buy svg { display: none; }
.sl-sunspire .sl-buy span { display: grid; justify-items: center; gap: 1px; text-align: center; font: 900 10px/1 var(--font-display); letter-spacing: .12em; color: #ffe7b0; text-shadow: 0 1px 2px rgba(60, 0, 0, .9); }
.sl-sunspire .sl-buy span b { font: 900 15px/1 var(--font-display); letter-spacing: .06em; color: #fff; text-shadow: 0 0 10px rgba(255, 220, 140, .9), 0 1px 2px rgba(60, 0, 0, .9); }
.sl-sunspire .sl-buy:hover:not(:disabled) { transform: scale(1.06); background-color: transparent; }
.sl-sunspire .sl-buy:active:not(:disabled) { transform: scale(.96); }
.sl-sunspire .sl-buy:disabled { opacity: .55; animation: none; }
.sl-sunspire .sl-buy.ss-off span b { font-size: 12px; }
.sl-sunspire .sl-fsbar { background: rgba(255, 210, 122, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .5); }

/* ----- the bonus-buy menu: four cards, the two spin modes switch on and off */
.ss-buys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.ss-buy { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 6px; padding: 14px 12px 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); text-align: center; transition: border-color .2s, transform .15s var(--spring), box-shadow .2s; }
.ss-buy:hover:not(:disabled) { border-color: #e2a93a; box-shadow: 0 10px 26px -14px rgba(226, 169, 58, .9); transform: translateY(-2px); }
.ss-buy:disabled { opacity: .55; cursor: default; }
.ss-buy.on { border-color: #e2a93a; box-shadow: inset 0 0 0 2px #e2a93a; }
.ss-buy .ss-art { position: relative; height: 74px; display: flex; align-items: center; justify-content: center; }
.ss-buy .ss-art img { height: 70px; width: 70px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.ss-buy .ss-art img + img { margin-left: -38px; }
.ss-buy .ss-art i { position: absolute; right: -6px; bottom: 0; font: 900 18px/1 var(--font-display); font-style: normal; color: #c97b06; }
.ss-buy b { font: 800 15px/1.15 var(--font-display); }
.ss-buy small { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.ss-buy .ss-vol { font-size: 11px; color: var(--text-3); }
.ss-buy .ss-cta { width: 100%; display: grid; gap: 3px; }
.ss-buy .ss-cta b { display: inline-flex; justify-content: center; align-items: center; gap: 5px; font-size: 17px; font-variant-numeric: tabular-nums; }
.ss-buy .ss-cta .coin { width: 16px; height: 16px; }
.ss-buy .ss-cta span { display: block; padding: 8px 0; border-radius: 10px; font: 800 13px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #e2a93a, #b06d0a); }
.ss-buy.mode .ss-cta span { background: linear-gradient(180deg, #d9452e, #9b1f10); }
.ss-buy.on .ss-cta span { background: linear-gradient(180deg, #5a6170, #3a404c); }
.ss-buy .ss-cta em { font-style: normal; font-size: 12px; color: var(--no-ink); }

/* ----- the paytable's sizes and the guide's sunbeam frames */
.ss-pt td:first-child { width: 44px; }
.ss-pt th, .ss-pt td { padding: 3px 5px; font-size: 12px; }

/* the logo column on the left takes the room the landscape stage gives it */
@media (min-width: 1101px) {
  .sl-sunspire .sl-top { width: clamp(216px, 21%, 340px); gap: 22px; }
  .sl-sunspire .sl-logo { max-width: 100%; max-height: 210px; }
  .ss-spins { max-width: 280px; }
}
@media (max-width: 1100px) {
  .sl-sunspire .sl-top { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 0; }
  .ss-spins { width: 150px; }
  .ss-sp b { font-size: 20px; }
  .ss-sp span { font-size: 8px; }
  .ss-princess { height: 74%; right: -2%; opacity: .95; }
  /* the board is the stage's width, never its content's; the frame keeps margins as deep as its art reaches past
     the reels (the sun crest 1.56 cells above, the pillars 0.64 to each side, the base 0.75 below), and slots.js
     sizes the cells with them (VIEWS.sunspire.frameMargin) */
  .sl-sunspire .sl-stage { grid-template-columns: minmax(0, 1fr); }
  .sl-sunspire .sl-board { padding: 4px 6px; }
  .sl-sunspire .sl-frame { margin: calc(var(--cell) * 1.58) calc(var(--cell) * .66) calc(var(--cell) * .77); }
}
@media (max-width: 860px) {
  .ss-princess { display: none; }
}
@media (max-width: 720px) {
  .sl-sunspire .sl-stage { height: auto; }
  .ss-spins { width: 118px; }
  .ss-sp b { font-size: 16px; }
  .ss-intro-copy { max-width: 70%; margin-left: 18px; }
  .ss-intro-copy p { font-size: 13px; }
  .sl-sunspire .sl-buy { width: 70px; height: 70px; margin: -8px 0 -6px; }
  .sl-sunspire .sl-buy span b { font-size: 12px; }
  .sl-sunspire .sl-spin { width: 66px; height: 66px; }
  .ss-buys { grid-template-columns: 1fr 1fr; }
}

/* ----- extra free spins: a gold plaque bursting in mid-board, then flying into the counter */
.ss-more { position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: 900 / 611; pointer-events: none; will-change: transform; transform-origin: 50% 50%; filter: drop-shadow(0 16px 24px rgba(30, 14, 0, .65)) drop-shadow(0 0 30px rgba(255, 200, 90, .55)); }
.ss-more img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ss-more div { position: absolute; left: 14%; right: 14%; top: 39%; bottom: 17%; display: flex; align-items: center; justify-content: center; gap: calc(var(--w) * .035); }
.ss-more b { font: 900 calc(var(--w) * .2)/1 var(--font-display); letter-spacing: -.03em; background: linear-gradient(180deg, #fffbe9 0%, #ffe9a6 34%, #ffc23e 62%, #c97b06 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(var(--w) * .006) #4a2600; filter: drop-shadow(0 3px 0 rgba(60, 28, 0, .9)) drop-shadow(0 0 12px rgba(255, 200, 90, .8)); }
.ss-more span { max-width: 4.6em; font: 900 calc(var(--w) * .066)/1.05 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #fff3cf; text-shadow: 0 0 10px rgba(255, 196, 80, .9), 0 2px 0 #4a2600; }

/* ----- the paytable's special symbols */
.ss-pt-special { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; text-align: left; }
.ss-pt-special > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, rgba(127, 127, 127, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.ss-pt-special img { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.ss-pt-special b { font: 800 13px/1.1 var(--font-display); color: var(--text); }
.ss-pt-special small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
@media (max-width: 560px) { .ss-pt-special { grid-template-columns: 1fr; } }