@import url('https://fonts.cdnfonts.com/css/bounded');

/* ═══ MEGA FIX: FORCE DARK - NO WHITE BACKGROUNDS ═══ */
/* ═══ INVENTORY DARK FORCE ═══ */
#inventory-section,
#inventory-section .inv-section-header,
#inventory-section .inv-content-wrap,
#inventory-section .inv-tab-panel,
#inventory-section .inv-tabs-row,
#inventory-section .inv-stats-row,
#inventory-section .inv-info-banner {
    background-color: #0d0d1a !important;
    color: #fff !important;
}
/* Весь body тёмный */
body, html {
    background: #000 !important;
    background-color: #000 !important;
}


html { background: #000 !important; }
body { background: #000 !important; background-color: #000 !important; }
.content-section, #game-section, #profile-section, #tasks-section, #inventory-section {
    background: #0d0d1a !important;
}
.content { background: #000 !important; }



/* ═══ FORCE DARK MODE — перебиваем светлую тему Telegram ═══ */
html {
    background: #000000 !important;
    background-color: #000000 !important;
    color-scheme: dark !important;
}

html, body {
    color-scheme: dark !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Telegram WebApp светлая тема — перебиваем все CSS переменные */
:root {
    --tg-theme-bg-color: #000000 !important;
    --tg-theme-secondary-bg-color: #0d0d1a !important;
    --tg-theme-text-color: #ffffff !important;
    --tg-theme-hint-color: #aaaaaa !important;
    --tg-theme-link-color: #a78bfa !important;
    --tg-theme-button-color: #7b5cff !important;
    --tg-theme-button-text-color: #ffffff !important;
}

/* Принудительно белый текст везде */
body, body * {
    color: inherit;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bounded', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

body {
    background: #000000 !important;
    background-color: #000000 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: white !important;
    overflow-x: hidden;
    position: relative;
}

/* Telegram WebApp вставляет свой background через inline style — перебиваем */
body[style*="background"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

.header {
    background: linear-gradient(180deg, #0f0f1e 0%, #0d0d1a 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(123,92,255,0.18);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 450;
    box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ===== НОВАЯ ШАПКА ===== */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    border: 2px solid rgba(138,43,226,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-username {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.header-level-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-level-badge {
    background: rgba(138,43,226,0.3);
    border: 1px solid rgba(138,43,226,0.5);
    color: #c084fc;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
}

.header-xp-dots {
    color: rgba(255,255,255,0.35);
    font-size: 0.6rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-coins-block {
    background: rgba(123,92,255,0.1);
    border: 1px solid rgba(123,92,255,0.28);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.header-coin-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 600;
}

.header-coin-emoji {
    font-size: 0.7rem;
}

.header-plus-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7b5cff, #a855f7);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(123,92,255,0.6), 0 0 0 1px rgba(168,85,247,0.3);
    flex-shrink: 0;
    transition: box-shadow 0.2s, transform 0.15s;
}
.header-plus-btn:active { transform: scale(0.92); }

/* ===== НОВЫЕ КАРТОЧКИ ИГР ===== */
.game-section-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    color: #fff !important;
    margin-bottom: 16px !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
}

.game-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 110px;
}

.game-card-new {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #13131f 0%, #1a1a2e 100%);
    border-bottom: 1px solid rgba(123,92,255,0.15);
    padding: 18px 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 90px;
}

.game-card-new:first-child { border-radius: 16px 16px 0 0; }
.game-card-new:last-child { border-radius: 0 0 16px 16px; border-bottom: none; }

.game-card-new-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.3s ease;
}

.game-card-new:active .game-card-new-bg {
    transform: scale(1.03);
}

.game-card-bg-rocket {
    background: linear-gradient(135deg, #0d0d2e 0%, #1a0a3e 40%, #2d1060 70%, #1a0a3e 100%);
}
.game-card-bg-mines {
    background: linear-gradient(135deg, #0d1a0d 0%, #0a2010 40%, #102b10 70%, #0a2010 100%);
}
.game-card-bg-roulette {
    background: linear-gradient(135deg, #1a0a0d 0%, #2d0a15 40%, #40101e 70%, #2d0a15 100%);
}
.game-card-bg-cases {
    background: linear-gradient(135deg, #0d1a2e 0%, #0a1540 40%, #102060 70%, #0a1540 100%);
}

/* Сетка паттерн как на скриншоте */
.game-card-new-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

.game-card-new-info {
    position: relative;
    z-index: 2;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.game-card-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #4ade80;
}

.online-diamond {
    font-size: 0.5rem;
    color: #4ade80;
}

.game-card-new-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(123,92,255,0.4);
    position: relative;
    z-index: 1;
}

.game-card-bonus-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #8a2be2, #6a0dad);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    box-shadow: 0 2px 10px rgba(138,43,226,0.5);
}

.game-card-image-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Градиент-маска чтобы картинка плавно уходила влево */
.game-card-image-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, var(--card-bg, #0d0d2e), transparent);
    z-index: 3;
}

.game-card-bg-rocket + .game-card-new-info + .game-card-image-wrap,
.game-card-img-rocket { --card-bg: #1a0a3e; }
.game-card-img-mines { --card-bg: #0a2010; }
.game-card-img-roulette { --card-bg: #2d0a15; }
.game-card-img-cases { --card-bg: #0a1540; }

/* ===== PIXEL ART ИКОНКИ ИГРОВЫХ КАРТОЧЕК ===== */
.game-card-pixel-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 4;
    width: 100px;
    height: 100px;
}
.game-card-img-rocket .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(255,120,40,0.8)) drop-shadow(0 0 28px rgba(255,80,0,0.4));
}
.game-card-img-mines .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(60,210,60,0.75)) drop-shadow(0 0 28px rgba(30,160,30,0.35));
}
.game-card-img-cases .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(255,200,40,0.75)) drop-shadow(0 0 28px rgba(200,140,0,0.35));
}
.game-card-img-roulette .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(255,70,70,0.75)) drop-shadow(0 0 28px rgba(200,30,30,0.35));
}

/* ===== PIXEL ART ИКОНКИ КЕЙСОВ ===== */
.case-pixel-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
}
.case-card-free .case-pixel-icon   { filter: drop-shadow(0 0 10px rgba(74,222,128,0.7)); }
.case-card-silver .case-pixel-icon { filter: drop-shadow(0 0 10px rgba(148,163,184,0.7)); }
.case-card-gold .case-pixel-icon   { filter: drop-shadow(0 0 10px rgba(252,211,77,0.8)); }
.case-card-peace .case-pixel-icon  { filter: drop-shadow(0 0 10px rgba(139,92,246,0.8)); }
.case-card-epic .case-pixel-icon   { filter: drop-shadow(0 0 10px rgba(239,68,68,0.8)); }

/* ===== КОНЕЦ НОВЫХ СТИЛЕЙ ===== */

.header::before { content: none; }

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== МОДАЛ ПОПОЛНЕНИЯ ЗВЁЗДАМИ ===== */
#topup-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.82);
    align-items: flex-end;
    justify-content: center;
}

.topup-sheet {
    background: #13131f;
    border-radius: 22px 22px 0 0;
    padding: 24px 20px 24px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.topup-drag-handle {
    width: 42px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 0 auto 20px;
}

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

.topup-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

.topup-close-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #aaa;
    font-size: 1.3rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topup-subtitle {
    color: #aaa;
    font-size: 0.8rem;
    margin-bottom: 18px;
}

.topup-promo-badge {
    display: none;
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
    color: #fcd34d;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

#star-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.star-pkg-card {
    background: linear-gradient(145deg, #13131f, #1a1a2e);
    border: 1.5px solid rgba(123,92,255,0.28);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s, transform 0.15s;
    position: relative;
}
.star-pkg-card:active { transform: scale(0.95); }

.star-pkg-card:hover {
    border-color: #7b5cff;
    background: rgba(123,92,255,0.1);
}

.star-pkg-card:active {
    transform: scale(0.97);
}

.star-pkg-bonus-tag {
    position: absolute;
    top: -8px;
    right: -4px;
    background: #f59e0b;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 20px;
}

.star-pkg-emoji {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.star-pkg-count {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}

.star-pkg-label {
    color: #aaa;
    font-size: 0.7rem;
    margin: 2px 0;
}

.star-pkg-coins {
    color: #fcd34d;
    font-weight: 900;
    font-size: 0.95rem;
}

.star-pkg-coins-old {
    color: #aaa;
    text-decoration: line-through;
    font-size: 0.7rem;
}

/* Промокод блок */
.topup-promo-block {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 8px;
}

.topup-promo-label {
    color: #aaa;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.topup-promo-row {
    display: flex;
    gap: 8px;
}

.topup-promo-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: inherit;
}

.topup-promo-input:focus {
    border-color: rgba(123,92,255,0.5);
}

.topup-promo-apply-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #7b5cff, #a855f7);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.topup-promo-apply-btn:hover {
    opacity: 0.9;
}

#promo-status {
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    min-height: 16px;
}

.topup-footer-note {
    color: rgba(255,255,255,0.25);
    font-size: 0.7rem;
    text-align: center;
    margin-top: 12px;
}

.header h1 {
    font-size: 2.8rem;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, 
        #ff6b6b, #ffa726, #ffee58, #4cd964, #5ac8fa, #007aff, #5856d6, #ff2d55);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGlow 3s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from { filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.7)); }
    to { filter: drop-shadow(0 0 20px rgba(90, 200, 250, 0.7)); }
}

.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-balance {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #8a2be2;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    font-weight: bold;
}

.coin-symbol {
    font-weight: bold;
    padding: 0 2px;
    border-radius: 3px;
    font-size: 0.8em;
    vertical-align: super;
}

.coin-symbol.gold {
    background: linear-gradient(180deg, #ffd700, #ffaa00);
    color: #8b5a2b;
    padding: 1px 4px;
}

.coin-symbol.silver {
    background: linear-gradient(180deg, #c0c0c0, #a0a0a0);
    color: #333;
    padding: 1px 4px;
}

#header-gold-flip, #header-silver-flip {
    color: #ffd700;
}

.content {
    flex: 1;
    padding: 20px;
    padding-bottom: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 10;
}

.welcome-text {
    background: #0d0d1a;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    max-width: 500px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.2);
    position: relative;
    overflow: hidden;
}

.welcome-text::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #8a2be2, #4b0082, #00008b, #9400d3, #ff4500);
    z-index: -1;
    border-radius: 22px;
}

.welcome-text h2 {
    margin-bottom: 15px;
    font-size: 1.8rem;
    background: linear-gradient(90deg, #8a2be2, #ff4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-text p {
    line-height: 1.6;
    color: #ccc;
}

.bonus-info {
    background: rgba(138, 43, 226, 0.1);
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.bonus-info i {
    color: #ffa726;
}

.navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4gHbSUNDX1BST0ZJTEUAAQEAAAHLAAAAAAJAAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLVF0BQ8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlyWFlaAAAA8AAAABRnWFlaAAABBAAAABRiWFlaAAABGAAAABR3dHB0AAABLAAAABRjcHJ0AAABQAAAAAxyVFJDAAABTAAAACBnVFJDAAABTAAAACBiVFJDAAABTAAAACBkZXNjAAABbAAAAF9YWVogAAAAAAAAb58AADj0AAADkVhZWiAAAAAAAABilgAAt4cAABjcWFlaIAAAAAAAACShAAAPhQAAttNYWVogAAAAAAAA808AAQAAAAEWwnRleHQAAAAATi9BAHBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbZGVzYwAAAAAAAAAFc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2wBDAAQDAwQDAwQEAwQFBAQFBgoHBgYGBg0JCggKDw0QEA8NDw4RExgUERIXEg4PFRwVFxkZGxsbEBQdHx0aHxgaGxr/2wBDAQQFBQYFBgwHBwwaEQ8RGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhr/wgARCAIAAgADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEH/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAEFBv/aAAwDAQACEAMQAAAByMb/AEgAAAAAAAAAAIAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQVCVBUFQVBUFQVBUFQVBUFQVAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQlQVBUFQVBUFQVBUFQAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAFgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFVBUFQVBUFQVBUFQVCVBUFQVBUFQVBUFQVBUFQVBYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAEFQVBUFQVBUVUFQVCVBUAAAAAAAAAAAAIAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAgAAKACAAAAAAAAAAAAAAAAAAAAAAAAACVUFQVBUFQVBUFQVBUJUFQVBUFQVBUFQVBUAAAAAAAUAAAAAAAAAAAAAAAAAAACAAAAABQAAAAAAAAAAAAAAAAAAAAhUFQVBUFQVBUFQVBUAIAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAgAAAAAAAAAAAAAIAAAAAAAAAAAFAAAAEFQVBUFSghUFQVAAKRYAALBUFQAAAgVUFQWAAAAsFgAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAUAAAAAAAAAAAAAAAAAIVBUFQVBUFQVBUFQlQVBUFQBQAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAFAAAAAAAAAgAKAAAAAAAACAAAAAAAEFQVBUFQVBUFQVBYAUAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQIAAAAAAAAAAAAAAAAAAAAAAAAAFAAEFQVBUFQVBUFQVBUJUFQAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQlQVBUFQVBUFQVBUVUFQVBUFQWAAAAAAAAAAAAAAAAACAAAAAAAABQAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAFAAAAAACFQVBUFQVBUFQVBUFQVBSH//EABQQAQAAAAAAAAAAAAAAAAAAAMD/2gAIAQEAAQUCAAf/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQE/AQAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAoP/aAAgBAgEBPwEAH//EABQQAQAAAAAAAAAAAAAAAAAAAMD/2gAIAQEABj8CAAf/xAAaEAEBAQADAQAAAAAAAAAAAAARAIAwQFBw/9oACAEBAAE/IdMszM5iekzMzpdmZnGbMzOa2ZmfKfszMzOD2ZmeZmZnKLMzPjsz9mZmZ52ZmcsszM+MzM4KZmZyIzMz2v/aAAwDAQACAAMAAAAQyyyyyyiCCCCDDDDDDDDDDDDDDDBBBBBBAAAAAAAAAAAAAAAAABBDDDDDDDDDDDDDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOPPLDDDDDDDDDDDxxxxxxxxxwwgAAAAAAAAAAAAAAAAAAAACCCCCCCCCDDDDDDDDBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBDDDDDzzzzzzzzzyyiCCCCCCAAAAAAAAAAACCCCCCDDDDDDDDDDDDDDDDDDBBBBBBBBBBBBBBBBBBDDDCCCCCCCCCCCMMMMMMMMMMNNNBBBBBBBBBBBRxxxxxxxAAAAAACCCCCCCCCCCCCCCDDDDDDDDBBBCCCCCCCCCCCCCCCCCCCCOOOOOOMMMNNJyyyyyyyyiCCDDDDDDDDDDDDBBBBBBBBBAAAAAAAAAAAABBBAABBBBBBBBBBBBBBBCCCCCCCCCCCEMMMMMMMMMNNBBBBBBDDDCCCCCCAAAAAAAAAAAAAAAAAACCDDDDDDBBBBAAAAAAAAAAAAAAAAAEMMMMMMMMMMzzzzzzzyyyCCCCCCCCCCCCCCCAAAAAAABBACCCCCCCCCCCDDDDDDDDDDDDBBBBBNOOOKGOOO+62++uOO++/9JBRxxxhRxxxxAAAAAAAAAAAAACCCCCCCCDDDDDDDDDDDAAAAAAAAAAAAAAAAAAEMMMMOOOOPPPDDxxxxwgAAAAAAAAAACCCCCCCCCCCDDDDDBBBBAAAAABBAAAAAAAAABBBBBBBBPPPPCCCCCSwwwwwwwwwxhBBBBBBBBBBBBBBBCCCCCCCCCCCCCCCCCCCCCCABBBBBBBBBCCCCCCCCCCCCCCCCCAAAMMMMMMMMMNNJzzzzzziCCCCCCCCCCCCCCCCCCAAAAAAABBBBBBBBBBBBBBAAAAAAAAAAAAAAAAAAPPPPDDDDDBBBBBBRxxwwwwwwwwwAAAAADDDDDDDDDAAAAAAAAAAAAAAAAAAAAAAADDDDDDDDDDDDBBBBBBBFNMMMMMMMMMME/8QAGhEBAQEBAQEBAAAAAAAAAAAAEQBAMCAQUP/aAAgBAwEBPxBmZmZmZmZmZmZmZmZmZmZn2zMzMzMzMzMzMzMzMz+CzMzMzMzMzMzMzMzOZmZmZmZmZmZmZn8BmZmZmZmZmZmZnAzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz0ZmZmZmZmZmZmZmZmZmZmZ5szMzMzMzMzMzMzONmZmZmZmZmZmZmZmZmZmZmZmZ+MzMzM+2ZmZ8MzMzMzMzMzM82ZmZmZmZmZmZmZnAzMzMzMzMzMzMzOBmZmZmZmZmZmZnGzMzMzMzMzMzMzMzMzMzMzMzMzPBmZmZmZmZmZmZmZmZ5szMzMzMzMzMzMzOFmZmZmZmZmZmZnqzPxmZmZmZmZmZ4MzMzMzMzMzMzMz5ZmZmZmZmZmZmZmZmZmerMzMzMzMzMzMzONmZmZmZmZmZmZnKzMzMzMzMzMzMzjZmZmZmZmZmZn6zMzMzMzMzMzMzOhmZmZmZmZmZmZmen/xAAZEQEBAQEBAQAAAAAAAAAAAAARAEAwUCD/2gAIAQIBAT8QIiIiIiIiIiIiIiIiIiIiIyEREREREREREREaiIiIiIiIiIiIiIiIiMxEREREREREREREeGRERERERERERERERERxIiIiIiIiIiIiIiIjGRERERERERERER4JEREREREREREREREREREREREREREREREREREREREREREREREREREREREREREeCREREREREREREREcCIiIiIiIiIiIiOBERERERERERERGUiIiIiIiIiIiIiIiIiIiIj4IiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIwERERERERERERGgiIiIiIiIiIiIj6IiIiIiIiIiIiI0kREREREREREREYSIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiI+SIiIiIiIiIiIiIiIiIiIiPBIiIiIiIiIiIiI6kREREREREREREdSIiIiIiIiIiIiIiOX/8QAHhABAQABBAMBAAAAAAAAAAAAEQAhEGBwgCAwgUD/2gAIAQEAAT8QZmZmZmZmeyQGZmZmZmZmZmZmZmfYzMzM9UAGZmZmZmZmZmZmZmewoGZmZmZmZmZmZmZmZmZmZmZmZmZmeh4GZmZmZmZmZmZmZmdGZmZmZmZmZmdvPNIGZmZmZmZmZmZmZmefgGZmZmZmZmZmZmZmZmZmZmZmZmZmdvPBoGfwgZmZmZmZ8s2bNmzZvt98iIiIiNSIiZmZiIiIjUiIsWJmZ1ZmZmZmZmZmZmZ59AzMzMzMzMzMzMzMz4szMzMzM7dDwiBmZmZn2AZmZmZmZmZmZmZmZ6jgZmZmZmZmZmZmZmZ0ZmZmZmZmd8g8NAZmZmZmZmZmZmZmZ9bMzMzPSADMzMzMzMzMzMzZs2bOmb//2Q==');
    background-size: cover;
    background-position: center;
    padding: 12px 20px;
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 480px;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.5), 0 2px 8px rgba(0,0,0,0.5);
    z-index: 50;
    border: 1.5px solid rgba(255,255,255,0.15);
    transition: bottom 0.3s ease;
}

.nav-button {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 0.6rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 6px;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    position: relative;
}
.nav-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #7b5cff, #a855f7);
    border-radius: 2px 2px 0 0;
    transition: transform 0.25s;
}
.nav-button.active-btn { color: #c4b5fd !important; }
.nav-button.active-btn::after { transform: translateX(-50%) scaleX(1); }

.nav-button::before {
    content: none;
}

.nav-button::after {
    content: none;
}

.nav-button:hover::after {
    background: rgba(20, 20, 20, 0.9);
}

.nav-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}

