/* ---------- MODAL ---------- */
.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 28, 0.72);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
}

.modal__overlay.state--open {
    display: flex;
}

@media (min-width:640px) {
    .modal__overlay {
        align-items: center;
    }
}

.modal__card {
    background: var(--paper);
    color: var(--ink);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 20px 20px 0 0;
    padding: 22px 22px 100px;
    position: relative;
    transform: translateY(40px) scale(0.97);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, background-color .45s ease, color .35s ease;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
}

.modal__card::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (min-width:640px) {
    .modal__card {
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
    }
}

.modal__overlay.state--open .modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@media (min-width:640px) {
    .modal__card {
        border-radius: 20px;
        padding-bottom: 100px;
    }
}

.modal__close {
    /* BUGFIX: "float" CSS spec bo'yicha position:sticky (yoki absolute/fixed)
       elementlarida HECH QACHON qo'llanilmaydi (browser buni e'tiborsiz
       qoldiradi) — shuning uchun bu tugma avval "float:right" bilan
       o'ng tomonga chiqishi kerak edi, lekin sticky bilan birga bu
       ishlamay, tugma alohida, to'liq kenglikdagi qatorga "sirg'alib"
       chiqib ketardi (masalan "Rang sozlash" ekranida sticky "orqaga"
       qatori bilan chalkashib, chiroysiz ko'rinardi). Endi
       margin-left:auto orqali, floatga muhtoj bo'lmagan holda, har doim
       o'ng tomonda va sahifa skroll qilinganda ham joyida qotib turadi.
    */
    display: block;
    margin-left: auto;
    position: sticky;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(34, 48, 60, 0.08);
    color: var(--ink);
    font-size: 16px;
    cursor: pointer;
    z-index: 8;
}

.modal__eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--teal-dark);
    font-weight: 700;
    clear: both;
}

.modal__title {
    font-size: 24px;
    margin: 4px 0 20px;
}

.quiz__progress {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    clear: both;
}

.quiz__progress .seg {
    flex: 1;
    height: 8px;
    border-radius: 6px;
    background: var(--paper2);
}

.quiz__progress .seg.state--filled {
    background: var(--success);
}

.quiz__progress .seg.state--wrong {
    background: var(--error, #ff3860);
}

.quiz__progress .seg.state--active {
    background: var(--accent);
}

.vocabulary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flashcard {
    animation: fadeInUp .35s ease backwards;
}

.flashcard:nth-child(1) {
    animation-delay: .02s;
}

.flashcard:nth-child(2) {
    animation-delay: .06s;
}

.flashcard:nth-child(3) {
    animation-delay: .10s;
}

.flashcard:nth-child(4) {
    animation-delay: .14s;
}

.flashcard:nth-child(5) {
    animation-delay: .18s;
}

.flashcard:nth-child(6) {
    animation-delay: .22s;
}

.flashcard {
    perspective: 800px;
    height: 92px;
    position: relative;
}

.flashcard__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .5s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.flashcard.state--flipped .flashcard__inner {
    transform: rotateY(180deg);
}

.flashcard__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 14px;
    border: 1.5px solid var(--paper2);
}

.flashcard__face--front {
    background: #fff;
    color: var(--ink);
}

.flashcard__face--back {
    background: var(--teal-dark);
    /* YANGI: o'zbekcha tarjima matni endi yashil rangda (barcha 6 til
       uchun ham — bu qoida tilga bog'liq emas, universal). */
    color: var(--success);
    font-weight: 800;
    transform: rotateY(180deg);
}

/* ============================================================
 * YANGI, UMUMIY QAYTA ISHLATILADIGAN NAMUNA — so'z + talaffuz.
 * frontend/js/core/pronunciation-format.js orqali generatsiya qilinadi.
 * `em` asosida o'lchanadi, shuning uchun qayerda ishlatilishidan
 * qat'iy nazar har doim asosiy so'zdan ~80% (talab: 75-85%) bo'ladi.
 * ============================================================ */
.word {
    font-weight: inherit;
}
.pronunciation {
    font-size: 0.8em;
    opacity: 0.72;
    font-weight: 500;
    margin-left: 0.35em;
    font-style: italic;
}

.speak__btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(34, 48, 60, 0.08);
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip__hint {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin: 14px 0 24px;
}

.grammar__box {
    background: #fff;
    border-left: 4px solid var(--accent);
    border-radius: 0 12px 12px 0;
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #3a4552;
    margin-bottom: 8px;
}

.quiz__q {
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 16px;
}

.quiz__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz__opt {
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid var(--paper2);
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    color: var(--ink);
    transition: all .1s;
}

.quiz__opt:hover:not(:disabled) {
    border-color: var(--teal);
}

