.bonus-body {
	position: relative;
    display: flex;
    margin: 0 auto;
	margin-top: 16px;
    max-width: 860px;
    padding-inline: 12px;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 1024px) {
	.bonus-body {
		padding-inline: 20px;
	}
}

.bonus-body-content {
	width: 100%;
	display: flex;
    gap: 16px;
    flex-direction: column;
}

.bonus-body-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    gap: 16px;
    flex-direction: column;
}

@media (min-width: 1024px) {
	.bonus-body-content {
		gap: 32px;
	}
}

.bonus-body-content > .bonus-container-page:last-child {
	margin-bottom: 16px;
}

#daily-bonus-container {
    background: linear-gradient(70deg, #076cd2 -8%, #008dc3 96%);
    overflow: hidden;
    border-radius: calc(var(--tab-rounding-square-tab) * 2);
}

.bonus-container-background {
	background: #0f467f;
    position: relative;
    border-radius: calc(var(--tab-rounding-square-tab) * 2);
    color: #fff;
    padding: clamp(20px, 3vw, 40px);
}

.bonus-page-background {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100vw, 1440px);
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.bonus-page-background-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* ================================
   BONUS PAGE BACKGROUND DECOR
================================ */

.bonus-page-background {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100vw, 1440px);
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.bonus-page-background-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.bonus-page-background_circle {
    position: absolute;
    width: 320px;
    height: 320px;
    pointer-events: none;
}

.bonus-background_circle {
    position: absolute;
    inset: 0;
    margin: auto;
}


/* Glow base */

.bonus-decor-circle .outer {
    width: 320px;
    height: 320px;
    border-radius: 999px;
    filter: blur(95px);
    opacity: 0.65;
}

.bonus-decor-circle .middle {
    width: 145px;
    height: 145px;
    border-radius: 999px;
    filter: blur(45px);
    opacity: 0.75;
}


/* Glow color variants */

.bonus-decor-blue .outer {
    background: rgba(0, 120, 255, 0.45);
}

.bonus-decor-blue .middle {
    background: rgba(0, 220, 255, 0.35);
}

.bonus-decor-purple .outer {
    background: rgba(120, 70, 255, 0.35);
}

.bonus-decor-purple .middle {
    background: rgba(0, 170, 255, 0.25);
}

.bonus-decor-orange .outer {
    background: rgba(255, 125, 0, 0.28);
}

.bonus-decor-orange .middle {
    background: rgba(255, 190, 0, 0.2);
}


/* Center image.
   background-image сюда НЕ ставим.
   JS сам добавит картинку через style.backgroundImage.
*/

.bonus-decor-circle .center {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: bonusDecorFloat 6s ease-in-out infinite;
    will-change: transform, translate;
	max-width: 200px;
}


/* Когда JS создаёт элемент без картинки */

.bonus-decor-circle.is-empty-decor .center {
    display: none;
}


/* Типы размеров для картинок */

.bonus-decor-image-gift .center {
    width: 220px;
    height: 220px;
}

.bonus-decor-image-dollar .center {
    width: 260px;
    height: 150px;
}

.bonus-decor-image-coin .center {
    width: 170px;
    height: 170px;
}

.bonus-decor-image-custom .center {
    width: var(--decor-image-width, 220px);
    height: var(--decor-image-height, 220px);
}


@keyframes bonusDecorFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}

@media (max-width: 1024px) {
    .bonus-page-background {
        display: none;
    }
}

.bonus-monthly_root {
	background: #101a31;
	position: relative;
	border-radius: calc(var(--tab-rounding-square-tab) * 2);
	color: #fff;
	overflow: hidden;
}

.bonus-monthly_root picture img {
	width: 100%;
}

.bonus-monthly_tickets_root {
	padding: 0 var(--spacing-16) var(--spacing-16);
    margin-top: -12px;
	
}

@media (min-width: 1024px) {
    .bonus-monthly_tickets_root {
        padding: 0 var(--spacing-40) var(--spacing-40);
        margin-top: 4px;
    }
}

.bonus-monthly_tickets_container {
	gap: 16px;
	flex-direction: column;
	display: flex;
}

.bonus-monthly_header_root {
	display: flex;
	gap: 8px;
	flex-direction: column;
}

.bonus-monthly_header_title {
	font-size: 12px;
	font-weight: 400;
}

