[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bx-card { --bx-accent-soft: var(--surface-accent); }
    :root:not([data-theme="light"]) .lv-step { --lv-soft: var(--surface-2); }
}

:root[data-theme="dark"] .bx-card { --bx-accent-soft: var(--surface-accent); }
:root[data-theme="dark"] .lv-step { --lv-soft: var(--surface-2); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg);
    color: var(--text);

    transition: background-color var(--theme-switch), color var(--theme-switch);
    padding: 16px;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 100%;
    background: var(--surface);
    border-radius: clamp(16px, 2vw, 32px);
    padding: clamp(16px, 2vw, 32px);
    box-shadow: 0 4px 24px rgba(0, 20, 40, 0.04);
    min-height: 100vh;
}

.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-12px);
    transition: all 0.25s ease;
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    text-align: center;
    max-width: 90vw;
}

.toast-show {
    opacity: 1;
    transform: translateY(0);
}

.toast-action {
    cursor: pointer;
}

.toast-action:hover,
.toast-action:focus-visible {
    filter: brightness(1.08);
    transform: translateY(1px);
}

.toast-action:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.toast-info {
    background: var(--accent);
}

.toast-success {
    background: var(--ok);
}

.toast-error {
    background: var(--danger);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--accent);
}

.btn-arrow {
    transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 24px;
}

.logo {

    font-size: 23px;

    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo img {
    height: 30px;
    width: auto;
}

.logo-name {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
}

.logo-x {
    display: inline-block;
    color: var(--accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .logo-x {
        background: var(--logo-x);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    padding: 6px;
    border-radius: 40px;
}

.nav-link {
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 30px;
    color: var(--text-dim);
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-link svg {
    width: 19px;
    height: 19px;
    flex: none;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    color: var(--accent);
}

.nav-link.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.nav-link:hover svg,
.nav-link.active svg {
    opacity: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.balance-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 4px 5px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.balance-pill:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.balance-pill__sum {
    color: var(--accent);
    padding: 0 6px;
    min-width: 62px;
    text-align: center;

    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.balance-pill__btn {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.balance-pill__btn svg {
    width: 15px;
    height: 15px;
}

.balance-pill__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.balance-pill__btn:active {
    transform: scale(0.92);
}

.balance-pill__btn--in {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.balance-pill__btn--in:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.38);
}

.balance-pill__btn--out {
    background: var(--surface-3);
    color: var(--text-dim);
}

.balance-pill__btn--out:hover {
    background: var(--border);
    color: var(--text);
}

.avatar {
    width: 44px;
    height: 44px;
    background: var(--surface-accent);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
}

.avatar:hover {
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.avatar.clickable::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid var(--surface);
    border-radius: 50%;
}

.pmenu {
    position: absolute;

    z-index: 1500;
    width: 292px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
    animation: pmenuIn 0.18s ease;
}

@keyframes pmenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pmenu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
}

.pmenu__avatar {
    width: 42px;
    height: 42px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-accent);
    color: var(--accent);
    font-size: 17px;
    font-weight: 700;
}

.pmenu__id {
    min-width: 0;
}

.pmenu__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmenu__role {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 500;
    margin-top: 2px;
}

.pmenu__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-accent);
    border: 1px solid var(--border);
}

.pmenu__balance-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pmenu__balance-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}

.pmenu__balance-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.4px;
}

.pmenu__fs {
    flex: none;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--violet);
    font-size: 12px;
    font-weight: 700;
}

.pmenu__pay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
}

.pmenu__pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pmenu__pay-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}

.pmenu__pay-btn--in {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.pmenu__pay-btn--in:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.pmenu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
}

.pmenu__uid {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.pmenu__uid:hover { color: var(--text); }

.pmenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pmenu__item:hover {
    background: var(--surface-3);
    color: var(--text);
}

.pmenu__icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--text-faint);
}

.pmenu__item:hover .pmenu__icon {
    color: var(--accent);
}

.pmenu__item--exit {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    border-radius: 0 0 12px 12px;
    color: var(--danger);
}

.pmenu__item--exit:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.pmenu__item--exit:hover .pmenu__icon {
    color: var(--danger);
}

.pmenu__pay-btn .pmenu__icon {
    width: 15px;
    height: 15px;
    color: currentColor;
}

.auth-nav-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-nav-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.card {
    background: var(--surface);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
}

.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    border-color: rgba(37, 99, 235, 0.1);
}

.section-title {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--surface-3);
}

.dashboard-layout {
    display: grid;
    grid-template-columns:
        clamp(196px, 14.8vw, 240px)
        minmax(0, 1fr)
        clamp(258px, 19.6vw, 320px);
    gap: clamp(18px, 1.9vw, 28px);
}

.sidebar-right:empty {
    display: none;
}

@media (min-width: 851px) {
    .dashboard-layout:has(.sidebar-right:empty) {
        grid-template-columns: clamp(196px, 14.8vw, 240px) minmax(0, 1fr);
    }
}

@media (min-width: 851px) and (max-width: 1439px) {
    .dashboard-layout,
    .dashboard-layout:has(.sidebar-right:empty) {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .dashboard-layout > .content-area  { order: 1; }
    .dashboard-layout > .sidebar-right { order: 2; }
    .dashboard-layout > .sidebar-left  { order: 3; }

    .dashboard-layout > .sidebar-right {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        align-items: start;
    }

    .dashboard-layout > .sidebar-right > * { height: 100%; }

    .dashboard-layout .sidebar-left .card {
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
        gap: 18px;
        align-items: center;
    }

    .dashboard-layout .sidebar-left .section-title {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .dashboard-layout .category-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-layout .category-item {
        justify-content: flex-start;
        padding: 10px 16px;
        border-radius: 14px;
        border: 1px solid var(--border);
    }

    .dashboard-layout .category-item:hover {
        transform: none;
        background: var(--surface-2);
    }

    .dashboard-layout .category-item::before,
    .dashboard-layout .cat-arrow { display: none; }

    .dashboard-layout .sidebar-left .promo-block { margin-top: 0; }
}

.banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
    border-radius: 28px;
    padding: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
}

.banner::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.banner::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 60%);
    border-radius: 50%;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-20px, 20px);
    }
}

.banner-content {
    max-width: 420px;
    position: relative;
    z-index: 2;
}

.banner-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin-bottom: 28px;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.banner-image img {
    width: 180px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2));
    animation: float 4s ease-in-out infinite;
}

.banner .btn-primary {

    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.promo-banners {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 232px;
    padding: 32px;
    border: none;
    border-radius: 28px;
    overflow: hidden;
    color: #ffffff;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.promo-banner:hover {
    transform: translateY(-3px);
}

.promo-banner:active {
    transform: translateY(-1px);
}

.promo-banner__body {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.promo-banner__title {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    color: #ffffff;
}

.promo-banner__desc {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 22px;
    max-width: 34ch;
}

.promo-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 26px;
    border: none;
    border-radius: 40px;

    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    transition: gap 0.2s ease;
}

.promo-banner:hover .promo-banner__btn {
    gap: 14px;
}

.promo-banner__art {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-banner--tg {
    background: linear-gradient(135deg, #1c94cf 0%, #2aabee 52%, #63c8f5 100%);
    box-shadow: 0 10px 30px rgba(42, 171, 238, 0.28);
}

.promo-banner--tg.promo-banner--wheel {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 52%, #2563eb 100%);
    box-shadow: 0 10px 30px rgba(79, 70, 229, .3);
}

.promo-banner--tg.promo-banner--wheel:hover {
    box-shadow: 0 16px 38px rgba(79, 70, 229, .36);
}

.promo-banner--tg:hover {
    box-shadow: 0 16px 38px rgba(42, 171, 238, 0.34);
}

.promo-banner--tg .promo-banner__btn {
    color: #1c94cf;
}

.promo-banner__stat {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.promo-banner__stat.is-ready {
    background: rgba(251, 191, 36, .22);
    border-color: rgba(251, 191, 36, .45);
    color: #fff7e0;
}

.promo-banner__btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

.promo-banner:hover .promo-banner__btn:disabled {
    gap: 10px;
}

.promo-banner--tg::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -30px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 62%);
    border-radius: 50%;
}

.promo-banner--tg::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: 24%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 62%);
    border-radius: 50%;
}

.promo-banner__plane {

    overflow: visible;
    width: 132px;
    height: 132px;
    padding: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    color: #ffffff;
    animation: float 5s ease-in-out infinite;
}

.promo-banner--ref {
    background: linear-gradient(150deg, #5b21b6 0%, #7c3aed 48%, #a855f7 100%);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.28);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 28px;
}

.promo-banner--ref:hover {
    box-shadow: 0 16px 38px rgba(124, 58, 237, 0.34);
}

.promo-banner--ref .promo-banner__btn {
    color: #6d28d9;
}

.promo-banner--ref .promo-banner__title {
    font-size: clamp(19px, 1.5vw, 23px);
}

.promo-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.promo-stat {
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
}

.promo-stat b {
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.4px;
    color: #fff;
}

.promo-stat span {
    display: block;
    margin-top: 2px;
    max-width: 108px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .8);
}

.promo-banner--ref .promo-banner__desc {
    font-size: 13.5px;
    margin-bottom: 18px;
}

.promo-banner--ref::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 88% 12%, rgba(255, 255, 255, .20) 0%, transparent 60%),
        radial-gradient(70% 90% at 6% 96%, rgba(56, 189, 248, .18) 0%, transparent 62%);
    pointer-events: none;
}

.promo-banner--ref .promo-banner__art {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
}

.promo-banner--ref .promo-banner__art img {
    width: 116px;
    filter: drop-shadow(0 14px 26px rgba(15, 23, 42, 0.28));
    animation: float 5s ease-in-out infinite;

    animation-delay: -1.6s;
}

@media (max-width: 1100px) {
    .promo-banners {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 16px;
    }

    .promo-banner {
        min-height: 210px;
        padding: 26px;
    }

    .promo-banner__plane {
        width: 108px;
        height: 108px;
        padding: 22px;
    }

    .promo-banner--ref .promo-banner__art img { width: 98px; }
}

.banner .btn-primary:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.banner .btn-arrow {
    color: #2563eb;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.game-card {
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-soft);
}

.game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.15);
}

.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 22%);
    opacity: 0.9;
    transition: opacity 0.35s ease;
}

.game-card:hover::after {
    opacity: 1;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover img {
    transform: scale(1.06);
}

.game-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 15, 30, 0.94) 0%,
        rgba(10, 15, 30, 0.88) 32%,
        rgba(15, 23, 42, 0.45) 58%,
        rgba(15, 23, 42, 0.10) 80%,
        rgba(15, 23, 42, 0) 100%);
    z-index: 1;
    transition: background 0.35s ease;
}

.game-card:hover .game-card-overlay {
    background: linear-gradient(to top,
        rgba(10, 15, 30, 0.96) 0%,
        rgba(10, 15, 30, 0.92) 38%,
        rgba(15, 23, 42, 0.55) 62%,
        rgba(15, 23, 42, 0.18) 84%,
        rgba(15, 23, 42, 0.02) 100%);
}

.game-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    color: #ffffff;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover .game-card-content {
    transform: translateY(-4px);
}

.game-card h4 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: -0.4px;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.game-card .game-desc {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.72);
    margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card .game-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 10px;
}

.game-card .game-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.game-card .game-stat[hidden] {
    display: none;
}

.game-card .game-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.4;
}

.game-card .game-stat.is-off {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(180, 83, 9, 0.45);
    border: 1px solid rgba(253, 224, 71, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 700;
    color: rgba(254, 240, 138, 0.98);
    letter-spacing: 0.2px;
}

.game-card .game-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.game-card .game-online[hidden] {
    display: none;
}

.game-card .game-online::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: game-online-pulse 2.4s ease-out infinite;
}

@keyframes game-online-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .game-card .game-online::before { animation: none; }
}

.game-card .play-hint {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.game-card:hover .play-hint {
    opacity: 1;
    transform: translateY(0);
}

.feed-card { grid-column: 1 / -1; }

.feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.feed-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.feed-online b { color: var(--text); font-variant-numeric: tabular-nums; }

.feed-online__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
    animation: feedPulse 2s ease-out infinite;
}

@keyframes feedPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
    70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.feed-list { margin-top: 14px; }

.feed-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    transition: background .15s ease;
}

.feed-row:hover { background: var(--surface-2); }

