/* --- ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (ALTUSHKA COLORS) --- */
:root {
    --bg-deep: #0a0a0f;
    --bg-card: #12121a;
    --accent-pink: #ff00cc;
    --accent-purple: #9d00ff;
    --neon-blue: #c04dff;
    --text-main: #ffffff;
    --text-dim: #8a8a9e;
    --gold: #ffcc00;
    --danger: #ff3b30;
    --success: #00ff88;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

.case-bonus-note {
    position: absolute;
    left: 88px;
    bottom: 10px;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .45px;
    color: #ffe9b0;
    opacity: .9;
    text-shadow: 0 0 10px rgba(255,184,86,.45);
}

.prizes-modal-card {
    max-height: 78vh;
    overflow: auto;
}

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

.prize-item {
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    padding: 8px;
    text-align: center;
}

.prize-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.prize-item span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
}

.case-win-overlay {
    background: radial-gradient(circle at top, #2d0a4a, #120817 62%, #09090d 100%);
}

.case-win-card {
    width: min(88vw, 420px);
    text-align: center;
}

.case-win-card h2 {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 14px 44px rgba(0,0,0,.25);
}

#case-win-image {
    width: 140px;
    height: 140px;
    margin-top: 8px;
    object-fit: contain;
}

.case-win-sum {
    margin-top: 8px;
    font-size: 32px;
    color: #ff7de6;
    font-weight: 900;
}

.case-win-card .btn-main {
    margin-top: 20px;
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
}

.case-win-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.case-win-actions .btn-main {
    margin-top: 0;
}

/* --- СБРОС И БАЗА --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    overflow: hidden; /* Скролл только внутри контента */
    height: 100vh;
    min-height: 100dvh;
    width: 100vw;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background: radial-gradient(circle at 20% 10%, rgba(255,0,204,.22), transparent 35%), radial-gradient(circle at 80% 20%, rgba(0,212,255,.16), transparent 40%), radial-gradient(circle at 50% 90%, rgba(157,0,255,.22), transparent 38%);
    animation: bgShift 14s ease-in-out infinite;
    z-index: -1;
    will-change: transform, opacity;
    transform: translateZ(0);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 42%);
    background-size: 100% 3px, 3px 100%, 100% 100%;
    mix-blend-mode: screen;
    animation: grainShift 18s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: #07070d;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity .35s ease;
    animation: loaderAutoHide 0.01s linear 4s forwards;
}
@keyframes loaderAutoHide {
    to { opacity: 0; pointer-events: none; visibility: hidden; }
}

.loader-bg {
    position: absolute;
    inset: 0;
    background: url('assets/newic/fon/fon1.png') center/cover no-repeat;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.05);
}

.loader-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 14%, rgba(255,0,204,.24), transparent 38%),
        radial-gradient(circle at 78% 24%, rgba(0,212,255,.2), transparent 42%),
        linear-gradient(to bottom, rgba(5, 6, 15, .25), rgba(5, 6, 15, .74));
    backdrop-filter: blur(1.5px);
}

.loader-card {
    position: relative;
    z-index: 2;
    width: min(88vw, 390px);
    padding: 20px 18px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.2);
    background: linear-gradient(165deg, rgba(10,13,28,.8), rgba(10,13,28,.56));
    box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 30px rgba(157,0,255,.24);
    text-align: center;
}

.loader-kicker {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .9px;
    color: #ffd9fa;
    opacity: .95;
}

.loader-title {
    margin-top: 6px;
    font-size: clamp(24px, 5.6vw, 34px);
    line-height: 1.04;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 18px rgba(255,0,204,.34);
}

.loader-subtitle {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #d1d9ea;
    opacity: .92;
}

.loader-progress {
    margin-top: 12px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.loader-progress-bar {
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8a3bff, #ff00cc, #73d8ff);
    box-shadow: 0 0 16px rgba(255,0,204,.45);
    animation: loaderBarPulse 1.6s ease-in-out infinite;
}

.loader-text {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #f3f7ff;
    letter-spacing: .9px;
    opacity: .94;
}

@keyframes loaderBarPulse {
    0%, 100% { width: 34%; filter: saturate(1); }
    50% { width: 76%; filter: saturate(1.3); }
}

@keyframes caseFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.006); }
}

@keyframes caseNeonPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.14); }
}

/* Кастомный скроллбар */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { 
    background: linear-gradient(var(--accent-pink), var(--accent-purple)); 
    border-radius: 10px;
}

/* --- ГЛАВНЫЙ КОНТЕЙНЕР ПРИЛОЖЕНИЯ --- */
#app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100vh;
    max-width: 500px; /* Для ПК-версии */
    margin: 0 auto;
    background: radial-gradient(circle at top, #1a1a2e 0%, #0a0a0f 100%);
    position: relative;
}

.content-scroll {
    flex: 1;
    min-height: 0;
}

/* --- HEADER (TOP BAR) --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
}

.music-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    color: var(--gold);
    font-weight: 900;
    font-size: 18px;
    transition: transform .2s ease, box-shadow .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.music-toggle.active {
    box-shadow: 0 0 16px rgba(255, 204, 0, .4);
    transform: scale(1.06);
}

.back-btn {
    position: fixed;
    left: 14px;
    top: 64px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 19, .84);
    color: #fff;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.back-btn:active {
    transform: scale(0.94);
}

.user-block { display: flex; align-items: center; gap: 10px; }
.avatar-wrapper {
    cursor: pointer;
}
.avatar-wrapper img {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 2px solid var(--accent-pink);
    box-shadow: 0 0 15px rgba(255, 0, 204, 0.3);
}

.nickname { font-weight: 800; font-size: 14px; display: block; }
.status { font-size: 9px; color: var(--success); text-transform: uppercase; letter-spacing: 1px; }

.balance-block {
    background: var(--glass);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border);
    transition: transform 0.2s;
}
.balance-block:active { transform: scale(0.95); }

.deposit-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(45deg, var(--accent-pink), var(--accent-purple));
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#balance { font-weight: 900; color: var(--gold); font-size: 16px; }
.coin-icon { width: 20px; height: 20px; animation: pulse 2s infinite; }

/* --- КНОПКИ --- */
.btn-main {
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 800;
    font-size: 16px;
    padding: 15px;
    width: 100%;
    min-height: 46px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(157, 0, 255, 0.42), inset 0 0 0 1px rgba(255,255,255,.08);
    transition: transform .18s ease, filter .18s ease, box-shadow .2s ease;
}
.btn-main:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08) saturate(1.06);
    box-shadow: 0 12px 30px rgba(157, 0, 255, .5), inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn-main:active { transform: scale(0.94); filter: brightness(1.14); transition: transform .08s ease, filter .08s ease; }

.btn-main:disabled {
    opacity: .65;
    box-shadow: none;
}

/* Button ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: rippleExpand 0.6s ease-out forwards;
}

@keyframes rippleExpand {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

/* --- КАРТОЧКИ ИГР (ГРИД) --- */
.game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 20px;
}

#screen-games {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: calc(84px + var(--safe-bottom));
}

#screen-games::before,
#screen-games::after {
    content: "";
    position: absolute;
    width: 72vw;
    height: 72vw;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(22px);
    opacity: .44;
}

#screen-games::before {
    left: -26vw;
    top: -18vw;
    background: radial-gradient(circle, rgba(157, 0, 255, .45), transparent 68%);
    animation: liveBlobOne 12s ease-in-out infinite;
}

#screen-games::after {
    right: -24vw;
    bottom: -22vw;
    background: radial-gradient(circle, rgba(255, 0, 204, .42), transparent 68%);
    animation: liveBlobTwo 14s ease-in-out infinite;
}

#screen-games .main-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 18%, rgba(255,255,255,.06) 50%, transparent 82%);
    opacity: .7;
    animation: sheenSweep 9s ease-in-out infinite;
}

#screen-games .main-banner,
#screen-games .game-grid,
#screen-games .feed-wrap {
    position: relative;
    z-index: 1;
}

.main-banner {
    text-align: center;
    padding: 20px 20px 6px;
}

.neon-text {
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(157,0,255,.6), 0 0 40px rgba(255,0,204,.4);
    letter-spacing: 1px;
    line-height: 1.1;
}

.neon-text .pink {
    color: var(--accent-pink);
    text-shadow: 0 0 20px rgba(255,0,204,.7), 0 0 40px rgba(255,0,204,.35);
}

.main-banner p {
    margin-top: 4px;
    font-size: 12px;
    color: #b0b5cc;
    font-weight: 600;
    letter-spacing: .3px;
}

.feed-wrap {
    margin: 0 20px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px;
}

.feed-head {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.feed-list {
    display: grid;
    gap: 6px;
}

.feed-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: 11px;
    background: rgba(0,0,0,.2);
}

.feed-row b {
    color: var(--gold);
    font-size: 11px;
}

.game-item {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    min-height: 164px;
    cursor: pointer;
    isolation: isolate;
    transform: translateZ(0);
}
.game-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 12%, rgba(255,255,255,.12), transparent 42%), linear-gradient(135deg, transparent 18%, rgba(255,255,255,.04) 50%, transparent 82%);
    opacity: .6;
    z-index: 0;
    animation: cardSheen 7.5s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}
.game-item > * {
    position: relative;
    z-index: 2;
}
.game-item::after {
    content: "";
    position: absolute;
    inset: auto 14px 10px 14px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    opacity: .55;
    filter: blur(.2px);
    z-index: 1;
    animation: cardPulseLine 4.8s ease-in-out infinite;
}
.game-item:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 20px 44px rgba(0,0,0,.32), 0 0 30px rgba(157,0,255,.22);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.game-item:hover img {
    transform: translateY(-2px) scale(1.07);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .28s ease;
}

.game-item:active {
    transform: translateY(1px) scale(.985);
    border-color: rgba(255, 0, 204, .72);
    background: #161622;
    box-shadow: 0 0 26px rgba(157,0,255,.18);
}

.game-item img {
    width: 80px; height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    transition: transform .22s ease, filter .22s ease;
    display: block;
    transform: translateZ(0);
}

.game-item h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; position: relative; z-index: 2; margin-bottom: 4px; }
.game-item span { font-size: 10px; color: #b0b5cc; position: relative; z-index: 2; }

.game-item-thimbles {
    background: url('assets/MENUFON/NAPERST.png') center/cover no-repeat;
    border: none;
    justify-content: flex-end;
    padding: 8px;
    background-size: 120% 120%;
    background-position: center center;
}
.game-item-thimbles::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
    z-index: 1;
}
.game-item-thimbles h3,
.game-item-thimbles span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
    padding-bottom: 0;
    margin-top: auto;
}
.game-item-thimbles h3 { color: #fff; margin-bottom: 0; }
.game-item-thimbles span { color: rgba(255,255,255,.85); }
.game-item-thimbles .badge { z-index: 2; }
.game-item-thimbles:active {
    background: url('assets/MENUFON/NAPERST.png') center/cover no-repeat;
    border-color: rgba(255,255,255,.15);
}

/* Crash full background */
.game-item-crash {
    background: url('assets/MENUFON/krashs.png') center/cover no-repeat;
    border: none;
    justify-content: flex-end;
    padding: 8px;
    background-position: center center;
}
.game-item-crash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
}
.game-item-crash h3,
.game-item-crash span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
    padding-bottom: 0;
    margin-top: auto;
}
.game-item-crash h3 { color: #fff; margin-bottom: 0; }
.game-item-crash span { color: rgba(255,255,255,.85); }
.game-item-crash .badge { z-index: 2; }
.game-item-crash:active {
    background: url('assets/MENUFON/krashs.png') center/cover no-repeat;
    border-color: rgba(255,255,255,.15);
}

/* Mines full background */
.game-item-mines {
    background: url('assets/MENUFON/mines.png') center/cover no-repeat;
    border: none;
    justify-content: flex-end;
    padding: 8px;
    background-size: 120% 120%;
    background-position: center center;
}
.game-item-mines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
}
.game-item-mines h3,
.game-item-mines span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
    padding-bottom: 0;
    margin-top: auto;
}
.game-item-mines h3 { color: #fff; margin-bottom: 0; }
.game-item-mines span { color: rgba(255,255,255,.85); }
.game-item-mines .badge { z-index: 2; }
.game-item-mines:active {
    background: url('assets/MENUFON/mines.png') center/cover no-repeat;
    border-color: rgba(255,255,255,.15);
}

/* Cases full background */
.game-item-cases {
    background: url('assets/MENUFON/cases.png') center/cover no-repeat;
    border: none;
    justify-content: flex-end;
    padding: 8px;
    background-size: 120% 120%;
    background-position: center center;
}
.game-item-cases::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
}
.game-item-cases h3,
.game-item-cases span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
    padding-bottom: 0;
    margin-top: auto;
}
.game-item-cases h3 { color: #fff; margin-bottom: 0; }
.game-item-cases span { color: rgba(255,255,255,.85); }
.game-item-cases .badge { z-index: 2; }
.game-item-cases:active {
    background: url('assets/MENUFON/cases.png') center/cover no-repeat;
    border-color: rgba(255,255,255,.15);
}

.badge {
    position: absolute; top: 10px; right: 10px;
    background: var(--danger);
    padding: 3px 7px; border-radius: 6px;
    font-size: 8px; font-weight: 900; color: white;
    z-index: 3;
}
.badge.dev {
    background: linear-gradient(135deg, #ff3b30, #ff6b5b);
    color: #fff;
    font-size: 7px;
    letter-spacing: .4px;
    padding: 4px 8px;
    border-radius: 8px;
    box-shadow: 0 0 14px rgba(255, 59, 48, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    animation: devPulse 2.2s ease-in-out infinite;
}
@keyframes devPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 59, 48, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
    50% { box-shadow: 0 0 22px rgba(255, 59, 48, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

/* --- НИЖНЯЯ НАВИГАЦИЯ --- */
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    z-index: 900;
    background: linear-gradient(180deg, rgba(8, 8, 14, 0.72), rgba(8, 8, 14, 0.98));
    backdrop-filter: blur(26px) saturate(1.22);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 6px;
    padding: 8px 10px calc(10px + var(--safe-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -16px 34px rgba(0,0,0,.34);
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-dim);
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
    flex: 1;
    min-height: 52px;
    justify-content: center;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 2px;
}

.nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(157,0,255,.22), transparent 64%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.nav-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%) scaleX(0.35);
    background: linear-gradient(90deg, rgba(255,0,204,0), rgba(255,0,204,.92), rgba(157,0,255,.92), rgba(255,0,204,0));
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 0 12px rgba(255,0,204,.35);
}

.nav-btn.active {
    color: #fff;
    background: radial-gradient(circle at top, rgba(255,0,204,.15), transparent 70%);
    transform: translateY(-2px);
}

.nav-btn.active::before {
    opacity: 1;
}

.nav-btn.active::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

.nav-btn:active {
    transform: translateY(1px) scale(.99);
}
.nav-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: 150% 150%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    opacity: .95;
    z-index: 1;
    transition: opacity .2s ease, transform .3s ease;
    transform-origin: center;
}
.nav-btn.active .nav-icon {
    opacity: 1;
    transform: scale(1.08);
}

/* Иконки (PNG из assets/newic/cnopa) */
.home { background-image: url("assets/newic/cnopa/gaming.png"); }
.tops { background-image: url("assets/newic/cnopa/top-10.png"); }
.shop { background-image: url("assets/newic/cnopa/shop.png"); }
.user { background-image: url("assets/newic/cnopa/profile.png"); }

.nav-btn span {
    position: relative;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
    margin-top: auto;
    padding-bottom: 2px;
}

.nav-btn.active span {
    text-shadow: 0 0 12px rgba(255,0,204,.32), 0 2px 8px rgba(0,0,0,.9);
}

/* Центральная кнопка-сердце */
.nav-btn-center {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,0,204,.95), rgba(157,0,255,.95));
    border: 3px solid rgba(255,255,255,.25);
    box-shadow: 0 4px 18px rgba(255,0,204,.45), inset 0 1px 0 rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    margin-top: -22px;
    position: relative;
    z-index: 5;
}
.nav-btn-center:active {
    transform: scale(.92);
}
.nav-btn-center .heart {
    font-size: 26px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
    line-height: 1;
}

/* --- АНИМАЦИИ --- */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: brightness(1.2); }
    100% { transform: scale(1); }
}

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

@keyframes bgShift {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(2%, -1.5%) scale(1.06); }
}

@keyframes battlePulse {
    0%,100% { box-shadow: 0 0 40px rgba(157,0,255,.3); }
    50% { box-shadow: 0 0 70px rgba(255,0,204,.45); }
}

@keyframes arenaBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(calc(var(--ax, 0) * 8px), calc(var(--ay, 0) * 8px)) scale(0); opacity: 0; }
}

@keyframes thimblesSpark {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--sx, 0), var(--sy, -60px)) scale(0); opacity: 0; }
}

@keyframes fridgeSteam {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0.8; }
    100% { transform: translate(var(--dx, 0), var(--dy, -60px)) scale(1.5); opacity: 0; }
}

/* ===== DAILY BONUS ===== */
.daily-modal-card {
    background: linear-gradient(180deg, #1a0a2e, #0d0520) !important;
    border: 2px solid #ffd700 !important;
    max-width: 380px !important;
    padding: 24px 20px !important;
    text-align: center;
}

.daily-title {
    color: #ffd700;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 6px;
    text-shadow: 0 0 15px rgba(255,215,0,0.4);
}

.daily-sub {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 16px;
}

.daily-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}

.daily-day {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.daily-day.today {
    border-color: #ffd700;
    background: rgba(255,215,0,0.15);
    box-shadow: 0 0 12px rgba(255,215,0,0.3);
}

.daily-day.claimed {
    border-color: #00ff88;
    background: rgba(0,255,136,0.08);
    opacity: 0.7;
}

.daily-day-num {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
}

.daily-day-reward {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.daily-check { color: #00ff88; font-weight: 900; }
.daily-arrow { color: #ffd700; animation: pulse .8s ease-in-out infinite; }

.daily-claim-btn {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    padding: 14px !important;
    box-shadow: 0 4px 20px rgba(255,215,0,0.4) !important;
}

/* ===== PROFILE ===== */
.profile-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 14px;
}

.pstat-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.pstat-label {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.pstat-val {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

.profile-exp-section {
    margin: 8px 14px 16px;
    text-align: center;
}

.exp-bar-wrap {
    height: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    overflow: hidden;
}

.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #9d00ff, #ff00cc);
    border-radius: 4px;
    transition: width .6s ease;
    box-shadow: 0 0 10px rgba(157,0,255,.5);
}

.exp-text {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    display: block;
}

.ach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 14px;
}

.ach-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: all .3s;
}

.ach-card.unlocked {
    border-color: rgba(255,215,0,.4);
    background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(255,215,0,.04));
}

.ach-card.locked {
    opacity: .5;
    filter: grayscale(.6);
}

.ach-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 4px;
}

.ach-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    display: block;
}

.ach-desc {
    font-size: 9px;
    color: var(--text-dim);
    display: block;
    margin-top: 2px;
}

.ach-check { color: #00ff88; font-weight: 900; font-size: 14px; }
.ach-lock { font-size: 12px; opacity: .5; }

@keyframes liveBlobOne {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .34; }
    50% { transform: translate(6vw, 4vw) scale(1.16); opacity: .55; }
}

@keyframes liveBlobTwo {
    0%, 100% { transform: translate(0, 0) scale(1.02); opacity: .3; }
    50% { transform: translate(-7vw, -5vw) scale(1.18); opacity: .56; }
}

body.perf-lite::before {
    animation-duration: 22s;
    opacity: .42;
}

body.perf-lite #screen-games::before,
body.perf-lite #screen-games::after {
    animation-duration: 22s;
    filter: blur(16px);
    opacity: .32;
}

body.perf-lite .spinner,
body.perf-lite .coin-icon,
body.perf-lite .result-image,
body.perf-lite .result-image-wrap::after,
body.perf-lite .case-live-icons,
body.perf-lite .canvas-container.battle,
body.perf-lite .case-card-ui {
    animation: none !important;
}

body.perf-lite::after,
body.perf-lite #screen-games .main-banner::after,
body.perf-lite .case-opening-vfx::before,
body.perf-lite .case-viewport::after,
body.perf-lite .item-card.is-win::after,
body.perf-lite .toast-item.success {
    animation: none !important;
}

body.perf-lite .page.active.enter {
    animation-duration: .18s;
}

body.perf-lite .btn-main,
body.perf-lite .game-item,
body.perf-lite .case-card-ui,
body.perf-lite .modal-card,
body.perf-lite .crash-area .crash-rocket {
    transition-duration: .14s !important;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    #screen-games::before,
    #screen-games::after,
    #screen-games .main-banner::after,
    .spinner,
    .coin-icon,
    .result-image,
    .result-image-wrap::after,
    .case-live-icons,
    .canvas-container.battle,
    .case-card-ui,
    .case-opening-vfx::before,
    .case-viewport::after,
    .item-card.is-win::after,
    .toast-item.success {
        animation: none !important;
    }

    .page.active.enter {
        animation-duration: .18s;
    }
}

.page {
    display: none;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(84px + var(--safe-bottom));
    overscroll-behavior-y: contain;
    opacity: 0;
    transform: translateY(8px) scale(.995);
}
.page.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.page.active.enter { animation: pageFade .32s ease-out forwards; }

