/* Sinf o'yinlari — sozlamalar ekrani (2026-10-15).
   O'qituvchi: «sozlama oynasi chalkash turibdi — ixchamlashtirish va professional
   holatga keltirish kerak». To'rt o'yin bir xil ko'rinishda: So'z poygasi,
   Rasmli poyga, Kelajak bashorati, Vaqt detektivi. Qatorlar (Savollar, G'alaba
   sharti) va xulosa qatori /oyin/arqon.js dan keladi.

   Maqsad: 1536×864 va 1920×1080 da aylantirmasdan bitta ekran, «Boshlash» doim
   ko'rinadi; telefonda tugma pastda yopishib turadi. Tugmalar ≥44px (75" panel). */

.setup{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
       padding:clamp(12px,2.4vh,28px) 16px clamp(14px,2.4vh,28px)}
.setup [hidden]{display:none!important}
.sx{position:relative;width:100%;max-width:740px;margin:auto}

/* ---------------------------------------------------------------- sarlavha */
.sx-head{position:relative;z-index:5;display:flex;align-items:center;gap:14px;margin:0 0 8px;
         padding:4px 4px}
.sx-ttl{flex:1;min-width:0}
.sx-head h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;margin:0;
            font-size:clamp(24px,2.2vw,36px);line-height:1.02;color:var(--strong);text-align:left}
.sx-sub{margin-top:2px;font-size:clamp(12.5px,.9vw,14.5px);color:var(--soft);line-height:1.35}
.sx-info{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:38px;
         padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--velvet);
         color:var(--gold);font-size:15px;font-weight:700;white-space:nowrap}
.sx-info .i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
            border:1.5px solid currentColor;font:700 12px/1 Georgia,serif;font-style:italic}
.sx-info:hover{border-color:var(--gold)}
.sx-info[aria-expanded=true]{background:var(--gold);border-color:var(--gold);color:#fff}

/* «Qoidalar» — sarlavha ostida ochiladigan panel (sahifani surmaydi) */
.sx-rules{position:absolute;z-index:8;left:0;right:0;top:calc(100% + 6px);
          max-height:min(64vh,560px);overflow-y:auto;background:var(--velvet);
          border:1px solid var(--line);border-radius:16px;padding:16px 20px 18px;
          box-shadow:0 18px 44px rgba(11,60,50,.22);font-size:14.5px;line-height:1.55;
          color:var(--soft);-webkit-user-select:text;user-select:text}
.sx-rules h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
             margin:14px 0 6px}
.sx-rules h3:first-child{margin-top:0}
.sx-rules ul{margin:0;padding-left:18px}
.sx-rules li{margin:3px 0}
.sx-rules b{color:var(--strong)}
.sx-rules kbd{display:inline-block;min-width:1.7em;text-align:center;padding:1px 6px;
              border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
              background:var(--ink);font:700 12.5px/1.5 Manrope,system-ui,sans-serif;color:var(--strong)}
.sx-rules .x{position:sticky;top:0;float:right;margin:-6px -8px 0 8px;width:44px;height:44px;
             border:0;border-radius:50%;background:none;color:var(--dim);font-size:22px;line-height:1}
.sx-rules .x:hover{color:var(--orange)}

/* -------------------------------------------------------------- karta */
.sx-card{background:var(--velvet);border:1px solid var(--line);border-radius:20px;
         box-shadow:0 10px 30px rgba(11,60,50,.10);padding:2px 22px 14px}
.sx-row{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;
        column-gap:18px;row-gap:6px;padding:7px 0;border-top:1px solid var(--hair)}
.sx-card>.sx-row:first-child{border-top:0}
.sx-lab{display:block;margin:0;font-size:11.5px;font-weight:800;letter-spacing:.1em;
        text-transform:uppercase;color:var(--teal);line-height:1.3}
.sx-ctl{min-width:0}

/* Segmentli tanlov (eski «pill» o'rniga). Id'lar va data-* lar o'zgarmagan. */
.seg{display:inline-flex;max-width:100%;gap:3px;padding:3px;border-radius:13px;
     background:rgba(16,48,42,.06);border:1px solid var(--hair);vertical-align:middle}
.seg button{flex:0 1 auto;min-height:38px;min-width:46px;padding:0 14px;border:0;border-radius:10px;
            background:transparent;color:var(--strong);font-size:14.5px;font-weight:600;
            line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums;
            transition:background .12s,color .12s,box-shadow .12s}
.seg button:hover{background:rgba(255,255,255,.75)}
.seg button[aria-pressed=true]{background:var(--gold);color:#fff;font-weight:700;
            box-shadow:0 2px 8px rgba(11,110,95,.28)}