.quiz__opt.state--correct {
    background: rgba(88, 204, 106, 0.15);
    border-color: var(--success);
    color: var(--success-dark);
    font-weight: 700;
}

.quiz__opt.state--wrong {
    background: rgba(226, 87, 76, 0.12);
    border-color: var(--error);
    color: var(--error-dark);
    font-weight: 700;
}

.quiz__opt:disabled {
    cursor: default;
}

.big__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: none;
    background: var(--accent-dark);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    margin-top: 26px;
    transition: background .15s, transform .1s;
}

.big__btn:not(:disabled):hover {
    background: var(--accent);
}

.big__btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.big__btn:disabled {
    background: #d8d2c3;
    color: #a39d8f;
    box-shadow: none;
    cursor: not-allowed;
}

.feedback__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    padding: 18px 22px 26px;
    transform: translateY(100%);
    transition: transform .25s ease;
}

.feedback__bar.state--visible {
    transform: translateY(0);
}

.feedback__bar.state--correct {
    background: #d7f0da;
}

.feedback__bar.state--wrong {
    background: #fbdcd8;
}

.feedback__bar-inner {
    max-width: 560px;
    margin: 0 auto;
}

.feedback__title {
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feedback__bar.state--correct .feedback__title {
    color: var(--success-dark);
}

.feedback__bar.state--wrong .feedback__title {
    color: var(--error-dark);
}

.feedback__sub {
    font-size: 13px;
    color: #4a5560;
    margin-top: 2px;
}

.feedback__btn {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
}

.feedback__bar.state--correct .feedback__btn {
    background: var(--success-dark);
}

.feedback__bar.state--wrong .feedback__btn {
    background: var(--error-dark);
}

.result__wrap {
    text-align: center;
    padding: 20px 0 0;
}

.result__stars {
    font-size: 40px;
    letter-spacing: 6px;
    margin: 14px 0;
}

.result__stars-5 {
    font-size: 30px;
    letter-spacing: 3px;
}

.result__star {
    display: inline-block;
    position: relative;
}

.result__star-empty {
    color: rgba(var(--overlay-rgb), 0.25);
}

.result__star-filled {
    opacity: 0;
    animation: starFlyIn 1s cubic-bezier(.16,.85,.3,1.15) forwards;
    filter: drop-shadow(0 0 8px rgba(255, 214, 64, 0.85)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.result__star-filled::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        6px -14px 0 0 rgba(255, 224, 102, 0),
        14px -34px 0 -1px rgba(255, 224, 102, 0),
        24px -58px 0 -1px rgba(255, 224, 102, 0);
    animation: starTrail 1s ease-out forwards;
    animation-delay: inherit;
    pointer-events: none;
}

.star__burst {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 102, 0.9), rgba(255, 224, 102, 0) 70%);
    opacity: 0;
    animation: starBurstPop .65s ease-out forwards;
    animation-delay: inherit;
    pointer-events: none;
    z-index: -1;
}