.feed-row.is-win {
    background: linear-gradient(90deg, rgba(16, 185, 129, .09) 0%, rgba(16, 185, 129, 0) 70%);
    box-shadow: inset 3px 0 0 #10b981;
}

.feed-row.is-win:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, .15) 0%, rgba(16, 185, 129, .02) 70%);
}

.feed-row__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.feed-row__icon svg { width: 20px; height: 20px; }

.feed-row.is-win .feed-row__icon {
    background: rgba(16, 185, 129, .14);
    border-color: rgba(16, 185, 129, .3);
    color: #10b981;
}

.feed-row__who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.feed-row__who b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-row__who span { font-size: 11.5px; color: var(--text-faint); }

.feed-row__right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.feed-row__mult {
    min-width: 62px;
    text-align: center;
    padding: 3px 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #10b981;
    background: rgba(16, 185, 129, .12);
}

.feed-row__mult:empty { background: transparent; }

.feed-row__sums {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.feed-row__bet { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.feed-row__arrow { font-style: normal; font-size: 11px; color: var(--text-faint); }

.feed-row__win {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-faint);
    min-width: 82px;
    text-align: right;
}

.feed-row.is-win .feed-row__win { color: #10b981; }

@media (max-width: 560px) {
    .feed-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
    .feed-row__mult { display: none; }
    .feed-row__win { min-width: 0; }
}

.sidebar-left .card {
    padding: 20px;
    height: 100%;
}

.category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.category-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    transition: height 0.2s ease;
}

.category-item:hover {
    background: var(--surface-2);
    transform: translateX(4px);
}

.category-item.active {
    background: var(--surface-accent);
}

.category-item.active::before {
    height: 60%;
}

.cat-left {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.cat-left img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    transition: transform 0.2s ease;
}

.category-item:hover .cat-left img {
    transform: scale(1.1);
}

.cat-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--accent);
    transition: transform 0.2s ease;
}

.cat-icon svg { width: 100%; height: 100%; display: block; }

.category-item:hover .cat-icon {
    transform: scale(1.1);
}

.cat-arrow {
    color: var(--text-faint);
    font-size: 16px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(-8px);
}

.category-item:hover .cat-arrow,
.category-item.active .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

.category-item.active .cat-arrow {
    color: var(--accent);
}

.cat-soon {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-faint);
    background: var(--surface-3);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}

.promo-block {

    --promo-a: #3b82f6;
    --promo-b: #1d4ed8;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(140deg, var(--promo-a) 0%, var(--promo-b) 100%);
    box-shadow: 0 12px 26px -12px rgba(29, 78, 216, 0.75);
    font: inherit;
    text-align: left;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease;
}

.promo-block::before {
    content: '';
    position: absolute;
    top: -55px;
    right: -45px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.38) 0%, transparent 68%);
    pointer-events: none;
    transition: transform 0.35s ease;
}

.promo-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -14px rgba(29, 78, 216, 0.85);
}

.promo-block:hover::before {
    transform: scale(1.35);
}

.promo-block:active {
    transform: translateY(-1px) scale(0.99);
}

.promo-block:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

.promo-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transform: translateX(-150%) skewX(-18deg);
    pointer-events: none;
    animation: promoShine 5s ease-in-out infinite;
}

@keyframes promoShine {
    0%, 62%   { transform: translateX(-150%) skewX(-18deg); }
    92%, 100% { transform: translateX(320%) skewX(-18deg); }
}

.promo-top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.promo-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.promo-icon svg {
    width: 26px;
    height: 26px;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-block:hover .promo-icon svg {
    transform: scale(1.12) rotate(-6deg);
}

.promo-block.is-ready .promo-icon {
    animation: promoPulse 2.6s ease-in-out infinite;
}

@keyframes promoPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(255, 255, 255, 0.5); }
    55%      { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 0 0 10px rgba(255, 255, 255, 0); }
}

.promo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.promo-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.promo-desc {
    font-size: 11.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.82);
}

.promo-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    color: #1e40af;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 6px 14px -6px rgba(2, 32, 90, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-block:hover .promo-cta {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px -7px rgba(2, 32, 90, 0.65);
}

.promo-cta__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #1e40af;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.promo-cta__count[hidden] {
    display: none;
}

.promo-block.is-empty {
    --promo-a: #94a3b8;
    --promo-b: #64748b;
    box-shadow: 0 10px 22px -14px rgba(71, 85, 105, 0.8);
}

.promo-block.is-empty:hover {
    box-shadow: 0 14px 28px -14px rgba(71, 85, 105, 0.85);
}

.promo-block.is-empty .promo-shine {
    display: none;
}

.promo-block.is-empty .promo-cta {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .promo-shine,
    .promo-block.is-ready .promo-icon {
        animation: none;
    }
    .promo-block,
    .promo-block::before,
    .promo-cta,
    .promo-icon svg {
        transition: none;
    }
    .promo-block:hover {
        transform: none;
    }
}

.sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quick-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.quick-item {
    display: block;
    width: 100%;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    padding: 14px 6px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface-2);
    border: 1px solid transparent;
}

.quick-item:hover {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

.quick-item__icon {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px auto;
    color: var(--text-dim);
    transition: transform 0.2s ease, color 0.2s ease;
}

.quick-item__icon svg { width: 100%; height: 100%; display: block; }

.quick-item:hover .quick-item__icon {
    transform: scale(1.1);
    color: var(--accent);
}

.quick-item span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    transition: color 0.2s ease;
}

.quick-item:hover span {
    color: var(--accent);
}

.level-card {
    padding-bottom: 24px;
}

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

.level-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}

.level-sub {
    font-size: 13px;
    color: var(--text-faint);
    font-weight: 500;
    margin-top: 2px;
}

.level-icon {
    display: block;
    width: 60px;
    height: 60px;
    flex: none;
    color: var(--accent);
    transition: transform 0.3s ease;
}

.level-icon svg { width: 100%; height: 100%; display: block; }

.level-card:hover .level-icon {
    transform: rotate(-8deg) scale(1.05);
}

.progress-container {
    height: 8px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--violet) 100%);
    border-radius: 10px;
    width: 60%;
    position: relative;

    overflow: hidden;

    box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    animation: shimmer 2.6s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
    }
}

.home-bonus__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-bonus__num {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.home-bonus__label {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-faint);
}

.home-bonus__icon {
    width: 42px;
    height: 42px;
    flex: none;
    color: var(--accent);
}

.home-bonus__hint {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-dim);
}

.home-bonus__hint.is-ready {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
    font-weight: 600;
}

.vip-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: #fff;
    border: 1px solid rgba(129, 140, 248, .28);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(129, 140, 248, .45) 0%, transparent 55%),
        radial-gradient(90% 70% at 0% 100%, rgba(56, 189, 248, .18) 0%, transparent 60%),
        linear-gradient(150deg, #1e1b4b 0%, #312e81 55%, #3730a3 100%);
    box-shadow: 0 12px 36px rgba(49, 46, 129, .35);
}

.vip-card::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 65%);
    pointer-events: none;
}

.vip-gem {
    position: absolute;
    top: -18px;
    right: -22px;
    width: 132px;
    height: 132px;
    color: #fff;
    opacity: .13;
    pointer-events: none;
}

.vip-eyebrow {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(199, 210, 254, .75);
}

.vip-title {
    position: relative;
    z-index: 1;
    margin-top: 2px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
}

.vip-amount {
    position: relative;
    z-index: 1;
    margin-top: 14px;
}

.vip-amount b {
    display: block;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.6px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.vip-amount span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(199, 210, 254, .8);
}

.vip-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.vip-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.vip-reward {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 11px 7px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.vip-reward[hidden] { display: none; }

.vip-reward__ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    color: #fbbf24;
}

.vip-reward__ico svg { width: 18px; height: 18px; }

.vip-card .btn-primary {
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #1e1b4b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.vip-card .btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.4);
}

.vip-card .btn-arrow {
    color: #1e1b4b;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.section-header-left h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.section-header-left p {
    font-size: 14px;
    color: var(--text-dim);
    font-weight: 500;
    line-height: 1.4;
}

.link-view {
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

.link-view:hover {
    background: var(--surface-accent);
    gap: 10px;
}

.link-view .arrow {
    transition: transform 0.2s ease;
    font-size: 16px;
}

.link-view:hover .arrow {
    transform: translateX(3px);
}

.game-wrapper {
    background: var(--surface);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.game-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-wrapper:hover::before {
    opacity: 1;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
}

.game-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.game-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.game-title-wrap:hover .game-title-icon-wrap {
    transform: scale(1.05);
}

.game-title-icon-wrap {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--surface-accent) 0%, var(--violet-soft) 100%);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    transition: all 0.3s ease;
}

.game-title-icon-wrap img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.game-title-text h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
}

.game-title-text p {
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 4px;
    font-weight: 500;
}

.game-balance-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    padding: 8px 14px 8px 18px;
    border-radius: 40px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06);
    backdrop-filter: blur(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-balance-wrap:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.game-balance-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.game-balance-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-balance-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-dim);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
}

.game-balance-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.06);
}

.game-balance-btn.highlight {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--accent);
}

.game-balance-btn.highlight:hover {
    background: rgba(37, 99, 235, 0.14);
    color: var(--accent-hover);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1);
}

.game-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    background: var(--surface);
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 28px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(37, 99, 235, 0.04);
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.control-group + .control-group::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(180deg, transparent, #94a3b8, transparent);
    opacity: 0.35;
}

.control-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

.control-select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 32px 10px 14px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    outline: none;
    appearance: none;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2364748b' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.control-select:hover {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1);
}

.control-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.stepper-wrap {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    width: 100%;
}

.stepper-wrap:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.1);
}

.stepper-btn {
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-dim);
    font-weight: 700;
    transition: all 0.2s ease;
    line-height: 1;
}

.stepper-btn:hover {
    background: var(--surface-accent);
    color: var(--accent);
}

.stepper-val {
    flex: 1;
    padding: 10px 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    text-align: center;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    background: var(--surface);
}

.next-win-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--surface-accent) 0%, var(--surface-2) 100%);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.next-win-display span {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

.next-win-display strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--ok);
}

.game-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 520px;
    margin: 0 auto 40px auto;
}

.cell {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface-3) 100%);
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 28px;
    font-weight: 700;
}

.cell:hover:not(.revealed-bomb):not(.revealed-safe) {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cell.revealed-bomb {
    background: linear-gradient(145deg, var(--danger-soft) 0%, var(--danger-soft) 100%);
    border-color: var(--danger-border);
    animation: shake 0.5s ease-in-out;
}

.cell.revealed-bomb img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    animation: pop-bomb 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cell.revealed-safe {
    background: linear-gradient(145deg, var(--ok-soft) 0%, var(--ok-soft) 100%);
    border-color: var(--ok-border);
}

.cell.revealed-safe::after {
    content: '✓';
    color: var(--ok);
    font-weight: 700;
    font-size: 24px;
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-4px);
    }
    40% {
        transform: translateX(4px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
}

@keyframes pop-bomb {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    70% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.mines-coefficients {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-2);
    border-radius: 16px;
    border: 1px solid var(--border-soft);
}

.mines-coefficients-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.mines-coefficients-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}

.mines-coefficient-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    transform-origin: center center;
}

.mines-coefficient-item.rotated {
    transform: rotate(360deg);
}

.mines-coefficient-item.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-accent);
}

.mines-coefficient-item.rotated {
    transform: rotate(360deg);
}

.mines-coefficient-item.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-accent);
}

.mines-coefficient-item .coeff-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.mines-coefficient-item.active .coeff-val {
    color: var(--accent);
}

.game-footer-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
}