@keyframes pageFade {
    from { opacity: 0; transform: translateY(8px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Конец 7 части (Первая половина CSS). Далее пойдут стили для Краша, Мин и Арены. */
/* --- MINES GAME (СЕТКА 5x5) --- */
.mines-container {
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: calc(100vh - 210px);
}

.mines-selects-row {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
.mines-select-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mines-select-wrap label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    padding-left: 4px;
}
.mines-select-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.mines-select-inner select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(8, 15, 30, .9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 14px 40px 14px 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mines-select-inner select:focus {
    border-color: rgba(157,0,255,.5);
    box-shadow: 0 0 16px rgba(157,0,255,.18);
}
.mines-select-inner select option {
    background: #0d0f1a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.mines-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}

.mines-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mines-status span {
    background: rgba(8, 11, 22, .9);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #d6dfef;
}

.mines-bet-panel {
    display: grid;
    gap: 8px;
}

.mines-bet-row {
    display: grid;
    grid-template-columns: minmax(122px, 1fr) minmax(0, 1.8fr);
    gap: 8px;
}

.bet-boost-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(157,0,255,.08), rgba(255,0,204,.05));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.bet-boost-row > button {
    min-height: 44px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: linear-gradient(145deg, rgba(157,0,255,.22), rgba(255,0,204,.14));
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.02);
}

.bet-boost-row > button:active {
    transform: translateY(1px) scale(.99);
}

.mines-bet-input-wrap {
    background: rgba(7, 9, 20, .92);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mines-bet-input-wrap input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.mines-bet-input-wrap span {
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
}

.mines-action-btn {
    min-height: 44px;
}

.mines-quick-bets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.mines-q-btn {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(157,0,255,.16), rgba(255,0,204,.1));
    color: #e9e4ff;
    font-size: 11px;
    font-weight: 800;
    min-height: 36px;
}

.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    max-height: 44vh;
    background: radial-gradient(ellipse at 50% 40%, rgba(90,0,140,.55), rgba(8,6,18,.98));
    border-radius: 18px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Grid sizes 1x1 .. 7x7 */
.mines-grid.size-1 {
    grid-template-columns: repeat(1, 1fr);
    max-width: min(120px, 40vw);
    margin: 0 auto;
}
.mines-grid.size-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: min(240px, 58vw);
    margin: 0 auto;
}
.mines-grid.size-9 {
    grid-template-columns: repeat(3, 1fr);
    max-width: min(320px, 64vw);
    margin: 0 auto;
}
.mines-grid.size-16 {
    grid-template-columns: repeat(4, 1fr);
    max-width: min(400px, 82vw);
    margin: 0 auto;
}
.mines-grid.size-25 {
    grid-template-columns: repeat(5, 1fr);
    max-width: min(460px, 94vw);
    margin: 0 auto;
    max-height: 54vh;
    gap: 11px;
}
.mines-grid.size-36 {
    grid-template-columns: repeat(6, 1fr);
    max-width: min(420px, 92vw);
    margin: 0 auto;
    gap: 8px;
}
.mines-grid.size-49 {
    grid-template-columns: repeat(7, 1fr);
    max-width: min(440px, 96vw);
    margin: 0 auto;
    gap: 7px;
}

/* Smaller cells for dense grids */
.mines-grid.size-36 .mine-cell,
.mines-grid.size-49 .mine-cell {
    border-radius: 10px;
    border-width: 1px;
    font-size: 20px;
}
.mines-grid.size-36 .mine-x,
.mines-grid.size-49 .mine-x {
    font-size: 10px;
    letter-spacing: 0;
}
.mines-grid.size-36 .mine-cashout,
.mines-grid.size-49 .mine-cashout {
    font-size: 7px;
}

.mine-cell {
    background: none;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    aspect-ratio: 1 / 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
    color: #b7c1d9;
    font-size: 28px;
    font-weight: 900;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    line-height: 0;
    padding: 0;
}

.mine-cell-closed-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    border-radius: 10px;
    z-index: 0;
    display: block;
    transform: scale(1.95);
    transform-origin: center center;
}

.mine-cell.opening {
    animation: mineFlip .26s ease;
    will-change: transform;
    z-index: 1;
}

.mine-cell:not(.revealed):not(.boom)::before {
    display: none;
}

.mine-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
    opacity: .7;
    pointer-events: none;
    z-index: 1;
}

.mine-cell:active { transform: scale(0.94); }

.mine-cell.revealed {
    background: radial-gradient(circle at 30% 22%, rgba(255,0,204,.3), rgba(30,15,42,.95));
    border-color: rgba(255,0,204,.58);
    color: #ffe1fb;
    box-shadow: 0 0 24px rgba(157,0,255,.28);
    flex-direction: column;
    gap: 1px;
}

.mine-cell.revealed::before,
.mine-cell.boom::before {
    display: none;
}

.mine-cell.boom {
    background: radial-gradient(circle at 30% 20%, rgba(255,59,48,.26), rgba(35,15,18,.96));
    border-color: rgba(255,59,48,.64);
    color: #ffd6d3;
    box-shadow: 0 0 20px rgba(255,59,48,.2);
}

.mine-x {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2px;
    color: #ffd2f5;
    text-shadow: 0 0 10px rgba(255,0,204,.35);
    order: 2;
    margin-top: 1px;
}

.mine-cashout {
    font-size: 9px;
    font-weight: 800;
    color: #ffd86f;
    line-height: 1.05;
    text-shadow: 0 0 8px rgba(255, 181, 61, .24);
    order: 1;
    margin-top: 0;
}

.mine-cashout .inline-star {
    width: .9em;
    height: .9em;
}

.mines-feed-card {
    margin-top: 2px;
    border-radius: 18px;
    border: 1px solid rgba(255,0,204,.2);
    background: linear-gradient(180deg, rgba(13,16,28,.97), rgba(9,11,20,.97));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.28);
    overflow: hidden;
    min-height: 166px;
    transition: max-height .22s ease, opacity .2s ease, transform .2s ease;
}

.mines-feed-card.compact {
    max-height: 86px;
}

.mines-feed-card.compact .mines-feed-table-head,
.mines-feed-card.compact .mines-feed-list {
    opacity: 0;
    pointer-events: none;
}

.mines-feed-card.compact .mines-feed-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.mines-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 6px;
}

.mines-feed-brand {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    color: #ff9cf0;
}

.mines-feed-tabs {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mines-feed-tab {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: #9aa4bc;
    border-radius: 9px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 800;
}

.mines-feed-tab.active {
    border-color: rgba(255,0,204,.62);
    color: #ffd8fb;
    box-shadow: inset 0 0 18px rgba(157,0,255,.2);
}

.mines-feed-table-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr .8fr;
    gap: 6px;
    padding: 0 10px 7px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
}

.mines-feed-list {
    display: grid;
    gap: 5px;
    padding: 0 10px 10px;
    max-height: 170px;
    overflow-y: auto;
}

.mines-feed-row {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr .8fr;
    gap: 6px;
    align-items: center;
    border-radius: 9px;
    padding: 7px 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
}

.mines-feed-row .profit-win {
    color: var(--success);
    font-weight: 900;
}

.mines-feed-row .profit-lose {
    color: var(--danger);
    font-weight: 900;
}

.mines-feed-row.empty {
    display: block;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
}

@keyframes mineFlip {
    from { transform: perspective(420px) rotateY(70deg) scale(.96); }
    to { transform: perspective(420px) rotateY(0deg) scale(1); }
}

/* Эффект для алмаза */
.mine-cell .gem { width: 70%; filter: drop-shadow(0 0 10px var(--accent-pink)); animation: bounce 2s infinite; }
/* Эффект для бомбы */
.mine-cell .bomb { width: 70%; filter: drop-shadow(0 0 10px var(--danger)); }

.mine-bomb-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 0 10px rgba(255,59,48,.65));
    pointer-events: none;
    animation: mineBombPop .35s cubic-bezier(.175,.885,.32,1.275) forwards;
    display: block;
    transform: scale(1);
    transform-origin: center center;
}
.mine-closed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: .9;
    pointer-events: none;
    animation: mineCellPop .25s cubic-bezier(.175,.885,.32,1.275) forwards;
    display: block;
    transform: scale(1.95);
    transform-origin: center center;
}
@keyframes mineBombPop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes mineCellPop {
    from { transform: scale(.78); opacity: 0; }
    to   { transform: scale(1.95); opacity: 1; }
}

@keyframes mineBombParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--vx, 0), var(--vy, 80px)) scale(0); opacity: 0; }
}

@keyframes mineFlash {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes cardSheen {
    0%, 100% { transform: translateX(0); opacity: .5; }
    50% { transform: translateX(2px); opacity: .8; }
}

@keyframes cardPulseLine {
    0%, 100% { opacity: .35; transform: scaleX(.96); }
    50% { opacity: .72; transform: scaleX(1); }
}

/* --- CRASH ENGINE (PRO VISUAL) --- */
#screen-crash {
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

#screen-crash.page.active {
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(92px + var(--safe-bottom));
}

.crash-area {
    flex: 0 0 auto;
    height: clamp(200px, 30dvh, 280px);
    margin: 4px 14px 0;
    background: radial-gradient(circle at 60% 20%, rgba(157, 0, 255, 0.15), rgba(4, 7, 28, 0.92) 56%, rgba(3, 4, 14, 0.98));
    border-radius: 26px;
    position: relative;
    border: 2px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(157, 0, 255, 0.1), 0 16px 32px rgba(0, 0, 0, 0.35);
}

.crash-area > * {
    position: relative;
    z-index: 2;
}

.crash-area::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 72px;
    background: linear-gradient(to top, rgba(3,4,14,.95), transparent);
    pointer-events: none;
    z-index: 1;
}

.crash-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .25;
    pointer-events: none;
}

.crash-area .crash-multiplier {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 900;
    z-index: 20;
    text-shadow: 0 0 12px var(--accent-purple);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
    pointer-events: none;
}

.crash-area .timer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 15;
    background: rgba(3, 4, 14, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
}
.crash-area .timer-overlay span {
    font-size: clamp(28px, 8vw, 42px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    line-height: 1;
}
.crash-area .timer-overlay p {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 0;
}

.crash-area .crash-rocket {
    position: absolute !important;
    width: clamp(100px, 35vw, 160px);
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 12;
    filter: drop-shadow(0 14px 28px rgba(27, 133, 255, 0.45));
    will-change: transform;
    transform-origin: 50% 72%;
}

.crash-history-panel {
    margin: 8px 14px 0;
    padding: 10px 12px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}

.crash-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.crash-history-title {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-dim);
}

.crash-history-status {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: rgba(255,255,255,.8);
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(157,0,255,.25), rgba(157,0,255,.08));
    border: 1px solid rgba(157,0,255,.4);
    box-shadow: 0 0 10px rgba(157,0,255,.2);
    animation: crashStatusPulse 2s ease-in-out infinite;
}

@keyframes crashFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes crashStatusPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(157,0,255,.15); }
    50% { box-shadow: 0 0 14px rgba(157,0,255,.4); }
}

.crash-history-pills {
    display: flex;
    gap: 7px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.history-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    letter-spacing: .3px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    color: #cfd6e8;
    transition: transform .15s ease, box-shadow .2s ease;
}
.history-item:hover {
    transform: translateY(-2px);
}
.history-item.tier-bust {
    color: #ff7a8a;
    background: linear-gradient(180deg, rgba(255,46,80,.22), rgba(255,46,80,.06));
    border-color: rgba(255,46,80,.45);
    box-shadow: 0 0 10px rgba(255,46,80,.18);
}
.history-item.tier-low {
    color: #c5cee0;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.14);
}
.history-item.tier-mid {
    color: #6ee7b7;
    background: linear-gradient(180deg, rgba(0,217,139,.22), rgba(0,217,139,.05));
    border-color: rgba(0,217,139,.4);
    box-shadow: 0 0 10px rgba(0,217,139,.18);
}
.history-item.tier-high {
    color: #b39bff;
    background: linear-gradient(180deg, rgba(157,0,255,.28), rgba(157,0,255,.08));
    border-color: rgba(157,0,255,.5);
    box-shadow: 0 0 12px rgba(157,0,255,.28);
}
.history-item.tier-mega {
    color: #ffe27a;
    background: linear-gradient(180deg, rgba(255,204,0,.32), rgba(255,128,0,.10));
    border-color: rgba(255,204,0,.55);
    box-shadow: 0 0 14px rgba(255,204,0,.35);
}
.history-item.win { color: var(--success); }
.history-item.lose { color: var(--danger); }

.crash-bets-card {
    order: 3;
    margin: 0 14px 0;
    padding: 10px;
    border-radius: 18px;
    background: rgba(30, 36, 62, 0.72);
    border: 1px solid rgba(255,255,255,.09);
}

.crash-bets-head {
    display: grid;
    grid-template-columns: 1fr auto;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.crash-live-bets {
    display: grid;
    gap: 7px;
    padding-right: 2px;
}

.crash-cashout-preview {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 204, 0, .18);
    background: linear-gradient(145deg, rgba(157,0,255,.18), rgba(255,0,204,.08));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.18);
}

.crash-cashout-preview-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: .6px;
    margin-bottom: 8px;
}

.crash-cashout-preview-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crash-cashout-preview-body img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 0 16px rgba(157,0,255,.18);
}

.crash-cashout-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crash-cashout-preview-meta span {
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.crash-cashout-preview-meta b {
    font-size: 12px;
    color: var(--gold);
    font-weight: 900;
}

/* --- SLOTS ENGINE --- */
#screen-slots {
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
}
#screen-slots.page.active {
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(92px + var(--safe-bottom));
}

.slots-live-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.slots-live-icons {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.slots-live-icons img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
}

.slots-machine {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 8px 14px 0;
    padding: 14px;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 30%, rgba(157,0,255,.10), rgba(4,7,28,.92) 60%, rgba(3,4,14,.98));
    border: 2px solid var(--glass-border);
    box-shadow: inset 0 0 50px rgba(157,0,255,.08), 0 16px 32px rgba(0,0,0,.35);
    position: relative;
}

.slots-reel-wrap {
    width: clamp(78px, 24vw, 100px);
    height: clamp(78px, 24vw, 100px);
    border-radius: 16px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 4px 12px rgba(0,0,0,.4);
}
.slots-reel-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 18px rgba(157,0,255,.15);
    pointer-events: none;
}

.slots-reel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.23,1,.32,1), filter .25s ease;
    will-change: transform;
    transform: translateZ(0);
}
.slots-reel img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
    transition: transform .3s ease;
}

.slots-reel.is-spinning img {
    animation: slotsBlur .22s linear infinite;
    filter: blur(2px) brightness(1.15);
}
.slots-reel.is-snapping {
    transform: scale(1.06);
}
.slots-reel.is-win-glow {
    animation: slotsWinPulse .8s ease-in-out 2;
}
.slots-reel.is-near-miss {
    animation: slotsNearMiss .55s ease-in-out;
}

@keyframes slotsBlur {
    0% { transform: translateY(-6px) scale(.92); opacity: .7; }
    50% { transform: translateY(6px) scale(1.04); opacity: 1; }
    100% { transform: translateY(-6px) scale(.92); opacity: .7; }
}
@keyframes slotsWinPulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(0,217,139,0); border-color: rgba(255,255,255,.12); }
    50% { box-shadow: inset 0 0 30px rgba(0,217,139,.35); border-color: rgba(0,217,139,.6); }
}
@keyframes slotsNearMiss {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes slotCoinDrop {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(80vh) scale(0.4) rotate(360deg); opacity: 0; }
}

.slots-divider {
    height: 1px;
    margin: 0 24px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.slots-prizes-btn {
    margin: 0 14px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .3px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #d4dce8;
    cursor: pointer;
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.slots-prizes-btn:active {
    transform: scale(.97);
}
.slots-prizes-btn:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
}

.slots-prizes-head {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-dim);
    letter-spacing: .35px;
    margin: 0 16px;
    text-align: center;
}
.slots-prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 14px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.slots-prize-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.slots-prize-cell img {
    width: 68%;
    height: 68%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

.slots-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 14px;
}
.slots-tier-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #b7c1d9;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .12s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.slots-tier-btn:active { transform: scale(.96); }
.slots-tier-btn.active {
    background: linear-gradient(180deg, rgba(157,0,255,.28), rgba(157,0,255,.10));
    border-color: rgba(157,0,255,.5);
    color: #fff;
    box-shadow: 0 0 14px rgba(157,0,255,.22);
}

.slots-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 16px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
}
.slots-rtp {
    color: #6ee7b7;
    background: rgba(0,217,139,.12);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,217,139,.25);
}
.slots-info {
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease;
}
.slots-info:hover { opacity: 1; }

.slots-spin-btn {
    margin: 0 14px 6px;
    padding: 14px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .4px;
    background: linear-gradient(45deg, #2b6aff, #8a3bff);
    box-shadow: 0 8px 24px rgba(43, 106, 255, .35);
    position: relative;
    overflow: hidden;
}
.slots-spin-btn:disabled {
    opacity: .55;
    filter: grayscale(.4);
    cursor: not-allowed;
}
.slots-spin-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translateX(-100%);
}
.slots-spin-btn:not(:disabled):active::after {
    transform: translateX(100%);
    transition: transform .45s ease;
}

.slots-result-modal .result-modal-card.is-win {
    border-color: rgba(0,217,139,.45);
    box-shadow: 0 0 40px rgba(0,217,139,.18);
}

@media (max-width: 380px) {
    .slots-reel-wrap {
        width: clamp(64px, 22vw, 84px);
        height: clamp(64px, 22vw, 84px);
    }
    .slots-tier-btn {
        font-size: 11px;
        padding: 8px 0;
    }
    .slots-prizes-grid {
        gap: 6px;
    }
}

.crash-bet-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(8, 10, 22, 0.55);
    border: 1px solid rgba(255,255,255,.06);
}

.crash-bet-row.is-live {
    border-color: rgba(157,0,255,.18);
    background: linear-gradient(145deg, rgba(18, 16, 38, 0.72), rgba(8, 10, 22, 0.56));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.crash-bet-row.is-live .crash-status.pending {
    animation: crashLivePulse 1.05s ease-in-out infinite;
}

.crash-x-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    min-width: 58px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .3px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.crash-x-badge.is-live {
    color: #ffffff;
    background: linear-gradient(145deg, rgba(157,0,255,.35), rgba(255,0,204,.18));
    border-color: rgba(157,0,255,.26);
    box-shadow: 0 0 14px rgba(157,0,255,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}

.crash-x-badge.is-cashout {
    color: var(--success);
    background: linear-gradient(145deg, rgba(0,255,136,.18), rgba(0,255,136,.08));
    border-color: rgba(0,255,136,.24);
    box-shadow: 0 0 14px rgba(0,255,136,.14), inset 0 0 0 1px rgba(255,255,255,.04);
}

.crash-x-badge.is-lost {
    color: var(--danger);
    background: linear-gradient(145deg, rgba(255,59,48,.18), rgba(255,59,48,.08));
    border-color: rgba(255,59,48,.24);
    box-shadow: 0 0 14px rgba(255,59,48,.14), inset 0 0 0 1px rgba(255,255,255,.04);
}

.crash-bet-row.is-cashout {
    border-color: rgba(0,255,136,.28);
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.14), rgba(8, 10, 22, 0.6));
    box-shadow: 0 0 18px rgba(0,255,136,.08), inset 0 0 0 1px rgba(0,255,136,.06);
}

.crash-bet-row.is-lost {
    border-color: rgba(255,59,48,.28);
    background: linear-gradient(145deg, rgba(255,59,48,.12), rgba(8, 10, 22, 0.6));
    box-shadow: 0 0 18px rgba(255,59,48,.08), inset 0 0 0 1px rgba(255,59,48,.06);
}

.crash-bet-row.is-crash-impact {
    animation: crashImpactShake .42s ease-in-out var(--impact-delay, 0ms) 1 both;
}

.crash-bet-row.is-crash-impact .crash-user-dot {
    animation: crashDotFlash .42s ease-in-out var(--impact-delay, 0ms) 1 both;
}

.crash-bet-row.is-crash-impact .crash-x-badge,
.crash-bet-row.is-crash-impact .crash-prize,
.crash-bet-row.is-crash-impact .crash-status {
    animation: crashTextFlash .42s ease-in-out var(--impact-delay, 0ms) 1 both;
}

@keyframes crashImpactShake {
    0% {
        transform: translateX(0) scale(1);
        filter: saturate(1);
    }
    15% {
        transform: translateX(-4px) scale(1.01);
        filter: saturate(1.15);
    }
    30% {
        transform: translateX(4px) scale(1.01);
    }
    45% {
        transform: translateX(-3px) scale(1);
    }
    60% {
        transform: translateX(3px) scale(1);
    }
    100% {
        transform: translateX(0) scale(1);
        filter: saturate(1.05);
    }
}

@keyframes crashDotFlash {
    0% {
        background: linear-gradient(145deg, rgba(255,0,204,.3), rgba(64, 130, 255, .35));
        box-shadow: 0 0 0 rgba(255,59,48,0);
    }
    35% {
        background: linear-gradient(145deg, rgba(255,59,48,.45), rgba(255,59,48,.2));
        box-shadow: 0 0 16px rgba(255,59,48,.3);
    }
    100% {
        background: linear-gradient(145deg, rgba(255,59,48,.24), rgba(255,59,48,.12));
        box-shadow: 0 0 10px rgba(255,59,48,.18);
    }
}

@keyframes crashTextFlash {
    0% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: none;
    }
    35% {
        opacity: 1;
        transform: translateY(-1px);
        text-shadow: 0 0 10px rgba(255,59,48,.32);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: 0 0 6px rgba(255,59,48,.18);
    }
}

