@charset "UTF-8";

:root {

    /* Colors */
	--main: #121212;
    --shadow: rgba(0, 0, 0, 0.75);
    --shadow-light: rgba(15, 15, 15, 0.15);
    --shade: #00000066;
    --sb-thumb-color: #f1b8f971;
    --sb-size: 8px;

    /* Game */
    --game-width: 1155px;
    --slot-width: calc(var(--game-width) * 0.675);
    --slot-height: auto;
    --item-height: 100px;
    --reel-height: calc(var(--item-height) * 5);
    
    --m5: calc(var(--item-height) * -5);
    --m4: calc(var(--item-height) * -4);
    --m3: calc(var(--item-height) * -3);
    --m2: calc(var(--item-height) * -2);
    --m1: calc(var(--item-height) * -1);

    --p5: calc(var(--reel-height) * -1);
    --p4: calc(var(--reel-height) * -0.9);
    --p3: calc(var(--reel-height) * -0.8);
    --p2: calc(var(--reel-height) * -0.7);
    --p1: calc(var(--reel-height) * -0.6);

    --x5: calc(var(--item-height) * 10);
    --x4: calc(var(--item-height) * 9);
    --x3: calc(var(--item-height) * 8);
    --x2: calc(var(--item-height) * 7);
    --x1: calc(var(--item-height) * 6);

    --e: ease;
    --e-i: ease-in;
    --e-o: ease-out;
    --e-io: ease-in-out;
    --cubic-1: cubic-bezier(.99,.01,.82,.25);
    --cubic-2: cubic-bezier(.99,.01,1,.99);
    --cubic-3: cubic-bezier(.99,.01,.84,.48);
    
    --animation-duration-1: 450ms;
    --animation-duration-2: 500ms;

    --column-delay-c1: 0ms;
    --column-delay-c2: 50ms;
    --column-delay-c3: 100ms;
    --column-delay-c4: 150ms;
    --column-delay-c5: 200ms;
    --column-delay-c6: 250ms;
    --column-delay-c7: 300ms;

    --stall-duration-1: 0ms;
    --stall-duration-2: 50ms;
    --stall-duration-3: 100ms;
    --stall-duration-4: 150ms;
    --stall-duration-5: 200ms;
    --stall-duration-6: 250ms;
    --stall-duration-7: 300ms;
    --stall-duration-8: 350ms;
    --stall-duration-9: 400ms;
    --stall-duration-10: 450ms;
    --stall-duration-11: 500ms;

    --tumble-delay-1: 0ms;
    --tumble-delay-2: 50ms;
    --tumble-delay-3: 100ms;
    --tumble-delay-4: 150ms;
    --tumble-delay-5: 200ms;
    --tumble-delay-6: 250ms;
    --tumble-delay-7: 300ms;
    --tumble-delay-8: 350ms;
    --tumble-delay-9: 400ms;
    --tumble-delay-10: 450ms;
    --tumble-delay-11: 500ms;

    --turbo-delay: 0ms;

    --top-1: 0px;
    --top-2: 15px;
    --top-3: 4px;

    --sy-1: 0.85;
    --sy-2: 1.15;
    --sy-3: 0.9;
    --sy-5: 1;

    --sx-1: 1.05;
    --sx-2: 1.025;
    --sx-4: 1;
    --sx-5: 1;

    --delay-percent: 1;

    --jiggle-duration: 150ms;
    --jiggle-delay1: calc(var(--animation-duration-1) * var(--delay-percent));
    --jiggle-delay: var(--animation-duration-1);

    --jiggle-delay-1:  calc(var(--stall-duration-1) + (var(--animation-duration-1)));
    --jiggle-delay-2:  calc(var(--stall-duration-2) + (var(--animation-duration-1)));
    --jiggle-delay-3:  calc(var(--stall-duration-3) + (var(--animation-duration-1)));
    --jiggle-delay-4:  calc(var(--stall-duration-4) + (var(--animation-duration-1)));
    --jiggle-delay-5:  calc(var(--stall-duration-5) + (var(--animation-duration-1)));
    --jiggle-delay-6:  calc(var(--stall-duration-6) + (var(--animation-duration-1)));
    --jiggle-delay-7:  calc(var(--stall-duration-7) + (var(--animation-duration-1)));
    --jiggle-delay-8:  calc(var(--stall-duration-8) + (var(--animation-duration-1)));
    --jiggle-delay-9:  calc(var(--stall-duration-9) + (var(--animation-duration-1)));
    --jiggle-delay-10:  calc(var(--stall-duration-10) + (var(--animation-duration-1)));
    --jiggle-delay-11:  calc(var(--stall-duration-11) + (var(--animation-duration-1)));

    --jiggle-delay-c1:  calc(var(--column-delay-c1) + (var(--animation-duration-1)));
    --jiggle-delay-c2:  calc(var(--column-delay-c2) + (var(--animation-duration-1)));
    --jiggle-delay-c3:  calc(var(--column-delay-c3) + (var(--animation-duration-1)));
    --jiggle-delay-c4:  calc(var(--column-delay-c4) + (var(--animation-duration-1)));
    --jiggle-delay-c5:  calc(var(--column-delay-c5) + (var(--animation-duration-1)));
    --jiggle-delay-c6:  calc(var(--column-delay-c6) + (var(--animation-duration-1)));
    --jiggle-delay-c7:  calc(var(--column-delay-c7) + (var(--animation-duration-1)));
    --jiggle-delay-c8:  calc(var(--column-delay-c8) + (var(--animation-duration-1)));
    --jiggle-delay-c9:  calc(var(--column-delay-c9) + (var(--animation-duration-1)));
    --jiggle-delay-c10:  calc(var(--column-delay-c10) + (var(--animation-duration-1)));
    --jiggle-delay-c11:  calc(var(--column-delay-c11) + (var(--animation-duration-1)));

    --scatter-rotation: 0deg;

    --clip-top: inset(-50px -50px -3px -50px);
    --clip-bottom: inset(-3px -50px -50px -50px);
    --clip-all: inset(-3px -50px -3px -50px);
    --clip-none: none;

}

