:root {
    --bg: #0b0e1a;
    --bg-soft: #11152a;
    --surface: #171c36;
    --surface-2: #1e2444;
    --border: #2a3158;
    --text: #eef1ff;
    --text-dim: #9aa3c7;
    --primary: #7c5cff;
    --primary-2: #5a3df5;
    --accent: #00e5a8;
    --accent-2: #00c2ff;
    --danger: #ff5470;
    --warning: #ffb547;
    --gold: #ffd166;
    --radius: 14px;
    --shadow: 0 10px 40px #00000073;
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --input-font-size: 17px
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,body {
    height: 100%
}

body {
    font-family: var(--font);
    background: radial-gradient(1200px 600px at 80% -10%, #7c5cff2e, transparent 60%), radial-gradient(900px 500px at -10% 30%, #00e5a81a, transparent 55%), var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh
}

#root {
    flex-direction: column;
    min-height: 100vh;
    display: flex
}

a {
    color: var(--accent-2);
    text-decoration: none
}

button {
    font-family: inherit
}

input,textarea,select {
    font-family: inherit;
    font-size: var(--input-font-size)
}

.btn {
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 1rem;
    font-weight: 700;
    transition: transform .12s,box-shadow .12s,opacity .12s;
    display: inline-flex
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn:not(:disabled):hover {
    transform: translateY(-2px)
}

.btn:not(:disabled):active {
    transform: translateY(0)
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    box-shadow: 0 8px 24px #7c5cff66
}

.btn-accent {
    color: #042818;
    background: linear-gradient(135deg,#0f8,#00e055);
    box-shadow: 0 8px 24px #00ff7873
}

.btn-gold {
    color: #3d2a00;
    background: linear-gradient(135deg,#ffe082,#ffb300);
    box-shadow: 0 8px 28px #ffb30073
}

.btn-ghost {
    color: var(--text);
    border: 1px solid var(--border);
    background: 0 0
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #d63356);
    color: #fff
}

.btn-sm {
    padding: 9px 16px;
    font-size: .85rem
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1.1rem
}

.btn-block {
    width: 100%
}

.input-group {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    display: flex
}

.input-group label {
    color: var(--text-dim);
    font-size: .85rem;
    font-weight: 600
}

.input {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    width: 100%;
    color: var(--text);
    font-size: var(--input-font-size);
    border-radius: 10px;
    outline: none;
    padding: 13px 14px;
    transition: border-color .15s
}

.input:focus {
    border-color: var(--primary)
}

.input-error {
    color: var(--danger);
    font-size: .8rem
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px
}

.modal-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 100;
    background: #05070fbf;
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: flex;
    position: fixed;
    inset: 0
}

.modal-overlay--clear {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #05070f59
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow);
    border-radius: 18px;
    padding: 28px;
    animation: .25s modal-pop
}

@keyframes modal-pop {
    0% {
        opacity: 0;
        transform: scale(.92)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.modal h2 {
    margin-bottom: 8px
}

.alert {
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: .9rem
}

.alert-error {
    color: #ff8ba0;
    background: #ff54701f;
    border: 1px solid #ff547066
}

.alert-success {
    color: var(--accent);
    background: #00e5a81a;
    border: 1px solid #00e5a859
}

.badge {
    letter-spacing: .03em;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex
}

.badge-green {
    color: var(--accent);
    background: #00e5a81f;
    border: 1px solid #00e5a84d
}

.badge-red {
    color: var(--danger);
    background: #ff54701f;
    border: 1px solid #ff54704d
}

.badge-gold {
    color: var(--gold);
    background: #ffd1661f;
    border: 1px solid #ffd1664d
}

.app-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    background: #0b0e1ad9;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    display: flex;
    position: sticky;
    top: 0
}

.logo {
    color: var(--text);
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex
}

.logo-mark {
    grid-template-rows: repeat(2,9px);
    grid-template-columns: repeat(2,9px);
    gap: 2px;
    display: grid
}

.logo-mark span {
    border-radius: 2px
}

.logo-mark span:first-child {
    background: var(--primary)
}

.logo-mark span:nth-child(2) {
    background: var(--accent)
}

.logo-mark span:nth-child(3) {
    background: var(--accent-2)
}

.logo-mark span:nth-child(4) {
    background: var(--gold)
}

.header-actions {
    align-items: center;
    gap: 12px;
    display: flex
}

.balance-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 700;
    display: flex
}

.landing main {
    flex: 1
}

.landing .app-header {
    z-index: 50;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
    background: linear-gradient(#080c18d9 0%,#0000 100%);
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.landing .app-header .btn {
    padding: 8px 14px;
    font-size: .78rem
}

.landing .app-logo {
    width: auto;
    height: 44px
}

.lp-hero {
    padding: calc(72px + env(safe-area-inset-top,0px)) 16px 32px;
    position: relative;
    overflow: hidden
}

.lp-hero-bg {
    background: linear-gradient(180deg, #080c188c 0%, #080c18eb 72%, var(--bg) 100%), url(../images/all/backgorund-painel1.png) center top / cover no-repeat;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.lp-hero-inner {
    z-index: 1;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    position: relative
}

.lp-live-pill {
    color: var(--accent);
    background: #00e5a81f;
    border: 1px solid #00e5a859;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 600;
    display: inline-flex
}

.lp-live-pill strong {
    color: #fff;
    font-weight: 800
}

.lp-title {
    text-transform: uppercase;
    letter-spacing: -.02em;
    margin-bottom: 14px;
    font-size: clamp(2rem,9vw,3.2rem);
    font-weight: 900;
    line-height: 1.05
}

.lp-title-accent {
    background: linear-gradient(90deg, var(--gold), #ffe566, var(--accent));
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.lp-sub {
    color: #eef1ffc7;
    margin-bottom: 22px;
    padding: 0 4px;
    font-size: .95rem;
    line-height: 1.55
}

.lp-hero-banner {
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    max-width: 320px;
    margin: 0 auto 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px #00000073
}

.lp-hero-banner img {
    width: 100%;
    display: block
}

.lp-ctas {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    display: flex
}

.lp-btn-primary {
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 8px 28px #00ff7873;
    border-radius: 999px!important;
    padding: 16px 24px!important;
    font-size: 1rem!important;
    font-weight: 800!important
}

.lp-btn-link {
    color: var(--text-dim);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 8px;
    font-size: .9rem;
    font-weight: 600
}

.lp-btn-link:hover {
    color: var(--text)
}

.lp-trust {
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    display: grid
}

.lp-trust-item {
    color: var(--text-dim);
    text-align: center;
    background: #ffffff0a;
    border: 1px solid #ffffff14;
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.25;
    display: flex
}

.lp-trust-icon {
    font-size: 1.15rem;
    line-height: 1
}

.lp-stats {
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 16px 36px;
    display: grid
}

.lp-stat {
    text-align: center;
    background: #171c36d9;
    border: 1px solid #ffffff14;
    border-radius: 16px;
    padding: 16px 8px
}

.lp-stat-value {
    color: var(--accent);
    font-size: clamp(1rem,4.2vw,1.35rem);
    font-weight: 900;
    line-height: 1.1
}

.lp-stat-label {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 6px;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.25
}

.lp-section {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 16px
}

.lp-section-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: 1.55rem;
    font-weight: 900
}

.lp-section-sub {
    text-align: center;
    color: var(--text-dim);
    margin-top: 8px;
    margin-bottom: 28px;
    font-size: .9rem;
    line-height: 1.45
}

.lp-howto {
    background: #00000038;
    border-top: 1px solid #ffffff0f;
    border-bottom: 1px solid #ffffff0f;
    padding: 44px 0 48px
}

.lp-howto-head {
    text-align: center;
    margin-bottom: 28px;
    padding: 0 16px
}

.lp-howto-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    display: inline-flex
}

.lp-howto-icon svg {
    width: 28px;
    height: 28px
}

.lp-howto-title {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.55rem;
    font-weight: 900
}

.lp-howto-sub {
    color: var(--text-dim);
    margin-top: 8px;
    font-size: .9rem;
    line-height: 1.45
}

.lp-howto-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 16px 12px;
    scroll-padding-inline: 16px;
    display: flex;
    overflow-x: auto
}

.lp-howto-scroll::-webkit-scrollbar {
    display: none
}

.lp-howto-card {
    scroll-snap-align: center;
    background: #0e1222eb;
    border: 1px solid #ffffff14;
    border-radius: 18px;
    flex: 0 0 min(72vw,260px);
    overflow: hidden;
    box-shadow: 0 12px 32px #00000059
}

.lp-howto-visual {
    aspect-ratio: 3;
    background: #0a0e1a;
    position: relative;
    overflow: hidden
}

.lp-howto-visual img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block
}

.lp-howto-visual--board {
    aspect-ratio: 3;
    background: radial-gradient(circle at 50% 30%,#7c5cff2e,#0000 55%),#0a0e1a;
    justify-content: center;
    align-items: center;
    padding: 8px;
    display: flex
}

.lp-howto-visual--board .hero-board {
    aspect-ratio: 1;
    border-radius: 8px;
    gap: 2px;
    width: auto;
    max-height: 100%;
    padding: 6px
}

.lp-howto-badge {
    color: #041510;
    background: var(--accent);
    border-radius: 50%;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 4px 14px #00e5a873
}

.lp-howto-card h3 {
    padding: 14px 14px 6px;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.25
}

.lp-howto-card p {
    color: var(--text-dim);
    padding: 0 14px 16px;
    font-size: .82rem;
    line-height: 1.5
}

.lp-section-reviews {
    padding-top: 16px
}

.lp-reviews {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.lp-review {
    background: #171c36b3;
    border: 1px solid #ffffff14;
    border-radius: 18px;
    padding: 20px
}

.lp-review-stars {
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 12px;
    font-size: .9rem
}

.lp-review-text {
    color: var(--text);
    margin-bottom: 16px;
    font-size: .92rem;
    line-height: 1.55
}

.lp-review-author {
    align-items: center;
    gap: 12px;
    display: flex
}

.lp-review-name {
    font-size: .9rem;
    font-weight: 800
}

.lp-review-badge {
    color: var(--accent);
    margin-top: 2px;
    font-size: .75rem
}

.lp-final {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 16px 48px
}

.lp-final h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 900
}

.lp-final p {
    color: var(--text-dim);
    margin-bottom: 22px;
    font-size: .92rem;
    line-height: 1.5
}

.lp-footer {
    padding: 28px 16px calc(24px + env(safe-area-inset-bottom,0px));
    text-align: center;
    border-top: 1px solid #ffffff14
}

.lp-footer-logo {
    opacity: .9;
    width: auto;
    height: 56px;
    margin-bottom: 14px
}

.lp-footer-copy {
    color: var(--text-dim);
    font-size: .82rem
}

.lp-footer-note {
    color: #9aa3c7b3;
    margin-top: 8px;
    font-size: .75rem;
    line-height: 1.4
}

.hero {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 48px;
    display: grid
}

.hero-title {
    text-transform: uppercase;
    font-size: clamp(2.4rem,6vw,4rem);
    font-weight: 900;
    line-height: 1.05
}

.hero-title .grad {
    background: linear-gradient(90deg, var(--primary), var(--accent-2), var(--accent));
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.hero-sub {
    color: var(--text-dim);
    max-width: 520px;
    margin-top: 18px;
    font-size: 1.1rem;
    line-height: 1.6
}

.hero-ctas {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    display: flex
}

.hero-tags {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    display: flex
}

.live-pill {
    color: var(--accent);
    background: #00e5a81a;
    border: 1px solid #00e5a84d;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex
}

.live-dot {
    background: var(--accent);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.6s infinite pulse-dot
}

@keyframes pulse-dot {
    0%,to {
        box-shadow: 0 0 #00e5a880
    }

    50% {
        box-shadow: 0 0 0 7px #00e5a800
    }
}

.hero-board {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    aspect-ratio: 1;
    border-radius: 18px;
    grid-template-columns: repeat(8,1fr);
    gap: 5px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px;
    display: grid
}

.hero-cell {
    background: var(--bg-soft);
    --bv: 4px;
    border-radius: 5px;
    transition: background .5s,box-shadow .5s
}

.winners-feed {
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    display: flex
}

.winner-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    animation: .4s slide-in;
    display: flex
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.winner-avatar {
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 800;
    display: grid
}

.winner-info {
    flex: 1;
    min-width: 0
}

.winner-name {
    font-size: .9rem;
    font-weight: 600
}

.winner-time {
    color: var(--text-dim);
    font-size: .75rem
}

.winner-amount {
    color: var(--accent);
    font-weight: 800
}

.stats-strip {
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 24px 48px;
    display: grid
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    padding: 22px
}

.stat-value {
    color: var(--accent);
    font-size: 1.9rem;
    font-weight: 900
}

.stat-label {
    color: var(--text-dim);
    margin-top: 4px;
    font-size: .9rem
}

.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 900
}

.section-sub {
    text-align: center;
    color: var(--text-dim);
    margin-top: 8px;
    margin-bottom: 40px
}

.steps-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    display: grid
}

.step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    overflow: hidden
}

.step-num {
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2.6rem;
    font-weight: 900
}

.step-card h3 {
    margin: 12px 0 8px
}

.step-card p {
    color: var(--text-dim);
    font-size: .95rem;
    line-height: 1.55
}

.reviews-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    display: grid
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    display: flex
}

.review-stars {
    color: var(--gold);
    letter-spacing: 3px
}

.review-text {
    color: var(--text);
    font-size: .95rem;
    line-height: 1.55
}

.review-author {
    align-items: center;
    gap: 10px;
    margin-top: auto;
    display: flex
}

.review-author small {
    color: var(--text-dim)
}

.cta-final {
    text-align: center;
    padding: 72px 24px 88px
}

.cta-final h2 {
    margin-bottom: 12px;
    font-size: 2.2rem;
    font-weight: 900
}

.cta-final p {
    color: var(--text-dim);
    margin-bottom: 28px
}

.app-footer {
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-dim);
    padding: 22px 24px;
    font-size: .85rem
}

