@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg-dark: #0b0f0d;
    --bg-card: #08110d;
    --bg-card-hover: #0d1612;
    --primary-cyan: #00e5ff;
    --primary-green: #00ff9d;
    --primary-red: #ff4d4d;
    --primary-yellow: #ffe600;
    --gradient-main: linear-gradient(135deg, var(--primary-cyan), var(--primary-green));
    --text-main: #ffffff;
    --text-muted: #8fa396;
    --border-color: #1a3328;
    --font-main: 'Montserrat', sans-serif;
    --font-head: 'Montserrat', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
}

/* Protect Bootstrap Icons from font/text overrides */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;

    background: linear-gradient(165deg, #0d1210 0%, #0a0e0c 30%, #0c100e 60%, #090d0b 100%);
    background-attachment: fixed;

    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Важно для оверлея */
}

.site-main {
    flex: 1 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.no-scroll,
html.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

/* 2. Тонкий зелёный оттенок + виньетка */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0, 255, 157, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 255, 157, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
}

a {
    text-decoration: none;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* === CUSTOM SCROLLBAR (Весь сайт) === */

/* 1. Ширина скроллбара */
/* === CUSTOM SCROLLBAR (Ледяная Сталь) === */

/* 1. Ширина */
::-webkit-scrollbar {
    width: 10px;
}

/* 2. Фон (Трек) - Глубокий матовый серый */
::-webkit-scrollbar-track {
    background: #0f1114;
    /* Еще темнее, чтобы сливался с фоном */
    border-left: 1px solid rgba(255, 255, 255, 0.03);
}

/* 3. Ползунок (Thumb) - МЕТАЛЛИЧЕСКИЙ ГРАДИЕНТ */
::-webkit-scrollbar-thumb {
    /* Верх: #454d55 (Темный графит)
       Низ:  #6c8091 (Холодная сталь / Грязный голубой)
       Переход очень мягкий, без резкого цвета.
    */
    background: linear-gradient(180deg, #454d55 0%, #6c8091 100%);

    border-radius: 10px;
    /* Отступ создает эффект "парящего" стержня */
    border: 2px solid #0f1114;
}

/* 4. При наведении (Hover) - Эффект блика на металле */
::-webkit-scrollbar-thumb:hover {
    /* Чуть светлее, как будто на металл упал свет */
    background: linear-gradient(180deg, #5a646e 0%, #8fa6b8 100%);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 60px;
    width: 100%;
}

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

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-20 {
    margin-top: 20px;
}

.text-cyan {
    color: var(--primary-cyan) !important;
}

.text-green {
    color: var(--primary-green) !important;
}

.text-yellow {
    color: var(--primary-yellow) !important;
}

.text-red {
    color: var(--primary-red) !important;
}

.text-muted {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

.text-white {
    color: #fff !important;
}

.text-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 255, 157, 0.3);
}

.btn {
    border: none;
    border-radius: 8px;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
    text-align: center;
    transition: var(--transition-smooth);
}

.btn-primary {
    background: var(--gradient-main);
    color: #000;
    padding: 12px 24px;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
    font-size: 0.9rem;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.6);
}

/* LOGIN button — sleek glassmorphism outline */
.btn-login {
    background: rgba(0, 200, 120, 0.08);
    color: #fff;
    padding: 11px 28px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    border: 1px solid rgba(0, 210, 130, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 12px rgba(0, 210, 130, 0.08), inset 0 0 12px rgba(0, 210, 130, 0.04);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 130, 0.12), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover::before {
    left: 100%;
}

.btn-login:hover {
    border-color: rgba(0, 210, 130, 0.7);
    color: #fff;
    box-shadow: 0 0 25px rgba(0, 210, 130, 0.25), inset 0 0 15px rgba(0, 210, 130, 0.06);
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(0, 210, 130, 0.4);
}

.btn-create {
    width: 100%;
    padding: 20px;
    font-size: 1.2rem;
    background: var(--gradient-main);
    background-size: 200% auto;
    color: #020504;
    box-shadow: 0 5px 15px rgba(0, 255, 157, 0.2);
}

.btn-create:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.6), 0 0 60px rgba(0, 255, 157, 0.4);
    background-position: right center;
}

.btn-create:disabled {
    background: #1a2220;
    color: #444;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-create::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: 0.5s;
    z-index: -1;
}

.btn-create:hover::after {
    left: 100%;
    transition: 0.7s ease-in-out;
}

.btn-logout {
    background: transparent;
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    padding: 8px 20px;
    font-size: 0.8rem;
    border-radius: 50px;
    font-weight: 700;
}

.btn-logout:hover {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.5);
    transform: translateY(-2px);
}

.btn-join-small {
    padding: 10px 20px;
    width: 100%;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(to bottom, #00ff9d 0%, #00cc7a 100%);
    color: #051a12;
    box-shadow: 0 4px 10px rgba(0, 255, 157, 0.15);
    transition: all 0.3s ease;
}

.btn-join-small:hover {
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
    background: linear-gradient(to bottom, #2bfaac 0%, #1db87c 100%);
}

.btn-cancel-small {
    padding: 10px 0;
    width: 100%;
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    background: rgba(255, 77, 77, 0.05);
    border: 2px solid #ff4d4d;
    color: #ff4d4d;
    transition: all 0.3s ease;
}

.btn-cancel-small:hover {
    background: #ff4d4d;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.6);
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.btn-confirm-join {
    background: linear-gradient(135deg, #00ff9d 0%, #00cc7a 100%);
    color: #051a12;
    padding: 12px 40px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--font-main);
}

.btn-confirm-join:disabled {
    background: #333;
    color: #555;
    cursor: not-allowed;
}

.btn-confirm-join:not(:disabled):hover {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.4);
    transform: translateY(-2px);
}

.header {
    background: linear-gradient(180deg, rgba(8, 14, 10, 0.92) 0%, rgba(8, 14, 10, 0.85) 100%);
    border-bottom: 1px solid rgba(0, 255, 157, 0.06);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px) saturate(1.4);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 3px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo:hover {
    filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.2));
}

.logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

.logo span {
    background: linear-gradient(135deg, #00ff9d, #00cc7d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    gap: 6px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    position: relative;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link i {
    font-size: 1rem;
    transition: 0.3s;
}

.nav-link:hover {
    color: #fff;
    background: rgba(0, 255, 157, 0.07);
    box-shadow: inset 0 0 20px rgba(0, 255, 157, 0.03);
}

.nav-link:hover i {
    color: #00ff9d;
    filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.5));
}

.nav-link.active {
    color: #fff;
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid rgba(0, 255, 157, 0.12);
}

/* Remove old underline effect */
.nav-link::after {
    display: none;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

.box-card,
.game-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    transition: var(--transition-smooth);
}

.box-card:hover {
    border-color: rgba(0, 255, 157, 0.3);
    background: var(--bg-card-hover);
}

.box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 25px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.home-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-left: 4px solid var(--primary-green);
    background: linear-gradient(90deg, var(--bg-card) 0%, rgba(0, 255, 157, 0.03) 100%);
}

/* ===== WELCOME HERO (unauthenticated) ===== */
.welcome-hero {
    width: 100%;
    text-align: center;
    padding: 48px 20px 36px;
    position: relative;
    overflow: hidden;
}

.welcome-hero-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0, 255, 157, 0.07) 0%, transparent 65%);
    pointer-events: none;
}

/* Floating particles */
.welcome-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.welcome-hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.35);
    animation: heroParticleFloat 6s ease-in-out infinite;
}
.welcome-hero-particles span:nth-child(1) { left: 12%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
.welcome-hero-particles span:nth-child(2) { left: 70%; top: 60%; animation-delay: 1.2s; animation-duration: 5s; width: 2px; height: 2px; }
.welcome-hero-particles span:nth-child(3) { left: 85%; top: 15%; animation-delay: 2.5s; animation-duration: 8s; }
.welcome-hero-particles span:nth-child(4) { left: 30%; top: 75%; animation-delay: 0.8s; animation-duration: 6s; width: 4px; height: 4px; }
.welcome-hero-particles span:nth-child(5) { left: 55%; top: 30%; animation-delay: 3s; animation-duration: 7s; width: 2px; height: 2px; }

@keyframes heroParticleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-30px) scale(1.5); opacity: 0.7; }
}

.welcome-hero-content {
    position: relative;
    z-index: 1;
}

.welcome-hero-title {
    font-size: 3.6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 6px;
    margin: 0 0 14px 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.welcome-hero-title span {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(0, 255, 157, 0.2));
}

.welcome-hero-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.05rem;
    font-weight: 500;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Hero action buttons */
.welcome-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 34px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-green), #00d68f);
    color: #021a0e;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 255, 157, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
    text-decoration: none;
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 255, 157, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-hero-primary .bi {
    font-size: 1.1rem;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 157, 0.25);
    color: #fff;
    transform: translateY(-2px);
}

/* Game badge — clickable pill */
.hero-game-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(0, 255, 157, 0.04);
    border: 1px solid rgba(0, 255, 157, 0.12);
    border-radius: 16px;
    padding: 12px 24px 12px 14px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.hero-game-badge:hover {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.25);
    transform: translateY(-2px);
}

.hero-game-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.15), rgba(0, 255, 157, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-game-badge-icon .bi {
    font-size: 1.3rem;
    color: var(--primary-green);
}

.hero-game-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.hero-game-badge-title {
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
}

.hero-game-badge-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.hero-game-badge-arrow {
    font-size: 0.9rem;
    color: rgba(0, 255, 157, 0.5);
    margin-left: 6px;
    transition: transform 0.3s ease, color 0.3s ease;
}
.hero-game-badge:hover .hero-game-badge-arrow {
    transform: translateX(4px);
    color: var(--primary-green);
}

/* ===== FEATURE CARDS ROW ===== */
.hero-features-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.hero-feature-card {
    --card-accent: 0, 255, 157;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(168deg, rgba(var(--card-accent), 0.04) 0%, var(--bg-card) 35%, var(--bg-card) 100%);
    border: 1px solid rgba(var(--card-accent), 0.1);
    border-radius: 18px;
    padding: 24px 22px 22px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Top accent line */
.hero-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, rgba(var(--card-accent), 0.6), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Subtle corner shimmer */
.hero-feature-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(var(--card-accent), 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.hero-feature-card:hover {
    background: linear-gradient(168deg, rgba(var(--card-accent), 0.08) 0%, var(--bg-card-hover) 40%, var(--bg-card-hover) 100%);
    border-color: rgba(var(--card-accent), 0.22);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(var(--card-accent), 0.06);
}
.hero-feature-card:hover::before { opacity: 1; }
.hero-feature-card:hover::after { opacity: 1; }

/* Background glow orb */
.hero-feature-glow {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--card-accent), 0.08) 0%, transparent 70%);
    pointer-events: none;
    transition: all 0.5s ease;
}
.hero-feature-card:hover .hero-feature-glow {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--card-accent), 0.14) 0%, transparent 70%);
}

/* Card accent colors */
.hero-feature-card--instant { --card-accent: 0, 229, 255; }
.hero-feature-card--fair    { --card-accent: 0, 255, 157; }
.hero-feature-card--trade   { --card-accent: 168, 85, 247; }
.hero-feature-card--giveaway{ --card-accent: 255, 170, 0; }



/* Icon box */
.hero-feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(var(--card-accent), 0.08);
    border: 1px solid rgba(var(--card-accent), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    transition: all 0.4s ease;
}

.hero-feature-card:hover .hero-feature-icon {
    background: rgba(var(--card-accent), 0.14);
    border-color: rgba(var(--card-accent), 0.25);
    box-shadow: 0 6px 20px rgba(var(--card-accent), 0.15);
    transform: scale(1.05);
}

.hero-feature-icon .bi {
    font-size: 1.4rem;
    color: rgba(var(--card-accent), 1);
    filter: drop-shadow(0 0 8px rgba(var(--card-accent), 0.2));
}

/* Card title & desc */
.hero-feature-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.hero-feature-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.65;
    flex: 1;
}

/* Arrow indicator */
.hero-feature-arrow {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(var(--card-accent), 0.3);
    font-size: 0.95rem;
    transition: all 0.35s ease;
}
.hero-feature-card:hover .hero-feature-arrow {
    color: rgba(var(--card-accent), 0.8);
    transform: translateX(5px);
}

@media (max-width: 900px) {
    .hero-features-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .welcome-hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    .welcome-hero-actions {
        flex-direction: column;
    }
    .hero-features-row {
        grid-template-columns: 1fr;
    }
    .hero-feature-card {
        padding: 20px 18px;
    }
    .hero-feature-title {
        font-size: 1rem;
    }
    .hero-feature-desc {
        font-size: 0.78rem;
    }
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 25px;
}

.avatar-slot {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: #000;
    border: 2px solid var(--primary-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    transition: var(--transition-smooth);
}

.avatar-slot:hover {
    transform: scale(1.05);
    border-color: var(--primary-green);
}

.avatar-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    font-size: 2rem;
    color: var(--primary-cyan);
}

.avatar-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.cf-container {
    display: block;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

.cf-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: var(--bg-card);
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
    gap: 16px;
}

.cf-stats-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}

.cf-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 130px;
    transition: all 0.3s ease;
}

.cf-stat-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.cf-stat-card-wide {
    min-width: 200px;
}

.cf-stat-icon {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}

.cf-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cf-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #667;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Profit period tabs */
.cf-profit-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 2px;
}

.cf-profit-tab {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    color: #556;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.cf-profit-tab:hover {
    color: #aab;
}

.cf-profit-tab.active {
    background: rgba(0, 255, 130, 0.1);
    color: #00ff82;
}

/* === PREMIUM COINFLIP STAT CARDS === */
.cf-stats-grid--compact {
    display: flex;
    gap: 14px;
    flex: 1;
    align-items: stretch;
}

.cf-stat-card--premium {
    background: var(--bg-card);
    border: 1px solid rgba(0, 255, 157, 0.2);
    border-radius: 14px;
    padding: 14px 20px 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    flex: 1;
    max-width: 280px;
    backdrop-filter: blur(16px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cf-stat-card--premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.35), transparent);
}

.cf-stat-card--premium:hover {
    border-color: rgba(0, 255, 157, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 255, 157, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Icon circle */
.cf-stat-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cf-stat-icon-circle--green {
    background: linear-gradient(135deg, rgba(0, 230, 180, 0.2), rgba(0, 200, 255, 0.08));
    border: 1px solid rgba(0, 230, 180, 0.3);
    color: #00e6b4;
    box-shadow: 0 0 14px rgba(0, 230, 180, 0.12), inset 0 0 12px rgba(0, 230, 180, 0.05);
}

.cf-stat-icon-circle--red {
    background: linear-gradient(135deg, rgba(255, 90, 90, 0.2), rgba(255, 60, 120, 0.08));
    border: 1px solid rgba(255, 90, 90, 0.3);
    color: #ff5a5a;
    box-shadow: 0 0 14px rgba(255, 90, 90, 0.12), inset 0 0 12px rgba(255, 90, 90, 0.05);
}

.cf-stat-card--premium:hover .cf-stat-icon-circle {
    transform: scale(1.1) rotate(3deg);
}

.cf-stat-card--premium:hover .cf-stat-icon-circle--green {
    box-shadow: 0 0 22px rgba(0, 230, 180, 0.3), inset 0 0 12px rgba(0, 230, 180, 0.08);
}

.cf-stat-card--premium:hover .cf-stat-icon-circle--red {
    box-shadow: 0 0 22px rgba(255, 90, 90, 0.3), inset 0 0 12px rgba(255, 90, 90, 0.08);
}

/* Label & tabs */
.cf-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.cf-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Value */
.cf-stat-value--large {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Profit card override for tabs */
.cf-stat-card--profit .cf-stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cf-profit-tabs {
    display: flex;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-profit-tab {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.6px;
    user-select: none;
}

.cf-profit-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

.cf-profit-tab.active {
    background: linear-gradient(135deg, rgba(0, 230, 180, 0.18), rgba(0, 200, 255, 0.1));
    color: #00e6b4;
    box-shadow: 0 0 8px rgba(0, 230, 180, 0.1);
}

/* Profit value formatting */
.cf-profit-sign {
    font-weight: 700;
    margin-right: 1px;
}

.cf-profit-coin-icon {
    width: 16px;
    height: 16px;
    vertical-align: 0px;
    margin-left: -1px;
    opacity: 0.85;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cf-stats-grid--compact {
        flex-direction: column;
        gap: 10px;
    }

    .cf-stat-card--premium {
        max-width: 100%;
    }

    .cf-header-bar {
        padding: 15px;
    }

    .cf-stat-card--profit .cf-stat-label {
        flex-wrap: wrap;
        gap: 6px;
    }

    .cf-profit-tabs {
        gap: 2px;
        padding: 2px;
    }

    .cf-profit-tab {
        font-size: 0.55rem;
        padding: 3px 7px;
        letter-spacing: 0.3px;
    }
}

@media (max-width: 400px) {
    .cf-profit-tabs {
        gap: 1px;
        padding: 2px;
    }

    .cf-profit-tab {
        font-size: 0.5rem;
        padding: 2px 5px;
        letter-spacing: 0;
    }
}

/* Text color helpers */
.text-red {
    color: #ff4d4d !important;
}


.create-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.create-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.create-modal {
    background: #0f1110;
    border: 1px solid var(--border-color);
    width: 900px;
    max-width: 95vw;
    height: 85vh;
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0, 255, 157, 0.15);
    transform: scale(0.95);
    transition: 0.3s ease;
    overflow: hidden;
}

.create-modal-overlay.active .create-modal {
    transform: scale(1);
}

.modal-header {
    padding: 20px 30px;
    background: #151816;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
}

.modal-close-btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: 0.2s;
}

.modal-close-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.modal-inventory-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 30px;
    background: radial-gradient(circle at center, #0b0d0c 0%, #000 100%);
}

.modal-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: #151816;
    border-top: 1px solid var(--border-color);
    height: auto;
    min-height: 100px;
    position: relative;
    z-index: 10;
}

/* Commission note in create/join modal */
.modal-commission-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.modal-commission-note i {
    color: rgba(0, 229, 255, 0.5);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.modal-footer-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.modal-footer .coin-selector-group {
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px;
    display: flex;
    align-items: center;
}

.modal-footer .coin-visual {
    width: 50px;
    height: 50px;
    font-size: 0.8rem;
    margin: 0;
}

@media (max-width: 888px) {
    .modal-footer {
        display: block;
        min-height: 150px;
    }

    .btn-submit-create {
        height: 800px;
    }
}

.join-info-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(10, 23, 18, 0.98), rgba(8, 16, 13, 0.98));
    border: 1px solid rgba(0, 255, 157, 0.14);
    padding: 10px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    margin-right: auto;
    min-width: 210px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.join-info-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    width: 64px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 255, 157, 0), rgba(0, 255, 157, 0.85), rgba(0, 255, 157, 0));
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.2);
}

.join-info-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(0, 255, 157, 0.14), rgba(0, 255, 157, 0.05));
    border: 1px solid rgba(0, 255, 157, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.join-info-icon i {
    color: var(--primary-green);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.16));
}

.join-info-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.req-label {
    color: rgba(194, 214, 203, 0.66);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    margin-right: 0;
}

.req-val {
    color: #fff;
    font-weight: 800;
}

.req-range {
    color: #ecfff5;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.4px;
    line-height: 1.1;
    text-shadow: 0 0 12px rgba(0, 255, 157, 0.08);
}

@media (max-width: 768px) {
    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 18px;
    }

    .modal-footer-left {
        width: 100%;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .join-info-bar {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        gap: 10px;
        order: 3;
    }

    .join-info-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

    .req-label {
        font-size: 0.62rem;
        letter-spacing: 1px;
    }

    .req-range {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-footer .coin-selector-group {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .modal-footer-left {
        align-items: stretch;
    }

    .join-info-bar {
        border-radius: 12px;
        padding: 9px 11px;
    }

    .join-info-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .req-range {
        font-size: 0.86rem;
    }
}

.selection-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
}

.dashboard-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 10px 0;
    width: 100%;
}

.item-card-label,
.modal-item-card,
.dashboard-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: radial-gradient(circle at center, #1a1f24 0%, #0d0f11 100%);
    border: 1px solid #252a30;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 140px;
    position: relative;
}

.item-card-label:hover,
.dashboard-item-card:hover {
    border-color: var(--primary-cyan);
    transform: translateY(-3px);
    background: #1e252b;
}

.modal-item-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
    background: #151a1e;
}

.item-card-label.checked,
.modal-item-card.checked {
    border-color: var(--primary-green);
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.1) 0%, #0d0f11 100%);
    box-shadow: inset 0 0 0 1px var(--primary-green);
}

.item-card-label input,
.modal-item-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.item-img-container,
.dashboard-item-img {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 5px;
}

.item-img,
.dashboard-item-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.item-title {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.65rem;
    color: #aebcb5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
}

.item-price-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.coin-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.price-val {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.check-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--primary-green);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary-green);
    display: none;
}

.item-card-label.checked .check-indicator,
.modal-item-card.checked .check-indicator {
    display: block;
}

.games-box {
    width: 100%;
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-card {
    position: relative;
    background: #151b1e;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #252a30;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-height: 85px;
}

.game-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-cyan) 0%, var(--primary-green) 100%);
    box-shadow: 2px 0 15px rgba(0, 229, 255, 0.4);
}

.game-left-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
}

.game-header-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    padding-right: 25px;
    margin-right: 25px;
    height: 100%;
    min-height: 60px;
}

.player-row-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    width: 100%;
    transition: 0.2s;
}

.player-row-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.player-row-item.active {
    border-left-color: var(--primary-cyan);
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, transparent 100%);
}

.player-row-item.waiting {
    opacity: 0.5;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: transparent;
}

.tiny-coin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}

.tiny-coin.green {
    background: #00ff9d;
    color: #00ff9d;
}

.tiny-coin.yellow {
    background: #ffe600;
    color: #ffe600;
}

.game-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.mini-item-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    white-space: nowrap;
}

.mini-item-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mini-item-name {
    font-size: 0.7rem;
    color: #ccc;
    font-weight: 600;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-item-val {
    font-size: 0.75rem;
    color: var(--primary-green);
    font-weight: 800;
    margin-left: auto;
}

.game-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 130px;
}

.bet-info {
    font-size: 0.8rem;
    color: #8fa396;
    text-align: right;
    line-height: 1.2;
}

.bet-value {
    color: var(--primary-yellow);
    font-weight: 800;
    font-size: 1.1rem;
}

.user-dropdown-container {
    position: relative;
    display: inline-block;
    z-index: 1001;
}

.header-user-info {
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 1002;
}

.header-user-info:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-cyan);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 210px;
    background: rgba(6, 12, 9, 0.96);
    backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(0, 255, 157, 0.08);
    border-radius: 0px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 157, 0.04);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

/* ============================================
   USER DROPDOWN — GLASSMORPHIC REDESIGN
   ============================================ */
.user-dropdown-menu {
    width: 260px !important;
    padding: 0 !important;
    right: 0 !important;
    top: calc(100% + 12px) !important;
    border-radius: 18px !important;
    background: rgba(8, 16, 12, 0.94) !important;
    border: 1px solid rgba(0, 255, 157, 0.1) !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.75),
        0 0 40px rgba(0, 255, 157, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00e5ff, #00ff9d, transparent);
    opacity: 0.5;
}

.user-dd-glow {
    position: absolute;
    top: -40px;
    left: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Chevron icon in header-user-info */
.user-dd-chevron {
    font-size: 0.65rem;
    margin-left: 6px;
    opacity: 0.35;
    display: inline-block;
    transition: opacity 0.3s ease, color 0.3s ease, filter 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.user-dropdown-container:hover .user-dd-chevron {
    opacity: 1;
    color: #00ff9d;
    transform: rotate(180deg) scale(1.15);
    filter: drop-shadow(0 0 5px rgba(0, 255, 157, 0.7));
}

/* Greeting section */
.user-dd-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    position: relative;
    z-index: 1;
}

.user-dd-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.user-dd-greeting-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-dd-hello {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.user-dd-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

/* Divider */
.user-dd-divider {
    height: 1px;
    margin: 4px 16px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

/* Action items */
.user-dd-actions {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.user-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.user-dd-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.user-dd-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.user-dd-item-icon.deposit-icon {
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.12);
    color: #00ff9d;
}

.user-dd-item-icon.withdraw-icon {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.12);
    color: #00e5ff;
}

.user-dd-item.deposit:hover .user-dd-item-icon {
    background: rgba(0, 255, 157, 0.15);
    border-color: rgba(0, 255, 157, 0.3);
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.15);
}

.user-dd-item.withdraw:hover .user-dd-item-icon {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
}

.user-dd-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.user-dd-item-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.25s ease;
}

