/* =========================================================
   RASMLI TEST — Topshiriq bo'limining interaktiv testi.
   platform.css tokenlari ustida ishlaydi (base.html ni kengaytiradi),
   lekin 2–4-sinf o'quvchilari uchun yirikroq va rangliroq.
   ========================================================= */

/* Savol kartalarining navbatlashuvchi foni. Metodika bo'limida shunday
   juftlik bor (`--limon`/`--yashil`, platform.css), lekin bu ikkisi faqat
   shu sahifada ishlatilgani uchun shu yerda turadi.
   Ranglar Metodika juftligiga yorug'lik jihatidan yaqin olingan, matn
   kontrasti esa AA dan ancha yuqori (--ink bilan 13.1 va 12.8). */
:root {
    --osmon:      #E1EEFA;
    --osmon-2:    #B9D5EF;   /* chegara uchun to'qroq tovlanish */
    --binafsha:   #EDE6F9;
    --binafsha-2: #D2C4EE;
}

.rt-head::before { background-image: url('/static/img/qollar.jpg'); }

/* Sarlavha ostidagi qisqa ma'lumot: topshiriq / ball / vaqt / sinf */
.rt-fakt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
.rt-fakt li {
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.86);
}
.rt-fakt b { color: var(--zafaron); font-family: var(--font-display); }

/* ===== Yopishqoq boshqaruv paneli ===== */
.rt-panel {
    position: sticky;
    top: 73px;                 /* navbar balandligi */
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(20, 32, 58, 0.07);
}
.rt-progress {
    height: 4px;
    background: var(--stone-2);
}
.rt-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--firuza), var(--zafaron));
    transition: width 0.25s;
}
.rt-panel-ichi {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
}
.rt-holat { font-size: 0.92rem; color: var(--ink-2); }
.rt-holat b { color: var(--siyoh); font-size: 1.05rem; }
.rt-tekshir { margin-left: auto; padding: 10px 22px; }
.rt-tekshir:disabled { opacity: 0.45; cursor: default; }
.rt-panel-tugadi .rt-progress span { background: var(--firuza); }

/* ===== Burchakdagi soat =====
   O'ng pastki burchakda suzib turadi: tashqi halqa vaqt o'tgani sari
   kamayadi, o'rtasida raqam. Ohirgi 5 daqiqada za'faron, 1 daqiqada
   anor rangga o'tadi va sekin urib turadi. */
.rt-soat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 45;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 12px 30px rgba(20, 32, 58, 0.24);
    transition: box-shadow 0.3s, transform 0.3s, opacity 0.3s;
}
.rt-soat-halqa {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);   /* hisob tepadan boshlansin */
}
.rt-soat-fon { fill: none; stroke: var(--stone-2); stroke-width: 4; }
.rt-soat-yoy {
    fill: none;
    stroke: var(--firuza);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.rt-soat-matn { display: grid; justify-items: center; line-height: 1.15; }
.rt-soat-matn b {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--siyoh);
    font-variant-numeric: tabular-nums;
}
.rt-soat-matn small {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.rt-soat.ogoh .rt-soat-yoy { stroke: var(--zafaron); }
.rt-soat.kam .rt-soat-yoy { stroke: var(--anor); }
.rt-soat.kam .rt-soat-matn b { color: var(--anor); }
.rt-soat.kam { animation: rt-puls 1.4s ease-in-out infinite; }
.rt-soat.tugadi { opacity: 0.75; animation: none; }
.rt-soat.tugadi .rt-soat-yoy { stroke: var(--ink-3); }
@keyframes rt-puls {
    50% { box-shadow: 0 12px 30px rgba(192, 57, 43, 0.5); transform: scale(1.04); }
}

/* ===== Savol kartasi ===== */
.rt-bolim { padding-top: 40px; }

.rt-savol {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 24px 26px 22px;
    margin-bottom: 22px;
    scroll-margin-top: 150px;
}
/* Kartalar navbatma-navbat osmon va binafsha fonda — Metodika bo'limidagi
   limon/yashil juftligi bilan bir mantiqda. `.rt-savol` lar `.wrap` ning
   1..15-farzandlari (oxirida `.rt-natija` turadi), shuning uchun nth-child
   to'g'ri sanaydi. */
.rt-savol:nth-child(odd) {
    background: var(--osmon);
    border-color: var(--osmon-2);
}
.rt-savol:nth-child(even) {
    background: var(--binafsha);
    border-color: var(--binafsha-2);
}
.rt-savol-bosh {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.rt-raqam {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--siyoh);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}
.rt-savol-bosh h2 {
    flex: 1;
    min-width: 0;
    font-size: 1.16rem;
    line-height: 1.35;
}
.rt-ball {
    flex-shrink: 0;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--limon);
    border: 1px solid var(--zafaron);
    color: #8a5a12;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Rasm variantlari ===== */
.rt-variantlar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.rt-variant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 14px 12px;
    /* Yarim shaffof oq: kartaning rangi ostidan sal ko'rinib turadi, shunda
       ichidagi OQ rasm qutisi ajralib turadi. To'liq oq qilsak, ikkisi
       qo'shilib ketardi; bej (--stone) esa osmon/binafsha fonda loyqa. */
    background: rgba(255, 255, 255, 0.62);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--r-md);
    font-family: inherit;
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s, background-color 0.16s;
}
/* Rasm qutisi: balandligi qat'iy — kartalar bir tekis turadi.
   Rasmning O'ZI kattalashtirilmaydi: Worddagi asl nusxalar 180–320px,
   cho'zilsa xira bo'lib ketadi. Shuning uchun tabiiy o'lchamida,
   qutining o'rtasida turadi. */