.stat-value.highlight {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.history-table tr {
    border-bottom: 1px solid var(--border-soft);
    transition: all 0.2s ease;
}

.history-table tr:last-child {
    border-bottom: none;
}

.history-table td {
    padding: 12px 0;
    font-size: 13px;
    vertical-align: middle;
}

.history-table td:first-child {
    font-weight: 700;
}

.history-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.history-badge.win {
    background: var(--ok-soft);
    color: var(--ok);
}

.history-badge.lose {
    background: var(--danger-soft);
    color: var(--danger);
}

.btn-show-all {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: none;
    background: var(--surface-2);
    border-radius: 16px;
    font-weight: 600;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-all:hover {
    background: var(--surface-accent);
}

.fairness-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.fairness-block p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 200px;
}

.fairness-block .shield-icon {
    width: 40px;
    height: 40px;
    background: var(--surface-accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent);
    font-size: 20px;
}

.btn-details {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

.btn-details:hover {
    background: var(--surface-2);
    border-color: var(--accent);
}

.stats-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.stat-row .label {
    color: var(--text-dim);
}

.stat-row .value {
    font-weight: 600;
    color: var(--text);
}

.stat-row--go {
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.stat-row--go:hover {
    background: var(--surface-2);
}

.stat-row--go:hover .label {
    color: var(--accent);
}

.stat-row--go .label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
}

.stat-row--go .value {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.bubble-scene-card {
    background: var(--surface-2);
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bubble-stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bubble-main {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-accent) 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.12), inset 0 -8px 16px rgba(0, 0, 0, 0.02);

    border: 1px solid var(--border);
    transition: transform 0.1s linear;
}

.bubble-main .multiplier {
    font-size: 44px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.bubble-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.bubble-stat {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bubble-stat .lbl {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bubble-stat .val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.bubble-stat .val.green {
    color: var(--ok);
}

.bubble-control-card {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}

.bet-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bet-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.bet-input-wrap {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px;
    transition: all 0.2s ease;
}

.bet-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.1);
}

.bet-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    width: 100%;
}

.bet-input-wrap input::-webkit-outer-spin-button,
.bet-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.bet-input-wrap .currency {
    padding-right: 14px;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
}

.bet-quick-btns {
    display: flex;
    gap: 8px;
}

.bet-quick-btns button {
    flex: 1;
    padding: 8px 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bet-quick-btns button:hover,
.bet-quick-btns button.active {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-big-play {
    width: 100%;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-big-play:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-big-play:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-big-play .shortcut {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 500;
}

.autowin-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.autowin-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.stepper-horizontal {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
}

.stepper-horizontal button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-dim);
    transition: all 0.2s ease;
}

.stepper-horizontal button:hover {
    background: var(--surface-accent);
    color: var(--accent);
}

.stepper-horizontal .val {
    min-width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.bubble-advanced {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
    overflow: hidden;
}

.bubble-advanced summary {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.bubble-advanced summary::-webkit-details-marker {
    display: none;
}

.bubble-advanced summary:hover {
    background: var(--surface-2);
}

.bubble-advanced summary::after {
    content: '+';
    font-size: 18px;
    color: var(--accent);
    font-weight: 700;
}

.bubble-advanced[open] summary::after {
    content: '−';
}

.bubble-advanced-body {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bubble-advanced-body .dice-hash-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bubble-advanced-body .dice-hash-label {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}

.bubble-advanced-body .dice-hash-code {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 12px;
    color: var(--text-2);
    background: var(--surface-2);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    word-break: break-all;
}

.bubble-advanced-body .dice-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: transform 0.2s ease;
}

.bubble-advanced-body .dice-icon-btn:hover {
    transform: scale(1.1);
}

.bubble-advanced-body .dice-verify-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bubble-advanced-body .dice-verify-btn:hover {
    background: var(--surface-accent);
}

.recent-bubbles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.recent-bubble-item {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.recent-bubble-item.blue {
    color: var(--accent);
    background: var(--surface-accent);
}

.recent-bubble-item.red {
    color: var(--danger);
    background: var(--danger-soft);
}

.recent-bubble-item.green {
    color: var(--ok);
    background: var(--ok-soft);
}

@media (max-width: 1024px) {

    .game-board {
        max-width: 100%;
        gap: 10px;
    }
}

@media (max-width: 850px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .top-nav {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .nav-center {
        width: 100%;
        justify-content: space-around;
    }
    .bubble-control-card {
        grid-template-columns: 1fr;
    }
    .bubble-scene-card {
        flex-direction: column;
    }
    .bubble-stats-row {
        grid-template-columns: 1fr;
    }
    .dice-controls {
        grid-template-columns: 1fr 1fr;
    }
    .dice-main-card {
        grid-template-columns: 1fr;
    }
    .how-to-play .steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .top-nav {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .nav-center {
        width: 100%;
        justify-content: space-around;
    }
    .banner {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }
    .banner-content {
        margin-bottom: 24px;
        max-width: 100%;
    }
    .banner-image img {
        width: 120px;
    }
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-start-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .game-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .game-controls {
        grid-template-columns: minmax(0, 1fr);
    }
    .game-footer-stats {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 16px;
    }
}

.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.hamburger:hover {
    background: var(--surface-3);
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-overlay.mobile-open {
    display: block;
    opacity: 1;
}

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 8px 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    color: var(--text-faint);
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 600;
    border-radius: 14px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    transition: all 0.2s ease;
    filter: grayscale(0.3);
}

.mobile-nav-item svg {
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.mobile-nav-item[aria-expanded="true"] svg {
    color: var(--accent);
}

.mobile-nav-item.active {
    color: var(--accent);
}

.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.mobile-nav-item.active img {
    opacity: 1;
    filter: grayscale(0);
}

.mobile-nav-item.active svg { color: var(--accent); }

.mobile-nav-item:active {
    transform: scale(0.92);
    background: var(--surface-2);
}

.sidebar-close-btn {
    display: none;
}

@media (max-width: 768px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sidebar-left {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 999;
        background: var(--surface);
        padding: 16px;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        transform: translateY(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-left.mobile-open {
        transform: translateY(0);
    }

    .sidebar-close-btn {
        display: flex;
    }

    .sidebar-left .card {
        padding: 0;
    }

    .sidebar-right {
        display: none;
    }

    .top-nav {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 10px 16px;
        position: sticky;
        top: 0;
        background: var(--surface);
        backdrop-filter: blur(12px);
        z-index: 1000;
        border-bottom: 1px solid var(--border-soft);
    }

    .logo {
        font-size: 18px;
    }

    .logo img {
        height: 24px;
    }

    .hamburger {
        display: flex;
    }

    .nav-center {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background: var(--surface);
        padding: 0;
        gap: 4px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        justify-content: flex-start;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
    }

    .nav-center.mobile-open {
        transform: translateX(0);
    }

    .nav-link {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
        justify-content: flex-start;
        border-radius: 16px;
        transition: all 0.2s ease;
        gap: 12px;
        margin: 0 12px;
    }

    .nav-link:hover {
        background: var(--surface-2);
    }

    .nav-link.active {
        background: var(--surface-accent);
        color: var(--accent);
    }

    .nav-right {
        margin-left: auto;
    }

    .balance-pill__sum {
        min-width: 0;
        white-space: nowrap;
    }

    .game-wrapper {
        padding: 16px;
        border-radius: 20px;
    }

    .game-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .game-controls {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .control-group + .control-group::before {
        display: none;
    }

    .dice-controls {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dice-main-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bubble-scene-card {
        flex-direction: column;
    }

    .bubble-stage {
        height: 260px;
    }

    .bubble-main {
        width: 140px;
        height: 140px;
    }

    .bubble-main .multiplier {
        font-size: 40px;
    }

    .bubble-stage .axis-line {
        font-size: 10px;
    }

    .bubble-stats-row {
        width: 100%;
        flex-direction: row;
        gap: 12px;
    }

    .bubble-stat {
        flex: 1;
    }

    .bubble-control-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .recent-bubbles {
        flex-wrap: wrap;
    }

    .bubble-advanced {
        margin-bottom: 16px;
    }

    .dice-controls {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dice-result-card {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        text-align: left;
        align-items: center;
    }

    .dice-result-label {
        width: 100%;
        margin-bottom: 4px;
    }

    .dice-result-value {
        font-size: 28px;
        margin-bottom: 0;
    }

    .dice-actions {
        width: 100%;
    }

    .dice-number-display {
        padding: 14px;
    }

    .dice-number-value {
        font-size: 36px;
    }

    .dice-main-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dice-advanced {
        margin-bottom: 16px;
    }

    .input-group input {
        font-size: 16px;
    }

    .app-container {
        padding-bottom: 80px;
    }

    .mobile-bottom-nav {
        display: flex;
    }
}

@media (max-width: 480px) {
    .balance-pill {
        padding: 3px 4px;
        gap: 2px;
    }

    .balance-pill__btn {
        width: 26px;
        height: 26px;
    }

    .balance-pill__btn svg {
        width: 13px;
        height: 13px;
    }

    .balance-pill__sum {
        font-size: 12px;
        min-width: 0;
        padding: 0 3px;
    }

    .avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .quick-start-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bubble-stage {
        height: 220px;
    }

    .bubble-main {
        width: 110px;
        height: 110px;
    }

    .bubble-main .multiplier {
        font-size: 30px;
    }

    .bubble-stage .axis-line {
        font-size: 9px;
        padding: 0 4px;
    }

    .bubble-small-1,
    .bubble-small-2,
    .bubble-small-3 {
        display: none;
    }

    .bubble-scene-card {
        padding: 16px;
    }

    .dice-result-value {
        font-size: 24px;
    }

    .dice-result-label {
        font-size: 12px;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .game-card {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }

    .game-card h4 {
        font-size: 16px;
    }

    .game-card-content {
        padding: 14px;
    }

    .mini-btn {
        padding: 5px 4px;
        font-size: 11px;
    }

    .quick-row {
        gap: 4px;
    }

    .dice-controls {
        gap: 12px;
    }

    .game-footer-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    .recent-bubbles {
        gap: 8px;
    }

    .recent-bubble-item {
        font-size: 12px;
        padding: 6px 10px;
    }

    .quick-row {
        margin-top: 6px;
    }

    .dice-field-label {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .bet-quick-btns button {
        padding: 5px 2px;
        font-size: 11px;
    }

    .bubble-control-card {
        padding: 14px;
        gap: 12px;
    }

    .btn-big-play {
        padding: 14px;
        font-size: 16px;
    }

    .game-wrapper {
        padding: 12px;
        border-radius: 16px;
    }

    .game-header {
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    .game-title-text h1 {
        font-size: 20px;
    }

    .game-title-wrap {
        gap: 10px;
    }

    .game-title-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .dice-field {
        gap: 6px;
    }

    .input-group input {
        font-size: 15px;
        padding: 10px 12px;
    }

    .input-group .currency-suffix,
    .input-group .percent-suffix {
        font-size: 14px;
        padding-right: 10px;
    }

    .hash-box {
        padding: 10px 14px;
    }

    .hash-box .hash-text {
        font-size: 11px;
    }

    .main-action-btn {
        padding: 14px;
        font-size: 16px;
    }

    body {
        padding: 0;
    }

    .app-container {
        padding: 0;
        border-radius: 0;
    }

    .dashboard-layout {
        padding: 12px;
    }
}

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.auth-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal {
    background: var(--surface);
    border-radius: clamp(20px, 3vw, 28px);
    padding: 0;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

@media (min-width: 851px) {
    .auth-modal {
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);

        display: flex;
        flex-direction: column;
    }

    .auth-container {

        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (min-width: 900px) {

    .auth-modal--split {
        grid-template-rows: minmax(0, 1fr);
    }

    .auth-modal--split .auth-container,
    .auth-modal--split .auth-perks {
        min-height: 0;
        overflow-y: auto;
    }
}

@media (min-width: 900px) {
    .auth-modal--split {
        max-width: 800px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 306px;
        align-items: stretch;
    }
}

.auth-perks {
    display: flex;
    flex-direction: column;
    gap: 14px;

    background: linear-gradient(158deg, #3b7ceb 0%, #2158d8 52%, #16307f 100%);
    color: #fff;

    margin-top: 20px;
    padding: 20px 16px;
    border-radius: 18px;

    position: relative;
    overflow: hidden;
}

.auth-perks::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.auth-perks__brand,
.auth-perks__sub { display: none; }

.auth-perks__title {
    position: relative;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

@media (min-width: 900px) {

    .auth-perks {
        gap: 22px;
        margin-top: 0;
        padding: 30px 24px;
        border-radius: 0;
    }
}

.auth-perks__head { position: relative; }

@media (min-width: 900px) {

    .auth-perks__brand { display: flex; }
    .auth-perks__sub { display: block; }
    .auth-perks__title { font-size: 20px; }

}

.auth-perks__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.auth-perks__brand img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 6px 18px rgba(9, 24, 60, .28);
}

.auth-perks__brand .logo-name {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

.auth-perks__brand .logo-x {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: inherit;
}

.auth-perks__title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

.auth-perks__sub {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}

.auth-perks__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-perks__list li {
    display: flex;

    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .10);
}

.auth-perks__icon {
    flex: none;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;

    position: relative;
    display: block;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.auth-perks__icon svg {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: block;

    width: 22px;
    height: 22px;
    margin: 0;

    stroke-width: 2.1;
}

.auth-perks__list b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.auth-perks__list span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .74);
}

@media (min-width: 900px) {
    .auth-modal--split .auth-modal-close {
        border-color: rgba(255, 255, 255, .35);
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .auth-modal--split .auth-modal-close:hover {
        background: rgba(255, 255, 255, .28);
        color: #fff;
    }
}

.auth-modal-overlay.open .auth-modal {
    transform: translateY(0) scale(1);
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.auth-modal-close:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(90deg);
}

.auth-container {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-header {
    text-align: center;
    margin-bottom: 4px;
}

.auth-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
    margin: 0 0 6px;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.4;
}

.auth-tabs {
    display: flex;
    background: var(--surface-2);
    border-radius: 14px;
    padding: 4px;
    position: relative;
}

.auth-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 12px;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

.auth-tab.active {
    color: var(--text);
}

.auth-tab-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(226, 232, 240, 0.8);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.auth-tab[data-mode="register"].active ~ .auth-tab-indicator {
    transform: translateX(100%);
}

.auth-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#regularAuthForm,
#telegramAuthBlock {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-message {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: none;
    animation: fadeIn 0.2s ease;
}

.auth-message.success {
    display: block;
    background: var(--ok-soft);
    color: var(--ok);
}

.auth-message.error {
    display: block;
    background: var(--danger-soft);
    color: var(--danger);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: none;
    letter-spacing: 0.2px;
}

.auth-input-wrap {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.2s ease;
}

.auth-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.1);
}

.auth-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-faint);
    flex-shrink: 0;
}

.auth-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    width: 100%;
    min-width: 0;
}

.auth-input::placeholder {
    color: var(--text-faint);
    font-weight: 500;
}

.auth-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.auth-password-toggle:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.auth-field-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.auth-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.auth-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-submit:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-btn-icon {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.auth-submit:hover .auth-btn-icon {
    transform: translateX(3px);
}

.auth-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

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

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 600;
    text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--surface-3);
}

.auth-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.auth-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.auth-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

}

.auth-footer {
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.auth-footer-text {
    font-weight: 500;
}

.auth-footer-link {
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
}

.auth-footer-link:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-container {
        padding: 24px;
    }

    .auth-modal {
        max-width: 100%;
        border-radius: 20px;
    }
}

.auth-telegram-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
}

.auth-telegram-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

.auth-back-btn {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-back-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.auth-telegram-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 4px 0;
}

.auth-telegram-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-accent);
    color: #0ea5e9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-telegram-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.auth-telegram-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.4;
}

.auth-telegram-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.auth-telegram-input {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text);
    text-align: center;
    outline: none;
    min-width: 0;
}

.auth-telegram-copy {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.auth-telegram-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-accent);
}

.auth-telegram-btn {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    background: #26A5E4;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(38, 165, 228, 0.25);
}

.auth-telegram-btn:hover {
    background: #1e96c8;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(38, 165, 228, 0.3);
}

.auth-telegram-btn svg {
    flex-shrink: 0;
}

.auth-quick {
    width: 100%;
    padding: 13px;
    border: 1.5px solid var(--accent);
    border-radius: 14px;
    background: var(--surface-accent);
    color: var(--accent-hover);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.2s ease;
}

.auth-quick:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.auth-quick:active {
    transform: translateY(0);
}

.auth-quick:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-quick__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.auth-quick .auth-loader {
    border-color: rgba(37, 99, 235, 0.25);
    border-top-color: var(--accent);
}

.auth-quick__hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-faint);
    text-align: center;
}

.auth-quick__hint a {
    color: var(--text-dim);
    text-decoration: underline;
}

.auth-quick__hint a:hover {
    color: var(--accent);
}

.auth-consent {
    margin: 4px 0 2px;
}

.auth-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.auth-consent__box {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

.auth-consent__text {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-dim);
}

.auth-consent__text a {
    color: var(--accent);
    text-decoration: none;
}

.auth-consent__text a:hover {
    text-decoration: underline;
}

.auth-quick__field {
    width: 100%;
    text-align: left;
}

.auth-quick__field .auth-label {
    display: block;
    margin-bottom: 6px;
}

.auth-quick__warn {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn-strong);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

.auth-quick__copy-all {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-quick__copy-all:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-accent);
}

.quick-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
}

.bx-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 32px 34px;
    margin-bottom: 18px;
    border-radius: 26px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, #172554 0%, #1e40af 48%, #2563eb 100%);
    box-shadow: 0 14px 38px rgba(23, 37, 84, 0.28);
}

.bx-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -6%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, transparent 62%);
    pointer-events: none;
}

