.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: var(--color-text);
  color: var(--color-bg);
  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;
}


/* Boot splash — issue #838.
   Rendered by the top-level `<Transition>` in `routes::App` before its i18n
   and auth resources resolve, and nothing else is mounted alongside it: this
   is the first thing the WASM bundle ever paints. No entrance animation, no
   delayed appearance — the page skeletons elsewhere hold off for ~180ms
   because a flash of skeleton is worse than a short wait on content that is
   already visible; here there is nothing else on screen yet, so any delay
   would just widen the blank window this component exists to close.

   The ring reuses the reconnect pill's spinner idiom
   (`frontend/src/sse/overlay.module.css`) at a size fit for a full screen
   rather than a pill, so the app's two "something is loading" moments read as
   one visual language. */

.page-1d035b2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background: var(--color-bg);
}

.spinner-1d035b2 {
  width: var(--space-32);
  height: var(--space-32);
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-circle);
  animation: spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner-1d035b2 { animation: none; }
}


.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 (graph @nick/warp, node #38). Every
   sibling card in the sheet carries the same pair. */
.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(var(--color-separator) 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;
}

/* A row, not a column: this header now carries TWO pills — free bet and
   balance — and their order and gap mirror the page header
   (`page_header.module.css .header__pills`). With no free bet the component
   renders nothing and the row collapses back to the balance alone. */
.header_balance-54c0f2f {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  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);
  }
}

/* ── Terms of the bet, stated where consent is given ──────────────────────
   The multiple this option is paying and what the entered stake would be
   credited at it, with the note saying what those figures are (graph
   @nick/warp, node #82). It sits under the amount field's own caption and
   above the free-bet switch, so the reading order is: stake, its bound, what
   it would pay, how it is funded, then the button.

   Same 25px gutter as the rest of section 2 — the block is a child of
   `.section_amount`, so the padding is inherited rather than repeated. */
.terms-54c0f2f {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.terms_row-54c0f2f {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  font-size: var(--fs-base);
  line-height: 20px;
  font-variation-settings: 'wdth' 100;
}

.terms_label-54c0f2f {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

.terms_figures-54c0f2f {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
}

/* The multiple the entered stake would be credited at, in the card's "1:X"
   form with one more decimal, kept quieter than the money figure beside it so
   the two do not compete. Absent for a free bet. */
.terms_odds-54c0f2f {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.terms_payout-54c0f2f {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Caption scale, not body: the note qualifies the row above it rather than
   competing with it. It wraps freely — it is a sentence, and clipping it would
   drop exactly the half that keeps the figures honest. */
.terms_note-54c0f2f {
  font-size: var(--fs-caption);
  line-height: 16px;
  color: var(--color-text-muted);
  font-variation-settings: 'wdth' 100;
}


.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, height ceiling, inner
   layout, bottom padding) 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;
    /* The ceiling is the area the user can actually see (--sheet-ceiling, see
       global.css), never a constant: a constant below a sheet's natural
       height clips it on every screen alike (onboarding_sheet.module.css
       measured that). Override with `--bs-sheet-max-height` on `sheet_class`.
       What does not fit scrolls inside the sheet, so its top — handle, title,
       close control — stays on screen (graph @nick/warp, node #415). */
    max-height: var(--bs-sheet-max-height, var(--sheet-ceiling));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    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 — which
   also means the browser will not scroll an overflowing sheet under a finger;
   the pointer handlers in bottom_sheet/gesture.rs do that instead. A scroller nested in
   the sheet still pans natively: the browser stops its touch-action walk there. */
.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;
}


/* A displaced sheet disappears at once instead of sliding out.
   An ordinary close (tap outside, swipe down) keeps its animation — it belongs
   there. But when ANOTHER sheet displaces this one, its exit lasts exactly as
   long as the new one's entrance, and for a third of a second there are two
   sheets and two backdrops overlapping. */
.sheet__displaced-4f1cbaa,
.backdrop__displaced-4f1cbaa {
  transition: none !important;
  opacity: 0 !important;
  pointer-events: none;
}


/* ── 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;
  --bs-sheet-max-height: min(92vh, var(--sheet-ceiling));
  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 (run + ?) -------------------------------------- */
.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 ─────────────────────────────────────────────────────── */
/* The same language as the shared toast (`toast.module.css`): a translucent
   ground under a strong blur, a hairline border and a pill radius. This used to
   carry a visible 1px border and a 14px radius, which read as a foreign
   element.

   And `fixed`, not `absolute`. Sitting inside the sheet, the toast fell under
   its `overflow: hidden` with a 60px radius and had its top corners clipped.
   Fixed, it escapes the clip and sits under Telegram's chrome, like the shared
   toast. */
.toast-7e306c1 {
  position: fixed;
  top: max(16px, calc(var(--safe-top) + 8px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  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: var(--radius-round);
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; z-index: 10000;
  animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast__leaving-7e306c1 { animation: toastSlideOut 0.3s ease-in forwards; }
/* `transform` now carries the horizontal centring, so the entrance cannot drive
   the same property — the toast would slide sideways. The vertical offset is the
   second term of that same `transform`. */
@keyframes toastSlideIn {
  0% { transform: translateX(-50%) translateY(-140%); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes toastSlideOut {
  0% { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-140%); 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); } }



/* Confetti burst on an accepted bet.
   Each particle is two nodes, because one `transform` cannot drive horizontal
   drift and the vertical arc under different laws: the drift is linear while
   the fall accelerates. The outer node carries X, the inner one Y and rotation
   (`rotate` is its own property, so it does not fight `transform`). */

.layer-fe2023d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

.piece-fe2023d {
  position: absolute;
  left: 50%;
  top: 42%;
  will-change: transform;
  animation: confettiDrift var(--dur) linear var(--delay) both;
}

.piece__inner-fe2023d {
  width: 7px;
  height: 11px;
  border-radius: 1px;
  background: var(--tint);
  will-change: transform, opacity, rotate;
  animation:
    confettiArc var(--dur) cubic-bezier(0.22, 0.62, 0.36, 1) var(--delay) both,
    confettiSpin var(--dur) linear var(--delay) both,
    confettiFade var(--dur) ease-in var(--delay) both;
}

/* Sideways drift is linear: air does not accelerate a particle sideways. */
@keyframes confettiDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--tx)); }
}

/* The arc: rise for the first third, then fall below the launch point. */
@keyframes confettiArc {
  0%   { transform: translateY(0); }
  32%  { transform: translateY(var(--peak)); }
  100% { transform: translateY(var(--ty)); }
}

@keyframes confettiSpin {
  from { rotate: 0deg; }
  to   { rotate: var(--spin); }
}

/* They fade towards the end rather than all at once: a sudden disappearance
   reads as a rendering glitch. */
@keyframes confettiFade {
  0%, 55% { opacity: 1; }
  100%    { opacity: 0; }
}

/* A request for reduced motion is honoured in full — there is simply no
   burst. */
@media (prefers-reduced-motion: reduce) {
  .layer-fe2023d { display: none; }
}


.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;
}

