:root {
    --rounding-0: 0px;
    --rounding-1: 1px;
    --rounding-2: 2px;
    --rounding-4: 4px;
    --rounding-6: 6px;
    --rounding-8: 8px;
    --rounding-10: 10px;
    --rounding-12: 12px;
    --rounding-16: 16px;
    --rounding-20: 20px;
    --rounding-24: 24px;
    --rounding-32: 32px;
    --rounding-max: 999px;
}

:root {
    --rounding-control-l: var(--rounding-10);
    --rounding-control-m: var(--rounding-10);
    --rounding-control-s: var(--rounding-8);
    --rounding-control-xl: var(--rounding-12);
    --rounding-container-l: var(--rounding-20);
    --rounding-container-m: var(--rounding-16);
    --rounding-container-s: var(--rounding-12);
    --rounding-control-xxl: var(--rounding-12);
    --rounding-container-xl: var(--rounding-24);
    --rounding-container-xs: var(--rounding-8);
    --rounding-component-tag: var(--rounding-6);
    --rounding-container-xxl: var(--rounding-32);
    --rounding-container-xxs: var(--rounding-4);
    --rounding-betting-mobile: var(--rounding-0);
    --rounding-betting-desktop: var(--rounding-0);
    --rounding-component-badge: var(--rounding-max);
    --rounding-component-radio: var(--rounding-max);
    --rounding-component-avatar: var(--rounding-max);
    --rounding-component-switch: var(--rounding-max);
    --rounding-component-popover: var(--rounding-16);
    --rounding-component-tooltip: var(--rounding-10);
    --rounding-component-checkbox: var(--rounding-6);
    --rounding-component-chipstab: var(--rounding-max);
    --rounding-component-notification: var(--rounding-max);
}

:root {
    --spacing-0: 0px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;
}

:root {
    --popover-padding: var(--spacing-16);
    --modal-margin-mobile: var(--spacing-24);
    --modal-margin-desktop: var(--spacing-64);
    --container-padding-mobile: var(--spacing-16);
    --container-padding-desktop: var(--spacing-48);
    --modal-padding-modal-mobile: var(--spacing-16);
    --modal-padding-modal-desktop: var(--spacing-20);
    --modal-padding-modal-gap-form: var(--rounding-16);
    --container-padding-betting-desktop: var(--spacing-0);
    --modal-padding-modal-gap-stack-form: var(--rounding-12);
    --modal-padding-modal-header-bottom-mobile: var(--spacing-12);
    --container-page-content-padding-top-mobile: var(--spacing-12);
    --modal-padding-modal-header-bottom-desktop: var(--spacing-16);
    --container-page-content-padding-top-desktop: var(--spacing-24);
    --container-page-content-padding-bottom-mobile: var(--spacing-24);
    --container-padding-betting-gap-vertical-mobile: var(--spacing-16);
    --container-page-content-padding-bottom-desktop: var(--spacing-32);
    --container-padding-betting-gap-vertical-desktop: var(--spacing-24);
    --container-padding-betting-gap-horizontal-mobile: var(--spacing-0);
    --container-padding-betting-gap-horizontal-desktop: var(--spacing-48);
}

:root {
	--size-control-l: 40px;
    --size-control-m: 36px;
    --size-control-s: 32px;
    --size-element-s: 20px;
    --size-control-xl: 44px;
    --size-control-xs: 28px;
    --size-control-xxl: 48px;
    --size-control-xxs: 24px;
    --size-game-height-max: 900px;
    --size-tooltip-width-max: 270px;
    --size-tooltip-width-min: 140px;
    --size-container-width-max: 1640px;
    --size-popover-mobile-width: 328px;
    --size-modal-desktop-width-m: 620px;
    --size-modal-desktop-width-s: 390px;
    --size-popover-desktop-width: 308px;
    --size-footer-width-links-max: 140px;
    --size-table-column-width-max: 220px;
    --size-table-column-width-min: 110px;
    --size-popover-list-height-max: 376px;
    --size-modal-desktop-height-max: 768px;
    --size-popover-notifications-height-min: 500px;
}

:root {
    --font-body-text-case: none;
    --font-body-font-family: 'Inter', var(--reserved-fonts);
    --font-caption-text-case: none;
    --font-display-text-case: none;
    --font-headline-text-case: none;
    --font-caption-font-family: 'Inter', var(--reserved-fonts);
    --font-display-font-family: 'Inter', var(--reserved-fonts);
    --font-body-label-font-size: 14px;
    --font-body-label-text-case: none;
    --font-caption-xs-font-size: 10px;
    --font-decorative-text-case: uppercase;
    --font-headline-font-family: 'Inter', var(--reserved-fonts);
    --font-body-label-font-family: 'Inter', var(--reserved-fonts);
    --font-body-label-font-weight: 600;
    --font-body-label-line-height: 20px;
    --font-body-regular-font-size: 14px;
    --font-caption-xs-line-height: 14px;
    --font-decorative-font-family: 'Halvar Breit', var(--reserved-fonts);
    --font-display-body-text-case: none;
    --font-body-semibold-font-size: 14px;
    --font-body-regular-font-weight: 400;
    --font-body-regular-line-height: 20px;
    --font-caption-s-caps-font-size: 12px;
    --font-caption-s-caps-text-case: uppercase;
    --font-display-body-font-family: 'Inter', var(--reserved-fonts);
    --font-body-label-letter-spacing: 0px;
    --font-body-semibold-font-weight: 600;
    --font-body-semibold-line-height: 20px;
    --font-caption-s-label-font-size: 12px;
    --font-caption-s-label-text-case: none;
    --font-caption-xs-letter-spacing: 0.10px;
    --font-decorative-body-font-size: 13px;
    --font-caption-s-caps-font-weight: 400;
    --font-caption-s-caps-line-height: 16px;
    --font-display-l-mobile-font-size: 32px;
    --font-display-m-mobile-font-size: 28px;
    --font-body-label-paragraph-indent: 0px;
    --font-body-regular-letter-spacing: 0px;
    --font-caption-s-label-font-family: 'Inter', var(--reserved-fonts);
    --font-caption-s-label-font-weight: 600;
    --font-caption-s-label-line-height: 16px;
    --font-caption-s-regular-font-size: 12px;
    --font-caption-xs-caps-font-weight: 600;
    --font-caption-xs-paragraph-indent: 0px;
    --font-decorative-body-font-weight: 800;
    --font-decorative-body-line-height: 13px;
    --font-display-l-desktop-font-size: 56px;
    --font-display-m-desktop-font-size: 44px;
    --font-body-label-paragraph-spacing: 8px;
    --font-body-semibold-letter-spacing: 0px;
    --font-caption-s-semibold-font-size: 12px;
    --font-caption-xs-paragraph-spacing: 0px;
    --font-display-body-label-font-size: 16px;
    --font-display-body-label-text-case: none;
    --font-display-l-mobile-font-weight: 600;
    --font-display-l-mobile-line-height: 36px;
    --font-display-m-mobile-font-weight: 600;
    --font-display-m-mobile-line-height: 32px;
    --font-headline-h1-mobile-font-size: 24px;
    --font-headline-h2-mobile-font-size: 22px;
    --font-headline-h3-mobile-font-size: 20px;
    --font-headline-h4-mobile-font-size: 16px;
    --font-body-regular-paragraph-indent: 0px;
    --font-caption-s-caps-letter-spacing: 0.01px;
    --font-caption-s-regular-font-weight: 400;
    --font-caption-s-regular-line-height: 16px;
    --font-display-l-desktop-font-weight: 600;
    --font-display-l-desktop-line-height: 62px;
    --font-display-m-desktop-font-weight: 600;
    --font-display-m-desktop-line-height: 50px;
    --font-headline-h1-desktop-font-size: 36px;
    --font-headline-h2-desktop-font-size: 28px;
    --font-headline-h3-desktop-font-size: 24px;
    --font-headline-h4-desktop-font-size: 20px;
    --font-body-regular-paragraph-spacing: 8px;
    --font-body-semibold-paragraph-indent: 0px;
    --font-caption-s-label-letter-spacing: 0.01px;
    --font-caption-s-semibold-font-weight: 600;
    --font-caption-s-semibold-line-height: 16px;
    --font-caption-xs-regular-font-weight: 400;
    --font-decorative-body-letter-spacing: 0.52px;
    --font-display-body-label-font-family: 'Inter', var(--reserved-fonts);
    --font-display-body-label-font-weight: 600;
    --font-display-body-label-line-height: 22px;
    --font-display-body-regular-font-size: 16px;
    --font-headline-h1-mobile-font-weight: 600;
    --font-headline-h1-mobile-line-height: 28px;
    --font-headline-h2-mobile-font-weight: 600;
    --font-headline-h2-mobile-line-height: 26px;
    --font-headline-h3-mobile-font-weight: 600;
    --font-headline-h3-mobile-line-height: 24px;
    --font-headline-h4-mobile-font-weight: 600;
    --font-headline-h4-mobile-line-height: 22px;
    --font-body-semibold-paragraph-spacing: 8px;
    --font-caption-s-caps-paragraph-indent: 0px;
    --font-caption-xs-semibold-font-weight: 600;
    --font-display-body-semibold-font-size: 16px;
    --font-display-l-mobile-letter-spacing: -0.69px;
    --font-display-m-mobile-letter-spacing: -0.59px;
    --font-headline-h1-desktop-font-weight: 600;
    --font-headline-h1-desktop-line-height: 40px;
    --font-headline-h2-desktop-font-weight: 600;
    --font-headline-h2-desktop-line-height: 32px;
    --font-headline-h3-desktop-font-weight: 600;
    --font-headline-h3-desktop-line-height: 28px;
    --font-headline-h4-desktop-font-weight: 600;
    --font-headline-h4-desktop-line-height: 24px;
    --font-caption-s-caps-paragraph-spacing: 0px;
    --font-caption-s-label-paragraph-indent: 0px;
    --font-caption-s-regular-letter-spacing: 0.01px;
    --font-display-body-regular-font-weight: 400;
    --font-display-body-regular-line-height: 22px;
    --font-display-l-desktop-letter-spacing: -1.25px;
    --font-display-m-desktop-letter-spacing: -0.98px;
    --font-native-title-l-regular-font-size: 32px;
    --font-native-title-m-regular-font-size: 28px;
    --font-native-title-s-regular-font-size: 22px;
    --font-caption-s-label-paragraph-spacing: 0px;
    --font-caption-s-semibold-letter-spacing: 0.01px;
    --font-display-body-label-letter-spacing: -0.12px;
    --font-display-body-semibold-font-weight: 600;
    --font-display-body-semibold-line-height: 22px;
    --font-display-l-mobile-paragraph-indent: 0px;
    --font-display-m-mobile-paragraph-indent: 0px;
    --font-headline-h1-mobile-letter-spacing: -0.47px;
    --font-headline-h2-mobile-letter-spacing: -0.40px;
    --font-headline-h3-mobile-letter-spacing: -0.33px;
    --font-headline-h4-mobile-letter-spacing: -0.12px;
    --font-native-title-xs-regular-font-size: 20px;
    --font-caption-s-regular-paragraph-indent: 0px;
    --font-display-l-desktop-paragraph-indent: 0px;
    --font-display-l-mobile-paragraph-spacing: 0px;
    --font-display-m-desktop-paragraph-indent: 0px;
    --font-display-m-mobile-paragraph-spacing: 0px;
    --font-headline-h1-desktop-letter-spacing: -0.79px;
    --font-headline-h2-desktop-letter-spacing: -0.59px;
    --font-headline-h3-desktop-letter-spacing: -0.47px;
    --font-headline-h4-desktop-letter-spacing: -0.33px;
    --font-caption-s-regular-paragraph-spacing: 0px;
    --font-caption-s-semibold-paragraph-indent: 0px;
    --font-display-body-label-paragraph-indent: 0px;
    --font-display-body-regular-letter-spacing: -0.12px;
    --font-display-l-desktop-paragraph-spacing: 0px;
    --font-display-m-desktop-paragraph-spacing: 0px;
    --font-headline-h1-mobile-paragraph-indent: 0px;
    --font-headline-h2-mobile-paragraph-indent: 0px;
    --font-headline-h3-mobile-paragraph-indent: 0px;
    --font-headline-h4-mobile-paragraph-indent: 0px;
    --font-caption-s-semibold-paragraph-spacing: 0px;
    --font-display-body-label-paragraph-spacing: 0px;
    --font-display-body-semibold-letter-spacing: -0.12px;
    --font-headline-h1-desktop-paragraph-indent: 0px;
    --font-headline-h1-mobile-paragraph-spacing: 0px;
    --font-headline-h2-desktop-paragraph-indent: 0px;
    --font-headline-h2-mobile-paragraph-spacing: 0px;
    --font-headline-h3-desktop-paragraph-indent: 0px;
    --font-headline-h3-mobile-paragraph-spacing: 0px;
    --font-headline-h4-desktop-paragraph-indent: 0px;
    --font-headline-h4-mobile-paragraph-spacing: 0px;
    --font-decorative-display-l-mobile-font-size: 28px;
    --font-decorative-display-m-mobile-font-size: 22px;
    --font-decorative-display-s-mobile-font-size: 16px;
    --font-display-body-regular-paragraph-indent: 0px;
    --font-headline-h1-desktop-paragraph-spacing: 0px;
    --font-headline-h2-desktop-paragraph-spacing: 0px;
    --font-headline-h3-desktop-paragraph-spacing: 0px;
    --font-headline-h4-desktop-paragraph-spacing: 0px;
    --font-decorative-display-l-desktop-font-size: 34px;
    --font-decorative-display-m-desktop-font-size: 28px;
    --font-decorative-display-s-desktop-font-size: 22px;
    --font-decorative-display-xl-mobile-font-size: 34px;
    --font-display-body-regular-paragraph-spacing: 0px;
    --font-display-body-semibold-paragraph-indent: 0px;
    --font-decorative-display-2xl-mobile-font-size: 54px;
    --font-decorative-display-l-mobile-font-weight: 800;
    --font-decorative-display-l-mobile-line-height: 34px;
    --font-decorative-display-m-mobile-font-weight: 800;
    --font-decorative-display-m-mobile-line-height: 26px;
    --font-decorative-display-s-mobile-font-weight: 800;
    --font-decorative-display-s-mobile-line-height: 20px;
    --font-decorative-display-xl-desktop-font-size: 54px;
    --font-display-body-semibold-paragraph-spacing: 0px;
    --font-decorative-display-2xl-desktop-font-size: 70px;
    --font-decorative-display-l-desktop-font-weight: 800;
    --font-decorative-display-l-desktop-line-height: 38px;
    --font-decorative-display-m-desktop-font-weight: 800;
    --font-decorative-display-m-desktop-line-height: 32px;
    --font-decorative-display-s-desktop-font-weight: 800;
    --font-decorative-display-s-desktop-line-height: 26px;
    --font-decorative-display-xl-mobile-font-weight: 800;
    --font-decorative-display-xl-mobile-line-height: 38px;
    --font-decorative-display-2xl-mobile-font-weight: 800;
    --font-decorative-display-2xl-mobile-line-height: 54px;
    --font-decorative-display-xl-desktop-font-weight: 800;
    --font-decorative-display-xl-desktop-line-height: 60px;
    --font-decorative-display-2xl-desktop-font-weight: 800;
    --font-decorative-display-2xl-desktop-line-height: 70px;
    --font-decorative-display-l-mobile-letter-spacing: -0.56px;
    --font-decorative-display-m-mobile-letter-spacing: -0.44px;
    --font-decorative-display-s-mobile-letter-spacing: 0px;
    --font-decorative-display-l-desktop-letter-spacing: -1.36px;
    --font-decorative-display-m-desktop-letter-spacing: -0.56px;
    --font-decorative-display-s-desktop-letter-spacing: -0.44px;
    --font-decorative-display-xl-mobile-letter-spacing: -1.36px;
    --font-decorative-display-2xl-mobile-letter-spacing: -2.80px;
    --font-decorative-display-xl-desktop-letter-spacing: -2.16px;
    --font-decorative-display-2xl-desktop-letter-spacing: -2.80px;
}

:root {
    --opacity-item-active: 0.86;
    --opacity-item-disabled: 0.50;
}

:root {
    --border-m: 2px;
    --border-s: 1px;
    --border-none: 0px;
}

:root {
    --box-shadow-l: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 0px 20px 0px rgba(0, 0, 0, 0.24);
    --box-shadow-m: 0px -2px 16px 0px rgba(0, 0, 0, 0.05), 0px 8px 16px -3px rgba(0, 0, 0, 0.08), 0 1px 4px 0px rgba(0, 0, 0, 0.05);
    --box-shadow-s: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
    --box-shadow-xl: 0px 4px 8px 0px rgba(0, 0, 0, 0.24), 0px 0px 20px 0px rgba(0, 0, 0, 0.50);
    --box-shadow-xs: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    --box-shadow-none: none;
}

:root {
    --swiper-navigation-size: 44px;
}

:root {
    --z-index-betting-modal: 141;
    --z-index-betting-tooltip: 150;
    --vueuse-safe-area-top: env(safe-area-inset-top, 0px);
    --vueuse-safe-area-right: env(safe-area-inset-right, 0px);
    --vueuse-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --vueuse-safe-area-left: env(safe-area-inset-left, 0px);
    --z-index-betting-trigger: 101;
    --header-layout-height-desktop: 68px;
    --tabbar-layout-height: 60px;
    --tabbar-layout-padding-bottom: 0px;
    --betting-betslip-offset-bottom-mobile: 8px;
    --betting-betslip-offset-bottom-desktop: 16px;
    --rounding-component-popover: 16px;
	--tab-rounding-square: 14px;
}

:root {
	--modal-rounding: var(--rounding-24);
	--button-rounding-l: var(--rounding-12);
    --button-rounding-m: var(--rounding-10);
    --button-rounding-s: var(--rounding-6);
	--tab-rounding-square-tab: var(--rounding-12);
	--list-items-gap: 0px;
	--list-rounding: 0px;
	--list-item-rounding: var(--rounding-12);
	--list-item-padding-horizontal: 8px;
}

:root {
	--safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-inline-start: env(safe-area-inset-left);
    --safe-area-inset-inline-end: env(safe-area-inset-right);
    --safe-area-inset-block-start: env(safe-area-inset-top);
    --safe-area-inset-block-end: env(safe-area-inset-bottom);
	--padding-bottom-layout-tabbar-with-safe-area: calc(max(var(--safe-area-inset-block-end), var(--tabbar-layout-padding-bottom)));
	--height-layout-tabbar-with-safe-area: calc(var(--tabbar-layout-height) + var(--padding-bottom-layout-tabbar-with-safe-area) - var(--tabbar-layout-padding-bottom));
}