.user-dd-item.deposit:hover .user-dd-item-label {
    color: #00ff9d;
}

.user-dd-item.withdraw:hover .user-dd-item-label {
    color: #00e5ff;
}

.user-dd-item-desc {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
}

.user-dd-item-arrow {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease;
    margin-left: auto;
}

.user-dd-item:hover .user-dd-item-arrow {
    color: rgba(255, 255, 255, 0.3);
    transform: translateX(3px);
}

/* Logout */
.user-dd-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 10px 10px;
    padding: 10px 0;
    border-radius: 10px;
    background: rgba(255, 60, 60, 0.05);
    border: 1px solid rgba(255, 60, 60, 0.1);
    color: rgba(255, 100, 100, 0.6);
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.user-dd-logout i {
    font-size: 0.85rem;
}

.user-dd-logout:hover {
    background: rgba(255, 60, 60, 0.12);
    border-color: rgba(255, 77, 77, 0.28);
    color: #ff6b6b;
    box-shadow: 0 0 18px rgba(255, 77, 77, 0.06);
}

/* ============================================
   SNOW DROPDOWN — FULL REWORK v3
   ============================================ */
.snow-dropdown-wrapper {
    margin-right: 18px;
}

/* === КНОПКА-ТРИГГЕР (Зелёная с пульсом) === */
.btn-snow-toggle {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.08), rgba(0, 229, 255, 0.04));
    border: 1px solid rgba(0, 255, 157, 0.2);
    color: #00ff9d;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: visible;
}

.btn-snow-ring {
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 1.5px solid rgba(0, 255, 157, 0.15);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.btn-snow-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 15px;
    background: rgba(0, 255, 157, 0.06);
    animation: snowBtnPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes snowBtnPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.btn-snow-toggle i {
    position: relative;
    z-index: 2;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.3));
}

.btn-snow-toggle:hover,
.user-dropdown-container:hover .btn-snow-toggle {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.15), rgba(0, 229, 255, 0.08));
    border-color: rgba(0, 255, 157, 0.35);
    color: #00ff9d;
    box-shadow:
        0 0 30px rgba(0, 255, 157, 0.12),
        0 0 60px rgba(0, 255, 157, 0.04),
        inset 0 0 15px rgba(0, 255, 157, 0.05);
    transform: translateY(-1px);
}

.btn-snow-toggle:hover .btn-snow-ring {
    opacity: 1;
    inset: -5px;
    border-radius: 18px;
}

.btn-snow-toggle:hover i {
    transform: rotate(180deg) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(0, 255, 157, 0.5));
}

.btn-snow-toggle:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* === ВЫПАДАЮЩЕЕ МЕНЮ === */
.snow-dropdown-menu {
    width: 280px !important;
    padding: 0 !important;
    right: -16px !important;
    top: calc(100% + 14px) !important;
    border-radius: 20px !important;
    background: rgba(8, 14, 11, 0.96) !important;
    backdrop-filter: blur(32px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
    border: 1px solid rgba(0, 255, 157, 0.1) !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(0, 255, 157, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden !important;
    transform: translateY(12px) scale(0.94) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.user-dropdown-container:hover .snow-dropdown-menu {
    transform: translateY(10px) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Верхняя акцентная линия */
.snow-dd-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 5%,
        #00e5ff 25%,
        #00ff9d 50%,
        #00e5ff 75%,
        transparent 95%);
    opacity: 0.6;
    animation: accentLineFlow 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes accentLineFlow {
    0% { opacity: 0.3; background-position: -200% 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; background-position: 200% 0; }
}

/* Плавающие частицы внутри дропдауна */
.snow-dd-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.snow-dd-particle-1 {
    width: 100px;
    height: 100px;
    top: -30px;
    right: -20px;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.07) 0%, transparent 70%);
    animation: particleFloat1 6s ease-in-out infinite;
}

.snow-dd-particle-2 {
    width: 60px;
    height: 60px;
    bottom: 20px;
    left: -10px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
    animation: particleFloat2 8s ease-in-out infinite;
}

.snow-dd-particle-3 {
    width: 40px;
    height: 40px;
    top: 50%;
    right: 10px;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.04) 0%, transparent 70%);
    animation: particleFloat3 5s ease-in-out infinite;
}

@keyframes particleFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(-10px, 15px) scale(1.2); opacity: 0.8; }
    66% { transform: translate(5px, -5px) scale(0.9); opacity: 0.4; }
}

@keyframes particleFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(15px, -10px) scale(1.3); opacity: 0.7; }
}

@keyframes particleFloat3 {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(-8px, 8px); opacity: 0.6; }
}

/* === HEADER ROW === */
.snow-dd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 14px;
    position: relative;
    z-index: 1;
}

.snow-dd-icon-mini {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.08), rgba(0, 229, 255, 0.04));
    border: 1px solid rgba(0, 255, 157, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #00ff9d;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.snow-dd-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(0, 255, 157, 0.1);
    animation: iconRingPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes iconRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.15); opacity: 0; }
}

.snow-dd-icon-mini i {
    position: relative;
    z-index: 1;
    animation: iconSpin 8s linear infinite;
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.3));
}

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

.snow-dd-title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
    flex: 1;
}

.snow-dd-title-copy span {
    font-size: 0.84rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.1;
}

.snow-dd-title-copy small {
    font-size: 0.64rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* Status indicator */
.snow-dd-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 255, 157, 0.06);
    border: 1px solid rgba(0, 255, 157, 0.12);
    transition: all 0.4s ease;
}

.snow-dd-status span {
    font-size: 0.55rem;
    font-weight: 800;
    color: #00ff9d;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.snow-dd-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff9d;
    position: relative;
}

.snow-dd-status-dot.active {
    animation: statusGlow 2s ease-in-out infinite;
}

.snow-dd-status-dot.active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.3);
    animation: statusRing 2s ease-in-out infinite;
}

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

@keyframes statusRing {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.8); opacity: 0; }
}

.snow-dd-status.off {
    background: rgba(255, 77, 77, 0.06);
    border-color: rgba(255, 77, 77, 0.12);
}

.snow-dd-status.off span {
    color: rgba(255, 100, 100, 0.7);
}

.snow-dd-status.off .snow-dd-status-dot {
    background: rgba(255, 100, 100, 0.7);
    animation: none;
}

.snow-dd-status.off .snow-dd-status-dot::after {
    display: none;
}

/* === DIVIDER === */
.snow-dd-divider {
    height: 1px;
    margin: 0 20px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.1), transparent);
    position: relative;
    z-index: 1;
}

/* === CONTROL SECTION === */
.snow-dd-control {
    padding: 16px 20px 12px;
    position: relative;
    z-index: 1;
}

.snow-dd-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.snow-dd-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0;
}

.snow-dd-value {
    font-size: 0.72rem;
    font-weight: 800;
    color: #00ff9d;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
    text-shadow: 0 0 12px rgba(0, 255, 157, 0.3);
}

.snow-dd-slider-row {
    display: block;
    background: rgba(0, 255, 157, 0.02);
    border: 1px solid rgba(0, 255, 157, 0.06);
    border-radius: 14px;
    padding: 14px 16px 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.snow-dd-slider-row::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.1), transparent, rgba(0, 229, 255, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.snow-dd-slider-row:hover {
    border-color: rgba(0, 255, 157, 0.15);
    background: rgba(0, 255, 157, 0.03);
}

.snow-dd-slider-row:hover::before {
    opacity: 1;
}

/* Scale marks */
.snow-dd-marks {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px 0;
}

.snow-dd-marks span {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === SLIDER v2 === */
input[type=range].snow-range-v2 {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    flex: 1;
}

input[type=range].snow-range-v2:focus {
    outline: none;
}

input[type=range].snow-range-v2::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: linear-gradient(90deg,
        rgba(0, 255, 157, 0.08),
        rgba(0, 255, 157, 0.2) 40%,
        rgba(0, 229, 255, 0.3));
    border-radius: 999px;
    transition: all 0.4s ease;
    position: relative;
}

input[type=range].snow-range-v2:hover::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,
        rgba(0, 255, 157, 0.15),
        rgba(0, 255, 157, 0.4) 40%,
        rgba(0, 229, 255, 0.5));
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.1);
}

input[type=range].snow-range-v2::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #00ff9d 70%, #00cc7a 100%);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -7.5px;
    box-shadow:
        0 0 20px rgba(0, 255, 157, 0.4),
        0 0 40px rgba(0, 255, 157, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input[type=range].snow-range-v2::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    box-shadow:
        0 0 28px rgba(0, 255, 157, 0.6),
        0 0 56px rgba(0, 255, 157, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

input[type=range].snow-range-v2:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow:
        0 0 24px rgba(0, 255, 157, 0.5),
        0 0 48px rgba(0, 255, 157, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Firefox */
input[type=range].snow-range-v2::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: linear-gradient(90deg,
        rgba(0, 255, 157, 0.08),
        rgba(0, 255, 157, 0.2) 40%,
        rgba(0, 229, 255, 0.3));
    border-radius: 999px;
    border: none;
}

input[type=range].snow-range-v2::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #00ff9d 70%, #00cc7a 100%);
    cursor: pointer;
    box-shadow:
        0 0 20px rgba(0, 255, 157, 0.4),
        0 0 40px rgba(0, 255, 157, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* === FOOTER / TOGGLE BUTTON === */
.snow-dd-footer {
    padding: 8px 20px 18px;
    position: relative;
    z-index: 1;
}

.snow-dd-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    border-radius: 12px;
    background: rgba(0, 255, 157, 0.05);
    border: 1px solid rgba(0, 255, 157, 0.15);
    color: #00ff9d;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.snow-dd-btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.snow-dd-toggle-btn i {
    font-size: 0.85rem;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.snow-dd-toggle-btn:hover {
    background: rgba(0, 255, 157, 0.1);
    border-color: rgba(0, 255, 157, 0.3);
    color: #00ff9d;
    box-shadow: 0 8px 30px rgba(0, 255, 157, 0.08);
    transform: translateY(-2px);
}

.snow-dd-toggle-btn:hover .snow-dd-btn-bg {
    opacity: 1;
}

.snow-dd-toggle-btn:hover i {
    transform: rotate(180deg);
}

.snow-dd-toggle-btn:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.1s ease;
}

/* OFF state */
.snow-dd-toggle-btn.snow-off {
    background: rgba(0, 255, 157, 0.03);
    border-color: rgba(0, 255, 157, 0.08);
    color: rgba(0, 255, 157, 0.4);
}

.snow-dd-toggle-btn.snow-off .snow-dd-btn-bg {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.05), transparent);
}

.snow-dd-toggle-btn.snow-off:hover {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.2);
    color: #00ff9d;
    box-shadow: 0 8px 30px rgba(0, 255, 157, 0.06);
}

.user-dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px) scale(1);
}

/* Legacy dropdown-item kept minimal for compatibility */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.25s ease;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    border: none;
    position: relative;
}

.bot-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
}

.bot-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bot-modal {
    background: #0f1110;
    border: 1px solid var(--border-color);
    width: 400px;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.bot-modal-overlay.active .bot-modal {
    transform: scale(1);
}

.bot-modal h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.bot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #161b19;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #252a30;
    margin-bottom: 10px;
    transition: 0.2s;
}

.bot-row:hover {
    border-color: var(--primary-cyan);
    background: #1a2220;
}

.bot-avatar-wrapper {
    position: relative;
    width: 45px;
    height: 45px;
}

.bot-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #333;
}

.status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #161b19;
}

.status-dot.online {
    background-color: var(--primary-green);
    box-shadow: 0 0 8px var(--primary-green);
}

.status-dot.offline {
    background-color: #555;
}

.bot-info {
    flex-grow: 1;
    margin-left: 15px;
}

.bot-name {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

.bot-status-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.btn-bot-join {
    background: var(--primary-green);
    color: #000;
    font-weight: 800;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: 0.2s;
}

.btn-bot-join:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
    color: #000;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #555;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;
}

.modal-close:hover {
    color: #fff;
}

.coin-selector-group {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 25px 0;
}

.coin-label {
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.coin-label:hover {
    transform: translateY(-3px);
}

.coin-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.coin-visual {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), inset 0 -5px 15px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.05);
    background-size: 150% 150%;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.coin-visual::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 40%;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
    filter: blur(2px);
    transition: 0.4s;
}

.coin-visual.green {
    background: radial-gradient(circle at 30% 30%, #004d33, #001a12);
    border-color: #003322;
}

.coin-visual.yellow {
    background: radial-gradient(circle at 30% 30%, #665c00, #1a1700);
    border-color: #332e00;
}

.coin-label input:checked+.coin-visual {
    transform: scale(1.1);
    color: #fff;
    border-color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.coin-label input:checked+.coin-visual::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

.coin-label input:checked+.coin-visual.green {
    background: radial-gradient(circle at 30% 30%, #00ff9d, #004d33);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.4), inset 0 0 15px rgba(0, 255, 157, 0.3);
}

.coin-label input:checked+.coin-visual.yellow {
    background: radial-gradient(circle at 30% 30%, #ffe600, #665c00);
    box-shadow: 0 0 20px rgba(255, 230, 0, 0.4), inset 0 0 15px rgba(255, 230, 0, 0.3);
}

.coin-visual::after {
    content: '';
    position: absolute;
    bottom: -15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: 0.3s;
    opacity: 0;
}

.coin-label input:checked+.coin-visual::after {
    opacity: 1;
    background: #fff;
    box-shadow: 0 0 10px currentColor;
}

.coin-label input:checked+.coin-visual.green::after {
    color: #00ff9d;
    background: #00ff9d;
}

.coin-label input:checked+.coin-visual.yellow::after {
    color: #ffe600;
    background: #ffe600;
}

.coin-container {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 1000px;
    margin-bottom: 50px;
}

.coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 4s cubic-bezier(0.1, 0.7, 0.1, 1);
}

.side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 2rem;
    backface-visibility: hidden;
    box-shadow: none;
    border: none;
}

.side-a {
    background: none;
    color: var(--primary-green);
    border: none;
    box-shadow: none;
    transform: rotateY(0deg);
}

.side-b {
    background: none;
    color: var(--primary-yellow);
    border: none;
    box-shadow: none;
    transform: rotateY(180deg);
}

.side span {
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}


.admin-panel {
    background: rgba(255, 77, 77, 0.05);
    border: 1px dashed var(--primary-red);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.admin-row {
    display: flex;
    gap: 10px;
}

.admin-select {
    flex: 1;
}

.admin-input-val {
    width: 70px;
}

.btn-admin-add {
    width: 100%;
    background: var(--primary-red);
    color: #fff;
    border: none;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

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

.history-table th {
    text-align: left;
    color: var(--text-muted);
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.history-table td {
    padding: 20px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.history-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.status-win {
    color: var(--primary-green);
    font-weight: 700;
}

.status-lose {
    color: var(--primary-red);
    font-weight: 700;
}

@media (max-width: 1024px) {

    /* --- ГЛАВНЫЕ ОТСТУПЫ --- */
    .cf-container,
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .messages-container {
        padding: 0 15px;
    }

    /* --- ХЕДЕР И НАВИГАЦИЯ --- */
    .nav {
        padding: 0 20px !important;
        justify-content: space-between;
        height: 70px;
        /* Фиксируем высоту шапки */
    }

    /* Скрываем десктопные элементы */
    .nav-links,
    .header .header-user-info,
    .header .btn-login,
    .desktop-auth {
        display: none !important;
    }

    /* --- BURGER MENU (PREMIUM REDESIGN) --- */
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 38px;
        height: 38px;
        margin-left: auto;
        gap: 5px;
        cursor: pointer;
        z-index: 10002;
        padding: 4px;
        border-radius: 8px;
        transition: background 0.3s ease;
    }

    .burger-menu:hover {
        background: rgba(0, 255, 157, 0.06);
    }

    .burger-bar {
        height: 2.5px;
        background: linear-gradient(90deg, #00ff9d, #00e5ff);
        border-radius: 4px;
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        transform-origin: center;
        box-shadow: 0 0 8px rgba(0, 255, 157, 0.3);
    }

    .burger-bar:nth-child(1) {
        width: 100%;
        transition-delay: 0s;
    }

    .burger-bar:nth-child(2) {
        width: 70%;
        transition-delay: 0.05s;
    }

    .burger-bar:nth-child(3) {
        width: 85%;
        transition-delay: 0.1s;
    }

    .burger-menu:hover .burger-bar {
        width: 100%;
        box-shadow: 0 0 12px rgba(0, 255, 157, 0.5);
    }

    .burger-menu.active .burger-bar:nth-child(1) {
        width: 100%;
        transform: translateY(7.5px) rotate(45deg);
        background: linear-gradient(90deg, #ff4d4d, #ff6b6b);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
    }

    .burger-menu.active .burger-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .burger-menu.active .burger-bar:nth-child(3) {
        width: 100%;
        transform: translateY(-7.5px) rotate(-45deg);
        background: linear-gradient(90deg, #ff4d4d, #ff6b6b);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
    }

    /* --- MOBILE MENU (Handled in other media blocks) --- */
    .mobile-nav-overlay {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #060b08 0%, #0a1510 50%, #060b08 100%);
        z-index: 100000;
        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 0;
        overflow-y: auto;
        border: none;
        box-shadow: none;
    }

    .mobile-nav-overlay.active {
        transform: translateX(0);
    }

    /* --- ВЕРХНЯЯ ПАНЕЛЬ (CREATE GAME) --- */
    .cf-header-bar {
        flex-direction: column;
        gap: 12px;
        padding: 16px 12px;
    }

    .cf-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .cf-stat-card {
        padding: 8px 10px;
        gap: 6px;
        min-width: unset;
    }

    .cf-stat-card-wide {
        min-width: unset;
    }

    .cf-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
    }

    .cf-stat-value {
        font-size: 0.9rem;
    }

    .cf-stat-label {
        font-size: 0.5rem;
        flex-wrap: wrap;
    }

    .cf-header-bar .btn-place-bet {
        width: 100%;
    }

    .cf-header-bar .btn-login {
        width: 100%;
        text-align: center;
    }



    /* --- COINFLIP СТРАНИЦА --- */
    .cf-container {
        flex-direction: column;
        gap: 25px;
    }

    .inventory-box {
        min-height: auto;
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }

    /* Сетка инвентаря */
    .inventory-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        max-height: 350px;
    }

    .item-card-label {
        height: 130px;
        padding: 8px;
    }

    .item-img-container {
        height: 60px;
    }

    /* --- КАРТОЧКА ИГРЫ (MOBILE) --- */
    .game-card {
        flex-direction: column;
        align-items: center;
        padding: 20px 15px;
        gap: 15px;
        height: auto;
    }

    .game-card::before {
        display: none;
    }

    /* Убираем полоску слева для компактности */

    /* Секция Игроков (VS) */
    .game-players-section {
        width: 100%;
        justify-content: center;
        gap: 15px;
        margin-bottom: 5px;
        /* Фикс для флекс элементов */
        flex-direction: row;
        align-items: center;
    }

    /* Левая часть внутри карточки (если используешь старую структуру) */
    .game-left-section {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Аватарки */
    .game-avatar-wrapper {
        width: 55px;
        height: 55px;
    }

    .game-avatar {
        border-radius: 12px;
    }

    /* Секция Предметов */
    .game-items-section {
        padding: 0;
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
        gap: 5px;
    }

    .game-item-circle {
        width: 50px;
        height: 50px;
    }


    .room-price-label {
        display: none;
    }

    .room-price-val {
        font-size: 1.3rem;
        color: var(--primary-yellow);
    }

    /* Скрываем декоративные элементы ПК */
    .game-side-wrapper {
        display: none !important;
    }

    /* Дашборд */
    .welcome-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }

    .profile-header {
        flex-direction: column;
    }

    .profile-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* --- FULLSCREEN MOBILE MENU (PREMIUM) --- */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .mobile-nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-overlay {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #060b08 0%, #0a1510 50%, #060b08 100%);
        z-index: 100000;
        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 0;
        overflow-y: auto;
        border: none;
        box-shadow: none;
    }

    .mobile-nav-overlay.active {
        transform: translateX(0);
    }

    /* Header bar */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(0, 255, 157, 0.08);
    }

    .mobile-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: all 0.2s ease;
        color: #fff;
        font-size: 1.1rem;
    }

    .mobile-close-btn:active {
        background: rgba(255, 77, 77, 0.15);
        border-color: rgba(255, 77, 77, 0.3);
        color: #ff6b6b;
    }

    /* Links container */
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 6px;
        flex: 1;
    }

    /* Individual nav link */
    .mobile-nav-link {
        display: flex !important;
        align-items: center;
        gap: 16px;
        color: #c8d6d0 !important;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        padding: 16px 18px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        transition: all 0.25s ease;
    }

    .mobile-nav-link:active {
        background: rgba(0, 255, 157, 0.06);
        border-color: rgba(0, 255, 157, 0.12);
        color: #fff !important;
        transform: scale(0.98);
    }

    /* Icon container */
    .mobile-nav-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #8fa89e;
        flex-shrink: 0;
        transition: all 0.25s ease;
    }

    .mobile-nav-link:active .mobile-nav-icon {
        background: rgba(0, 255, 157, 0.1);
        border-color: rgba(0, 255, 157, 0.2);
        color: #00ff9d;
    }

    /* Accent link (Coinflip) */
    .mobile-nav-link-accent {
        color: #00ff9d !important;
        border-color: rgba(0, 255, 157, 0.1);
        background: rgba(0, 255, 157, 0.03);
    }

    .mobile-nav-icon.accent {
        background: rgba(0, 255, 157, 0.1);
        border-color: rgba(0, 255, 157, 0.2);
        color: #00ff9d;
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
    }

    /* Chevron arrow */
    .mobile-nav-arrow {
        margin-left: auto;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.15);
        transition: 0.2s;
    }

    .mobile-nav-link:active .mobile-nav-arrow {
        color: rgba(0, 255, 157, 0.5);
        transform: translateX(3px);
    }

    /* Action buttons (Deposit / Withdraw) */
    .mobile-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .btn-mobile-action {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 20px 12px;
        text-align: center;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 1px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .btn-mobile-action .bi {
        font-size: 1.6rem;
    }

    .btn-mobile-action.deposit {
        color: #00ff9d;
        border-color: rgba(0, 255, 157, 0.2);
        background: rgba(0, 255, 157, 0.04);
    }

    .btn-mobile-action.deposit .bi {
        filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.4));
    }

    .btn-mobile-action.deposit:active {
        background: rgba(0, 255, 157, 0.1);
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    }

    .btn-mobile-action.withdraw {
        color: #00e5ff;
        border-color: rgba(0, 229, 255, 0.2);
        background: rgba(0, 229, 255, 0.04);
    }

    .btn-mobile-action.withdraw .bi {
        filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
    }

    .btn-mobile-action.withdraw:active {
        background: rgba(0, 229, 255, 0.1);
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
    }

    /* Logout button */
    .mobile-logout-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
        padding: 16px 18px;
        border-radius: 14px;
        background: rgba(255, 77, 77, 0.04);
        border: 1px solid rgba(255, 77, 77, 0.12);
        color: #ff6b6b;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .mobile-logout-btn:active {
        background: rgba(255, 77, 77, 0.12);
        border-color: rgba(255, 77, 77, 0.25);
    }

    .mobile-logout-user {
        margin-left: auto;
        font-size: 0.8rem;
        opacity: 0.6;
        font-weight: 600;
    }

    /* Login button */
    .mobile-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 32px;
        padding: 18px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(0, 255, 157, 0.12), rgba(0, 229, 255, 0.08));
        border: 1px solid rgba(0, 255, 157, 0.2);
        color: #00ff9d;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
    }

    .mobile-login-btn .bi {
        font-size: 1.3rem;
    }

    .mobile-login-btn:active {
        background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 229, 255, 0.15));
        box-shadow: 0 0 30px rgba(0, 255, 157, 0.12);
    }
}

/* =========================================
   1. FIX: COIN ICON (Вернули стиль)
   ========================================= */
.coin-icon {
    width: 20px;
    /* Чуть больше, чтобы было видно детали */
    height: 20px;
    object-fit: contain;
    display: block;
    /* Важно для картинки */
}