/* `large_mascot`: the same continuous scaling, one size up. Still the only part
   allowed to shrink, so a short screen gives the height back the same way. */
.empty_state__icon_large-99bab6e {
  height: clamp(104px, 17.5dvh, 147px);
}

/* 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;
}

/* The card's bottom line: volume left, date right. Both on one level and with
   the same insets — the date needs no alignment of its own. */
.event_card__foot-319465d {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-10);
}

/* `fixed_question_lines`: a three-line slot (3 x the 21px line-height above),
   so cards stacked on one another are the same height whatever their question
   wraps to. Clamped rather than just min-height'd — a fourth line would put the
   difference back. */
.event_card__question_fixed-319465d {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  height: 63px;
}

.event_card__starts_at-319465d {
  /* Exactly the face, size and colour of the volume on the left: they share a
     line, and a different font would read as two figures of different
     importance. `tabular-nums` so the date does not shift width from digit to
     digit, like the amount opposite. */
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: -0.15px;
  /* The same source as the volume opposite, not a matching value: otherwise they
     are "the same" only until the first edit to one of them. */
  color: var(--color-text-muted);
  line-height: 19px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.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;
  /* Hit area, not glyph size. The share icon's box is 20px tall (set by `Icon size=20`, not here:
     the registry sizes the glyph inline, so a rule on `svg` never wins); the button itself is
     the 44px minimum a thumb needs, and the symmetric -12px margins
     ((44-20)/2) keep its footprint at the icon's own 20px so nothing in the
     header shifts. The target therefore overhangs evenly — up toward the card's
     top edge and out toward its right edge, where the thumb actually lands. */
  width: 44px;
  height: 44px;
  margin: -12px;
  border-radius: var(--radius-circle);
  -webkit-tap-highlight-color: transparent;
  /* The enlarged target overhangs its parent, so it must paint above the card's
     later siblings — otherwise the body and header cover the overhang and only
     the glyph itself stays tappable, which is the state this rule fixes. */
  position: relative;
  z-index: 1;
}

.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: var(--color-text-muted);
  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;
  /* `inset: 0` means this page owns the whole viewport, including the strip
     Telegram draws its own Close / collapse / menu buttons in and the device's
     status-bar area. Without this the stream embed starts at y=0 and those
     controls sit on top of it — on a Dynamic Island phone the top of the video
     is simply not visible. `--safe-top` sums both insets Telegram reports at
     runtime (device + its own chrome), so nothing here is hardcoded: the value
     differs per device and per client version. */
  padding-top: var(--safe-top);
}

/* ── 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;
}

/* The button's label hides only on a narrow bar, not for good.
   Measured on the live layout: the bar needs 305px with a single icon, 352px
   with "Share" and 393px with "Поделиться" — the Russian label is twice the
   width of the English one. Below 400px the label starts squeezing the author's
   name into an ellipsis, so the icon alone remains there; above it the text
   stays.

   One threshold for both languages on purpose: separate thresholds would mean
   the layout shifts when the language is switched, which is worse than 40px of
   slack for English. */
@media (max-width: 400px) {
  .action_bar__btn__label-4f39d82 {
    display: none;
  }
  .action_bar__btn-4f39d82 {
    width: 34px;
    padding: 0;
    gap: 0;
  }
}

.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;
  /* Air to the right of the verification badge: it is last in the pill and without
     an inset it butts against the edge. Started at 3px, which read as "almost
     flush", so 8: a visible step that lands on the spacing grid (a multiple of
     2). */
  padding-right: var(--space-8);
}

.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 ──
   Two rows shared by both columns: the labels, then everything below them. A
   label that wraps grows the shared row, so the two sides' facts stay level
   instead of one column sliding down on its own (graph @nick/warp, node #128).

   No @supports guard: stylance leaves class names inside @supports unhashed
   (graph @nick/warp, node #482). The fallback is per declaration
   instead: an engine without subgrid drops `grid-template-rows: subgrid`, and
   each column is then a plain one-track grid with its own 26px row gap, which
   should lay out as the old flex column did — read from the CSS, not observed:
   no engine without subgrid runs in the visual suite. */
.stats_row-4f39d82 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-14);
  row-gap: 26px;
  padding: 10px 20px 20px;
}