/* COLORS */
:root {
	/* Background */
	--color-bg-main: #06101F;
	--color-bg-deep: #030914;
	--color-bg-card: #0A1830;
	--color-bg-card-soft: #0F213D;
	--color-bg-card-soft-hover: #14305A;
	--color-bg-card-soft-active: #0B1A33;
	--color-bg-elevated: #132A4A;
  
	--color-background-base-primary: #0f192f;
	--color-content-base-primary: #f0f2f5;
	--tab-color-segment-bg: #0f2240;
	
  
	--color-bg-modal: linear-gradient(180deg, #122B4E 0%, #0A1B34 100%);
	--color-bg-backdrop: rgba(0, 0, 0, 0.8);
	
	
	/* Brand Blue */
	--color-primary: #086AD1;
	--color-primary-hover: #0B7EFF;
	--color-primary-active: #0654A8;
	--color-primary-soft: rgba(8, 106, 209, 0.18);
	
	/* Neon Cyan */
	--color-accent: #32EDFC;
	--color-accent-hover: #4EF6FD;
	--color-accent-active: #12CFE3;
	--color-accent-soft: rgba(50, 237, 252, 0.16);
	
	/* Secondary Blue */
	--color-secondary: #2371B7;
	--color-secondary-hover: #2E8DE0;
	--color-secondary-active: #18578F;
	
	/* Text */
	--color-text-main: #FFFFFF;
	--color-text-soft: #D7E8FF;
	--color-text-muted: #8FA8C7;
	--color-text-disabled: #707070;
	
	/* Borders */
	--color-border-default: rgba(255, 255, 255, 0.12);
	--color-border-soft: rgba(255, 255, 255, 0.08);
	--color-border-blue: rgba(50, 237, 252, 0.35);
	--color-border-active: #32EDFC;
	
	/* States */
	--color-success: #3DFF9A;
	--color-warning: #FFD166;
	--color-danger: #FF4D6D;
	--color-info: #4EF6FD;
	
	/* Shadows / Glow */
	--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
	--shadow-blue-glow: 0 0 24px rgba(8, 106, 209, 0.45);
	--shadow-cyan-glow: 0 0 28px rgba(50, 237, 252, 0.45);
	
	/* Gradients */
	--gradient-primary: linear-gradient(135deg, #086AD1 0%, #32EDFC 100%);
	--gradient-primary-hover: linear-gradient(135deg, #0B7EFF 0%, #4EF6FD 100%);
	--gradient-dark-card: linear-gradient(180deg, #0F213D 0%, #071426 100%);
	--gradient-banner: radial-gradient(circle at top right, rgba(50, 237, 252, 0.35), transparent 35%),linear-gradient(135deg, #06101F 0%, #086AD1 52%, #032044 100%);
}

:root {
	/* Green / Deposit / Success */
	--color-green: #18D878;
	--color-green-hover: #22F28B;
	--color-green-active: #10A85B;
	--color-green-dark: #06391F;
	--color-green-soft: rgba(24, 216, 120, 0.16);
	--color-green-border: rgba(34, 242, 139, 0.45);
	--shadow-green-glow: 0 0 22px rgba(24, 216, 120, 0.38);
	
	/* Red / Danger / Cancel / Lose */
	--color-red: #FF3B5C;
	--color-red-hover: #FF5572;
	--color-red-active: #C92643;
	--color-red-dark: #3A0712;
	--color-red-soft: rgba(255, 59, 92, 0.16);
	--color-red-border: rgba(255, 85, 114, 0.45);
	--shadow-red-glow: 0 0 22px rgba(255, 59, 92, 0.38);
	
	/* Yellow / Warning / Bonus / Attention */
	--color-yellow: #FFD166;
	--color-yellow-hover: #FFE08A;
	--color-yellow-active: #C9972E;
	--color-yellow-dark: #3A2A08;
	--color-yellow-soft: rgba(255, 209, 102, 0.16);
	--color-yellow-border: rgba(255, 224, 138, 0.5);
	--shadow-yellow-glow: 0 0 22px rgba(255, 209, 102, 0.36);
	
	/* Orange / Promo / Hot / Fire */
	--color-orange: #FF9F1C;
	--color-orange-hover: #FFB547;
	--color-orange-active: #C56F00;
	--color-orange-dark: #3D2100;
	--color-orange-soft: rgba(255, 159, 28, 0.16);
	--color-orange-border: rgba(255, 181, 71, 0.48);
	--shadow-orange-glow: 0 0 22px rgba(255, 159, 28, 0.38);
}

:root {
	/* Base borders */
	--border-subtle: rgba(255, 255, 255, 0.06);
	--border-soft: rgba(255, 255, 255, 0.10);
	--border-default: rgba(255, 255, 255, 0.14);
	--border-strong: rgba(255, 255, 255, 0.22);
	
	/* Brand borders */
	--border-blue-soft: rgba(8, 106, 209, 0.35);
	--border-blue: rgba(8, 106, 209, 0.55);
	--border-cyan-soft: rgba(50, 237, 252, 0.28);
	--border-cyan: rgba(50, 237, 252, 0.48);
	--border-cyan-strong: rgba(78, 246, 253, 0.75);
	
	/* Semantic borders */
	--border-green: rgba(34, 242, 139, 0.48);
	--border-red: rgba(255, 85, 114, 0.48);
	--border-yellow: rgba(255, 224, 138, 0.55);
	--border-orange: rgba(255, 181, 71, 0.5);
	
	/* Active / focus */
	--border-active: #32EDFC;
	--border-focus: rgba(78, 246, 253, 0.9);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

* {
    scrollbar-color: var(--color-primary) var(--color-bg-main);
    scrollbar-width: thin;
}

@media (max-width: 1024px) {
	* {
		scrollbar-width: none;
	}
}

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100dvw;
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

* {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  font-size: 16px;
}

img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.top-safe-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top);
    background: #041225;
    z-index: 9999;
    pointer-events: none;
}
    

#root {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    padding: 0;
	height: 100dvh;
    overflow-y: auto;
	scrollbar-width: none;
}

.root {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    display: flex;
    flex-direction: row;
	position: relative;
}

.layout-main_wrapper {
	flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    display: flex;
}

@media (min-width: 1024px) and (max-width: 1440px) {
	.layout-main_wrapper {
		padding-left: 64px;
	}
}

@media (min-width: 1024px) {
	#root.game .layout-main_wrapper {
		padding-left: 64px;
	}
}

@media (max-width: 1024px) {
	.layout-main_wrapper {
		margin-bottom: calc(60px + var(--safe-area-inset-block-end));
	}
}


/* _________________________ */
/* header-start */

.header-main_wrapper {
	width: 100%;
    max-width: var(--size-container-width-max);
    height: var(--header-layout-height-mobile);
    background-color: var(--color-bg-main);
    color: var(--color-text-soft);
    padding-inline: var(--container-padding-mobile);
    align-items: center;
    margin-inline: auto;
    display: flex;
}

@media (min-width: 1024px) {
    .header-main_wrapper {
        height: var(--header-layout-height-desktop);
        padding-inline: var(--container-padding-desktop);
    }
}

.header-main_content {
	align-items: center;
    gap: var(--spacing-12);
    width: 100%;
    min-width: 0;
    display: flex;
}

.header-main_trailing {
	align-items: center;
    gap: var(--spacing-12);
    display: flex;
}

.header-main_logoLink {
	position: relative;
}

.icon-sprite_root {
    height: 50px;
    aspect-ratio: 1 / 1;
}

.header-main_logo {
    height: 70px;
    display: flex;
}

@media (min-width: 1024px) {
	.header-main_logo {
		height: 70px;
	}
}

.segment-control_root {
    align-items: center;
    display: inline-flex;
	padding: var(--spacing-2);
    border-radius: var(--tab-rounding-square-tab);
    background: var(--tab-color-segment-bg);
    gap: 3px;
}

@media (max-width: 1024px) {
	.segment-control_root {
		display: none;
	}
}

@media (max-width: 1740px) {
	.segment-control_root.games {
		display: none;
	}
}

.tab_root {
	position: relative;
	cursor: pointer;
	height: var(--size-control-l);
	justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    padding-inline: var(--spacing-16);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
	border-radius: var(--tab-rounding-square-tab);
	line-height: 20px;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 14px;
}

.tab_root:hover {
	background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.tab_root:active {
	opacity: 0.86;
}

.tab_root svg {
	width: 24px;
    height: 24px;
    padding: var(--spacing-2);
	color: var(--color-text-soft);
    fill: currentColor;
}

.tab_root:hover svg {
	color: var(--color-text-main);
}

.tab_root:not(:first-child)::before {
    background-color: var(--color-bg-elevated);
    content: "";
    width: 1px;
    height: var(--size-control-xxs);
    position: absolute;
    inset-inline-start: -2px;
}

.tab_fullWidth {
	width: 100%;
}

.tab_selected {
	background: var(--color-primary);
    color: var(--color-text-main);
}

.tab_selected svg {
	color: var(--color-text-main);
}

.tab_selected:hover {
	background: var(--color-primary-hover);
}

.tab_root:not(:first-child):hover::before,
.tab_root:hover + .tab_root::before,
.tab_root.tab_selected::before,
.tab_root.tab_selected + .tab_root::before {
  background-color: unset;
}

.img_link {
    background-size: contain !important;
    background-position: center center !important;
	min-width: 75px;
	height: 100%;
}

.aviator {
	background: url(/img/games-ico/header/aviator.png) no-repeat;
}

.lj {
	background: url(/img/games-ico/header/lj.png) no-repeat;
}

.crash {
	background: url(/img/games-ico/header/crash.png?v=1) no-repeat;
}

.astronaut {
	background: url(/img/games-ico/header/astronaut.png) no-repeat;
}

.mines {
	background: url(/img/games-ico/header/mines.png) no-repeat;
}

.aof {
	background: url(/img/games-ico/header/aof.png?v=1) no-repeat;
}

.thimbles {
	background: url(/img/games-ico/header/thimbles.png?v=1) no-repeat;
}

.header-main_leading {
	justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-12);
    flex-grow: 1;
    min-width: 0;
    margin-inline-start: auto;
    display: flex;
}

.buttons_root {
	gap: var(--spacing-8);
    display: flex;
}

@media (min-width: 1024px) {
	.buttons_root {
		gap: var(--spacing-12);
		display: flex;
	}
}

.buttons_variant {
	cursor: pointer;
	border-radius: var(--tab-rounding-square-tab);
	display: flex;
	transition: all 0.1s ease;
    justify-content: center;
    align-items: center;
	font-size: 14px;
    font-weight: 600;
	color: var(--color-text-main);
	height: 32px;
	padding: 12px;
}

@media (min-width: 1024px) {
	.buttons_variant {
		height: 44px;
		padding: 20px;
	}
}

@media (max-width: 1024px) {
    .buttons_variant {
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
    }
}

.buttons_variant:active {
	opacity: 0.86;
}

.header-auth-button {
    background: var(--color-bg-card-soft); 
}

.header-auth-button:hover {
	background: var(--color-bg-card-soft-hover);
}

.header-registration-button {
    background: var(--color-primary);
    border: 1px solid transparent;
    translate: 0px 0px 1px;
}

.header-registration-button:hover {
	background: var(--color-primary-hover);
}

.header-registration-button::before {
    content: " ";
    position: absolute;
    inset: calc(1px* -1);
    z-index: -1;
    border: inherit;
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), #1d5b6a00 80%, #d1f2ff 88%, #d1f9ff 92%, #1d626a00 100%);
    background-origin: border-box;
    -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
    mask: linear-gradient(black, black), linear-gradient(black, black);
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 3s linear infinite;
}

.header-balance-rendered {
	align-items: center;
    gap: var(--spacing-12);
    display: flex;
    min-width: 0;
}

.header-balanceBlock {
	flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: end;
    background: var(--color-bg-card-soft);
	height: var(--size-control-xl);
    padding-inline: 12px;
    border-radius: var(--tab-rounding-square-tab);
    justify-content: center;
}

@media (max-width: 1024px) {
	.header-balanceBlock {
		height: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}
}

.balance-currency {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
	.balance-currency {
		font-size: 11px;
	}
}

.balance-money {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.balance-money-view {
    white-space-collapse: unset;
    font-size: 14px;
    text-align: end;
    font-weight: 600;
    color: var(--color-text-main);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 1024px) {
	.balance-money-view {
		font-size: 13px;
	}
}

.balance-dec {
	color: var(--color-text-soft);
    font-weight: 400;
}

.header-deposit-button {
	background: var(--color-green-active);
}

.header-deposit-button:hover {
    background: var(--color-green);
}

.settings-header {
	display: flex;
    position: relative;
    align-items: center;
}

.settings-header__button {
    cursor: pointer;
    transition: .1s ease;
    height: var(--size-control-xl);
    width: var(--size-control-xl);
    border-radius: var(--tab-rounding-square-tab);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--color-bg-card-soft);
    color: var(--color-text-soft);
}

@media (max-width: 1024px) {
	.settings-header__button {
		height: var(--size-control-s);
		width: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}
}

.settings-header__button:hover {
	background: var(--color-bg-card-soft-hover);
    color: var(--color-text-main);
}

.settings-header__button:active {
    opacity: 0.86;
}

.settings-header__button svg {
    fill: currentColor;
    width: 100%;
    height: 100%;
    padding: 12px;
}

@media (max-width: 1024px) {
	.settings-header__button svg {
		padding: 8px;
	}
}

.notifications-icon-active {
    position: absolute;
    right: 14px;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--color-red);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1024px) {
	.notifications-icon-active {
		right: 10px;
		top: 7px;
		width: 5px;
		height: 5px;
	}
}

.notifications-icon-active.active {
	animation: notifications-icon-key .5s linear infinite alternate;
}

@keyframes notifications-icon-key {
	0% { opacity: 0; }
	70%   { opacity: 1; }
	100%   { opacity: 1; }
}

/* header-end */
/* _________________________ */

/* _________________________ */
/* home-start */

.game-box {
    --container__padding: var(--container-padding-mobile);
    width: 100%;
    max-width: var(--size-container-width-max);
    gap: var(--spacing-24);
    padding-block: var(--container-page-content-padding-top-mobile)var(--container-page-content-padding-bottom-mobile);
    padding-inline: var(--container__padding);
    flex-direction: column;
    margin-inline: auto;
    display: flex;
}

@media (min-width: 1024px) {
    .game-box {
        --container__padding: var(--container-padding-desktop);
        gap: var(--spacing-32);
        padding-block: var(--container-page-content-padding-top-desktop) var(--container-page-content-padding-bottom-desktop);
        padding-inline: var(--container-padding-desktop);
    }
}

@media (max-width: 1440px) {
	.game-box {
		gap: var(--spacing-24);
	}
}

@media (max-width: 1024px) {
	.game-box {
		gap: var(--spacing-12);
	}
}

.casino-preset-navigation_root {
	display: none;
	justify-content: center;
    
}

@media (max-width: 1740px) {
	.casino-preset-navigation_root {
		display: flex;
	}
}

.segment-chips-tab_root {
	isolation: isolate;
    grid-auto-columns: minmax(0, max-content);
    grid-auto-flow: column;
    width: max-content;
    display: grid;
    position: relative;
	border-radius: var(--tab-rounding-square-tab);
    background: var(--tab-color-segment-bg);
}

.chips-tab {
	position: relative;
    cursor: pointer;
    height: var(--size-control-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    padding-inline: var(--spacing-16);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
    border-radius: var(--tab-rounding-square-tab);
    line-height: 20px;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 1024px) {
	.chips-tab {
		height: var(--size-control-l);
	}
}

@media (max-width: 768px) {
	.chips-tab {
		height: var(--size-control-m);
	}
}

@media (max-width: 480px) {
	.chips-tab {
		height: var(--size-control-xs);
	}
}

.chips-tab:hover {
    background: var(--blue-hover-0);
}

.chips-tab:active {
	opacity: 0.86;
}

.chips-tab:not(:first-child)::before {
    background-color: var(--blue-button-0);
    content: "";
    width: 1px;
    height: var(--size-control-xxs);
    position: absolute;
    inset-inline-start: -2px;
}

.chips-tab:not(:first-child):hover::before,
.chips-tab:hover + .chips-tab::before,
.chips-tab.tab_selected::before,
.chips-tab.tab_selected + .chips-tab::before {
  background-color: unset;
}

.chips-tab .img_link {
	min-width: 80px;
}

@media (max-width: 768px) {
	.chips-tab .img_link {
		min-width: 60px;
	}
}

@media (max-width: 480px) {
	.chips-tab .img_link {
		min-width: 40px;
	}
}


/* carouel banners */

.carouel-grid_root {
    max-width: 100%;
    display: grid;
	
	grid-template: "a b" / 64% auto;
	gap: var(--spacing-16);
}

@media (max-width: 1440px) {
	.carouel-grid_root {
		grid-template: "a b" / 57.52% auto;
		gap: var(--spacing-16);
	}
}

@media (max-width: 1024px) {
	.carouel-grid_root {
		grid-template:
			"a"
			"b" / 1fr;

		grid-template-rows: auto auto;
	}
	

}

.banners-carousel_root {
	border-radius: 14px;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 2.625;
    box-shadow: var(--shadow-card);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
	grid-area: a;
	outline: 2px solid var(--color-bg-elevated);
}

@media (min-width: 1024px) {
    .banners-carousel_root {
        overflow: hidden;
		border-radius: calc(var(--tab-rounding-square-tab) * 2);
    }
}

.scaler_root {
    width: 100%;
    height: 100%;
    position: relative;
	flex-grow: 1;
    transition: opacity .28s ease-in;
}

.scaler_item {
	transform-origin: 0 0;
}

.swiper {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
    overflow: hidden;
	touch-action: pan-y;
	height: 100%;
	cursor: pointer;
}

.swiper-wrapper {
	z-index: 1;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-timing-function: initial;
    box-sizing: content-box;
    display: flex;
    position: relative;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
    display: block;
    position: relative;
	backface-visibility: hidden;
    transform: translateZ(0);
}

.banner_root {
	position: relative;
    overflow: hidden;
}

.banner-picture {
	display: contents;
}

.banner-image {
	object-fit: cover;
}

.banner-picture img {
	aspect-ratio: 2.625;
    display: block;
}

.bonus-container-page .banner-picture img {
	aspect-ratio: 2.8;
    display: block;
}

.banner-image-logo {
    width: 270px;
    height: auto;
    object-fit: contain;
}

.banner_content {
    padding: 28px;
    flex-direction: column;
    align-items: start;
    display: flex;
    position: absolute;
    inset: 0;
}

.heading_root {
	font-size: 28px;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: 0.33px;
    text-transform: uppercase;
	text-shadow: var(--shadow-card);
}

.heading_root {
    color: var(--color-text-main);
    -webkit-user-select: none;
    user-select: none;
}

.banner_buttons {
	justify-content: space-between;
    align-self: stretch;
    align-items: end;
    margin-top: auto;
    display: flex;
}

.banner_buttons a {
	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;
}

@media (max-width: 1440px) {
	.banner_buttons a {
		padding: 16px 42px;
		font-size: 18px;
	}
}

@media (max-width: 1440px) {
	.banner_buttons a {
		padding: 16px 42px;
		font-size: 18px;
	}
}

@media (max-width: 768px) {
	.banner_buttons a {
		padding: 16px 42px;
		font-size: 18px;
	}
}

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

.banner_buttons a:active {
	opacity: 0.86;
}

.slider-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s ease;
	z-index: 2;
}

@media (max-width: 768px) {
	.slider-controls {
		display: none;
	}
}

.banners-carousel_root:hover .slider-controls {
	opacity: 1;
	pointer-events: auto;
}

.slider-container {
	padding: 4px;
    background: var(--color-primary-soft);
    border-radius: var(--tab-rounding-square-tab);
    display: flex;
    gap: 4px;
}

/* =========================
   Banner swiper loading
========================= */

.banners-carousel_root {
    position: relative;
    background: var(--gradient-dark-card);
}

.banners-carousel_root.is-banner-loading {
    pointer-events: none;
}

.banners-carousel_root.is-banner-loading .scaler_root {
    opacity: 0;
}

.banners-carousel_root.is-banner-loading .slider-controls {
    opacity: 0;
    pointer-events: none;
}

.banners-carousel_root.is-banner-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        var(--color-bg-card-soft) 0%,
        var(--color-bg-main) 45%,
        var(--color-bg-card-soft) 100%
    );

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.banners-carousel_root.is-banner-loaded .scaler_root {
    opacity: 1;
}

.banners-carousel_root.is-banner-error .scaler_root {
    opacity: 0;
}

.banners-carousel_root.is-banner-error::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    pointer-events: none;
    background: var(--gradient-dark-card);
}

.prev-slide, .next-slide {
    background: var(--color-primary-soft);
    border: none;
    color: var(--color-text-soft);
    padding: 8px 18px;
    cursor: pointer;
    border-radius: var(--tab-rounding-square-tab);
    transition: .3s ease;
}

.prev-slide:hover, .next-slide:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-main);
}

.prev-slide:active, .next-slide:active {
    opacity: 0.86;
}

.game-of-the-week-container {
	--game-week-scale: 1;
	--game-week-base-width: 420px;
	--game-week-base-height: 320px;

	width: 100%;
	position: relative;
	overflow: hidden;

	border-radius: calc(var(--tab-rounding-square-tab) * 2);
	background: var(--gradient-primary);
	box-shadow: var(--shadow-card);
	outline: 2px solid var(--color-bg-elevated);

	grid-area: b;
	min-width: 0;
}

@media (max-width: 1024px) {
	.game-of-the-week-container {
		aspect-ratio: 2.625;
		height: auto;
		border-radius: 14px;
	}
}

.game-of-the-week-scaler {
	position: absolute;
	left: 0;
	top: 0;

	width: var(--game-week-base-width);
	height: var(--game-week-base-height);

	transform: scale(var(--game-week-scale));
	transform-origin: top left;
}

.game-of-the-week {
	position: relative;
	z-index: 2;

	width: var(--game-week-base-width);
	height: var(--game-week-base-height);

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 28px;
}

.game-of-the-week-overlay {
	position: absolute;
	z-index: 1;

	inset: 0;
	left: 20%;

	width: 100%;
	height: 100%;

	opacity: 0.8;
	background-image: url('/img/game_of_week.png?v=1');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;

	pointer-events: none;
}

@media (max-width: 1440px) {
	.game-of-the-week-overlay {
		left: 28px;
	}
}

@media (max-width: 1024px) {
	.game-of-the-week-overlay {
		left: 34px;
	}
}

.game-of-the-week-header {
	position: relative;
	z-index: 2;

	text-align: left;
	color: var(--color-text-main);
	font-size: 28px;
    font-weight: 800;
    line-height: 28px;
    text-transform: uppercase;
}

@media (max-width: 1440px) {
	.game-of-the-week-header {
		font-size: 38px;
		font-weight: 800;
		line-height: 38px;
	}
}

.game-of-the-week-main {
	z-index: 2;

	width: 100%;
	margin-top: auto;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
}

.game-of-the-week-button {
	position: relative;
	z-index: 3;

	width: 40%;
	min-width: 150px;

	background: var(--color-text-soft);
	color: var(--color-bg-card-soft);

	padding: 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;

	border-radius: var(--tab-rounding-square-tab);
	cursor: pointer;
	transition: .3s ease;
}

.game-of-the-week-button:hover {
	background: var(--color-text-main);
	color: var(--color-bg-card-soft-hover);
	box-shadow: var(--shadow-card);
}

.game-of-the-week-button:active {
	opacity: 0.86;
}

.game-of-the-week-picture-container {
	position: absolute;
    z-index: 2;
    bottom: 0;
    left: calc(100% - 28px);
    top: 50%;
    height: 220px;
    aspect-ratio: 4 / 5;
    transform: translate(-100%, -50%);
    cursor: pointer;
}

@media (max-width: 1024px) {
	.game-of-the-week-picture-container {
		left: calc(50% + 180px);
		top: 50%;
		height: 280px;
		transform: translate(-50%, -50%);
	}
}

.game-of-the-week-picture-container::after {
	content: "";
	position: absolute;
	z-index: -1;

	left: 50%;
	top: 50%;

	width: 260%;
	height: 105%;

	transform: translate(-50%, -50%);

	opacity: 0.8;

	background-image: url('/img/game_of_week.png?v=1');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;

	pointer-events: none;
}

.game-of-the-week-picture {
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	opacity: 0;
	scale: 1;
	border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
	transition: opacity 0.25s ease, scale 0.3s ease;
}

.game-of-the-week-picture:hover {
	scale: 1.05;
}

.game-of-the-week-picture-container.is-game-week-loaded .game-of-the-week-picture {
	opacity: 1;
}

.game-of-the-week-picture-container.is-game-week-error .game-of-the-week-picture {
	opacity: 0;
}

/* skeleton */
.game-of-the-week-picture-container:not(.is-game-week-loaded):not(.is-game-week-error) {
	pointer-events: none;
}

.game-of-the-week-picture-container:not(.is-game-week-loaded):not(.is-game-week-error) .game-of-the-week-picture {
	opacity: 0;
}

.game-of-the-week-picture-container:not(.is-game-week-loaded):not(.is-game-week-error)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	pointer-events: none;

	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);

	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}



/* =========================
   Game of the week container skeleton
========================= */

.game-of-the-week-container {
	background: linear-gradient(135deg, #086AD1 0%, #32EDFC 100%);
}

/*
	По умолчанию считаем блок НЕ готовым.
	Это важно, чтобы не было моргания до первого JS-скейла.
*/
.game-of-the-week-container:not(.is-game-week-container-ready),
.game-of-the-week-container.is-game-week-container-loading {
	pointer-events: none;
}

/* Прячем реальный контент, пока блок не готов */
.game-of-the-week-container:not(.is-game-week-container-ready) .game-of-the-week-scaler,
.game-of-the-week-container.is-game-week-container-loading .game-of-the-week-scaler {
	opacity: 0;
}

/* Базовый красивый градиент skeleton */
.game-of-the-week-container:not(.is-game-week-container-ready)::before,
.game-of-the-week-container.is-game-week-container-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 50;

	border-radius: inherit;
	pointer-events: none;

	background: linear-gradient(135deg, #086AD1 0%, #32EDFC 100%);
}

/* Лёгкий shimmer поверх синего градиента */
.game-of-the-week-container:not(.is-game-week-container-ready)::after,
.game-of-the-week-container.is-game-week-container-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 51;

	border-radius: inherit;
	pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.18) 45%,
		rgba(255, 255, 255, 0) 100%
	);

	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

/* Когда всё готово — показываем настоящий блок */
.game-of-the-week-container.is-game-week-container-ready .game-of-the-week-scaler {
	opacity: 1;
	transition: opacity 0.2s ease;
}

.game-of-the-week-container.is-game-week-container-ready::before,
.game-of-the-week-container.is-game-week-container-ready::after {
	display: none;
}

.last-wins-container_root {
	display: flex;
    flex-direction: column;
}

.last-wins-section_header {
    margin-bottom: var(--spacing-12);
    align-items: center;
    gap: 16px;
    display: flex;
}