@font-face {
    font-family: 'Helv';
    src: url('../font/helv.woff') format('woff');
    font-style: normal;
    font-weight: 900 !important;
}

@font-face {
    font-family: 'Funky';
    src: url('../font/funky.woff') format('woff');
    font-style: normal;
    font-weight: 900 !important;
}

body {
	background: var(--main);
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--white);
	font-weight: 500;
    font-family: system-ui;
	font-size: 14px;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, #121212e1 10%, rgba(0, 0, 0, 0) 90%),
		repeating-linear-gradient(90deg,
			transparent,
			transparent 33px,
			rgba(255, 255, 255, 0.033) 33px,
			rgba(255, 255, 255, 0.033) 34px),
		repeating-linear-gradient(0deg,
			transparent,
			transparent 33px,
			rgba(255, 255, 255, 0.033) 33px,
			rgba(255, 255, 255, 0.033) 34px);
}

body::-webkit-scrollbar {
    width: var(--sb-size);
}
  
body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}
  
body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}
  
@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

audio {
    display: none;
}

img, div {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

[data-loading="true"] {
    opacity: 0;
}

[data-loading="false"] {
    opacity: 1;
    animation: fadeIn 1s 1 !important;
}

[data-theme="bonanza"] {
    background-image: url(../images/base_background_new.webp);
    background-size: cover;
    padding-top: 1rem;
    padding-right: 0;
    padding-left: 0;
    border-radius: 0rem;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
    max-width: var(--game-width) !important;
}

[data-theme="bonanza"].coins::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1c0022a8;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    width: 100%;
    height: 100%;
}

[data-theme="bonanza"].bonus {
    background-image: url(../images/bonus_background_new.webp);
    background-size: cover;
    padding-top: 1rem;
    padding-right: 0;
    padding-left: 0;
    border-radius: 0rem;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
    max-width: var(--game-width) !important;
    max-height: 777px;
}

[data-theme="bonanza"].loading {
    background-image: none !important;
    background-size: cover;
    padding-top: 1rem;
    padding-right: 0;
    padding-left: 0;
    border-radius: 0rem;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
    max-width: var(--game-width) !important;
    max-height: 777px;
}

.slot {
    position: relative;
    padding: 10px;
    background: rgba(255, 255, 255, 0.33);
    box-shadow: 0 0px 10px rgba(255, 0, 0, 0.5), inset 0px 0px 15px 8px rgba(0, 0, 0, .5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2rem;
    margin-bottom: 1rem;
    order: 1;
    width: var(--slot-width) !important;
    height: var(--slot-height);
    text-align: center;
}

.slot.bonus {
    background-image: 
    radial-gradient(rgba(32, 0, 68, 0.05) 14.4%, transparent 14.4%),
    radial-gradient(rgba(32, 0, 68, 0.05) 14.4%, transparent 14.4%);
    background-position: 0px 0px, 7px 7px;
    background-size: 14px 14px;
    background-color: rgba(168, 0, 247, 0.33);
}

.slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2mm;    
    background: linear-gradient(45deg, #fff1f1 25%, #ff4747 25%, #ff4747 50%, #fff1f1 50%, #fff1f1 75%, #ff4747 75%, #ff4747 100%);
    background-size: 22.63px 22.63px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.slot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 99.5%;
    width: 99.5%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 3px;
    background: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}



.slot-container {
    order: 2;
    flex: 0 0 auto;
    width: 75%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-clip: border-box;
    margin-top: -50px;
}

.slot-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    margin-bottom: -15px;
    background-image: url(../images/frosting.webp);
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
    overflow: visible;
    z-index: 1;
}

.slot-header.bonus {
    background-image: none !important;
}

.slot-body {
    display: flex;
    flex: 1 1 auto;
}

.wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 0rem;
    padding-top: 5rem;
}

.reels {
    z-index: 1;
    position: relative;
    overflow: visible;
    text-align: center !important;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    border-radius: 1.5rem;
    padding: 0.25rem;
    width: auto;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style;
}

.reel {
    flex: 1 0 0%;
    border-width: 2px;
    border-style: solid;
    border-image: 
    linear-gradient(180deg, rgba(102,102,120,0) 7.5%, rgba(61, 61, 61, 0.2) 50%, rgba(102,102,102,0) 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
    border-top: none;
    border-bottom: none;
    border-left: none;
	position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(var(--item-height) * 5);
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
}

[data-reel="6"] {
    border-right: none !important;
}

.side-container {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    margin-bottom: 1rem;
    order: 2;
    width: 100%;
}

.scroll {
    cursor: pointer;
}

.scroll.up {
    width: 90px;
    height: 15px;
    margin-bottom: -1.5px;
    z-index: 3;
}

.scroll.down {
    width: 90px;
    height: 15px;
    margin-top: -1px;
    z-index: 2;
}

#return::before {
    content: '$';
}

