* {
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Circe, "sans-serif", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
}

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

@font-face {
    font-family: Circe;
    src: local("Circe"), local("Circe-Regular");
    font-weight: 400;
    font-style: normal;
}

/* CSS Variables */
html.dark:root {
    --background: 28, 33, 51;
    --bg-main: 33, 39, 59;
    --bg-secondary: 39, 46, 69;
    --bg-secondary-hover: var(--bg-secondary);
    --bg-light: 26, 31, 49;
    --bg-light-hover: 40, 46, 68;
    --bg-badge: 22, 27, 43;
    --bg-classic-fire: 44, 50, 71;
    --bg-classic-fire-badge: 76, 81, 103;
    --bg-classic-fire-text: 148, 157, 197;
    --bg-logout: 35, 41, 62;
    --text-main: 196, 204, 224;
    --text-primary: 43, 142, 222;
    --text-secondary: 196, 204, 224;
    --text-secondary-light: 255, 255, 255;
    --text-logout: 122, 134, 174;
    --shadow-main: unset;
    --border-main: 57, 62, 81;
    --border-secondary: 47, 52, 74;
    --border-light: 47, 52, 74;
    --border-secondary-hover: 87, 96, 128;
    --border-wheel: 44, 50, 73;
    --border-avatar: 44, 50, 71;
}

:root {
    --background: 246, 247, 251;
    --bg-main: 255, 255, 255;
    --bg-white-primary: 255, 255, 255;
    --bg-secondary: 247, 248, 252;
    --bg-secondary-hover: 230, 232, 240;
    --bg-light: 235, 238, 248;
    --bg-light-hover: 222, 226, 240;
    --bg-badge: 244, 247, 252;
    --bg-classic-fire: 244, 246, 251;
    --bg-classic-fire-badge: 215, 221, 236;
    --bg-classic-fire-text: 59, 64, 70;
    --bg-logout: 220, 225, 241;
    --text-main: 43, 43, 43;
    --text-primary: 31, 106, 237;
    --text-secondary: 85, 89, 100;
    --text-secondary-light: 86, 90, 101;
    --text-logout: 185, 195, 210;
    --shadow-main: 0px 7px 29px 0px rgb(222 226 241 / 33%);
    --border-main: 221, 227, 233;
    --border-secondary: 217, 222, 240;
    --border-light: 231, 236, 241;
    --border-secondary-hover: 219, 225, 231;
    --border-wheel: 233, 240, 250;
    --border-avatar: 244, 245, 249;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

html {
    background-color: rgba(var(--background), 1);
    color: rgba(var(--text-main), 1);
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(var(--bg-secondary-hover), 1);
}

::-webkit-scrollbar-track {
    background-color: rgba(var(--background), 1);
    border-radius: 6px;
}

@font-face {
    font-family: 'Circe';
    font-style: normal;
    font-weight: 400;
    src: local("Circe"), local("Circe-Regular");
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #0d1117;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    overflow-x: hidden;
    padding-top: 85px;
    scroll-behavior: smooth;
    zoom: 0.85;
    -moz-transform: scale(0.85);
    -moz-transform-origin: top center;
}

html, body {
    max-width: 100%;
}

@supports (padding: max(0px)) {
    body {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

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

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }
}

h1 {
    text-align: center;
    color: white;
    font-size: 3rem;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1600px) {
    h1 {
        font-size: 3.5rem;
    }
}

@media (min-width: 1920px) {
    h1 {
        font-size: 4rem;
    }
}

.info-section {
    background: #20242d;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1600px) {
    .info-section {
        padding: 60px 50px;
        border-radius: 30px;
    }
}

.info-content h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
}

.info-content > p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.info-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: #2a2f3a;
    padding: 30px;
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.feature:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    border-color: rgba(3, 120, 252, 0.2);
    background: #2d3340;
}

@media (min-width: 1600px) {
    .feature {
        padding: 35px;
    }
}

.feature-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.feature h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.feature p {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.5;
}

.blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 35px;
    padding: 20px;
}

@media (min-width: 1400px) {
    .blocks {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 40px;
    }
}

@media (min-width: 1920px) {
    .blocks {
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        gap: 45px;
    }
}

.block {
    background: #20242d;
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(3, 120, 252, 0.1), rgba(2, 98, 214, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.block:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(3, 120, 252, 0.15);
    border-color: rgba(3, 120, 252, 0.3);
}

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

.block h2,
.block p,
.block .promo-code,
.block .activate-btn {
    position: relative;
    z-index: 1;
}

@media (min-width: 1600px) {
    .block {
        padding: 40px;
        border-radius: 20px;
    }
}

.block h2 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}

.block p {
    color: #ccc;
    line-height: 1.6;
    text-align: center;
    font-size: 1rem;
}

.promo-code {
    background: #2a2f3a;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.promo-code span {
    color: #ccc;
    font-size: 1.1rem;
}

.promo-code strong {
    color: white;
    font-size: 1.2rem;
}

.copy-btn {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(3, 120, 252, 0.3);
}

.copy-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.copy-btn:hover::before {
    width: 200px;
    height: 200px;
}