.auth-shell {
    flex-direction: column;
    min-height: 100dvh;
    display: flex;
    position: relative
}

.auth-shell:before {
    content: "";
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(#080c1873 0%,#080c18b3 100%),url(../images/all/backgorund-painel1.png) top/cover no-repeat;
    position: fixed;
    inset: 0
}

.auth-shell>* {
    z-index: 1;
    position: relative
}

.auth-page {
    padding: calc(32px + env(safe-area-inset-top,0px)) 16px calc(32px + env(safe-area-inset-bottom,0px));
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 22px;
    display: flex
}

.auth-logo img {
    filter: drop-shadow(0 6px 18px #0000008c);
    width: auto;
    height: 84px;
    display: block
}

.auth-card {
    -webkit-backdrop-filter: blur(14px);
    background: #0e1222d1;
    border: 1px solid #ffffff17;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px #00000073
}

.input-password {
    position: relative
}

.input-password .input {
    width: 100%;
    padding-right: 46px
}

.input-eye {
    width: 44px;
    height: 100%;
    color: var(--text-dim);
    cursor: pointer;
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    transition: color .15s;
    display: flex;
    position: absolute;
    top: 0;
    right: 0
}

.input-eye:hover {
    color: var(--text)
}

.auth-card h1 {
    margin-bottom: 6px;
    font-size: 1.6rem
}

.auth-card .muted {
    color: var(--text-dim);
    margin-bottom: 24px;
    font-size: .95rem
}

.auth-switch {
    text-align: center;
    color: var(--text-dim);
    margin-top: 18px;
    font-size: .9rem
}

.dash {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 64px
}

.dash-grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    margin-top: 22px;
    display: grid
}

.balance-hero {
    background: linear-gradient(135deg, #7c5cff40, #00c2ff1f), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 28px;
    display: flex
}

.balance-hero .value {
    color: var(--text);
    font-size: 2.4rem;
    font-weight: 900
}

.balance-hero .label {
    color: var(--text-dim);
    font-size: .9rem
}

.quick-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 22px;
    display: grid
}

.profile-stats {
    margin-top: 0;
    margin-bottom: 14px
}

.profile-history-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    display: flex
}

.profile-history-toggle {
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    background: #ffffff0d;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex
}

.profile-history-toggle svg {
    width: 14px;
    height: 14px
}

