/* ---------- DDMusic-style playlist (Tinglash) ---------- */
.audio-player__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.audio-player__bolim-nav {
    display: flex;
    gap: 6px;
    flex: none;
}

/* Har bir tugma ostidagi qisqa yorliq (masalan "Oldingi", "Keyingi") —
   ikonka nimani anglatishini hover'siz ham darhol tushunarli qiladi. */
.audio-player__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.audio-player__nav-item span {
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.audio-player__progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.audio-player__progress-row .now-playing__progress-track { flex: 1; }
.audio-player__progress-label {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* BUGFIX/YANGI: bu tugmalar avval faqat ikonka edi (matn yo'q, faqat
   hover'da "title" tooltip ko'rinardi) — sichqonsiz (telefon/planshet)
   ishlatganda nima qilishi umuman aniq emas edi. Endi har birining
   ostida qisqa yorliq bor, va tugmalarning o'zi ham (32px -> 38px)
   biroz kattaroq, bosishga qulayroq. */
.audio-player__nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--overlay-rgb), 0.08);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.audio-player__nav-btn .utility-chip__glyph {
    width: 16px;
    height: 16px;
}

.audio-player__nav-btn:hover {
    background: var(--teal-dark);
    color: #fff;
    transform: scale(1.08);
}

.audio-player__nav-btn:active {
    transform: scale(0.9);
}

.audio-player__nav-btn.state--active {
    background: var(--accent);
    color: #fff;
}

.audio-player__playlist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 6px;
}

.audio-player__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 12px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    animation: fadeInUp .25s ease backwards;
}

.audio-player__row:hover {
    background: rgba(var(--overlay-rgb), 0.06);
}

.audio-player__row:active {
    transform: scale(0.99);
    background: rgba(var(--overlay-rgb), 0.1);
}

.audio-player__row.state--active {
    background: rgba(var(--overlay-rgb), 0.08);
    border-left-color: var(--accent);
}