@media (min-width: 1024px) {
    .last-wins-section_header {
        margin-bottom: var(--spacing-16);
    }
}

.last-wins-section_title {
	margin-inline-end: auto;
}

.title_root {
	display: flex;
    align-items: center;
    gap: 12px;
}

.icon-box_root {
	width: 44px;
    height: 44px;
    display: flex;
	justify-content: center;
    align-items: center;
    border-radius: var(--tab-rounding-square-tab);
	color: var(--color-text-main);
    background: var(--color-bg-card-soft);
}

.last-wins-section_title .icon-box_root {
	background: var(--color-green-active);
}

.title_title {
	color: var(--color-text-main);
    font-size: 20px;
    font-weight: 600;
}

.last-wins_online-container {
    align-items: flex-end;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .last-wins_online-container {
        justify-content: flex-end;
        align-items: center;
        gap: var(--spacing-8);
        flex-direction: row;
    }
}

.last-wins_online-container {
    max-width: 40%;
}

@media (min-width: 768px) {
    .last-wins_online-container {
        max-width: none;
    }
}

.last-wins_online_content {
	align-items: center;
    gap: var(--spacing-8);
    display: flex;
}

.last-wins_pulse_icon {
	flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    display: flex;
    position: relative;
}

.last-wins_pulse_icon div {
	background-color: var(--color-green);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

@keyframes last-wins_online-pulse {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(.75);
	}
}

.last-wins_pulse_icon div::before {
	background-color: var(--color-green);
    content: "";
    opacity: .3;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: .4s ease-in-out infinite alternate last-wins_online-pulse;
    position: absolute;
    top: 0;
    left: 0;
}

.last-wins_online {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 20px;
    color: var(--color-text-main);
    text-align: end;
}

.last-wins_online_description {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01px;
    line-height: 16px;
    color: var(--color-text-soft);
    text-align: end;
    text-wrap: balance;
}

@media (min-width: 1024px) {
    .last-wins_online_description {
        font-size: 14px;
        letter-spacing: 0px;
        line-height: 20px;
    }
}

.last-wins_list {
	width: 100%;
    padding-top: var(--spacing-4);
    margin-top: calc(var(--spacing-4)*-1);
    margin-right: calc(var(--spacing-48)*-1);
    gap: var(--spacing-8);
    --offset-position: -10px;
    --shadow-size: 40px;
    --shadow-gradient-direction: 270deg;
    flex-wrap: nowrap;
    display: flex;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .last-wins_list {
        max-width: calc(100% + var(--spacing-8));
        padding: var(--spacing-8);
        margin: calc(var(--spacing-8) * -1);
    }
}