/* =========================================
   2. FIX: NOTIFICATIONS (TOAST STYLE)
   ========================================= */

/* Контейнер уведомлений (плавает справа сверху) */
.messages-container {
    position: fixed;
    top: 100px;
    /* Чуть ниже хедера */
    right: 30px;
    z-index: 10000;
    /* Поверх всех модалок */
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
    /* Чтобы пропускал клики сквозь пустоту */
}

/* Сама плашка сообщения */
.alert {
    pointer-events: auto;
    /* Чтобы можно было нажать крестик */
    background: rgba(15, 17, 16, 0.95);
    /* Темный фон */
    border: 1px solid #333;
    border-left-width: 5px;
    /* Цветная полоска слева */
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);

    /* Выравнивание текста и крестика */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    /* Анимация появления */
    animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: translateX(50px);
}

/* Цвета для разных типов сообщений */
.alert-success {
    border-left-color: var(--primary-green);
}

.alert-error {
    border-left-color: var(--primary-red);
}

.alert-warning {
    border-left-color: var(--primary-yellow);
}

.alert-info {
    border-left-color: var(--primary-cyan);
}

/* Кнопка закрытия (Крестик) */
.alert-close {
    background: transparent;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    border-radius: 4px;
    transition: 0.2s;
}

.alert-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Анимация появления */
@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Анимация исчезновения (добавляется JS-ом) */
.alert.hide {
    animation: fadeOut 0.4s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}


.pot-value {
    color: var(--primary-yellow);
    font-size: 1.5rem;
    font-weight: 800;
    margin-left: 5px;
    text-shadow: 0 0 10px rgba(255, 230, 0, 0.4);
}


/* --- HOVER EFFECT НА КАРТОЧКЕ (DASHBOARD) --- */
.dashboard-item-card {
    position: relative;
    overflow: hidden;
    /* Чтобы оверлей не вылезал */
}

/* Затемнение и кнопки (изначально скрыты) */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Сильное затемнение */
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5;
}

/* Показываем при наведении */
.dashboard-item-card:hover .item-overlay {
    opacity: 1;
}

/* Кнопки внутри оверлея */
.btn-item-action {
    width: 80%;
    padding: 10px 0;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    font-family: var(--font-main);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.btn-withdraw {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35),
               inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: none;
}

.btn-withdraw:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.55);
    color: #fff;
}

.btn-withdraw i {
    font-size: 0.8rem;
}

.btn-giveaway {
    background: rgba(168, 85, 247, 0.15);
    border: 1.5px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
    backdrop-filter: blur(4px);
}

.btn-giveaway:hover {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border-color: transparent;
    color: #fff;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 6px 25px rgba(168, 85, 247, 0.4);
}

.btn-giveaway i {
    font-size: 0.85rem;
}




/* SVG Иконка */
.success-icon-wrapper i {
    font-size: 80px;
    color: #00FF88;
    filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.5));
}

/* Заголовок */
.success-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #ffffff;
    margin: 0 0 15px;
    letter-spacing: 1px;
}

/* Описание */
.success-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #8899a6;
    /* Приглушенный текст */
    margin: 0 0 30px;
    line-height: 1.5;
}

/* === ОБНОВЛЕННАЯ КНОПКА "JOIN BOT" (Яркий Металл -> Циан) === */
.btn-ice-join {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 50px;
    border-radius: 20px;
    background: linear-gradient(135deg,
            rgba(140, 236, 188, 0.71) 0%,
            /* Ярковатый металлик */
            rgba(132, 232, 109, 0.8) 100%
            /* Яркий циан (зеленый + голубой) */
        );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Свечение: Холодный циан + внутренний металлический блик */
    box-shadow:
        0 5px 25px rgba(0, 235, 215, 0.25),
        inset 0 0 15px rgba(255, 255, 255, 0.15);

    transition: all 0.3s ease;
}

/* Ховер эффект */
.btn-ice-join:hover {
    transform: translateY(-3px);

    /* Градиент становится еще ярче и плотнее при наведении */
    background: linear-gradient(135deg,
            rgba(210, 225, 240, 0.6) 0%,
            /* Почти белый металл */
            rgba(50, 255, 235, 0.7) 100%
            /* Насыщенный неон-циан */
        );

    /* Рамка становится ярко-белой */
    border-color: rgba(255, 255, 255, 0.7);

    /* Мощное свечение */
    box-shadow:
        0 10px 40px rgba(0, 235, 215, 0.5),
        /* Широкое свечение циана */
        0 0 20px rgba(255, 255, 255, 0.4);
    /* Белый ореол */
}

/* Ссылка "Close" */


/* =========================================
   GAME CARD (FINAL POLISH)
   ========================================= */

.game-card {
    background: #151b1e;
    border-radius: 16px;
    padding: 15px 25px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #252a30;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-height: 100px;
    /* Чуть выше, так как предметы стали больше */
}

/* Полоска слева */
.game-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-cyan) 0%, var(--primary-green) 100%);
    box-shadow: 2px 0 15px rgba(0, 229, 255, 0.4);
}

/* --- ЛЕВАЯ ЧАСТЬ: ИГРОКИ --- */
.game-players-section {
    display: flex;
    align-items: center;
    gap: 25px;
    min-width: 220px;
}

.game-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
}

.game-avatar {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    /* Квадрат с мягкими углами */
    background: #0f1110;
    border: 2px solid #333;
    object-fit: cover;
    /* Картинка заполняет блок */
}

.game-bet-chip {
    position: absolute;
    bottom: -6px;
    right: -6px;
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid #151b1e;
    z-index: 2;
}

.game-vs-badge {
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 1.8rem;
    color: #3e4a59;
    transform: skew(-10deg);
}

/* --- ЦЕНТРАЛЬНАЯ ЧАСТЬ: ПРЕДМЕТЫ (БОЛЬШИЕ КРУГИ) --- */
.game-items-section {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.game-items-section::-webkit-scrollbar {
    display: none;
}

/* КРУГ ПРЕДМЕТА */
.game-item-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #1a2522 0%, #050a08 100%);
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

/* КАРТИНКА ВНУТРИ КРУГА */
.game-item-img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 50%;
}

.game-items-count {
    background: #1a1d20;
    color: #7a8490;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid #2a2e33;
}


.room-price-label {
    font-size: 0.7rem;
    color: #5c6b7f;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
}

.room-price-val {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* CANCEL BUTTON (АККУРАТНАЯ КРАСНАЯ) */
.cancel-btn-compact {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    font-family: var(--font-main);
    font-weight: 700;
    padding: 10px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    width: 100%;
    text-transform: uppercase;
    transition: 0.2s;
}


.cancel-btn-compact:hover {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
}

/* =========================================
   7. COINFLIP SPECIFIC (UPDATED)
   ========================================= */
.cf-container {
    display: flex;
    gap: 30px;
    max-width: 1500px;
    margin: 40px auto;
    padding: 0 60px;
    width: 100%;
    min-height: 85vh;
}

/* Left Column */
.inventory-box {
    flex: 1;
    min-height: 750px;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    max-width: 380px;
}

.inventory-list {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
    max-height: 600px;
}

.inventory-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: auto;
}

/* Right Column */
.games-box {
    flex: 3;
    display: flex;
    flex-direction: column;
    /* ФОН ПОД СПИСКОМ ИГР */
    background: rgba(8, 17, 13, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    /* Внутренний отступ */
    height: 100%;
}

.games-list {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Уменьшил расстояние между играми */
}

/* КАРТОЧКА ИГРЫ (БЕЗ ПОЛОСКИ СЛЕВА) */
.game-card {
    background: #151b1e;
    border-radius: 12px;
    padding: 12px 20px;
    /* Чуть компактнее */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #252a30;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-height: 85px;
}

/* УБРАЛ ПОЛОСКУ ::before */
.game-card::before {
    display: none;
}

.game-card:hover {
    background: #1a2225;
    border-color: #3a4b55;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Аватарки в игре */
.game-players-section {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 200px;
}

.game-avatar-wrapper {
    position: relative;
    width: 49px;
    height: 49px;
}

.game-avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #0f1110;
    border: 2px solid #333;
    object-fit: cover;
}

.game-bet-chip {
    position: absolute;
    bottom: -5px;
    right: -5px;
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
    border: 2px solid #151b1e;
    z-index: 2;
}

.game-vs-badge {
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 1.6rem;
    color: #3e4a59;
    transform: skew(-10deg);
}

/* Предметы */
.game-items-section {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

/* КРУГ ПРЕДМЕТА */
.game-item-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #1a2522 0%, #050a08 100%);
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.game-item-circle:hover {
    border-color: rgba(0, 229, 255, 0.4);
}

/* КАРТИНКА ВНУТРИ КРУГА */
.game-item-img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 50%;
}


.room-price-val {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ИНДИКАТОР СТОРОНЫ (ПЕРЕД КНОПКОЙ) */
.side-indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    margin-right: 15px;
    /* Отступ от кнопки */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.side-indicator.green {
    background: radial-gradient(circle, #00ff9d 0%, #004d33 100%);
    color: #051a12;
    border-color: #00ff9d;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
}

.side-indicator.yellow {
    background: radial-gradient(circle, #ffe600 0%, #665c00 100%);
    color: #1a1700;
    border-color: #ffe600;
    box-shadow: 0 0 15px rgba(255, 230, 0, 0.4);
}

/* =========================================
   NEW IMAGE INDICATORS
   ========================================= */

/* Картинка в списке игр */
.side-img-indicator {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    /* Чтобы не сплющило */
    margin-right: 15px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.side-img-indicator:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}


/* Картинки в селекторе (Модалка) */
.coin-selector-group {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 0 20px;
    /* Отступ от текста */
}

.coin-label {
    cursor: pointer;
    position: relative;
}

/* Скрываем радио-кнопку */
.coin-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.coin-img-select {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    /* Рамка для выделения */
    opacity: 0.5;
    /* По умолчанию тусклые */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: grayscale(80%);
}

/* Стиль ВЫБРАННОЙ монеты */
.coin-label input:checked+.coin-img-select {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    border-color: var(--primary-cyan);
    /* Подсветка активной */
}

.coin-label:hover .coin-img-select {
    opacity: 0.8;
    transform: translateY(-3px);
}

/* --- МОНЕТКА СТОРОНЫ (НОВЫЙ БЛОК) --- */
.game-side-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    /* Отступ до вертикальной линии */
    height: 100%;
}

.side-img-indicator {
    width: 50px;
    /* Чуть больше */
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    border: 2px solid rgba(255, 255, 255, 0.1);

    /* Вертикальное выравнивание */
    margin-top: 4px;
    /* "чуть ниже", как ты просил */
}


.room-price-label {
    font-size: 0.65rem;
    color: #5c6b7f;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}


/* =========================================
   UPDATED GAME CARD RIGHT SIDE
   ========================================= */

/* --- МОНЕТКА СТОРОНЫ (НОВЫЙ БЛОК) --- */
.game-side-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Добавляем воздух вокруг монетки */
    padding-left: 15px;
    padding-right: 35px;
    /* Отодвигаем от вертикальной линии справа */
    height: 100%;
}

.side-img-indicator {
    width: 60px;
    /* СДЕЛАЛ КРУПНЕЕ */
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    /* Тень посильнее */
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: 0.3s;
}

.side-img-indicator:hover {
    transform: scale(1.1) rotate(10deg);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

/* --- ПРАВАЯ ЧАСТЬ: ДЕЙСТВИЯ --- */
.game-actions-section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* ВАЖНО: Отступ между Ценой и Кнопкой */
    gap: 15px;

    min-width: 160px;
    /* Чуть расширил сам блок */

    /* ВАЖНО: Отступы внутри плашки */
    padding-left: 35px;
    /* Отодвигаем от линии разделителя */
    padding-right: 10px;
    /* Отодвигаем от правого края карточки */
    padding-top: 5px;
    padding-bottom: 5px;

    border-left: 2px solid #2a353b;
    height: auto;
    /* Высота авто, чтобы влезли отступы */
}

.room-price-label {
    font-size: 0.7rem;
    color: #5c6b7f;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Чуть разрядил буквы */
    margin-bottom: 4px;
}

.room-price-val {
    font-size: 1.1rem;
    /* Цену чуть крупнее */
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Кнопки */
.join-btn-compact,
.cancel-btn-compact {
    width: 130px;
    /* Сделал кнопку чуть шире */
    font-size: 0.85rem;
}

.side-img-indicator {
    height: 80px;
    width: 80px;
}

/* Маленькая монета на аватаре (вместо P1/P2) */
.game-avatar-coin {
    position: absolute;
    bottom: -12px;
    /* Чуть вылезает за край */
    right: -12px;
    width: 32px;
    /* Размер иконки */
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border: 2px solid #151b1e;
    /* Обводка цветом фона карточки, чтобы не сливалось */
    z-index: 2;
    background: #000;
    /* Подложка на всякий случай */
}

.home-coin {
    height: 28px;
    width: 28px;
}

/* =========================================
   10. MEDIA QUERIES (MOBILE ULTIMATE)
   ========================================= */

/* Скрываем мобильное меню на ПК */
.mobile-nav-overlay {
    display: none;
}

.mobile-nav-backdrop {
    display: none;
}


/* =========================================
   10. MEDIA QUERIES (MOBILE FIXED)
   ========================================= *
 */


@media (max-width: 1024px) {

    /* --- ГЛАВНЫЕ ОТСТУПЫ --- */
    .cf-container,
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .messages-container {
        padding: 0 15px;
    }

    /* --- ХЕДЕР И НАВИГАЦИЯ --- */
    .nav {
        padding: 0 20px !important;
        justify-content: space-between;
        height: 70px;
    }

    .nav-links,
    .header .header-user-info,
    .header .btn-login,
    .desktop-auth {
        display: none !important;
    }

    /* --- BURGER MENU (PREMIUM REDESIGN) --- */
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 38px;
        height: 38px;
        margin-left: auto;
        gap: 5px;
        cursor: pointer;
        z-index: 10002;
        padding: 4px;
        border-radius: 8px;
        transition: background 0.3s ease;
    }

    .burger-menu:hover {
        background: rgba(0, 255, 157, 0.06);
    }

    .burger-bar {
        height: 2.5px;
        background: linear-gradient(90deg, #00ff9d, #00e5ff);
        border-radius: 4px;
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        transform-origin: center;
        box-shadow: 0 0 8px rgba(0, 255, 157, 0.3);
    }

    /* Staggered bar widths for style */
    .burger-bar:nth-child(1) {
        width: 100%;
        transition-delay: 0s;
    }

    .burger-bar:nth-child(2) {
        width: 70%;
        transition-delay: 0.05s;
    }

    .burger-bar:nth-child(3) {
        width: 85%;
        transition-delay: 0.1s;
    }

    /* Hover: all bars become full width */
    .burger-menu:hover .burger-bar {
        width: 100%;
        box-shadow: 0 0 12px rgba(0, 255, 157, 0.5);
    }

    /* Active: X animation */
    .burger-menu.active .burger-bar:nth-child(1) {
        width: 100%;
        transform: translateY(7.5px) rotate(45deg);
        background: linear-gradient(90deg, #ff4d4d, #ff6b6b);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
    }

    .burger-menu.active .burger-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .burger-menu.active .burger-bar:nth-child(3) {
        width: 100%;
        transform: translateY(-7.5px) rotate(-45deg);
        background: linear-gradient(90deg, #ff4d4d, #ff6b6b);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
    }

    /* --- FULLSCREEN MOBILE MENU (PREMIUM) --- */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .mobile-nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-overlay {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #060b08 0%, #0a1510 50%, #060b08 100%);
        z-index: 100000;
        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 0;
        overflow-y: auto;
        border: none;
        box-shadow: none;
    }

    .mobile-nav-overlay.active {
        transform: translateX(0);
    }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(0, 255, 157, 0.08);
    }

    .mobile-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: all 0.2s ease;
        color: #fff;
        font-size: 1.1rem;
    }

    .mobile-close-btn:active {
        background: rgba(255, 77, 77, 0.15);
        border-color: rgba(255, 77, 77, 0.3);
        color: #ff6b6b;
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 6px;
        flex: 1;
    }

    .mobile-nav-link {
        display: flex !important;
        align-items: center;
        gap: 16px;
        color: #c8d6d0 !important;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        padding: 16px 18px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        transition: all 0.25s ease;
    }

    .mobile-nav-link:active {
        background: rgba(0, 255, 157, 0.06);
        border-color: rgba(0, 255, 157, 0.12);
        color: #fff !important;
        transform: scale(0.98);
    }

    .mobile-nav-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #8fa89e;
        flex-shrink: 0;
        transition: all 0.25s ease;
    }

    .mobile-nav-link:active .mobile-nav-icon {
        background: rgba(0, 255, 157, 0.1);
        border-color: rgba(0, 255, 157, 0.2);
        color: #00ff9d;
    }

    .mobile-nav-link-accent {
        color: #00ff9d !important;
        border-color: rgba(0, 255, 157, 0.1);
        background: rgba(0, 255, 157, 0.03);
    }

    .mobile-nav-icon.accent {
        background: rgba(0, 255, 157, 0.1);
        border-color: rgba(0, 255, 157, 0.2);
        color: #00ff9d;
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
    }

    .mobile-nav-arrow {
        margin-left: auto;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.15);
        transition: 0.2s;
    }

    .mobile-nav-link:active .mobile-nav-arrow {
        color: rgba(0, 255, 157, 0.5);
        transform: translateX(3px);
    }

    .mobile-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .btn-mobile-action {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 20px 12px;
        text-align: center;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 1px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .btn-mobile-action .bi {
        font-size: 1.6rem;
    }

    .btn-mobile-action.deposit {
        color: #00ff9d;
        border-color: rgba(0, 255, 157, 0.2);
        background: rgba(0, 255, 157, 0.04);
    }

    .btn-mobile-action.deposit .bi {
        filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.4));
    }

    .btn-mobile-action.deposit:active {
        background: rgba(0, 255, 157, 0.1);
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    }

    .btn-mobile-action.withdraw {
        color: #00e5ff;
        border-color: rgba(0, 229, 255, 0.2);
        background: rgba(0, 229, 255, 0.04);
    }

    .btn-mobile-action.withdraw .bi {
        filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
    }

    .btn-mobile-action.withdraw:active {
        background: rgba(0, 229, 255, 0.1);
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
    }

    .mobile-logout-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
        padding: 16px 18px;
        border-radius: 14px;
        background: rgba(255, 77, 77, 0.04);
        border: 1px solid rgba(255, 77, 77, 0.12);
        color: #ff6b6b;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .mobile-logout-btn:active {
        background: rgba(255, 77, 77, 0.12);
        border-color: rgba(255, 77, 77, 0.25);
    }

    .mobile-logout-user {
        margin-left: auto;
        font-size: 0.8rem;
        opacity: 0.6;
        font-weight: 600;
    }

    .mobile-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 32px;
        padding: 18px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(0, 255, 157, 0.12), rgba(0, 229, 255, 0.08));
        border: 1px solid rgba(0, 255, 157, 0.2);
        color: #00ff9d;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.05);
    }

    .mobile-login-btn .bi {
        font-size: 1.3rem;
    }

    .mobile-login-btn:active {
        background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 229, 255, 0.15));
        box-shadow: 0 0 30px rgba(0, 255, 157, 0.12);
    }

    /* --- ВЕРХНЯЯ ПАНЕЛЬ (CREATE GAME) --- */
    .cf-header-bar {
        flex-direction: column;
        gap: 12px;
        padding: 16px 12px;
    }

    .cf-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .cf-stat-card {
        padding: 8px 10px;
        gap: 6px;
        min-width: unset;
    }

    .cf-stat-card-wide {
        min-width: unset;
    }

    .cf-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
    }

    .cf-stat-value {
        font-size: 0.9rem;
    }

    .cf-stat-label {
        font-size: 0.5rem;
        flex-wrap: wrap;
    }

    .cf-header-bar .btn-place-bet {
        width: 100%;
    }

    .cf-header-bar .btn-login {
        width: 100%;
        text-align: center;
    }

    /* --- COINFLIP СТРАНИЦА --- */
    .cf-container {
        flex-direction: column;
        gap: 25px;
    }

    .inventory-box {
        min-height: auto;
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }

    /* Сетка инвентаря */
    .inventory-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        max-height: 350px;
    }

    .item-card-label {
        height: 130px;
        padding: 8px;
    }

    .item-img-container {
        height: 60px;
    }

    /* =========================================
       FIX: КАРТОЧКА ИГРЫ (АДАПТАЦИЯ)
       ========================================= */
    .game-card {
        flex-direction: column;
        align-items: center;
        padding: 15px;
        gap: 12px;
        height: auto;
    }

    .game-card::before {
        display: none;
    }

    /* 1. ИГРОКИ - ДЕЛАЕМ ИКОНКИ БОЛЬШЕ */
    .game-players-section {
        width: 100%;
        justify-content: center;
        gap: 20px;
        /* Больше воздуха между игроками */
        margin-bottom: 5px;
        flex-direction: row;
        align-items: center;
    }

    .game-avatar-wrapper {
        width: 60px;
        /* БЫЛО МЕНЬШЕ, СТАЛО БОЛЬШЕ */
        height: 60px;
    }

    .game-avatar {
        border-radius: 14px;
    }

    .game-vs-badge {
        font-size: 1.5rem;
    }

    /* 2. ПРЕДМЕТЫ - ДЕЛАЕМ ИКОНКИ МЕНЬШЕ */
    .game-items-section {
        padding: 0;
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
        gap: 4px;
    }

    .game-item-circle {
        width: 44px;
        /* БЫЛО 50, СТАЛО МЕНЬШЕ */
        height: 44px;
    }

    .game-item-img {
        transform: scale(0.9);
    }

    /* 3. НИЖНЯЯ ЧАСТЬ - ЦЕНА И КНОПКА В РЯД */
    .game-actions-section {
        width: 100%;
        border-left: none;
        padding: 0 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .room-price-label {
        display: none;
    }

    .room-price-val {
        font-size: 1.3rem;
        margin-top: 15px;
        color: var(--primary-yellow);
    }

    /* КНОПКИ ПО ЦЕНТРУ И ШИРЕ НА МОБИЛКЕ */
    .join-btn-compact,
    .cancel-btn-compact {
        width: 100% !important;
        max-width: 280px;
        font-size: 0.95rem;
        margin-top: 8px;
        padding: 14px 0;
    }

    .game-actions-section>div[style] {
        justify-content: center !important;
        width: 100%;
    }

    .cancel-btn-compact-form {
        width: 100%;
        max-width: 280px;
    }

    .game-side-wrapper {
        display: none !important;
    }

    /* Дашборд */
    .welcome-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }

    .profile-header {
        flex-direction: column;
    }

    .profile-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}



.cancel-btn-compact-form,
.join-container {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ АНИМАЦИИ (ОБНОВЛЕНИЕ) --- */

/* Увеличиваем контейнер монеты и ставим по центру */
.coin-container {
    width: 300px !important;
    /* Было 200 */
    height: 300px !important;
    /* Было 200 */
    margin: 0 auto 40px auto !important;
    /* Центрирование + отступ */
    perspective: 1200px;
}

/* Сама монета */
.coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Замедлил анимацию до 6 секунд и сделал super-smooth */
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Стороны монеты */
.side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    /* Чтобы не видеть изнанку */
    /* Тень стала больше */
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.7);
    border: none !important;
}

/* Сторона А (Перед) */
.side-a {
    transform: rotateX(0deg);
    /* Вращение через ВЕРХ (X) */
    z-index: 2;
}

/* Сторона Б (Зад) */
.side-b {
    transform: rotateX(180deg);
    /* Вращение через ВЕРХ (X) */
    z-index: 1;
}

/* Результаты (Без черного фона) */

/* =========================================
   FIXES (ДОБАВИТЬ В КОНЕЦ ФАЙЛА)
   ========================================= */

/* Класс для маленькой аватарки в меню */
.header-avatar-small {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* =========================================
   !!! HEADER FINAL FIX (GRID LAYOUT) !!!
   ========================================= */

/* Используем GRID вместо Flex для идеального центрирования */
.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 32px;
    align-items: center;
    padding: 0 40px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
}

/* Логотип прижимаем влево */
.logo {
    justify-self: start;
}

/* Ссылки прижимаем по центру */
.nav-links {
    justify-self: center;
    position: static;
    transform: none;
    display: flex;
    gap: 6px;
}

