/* Telegram Mini App layout. Insets come from the Telegram SDK or the browser. */
:root {
  --app-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --app-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);
  --content-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
}
html { -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
/* Keep the same usable width on short and scrollable pages, also in dialogs. */
@supports not (scrollbar-gutter:stable) { html { overflow-y:scroll; } }
body { min-width:0; }
.minimal-shell,.minimal-main { width:100%; min-width:0; }
.telegram-desktop .minimal-shell { padding-top:calc(var(--app-top) + var(--content-top)); }
.profile-tabs { max-width:100%; }
.profile-tab { min-width:0; }
html:has(dialog[open]) { overflow:hidden; }
.amount-input, .room-player, .room-player>div { min-width:0; }
.room-player strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.round-history-trigger { flex:0 0 auto; max-width:none; padding:10px 0 10px 14px; min-height:44px; border:0; border-radius:0; background:none; color:#a8a8b7; font-size:12px; white-space:nowrap; }
.round-history-trigger:hover { background:none; color:#fff; }
.minimal-heading:has(.round-history-trigger) h1 { font-size:35px; }
/* Constant speed for 4s, then 3s of continuous deceleration to zero. */
.reel-moving { animation-name:reel-flow; animation-duration:var(--duration, 7000ms); animation-timing-function:linear; }
@keyframes reel-flow {
  0% { transform:translateX(var(--from)); animation-timing-function:linear; }
  57.142857% { transform:translateX(var(--cruise-stop)); animation-timing-function:cubic-bezier(.333333,.666667,.666667,1); }
  100% { transform:translateX(var(--stop)); }
}
.coin-capacity { margin:-12px 0 20px; color:#a0a0ad; font-size:12px; }
.participant .room-player { flex:1; }
.participant .room-player>div { min-width:0; }
.participant-name-line { display:flex; align-items:center; flex-wrap:wrap; gap:0 12px; }
.participant-name-line strong { max-width:100%; }
.participant-name-line .cancel-wheel { display:inline-flex; align-items:center; flex-shrink:0; min-height:36px; margin:0; padding:6px 0; font-size:11px; white-space:nowrap; }

/* The small burst is decorative, local to the winning portrait, and never loops. */
.duel-portrait { display:inline-flex; flex-shrink:0; position:relative; width:56px; height:56px; }
.duel-portrait>.avatar { width:100%; height:100%; border-radius:0; font-size:15px; }
.coin-duel-dialog .duel-portrait { width:64px; height:64px; }
.reel-win-effect { position:absolute; left:50%; top:50%; width:0; height:0; z-index:4; pointer-events:none; }
.win-coins { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:4; }
.win-coins>i { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; border:1px solid #efd184; background:radial-gradient(circle at 30% 25%,#ffebad,#c58e30 75%); box-shadow:inset 0 0 0 1px #8b631d66; opacity:0; animation:win-coin 1.45s cubic-bezier(.2,.65,.35,1) both; animation-delay:var(--coin-delay); }
.win-coins>i:nth-child(even) { width:6px; height:6px; }
@keyframes win-coin {
  0% { opacity:0; transform:translate(0,0) scale(.45); }
  15% { opacity:.8; }
  48% { opacity:.8; transform:translate(var(--coin-x),var(--coin-y)) rotate(var(--coin-angle)) scale(1); }
  100% { opacity:0; transform:translate(var(--coin-x),var(--coin-fall)) rotate(300deg) scale(.55); }
}

@media(max-width:700px) {
  /* Avoid iOS input auto-zoom, including promo codes and stake forms. */
  input,select,textarea { font-size:16px; }
  body { font-size:14px; }
  .minimal-shell { padding:calc(var(--app-top) + var(--content-top)) max(16px, var(--tg-safe-area-inset-right, 0px)) 0 max(16px, var(--tg-safe-area-inset-left, 0px)); min-height:100dvh; }
  .minimal-header { height:64px; gap:12px; }
  .minimal-brand { font-size:26px; }
  .minimal-brand img { width:28px; height:28px; }
  .minimal-header-end { gap:12px; }
  .minimal-header-end .round-button { width:44px; height:44px; }
  .minimal-header-end .demo-badge { font-size:9px; letter-spacing:1.5px; }
  .minimal-main { padding:22px 0 calc(96px + var(--app-bottom) + var(--content-bottom)); }
  .minimal-heading { min-height:44px; margin-bottom:20px; gap:8px; }
  .minimal-heading-main { gap:6px; min-width:0; flex:1; }
  .minimal-heading h1, .minimal-heading:has(.round-history-trigger) h1 { font-size:28px; letter-spacing:-.9px; }
  .minimal-heading-main .back-button { padding:10px 0; min-width:28px; min-height:44px; }
  .round-history-trigger { font-size:12px; flex-basis:auto; max-width:none; padding:10px 0 10px 8px; }
  .minimal-shell .panel { border-radius:18px; }
  .minimal-shell .button { min-height:48px; font-size:13px; border-radius:12px; }
  .minimal-shell .text-button { font-size:12px; min-height:44px; }
  .minimal-shell .section-title { margin:24px 0 14px; }
  .minimal-shell .section-title h2 { font-size:17px; }
  .minimal-shell .round-button { width:44px; height:44px; }
  .minimal-shell .mobile-nav { padding:8px 16px calc(8px + var(--app-bottom) + var(--content-bottom)); background:#121216f5; border-top:1px solid #2b2b33; gap:8px; }
  .minimal-shell .mobile-nav .nav-item { min-height:52px; padding:8px 6px; border-radius:12px; gap:5px; font-size:11px; width:33.333%; color:#8e8e9c; }
  .minimal-shell .mobile-nav .nav-item.active { background:#26262e; color:#f7f7fb; }
  .mobile-nav .nav-item.active:after { display:none; }
  .keyboard-open .mobile-nav { display:none; }

  .welcome-main { min-height:calc(100dvh - 64px - var(--app-top) - var(--content-top)); padding:40px 0 calc(32px + var(--app-bottom)); }
  .welcome-card { width:100%; padding:0; }
  .welcome-kicker { font-size:10px; letter-spacing:2px; }
  .welcome-card h1 { font-size:clamp(34px,9.6vw,46px); line-height:1.08; letter-spacing:-1.6px; margin:24px 0 22px; }
  .welcome-card>p { font-size:14px; line-height:1.75; color:#b4b4c1; }
  .welcome-facts { display:grid; gap:14px; margin:28px 0; font-size:12px; }
  .welcome-facts>span { min-height:20px; gap:10px; }
  .welcome-card .welcome-cta { width:100%; min-height:52px; margin:0; justify-content:center; font-size:14px; }
  .welcome-card>.text-button { width:100%; min-height:48px; justify-content:center; margin-top:6px; font-size:12px; }
  .demo-notice { font-size:10px; line-height:1.75; margin-top:20px; }
  .mode-grid { margin-top:0; gap:16px; }
  .mode-card { border-radius:18px; }
  .mode-art { --mode-token-size:112px; height:152px; }
  .mode-card-info { padding:16px 18px; }
  .mode-card-info h2 { font-size:23px; }
  .mode-card-info p { margin-top:6px; font-size:12px; }
  .mode-reel-art { gap:8px; }
  .mode-reel-art>i { top:calc(50% - var(--mode-token-size)/2 - 14px); }

  .roulette-stage { padding:16px 16px 20px; }
  .roulette-head { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; min-height:44px; }
  .roulette-head .round-button { justify-self:end; width:44px; height:44px; }
  .round-id { font-size:10px; letter-spacing:.5px; }
  .live-countdown { gap:3px; }
  .live-countdown>span { font-size:11px; }
  .live-countdown>strong { font-size:22px; line-height:1.2; }
  .roulette-reel { --reel-size:clamp(112px,32vw,136px); margin:14px -16px 0; }
  .reel-viewport:before, .reel-viewport:after { width:20px; }
  .roulette-stage #wheel-form { max-width:100%; margin-top:18px; }
  .roulette-stage .amount-row { max-width:none; gap:8px; }
  .roulette-stage .amount-input { min-width:0; height:46px; min-height:46px; border-radius:11px; padding:0 12px; }
  .roulette-stage .amount-row .button { min-width:110px; min-height:46px; font-size:12px; padding:10px 13px; }
  .roulette-stage .pot-row { margin-top:22px; padding-top:17px; border-top:1px solid #2a2a33; gap:8px; }
  .pot-row>div { min-width:0; gap:6px; }
  .pot-row>div>span { font-size:11px; }
  .pot-row strong { font-size:clamp(21px,6vw,27px); letter-spacing:-.7px; overflow-wrap:anywhere; }
  .pot-row small { font-size:9px; white-space:nowrap; }
  .under-game { min-height:48px; margin-top:8px; gap:8px; font-size:11px; }
  .compact-balance { padding:0; gap:4px; }
  .compact-balance>span { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:10px; margin-right:5px; }
  .compact-balance b { font-size:14px; }
  .compact-balance small { font-size:9px; }
  .compact-balance .round-button { width:40px; height:44px; }
  .participant-list .participant { padding:15px; gap:12px; }
  .participant .room-player { gap:11px; min-width:0; }
  .participant .room-player .avatar { width:44px; height:44px; font-size:12px; }
  .participant .room-player strong { font-size:14px; }
  .participant-amount { flex-shrink:0; }
  .participant-amount>strong { font-size:14px; }
  .participant-amount>span { font-size:12px; }
  .participant-amount small { font-size:9px; }
  .roulette-stage .winner-banner { width:100%; gap:9px; padding:12px; }
  .winner-banner>span:nth-child(2) { min-width:0; }
  .winner-banner strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .winner-banner .text-button { flex-shrink:0; font-size:11px; }

  .coin-toolbar { margin-bottom:20px; flex-wrap:nowrap; }
  .coin-pair>span { width:48px; height:48px; }
  .coin-pair b { font-size:10px; margin-left:8px; white-space:nowrap; }
  .coin-toolbar>.button { font-size:12px; padding:12px; gap:6px; }
  .coin-toolbar>.button svg { width:16px; }
  .coin-room { padding:16px 15px 10px; }
  .coin-match { gap:8px; grid-template-columns:minmax(0,1fr) minmax(90px,1fr) minmax(0,1fr); }
  .duel-player-label { font-size:10px; margin-bottom:12px; }
  .duel-portrait { width:48px; height:48px; }
  .duel-portrait>.avatar { font-size:14px; }
  .duel-identity { gap:9px; }
  .duel-name { font-size:13px; }
  .duel-side { width:32px; height:32px; }
  .duel-stake-label { font-size:11px; }
  .duel-stake { font-size:19px; white-space:normal; overflow-wrap:anywhere; }
  .duel-stake>small { font-size:9px; }
  .duel-prize { font-size:10px; }
  .duel-prize b { white-space:normal; overflow-wrap:anywhere; }
  .coin-room-footer { margin-top:15px; padding-top:9px; gap:8px; }
  .coin-room-footer>span { font-size:10px; }
  .coin-room-footer>div { gap:12px; }
  .coin-room-footer .join-button { min-height:42px; font-size:12px; padding:10px 14px; border-radius:9px; }
  .coin-room-footer .text-button { font-size:12px; }

  .profile-tabs { gap:4px; margin:0 0 20px; padding:4px; border:1px solid #2c2c36; border-radius:13px; background:#18181e; }
  .profile-tab { min-height:44px; font-size:12px; border:0; border-radius:9px; padding:10px 6px; background:none; }
  .wallet-card { padding:24px 20px; }
  .balance-label { font-size:13px; }
  .wallet-number { font-size:42px; overflow-wrap:anywhere; margin:16px 0 24px; }
  .wallet-buttons .button { font-size:12px; }
  .demo-wallet-actions { gap:16px; flex-wrap:wrap; margin-top:18px; }
  .promo-card { padding:20px 16px; }
  .promo-card .amount-row { flex-direction:column; gap:12px; }
  .promo-card .amount-input { flex:none; min-height:48px; }
  .promo-card .amount-row .button { font-size:13px; min-height:48px; }
  .amount-input { height:48px; min-width:0; }
  .amount-input input { font-size:16px; }
  .history-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:18px 15px; }
  .history-game { display:none; }
  .history-info>strong { font-size:14px; }
  .history-info>strong span { font-size:9px; }
  .history-info>small { font-size:11px; overflow-wrap:anywhere; }
  .history-info .text-button { font-size:11px; margin-top:5px; }
  .history-payout strong { font-size:18px; }
  .history-payout small { font-size:9px; }

  dialog, dialog.coin-duel-dialog { position:fixed; inset:auto 0 var(--keyboard-offset, 0px); margin:0 auto; width:100%; max-width:700px; max-height:calc(var(--visible-height, 100dvh) - var(--app-top) - var(--content-top) - 12px); border:1px solid #373741; border-bottom:0; border-radius:24px 24px 0 0; padding:12px 20px calc(24px + var(--app-bottom) + var(--content-bottom)); background:#1a1a21; overscroll-behavior:contain; scroll-padding-block:80px 24px; }
  dialog:before { content:''; display:block; width:32px; height:4px; border-radius:4px; background:#51515e; margin:0 auto 8px; }
  .modal-heading { position:sticky; top:-12px; z-index:6; background:#1a1a21; padding:8px 0 12px; margin-bottom:12px; }
  .modal-heading h2 { font-size:22px; line-height:1.2; }
  .modal-heading .round-button { min-width:44px; height:44px; }
  .modal-lead { font-size:13px; line-height:1.65; margin-bottom:20px; }
  dialog .button { min-height:48px; border-radius:12px; font-size:13px; }
  dialog .text-button { min-height:44px; font-size:12px; }
  dialog form>label, dialog>label { font-size:13px; }
  .side-picker { gap:10px; margin-bottom:20px; }
  .side-choice { padding:14px 10px; min-height:64px; gap:8px; font-size:13px; }
  .side-choice small { font-size:10px; }
  .mini-coin { width:32px; height:32px; }
  .quick-amounts { margin-top:12px; gap:7px; }
  .quick-amounts button { min-height:42px; font-size:12px; border-radius:8px; }
  .quote-box { padding:16px; }
  .quote-box>div { font-size:12px; }
  .quote-box b { font-size:14px; }
  .quote-final b { font-size:18px; }
  .input-help { font-size:11px; line-height:1.65; }
  .form-error { font-size:12px; }
  .coin-duel-dialog .coin-match { grid-template-columns:minmax(0,1fr) minmax(100px,1.25fr) minmax(0,1fr); gap:6px; }
  .coin-duel-dialog .duel-portrait { width:48px; height:48px; }
  .coin-duel-dialog .duel-name { font-size:12px; }
  .coin-duel-dialog .duel-player-label { font-size:10px; }
  .coin-duel-dialog .coin-3d, .duel-result-coin { width:clamp(100px,29vw,128px); height:clamp(100px,29vw,128px); }
  .coin-duel-dialog .flip-scene { height:220px; }
  .short-rules { gap:18px; padding-top:4px; }
  .short-rules p { font-size:13px; line-height:1.65; }
  .short-rules small { font-size:11px; }
  .roulette-history-list { gap:12px; }
  .roulette-history-item { padding:16px; border-radius:13px; }
  .roulette-history-winner>.avatar { width:44px; height:44px; }
  .roulette-history-winner small { font-size:10px; }
  .roulette-history-amounts>span { font-size:11px; }
  .roulette-history-amounts strong { font-size:20px; }
  .roulette-history-footer time { font-size:10px; }
  .roulette-history-footer .text-button { font-size:11px; }
  #toast { bottom:calc(88px + var(--app-bottom) + var(--content-bottom) + var(--keyboard-offset, 0px)); font-size:12px; border-radius:12px; }
}
@media(max-width:360px) {
  .minimal-shell { padding-left:12px; padding-right:12px; }
  .minimal-heading h1, .minimal-heading:has(.round-history-trigger) h1 { font-size:25px; }
  .round-history-trigger { font-size:11px; }
  .coin-pair b { display:none; }
  .roulette-head { grid-template-columns:minmax(0,1fr) auto 44px; }
  .duel-name { font-size:12px; }
  .duel-stake { font-size:17px; }
  .history-row { grid-template-columns:minmax(0,1fr); }
  .history-payout { text-align:left; display:flex; align-items:center; gap:10px; }
  .history-payout small { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .win-coins { display:none; }
  .reel-moving { animation:none; transform:translateX(var(--stop)); }
}

/* The amount and action together match one centered avatar, on every screen. */
.roulette-stage { --reel-size:178px; }
.roulette-stage .roulette-reel { --reel-size:inherit; }
.roulette-stage #wheel-form { width:var(--reel-size); max-width:var(--reel-size); }
.roulette-stage .amount-row { width:100%; max-width:none; gap:6px; }
.roulette-stage .amount-input { min-width:0; padding:0 7px; gap:3px; }
.roulette-stage .amount-input>span { font-size:8px; flex-shrink:0; }
.roulette-stage .amount-row .button { flex:0 0 78px; min-width:0; padding:7px 5px; font-size:11px; line-height:1.25; white-space:normal; }
@media(max-width:700px) {
  .roulette-stage { --reel-size:136px; }
  .roulette-stage .amount-input { padding:0 5px; gap:2px; height:44px; min-height:44px; border-radius:9px; }
  .roulette-stage .amount-input>span { font-size:7px; }
  .roulette-stage .amount-row .button { flex-basis:64px; min-height:44px; padding:7px 4px; font-size:11px; border-radius:9px; }
  .participant-name-line { column-gap:10px; }
  .participant-name-line .cancel-wheel { min-height:44px; font-size:11px; }
}
/* A short jackpot burst, confined to the winner rather than the whole screen. */
.win-coins>i{width:12px;height:12px;left:-6px;top:-6px;border:1px solid #fff0ad;background:radial-gradient(circle at 28% 22%,#fff4be 5%,#edc45d 40%,#b77b22 95%);box-shadow:inset 0 0 0 2px #c9983c,0 0 5px #ecc66a44;animation-duration:1.8s}
.win-coins>i:after{content:'';position:absolute;inset:3px;border:1px solid #fff0ad;border-radius:50%}
.win-coins>i:nth-child(even){width:10px;height:10px}
@keyframes win-coin{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}12%{opacity:1}46%{opacity:1;transform:translate(var(--coin-x),var(--coin-y)) rotate(var(--coin-angle)) scale(1.12)}85%{opacity:.7}100%{opacity:0;transform:translate(calc(var(--coin-x) * .55),var(--coin-fall)) rotate(310deg) scale(.55)}}
.fight-prize-burst{position:relative;display:inline-block;min-width:110px}.fight-prize-burst>strong{font-size:34px}.fight-prize-burst:has(.win-coins)>strong,.coin-duel-dialog:has(.win-coins) .duel-round-pot>strong{animation:bank-won .9s ease-out both}
@keyframes bank-won{0%{filter:brightness(1);transform:scale(.95)}35%{filter:brightness(1.3);text-shadow:0 0 15px #d9bc6c55;transform:scale(1.06)}100%{filter:brightness(1);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.fight-prize-burst>strong,.duel-round-pot>strong{animation:none!important}}

.payment-history { margin-top:20px; padding:20px; min-width:0; }
.payment-history h2 { font-size:20px; margin:0 0 14px; }
.payment-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:none; color:inherit; border:0; border-top:1px solid #ffffff12; padding:15px 0; text-align:left; cursor:pointer; font:inherit; }
.payment-row>span { min-width:0; }
.payment-row strong,.payment-row small { display:block; }
.payment-row small { color:#96a4af; margin-top:5px; }
.payment-sum { text-align:right; flex-shrink:0; font-weight:700; }
.payment-details { min-width:0; }
.payment-total { font-size:34px; font-weight:700; margin:10px 0; }
.payment-total span { font-size:16px; color:#96a4af; }
.payment-details .button { margin:10px 0; text-align:center; white-space:normal; }
.payment-id { display:block; color:#96a4af; overflow-wrap:anywhere; margin-top:18px; }
#payment-form input { font-size:16px; min-width:0; }
@media(max-width:400px){.payment-history{padding:16px}.payment-row{font-size:13px;gap:6px}.payment-sum{font-size:14px}}

.account-profile .account-support { margin-left:auto; flex:0 0 auto; color:#b7cbd4; display:inline-flex; align-items:center; min-height:44px; }

.round-preparing { display:flex; align-items:center; justify-content:center; gap:10px; margin:20px 0 8px; color:#b7c9d2; font-size:14px; }
.round-preparing>span { width:16px; height:16px; border:2px solid #354b58; border-top-color:#d6ba77; border-radius:50%; animation:round-preparing-spin 1s linear infinite; }
@keyframes round-preparing-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .round-preparing>span { animation:none; } }