:root {
  color-scheme: dark;
  --bg: #08060d;
  --panel: rgba(26, 18, 37, .94);
  --panel-soft: rgba(38, 25, 55, .82);
  --purple: #9b52ff;
  --purple-dark: #5d20b7;
  --gold: #ffd66b;
  --gold-strong: #f5b942;
  --text: #fffaf0;
  --muted: #a99eb8;
  --green: #54e3a4;
  --red: #ff5a73;
  --border: rgba(255, 214, 107, .17);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    linear-gradient(180deg,rgba(6,3,11,.16),rgba(5,3,9,.56) 56%,rgba(5,3,8,.92)),
    url("/rocket/assets/bao-chinese-bg-v417.webp") center top / cover no-repeat,
    #07040d;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 6%,rgba(132,52,225,.15),transparent 34%),linear-gradient(90deg,rgba(0,0,0,.36),transparent 18% 82%,rgba(0,0,0,.36)); }
button, input { font: inherit; }
button { color: inherit; }

.app-shell { position: relative; width: min(100%, 540px); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)); }
.topbar, .account-strip, .section-title, .players-head, .player-row, .bet-row { display: flex; align-items: center; }
.topbar { justify-content: space-between; margin-bottom: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mascot { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(155,82,255,.5)); }
.brand strong { display: block; font-size: 17px; letter-spacing: .2px; }
.brand small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.live-dot.connected { background: var(--green); box-shadow: 0 0 10px var(--green); }
.icon-button, .text-button, .adjust-button, .quick-bets button { border: 1px solid var(--border); background: rgba(255,255,255,.055); }
.icon-button { min-width: 42px; height: 38px; border-radius: 13px; font-weight: 800; }
.sound-button { font-size: 16px; transition: opacity .2s, border-color .2s, box-shadow .2s; }
.sound-button.on { border-color: rgba(255,214,107,.42); box-shadow: inset 0 0 14px rgba(245,185,66,.09),0 0 12px rgba(155,82,255,.12); }
.sound-button.off { opacity: .48; }

.account-strip { justify-content: space-between; padding: 11px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(110deg, rgba(93,32,183,.28), rgba(245,185,66,.08)); font-size: 13px; color: var(--muted); }
.account-strip b { color: var(--gold); margin-left: 3px; }