.audio-player__art {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.audio-player__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.audio-player__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player__row.state--active .audio-player__title {
    color: var(--accent);
    font-size: 16.5px;
    /* MUHIM: foydalanuvchi so'ragan aniq talab — bu ilova FAQAT tinglash
       emas, so'zni O'QISH imkonini ham berishi kerak. Shuning uchun hozir
       "o'ynalayotgan" (faol) so'z boshqalardan sezilarli KATTAROQ va
       qalinroq qilib ko'rsatiladi — ko'zga tez tashlanadigan, o'qishga
       qulay bo'lishi uchun. */
}
.audio-player__row.state--active .audio-player__art {
    width: 50px;
    height: 50px;
    font-size: 22px;
}

.audio-player__artist {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BUGFIX/YANGI: bu tugma avval "⋯" (noaniq, uch nuqta) belgisi bilan
   ko'rsatilardi — nima qilishini hech kim taxmin qilolmasdi. Endi
   tushunarli takrorlash belgisi (🔂) va biroz kattaroq (30px -> 34px),
   bosishga qulayroq maydon bilan. */
.audio-player__dots {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.audio-player__dots:hover {
    background: rgba(var(--overlay-rgb), 0.1);
    color: var(--fg);
}

.audio-player__eq {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 16px;
}

.audio-player__eq span {
    width: 3px;
    background: #fff;
    border-radius: 2px;
    height: 4px;
    animation: eqBounce .9s ease-in-out infinite;
}

.audio-player__eq span:nth-child(1) {
    animation-delay: 0s;
}

.audio-player__eq span:nth-child(2) {
    animation-delay: .15s;
}

.audio-player__eq span:nth-child(3) {
    animation-delay: .3s;
}

.audio-player__eq span:nth-child(4) {
    animation-delay: .45s;
}

.audio-player__spacer {
    /* BUGFIX: avval 84px edi — pastdagi qotib turuvchi mini-pleyer
       oxirgi qatorni (masalan ro'yxatdagi so'nggi so'zni) qisman
       qoplab qo'yardi, ayniqsa brauzer oynasi pastroq bo'lganda. Endi
       mini-pleyer balandligi + soyasi uchun yetarlicha joy qoldiriladi. */
    height: 128px;
}

.audio-player__miniplayer {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(var(--navshell-rgb), 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--overlay-rgb), 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 95;
    animation: fadeInUp .3s ease;
}
/* Mini-pleyer ostidagi kontent bilan "kesilib qolgandek" ko'rinmasligi
   uchun, uning orqasida yumshoq, kengroq fon soyasi — ro'yxat oxiri
   pleyer ostiga o'tganda ham silliq ko'rinadi. */
.audio-player__miniplayer::before {
    content: "";
    position: absolute;
    inset: -18px -12px -18px -12px;
    background: linear-gradient(180deg, transparent, var(--bg, #0a0f1a) 55%);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

@media (max-width:900px) {
    /* MUHIM TUZATISH: avval bu yerda "max-width:640px" va
       "bottom: calc(70px...)" edi. Bu ikki muammoga sabab bo'lardi:
       (1) 641-899px oralig'ida moslashmay, pastki navigatsiya panelini
       qoplab qolardi; (2) hatto to'g'ri moslashgan holatda ham, doimiy
       ko'rinadigan #chatFab tugmasi (bottom:78-128px oralig'ida) bilan
       TO'G'RIDAN-TO'G'RI ustma-ust tushardi (ikkalasi ham shu balandlikda
       edi). Endi mini-pleyer #chatFab'dan ANIQ YUQORIDA joylashadi. */
    .audio-player__miniplayer {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
    }
}

.audio-player__mini-art {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.audio-player__mini-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.audio-player__mini-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player__mini-artist {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player__mini-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.audio-player__mini-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(var(--overlay-rgb), 0.2);
}

.audio-player__mini-btn:active {
    transform: scale(0.88);
}

.audio-player__mini-btn:not(.audio-player__mini-play) {
    background: rgba(var(--overlay-rgb), 0.1);
    color: var(--fg);
}

.utility-chip__glyph--mini {
    width: 17px;
    height: 17px;
}

.listen__word {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-radius: 12px;
    margin-bottom: 7px;
    background: rgba(var(--overlay-rgb), 0.05);
    border: 1px solid rgba(var(--overlay-rgb), 0.08);
    transition: background .3s, color .3s, transform .2s;
    cursor: pointer;
}

.listen__word:hover {
    background: rgba(var(--overlay-rgb), 0.1);
}

.listen__word.state--active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.02);
}

.listen__word.state--active .listen__en,
.listen__word.state--active .listen__uz {
    color: #fff;
}

.listen__en {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--fg);
}

.listen__uz {
    font-size: 13px;
    color: var(--muted);
}

.listen__word.state--active .listen__uz {
    color: rgba(255, 255, 255, 0.9);
}

.listen__controls-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
    flex-wrap: nowrap;
}

.listen__controls-row button {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg);
    background: rgba(var(--overlay-rgb), 0.1);
    transition: transform .15s, background .2s;
    flex: none;
}

.utility-glyph--big {
    width: 26px;
    height: 26px;
}

#lpPlay.ctrl--big .utility-glyph--big {
    color: #fff;
}

.listen__controls-row button:active {
    transform: scale(0.9);
}

.ctrl--small {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 16px;
}

.ctrl--small.state--active {
    background: var(--success);
    color: #fff;
}

.ctrl--mid {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 17px;
}

.ctrl--big {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 24px;
    background: var(--accent);
    color: #fff;
}

.listen__progress {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 14px;
}

@media (max-width:420px) {
    .ctrl--mid {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .ctrl--small {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .ctrl--big {
        width: 58px;
        height: 58px;
        font-size: 22px;
    }

    .listen__controls-row {
        gap: 5px;
    }

    .now-playing__en {
        font-size: 26px;
    }
}

/* level grid (90 levels) */
.level__grid-wrap {
    clear: both;
    animation: fadeInUp .35s ease;
}

.diff__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    clear: both;
}

.diff__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    border: 2px solid var(--paper2);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    animation: fadeInUp .3s ease backwards;
}

.diff__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.diff__btn:active {
    transform: translateY(0);
}

.diff__btn:nth-child(2) {
    animation-delay: .04s;
}

.diff__btn:nth-child(3) {
    animation-delay: .08s;
}

.diff__btn:nth-child(4) {
    animation-delay: .12s;
}

.diff__btn:nth-child(5) {
    animation-delay: .16s;
}

.diff__t0 {
    border-color: #7CC98A;
}

.diff__t1 {
    border-color: #D9C15A;
}

.diff__t2 {
    border-color: var(--accent);
}

.diff__t3 {
    border-color: #E2574C;
}

.diff__t4 {
    border-color: #8A6FB0;
}

.diff__icon {
    font-size: 24px;
    flex: none;
}

.diff__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diff__label {
    font-weight: 800;
    font-size: 15.5px;
    color: var(--ink);
}

.diff__desc {
    font-size: 11.5px;
    color: #8b98a5;
}

.diff__stars {
    font-size: 13px;
    letter-spacing: 1px;
    flex: none;
}

.modal__card.dark__modal .diff__btn {
    background: rgba(251, 247, 238, 0.06);
}

.modal__card.dark__modal .diff__label {
    color: var(--paper);
}

.level__tier-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--teal-dark);
    margin: 18px 0 10px;
}