/* ── Column base ── */
.stats_col__left-4f39d82,
.stats_col__right-4f39d82 {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  /* One track the column's own width: without it an unbreakable word in the
     label widens the implicit track and carries the rows across the divider. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: 26px;
  /* Without subgrid the column is stretched to the taller one's height; its own
     rows must not stretch with it, or the shorter side's body slides down. */
  align-content: start;
  align-items: start;
  min-width: 0;
}

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

/* ── Column label (Win / Lose) ── */
.col_label-4f39d82 {
  /* The shorter label sits on the shared row's floor, right above its share. */
  align-self: end;
  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;
  /* The share moves with the number above it (#694), on the same token, so the
     two arrive together. The transition is declared unconditionally — never
     switched on at the same moment the width changes — because a property the
     browser has not yet rendered with the transition active has no start value
     to interpolate from and simply jumps. Nothing runs on the first render:
     an element's initial style is not a transition. Under
     `prefers-reduced-motion` the token is 0ms, so the width changes at once. */
  transition: width var(--dur-count) var(--ease-out);
}

.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 {
  grid-row: span 2;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  align-self: stretch;
}

/* ── Note for the market volume held by neither option above (#727) ── */
.other_options_note-4f39d82 {
  padding: 0 20px 16px;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: #5e5e5e;
}

/* ═══════════════════════════════════════════════════════════════════
   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;
}

/* Native Back lives in Telegram chrome, leaving a two-item action row. */
.action_bar-4f39d82[data-native-back="true"] { justify-content: flex-end; }
.action_bar-4f39d82[data-native-back="true"] .action_bar__creator-4f39d82 { margin-right: auto; }
@media (min-width: 370px) {
  .action_bar-4f39d82[data-native-back="true"] .action_bar__btn__label-4f39d82 { display: inline; }
}
.error_page__header-4f39d82[hidden] { display: none; }


/* Event screen skeleton.
   Sizes and coordinates were measured OFF THE LIVE SCREEN at width 412, not
   derived from reading the code — that is exactly how the previous version
   drifted away from the real layout.

   What actually sits where:
     y=0    stream           412x220
     y=220  action bar       412x67   (back 78x34 @16, author 132x34 @116,
                                       share 126x34, right edge 16 from the side)
     y=287  bet section      padding 20/20/10, gap 6
     y=386  two columns      172x261 each, a 1x261 divider between them
     ...    SCROLL           the middle section stretches, `flex: 1`
     bottom balance row      412x54, pill 58x34 centred
     bottom button           380x48 @16, pinned to the bottom edge

   The shimmer is the card skeleton's, so the app's two loading states read as
   one device. */

.page-4255b9e {
  display: flex;
  flex-direction: column;
  /* Full height, or the bottom hangs wherever the content happened to end.
     The real screen's middle section stretches, so the balance and the button
     are pinned to the bottom edge; without this the skeleton held them 118px
     higher and they slid down when the data arrived — precisely the jump a
     skeleton exists to prevent. */
  height: 100%;

  /* `--safe-top` is deliberately NOT applied here: the skeleton renders INSIDE
     `.event_detail_page`, which already carries that inset. A second one pushed
     the content down by another notch height — invisible on the dev stand,
     where the token is zero, and immediately visible on a device. */

  /* Delayed appearance: the data often arrives within milliseconds, and a
     one-frame flash of skeleton is more irritating than a short wait. */
  animation: skeleton_in 240ms ease-out 180ms both;
}

/* The real column's middle, mirrored: `event_detail.module.css`'s
   `.event_detail__scroll` is `flex: 1; min-height: 0` and scrolls; this one
   clips, a placeholder having nothing to scroll to.
   ALL THREE DECLARATIONS ARE LOAD-BEARING and the suite is the statement of
   record — `nativeback.spec.ts` renders this against the real screen at three
   safe-area insets, and taking any of them away reddens it. What is NOT
   load-bearing is the shrink factor: `flex: 1 0 0%` leaves every case green.
   No account of WHY is written here on purpose. Five were, each wrong in a
   different way while reaching the right conclusion, and a wrong mechanism in a
   comment outlives the person who can correct it. The executable statement is
   the test. */
.scroll-4255b9e { flex: 1; min-height: 0; overflow: hidden; }

/* -- Stream -- */
/* Pinned as a mirror of the real column's top, and nothing more: removing this
   declaration leaves the suite green at every inset it renders. */
.stream-4255b9e { flex-shrink: 0; width: 100%; height: 220px; }

/* -- Action bar -- */
/* `space-between`, as on the real bar: it splits the free space into two equal
   gaps, so the author does not sit where a `gap` would have put them. */
