.buttons-e93385a {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  padding: 0 25px 20px;
}

.btn_withdraw-e93385a {
  background: rgba(255, 255, 255, 0.13);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-card);
  height: var(--action-btn-height);
  width: 135px;
  min-width: 103px;
  flex-shrink: 0;
  padding: var(--space-10);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.31px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.btn_deposit-e93385a {
  background: #FFFFFF;
  color: #030303;
  border: none;
  border-radius: var(--radius-card);
  height: var(--action-btn-height);
  flex: 1;
  padding: var(--space-10);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.31px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}


/* The round −/+ buttons shared by every amount field. Geometry only: the row
   around the three controls and the number field itself keep their own classes,
   because the sheets they live in are at different scales. */
.button-1ec7e9f {
    width: 36px;
    height: 36px;
    padding: 0;
    background: #2F2F2F;
    border: none;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    /* The registry glyph inside fills with `currentColor`, so this drives the
       icon colour (and `.button__disabled` dims it along with the button). */
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.button__disabled-1ec7e9f {
    opacity: 0.3;
    cursor: default;
}


.balance-c9149eb {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 3px;
  gap: 0;
  /* min-height, not height: at an enlarged system font size the amount grows
     past its 22px line box, and a fixed height would slice it off (#335). */
  min-height: 34px;
  background: linear-gradient(#141414, #141414) padding-box,
              linear-gradient(-30deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  will-change: transform;
  /* No `overflow: hidden` here (#335). The background is already clipped by
     border-radius; the clip only ever bit into the round icon, turning a
     sub-pixel rounding error at DPR 2/3 into a visible slice off its edge. */
}

.balance-c9149eb:active {
  transform: scale(0.96);
}

.balance__amount-c9149eb {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  gap: 3px;
  min-height: 22px;
  border-radius: var(--radius-round);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: 20px;
  letter-spacing: -0.23px;
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 24px, not 26px: the pill's inner box is exactly 26px tall
   (34 − 2 border − 6 padding), so a 26px circle had zero slack and any
   rounding at a fractional DPR clipped it (#335). 1px of slack per side
   keeps it whole and lets align-items actually centre it against the
   22px amount. Holds an <Icon>, so it carries no text metrics. */
.balance__plus-c9149eb {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: rgba(44, 44, 44, 0.8);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-text);
}

/* Free-bet balance pill (#338) — sits to the left of .balance in the page
   header. Same capsule geometry as .balance so the pair reads as one control
   group, but gold-on-translucent-gold (the free-bet colour already used by
   bet_card's funding badge) and with the gift glyph leading the amount
   instead of a circled action on the right. Not a button: nothing to press. */
.free_bet-c9149eb {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  min-height: 34px;
  padding: 3px var(--space-12) 3px var(--space-10);
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  color: var(--color-gold);
  flex-shrink: 0;
}

.free_bet__amount-c9149eb {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: 20px;
  letter-spacing: -0.23px;
  color: var(--color-gold);
  white-space: nowrap;
}


/* Now a direct child of the profile sheet's flex column (the component renders
   no wrapper), so it carries the same `flex-shrink: 0` every sibling card
   carries: `overflow: hidden` resolves its automatic minimum size to 0, and
   without this it would collapse to nothing the moment the sheet overflows,
   leaving only the column's gap behind (see legal_links.module.css). */
.track_wrap-412c172 {
  position: relative;
  width: 100%;
  height: var(--carousel-height);
  flex-shrink: 0;
  border-radius: var(--radius-glass);
  overflow: hidden;
  background: repeating-conic-gradient(#3D3D3F 0% 25%, var(--color-inset) 0% 50%) 50% / 20px 20px;
}

.track-412c172 {
  display: flex;
  height: 100%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.banner-412c172 {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.banner__img-412c172 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dots-412c172 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  pointer-events: none;
}

.dot-412c172 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #323232;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.dot__active-412c172 {
  background: #D9D9D9;
  transform: scale(1.2);
}


.card-7a1feb2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: #131313;
  border-radius: var(--radius-card);
}

/* Header: status left, time right */
.header-7a1feb2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  width: 100%;
}

.header_left-7a1feb2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.icon__won-7a1feb2 {
  display: inline-flex;
  color: #55FF06;
  flex-shrink: 0;
}

.icon__lost-7a1feb2 {
  display: inline-flex;
  color: var(--color-error);
  flex-shrink: 0;
}

.icon__pending-7a1feb2 {
  display: inline-flex;
  color: #5D5D5D;
  flex-shrink: 0;
}

.status_text-7a1feb2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  letter-spacing: -0.31px;
  color: var(--color-text-title);
}

/* Free-bet (bonus-funded) badge next to the status text. Gold text on a
   translucent gold fill, distinct from the win-green / loss-red status colors. */
.free_bet_badge-7a1feb2 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-round);
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 16px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.time-7a1feb2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 18px;
  color: #878787;
}

/* Separator */
.separator-7a1feb2 {
  width: 100%;
  height: 1px;
  background: #282828;
  margin: 5px 0;
}

/* Body: event details + bar */
.body-7a1feb2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}

.details-7a1feb2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.label-7a1feb2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: 18px;
  letter-spacing: 0.2px;
  color: var(--color-text);
}

.subtitle-7a1feb2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-style: normal;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 18px;
  letter-spacing: -0.08px;
  color: #A8A8A8;
  mix-blend-mode: plus-lighter;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colored bar */
.bar-7a1feb2 {
  width: 4px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.bar__won-7a1feb2 {
  background: #24FF00;
}

.bar__lost-7a1feb2 {
  background: var(--color-error);
}

.bar__pending-7a1feb2 {
  background: #5D5D5D;
}

/* Amount row */
.amount_row-7a1feb2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
}

.amount-7a1feb2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  letter-spacing: -0.31px;
  color: var(--color-text-title);
}

/* A settled win's credited payout — same win-green as .icon__won / .bar__won. */
.amount__won-7a1feb2 {
  color: #55FF06;
}


.card-8a85990 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: #131313;
  border-radius: var(--radius-card);
}

.header-8a85990 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  width: 100%;
}

.header_left-8a85990 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.icon-8a85990 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.status_line-8a85990 {
  height: 17px;
  width: 75px;
  border-radius: var(--radius-sm);
}

.time_line-8a85990 {
  height: 13px;
  width: 45px;
  border-radius: var(--radius-sm);
}

.separator-8a85990 {
  width: 100%;
  height: 1px;
  background: #282828;
  margin: 5px 0;
}

.body-8a85990 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}

.details-8a85990 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.label_line-8a85990 {
  height: 15px;
  width: 90px;
  border-radius: var(--radius-sm);
}

.subtitle_line-8a85990 {
  height: 13px;
  width: 70%;
  border-radius: var(--radius-sm);
}

.bar-8a85990 {
  width: 4px;
  height: 36px;
  border-radius: 10px;
}

.amount_line-8a85990 {
  height: 17px;
  width: 55px;
  border-radius: var(--radius-sm);
  margin: 6px 0;
}