.level__tier-label:first-child {
    margin-top: 0;
}

.level__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lvl__node {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--paper2);
    transition: transform .15s, box-shadow .15s, filter .15s;
}

.lvl__node:not(:disabled):hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    filter: brightness(1.06);
}

.lvl__node:not(:disabled):active {
    transform: translateY(0) scale(0.95);
}

.lvl__node.state--locked {
    background: var(--paper2);
    color: #b4ac9a;
    cursor: not-allowed;
}

.lvl__node.state--done {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.lvl__node.state--current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.games__intro {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 20px;
}

.play-tile {
    background: var(--bg2);
    border: 1px solid rgba(var(--overlay-rgb), 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    animation: fadeInUp .4s ease backwards;
}

.play-lab .play-tile:nth-child(2) {
    animation-delay: .04s;
}

.play-lab .play-tile:nth-child(3) {
    animation-delay: .08s;
}

.play-lab .play-tile:nth-child(4) {
    animation-delay: .12s;
}

.play-lab .play-tile:nth-child(5) {
    animation-delay: .16s;
}

.play-lab .play-tile:nth-child(6) {
    animation-delay: .20s;
}

.play-lab .play-tile:nth-child(7) {
    animation-delay: .24s;
}

.play-lab .play-tile:nth-child(8) {
    animation-delay: .28s;
}

.play-lab .play-tile:nth-child(9) {
    animation-delay: .32s;
}

.typing-lab .play-tile:nth-child(2) {
    animation-delay: .04s;
}

.typing-lab .play-tile:nth-child(3) {
    animation-delay: .08s;
}

.typing-lab .play-tile:nth-child(4) {
    animation-delay: .12s;
}

.essential__card {
    animation: fadeInUp .4s ease backwards;
}

.listening-lab .essential__card:nth-child(2) {
    animation-delay: .03s;
}

.listening-lab .essential__card:nth-child(3) {
    animation-delay: .06s;
}

.listening-lab .essential__card:nth-child(4) {
    animation-delay: .09s;
}

.listening-lab .essential__card:nth-child(5) {
    animation-delay: .12s;
}

.listening-lab .essential__card:nth-child(6) {
    animation-delay: .15s;
}

.listening-lab .essential__card:nth-child(7) {
    animation-delay: .18s;
}

.listening-lab .essential__card:nth-child(8) {
    animation-delay: .21s;
}

.listening-lab .essential__card:nth-child(9) {
    animation-delay: .24s;
}

.listening-lab .essential__card:nth-child(10) {
    animation-delay: .27s;
}

.listening-lab .essential__card:nth-child(11) {
    animation-delay: .30s;
}

.listening-lab .essential__card:nth-child(12) {
    animation-delay: .33s;
}

.listening-lab .essential__card:nth-child(13) {
    animation-delay: .36s;
}

.listening-lab .essential__card:nth-child(14) {
    animation-delay: .39s;
}

.listening-lab .essential__card:nth-child(15) {
    animation-delay: .42s;
}

.listening-lab .essential__card:nth-child(16) {
    animation-delay: .45s;
}

.play-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.play-tile:active {
    transform: translateY(0);
}

.play-tile:hover {
    border-color: var(--accent);
}

.play-tile__visual {
    font-size: 34px;
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(var(--overlay-rgb), 0.1), rgba(var(--overlay-rgb), 0.03));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.1);
}

