:root {
    /*  ============================================ Colors ============================================ */
    --color-bg-page: #010513;
    /* Header */
    --color-bg-header: #050717;
    --color-border-header: rgba(255, 255, 255, 0.2);
    /* Footer */
    --color-bg-footer: #010513;
    --color-border-footer: rgba(255, 255, 255, 0.2);
    --color-text-footer: #bdb1b5;
    /* Navigation */
    --color-text-btn-bonus: #ffffff;
    --color-bg-nav: #050717;
    --color-bg-nav-mobile: #010513;
    --color-bg-nav-link: #0e0618;
    --color-icon-menu: #FFFFFF;
    --color-text-nav: #eeebec;
    --color-text-nav-hover: #FFFFFF;
    --color-text-nav-mobile: #bdb1b5;
    --color-text-nav-mobile-hover: #FFFFFF;
    /* Text */
    --color-text: #eeebec;
    /* Buttons and Banner*/
    --color-bg-btn-header: radial-gradient(circle at 30% 20%, #FFFFFF 0%, #020616 72%);
    --color-bg-btn-primary: linear-gradient(180deg, #990030 0%, #f7004f 28%, #e00b4f 66%, #e41658 100%);
    --color-border-btn-header: rgba(255, 255, 255, 0.2);
    --color-border-btn-primary: #ff3f7c;
    --color-text-bonus: #f2427c;
    --color-text-bonus-subtitle: #bdb1b5;
    --color-text-btn-primary: #ffffff;
    --color-text-btn-header: #eeebec;
    --color-bg-banner: transparent;
    /* for classic large banners */
    --banner-position-desktop: top center;
    --banner-position-mobile: top right 45%;
    /* can be also used for hero (template1) */
    --banner-height-desktop: 450px;
    --banner-height-mobile: 400px;

    /* Other */
    --color-border-card: rgba(255, 255, 255, 0.15);
    --color-bg-card: #0e0618;
    --color-border-table: rgba(255, 255, 255, 0.15);
    --color-bg-table-row: rgba(255, 255, 255, 0.05);
    --color-bg-section: #0e0618;
    --color-border-section: rgba(255, 255, 255, 0.15);

    /*  ============================================ Optional ============================================ */
    --height-header: 70px;
    --color-outline-focus: #FFFFFF;
    --color-tap-highlight: #fff0;
    --color-scrollbar-thumb: #FFFFFF;

    /* lang menu */
    --color-bg-lang-btn: #31313100;
    --color-bg-lang-menu: #0e0618;
    --color-bg-lang-option-hover: #050717;


    /* Radius tokens */
    --radius-btn: 16px;
    --radius-nav: 8px;
    --radius-game-card: 20px;
    --radius-banner-mobile: 16px;
    --radius-banner-desktop: 16px;
    --radius-bonus-banner: 16px;
    --radius-table-cell: 10px;
    --radius-section: 16px;
    --radius-author-image: 50%;
    --radius-lang-menu: 8px;


    /* Typography tokens */
    --font-size-base: 1rem;
    --font-size-h1: 35px;
    --font-size-h2: 25px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h1-mobile: 30px;
    --font-size-h2-mobile: 25px;
    --font-size-h3-mobile: 20px;
    --font-size-h4-mobile: 18px;
    --font-size-bonus: 25px;
    --font-size-bonus-mobile: 20px;
    --font-size-bonus-subtitle: 20px;
    --font-size-menu-item: 16px;
    --font-size-lang: 14px;
    --font-size-footer: 13px;
    --font-size-card-title: 14px;
    --font-size-card-btn: 14px;
    --font-size-btn-primary: 1.5rem;
    --font-size-table: 14px;
    --font-size-subtitle: 18px;


    /* Font weight tokens */
    --fw-body: 400;
    --fw-h1: 700;
    --fw-h2: 700;
    --fw-h3: 700;
    --fw-h4: 700;
    --fw-btn: 900;
    --fw-menu-item: 700;
    --fw-strong: 700;
    --fw-link-footer: 700;
    --fw-bonus: 900;
    --fw-bonus-subtitle: 700;
    --fw-table: 500;
    --fw-card-title: 500;


    /* Text transform tokens */
    --text-transform-uppercase: uppercase;
    --text-transform-none: none;
    --text-transform-button-primary: uppercase;
    --text-transform-button-header: none;
    --text-transform-bonus-subtitle: uppercase;
    --text-transform-bonus: none;
    --text-transform-menu: uppercase;
    --color-scrollbar-thumb-hover: #020616;
    --color-scrollbar-track: #010513;
    --color-border-btn-log: #FFFFFF;
    --color-bg-social-hover: rgba(238, 235, 236, 0.1);
    --color-bg-btn-log: linear-gradient(180deg, #020616 0%, #050717 100%);
    --cta-btn-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.22);
    --color-bg-btn-primary-hover: linear-gradient(180deg, #990030 0%, #f7004f 22%, #ff1e66 100%);
    --stb-main-button-box-shadow: 0 0 0 2px rgba(255, 63, 124, 0.65), inset 0 2px 0 rgba(228, 22, 88, 0.55), 0 0 48px rgba(224, 11, 79, 0.85), 0 0 22px rgba(247, 0, 79, 0.65), 0 14px 34px rgba(0, 0, 0, 0.45);
    --stb-reg-log-box-shadow: 0 0 28px rgba(224, 11, 79, 0.75), 0 8px 22px rgba(0, 0, 0, 0.38);
    --cta-btn-shadow-rest: 0 0 0 2px rgba(255, 63, 124, 0.65), inset 0 2px 0 rgba(228, 22, 88, 0.55), 0 0 48px rgba(224, 11, 79, 0.85), 0 0 22px rgba(247, 0, 79, 0.65), 0 14px 34px rgba(0, 0, 0, 0.45);
    --cta-btn-shadow-pulse: 0 0 0 3px rgba(255, 63, 124, 0.85), inset 0 2px 0 rgba(255, 30, 102, 0.68), 0 0 64px rgba(224, 11, 79, 1), 0 0 32px rgba(247, 0, 79, 0.82), 0 16px 40px rgba(0, 0, 0, 0.5);
    --hero-text-panel-bg: rgba(1, 5, 19, 0.8);
    --hero-text-panel-border: rgba(247, 0, 79, 0.32);
    --hero-text-panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.55);
    --hero-text-panel-radius: var(--radius-bonus-banner, 10px);
    --hero-description-color: #f2427c;
    --content-frame-mode: radius_only;
    --content-frame-kind: radius_only;
    --content-frame-radius: 12px;
    --content-frame-pad: 0;
    --content-frame-border-width: 0px;
    --content-frame-bg: transparent;
    --content-frame-border: transparent;
    --content-frame-border-inner: transparent;
    --content-frame-shadow: none;
    --content-frame-img-radius: 12px;
}

/* Theme enhancements */

/* === Hero text panel (auto) === */
.main-banner .description {
  background: var(--hero-text-panel-bg) !important;
  color: var(--hero-description-color, var(--color-text-bonus)) !important;
  border: 1px solid var(--hero-text-panel-border) !important;
  border-radius: var(--hero-text-panel-radius) !important;
  box-shadow: var(--hero-text-panel-shadow) !important;
  /* padding: 0.55em 0.9em !important; */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* === UI icon contrast (auto) === */
.header-burger svg path,
.burger.header-burger svg path {
  fill: var(--color-text-nav) !important;
  fill-opacity: 0.85;
}
.c-burger .svg-icon,
.c-burger .svg-icon path,
.c-burger__line {
  fill: var(--color-text-nav) !important;
}
.hamburger-btn span {
  background: var(--color-text-nav) !important;
}
.header .mobile-menu-toggle span {
  background-color: var(--color-text-nav) !important;
}

/* === Primary button text (auto) === */
.cta-btn,
.login-btn,
.btn-primary,
.btn--primary,
.btn--danger.btn--primary,
.bonus-btn,
.button--super-primary,
.button.button--super-primary,
.text-btn .button,
.home-bonuses-card__button,
.o-play-btn,
.o-action-btn,
.o-btn.o-play-btn,
.sa-btn.sa-btn_primary,
.sa-call-to-action .sa-btn_primary,
.main__btn,
.hero_btn {
  color: var(--color-text-btn-primary) !important;
  background: var(--color-bg-btn-primary) !important;
  border: 2px solid var(--color-border-btn-primary) !important;
  text-shadow: var(--cta-btn-text-shadow) !important;
  box-shadow: var(--cta-btn-shadow-rest, var(--stb-main-button-box-shadow)) !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease, border-color 0.2s ease;
}
.cta-btn:hover,
.login-btn:hover,
.btn-primary:hover,
.btn--primary:hover,
.btn--danger.btn--primary:hover,
.bonus-btn:hover,
.button--super-primary:hover,
.button.button--super-primary:hover,
.text-btn .button:hover,
.home-bonuses-card__button:hover,
.o-play-btn:hover,
.o-action-btn:hover,
.o-btn.o-play-btn:hover,
.sa-btn.sa-btn_primary:hover,
.sa-call-to-action .sa-btn_primary:hover,
.main__btn:hover,
.hero_btn:hover {
  color: var(--color-text-btn-primary) !important;
  background: var(--color-bg-btn-primary-hover, var(--color-bg-btn-primary)) !important;
  box-shadow: var(--cta-btn-shadow-pulse, var(--stb-main-button-box-shadow)) !important;
  transform: translateY(-1px);
}
.cta-btn:active,
.login-btn:active,
.btn-primary:active,
.btn--primary:active,
.btn--danger.btn--primary:active,
.bonus-btn:active,
.button--super-primary:active,
.button.button--super-primary:active,
.text-btn .button:active,
.home-bonuses-card__button:active,
.o-play-btn:active,
.o-action-btn:active,
.o-btn.o-play-btn:active,
.sa-btn.sa-btn_primary:active,
.sa-call-to-action .sa-btn_primary:active,
.main__btn:active,
.hero_btn:active {
  transform: translateY(0);
}

/* === Content image frame (auto) === */
.img-wrp {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
}

.img-wrp img {
  display: block;
  border-radius: 12px;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
}
.reg {background:none}