:root {
    color-scheme: dark;
    --bg: #080512;
    --panel: rgba(20, 12, 42, 0.86);
    --panel-strong: rgba(27, 16, 55, 0.95);
    --line: rgba(228, 203, 255, 0.12);
    --text: #faf6ff;
    --muted: #b9acd1;
    --purple: #9e63ff;
    --purple-2: #d487ff;
    --pink: #ff83d8;
    --success: #a786ff;
    --danger: #ff7f9f;
    --gold: #f3c7ff;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -15%, rgba(122, 71, 221, 0.34), transparent 38%),
        radial-gradient(circle at 100% 25%, rgba(224, 112, 255, 0.17), transparent 28%),
        linear-gradient(180deg, #130a27 0%, var(--bg) 62%, #030207 100%);
    color: var(--text);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .82;
    z-index: -3;
}
.nebula {
    position: fixed;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(105px);
    pointer-events: none;
    z-index: -2;
}
.nebula-one { left: -180px; top: 22%; background: rgba(126, 65, 255, .18); }
.nebula-two { right: -180px; bottom: 4%; background: rgba(255, 104, 218, .13); }

.app-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
}
.glass {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(28, 17, 56, .92), rgba(12, 8, 28, .9));
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border-radius: 22px;
}
.eyebrow {
    margin: 0 0 3px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}