.crash-bet-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crash-user-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,0,204,.3), rgba(64, 130, 255, .35));
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.crash-user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crash-user-name {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.crash-user-bet {
    font-size: 12px;
    color: var(--gold);
    font-weight: 800;
}

.crash-bet-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crash-prize {
    font-size: 12px;
    color: #fff;
    font-weight: 800;
}

.crash-status {
    font-size: 12px;
    font-weight: 900;
}

.crash-status.pending { color: #9aa3b8; }
.crash-status.cashout { color: var(--success); }
.crash-status.lost { color: var(--danger); }

@keyframes crashLivePulse {
    0%, 100% {
        color: #c6ccdd;
        text-shadow: 0 0 0 rgba(157,0,255,0);
        transform: translateY(0);
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(157,0,255,.35);
        transform: translateY(-1px);
    }
}

.crash-bet-row.is-empty {
    display: block;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
}

/* --- ARENA PvP (БИТВА) --- */
.arena-header {
    background: linear-gradient(135deg, rgba(255,0,204,.18), rgba(157,0,255,.34));
    margin: 14px 14px 10px;
    padding: 16px 18px;
    border-radius: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,.06);
}

.arena-pot-title { font-size: 10px; font-weight: 800; opacity: 0.8; }
.arena-pot-value { font-size: 24px; font-weight: 900; }

.canvas-container {
    position: relative;
    width: min(92vw, 390px);
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.72), inset 0 0 30px rgba(157,0,255,.08);
}

#territoryCanvas { width: 100%; display: block; background: #070814; }

.arena-ball {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, #ffffff, #edf2ff 34%, #b8c3d9 60%, #4a5264 100%);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow:
        0 0 0 4px rgba(255,255,255,.06),
        0 0 18px rgba(255,255,255,.42),
        0 0 30px rgba(157,0,255,.22);
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    transition: none;
}

.canvas-container.battle .arena-ball {
    box-shadow:
        0 0 0 4px rgba(255,255,255,.08),
        0 0 20px rgba(255,255,255,.55),
        0 0 34px rgba(255, 181, 61, .45);
}

.arena-bet-panel {
    margin: 12px 14px 0;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(10,12,22,.82);
}

.arena-bet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.arena-bet-step {
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    height: 38px;
}

.crash-bet-step,
.mines-bet-step {
    width: 38px;
    min-width: 38px;
}

.arena-bet-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(0,0,0,.35);
    padding: 0 12px;
    height: 38px;
}

.arena-bet-input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    outline: none;
}

.arena-bet-input-wrap span {
    color: var(--gold);
    font-weight: 900;
}

.arena-quick-bets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.arena-q-btn {
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #d7deef;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 0;
}

.arena-join-btn {
    margin-top: 10px;
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    color: #fff;
    box-shadow: 0 8px 26px rgba(157,0,255,.35);
}

.canvas-container.battle {
    animation: battlePulse .9s linear infinite;
}

.arena-players-card {
    margin: 12px 14px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.04);
}

.arena-players-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.arena-participants {
    display: grid;
    gap: 7px;
}

.arena-p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.06);
    padding: 9px 11px;
}

.arena-p-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.arena-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 0 14px rgba(157,0,255,.16);
    flex: none;
    overflow: hidden;
}

.arena-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.arena-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.arena-name {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.arena-sub {
    font-size: 11px;
    font-weight: 700;
    color: #aeb4c9;
}

.bot-badge {
    margin-left: 6px;
    font-size: 9px;
    font-weight: 800;
    color: #ff9bf4;
    background: rgba(157,0,255,.2);
    border: 1px solid rgba(255,255,255,.16);
    padding: 2px 5px;
    border-radius: 999px;
}

.arena-p-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ffd9a6;
    font-weight: 900;
}

.arena-chance {
    font-size: 11px;
    color: #ffd4fb;
    font-weight: 800;
}

/* --- ПАНЕЛЬ СТАВОК (ОБЩАЯ) --- */
.bet-panel {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: calc(100% - 32px);
    margin: 12px 16px 0;
    padding: 13px 16px;
    background: rgba(14, 17, 34, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bet-panel-title {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 900;
    letter-spacing: .35px;
}

.input-row { display: flex; gap: 10px; }
.bet-input-wrap {
    flex: 1;
    background: #000;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bet-input-wrap input {
    background: transparent;
    border: none;
    color: white;
    font-weight: 800;
    width: 100%;
    outline: none;
}

.bet-input-suffix {
    color: var(--gold);
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}

#bet-panel .input-row {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) minmax(0, 1.45fr);
    align-items: stretch;
}

#bet-panel .input-row .btn-main {
    width: auto;
}

.crash-controls {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(96px, 1fr);
    gap: 8px;
    align-items: center;
}

.crash-cashout-btn {
    background: linear-gradient(45deg, #00d98b, #00b56f);
}

.crash-cashout-main {
    display: block;
    font-weight: 900;
    line-height: 1.05;
}

.crash-cashout-sub {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    opacity: .92;
}

.crash-cashout-sub img {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 0 10px rgba(255,255,255,.22);
}

.crash-auto-toggle.active {
    border-color: rgba(255, 0, 204, .55);
    box-shadow: 0 0 18px rgba(255, 0, 204, .2);
}

.crash-auto-stop-wrap {
    height: 100%;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(6,8,22,.82);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
}

.crash-auto-stop-wrap span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .4px;
}

.crash-auto-stop-wrap input {
    width: 68px;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
}

.quick-bets { display: flex; gap: 5px; width: 100%; }
.q-btn {
    flex: 1;
    background: linear-gradient(145deg, rgba(157,0,255,.16), rgba(255,0,204,.1));
    border: 1px solid rgba(255,255,255,.18);
    color: #e9e4ff;
    font-size: 11px;
    padding: 8px 6px;
    border-radius: 999px;
    font-weight: 800;
    min-height: 44px;
    letter-spacing: .25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.arena-q-btn,
.case-soft-btn,
.inv-actions button,
.mines-feed-tab {
    min-height: 38px;
}

button,
.game-item,
.nav-btn,
.gift-card,
.case-card-ui {
    touch-action: manipulation;
}

/* --- МОДАЛКИ (РЕЗУЛЬТАТЫ) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

#modal-confirm,
#modal-input,
#modal-prizes,
#modal-case-win {
    opacity: 0;
    transition: opacity .2s ease, backdrop-filter .2s ease;
}

#modal-confirm.show,
#modal-input.show,
#modal-prizes.show,
#modal-case-win.show {
    opacity: 1;
}

.modal-overlay-soft {
    background: rgba(5,5,8,0.78);
}

.modal-card {
    position: relative;
    background: var(--bg-card);
    width: 85%;
    border-radius: 32px;
    padding: 30px;
    text-align: center;
    border: 2px solid var(--accent-pink);
    box-shadow: 0 0 50px rgba(255, 0, 204, 0.2);
}

#modal-input .input-modal-card,
#modal-prizes .prizes-modal-card,
#modal-case-win .case-win-card {
    transform: translateY(16px) scale(.96);
    opacity: 0;
    transition: transform .26s cubic-bezier(.21,.81,.29,.98), opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#modal-input.show .input-modal-card,
#modal-prizes.show .prizes-modal-card,
#modal-case-win.show .case-win-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.quick-modal-card {
    width: min(92vw, 420px);
    padding: 24px 20px 18px;
    text-align: left;
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: transform .28s cubic-bezier(.21,.81,.29,.98), opacity .22s ease;
}

#quick-info-modal {
    opacity: 0;
    transition: opacity .18s ease;
}

#quick-info-modal.show {
    opacity: 1;
}

#quick-info-modal.show .quick-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.quick-modal-card h2 {
    margin: 6px 28px 14px 0;
    font-size: 22px;
    font-weight: 900;
    text-align: left;
}

.quick-modal-body {
    display: grid;
    gap: 12px;
}

.quick-modal-copy-wrap {
    display: grid;
    gap: 10px;
}

.quick-modal-copy-wrap p,
.quick-modal-subtext,
.quick-faq-item p {
    margin: 0;
    color: #d0d4e2;
    font-size: 12px;
    line-height: 1.55;
}

.quick-modal-subtext {
    color: var(--text-dim);
}

.quick-modal-link {
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 800;
    outline: none;
}

.quick-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 2px;
}

.quick-modal-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.quick-modal-btn:active {
    transform: scale(.98);
}

.quick-modal-btn.primary {
    background: linear-gradient(90deg, rgba(157,0,255,.62), rgba(255,0,204,.48));
    border-color: rgba(157,0,255,.34);
    box-shadow: 0 0 20px rgba(157,0,255,.18);
}

.quick-faq-item {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.quick-faq-item b {
    font-size: 12px;
    color: #fff;
}

.result-modal-card {
    position: relative;
    width: min(88vw, 360px);
    padding: 24px 20px 18px;
    border-radius: 24px;
    transform: translateY(22px) scale(.94);
    opacity: 0;
    transition: transform .35s cubic-bezier(.21,.81,.29,.98), opacity .26s ease, border-color .24s ease, box-shadow .24s ease;
}

#modal-res.is-open .result-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.result-modal-card.is-win {
    border-color: rgba(0, 255, 136, .62);
    box-shadow: 0 0 46px rgba(0, 255, 136, .16);
}

.result-modal-card.is-lose {
    border-color: rgba(255, 59, 48, .65);
    box-shadow: 0 0 46px rgba(255, 59, 48, .16);
}

.result-game-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
}

.result-image-wrap {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 2px auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-image-wrap::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
    filter: blur(8px);
    z-index: 0;
    animation: resultHalo 1.8s ease-in-out infinite;
}

.result-image {
    position: relative;
    z-index: 1;
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.44));
    animation: resultFloat 1.5s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.result-text {
    margin: 2px 0 14px;
    color: #cfd4e3;
    font-size: 12px;
    font-weight: 700;
}

.result-modal-card.is-win .win-sum {
    color: var(--success);
    text-shadow: 0 0 14px rgba(0,255,136,.28);
}

.result-modal-card.is-lose .win-sum {
    color: var(--danger);
    text-shadow: 0 0 14px rgba(255,59,48,.22);
}

.result-modal-card.is-win .result-image-wrap::after {
    background: radial-gradient(circle, rgba(0,255,136,.32), transparent 72%);
}

.result-modal-card.is-lose .result-image-wrap::after {
    background: radial-gradient(circle, rgba(255,59,48,.3), transparent 72%);
}

.modal-card h2 { font-size: 28px; margin-bottom: 10px; font-weight: 900; }
.modal-card .win-sum { font-size: 32px; color: var(--success); font-weight: 900; margin: 15px 0; }

.modal-close {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.input-modal-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- DEPOSIT MODAL --- */
.deposit-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(92vw, 400px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px 18px 18px;
}
.deposit-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 59, 48, .15);
    color: #ff3b30;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    z-index: 2;
}
.deposit-close-btn:hover {
    background: rgba(255, 59, 48, .25);
    transform: scale(1.08);
}
.deposit-close-btn:active {
    transform: scale(.95);
}
.deposit-title {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
    text-align: center;
}
.deposit-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 4px;
}
.deposit-tab {
    flex: 1;
    padding: 8px 4px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.deposit-tab.active {
    background: linear-gradient(180deg, rgba(157,0,255,.55), rgba(255,0,204,.4));
    color: #fff;
    box-shadow: 0 0 14px rgba(157,0,255,.3);
}
.deposit-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: depositFadeIn .2s ease;
}
@keyframes depositFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.deposit-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 10px;
    text-align: center;
}
.deposit-placeholder-icon {
    font-size: 48px;
    opacity: .35;
}
.deposit-placeholder p {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}
.deposit-amount-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 10px 14px;
}
.deposit-amount-icon {
    font-size: 22px;
    line-height: 1;
}
.deposit-amount-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    outline: none;
    min-width: 0;
}
.deposit-amount-wrap input::placeholder {
    color: rgba(255,255,255,.25);
}
.deposit-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    padding: 0 4px;
}
.deposit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(157,0,255,.2), rgba(255,0,204,.12));
    border: 1px solid rgba(157,0,255,.3);
    font-size: 12px;
    font-weight: 700;
    color: #e8d4ff;
    cursor: pointer;
    transition: transform .15s ease;
}
.deposit-bar:active {
    transform: scale(.985);
}
.deposit-bar-arrow {
    font-size: 11px;
    color: rgba(255,255,255,.7);
}
.deposit-quick {
    display: flex;
    gap: 8px;
}
.deposit-quick button {
    flex: 1;
    padding: 10px 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.deposit-quick button span {
    font-size: 13px;
}
.deposit-quick button:active {
    transform: scale(.95);
    background: rgba(157,0,255,.2);
    border-color: rgba(157,0,255,.4);
}
.deposit-promo {
    display: flex;
    gap: 8px;
}
.deposit-promo input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    outline: none;
}
.deposit-promo input::placeholder {
    color: rgba(255,255,255,.3);
}
.deposit-promo button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(0,212,255,.6), rgba(0,150,220,.5));
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: transform .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deposit-promo button:active {
    transform: scale(.92);
}
.deposit-submit {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(90deg, rgba(157,0,255,.75), rgba(255,0,204,.55));
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 0 20px rgba(157,0,255,.25);
    margin-top: 4px;
}
.deposit-submit:active {
    transform: scale(.97);
}

.confirm-modal-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease, border-color .2s ease, box-shadow .2s ease;
}

.confirm-modal-card.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

#modal-confirm.show .confirm-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.confirm-modal-card.variant-sell {
    border-color: rgba(0,255,136,.45);
    box-shadow: 0 0 40px rgba(0,255,136,.12);
}

.confirm-modal-card.variant-withdraw {
    border-color: rgba(157,0,255,.45);
    box-shadow: 0 0 40px rgba(157,0,255,.15);
}

.confirm-modal-card.variant-buy {
    border-color: rgba(255,204,0,.5);
    box-shadow: 0 0 40px rgba(255,204,0,.16);
}

.confirm-modal-card.variant-buy .confirm-preview {
    background: linear-gradient(145deg, rgba(255,204,0,.08), rgba(157,0,255,.08));
}

.confirm-modal-card.variant-buy .confirm-text {
    color: #f3e9ff;
}

.confirm-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px;
}

.confirm-preview img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255,255,255,.04);
    transform: scale(.96);
    transition: transform .22s ease;
}

.confirm-modal-card.show .confirm-preview img {
    transform: scale(1);
}

@keyframes resultFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
}

@keyframes openingRise {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sheenSweep {
    0% { transform: translateX(-120%); opacity: 0; }
    35% { opacity: .8; }
    100% { transform: translateX(120%); opacity: 0; }
}

@keyframes vfxPulse {
    0%, 100% { transform: scale(1); opacity: .8; }
    50% { transform: scale(1.03); opacity: 1; }
}

@keyframes grainShift {
    0% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(1.5%, -.8%, 0); }
    100% { transform: translate3d(0,0,0); }
}

@keyframes resultHalo {
    0%, 100% { transform: scale(.92); opacity: .66; }
    50% { transform: scale(1.06); opacity: 1; }
}

.confirm-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.confirm-meta span {
    font-size: 12px;
    font-weight: 700;
}

.confirm-meta b {
    font-size: 12px;
    color: var(--gold);
}

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

#input-modal-field {
    width: 100%;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    padding: 12px;
    outline: none;
}

.input-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.btn-ghost {
    background: rgba(255,255,255,.06);
    box-shadow: none;
}

.toast-root {
    position: fixed;
    left: 50%;
    bottom: calc(100px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 6500;
    display: grid;
    gap: 8px;
    width: min(92vw, 360px);
    pointer-events: none;
}

.big-win-root {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6600;
    pointer-events: none;
}

.big-win-card {
    min-width: 240px;
    max-width: 88vw;
    background: linear-gradient(145deg, rgba(255,0,204,.18), rgba(157,0,255,.18));
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 14px;
    padding: 10px 12px;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transition: opacity .26s ease, transform .26s ease;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.big-win-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.big-win-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #ffd2f5;
}

.big-win-text {
    margin-top: 3px;
    font-size: 12px;
    color: #fff;
}

.big-win-val {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 900;
    color: #ff93ea;
}

.toast-item {
    background: linear-gradient(180deg, rgba(18,18,28,.96), rgba(10,10,16,.92));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease;
    pointer-events: auto;
}

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

.toast-item.success {
    border-color: rgba(0,255,136,.45);
    color: #b8ffd8;
    box-shadow: 0 10px 26px rgba(0,0,0,.24), 0 0 18px rgba(0,255,136,.08), inset 0 1px 0 rgba(255,255,255,.03);
    animation: toastSlideIn .26s ease-out, toastBreath 2.8s ease-in-out infinite;
}

.toast-item.error {
    border-color: rgba(255,59,48,.45);
    color: #ffd2cf;
}

.toast-item.info {
    border-color: rgba(0,212,255,.28);
    color: #d8f6ff;
}

@keyframes toastBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.01); }
}

@keyframes toastSlideIn {
    from { transform: translateY(8px) scale(.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.mine-cell.boom {
    background: rgba(255, 59, 48, .2);
    border-color: rgba(255, 59, 48, .8);
}

/* Конец 8 части. Стили готовы. Переходим к верстке структуры! */

.section-head {
    padding: 18px 20px 10px;
}

.section-head h2 {
    font-size: 20px;
    font-weight: 900;
}

.section-head p {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
}

.gift-shop-head {
    padding: 20px 20px 10px;
    text-align: center;
}

.gift-shop-head h2 {
    font-size: 32px;
    font-weight: 900;
}

.gift-shop-head p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-dim);
}

.gift-sort-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gift-sort-btn {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    color: #aeb7c8;
    border-radius: 10px;
    min-height: 34px;
    font-size: 11px;
    font-weight: 800;
}

.gift-sort-btn.active {
    color: #ffe4fd;
    border-color: rgba(255,0,204,.5);
    box-shadow: inset 0 0 16px rgba(157,0,255,.22), 0 0 14px rgba(255,0,204,.16);
}

.gift-shop-grid {
    margin: 10px 14px 24px;
    padding: 14px;
    border-radius: 28px;
    border: 1px solid var(--glass-border);
    background: rgba(22, 26, 44, .82);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
    content-visibility: auto;
    contain-intrinsic-size: 520px;
}

.gift-card {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    contain: layout paint;
}

.gift-card img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.34));
    backface-visibility: hidden;
}

.gift-price {
    width: 100%;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.14);
    padding: 7px 6px;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
}

.gift-card.loading {
    grid-column: 1 / -1;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(0,0,0,.24);
    border: 1px dashed rgba(255,255,255,.22);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
}

.case-grid {
    padding: 10px 20px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(155deg, rgba(8,10,22,.72), rgba(16,12,30,.48));
    box-shadow: inset 0 0 24px rgba(157,0,255,.08), 0 0 28px rgba(157,0,255,.16);
}

.case-grid.case-grid-regular {
    padding-top: 8px;
    margin: 0 20px 20px;
    padding-left: 12px;
    padding-right: 12px;
    background: linear-gradient(165deg, rgba(8,10,22,.6), rgba(12,8,26,.42));
}

.case-subhead {
    margin: 2px 20px 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;
    color: var(--text-dim);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(157,0,255,.26);
}

.cases-live-strip {
    margin: 10px 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 7px 10px;
    overflow: hidden;
}

.live-label {
    font-size: 11px;
    font-weight: 900;
    color: #fff;
}

.case-live-icons {
    display: flex;
    gap: 7px;
    white-space: nowrap;
    animation: feedScroll 18s linear infinite;
}

.case-live-icons span,
.case-live-icons img {
    flex-shrink: 0;
}
.case-live-icons span {
    font-size: 14px;
    opacity: .95;
}
.case-live-icons img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    animation: rotateIcon 4s linear infinite;
}

@keyframes feedScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-40%); }
}

@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.case-hero-wrap {
    position: relative;
    margin: 18px auto 8px;
    width: min(260px, 72vw);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-hero-glow {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,0,204,.25), rgba(157,0,255,.1));
    filter: blur(16px);
}

.case-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

