/* «O'rganish» rejimi — liquid glass + tog' manzarasi (2026-10-15, o'qituvchi so'rovi:
   «mini o'yinlarga ham arqon tortishdagi kabi liquid glass dizayn, orqa fonda tog'lar»).
   Vocabulary (/vocabulary/play) va Grammatika/Destination (/grammatika/play) sahifalari
   `body.learn` bo'lganda qo'llanadi; «O'ynash» (body.sinf) rejimiga tegmaydi.
   Rangli qatlam tablari (.layers) o'z ko'rinishida qoladi — faqat shisha fon. */

body.learn{background:#CFE3EE}
/* manzara: arqon tortishdagi 3D tog' sahnasi, biroz xira — matn o'qilsin */
body.learn .bgimg{background:url("/oyin/arqon/img/fon-tog.webp") center 78%/cover no-repeat;
  opacity:1;filter:saturate(1.05) blur(1.5px);transform:scale(1.03)}
body.learn .bgimg::after{background:
  linear-gradient(180deg,rgba(236,246,250,.62) 0,rgba(236,246,250,.22) 32%,rgba(248,244,236,.18) 70%,rgba(248,244,236,.5))}
body.learn .bgcred{display:none}

/* --- shisha asoslari --- */
body.learn .glass,
body.learn .stage{
  background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 40px rgba(16,48,42,.18)}
body.learn .glass{border-radius:24px}
body.learn .stage{border-radius:26px;border-top:0;
  box-shadow:inset 0 5px 0 var(--lc),inset 0 1px 0 rgba(255,255,255,.9),0 14px 40px rgba(16,48,42,.18)}
body.learn h1{text-shadow:none}
body.learn .modes{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.75)}
body.learn .tmr{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8)}
body.learn .tmr[aria-pressed="true"]{border-color:color-mix(in srgb,var(--orange) 55%,#fff)}
/* qatlam tablari — rangi o'zida, faqat shisha */
body.learn .layers button{background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(16,48,42,.10)}
body.learn .layers button:not(:disabled){border-top:4px solid var(--lc)}
body.learn .layers button.on{background:color-mix(in srgb,var(--lc) 16%,rgba(255,255,255,.7));
  box-shadow:0 0 0 2px var(--lc) inset,0 8px 22px color-mix(in srgb,var(--lc) 30%,transparent)}

/* --- sarlavha qatori va progress --- */
body.learn .meta{color:#33504A}
body.learn .bar{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 2px rgba(16,48,42,.08)}
body.learn .ring .bg{stroke:rgba(255,255,255,.7)}

/* --- savol kartasi --- */
body.learn .prompt{background:linear-gradient(160deg,rgba(255,255,255,.72),color-mix(in srgb,var(--lc) 10%,rgba(255,255,255,.45)));
  border:1px solid rgba(255,255,255,.8);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px rgba(16,48,42,.08)}
body.learn .prompt .hint{color:#3F5652}
body.learn .prompt img{box-shadow:0 6px 18px rgba(16,48,42,.16)}
body.learn .say{box-shadow:0 8px 22px color-mix(in srgb,var(--lc) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}

/* --- variantlar: rangli shisha (avvalgi 4 rang + belgi saqlanadi) --- */
body.learn .opts button{--oc:#E2603C;color:#10302A;
  background:linear-gradient(160deg,color-mix(in srgb,var(--oc) 20%,rgba(255,255,255,.72)),color-mix(in srgb,var(--oc) 12%,rgba(255,255,255,.42)));
  border:1px solid color-mix(in srgb,var(--oc) 38%,rgba(255,255,255,.8));border-radius:20px;
  -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 5px 0 0 var(--oc),inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(16,48,42,.10);
  transition:transform .08s,background .15s,box-shadow .15s,opacity .2s}
body.learn .opts button:nth-child(1){--oc:#E2603C}
body.learn .opts button:nth-child(2){--oc:#2F6FD6}
body.learn .opts button:nth-child(3){--oc:#D99A00;color:#10302A}
body.learn .opts button:nth-child(4){--oc:#1E9E6A}
body.learn .opts button .k{color:var(--oc);opacity:1}
body.learn .opts button:hover:not(:disabled){background:linear-gradient(160deg,color-mix(in srgb,var(--oc) 30%,rgba(255,255,255,.8)),color-mix(in srgb,var(--oc) 18%,rgba(255,255,255,.5)))}
body.learn .opts button:active{transform:translateY(1px) scale(.99);box-shadow:inset 5px 0 0 var(--oc),0 3px 8px rgba(16,48,42,.1)}
body.learn .opts.done button:not(.ok):not(.bad){opacity:.4}
body.learn .opts button.ok{outline:0;color:#0B5836;
  background:linear-gradient(160deg,rgba(214,240,226,.92),rgba(214,240,226,.7));border-color:var(--ok);
  box-shadow:inset 5px 0 0 var(--ok),0 0 0 3px color-mix(in srgb,var(--ok) 45%,transparent),0 8px 22px rgba(30,142,78,.22)}
body.learn .opts button.bad{opacity:1;color:#8A2C1E;
  background:linear-gradient(160deg,rgba(250,221,214,.92),rgba(250,221,214,.7));border-color:var(--bad);
  box-shadow:inset 5px 0 0 var(--bad),0 6px 16px rgba(200,67,43,.18)}

/* --- harf plitkalari, yozish, gap yig'ish --- */
body.learn .tiles button:not(.del),
body.learn .toks button,
body.learn .bslots button{background:linear-gradient(160deg,rgba(255,255,255,.78),color-mix(in srgb,var(--lc) 10%,rgba(255,255,255,.5)));
  border:1px solid color-mix(in srgb,var(--lc) 35%,rgba(255,255,255,.8));border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px rgba(16,48,42,.10)}
body.learn .tiles .del{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);border-radius:14px}
body.learn .slots span:not(.w):not(.fix){text-shadow:0 1px 0 rgba(255,255,255,.7)}
body.learn .typed input{background:rgba(255,255,255,.72);border:1px solid color-mix(in srgb,var(--lc) 45%,rgba(255,255,255,.8));
  box-shadow:inset 0 1px 3px rgba(16,48,42,.08)}
.typed input.ok,body.learn .typed input.ok{background:rgba(214,240,226,.92);border-color:var(--ok);color:var(--ok);opacity:1}
.typed input.bad,body.learn .typed input.bad{background:rgba(250,221,214,.9);border-color:var(--bad);color:var(--bad);opacity:1;animation:shake .35s}
body.learn .bslots{background:rgba(255,255,255,.35);border-color:color-mix(in srgb,var(--lc) 35%,rgba(255,255,255,.7))}
body.learn .toks button.bad,body.learn .bslots button.bad{background:rgba(250,221,214,.9);border-color:var(--bad);color:var(--bad)}
body.learn .toks button.fix,body.learn .toks button.ok,body.learn .bslots button.ok{background:rgba(214,240,226,.92);border-color:var(--ok);color:var(--ok)}
body.learn .none{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85)}
body.learn .none.ok{background:rgba(214,240,226,.92);border-color:var(--ok)}

/* --- javob izohi, keyingi --- */
body.learn .fb{text-shadow:0 1px 0 rgba(255,255,255,.6)}
body.learn .next{box-shadow:0 8px 22px rgba(226,96,60,.32),inset 0 1px 0 rgba(255,255,255,.35)}

/* --- natija --- */
body.learn .end ul{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:4px 6px}
body.learn .end li{border-bottom-color:rgba(16,48,42,.10)}
body.learn .end .btns button{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(16,48,42,.10)}
body.learn .end .btns button.main{background:var(--orange);border-color:var(--orange);color:#fff}

/* --- grammatika: qoida kartasi, lug'at jadvali, juftini top --- */
body.learn .rule .ex{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8)}
body.learn .traps a{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85)}
body.learn .vtabs button{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8)}
body.learn .vtabs button[aria-pressed="true"]{background:var(--lc);border-color:var(--lc)}
body.learn .vtab,body.learn .wl{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.8)}
body.learn .vtab tr:nth-child(even) td{background:rgba(255,255,255,.35)}
body.learn .vbar button,body.learn .wbar button{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85)}
body.learn .wbar button[aria-pressed="true"]{background:var(--lc);border-color:var(--lc);color:#fff}
@media (max-width:520px){
  body.learn .wbar{gap:6px}
  /* tugmalar qatorni to'ldiradi — avval uchalasi turli eni bilan chapga tishli tushardi (QC #3) */
  body.learn .wbar button{font-size:13px;padding:6px 10px;min-height:38px;flex:1 1 auto;white-space:nowrap}
  body.learn .wbar .cnt,body.learn .wbar .sp{display:none}
}
body.learn .mcol button{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px rgba(16,48,42,.10)}
body.learn .mcol button.sel{background:color-mix(in srgb,var(--lc) 18%,rgba(255,255,255,.75));border-color:var(--lc)}
body.learn .mcol button.ok{background:rgba(214,240,226,.9);border-color:var(--ok)}
/* topilgan juft faqat rang bilan emas — belgi bilan ham (rang ko'rmaydiganlar uchun) */
body.learn .mcol button.ok::after{content:" ✓";font-weight:900}
/* yashirin tarjima katagi — «ko'rsatish» ishorasi (avval keng ustunda faqat chiziqlar edi) */
body.learn .vtab td.tr.hid{position:relative}
body.learn .vtab td.tr.hid::after{content:"👁 ko‘rsatish";position:absolute;inset:0;display:flex;align-items:center;
  padding-left:14px;color:#3F5652;font-size:13px;font-weight:700}
body.learn .mcol button.bad{background:rgba(250,221,214,.92);border-color:var(--bad)}
body.learn .fb .why{background:linear-gradient(135deg,rgba(255,248,225,.92),rgba(255,240,194,.85))}

/* --- musiqa tugmasi (sarlavha qatorida) --- */
.mus{padding:7px 12px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.6);color:var(--gold);min-height:36px}
.mus[aria-pressed="false"]{color:var(--dim)}
body.sinf .mus{display:none}

@media (prefers-reduced-transparency: reduce){
  body.learn .stage,body.learn .glass{background:rgba(255,255,255,.94)}
}
@media (max-width:520px){
  body.learn .stage{border-radius:22px}
  body.learn .opts button{border-radius:16px}
}

/* Telefonda pastga surilganda ☰ yashirinadi — tablar ustiga tushmasin; tepaga surilsa qaytadi */
@media (max-width:1099.98px){
  body.learn .sz-burger.sz-float{transition:transform .22s,opacity .22s}
  body.learn.szhide:not(.sz-open) .sz-burger.sz-float{transform:translateY(-64px);opacity:0;pointer-events:none}
}