/* ==========================================================================
   PROFIL / MENYU sahifasi. Avvalgi menu-modern.css dan ko'chirilgan.
   MENU MODERN REFRESH — Menyu qismining zamonaviylashtirilgan dizayni.
   Bu fayl HTML strukturasi yoki JS logikasiga tegmaydi (games.js#renderMenu
   o'zgarishsiz qoladi) — faqat mavjud menu, account, menu-switch va
   voice-picker klasslarining ko'rinishini yangilaydi.
   ========================================================================== */

/* ---------- Bo'lim sarlavhalari: nozik nuqta belgisi + kenglashtirilgan harflar ---------- */
.menu__section-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 22px 0 10px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}
.menu__section-label::before {
    content: "" !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--purple)) !important;
    box-shadow: 0 0 8px rgba(var(--teal-rgb), .45) !important;
    flex: none !important;
}

/* ---------- Menyu bandlari: shisha-effekt karta, yumshoq hover/press animatsiyasi ---------- */
.menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 13px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(var(--overlay-rgb), .08) !important;
    background: linear-gradient(155deg, rgba(var(--overlay-rgb), .05), rgba(var(--overlay-rgb), .015)) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 6px 16px rgba(0, 0, 0, .12) !important;
    cursor: pointer !important;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.menu__item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(var(--teal-rgb), .38) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--teal-rgb), .08) inset !important;
}
.menu__item:active {
    transform: translateY(0) scale(.985) !important;
    transition-duration: .06s !important;
}

.menu__item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    background: linear-gradient(155deg, rgba(var(--teal-rgb), .16), rgba(var(--overlay-rgb), .04)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), .06) !important;
    transition: transform .18s ease, background .18s ease !important;
}
.menu__item:hover .menu__item-icon {
    transform: scale(1.06) !important;
    background: linear-gradient(155deg, rgba(var(--teal-rgb), .28), rgba(var(--purple-rgb, 176, 38, 255), .1)) !important;
}

.menu__item-label {
    flex: 1 !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: -.005em !important;
}

.menu__item-badge {
    flex: none !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: var(--muted) !important;
    background: rgba(var(--overlay-rgb), .06) !important;
    border: 1px solid rgba(var(--overlay-rgb), .08) !important;
}

/* ---------- Hisob banneri: yumshoq gradient chegara + avatar porlashi ---------- */
.account__profile-banner {
    border-radius: 18px !important;
    padding: 14px !important;
    background: linear-gradient(150deg, rgba(var(--teal-rgb), .1), rgba(var(--overlay-rgb), .03)) !important;
    border: 1px solid rgba(var(--teal-rgb), .18) !important;
    transition: transform .18s ease, border-color .18s ease !important;
}
.account__profile-banner:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(var(--teal-rgb), .34) !important;
}
.account-avatar,
.account__avatar {
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .16), 0 4px 14px rgba(0, 0, 0, .18) !important;
}

/* ---------- Ovoz/Tovush almashtirgich qatori ---------- */
.menu__toggle-row {
    border-radius: 16px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(var(--overlay-rgb), .08) !important;
}
.menu-switch.state--on {
    box-shadow: 0 0 14px rgba(var(--teal-rgb), .4) !important;
}

/* ---------- Talaffuz ovozi kartalari ---------- */
.voice-picker__persona-btn {
    border-radius: 16px !important;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, box-shadow .18s ease !important;
}
.voice-picker__persona-btn:hover {
    transform: translateY(-2px) !important;
}
.voice-picker__persona-btn.state--active {
    border-color: rgba(var(--teal-rgb), .5) !important;
    box-shadow: 0 0 0 1px rgba(var(--teal-rgb), .18) inset, 0 8px 20px rgba(0, 0, 0, .16) !important;
}

/* ---------- Modal sarlavhasi: Menyu ---------- */
.modal__eyebrow {
    letter-spacing: .16em !important;
}

@media (prefers-reduced-motion: reduce) {
    .menu__item, .menu__item-icon, .voice-picker__persona-btn, .account__profile-banner {
        transition: none !important;
    }
}