.case-actions-row {
    margin: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.case-soft-btn {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px;
}

.case-speed-row {
    margin: 10px 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.case-speed-btn {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #d9deef;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
    transition: border-color .18s ease, box-shadow .2s ease, transform .14s ease, color .18s ease, background .18s ease;
}

.case-speed-btn:active {
    transform: scale(.98);
}

.case-speed-btn.active {
    color: #fff;
    border-color: rgba(255, 0, 204, .55);
    background: linear-gradient(145deg, rgba(157,0,255,.35), rgba(255,0,204,.2));
    box-shadow: 0 0 16px rgba(157,0,255,.3);
}

.case-open-btn {
    margin: 12px 20px 0;
    width: calc(100% - 40px);
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    color: #fff;
    box-shadow: 0 6px 22px rgba(157,0,255,.35);
}

.case-card-ui {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: caseFloat 4.8s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.case-card-ui:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 14px 30px rgba(0,0,0,.24), 0 0 24px rgba(157,0,255,.18);
}

.case-card-ui:nth-child(2n) { animation-delay: .55s; }
.case-card-ui:nth-child(3n) { animation-delay: 1.1s; }

.case-card-ui:active {
    transform: scale(.98);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 0 24px rgba(157,0,255,.2);
}

.case-card-ui.active {
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 0 24px rgba(157,0,255,.24);
    animation: caseFloat 4.8s ease-in-out infinite, caseNeonPulse 2.25s ease-in-out infinite;
}

.case-card-ui.bonus {
    position: relative;
    border-color: rgba(255, 215, 90, .5);
    background: linear-gradient(145deg, rgba(255,204,0,.13), rgba(255,0,204,.12) 58%, rgba(157,0,255,.1));
    box-shadow: 0 0 24px rgba(255, 204, 0, .17), 0 0 28px rgba(157,0,255,.2);
}

.case-card-ui.bonus.locked {
    border-color: rgba(255, 149, 0, .62);
    box-shadow: 0 0 24px rgba(255, 149, 0, .24), 0 0 28px rgba(157,0,255,.14);
}

.case-card-ui.bonus::before {
    content: "BONUS";
    position: absolute;
    top: -8px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.32);
    background: linear-gradient(145deg, rgba(255,204,0,.8), rgba(255,131,0,.72));
    color: #19110a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .35px;
}

.case-card-ui.bonus-top-1 { order: -2; }
.case-card-ui.bonus-top-2 { order: -1; }

.case-cooldown {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 7px;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(5, 7, 16, .72);
    color: #ffd792;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .25px;
    backdrop-filter: blur(5px);
}

.case-card-ui.regular {
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

.case-card-ui.regular.tone-violet { box-shadow: 0 0 20px rgba(157,0,255,.24), inset 0 0 16px rgba(157,0,255,.12); border-color: rgba(157,0,255,.45); }
.case-card-ui.regular.tone-azure { box-shadow: 0 0 20px rgba(0,160,255,.22), inset 0 0 16px rgba(0,160,255,.12); border-color: rgba(0,160,255,.44); }
.case-card-ui.regular.tone-pink { box-shadow: 0 0 20px rgba(255,0,204,.24), inset 0 0 16px rgba(255,0,204,.12); border-color: rgba(255,0,204,.46); }
.case-card-ui.regular.tone-gold { box-shadow: 0 0 20px rgba(255,193,7,.24), inset 0 0 16px rgba(255,193,7,.12); border-color: rgba(255,193,7,.46); }
.case-card-ui.regular.tone-cyan { box-shadow: 0 0 20px rgba(0,212,255,.24), inset 0 0 16px rgba(0,212,255,.12); border-color: rgba(0,212,255,.46); }
.case-card-ui.regular.tone-red { box-shadow: 0 0 20px rgba(255,82,82,.23), inset 0 0 16px rgba(255,82,82,.12); border-color: rgba(255,82,82,.44); }

.case-card-ui.regular.active {
    filter: saturate(1.15);
    transform: translateY(-1px);
}

.case-card-ui img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.case-card-ui h3 {
    font-size: 14px;
    font-weight: 900;
}

.case-card-ui span {
    margin-left: auto;
    font-weight: 900;
    color: var(--gold);
    font-size: 13px;
}

.leaders-wrap {
    margin: 14px;
    padding: 12px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.leaders-title {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
    font-weight: 800;
}

.leaders-list {
    display: grid;
    gap: 7px;
}

.leader-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.05);
}

.leader-row b {
    color: var(--gold);
}

.leader-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leader-row small {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 600;
}

.leader-row.demo {
    background: linear-gradient(145deg, rgba(255,0,204,.09), rgba(157,0,255,.09));
    border-color: rgba(255,255,255,.12);
}

.demo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(157,0,255,.22);
    color: #ffd2f5;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

/* --- ТОПЫ / ЛИДЕРБОРД --- */
.tops-head {
    padding: 16px 16px 6px;
}
.tops-head h1 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.3px;
}

.tops-countdown {
    margin: 0 16px 12px;
}
.tops-countdown > p {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 8px;
    font-weight: 600;
}
.tops-countdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tops-countdown-cell {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 10px 4px;
    text-align: center;
}
.tops-countdown-cell b {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}
.tops-countdown-cell span {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 700;
}

.tops-tabs {
    display: flex;
    gap: 8px;
    margin: 0 16px 14px;
}
.tops-tab {
    flex: 1;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s ease;
}
.tops-tab.active {
    background: linear-gradient(180deg, rgba(157,0,255,.35), rgba(255,0,204,.18));
    border-color: rgba(157,0,255,.45);
    color: #fff;
    box-shadow: 0 0 16px rgba(157,0,255,.25);
}
.tops-tab:active {
    transform: scale(.97);
}

.tops-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    margin: 0 16px 16px;
    padding: 8px 0 0;
    min-height: 160px;
}
.tops-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tops-podium-item.pos-1 {
    order: 2;
    margin-bottom: 10px;
}
.tops-podium-item.pos-2 {
    order: 1;
    margin-bottom: 2px;
}
.tops-podium-item.pos-3 {
    order: 3;
    margin-bottom: 0;
}
.tops-podium-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, rgba(157,0,255,.5), rgba(255,0,204,.35));
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    overflow: hidden;
}
.tops-podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tops-podium-score {
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 11px;
    font-weight: 900;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 3px;
}
.tops-podium-name {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.85);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tops-podium-block {
    margin-top: 10px;
    width: 64px;
    height: 44px;
    border-radius: 10px 10px 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: rgba(255,255,255,.85);
    background: linear-gradient(180deg, rgba(157,0,255,.35), rgba(80,0,160,.45));
    border: 1px solid rgba(157,0,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.tops-list-wrap {
    margin: 0 14px 14px;
    padding: 10px 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
}
.tops-list {
    display: grid;
    gap: 7px;
}
.tops-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.25);
    border-radius: 14px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.05);
}
.tops-rank {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-dim);
    min-width: 26px;
    text-align: left;
    flex-shrink: 0;
}
.tops-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    border: 2px solid rgba(255,255,255,.1);
    overflow: hidden;
}
.tops-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tops-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tops-username {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tops-score {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 3px;
}
.tops-reward-emoji {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
    margin-left: 4px;
}

.profile-head {
    padding: 16px 16px 6px;
}
.profile-head h1 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.3px;
}

.profile-inventory-card {
    margin: 4px 16px 16px;
    padding: 14px 14px 12px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.profile-prize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.profile-prize-slot {
    aspect-ratio: 1;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.profile-prize-slot.empty span {
    font-size: 32px;
    opacity: .25;
    filter: grayscale(1);
}
.profile-prize-slot.all {
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease, box-shadow .18s ease;
}
.profile-prize-slot.all:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(157,0,255,.12);
}
.profile-prize-slot.all:active {
    transform: scale(.96);
}
.profile-prize-grid-icon {
    font-size: 24px;
    opacity: .55;
}
.profile-prize-grid-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,.55);
}

.profile-gift-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(157,0,255,.2), rgba(255,0,204,.12));
    border: 1px solid rgba(157,0,255,.3);
    font-size: 12px;
    font-weight: 700;
    color: #e8d4ff;
    cursor: pointer;
    transition: transform .15s ease, filter .18s ease;
}
.profile-gift-bar:hover { filter: brightness(1.06); }
.profile-gift-bar:active {
    transform: scale(.985);
}
.profile-gift-arrow {
    font-size: 11px;
    color: rgba(255,255,255,.7);
}

.profile-section {
    margin: 0 16px 14px;
}
.profile-section h2 {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 10px;
    letter-spacing: -0.2px;
}

.profile-menu-list {
    display: grid;
    gap: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    overflow: hidden;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background .15s ease, transform .18s ease, box-shadow .18s ease;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.profile-menu-item:last-child {
    border-bottom: none;
}
.profile-menu-item:hover {
    background: rgba(255,255,255,.045);
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.profile-menu-item:active {
    background: rgba(255,255,255,.04);
    transform: translateX(1px) scale(.995);
}
.profile-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform .18s ease, filter .18s ease;
}
.profile-menu-item:hover .profile-menu-icon { transform: scale(1.05); filter: brightness(1.1); }
.profile-menu-label {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
}
.profile-menu-arrow {
    font-size: 13px;
    color: rgba(255,255,255,.3);
    font-weight: 700;
}

/* --- ПРОФИЛЬ: ИНВЕНТАРЬ --- */
.profile-empty-state {
    margin: 10px 16px 20px;
    padding: 30px 20px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.profile-empty-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 20px rgba(157,0,255,.4));
}
.profile-empty-state h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
    color: #fff;
}
.profile-empty-state p {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
    max-width: 260px;
}
.profile-empty-bot {
    color: #c084fc;
    font-weight: 800;
}
.profile-empty-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 16px;
    border-radius: 14px;
    border: none;
    font-size: 13px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .18s ease;
}
.profile-empty-btn:hover { filter: brightness(1.06); }
.profile-empty-btn:active {
    transform: scale(.97);
}
.profile-empty-btn-primary {
    background: linear-gradient(90deg, rgba(157,0,255,.6), rgba(255,0,204,.45));
    color: #fff;
    box-shadow: 0 0 20px rgba(157,0,255,.25);
}
.profile-empty-btn-secondary {
    background: linear-gradient(90deg, rgba(157,0,255,.35), rgba(255,0,204,.25));
    color: #e8d4ff;
    border: 1px solid rgba(157,0,255,.3);
}
.profile-empty-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 4px 0;
    color: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 800;
}
.profile-empty-divider::before,
.profile-empty-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.08);
}
.profile-empty-hint {
    font-size: 11px !important;
    color: rgba(255,255,255,.45) !important;
}

.profile-prize-slot.has-item {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
    background: linear-gradient(180deg, rgba(157,0,255,.1), rgba(255,0,204,.05));
    border-color: rgba(157,0,255,.2);
    padding: 8px;
}
.profile-prize-slot.has-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(157,0,255,.14);
    border-color: rgba(157,0,255,.35);
}
.profile-prize-slot.has-item:active {
    transform: scale(.95);
}
.profile-prize-slot.has-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Full inventory overlay inside profile */
.profile-full-inv {
    margin: 4px 16px 16px;
    animation: profileFadeIn .25s ease;
}
@keyframes profileFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.profile-full-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.profile-full-inv-head h2 {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    flex: 1;
    text-align: center;
}
.profile-full-inv-back {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: all .15s ease;
    flex-shrink: 0;
}
.profile-full-inv-back:hover {
    transform: translateY(-1px);
}
.profile-full-inv-back:active {
    transform: scale(.95);
    background: rgba(157,0,255,.2);
    border-color: rgba(157,0,255,.4);
}
.profile-full-inv-count {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
    flex-shrink: 0;
}
.profile-full-inv-list {
    display: grid;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.profile-full-inv-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 10px;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 10px 12px;
}
.profile-full-inv-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
}
.profile-full-inv-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.profile-full-inv-name {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-full-inv-price {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
}
.profile-full-inv-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.profile-inv-btn {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: 10px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.profile-inv-btn:active {
    transform: scale(.95);
}
.profile-inv-btn-sell {
    background: linear-gradient(180deg, rgba(255,46,80,.25), rgba(255,46,80,.1));
    border-color: rgba(255,46,80,.35);
    color: #ff7a8a;
}
.profile-inv-btn-withdraw {
    background: linear-gradient(180deg, rgba(0,212,255,.25), rgba(0,212,255,.1));
    border-color: rgba(0,212,255,.35);
    color: #a5f3fc;
}

.profile-sell-all-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(255,46,80,.12), rgba(255,46,80,.04));
    border: 1px solid rgba(255,46,80,.25);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
    gap: 10px;
}
.profile-sell-all-text {
    font-size: 12px;
    font-weight: 800;
    color: #ff7a8a;
}
.profile-sell-all-btn {
    background: linear-gradient(180deg, rgba(255,46,80,.35), rgba(255,46,80,.15));
    border: 1px solid rgba(255,46,80,.45);
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 900;
    font-family: Montserrat, sans-serif;
    color: #fff;
    cursor: pointer;
    transition: all .15s ease;
    flex-shrink: 0;
}
.profile-sell-all-btn:active {
    transform: scale(.95);
    background: linear-gradient(180deg, rgba(255,46,80,.5), rgba(255,46,80,.25));
}

.inv-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    grid-row: 1 / 3;
}

.inv-name {
    font-size: 12px;
    font-weight: 800;
}

.inv-price {
    font-size: 11px;
    color: var(--gold);
}

.inv-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.inv-actions button {
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: white;
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
}

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

.case-opening-vfx {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: radial-gradient(circle at center, rgba(20,20,28,.95), rgba(8,8,12,.98));
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity .32s ease;
}

.case-opening-vfx::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 44%, rgba(157,0,255,.16), transparent 34%), radial-gradient(circle at 50% 54%, rgba(255,0,204,.08), transparent 44%);
    animation: vfxPulse 4.6s ease-in-out infinite;
}

.case-opening-vfx.done {
    opacity: 0;
}

.opening-content-box {
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
    position: relative;
    z-index: 2;
    animation: openingRise .52s cubic-bezier(.2,.9,.24,1) both;
}

.opening-title {
    text-align: center;
    font-size: 14px;
    letter-spacing: 1.6px;
    color: var(--text-dim);
}

.case-viewport {
    position: relative;
    width: 100%;
    height: 128px;
    margin-top: 14px;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    background: rgba(255,255,255,.02);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.case-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    opacity: .7;
    animation: sheenSweep 8s ease-in-out infinite;
}

.case-reel {
    position: absolute;
    left: 0;
    top: 14px;
    display: flex;
    align-items: center;
    transition: transform var(--case-spin-duration, 5.8s) cubic-bezier(.06,.82,.17,1);
    will-change: transform;
}

.case-opening-vfx .case-reel {
    transition-duration: var(--case-spin-duration, 5.8s) !important;
}

.item-card {
    width: 90px;
    min-width: 90px;
    height: 90px;
    margin: 0 5px;
    border-radius: 14px;
    background: #1d1d27;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.item-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.4));
}

.item-card.is-near-win {
    border-color: rgba(255,255,255,.08);
}

.item-card.is-win {
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
}

.item-card.is-win.reveal {
    border-color: rgba(255, 204, 0, .9);
    box-shadow: 0 0 24px rgba(255, 204, 0, .45), inset 0 0 22px rgba(255, 204, 0, .22);
    animation: caseWinReveal .58s cubic-bezier(.18,.92,.22,1) both;
}

.item-card.is-near-win {
    filter: saturate(1.06) brightness(1.04);
}

.item-card.is-win::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, transparent 22%, rgba(255,255,255,.12) 50%, transparent 78%);
    opacity: .7;
    pointer-events: none;
    animation: sheenSweep 2.8s ease-in-out infinite;
}

@keyframes caseWinReveal {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 16px rgba(255, 204, 0, .35), inset 0 0 18px rgba(255, 204, 0, .16);
    }
    48% {
        transform: scale(1.1);
        filter: brightness(1.25);
        box-shadow: 0 0 26px rgba(255, 204, 0, .62), 0 0 42px rgba(255, 0, 204, .28), inset 0 0 24px rgba(255, 204, 0, .25);
    }
    100% {
        transform: scale(1.04);
        filter: brightness(1.12);
        box-shadow: 0 0 20px rgba(255, 204, 0, .48), 0 0 30px rgba(255, 0, 204, .2), inset 0 0 20px rgba(255, 204, 0, .18);
    }
}

.item-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.case-pointer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    box-shadow: 0 0 18px rgba(255,204,0,.5);
    animation: casePointerPulse 1.2s ease-in-out infinite;
    z-index: 3;
}

@keyframes casePointerPulse {
    0%, 100% { opacity: .68; box-shadow: 0 0 14px rgba(255,204,0,.34); }
    50% { opacity: 1; box-shadow: 0 0 22px rgba(255,204,0,.62); }
}

@media (max-width: 430px) {
    .top-bar {
        padding: calc(10px + var(--safe-top)) 12px 10px;
    }

    .back-btn {
        top: calc(58px + var(--safe-top));
        left: 10px;
    }

    .game-grid {
        gap: 10px;
        padding: 14px;
    }

    .game-item {
        min-height: 144px;
        border-radius: 18px;
        padding: 14px 10px;
    }

    .game-item img {
        width: 64px;
        height: 64px;
    }

    .input-row {
        gap: 8px;
    }

    #bet-panel .input-row {
        grid-template-columns: minmax(120px, 1fr) minmax(0, 1.25fr);
    }

    .mines-bet-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    }

    .bet-boost-row {
        gap: 5px;
    }

    .bet-boost-row > button,
    .q-btn,
    .mines-q-btn,
    .arena-q-btn {
        min-height: 40px;
        font-size: 11px;
        padding: 6px 8px;
    }

    .crash-area {
        height: clamp(184px, 28dvh, 244px);
    }

    .crash-area .crash-rocket {
        width: clamp(96px, 32vw, 140px);
        bottom: 28px;
    }

    .crash-history-panel {
        padding: 8px 10px 10px;
    }
    .history-item {
        font-size: 10px;
        padding: 5px 3px;
    }

    .crash-live-bets {
        gap: 6px;
    }

    .crash-cashout-preview-body img {
        width: 48px;
        height: 48px;
    }

    .crash-cashout-preview-meta span {
        max-width: 140px;
    }

    .crash-controls {
        grid-template-columns: 1fr 1fr;
    }

    .crash-auto-stop-wrap {
        grid-column: 1 / -1;
    }

    .bet-panel {
        padding: 10px 12px;
    }

    .bottom-menu {
        padding-top: 7px;
    }

    .mines-container {
        padding: 12px;
        gap: 8px;
        min-height: calc(100vh - 198px);
    }

    .mines-grid {
        max-height: 40vh;
    }

    .mines-grid.size-1 {
        max-width: min(100px, 36vw);
    }
    .mines-grid.size-4 {
        max-width: min(210px, 54vw);
    }
    .mines-grid.size-9 {
        max-width: min(290px, 68vw);
        max-height: 34vh;
    }
    .mines-grid.size-16 {
        max-width: min(360px, 78vw);
    }
    .mines-grid.size-25 {
        max-height: 48vh;
    }
    .mines-grid.size-36 {
        max-width: min(380px, 90vw);
        max-height: 50vh;
        gap: 6px;
    }
    .mines-grid.size-49 {
        max-width: min(400px, 92vw);
        max-height: 52vh;
        gap: 6px;
    }

    .mines-feed-card {
        min-height: 150px;
    }

    .mines-feed-list {
        max-height: 145px;
    }

    .crash-area .crash-multiplier {
        font-size: 38px;
    }

    .gift-shop-head h2 {
        font-size: 26px;
    }

    .gift-shop-head p {
        font-size: 12px;
    }

    .gift-card img {
        width: 78px;
        height: 78px;
    }

    .gift-price {
        font-size: 20px;
    }

    .btn-main {
        font-size: 15px;
    }

    .arena-pot-value {
        font-size: 20px;
    }

    .modal-card {
        width: 92%;
        padding: 22px;
        border-radius: 22px;
    }
}

/* --- ШКАЛА (SCALE GAME) --- */

.scale-header {
    text-align: center;
    padding: 16px 14px 8px;
}

.scale-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: .5px;
}

.scale-header p {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}

.scale-empty-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.scale-empty-msg img {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    opacity: .5;
}

.scale-empty-msg h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.scale-empty-msg p {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 20px;
}

.scale-content {
    padding: 0 14px 20px;
}

.scale-section {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
}

.scale-section-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    text-align: center;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.scale-gifts-row,
.scale-desired-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 80px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.scale-gift-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    transition: all .2s ease;
}

.scale-gift-chip:active {
    transform: scale(.95);
}

.scale-gift-chip img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.scale-gift-price {
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(0,0,0,.4);
    padding: 2px 8px;
    border-radius: 999px;
}

.scale-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 2px dashed rgba(255, 255, 255, .25);
    background: transparent;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

.scale-add-btn span {
    font-size: 24px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
}

.scale-add-btn small {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    text-align: center;
    line-height: 1.1;
}

.scale-add-btn:active {
    background: rgba(255,255,255,.05);
}

/* Chance panel */
.scale-chance-panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
}

.scale-chance-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.scale-chance-value span:first-child {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.scale-risk-text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}

.scale-chance-bar {
    position: relative;
    height: 32px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
    margin-bottom: 10px;
}

.scale-chance-fill {
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(90deg, #00c853, #64dd17);
    transition: width .6s cubic-bezier(.23,1,.32,1);
    box-shadow: 0 0 12px rgba(0,200,83,.3);
}

.scale-chance-marker {
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(0,255,136,.8), 0 0 8px rgba(255,255,255,.6);
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
    pointer-events: none;
}

.scale-chance-marker.active {
    opacity: 1;
}

.scale-chance-marker.animating {
    transition: none;
}

.scale-warning {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    margin: 0;
}

.scale-upgrade-btn {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 900;
    background: linear-gradient(45deg, #2962ff, #448aff);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 8px 24px rgba(41, 98, 255, .35);
}

.scale-upgrade-btn:disabled {
    opacity: .5;
    filter: grayscale(.4);
    cursor: not-allowed;
}

.scale-upgrade-btn:not(:disabled):active {
    transform: scale(.98);
}

/* Result screen */
.scale-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px 20px;
}

.scale-result-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
}

.scale-result-banner.win {
    background: rgba(0, 200, 83, .2);
    color: #69f0ae;
    border: 1px solid rgba(0, 200, 83, .3);
}

.scale-result-banner.lose {
    background: rgba(255, 50, 50, .2);
    color: #ff8a80;
    border: 1px solid rgba(255, 50, 50, .3);
}

.scale-result-banner span:first-child {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}

/* Picker modal */
.scale-picker-card {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(16px + var(--safe-bottom));
}

.scale-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding: 4px;
    margin: 12px 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.scale-picker-card .btn-main {
    flex-shrink: 0;
    margin-top: auto;
}

.scale-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 2px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: all .2s ease;
}

.scale-picker-item.selected {
    background: rgba(157, 0, 255, .15);
    border-color: rgba(157, 0, 255, .5);
    box-shadow: 0 0 16px rgba(157, 0, 255, .2);
}

.scale-picker-item img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
}

.scale-picker-name {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.scale-picker-price {
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
}

@media (max-width: 380px) {
    .scale-picker-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .scale-gift-chip img {
        width: 48px;
        height: 48px;
    }

    .scale-header h2 {
        font-size: 18px;
    }

    .scale-chance-value span:first-child {
        font-size: 16px;
    }
}

/* --- FORTUNE GAME (CYBER-NEON) --- */
#screen-fortune {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(157,0,255,.55) rgba(0,0,0,.2);
}

#screen-fortune::-webkit-scrollbar {
    width: 8px;
}

#screen-fortune::-webkit-scrollbar-track {
    background: rgba(0,0,0,.15);
    border-radius: 4px;
}

