/* Arqon tortish (/oyin/arqon.js) — /oyin/ tashqarisidagi sahifalar uchun (2026-10-15):
   Vocabulary va Grammatika/Destination «Sinf (2 jamoa)». Bu sahifalarning o'z .bar /
   .side / .opt / .clock / .wrap / --soft qoidalari bor — shuning uchun hammasi .tug,
   section.over, .pausescr va #setup ichida, ranglar ham shu konteynerlarda qayta
   belgilanadi (sahifada --soft — fon rangi, /oyin/ da esa matn rangi). */
.tug,section.over,.pausescr,#setup.setup,.fsx,.pausebtn{
  --a:#0B6E9E;--b:#B0480C;--ok:#137A4B;--no:#B33B2B;
  --soft:rgba(16,48,42,.86);--strong:#0B211D;--velvet:#FFFFFF;--ivory:#10302A;
  --line:rgba(11,110,95,.3);--hair:rgba(11,110,95,.16);--dim:#6B7C78;
  --gold:#0B6E5F;--orange:#E2603C;--teal:#0E8A76;--ink:#FBF8F3}

/* sahna: sahifa oqimida emas — butun ekran (sahifa .wrap ichida balandlik yo'q) */
/* z-index: sahifa sarlavhasi (glass, «Orqaga» qatori) ustida; natija (#over) undan ham yuqori;
   yon panel (40), ☰ (70), ⏸/⛶ (40) — sahna ustida */
.tug.on{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--ivory);
  font-family:Manrope,"Segoe UI",system-ui,sans-serif;line-height:1.5}
body:has(.tug.on){overflow:hidden}
.ahost-play{display:none!important}

/* sahifaning .bar (progress chizig'i) qoidasi tug paneliga tegmasin */
.tug .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;height:auto;
  margin:0;border-radius:0;overflow:visible;padding:10px 18px;border-bottom:1px solid var(--hair);
  background:var(--velvet)}
