/**
 * MOBILE BOTTOM SHEETS - Точная копия Mellstroy
 * Bottom sheets для меню и профиля
 */

/* УБРАЛИ overlay - он не нужен как у Mellstroy */

/* Mobile Content - основной контент, скрывается при открытии меню */
.mobile-content {
    display: block;
    padding-top: 60px; /* Отступ под fixed header */
}

.mobile-content.hidden {
    display: none !important;
}

/* Базовый Bottom Sheet - fixed без overlay */
.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px; /* После header */
    bottom: 94px; /* Над pin bar (94px как у Mellstroy) */
    width: 100%;
    background: #190127; /* ⚡ ТЕМНЫЙ ФИОЛЕТОВЫЙ! */
    overflow-y: auto;
    display: none; /* Скрыто по умолчанию */
    z-index: 999; /* Под header (1001) */
    padding-top: 16px; /* Отступ от header */
}

.bottom-sheet.active {
    display: block !important; /* Показываем при активации */
}

/* Скрыть скроллбар но оставить функциональность */
.bottom-sheet::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Handle для свайпа вниз */
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: #4a3f5d;
    border-radius: 2px;
    margin: 12px auto;
}

/* Header bottom sheet */
.bottom-sheet-header {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2a1f3d;
}

.bottom-sheet-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.bottom-sheet-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.bottom-sheet-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bottom-sheet-close svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

/* Content */
.bottom-sheet-content {
    padding: 0 20px 20px;
}

/* ========== MENU BOTTOM SHEET ========== */

.menu-bottom-sheet {
    background: #190127;
}

/* Меню всегда под header, не на весь экран */

.menu-bottom-sheet .players-online {
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #999;
}

.menu-bottom-sheet .players-online-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

.menu-bottom-sheet .players-count {
    color: #fff;
    font-weight: 600;
}

.menu-bottom-sheet .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-bottom-sheet .user-info:hover {
    background: rgba(138, 75, 185, 0.15);
}

.menu-bottom-sheet .user-avatar {
    width: 48px;
    height: 48px;
    background: #4a3f5d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.menu-bottom-sheet .user-avatar svg {
    width: 28px;
    height: 28px;
    fill: #999;
}

.menu-bottom-sheet .user-avatar-status {
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid #1a0f2e;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
}

.menu-bottom-sheet .user-details {
    flex: 1;
}

.menu-bottom-sheet .user-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.menu-bottom-sheet .user-id {
    font-size: 13px;
    color: #999;
}

.menu-bottom-sheet .user-arrow {
    width: 20px;
    height: 20px;
    stroke: #999;
}

/* Game Type Buttons */
.menu-bottom-sheet .game-type-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.menu-bottom-sheet .game-type-btn {
    flex: 1;
    padding: 12px;
    background: #2a1f3d;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    font-weight: 600;
    color: #999;
}

.menu-bottom-sheet .game-type-btn.active {
    background: #8b5cf6;
    color: #fff;
}

.menu-bottom-sheet .game-type-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Menu Items */
.menu-bottom-sheet .menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.menu-bottom-sheet .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    position: relative;
}

.menu-bottom-sheet .menu-item:hover {
    background: rgba(138, 75, 185, 0.1);
}

.menu-bottom-sheet .menu-item.active {
    background: rgba(138, 75, 185, 0.15);
}

.menu-bottom-sheet .menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #8b5cf6;
    border-radius: 0 2px 2px 0;
}

.menu-bottom-sheet .menu-item svg {
    width: 20px;
    height: 20px;
    stroke: #999;
}

.menu-bottom-sheet .menu-item.active svg {
    stroke: #8b5cf6;
}

.menu-bottom-sheet .menu-item span {
    font-size: 15px;
    color: #fff;
}

