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

:root {
    --bg: #0d081e;
    --bg-soft: #150e2e;
    --surface: #1d1240;
    --surface-2: #261a52;
    --border: #3b2a70;
    --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;
    --panel-bg-image: url(../images/all/backgroundmb-dark.png);
    --panel-bg-overlay: linear-gradient(180deg, #080c1847 0%, #080c187a 100%)
}

@media (width>=768px) {
    :root {
        --panel-bg-image: url(../images/all/backgroundpc-dark.png)
    }
}

html[data-theme=light] {
    --panel-bg-image: url(../images/all/backgroundmb-light.png);
    --panel-bg-overlay: linear-gradient(180deg, #1c0c301f 0%, #1c0c3047 100%)
}

@media (width>=768px) {
    html[data-theme=light] {
        --panel-bg-image: url(../images/all/backgroundpc-light.png)
    }
}

* {
    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%, #a855f738, transparent 60%), radial-gradient(900px 500px at -10% 30%, #d84aff1f, 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
}

.deposit-confirmed-modal {
    text-align: center
}

.deposit-confirmed-icon {
    color: #fff;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    border-radius: 50%;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: grid;
    box-shadow: 0 0 0 8px #22c55e1f, 0 14px 35px #22c55e47
}

.deposit-confirmed-icon svg {
    stroke: currentColor;
    stroke-width: 2.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 42px;
    height: 42px
}

.deposit-confirmed-modal h2 {
    color: #4ade80;
    font-size: 1.55rem
}

.deposit-confirmed-value {
    color: var(--text);
    margin-top: 12px;
    font-size: 1.05rem;
    font-weight: 800
}

.deposit-confirmed-modal p {
    color: var(--muted);
    margin: 8px 0 22px
}

.deposit-confirmed-modal .panel-cta {
    width: 100%
}

.site-popup-overlay .modal {
    max-width: 400px;
    box-shadow: none;
    isolation: isolate;
    background: 0 0;
    border: none;
    padding: 0;
    position: relative;
    overflow: visible
}

.site-popup-overlay .modal:before {
    content: "";
    pointer-events: none;
    z-index: 3;
    background: conic-gradient(from var(--card-spin), transparent 0deg 230deg, #a855f733 260deg, #a855f7 300deg, #ffd166 325deg, #d84aff 345deg, #8b5cf6 355deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 20px;
    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
}

.site-popup-overlay .modal:after {
    content: "";
    pointer-events: none;
    z-index: -1;
    border-radius: 24px;
    animation: 1.3s ease-in-out infinite alternate fire-glow-pulse;
    position: absolute;
    inset: -6px;
    box-shadow: 0 0 14px #a855f773, 0 0 28px #d84aff47, inset 0 0 10px #c084fc1f
}

.site-popup {
    text-align: center;
    background: #12162a;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px #0000008c
}

.site-popup-overlay--offer .modal {
    padding-top: 22px
}

.site-popup-overlay--offer .modal:before,
.site-popup-overlay--offer .modal:after {
    display: none
}

.site-popup--offer {
    isolation: isolate;
    box-shadow: none;
    background: 0 0;
    overflow: visible
}

.site-popup--offer: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 #a855f773, 0 0 28px #d84aff47, inset 0 0 10px #c084fc1f
}

.site-popup-offer-inner {
    isolation: isolate;
    background: #12162a;
    border: 1px solid #a855f747;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px #00000040
}

.site-popup-offer-inner:before {
    content: "";
    pointer-events: none;
    z-index: 2;
    background: conic-gradient(from var(--card-spin), transparent 0deg 230deg, #a855f733 260deg, #a855f7 300deg, #ffd166 325deg, #d84aff 345deg, #8b5cf6 355deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 24px;
    padding: 2px;
    animation: 2.2s linear infinite card-border-spin, 1.1s ease-in-out infinite alternate fire-border-flicker;
    position: absolute;
    inset: 0;
    -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
}

.site-popup-offer-inner .site-popup-media,
.site-popup-offer-inner .site-popup-body {
    z-index: 1;
    position: relative
}

.site-popup-offer-inner .site-popup-media {
    border-radius: 24px 24px 0 0
}

.site-popup-offer-inner .site-popup-body {
    border-radius: 0 0 24px 24px
}

.site-popup-offer-badge {
    z-index: 5;
    color: #fbbf24;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #12162a;
    border: 2px solid #f5c518d9;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    animation: 2.4s ease-in-out infinite bonusPulse;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 6px #12162a
}

.site-popup-offer-badge:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, #0000 38%, #f5c5181f 44%, #f6d36573 50%, #f5c5181f 56%, #0000 62%) 0 0/250% 100%;
    animation: 4.8s linear infinite bonusSweep;
    position: absolute;
    inset: 0
}

.site-popup-close {
    z-index: 6;
    color: #fff;
    cursor: pointer;
    background: #00000073;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 10px
}

.site-popup-media {
    background: #0b0e18;
    width: 100%;
    max-height: min(62vh, 420px);
    overflow: hidden
}

.site-popup-image {
    object-fit: contain;
    object-position: center;
    border: none;
    border-radius: 0;
    width: 100%;
    height: auto;
    max-height: min(62vh, 420px);
    margin: 0;
    display: block
}

.site-popup-body {
    background: #12162a;
    padding: 18px 20px 20px
}

.site-popup--has-image .site-popup-body {
    padding-top: 16px
}

.site-popup-icon {
    margin-bottom: 12px;
    font-size: 2.6rem;
    line-height: 1
}

.site-popup-body h2 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800
}

.site-popup-msg {
    white-space: pre-wrap;
    color: #ffffffb8;
    margin: 0 0 16px;
    font-size: .9rem;
    line-height: 1.55
}

.site-popup-msg:last-child,
.site-popup-body h2:last-child {
    margin-bottom: 0
}

.site-popup-cta {
    width: 100%;
    margin-top: 2px
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

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

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

.withdraw-restriction {
    line-height: 1.45
}

.level-limit-overlay {
    z-index: 140
}

.level-limit-modal {
    text-align: left;
    padding: 4px 2px 2px
}

.level-limit-close {
    border: 1px solid var(--border);
    width: 32px;
    height: 32px;
    color: var(--text);
    cursor: pointer;
    background: #ffffff0f;
    border-radius: 999px;
    font-size: .9rem;
    position: absolute;
    top: 12px;
    right: 12px
}

.level-limit-badge {
    color: #0b0e1a;
    background: linear-gradient(135deg, var(--level-c1), var(--level-c2));
    min-width: 64px;
    box-shadow: 0 0 16px color-mix(in srgb, var(--level-c1), transparent 50%);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex
}

.level-limit-modal h2 {
    margin: 0 0 10px;
    font-size: 1.25rem
}

.level-limit-msg {
    color: var(--text-dim);
    margin: 0 0 8px;
    font-size: .92rem;
    line-height: 1.45
}

.level-limit-msg strong {
    color: var(--text)
}

.level-limit-progress {
    border: 1px solid color-mix(in srgb, var(--level-c1), transparent 70%);
    background: color-mix(in srgb, var(--level-c1), transparent 94%);
    border-radius: 12px;
    margin: 14px 0;
    padding: 12px
}

.level-limit-section {
    border: 1px solid var(--border);
    background: #ffffff05;
    border-radius: 12px;
    margin: 12px 0;
    padding: 12px
}

.level-limit-section-ttl {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 800
}

.level-limit-howto {
    background: #00e5a80a
}

.level-limit-list {
    color: var(--text);
    margin: 0;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.5
}

.level-limit-list strong {
    color: var(--accent)
}

.level-limit-modal .panel-cta {
    width: 100%;
    margin-top: 8px
}

.modal {
    position: relative
}

.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, #080c1833 0%, #080c188c 68%, var(--bg) 100%), var(--panel-bg-image) center top / cover no-repeat;
    pointer-events: none;
    position: absolute;
    inset: 0
}

html[data-theme=light] .lp-hero-bg {
    background: linear-gradient(180deg, #1c0c3014 0%, #1c0c3047 62%, var(--bg) 100%), var(--panel-bg-image) center top / cover no-repeat
}

.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
}

.landing--main-showcase .lp-hero {
    overflow: visible
}

.landing--main-showcase .lp-title {
    letter-spacing: -.04em;
    white-space: nowrap;
    font-size: clamp(1.1rem, 4.8vw, 1.5rem)
}

.landing--main-showcase .lp-live-pill {
    display: none
}

.lp-title-accent {
    color: var(--gold);
    text-shadow: 0 0 18px #ffd16673
}

.lp-title-money {
    color: var(--accent);
    text-shadow: 0 0 18px #00e5a873
}

.lp-title-break {
    display: initial
}

.landing--main-showcase .lp-title-break {
    display: none
}

.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,
.lp-hero-banner video {
    width: 100%;
    display: block
}

.lp-hero-banner--video {
    isolation: isolate;
    border: 0;
    border-radius: 24px;
    max-width: 280px;
    margin: 30px auto 24px;
    position: relative;
    overflow: visible;
    box-shadow: 0 18px 48px #0000008c
}

.lp-hero-banner--video:before {
    content: "";
    z-index: 2;
    pointer-events: none;
    background: conic-gradient(from var(--card-spin), #8b5cf6 0deg, #d84aff 70deg, #ff69dc 135deg, #ffd166 190deg, #f05bd8 245deg, #a855f7 305deg, #8b5cf6 360deg);
    -webkit-mask-composite: xor;
    border-radius: 29px;
    padding: 5px;
    animation: 2.2s linear infinite card-border-spin, 1.1s ease-in-out infinite alternate fire-border-flicker;
    position: absolute;
    inset: -5px;
    -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
}

.lp-hero-banner--video:after {
    content: "";
    z-index: -1;
    pointer-events: none;
    border-radius: 30px;
    animation: 1.3s ease-in-out infinite alternate fire-glow-pulse;
    position: absolute;
    inset: -6px;
    box-shadow: 0 0 14px #a855f78c, 0 0 30px #d84aff61, inset 0 0 10px #c084fc26
}

.lp-video-badge {
    z-index: 6;
    color: #fff;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    background: #12062b;
    border: 3px solid #f05bd8;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.1;
    animation: 2.4s ease-in-out infinite bonusPulse;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px #12062b, 0 0 18px #f05bd8cc
}

.lp-video-badge strong {
    color: #f05bd8;
    font: inherit
}

.lp-video-badge-icon {
    fill: #fff;
    vertical-align: -.14em;
    width: 1.05em;
    height: 1.05em;
    margin-right: 5px
}

.lp-video-badge:after {
    content: "";
    border-radius: inherit;
    background: linear-gradient(115deg, #0000 34%, #ffffff1f 43%, #ffffffa6 50%, #ffffff1f 57%, #0000 66%) 0 0/250% 100%;
    animation: 4.8s linear infinite bonusSweep;
    position: absolute;
    inset: 0
}

.lp-hero-banner video {
    z-index: 1;
    background: #12062b;
    border-radius: 22px;
    height: auto;
    position: relative
}

.lp-video-link {
    cursor: pointer;
    touch-action: manipulation;
    background: 0 0;
    border: 0;
    border-radius: 22px;
    width: 100%;
    padding: 0;
    display: block;
    overflow: hidden
}

.lp-video-link video {
    pointer-events: none
}

.lp-video-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 5px
}

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

.lp-btn-primary {
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: 2.8s ease-in-out infinite lp-cta-soft-pulse;
    box-shadow: 0 8px 28px #00ff7873;
    border-radius: 999px !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 800 !important
}

@keyframes lp-cta-soft-pulse {
    0%,
    to {
        filter: brightness();
        transform: scale(1);
        box-shadow: 0 8px 24px #00ff7857
    }
    50% {
        filter: brightness(1.06);
        transform: scale(1.012);
        box-shadow: 0 10px 30px #00ff787a
    }
}

.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%, #a855f738, #0000 55%), #0a0818;
    padding: 0;
    display: block
}

.hero-preview {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.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 {
    --bv: 4px;
    background: #ffffff0d;
    border-radius: 50%;
    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: var(--panel-bg-overlay), var(--panel-bg-image) center 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: #180d2ed9;
    border: 1px solid #d84aff47;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px #00000073, 0 0 32px #8c3cdc38
}

.input-password {
    position: relative
}

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

.phone-country-input {
    position: relative
}

.phone-country-prefix {
    z-index: 1;
    color: var(--text);
    font-size: var(--input-font-size);
    pointer-events: none;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%)
}

.phone-country-input.has-value .input {
    padding-left: 54px
}

.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-level,
.level-limit-modal,
.level-limit-progress {
    --level-c1: #7a8499;
    --level-c2: #a8b0c4
}

.profile-level[data-level="1"],
.level-limit-modal[data-level="1"],
.level-limit-progress[data-level="1"] {
    --level-c1: #3d8bfd;
    --level-c2: #7eb6ff
}

.profile-level[data-level="2"],
.level-limit-modal[data-level="2"],
.level-limit-progress[data-level="2"] {
    --level-c1: #00c896;
    --level-c2: #5dffc8
}

.profile-level[data-level="3"],
.level-limit-modal[data-level="3"],
.level-limit-progress[data-level="3"] {
    --level-c1: #e6a700;
    --level-c2: #ffd666
}

.profile-level[data-level="4"],
.level-limit-modal[data-level="4"],
.level-limit-progress[data-level="4"] {
    --level-c1: #ff6b2c;
    --level-c2: #ffab70
}

.profile-level[data-level="5"],
.level-limit-modal[data-level="5"],
.level-limit-progress[data-level="5"] {
    --level-c1: #e91e8c;
    --level-c2: #ff7eb6
}

.profile-level {
    margin-bottom: 4px
}

.profile-level-top {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    display: flex
}

.profile-level-badge {
    letter-spacing: .02em;
    color: #0b0e1a;
    background: linear-gradient(135deg, var(--level-c1), var(--level-c2));
    min-width: 72px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--level-c1), transparent 55%);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex
}