/* Авторизацию/Профиль прижимаем вправо */
.desktop-auth {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* Promote breakpoint earlier so squeezed nav collapses to burger before overlap */
@media (max-width: 1200px) {
    .nav-links { gap: 2px; }
    .nav-link { padding: 9px 10px; font-size: 0.78rem; letter-spacing: 0.8px; }
    .nav-link i { font-size: 0.92rem; }
    .desktop-auth { gap: 8px; }
}

/* Фикс для блока с аватаркой */
.header-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 5px 15px 5px 5px;
    /* Отступы внутри капсулы */
    border-radius: 50px;
    white-space: nowrap;
    /* Чтобы ник не переносился */
}

/* Сама аватарка в хедере */
.header-avatar-small {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-cyan);
    background-color: #000;
    /* Фон, если картинка прозрачная */
}

/* Бургер (для мобил) скрываем на ПК */
.burger-menu {
    display: none;
    justify-self: end;
}

/* АДАПТИВ ДЛЯ ЭТОГО ГРИДА */
@media (max-width: 1080px) {
    .nav {
        display: flex;
        justify-content: space-between;
    }

    .nav-links,
    .desktop-auth {
        display: none;
    }

    .burger-menu {
        display: flex;
    }
}

/* === GLOBAL FLIP OVERLAY === */
.flip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Glassmorphism backdrop */
    background:
        radial-gradient(ellipse at 50% 30%, rgba(140, 200, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(0, 255, 157, 0.02) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 77, 77, 0.015) 0%, transparent 40%),
        rgba(4, 8, 12, 0.72);
    backdrop-filter: blur(24px) saturate(1.6) brightness(0.85);
    -webkit-backdrop-filter: blur(24px) saturate(1.6) brightness(0.85);

    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
    flex-direction: column;
}

/* Subtle grid texture */
.flip-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Vignette */
.flip-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Класс для показа */
.flip-overlay.active {
    opacity: 1;
    visibility: visible;
}

.coin-container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    /* Эффект 3D */
    margin-bottom: 50px;
}

.coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Важно для 3D */
    /* transition добавляется через JS */
}

.side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Скрываем заднюю часть */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* СТОРОНА A (Green) - Лицевая */
.side-a {
    transform: rotateX(0deg);
}

/* СТОРОНА B (Yellow) - Задняя */
.side-b {
    transform: rotateX(180deg);
}



/* ========================================= */
/* ЭФФЕКТ СНЕГА (SNOWFALL) */
/* ========================================= */


@keyframes fall {
    0% {
        transform: translateY(-10vh) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        /* translateY(110vh) -> падает вниз */
        /* translateX(-25vw) -> летит ВЛЕВО на четверть экрана (ветер справа) */
        transform: translateY(110vh) translateX(-25vw);
        opacity: 0.2;
    }
}

/* ========================================= */
/* ИСПРАВЛЕНИЕ СНЕГА И КОНТРОЛЛЕР */
/* ========================================= */

.snowflake {
    /* БЫЛО: 9999. СТАЛО: 50. */
    /* Это выше фона, но НИЖЕ модалок и меню */
    z-index: 50 !important;
    pointer-events: none;
    /* Остальные стили оставляем как были */
    position: fixed;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear forwards;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* Кнопка-иконка — стили перенесены в основной блок snow dropdown */

/* Стилизация ползунка (Range Input) */
input[type=range].snow-range {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range].snow-range:focus {
    outline: none;
}

/* Дорожка */
input[type=range].snow-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #333;
    border-radius: 3px;
}

/* Ползунок */
input[type=range].snow-range::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--primary-green);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
    /* центрирование */
    box-shadow: 0 0 10px var(--primary-green);
}

/* ========================================= */
/* СТИЛИЗАЦИЯ СТАТИСТИКИ (ACTIVE GAMES / VALUE) */
/* ========================================= */

.cf-stats {
    display: flex;
    gap: 20px;
    /* Расстояние между плашками */
}

.cf-stat-item {
    position: relative;
    /* Важно для позиционирования шапки */

    /* Делаем "Стеклянный" темно-зеленый фон */
    background: linear-gradient(180deg, rgba(20, 40, 30, 0.6) 0%, rgba(5, 15, 10, 0.8) 100%) !important;
    backdrop-filter: blur(5px);

    /* Тонкая рамка */
    border: 1px solid rgba(0, 255, 157, 0.15) !important;
    border-radius: 12px;

    padding: 10px 20px;
    min-width: 140px;
    /* Минимальная ширина для красоты */

    /* Выравнивание текста */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Тень */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Эффект при наведении */
.cf-stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 157, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.15);
}

/* Текст заголовка (ACTIVE GAMES) */
.cf-stat-item span {
    font-size: 0.65rem !important;
    color: #8fa396 !important;
    /* Приглушенный серо-зеленый */
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 2px;
    text-shadow: none !important;
}

/* Значение (Цифры) */
.cf-stat-item strong {
    font-size: 1.1rem !important;
    margin: 0 !important;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* ========================================= */
/* ШАПКА САНТЫ (ВСТРОЕННАЯ) */
/* ========================================= */

.cf-stat-item::before {
    content: '';
    position: absolute;

    /* Позиция: Сверху слева, чуть свисает */
    top: -14px;
    left: -10px;

    /* Размер */
    width: 28px;
    height: 28px;

    /* Картинка шапки */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEV0lEQVR4nO2ZW2gcVRjHf2dmN5tstk3TapO0VktrmxQRSxU84EWEIipSUNGH2hfpk4IoCgYfFMSHIn0QxEfRgoJQsA9F8UIRjFdt0tZEY9M2u5t2s5tkd2Z8mNndZO9sZne6C/4f9sDMe875z///zVwGChQoUKBAwVggW0GgJtXG3tq+yR7jQ8ANoBaIfy6iW1+M/gT8BDwKTA5XN0xH4tH5yZz7RBDoiTe80m');
    /* Укороченная версия для примера, полная будет работать */
    background-image: url('https://cdn-icons-png.flaticon.com/512/744/744546.png');
    /* Используем надежную внешнюю ссылку для стабильности, либо твой файл */

    background-size: contain;
    background-repeat: no-repeat;

    /* Наклон шапки */
    transform: rotate(-25deg);

    /* === ФИЛЬТР ДЛЯ АТМОСФЕРЫ === */
    /* Делаем шапку темнее и чуть менее насыщенной, чтобы она не "кричала" красным */
    filter: brightness(0.7) sepia(0.2) saturate(0.8) drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));

    z-index: 2;
    /* Поверх блока */
    pointer-events: none;
}

/* Для второй плашки (YOUR VALUE) можно наклонить шапку в другую сторону для разнообразия */
.cf-stat-item:nth-child(2)::before {
    left: auto;
    right: -8px;
    /* Справа */
    transform: rotate(15deg) scaleX(-1);
    /* Отразить зеркально */
}

/* Блок "SELECTED" */
.selection-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.selection-info .text-muted {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555 !important;
}

.selection-info #modal-selected-sum {
    font-size: 1.05rem !important;
    text-shadow: none;
}

/* --- ВЫБОР МОНЕТЫ (ГЛОУ ЭФФЕКТ) --- */
.coin-selector-group {
    margin: 0 !important;
    gap: 20px !important;
}

/* Сама картинка монеты */
.coin-img-select {
    width: 55px !important;
    height: 55px !important;
    border: 2px solid transparent;
    opacity: 0.4;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: grayscale(100%);
}

/* Активная монета (КОГДА ВЫБРАНА) */
.coin-label input:checked+.coin-img-select {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: scale(1.2) !important;

    /* МОЩНЫЙ ГЛОУ, КАК ТЫ ПРОСИЛ */
    border-color: #fff !important;
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.6),
        inset 0 0 15px rgba(0, 255, 157, 0.4) !important;
}





/* ========================================= */
/* FIX: КНОПКА CREATE + МЕДЛЕННАЯ СНЕЖИНКА */
/* ========================================= */

.btn-place-bet {
    /* Самое важное: делаем кнопку "Родителем" для снежинки */
    position: relative !important;
    display: inline-flex !important;
    /* Чтобы размеры считались корректно */
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible !important;
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    letter-spacing: 1px;
    border: 2px solid rgba(0, 255, 157, 0.3) !important;
    border-radius: 12px !important;
    padding: 15px 40px !important;
    /* Чуть больше места */
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4) !important;
    transition: transform 0.3s ease !important;
    z-index: 10;
}

/* Ховер эффект */
.btn-place-bet:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.35) !important;
}


/* =================================================================
   ФИНАЛЬНЫЙ ФИКС КНОПКИ CREATE (ВСТАВИТЬ В САМЫЙ КОНЕЦ ФАЙЛА)
   Перекрывает все предыдущие дубликаты и убирает зеленый цвет.
   ================================================================= */

/* 1. Сначала объявляем анимацию (чтобы она была видна) */
@keyframes flowBlueGradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* 2. Стили самой кнопки (Принудительно синие) */
#modalActionBtn {
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    width: auto !important;
    min-width: 190px !important;
    height: 52px !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
    margin-left: auto !important;
}

/* 3. Эффект при наведении (ПЕРЕКРЫВАЕМ ЗЕЛЕНЫЙ) */
#modalActionBtn:not(:disabled):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
}

/* 4. Отключенная кнопка (Серый цвет) */
#modalActionBtn:disabled {
    color: #555 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    animation: none !important;
}

/* =========================================
   АНИМАЦИИ ДЛЯ СПИСКА ИГР (REAL-TIME)
   ========================================= */

/* Анимация появления новой игры (Выезжает сверху + прозрачность) */
@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        margin-bottom: -85px;
        /* Чтобы раздвинуть список плавно */
    }

    50% {
        opacity: 0.5;
        margin-bottom: 10px;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        margin-bottom: 10px;
    }
}

.new-game-anim {
    animation: slideDownFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Анимация удаления (Исчезает и схлопывается) */
.game-card.removing {
    transition: all 0.4s ease;
    opacity: 0;
    transform: scale(0.9);
    margin-bottom: -100px;
    /* Схлопываем место */
    padding: 0;
    border: none;
    overflow: hidden;
    pointer-events: none;
}

/* =================================================================
   FLIP RESULT BOX — PREMIUM MODAL (Win / Lose)
   ================================================================= */

.flip-result-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.88) !important;

    /* ── Deep Glassmorphism ── */
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
        linear-gradient(170deg,
            rgba(18, 22, 28, 0.68) 0%,
            rgba(12, 14, 20, 0.82) 50%,
            rgba(6, 8, 14, 0.92) 100%
        ) !important;
    backdrop-filter: blur(80px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(80px) saturate(2) brightness(1.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 28px !important;

    padding: 48px 64px 44px !important;
    min-width: 500px !important;
    max-width: 540px !important;
    text-align: center !important;

    box-shadow:
        0 50px 140px rgba(0, 0, 0, 0.7),
        0 10px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;

    z-index: 100000 !important;
    display: none;
    overflow: hidden !important;
}

/* ── Shimmer border light at top ── */
.flip-result-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.25) 70%,
        transparent);
    z-index: 2;
}

/* ── Ambient glow behind the box ── */
.flip-result-box::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* --- WIN variant --- */
.flip-result-box.result-win {
    border-color: rgba(0, 255, 157, 0.18) !important;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(0, 255, 157, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 180, 120, 0.04) 0%, transparent 40%),
        linear-gradient(170deg,
            rgba(10, 30, 22, 0.72) 0%,
            rgba(8, 18, 14, 0.85) 50%,
            rgba(5, 10, 8, 0.94) 100%
        ) !important;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(0, 255, 157, 0.07),
        0 0 200px rgba(0, 255, 157, 0.03),
        inset 0 1px 0 rgba(0, 255, 157, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.flip-result-box.result-win::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 255, 157, 0.2) 25%,
        rgba(0, 255, 200, 0.45) 50%,
        rgba(0, 255, 157, 0.2) 75%,
        transparent);
    animation: resultShimmerWin 2.5s ease-in-out infinite;
}

.flip-result-box.result-win::after {
    background: radial-gradient(circle, rgba(0, 255, 157, 0.08) 0%, transparent 65%);
}

.flip-result-box.result-win.show::after {
    opacity: 1;
    animation: resultAmbientPulse 3s ease-in-out infinite;
}

@keyframes resultShimmerWin {
    0%, 100% { opacity: 0.4; transform: translateX(-30%); }
    50% { opacity: 1; transform: translateX(30%); }
}

/* --- LOSE variant --- */
.flip-result-box.result-lose {
    border-color: rgba(255, 77, 77, 0.16) !important;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 77, 77, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(180, 50, 50, 0.03) 0%, transparent 40%),
        linear-gradient(170deg,
            rgba(30, 12, 12, 0.72) 0%,
            rgba(18, 10, 10, 0.85) 50%,
            rgba(12, 6, 6, 0.94) 100%
        ) !important;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(255, 77, 77, 0.05),
        0 0 200px rgba(255, 50, 50, 0.02),
        inset 0 1px 0 rgba(255, 77, 77, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.flip-result-box.result-lose::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 77, 77, 0.15) 25%,
        rgba(255, 100, 100, 0.35) 50%,
        rgba(255, 77, 77, 0.15) 75%,
        transparent);
    animation: resultShimmerLose 3s ease-in-out infinite;
}

.flip-result-box.result-lose::after {
    background: radial-gradient(circle, rgba(255, 77, 77, 0.06) 0%, transparent 65%);
}

.flip-result-box.result-lose.show::after {
    opacity: 1;
    animation: resultAmbientPulse 3.5s ease-in-out infinite;
}

@keyframes resultShimmerLose {
    0%, 100% { opacity: 0.3; transform: translateX(-30%); }
    50% { opacity: 0.9; transform: translateX(30%); }
}

@keyframes resultAmbientPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* === Show animation === */
.flip-result-box.show {
    display: block !important;
    animation: resultModalIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes resultModalIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.82);
        filter: blur(12px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    80% {
        transform: translate(-50%, -51%) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

/* === Icon (elevated glass circle) === */
.result-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 2rem;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Icon entrance animation */
.flip-result-box.show .result-icon {
    animation: resultIconDrop 0.6s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes resultIconDrop {
    0% {
        transform: scale(0.3) translateY(-30px) rotate(-15deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

/* Icon ring glow */
.result-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
}

.result-win .result-icon {
    background: linear-gradient(145deg, rgba(0, 255, 157, 0.18), rgba(0, 180, 100, 0.06));
    border: 1.5px solid rgba(0, 255, 157, 0.25);
    color: #00ff9d;
    box-shadow:
        0 8px 40px rgba(0, 255, 157, 0.18),
        0 0 60px rgba(0, 255, 157, 0.08);
}

.result-win .result-icon::before {
    background: conic-gradient(from 0deg, rgba(0, 255, 157, 0.2), transparent 30%, transparent 70%, rgba(0, 255, 157, 0.2));
    animation: resultRingSpin 6s linear infinite;
}

.result-lose .result-icon {
    background: linear-gradient(145deg, rgba(255, 77, 77, 0.18), rgba(200, 40, 40, 0.06));
    border: 1.5px solid rgba(255, 77, 77, 0.25);
    color: #ff4d4d;
    box-shadow:
        0 8px 40px rgba(255, 77, 77, 0.15),
        0 0 60px rgba(255, 77, 77, 0.06);
}

.result-lose .result-icon::before {
    background: conic-gradient(from 0deg, rgba(255, 77, 77, 0.15), transparent 30%, transparent 70%, rgba(255, 77, 77, 0.15));
    animation: resultRingSpin 8s linear infinite;
}

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

/* === Title === */
.result-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-bottom: 4px;
    line-height: 1;
    position: relative;
}

.flip-result-box.show .result-title {
    animation: resultTitleReveal 0.5s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultTitleReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
        letter-spacing: 20px;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 8px;
    }
}

.result-win .result-title {
    color: #00ff9d;
    text-shadow:
        0 0 40px rgba(0, 255, 157, 0.3),
        0 0 120px rgba(0, 255, 157, 0.1),
        0 2px 0 rgba(0, 60, 40, 0.4);
}

.result-lose .result-title {
    color: #ff4d4d;
    text-shadow:
        0 0 40px rgba(255, 77, 77, 0.25),
        0 0 120px rgba(255, 77, 77, 0.08),
        0 2px 0 rgba(80, 20, 20, 0.4);
}

/* === Subtitle === */
.result-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.flip-result-box.show .result-subtitle {
    animation: resultFadeUp 0.4s 0.45s ease both;
}

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

.result-win .result-subtitle {
    color: rgba(0, 255, 157, 0.5);
}

.result-lose .result-subtitle {
    color: rgba(255, 77, 77, 0.5);
}

/* === Bet row (elevated glass card) === */
.result-bet-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
    padding: 18px 36px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.result-bet-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.flip-result-box.show .result-bet-row {
    animation: resultFadeUp 0.4s 0.5s ease both;
}

.result-bet-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.result-bet-amount {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-bet-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.result-coin-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* === Hash (subtle glass block) === */
.result-hash {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Courier New', monospace;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    cursor: pointer;
    word-break: break-all;
    max-width: 100%;
    width: 100%;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block;
    line-height: 1.6;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.flip-result-box.show .result-hash {
    animation: resultFadeUp 0.35s 0.55s ease both;
}

.result-hash i {
    color: rgba(255, 255, 255, 0.2);
    margin-right: 6px;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.result-hash:hover {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.result-win .result-hash:hover {
    border-color: rgba(0, 255, 157, 0.18);
    box-shadow: 0 4px 24px rgba(0, 255, 157, 0.06), inset 0 1px 0 rgba(0, 255, 157, 0.05);
}

.result-win .result-hash:hover i {
    color: #00ff9d;
}

.result-lose .result-hash:hover {
    border-color: rgba(255, 77, 77, 0.18);
    box-shadow: 0 4px 24px rgba(255, 77, 77, 0.05), inset 0 1px 0 rgba(255, 77, 77, 0.05);
}

.result-lose .result-hash:hover i {
    color: #ff4d4d;
}

/* === Close button (premium glass) === */
.btn-close-flip {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    padding: 15px 56px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    backdrop-filter: blur(12px) !important;
    position: relative !important;
    overflow: hidden !important;
}

.flip-result-box.show .btn-close-flip {
    animation: resultFadeUp 0.35s 0.6s ease both;
}

.btn-close-flip::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.5s ease, height 0.5s ease !important;
    z-index: -1 !important;
}

.btn-close-flip:hover {
    transform: translateY(-2px) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-close-flip:hover::before {
    width: 350px !important;
    height: 350px !important;
}

.result-win .btn-close-flip:hover {
    background: rgba(0, 255, 157, 0.1) !important;
    border-color: rgba(0, 255, 157, 0.3) !important;
    color: #00ff9d !important;
    box-shadow:
        0 8px 36px rgba(0, 255, 157, 0.15),
        0 0 60px rgba(0, 255, 157, 0.05),
        inset 0 1px 0 rgba(0, 255, 157, 0.12) !important;
}

.result-win .btn-close-flip::before {
    background: rgba(0, 255, 157, 0.05) !important;
}

.result-lose .btn-close-flip:hover {
    background: rgba(255, 77, 77, 0.1) !important;
    border-color: rgba(255, 77, 77, 0.3) !important;
    color: #ff4d4d !important;
    box-shadow:
        0 8px 36px rgba(255, 77, 77, 0.12),
        0 0 60px rgba(255, 77, 77, 0.04),
        inset 0 1px 0 rgba(255, 77, 77, 0.1) !important;
}

.result-lose .btn-close-flip::before {
    background: rgba(255, 77, 77, 0.05) !important;
}

.btn-close-flip:active {
    transform: translateY(0) scale(0.97) !important;
}

/* === Mobile === */
@media (max-width: 520px) {
    .flip-result-box {
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        padding: 36px 24px 32px !important;
        border-radius: 28px !important;
    }

    .result-title {
        font-size: 2.1rem;
        letter-spacing: 5px;
    }

    .result-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }

    .result-bet-row {
        padding: 14px 22px;
        gap: 14px;
    }

    .result-bet-value {
        font-size: 1.6rem;
    }

    .result-hash {
        padding: 12px 16px;
        font-size: 0.62rem;
    }

    .btn-close-flip {
        padding: 13px 44px !important;
    }
}

/* =================================================================
   ITEMS VIEW MODAL (ОКНО ПРОСМОТРА ПРЕДМЕТОВ)
   Вставить в конец style.css
   ================================================================= */

/* 1. КУРСОР ДЛЯ КНОПКИ "+X" */
.game-items-count {
    cursor: pointer !important;
    transition: 0.2s ease !important;
}

.game-items-count:hover {
    background: #2a2e33 !important;
    color: #c0c8d0 !important;
    transform: scale(1.03);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
}

/* DEPOSIT ITEMS button in empty inventory */
.btn-deposit-gradient {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.12) 0%, rgba(0, 200, 120, 0.08) 100%) !important;
    border: 1px solid rgba(0, 255, 157, 0.25) !important;
    border-radius: 12px !important;
    color: #00ff9d !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.06), inset 0 1px 0 rgba(0, 255, 157, 0.08) !important;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.15) !important;
}

.btn-deposit-gradient:hover {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.18) 0%, rgba(0, 200, 120, 0.12) 100%) !important;
    border-color: rgba(0, 255, 157, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 157, 0.1) !important;
    transform: translateY(-2px) !important;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.2) !important;
}

/* 2. ОВЕРЛЕЙ (ФОН) */
.items-view-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 200000 !important;
    /* Поверх всего */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.items-view-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 3. САМО ОКНО */
.items-view-box {
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    background: #151b1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    transform: scale(0.9);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.items-view-overlay.active .items-view-box {
    transform: scale(1);
}

/* ХЕДЕР ОКНА */
.items-view-header {
    padding: 20px !important;
    background: #1a2225 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.items-view-header h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-family: 'Montserrat', sans-serif !important;
}

.items-view-close {
    cursor: pointer;
    font-size: 1.5rem;
    color: #666;
    transition: 0.2s;
}

.items-view-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* 4. СЕТКА ПРЕДМЕТОВ */
.items-view-grid {
    padding: 20px !important;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 15px;
    background: radial-gradient(circle at center, #121514 0%, #000 100%);
}

/* 5. КАРТОЧКА ПРЕДМЕТА ВНУТРИ ОКНА */
.view-item-card {
    background: #1e252b !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    position: relative;
}

.view-item-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-cyan) !important;
    background: #252e35 !important;
}

.view-item-img-box {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.view-item-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
}

.view-item-name {
    font-size: 0.7rem !important;
    color: #ccc !important;
    font-weight: 700 !important;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-item-val {
    font-size: 0.9rem !important;
    color: #fff !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =================================================================
   DELETE CONFIRMATION MODAL (КРАСИВОЕ ОКНО УДАЛЕНИЯ)
   ================================================================= */

/* Оверлей (Фон) */
.delete-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 5, 5, 0.9) !important;
    /* Очень темный красный оттенок */
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    /* Поверх всего */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.delete-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Само окно */
.delete-box {
    background: rgba(20, 10, 10, 0.8) !important;
    border: 1px solid rgba(255, 77, 77, 0.3) !important;
    /* Красная рамка */
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.1), inset 0 0 20px rgba(255, 0, 0, 0.05) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    text-align: center !important;
    width: 400px;
    max-width: 90%;
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.delete-overlay.active .delete-box {
    transform: scale(1);
}

/* Иконка и Текст */
.delete-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(255, 77, 77, 0.5));
}

.delete-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

.delete-desc {
    color: #aaa !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    font-weight: 500;
}

.text-red {
    color: #ff4d4d !important;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
}

/* Кнопки */
.delete-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-cancel-del {
    background: transparent !important;
    border: 2px solid #555 !important;
    color: #aaa !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Montserrat', sans-serif !important;
}

.btn-cancel-del:hover {
    border-color: #fff !important;
    color: #fff !important;
}

.btn-confirm-del {
    background: linear-gradient(135deg, #ff4d4d 0%, #cc0000 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3) !important;
}

.btn-confirm-del:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 77, 77, 0.5) !important;
}

/* =================================================================
   TIP CONFIRMATION MODAL (ЖЕЛТОЕ ОКНО ДОНАТА)
   ================================================================= */

