



.ante-card {
  position: relative;
  box-sizing: border-box;
  width: 249px;
  aspect-ratio: 249 / 227;
  container-type: inline-size;
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: var(--ante-frame-image, none) center / 100% 100% no-repeat;
  color: #2f241b;
  text-align: center;
  text-shadow: none;
}



.ante-card::before {
  content: ''; position: absolute; inset: 8% 10% 10%; z-index: 0;
  background: #dcc99f; border: 2px solid #a78046; border-radius: 8px;
  pointer-events: none;
}
.ante-frame-ready .ante-card::before { display: none; }
.ante-card[hidden] { display: none; }
.ante-card--scene { position: absolute; z-index: 4; }
.ante-card__price,
.ante-card__label {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  font-weight: 900;
  text-shadow: none;
  -webkit-text-stroke: 0;
  z-index: 1;
}
.ante-card__price {
  display: flex; align-items: center; justify-content: center; gap: .22em;
  left: 15%; top: 17.1806%; width: 70%; height: 16.7401%;
  font-size: clamp(12px, 11.245cqw, 40px);
  color: #ead577; text-shadow: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ante-card__price > .stat__money-text {
  position: relative;
  color: #200303;
  -webkit-text-stroke: max(2px, 1.6064cqw) #200303;
  paint-order: stroke fill;



  filter: drop-shadow(0 max(1px, 1.2048cqw) 0 #000);
}
.ante-card__price > .stat__money-text::after {
  content: attr(data-ante-price) / '';



  position: absolute; top: 0; bottom: 0; left: 0; right: auto;
  width: max-content; min-width: 100%; text-align: center; transform: none;
  background: linear-gradient(to bottom, #ead577 41.582%, #a0682b 73.527%, #ead577 83.97%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
}
.ante-card__label {

  left: 49.6455%; top: 36.1233%; width: max(98px, 55.0201%); height: 19.3833%;
  transform: translateX(-50%);
  font-size: clamp(11px, 6.4257cqw, 28px);
  color: #000;
  line-height: 1.1;
  text-wrap: balance;
}
.ante-card__toggle {
  position: absolute;
  z-index: 1;
  left: 49.7219%; top: 58.5903%;
  width: max(84.858px, 45.8887%); height: auto; aspect-ratio: 189 / 98;
  min-height: 44px; transform: translateX(-50%);
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: #e8d1a6; font: inherit;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.ante-card__toggle::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ante-on-image, none) center / 100% 100% no-repeat;
  background-color: #453329;
  box-sizing: border-box; border: 2px solid #e8d1a6; border-radius: 999px;
}
.ante-card__toggle::after {
  content: ''; position: absolute;
  left: 5.8201%; top: 7.1429%; width: 41.2698%; height: 78.5714%;
  background: var(--ante-knob-image, none) center / 100% 100% no-repeat;
  background-color: #e8d1a6;
  box-sizing: border-box; border: 2px solid #594022; border-radius: 50%;
  transition: left 140ms ease-out;
  pointer-events: none;
}
.ante-card__toggle[aria-pressed='true']::after { left: 52.9101%; }
.ante-card__toggle[aria-pressed='false']::before { background-image: var(--ante-off-image, none); }
.ante-on-ready .ante-card__toggle[aria-pressed='true']::before,
.ante-off-ready .ante-card__toggle[aria-pressed='false']::before,
.ante-knob-ready .ante-card__toggle::after {
  background-color: transparent; border: 0; border-radius: 0;
}
.ante-card__toggle:disabled { cursor: default; opacity: .62; }
.ante-card__state {
  position: absolute; left: 54%; top: 23.4692%; width: 39%; height: 45.5716%;
  display: grid; place-items: center;
  font-size: clamp(12px, 8.0321cqw, 32px); font-weight: 900; line-height: 1;
  color: #e8d1a6; text-shadow: 0 max(1px, 1.2048cqw) 0 #000;
  -webkit-text-stroke: max(2px, 1.6064cqw) #200303;
  paint-order: stroke fill;
  pointer-events: none;
}
.ante-card__toggle[aria-pressed='true'] .ante-card__state { left: 17.9885%; width: 28.8808%; }
.ante-card__help {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (orientation: portrait), (max-width: 1024px) {
  #anteCard.ante-card--scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ante-card__toggle::after { transition: none; }
}



.buy.buy--ante { --ante-page-width: min(calc(100vw - 24px), calc(249 * var(--buy-u))); }
.buy.buy--ante .ante-card { width: var(--ante-page-width); }
.buy.buy--ante .buy-grid {
  padding-left: calc((100vw - var(--ante-page-width)) / 2);
}
.buy.buy--ante .buy__pager { min-width: 208px; }
.buy.buy--ante .buy__pager-dot[hidden] { display: none; }




@media (orientation: landscape) {
  .buy.buy--ante {
    --ante-shop-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)) - 100px);

    --buy-u: min(calc((100vw - 32px) / 390), calc((var(--ante-shop-height) - 28px) / 410));
    --ante-page-width: min(calc(100vw - 32px), max(190px, calc(249 * var(--buy-u))));
    position: fixed; inset: 0;
    width: 100vw; height: 100dvh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 44px minmax(0, 1fr) 44px;
    gap: 6px 20px;
    padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
    align-items: center; justify-items: center;
    perspective: none;
  }
  .buy.buy--ante .buy__ribbon {
    grid-column: 1 / -1; grid-row: 1;
    position: static; width: 180px; height: 44px; padding: 0;
    font-size: 17px; line-height: 1; white-space: nowrap;
  }
  .buy.buy--ante .card__knob--corner {
    position: absolute; top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: 44px; height: 44px; z-index: 4;
  }
  .buy.buy--ante .buy-grid {
    grid-column: 1 / -1; grid-row: 2;
    position: relative; display: flex; align-items: center; align-content: normal;
    width: 100%; height: 100%; min-height: 0;
    box-sizing: border-box; margin: 0; gap: 5vw;
    padding: 0 calc((100vw - 294 * var(--buy-u)) / 2) 0 calc((100vw - var(--ante-page-width)) / 2);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .buy.buy--ante .buy-grid::-webkit-scrollbar { display: none; }
  .buy.buy--ante .buy-grid .buy-card {
    position: relative; left: auto; top: auto;
    display: block; flex: 0 0 auto; height: auto; min-height: 0;
    margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    container-type: inline-size; scroll-snap-align: center;
    background-color: transparent; background-size: 100% 100%;
  }
  .buy.buy--ante .buy-grid .buy-card.is-silver {
    width: calc(241.862 * var(--buy-u)); aspect-ratio: 423 / 597;
    background-image: url('../assets/buy/buy-card-frame-silver.webp');
  }
  .buy.buy--ante .buy-grid .buy-card.is-gold {
    width: calc(268 * var(--buy-u)); aspect-ratio: 452.2 / 653;
    background-image: url('../assets/buy/buy-card-frame-gold.webp');
  }
  .buy.buy--ante .buy-grid .buy-card.is-royal {
    width: calc(294 * var(--buy-u)); aspect-ratio: 513 / 710;
    background-image: url('../assets/buy/buy-card-frame-royal.webp');
  }
  .buy.buy--ante .buy-grid .buy-card__name,
  .buy.buy--ante .buy-grid .buy-card__desc,
  .buy.buy--ante .buy-grid .buy-card__plate,
  .buy.buy--ante .buy-grid .buy-card__price,
  .buy.buy--ante .buy-grid .buy-card__go,
  .buy.buy--ante .buy-grid .buy-card__why {
    position: absolute; bottom: auto; margin: 0;
    text-align: center;
  }
  .buy.buy--ante .buy-grid .buy-card__name {
    left: 4%; right: 4%; top: 9.2%; width: auto; height: auto;
    font-size: max(11px, calc(15 * var(--buy-u))); line-height: 1.1; white-space: normal;
    color: var(--buy-title-color); letter-spacing: 0;
  }
  .buy.buy--ante .buy-grid .buy-card.is-gold .buy-card__name { top: 13.9%; }
  .buy.buy--ante .buy-grid .buy-card.is-royal .buy-card__name { top: 16.3%; }
  .buy.buy--ante .buy-grid .buy-card__desc {
    left: 8%; right: 8%; top: 18%; width: auto; height: auto;
    padding: 0; border: none; background: none;
    color: #000; font-size: max(10px, calc(11 * var(--buy-u))); line-height: 1.1;
  }
  .buy.buy--ante .buy-grid .buy-card.is-gold .buy-card__desc { top: 24%; }
  .buy.buy--ante .buy-grid .buy-card.is-royal .buy-card__desc { top: 29%; }
  .buy.buy--ante .buy-grid .buy-card.is-royal .buy-card__desc {
    color: #000; font-size: max(10px, calc(11 * var(--buy-u))); line-height: 1.1;
    text-align: center; padding: 0; border: 0; background: none;
  }
  .buy.buy--ante .buy-grid .buy-card__plate {
    left: 22%; right: auto; top: 60%; width: 56%; height: 10%;
    font-size: max(14px, calc(32 * var(--buy-u))); line-height: 1;
    display: grid; place-items: center;
    color: #f4cf7b;
    background: url('../assets/buy/buy-fs-plate.webp') center / 100% 100% no-repeat;
    background-clip: padding-box; -webkit-background-clip: padding-box;
  }
  .buy.buy--ante .buy-grid .buy-card__plate--long { font-size: max(10px, calc(16 * var(--buy-u))); }
  .buy.buy--ante .buy-grid .buy-card__price {
    left: 5%; right: 5%; top: 71%; width: auto; height: auto;
    font-size: max(12px, calc(17 * var(--buy-u))); line-height: 1.1;
    color: #000;
  }
  .buy.buy--ante .buy-grid .buy-card__go {
    left: 22%; right: auto; top: 80%; width: 56%; height: max(24px, calc(33 * var(--buy-u)));
    padding: 0; border: none; border-radius: 0; transform: none;
    background: url('../assets/buy/buy-activate-button.webp') center / 100% 100% no-repeat;
    font-size: 12px; line-height: 1; letter-spacing: 0;
  }
  .buy.buy--ante .buy-grid .buy-card__why:not([hidden]) {
    left: 1%; right: 1%; top: 93%; width: auto; max-width: none;
    padding: 2px; transform: none; overflow: visible;
    white-space: normal; text-overflow: clip;
    font-size: 10px; line-height: 1.1;
    color: #ffe8d2; background: rgba(29, 16, 19, .95);
  }
  .buy.buy--ante .buy__pager {
    grid-column: 1; grid-row: 3; justify-self: end;
    display: flex; align-items: center; justify-content: space-between;
    width: 208px; min-width: 208px; height: 44px; margin: 0;
  }
  .buy.buy--ante .buy__pager-arrow {
    position: relative; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: none; background: none;
  }
  .buy.buy--ante .buy__pager-arrow::before {
    content: ''; width: 14px; height: 14px;
    border-top: 4px solid #fff; border-right: 4px solid #fff;
    transform: rotate(45deg);
    filter: drop-shadow(0 1px 1px #000);
  }
  .buy.buy--ante .buy__pager-arrow--prev::before { transform: rotate(-135deg); }
  .buy.buy--ante .buy__pager-arrow:disabled { opacity: .55; }
  .buy.buy--ante .buy__pager-dots { display: flex; align-items: center; gap: 14px; }
  .buy.buy--ante .buy__pager-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .55; }
  .buy.buy--ante .buy__pager-dot.is-on { background: var(--gold-hot); opacity: 1; transform: scale(1.25); }
  .buy.buy--ante .buy__stepper.stake-group--modal {
    grid-column: 2; grid-row: 3; justify-self: start;
    position: relative; left: auto; top: auto;
    width: 180px; height: 44px; margin: 0; aspect-ratio: auto;
  }
  .buy.buy--ante .buy__stepper .step-btn { top: 0; width: 44px; height: 44px; padding: 0; }
  .buy.buy--ante .buy__stepper #buyBetDown,
  .buy.buy--ante .buy__stepper .step-btn:first-of-type { left: 0; }
  .buy.buy--ante .buy__stepper .step-btn:last-of-type { left: 136px; }
  .buy.buy--ante .buy__stepper .stake {
    left: 50px; top: 0; width: 80px; height: 44px; min-height: 44px;
    padding: 1px 2px;
  }
  .buy.buy--ante .buy__stepper .stake__k { font-size: 10px; line-height: 1.1; }
  .buy.buy--ante .buy__stepper .stake__v { font-size: 12px; line-height: 1.1; }
  .buy.buy--ante.buy--large-text:not(.buy--confirm)::after { content: none; }
}
@media (orientation: landscape) and (max-width: 440px) {
  .buy.buy--ante { grid-template-columns: minmax(0, 1fr) 176px; column-gap: 8px; }
  .buy.buy--ante .buy__pager { width: 132px; min-width: 132px; }
  .buy.buy--ante .buy__pager-dots { gap: 6px; }
  .buy.buy--ante .buy__pager-dot { width: 6px; height: 6px; }
  .buy.buy--ante .buy__stepper.stake-group--modal { width: 168px; }
  .buy.buy--ante .buy__stepper .step-btn:last-of-type { left: 124px; }
  .buy.buy--ante .buy__stepper .stake { left: 50px; width: 68px; }
}


@media (orientation: landscape) and (max-height: 280px) {
  .buy.buy--ante { --ante-shop-height: 300px; }
  .buy.buy--ante .buy-grid { align-items: flex-start; overflow-y: auto; }
}