.profile-level-meta {
    color: var(--text-dim);
    text-align: right;
    font-size: .78rem;
    font-weight: 700
}

.profile-level-bar {
    border: 1px solid color-mix(in srgb, var(--level-c1), transparent 75%);
    background: #ffffff14;
    border-radius: 999px;
    height: 10px;
    overflow: hidden
}

.profile-level-bar-fill {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--level-c1), var(--level-c2));
    height: 100%;
    box-shadow: 0 0 12px color-mix(in srgb, var(--level-c1), transparent 40%);
    transition: width .35s
}

.profile-level-foot {
    color: var(--text-dim);
    margin-top: 8px;
    font-size: .72rem;
    line-height: 1.35
}

.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-support {
    margin-top: 4px
}

.profile-support-list {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.profile-support-link {
    color: #fff;
    background: #ffffff0d;
    border: 1px solid #ffffff1f;
    border-radius: 14px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    display: flex
}

.profile-support-link:hover {
    background: #00ff881a;
    border-color: #00ff8859
}

.profile-support-link svg {
    opacity: .75;
    flex-shrink: 0;
    width: 18px;
    height: 18px
}

.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: var(--panel-bg-overlay), var(--panel-bg-image) center 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));
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(135deg, #a855f738, #d84aff14 55%, #0000), #180c2ef0;
    border-bottom: 1px solid #d84aff59;
    align-items: center;
    gap: 10px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 20px #7828c859
}