.rt-variant-rasm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    padding: 6px;
    background: #fff;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.rt-variant img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.rt-variant figcaption,
.rt-variant-harf {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--siyoh);
}

/* Tanlanadigan variant (bitta javobli savollar) */
button.rt-variant { cursor: pointer; }
button.rt-variant:hover:not(:disabled) {
    border-color: var(--firuza);
    background: var(--paper);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
button.rt-variant:disabled { cursor: default; }
.rt-variant.tanlandi {
    border-color: var(--firuza);
    background: #E6F4F4;
}
.rt-variant.tanlandi .rt-variant-harf {
    background: var(--firuza);
    border-color: var(--firuza);
    color: #fff;
}
/* Faqat ko'rsatish uchun (moslashtirish savollari) */
.rt-korish .rt-variant { background: rgba(255, 255, 255, 0.62); }

/* ===== Moslashtirish qatorlari ===== */
.rt-moslash {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.rt-qator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    /* Variant kartalari bilan bir xil yarim shaffof oq (yuqoridagi izoh).
       To'g'ri/xato holatlari (.rt-togri / .rt-xato) o'z rangini beradi —
       ular ikki sinfli, shuning uchun shu qoidadan kuchli. */
    background: rgba(255, 255, 255, 0.62);
    border: 1.5px solid transparent;
}
.rt-yorliq {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--siyoh);
}
.rt-harflar { display: flex; gap: 8px; flex-shrink: 0; }
.rt-harf {
    width: 46px;
    height: 42px;
    border-radius: var(--r-sm);
    border: 2px solid var(--line);
    background: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.rt-harf:hover:not(:disabled) { border-color: var(--firuza); color: var(--siyoh); transform: translateY(-1px); }
.rt-harf:disabled { cursor: default; }
.rt-harf.tanlandi {
    background: var(--firuza);
    border-color: var(--firuza);
    color: #fff;
}
.rt-javob {
    flex-shrink: 0;
    min-width: 46px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--firuza);
}
.rt-belgi {
    flex-shrink: 0;
    width: 26px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* Tekshirilgandan keyingi holat */
.rt-qator.rt-togri { background: #E8F6EC; border-color: #48A860; }
.rt-qator.rt-togri .rt-belgi { color: #2E7D45; }
.rt-qator.rt-xato { background: #FDECEA; border-color: var(--anor); }
.rt-qator.rt-xato .rt-belgi { color: var(--anor); }

.rt-harf.kalit, .rt-variant.kalit {
    border-color: #48A860;
    box-shadow: 0 0 0 3px rgba(72, 168, 96, 0.22);
}
.rt-harf.kalit { background: #E8F6EC; color: #2E7D45; }
.rt-harf.notogri, .rt-variant.notogri {
    border-color: var(--anor);
    background: #FDECEA;
}
.rt-harf.notogri { color: var(--anor); }
.rt-variant.notogri .rt-variant-harf { background: var(--anor); border-color: var(--anor); color: #fff; }

/* ===== Natija ===== */
.rt-natija {
    text-align: center;
    padding: 44px 30px 40px;
    background: var(--stone);
    border: 2px dashed var(--stone-2);
    border-radius: var(--r-lg);
    scroll-margin-top: 150px;
}
.rt-natija[hidden] { display: none; }
.rt-natija.rt-alo { background: #E8F6EC; border-color: #9AD3AA; }
.rt-natija .motif { width: 74px; height: 74px; color: var(--zafaron); margin: 0 auto 14px; }
.rt-natija h2 { font-size: 1.5rem; margin-bottom: 14px; }
.rt-ochko { font-family: var(--font-display); font-size: 2rem; color: var(--siyoh); margin: 0; }
.rt-ochko b { font-size: 2.6rem; color: var(--anor); }
.rt-foiz {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--firuza);
    margin: 4px 0 12px;
}
.rt-izoh { color: var(--ink-2); max-width: 54ch; margin: 0 auto 24px; }
.rt-natija-tugma { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Yorug' fondagi ikkilamchi tugma — platform.css dagi .btn-outline qorong'i
   fon uchun mo'ljallangan, shuning uchun bu yerda o'zimizniki. */
.btn-line {
    background: var(--paper);
    color: var(--siyoh);
    border-color: var(--line);
}
.btn-line:hover { background: var(--stone); border-color: var(--siyoh); }

/* ===== Boshlash oynasi =====
   Test darrov boshlanib ketmasin: sahifa xiralashadi, ustida qoida va
   "Boshlash" tugmasi turadi. Soat ham shu tugma bosilganda yuradi.

   Xiralik ATAYLAB `backdrop-filter` bilan — mazmunning o'ziga `filter`
   qo'yilsa, u `position: fixed`/`sticky` uchun yangi tayanch blok yasaydi
   va navbar, boshqaruv paneli hamda burchakdagi soat joyidan siljib
   ketardi. `backdrop-filter` esa ortidagi rasmni faqat chizishda xiralatadi.
   Brauzer uni qo'llab-quvvatlamasa, ostidagi yarim shaffof fon qoladi. */
.rt-parda {
    position: fixed;
    inset: 0;
    z-index: 200;          /* navbar 60, soat 45, panel 40 — hammasidan tepada */
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 32, 58, 0.55);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    animation: rt-parda-kir 0.28s ease-out;
}
.rt-parda[hidden] { display: none; }

@keyframes rt-parda-kir { from { opacity: 0; } to { opacity: 1; } }

.rt-boshla {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(20, 32, 58, 0.42);
    padding: 40px 38px 34px;
    text-align: center;
    animation: rt-boshla-kir 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes rt-boshla-kir {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.rt-boshla .motif { width: 52px; height: 52px; color: var(--zafaron); }
.rt-boshla h2 {
    font-family: var(--font-display);
    font-size: 1.62rem;
    color: var(--siyoh);
    margin: 10px 0 8px;
}
.rt-boshla-lede { color: var(--ink-2); margin: 0 auto 22px; max-width: 42ch; }

/* Qoidalar — chapga tekislangan, chunki ro'yxatni o'qish osonroq */
.rt-qoida {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
    display: grid;
    gap: 10px;
}
.rt-qoida li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.97rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.rt-qoida li::before {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--firuza);
}
.rt-qoida b { color: var(--ink); }

/* Vaqt haqidagi ogohlantirish — bosishdan oldin ko'zga tashlansin */
.rt-ogoh {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: var(--r-sm);
    background: rgba(232, 160, 42, 0.13);
    border: 1px solid rgba(232, 160, 42, 0.42);
    color: var(--ink);
    font-size: 0.94rem;
}
.rt-ogoh svg { flex-shrink: 0; color: var(--zafaron); }

.rt-boshla-tugma { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rt-boshla-tugma .btn { font-size: 1.04rem; padding: 14px 30px; }

@media (max-width: 660px) {
    .rt-boshla { padding: 30px 22px 26px; }
    .rt-boshla h2 { font-size: 1.36rem; }
    .rt-boshla-tugma .btn { width: 100%; }
}

@media (max-width: 900px) {
    .rt-variant-rasm { height: 160px; }
}

@media (max-width: 660px) {
    .rt-panel { top: 67px; }
    .rt-panel-ichi { flex-wrap: wrap; gap: 10px; }
    .rt-tekshir { width: 100%; margin-left: 0; justify-content: center; }

    .rt-soat { right: 12px; bottom: 12px; width: 68px; height: 68px; }
    .rt-soat-halqa { width: 68px; height: 68px; }
    .rt-soat-matn b { font-size: 0.92rem; }
    .rt-soat-matn small { font-size: 0.5rem; }

    .rt-variant-rasm { height: 112px; padding: 4px; }

    .rt-savol { padding: 18px 16px; }
    .rt-savol-bosh { flex-wrap: wrap; gap: 10px; }
    .rt-savol-bosh h2 { font-size: 1.05rem; flex-basis: 100%; order: 3; }
    .rt-variantlar { gap: 10px; }
    .rt-variant { padding: 8px 8px 10px; }
    .rt-qator { flex-wrap: wrap; gap: 8px 12px; }
    .rt-yorliq { flex-basis: 100%; }
    .rt-harf { width: 42px; height: 40px; }
}

/* Chop etish uchun: boshqaruv paneli va tugmalar chiqmaydi */
@media print {
    .topbar, .footer, .rt-panel, .rt-natija-tugma, .skip-link,
    .rt-soat, .rt-parda { display: none !important; }
    .rt-savol { break-inside: avoid; box-shadow: none; }
    .rt-head { background: none; color: var(--ink); }
}

/* =========================================================
   YORQIN USLUB
   =========================================================
   Sayt yorqin uslubga o'tkazildi; bu blok shu sahifani ham
   o'shanga keltiradi. Fayl OXIRIDA turadi va yuqoridagi
   qoidalarni bir xil kuchdagi selektorlar bilan yengadi.

   TEGILMAYDIGAN NARSALAR (CLAUDE.md dagi shartlar):
     - rasm qutilari sof oq bo'lib qoladi
     - jadval sarlavhasiga `position: sticky` qo'yilmaydi
     - parda `backdrop-filter` bilan xiralashadi
   ========================================================= */

/* Sarlavha ostidagi faktlar qatori.

   NEGA TUZATILDI: bu qoidalar to'q ko'k sarlavha lentasi uchun
   yozilgandi — oq matn, shaffof oq fon. Lenta yorqin uslubda och
   bo'lgani uchun matn ko'rinmay qoldi (footer havolalari bilan bir
   xil xato). Endi oq tabletka, siyoh matn, ko'k raqam. */
.rt-fakt li {
    background: #fff;
    border: 1px solid #DCE9F6;
    color: #50688A;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

.rt-fakt b {
    color: #2E7DE0;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

/* Boshlash pardasi va tugmalar */
.rt-boshla {
    border-radius: 24px;
    border: 1px solid #DCE9F6;
}

.rt-boshla h2 { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; }

/* DIQQAT: `.rt-boshla-tugma` — tugma emas, tugmalar turadigan flex KONTEYNER
   (yuqorida `display:flex` bilan). Tugmaning o'zi `#rt-boshla-tugma` (id). Ilgari
   konteyner bo'yalib, ikkala tugma ostida ko'k tabletka chiqib qolgan edi. */
#rt-boshla-tugma,
.rt-tekshir,
/* `.rt-natija-tugma` ham konteyner — ichidagi asosiy tugma bo'yaladi. */
.rt-natija-tugma .btn-solid {
    border-radius: 999px;
    background: #2E7DE0;
    border-color: #2E7DE0;
    color: #fff;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    box-shadow: 0 4px 0 #1F5FAF;
}

#rt-boshla-tugma:hover,
.rt-tekshir:hover,
.rt-natija-tugma .btn-solid:hover {
    background: #1F5FAF;
    border-color: #1F5FAF;
    box-shadow: 0 6px 0 #17497F;
}

#rt-boshla-tugma:active,
.rt-tekshir:active,
.rt-natija-tugma .btn-solid:active { box-shadow: 0 1px 0 #1F5FAF; }

/* Karta juftligi ham yorqin registrda. Ichkaridagi rasm
   qutilari SOF OQ bo'lib qoladi — ularga tegilmaydi. */
:root {
    --osmon: #E4F0FC;
    --binafsha: #EFE9FE;
}


/* =========================================================
   SAHNA — Rasmli test
   =========================================================
   Mijoz sahifalar "juda ochiq va bo'sh" dedi. Mashq sahifalarida
   (style.css) sahna allaqachon bor; bu blok shu sahifani ham
   o'sha ko'rinishga keltiradi.

   QATLAMLAR: body foni (sahna) -> body::before (parda + yon
   anjomlar) -> sahifa mazmuni -> body::after (bolalar).
   Navbar va footer shaffof emas, shuning uchun ular sahnani
   yopib turadi va o'z ko'rinishini saqlaydi.
   ========================================================= */
body.pf {
    background-color: #DCEEFB;
    background-image: url('/static/img/sahna/bogh.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.pf::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 1;
    pointer-events: none;
    background-image:
        url('/static/img/sahna/anjom/qaychi.svg'),
        url('/static/img/sahna/anjom/qogoz.svg'),
        url('/static/img/sahna/anjom/palitra.svg'),
        url('/static/img/sahna/anjom/yulduz.svg'),
        linear-gradient(180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(255, 255, 255, .40) 20%,
            rgba(255, 255, 255, .44) 80%,
            rgba(255, 255, 255, .12) 100%);
    background-repeat: no-repeat;
    background-size: 118px, 102px, 112px, 88px, cover;
    background-position:
        left 34px top 26%,
        left 66px top 68%,
        right 38px top 32%,
        right 70px top 74%,
        center;
    animation: rt-suzsin 9s ease-in-out infinite alternate;
}

@keyframes rt-suzsin {
    from { background-position: left 34px top 26%, left 66px top 68%,
                                 right 38px top 32%, right 70px top 74%, center; }
    to   { background-position: left 44px top 28%, left 56px top 65%,
                                 right 48px top 30%, right 60px top 77%, center; }
}

/* Burchakdagi bolalar — mijozning o'z illyustratsiyasi, oq foni
   kesilgan nusxa. `z-index: -1` bo'lgani uchun mazmun kartalari
   uning ustidan o'tadi va matnni to'smaydi. */
body.pf::after {
    content: '';
    position: fixed;
    left: 16px;
    bottom: 0;
    z-index: -1;
    width: 200px;
    height: 282px;
    background: url('/static/img/sahna/bolalar.png') no-repeat left bottom / contain;
    filter: drop-shadow(0 8px 14px rgba(20, 50, 90, .22));
    pointer-events: none;
    animation: rt-bola 6s ease-in-out infinite alternate;
}

@keyframes rt-bola {
    from { transform: translateY(0)     rotate(0deg); }
    to   { transform: translateY(-10px) rotate(-1.2deg); }
}

/* Sahna ustida turgan mazmun aniq ko'rinishi uchun sarlavha
   lentasi va kartalar allaqachon shaffof emas — ularga tegilmaydi. */

@media (max-width: 1300px) {
    body.pf::before {
        background-image: linear-gradient(180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(255, 255, 255, .48) 20%,
            rgba(255, 255, 255, .52) 80%,
            rgba(255, 255, 255, .14) 100%);
        background-size: cover;
        background-position: center;
        animation: none;
    }
    body.pf::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.pf::before, body.pf::after { animation: none; }
}

@media print {
    body.pf { background: #fff; }
    body.pf::before, body.pf::after { display: none; }
}


/* =========================================================
   BESH RANGLI SAVOL KARTALARI
   =========================================================
   Ilgari ikki tus navbatlashardi. Mijoz butun sayt bo'ylab
   kartalar rangli bo'lishini so'radi, shuning uchun bu yerda
   ham beshtalik aylana — sayt qolgan qismidagi bilan bir xil
   ritm (material kartalari, test savollari, krossvord izohlari).

   IKKI CHEKLOV SAQLANADI:
     - ichkaridagi rasm qutisi SOF OQ bo'lib qoladi (rasmlar
       oq fonga tekislangan, boshqa tus atrofida oq ramka
       chiqarib yuboradi);
     - variant/qator fonlari `rgba(255,255,255,...)` — ular
       kartaning rangidan ochroq bo'lib ko'rinadi.
   ========================================================= */
.rt-savol:nth-child(5n+1) { background: #E9F7EC; }
.rt-savol:nth-child(5n+2) { background: #E6F1FD; }
.rt-savol:nth-child(5n+3) { background: #FEF3E0; }
.rt-savol:nth-child(5n+4) { background: #FDEBF3; }
.rt-savol:nth-child(5n+5) { background: #EFE9FE; }