.bar-4255b9e {
  flex-shrink: 0;
  /* The real bar's rule, drawn while waiting for the same reason the bottom
     block's is: it belongs to the layout, not to the data, and appearing at the
     moment the data lands is the jump one layer down. `box-sizing: border-box`
     is global, so the height above still measures the block, border included. */
  border-bottom: 1px solid var(--color-border);
  height: 67px;
  padding: var(--space-16);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.btn_back-4255b9e  { width: 78px;  height: 34px; border-radius: var(--radius-round); flex: none; }
.creator-4255b9e   { width: 132px; height: 34px; border-radius: var(--radius-round); flex: none; }
.btn_share-4255b9e { width: 126px; height: 34px; border-radius: var(--radius-round); flex: none; }

/* -- Bet section: title and two centred subtitles -- */
.section-4255b9e {
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.title-4255b9e    { width: 100%; height: 24px; border-radius: var(--radius-sm); }
.sub_wide-4255b9e { width: 141px; height: 17px; border-radius: var(--radius-sm); }
.sub_narrow-4255b9e { width: 116px; height: 17px; border-radius: var(--radius-sm); }

/* -- Two stat columns with a divider -- */
.stats-4255b9e {
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-14);
}

.col-4255b9e {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Column caption: the left one hugs its right edge and the right one its left,
   as in the real layout, where they face each other across the divider. */
.col__right-4255b9e { align-items: flex-end; }
.col__left-4255b9e  { align-items: flex-start; }

.col_label-4255b9e { width: 34px; height: 22px; border-radius: var(--radius-sm); }
.col_body-4255b9e  { width: 100%; height: 163px; border-radius: var(--radius-glass); }
.col_foot-4255b9e  { width: 100%; height: 22px; border-radius: var(--radius-sm); }

.divider-4255b9e {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  flex: none;
}

/* -- Balance row -- */
/* Shaped like the real row — `event_detail.module.css`'s `.balance_row` pads
   `10px 16px` around `BalancePill` — so the two files read alike and a later
   change to the padding has an obvious counterpart here.
   IT DOES NOT TRACK, and saying otherwise would be false: the real pill carries
   `min-height: 34px` rather than a height so an enlarged system font can grow
   the amount past its line box — its own file says why — but a placeholder has
   no text, so
   `min-height` on it is simply 34px at every font size. This row is 54px because
   the real one is 54px at the default font, and at an enlarged one they part.
   The font case is not observable from the rig this was measured on (graph
   @nick/warp, node #322); the fix would be to drive the placeholder from the
   same metric the pill's text uses, which nothing here does. */
.balance_row-4255b9e {
  flex-shrink: 0;
  /* The real row's gradient is layout, not data — without it the fade under the
     balance appears at the moment the data lands. */
  background: linear-gradient(to bottom, rgba(13, 12, 13, 0) 0%, #0d0c0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}

.balance-4255b9e { width: 58px; min-height: 34px; border-radius: var(--radius-round); }

/* -- Bottom: one wide button -- */
/* The bottom inset is COPIED from the real screen's action row rather than
   rounded to a plain 10px: `event_detail.module.css` pads it
   `10px 16px max(25px, var(--safe-bottom))`, so a flat bottom padding here
   parks the placeholder 15px below where the buttons land and the whole bottom
   block jumps up when the data arrives — and by more than 15px on a device
   whose safe-area inset exceeds 25px. Mirroring the expression keeps the two
   together at every inset instead of at one (graph @nick/warp, node #211). */
/* The rule and the dark bar belong to the layout, not to the data, so they are
   drawn while waiting too — otherwise both appear at the moment the data lands.
   The 1px rule is also the whole of the residual offset the balance row showed:
   the real bottom block is 1px taller than a borderless copy of it. */
.bottom-4255b9e {
  flex-shrink: 0;
  background: #0d0c0d;
  border-top: 1px solid var(--color-border);
  padding: 10px 16px max(25px, var(--safe-bottom));
}
.bet_btn-4255b9e { width: 100%; height: 48px; border-radius: var(--radius-card); }

/* One animation for every tile. */
.skel-4255b9e {
  background: linear-gradient(105deg, #1c1c1c 25%, #2a2a2a 50%, #1c1c1c 75%);
  background-size: 400% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

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

@media (prefers-reduced-motion: reduce) {
  .skel-4255b9e { animation: none; }
  /* Duration only, NOT `animation: none`. The 180ms delay is what keeps a fast
     response from flashing a skeleton for one frame, and a delay is latency
     rather than movement — cancelling the whole animation here took the gate
     away with the fade and handed the flash to exactly the people who asked for
     less of it. Zero duration keeps the backwards fill holding `opacity: 0`
     through the delay, then arrives instantly. */
  .page-4255b9e { animation-duration: 0s; }
}


.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;
  /* Sits directly above the bottom nav, so it must track the nav's real height.
     The nav is `padding: 8px 25px max(25px, var(--safe-bottom))`, i.e. it only
     grows past 25px once the device inset exceeds it. The old value added the
     WHOLE inset on top of an already-inset-inclusive 95px, double-counting it:
     on a desktop viewport (inset 0) the gap looked right, on an iPhone in
     Telegram (inset ~34px) it opened up by ~25px. 70px is the nav above its
     bottom padding (8px top + bar), and the max() mirrors the nav exactly, so
     the two now move together on every device. */
  bottom: calc(70px + max(25px, 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;
  /* Hidden until the first successful measurement (see `--init`), then faded in.
     It used to be parked off-screen at `right: 9999px` instead, which meant the
     slide had to travel from a nonsense value; hiding with opacity keeps the
     position meaningful at all times. */
  opacity: 1;
  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),
    opacity 160ms linear;
}

/* Before the first successful measurement the position is meaningless, so the
   pill is hidden outright instead of parked off-screen — and with transitions
   off, so it snaps into place rather than sliding in from nowhere. */
.toggle_tabs__indicator--init-d958126 {
  transition: none;
  opacity: 0;
}

/* A fallback for when the measurement never succeeded.
   These tabs have DIFFERENT widths (`flex: none`, sized to content), so the
   pill's position cannot be derived without measuring — unlike the language
   switch, where the options are exactly half each and the measurement could be
   removed altogether.

   But the state must not depend on whether a measurement succeeded. Until the
   indicator is in place, the active tab paints the pill itself: the selection
   is always visible and only the smooth travel is lost. A failed measurement
   used to mean coloured text and no pill — exactly what reads as "nothing is
   selected". */
.toggle_tabs-d958126:has(.toggle_tabs__indicator--init-d958126) .toggle_tabs__tab__active-d958126 {
  background: #343334;
  border-radius: 20px;
}

.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;
  /* The centre hole is 134px across. Keep the label inside it with breathing
     room on both sides, and never let it wrap onto the ring: localisations
     differ a lot in length ("Lost" is 4 characters, "Проиграл" is 8), so the
     size steps down by length — see `center_label_class`. */
  max-width: 110px;
  white-space: nowrap;
  text-align: center;
}

/* 7–8 characters: "Проиграл" (8, a localised "Lost"), "+142.50" (7, a real
   prize — stake 95 × x1.5) */
.wheel_prize_amount__long-e1fec32 {
  font-size: var(--fs-22);
  line-height: 26px;
}

/* 9 or more: longer locales, and the largest real prize this modal can show —
   "+14992.50" (9, MAX_AMOUNT stake 9995 × x1.5, the biggest fractional
   prize — see `achievable_stake_ceiling_fractional` in
   fortune_wheel_modal.rs) */
.wheel_prize_amount__xlong-e1fec32 {
  font-size: var(--fs-17);
  line-height: 22px;
}

.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;
}

/* The title and the sticker share one line: the text takes the free space, the
   sticker holds its width and does not shrink. */
.header-28b704e {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
}

.title_col-28b704e {
  flex: 1;
  min-width: 0;
}

/* The "What?" pill has to land IN THE LINE where the text ended, so the title is
   ordinary text flow rather than a flex column: in a flex container the button
   would go to a line of its own. */
.title-28b704e {
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  color: var(--color-text-title);
  letter-spacing: -0.31px;
  line-height: 21px;
}

/* The sticker. The container holds its own size so swapping the animation cannot
   move the layout, and it does not catch touches — the card lies beneath it. */
/* The sticker is pinned to the card's TOP edge, overhanging it, while on the
   right it keeps the component's ordinary inset — so it does not look like it
   fell out of the card. */
.sticker-28b704e {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  margin-top: calc(var(--space-16) * -1);
  margin-bottom: calc(var(--space-16) * -1);
  align-self: flex-start;
  pointer-events: none;
  user-select: none;
}

.sticker-28b704e svg,
.sticker-28b704e img {
  width: 100%;
  height: 100%;
  display: block;
}

/* A grey pill in place of the former "i" circle.
   It is painted to its content but hit at 44px — the minimum a finger is built
   for. The visible vertical padding is small (the pill has to read as compact),
   and a transparent `::after` makes up the rest of the 44px: it grows the target
   outward without touching the line flow. Negative margins will not do here — in
   a line of text they would shift the baseline and the caption would slide
   against the title.
   `line-height` holds the pill's visible height, so a large target does not
   inflate the line. */
.what_btn-28b704e {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius-round);
  background: var(--color-inset);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}

/* Finger target: 4 + 22 + 4 = 30px of visible height, `inset` makes up 44px. */
.what_btn-28b704e::after {
  position: absolute;
  inset: -7px 0;
  content: "";
}

.what_btn-28b704e:hover { color: var(--color-text); }
.what_btn-28b704e:active {
  background: var(--color-border);
  transform: scale(0.94);
}

.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: var(--color-text-title);
  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: var(--btn-height-regular);
  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: var(--btn-height-regular);
  height: var(--btn-height-regular);
  background: var(--color-fill-secondary);
  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);
}

/* -- "How referrals work" modal -----------------------------------------
   Information architecture: a short lead-in, then the economics table, then the
   quiet rules under it, then the button. The table is the centre of the
   composition, so its figures are noticeably larger than its labels and the
   explanations below are muted.
   The sheet's frame (handle, insets, button) is taken from deposit so the app's
   sheets do not drift apart. There is deliberately no illustration: the centre
   of meaning is the economics, and a picture would take the first glance from
   it. */
.info_sheet-28b704e {
  align-items: stretch;
  gap: var(--space-20);
  padding-bottom: 25px;
}

.info_sheet__top-28b704e {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info_sheet__header-28b704e { padding: 10px 25px 0; }

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

/* The lead-in: the first line is the promise, the second the condition. Different
   weights, so the eye takes the promise first. */
.info_sheet__intro-28b704e {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.info_sheet__lead-28b704e {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 21px;
}

.info_sheet__body_text-28b704e {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: 20px;
}

/* -- Economics table -- */
.econ-28b704e {
  margin: 0 25px;
  background: var(--color-inset);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.econ__head-28b704e {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 8px;
}

.econ__head_label-28b704e {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.econ__row-28b704e {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}

.econ__label-28b704e {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: 20px;
}

/* The values on the right are what must be read in three seconds, so they are
   noticeably larger than the labels. `tabular-nums`, so the digits do not dance. */
.econ__value-28b704e {
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 24px;
  letter-spacing: -0.4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Emphasis only where it means something: the share itself. "Lifetime" and
   "Daily" are set off by weight rather than colour — a third orange thing would
   stop pointing at anything. */
.econ__value__accent-28b704e { color: var(--color-accent); }

/* -- Quiet rules -- */
.rules-28b704e {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 25px;
}

.rules__block-28b704e {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rules__title-28b704e {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 20px;
}

.rules__text-28b704e {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: 20px;
}

/* The same button that closes the deposit sheet: 52px, white, full width. */
.info_sheet__cta-28b704e {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 50px);
  margin: 0 25px;
  height: var(--action-btn-height);
  padding: var(--space-10);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  letter-spacing: -0.31px;
  cursor: pointer;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

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

.sticker-28b704e { position: relative; }
.sticker_fallback-28b704e, .sticker_animation-28b704e { position: absolute; inset: 0; display: grid; place-items: center; }
.sticker-28b704e:has(.sticker_animation-28b704e svg) .sticker_fallback-28b704e { visibility: hidden; }

.info_sheet-28b704e > * { flex-shrink: 0; }


.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;
  /* The layer is full-screen (`inset: 0`), so the top inset carries the safe
     area — the header with the close button sits right under it and would
     otherwise slide under Telegram's chrome — and the bottom one keeps the last
     lines of the document clear of the home indicator. */
  padding: calc(var(--safe-top) + var(--space-16)) var(--space-16)
    calc(var(--safe-bottom) + var(--space-16));
  /* The document scrolls inside `.body`, not the layer itself: were the layer the
     scroller, the header and its close button would scroll away with the text and
     leave a reader who scrolled down with no way out. */
  overflow: hidden;
}
.header-16d4a23 {
  flex-shrink: 0;
  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 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.5;
  white-space: pre-wrap;
}


.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: var(--btn-height-small);
  box-sizing: border-box;
}

/* Placed in CSS alone: both options are `flex: 1 0 0`, exactly half each, so the
   pill is half the width, offset by its own width on the right
   (graph @nick/warp, node #459). */
.switcher__indicator-9d09c85 {
  position: absolute;
  /* The inset is the switcher's own padding, so the pill sits exactly over an
     option for whatever value that token holds. */
  top: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  width: calc(50% - var(--space-4));
  background: #343334;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
  transform: translateX(0);
  will-change: transform;
  /* 380ms has no duration token (--dur-slow is 300ms), so it stays raw and
     the reduced-motion rule below switches it off. */
  transition: transform 380ms var(--ease-out);
}

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

/* The right-hand option: offset the pill by its own width. */
.switcher__indicator__right-9d09c85 {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .switcher__indicator-9d09c85 { transition: none; }
}


/* ── 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: the phone hangs from the top, its upper part cut off exactly
   like the mockup. It is also the one elastic band on this screen ── */
.device_zone-7b4629d {
    position: relative;
    /* 63% + 44px (was 59% → 63% → +20px → +44px): the phone is bottom-anchored
       here, so growing the zone lowers its base 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% + 44px);
    /* A ceiling, not a constant — and the difference is the whole point.
       `.screen` clips, and the copy and the CTA row below are both fixed-height,
       so every pixel this zone takes beyond what fits is taken out of the
       bottom bar: it slides under the clip and the player cannot reach Add or
       Skip. Shrinking here — and only here — makes that impossible whatever the
       screen: the title wrapping to a second line, a non-zero
       env(safe-area-inset-bottom), or simply a font wider than the one the 44px
       was measured in all come out of the phone's crop instead.
       No constant can stand in for this. This repo ships no Cyrillic face, so
       the Russian title measured headlessly is not what the player's device
       renders, and the safe-area inset is 0 in a headless browser and ~34px on
       a phone with a home indicator. The 44px therefore survives as what the
       zone asks for and gets wherever it fits (575.72px at 390×844), not as
       what it is guaranteed. */
    flex: 0 1 auto;
    min-height: 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);
    /* Never yields: .device_zone above is what gives height back. */
    flex-shrink: 0;
}

.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 ── */
/* Fixed height and non-shrinking: the 48px buttons must stay reachable on every
   viewport, which is what .device_zone's `flex: 0 1 auto` pays for. */
.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));
    /* A window, not a page: the sheet never outgrows the area the user can
       actually see (the shared ceiling in bottom_sheet.module.css, read from
       --sheet-ceiling; see global.css), and where that binds, the height
       comes off the art slot rather than off the CTA row (see .slide_art).
       There is deliberately no constant ceiling on top of that. Everything in
       here is fixed-height, so the sheet cannot balloon on its own; a constant
       below its natural height does not stop growth, it clips. Measured, the
       520px one did exactly that: natural height 609px against a 520px cap, so
       89px came off every slide on every viewport alike (844/812/667/640), and
       the art slot could only hand back what its own art left spare — 32px on
       the drum slide, 24px on the method slide, which then overflowed its
       10px bottom padding by 8. The 24px slot trim below removes the growth
       that motivated the cap; what remains is the viewport, which is the only
       ceiling with a fact behind it. */
}

/* 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%;
    /* The sheet is height-capped, so the slides take what is left once the Skip
       row, the dots and the CTA have had their fixed share, and pass it on to
       the art slot. A flex column, not a plain block: the track has to be
       *stretched* to this height. `height: 100%` on it does not work — this
       box's own height is `auto` as far as CSS is concerned (flex layout, not a
       declared length), so the percentage falls back to auto and the track keeps
       its natural height while the viewport clips its bottom. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.slides_track-cf520bf {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    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,
       then 260→236: 236 is the tallest art there actually is, the method stack
       at 3 × 72 + 2 × var(--space-10) = 236 (the old note said 244, reading the
       gap as 14px — it is 10). The drum measures 228 and the promo visual 123,
       so a 260px slot declared 24px that no slide could ever reach and every
       slide carried. Removing them cost no give: what the art can hand back is
       set by its own floor, not by the declared slot. That floor is not the
       end of it any more: the sheet's ceiling now also subtracts the top safe
       area, and on the shortest screens with one the art alone cannot make
       room, so the slide text gives the rest as a scroll container of its own
       (see .slide_text).
       Under the viewport cap a slide that would not otherwise fit still takes
       the difference out of here (see `flex` below). All three reach for it,
       not just the promo slide: measured under the old 520px cap the drum gave
       32px, the method stack its full 24px and still overflowed by 8, and the
       promo slide 89px. The promo slide is the roomiest only because it is the
       LAST one, where Skip is not rendered and `.top` is 30px instead of 66 —
       36px the other two never get. */
    --art-slot: 236px;
    height: var(--art-slot);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-14);
    /* The first part of a slide to give height back when the viewport cap
       bites — the title and the CTA keep theirs, the text gives only what the
       art cannot. No `min-height: 0`: the floor is its own content, so the art
       never slides over the title. The large shrink factor makes the art give
       first; see .slide_text. */
    flex: 0 1000 auto;
}