.spoils-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0;
}

#spoils {
    overflow-y: scroll;
    max-height: 240px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    background: radial-gradient(circle, #fd48d648 25%, rgba(102,102,102,0) 75%);
    padding: .25rem !important;
}

.spoils-body {
    position: relative;
    border-radius: 1.75rem;
    padding: 6px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 10px 8px rgba(0, 0, 0, .5);
    background-image: linear-gradient(310deg, #b700cb 25%, #cb00da 25%, #cb00da 50%, #b700cb 50%, #b700cb 75%, #cb00da 75%, #cb00da 100%);
    background-size: 57.44px 68.45px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    width: 160px;
    height: 187px;
    z-index: 2;
}

.spoils-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.25mm;    
    background: linear-gradient(45deg, #ff00b7 25%, #ff94e2 25%, #ff94e2 50%, #ff00b7 50%, #ff00b7 75%, #ff94e2 75%, #ff94e2 100%);
    background-size: 22.63px 22.63px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.spoils-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 98.5%;
    width: 98.5%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 1.75px;
    background: #fff0fa7c;
    pointer-events: none;
}

.spoils-count-container {
    width: 25px;
    margin-right: 3px;
}

.spoils-text {
    font-size: 18px;
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: .2px #000000;
    margin-bottom: -3px;
}

.spoils-text:first-child {
    margin-left: 5px;
}

.spoils-text:last-child {
    margin-right: 5px;
    color: white;
}

.spoils-row {
    border-radius: 10rem;
    backdrop-filter: blur(9.6px);
    -webkit-backdrop-filter: blur(9.6px);
    background-color: #da00bd;
    box-shadow: inset 0px 0px 10px 1px rgba(255,255,255,1);
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 2px solid white;
    padding: .15rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.spoils-popup {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: .5px #000000;
    position: absolute;
    top: 30%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 36px;
    z-index: 33;
    opacity: 0;
    animation: scaleFadeUp 1s ease-out forwards;
}

#spoils .spoils-row:first-child{
    margin-bottom: -1px;
}

.bonus-spins-container {
    position: relative;
    width: 160px;
    height: 195px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 1), inset 0px 0px 10px 8px rgba(0, 0, 0, .5);
    background-image: linear-gradient(310deg, #b700cb 25%, #cb00da 25%, #cb00da 50%, #b700cb 50%, #b700cb 75%, #cb00da 75%, #cb00da 100%);
    background-size: 57.44px 68.45px;
    z-index: 1;
}

.bonus-spins-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: 
    inset 0px 3px 2px #ffffffe8,
    inset 0px 0px 0px #ffffff00;
    background: radial-gradient(circle, #fd48d648 25%, rgba(102,102,102,0) 75%);
    z-index: -1;

}

.bonus-spins-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.5mm;
    background: linear-gradient(180deg, rgba(235,86,0,1) 10%, rgba(255,212,18,1) 20%), rgba(235,86,0,1) 40%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-box-shadow: inset 0px 0px 2px 3px rgba(255, 232, 103, 0.815);
    -moz-box-shadow: inset 0px 0px 2px 3px rgba(255, 232, 103, 0.815);
    box-shadow: 
    inset 0px 5px 3px #eb5600,
    inset 0px -5px 5px #eb5600;
    z-index: -1;
}

.bonus-spins-container > div:nth-child(-n+3)  {
    font-family: 'Helv', sans-serif !important;
    letter-spacing: -1px;
    font-size: 2rem;
    text-shadow: 0px 0px 5px rgb(255, 0, 76);
    text-transform: uppercase;
    color: white;
    margin-bottom: -15px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px #000000;
}

#bonus-spins-left {
    position: relative;
    font-family: 'Helv', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#ffe600 30%, #ffbd30 40%, #ff682c 50%, #ff0606 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #ffffff;
}

#bonus-spins-left::before {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
    font-size: inherit;
    letter-spacing: -2px;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 7px #000000;
}

.add-spins {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(50%, 50%);
    border-radius: 1.75rem;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 5px 8px rgba(0, 0, 0, .5);
    background-image: url(../images/modal-background.webp) !important;
    background-size: cover;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    width: 50%;
    height: 30%;
    z-index: 2;
}

.add-spins > div:first-child {
    font-size: 4rem;
}

.add-spins > div:last-child {
    font-size: 2rem;
}

.add-spins::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.25mm;    
    background: linear-gradient(45deg, #ff00b7 25%, #ff94e2 25%, #ff94e2 50%, #ff00b7 50%, #ff00b7 75%, #ff94e2 75%, #ff94e2 100%);
    background-size: 22.63px 22.63px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.add-spins::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 99.25%;
    width: 99.25%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 2px;
    background: #fccef0ce;
    pointer-events: none;
}

.feature-title {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: 1px #ab026d;
    color: white;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: -10px;
    letter-spacing: -1px;
    font-size: 1.1rem;
    text-align: center;
}