.bx-hero__body {
    position: relative;
    z-index: 1;
    max-width: 460px;
}

.bx-hero__kicker {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.bx-hero__title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #ffffff;
}

.bx-hero__sub {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.bx-hero__spins {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
}

.bx-hero__num {
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.45);
}

.bx-hero__unit {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}

.bx-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 14px;
    background: #fbbf24;
    color: #451a03;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(251, 191, 36, 0.32);
    transition: all 0.2s ease;
}

.bx-hero__btn:hover {
    background: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(251, 191, 36, 0.42);
}

.bx-hero__btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.2s ease;
}

.bx-hero__btn:hover svg { transform: translateX(3px); }

.bx-hero__art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.bx-prizes {
    display: grid;

    place-items: center;
    width: 260px;
    height: 190px;
}

.bx-prize {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 128px;
    height: 128px;
    border-radius: 22px;
    color: #ffffff;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 16px 34px rgba(8, 20, 55, 0.34);
    animation: bxPrizeFloat 6s ease-in-out infinite;
}

.bx-prize__val {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bx-prize__unit {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    opacity: 0.82;
}

.bx-prize--cash {
    transform: rotate(-15deg) translate(-58px, 12px);
    background: linear-gradient(150deg, #3b82f6 0%, #1d4ed8 100%);
    animation-delay: 0s;
}

.bx-prize--fs {
    transform: rotate(14deg) translate(58px, 4px);
    background: linear-gradient(150deg, #22d3ee 0%, #0891b2 100%);
    animation-delay: 1.1s;
}

.bx-prize--gold {
    z-index: 1;
    width: 142px;
    height: 142px;
    transform: translateY(-14px);
    background: linear-gradient(150deg, #fcd34d 0%, #d97706 100%);
    color: var(--warn-strong);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 44px rgba(180, 83, 9, 0.42);
    animation-delay: 0.5s;
}

.bx-prize--gold .bx-prize__val { font-size: 29px; }
.bx-prize--gold .bx-prize__unit { opacity: 0.72; }

@keyframes bxPrizeFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

.bx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.bx-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bx-stat:hover {
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.bx-stat__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
}

.bx-stat__value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.bx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.bx-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bx-card {
    --bx-accent: #2563eb;
    --bx-accent-soft: #eff6ff;

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bx-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bx-accent);
}

.bx-card:hover {
    border-color: var(--border);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.bx-card--promo  { --bx-accent: #7c3aed; --bx-accent-soft: #f5f3ff; }
.bx-card--wheel  { --bx-accent: #f59e0b; --bx-accent-soft: #fffbeb; }
.bx-card--tg     { --bx-accent: #2aabee; --bx-accent-soft: #eff9fe; }

.bx-levels {
    --lvb-a: #60a5fa;
    --lvb-b: #1d4ed8;
    --lvb-ink: #ffffff;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon text btn"
        "prog prog prog";
    align-items: center;
    gap: 16px 18px;
    margin-top: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    overflow: hidden;
    color: var(--lvb-ink);
    background: linear-gradient(135deg, var(--lvb-a) 0%, var(--lvb-b) 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
}

.bx-levels::before {
    content: '';
    position: absolute;
    top: -70%;
    right: -5%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 62%);
    pointer-events: none;
}

.bx-levels--novice  { --lvb-a: #60a5fa; --lvb-b: #1d4ed8; }
.bx-levels--premium { --lvb-a: #a78bfa; --lvb-b: #6d28d9; }

.bx-levels--vip {
    --lvb-a: #fcd34d;
    --lvb-b: #d97706;
    --lvb-ink: #451a03;
}

.bx-levels__icon {
    grid-area: icon;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.bx-levels__icon svg {
    width: 28px;
    height: 28px;
}

.bx-levels__text {
    grid-area: text;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.bx-levels__title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--lvb-ink);
}

.bx-levels__sub {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.78;
}

.bx-levels__btn {
    grid-area: btn;
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 13px;
    background: var(--surface);
    color: var(--lvb-b);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(8, 20, 55, 0.2);
    transition: all 0.2s ease;
}

.bx-levels__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(8, 20, 55, 0.28);
}

.bx-level {
    grid-area: prog;
    position: relative;
    z-index: 1;
    padding: 13px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bx-level__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.bx-level__name {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--lvb-ink);
    white-space: nowrap;
}

.bx-level__next {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
}

.bx-level__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.bx-level__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--lvb-ink);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
    transition: width 0.5s ease;
}

.bx-card__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
}

.bx-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--bx-accent-soft);
    color: var(--bx-accent);
}

.bx-card__icon svg {
    width: 24px;
    height: 24px;
}

.bx-card__title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
}

.bx-card__sub {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-faint);
}

.bx-card__link {
    align-self: center;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bx-accent);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    transition: opacity 0.2s ease;
}

.bx-card__link:hover { opacity: 0.75; }

.bonus-tile__desc {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-dim);
}

.bonus-tile__stat {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-faint);
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.bonus-tile__stat--ready,
.bonus-tile__stat.is-ready {
    color: var(--ok-strong);
    background: var(--ok-soft);
    border-color: var(--ok-border);
}

.bx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 13px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bx-btn--wide {
    width: 100%;
    margin-top: auto;
}

.bx-btn--accent {
    background: var(--bx-accent);
    color: #ffffff;
}

.bx-btn--accent:hover {
    filter: brightness(0.93);
    transform: translateY(-1px);
}

.bx-btn--accent:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
    filter: none;
}

@media (max-width: 900px) {
    .bx-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-grid .bx-col { order: -1; }

    .bx-levels {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon text"
            "prog prog"
            "btn  btn";
        row-gap: 14px;
    }

    .bx-levels__btn { width: 100%; }
}

@media (max-width: 700px) {
    .bx-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 24px 20px;
        text-align: center;
    }

    .bx-hero__body { max-width: none; }

    .bx-hero__spins { justify-content: center; }

    .bx-hero__art { order: -1; }

    .bx-prizes {
        width: 230px;
        height: 150px;
    }

    .bx-prize {
        width: 104px;
        height: 104px;
        border-radius: 18px;
    }

    .bx-prize--gold { width: 116px; height: 116px; }
    .bx-prize--cash { transform: rotate(-15deg) translate(-48px, 10px); }
    .bx-prize--fs   { transform: rotate(14deg) translate(48px, 4px); }

    .bx-prize__val { font-size: 21px; }
    .bx-prize--gold .bx-prize__val { font-size: 23px; }

    .bx-hero__btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .bx-hero__num { font-size: 38px; }
    .bx-stat__value { font-size: 19px; }
    .bx-card { padding: 18px; }

    .bx-levels {
        padding: 18px;
        border-radius: 18px;
        gap: 12px 14px;
    }

    .bx-levels__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .bx-levels__icon svg { width: 23px; height: 23px; }
    .bx-levels__title { font-size: 15.5px; }

    .bx-level__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .bx-level__next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .bx-prize { animation: none; }
}

.level-next {
    margin-top: 10px;
}

.lv-hero {
    --lv-a: #3b82f6;
    --lv-b: #1d4ed8;
    --lv-ink: #ffffff;

    position: relative;
    padding: 26px 28px;
    margin-bottom: 16px;
    border-radius: 24px;
    overflow: hidden;
    color: var(--lv-ink);
    background: linear-gradient(135deg, var(--lv-a) 0%, var(--lv-b) 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
}

.lv-hero::before {
    content: '';
    position: absolute;
    top: -55%;
    right: -12%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 62%);
    pointer-events: none;
}

.lv-hero--novice  { --lv-a: #60a5fa; --lv-b: #1d4ed8; }
.lv-hero--premium { --lv-a: #a78bfa; --lv-b: #6d28d9; }

.lv-hero--vip {
    --lv-a: #fcd34d;
    --lv-b: #d97706;
    --lv-ink: #451a03;
}

.lv-hero__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.lv-hero__icon {
    width: 60px;
    height: 60px;
    flex: none;
    color: currentColor;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.3));
}

.lv-hero__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.7;
}

.lv-hero__name {
    margin-top: 2px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: var(--lv-ink);
}