.seg button small{font-weight:500;opacity:.8;font-size:.86em}

/* ikki kichik guruh bitta qatorda: qadam + vaqt yoki savol soni + har savolga vaqt */
.sx-pair{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.sx-pair .seg button{padding:0 11px;min-width:42px}
.sx-grp{display:flex;align-items:center;gap:8px;min-width:0}
.sx-cap{font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap}

/* «Savollar» qatori: segment + «🔊 Musiqa» tugmasi */
.sx-split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.sx-tog{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:999px;
        border:1px solid var(--line);background:#fff;color:var(--gold);font-size:13.5px;font-weight:700}
.sx-tog .ic{font-size:16px;line-height:1}
.sx-tog[aria-pressed=false]{color:var(--dim);background:rgba(16,48,42,.04)}
.sx-tog:hover{border-color:var(--gold)}

/* jamoa nomlari — ko'k / to'q sariq */
.sx-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-names:has(#bWrap[hidden]){grid-template-columns:1fr}
.sx-name{display:flex;align-items:center;min-width:0;min-height:42px;border:1px solid var(--line);
         border-radius:12px;background:#fff;overflow:hidden;cursor:text;
         transition:border-color .12s,box-shadow .12s}
.sx-name .tag{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;gap:6px;
              padding:0 10px 0 12px;font-size:12px;font-weight:800;letter-spacing:.08em;
              text-transform:uppercase}
.sx-name .tag::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.sx-name.a .tag{color:var(--a);background:rgba(11,110,158,.08)}
.sx-name.b .tag{color:var(--b);background:rgba(176,72,12,.08)}
.sx-names:has(#bWrap[hidden]) .sx-name.a .tag{display:none}
.sx-name input{flex:1;min-width:0;width:100%;height:40px;border:0;background:transparent;
               padding:0 12px;font:inherit;font-size:15px;font-weight:600;color:var(--strong);
               outline:none;-webkit-user-select:text;user-select:text}
.sx-name input::placeholder{color:#9AA8A4;font-weight:500}
.sx-name.a:focus-within{border-color:var(--a);box-shadow:0 0 0 3px rgba(11,110,158,.2)}
.sx-name.b:focus-within{border-color:var(--b);box-shadow:0 0 0 3px rgba(176,72,12,.2)}

/* material tanlovi */
.sx select{width:100%;min-height:42px;padding:0 40px 0 12px;border-radius:12px;
           border:1px solid var(--line);font:inherit;font-size:15px;font-weight:600;
           color:var(--strong);text-overflow:ellipsis;-webkit-appearance:none;appearance:none;
           background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B6E5F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.sx select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(11,110,95,.2)}

/* ------------------------------------------------- xulosa + Boshlash */
.sx-foot{display:grid;gap:8px;margin-top:2px;padding-top:10px;border-top:1px solid var(--hair)}
.sx-sum{text-align:center;font-size:14px;font-weight:600;color:var(--dim);line-height:1.4;
        min-height:1.4em}
.sx-sum span{white-space:nowrap}
.sx-sum b{color:var(--strong);font-weight:800}
.sx-sum i{font-style:normal;color:var(--line);margin:0 .15em}
.sx .go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
        min-height:50px;margin:0;padding:0 22px;border:0;border-radius:13px;background:var(--orange);
        color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em;
        box-shadow:0 8px 20px rgba(226,96,60,.32);transition:transform .08s,filter .12s}
.sx .go:hover{filter:brightness(1.05)}
.sx .go:active{transform:translateY(1px) scale(.995)}
.sx .go:disabled{opacity:.55;cursor:default;box-shadow:none}

/* klaviatura fokusi — aniq ko'rinsin */
.sx button:focus-visible,.sx select:focus-visible{outline:3px solid rgba(226,96,60,.6);outline-offset:2px}
.sx .seg button[aria-pressed=true]:focus-visible{outline-color:rgba(226,96,60,.8)}

/* --------------------------------------- So'z poygasi: manzara foni */
.setup.fon{background:linear-gradient(180deg,rgba(251,248,243,.5),rgba(251,248,243,.15) 45%,
    rgba(251,248,243,.35)),var(--fon) center/cover no-repeat}
.setup.fon .sx-head{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);border-radius:18px;padding:10px 12px 10px 20px;
    box-shadow:0 6px 22px rgba(11,60,50,.14)}
.setup.fon .sx-card{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(11,60,50,.2)}

/* ---------------------------------------------- katta ekran (panel) */
@media (min-width:1700px) and (min-height:960px){
  .sx{max-width:740px}
  .sx-card{padding:4px 26px 18px}
  .sx-row{grid-template-columns:140px minmax(0,1fr);padding:9px 0}
  .sx-pair .seg button{padding:0 16px;min-width:54px}
  .sx-lab{font-size:13.5px}
  .seg button{min-height:44px;font-size:15.5px;padding:0 18px}
  .sx-name,.sx select{min-height:46px}
  .sx-name input{height:44px;font-size:16px}
  .sx select{font-size:16px}
  .sx-sum{font-size:15px}
  .sx .go{min-height:56px;font-size:21px}
}

/* --------------------------------------------------------- telefon */
@media (max-width:640px){
  .setup{padding:10px 12px 0}
  .sx{margin:0 auto}
  .sx-head{margin-bottom:10px}
  .sx-info .t{display:none}
  .sx-info{padding:0 12px}
  .sx-card{padding:2px 16px 0;border-radius:18px}
  .sx-row{grid-template-columns:1fr;padding:10px 0;row-gap:7px}
  .sx-names{grid-template-columns:1fr}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 0;min-width:0;padding:0 6px;font-size:15px;white-space:normal}
  .sx-pair{flex-direction:column;align-items:stretch;gap:8px}
  .sx-grp{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
  .sx-cap{white-space:normal;font-size:13px}
  /* «Boshlash» pastda yopishib turadi — telefonda ham doim ko'rinadi */
  .sx-foot{position:sticky;bottom:0;z-index:3;margin:4px -16px 0;padding:12px 16px 14px;
           background:inherit;background:var(--velvet);border-radius:0 0 18px 18px;
           box-shadow:0 -8px 18px rgba(11,60,50,.08)}
  .sx-sum{font-size:14px}
  .sx .go{min-height:56px;font-size:20px}
  /* So'z poygasi: foto muallifi yozuvi tugma ustiga tushmasin */
  .setup.fon .sx-foot{padding-bottom:32px}
}

/* «🎵 O'z musiqam» — shu kompyuterdagi fayl (saytga yuklanmaydi) */
.sx-musg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sx-own .nm{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-own[aria-pressed=false]{color:var(--gold);background:#fff}
.sx-own[aria-pressed=true]{background:rgba(11,110,95,.1);border-color:var(--gold)}
.sx-x{padding:0 12px;font-size:18px;color:var(--dim)}
.sx-x[hidden]{display:none}

/* 2026-10-15 (o'qituvchi: «Boshlash scroll qilmasa ko'rinmaydi»): brauzer paneli
   bilan haqiqiy oyna 864 dan past — tugma HAR DOIM pastda yopishib turadi,
   past ekranda qatorlar ixchamroq. */
.sx-foot{position:sticky;bottom:0;z-index:3;margin:4px -24px 0;padding:12px 24px 14px;
         background:var(--velvet);border-radius:0 0 18px 18px;box-shadow:0 -8px 18px rgba(11,60,50,.07)}
.setup.fon .sx-foot{background:rgba(255,255,255,.97)}
.sx-card{padding-bottom:0!important}
@media (min-width:1100px){.sx-foot{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}}
@media (max-width:720px){.sx-foot{margin:4px -16px 0;padding:12px 16px 14px}.setup.fon .sx-foot{padding-bottom:32px}}
@media (max-height:820px) and (min-width:721px){
  .sx-head{margin-bottom:8px}
  .sx-head h1{font-size:clamp(26px,2.2vw,36px)}
  .sx-row{padding-top:8px;padding-bottom:8px}
  .sx .go{min-height:54px;font-size:20px}
  .sx-foot{padding-top:10px;padding-bottom:10px}
}
/* telefon yotiq (2026-10-17, mobil QC): yopishgan pastki blok 390px ekranning uchdan birini
   yerdi — ixchamroq; foto muallifi yozuvi «Boshlash» ustiga tushmasin */
@media (max-height:520px) and (orientation:landscape){
  .sx-head{margin-bottom:6px}
  .sx-row{padding-top:6px;padding-bottom:6px}
  .sx-foot{gap:4px;padding-top:6px;padding-bottom:8px}
  .setup.fon .sx-foot{padding-bottom:24px}
  .sx-sum{font-size:12.5px;line-height:1.3}
  .sx .go{min-height:44px;font-size:18px}
}

/* Natija oynasi: «Yana o'ynash / Sozlamalar» tepada — xatolar ro'yxatidan OLDIN */
.over .wrap{display:flex;flex-direction:column}
.over .wrap > .win{order:1}
.over .wrap > .final{order:2}
.over .wrap > .again{order:3;margin-top:14px}
.over .wrap > .misses{order:4}