/* Ohayo Kotoba — Tanga/Olmos UI (balans chipi + mukofot toast) */

.eco-chip{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  text-decoration:none; margin-left:auto;
}
.eco-chip > span{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:12.5px;
  padding:4px 9px; border-radius:999px; line-height:1;
}
.eco-chip .eco-coin{ color:#B7791F; background:#FEF3C7; }
.eco-chip .eco-gem{ color:#0E7490; background:#CFF6FE; }
.eco-chip:active{ transform:scale(.94); }
.eco-chip b{ font-weight:800; }

/* Mukofot toast — ekran markazi ustida */
.eco-toast{
  position:fixed; left:50%; top:22%; transform:translate(-50%,-14px) scale(.9);
  z-index:9999; pointer-events:none; opacity:0;
  background:rgba(20,20,30,.92); color:#fff; border-radius:16px;
  padding:12px 20px; text-align:center; backdrop-filter:blur(4px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,1.3,.4,1);
}
.eco-toast.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.eco-toast-title{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:14px; margin-bottom:5px;
}
.eco-toast-row{ display:flex; gap:16px; justify-content:center; }
.eco-toast-row span{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px;
  animation:ecoPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes ecoPop{ from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }

/* Avatar chip (bosh sahifa topbar) */
.eco-avatar-chip{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--red-light); display:flex; align-items:center; justify-content:center;
  font-size:22px; text-decoration:none; margin-right:10px;
}
.eco-avatar-chip:active{ transform:scale(.92); }

/* ══════════ TUNGI REJIM ══════════
   Bu yerda ilgari `html.dark` uchun 25 qatorlik yamoq turardi: token
   qayta ta'riflash va 15 ta klass nomini qo'lda sanab `!important`
   bilan qoraytirish. U ESKI qatlamga (`shared.css`) ko'chirildi.

   Sabab: yangi dizayn tizimi (`ui/template.css`) tungi rejimni
   SEMANTIK ROLLAR orqali beradi — `--surface`, `--line`, `--text`.
   Bu yerdagi `!important` ular ustidan yozib, yangi sahifalarda
   kartalarni buzardi. Eski sahifalar `shared.css` ni yuklaydi va
   yamoqni o'sha yerdan oladi, ya'ni ular uchun hech narsa
   o'zgarmaydi.                                                     */

/* ══════════ QAHRAMON OCHILISH OYNASI (ekran markazi, katta) ══════════ */
.hero-reveal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,20,0); opacity:0; transition:opacity .4s, background .4s; padding:24px; }
.hero-reveal.show{ opacity:1; background:rgba(12,12,20,.85); }
.hr-card{ text-align:center; transform:scale(.5); opacity:0; transition:transform .55s cubic-bezier(.2,1.5,.4,1), opacity .4s; }
.hero-reveal.show .hr-card{ transform:scale(1); opacity:1; }
@keyframes hrFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.hr-imgwrap{ width:min(72vw,300px); height:min(72vw,300px); margin:0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:24px; background:radial-gradient(circle,rgba(253,230,138,.22),transparent 70%); }
.hr-gif{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
  animation:hrPop .6s cubic-bezier(.2,1.6,.4,1) both; }
.hr-ph{ display:none; font-size:120px; }

/* ── Daraja videosi (4 s, 9:16, oq fon) ──────────────────────────────
   Video tik, shuning uchun quti ham tik. Fon oq bo'lgani uchun quti
   ham och rangda — video cheti bilinmaydi.
   Video bir marta o'ynaydi, tugagach `.tugadi` klassi qo'shiladi va
   rasm yumshoq paydo bo'ladi (sakrash sezilmasin uchun). */