.nav-button:active {
    transform: translateY(-2px) scale(1.02);
}

.nav-button i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #8a2be2, #ff4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav-button span {
    font-weight: 600;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

.content-section {
    display: none;
    width: 100%;
    max-width: 800px;
    background: #0d0d1a;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(123,92,255,0.12);
    box-shadow: 0 0 40px rgba(123,92,255,0.18), 0 0 0 1px rgba(123,92,255,0.06);
    position: relative;
    z-index: 10;
}

.active-section {
    display: block;
    animation: fadeIn 0.5s ease;
}

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

.section-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #8a2be2, #ff4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}

/* Вкладки игр */
.game-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.game-tab {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(138, 43, 226, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.game-tab:hover {
    background: rgba(138, 43, 226, 0.2);
}

.game-tab.active {
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border-color: #8a2be2;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}

.game-container {
    position: relative;
    z-index: 10;
    display: none;
}

.game-container.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

/* Игра "Ракетка" */
.rocket-game-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rocket-bet-section {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #8a2be2;
}

.rocket-game-area {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.rocket-canvas-container {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

#rocket-canvas {
    background: transparent;
}

.rocket-info {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 20px;
}

.current-coefficient, .potential-win {
    text-align: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-width: 180px;
}

.current-coefficient h2, .potential-win h2 {
    color: #4cd964;
    margin-top: 5px;
}

.rocket-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

#rocket-cashout-btn {
    background: linear-gradient(45deg, #4cd964, #2e7d32);
}

#rocket-cashout-btn:hover {
    box-shadow: 0 5px 15px rgba(76, 217, 100, 0.4);
}

.round-status {
    margin-top: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    text-align: center;
    color: #4cd964;
}

/* Анимации для ракеты */
@keyframes rocketLaunch {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

@keyframes flameBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#rocket-flame {
    animation: flameBlink 0.1s ease infinite;
}

/* Основные стили игры "Мины" */
.game-settings {
    margin-bottom: 30px;
}

.balance-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 30, 30, 0.9);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #4cd964;
}

.balance-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.balance-info i {
    font-size: 2rem;
    color: #ffd700;
}

.balance-info h3 {
    color: #4cd964;
    font-size: 1.5rem;
}

.bonus-btn {
    background: linear-gradient(45deg, #ff6b6b, #ffa726);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.bonus-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

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

.setting-group {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #8a2be2;
}

.setting-group h3 {
    color: #8a2be2;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.buttons-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.size-btn, .mine-btn, .bet-btn, .preset-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(138, 43, 226, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 80px;
}

.size-btn:hover, .mine-btn:hover, .bet-btn:hover, .preset-btn:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: #8a2be2;
}

.size-btn.active, .mine-btn.active {
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border-color: #8a2be2;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}

.coefficient-info {
    color: #4cd964;
    font-weight: bold;
    margin-top: 10px;
}

.bet-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: center;
}

.bet-display {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 30px;
    border-radius: 10px;
    border: 2px solid #8a2be2;
    min-width: 150px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #4cd964;
}

.bet-presets {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.preset-btn {
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid rgba(138, 43, 226, 0.3);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preset-btn:hover {
    background: rgba(138, 43, 226, 0.3);
    border-color: #8a2be2;
}

.game-info {
    background: rgba(138, 43, 226, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.game-info p {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.play-btn {
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border: none;
    color: white;
    padding: 15px 40px;
    border-radius: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 20px auto;
    width: 200px;
}

.play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(138, 43, 226, 0.4);
}

.balance-warning {
    color: #ff6b6b;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-board {
    margin: 20px 0;
}

.game-header {
    background: rgba(30, 30, 30, 0.9);
    padding: 15px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #8a2be2;
}

.game-stats {
    display: flex;
    gap: 20px;
    color: #4cd964;
    font-weight: bold;
}

.cashout-btn {
    background: linear-gradient(45deg, #4cd964, #2e7d32);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cashout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 217, 100, 0.4);
}

.mines-grid {
    display: grid;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 15px 15px;
    justify-content: center;
}

.cell {
    width: 60px;
    height: 60px;
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cell:hover {
    background: rgba(138, 43, 226, 0.2);
    transform: scale(1.05);
}

.cell.revealed {
    background: rgba(76, 217, 100, 0.2);
    border-color: #4cd964;
}

.cell.mine {
    background: linear-gradient(45deg, #ff6b6b, #c62828);
    border-color: #ff6b6b;
    animation: mineReveal 0.5s ease;
}

@keyframes mineReveal {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cell .fa-gem {
    color: #4cd964;
    animation: gemGlow 1s infinite alternate;
}

@keyframes gemGlow {
    from { filter: drop-shadow(0 0 5px #4cd964); }
    to { filter: drop-shadow(0 0 15px #4cd964); }
}

.cell .fa-bomb {
    color: white;
    animation: bombShake 0.5s;
}

@keyframes bombShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.game-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.control-btn {
    background: rgba(138, 43, 226, 0.2);
    border: 2px solid rgba(138, 43, 226, 0.5);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: rgba(138, 43, 226, 0.4);
}

.game-history {
    margin-top: 30px;
}

.history-list {
    max-height: 200px;
    overflow-y: auto;
}

.history-item {
    background: rgba(30, 30, 30, 0.9);
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 4px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item.win {
    border-left-color: #4cd964;
}

.history-item.lose {
    border-left-color: #ff6b6b;
}

.profile-info, .task-item, .case-item {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #8a2be2;
}

.profile-info h3, .task-item h3, .case-item p {
    color: #8a2be2;
    margin-bottom: 10px;
    text-align: center;
}

.profile-info p, .task-item p, .case-item p {
    color: #bbb;
    line-height: 1.5;
    margin: 5px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.stat-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.stat-label {
    color: #bbb;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.stat-value {
    color: #4cd964;
    font-size: 1.2rem;
    font-weight: bold;
}

.inventory-section {
    margin-top: 30px;
    padding: 20px;
    background: #0d0d1a;
    border-radius: 15px;
    border-left: 4px solid #8a2be2;
}

.inventory-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inv-tab {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(138, 43, 226, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.inv-tab:hover {
    background: rgba(138, 43, 226, 0.2);
}

.inv-tab.active {
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border-color: #8a2be2;
}

.inventory-container {
    min-height: 300px;
    position: relative;
}

.inventory-tab-content {
    display: none;
}

.inventory-tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.inventory-item {
    background: rgba(40, 40, 40, 0.9);
    border-radius: 10px;
    padding: 15px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.inventory-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.2);
}

.inventory-item.active {
    border-color: #8a2be2;
}

.inventory-item.ready {
    border-color: #4cd964;
}

.inventory-item.sold {
    border-color: #ffa726;
    opacity: 0.7;
}

.inventory-item.withdrawn {
    border-color: #5ac8fa;
    opacity: 0.7;
}

.inventory-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.inventory-item-icon {
    font-size: 2rem;
}

.inventory-item-name {
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
}

.inventory-item-value {
    color: #4cd964;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.inventory-item-status {
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 5px;
}

.status-active {
    background: rgba(138, 43, 226, 0.2);
    color: #8a2be2;
}

.status-ready {
    background: rgba(76, 217, 100, 0.2);
    color: #4cd964;
}

.status-sold {
    background: rgba(255, 167, 38, 0.2);
    color: #ffa726;
}

.status-withdrawn {
    background: rgba(90, 200, 250, 0.2);
    color: #5ac8fa;
}

.inventory-item-timer {
    font-size: 0.7rem;
    color: #bbb;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.timer-warning {
    color: #ff6b6b;
}

.no-items {
    text-align: center;
    padding: 50px 20px;
    color: #bbb;
}

.no-items i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.withdraw-info {
    background: rgba(138, 43, 226, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.withdraw-info h4 {
    color: #8a2be2;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.withdraw-info ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.withdraw-info li {
    color: #bbb;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.withdraw-info li:before {
    content: '•';
    color: #8a2be2;
    position: absolute;
    left: 0;
}

.tasks-container {
    margin: 20px 0;
}

.task-item {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #8a2be2;
    transition: all 0.3s ease;
}

.task-item.completed {
    border-left-color: #4cd964;
    background: rgba(30, 30, 30, 0.7);
}

.task-item.claimed {
    border-left-color: #ffa726;
    opacity: 0.7;
}

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

.task-header h3 {
    color: #8a2be2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-reward {
    background: linear-gradient(45deg, #4cd964, #2e7d32);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.task-progress {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}

.progress-bar {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8a2be2, #4cd964);
    border-radius: 5px;
    width: 0%;
    transition: width 0.5s ease;
}

.progress-text {
    color: #bbb;
    font-size: 0.9rem;
    min-width: 80px;
}

.task-btn {
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.task-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
}

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

.task-btn.claimed {
    background: linear-gradient(45deg, #4cd964, #2e7d32);
}

.tasks-summary {
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 15px;
    margin-top: 20px;
}

.summary-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.summary-item {
    text-align: center;
}

.summary-item p:first-child {
    color: #bbb;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.summary-item p:last-child {
    color: #4cd964;
    font-size: 1.2rem;
    font-weight: bold;
}

.cases-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.case-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    text-align: center;
}

.case-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.2);
}

.case-icon {
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(138, 43, 226, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 2rem;
}

.case-icon i {
    color: #8a2be2;
}

.star-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff6b6b;
    color: white;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.case-name {
    font-weight: 600;
    margin: 0;
}

.cases-info {
    color: #bbb;
    text-align: center;
    margin-bottom: 20px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.modal-content {
    background: rgba(30, 30, 30, 0.95);
    padding: 30px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    position: relative;
    border: 2px solid #8a2be2;
    box-shadow: 0 0 50px rgba(138, 43, 226, 0.5);
    margin: 50px auto;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #8a2be2;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    color: #8a2be2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gift-display {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: rgba(138, 43, 226, 0.1);
    border-radius: 15px;
}

.gift-icon-large {
    font-size: 5rem;
    margin-bottom: 15px;
    animation: giftPulse 2s infinite;
}

@keyframes giftPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.gift-value {
    color: #4cd964;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0;
}

.gift-tier {
    color: #bbb;
    font-size: 0.9rem;
}

.gift-choices {
    margin: 20px 0;
}

.choice-option {
    background: rgba(40, 40, 40, 0.9);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.choice-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.choice-option:nth-child(1):hover {
    border-color: #ffa726;
}

.choice-option:nth-child(2):hover {
    border-color: #8a2be2;
}

.choice-icon {
    font-size: 2rem;
    color: #8a2be2;
}

.choice-option:nth-child(1) .choice-icon {
    color: #ffa726;
}

.choice-info {
    flex: 1;
}

.choice-info h4 {
    color: white;
    margin-bottom: 5px;
}

.choice-info p {
    color: #bbb;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.choice-info small {
    color: #888;
    font-size: 0.8rem;
}

.choice-btn {
    background: transparent;
    border: 2px solid;
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sell-btn {
    border-color: #ffa726;
    color: #ffa726;
}

.sell-btn:hover {
    background: rgba(255, 167, 38, 0.2);
}

.keep-btn {
    border-color: #8a2be2;
    color: #8a2be2;
}

.keep-btn:hover {
    background: rgba(138, 43, 226, 0.2);
}

.gift-timer {
    text-align: center;
    padding: 15px;
    background: rgba(40, 40, 40, 0.9);
    border-radius: 10px;
    margin-top: 20px;
}

.gift-timer p {
    color: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gift-timer span {
    color: #4cd964;
    font-weight: bold;
}

.gift-manage-modal {
    max-width: 450px;
}

.gift-info {
    padding: 20px;
    background: rgba(40, 40, 40, 0.9);
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
}

.gift-info .gift-icon-large {
    font-size: 3rem;
    margin-bottom: 10px;
}

.gift-info h3 {
    color: white;
    margin-bottom: 10px;
}

.gift-details {
    color: #bbb;
    font-size: 0.9rem;
    margin: 8px 0;
}

.gift-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.action-btn {
    background: transparent;
    border: 2px solid;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.action-btn.sell {
    border-color: #ffa726;
    color: #ffa726;
}

.action-btn.sell:hover {
    background: rgba(255, 167, 38, 0.2);
}

.action-btn.withdraw {
    border-color: #4cd964;
    color: #4cd964;
}

.action-btn.withdraw:hover {
    background: rgba(76, 217, 100, 0.2);
}

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

.action-btn:disabled:hover {
    background: transparent;
}

.icon-tier1 { color: #ff6b6b; }
.icon-tier2 { color: #ffa726; }
.icon-tier3 { color: #4cd964; }
.icon-tier4 { color: #5ac8fa; }

.icon-bear { color: #8B4513; }
.icon-heart { color: #ff6b6b; }
.icon-rose { color: #ff1493; }
.icon-gift { color: #ffa726; }
.icon-cake { color: #ffb6c1; }
.icon-champagne { color: #ffd700; }
.icon-bouquet { color: #32cd32; }
.icon-rocket { color: #00bfff; }
.icon-cup { color: #c0c0c0; }
.icon-ring { color: #ffd700; }
.icon-diamond { color: #b9f2ff; }
.icon-crown { color: #ffd700; }

.hidden {
    display: none;
}

.coming-soon {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background: rgba(30, 30, 30, 0.9);
    border-radius: 15px;
    border-left: 4px solid #ffa726;
}

.coming-soon i {
    font-size: 3rem;
    color: #ffa726;
    margin-bottom: 10px;
}

.coming-soon p {
    color: #ffa726;
    font-weight: bold;
    margin: 0;
}

/* Модальное окно открытия кейса */
.case-open-modal {
    max-width: 400px;
}

.case-opening {
    text-align: center;
    padding: 20px;
}

.case-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.case-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #8a2be2, #4b0082);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    animation: caseSpin 2s linear infinite;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}

@keyframes caseSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.case-effect {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid #4cd964;
    border-radius: 20px;
    animation: casePulse 1s ease-in-out infinite;
}

@keyframes casePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

#case-opening-text {
    color: #4cd964;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0;
}

.case-result {
    text-align: center;
    padding: 20px;
}

.prize-display {
    margin-bottom: 20px;
}

.prize-icon {
    font-size: 5rem;
    margin: 0 auto 15px;
    display: block;
}

#prize-name {
    color: #4cd964;
    margin-bottom: 10px;
}

#prize-description {
    color: #bbb;
    font-size: 1.1rem;
}

.claim-prize-btn {
    background: linear-gradient(45deg, #4cd964, #2e7d32);
    border: none;
    color: white;
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 20px auto 0;
    width: 80%;
    max-width: 300px;
    font-weight: bold;
}

.claim-prize-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(76, 217, 100, 0.4);
}

/* Медиа-запросы */
@media (max-width: 768px) {
    .header h1 {
        font-size: 2rem;
    }
    
    .balance-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-button {
        padding: 12px 15px;
        min-width: 70px;
        font-size: 0.9rem;
    }
    
    .game-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .game-stats {
        flex-direction: column;
        gap: 5px;
    }
    
    .cell {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .balance-display {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .summary-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    
    .choice-option {
        flex-direction: column;
        text-align: center;
    }
    
    .choice-icon {
        margin-bottom: 10px;
    }
    
    .gift-actions {
        flex-direction: column;
    }
    
    .game-tab {
        min-width: 80px;
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .rocket-info {
        flex-direction: column;
        align-items: center;
    }
    
    .current-coefficient, .potential-win {
        min-width: 250px;
    }
    
    .rocket-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .cases-container {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
    
    .case-item {
        padding: 10px;
    }
    
    .case-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .star-count {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .bet-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .bet-presets {
        flex-wrap: wrap;
    }
    
    .cell {
        width: 40px;
        height: 40px;
    }
    
    .inventory-tabs {
        flex-direction: column;
    }
    
    .inventory-grid {
        grid-template-columns: 1fr;
    }
    
    .current-coefficient, .potential-win {
        min-width: 200px;
        width: 100%;
    }
    
    .game-tab {
        min-width: 70px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .rocket-game-area {
        padding: 15px;
    }
    
    .rocket-canvas-container {
        height: 250px;
    }
    
    .cases-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .case-item {
        padding: 15px 10px;
    }
    
    .case-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .star-count {
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
    }
}


/* Active nav button */
.nav-button.active-btn {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
}

/* Nav button icons as images */
.nav-button .nav-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    object-fit: contain;
    opacity: 0.55;
}

/* Active nav icon (filled version) */
.nav-button .nav-icon-active {
    display: none;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    object-fit: contain;
}

.nav-button.active-btn .nav-icon {
    display: none;
}
.nav-button.active-btn .nav-icon-active {
    display: block;
}

/* ===== GAME CARDS STYLE ===== */
.game-section-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.game-cards-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.game-card {
    position: relative;
    background: #1a1a2e;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.game-card-bg {
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.game-card-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #111 40%, transparent 100%);
    z-index: 1;
}

.game-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-card-online {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #ccc;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-card-online::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4cd964;
    border-radius: 50%;
    box-shadow: 0 0 6px #4cd964;
    flex-shrink: 0;
}

.game-card-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.game-card-mines { background: linear-gradient(135deg, #1a1040 0%, #2a1060 100%); }
.game-card-rocket { background: linear-gradient(135deg, #0d1a30 0%, #1a2a50 100%); }
.game-card-roulette { background: linear-gradient(135deg, #1a0d20 0%, #2a1040 100%); }

/* ===== GAME SCREEN HEADER ===== */
.game-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.back-to-list-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.back-to-list-btn:hover {
    background: rgba(255,255,255,0.1);
}

.game-screen-online {
    font-size: 0.8rem;
    color: #4cd964;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===== МОБИЛЬНЫЕ ФИКСЫ ===== */
/* Крупные тапабельные кнопки для телефонов */
@media (max-width: 600px) {
    .bet-btn, .preset-btn, .size-btn, .mine-btn {
        min-height: 44px;
        font-size: 1rem;
        padding: 10px;
    }

    .play-btn, .cashout-btn, .bonus-btn {
        min-height: 48px;
        font-size: 1rem;
    }

    .cell {
        min-height: 44px;
        min-width: 44px;
    }

    .bet-controls {
        gap: 8px;
    }

    .bet-display {
        font-size: 1.1rem;
        min-width: 80px;
        text-align: center;
    }

    .mc-slot {
        min-height: 80px;
    }

    .mc-slot-icon {
        font-size: 2.2rem;
    }

    .nav-button span {
        font-size: 0.72rem;
    }
}

/* ===== КРИТИЧЕСКИЕ ФИКСЫ КЛИКАБЕЛЬНОСТИ ===== */
.game-settings,
.game-board,
.rocket-game-content,
.game-container,
.content-section,
.setting-group,
.bet-controls,
.bet-presets,
.buttons-group,
.game-info,
.rocket-bet-section,
.rocket-game-area,
.rocket-controls,
.rocket-info {
    position: relative;
    z-index: 10;
}

.play-btn,
.cashout-btn,
.bet-btn,
.preset-btn,
.size-btn,
.mine-btn,
.bonus-btn,
.back-to-list-btn,
.rocket-play-btn,
.rocket-cashout-btn,
.cell,
.game-card,
.nav-button,
.control-btn,
.task-btn,
.case-item {
    position: relative;
    z-index: 15;
    -webkit-tap-highlight-color: rgba(138,43,226,0.2);
    touch-action: manipulation;
    cursor: pointer;
}

/* Убираем pointer-events с декоративных элементов */
.game-card-gradient,

/* ===== НОВЫЙ ДИЗАЙН МИНЫ ===== */
.mines-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
}
.mines-balance-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(123,92,255,0.18);
    border: 1.5px solid rgba(123,92,255,0.4);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #e0d8ff;
    box-shadow: 0 2px 14px rgba(123,92,255,0.2);
}
.mines-balance-icon { font-size: 1.1rem; }
.mines-coin-label { color: #7b5cff; font-weight: 800; }
.mines-bonus-btn {
    background: rgba(123,92,255,0.2);
    border: 1px solid rgba(123,92,255,0.4);
    border-radius: 50%;
    width: 38px; height: 38px;
    color: #a98fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.mines-bonus-btn:hover { background: rgba(123,92,255,0.35); }

/* Настройки */
.mines-settings-new {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mines-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mines-label {
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 52px;
}
.mines-toggle-group {
    display: flex;
    gap: 6px;
}
.mines-toggle {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 7px 14px;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.mines-toggle.active {
    background: #7b5cff;
    border-color: #7b5cff;
    color: #fff;
    box-shadow: 0 0 12px rgba(123,92,255,0.5);
}
.mines-mine-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px 16px;
}
.mines-mine-counter span {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    min-width: 24px;
    text-align: center;
}
.mines-counter-btn {
    background: none;
    border: none;
    color: #7b5cff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: opacity 0.15s;
}
.mines-counter-btn:hover { opacity: 0.7; }
.mines-bet-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mines-bet-input {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 7px 12px;
    width: 100px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.mines-bet-input::-webkit-inner-spin-button,
.mines-bet-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.mines-bet-input:focus { border-color: #7b5cff; }
.mines-max-btn {
    background: rgba(123,92,255,0.2);
    border: 1px solid rgba(123,92,255,0.4);
    border-radius: 10px;
    color: #a98fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.mines-max-btn:hover { background: rgba(123,92,255,0.35); }
.mines-info-row {
    display: flex;
    gap: 10px;
}
.mines-info-chip {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mines-info-label {
    font-size: 0.72rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mines-info-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e0d8ff;
}
.mines-info-value.green { color: #4ade80; }
.mines-play-btn {
    background: linear-gradient(135deg, #7b5cff 0%, #a855f7 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 16px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 24px rgba(123,92,255,0.45);
    transition: opacity 0.2s, box-shadow 0.2s;
    margin-top: 4px;
}
.mines-play-btn:hover { opacity: 0.9; box-shadow: 0 6px 30px rgba(123,92,255,0.6); }
.mines-play-btn:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }

/* Игровое поле */
.mines-board-new {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mines-board-new.hidden { display: none; }

.mines-live-stats {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mines-live-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ccc;
    display: flex;
    gap: 5px;
    align-items: center;
}
.mines-live-chip.green-chip {
    background: rgba(74,222,128,0.12);
    border-color: rgba(74,222,128,0.3);
    color: #4ade80;
}

.case-price {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 2px 0 0;
    text-align: center;
}
.case-price-free {
    color: #4ade80;
}
.case-price-special {
    color: #a78bfa;
    font-size: 0.65rem;
}
.case-item.case-selected {
    border-color: rgba(123,92,255,0.8) !important;
    background: rgba(123,92,255,0.18) !important;
    box-shadow: 0 0 16px rgba(123,92,255,0.4);
}
.mines-grid-new {
    display: grid;
    gap: 8px;
    width: 100%;
}
.mines-grid-new .cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    user-select: none;
}
.mines-grid-new .cell:hover:not(.revealed) {
    background: rgba(123,92,255,0.2);
    border-color: rgba(123,92,255,0.5);
    transform: scale(1.05);
}
.mines-grid-new .cell.safe {
    background: rgba(123,92,255,0.25);
    border-color: rgba(168,85,247,0.8);
    box-shadow: 0 0 16px rgba(123,92,255,0.5), inset 0 0 10px rgba(123,92,255,0.15);
}
.mines-grid-new .cell.mine {
    background: rgba(239,68,68,0.2);
    border-color: rgba(239,68,68,0.6);
    animation: mineShake 0.4s ease;
}
@keyframes mineShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px) rotate(-3deg); }
    40% { transform: translateX(4px) rotate(3deg); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.mines-cashout-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 16px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 20px rgba(34,197,94,0.35);
    transition: opacity 0.2s;
}
.mines-cashout-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}


/* ===== ОБНОВЛЁННЫЕ СТИЛИ НАВИГАЦИИ (5 кнопок) ===== */
.navigation {
    justify-content: space-around !important;
}

.nav-button {
    min-width: unset !important;
    padding: 8px 4px !important;
    flex: 1 !important;
}

.nav-button span {
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Активная кнопка навигации */
.nav-button.active-btn {
    background: rgba(138,43,226,0.25) !important;
    border-radius: 14px !important;
}

/* ===== СТИЛИ СЕКЦИИ ИГРЫ ===== */
#game-section.content-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 12px 0 !important;
}

/* Убираем welcome-блок когда не нужен */
.welcome-text {
    display: none !important;
}

/* Контент заполняет экран */
.content {
    padding: 64px 0 130px 0 !important;
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
}

/* ===== РАСШИРЕННОЕ ПОЛЕ СТАВКИ МИН ===== */
.mines-settings-new .mines-bet-input {
    width: 100% !important;
    font-size: 1.15rem !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
}

/* Убираем стрелки у числового инпута */
.mines-bet-input::-webkit-inner-spin-button,
.mines-bet-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.mines-bet-input { -moz-appearance: textfield; }

/* Coin icon selector hover */
#mines-currency-silver:hover, #mines-currency-gold:hover {
    filter: brightness(1.15);
}

/* ═══════════════════════════════════════════
   НОВЫЙ ПРОФИЛЬ — дизайн по скриншоту
═══════════════════════════════════════════ */

/* Секция без стандартных отступов */
.prf-section {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Верхняя строка ── */
.prf-toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 0;
    position: relative;
}

.prf-side-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #1a1a2e;
    border: 1px solid rgba(139,92,246,.25);
    color: #a78bfa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.prf-side-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #8b5cf6;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #000;
}

.prf-plus-btn {
    background: #0e4f6e;
    border-color: rgba(6,182,212,.3);
    color: #06b6d4;
    gap: 0;
}
.prf-plus-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3px;
    line-height: 1;
}

/* ── Аватар ── */
.prf-avatar-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
}

.prf-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #111;
    border: 2px solid rgba(139,92,246,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(139,92,246,.15), 0 8px 32px rgba(0,0,0,.6);
}

/* ── Имя + уровень ── */
.prf-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding: 0 16px;
}

.prf-username {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
}

.prf-lvl-badge {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── XP Bar ── */
.prf-xp-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 16px 0;
}

.prf-xp-edge {
    font-size: 11px;
    color: #555;
    font-weight: 600;
    flex-shrink: 0;
}

.prf-xp-track {
    flex: 1;
    height: 6px;
    background: #1e1e2e;
    border-radius: 3px;
    overflow: hidden;
}

.prf-xp-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6d28d9, #a78bfa);
}

/* ── Табы ── */
.prf-tabs {
    display: flex;
    gap: 6px;
    margin: 16px 0 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(123,92,255,0.15);
    border-radius: 14px;
    padding: 4px;
}

.prf-tab {
    flex: 1;
    padding: 9px 4px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #666;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.prf-tab.active {
    background: rgba(123,92,255,0.22);
    color: #c4b5fd;
    border: 1px solid rgba(123,92,255,0.4);
    box-shadow: 0 2px 10px rgba(123,92,255,0.2);
}

/* ── Панели ── */
.prf-panel {
    display: none;
    padding: 14px 16px 24px;
}

.prf-panel.active {
    display: block;
}

/* ── Карточка статистики ── */
.prf-stat-card {
    background: linear-gradient(135deg, #13131f, #1a1a2e);
    border: 1.5px solid rgba(123,92,255,0.2);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.prf-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(123,92,255,0.5), transparent);
}

.prf-stat-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
}

.prf-ico-purple  { background: rgba(109,40,217,.25); }
.prf-ico-violet  { background: rgba(124,58,237,.25); }
.prf-ico-indigo  { background: rgba(76,29,149,.3); }
.prf-ico-gray    { background: rgba(75,85,99,.25); }

.prf-stat-body {
    flex: 1;
    min-width: 0;
}

.prf-stat-val {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.prf-coin-s { font-size: 16px; }
.prf-coin-g { font-size: 16px; }

.prf-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .8px;
    margin-top: 2px;
    text-transform: uppercase;
}

/* ── Гексагоны (достижения/уровни) ── */
.prf-hexes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    margin-bottom: 4px;
}



/* ── Кнопка рефералов ── */
.prf-ref-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
}

/* ── История ── */
.prf-hist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prf-hist-empty {
    color: #4b5563;
    text-align: center;
    padding: 30px;
    font-size: 13px;
}

.prf-hist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111827;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    border-left: 3px solid transparent;
}
.prf-hist-item.win  { border-left-color: #22c55e; }
.prf-hist-item.lose { border-left-color: #ef4444; }
.prf-hist-win  { color: #22c55e; font-weight: 800; }
.prf-hist-lose { color: #ef4444; font-weight: 800; }


/* Своя сумма */
.star-pkg-custom {
    grid-column: span 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
}

.star-pkg-custom-input {
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(123,92,255,0.5);
    border-radius: 10px;
    padding: 8px 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    width: 120px;
    outline: none;
    text-align: center;
    font-family: inherit;
}

.star-pkg-custom-input:focus {
    border-color: #7b5cff;
}

.star-pkg-custom-input::-webkit-outer-spin-button,
.star-pkg-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ─── ВКЛАДКИ Stars / USDT ─────────────────────────────────────────────────── */
.topup-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.topup-tab {
    flex: 1;
    padding: 10px;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}

.topup-tab-active {
    border-color: #7b5cff;
    background: rgba(123,92,255,0.15);
    color: #fff;
}

/* ─── USDT экран оплаты ─────────────────────────────────────────────────────── */
.usdt-pay-screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.usdt-pay-title {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
}

.usdt-pay-coins {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fcd34d;
    margin-bottom: 4px;
}

.usdt-pay-amount-label,
.usdt-pay-wallet-label {
    color: #aaa;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 4px;
}

.usdt-pay-amount {
    background: rgba(34,197,94,0.12);
    border: 1.5px solid rgba(34,197,94,0.4);
    border-radius: 12px;
    padding: 12px 14px;
    color: #4ade80;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-align: center;
}

.usdt-pay-wallet {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    word-break: break-all;
    text-align: center;
}

.usdt-copy-hint {
    font-size: 0.85rem;
    opacity: 0.6;
}

.usdt-pay-warning {
    color: #fbbf24;
    font-size: 0.75rem;
    text-align: center;
    padding: 6px 10px;
    background: rgba(251,191,36,0.08);
    border-radius: 8px;
}

.usdt-pay-status {
    text-align: center;
    color: #aaa;
    font-size: 0.85rem;
    padding: 8px;
}

.usdt-pay-cancel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #aaa;
    padding: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
}


/* ═══════════════════════════════════════════════
   ИНВЕНТАРЬ — карточки в стиле профиля
═══════════════════════════════════════════════ */
.inv-tab-prf {
    flex: 1;
    padding: 9px 4px;
    border-radius: 12px;
    border: 1.5px solid rgba(123,92,255,0.15);
    background: rgba(123,92,255,0.05);
    color: #555;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.3px;
}
.inv-tab-prf.active {
    border-color: #7b5cff;
    background: rgba(123,92,255,0.18);
    color: #fff;
    box-shadow: 0 0 12px rgba(123,92,255,0.25);
}
.inv-grid-prf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-height: 80px;
}
.inv-card-prf {
    background: #0f0f1c;
    border: 1.5px solid rgba(123,92,255,0.18);
    border-radius: 16px;
    padding: 14px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.inv-card-prf:hover:not(.inv-card-sold) {
    border-color: rgba(123,92,255,0.55);
    background: rgba(123,92,255,0.08);
    box-shadow: 0 0 18px rgba(123,92,255,0.2);
}
.inv-card-sold  { opacity: 0.3; cursor: default; }
.inv-card-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
.inv-card-name  { font-size: 0.65rem; font-weight: 800; color: #c4b5fd; margin-bottom: 3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.inv-card-val   { font-size: 0.7rem; color: #a78bfa; font-weight: 900; }
.inv-card-sub   { font-size: 0.58rem; color: rgba(167,139,250,0.6); margin-top: 4px; }

/* ═══════════════════════════════════════════════
   ЗАДАНИЯ — карточки в стиле профиля
═══════════════════════════════════════════════ */
.task-card-prf {
    background: linear-gradient(135deg, #13131f, #1a1a2e);
    border: 1.5px solid rgba(123,92,255,0.2);
    border-radius: 18px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.task-card-prf::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7b5cff, #a855f7);
    opacity: 0.5;
}
.task-card-prf:hover {
    border-color: rgba(123,92,255,0.45);
    box-shadow: 0 4px 20px rgba(123,92,255,0.15);
}
.task-card-prf.task-done {
    border-color: rgba(34,197,94,0.35);
    background: linear-gradient(135deg, #0d1f12, #12261a);
    opacity: 0.75;
}
.task-card-prf.task-done::before {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    opacity: 0.6;
}
.task-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.task-card-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(123,92,255,0.18);
    border: 1px solid rgba(123,92,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.task-card-info { flex: 1; min-width: 0; }
.task-card-name { font-size: 0.88rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.task-card-desc { font-size: 0.69rem; color: #555; margin-bottom: 7px; }
.task-card-bar-row { display: flex; align-items: center; gap: 7px; }
.task-card-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.task-card-fill { height: 100%; background: linear-gradient(90deg,#7b5cff,#a855f7); border-radius: 2px; width: 0%; transition: width 0.4s; }
.task-card-prog { font-size: 0.64rem; color: #444; font-weight: 700; white-space: nowrap; }
.task-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; padding-left: 10px; }
.task-card-rew { font-size: 0.78rem; font-weight: 800; color: #fcd34d; white-space: nowrap; }
.task-card-btn {
    background: linear-gradient(135deg, #7b5cff, #a855f7);
    border: none;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 3px 12px rgba(123,92,255,0.4);
    white-space: nowrap;
}
.task-card-btn:active { transform: scale(0.94); }
.task-card-btn:disabled { background: rgba(255,255,255,0.06); color: #333; cursor: default; }

/* ══════════════════════════════════════════
   ИНВЕНТАРЬ — РЕДИЗАЙН В СТИЛЕ ПРОФИЛЯ
   ══════════════════════════════════════════ */
.inv-section-header {
    padding: 20px 14px 0;
    text-align: center;
}
.inv-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #7b5cff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.inv-section-sub {
    font-size: 0.78rem;
    color: #555;
    margin-bottom: 14px;
}
.inv-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.inv-stat-chip {
    background: rgba(123,92,255,0.1);
    border: 1px solid rgba(123,92,255,0.25);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    flex: 1;
}
.inv-stat-chip-val {
    font-size: 1.3rem;
    font-weight: 900;
    color: #c084fc;
    display: block;
}
.inv-stat-chip-lbl {
    font-size: 0.58rem;
    font-weight: 800;
    color: #6d6d8a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
.inv-tabs-row {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(123,92,255,0.15);
    border-radius: 14px;
    padding: 4px;
}
.inv-tab-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1.5px solid #2a2a3a;
    background: #13131f;
    color: #666;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}
.inv-tab-btn.active {
    border-color: #7b5cff;
    background: rgba(123,92,255,0.18);
    color: #c084fc;
}
.inv-content-wrap {
    padding: 0 12px 88px;
}
.inv-tab-panel {
    display: none;
}
.inv-tab-panel.active {
    display: block;
}
.inv-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #444;
}
.inv-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}
.inv-empty-text {
    font-size: 0.82rem;
    color: #555;
}
.inv-gift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.inv-gift-card {
    background: linear-gradient(145deg, #13131f, #1a1a2e);
    border: 1px solid rgba(123,92,255,0.2);
    border-radius: 16px;
    padding: 14px 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.inv-gift-card:hover {
    border-color: rgba(123,92,255,0.5);
    transform: translateY(-2px);
}
.inv-gift-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7b5cff, #a855f7);
    opacity: 0.6;
}
.inv-gift-card.tier-rare::before { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.inv-gift-card.tier-epic::before { background: linear-gradient(90deg, #a855f7, #ec4899); }
.inv-gift-card.tier-legendary::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.inv-gift-emoji {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 8px rgba(123,92,255,0.4));
}
.inv-gift-name {
    font-size: 0.72rem;
    font-weight: 800;
    color: #e0d0ff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.inv-gift-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(252,211,77,0.1);
    border: 1px solid rgba(252,211,77,0.2);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fcd34d;
}
.inv-gift-tier-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tier-common .inv-gift-tier-badge { background: rgba(123,92,255,0.25); color: #a78bfa; }
.tier-rare .inv-gift-tier-badge { background: rgba(59,130,246,0.25); color: #60a5fa; }
.tier-epic .inv-gift-tier-badge { background: rgba(168,85,247,0.25); color: #d946ef; }
.tier-legendary .inv-gift-tier-badge { background: rgba(245,158,11,0.25); color: #fcd34d; }

.inv-gift-card-sold {
    opacity: 0.5;
}
.inv-gift-card-sold::after {
    content: 'ПРОДАН';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-size: 1rem;
    font-weight: 900;
    color: #ef4444;
    border: 2px solid #ef4444;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 2px;
}
.inv-info-banner {
    margin-top: 16px;
    background: rgba(123,92,255,0.08);
    border: 1px solid rgba(123,92,255,0.2);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.72rem;
    color: #7b7baa;
    text-align: center;
}


/* ═══ PROFILE GIFTS TAB ═══ */
.prf-gifts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 4px 0 16px;
}
.prf-gift-mini {
    background: linear-gradient(145deg, #13131f, #1a1a2e);
    border: 1px solid rgba(123,92,255,0.2);
    border-radius: 14px;
    padding: 12px 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.prf-gift-mini::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7b5cff, #a855f7);
    opacity: 0.5;
}
.prf-gift-mini:hover {
    border-color: rgba(123,92,255,0.45);
    box-shadow: 0 4px 16px rgba(123,92,255,0.2);
}
.prf-gift-mini-emoji { font-size: 1.8rem; display: block; margin-bottom: 5px; }
.prf-gift-mini-val {
    font-size: 0.7rem;
    font-weight: 900;
    color: #fcd34d;
}
.prf-gift-mini-lbl {
    font-size: 0.55rem;
    color: #666;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.prf-gifts-empty {
    text-align: center;
    padding: 32px 20px;
    color: #555;
    font-size: 0.8rem;
}
.prf-gifts-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.prf-gifts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.prf-gifts-count-chip {
    background: rgba(123,92,255,0.15);
    border: 1px solid rgba(123,92,255,0.3);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #a78bfa;
}
.prf-gifts-see-all {
    background: none;
    border: 1px solid rgba(123,92,255,0.3);
    color: #7b5cff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}
.prf-gifts-see-all:hover { background: rgba(123,92,255,0.12); }

/* ═══ КЕЙСЫ редизайн ═══ */
#cases-game .section-title {
    font-size: 0.68rem; font-weight: 800; color: #7b5cff;
    letter-spacing: 2px; text-transform: uppercase; text-align: center;
    margin-bottom: 2px; padding: 0 14px;
}
#cases-game .cases-info {
    color: #555; font-size: 0.72rem; text-align: center; margin-bottom: 16px;
}
#cases-game .cases-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 14px 100px !important;
    margin: 0 !important;
}
#cases-game .case-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important;
    cursor: pointer !important; padding: 20px 12px 16px !important;
    text-align: center !important;
    background: linear-gradient(145deg, #13131f, #1a1a2e) !important;
    border: 1.5px solid rgba(123,92,255,0.22) !important;
    border-left: 1.5px solid rgba(123,92,255,0.22) !important;
    border-radius: 20px !important; position: relative !important;
    overflow: hidden !important; margin-bottom: 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
    box-shadow: none !important;
}
#cases-game .case-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(123,92,255,0.7), transparent);
}
#cases-game .case-item:hover {
    border-color: rgba(123,92,255,0.6) !important;
    box-shadow: 0 6px 28px rgba(123,92,255,0.25) !important;
    transform: translateY(-3px) !important;
}
#cases-game .case-item:active { transform: scale(0.96) !important; }
#cases-game .case-icon {
    position: relative !important; width: 72px !important; height: 72px !important;
    background: rgba(123,92,255,0.15) !important;
    border: 1.5px solid rgba(123,92,255,0.35) !important;
    border-radius: 18px !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    margin-bottom: 12px !important; font-size: 2.2rem !important;
    box-shadow: 0 4px 18px rgba(123,92,255,0.2) !important;
}
#cases-game .case-icon i { color: #a78bfa; filter: drop-shadow(0 0 8px rgba(123,92,255,0.6)); }
#cases-game .case-name {
    font-weight: 800 !important; font-size: 0.8rem !important;
    color: #e0d0ff !important; margin: 0 0 8px !important; line-height: 1.3;
}
#cases-game .case-price {
    font-size: 0.75rem !important; font-weight: 800 !important;
    color: #fcd34d !important; margin: 0 !important;
    background: rgba(252,211,77,0.1) !important;
    border: 1px solid rgba(252,211,77,0.25) !important;
    border-radius: 8px !important; padding: 3px 12px !important;
    display: inline-block !important;
}
#cases-game .case-price-free {
    color: #4ade80 !important; border-color: rgba(34,197,94,0.3) !important;
    background: rgba(34,197,94,0.1) !important;
}
#cases-game .case-price-special {
    color: #a78bfa !important; border-color: rgba(167,139,250,0.3) !important;
    background: rgba(123,92,255,0.1) !important;
    font-size: 0.62rem !important; padding: 3px 8px !important;
}
#cases-game .star-count {
    position: absolute; top: -7px; right: -7px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #000;
    font-size: 0.65rem; min-width: 22px; height: 22px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; padding: 0 5px; box-shadow: 0 2px 8px rgba(245,158,11,0.5);
}
#case-daily .case-icon { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.35) !important; }
#case-daily .case-icon i { color: #4ade80; filter: drop-shadow(0 0 8px rgba(34,197,94,0.5)); }
#case-daily::before { background: linear-gradient(90deg, transparent, rgba(34,197,94,0.6), transparent) !important; }
#case-strike .case-icon { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.35) !important; }
#case-strike .case-icon i { color: #fcd34d; filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); }
#case-strike::before { background: linear-gradient(90deg, transparent, rgba(245,158,11,0.6), transparent) !important; }
#case-peace .case-icon { background: rgba(96,165,250,0.15) !important; border-color: rgba(96,165,250,0.35) !important; }
#case-peace .case-icon i { color: #93c5fd; filter: drop-shadow(0 0 8px rgba(96,165,250,0.5)); }
#case-peace::before { background: linear-gradient(90deg, transparent, rgba(96,165,250,0.6), transparent) !important; }

/* ═══ GIFT IMAGES ═══ */
.inv-gift-emoji { display: flex; align-items: center; justify-content: center; min-height: 58px; margin-bottom: 8px; }
.inv-gift-emoji img { display: block; object-fit: contain; border-radius: 6px; }
.prf-gift-mini-emoji { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-bottom: 5px; }
.prf-gift-mini-emoji img { display: block; object-fit: contain; }
#new-gift-icon { display: flex; align-items: center; justify-content: center; min-height: 90px; margin-bottom: 8px; }
#new-gift-icon img { display: block; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(123,92,255,0.4)); }

/* ══════════════════════════════════════════
   КЕЙСЫ — РЕДИЗАЙН В СТИЛЕ МИН
   ══════════════════════════════════════════ */

.case-new-card {
    background: linear-gradient(145deg, #13131f, #1a1a2e);
    border: 1px solid rgba(123,92,255,0.2);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.case-new-card:hover {
    border-color: rgba(123,92,255,0.5);
    transform: translateY(-2px);
}
.case-new-top {
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}
.case-top-free    { background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(74,222,128,0.05)); border-bottom: 1px solid rgba(74,222,128,0.2); }
.case-top-silver  { background: linear-gradient(135deg, rgba(148,163,184,0.15), rgba(148,163,184,0.05)); border-bottom: 1px solid rgba(148,163,184,0.2); }
.case-top-gold    { background: linear-gradient(135deg, rgba(252,211,77,0.15), rgba(252,211,77,0.05)); border-bottom: 1px solid rgba(252,211,77,0.2); }
.case-top-purple  { background: linear-gradient(135deg, rgba(123,92,255,0.2), rgba(123,92,255,0.05)); border-bottom: 1px solid rgba(123,92,255,0.3); }
.case-top-epic    { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(245,158,11,0.1)); border-bottom: 1px solid rgba(239,68,68,0.25); }
.case-new-emoji {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 8px rgba(123,92,255,0.3));
}
.case-stars-num {
    font-size: 0.75rem;
    font-weight: 900;
    color: #fcd34d;
    letter-spacing: 0.5px;
}
.case-new-info {
    padding: 8px 10px 10px;
}
.case-new-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #e0d0ff;
    margin-bottom: 4px;
}
.case-new-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fcd34d;
}
.case-new-price.free { color: #4ade80; }
.case-new-price.special { color: #f87171; font-size: 0.68rem; }

/* Задания — делаем стат-чипы в стиле инвентаря */
.task-card-prf {
    background: linear-gradient(150deg, #191826 0%, #14131f 60%, #17141f 100%);
    border: 1px solid rgba(123,92,255,0.16);
    border-radius: 18px;
    padding: 15px 15px 15px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.task-card-prf::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #7b5cff, #a855f7);
    border-radius: 4px 0 0 4px;
}
.task-card-prf::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 0% 0%, rgba(123,92,255,0.10), transparent 55%);
    pointer-events: none;
}
.task-card-prf:active { transform: scale(0.99); }
.task-card-prf.done,
.task-card-prf.task-done {
    border-color: rgba(74,222,128,0.35);
    box-shadow: 0 6px 22px rgba(34,197,94,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
}
.task-card-prf.done::before,
.task-card-prf.task-done::before {
    background: linear-gradient(180deg, #4ade80, #22c55e);
}
.task-card-prf.done::after,
.task-card-prf.task-done::after {
    background: radial-gradient(120% 90% at 0% 0%, rgba(74,222,128,0.12), transparent 55%);
}

.task-card-ico {
    font-size: 1.7rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(123,92,255,0.22), rgba(168,85,247,0.10));
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
}
/* Разноцветные иконки по заданию */
#task-1 .task-card-ico { background: linear-gradient(145deg, rgba(252,211,77,0.26), rgba(245,158,11,0.10)); border-color: rgba(252,211,77,0.35); }
#task-2 .task-card-ico { background: linear-gradient(145deg, rgba(239,68,68,0.24), rgba(190,24,24,0.10));  border-color: rgba(239,68,68,0.35); }
#task-3 .task-card-ico { background: linear-gradient(145deg, rgba(96,165,250,0.24), rgba(37,99,235,0.10));  border-color: rgba(96,165,250,0.35); }
#task-4 .task-card-ico { background: linear-gradient(145deg, rgba(168,85,247,0.26), rgba(124,58,237,0.10)); border-color: rgba(168,85,247,0.38); }

.task-card-left {
    flex: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.task-card-info { flex: 1; min-width: 0; }
.task-card-name {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.task-card-desc {
    font-size: 0.7rem;
    color: #8a86a0;
    margin-bottom: 9px;
}
.task-card-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.task-card-bar {
    flex: 1;
    height: 7px;
    background: rgba(255,255,255,0.07);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.task-card-fill {
    height: 100%;
    background: linear-gradient(90deg, #7b5cff, #a855f7, #c084fc);
    background-size: 200% 100%;
    border-radius: 20px;
    transition: width 0.5s cubic-bezier(.2,1,.3,1);
    box-shadow: 0 0 10px rgba(168,85,247,0.6);
    animation: taskFillShine 2.4s linear infinite;
}
@keyframes taskFillShine { 0%{background-position:0% 0} 100%{background-position:200% 0} }
.task-card-prf.done .task-card-fill,
.task-card-prf.task-done .task-card-fill {
    background: linear-gradient(90deg, #4ade80, #22c55e);
    box-shadow: 0 0 10px rgba(34,197,94,0.6);
}
.task-card-prog {
    font-size: 0.66rem;
    color: #9a96b0;
    font-weight: 800;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.task-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.task-card-rew {
    font-size: 0.8rem;
    font-weight: 900;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(252,211,77,0.16), rgba(245,158,11,0.06));
    border: 1px solid rgba(252,211,77,0.3);
    border-radius: 10px;
    padding: 4px 10px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(252,211,77,0.12);
}
.task-card-rew-nft {
    color: #e9d5ff;
    background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(123,92,255,0.12));
    border: 1px solid rgba(168,85,247,0.5);
    box-shadow: 0 2px 12px rgba(168,85,247,0.28);
    animation: nftRewGlow 1.9s ease-in-out infinite;
}
@keyframes nftRewGlow { 0%,100%{box-shadow:0 2px 10px rgba(168,85,247,0.25)} 50%{box-shadow:0 2px 20px rgba(168,85,247,0.6)} }

/* Баннер-завлекалка сверху квестов */
.quest-hero {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 13px; margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(123,92,255,0.10) 55%, rgba(252,211,77,0.10));
    border: 1px solid rgba(168,85,247,0.35);
    box-shadow: 0 6px 22px rgba(123,92,255,0.22);
    position: relative; overflow: hidden;
}
.quest-hero::after {
    content:''; position:absolute; top:-60%; left:-30%; width:50%; height:220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: rotate(18deg); animation: questShine 3.2s ease-in-out infinite;
}
@keyframes questShine { 0%{left:-40%} 60%,100%{left:130%} }
.quest-hero-emoji { font-size: 1.9rem; filter: drop-shadow(0 2px 6px rgba(168,85,247,0.5)); animation: floatY 2.6s ease-in-out infinite; }
.quest-hero-txt { flex:1; text-align:left; }
.quest-hero-title { font-size: 0.9rem; font-weight: 900; color:#fff; }
.quest-hero-sub { font-size: 0.72rem; color:#c9b8ff; margin-top:1px; }
.quest-hero-badge {
    font-size: 0.82rem; font-weight: 900; color:#fff;
    background: linear-gradient(135deg,#a855f7,#7b5cff);
    border-radius: 999px; padding: 5px 12px;
    box-shadow: 0 3px 12px rgba(168,85,247,0.5);
}
.task-card-btn {
    padding: 8px 16px;
    border-radius: 11px;
    border: none;
    background: linear-gradient(135deg, #7b5cff, #a855f7);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(123,92,255,0.4);
    transition: transform .15s ease, opacity .2s, box-shadow .2s;
}
.task-card-btn:not(:disabled) { animation: taskBtnPulse 1.8s ease-in-out infinite; }
@keyframes taskBtnPulse { 0%,100%{box-shadow:0 4px 14px rgba(123,92,255,0.4)} 50%{box-shadow:0 4px 22px rgba(168,85,247,0.75)} }
.task-card-btn:not(:disabled):active { transform: scale(0.94); }
.task-card-btn:disabled {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #4a4a58;
    cursor: not-allowed;
    box-shadow: none;
    animation: none;
}

/* Инвентарь — стат-чипы в стиле профиля */
.inv-stat-chip {
    background: rgba(123,92,255,0.12);
    border: 1px solid rgba(123,92,255,0.25);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
}

/* ===== КЕЙСЫ — КРАСИВЫЕ КАРТОЧКИ ===== */
.cases-new-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 4px 8px;
}
.case-new-card {
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    border: 1.5px solid rgba(255,255,255,0.07);
    background: #13131f;
    font-family: 'Bounded', sans-serif;
}
.case-new-card:hover  { transform: translateY(-4px); }
.case-new-card:active { transform: scale(0.96); }

/* Верхняя часть карточки */
.case-new-top {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 2.4rem;
}
.case-new-emoji { z-index: 1; position: relative; filter: drop-shadow(0 0 12px currentColor); }
.case-stars-num {
    position: absolute; bottom: 6px; right: 8px;
    font-size: 0.75rem; font-weight: 900; color: #fbbf24;
    background: rgba(0,0,0,0.4); border-radius: 6px; padding: 1px 6px;
    font-family: 'Bounded', sans-serif;
}

/* Цвета верхней части */
.case-top-free   { background: linear-gradient(135deg, #052e16, #14532d); }
.case-top-silver { background: linear-gradient(135deg, #1e293b, #334155); }
.case-top-gold   { background: linear-gradient(135deg, #451a03, #78350f); }
.case-top-peace  { background: linear-gradient(135deg, #2e1065, #4c1d95, #6d28d9); }
.case-top-epic   { background: linear-gradient(135deg, #450a0a, #7f1d1d, #b45309); }

/* Свечения карточек */
.case-card-free  { border-color: rgba(74,222,128,0.3); box-shadow: 0 4px 20px rgba(74,222,128,0.1); }
.case-card-free:hover  { box-shadow: 0 8px 32px rgba(74,222,128,0.3); border-color: rgba(74,222,128,0.6); }

.case-card-silver { border-color: rgba(148,163,184,0.3); box-shadow: 0 4px 20px rgba(148,163,184,0.08); }
.case-card-silver:hover { box-shadow: 0 8px 32px rgba(148,163,184,0.25); border-color: rgba(148,163,184,0.6); }

.case-card-gold  { border-color: rgba(252,211,77,0.3); box-shadow: 0 4px 20px rgba(252,211,77,0.1); }
.case-card-gold:hover  { box-shadow: 0 8px 32px rgba(252,211,77,0.35); border-color: rgba(252,211,77,0.7); }

.case-card-peace { border-color: rgba(139,92,246,0.5); box-shadow: 0 4px 24px rgba(139,92,246,0.25); }
.case-card-peace:hover { box-shadow: 0 8px 36px rgba(139,92,246,0.5); border-color: rgba(167,139,250,0.8); }

.case-card-epic  { border-color: rgba(239,68,68,0.35); box-shadow: 0 4px 20px rgba(239,68,68,0.12); }
.case-card-epic:hover  { box-shadow: 0 8px 32px rgba(239,68,68,0.3); border-color: rgba(239,68,68,0.7); }

/* Нижняя часть */
.case-new-info { padding: 10px 12px 12px; }
.case-new-name {
    font-size: 0.78rem; font-weight: 800; color: #e2e8f0;
    margin-bottom: 5px; line-height: 1.2;
    font-family: 'Bounded', sans-serif;
}
.case-new-price {
    font-size: 0.72rem; font-weight: 800; color: #fbbf24;
    background: rgba(252,211,77,0.1); border: 1px solid rgba(252,211,77,0.25);
    border-radius: 6px; padding: 2px 8px; display: inline-block;
    font-family: 'Bounded', sans-serif;
}
.case-new-price.free    { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); }
.case-new-price.special { color: #f87171; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
.case-new-price.peace   { color: #c4b5fd; background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.4); }

/* ===== МОДАЛ КЕЙСА ===== */
#case-select-modal {
    font-family: 'Bounded', sans-serif !important;
}
#case-select-modal h3,
#case-select-modal p,
#case-select-modal button,
#case-select-modal div {
    font-family: 'Bounded', sans-serif !important;
}

/* Подарки в модале */
.case-odds-item {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04); border-radius: 12px;
    padding: 10px 14px; border: 1px solid rgba(255,255,255,0.06);
}
.case-odds-left { display: flex; align-items: center; gap: 10px; }
.case-odds-emoji { font-size: 1.4rem; }
.case-odds-name { font-size: 0.85rem; color: #ddd; font-weight: 700; }
.case-odds-val  { font-size: 0.72rem; color: #555; }
.case-odds-pct  { font-size: 0.9rem; font-weight: 900; }

/* ══════════════════════════════════════════
   МИНЫ — БУКВА F НА КЛЕТКАХ
   ══════════════════════════════════════════ */
.cell-f-letter {
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(255,255,255,0.2);
    font-family: 'Georgia', serif;
    letter-spacing: -1px;
    pointer-events: none;
    user-select: none;
    transition: color 0.2s, text-shadow 0.2s;
}
/* Зелёная — безопасная клетка */
.mines-grid-new .cell.safe .cell-f-letter {
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74,222,128,0.7), 0 0 4px rgba(74,222,128,0.5);
}
/* Красная — мина */
.mines-grid-new .cell.mine .cell-f-letter,
.mines-grid-new .cell.revealed.mine .cell-f-letter {
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239,68,68,0.7), 0 0 4px rgba(239,68,68,0.5);
}

/* ═══ GAME SELECT CARDS — стиль как у окна депозита ═══ */
.game-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 100px;
}
.game-select-card {
    background: linear-gradient(145deg, #13131f, #1a1a2e);
    border: 1.5px solid rgba(123,92,255,0.22);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.15s;
    position: relative;
    overflow: hidden;
}
.game-select-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(123,92,255,0.5), transparent);
}
.game-select-card:hover {
    border-color: rgba(123,92,255,0.55);
    box-shadow: 0 4px 20px rgba(123,92,255,0.2);
}
.game-select-card:active { transform: scale(0.97); }
.game-select-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.game-select-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid rgba(123,92,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
}
.game-select-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.game-select-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #e0d0ff;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.game-select-desc {
    font-size: 0.68rem;
    color: #555;
    font-weight: 500;
}
.game-select-arrow {
    font-size: 1.1rem;
    color: rgba(123,92,255,0.5);
    font-weight: 300;
}

/* Fullscreen overlay для игр */
.game-fullscreen {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 400 !important;
    background: #0d0d1a !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    padding-top: 64px !important;
    box-sizing: border-box !important;
}

/* Блокируем скролл body когда игра открыта */
body.game-open {
    overflow: hidden !important;
    height: 100% !important;
}
#global-back-btn { z-index: 600 !important; }

/* Скрываем старые стили */
.game-card-new { display: none !important; }

/* ===== PIXEL ART ИКОНКИ ИГРОВЫХ КНОПОК ===== */
.game-card-pixel-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 4;
    width: 100px;
    height: 100px;
}
.game-card-img-rocket .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(255,120,40,0.8)) drop-shadow(0 0 28px rgba(255,80,0,0.4));
}
.game-card-img-mines .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(60,210,60,0.75)) drop-shadow(0 0 28px rgba(30,160,30,0.35));
}
.game-card-img-cases .game-card-pixel-icon {
    filter: drop-shadow(0 0 12px rgba(255,200,40,0.75)) drop-shadow(0 0 28px rgba(200,140,0,0.35));
}

/* ===== PIXEL ART ИКОНКИ КАРТОЧЕК КЕЙСОВ ===== */
.case-pixel-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: block;
}
/* Скрываем старый эмодзи если pixel icon есть */
.case-new-top .case-new-emoji { display: none; }

@keyframes caseShake {
    0%,100% { transform: rotate(0deg) scale(1); }
    20%     { transform: rotate(-8deg) scale(1.1); }
    40%     { transform: rotate(8deg) scale(1.15); }
    60%     { transform: rotate(-5deg) scale(1.1); }
    80%     { transform: rotate(5deg) scale(1.05); }
}
@keyframes casePop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}
#case-select-modal > div {
    animation: slideUp 0.35s cubic-bezier(.22,.68,0,1.2);
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
#case-currency-silver, #case-currency-gold {
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
#case-currency-silver.active-currency {
    border-color: rgba(196,181,253,0.7) !important;
    background: rgba(123,92,255,0.25) !important;
    color: #c4b5fd !important;
    box-shadow: 0 0 16px rgba(123,92,255,0.3);
}
#case-currency-gold.active-currency {
    border-color: rgba(252,211,77,0.7) !important;
    background: rgba(252,211,77,0.15) !important;
    color: #fcd34d !important;
    box-shadow: 0 0 16px rgba(252,211,77,0.25);
}
#case-open-btn {
    transition: opacity 0.2s, transform 0.15s;
}
#case-open-btn:active { transform: scale(0.97); }

/* ===== НОВОЕ МЕНЮ ИГР ===== */
.game-menu-header {
    padding: 20px 16px 4px;
    text-align: center;
}
.game-menu-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #7b5cff;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.game-menu-sub {
    font-size: 0.72rem;
    color: #3a3a55;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.game-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 100px;
}
.game-cards-row {
    display: flex;
    gap: 12px;
}

/* Базовая карточка */
.game-big-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.22s;
    border: 1.5px solid rgba(255,255,255,0.07);
    -webkit-tap-highlight-color: transparent;
}
.game-big-card:active { transform: scale(0.96); }

/* Половинки */
.game-big-card--half {
    flex: 1;
    min-width: 0;
}

/* Фоновый слой (цвет у каждой игры свой) */
.game-big-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.game-big-card__glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.35;
    pointer-events: none;
}

/* РАКЕТКА */
.game-big-card--rocket .game-big-card__bg {
    background: linear-gradient(145deg, #16102e 0%, #1e1040 50%, #0f0f1e 100%);
}
.game-big-card--rocket .game-big-card__glow {
    width: 180px; height: 180px;
    top: -40px; right: -30px;
    background: radial-gradient(circle, rgba(123,92,255,0.7), transparent 70%);
}
.game-big-card--rocket {
    border-color: rgba(123,92,255,0.3);
    box-shadow: 0 8px 32px rgba(123,92,255,0.18);
}
.game-big-card--rocket:active {
    box-shadow: 0 2px 12px rgba(123,92,255,0.3);
}

/* МИНЫ */
.game-big-card--mines .game-big-card__bg {
    background: linear-gradient(145deg, #0d1d10 0%, #122016 50%, #0a130a 100%);
}
.game-big-card--mines .game-big-card__glow {
    width: 140px; height: 140px;
    top: -20px; right: -20px;
    background: radial-gradient(circle, rgba(34,197,94,0.65), transparent 70%);
}
.game-big-card--mines {
    border-color: rgba(34,197,94,0.28);
    box-shadow: 0 6px 24px rgba(34,197,94,0.14);
}

/* КЕЙСЫ */
.game-big-card--cases .game-big-card__bg {
    background: linear-gradient(145deg, #1e1505 0%, #241800 50%, #13110a 100%);
}
.game-big-card--cases .game-big-card__glow {
    width: 140px; height: 140px;
    top: -20px; right: -20px;
    background: radial-gradient(circle, rgba(251,191,36,0.6), transparent 70%);
}
.game-big-card--cases {
    border-color: rgba(251,191,36,0.28);
    box-shadow: 0 6px 24px rgba(251,191,36,0.12);
}

/* Внутренний контент — горизонтальный (ракетка) */
.game-big-card__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 20px;
}

/* Вертикальный (мины, кейсы) */
.game-big-card__inner--col {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 14px 20px;
    gap: 8px;
}

.game-big-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.game-big-card__info {
    flex: 1;
    min-width: 0;
}

.game-big-card__name {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.game-big-card--half .game-big-card__name {
    font-size: 1.05rem;
}

.game-big-card__desc {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 10px;
}
.game-big-card--half .game-big-card__desc {
    font-size: 0.65rem;
    margin-bottom: 8px;
}

.game-big-card__online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.game-big-card__inner--col .game-big-card__online {
    justify-content: center;
}

.game-big-card__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #7b5cff;
    box-shadow: 0 0 6px rgba(123,92,255,0.8);
    animation: dotPulse 2s infinite;
    flex-shrink: 0;
}
.game-big-card__dot--green {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.8);
}
.game-big-card__dot--gold {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251,191,36,0.8);
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.game-big-card__arrow {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.2);
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
}

/* Верхняя полоска-блик */
.game-big-card::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    z-index: 3;
}

/* ===== Красивые анимации (доп.) ===== */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes shineSweep { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes popIn { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes glowPulse { 0%,100%{filter:drop-shadow(0 0 4px rgba(252,211,77,.4))} 50%{filter:drop-shadow(0 0 16px rgba(252,211,77,.9))} }
@keyframes spinPrizePulse { 0%{transform:scale(.5) rotate(-12deg);opacity:0} 55%{transform:scale(1.15) rotate(4deg);opacity:1} 100%{transform:scale(1) rotate(0)} }

.inv-gift-emoji { animation: floatY 3s ease-in-out infinite; }
.inv-gift-card { transition: transform .18s ease, box-shadow .18s ease; }
.inv-gift-card:active { transform: scale(.96); }
.inv-gift-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.case-odds-emoji { display:inline-block; animation: floatY 3.4s ease-in-out infinite; }
#new-gift-icon { animation: popIn .5s cubic-bezier(.2,1.3,.4,1) both, glowPulse 2.2s ease-in-out 0.5s infinite; }
.spin-prize-icon { animation: spinPrizePulse .6s cubic-bezier(.2,1.4,.4,1) both; }
.case-card { transition: transform .2s ease, box-shadow .2s ease; }
.case-card:hover { transform: translateY(-4px) scale(1.02); }

/* ===== Цвета новых кейсов (200–5000) ===== */
.case-top-blue    { background: linear-gradient(135deg, #0c2d5a, #1e4d8c, #2f6fd0); border-bottom:1px solid rgba(96,165,250,0.3); }
.case-card-blue   { border-color: rgba(96,165,250,0.4); box-shadow:0 4px 20px rgba(59,130,246,0.15); }
.case-card-blue:hover  { box-shadow:0 8px 32px rgba(59,130,246,0.35); border-color: rgba(96,165,250,0.8); }
.case-card-blue .case-pixel-icon   { filter: drop-shadow(0 0 10px rgba(96,165,250,0.85)); }

.case-top-violet  { background: linear-gradient(135deg, #3b0a5a, #6b21a8, #a855f7); border-bottom:1px solid rgba(192,132,252,0.3); }
.case-card-violet { border-color: rgba(192,132,252,0.4); box-shadow:0 4px 20px rgba(168,85,247,0.15); }
.case-card-violet:hover { box-shadow:0 8px 32px rgba(168,85,247,0.35); border-color: rgba(192,132,252,0.8); }
.case-card-violet .case-pixel-icon { filter: drop-shadow(0 0 10px rgba(192,132,252,0.85)); }

.case-top-crown   { background: linear-gradient(135deg, #4d3606, #a97a12, #fcd34d); border-bottom:1px solid rgba(252,211,77,0.35); }
.case-card-crown  { border-color: rgba(252,211,77,0.45); box-shadow:0 4px 20px rgba(252,211,77,0.18); }
.case-card-crown:hover  { box-shadow:0 8px 34px rgba(252,211,77,0.4); border-color: rgba(252,211,77,0.9); }
.case-card-crown .case-pixel-icon  { filter: drop-shadow(0 0 12px rgba(252,211,77,0.95)); }

.case-top-teal    { background: linear-gradient(135deg, #063d3a, #0d7a72, #2dd4bf); border-bottom:1px solid rgba(45,212,191,0.3); }
.case-card-teal   { border-color: rgba(45,212,191,0.4); box-shadow:0 4px 20px rgba(20,184,166,0.15); }
.case-card-teal:hover  { box-shadow:0 8px 32px rgba(20,184,166,0.35); border-color: rgba(45,212,191,0.85); }
.case-card-teal .case-pixel-icon   { filter: drop-shadow(0 0 12px rgba(45,212,191,0.9)); }

.case-top-crimson { background: linear-gradient(135deg, #4a0410, #9f1239, #f43f5e); border-bottom:1px solid rgba(244,63,94,0.35); }
.case-card-crimson{ border-color: rgba(244,63,94,0.45); box-shadow:0 4px 22px rgba(244,63,94,0.2); }
.case-card-crimson:hover { box-shadow:0 8px 36px rgba(244,63,94,0.45); border-color: rgba(244,63,94,0.95); }
.case-card-crimson .case-pixel-icon{ filter: drop-shadow(0 0 14px rgba(244,63,94,1)); }

/* ═══ Мины: NFT-обложка клеток ═══ */
.cell-nft-img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    opacity: 0.3;
    filter: grayscale(0.4) brightness(0.8);
    pointer-events: none;
    user-select: none;
    transition: opacity .2s, filter .2s, transform .2s;
}
.cell.revealed.safe .cell-nft-img,
.cell.safe .cell-nft-img {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
    animation: gemGlow 1s infinite alternate;
}
.cell.mine .cell-nft-img { opacity: 0; }
.cell.mine::after {
    content: '💣';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    animation: bombShake 0.5s;
}

/* ═══ Кнопка "История игр" снизу + модалка ═══ */
.history-open-btn {
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    color: #aab;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
.history-open-btn:hover { background: rgba(123,92,255,0.12); border-color: rgba(123,92,255,0.4); color: #fff; }
.history-open-arrow { margin-left: auto; font-size: 1.3rem; opacity: 0.6; }

.history-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(3px);
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.history-modal.open { display: flex; animation: fadeIn .2s ease; }
.history-modal-card {
    width: 100%;
    max-width: 480px;
    max-height: 82vh;
    background: linear-gradient(180deg, #14141f, #0e0e16);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    animation: slideUp .28s cubic-bezier(.2,1,.3,1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.history-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.history-modal-head h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.history-modal-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: #ccc;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
}
.history-modal-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

/* ═══ Поле мин — крупнее, по центру ═══ */
.mines-board-new { min-height: 58vh; justify-content: center; }
.mines-grid-new {
    max-width: min(86vw, 360px);
    margin: 0 auto;
    gap: 10px;
}
.mines-grid-new .cell { font-size: 1.9rem; border-radius: 14px; }
.mines-cashout-btn { max-width: min(86vw, 400px); margin: 6px auto 0; }


/* Мины/Ракетка: контролы сверху, "История игр" прижата к самому низу экрана */
#mines-game.game-fullscreen,
#rocket-game.game-fullscreen {
    display: flex !important;
    flex-direction: column;
}
#mines-game .history-open-btn,
#rocket-game .history-open-btn {
    margin-top: auto;
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
    flex-shrink: 0;
}

/* 🎉 Празднование дорогого дропа в кейсах */
@keyframes bwFlash { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }
@keyframes bwRays { 0%{opacity:0;transform:rotate(0) scale(.6)} 20%{opacity:.85} 100%{opacity:0;transform:rotate(160deg) scale(1.25)} }
@keyframes bwConfetti {
    0%   { opacity:0; transform:translate(0,0) rotate(0deg); }
    10%  { opacity:1; }
    100% { opacity:0; transform:translate(var(--dx), 115vh) rotate(720deg); }
}

.prf-side-spacer{width:46px;height:46px;flex-shrink:0;}

.topup-promo-row{align-items:stretch;width:100%;}
.topup-promo-input{min-width:0;}