/* Оверлей (Темный фон) */
.giveaway-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 5, 20, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.giveaway-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Само окно */
.giveaway-box {
    background: rgba(15, 10, 30, 0.9) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.15), inset 0 0 30px rgba(168, 85, 247, 0.05) !important;
    border-radius: 20px !important;
    padding: 45px 40px !important;
    text-align: center !important;
    width: 420px;
    max-width: 90%;
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.giveaway-overlay.active .giveaway-box {
    transform: scale(1);
}

/* Иконка */
.giveaway-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
    border: 2px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.giveaway-icon-wrap i {
    font-size: 2.2rem;
    color: #c084fc;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.6));
}

.giveaway-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    letter-spacing: 1px !important;
}

.giveaway-desc {
    color: #9ca3af !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    font-weight: 500;
}

.text-purple {
    color: #c084fc !important;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

/* Кнопки */
.giveaway-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-cancel-giveaway {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #9ca3af !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem;
}

.btn-cancel-giveaway:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.btn-confirm-giveaway {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.btn-confirm-giveaway:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(168, 85, 247, 0.55) !important;
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important;
}

/* =================================================================
   WITHDRAW CONFIRMATION MODAL
   ================================================================= */
.withdraw-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 12, 10, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.withdraw-overlay.active {
    opacity: 1;
    visibility: visible;
}

.withdraw-box {
    background: rgba(10, 18, 15, 0.92) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 0 60px rgba(16, 185, 129, 0.1), inset 0 0 30px rgba(16, 185, 129, 0.03) !important;
    border-radius: 20px !important;
    padding: 45px 40px !important;
    text-align: center !important;
    width: 420px;
    max-width: 90%;
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.withdraw-overlay.active .withdraw-box {
    transform: scale(1);
}

.withdraw-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.withdraw-icon-wrap i {
    font-size: 2.2rem;
    color: #34d399;
    filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6));
}

.withdraw-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    letter-spacing: 1px !important;
}

.withdraw-desc {
    color: #9ca3af !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    font-weight: 500;
}

.withdraw-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-cancel-withdraw {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #9ca3af !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem;
}

.btn-cancel-withdraw:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.btn-confirm-withdraw {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.btn-confirm-withdraw:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(16, 185, 129, 0.5) !important;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}

/* =================================================================
   EMPTY INVENTORY STATE (КРАСИВАЯ ЗАГЛУШКА)
   ================================================================= */

/* Контейнер на всю высоту */
.modal-inventory-grid:empty,
/* Если грид пустой (на всякий случай) */
.empty-inventory-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    /* Высота, чтобы было по центру */
    width: 100%;
    text-align: center;
    grid-column: 1 / -1;
    /* Растягиваем на всю ширину грида */
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Иконка (Рюкзак или Призрак) */
.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.2));
    /* Легкое свечение */
    opacity: 0.8;
    animation: floatIcon 3s ease-in-out infinite;
}

/* Анимация парения */

/* Заголовок */
.empty-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Описание */
.empty-desc {
    color: #6c7a89 !important;
    /* Приглушенный серо-голубой */
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    font-weight: 500;
}

/* Выделение цветом */
.empty-desc span {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* =================================================================
   FIX: EMPTY INVENTORY (СТИЛЬНАЯ ИКОНКА + ССЫЛКА)
   ================================================================= */

/* Стиль для новой SVG иконки */
.empty-icon-svg {
    width: 64px;
    height: 64px;
    color: #4a5a6a;
    /* Серый цвет линий */
    margin-bottom: 20px;
    opacity: 0.8;

    /* Анимация парения */
    animation: floatIcon 3s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Ссылка DEPOSIT */
.deposit-trigger {
    display: inline-block;
    margin-top: 8px;
    color: #00ff9d !important;
    /* Зеленый неон */
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    padding-bottom: 2px;
}

.deposit-trigger:hover {
    color: #fff !important;
    border-bottom-color: #00ff9d;
    text-shadow: 0 0 15px rgba(0, 255, 157, 0.6);
    transform: translateX(5px);
    /* Легкий сдвиг вправо при наведении */
}

/* =================================================================
   STYLES: DEPOSIT GRADIENT BUTTON
   ================================================================= */

/* Основной стиль кнопки */
.btn-deposit-gradient {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 35px;

    /* Зеленый градиент (Светлый -> Темный) */
    background: linear-gradient(135deg, #42e695 0%, #3bb2b8 100%);

    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    border-radius: 50px;
    /* Закругленные края */
    cursor: pointer;
    border: none;

    /* Тень (Свечение) */
    box-shadow: 0 10px 20px rgba(66, 230, 149, 0.3);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Эффект при наведении */
.btn-deposit-gradient:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(66, 230, 149, 0.5);
    background: linear-gradient(135deg, #5affb0 0%, #3bb2b8 100%);
    /* Чуть ярче */
}

/* Эффект нажатия */
.btn-deposit-gradient:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 5px 10px rgba(66, 230, 149, 0.4);
}

/* =================================================================
   FIX: Z-INDEX PRIORITY (ДЕЛАЕМ ОКНО ДЕПОЗИТА ГЛАВНЫМ)
   ================================================================= */

.bot-modal-overlay {
    /* Ставим число больше, чем у любого другого модального окна */
    z-index: 9999999 !important;
}

/* На всякий случай убедимся, что само окно внутри оверлея тоже имеет приоритет */
.bot-modal {
    position: relative;
    z-index: 10000000 !important;
}


/* =================================================================
   TOXIC FOREST AUTH MODAL (ULTIMATE ANIMATION)
   Вставить в конец style.css
   ================================================================= */

/* 1. ОВЕРЛЕЙ (ФОН) - Глубокий темно-зеленый */
.auth-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Темный фон с легким зеленым оттенком */
    background: rgba(2, 10, 5, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 200000 !important;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Анимация исчезновения (Закрытие) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, backdrop-filter 0.5s ease, visibility 0.5s;
}

.auth-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. МОДАЛЬНОЕ ОКНО (ЗЕЛЕНЫЙ МОНОЛИТ) */
.auth-box {
    width: 420px;
    max-width: 90%;
    padding: 45px 40px !important;
    position: relative;
    border-radius: 24px !important;
    font-family: 'Montserrat', sans-serif !important;

    /* ФОН: Глубокий черный градиент */
    background: linear-gradient(160deg, #0a110e 0%, #000000 100%) !important;

    /* РАМКИ: Неоновый зеленый свет */
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(0, 255, 157, 0.1),
        /* Внешнее свечение */
        inset 0 0 40px rgba(0, 255, 157, 0.05) !important;
    /* Внутреннее свечение */

    /* === НЕОБЫЧНАЯ АНИМАЦИЯ (3D FLIP + BLUR) === */
    /* Начальное состояние (Закрыто) */
    opacity: 0;
    transform: perspective(1000px) rotateX(10deg) scale(0.9) translateY(40px);
    filter: blur(10px);

    /* Плавный переход при закрытии */
    transition: all 0.4s cubic-bezier(0.32, 0, 0.67, 0);
}

/* Активное состояние (Открыто) */
.auth-overlay.active .auth-box {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) scale(1) translateY(0);
    filter: blur(0);

    /* Очень плавная пружина при открытии */
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Декоративная линия сверху */
.auth-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.8), transparent);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.8);
}

/* 3. ЗАГОЛОВОК (TOXIC GREEN) */
.auth-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    text-align: center;
    margin-bottom: 5px !important;
    text-transform: uppercase;
    letter-spacing: 2px;

    /* Зеленый градиент текста */
    background: linear-gradient(180deg, #ffffff 0%, #00ff9d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 15px rgba(0, 255, 157, 0.3));
}

.auth-box p {
    color: #5c7a6b !important;
    /* Болотный серый */
    font-size: 0.95rem !important;
    font-weight: 600;
}

/* 4. ИНПУТ (Темный с зеленой обводкой) */
.auth-input {
    width: 100%;
    background: rgba(0, 15, 10, 0.5) !important;
    border: 2px solid rgba(0, 255, 157, 0.15) !important;
    color: #fff !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    font-size: 1.1rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    outline: none;
    transition: 0.3s ease !important;
    margin-top: 20px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.auth-input:focus {
    border-color: #00ff9d !important;
    background: rgba(0, 255, 157, 0.05) !important;
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.15), inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

/* 5. КНОПКИ (ОСТАВЛЯЕМ СИНИМИ) */
/* Мы используем !important, чтобы перебить любые зеленые стили */
.auth-btn {
    width: 100%;
    margin-top: 25px;
    padding: 18px !important;
    border-radius: 14px !important;
    border: none !important;
    cursor: pointer;

    /* СИНИЙ ГРАДИЕНТ (Blue Gradient) */
    background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%) !important;

    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Синяя тень */
    box-shadow: 0 8px 25px rgba(0, 114, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-btn:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(0, 114, 255, 0.5) !important;
    filter: brightness(1.1);
}

.auth-btn svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    transition: 0.3s;
}

.auth-btn:hover svg {
    transform: translateX(6px);
}


/* 6. КОД (MATRIX STYLE) */
.code-display-wrapper {
    margin: 25px 0;
    position: relative;
    cursor: pointer;
}

.code-display {
    background: rgba(0, 255, 157, 0.05) !important;
    border: 1px dashed rgba(0, 255, 157, 0.4) !important;
    color: #00ff9d !important;
    /* Ядовито-зеленый */
    font-family: 'Courier New', monospace !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    text-align: center;
    padding: 22px !important;
    border-radius: 12px !important;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
    transition: 0.3s ease;
}

.code-display-wrapper:hover .code-display {
    background: rgba(0, 255, 157, 0.15) !important;
    border-color: #fff !important;
    color: #fff !important;
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
}

.copy-hint-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: rgba(0, 255, 157, 0.4);
    transition: 0.3s;
}

.code-display-wrapper:hover .copy-hint-icon {
    fill: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* 7. АВАТАРКА */
.auth-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 10px auto 25px auto;
    padding: 4px;
    /* Зеленая рамка-градиент */
    background: linear-gradient(135deg, #00ff9d, #004d33);
    box-shadow: 0 0 40px rgba(0, 255, 157, 0.3);
    animation: pulseGreen 3s infinite;
}

.auth-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #0a110e;
    background: #000;
}

@keyframes pulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(0, 255, 157, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 157, 0);
    }
}

/* 8. КНОПКА ЗАКРЫТИЯ */
.auth-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    z-index: 10;
}

.auth-close .bi {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.35);
    transition: 0.3s;
    line-height: 1;
}

.auth-close:hover {
    background: rgba(255, 77, 77, 0.12);
    transform: rotate(90deg);
}

.auth-close:hover .bi {
    color: #ff4d4d;
}

/* 9. АНИМАЦИЯ ШАГОВ (SLIDE IN) */
.auth-step {
    display: none;
    flex-direction: column;
}

.auth-step.active {
    display: flex;
    animation: slideInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Тексты ошибок и загрузки */
.auth-error {
    color: #ff5555 !important;
    text-shadow: 0 0 15px rgba(255, 85, 85, 0.4);
    font-weight: 700;
    text-align: center;
    margin-top: 15px;
}

.auth-loading {
    color: #00ff9d !important;
    text-align: center;
    margin-top: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    animation: blink 1s infinite;
}

.cancel-link {
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    color: #555;
    font-size: 0.85rem;
    font-weight: 700;
    transition: 0.3s;
    text-transform: uppercase;
}

.cancel-link:hover {
    color: #fff;
    letter-spacing: 1px;
}

/* Доп. стили текста */
.text-white-ice {
    color: #fff !important;
    font-size: 1.2rem;
}

.text-muted-ice {
    color: #6c8a7b !important;
}

/* =================================================================
   CHRISTMAS DASHBOARD RESKIN (WINTER PRO)
   Вставить в конец style.css
   ================================================================= */

/* 1. КОНТЕЙНЕР СТАТИСТИКИ (NET WORTH / TOTAL ITEMS) */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 24px 0 30px 0 !important;
}

/* 2. КАРТОЧКА СТАТИСТИКИ (PREMIUM) */
.stat-card {
    position: relative;
    background: rgba(10, 18, 14, 0.85) !important;
    border: 1px solid rgba(0, 255, 157, 0.1) !important;
    border-top: none !important;
    border-radius: 18px !important;
    padding: 28px 28px 14px 28px !important;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.35s ease !important;
    overflow: hidden;
    flex-wrap: wrap;
}

/* Gradient top line */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff9d, transparent);
    border-radius: 2px;
    transition: 0.4s;
}

.stat-card:hover::after {
    left: 5%;
    right: 5%;
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.5);
}

.stat-card--items::after {
    background: linear-gradient(90deg, transparent, #00aaff, transparent);
}

.stat-card--items:hover::after {
    box-shadow: 0 0 12px rgba(0, 170, 255, 0.5);
}

.stat-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(10, 20, 15, 0.95) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 157, 0.08) !important;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* ICON CIRCLE */
.stat-card__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.15), rgba(0, 255, 157, 0.05));
    border: 1px solid rgba(0, 255, 157, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #00ff9d;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    transition: 0.3s;
}

.stat-card:hover .stat-card__icon {
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.25);
    transform: scale(1.05);
}

.stat-card__icon--blue {
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(0, 170, 255, 0.05));
    border-color: rgba(0, 170, 255, 0.2);
    color: #00aaff;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.1);
}

.stat-card:hover .stat-card__icon--blue {
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.25);
}

/* BODY */
.stat-card__body {
    flex: 1;
    min-width: 0;
}

/* ЗАГОЛОВОК КАРТОЧКИ (H3) */
.stat-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 2;
}

/* VALUE ROW */
.stat-card__value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-coin-icon {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.5));
}

/* SUBTITLE */
.stat-card__subtitle {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* VERTICAL ACCENT BAR (left edge) */
.stat-card__bar {
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: transparent;
    border-radius: 0 4px 4px 0;
    overflow: visible;
}

.stat-card__bar-fill {
    width: 100%;
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: 0.4s;
}

.stat-card__bar-fill--green {
    background: linear-gradient(180deg, transparent, #00ff9d, transparent);
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.3);
}

.stat-card:hover .stat-card__bar-fill--green {
    box-shadow: 0 0 16px rgba(0, 255, 157, 0.6);
}

.stat-card__bar-fill--blue {
    background: linear-gradient(180deg, transparent, #00aaff, transparent);
    box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
}

.stat-card:hover .stat-card__bar-fill--blue {
    box-shadow: 0 0 16px rgba(0, 170, 255, 0.6);
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 3. ЦИФРЫ (VALUE GLOW) */
.value-glow {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2rem !important;
    background: linear-gradient(180deg, #ffffff 30%, #00ff9d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 157, 0.25));
    position: relative;
    z-index: 2;
    transition: 0.3s;
    line-height: 1.1;
}

.value-glow--blue {
    background: linear-gradient(180deg, #ffffff 30%, #00aaff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(0, 170, 255, 0.25));
}

.stat-card:hover .value-glow {
    filter: drop-shadow(0 0 18px rgba(0, 255, 157, 0.5));
    transform: scale(1.03);
}

/* BLUE VARIANT hover */
.stat-card--items::before {
    background: radial-gradient(circle, rgba(0, 170, 255, 0.06) 0%, transparent 70%);
}

.stat-card--items:hover {
    border-top-color: rgba(0, 170, 255, 0.7) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 170, 255, 0.08) !important;
}

.stat-card--items:hover .value-glow {
    filter: drop-shadow(0 0 18px rgba(0, 170, 255, 0.5));
}

/* 4. ЗАГОЛОВОК ИНВЕНТАРЯ (YOUR INVENTORY) */
.box-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    /* Убираем старую линию снизу, делаем подложку */
    border-bottom: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
    border-left: 4px solid #00ff9d !important;
    /* Зеленая полоска слева */

    padding: 20px 25px !important;
    margin-bottom: 20px !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Текст "YOUR INVENTORY" */
.box-title span:first-child {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

/* 5. MM2 VALUE (ЗОЛОТОЙ СЛИТОК) */
.home-value {
    /* Фон: Темный с золотым отливом */
    background: linear-gradient(135deg, rgba(50, 40, 0, 0.6) 0%, rgba(20, 15, 0, 0.8) 100%) !important;
    border: 1px solid rgba(255, 230, 0, 0.3) !important;

    padding: 8px 20px !important;
    border-radius: 50px !important;
    /* Овальная форма */

    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #ffe600 !important;
    /* Золотой текст */

    box-shadow: 0 0 15px rgba(255, 230, 0, 0.1), inset 0 0 10px rgba(255, 230, 0, 0.05) !important;
    text-transform: uppercase;
    letter-spacing: 1px;

    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.home-value:hover {
    border-color: #ffe600 !important;
    box-shadow: 0 0 20px rgba(255, 230, 0, 0.3) !important;
    transform: translateX(-3px);
}

/* Иконка монетки в Value */
.home-coin {
    width: 24px !important;
    height: 24px !important;
    filter: drop-shadow(0 0 5px rgba(255, 230, 0, 0.6));
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ ЭТИХ СТИЛЕЙ */
@media (max-width: 768px) {
    .profile-stats {
        gap: 15px !important;
    }

    .stat-card {
        padding: 20px !important;
    }

    .value-glow {
        font-size: 2.8rem !important;
    }

    .box-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .home-value {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================
   PREMIUM HISTORY PAGE V2
   ================================================================= */

/* ============================================
   HISTORY PAGE — V2 REDESIGN
   ============================================ */
.history-page {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
}

/* === PAGE HERO === */
.history-hero {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
}

.history-hero-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #00ff9d;
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.12), 0 0 60px rgba(0, 255, 157, 0.05);
    animation: heroIconPulse 3s ease-in-out infinite;
}

@keyframes heroIconPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 157, 0.12), 0 0 60px rgba(0, 255, 157, 0.05); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 157, 0.2), 0 0 80px rgba(0, 255, 157, 0.1); }
}

.history-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 30px rgba(0, 255, 157, 0.15);
}

.history-hero-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 1px;
    margin: 6px 0 0;
}

/* === TABS === */
.history-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 6px;
    backdrop-filter: blur(10px);
}

.history-tab {
    flex: 1;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.history-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(ellipse at center, rgba(0, 255, 157, 0.08) 0%, transparent 70%);
}

.history-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

.history-tab.active {
    background: rgba(0, 255, 157, 0.08);
    color: #00ff9d;
    border: 1px solid rgba(0, 255, 157, 0.18);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.08), inset 0 0 20px rgba(0, 255, 157, 0.03);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
}

.history-tab.active::before {
    opacity: 1;
}

.history-tab i {
    font-size: 1rem;
}

/* TAB CONTENT */
.history-tab-content {
    display: none;
}

.history-tab-content.active {
    display: block;
    animation: histFadeIn 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* === SECTION === */
.history-section {
    background:
        radial-gradient(ellipse at top left, rgba(0, 255, 157, 0.03) 0%, transparent 50%),
        rgba(5, 10, 8, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 80px rgba(0, 255, 157, 0.02);
}

.history-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
    position: relative;
}

.history-section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent), 0.15), transparent);
}

.history-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent), 0.1);
    border: 1px solid rgba(var(--accent), 0.2);
    color: rgb(var(--accent));
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(var(--accent), 0.1);
}

.history-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0;
}

.history-section-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 2px 0 0;
}

.history-section-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.history-section-body {
    padding: 10px;
}

/* =============================================
   GAME CARDS (v2 with avatars)
   ============================================= */
.game-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    margin: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.game-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    transition: all 0.3s ease;
}

.game-card--win .game-card-glow {
    background: linear-gradient(180deg, #00ff9d, #00cc7d);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3), 0 0 30px rgba(0, 255, 157, 0.1);
}

.game-card--loss .game-card-glow {
    background: linear-gradient(180deg, #ff4d4d, #cc3333);
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
}

.game-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.game-card--win:hover {
    border-color: rgba(0, 255, 157, 0.12);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 40px rgba(0, 255, 157, 0.06);
}

.game-card--win:hover .game-card-glow {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.45), 0 0 50px rgba(0, 255, 157, 0.15);
    width: 5px;
}

.game-card--loss:hover {
    border-color: rgba(255, 77, 77, 0.1);
}

/* Players section */
.game-card-players {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1.6;
    min-width: 0;
}

.game-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.game-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.game-card-players .game-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.08);
    object-fit: cover;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
}

.game-avatar--winner .game-avatar {
    border-color: rgba(0, 255, 157, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.2), 0 0 30px rgba(0, 255, 157, 0.08);
}

.game-card-players:hover .game-avatar {
    border-color: rgba(255, 255, 255, 0.15);
}

.game-card--win:hover .game-avatar--winner .game-avatar {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.3), 0 0 40px rgba(0, 255, 157, 0.12);
}

.game-avatar-crown {
    position: absolute;
    top: -8px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.15);
    border: 1px solid rgba(0, 255, 157, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: #00ff9d;
    animation: crownGlow 2s ease-in-out infinite;
}

@keyframes crownGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 157, 0.2); }
    50% { box-shadow: 0 0 12px rgba(0, 255, 157, 0.4); }
}

.game-player-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    transition: color 0.2s;
}

.game-player--me .game-player-name {
    color: #fff;
    font-weight: 800;
}

.game-card-players .game-vs-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: unset;
    font-weight: unset;
    color: unset;
    transform: none;
}

.game-card-players .game-vs-badge span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
    transform: skew(-8deg);
}

/* Result chip */
.game-card-result {
    flex-shrink: 0;
}

.result-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.result-chip--win {
    background: rgba(0, 255, 157, 0.08);
    color: #00ff9d;
    border: 1px solid rgba(0, 255, 157, 0.18);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.06);
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.3);
}

.result-chip--win i {
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.5));
}

.game-card:hover .result-chip--win {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.12);
    background: rgba(0, 255, 157, 0.12);
}

.result-chip--loss {
    background: rgba(255, 77, 77, 0.06);
    color: rgba(255, 85, 85, 0.8);
    border: 1px solid rgba(255, 77, 77, 0.1);
}

/* Skin thumbnails in game cards */
.game-card-skins {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.skin-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    cursor: default;
    flex-shrink: 0;
}

.skin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
    transition: all 0.3s ease;
}

.skin-thumb:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 255, 157, 0.1);
}

.skin-thumb:hover img {
    filter: brightness(1.1);
}

.game-card--win .skin-thumb {
    border-color: rgba(0, 255, 157, 0.1);
}

.game-card--win .skin-thumb:hover {
    border-color: rgba(0, 255, 157, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 157, 0.15);
}

.skin-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 18px;
}

.skin-thumb:hover .skin-thumb-placeholder {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.07);
}

/* Meta (bet + time) */
.game-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.game-bet-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffe600;
    text-shadow: 0 0 14px rgba(255, 230, 0, 0.2);
}

.game-coin-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 6px rgba(255, 230, 0, 0.5));
    animation: coinSpin 4s ease-in-out infinite;
}

@keyframes coinSpin {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(20deg); }
}

.game-card-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    gap: 4px;
}

.game-card-time i {
    font-size: 0.65rem;
}

/* =============================================
   TRANSFER CARDS (Deposits / Withdrawals)
   ============================================= */
.transfer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.transfer-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    transition: all 0.3s ease;
}

.deposit-card .transfer-card-glow {
    background: linear-gradient(180deg, #00e5ff, #0099cc);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.withdraw-card .transfer-card-glow {
    background: linear-gradient(180deg, #c084fc, #9054d0);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.2);
}

.transfer-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.deposit-card:hover {
    border-color: rgba(0, 229, 255, 0.12);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 229, 255, 0.05);
}

.deposit-card:hover .transfer-card-glow {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
    width: 5px;
}

.withdraw-card:hover {
    border-color: rgba(192, 132, 252, 0.12);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 30px rgba(192, 132, 252, 0.05);
}

.withdraw-card:hover .transfer-card-glow {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.35);
    width: 5px;
}

.transfer-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* Avatar group (deposit: user -> bot) */
.transfer-avatar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.transfer-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.transfer-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.03);
}

.transfer-avatar--user img {
    border: 2px solid rgba(0, 229, 255, 0.25);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.1);
}

.transfer-avatar--bot img {
    border: 2px solid rgba(0, 229, 255, 0.15);
}

.transfer-bot-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: #00e5ff;
}

.transfer-direction {
    color: rgba(255, 255, 255, 0.12);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Withdraw icon */
.transfer-wd-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.withdraw-card .transfer-wd-icon {
    background: rgba(192, 132, 252, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.15);
    color: #c084fc;
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.06);
}

.withdraw-card:hover .transfer-wd-icon {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.15);
}