.tug .team{display:flex;align-items:center;gap:12px;font-weight:700}
.tug .team.r{justify-content:flex-end}
.tug .team .nm{font-size:clamp(15px,1.5vw,22px);max-width:34vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tug .team .sc{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tug .team.a .sc,.tug .team.a .nm{color:var(--a)}
.tug .team.b .sc,.tug .team.b .nm{color:var(--b)}
.tug .mid{text-align:center}
.tug .clock{font-size:clamp(26px,3vw,42px);font-weight:800;line-height:1;min-width:0;color:var(--ivory);
  font-variant-numeric:tabular-nums;animation:none}
.tug .clock.low{color:var(--no);animation:ahBeat .9s ease-in-out infinite}
.tug .clock.last{animation-duration:.5s}
@keyframes ahBeat{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(1.22);opacity:.55}}
body.hurry .tug .bar{box-shadow:inset 0 3px 0 var(--no);animation:ahEdge .9s ease-in-out infinite}
@keyframes ahEdge{0%,100%{background:var(--velvet)}45%{background:#FDECE9}}
.tug .qn{font-size:12.5px;color:var(--dim);letter-spacing:.1em}
.tug .sc.bump{animation:ahBump .45s ease-out}
@keyframes ahBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.tug .bar{padding-right:330px}

/* variantlar — sahifaning .side (2×2 to'r, qalin ramka) va .opt (markazda, 800) o'rniga */
.tug .side{position:relative;display:grid;grid-template-columns:none;grid-template-rows:repeat(4,1fr);
  gap:10px;padding:12px;min-height:0;border-radius:0}
.tug .side.a,.tug .side.b{border:0;background:none}
.tug .opt{display:flex;align-items:center;justify-content:flex-start;gap:14px;border:2px solid var(--line);
  border-radius:14px;padding:10px 16px;text-align:left;outline:0;
  font-size:clamp(15px,1.6vw,28px);font-weight:600;color:var(--strong);min-height:0;
  transition:transform .08s,border-color .12s,background .12s}
.tug .opt .key{flex:0 0 auto;min-width:1.9em;text-align:center;border:1px solid currentColor;background:none;
  border-radius:8px;padding:3px 6px;font-size:.62em;font-weight:700;opacity:.75}
.tug .opt .tx{flex:1;overflow:hidden;line-height:1.3}
.tug .opt .izoh{font-size:max(.62em,12px)}
.tug .side.a .opt{background:#EAF4FA;border-color:rgba(11,110,158,.42)}
.tug .side.b .opt{background:#FDF0E6;border-color:rgba(176,72,12,.42)}
.tug .side.a .opt .key{color:var(--a);background:none}
.tug .side.b .opt .key{color:var(--b);background:none}
.tug .side.a .opt:active{transform:scale(.985);border-color:var(--a);background:#DCEDF7}
.tug .side.b .opt:active{transform:scale(.985);border-color:var(--b);background:#FBE4D3}
.tug .side.a .opt.right,.tug .side.b .opt.right{background:#DFF3E8;border-color:var(--ok);color:#0B5836!important}
.tug .side.a .opt.right .key,.tug .side.b .opt.right .key{color:var(--ok)}
.tug .side.a .opt.wrong,.tug .side.b .opt.wrong{background:#FADFD9;border-color:var(--no);color:#8A2C1E!important}
.tug .side.a .opt.wrong .key,.tug .side.b .opt.wrong .key{color:var(--no)}
.tug .side.locked{pointer-events:none}
.tug .side.locked .opt{opacity:.3;border-style:dashed}
.tug .side.locked .opt.right,.tug .side.locked .opt.wrong{opacity:1;border-style:solid}
.tq .tgask{font-size:clamp(11px,.85vw,16px);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}
.tq .tsent .gap{display:inline-block;min-width:3em;border-bottom:3px solid var(--orange);color:var(--orange)}
.tq figure{margin:0;display:flex;flex-direction:column;align-items:center;min-height:0;flex:1 1 0;max-width:100%}
.tq figure img{flex:1 1 0}
.tq figcaption{font-size:11px;color:var(--dim);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ⛶ va ⏸ — faqat arqon tortish paytida, o'ng yuqorida */
.fsx,.pausebtn{display:none;position:fixed;top:10px;z-index:40;cursor:pointer;
  border:1px solid var(--line);background:var(--velvet);color:var(--ivory);
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;font-family:Manrope,sans-serif;
  line-height:1;box-shadow:0 6px 18px rgba(16,48,42,.13);opacity:.85}
.fsx{right:14px}
.pausebtn{right:170px}
.fsx:hover,.pausebtn:hover{border-color:var(--orange);color:var(--orange);opacity:1}
body:has(.tug.on) .fsx,body:has(.tug.on) .pausebtn{display:block}
@media(max-width:820px){
  .fsx,.pausebtn{padding:7px 10px;font-size:12px}
  .pausebtn{right:120px}
  .tug .bar{padding-right:18px;padding-top:46px}
}
#confetti{position:fixed;inset:0;z-index:33;pointer-events:none}
body.tugover section.over{z-index:32}

/* tanaffus */
.pausescr{display:none;position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--ivory);
  text-align:center;padding:40px 20px;font-family:Manrope,sans-serif}
.pausescr.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.pausescr .big{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(44px,8vw,100px);line-height:1}
.pausescr .sub{color:var(--dim);font-size:clamp(15px,2vw,22px)}
.pausescr .num{font-size:clamp(26px,4vw,52px);font-weight:800}
.pausescr .num .a{color:var(--a)} .pausescr .num .b{color:var(--b)}
.pausescr .num:empty,.pausescr .sub:empty{display:none}
.pausescr .resume{margin-top:8px;border:0;border-radius:14px;background:var(--gold);
  color:#fff;font-size:20px;font-weight:800;padding:16px 34px;cursor:pointer}

/* natija (faqat arqon tortish) */
section.over{display:none;position:fixed;inset:0;background:rgba(250,246,239,.97);z-index:20;
  overflow-y:auto;padding:30px 20px;color:var(--ivory);font-family:Manrope,sans-serif}
section.over.on{display:block}
section.over .wrap{max-width:1000px;margin:0 auto;padding:0;text-align:center}
.over .win{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(34px,5.4vw,64px);font-weight:600}
.over .final{font-size:clamp(28px,4vw,52px);font-weight:800;margin:8px 0 4px}
.over .misses{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:24px;text-align:left}
@media(max-width:720px){.over .misses{grid-template-columns:1fr}}
.over .misses .box h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.over .misses .box.a h3{color:var(--a)} .over .misses .box.b h3{color:var(--b)}
.over .misses li{list-style:none;padding:7px 0;border-top:1px solid var(--hair);font-size:15px;
  line-height:1.5;color:var(--strong)}
.over .misses li:first-child{border-top:0}
.over .misses li .ans{color:var(--gold);font-weight:700}
.over .again{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.over .again button{padding:15px 26px;border-radius:12px;border:1px solid var(--line);
  background:var(--velvet);color:var(--ivory);font-size:17px;font-weight:700}
.over .again .primary{background:var(--orange);border-color:var(--orange);color:#fff}

/* Sozlamalar (/oyin/setup.css) sahifa ichida: o'z aylantirgichi yo'q — «Boshlash»
   brauzer oynasiga nisbatan yopishib tursin */
#setup.setup{flex:none;overflow:visible;padding:0;margin-top:6px;color:var(--ivory)}
#setup.setup .sx{max-width:860px;margin:0 auto}            /* markazda (2026-10-21) — keng ekranda chapga yopishmasin */
#setup .sx-card{background:rgba(255,255,255,.96)}
#setup .sx-foot{background:rgba(255,255,255,.97)}