.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: linear-gradient(135deg, #d84aff, #7c3aed);
    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 #c026d366
}

@keyframes install-pulse {
    0%,
    to {
        box-shadow: 0 4px 14px #c026d366, 0 0 #d84aff8c
    }
    50% {
        box-shadow: 0 4px 14px #c026d366, 0 0 0 8px #d84aff00
    }
}

.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: 10px;
    display: flex
}

.panel-theme-btn {
    border: 2px solid var(--border);
    width: 42px;
    height: 42px;
    color: var(--gold);
    cursor: pointer;
    background: #180d2eb8;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    transition: transform .12s, box-shadow .12s, background .12s;
    display: grid
}

.panel-theme-btn svg {
    width: 20px;
    height: 20px
}

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

html[data-theme=light] .panel-theme-btn {
    color: #5b21b6;
    background: #ffffff59
}

.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
    }
}

.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 #d84aff47;
    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, #a855f733 260deg, #a855f7 300deg, #ffd166 325deg, #d84aff 345deg, #8b5cf6 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 #a855f773, 0 0 28px #d84aff47, inset 0 0 10px #c084fc1f
}

.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: linear-gradient(#a855f71a, #0000 45%), #140a28db;
    border-top: 1px solid #d84aff47;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 4vw, 34px);
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible;
    box-shadow: 0 -6px 24px #5a1ea04d
}