/* Transfer card info */
.transfer-card-info {
    flex: 1;
    min-width: 0;
}

.transfer-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.transfer-highlight {
    font-weight: 800;
}

.transfer-highlight--cyan {
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

.transfer-qty {
    color: #fbbf24;
    font-weight: 800;
    margin-left: 6px;
    font-size: 0.82rem;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.2);
}

.transfer-card-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Skin list in deposit cards */
.transfer-skin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.transfer-skin-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 5px 12px 5px 5px;
    transition: all 0.25s ease;
}

.transfer-skin-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 229, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.transfer-skin-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    transition: filter 0.2s ease;
}

.transfer-skin-item:hover .transfer-skin-img {
    filter: brightness(1.15);
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
}

.transfer-skin-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.transfer-skin-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

/* Withdrawal skin preview */
.wd-skin-preview {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(192, 132, 252, 0.15);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.wd-skin-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.wd-skin-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 15px rgba(192, 132, 252, 0.08);
    pointer-events: none;
}

.withdraw-card:hover .wd-skin-preview {
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.12);
}

.withdraw-card:hover .wd-skin-preview img {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.transfer-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    transition: all 0.2s ease;
}

.transfer-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Status chips */
.transfer-card-status {
    margin-top: 4px;
}

.wd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.wd-chip--done {
    background: rgba(0, 255, 157, 0.08);
    color: #00ff9d;
    border: 1px solid rgba(0, 255, 157, 0.15);
    text-shadow: 0 0 6px rgba(0, 255, 157, 0.3);
}

.wd-chip--pending {
    background: rgba(251, 191, 36, 0.06);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.12);
    animation: pendingPulse 2.5s ease-in-out infinite;
}

@keyframes pendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.transfer-card-time {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.18);
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.transfer-card-time i {
    font-size: 0.65rem;
}

/* === ADMIN LOG CARDS === */
.log-card-new {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    margin: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.log-card-new::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #ffe600, #cc9900);
    box-shadow: 0 0 10px rgba(255, 230, 0, 0.2);
    border-radius: 4px 0 0 4px;
}

.log-card-new:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.log-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.log-sender {
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}

.log-arrow-icon {
    color: rgba(255, 255, 255, 0.12);
    font-size: 1.1rem;
}

.log-bot {
    color: #00e5ff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

.log-card-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.log-item-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 3px 10px;
    border-radius: 7px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.log-card-date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === EMPTY STATE === */
.history-empty-state {
    text-align: center;
    padding: 70px 20px;
}

.history-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-empty-icon i {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.1);
}

.history-empty-state p {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.history-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.18);
    color: #00ff9d;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.history-empty-btn:hover {
    background: rgba(0, 255, 157, 0.14);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    transform: translateY(-2px);
    color: #00ff9d;
    text-decoration: none;
}

/* ===========================================
   HISTORY MOBILE RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .history-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .history-hero {
        margin-bottom: 24px;
    }

    .history-hero-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 16px;
    }

    .history-hero-title {
        font-size: 1.4rem;
        letter-spacing: 3px;
    }

    .history-tabs {
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    .history-tab {
        padding: 10px 6px;
        font-size: 0.68rem;
        letter-spacing: 0.8px;
        gap: 5px;
    }

    .history-tab span {
        display: none;
    }

    .history-tab i {
        font-size: 1.1rem;
    }

    .history-section {
        border-radius: 18px;
    }

    .history-section-header {
        padding: 18px 16px;
        gap: 12px;
    }

    .history-section-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .history-section-title {
        font-size: 0.82rem;
    }

    .history-section-count {
        display: none;
    }

    .history-section-body {
        padding: 4px;
    }

    /* Game cards mobile */
    .game-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin: 4px;
        gap: 14px;
    }

    .game-card-players {
        justify-content: center;
        gap: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .game-player {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .game-player-name {
        font-size: 0.72rem;
        max-width: 80px;
        text-align: center;
    }

    .game-card-players .game-avatar {
        width: 36px;
        height: 36px;
    }

    .game-card-players .game-vs-badge {
        padding: 0 2px;
    }

    .game-card-players .game-vs-badge span {
        font-size: 0.55rem;
    }

    .game-card-result {
        display: flex;
        justify-content: center;
    }

    .game-card-skins {
        justify-content: center;
        gap: 5px;
    }

    .skin-thumb {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .game-card-meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.03);
    }

    .game-bet-amount {
        font-size: 0.95rem;
    }

    .game-coin-icon {
        width: 16px;
        height: 16px;
    }

    /* Transfer cards mobile */
    .transfer-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin: 4px;
        gap: 12px;
    }

    .transfer-card-left {
        gap: 12px;
    }

    .transfer-avatar {
        width: 36px;
        height: 36px;
    }

    .transfer-card-time {
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.03);
        justify-content: flex-end;
    }

    .transfer-card-title {
        font-size: 0.82rem;
    }

    .transfer-pill {
        font-size: 0.68rem;
        padding: 3px 9px;
    }

    .transfer-skin-item {
        padding: 4px 8px 4px 4px;
        gap: 6px;
    }

    .transfer-skin-img {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }

    .transfer-skin-placeholder {
        width: 30px;
        height: 30px;
    }

    .transfer-skin-name {
        font-size: 0.65rem;
    }

    .wd-skin-preview {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* Admin logs mobile */
    .log-card-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
        margin: 4px;
    }

    .log-card-left {
        width: 100%;
    }

    .history-empty-state {
        padding: 40px 16px;
    }

    .history-empty-icon {
        width: 56px;
        height: 56px;
    }

    .history-empty-icon i {
        font-size: 1.4rem;
    }
}

.btn-place-bet {
    /* Разрешаем ёлке торчать за пределы кнопки */
    overflow: visible !important;
    position: relative !important;
}

/* 2. Псевдо-элемент с Ёлкой */
.btn-place-bet::before {
    content: '';
    position: absolute;
    top: -28px;
    left: -18px;
    width: 55px;
    height: 55px;
    background-image: url('https://openclipart.org/image/2400px/svg_to_png/94225/xmas01.png');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-15deg);
    filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.4));
    pointer-events: none;
    z-index: 20;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-place-bet:hover::before {
    transform: rotate(-8deg) translateY(-2px) scale(1.04);
    filter: drop-shadow(4px 7px 8px rgba(0, 0, 0, 0.45));
}

.chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: min(92vw, 340px);
    height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(0, 255, 157, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(10, 16, 14, 0.99) 0%, rgba(5, 8, 7, 0.985) 100%);
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.58);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateX(0);
    overflow: hidden;
}

.chat-sidebar.collapsed {
    transform: translateX(100%);
}

.chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 8998;
}

.chat-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.chat-time {
    color: #606060;
    font-size: 13px;
    margin-top: 5px;
}

/* --- 2. КНОПКА ОТКРЫТИЯ ЧАТА (плавающий круг) --- */
.chat-toggle-tab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: rgba(0, 255, 130, 0.18);
    border: 2px solid rgba(0, 255, 130, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9002;
    transition: all 0.3s ease;
    box-shadow:
        0 0 20px rgba(0, 255, 130, 0.2),
        0 0 60px rgba(0, 255, 130, 0.08);
    animation: chatPulse 3s ease-in-out infinite;
}

@keyframes chatPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 130, 0.2), 0 0 60px rgba(0, 255, 130, 0.08);
    }

    50% {
        box-shadow: 0 0 28px rgba(0, 255, 130, 0.35), 0 0 70px rgba(0, 255, 130, 0.12);
    }
}

.chat-toggle-tab:hover {
    background: rgba(0, 255, 130, 0.28);
    border-color: rgba(0, 255, 130, 0.6);
    transform: scale(1.08);
    box-shadow:
        0 0 30px rgba(0, 255, 130, 0.35),
        0 0 80px rgba(0, 255, 130, 0.12);
}

.chat-toggle-tab .bi {
    font-size: 22px;
    color: #00ff82;
    filter: drop-shadow(0 0 6px rgba(0, 255, 130, 0.5));
    transition: 0.3s;
}

.chat-toggle-tab:hover .bi {
    color: #33ffaa;
    filter: drop-shadow(0 0 10px rgba(0, 255, 130, 0.8));
    transform: scale(1.1);
}

.chat-header {
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 255, 157, 0.05), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.online-indicator {
    width: 8px;
    height: 8px;
    background: #00ff9d;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff9d;
}

.chat-messages-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-messages-area::-webkit-scrollbar {
    display: none;
}

/* =================================================================
   ИСПРАВЛЕННЫЕ РАЗДЕЛЫ 4, 5, 6 (ЖЕСТКОЕ ВЫРАВНИВАНИЕ)
   ================================================================= */

/* =================================================================
   ИСПРАВЛЕННЫЕ РАЗДЕЛЫ 4, 5, 6 (ФИНАЛЬНЫЙ CSS ВАРИАНТ)
   Вставь это в style.css вместо текущих разделов 4, 5, 6
   ================================================================= */

/* --- 4. СТРОКИ СООБЩЕНИЙ --- */
.chat-msg-row {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    align-items: flex-start;

    position: relative;
    animation: fadeIn 0.3s ease;
}

/* КОНТЕЙНЕР ГРУППЫ (НИК + СООБЩЕНИЕ + ВРЕМЯ) */
.chat-bubble-group {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    /* Ограничиваем ширину, чтобы не растягивалось на весь экран */
    justify-content: center;
}

/* >>> ЧУЖИЕ (СЛЕВА) <<< */
.msg-other {
    flex-direction: row;
    /* Аватар слева, текст справа */
    justify-content: flex-start;
    /* Прижать всю конструкцию влево */
    padding-right: 20px;
}

.msg-other .chat-bubble-group {
    margin-left: 12px;
    /* Отступ от аватарки */
    align-items: flex-start;
    /* !ВАЖНО: Прижимает ник и бабл ВЛЕВО */
    text-align: left;
}

/* >>> МОИ (СПРАВА) <<< */
.msg-me {
    flex-direction: row-reverse;
    /* Аватар справа, текст слева */
    justify-content: flex-start;
    /* В режиме reverse "start" это правый край */
    padding-left: 20px;
}

.msg-me .chat-bubble-group {
    margin-right: 12px;
    /* Отступ от аватарки */
    align-items: flex-end;
    /* !ВАЖНО: Прижимает ник и бабл ВПРАВО */
    text-align: right;
}


/* --- 5. АВАТАРКИ --- */
/* --- 5. АВАТАРКИ --- */
.chat-avatar {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    transition: transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    /* НОВОЕ: Опускаем аватарку чуть ниже, чтобы она была на уровне начала сообщения */
    margin-top: 10px;
}

.chat-avatar:hover {
    transform: scale(1.05);
}

/* Моя (Зеленая) */
.msg-me .chat-avatar {
    border: 2px solid #00ff9d;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
}

/* Чужая (Голубая) */
.msg-other .chat-avatar {
    border: 2px solid #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}


/* --- 6. ТЕКСТ И НИКИ (СПЕЦИФИЧНЫЕ СТИЛИ) --- */
.chat-username {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    position: absolute;
    letter-spacing: 0.5px;
    margin-top: 20px;
    line-height: 1;
    display: block;
    top: -25px;
}

/* Выравнивание ников для разных сторон */
.msg-other .chat-username {
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
    margin-left: 2px;
    left: 0;
}

.msg-me .chat-username {
    color: #00ff9d;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
    margin-right: 2px;
    right: 0;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    margin-top: 15px;
    width: fit-content;
    word-wrap: anywhere;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.msg-other .chat-bubble {
    background: #1a2025;
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 4px 14px 14px 14px;
    /* Угол смотрит влево-вверх */
}

.msg-me .chat-bubble {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.15), rgba(0, 100, 80, 0.3));
    border: 1px solid rgba(0, 255, 157, 0.3);
    border-radius: 14px 4px 14px 14px;
    /* Угол смотрит вправо-вверх */
}

/* Время */
.chat-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    font-weight: 600;
    width: fit-content;
}

/* --- 7. ПОЛЕ ВВОДА --- */
.chat-input-area {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 10px;
}

#chatInput {
    flex: 1;
    background: #080a09;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px;
    color: #fff;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
}

#chatInput:focus {
    border-color: #00ff9d;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.chat-send-btn {
    width: 50px;
    background: linear-gradient(135deg, #00ff9d 0%, #00cc7a 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.chat-send-btn svg {
    width: 22px;
    fill: #051a12;
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
}

/* Мобильный адаптив */
@media (max-width: 600px) {
    .chat-sidebar {
        width: 85%;
        max-width: 300px;
    }

    .chat-sidebar.collapsed {
        transform: translateX(100%);
    }

    .chat-toggle-tab {
        right: 20px;
        bottom: 24px;
        width: 48px;
        height: 48px;
    }
}




/* 1. Анимация бегущего градиента */
@keyframes toxicSmoothRun {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.join-btn-compact {
    /* РАЗМЕРЫ */
    width: 130px !important;
    padding: 12px 0;

    /* ТИПОГРАФИКА */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Цвет текста - темно-болотный, чтобы читался на светлом */
    color: #00332a !important;

    /* --- ФОН (МЯГКИЙ ПЕРЕЛИВ) --- */
    /* Используем более близкие цвета: Мятный -> Светло-голубой -> Мятный */
    background: linear-gradient(90deg, #00ff9d 0%, #42e6f5 50%, #00ff9d 100%);
    background-size: 200% auto;
    /* Размер для анимации */

    /* УБИРАЕМ ГРАНИЦЫ ПОЛНОСТЬЮ */
    border: none !important;
    border-radius: 12px;
    /* Чуть мягче углы */

    /* ТЕНИ */
    box-shadow: 0 5px 15px rgba(0, 255, 157, 0.25);

    cursor: pointer;
    position: relative;
    /* Важно для псевдо-элемента */
    overflow: hidden;
    /* Чтобы "лед" не вылезал за края */
    z-index: 1;

    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* --- ПСЕВДО-ЭЛЕМЕНТ (ЭФФЕКТ ЛЬДА В УГЛУ) --- */
.join-btn-compact::after {
    content: '';
    position: absolute;

    /* Позиция: Нижний правый угол */
    bottom: -15px;
    right: -15px;

    /* Размер пятна */
    width: 50px;
    height: 50px;

    /* Вид: Белое размытое пятно (Иней) */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(6px);
    border-radius: 50%;

    /* Начальное состояние */
    transform: scale(1);
    opacity: 0.4;
    transition: transform 0.8s ease, opacity 0.8s ease;

    pointer-events: none;
    /* Чтобы не мешал кликать */
    z-index: -1;
    /* Под текстом, но над фоном (зависит от контекста, тут визуально поверх) */
}

/* --- HOVER EFFECT: БЕГ И РОСТ ЛЬДА --- */
.join-btn-compact:hover {
    /* Мягкий, еле заметный перелив */
    animation: toxicSmoothRun 6s ease-in-out infinite;

    /* Лёгкий подъём */
    transform: translateY(-1.5px);

    /* Мягкое свечение */
    box-shadow: 0 6px 18px rgba(0, 255, 157, 0.3);

    border: none !important;
}

/* При наведении лёд чуть подрастает */
.join-btn-compact:hover::after {
    transform: scale(1.3);
    opacity: 0.7;
}

/* ACTIVE */
.join-btn-compact:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 255, 157, 0.3);
}

/* Контейнер для пустого инвентаря */
.empty-inventory-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.01);
}

.empty-inv-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.06);
    border: 1px solid rgba(0, 255, 157, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.empty-inv-icon .bi {
    font-size: 28px;
    color: rgba(0, 255, 157, 0.5);
}

.empty-inv-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin: 0;
}

.empty-inv-desc {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 340px;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

/* === КНОПКА DEPOSIT ITEMS === */
.ice-deposit-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 40px;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.15), rgba(0, 200, 130, 0.1));
    border: 1px solid rgba(0, 255, 157, 0.25);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 255, 157, 0.1);
    transition: all 0.3s ease;
}

.ice-deposit-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 157, 0.45);
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 200, 130, 0.15));
    box-shadow: 0 6px 28px rgba(0, 255, 157, 0.18);
}

/* === 1. ГЛАВНАЯ ОБЕРТКА (Делает окно модальным) === */
.success-modal-overlay {
    position: fixed;
    /* Фиксируем поверх всего */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Затемнение фона сайта */
    backdrop-filter: blur(5px);
    /* Размытие фона сайта */
    z-index: 2000;
    /* Очень высокий слой, чтобы перекрыть меню */

    /* Скрыто по умолчанию */
    display: none;

    /* Центрируем коробку внутри */
    justify-content: center;
    align-items: center;
}

/* Класс, который добавляет JS для показа окна */
.success-modal-overlay.active {
    display: flex;
}

/* === 2. ТВОЯ КОРОБКА (Стили, которые ты скинул) === */
.success-box {
    background: rgba(17, 19, 22, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    padding: 40px;
    border-radius: 24px;
    text-align: center;
    max-width: 400px;
    width: 90%;

    /* Важно: это flex внутри коробки, чтобы выстроить иконку и текст */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Анимация появления (по желанию) */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Обертка для иконки */
.success-icon-wrapper {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Иконка */
.success-icon-wrapper svg {
    width: 80px;
    height: 80px;
    color: #00FF88;
    filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.5));
}

/* Заголовок */
.success-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #ffffff;
    margin: 0 0 15px;
    letter-spacing: 1px;
}

/* Описание */
.success-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #8899a6;
    margin: 0 0 30px;
    line-height: 1.5;
}

/* Ссылка Close */
.close-modal-link {
    margin-top: 25px;
    font-size: 14px;
    color: #556677;
    cursor: pointer;
    transition: color 0.2s;
    font-family: 'Montserrat', sans-serif;
}

.close-modal-link:hover {
    color: #fff;
}


/* =================================================================
   CHAT SIDEBAR + TOGGLE BUTTON
   ================================================================= */

/* --- SIDEBAR PANEL --- */
.chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: min(92vw, 340px);
    height: 100vh;
    background: rgba(5, 8, 7, 0.98);
    backdrop-filter: blur(15px);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateX(0);
}

.chat-sidebar.collapsed {
    transform: translateX(100%);
}

/* --- FLOATING GREEN CIRCLE TOGGLE (FIXED POSITION) --- */
.chat-toggle-tab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
    background: rgba(0, 255, 130, 0.14);
    border: 1.5px solid rgba(0, 255, 130, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9002;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow:
        0 0 18px rgba(0, 255, 130, 0.15),
        0 0 50px rgba(0, 255, 130, 0.06);
}

/* When chat is open, move button next to sidebar */
.chat-sidebar:not(.collapsed)~.chat-toggle-tab {
    right: 352px;
}

/* Hide toggle button when chat is open ON MOBILE */
@media (max-width: 768px) {
    .chat-sidebar:not(.collapsed)~.chat-toggle-tab {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.5);
    }
}

/* Chat close button (hidden by default, only shown on mobile) */
.chat-close-btn {
    display: none;
}

@media (max-width: 768px) {
    .chat-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 77, 77, 0.08);
        border: 1px solid rgba(255, 77, 77, 0.2);
        color: #ff6b6b;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-indent: 0;
        padding: 1px 0 0 1px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .chat-close-btn:active {
        background: rgba(255, 77, 77, 0.2);
        border-color: rgba(255, 77, 77, 0.4);
        transform: scale(0.92);
    }
}

/* Icon inside circle */
.chat-toggle-tab .bi {
    font-size: 20px;
    color: #00ff82;
    filter: drop-shadow(0 0 6px rgba(0, 255, 130, 0.5));
    transition: 0.3s;
}

/* Subtle hover — barely noticeable */
.chat-toggle-tab:hover {
    background: rgba(0, 255, 130, 0.2);
    border-color: rgba(0, 255, 130, 0.5);
    box-shadow:
        0 0 24px rgba(0, 255, 130, 0.22),
        0 0 60px rgba(0, 255, 130, 0.08);
}

.chat-toggle-tab:hover .bi {
    color: #2bffaa;
    filter: drop-shadow(0 0 8px rgba(0, 255, 130, 0.65));
}

/* --- CHAT HEADER --- */
.chat-header {
    padding: 22px 20px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1.6px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.chat-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.chat-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 200, 120, 0.12));
    border: 1px solid rgba(0, 255, 157, 0.15);
    color: var(--primary-green);
    box-shadow: 0 4px 14px rgba(0, 255, 157, 0.1);
    flex-shrink: 0;
}

.chat-title-icon-live {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.22), rgba(0, 180, 100, 0.1));
    color: var(--primary-green);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.12), 0 4px 14px rgba(0, 0, 0, 0.2);
}

.chat-title-icon-live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    border: 1.5px solid rgba(0, 255, 157, 0.2);
    animation: chatLivePulse 2s ease-out infinite;
}

.chat-title-icon .bi {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 4px rgba(0, 255, 157, 0.3));
}

@keyframes chatLivePulse {
    0% {
        opacity: 0.25;
        transform: scale(0.96);
    }

    70% {
        opacity: 0;
        transform: scale(1.08);
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

.chat-title {
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: #f4fffb;
    text-shadow: 0 0 16px rgba(0, 255, 157, 0.1);
}

.chat-subtitle {
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(195, 223, 214, 0.62);
}

.online-indicator {
    width: 8px;
    height: 8px;
    background: #00ff9d;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff9d;
}

/* --- MESSAGES AREA --- */
.chat-messages-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
}

.chat-messages-area::-webkit-scrollbar {
    display: none;
}

/* --- MESSAGE ROWS --- */
.chat-msg-row {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
    align-items: flex-start;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.chat-bubble-group {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 68px);
    justify-content: center;
    min-width: 0;
    gap: 6px;
}

.msg-other {
    flex-direction: row;
    justify-content: flex-start;
    padding-right: 20px;
}

.msg-other .chat-bubble-group {
    margin-left: 12px;
    align-items: flex-start;
    text-align: left;
}

.msg-me {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-left: 20px;
}

.msg-me .chat-bubble-group {
    margin-right: 12px;
    align-items: flex-end;
    text-align: right;
}

/* --- AVATARS --- */
.chat-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    margin-top: 12px;
}

.chat-avatar:hover {
    transform: scale(1.05);
}

.msg-me .chat-avatar {
    border: 2px solid #00ff9d;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
}

.msg-other .chat-avatar {
    border: 2px solid #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* --- USERNAMES --- */
.chat-username {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    position: absolute;
    letter-spacing: 0.5px;
    margin-top: 16px;
    line-height: 1;
    display: block;
    top: -22px;
}

.msg-other .chat-username {
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
    margin-left: 2px;
    left: 0;
}

.msg-me .chat-username {
    color: #00ff9d;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
    margin-right: 2px;
    right: 0;
}

/* --- BUBBLES --- */
.chat-bubble {
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #fff;
    margin-top: 12px;
    width: fit-content;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.msg-other .chat-bubble {
    background: linear-gradient(180deg, rgba(31, 39, 45, 0.94), rgba(20, 25, 30, 0.98));
    border: 1px solid rgba(120, 160, 190, 0.16);
    border-radius: 8px 18px 18px 18px;
}

.msg-me .chat-bubble {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.18), rgba(0, 125, 88, 0.26));
    border: 1px solid rgba(0, 255, 157, 0.22);
    border-radius: 18px 8px 18px 18px;
}

.chat-text {
    color: rgba(245, 250, 248, 0.96);
}

.chat-time {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.34);
    margin-top: 2px;
    font-weight: 600;
    width: fit-content;
}

/* --- INPUT AREA --- */
.chat-input-area {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.22));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 10px;
}