.lv-hero__wagered {
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.82;
}

.lv-hero__wagered b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lv-progress {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.lv-progress__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13.5px;
    margin-bottom: 9px;
    opacity: 0.9;
}

.lv-progress__row strong { font-weight: 800; }

.lv-progress__left {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-progress__bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.lv-progress__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
    transition: width 0.5s ease;
}

.lv-progress__hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.72;
    font-variant-numeric: tabular-nums;
}

.lv-progress--max {
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    opacity: 0.9;
}

.lv-wager {
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
}

.lv-wager__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lv-wager__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--warn-strong);
}

.lv-wager__sum {
    font-size: 20px;
    font-weight: 900;
    color: var(--warn-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-wager__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--warn-soft);
    overflow: hidden;
}

.lv-wager__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.5s ease;
}

.lv-wager__hint {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--warn-strong);
    font-variant-numeric: tabular-nums;
}

.lv-wager__text {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--warn-strong);
}

.lv-cashback[hidden] { display: none; }

.lv-cashback {
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--ok-soft);
    border: 1px solid var(--ok-border);
}

.lv-cashback--locked {
    background: var(--surface-2);
    border-color: var(--border);
}

.lv-cashback__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lv-cashback__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--ok-strong);
}

.lv-cashback--locked .lv-cashback__title { color: var(--text); }

.lv-cashback__pct {
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ok);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 800;
}

.lv-cashback--locked .lv-cashback__pct {
    background: var(--border);
    color: var(--text-dim);
}

.lv-cashback__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
}

.lv-cashback__text b { color: var(--text); }

.lv-cashback__calc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ok-soft);
    border: 1px solid var(--ok-border);
}

.lv-cashback__calc > div {
    padding: 11px 12px;
    background: var(--surface);
    text-align: center;
    min-width: 0;
}

.lv-cashback__calc span {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 3px;
}

.lv-cashback__calc b {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.lv-cashback__sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.lv-cashback__sum span {
    font-size: 13px;
    font-weight: 600;
    color: var(--ok-strong);
}

.lv-cashback__sum b {
    font-size: 24px;
    font-weight: 900;
    color: var(--ok-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-cashback__btn {
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border: 0;
    border-radius: 13px;
    background: var(--ok);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lv-cashback__btn:hover {
    background: var(--ok);
    transform: translateY(-1px);
}

.lv-cashback__btn:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
}

.lv-cashback__done,
.lv-cashback__none {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.lv-cashback__done {
    background: var(--ok-soft);
    color: var(--ok-strong);
}

.lv-cashback__none {
    background: var(--surface-3);
    color: var(--text-dim);
}

.lv-cashback__head + .lv-cashback__done,
.lv-cashback__head + .lv-cashback__none {
    margin-top: 0;
}

.lv-cashback__months {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.lv-cbm {
    padding: 14px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--ok-border);
}

.lv-cbm__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lv-cbm__period {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
}

.lv-cbm__amount {
    flex: none;
    font-size: 18px;
    font-weight: 900;
    color: var(--ok-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-cbm .lv-cashback__calc {
    border: 0;
    background: var(--ok-border);
}

.lv-cbm .lv-cashback__calc > div {
    background: var(--surface-2);
}

.lv-cbm .lv-cashback__btn {
    margin-top: 12px;
    min-height: 42px;
}

.lv-cashback__past {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

.lv-ladder {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
}

.lv-ladder__title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    margin-bottom: 18px;
}

.lv-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lv-step {
    --lv-a: #94a3b8;
    --lv-soft: #f1f5f9;

    position: relative;
    padding-left: 30px;
}

.lv-step--novice  { --lv-a: #3b82f6; --lv-soft: #eff6ff; }
.lv-step--premium { --lv-a: #7c3aed; --lv-soft: #f5f3ff; }
.lv-step--vip     { --lv-a: #d97706; --lv-soft: #fffbeb; }

.lv-step::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 22px;
    bottom: -14px;
    width: 2px;
    background: var(--border);
}

.lv-step:last-child::before { display: none; }

.lv-step.is-done::before { background: var(--lv-a); }

.lv-step__dot {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--border);
}

.lv-step.is-done .lv-step__dot {
    background: var(--lv-a);
    border-color: var(--lv-a);
}

.lv-step.is-current .lv-step__dot {
    background: var(--surface);
    border-color: var(--lv-a);
    box-shadow: 0 0 0 4px var(--lv-soft);
}

.lv-step__card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lv-step:not(.is-done) .lv-step__card {
    background: var(--surface-2);
    border-style: dashed;
}

.lv-step.is-current .lv-step__card {
    border-color: var(--lv-a);
    border-style: solid;
    background: var(--lv-soft);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

.lv-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lv-step__icon {
    width: 34px;
    height: 34px;
    flex: none;
    color: currentColor;
}

.lv-step__id { min-width: 0; }

.lv-step__name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text);
}

.lv-step__req {
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.lv-step__badge {
    margin-left: auto;
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--lv-a);
    color: #ffffff;
    white-space: nowrap;
}

.lv-step__badge--done {
    background: var(--ok-soft);
    color: var(--ok-strong);
}

.lv-step__perks {
    margin: 12px 0 0;
    padding-left: 18px;
}

.lv-step__perks li {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
}

.lv-step__perks li + li { margin-top: 4px; }

.lv-step__perks strong { color: var(--text); }

.lv-step__tag {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--lv-soft);
    color: var(--lv-a);
}

.lv-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-faint);
}

@media (max-width: 640px) {
    .lv-hero {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .lv-hero__top { gap: 14px; }

    .lv-hero__icon {
        width: 50px;
        height: 50px;
    }

    .lv-ladder { padding: 18px 16px; }

    .lv-step__card { padding: 14px; }

    .lv-step__head { flex-wrap: wrap; }

    .lv-step__badge {
        order: 3;
        margin-left: 48px;
    }

    .lv-wager__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .lv-cashback__calc {
        grid-template-columns: minmax(0, 1fr);
    }

    .lv-cashback__calc > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }

    .lv-cashback__calc span { margin-bottom: 0; }
}

.site-footer {
    margin: 40px 0 0;
    padding: 26px 24px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 24px;
}

.site-footer__inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.site-footer__age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--danger);
    background: var(--surface);
    color: var(--danger);
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
}

.site-footer__links a {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.site-footer__links a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--surface-accent);
}

.site-footer__note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-faint);
    max-width: 480px;
}

@media (max-width: 850px) {
    .site-footer {
        margin-bottom: 80px;
        padding: 22px 18px;
        border-radius: 20px;
    }
}

.nav-close-btn {
    display: none;
}

.bubbles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 0 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.bubbles.game-field {
    flex-wrap: wrap;
    gap: 0;
}

.bubbles-game {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 30px 70px;
    position: relative;
    gap: 12px;
    width: 100%;
    min-width: unset;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.bubbles-game_dots {
    width: 100%;
    max-width: 350px;
    min-width: unset;
    box-sizing: border-box;
    overflow: hidden;
}

.bubbles-game_dots__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
}

.bubbles-game_dots__wrap:before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 50%;
    height: 2px;
    background: rgba(127, 111, 201, 0.35);
    transform: translateY(-50%);
    border-radius: 2px;
}

.bubbles-game_dots__wrap.traversing:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6db86a;
    box-shadow: 0 0 10px rgba(109, 184, 106, 0.9);
    top: 50%;
    left: 0;
    transform: translate(30px, -50%);
    opacity: 1;
    animation: dot-traverse 0.9s linear infinite;
    z-index: 2;
}

@keyframes dot-traverse {
    0% { transform: translate(30px, -50%); }
    25% { transform: translate(96px, -50%); }
    50% { transform: translate(162px, -50%); }
    75% { transform: translate(228px, -50%); }
    100% { transform: translate(294px, -50%); }
}

.bubbles-game_dot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 70px;
    transform-origin: center;
    height: 36px;
}

.bubbles-game_dot:after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7f6fc9;
    box-shadow: 0 0 8px rgba(127, 111, 201, 0.6);
}

.bubbles-game_dot.main-dot-active:after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6db86a;
    box-shadow: 0 0 10px rgba(109, 184, 106, 0.7);
}

.emojy-1 {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 36px;
}

.emojy-3 {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90px;
}

.bubbles-game_main {
    width: 430px;
    min-width: 430px;
    height: 214px;
    padding: 24px;
    position: relative;
    z-index: 1;
    background: url('/assets/overlay-881b4922.png') center center no-repeat;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
}

.bubbles-game_main .wh74 {
    width: 74px;
    height: 74px;
}

.bubbles-game_main .wh150 {
    width: 150px;
    height: 150px;
}

.bubbles-game_main__side {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubbles-game_main__side>.bubbles-icon-empty,
.bubbles-game_main__side>.emojy-1 {
    fill: none;
}

.bubbles-game_main__center {
    position: relative;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubbles-game_main__center>* {
    position: relative;
    fill: none;
}

.emoji, .bubbles-emoji {
    font-size: 110px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
}

.emojy-1, .bubbles-icon-empty, .emojy-3, .bubbles-game_main__side {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.emojy-3 {
    width: 150px;
    height: 150px;
    font-size: 90px;
}

.bubbles-icon-next {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    font-size: 22px;
}

.bubbles-result {
    height: 88px;
    padding: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 88px;
}

.bubbles-result_wrap {
    width: 125px;
    height: 64px;
    align-content: center;
    background: #4fc94c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    color: #f2f0ff;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    opacity: 0;
    transform: translate(20%, 10%) scale(0.9) rotate(20deg);
    transition: all 0.3s ease-out;
}

.bubbles-result_wrap.show {
    opacity: 1;
    transform: unset;
}

.bubbles-result_wrap p {
    width: 100%;
    margin: 0;
}

.bubbles-result_wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='14' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L4.48149 5.2284C5.27968 6.15962 6.72032 6.15962 7.51851 5.2284L12 0L0 0Z' fill='%234FC94C'/%3E%3C/svg%3E");
}

.bubbles-result_wrap.win {
    background: #4fc94c;
}

.bubbles-result_wrap.win:after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='14' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L4.48149 5.2284C5.27968 6.15962 6.72032 6.15962 7.51851 5.2284L12 0L0 0Z' fill='%234FC94C'/%3E%3C/svg%3E");
}

.bubbles-result_wrap.lost {
    background: #ff5959;
}

.bubbles-result_wrap.lost:after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='14' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L4.48149 5.2284C5.27968 6.15962 6.72032 6.15962 7.51851 5.2284L12 0L0 0Z' fill='%23FF5959'/%3E%3C/svg%3E");
}

.bubbles_dot_out-enter {
}