.play-tile__icon {
    width: 28px;
    height: 28px;
}

.play-tile:nth-child(3n+1) .play-tile__visual {
    color: var(--accent);
}

.play-tile:nth-child(3n+2) .play-tile__visual {
    color: var(--teal);
}

.play-tile:nth-child(3n+3) .play-tile__visual {
    color: var(--purple);
}

.play-tile__content h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--fg);
}

.play-tile__content p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}


/* ==========================================================================
   MUHIM, KRITIK TUZATISH: "Tinglash" bo'limidagi bo'lim (sahifa) ro'yxati
   (.page__row) uchun HECH QANDAY CSS mavjud emas edi — bu qatorlar
   stilsiz, tartibsiz ko'rinishda chiqar edi.
   ========================================================================== */
.page__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: 16px;
    border: 1px solid rgba(var(--overlay-rgb), .08);
    background: rgba(var(--overlay-rgb), .03);
    cursor: pointer;
    transition: background .15s ease, transform .15s cubic-bezier(.2, .8, .2, 1), border-color .15s ease;
}
.page__row:hover {
    background: rgba(var(--overlay-rgb), .07);
    border-color: rgba(var(--accent-rgb), .2);
    transform: translateY(-2px);
}
.page__row:active {
    transform: translateY(0) scale(.99);
}
.page__row-num {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: #fff;
    font-weight: 800;
    font-size: 13px;
}
.page__row-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listen__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    margin-bottom: 10px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease;
}
.listen__back:hover { color: var(--accent); }
.listen__title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    margin: 0 0 14px;
    color: var(--fg);
}

/* ---------- Tinglash: yakuniy "polish" (avvalgi final-ui-polish.css dan) ---------- */
.essential__card,.page__row,.audio-player__row{
  border:1px solid var(--ui-line)!important;
  background:linear-gradient(145deg,#10192c,#0b1220)!important;
  border-radius:17px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}
.essential__card{padding:16px!important;transition:transform .2s ease,border-color .2s ease!important}
.essential__card:hover,.page__row:hover,.audio-player__row:hover{transform:translateY(-2px);border-color:rgba(77,225,255,.32)!important}
.essential__num{background:linear-gradient(145deg,#23334f,#17233a)!important;border:1px solid rgba(77,225,255,.18)!important}
.now-playing__card{border:1px solid var(--ui-line)!important;border-radius:22px!important;background:linear-gradient(145deg,#111b30,#0a1220)!important}
.listen__controls-row .ctrl--big,.listen__controls-row .ctrl--mid,.listen__controls-row .ctrl--small{border:1px solid var(--ui-line)!important;background:#141e32!important;color:#fff!important}

/* ---------- Tinglash kartasi (avvalgi ultimate-polish.css dan) ---------- */
.essential__card,.page__row,.audio-player__row{border:1px solid var(--ui-line)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(20,30,50,.88),rgba(11,17,30,.9))!important;box-shadow:0 10px 24px rgba(0,0,0,.14)!important;}.essential__card:hover,.page__row:hover,.audio-player__row:hover{border-color:rgba(77,225,255,.32)!important;transform:translateY(-2px);}