/* MegaBrain — Ko'paytirish/Bo'lish (×÷) ko'p ishtirokchi kartochkalari
   v20260911-kop-multi-bg-match-ekran1
   ================================================================
   MUAMMO: "Ekran 1" ning ikkala qismida — Qo'shish/Ayirish (#pageEkran)
   VA Ko'paytirish/Bo'lish (#pageKopaytirish) — ko'p ishtirokchi
   kartalari BIR XIL ko'rinishda bo'lishi kerak. Ammo hozircha bu
   "kartochka foni" (css/multi-card-design.css) faqat #ekranMultiArea
   va #u1MultiArea uchun yozilgan, #kMultiArea (Ko'paytirish/Bo'lish
   ko'p ishtirokchi) hech qanday maxsus fon olmagan (oddiy oq karta).

   YECHIM: shu faylda #ekranMultiArea uchun ishlatilgan YAKUNIY
   (eng ustun) qoidalar xuddi shu ko'rinishda #kMultiArea ga ham
   qo'llanadi:
     1) Har bir ishtirokchi kartasining andoza (asosiy/birinchi) foni —
        "Rangli qog'ozlar" naqshi — kartaga alohida rasm TANLANMAGAN
        holatda.
     2) Agar ishtirokchi 🖼 tugmasi orqali kartaga o'zining fonini
        tanlasa (--mb-card-bg-image), o'sha rasm ustun turadi.
     3) Faqat KO'P ISHTIROKCHI (#kMultiArea/#kMultiCards) kartalariga
        tegishli — yakka ishtirokchi (#kGameArea) va boshqa hech qanday
        sahifa/funksiyaga tegilmaydi.
   ================================================================ */

#kMultiArea .ekran-multi-grid{
  gap:clamp(8px,1.1vw,16px);
  padding:clamp(5px,0.7vw,10px);
}

#kMultiArea .ekm-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.24);
  border-radius:24px;
  box-shadow:
    0 12px 30px rgba(15,23,42,.08),
    0 2px 7px rgba(15,23,42,.05),
    inset 0 0 0 1px rgba(255,255,255,.92);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

#kMultiArea .ekm-panel::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#dbeafe,#bfdbfe,#e0e7ff);
  border-radius:24px 24px 0 0;
  z-index:1;
}

#kMultiArea .ekm-panel::after{
  content:"";
  position:absolute;
  width:110px;height:110px;
  right:-58px;bottom:-58px;
  border-radius:50%;
  background:rgba(99,102,241,.07);
  box-shadow:0 0 0 18px rgba(99,102,241,.025);
  pointer-events:none;
  z-index:0;
}

#kMultiArea .ekm-panel > *:not(.ekm-topbar):not(.ekm-name-badge){position:relative;z-index:2;}

#kMultiArea .ekm-name-badge{
  top:0;
  padding:7px 10px 7px 15px;
  max-width:78%;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.22);
  border-top:none;
  border-radius:0 0 15px 15px;
  box-shadow:0 5px 14px rgba(15,23,42,.07);
}

#kMultiArea .ekm-name-tag{
  color:#334155;
  font-weight:800;
}

/* ── 1) BIRINCHI/ASOSIY FON — "Rangli qog'ozlar" naqshi ──
   Faqat kartaga ALOHIDA rasm tanlanmagan holatda (:not(.mb-multi-card-bg)). */
#kMultiArea .ekm-panel:not(.mb-multi-card-bg){
  background-color:#fffdf8 !important;
  background-image:
    linear-gradient(112deg, transparent 0 17%, rgba(255,205,214,.55) 17.2% 31%, transparent 31.3%),
    linear-gradient(18deg, transparent 0 55%, rgba(198,225,255,.62) 55.2% 69%, transparent 69.3%),
    linear-gradient(155deg, transparent 0 8%, rgba(255,238,180,.62) 8.2% 22%, transparent 22.3%),
    linear-gradient(150deg,#fffefa 0%,#fff9f2 48%,#f8fbff 100%) !important;
  background-size:100% 100%,100% 100%,100% 100%,100% 100% !important;
  border-color:rgba(148,163,184,.22) !important;
}

#kMultiArea .ekm-panel:not(.mb-multi-card-bg)::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-55px;bottom:-62px;
  border-radius:22px;
  transform:rotate(-12deg);
  background:rgba(221,235,255,.58);
  box-shadow:
    -34px -18px 0 rgba(255,220,229,.48),
    -64px 16px 0 rgba(255,242,194,.48),
    0 8px 22px rgba(15,23,42,.05);
  pointer-events:none;
  z-index:0;
}

body.game-on #kMultiArea .ekm-panel:not(.mb-multi-card-bg){
  background-color:#fffdf8 !important;
  background-image:
    linear-gradient(112deg, transparent 0 17%, rgba(255,205,214,.55) 17.2% 31%, transparent 31.3%),
    linear-gradient(18deg, transparent 0 55%, rgba(198,225,255,.62) 55.2% 69%, transparent 69.3%),
    linear-gradient(155deg, transparent 0 8%, rgba(255,238,180,.62) 8.2% 22%, transparent 22.3%),
    linear-gradient(150deg,#fffefa 0%,#fff9f2 48%,#f8fbff 100%) !important;
  color:#1e293b !important;
  border-color:rgba(148,163,184,.24) !important;
}

body.game-on #kMultiArea .ekm-panel:not(.mb-multi-card-bg) .ekm-answer-row{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(148,163,184,.20) !important;
}

/* ── 2) Ishtirokchi 🖼 orqali OʻZ kartasiga rasm tanlasa — o'sha ustun turadi ── */
#kMultiArea .ekm-panel.mb-multi-card-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.80)),
    var(--mb-card-bg-image) !important;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

body.game-on #kMultiArea .ekm-panel.mb-multi-card-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),
    var(--mb-card-bg-image) !important;
  color:#1e293b;
}

body.game-on #kMultiArea .ekm-panel{
  background-color:#fff;
}

#kMultiArea .ekm-answer-row{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(99,102,241,.18);
  border-radius:14px;
  padding:5px;
  box-shadow:0 5px 14px rgba(30,41,59,.07);
}

@media(max-width:700px){
  #kMultiArea .ekran-multi-grid{gap:7px;padding:4px;}
  #kMultiArea .ekm-panel{border-radius:18px;}
  #kMultiArea .ekm-panel::before{border-radius:18px 18px 0 0;height:3px;}
  #kMultiArea .ekm-name-badge{padding:5px 7px 5px 10px;border-radius:0 0 11px 11px;gap:5px;}
}