.slide_title-cf520bf {
    flex-shrink: 0;
}

/* The last to give: once the art is down to its own floor, a slide still too
   tall for the sheet (the shortest screens, with a top safe area) takes the
   rest out of the copy. The text box then becomes its own scroll container
   instead of being clipped by `.slides_viewport`; that it scrolls under a
   finger has not been observed (graph @nick/warp, node #415). Flex shares a shortfall in proportion to shrink factor
   times size, and the art's factor is a thousand times this one, so the text
   gives only once the art is frozen at its floor. */
.slide_text-cf520bf {
    flex-shrink: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.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;
    /* Follows the art slot, which shrinks when the viewport cap bites; the
       ceiling reads the slot's own variable so the two cannot drift apart. */
    height: 100%;
    max-height: var(--art-slot);
    /* 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);
}

/* Primary weight here is a choice, not a leftover. This button used to be a
   dark-grey secondary carrying a blue glyph and label; it is solid Telegram
   blue with both in white because the channel is worth offering at that
   weight. It therefore reads level with the CTA further down the slide, and
   the last step of onboarding holds two primary-weight elements on purpose —
   the channel, and the way into the app.

   No gate sees this either way. `visual.spec.ts` mocks `onboarded: true`, in
   `MOCK_PROFILE` and again in the consent-gate override, so the onboarding
   overlay never mounts in a snapshot, and the stand fixture carries no copy of
   this button. A green visual run says nothing about how it looks. */
.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);
    /* Telegram-blue primary button; the glyph and label sit on it in white. */
    background: var(--color-blue);
    color: var(--color-text);
    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);
    /* Darken on press: lightening washes out against the blue fill. */
    background: var(--color-blue-press);
}