.bubbles_dot_out-enter-active {
    animation: slide-in 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_dot_out-leave-active {
    animation: slide-out 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_dot_in-enter {
}

.bubbles_dot_in-enter-active {
    animation: slide-in-reverse 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_dot_in-leave {
    opacity: 1;
}

.bubbles_dot_in-leave-active {
    animation: slide-out-reverse 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_center-enter {
}

.bubbles_center-enter-active {
    animation: bubbles-in 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_center-leave {
    opacity: 1;
}

.bubbles_center-leave-active {
    animation: bubbles-out 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_prev-enter {
}

.bubbles_prev-enter-active {
    animation: bubbles-prev-in 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_prev-leave {
    opacity: 1;
}

.bubbles_prev-leave-active {
    animation: bubbles-prev-out 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_next-enter {
}

.bubbles_next-enter-active {
    animation: bubbles-next-in 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_next-leave {
    opacity: 1;
}

.bubbles_next-leave-active {
    animation: bubbles-next-out 0.3s ease-out forwards;
    transition: unset;
}

.bubbles_result-enter {
    opacity: 0;
}

.bubbles_result-enter-active {
    animation: bubbles_result-in 0.3s ease-out forwards;
    transition: 0.3s;
}

.bubbles_result-leave {
    opacity: 1;
}

.bubbles_result-leave-active {
    animation: bubbles_result-out 0.3s ease-out forwards;
    transition: unset;
}

@keyframes slide-in {
    0% {
        transform: translate(20px) scale(3);
    }
    to {
        transform: translate(0);
    }
}

@keyframes slide-out {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-20px);
    }
}

@keyframes slide-in-reverse {
    0% {
        transform: translate(20px);
    }
    to {
        transform: translate(0);
    }
}

@keyframes slide-out-reverse {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-10px);
    }
}

@keyframes bubbles-in {
    0% {
        transform: translate(100%) scale(0.5);
        opacity: 0.3;
    }
    to {
        transform: unset;
        opacity: 1;
    }
}

@keyframes bubbles-out {
    0% {
        transform: unset;
        opacity: 1;
    }
    100% {
        transform: translate(-120%);
        opacity: 0;
    }
}

@keyframes bubbles-prev-in {
    0% {
        opacity: 0;
        transform: translate(-20%);
    }
    100% {
        opacity: 1;
        transform: unset;
    }
}

@keyframes bubbles-prev-out {
    0% {
        transform: unset;
        opacity: 1;
    }
    100% {
        transform: translate(-140%);
        opacity: 0;
    }
}

@keyframes bubbles-next-in {
    0% {
        opacity: 0;
        transform: translate(20%);
    }
    100% {
        opacity: 1;
        transform: unset;
    }
}

@keyframes bubbles-next-out {
    0% {
        transform: unset;
        opacity: 1;
    }
    100% {
        transform: translate(140%);
        opacity: 0;
    }
}

@keyframes bubble-slide-out-left {
    0% {
        transform: unset;
        opacity: 1;
    }
    100% {
        transform: translate(-120%);
        opacity: 0;
    }
}

@keyframes bubble-slide-in-right {
    0% {
        transform: translate(120%);
        opacity: 0;
    }
    100% {
        transform: unset;
        opacity: 1;
    }
}

.center-slide-out-left {
    animation: bubble-slide-out-left 0.35s ease-in-out forwards;
}

.center-slide-in-right {
    animation: bubble-slide-in-right 0.35s ease-in-out forwards;
}

@keyframes bubbles_result-in {
    0% {
        transform: translate(20%, 10%) scale(0.9) rotate(20deg);
        opacity: 0;
    }
    to {
        transform: unset;
        opacity: 1;
    }
}

@keyframes bubbles_result-out {
    0% {
        transform: unset;
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}

@media screen and (max-width: 980px) {
    .bubbles .game-field {
        padding: 0;
    }
    .bubbles-game {
        padding: 0;
        transform: scale(0.6);
    }
    .bubbles-game_dots {
        width: auto;
        min-width: unset;
        max-width: 100%;
        transform: scale(0.85);
    }
    .bubbles-game_dot {
        width: 56px;
        min-width: 56px;
        height: 32px;
    }
    .bubbles-game_dot:after {
        width: 10px;
        height: 10px;
    }
    .bubbles-game_dots__wrap:before {
        left: 28px;
        right: 28px;
    }
    .bubbles-game_dots__wrap.traversing:after {
        width: 10px;
        height: 10px;
        transform: translate(28px, -50%);
    }
    @keyframes dot-traverse {
        0% { transform: translate(28px, -50%); }
        25% { transform: translate(96px, -50%); }
        50% { transform: translate(164px, -50%); }
        75% { transform: translate(232px, -50%); }
        100% { transform: translate(300px, -50%); }
    }
    .bubbles-game_main {
        width: auto;
        min-width: unset;
        max-width: 100%;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .bubbles {
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;
    }
    .bubbles-game {
        transform: scale(0.55);
    }
    .bubbles-game_dots {
        width: auto;
        min-width: unset;
        max-width: 100%;
        transform: scale(0.9);
    }
    .bubbles-game_dot {
        width: auto;
        min-width: 0;
        max-width: 50px;
        height: 30px;
        flex: 1 1 0;
    }
    .bubbles-game_dot:after {
        width: 8px;
        height: 8px;
    }
    .bubbles-game_dots__wrap:before {
        left: 20px;
        right: 20px;
    }
    .bubbles-game_dots__wrap.traversing:after {
        width: 8px;
        height: 8px;
        transform: translate(20px, -50%);
    }
    @keyframes dot-traverse {
        0% { transform: translate(20px, -50%); }
        25% { transform: translate(72px, -50%); }
        50% { transform: translate(124px, -50%); }
        75% { transform: translate(176px, -50%); }
        100% { transform: translate(228px, -50%); }
    }
    .bubbles-result {
        height: 30px;
    }
    .bubbles-result_wrap {
        width: 109px;
        height: 56px;
        font-size: 16px;
    }
    .bubbles .game-field {
        padding-bottom: 0;
        height: 220px;
    }
}

@media screen and (max-width: 400px) {
    .bubbles-game {
        margin-top: -10px;
        transform: scale(0.45);
        gap: 0;
    }
    .bubbles-game_dots {
        max-width: 100%;
        transform: scale(0.85);
    }
    .bubbles-game_dot {
        max-width: 40px;
        height: 26px;
    }
    .bubbles-game_dot:after {
        width: 7px;
        height: 7px;
    }
    .bubbles-game_dots__wrap:before {
        left: 16px;
        right: 16px;
    }
    .bubbles-game_dots__wrap.traversing:after {
        width: 7px;
        height: 7px;
        transform: translate(16px, -50%);
    }
    @keyframes dot-traverse {
        0% { transform: translate(16px, -50%); }
        25% { transform: translate(58px, -50%); }
        50% { transform: translate(100px, -50%); }
        75% { transform: translate(142px, -50%); }
        100% { transform: translate(184px, -50%); }
    }
    .bubbles .game-field {
        height: 200px;
    }
}

.bubbles-win {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 800;
    color: var(--ok);
    text-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
    animation: popInOut 2s ease forwards;
    pointer-events: none;
}

.bubbles-lose {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    animation: popInOut 2s ease forwards;
    pointer-events: none;
}

@keyframes popInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-20px);
    }
}

.bonus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.bonus-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.bonus-modal {
    background: var(--surface);
    border-radius: 24px;
    padding: 28px 24px 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.bonus-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.bonus-close:hover {
    background: var(--surface-3);
    color: var(--text);
}
.bonus-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.bonus-desc {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}

.bonus-wheel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bonus-spin-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}
.bonus-spin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
.bonus-spin-btn:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.bonus-later-btn {
    padding: 8px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}
.bonus-later-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}
.bonus-result {
    font-size: 14px;
    font-weight: 700;
    color: var(--ok);
    text-align: center;
    min-height: 20px;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 26px 28px;
    margin-bottom: 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.22);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.pf-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 65%);
}

.pf-hero__id {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pf-hero__avatar {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
    font-size: 26px;
    font-weight: 800;
}

.pf-hero__who {
    min-width: 0;
}

.pf-hero__name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.2;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}

.pf-hero__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.pf-hero__wallet {
    position: relative;
    z-index: 1;
    text-align: right;
}

.pf-hero__balance-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.7);
}

.pf-hero__balance {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin: 2px 0 14px;
}

.pf-hero__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 11px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pf-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

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

.pf-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.pf-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.pf-btn--sm {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 11px;
}

.pf-btn--wide {
    width: 100%;
    margin-top: 14px;
}

.pf-hero .pf-btn {
    border-color: transparent;
}

.pf-hero .pf-btn:not(.pf-btn--primary) {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.pf-hero .pf-btn:not(.pf-btn--primary):hover {
    background: rgba(255, 255, 255, 0.26);
}

.pf-hero .pf-btn--primary {
    background: #ffffff;
    color: #2563eb;
}

.pf-hero .pf-btn--primary:hover {
    background: #eff6ff;
}

.pf-group {
    margin-bottom: 18px;
}

.pf-group__label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-faint);
}

.pf-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    gap: 12px;
}

.pf-group .pf-tiles { margin-bottom: 0; }

.pf-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.pf-tile__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}

.pf-tile__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pf-tile__value.is-up   { color: var(--ok); }
.pf-tile__value.is-down { color: var(--danger); }

.pf-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.pf-level[hidden] { display: none; }

.pf-level svg {
    width: 13px;
    height: 13px;
    flex: none;
}

.pf-level--novice  svg { color: #bfdbfe; }
.pf-level--premium svg { color: #ddd6fe; }
.pf-level--vip     svg { color: #fcd34d; }

.pf-game + .pf-game {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.pf-game__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pf-game__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.pf-game__net {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pf-game__net.is-up   { color: var(--ok); }
.pf-game__net.is-down { color: var(--danger); }

.pf-game__track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.pf-game__track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.pf-game__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.pf-card__note {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
}

.pf-row__value--warn { color: var(--warn-strong); }

.pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.pf-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pf-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
}

.pf-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pf-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.pf-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pf-link:hover {
    text-decoration: underline;
}

.pf-empty {
    padding: 26px 0;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

.pf-rows {
    display: flex;
    flex-direction: column;
}

.pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-soft);
}

.pf-row:last-child {
    border-bottom: none;
}

.pf-row__label {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
    flex: none;
}

.pf-row__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.pf-bind {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

.pf-bind:last-child {
    border-bottom: none;
}

.pf-bind__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pf-bind__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.pf-bind__status {
    font-size: 12.5px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-bind__status.is-on {
    color: var(--ok);
    font-weight: 600;
}

.pf-tx {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

.pf-tx:last-child {
    border-bottom: none;
}

.pf-tx__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
}

.pf-tx__icon.is-in {
    background: var(--ok-soft);
    color: var(--ok);
}

.pf-tx__icon.is-out {
    background: var(--warn-soft);
    color: var(--warn-strong);
}

.pf-tx__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pf-tx__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.pf-tx__meta {
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-tx__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
}

.pf-tx__sum {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.pf-tx__sum.is-in { color: var(--ok); }
.pf-tx__sum.is-out { color: var(--text); }

.pf-tx__status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text-dim);
    white-space: nowrap;
}

.cx-tx__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cx-tx {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border-soft);
    transition: border-color .18s ease, transform .18s ease;
}

.cx-tx + .cx-tx { margin-top: 8px; }

.cx-tx:hover {
    border-color: var(--border);
    transform: translateY(-1px);
}

.cx-tx__icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--text-dim);
}

.cx-tx__icon svg { width: 18px; height: 18px; }

.cx-tx.is-ok .cx-tx__icon { background: var(--ok-soft); color: var(--ok); }
.cx-tx.is-wait .cx-tx__icon { background: var(--warn-soft); color: var(--warn-strong); }
.cx-tx.is-bad .cx-tx__icon { background: var(--danger-soft); color: var(--danger); }

.cx-tx__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cx-tx__line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cx-tx__sum {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.cx-tx__status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-dim);
    white-space: nowrap;
}

.cx-tx.is-ok .cx-tx__status { background: var(--ok-soft); color: var(--ok); }
.cx-tx.is-wait .cx-tx__status { background: var(--warn-soft); color: var(--warn-strong); }
.cx-tx.is-bad .cx-tx__status { background: var(--danger-soft); color: var(--danger); }

.cx-tx__ids {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.cx-tx__id {
    padding: 2px 7px;
    border: 1px dashed var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    line-height: 1.5;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.cx-tx__id:hover {
    color: var(--text);
    border-color: var(--text-faint);
    border-style: solid;
}

.cx-tx__meta {
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-tx__pay {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    margin: 0;
    padding: 7px 13px;
    font-size: 12px;
}

.cx-tx__pay svg { width: 13px; height: 13px; }

@media (max-width: 480px) {
    .cx-tx__head { flex-wrap: wrap; }
    .cx-tx__pay { width: 100%; justify-content: center; margin-top: 8px; }
}

.cx-tx__eye {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}

.cx-tx__eye svg { width: 15px; height: 15px; }

.cx-tx:hover .cx-tx__eye,
.cx-tx.is-open .cx-tx__eye { opacity: 1; }

.cx-tx__eye:hover { color: var(--text); background: var(--surface-3); }

.cx-tx.is-open { border-color: var(--border); }

.cx-tx__more {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-soft);
    display: grid;
    gap: 1px;
}

.cx-tx__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
}

.cx-tx__row:nth-child(odd) { background: var(--surface-3); }

.cx-tx__key {
    font-size: 12px;
    color: var(--text-faint);
    flex: none;
}

.cx-tx__val {
    font-size: 12.5px;
    color: var(--text);
    text-align: right;
    word-break: break-all;
}

.cx-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.cx-pager__btn {
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-2, var(--surface));
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.cx-pager__btn:hover:not(:disabled) { border-color: var(--border); color: var(--text); }

.cx-pager__btn:disabled { opacity: .4; cursor: default; }

.cx-pager__now {
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cx-pager__now span { color: var(--text-faint); }

#dupModal { z-index: 2100; }

.dup-modal { max-width: 380px; }

.dup {
    padding: 26px 24px 24px;
    text-align: center;
}

.dup__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--warn-soft);
    color: var(--warn-strong);
}

.dup__icon svg { width: 24px; height: 24px; }