.flight-card, .bet-card, .players-card { border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg,rgba(34,20,50,.97),rgba(15,10,23,.96)); box-shadow: 0 18px 45px rgba(0,0,0,.3),inset 0 1px rgba(255,236,170,.045); overflow: hidden; }
.flight-card { margin-bottom: 10px; }
.sky { position: relative; height: 286px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 74% 20%,rgba(135,53,220,.2),transparent 34%),linear-gradient(180deg,rgba(17,5,33,.26),rgba(5,3,11,.84)),url("/rocket/assets/bao-chinese-bg-v417.webp") center 22% / cover no-repeat,#0b0613; }
.sky::before { content: ""; position: absolute; z-index: 1; inset: 9px; pointer-events: none; border: 1px solid rgba(255,214,107,.13); border-radius: 16px; box-shadow: inset 0 0 38px rgba(155,82,255,.12),0 0 24px rgba(0,0,0,.28); }
.flight-canvas { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.rocket-lottie { position: absolute; z-index: 5; left: 0; top: 0; width: 240px; height: 240px; pointer-events: none; opacity: 0; transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform,opacity; contain: layout paint style; }
.rocket-lottie.ready { opacity: 1; }
.rocket-lottie__spin, .rocket-lottie__animation, .rocket-lottie__animation svg, .rocket-lottie__animation canvas { width: 100%; height: 100%; }
.rocket-lottie__spin { transform-origin: 50% 50%; will-change: transform; }
.rocket-lottie__spin.rare-turn { animation: lottieRareTurn 3.8s cubic-bezier(.45,.02,.2,1) both; }
.rocket-lottie__animation { filter: drop-shadow(0 7px 8px rgba(0,0,0,.42)) drop-shadow(0 0 13px rgba(176,75,255,.3)); }
@keyframes lottieRareTurn { 0% { transform: rotate(0deg) scale(1); } 48% { transform: rotate(175deg) scale(.98); } 100% { transform: rotate(360deg) scale(1); } }
.sky::after { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--impact-x,70%) var(--impact-y,30%),rgba(255,250,187,.95),rgba(255,117,35,.45) 9%,transparent 28%); opacity: 0; }
.stars, .stars::before, .stars::after { position: absolute; inset: 0; content: ""; background-image: radial-gradient(#fff 0.7px, transparent .8px); background-size: 28px 28px; opacity: .24; }
.stars::before { transform: translate(13px, 9px); background-size: 42px 42px; opacity: .4; }
.stars::after { transform: translate(4px, 18px); background-size: 68px 68px; opacity: .38; }
.flight-chart { position: absolute; inset: auto 0 0; width: 100%; height: 70%; opacity: .95; }
.rocket { position: absolute; left: 7%; bottom: 12%; z-index: 3; width: clamp(92px,26vw,112px); aspect-ratio: 3 / 2; transform: translate3d(0,0,0) rotate(-8deg); transform-origin: 52% 52%; will-change: transform; backface-visibility: hidden; contain: layout paint style; }
.rocket-body { position: relative; z-index: 3; display: block; width: 100%; height: 100%; object-fit: contain; transform: translateZ(0); filter: drop-shadow(0 4px 5px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255,214,107,.26)); }
.rocket-aura { position: absolute; z-index: 1; inset: 8px 2px; border-radius: 50%; background: radial-gradient(ellipse,rgba(255,214,107,.3),rgba(155,82,255,.14) 45%,transparent 70%); filter: blur(8px); animation: rocketAura .9s ease-in-out infinite alternate; }
.rocket-flame { position: absolute; z-index: 2; width: 56px; height: 17px; left: -35px; top: 43%; border-radius: 50% 0 0 50%; transform: translate3d(0,-50%,0) scaleX(.78); transform-origin: 100% 50%; background: linear-gradient(90deg,transparent 0,#742cf3 20%,#ff8d2e 56%,#ffe47c 78%,#fffbe2 100%); opacity: .94; filter: blur(1.4px); animation: flamePulse .12s ease-in-out infinite alternate; will-change: transform,opacity; }
.rocket-flame::before { content: ""; position: absolute; right: 0; top: 4px; width: 37px; height: 9px; border-radius: 50%; background: linear-gradient(90deg,transparent,#ffb23f 52%,#fff 100%); }
.rocket-flame::after { content: ""; position: absolute; right: 6px; top: 6px; width: 68px; height: 5px; border-radius: 50%; background: linear-gradient(90deg,transparent,rgba(148,68,255,.25),rgba(255,218,103,.78)); transform: translateX(-16px); opacity: .58; }
@keyframes flamePulse { from { transform: translate3d(2px,-50%,0) scaleX(.72) scaleY(.82); opacity: .74; } to { transform: translate3d(-5px,-50%,0) scaleX(1.08) scaleY(1.04); opacity: 1; } }
@keyframes rocketAura { to { transform: scale(1.13); opacity: .62; } }
.multiplier { position: absolute; z-index: 4; left: 4%; right: 52%; top: 13%; text-align: center; font-size: clamp(42px,13vw,62px); line-height: 1; font-weight: 950; color: #ffe18a; text-shadow: 0 2px #8d4e0d,0 0 16px rgba(255,214,107,.42),0 0 42px rgba(155,82,255,.32); letter-spacing: -2px; font-variant-numeric: tabular-nums; transition: opacity .16s ease; }
.multiplier.countdown-active { opacity: 0; }
.phase-label { position: absolute; z-index: 4; left: 5%; right: 53%; top: 37%; text-align: center; color: rgba(231,220,241,.72); font-size: 11px; letter-spacing: .25px; }
.countdown { position: absolute; z-index: 5; left: 0; right: 0; top: 65%; text-align: center; color: #fff0b0; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255,205,82,.35); }
.countdown.launching { top: 27%; font-size: clamp(82px,26vw,122px); line-height: 1; color: #fff2bd; text-shadow: 0 3px #8d4d09,0 0 22px rgba(255,211,94,.62),0 0 58px rgba(154,72,255,.42); }
.countdown.launching::before { content: ""; position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; border: 1px solid rgba(255,218,110,.22); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 35px rgba(146,63,255,.18),inset 0 0 24px rgba(255,213,103,.08); }
.countdown.launching.beat { animation: launchCount .68s cubic-bezier(.16,.82,.23,1) both; }
.countdown.launching.beat::before { animation: countRing .78s cubic-bezier(.16,.7,.2,1) both; }
@keyframes launchCount { 0% { opacity: 0; transform: scale(1.65); filter: blur(7px); } 30% { opacity: 1; transform: scale(.94); filter: blur(0); } 53% { transform: scale(1.04); } 100% { opacity: .96; transform: scale(1); } }
@keyframes countRing { 0% { opacity: .15; transform: translate(-50%,-50%) scale(.72); } 45% { opacity: .82; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
.flight-card.crash-impact .sky::after { animation: crashFlash .58s ease-out; }
.rocket.is-crashing { animation: rocketCrash .6s cubic-bezier(.22,.7,.35,1) both; }
.flight-card.crashed .multiplier { color: var(--red); }
@keyframes crashFlash { 0% { opacity: 0; transform: scale(.78); } 16% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes rocketCrash {
  0% { transform: translate3d(var(--rocket-x),var(--rocket-y),0) rotate(var(--rocket-r)) scale(var(--rocket-s)); opacity: 1; }
  24% { transform: translate3d(calc(var(--rocket-x) + 6px),calc(var(--rocket-y) - 3px),0) rotate(calc(var(--rocket-r) + 10deg)) scale(1.18); opacity: 1; }
  100% { transform: translate3d(calc(var(--rocket-x) + 62px),calc(var(--rocket-y) + 44px),0) rotate(82deg) scale(.62); opacity: 0; }
}
.crash-fx { position: absolute; z-index: 7; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; }
.crash-fx.active { opacity: 1; }
.crash-core, .crash-ring, .crash-spark { position: absolute; left: 0; top: 0; display: block; transform: translate(-50%,-50%); }
.crash-core { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle,#fff9c7 0 12%,#ffd350 22%,#ff6d2d 54%,transparent 72%); filter: blur(.3px); }
.crash-fx.active .crash-core { animation: explosionCore .62s ease-out both; }
.crash-ring { width: 30px; height: 30px; border: 3px solid rgba(255,215,93,.9); border-radius: 50%; box-shadow: 0 0 20px #ff7b26; }
.crash-fx.active .crash-ring { animation: explosionRing .72s ease-out both; }
.crash-spark { width: 8px; height: 25px; border-radius: 999px; background: linear-gradient(#fff7b0,#ff7d2e,transparent); transform-origin: 50% 0; }
.crash-fx.active .crash-spark { animation: explosionSpark .72s ease-out both; }
.spark-1 { --spark-angle: 18deg; } .spark-2 { --spark-angle: 102deg; } .spark-3 { --spark-angle: 198deg; } .spark-4 { --spark-angle: 286deg; }
@keyframes explosionCore { 0% { transform: translate(-50%,-50%) scale(.15); opacity: 0; } 22% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(4.8); opacity: 0; } }
@keyframes explosionRing { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(6.5); opacity: 0; } }
@keyframes explosionSpark { 0% { transform: translate(-50%,-50%) rotate(var(--spark-angle)) translateY(0) scaleY(.2); opacity: 1; } 100% { transform: translate(-50%,-50%) rotate(var(--spark-angle)) translateY(-92px) scaleY(1.2); opacity: 0; } }

.bet-card { padding: 13px; margin-bottom: 10px; }
.bet-row { gap: 8px; }
.adjust-button { flex: 0 0 48px; height: 52px; border-radius: 14px; color: var(--gold); font-weight: 900; }
.confirm-amount { flex-basis: 42px; color: var(--green); }
.amount-field { flex: 1; min-width: 0; height: 52px; padding: 6px 12px; border: 1px solid rgba(155,82,255,.32); border-radius: 14px; background: #0d0914; }
.amount-field span { display: block; color: var(--muted); font-size: 10px; }
.amount-field input { width: 100%; padding: 2px 0 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 21px; font-weight: 800; }
.quick-bets { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 9px 0; }
.quick-bets button { padding: 8px 4px; border-radius: 10px; color: #d8cce7; font-size: 12px; }
.quick-bets .all-in-button { grid-column: 1 / -1; color: #1b1303; background: linear-gradient(115deg,var(--gold-strong),var(--gold)); font-weight: 900; }
.action-button { width: 100%; min-height: 58px; border: 0; border-radius: 16px; background: linear-gradient(115deg, var(--purple-dark), var(--purple)); box-shadow: 0 8px 24px rgba(111,38,208,.28); font-size: 17px; font-weight: 900; }
.action-button.cashout { color: #1b1303; background: linear-gradient(115deg, var(--gold-strong), var(--gold)); box-shadow: 0 8px 24px rgba(245,185,66,.22); }
.action-button:disabled { filter: grayscale(.55); opacity: .46; box-shadow: none; }
.action-button.pending { cursor: wait; }
.action-button small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; opacity: .76; }
.feedback { min-height: 15px; margin: 7px 2px -2px; color: var(--muted); text-align: center; font-size: 11px; }
.feedback.error { color: var(--red); }

.players-card { padding: 13px; }
.section-title { justify-content: space-between; margin-bottom: 10px; }
.section-title span { color: var(--muted); font-size: 11px; }
.round-summary { min-height: 16px; margin: -4px 0 8px; color: var(--gold); font-size: 10px; }
.players-head, .player-row { display: grid; grid-template-columns: 1fr .9fr 1.1fr; gap: 8px; }
.players-head { padding: 0 7px 7px; color: #746a81; font-size: 10px; text-transform: uppercase; }
.players-head span:nth-child(n+2), .player-row span:nth-child(n+2) { text-align: right; }
.players-list { overflow: visible; }
.player-row { padding: 9px 7px; border-top: 1px solid rgba(255,255,255,.045); font-size: 12px; }
.player-row { transition: opacity .22s ease, transform .22s ease, background-color .22s ease; }
.player-row.enter { opacity: 0; transform: translateY(-8px); background: rgba(155,82,255,.13); }
.player-row b { color: #d7c8e9; }
.player-row .won { color: var(--green); }
.player-row .lost { color: var(--red); }
.player-row .active { color: var(--gold); }
.empty-list { padding: 24px 10px; color: var(--muted); text-align: center; font-size: 12px; }

.auth-gate { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 30%,rgba(100,38,169,.38),rgba(7,4,12,.97) 64%); }
.auth-gate[hidden] { display: none; }
.auth-gate__card { width: min(100%,390px); padding: 30px 22px; border: 1px solid rgba(255,214,107,.3); border-radius: 26px; background: linear-gradient(150deg,rgba(45,21,67,.98),rgba(15,8,23,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.58); text-align: center; }
.auth-gate__card img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(155,82,255,.45)); }
.auth-gate__card strong, .auth-gate__card span { display: block; }
.auth-gate__card strong { margin-top: 12px; color: var(--gold); font-size: 20px; }
.auth-gate__card span { margin: 10px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-gate__card a { display: block; padding: 14px 16px; border-radius: 15px; color: #1b1303; background: linear-gradient(115deg,var(--gold-strong),var(--gold)); font-weight: 900; text-decoration: none; }

.result-burst { position: fixed; z-index: 30; left: 50%; top: 42%; padding: 15px 23px; border: 1px solid var(--border); border-radius: 18px; background: rgba(12,8,18,.94); color: var(--gold); font-size: 22px; font-weight: 900; transform: translate(-50%,-50%) scale(.5); opacity: 0; pointer-events: none; }
.result-burst.show { animation: resultBurst 1.4s ease; }
@keyframes resultBurst { 18%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-65%) scale(1.05); } }

.big-win { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%,rgba(255,194,56,.22),rgba(8,4,13,.94) 60%); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .22s ease,visibility .22s; }
.big-win.show { visibility: visible; opacity: 1; pointer-events: auto; }
.win-canvas { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.big-win__glow { position: absolute; width: 72vmin; height: 72vmin; border-radius: 50%; background: repeating-conic-gradient(from 0deg,rgba(255,221,111,.3) 0 6deg,transparent 6deg 13deg); filter: blur(4px); }
.big-win.show .big-win__glow { animation: bigWinGlow 10s linear infinite; }
.big-win__card { position: relative; z-index: 2; width: min(86vw,400px); padding: 34px 20px 29px; border: 1px solid rgba(255,219,111,.82); border-radius: 30px; background: radial-gradient(circle at 50% -8%,rgba(255,210,89,.2),transparent 42%),linear-gradient(155deg,rgba(83,30,126,.98),rgba(16,7,25,.98) 50%,rgba(93,56,10,.97)); box-shadow: 0 0 0 5px rgba(255,194,50,.08),0 24px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.22); text-align: center; transform: scale(.55) translateY(35px); overflow: hidden; }
.big-win__card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,221,118,.25); border-radius: 23px; background: repeating-linear-gradient(45deg,transparent 0 20px,rgba(255,219,102,.025) 21px 22px); pointer-events: none; }
.big-win.show .big-win__card { animation: bigWinCard .72s cubic-bezier(.2,.8,.2,1) both; }
.big-win__crown { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border: 1px solid rgba(255,225,137,.7); border-radius: 50%; color: #3a1900; background: radial-gradient(circle,#fff3b7,#efad29 58%,#a95d08); font-family: "Songti SC","STSong",serif; font-size: 31px; font-weight: 900; line-height: 1; box-shadow: 0 0 24px rgba(255,214,107,.52); }
.big-win__eyebrow { margin-top: 7px; color: #fff0b3; font-size: 14px; font-weight: 900; letter-spacing: 3px; }
.big-win__card strong { display: block; margin: 9px 0 2px; color: #fff5c2; font-size: clamp(55px,17vw,84px); line-height: 1; letter-spacing: -3px; text-shadow: 0 3px #c77815,0 0 32px rgba(255,192,51,.55); }
.big-win__card > span { display: block; color: #6ff1b2; font-size: clamp(27px,8vw,40px); font-weight: 900; }
.big-win__card small { display: block; margin-top: 9px; color: #d8cbe3; }
.big-win__card .big-win__tap { margin-top: 16px; color: rgba(255,238,175,.72); font-size: 11px; letter-spacing: .8px; }
.gold-rain { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.gold-piece { position: absolute; left: var(--x); top: -10vh; width: 15px; height: 15px; border: 2px solid #ffe99a; border-radius: 50%; background: linear-gradient(135deg,#fff2a2,#f3a61e 55%,#b76508); box-shadow: 0 0 8px rgba(255,203,67,.65); opacity: 0; }
.gold-piece.ingot { width: 20px; height: 11px; border-radius: 50% 50% 35% 35%; }
.big-win.show .gold-piece { animation: goldFall var(--duration) var(--delay) cubic-bezier(.15,.6,.4,1) both; }
@keyframes bigWinBackdrop { 0% { opacity: 0; } 9%,82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bigWinGlow { from { transform: rotate(0) scale(.78); opacity: .42; } 50% { opacity: .9; } to { transform: rotate(360deg) scale(1.08); opacity: .42; } }
@keyframes bigWinCard { 0% { transform: scale(.55) translateY(35px); opacity: 0; } 72% { transform: scale(1.06) translateY(0); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes goldFall { 0% { transform: translate3d(0,-10vh,0) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate3d(var(--drift),115vh,0) rotate(var(--spin)); opacity: .85; } }

@media (min-width: 480px) { .sky { height: 315px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .big-win.show { opacity: 1; visibility: visible; }
  .big-win.show .big-win__card { opacity: 1; transform: none; }
  .big-win.show .win-canvas, .big-win.show .big-win__glow { display: none; }
  .rocket-lottie__spin.rare-turn { animation: none; }
}
@media (max-width: 380px) { .sky { height: 262px; } .rocket { width: 88px; } }