@charset "UTF-8";
/* sinf-sorov.css — «🎯 So‘rov» (/oyin/sinf-sorov.js): chapda so'z, o'ngda o'quvchi.
   Panel 1536–1920 px; telefonda (<760px) ustma-ust. Ranglar aniq (sahifa o'zgaruvchilarisiz). */
.sq{max-width:min(1800px,100%)!important;margin:0 auto;display:flex;flex-direction:column;gap:clamp(10px,1.4vh,22px);
  min-height:calc(100vh - var(--sr-top,var(--dk-top,0px)) - clamp(120px,10vw,190px));font-family:Manrope,"Segoe UI",system-ui,sans-serif;
  color:#10302A;font-size:clamp(14px,1.05vw,22px)}
.sq button{font:700 1em/1 Manrope,"Segoe UI",system-ui,sans-serif;cursor:pointer;border-radius:14px;
  border:1px solid rgba(11,110,95,.24);background:#fff;color:#10302A;padding:.6em 1em;min-height:0;white-space:nowrap}
.sq button:hover:not(:disabled){border-color:#E2603C;color:#E2603C}
.sq button:disabled{opacity:.35;cursor:default}
.sq-top{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.sq-cls{display:flex;gap:.35em;flex-wrap:wrap}
.sq-cls button{font-size:.9em;padding:.5em .85em}
.sq-cls button.on,.sq-cls button.on:hover{background:#E2603C;border-color:#E2603C;color:#fff!important}
.sq-sp{flex:1}
.sq-dir[hidden]{display:none}
/* Mashqlar / grammatika qadamida Sinov: qadam mazmuni yashirinadi (DOM'da qoladi) */
.dk-stage.dk-quizon>:not(.sq){display:none!important}
/* items rejimi — grammatika savoli (2026-10-16) */
.sq-item{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,22px);width:100%;max-width:34em}
.sq-lab{font-size:.95em;font-weight:800;color:#6B7C78;text-transform:uppercase;letter-spacing:.06em}
.sq-s{font-size:calc(clamp(24px,2.5vw,56px)*var(--sq-k,1));font-weight:700;line-height:1.35;color:#10302A}
.sq-gap{display:inline-block;min-width:3.2em;border-bottom:3px solid #0B6E5F;line-height:1.1}
.sq-gap.ok{min-width:0;color:#1f8a4c;border-color:#1f8a4c;padding:0 .1em}
.sq-v{color:#6B7C78;font-weight:600;font-style:italic}
.sq-hl{background:#FFE7A8;color:inherit;border-radius:6px;padding:0 .12em}
.sq-hl.ok{background:#CDEFD9}
.sq-was{color:#C8432B;text-decoration-thickness:3px}
.sq-fix{color:#1f8a4c}
.sq-seg{display:inline-block;border:2px dashed rgba(11,110,95,.28);border-radius:10px;padding:.05em .3em;margin:.12em 0}
.sq-seg sup{font-size:.5em;font-weight:800;color:#0B6E5F;margin-right:.25em}
.sq-seg.bad{border-color:#C8432B;border-style:solid}
.sq-opts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;font-size:calc(clamp(18px,1.7vw,38px)*var(--sq-k,1));font-weight:700}
.sq-opts li{border:2px solid rgba(11,110,95,.22);border-radius:14px;padding:.35em .8em;background:#F7FBF9;display:flex;align-items:center;gap:.45em}
.sq-opts li span{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#0B6E5F;color:#fff;font-size:.7em}
.sq-opts li.ok{border-color:#1f8a4c;background:#E3F6EA;color:#1f6a3c}
.sq-opts li.ok span{background:#1f8a4c}
.sq-opts li.dim{opacity:.4}
.sq-ans{font-size:calc(clamp(20px,2vw,44px)*var(--sq-k,1));font-weight:800;color:#1f8a4c}
.sq-why{font-size:calc(clamp(16px,1.4vw,30px)*var(--sq-k,1));color:#3F5652;max-width:34em;line-height:1.45;margin:0}
.sq-why em{font-style:normal;font-weight:800;color:#0B6E5F}
.sq-dir{display:flex;border:1px solid rgba(11,110,95,.24);border-radius:999px;padding:3px;background:#F3F8F5}
.sq-dir button{border:0;border-radius:999px;background:none;font-size:.85em;padding:.5em .9em;color:#6B7C78}
.sq-dir button[aria-pressed="true"]{background:#0B6E5F;color:#fff}
.sq-dir button[aria-pressed="true"]:hover{color:#fff}
.sq-reset,.sq-end{font-size:.85em!important}
.sq-end{background:#10302A!important;border-color:#10302A!important;color:#fff!important}

.sq-split{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(12px,1.6vw,32px)}
.sq-word,.sq-who{border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(14px,2vw,40px);gap:clamp(6px,1.2vh,18px);min-height:clamp(220px,46vh,760px)}
.sq-word{background:#fff;border:1px solid rgba(11,110,95,.14);box-shadow:0 10px 30px rgba(11,60,50,.10);position:relative}
.sq-n{position:absolute;top:.8em;left:1em;color:#6B7C78;font-weight:700;font-size:.85em;font-variant-numeric:tabular-nums}
.sq-pic{line-height:0;max-width:100%}
.sq-pic img{max-width:100%;max-height:calc(28vh*var(--sq-k,1));border-radius:16px;object-fit:contain;box-shadow:0 8px 24px rgba(11,60,50,.15);background:#fff}
.sq-pic figcaption{font-size:11px;color:#6B7C78;font-weight:600;line-height:1.3;margin-top:4px;max-width:min(420px,100%);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-pic .pic{display:inline-flex;flex-direction:column;align-items:center;margin:0;max-width:100%}
.sq-pic .dk-wem{font-size:calc(clamp(60px,8vw,170px)*var(--sq-k,1));line-height:1}
.sq-en{display:flex;align-items:center;justify-content:center;gap:.3em;flex-wrap:wrap;font-size:calc(clamp(34px,4.5vw,104px)*var(--sq-k,1));line-height:1.05}
.sq-en b{font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
/* 🔊 — oddiy sinf kartasidagi (.sr-say) bilan bir xil: katta, to'ldirilgan zumrad (2026-10-16, o'qituvchi) */
.sq .sq-en .say,.sq .sq-en .sq-say{flex:0 0 auto;width:clamp(44px,4.4vw,92px)!important;height:clamp(44px,4.4vw,92px)!important;
  margin:0;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(20px,2vw,40px);
  border:2px solid #0B6E5F;background:#0B6E5F;color:#fff;box-shadow:0 6px 18px rgba(11,60,50,.18);opacity:1;vertical-align:middle}
.sq .sq-en .say:hover:not(:disabled),.sq .sq-en .sq-say:hover:not(:disabled){background:#0E8A76;border-color:#0E8A76;color:#fff}
.sq .sq-en .say.playing{background:#E2603C;border-color:#E2603C;color:#fff}
.sq .sq-en .say svg{width:52%;height:52%}
.sq-uz{font-size:calc(clamp(24px,2.7vw,60px)*var(--sq-k,1));color:#0B6E5F;font-weight:800;line-height:1.15}
.sq-hid{font-size:clamp(26px,3vw,64px);color:rgba(11,110,95,.35);font-weight:800;letter-spacing:.2em}
.sq-ex{font-size:calc(clamp(16px,1.5vw,32px)*var(--sq-k,1));color:#3F5652;max-width:32em;line-height:1.45}
.sq-word.open .sq-uz{animation:sqIn .35s ease-out}
@keyframes sqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sq-who{background:linear-gradient(160deg,#0B6E5F 0%,#0A5347 58%,#093F37 100%);color:#fff;
  box-shadow:0 10px 30px rgba(11,60,50,.22)}
.sq-first{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(52px,7vw,170px);
  line-height:1.02;min-height:1em;max-width:100%;overflow:hidden}
.sq-last{font-size:clamp(20px,2.2vw,48px);font-weight:600;opacity:.82;letter-spacing:.02em;min-height:1.1em}
.sq-meta{font-size:.85em;opacity:.7;margin-top:.4em}
.sq-noname .sq-meta{font-size:clamp(18px,1.6vw,34px);opacity:.92}
.sq-who{position:relative}
.sq-pts{font-size:clamp(18px,1.7vw,36px);font-weight:800;color:#FFD9A8;min-height:1.2em;font-variant-numeric:tabular-nums}
.sq-flash{position:absolute;top:12%;right:8%;font-size:clamp(40px,5vw,110px);font-weight:900;line-height:1;opacity:0;pointer-events:none;
  text-shadow:0 4px 18px rgba(0,0,0,.25)}
.sq-flash.ok{color:#8BF0B0}.sq-flash.no{color:#FFB4A6}
.sq-flash.on{animation:sqFlash 1.1s ease-out forwards}
@keyframes sqFlash{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
.sq-who.spin .sq-first,.sq-who.spin .sq-last{opacity:.5;filter:blur(1px)}
.sq-who.won .sq-first{animation:sqWin .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes sqWin{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

.sq-acts{display:flex;justify-content:center;align-items:center;gap:clamp(8px,1vw,18px);flex-wrap:wrap;font-size:clamp(17px,1.5vw,32px)}
.sq-acts button{padding:.65em 1.1em;border-radius:16px}
.sq-show{background:#0B6E5F!important;border-color:#0B6E5F!important;color:#fff!important}
.sq-ok,.sq-no{min-width:3.2em;font-size:1.15em!important}
.sq-ok{color:#1f8a4c!important;border-color:#1f8a4c!important}
.sq-no{color:#C8432B!important;border-color:#C8432B!important}
.sq-ok[aria-pressed="true"]{background:#1f8a4c!important;color:#fff!important}
.sq-no[aria-pressed="true"]{background:#C8432B!important;color:#fff!important}
.sq-next{background:#E2603C!important;border-color:#E2603C!important;color:#fff!important;padding:.65em 1.6em!important;
  box-shadow:0 6px 18px rgba(226,96,60,.3)}

/* natija ro'yxati */
.sq-res{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:rgba(9,40,35,.6);padding:16px}
.sq-rbox{background:#fff;color:#10302A;border-radius:22px;padding:clamp(16px,2vw,34px);width:min(640px,100%);
  max-height:80vh;overflow:auto;font-size:clamp(15px,1.15vw,24px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sq-rbox h3{font-size:1.2em;margin:0 0 .6em}
.sq-rbox ol{margin:0;padding-left:1.4em}
.sq-rbox li{display:flex;align-items:baseline;gap:.8em;padding:.35em 0;border-bottom:1px solid rgba(11,110,95,.12)}
.sq-rbox li span{flex:1;font-weight:700}
.sq-rbox li small{font-weight:500;color:#6B7C78}
.sq-rbox .ok{color:#1f8a4c}.sq-rbox .no{color:#C8432B}
.sq-rbox li .pt{color:#0B6E5F;font-variant-numeric:tabular-nums}
.sq-rbox li em{font-style:normal;font-size:.85em;color:#6B7C78;white-space:nowrap}
.sq-avg{margin:.8em 0 0;color:#3F5652}
.sq-avg b{color:#0B6E5F}
.sq-rnone{color:#6B7C78}
.sq-rx{display:block;margin:1em auto 0;border:0;border-radius:999px;background:#E2603C;color:#fff;
  font:800 1em/1 Manrope,"Segoe UI",system-ui,sans-serif;padding:.75em 2em;cursor:pointer}

/* klaviatura / pult fokusi — panelda ko'rinsin (QC 2) */
.sq button:focus-visible,.sq-rx:focus-visible{outline:3px solid #E2603C;outline-offset:3px}

@media (max-width:760px){
  .sq-split{grid-template-columns:minmax(0,1fr)}
  .sq-word,.sq-who{min-height:0;padding:16px}
  .sq-who{padding:14px}
  .sq-first{font-size:clamp(40px,12vw,64px)}
  .sq-acts{position:sticky;bottom:0;background:rgba(251,248,243,.94);padding:8px 0;font-size:16px}
  .sq-acts button{padding:.6em .8em}
  .sq-top{font-size:13px}
  /* mobil QC (2026-10-17): o'quvchi paneli bo'sh balandlikka cho'zilmasin; tepadagi
     tugmalar ikki toza qatorga (sinflar | yo'nalish / qaytadan | tugatish) */
  .sq{min-height:0}
  .sq-split{flex:0 0 auto}
  .sq-who{min-height:150px}
  .sq-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .sq-top .sq-sp{display:none}
  .sq-cls{grid-column:1;grid-row:1}
  .sq-dir{grid-column:2;grid-row:1;justify-self:end}
  .sq-reset{grid-column:1;grid-row:2;justify-self:start}
  .sq-end{grid-column:2;grid-row:2;justify-self:end}
}
@media (prefers-reduced-motion:reduce){ .sq-word.open .sq-uz,.sq-who.won .sq-first{animation:none}
  .sq-flash.on{animation:none;opacity:1} }

/* «🧑 O'zim» va «sinfni tanlang» (2026-10-17) */
.sq-cls .sq-selfb{border-style:dashed}
.sq-need .sq-cls button{animation:sqNeed 1.4s ease-in-out infinite}
.sq-need .sq-cls button:nth-child(2n){animation-delay:.15s}
@keyframes sqNeed{0%,100%{box-shadow:0 0 0 0 rgba(226,96,60,0)}50%{box-shadow:0 0 0 4px rgba(226,96,60,.45)}}
@media (prefers-reduced-motion:reduce){.sq-need .sq-cls button{animation:none}}
/* O'zim / o'quvchi / mehmon: familiya yo'q — bo'sh qator ism va ball orasida tirqish qoldirmasin (QC 2026-10-17) */
.sq-self .sq-last:empty{display:none}
/* ismsiz holat («sinfni tanlang», «Yuklanmoqda…»): bo'sh ism/ball qatorlari yozuvni pastga — telefonda yopishgan tugmalar ostiga — surmasin */
.sq-noname .sq-first,.sq-noname .sq-last,.sq-noname .sq-pts{display:none}
/* o'quvchi/mehmon telefonda: sinf tugmalari yo'q — yo'nalish va «tugatish» bitta qatorda */
@media (max-width:760px){
  .sq-solo .sq-dir{grid-column:1;justify-self:start}
  .sq-solo .sq-end{grid-row:1}
  /* «1 / 44» hisobi qisqa so'zda 🔊 ustiga tushardi */
  .sq-word{padding-top:34px}
}

/* ===== Tugmalar yon ustunda (2026-10-19) — dars.css dagi So'zlar ustuni bilan bir xil:
   o'ng chetda tik, ixcham ikonkalar: katta strelka, kalit (javob), tanga (+10), ✗, ←.
   «⇄» — chapga (html.dk-navl). Telefonda o'zgarishsiz (matnli tugmalar). ===== */
.sq-ic{display:none;font-style:normal}
.sq-ic svg{display:block;width:1.15em;height:1.15em;margin:0 auto}
@media (min-width:761px){
  .sq{--sq-navw:clamp(84px,5.4vw,118px);--sq-navx:clamp(10px,1.1vw,22px)}
  .sq-acts{position:fixed;z-index:30;right:var(--sq-navx);width:var(--sq-navw);
    top:calc(50% + var(--sr-top,var(--dk-top,0px)) / 2);transform:translateY(-50%);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:clamp(8px,1.2vh,14px);font-size:clamp(18px,1.5vw,30px)}
  html.dk-navl .sq-acts{right:auto;left:var(--sq-navx)}
  .sq-acts .sq-tx{display:none}
  .sq-acts .sq-ic{display:block}
  .sq-acts button{width:100%;min-width:0!important;padding:.5em 0!important;font-size:1em!important}
  .sq-next{order:1;padding:.75em 0!important}
  .sq-next .sq-ic svg{width:1.6em;height:1.6em}
  .sq-show{order:2}
  .sq-ok{order:3}
  .sq-ok .sq-ic svg{width:1.55em;height:1.55em}
  .sq-no{order:4}
  .sq-prev{order:5}
  .sq-side{order:9;font-size:.7em!important;opacity:.75}
  .sq-ok.sq-coin .sq-ic svg{animation:sqCoin .75s cubic-bezier(.3,1.3,.5,1)}
  /* sinf rejimidan tashqari sahifalarda (sinf-rejimi.js) ham ustun joyi bo'shatiladi */
  .sq{padding-right:calc(var(--sq-navw) + var(--sq-navx))}
  html.dk-navl .sq{padding-right:0;padding-left:calc(var(--sq-navw) + var(--sq-navx))}
  .dk-stage > .sq{padding-right:0;padding-left:0}
}
@keyframes sqCoin{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-14px) rotateY(360deg) scale(1.15)}
  100%{transform:translateY(0) rotateY(720deg)}}
@media (prefers-reduced-motion:reduce){.sq-ok.sq-coin .sq-ic svg{animation:none}}
@media (max-width:760px){
  .sq-side{display:none!important}
  /* TELEFON (2026-10-19): ikonkalar + pastga qotirilgan bitta qator: ← 🔑 🪙 ✗ → */
  .sq-acts .sq-tx{display:none}
  .sq-acts .sq-ic{display:block}
  .sq-acts{position:fixed!important;z-index:30;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:20px;display:grid!important;
    grid-template-columns:1fr 1fr 1fr 1fr 1.5fr;gap:6px;align-items:center;
    padding:8px!important;font-size:19px!important;
    background:rgba(248,246,241,.97)!important;border:1px solid rgba(11,110,95,.16);box-shadow:0 10px 30px rgba(11,48,42,.16)}
  .sq-acts button{width:100%;min-width:0!important;padding:.55em 0!important;font-size:1em!important;border-radius:12px}
  .sq-prev{order:1}.sq-show{order:2}.sq-ok{order:3}.sq-no{order:4}.sq-next{order:5}
  .sq-ok .sq-ic svg{width:1.45em;height:1.45em}
  .sq-next .sq-ic svg{width:1.35em;height:1.35em}
  .sq-ok.sq-coin .sq-ic svg{animation:sqCoin .75s cubic-bezier(.3,1.3,.5,1)}
  .sq{padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))}
}

/* «🎲 Boshqasi» — o'quvchi kartasida (2026-10-19) */
.sq-alt{margin-top:clamp(12px,2.2vh,28px);background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.5)!important;
  color:#fff!important;border-radius:999px!important;font-size:clamp(14px,1.05vw,20px)!important;padding:.55em 1.2em!important}
.sq-alt:hover{background:rgba(255,255,255,.24)!important}
.sq-who.sq-self .sq-alt,.sq-who.sq-noname .sq-alt,.sq-who.spin .sq-alt{visibility:hidden}

/* 🏆 Liga (2026-10-20) */
.sq-bugun{display:block}
.sq-jami{display:block;font-size:.68em;font-weight:700;color:#CDEBE4;margin-top:.15em;letter-spacing:.01em}
.sq-res li small.jm{margin-left:.6em;font-size:.8em;color:#5d7a73;font-weight:700;white-space:nowrap}