.rWvPU_5D {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(27, 27, 31, 0.78);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}

.agtkLkbK {
  font-size: 20px;
  font-weight: 900;
}

.QPWnHcYp {
  font-size: 14px;
  font-weight: 500;
  color: #c7c7cf;
  max-width: 340px;
  line-height: 1.45;
}

.GVyBIENq {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: qs0BbmDD 0.9s linear infinite;
}

/* Ручной выход при затяжном обрыве — стиль как у LoadingErrorOverlay. */
.F3NrhGnJ {
  margin-top: 6px;
  height: 46px;
  padding: 0 28px;
  border: none;
  border-radius: 23px;
  /* Gates CTA green (Figma START / confirm buttons). */
  background: rgba(42, 161, 31, 1);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition:
    filter 0.15s ease-out, transform 0.1s ease-out;
}

.F3NrhGnJ:hover {
  filter: brightness(1.1);
}

.F3NrhGnJ:active {
  transform: scale(0.96);
}

@keyframes qs0BbmDD {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Figma note (449:3376 / 448:4344): "all standard modals and elements appear with a Bouncy
 * animation". Shared by every DOM modal panel: 0.6 -> 1.06 -> 1 in ~350 ms with a back-out feel.
 *
 * The individual `scale` property is animated instead of `transform`, so the class can sit on an
 * element that has its own transform. Caveat: `scale` is applied on top of that transform around
 * the untranslated box, so a translate() used for centring is scaled too and the element slides
 * while it grows. Put the class on an element centred without translate() (flex, auto margins,
 * left/top) — the stage-fit translate()+scale() wrappers stay on the parents.
 */
.HFmDOzeE {
  animation: KuxJr8D8 350ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes KuxJr8D8 {
  0% {
    opacity: 0;
    scale: 0.6;
  }

  65% {
    opacity: 1;
    scale: 1.06;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .HFmDOzeE {
    animation: uS9Rx4VE 150ms ease-out both;
  }
}

@keyframes uS9Rx4VE {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.K3U6YjZp {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translateX(-50%);
  pointer-events: none;
}

.A_gRGaes {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.eQ4yCde9 {
  /* Figma 276:2472: 299x314, rgba(7,7,7,.8), r20 (desktop popup palette); +53 for the
     PAYOUTS row (DEV-508). Keep in sync with MODAL_HEIGHT in the component. */
  position: absolute;
  width: 299px;
  height: 367px;
  background: rgba(7, 7, 7, 0.8);
  border-radius: 20px;
  pointer-events: auto;
}

.oBkH4Hox {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition:
    transform 0.12s ease-out, filter 0.12s ease-out;
  /* a11y: теперь это <button> — гасим UA-стили, визуал не меняется. */
  background: none;
  border: 0;
  padding: 0;
}

.EWlFHfJK {
  display: block;
  width: 100%;
  height: 100%;
}

.oBkH4Hox:hover {
  transform: translate(-50%, -50%) scale(1.12);
  filter: brightness(1.12);
}

.oBkH4Hox:active {
  transform: translate(-50%, -50%) scale(0.9);
  filter: brightness(0.92);
}

.vOy4vHDH {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px 0;
}

/* Rows 267x45 r18.881, icon 38x38 at x10, label at x60, 60x32 switch 8 from the right. */
.DDXOvWfz {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 45px;
  padding: 0 8px 0 10px;
  background: rgba(81, 81, 81, 0.4);
  border-radius: 18.881px;
  cursor: pointer;
  /* a11y: кликабельные ряды теперь <button> — гасим UA-стили, визуал не меняется. */
  border: 0;
  font: inherit;
  width: 100%;
  text-align: inherit;
  box-sizing: border-box;
}

.DDXOvWfz:hover {
  background: rgba(81, 81, 81, 0.65);
}

.DDXOvWfz:focus-visible {
  outline: 2px solid rgba(170, 156, 188, 1);
  outline-offset: 2px;
}

.ex3sGMYf {
  cursor: default;
}

.ex3sGMYf:hover {
  background: rgba(81, 81, 81, 0.4);
}

.fQr1ZdzO {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.rKx031KH {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
}

/* Figma Group 154/155: OFF track #676767 + white thumb, ON track #32672b + green #2aa11f thumb. */
.lXUKUvl3 {
  flex: 0 0 auto;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  background: rgba(103, 103, 103, 1);
  transition: background 0.2s ease-out;
}

.FL7G8jyq {
  background: rgba(50, 103, 43, 1);
}

.HwCGq4OH {
  position: absolute;
  top: 3px;
  width: 27px;
  height: 26px;
  border-radius: 50%;
  transition:
    left 0.2s ease-out, background 0.2s ease-out;
}

.hL_YlQJI {
  left: 3px;
  background: rgba(255, 255, 255, 1);
}

.bxca58Jm {
  left: 30px;
  background: rgba(42, 161, 31, 1);
}

/* Figma 396:2980: cream plate 361x118, 4px #462503 border, r20, with brown (#452603) +/- circles
   and a brown bet box. */
.ti9Z65iT {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 361px;
  height: 118px;
  box-sizing: border-box;
  background: rgba(234, 216, 174, 1);
  border: 4px solid rgba(70, 37, 3, 1);
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.bQAexnR6 {
  display: flex;
  align-items: center;
  gap: 17px;
  pointer-events: auto;
}

.etToHa0K {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  background: rgba(69, 38, 3, 1);
  border: none;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition:
    background 0.15s ease-out, transform 0.1s ease-out;
}

.etToHa0K:disabled {
  cursor: default;
  opacity: 0.6;
}

/* #f4f4f4 bars 39.24x6.73 r8.33; the plus adds a vertical twin. */
.PknOaKlA {
  width: 39.24px;
  height: 6.73px;
  background: rgba(244, 244, 244, 1);
  border-radius: 8.33px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.HD1M0XNf {
  transform: translate(-50%, -50%) rotate(90deg);
}

.etToHa0K:hover:not(:disabled),
.TR2uYL6g:hover:not(:disabled) {
  background: rgba(98, 56, 9, 1);
}

.etToHa0K:active:not(:disabled),
.TR2uYL6g:active:not(:disabled) {
  transform: scale(0.94);
}

.etToHa0K:focus-visible,
.TR2uYL6g:focus-visible {
  outline: 2px solid rgba(255, 243, 159, 1);
  outline-offset: 2px;
}

.TR2uYL6g {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 138.8px;
  height: 68px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgba(69, 38, 3, 1);
  border: none;
  border-radius: 8.33px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition:
    background 0.15s ease-out, transform 0.1s ease-out;
}

.TR2uYL6g:disabled {
  cursor: default;
  opacity: 0.6;
}

.uD9iJ7rU {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 130px;
  font-family: var(--font-display);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 1);
}

.uYYV9U8W {
  font-size: 14px;
}

.ZOLOPiWv {
  font-size: 16px;
}

.ti9Z65iT[data-disabled='true'] {
  opacity: 0.4;
}

.nKMyYxHU,
.pnwpIVUz,
.ndwgLNM6 {
  display: block;
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Figma "Golden text modals": Lilita One, gradient #fff29c -> #f4cc5d -> #da9310 -> #feee78,
   dark-brown outline and the orange glow rgba(236, 84, 39, 0.45). The outline is a separate layer
   under the gradient fill (a text stroke on the clipped text itself would eat into the gradient). */
.hCcc7twx {
  position: absolute;
  right: 0;
  left: 0;
  font-family: var(--font-display);
  line-height: 1;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

.hCcc7twx::before {
  position: absolute;
  right: 0;
  left: 0;
  content: attr(data-text);
  color: rgba(74, 42, 3, 1);
  text-shadow: 0 0.04px 4.04px rgba(236, 84, 39, 0.45);
  -webkit-text-stroke: 0.12em rgba(74, 42, 3, 1);
}

.oZy0pjpf {
  position: relative;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(255, 242, 156, 1) 21.717%,
    rgba(244, 204, 93, 1) 50.511%,
    rgba(218, 147, 16, 1) 65.473%,
    rgba(254, 238, 120, 1) 80.435%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

/* Buy-bonus confirm step (DEV-518 interim): the selected card in the GoP card art. The box is the
   tier-1 frame (433.26x597 design units x unit); bigger tier frames overflow it on purpose. Sizes
   and positions come inline (BUY_BONUS_CONFIRM_LAYOUT / BUY_BONUS_CONFIRM_TYPE). */
.QR6uWAeZ {
  position: relative;
  flex: 0 0 auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: auto;
}

/* The card-step title style, enlarged: Lilita One #fbfbee, uppercase, 2px dark-brown outline. */
.kRNP5Z4g {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  color: rgba(251, 251, 238, 1);
  text-shadow:
    2px 0 0 rgba(59, 37, 3, 1),
    -2px 0 0 rgba(59, 37, 3, 1),
    0 2px 0 rgba(59, 37, 3, 1),
    0 -2px 0 rgba(59, 37, 3, 1),
    1.4px 1.4px 0 rgba(59, 37, 3, 1),
    -1.4px 1.4px 0 rgba(59, 37, 3, 1),
    1.4px -1.4px 0 rgba(59, 37, 3, 1),
    -1.4px -1.4px 0 rgba(59, 37, 3, 1),
    0 3px 2.5px rgba(0, 0, 0, 0.35);
}

.FMoFA7CR {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

/* The card description style (Inter, black), fitted to the tier's band. */
.WzyudYWl {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  transform: translateX(-50%);
}

.IMRvtUCa {
  position: absolute;
  right: 6%;
  left: 6%;
  font-family: var(--font-display);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  color: rgba(0, 0, 0, 1);
}

/* "100 × €1.00": the Figma secondary card-text style (Inter Italic, black). */
.pODJLEEs {
  position: absolute;
  right: 6%;
  left: 6%;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  color: rgba(0, 0, 0, 1);
}

/* BACK / BUY: a transparent hit box around the drawn tier button. */
.ENUhsdar {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  font-family: var(--font-display);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 1);
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  text-shadow:
    1px 0 0 rgba(59, 37, 3, 1),
    -1px 0 0 rgba(59, 37, 3, 1),
    0 1px 0 rgba(59, 37, 3, 1),
    0 -1px 0 rgba(59, 37, 3, 1),
    0 2px 1px rgba(0, 0, 0, 0.35);
}

.gOmasf6E {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 8px;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition:
    filter 0.15s ease-out, transform 0.1s ease-out;
}

/* BACK wears the tier button greyed out. */
.qhrvyT5G .gOmasf6E {
  filter: grayscale(1) brightness(1.08);
}

.hnetR6qo {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

@media (hover: hover) {
  .ZYMqLBa6:hover:not(:disabled) .gOmasf6E {
    filter: brightness(1.1);
  }

  .qhrvyT5G:hover:not(:disabled) .gOmasf6E {
    filter: grayscale(1) brightness(1.18);
  }
}

.ENUhsdar:active:not(:disabled) .gOmasf6E {
  transform: scale(0.94);
}

.ENUhsdar:disabled {
  cursor: default;
}

.ZYMqLBa6:disabled .gOmasf6E {
  filter: grayscale(0.6) brightness(0.85);
}

.qhrvyT5G:disabled .gOmasf6E {
  filter: grayscale(1) brightness(0.85);
}

.ENUhsdar:focus-visible {
  outline: none;
}

.ENUhsdar:focus-visible .gOmasf6E {
  outline: 2px solid rgba(255, 243, 159, 1);
  outline-offset: 2px;
}

/* Mobile buy-bonus card: the tier-1 frame box (280 wide) of the shared Figma card layout;
   higher-tier frames (gems, wings) overflow it on purpose. */
.bYL_rJti {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: auto;
}

/* Current Figma 396:3331 uses 21px next to the 36px "{n}FS", a 1.3px outline; a
   long translation shrinks to the card (FitText). */
.IzTFov52 {
  position: absolute;
  right: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 22px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  color: rgba(251, 251, 238, 1);
  text-shadow:
    1.3px 0 0 rgba(59, 37, 3, 1),
    -1.3px 0 0 rgba(59, 37, 3, 1),
    0 1.3px 0 rgba(59, 37, 3, 1),
    0 -1.3px 0 rgba(59, 37, 3, 1),
    0.9px 0.9px 0 rgba(59, 37, 3, 1),
    -0.9px 0.9px 0 rgba(59, 37, 3, 1),
    0.9px -0.9px 0 rgba(59, 37, 3, 1),
    -0.9px -0.9px 0 rgba(59, 37, 3, 1),
    0 2px 1.5px rgba(0, 0, 0, 0.35);
}

._3yu11FGd,
.SG4IleYR {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.zJl4_gt1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sBu1Tm6f {
  position: absolute;
  right: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  color: rgba(0, 0, 0, 1);
}

/* DEV-510 replaces the copy; the current Figma 396:3334 keeps Inter Italic 12px. */
._YHqKXIU {
  position: absolute;
  right: 12px;
  left: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.25;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  color: rgba(0, 0, 0, 1);
}

.n5pIAtT_ {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 1);
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  text-shadow:
    1px 0 0 rgba(59, 37, 3, 1),
    -1px 0 0 rgba(59, 37, 3, 1),
    0 1px 0 rgba(59, 37, 3, 1),
    0 -1px 0 rgba(59, 37, 3, 1);
}

/* The drawn tier button (Figma frame_bonus_button art) inside the larger hit box. */
.wZdce2bw {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6px;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition:
    filter 0.15s ease-out, transform 0.1s ease-out;
}

/* Long translations (RU "АКТИВИРОВАТЬ", ta/te/kn) shrink to the button art (FitText). */
.CoRz5oEe {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.n5pIAtT_:disabled {
  cursor: default;
}

.n5pIAtT_:disabled .wZdce2bw {
  filter: grayscale(0.6) brightness(0.85);
}

.n5pIAtT_:active:not(:disabled) .wZdce2bw {
  transform: scale(0.94);
}

/* Hover feedback only on devices with a real pointer. */
@media (hover: hover) {
  .n5pIAtT_:hover:not(:disabled) .wZdce2bw {
    filter: brightness(1.1);
  }
}

/* Figma 349:3263: cream plate 243x79, 3px #462503 border, r15, brown (#452603) 42px +/- circles
   and a 104.7x51.3 brown bet box. */
.hugmrHwp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 243px;
  height: 79px;
  box-sizing: border-box;
  background: rgba(234, 216, 174, 1);
  border: 3px solid rgba(70, 37, 3, 1);
  border-radius: 15px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.yaSQS93f {
  display: flex;
  align-items: center;
  gap: 13px;
}

.PvfJsIm9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42.25px;
  height: 42.25px;
  margin: 0;
  padding: 0;
  background: rgba(69, 38, 3, 1);
  border: none;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease-out;
}

.PvfJsIm9:disabled {
  cursor: default;
  opacity: 0.6;
}

/* White bars 29.6x5.08 r7; the plus adds a vertical twin. */
.hFSoOu6M {
  width: 29.6px;
  height: 5.08px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6.99px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.jtDfXCPq {
  transform: translate(-50%, -50%) rotate(90deg);
}

.PvfJsIm9:active:not(:disabled),
.jgxaVucy:active:not(:disabled) {
  transform: scale(0.94);
}

.jgxaVucy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 104.7px;
  height: 51.3px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgba(69, 38, 3, 1);
  border: none;
  border-radius: 6.99px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0 3px 2.3px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease-out;
}

.jgxaVucy:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Hover feedback only on devices with a real pointer (e.g. a narrow desktop window). */
@media (hover: hover) {
  .PvfJsIm9:hover:not(:disabled),
  .jgxaVucy:hover:not(:disabled) {
    background: rgba(98, 56, 9, 1);
  }
}

.H8yULQyi {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 98px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 1);
}

.hugmrHwp[data-disabled='true'] {
  opacity: 0.4;
}

.dERLoPKJ {
  position: fixed;
  left: 50%;
  top: 0;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: translateX(-50%);
  background: rgba(1, 1, 1, 0.85);
  z-index: 200;
  pointer-events: auto;
  overflow: hidden;
}

.MT1j39Ui {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 376px;
  height: 812px;
  transform: translate(-50%, -50%) scale(var(--content-scale));
  transform-origin: center center;
  pointer-events: none;
}

.eI6phiX2 {
  /* Figma 349:3098: ~36px close at the top-right; above the slider's wing headroom. */
  position: absolute;
  right: 22px;
  top: 26px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  overflow: hidden;
}

/* Hover = glyph recolors to the Gates lavender accent (#aa9cbc), background unchanged. */
.rIOICpaO {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: block;
  opacity: 0;
}

@media (hover: hover) {
  .eI6phiX2:hover .rNnL1r7G {
    opacity: 0;
  }

  .eI6phiX2:hover .rIOICpaO {
    opacity: 1;
  }

  .aq0cxQzD:hover .iIOF73JH {
    border-color: rgba(170, 156, 188, 1);
  }
}

.rNnL1r7G {
  width: 38px;
  height: 38px;
  display: block;
}

.nuUZbTyf {
  /* Figma 349:3096: "BUY BONUS" Lilita One 24 white. */
  position: absolute;
  left: 50%;
  top: 31px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 100%;
  text-align: center;
  color: #ffffff;
  pointer-events: none;
}

.sSBbpAfs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  /* Lilita One не несёт кириллицу — фолбэк как у остальных модалок. */
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

/* Confirm step: the selected card (BuyBonusConfirmCard) at 0.72, its base box from y 153 (ultra
   frame 61..605). A full-width row centres it with flex, not translate(): the bouncy appear
   animates `scale`, which would also scale a translate() offset and slide the card in sideways. */
.zG6SgRJh {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Cards sit at y140; the wrapper starts 83px higher (and ends 22px lower) so the premium/ultra
   frames — whose gems and wings overflow the card box — are not clipped by overflow: hidden.
   That headroom must not swallow taps: the wrapper is pointer-events: none, so a tap above or below
   the cards reaches the backdrop and closes the modal, as in the base. The full-width band at the
   cards' height (.sliderHitArea + the cards) stays hit-testable like the base wrapper, so a tap
   beside a card does not close and a swipe can start there; their pointer events bubble up to the
   wrapper's swipe handlers. */
.aonoE6FW {
  position: absolute;
  left: 0;
  top: 57px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.yyAzK5Yy {
  position: relative;
  width: 100%;
  padding: 83px 0 22px;
  overflow: hidden;
  pointer-events: none;
  /* pan-y keeps vertical scrolling native while horizontal pointermove keeps firing
     for touch-driven pointers — required for the pointer-based swipe. */
  touch-action: pan-y;
  /* A mouse drag must slide the carousel, not select card text. */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.I3HSep1L {
  position: absolute;
  top: 83px;
  right: 0;
  bottom: 22px;
  left: 0;
  pointer-events: auto;
}

.JSMNmZKX {
  position: relative;
  display: flex;
  gap: 16px;
  transform: var(--slider-transform);
}

.yBqIdhUT {
  transition: transform 0.3s ease-out;
}

.scF4Ktk5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 0;
  pointer-events: auto;
}

.MDUQbEpW {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Figma 397:4570/4573: white chevrons drawn from two 17x4.26 bars. */
.iIOF73JH {
  display: block;
  width: 12px;
  height: 12px;
  border-bottom: 4.26px solid rgba(255, 255, 255, 1);
  border-left: 4.26px solid rgba(255, 255, 255, 1);
  border-radius: 1px;
}

.mSw342_f {
  margin-left: 6px;
  transform: rotate(45deg);
}

.dsKF1tph {
  margin-right: 6px;
  transform: rotate(-135deg);
}

.aq0cxQzD {
  cursor: pointer;
  opacity: 1;
}

.Mn262TFZ {
  cursor: default;
  opacity: 0.3;
}

/* Figma 397:4566 "Group 31": 13.86px white dots 18px apart; the current one has a gold ring. */
.tOPA7b78 {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ttjYFuSU {
  width: 13.86px;
  height: 13.86px;
  padding: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: border-width 0.2s ease;
}

.QZPsakpv {
  border: 2.86px solid rgba(195, 149, 77, 1);
}

.suK4of00 {
  border: 0 solid rgba(195, 149, 77, 1);
}

.wkk6_qnh {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The note has its own band below the bet plate, clear of both cards and buttons. */
.zBxFy67f {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 744px;
  height: 56px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 400;
  text-align: center;
  color: rgba(251, 251, 238, 1);
  word-wrap: anywhere;
  pointer-events: none;
}

.fwxSkCPf {
  position: fixed;
  left: 50%;
  top: 0;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}

.dKiCewbt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 376px;
  height: 812px;
  transform: translate(-50%, -50%) scale(var(--content-scale));
  transform-origin: center center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.FjGQg7RW {
  /* Figma 277:2053 / 446:3419: 261x312, #2a292e r18.881 (mobile popup palette). */
  position: relative;
  width: 261px;
  height: 312px;
  background: rgba(42, 41, 46, 1);
  border-radius: 18.881px;
  pointer-events: auto;
  padding: 27px 14px 21px 15px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ORUPq_WZ {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.qJLojdFS {
  width: 44px;
  height: 44px;
  display: block;
}

/* Title Lilita One 19 at y27, chips 111x38 from y63 (column gap 10, row gap 8), START 232x38 at y253. */
.qltAN8X2 {
  margin-bottom: 13px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 23px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
}

.M2y7fwTS {
  display: grid;
  grid-template-columns: repeat(2, 111px);
  grid-gap: 8px 10px;
  gap: 8px 10px;
}

.bLZNZmxn {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 19px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.rZLtHYGB {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 19px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
}

.SkHPRtLG {
  height: 38px;
  background: rgba(63, 62, 69, 1);
  border-radius: 18.881px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.15s ease-out;
}

/* Figma 446:3419: selected round count = lavender #8684b1. */
.U5s0CEhT {
  background: rgba(134, 132, 177, 1);
}

/* Disabled until a round count is picked (base behaviour); enabled = Figma green #2aa11f. */
.lWO71f6c {
  width: 232px;
  height: 38px;
  margin-top: 14px;
  background: rgba(63, 62, 69, 1);
  border-radius: 18.881px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: none;
  padding: 0;
  cursor: default;
}

.lWO71f6c:disabled .rZLtHYGB {
  opacity: 0.55;
}

.HWGgCrJA {
  background: rgba(42, 161, 31, 1);
  cursor: pointer;
  transition: background 0.15s ease-out;
}

/*
 * DEV-503: the evolution chain, opened by a tap on the ladder. Built like the rules modal
 * (DesktopInfoModalHtml: rgba(7, 7, 7, .8) panel on a rgba(1, 1, 1, .85) backdrop, Lilita title).
 */
.emIo4GMn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(1, 1, 1, 0.85);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  touch-action: none;
}

.C6u67hqB {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 860px);
  max-height: 100%;
  padding: 56px 12px 24px;
  box-sizing: border-box;
  background: rgba(7, 7, 7, 0.8);
  border-radius: 18.881px;
  position: relative;
}

.JuM38v_2 {
  margin: 0 40px 20px;
  font-family: var(--font-display);
  font-size: max(18px, min(4.6vw, 30px));
  line-height: 110%;
  font-weight: 400;
  text-align: center;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
}

/* The two rows of the chain image keep its proportions: 2 x 186 / 795 of the width tall, so the
   width is also capped by the viewport height (landscape phones). */
.Xstwa4QE {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, calc((100vh - 150px) * 2.13));
}

.DZmS816H {
  background-image: var(--chain-image);
  background-size: auto 100%;
  background-repeat: no-repeat;
}

/* info_evo.webp is 1542 x 186: row 1 = x 0..747 (T1..T6 and the arrow to the next row), row 2 =
   x 747..1542 (T7..T11 and the scatter). Both rows share one scale: row 1 is 747 / 795 as wide. */
.s0itsM1F {
  width: calc(100% * 747 / 795);
  aspect-ratio: 747 / 186;
  background-position: left top;
}

.sd5BGwkx {
  width: 100%;
  aspect-ratio: 795 / 186;
  background-position: right top;
}

.PCeN13Xq {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 0.12s ease-out, filter 0.12s ease-out;
}

.PCeN13Xq:hover {
  transform: scale(1.12);
  filter: brightness(1.12);
}

.PCeN13Xq:active {
  transform: scale(0.9);
  filter: brightness(0.92);
}

.KXVAx5qh {
  display: block;
  width: 100%;
  height: 100%;
}

.GzdAPBZ6 {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: #0e0e0e;
}

.K61j6hns {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.K61j6hns canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Self-hosted Inter (variable, Latin + Cyrillic) — replaces the former render-blocking Google
   Fonts CDN import. A single variable file covers every weight the HTML modals request
   (400/500/700/800/900) and renders offline with no external CDN dependency. Matches how Rubik is
   self-hosted as a variable face; source: rsms.me/inter (OFL, see ../../shared/assets/fonts/Inter/LICENSE.txt). */
@font-face {
  font-family: 'Inter';
  src: url(/c504db5c06caaf7cdfba.woff2)
    format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Figma's secondary buy-bonus text uses Inter Italic (396:3008 / 396:3334).
   Its real italic outlines are a separate self-hosted face, not a synthetic slant. */
@font-face {
  font-family: 'Inter';
  src: url(/01dcbad1bac635f9c9cd.woff2)
    format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Lilita One';
  src: url(/e970d047065ed950bb8c.ttf)
    format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Condensed';
  src: url(/4ce73d2e027e958716bd.ttf)
    format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  font-family:
    ui-sans-serif,system-ui,Ubuntu,Cantarell,Noto Sans,sans-serif,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  line-height: 1.4;

  /* Display face of the DOM dialogs (Figma: Lilita One). Lilita covers Latin-1 only; the
     browser takes every other glyph from Noto Sans Condensed (Cyrillic, Greek, Devanagari,
     Latin Extended) and then from the platform font. */
  --font-display: 'Lilita One', 'Noto Sans Condensed', sans-serif;
}

/*
 * Vietnamese and Azerbaijani: nearly every word has a letter Lilita lacks (ạ ơ ư ế ộ …, ə), so
 * the words were drawn half in Lilita and half in Noto. Use Noto Sans Condensed for the whole
 * text, as the canvas texts do (shared/lib/fonts/fontUtils.ts). <html lang> comes from
 * shared/lib/i18n/documentLanguage.ts.
 */
:root:lang(vi),
:root:lang(az) {
  --font-display: 'Noto Sans Condensed', sans-serif;
}

/*
 * Korean is written with spaces between words; the default line breaking may split a word
 * between syllables ("저장됩니 / 다."). Break only at spaces, as Korean typesetting does.
 */
:root:lang(ko) #root {
  word-break: keep-all;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/*
 * Убираем дефолтный синий tap-highlight на Android/мобильных браузерах для
 * всех DOM-кнопок и псевдо-кнопок (строки бургер-меню, свитчи и т.п.), чтобы
 * поведение совпадало с canvas-кнопками игры (DEV-38). Универсальный селектор
 * вместо наследования от body: ряд Android WebView / Samsung Internet резолвят
 * подсветку с самого тапнутого элемента и наследование этого нестандартного
 * свойства у них ненадёжно.
 */
* {
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*
 * iOS Safari fix: pin the root to the visible viewport. When the user
 * backgrounds the tab and returns (especially via bfcache), Safari may keep
 * the document slightly scrolled or animate the URL bar in/out, which made
 * the Pixi <canvas> render shifted up. Fixing #root to the viewport keeps
 * it anchored regardless of document scroll state.
 */
#root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*
   * На устройствах с safe-area (iPhone X+/iPad) мобильный стейдж приподнят на
   * env(safe-area-inset-bottom), из-за чего внизу остаётся узкая полоса вне
   * canvas. Красим её в тёмный, чтобы home-indicator зона не была белой
   * (DEV-36). На устройствах без safe-area inset = 0 — полосы нет.
   */
  background-color: #000;
}

/*
 * Arabic / Urdu (data-text-dir is set on <html> from the active language, see
 * shared/lib/i18n/documentLanguage.ts): every DOM text block takes its paragraph
 * direction from its own first strong character instead of the LTR page, so
 * mixed Arabic + Latin/number sentences ("19 لفّة … وFlux Mode.") keep their
 * word order and punctuation side, and amounts like "€1.00" stay LTR. The page
 * `dir` stays ltr on purpose: the DOM layouts around the canvas (card rows,
 * button rows, close buttons) are not mirrored. Rules and limits additionally
 * set dir="rtl" on their own text containers.
 */
:root[data-text-dir='rtl'] #root * {
  unicode-bidi: plaintext;
}

/*
 * ...except inside the containers that set dir="rtl" themselves (rules, game
 * limits): there every block keeps that direction, as dir="rtl" alone would
 * give (the UA isolates [dir] elements). With plaintext a block that starts
 * with a Latin word ("SCATTER علامت", "Pedestal …", "3+ Scatter …" in Urdu)
 * was laid out left-to-right and read in the wrong order.
 */
:root[data-text-dir='rtl'] #root [dir='rtl'],
:root[data-text-dir='rtl'] #root [dir='rtl'] * {
  unicode-bidi: isolate;
}

#root img,
body img {
  -webkit-user-drag: none;
}

button {
  font: inherit;
}