.menu-bottom-sheet .menu-item-badge {
    margin-left: auto;
    background: #22c55e;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Social Links */
.menu-bottom-sheet .social-links {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.menu-bottom-sheet .social-link {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.menu-bottom-sheet .social-link:hover {
    transform: scale(1.1);
}

.menu-bottom-sheet .social-link.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.menu-bottom-sheet .social-link.telegram {
    background: #2AABEE;
}

.menu-bottom-sheet .social-link.vk {
    background: #4C75A3;
}

.menu-bottom-sheet .social-link svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

/* Language Selector */
.menu-bottom-sheet .language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-bottom-sheet .language-selector:hover {
    background: rgba(138, 75, 185, 0.15);
}

.menu-bottom-sheet .language-flag {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.menu-bottom-sheet .language-code {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.menu-bottom-sheet .language-arrow {
    margin-left: auto;
    width: 16px;
    height: 16px;
    stroke: #999;
}

/* ========== PROFILE BOTTOM SHEET ========== */

.profile-bottom-sheet .profile-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #2a1f3d;
}

.profile-bottom-sheet .profile-avatar {
    width: 56px;
    height: 56px;
    background: #4a3f5d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-bottom-sheet .profile-avatar svg {
    width: 32px;
    height: 32px;
    fill: #999;
}

.profile-bottom-sheet .profile-details {
    flex: 1;
}

.profile-bottom-sheet .profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.profile-bottom-sheet .profile-id {
    font-size: 14px;
    color: #999;
}

.profile-bottom-sheet .profile-copy {
    width: 36px;
    height: 36px;
    background: rgba(138, 75, 185, 0.1);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-bottom-sheet .profile-copy:hover {
    background: rgba(138, 75, 185, 0.2);
}

.profile-bottom-sheet .profile-copy svg {
    width: 18px;
    height: 18px;
    stroke: #8b5cf6;
}

/* Balance Section */
.profile-bottom-sheet .balance-section {
    padding: 20px 0;
    border-bottom: 1px solid #2a1f3d;
}

.profile-bottom-sheet .balance-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.profile-bottom-sheet .balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.profile-bottom-sheet .balance-actions {
    display: flex;
    gap: 12px;
}

.profile-bottom-sheet .balance-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-bottom-sheet .balance-btn-deposit {
    background: #22c55e;
    color: #fff;
}

.profile-bottom-sheet .balance-btn-deposit:hover {
    background: #16a34a;
}

.profile-bottom-sheet .balance-btn-withdraw {
    background: #2a1f3d;
    color: #fff;
}

.profile-bottom-sheet .balance-btn-withdraw:hover {
    background: #3a2f4d;
}

.profile-bottom-sheet .balance-btn svg {
    width: 20px;
    height: 20px;
}

/* Profile Menu Items */
.profile-bottom-sheet .profile-menu {
    padding: 20px 0;
}

.profile-bottom-sheet .profile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(138, 75, 185, 0.05);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.profile-bottom-sheet .profile-menu-item:hover {
    background: rgba(138, 75, 185, 0.1);
    transform: translateX(4px);
}

.profile-bottom-sheet .profile-menu-icon {
    width: 44px;
    height: 44px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.profile-bottom-sheet .profile-menu-icon svg {
    width: 22px;
    height: 22px;
    stroke: #8b5cf6;
}

.profile-bottom-sheet .profile-menu-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border: 2px solid #1a0f2e;
    border-radius: 50%;
}

.profile-bottom-sheet .profile-menu-text {
    flex: 1;
}

.profile-bottom-sheet .profile-menu-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.profile-bottom-sheet .profile-menu-subtitle {
    font-size: 13px;
    color: #999;
}

/* ========== SIDEBAR-MELL MOBILE (Desktop Menu Adapted) ========== */

.sidebar-mell-mobile {
    padding: 0 12px 16px; /* ⚡ Отступы вокруг овала */
    background: #190127; /* ⚡ ТЕМНЫЙ ФИОЛЕТОВЫЙ! */
    display: flex;
    flex-direction: column;
    height: 100%; /* ⚡ Занимаем всю высоту bottom-sheet */
    overflow: hidden; /* ⚡ Скрываем overflow - скролл будет внутри плашки */
}

/* ⚡ ОВАЛЬНАЯ ПРОКРУЧИВАЕМАЯ ПЛАШКА - ВСЕ МЕНЮ ВНУТРИ (как у Mellstroy) */
.sidebar-mell__scrollable-plank {
    flex: 1; /* ⚡ Занимает все пространство */
    overflow-y: auto; /* ⚡ ПРОКРУТКА ВНУТРИ ОВАЛА */
    overflow-x: hidden;
    padding: 16px; /* ⚡ Отступы внутри овала */
    background: rgba(31, 22, 50, 0.8); /* ⚡ Фон плашки как у Mellstroy */
    border-radius: 24px; /* ⚡ ОВАЛ - закругленные углы! */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* ⚡ Тень овала */
}

/* Скрыть скроллбар плашки но оставить функциональность */
.sidebar-mell__scrollable-plank::-webkit-scrollbar {
    width: 4px;
}

.sidebar-mell__scrollable-plank::-webkit-scrollbar-track {
    background: rgba(138, 75, 185, 0.05);
    border-radius: 2px;
}

.sidebar-mell__scrollable-plank::-webkit-scrollbar-thumb {
    background: rgba(138, 75, 185, 0.2);
    border-radius: 2px;
}

.sidebar-mell__scrollable-plank::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 75, 185, 0.3);
}


/* Players Online - ВНУТРИ ОВАЛА */
.sidebar-mell-mobile .sidebar-mell__online {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(138, 75, 185, 0.05);
    border-radius: 10px;
    margin-bottom: 10px; /* ⚡ Отступ только снизу */
}

.sidebar-mell-mobile .sidebar-mell__online-label {
    font-size: 13px;
    color: #999;
}

.sidebar-mell-mobile .sidebar-mell__online-right {
    display: flex;
    align-items: center;
}

.sidebar-mell-mobile .sidebar-mell__online-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 8px;
}

.sidebar-mell-mobile .sidebar-mell__online-count {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* User Profile - ВНУТРИ ОВАЛА */
.sidebar-mell-mobile .sidebar-mell__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 12px;
    margin-bottom: 16px; /* ⚡ Отступ только снизу */
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-mell-mobile .sidebar-mell__profile:hover {
    background: rgba(138, 75, 185, 0.15);
}

.sidebar-mell-mobile .sidebar-mell__profile-avatar {
    width: 48px;
    height: 48px;
    background: #8b5cf6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.sidebar-mell-mobile .sidebar-mell__profile-info {
    flex: 1;
}

.sidebar-mell-mobile .sidebar-mell__profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.sidebar-mell-mobile .sidebar-mell__profile-id {
    font-size: 13px;
    color: #999;
}

.sidebar-mell-mobile .sidebar-mell__profile-arrow {
    width: 20px;
    height: 20px;
    color: #999;
}

/* Guest Login - ВНУТРИ ОВАЛА */
.sidebar-mell-mobile .sidebar-mell__login {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 12px;
    margin-bottom: 16px; /* ⚡ Отступ только снизу */
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-mell-mobile .sidebar-mell__login:hover {
    background: rgba(138, 75, 185, 0.15);
}

.sidebar-mell-mobile .sidebar-mell__login-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.sidebar-mell-mobile .sidebar-mell__login-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Menu Items - компактнее */
.sidebar-mell-mobile .sidebar-mell__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.sidebar-mell-mobile .sidebar-mell__item:hover {
    background: rgba(138, 75, 185, 0.1);
}

.sidebar-mell-mobile .sidebar-mell__item.active {
    background: rgba(138, 75, 185, 0.15);
}

.sidebar-mell-mobile .sidebar-mell__item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #8b5cf6;
    border-radius: 0 2px 2px 0;
}

.sidebar-mell-mobile .sidebar-mell__item svg {
    width: 20px;
    height: 20px;
    color: #999;
}

.sidebar-mell-mobile .sidebar-mell__item.active svg {
    color: #8b5cf6;
}

.sidebar-mell-mobile .sidebar-mell__item-text {
    font-size: 15px;
    color: #fff;
    flex: 1;
}

.sidebar-mell-mobile .sidebar-mell__item-badge {
    margin-left: auto;
    background: #22c55e;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Section Headers */
.sidebar-mell-mobile .sidebar-mell__section {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5); /* Светлый цвет для темного фона */
    padding: 16px 16px 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Footer - ВНУТРИ ОВАЛА */
.sidebar-mell-mobile .sidebar-mell__footer {
    margin-top: 24px; /* ⚡ Отступ сверху */
    padding-top: 20px;
    border-top: 1px solid #2a1f3d;
}

.sidebar-mell-mobile .sidebar-mell__footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.sidebar-mell-mobile .sidebar-mell__footer-social a {
    width: 48px;
    height: 48px;
    background: rgba(138, 75, 185, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-mell-mobile .sidebar-mell__footer-social a:hover {
    background: rgba(138, 75, 185, 0.2);
    transform: translateY(-2px);
}

.sidebar-mell-mobile .sidebar-mell__footer-social svg {
    width: 24px;
    height: 24px;
    color: #8b5cf6;
}

.sidebar-mell-mobile .sidebar-mell__footer-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(138, 75, 185, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.sidebar-mell-mobile .sidebar-mell__footer-lang:hover {
    background: rgba(138, 75, 185, 0.1);
}

.sidebar-mell-mobile .sidebar-mell__footer-lang svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #999;
}

/* Utility class */
.d-flex {
    display: flex;
}

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