.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%, #35205e, #150a2c);
    border: none;
    border-radius: 50%;
    place-items: center;
    width: 60px;
    height: 60px;
    display: grid;
    position: relative;
    box-shadow: 0 0 18px #a855f766
}

.nav-item.center .nav-circle:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    background: conic-gradient(from var(--card-spin), transparent 0deg 220deg, #d84aff40 260deg, #d84aff 300deg, #ffd166 330deg, #a855f7 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 .nav-bubble {
    z-index: 1;
    filter: drop-shadow(0 0 6px #d84aff8c);
    width: 34px;
    height: 34px;
    display: block;
    position: relative
}

.nav-item.center span {
    color: #ffd166
}

.live-toast {
    left: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 90;
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    background: #180d2eeb;
    border: 1px solid #d84aff40;
    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
}

.panel-shell>.modal-overlay {
    z-index: 130;
    position: fixed
}

.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));
    backface-visibility: hidden;
    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-overlay--center {
    align-items: center;
    padding: 16px
}

.sheet-overlay--center .sheet {
    isolation: isolate;
    border: none;
    border-radius: 20px;
    width: min(100%, 400px);
    max-width: 400px;
    max-height: min(88vh, 760px);
    padding-bottom: 20px;
    animation: .25s modal-pop;
    position: relative;
    overflow: hidden auto;
    box-shadow: 0 24px 60px #0000008c, 0 0 14px #a855f773, 0 0 28px #d84aff47
}

.sheet-overlay--center .sheet-hero {
    border-radius: 20px 20px 0 0;
    overflow: hidden
}

.sheet-overlay--center .sheet-handle,
.sheet-overlay--center .sheet-handle-overlay {
    display: none
}

.sheet-overlay--center .sheet:before {
    content: "";
    pointer-events: none;
    z-index: 3;
    background: conic-gradient(from var(--card-spin), transparent 0deg 230deg, #a855f733 260deg, #a855f7 300deg, #ffd166 325deg, #d84aff 345deg, #8b5cf6 355deg, transparent 360deg);
    -webkit-mask-composite: xor;
    border-radius: 20px;
    padding: 2px;
    animation: 2.2s linear infinite card-border-spin, 1.1s ease-in-out infinite alternate fire-border-flicker;
    position: absolute;
    inset: 0;
    -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
}

.sheet-overlay--center .sheet>* {
    z-index: 1;
    position: relative
}

.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;
    backface-visibility: hidden;
    will-change: contents;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    transform: translateZ(0)
}

.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;
    margin-bottom: 8px;
    display: grid
}

.ref-level {
    text-align: center;
    background: #00e5a80f;
    border: 1px solid #00e5a84d;
    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,
html.game-active #root {
    overscroll-behavior: none;
    touch-action: none;
    height: var(--game-visible-height, 100dvh);
    max-height: var(--game-visible-height, 100dvh);
    overflow: hidden
}

body.game-active {
    width: 100%;
    left: 0;
    right: 0;
    top: var(--game-visible-offset, 0px);
    position: fixed
}

.game-page {
    width: 100%;
    height: var(--game-visible-height, 100dvh);
    max-height: var(--game-visible-height, 100dvh);
    box-sizing: border-box;
    min-height: 0;
    padding: max(env(safe-area-inset-top, 0px), var(--game-top-pad, 58px)) 12px max(env(safe-area-inset-bottom, 0px), var(--game-bottom-pad, 10px));
    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;
    overflow: hidden
}

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