.quick-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
    border-radius: 12px;
    min-width: 0;
    padding: 14px 10px
}

.quick-stat .v {
    word-break: break-word;
    font-size: clamp(.95rem,4.2vw,1.15rem);
    font-weight: 800;
    line-height: 1.2
}

.quick-stat .l {
    color: var(--text-dim);
    margin-top: 4px;
    font-size: .72rem;
    line-height: 1.25
}

.tx-list,.hist-list {
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    display: flex;
    overflow-y: auto
}

.tx-item {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    display: flex
}

.tx-item-main {
    flex: 1;
    min-width: 0
}

.tx-item .d {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    overflow: hidden
}

.tx-item .t {
    color: var(--text-dim);
    font-size: .75rem
}

.tx-amount {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .88rem;
    font-weight: 800
}

.profile-user-info {
    min-width: 0
}

.profile-user-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    overflow: hidden
}

.profile-user-phone {
    color: var(--text-dim);
    font-size: .85rem
}

.profile-ref-row {
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    display: flex
}

.profile-ref-link {
    min-width: 0;
    color: var(--text-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-family: monospace;
    font-size: .72rem;
    overflow: hidden
}

.profile-ref-copy {
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    background: #ffffff0d;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: .72rem;
    font-weight: 700
}

.profile-ref-copy:disabled {
    opacity: .5;
    cursor: not-allowed
}

.profile-password-card .input-group {
    margin-bottom: 12px
}

.profile-password-card>.alert {
    margin-top: 12px;
    margin-bottom: 12px
}

.profile-password-card>.input-group:first-of-type {
    margin-top: 12px
}

.profile-scroll {
    max-height: 220px
}

.tx-item .badge {
    white-space: nowrap;
    flex-shrink: 0
}

.tx-amount.pos {
    color: var(--accent)
}

.tx-amount.neg {
    color: var(--danger)
}

.pix-box {
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    word-break: break-all;
    color: var(--text-dim);
    border-radius: 10px;
    margin: 12px 0;
    padding: 12px;
    font-family: monospace;
    font-size: .75rem
}

.amount-presets {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    display: flex
}

.preset-chip {
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .9rem;
    font-weight: 700;
    transition: all .12s
}

.preset-chip.active,.preset-chip:hover {
    border-color: var(--primary);
    color: #cdbfff;
    background: #7c5cff26
}

.panel-shell {
    background: var(--bg);
    flex-direction: column;
    flex: 1;
    min-height: 100dvh;
    display: flex
}

.panel-shell:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(#080c1859 0%,#080c188c 100%),url(../images/all/backgorund-painel1.png) top/cover no-repeat;
    position: fixed
}

.panel-shell>* {
    z-index: 1;
    position: relative
}

.install-bar {
    z-index: 55;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top,0px));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 16px #00000059
}

.panel--has-install-bar {
    padding-top: calc(58px + env(safe-area-inset-top,0px))
}

.install-bar-close {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    background: #b414148c;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    display: grid
}

.install-bar-icon {
    object-fit: contain;
    background: 0 0;
    border-radius: 0;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: block
}

.install-bar-text {
    min-width: 0;
    color: var(--text);
    flex: 1;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25
}

.install-bar-cta {
    color: #fff;
    cursor: pointer;
    background: #2563eb;
    border: none;
    border-radius: 999px;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 800;
    animation: 1.8s ease-in-out infinite install-pulse;
    display: inline-flex;
    position: relative;
    box-shadow: 0 4px 14px #2563eb59
}

@keyframes install-pulse {
    0%,to {
        box-shadow: 0 4px 14px #2563eb59,0 0 #2563eb8c
    }

    50% {
        box-shadow: 0 4px 14px #2563eb59,0 0 0 8px #2563eb00
    }
}

.install-bar-cta svg {
    width: 16px;
    height: 16px
}

.install-modal {
    text-align: center
}

.install-modal-head {
    margin-bottom: 20px
}

.install-modal-head h2 {
    color: var(--text);
    margin: 12px 0 6px;
    font-size: 1.35rem;
    font-weight: 800
}

.install-modal-head p {
    color: var(--text-dim);
    margin: 0;
    font-size: .88rem;
    line-height: 1.5
}

.install-modal-badge {
    color: #a5b4fc;
    background: #6366f12e;
    border-radius: 16px;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: grid
}

.install-modal-badge svg {
    width: 28px;
    height: 28px
}

.install-modal-steps {
    text-align: left;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    display: flex
}

.install-step {
    border: 1px solid var(--border);
    background: #ffffff0a;
    border-radius: 14px;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    display: flex
}

.install-step-icon {
    color: #fff;
    border-radius: 12px;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    display: grid
}

.install-step-icon svg {
    width: 22px;
    height: 22px
}

.install-step-title {
    color: var(--text);
    margin-bottom: 4px;
    font-size: .95rem;
    font-weight: 800
}

.install-step-text {
    color: var(--text-dim);
    margin: 0;
    font-size: .85rem;
    line-height: 1.5
}

.install-step-text strong {
    color: var(--accent,#00e055)
}

.install-modal-foot {
    color: var(--text-dim);
    padding-bottom: env(safe-area-inset-bottom,0px);
    font-size: .8rem;
    line-height: 1.4
}

.install-arrow-hint {
    bottom: calc(14px + env(safe-area-inset-bottom,0px));
    z-index: 200;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px #00000080);
    font-size: 2rem;
    line-height: 1;
    animation: .9s ease-in-out infinite arrow-bounce;
    position: fixed;
    right: 22px
}

@keyframes arrow-bounce {
    0%,to {
        opacity: 1;
        transform: translateY(0)
    }

    50% {
        opacity: .8;
        transform: translateY(9px)
    }
}

.panel-topbar {
    z-index: 40;
    background: 0 0;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 10px;
    display: flex;
    position: sticky;
    top: 0
}

.panel-topbar-title {
    letter-spacing: -.02em;
    font-size: 1.35rem;
    font-weight: 800
}

.panel-topbar-logo {
    object-fit: contain;
    object-position: left center;
    max-width: 280px;
    height: 72px
}

.app-logo {
    object-fit: contain;
    object-position: left center;
    max-width: 160px;
    height: 40px
}

.panel-topbar-actions {
    align-items: center;
    gap: 12px;
    display: flex
}

.panel-balance {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    display: flex
}

.panel-balance-label {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-size: .62rem;
    font-weight: 800
}

.panel-balance-value {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 800
}

.panel-profile-btn {
    border: 2px solid var(--border);
    background: linear-gradient(135deg, var(--primary), var(--accent-2));
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1rem;
    font-weight: 800;
    transition: transform .12s,box-shadow .12s;
    display: grid
}

.panel-profile-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 14px #7c5cff73
}

.panel-page {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px 110px
}

@media (height<=810px) {
    .panel-page {
        padding: 14px 14px 100px
    }

    .panel-card {
        border-radius: 20px;
        padding: 16px
    }

    .panel-banner {
        border-radius: 20px 20px 0 0;
        margin: -16px -16px 14px
    }

    .panel-banner img {
        border-radius: 20px 20px 0 0
    }

    .panel-card:before {
        border-radius: 22px
    }

    .panel-card:after {
        border-radius: 26px
    }

    .panel-label {
        margin-bottom: 8px
    }

    .entry-grid {
        gap: 8px;
        margin-bottom: 10px
    }

    .entry-chip {
        border-radius: 10px;
        padding: 11px 6px;
        font-size: .9rem
    }

    .money-input {
        margin-bottom: 12px
    }

    .money-input input {
        padding: 11px 0
    }

    .reward-box {
        margin-bottom: 14px;
        padding: 12px
    }

    .reward-box .value {
        font-size: 1.5rem
    }

    .panel-cta {
        padding: 14px;
        font-size: 1rem
    }
}