.bonus-monthly_header_subtitle-container {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.bonus-monthly_header_tickets-title {
	font-size: 16px;
	font-weight: 600;
}

.bonus-monthly_header_tickets-numbers {
	font-size: 16px;
	font-weight: 700;
}

.bonus-monthly_header_details-container {
	margin-inline-start: auto;
	font-size: 12px;
	color: var(--white-1);
	cursor: pointer;
}

.bonus-monthly_header_details-title {
	display: flex;
	align-items: center;
	gap: 4px;
}

.bonus-monthly_buttons-container {
	gap: var(--spacing-12);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .bonus-monthly_buttons-container {
        flex-direction: row;
        margin-inline-end: auto;
    }
}

.bonus-monthly_button {
    border-radius: var(--tab-rounding-square-tab);
    background-color: var(--color-text-main);
    color: var(--color-bg-card-soft);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    padding: 12px 32px;
    transition: .1s ease;
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.bonus-monthly_button:hover {
    background-color: var(--color-text-main);
    color: var(--color-bg-card-soft-hover);
    box-shadow: var(--shadow-card);
}

.bonus-monthly_button:active {
    opacity: 0.86;
}


.bonus-background_circle {
	position: absolute;
	inset: 0;
	margin: auto;
}

.bonus-container-img {
	position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
	border-radius: 15px;
}

.bonus-container-text {
    line-height: 40px;
    margin-bottom: 32px;
    max-width: 357px;
    min-height: 163px;
	height: 100%;
    position: relative;
    font-weight: 700;
    letter-spacing: -.8px;
	display: flex;
    flex-direction: column;
	justify-content: space-between;
}

.bonus-container-text-2 {
	max-width: clamp(200px, 27vw, 357px);
}

.bonus-container-text-h {
	font-size: clamp(28px, 4vw, 48px);
	margin-bottom: 12px;
}

.bonus-container-text-m {
	font-size: clamp(18px, 2vw, 32px);
	line-height: 1.4;
}

.bonus-container-text-l {
	font-size: clamp(16px, 1.5vw, 22px);
    letter-spacing: normal;
    font-weight: 200;
    line-height: 1.4;
    display: flex;
}

.bonus-background-1 {
	border: 1px solid var(--border-default);
	aspect-ratio: 2.625;
    height: auto;
    background: none;
    padding: 0;
    overflow: hidden;
}

.bonus-banner-1 {
	background-image: url(/img/bonus/bonus1.png);
    width: clamp(340px, 44vw, 560px);
    height: clamp(200px, 26vw, 330px);
    top: clamp(20px, calc(55px - 2vw), 50px);
    right: -15px;
}

.bonus-background-2 {
	background: radial-gradient(circle at 100% 100%, #99659e 0%, #8b47a5 60%);
	height: 370px;
	overflow: hidden;
}

.bonus-banner-2 {
	background-image: url(/img/bonus/bonus2.png);
	width: clamp(380px, 48vw, 500px);
    height: clamp(300px, 36vw, 350px);
    top: 20px;
    right: 0px;
}

.bonus-background-3 {
    background: linear-gradient(70deg, #076cd2 -8%, #008dc3 96%);
    overflow: hidden;
    height: auto;
}

.bonus-container-text-3 {
    gap: 24px;
    max-width: 100%;
    margin-bottom: 0;
}



.scratch-container {
	position: relative;
	width: 100%;
	height: 200px;
	background: #002fa7;
	border-radius: var(--modal-rounding);
	overflow: hidden;
}

.scratch-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 86px;
    font-weight: 800;
    color: var(--color-orange);
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.6s ease, transform 0.6s ease;
	transform: scale(1);
}

.scratch-value.revealed {
	transform: scale(1.15);
	text-shadow: 0 0 6px var(--color-orange);
}

#scratch-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	z-index: 2;
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 46.7 46.7"><path fill="%231e2225" d="M20.94.03c2.11.23,3.55,1.81,4.82,3.32,2.27,2.68,4.03,5.79,6.26,8.48.58.09,1.16.14,1.52.67,3.22,5.09,6.78,10.02,9.78,15.25,1.97,3.43,2.79,6.2-.72,8.98-2.37,1.88-5.85,4-8.47,5.64-2.12,1.34-6.64,4.12-9.05,4.24-3.08.15-5.28-2.25-7.01-4.47-3.04-3.92-5.66-8.3-8.69-12.24-.35-.6-.18-1.22-.06-1.84-1.94-2.9-4.39-5.68-6.19-8.65C.16,14.46,2.15,10.38,6.1,6.81,8.77,4.4,15.67.39,19.21.03c.43-.04,1.3-.05,1.73,0ZM18.92,1.42c-3.02.31-9.18,3.42-11.4,5.53-2.53,2.4,1.12,7.11,2.61,9.21,1.35,1.91,2.8,3.75,4.22,5.61.81-.74,1.78-1.27,2.72-1.83,4.4-2.63,9.02-4.92,13.47-7.46l.24-.22c-1.73-2.33-3.25-4.84-5.05-7.12-2-2.52-3.24-4.07-6.79-3.71ZM9.93,27.05l3.62-4.5c-2.31-3.21-5-6.37-6.82-9.9-.29-.57-.53-1.05-.69-1.68-.2-.83-.26-1.63-.16-2.47-1.56,1.62-3.38,4.35-3.23,6.68.14,2.13,1.82,4.3,3.02,5.99,1.39,1.97,2.96,3.86,4.26,5.88ZM30.32,13.86c-4.48,2.43-9.29,4.96-13.63,7.63-.31.19-1.12.64-1.31.88-.07.08-.12.12-.04.23,3.15,4.38,6.17,8.86,9.35,13.22,1.01,1.39,2.05,2.92,3.13,4.24.97,1.18,2.3,2.69,4.02,2.3,3.28-2.42,7.25-4.29,10.4-6.84,2.56-2.07,2.03-3.94.65-6.61-2.82-5.47-6.86-10.65-10.21-15.82-.55-.48-1.67.31-2.22.61-.08.04-.12.15-.15.17ZM30.41,43.16c-1.36-.28-2.41-1.31-3.28-2.32-1.85-2.16-3.67-4.72-5.36-7.02-2.5-3.41-4.88-6.9-7.26-10.4l-.23-.05c-.17.19-.37.36-.54.55-.86.95-2.57,3.08-3.23,4.15-.52.85-.51,1.03.02,1.88,2.03,3.23,4.74,6.8,7.05,9.88,1.49,2,3.76,5.52,6.49,5.71,1.6.11,4.95-1.16,6.22-2.16.07-.06.17,0,.12-.21Z" /><path fill="%23348efe" d="M30.32,13.86c3.12,4.57,6.37,9.1,9.23,13.84,1.12,1.85,2.77,4.29,2.79,6.49,0,.46-.14.87-.1,1.32-3.16,2.56-7.12,4.42-10.4,6.84-1.72.38-3.04-1.12-4.02-2.3-1.09-1.32-2.12-2.85-3.13-4.24-3.18-4.36-6.2-8.84-9.35-13.22-.08-.1-.02-.15.04-.23.19-.24,1-.69,1.31-.88,4.33-2.67,9.14-5.2,13.63-7.63Z"/><path fill="%23d1d7e9" d="M18.92,1.42c3.55-.36,4.8,1.19,6.79,3.71,1.8,2.28,3.32,4.79,5.05,7.12l-.24.22c-4.45,2.54-9.07,4.83-13.47,7.46-.94.56-1.91,1.09-2.72,1.83-1.42-1.86-2.87-3.7-4.22-5.61-1.49-2.11-5.14-6.81-2.61-9.21,2.22-2.11,8.38-5.22,11.4-5.53Z"/><path fill="%232272d5" d="M30.41,43.16c.05.21-.04.15-.12.21-1.27,1-4.61,2.27-6.22,2.16-2.73-.19-5-3.71-6.49-5.71-2.3-3.08-5.02-6.65-7.05-9.88-.53-.85-.54-1.02-.02-1.88.65-1.06,2.37-3.19,3.23-4.15.17-.19.37-.36.54-.55l.23.05c2.37,3.49,4.76,6.99,7.26,10.4,1.69,2.3,3.51,4.86,5.36,7.02.87,1.02,1.91,2.04,3.28,2.32Z"/><path fill="%23b3bae0" d="M9.93,27.05c-1.3-2.03-2.87-3.91-4.26-5.88-1.2-1.69-2.88-3.86-3.02-5.99-.15-2.34,1.67-5.06,3.23-6.68-.1.85-.04,1.65.16,2.47.15.63.39,1.11.69,1.68,1.82,3.53,4.52,6.69,6.82,9.9l-3.62,4.5Z"/><path fill="%23b3bae0" d="M42.24,35.51c-.04-.46.1-.87.1-1.32-.02-2.2-1.67-4.64-2.79-6.49-2.87-4.73-6.11-9.27-9.23-13.84.02-.01.07-.12.15-.17.55-.29,1.67-1.09,2.22-.61,3.35,5.17,7.39,10.34,10.21,15.82,1.38,2.67,1.91,4.54-.65,6.61Z"/><path fill="%23d1d7e9" d="M28.86,21.04c.06.11.11.22.16.34,1.07,2.4,2.08,4.83,3.13,7.24.45,1.24.21,2.72-.87,3.55-.59.46-1.36.7-2.04.29-.57-.34-.83-.98-1.06-1.57l1.52-1.14c.13.27.31.97.74.68.25-.17.25-.48.15-.73l-2.68-6.14-.83.57-.65-1.33,2.43-1.76Z"/><path fill="%23d1d7e9" d="M30.75,22.01c.72-.49,1.16-.12,1.5.57.42.85.75,1.81,1.15,2.68.22.64.19,1.32-.34,1.79-.8.72-1.43.19-1.76-.65-.31-.83-.77-1.65-1.07-2.49-.26-.73-.14-1.44.53-1.9ZM31.13,22.95c-.18.12-.11.37-.05.53.32.85.77,1.67,1.1,2.52.06.11.17.32.32.25.19-.09.12-.39.05-.54-.4-.81-.69-1.72-1.1-2.52-.06-.12-.17-.34-.33-.24Z"/><polygon fill="%23d1d7e9" points="33.56 19.9 34.39 23.75 35.1 25.38 34.36 25.94 33.64 24.3 31.53 21.4 32.33 20.83 33.27 22.33 32.77 20.49 33.56 19.9"/><polygon fill="%23d1d7e9" points="26.13 25.54 26.55 26.5 25.77 27.09 26.19 28.06 26.94 27.51 27.35 28.44 26.6 29.01 27.1 30.13 27.12 30.14 27.93 29.55 28.36 30.48 28.35 30.51 26.71 31.73 24.54 26.73 26.13 25.54"/><polygon fill="%23d1d7e9" points="27.91 24.19 28.34 25.15 27.87 25.5 27.87 25.52 29.63 29.56 28.82 30.15 27.06 26.11 26.58 26.45 26.17 25.51 27.91 24.19"/><path fill="%23d1d7e9" d="M25.02,29.33l.25-.02c.3.05.49.43.61.67.41.81.76,1.8-.07,2.46-.35.28-.74.53-1.09.81l-2.17-5.02,1.1-.83c.71-.46,1-.1,1.31.55.19.41.39.97.06,1.36ZM24.14,29.55c.16-.12.28-.15.25-.37-.02-.16-.23-.66-.32-.8-.14-.22-.27-.04-.42.07l.49,1.11ZM25.11,31.79c.16-.09.3-.25.29-.44,0-.16-.25-.7-.34-.87-.11-.21-.2-.4-.45-.25-.04.02-.15.09-.12.14l.62,1.42Z"/></svg>') 24 24, crosshair;
	touch-action: none;
}

.scratch-overlay {
	position: absolute;
	inset: 0;
	background: #002fa7;
	z-index: 0;
}

.scratch-start-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 10;
	border: none;
	font-size: 1.5rem;
	font-weight: 800;
	color: white;
	background: radial-gradient(circle at 65% 55%, #f56719 10%, rgb(255 212 0) 180%);
	box-shadow: 0 10px 30px rgba(245,158,11,0.5);
	cursor: pointer;
	transition: all 0.3s ease;
}

.scratch-start-btn:hover {
	transform: scale(1.05);
}

.scratch-btn-container {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 100;
	transition: all 0.3s ease;
}

.scratch-cooldown {
    position: relative;
    z-index: 5;
    height: 100%;
    width: 100%;
    display: flex;
    text-align: center;
    animation: scratch-fadeIn 0.4s ease;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
	padding-block: 12px;
}

.scratch-cooldown.hidden {
  display: none;
}

.scratch-cooldown-container {
	padding: 12px;
}

.scratch-cooldown-title {
	font-size: 28px;
    font-weight: 800;
    color: var(--color-orange);
	text-transform: uppercase;
}

.scratch-cooldown-sub {
	color: var(--color-text-main);
    font-size: 18px;
    font-weight: 600;
}

.scratch-progress {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
}

.scratch-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--color-orange-active) 0%, var(--color-orange) 52%, var(--color-orange-hover) 100%);
  transition: width 1s linear;
}