.dup__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

.dup__text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-faint);
}

.dup__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--surface-3);
}

.dup__sum { font-size: 20px; font-weight: 800; color: var(--text); }
.dup__meta { font-size: 12px; color: var(--text-faint); }

.dup__btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, filter .18s ease;
}

.dup__btn + .dup__btn { margin-top: 8px; }
.dup__btn.is-hidden { display: none; }
.dup__btn:hover { background: var(--surface-accent); }

.dup__btn--main {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}

.dup__btn--main:hover { filter: brightness(1.08); background: var(--accent); }

.pf-tx__pay {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pf-tx__pay:hover { filter: brightness(1.08); }

.pf-tx__status.is-ok { background: var(--ok-soft); color: var(--ok); }
.pf-tx__status.is-wait { background: var(--warn-soft); color: var(--warn-strong); }
.pf-tx__status.is-bad { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 1100px) {
    .pf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gh-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.gh-row:last-child {
    border-bottom: none;
}

.gh-mult {
    flex: none;
    min-width: 52px;
    padding: 5px 8px;
    border-radius: 9px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.gh-mult.is-win { background: var(--ok-soft); color: var(--ok); }
.gh-mult.is-lose { background: var(--surface-3); color: var(--text-faint); }

.gh-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.gh-sum {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
}

.gh-sum.is-win { color: var(--ok); }

.gh-meta {
    font-size: 11px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-check {
    flex: none;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.gh-check:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.fair-teaser {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    margin: 0 0 14px;
}

.fair-modal {
    max-width: 860px;
}

.fair-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 26px;
}

.fair-col {
    min-width: 0;
}

.fair-col__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.fair-verdict {
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
}

.fair-verdict.is-ok {
    background: var(--ok-soft);
    color: var(--ok);
    border: 1px solid var(--ok-border);
}

.fair-verdict.is-bad {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.fair-checkline {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-2);
}

.fair-checkline::before {
    position: absolute;
    left: 0;
    top: 4px;
    font-weight: 800;
}

.fair-checkline.is-ok::before {
    content: '✓';
    color: var(--ok);
}

.fair-checkline.is-bad::before {
    content: '✗';
    color: var(--danger);
}

.fair-compare {
    display: grid;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.fair-compare span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-faint);
    margin-bottom: 3px;
}

.fair-compare code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.fair-empty {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.fair-empty .fair-note {
    margin: 0;
}

.fair-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.fair-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    margin-bottom: 14px;
}

.fair-note--dim {
    color: var(--text-faint);
    font-size: 12px;
    margin: 10px 0 0;
}

.fair-line {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}

.fair-line__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-faint);
}

.fair-line__value {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    overflow-wrap: anywhere;
}

.fair-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.fair-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
}

.fair-input:focus {
    border-color: var(--accent);
}

.fair-result {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-2);
}

.fair-check {
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.fair-ok { color: var(--ok); }
.fair-bad { color: var(--danger); }

.fair-outcome {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
}

.fair-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 400;
}

.promo-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.promo-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--surface-2);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.promo-input::placeholder {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-faint);
}

.promo-input:focus {
    border-color: var(--bx-accent, #2563eb);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.promo-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.promo-captcha__img {
    display: block;
    width: 150px;
    height: 52px;
    flex: none;
    border-radius: 10px;
    border: 1px solid var(--border);

    background: var(--surface-2);
}

.promo-captcha__img[hidden] { display: none; }

.promo-captcha__reload {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.promo-captcha__reload:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.promo-captcha__reload:active { transform: rotate(-90deg); }

.promo-captcha__reload:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.promo-captcha__input {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 220px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

.promo-captcha__input::placeholder {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-faint);
}

.promo-captcha__input:focus {
    border-color: var(--bx-accent, #2563eb);
    background: var(--surface);
}

.promo-captcha.is-loading .promo-captcha__img { opacity: .45; }

.promo-captcha.is-loading { min-height: 52px; }

.promo-captcha__error {
    flex: 1 1 100%;
    padding: 11px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.promo-captcha__error:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.promo-captcha.is-recaptcha { gap: 0; }

@media (max-width: 360px) {
    #promoRecaptchaBox {
        transform: scale(.86);
        transform-origin: 0 0;
        height: 66px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-captcha__reload { transition: none; }
    .promo-captcha__reload:active { transform: none; }
}

.promo-input {
    font-family: 'Courier New', ui-monospace, monospace;
    letter-spacing: 0.14em;
    font-size: 16px;
}

.promo-form .btn-primary {
    padding: 13px 26px;
    border-radius: 14px;
    font-size: 14px;
}

.promo-form .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.promo-message {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    margin-top: 10px;
    min-height: 18px;
}

.promo-message-success { color: var(--ok); }
.promo-message-error   { color: var(--danger); }

.promo-history {
    margin-top: 6px;
}

.promo-history-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    margin: 14px 0 8px;
}

.promo-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}

.promo-history-row:last-child {
    border-bottom: none;
}

.promo-history-code {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text);
}

.promo-history-wager {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--warn-strong);
}

.promo-history-reward {
    font-weight: 600;
    color: var(--ok);
    white-space: nowrap;
}

.promo-history-date {
    color: var(--text-faint);
    white-space: nowrap;
}

.auth-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #ffffff;
}

#tgSubRetry {
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    border: 1.5px solid var(--border);
}

#tgSubRetry:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--surface-2);
}

.auth-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: var(--text-dim);
    background: var(--surface-2);
}

.auth-note--warn {
    color: #92400e;
    background: rgba(245, 165, 36, .12);
}

.auth-note--error {
    color: #b42318;
    background: rgba(245, 101, 101, .12);
}

.telegram-icon {
    background: none;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.telegram-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.telegram-submit {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.telegram-submit:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

#telegramBindModal .auth-modal {
    max-width: 420px;
}

#telegramBindCodeBlock {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

#telegramBindCodeInput {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 18px;
    color: var(--text);
}

#telegramBindCodeInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cashier-modal {
    max-width: 860px;

    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.cashier-modal:has(.cashier-lock:not([hidden])) {
    overflow: hidden;
}

.cashier {
    padding: 28px;
}

.cashier__head {
    margin-bottom: 22px;
    padding-right: 40px;
}

.cashier__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text);
    margin: 0 0 4px;
}

.cashier__sub {
    font-size: 13.5px;
    color: var(--text-dim);
    margin: 0;
}

.cashier__body {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.cashier__side,
.cashier__main {
    min-width: 0;
}

.cashier__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.cashier-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cashier-method {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}

.cashier-method:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.cashier-method.is-active {
    border-color: var(--accent);
    background: var(--surface-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cashier-method__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cashier-method__icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--text-2);
}

.cashier-method.is-active .cashier-method__icon {
    background: var(--surface);
    color: var(--accent);
}

.cashier-method__icon svg {
    width: 20px;
    height: 20px;
}

.cashier-method__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cashier-method__text b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-method__text i {
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-faint);
}

.cashier-amount {
    position: relative;
    display: flex;
    align-items: center;
}

.cashier-amount__input {
    width: 100%;
    padding: 15px 44px 15px 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;

    -moz-appearance: textfield;
    appearance: textfield;
}

.cashier-amount__input::-webkit-outer-spin-button,
.cashier-amount__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cashier-amount__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cashier-amount__cur {
    position: absolute;
    right: 18px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-faint);
    pointer-events: none;
}

.cashier-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cashier-chip {
    padding: 9px 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.cashier-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.cashier-chip.is-active {
    border-color: var(--accent);
    background: var(--surface-accent);
    color: var(--accent);
}

.cashier-total {
    margin-top: 16px;
}

.cashier-total__label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 2px;
}

.cashier-total__value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--text);
}

.cashier-field {
    display: block;
    margin-top: 16px;
}

.cashier-field span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.cashier-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    outline: none;
}

.cashier-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cashier-req { margin-top: 4px; }

.cashier-req__note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim);
}

.cashier-req__hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    font-style: normal;
    color: var(--text-faint);
}

.cashier-req__opt {
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
    opacity: .8;
}

select.cashier-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

.cashier-warn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--danger-border);
    background: var(--danger-soft);
}

.cashier-warn[hidden] { display: none; }

.cashier-warn__icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--danger);
}

.cashier-warn__icon svg { display: block; width: 20px; height: 20px; stroke-width: 2; }

.cashier-warn b {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--danger);
}

.cashier-warn p {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-2);
}

.cashier-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient(135deg, var(--surface-accent) 0%, var(--violet-soft) 100%);
}

.cashier-note__icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--accent);
    color: #ffffff;
}

.cashier-note__icon svg {
    width: 17px;
    height: 17px;
}

.cashier-note b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-hover);
    margin-bottom: 2px;
}

.cashier-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.cashier-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--warn-border);
    background: var(--warn-soft);
}

.cashier-promo__icon { font-size: 22px; line-height: 1; flex: none; }

.cashier-promo__text { flex: 1 1 auto; min-width: 0; }

.cashier-promo__text b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--warn-strong);
}

.cashier-promo__text p {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}

.cashier-promo__badge {
    flex: none;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--warn);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cashier-promo[hidden] { display: none; }

.cashier-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
    overflow: hidden;
}

.cashier-facts > div {
    padding: 12px 10px;
    background: var(--surface);
    text-align: center;
    min-width: 0;
}

.cashier-facts span {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 3px;
}

.cashier-facts b {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    overflow-wrap: anywhere;
}

.cashier-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft, var(--border));
}

.cashier-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.cashier-tab:hover { color: var(--text); }

.cashier-tab.is-on {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.cashier-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.cashier-subtabs {

    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft, var(--border));
}

.cashier-subtab {

    flex: 1 1 0;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.cashier-subtab:hover { color: var(--text); }

.cashier-subtab.is-on {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.cashier-subtab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.cashier-history {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cashier-history .cashier__label {
    display: block;
    margin-bottom: 12px;
}

.cashier-history__foot {
    margin-top: 10px;
    text-align: right;
}

.cashier-history__foot[hidden] { display: none; }

.cashier-history__all {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.cashier-history__all:hover {
    opacity: 0.75;
}

.cashier-history__list[hidden] { display: none; }

.cashier-history__list {
    margin-top: 4px;

    max-height: min(58vh, 560px);
    max-height: min(58dvh, 560px);
    overflow-y: auto;

    overscroll-behavior: contain;

    padding-right: 4px;
}

.cashier-history__list .pf-empty {
    padding: 18px 0;
    font-size: 13px;
}

.cashier-history__pager:empty { display: none; }

.cashier-history__pager .cx-pager { margin-top: 12px; }

.cashier-lock[hidden] { display: none; }

.cashier-pane { position: relative; }

.cashier-lock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(248, 250, 253, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    animation: cashierLockIn 0.25s ease both;
}

@keyframes cashierLockIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cashier-lock__card {
    width: 100%;
    max-width: 380px;
    max-height: 100%;
    overflow-y: auto;
    padding: 26px 24px;
    text-align: center;
    border: 1px solid var(--warn-border);
    border-radius: 22px;
    background: var(--warn-soft);
    box-shadow: 0 20px 44px rgba(146, 64, 14, 0.16);
}

.cashier-lock__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--warn-soft);
    color: var(--warn-strong);
}

.cashier-lock__icon svg {
    width: 22px;
    height: 22px;
}

.cashier-lock__title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--warn-strong);
}

.cashier-lock__sub {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warn-strong);
}

.cashier-lock__amount {
    margin: 6px 0 16px;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--warn-strong);
    font-variant-numeric: tabular-nums;
}

.cashier-lock__track {
    height: 8px;
    border-radius: 999px;
    background: var(--warn-soft);
    overflow: hidden;
}

.cashier-lock__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.4s ease;
}

.cashier-lock__progress {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--warn-strong);
    font-variant-numeric: tabular-nums;
}

.cashier-lock__note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--warn-strong);
}

.cashier-lock__actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.cashier-lock__btn {
    flex: 1;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--warn-border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--warn-strong);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.cashier-lock__btn:hover {
    background: var(--warn-soft);
    border-color: var(--warn);
}

.cashier-lock__btn--main {
    background: var(--warn);
    border-color: var(--warn);
    color: #ffffff;
}

.cashier-lock__btn--main:hover {
    background: var(--warn);
    border-color: var(--warn);
}

@media (max-width: 480px) {
    .cashier-lock {
        padding: 14px;
    }

    .cashier-lock__card {
        padding: 22px 18px;
    }

    .cashier-lock__amount {
        font-size: 28px;
    }
}