/* Round chip a touch lighter than the blue button, holding the white 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-text);
    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, 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;
}

/* ── Art zone with the device ── */
.art-77f7e0c {
    /* Kept deliberately after the platform-logo rain (the only z-index: 0 on
       this screen) was removed: the value no longer orders .art against a
       sibling, it creates the stacking context that CONTAINS the demo's own
       z-index 2…8 (top shade, badge slot, glass push). Its siblings — .hero,
       .rules_wrap, .bottom_bar — are position: relative; z-index: 1 and come
       later in the DOM, so they win the tie and stay on top. Drop this and the
       demo's inner layers escape into the root stacking context and paint over
       the hero copy and the Go bar. */
    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;
    /* Top clears the Dynamic Island row (island bottom = phone y 52 → stage
       ~14 + gap): the stream must not peek out around the island. Sides match
       .demo_cards' own inset, so the stream on screen B lands at exactly the
       width and x of the cards on screen A and the cross-fade between them has
       nothing jumping sideways. The real event page runs the player full-bleed;
       inside the demo the two screens are seen one after the other, and the
       agreement between them is what reads. */
    margin: 22px var(--space-16) 0;
}

.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;
    }
    .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;
    /* The row IS the tap target (button wraps icon + label): its own box must
       clear the 44px recommended minimum, not just the 30x14 glyph inside it.
       min-height, not height, for the reason .balance_pill gives (#335): at an
       enlarged system font size the label grows past its 22px line box, and a
       fixed height would slice it off. Nothing here depends on the row being
       exactly 44 — the panel expands by grid-template-rows 0fr->1fr, with no
       height measured anywhere. Content stays centered via align-items above. */
    min-height: 44px;
    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;
}