#screen-fortune::-webkit-scrollbar-thumb {
    background: rgba(157,0,255,.55);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.fortune-mesh-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.fortune-mesh-1, .fortune-mesh-2, .fortune-mesh-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}
.fortune-mesh-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(157,0,255,.6), transparent);
    top: -60px;
    left: -80px;
    animation: fortuneMeshMove1 12s ease-in-out infinite alternate;
}
.fortune-mesh-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,0,204,.5), transparent);
    bottom: -40px;
    right: -60px;
    animation: fortuneMeshMove2 15s ease-in-out infinite alternate;
}
.fortune-mesh-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0,212,255,.4), transparent);
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    animation: fortuneMeshMove3 10s ease-in-out infinite alternate;
}
@keyframes fortuneMeshMove1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 30px); }
}
@keyframes fortuneMeshMove2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-30px, -40px); }
}
@keyframes fortuneMeshMove3 {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-20px); }
}

.fortune-head {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 16px 0 8px;
}
.fortune-head h2 {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(45deg, #c04dff, #ff2d95, #00d4ff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    animation: fortuneTextShine 3s ease infinite;
}
@keyframes fortuneTextShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.fortune-head p {
    color: var(--text-dim);
    font-size: 12px;
    margin: 4px 0 0;
}

.fortune-mode-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 18px;
}
.fortune-mode-btn {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 12px 4px;
    color: var(--text-main);
    cursor: pointer;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(8px);
}
.fortune-mode-btn.active {
    border-color: rgba(157,0,255,.6);
    background: linear-gradient(180deg, rgba(157,0,255,.15), rgba(255,0,204,.08));
    box-shadow: 0 0 24px rgba(157,0,255,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.fortune-mode-btn .mode-name {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .8px;
}
.fortune-mode-btn .mode-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
}

.fortune-wheel-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 18px;
    z-index: 1;
}
.fortune-wheel-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(157,0,255,.2), transparent 70%);
    opacity: .6;
    animation: fortuneWheelPulse 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes fortuneWheelPulse {
    0%, 100% { opacity: .4; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.04); }
}
#fortune-wheel {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 12px rgba(157,0,255,.3));
    will-change: transform;
    transform: translateZ(0);
}

.fortune-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 22px solid #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,255,255,.4));
    z-index: 3;
    transition: transform .08s ease;
}
.fortune-arrow.bump {
    animation: fortuneArrowBump .15s ease;
}
@keyframes fortuneArrowBump {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
    100% { transform: translateX(-50%) translateY(0); }
}

.fortune-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 0 30px rgba(157,0,255,.3), inset 0 1px 2px rgba(255,255,255,.15);
    cursor: pointer;
    transition: all .2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.fortune-center-hub:active {
    transform: translate(-50%, -50%) scale(.92);
    box-shadow: 0 0 40px rgba(157,0,255,.5), inset 0 1px 2px rgba(255,255,255,.2);
}
.fortune-center-hub span {
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(157,0,255,.8);
}

.fortune-speed-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.fortune-speed-label {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
}
.fortune-toggle-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.fortune-toggle-track-mini {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    transition: all .25s ease;
}
.fortune-toggle-track-mini.active {
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    border-color: transparent;
}
.fortune-toggle-thumb-mini {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.fortune-toggle-track-mini.active .fortune-toggle-thumb-mini {
    transform: translateX(18px);
}
#fortune-speed-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 68px;
}

.fortune-spin-btn {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% - 32px);
    margin: 0 auto 14px;
    padding: 16px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-pink));
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(157,0,255,.4);
    transition: transform .15s ease, box-shadow .2s ease;
    font-family: Montserrat, sans-serif;
}
.fortune-spin-btn:active {
    transform: scale(.96);
}
.fortune-spin-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.fortune-legend {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 16px 24px;
}
.fortune-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.fortune-win-flash {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(0,255,136,.8);
    box-shadow: 0 0 30px rgba(0,255,136,.5), inset 0 0 30px rgba(0,255,136,.2);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    animation: fortuneWinFlash 1.2s ease-in-out;
}
@keyframes fortuneWinFlash {
    0% { opacity: 0; transform: scale(.9); }
    30% { opacity: 1; transform: scale(1.02); }
    70% { opacity: .6; }
    100% { opacity: 0; transform: scale(1.05); }
}

.fortune-multiply-anim {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
}
.fortune-multiply-anim .multiply-value {
    font-size: 64px;
    font-weight: 900;
    color: var(--success);
    text-shadow: 0 0 40px rgba(0,255,136,.5);
    animation: fortuneMultiplyPop .8s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.fortune-multiply-anim .multiply-label {
    font-size: 18px;
    color: #fff;
    margin-top: 8px;
    animation: fortuneFadeUp .6s .3s ease forwards;
    opacity: 0;
}
.inline-star {
    width: .85em;
    height: .85em;
    vertical-align: middle;
    margin: 0 2px;
    display: inline-block;
}
@keyframes fortuneMultiplyPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fortuneFadeUp {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* --- THIMBLES GAME --- */
.thimbles-head {
    text-align: center;
    padding: 16px 0 8px;
}
.thimbles-head h2 {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(45deg, #00d4ff, var(--accent-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.thimbles-head p {
    color: var(--text-dim);
    font-size: 12px;
    margin: 4px 0 0;
}

.thimbles-bet-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 14px;
    margin: 0 16px 12px;
}
.thimbles-bet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.thimbles-bet-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 52px;
}
.thimbles-bet-input-wrap {
    flex: 1;
    position: relative;
}
.thimbles-bet-input-wrap input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    outline: none;
}
.thimbles-bet-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--gold);
    font-weight: 700;
}
.thimbles-quick-bets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.thimbles-qbtn {
    flex: 1;
    min-width: 52px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    transition: all .15s ease;
}
.thimbles-qbtn:active {
    background: rgba(157,0,255,.2);
    border-color: var(--accent-purple);
}

.thimbles-speed-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.thimbles-speed-label {
    font-size: 12px;
    color: var(--text-dim);
}

.thimbles-table {
    background: linear-gradient(180deg, rgba(0,212,255,.06), rgba(157,0,255,.06));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    margin: 0 10px 16px;
    padding: 24px 10px 16px;
    position: relative;
    overflow: visible;
}
.thimbles-track {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(6px, 2vw, 14px);
    position: relative;
    width: 100%;
    height: clamp(220px, 52vw, 300px);
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.05), transparent 60%),
        linear-gradient(180deg, rgba(20,12,36,.8), rgba(9,5,18,.95));
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.thimbles-cup {
    position: relative;
    width: clamp(105px, 32vw, 155px);
    height: clamp(95px, 28vw, 145px);
    cursor: pointer;
    flex-shrink: 1;
    will-change: transform;
    transition: transform .25s ease;
}
.thimbles-cup-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/NAPERST/stakan.png') center/contain no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
    transition: transform .3s ease, opacity .3s ease, filter .3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    z-index: 3;
}
.thimbles-cup.lifting .thimbles-cup-body {
    transform: translateY(-55%);
    opacity: .7;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.3));
}
.thimbles-cup.revealed .thimbles-cup-body {
    transform: translateY(-60%);
    opacity: .45;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.25));
}
.thimbles-ball {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: clamp(48px, 14vw, 72px);
    height: clamp(48px, 14vw, 72px);
    border-radius: 0;
    background: url('assets/NAPERST/altuxa.png') center/contain no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(0,255,136,.55));
    transition: transform .35s cubic-bezier(.175,.885,.32,1.275), filter .25s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
.thimbles-cup.revealed .thimbles-ball,
.thimbles-cup.lifting .thimbles-ball {
    transform: translateX(-50%) scale(1);
}
.thimbles-cup.winner .thimbles-ball {
    background: url('assets/NAPERST/altuxa.png') center/contain no-repeat;
    width: clamp(56px, 16vw, 84px);
    height: clamp(56px, 16vw, 84px);
    filter: drop-shadow(0 0 14px rgba(0,255,136,.85));
}
.thimbles-cup.loser .thimbles-ball {
    background: url('assets/NAPERST/skuf.png') center/contain no-repeat;
    width: clamp(60px, 17vw, 90px);
    height: clamp(60px, 17vw, 90px);
    bottom: 4px;
    filter: drop-shadow(0 0 14px rgba(255,59,48,.85));
}

.thimbles-cup.ready {
    animation: thimblesPulse .8s ease-in-out infinite;
}

.thimbles-cup.closing .thimbles-cup-body {
    animation: thimblesSlam .3s ease-in forwards;
}

@keyframes thimblesBounce {
    0% { transform: translate(-50%, -50%) scale(0.5); }
    60% { transform: translate(-50%, -50%) scale(1.3); }
    100% { transform: translate(-50%, 0) scale(1); }
}

@keyframes thimblesPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); box-shadow: 0 0 15px rgba(255,215,0,.3); }
}

@keyframes thimblesSlam {
    0% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.thimbles-status {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    min-height: 20px;
}

.thimbles-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 20px;
}
.thimbles-prizes-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
}
.thimbles-multiplier {
    font-size: 14px;
    font-weight: 900;
    color: var(--success);
}

.thimbles-lose-anim {
    animation: thimblesShake .5s ease;
}
@keyframes thimblesShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(4px) rotate(2deg); }
}


/* --- SKUFDER (Tinder-like game) --- */
.skufder-head {
    text-align: center;
    padding: 14px 0 6px;
}
.skufder-head h2 {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(45deg, #ff2d55, #ff8c00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.skufder-head p {
    color: var(--text-dim);
    font-size: 12px;
    margin: 4px 0 0;
}

.skufder-bet-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 0 16px 12px;
}
.skufder-bet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.skufder-bet-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 52px;
}

.skufder-card-wrap {
    display: flex;
    justify-content: center;
    padding: 0 16px;
    margin-bottom: 16px;
}
.skufder-card {
    width: 100%;
    max-width: 320px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    position: relative;
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.skufder-card.swipe-left {
    transform: translateX(-120%) rotate(-12deg);
    opacity: 0;
}
.skufder-card.swipe-right {
    transform: translateX(120%) rotate(12deg);
    opacity: 0;
}
.skufder-card.reset {
    transition: none;
    transform: translateX(0) rotate(0);
    opacity: 0;
}
.skufder-card.enter {
    transition: all .4s cubic-bezier(.4,0,.2,1);
    opacity: 1;
}

.skufder-card-photo {
    width: 100%;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, rgba(30,15,40,.8), rgba(10,8,20,.9));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Like/Dislike overlays on photo — full half-width rectangles */
.skufder-photo-overlay { display: none !important; }
.skufder-reveal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity .4s ease, transform .5s ease;
}
.skufder-reveal-img.show {
    opacity: 1;
    transform: scale(1);
}
.skufder-question {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border: 2px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: skufderPulse 2s ease-in-out infinite;
    transition: opacity .3s ease, transform .3s ease;
}
.skufder-question.hide {
    opacity: 0;
    transform: scale(.6);
}
.skufder-question span {
    font-size: 44px;
    font-weight: 900;
    color: rgba(255,255,255,.4);
}
@keyframes skufderPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.1); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

.skufder-info {
    padding: 14px 18px;
    text-align: center;
}
.skufder-name {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
    transition: opacity .25s ease;
}
.skufder-distance {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.skufder-phrase {
    font-size: 12px;
    color: rgba(255,255,255,.75);
    margin-bottom: 8px;
    line-height: 1.4;
}
.skufder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.skufder-tag {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.08);
    padding: 3px 8px;
    border-radius: 8px;
}

.skufder-result {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    border-radius: 24px;
    z-index: 3;
}
.skufder-result.show {
    opacity: 1;
    pointer-events: auto;
}
.skufder-result-type {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.skufder-result-type.is-alt { color: var(--success); text-shadow: 0 0 20px rgba(0,255,136,.4); }
.skufder-result-type.is-skuf { color: var(--danger); text-shadow: 0 0 20px rgba(255,59,48,.4); }
.skufder-result-multiplier {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.skufder-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.skufder-actions-inline {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.skufder-actions-inline .skufder-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,.05);
}
.skufder-actions-inline .skufder-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.skufder-actions-inline .skufder-btn:active {
    transform: scale(.9);
}
.skufder-actions-inline .skufder-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}
.skufder-dislike {
    background: linear-gradient(135deg, rgba(255,59,48,.95), rgba(200,30,20,.95));
    border-color: rgba(255,80,70,.9);
    box-shadow: 0 4px 14px rgba(255,59,48,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.skufder-dislike:hover {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(255,59,48,.6), 0 4px 18px rgba(255,59,48,.4), inset 0 1px 0 rgba(255,255,255,.25);
    border-color: rgba(255,110,100,1);
}
.skufder-dislike:active {
    box-shadow: 0 0 28px rgba(255,59,48,.7), inset 0 0 22px rgba(255,59,48,.3);
}
.skufder-like {
    background: linear-gradient(135deg, rgba(0,230,120,.95), rgba(0,170,80,.95));
    border-color: rgba(40,255,140,.9);
    box-shadow: 0 4px 14px rgba(0,255,136,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.skufder-like:hover {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(0,255,136,.6), 0 4px 18px rgba(0,255,136,.4), inset 0 1px 0 rgba(255,255,255,.25);
    border-color: rgba(80,255,160,1);
}
.skufder-like:active {
    box-shadow: 0 0 28px rgba(0,255,136,.7), inset 0 0 22px rgba(0,255,136,.3);
}

.skufder-odds {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 20px;
    align-items: center;
}
.skufder-odds-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
}
.skufder-odds-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.like-dot { background: linear-gradient(135deg, #00ff88, #00cc66); }
.dislike-dot { background: linear-gradient(135deg, #ff3b30, #ff6b6b); }


/* --- FRIDGE (Skuf Fridge) --- */
.fridge-head {
    text-align: center;
    padding: 14px 0 6px;
}
.fridge-head h2 {
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(45deg, #ff8c00, #ffcc00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.fridge-head p {
    color: var(--text-dim);
    font-size: 12px;
    margin: 4px 0 0;
}

.fridge-bet-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 0 16px 14px;
}
.fridge-bet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.fridge-bet-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 52px;
}

.fridge-scene {
    position: relative;
    width: 220px;
    height: 280px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fridge-door {
    width: 180px;
    height: 240px;
    background: linear-gradient(145deg, #c0c0c0, #909090);
    border: 4px solid #606060;
    border-radius: 16px 16px 8px 8px;
    position: relative;
    z-index: 2;
    transition: transform .4s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.3);
}
.fridge-door.shaking {
    animation: fridgeShake .5s ease-in-out;
}
@keyframes fridgeShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px) rotate(-2deg); }
    30% { transform: translateX(5px) rotate(2deg); }
    45% { transform: translateX(-4px) rotate(-1.5deg); }
    60% { transform: translateX(3px) rotate(1.5deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
    90% { transform: translateX(1px) rotate(.5deg); }
}
.fridge-door.open {
    transform: perspective(600px) rotateY(-45deg);
    transform-origin: left center;
}

.fridge-body {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(145deg, #d0d0d0, #a0a0a0);
    border-radius: 12px 12px 4px 4px;
    overflow: hidden;
}
.fridge-logo {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 900;
    color: #606060;
    letter-spacing: 3px;
    opacity: .6;
}
.fridge-handle {
    position: absolute;
    right: 12px;
    top: 60px;
    width: 10px;
    height: 80px;
    background: linear-gradient(180deg, #505050, #303030);
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}

.fridge-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 160px;
    background: radial-gradient(ellipse, rgba(255,255,255,.9), rgba(200,220,255,.4), transparent);
    opacity: 0;
    z-index: 1;
    transition: opacity .3s ease;
    pointer-events: none;
}
.fridge-glow.active {
    opacity: 1;
}

.fridge-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 3;
    text-align: center;
    transition: transform .5s cubic-bezier(.175,.885,.32,1.275);
    pointer-events: none;
}
.fridge-item.show {
    transform: translate(-50%, -50%) scale(1);
}
#fridge-item-emoji {
    display: block;
    font-size: 64px;
    line-height: 1;
}
#fridge-item-name {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    white-space: nowrap;
}

.fridge-near-miss {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #ff8c00;
    opacity: 0;
    transition: opacity .3s ease;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.fridge-near-miss.show {
    opacity: 1;
}

.fridge-result {
    text-align: center;
    min-height: 48px;
    margin-bottom: 10px;
}
.fridge-result-multiplier {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}
.fridge-result-multiplier.win {
    color: var(--success);
    text-shadow: 0 0 20px rgba(0,255,136,.4);
}
.fridge-result-multiplier.lose {
    color: #ff3b30;
}
.fridge-result-multiplier.near {
    color: #ff8c00;
}
.fridge-result-win {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

.fridge-eat-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 auto 14px;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(45deg, #ff8c00, #ffcc00);
    color: #1a0a00;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(255,140,0,.4);
    transition: transform .15s ease, box-shadow .2s ease;
    font-family: Montserrat, sans-serif;
}
.fridge-eat-btn:active {
    transform: scale(.96);
}
.fridge-eat-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.fridge-history {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px 16px;
    flex-wrap: wrap;
}
.fridge-history-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
}
.fridge-history-items {
    display: flex;
    gap: 6px;
}
.fridge-history-item {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all .2s ease;
}
.fridge-history-item.gold {
    background: linear-gradient(135deg, rgba(255,204,0,.2), rgba(255,204,0,.08));
    border-color: rgba(255,204,0,.4);
    box-shadow: 0 0 12px rgba(255,204,0,.2);
}

.fridge-happy-hour {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #ffcc00, #ff8c00);
    color: #1a0a00;
    padding: 8px 20px;
    border-radius: 20px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(255,204,0,.4);
    transition: transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.fridge-happy-hour.show {
    transform: translateX(-50%) translateY(0);
}
.fridge-happy-hour span {
    display: block;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .5px;
}
.fridge-happy-hour small {
    font-size: 10px;
    font-weight: 700;
    opacity: .8;
}

/* --- SKELETON LOADING OVERLAY --- */
.skeleton-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
}
.skeleton-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--accent-pink);
    border-radius: 50%;
    animation: skeletonSpin 0.8s linear infinite;
}
@keyframes skeletonSpin {
    to { transform: rotate(360deg); }
}

/* --- OFFLINE BANNER --- */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    width: 100%;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255,59,48,.9), rgba(200,30,30,.9));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
    animation: offlineBannerIn .35s ease;
}
@keyframes offlineBannerIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===== PROFILE TABS ===== */
.profile-tabs {
    display: flex;
    margin: 12px 14px 0;
    gap: 4px;
}
.profile-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--glass-border);
    border-radius: 10px 10px 0 0;
    background: rgba(255,255,255,.03);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
    border-bottom: none;
}
.profile-tab.active {
    background: var(--bg-card);
    color: #fff;
    border-color: var(--accent-purple);
}
.profile-tab-content {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin: 0 14px;
    padding: 10px;
    min-height: 80px;
    overflow: hidden;
}

/* ===== INVENTORY CLEAN ===== */
.profile-inv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.profile-inv-stats {
    display: flex;
    gap: 12px;
}
/* ============================================================
   UNIFIED CONTROL LAYER
   До этого слоя одни и те же по смыслу контролы рисовались
   по-разному: .q-btn — пилюля 44px с фиолетовым тинтом,
   .thimbles-qbtn — прямоугольник ~33px на плоском сером,
   .arena-q-btn/.case-soft-btn/.mines-feed-tab — отдельная группа
   38px, а .crash-auto-stop-wrap имел свой радиус 12px рядом с
   кнопкой на 16px. Здесь всё сводится к одной шкале.
   Правила идут после исходных, поэтому выигрывают по порядку.
   ============================================================ */
:root {
    --ctl-h: 46px;
    --ctl-h-sm: 44px;
    --ctl-r: 14px;
    --ctl-r-pill: 999px;
    --ctl-fs: 13px;
    --ctl-fs-main: 16px;
    --ctl-border: 1px solid rgba(255,255,255,.16);
    --ctl-chip-bg: linear-gradient(145deg, rgba(157,0,255,.16), rgba(255,0,204,.10));
}

/* 1. Чипы и мелкие кнопки: одна форма, один тон, один шрифт */
.q-btn,
.thimbles-qbtn,
.arena-q-btn,
.case-soft-btn,
.mines-feed-tab,
.inv-actions button,
.bet-boost-row > button,
.crash-bet-step {
    min-height: var(--ctl-h-sm);
    padding: 10px 12px;
    border-radius: var(--ctl-r-pill);
    border: var(--ctl-border);
    background: var(--ctl-chip-bg);
    color: #eae5ff;
    font-size: var(--ctl-fs);
    font-weight: 800;
    letter-spacing: .2px;
    font-family: Montserrat, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* 2. Основные кнопки действия: одна геометрия, свой цвет сохраняется */
.btn-main,
.deposit-submit,
.fridge-eat-btn,
#main-action-btn {
    min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
    font-size: var(--ctl-fs-main);
    font-weight: 800;
    letter-spacing: .2px;
    padding: 14px 18px;
}

/* 3. Поля ввода и составные контролы: одна высота и один радиус */
.bet-input-wrap input,
#crash-auto-stop,
.thimbles-bet-input-wrap input,
.deposit-amount-wrap input {
    font-size: 15px;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
}
.bet-input-wrap,
.thimbles-bet-input-wrap {
    min-height: var(--ctl-h-sm);
    border-radius: var(--ctl-r);
    border: var(--ctl-border);
    background: rgba(6,8,22,.82);
}
/* AUTO X стоит в одной строке с кнопкой кэшаута — выравниваем под неё */
.crash-auto-stop-wrap {
    min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
    border: var(--ctl-border);
    background: rgba(6,8,22,.82);
}