h1 {
    margin: 0;
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
}
.balance-card {
    min-width: 120px;
    padding: 9px 12px;
    border: 1px solid rgba(213, 151, 255, .18);
    border-radius: 15px;
    background: rgba(186, 106, 255, .08);
    text-align: right;
}
.balance-card span { display: block; color: var(--muted); font-size: 11px; }
.balance-card strong { display: block; margin-top: 3px; color: #efceff; font-size: 18px; }

.notice {
    margin: 12px 2px 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    background: rgba(255,255,255,.06);
    line-height: 1.4;
    font-size: 14px;
}
.notice.success { border-color: rgba(163, 126, 255, .38); background: rgba(137, 91, 255, .13); }
.notice.error { border-color: rgba(255, 127, 159, .4); background: rgba(255, 95, 136, .11); }

.flight-panel {
    margin-top: 14px;
    overflow: hidden;
    border-radius: 28px;
}
.flight-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}
.flight-heading > div { display: flex; align-items: center; gap: 8px; }
.flight-heading strong { color: var(--text); }
.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8c6cff;
    box-shadow: 0 0 14px #986cff;
}
.status-dot.flying { background: #ff9deb; box-shadow: 0 0 16px #ff9deb; animation: pulse 1s infinite; }
.status-dot.crashed { background: #ff668f; box-shadow: 0 0 16px #ff668f; }
.status-dot.won { background: #d6b4ff; box-shadow: 0 0 16px #d6b4ff; }
.fairness-badge {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    font-size: 11px;
    white-space: nowrap;
}

.space-stage {
    position: relative;
    height: min(58vh, 510px);
    min-height: 390px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 90%, rgba(124, 62, 217, .28), transparent 36%),
        linear-gradient(180deg, #080513 0%, #160a2d 62%, #321257 100%);
}
.space-stage::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -70px;
    height: 160px;
    border-radius: 50% 50% 0 0;
    background: radial-gradient(circle at 50% 0, #8a46e7, #35145e 52%, #170829 72%);
    box-shadow: 0 -12px 50px rgba(197, 120, 255, .23);
    z-index: -1;
}
.trajectory {
    position: absolute;
    border: 1px solid rgba(229, 199, 255, .08);
    border-radius: 50%;
    transform: rotate(-22deg);
}
.trajectory-one { width: 520px; height: 230px; left: -190px; bottom: 24px; }
.trajectory-two { width: 660px; height: 320px; right: -310px; top: 62px; }
.multiplier {
    position: absolute;
    z-index: 5;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(50px, 14vw, 84px);
    font-weight: 950;
    letter-spacing: -.05em;
    color: #fff;
    text-shadow: 0 0 24px rgba(205, 151, 255, .42), 0 12px 42px rgba(0,0,0,.45);
}
.multiplier.hot { color: #ffd8f7; animation: multiplierGlow .7s alternate infinite; }
.multiplier.crashed { color: #ff8cac; animation: shake .38s both; }
.potential-win {
    position: absolute;
    z-index: 5;
    top: 125px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(9, 5, 20, .55);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.rocket-wrap {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 38px;
    width: 92px;
    height: 190px;
    transform: translateX(-50%) rotate(8deg);
    transform-origin: 50% 88%;
    transition: left .2s linear, bottom .2s linear, transform .2s linear;
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.36));
}
.rocket-wrap.flying { animation: rocketVibrate .18s alternate infinite; }
.rocket-wrap.cashout { animation: rocketEscape .85s cubic-bezier(.2,.7,.2,1) forwards; }
.rocket-wrap.crashed { opacity: 0; transform: translateX(-50%) scale(.5); transition: .18s; }
.rocket-svg { width: 100%; height: 100%; overflow: visible; }
.rocket-body { filter: drop-shadow(0 0 12px rgba(196, 135, 255, .34)); }
.rocket-flame { transform-origin: 60px 202px; animation: flame 0.16s alternate infinite; }
.flame-small { animation-duration: .11s; }
.rocket-glow {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 60px;
    height: 115px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 186, 244, .38), rgba(125, 63, 255, .14) 46%, transparent 72%);
    filter: blur(16px);
    z-index: -1;
}

.explosion {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 56%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    animation: explosionPop .72s ease-out both;
}
.explosion span { font-size: 88px; filter: drop-shadow(0 0 26px rgba(255, 108, 168, .6)); }
.explosion i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e9b2ff;
    animation: debris .75s ease-out both;
}
.explosion i:nth-of-type(1) { --x: -80px; --y: -40px; }
.explosion i:nth-of-type(2) { --x: 75px; --y: -55px; }
.explosion i:nth-of-type(3) { --x: -64px; --y: 62px; }
.explosion i:nth-of-type(4) { --x: 82px; --y: 48px; }
.explosion i:nth-of-type(5) { --x: 8px; --y: -94px; }
.explosion i:nth-of-type(6) { --x: -8px; --y: 92px; }
.planet { position: absolute; border-radius: 50%; opacity: .72; }
.planet-one { width: 44px; height: 44px; right: 32px; top: 45px; background: radial-gradient(circle at 30% 30%, #f4bfff, #5a2b96); }
.planet-two { width: 20px; height: 20px; left: 34px; top: 145px; background: radial-gradient(circle at 30% 30%, #c1b3ff, #3a2475); }

.control-panel, .history-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
}
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.section-title > div { display: grid; gap: 3px; }
.section-title span, .tip { color: var(--muted); font-size: 12px; }
.quick-bets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}
.quick-bets button {
    padding: 10px 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: var(--text);
    font-weight: 800;
}
.quick-bets button.active {
    background: linear-gradient(135deg, rgba(160, 95, 255, .42), rgba(222, 126, 255, .28));
    box-shadow: 0 0 0 2px rgba(198, 145, 255, .13);
}
.bet-input-wrap { display: block; margin-bottom: 12px; }
.bet-input-wrap span { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.bet-input-wrap input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: rgba(255,255,255,.045);
    color: var(--text);
    text-align: center;
    font-size: 20px;
    font-weight: 900;
}
.primary-button, .cashout-button {
    width: 100%;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    color: white;
    font-weight: 900;
}
.primary-button {
    padding: 15px 16px;
    background: linear-gradient(135deg, #7d4cff, #c567ff 56%, #ff84d4);
    box-shadow: 0 14px 34px rgba(121, 75, 230, .34);
}
.cashout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #a066ff, #e077ff);
    box-shadow: 0 14px 34px rgba(169, 92, 255, .34);
}
.cashout-button small { display: block; font-size: 12px; opacity: .82; }
.cashout-button strong { display: block; margin-top: 2px; font-size: 20px; }
.cashout-icon { font-size: 28px; }
button:disabled { opacity: .48; cursor: not-allowed; }

.history-list { display: grid; gap: 8px; }
.history-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    font-size: 13px;
}
.history-row strong { color: #f0d5ff; }
.history-row .win { color: #d5b5ff; }
.history-row .loss { color: #ff94ad; }
.empty-history { margin: 4px 0; color: var(--muted); text-align: center; font-size: 13px; }

footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px 0;
    color: var(--muted);
    font-size: 11px;
}
footer b { color: #ecd1ff; }

.loader-overlay {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 3, 11, .82);
    backdrop-filter: blur(12px);
}
.loader-card {
    width: min(100%, 330px);
    padding: 24px 20px;
    border-radius: 22px;
    text-align: center;
}
.loader-card strong, .loader-card span { display: block; }
.loader-card span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.loader-rocket { margin-bottom: 12px; font-size: 48px; animation: loaderFly 1.2s ease-in-out infinite alternate; }

@keyframes pulse { to { opacity: .48; transform: scale(.8); } }
@keyframes multiplierGlow { to { text-shadow: 0 0 34px rgba(255, 139, 224, .7); transform: translateX(-50%) scale(1.035); } }
@keyframes flame { to { transform: scaleY(1.2) scaleX(.82); opacity: .72; } }
@keyframes rocketVibrate { from { margin-left: -1px; } to { margin-left: 1px; } }
@keyframes rocketEscape { to { left: 87%; bottom: 72%; transform: translateX(-50%) rotate(34deg) scale(.72); opacity: 0; } }
@keyframes explosionPop { from { transform: translate(-50%, -50%) scale(.25); opacity: 0; } 45% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
@keyframes debris { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
@keyframes shake { 20% { transform: translateX(calc(-50% - 6px)); } 40% { transform: translateX(calc(-50% + 6px)); } 60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 4px)); } }
@keyframes loaderFly { to { transform: translateY(-10px) rotate(8deg); filter: drop-shadow(0 12px 16px rgba(186, 109, 255, .4)); } }

@media (max-width: 430px) {
    .app-shell { padding-left: 10px; padding-right: 10px; }
    .topbar { padding: 13px 14px; }
    .balance-card { min-width: 105px; }
    .space-stage { min-height: 360px; height: 52vh; }
    .multiplier { top: 28px; }
    .potential-win { top: 112px; }
    .quick-bets { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .quick-bets button { font-size: 12px; }
    .history-row { grid-template-columns: 1fr auto; }
    .history-row .history-payout { grid-column: 1 / -1; }
}


/* Rocket countdown */
.rocket-wrap.countdown {
    animation: rocket-countdown-pulse .55s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 20px rgba(190, 122, 255, .55));
}

.multiplier.countdown-number {
    color: #f0d7ff;
    text-shadow:
        0 0 18px rgba(190, 122, 255, .7),
        0 0 42px rgba(126, 74, 255, .45);
    animation: countdown-number-pulse .8s ease-in-out infinite;
}

@keyframes rocket-countdown-pulse {
    from { transform: translateX(-50%) rotate(5deg) scale(.97); }
    to { transform: translateX(-50%) rotate(11deg) scale(1.03); }
}

@keyframes countdown-number-pulse {
    0%, 100% { transform: scale(.92); opacity: .78; }
    50% { transform: scale(1.08); opacity: 1; }
}


/* Countdown launch fix */
.multiplier.launch-flash {
    font-size: clamp(42px, 12vw, 72px);
    color: #f4dcff;
    text-shadow: 0 0 28px rgba(205, 151, 255, .72);
    animation: launch-flash-pop .45s ease-out both;
}

@keyframes launch-flash-pop {
    0% { transform: translateX(-50%) scale(.72); opacity: .15; }
    55% { transform: translateX(-50%) scale(1.12); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Надёжная фиксация вывода */
.cashout-button.pending {
    opacity: 1;
    cursor: progress;
    background: linear-gradient(135deg, #6f45bc, #b867e8);
    animation: cashoutPendingPulse .8s ease-in-out infinite alternate;
}

@keyframes cashoutPendingPulse {
    from {
        box-shadow: 0 10px 26px rgba(132, 78, 220, .28);
        transform: scale(1);
    }
    to {
        box-shadow: 0 16px 42px rgba(184, 103, 232, .48);
        transform: scale(.99);
    }
}