/* Quti KVADRAT — tik emas.
   Ilgari 9:16 edi va video butun balandlikni egallardi (qahramon ~426px),
   rasm esa kvadrat bo'lgani uchun ENIGA sig'ardi (~245px). Natijada video
   tugagach qahramon birdan ikki barobar kichrayib qolardi.
   Endi ikkalasi ham bir xil kvadrat qutida: video `contain` bilan
   joylashadi (yon tomonlarda oq chiziq qoladi, lekin quti ham OQ —
   ko'rinmaydi), rasm ham o'sha kvadratni to'ldiradi. */
.hr-imgwrap.hr-vid{
  width:min(74vw,300px); height:min(74vw,300px);
  background:#fff; border-radius:26px; overflow:hidden; position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.hr-imgwrap.hr-vid .hr-mov{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transform-origin:center; transition:opacity .35s ease;
}
.hr-imgwrap.hr-vid .hr-gif{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .35s ease; animation:none;
}
.hr-imgwrap.hr-vid.tugadi .hr-mov{ opacity:0; }
.hr-imgwrap.hr-vid.tugadi .hr-gif{ opacity:1; }
@keyframes hrPop{ from{ transform:scale(.3) rotate(-8deg);} to{ transform:scale(1) rotate(0);} }
.hr-name{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:26px; color:#fff; margin-top:14px; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.hr-desc{ font-family:'Manrope',sans-serif; font-size:13px; color:#CBD5E1; margin-top:5px; }
.hr-btn{ margin-top:22px; background:linear-gradient(135deg,#F5B301,#D97706); color:#fff; border:none; border-radius:16px;
  padding:14px 34px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px; cursor:pointer; box-shadow:0 8px 24px rgba(217,119,6,.5); }
.hr-btn:active{ transform:scale(.95); }
.hr-btn{ display:block; width:100%; margin-top:10px; }
/* Profil qahramon to'plami gridi */
.hero-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hero-cell{ position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--bg); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; }
.hero-cell img{ width:100%; height:100%; object-fit:contain; }
.hero-cell .hc-ph{ font-size:34px; }
.hero-cell.locked{ }
.hero-cell.locked img, .hero-cell.locked .hc-ph{ filter:grayscale(1) brightness(.4); opacity:.6; }
.hero-cell.locked::after{ content:'🔒'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; }
.hero-cell .hc-cond{ position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff;
  font-family:'Manrope',sans-serif; font-size:8.5px; font-weight:700; text-align:center; padding:2px; }

/* Profil rasmi QAHRAMON yoki NISHON bo'lsa — emoji o'rniga rasm.
   O'lcham `em` da: idish (banner/ring/chip) qanday font-size bersa,
   rasm ham shunga moslashadi — har joyga alohida qoida yozilmaydi. */
.eco-avatar{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.eco-av-img{ width:1.35em; height:1.35em; object-fit:contain; display:block; }
/* Qahramon — to'liq bo'yli rasm. Kichik avatarda faqat BOSH ko'rinsin,
   aks holda 44px doirada bola butunlay ko'rinmay ketadi. */
.eco-av-hero{ object-fit:cover; object-position:50% 6%; border-radius:50%; }
/* Profil halqasi katta — u yerda to'liq bo'y chiroyli turadi */
.avatar-ring .eco-av-hero{ object-fit:contain; object-position:50% 50%; border-radius:0; }
/* Har idish o'z o'lchamini beradi — `em` bo'yicha avtomatik o'lcham
   ba'zi joyda juda kichik (bosh sahifa banneri), ba'zida juda katta
   chiqadi, chunki idishlarning font-size'i har xil. */
.avatar-ring .eco-av-img{ width:94px; height:94px; }     /* profil (124px halqa) —
     nishon foni chetidan ko'rinib turishi uchun qahramon biroz kichik */
.banner-avatar .eco-av-img{
    width:100%; height:100%; object-fit:contain; object-position:center;
  }   /* bosh sahifa (72px doira) — qahramon doirani to'ldiradi */
.rk-avatar .eco-av-img{ width:32px; height:32px; }        /* reyting (36px) */
.eco-avatar-chip .eco-av-img{ width:26px; height:26px; }  /* topbar chipi */