/* ============================================================
   UNIFIED LAYER, PART 2 — карточки, отступы, типографика, меню
   Замер показал разнобой: 15 разных border-radius (4/5/6/8/9/10/
   12/14/16/18/20/22/24 + пилюли), больше 20 размеров шрифта
   (вплоть до нечитаемых 7px и 8px) и 11 разных gap. Здесь всё
   сводится к короткой шкале. Правила идут после исходных.
   ============================================================ */
:root {
    /* радиусы: мелкие плитки -> крупные контейнеры */
    --ui-r-xs: 8px;
    --ui-r-sm: 12px;
    --ui-r-md: 16px;
    --ui-r-lg: 20px;
    /* отступы */
    --ui-gap-xs: 6px;
    --ui-gap-sm: 10px;
    --ui-gap-md: 14px;
    /* типографика: минимальный читаемый размер — 11px */
    --ui-fs-label: 11px;
    --ui-fs-body: 13px;
    --ui-fs-title: 16px;
    --ui-fs-h2: 20px;
    --ui-text-dim: #b6bcd2;
}

/* --- 1. Крупные контейнеры: один радиус --- */
.gift-shop-grid,
.crash-bets-card,
.crash-history-panel,
.bet-panel,
.modal-card,
.case-win-card,
.profile-card,
.profile-tab-content,
.profile-inv-card,
.profile-full-inv-card,
.ach-card,
.profile-empty-state,
.mines-container,
.feed-wrap,
.skufder-card,
.fridge-scene {
    border-radius: var(--ui-r-lg);
}

/* --- 2. Плитки и ячейки: средний радиус --- */
.pstat-card,
.crash-bet-row,
.mines-feed-row,
.gift-price,
.case-card-ui,
.prize-item,
.daily-day,
.profile-empty-btn {
    border-radius: var(--ui-r-sm);
}

/* --- 3. Отступы сеток: одна величина вместо 5/6/7/8/10/12/14 --- */
.gift-shop-grid,
.game-grid,
.profile-stat-cards,
.prizes-grid,
.daily-grid,
.feed-list {
    gap: var(--ui-gap-sm);
}

/* --- 4. Типографика: подписи не мельче 11px и заметнее по цвету --- */
.pstat-label,
.gift-shop-head p,
.crash-history-status,
.mines-status,
.feed-head,
.empty-text,
.tops-row.empty,
[class$="-label"],
[class$="-hint"],
[class$="-kicker"] {
    font-size: var(--ui-fs-label);
    color: var(--ui-text-dim);
    letter-spacing: .2px;
}

/* заголовки экранов: вместо 22/24/26/28/32 — одна ступень */
.pstat-val,
.gift-shop-head h2,
.fridge-head h2,
.skufder-head h2 {
    font-size: var(--ui-fs-title);
    font-weight: 800;
    letter-spacing: .2px;
}

/* --- 5. Нижнее меню: иконка отдельно, подпись под ней --- */
.bottom-menu {
    gap: var(--ui-gap-xs);
    padding: 8px 10px calc(10px + var(--safe-bottom));
}

.nav-btn {
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px 7px;
    border-radius: var(--ui-r-md);
}

/* Ключевая правка: раньше иконка растягивалась на всю плитку
   (position:absolute; inset:0; background-size:150%) и подпись
   лежала поверх арта. Теперь это отдельный квадрат, подпись — под ним. */
.nav-icon {
    position: static;
    inset: auto;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .55;
    filter: saturate(.65);
    transition: opacity .2s ease, filter .2s ease, transform .3s ease;
}

.nav-btn.active .nav-icon {
    opacity: 1;
    filter: none;
    transform: scale(1.08);
}

.nav-btn span {
    position: static;
    font-size: var(--ui-fs-label);
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(255,255,255,.66);
    margin-top: 0;
    padding-bottom: 0;
    text-shadow: none;
}

.nav-btn.active span {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,0,204,.35);
}

/* индикатор активности не должен наезжать на подпись */
.nav-btn::after {
    bottom: 2px;
    width: 26px;
    height: 2px;
}

/* ============================================================
   ДОБИВКА ПОСЛЕ АУДИТА ЖИВОГО ИНТЕРФЕЙСА
   ============================================================ */
/* Бейдж «БЕТА» на карточках игр был 7px — на телефоне не читался вообще */
.badge,
.badge.dev {
    font-size: 9px;
    letter-spacing: .3px;
}
/* Строка «ONLINE ~» в шапке была 9px */
.status {
    font-size: 10px;
}
/* Карточки игр выбивались радиусом 24 при общей шкале 20 */
.game-grid .game-item,
.game-grid .game-item::after {
    border-radius: var(--ui-r-lg);
}