#chatInput {
    flex: 1;
    background: rgba(8, 10, 9, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    min-width: 0;
    padding: 14px;
    color: #fff;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#chatInput:focus {
    border-color: #00ff9d;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.chat-send-btn {
    width: 50px;
    background: linear-gradient(135deg, #00ff9d 0%, #00cc7a 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.chat-send-btn svg {
    width: 22px;
    fill: #051a12;
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .chat-sidebar {
        width: min(100vw, 420px);
        max-width: 100vw;
        border-left: none;
        box-shadow: none;
    }

    .chat-sidebar.collapsed {
        transform: translateX(100%);
    }

    .chat-header {
        padding-top: calc(18px + env(safe-area-inset-top));
    }

    .chat-title {
        font-size: 0.88rem;
        letter-spacing: 1.5px;
    }

    .chat-title-row {
        gap: 8px;
    }

    .chat-title-icon {
        width: 28px;
        height: 28px;
    }

    .chat-subtitle {
        font-size: 0.64rem;
    }

    .chat-messages-area {
        padding: 16px 14px 18px;
    }

    .chat-msg-row {
        margin-bottom: 12px;
    }

    .msg-other {
        padding-right: 8px;
    }

    .msg-me {
        padding-left: 8px;
    }

    .chat-bubble-group {
        max-width: calc(100% - 58px);
    }

    .chat-avatar {
        width: 40px !important;
        height: 40px !important;
        margin-top: 10px;
    }

    .chat-toggle-tab {
        right: 20px;
        bottom: 24px;
        width: 48px;
        height: 48px;
    }
}

/* Full-width chat on small phones */
@media (max-width: 420px) {
    .chat-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .chat-header {
        padding-inline: 14px;
    }

    .chat-input-area {
        padding-inline: 12px;
        gap: 8px;
    }

    #chatInput {
        padding: 12px 13px;
        font-size: 16px;
    }

    .chat-send-btn {
        width: 46px;
        min-width: 46px;
    }
}

@media (min-width: 601px) {
    .chat-backdrop {
        display: none;
    }
}

@media (max-width: 768px) {
    body.chat-open-mobile {
        overflow: hidden;
        touch-action: none;
    }
}

/* ================================================================
   USER STATS MODAL
   ================================================================ */

/* Clickable avatar hover effect */
.clickable-avatar {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.clickable-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
}

/* Overlay */
.stats-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.35s ease;
}

.stats-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Box */
.stats-box {
    background: linear-gradient(145deg, #0c1410 0%, #080d0a 100%);
    border: 1px solid rgba(0, 255, 157, 0.15);
    border-radius: 20px;
    width: 480px;
    max-width: 94vw;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    position: relative;
    box-shadow:
        0 0 60px rgba(0, 255, 157, 0.08),
        0 25px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.92) translateY(20px);
    transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stats-overlay.active .stats-box {
    transform: scale(1) translateY(0);
}

/* Close button */
.stats-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.3rem;
    color: #555;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s;
    line-height: 1;
}

.stats-close:hover {
    color: #fff;
    transform: scale(1.15);
}

/* Loading */
.stats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: 16px;
    color: #8fa396;
    font-size: 0.9rem;
    font-weight: 600;
}

.stats-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 255, 157, 0.1);
    border-top: 3px solid #00ff9d;
    border-radius: 50%;
    animation: statsSpin 0.7s linear infinite;
}

.stats-spinner-sm {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 255, 157, 0.1);
    border-top: 2px solid #00ff9d;
    border-radius: 50%;
    animation: statsSpin 0.7s linear infinite;
    margin: 30px auto;
}

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

/* Content */
.stats-content {
    padding: 28px 28px 24px;
}

/* User header */
.stats-user-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.stats-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 2px solid rgba(0, 229, 255, 0.3);
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

.stats-username {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Period tabs */
.stats-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-tab {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #8fa396;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.stats-tab.active {
    color: #020504;
    background: linear-gradient(135deg, #00e5ff, #00ff9d);
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.25);
}

/* Stats cards */
.stats-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.stats-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.stats-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8fa396;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.stats-card-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
}

.stats-positive {
    color: #00ff9d !important;
    text-shadow: 0 0 20px rgba(0, 255, 157, 0.3);
}

.stats-negative {
    color: #ff4d4d !important;
    text-shadow: 0 0 20px rgba(255, 77, 77, 0.3);
}

/* W/L row */
.stats-wl-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-wl-win {
    color: #00ff9d;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-wl-loss {
    color: #ff4d4d;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* History */
.stats-history-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #8fa396;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.stats-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.stats-history-list::-webkit-scrollbar {
    width: 6px;
}

.stats-history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.stats-history-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00e5ff, #00ff9d);
    border-radius: 6px;
}

.stats-history-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #33ecff, #33ffb3);
}

/* Stats box scrollbar */
.stats-box::-webkit-scrollbar {
    width: 6px;
}

.stats-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 20px 20px 0;
}

.stats-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00e5ff, #00ff9d);
    border-radius: 6px;
}

.stats-box::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #33ecff, #33ffb3);
}

.stats-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: 0.2s ease;
}

.stats-history-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.stats-history-item.history-win {
    border-left: 3px solid rgba(0, 255, 157, 0.4);
}

.stats-history-item.history-loss {
    border-left: 3px solid rgba(255, 77, 77, 0.4);
}

/* Status icon */
.history-status-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
}

.history-win .history-status-icon {
    background: rgba(0, 255, 157, 0.12);
    color: #00ff9d;
}

.history-loss .history-status-icon {
    background: rgba(255, 77, 77, 0.12);
    color: #ff4d4d;
}

/* Opponent avatar */
.history-opp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Color chip */
.history-color-chip {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Value */
.history-value {
    font-size: 0.85rem;
    font-weight: 800;
    flex: 1;
    text-align: right;
}

/* Date */
.history-date {
    font-size: 0.65rem;
    color: #556;
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* History empty/loading */
.stats-history-empty {
    text-align: center;
    color: #556;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 30px 0;
}

.stats-history-loading {
    text-align: center;
    padding: 20px 0;
}

/* Responsive */
@media (max-width: 520px) {
    .stats-content {
        padding: 20px 16px 18px;
    }

    .stats-cards-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .stats-card {
        padding: 10px 6px;
    }

    .stats-card-value {
        font-size: 1rem;
    }

    .stats-username {
        font-size: 1.1rem;
    }

    .history-date {
        display: none;
    }
}



/* ================================================================
   FOOTER — DELTAFLIP v2
   ================================================================ */

.footer-glow-line {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-green) 20%, var(--primary-cyan) 50%, var(--primary-green) 80%, transparent 100%);
    opacity: 0.6;
    position: relative;
}

.footer-glow-line::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 18px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 157, 0.15) 20%, rgba(0, 229, 255, 0.2) 50%, rgba(0, 255, 157, 0.15) 80%, transparent 100%);
    filter: blur(8px);
    pointer-events: none;
}

.footer-glow-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.5) 0%, transparent 70%);
    filter: blur(4px);
}

.site-footer {
    position: relative;
    margin-top: 60px;
    z-index: 10;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(4, 12, 8, 0.6) 0%, rgba(2, 5, 4, 0.95) 100%);
    backdrop-filter: blur(12px);
    z-index: -1;
}

.footer-main {
    padding: 50px 0 30px;
    position: relative;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 0.8fr 1.1fr 1fr;
    gap: 32px;
}

.footer-faq-container {
    display: block !important;
}

/* Brand column */
.footer-brand-col {
    padding-right: 10px;
}

.footer-logo {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 14px;
    position: relative;
}

.footer-logo span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-logo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.footer-logo:hover::after {
    width: 100%;
}

.footer-brand-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Trust badges */
.footer-trust-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(0, 255, 157, 0.04);
    border: 1px solid rgba(0, 255, 157, 0.12);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.trust-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.08), transparent);
    transition: left 0.6s ease;
}

.trust-badge:hover::before {
    left: 100%;
}

.trust-badge:hover {
    border-color: rgba(0, 255, 157, 0.35);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
    transform: translateY(-1px);
}

.trust-badge i {
    font-size: 0.75rem;
}

/* Column titles */
.footer-col-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
    text-align: center;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.footer-col:hover .footer-col-title::after {
    width: 40px;
}

/* Footer links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.footer-links li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.footer-links li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.08), transparent);
    transition: width 0.3s ease;
    border-radius: 8px;
}

.footer-links li a:hover::before {
    width: 100%;
}

.footer-links li a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-links li a i {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    color: var(--primary-green);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.footer-links li a:hover i {
    opacity: 1;
}

/* Fair card */
.footer-fair-card {
    background: rgba(0, 255, 157, 0.03);
    border: 1px solid rgba(0, 255, 157, 0.1);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.footer-fair-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
    transition: all 0.5s ease;
}

.footer-fair-card:hover::before {
    top: -30%;
    right: -30%;
}

.footer-fair-card:hover {
    border-color: rgba(0, 255, 157, 0.25);
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.06);
}

.fair-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 255, 157, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1rem;
    color: var(--primary-cyan);
}

.footer-fair-card p {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.65;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: center;
}

.footer-fair-card p strong {
    color: var(--primary-green);
}

/* ================================================================
   SOCIAL LINKS COLUMN
   ================================================================ */

.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.footer-social-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.footer-social-btn:hover::before {
    opacity: 1;
}

/* Discord */
.footer-social-btn.discord {
    background: rgba(88, 101, 242, 0.08);
    border-color: rgba(88, 101, 242, 0.2);
}

.footer-social-btn.discord::before {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.12), rgba(88, 101, 242, 0.04));
}

.footer-social-btn.discord:hover {
    border-color: rgba(88, 101, 242, 0.5);
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.15);
    transform: translateY(-2px);
}

.footer-social-btn.discord .social-icon-wrap {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

/* Telegram */
.footer-social-btn.telegram {
    background: rgba(38, 165, 227, 0.08);
    border-color: rgba(38, 165, 227, 0.2);
}

.footer-social-btn.telegram::before {
    background: linear-gradient(135deg, rgba(38, 165, 227, 0.12), rgba(38, 165, 227, 0.04));
}

.footer-social-btn.telegram:hover {
    border-color: rgba(38, 165, 227, 0.5);
    box-shadow: 0 0 20px rgba(38, 165, 227, 0.15);
    transform: translateY(-2px);
}

.footer-social-btn.telegram .social-icon-wrap {
    background: rgba(38, 165, 227, 0.15);
    color: #26A5E4;
}

.social-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.footer-social-btn:hover .social-icon-wrap {
    transform: scale(1.1);
}

.social-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.social-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.social-sub {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
}

.social-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.footer-social-btn:hover .social-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ================================================================
   FAQ SECTION
   ================================================================ */

.footer-faq-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, padding 0.4s ease;
    opacity: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-faq-section.visible {
    max-height: 2000px;
    opacity: 1;
    padding: 40px 0;
}

.faq-main-title {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 1px;
}

.faq-main-title i {
    color: var(--primary-cyan);
    font-size: 1.4rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-main);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 3px 0 0 3px;
}

.faq-item:hover {
    border-color: rgba(0, 255, 157, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.faq-item:hover::before,
.faq-item.open::before {
    opacity: 1;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
}

.faq-question span {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}

.faq-chevron {
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: transform 0.35s ease, color 0.3s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color: var(--primary-green);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer>p {
    overflow: hidden;
    padding: 0 20px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

.faq-item.open .faq-answer>p {
    padding: 0 20px 16px;
}

.faq-answer strong {
    color: var(--primary-green);
}

/* ================================================================
   FOOTER BOTTOM BAR
   ================================================================ */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
    position: relative;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: var(--gradient-main);
    opacity: 0.4;
}

.footer-bottom-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.footer-copyright {
    font-size: 0.78rem;
    color: #556;
    font-weight: 600;
}

.footer-copyright-brand {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.footer-bottom-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-badge-inline {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-badge-inline i {
    color: var(--primary-green);
    font-size: 0.85rem;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}

/* ================================================================
   FOOTER MODALS (Provably Fair, ToS, Privacy)
   ================================================================ */

.footer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s;
    pointer-events: none;
}

.footer-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.footer-modal-box {
    background: linear-gradient(145deg, #0c1410 0%, #080d0a 100%);
    border: 1px solid rgba(0, 255, 157, 0.15);
    border-radius: 20px;
    width: 560px;
    max-width: 94vw;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    box-shadow: 0 0 60px rgba(0, 255, 157, 0.08), 0 25px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.footer-modal-overlay.active .footer-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.footer-modal-long {
    width: 640px;
}

/* Modal scrollbar */
.footer-modal-box::-webkit-scrollbar {
    width: 6px;
}

.footer-modal-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 20px 20px 0;
}

.footer-modal-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00e5ff, #00ff9d);
    border-radius: 6px;
}

.footer-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 1.1rem;
    color: #555;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.footer-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.1);
}

.footer-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 28px 0;
    margin-bottom: 24px;
}

.footer-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 255, 157, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary-cyan);
    flex-shrink: 0;
}

.footer-modal-icon.tos {
    background: linear-gradient(135deg, rgba(255, 230, 0, 0.12), rgba(255, 180, 0, 0.1));
    color: var(--primary-yellow);
}

.footer-modal-icon.privacy {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(100, 180, 255, 0.1));
    color: #64b5f6;
}

.footer-modal-header h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.footer-modal-body {
    padding: 0 28px 28px;
}

.modal-section {
    margin-bottom: 20px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.modal-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-main);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-section:hover {
    border-color: rgba(0, 255, 157, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.modal-section:hover::before {
    opacity: 1;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section h4 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.modal-section h4 i {
    color: var(--primary-green);
    font-size: 0.95rem;
}

.modal-section p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

/* ================================================================
   FOOTER RESPONSIVE
   ================================================================ */

@media (max-width: 1200px) {
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        padding: 0 30px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .site-footer {
        margin-top: 40px;
    }

    .footer-main {
        padding: 35px 0 25px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 0 20px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-logo::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-trust-badges {
        justify-content: center;
    }

    .footer-socials-col {
        grid-column: 1 / -1;
    }

    .footer-social-links {
        flex-direction: row;
    }

    .footer-social-btn {
        flex: 1;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-main-title {
        font-size: 1.1rem;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .footer-container {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .footer-col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links li a {
        justify-content: center;
    }

    .footer-links li a::before {
        display: none;
    }

    .footer-fair-card {
        text-align: center;
    }

    .fair-card-icon {
        margin: 0 auto 10px;
    }

    .footer-social-links {
        flex-direction: column;
    }

    .footer-logo {
        font-size: 1.3rem;
    }

    .trust-badge {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    .faq-question {
        padding: 14px 16px;
    }

    .faq-question span {
        font-size: 0.82rem;
    }

    .footer-copyright {
        font-size: 0.72rem;
    }

    .footer-modal-box {
        border-radius: 16px;
    }

    .footer-modal-header {
        padding: 20px 20px 0;
    }

    .footer-modal-body {
        padding: 0 20px 20px;
    }

    .modal-section {
        padding: 14px 14px;
    }

    .footer-modal-header h2 {
        font-size: 1.1rem;
    }
}

/* =========================================
   PREMIUM REDESIGN: CREATE GAME MODAL 
   ========================================= */

/* 1. Glassmorphism overlay and border */
.create-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px) !important;
}

.create-modal-overlay .create-modal {
    background: rgba(10, 15, 12, 0.85) !important;
    /* glass look */
    backdrop-filter: blur(25px) !important;
    border: 2px solid rgba(0, 255, 157, 0.6) !important;
    border-bottom: 4px solid rgba(0, 255, 157, 0.9) !important;
    /* neon border */
    box-shadow: 0 0 40px rgba(0, 255, 157, 0.15), inset 0 0 20px rgba(0, 255, 157, 0.05) !important;
}

/* Header */
.create-modal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.create-modal .modal-header h2 {
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.create-modal .modal-close-btn {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.create-modal .modal-close-btn:hover {
    color: #00ff9d !important;
    text-shadow: 0 0 15px #00ff9d !important;
}

/* Body */
.create-modal .modal-inventory-body {
    background: transparent !important;
    /* let glass show through */
}

/* 2. Futuristic Item Cards */
.create-modal .modal-item-card {
    background: rgba(20, 26, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.create-modal .modal-item-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 255, 157, 0.5) !important;
    box-shadow: 0 10px 20px rgba(0, 255, 157, 0.15), inset 0 0 15px rgba(0, 255, 157, 0.05) !important;
}

/* Checked state */
.create-modal .modal-item-card.checked {
    border-color: var(--primary-cyan) !important;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(10, 15, 12, 0.8) 100%) !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3), inset 0 0 10px rgba(0, 229, 255, 0.2) !important;
}

.create-modal .modal-item-card.checked .check-indicator {
    background: var(--primary-cyan) !important;
    box-shadow: 0 0 10px var(--primary-cyan), 0 0 20px var(--primary-cyan) !important;
    border: 2px solid #fff;
    width: 12px !important;
    height: 12px !important;
    top: 8px !important;
    right: 8px !important;
}

/* 3. Empty Inventory Premium styling */
.premium-empty {
    min-height: 350px !important;
    background: radial-gradient(circle at center, rgba(0, 255, 157, 0.03) 0%, transparent 70%);
}

.empty-icon-premium {
    font-size: 5rem;
    color: #4a5a6a;
    margin-bottom: 15px;
    animation: floatIcon 3s ease-in-out infinite, premiumPulse 2s alternate infinite;
}

@keyframes premiumPulse {
    from {
        filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.2));
        color: #4a5a6a;
    }

    to {
        filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.6));
        color: #7cb5b9;
    }
}

.premium-title {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 3px !important;
}

.premium-desc {
    font-size: 1rem !important;
}

/* Button */
.btn-deposit-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 28px;
    background: rgba(0, 255, 157, 0.04);
    color: #00ff9d;
    font-weight: 700;
    font-family: var(--font-main);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 157, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-deposit-premium i {
    font-size: 1rem;
}

.btn-deposit-premium:hover {
    background: rgba(0, 255, 157, 0.08);
    border-color: rgba(0, 255, 157, 0.35);
    transform: translateY(-1px);
    color: #00ff9d;
}

/* 4. Footer */
.create-modal .modal-footer {
    background: rgba(5, 8, 8, 0.8) !important;
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#modal-selected-sum {
    /* styles handled by .premium-selected-value */
}

/* Coin selection glow */
.create-modal .coin-img-select {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 50%;
}

/* Coin selection glow removed from this obsolete block */
/* Modal action buttons */
.create-modal .btn-submit-create,
.create-modal .btn-submit-join {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #00c6ff 0%, #0072ff 52%, #00c6ff 100%) !important;
    background-size: 200% auto !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-family: var(--font-main) !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    padding: 0 34px !important;
    min-width: 190px !important;
    height: 52px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.32) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.create-modal .btn-submit-create::after,
.create-modal .btn-submit-join::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 48%, transparent 72%);
    transform: translateX(-135%);
    transition: transform 0.55s ease;
    z-index: 0;
}

.create-modal .btn-submit-create > *,
.create-modal .btn-submit-join > * {
    position: relative;
    z-index: 1;
}

.create-modal .btn-submit-create:not(:disabled):hover,
.create-modal .btn-submit-join:not(:disabled):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.02) !important;
    animation: flowBlueGradient 1.5s linear infinite !important;
    box-shadow: 0 8px 25px rgba(0, 114, 255, 0.55) !important;
}

.create-modal .btn-submit-create:not(:disabled):hover::after,
.create-modal .btn-submit-join:not(:disabled):hover::after {
    transform: translateX(135%);
}

.create-modal .btn-submit-create:disabled,
.create-modal .btn-submit-join:disabled {
    background: #333 !important;
    color: #555 !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* -----------------------------------------
   USER REQUESTED TWEAKS 
   ----------------------------------------- */

/* 1. Extract Selected Block */
.premium-selection {
    background: rgba(0, 255, 157, 0.03) !important;
    border: 1px solid rgba(0, 255, 157, 0.15) !important;
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 120px;
}

.premium-sel-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 255, 157, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00e5ff;
    font-size: 1rem;
}

.premium-sel-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.premium-selected-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.35);
}

.premium-selected-value-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.premium-selected-coin {
    width: 15px;
    height: 15px;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
    order: 2;
    margin-left: 4px;
}

.premium-selected-value {
    font-size: 1.05rem !important;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-main);
    letter-spacing: -0.3px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    order: 1;
}

/* 2. Stop Deposit Button animation */
.btn-deposit-premium {
    animation: none !important;
}

/* 3. Gold Coin Glow */
.create-modal .coin-label input:checked+img.gold {
    box-shadow: 0 0 16px rgba(255, 230, 0, 0.38), inset 0 0 8px rgba(255, 230, 0, 0.2) !important;
    transform: scale(1.15) !important;
    background: radial-gradient(circle, rgba(255, 230, 0, 0.18) 0%, transparent 72%) !important;
}

.create-modal .coin-label input:checked+img.green {
    box-shadow: 0 0 16px rgba(0, 255, 157, 0.32), inset 0 0 8px rgba(0, 255, 157, 0.16) !important;
    transform: scale(1.15) !important;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.16) 0%, transparent 72%) !important;
}

/* 4. Style Close Button details + Red hover */
.create-modal .modal-close-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.create-modal .modal-close-btn:hover {
    color: #ff3333 !important;
    text-shadow: 0 0 15px #ff3333 !important;
    border-color: #ff3333 !important;
    background: rgba(255, 51, 51, 0.1) !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.4);
    transform: scale(1.1);
}

/* =========================================
   MOBILE RESPONSIVENESS: CREATE GAME MODAL
   ========================================= */

@media (max-width: 768px) {

    /* Shrink the modal boundaries */
    .create-modal-overlay .create-modal {
        width: 95% !important;
        max-height: 90vh !important;
        margin: auto;
        border-radius: 15px !important;
    }

    /* Adjust the header padding and fonts */
    .create-modal .modal-header {
        padding: 15px 20px !important;
    }

    .create-modal .modal-header h2 {
        font-size: 1.2rem !important;
    }

    /* Adjust the body padding and inventory grid layout */
    .create-modal .modal-inventory-body {
        padding: 15px !important;
        max-height: 50vh !important;
        /* give the body a max height so it scrolls */
    }

    .modal-inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }

    /* Shrink item cards */
    .create-modal .modal-item-card {
        padding: 8px !important;
    }

    .create-modal .item-img-container {
        height: 50px !important;
    }

    .create-modal .item-title {
        font-size: 0.75rem !important;
        margin: 5px 0 !important;
    }

    .create-modal .price-val {
        font-size: 0.8rem !important;
    }

    /* Empty state styling for mobile */
    .premium-empty {
        min-height: 250px !important;
        padding: 20px !important;
    }

    .empty-icon-premium {
        font-size: 3.5rem !important;
    }

    .premium-title {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }

    .premium-desc {
        font-size: 0.85rem !important;
    }

    .btn-deposit-premium {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
    }

    /* Stack footer elements */
    .create-modal .modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px 20px !important;
        gap: 15px !important;
    }

    .create-modal .modal-footer-left {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Shrink coin toggles */
    .create-modal .coin-img-select {
        width: 40px !important;
        height: 40px !important;
    }

    /* Shrink selected total text */
    #modal-selected-sum {
        font-size: 1.5rem !important;
    }

    .premium-selection {
        padding: 6px 12px !important;
    }

    /* Expand CREATE button */
    .create-modal .btn-submit-create,
    .create-modal .btn-submit-join {
        width: 100% !important;
        min-width: 100% !important;
        align-self: center !important;
        font-size: 1.1rem !important;
        height: 50px !important;
        padding: 0 !important;
        margin-top: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
}

/* =================================================================
   GIVEAWAY SECTION (DASHBOARD)
   ================================================================= */

.giveaway-section-card {
    border-left: 4px solid rgba(168, 85, 247, 0.5) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.03) 100%) !important;
    padding: 20px 24px !important;
    margin-bottom: 22px !important;
}

.giveaway-section-card:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
}

.giveaway-section-card .box-title {
    border-left: 4px solid #a855f7 !important;
    padding: 14px 20px !important;
    margin-bottom: 18px !important;
}

.ga-count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 50px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    font-size: 0.75rem;
    font-weight: 800;
    color: #c084fc;
    font-family: 'Montserrat', sans-serif;
}

/* Контейнер — вертикальный список */
.ga-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ga-empty {
    text-align: center;
    padding: 24px 20px;
    color: #8fa396;
    font-size: 0.82rem;
}

/* === КАРТОЧКА: одна строка [Картинка | Инфо | Кнопка] === */
.ga-card {
    position: relative;
    background: rgba(10, 18, 14, 0.85);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 14px;
    padding: 16px 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.ga-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a855f7, transparent);
    border-radius: 2px;
    transition: 0.4s;
}

.ga-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(168, 85, 247, 0.08);
}

.ga-card:hover::before {
    left: 3%; right: 3%;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.ga-card--ended {
    opacity: 0.5;
    pointer-events: none;
}

/* Картинка */
.ga-card-img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    border-radius: 12px;
    padding: 6px;
}

.ga-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.25));
}

/* Центральный блок — растягивается */
.ga-card-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Название предмета — полное, в одну строку */
.ga-card-item-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Строка с деталями: цена · by creator · таймер · участники */
.ga-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ga-card-dot {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    font-weight: 900;
    user-select: none;
}

.ga-card-value {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 0.8rem;
    color: #ffe600;
}