@media (height<=700px) {
    .panel-page {
        padding: 10px 12px 96px
    }

    .panel-card {
        border-radius: 18px;
        padding: 12px
    }

    .panel-banner {
        border-radius: 18px 18px 0 0;
        margin: -12px -12px 12px
    }

    .panel-banner img {
        object-fit: cover;
        object-position: center;
        border-radius: 18px 18px 0 0;
        max-height: 120px
    }

    .panel-label {
        margin-bottom: 6px;
        font-size: .65rem
    }

    .entry-grid {
        gap: 6px;
        margin-bottom: 8px
    }

    .entry-chip {
        border-radius: 8px;
        padding: 9px 4px;
        font-size: .82rem
    }

    .money-input {
        margin-bottom: 10px
    }

    .money-input input {
        padding: 9px 0;
        font-size: .95rem
    }

    .reward-box {
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 9px 12px
    }

    .reward-box .label {
        font-size: .82rem
    }

    .reward-box .value {
        margin-top: 1px;
        font-size: 1.25rem
    }

    .panel-cta {
        padding: 12px;
        font-size: .92rem
    }

    .install-bar {
        padding: 8px 10px;
        padding-top: calc(8px + env(safe-area-inset-top,0px))
    }

    .install-bar-icon {
        width: 38px;
        height: 38px
    }

    .install-bar-text {
        font-size: .72rem
    }

    .install-bar-cta {
        padding: 8px 11px;
        font-size: .75rem
    }
}

@media (height<=870px) {
    .panel--has-install-bar .panel-page {
        padding: 14px 14px 100px
    }

    .panel--has-install-bar .panel-card {
        border-radius: 20px;
        padding: 16px
    }

    .panel--has-install-bar .panel-banner {
        border-radius: 20px 20px 0 0;
        margin: -16px -16px 14px
    }

    .panel--has-install-bar .panel-banner img {
        border-radius: 20px 20px 0 0
    }

    .panel--has-install-bar .panel-card:before {
        border-radius: 22px
    }

    .panel--has-install-bar .panel-card:after {
        border-radius: 26px
    }

    .panel--has-install-bar .panel-label {
        margin-bottom: 8px
    }

    .panel--has-install-bar .entry-grid {
        gap: 8px;
        margin-bottom: 10px
    }

    .panel--has-install-bar .entry-chip {
        border-radius: 10px;
        padding: 11px 6px;
        font-size: .9rem
    }

    .panel--has-install-bar .money-input {
        margin-bottom: 12px
    }

    .panel--has-install-bar .money-input input {
        padding: 11px 0
    }

    .panel--has-install-bar .reward-box {
        margin-bottom: 14px;
        padding: 12px
    }

    .panel--has-install-bar .reward-box .value {
        font-size: 1.5rem
    }

    .panel--has-install-bar .panel-cta {
        padding: 14px;
        font-size: 1rem
    }
}

@media (height<=760px) {
    .panel--has-install-bar .panel-page {
        padding: 10px 12px 96px
    }

    .panel--has-install-bar .panel-card {
        border-radius: 18px;
        padding: 12px
    }

    .panel--has-install-bar .panel-banner {
        border-radius: 18px 18px 0 0;
        margin: -12px -12px 12px
    }

    .panel--has-install-bar .panel-banner img {
        object-fit: cover;
        object-position: center;
        border-radius: 18px 18px 0 0;
        max-height: 120px
    }

    .panel--has-install-bar .panel-label {
        margin-bottom: 6px;
        font-size: .65rem
    }

    .panel--has-install-bar .entry-grid {
        gap: 6px;
        margin-bottom: 8px
    }

    .panel--has-install-bar .entry-chip {
        border-radius: 8px;
        padding: 9px 4px;
        font-size: .82rem
    }

    .panel--has-install-bar .money-input {
        margin-bottom: 10px
    }

    .panel--has-install-bar .money-input input {
        padding: 9px 0;
        font-size: .95rem
    }

    .panel--has-install-bar .reward-box {
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 9px 12px
    }

    .panel--has-install-bar .reward-box .label {
        font-size: .82rem
    }

    .panel--has-install-bar .reward-box .value {
        margin-top: 1px;
        font-size: 1.25rem
    }

    .panel--has-install-bar .panel-cta {
        padding: 12px;
        font-size: .92rem
    }
}

@property --card-spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