.last-wins_list:after {
    z-index: 1;
    width: var(--shadow-size);
    background: linear-gradient(var(--shadow-gradient-direction),var(--color-bg-main)0%,var(--color-bg-main)20%,#fff0 100%);
    content: "";
    height: 100%;
    pointer-events: none;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-end: var(--offset-position);
}

.last-wins_prize-card_root {
    --prize-card__width: 65px;
    --prize-card__content-background: var(--color-secondary);
    --prize-card__content-background-hover: var(--color-primary-hover);
    --prize-card__content-rounding: var(--tab-rounding-square-tab);
    flex-direction: column;
    justify-content: flex-end;
    width: auto;
    height: 99px;
    display: flex;
    position: relative;
	flex: 0 0 auto;
    will-change: transform, opacity;
}



.last-wins_prize-card_content {
    width: fit-content;
    height: 75px;
    padding: var(--spacing-12);
    border-radius: var(--prize-card__content-rounding);
    background: var(--prize-card__content-background);
    align-items: stretch;
    gap: var(--spacing-12);
    transition: background-color .1s;
    display: flex;
    position: relative;
}

.last-wins_prize-card_root.superprize .last-wins_prize-card_content {
	background: var(--color-orange-active);
}

.last-wins_prize-card_root.superprize .last-wins_prize-card_content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(1px 1px at 5% 10%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 15% 30%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 25% 70%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 35% 20%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 45% 50%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 55% 80%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 65% 40%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 75% 60%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 85% 15%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 95% 75%, #fff 100%, transparent 0);

  opacity: 0.6;
  animation: starsFloat 2s linear infinite;
}

@keyframes starsFloat {
	from { background-position-y: 0; }
	to   { background-position-y: -60px; }
}

.last-wins_prize-card_content:after {
    border: 1px solid var(--border-strong);
    border-radius: inherit;
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
}

@supports (-webkit-mask-composite:xor) or (mask-composite:exclude) {
    .last-wins_prize-card_content:after {
        background: unset;
        -webkit-mask-composite: xor;
        padding: 1px;
        -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
        mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
        -webkit-mask-position: 0 0, 0 0;
        mask-position: 0 0, 0 0;
        -webkit-mask-size: auto, auto;
        mask-size: auto, auto;
        -webkit-mask-repeat: repeat, repeat;
        mask-repeat: repeat, repeat;
        -webkit-mask-clip: content-box, border-box;
        mask-clip: content-box, border-box;
        -webkit-mask-origin: content-box, border-box;
        mask-origin: content-box, border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source, match-source;
    }
}

.last-wins_prize-card_card {
    width: var(--prize-card__width);
    flex-direction: column;
    justify-content: flex-end;
    max-height: 100%;
    display: flex;
    position: relative;
	aspect-ratio: 4 / 5;
}

.last-wins_prize-card_cardInner {
    --game-card__border-width: 1px;
    --game-card__focus-width: 2px;
    --game-card__outline-offset: 3px;
    --game-card__border-radius: var(--tab-rounding-square-tab);
    --game-card__border-color: var(--border-strong);
    --game-card__offset-image: var(--spacing-4);
    --game-card__image-hover-scale: 1.1;
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
	aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
    .last-wins_prize-card_cardInner {
        --game-card__border-width: var(--spacing-2);
        --game-card__border-radius: var(--tab-rounding-square-tab);
        --game-card__offset-image: var(--spacing-8);
    }
}

.last-wins_prize-card_cardInner {
	z-index: 1;
    width: var(--prize-card__width);
    border-radius: var(--tab-rounding-square-tab);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
    --game-card__border-radius: var(--tab-rounding-square-tab);
}

.last-wins_game-card_body {
    position: relative;
}

.last-wins_game-card_pictureWrapper {
    border-radius: var(--game-card__border-radius);
    position: absolute;
    inset: 0;
    overflow: hidden;
	aspect-ratio: 4 / 5;
}

.last-wins_game-card_picture {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.last-wins_game-card_image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .1s linear;
    transform: scale(1.01);
}

.last-wins_prize-card_cardInner:hover .last-wins_game-card_image {
    transform: scale(var(--game-card__image-hover-scale));
}

.last-wins_prize-card_info {
	gap: var(--spacing-8);
    flex-direction: column;
    width: fit-content;
    min-width: 119px;
    position: relative;
}

.last-wins_prize-card_badge {
    border-radius: var(--tab-rounding-square-tab);
    -webkit-user-select: none;
    user-select: none;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01px;
    line-height: 16px;
    align-items: center;
    display: inline-flex;
	padding: var(--spacing-4) var(--spacing-8);
	background-color: var(--color-green);
    color: var(--color-text-main);
	width: fit-content;
    transition: background-color .1s;
}

.last-wins_prize-card_root.superprize .last-wins_prize-card_badge {
	background-color: var(--color-orange);
}

.last-wins_badge_text {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.last-wins_prize-card_description {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01px;
    line-height: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.last-wins_prize-card_userId {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01px;
    line-height: 16px;
    color: var(--color-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .1s;
    overflow: hidden;
}

/* =========================
   Last wins row skeleton
========================= */

.last-wins_list {
    --last-wins-real-height: 103px;
    min-height: var(--last-wins-real-height);
}

@media (min-width: 768px) {
    .last-wins_list {
        --last-wins-real-height: 115px;
    }
}

.last-wins-container_root.is-last-wins-loading .last-wins_list {
    height: var(--last-wins-real-height);
    min-height: var(--last-wins-real-height);
    overflow: hidden;
}

.last-wins-container_root.is-last-wins-loading .last-wins_list::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: var(--tab-rounding-square-tab);
    pointer-events: none;

    background: linear-gradient(
        90deg,
        var(--color-bg-card-soft) 0%,
        var(--color-bg-main) 45%,
        var(--color-bg-card-soft) 100%
    );

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.last-wins-container_root.is-last-wins-loading .last-wins_prize-card_root {
    opacity: 0 !important;
    pointer-events: none;
}


/* =========================
   Last wins image skeleton
========================= */



.last-wins_game-card_pictureWrapper {
    background: var(--gradient-dark-card);
}

.last-wins_game-card_image {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s ease;
}

.last-wins_prize-card_root.is-card-loaded .last-wins_game-card_image {
    opacity: 1;
}

.last-wins_prize-card_root.is-card-loading .last-wins_game-card_image {
    opacity: 0 !important;
}

.last-wins_prize-card_root.is-card-error .last-wins_game-card_image {
    display: none;
}

.last-wins_prize-card_root.is-card-loading .last-wins_game-card_pictureWrapper::before,
.last-wins_prize-card_root.is-skeleton .last-wins_game-card_pictureWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        var(--color-bg-card-soft) 0%,
        var(--color-bg-main) 45%,
        var(--color-bg-card-soft) 100%
    );

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}


.swiper-wrapper.is-resizing .slide {
    transition: none !important;
}

.slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.games-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.game-categories {
    width: 100%;
	--offset-position: -10px;
    --shadow-size: 40px;
    --shadow-gradient-direction: 270deg;
	position: relative;
}

.game-categories div {
	overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
	
}

.game-categories::after { 
    z-index: 1;
	top: 0;
    width: var(--shadow-size);
    background: linear-gradient(var(--shadow-gradient-direction),var(--color-bg-main)0%,var(--color-bg-main)20%,#fff0 100%);
    content: "";
    height: 100%;
    pointer-events: none;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-end: var(--offset-position);
}

.game-categories ul {
	display: flex;
    gap: 8px;
	flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.game-categories li {
    position: relative;
}

.game-categories a {
	height: 40px;
    display: flex;
	justify-content: center;
	border-radius: var(--tab-rounding-square-tab);
    align-items: center;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    color: var(--color-text-soft);
	gap: 8px;
    text-decoration: none;
    font-size: 14px;
	font-weight: 600;
    line-height: 20px;
	padding-inline: 16px;
	background: var(--color-bg-card-soft);
    transition: .1s ease;
}

.game-categories a:hover {
    background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.game-categories a:active {
    opacity: 0.86;
}

.game-categories a.active {
    background: var(--color-primary);
	color: var(--color-text-main);
}

.game-categories a.active:hover {
    background: var(--color-primary-hover);
}

.game-categories .category-icon {
    margin-right: 12px;
    opacity: 0.7;
}

.category-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
	text-align: center;
}

.category-section {
    width: 100%;
	display: flex;
    flex-direction: column;
    gap: 16px;
}



.section-title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 12px;
    color: #f0f2f5;
}

.game-category {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.game-category:focus {
    outline: none;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.game-card {
    position: relative;
	border-radius: calc(var(--tab-rounding-square-tab) * 2);
    overflow: hidden;
    background: var(--gradient-dark-card);
    transition: .1s ease;
    aspect-ratio: 4/5;
	border: 1px solid #b3b6bd1f;
}

@media (max-width: 1024px) {
    .game-card {
		border-radius: var(--tab-rounding-square-tab);
    }
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	position: absolute;
	transition: 0.1s linear;
    scale: 1;
}

.game-card img:hover {
    scale: 1.05;
}

.game-card .game-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
	pointer-events: none;
   
    color: #fff;
}

.game-card .game-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.game-card .game-provider {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
}

.game-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    will-change: transform, opacity; /* Улучшает производительность анимации */
}

.game-card:hover::before {
    margin: 0px;
}

.game-card::after {
    content: '';
    position: absolute;
	pointer-events: none;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
	z-index: 2;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
}

.game-card:hover::after {
    animation: shine 0.7s ease-in-out;
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

.game-card.hidden {

}

/* Добавим эффект наведения для карточек */
.game-card:hover {
	box-shadow: var(--shadow-card);
}

/* Анимация для заголовков категорий */
.section-title {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: left center;
}

.section-title.hidden {
	display: none;
    opacity: 0;
    transform: translateX(-20px);
}

/* =========================
   FIX: hidden не ломает grid
========================= */

.game-card.hidden {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important;
}


/* =========================
   FIX: убираем прыжки секций
========================= */

.category-section {
    animation: none !important;
    transform: none !important;
}

.game-card.with-animation {
    animation: none !important;
}

.game-card {
    transform: none !important;
}


/* =========================
   Game card loading
========================= */

.game-card {
    position: relative;
}

.game-card img {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease, scale 0.3s ease;
}

.game-card.is-card-loaded img {
    opacity: 1;
}

.game-card.is-card-error img {
    display: none;
}

.game-card.is-card-loading::before,
.game-card.is-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    margin: 0;
    opacity: 1;

    background: linear-gradient(90deg, var(--color-bg-card-soft) 0%, var(--color-bg-main) 45%, var(--color-bg-card-soft) 100%);

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.game-card.is-card-loading::after,
.game-card.is-skeleton::after {
    display: none;
}

.game-card.is-card-loading:hover::before,
.game-card.is-skeleton:hover::before {
    margin: 0;
}

.game-card.is-skeleton {
    pointer-events: none;
    cursor: default;
    aspect-ratio: 4/5;
}


/* =========================
   Title loading
========================= */

.category-section.is-section-loading .title_root,
.title_root.is-skeleton-title {
    pointer-events: none;
}

.category-section.is-section-loading .icon-box_root,
.title_root.is-skeleton-title .icon-box_root {
    position: relative;
    overflow: hidden;
}

.category-section.is-section-loading .icon-box_root svg,
.title_root.is-skeleton-title .icon-box_root svg {
    opacity: 0;
}

.category-section.is-section-loading .title_title,
.title_root.is-skeleton-title .title_title {
    position: relative;
    overflow: hidden;
    color: transparent;
    border-radius: 8px;
}

.category-section.is-section-loading .title_title {
    min-width: 120px;
}

.title_root.is-skeleton-title .title_title {
    width: 160px;
    height: 24px;
}

.category-section.is-section-loading .icon-box_root::before,
.category-section.is-section-loading .title_title::before,
.title_root.is-skeleton-title .icon-box_root::before,
.title_root.is-skeleton-title .title_title::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(90deg, var(--color-bg-card-soft) 0%, var(--color-bg-main) 45%, var(--color-bg-card-soft) 100%);

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

@keyframes gameSkeletonLoading {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

/* FIX: когда карточка одновременно loaded + loading,
   прячем картинку, чтобы skeleton выглядел как skeleton, а не затемнение */
.game-card.is-card-loading img {
    opacity: 0 !important;
}

/* На всякий случай skeleton поверх всего */
.game-card.is-card-loading::before,
.game-card.is-skeleton::before {
    z-index: 5;
}

/* Overlay с названием/текстом тоже не должен торчать во время loading */
.game-card.is-card-loading .game-overlay,
.game-card.is-skeleton .game-overlay {
    opacity: 0;
}

.slider-win_main {
    width: 100%;
    height: 99px;
    position: relative;
    overflow: hidden;
    translate: 0px 0px 1px;
}

/* Добавляем тени слева и справа */
.slider-win_main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #0f192f 0%, rgba(15, 25, 47, 0) 0%, rgba(15, 25, 47, 0) 85%, #0f192f 100%);
    z-index: 10;
}

.slider-win_container:hover {
	background: var(--blue-hover-0);
}

.slider-win_container:active {
	opacity: 0.86 !important;
}

.slider-win_wrapper {
    display: flex;
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    transition: transform 0.5s ease;
	align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}



.slider-win_container {
	display: flex;
	gap: 18px;
    align-items: center;
	border-radius: 8px;
    background: var(--blue-button-0);
    height: 87px;
	width: 180px;
	position: absolute;
	z-index: 5;
	transition: .1s ease;
	cursor: pointer;
}

.slider-win_img-container {
    width: auto;
    height: 87px;
    left: 10px;
    bottom: 10px;
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    aspect-ratio: 4 / 5;
}

.slider-win_img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
	transition: .3s ease;
}

.slider-win_img-container:hover .slider-win_img {
	scale: 1.05;
}

.slider-win_text-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	gap: 4px;
}

.slider-win_text-money {
	color: var(--white-1);
    background: #12B857;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    z-index: 3;
}

.slider-win_text-id {
	color: var(--blue-text);
    font-size: 10px;
    font-weight: 400;
}

.slider-win_container.high::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(1px 1px at 5% 10%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 15% 30%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 25% 70%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 35% 20%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 45% 50%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 55% 80%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 65% 40%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 75% 60%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 85% 15%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 95% 75%, #fff 100%, transparent 0);

  opacity: 0.6;
  animation: starsFloat 2s linear infinite;
}




@keyframes starsFloat {
  from { background-position-y: 0; }
  to   { background-position-y: -60px; }
}


.slider-win_container.high {
	background: linear-gradient(135deg, var(--orange-0), #FFB347);
	
}

.slider-win_container.high:hover {
	background: linear-gradient(135deg, var(--orange-hover-0), #FFB347);
}

.slider-win_container.high .slider-win_text-money {
	color: var(--white-0);
	background: var(--orange-0);
}

.slider-win_container.high .slider-win_text-id {
	color: var(--white-1);
}

@media (max-width: 1440px) {
	.games-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
	.games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
	
	.slider-win_main {
		height: 79px;
	}
	
	.slider-win_container {
		height: 70px;
		gap: 12px;
	}
	
	.slider-win_img-container {
		height: 70px;
		left: 5px;
		bottom: 5px;
	}
	
	
}

@media (max-width: 480px) {
	.games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* home-end */

/* footer */

.footer_root {
    grid-template-rows: min-content max-content min-content min-content;
    width: 100%;
    display: grid;
    position: relative;
	gap: 16px;
	
}

@media (max-width: 1024px) {
	.footer_root {
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.footer_root {
		gap: 12px;
	}
}

.header-row_footer {
    align-items: center;
    gap: 16px;
    display: flex;
}

.footer_logo svg {
	height: 70px;
}

.header-row_line {
    background-color: var(--color-bg-elevated);
    flex-grow: 1;
    height: 1px;
}
.footer_button-up {
    border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
    background-color: var(--color-bg-card-soft);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    padding: 0;
    transition: .1s ease;
    display: inline-block;
    position: relative;
}

.footer_button-up:hover {
	background: var(--color-bg-card-soft-hover);
}

.footer_button-up:active {
	opacity: 0.86;
}

.button-up {
    padding: 12px;
    position: relative;
}

.button-up_content {
    justify-content: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 100%;
    display: flex;
}

.icon-button-up_scrollTop {
    color: var(--color-text-main);
	fill: currentColor;
    display: block;
}

@media (min-width: 1024px) {
    .footer-mainRow>:not(:first-child), .footer-mainRow .footer-supportRow {
        margin-top: 0;
    }
}
.footer-mainRow .footer-supportRow {
    margin-top: 12px;
}
.footer-mainRow>:not(:first-child) {
    margin-top: 24px;
}
.supportRow_root {
    font-size: 12px;
    gap: 12px;
    grid-template-columns: 1fr;
    display: grid;
}
@media (min-width: 1024px) {
    .supportRow_root {
        gap: 16px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1440px) {
    .supportBlock_hasOwnerBanner {
        flex-direction: column;
        align-items: start;
    }
}
.supportBlock_root {
    width: auto;
    padding: 16px;
    border-radius: var(--tab-rounding-square-tab);
    background: radial-gradient(circle at top left, var(--color-bg-card-soft), transparent 0%), linear-gradient(90deg, var(--color-bg-card-soft) 0%, var(--color-primary) 50%, var(--color-bg-card-soft) 100%);
    gap: 24px;
    flex-direction: row;
    display: flex;
    position: relative;
	justify-content: space-between;
    align-items: center;
}
.supportBlock_content, .supportBlock_root button {
    z-index: 1;
}

.supportBlock_content {
    gap: 4px;
    flex-direction: column;
    width: 190px;
    display: flex;
	cursor: default;
}
@media (min-width: 1024px) {
    .supportBlock_content {
        width: 150px;
    }
}
.supportBlock_title {
    color: var(--color-text-main);
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    display: flex;
	align-items: center;
}
.supportBlock_badge {
	border-radius: var(--tab-rounding-square-tab);
    -webkit-user-select: none;
    user-select: none;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01px;
    line-height: 16px;
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    background-color: var(--color-primary);
    padding: 4px 8px;
}
.badge_text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.supportBlock_secondary {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 16px;
}

.support_imageWrapper {
	z-index: 1;
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
}

@media (min-width: 1024px) {
	.support_imageWrapper {
        display: none;
    }
}

@media (min-width: 1440px) {
    .support_imageWrapper {
        width: 120px;
        height: 100%;
        display: block;
        position: relative;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .support_imageWrapper {
        width: 120px;
        height: 100%;
        display: block;
        position: relative;
    }
}

.support_picture_root {
    display: contents;
}

.support_picture_root img {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
}

.support_picture_root img {
    width: auto;
    height: 120px;
    inset-block-end: 52px;
    inset-inline-end: 24px;
}

@media (min-width: 1440px) {
    .support_picture_root img {
        transform: translate(0, 16px);
        inset-block-start: unset;
        inset-block-end: 0;
        inset-inline-end: 0;
    }
}

.support_picture_root img {
    aspect-ratio: none;
    display: block;
	transform: translate(0, 16px);
        inset-block-start: unset;
        inset-block-end: 0;
        inset-inline-end: 0;
}

.supportBlock_button {
    background: var(--color-primary);
    color: var(--color-text-main);
    border-radius: var(--tab-rounding-square-tab);
    cursor: pointer;
    user-select: none;
    will-change: transform;
    transition: opacity .3s;
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 20px;
	padding: 12px 18px;
    transition: .1s ease;
    position: relative;
}

@media (max-width: 480px) {
	.supportBlock_content {
		width: auto;
	}
	
	.supportBlock_button {
		width: 100%;
	}
}

.supportBlock_button:hover {
    background: var(--color-primary-hover);
}
.supportBlock_button:active {
    opacity: 0.86;
}

.supportEmail_wrapper {
    gap: 12px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

@media (min-width: 1024px) {
    .supportEmail_wrapper {
        gap: 16px;
    }
}

@media (max-width: 480px) {
	.supportEmail_wrapper {
        flex-direction: column;
    }
}

.supportEmail_block {
	width: 100%;
    padding: 16px;
    border-radius: var(--tab-rounding-square-tab);
    background: var(--gradient-dark-card);
    color: var(--color-text-muted);
    justify-content: space-between;
    gap: 2px;
    flex-direction: row;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
}


.support-root {
	display: flex;
	flex-direction: column;
}

.support-root>span {
    white-space: nowrap;
	cursor: default;
}
.support-root>a {
    width: max-content;
	color: var(--color-text-main);
	font-size: 14px;
	line-height: 20px;
	text-decoration: inherit;
}

.supportEmail_block picture {
	position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    right: 0;
    justify-content: flex-end;
	align-items: center;
}

.supportEmail_block picture img {
    object-fit: contain;
    position: relative;
	max-width: 80px;
    max-height: 50px;
}

.supportRow-text {
	background-color: unset;
    color: var(--color-text-main);
    cursor: pointer;
    align-items: center;
    gap: 4px;
	font-weight: 400;
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    display: inline-flex;
}

.footer-navigationRow {
    gap: 24px;
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .footer-navigationRow {
        gap: 40px;
    }
}
@media (min-width: 1440px) {
    .footer-navigationRow {
        flex-direction: row;
        gap: 0;
    }
}
.navigationRow_root {
    gap: 20px;
    flex-direction: row;
	width: 100%;
	justify-content: space-between;
    align-items: flex-start;
    display: flex;
	padding: 12px;
}
@media (min-width: 1024px) {
    .navigationRow_root {
        gap: 80px;
    }
}
.navigationRow_section {
    flex-direction: column;
    display: flex;
}
.navigationRow_section>div {
    flex: 1;
}
@media (min-width: 1024px) {
    .navigationRow_section>div {
        flex-grow: 0;
    }
}
.navigationRow_sectionTitle {
	color: var(--color-text-main);
    margin: 0;
    font-size: 16px;
	font-weight: 600;
    line-height: 22px;
    text-transform: none;
    text-wrap: balance;
	cursor: default;
}
@media (min-width: 1024px) {
    .navigationRow_sectionTitle {
        font-size: 20px;
        line-height: 24px;
    }
}
.navigationRow_sectionItems {
    grid-template-rows: 1fr;
    transition: grid-template-rows .2s ease-out;
    display: grid;
}
@media (min-width: 1024px) {
    .navigationRow_sectionItems {
        width: max-content;
    }
}
.navigationRow_itemsContainer {
	overflow: hidden;
}
@media (min-width: 1024px) {
    .navigationRow_itemsContainer {
        gap: 40px;
        display: flex;
    }
}
.navigationRow_itemsGroup {
	margin-top: 12px;
    gap: 8px;
    flex-direction: column;
    display: flex;
}
@media (min-width: 1024px) {
    .navigationRow_itemsGroup {
        margin-top: 16px;
    }
}
.supportRow-text_secondary {
	color: var(--color-text-muted);
	transition: .1s ease;
}
.supportRow-text_secondary:hover {
	color: var(--color-text-main);
}
.supportRow-text_secondary:active {
	opacity: 0.86;
}
.navigationRow_itemsGroup>* {
    padding-block: 2px;
}
@media (min-width: 1024px) {
    .navigationRow_itemsGroup>* {
        padding: 0;
    }
}

.footer-app_root {
    max-width: 100%;
    display: grid;
	margin-block: 0px;
    grid-template: "a b" / auto 277px;
    grid-area: appBanner;
    gap: var(--spacing-16);
}

@media (max-width: 1024px) {
    .footer-app_root {
        grid-template: "a" / 100%;
    }
}

.footer-banner-mobile-app_root {
    min-height: 94px;
    padding: var(--spacing-16);
    border-radius: var(--tab-rounding-square-tab);
    gap: var(--spacing-12);
    grid-template-columns: minmax(0,156px) auto;
    display: grid;
    position: relative;
	grid-area: a;
}

@media (min-width: 1024px) {
    .footer-banner-mobile-app_root {
        min-height: 180px;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .footer-banner-mobile-app {
        padding-inline-end: 275px;
    }
}



.footer-banner-mobile-app_bg {
    border-radius: inherit;
    background: linear-gradient(135deg, #086AD1 0%, #5B2EFF 45%, #B832FF 100%);
    position: absolute;
    inset: 0;
}

.footer-banner-mobile-app_content, .footer-banner-mobile-app_button {
    z-index: 2;
}

.footer-banner-mobile-app_content {
    gap: var(--spacing-8);
    white-space: normal;
    flex-direction: column;
    display: flex;
}

.footer-banner-mobile-app_title {
    color: var(--color-content-base-static-white);
    text-wrap: balance;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.12px;
    line-height: 22px;
}

.footer-banner-mobile-app_secondary {
    color: var(--color-content-base-static-white);
    text-wrap: pretty;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01px;
    line-height: 16px;
}

.footer-banner-mobile-app_button {
    position: relative;
    width: 100%;
    background: var(--color-text-soft);
    color: var(--color-bg-card-soft);
    padding: 8px;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--tab-rounding-square-tab);
    cursor: pointer;
    transition: .3s ease;
	place-self: end;
	justify-self: stretch;
}

.footer-banner-mobile-app_picture {
	display: contents;
}

.footer-banner-mobile-app_picture img {
	transition: opacity .28s ease-in;
	pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
	z-index: 1;
    width: 160px;
    inset-block-end: var(--spacing-12);
    inset-inline-end: 0;
	display: block;
}

@media (min-width: 1024px) {
    .footer-banner-mobile-app_picture img {
        inset-block-end: 0;
		width: 410px;
        height: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .footer-banner-mobile-app {
		padding-inline-end: 220px;
	}
	
	.footer-banner-mobile-app_picture img {
		inset-block-end: 0;
		width: 340px;
		height: auto;
		inset-inline-end: -20px;
	}
	
	.footer-app_root {
		grid-template: "a b" / auto 210px;
	}
}

.footer-banner-desktop-app_root {
    padding: var(--spacing-16);
    border-radius: var(--tab-rounding-square-tab);
    gap: var(--spacing-12);
    grid-template-columns: 1fr max-content;
    display: grid;
    position: relative;
	overflow: hidden;
	grid-area: b;
}

@media (min-width: 1024px) {
    .footer-banner-desktop-app_root {
        grid-template-columns: auto;
		min-height: 190px;
    }
}

@media (max-width: 1024px) {
	.footer-banner-desktop-app_root {
		display: none;
	}
}

.footer-banner-desktop-app_bg {
    border-radius: inherit;
    background: linear-gradient(
286deg, #101A30 0%, #1B2A68 38%, #6D2EFF 72%, #B832FF 100%);
    position: absolute;
    inset: 0;
}

.footer-banner-desktop-app_content {
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
	z-index: 1;
}

.footer-banner-desktop-app_title {
    color: var(--color-content-base-static-white);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.12px;
    line-height: 22px;
}

.footer-banner-desktop-app_button {
    position: relative;
    width: 100%;
    background: var(--color-text-soft);
    color: var(--color-bg-card-soft);
    padding: 8px;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--tab-rounding-square-tab);
    cursor: pointer;
    transition: .3s ease;
    place-self: end;
    justify-self: stretch;
	z-index: 1;
}

.footer-banner-desktop-app_picture {
    display: contents;
}

.footer-banner-desktop-app_picture img {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: 160px;
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
	display: block;
	transform: translate(40px, 5px) rotate(-10deg);
}

@media (min-width: 1024px) {
    .footer-banner-desktop-app_picture img {
        width: 207px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
	
	.footer-banner-desktop-app_root {
		min-height: 180px;
	}
	
	.footer-banner-desktop-app_picture img {
		width: 180px;
		transform: translate(75px, -15px) rotate(-10deg);
	}
}

@media (max-width: 1024px) {
	.footer-banner-mobile-app_picture img {
		width: 335px;
		inset-block-end: 0;
		inset-inline-end: 0;
		height: auto;
		display: block;
	}
	
	.footer-banner-mobile-app_root {
		grid-template-columns: 1fr;
		padding-inline-end: 275px;
	}
}

@media (max-width: 768px) {
	.navigationRow_root {
		flex-direction: column;
	}
	
	.footer-app_root {
		grid-template: "a" / 100%;
		width: 100%;
	}
	
	.footer-banner-mobile-app_root {
		grid-template-columns: 1fr;
		padding-inline-end: var(--spacing-16);
	}
	
	.footer-banner-mobile-app_content {
		max-width: 180px;
	}
	
	.footer-banner-mobile-app_picture img {
		width: 240px;
		inset-block-end: 55px;
		inset-inline-end: 15px;
		height: auto;
		display: block;
	}
	
	.footer-banner-mobile-app_title {
		font-size: 14px;
		line-height: 16px;
	}
}

@media (max-width: 480px) {
    .footer-banner-mobile-app_picture img {
        width: 180px;
    }
}

.footer-bottomRow {
    gap: 20px;
    flex-direction: column;
    display: flex;
}

.bottomRow_CryptoAndLicensesBlock {
	justify-content: center;
    gap: 24px;
    flex-direction: column;
    display: flex;
    align-items: center;
	background: var(--gradient-dark-card);
    padding: 24px;
    border-radius: calc(var(--tab-rounding-square-tab) * 1);
}

.bottomRow_licenses {
    gap: 12px;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .bottomRow_licenses {
        width: auto;
        height: 28px;
        justify-content: flex-end;
    }
}

.bottomRow_licenses-img {
    align-items: center;
    height: 100%;
    display: flex;
}

.bottomRow_licenses-img img {
	object-fit: cover;
    height: 100%;
}

.bottomRow_crypto-img {
    align-items: center;
    height: 100%;
    display: flex;
}

.bottomRow_crypto-img img {
	object-fit: cover;
    height: 100%;
}

.bottomRow_crypto {
	gap: 12px;
    flex-wrap: wrap;
    display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	height: 20px;
}
@media (min-width: 768px) {
    .bottomRow_crypto {
        height: 36px;
    }
}

@media (max-width: 480px) {
  /* small mobile */
    .bottomRow_crypto {
        height: 16px;
    }
}

.bottomRow_copyright {
    color: var(--color-secondary);
    gap: 8px;
    display: flex;
	cursor: default;
}
.bottomRow_copyright-year {
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    flex-grow: 1;
    align-items: center;
    display: flex;
	color: var(--color-text-muted);
}
.bottomRow_copyright-age {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-transform: none;
    text-wrap: balance;
    white-space-collapse: preserve-breaks;
}
@media (min-width: 1024px) {
	.bottomRow_copyright-age {
		font-size: 24px;
		line-height: 28px;
	}
}

/* sidebar-start */

.common-layout_space-mobile {
    display: none;
}

.sidebar_root {
    z-index: 131;
    position: relative;
}

.common-layout_space {
    width: 280px;
    transition: .3s ease;
}

.common-layout_backdrop {
    background-color: var(--color-bg-card);
    width: 280px;
    height: 100dvh;
    position: fixed;
    transition: .3s ease;
}

.common-layout_sleave {
    height: 100dvh;
    position: fixed;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-block-start: 16px;
    padding-inline-end: 20px;
	overflow-y: auto;
	overflow-x: hidden;
}


.common-layout_content {
    position: relative;
    width: 280px;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 16px;
    transition: .3s ease;
}

.sidebar-slot_root {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--border-soft);
}

.sidebar-player_root {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.sidebar-player_container {
	padding-inline: 16px;
}

.sidebar-profile-button {
	display: flex;
	max-width: 100%;
	gap: 12px;
	align-items: center;
	cursor: pointer;
	box-sizing: border-box;
	width: 100%;
	padding: 0px;
	border-radius: 0px;
	background-color: rgba(0, 0, 0, 0);
	justify-content: flex-start;
	transition: .1s ease;
}

.sidebar-player_avatar_container {
	position: relative;
	display: flex;
	flex-shrink: 0;
	border-radius: 999px;
}

.sidebar-player_avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-secondary);
	width: 44px;
	height: 44px;
	border-radius: inherit;
}

.sidebar-player_avatar svg {
	color: var(--color-text-soft);
	fill: currentColor;
	padding: var(--spacing-6);
    width: 100%;
    height: 100%;
}

.sidebar-profile-button-container {
	display: flex;
	overflow: hidden;
	max-width: 100%;
	min-width: 0px;
	align-items: center;
	flex-grow: 1;
	transition: .1s ease;
}

.sidebar-profile-text-container {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}

.sidebar-profile-name {
	color: var(--color-text-main);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.12px;
	line-height: 22px;
	text-transform: none;
}

.sidebar-profile-id {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.01px;
	line-height: 16px;
}

.sidebar-profile-button-container svg {
	color: var(--color-text-muted);
	fill: currentColor;
	transition: .1s ease;
}

.sidebar-profile-button:hover .sidebar-profile-button-container svg {
	color: var(--color-text-main);
}


.sidebar-bonus-container {
	padding-inline: 16px;
}

.bonus-button-overlay {
	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%);
    border-radius: var(--tab-rounding-square-tab);
    height: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.bonus-content {
	flex-grow: 1;
	display: flex;
	align-items: center;
	height: 100%;
	padding-inline: 16px;
	transition: .3s ease;
}

.bonus-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bonus-title {
	color: var(--color-text-main);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
}

.bonus-sub {
	color: var(--color-text-main);
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	transition: .3s ease;
}

.bonus-icon {
	background-image: url(/img/bonus/giftbox_s.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 55px;
    width: 55px;
    display: flex;
    position: relative;
    top: -5px;
    left: 0px;
	transition: .3s ease;
}

.sidebar-button-compact_root {
	display: flex;
	flex-direction: column;
}

.sidebar-button-compact_container {
	background: var(--border-soft);
	height: 1px;
	position: relative
}

.sidebar-button-compact {
	min-width: 32px;
	min-height: 32px;
	border-radius: 999px;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	padding: 0;
	display: flex;
	overflow: hidden;
	z-index: 2;
	top: 50%;
	position: absolute;
	inset-inline-end: calc(32px / 2 * -1);
	transform: translateY(-50%);
	background: var(--color-bg-card-soft);
    color: var(--color-text-muted);
	transition: .3s ease;
}

.sidebar-button-compact:hover {
	color: var(--color-text-main);
	background: var(--color-bg-card-soft-hover);
}

.sidebar-button-compact:active {
	opacity: 0.86;
}

.sidebar-button-compact div {
	padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sidebar-button-compact svg {
	fill: currentColor;
}

.games-block-container {
	padding-inline: 16px;
	flex-grow: 1;
}

@media (max-width: 1024px) {
	.games-block-container {
		padding-bottom: 16px;
	}
}

.games-block {
	display: flex;
	border-radius: 12px;
	padding-block: 4px 16px;
	overflow: hidden;
	flex-direction: column;
	position: relative;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 20px;
}

.games-main {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--tab-rounding-square-tab);
    padding: 8px;
	color: var(--color-text-soft);
	cursor: pointer;
	transition: all 0.3s ease;
	justify-content: flex-start;
}

.games-main:hover {
	background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.games-main:active {
	opacity: 0.86;
}

.games-main.active {
	background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.games-main.active:hover {
	    background: var(--color-bg-elevated);
}

.games-icon {
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	
}

.games-icon svg {
	color: var(--color-text-muted);
	fill: currentColor;
	transition: all 0.3s ease;
	padding: 2px;
}

.games-main:hover .games-icon svg {
	color: var(--color-text-main);
}

.games-main.active .games-icon svg {
	color: var(--color-text-main);
}

.games-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.games-submenu {
	display: grid;
	margin-top: 4px;
}

.submenu-list {
	border-left: 1px solid var(--border-soft);
	margin-left: 18px;
	padding: 0 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}



.submenu-item {
	height: 36px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border-radius: var(--tab-rounding-square-tab);
    padding: 0 8px;
	color: var(--color-text-soft);
	transition: all 0.3s ease;
}

.submenu-item:hover {
	background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.submenu-item:active {
	opacity: 0.86;
}

.submenu-item.active {
	background: var(--color-bg-card-soft-hover);
	color: var(--color-text-main);
}

.submenu-item.active:hover {
	background: var(--color-bg-elevated);
}

.submenu-item svg {
	fill: var(--color-text-muted);
	transition: all 0.3s ease;
}

.submenu-item:hover svg {
	fill: var(--color-text-main);
}

.submenu-item.active svg {
	fill: var(--color-text-main);
}

.submenu-icon {
	background-size: contain;
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
	display: flex;
    justify-content: center;
    align-items: center;
	transition: all 0.3s ease;
}

.submenu-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submenu-item-vip {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border-radius: var(--tab-rounding-square-tab);
    padding: 8px;
	color: var(--color-text-main);
	background: var(--gradient-primary);
	text-decoration: none;
	transition: all 0.3s ease;
}

.submenu-item-vip:hover {
	background: var(--gradient-primary-hover);
	
}

.submenu-item-vip:active {
	opacity: 0.86;
}

.submenu-item-vip svg {
	fill: var(--color-text-main);
	transition: all 0.3s ease;
}

.submenu-icon-vip {
	background-size: contain;
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.submenu-title-vip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-append-slot_fixed {
	gap: 8px;
	border-end-end-radius: inherit;
	border-end-start-radius: inherit;
	flex-direction: column;
	display: flex;
	position: sticky;
	inset-block-end: 0;
	padding-block-end: calc(12px + var(--safe-area-inset-block-end));
	background: var(--color-bg-card);
}

.fixed-append-slot_fixed:before {
    background: linear-gradient(to top, var(--color-bg-card), transparent);
    content: "";
    pointer-events: none;
    width: 100%;
    height: 32px;
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
}

.sidebar-bottom-container {
	flex-direction: column;
    display: flex;
    padding-inline: 16px;
    gap: 16px;
	transition: .3s ease;
}

.sidebar-windows-button {
	border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-card-soft-hover);
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    padding-block: 8px;
    padding-inline: 12px;
    align-items: center;
    display: flex;
    overflow: hidden;
    color: var(--color-text-main);
}

@media (max-width: 1024px) {
    .sidebar-windows-button {
        display: none;
    }
}

.sidebar-windows-button-container {
	width: calc(280px - 12px * 2 - 16px * 2 - 1px * 2);
    text-align: start;
    word-break: break-word;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.sidebar-windows-button-svg_0 {
	width: 65px;
	height: 44px;
}

.sidebar-windows-button-text-container {
	margin-inline: 12px;
}

.sidebar-windows-button-text-container div {
	margin-bottom: 4px;
	color: var(--color-text-main);
	font-size: 12px;
	font-weight: 600;
}

.sidebar-windows-button-text-container span {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	display: inline-block;
}

.sidebar-social-language-container {
	justify-content: space-between;
	gap: 8px;
	display: flex;
	transition: .3s ease;
}

    .common-layout_space-mobile {
        width: 100dvw;
        height: 100%;
        transition: .3s ease;
        position: fixed;
        background: #00000085;
        display: none;
        opacity: 0;
        z-index: 130;
    }
	.common-layout_space-mobile.active {
		display: block;
	}
	
	.common-layout_space-mobile.is-visible {
		opacity: 1;
	}

@media (max-width: 1440px) {
  /* tablet / small laptop */

	

	
	.sidebar_root {
		position: absolute;
	}
}

@media (max-width: 1024px) {
	/* tablet / small laptop */

	
	.sidebar_root {
		position: absolute;
		transform: translate(-280px, 0);
		opacity: 0;
		pointer-events: none;
		transition: .3s ease;
		position: fixed;
	}
	
	.sidebar_root.active {
		transform: translate(0px, 0);
		opacity: 1;
		pointer-events: all;
	}
	
	.common-layout_content {
		max-height: 100dvh;
	}
	
	.sidebar-button-compact {
		display: none;
	}
}



@media (max-width: 768px) {
  /* mobile */
}

@media (max-width: 480px) {
  /* small mobile */
}

/* mobile-bar-start */
.mobile-bar-root {
    background-color: var(--color-bg-main);
    width: 100%;
    box-shadow: inset 0 1px 0 0 rgba(179, 182, 189, 0.12);
    justify-content: center;
    display: flex;
}

.mobile-bar-root {
	--tabbar__padding: 0 0 var(--padding-bottom-layout-tabbar-with-safe-area);
    --tabbar__divider-height: var(--border-s);
    --tabbar__tab-padding: var(--spacing-8) var(--spacing-4);
    --tabbar__tab-gap: var(--spacing-6);
    --tabbar__tab-icon-color-bg: transparent;
    --tabbar__tab-accent-size: 44px;
    --tabbar__tab-accent-top: -20px;
}

.mobile-bar-root {
	z-index: 125;
    transition-property: z-index;
    transition-delay: .5s;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

@media (min-width: 1024px) {
	.mobile-bar-root {
		display: none;
	}
}

.mobile-bar-tabs {
	width: calc(100% - var(--safe-area-inset-right) - var(--safe-area-inset-left));
    height: var(--height-layout-tabbar-with-safe-area);
    padding: var(--tabbar__padding);
    margin: 0;
    display: flex;
}

.mobile-bar-tab {
	flex: 1 1 0;
	list-style-type: none;
}

.tab-root {
    font-size: var(--font-caption-xs-font-size);
    font-weight: var(--font-caption-xs-semibold-font-weight);
    letter-spacing: var(--font-caption-xs-letter-spacing);
    line-height: var(--font-caption-xs-line-height);
    width: 100%;
    height: 100%;
    padding: var(--tabbar__tab-padding);
    background-color: unset;
    color: var(--color-text-soft);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: var(--tabbar__tab-gap);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    flex-direction: column;
    display: flex;
}

.tab-icon {
    background-color: transparent;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

.tab-icon-box {
    display: flex;
    width: 30px;
    height: 24px;
    padding: 2px;
    align-items: center;
    justify-content: center;
}

.tab-icon-box svg {
    color: var(--color-text-soft);
    fill: currentColor;
    stroke: currentColor;
}



/* casino-random-game */

.random-game_imagesContainer {
    position: relative;
}

.random-game_bannerGradient {
    background: radial-gradient(circle at top right, #032044, transparent 35%), linear-gradient(289deg, #06101F 0%, #086AD1 52%, #032044 100%);
    position: absolute;
    inset: 0;
}

.random-game_bannerGradient:after {
    border-radius: inherit;
    content: "";
    pointer-events: none;
    border: 1px solid #0000;
    position: absolute;
    inset: 0;
}

@supports (-webkit-mask-composite:xor) or (mask-composite:exclude) {
    .random-game_bannerGradient:after {
        background: var(--random-game-color-border-grad, var(--random-game-color-border)) var(--random-game-color-border);
        -webkit-mask-composite: xor;
        border: none;
        padding: 1px;
        -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
        mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
        -webkit-mask-position: 0 0, 0 0;
        mask-position: 0 0, 0 0;
        -webkit-mask-size: auto, auto;
        mask-size: auto, auto;
        -webkit-mask-repeat: repeat, repeat;
        mask-repeat: repeat, repeat;
        -webkit-mask-clip: content-box, border-box;
        mask-clip: content-box, border-box;
        -webkit-mask-origin: content-box, border-box;
        mask-origin: content-box, border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-source-type: auto,auto;
        mask-mode: match-source, match-source;
    }
}

.random-game_graphics_backgroundPictureLeft, .random-game_graphics_backgroundPictureRightDesktop {
    z-index: 2;
    pointer-events: none;
    position: absolute;
    inset-block: 0;
}

.random-game_picture {
    display: contents;
}

.random-game_picture_animated {
    opacity: 1;
    transition: opacity .28s ease-in;
}

.random-game_graphics_backgroundImg {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.random-game_picture img {
    display: contents;
}

.random-game_graphics_backgroundPictureLeft .random-game_graphics_backgroundImg {
    object-position: left;
    border-start-start-radius: var(--rounding-container-l);
    border-end-start-radius: var(--rounding-container-l);
}

.random-game_graphics_pickerPicture {
    z-index: 2;
    justify-content: flex-start;
    align-items: center;
    width: 75px;
    height: 110px;
    display: flex;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -15px;
    overflow: hidden;
    transform: translateY(-50%)scale(.86);
}

@media (min-width: 0) {
	.random-game_graphics_pickerPicture {
        overflow: visible;
    }
}

@media (min-width: 768px) {
    .random-game_graphics_pickerPicture {
        width: 94px;
        height: 62px;
        display: block;
        inset-block-start: -9px;
        inset-inline-end: 205px;
        overflow: visible;
        transform: none;
    }
}

@media (min-width: 1024px) {
	.random-game_graphics_pickerPicture {
        inset-inline-end: 217px;
    }
}

@media (min-width: 1440px) {
    .random-game_graphics_pickerPicture {
        inset-inline-end: 275px;
    }
}

.random-game_graphics_pickerPicture .random-game_graphics_backgroundImg {
    width: 94px;
    height: 62px;
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .random-game_graphics_pickerPicture .random-game_graphics_backgroundImg {
        width: 94px;
        height: 62px;
        transform: none;
    }
}

.random-game_graphics_backgroundPictureRightDesktop {
    border-radius: 0 var(--rounding-container-l)var(--rounding-container-l)0;
    inset-inline-end: 0;
    overflow: hidden;
}

.random-game_graphics_backgroundPictureRightDesktop .random-game_graphics_backgroundImg {
    object-position: right;
}

.random-game_root {
    height: 100%;
    min-height: var(--banner-min-height);
    justify-content: space-between;
    gap: var(--spacing-20);
    --skeleton-content: var(--random-game-color-card-bg-skeleton);
    --banner-min-height: 240px;
    --list-max-width: 180px;
    display: flex;
    overflow: hidden;
}

@media (min-width: 768px) {
    .random-game_root {
        --banner-min-height: 192px;
        gap: var(--spacing-20);
    }
}

@media (min-width: 1024px) {
    .random-game_root {
        --banner-min-height: 244px;
    }
}

.random-game_root, .random-game_bannerGradient {
    border-radius: calc(var(--tab-rounding-square-tab) * 2);
}

.random-game_content {
    z-index: 2;
    width: 178px;
    padding-block: 16px ;
    padding-inline: 16px 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
}

@media (min-width: 768px) {
	.random-game_content {
        width: 292px;
        padding-block: 16px;
        padding-inline: 16px;
    }
}

@media (min-width: 1024px) {
    .random-game_content {
        width: 384px;
        padding-block: 24px;
        padding-inline: 24px;
    }
}

.random-game_info {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-8);
    flex-direction: column;
    width: 100%;
    display: flex;
}

@media (min-width: 768px) {
	.random-game_info {
        max-width: 260px;
    }
}

@media (min-width: 1024px) {
    .random-game_info {
        gap: var(--spacing-12);
        max-width: 324px;
    }
}

.random-game_title {
    color: var(--color-content-base-static-white);
    font-size: 22px;
    font-weight: 600;
	line-height: 28px;
}

@media (min-width: 768px) {
	.random-game_title {
        font-size: 22px;
    }
}

@media (min-width: 1024px) {
    .random-game_title {
        font-size: 28px;
    }
}

.random-game_subtitle {
    color: var(--color-content-base-static-white);
    text-wrap: balance;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
}

.random-game_button_progress {
    padding: var(--spacing-12);
    align-items: center;
    gap: var(--spacing-6);
    display: flex;
    position: relative;
	background: var(--color-primary);
    border-radius: var(--tab-rounding-square-tab);
	transition: 0.1s ease;
	cursor: pointer;
}

.random-game_button_progress:not(.progress-active):hover {
	background: var(--color-primary-hover);
}

.random-game_button_progress:not(.progress-active):active {
	opacity: 0.86
}

.random-game_button_progress.progress-active {
	background: var(--color-primary-active);
	cursor: default;
}

.random-game_button_diceWrapper {
    width: 24px;
    height: 24px;
    position: relative;
}

.random-game_button_dice {
    color: var(--color-content-base-static-white);
    
    position: absolute;
    top: 0;
    left: 0;
}

.random-game_button_progress.progress-active .random-game_button_dice {
	animation: 1s infinite button_dice;
}

@keyframes button_dice {
0% {
    animation-timing-function: cubic-bezier(.3,0,.3,1);
    top: 0;
    transform: rotate(0);
}
55%, 65% {
    animation-timing-function: cubic-bezier(.6,0,.5,1);
    top: -20px;
    transform: rotate(90deg);
}
100% {
    animation-timing-function: cubic-bezier(.3,0,.9,1.2);
    top: 0;
    transform: rotate(180deg);
}
}

.random-game_button_icon-base_root {
    fill: currentColor;
    display: block;
	padding: var(--spacing-2);
}

.random-game_button_progressInfo {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 20px;
    color: var(--color-content-base-static-white);
}

.random-game_listWrapper {
    z-index: auto;
    width: 100%;
    max-width: var(--list-max-width);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
}

@media (min-width: 768px) {
    .random-game_listWrapper {
        max-width: 505px;
        margin-right: 32px;
        inset-inline-end: 0;
    }
}

@media (min-width: 1024px) {
	.random-game_listWrapper {
        max-width: 645px;
        margin-right: 32px;
    }
}

@media (min-width: 1440px) {
    .random-game_listWrapper {
        max-width: 780px;
        margin-right: 64px;
    }
}

.random-game_targetButton {
    z-index: 3;
    position: absolute;
    inset-block-end: 14px;
	opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

@media (min-width: 768px) {
	.random-game_targetButton {
        inset-block-end: 8px;
    }
}


@media (min-width: 1024px) {
    .random-game_targetButton {
        inset-block-end: 12px;
    }
}

.random-game_targetButton.disabled {
    display: none;
}

.random-game_targetButton-play {
    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;
}

.random-game_list_root {
    --card-width: 104px;
    --card-height: 180px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    -webkit-mask-image: linear-gradient(#0000 0,#fff 30% 81%,#0000 100%);
    mask-image: linear-gradient(#0000 0,#fff 30% 81%,#0000 100%);
}

@media (min-width: 768px) {
    .random-game_list_root {
        -webkit-mask-image: linear-gradient(90deg, #0000 0, #fff 30% 75%, #0000 100%);
        mask-image: linear-gradient(90deg, #0000 0, #fff 30% 75%, #0000 100%);
    }
}

@media (min-width: 1024px) {
    .random-game_list_root {
        --card-width: 138px;
        --card-height: 184px;
    }
}

.random-game_list_selection {
    --selection-gap: var(--spacing-4);
    --selection-border: 2px;
    z-index: 1;
    aspect-ratio: 4 / 5;
    height: var(--card-height);
    border: var(--selection-border) solid var(--color-text-main);
    border-radius: var(--tab-rounding-square-tab);
    pointer-events: none;
    position: absolute;
}

@media (min-width: 1024px) {
    .random-game_list_selection {
        border-radius: var(--tab-rounding-square-tab);
    }
}

.random-game_list_selectionContent {
    justify-content: center;
    height: 100%;
    display: flex;
    position: relative;
}

.random-game_list_selectionArrowTop {
    position: absolute;
    inset-block-start: -1px;
}

.random-game_list_selectionArrowBottom {
    position: absolute;
    inset-block-end: -2px;
    transform: rotate(180deg);
}

.random-game_list_content {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
    .random-game_list_content {
        overflow: hidden;
    }
}

.random-game_list_list {
    margin: 0;
    will-change: transform;
    flex-direction: column;
    align-items: center;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .random-game_list_list {
        flex-direction: row;
    }
}

.random-game_list_list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.random-game_list_list {
    gap: var(--spacing-16) 0;
}

@media (min-width: 768px) {  
	.random-game_list_list {
        gap: 0 var(--spacing-12);
    }
}

@media (min-width: 1024px) {
    .random-game_list_list {
        gap: 0 var(--spacing-20);
    }
}

.random-game_list_game {
    pointer-events: none;
    transition: opacity .1s;
	pointer-events: none;
	height: var(--card-height);
	position: relative;
    aspect-ratio: 4 / 5;
}

.random-game_list_game:not(.random-game_list_gameActive) {
    opacity: .7;
}

.random-game_list_gameActive {
    pointer-events: auto;
}

.random-game_game-card_root {
    --game-card__border-width: 1px;
    --game-card__focus-width: 2px;
    --game-card__outline-offset: 3px;
    --game-card__border-radius: var(--tab-rounding-square-tab);
    --game-card__border-color: var(--border-cyan-soft);
    --game-card__offset-image: var(--spacing-4);
    --game-card__image-hover-scale: 1.1;
}

.random-game_game-card_root {
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .random-game_game-card_root {
        --game-card__border-width: var(--spacing-2);
        --game-card__border-radius: var(--tab-rounding-square-tab);
        --game-card__offset-image: var(--spacing-8);
    }
}

.random-game_list_gameCard {
    --game-card__border-radius: var(--tab-rounding-square-tab);
}

@media (min-width: 1024px) {
    .random-game_list_gameCard {
        --game-card__border-radius: var(--tab-rounding-square-tab);
    }
}

.random-game_list_gameActive .random-game_list_gameCard {
	cursor: pointer;
}

.random-game_game-card_body {
    position: relative;
}

.random-game_game-card_pictureWrapper {
    border-radius: var(--game-card__border-radius);
    position: absolute;
    inset: 0;
    overflow: hidden;
	aspect-ratio: 4 / 5;
}

.random-game_game-card_picture {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.random-game_game-card_image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .1s linear;
    transform: scale(1.01);
}

.random-game_game-card_root:hover .random-game_game-card_image {
    transform: scale(var(--game-card__image-hover-scale));
}

/* =========================
   Random game card loading
========================= */

.random-game_list_game {
    position: relative;
    overflow: hidden;
    border-radius: var(--tab-rounding-square-tab);
}

.random-game_game-card_body {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
}

.random-game_game-card_root,
.random-game_list_gameCard {
    width: 100%;
    height: 100%;
}

.random-game_game-card_pictureWrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--game-card__border-radius, var(--tab-rounding-square-tab));
    background: var(--gradient-dark-card);
}

.random-game_game-card_image {
    position: relative;
    z-index: 2;
    opacity: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease, transform 0.3s ease;
    transform: scale(1.01);
}

.random-game_list_game.is-card-loaded .random-game_game-card_image {
    opacity: 1;
}

.random-game_list_game.is-card-error .random-game_game-card_image {
    display: none;
}

.random-game_list_game.is-card-loading .random-game_game-card_image {
    opacity: 0 !important;
}

.random-game_list_game.is-card-loading::before,
.random-game_list_game.is-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    margin: 0;
    opacity: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        var(--color-bg-card-soft) 0%,
        var(--color-bg-main) 45%,
        var(--color-bg-card-soft) 100%
    );

    background-size: 220% 100%;
    animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.random-game_list_game.is-card-loading::after,
.random-game_list_game.is-skeleton::after {
    display: none;
}

.random-game_list_game.is-card-loading:hover::before,
.random-game_list_game.is-skeleton:hover::before {
    margin: 0;
}

.random-game_list_game.is-skeleton {
    pointer-events: none;
    cursor: default;
    aspect-ratio: 4 / 5;
}

.iframe-blur-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: rgb(0 0 0 / 30%);
    margin-inline: var(--container-padding-desktop);
}

@media (max-width: 1024px) {
	.iframe-blur-overlay {
		margin-inline: auto;
	}
}

/*
.iframe-blur-overlay.iframe-games {
	width: auto;
}

@media (max-width: 1024px) {
	.iframe-blur-overlay.iframe-games {
		height: calc(100dvh - 48px - 60px);
	}
}*/

.iframe-overlay-content {
	max-width: var(--size-modal-desktop-width-s);
	height: auto;
	width: 100%;
	border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-card);
    flex-direction: column;
    flex: none;
    transition-property: opacity, transform;
    display: flex;
    position: fixed;
}

.iframe-overlay-header_primaryHeader {
    column-gap: var(--spacing-16);
    padding-block: 16px 12px;
    padding-inline: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 1024px) {
    .iframe-overlay-header_primaryHeader {
        padding-block: 20px 16px;
        padding-inline: 20px;
    }
}

.iframe-overlay-header_info {
    align-items: center;
    display: flex;
	font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.40px;
    line-height: 26px;
}


@media (min-width: 1024px) {
    .iframe-overlay-header_info {
        font-size: 28px;
        letter-spacing: -0.59px;
        line-height: 32px;
    }
}

.iframe-overlay-info_root {
    padding: 0 16px 16px;
    gap: var(--spacing-16);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .iframe-overlay-info_root {
        padding: 0 20px 20px;
        gap: var(--spacing-20);
    }
}

.iframe-overlay-info_subtitle {
	text-align: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: var(--color-content-base-primary);
}

.iframe-overlay-buttons_root {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.iframe-overlay-buttons_root .iframe-overlay-button {
	width: 100%;
}

.iframe-overlay-button {
    cursor: pointer;
    border-radius: calc(var(--tab-rounding-square-tab) * 2);
    display: flex;
    transition: all 0.1s ease;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding-block: 12px;
    color: var(--color-text-main);
}

.iframe-overlay-button:active {
	opacity: 0.86;
}

.iframe-overlay-button.deposit {
	background: var(--color-green-active);
}

.iframe-overlay-button.deposit:hover {
	background: var(--color-green);
}

.iframe-overlay-button.register {
	background: var(--color-primary);
}

.iframe-overlay-button.register:hover {
	background: var(--color-primary-hover);
}

.iframe-overlay-button.login {
	background: var(--color-bg-card-soft);
}

.iframe-overlay-button.login:hover {
	background: var(--color-bg-card-soft-hover);
}

.game-layout_nav {
    display: none;
}

@media (min-width: 1024px) {
    .game-layout_nav {
        display: block;
    }
}

.page-heading_root {
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .page-heading_root {
        gap: var(--spacing-12);
    }
}

.page-heading_controls {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.page-heading_startAddons {
    align-items: center;
    gap: var(--spacing-24);
    display: flex;
}

.page-heading_backButton {
	border-radius: var(--tab-rounding-square-tab);
    background-color: unset;
    color: var(--color-text-main);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    padding: 0;
    transition: opacity .1s;
    position: relative;
    background: var(--color-bg-card-soft);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 18px;
    gap: 6px;
}

.page-heading_backButton svg {
	fill: currentColor;
    display: block;
}

.page-heading_backButton:active {
    opacity: 0.86;
}

.page-heading_backButton:hover {
    background: var(--color-bg-card-soft-hover);
}

.page-heading_addons {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-12);
    display: flex;
}

.page-heading_fullButton {
	border-radius: var(--tab-rounding-square-tab);
    background-color: unset;
    color: var(--color-text-main);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    padding: 0;
    transition: opacity .1s;
    position: relative;
    background: var(--color-bg-card-soft);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.page-heading_fullButton svg {
	fill: currentColor;
    display: block;
}

.page-heading_fullButton:active {
    opacity: 0.86;
}

.page-heading_fullButton:hover {
    background: var(--color-bg-card-soft-hover);
}

.iframe-wrapper:fullscreen {
	width: 100vw;
	height: 100vh;
	background: var(--color-bg-main);
	display: flex;
	flex-direction: column;
}

.iframe-wrapper:fullscreen .game-layout_nav {
	flex: 0 0 auto;
}

.iframe-wrapper:fullscreen iframe {
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
	border: 0;
}

.iframe-wrapper:fullscreen .footer_root{
	display: none;
}

.frame-main.game.is-fullscreen {
	padding-inline: 0;
	gap: 0;
}

.iframe-wrapper:fullscreen .page-heading_startAddons {
	display: none;
}

.iframe-wrapper:fullscreen .page-heading_controls {
	justify-content: flex-end;
}

.iframe-wrapper:fullscreen .page-heading_root {
	position: relative;
}

.iframe-wrapper:fullscreen .page-heading_addons {
	padding: 12px;
}

.page-heading-logo {
	display: none;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -5px);
}

.iframe-wrapper:fullscreen .page-heading-logo {
	display: flex;
}

.modal_install-app_root {
	width: 100%;
    max-height: auto;
    border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-main);
    overflow: hidden;
    flex-direction: column;
    flex: none;
    transition-property: opacity, transform;
    display: flex;
    position: relative;
}

@media (min-width: 1024px) {
    .modal_install-app_root {
        max-width: 390px;
    }
}

.modal-header_root {
	flex: none;
	display: contents;
}

.modal-header_buttons {
    justify-content: flex-end;
    gap: var(--spacing-20);
    display: flex;
	position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
	z-index: 1;
	cursor: pointer;
	color: var(--color-text-main);
}

.modal-header_buttons svg {
	fill: currentColor;
	pointer-events: none;
}

@media (min-width: 1024px) {
    .modal-header_buttons {
        inset-block-start: 20px;
		inset-inline-end: 20px;
    }
}

.modal-header_coverHolder {
    background: linear-gradient(135deg, #086AD1 0%, #5B2EFF 45%, #B832FF 100%);
    pointer-events: none;
    width: calc(100% + .5px);
    -webkit-mask-image: linear-gradient(#000,#000);
    mask-image: linear-gradient(#000,#000);
}

.modal-header_coverHolder picture {
    display: contents;
}

.modal-header_coverHolder picture img {
	display: block;
    position: relative;
    width: 100%;
    left: 50%;
    transform: translate(-60%, 10px);
}

@media (max-width: 1024px) {
	.modal-header_coverHolder picture img {
		width: 50%;
	}
}

.modal-app-install_content {
    color: var(--color-content-base-primary);
    gap: var(--spacing-24);
    padding-inline: 16px;
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-app-install_content {
        padding-inline: 20px;
    }
}

.modal-segment-control_root {
    align-items: center;
    display: inline-flex;
}

.modal-segment-control_fullWidth {
    width: 100%;
}

.modal-segment-control_variant {
    padding: var(--spacing-2);
    border-radius: var(--tab-rounding-square);
    background: var(--color-bg-card);
    gap: 3px;
}

.modal-tab_root {
    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);
    border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-card);
    color: var(--color-text-soft);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    padding-inline: var(--spacing-16);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
}

.modal-segment-control_tab {
    position: relative;
}

.modal-tab_root.modal-tab_color-neutral {
    color: var(--color-text-soft);
}

.modal-tab_root:not(.modal-tab_disabled) {
    cursor: pointer;
}

.modal-tab_root.modal-tab_size-l {
    height: var(--size-control-l);
}

.modal-tab_root.modal-tab_ghost {
    background-color: #0000;
}

.modal-tab_root.modal-tab_fullWidth {
    width: 100%;
}

.modal-tab_root:not(.modal-tab_disabled):active {
    opacity: var(--opacity-item-active);
}

.modal-tab_root:not(.modal-tab_disabled):hover, .modal-tab_root:not(.modal-tab_disabled):active {
    background: var(--color-bg-card-soft);
}

.modal-tab_root.modal-tab_selected.modal-tab_color-neutral:not(.modal-tab_disabled) {
    background: var(--color-bg-card-soft-hover);
    color: var(--color-text-main);
}

.modal-tab_title {
    transition-duration: var(--sidebar-animation-duration);
    transition-property: max-width,opacity;
    transition-timing-function: var(--sidebar-animation-ease);
    overflow: hidden;
}


.modal-app-install_graphicContent {
    gap: var(--spacing-8);
    display: flex;
}

.modal-app-install_videoWrapper {
	background: var(--color-bg-card);
    border-radius: var(--tab-rounding-square-tab);
    width: 100%;
    height: 144px;
    overflow: hidden;
}

.modal-app-install_video {
    object-fit: cover;
    width: 100%;
    height: 100%;
	display: block;
}

.modal-app-install_steps {
	gap: var(--spacing-20);
    flex-direction: column;
    display: flex;
    position: relative;
}

.app-install-step_root {
    gap: var(--spacing-16);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 20px;
    display: flex;
}

.app-install-step_index {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.app-install-step_title {
    color: var(--color-text-main);
    margin-block-start: var(--spacing-2);
}

.buttons_variant.app-install {
	width: 100%;
}

.buttons_variant.app-install:hover {
	background: var(--color-bg-card-soft-active);
}

.buttons_variant.app-install.select-app {
	width: 100%;
	background: var(--color-bg-card-soft-hover);
}

.buttons_variant.app-install.active:hover {
	background: var(--color-bg-card-soft-hover);
}

.modal-app-install_close {
    padding-top: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-inline: 16px;
	flex-direction: row;
    display: flex;
    gap: 8px;
}

@media (min-width: 1024px) {
    .modal-app-install_close {
        padding-top: 20px;
		padding-bottom: max(20px, env(safe-area-inset-bottom));
		padding-inline: 20px;
    } 
}

.buttons_variant.app-install_close {
	background: var(--color-bg-card-soft);
	width: 100%;
}

.buttons_variant.app-install_close:hover {
	background: var(--color-bg-card-soft-hover);
}

.buttons_variant.app-install_download {
	background: var(--color-primary);
	width: 100%;
}

.buttons_variant.app-install_download:hover {
	background: var(--color-primary-hover);
}

.icon-base_root {
    fill: currentColor;
    display: block;
}

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

.icon-base_m {
    padding: var(--spacing-2);
}

.modal-content {
    transition: opacity 0.3s ease;
    opacity: 0;
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
}

.modal-content.active {
    display: flex;
}

.modal-content.active.is-visible {
    opacity: 1;
    
}

.modal-content .modal-bonus_container.view {
	pointer-events: none;
}

.modal-content.active .modal-bonus_container.view {
	pointer-events: auto;
}

.modal-content_background {
    background-color: var(--color-bg-backdrop);
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content_block {
	display: flex;
    justify-content: center;
    align-items: center;
}

.modal-container_card-root {
    width: var(--size-modal-desktop-width-s);
    max-height: min(calc(100% - var(--modal-margin-desktop)*2),var(--size-modal-desktop-height-max));
    border-radius: var(--modal-rounding);
    background: var(--color-bg-modal);
    flex-direction: column;
    flex: none;
    transition-property: opacity, transform;
    transition-duration: .3s;
    display: flex;
    position: fixed;
}

@media (max-width: 1024px) {
	.modal-container_card-root {
		width: 100vw;
		height: auto;
		max-height: calc(100% - max(var(--safe-area-inset-top), var(--modal-margin-mobile)));
		border-radius: var(--modal-rounding) var(--modal-rounding) 0 0;
		contain: layout;
		will-change: transform;
		flex-direction: column;
		flex: none;
		padding-block: 0;
		transition-property: transform;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.modal-container_card-root.mobile-modal_scrollable {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.modal-container_card-root.mobile-modal_scrollable {
	overflow: hidden auto;
}

.modal-container_card-root.mobile-modal_noOverscroll {
	overscroll-behavior: none;
}

.modal-container_card-root.mobile-modal_detent-expanded {
	height: auto;
}


.desktop-modal_detent-expanded {
	height: 100%;
}

.modal-header_buttonsHolder {
    z-index: 1001;
    position: sticky;
    top: 0;
}

.modal-header_primaryHeader {
    column-gap: var(--spacing-16);
    padding-block: var(--modal-padding-modal-mobile)var(--modal-padding-modal-header-bottom-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
    grid-template-columns: auto max-content;
    grid-template-areas: "back buttons""info buttons";
    display: grid;
}

@media screen and (min-width: 1024px) {
    .modal-header_primaryHeader {
        padding-block: var(--modal-padding-modal-desktop) var(--modal-padding-modal-header-bottom-desktop);
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-header_buttonsArray {
    justify-content: flex-end;
    gap: var(--spacing-20);
    display: flex;
}

.modal-header_primaryHeader .modal-header_buttonsStub {
    grid-area: buttons;
}

.modal-header_primaryHeader .modal-header_info {
    grid-area: info;
}

.modal-header_titleButton {
	align-items: flex-start;
    gap: var(--spacing-12);
    display: flex;
    flex-direction: column;
}

.modal-header_backButton {
	display: flex;
    align-items: center;
    flex-direction: row;
    color: var(--color-text-muted);
	transition: 0.1s ease;
	cursor: pointer;
	height: 24px;
}

.modal-header_backButton svg {
	fill: currentColor;
	width: auto;
    height: 100%;
}

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

.modal-header_backButton:active {
	opacity: 0.86;
}

.modal-header_title {
    color: var(--color-content-base-primary);
    font-size: var(--font-display-body-label-font-size);
    font-weight: var(--font-display-body-label-font-weight);
    letter-spacing: var(--font-display-body-label-letter-spacing);
    line-height: var(--font-display-body-label-line-height);
    text-transform: var(--font-display-body-label-text-case);
}

.modal-header_primaryHeader .modal-header_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;
}

@media (min-width: 1024px) {
    .modal-header_primaryHeader .modal-header_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-header_primaryHeader .modal-header_title {
    overflow-wrap: anywhere;
}

.modal-header_overlayHeaderHolder {
    z-index: 1000;
    position: sticky;
    top: 0;
}

.modal-header_overlayHeaderClipper {
    top: -1px;
    pointer-events: none;
    position: absolute;
    inset-inline: 0;
    overflow: hidden;
}

.modal-header_overlayHeader {
    padding: var(--modal-padding-modal-mobile);
    padding-top: calc(1px + var(--modal-padding-modal-mobile));
    border-bottom: 1px solid var(--border-subtle);
    background: var(--color-bg-card-soft);
    pointer-events: all;
    grid-template-columns: 1fr minmax(0,auto) 1fr;
    transition: transform .1s ease-in;
    display: grid;
    transform: translateY(-100%);
}

@media screen and (min-width: 1024px) {
    .modal-header_overlayHeader {
        padding: var(--modal-padding-modal-desktop);
    }
}

.modal-header_overlayHeader.modal-header_active {
    transition-timing-function: ease-out;
    transform: translateY(-1px);
}

.modal-header_overlayHeader .modal-header_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-content-base-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}



.modal-footer_root {
    --padding: var(--modal-padding-modal-mobile);
    padding-top: var(--padding);
    padding-bottom: max(var(--padding),var(--safe-area-inset-block-end));
    background-color: var(--modal-color-bg);
    padding-inline: var(--padding);
    flex-direction: column;
    display: flex;
}

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

.modal-footer_root.modal-footer_sticky {
    bottom: calc(-1px - var(--safe-area-inset-bottom));
    padding-bottom: calc(1px + max(var(--padding),var(--safe-area-inset-block-end)));
    position: sticky;
}

.modal-logout-button_root {
    --padding: var(--modal-padding-modal-mobile);
    padding-bottom: max(var(--padding),var(--safe-area-inset-block-end));
    background-color: var(--modal-color-bg);
    padding-inline: var(--padding);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-logout-button_root {
        --padding: var(--modal-padding-modal-desktop);
    }
}

.modal-wallet_content {
	height: auto;
    z-index: 3;
    display: flex;
	min-height: 600px;
}

.modal-wallet-left_block {
	background-color: var(--color-bg-card);
    padding: 16px;
    flex-direction: column;
    display: flex;
    border-radius: var(--tab-rounding-square-tab) 0px 0px var(--tab-rounding-square-tab);
}

.wallet-left-top_text {
	margin-bottom: 16px;
    align-items: center;
    display: flex;
    line-height: 16px;
    color: var(--white-1);
    font-size: 12px;
}

.wallet-left-middle_content {
	position: relative;
	display: flex;
}

.wallet-payments-method {
	padding: 12px;
    align-items: start;
    flex-direction: column;
    background: var(--blue-button-1);
    transition: .3s ease;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 12px;
    display: flex;
    position: relative;
    gap: 8px;
}

.wallet-payments-method:hover {
	background: var(--blue-hover-1);
}

.wallet-payments-method:active {
	opacity: 0.86;
}

.wallet-payments-method_top {
	display: flex;
    max-width: 100px;
    gap: 2px;
}

.wallet-payments-method_img-block {
	position: relative;
	height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-payments-method_img {
	max-height: 100%;
	max-width: 100%;
	position: relative;
}

.wallet-payments-method_top-text {
	width: 20px;
    font-size: 10px;
    color: var(--blue-text);
    height: 20px;
    border-radius: 6px;
    font-weight: 800;
    background-color: var(--blue-contrast);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.wallet-payments-method_text {
	display: flex;
    align-items: end;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--white-1);
    font-size: 12px;
}

.modal-layout_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
	z-index: 1000;
}

.modal_root {
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
}

@media (max-width: 1024px) {
    .modal_root {
        flex-direction: column-reverse;
    } 
}

.modal_backdrop {
    background-color: rgba(0, 0, 0, 0.8);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
    opacity: 1;
    transition-property: opacity;
	will-change: opacity;
    position: fixed;
    inset: 0;
}

@media (max-width: 1024px) {
    .modal_backdrop {
		inset: -200px 0;
    } 
}

.modal_card-root {
    width: 100%;
    max-height: min(calc(100% - 64px *2), 768px);
    border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-main);
    transition-duration: calc(var(--v00f0ccee)*1ms);
    flex-direction: column;
    flex: none;
    transition-property: opacity,transform;
    display: flex;
    position: fixed;
	-ms-overflow-style: none;
    scrollbar-width: none;
	overflow: hidden auto;
	overscroll-behavior: none;
	height: 100%;
	max-width: 390px;
}

@media (max-width: 1024px) {
    .modal_card-root {
		width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
		max-height: calc(100% - max(env(safe-area-inset-top), 24px));
		border-radius: var(--tab-rounding-square-tab) var(--tab-rounding-square-tab) 0 0;
		contain: layout;
		inset-inline: env(safe-area-inset-left) env(safe-area-inset-right);
		will-change: transform;
		flex-direction: column;
		flex: none;
		padding-block-end: env(safe-area-inset-bottom);
		transition-property: transform;
		display: flex;
		position: fixed;
		max-width: none;
    } 
}

.modal-header_buttons {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
}

@media screen and (min-width: 1024px) {
    .modal-header_buttons {
        inset-block-start: 20px;
        inset-inline-end: 20px;
    }
}

.modal-header_button-base_root {
    background-color: unset;
    color: var(--color-content-base-static-white);
    cursor: pointer;
    align-items: center;
    gap: var(--spacing-4);
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    display: inline-flex;
}

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


.modal-profile_content {
	background-color: var(--color-bg-main);
    min-width: 390px;
    max-width: 390px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    display: flex;
    border-radius: var(--tab-rounding-square-tab);
}

@media (max-width: 1024px) {
    .modal-profile_content {
        min-width: auto;
        max-width: none;
        width: 100dvw;
        border-radius: var(--tab-rounding-square-tab) var(--tab-rounding-square-tab) 0 0;
        position: absolute;
        transform: translate(-50%, 0%);
        left: 50%;
        bottom: 0;
    }
}

.button-base_root {
    --outline-color: var(--color-text-main);
    border-radius: var(--button-radius);
    background-color: unset;
    color: var(--color-text-muted);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    padding: 0;
    transition: opacity .1s;
    display: inline-block;
    position: relative;
}

.button-base_root:hover {
	color: var(--color-text-main);
}

.button-base_root {
    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);
}

.button-base_size-s {
    --button-height: var(--size-control-s);
    --button-padding: var(--spacing-12);
    --button-radius: var(--button-rounding-s);
}

.button-base_size-m {
    --button-height: var(--size-control-m);
    --button-padding: var(--spacing-16);
    --button-radius: var(--button-rounding-m);
}

.button-base_size-xl {
    --button-height: var(--size-control-xl);
    --button-padding: var(--spacing-20);
    --button-radius: var(--button-rounding-l);
}

.button-base_size-s.button-base_isIcon {
    --button-width: var(--size-control-s);
    --button-padding: var(--spacing-0);
}

.button-base_variant-secondary, .button-base_variant-secondary:active {
    color: var(--color-text-muted);
}

.button-base_root.button-base_size-s-regular {
    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);
}

.button-base_variant-neutral {
    --background: rgba(255, 255, 255, 0.2);
    --background-hover: rgba(255, 255, 255, 0.32);
    --border-color: 1px solid var(--border-default);
    --border-color-grad: var(--button-color-neutral-bg-border-grad);
    color: var(--color-content-base-primary);
}

.button-base_variant-neutral:hover .button-base_view {
	background: var(--background-hover);
}

.button-base_variant-negative {
    --background: var(--border-red);
    --background-hover: var(--color-red-active);
    color: var(--color-text-soft);
}

.button-base_variant-negative:hover .button-base_view {
	background: var(--background-hover);
}

.button-base_variant-primary {
    --background: var(--color-secondary);
    --background-hover: var(--color-secondary-hover);
    color: var(--color-text-main);
}

.button-base_variant-primary:hover .button-base_view {
	background: var(--background-hover);
}

.button-base_variant-staticPrimary {
    --background: var(--color-text-main);
    --background-hover: var(--color-text-main);
    color: var(--color-bg-deep);
}

.button-base_variant-accent {
    --background: var(--color-green-active);
    --background-hover: var(--color-green);
    --border-color: var(--button-color-accent-bg-border);
    --border-color-grad: var(--button-color-accent-bg-border-grad);
    color: var(--color-text-main);
}

.button-base_variant-accent:hover .button-base_view {
	background: var(--background-hover);
}

.button-bonus_variant-staticPrimary {
    --background: var(--color-text-soft);
    --background-hover: var(--color-text-main);
    color: var(--color-bg-deep);
}

.button-bonus_variant-staticPrimary:hover .button-base_view {
	background: var(--background-hover);
	color: var(--color-bg-deep);
}

.button-bonus_variant-monthlySecondary {
    --background: rgba(255, 255, 255, 0.2);
    --background-hover: rgba(255, 255, 255, 0.32);
    color: var(--color-text-soft);
}

.button-bonus_variant-monthlySecondary:hover .button-base_view {
	background: var(--background-hover);
}

.button-bonus_variant-staticPrimary:hover .button-base_view {
	background: var(--background-hover);
}

.template-cell_action {
    flex-shrink: 0;
}

.button-base_view {
    width: var(--button-width);
    height: var(--button-height);
    padding: 0 var(--button-padding);
    border-radius: var(--button-radius);
    background: var(--background);
    transition: background .1s;
    position: relative;
}

.button-base_content {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    white-space: nowrap;
    height: 100%;
    display: flex;
}

.button-base_content div {
	display: contents;
}

.button-base_root:active {
    opacity: var(--opacity-item-active);
}

.button-base_isWide {
    width: 100%;
}

.button-base_root[disabled]:not([disabled=false]) {
    opacity: var(--opacity-item-disabled);
    pointer-events: none;
}

.badge-base_root {
    border-radius: var(--rounding-max);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    min-width: 0;
    display: inline-flex;
}

.badge-base_size-m {
    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);
    height: var(--size-control-xxs);
    padding: var(--spacing-0) var(--spacing-4);
}

.badge-base_variant-staticPrimary {
    background-color: var(--color-text-soft);
    color: var(--color-bg-deep);
}

.badge-base_variant-staticSecondary {
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
}

.badge-base_text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.badge-base_size-m.badge-base_withContent .badge-base_text {
    padding-inline: var(--spacing-4);
}

.modal-profile_root {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
}

.modal-main_root {
    padding-block: 0 var(--modal-padding-modal-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
}

@media (min-width: 1024px) {
    .modal-main_root {
        padding-block: 0 var(--modal-padding-modal-desktop);
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-variant_root {
    padding: var(--spacing-24) 0;
    align-items: center;
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
}

.modal-variant_userNameBlock {
    align-items: center;
    gap: var(--spacing-4);
    text-align: center;
    max-width: 100%;
    display: flex;
    overflow: hidden;
}

.modal-variant_userName {
    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);
}

@media (min-width: 1024px) {
    .modal-variant_userName {
        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-variant_userName {
    color: var(--color-content-base-primary);
    text-overflow: ellipsis;
    overflow: hidden;
}

.modal-main_sections {
    gap: var(--spacing-20);
    flex-direction: column;
    display: flex;
}

.modal-variant_balance {
    padding: var(--spacing-16);
    border-radius: var(--rounding-container-m);
    background: radial-gradient(circle at top right, #032044, transparent 70%), linear-gradient(155deg, #06101F 0%, #086AD1 0%, #032044 100%);
    gap: var(--spacing-12);
    flex-direction: column;
    display: flex;
}

.modal-variant_balanceBlock {
    justify-content: center;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modal-variant_balanceName {
    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);
    color: var(--color-text-soft);
}

.tooltip_root {
    position: relative;
}

.adaptive-balance_root {
    width: max-content;
    max-width: 100%;
}

.modal-variant_balanceValue {
    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);
}

@media (min-width: 1024px) {
    .modal-variant_balanceValue {
        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);
    }
}

.tooltip_trigger {
    cursor: pointer;
}

.adaptive-balance_wrapper {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.adaptive-balance_balance {
    min-width: 0;
    max-width: 100%;
    color: var(--color-content-base-primary);
    align-items: center;
    display: flex;
    overflow: hidden;
}

.adaptive-balance_balanceFraction, .adaptive-balance_balanceOther {
    white-space: nowrap;
    flex-shrink: 0;
}

.adaptive-balance_balanceInteger {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.adaptive-balance_balanceFraction {
	color: var(--color-text-muted);
}

.modal-variant_balanceButtons {
    gap: var(--spacing-8);
    display: flex;
}

.button-variant_balanceButton {
    width: 100%;
}

.modal-main_menuList {
    gap: var(--spacing-16);
    flex-direction: column;
    display: flex;
}

.modal-list-stack_root {
    --local-list-rounding: var(--list-rounding);
    gap: var(--list-items-gap);
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.modal-list-stack_rounded {
    border-radius: var(--local-list-rounding);
}

.modal-list-stack_stacked {
    --local-list-rounding: var(--rounding-container-m);
    background: var(--color-bg-card);
}

.modal-list-item_root {
    --list-item__gap: var(--spacing-12);
    --list-item__padding-y: var(--spacing-12);
    --list-item__padding-x: var(--spacing-8);
    --list-item__min-height: 52px;
    width: 100%;
    min-height: var(--list-item__min-height);
    padding: var(--list-item__padding-y)var(--list-item-padding-horizontal);
    border-radius: var(--list-item-rounding);
    background-color: var(--color-bg-card);
    align-items: center;
    gap: var(--list-item__gap);
    display: flex;
}

.modal-list-item_stacked {
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: 0;
}

.modal-list-item_root.modal-list-item_interactive:not(.modal-list-item_disabled):active {
    opacity: var(--opacity-item-active);
}

.modal-list-item_root.modal-list-item_interactive:not(.modal-list-item_disabled):hover, .modal-list-item_root.modal-list-item_interactive:not(.modal-list-item_disabled):active {
    background-color: var(--color-bg-card-soft-hover);
    cursor: pointer;
}

.modal-list-item_sideContent {
    align-items: center;
    min-width: 0;
    display: flex;
}

.modal-list-item_sideContent.modal-list-item_trailing {
    flex-shrink: 0;
}

.icon_root {
    color: var(--color-text-soft);
    position: relative;
}

.modal-list-item_main {
    min-width: 0;
    height: 100%;
    min-height: calc(var(--list-item__min-height) - var(--list-item__padding-y)*2);
    align-items: center;
    gap: var(--list-item__gap);
    flex-grow: 1;
    display: flex;
    position: relative;
}

.modal-list-item_content {
    align-items: flex-start;
    gap: var(--spacing-2);
    flex-direction: column;
    margin-inline-end: auto;
    display: flex;
}

.modal-list-item_title {
    color: var(--color-content-base-primary);
    text-align: start;
    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);
    align-items: center;
    display: flex;
}

.modal-list-item_subtitle {
    color: var(--color-text-soft);
    text-align: start;
    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);
}

.modal-list-item_withSeparator:not(:first-child) .modal-list-item_main:before {
    top: calc(var(--list-item__padding-y)*-1);
    background-color: var(--border-soft);
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    inset-inline-end: 0;
}

.modal-list-item_withSeparator.modal-list-item_fullLengthSeparator .modal-list-item_main:before {
    width: calc(100% + var(--list-item__padding-x)*2);
    inset-inline-end: calc(var(--list-item__padding-x)*-2);
}

:is(.modal-list-item_withSeparator.modal-list-item_interactive:not(.modal-list-item_disabled):hover,.modal-list-item_withSeparator.modal-list-item_interactive:not(.modal-list-item_disabled):active) .modal-list-item_main:before, :is(.modal-list-item_withSeparator.modal-list-item_interactive:not(.modal-list-item_disabled):hover,.modal-list-item_withSeparator.modal-list-item_interactive:not(.modal-list-item_disabled):active)+* .modal-list-item_main:before {
    background-color: unset;
}

.modal-support_content {
    padding: 0 var(--modal-padding-modal-mobile) var(--modal-padding-modal-mobile);
    gap: var(--spacing-16);
    flex-wrap: wrap;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-support_content {
        padding: 0 var(--modal-padding-modal-desktop) var(--modal-padding-modal-desktop);
    }
}

.modal-support-section_root {
    padding: var(--spacing-16);
    border-radius: var(--rounding-16);
    background-color: var(--color-bg-card);
    cursor: pointer;
    text-align: inherit;
    grid-template-columns: 1fr max-content;
    display: grid;
}

.modal-support-section_root:active, .modal-support-section_root:hover {
    background-color: var(--color-bg-card-soft-hover);
}

.modal-support-section_root:active {
	opacity: var(--opacity-item-active);
} 

.modal-support_content > * {
    width: 100%;
}

.modal-support-section_content {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-support-section_subtitle {
    color: var(--color-text-muted);
    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);
}

.modal-support-section_label {
    color: var(--color-content-base-primary);
    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-support-section_icon {
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.button-base_view.icon-social {
	padding: 0;
}

.modal-header_coverHolder {
	background: linear-gradient(135deg, #086AD1 0%, #5B2EFF 45%, #B832FF 100%);
    border-radius: var(--modal-rounding) var(--modal-rounding) 0 0;
    pointer-events: none;
    width: calc(100% + .5px);
    -webkit-mask-image: linear-gradient(#000,#000);
    mask-image: linear-gradient(#000,#000);
}

.modal-app-install_headerPicture {
    width: 100%;
}

.modal-app-install_buttons {
    gap: var(--spacing-12);
    display: flex;
}

@media (min-width: 1024px) {
    .modal-app-install_buttons {
        flex-direction: row;
    }
}

.modal-settings_root {
    padding: 0 var(--modal-padding-modal-mobile)var(--modal-padding-modal-mobile);
    gap: var(--spacing-24);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-settings_root {
        padding: 0 var(--modal-padding-modal-desktop) var(--modal-padding-modal-desktop);
    }
}

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

.modal-settings_sectionTitle {
    color: var(--color-text-muted);
    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);
}

.modal-settings_block {
    gap: var(--spacing-8);
    flex-direction: column;
    display: flex;
}

.modal-list-item_input {
	background: transparent;
    background-color: transparent;
    border: 0;
    border-color: transparent;
    padding: 0;
    outline: 0;
    text-align: end;
    color: var(--color-text-main);
	min-width: 0;
}

.modal-list-item_select {
	background: transparent;
    background-color: transparent;
    border: 0;
    border-color: transparent;
    padding: 0;
    outline: 0;
    text-align: end;
    color: var(--color-text-main);
	cursor: pointer;
}

.modal-list-item_title.settings-modal {
	text-wrap-mode: nowrap;
}

.modal-list-item_input.settings-modal_email {
	cursor: default;
	user-select: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0a1830 inset !important;
    box-shadow: 0 0 0 1000px #0a1830 inset !important;
    background-color: #0a1830 !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

select,
::picker(select) {
	appearance: base-select;
	scrollbar-width: thin;
    max-height: 400px;
    border-radius: 12px;
}

select::picker-icon {
	color: #8FA8C7;
}

::picker(select) {
	border: none;
}

option {
	display: flex;
    justify-content: flex-start;
    gap: 6px;
    background: #0a1830;
    padding: 6px;
    transition: 0.1s;
    color: aliceblue;
}

option:hover {
	background: #14305A;
}

option:active {
	opacity: 0.86;
}

/* =========================
   Sidebar initial skeleton
   Только для desktop/tablet > 1024px
========================= */

@media (min-width: 1025px) {
	html.sidebar-loading-init .sidebar_root {
		pointer-events: none;
	}

	html.sidebar-loading-init .common-layout_space,
	html.sidebar-loading-init .common-layout_backdrop {
		width: 64px;
	}

	html.sidebar-loading-init .common-layout_sleave {
		width: 64px;
		padding-block-start: 16px;
		padding-inline-end: 0;
		overflow: hidden;
	}

	html.sidebar-loading-init .common-layout_sleave .common-layout_content {
		width: 64px;
		opacity: 0;
		pointer-events: none;
	}

	html.sidebar-loading-init .common-layout_sleave::before {
		--sidebar-skeleton-item: rgba(255, 255, 255, 0.09);
		--sidebar-skeleton-item-soft: rgba(255, 255, 255, 0.055);

		content: "";
		position: absolute;
		z-index: 2;
		top: 16px;
		left: 8px;
		width: 48px;
		height: calc(100dvh - 32px);
		pointer-events: none;

		background:
			radial-gradient(circle at 50% 22px, var(--sidebar-skeleton-item) 0 22px, transparent 23px);
	}

	html.sidebar-loading-init .common-layout_sleave::after {
		content: "";
		position: absolute;
		z-index: 3;
		top: 0;
		bottom: 0;
		left: 0;
		width: 64px;
		pointer-events: none;

		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.055) 50%,
			transparent 100%
		);

		transform: translateX(-100%);
		animation: sidebarSkeletonShimmer 1.15s ease-in-out infinite;
	}
}

@keyframes sidebarSkeletonShimmer {
	to {
		transform: translateX(100%);
	}
}

.modal-transaction-history_main_root {
	height: 100%;
}

.modal-transaction-history_main_container {
	max-width: calc(1440px + var(--iframe-padding)*2);
    margin: 0 auto;
	scrollbar-width: none;
    -ms-overflow-style: none;
	overflow: hidden auto;
    padding-block: 0 var(--modal-padding-modal-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
	
}

@media (min-width: 1024px) {
    .modal-transaction-history_main_container {
        padding-block: 0 var(--modal-padding-modal-desktop);
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-transaction-history_root {
    height: inherit;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

.modal-transaction-history_tablist_root {
    border-radius: var(--tab-rounding-square);
    background-color: var(--color-bg-card);
    gap: 4px;
    padding: 2px;
    display: flex;
}

.modal-transaction-history_tab-button {
	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);
    border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-card);
    color: var(--color-text-soft);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    padding-inline: var(--spacing-16);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
	width: 100%;
	cursor: pointer;
	color: var(--color-text-soft);
	position: relative;
	height: var(--size-control-l);
}

.modal-transaction-history_tab-button:hover {
	background: var(--color-bg-card-soft);
}

.modal-transaction-history_tab-button:active {
	opacity: 0.86;
}

.modal-transaction-history_tab-button.tab-button_active {
    background: var(--color-bg-card-soft-hover);
    color: var(--color-text-main);
}

.modal-transaction-history_tab-button:active {
    opacity: var(--opacity-item-active);
}

.modal-transaction-history_tab-button+.modal-transaction-history_tab-button:before {
    content: "";
    background-color: var(--border-subtle);
    width: 1px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
}

.modal-transaction-history_tab-button:not(:first-child):hover::before, .modal-transaction-history_tab-button:hover + .modal-transaction-history_tab-button::before, .modal-transaction-history_tab-button.tab-button_active::before, .modal-transaction-history_tab-button.tab-button_active + .modal-transaction-history_tab-button::before {
    background-color: unset;
}

.modal-transaction-history_states_container {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    display: flex;
}

.modal-transaction-history_emptyState_root {
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    display: flex;
}

.modal-transaction-history_emptyTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.47px;
    text-transform: none;
    margin-bottom: 8px;
	color: var(--color-text-main);
}

.modal-transaction-history_emptyDescription {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-bottom: 24px;
	color: var(--color-text-muted);
}

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

.modal-rewards_main_root {
}

.modal-rewards_main_root[data-rewards-empty="true"] {
	height: 100%;
}

.modal-rewards_main_container {
    max-width: calc(1440px + var(--iframe-padding)*2);
    height: inherit;
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: hidden auto;
    padding-block: 0 var(--modal-padding-modal-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
}

.modal-rewards_root {
	height: inherit;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

.modal-rewards_states_container {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    display: flex;
}

.modal-rewards_emptyState_root {
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    display: flex;
}

.modal-rewards_emptyTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.47px;
    text-transform: none;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.modal-rewards_emptyDescription {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-bottom: 24px;
    color: var(--color-text-muted);
}

.modal-rewards_rewardsState_root {
	text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
	margin-bottom: 32px;
}

.modal-rewards_promocode-info {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.modal-rewards_promocode-info_title {
	color: var(--color-text-soft);
    font-size: 18px;
	font-weight: 400;
	line-height: 20px;
    letter-spacing: 0px;
}

.modal-rewards_game-cards {
	position: relative;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
	background: var(--color-bg-card);
    padding: 12px;
    border-radius: var(--tab-rounding-square);
}

.modal-rewards_game-card_pictureWrapper {
    border-radius: var(--tab-rounding-square-tab);
    inset: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
	transition: transform .1s linear;
	cursor: pointer;
}

.modal-rewards_game-card_pictureWrapper:hover {
	transform: translate(0px, -5px);
}

.modal-rewards_game-card_picture {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.modal-rewards_game-card_image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .1s linear;
    transform: scale(1.01);
	
}

.modal-rewards_promocode_root {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	gap: 12px;
	width: 100%;
}

.modal-rewards_promocode_title {
	font-size: 18px;
    color: var(--color-text-soft);
    line-height: 20px;
    letter-spacing: 0px;
}

.modal-rewards_promocode_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.modal-rewards_promocode_container {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
	background: var(--color-bg-card);
    padding: 12px;
    border-radius: var(--tab-rounding-square);
}

.modal-rewards_promocode_promocode {
	font-size: 24px;
    color: var(--color-text-main);
    font-weight: var(--font-headline-h2-desktop-font-weight);
    letter-spacing: var(--font-headline-h2-desktop-letter-spacing);
    line-height: 22px;
}

.modal-rewards_promocode_text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	align-items: flex-start;
}

.modal-rewards_promocode_promocode {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-rewards_promocode_description {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
    line-height: 12px;
}

.modal-rewards_promocode_description strong {
	color: var(--color-text-main);
    font-weight: 600;
}

.modal-rewards_error-icon {
    color: var(--color-text-main);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    width: 80px;
    height: 80px;
}

.modal-rewards_error-icon svg {
    fill: currentColor;
    width: 100%;
    height: 100%;
	padding: 12px;
}

.modal-deposit_main_root {

}

.modal-deposit_main_container {
    max-width: calc(1440px + var(--iframe-padding)*2);
    height: inherit;
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: hidden auto;
    padding-block: 0 var(--modal-padding-modal-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
}

@media (min-width: 1024px) {
    .modal-deposit_main_container {
        padding-block: 0 var(--modal-padding-modal-desktop);
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-deposit_root {
    height: inherit;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

.modal-deposit_tablist_root {
    border-radius: var(--tab-rounding-square);
    background-color: var(--color-bg-card);
    gap: 4px;
    padding: 2px;
    display: flex;
}

.modal-deposit_tab-button {
    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);
    border-radius: var(--tab-rounding-square-tab);
    background: var(--color-bg-card);
    color: var(--color-text-soft);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    padding-inline: var(--spacing-16);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    display: flex;
    width: 100%;
    cursor: pointer;
    color: var(--color-text-soft);
    position: relative;
    height: var(--size-control-l);
}

.modal-deposit_tab-button:hover {
	background: var(--color-bg-card-soft);
}

.modal-deposit_tab-button:active {
	opacity: 0.86;
}

.modal-deposit_tab-button.tab-button_active {
    background: var(--color-bg-card-soft-hover);
    color: var(--color-text-main);
}

.modal-deposit_tab-button+.modal-deposit_tab-button:before {
    content: "";
    background-color: var(--border-subtle);
    width: 1px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
}

.modal_currencySelector {
    width: 100%;
	position: relative;
	--rounding-popover: 12px;
}

.modal_currencySelector_wrapper {
    flex-direction: column;
    gap: 4px;
    display: flex;
}

.modal_currencySelector_wrapper_trigger {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--rounding-popover);
    outline: transparent solid 2px;
    -webkit-user-select: none;
    user-select: none;
    color: var(--color-text-main);
    -webkit-tap-highlight-color: transparent;
    transition: outline-color .25s;
    display: flex;
    position: relative;
    background-color: var(--color-bg-card);
}

.modal_currencySelector_wrapper_trigger:active {
    opacity: var(--opacity-item-active);
}

.modal_currencySelector_wrapper_trigger:hover:not(:disabled) {
    background-color: var(--color-bg-card-soft-hover);
}

.modal_currencySelectorButtonContent {
    flex-flow: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    display: flex;
}

.modal_currencySelectorButtonContent_icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
}

.modal_currencySelectorButtonContent_icon_root {
    justify-content: center;
    align-items: center;
    transition: .25s;
    display: inline-flex;
	padding: 2px;
}

.modal_currencySelectorButtonContent_icon_root svg {
	width: 20px;
    height: 20px;
	color: var(--color-text-main);
    fill: currentColor;
}

.modal_currencySelectorButtonContent_title {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    color: var(--color-text-main);
}

.modal_currencySelectorButtonContent_description {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    color: var(--color-text-muted);
}

.modal_currencySelector_currencyList {
	width: var(--dropdown-list-width, 100%);
    top: calc(44px + 8px);
    left: var(--dropdown-list-inset-inline-start, 0);
    right: var(--dropdown-list-inset-inline-end, auto);
    z-index: 30;
    position: absolute;
	max-height: 200px;
    box-shadow: var(--box-shadow-popover);
    background-color: var(--color-background-neutral-elevated);
    border-radius: var(--rounding-popover);
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.modal_currencySelector_currencyList_content {
    max-height: inherit;
    overflow-y: auto;
	scrollbar-width: none;
}

.modal_currencySelector_currencyList>:first-child {
	border-top-left-radius: var(--rounding-popover);
    border-top-right-radius: var(--rounding-popover);
}

.modal_currencySelector_currencyList>:last-child {
	border-bottom-left-radius: var(--rounding-popover);
    border-bottom-right-radius: var(--rounding-popover);
}

.modal_currencySelector_currency_wrapper {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
}

.modal_currencySelector_currency_wrapper:hover {
	background: var(--color-bg-card-soft);
}

.modal_currencySelector_currency_wrapper:active {
	opacity: 0.86;
}

.modal_currencySelector_currencyList_content > *:not(:last-child) {
	border-bottom: 1px solid var(--border-subtle);
}

.modal_currencyList_root {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    justify-content: space-between;
    align-items: center;
    transition: background-color .25s;
    display: flex;
}

.modal_currencyList_root:hover {
	background-color: var(--color-background-neutral-alpha-12);
}

.modal_currencyList_roo:active {
    opacity: var(--opacity-item-active);
}

.modal_currencyList_container {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    display: flex;
}

.modal_currencyList_currencyItem {
    flex-flow: row;
    align-items: center;
    gap: 12px;
    display: flex;
}

.modal_currencyList_currencyItem_primary_container {
	border: 1px solid var(--color-border-neutral-alpha-16);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 4px;
    font-size: 12px;
    display: inline-flex;
	background-color: var(--color-solid-brand-main-primary);
    color: var(--color-brand-main-foreground);
}

.modal_cryptoMinimumDepositDescription {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--color-text-soft);
}

.modal_crypto_minimumAmount {
	font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: var(--color-text-main);
}

.modal_cryptoAddress_root {
    width: 100%;
}

.modal_cryptoAddress_addressBox {
    background-color: var(--color-bg-card);
    text-align: center;
    border-radius: 16px;
    align-items: center;
    gap: 16px;
    padding: 16px;
    display: flex;
	justify-content: space-between;
}

.modal_cryptoAddress_qrCode {
	background: transparent;
    color: var(--color-text-main);
	width: auto;
    height: 125px;
	aspect-ratio: 1 / 1;
}

.modal_cryptoAddress_qrCode canvas,
.modal_cryptoAddress_qrCode img {
	background: transparent !important;
	display: block;
}

.modal_cryptoAddress_container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.modal_cryptoAddress_title {
    color: var(--color-text-main);
	font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.12px;
	text-transform: uppercase;
}

.modal_cryptoAddress_address {
    color: var(--color-text-soft);
    font-size: 0;
    word-break: break-all;
}

.modal_cryptoAddress_address span {
	font-size: 14px;
}

.modal_cryptoAddress_address>:first-child {
	color: var(--color-text-main);
    font-weight: 800;
}

.modal_cryptoAddress_address>:last-child {
	color: var(--color-text-main);
    font-weight: 800;
}

.modal_cryptoAddress_copyButton {
	justify-content: center;
    align-items: center;
    gap: 8px;
    outline: transparent solid 2px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: outline-color .25s, background-color .25s, color .25s;
    display: inline-flex;
	color: var(--color-text-main);
    background: var(--color-primary);
	font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    height: 32px;
    padding: 8px 12px;
    border-radius: 8px;
}

.modal_cryptoAddress_copyButton:active {
    opacity: var(--opacity-item-active);
}

.modal_cryptoAddress_copyButton:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.modal_cryptoAddress_copyButton svg {
    width: 16px;
    height: 16px;
	color: var(--color-text-main);
    fill: currentColor;
}

.modal-notification_main_root {

}

.modal-notification_main_container {
    max-width: calc(1440px + var(--iframe-padding)*2);
    height: inherit;
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: hidden auto;
    padding-block: 0 var(--modal-padding-modal-mobile);
    padding-inline: var(--modal-padding-modal-mobile);
}

@media (min-width: 1024px) {
    .modal-notification_main_container {
        padding-block: 0 var(--modal-padding-modal-desktop);
        padding-inline: var(--modal-padding-modal-desktop);
    }
}

.modal-notification_root {
    height: inherit;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

.modal-notification_states_container {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    display: flex;
}

.modal-notification_emptyState_root {
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    display: flex;
}

.modal-notification_emptyIcon {
    padding: 8px;
	color: var(--color-text-soft);
    fill: currentColor;
}

.modal-notification_emptyTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.47px;
    text-transform: none;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.modal-notification_emptyDescription {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-bottom: 24px;
    color: var(--color-text-muted);
}

/* Notification bonus banner */

.modal-notification_main_root {
	height: 100%;
}

.notification_list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.notification_bannerItem {
	position: relative;
	width: 100%;
	aspect-ratio: 1120 / 400;
	border-radius: calc(var(--tab-rounding-square-tab) * 1.25);
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	outline: 1px solid var(--border-soft);
	cursor: default;
	isolation: isolate;
}

.notification_bannerOverlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 12px;
}

.notification_bannerContent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	justify-content: space-between;
	height: 100%;
}

.notification_bannerTitle {
	color: var(--color-text-main);
	font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.56px;
	text-transform: uppercase;
	text-shadow: var(--shadow-card);
	white-space: normal;
}

.notification_bannerStatus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-transform: capitalize;
	background: var(--color-green-soft);
	color: var(--color-green);
	box-shadow: inset 0 0 0 1px var(--color-green-border);
}

.notification_bannerStatus svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: currentColor;
}

.modal_cryptoAddress_addressBox_withdrawal {
    background-color: var(--color-bg-card);
    text-align: center;
    border-radius: 16px;
    align-items: center;
    gap: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
}

.modal_cryptoAddress_container_withdrawal {
	flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex;
    width: 100%;
}

.modal_cryptoAddress_withdrawal_inputs {
	display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.modal_cryptoAddress_withdrawal_inputs input {
	color: var(--color-text-main);
    background: var(--color-bg-card-soft);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    outline: 0;
}

.modal_cryptoAddress_withdrawal_inputs input::placeholder {
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 400;
}

.modal_cryptoAddress_withdrawalButton {
    justify-content: center;
    align-items: center;
    gap: 8px;
    outline: transparent solid 2px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: outline-color .25s, background-color .25s, color .25s;
    display: inline-flex;
    color: var(--color-text-main);
    background: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;
}

.modal_cryptoAddress_withdrawalButton:active {
    opacity: var(--opacity-item-active);
}

.modal_cryptoAddress_withdrawalButton:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

/* =========================
   Deposit modal dynamic states
========================= */

.modal_currencySelector_currencyList[hidden] {
	display: none !important;
}

.modal_currencySelectorButtonContent_icon_root img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}

.modal-content[data-modal="deposit"] .modal_currencySelector_currencyList {
	background: var(--color-bg-card);
	box-shadow: 0px 6px 2px 0px rgb(0 0 0 / 35%);
}

.modal-content[data-modal="deposit"] .modal_currencyList_currencyItem_primary_container {
	color: var(--color-text-main);
	background: var(--color-primary);
	border-color: var(--border-cyan-soft);
	font-size: 12px;
	font-weight: 700;
}

.modal_currencyList_root:active {
	opacity: var(--opacity-item-active);
}

/* skeleton base */

.modal-content[data-modal="deposit"].is-deposit-loading .modal_currencySelector_wrapper_trigger,
.modal-content[data-modal="deposit"].is-deposit-address-loading [data-deposit-minimum-box],
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_qrCode,
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_container {
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

.modal-content[data-modal="deposit"].is-deposit-loading .modal_currencySelector_wrapper_trigger > *,
.modal-content[data-modal="deposit"].is-deposit-address-loading [data-deposit-minimum-box] > *,
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_qrCode > *,
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_container > * {
	opacity: 0;
}

.modal-content[data-modal="deposit"].is-deposit-loading .modal_currencySelector_wrapper_trigger::before,
.modal-content[data-modal="deposit"].is-deposit-address-loading [data-deposit-minimum-box]::before,
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_qrCode::before,
.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	pointer-events: none;

	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);

	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.modal-content[data-modal="deposit"].is-deposit-address-loading [data-deposit-minimum-box] {
	min-height: 40px;
	border-radius: 10px;
}

.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_qrCode {
	border-radius: 12px;
	background: var(--color-bg-card-soft);
}

.modal-content[data-modal="deposit"].is-deposit-address-loading .modal_cryptoAddress_container {
	min-height: 100px;
	border-radius: 12px;
	flex: 1;
}

.modal_cryptoAddress_copyButton:disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 480px) {
	.modal_cryptoAddress_addressBox {
		flex-direction: column;
	}

	.modal_cryptoAddress_container {
		width: 100%;
	}
}

/* Deposit selector arrows */

[data-deposit-currency-arrow],
[data-deposit-network-arrow] {
	transition: transform .25s ease;
}

.modal_currencySelector.modal_currencySelector_open [data-deposit-currency-arrow],
.modal_currencySelector.modal_currencySelector_open [data-deposit-network-arrow] {
	transform: rotate(180deg);
}

.modal-content[data-modal="deposit"] [data-deposit-selector="network"].is-single-network [data-deposit-network-arrow] {
	display: none;
}

.modal-content[data-modal="deposit"] [data-deposit-selector="network"].is-single-network .modal_currencySelector_wrapper_trigger {
	cursor: default;
}

.modal_currencySelector_wrapper_trigger:disabled {
	opacity: 1;
	cursor: default;
}

.modal-deposit_error[hidden] {
	display: none !important;
}

.modal-deposit_error {
	text-align: center;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex;
}

.modal-deposit_error-icon {
    color: var(--color-orange);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    width: 80px;
    height: 80px;
}

.modal-deposit_error-icon svg {
	fill: currentColor;
	width: 100%;
    height: 100%;
}

.modal-deposit_error-title {
	font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.59px;
    text-transform: none;
	color: var(--color-text-main);
}

.modal-deposit_error-description {
	font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
	color: var(--color-text-muted);
}

/* =========================
   Withdrawal modal dynamic states
========================= */

.modal-content[data-modal="withdrawal"] .modal_currencySelector_currencyList {
	background: var(--color-bg-card);
	box-shadow: 0px 6px 2px 0px rgb(0 0 0 / 35%);
}

.modal-content[data-modal="withdrawal"] .modal_currencyList_currencyItem_primary_container {
	color: var(--color-text-main);
	background: var(--color-primary);
	border-color: var(--border-cyan-soft);
	font-size: 12px;
	font-weight: 700;
}

[data-withdrawal-currency-arrow],
[data-withdrawal-network-arrow] {
	transition: transform .25s ease;
}

.modal_currencySelector.modal_currencySelector_open [data-withdrawal-currency-arrow],
.modal_currencySelector.modal_currencySelector_open [data-withdrawal-network-arrow] {
	transform: rotate(180deg);
}

.modal-content[data-modal="withdrawal"] [data-withdrawal-selector="network"].is-single-network [data-withdrawal-network-arrow] {
	display: none;
}

.modal-content[data-modal="withdrawal"] [data-withdrawal-selector="network"].is-single-network .modal_currencySelector_wrapper_trigger {
	cursor: default;
}

.modal-withdrawal_result[hidden],
.modal-content[data-modal="withdrawal"] [hidden] {
	display: none !important;
}

.modal-withdrawal_result {
	width: 100%;
	padding: 16px;
	border-radius: 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.modal-withdrawal_result-success {
	background: var(--color-green-soft);
	border: 1px solid var(--border-green);
	color: var(--color-text-main);
}

.modal-withdrawal_result-error {
	background: var(--color-red-soft);
	border: 1px solid var(--border-red);
	color: var(--color-text-main);
}

.modal_cryptoAddress_withdrawalButton:disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* skeleton */

.modal-content[data-modal="withdrawal"].is-withdrawal-loading .modal_currencySelector_wrapper_trigger,
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-minimum-box],
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-form-root] {
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

.modal-content[data-modal="withdrawal"].is-withdrawal-loading .modal_currencySelector_wrapper_trigger > *,
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-minimum-box] > *,
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-form-root] > * {
	opacity: 0;
}

.modal-content[data-modal="withdrawal"].is-withdrawal-loading .modal_currencySelector_wrapper_trigger::before,
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-minimum-box]::before,
.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-form-root]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	pointer-events: none;

	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);

	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-minimum-box] {
	min-height: 40px;
	border-radius: 10px;
}

.modal-content[data-modal="withdrawal"].is-withdrawal-form-loading [data-withdrawal-form-root] {
	min-height: 170px;
	border-radius: 16px;
}

.modal-content[data-modal="withdrawal"].is-withdrawal-create-loading [data-withdrawal-submit] {
	opacity: 0.7;
	pointer-events: none;
}

/* =========================
   Transaction history modal
========================= */

.transaction-history_list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.transaction-history_item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	width: 100%;
	padding: 6px 0;
	color: var(--color-text-main);
}

.transaction-history_list > *:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}

.transaction-history_itemIcon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	overflow: hidden;
	flex-shrink: 0;
}

.transaction-history_cryptoIconImage {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}

.transaction-history_cryptoFallbackIcon {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--color-primary);
    color: var(--color-text-main);
	display: flex;
	align-items: center;
	justify-content: center;
}

.transaction-history_cryptoFallbackIcon svg {
	width: 100%;
    height: 100%;
    padding: 4px;
    display: block;
    flex-shrink: 0;
}

.transaction-history_itemMain {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.transaction-history_itemTitle {
	color: var(--color-text-main);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.transaction-history_itemSubtitle {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.transaction-history_itemStatus {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	margin-top: 1px;
}

.transaction-history_itemStatus svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.transaction-history_itemStatus-success {
	color: var(--color-green);
}

.transaction-history_itemStatus-waiting {
	color: var(--color-yellow);
}

.transaction-history_itemStatus-cancel {
	color: var(--color-text-muted);
}

.transaction-history_itemSide {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 82px;
	text-align: right;
}

.transaction-history_itemAmount {
	color: var(--color-text-main);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

.transaction-history_itemAmount-deposit {
	color: var(--color-text-main);
}

.transaction-history_itemAmount-withdrawal {
	color: var(--color-text-main);
}

.transaction-history_itemDate,
.transaction-history_itemTime {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
}

.transaction-history_pagination {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.transaction-history_paginationText {
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
}

.transaction-history_progress {
	width: 200px;
	max-width: 100%;
	height: 4px;
	border-radius: 999px;
	background: var(--color-bg-card-soft);
	overflow: hidden;
}

.transaction-history_progressValue {
	height: 100%;
	border-radius: 999px;
	background: var(--color-text-main);
	transition: width .2s ease;
}

.transaction-history_showMoreButton {
	width: 140px;
	min-width: 140px;
}

.transaction-history_skeleton {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.transaction-history_skeletonItem {
	position: relative;
	width: 100%;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--gradient-dark-card);
}

.transaction-history_skeletonItem::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.transaction-history_itemAmount-canceled {
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: currentColor;
	color: var(--color-text-muted);
}

/* =========================
   Bet history modal
========================= */

.bet-history_list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.bet-history_item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	width: 100%;
	padding: 6px 0;
	color: var(--color-text-main);
}

.bet-history_list > *:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}

.bet-history_gamePicture {
	width: 36px;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	overflow: hidden;
	background: var(--gradient-dark-card);
	flex-shrink: 0;
	position: relative;
}

.bet-history_gameImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bet-history_gameImageFallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-card-soft);
	color: var(--color-text-main);
	font-size: 16px;
	font-weight: 800;
}

.bet-history_itemMain {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bet-history_itemTitle {
	color: var(--color-text-main);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bet-history_itemSubtitle {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bet-history_itemStatus {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	margin-top: 1px;
}

.bet-history_itemStatus svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.bet-history_itemStatus-win {
	color: var(--color-green);
}

.bet-history_itemStatus-loss {
	color: var(--color-red);
}

.bet-history_itemSide {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 82px;
	text-align: right;
}

.bet-history_itemAmount {
	color: var(--color-text-main);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

.bet-history_itemAmount-win {
	color: var(--color-green);
}

.bet-history_itemAmount-loss {
	color: var(--color-text-main);
}

.bet-history_itemDate,
.bet-history_itemTime {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
}

.bet-history_pagination {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.bet-history_paginationText {
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
}

.bet-history_progress {
	width: 200px;
	max-width: 100%;
	height: 4px;
	border-radius: 999px;
	background: var(--color-bg-card-soft);
	overflow: hidden;
}

.bet-history_progressValue {
	height: 100%;
	border-radius: 999px;
	background: var(--color-text-main);
	transition: width .2s ease;
}

.bet-history_showMoreButton {
	width: 140px;
	min-width: 140px;
}

.bet-history_skeleton {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.bet-history_skeletonItem {
	position: relative;
	width: 100%;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--gradient-dark-card);
}

.bet-history_skeletonItem::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

@media (max-width: 480px) {
	.bet-history_item {
		grid-template-columns: 38px minmax(0, 1fr) auto;
		gap: 8px;
	}

	.bet-history_gamePicture {
		width: 32px;
		aspect-ratio: 4 / 5;
		border-radius: 7px;
	}

	.bet-history_itemSide {
		min-width: 74px;
	}

	.bet-history_progress {
		width: 190px;
	}
}

/* =========================
   Bet history stats
========================= */

.bet-history_statsCard {
	position: relative;
	width: 100%;
	padding: 16px;
	border-radius: var(--rounding-container-m);
	background: radial-gradient(circle at top right, #032044, transparent 70%), linear-gradient(155deg, #06101F 0%, #086AD1 0%, #032044 100%);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.bet-history_statsHeader,
.bet-history_statsGrid,
.bet-history_statsNet {
	position: relative;
	z-index: 1;
}

.bet-history_statsHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.bet-history_statsTitle {
	color: var(--color-text-main);
	font-size: 16px;
	font-weight: 800;
	line-height: 22px;
	letter-spacing: -0.12px;
}

.bet-history_statsSubtitle {
	margin-top: 2px;
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: -0.39px;
}

.bet-history_statsGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.bet-history_statsItem {
	padding: 10px;
	border-radius: var(--rounding-container-s);
	background: rgba(6, 16, 31, 0.52);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bet-history_statsLabel {
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bet-history_statsValue {
	color: var(--color-text-main);
	font-size: 16px;
	font-weight: 800;
	line-height: 22px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bet-history_statsValue-positive {
	color: var(--color-green);
}

.bet-history_statsValue-negative {
	color: var(--color-red);
}

.bet-history_statsValue-neutral {
	color: var(--color-text-main);
}

.bet-history_statsNet {
	margin-top: 10px;
	padding: 12px;
	border-radius: var(--rounding-container-s);
	background: rgba(10, 24, 48, 0.72);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bet-history_statsNetLabel {
	color: var(--color-text-soft);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.bet-history_statsNetValue {
	font-size: 18px;
	font-weight: 900;
	line-height: 24px;
	white-space: nowrap;
}

.bet-history_statsSkeleton {
	position: relative;
	width: 100%;
	height: 168px;
	margin-bottom: 18px;
	border-radius: var(--rounding-container-m);
	background: var(--gradient-dark-card);
	overflow: hidden;
}

.bet-history_statsSkeleton::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

@media (max-width: 480px) {
	.bet-history_statsCard {
		padding: 14px;
		margin-bottom: 16px;
	}

	.bet-history_statsGrid {
		gap: 7px;
	}

	.bet-history_statsItem {
		padding: 9px;
	}

	.bet-history_statsTitle {
		font-size: 15px;
		line-height: 20px;
	}

	.bet-history_statsValue {
		font-size: 15px;
		line-height: 20px;
	}

	.bet-history_statsNetValue {
		font-size: 16px;
		line-height: 22px;
	}
}

/* =========================
   Bet history details header
========================= */

.bet-history_detailsHeader {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bet-history_detailsHeaderMain {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bet-history_detailsHeaderTitle {
	color: var(--color-text-main);
    font-size: 24px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
}

.bet-history_detailsHeaderSubtitle {
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================
   Header skeleton
========================= */

.header-main_wrapper.is-header-loading {
	pointer-events: none;
}

.header-main_content--skeleton {
	align-items: center;
	gap: var(--spacing-12);
	width: 100%;
	min-width: 0;
	display: flex;
}

.header-skeleton_logo,
.header-skeleton_tabs > div,
.header-skeleton_games > div,
.header-skeleton_balance,
.header-skeleton_button,
.header-skeleton_icon,
.header-skeleton_login,
.header-skeleton_registration {
	position: relative;
	overflow: hidden;
	background: var(--gradient-dark-card);
	border-radius: var(--tab-rounding-square-tab);
}

.header-skeleton_logo::before,
.header-skeleton_tabs > div::before,
.header-skeleton_games > div::before,
.header-skeleton_balance::before,
.header-skeleton_button::before,
.header-skeleton_icon::before,
.header-skeleton_login::before,
.header-skeleton_registration::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

.header-skeleton_logo {
	width: 44px;
	height: 44px;
	border-radius: var(--rounding-container-s);
	flex-shrink: 0;
}

.header-skeleton_tabs {
	display: flex;
	gap: 3px;
	padding: var(--spacing-2);
	border-radius: var(--tab-rounding-square-tab);
	background: var(--tab-color-segment-bg);
	flex-shrink: 0;
}

.header-skeleton_tabs > div {
	width: 100px;
	height: var(--size-control-l);
}

.header-skeleton_games {
	display: flex;
	gap: 3px;
	padding: var(--spacing-2);
	border-radius: var(--tab-rounding-square-tab);
	background: var(--tab-color-segment-bg);
	flex-shrink: 0;
}

.header-skeleton_games > div {
	width: 92px;
	height: var(--size-control-l);
}

.header-skeleton_leading {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-12);
	flex-grow: 1;
	min-width: 0;
	margin-inline-start: auto;
}

.header-skeleton_balance {
	width: 170px;
	height: var(--size-control-xl);
}

.header-skeleton_button {
	width: 108px;
	height: var(--size-control-xl);
}

.header-skeleton_icon {
	width: var(--size-control-xl);
	height: var(--size-control-xl);
}

@media (max-width: 1740px) {
	.header-skeleton_games {
		display: none;
	}
}

@media (max-width: 1024px) {
	.header-skeleton_tabs,
	.header-skeleton_games {
		display: none;
	}

	.header-skeleton_logo {
		width: 50px;
		height: 50px;
	}

	.header-skeleton_balance {
		width: 120px;
		height: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}

	.header-skeleton_button {
		width: 78px;
		height: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}

	.header-skeleton_icon {
		width: var(--size-control-s);
		height: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}
}

/* =========================
   Sidebar profile dynamic
========================= */

.sidebar-profile-action-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-soft);
	transition: .1s ease;
}

.sidebar-profile-action-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.sidebar-profile-button:hover .sidebar-profile-action-icon {
	color: var(--color-text-main);
}

.sidebar-profile-button.is-sidebar-profile-guest .sidebar-profile-action-icon-login {
	color: #323232;
}

.sidebar-profile-button.is-sidebar-profile-guest:hover .sidebar-profile-action-icon-login {
	color: var(--color-text-main);
}

.sidebar-profile-button.is-sidebar-profile-guest .sidebar-profile-id {
	display: none;
}

/* =========================
   Sidebar profile skeleton
========================= */

.sidebar-profile-skeleton {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 44px;
	overflow: hidden;
	pointer-events: none;
}

.sidebar-profile-skeleton-avatar,
.sidebar-profile-skeleton-line,
.sidebar-profile-skeleton-icon {
	position: relative;
	overflow: hidden;
	background: var(--gradient-dark-card);
}

.sidebar-profile-skeleton-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--rounding-max);
	flex-shrink: 0;
}

.sidebar-profile-skeleton-content {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
	min-width: 0;
}

.sidebar-profile-skeleton-line {
	height: 10px;
	border-radius: var(--rounding-max);
}

.sidebar-profile-skeleton-line-name {
	width: 72%;
}

.sidebar-profile-skeleton-line-id {
	width: 46%;
}

.sidebar-profile-skeleton-icon {
	width: 24px;
	height: 24px;
	border-radius: var(--rounding-8);
	flex-shrink: 0;
}

.sidebar-profile-skeleton-avatar::before,
.sidebar-profile-skeleton-line::before,
.sidebar-profile-skeleton-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

/*
  Когда общий sidebar skeleton активен, не показываем реальный profile,
  если он вдруг успел отрендериться раньше снятия sidebar-loading-init.
*/
html.sidebar-loading-init [data-sidebar-profile-container] .sidebar-profile-button {
	visibility: hidden;
}

.header-skeleton_logged,
.header-skeleton_guest {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-12);
	min-width: 0;
}

html.is-user-guest .header-skeleton_logged {
	display: none;
}

html.is-user-auth .header-skeleton_guest {
	display: none;
}

/* fallback: если класс по какой-то причине не успел поставиться — считаем гостем */
html:not(.is-user-auth):not(.is-user-guest) .header-skeleton_logged {
	display: none;
}

html:not(.is-user-auth):not(.is-user-guest) .header-skeleton_guest {
	display: flex;
}

.header-skeleton_login,
.header-skeleton_registration {
	position: relative;
	overflow: hidden;
	background: var(--gradient-dark-card);
	border-radius: var(--tab-rounding-square-tab);
	height: var(--size-control-xl);
}

.header-skeleton_login {
	width: 78px;
}

.header-skeleton_registration {
	width: 132px;
}

.header-skeleton_login::before,
.header-skeleton_registration::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--color-bg-card-soft) 0%,
		var(--color-bg-main) 45%,
		var(--color-bg-card-soft) 100%
	);
	background-size: 220% 100%;
	animation: gameSkeletonLoading 1.15s ease-in-out infinite;
}

@media (max-width: 1024px) {
	.header-skeleton_logged,
	.header-skeleton_guest {
		gap: var(--spacing-8);
	}

	.header-skeleton_login,
	.header-skeleton_registration {
		height: var(--size-control-s);
		border-radius: calc(var(--tab-rounding-square-tab) / 1.5);
	}

	.header-skeleton_login {
		width: 60px;
	}

	.header-skeleton_registration {
		width: 96px;
	}
}

.modal-auth_root {
	padding: 0 var(--modal-padding-modal-mobile) var(--modal-padding-modal-mobile);
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-auth_root {
        padding: 0 var(--modal-padding-modal-desktop) var(--modal-padding-modal-desktop);
    }
}

.modal-auth_segment-control_root {
    align-items: center;
    display: inline-flex;
	width: 100%;
	padding: var(--spacing-2);
    border-radius: var(--tab-rounding-square);
    background: var(--tab-color-segment-bg);
    gap: 3px;
	margin-bottom: var(--modal-padding-modal-gap-form);
}

.form_form {
    align-items: flex-end;
}

.form_root {
    display: flex;
    gap: 0 var(--modal-padding-modal-gap-stack-form);
    grid-auto-columns: 1fr;
    grid-template-areas: initial;
    flex-direction: column;
    place-items: flex-start start;
	--input-rounding: var(--rounding-12);
}

.email-input_root {
	position: relative;
    width: 100%;
	margin-bottom: 12px;
}

.field-wrapper_root {
    gap: var(--spacing-4);
    flex-direction: column;
    width: 100%;
    display: flex;
}

.base-field_root {
    --base-field__padding: var(--spacing-8) var(--spacing-16);
}

.field-wrapper_control {
    height: var(--size-control-xl);
    border: var(--border-s) solid transparent;
    border-radius: var(--input-rounding);
    background-color: var(--color-bg-card);
    align-items: center;
    transition: border-color .1s,opacity .1s;
    display: flex;
    position: relative;
}

.field-wrapper_control:active {
    opacity: var(--opacity-item-active);
}

.base-field_content {
    height: 100%;
    padding: var(--base-field__padding);
    color: var(--color-text-muted);
    cursor: text;
    align-items: center;
    gap: var(--spacing-12);
    flex-grow: 1;
    display: flex;
}

.base-field_iconStart, .base-field_iconEnd {
    height: min-content;
    color: var(--color-text-muted);
    align-items: stretch;
    gap: var(--spacing-12);
    display: flex;
	border-radius: var(--input-rounding);
}

.base-field_iconStart svg, .base-field_iconEnd svg {
	fill: currentColor;
    display: block;
	padding: 2px;
}

.base-field_divider {
    width: 1px;
    height: var(--spacing-16);
    background-color: var(--border-subtle);
}

.base-field_control {
    flex-grow: 1;
    align-items: center;
    height: 100%;
    display: flex;
    position: relative;
}

.base-field_controlContent {
    width: 100%;
}

.control_root {
    width: 100%;
    min-height: 20px;
    display: flex;
    position: relative;
}

.control_root input, .control_root textarea {
    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);
    border: var(--border-none);
    width: 100%;
    caret-color: var(--color-primary);
    color: var(--color-content-base-primary);
    font-feature-settings: "case" on;
    background-color: #0000;
    padding: 0;
}

.base-field_label {
    pointer-events: none;
    text-overflow: ellipsis;
    transform-origin: 0 100%;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    max-width: 100%;
    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);
    transition: transform .1s cubic-bezier(.4,0,.2,1);
    position: absolute;
    inset-block-start: 3px;
    overflow: hidden;
}

:is(.base-field_root.base-field_hasLabel.base-field_focused,.base-field_root.base-field_hasLabel.base-field_filled) .base-field_controlContent {
    transform: translateY(7px);
}

:is(.control_root input,.control_root textarea):focus, :is(.control_root input,.control_root textarea):active {
    outline: none;
}

:is(.base-field_root.base-field_hasLabel.base-field_focused,.base-field_root.base-field_hasLabel.base-field_filled) .base-field_label {
    transform: scale(.72)translateY(-17px);
}

.field-wrapper_status-error .field-wrapper_control {
    border-color: var(--color-solid-sentiment-negative-default);
    box-shadow: unset;
}

.hint_root {
    color: var(--color-text-soft);
    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);
}

.hint_variant-error {
    color: var(--color-red);
}

.password-input_root {
	position: relative;
    width: 100%;
	margin-bottom: 12px;
}

.sign-in_register {
    margin-top: var(--spacing-16);
    color: var(--color-text-muted);
    align-items: center;
    gap: var(--spacing-2);
    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);
    flex-direction: column;
    display: flex;
}

.button-base_variant-sign-in_register {
    color: var(--color-primary-hover);
}

.button-base_variant-sign-in_register:hover {
    color: var(--color-primary-hover);
}

/* =========================
   Login modal
========================= */

.base-field_root.is-invalid .base-field_content,
.base-field_root.base-field_error .base-field_content {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 1px var(--color-danger);
	border-radius: var(--input-rounding);
}

.hint_root[hidden],
.modal-auth_submit-error[hidden] {
	display: none !important;
}

.modal-auth_submit-error {
	border-radius: var(--tab-rounding-square-tab);
	background: var(--color-red-soft);
	border: 1px solid var(--color-red-border);
	color: var(--color-danger);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	padding: 10px 12px;
}

.form_root.is-login-submitting {
	pointer-events: none;
}

.form_root.is-login-submitting input {
	opacity: 0.75;
}

.form_root.is-login-submitting [data-login-submit] {
	opacity: 0.86;
}

.promo-input_root {
	position: relative;
    width: 100%;
}

.modal-signup_promoRoot {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
    width: 100%;
	align-items: flex-start;
}

.modal-signup_promoField[hidden],
[data-signup-show-promo][hidden] {
	display: none !important;
}

.form_root.is-signup-submitting {
	pointer-events: none;
}

.form_root.is-signup-submitting input {
	opacity: 0.75;
}

.form_root.is-signup-submitting [data-signup-submit] {
	opacity: 0.86;
}

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

@media (min-width: 1024px) {
    .modal-exit_root {
        padding: 0 var(--modal-padding-modal-desktop) var(--modal-padding-modal-desktop);
        gap: var(--spacing-20);
    }
}

.modal-exit_subtitle {
    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-content-base-primary);
}

.modal-exit_buttons-group_root {
    --gap: var(--spacing-12);
    gap: var(--gap);
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) {
    .modal-exit_buttons-group_root {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .modal-exit_buttons-group_root > * {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 0;
    }
}

.modal-content[data-modal="profile"] .modal-exit_profile-layer {
  z-index: 10020;
}

.modal-content[data-modal="profile"] .modal-exit_profile-layer:not(.active) {
  pointer-events: none;
}

.modal-content {
	z-index: 1000;
}

.modal-content[data-modal-stack="top"] {
	z-index: 1100;
}

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

.modal-rules_main_root {
    color: var(--color-text-main);
    align-items: center;
    gap: var(--spacing-24);
    flex-direction: column;
    display: flex;
	padding: var(--spacing-24) var(--spacing-16);
}

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

.modal-rules_accordion-header_root {
    color: var(--color-content-base-primary);
    align-items: center;
    gap: var(--spacing-8);
    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;
    white-space-collapse: preserve-breaks;
    display: flex;
	white-space: normal;
}

@media (min-width: 1024px) {
    .modal-rules_accordion-header_root {
        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);
        gap: var(--spacing-12);
    }
}

.modal-rules_rules_header {
    margin-bottom: var(--spacing-16);
}

.modal-rules_rules_header svg {
	color: var(--color-text-main);
	fill: currentColor;
    display: block;
}

.modal-rules_accordion_root {
    border-radius: var(--tab-rounding-square);
    background-color: var(--color-bg-card-soft);
    transition: background-color .28s;
	white-space: normal;
}

.modal-rules_rules_accordion {
    margin-bottom: var(--spacing-12);
    scroll-margin-top: var(--spacing-12);
}

.modal-rules_accordion-heading_root {
    min-height: 52px;
    color: var(--color-text-main);
    cursor: pointer;
    padding-block: var(--tab-rounding-square);
    padding-inline: var(--tab-rounding-square);
    -webkit-user-select: none;
    user-select: none;
    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);
    justify-content: space-between;
    align-items: center;
    display: flex;
	white-space: normal;
}

.modal-rules_accordion-heading_titleWrapper {
    align-items: center;
    gap: var(--spacing-12);
    display: flex;
}

.modal-rules_accordion-heading_arrow {
    color: var(--color-content-base-secondary);
    flex-shrink: 0;
    transition: transform .28s ease-in-out;
	fill: currentColor;
    display: block;
}

.modal-rules_accordion-heading_root.modal-rules_accordion-heading_isOpen .modal-rules_accordion-heading_arrow {
    transform: rotate(180deg);
}

.modal-rules_accordion-body_root {
    white-space: pre-line;
    grid-template-rows: 0fr;
    grid-template-columns: 100%;
    transition: grid-template-rows .28s;
    display: grid;
    overflow: hidden;
}

.modal-rules_accordion-body_root.modal-rules_accordion-body_isOpen {
    grid-template-rows: 1fr;
}

.modal-rules_accordion-body_inner {
    min-height: 0;
    color: var(--color-text-soft);
    padding-inline: var(--spacing-16);
    visibility: hidden;
    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);
    transition: visibility .28s,padding-bottom .28s;
}

.modal-rules_accordion-body_root.modal-rules_accordion-body_isOpen .modal-rules_accordion-body_inner {
    padding-bottom: var(--spacing-16);
    visibility: visible;
}


.modal-rules_content_text {
    display: contents;
}

.modal-container_card-root.modal-info-vip_modal {
	background: radial-gradient(circle at top right, #000710, transparent 100%), linear-gradient(18deg, #06101f 10%, #0468d1 55%, #032044 100%);
}

.modal-container_card-root.modal-info-vip_modal .modal-header_overlayHeader {
	background: radial-gradient(circle at top right, #000710, transparent 114%), linear-gradient(18deg, #06101f 0%, #0468d1 76%, #032044 100%);
}

.modal-info-vip_modal :is(.modal-header_title, .modal-info_bonus-rules_title) {
	color: var(--color-text-main) !important;
}

.button-base_variant-vip-club {
    --background: var(--gradient-primary);
    --background-hover: var(--gradient-primary-hover);
    --border-color: 1px solid var(--border-default);
    --border-color-grad: var(--button-color-neutral-bg-border-grad);
    color: var(--color-content-base-primary);
}

.random-game_backgroundPictureLeft {
    z-index: 2;
    pointer-events: none;
    position: absolute;
    inset-block: 0;
	width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
	.random-game_backgroundPictureLeft {
        display: none;
    }
}

.random-game_backgroundPictureLeft div {
    object-fit: contain;
    width: 100%;
    height: 100%;
	display: block;
	object-position: left;
	background-repeat: no-repeat;
	background-image: url('/img/random-game-background-small.png?v=10');
}

@media (min-width: 1720px) {
	.random-game_backgroundPictureLeft div {
		background-image: url('/img/random-game-background.png?v=10');
	}
}