.game-mute-btn {
    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%;
    flex-shrink: 0;
    place-items: center;
    transition: background .15s, color .15s, transform .12s;
    display: grid;
    position: relative;
    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-bubbles {
    filter: drop-shadow(0 10px 16px #14082873);
    width: 156px;
    height: 142px;
    position: relative
}

.loading-bubbles:before {
    content: "";
    filter: blur(10px);
    background: radial-gradient(circle, #ffd25a6b 0%, #b45aff1f 48%, #0000 72%);
    animation: 1.8s ease-in-out infinite loading-cluster-glow;
    position: absolute;
    inset: 8% 4%
}

.loading-bubbles .lb {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 52px;
    height: 52px;
    animation: .55s cubic-bezier(.34, 1.45, .64, 1) both loading-bubble-in, 1.45s ease-in-out infinite loading-bubble-bob;
    position: absolute
}

.loading-bubbles .lb.c1 {
    background-image: url(../images/bubbles/bubblevermelha.png);
    animation-delay: 0s, .55s;
    top: 0;
    left: 26px
}

.loading-bubbles .lb.c2 {
    background-image: url(../images/bubbles/bubbleamarela.png);
    animation-delay: 80ms, .68s;
    top: 0;
    left: 76px
}

.loading-bubbles .lb.c3 {
    background-image: url(../images/bubbles/bubbleazul.png);
    animation-delay: .16s, .8s;
    top: 42px;
    left: 1px
}

.loading-bubbles .lb.c4 {
    background-image: url(../images/bubbles/bubbleverde.png);
    animation-delay: .24s, .92s;
    top: 42px;
    left: 51px
}

.loading-bubbles .lb.c5 {
    background-image: url(../images/bubbles/bubbleroxa.png);
    animation-delay: .32s, 1.04s;
    top: 42px;
    left: 101px
}

.loading-bubbles .lb.c6 {
    background-image: url(../images/bubbles/bubblelaranja.png);
    animation-delay: .4s, 1.16s;
    top: 84px;
    left: 51px
}

.lb-spark {
    background: #fff8d0;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: 1.6s ease-in-out infinite loading-spark;
    position: absolute;
    box-shadow: 0 0 8px 2px #ffe678d9
}

.lb-spark.s1 {
    animation-delay: .2s;
    top: 18px;
    left: 8px
}

.lb-spark.s2 {
    animation-delay: .7s;
    top: 8px;
    right: 6px
}

.lb-spark.s3 {
    animation-delay: 1.1s;
    bottom: 4px;
    left: 70px
}

@keyframes loading-bubble-in {
    0% {
        opacity: 0;
        transform: scale(.15)translateY(22px)
    }
    to {
        opacity: 1;
        transform: scale(1)translateY(0)
    }
}

@keyframes loading-bubble-bob {
    0%,
    to {
        transform: translateY(0)scale(1)
    }
    50% {
        transform: translateY(-8px)scale(1.06)
    }
}

@keyframes loading-cluster-glow {
    0%,
    to {
        opacity: .65;
        transform: scale(.92)
    }
    50% {
        opacity: 1;
        transform: scale(1.08)
    }
}

@keyframes loading-spark {
    0%,
    to {
        opacity: .15;
        transform: scale(.5)
    }
    50% {
        opacity: 1;
        transform: scale(1.25)
    }
}

.loading-text {
    color: #fff;
    text-shadow: 0 2px #28104659, 0 4px 14px #0006, 0 0 18px #ffd25a47;
    letter-spacing: .02em;
    font-size: 1.08rem;
    font-weight: 800
}

.loading-dots:after {
    content: "";
    text-align: left;
    width: 1.15em;
    animation: 1.35s steps(4, end) infinite loading-ellipsis;
    display: inline-block
}

@keyframes loading-ellipsis {
    0% {
        content: ""
    }
    25% {
        content: "."
    }
    50% {
        content: ".."
    }
    75% {
        content: "..."
    }
}

.game-bg {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 1.2s;
    position: fixed;
    inset: 0
}

.game-bg.active {
    opacity: 1
}

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

.bb-hud {
    touch-action: none;
    flex-shrink: 0;
    width: 100%;
    max-width: 460px;
    margin-bottom: 4px;
    padding: 4px 4px 6px
}

.bb-hud-top {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    display: grid
}

.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);
    white-space: nowrap;
    background: #08122a2e;
    border-radius: 999px;
    flex: none;
    justify-self: start;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: clamp(.82rem, 3.6vw, 1.05rem);
    font-weight: 800;
    display: flex
}

.bb-hud-corner--right {
    flex-direction: row-reverse;
    justify-self: end
}

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

.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: 0;
    font-size: clamp(1.35rem, 6.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    transition: color .5s, text-shadow .5s
}

.bb-hud-score.rising {
    animation: .5s hud-score-pop
}

@keyframes hud-score-pop {
    0% {
        transform: scale(1)
    }
    40% {
        transform: scale(1.16)
    }
    to {
        transform: scale(1)
    }
}

.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: 6px auto 0;
    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 .12s linear, box-shadow .35s
}

.bb-hud-progress.rising .bb-hud-progress-fill {
    box-shadow: 0 0 10px #ffffffb3
}

.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-rows: repeat(8, 1fr);
    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: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--bc), #fff 70%), var(--bc) 55%, color-mix(in srgb, var(--bc), #000 35%));
    box-shadow: inset 0 -2px 4px #00000040, 0 0 8px color-mix(in srgb, var(--bc), transparent 50%);
    border: none
}

.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)
    }
}

.board-wrap.bubble-wrap {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 460px;
    min-height: 0;
    display: flex;
    container-type: size
}

.bubble-stage {
    aspect-ratio: 360/510;
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
    position: relative;
    overflow: visible
}

.bubble-canvas {
    aspect-ratio: 360/510;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: crosshair;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: block
}

@supports (width:1cqh) {
    .bubble-stage {
        width: min(100cqw, 70.5882cqh);
        height: auto
    }
    .bubble-stage .bubble-canvas {
        width: 100%;
        height: auto
    }
}

.game-dock {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 460px;
    min-height: 48px;
    margin-top: 8px;
    display: flex;
    position: relative
}

.game-dock .cashout-btn {
    width: min(100%, 340px);
    margin: 0 auto
}

.game-dock .game-mute-btn {
    position: absolute;
    bottom: 0;
    right: 0
}

.bubble-row-indicator {
    text-align: center;
    color: #ffffffbf;
    text-shadow: 0 1px 3px #0006;
    margin-top: 10px;
    font-size: .85rem;
    font-weight: 600
}

.bubble-row-indicator b {
    color: #fff
}

.bubble-row-indicator .danger {
    color: #ff7d9c;
    animation: .8s ease-in-out infinite bubble-danger-pulse
}

@keyframes bubble-danger-pulse {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .55
    }
}

.tutorial-skip-btn {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    z-index: 60;
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0a062059;
    border: 1px solid #ffffff59;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 600;
    position: fixed;
    right: 14px
}

.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;
    flex-shrink: 0;
    margin-top: 6px;
    font-size: 1rem;
    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 {
    flex: 0 auto;
    width: min(100%, 340px);
    max-width: 340px;
    margin: 0 auto
}

.game-page--cashout-ready:after {
    content: "";
    pointer-events: none;
    z-index: 70;
    border-radius: inherit;
    animation: 1.8s ease-in-out infinite cashout-screen-glow;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 42px 10px #ffb30057, inset 0 0 88px 22px #ffc10729
}

@keyframes cashout-screen-glow {
    0%,
    to {
        opacity: .55
    }
    50% {
        opacity: 1
    }
}