.ga-card-value .coin-icon {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 4px rgba(255, 230, 0, 0.4));
}

.ga-card-by {
    font-size: 0.72rem;
    font-weight: 600;
    color: #8fa396;
}

.ga-card-by span {
    color: #c084fc;
    font-weight: 700;
}

.ga-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #c084fc;
    font-family: 'Montserrat', monospace;
}

.ga-timer i {
    font-size: 0.78rem;
}

.ga-participants {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8fa396;
}

.ga-participants i {
    color: #c084fc;
}

/* Кнопка JOIN — справа */
.btn-ga-join {
    flex-shrink: 0;
    min-width: 100px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
}

.btn-ga-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(168, 85, 247, 0.45);
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
}

.btn-ga-join:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-ga-joined {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    color: #c084fc !important;
    box-shadow: none !important;
}

.btn-ga-joined:hover {
    transform: none !important;
}

.btn-ga-force-end {
    padding: 10px 22px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    color: #fbbf24;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.15);
}

.btn-ga-force-end:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.15);
}

.btn-ga-force-end:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none !important;
}

.btn-ga-login {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #8fa396 !important;
    box-shadow: none !important;
    font-size: 0.68rem !important;
}

.btn-ga-login:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
}

.ga-your-badge {
    flex-shrink: 0;
    min-width: 100px;
    text-align: center;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #c084fc;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Мобильная адаптация */
@media (max-width: 600px) {
    .giveaway-section-card {
        padding: 12px 10px !important;
        margin-bottom: 14px !important;
    }

    .giveaway-section-card .box-title {
        padding: 10px 14px !important;
        margin-bottom: 12px !important;
        font-size: 0.78rem;
    }

    .ga-cards-container {
        gap: 8px;
    }

    .ga-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 14px;
        gap: 10px;
    }

    .ga-card-img {
        width: 44px;
        height: 44px;
        min-width: 44px;
        position: absolute;
        top: 14px;
        left: 14px;
    }

    .ga-card-center {
        width: 100%;
        padding-left: 56px;
    }

    .ga-card-item-name {
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ga-card-row {
        gap: 5px;
        flex-wrap: wrap;
    }

    .ga-card-value,
    .ga-card-by,
    .ga-timer,
    .ga-participants {
        font-size: 0.65rem;
    }

    .ga-card-dot {
        font-size: 0.7rem;
    }

    .btn-ga-join,
    .ga-your-badge {
        width: 100%;
        min-width: unset;
        padding: 10px 16px;
        font-size: 0.72rem;
    }

    .ga-count-badge {
        min-width: 24px;
        height: 24px;
        font-size: 0.65rem;
        padding: 0 7px;
    }

    .btn-ga-show-more {
        padding: 10px 14px;
    }

    .ga-show-more-text {
        font-size: 0.6rem;
    }
}

@media (max-width: 400px) {
    .ga-card-center {
        padding-left: 0;
    }

    .ga-card-img {
        position: static;
    }

    .ga-card {
        align-items: center;
        text-align: center;
    }

    .ga-card-row {
        justify-content: center;
    }
}

/* =================================================================
   GIVEAWAY ERROR MODAL
   ================================================================= */
.ga-error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 5, 20, 0.92);
    backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.ga-error-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ga-error-box {
    background: rgba(15, 10, 30, 0.95);
    border: 1px solid rgba(239, 68, 68, 0.25);
    box-shadow:
        0 0 60px rgba(239, 68, 68, 0.1),
        inset 0 0 40px rgba(239, 68, 68, 0.03);
    border-radius: 20px;
    padding: 45px 40px;
    text-align: center;
    width: 420px;
    max-width: 90vw;
    transform: scale(0.9);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ga-error-overlay.active .ga-error-box {
    transform: scale(1);
}

.ga-error-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border: 2px solid rgba(239, 68, 68, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: gaErrorPulse 2s ease-in-out infinite;
}

@keyframes gaErrorPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.ga-error-icon-wrap i {
    font-size: 2.2rem;
    color: #f87171;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.5));
}

.ga-error-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.ga-error-desc {
    color: #9ca3af;
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 28px;
    font-weight: 500;
}

.btn-ga-error-close {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 12px 40px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s;
}

.btn-ga-error-close:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.2);
}

@media (max-width: 480px) {
    .ga-error-box {
        padding: 30px 24px;
        border-radius: 16px;
    }

    .ga-error-icon-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .ga-error-icon-wrap i {
        font-size: 1.8rem;
    }

    .ga-error-title {
        font-size: 1.15rem;
    }

    .ga-error-desc {
        font-size: 0.8rem;
        margin-bottom: 22px;
    }

    .btn-ga-error-close {
        padding: 10px 32px;
        font-size: 0.78rem;
        width: 100%;
    }
}

/* === Скрытые карточки (больше 3) === */
.ga-card-hidden {
    display: none;
}

/* === Кнопка "Show more" === */
.btn-ga-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 1px dashed rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.04);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-ga-show-more:hover {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.08);
    transform: translateY(-1px);
}

.ga-show-more-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ga-show-more-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a855f7;
    opacity: 0.6;
    animation: gaDotPulse 1.4s ease-in-out infinite;
}

.ga-show-more-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ga-show-more-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes gaDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}

.ga-show-more-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: #c084fc;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.btn-ga-show-more.ga-show-more-expanded .ga-show-more-dots span {
    animation: none;
    opacity: 0.5;
}

.btn-ga-show-more.ga-show-more-expanded {
    border-style: solid;
    border-color: rgba(168, 85, 247, 0.15);
    background: rgba(168, 85, 247, 0.02);
}

/* ============================================
   CHAT TAGS (PREFIX BADGES)
   ============================================ */
.chat-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-left: 4px;
    text-shadow: 0 0 8px currentColor;
    opacity: 0.9;
    white-space: nowrap;
}

/* ============================================
   CHAT PREFIX BUTTON (in header)
   ============================================ */
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-prefix-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.85rem;
}

.chat-prefix-btn:hover {
    background: rgba(0, 255, 157, 0.12);
    border-color: rgba(0, 255, 157, 0.25);
    color: var(--primary-green);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.15);
    transform: scale(1.05);
}

/* ============================================
   PREFIX MODAL
   ============================================ */
.prefix-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.prefix-modal-overlay.active {
    display: flex;
}

.prefix-modal {
    background: linear-gradient(165deg, #141822, #0d1117 60%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 157, 0.05);
    animation: prefixModalIn 0.3s ease;
}

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

.prefix-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prefix-modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1.5px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prefix-modal-title i {
    color: var(--primary-green);
    font-size: 1rem;
}

.prefix-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.prefix-modal-close:hover {
    background: rgba(255, 80, 80, 0.15);
    color: #ff5555;
}

/* Games info bar */
.prefix-modal-games-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(0, 255, 157, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.prefix-modal-games-info strong {
    color: var(--primary-green);
    font-weight: 800;
}

.prefix-games-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 255, 157, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 0.85rem;
}

/* Preview */
.prefix-modal-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: 'Montserrat', sans-serif;
}

.prefix-preview-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.3);
}

.prefix-preview-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #00e5ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prefix-preview-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-shadow: 0 0 10px currentColor;
}

/* Section titles */
.prefix-section-title {
    padding: 16px 24px 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}

/* Prefix list */
.prefix-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 8px;
}

/* Custom tag input */
.prefix-custom-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 12px;
    animation: fadeIn 0.25s ease;
}

.prefix-custom-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 157, 0.2);
    background: rgba(0, 255, 157, 0.04);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    outline: none;
    transition: all 0.2s ease;
}

.prefix-custom-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 500;
}

.prefix-custom-input:focus {
    border-color: rgba(0, 255, 157, 0.45);
    background: rgba(0, 255, 157, 0.07);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.1);
}

.prefix-custom-counter {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.prefix-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.prefix-item:hover:not(.locked) {
    background: rgba(0, 255, 157, 0.06);
    border-color: rgba(0, 255, 157, 0.15);
}

.prefix-item.active {
    background: rgba(0, 255, 157, 0.1);
    border-color: rgba(0, 255, 157, 0.3);
    box-shadow: 0 0 12px rgba(0, 255, 157, 0.08);
}

.prefix-item.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.prefix-item-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.prefix-item.active .prefix-item-name {
    color: var(--primary-green);
}

.prefix-item-req {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    gap: 4px;
}

.prefix-item.active .prefix-item-req {
    color: rgba(0, 255, 157, 0.6);
}

/* Color grid */
.prefix-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 24px 16px;
}

.prefix-color-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
}

.prefix-color-dot:hover {
    transform: scale(1.15);
}

.prefix-color-dot.active {
    border-color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 16px currentColor !important;
}

.prefix-color-dot.active::after {
    content: '\f26e';
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Save button */
.prefix-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 48px);
    margin: 8px 24px 24px;
    padding: 12px 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 200, 120, 0.15));
    border: 1px solid rgba(0, 255, 157, 0.25);
    color: var(--primary-green);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.prefix-save-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.3), rgba(0, 200, 120, 0.22));
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.15);
    transform: translateY(-1px);
}

.prefix-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Custom number input (hide default spinners) ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.num-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.num-input-wrap input[type="number"] {
    flex: 1;
    padding-right: 44px;
    min-width: 0;
}
.num-input-btns {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.num-input-btns button {
    width: 28px;
    height: 18px;
    border: none;
    border-radius: 5px;
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.num-input-btns button:hover {
    background: rgba(168, 85, 247, 0.25);
}
.num-input-btns button:active {
    background: rgba(168, 85, 247, 0.35);
}
/* ================================================================
   LANGUAGE DROPDOWN (EN / RU)
   ================================================================ */
.lang-dropdown-wrapper {
    margin-right: 14px;
    position: relative;
}

.btn-lang-toggle {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(168, 85, 247, 0.05));
    border: 1px solid rgba(0, 229, 255, 0.22);
    color: #00e5ff;
    height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: visible;
    text-transform: uppercase;
}

.btn-lang-toggle i.lang-globe-icon {
    font-size: 1.05rem;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
    transition: transform 0.5s ease;
}

.btn-lang-toggle .lang-current-code {
    letter-spacing: 0.08em;
    color: #b8f5ff;
}

.btn-lang-toggle i.lang-chevron {
    font-size: 0.75rem;
    opacity: 0.65;
    transition: transform 0.35s ease;
}

.lang-dropdown-wrapper:hover .btn-lang-toggle {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(168, 85, 247, 0.09));
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.12),
        0 0 60px rgba(0, 229, 255, 0.04),
        inset 0 0 15px rgba(0, 229, 255, 0.05);
    transform: translateY(-1px);
}

.lang-dropdown-wrapper:hover .btn-lang-toggle i.lang-globe-icon {
    transform: rotate(180deg) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55));
}

.lang-dropdown-wrapper:hover .btn-lang-toggle i.lang-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.lang-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    width: 240px;
    padding: 0;
    border-radius: 18px;
    background: rgba(8, 14, 11, 0.96);
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border: 1px solid rgba(0, 229, 255, 0.12);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(0, 229, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transform: translateY(12px) scale(0.94);
    opacity: 0;
    visibility: hidden;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
}

.lang-dropdown-wrapper:hover .lang-dropdown-menu {
    transform: translateY(10px) scale(1);
    opacity: 1;
    visibility: visible;
}

.lang-dd-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 5%,
        #00e5ff 30%,
        #a855f7 70%,
        transparent 95%);
    opacity: 0.85;
}

.lang-dd-header {
    padding: 16px 18px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-dd-icon-mini {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(0, 229, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00e5ff;
    font-size: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
}

.lang-dd-title-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lang-dd-title-copy span {
    color: #e0f7fa;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.lang-dd-title-copy small {
    color: rgba(224, 247, 250, 0.45);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.lang-dd-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 229, 255, 0.15),
        transparent);
    margin: 0 14px;
}

.lang-dd-options {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.015);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.lang-option:hover {
    background: rgba(0, 229, 255, 0.07);
    border-color: rgba(0, 229, 255, 0.18);
    transform: translateX(3px);
}

.lang-option.active {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12), rgba(168, 85, 247, 0.06));
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.06);
}

.lang-flag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 255, 157, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: #b8f5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.08);
}

.lang-option[data-lang="ru"] .lang-flag {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(255, 82, 82, 0.1));
    border-color: rgba(168, 85, 247, 0.3);
    color: #e0d4ff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.1);
}

.lang-option-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.lang-option-name {
    color: #e0f7fa;
    font-size: 0.88rem;
    font-weight: 600;
}

.lang-option.active .lang-option-name {
    color: #ffffff;
}

.lang-option-native {
    color: rgba(224, 247, 250, 0.45);
    font-size: 0.72rem;
    margin-top: 2px;
}

.lang-option-check {
    color: #00e5ff;
    font-size: 0.95rem;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

.lang-option.active .lang-option-check {
    opacity: 1;
    transform: scale(1);
}

/* Mobile language picker */
.mobile-lang-section {
    padding: 16px 18px 10px;
    border-top: 1px solid rgba(0, 229, 255, 0.08);
    margin-top: 10px;
}

.mobile-lang-title {
    color: rgba(224, 247, 250, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-lang-title i {
    color: #00e5ff;
}

.mobile-lang-options {
    display: flex;
    gap: 8px;
}

.mobile-lang-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.15);
    background: rgba(0, 229, 255, 0.04);
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-lang-option.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(168, 85, 247, 0.08));
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.12);
}

.mobile-lang-option .lang-flag {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
}

.mobile-lang-option-text {
    color: #e0f7fa;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .lang-dropdown-wrapper { display: none; }
}

/* =================================================================
   FLIP RESULT — EPIC REDESIGN (overrides earlier styles)
   ================================================================= */

.flip-overlay.active .flip-result-box.show {
    animation: epicResultIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes epicResultIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotateX(45deg); filter: blur(20px); }
    55%  { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1.06) rotateX(-3deg); }
    75%  { transform: translate(-50%, -50%) scale(0.985) rotateX(1deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0); filter: blur(0); }
}

/* === Box itself — heavier, holographic edge === */
.flip-overlay .flip-result-box {
    border-radius: 32px !important;
    padding: 56px 70px 48px !important;
    min-width: 540px !important;
    max-width: 580px !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    overflow: visible !important;
}

/* Top shimmer line — animated traveling highlight */
.flip-overlay .flip-result-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 1.5px !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.6) 50%,
        transparent 100%) !important;
    background-size: 50% 100% !important;
    background-repeat: no-repeat !important;
    animation: epicTopShimmer 3.2s ease-in-out infinite !important;
    z-index: 3 !important;
    opacity: 1 !important;
    -webkit-mask: none !important;
            mask: none !important;
}
@keyframes epicTopShimmer {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

.flip-overlay .flip-result-box.result-win::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,255,157,0.85) 50%,
        transparent 100%) !important;
    background-size: 50% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 20px rgba(0,255,157,0.6) !important;
}
.flip-overlay .flip-result-box.result-lose::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,77,77,0.85) 50%,
        transparent 100%) !important;
    background-size: 50% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 20px rgba(255,77,77,0.5) !important;
}

/* Corner accents — L-shaped brackets in each corner */
.flip-overlay .flip-result-box .corner-accent {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    pointer-events: none;
    opacity: 0.65;
}
.flip-overlay .flip-result-box .corner-accent.tl { top: 14px;    left: 14px;    border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.flip-overlay .flip-result-box .corner-accent.tr { top: 14px;    right: 14px;   border-left: none;  border-bottom: none; border-radius: 0 8px 0 0; }
.flip-overlay .flip-result-box .corner-accent.bl { bottom: 14px; left: 14px;    border-right: none; border-top: none;    border-radius: 0 0 0 8px; }
.flip-overlay .flip-result-box .corner-accent.br { bottom: 14px; right: 14px;   border-left: none;  border-top: none;    border-radius: 0 0 8px 0; }

.flip-overlay .flip-result-box.result-win  .corner-accent { color: #00ff9d; filter: drop-shadow(0 0 8px rgba(0,255,157,0.6)); }
.flip-overlay .flip-result-box.result-lose .corner-accent { color: #ff4d4d; filter: drop-shadow(0 0 8px rgba(255,77,77,0.5)); }

/* Light beams behind icon (win only) */
.flip-overlay .flip-result-box.result-win::after {
    content: '' !important;
    position: absolute !important;
    top: -120% !important;
    left: 50% !important;
    width: 90% !important;
    height: 250% !important;
    transform: translateX(-50%) !important;
    background: conic-gradient(from 270deg at 50% 50%,
        transparent 0deg, rgba(0,255,157,0.25) 8deg, transparent 16deg,
        transparent 60deg, rgba(0,229,255,0.18) 70deg, transparent 80deg,
        transparent 130deg, rgba(0,255,157,0.22) 140deg, transparent 150deg,
        transparent 200deg, rgba(0,229,255,0.18) 210deg, transparent 220deg,
        transparent 270deg, rgba(0,255,157,0.25) 280deg, transparent 290deg,
        transparent 360deg) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    animation: epicBeamsFade 2.4s 0.4s ease-out forwards, epicBeamsRotate 14s linear infinite !important;
    border-radius: 50% !important;
    filter: blur(2px) !important;
    z-index: -1 !important;
}
@keyframes epicBeamsFade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.55; } }
@keyframes epicBeamsRotate { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

/* === ICON: massive, with double-halo + pulsing core === */
.flip-overlay .result-icon {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto 28px !important;
    font-size: 2.8rem !important;
    position: relative !important;
    z-index: 2 !important;
}

.flip-overlay .result-icon::after {
    content: '' !important;
    position: absolute !important;
    inset: -28px !important;
    border-radius: 50% !important;
    z-index: -2 !important;
    opacity: 0;
    animation: epicHaloPulse 1.8s 0.4s ease-in-out infinite !important;
}

.flip-overlay .result-win .result-icon {
    background: radial-gradient(circle at 30% 30%,
        rgba(140, 255, 200, 0.5) 0%,
        rgba(0, 255, 157, 0.25) 35%,
        rgba(0, 100, 70, 0.05) 80%) !important;
    border: 2px solid rgba(0, 255, 157, 0.55) !important;
    box-shadow:
        0 0 0 6px rgba(0, 255, 157, 0.05),
        0 0 60px rgba(0, 255, 157, 0.45),
        0 0 140px rgba(0, 255, 157, 0.18),
        inset 0 0 24px rgba(255, 255, 255, 0.15) !important;
    color: #d4ffec !important;
    text-shadow: 0 0 20px rgba(0, 255, 157, 0.9) !important;
}
.flip-overlay .result-win .result-icon::after {
    background: radial-gradient(circle, rgba(0, 255, 157, 0.4), transparent 65%) !important;
}

.flip-overlay .result-lose .result-icon {
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 180, 180, 0.45) 0%,
        rgba(255, 77, 77, 0.22) 35%,
        rgba(80, 20, 20, 0.05) 80%) !important;
    border: 2px solid rgba(255, 77, 77, 0.5) !important;
    box-shadow:
        0 0 0 6px rgba(255, 77, 77, 0.05),
        0 0 60px rgba(255, 77, 77, 0.4),
        0 0 140px rgba(255, 77, 77, 0.15),
        inset 0 0 24px rgba(255, 255, 255, 0.1) !important;
    color: #ffd4d4 !important;
    text-shadow: 0 0 20px rgba(255, 77, 77, 0.9) !important;
}
.flip-overlay .result-lose .result-icon::after {
    background: radial-gradient(circle, rgba(255, 77, 77, 0.35), transparent 65%) !important;
}

@keyframes epicHaloPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.4; }
    50%      { transform: scale(1.18); opacity: 0.85; }
}

/* === TITLE: heavier, layered, chroma === */
.flip-overlay .result-title {
    font-size: 4rem !important;
    font-weight: 900 !important;
    letter-spacing: 10px !important;
    margin-bottom: 6px !important;
    line-height: 0.95 !important;
    position: relative !important;
}

.flip-overlay .result-win .result-title {
    color: #c2ffe2 !important;
    background: linear-gradient(180deg, #d4fff0 0%, #00ff9d 50%, #00b46e 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 28px rgba(0, 255, 157, 0.55)) drop-shadow(0 0 60px rgba(0, 255, 157, 0.25)) !important;
    text-shadow: none !important;
    animation: epicTitleGlow 2s ease-in-out infinite !important;
}
.flip-overlay .result-lose .result-title {
    color: #ffd4d4 !important;
    background: linear-gradient(180deg, #ffe4e4 0%, #ff4d4d 50%, #b22e2e 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 28px rgba(255, 77, 77, 0.5)) drop-shadow(0 0 60px rgba(255, 77, 77, 0.2)) !important;
    text-shadow: none !important;
    animation: epicTitleShake 0.5s 0.4s ease-out !important;
}

@keyframes epicTitleGlow {
    0%, 100% { filter: drop-shadow(0 0 28px rgba(0, 255, 157, 0.5)) drop-shadow(0 0 60px rgba(0, 255, 157, 0.2)); }
    50%      { filter: drop-shadow(0 0 38px rgba(0, 255, 157, 0.8)) drop-shadow(0 0 90px rgba(0, 255, 157, 0.35)); }
}
@keyframes epicTitleShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-8px) skewX(-2deg); }
    40%  { transform: translateX(7px) skewX(2deg); }
    60%  { transform: translateX(-4px) skewX(-1deg); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* === SUBTITLE === */
.flip-overlay .result-subtitle {
    font-size: 0.72rem !important;
    letter-spacing: 6px !important;
    text-transform: uppercase !important;
    margin-bottom: 36px !important;
    font-weight: 700 !important;
    opacity: 0.6;
}

/* === BET ROW — premium reward card === */
.flip-overlay .result-bet-row {
    padding: 22px 40px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 12px 40px rgba(0,0,0,0.35) !important;
    position: relative !important;
    overflow: hidden !important;
}

.flip-overlay .result-win .result-bet-row {
    background: linear-gradient(135deg, rgba(0,255,157,0.12), rgba(0,229,255,0.04)) !important;
    border-color: rgba(0,255,157,0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(0,255,157,0.18),
        0 12px 40px rgba(0,0,0,0.35),
        0 0 30px rgba(0,255,157,0.08) !important;
}
.flip-overlay .result-lose .result-bet-row {
    background: linear-gradient(135deg, rgba(255,77,77,0.1), rgba(255,138,61,0.03)) !important;
    border-color: rgba(255,77,77,0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,77,77,0.15),
        0 12px 40px rgba(0,0,0,0.35),
        0 0 30px rgba(255,77,77,0.06) !important;
}

/* Sweeping shine on bet card */
.flip-overlay .result-bet-row::after {
    content: '' !important;
    position: absolute !important;
    top: 0; bottom: 0; left: -60% !important;
    width: 50% !important;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.18), transparent) !important;
    animation: epicSweep 3.5s 0.8s ease-in-out infinite !important;
    pointer-events: none !important;
    height: auto !important;
}
@keyframes epicSweep {
    0%   { left: -60%; }
    60%  { left: 110%; }
    100% { left: 110%; }
}

.flip-overlay .result-bet-value {
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}
.flip-overlay .result-win .result-bet-value {
    background: linear-gradient(180deg, #fff 0%, #00ff9d 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 12px rgba(0,255,157,0.4));
}
.flip-overlay .result-lose .result-bet-value {
    background: linear-gradient(180deg, #fff 0%, #ff8a3d 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 12px rgba(255,77,77,0.35));
}

.flip-overlay .result-coin-img {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.4)) !important;
    animation: epicCoinSpin 4s linear infinite !important;
}
@keyframes epicCoinSpin {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(360deg); }
}

/* === CLOSE button — premium === */
.flip-overlay .btn-close-flip {
    margin-top: 6px !important;
    padding: 17px 64px !important;
    font-size: 0.82rem !important;
    letter-spacing: 4px !important;
    border-radius: 14px !important;
}

/* === MOBILE === */
@media (max-width: 520px) {
    .flip-overlay .flip-result-box {
        min-width: 0 !important;
        padding: 40px 24px 32px !important;
    }
    .flip-overlay .result-icon {
        width: 84px !important;
        height: 84px !important;
        font-size: 2.1rem !important;
    }
    .flip-overlay .result-title {
        font-size: 2.6rem !important;
        letter-spacing: 6px !important;
    }
    .flip-overlay .result-bet-value {
        font-size: 1.9rem !important;
    }
    .flip-overlay .result-coin-img {
        width: 24px !important;
        height: 24px !important;
    }
}