.cashier-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 16px;
    border: none;
    border-radius: 15px;
    background: var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cashier-submit:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.cashier-submit:disabled {
    background: var(--border-strong);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.cashier__foot {
    margin: 12px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-faint);
}

.game-wrapper {
    margin: 0 auto;
    padding: 0 16px;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 16px;
    margin-bottom: 16px;
}

.game-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.game-title-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--surface-accent), var(--surface-accent));
    border-radius: 10px;
    color: var(--accent);
}

.game-title-text h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.game-title-text p {
    font-size: 11px;
    color: var(--text-faint);
    margin: 0;
}

.game-balance-wrap {
    text-align: right;
}

.game-balance-text {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-balance-num {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.dice-main-card {
    background: var(--surface);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 4px 28px rgba(30, 64, 175, 0.08);
    border: 1px solid var(--accent-border);
    position: relative;
    overflow: hidden;
}

.dice-main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #60a5fa, #2563eb, #1d4ed8);
    border-radius: 24px 24px 0 0;
}

.dice-main-card::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.dice-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
    position: relative;
}

.dice-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dice-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dice-input-group {
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dice-input-group:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.dice-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 13px 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    outline: none;
    min-width: 0;
}

.dice-input::-webkit-inner-spin-button,
.dice-input::-webkit-outer-spin-button {
    opacity: 1;
}

.dice-suffix {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-faint);
    background: transparent;
    border-left: 1px solid var(--border);
}

.dice-quick-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dice-quick-btn {
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: var(--surface-accent);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
}

.dice-quick-btn:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.dice-quick-btn:active {
    transform: scale(0.96);
}

.dice-result-card {
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.dice-result-card.win {
    display: block;
    background: linear-gradient(135deg, var(--ok-soft), var(--ok-soft));
    color: var(--ok);
    border: 1px solid var(--ok-border);
}

.dice-result-card.lose {
    display: block;
    background: linear-gradient(135deg, var(--danger-soft), var(--danger-soft));
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.dice-number-display {
    background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-accent) 100%);
    border-radius: 18px;
    padding: 26px 20px;
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid var(--accent-border);
    position: relative;
    overflow: hidden;
}

.dice-number-display::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -20%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.07) 0%, transparent 65%);
    pointer-events: none;
}

.dice-number-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--violet);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    position: relative;
}

.dice-number-value {
    font-size: 52px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -2px;
    line-height: 1;
    position: relative;
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums;
}

.dice-number-value.rolling {
    color: var(--accent);
    filter: blur(0.4px);
    animation: diceRoll 0.08s infinite alternate;
}

.dice-number-value.settled {
    animation: diceSettle 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dice-number-value.win {
    color: var(--ok);
    text-shadow: 0 0 26px rgba(16, 185, 129, 0.35);
}

.dice-number-value.lose {
    color: var(--danger);
    text-shadow: 0 0 26px rgba(239, 68, 68, 0.3);
}

@keyframes diceRoll {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    100% { transform: scale(1.04) translateY(-2px); opacity: 0.75; }
}

@keyframes diceSettle {
    0% { transform: scale(1.15); opacity: 0.4; }
    60% { transform: scale(0.96); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.dice-potential {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--surface-accent) 0%, var(--surface-accent) 100%);
    border-radius: 14px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid var(--accent-border);
}

.dice-potential-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dice-potential-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-hover);
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.dice-multiplier {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    padding: 4px 10px;
    border-radius: 8px;
}

.dice-choices {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.dice-choice-btn {
    flex: 1;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.dice-choice-btn::before {
    font-size: 13px;
    line-height: 1;
}

.dice-less-btn::before {
    content: '↓';
}

.dice-more-btn::before {
    content: '↑';
}

.dice-choice-btn:active:not(:disabled):not(.dice-choice-disabled) {
    transform: scale(0.97);
}

.dice-choice-btn:disabled,
.dice-choice-btn.dice-choice-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.dice-choice-btn.dice-choice-pressed {
    transform: scale(0.94);
}

.dice-less-btn {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.dice-less-btn:hover:not(:disabled):not(.dice-choice-disabled) {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.dice-more-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.dice-more-btn:hover:not(:disabled):not(.dice-choice-disabled) {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    transform: translateY(-1px);
}

.dice-intervals {
    display: flex;
    gap: 10px;
}

.dice-interval {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}

.dice-interval-less {
    color: var(--accent);
    background: var(--surface-accent);
    border-color: var(--accent-border);
}

.dice-interval-more {
    color: var(--accent-hover);
    background: var(--violet-soft);
    border-color: var(--accent-border);
}

@media (max-width: 480px) {
    .game-wrapper {
        padding: 0 12px;
    }

    .dice-main-card {
        padding: 18px;
        border-radius: 18px;
    }

    .dice-number-display {
        padding: 20px 14px;
    }

    .dice-number-value {
        font-size: 40px;
    }

    .dice-choice-btn {
        padding: 14px;
        font-size: 14px;
    }

    .dice-potential-value {
        font-size: 22px;
    }
}

@keyframes skelShimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

.skel,
.is-booting .balance-pill__sum::after,
.is-booting .avatar {
    background-color: var(--surface-2);

    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--skel-shine) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skelShimmer 1.4s ease-in-out infinite;
}

.is-booting .balance-pill__sum::after {
    content: '';
    display: block;
    width: 100%;
    height: 13px;
    border-radius: 999px;
}

.is-booting .avatar {
    color: transparent;
    border-color: transparent;
}

.is-booting .balance-pill__btn {
    pointer-events: none;
    opacity: 0.5;
}

.skel {
    border-radius: 16px;
}

.skel-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skel--banner {
    height: 232px;
    border-radius: 28px;
}

.skel--title {
    height: 26px;
    width: 220px;
    border-radius: 10px;
}

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

.skel--card {
    aspect-ratio: 3 / 4;
    border-radius: 20px;
}

.skel--block {
    height: 200px;
    border-radius: 24px;
}

.skel--block-sm {
    height: 132px;
}

.skel-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1100px) {
    .skel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .skel--banner {
        height: 168px;
        border-radius: 22px;
    }

    .skel-page,
    .skel-side {
        gap: 14px;
    }

    .skel-grid {
        gap: 12px;
    }

    .skel--block {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .skel--title {
        width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skel,
    .is-booting .balance-pill__sum::after,
    .is-booting .avatar {
        animation: none;
        background-image: none;
    }
}

.auth-google {
    display: flex;
    justify-content: center;
    margin-top: 12px;

    min-height: 44px;
}

.auth-google:empty { min-height: 0; }

.pf-google {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.pf-google:empty { display: none; }

.pf-level-card { --pf-lvl: #2563eb; }
.pf-level-card--novice  { --pf-lvl: #64748b; }
.pf-level-card--premium { --pf-lvl: #7c3aed; }
.pf-level-card--vip     { --pf-lvl: #d97706; }

.pf-lvl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-lvl__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pf-lvl__now {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pf-lvl);
}

.pf-lvl__next {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
}

.pf-lvl__track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.pf-lvl__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pf-lvl);

    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.pf-lvl__hint {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
}

.ps-hero {
    position: relative;
    margin: -6px -4px 18px;
    text-align: center;
}

.ps-hero__glow {
    position: relative;
    height: 96px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
}

.ps-hero__glow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(18px) saturate(1.35);
    transform: scale(1.35);
    opacity: .9;
}

.ps-hero__glow img.is-dead { display: none; }

.ps-hero__glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .34));
}

.ps-hero__cover {
    position: relative;
    width: 108px;
    margin: -54px auto 0;
    z-index: 1;
}

.ps-hero__art {
    width: 108px;
    height: 108px;
    border-radius: 22px;
    overflow: hidden;

    border: 3px solid var(--surface);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .24);
    background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
}

.ps-hero__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-hero__art img.is-dead { display: none; }

.ps-hero__count {
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    border: 2px solid var(--surface);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .34);
}

.ps-hero__eyebrow {
    margin-top: 26px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ps-hero__name {
    margin: 5px 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.2px;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.ps-fact {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 9px;
    background: var(--surface-3);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}

.ps-fact--wager {
    background: var(--warn-soft);
    color: var(--warn-strong);
}

#promoSlotModal .auth-submit {
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

#promoSlotModal .btn-ghost {
    color: var(--text-dim);
    font-weight: 600;
}

@media (max-width: 480px) {
    .ps-hero__glow { height: 84px; border-radius: 15px; }
    .ps-hero__cover { width: 92px; margin-top: -46px; }
    .ps-hero__art { width: 92px; height: 92px; border-radius: 19px; }
    .ps-hero__name { font-size: 19px; }
}

.confirm-overlay {
    z-index: 2100;
}

.confirm-modal {
    max-width: 400px;
    padding: 28px 26px 24px;
    text-align: center;
}

.confirm-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.confirm-modal__icon svg {
    width: 28px;
    height: 28px;
}

.confirm-modal__title {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
}

.confirm-modal__rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 16px;
    overflow: hidden;
    text-align: left;
    background: rgba(148, 163, 184, 0.22);
    border-radius: 14px;
}

.confirm-modal__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
}

.confirm-modal__rows span {
    font-size: 13px;
    color: var(--text-secondary);
}

.confirm-modal__rows b {
    font-size: 16px;
    font-weight: 800;

    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.confirm-modal__row--burn b {
    color: #dc2626;
}

.confirm-modal__text {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.confirm-modal__actions {
    display: flex;
    gap: 10px;
}

.confirm-modal__btn {
    flex: 1;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.confirm-modal__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.confirm-modal__btn:active {
    transform: translateY(0);
}

.confirm-modal__btn--ghost {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.18);
}

.confirm-modal__btn--danger {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.28);
}

@media (max-width: 420px) {
    .confirm-modal__actions {
        flex-direction: column-reverse;
    }
}

@media (max-width: 640px) {
    .confirm-modal {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

.cashier .auth-message {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.cashier .auth-message.error,
.cashier .auth-message.success {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.cashier .auth-message.error { border-color: var(--danger-border); }
.cashier .auth-message.success { border-color: var(--ok-border); }

.cashier .auth-message::before {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;

    margin-top: 1px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.cashier .auth-message.error::before {
    background-color: var(--danger);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.cashier .auth-message.success::before {
    background-color: var(--ok);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

.cashier-note[hidden] { display: none; }

.game-card-art {
    position: absolute;
    inset: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover .game-card-art {
    transform: scale(1.06);
}

.game-card-art--upgrader {
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, #f59e0b 0%, #ea580c 46%, #7c2d12 100%);
}

.game-card-art--cases {
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, #34d399 0%, #0f766e 48%, #134e4a 100%);
}

.game-card-art--cases::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 34%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: currentColor;
    color: rgba(255, 255, 255, 0.92);
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 9.2h17.2v9.6a1.8 1.8 0 0 1-1.8 1.8H5.2a1.8 1.8 0 0 1-1.8-1.8z'/%3E%3Cpath d='M2.6 5.6h18.8v3.6H2.6z'/%3E%3Cpath d='M12 5.6v15'/%3E%3Cpath d='M9.6 13.4h4.8'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 9.2h17.2v9.6a1.8 1.8 0 0 1-1.8 1.8H5.2a1.8 1.8 0 0 1-1.8-1.8z'/%3E%3Cpath d='M2.6 5.6h18.8v3.6H2.6z'/%3E%3Cpath d='M12 5.6v15'/%3E%3Cpath d='M9.6 13.4h4.8'/%3E%3C/svg%3E");
}

.game-card-art--upgrader::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 34%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: currentColor;
    color: rgba(255, 255, 255, 0.92);
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 4.8 11h4.2v4.2h6V11h4.2z'/%3E%3Cpath d='M6.6 20.4h10.8'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 4.8 11h4.2v4.2h6V11h4.2z'/%3E%3Cpath d='M6.6 20.4h10.8'/%3E%3C/svg%3E");
}

@media (max-width: 850px) {
    .dashboard-layout:has(.game-wrapper.slots) > .sidebar-right {
        display: contents;
    }

    .dashboard-layout:has(.game-wrapper.slots) > .content-area { order: 0; }
    .dashboard-layout:has(.game-wrapper.slots) > .sidebar-left { order: 2; }

    .dashboard-layout:has(.game-wrapper.slots) > .sidebar-right > * {
        order: 1;
        height: auto;
    }

    .dashboard-layout:has(.game-wrapper.slots) > .sidebar-right > .fs-side-card {
        order: -1;
    }
}