.copy-btn:hover {
    background: linear-gradient(135deg, #0262d6, #0151b8);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(3, 120, 252, 0.5);
}

.copy-btn:active {
    transform: translateY(-1px) scale(0.98);
}

@media (min-width: 1600px) {
    .copy-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
}

.activate-btn {
    display: block;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(3, 120, 252, 0.4);
}

.activate-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.activate-btn:hover::before {
    width: 300px;
    height: 300px;
}

.activate-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(3, 120, 252, 0.6);
    background: linear-gradient(135deg, #0262d6, #0151b8);
}

@media (min-width: 1600px) {
    .activate-btn {
        padding: 16px 32px;
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    body {
        padding: 20px 10px;
    }
    
    h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .info-section {
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    
    .info-content h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .info-content > p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .info-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature {
        padding: 20px;
    }
    
    .feature-icon {
        font-size: 2rem;
    }
    
    .feature h3 {
        font-size: 1.1rem;
    }
    
    .feature p {
        font-size: 0.9rem;
    }
    
    .blocks {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
    }
    
    .block {
        padding: 20px;
    }
    
    .block h2 {
        font-size: 1.5rem;
    }
    
    .block p {
        font-size: 0.95rem;
    }
    
    .block svg,
    .block img {
        max-width: 140px !important;
        height: auto !important;
    }
    
    .promo-code {
        flex-direction: column;
        text-align: center;
        padding: 12px;
        gap: 12px;
    }
    
    .promo-code span {
        font-size: 1rem;
    }
    
    .promo-code strong {
        font-size: 1.1rem;
    }
    
    .copy-btn {
        width: 100%;
        padding: 10px;
    }
    
    .activate-btn {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px 8px;
    }
    
    h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .info-section {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 15px;
    }
    
    .info-content h2 {
        font-size: 1.3rem;
    }
    
    .info-content > p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .info-features {
        gap: 15px;
    }
    
    .feature {
        padding: 15px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .blocks {
        gap: 15px;
        padding: 5px;
    }
    
    .block {
        padding: 15px;
        border-radius: 12px;
    }
    
    .block h2 {
        font-size: 1.3rem;
    }
    
    .block p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .block svg,
    .block img {
        max-width: 120px !important;
        height: auto !important;
    }
    
    .promo-code {
        padding: 10px;
        gap: 10px;
    }
    
    .promo-code span {
        font-size: 0.9rem;
    }
    
    .promo-code strong {
        font-size: 1rem;
    }
    
    .copy-btn {
        padding: 12px;
        font-size: 0.95rem;
    }
    
    .activate-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}
/* Social Networks Section */
.social-section {
    background: linear-gradient(135deg, #0f172a 0%, #0a2a4a 50%, #0f172a 100%);
    border-radius: 16px;
    padding: 30px 40px;
    margin: 0 auto 50px;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    border: 1px solid rgba(4,124,252,0.2);
    position: relative;
    overflow: hidden;
}

.social-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #047CFC, transparent);
}

.social-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 15px;
}

.social-section p {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #2a2f3a;
    color: white;
    text-decoration: none;
    padding: 16px 30px;
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.social-link:hover::before {
    width: 300px;
    height: 300px;
}

.social-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.social-link.telegram {
    background: linear-gradient(135deg, #0088cc, #229ed9);
}

.social-link.telegram:hover {
    background: linear-gradient(135deg, #006699, #1a7db8);
    box-shadow: 0 12px 35px rgba(0, 136, 204, 0.5);
}

@media (min-width: 1600px) {
    .social-link {
        padding: 18px 35px;
        font-size: 1.15rem;
    }
}

.social-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Mobile styles for social section */
@media (max-width: 768px) {
    .social-section {
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    
    .social-section h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }
    
    .social-section p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .social-links {
        gap: 15px;
    }
    
    .social-link {
        padding: 12px 20px;
        font-size: 1rem;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .social-section {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
    
    .social-section h2 {
        font-size: 1.3rem;
    }
    
    .social-section p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .social-links {
        gap: 12px;
    }
    
    .social-link {
        padding: 10px 18px;
        font-size: 0.95rem;
        gap: 8px;
    }
    
    .social-link svg {
        width: 20px;
        height: 20px;
    }
}
/* ============================================
   NAVIGATION - НОВЫЙ ЕДИНЫЙ ДИЗАЙН
   ============================================ */

/* ============================================
   НАВИГАЦИЯ - СОВРЕМЕННАЯ
   ============================================ */

/* Hide mobile navigation on desktop */
.mobile-header,
.mobile-bottom-nav,
.mobile-menu-overlay,
.mobile-menu-sheet {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-header,
    .mobile-bottom-nav {
        display: flex !important;
    }
    .mobile-menu-overlay,
    .mobile-menu-sheet {
        display: block !important;
    }
    .mobile-menu-overlay:not(.active),
    .mobile-menu-sheet:not(.active) {
        display: none !important;
    }
}

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(13, 17, 23, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: none;
    z-index: 1000;
}

.navigation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,0.7) 50%, transparent 100%);
}

.nav-container {
    max-width: 100%;
    height: 70px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    margin-left: 200px !important;
}

.nav-logo:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.nav-logo svg {
    height: 46px !important;
    width: auto !important;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    align-items: center;
    justify-self: center;
    flex-shrink: 0;
}

.nav-menu li {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, #047CFC 0%, #0066cc 100%);
}

#authButton {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 150px !important;
}

.auth-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.auth-btn.login {
    color: #fff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35);
}

.auth-btn.login:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45);
    transform: translateY(-1px);
    color: #fff;
}

.auth-btn.register {
    color: #fff;
    background: linear-gradient(135deg, #047CFC 0%, #0066cc 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(4, 124, 252, 0.35);
}

.auth-btn.register:hover {
    background: linear-gradient(135deg, #0066cc 0%, #0055aa 100%);
    box-shadow: 0 6px 20px rgba(4, 124, 252, 0.45);
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

@media (max-width: 1200px) {
    .nav-container {
        padding: 0 25px;
    }
    .nav-link {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 2px;
    }
    .nav-link {
        padding: 8px 10px;
        font-size: 12px;
    }
    .auth-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ============================================
   MOBILE STYLES
   ============================================ */
@media (max-width: 768px) {
    .navigation {
        height: 65px;
    }
    
    .nav-container {
        height: 65px;
        padding: 0 20px;
        justify-content: space-between;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    #authButton {
        display: none;
    }
    
    .nav-menu {
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding: 25px 20px;
        gap: 8px;
        background: rgba(13, 17, 23, 0.98);
        backdrop-filter: blur(20px);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .nav-menu > li {
        width: 100%;
    }
    
    .nav-link {
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
        font-size: 16px;
        border-radius: 12px;
    }
    
    .nav-dropdown {
        width: 100%;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.03);
    }
    
    .nav-dropdown.active .dropdown-menu {
        display: block;
    }
    
    #authButton {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    
    #authButton .nav-link {
        width: 100%;
    }
    
    body {
        padding-top: 75px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 12px;
        gap: 12px;
    }

    .nav-logo svg {
        width: 96px;
        height: 36px;
    }

    #authButton {
        gap: 6px;
    }

    #authButton .nav-link {
        padding: 0 10px;
        height: 40px;
        font-size: 0.9rem;
        border-radius: 8px;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .nav-link,
    .copy-btn,
    .activate-btn,
    .submit-btn,
    .rating-sidebar-btn {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
     .online-counter {
         top: 10px;
         left: 10px;
         padding: 6px 12px;
         border-radius: 16px;
     }

     .online-text {
         font-size: 0.8rem;
     }

     .chat-window {
         right: 10px;
         left: 10px;
     }
 }

@media (max-width: 480px) {
     .online-counter {
         top: 10px;
         left: 8px;
         padding: 6px 10px;
     }

     .online-text {
         font-size: 0.75rem;
     }
 }

/* Fix auth modal sizes on mobile - make them consistent */
@media (max-width: 768px) {
    /* Модальные окна авторизации - одинаковый размер */
    [class*="modal"], 
    [class*="popup"],
    [class*="dialog"] {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* Auth/Login/Register pages: override inline page styles on mobile */
@media (max-width: 768px) {
    .auth-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 24px auto !important;
        padding: 0 12px !important;
        box-sizing: border-box;
    }

    .auth-box {
        padding: 22px !important;
        border-radius: 16px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .auth-container {
        margin: 16px auto !important;
        padding: 0 10px !important;
    }

    .auth-box {
        padding: 18px !important;
    }
}

/* Profile page: prevent sidebar/columns from pushing layout off-screen */
@media (max-width: 1024px) {
    .profile-container {
        flex-direction: column !important;
        padding: 20px 12px !important;
    }

    .profile-sidebar {
        width: 100% !important;
        position: static !important;
        top: auto !important;
    }

    .profile-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
}

/* Auth button container sometimes has inline fixed widths; force mobile-friendly */
@media (max-width: 768px) {
    #authButton {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Global mobile anti-overflow (applies site-wide) */
@media (max-width: 768px) {
     img, svg, video, canvas {
         max-width: 100%;
         height: auto;
     }

     pre, code {
         max-width: 100%;
         overflow-x: auto;
     }

     table {
         display: block;
         max-width: 100%;
         overflow-x: auto;
     }
 }

/* FINAL NAV MOBILE OVERRIDES (to win over duplicated desktop rules below) */
@media (max-width: 768px) {
    .nav-menu {
        margin: 0 !important;
        left: -100% !important;
        align-items: stretch !important;
    }

    .nav-menu.active {
        left: 0 !important;
    }

    .nav-menu > li {
        width: 100% !important;
    }

    .nav-link {
        width: 100% !important;
    }

    .dropdown-menu {
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================
   END NAVIGATION
   ============================================ */

/* Online Counter in Navigation */
.online-counter {
    position: fixed;
    left: 5px;
    top: 18px;
    background: rgba(0, 212, 170, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 212, 170, 0.3);
    z-index: 1001;
}

.online-dot {
    width: 8px;
    height: 8px;
    background: #00d4aa;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.6);
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.online-text {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

#onlineCount {
    color: #00d4aa;
    font-weight: bold;
}

/* Footer Styles */
.footer {
    margin-top: 60px;
    padding: 40px 20px 30px;
    background: transparent;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(4,124,252,0.8), transparent);
}

.footer-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-content p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.footer-content a {
    color: #0088cc;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.footer-content a:hover {
    opacity: 0.8;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer {
        margin-top: 40px;
        padding: 30px 15px 25px;
    }
    
    .footer-content p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .footer {
        margin-top: 30px;
        padding: 25px 10px 20px;
    }
    
    .footer-content p {
        font-size: 0.8rem;
    }
}
/* New Sections Styles */
.bonuses-section, .how-to-play-section, .faq-section {
    background: #20242d;
    border-radius: 20px;
    padding: 50px 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.section-content {
    max-width: 1000px;
    margin: 0 auto;
}

.section-content h2 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 15px;
    text-align: center;
}

.section-content > p {
    color: #ccc;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Bonuses Section */
.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.bonus-card {
    background: #2a2f3a;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: transform 0.3s ease;
}

.bonus-card:hover {
    transform: translateY(-5px);
}

.bonus-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.bonus-card h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.bonus-amount {
    color: #0378fc;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.bonus-card p {
    color: #ccc;
    margin-bottom: 20px;
    font-size: 1rem;
}

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

.bonus-card li {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.bonus-card li::before {
    content: '✓';
    color: #0378fc;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* How to Play Section */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.step-card {
    background: #2a2f3a;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
}

.step-card:hover {
    transform: translateY(-5px);
}

.step-number {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
}

.step-card h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.step-card p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ Section */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
}

.faq-item {
    background: #2a2f3a;
    padding: 25px;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-3px);
}

.faq-item h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.faq-item p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Mobile Styles for New Sections */
@media (max-width: 768px) {
    .bonuses-section, .how-to-play-section, .faq-section {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    
    .section-content h2 {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
    .section-content > p {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .bonus-grid, .steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .bonus-card, .step-card {
        padding: 25px;
    }
    
    .bonus-amount {
        font-size: 2rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .faq-item {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .bonuses-section, .how-to-play-section, .faq-section {
        padding: 25px 15px;
        margin-bottom: 25px;
        border-radius: 15px;
    }
    
    .section-content h2 {
        font-size: 1.7rem;
    }
    
    .section-content > p {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }
    
    .bonus-card, .step-card {
        padding: 20px;
    }
    
    .bonus-icon {
        font-size: 2.5rem;
    }
    
    .bonus-amount {
        font-size: 1.8rem;
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .faq-item {
        padding: 18px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
}
/* Copy Notification Styles */
.copy-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(3, 120, 252, 0.3);
    z-index: 10000;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.copy-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.notification-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    animation: checkmark 0.6s ease-in-out;
}

.notification-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

@keyframes checkmark {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

/* Mobile notification styles */
@media (max-width: 768px) {
    .copy-notification {
        top: 80px;
        right: 15px;
        left: 15px;
        right: 15px;
        transform: translateY(-100px);
    }
    
    .copy-notification.show {
        transform: translateY(0);
    }
    
    .notification-content {
        padding: 14px 18px;
        justify-content: center;
    }
    
    .notification-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .notification-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .copy-notification {
        top: 70px;
        right: 10px;
        left: 10px;
    }
    
    .notification-content {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .notification-icon {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
    
    .notification-text {
        font-size: 13px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .block:hover,
    .feature:hover,
    .bonus-card:hover,
    .step-card:hover,
    .faq-item:hover {
        transform: none;
    }
    
    .block:active {
        transform: scale(0.98);
    }
    
    .activate-btn:active,
    .copy-btn:active {
        transform: scale(0.95);
    }
    
    .social-link:hover {
        transform: none;
    }
    
    .social-link:active {
        transform: scale(0.98);
    }
}

/* Improve tap targets for mobile */
@media (max-width: 768px) {
    button, a, .nav-link, .nav-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    
    .copy-btn, .activate-btn {
        min-height: 44px;
        padding: 12px 20px;
    }
    
    .social-link {
        min-height: 44px;
    }
}

/* Prevent text selection on interactive elements */
.nav-toggle, .copy-btn, .activate-btn, .social-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding-top: 60px;
    }
    
    .nav-container {
        padding: 10px 15px;
    }
    
    .nav-menu {
        top: 60px;
        height: calc(100vh - 60px);
        padding-top: 30px;
    }
    
    h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .info-section, .bonuses-section, 
    .how-to-play-section, .faq-section,
    .social-section {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
}

/* Desktop Enhancements for Large Screens */
@media (min-width: 1400px) {
    .info-section,
    .bonuses-section,
    .how-to-play-section,
    .faq-section,
    .social-section {
        padding: 60px 50px;
        border-radius: 25px;
    }
    
    .section-content h2 {
        font-size: 2.8rem;
    }
    
    .section-content > p {
        font-size: 1.25rem;
    }
}

@media (min-width: 1920px) {
    .info-section,
    .bonuses-section,
    .how-to-play-section,
    .faq-section,
    .social-section {
        padding: 70px 60px;
        border-radius: 30px;
    }
    
    .section-content h2 {
        font-size: 3rem;
    }
    
    .section-content > p {
        font-size: 1.3rem;
    }
    
    .bonus-amount {
        font-size: 3rem;
    }
    
    .bonus-card h3,
    .step-card h3 {
        font-size: 1.5rem;
    }
}

/* Smooth Transitions for Desktop */
@media (min-width: 1024px) {
    * {
        scroll-behavior: smooth;
    }
    
    .block,
    .feature,
    .bonus-card,
    .step-card,
    .faq-item {
        will-change: transform;
    }
}

/* Enhanced Grid Layouts for Large Screens */
@media (min-width: 1600px) {
    .info-features {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 35px;
    }
    
    .bonus-grid,
    .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 35px;
    }
    
    .faq-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 30px;
    }
}

@media (min-width: 1920px) {
    .info-features {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 40px;
    }
    
    .bonus-grid,
    .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 40px;
    }
    
    .faq-grid {
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 35px;
    }
}

/* Grid Optimization for Ultra-Wide Screens */
@media (min-width: 2560px) {
    .container {
        max-width: 2200px;
    }
    
    .blocks {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 50px;
    }
}

/* Cursor Effects for Interactive Elements */
@media (min-width: 1024px) {
    .activate-btn,
    .copy-btn,
    .nav-link,
    .social-link {
        cursor: pointer;
    }
    
    .block:hover,
    .feature:hover {
        cursor: pointer;
    }
}

/* Promo Code Enhanced Styling */
@media (min-width: 1024px) {
    .promo-code {
        background: linear-gradient(135deg, #2a2f3a, #2d3340);
        padding: 18px;
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    
    .promo-code:hover {
        background: linear-gradient(135deg, #2d3340, #323845);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 1600px) {
    .promo-code {
        padding: 20px;
    }
    
    .promo-code span {
        font-size: 1.15rem;
    }
    
    .promo-code strong {
        font-size: 1.3rem;
    }
}

/* Rating Sidebar Widget */
.rating-sidebar {
    position: fixed;
    right: 20px;
    top: 120px;
    width: 280px;
    background: #20242d;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 999;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    scroll-behavior: smooth;
}

/* Custom Scrollbar for Rating Sidebar */
.rating-sidebar::-webkit-scrollbar {
    width: 8px;
}

.rating-sidebar::-webkit-scrollbar-track {
    background: #2a2f3a;
    border-radius: 10px;
}

.rating-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.rating-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0262d6, #0378fc);
}

/* Firefox Scrollbar */
.rating-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #0378fc #2a2f3a;
}

.rating-sidebar.hidden {
    transform: translateX(320px);
    opacity: 0;
    pointer-events: none;
}

/* Rating Toggle Button */
.rating-toggle-btn {
    position: fixed;
    right: 20px;
    top: 120px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(3, 120, 252, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(3, 120, 252, 0.6);
}

.rating-toggle-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

/* Close Button for Rating Sidebar */
.rating-close-btn {
    position: fixed;
    right: 310px;
    top: 120px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ff4757, #e84118);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

.rating-close-btn.visible {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
}

.rating-close-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.6);
}

/* Close Button Inside Sidebar */
.rating-close-btn-inside {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: rgba(255, 71, 87, 0.2);
    border: 1px solid rgba(255, 71, 87, 0.5);
    border-radius: 50%;
    color: #ff4757;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.rating-close-btn-inside:hover {
    background: rgba(255, 71, 87, 0.3);
    transform: rotate(90deg);
}

.rating-sidebar h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.rating-sidebar-item {
    background: #2a2f3a;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    animation: slideInRight 0.5s ease forwards;
    opacity: 0;
}

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

.rating-sidebar-item:nth-child(2) {
    animation-delay: 0.1s;
}

.rating-sidebar-item:nth-child(3) {
    animation-delay: 0.2s;
}

.rating-sidebar-item:nth-child(4) {
    animation-delay: 0.3s;
}

.rating-sidebar-item:nth-child(5) {
    animation-delay: 0.4s;
}

.rating-sidebar-item:nth-child(6) {
    animation-delay: 0.5s;
}

.rating-sidebar-item:nth-child(7) {
    animation-delay: 0.6s;
}

.rating-sidebar-item:nth-child(8) {
    animation-delay: 0.7s;
}

.rating-sidebar-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 4px 15px rgba(3, 120, 252, 0.3);
}

.rating-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rating-sidebar-rank {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rating-sidebar-name {
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
}

.rating-sidebar-bonus {
    color: #00d4aa;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.rating-sidebar-btn {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-block;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.rating-sidebar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(3, 120, 252, 0.5);
}

.rating-sidebar-more {
    text-align: center;
    margin-top: 15px;
}

.rating-sidebar-more a {
    color: #0378fc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.rating-sidebar-more a:hover {
    color: #0262d6;
}

/* Hide sidebar on mobile */
@media (max-width: 1200px) {
    .rating-sidebar {
        display: none;
    }
    .rating-toggle-btn {
        display: none;
    }
    .rating-close-btn {
        display: none;
    }
}

/* Chat Widget Styles */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.chat-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(3, 120, 252, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.chat-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(3, 120, 252, 0.6);
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #00d4aa;
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 212, 170, 0.4);
    min-width: 20px;
    text-align: center;
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: 550px;
    background: #20242d;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #1a1d24;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-welcome {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.chat-welcome p {
    margin: 5px 0;
}

.chat-welcome p:first-child {
    font-size: 1.2rem;
    color: #ccc;
}

.chat-message {
    background: #2a2f3a;
    padding: 10px 12px;
    border-radius: 10px;
    max-width: 85%;
    align-self: flex-start;
}

.chat-message.own {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    align-self: flex-end;
}

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

.message-username {
    color: #0378fc;
    font-weight: 600;
    font-size: 0.85rem;
}

.chat-message.own .message-username {
    color: rgba(255, 255, 255, 0.9);
}

.message-time {
    color: #888;
    font-size: 0.75rem;
}

.chat-message.own .message-time {
    color: rgba(255, 255, 255, 0.7);
}

.message-text {
    color: white;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-input-container {
    padding: 12px;
    background: #20242d;
    border-top: 1px solid #2a2f3a;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#chatUsername {
    width: 100%;
    padding: 8px 12px;
    background: #2a2f3a;
    border: 1px solid #3a3f4a;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    outline: none;
}

#chatUsername:focus {
    border-color: #0378fc;
}

.chat-input-wrapper {
    display: flex;
    gap: 8px;
}

#chatMessageInput {
    flex: 1;
    padding: 10px 12px;
    background: #2a2f3a;
    border: 1px solid #3a3f4a;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    outline: none;
}

#chatMessageInput:focus {
    border-color: #0378fc;
}

.send-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.send-btn:hover {
    background: linear-gradient(135deg, #0262d6, #0151b8);
    transform: scale(1.05);
}

.send-btn:active {
    transform: scale(0.95);
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: #20242d;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

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

.chat-header {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-info h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.chat-status {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #00d4aa;
    border-radius: 50%;
    display: inline-block;
}

.chat-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #1a1d24;
}

.chat-body-iframe {
    flex: 1;
    background: #1a1d24;
    overflow: hidden;
}

.chat-footer-small {
    padding: 10px 15px;
    background: #20242d;
    border-top: 1px solid #2a2f3a;
}

.chat-open-telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0378fc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.chat-open-telegram:hover {
    color: #0262d6;
}

.chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.message-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #0378fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.message-content {
    background: #2a2f3a;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 70%;
}

.message-content p {
    color: white;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.message-time {
    color: #888;
    font-size: 0.75rem;
    margin-top: 5px;
    display: block;
}

.chat-footer {
    padding: 15px 20px;
    background: #20242d;
    border-top: 1px solid #2a2f3a;
}

.chat-telegram-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0088cc, #006699);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.chat-telegram-btn:hover {
    background: linear-gradient(135deg, #006699, #005580);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 136, 204, 0.4);
}

/* Mobile Chat Styles */
@media (max-width: 768px) {
    /* Скрываем иконку чата - используем кнопку в мобильной навигации */
    .chat-widget .chat-button {
        display: none !important;
    }
    
    .chat-widget {
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        z-index: 10005;
        pointer-events: none;
    }
    
    .chat-window {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 10005 !important;
        pointer-events: auto;
    }
}

@media (max-width: 480px) {
    .chat-window {
        width: calc(100vw - 20px);
        height: calc(100vh - 120px);
        bottom: 70px;
        right: -2.5px;
    }
}

/* Rating Sidebar Logo */
.rating-sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(3, 120, 252, 0.3);
    flex-shrink: 0;
}

/* User profile dropdown in navigation */
.nav-dropdown .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
    height: 36px;
    line-height: 1;
}

.nav-dropdown .dropdown-toggle:hover {
    background: rgba(3, 120, 252, 0.15);
    border-color: rgba(3, 120, 252, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 120, 252, 0.2);
}

/* Fix for Демо-игры dropdown - make it look like other nav links */
.nav-dropdown > .nav-link.dropdown-toggle {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    display: inline-flex;
    align-items: center;
    height: 36px;
    line-height: 1;
}

.nav-dropdown > .nav-link.dropdown-toggle:hover {
    background: rgba(3, 120, 252, 0.2);
    border-color: rgba(3, 120, 252, 0.4);
    box-shadow: 0 4px 12px rgba(3, 120, 252, 0.2);
}

.nav-dropdown .dropdown-toggle img {
    border: 2px solid rgba(3, 120, 252, 0.5) !important;
}

/* Logout button with icon */
.dropdown-link.logout svg {
    flex-shrink: 0;
}

/* Separator in dropdown */
.dropdown-menu li[style*="border-top"] {
    margin-top: 4px;
    padding-top: 4px;
}

/* Beautiful text styling for navigation */
.nav-link,
.dropdown-toggle {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dropdown-link {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.2px;
}



/* Roulette Game Styles */
.roulette-section {
    padding: 30px 20px;
    margin-top: 70px;
    background: linear-gradient(135deg, #1a1e29 0%, #20242d 100%);
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulette-container {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}

.center {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.circle {
    position: relative;
    width: 375px;
    height: 375px;
    border-radius: 50%;
    background: #2a2f3a;
    box-shadow: 0 0 40px rgba(3, 120, 252, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Roulette SVG */
.roulette__item-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Game Data Container */
.game-data[data-v-0da83df2] {
    max-width: 280px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    z-index: 10;
}

/* Fire Badge */
.fire[data-v-0da83df2] {
    background: rgba(var(--bg-classic-fire), 1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.fire span[data-v-0da83df2] {
    color: rgba(var(--bg-classic-fire-text), 1);
    font-weight: bold;
}

/* Game ID */
.gameid[data-v-0da83df2] {
    color: rgba(var(--text-secondary), 1);
    font-size: 14px;
    margin: 10px 0;
    text-align: center;
}

/* Game Timer */
.gametimer[data-v-0da83df2] {
    color: #00d4aa;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

/* Bet Amount Input */
.bet-amount[data-v-0da83df2] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

.bet-amount input[data-v-0da83df2] {
    width: 120px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--border-secondary), 1);
    background: rgba(var(--bg-secondary), 1);
    color: rgba(var(--text-main), 1);
    font-size: 14px;
    text-align: center;
}

.bet-amount button[data-v-0da83df2] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.bet-amount button[data-v-0da83df2]:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(3, 120, 252, 0.4);
}

.bet-amount button svg[data-v-0da83df2] {
    width: 20px;
    height: 20px;
}

/* Game Users (avatars around wheel) */
.game-users[data-v-7e804c09] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.game-users .user[data-v-7e804c09] {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: all;
}

.game-users .user img[data-v-7e804c09] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* Game Data Styles */
.game-data h3.amount.dark[data-v-0da83df2] {
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    width: 200px;
    height: 74px;
    background-repeat: no-repeat;
    position: relative;
    margin: 10px auto 0;
    font-family: 'MADE Waffle Soft ExtraBold', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #f3a243;
}

.game-data h3.amount[data-v-0da83df2] {
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    width: 239px;
    height: 88px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 10px;
    left: 0;
    font-family: 'MADE Waffle Soft ExtraBold', sans-serif;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #f3a243;
}

@font-face {
    font-family: 'MADE Waffle Soft ExtraBold';
    font-style: normal;
    font-weight: 400;
    src: local("MADE Waffle Soft ExtraBold"), url(data:font/woff;base64,d09GRgABAAAAABBQAA8AAAAAG6QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABG) format("woff");
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    position: relative;
    height: 100px;
    background: rgba(42, 47, 58, 0.8);
    border-radius: 12px;
    border: 2px solid #3a3f4a;
    box-shadow: 0 0 20px rgba(3, 120, 252, 0.2);
    padding: 15px 20px;
    overflow: hidden;
    display: none;
}

.scroll-cursor {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(3, 120, 252, 0.3) 20%,
        rgba(3, 120, 252, 0.8) 40%,
        #0378fc 50%,
        rgba(3, 120, 252, 0.8) 60%,
        rgba(3, 120, 252, 0.3) 80%,
        transparent 100%
    );
    z-index: 10;
    box-shadow: 0 0 10px rgba(3, 120, 252, 0.8);
    pointer-events: none;
}

.scroll-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #0378fc;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(3, 120, 252, 1);
}

.scroll-track {
    position: relative;
    width: 100%;
    height: 70px;
    overflow: hidden;
}

.scroll-avatars {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    left: 50%;
    gap: 10px;
    will-change: transform;
}

.scroll-avatars img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid rgba(3, 120, 252, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.scroll-avatars img.winner {
    border: 3px solid #18edaf !important;
    box-shadow: 0 0 20px rgba(24, 237, 175, 0.8) !important;
    transform: scale(1.1);
}

.game-roulette {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 5;
    height: 100px;
    background: rgba(42, 47, 58, 0.8);
    border-radius: 12px;
    border: 2px solid #3a3f4a;
    box-shadow: 0 0 20px rgba(3, 120, 252, 0.2);
    animation: fadeIn 0.5s ease;
}

.game-roulette .cursor {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(3, 120, 252, 0.3) 20%,
        rgba(3, 120, 252, 0.8) 40%,
        #0378fc 50%,
        rgba(3, 120, 252, 0.8) 60%,
        rgba(3, 120, 252, 0.3) 80%,
        transparent 100%
    );
    z-index: 10;
    box-shadow: 0 0 10px rgba(3, 120, 252, 0.8);
}

.game-roulette .cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #0378fc;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(3, 120, 252, 1);
}

.game-roulette .overflow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.game-roulette .inbox {
    position: relative;
    width: 100%;
    height: 100%;
}

.game-roulette .players {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 24s cubic-bezier(0, 0, 0, 1);
    will-change: transform;
}

.game-roulette .players .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 5px;
    flex-shrink: 0;
    border: 3px solid rgba(3, 120, 252, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

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

.animated.fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.game-players {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 30px;
    padding: 15px 20px;
    background: rgba(42, 47, 58, 0.8);
    border-radius: 12px;
    border: 2px solid #3a3f4a;
    animation: fadeIn 0.5s ease;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

.game-info-container {
    width: 100%;
    margin: 0 0 20px 0;
    position: relative;
    min-height: 80px;
}

.game-players::-webkit-scrollbar {
    height: 6px;
}

.game-players::-webkit-scrollbar-track {
    background: rgba(42, 47, 58, 0.5);
    border-radius: 3px;
}

.game-players::-webkit-scrollbar-thumb {
    background: rgba(3, 120, 252, 0.5);
    border-radius: 3px;
}

.game-players::-webkit-scrollbar-thumb:hover {
    background: rgba(3, 120, 252, 0.7);
}

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

.game-players .team {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
}

.game-players .player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.game-players .player:hover {
    transform: translateY(-3px);
}

.game-players .player img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3a3f4a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.game-players .player .chance {
    padding: 4px 12px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: 50px;
    text-align: center;
    white-space: nowrap;
}

.game-players .player.fire img {
    border-color: #ff6b35;
}

.game-players .player .chance.bonus {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
}

.roulette__item-svg {
    width: 100%;
    height: 100%;
    transition: transform 0.1s linear;
}

.roulette__item-svg.spinning {
    animation: spinFast 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

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

@keyframes spinFast {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1800deg);
    }
}

.game-users {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.game-users .user {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    pointer-events: all;
}

.game-users .user img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.game-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background: rgba(20, 24, 33, 0.6);
    padding: 20px;
    border-radius: 20px;
    border: 2px solid rgba(3, 120, 252, 0.3);
    max-width: 300px;
    width: 100%;
}

.game-data *,
.game-data svg,
.game-data .amount svg,
.amount.dark svg {
    opacity: 1 !important;
}

.fire {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.gameid {
    color: #888;
    font-size: 0.9rem;
    margin: 10px 0;
}

.gameid span {
    color: #0378fc;
}

.amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 15px 0;
}

.gametimer {
    color: #00d4aa;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0 20px;
}

.bet-amount {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.bet-amount input {
    flex: 1;
    background: #2a2f3a;
    border: 2px solid rgba(3, 120, 252, 0.3);
    border-radius: 10px;
    padding: 12px;
    color: white;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.bet-amount input:focus {
    border-color: #0378fc;
}

.bet-amount input::placeholder {
    color: #666;
}

.bet-amount button {
    background: linear-gradient(135deg, #0378fc, #0262d6);
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet-amount button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(3, 120, 252, 0.5);
}

.bet-amount button svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .roulette-section {
        padding: 40px 15px;
    }
    
    .center {
        max-width: 350px;
    }
    
    .game-data {
        padding: 20px;
        min-width: 200px;
    }
    
    .amount {
        font-size: 1.4rem;
    }
    
    .game-users .user {
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
    }
}


/* ========================================
   CLASSIC ROULETTE - ORIGINAL STRUCTURE
   ======================================== */

.main[data-v-34f52365] {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 20px;
}

.game[data-v-34f52365] {
    position: relative;
}

/* Tabs */
.tabs[data-v-52403b82] {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}

.tabs .link[data-v-52403b82] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(var(--bg-secondary), 1);
    border-radius: 12px;
    color: rgba(var(--text-secondary), 1);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tabs .link.active[data-v-52403b82] {
    background: rgba(var(--bg-light), 1);
    border-color: #0378fc;
    color: #0378fc;
}

.tabs .link[data-v-52403b82]:hover {
    background: rgba(var(--bg-light-hover), 1);
}

.tabs .link svg[data-v-52403b82] {
    width: 20px;
    height: 20px;
}

/* Giveaways Button */
.giveaways[data-v-35002601] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
}

.giveaways .show[data-v-35002601] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
}

.giveaways .show[data-v-35002601]:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5);
}

.giveaways .show svg[data-v-35002601] {
    width: 24px;
    height: 24px;
}

/* Center Container */
.center[data-v-34f52365] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

/* Circle (Roulette Wheel) */
.circle[data-v-34f52365] {
    position: relative;
    width: 375px;
    height: 375px;
    border-radius: 50%;
    background: #2a2f3a;
    box-shadow: 0 0 40px rgba(3, 120, 252, 0.3);
    overflow: hidden;
}

/* Roulette SVG */
.roulette__item-svg[data-v-34f52365] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Game Users (Avatars) */
.game-users[data-v-7e804c09] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.game-users .user[data-v-7e804c09] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

.game-users .user img[data-v-7e804c09] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid;
    object-fit: cover;
}

/* Game Data (Center Info) */
.game-data[data-v-0da83df2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Fire Badge */
.fire[data-v-0da83df2] {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    color: white;
    font-size: 0.95rem;
}

/* Game ID */
.gameid[data-v-0da83df2] {
    color: rgba(var(--text-secondary), 1);
    font-size: 0.85rem;
    margin: 4px 0;
}

.gameid span[data-v-0da83df2] {
    color: #0378fc;
    font-weight: 600;
}

/* Amount Display */
.amount.dark[data-v-0da83df2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #f3a243;
    margin: 6px 0;
}

.amount.dark svg[data-v-0da83df2] {
    flex-shrink: 0;
}

/* Game Timer */
.gametimer[data-v-0da83df2] {
    color: #00d4aa;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 6px 0;
}

/* Game Roulette Animation */
.game-roulette[data-v-6acd2b3f] {
    margin: 30px 0;
    position: relative;
}

.game-roulette .cursor[data-v-6acd2b3f] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 100%;
    background: #0378fc;
    z-index: 10;
}

.game-roulette .overflow[data-v-6acd2b3f] {
    overflow: hidden;
    height: 100px;
    border-radius: 12px;
    background: rgba(var(--bg-secondary), 1);
}

.game-roulette .inbox[data-v-6acd2b3f] {
    position: relative;
    height: 100%;
}

.game-roulette .players[data-v-6acd2b3f] {
    display: flex;
    gap: 10px;
    transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Game Players */
.game-players[data-v-34503efb] {
    margin: 30px 0;
}

.game-players .team[data-v-34503efb] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.game-players .player[data-v-34503efb] {
    position: relative;
    width: 80px;
    text-align: center;
}

.game-players .player img[data-v-34503efb] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(var(--border-secondary), 1);
    object-fit: cover;
}

.game-players .player.fire img[data-v-34503efb] {
    border-color: #ff6b35;
}

.game-players .player .chance[data-v-34503efb] {
    margin-top: 5px;
    font-size: 0.85rem;
    font-weight: bold;
    color: rgba(var(--text-secondary), 1);
}

.game-players .player .chance.bonus[data-v-34503efb] {
    color: #ff6b35;
}

/* Bets List */
.bets[data-v-7d41b45f] {
    margin-top: 30px;
}

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

.animated.fadeIn {
    animation: fadeIn 0.5s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .main[data-v-34f52365] {
        padding: 15px;
    }
    
    .tabs[data-v-52403b82] {
        flex-direction: column;
        gap: 10px;
    }
    
    .circle[data-v-34f52365] {
        width: 320px;
        height: 320px;
    }
    
    .game-users .user[data-v-7e804c09] {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
    }
    
    .game-data[data-v-0da83df2] {
        gap: 6px;
    }
    
    .fire[data-v-0da83df2] {
        font-size: 0.85rem;
        padding: 5px 12px;
    }
    
    .amount.dark[data-v-0da83df2] {
        font-size: 1.1rem;
    }
    
    .gametimer[data-v-0da83df2] {
        font-size: 1rem;
    }
}


/* ========================================
   CLASSIC ROULETTE - UPDATED FROM SCREENSHOT
   ======================================== */

/* Fire Badge Top (inside wheel) */
.fire-top[data-v-0da83df2] {
    background: rgba(44, 50, 71, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

/* Large Timer */
.gametimer-large[data-v-0da83df2] {
    color: white;
    font-size: 3.5rem;
    font-weight: bold;
    margin: 12px 0;
    letter-spacing: 2px;
}

/* Bet Input Wrapper */
.bet-input-wrapper[data-v-0da83df2] {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 12px 0;
    background: rgba(44, 50, 71, 0.6);
    border-radius: 8px;
    padding: 4px;
    width: 200px;
}

.bet-input[data-v-0da83df2] {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(var(--text-secondary), 1);
    padding: 10px 12px;
    font-size: 0.95rem;
    outline: none;
}

.bet-input[data-v-0da83df2]::placeholder {
    color: rgba(var(--text-secondary), 0.6);
}

.bet-button[data-v-0da83df2] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f1c552, #fdac3d);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
}

.bet-button[data-v-0da83df2]:hover {
    transform: scale(1.05);
}

/* Balance Display */
.balance-display[data-v-0da83df2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #f1c552;
    margin-top: 12px;
}

/* Players Row */
.game-players-row[data-v-34503efb] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 30px 0;
    overflow-x: auto;
    padding: 10px;
}

.player-item[data-v-34503efb] {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid rgba(var(--border-secondary), 1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.player-item.active[data-v-34503efb] {
    border-color: #f1c552;
    box-shadow: 0 0 20px rgba(241, 197, 82, 0.5);
}

.player-item[data-v-34503efb]:hover {
    transform: scale(1.05);
}

.player-item img[data-v-34503efb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fire Badge Bottom Left */
.fire-badge-bottom[data-v-34f52365] {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: rgba(44, 50, 71, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

/* Adjust circle size */
.circle[data-v-34f52365] {
    width: 450px;
    height: 450px;
}

/* Adjust game data positioning */
.game-data[data-v-0da83df2] {
    gap: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .circle[data-v-34f52365] {
        width: 350px;
        height: 350px;
    }
    
    .gametimer-large[data-v-0da83df2] {
        font-size: 2.5rem;
    }
    
    .balance-display[data-v-0da83df2] {
        font-size: 1.1rem;
    }
    
    .fire-badge-bottom[data-v-34f52365] {
        bottom: 15px;
        left: 15px;
        padding: 8px 16px;
        font-size: 0.95rem;
    }
}

/* ===== FINAL GLOBAL MOBILE OVERRIDES (MUST BE LAST) ===== */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 16px !important;
        display: flex !important;
        grid-template-columns: none !important;
    }

    .nav-logo {
        order: 0 !important;
        margin-left: 0 !important;
    }
    
    .nav-toggle {
        order: 1 !important;
        display: flex !important;
        margin-left: 8px !important;
    }
    
    #authButton {
        order: 2 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-direction: row !important;
        align-items: center !important;
        height: auto !important;
        gap: 8px !important;
    }
    
    .nav-menu {
        order: 3 !important;
        margin: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .nav-menu .nav-link {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Скрываем баланс на мобильной версии в хедере */
    #headerBalanceStack {
        display: none !important;
    }

    #authButton .nav-link {
        width: auto !important;
        max-width: 110px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #authButton .auth-login-btn {
        color: rgba(255, 255, 255, 0.9) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    #authButton .auth-register-btn {
        color: white !important;
        background: linear-gradient(135deg, #0378fc, #0262d6) !important;
        border: 1px solid rgba(3, 120, 252, 0.45) !important;
        box-shadow: 0 10px 24px rgba(3, 120, 252, 0.25) !important;
    }

    .dropdown-menu {
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 480px) {
    .nav-logo svg {
        width: 92px !important;
        height: 34px !important;
    }
}



/* ============================================
   MOBILE NAVIGATION STYLES
   ============================================ */

/* По умолчанию скрываем мобильную навигацию на десктопе */
.mobileHeader,
.mobileNav,
.mobile-modal-backdrop,
.mobile-nav-modal,
.mobile-chat-modal {
    display: none;
}

@media (max-width: 768px) {
    /* Показываем мобильную навигацию */
    .mobileHeader {
        display: flex !important;
    }
    
    .mobileNav {
        display: block !important;
    }
    
    .mobile-modal-backdrop,
    .mobile-nav-modal,
    .mobile-chat-modal {
        display: none;
    }
    
    .mobile-modal-backdrop.active,
    .mobile-nav-modal.active,
    .mobile-chat-modal.active {
        display: block;
    }
    
    /* Скрываем верхнюю навигацию на мобильных */
    .navigation {
        display: none !important;
    }
    
    body {
        padding-top: 70px !important;
        padding-bottom: 100px !important;
    }
    
    /* Контейнер на мобильных - отступ от хедера */
    .container {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
    
    /* Мобильный хедер */
    .mobileHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px;
        background-color: #141821 !important;
        background: #141821 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }
    
    .mobileHeader-logo {
        display: flex !important;
        align-items: center;
    }
    
    .mobileHeader-logo svg {
        width: 100px;
        height: 38px;
        display: block !important;
    }
    
    .mobileHeader-auth {
        display: flex !important;
        align-items: center;
        gap: 6px;
        max-width: 55%;
        overflow: visible;
    }
    
    /* Кнопки Вход/Регистрация в мобильном хедере */
    .mobile-auth-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #0378fc, #0262d6) !important;
        color: white !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border: none !important;
    }
    
    .mobile-reg-btn {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        color: white !important;
    }
    
    .mobileHeader-auth a {
        font-size: 11px !important;
        white-space: nowrap;
    }
    
    .mobileHeader-auth a span {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Prevent iOS auto-zoom on input focus */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Основной контейнер навигации */
    .mobileNav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(20, 24, 33, 0.98);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 0 max(10px, env(safe-area-inset-bottom));
        z-index: 10000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .mobileNavWrapper {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .mobileNavBlock {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 8px;
    }
    
    .mobileNavBlock li {
        flex: 1;
        display: flex;
        justify-content: center;
    }
    
    /* Центральная кнопка - li должен не растягиваться */
    .mobileNavBlock li:nth-child(3) {
        flex: 0 0 70px;
        position: relative;
    }
    
    .mobileNavBlock button,
    .mobileNavBlock > li > a:not(.btnLobby) {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        color: rgba(255, 255, 255, 0.7) !important;
        text-decoration: none;
        font-size: 9px !important;
        font-weight: 600;
        letter-spacing: 0;
        transition: all 0.2s ease;
        border-radius: 8px;
        cursor: pointer;
        background: transparent;
        border: none;
        text-transform: uppercase;
        width: 100%;
        white-space: nowrap;
        overflow: visible;
    }
    
    .mobileNavBlock button:active {
        background: rgba(255, 255, 255, 0.05);
        transform: scale(0.95);
    }
    
    .mobileNavBlock li.active button {
        color: #0378fc;
    }
    
    /* SVG иконки */
    .mobileNavBlock .icon {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }
    
    /* Центральная кнопка "Играть" */
    .btnLobby {
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, #0378fc, #0262d6) !important;
        box-shadow: 0 4px 20px rgba(3, 120, 252, 0.5) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border: none !important;
    }
    
    .btnLobby .lobbyWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    
    .btnLobby .image {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btnLobby .icon-gamepad {
        width: 32px;
        height: 32px;
        fill: white;
    }
    
    .btnLobby:active {
        transform: translateX(-50%) scale(0.9) !important;
        background: linear-gradient(135deg, #0262d6, #0151b8) !important;
    }
    
    /* Модальное окно навигации */
    .mobile-nav-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #0d1117;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 0 0 max(16px, env(safe-area-inset-bottom));
        z-index: 10001;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.7);
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    
    .mobile-nav-modal.active {
        transform: translateY(0);
    }
    
    .mnav-handle {
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.15);
        border-radius: 2px;
        margin: 10px auto 0;
    }
    
    .mnav-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px 12px;
    }
    
    .mnav-title {
        color: white;
        font-size: 17px;
        font-weight: 700;
    }
    
    .mnav-x {
        background: none;
        border: none;
        color: rgba(255,255,255,0.35);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 8px;
    }
    
    .mnav-x:active {
        background: rgba(255,255,255,0.08);
        color: white;
    }
    
    .mnav-body {
        padding: 0 12px;
    }
    
    .mnav-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 12px;
        text-decoration: none;
        border-radius: 12px;
        transition: background 0.15s;
    }
    
    .mnav-row:active {
        background: rgba(255,255,255,0.06);
    }
    
    .mnav-ic {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mnav-name {
        flex: 1;
        color: rgba(255,255,255,0.88);
        font-size: 15px;
        font-weight: 600;
    }
    
    .mnav-arr {
        color: rgba(255,255,255,0.15);
        flex-shrink: 0;
    }
    
    .mnav-sep {
        height: 1px;
        background: rgba(255,255,255,0.06);
        margin: 4px 12px;
    }

    /* Legacy styles kept for compatibility */
    .mobile-nav-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-nav-modal-title {
        color: white;
        font-size: 1.2rem;
        font-weight: 700;
    }
    
    .mobile-nav-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
    }
    
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    
    .mobile-nav-link svg {
        flex-shrink: 0;
        opacity: 0.7;
    }
    
    .mobile-nav-link:active {
        background: rgba(3, 120, 252, 0.15);
        border-color: rgba(3, 120, 252, 0.4);
        color: white;
    }
    
    .mobile-nav-link:active svg {
        opacity: 1;
        color: #0378fc;
    }
    
    /* Модальное окно чата */
    .mobile-chat-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(20, 24, 33, 0.98);
        z-index: 10002;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        flex-direction: column;
        display: none !important;
    }
    
    .mobile-chat-modal.active {
        transform: translateY(0);
        display: flex !important;
    }
    
    .mobile-chat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: rgba(20, 24, 33, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-chat-title {
        color: white;
        font-size: 1.2rem;
        font-weight: 700;
    }
    
    .mobile-chat-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.3rem;
        transition: background 0.2s ease;
    }
    
    .mobile-chat-close:active {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .mobile-chat-content {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }
    
    /* Backdrop для модальных окон */
    .mobile-modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-modal-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 480px) {
    .mobileHeader {
        padding: 0 12px;
    }
    
    .mobileHeader-logo svg {
        width: 90px;
        height: 34px;
    }
    
    .mobileNavBlock button {
        padding: 6px 6px;
        font-size: 0.55rem;
        gap: 2px;
    }
    
    .mobileNavBlock button > div {
        flex-shrink: 0;
    }
    
    .mobileNavBlock .icon {
        width: 20px;
        height: 20px;
    }
    
    .btnLobby {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
    }
    
    .btnLobby .icon-gamepad {
        width: 28px;
        height: 28px;
    }
}


/* Navigation Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a2235;
    border: 1px solid rgba(3,120,252,0.3);
    border-radius: 10px;
    padding: 8px 0;
    min-width: 160px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.nav-dropdown-menu a:hover { background: rgba(3,120,252,0.2); color: #fff; }
.nav-dropdown-menu a.active { color: #0378fc; }


/* Roulette player cards */
.player-card{background:#161b22;border:1px solid #30363d;border-radius:14px;padding:14px;text-align:center;width:95px}
.player-pct{background:#22c55e;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;margin-bottom:10px;display:inline-block}
.player-ava{width:54px;height:54px;border-radius:12px;margin:0 auto 8px;overflow:hidden;background:#21262d;border:2px solid #30363d}
.player-ava img{width:100%;height:100%;object-fit:cover}
.player-ava .lt{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#8b949e}
.player-name{font-size:11px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}