@keyframes starFlyIn {
    0% {
        opacity: 0;
        transform: translate(220px, -280px) scale(0.15) rotate(-260deg);
    }

    45% {
        opacity: 1;
    }

    65% {
        opacity: 1;
        transform: translate(-10px, 6px) scale(1.4) rotate(20deg);
    }

    82% {
        transform: translate(0, -5px) scale(0.9) rotate(-10deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

@keyframes starTrail {
    0% {
        opacity: 1;
        box-shadow:
            30px -40px 0 0 rgba(255, 224, 102, .9),
            55px -75px 1px -1px rgba(255, 224, 102, .6),
            85px -118px 2px -1px rgba(255, 224, 102, .3);
    }

    60% {
        opacity: .6;
        box-shadow:
            6px -8px 0 0 rgba(255, 224, 102, .5),
            14px -18px 1px -1px rgba(255, 224, 102, .3),
            24px -30px 2px -1px rgba(255, 224, 102, .1);
    }

    100% {
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(255, 224, 102, 0),
            0 0 0 0 rgba(255, 224, 102, 0),
            0 0 0 0 rgba(255, 224, 102, 0);
    }
}

@keyframes starBurstPop {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    45% {
        opacity: .9;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

.result__xp {
    display: inline-block;
    background: var(--paper2);
    color: var(--accent-dark);
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    margin-top: 6px;
}

.result__xp-pop {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
    animation: xpPopIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes xpPopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
    }

    70% {
        opacity: 1;
        transform: scale(1.12) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------- LOCK WARNING (dars natijasida "1 tadan ortiq xato" holati) ----------
   Keyingi bosqich ochilmaganda ko'rsatiladigan animatsiyali ogohlantirish.
   result__wrap ichida, natija yulduzlaridan keyin, "Qayta urinib ko'rish"
   tugmasidan oldin chiqadi. */
.lock-warning {
    margin: 18px auto 4px;
    max-width: 360px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(var(--warning-rgb), 0.12);
    border: 1.5px solid rgba(var(--warning-rgb), 0.4);
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    animation: lockWarningIn .5s cubic-bezier(.34,1.2,.64,1) forwards;
}

.lock-warning__icon {
    font-size: 34px;
    display: inline-block;
    animation: lockWarningShake 0.6s ease-in-out .5s;
    filter: drop-shadow(0 2px 6px rgba(var(--warning-rgb), 0.5));
}

.lock-warning__title {
    font-weight: 800;
    font-size: 16px;
    color: var(--warning-dark);
    margin-top: 4px;
}

.lock-warning__text {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.big__btn-retry {
    background: var(--warning);
    color: #2b1c00;
}

@keyframes lockWarningIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lockWarningShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(6deg); }
}

/* ---------- Sozlamalar oynalari uchun "orqaga qaytish" qatori
   (avvalgi final-fixes.css dan). Strelka (←) EYEBROW yorlig'idan
   (masalan "O'QUV TILI") tepada turadi. Faqat strelkaning o'zi
   bosiladi — pastdagi yorliq oddiy matn, hech qanday fon/chegara/
   kursor olmaydi, shuning uchun u "tugma" kabi ko'rinmaydi. ---------- */
.modal__back-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: sticky;
    top: -2px;
    z-index: 6;
    background: var(--bg, #0a0f1a);
    padding: 2px 0 12px;
    margin: -2px 0 2px;
}
body.theme-picker--light .modal__back-row {
    background: #ffffff;
}
.modal__back-btn {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--overlay-rgb), .12);
    background: rgba(var(--overlay-rgb), .05);
    color: var(--fg);
    cursor: pointer;
    transition: transform .16s cubic-bezier(.2, .8, .2, 1), background .16s ease, border-color .16s ease;
}
.modal__back-btn:hover {
    transform: translateX(-3px);
    background: rgba(var(--teal-rgb), .14);
    border-color: rgba(var(--teal-rgb), .35);
}
.modal__back-btn:active {
    transform: translateX(-1px) scale(.92);
}
.modal__back-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: default !important;
    pointer-events: none;
    user-select: none;
}
.modal__title--sticky {
    margin: 2px 0 0 !important;
}

/* ---------- Barcha modallar: yakuniy "polish" (avvalgi final-ui-polish.css dan) ---------- */
.modal__overlay,.auth__overlay{background:rgba(2,6,14,.76)!important;backdrop-filter:blur(16px)!important}
.modal__card,.activity-calendar-modal{border:1px solid var(--ui-line)!important;border-radius:24px!important;background:linear-gradient(145deg,#0f1728,#090f1c)!important;box-shadow:0 34px 100px rgba(0,0,0,.56)!important}
.menu__item{background:linear-gradient(145deg,#131e32,#0c1424)!important;border:1px solid var(--ui-line)!important;border-radius:16px!important}
.menu__item:hover{border-color:rgba(77,225,255,.34)!important;transform:translateY(-2px)}

/* ---------- Modal (avvalgi ultimate-polish.css dan) ---------- */
.modal__overlay{background:rgba(2,5,11,.76)!important;backdrop-filter:blur(14px)!important;}
.modal__card,.auth__card{border-color:rgba(105,177,232,.18)!important;background:linear-gradient(145deg,#10192c,#080f1d 90%)!important;box-shadow:0 35px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.04)!important;}
.modal__card{border-radius:25px!important;}.modal__close{width:40px!important;height:40px!important;border-radius:12px!important;background:rgba(255,255,255,.05)!important;border:1px solid var(--ui-line)!important;}
@media(max-width:560px){.modal__card{width:calc(100vw - 18px)!important;}}

/* ---------- Modal — yagona, izchil mahsulot qobig'i (avvalgi
   quality-polish.css dan). Qorong'i rejim premium, yorug' rejim
   o'qilishi oson bo'lib qoladi. ---------- */
body:not(.theme-picker--light) { color-scheme: dark; }
.modal__overlay {
  background:
    radial-gradient(circle at 18% 18%, rgba(236,43,155,.12), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(56,216,255,.10), transparent 30%),
    rgba(2,6,16,.78);
  backdrop-filter: blur(18px) saturate(1.12);
}
.modal__card.dark__modal {
  color: var(--fg);
  background:
    radial-gradient(circle at 90% 0%, rgba(56,216,255,.07), transparent 25%),
    radial-gradient(circle at 0% 100%, rgba(168,85,247,.08), transparent 28%),
    linear-gradient(145deg, #0d1425 0%, #0a1020 100%);
  border: 1px solid rgba(157,178,222,.17);
  box-shadow: 0 32px 90px rgba(0,0,0,.58), 0 0 55px rgba(168,85,247,.08);
}
.modal__card.dark__modal .modal__close {
  /* BUGFIX: bu yerda avval "position:absolute" edi — bu tugmani asosiy
     sticky qoidadan chiqarib tashlar edi, natijada "Rang sozlash" kabi
     dark__modal ekranlarida ✕ tugmasi joyida QOTIB TURMASDAN, kontent
     bilan birga pastga skroll bo'lib ko'zdan yo'qolib qolar edi. Endi
     u ham bazaviy qoida bilan bir xil — position:sticky — shu bilan
     bir joyda, doim ko'rinadigan holda qoladi. */
  position: sticky;
  top: 0;
  margin-left: auto;
  background: rgba(255,255,255,.055);
  color: #f4f7ff;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.modal__card.dark__modal .modal__close:hover {
  transform: rotate(5deg) scale(1.04);
  background: rgba(236,43,155,.14);
  border-color: rgba(236,43,155,.38);
}
.modal__card.dark__modal .modal__eyebrow { color: #64e7ff; }
.modal__card.dark__modal .modal__title {
  color: #f8fbff;
  font-family: 'Fraunces', serif;
  letter-spacing: -.025em;
}
.modal__card.dark__modal .account__note,
.modal__card.dark__modal .games__intro,
.modal__card.dark__modal .flip__hint { color: #8f9ab7; }
.modal__card.dark__modal .quiz__q,
.modal__card.dark__modal .grammar__box,
.modal__card.dark__modal .dictionary__card,
.modal__card.dark__modal .dictionary__entry,
.modal__card.dark__modal .flashcard__face,
.modal__card.dark__modal .duration__chip,
.modal__card.dark__modal .dictionary__letter,
.modal__card.dark__modal .translator__pane,
.modal__card.dark__modal .translator__dd-panel {
  background: linear-gradient(145deg, rgba(21,31,53,.92), rgba(11,18,34,.92));
  color: #edf4ff;
  border-color: rgba(164,177,214,.15);
}
.modal__card.dark__modal .quiz__opt {
  background: linear-gradient(145deg, rgba(18,28,48,.95), rgba(10,17,31,.95));
  color: #edf4ff;
  border: 1px solid rgba(164,177,214,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.modal__card.dark__modal .quiz__opt:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(56,216,255,.42);
  background: linear-gradient(145deg, rgba(24,39,64,.98), rgba(11,20,38,.98));
}
.modal__card.dark__modal .grammar__box {
  color: #c4d0e8;
  border-left-color: #ec2b9b;
}
.modal__card.dark__modal .flashcard__face--front { color: #edf4ff; }
.modal__card.dark__modal .flashcard__face--back { color: var(--success); }
.modal__card.dark__modal .menu__item,
.modal__card.dark__modal .theme-picker__row {
  border: 1px solid rgba(164,177,214,.14);
  background: linear-gradient(145deg, rgba(25,35,58,.84), rgba(13,20,37,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.modal__card.dark__modal .menu__item:hover,
.modal__card.dark__modal .theme-picker__row:hover {
  transform: translateY(-2px);
  border-color: rgba(56,216,255,.28);
  background: linear-gradient(145deg, rgba(28,42,68,.94), rgba(14,23,42,.94));
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 20px rgba(56,216,255,.05);
}
.modal__card.dark__modal .account__profile-banner {
  background:
    radial-gradient(circle at 100% 0%, rgba(236,43,155,.12), transparent 32%),
    linear-gradient(145deg, rgba(26,37,62,.96), rgba(12,19,35,.96));
  border-color: rgba(236,43,155,.18);
}
@media (max-width: 700px){
  .modal__card.dark__modal{max-height:94vh;padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion: reduce){
  .modal__card.dark__modal .menu__item{transition:none}
}
body.theme-picker--light .modal__card.dark__modal{background:linear-gradient(145deg,#fff,#eef3f8);color:#162033;border-color:rgba(30,45,70,.12)}
body.theme-picker--light .modal__card.dark__modal .modal__title,body.theme-picker--light .modal__card.dark__modal .quiz__q{color:#162033}
body.theme-picker--light .modal__card.dark__modal .account__note,body.theme-picker--light .modal__card.dark__modal .games__intro{color:#68758a}
@media(max-width:900px){.modal__overlay{padding:12px}.modal__card{width:min(100%,680px);max-height:calc(100dvh - 24px)}}
@media(max-width:640px){.modal__card.dark__modal{padding:18px 14px;border-radius:22px}.modal__card{border-radius:22px}}