.feature-text {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: 1px #ab026d;
    color: white;
    text-transform: uppercase;
    line-height: .5rem;
    letter-spacing: -1px;
    font-size: 2.1rem;
    text-align: center;
}

#buy-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 10px 8px rgba(0, 0, 0, .5);
    background: linear-gradient(310deg, #3ac7ff 25%, #00a7da 25%, #00a7da 50%, #3ac7ff 50%, #3ac7ff 75%, #00a7da 75%, #00a7da 100%);
    background-size: 57.44px 68.45px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    width: 160px;
    max-height: 240px;
    min-height: 100px;
    height: auto;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease-in-out;
}

#buy-feature:hover {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 10px 8px rgba(0, 0, 0, .5);
    background: linear-gradient(310deg, #00cb5b 25%, #00da74 25%, #00da74 50%, #00cb5b 50%, #00cb5b 75%, #00da74 75%, #00da74 100%);
    background-size: 57.44px 68.45px;
    transform: scale(1.1);
}

#buy-feature:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background-image: linear-gradient(45deg, #4fff7b 25%, #fc4f4f 25%, #fc4f4f 50%, #4fff7b 50%, #4fff7b 75%, #fc4f4f 75%, #fc4f4f 100%);
    background-size: 22.63px 22.63px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

#buy-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.25mm;
    background-image: linear-gradient(45deg, #ff50b6 25%, #5ad0ff 25%, #5ad0ff 50%, #ff50b6 50%, #ff50b6 75%, #5ad0ff 75%, #5ad0ff 100%);
    background-size: 22.63px 22.63px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.buy-feature-container:hover .buy-feature-background::before {
    background: radial-gradient(circle, #00ff8054 15%, rgba(255, 0, 0, 0) 75%);
}

.buy-feature-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, #00ccff80 15%, rgba(255, 0, 0, 0) 75%);
    z-index: -1;
}

.buy-feature-container::before {
    content: "";
    background-image: url('../images/side-pink.webp');
    position: absolute;
    left: 4px;
    width: 30%;
    height: 10%;
    top: -6px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 20;
}

.buy-feature-container::after {
    content: "";
    background-image: url('../images/side-pink.webp');
    transform: rotate(175deg);
    position: absolute;
    right: 7px;
    width: 30%;
    height: 10%;
    top: 54px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 20;
}

.buy-feature-container:hover {
    animation: transform-side 1s ease-in-out infinite;
}

.buy-feature-container:hover::before {
    background-image: none;
}

.buy-feature-container:hover::after {
    background-image: none;
}

.buy-feature-container:has(> #buy-feature.disabled) {
    pointer-events: none;
    opacity: .5;
}

.buy-feature-container:has(> #buy-feature.d-none) {
    display: none;
}

#buy-feature::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 97%;
    width: 98.5%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 1.5px;
    background: #ffffffb2;
    pointer-events: none;
}

.feature-modal-button {
    position: relative;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    width: 160px;
    height: 80px;
    cursor: pointer;
    border: none;
}

#buy-feature.disabled {
    pointer-events: none;
    opacity: .5;
}

.feature-modal-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: 
    inset 0px 3px 0px #fff1dfe8,
    inset 0px 0px 0px #ffffff00;
}

.feature-modal-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.25mm;
    background: linear-gradient(180deg, rgba(235,86,0,1) 30%, rgba(255,212,18,1) 50%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-box-shadow: inset 0px 0px 2px 3px rgba(255, 232, 103, 0.815);
    -moz-box-shadow: inset 0px 0px 2px 3px rgba(255, 232, 103, 0.815);
    box-shadow: 
    inset 0px 2px 3px #eb5600,
    inset 0px -2px 5px #f2ff3a;
    z-index: -1;
}

.feature-modal-button:first-child {
    box-shadow: 
    0px 10px 5px rgba(0, 0, 0, 0.5),
    inset 0 25px 15px -10px rgb(125, 255, 85),
    inset 0 -25px 15px -10px rgba(125, 255, 85);
}

.feature-modal-button:first-child:hover {
    box-shadow: 
    0px 10px 5px rgba(0, 0, 0, 0.5),
    inset 0 30px 10px -10px rgb(255, 255, 255),
    inset 0 -30px 10px -10px rgb(255, 255, 255);
}

.feature-modal-button:last-child {
    box-shadow: 
    0px 10px 5px rgba(0, 0, 0, 0.5),
    inset 0 25px 15px -10px rgb(255, 85, 85),
    inset 0 -25px 15px -10px rgb(255, 85, 85);
}

.feature-modal-button:last-child:hover {
    box-shadow: 
    0px 10px 5px rgba(0, 0, 0, 0.5),
    inset 0 30px 10px -10px rgb(255, 255, 255),
    inset 0 -30px 10px -10px rgb(255, 255, 255);
}

.feature-modal-button > div { 
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    font-size: 3rem;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    color: white;
    text-shadow: 0px 0px 10px #00000075;
}

.feature-modal-button:first-child > div {
    -webkit-text-stroke: 1px #023100;
}

.feature-modal-button:last-child > div {
    -webkit-text-stroke: 1px #310000;
}

.feature.disabled {
    opacity: .5;
    pointer-events: none;
}