.page__open_in_telegram-bfaebf2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 0.5rem;
  padding: 0 var(--space-24);
  text-align: center;
  color: #A8A8A8;
}

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

.page__open_in_telegram-bfaebf2 p {
  font-size: 0.9rem;
}


/* 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;
}

.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;
}

/* The currency sign, the whole part and the cents sit on ONE baseline, hence
   `baseline` alignment rather than bottom: the parts differ in size, and along
   the bottom edge the cents would hang below the digits.
   There is no gap between the sign and the number — in the design they stand
   flush, as one monetary expression. */
.balance__row-5cbad33 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  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;
  display: inline-flex;
  align-items: baseline;
}

/* The whole part is the main number: full size, full white. */
.balance__whole-5cbad33 {
  font-size: inherit;
  color: var(--color-text);
}

/* The cents are smaller than the whole part. The 0.62 ratio is measured off
   the design: there the cent digits stand about two thirds the height of the
   zero beside them.
   `em`, not pixels: the balance's size shrinks as the header folds, and the
   cents must shrink with it in the same proportion. */
.balance__cents-5cbad33 {
  font-size: 0.62em;
  letter-spacing: 0;
  color: var(--color-text);
}

/* The currency sign: left of the number, same face and size but muted — it
   labels the amount rather than being part of it.
   Text, not an icon: this way it follows `--balance-font-size`, which shrinks
   as the header folds, and its shapes match the digits beside it. The former
   icon held a fixed size and did not shrink with them.
   It sits on the same baseline as the digits, so it needs no alignment of its
   own — `.balance__row` handles that. */