.scratch-timer {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

@keyframes scratch-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cards-grid {
	justify-content: space-between;
    align-self: stretch;
    gap: var(--spacing-8);
    grid-template-columns: repeat(auto-fill, 26px);
    display: grid;
}

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, 26px);
    }
}

.card-container {
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-body-semibold-font-weight);
    letter-spacing: var(--font-body-semibold-letter-spacing);
    line-height: var(--font-body-semibold-line-height);
    --bonus-monthly-ticket-width-mobile: 26px;
    --bonus-monthly-ticket-width-desktop: 26px;
    --bonus-monthly-ticket__check-size: 14px;
    --bonus-monthly-ticket__check-border-width: var(--border-m);
	width: var(--bonus-monthly-ticket-width-mobile);
    height: 28px;
    padding: 3px 0;
    text-align: center;
    position: relative;
	color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .card-container {
        font-size: var(--font-caption-s-semibold-font-size);
        font-weight: var(--font-caption-s-semibold-font-weight);
        letter-spacing: var(--font-caption-s-semibold-letter-spacing);
        line-height: var(--font-caption-s-semibold-line-height);
        --bonus-monthly-ticket__check-size: 13px;
        --bonus-monthly-ticket__check-border-width: var(--border-s);
        width: var(--bonus-monthly-ticket-width-desktop);
        height: 26px;
    }
}