[data-clip="top"] {
    clip-path: var(--clip-top);
}

[data-clip="bottom"] {
    clip-path: var(--clip-bottom);
}

[data-clip="none"] {
    clip-path: var(--clip-none);
}

[data-clip="all"] {
    clip-path: var(--clip-all);
}

[data-contain="lsp"] {
    contain: layout style paint;
}

[data-contain="ls"] {
    contain: layout style;
}

.symbol {
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	height: var(--item-height);
	position: relative;
    contain: layout style;
    transform: translateZ(0);
}

.symbol > img:not(.scatter, .bomb) {
    width: 96px;
    height: 96px;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}


.scatter {
    z-index: 10;
    width: 156px !important;
    height: 156px !important;
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}

.bomb_2, .bomb_3, .bomb_4, .bomb_5, .bomb_6, .bomb_8 {
    z-index: 11;
    width: 116px !important;
    height: 116px !important;
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}

.bomb_10, .bomb_12, .bomb_15, .bomb_20 {
    z-index: 12;
    width: 136px !important;
    height: 136px !important;
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}

.bomb_25, .bomb_50 {
    z-index: 13;
    width: 156px !important;
    height: 156px !important;
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}

.bomb_100, .bomb_1000 {
    z-index: 14;
    width: 176px !important;
    height: 176px !important;
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: paint;
}

.bomb_bg {
    height: 100%;
    width: 100%;
}

[data-name="bomb_2"] > .gt-9, [data-name="bomb_3"] > .gt-9, [data-name="bomb_4"] > .gt-9, [data-name="bomb_5"] > .gt-9, [data-name="bomb_6"] > .gt-9, [data-name="bomb_8"] > .gt-9 {
    font-size: 2.5rem;
    top: 30%;
    -webkit-text-stroke: .5px #853500;
    background: -webkit-linear-gradient(#ffbb01 20%, #fff567 40%, #ffbb01 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 3px 0px #853500);
}

[data-name="bomb_10"] > .gt-9, [data-name="bomb_12"] > .gt-9, [data-name="bomb_15"] > .gt-9, [data-name="bomb_20"] > .gt-9 {
    font-size: 2.75rem;
    top: 33%;
    -webkit-text-stroke: .5px #5c1a00;
    background: -webkit-linear-gradient(#ff7c01 20%, #ffc267 40%, #ff7c01 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 3px 0px #5c1a00);
}

[data-name="bomb_25"] > .gt-9, [data-name="bomb_50"] > .gt-9 {
    font-size: 3rem;
    top: 35%;
    -webkit-text-stroke: .5px #5c0000;
    background: -webkit-linear-gradient(#ff2701 20%, #ff7967 40%, #ff2701 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 3px 0px #5c0000);
}

[data-name="bomb_100"] > .gt-9, [data-name="bomb_1000"] > .gt-9 {
    top: 37.5%;
    font-size: 3.1rem;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#fcf6fd 40%, #ff6dec 50%, #fcf6fd 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.25px #d408db;
    filter: drop-shadow(0px 3px 0px #000000);
}

.controller {
    background-color: var(--shadow);
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
    margin-top: -15px;
    height: 90px;
}

.controller > .row {
    margin-left: 0px !important;
    align-items: center;
    height: 90px;
}

#spin {
    border: 2px solid white !important;
}

#spin:hover img:first-child,
#spin:active img:first-child {
	transform: rotate(360deg);
}

#autoplay-settings-button:hover img:first-child,
#autoplay-settings-button:active img:first-child {
	transform: rotate(360deg);
}

#autoplay-settings-button, #autoplay-stop-button {
    border: 2px solid transparent;

}

#autoplay-settings-button > img,
#spin > img {
	transition: transform 0.4s ease-in-out;
}

.balance, .bet {
    line-height: 1.35rem;
}

.bet-container {
    background-color: var(--shade);
    border-bottom-left-radius: 1.5rem !important;
    border-top-left-radius: 1.5rem !important;
    padding-left: 15px;
}

#bet-amount::before {
    content: '$';
    margin-right: 2px;
}

#bet-amount-sm::before {
    content: '$';
}

#increase-bet {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#decreasse-bet {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.spin-button-container {
    position: absolute;
    top: -66px;
}

.spin-button {
    background-color: rgba(0, 0, 0, 0.39);
}

.autoplay-button-container {
    margin-left: 100px;
}

.gt-1 {
    font-family: 'Helv', sans-serif;
    font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#ffffff 30%, #48abe0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.25px #7604e0;
}

.gt-2 {
    position: relative;
    font-family: 'Helv', sans-serif;
    font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#ffe600 20%, #ffbd30 30%, #ffab2c 40%, #ff6106 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #ffffff;
}

.gt-2::before {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
    font-size: inherit;
    letter-spacing: -2px;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 6px #000000;
}

.gt-3 {
    font-family: 'Helv', sans-serif;
    font-size: 2.25rem;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#ffe600 20%, #fffbea 30%,  #ffe600 40%);
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.712));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: none !important;
    margin-right: 10px;
    margin-left: 10px;
}

.gt-3::before {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
    font-size: inherit;
    letter-spacing: -2px;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px #7d008d;
}