.profile-inv-count, .profile-inv-worth {
    font-size: 13px;
    font-weight: 700;
    color: #ddd;
}
.profile-inv-actions-row { display: flex; gap: 6px; }
.profile-inv-action-btn {
    padding: 7px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: #ccc;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.profile-inv-action-btn.sell { border-color: rgba(255,160,0,.3); color: #ffa000; }

.profile-inv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.profile-inv-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.profile-inv-card:hover { background: rgba(255,255,255,.06); }
.profile-inv-card.legendary { border-color: rgba(255,215,0,.4); }
.profile-inv-card.exotic { border-color: rgba(255,0,128,.4); }
.profile-inv-card.epic { border-color: rgba(157,0,255,.4); }

.profile-inv-img-wrap {
    position: relative;
    background: rgba(0,0,0,.2);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 4px;
}
.profile-inv-img-wrap img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
}
.profile-inv-rarity {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 7px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0,0,0,.8);
    color: #aaa;
}
.profile-inv-rarity.legendary, .profile-inv-rarity.exotic, .profile-inv-rarity.epic { color: #ffd700; }

.profile-inv-card-name {
    display: block;
    font-size: 10px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-inv-card-price {
    display: block;
    font-size: 10px;
    font-weight: 900;
    color: #ffd700;
    margin-top: 2px;
}
.profile-inv-more {
    text-align: center;
    padding: 8px;
    color: var(--accent-purple);
    font-size: 12px;
    cursor: pointer;
}

/* Full inventory view */
.profile-full-inv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.profile-full-inv-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
}
.profile-full-inv-card.legendary { border-color: rgba(255,215,0,.5); }
.profile-full-inv-card.exotic { border-color: rgba(255,0,128,.5); }
.profile-full-inv-card.epic { border-color: rgba(157,0,255,.4); }

.profile-full-inv-img {
    padding: 10px;
    background: rgba(0,0,0,.25);
    text-align: center;
}
.profile-full-inv-img img {
    width: 100%;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
.profile-full-inv-rarity {
    display: block;
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 0;
    letter-spacing: .5px;
    color: #aaa;
}
.profile-full-inv-rarity.legendary { color: #ffd700; }
.profile-full-inv-rarity.exotic { color: #ff0080; }
.profile-full-inv-rarity.epic { color: #9d00ff; }

.profile-full-inv-info {
    padding: 8px 10px 10px;
}
.profile-full-inv-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.profile-full-inv-price {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #ffd700;
    margin: 3px 0 6px;
}
.profile-full-inv-btns {
    display: flex;
    gap: 5px;
}
.profile-inv-btn {
    flex: 1;
    padding: 7px;
    border: none;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.profile-inv-btn.sell { background: rgba(255,160,0,.15); color: #ffa000; }
.profile-inv-btn.withdraw { background: rgba(157,0,255,.15); color: #9d00ff; }

.profile-full-inv-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.profile-full-inv-back {
    background: none;
    border: 1px solid var(--glass-border);
    color: #ccc;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.profile-full-inv-count { font-size: 11px; color: var(--text-dim); }
.profile-full-inv-actions-bar { margin-bottom: 8px; }
.profile-full-inv-actions-bar .profile-inv-action-btn { width: 100%; }

/* === TOPS V2 (clean) === */
.tops-podium-wrap {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; width: 100%; padding: 10px 0;
}
.tops-pod-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; flex: 1; max-width: 105px;
}
.tops-pod-item.pod-1 { order: 2; }
.tops-pod-item.pod-2 { order: 1; }
.tops-pod-item.pod-3 { order: 3; }
.tops-pod-avatar {
    border-radius: 50%; overflow: hidden; display: flex;
    align-items: center; justify-content: center;
    background: #1a1a2e; font-size: 24px; font-weight: 900; color: #fff;
}
.tops-pod-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tops-pod-name { font-size: 11px; font-weight: 700; color: #ddd; text-align: center; word-break: break-all; }
.tops-pod-score { font-size: 12px; font-weight: 900; color: #ffd700; }
.tops-pod-medal { font-size: 24px; line-height: 1; }
.tops-pod-prize { font-size: 9px; color: #999; background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 10px; }

.tops-list-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.03);
}
.tops-list-rank { font-size: 12px; font-weight: 900; color: #555; width: 26px; flex-shrink: 0; }
.tops-list-avatar {
    width: 30px; height: 30px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.tops-list-name { flex: 1; font-size: 12px; font-weight: 600; color: #ccc; }
.tops-list-score { font-size: 12px; font-weight: 900; color: #ffd700; }
.tops-list-empty { text-align: center; padding: 30px; color: #555; }

/* --- ГЛАВНОЕ МЕНЮ: единые карточки-обложки -------------------------------
   Обложки взяты из материала (192x192, фиолетово-неоновые — в нашей палитре).
   Карточка теперь всегда одной формы: картинка сверху, подпись на затемнении.
   Раньше часть карточек была с картинкой, часть без — сетка выглядела рвано. */
.game-grid { gap: 12px; padding: 16px; }
.game-item {
    padding: 0;
    min-height: 0;
    border-radius: var(--ui-r-lg, 20px);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
}
.game-item .game-cover { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.game-item .game-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    margin: 0; filter: none; transform: none;
    display: block;
}
.game-item .game-meta {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 26px 10px 10px;
    text-align: center;
    background: linear-gradient(to top, rgba(10, 7, 24, .95) 34%, rgba(10, 7, 24, 0));
}
.game-item .game-meta h3 { margin: 0 0 3px; font-size: 13px; line-height: 1.15; }
.game-item .game-meta span {
    display: block;
    font-size: 10px; line-height: 1.25;
    color: var(--ui-text-dim, #b6bcd2);
}
.game-item .badge { position: absolute; top: 8px; left: 8px; z-index: 3; }
.game-item:active { transform: scale(.97); }
/* --- МЕНЮ: карточки-анонсы («скоро») -------------------------------------
   Игры, арт которых уже есть в проекте, но механики ещё нет. Карточка ведёт
   себя честно: по нажатию говорит, что игра скоро появится, а не молчит
   и не открывает пустой экран. */
.game-item.is-soon .game-cover img { filter: saturate(.72) brightness(.78); }
.game-item.is-soon .game-meta h3 { color: #cfd3e6; }
.game-item.is-soon .game-meta span { color: #8f95ad; }
.badge.soon { background: rgba(124, 92, 226, .92); color: #fff; }

/* ── Плинко: ИХ страница игры в кадре (`games/plinko/`) ────────────────────────
   Их плинко — отдельный документ со своим CSS (`games/plinko/game.css`) и своим
   canvas-полем, поэтому кадру нужна вся площадь экрана: без нашего скролла и без
   отступов сверху. Место под нижнее меню остаётся от `.page` — его `padding-bottom`. */
#screen-plinko.page {
    overflow: hidden;
    padding-top: 0;
}
#screen-plinko .pl-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0b0b0e;
    color-scheme: dark;
}

/* --- ВИТРИНА: фильтр, счётчик, догрузка -----------------------------------
   Каталог — 7578 моделей в 120 подарках. Раньше витрина рисовала всё сразу,
   отчего телефон задыхался; теперь показывает по 60 плиток, даёт выбрать
   подарок и догружает остальное по кнопке. */
.gift-filter-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.gift-filter-select {
    flex: 1 1 auto;
    min-width: 0; height: var(--ctl-h-sm, 38px);
    padding: 0 10px;
    border-radius: var(--ctl-r, 12px);
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    color: #e8eaf6;
    font-size: 12px; font-weight: 600;
}
.gift-filter-select option { background: #14102a; color: #e8eaf6; }
.gift-shop-count { flex: 0 0 auto; font-size: 11px; color: var(--ui-text-dim, #b6bcd2); white-space: nowrap; }
.gift-more-wrap { display: flex; justify-content: center; padding: 4px 16px 22px; }
.gift-more-btn { width: 100%; max-width: 320px; }
.gift-card .gift-gift {
    display: block;
    font-size: 9px; line-height: 1.2;
    color: var(--ui-text-dim, #b6bcd2);
    text-transform: uppercase; letter-spacing: .03em;
    margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gift-card .gift-model {
    display: block;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    color: #e8eaf6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* --- МЕНЮ: обложки одним спрайтом ----------------------------------------
   17 обложек отдельными файлами — это 17 запросов, а через туннель каждый
   стоит около 700 мс: меню открывалось 12 секунд. Спрайт — один запрос. */
.game-item .game-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-image: url('assets/newic/covers-sprite.webp');
    background-size: 600% 300%;
    background-repeat: no-repeat;
    background-position: 0 0;
}.game-item .game-cover.cv-0 { background-position: 0% 0%; }
.game-item .game-cover.cv-1 { background-position: 20% 0%; }
.game-item .game-cover.cv-2 { background-position: 40% 0%; }
.game-item .game-cover.cv-3 { background-position: 60% 0%; }
.game-item .game-cover.cv-4 { background-position: 80% 0%; }
.game-item .game-cover.cv-5 { background-position: 100% 0%; }
.game-item .game-cover.cv-6 { background-position: 0% 50%; }
.game-item .game-cover.cv-7 { background-position: 20% 50%; }
.game-item .game-cover.cv-8 { background-position: 40% 50%; }
.game-item .game-cover.cv-9 { background-position: 60% 50%; }
.game-item .game-cover.cv-10 { background-position: 80% 50%; }
.game-item .game-cover.cv-11 { background-position: 100% 50%; }
.game-item .game-cover.cv-12 { background-position: 0% 100%; }
.game-item .game-cover.cv-13 { background-position: 20% 100%; }
.game-item .game-cover.cv-14 { background-position: 40% 100%; }
.game-item .game-cover.cv-15 { background-position: 60% 100%; }
.game-item .game-cover.cv-16 { background-position: 80% 100%; }

/* ============================================================
   ПЕРЕРАБОТКА ШАПКИ И НИЖНЕГО МЕНЮ
   Иконки меню — из материала, одним спрайтом: 5 иконок = 1 запрос
   вместо 5, а через туннель каждый запрос стоит около 700 мс.
   ============================================================ */

/* --- Шапка --- */
.top-bar {
    padding: 10px 12px;
    gap: 10px;
    background: linear-gradient(180deg, rgba(22, 13, 38, .94), rgba(11, 8, 20, .82));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.user-block { gap: 9px; cursor: pointer; min-width: 0; }
.user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avatar-wrapper {
    position: relative;
    padding: 2px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent-pink), var(--accent-purple));
    box-shadow: 0 0 14px rgba(255, 0, 204, .32);
    flex: 0 0 auto;
}
.avatar-wrapper img {
    width: 40px; height: 40px;
    border-radius: 13px;
    border: 0;
    display: block;
    object-fit: cover;
}
.nickname {
    font-size: 15px; line-height: 1.15; letter-spacing: .2px;
    max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status { font-size: 11px; text-transform: none; letter-spacing: .2px; color: #5fe08a; }
.status b { color: #b8ffcf; }
.balance-block {
    background: linear-gradient(135deg, rgba(255, 204, 0, .18), rgba(255, 0, 204, .10));
    border: 1px solid rgba(255, 204, 0, .34);
    padding: 5px 6px 5px 13px;
    border-radius: 22px;
    gap: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 14px rgba(0, 0, 0, .30);
}
#balance { font-size: 17px; letter-spacing: .3px; text-shadow: 0 0 12px rgba(255, 204, 0, .35); }
.coin-icon { width: 18px; height: 18px; }
.deposit-btn {
    width: 30px; height: 30px; font-size: 19px;
    box-shadow: 0 4px 12px rgba(255, 0, 204, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.music-toggle { width: 34px; height: 34px; font-size: 15px; flex: 0 0 auto; }

/* --- Нижнее меню --- */
.bottom-menu {
    padding: 6px 8px calc(8px + var(--safe-bottom));
    background: linear-gradient(180deg, rgba(14, 10, 26, .92), rgba(9, 7, 16, .98));
    border-top: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .45);
}
.bottom-menu .nav-btn { min-height: 54px; gap: 4px; border-radius: 14px; }
.bottom-menu .nav-btn .nav-icon {
    width: 26px; height: 26px;
    background-image: url('assets/newic/nav-sprite.webp');
    background-size: 500% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    opacity: .48;
    filter: saturate(.45) brightness(.85);
    transition: opacity .2s ease, filter .2s ease, transform .3s ease;
}
.bottom-menu .nav-btn.active .nav-icon { opacity: 1; filter: none; transform: translateY(-1px) scale(1.12); }
.bottom-menu .nav-btn .nav-ic-games { background-position: 0% 50%; }
.bottom-menu .nav-btn .nav-ic-tops { background-position: 25% 50%; }
.bottom-menu .nav-btn .nav-ic-shop { background-position: 50% 50%; }
.bottom-menu .nav-btn .nav-ic-user { background-position: 75% 50%; }
.bottom-menu .nav-btn .nav-ic-altushka { background-position: 100% 50%; }
.bottom-menu .nav-btn span {
    font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
    color: rgba(255, 255, 255, .62);
}
.bottom-menu .nav-btn.active span { color: #fff; text-shadow: 0 0 10px rgba(255, 0, 204, .4); }
.bottom-menu .nav-btn::after { width: 22px; height: 2.5px; border-radius: 2px; bottom: 1px; }

/* Центральная кнопка. Сердечко заменено на лицо самой Альтушки: openAltushka()
   живая (определена инлайн в index.html) и открывает персонажа с проверкой 18+. */
.nav-btn-center {
    width: 52px; height: 52px;
    margin: -16px 4px 0;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--accent-pink), var(--accent-purple));
    border: 2px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 22px rgba(255, 0, 204, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .2s ease, box-shadow .3s ease;
}
.nav-btn-center:active { transform: scale(.93); }
.bottom-menu .nav-btn-center .nav-icon {
    width: 28px; height: 28px;
    opacity: 1;
    filter: none;
    transform: none;
    background-image: url('assets/newic/nav-sprite.webp');
    background-size: 500% 100%;
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
/* ============================================================
   ШРИФТЫ: Onest + Unbounded из материала (локально, проект не ходит в сеть
   даже за шрифтами) — кириллица, латиница, знак валюты.
   ============================================================ */
/* Unbounded + Onest (кириллица, латиница, ₽) локально: игра не ходит в сеть даже за шрифтами */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body, button, input, select, textarea { font-family: 'Onest', 'Segoe UI', system-ui, sans-serif; }
.brand, .logo, h1, h2, .screen-title { font-family: 'Unbounded', 'Onest', sans-serif; }


/* --- ВИТРИНА: картинки подарков одним спрайтом ---------------------------
   124 подарка в одном файле. Отдельными картинками это 120 запросов, а
   через туннель каждый стоит около 700 мс. Дефолтные подарки взяты из
   rocket (материал-2) — по одной картинке на подарок, без скинов. */
.gift-card .gift-art {
    width: 92px;
    height: 92px;
    display: block;
    background-image: url('nft/gifts-sprite.webp');
    background-size: 1600% 800%;
    background-repeat: no-repeat;
    background-position: 0 0;
    backface-visibility: hidden;
}
.gift-card .gift-model {
    font-weight: 700;
    letter-spacing: .2px;
    max-width: 92px;
    text-align: center;
}
.gift-card .gift-price {
    font-weight: 800;
    font-size: 12px;
    color: var(--gold);
    letter-spacing: .2px;
}


/* --- ВИТРИНА ПОДАРКА: перебор оформлений --------------------------------
   В игре и инвентаре подарок показывается дефолтной картинкой, а тут
   игрок видит, какие оформления в него входят. Слоёв два: пока один
   гаснет, второй проявляется — переход получается плавным, без рывка. */
.gift-showcase {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .28s ease;
}
.gift-showcase.show { opacity: 1; }
.gs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 4, 12, .78);
    backdrop-filter: blur(6px);
}
.gs-card {
    position: relative;
    width: min(88vw, 340px);
    padding: 22px 20px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(30, 18, 50, .98), rgba(16, 11, 28, .98));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(14px) scale(.96);
    transition: transform .32s cubic-bezier(.22, 1.15, .36, 1);
}
.gift-showcase.show .gs-card { transform: translateY(0) scale(1); }
.gs-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.gs-stage {
    position: relative;
    width: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-stage::before {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 204, .22), rgba(120, 80, 255, .10) 55%, transparent 72%);
}
.gs-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: 0 50%;
    transition: opacity .6s ease;
    will-change: opacity;
}
.gs-plain { background-size: contain !important; }
.gs-counter {
    position: absolute;
    bottom: -4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .10);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .4px;
}
.gs-name {
    font-family: 'Unbounded', 'Onest', sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    letter-spacing: .2px;
}
.gs-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .48);
}
.gs-price {
    font-size: 21px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 16px rgba(255, 204, 0, .35);
}
.gs-buy {
    width: 100%;
    margin-top: 4px;
    padding: 13px 0;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 10px 24px rgba(255, 0, 204, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
    cursor: pointer;
}
.gs-buy:active { transform: scale(.97); }

/* --- ЛЁГКИЙ РЕЖИМ: что он гасит ------------------------------------------
   Обложки карточек игр — это 18 карточек по два анимированных псевдоэлемента,
   то есть 36 постоянно живущих анимаций только на главном экране. Плюс blur
   шапки и нижнего меню работает ВСЕГДА: фон под ними почти непрозрачный,
   поэтому визуально мы почти ничего не теряем, а GPU освобождаем. */
body.perf-lite .game-item::before,
body.perf-lite .game-item::after,
body.perf-lite .mine-cell .gem,
body.perf-lite .daily-arrow,
body.perf-lite .badge.dev,
body.perf-lite .loader-progress-bar {
    animation: none !important;
}

body.perf-lite .top-bar,
body.perf-lite .bottom-menu,
body.perf-lite .modal-overlay,
body.perf-lite .toast-item,
body.perf-lite .bet-panel,
body.perf-lite .crash-history-panel,
body.perf-lite .case-cooldown,
body.perf-lite .fortune-mode-btn,
body.perf-lite .crash-area .timer-overlay,
body.perf-lite .gs-backdrop,
body.perf-lite .loader-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- РАЗДЕЛ «ЗАРАБОТОК» В ПРОФИЛЕ ----------------------------------------
   Иконки — из материала, одним спрайтом: 8 иконок = 1 запрос. Отдельные
   файлы через туннель стоили бы 8 x 700 мс. */
.earn-section { margin: 14px 0 4px; }
.earn-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 9px;
    padding: 0 2px;
}
.earn-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, .55);
}
.earn-tier { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .3px; }
.earn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.earn-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 9px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, border-color .2s ease;
}
.earn-tile:active { transform: scale(.95); border-color: rgba(255, 0, 204, .35); }
.earn-ic {
    width: 34px;
    height: 34px;
    background-image: url('assets/newic/earn-sprite.webp');
    background-size: 800% 100%;
    background-repeat: no-repeat;
    background-position: 0 50%;
}
.earn-name { font-size: 11px; font-weight: 800; letter-spacing: .2px; }
.earn-sub { font-size: 9px; color: rgba(255, 255, 255, .42); letter-spacing: .2px; }
.earn-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 9px;
    font-weight: 900;
    color: #0b0818;
    background: var(--gold);
    border-radius: 8px;
    padding: 1px 5px;
    display: none;
}
.earn-badge.on { display: block; }

.earn-modal { display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; }
.earn-sum {
    font-family: 'Unbounded', 'Onest', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(255, 204, 0, .35);
}
.earn-line { font-size: 12.5px; color: rgba(255, 255, 255, .8); line-height: 1.45; }
.earn-line.dim { color: rgba(255, 255, 255, .45); font-size: 11.5px; }
.earn-claim {
    width: 100%;
    margin-top: 12px;
    padding: 13px 0;
    border: none;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 10px 22px rgba(255, 0, 204, .36), inset 0 1px 0 rgba(255, 255, 255, .28);
    cursor: pointer;
}
.earn-claim:active { transform: scale(.97); }

.vip-table { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.vip-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.3fr;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .035);
}
.vip-row.head { background: none; color: rgba(255, 255, 255, .4); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.vip-row.on { background: rgba(255, 204, 0, .13); color: #fff; border: 1px solid rgba(255, 204, 0, .3); }


/* --- ЗАДАНИЯ --- */
.task-list { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.task-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
}
.task-row.is-claimed { opacity: .5; }
.task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-title { font-size: 12.5px; font-weight: 800; color: #fff; }
.task-desc { font-size: 11px; color: rgba(255, 255, 255, .5); line-height: 1.35; }
.task-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}
.task-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
}
.task-prog { font-size: 10px; color: rgba(255, 255, 255, .42); letter-spacing: .4px; }
.task-state { font-size: 10.5px; font-weight: 900; color: var(--gold); letter-spacing: .4px; }
.task-state.done { color: #5fe08a; }
.task-claim {
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(255, 0, 204, .3);
}
.task-claim:active { transform: scale(.95); }

/* --- ТУРНИР --- */
.tour-table { display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 4px 0; }
.tour-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
}
.tour-row.is-me { background: rgba(255, 204, 0, .13); border: 1px solid rgba(255, 204, 0, .3); color: #fff; }
.tour-place { font-weight: 900; color: var(--gold); text-align: center; }
.tour-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-score { font-weight: 800; color: #fff; }


/* --- TON В ШАПКЕ ----------------------------------------------------------
   Отдельная валюта рядом со звёздами. Иконка — из материала (pay1001/ton.svg,
   0,5 КБ), поэтому она одна и не тянет спрайт. */
.ton-block {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0, 152, 234, .20), rgba(0, 152, 234, .06));
    border: 1px solid rgba(0, 152, 234, .38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.ton-block:active { transform: scale(.95); }
.ton-icon { width: 17px; height: 17px; display: block; }
.ton-block #ton-balance {
    font-size: 14px;
    font-weight: 800;
    color: #7ed2ff;
    letter-spacing: .2px;
}

/* --- ШАПКА: ужимаем под три валютных блока -------------------------------
   После добавления TON в шапке стало пять элементов на 430 px, и статус
   «Игроков онлайн: 1486» разъехался на три строки. Убираем лишние отступы
   и длинный текст — теперь всё в одну строку. */
.top-bar { padding: 9px 10px; gap: 7px; }
.user-block { gap: 7px; }
.avatar-wrapper img { width: 38px; height: 38px; }
.nickname { font-size: 14px; max-width: 25vw; }
.status { font-size: 10.5px; white-space: nowrap; }
.ton-block { padding: 4px 9px 4px 7px; gap: 4px; }
.ton-icon { width: 15px; height: 15px; }
.ton-block #ton-balance { font-size: 13px; }
.balance-block { padding: 4px 5px 4px 11px; gap: 6px; }
#balance { font-size: 16px; }
.coin-icon { width: 16px; height: 16px; }
.deposit-btn { width: 27px; height: 27px; font-size: 17px; }
.music-toggle { width: 30px; height: 30px; font-size: 13px; }

/* --- АРЕНА: интерфейс -----------------------------------------------------
   Фон и сетка — ассеты из материала (assets/arena/). Канвас теперь
   полупрозрачный, поэтому фон виден сквозь зоны, а не глухая заливка. */
.arena-stage {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(120, 200, 255, .18);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 60px rgba(0, 40, 80, .35);
    background: #071018;
}
.arena-stage-bg,
.arena-stage-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.arena-stage-bg { object-fit: cover; opacity: .9; }
.arena-stage-grid { object-fit: cover; opacity: .22; mix-blend-mode: screen; }
.arena-stage canvas { position: relative; z-index: 2; display: block; }
.arena-stage .arena-ball { z-index: 3; }

.arena-rake-note {
    margin: 4px 0 0;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
}
.arena-rake-note span { color: var(--gold); font-weight: 900; }

.arena-header { border-radius: 20px; }
.arena-players-card { border-radius: 18px; }


/* --- КОРОВКА (Gift Road) --------------------------------------------------
   Дорога: горизонтальная лента из полос. Арт из материала — корова, машины
   по обочинам. Корову двигаем CSS-переходом, поэтому шаг выглядит плавным. */
/* Только нижний отступ: верхний задан классом .page, иначе заголовок
   уезжает под фиксированную шапку. */
#screen-cow { padding-bottom: 110px; }
.cow-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    /* Верхний отступ — как у остальных экранов: у .page его нет, а шапка
       приложения фиксированная, иначе заголовок уезжает под неё. */
    /* Кнопка «назад» висит фиксированно в левом верхнем углу (до 108 px),
       поэтому контент начинаем ниже неё. */
    padding: 42px 16px 10px;
}
.cow-label { font-size: 11px; color: rgba(255,255,255,.5); margin: 0 0 2px; font-weight: 700; }
.cow-mult {
    font-family: 'Unbounded', 'Onest', sans-serif;
    font-size: 30px; font-weight: 700; color: #fff; letter-spacing: .5px;
    text-shadow: 0 0 20px rgba(255,0,204,.35);
}
.cow-payout { font-size: 20px; font-weight: 900; color: var(--gold); }

/* --- КОРОВКА: сцена улицы — перенос их .cr-* (game.css) один в один ------
   Их index.html пустой, всю сцену строит game.js, а рисует game.css.
   Геометрия из их game.js: SIDE 146, LANE 120, MH 84, PILL_H 34, PILL_DY 74,
   CAR_H 146, SPR_H 709, GIFT_BOT 112, GIFT_DISC 76. Всё в «u»: пиксели = u × s,
   где s считается от размера поля — поэтому на телефоне пропорции те же.
   Слева газон с коровой (road-left.png), справа финиш-дом (road-right.png),
   между ними асфальт, по полосам едут машины. */

.cow-road-wrap {
    position: relative;
    margin: 0 12px;
    /* их поле — 376 x 444: пропорция сцены, а не мои 300 px */
    aspect-ratio: 376 / 444;
    max-height: 62vh;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #212440;
    /* значения по умолчанию — как в их .cr; JS подставляет свои под размер поля */
    --s: 1;
    --lane: 120px;
    --side: 146px;
    --row: 50%;
    --spr-h: 709px;
    --spr-y: 0px;
    --end-y: 0px;
    --road: #212440;
    --dash: rgba(128, 138, 196, .30);
    --cr-win: #5fe08a;
    --cr-danger: #ff4860;
    --cr-primary: #ff4fd8;
    --font-display: 'Unbounded', 'Onest', sans-serif;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
}

/* обочина слева: газон, по нему идёт корова */
.cow-side {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--side);
    background: url(/assets/cow/road-left.png) 0 var(--spr-y) / var(--side) var(--spr-h) repeat-y, #3B7573;
}
/* дорога: асфальт от обочины до финиша */
/* Их `.cr` — корень сцены. У нас это `#cow-road` (класс занят разметкой). */
.cow-road {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--road);
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
}
/* Дорога — контейнер полос. Их `.cr-road`: left: var(--side), ширина = полос
   × LANE, а полосы внутри стоят на left: i × LANE (от края ДОРОГИ, не сцены).
   Имя `cow-ways`, а не `cow-road`: класс `cow-road` уже занят корнем сцены
   (`#cow-road` из index.html) — с одинаковым именем стили дрались. */
.cow-ways {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--road);
}
/* трек — то, что едет под коровой: полосы, машины, финиш */
/* Их `.cr-track`: в нём ВСЁ — обочина, дорога, машины, подарки, финиш.
   Ширина задаётся в JS (sideW + полосы × LANE + хвост под финиш). */
.cow-track {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    will-change: transform;
    transition: transform .55s cubic-bezier(.3, 1.1, .4, 1);
}
/* финиш справа: дом (road-right.png) + полоса дороги под ним */
.cow-end {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 2;
    background: url(/assets/cow/road-right.png) 0 var(--end-y) / auto var(--spr-h) no-repeat,
                url(/assets/cow/road-right-walk.png) 0 calc(var(--end-y) + var(--spr-h) * 56 / 709) / calc(var(--spr-h) * 126 / 709) auto repeat-y,
                #3B7573;
}

/* полоса дороги: вертикальная лента во всю высоту */
.cow-lane {
    position: absolute;
    top: 0; bottom: 0;
    width: var(--lane);
}
/* разметка — пунктир между полосами, как у них: градиентом, а не картинкой */
.cow-lane + .cow-lane::before {
    content: "";
    position: absolute;
    left: calc(-2px * var(--s));
    top: 0; bottom: 0;
    width: calc(4px * var(--s));
    border-radius: 2px;
    background: repeating-linear-gradient(180deg,
        var(--dash) 0 calc(34px * var(--s)),
        transparent calc(34px * var(--s)) calc(62px * var(--s)));
    background-position: 0 calc(var(--row) - 17px * var(--s));
}

/* люк, шлагбаум, плашка, кольцо — все по центру полосы */
.cow-mh, .cow-bar, .cow-pill, .cow-ring {
    position: absolute;
    left: 50%;
    pointer-events: none;
}
.cow-mh {
    z-index: 1;
    top: var(--row);
    width: calc(84px * var(--s));
    aspect-ratio: 96 / 84;
    transform: translate(-50%, -50%);
}
.cow-mh img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
}
.cow-mh__g { opacity: 0; }
.cow-lane.is-done .cow-mh__g,
.cow-lane.is-cur .cow-mh__g { opacity: 1; }
.cow-lane.is-done .cow-mh__d,
.cow-lane.is-cur .cow-mh__d { opacity: 0; }
.cow-lane.is-flip .cow-mh { animation: cowFlip .42s cubic-bezier(.3, .7, .3, 1); }
@keyframes cowFlip {
    0%   { transform: translate(-50%, -50%) scale(1, 1); }
    35%  { transform: translate(-50%, -50%) scale(1.12, .82); }
    100% { transform: translate(-50%, -50%) scale(1, 1); }
}

/* шлагбаум поднимается, когда полосу прошли */
.cow-bar {
    z-index: 5;
    top: calc(var(--row) - 108px * var(--s));
    width: calc(86px * var(--s));
    transform: translate(-50%, 0);
    opacity: 0;
    transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
    transform-origin: 50% 100%;
}
.cow-lane.is-done .cow-bar,
.cow-lane.is-cur .cow-bar {
    opacity: 1;
    animation: cowBar .35s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes cowBar {
    from { transform: translate(-50%, calc(-26px * var(--s))) scale(.7); opacity: 0; }
    to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* кольцо на следующей полосе — пульсирует, зовёт шагнуть */
.cow-ring {
    top: var(--row);
    width: calc(98px * var(--s));
    height: calc(98px * var(--s));
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0 calc(3px * var(--s)) rgba(255, 79, 216, .55),
                0 0 calc(26px * var(--s)) rgba(255, 79, 216, .28);
}
.cow-lane.is-next .cow-ring { animation: cowRing 1.6s ease-in-out infinite; }
@keyframes cowRing {
    0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.94); }
    50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.02); }
}

/* плашка множителя — НАД слоем машин, фон непрозрачный: машина проезжает под ней */
.cow-pill {
    top: calc(var(--row) + 74px * var(--s));
    transform: translate(-50%, -50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(88px * var(--s));
    max-width: calc(var(--lane) - 10px);
    height: calc(34px * var(--s));
    padding: 0 clamp(3px, calc(24px * var(--s) - 8px), calc(12px * var(--s)));
    border-radius: calc(11px * var(--s));
    background: #2f3560;
    color: #C3C8E4;
    font: 700 max(13px, calc(15px * var(--s)))/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -.02em;
    transition: background-color .2s ease, color .2s ease;
}
.cow-lane.is-done .cow-pill { background: #253a2e; color: var(--cr-win); }
.cow-lane.is-cur .cow-pill    { background: #1f8f4e; color: #fff; }
.cow-lane.is-next .cow-pill   { background: #43244a; color: #ffd6f6; }
.cow-lane.is-lost .cow-pill { background: #8c1f34; color: #fff; }

/* слой машин — под плашками (z-index 3), машины двигает код */
.cow-cars {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.cow-car {
    position: absolute;
    left: 0; top: 0;
    object-fit: contain;
    will-change: transform;
    filter: drop-shadow(0 calc(12px * var(--s)) calc(10px * var(--s)) rgba(4, 6, 16, .5));
}

/* карточка подарка: низ висит над люком, растёт вверх — диск + сумма */
.cow-gift {
    position: absolute;
    z-index: 4;
    top: calc(var(--row) - 112px * var(--s));
    left: 0;
    display: grid;
    justify-items: center;
    gap: calc(4px * var(--s));
    transform: translate(-50%, -100%);
    transition: opacity .25s ease, visibility 0s linear 0s;
}
.cow-gift__disc {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(72px * var(--s));
    height: calc(72px * var(--s));
    border-radius: 50%;
    background: radial-gradient(closest-side, #262a4d 0%, #181b36 72%, #14172e 100%);
    box-shadow: inset 0 0 0 calc(2px * var(--s)) rgba(128, 138, 196, .26),
                0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(6, 8, 20, .42);
    overflow: hidden;
    transition: box-shadow .2s ease, opacity .2s ease;
}
.cow-gift__disc img {
    width: calc(56px * var(--s));
    height: calc(56px * var(--s));
    object-fit: contain;
    transform-origin: 50% 60%;
    transition: opacity .2s ease, filter .2s ease;
}
.cow-gift__disc .cow-coin { opacity: .9; }
.cow-lane.is-next .cow-gift__disc img { animation: cowGiftBob 1.1s ease-in-out infinite; }
@keyframes cowGiftBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-4px * var(--s))) scale(1.04); }
}
/* сумма шага — крупная плашка под диском */
.cow-gift__sum {
    display: inline-flex;
    align-items: center;
    height: max(20px, calc(24px * var(--s)));
    padding: 0 max(5px, calc(8px * var(--s)));
    border-radius: 999px;
    max-width: calc(var(--lane) - 6px);
    box-sizing: border-box;
    overflow: hidden;
    background: #14172e;
    box-shadow: inset 0 0 0 1px rgba(128, 138, 196, .24);
    color: #D5D9EE;
    font: 800 max(13px, calc(15px * var(--s)))/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -.02em;
    transition: background-color .2s ease, color .2s ease;
}
.cow-lane.is-next .cow-gift__sum { background: #43244a; color: #ffd6f6; }
.cow-lane.is-done .cow-gift__sum { background: #253a2e; color: var(--cr-win); }

/* корова — на газоне слева, как у них: она на месте, дорога едет под ней */
/* Их `.cr-cow`: позицию держит КОНТЕЙНЕР (transform), а прыжок и
   расплющивание идут по ВНУТРЕННЕМУ спрайту. Пока у нас был один элемент,
   transform дрался сам с собой — отсюда дёрганье. */
.cow-cow {
    position: absolute;
    left: 0; top: 0;
    z-index: 2;
    width: calc(150px * var(--s));
    height: auto;
    aspect-ratio: 2 / 1;
    pointer-events: none;
    transform-origin: 50% 88%;
    filter: drop-shadow(0 calc(8px * var(--s)) calc(8px * var(--s)) rgba(6, 8, 20, .45));
    will-change: transform;
}
.cow-cow__sprite {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    transform-origin: 50% 80%;
}
/* Их `cowRubupBreathe` — только когда корова СТОИТ (`:not(.is-walking)`) */
.cow-cow:not(.is-walking):not(.is-flat) .cow-cow__sprite { animation: cowBreathe 2.8s ease-in-out infinite; }
/* Их `cowStepSprite` — прыжок на шаг, 500 мс (их HOP_MS) */
.cow-cow.is-walking .cow-cow__sprite { animation: cowHop 500ms linear both; }
/* Их `cowRubupFlat` — расплющивание */
.cow-cow.is-flat .cow-cow__sprite { animation: cowFlat 333ms ease-out both; }
/* Их `.cr.is-shake .cr-track` — тряска всей сцены при ударе */
.cow-road.is-shake .cow-track { animation: cowShake .38s ease-in-out; }
@keyframes cowShake {
    0%, 100% { translate: 0 0; }
    20% { translate: -5px 3px; }
    45% { translate: 5px -3px; }
    70% { translate: -3px 2px; }
}
/* Старый <img id="cow-hero"> из index.html больше не нужен — корову строит сцена */
.cow-hero { display: none !important; }


.cow-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 12px 0; }
.cow-mode {
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    background: rgba(255,255,255,.04); color: #fff; padding: 8px 4px;
    display: flex; flex-direction: column; gap: 2px; align-items: center; cursor: pointer;
}
.cow-mode span { font-size: 11px; font-weight: 800; }
.cow-mode b { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.45); }
.cow-mode.is-on { border-color: rgba(255,79,216,.55); background: rgba(255,79,216,.14); }

.cow-panel { margin: 12px 12px 0; display: flex; flex-direction: column; gap: 9px; }
.cow-bet-row {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--glass-border); border-radius: 12px;
    background: rgba(0,0,0,.28); padding: 10px 12px;
}
.cow-bet-row input { flex: 1; border: none; background: transparent; color: #fff; font-size: 15px; font-weight: 900; outline: none; }
.cow-bet-row span { color: var(--gold); font-weight: 900; }
.cow-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.cow-chip {
    border: 1px solid var(--glass-border); border-radius: 11px; background: rgba(255,255,255,.05);
    color: #d7deef; font-size: 12px; font-weight: 800; min-height: 38px; cursor: pointer;
}
.cow-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cow-step, .cow-cash {
    min-height: 50px; border: none; border-radius: 16px; color: #fff;
    font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 900; letter-spacing: .6px; cursor: pointer;
}
.cow-step { background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); box-shadow: 0 10px 24px rgba(255,0,204,.35); }
.cow-cash { background: linear-gradient(135deg, #2fbf6a, #1d8f4e); box-shadow: 0 10px 24px rgba(47,191,106,.30); }
.cow-cash.is-off { opacity: .4; box-shadow: none; }
.cow-step:active, .cow-cash:active { transform: scale(.97); }

.cow-fair {
    margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
    font-size: 10.5px; color: rgba(255,255,255,.55); display: flex; flex-direction: column; gap: 3px;
}
.cow-fair code { font-size: 10px; color: #9fd7ff; word-break: break-all; }
.cow-fair.is-bad { border-color: rgba(255,72,72,.5); color: #ff8f8f; }


.cow-fly-coin {
    position: absolute;
    width: 26px; height: 26px;
    pointer-events: none;
    z-index: 9;
    animation: cowCoinFly 1.1s ease-out forwards;
}
@keyframes cowCoinFly {
    0% { transform: translate(0, 0) scale(.7); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
/* Выпавший подарок вылетает из-под коровы вверх и там же остаётся видимым
   дольше монет: игрок должен успеть разглядеть, ЧТО именно ему упало —
   вещь уходит в инвентарь, а не превращается в звёзды. */
.cow-fly-gift {
    position: absolute;
    width: 52px; height: 52px;
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
    animation: cowGiftPop 2.4s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes cowGiftPop {
    0%   { transform: translateY(10px) scale(.4); opacity: 0; }
    18%  { transform: translateY(-18px) scale(1.18); opacity: 1; }
    32%  { transform: translateY(-14px) scale(1); opacity: 1; }
    78%  { transform: translateY(-16px) scale(1); opacity: 1; }
    100% { transform: translateY(-46px) scale(.92); opacity: 0; }
}

/* Порядок слоёв как у них: люк 1 < машины 3 < подарки 4 < плашка 5. Слой
   подарков отдельный — в их разметке карточки НЕ внутри полосы. */
.cow-gifts {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.cow-lane .cow-pill { z-index: 5; }


/* Их `fold()`: в раунде режимы и ставку сворачиваем — остаются только
   «ВПЕРЁД» и «ЗАБРАТЬ». */
#screen-cow.is-round .cow-modes,
#screen-cow.is-round .cow-bet-row,
#screen-cow.is-round .cow-chips { display: none; }

/* Их R11/ALL1006: редкость подарка — слабый свет сверху + дуга снизу цветом
   редкости. Пороги (game.js): 100 / 1000 / 3000 / 6000 / 10000. */
.cow-gift.is-r0 { --rc: 150,162,196; }
.cow-gift.is-r1 { --rc: 52,116,255; }
.cow-gift.is-r2 { --rc: 138,78,255; }
.cow-gift.is-r3 { --rc: 226,64,222; }
.cow-gift.is-r4 { --rc: 242,58,72; }
.cow-gift.is-r5 { --rc: 249,204,82; }
.cow-gift[class*="is-r"] .cow-gift__disc {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(var(--rc), .24) 0%, rgba(var(--rc), 0) 72%),
        radial-gradient(closest-side, #262a4d 0%, #181b36 72%, #14172e 100%);
    box-shadow: inset 0 calc(-3px * var(--s)) 0 rgb(var(--rc)),
                inset 0 0 0 1px rgba(var(--rc), .32),
                0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(6, 8, 20, .42);
}
.cow-gift.is-next[class*="is-r"] .cow-gift__disc {
    box-shadow: inset 0 calc(-3px * var(--s)) 0 rgb(var(--rc)),
                inset 0 0 0 calc(2px * var(--s)) rgba(255, 255, 255, .7),
                0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(6, 8, 20, .42);
}
.cow-gift.is-cur[class*="is-r"] .cow-gift__disc {
    box-shadow: inset 0 calc(-3px * var(--s)) 0 rgb(var(--rc)),
                inset 0 0 0 calc(3px * var(--s)) var(--accent-pink),
                0 0 calc(22px * var(--s)) rgba(255, 0, 204, .38);
}
.cow-gift.is-cash .cow-gift__disc {
    background: radial-gradient(closest-side, #1f2342 0%, #161932 100%);
}

/* Их `.cr-edge--r`: затемнение правого края поля. */
.cow-edge {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 48px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(33, 36, 64, 0), rgba(18, 21, 40, .55));
}

/* Их `.cr-feathers`: слой перьев при сбитии (SVG, рисует JS). */
.cow-feathers {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 6;
    overflow: visible;
    pointer-events: none;
}

/* Их кнопки поверх поля: `.gk-field__corner--tl/--tr/--br`. Звук слева
   сверху, «?» справа сверху, щит честности справа снизу. */
.cow-corner {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.cow-corner > * { pointer-events: auto; }
.cow-corner--tl { top: 10px; left: 10px; }
.cow-corner--tr { top: 10px; right: 10px; }
.cow-corner--br { bottom: 8px; right: 12px; }
.cow-tool {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(12,12,19,.72);
    color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
    transition: opacity .2s ease;
}
.cow-tool[aria-pressed="false"] { opacity: .5; }
.cow-tool:active { transform: scale(.94); }
.cow-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(12,12,19,.72);
    color: #9fe3b0;
    font-size: 11.5px; font-weight: 700;
}

/* Их окно «Честная игра»: короткий текст, «Проверить раунд», хеши свёрнуты. */
.cow-dlg {
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - 24px);
    max-width: 400px;
    height: fit-content;
    border: 0;
    padding: 0;
    background: transparent;
    color: #F4F5F7;
}
.cow-dlg::backdrop { background: rgba(6, 8, 16, .74); }
.cow-dlg__box {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1);
    background: #161A2B;
}
.cow-dlg__head { display: flex; align-items: center; gap: 10px; }
.cow-dlg__head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.cow-dlg__x { border: 0; background: none; color: #8D919E; font-size: 22px; line-height: 1; cursor: pointer; }
.cow-fair__intro { margin: 0; font-size: 14px; line-height: 1.45; color: #C9CCD6; }
.cow-fair__box {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #1A2238;
}
.cow-fair__go {
    width: 100%; min-height: 48px;
    border: 0; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, #00c853, #00e676);
    color: #fff; font-size: 15px; font-weight: 800;
}
.cow-fair__go:disabled { opacity: .55; cursor: default; }
.cow-fair__res { display: flex; flex-direction: column; gap: 6px; }
.cow-fair__res[hidden] { display: none; }
.cow-fair__verdict { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.cow-fair__verdict.is-bad { color: #FF8A9B; }
.cow-fair__line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: #C9CCD6; }
.cow-fair__line.is-bad { color: #FF8A9B; }
.cow-fair__more { border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; }
.cow-fair__more > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: #8D919E; }
.cow-fair__more > summary::-webkit-details-marker { display: none; }
.cow-fair__more > summary::after { content: " \25BE"; font-size: 11px; }
.cow-fair__more[open] > summary::after { content: " \25B4"; }
.cow-dlg__list { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cow-dlg__list > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #8D919E; }
.cow-dlg__list dt { flex: none; }
.cow-dlg__list dd { margin: 0; color: #C9CCD6; word-break: break-all; text-align: right; }
.cow-dlg__list dd.is-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
.cow-dlg__row { margin-top: 10px; }
.cow-dlg__btn { width: 100%; min-height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #D7DEEF; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cow-fair__empty { margin: 0; font-size: 14px; color: #8D919E; }

/* ── Экран Коровки как страница их игры ───────────────────────────────────
   Их `gkShell` считает высоту от вьюпорта (`--gk-h`, `--gk-top`), а у нас
   экран был длинной прокручиваемой страницей — поэтому их `bottom`-каркас
   обрезался снизу. Даём экрану высоту окна: поле растягивается, панель
   занимает своё внизу. */
/* 12.10.2026: под игрой теперь их лента ставок (`gkBets`), поэтому экран снова
   прокручивается; каркас игры (`gk-shell`) занимает ровно один экран, лента —
   ниже и доезжает прокруткой. Место под нижнее меню — свой padding-bottom. */
#screen-cow.active {
    display: block;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(84px + var(--safe-bottom));
}
#screen-cow .gk-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}
#screen-cow .gk-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 0 8px;
}
#screen-cow .gk-panel {
    flex: none;
    padding: 10px 12px 12px;
}
/* поле внутри штага тянется на всю его высоту */
#screen-cow .gk-stage > .cow-road-wrap {
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
}
/* Их каркас берёт высоту из `--gk-h` (вьюпорт минус 120) — вместе с нашим
   заголовком это вылезало за экран. Прижимаем его к остатку. */
#screen-cow .gk-shell,
#screen-cow .gk-shell--bottom,
#screen-cow .gk-shell--side {
    height: 100% !important;
    max-height: none !important;
}
#screen-cow .gk-shell > .gk-stage { height: auto !important; max-height: none !important; }

/* ── Коровка: `body.cow-full` — метка «открыт экран Коровки» ──────────────
   12.10.2026: шапку приложения и нижнее меню на экране Коровки больше НЕ
   прячем, и наш `cow-head` (множитель + выплата) вернулся: вставку их
   `gk-head` ВНУТРЬ игры убрали — шапка их сайта переехала в основу
   приложения (правило владельца). Правила ниже — только раскладка их
   панели `gk-panel` под нашу ширину. */
#screen-cow.active { padding-top: 0; }

/* Их `gk-panel__body` на широком экране — две колонки (`1fr 1fr`). На телефоне
   должна быть одна: из-за двух колонок ставка и режимы сжимались в узкие
   полоски. Их `@media` до нашего контейнера не достаёт, поэтому задаём явно. */
body.cow-full .gk-shell .gk-panel__body,
/* `:not([hidden])` — иначе наш `display: flex !important` перебивал их же
   `.gk-pane[hidden] { display: none !important }`, и обе панели режима
   (Ручная/Авто) показывались одновременно. */
body.cow-full .gk-shell .gk-pane:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gk-gap, 14px) !important;
}
/* поле ввода ставки — на всю ширину, как у них */
body.cow-full .gk-amount__box { display: flex !important; align-items: center; gap: 8px; }
body.cow-full .gk-amount__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center;
    font-weight: 700;
}
/* снято: их же сетка `repeat(var(--gk-seg-n), 1fr)` вернее */
/* снято: их же сетка `repeat(var(--gk-seg-n), 1fr)` вернее */

/* Панель Коровки: их `.gk-quick` и `.gk-seg` — сетки по счётчику, который
   ставит их JS (`--gk-quick-n`, `--gk-seg-n`). Мы счётчики теперь передаём,
   а свои перебивки сеток сняли — из-за них кнопки и поле сжимались в полоски. */
body.cow-full .gk-quick,
body.cow-full .gk-seg { display: grid !important; }
body.cow-full .gk-amount__box { display: flex !important; align-items: center; gap: 8px; }
body.cow-full .gk-amount__input { flex: 1 1 auto !important; min-width: 0 !important; }
body.cow-full .gk-amount__btn,
body.cow-full .gk-quick__btn,
body.cow-full .gk-seg__opt { min-width: 0 !important; }

/* Их `.gk-panel` в каком-то слое становится сеткой из двух колонок
   (`44px 320px`): тело панели зажималось в 44 px, а 320 отдавалось низу —
   от этого ½/2×/МАКС, поле ставки и режимы выглядели полосками.
   У них базовое — колонка, её и ставим. */
#screen-cow .gk-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
}
#screen-cow .gk-panel__body,
#screen-cow .gk-panel__foot,
#screen-cow .gk-pane { width: 100% !important; min-width: 0 !important; }

/* Кнопка панели — во всю ширину (их `.gk-ctarow` может сжимать) */
#screen-cow .gk-ctarow { width: 100% !important; display: block !important; }
#screen-cow .gk-cta { width: 100% !important; }
#screen-cow .gk-ctarow .gk-btn { width: 100% !important; margin-top: 8px; }


/* ── Их корень `.gk` (контейнер их кита) ──────────────────────────────────
   Их `.gk` объявляет `container: gk / inline-size` — на нём держатся все их
   @container-правила (телефонные колонки ленты, размеры слайдера и таблиц).
   Штаг игры и лента живут внутри него, как у них: штаг — один экран, лента —
   ниже и доезжает прокруткой экрана. */
#screen-cow > .gk {
    display: flex;
    flex-direction: column;
    /* Остаток места после НАШЕГО заголовка с множителем и щита честности
       (сколько именно — считает `cowRender` и кладёт в `--cow-chrome`).
       Каркас игры не сжимается флексом: иначе поле схлопывалось в полоску. */
    height: calc(100% - var(--cow-chrome, 176px));
}
#screen-cow .gk-shell { flex: 0 0 auto; }
#screen-cow .gk > .gk-bets { height: auto; }


/* ── Их `cw-focus` (в раунде и автоигре тело панели свёрнуто) ─────────────
   Их правило из `game.css` (@container gk max-width 639.98) — у нас та же
   роль: под дорогой остаются только «Забрать» / «Шаг» / «Остановить авто»,
   а поле получает всё освободившееся место (иначе оно сжималось в полоску). */
#screen-cow .gk.cw-focus .gk-panel > .gk-panel__body {
    height: 0;
    min-height: 0;
    margin-block: 0;
    padding-block: 0;
    overflow: hidden;
    opacity: 0;
}
#screen-cow .gk.cw-focus .gk-panel > .gk-panel__foot { margin-bottom: 0; }

/* ── Блэкджек: ИХ страница игры в кадре (`games/blackjack/`) ───────────────────
   Их блэкджек — отдельный документ со своим CSS (`games/blackjack/game.css`),
   своими картами (`cards.js`) и своим китом, поэтому кадру нужна вся площадь
   экрана: без нашего скролла и без отступов сверху. Место под нижнее меню
   остаётся от `.page` — его `padding-bottom`. */
#screen-blackjack.page {
    overflow: hidden;
    padding-top: 0;
}
#screen-blackjack .bj-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0b0b0e;
    color-scheme: dark;
}

/* ── Меню валюты в шапке: фон пунктов ─────────────────────────────────────────
   Их `.menu__item` (пункт меню валюты) фон не задаёт — на их сайте его снимает
   общий сброс кнопок сайта, которого у нас нет. Без него браузер рисует
   системную светло-серую кнопку (#f0f0f0) с белым текстом: «TON» и «USDT» в
   меню становились нечитаемыми. Пункт с выбранной валютой — их же
   `--surface-active` (это правило у них есть). */
#app-topbar .menu__item {
    background: transparent;
    border: 0;
    color: var(--text, #fff);
}
#app-topbar .menu__item:hover,
#app-topbar .menu__item:focus-visible { background: var(--surface-4, rgba(255,255,255,.08)); }
#app-topbar .menu__item[aria-checked="true"] { background: var(--surface-active, rgba(255,255,255,.12)); }
#app-topbar .menu__item .cur-mark { flex: none; display: block; }

/* ── Коровка: суммы на полосах в валюте шапки ─────────────────────────────────
   В звёздах рядом с числом стоит звёздная монета (их вид). В TON/USDT монета
   была бы чужой — её убираем, сумма идёт со своим значком («0,28 ∇»). */
#screen-cow .cow-gift.is-vcur .cow-gift__disc { display: none; }
#screen-cow .cow-gift.is-vcur .cow-gift__sum { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
/* `.rc-g` — их же класс: ставит шрифт значков валюты (`RubupCurrency`) первым,
   иначе TON/звёзды рисуются пустым квадратом */
#screen-cow .rc-g { font-family: RubupCurrency, Unbounded, Onest, sans-serif; }

/* ── Коровка: панель над клавиатурой Telegram ─────────────────────────────────
   Их же правило (`games/cow/game.css`, `.gk-panel.cw-amount-keyboard`): когда
   игрок вводит сумму, панель поднимается на высоту клавиатуры. Сдвиг считает
   `cowAmountViewport()` в app_v2.js (перенос их `panel-1003.js`). */
#screen-cow .gk-panel.cw-amount-keyboard {
    position: relative;
    z-index: 8;
    transform: translateY(var(--cw-keyboard-y, 0px));
}

/* ── Коровка: ставка подарком (их `gift-round.js`) ────────────────────────────
   Переключатель «Балансом | Подарком» и лента подарков из инвентаря: подарок
   становится ставкой, звёзды не тратятся. Лента — своя, у нас нет их блока. */
#screen-cow .cow-giftbox { display: flex; flex-direction: column; gap: 8px; }
#screen-cow .cow-giftlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
}
#screen-cow .cow-giftlist__empty { margin: 0; padding: 10px 2px; font-size: 12px; color: var(--ui-text-dim, #b6bcd2); }
#screen-cow .cow-giftcard {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; min-width: 0;
    border-radius: 14px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); color: #fff; cursor: pointer;
}
#screen-cow .cow-giftcard img,
#screen-cow .cow-giftcard__noimg {
    width: 44px; height: 44px; object-fit: contain; border-radius: 10px;
    background: rgba(255,255,255,.06);
}
#screen-cow .cow-giftcard b {
    font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#screen-cow .cow-giftcard span { font-size: 12px; font-weight: 800; color: #ffd977; }
#screen-cow .cow-giftcard.is-on { border-color: #ff00cc; box-shadow: 0 0 0 1px #ff00cc inset; }

/* ── Коровка: телефонная шапка панели (их `cowPhonePanel`) ────────────────────
   На телефоне вместо вкладок «Ручная | Авто» — одна строка: сегмент
   «Балансом | Подарком» и переключатель «Авто». */
#screen-cow .cw-head { display: flex; align-items: center; gap: 8px; }
#screen-cow .cw-head .gk-seg { flex: 1 1 auto; min-width: 0; }
#screen-cow .cw-auto {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    height: 38px; padding: 0 10px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04);
    color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
#screen-cow .cw-auto__track {
    position: relative; width: 26px; height: 15px; border-radius: 999px;
    background: rgba(255,255,255,.18); transition: background .16s ease;
}
#screen-cow .cw-auto__track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%; background: #fff;
    transition: transform .16s ease;
}
#screen-cow .cw-auto[aria-checked="true"] { border-color: #ff00cc; }
#screen-cow .cw-auto[aria-checked="true"] .cw-auto__track { background: #ff00cc; }
#screen-cow .cw-auto[aria-checked="true"] .cw-auto__track::after { transform: translateX(11px); }

/* ── Коровка на телефоне: поле не должно сжиматься в полоску ──────────────────
   Панель у нас высокая (шапка + сумма + сложность), и от поля оставалось 187 px
   при экране 896 — «игра как будто не вылазит». Держим минимум под поле, а
   настройки при нехватке прокручиваются внутри панели (кнопка внизу остаётся). */
@media (max-width: 639.98px) {
    #screen-cow .gk-stage { min-height: 46vh; }
    #screen-cow .gk-panel__body { overflow-y: auto; overscroll-behavior: contain; }
    /* значок валюты в подписи главной кнопки — их шрифтом, иначе пустой квадрат */
    #screen-cow .gk-cta__sub { font-family: RubupCurrency, Unbounded, Onest, sans-serif; }
}

/* ── Рейс (Самолётик): их страница в кадре ────────────────────────────────────
   Их движок сам решает раскладку (телефон / ПК по `rs-wide`), поэтому кадру
   отдаём всю площадь экрана — как у блэкджека и плинко. */
#screen-reys.page { padding: 0; overflow: hidden; }
/* Высота кадра — ровно между нашей шапкой (64) и нижним меню (69): их движок
   считает свою раскладку от размера кадра (100dvh внутри кадра), иначе низ
   («СТАВКА» и колесо) уезжал под меню. */
#screen-reys .reys-frame {
    display: block; width: 100%;
    height: calc(100dvh - 133px);
    border: 0; background: #07182f; border-radius: 18px;
}

/* ── ПК: игры на весь экран ──────────────────────────────────────────────────
   Их игры (и наши кадры) рассчитаны на ширину: у Рейса — `rs-wide` от 900 px,
   у плинко/блэкджека — свои ПК-раскладки. На телефоне всё как было, на ПК
   отдаём игре весь экран, а не узкую колонку мини-аппа. */
@media (min-width: 1024px) {
    #screen-plinko.page,
    #screen-blackjack.page,
    #screen-reys.page {
        position: fixed;
        top: 64px; left: 0; right: 0; bottom: 69px;
        width: auto; max-width: none;
        height: auto;              /* иначе общий `.page{height:100%}` растягивает кадр под меню */
        margin: 0; padding: 0;
        transform: none;
        z-index: 5;
    }
    #screen-plinko .pl-frame,
    #screen-blackjack .bj-frame,
    #screen-reys .reys-frame {
        width: 100%;
        height: 100%;
        border-radius: 14px;
        margin: 0 auto;
    }
}
@media (max-width: 639.98px) {
    #screen-reys .reys-frame { border-radius: 0; }
}
/* обложка карточки в лобби — постер их же игры */
.game-cover.cv-reys {
    background-image: url("games/reys/assets/cross-promo/aviamasters_poster_5tabLQX8.png");
    background-size: cover;
    background-position: center;
}