.panel-card {
    isolation: isolate;
    background: color-mix(in srgb, var(--surface), transparent 42%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid #ff782840;
    border-radius: 24px;
    padding: 22px;
    position: relative;
    box-shadow: 0 8px 32px #00000040
}

.panel-card:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    background: conic-gradient(from var(--card-spin), transparent 0deg 230deg, #ff5a0033 260deg, #ff4500 300deg, #fc0 325deg, #f20 345deg, #f70 355deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 26px;
    padding: 2px;
    animation: 2.2s linear infinite card-border-spin,1.1s ease-in-out infinite alternate fire-border-flicker;
    position: absolute;
    inset: -2px;
    -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0,0 0;
    mask-position: 0 0,0 0;
    -webkit-mask-size: auto,auto;
    mask-size: auto,auto;
    -webkit-mask-repeat: repeat,repeat;
    mask-repeat: repeat,repeat;
    -webkit-mask-clip: content-box,border-box;
    mask-clip: content-box,border-box;
    -webkit-mask-origin: content-box,border-box;
    mask-origin: content-box,border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto,auto;
    mask-mode: match-source,match-source
}

.panel-card:after {
    content: "";
    pointer-events: none;
    z-index: -1;
    border-radius: 30px;
    animation: 1.3s ease-in-out infinite alternate fire-glow-pulse;
    position: absolute;
    inset: -6px;
    box-shadow: 0 0 14px #ff5a0073,0 0 28px #ff280047,inset 0 0 10px #ff8c001f
}

.panel-card>* {
    z-index: 1;
    position: relative
}

@keyframes card-border-spin {
    to {
        --card-spin: 360deg
    }
}

@keyframes fire-border-flicker {
    0% {
        opacity: .75;
        filter: brightness(.95)
    }

    to {
        opacity: 1;
        filter: brightness(1.15)
    }
}

@keyframes fire-glow-pulse {
    0% {
        opacity: .55;
        transform: scale(.995)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.panel-game-head {
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    display: flex
}

.panel-banner {
    background: #ffffff08;
    border-radius: 24px 24px 0 0;
    margin: -22px -22px 20px;
    position: relative;
    overflow: visible
}

.panel-banner img {
    border-radius: 24px 24px 0 0;
    width: 100%;
    display: block
}

.online-pill-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #05070f8c;
    position: absolute;
    top: 12px;
    right: 12px
}

@property --pill-spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

.online-fire-pill {
    z-index: 2;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    isolation: isolate;
    background: #080a12e0;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 12px
}

.online-fire-pill:before {
    content: "";
    pointer-events: none;
    z-index: -1;
    background: conic-gradient(from var(--pill-spin), transparent 0deg 210deg, #ff64008c 250deg, #f50 290deg, #fd4 320deg, #f20 340deg, #f80 352deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 999px;
    padding: 2px;
    animation: 1.6s linear infinite pill-border-spin,.85s ease-in-out infinite alternate fire-border-flicker;
    position: absolute;
    inset: -2px;
    -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0,0 0;
    mask-position: 0 0,0 0;
    -webkit-mask-size: auto,auto;
    mask-size: auto,auto;
    -webkit-mask-repeat: repeat,repeat;
    mask-repeat: repeat,repeat;
    -webkit-mask-clip: content-box,border-box;
    mask-clip: content-box,border-box;
    -webkit-mask-origin: content-box,border-box;
    mask-origin: content-box,border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto,auto;
    mask-mode: match-source,match-source
}

.online-fire-pill:after {
    content: "";
    pointer-events: none;
    z-index: -2;
    border-radius: 999px;
    animation: .9s ease-in-out infinite alternate fire-glow-pulse;
    position: absolute;
    inset: -6px;
    box-shadow: 0 0 10px #ff6400d9,0 0 20px #ff32008c,0 0 32px #ff780059
}

.online-fire-pill .online-label {
    color: #ffffffb8;
    text-transform: lowercase;
    letter-spacing: .02em
}

@keyframes pill-border-spin {
    to {
        --pill-spin: 360deg
    }
}

.live-count {
    color: #ff2a2a;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    animation: .95s ease-in-out infinite live-count-pulse
}

@keyframes live-count-pulse {
    0%,to {
        opacity: .9;
        text-shadow: 0 0 8px #ff282899,0 0 16px #ff3c3c59;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px #ff3232f2,0 0 24px #ff5028a6;
        transform: scale(1.1)
    }
}

.panel-avatar {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    display: grid
}

.panel-avatar .logo-mark {
    grid-template-rows: repeat(2,14px);
    grid-template-columns: repeat(2,14px);
    gap: 3px
}

.panel-game-head .info {
    flex: 1;
    min-width: 0
}

.panel-game-head h2 {
    font-size: 1.25rem
}

.panel-game-head .sub {
    color: var(--text-dim);
    font-size: .85rem
}

.online-pill {
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: #ffffff0f;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: .78rem;
    display: inline-flex
}

.online-pill:before {
    content: "";
    background: var(--accent);
    border-radius: 50%;
    width: 7px;
    height: 7px
}

.panel-label {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 800
}

.entry-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-bottom: 14px;
    display: grid
}

.entry-chip {
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    background: #ffffff0d;
    border-radius: 12px;
    padding: 14px 8px;
    font-size: 1rem;
    font-weight: 800;
    transition: all .15s
}

.entry-chip.active {
    color: #12203a;
    background: linear-gradient(135deg,#cfe3ff,#8db8f5);
    border-color: #0000
}

.money-input {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 0 14px;
    display: flex
}

.money-input .prefix {
    color: var(--text-dim);
    font-weight: 700
}

.money-input input {
    color: var(--text);
    font-size: var(--input-font-size);
    background: 0 0;
    border: none;
    outline: none;
    flex: 1;
    width: 100%;
    padding: 14px 0;
    font-weight: 700
}

.reward-box {
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent-2), transparent 55%);
    background: color-mix(in srgb, var(--accent-2), transparent 90%);
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 16px
}

.reward-box .label {
    color: var(--text);
    font-size: .95rem;
    font-weight: 600
}

.reward-box .value {
    color: #ffe600;
    text-shadow: 0 0 14px #ffe6008c;
    margin-top: 2px;
    font-size: 1.7rem;
    font-weight: 900
}

.panel-cta {
    cursor: pointer;
    color: #042818;
    background: linear-gradient(135deg,#0f8,#00e055);
    border: none;
    border-radius: 999px;
    width: 100%;
    padding: 17px;
    font-size: 1.05rem;
    font-weight: 800;
    transition: transform .12s;
    box-shadow: 0 10px 30px #00ff7873
}

.panel-cta:not(:disabled) {
    animation: 1.6s ease-in-out infinite cta-pulse
}

.panel-cta:not(:disabled):hover {
    animation: none;
    transform: translateY(-2px)
}

.panel-cta:disabled {
    opacity: .5;
    cursor: not-allowed;
    animation: none
}

@keyframes cta-pulse {
    0%,to {
        box-shadow: 0 10px 30px #00ff7873,0 0 #00ff7873
    }

    50% {
        box-shadow: 0 10px 30px #00ff7873,0 0 0 10px #00ff7800
    }
}

.bottom-nav {
    z-index: 60;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #090c16b8;
    border-top: 1px solid #ffffff14;
    justify-content: center;
    align-items: center;
    gap: clamp(6px,4vw,34px);
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible
}

.nav-item {
    color: var(--text-dim);
    cursor: pointer;
    background: 0 0;
    border: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    padding: 4px 8px;
    font-size: .72rem;
    font-weight: 600;
    display: flex
}

.nav-item svg {
    width: 22px;
    height: 22px
}

.nav-item:hover {
    color: var(--text)
}

.nav-item.center {
    align-self: flex-end;
    margin-top: -30px;
    overflow: visible
}

.nav-item.center .nav-circle {
    isolation: isolate;
    background: radial-gradient(circle at 35% 30%,#14251f,#0a1410);
    border: none;
    border-radius: 50%;
    place-items: center;
    width: 60px;
    height: 60px;
    display: grid;
    position: relative
}

.nav-item.center .nav-circle:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    background: conic-gradient(from var(--card-spin), transparent 0deg 220deg, #00ff8840 260deg, #0f8 300deg, #7dffd9 330deg, #00e055 350deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 50%;
    padding: 2px;
    animation: 1.8s linear infinite card-border-spin;
    position: absolute;
    inset: -2px;
    -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0,0 0;
    mask-position: 0 0,0 0;
    -webkit-mask-size: auto,auto;
    mask-size: auto,auto;
    -webkit-mask-repeat: repeat,repeat;
    mask-repeat: repeat,repeat;
    -webkit-mask-clip: content-box,border-box;
    mask-clip: content-box,border-box;
    -webkit-mask-origin: content-box,border-box;
    mask-origin: content-box,border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto,auto;
    mask-mode: match-source,match-source
}

.nav-item.center .nav-circle .logo-mark {
    z-index: 1;
    grid-template-rows: repeat(2,11px);
    grid-template-columns: repeat(2,11px);
    position: relative
}

.nav-item.center span {
    color: #0f8
}

.live-toast {
    left: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 90;
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    background: #0e1222eb;
    border: 1px solid #ffffff1a;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    max-width: min(320px,100vw - 24px);
    padding: 12px 16px;
    animation: .45s cubic-bezier(.22,1,.36,1) live-toast-in;
    display: flex;
    position: fixed;
    box-shadow: 0 12px 32px #00000073
}

.live-toast.leaving {
    animation: .4s forwards live-toast-out
}

@keyframes live-toast-in {
    0% {
        opacity: 0;
        transform: translate(calc(-100% - 16px))
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes live-toast-out {
    to {
        opacity: 0;
        transform: translate(calc(-100% - 16px))
    }
}

.live-toast-icon {
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
    font-weight: 900;
    display: grid
}

.live-toast-icon.withdraw {
    color: var(--accent);
    background: #00e5a824;
    border: 1px solid #00e5a859
}

.live-toast-icon.deposit {
    color: #60a5fa;
    background: #60a5fa24;
    border: 1px solid #60a5fa59
}

.live-toast-icon.win {
    color: var(--gold);
    background: #facc1524;
    border: 1px solid #facc1559
}

.live-toast-body {
    min-width: 0
}

.live-toast-name {
    font-size: .9rem;
    font-weight: 800
}

.live-toast-text {
    color: var(--text-dim);
    font-size: .78rem
}

.live-toast-amount {
    color: var(--accent);
    white-space: nowrap;
    margin-left: auto;
    font-size: .95rem;
    font-weight: 900
}

.sheet-overlay {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 110;
    background: #05070fb8;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    position: fixed;
    inset: 0
}

.sheet {
    border: 1px solid var(--border);
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom,0px));
    background: #10141f;
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    animation: .3s cubic-bezier(.22,1,.36,1) sheet-up;
    overflow: hidden auto
}

@keyframes sheet-up {
    0% {
        opacity: .4;
        transform: translateY(60%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.sheet-handle {
    background: var(--border);
    border-radius: 999px;
    width: 46px;
    height: 4px;
    margin: 8px auto 14px
}

.sheet-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    display: flex
}

.sheet-hero {
    background: #ffffff08;
    border-radius: 26px 26px 0 0;
    margin: -8px -20px 18px;
    position: relative;
    overflow: hidden
}

.sheet-hero img {
    width: 100%;
    display: block
}

.sheet-handle-overlay {
    background: #ffffff73;
    margin: 0;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%)
}

.sheet-close-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #b414148c;
    position: absolute;
    top: 12px;
    right: 12px
}

.sheet-header h2 {
    font-size: 1.35rem
}

.sheet-close {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    background: #b414148c;
    border: none;
    border-radius: 50%;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    display: grid
}

.sheet-section {
    border: 1px solid var(--border);
    background: #ffffff0a;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 16px
}

.saldo-row {
    align-items: center;
    gap: 12px;
    display: flex
}

.saldo-row .coin {
    width: 42px;
    height: 42px;
    color: var(--accent);
    background: #00e5a81f;
    border: 1px solid #00e5a84d;
    border-radius: 50%;
    place-items: center;
    font-weight: 800;
    display: grid
}

.saldo-row .label {
    letter-spacing: .08em;
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 700
}

.saldo-row .value {
    font-size: 1.35rem;
    font-weight: 900
}

.saldo-row .value.zero {
    color: var(--danger)
}

.saldo-row .right {
    color: var(--text-dim);
    text-align: right;
    margin-left: auto;
    font-size: .8rem
}

.quick-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 14px;
    display: grid
}

.quick-value {
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    background: #ffffff0a;
    border-radius: 14px;
    padding: 20px 8px 14px;
    font-size: 1.05rem;
    font-weight: 800;
    transition: all .15s;
    position: relative
}

.quick-value.active,.quick-value:hover {
    border-color: var(--accent);
    background: #00e5a814
}

.quick-badge {
    letter-spacing: .05em;
    color: #fff;
    white-space: nowrap;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .62rem;
    font-weight: 800;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translate(-50%)
}

.qb-orange {
    background: #f57c1f
}

.qb-red {
    background: #e6293e
}

.qb-green {
    background: #17c653
}

.qb-purple {
    background: #5a2ea6
}

.quick-value.bonus-glow {
    border-color: #f5c518cc;
    animation: 2.4s ease-in-out infinite bonusPulse
}

.quick-value.bonus-glow.active {
    border-color: var(--accent)
}

@keyframes bonusPulse {
    0%,to {
        box-shadow: 0 0 5px #f5c51840
    }

    50% {
        box-shadow: 0 0 16px #f5c51899
    }
}

.quick-value.bonus-glow:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg,#0000 38%,#f5c5181f 44%,#f6d3656b 50%,#f5c5181f 56%,#0000 62%) 0 0/250% 100%;
    animation: 3.6s linear infinite bonusSweep;
    position: absolute;
    inset: 0
}

@keyframes bonusSweep {
    0% {
        background-position: 100% 0
    }

    to {
        background-position: 0 0
    }
}

.bonus-card {
    background: linear-gradient(150deg,#17c65324,#00e5a80d);
    border: 1px solid #17c65359;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 16px 18px;
    transition: opacity .2s
}

.bonus-card.off {
    opacity: .6
}

.bonus-card-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    display: flex
}

.bonus-card-label {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2ee06a;
    font-size: .72rem;
    font-weight: 800
}

.bonus-card-use {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 800;
    display: flex
}

.switch {
    border: 1px solid var(--border);
    cursor: pointer;
    background: #ffffff1a;
    border-radius: 999px;
    width: 46px;
    height: 26px;
    padding: 0;
    transition: background .2s,border-color .2s;
    position: relative
}

.switch .knob {
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transition: transform .2s;
    position: absolute;
    top: 2px;
    left: 2px
}

.switch.on {
    background: #17c6538c;
    border-color: #17c653cc
}

.switch.on .knob {
    transform: translate(20px)
}

.bonus-card-value {
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15
}

.bonus-card-divider {
    background: #ffffff1f;
    max-width: 220px;
    height: 1px;
    margin: 12px 0 10px
}

.bonus-card-total {
    color: var(--text);
    font-size: .95rem
}

.bonus-card-total strong {
    font-weight: 800
}

.cupom-section {
    margin-bottom: 14px
}

.cupom-link {
    color: var(--text-dim);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 4px 2px;
    font-size: .92rem;
    font-weight: 600
}

.cupom-link:hover {
    color: var(--text)
}

.cupom-row {
    gap: 10px;
    margin-bottom: 10px;
    display: flex
}

.cupom-row input {
    border: 1px solid var(--border);
    color: var(--text);
    text-transform: uppercase;
    background: #ffffff0a;
    border-radius: 12px;
    flex: 1;
    padding: 12px 14px;
    font-size: .95rem
}

.cupom-row input:focus {
    border-color: var(--accent);
    outline: none
}

.sheet-cta {
    cursor: pointer;
    color: #05281e;
    background: linear-gradient(135deg, var(--accent), #00b386);
    border: none;
    border-radius: 999px;
    width: 100%;
    margin-top: 6px;
    padding: 17px;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 8px 26px #00e5a84d
}

.sheet-cta:disabled {
    opacity: .5;
    cursor: not-allowed
}

.notice-box {
    color: var(--gold);
    background: #ffd16612;
    border: 1px solid #ffd16659;
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    font-size: .85rem
}

.ref-banner {
    text-align: center;
    font-size: .95rem;
    line-height: 1.5
}

.ref-banner b {
    color: var(--accent)
}

.ref-card {
    color: #fff;
    background: linear-gradient(135deg,#0e9c62,#16b874);
    border-radius: 18px;
    margin-bottom: 14px;
    padding: 20px
}

.ref-card .row {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    display: flex
}

.ref-card .label {
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    font-size: .7rem;
    font-weight: 800
}

.ref-card .big {
    font-size: 1.6rem;
    font-weight: 900
}

.ref-card .small {
    opacity: .85;
    font-size: .78rem
}

.ref-card .cta {
    cursor: pointer;
    color: #fff;
    background: #ffffff38;
    border: none;
    border-radius: 999px;
    width: 100%;
    padding: 13px;
    font-weight: 800
}

.ref-link-box {
    word-break: break-all;
    color: var(--text);
    margin: 8px 0 12px;
    font-family: monospace;
    font-size: .85rem
}

.ref-levels {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    display: grid
}

.ref-level {
    border: 1px solid var(--border);
    text-align: center;
    background: #ffffff0a;
    border-radius: 16px;
    padding: 16px
}

.ref-level .tier {
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 900
}

.ref-level .tier-sub {
    color: var(--text-dim);
    margin-bottom: 10px;
    font-size: .75rem
}

.ref-level .count {
    font-size: 1.6rem;
    font-weight: 900
}

.ref-level .count-sub {
    color: var(--text-dim);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-size: .7rem
}

.ref-level .vol {
    font-size: .95rem;
    font-weight: 800
}

html.game-active,html.game-active body {
    overscroll-behavior: none;
    touch-action: none;
    overflow: hidden
}

body.game-active {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0
}

.game-page {
    padding: calc(60px + env(safe-area-inset-top,0px)) 12px calc(96px + env(safe-area-inset-bottom,0px));
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    flex-direction: column;
    flex: 1;
    align-items: center;
    display: flex;
    position: relative
}

.game-page * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

.game-mute-btn {
    right: max(12px, env(safe-area-inset-right,0px));
    bottom: max(14px, env(safe-area-inset-bottom,0px));
    z-index: 85;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    width: clamp(42px,11vw,48px);
    height: clamp(42px,11vw,48px);
    color: var(--text);
    cursor: pointer;
    background: #080c18b8;
    border: 1px solid #ffffff24;
    border-radius: 50%;
    place-items: center;
    transition: background .15s,color .15s,transform .12s;
    display: grid;
    position: fixed;
    box-shadow: 0 6px 20px #00000059
}

.game-mute-btn svg {
    width: clamp(20px,5.5vw,22px);
    height: clamp(20px,5.5vw,22px)
}

.game-mute-btn:hover {
    background: #0e1222e6
}

.game-mute-btn:active {
    transform: scale(.94)
}

.game-mute-btn[aria-pressed=true] {
    color: var(--danger);
    border-color: #ff547059
}

.game-loading {
    z-index: 95;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    display: flex;
    position: fixed;
    inset: 0
}

.loading-blocks {
    grid-template-rows: repeat(2,30px);
    grid-template-columns: repeat(2,30px);
    gap: 6px;
    display: grid
}

.loading-blocks span {
    border-radius: 7px;
    animation: 1.1s ease-in-out infinite loading-block-pulse;
    box-shadow: 0 4px 12px #00000040
}

.loading-blocks span:first-child {
    background: #f2455c;
    animation-delay: 0s
}

.loading-blocks span:nth-child(2) {
    background: #f7d54a;
    animation-delay: .15s
}

.loading-blocks span:nth-child(3) {
    background: #3b82f6;
    animation-delay: .3s
}

.loading-blocks span:nth-child(4) {
    background: #2ecc71;
    animation-delay: .45s
}

@keyframes loading-block-pulse {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .55;
        transform: scale(.55)
    }
}

.loading-text {
    color: #fff;
    text-shadow: 0 2px 8px #0000004d;
    letter-spacing: .01em;
    font-size: 1.05rem;
    font-weight: 800
}

.game-bg {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s,background 1.4s;
    position: fixed;
    inset: 0
}

.game-bg.active {
    opacity: 1
}

.game-hud {
    width: 100%;
    max-width: 460px;
    margin-bottom: 14px
}

.bb-hud {
    touch-action: none;
    width: 100%;
    max-width: 460px;
    margin-bottom: 6px;
    padding: 6px 8px 10px
}

.bb-hud-top {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.bb-hud-corner {
    color: #ffb84d;
    text-shadow: 0 1px #000000a6,0 2px 8px #00000073;
    -webkit-text-stroke: .45px #050f23cc;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background: #08122a2e;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 2px 8px;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex
}

.bb-hud-corner--right {
    flex-direction: row-reverse
}

.bb-hud-icon {
    color: #ffc107;
    filter: drop-shadow(0 1px 2px #00000059);
    flex-shrink: 0;
    width: 24px;
    height: 24px
}

.bb-hud-score {
    text-align: center;
    color: #00e676;
    letter-spacing: -.03em;
    -webkit-text-stroke: 1.2px #0a1223cc;
    text-shadow: 0 2px #0a1223bf,0 4px 14px #00000080,0 2px 10px #00e67659;
    margin: 6px 0 10px;
    font-size: clamp(2.5rem,11vw,3.4rem);
    font-weight: 800;
    line-height: 1;
    transition: color .5s,text-shadow .5s
}

.bb-hud-score.ready {
    color: #ffc107;
    text-shadow: 0 2px #0a1223c7,0 4px 16px #00000085,0 2px 14px #ffc1078c
}

.bb-hud-progress {
    background: #08142c7a;
    border: 1px solid #ffffff80;
    border-radius: 999px;
    width: min(220px,58%);
    height: 10px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 2px #00000059,0 2px 10px #0003
}

.bb-hud-progress.complete {
    border-color: #ffe678cc;
    box-shadow: inset 0 1px 2px #00000059,0 0 14px #ffc10773
}

.bb-hud-progress.complete:after {
    content: "";
    background: linear-gradient(110deg,#0000 0%,#ffffff0d 30%,#ffffffbf 50%,#ffffff0d 70%,#0000 100%);
    animation: 1.2s linear infinite progress-sweep;
    position: absolute;
    inset: 0;
    transform: translate(-140%)
}

.bb-hud-progress-fill {
    background: #ffffff8c;
    border-radius: 999px;
    height: 100%;
    transition: width .45s cubic-bezier(.22,1,.36,1)
}

.bb-hud-progress-fill.complete {
    background: linear-gradient(90deg,#ffc107,#ffe082);
    box-shadow: 0 0 8px #ffc1078c
}

@keyframes progress-sweep {
    to {
        transform: translate(140%)
    }
}

.board-wrap {
    width: 100%;
    max-width: 460px;
    position: relative
}

.board {
    aspect-ratio: 1;
    -webkit-user-select: none;
    user-select: none;
    background: #1a4480;
    border: none;
    border-radius: 12px;
    grid-template-columns: repeat(8,1fr);
    gap: 4px;
    padding: 10px;
    display: grid;
    box-shadow: inset 0 2px 8px #00000040
}

.cell {
    background: #15386a;
    border-radius: 4px;
    transition: background .15s;
    position: relative
}

.cell.filled,.piece-cell.fill,.hero-cell.on {
    background: var(--bc);
    border-style: solid;
    border-width: var(--bv,5px);
    border-top-color: color-mix(in srgb, var(--bc), #fff 55%);
    border-left-color: color-mix(in srgb, var(--bc), #fff 24%);
    border-right-color: color-mix(in srgb, var(--bc), #000 30%);
    border-bottom-color: color-mix(in srgb, var(--bc), #000 48%);
    box-shadow: inset 0 0 0 1px #ffffff14
}

.cell.preview-ok {
    outline-offset: -2px;
    background: #00e5a838;
    outline: 2px solid #00e5a8e6
}

.cell.preview-bad {
    outline-offset: -2px;
    background: #ff54702e;
    outline: 2px solid #ff5470e6
}

.cell.clearing {
    animation: .62s cubic-bezier(.35,0,.85,.45) forwards cell-fall;
    animation-delay: var(--fd,0s);
    z-index: 3;
    pointer-events: none
}

.board-fall-layer {
    box-shadow: none;
    pointer-events: none;
    z-index: 4;
    background: 0 0;
    border: none;
    position: absolute;
    inset: 0
}

.board-fall-layer .cell {
    background: 0 0;
    transition: none
}

.board-fall-layer .cell.clearing {
    opacity: 0;
    animation-fill-mode: both
}

@keyframes cell-fall {
    0% {
        opacity: 1;
        filter: brightness(1.8);
        transform: translate(0)rotate(0)scale(1)
    }

    20% {
        transform: translate(calc(var(--fx,0px) * .2), -6px) rotate(calc(var(--fr,0deg) * .2)) scale(1.08);
        opacity: 1;
        filter: brightness(1.4)
    }

    to {
        transform: translate(var(--fx,0px), 360px) rotate(var(--fr,0deg)) scale(.72);
        opacity: 0;
        filter: brightness()
    }
}

.cell.will-clear {
    animation: .85s ease-in-out infinite will-clear-pulse
}

@keyframes will-clear-pulse {
    0%,to {
        filter: brightness(1.05)
    }

    50% {
        filter: brightness(1.45)
    }
}

.c1 {
    --bc: #f2455c
}

.c2 {
    --bc: #ffa726
}

.c3 {
    --bc: #2ecc71
}

.c4 {
    --bc: #3b82f6
}

.c5 {
    --bc: #9b59d0
}

.c6 {
    --bc: #f7d54a
}

.board-locked-msg {
    text-align: center;
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 2px 14px #ff5470a6,0 1px 3px #00000080;
    margin-top: 16px;
    font-size: 1.25rem;
    font-weight: 900;
    animation: .45s cubic-bezier(.34,1.56,.64,1) both locked-msg-in
}

@keyframes locked-msg-in {
    0% {
        opacity: 0;
        transform: translateY(10px)scale(.7)
    }

    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}

.tray {
    touch-action: none;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin-top: 16px;
    display: grid
}

.tray-slot {
    cursor: grab;
    touch-action: none;
    background: #00000026;
    border: none;
    border-radius: 12px;
    place-items: center;
    min-height: 96px;
    padding: 10px;
    transition: opacity .2s,transform .12s;
    display: grid
}

.tray-slot:active {
    cursor: grabbing
}

.tray-slot.used {
    cursor: default
}

.tray-slot.blocked {
    outline-offset: -2px;
    outline: 2px solid #ff5470d9;
    animation: .8s ease-in-out infinite blocked-pulse
}

.tray-slot.blocked .piece-cell.fill {
    --bc: #ff5470
}

@keyframes blocked-pulse {
    0%,to {
        background: #ff54701a;
        box-shadow: 0 0 #ff547059
    }

    50% {
        background: #ff547052;
        box-shadow: 0 0 18px 2px #ff547073
    }
}

.piece-grid {
    pointer-events: none;
    gap: 3px;
    display: grid
}

.piece-appear {
    place-items: center;
    animation: .34s cubic-bezier(.34,1.56,.64,1) backwards piece-pop-in;
    display: grid
}

@keyframes piece-pop-in {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.piece-cell {
    --bv: 3px;
    border-radius: 4px;
    width: 18px;
    height: 18px
}

.piece-cell.empty {
    background: 0 0
}

.drag-ghost {
    pointer-events: none;
    z-index: 200;
    opacity: .9;
    will-change: transform;
    position: fixed;
    top: 0;
    left: 0
}

.cashout-btn {
    width: 100%;
    max-width: 460px;
    margin-top: 18px
}

.cashout-ready {
    z-index: 90;
    width: calc(100% - 24px);
    max-width: 460px;
    margin-top: 0;
    animation: 1.1s infinite cashout-pulse;
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom,0px));
    transform: translate(-50%)
}

@keyframes cashout-pulse {
    0%,to {
        box-shadow: 0 8px 28px #ffb30073,0 0 #ffc1078c
    }

    50% {
        box-shadow: 0 8px 28px #ffb30073,0 0 0 14px #ffc10700
    }
}

@media (height<=820px) {
    .bb-hud {
        margin-bottom: 2px;
        padding-bottom: 6px
    }

    .bb-hud-score {
        margin: 4px 0 7px;
        font-size: clamp(2rem,8.5vw,2.8rem)
    }

    .tray {
        gap: 8px;
        margin-top: 10px
    }

    .tray-slot {
        min-height: 78px;
        padding: 7px
    }
}

.gain-float {
    color: var(--accent);
    text-shadow: 0 2px 14px #00e5a899;
    pointer-events: none;
    z-index: 30;
    font-size: 1.8rem;
    font-weight: 900;
    animation: 1s forwards gain-rise;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%)
}

@keyframes gain-rise {
    0% {
        opacity: 0;
        transform: translate(-50%,10px)scale(.8)
    }

    20% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate(-50%,-46px)scale(1.15)
    }
}

.bet-picker,.replay-picker-modal {
    width: 100%;
    max-width: 460px
}

.replay-picker-banner {
    border-radius: 18px 18px 0 0;
    margin: -28px -28px 14px;
    overflow: hidden
}

.replay-picker-banner img {
    width: 100%;
    display: block
}

.result-modal {
    text-align: center;
    position: relative;
    overflow: hidden
}

.result-emoji {
    margin-bottom: 10px;
    font-size: 3rem
}

.result-value {
    margin: 10px 0;
    font-size: 2.2rem;
    font-weight: 900
}

.result-value.win {
    background: linear-gradient(135deg,#ffe600 0%,#ffb800 50%,#ff9500 100%);
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px #ffd20099);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 3rem;
    animation: .45s .28s both win-fade-up
}

.result-value.lose {
    color: var(--danger);
    text-shadow: 0 2px 18px #ff547073
}

.result-modal--win:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(at 50% -10%,#ffd2002e 0%,#0000 65%);
    animation: 2.2s ease-in-out infinite win-glow-pulse;
    position: absolute;
    inset: -30px
}

@keyframes win-glow-pulse {
    0%,to {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

.win-trophy {
    background: radial-gradient(circle at 38% 30%,#ffdc004d,#ffa00014);
    border: 1.5px solid #ffd70080;
    border-radius: 50%;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    font-size: 2.6rem;
    animation: .55s cubic-bezier(.34,1.56,.64,1) both win-pop;
    display: grid;
    box-shadow: 0 0 20px #ffd70059,0 0 55px #ffd70026,inset 0 1px #ffffff1f
}

@keyframes win-pop {
    0% {
        opacity: 0;
        transform: scale(.25)rotate(-12deg)
    }

    to {
        opacity: 1;
        transform: scale(1)rotate(0)
    }
}

.result-modal--win h2 {
    letter-spacing: -.03em;
    font-size: 2rem;
    animation: .4s .14s both win-fade-up
}

@keyframes win-fade-up {
    0% {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.win-note-top {
    color: var(--text-dim);
    margin-bottom: 4px;
    animation: .4s .21s both win-fade-up
}

.win-note {
    color: var(--text-dim);
    margin-bottom: 22px;
    font-size: .88rem;
    animation: .4s .38s both win-fade-up
}

.win-actions {
    gap: 10px;
    animation: .4s .48s both win-fade-up;
    display: flex
}

.win-confetti-piece {
    width: 7px;
    height: 11px;
    top: 0;
    left: calc(8% + var(--i,0) * 12%);
    background: hsl(calc(var(--i,0) * 47deg), 92%, 62%);
    animation: confetti-fall calc(.7s + var(--i,0) * 80ms) ease-in calc(var(--i,0) * 60ms) both;
    pointer-events: none;
    border-radius: 2px;
    position: absolute
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-18px)rotate(0)
    }

    to {
        transform: translateY(200px) rotate(calc(90deg + var(--i,0) * 35deg));
        opacity: 0
    }
}

.result-modal--lose h2 {
    letter-spacing: -.02em;
    font-size: 1.5rem
}

.lose-badge {
    width: 78px;
    height: 78px;
    color: var(--danger);
    background: radial-gradient(circle at 35% 28%,#ff547052,#ff547014);
    border: 1px solid #ff547066;
    border-radius: 50%;
    place-items: center;
    margin: 2px auto 16px;
    animation: .55s cubic-bezier(.36,.07,.19,.97) .18s both lose-shake;
    display: grid;
    box-shadow: 0 0 30px #ff547047
}

@keyframes lose-shake {
    0%,to {
        transform: translate(0)rotate(0)
    }

    20% {
        transform: translate(-7px)rotate(-5deg)
    }

    40% {
        transform: translate(7px)rotate(4deg)
    }

    60% {
        transform: translate(-5px)rotate(-2deg)
    }

    80% {
        transform: translate(3px)rotate(1deg)
    }
}

.result-note {
    color: var(--text-dim);
    margin-bottom: 22px;
    font-size: .95rem;
    line-height: 1.55
}

.result-note b {
    color: var(--gold)
}

.result-actions {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.spinner {
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    margin: 40px auto;
    animation: .8s linear infinite spin
}

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

@media (width>=768px) {
    .lp-hero {
        padding: calc(88px + env(safe-area-inset-top,0px)) 24px 48px
    }

    .lp-hero-inner,.lp-stats,.lp-section,.lp-final {
        max-width: 720px
    }

    .lp-title {
        font-size: 3.4rem
    }

    .lp-sub {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.05rem
    }

    .lp-trust-item {
        padding: 14px 10px;
        font-size: .78rem
    }

    .lp-stat-value {
        font-size: 1.5rem
    }

    .lp-stat-label {
        font-size: .72rem
    }

    .lp-reviews {
        grid-template-columns: repeat(3,1fr);
        display: grid
    }

    .lp-howto-scroll {
        grid-template-columns: repeat(4,1fr);
        gap: 16px;
        max-width: 1100px;
        margin: 0 auto;
        padding: 4px 24px 12px;
        display: grid;
        overflow: visible
    }

    .lp-howto-card {
        flex: unset;
        max-width: none
    }
}

@media (width<=900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 44px
    }

    .stats-strip,.steps-grid,.reviews-grid,.dash-grid {
        grid-template-columns: 1fr
    }

    .landing .header-actions .btn:first-of-type {
        padding: 8px 12px
    }

    .landing .header-actions .btn:last-of-type {
        padding: 8px 16px
    }
}

.pix-view {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px;
    display: flex
}

.pix-timer {
    background: #ff547014;
    border: 1px solid #ff54708c;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 22px;
    display: flex;
    box-shadow: 0 0 14px #ff547040
}

.pix-timer-label {
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--danger);
    font-size: 10px;
    font-weight: 700
}

.pix-timer-digits {
    letter-spacing: 3px;
    color: var(--danger);
    font-family: Courier New,monospace;
    font-size: 30px;
    font-weight: 800
}

.pix-timer.expired {
    padding: 12px 22px
}

.pix-view-qr {
    background: #fff;
    border-radius: 14px;
    width: 220px;
    height: 220px;
    padding: 10px
}

.pix-copy-box {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    width: 100%;
    color: var(--text-dim);
    word-break: break-all;
    text-align: center;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px
}

.pix-txid {
    color: var(--text-dim);
    opacity: .7;
    word-break: break-all;
    font-size: 11px
}

.pix-new-btn {
    border: 1px solid var(--border);
    width: 100%;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border-radius: 12px;
    margin-top: 4px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s,background .2s
}

.pix-new-btn:hover {
    border-color: var(--primary);
    background: #7c5cff14
}

.ref-history {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.ref-history-item {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    display: flex
}

.ref-history-name {
    color: var(--text);
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex
}

.ref-history-nivel {
    letter-spacing: .5px;
    color: var(--accent-2);
    background: #00c2ff1f;
    border: 1px solid #00c2ff59;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 800
}

.ref-history-dep {
    color: var(--text-dim);
    margin-top: 2px;
    font-size: 12px
}

.ref-history-value {
    color: var(--accent);
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800
}

.ref-history-empty {
    text-align: center;
    color: var(--text-dim);
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
    font-size: 13px
}

.ref-link-label {
    color: var(--accent)
}

.ref-link-value {
    font-family: var(--font);
    letter-spacing: .2px;
    word-break: break-all;
    color: var(--text);
    background: #00e5a80f;
    border: 1px solid #00e5a84d;
    border-radius: 12px;
    margin: 8px 0 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5
}

.ref-copy-btn {
    background: linear-gradient(135deg, var(--accent), #00b887);
    color: #04261a;
    border: none;
    font-weight: 800;
    box-shadow: 0 4px 14px #00e5a840
}

.ref-copy-btn:disabled {
    opacity: .6
}