.gt-4 {
    margin-top: -5px;
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: .5px #9900d6;
    background: -webkit-linear-gradient(#fcff4f 30%, #ffd000 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 4px 3px rgb(0, 0, 0));
    font-size: 2.5rem;
}

.gt-5 {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    text-transform: uppercase;
    background: -webkit-linear-gradient(#ffd901 30%, #e26702 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.781));
    font-size: 3rem;
}

.gt-6 {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    text-transform: uppercase;
    background: -webkit-linear-gradient(#fbff01 20%, #ffee00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.781));
    font-size: 3rem;
}

.gt-7 {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    text-transform: uppercase;
    background: -webkit-linear-gradient(#ffffff 10%, #00ff99 20%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.781));
    font-size: 3rem;
}

.gt-8 {
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    -webkit-text-stroke: 1px #000000;
    color: white;
    text-transform: uppercase;
    font-size: 1.75rem;
    font-weight: 900 !important;
}

.gt-9 {
    position: absolute;
    z-index: 20;
    font-family: 'Helv', sans-serif;
    font-weight: 900 !important;
    /*  
        -webkit-text-stroke: .5px #853500;
        background: -webkit-linear-gradient(#ffbb01 20%, #fff567 40%, #ffbb01 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0px 3px 0px #853500);
    */
    animation-timing-function: ease-in-out;
}

.stripe-green {
    background-image: linear-gradient(135deg, #63cd30 25%, #52b510 25%, #52b510 50%, #63cd30 50%, #63cd30 75%, #52b510 75%, #52b510 100%);
    background-size: 70.71px 70.71px;
}

.stripe-green:hover {
    background-image: linear-gradient(135deg, #7aff3d 25%, #5cc913 25%, #5cc913 50%, #7aff3d 50%, #7aff3d 75%, #5cc913 75%, #5cc913 100%);
    background-size: 70.71px 70.71px;
}

.stripe-red {
    background-image: linear-gradient(135deg, #cd3030 25%, #b51010 25%, #b51010 50%, #cd3030 50%, #cd3030 75%, #b51010 75%, #b51010 100%) ;
    background-size: 70.71px 70.71px;
}

.stripe-red:hover {
    background-image: linear-gradient(135deg, #f53737 25%, #e91717 25%, #e91717 50%, #f53737 50%, #f53737 75%, #e91717 75%, #e91717 100%);
    background-size: 70.71px 70.71px;
}

.stars {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: -2%;
}

.left-star {
    padding-top: 10%;
    width: 20%;
    filter: drop-shadow(0 0 10px rgba(255, 187, 0, 0.75));
}

.middle-star {
    width: 25%;
    filter: drop-shadow(0 0 10px rgba(255, 187, 0, 0.75));

}

.right-star {
    padding-top: 10%;
    width: 20%;
    filter: drop-shadow(0 0 10px rgba(255, 187, 0, 0.75));
}

.small-star {
    position: absolute;
    z-index: 1;
    filter: drop-shadow(-5px -2px 1px rgba(39, 0, 39, 0.6));
}

.small-star:nth-of-type(1) {
    top: 80%;
    left: -2%;
    transform: rotate(-60deg);
    height: 35px;
    width: 35px;
}

.small-star:nth-of-type(2) {
    top: 90%;
    left: -1%;
    transform: rotate(-45deg);
    height: 45px;
    width: 45px;
}

.small-star:nth-of-type(3) {
    top: 80%;
    right: -2%;
    transform: rotate(-60deg);
    height: 35px;
    width: 35px;
}

.small-star:nth-of-type(4) {
    top: 90%;
    right: -1%;
    transform: rotate(-45deg);
    height: 45px;
    width: 45px;
}

.spectacular {
    filter: drop-shadow(0 0 10px rgba(0, 247, 255, 0.75));
    width: 65%;
    margin-top: 30px;
    margin-bottom: 45px;
}

.super {
    filter: drop-shadow(0 0 10px rgba(0, 247, 255, 0.75));
    width: 45%;
    margin-top: 30px;
    margin-bottom: 45px;
}

.amazing {
    filter: drop-shadow(0 0 10px rgba(255, 0, 179, 0.75));
    width: 70%;
    margin-top: 30px;
    margin-bottom: 45px;
}

.mega {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.75));
    width: 45%;
    margin-top: 30px;
    margin-bottom: 45px;
}

.coins-jumping {
    position: absolute;
    bottom: 0px;
    width: 50px;
    height: 50px;
    background-image: url('../images/coin.svg');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    opacity: 1;
    z-index: 1000;
    box-shadow: 
        0px 0px 2px rgb(243, 159, 57),
        2px 2px 0px rgb(194, 107, 0),
        3px 3px 0px rgb(75, 41, 0);
    filter: drop-shadow(0px 0px 15px rgb(255, 208, 0));
}

.coins-falling {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../images/coin.svg');
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1000;
    box-shadow: 
    0px 0px 2px rgb(243, 159, 57),
    2px 2px 0px rgb(194, 107, 0),
    3px 3px 0px rgb(75, 41, 0);
    filter: drop-shadow(0px 0px 15px rgb(255, 208, 0));
}

.sparks {
    position: absolute;
    width: 192px;
    height: 192px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
}

.bombs {
    position: absolute;
    width: 248px;
    height: 248px;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
}

.explosion {
    height: 120px !important;
    width: 120px !important;
    transform: scale(1.25) !important;
}

.scale {
    margin-top: -20px;
}

.blob {
    position: relative;
    background-image: url(../images/splatter.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.blob > * {
    font-size: 4rem;
}

.tumble-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -75px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
}

.tumble-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/supernova.webp);
    opacity: 0.75;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: -1;
}

.tumble-modal-body  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1101;
    animation: 
        zoom 1s forwards,
        pulse 4s var(--e-io) 1s infinite;
}

.tumble-modal > .blob {
    position: relative;
    z-index: 1 !important;
    transform: scale(1.5);
    filter: drop-shadow(0 0 30px rgb(110, 1, 252));
    animation: 
        zoom-1-5 1s forwards,
        pulse-blob 8s var(--e-io) 1s infinite;
}

#tumble-reward-amount {
    font-family: 'Funky', sans-serif !important;
    font-size: 4rem;
    letter-spacing: 10px;
    text-transform: uppercase;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#fcf6fd 40%, #ff6dec 50%, #fcf6fd 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #d408db;
}

#tumble-reward-amount::before {
    content: attr(data-text);
    letter-spacing: 10px;
    position: absolute;
    z-index: -1;
    font-size: inherit;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 3px #000000;
    filter: drop-shadow(-.5px .5px .5px black);
}

#tumble-reward-prefix {
    font-family: 'Funky', sans-serif !important;
    font-size: 4rem;
    letter-spacing: 10px;
    text-transform: uppercase;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#fcf6fd 40%, #ff6dec 50%, #fcf6fd 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #d408db;
}

#tumble-reward-prefix::before {
    content: attr(data-text);
    letter-spacing: 10px;
    position: absolute;
    z-index: -1;
    font-size: inherit;
    font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 3px #000000;
    filter: drop-shadow(-.5px .5px .5px black);
}