/* ── Коровка на ПК: дорога слева, панель справа ──────────────────────────────
   Их каркас `gk-shell--side` мы уже включаем на широком экране, но наши же
   правила (`gk-stage` и `gk-panel` на всю ширину) сжимали панель в полоску
   22 px. Возвращаем их двухколоночную раскладку: поле тянется, панель — 380 px. */
@media (min-width: 1024px) {
    #screen-cow.page {
        position: fixed;
        top: 64px; left: 0; right: 0; bottom: 69px;
        width: auto; max-width: none; height: auto;
        margin: 0; padding: 0; transform: none;
        z-index: 5;
    }
    #screen-cow .gk-shell--side {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        height: 100% !important;
        max-height: none !important;
        padding: 10px 14px;
        box-sizing: border-box;
    }
    #screen-cow .gk-shell--side > .gk-stage {
        flex: 1 1 auto;
        min-width: 0; min-height: 0;
        height: auto !important;
        max-height: none !important;
    }
    #screen-cow .gk-shell--side > .gk-panel {
        flex: 0 0 380px;
        width: 380px; max-width: 380px;
        height: auto !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ── Арена: их страница в кадре (`games/arena/`) ──────────────────────────────
   Пока без нашего серверного движка кадр работает в их демо-режиме; раскладку
   рисует их `game.css`, высоту отдаём всю площадь между шапкой и меню. */
#screen-arena.page { padding: 0; overflow: hidden; }
#screen-arena .arena-frame {
    display: block; width: 100%;
    height: calc(100dvh - 133px);
    border: 0; background: #121929; border-radius: 18px;
}
@media (max-width: 639.98px) {
    #screen-arena .arena-frame { border-radius: 0; }
}
@media (min-width: 1024px) {
    #screen-arena.page {
        position: fixed;
        top: 64px; left: 0; right: 0; bottom: 69px;
        width: auto; max-width: none; height: auto;
        margin: 0; padding: 0; transform: none;
        z-index: 5;
    }
    #screen-arena .arena-frame { width: 100%; height: 100%; border-radius: 14px; }
}
/* обложка карточки в лобби */
.game-cover.cv-arena {
    background-image: radial-gradient(circle at 50% 45%, #1d3a63 0%, #0d1626 70%), none;
    background-color: #0d1626;
}