.cashout-ready {
    z-index: 1;
    width: min(100%, 340px);
    max-width: 340px;
    margin: 0 auto;
    animation: 1.1s infinite cashout-pulse;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto
}

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

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

@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
    }
}

.gain-float {
    left: var(--gx, 50%);
    top: var(--gy, 50%);
    color: #0f8;
    text-shadow: 0 0 12px #00ff888c, 0 2px 8px #00000073;
    pointer-events: none;
    z-index: 30;
    font-size: 1.35rem;
    font-weight: 900;
    animation: 1.1s forwards gain-rise;
    position: absolute;
    transform: translate(-50%, -50%)
}

.clear-shout {
    pointer-events: none;
    z-index: 32;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: 1.15s cubic-bezier(.2, 1.4, .35, 1) forwards clear-shout-pop;
    display: flex;
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%)
}

.clear-shout-word {
    letter-spacing: .02em;
    color: #ffe566;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    text-shadow: 0 4px #f0a000, 0 8px 18px #00000073;
    white-space: nowrap;
    font-size: clamp(1.85rem, 8vw, 2.55rem);
    font-weight: 900;
    line-height: 1
}

.clear-shout-combo {
    color: #fff;
    -webkit-text-stroke: 2.5px #c44dff;
    paint-order: stroke fill;
    text-shadow: 0 3px #7a1fb8, 0 6px 14px #0006;
    white-space: nowrap;
    margin-top: 2px;
    font-size: clamp(1.45rem, 6.5vw, 2rem);
    font-weight: 900;
    line-height: 1;
    transform: rotate(-6deg)
}

.clear-shout-combo span {
    color: #ffe566;
    -webkit-text-stroke: 2.5px #c44dff;
    paint-order: stroke fill
}

.clear-shout-spark {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: .95;
    background: #ffe566;
    width: 10px;
    height: 10px;
    animation: 1.1s ease-out forwards clear-spark;
    position: absolute
}

.clear-shout-spark.s1 {
    animation-delay: 50ms;
    top: -8px;
    left: -18px
}

.clear-shout-spark.s2 {
    width: 8px;
    height: 8px;
    animation-delay: .12s;
    top: -14px;
    right: -12px
}

.clear-shout-spark.s3 {
    width: 7px;
    height: 7px;
    animation-delay: .18s;
    bottom: 8px;
    left: -10px
}

.clear-shout-spark.s4 {
    width: 9px;
    height: 9px;
    animation-delay: 80ms;
    top: 4px;
    right: -22px
}

@keyframes clear-shout-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, 18px)scale(.55)
    }
    18% {
        opacity: 1;
        transform: translate(-50%)scale(1.12)
    }
    35% {
        transform: translate(-50%, -4px)scale(1)
    }
    75% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate(-50%, -36px)scale(1.08)
    }
}

@keyframes clear-spark {
    0% {
        opacity: 0;
        transform: scale(.2)rotate(0)
    }
    30% {
        opacity: 1;
        transform: scale(1.2)rotate(25deg)
    }
    to {
        opacity: 0;
        transform: scale(.4)rotate(80deg)translateY(-10px)
    }
}

@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)
    }
}

html.tutorial-active,
html.tutorial-active body {
    height: var(--tutorial-visible-height, 100dvh);
    overscroll-behavior: none;
    min-height: 0;
    overflow: hidden
}

body.tutorial-active {
    width: 100%;
    position: fixed;
    inset: 0
}

body.tutorial-active #root {
    height: var(--tutorial-visible-height, 100dvh);
    min-height: 0;
    overflow: hidden
}

.tutorial-game-page {
    width: 100%;
    height: var(--tutorial-visible-height, 100dvh);
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px));
    flex: none;
    overflow: hidden
}

.tutorial-game-page .bb-hud {
    margin-bottom: 2px;
    padding: 2px 8px 6px
}

.tutorial-game-page .bb-hud-corner {
    padding-block: 1px;
    font-size: 1.05rem
}

.tutorial-game-page .bb-hud-icon {
    width: 20px;
    height: 20px
}

.tutorial-game-page .bb-hud-score {
    margin: 0;
    font-size: clamp(1.35rem, 6.2vw, 2.2rem)
}

.tutorial-game-page .tutorial-tip {
    margin-bottom: 8px;
    padding: 8px 10px;
    font-size: .86rem;
    line-height: 1.28
}

.tutorial-game-page .board-wrap {
    width: min(calc(100vw - 24px), max(250px, calc(var(--tutorial-visible-height, 100dvh) - 400px)))
}

.tutorial-game-page .board {
    gap: 3px;
    padding: 8px
}

.tutorial-game-page .tray {
    width: min(calc(100vw - 24px), max(250px, calc(var(--tutorial-visible-height, 100dvh) - 400px)));
    gap: 8px;
    margin-top: 8px
}

.tutorial-game-page .tray-slot {
    min-height: 72px;
    padding: 6px
}

.tutorial-spotlight-hole {
    z-index: 40;
    pointer-events: none;
    outline-offset: 0;
    border-radius: 50%;
    outline: 1.5px solid #ffe56673;
    position: fixed;
    box-shadow: 0 0 0 999vmax #0000008c
}

.tutorial-spotlight-hole.cashout-hole {
    border-radius: 999px;
    outline-width: 2.5px
}

.tutorial-spotlight-hole.moving {
    transition: left .78s cubic-bezier(.22, 1, .36, 1), top .78s cubic-bezier(.22, 1, .36, 1), width .78s cubic-bezier(.22, 1, .36, 1), height .78s cubic-bezier(.22, 1, .36, 1)
}

.tutorial-spotlight-hole.opening {
    outline-color: #0000
}

