/* Bosh sahifa — o'yinlar ro'yxati. Ranglar, shrift va qahramonlar: oyinlar/umumiy/css/asos.css
   2026-10-02: "Davom et" kartasi + umumiy progress, kompyuterda 2 ustun, ramkali kartalar, bo'lim rangi, musobaqalar pastda. */

#app { height: auto; min-height: 100vh; min-height: 100dvh; gap: 18px; padding: 8px 16px 28px; }
.bosh-top, .bosh-list, .bosh-foot { width: 100%; max-width: 960px; margin: 0 auto; }
.bosh-title { margin: 8px 0 0; font-size: var(--t3); font-weight: 900; line-height: 1.15; }
.bosh-sub { margin: 2px 0 12px; font-size: var(--t0); font-weight: 700; color: var(--matn-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bosh-top .bubble { min-height: 0; padding: 12px 16px; }
.bosh-actors { display: flex; align-items: flex-end; gap: 16px; }
.bosh-top .actor { height: 96px; }
.bosh-top.royxat .actor { height: 72px; }

.bosh-list { display: flex; flex-direction: column; gap: 22px; }
.bosh-section { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 2px dashed var(--chiziq); }
.bosh-section.first { border-top: 0; padding-top: 0; }
.bosh-h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--t2); font-weight: 900; line-height: 1.2; }
.bosh-h2::before { content: ""; flex: none; width: 10px; height: 28px; border-radius: 5px; background: var(--sec, var(--asosiy)); }
.bosh-h2-soni { margin-left: auto; font-size: var(--t-1); font-weight: 800; color: var(--matn-3); white-space: nowrap; }
.bosh-h2-soni.done { color: var(--togri-matn); }
.bosh-note { margin: 0 0 var(--s1); font-size: var(--t-1); font-weight: 600; color: var(--matn-2); }
.bosh-h3 { margin: 8px 0 0; font-size: var(--t-1); font-weight: 800; color: var(--matn-3); } /* musobaqalar: bitta ekranda / onlayn */

/* "Davom et" + umumiy progress */
.bosh-hero { display: flex; flex-direction: column; gap: var(--s3); }
.bosh-progress { display: flex; align-items: center; gap: var(--s3); }
.bosh-progress-bar { flex: 1; height: 14px; border-radius: var(--r-pill); background: #EAE2CF; box-shadow: inset 0 0 0 2px var(--chiziq); overflow: hidden; }
.bosh-progress-bar span { display: block; height: 100%; background: var(--togri); border-radius: var(--r-pill); transition: width 0.4s; }
.bosh-progress-txt { font-size: var(--t-1); font-weight: 800; color: var(--matn-2); white-space: nowrap; }
.bosh-card.davom { border-color: var(--asosiy); --qirra: var(--asosiy-qora); background: var(--asosiy-och); }
.bosh-card.davom .bosh-name::before { content: "▶ Davom et · "; color: var(--asosiy-matn); }

/* Kartalar */
.bosh-cards { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 720px) { .bosh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bosh-card {
  --qirra: var(--oq-qora);
  display: flex; align-items: center; gap: var(--s3); min-height: 80px; padding: 12px 14px;
  border: 2px solid var(--chiziq); border-radius: var(--r-l); background: var(--yuza);
  box-shadow: 0 4px 0 var(--qirra); color: inherit; text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.bosh-card:active { transform: translateY(4px); box-shadow: 0 0 0 var(--qirra); }
@media (hover: hover) and (pointer: fine) {
  .bosh-card:hover { filter: brightness(1.04); transform: translateY(-1px); }
  .bosh-card:active { filter: none; transform: translateY(4px); }
}
.bosh-card.done { border-color: var(--togri); }
.bosh-icon { flex: none; width: 56px; height: 56px; padding: 5px; border-radius: var(--r-m); background: var(--sec-och, var(--yuza-2)); display: grid; place-items: center; }
.bosh-icon svg { display: block; width: 100%; height: 100%; }
.bosh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bosh-name { font-size: var(--t1); font-weight: 900; line-height: 1.2; }
.bosh-num {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-right: 6px;
  border-radius: var(--r-pill); background: var(--sec, var(--asosiy)); color: #fff; font-size: var(--t-1); font-weight: 900; vertical-align: 2px;
}
.bosh-desc { font-size: var(--t-1); font-weight: 600; color: var(--matn-2); }
.bosh-state { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* progress — asos.css segmentlari, kichik */
.bosh-dots { display: flex; gap: 3px; }
.bosh-dots .dot { width: 18px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--chiziq); }
.bosh-dots .dot.on { box-shadow: inset 0 0 0 1.5px var(--togri-qora); animation: none; }
.bosh-stars { font-size: 15px; letter-spacing: 1px; line-height: 1; color: var(--sariq); white-space: nowrap; }
.bosh-stars .off { color: var(--chiziq); }
.bosh-ok {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--togri); color: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 2px 0 var(--togri-qora);
}
.bosh-age { padding: 2px 8px; border-radius: var(--r-pill); background: var(--yuza-2); border: 1.5px solid var(--chiziq); font-size: 13px; font-weight: 800; color: var(--matn-3); }
.bosh-pc { font-size: 18px; line-height: 1; } /* o'yinga klaviatura kerak */

/* Musobaqalar va mashqlar: ixcham qator (ro'yxat oxirida) */
.bosh-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; }
.bosh-row .bosh-card { scroll-snap-align: start; flex-direction: column; align-items: flex-start; min-height: 150px; }
.bosh-row .bosh-icon { width: 44px; height: 44px; }
.bosh-row .bosh-state { flex-direction: row; align-items: center; }

/* Yosh tanlash: kirishda bir marta so'raladi, keyin sarlavhadagi tugma bilan almashtiriladi */
.bosh-yosh { display: flex; flex-direction: column; gap: 12px; }
.bosh-yosh-btn {
  --qirra: var(--asosiy-qora);
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  min-height: 76px; padding: 14px 18px; border: 3px solid var(--asosiy); border-radius: var(--r-l);
  background: var(--yuza); box-shadow: 0 4px 0 var(--qirra); color: inherit; font: inherit; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.bosh-yosh-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--qirra); }
.bosh-yosh-btn.kichik { --qirra: var(--oq-qora); border: 2px dashed var(--chiziq-kuchli); min-height: 0; padding: 10px 16px; }
.bosh-yosh-nom { font-size: var(--t2); font-weight: 900; color: var(--asosiy-matn); }
.bosh-yosh-btn.kichik .bosh-yosh-nom { font-size: var(--t0); color: var(--matn-3); }
.bosh-yosh-izoh { font-size: var(--t0); font-weight: 600; color: var(--matn-2); }
.bosh-yosh-soni { font-size: var(--t-1); font-weight: 800; color: var(--matn-3); }
.bosh-almash {
  min-height: 40px; padding: 4px 14px; border: 2px solid var(--asosiy); border-radius: var(--r-pill);
  background: var(--yuza); font: inherit; font-size: var(--t0); font-weight: 800; color: var(--asosiy-matn); cursor: pointer;
}

.bosh-foot { font-size: var(--t-1); font-weight: 700; line-height: 1.6; color: var(--matn-2); text-align: center; }

/* Tor telefon: kartada faqat eng kerakli narsa qoladi */
@media (max-width: 420px) {
  .bosh-title { font-size: 26px; }
  .bosh-top .actor { height: 80px; }
  .bosh-top.royxat .actor { height: 64px; }
  .bosh-icon { width: 48px; height: 48px; }
  .bosh-name { font-size: 19px; }
  .bosh-age { display: none; }
}