.skel-8a85990 {
  background: linear-gradient(
    105deg,
    #1c1c1c 25%,
    #2a2a2a 50%,
    #1c1c1c 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}


/* Scrim, sheet surface and drag handle come from bottom_sheet.module.css. */

/* ── Inner layout — 3 sections with 35px gap ───────────────────────── */
.sheet_inner-54c0f2f {
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: center;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 1 — drag handle + balance header + title/badge
═══════════════════════════════════════════════════════════════════ */
.section_top-54c0f2f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Header row: spacer + balance pill */
.header-54c0f2f {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.header_badge-54c0f2f {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 25px;
  flex-shrink: 0;
}

.header_balance-54c0f2f {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 16px;
  flex-shrink: 0;
  align-self: stretch;
}

/* Title */
.title_section-54c0f2f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 25px 10px;
  width: 100%;
}

.title-54c0f2f {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  letter-spacing: -0.5px;
  color: var(--color-text);
  font-variation-settings: 'wdth' 100;
}

.outcome_badge-54c0f2f {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pink);
  color: var(--color-text);
  padding: 5px 10px;
  border-radius: var(--radius-round);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.43px;
  font-variation-settings: 'wdth' 100;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 2 — amount selector + hint
═══════════════════════════════════════════════════════════════════ */
.section_amount-54c0f2f {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 0 25px;
  width: 100%;
}

.amount_selector-54c0f2f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.amount_display-54c0f2f::-webkit-inner-spin-button,
.amount_display-54c0f2f::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.amount_display-54c0f2f {
  flex: 1;
  min-width: 0;
  height: 60px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-amount);
  line-height: 60px;
  color: var(--color-text);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  caret-color: var(--color-text);
}

/* Tone and centring come from hint.module.css; this is the type scale. */
.hint-54c0f2f {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 20px;
  width: 100%;
  font-variation-settings: 'wdth' 100;
}

/* The free-bet toggle row lives in free_bet_toggle.module.css — shared with
   the fortune-wheel and coin-flip sheets. */

/* ═══════════════════════════════════════════════════════════════════
   SECTION 3 — quick-add chips + bet button
═══════════════════════════════════════════════════════════════════ */
.section_controls-54c0f2f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* On top of the shared row: a fixed-height strip spanning the sheet. */
.chips-54c0f2f {
  height: 52px;
  width: 100%;
  box-sizing: border-box;
}

/* On top of the shared chip: this row is a fixed-height strip, so the chips
   must not shrink or wrap inside it. */
.chip-54c0f2f {
  white-space: nowrap;
  flex: none;
  flex-grow: 0;
}

.action_btn_wrapper-54c0f2f {
  padding: 10px 25px 25px;
  width: 100%;
  box-sizing: border-box;
}

.action_btn-54c0f2f {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--space-10);
  height: 52px;
  border: none;
  border-radius: var(--radius-card);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 21px;
  letter-spacing: -0.31px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  width: 100%;
}

.action_btn__bet-54c0f2f {
  background: var(--color-accent);
  color: var(--color-text);
}

.action_btn__deposit-54c0f2f {
  background: #ffffff;
  color: #000000;
}

.action_btn__disabled-54c0f2f {
  opacity: 0.5;
  cursor: default;
}

/* Progress indicator shown inside the button while the bet is in flight. */
.btn_spinner-54c0f2f {
  width: 18px;
  height: 18px;
  margin-right: var(--space-8);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-text);
  border-radius: var(--radius-circle);
  animation: betBtnSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes betBtnSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.bottom_nav__glow-f652f76 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: radial-gradient(
    ellipse 120% 80% at 50% 120%,
    rgba(3, 3, 3, 0.9) 0%,
    rgba(3, 3, 3, 0.6) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 19;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Both the bar and its glow ride out through the bottom edge while a field has
   the keyboard up (#376), so nothing of the tab bar sits over the keyboard. */
.bottom_nav__glow__lowered-f652f76 {
  transform: translateY(100%);
}

.bottom_nav-f652f76 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  padding: 8px 25px max(25px, var(--safe-bottom));
  background: transparent;
  z-index: 20;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom_nav__lowered-f652f76 {
  transform: translateY(100%);
}

.bottom_nav__bar-f652f76 {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--space-4);
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 30px;
  gap: 0;
}

/* ── Floating glass pill ────────────────────────────────────────────────
   Positioned with `left` + `right` (not width) so each edge can have
   its own transition timing → liquid stretch effect.

   Moving RIGHT: right edge leads (fast/no-delay), left edge trails
   Moving LEFT:  left edge leads (fast/no-delay), right edge trails   */

.bottom_nav__indicator-f652f76 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 30px;
  pointer-events: none;
  z-index: 0;
  will-change: left, right;
  background: #343334;
}

.bottom_nav__indicator__right-f652f76 {
  transition:
    left 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    right 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom_nav__indicator__left-f652f76 {
  transition:
    right 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    left 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Tab items ──────────────────────────────────────────────────────── */
.bottom_nav__item-f652f76 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex: 1 0 0;
  min-width: 0;
  padding: 7px 6px;
  background: none;
  border: none;
  color: #6E6E6E;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.1px;
  min-height: 50px;
  cursor: pointer;
  border-radius: 30px;
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, transform 0.12s;
}

.bottom_nav__item-f652f76:active {
  transform: scale(0.94);
}

.bottom_nav__item__active-f652f76 {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

.bottom_nav__item__has_soon-f652f76 {
  cursor: not-allowed;
  opacity: 0.85;
}

.bottom_nav__item__has_soon-f652f76:active {
  transform: none;
}

.bottom_nav__icon-f652f76 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 0;
}

.bottom_nav__label-f652f76 {
  line-height: 12px;
  white-space: nowrap;
  mix-blend-mode: plus-lighter;
}

.bottom_nav__soon-f652f76 {
  position: absolute;
  top: 4px;
  left: calc(50% + 13px);
  font-size: 8px;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: -0.15px;
  white-space: nowrap;
  line-height: 12px;
  mix-blend-mode: plus-lighter;
}


/* Shared bottom-sheet shell: scrim, sheet surface, drag handle.
   Only the declarations that every sheet agrees on live here. The ones that
   legitimately differ (surface colour, transition curve, inner layout, bottom
   padding, max-height) are either read from a custom property with the majority
   value as the fallback, or simply not declared here at all — a sheet supplies
   them through its own `sheet_class` / `backdrop_class`. Reading rather than
   declaring keeps the override independent of the order stylance happens to
   concatenate the modules in. */

.backdrop-4f1cbaa {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    /* Override with `--bs-backdrop-transition` on `backdrop_class`. */
    transition: var(--bs-backdrop-transition, opacity 0.3s ease);
}

.backdrop__visible-4f1cbaa {
    opacity: 1;
    pointer-events: auto;
}

.sheet-4f1cbaa {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal);
    /* Override with `--bs-sheet-bg` / `--bs-sheet-transition` on `sheet_class`. */
    background: var(--bs-sheet-bg, #0E0E10);
    border-top: 1px solid var(--color-neutral-lose);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: var(--bs-sheet-transition, transform 0.3s ease-out);
}

.sheet__visible-4f1cbaa {
    transform: translateY(0);
}

/* Drag-to-dismiss sheets swallow browser panning so the gesture is ours. */
.sheet__draggable-4f1cbaa {
    touch-action: none;
}

.drag_handle-4f1cbaa {
    /* Explicit, because the handle is nested in header groups that align their
       items to the start, where a flex item would otherwise shrink to the bar. */
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--space-10) 0;
}

/* Only sheets that actually respond to a drag advertise it with the cursor. */
.drag_handle__grab-4f1cbaa {
    cursor: grab;
}

.drag_handle__bar-4f1cbaa {
    width: 60px;
    height: 5px;
    background: #333333;
    border-radius: 2.5px;
}


/* ── Backdrop & sheet ──────────────────────────────────────────────────
   Shell comes from bottom_sheet.module.css. What stays here: the slightly
   quicker scrim fade, the black surface, the capped height that makes the
   body scroll, and the bottom inset. */
.backdrop-7e306c1 {
  --bs-backdrop-transition: opacity 0.25s ease;
}

.sheet-7e306c1 {
  --bs-sheet-bg: #000;
  max-height: 92vh;
  padding: 0 0 max(14px, var(--safe-bottom)) 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  color: var(--color-text);
}

.title-7e306c1 {
  text-align: left;
  padding: 10px 25px;
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  line-height: 22px;
  letter-spacing: -0.5px;
  color: var(--color-text);
  position: relative; z-index: 2;
}

.sheet_content-7e306c1 {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.sheet_content-7e306c1::-webkit-scrollbar { display: none; }
.sheet_footer-7e306c1 {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 12px;
}

/* ── History strip (top, expandable) ────────────────────────────── */
.history_strip-7e306c1 {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 25px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  max-height: 36px;
  transition: max-height 0.3s ease;
  position: relative; z-index: 2;
}
.history_strip__expanded-7e306c1 { max-height: 200px; flex-wrap: wrap; }
.history_items-7e306c1 { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: nowrap; overflow: hidden; }
.history_strip__expanded-7e306c1 .history_items-7e306c1 { flex-wrap: wrap; }
.h_coin-7e306c1 {
  width: 20px; height: 20px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; font-style: italic;
  animation: slideInRight 200ms ease-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.h_coin__gold-7e306c1 { background: radial-gradient(circle at 35% 30%, #fff8c0, var(--color-gold) 50%, #8a5f00); color: #5b3d00; }
.h_coin__silver-7e306c1 { background: radial-gradient(circle at 35% 30%, #ffffff, #e0e0e0 50%, #555); color: #3d3d3d; }
.h_sep-7e306c1 { width: 4px; height: 4px; border-radius: 50%; background: #333333; flex-shrink: 0; }
/* Hide the trailing separator after the last coin (each coin renders a sep). */
.history_items-7e306c1 .h_sep-7e306c1:last-child { display: none; }
.h_empty-7e306c1 {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: 4px 0;
}
.chev_btn-7e306c1 {
  flex-shrink: 0; background: none; border: none;
  width: 24px; height: 24px; padding: 0;
  color: var(--color-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.chev_btn__expanded-7e306c1 { transform: rotate(180deg); }
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } }

/* ── Coin stage ─────────────────────────────────────────────────── */
.coin_stage-7e306c1 {
  display: flex; justify-content: center; align-items: center;
  margin: 16px 0 24px 0;
  position: relative;
  perspective: 800px;
  z-index: 1;
}
.ambient_glow-7e306c1 {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(74,222,128,0.10) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  transition: background 0.5s ease;
}
.ambient_glow__win-7e306c1 { background: radial-gradient(circle, rgba(74,222,128,0.32) 0%, transparent 65%); }
.ambient_glow__loss-7e306c1 { background: radial-gradient(circle, rgba(239,68,68,0.32) 0%, transparent 65%); }

.coin_wrap-7e306c1 {
  position: relative; width: 150px; height: 150px; z-index: 1;
  animation: coinFloat 3s ease-in-out infinite;
}
@keyframes coinFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.coin-7e306c1 {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; will-change: transform;
}
.coin__landed_heads-7e306c1 { transform: rotateY(0deg); }
.coin__landed_tails-7e306c1 { transform: rotateY(180deg); }
.coin__flipping_heads-7e306c1 { animation: coinFlipHeads 0.9s cubic-bezier(0.12, 0, 0.22, 1) forwards; }
.coin__flipping_tails-7e306c1 { animation: coinFlipTails 0.9s cubic-bezier(0.12, 0, 0.22, 1) forwards; }
@keyframes coinFlipHeads {
  0%   { transform: rotateY(0deg) scale(1); }
  20%  { transform: rotateY(360deg) scale(1.08); }
  50%  { transform: rotateY(720deg) scale(1.18); }
  85%  { transform: rotateY(1000deg) scale(1.06); }
  100% { transform: rotateY(1080deg) scale(1); }
}
@keyframes coinFlipTails {
  0%   { transform: rotateY(0deg) scale(1); }
  20%  { transform: rotateY(360deg) scale(1.08); }
  50%  { transform: rotateY(720deg) scale(1.18); }
  85%  { transform: rotateY(1180deg) scale(1.06); }
  100% { transform: rotateY(1260deg) scale(1); }
}

.face-7e306c1 {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.face__heads-7e306c1 { transform: translateZ(3px); }
.face__tails-7e306c1 { transform: rotateY(180deg) translateZ(3px); }
.face-7e306c1 img {
  width: 100%; height: 100%;
  object-fit: contain; aspect-ratio: 1 / 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

.halo-7e306c1 {
  position: absolute; inset: -12px;
  border-radius: 50%; border: 2px solid var(--color-success);
  pointer-events: none; opacity: 0;
}
.halo__show-7e306c1 { animation: coinHalo 0.7s ease-out forwards; }
@keyframes coinHalo {
  0% { transform: scale(0.8); opacity: 0; box-shadow: 0 0 0 rgba(74,222,128,0); }
  15% { transform: scale(1); opacity: 1; box-shadow: 0 0 18px rgba(74,222,128,0.5); }
  50% { opacity: 0.8; box-shadow: 0 0 14px rgba(74,222,128,0.3); }
  100% { transform: scale(1.1); opacity: 0; box-shadow: 0 0 0 rgba(74,222,128,0); }
}

.sparkle-7e306c1 {
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #fff8c0 0%, var(--color-gold) 60%, transparent 100%);
  box-shadow: 0 0 8px rgba(255,215,0,0.8);
  pointer-events: none; will-change: transform, opacity; opacity: 0;
}
.sparkle__fire-7e306c1 { animation: sparkleExpand 0.8s ease-out forwards; }
@keyframes sparkleExpand {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60% { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); opacity: 0; }
}

/* ── Info-row (toggle off: info-block; toggle on: ladder) + toggle 75/25 ─ */
/* Wrapper is the tooltip's positioning context: `.info_row` clips its content
   (overflow:hidden for the rounded corners), so the tooltip must live outside
   that clip to render above the row (bug #10). */
.toggle_wrap-7e306c1 {
  position: relative;
  margin: 0 16px;
  z-index: 2;
}
.info_row-7e306c1 {
  display: flex; align-items: stretch; gap: 0;
  position: relative; z-index: 2;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}
.info_block-7e306c1 { flex: 0 0 75%; display: flex; align-items: center; padding: 12px 16px; }
.info_col-7e306c1 { display: flex; flex-direction: column; gap: 2px; }
.info_col__left-7e306c1 { flex: 0 0 60%; }
.info_col__right-7e306c1 { flex: 0 0 40%; text-align: right; }
.info_col_label-7e306c1 {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  line-height: 1.3;
  letter-spacing: -0.1px;
}
.info_col_value-7e306c1 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  font-feature-settings: 'tnum';
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.info_col_value__green-7e306c1 { color: var(--color-success); }
.info_col_value__white-7e306c1 { color: var(--color-text); }

.ladder_block-7e306c1 {
  flex: 0 0 75%;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; min-height: 60px; padding: 8px 12px;
}
.ladder_block-7e306c1::-webkit-scrollbar { display: none; }
.pill-7e306c1 {
  flex: 0 0 auto;
  width: 50px; min-height: 52px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  transition: border-color 300ms ease, background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
  will-change: transform, box-shadow;
}
.pill_icon-7e306c1 {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; font-style: italic;
  background: #333333; color: var(--color-text-muted);
}
.pill_mlt-7e306c1 { font-size: 10px; font-weight: 590; color: var(--color-text); font-feature-settings: 'tnum'; }
.pill__done-7e306c1 {
  background: linear-gradient(160deg, rgba(74,222,128,0.18) 0%, rgba(74,222,128,0.06) 100%);
  border-color: rgba(74,222,128,0.55);
}
.pill__done-7e306c1 .pill_icon-7e306c1 { background: radial-gradient(circle at 35% 30%, var(--color-success), #166534); color: #04220c; }
.pill__done-7e306c1 .pill_mlt-7e306c1 { color: var(--color-success); font-weight: 700; }
.pill__current-7e306c1 {
  background: rgba(255,255,255,0.04);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 14px rgba(255,255,255,0.18), 0 0 4px rgba(255,255,255,0.4);
  transform: scale(1.04);
}
.pill__current-7e306c1 .pill_icon-7e306c1 { background: radial-gradient(circle at 35% 30%, #ffffff, #777); color: #2a2a2a; }
.pill__current-7e306c1 .pill_mlt-7e306c1 { color: var(--color-text); }
.pill__locked-7e306c1 { opacity: 0.55; }
.pill__just_won-7e306c1 { animation: pillJustWon 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pillJustWon {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(74,222,128,0); }
  35% { transform: scale(1.18); box-shadow: 0 0 22px rgba(74,222,128,0.65), 0 0 4px rgba(74,222,128,0.8); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(74,222,128,0); }
}

/* ── Toggle cell (Серия + ?) ────────────────────────────────────── */
.toggle_cell-7e306c1 {
  flex: 0 0 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 12px;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0; position: relative;
}
.toggle_head-7e306c1 { display: flex; align-items: center; gap: 5px; }
/* Padding wrapper for the shared free-bet toggle (free_bet_toggle.module.css),
   which brings its own row layout. Aligns with `.toggle_wrap` above. */
.free_bet_row-7e306c1 {
  display: flex;
  margin: 0 var(--space-16);
  position: relative; z-index: 2;
}
.toggle_lbl-7e306c1 {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: -0.1px;
}
.help_q-7e306c1 {
  width: 14px; height: 14px; border-radius: 50%;
  background: #333333;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--color-text-muted); cursor: pointer; line-height: 1;
}
.switch-7e306c1 {
  width: 44px; height: 26px; border-radius: 13px;
  background: #333333; position: relative;
  transition: background 0.2s;
  cursor: pointer; flex-shrink: 0;
}
.switch__on-7e306c1 { background: var(--color-success); }
.switch-7e306c1::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: left 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.switch__on-7e306c1::after { left: 20px; }

.tooltip-7e306c1 {
  position: absolute; right: 0; bottom: calc(100% + 10px); top: auto;
  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: 10px 14px;
  border-radius: 12px;
  width: 220px; line-height: 1.45; z-index: 5;
  animation: tipIn 200ms ease-out;
}
.tooltip-7e306c1::after {
  content: ''; position: absolute; bottom: -6px; right: 30px;
  width: 10px; height: 10px;
  background: rgba(20,20,20,0.95);
  transform: rotate(45deg);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@keyframes tipIn { 0%{opacity:0; transform:translateY(4px);} 100%{opacity:1; transform:translateY(0);} }

/* ── Amount block ────────────────────────────────────────────────── */
.amount_block-7e306c1 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 0 16px;
  transition: opacity 0.2s; position: relative; z-index: 2;
}
.amount_row-7e306c1 { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 12px; }
.ctrl_col-7e306c1 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pm_btn-7e306c1 {
  width: 36px; height: 36px;
  border-radius: var(--radius-round);
  background: #2F2F2F; border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent; line-height: 1;
}
.pm_btn-7e306c1:active:not(:disabled) { background: #444444; }
.pm_btn-7e306c1:disabled { opacity: 0.3; cursor: not-allowed; }
.min_max-7e306c1 { display: none; }
.min_max__disabled-7e306c1 { display: none; }
.amount_val-7e306c1 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: 24px;
  letter-spacing: -0.3px;
  font-feature-settings: 'tnum';
  color: var(--color-text);
}
.amount_input-7e306c1 {
  field-sizing: content;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: center;
  caret-color: var(--color-text);
  cursor: text;
  min-width: 1ch;
  font-feature-settings: 'tnum';
  -moz-appearance: textfield;
  -webkit-tap-highlight-color: transparent;
}
.amount_input-7e306c1::-webkit-outer-spin-button,
.amount_input-7e306c1::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount_input-7e306c1:disabled { color: inherit; opacity: 1; }

.half_double-7e306c1 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 16px;
  position: relative; z-index: 2;
}
.half_double_btn-7e306c1 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  padding: 12px 0;
  text-align: center;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  font-feature-settings: 'tnum';
  -webkit-tap-highlight-color: transparent;
}
.half_double_btn-7e306c1:hover:not(:disabled) { background: rgba(40,40,40,0.9); }
.half_double_btn-7e306c1:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Side buttons (sticky footer) ─────────────────────────────── */
.side_buttons-7e306c1 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 16px;
  position: relative; z-index: 2;
}
.side_btn-7e306c1 {
  border-radius: var(--radius-card);
  min-height: 48px; height: 48px;
  padding: var(--space-10);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: -0.31px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #000;
}
.side_btn__heads-7e306c1 { background: linear-gradient(180deg, var(--color-gold) 0%, #E5A100 100%); }
.side_btn__tails-7e306c1 { background: linear-gradient(180deg, #E5E7EB 0%, #C8CCD4 100%); }
.side_btn-7e306c1:active:not(:disabled) { transform: scale(0.98); }
.side_btn-7e306c1:disabled { opacity: 0.7; cursor: not-allowed; }
.btn_text-7e306c1 { transition: opacity 0.2s; }
.btn_spinner_wrap-7e306c1 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.side_btn__loading-7e306c1 .btn_text-7e306c1 { opacity: 0; }
.side_btn__loading-7e306c1 .btn_spinner_wrap-7e306c1 { opacity: 1; }
.btn_spinner-7e306c1 {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.7);
  border-radius: 50%;
  animation: buttonSpin 0.8s linear infinite;
}
@keyframes buttonSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Withdraw button ───────────────────────────────────────────── */
.withdraw_btn-7e306c1 {
  width: calc(100% - 32px);
  height: 48px;
  padding: var(--space-10);
  margin: 0 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid #22C55E;
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: -0.31px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  border-radius: var(--radius-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.12);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.withdraw_btn-7e306c1:hover {
  background: rgba(34,197,94,0.15);
  box-shadow: 0 0 25px rgba(34,197,94,0.20);
}
.withdraw_amount-7e306c1 {
  font-weight: var(--fw-bold);
  font-feature-settings: 'tnum';
  margin-left: 4px;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.toast-7e306c1 {
  position: absolute; top: 6px; left: 16px; right: 16px;
  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; z-index: 50;
  animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast__leaving-7e306c1 { animation: toastSlideOut 0.3s ease-in forwards; }
@keyframes toastSlideIn { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes toastSlideOut { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
.toast_lhs-7e306c1 { display: flex; flex-direction: column; gap: 2px; }
.toast_title-7e306c1 { font-weight: 700; font-size: 13px; color: var(--color-text); }
.toast_sub-7e306c1 { font-size: 11px; color: var(--color-success); font-weight: 590; }
.toast_badge-7e306c1 {
  background: var(--color-success);
  color: #06150A;
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  padding: 5px 12px;
  border-radius: var(--radius-card);
  font-feature-settings: 'tnum';
}

/* ── Hint area + shake ─────────────────────────────────────────── */
.hint_row-7e306c1 {
  min-height: 16px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-align: center;
  margin: 4px 16px 0 16px;
  letter-spacing: -0.1px;
}
.hint_row__error-7e306c1 { color: #EF4444; }

.shake-7e306c1 { animation: shakeLoss 0.4s ease-out; }
@keyframes shakeLoss { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }



.overlay-dff8187 {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-surface, #0d0d0f);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-24);
  gap: var(--space-16);
}
.title-dff8187 { font-size: 24px; font-weight: 700; }
.intro-dff8187 { line-height: 1.5; opacity: 0.85; }
.age_row-dff8187 { display: flex; align-items: flex-start; gap: 10px; }
.links-dff8187 { display: flex; gap: 16px; }
.link-dff8187 {
  background: none; border: none;
  color: var(--color-accent, #7c5cff);
  text-decoration: underline; cursor: pointer; padding: 0; font-size: 14px;
}
.accept_btn-dff8187 {
  margin-top: 8px; padding: 14px; border: none; border-radius: 12px;
  background: var(--color-accent, #7c5cff); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.accept_btn__disabled-dff8187 { opacity: 0.5; pointer-events: none; }


/* Shell (scrim, surface, drag handle) comes from bottom_sheet.module.css.
   What is left here is this sheet's own layout: three sections 35px apart and
   the bottom inset. */
.sheet-fc90366 {
    align-items: stretch;
    gap: 35px;
    padding-bottom: 25px;
}

/* Wraps drag handle + title so gap:35px only separates them from amount/container */
.sheet_top-fc90366 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.header-fc90366 {
    padding: 10px 25px;
}

.title-fc90366 {
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
    line-height: 22px;
    letter-spacing: -0.5px;
    color: var(--color-text);
}

.amount_section-fc90366 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 25px;
    gap: var(--space-4);
}

.amount_row-fc90366 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.amount_display-fc90366 {
    font-size: var(--fs-amount);
    font-weight: var(--fw-semibold);
    /* Fixed line box: a shrinking font must not change the input's height
       (otherwise the whole sheet shifts from the top) */
    height: 60px;
    line-height: 60px;
    color: var(--color-text);
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;
    flex: 1;
    caret-color: var(--color-text);
    -moz-appearance: textfield;
}

.amount_display-fc90366::-webkit-outer-spin-button,
.amount_display-fc90366::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount_display__disabled-fc90366 {
    opacity: 0.3;
}

/* Tone and centring come from hint.module.css; this is the type scale. */
.hint-fc90366 {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 20px;
}

.container-fc90366 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.methods-fc90366 {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    gap: var(--space-4);
    /* Four tabs no longer fit a 390px viewport — scroll horizontally like the
       design (Figma 689:3585, edge-fade overlay implies overflow). Auto margins
       keep the row centered while it still fits. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.methods-fc90366::-webkit-scrollbar {
    display: none;
}

.methods-fc90366 > :first-child {
    margin-left: auto;
}

.methods-fc90366 > :last-child {
    margin-right: auto;
}

.method_tab-fc90366 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    gap: var(--space-4);
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-card);
    border: 0.5px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

.method_tab__active-fc90366 {
    background: #414141;
    border-color: rgba(255, 255, 255, 0.10);
}

.method_tab__inactive-fc90366 {
    background: var(--color-surface);
    cursor: not-allowed;
}

.method_icon-fc90366 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

.method_label-fc90366 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: 20px;
    letter-spacing: -0.23px;
    text-align: center;
    display: flex;
    align-items: center;
    mix-blend-mode: plus-lighter;
    flex: none;
    /* Multi-word labels ("SBP (₽)") must not wrap — wrapping collapsed the
       tab to 82px instead of the design's 108px */
    white-space: nowrap;
}

.method_label__active-fc90366 {
    color: var(--color-text);
}

.method_label__inactive-fc90366 {
    color: #929294;
}

.method_label__sbp-fc90366 {
    color: #a8a8aa;
}

.method_icon__inactive-fc90366 {
    opacity: 0.5;
}


.soon_badge-fc90366 {
    /* Inside the pill's top-right corner (Figma 689:3617), not hanging outside */
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 9px;
    font-weight: var(--fw-medium);
    line-height: 13.18px;
    letter-spacing: -0.15px;
    color: #808081;
    white-space: nowrap;
}

.button_container-fc90366 {
    padding: 10px 25px 0;
}

.action_btn-fc90366 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: var(--space-10);
    border: none;
    border-radius: var(--radius-card);
    background: #FFFFFF;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 21px;
    letter-spacing: -0.31px;
    text-align: center;
    color: #030303;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}

.action_btn__disabled-fc90366 {
    opacity: 0.5;
    cursor: default;
}

/* TON Connect "Connect wallet" variant of the action button (Figma 689:3583) */
.action_btn__ton-fc90366 {
    background: #008CFF;
    color: var(--color-text);
    gap: var(--space-10);
}

/* Wallet status pill row above the method tabs (Figma 689:3544 / 689:3675) */
.wallet_pill_row-fc90366 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
}

.wallet_pill-fc90366 {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border: none;
    border-radius: var(--radius-card);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wallet_pill__error-fc90366 {
    background: #482221;
}

.wallet_pill__connected-fc90366 {
    background: #242424;
}

.wallet_pill_label-fc90366 {
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    line-height: 20px;
    letter-spacing: -0.23px;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet_pill_label__error-fc90366 {
    color: #DF3535;
}

.wallet_pill_label__connected-fc90366 {
    color: #777777;
}

.wallet_pill_balance-fc90366 {
    color: var(--color-text);
}

.wallet_pill_icon-fc90366 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* "Disconnect wallet?" confirmation popup */
.confirm_backdrop-fc90366 {
    position: fixed;
    inset: 0;
    z-index: 9002;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.confirm_card-fc90366 {
    width: 100%;
    max-width: 330px;
    background: #0E0E10;
    border: 1px solid #333333;
    border-radius: var(--radius-card);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.confirm_title-fc90366 {
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    line-height: 22px;
    letter-spacing: -0.31px;
    color: var(--color-text);
    text-align: center;
}

.confirm_subtitle-fc90366 {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 18px;
    color: #777777;
    text-align: center;
}

.confirm_actions-fc90366 {
    display: flex;
    gap: var(--space-8);
    width: 100%;
    margin-top: 14px;
}

.confirm_btn-fc90366 {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: var(--radius-card);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.23px;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s;
}

.confirm_btn-fc90366:active {
    transform: scale(0.97);
}

.confirm_btn__neutral-fc90366 {
    background: #2F2F2F;
}

.confirm_btn__danger-fc90366 {
    background: #DF3535;
}


/* Shared empty state — Market and My Bets render the same block (issue #322).
   Fit behaviour is split between this file and `.app-content:has(.empty-state)`
   in `global.css`: the page box is exactly the visible area above the floating
   nav, and this block claims whatever is left under the sticky header, so the
   screen never scrolls or rubber-bands (issue #320). */
.empty_state-99bab6e {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  /* Bottom padding is the larger one so the composition sits a little above the
     optical centre of the free space instead of being sunk by it (issue #321). */
  padding: var(--space-16) var(--space-20) var(--space-32);
  width: 100%;
  /* Inert while the page scrolls (block parent). In fit mode the ancestors are
     flex columns and this fills — and, if the screen is short, gives back — the
     leftover height. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Mascot. Scales continuously with the viewport height instead of the single
   `max-height: 700px` step, and is the only part of the composition allowed to
   shrink — the copy and the CTAs keep their size (issue #321). */
.empty_state__icon-99bab6e {
  position: relative;
  height: clamp(72px, 12dvh, 104px);
  aspect-ratio: 182 / 120;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  z-index: 1;
}

/* The glow is a pseudo-element rather than a node: the Lottie runtime owns the
   children of `.empty_state__icon` and drops them when the animation is
   destroyed. Anchored to the mascot, so it follows it as the mascot resizes. */
.empty_state__icon-99bab6e::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Sized off the mascot (was a fixed 260x160 behind a fixed 182x120 sticker),
     so it scales with it instead of hanging around a shrunken one. */
  width: 143%;
  height: 133%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 126, 6, 0.22) 0%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}

.empty_state__fallback-99bab6e {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty_state__content-99bab6e {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 320px;
  flex: 0 0 auto;
}

.empty_state__title-99bab6e {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  line-height: 28px;
  color: var(--color-text);
  text-align: center;
  margin: 0;
  letter-spacing: -0.3px;
}

.empty_state__subtitle-99bab6e {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 20px;
  color: #929292;
  text-align: center;
  margin: 0;
}

.empty_state__actions-99bab6e {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
  margin-top: var(--space-8);
  flex-shrink: 0;
}

.empty_state__btn_primary-99bab6e {
  width: 100%;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF8C00 0%, #E05A00 100%);
  border: none;
  border-radius: 23px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  letter-spacing: -0.2px;
  color: var(--color-text);
  cursor: pointer;
}

.empty_state__btn_secondary-99bab6e {
  width: 100%;
  height: 42px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 21px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.70);
  cursor: pointer;
}


.event_card-319465d {
  position: relative;
  padding-top: 10px;
  cursor: pointer;
}

.event_card__countdown-319465d {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  background: #2D2D2D;
  border: 0.6px solid #1A1A1A;
  color: #A8A8A8;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: 3px 6px;
  border-radius: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
  margin-top: 0;
}

.event_card__countdown_active-319465d {
  color: var(--color-text);
}

.event_card__body-319465d {
  background: #131313;
  border-radius: var(--radius-glass);
  padding: var(--space-14);
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  isolation: isolate;
}

.event_card__logo_placeholder-319465d {
  background: #2D2D2D;
}

.event_card__header-319465d {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

.event_card__header_main-319465d {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  flex: 1;
  min-width: 0;
}

.event_card__logo-319465d {
  position: relative;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}

.event_card__logo_img-319465d {
  width: 45px;
  height: 45px;
  border-radius: 50px;
  object-fit: cover;
  display: block;
}

.event_card__live_badge-319465d {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: #EB0200;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  line-height: 12px;
  white-space: nowrap;
  /* Flex, not an inline box, so the pill's height is the 12px line box plus
     padding for both badges alike — and so the HOT flame (#356) can be laid
     out beside the label without baseline alignment growing the pill and
     sliding it off `bottom: -2px`. Both pills measure 14px in the browser. */
  display: flex;
  align-items: center;
}

/* HOT (about to start, still bettable): amber, to read distinctly from the red
   in-progress LIVE badge. Declared after `live_badge` so, when both classes are
   applied, this background wins (equal specificity, later rule). */
.event_card__hot_badge-319465d {
  background: #F59E0B;
  /* Only HOT carries a glyph, so only it needs the gap. */
  gap: var(--space-2);
}

.event_card__info-319465d {
  flex: 1;
  /* Without this a flex item refuses to shrink below its content, so a long
     creator name pushed the row wider and slid under the share button (which is
     flex-shrink: 0). Shrinking is what lets the ellipsis below actually apply. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.event_card__source-319465d {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.6);
  line-height: 16px;
  /* Creator names are arbitrary user data — truncate rather than overlap. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Official (admin-created) events only (#240): lay the "WARP Official" label
   and the verified badge out as a row. The badge inherits the row's colour
   via currentColor. */
.event_card__source_official-319465d {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* The label truncates; the verified badge never does. */
.event_card__source_official-319465d > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event_card__source_official-319465d > svg {
  flex-shrink: 0;
}

.event_card__question-319465d {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: 21px;
}

.event_card__starts_at-319465d {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.5);
  line-height: 16px;
}

.event_card__share-319465d {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.event_card__bets-319465d {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.event_card__bets_row-319465d {
  display: flex;
  gap: var(--space-8);
}

.bet_btn-319465d {
  flex: 1;
  padding: var(--space-10);
  border: none;
  border-radius: var(--radius-card);
  height: 42px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.23px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 20px;
}

.bet_btn-319465d:active {
  opacity: 0.75;
  transform: scale(0.98);
}

.bet_btn__win-319465d {
  background: #18202F;
  color: var(--color-blue);
}

.bet_btn__lose-319465d {
  background: #3B152D;
  color: var(--color-pink);
}

.event_card__volume-319465d {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: -0.15px;
  color: #A5A5A5;
  line-height: 19px;
  /* The value is rendered one character per span so a live update swaps only
     the digits that changed (#326). Tabular figures keep every digit the same
     width, so neighbours cannot shift while one of them animates. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.event_card__digit-319465d {
  display: inline-block;
  /* A span holding just a space would otherwise collapse to nothing. */
  white-space: pre;
}

/* One animation under two names, alternated by the update counter: re-applying
   the class a character already carries would not restart it. */
@keyframes volumeDigitSwapA {
  0% { transform: translateY(0.5em); opacity: 0; }
  60% { transform: translateY(-0.06em); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes volumeDigitSwapB {
  0% { transform: translateY(0.5em); opacity: 0; }
  60% { transform: translateY(-0.06em); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.event_card__digit_swap_a-319465d {
  animation: volumeDigitSwapA var(--dur-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

.event_card__digit_swap_b-319465d {
  animation: volumeDigitSwapB var(--dur-slow) cubic-bezier(0.32, 0.72, 0, 1);
}

/* --dur-slow already collapses to 0ms here, but a number sliding under a
   zero-length animation still counts as motion the user asked not to see. */
@media (prefers-reduced-motion: reduce) {
  .event_card__digit_swap_a-319465d,
  .event_card__digit_swap_b-319465d {
    animation: none;
  }
}


.card-fcba3d3 {
  position: relative;
  padding-top: 10px;
}

.countdown-fcba3d3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  width: 90px;
  border-radius: 22px;
  z-index: 1;
}

.body-fcba3d3 {
  background: #131313;
  border-radius: var(--radius-glass);
  padding: var(--space-14);
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.header-fcba3d3 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

.header_main-fcba3d3 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  flex: 1;
  min-width: 0;
}

.logo-fcba3d3 {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  flex-shrink: 0;
}

.info-fcba3d3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.line_sm-fcba3d3 {
  height: 13px;
  width: 70px;
  border-radius: var(--radius-sm);
}

.line_lg-fcba3d3 {
  height: 16px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.line_md-fcba3d3 {
  height: 16px;
  width: 65%;
  border-radius: var(--radius-sm);
}

.share-fcba3d3 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.bets-fcba3d3 {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.bets_row-fcba3d3 {
  display: flex;
  gap: var(--space-8);
}

.btn-fcba3d3 {
  flex: 1;
  height: 42px;
  border-radius: var(--radius-card);
}

.volume-fcba3d3 {
  height: 14px;
  width: 60px;
  border-radius: var(--radius-sm);
}

.skel-fcba3d3 {
  background: linear-gradient(
    105deg,
    #1c1c1c 25%,
    #2a2a2a 50%,
    #1c1c1c 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}


/* ── Page shell — takes over the full viewport ─────────────────────── */
.event_detail_page-4f39d82 {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Inner layout — fills the page shell ──────────────────────────── */
.event_detail-4f39d82 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Error page ── */
.error_page-4f39d82 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.error_page__header-4f39d82 {
  display: flex;
  align-items: center;
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.error_page__body-4f39d82 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-24);
  text-align: center;
}

.error_page__title-4f39d82 {
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 22px;
  letter-spacing: -0.3px;
}

/* ═══════════════════════════════════════════════════════════════════
   TOP — video + action bar (shrink-0, never scrolls)
═══════════════════════════════════════════════════════════════════ */
.event_detail__top-4f39d82 {
  flex-shrink: 0;
}

/* ── Action bar ── */
.action_bar-4f39d82 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16);
  gap: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.action_bar__btn-4f39d82 {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  gap: var(--space-4);
  height: 34px;
  background: rgba(39, 39, 39, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1000px;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-15);
  line-height: 18px;
  font-feature-settings: 'ss16' on;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.action_bar__btn-4f39d82::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1000px;
  padding: 1px;
  background: linear-gradient(
    -30deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0)    50%,
    rgba(255, 255, 255, 0.35) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.action_bar__btn-4f39d82:active {
  transform: scale(0.97);
}

.action_bar__btn__symbol-4f39d82 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex: none;
}

.action_bar__btn__label-4f39d82 {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  font-feature-settings: 'ss16' on;
  line-height: 18px;
  color: var(--color-text);
  white-space: nowrap;
}

.action_bar__creator-4f39d82 {
  /* In flow between the two buttons, not absolutely centred on the bar: the
     bar's `space-between` splits the leftover width into two equal gaps, so
     the pill keeps the same distance from Back as from Share. Centred on the
     bar it did not — "Поделиться" is far wider than "Назад", so the right gap
     collapsed and a long name slid under the Share button. */
  display: flex;
  align-items: center;
  /* Tight inset and gaps, both for symmetry — the avatar and the verified badge
     sit the same 4px from their ends — and because Russian needs the room: with
     the old 10px right padding and 4px gaps the label only had ~49px and read
     "WAR…", where "WARP…" needs 55px. */
  gap: var(--space-2);
  padding: var(--space-4);
  height: 34px;
  /* The buttons are flex-shrink: 0, so the pill is what gives way on a narrow
     bar; min-width lets it shrink past its content so the name can ellipsise. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 184px;
  box-sizing: border-box;
  background: #FFFFFF;
  color: #030303;
  border-radius: 1000px;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.action_bar__creator_avatar-4f39d82 {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
}

.action_bar__creator_avatar_placeholder-4f39d82 {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-press));
  flex-shrink: 0;
}

.action_bar__creator_name-4f39d82 {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: 18px;
  color: #030303;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Must be shrinkable: with the previous `flex: 1 0 0` (shrink: 0) the name
     never dropped below its max-content width, so the ellipsis above could not
     apply and the verified badge was pushed outside the pill's padding box. */
  flex: 0 1 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   MIDDLE — scrollable content
═══════════════════════════════════════════════════════════════════ */
.event_detail__scroll-4f39d82 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ── Title + countdown ── */
.betting_section-4f39d82 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 10px;
  gap: var(--space-6);
  text-align: center;
}

.betting_section__title-4f39d82 {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 24px;
  letter-spacing: -0.5px;
}

.betting_section__subtitle-4f39d82 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: #5e5e5e;
}

.betting_section__countdown-4f39d82 {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* ── Two-column stats container ── */
.stats_row-4f39d82 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  padding: 10px 20px 20px;
}

/* ── Column base ── */
.stats_col__left-4f39d82,
.stats_col__right-4f39d82 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.stats_col__left-4f39d82 { align-items: flex-end; }
.stats_col__right-4f39d82 { align-items: flex-start; }

/* ── Column label (Win / Lose) ── */
.col_label-4f39d82 {
  font-size: 21px;
  font-weight: var(--fw-bold);
  line-height: 22px;
  letter-spacing: -0.5px;
}

.col_label__blue-4f39d82 { color: var(--color-blue); }
.col_label__pink-4f39d82 { color: var(--color-pink); }

/* ── Column body (everything below the label) ── */
.col_body-4f39d82 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

/* ── Inner group: pct+bar + stats ── */
.col_main-4f39d82 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* ── % + bar block (right-aligned for left col, left-aligned for right col) ── */
.col_pct_block__right-4f39d82 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-12);
}

.col_pct_block__left-4f39d82 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* ── Big percentage ── */
.col_pct-4f39d82 {
  font-size: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
}

.col_pct__blue-4f39d82 { color: var(--color-blue); }
.col_pct__pink-4f39d82 { color: var(--color-pink); }

/* ── Progress bar ── */
.col_bar-4f39d82 {
  height: 9px;
  border-radius: 10px;
  max-width: 100%;
  min-width: 4px;
}

.col_bar__blue-4f39d82 { background: var(--color-blue); }
.col_bar__pink-4f39d82 { background: var(--color-pink); }

/* ── Stats rows container ── */
.col_stats-4f39d82 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

/* ── Individual stat row ── */
.stat_row__right-4f39d82 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.stat_row__left-4f39d82 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── Stat value text ── */
.stat_value-4f39d82 {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
  line-height: normal;
}

/* ── SF Symbol icon ── */
.stat_icon-4f39d82 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-weight: var(--fw-medium);
  font-variation-settings: 'wdth' 100;
  line-height: 1;
}

.stat_icon__blue-4f39d82 { color: var(--color-blue); }
.stat_icon__pink-4f39d82 { color: var(--color-pink); }

/* ── Spent row ── */
.spent_row__right-4f39d82 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.spent_row__left-4f39d82 {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Free-bet (bonus-funded) portion of the user's stake. Gold pill matching the
   bet-card free-bet badge, distinct from the option blue/pink accents. */
.free_bet_badge-4f39d82 {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-round);
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold);
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-semibold);
  line-height: 15px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ── Center divider ── */
.stats_divider-4f39d82 {
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  align-self: stretch;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM — dark bar, bet buttons only (balance is above, outside)
═══════════════════════════════════════════════════════════════════ */
.event_detail__bottom-4f39d82 {
  flex-shrink: 0;
  background: #0d0c0d;
  border-top: 1px solid var(--color-border);
}

/* ── Balance row — transparent, sits above the dark bar ── */
.balance_row-4f39d82 {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(13, 12, 13, 0) 0%, #0d0c0d 100%);
}

/* ── Action buttons ── */
.bet_buttons-4f39d82 {
  display: flex;
  gap: var(--space-8);
  padding: 10px 16px max(25px, var(--safe-bottom));
}

.bet_btn__yes-4f39d82 {
  flex: 1;
  min-width: 0;
  background: var(--color-blue);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-round);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-medium);
  font-size: var(--fs-17);
  line-height: 22px;
  letter-spacing: -0.43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet_btn__yes-4f39d82:active {
  opacity: 0.8;
}

.bet_btn__yes-4f39d82:disabled,
.bet_btn__no-4f39d82:disabled {
  opacity: 0.35;
  cursor: default;
}

.bet_btn__no-4f39d82 {
  flex: 1;
  min-width: 0;
  background: var(--color-pink);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-round);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-medium);
  font-size: var(--fs-17);
  line-height: 22px;
  letter-spacing: -0.43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet_btn__no-4f39d82:active {
  opacity: 0.8;
}

.bet_btn__closed-4f39d82 {
  flex: 1;
  min-width: 0;
  background: #2a2a2a;
  color: #666666;
  border: none;
  border-radius: var(--radius-round);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-style: normal;
  font-weight: var(--fw-medium);
  font-size: var(--fs-17);
  line-height: 22px;
  letter-spacing: -0.43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet_btn__label-4f39d82 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Past-event outcome (#204) ─────────────────────────────────────────── */

/* Small pill on the winning option's label once an event is resolved. */
.winner_badge-4f39d82 {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-round);
  background: var(--color-blue);
  color: var(--color-text);
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-semibold, 600);
  line-height: 15px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Resolved/cancelled result banner in the bottom bar (replaces the buttons). */
.outcome-4f39d82 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: #2a2a2a;
  color: var(--color-text);
  border-radius: var(--radius-round);
  padding: 13px 16px;
  overflow: hidden;
}

.outcome__won-4f39d82 {
  background: color-mix(in srgb, var(--color-blue) 22%, #2a2a2a);
}

.outcome__lost-4f39d82 {
  background: #2a2a2a;
  color: #888888;
}

.outcome__title-4f39d82 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-17);
  line-height: 22px;
  letter-spacing: -0.43px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome__amount-4f39d82 {
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-17);
  line-height: 22px;
  letter-spacing: -0.43px;
  white-space: nowrap;
}


.events-d958126 {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: var(--events-padding-v) 16px var(--events-padding-v);
  /* Inert while the page scrolls; in the no-scroll empty-state mode
     (`.app-content:has(.empty-state)`, global.css) the page root is a flex
     column and this fills the space left under the sticky header. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Height reservation for the category bar while the categories load. The sticky
   header keeps the mini-games row out of it (#327), so its height must not
   change under the feed. No border: the bar draws its own once it renders. */
.category_bar_placeholder-d958126 {
  height: var(--category-bar-height);
}

.error_state-d958126 {
  margin: var(--space-16);
  color: #A8A8A8;
  font-size: 0.9rem;
}

.bottom_fade-d958126 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(3, 3, 3, 0), var(--color-bg) 80%);
  pointer-events: none;
  z-index: 9;
}

.filter_tabs_container-d958126 {
  position: fixed;
  bottom: calc(95px + var(--safe-bottom));
  left: 25px;
  z-index: 10;
}

.toggle_tabs-d958126 {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  background: rgba(36, 36, 36, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 30px;
  padding: var(--space-4);
  gap: 0;
}

.toggle_tabs__indicator-d958126 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: #343334;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
  will-change: left, right;
  transition:
    left 380ms cubic-bezier(0.32, 0.72, 0, 1),
    right 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.toggle_tabs__indicator--right-d958126 {
  transition:
    left 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    right 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.toggle_tabs__indicator--left-d958126 {
  transition:
    right 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    left 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.toggle_tabs__indicator--init-d958126 {
  transition: none;
}

.toggle_tabs__tab-d958126 {
  flex: none;
  height: 100%;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 3px 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-size: 13.333px;
  font-weight: var(--fw-medium);
  line-height: 18px;
  letter-spacing: -0.08px;
  color: #6E6E6E;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

.toggle_tabs__tab__active-d958126 {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* Fixed 16x16 slot for the tab's leading glyph, so swapping the glyph (#356)
   cannot change the button's width — which the sliding indicator measures. */
.toggle_tabs__tab_icon-d958126 {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.page__forbidden-df76302 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 0.5rem;
  color: #A8A8A8;
}

.page__forbidden-df76302 h1 {
  font-size: 1.5rem;
  color: var(--color-text-title);
}


/* ── Sheet ─────────────────────────────────────────────────────────────
   Scrim, surface and drag handle come from bottom_sheet.module.css; this is
   what the wheel needs on top: a black surface and a sheet that stays
   click-through while it is off screen. */
.sheet-e1fec32 {
  --bs-sheet-bg: #000;
  pointer-events: none;
  align-items: stretch;
  padding-bottom: max(20px, var(--safe-bottom));
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  color: var(--color-text);
}

.sheet__visible-e1fec32 {
  pointer-events: auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.header-e1fec32 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 25px 12px 25px;
  box-sizing: border-box;
}

.header_title-e1fec32 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  line-height: 22px;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.close_btn-e1fec32 {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  color: var(--color-text-muted);
  padding: 0;
}

.close_btn-e1fec32:hover {
  color: var(--color-text);
}

/* ── Wheel ──────────────────────────────────────────────────────────── */
.wheel_area-e1fec32 {
  position: relative;
  width: 188px;
  height: 208px;
  flex-shrink: 0;
  align-self: center;
  margin: 8px 0 4px 0;
}

.wheel_ring-e1fec32 {
  position: absolute;
  top: 20px;
  left: 0;
  width: 188px;
  height: 188px;
  display: block;
  overflow: visible;
  transition: transform 4000ms cubic-bezier(0.17, 0.67, 0.12, 0.99);
  will-change: transform;
}

.wheel_sector-e1fec32 {
  transition: stroke-dasharray 0.35s ease;
}

.wheel_pointer-e1fec32 {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid #FFFFFF;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.25));
}

.wheel_center-e1fec32 {
  position: absolute;
  top: calc(20px + (188px - 134px) / 2);
  left: calc((188px - 134px) / 2);
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  z-index: 1;
}

.wheel_prize_label-e1fec32 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: 16px;
  color: var(--color-text-muted);
  letter-spacing: -0.1px;
}

.wheel_prize_amount-e1fec32 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-heading);
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--color-text);
  font-feature-settings: 'tnum';
  transition: color 0.3s ease;
}

.wheel_prize_amount__won-e1fec32 {
  color: var(--color-success);
}

.wheel_prize_amount__lost-e1fec32 {
  color: #EF4444;
}

/* ── Amount section ─────────────────────────────────────────────────── */
.section_amount-e1fec32 {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: stretch;
  margin: 16px 16px 0 16px;
}

.amount_selector-e1fec32 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 16px;
}

/* On top of the shared stepper button: press feedback and a disabled state,
   which the money sheets do not have. */
.amount_btn-e1fec32 {
  transition: background 0.15s, opacity 0.15s;
}

.amount_btn-e1fec32:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.amount_btn-e1fec32:active:not(:disabled) {
  background: #444444;
}

.amount_display-e1fec32::-webkit-inner-spin-button,
.amount_display-e1fec32::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.amount_display-e1fec32 {
  flex: 1;
  min-width: 0;
  height: 36px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-title);
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--color-text);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  caret-color: var(--color-text);
  font-feature-settings: 'tnum';
  -moz-appearance: textfield;
}

/* Centring comes from hint.module.css; the wheel runs a smaller, muted scale
   and its own shade of red. */
.hint-e1fec32 {
  --hint-color: var(--color-text-muted);
  --hint-error-color: #EF4444;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 18px;
  letter-spacing: -0.1px;
}

/* ── Controls section ───────────────────────────────────────────────── */
.section_controls-e1fec32 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 8px 16px 0 16px;
  gap: var(--space-8);
}

.mult_tabs-e1fec32 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  box-sizing: border-box;
}

.mult_tab-e1fec32 {
  flex: 1;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mult_tab-e1fec32:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mult_tab__active-e1fec32 {
  background: #333333;
  border-color: #636363;
  color: var(--color-text);
}

.spin_btn_wrapper-e1fec32 {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

.action_btn-e1fec32 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--space-10);
  height: 48px;
  width: 100%;
  border: none;
  border-radius: var(--radius-card);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  line-height: 21px;
  letter-spacing: -0.31px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.action_btn-e1fec32:active:not(:disabled) {
  opacity: 0.85;
}

.action_btn-e1fec32:disabled {
  cursor: not-allowed;
}

/* CTA primary — white pill, matches deposit button */
.action_btn__spin-e1fec32 {
  background: #FFFFFF;
  color: #000000;
}

.action_btn__spin-e1fec32:disabled {
  background: #333333;
  color: var(--color-text-muted);
}

.action_btn__deposit-e1fec32 {
  background: #FFFFFF;
  color: #000000;
}

/* Padding wrapper for the shared toggle (free_bet_toggle.module.css), which
   brings its own row layout. */
.free_bet_row-e1fec32 {
  display: flex;
  padding: 0 var(--space-16) var(--space-8);
}


/* Free-bet funding switch — shared by the bet, fortune-wheel and coin-flip
   sheets. The checkbox stays in the DOM for a11y and is made transparent on
   top of the capsule, which is what the user actually sees. */

.row-e2becda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-8) 0;
  -webkit-tap-highlight-color: transparent;
}

.text-e2becda {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.label-e2becda {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  letter-spacing: -0.1px;
}

.caption-e2becda {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Capsule geometry follows the platform switch (44×26 track, 22px knob).
   Raw px: the design system has no size tokens for controls. */
.switch-e2becda {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.input-e2becda {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.track-e2becda {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
  background: var(--color-border);
  transition: background var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.track-e2becda::after {
  content: '';
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: var(--color-text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease-out);
}

.input-e2becda:checked + .track-e2becda {
  background: var(--color-success);
}

.input-e2becda:checked + .track-e2becda::after {
  transform: translateX(18px);
}

.input-e2becda:disabled {
  cursor: not-allowed;
}

.input-e2becda:disabled + .track-e2becda {
  opacity: 0.4;
}

.input-e2becda:focus-visible + .track-e2becda {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* The single caption line under an amount field: either the neutral "minimum N"
   copy or the current error, in the error tone. Only the tone and the centring
   live here — the type scale belongs to the sheet, which is why the two colours
   come in as custom properties a sheet can override without depending on the
   order stylance concatenates the modules in. */
.hint-a1c1dc5 {
    text-align: center;
    color: var(--hint-color, #6B6B6B);
}

.hint__error-a1c1dc5 {
    color: var(--hint-error-color, #ff4444);
}


.card-28b704e {
  margin: 0;
  padding: var(--space-16);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.title-28b704e {
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: 21px;
}

.stats-28b704e {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
}

.stat_pill-28b704e {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px 30px;
  background: var(--color-inset);
  border-radius: var(--radius-round);
  gap: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.stat_value-28b704e {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #E1E1E1;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  line-height: 22px;
}

.stat_label-28b704e {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: normal;
}

.actions-28b704e {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
}

.invite_btn-28b704e {
  flex: 1;
  height: 42px;
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-card);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.31px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  transition: transform 0.12s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.invite_btn-28b704e:active {
  transform: scale(0.98);
}

.copy_btn-28b704e {
  width: 42px;
  height: 42px;
  background: #464646;
  border: none;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  font-size: 18px;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.copy_btn-28b704e:active {
  transform: scale(0.94);
}


.overlay-16d4a23 {
  position: fixed;
  inset: 0;
  /* Above modals/sheets (--z-modal) so the reader also covers the onboarding
     welcome screen when opened from its rules checklist; still below --z-toast. */
  z-index: calc(var(--z-modal) + 1);
  /* Opaque base background (not the translucent --color-surface): this reader is
     a full-screen document overlay and must fully cover whatever is behind it —
     the app or the onboarding welcome demo. --color-surface is rgba(...,0.80),
     which let the bright onboarding scene bleed through and read as a dimmed,
     text-less screen. */
  background: var(--color-bg, #0a0a0a);
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  overflow-y: auto;
}
.header-16d4a23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.title-16d4a23 { font-size: 20px; font-weight: 600; }
.close_btn-16d4a23 {
  background: none;
  border: none;
  color: var(--color-accent, #7c5cff);
  font-size: var(--fs-base);
  cursor: pointer;
}
.body-16d4a23 { line-height: 1.5; white-space: pre-wrap; }


/* `flex-shrink: 0` is load-bearing, not decoration: this card is a direct child
   of the profile sheet's flex column, and `overflow: hidden` resolves its
   automatic minimum size to 0, so without it the card shrinks to zero height
   the moment the sheet's content overflows — the rows stay in the DOM, clipped,
   and all that is left is the margin (#377). Every sibling card in the sheet
   carries the same pair. Spacing comes from the sheet's own `gap`, so the card
   keeps no margin of its own — a margin survives the collapse and reads as a
   stray empty band. */
.card-72b5c9a { background: var(--color-card, #17171b); border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.row-72b5c9a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.row-72b5c9a:not(:last-child) { border-bottom: 1px solid var(--color-divider, #26262c); }
.label-72b5c9a { font-size: 15px; }


.switcher-9d09c85 {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 30px;
  padding: var(--space-4);
  gap: 0;
  height: 36px;
  box-sizing: border-box;
}

.switcher__indicator-9d09c85 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: #343334;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
  will-change: left, right;
  transition:
    left 380ms cubic-bezier(0.32, 0.72, 0, 1),
    right 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.switcher__indicator--right-9d09c85 {
  transition:
    left 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    right 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.switcher__indicator--left-9d09c85 {
  transition:
    right 480ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
    left 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.switcher__indicator--init-9d09c85 {
  transition: none;
}

.switcher__option-9d09c85 {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border: none;
  background: transparent;
  color: #6E6E6E;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  font-size: 13.333px;
  font-weight: var(--fw-medium);
  line-height: 18px;
  letter-spacing: -0.08px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

.switcher__option__active-9d09c85 {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}


/* ── Stories row ────────────────────────────────────────────────────────── */

.stories_row-aed587a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--stories-row-pt) 16px var(--stories-row-pb);
  margin-bottom: 4px;
}

.story_btn-aed587a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.story_btn__ring-aed587a {
  width: var(--story-ring-size);
  height: var(--story-ring-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-press) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px;
  box-sizing: border-box;
}

.story_btn__image-aed587a {
  width: var(--story-img-size);
  height: var(--story-img-size);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #1a1a1c;
}

.story_btn__label-aed587a {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 14px;
  color: var(--color-text);
  letter-spacing: -0.1px;
}

/* ── Category bar V6 ────────────────────────────────────────────────────── */

/* This strip is the only part of the sticky header that pans, so it is the
   only part that constrains touch. `pan-x` used to sit on the whole
   `.app-content__sticky-header` wrapper, which killed vertical scrolling for
   any swipe starting on the title row as well. */
.category_bar-aed587a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  height: var(--category-bar-height);
  border-bottom: 1px solid #1f1f1f;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.category_bar-aed587a::-webkit-scrollbar {
  display: none;
}

.tab-aed587a {
  --chip-rgb: 255, 255, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px 10px;
  gap: var(--space-6);
  min-width: 60px;
  height: var(--category-tab-height);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text-muted);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

/* Inactive: no line, no fill */
.tab-aed587a::before,
.tab-aed587a::after {
  content: none;
}

/* Active */
.tab__active-aed587a {
  color: var(--color-text);
}

/* Ambient glow — wide & soft, bleeds ±32px into siblings */
.tab__active-aed587a::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -32px;
  right: -32px;
  height: 12px;
  background: radial-gradient(
    ellipse 60% 100% at 50% 100%,
    rgba(var(--chip-rgb), 0.45) 0%,
    rgba(var(--chip-rgb), 0.15) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Sharp centre line */
.tab__active-aed587a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -24px;
  right: -24px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--chip-rgb), 0.9) 30%,
    rgb(var(--chip-rgb)) 50%,
    rgba(var(--chip-rgb), 0.9) 70%,
    transparent 100%
  );
  border-radius: 2px;
  pointer-events: none;
}

.tab__icon-aed587a {
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.4;
  transition: color 0.2s, opacity 0.2s;
}

.tab__icon-aed587a svg {
  width: 26px;
  height: 26px;
}

.tab__active-aed587a .tab__icon-aed587a {
  opacity: 1;
  color: rgb(var(--chip-rgb));
}

.tab__icon_img-aed587a {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.2s, opacity 0.2s;
}

.tab__active-aed587a .tab__icon_img-aed587a {
  filter: none;
  opacity: 1;
}

.tab__label-aed587a {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 14px;
  letter-spacing: -0.1px;
  color: inherit;
  white-space: nowrap;
}


.bets_list-e021db4 {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 12px 16px;
  /* Inert while the page scrolls; in the no-scroll empty-state mode
     (`.app-content:has(.empty-state)`, global.css) the page root is a flex
     column and this fills the space left under the header. */
  flex: 1 1 auto;
  min-height: 0;
}

.error_state-e021db4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--color-error);
  font-size: 0.9rem;
}


/* "Add to Home Screen" step — Figma frame `add to home screen` (741:4270):
   the device is bottom-anchored with its top cropped by the screen edge,
   centered copy below, rules pill, white CTA. */

.screen-7b4629d {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: #0D0C0D;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Device zone: 59% of the frame height; the phone hangs from the top,
   its upper part cut off exactly like the mockup ── */
.device_zone-7b4629d {
    position: relative;
    /* 63% + 20px (was 59% → 63%): lowers the phone's base another ~20px and
       shrinks the empty band above the copy. Extra height crops a touch more of
       the phone top, dissolved by .top_gradient. */
    height: calc(63% + 20px);
    flex-shrink: 0;
    overflow: hidden;
}

.device-7b4629d {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 87% (was 82%): ~6% larger phone. Grown via width only so deviceIn's
       translateX(-50%) centering is untouched. */
    width: 87%;
    animation: deviceIn 700ms var(--ease-out) both;
}

@keyframes deviceIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(26px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Figma Rectangle 57790615: 402×247 top gradient + blur over the device */
.top_gradient-7b4629d {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 267px;
    z-index: 2;
    background: linear-gradient(
        180deg,
        #0D0C0D 30.77%,
        rgba(13, 12, 13, 0.927016) 45.19%,
        rgba(13, 12, 13, 0.826923) 60.58%,
        rgba(13, 12, 13, 0.42) 75.48%,
        rgba(13, 12, 13, 0) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Feather so the blur ramps out instead of cutting at the band's
       straight bottom edge (same treatment as the welcome fade bands). */
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 98%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    pointer-events: none;
}

/* ── Centered copy, as in the frame ── */
.content-7b4629d {
    position: relative;
    z-index: 3;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
    padding: var(--space-16) 25px;
    /* Pull the copy down close to the bottom bar (clamped so short webviews
       don't squeeze the CTA row). */
    margin-bottom: clamp(8px, 2vh, 20px);
}

.title-7b4629d {
    font-size: var(--fs-heading);
    font-weight: var(--fw-bold);
    line-height: 32px;
    letter-spacing: -0.8px;
    color: var(--color-text);
}

.text-7b4629d {
    font-size: var(--fs-15);
    font-weight: var(--fw-regular);
    line-height: 20px;
    color: var(--color-text-secondary);
    max-width: 300px;
}

/* ── White CTA, Figma style ── */
.bottom_bar-7b4629d {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--color-border);
    background: #0D0C0D;
    padding: var(--space-10) var(--space-16) max(25px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-shrink: 0;
}

.add_btn-7b4629d {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 48px;
    border: none;
    border-radius: var(--radius-card);
    background: #FFFFFF;
    font-size: var(--fs-17);
    font-weight: var(--fw-medium);
    line-height: 22px;
    letter-spacing: -0.43px;
    color: #030303;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast);
}

.add_btn-7b4629d:active {
    transform: scale(0.98);
}

.skip_btn-7b4629d {
    height: 48px;
    padding: 0 var(--space-20);
    border: none;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.13); /* secondary precedent: action_buttons .btn_withdraw */
    font-size: var(--fs-17);
    font-weight: var(--fw-medium);
    letter-spacing: -0.43px;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast);
}

.skip_btn-7b4629d:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .device-7b4629d {
        animation: none;
    }
}


/* Scrim and surface come from bottom_sheet.module.css; onboarding only differs
   in how the two animate — the scrim honours the reduced-motion token, and the
   sheet rises on a gentle overshoot spring rather than a plain slide. */
.backdrop-cf520bf {
    --bs-backdrop-transition: opacity var(--dur-slow) ease;
}

.sheet-cf520bf {
    /* Richer entrance: a gentle overshoot spring (settles up-then-down)
       over a slightly longer duration than the plain slide. */
    --bs-sheet-transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1);
    padding-bottom: max(25px, env(safe-area-inset-bottom));
}

/* In-sheet promo toast — slides down from the sheet's own top edge so the
   success/error message is visible WITHIN the onboarding, not lost behind the
   sheet as a global app toast. */
.sheet_toast-cf520bf {
    position: absolute;
    top: var(--space-10);
    left: 50%;
    width: max-content;
    max-width: calc(100% - 2 * var(--space-16));
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-card);
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    opacity: 0;
    transform: translate(-50%, -16px);
    pointer-events: none;
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.sheet_toast__visible-cf520bf {
    opacity: 1;
    transform: translate(-50%, 0);
}

.sheet_toast_dot-cf520bf {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.sheet_toast__success-cf520bf .sheet_toast_dot-cf520bf {
    background: var(--color-success);
}

.sheet_toast__error-cf520bf .sheet_toast_dot-cf520bf {
    background: var(--color-error);
}

.top-cf520bf {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-20) 25px var(--space-10);
}

.skip-cf520bf {
    height: 36px;
    padding: 0 var(--space-16);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast), opacity var(--dur-base) var(--ease-out);
    animation: skipIn 0.4s var(--ease-out) 0.25s both;
}

.skip-cf520bf:active {
    transform: scale(0.96);
}

@keyframes skipIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Slides ── */
.slides_viewport-cf520bf {
    overflow: hidden;
    width: 100%;
}

.slides_track-cf520bf {
    display: flex;
    transition: transform var(--dur-slow) var(--ease-out);
}

.slide-cf520bf {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) 25px var(--space-10);
    min-height: 0;
    /* Clip the slide-1 deck fly-out at the slide boundary so a card swiping
       off to the side never bleeds into the adjacent slide. */
    overflow: hidden;
}

.slide_art-cf520bf {
    /* Fixed height (not a floor) so the title/text below start at the SAME
       vertical offset on every slide — the drum, the method stack and the
       promo visual each center within this identical box. Trimmed 300→260
       to lift the whole stack (Skip/CTA sit lower, less dead space); the
       enlarged method cards (S5) still fit: 3×72 + 2×14 = 244 < 260. */
    height: 260px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-14);
}

.slide_title-cf520bf {
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
    line-height: 26px;
    letter-spacing: -0.5px;
    color: var(--color-text-title);
    text-align: center;
}

.slide_text-cf520bf {
    font-size: var(--fs-15);
    font-weight: var(--fw-regular);
    line-height: 20px;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 300px;
}

/* Slide 1 — a self-swiping deck of three real EventCards, shown inert (taps
   must not navigate). The three cards stack centred in one grid cell and share
   one 6s animation, phase-offset by a third (0 / -2s / -4s) so exactly one card
   is "front" at a time: it holds, tilts and flies off to the side (right/left
   alternating), then — while invisible — jumps to the back of the stack and
   rises forward again as the others advance. Reads as a left/right swipe deck. */
.deck-cf520bf {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 340px;
    height: 260px;
    /* Cards must be visible as they fly past the deck's own width. */
    overflow: visible;
    pointer-events: none;
}

.deck_card-cf520bf {
    /* All three share the single grid cell → they stack, centred, so every
       keyframe transform is a pure offset from the same origin. */
    grid-area: 1 / 1;
    width: 100%;
    will-change: transform, opacity;
    animation: deckSwipe 6s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

/* Middle card exits the opposite way; the -2s phase also makes it the second
   card to swipe, so successive exits read as right → left → right. */
.deck_card-cf520bf:nth-child(2) {
    animation-name: deckSwipeAlt;
    animation-delay: -2s;
}
.deck_card-cf520bf:nth-child(3) { animation-delay: -4s; }

/* One card's full journey: FRONT (hold) → tilt + fly out → (invisible) jump to
   BACK → fade in → rise BACK→MID→FRONT as the two others take their turns.
   z-index snaps at keyframes (no fractional interpolation), keeping the leaving
   card on top and the incoming front above the back card. */
@keyframes deckSwipe {
    0%   { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    20%  { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    30%  { transform: translate(135%, -8%) scale(1) rotate(15deg); opacity: 0; z-index: 30; }
    /* teleport to back while fully transparent — no visible jump */
    31%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 0; z-index: 10; }
    36%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 1; z-index: 10; }
    55%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 1; z-index: 10; }
    63%  { transform: translate(0, 16px) scale(0.93) rotate(0); opacity: 1; z-index: 20; }
    88%  { transform: translate(0, 16px) scale(0.93) rotate(0); opacity: 1; z-index: 20; }
    96%  { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
}

@keyframes deckSwipeAlt {
    0%   { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    20%  { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    30%  { transform: translate(-135%, -8%) scale(1) rotate(-15deg); opacity: 0; z-index: 30; }
    31%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 0; z-index: 10; }
    36%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 1; z-index: 10; }
    55%  { transform: translate(0, 30px) scale(0.86) rotate(0); opacity: 1; z-index: 10; }
    63%  { transform: translate(0, 16px) scale(0.93) rotate(0); opacity: 1; z-index: 20; }
    88%  { transform: translate(0, 16px) scale(0.93) rotate(0); opacity: 1; z-index: 20; }
    96%  { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
    100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 30; }
}

/* Slide 2 — large glass deposit-method cards */
.method_stack-cf520bf {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
    max-width: 320px;
}

.method_card-cf520bf {
    display: flex;
    align-items: center;
    gap: var(--space-14);
    height: 72px;
    padding: 0 var(--space-14);
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-base), border-color var(--dur-base);
    text-align: left;
}

.method_card__active-cf520bf {
    background: #414141;
    border-color: rgba(255, 255, 255, 0.10);
}

.method_icon-cf520bf {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Scale the glyph itself (not just the chip): the inline SVGs carry fixed
   20px width/height attributes — override them here so the icon grows with
   the ~1.5× method name instead of floating small in a bigger chip. */
.method_icon-cf520bf svg {
    width: 30px;
    height: 30px;
}

/* Crypto (1st) and Stars (3rd) glyphs carry more internal padding than GRAM's
   diamond, so they read smaller in the same chip — bump just those two. */
.method_card-cf520bf:nth-child(1) .method_icon-cf520bf svg,
.method_card-cf520bf:nth-child(3) .method_icon-cf520bf svg {
    width: 34px;
    height: 34px;
}

.method_meta-cf520bf {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.method_name-cf520bf {
    font-size: var(--fs-22);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.method_sub-cf520bf {
    font-size: var(--fs-17);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slide 3 — big borderless promo-code input (bet-amount `amount_display`
   pattern): transparent, centered, gray placeholder → white entered text. */
.art_promo-cf520bf {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
}

/* P1 — a small hint bubble above the input, with a downward CSS notch pointing
   at the field. No border (it left a seam over the notch) and no animation.
   The fill must be opaque: the notch overlaps the bubble body, and a
   translucent fill doubles up in the overlap into a visible darker seam. */
.promo_hint-cf520bf {
    position: relative;
    background: var(--color-inset);
    border-radius: var(--radius-round);
    padding: var(--space-10) var(--space-16);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.promo_hint-cf520bf::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -55%) rotate(45deg);
    background: var(--color-inset);
    border-radius: var(--radius-sm);
}

.promo_input-cf520bf {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-size: 48px;
    font-weight: var(--fw-semibold);
    letter-spacing: 1px;
    color: var(--color-text);
    caret-color: var(--color-accent);
}

.promo_input-cf520bf::placeholder {
    color: #6b6b6b;
}

/* P2 — "Don't have a promo code?" prompt + Telegram-channel button (replaces
   the old descriptive s3_text). Opens the admin-configured channel_url. */
.promo_no_code-cf520bf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
    /* Extra space above the pair (on top of the slide's own 8px gap) so the
       question + Telegram button read as one grouped unit, set apart from
       the title. */
    margin-top: var(--space-16);
    max-width: 300px;
    text-align: center;
}

.promo_no_code_text-cf520bf {
    font-size: var(--fs-15);
    color: var(--color-text-secondary);
}

.tg_channel_btn-cf520bf {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    width: 100%;
    max-width: 300px;
    height: 52px;
    /* 6px left so the 40px chip sits inset; roomy right padding for the label */
    padding: 0 var(--space-20) 0 6px;
    border: none;
    border-radius: var(--radius-round);
    /* Dark-grey secondary button; blue glyph + label carry the Telegram accent. */
    background: var(--color-border-subtle);
    color: var(--color-blue);
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast), background var(--dur-base);
}

.tg_channel_btn-cf520bf:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.14);
}

/* Round chip a touch lighter than the button (not white) holding the blue glyph. */
.tg_icon_chip-cf520bf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-blue);
    flex-shrink: 0;
}

.tg_icon_chip-cf520bf svg {
    width: 20px;
    height: 20px;
}

/* Label fills the remaining width and centres between chip and right padding. */
.tg_channel_label-cf520bf {
    flex: 1;
    text-align: center;
}

/* ── Dots ── */
.dots-cf520bf {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-10) 0 var(--space-4);
}

.dot-cf520bf {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--color-neutral-lose);
    transition: all var(--dur-base) var(--ease-out);
}

.dot__active-cf520bf {
    width: 18px;
    background: var(--color-accent);
}

/* ── CTA ── */
.cta_container-cf520bf {
    padding: var(--space-10) 25px 0;
}

.cta-cf520bf {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 21px;
    letter-spacing: -0.31px;
    color: var(--color-on-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Smooth the P3 morph: background + width (flex) ease over --dur-slow. */
    transition:
        transform var(--dur-fast),
        background var(--dur-slow) var(--ease-out),
        color var(--dur-slow) var(--ease-out),
        flex-grow var(--dur-slow) var(--ease-out),
        flex-basis var(--dur-slow) var(--ease-out);
}

.cta-cf520bf:active {
    transform: scale(0.98);
}

.cta_row-cf520bf {
    display: flex;
    gap: var(--space-10);
    width: 100%;
}

.cta_row-cf520bf .cta-cf520bf {
    flex: 1;
    min-width: 0;
}

.paste_btn-cf520bf {
    height: 52px;
    padding: 0 var(--space-20);
    border: none;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.13);
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-fast),
        background var(--dur-slow) var(--ease-out),
        flex-grow var(--dur-slow) var(--ease-out);
}

.paste_btn__redeem-cf520bf {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.paste_btn-cf520bf:active {
    transform: scale(0.98);
}

/* P3 — CTA morph. Once a code is entered, Redeem grows to primary and the
   "Get started" button collapses to a grey arrow. */
.paste_btn__grow-cf520bf {
    flex: 1;
    min-width: 0;
}

.cta_row-cf520bf .cta__arrow-cf520bf {
    flex: 0 0 52px;
    width: 52px;
    padding: 0;
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-text);
    font-size: var(--fs-22);
    /* inherits .cta's smooth morph transition */
}

/* ── Accessibility: reduced motion → one static centered drum card, skip
   button appears without its entrance animation ── */
@media (prefers-reduced-motion: reduce) {
    .sheet-cf520bf {
        transition: none;
    }
    .deck_card-cf520bf {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .deck_card-cf520bf:nth-child(n+2) {
        display: none;
    }
    .skip-cf520bf {
        animation: none;
    }
}


/* Fullscreen first-launch welcome (Figma onboarding_1st 691:3746 /
   onboarding_2st 691:3478): product demo inside a CSS device over a
   platform-icon backdrop, hero text, expandable rules pill, Go bar.

   Timeline (13s loop):
   0–11%    screen A at rest (Events: header, categories, 2 game stories, cards)
   11–17%   in-app scroll — header and categories pin, the games row and the
            cards slide beneath them
   17–25%   hold; finger taps the card's Win
   25–35%   cross-fade A→B — the DEVICE STAYS PUT so the live video plays
            in view for ~2.4s (proof the stream is really live)
   54–64%   the DEVICE rises for betting; top fade appears, bottom band
            dissolves 58–62.5% (after the risen phone bottom clears the
            .art clip) and returns 94.6–95.5% (before it re-crosses)
   64–95%   screen B bottom (bet section): finger taps the filled Win,
            system-style glass push lands on the ONBOARDING screen
            74.5–95.7% (the demo behind it dims to spotlight the toast)
   95–100%  device settles back, loop closes on screen A */

.screen-77f7e0c {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: #0D0C0D;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Platform logos scattered behind the phone ── */
.platform_rain-77f7e0c {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.rain_icon-77f7e0c {
    position: absolute;
    filter: brightness(0.5) saturate(0.85) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
    animation: rainFall 1.15s cubic-bezier(0.45, 0, 0.6, 1.25) both;
}

/* Six icons, all in edge slots that stay visible beside the phone (the old
   38%-left slot was permanently hidden behind the device). */
.rain_icon-77f7e0c:nth-child(1) { top: 4%;  left: -30px;  width: 110px; --rot: -14deg; animation-delay: 0.15s; }
.rain_icon-77f7e0c:nth-child(2) { top: 5%;  right: -34px; width: 118px; --rot: 12deg;  animation-delay: 0.35s; }
.rain_icon-77f7e0c:nth-child(3) { top: 24%; left: -38px;  width: 104px; --rot: -9deg;  animation-delay: 0.55s; }
.rain_icon-77f7e0c:nth-child(4) { top: 20%; right: -34px; width: 112px; --rot: 8deg;   animation-delay: 0.75s; }
.rain_icon-77f7e0c:nth-child(5) { top: 40%; left: -26px;  width: 92px;  --rot: -12deg; animation-delay: 0.95s; }
.rain_icon-77f7e0c:nth-child(6) { top: 36%; right: -28px; width: 100px; --rot: 14deg;  animation-delay: 1.15s; }

@keyframes rainFall {
    0%   { opacity: 0; transform: translateY(-120vh) rotate(calc(var(--rot) * 3)); }
    8%   { opacity: 1; }
    78%  { transform: translateY(0) rotate(var(--rot)); }
    89%  { transform: translateY(-12px) rotate(var(--rot)); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
}



/* ── Art zone with the device ── */
.art-77f7e0c {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Extended 80pt down so the bottom fade band sits well below the
       device instead of cutting into its screen. */
    height: calc(58% + 80px);
    background: radial-gradient(
        ellipse 120% 100% at 50% -20%,
        rgba(255, 126, 6, 0.10) 0%,
        rgba(255, 126, 6, 0.04) 40%,
        transparent 75%
    );
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    --rise: -150px;
    /* Appears AFTER the text/buttons (0.5s delay) so the phone is the last
       element to arrive; its internal 13s loops run underneath regardless. */
    animation: artIn 0.6s var(--ease-out) 0.5s both;
}

@media (max-height: 710px) {
    .art-77f7e0c {
        /* Short webviews: the phone bottom must clear .art's overflow clip
           while risen, else it shows as a raw horizontal cut (overhang =
           356px - 0.29*vh). */
        --rise: -210px;
    }
}

/* ── Device: fully drawn phone (rounded on all corners), black bezel ring
   + 30% grey outer stroke. Rises during screen B, melting into the fades. ── */
.phone-77f7e0c {
    position: relative;
    width: 340px;
    height: 660px;
    /* Rest position: pushed down so the device top never crowds the app's
       top edge on shorter viewports. Compensates the container's +80px
       (flex-centering would otherwise drop the device another 40px). */
    margin-top: 114px;
    overflow: hidden;
    background: #050506;
    border: 9px solid #000000;
    border-radius: 65px;
    /* Titanium band: dark seam, metal ring, specular outer edge. */
    box-shadow:
        0 0 0 1.5px #14161a,
        0 0 0 4px #596070,
        0 0 0 5px rgba(220, 228, 245, 0.28);
    animation: phoneRise 13s var(--ease-in-out) infinite;
}

@keyframes phoneRise {
    0%, 53.8%  { transform: translateY(0); }
    /* --rise keeps the bet buttons clear of the art clip while the risen
       device stays close enough to the hero that no dead band opens up. */
    63.8%      { transform: translateY(var(--rise)); }
    94.6%      { transform: translateY(var(--rise)); }
    100%       { transform: translateY(0); }
}

.phone_island-77f7e0c {
    position: absolute;
    /* Reference-iPhone proportions (homescreen.webp): the island hugs the
       top — gap ≈ 38% of its height, width ≈ 30% of the screen. */
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 99px;
    height: 28px;
    background: #000;
    border-radius: var(--radius-round);
    z-index: 3;
}

.phone_screen-77f7e0c {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 56px;
    /* Real app page background (global.css) — the stage gutters must not
       read as a seam against the app content. */
    background: #030303;
}

/* Scrim: the demo dims while the win toast is up, spotlighting it. */
.phone_screen-77f7e0c::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6; /* over the stage + top shade, under .demo_status (z7) */
    background: #000;
    opacity: 0;
    pointer-events: none;
    animation: demoDim 13s var(--ease-in-out) infinite;
}

@keyframes demoDim {
    0%, 74.5% { opacity: 0; }
    78.5%     { opacity: 0.42; }
    95.7%     { opacity: 0.42; }
    98.4%, 100% { opacity: 0; }
}

/* ── Art-level fade bands (fixed to the page; the phone slides under them).
   Bottom: covers the phone's lower edge at rest so it melts into the page.
   Top: appears when the device rises so it never reads as clipped. ── */
.phone_fade-77f7e0c {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    /* Exact mirror of the add-to-home top_gradient: same 267px extent,
       same stops, same blur — compressed heights read as a different
       effect entirely. */
    height: 267px;
    z-index: 6;
    /* Same fade recipe as the add-to-home screen's top_gradient (Figma
       Rectangle 57790615), flipped upwards — one effect everywhere. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: linear-gradient(
        0deg,
        #0D0C0D 12%,
        rgba(13, 12, 13, 0.927016) 30%,
        rgba(13, 12, 13, 0.826923) 48%,
        rgba(13, 12, 13, 0.42) 68%,
        rgba(13, 12, 13, 0) 100%
    );
    /* Feather: without it the backdrop blur cuts in at the band's straight
       top edge as a visible crisp-to-blur seam across the device. */
    mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 98%);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 98%);
    pointer-events: none;
    animation: fadeBottom 13s var(--ease-in-out) infinite;
}

/* On wide viewports the band is an overlay OVER the device, not full-bleed:
   solid across the phone (366px with bezels/ring), feathered beyond it. */
@media (min-width: 500px) {
    .phone_fade-77f7e0c {
        /* Centering via `left`, NOT translateX — fadeBottom animates
           transform (the dip), which would override a translateX here. */
        left: calc(50% - min(260px, 50vw));
        right: auto;
        /* min() keeps the 70px mask feather inside .art's overflow clip on
           viewports between the 500px breakpoint and the band's full width. */
        width: min(520px, 100vw);
        /* Horizontal feather × vertical blur feather (both must survive). */
        mask-image:
            linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%),
            linear-gradient(0deg, #000 0%, #000 45%, transparent 98%);
        mask-composite: intersect;
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%),
            linear-gradient(0deg, #000 0%, #000 45%, transparent 98%);
        -webkit-mask-composite: source-in;
    }
}

/* The band dips down while screen A scrolls + the finger taps (11–27%) so
   the tapped card's Win/Lose row plays above the fade, then glides back.
   The gradient's own color equals the page bg, so the dipped band meets the
   page seamlessly even though its lower part is clipped by .art. */
@keyframes fadeBottom {
    0%, 9%     { opacity: 1; transform: translateY(0); }
    13%        { transform: translateY(110px); }
    26%        { transform: translateY(110px); }
    30.2%      { transform: translateY(0); }
    /* Hold full cover until the rising phone bottom clears .art's clip
       (~58.2% with this ease), then dissolve fast. Mirror on descent:
       be fully back BEFORE the bottom re-crosses the clip (~95.4%). */
    58%        { opacity: 1; transform: translateY(0); }
    62.5%      { opacity: 0; transform: translateY(0); }
    94.6%      { opacity: 0; transform: translateY(0); }
    95.5%      { opacity: 1; transform: translateY(0); }
    100%       { opacity: 1; transform: translateY(0); }
}

.art_fade_top-77f7e0c {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 150px;
    z-index: 6;
    /* Same fade recipe as the add-to-home screen's top_gradient (Figma
       Rectangle 57790615) — one effect everywhere. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: linear-gradient(
        180deg,
        #0D0C0D 30.77%,
        rgba(13, 12, 13, 0.927016) 45.19%,
        rgba(13, 12, 13, 0.826923) 60.58%,
        rgba(13, 12, 13, 0.42) 75.48%,
        rgba(13, 12, 13, 0) 100%
    );
    /* Feather mirrors phone_fade: ramps the backdrop blur out instead of
       cutting it at the band's straight bottom edge. */
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 98%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 98%);
    pointer-events: none;
    opacity: 0;
    animation: fadeTop 13s var(--ease-in-out) infinite;
}

@keyframes fadeTop {
    0%, 53.8%  { opacity: 0; }
    63.8%      { opacity: 1; }
    94.6%      { opacity: 1; }
    100%       { opacity: 0; }
}

/* ── Demo stage: the app screen; only screen A scrolls (in-app), the device
   itself moves for screen B ── */
.demo_stage-77f7e0c {
    /* Pin the responsive tokens: the demo phone is fixed-size, its internals
       must not react to the real viewport's media queries */
    --page-header-title-size: 34px;
    --page-header-pb: 10px;
    --story-ring-size: 64px;
    --story-img-size: 59px;
    --stories-row-pt: 12px;
    --stories-row-pb: 4px;
    --category-bar-height: 67px;
    --category-tab-height: 67px;
    --category-icon-size: 30px;
    /* How far below the screen's top edge the stage begins. Named because
       .demo_sticky::before has to cover exactly this strip. */
    --stage-top-inset: 40px;
    position: relative;
    /* 383 x 0.84 = 321.7px — flush with the 322px screen (no side gutters),
       and 383 layout-px ≈ the real 390px viewport, so fixed-px components
       keep near-real proportions. */
    width: 383px;
    height: 730px;
    transform-origin: top center;
    margin: var(--stage-top-inset) 0 0 calc(50% - 191.5px);
    animation: demoPan 13s var(--ease-in-out) infinite;
}

@keyframes demoPan {
    0%, 11.1%   { transform: scale(0.84) translateY(0); }
    16.6%       { transform: scale(0.84) translateY(-186px); }
    25%       { transform: scale(0.84) translateY(-186px); }
    30.2%, 100% { transform: scale(0.84) translateY(0); }
}

/* ── SCREEN A — events list ── */
.demo_screen_a-77f7e0c {
    position: absolute;
    inset: 0;
    animation: demoScreenA 13s var(--ease-out) infinite;
}

@keyframes demoScreenA {
    /* Fast fade-in at the seam so the settling phone never shows an empty
       screen between B's exit and A's return. */
    0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
    1.5%   { opacity: 1; transform: translateY(0) scale(1); }
    26.7%  { opacity: 1; transform: translateY(0) scale(1); }
    32%  { opacity: 0; transform: translateY(-14px) scale(0.97); }
    100% { opacity: 0; transform: translateY(-14px) scale(0.97); }
}

/* Sticky header stack: counter-shifts by the pan amount so it stays pinned
   to the screen top while the cards scroll beneath it (the real
   app-content__sticky-header behaviour) */
.demo_sticky-77f7e0c {
    position: relative;
    z-index: 2;
    /* Clears the island row — the status bar is absolute inside (in the
       ears), so the header needs its own top offset like the real app. */
    padding-top: 26px;
    background: #030303;
    box-shadow: 0 6px 18px rgba(5, 5, 6, 0.9);
    animation: demoSticky 13s var(--ease-in-out) infinite;
}

/* The real sticky header sits flush with the top of its scroller, so nothing can
   ever appear above it. Here the stage starts --stage-top-inset below the
   screen's top edge, and the games row — part of the scrolling feed since it was
   unpinned — rides up into that strip instead of vanishing behind the block.
   Continue the block's own fill over it so the feed passes behind there too.
   The block is counter-animated against the pan, so it and this strip hold
   still for the whole scroll; the strip is therefore a fixed cover, not a
   moving one. */
.demo_sticky-77f7e0c::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Reach the screen's top edge. The inset is in device px and this box is in
       stage units, so it divides by the stage's 0.84 scale (see .demo_stage's
       transform); negated because it goes up from the block's own top. */
    top: calc(var(--stage-top-inset) / -0.84);
    /* Overlap the block's fill instead of butting against it. 40/0.84 is 47.62
       stage px, so a flush bottom edge lands part-way across a device pixel —
       and the block's own edge lands part-way across the same one. Neither
       fraction covers it and they do not add up, so the feed shows through as a
       hairline. Two px lower the same fractional edge falls on the block's own
       fill, where it is the same colour and cannot show. That is also why the
       top edge needs no such treatment: .phone_screen behind it is that colour
       too. */
    bottom: calc(100% - 2px);
    background: inherit;
}

@keyframes demoSticky {
    0%, 11.1%   { transform: translateY(0); }
    16.6%       { transform: translateY(186px); }
    25%       { transform: translateY(186px); }
    30.2%, 100% { transform: translateY(0); }
}

/* Top gradient shade over the screen content (as in the real app) */
.demo_top_shade-77f7e0c {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    z-index: 3;
    background: linear-gradient(180deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.5) 45%, transparent 100%);
    pointer-events: none;
}

/* Real-iPhone status bar: device-level (child of .phone_screen, above the
   z3 shade and both demo screens — a real iPhone draws time/radios over any
   app). Centered on the island row; asymmetric padding centers each group
   within its ear. Phone coordinates — no stage scale applies here. */
.demo_status-77f7e0c {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 34px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px 0 42px;
    pointer-events: none;
}

.demo_status_time-77f7e0c {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text-title);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.demo_status_icons-77f7e0c {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    /* Icons were drawn for the 0.84-scaled stage; keep the same optical
       size now that the bar is phone-level. */
    transform: scale(0.84);
    transform-origin: right center;
}

.demo_cards-77f7e0c {
    display: flex;
    flex-direction: column;
    /* Real events list: .events { gap: 13px; padding-top: 20px } */
    gap: 13px;
    padding: 20px var(--space-16) 0;
}

/* Real BottomNav host — screen A only (event page has no tab bar) */
.demo_navhost-77f7e0c {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 120px;
    z-index: 4;
    transform: translateZ(0);
    pointer-events: none;
    overflow: hidden;
    animation: navOnA 13s var(--ease-out) infinite;
}

@keyframes navOnA {
    0%, 28%  { opacity: 1; }
    34.6%      { opacity: 0; }
    /* Stay hidden while screen B (event page, no tab bar) is on; return
       only as B cross-fades back to A at the loop seam. */
    96.4%      { opacity: 0; }
    100%       { opacity: 1; }
}

/* ── SCREEN B — event page ── */
.demo_screen_b-77f7e0c {
    position: absolute;
    inset: 0;
    animation: demoScreenB 13s var(--ease-out) infinite;
}

@keyframes demoScreenB {
    0%, 30.2% { opacity: 0; transform: translateY(26px) scale(0.98); }
    34.6%  { opacity: 1; transform: translateY(0) scale(1); }
    98%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

.demo_badge_slot-77f7e0c {
    position: absolute;
    top: 44px;
    left: 14px;
    width: 36px;
    height: 18px;
    z-index: 2;
}

.demo_badge_slot-77f7e0c > * {
    bottom: 1px !important;
}

.demo_stream_img-77f7e0c {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 13%;
}

.demo_video_frame-77f7e0c {
    position: relative;
    overflow: hidden;
    /* Clears the Dynamic Island row (island bottom = phone y 52 → stage
       ~14 + gap): the stream must not peek out around the island. */
    margin-top: 22px;
}

.demo_video_frame-77f7e0c::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.05) 48%, transparent 64%);
    background-size: 220% 100%;
    animation: demoShimmer 2.2s linear infinite;
    z-index: 1;
    pointer-events: none;
}

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



/* The filled Win button flashes as the finger presses it */
.demo_press_target-77f7e0c {
    animation: demoYesPress 13s ease infinite;
}

@keyframes demoYesPress {
    0%, 70.3% { transform: scale(1); }
    71.8% { transform: scale(0.96); filter: brightness(1.3); }
    73.3% { transform: scale(1); filter: none; }
    100% { transform: scale(1); }
}

/* ── Win notification: warp glass tokens (design-stand toast 129:3365),
   delivered to the ONBOARDING screen itself, above the top fade band —
   the viewer's phone gets the push, not the phone inside the demo ── */
.demo_toast-77f7e0c {
    position: absolute;
    top: 18px;
    left: 14px;
    right: 14px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-14);
    border-radius: 30px;
    background: rgba(30, 30, 30, 0.35);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    animation: demoToast 13s var(--ease-spring) infinite;
    pointer-events: none;
}

@keyframes demoToast {
    0%, 74.5% { opacity: 0; transform: translateY(-72px) scale(0.96); }
    78.5%  { opacity: 1; transform: translateY(0) scale(1); }
    95.7%  { opacity: 1; transform: translateY(0) scale(1); }
    98.4%, 100% { opacity: 0; transform: translateY(-30px) scale(0.97); }
}

.demo_toast_icon-77f7e0c {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: rgba(74, 222, 128, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
    flex-shrink: 0;
    mix-blend-mode: plus-lighter;
}

.demo_toast_body-77f7e0c {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.demo_toast_title-77f7e0c {
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    line-height: 18px;
    letter-spacing: -0.2px;
    color: #FFFFE2;
}

.demo_toast_sub-77f7e0c {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 16px;
    color: rgba(255, 255, 226, 0.6);
}

/* ── Finger — taps a card's Win, then the filled Win on the event page ── */
.demo_finger-77f7e0c {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.28);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    animation: demoFinger 13s var(--ease-in-out) infinite;
    z-index: 3;
}

@keyframes demoFinger {
    0%, 16.6% { opacity: 0; transform: translate(230px, 460px) scale(1); }
    18.7%  { opacity: 1; transform: translate(96px, 608px) scale(1); }
    20.1%  { transform: translate(96px, 608px) scale(0.7); }
    22.2%  { opacity: 1; transform: translate(96px, 608px) scale(1); }
    25%  { opacity: 0; transform: translate(130px, 640px) scale(1); }
    56.1%  { opacity: 0; transform: translate(150px, 700px) scale(1); }
    63.1%  { opacity: 1; transform: translate(89px, 620px) scale(1); }
    70.1%  { transform: translate(89px, 620px) scale(0.7); }
    73%  { opacity: 1; transform: translate(89px, 620px) scale(1); }
    76%  { opacity: 0; transform: translate(130px, 690px) scale(1); }
    100% { opacity: 0; transform: translate(230px, 730px) scale(1); }
}

/* ── Accessibility: reduced motion → one static composition (screen B) ── */
@media (prefers-reduced-motion: reduce) {
    .hero-77f7e0c,
    .rules_wrap-77f7e0c,
    .bottom_bar-77f7e0c,
    .art-77f7e0c {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .rain_icon-77f7e0c {
        animation: none;
        transform: rotate(var(--rot));
    }
    .demo_screen_b-77f7e0c {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .demo_stage-77f7e0c {
        animation: none;
        transform: scale(0.84);
    }
    .phone-77f7e0c {
        animation: none;
        transform: translateY(var(--rise));
    }
    .phone_fade-77f7e0c {
        animation: none;
        opacity: 0;
    }
    .phone_screen-77f7e0c::after {
        animation: none;
        opacity: 0;
    }
    .art_fade_top-77f7e0c {
        animation: none;
        opacity: 1;
    }
    .demo_navhost-77f7e0c {
        animation: none;
        opacity: 0;
    }
    .demo_sticky-77f7e0c {
        animation: none;
    }
    .demo_press_target-77f7e0c {
        animation: none;
    }
    .demo_screen_a-77f7e0c,
    .demo_toast-77f7e0c,
    .demo_finger-77f7e0c,
    .demo_video_frame-77f7e0c::after {
        animation: none;
        opacity: 0;
    }
}

/* Page-level shade behind the hero/rules zone: fades in while the checklist
   is open, so the text that climbs over the demo sits on the same soft
   gradient+blur recipe as the fade bands instead of raw animation. */
.hero_shade-77f7e0c {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Taller so the shade reaches up behind the top hero line ("Welcome to")
       which climbs over the demo card when the checklist expands. */
    height: 66%;
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* Darkness builds earlier (0.5 by 14%) so the upper text isn't read
       against the bright Win/Lose card behind it. */
    background: linear-gradient(
        180deg,
        rgba(13, 12, 13, 0) 0%,
        rgba(13, 12, 13, 0.5) 14%,
        rgba(13, 12, 13, 0.85) 30%,
        rgba(13, 12, 13, 0.95) 44%,
        #0D0C0D 60%
    );
    /* Mask onset raised (46% vs 55%) so the darkened top actually shows,
       while the first 2% still feathers the backdrop-blur edge. */
    mask-image: linear-gradient(180deg, transparent 2%, #000 46%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 46%, #000 100%);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero_shade__on-77f7e0c {
    opacity: 1;
}

/* ── Entrance: text/buttons rise in first, the phone fades in AFTER ──
   One-shot fadeUp on the copy blocks (staggered), then a delayed opacity
   fade on the device zone so the animated phone appears once the text has
   landed. The phone's own 13s loops keep running underneath — .art is just
   invisible until the delayed fade. Neutralized in reduced-motion below. */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes artIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Hero text block ── */
.hero-77f7e0c {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 25px;
    animation: fadeUp 0.5s var(--ease-out) both;
}

.hero_welcome-77f7e0c {
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    line-height: 22px;
    letter-spacing: -0.43px;
    color: var(--color-text);
    opacity: 0.3;
}

.hero_brand-77f7e0c {
    font-size: 42px;
    font-weight: var(--fw-bold);
    line-height: 55px;
    letter-spacing: -2px;
    color: var(--color-text);
}

.hero_tagline-77f7e0c {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 27px;
    color: var(--color-text);
    opacity: 0.5;
}

/* ── Rules pill ── */
.rules_wrap-77f7e0c {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-20) var(--space-16) var(--space-32);
    animation: fadeUp 0.5s var(--ease-out) 0.08s both;
}

.rules_pill-77f7e0c {
    background: #191919;
    border: none;
    border-radius: 20px;
    padding: 5px var(--space-10);
    display: flex;
    flex-direction: column;
    /* No gap: the collapsed 0-height body must not reserve space. */
    gap: 0;
    align-items: flex-start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Apple-sheet-like expander: grid-template-rows 0fr -> 1fr animates the
   checklist's intrinsic height; the inner fades/slides in slightly behind
   the height so it reads as one springy motion. */
.rules_body-77f7e0c {
    display: grid;
    grid-template-rows: 0fr;
    /* Width must collapse too: otherwise the checklist's intrinsic width
       stretches the CLOSED pill and the caption stops reading centered. */
    max-width: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        max-width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.rules_body__open-77f7e0c {
    grid-template-rows: 1fr;
    max-width: 340px;
}

.rules_body_inner-77f7e0c {
    min-height: 0;
    width: max-content;
    max-width: 76vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    /* No padding-top when closed: an 8px padding box survives the 0fr grid
       collapse and pushes the caption above the pill's vertical centre. The
       spacer is applied only in the open state below. */
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.25s ease,
        transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.rules_body__open-77f7e0c .rules_body_inner-77f7e0c {
    padding-top: var(--space-8);
    opacity: 1;
    transform: none;
    transition:
        opacity 0.35s ease 0.08s,
        transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.rules_head-77f7e0c {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    height: 22px;
    /* Left pad carries +16px (12px chevron + 4px gap) so the caption's
       optical center matches the pill's center in the collapsed state. */
    padding: 0 var(--space-8) 0 calc(var(--space-8) + 16px);
    align-self: center;
    background: none;
    border: none;
}

.rules_caption-77f7e0c {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 22px;
    color: #545454;
    white-space: nowrap;
}

.rules_chevron-77f7e0c {
    display: flex;
    align-items: center;
    /* The registry Icon box is advance-width (8.7px at size 12); keep the
       chevron occupying the same 12px slot the legacy svg had so the
       centered head row (padding-compensated for a 12px chevron) does
       not shift. */
    width: 12px;
    justify-content: center;
    color: #434343;
    transition: transform var(--dur-base) var(--ease-out);
}

.rules_chevron__up-77f7e0c {
    transform: rotate(180deg);
}

.rule_row-77f7e0c {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rule_check-77f7e0c {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-8);
    color: #434343;
}

.rule_check__on-77f7e0c {
    color: var(--color-text);
}

.rule_label-77f7e0c {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 22px;
    color: #6F6F6F;
    white-space: nowrap;
}

.rule_link-77f7e0c {
    text-decoration: underline;
    color: #6F6F6F;
}

/* ── Bottom Go bar ── */
.bottom_bar-77f7e0c {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--color-border);
    background: #0D0C0D;
    padding: var(--space-10) var(--space-16) max(25px, env(safe-area-inset-bottom));
    animation: fadeUp 0.5s var(--ease-out) 0.16s both;
}

.go_btn-77f7e0c {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    font-size: var(--fs-17);
    font-weight: var(--fw-medium);
    line-height: 22px;
    letter-spacing: -0.43px;
    color: var(--color-on-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast);
}

.go_btn-77f7e0c:active {
    transform: scale(0.98);
}

.go_btn__disabled-77f7e0c {
    opacity: 0.4;
}


/* Reconnect overlay — variant 4: non-blocking glass pill.
   Shown while the health stream is down (typically during a deploy). The app stays
   visible; a faint shield swallows taps (money-safety: no bet/deposit fires
   while the server is unreachable) and a top glass pill signals the reconnect.

   The literal colors (rgba(20,20,20,0.5) glass, #FFFFE2 label, #31D158 check,
   both under plus-lighter) intentionally mirror the established glass-pill
   idiom in toast.module.css rather than the token palette; keep them in sync
   with the toast if that idiom is ever tokenized. */

.shield-5056853 {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: auto; /* block interaction until the stream is back */
  animation: overlay-fade 0.2s ease-out;
}

.pill-5056853 {
  position: fixed;
  top: max(
    var(--space-12),
    calc(env(safe-area-inset-top) + var(--tg-content-safe-area-inset-top, 0px) + var(--space-8))
  );
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  height: 40px;
  padding: 0 var(--space-16) 0 var(--space-12);
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-round);
  white-space: nowrap;
  pointer-events: none;
  animation: pill-drop 0.3s ease-out;
}

.spinner-5056853 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.check-5056853 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #31D158;
  mix-blend-mode: plus-lighter;
  animation: check-pop 0.25s ease-out;
}

.label-5056853 {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: #FFFFE2;
  mix-blend-mode: plus-lighter;
}

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

@keyframes pill-drop {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes check-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}


.header-17413e8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(20px, calc(var(--safe-top) + 8px)) 16px var(--page-header-pb);
}

.header__title-17413e8 {
  font-size: var(--page-header-title-size);
  font-weight: var(--fw-bold);
  letter-spacing: 0.4px;
  color: var(--color-text);
  /* The pills win the row: with the free-bet pill added (#338) a long title
     on a narrow screen must ellipsise rather than push them off the edge. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Balance + free-bet pills, kept together at the right end of the header. */
.header__pills-17413e8 {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}


/* `--balance-collapse` (0 = full, 1 = compact) is written onto .page as an
   inline style by the Profile route, from .sheet_content's scroll offset, and
   inherits down into ProfileBalance (#330).

   The full-size values are snapshotted here rather than read straight from
   :root because .balance_area *redefines* --balance-font-size and
   --balance-amount-height; a custom property that references itself on the
   same element is a cycle and resolves to nothing. Reading them one level up
   keeps the responsive @media values in global.css as the single source. */
.page-a10e896 {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;
  background: var(--color-bg);
  overflow: hidden;

  --balance-pt-full: var(--profile-balance-pt);
  --balance-gap-full: var(--profile-balance-gap);
  --balance-font-full: var(--balance-font-size);
  --balance-row-full: var(--balance-amount-height);

  /* Compact end of the ramp. The amount is re-typeset smaller, not scaled, so
     it stays crisp and readable once folded. */
  --balance-pt-shrink: var(--space-32);
  --balance-gap-compact: var(--space-8);
  --balance-font-compact: var(--fs-heading);
  --balance-row-compact: var(--space-32);
}

@media (max-height: 700px) {
  .page-a10e896 {
    --balance-pt-shrink: var(--space-12);
    --balance-gap-compact: var(--space-6);
    --balance-font-compact: var(--fs-22);
    --balance-row-compact: var(--space-24);
  }
}

/* Layer 1 — warm orange-brown radial gradient behind everything */
.gradient_bg-a10e896 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 480px;
  background: radial-gradient(
    ellipse 120% 100% at 50% -10%,
    #A0522D 0%,
    #7B3F1D 15%,
    #5C2E14 30%,
    #3D1F0D 45%,
    #1F0F06 60%,
    #0A0502 75%,
    #030303 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Layer 2 — balance + action buttons, sit on the gradient.
   Folds towards a compact form as --balance-collapse goes 0 → 1 (#330). Only
   the block's own height changes; .sheet is `flex: 1`, so every pixel given up
   here is handed to the card list below with no negative margins or transforms
   to keep in sync. */
.balance_area-a10e896 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Mirror page_header's safe-area formula so fullscreen leaves room at the
     top instead of butting the balance against the notch/status bar (bug #1).
     The safe-area floor still wins when collapsed, so the compact form keeps a
     sane top inset on a notched device. */
  padding-top: max(
    calc(var(--balance-pt-full) - var(--balance-collapse, 0) * var(--balance-pt-shrink)),
    calc(var(--safe-top) + 8px)
  );
  gap: calc(
    var(--balance-gap-full)
    - var(--balance-collapse, 0) * (var(--balance-gap-full) - var(--balance-gap-compact))
  );

  /* Consumed by profile_balance.module.css; scoped here so nothing outside
     this block sees the collapsed sizing. */
  --balance-font-size: calc(
    var(--balance-font-full)
    - var(--balance-collapse, 0) * (var(--balance-font-full) - var(--balance-font-compact))
  );
  --balance-amount-height: calc(
    var(--balance-row-full)
    - var(--balance-collapse, 0) * (var(--balance-row-full) - var(--balance-row-compact))
  );
}

/* A scroll-linked size change is motion. Pin the block to its full form for
   anyone who asked for less of it — the list simply scrolls under a static
   balance, which is the pre-#330 behaviour. */
@media (prefers-reduced-motion: reduce) {
  .balance_area-a10e896 {
    --balance-collapse: 0;
  }
}

/* Layer 3 — sheet starts immediately below the action buttons */
.sheet-a10e896 {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ProfileTopBar — absolute overlay pinned to the sheet's top edge:
   sheet_content scrolls UP underneath and dissolves into the fade below.
   The 1px edge and the dark fill sit on this ONE element — an edge on
   .sheet left a 1px transparent hairline between edge and fill through
   which scrolling content showed. The fill stays solid until ~88% so the
   avatar/name row hides completely, then a short fade lets content emerge
   softly. Corner radius mirrors .sheet so edge and fill hug the sheet's
   clipped corners. */
.sheet_header-a10e896 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--sheet-header-height);
  border-top: 1px solid var(--color-neutral-lose);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  background: linear-gradient(
    180deg,
    #030303 0%,
    #030303 88%,
    transparent 100%
  );
}

/* Sheet content area — the only scrollable region on the profile page.
   Top padding clears the absolute header so nothing hides under it at rest. */
.sheet_content-a10e896 {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: calc(var(--sheet-header-height) + 10px) 16px var(--sheet-content-pb);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  min-height: 0;
}

/* Fade-to-black overlay above the bottom tab bar, so scrolling content
   dissolves into the floating nav pill instead of clipping at it. */
.bottom_fade-a10e896 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(85px + var(--safe-bottom));
  background: linear-gradient(
    180deg,
    rgba(3, 3, 3, 0) 0%,
    rgba(3, 3, 3, 0.85) 48%,
    #030303 100%
  );
  pointer-events: none;
  z-index: 5;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Rides out through the bottom edge with the tab bar and its glow while a field
   has the keyboard up (#376) — the fade exists to hide content behind the nav
   pill, so once the pill is gone it is only covering the focused field.

   Slid out rather than hidden, and on the tab bar's exact timing, so the two
   leave and return as one movement; `display: none` would drop the gradient in
   a single frame while the bar was still sliding. */
.bottom_fade__lowered-a10e896 {
  transform: translateY(100%);
}


.balance-5cbad33 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  /* Closes up as the profile balance area folds on scroll (#330);
     --balance-collapse is set by the Profile route, 0 everywhere else.
     Stops at --space-4 rather than 0: with the captions folded away, the
     balance and free-bet amounts would otherwise stack into one block of
     digits. */
  gap: calc(
    var(--space-8) - var(--balance-collapse, 0) * (var(--space-8) - var(--space-4))
  );
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The free-bet caption and amount are one stack, so what .balance centres is
   the group, not the amount. Without its own column layout the group falls back
   to block flow: .balance__row stretches to the (wider) caption's width and the
   amount hugs its left edge (#350). Mirroring the parent's centring keeps the
   row content-sized, exactly like the main balance row. */
.balance__group-5cbad33 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.balance__label-5cbad33 {
  --label-line: 21px;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: var(--label-line);
  /* The caption is the first thing to go when the balance area folds (#330):
     the amount alone still reads, and this is the tallest thing that can be
     dropped outright. Fades out over the first half of the ramp. */
  max-height: calc(var(--label-line) * (1 - var(--balance-collapse, 0)));
  opacity: calc(1 - var(--balance-collapse, 0) * 2);
  overflow: hidden;
}

.balance__row-5cbad33 {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  height: var(--balance-amount-height);
}

.balance__amount-5cbad33 {
  font-family: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--balance-font-size);
  line-height: var(--balance-amount-height);
  text-align: center;
  letter-spacing: 0.38px;
  color: var(--color-text);
  flex: none;
  flex-grow: 0;
}

.balance__currency-5cbad33 {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 6px;
  color: #CBBFB4;
}


.top_bar-4e9cd61 {
  display: flex;
  align-items: center;
  height: var(--sheet-header-height);
  padding: 0 25px;
  position: relative;
}

.top_bar__left-4e9cd61 {
  flex-shrink: 0;
}

.top_bar__avatar-4e9cd61 {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.top_bar__avatar_placeholder-4e9cd61 {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: repeating-conic-gradient(#3D3D3F 0% 25%, var(--color-inset) 0% 50%) 50% / 10px 10px;
  flex-shrink: 0;
}

.top_bar__name-4e9cd61 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 70px;
  pointer-events: none;
}

.top_bar__right-4e9cd61 {
  flex-shrink: 0;
  margin-left: auto;
}


.card-e3074d0 {
  margin: 0;
  padding: var(--space-16);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.title-e3074d0 {
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: 21px;
}

.input_row-e3074d0 {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
}

/* `min-width: 0` is load-bearing: a flex item defaults to `min-width: auto`,
   which for an `<input>` resolves to the UA's intrinsic field width (`size=20`,
   ~212px here). Without it the field refuses to shrink past that despite
   `flex: 1`, the row overflows the card, and `.card { overflow: hidden }` clips
   the button off the right edge on narrow screens. */
.input-e3074d0 {
  flex: 1;
  min-width: 0;
  height: 42px;
  background: var(--color-inset);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  color: var(--color-text-title);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  padding: 0 16px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.input-e3074d0::placeholder {
  color: #666;
}

.input-e3074d0:focus {
  border-color: rgba(255, 126, 6, 0.5);
}

/* `flex-shrink: 0` keeps the button at its full label width — the label swaps
   between Paste and Redeem ("Вставить" → "Активировать" in ru, 4 characters
   wider), and the input absorbs the difference rather than the row overflowing. */
.redeem_btn-e3074d0 {
  flex-shrink: 0;
  height: 42px;
  padding: 0 18px;
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-card);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.31px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.redeem_btn-e3074d0:active {
  transform: scale(0.97);
}

.redeem_btn__disabled-e3074d0 {
  opacity: 0.5;
  cursor: not-allowed;
}



/* Quick-add amount chips shared by the money sheets. */
.chips-8d0e375 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-10) 25px;
    gap: 5px;
}

/* Hidden rather than unmounted, so the row is one class away from returning. */
.chips__hidden-8d0e375 {
    display: none;
}

.chip-8d0e375 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-6) var(--space-10);
    height: 32px;
    background: rgba(39, 39, 39, 0.8);
    border: none;
    border-radius: 1000px;
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: 20px;
    text-align: center;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Hover and press feedback, for the rows that opt into the tap animation. */
.chip__animated-8d0e375 {
    transition: transform 0.12s, background 0.15s;
}

.chip__animated-8d0e375:hover {
    background: rgba(50, 50, 50, 0.85);
}

.chip__animated-8d0e375:active {
    transform: scale(0.94);
    background: rgba(60, 60, 60, 0.9);
}

/* The `chipBump` keyframes live in global.css. */
.chip__bump-8d0e375 {
    animation: chipBump 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


.sheet-98b4822 {
    padding-bottom: 24px;
}

.sheet_top-98b4822 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-98b4822 {
    padding: 4px 0 12px;
}

.title-98b4822 {
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.31px;
    color: var(--color-text-title);
}

.body-98b4822 {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: 0 16px;
}

.explainer-98b4822 {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 18px;
    color: #777777;
    text-align: center;
}

.active_note-98b4822 {
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    line-height: 20px;
    color: var(--color-text);
    text-align: center;
}

.periods-98b4822 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.period-98b4822 {
    flex: 1 1 40%;
    height: 44px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface-card);
    color: var(--color-text);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
}

.period__active-98b4822 {
    border-color: var(--color-accent);
    background: var(--color-surface-elevated);
}

.error-98b4822 {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 18px;
    color: var(--color-error);
    text-align: center;
}

.submit-98b4822 {
    height: 50px;
    border: none;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-text);
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.submit-98b4822:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Irreversibility confirmation, mirroring the disconnect-wallet popup so the
   two destructive confirmations in the app read the same way. */
.confirm_backdrop-98b4822 {
    position: fixed;
    inset: 0;
    z-index: 9002;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.confirm_card-98b4822 {
    width: 100%;
    max-width: 330px;
    background: #0E0E10;
    border: 1px solid #333333;
    border-radius: var(--radius-card);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.confirm_title-98b4822 {
    font-size: var(--fs-17);
    font-weight: var(--fw-semibold);
    line-height: 22px;
    letter-spacing: -0.31px;
    color: var(--color-text);
    text-align: center;
}

.confirm_subtitle-98b4822 {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    line-height: 18px;
    color: #777777;
    text-align: center;
}

.confirm_actions-98b4822 {
    display: flex;
    gap: var(--space-8);
    width: 100%;
    margin-top: 14px;
}

.confirm_btn-98b4822 {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: var(--radius-card);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.23px;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s;
}

.confirm_btn-98b4822:active {
    transform: scale(0.97);
}

.confirm_btn__neutral-98b4822 {
    background: #2F2F2F;
}

.confirm_btn__danger-98b4822 {
    background: #DF3535;
}


.page__service_unavailable-df510ee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 0.5rem;
  color: #A8A8A8;
}

.page__service_unavailable-df510ee h1 {
  font-size: 1.5rem;
  color: var(--color-text-title);
}

.page__service_unavailable-df510ee p {
  font-size: 0.9rem;
}


.card-ce7344d {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
}

.row-ce7344d {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 16px;
  gap: var(--space-4);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.row-ce7344d:hover {
  background: rgba(255, 255, 255, 0.02);
}

.row-ce7344d:active {
  background: rgba(255, 255, 255, 0.04);
}

.row__icon-ce7344d {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-15);
  flex-shrink: 0;
  color: var(--color-text);
}

.row__label_wrap-ce7344d {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 11px 0 11px 4px;
  min-width: 0;
}

.row__label-ce7344d {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: 21px;
}

.row__chevron-ce7344d {
  color: #3D3D3F;
  font-size: var(--fs-15);
  flex-shrink: 0;
}

.divider-ce7344d {
  height: 0.5px;
  background: #3D3D3F;
  margin-left: 52px;
}


.video_container-45162a6 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #131313;
}


.video_iframe-45162a6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.no_video-45162a6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 220px;
  background: #131313;
}

.no_video__eyes-45162a6 {
  font-size: 64px;
  opacity: 0.5;
  filter: grayscale(1);
}

.no_video__text-45162a6 {
  margin-top: 8px;
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}


/* Floating top-of-screen notification toast, shared by bet/deposit success
   confirmations (success tone) and promo errors (error tone). The tone classes
   reproduce each caller's original styling exactly; the container is common. */
.toast-c01e6f4 {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 30px;
  padding: var(--space-4);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  width: fit-content;
  white-space: nowrap;
  transition: top 0.3s ease-out;
  pointer-events: none;
}

.toast__visible-c01e6f4 {
  /* Clear the notch/status bar in a fullscreen Mini App, mirroring the profile
     safe-area fix so the toast never renders under the system UI. */
  top: max(16px, calc(var(--safe-top) + 8px));
}

.toast__inner-c01e6f4 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 6px 8px 7px;
}

.toast__icon-c01e6f4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast__text-c01e6f4 {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFE2;
}

/* ── Success tone — short green confirmation (bet placed / deposit confirmed) ── */
.toast__success-c01e6f4 .toast__icon-c01e6f4 {
  mix-blend-mode: plus-lighter;
  color: #31D158;
}

.toast__success-c01e6f4 .toast__text-c01e6f4 {
  mix-blend-mode: plus-lighter;
}

/* ── Error tone — amber notice that can hold a longer message (promo) ── */
.toast__error-c01e6f4 {
  max-width: calc(100vw - 32px);
}

.toast__error-c01e6f4 .toast__inner-c01e6f4 {
  gap: var(--space-6);
  padding: 6px 12px 7px;
  overflow: hidden;
}

.toast__error-c01e6f4 .toast__icon-c01e6f4 {
  color: #FF9F0A;
}

.toast__error-c01e6f4 .toast__text-c01e6f4 {
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}


.section-3f4bd62 {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Only pad the bottom when rows are present: adds safe-area clearance so the
   last row clears the bottom edge / floating nav. The empty state shrinks to
   its content instead of leaving a tall scrollable box. */
.section__populated-3f4bd62 {
  padding-bottom: var(--safe-bottom);
}

.section__title-3f4bd62 {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: #848484;
  letter-spacing: -0.31px;
  line-height: 21px;
  padding: 0 16px;
}

.card-3f4bd62 {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.row-3f4bd62 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px;
  gap: var(--space-10);
}

.icon-3f4bd62 {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.icon__deposit-3f4bd62 {
  background: linear-gradient(156.88deg, var(--color-accent) 14.96%, var(--color-accent-press) 85.04%);
  color: var(--color-text);
}

.icon__withdrawal-3f4bd62 {
  background: linear-gradient(156.88deg, var(--color-accent) 14.96%, var(--color-accent-press) 85.04%);
  color: var(--color-text);
}

.info-3f4bd62 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.info__title-3f4bd62 {
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--color-text);
  letter-spacing: -0.4px;
  line-height: 22px;
}

.info__date-3f4bd62 {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: #99989E;
  letter-spacing: 0.1px;
  line-height: 18px;
}

.amount_col-3f4bd62 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.amount-3f4bd62 {
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--color-text);
  letter-spacing: -0.6px;
  line-height: 22px;
}

.amount__success-3f4bd62 {
  color: #31D158;
}

.amount__failed-3f4bd62 {
  color: var(--color-error);
}

.status-3f4bd62 {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: #99989E;
  letter-spacing: 0.1px;
  line-height: 18px;
}

.status__success-3f4bd62 {
  color: #2FD159;
}

.status__failed-3f4bd62 {
  color: var(--color-error);
}

.divider-3f4bd62 {
  height: 0.5px;
  background: #3D3D3F;
  margin-left: 62px;
}

.empty-3f4bd62 {
  padding: 24px 16px;
  text-align: center;
  font-size: var(--fs-15);
  color: #878787;
}


/* Shell (scrim, surface, drag handle) comes from bottom_sheet.module.css.
   What is left here is this sheet's own layout: three sections 35px apart and
   the bottom inset. */
.sheet-aaff62b {
    align-items: stretch;
    gap: 35px;
    padding-bottom: 25px;
}

/* Keeps the drag handle glued to the title — the sheet's 35px gap must only
   separate that group from the amount and the container below. */
.sheet_top-aaff62b {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.header-aaff62b {
    padding: 10px 25px;
}

.title-aaff62b {
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
    line-height: 22px;
    letter-spacing: -0.5px;
    color: var(--color-text);
}

.amount_section-aaff62b {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 25px;
    gap: var(--space-4);
}

.amount_row-aaff62b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.amount_display-aaff62b {
    font-size: var(--fs-amount);
    font-weight: var(--fw-semibold);
    /* Fixed line box: a shrinking font must not change the input's height
       (otherwise the whole sheet shifts from the top) */
    height: 60px;
    line-height: 60px;
    color: var(--color-text);
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;
    flex: 1;
    caret-color: var(--color-text);
    -moz-appearance: textfield;
}

.amount_display-aaff62b::-webkit-outer-spin-button,
.amount_display-aaff62b::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tone and centring come from hint.module.css; this is the type scale. */
.hint-aaff62b {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 20px;
}

.container-aaff62b {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.methods-aaff62b {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
    gap: var(--space-4);
}

.method_tab-aaff62b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    gap: var(--space-4);
    height: 44px;
    border-radius: var(--radius-card);
    border: 0.5px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

.method_tab__active-aaff62b {
    background: #414141;
    border-color: rgba(255, 255, 255, 0.10);
}

.method_tab__inactive-aaff62b {
    background: var(--color-surface);
    cursor: not-allowed;
}

.method_icon-aaff62b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

.method_label-aaff62b {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: 20px;
    letter-spacing: -0.23px;
    text-align: center;
    display: flex;
    align-items: center;
    mix-blend-mode: plus-lighter;
    flex: none;
}

.method_label__active-aaff62b {
    color: var(--color-text);
}

.method_label__inactive-aaff62b {
    color: #929294;
}

.method_icon__inactive-aaff62b {
    opacity: 0.5;
}

.soon_badge-aaff62b {
    position: absolute;
    top: 4px;
    right: -6px;
    font-size: 9px;
    font-weight: var(--fw-medium);
    line-height: 13.18px;
    letter-spacing: -0.15px;
    color: #808081;
    white-space: nowrap;
}

.button_container-aaff62b {
    padding: 10px 25px 0;
}

.action_btn-aaff62b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: var(--space-10);
    border: none;
    border-radius: var(--radius-card);
    background: #FFFFFF;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 21px;
    letter-spacing: -0.31px;
    text-align: center;
    color: #030303;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}

.action_btn__disabled-aaff62b {
    opacity: 0.5;
    cursor: default;
}