.balance__currency-5cbad33 {
  font-family: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: var(--fw-semibold);
  font-size: var(--balance-font-size);
  line-height: var(--balance-amount-height);
  letter-spacing: 0.38px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* The profile free bet is the same gold chip as in the main header
   (`.free_bet` in `balance_pill.module.css`), only larger: there it sits in the
   header row beside the balance pill, here it sits under a 40px balance, and a
   chip of the same size would read as a footnote next to it.

   The 28px size is `--balance-font-size` (40px) reduced by about half again.
   It is FIXED rather than derived from `--balance-font-size`: `<Icon>` writes
   the gift glyph's size as an inline style, so the icon cannot shrink with the
   type. Tie the size to the header fold and the text moves while the icon stays
   put, and the pair separates. The chip holds one size as a whole, as it does
   on the main screen.

   The caption above the amount is gone: the icon carries that role, exactly as
   in the main header. The name stays in `aria-label`, for a screen reader. */
.free_bet-5cbad33 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  min-height: 0;
  height: calc(46px * (1 - var(--balance-collapse, 0) * 0.3));
  padding: var(--space-4) var(--space-16) var(--space-4) var(--space-12);
  /* A transparent border, as on the header chip: there it carries the adjacent
     balance pill's gradient, here it only keeps the box identical. */
  border: 1px solid transparent;
  /* Painting and layout both shrink with the header, so the chip gives back
     vertical space instead of leaving a fixed-height gap in the folded state. */
  --chip-shrink: 0.667;
  transform: scale(
    calc(
      (1 - var(--balance-collapse, 0) * 0.3) * var(--chip-base, 1) *
        var(--chip-shrink)
    )
  );
  transform-origin: center top;
  /* The same translucent gold as the header chip and the free-bet mark on a bet
     card. Raw rgba rather than a token because the project has no token for
     this fill, and the reference specifies it this way. */
  background: rgba(255, 215, 0, 0.15);
  border-radius: var(--radius-card);
  color: var(--color-gold);
  flex-shrink: 0;
}

.free_bet__amount-5cbad33 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-heading);
  line-height: 32px;
  letter-spacing: -0.23px;
  color: var(--color-gold);
  white-space: nowrap;
}

/* Short screen: the whole balance is already smaller there
   (`--balance-font-size` 32 against 40), and the chip has to follow it or it
   stops being the second-largest thing on the block. */
@media (max-height: 700px) {
  .free_bet-5cbad33 {
    --chip-base: 0.8;
  }
}


.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(var(--color-separator) 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: var(--btn-height-regular);
  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: var(--color-text-muted);
}

.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: var(--btn-height-regular);
  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-base);
  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;
}

/* The screen used to be a dead end: title, paragraph, nothing to press. A
   failed launch is exactly where a parked referral waits to be claimed, so the
   player needs a way back into the attempt without hunting for the deep-link
   again. */
.retry-df510ee {
  margin-top: var(--space-16);
  padding: 0.6rem 1.6rem;
  border: none;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 0.95rem;
  cursor: pointer;
}

.retry-df510ee:active {
  background: var(--color-accent-press);
}


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

.row-ce7344d {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  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: var(--color-separator);
  font-size: var(--fs-15);
  flex-shrink: 0;
}

/* A whole pixel, not 0.5: on a three-times-density screen 0.5px rounds to one or
   two physical pixels depending on where the line falls, so one rule drew lines
   of visibly different weight. The colour is the profile's hairline token, the
   same one the transaction list uses. */
.divider-ce7344d {
  height: 1px;
  background: var(--color-separator);
  margin-left: 52px;
}

.legal_menu-ce7344d {
  padding-bottom: max(var(--space-16), var(--safe-bottom));
}

.legal_title-ce7344d {
  margin: var(--space-16);
  font-size: var(--fs-22);
  color: var(--color-text);
}


.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;
  /* Glass over the app's near-black background composited to about #0a0a0a,
     so the toast merged into the page. It used to be opaque (#1a1a1a with a
     #333 border); the glass arrived with the fortune wheel and took the
     contrast with it.
     Lift it with a white layer over the dark fill — 9% fading to 5% — so the
     chip reads as a surface above the scene rather than a hole in it. The
     layer sits OVER the fill, not instead of it: the dark base keeps the tone
     and the blur stays a blur. */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    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);
}

/* A row whose money never moved. The 42px disc is the row's largest mass, and
   in the accent gradient it reads as a real movement from across the screen —
   flattening it is what makes the row legible at a glance rather than only at
   the number. Declared after both direction modifiers so it wins on source
   order whichever way the arrow points. */
.icon__no_movement-3f4bd62 {
  background: var(--color-inset);
  color: var(--color-text-secondary);
}

.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;
}

/* The amount of a row the ledger kept but the balance never felt: a withdrawal
   that fails is refunded and its row flipped to `failed`, so its net movement
   is zero. The strike-through is the distinguisher, and it is a shape — it
   survives a grayscale or colour-blind read, where swapping one colour for
   another would not, and it says "struck from the ledger" where a plain dimming
   would only say "old". The error red stays on the status word below, where a
   failure belongs; the amount stops claiming that money left. */
.amount__no_movement-3f4bd62 {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.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: var(--color-separator);
  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;
}