.tutorial-spotlight-hole.closing {
    outline-color: #ffe56673
}

.tutorial-play-layer {
    z-index: 42;
    position: relative
}

.tutorial-cashout-wrap {
    z-index: 42;
    width: 100%;
    max-width: 460px;
    position: relative
}

.tutorial-cashout-wrap.tutorial-cashout-focus {
    z-index: 50
}

.tutorial-cashout-hand {
    z-index: 56;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px #00000073);
    font-size: 2.6rem;
    line-height: 1;
    animation: 1s ease-in-out infinite tutorial-tap-hand;
    position: fixed;
    transform: translate(-30%, -10%)
}

.tutorial-intro-modal {
    text-align: center
}

.tutorial-intro-modal h2 {
    margin-bottom: 10px
}

.tutorial-intro-accent {
    color: #ffb300;
    text-shadow: 0 0 16px #ffb30073
}

.tutorial-intro-badge {
    color: #7dffb2;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #00ff881f;
    border: 1px solid #00ff8859;
    border-radius: 999px;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 800;
    display: inline-block
}

.tutorial-intro-text {
    color: #fff;
    margin: 0 0 22px;
    font-size: clamp(1.05rem, 4.2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.45
}

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

.tutorial-intro-skip {
    color: #fff !important;
    background: #ffffff0f !important;
    border-color: #ffffff59 !important
}

.tutorial-intro-skip:hover {
    background: #ffffff1f !important
}

.tutorial-win-modal .win-trophy,
.tutorial-win-modal h2 {
    display: none
}

.tutorial-win-text {
    color: #fff !important;
    margin: 4px 0 10px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important
}

.tutorial-win-cta {
    animation: 1.8s ease-in-out infinite tutorial-win-cta-pulse
}

@keyframes tutorial-win-cta-pulse {
    0%,
    to {
        transform: scale(1);
        box-shadow: 0 8px 22px #00ff7852
    }
    50% {
        transform: scale(1.015);
        box-shadow: 0 8px 26px #00ff786b, 0 0 12px #00ff8838
    }
}

.tutorial-your-turn {
    z-index: 80;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    padding: 28px;
    display: flex;
    position: fixed;
    inset: 0
}

.tutorial-your-turn p {
    color: #fff;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 3px 5px #000000f2, 0 5px 24px #000000d9;
    width: min(600px, 100%);
    margin: 0;
    font-size: clamp(1.65rem, 7vw, 2.5rem);
    font-weight: 900;
    line-height: 1.18;
    animation: .42s cubic-bezier(.2, 1.35, .4, 1) both tutorial-your-turn-in
}

@keyframes tutorial-your-turn-in {
    0% {
        opacity: 0;
        transform: translateY(22px)scale(.82)
    }
    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}

.bb-hud.tutorial-spotlight {
    z-index: 50;
    position: relative
}

.tutorial-score-focus {
    display: inline-block
}

.tutorial-dimmed-area {
    z-index: 1;
    pointer-events: none;
    position: relative
}

.tutorial-meta-callout {
    z-index: 70;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(320px, 100vw - 28px);
    transition: left .78s cubic-bezier(.22, 1, .36, 1), top .78s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    position: fixed;
    transform: translate(-50%)
}

.tutorial-meta-callout.right,
.tutorial-meta-callout.left {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: min(268px, 100vw - 24px)
}

.tutorial-meta-callout.right {
    transform: translateY(-50%)
}

.tutorial-meta-callout.left {
    transform: translate(-100%, -50%)
}

.tutorial-meta-copy {
    flex-direction: column;
    flex: auto;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    display: flex
}

.tutorial-meta-copy .tutorial-meta-text,
.tutorial-meta-copy .tutorial-tap-text {
    width: 100%
}

.tutorial-meta-callout.above {
    transform: translate(-50%, -100%)
}

.tutorial-meta-arrow {
    filter: drop-shadow(0 2px 4px #00000073);
    border-bottom: 10px solid #ffe566;
    border-left: 8px solid #0000;
    border-right: 8px solid #0000;
    flex-shrink: 0;
    width: 0;
    height: 0
}

.tutorial-meta-arrow--down {
    border-top: 10px solid #ffe566;
    border-bottom: none
}

.tutorial-meta-arrow--left {
    border: 8px solid #0000;
    border-left: none;
    border-right: 10px solid #ffe566
}

.tutorial-meta-arrow--right {
    border: 8px solid #0000;
    border-left: 10px solid #ffe566;
    border-right: none
}

.tutorial-meta-text {
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px #000000e6, 0 2px 12px #000000a6;
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0 4px;
    font-size: clamp(.88rem, 3.8vw, .98rem);
    font-weight: 700;
    line-height: 1.4
}

.tutorial-meta-text.typing {
    min-height: 2.8em
}

.tutorial-meta-callout .tutorial-tap-text {
    width: auto;
    max-width: none;
    margin: 4px 0 0;
    font-size: clamp(.86rem, 3.6vw, .95rem);
    position: static
}

.tutorial-skip-row {
    z-index: 55;
    justify-content: flex-end;
    width: 100%;
    max-width: 460px;
    margin: -4px 0 8px;
    display: flex;
    position: relative
}

.tutorial-skip-row--meta {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 60;
    width: auto;
    max-width: none;
    margin: 0;
    position: fixed
}

.tutorial-tap-text {
    color: #ffe566;
    text-align: center;
    text-shadow: 0 2px 10px #0000008c;
    pointer-events: none;
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0;
    font-size: .95rem;
    font-weight: 700;
    animation: .35s tutorial-tap-fade
}

.tutorial-tap-hand-float {
    z-index: 56;
    left: 50%;
    bottom: max(88px, calc(18% + env(safe-area-inset-bottom, 0px)));
    pointer-events: none;
    filter: drop-shadow(0 4px 10px #00000073);
    font-size: 2.6rem;
    line-height: 1;
    animation: 1s ease-in-out infinite tutorial-tap-hand;
    position: fixed;
    transform: translate(-50%)
}

.tutorial-tap-catcher {
    z-index: 45;
    cursor: pointer;
    background: 0 0;
    border: none;
    position: fixed;
    inset: 0
}

@keyframes tutorial-tap-fade {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes tutorial-tap-hand {
    0%,
    to {
        translate: 0
    }
    50% {
        translate: 0 12px
    }
}

.tutorial-hud-label {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffe566;
    font-size: .78rem;
    font-weight: 800
}

.tutorial-skip {
    color: #ffffffd9;
    cursor: pointer;
    text-underline-offset: 3px;
    background: 0 0;
    border: none;
    padding: 0;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: underline
}

.tutorial-tip {
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    text-align: center;
    background: #080c188c;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    flex-shrink: 0;
    width: 100%;
    max-width: 460px;
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 6px 18px #00000040
}

.tutorial-tip.ok {
    color: var(--accent);
    border-color: #00e5a873
}

.tutorial-tip.typing {
    min-height: 2.7em
}

.tutorial-tip-caret {
    vertical-align: -.12em;
    background: #ffe566;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    animation: .7s step-end infinite tutorial-caret-blink;
    display: inline-block
}

@keyframes tutorial-caret-blink {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

.cell.tutorial-target {
    animation: 1.1s ease-in-out infinite tutorial-target-pulse;
    box-shadow: inset 0 0 0 2px #ffe566, 0 0 14px #ffe5668c;
    background: #ffe5662e !important
}

.tray-slot.tutorial-piece-target {
    outline-offset: 2px;
    outline: 2px solid #ffe566;
    animation: 1.1s ease-in-out infinite tutorial-target-pulse;
    box-shadow: 0 0 16px #ffe56673
}

@keyframes tutorial-target-pulse {
    0%,
    to {
        filter: brightness()
    }
    50% {
        filter: brightness(1.25)
    }
}

.tutorial-hand {
    z-index: 80;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px #00000073);
    will-change: left, top;
    flex-direction: column;
    align-items: center;
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%)
}

.tutorial-hand.carrying {
    transform: translate(-50%, -50%)scale(1.04)
}

.tutorial-hand-piece {
    opacity: .98;
    filter: drop-shadow(0 4px 10px #00000059);
    margin-bottom: -6px;
    transform: none
}

.tutorial-hand-piece .piece-grid {
    transform: none !important
}

.tutorial-hand-emoji {
    transform-origin: 40% 20%;
    font-size: 2.4rem;
    line-height: 1;
    animation: .55s ease-in-out infinite tutorial-hand-bob;
    display: block;
    transform: rotate(-18deg)
}

.tutorial-aim-hand .tutorial-hand-emoji {
    animation: .7s ease-in-out infinite tutorial-hand-bob
}

.tutorial-aim-hand--guide .tutorial-hand-emoji {
    animation: none;
    transform: rotate(-32deg)
}

.tray-slot.tutorial-piece-lifted .piece-grid {
    opacity: .18
}

@keyframes tutorial-hand-bob {
    0%,
    to {
        translate: 0
    }
    50% {
        translate: 4px 8px
    }
}

.tutorial-clear-flash {
    pointer-events: none;
    z-index: 20;
    place-items: center;
    font-size: 2.4rem;
    animation: .85s forwards clear-shout-pop;
    display: grid;
    position: absolute;
    inset: 0
}

.game-page.tutorial-shake .board-wrap {
    animation: .4s tutorial-shake
}

@keyframes tutorial-shake {
    0%,
    to {
        transform: translate(0)
    }
    25% {
        transform: translate(-6px)
    }
    75% {
        transform: translate(6px)
    }
}

.tutorial-done {
    text-align: center;
    width: min(100%, 400px);
    margin: auto;
    padding: 28px 22px
}

.tutorial-done h1 {
    margin: 8px 0;
    font-size: 1.45rem
}

.tutorial-done p {
    color: var(--text-dim);
    margin: 0 0 18px
}

.tutorial-done-badge {
    color: #ffe566;
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
    text-shadow: 0 3px #f0a000;
    font-size: 1.8rem;
    font-weight: 900;
    display: inline-block
}

.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
}

:is(.modal:has(.result-modal--win), .modal:has(.tutorial-intro-modal)) {
    padding-top: 0;
    overflow: hidden
}

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

.result-win-banner {
    margin: 0 -28px 16px
}

.result-win-banner img {
    width: 100%;
    height: auto;
    display: block
}

.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
    }
}

.pix-view-qr {
    background: #fff;
    border-radius: 12px;
    width: 180px;
    height: 180px;
    margin: 8px auto;
    padding: 8px;
    display: block
}

.pix-timer {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    display: flex
}

.pix-timer-label {
    color: var(--text-dim);
    font-size: 12px
}

.pix-timer-digits {
    letter-spacing: .06em;
    font-size: 1.4rem;
    font-weight: 800
}

.pix-timer.expired .pix-timer-label {
    color: #ef4444
}

.redeposit-badge {
    color: #16a34a;
    text-align: center;
    background: #22c55e1a;
    border: 1px solid #22c55e47;
    border-radius: 10px;
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: .86rem;
    font-weight: 700
}

.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
    }
    .landing--main-showcase .lp-title {
        white-space: normal;
        font-size: 3.4rem
    }
    .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
}