.game-modal-body {
    position: relative;
    background-image: url(../images/modal-background.webp) !important;
    background-size: cover;
    z-index: 1;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 20px 15px rgb(0 0 0 / 33%);
    border-radius: 3.25rem !important;
    text-align: center;
    padding-left: 3rem;
    padding-right: 3rem;
}

.game-modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2.5mm;    
    background: linear-gradient(45deg, #ff00b7 25%, #ffb8ec 25%, #ffb8ec 50%, #ff00b7 50%, #ff00b7 75%, #ffb8ec 75%, #ffb8ec 100%);
    background-size: 42.43px 42.43px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.game-modal-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 99.25%;
    width: 99.25%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 3px;
    background: #ffffff8f;
    pointer-events: none;
}

.game-modal > * {
    background-color: transparent !important;
}

.game-modal-text, .game-modal-spins-text {
    padding: .5rem;
}

.game-modal-text > div {
    background: -webkit-linear-gradient(#ffffff 40%, #48abe0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.25px #480177;
    font-size: 2.5rem;
}

.game-modal-text > .gt-1 > .gt-2 {
    font-size: 3.25rem;
}

.game-modal-text > div:nth-child(1) {
    margin-top: 20px;
    margin-bottom: -20px;
}

.game-modal-text > div:nth-child(3) {
    margin-top: -10px;
    margin-bottom: -30px;
}

.game-modal-content {
    margin-top: 150px;
    margin-left: 100px;
}

.tumble-win-container {
    position: absolute;
    margin-top: -5px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tumble-win-header {
    margin-top: -30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    filter: drop-shadow(1px 3px 1.5px rgba(0, 0, 0, 0.897));
    z-index: 5;
    font-family: 'Helv', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: -webkit-linear-gradient(#ffffff 50%, #e048d8 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .5px #7604e0;
}

.tumble-win-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 385px;
    height: 50px;
    z-index: 2;
    border-radius: 15px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 15px 5px rgba(0, 0, 0, .5);
    background: linear-gradient(to bottom, #8400ff 40%, #a200ff 100%);
}

.tumble-win-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: .75mm;    
    background: linear-gradient(45deg, #6f00ff 25%, #e2a4ff 25%, #e2a4ff 50%, #6f00ff 50%, #6f00ff 75%, #e2a4ff 75%, #e2a4ff 100%);
    background-size: 22.63px 22.63px;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.tumble-win-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 96%;
    width: 99.5%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 1px;
    background: #fcf0ff7c;
    pointer-events: none;
}

.tumble-win-body > * {
    margin-top: 3px;
}

#tumble-win-multiplier {
    margin-left: 5px;
    margin-right: 5px;
}

#tumble-win-amount {
    position: relative;
    z-index: 20;
}

#tumble-win-amount::before {
    content: '$';
}

.rotation-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rotation-item {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

.rotation-item.show {
    opacity: 1;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.rotation-container.bonus > .rotation-item.base-rotation {
    display: none !important;
}

.bomb-symbol {
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.65));
    height: 48px;
    margin-top: -20px;
    margin-right: 10px;
}

.scatter-symbol {
    height: 56px;
    width: 56px;
}

.banner {
    width: 50% !important;
    margin-top: -15px;
}

#landing {
    background-image: url(../images/landing-background.webp);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#landing > .row {
    height: 100%;
}

.landing-rotation-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.landing-rotation-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