.card-container-ticket_bg {
    fill: currentColor;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.card-container-ticket_check {
    color: var(--color-green-active);
    fill: currentColor;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card-container.active-ticket .card-container-ticket_check {
	display: block;
}

.card-container.active-ticket .card-container-ticket_bg {
	display: none;
}

.card-container.active-ticket > .card-container-number {
	display: none;
}

.card-container.active-ticket {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, filter 0.16s ease;
}


.card-container.active-ticket:focus-visible {
    outline: 2px solid var(--color-green-active, #19d685);
    outline-offset: 3px;
    border-radius: 6px;
}

.monthly-ticket-popover {
    --ticket-popover-arrow-left: 50%;
    position: fixed;
    z-index: 10050;
    width: min(250px, calc(100vw - 20px));
    padding: 14px;
    border-radius: 14px;
    color: var(--color-text-main, #fff);
    background: linear-gradient(#066cd1, #0f2240);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(5px) scale(0.96);
    transform-origin: var(--ticket-popover-arrow-left) bottom;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    isolation: isolate;
}

.monthly-ticket-popover[hidden] {
    display: none;
}

.monthly-ticket-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.monthly-ticket-popover[data-placement="bottom"] {
    transform-origin: var(--ticket-popover-arrow-left) top;
}

.monthly-ticket-popover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 38%);
    pointer-events: none;
}

.monthly-ticket-popover::after {
    content: "";
    position: absolute;
    left: var(--ticket-popover-arrow-left);
    width: 10px;
    height: 10px;
    
    transform: translateX(-50%) rotate(45deg);
}

.monthly-ticket-popover[data-placement="top"]::after {
    bottom: -5px;
	background: #0f2240;
}

.monthly-ticket-popover[data-placement="bottom"]::after {
    top: -5px;
	background: #066cd1;
}

.monthly-ticket-popover__eyebrow {
    color: var(--color-green-active, #19d685);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.monthly-ticket-popover__title {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}

.monthly-ticket-popover__date {
    color: var(--color-text-soft, rgba(255, 255, 255, 0.68));
    font-size: 12px;
    line-height: 1.35;
}

.monthly-ticket-popover__list {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}

.monthly-ticket-popover__ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 8px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
}

.monthly-ticket-popover__label {
    grid-column: 1 / -1;
    color: var(--color-text-soft, rgba(255, 255, 255, 0.62));
    font-size: 10px;
    line-height: 1.2;
}

.monthly-ticket-popover__value {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-ticket-popover__numeric-id {
    color: var(--color-green-active, #19d685);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
}

.monthly-ticket-popover__empty {
    color: var(--color-text-soft, rgba(255, 255, 255, 0.62));
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .card-container.active-ticket,
    .monthly-ticket-popover {
        transition: none;
    }
}

.promotion-modal {
	position: absolute;
    height: 100%;
    width: 100%;
	inset: 100%;
    opacity: 0;
    pointer-events: none;
	transition: .3s ease;
	left: 0%;
}

.promotion-modal.open {
	inset: 0%;
    opacity: 1;
    pointer-events: auto;
	left: 0%;
}

.promotion-modal-container {
	height: 100%;
	width: 100%;
	background: #0f2240;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.promotion-modal-header {
	position: relative;
	width: 100%;
	background: linear-gradient(#066cd1, #0f2240);
}

.promotion-modal-close-container {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	width: 100%;
	padding: 22px;
	top: 0;
}

.promotion-modal-header-text {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	font-weight: 800;
	flex-direction: column;
	color: var(--white-1);
}

.promotion-modal-content {
	position: relative;
	padding: 0 26px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

.promotion-modal-rules {
	white-space: pre-line;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
}

.heading_root.bonus-page {
	font-size: 28px;
    line-height: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-transform: none;
    font-weight: 600;
}

.heading_root picture {
	display: contents;
}

.heading_root picture img {
	display: block;
}

.modal-winners-list_content {
    color: var(--color-content-base-primary);
    padding-inline: var(--modal-padding-modal-mobile);
}

@media (min-width: 1024px) {
    .modal-winners-list_content {
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-winners-list_giveawaysTitle {
    font-size: var(--font-headline-h4-mobile-font-size);
    font-weight: var(--font-headline-h4-mobile-font-weight);
    letter-spacing: var(--font-headline-h4-mobile-letter-spacing);
    line-height: var(--font-headline-h4-mobile-line-height);
    text-transform: var(--font-headline-text-case);
    text-wrap: balance;
}

@media (min-width: 1024px) {
    .modal-winners-list_giveawaysTitle {
        font-size: var(--font-headline-h4-desktop-font-size);
        font-weight: var(--font-headline-h4-desktop-font-weight);
        letter-spacing: var(--font-headline-h4-desktop-letter-spacing);
        line-height: var(--font-headline-h4-desktop-line-height);
    }
}

.modal-winners-list_giveawaysTitle {
    align-items: center;
    display: flex;
}

.modal-winners-list_arrows {
    gap: var(--spacing-4);
    margin-inline-start: auto;
    display: flex;
}

@media (max-width: 1024px) {
	.modal-winners-list_arrows {
		display: none;
	}
}

.modal-winners-list_gifts {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: auto;
}

.modal-winners-list_giftsList {
    gap: var(--spacing-8);
    width: fit-content;
    display: flex;
}

.gifts-tab_root {
    border-radius: 0 0 var(--rounding-container-s)var(--rounding-container-s);
    cursor: pointer;
    width: 112px;
    height: 100px;
    position: relative;
}

.modal-winners-list_giftsList > * {
    flex-shrink: 0;
}

.gifts-tab_title {
    border-radius: var(--rounding-container-s);
    background-color: var(--border-default, #b3b6bd14);
    height: 76px;
    color: var(--color-text-soft);
    padding-block: 36px var(--spacing-8);
    padding-inline: var(--spacing-8)var(--spacing-8);
    position: absolute;
    inset: auto 0 0;
    overflow: hidden;
}

.gifts-tab_title {
    font-size: var(--font-caption-s-semibold-font-size);
    font-weight: var(--font-caption-s-semibold-font-weight);
    letter-spacing: var(--font-caption-s-semibold-letter-spacing);
    line-height: var(--font-caption-s-semibold-line-height);
}

.gifts-tab_title.gifts-tab_selected {
    background: linear-gradient(#066cd2, #101a31);
    color: var(--color-text-main);
}

.picture-v2_root {
    display: contents;
}

.picture-v2_animated {
    opacity: 0;
    transition: opacity .28s ease-in;
}

.gifts-tab_image {
    width: 84px;
    margin: auto;
    position: absolute;
    inset: 0 0 32px;
}

.picture-v2_animated.picture-v2_loaded {
    opacity: 1;
}

.modal-winners-list_winningTitle {
    font-size: var(--font-headline-h3-mobile-font-size);
    font-weight: var(--font-headline-h3-mobile-font-weight);
    letter-spacing: var(--font-headline-h3-mobile-letter-spacing);
    line-height: var(--font-headline-h3-mobile-line-height);
    text-transform: var(--font-headline-text-case);
    text-wrap: balance;
    margin-block-start: var(--spacing-24);
}

@media (min-width: 1024px) {
    .modal-winners-list_winningTitle {
        font-size: var(--font-headline-h3-desktop-font-size);
        font-weight: var(--font-headline-h3-desktop-font-weight);
        letter-spacing: var(--font-headline-h3-desktop-letter-spacing);
        line-height: var(--font-headline-h3-desktop-line-height);
    }
}

.modal-winners-list_winningSubtitle {
    font-size: var(--font-caption-s-regular-font-size);
    font-weight: var(--font-caption-s-regular-font-weight);
    letter-spacing: var(--font-caption-s-regular-letter-spacing);
    line-height: var(--font-caption-s-regular-line-height);
    margin-block-start: var(--spacing-4);
}

.modal-winners-list_winningDuration {
    color: var(--color-text-soft);
    gap: var(--spacing-4);
    font-size: var(--font-caption-s-regular-font-size);
    font-weight: var(--font-caption-s-regular-font-weight);
    letter-spacing: var(--font-caption-s-regular-letter-spacing);
    line-height: var(--font-caption-s-regular-line-height);
    margin-block-start: var(--spacing-12);
    display: flex;
}

.modal-winners-list_tableRow {
    color: var(--color-text-soft);
    margin-block: var(--spacing-24)var(--spacing-8);
    font-size: var(--font-caption-s-regular-font-size);
    font-weight: var(--font-caption-s-regular-font-weight);
    letter-spacing: var(--font-caption-s-regular-letter-spacing);
    line-height: var(--font-caption-s-regular-line-height);
    justify-content: space-between;
    display: flex;
}

.modal-winners-list_winners {
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1 1 0;
    min-height: 132px;
    overflow-y: auto;
}

.winner-item_root {
    border-bottom: 1px solid var(--border-default);
    color: var(--color-content-base-primary);
    align-items: center;
    gap: var(--spacing-8);
    padding-block: var(--spacing-12);
    padding-inline: var(--spacing-16);
    display: flex;
}

.winner-item_root.winner-item_winner {
    border: var(--border-none);
    border-radius: var(--rounding-container-s);
    background: var(--color-primary);
}

.winner-item_id {
    font-size: var(--font-body-regular-font-size);
    font-weight: var(--font-body-regular-font-weight);
    letter-spacing: var(--font-body-regular-letter-spacing);
    line-height: var(--font-body-regular-line-height);
}

.winner-item_winner .winner-item_id {
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-body-semibold-font-weight);
    letter-spacing: var(--font-body-semibold-letter-spacing);
    line-height: var(--font-body-semibold-line-height);
}

.winner-item_icon {
    color: var(--color-info);
    margin-inline: 0;
}

.winner-item_title {
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-body-semibold-font-weight);
    letter-spacing: var(--font-body-semibold-letter-spacing);
    line-height: var(--font-body-semibold-line-height);
    margin-inline-start: auto;
}

.modal-info_bonus-rules_root {
    padding: 0 var(--spacing-16) var(--spacing-16);
    gap: var(--spacing-16);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-info_bonus-rules_root-oyeez {
        padding: 0 var(--spacing-20) var(--spacing-20);
    }
}

.modal-info_bonus-rules_subtitle {
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-body-semibold-font-weight);
    letter-spacing: var(--font-body-semibold-letter-spacing);
    line-height: var(--font-body-semibold-line-height);
	color: var(--color-text-main);
}

.modal-info_bonus-rules_title {
    font-size: var(--font-display-body-semibold-font-size);
    font-weight: var(--font-display-body-semibold-font-weight);
    letter-spacing: var(--font-display-body-semibold-letter-spacing);
    line-height: var(--font-display-body-semibold-line-height);
	color: var(--color-text-main);
}

.modal-info_bonus-rules_block {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.modal-info_bonus-rules_description {
    font-size: var(--font-body-regular-font-size);
    font-weight: var(--font-body-regular-font-weight);
    letter-spacing: var(--font-body-regular-letter-spacing);
    line-height: var(--font-body-regular-line-height);
	color: var(--color-text-soft);
}


.modal-container_card-root.bonus-monthly {
	background: linear-gradient(#066cd1, #0f2240);
}

.modal-container_card-root.bonus-lucky_scratch {
	background: linear-gradient(#0061f0, #002fa7);
}

.modal-container_card-root.bonus-lucky_scratch-info {
	background: #002fa7;
}

.modal-container_card-root.bonus-mystery_slot {
	background: linear-gradient(#7ecc3d, #45a60d);
}

.modal-container_card-root.bonus-mystery_slot-info {
	background: #45a60d;
}

.modal-bonus_imageWrapper {
    justify-content: center;
    display: flex;
    position: absolute;
	pointer-events: none;
    inset-block-end: 100%;
    inset-inline: 0;
}

.modal-bonus_imageWrapper picture {
	display: contents;
}

.modal-bonus_imageWrapper picture img {
    width: 390px;
    max-width: 100%;
    position: relative;
    bottom: -79px;
	display: block;
}

@media (min-width: 1024px) {
    .modal-bonus_imageWrapper picture img {
        bottom: -90px;
    }
}



.modal-bonus_header {
    padding: var(--modal-padding-modal-desktop) var(--modal-padding-modal-desktop) var(--spacing-24) var(--modal-padding-modal-desktop);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 66px;
    display: flex;
    box-shadow: 0 0 #fff3;
}

.modal-bonus_title {
    font-size: var(--font-headline-h2-mobile-font-size);
    font-weight: var(--font-headline-h2-mobile-font-weight);
    letter-spacing: var(--font-headline-h2-mobile-letter-spacing);
    line-height: var(--font-headline-h2-mobile-line-height);
    text-transform: var(--font-headline-text-case);
    text-wrap: balance;
    white-space-collapse: preserve-breaks;
}

@media (min-width: 1024px) {
    .modal-bonus_title {
        font-size: var(--font-headline-h2-desktop-font-size);
        font-weight: var(--font-headline-h2-desktop-font-weight);
        letter-spacing: var(--font-headline-h2-desktop-letter-spacing);
        line-height: var(--font-headline-h2-desktop-line-height);
    }
}

.modal-bonus_title {
	color: var(--color-text-main);
    text-align: center;
    text-wrap: auto;
}

.modal-bonus_description {
    font-size: var(--font-body-regular-font-size);
    font-weight: var(--font-body-regular-font-weight);
    letter-spacing: var(--font-body-regular-letter-spacing);
    line-height: var(--font-body-regular-line-height);
    color: var(--color-text-soft);
    margin-block-start: var(--spacing-12);
}

.modal-bonus_close-button {
    background-color: unset;
    color: var(--color-text-main);
    cursor: pointer;
    align-items: center;
    gap: var(--spacing-4);
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    display: inline-flex;
	z-index: 1;
    position: absolute;
    inset-block-start: var(--modal-padding-modal-desktop);
    inset-inline-end: var(--modal-padding-modal-desktop);
}

.modal-bonus_close-button svg {
	padding: var(--spacing-2);
	fill: currentColor;
    display: block;
}

.modal-bonus_content {
    padding: 0 var(--modal-padding-modal-desktop);
    flex-shrink: 1;
    overflow: hidden auto;
	padding-bottom: var(--modal-padding-modal-desktop);
}

.modal-bonus-monthly_cells {
    gap: var(--spacing-12);
    display: grid;
}

.modal-bonus-template-cell_root {
    border-radius: var(--rounding-container-m);
    background: var(--border-default, #b3b6bd14);
	border: 1px solid var(--border-default);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 56px;
    padding-inline: var(--spacing-16) var(--spacing-12);
    display: flex;
}

.modal-bonus-template-cell_label {
    padding: var(--spacing-16) 0;
    color: var(--color-text-main);
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-body-semibold-font-weight);
    letter-spacing: var(--font-body-semibold-letter-spacing);
    line-height: var(--font-body-semibold-line-height);
}

.modal-bonus-icon-box_root {
    display: block;
	width: 16px;
    height: 16px;
}

.modal-bonus-icon-box_root svg {
	color: var(--color-green);
	fill: currentColor;
    width: 100%;
    height: 100%;
    display: block;
}

.modal-bonus-badge-base_text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	margin-inline-start: var(--spacing-4);
	padding-inline: var(--spacing-4);
}

.modal-bonus-monthly_button {
    margin-top: var(--spacing-24);
}

.modal-lucky-scratch-steps_steps {
    gap: var(--spacing-12);
    flex-direction: column;
    display: flex;
}

.modal-lucky-scratch-steps_stepsItem {
    padding: var(--spacing-16);
    border: 1px solid var(--border-default);
    border-radius: var(--rounding-container-m);
    background: var(--border-default, #b3b6bd14);
}

.modal-lucky-scratch-steps_stepsItemTitle {
    font-size: var(--font-display-body-semibold-font-size);
    font-weight: var(--font-display-body-semibold-font-weight);
    letter-spacing: var(--font-display-body-semibold-letter-spacing);
    line-height: var(--font-display-body-semibold-line-height);
    margin-top: var(--spacing-8);
    color: var(--color-content-base-static-white);
}

.modal-lucky-scratch-steps_stepsItemTitle {
    font-size: var(--font-display-body-semibold-font-size);
    font-weight: var(--font-display-body-semibold-font-weight);
    letter-spacing: var(--font-display-body-semibold-letter-spacing);
    line-height: var(--font-display-body-semibold-line-height);
    margin-top: var(--spacing-8);
    color: var(--color-text-main);
}

.modal-lucky-scratch-steps_stepsItemDescription {
    font-size: var(--font-body-regular-font-size);
    font-weight: var(--font-body-regular-font-weight);
    letter-spacing: var(--font-body-regular-letter-spacing);
    line-height: var(--font-body-regular-line-height);
    margin-top: var(--spacing-6);
    color: var(--color-text-main);
}

.modal-lucky-scratch-steps_button {
    margin-top: var(--spacing-16);
}

.modal-bonus-block_button {
    --button-width: 140px;
}

.modal-bonus_button-info_root {
    background-color: unset;
    color: var(--color-text-soft);
    cursor: pointer;
    align-items: center;
    gap: var(--spacing-4);
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    display: inline-flex;
	position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
	box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 65%);
    border-radius: 999px;
}

.modal-bonus_button-info_root:hover {
	color: var(--color-text-main);
}

.modal-bonus_button-info_root:active {
	opacity: 0.86;
}

.modal-bonus_button-info_root div {
	display: contents;
}

.modal-bonus_button-info_root div svg {
	fill: currentColor;
    display: block;
}

.button-monthly_claim-ticket span {
	display: block;
	min-width: 0 !important;
}



.button-monthly_claim-ticket svg {
	fill: currentColor;
	display: none;
}

.button-monthly_claim-ticket:disabled span {
	display: none;
	min-width: 70px !important;
}

.button-monthly_claim-ticket:disabled svg {
	display: block;
}

/* ========================================================= */
/* Slot root                                                  */
/* ========================================================= */
.mystery-slot,
.mystery-slot *,
.mystery-slot *::before,
.mystery-slot *::after {
  box-sizing: border-box;
}

.mystery-slot {
  --ms-base-width: 576px;
  --ms-scale: 1;

  --ms-symbol-size: 140px;
  --ms-gap: 14px;
  --ms-slot-pad: 28px;
  --ms-frame-pad: 22px;
  --ms-well-pad: 14px;

  --ms-bulb-size: 7px;
  --ms-bulb-inset: 9px;
  --ms-title-size: 18px;
  --ms-spin-pad-x: 56px;
  --ms-spin-pad-y: 16px;
  --ms-spin-size: 17px;

  --ms-frame-color: #f5c518;
  --ms-frame-color-2: #ffe066;
  --ms-bg: linear-gradient(180deg, #2bd24c 0%, #138a36 100%);
  --ms-accent: #ffe066;
  --ms-accent-2: #b8ffc6;

  position: relative;
  width: 100%;
  max-width: var(--ms-base-width);
  margin-inline: auto;
  overflow: hidden;
  user-select: none;
  isolation: isolate;
}

/* ========================================================= */
/* Title                                                      */
/* ========================================================= */
.mystery-slot__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 16px;
  padding: 8px 18px;
  width: fit-content;
  min-width: 60%;
  border-radius: 999px;
  font-size: var(--ms-title-size);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #181818 0%, #050505 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(245, 197, 24, 0.7),
    0 6px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.mystery-slot__title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5c518;
  box-shadow: 0 0 10px #f5c518;
}

.modal-bonus_content.bonus-mystery_slot {
	padding: var(--modal-padding-modal-desktop);
	background: #45a60d;
}

/* ========================================================= */
/* Reel frame                                                 */
/* ========================================================= */
/* The outer gold-cast frame --------------------------------------------- */
.mystery-slot__frame {
  position: relative;
  z-index: 1;
  padding: var(--ms-frame-pad);
  border-radius: 0;
  background:
    linear-gradient(180deg,
      #fff5b8 0%,
      #ffe066 14%,
      #f5c518 38%,
      #c98c0c 62%,
      #8a5e08 88%,
      #b07412 100%);
}

/* Hairline highlight band along the bezel top */
.mystery-slot__frame::before {
  content: "";
  position: absolute;
  inset: 4px 4px auto 4px;
  height: 30%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}

/* The dark inset "well" that holds the reels --------------------------- */
.mystery-slot__well {
  position: relative;
  z-index: 2;
  padding: var(--ms-well-pad);
  border-radius: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #1a2715 0%, #0a1208 45%, #050a04 100%);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 0 0 3px rgba(245, 197, 24, 0.35),
    inset 0 10px 22px rgba(0, 0, 0, 0.9),
    inset 0 -10px 22px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mystery-slot__reels {
  display: grid;
  grid-template-columns: repeat(3, var(--ms-symbol-size));
  gap: var(--ms-gap);
  justify-content: center;
  position: relative;
  /* Thin gold dividers between reels, drawn into the gaps */
  background-image:
    linear-gradient(180deg,
      transparent 4%,
      rgba(255, 224, 102, 0.0)  10%,
      rgba(255, 224, 102, 0.85) 22%,
      rgba(245, 197, 24, 0.95)  50%,
      rgba(255, 224, 102, 0.85) 78%,
      rgba(255, 224, 102, 0.0)  90%,
      transparent 96%),
    linear-gradient(180deg,
      transparent 4%,
      rgba(255, 224, 102, 0.0)  10%,
      rgba(255, 224, 102, 0.85) 22%,
      rgba(245, 197, 24, 0.95)  50%,
      rgba(255, 224, 102, 0.85) 78%,
      rgba(255, 224, 102, 0.0)  90%,
      transparent 96%);
  background-size: 2px 100%, 2px 100%;
  background-position:
    calc(var(--ms-symbol-size) + var(--ms-gap) / 2 - 1px) 0,
    calc(var(--ms-symbol-size) * 2 + var(--ms-gap) * 1.5 - 1px) 0;
  background-repeat: no-repeat;
}

/* ---------------- Perimeter light bulbs ("marquee") --------------- */
.mystery-slot__bulbs {
  position: absolute;
  inset: var(--ms-bulb-inset);
  pointer-events: none;
  z-index: 3;
}
.ms-bulb {
  position: absolute;
  width: var(--ms-bulb-size);
  height: var(--ms-bulb-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff3a8 35%, #c98c0c 90%);
  box-shadow:
    0 0 4px rgba(255, 213, 74, 0.7),
    0 0 10px rgba(255, 213, 74, 0.35);
  transform: translate(-50%, -50%);
  opacity: 0.9;
  animation: ms-bulb-idle 2.4s ease-in-out calc(var(--i, 0) * 0.07s) infinite alternate;
}
@keyframes ms-bulb-idle {
  0%   { opacity: 0.55; box-shadow: 0 0 3px rgba(255, 213, 74, 0.4), 0 0 6px  rgba(255, 213, 74, 0.2); }
  100% { opacity: 1;    box-shadow: 0 0 7px rgba(255, 213, 74, 0.9), 0 0 16px rgba(255, 213, 74, 0.55); }
}

.mystery-slot.is-spinning .ms-bulb {
  animation: ms-bulb-chase 1.05s linear calc(var(--i, 0) * -0.06s) infinite;
}
@keyframes ms-bulb-chase {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 2px rgba(255, 213, 74, 0.3); }
  18%      { opacity: 1;    box-shadow: 0 0 8px rgba(255, 230, 130, 1), 0 0 18px rgba(255, 220, 100, 0.7); }
  36%      { opacity: 0.35; }
}

.mystery-slot.is-win .ms-bulb {
  animation: ms-bulb-win 0.55s ease-in-out calc(var(--i, 0) * 0.035s) infinite alternate;
}
@keyframes ms-bulb-win {
  0%   { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); box-shadow: 0 0 3px rgba(255, 220, 100, 0.45); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 12px rgba(255, 230, 130, 1), 0 0 24px rgba(255, 220, 100, 0.85); }
}

/* ========================================================= */
/* Reel                                                       */
/* ========================================================= */
.ms-reel {
  position: relative;
  width: var(--ms-symbol-size);
  height: var(--ms-symbol-size);
  border-radius: calc(14px * var(--ms-scale));
  overflow: hidden;
  background: #07040f;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 14px 22px rgba(0,0,0,0.85),
    inset 0 -14px 22px rgba(0,0,0,0.85);
}

/* Top/bottom fade gives the illusion of depth during spin */
.ms-reel::before,
.ms-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(22px * var(--ms-scale));
  pointer-events: none;
  z-index: 2;
}
.ms-reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent);
}
.ms-reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
}

.ms-reel__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

/* Glow ring when a reel locks and the result is a win */
.ms-reel.is-glow {
  box-shadow:
    inset 0 0 0 2px var(--ms-glow, #f5c518),
    inset 0 0 22px var(--ms-glow, #f5c518),
    0 0 24px var(--ms-glow, #f5c518),
    inset 0 14px 22px rgba(0,0,0,0.55),
    inset 0 -14px 22px rgba(0,0,0,0.55);
  animation: ms-reel-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes ms-reel-pulse {
  from { filter: brightness(1);    }
  to   { filter: brightness(1.18); }
}

/* ========================================================= */
/* Symbols                                                    */
/* ========================================================= */
.ms-symbol {
  width: var(--ms-symbol-size);
  height: var(--ms-symbol-size);
  padding: calc(10px * var(--ms-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.ms-symbol__card {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: var(--sym-bg, #333);
  color: var(--sym-fg, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 -10px 24px rgba(0, 0, 0, 0.35),
    inset 0 10px 16px rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ms-symbol__card::after {
  /* glossy highlight */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255,255,255,0.32), transparent 60%);
  pointer-events: none;
}

.ms-symbol__icon {
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-symbol__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

/* ========================================================= */
/* Controls                                                   */
/* ========================================================= */
.mystery-slot__controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.mystery-slot__spins {
  font-size: var(--font-body-semibold-font-size);
  font-weight: var(--font-body-semibold-font-weight);
  letter-spacing: var(--font-body-semibold-letter-spacing);
  line-height: var(--font-body-semibold-line-height);
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.72));
  text-align: center;
}

.mystery-slot__result {
    font-size: var(--font-body-semibold-font-size);
    font-weight: var(--font-headline-h2-desktop-font-weight);
    letter-spacing: var(--font-headline-h2-desktop-letter-spacing);
    line-height: var(--font-headline-h2-desktop-line-height);
    color: var(--color-text-main);
    text-align: center;
    transition: color 0.25s ease, transform 0.25s ease;
}
.mystery-slot.is-win .mystery-slot__result {
  color: #ffe066;
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
  transform: scale(1.05);
}

.mystery-slot__spin {
    position: relative;
    appearance: none;
    border: none;
    cursor: pointer;
    padding: var(--ms-spin-pad-y) var(--ms-spin-pad-x);
    border-radius: 12px;
    width: calc(var(--ms-base-width) * var(--ms-scale));
    text-transform: uppercase;
    color: var(--color-text-main);
    background: radial-gradient(circle at top right, var(--color-orange-soft), transparent 35%), linear-gradient(135deg, var(--color-orange-active) 0%, var(--color-orange) 52%, var(--color-orange-hover) 100%);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mystery-slot__spin span {
	font-size: var(--font-headline-h2-desktop-font-size);
    font-weight: var(--font-headline-h2-desktop-font-weight);
    letter-spacing: var(--font-headline-h2-desktop-letter-spacing);
    line-height: var(--font-headline-h2-desktop-line-height);
}

.mystery-slot__spin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 70%);
  transform: translateX(-110%);
  animation: ms-spin-shine 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.mystery-slot__spin > * {
  position: relative;
  z-index: 1;
}

@keyframes ms-spin-shine {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%);  }
  100% { transform: translateX(120%);  }
}

@keyframes ms-spin-glow {
  from { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(110, 65, 0, 0.55),
    inset 0 0 0 1px rgba(255, 240, 180, 0.55),
    0 0 0 2px rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(120, 70, 0, 0.5),
    0 0 18px rgba(255, 224, 102, 0.35); }
  to   { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(110, 65, 0, 0.55),
    inset 0 0 0 1px rgba(255, 240, 180, 0.55),
    0 0 0 2px rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(120, 70, 0, 0.5),
    0 0 36px rgba(255, 224, 102, 0.7); }
}

.mystery-slot__spin:hover:not(:disabled) {
  filter: brightness(1.06);
}

.mystery-slot__spin:active:not(:disabled) {
  filter: brightness(0.96);
}

.mystery-slot__spin:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5) brightness(0.85);
  opacity: 0.85;
  animation: none;
}

/* ---------------- Win sparkles (JS-spawned) --------------------------- */
.mystery-slot__sparkles {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 9;
  overflow: hidden;
}
.ms-sparkle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c8 0%, #ffe066 45%, rgba(245, 197, 24, 0) 75%);
  filter: drop-shadow(0 0 6px #ffe066);
  animation: ms-sparkle-fly var(--dur, 900ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes ms-sparkle-fly {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0.15); opacity: 0; }
}

/* ========================================================= */
/* Mystery Slot Skeleton                                      */
/* ========================================================= */

.mystery-slot {
  min-height: 1px;
}

.mystery-slot__frame,
.mystery-slot__controls,
.mystery-slot__sparkles {
  transition: opacity 0.22s ease;
}

.mystery-slot.is-ms-loading .mystery-slot__frame,
.mystery-slot.is-ms-loading .mystery-slot__controls,
.mystery-slot.is-ms-loading .mystery-slot__sparkles {
  opacity: 0;
}

.mystery-slot__skeleton {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22px * var(--ms-scale));
  pointer-events: none;
  background: linear-gradient(180deg, #7ecc3d 0%, #45a60d 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease;
  overflow: hidden;
}

.mystery-slot.is-ms-loading .mystery-slot__skeleton {
  opacity: 1;
  visibility: visible;
}

.mystery-slot__skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.08) 36%,
      rgba(255,255,255,0.24) 50%,
      rgba(255,255,255,0.08) 64%,
      transparent 100%
    );
  transform: translateX(-120%);
  animation: msSkeletonShine 1.25s ease-in-out infinite;
}

@keyframes msSkeletonShine {
  100% {
    transform: translateX(120%);
  }
}

.mystery-slot__skeleton-frame {
  position: relative;
  width: 100%;
  padding: var(--ms-frame-pad);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(0,0,0,0.16)),
    linear-gradient(135deg, #7ecc3d 0%, #45a60d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -3px 0 rgba(0,0,0,0.18),
    0 18px 34px rgba(0,0,0,0.22);
}

.mystery-slot__skeleton-well {
  padding: var(--ms-well-pad);
  background: rgba(5, 30, 6, 0.34);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 12px 28px rgba(0,0,0,0.22);
}

.mystery-slot__skeleton-reels {
  display: grid;
  grid-template-columns: repeat(3, var(--ms-symbol-size));
  gap: var(--ms-gap);
  justify-content: center;
}

.mystery-slot__skeleton-reel {
  width: var(--ms-symbol-size);
  height: var(--ms-symbol-size);
  border-radius: calc(14px * var(--ms-scale));
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.2), transparent 38%),
    linear-gradient(180deg, rgba(126,204,61,0.82), rgba(69,166,13,0.72));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 -14px 24px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.16);
}

.mystery-slot__skeleton-result {
  width: 38%;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.mystery-slot__skeleton-button {
  width: calc(170px * var(--ms-scale));
  max-width: 46%;
  height: calc(52px * var(--ms-scale));
  min-height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.12)),
    linear-gradient(135deg, #7ecc3d 0%, #45a60d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 10px 22px rgba(0,0,0,0.18);
}

/* Если хочешь skeleton ещё ДО того, как JS вставил HTML */
.mystery-slot.is-ms-loading:empty {
  aspect-ratio: 576 / 330;
  background: linear-gradient(180deg, #7ecc3d 0%, #45a60d 100%);
}

.mystery-slot.is-ms-loading:empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.08) 36%,
      rgba(255,255,255,0.24) 50%,
      rgba(255,255,255,0.08) 64%,
      transparent 100%
    );
  transform: translateX(-120%);
  animation: msSkeletonShine 1.25s ease-in-out infinite;
}

.modal-container_card-root.modal-container_vip_wheel-root {
	background: linear-gradient(180deg, #06101F 0%, #086AD1 50%, #032044 100%);
	background: url(/img/bonus/modals/vip-wheel-background.png?v=1);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	overflow: hidden;
}

@media (min-width: 1024px) {
    .modal-container_card-root.modal-container_vip_wheel-root {
        width: 704px;
    }
}

.modal-container_card-root.modal-container_vip_wheel-root .modal-footer_root {
	background-color: #032044 !important;
}

.modal-bonus_content.bonus-vip_wheel {
	padding: 0;
}

#vip-wheel {
    position: relative;
    overflow: hidden;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / var(--wheel-reveal, 0.5);
}

/* Контейнер всей сцены колеса.
   Заполняет родителя (например модалку) и держит квадрат через aspect-ratio.
   container-type: size делает сцену контейнером — все размеры внутри заданы
   в cqmin (1cqmin = 1% от меньшей стороны сцены), поэтому колесо и всё в нём
   адаптируются под любой размер модалки. */
.wheel-scene {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    container-type: size;
}

/* Вращающаяся часть: само колесо + подсветка */
.wheel-rotor {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.wheel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}

.wheel-img svg,
.wheel-spin-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wheel-pointer svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Подсветка выигрышного сектора (конический градиент, крутится вместе с колесом) */
.wheel-highlight {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 0.35s ease;
    /* маска вырезает центр и внешнее кольцо рамки */
    -webkit-mask: radial-gradient(circle at center,
        transparent 0,
        transparent 14%,
        #000 16%,
        #000 88%,
        transparent 90%);
    mask: radial-gradient(circle at center,
        transparent 0,
        transparent 14%,
        #000 16%,
        #000 88%,
        transparent 90%);
}

.wheel-highlight.active {
    opacity: 1;
    animation: pulse 0.9s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.6); }
}

/* Мерцание заклёпок (блики). В покое — медленно, при вращении — быстро и вразнобой */
.stud-glint {
    opacity: 0.3;
    transform-box: fill-box;
    transform-origin: center;
    animation: studTwinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}

@keyframes studTwinkle {
    0%, 100% { opacity: 0.12; transform: scale(0.7); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

.wheel-scene.spinning .stud-glint {
    /* у каждой заклёпки свой случайный --t, поэтому при вращении мигают по-разному */
    animation-duration: calc(var(--t, 3s) * 0.3);
}

/* "Фонарики" на кнопке SPIN — плавный перелив двух групп (как гирлянда) */
.lamp-halo,
.lamp-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: lampBlink var(--t, 3.2s) ease-in-out var(--d, 0s) infinite;
}

@keyframes lampBlink {
    0%, 100% { opacity: 0.3; transform: scale(0.32); }  /* приглушена, но не гаснет */
    50%      { opacity: 1;   transform: scale(0.8); }   /* плавно разгорается */
}

/* При вращении перелив чуть живее, но остаётся плавным */
.wheel-scene.spinning .lamp-halo,
.wheel-scene.spinning .lamp-core {
    animation-duration: calc(var(--t, 3.2s) * 0.6);
}

/* ===== TEMP: раскраска кусков (можно удалить вместе с блоком в game.js) ===== */
.wheel-debug-colors {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.45;
    pointer-events: none;
    -webkit-mask: radial-gradient(circle at center,
        transparent 0, transparent 14%, #000 16%, #000 88%, transparent 90%);
    mask: radial-gradient(circle at center,
        transparent 0, transparent 14%, #000 16%, #000 88%, transparent 90%);
}

.wheel-debug-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    color: #fff;
    font-weight: 800;
    font-size: 3.6cqmin;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    pointer-events: none;
}
/* ===== /TEMP ===== */

/* Картинка-приз внутри ячейки колеса (крутится вместе с ротором) */
.wheel-prize {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11.2cqmin;
    height: 11.2cqmin;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}

.wheel-prize img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Указатель сверху */
.wheel-pointer {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10%;
    transform: translateX(-50%);
    z-index: 5;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    user-select: none;
    -webkit-user-drag: none;
}

/* Кнопка SPIN в центре.
   --spin-offset-y сдвигает всю кнопку по вертикали относительно центра колеса.
   Отрицательное значение = выше центра (напр. -50px), положительное = ниже. */
.wheel-spin {
    --spin-offset-y: -10%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 35%;
    transform: translate(-50%, calc(-50% + var(--spin-offset-y)));
    z-index: 4;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease;
}

.wheel-spin-svg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

.wheel-spin span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd55a;
    font-weight: 800;
    font-size: 6.4cqmin;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.wheel-spin:hover:not(:disabled) {
    transform: translate(-50%, calc(-50% + var(--spin-offset-y))) scale(1.05);
}

.wheel-spin:active:not(:disabled) {
    transform: translate(-50%, calc(-50% + var(--spin-offset-y))) scale(0.95);
}

.wheel-spin:disabled {
    cursor: default;
	transform: translate(-50%, calc(-50% + var(--spin-offset-y))) scale(0.95);
}

.cashback-block_root {
	display: flex;
    flex-direction: column;
    margin-top: auto;
}

.cashback-block_text {
    align-items: center;
    gap: var(--spacing-8);
    margin-block: var(--spacing-16)var(--spacing-12);
    font-size: 24px;
    font-weight: var(--font-caption-s-semibold-font-weight);
    letter-spacing: var(--font-caption-s-semibold-letter-spacing);
    line-height: 24px;
    display: flex;
}

.cashback-block_countdown_root {
    gap: var(--spacing-4);
    grid-template-rows: 34px max-content;
    width: 169px;
    display: grid;
}

.cashback-block_countdown_timer {
    font-size: var(--font-headline-h3-mobile-font-size);
    font-weight: var(--font-headline-h3-mobile-font-weight);
    letter-spacing: var(--font-headline-h3-mobile-letter-spacing);
    line-height: var(--font-headline-h3-mobile-line-height);
    text-transform: var(--font-headline-text-case);
    text-wrap: balance;
    white-space-collapse: preserve-breaks;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22169%22%20height%3D%2234%22%20viewBox%3D%220%200%20169%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_133_106)%22%3E%3Cpath%20d%3D%22M27.5%204.25C34.2375%204.25%2040.4525%204.675%2047.5475%205.61C48.84%209.3925%2049.5%2013.2175%2049.5%2017C49.5%2020.7825%2048.84%2024.6075%2047.5475%2028.39C40.4525%2029.325%2034.2375%2029.75%2027.5%2029.75C20.7625%2029.75%2014.5475%2029.325%207.4525%2028.39C6.16%2024.6075%205.5%2020.7825%205.5%2017C5.5%2013.2175%206.16%209.3925%207.4525%205.61C14.5475%204.675%2020.7625%204.25%2027.5%204.25ZM27.5%200C19.9925%200%2013.145%200.51%205.6375%201.53L3.08%201.87L2.3925%203.7825C0.7975%208.18125%200%2012.6013%200%2017C0%2021.3987%200.7975%2025.8187%202.3925%2030.2175L3.08%2032.1088L5.6375%2032.4488C13.145%2033.49%2019.9925%2034%2027.5%2034C35.0075%2034%2041.855%2033.49%2049.3625%2032.47L51.92%2032.13L52.6075%2030.2387C54.2025%2025.8187%2055%2021.3987%2055%2017C55%2012.6013%2054.2025%208.18125%2052.6075%203.7825L51.92%201.89125L49.3625%201.55125C41.855%200.51%2035.0075%200%2027.5%200Z%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M84.5%204.25C91.2375%204.25%2097.4525%204.675%20104.548%205.61C105.84%209.3925%20106.5%2013.2175%20106.5%2017C106.5%2020.7825%20105.84%2024.6075%20104.548%2028.39C97.4525%2029.325%2091.2375%2029.75%2084.5%2029.75C77.7625%2029.75%2071.5475%2029.325%2064.4525%2028.39C63.16%2024.6075%2062.5%2020.7825%2062.5%2017C62.5%2013.2175%2063.16%209.3925%2064.4525%205.61C71.5475%204.675%2077.7625%204.25%2084.5%204.25ZM84.5%200C76.9925%200%2070.145%200.51%2062.6375%201.53L60.08%201.87L59.3925%203.7825C57.7975%208.18125%2057%2012.6013%2057%2017C57%2021.3987%2057.7975%2025.8187%2059.3925%2030.2175L60.08%2032.1088L62.6375%2032.4488C70.145%2033.49%2076.9925%2034%2084.5%2034C92.0075%2034%2098.855%2033.49%20106.363%2032.47L108.92%2032.13L109.607%2030.2387C111.202%2025.8187%20112%2021.3987%20112%2017C112%2012.6013%20111.202%208.18125%20109.607%203.7825L108.92%201.89125L106.363%201.55125C98.855%200.51%2092.0075%200%2084.5%200Z%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M141.5%204.25C148.238%204.25%20154.453%204.675%20161.548%205.61C162.84%209.3925%20163.5%2013.2175%20163.5%2017C163.5%2020.7825%20162.84%2024.6075%20161.548%2028.39C154.453%2029.325%20148.238%2029.75%20141.5%2029.75C134.762%2029.75%20128.547%2029.325%20121.453%2028.39C120.16%2024.6075%20119.5%2020.7825%20119.5%2017C119.5%2013.2175%20120.16%209.3925%20121.453%205.61C128.547%204.675%20134.762%204.25%20141.5%204.25ZM141.5%200C133.992%200%20127.145%200.51%20119.638%201.53L117.08%201.87L116.392%203.7825C114.797%208.18125%20114%2012.6013%20114%2017C114%2021.3987%20114.797%2025.8187%20116.392%2030.2175L117.08%2032.1088L119.638%2032.4488C127.145%2033.49%20133.992%2034%20141.5%2034C149.008%2034%20155.855%2033.49%20163.363%2032.47L165.92%2032.13L166.607%2030.2387C168.202%2025.8187%20169%2021.3987%20169%2017C169%2012.6013%20168.202%208.18125%20166.607%203.7825L165.92%201.89125L163.363%201.55125C155.855%200.51%20149.008%200%20141.5%200Z%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_133_106%22%3E%3Crect%20width%3D%22169%22%20height%3D%2234%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    align-items: center;
}

:is(.cashback-block_countdown_timer,.cashback-block_countdown_labels)>* {
    text-align: center;
    flex: 1;
}

.cashback-block_countdown_labels {
    font-size: var(--font-caption-s-semibold-font-size);
    font-weight: var(--font-caption-s-semibold-font-weight);
    letter-spacing: var(--font-caption-s-semibold-letter-spacing);
    line-height: var(--font-caption-s-semibold-line-height);
    display: flex;
}

.cashback-block_countdown_timer, .cashback-block_countdown_labels {
    gap: var(--spacing-2);
    display: flex;
}



/* VIP Wheel result overlay */
.wheel-result-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.wheel-result-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.wheel-result-content {
    background: linear-gradient(145deg, #0a1c5c 0%, #1e3a8a 100%);
    border: 2px solid #f3cd5b;
    border-radius: 14px;
    padding: 26px 34px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    transform: scale(0.88);
    transition: transform 0.35s ease;
}
.wheel-result-overlay.is-visible .wheel-result-content {
    transform: scale(1);
}
.wheel-result-title {
    font-size: 20px;
    font-weight: 700;
    color: #f3cd5b;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.wheel-result-prize {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}
.wheel-result-prize span {
    color: #fff7d4;
}
.wheel-result-code {
    margin: 10px 0;
    font-size: 14px;
}
.wheel-result-code b {
    display: inline-block;
    margin: 8px 0 4px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px dashed #f3cd5b;
    border-radius: 6px;
    font-size: 16px;
    color: #fff7d4;
    letter-spacing: 1.5px;
    font-family: monospace;
}
.wheel-result-code small {
    display: block;
    opacity: 0.75;
    font-size: 12px;
    margin-top: 4px;
}
.wheel-result-usd {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 8px;
    display: none;
}
.wheel-result-close {
    margin-top: 18px;
    padding: 9px 32px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f3cd5b, #fff7d4);
    color: #0a1c5c;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s;
}
.wheel-result-close:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}