.landing-rotation-item.show {
    opacity: 1;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.landing-symbol {
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	height: var(--item-height);
	position: relative;
}

.landing-symbol > img:not(.scatter, .bomb){
    width: 67px;
    height: auto;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.landing-symbol > img.scatter, .landing-symbol > img.bomb {
    z-index: 10;
    position: absolute;
    width: 108px !important;
    height: 108px !important;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.landing-symbol:has(
    .banana:nth-child(n+8):nth-child(-n+12),
) {
    animation: bananaCluster 1.5s infinite !important;
}

.landing-symbol:has(
    .grape:nth-child(n+8):nth-child(-n+12),
    .apple:nth-child(n+8):nth-child(-n+12),
    .strawberry:nth-child(n+8):nth-child(-n+12),
    .dragonfruit:nth-child(n+8):nth-child(-n+12)
) {
    animation: clusterJello 1.5s infinite !important;
}

.landing-symbol:has(
    .disk:nth-child(n+8):nth-child(-n+12),
    .crystal:nth-child(n+8):nth-child(-n+12),
    .egg:nth-child(n+8):nth-child(-n+12),
    .icon:nth-child(n+8):nth-child(-n+12)
) {
    animation: clusterJump 1.5s infinite !important;
}

#hide-landing {
    width: 30px;
    height: 30px;
    appearance: none;
    background-color: transparent;
    border: 4px solid rgb(167, 128, 0);
    filter: drop-shadow(0 0 2px rgb(0, 0, 0));
    outline: none;
    position: relative;
    cursor: pointer;
}

#hide-landing::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
    padding: .75mm;    
    background: linear-gradient(180deg, rgb(235, 231, 0) 0%,rgb(235, 180, 0) 100%);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

#hide-landing:checked {
    background-color: transparent;
}

#hide-landing:checked::after {
    content: url(../images/check.svg);
    position: absolute;
    width: 0px;
    height: 0px;
    background-color: black;
    top: -40%;
    left: -40%;
    filter: drop-shadow(1px 1px 1px rgb(0, 0, 0)); /* Add drop-shadow */
}

#hide-landing-text {
    font-size: 1.25rem;
    font-weight: 400 !important;
    text-shadow: 0 0 3px rgb(0, 0, 0);
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
}

#landing-transition {
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 0.753);
    animation: pop 1.25s ease-in-out infinite;
    transition: border .25s ease-in-out, background-color .25s ease-in-out;
    height: 100px;
    width: 100px;
}

#landing-transition:hover {
    border: 4px solid rgb(51, 255, 0);
    background-color: rgba(0, 0, 0, 0.507);
}

#landing-volatility-container {
    border-radius: 24px;
}

.landing-slot {
    position: relative;
    padding: 10px;
    background-image: 
    radial-gradient(rgba(32, 0, 68, 0.05) 14.4%, transparent 14.4%),
    radial-gradient(rgba(32, 0, 68, 0.05) 14.4%, transparent 14.4%);
    background-position: 0px 0px, 7px 7px;
    background-size: 14px 14px;
    background-color: rgba(168, 0, 247, 0.33);
    box-shadow: 0 0px 10px rgba(168, 0, 247, 0.33), inset 0px 0px 5px 5px rgba(0, 0, 0, .5);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2rem;
    margin-bottom: 1rem;
    order: 1;
    width: calc(var(--slot-width) * .7) !important;
    height: calc(var(--slot-height) * .7);
    text-align: center;
}

.landing-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.25mm;    
    background: linear-gradient(45deg, #fff1f1 25%, #ff4747 25%, #ff4747 50%, #fff1f1 50%, #fff1f1 75%, #ff4747 75%, #ff4747 100%);
    background-size: 22.63px 22.63px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.landing-slot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: inherit;
    height: 99.25%;
    width: 99.25%;
    transform: translate(-50%, -50%);
    mask: 
        linear-gradient(black, black) content-box, 
        linear-gradient(black, black);
    mask-composite: exclude;
    padding: 2px;
    background: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

.landing-slot-container {
    flex: 0 0 auto;
    width: 75%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-clip: border-box;
    margin-top: 50px;
}

.landing-slot-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    margin-bottom: -17.5px;
    background-image: url(../images/frosting.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
    overflow: visible;
    z-index: 1;
}

.landing-slot-header.bonus {
    background-image: none !important;
}

.landing-slot-body {
    display: flex;
    flex: 1 1 auto;
}

.landing-reels {
    z-index: 1;
    position: relative;
    overflow: visible;
    text-align: center !important;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    border-radius: 1.5rem;
    padding: 0.25rem;
    width: auto;
}

.landing-reel {
    flex: 1 0 0%;
    border-width: 2px;
    border-style: solid;
    border-image: 
    linear-gradient(180deg, rgba(102,102,120,0) 7.5%, rgba(61, 61, 61, 0.2) 50%, rgba(102,102,102,0) 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
    border-top: none;
    border-bottom: none;
    border-left: none;
	position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(calc(var(--item-height) * 5) * .7);
}

[data-landing-reel="6"] {
    border-right: none !important;
}

.banner.landing {
    width: 80% !important;
    margin-top: -50px;
}

#loading {
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.loading-bar {
    background: rgba(255,255,255,0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 15px;
    width: 500px;
  }
  
.loading-value {
    animation: load 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}