/* MegaBrain — ko'p ishtirokchi kartochkalari dizayni
   2026-08-17 / v20260817-multi-card-01
   Faqat Ekran va Ustun 1 ko'p ishtirokchi kartalariga ta'sir qiladi.
   O'yin logikasi, generator, yakka ishtirokchi va boshqa sahifalar o'zgarmaydi. */

/* ================================================================
   EKRAN — ko'p ishtirokchi kartalari
   ================================================================ */
#ekranMultiArea .ekran-multi-grid{
  gap:clamp(8px,1.1vw,16px);
  padding:clamp(5px,0.7vw,10px);
}

#ekranMultiArea .ekm-panel{
  background:
    radial-gradient(circle at 88% 12%, rgba(99,102,241,.13), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 52%,#f3f5ff 100%);
  border:1px solid rgba(99,102,241,.28);
  border-radius:22px;
  box-shadow:
    0 10px 28px rgba(30,41,59,.10),
    0 2px 8px rgba(79,70,229,.08),
    inset 0 0 0 1px rgba(255,255,255,.82);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

#ekranMultiArea .ekm-panel::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#2563eb,#6366f1,#8b5cf6);
  border-radius:22px 22px 0 0;
  z-index:1;
}

#ekranMultiArea .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;
}

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

#ekranMultiArea .ekm-name-badge{
  top:0;
  padding:7px 10px 7px 15px;
  max-width:78%;
  background:linear-gradient(180deg,#ffffff,#eef2ff);
  border:1px solid rgba(99,102,241,.22);
  border-top:none;
  border-radius:0 0 15px 15px;
  box-shadow:0 5px 14px rgba(79,70,229,.13);
}

#ekranMultiArea .ekm-name-tag{
  color:#3730a3;
  font-weight:800;
}

#ekranMultiArea .ekm-score-tag{
  background:rgba(37,99,235,.09);
  border-color:rgba(37,99,235,.20);
  color:#2563eb;
  box-shadow:0 3px 10px rgba(37,99,235,.08);
}

#ekranMultiArea .ekm-settings-btn{
  width:24px;height:24px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 3px 9px rgba(99,102,241,.32);
}

#ekranMultiArea .ekm-arena{
  filter:drop-shadow(0 5px 12px rgba(79,70,229,.07));
}

#ekranMultiArea .ekm-start-mini{
  background:linear-gradient(135deg,#2563eb,#6366f1 58%,#7c3aed);
  box-shadow:0 7px 18px rgba(79,70,229,.28);
}

#ekranMultiArea .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);
}

/* O'yin vaqtida Ekran kartalari oq (och) ko'rinishda qoladi. */
body.game-on #ekranMultiArea .ekm-panel{
  background:
    radial-gradient(circle at 88% 12%, rgba(99,102,241,.13), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 52%,#f3f5ff 100%);
  border-color:rgba(99,102,241,.28);
  box-shadow:
    0 10px 28px rgba(30,41,59,.10),
    0 2px 8px rgba(79,70,229,.08),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

body.game-on #ekranMultiArea .ekm-name-badge{
  background:linear-gradient(180deg,#ffffff,#eef2ff);
  border-color:rgba(99,102,241,.22);
}

body.game-on #ekranMultiArea .ekm-name-tag{color:#3730a3;}

body.game-on #ekranMultiArea .ekm-answer-row{
  background:rgba(255,255,255,.72);
  border-color:rgba(99,102,241,.18);
}

/* ================================================================
   USTUN 1 — ko'p ishtirokchi kartalari
   Ekrandan ataylab boshqa uslub: oq + yashil/moviy, "musobaqa" hissi.
   ================================================================ */
#u1MultiArea .ekran-multi-grid{
  gap:clamp(9px,1.15vw,17px);
  padding:clamp(6px,0.8vw,11px);
}

#u1MultiArea .ekm-panel{
  background:
    radial-gradient(circle at 12% 10%, rgba(16,185,129,.12), transparent 32%),
    linear-gradient(150deg,#ffffff 0%,#f8fffc 54%,#f2f9ff 100%);
  border:1px solid rgba(14,165,164,.25);
  border-radius:20px;
  box-shadow:
    0 10px 26px rgba(15,118,110,.10),
    0 2px 7px rgba(59,130,246,.07),
    inset 0 0 0 1px rgba(255,255,255,.86);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

#u1MultiArea .ekm-panel::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#10b981,#06b6d4,#3b82f6);
  border-radius:20px 20px 0 0;
  z-index:1;
}

#u1MultiArea .ekm-panel::after{
  content:"";
  position:absolute;
  width:95px;height:95px;
  left:-48px;bottom:-48px;
  border-radius:50%;
  background:rgba(16,185,129,.065);
  box-shadow:0 0 0 15px rgba(6,182,212,.025);
  pointer-events:none;
  z-index:0;
}

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

#u1MultiArea .ekm-name-badge{
  top:0;
  padding:7px 10px 7px 14px;
  max-width:78%;
  background:linear-gradient(180deg,#ffffff,#ecfdf5);
  border:1px solid rgba(16,185,129,.22);
  border-top:none;
  border-radius:0 0 14px 14px;
  box-shadow:0 5px 14px rgba(16,185,129,.12);
}

#u1MultiArea .ekm-name-tag{color:#047857;}

#u1MultiArea .ekm-score-tag{
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.22);
  color:#059669;
  box-shadow:0 3px 10px rgba(16,185,129,.08);
}

#u1MultiArea .ekm-settings-btn{
  width:24px;height:24px;
  background:linear-gradient(135deg,#10b981,#0891b2);
  box-shadow:0 3px 9px rgba(6,182,212,.28);
}

#u1MultiArea .u1m-list{
  padding:clamp(5px,1vw,10px);
  border-radius:15px;
  background:rgba(255,255,255,.54);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.08);
}

#u1MultiArea .u1m-num-line{color:#123c3a;}

#u1MultiArea .ekm-start-mini{
  background:linear-gradient(135deg,#10b981,#0891b2 58%,#2563eb);
  box-shadow:0 7px 18px rgba(6,148,162,.25);
}

#u1MultiArea .ekm-answer-row{
  background:rgba(255,255,255,.74);
  border:1px solid rgba(16,185,129,.18);
  border-radius:14px;
  padding:5px;
  box-shadow:0 5px 14px rgba(15,118,110,.07);
}

/* Juda ko'p ishtirokchida karta ichidagi bezaklar zichlashadi,
   funksional elementlar esa o'z o'lchamini saqlab qoladi. */
@media(max-width:700px){
  #ekranMultiArea .ekran-multi-grid,
  #u1MultiArea .ekran-multi-grid{gap:7px;padding:4px;}
  #ekranMultiArea .ekm-panel,
  #u1MultiArea .ekm-panel{border-radius:16px;}
  #ekranMultiArea .ekm-panel::before,
  #u1MultiArea .ekm-panel::before{height:3px;border-radius:16px 16px 0 0;}
  #ekranMultiArea .ekm-name-badge,
  #u1MultiArea .ekm-name-badge{padding:5px 7px 5px 10px;border-radius:0 0 11px 11px;gap:5px;}
  #ekranMultiArea .ekm-settings-btn,
  #u1MultiArea .ekm-settings-btn{width:21px;height:21px;}
  #ekranMultiArea .ekm-score-tag,
  #u1MultiArea .ekm-score-tag{font-size:.60rem;padding:2px 6px;}
}


/* ================================================================
   v20260817-mc03-fix11 — yengil oq kartalar + har bir karta uchun fon tanlash
   ================================================================ */
#ekranMultiArea .ekm-panel,
#u1MultiArea .ekm-panel{
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.98), transparent 30%),
    linear-gradient(145deg,#ffffff 0%,#fbfdff 58%,#f5f8fc 100%);
  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);
}

#ekranMultiArea .ekm-panel::before{
  height:4px;
  background:linear-gradient(90deg,#dbeafe,#bfdbfe,#e0e7ff);
  border-radius:24px 24px 0 0;
}
#u1MultiArea .ekm-panel::before{
  height:4px;
  background:linear-gradient(90deg,#d1fae5,#ccfbf1,#dbeafe);
  border-radius:24px 24px 0 0;
}

#ekranMultiArea .ekm-name-badge,
#u1MultiArea .ekm-name-badge{
  background:rgba(255,255,255,.96);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 5px 14px rgba(15,23,42,.07);
}
#ekranMultiArea .ekm-name-tag{color:#334155;}
#u1MultiArea .ekm-name-tag{color:#334155;}

.ekm-bg-btn{
  width:23px;height:23px;border:1px solid #e2e8f0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0;flex:0 0 auto;cursor:pointer;
  background:#f8fafc;color:#64748b;font-size:11px;line-height:1;
  box-shadow:0 2px 6px rgba(15,23,42,.07);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.ekm-bg-btn:hover{transform:translateY(-1px) scale(1.06);background:#fff;border-color:#cbd5e1;box-shadow:0 4px 10px rgba(15,23,42,.11);}
.ekm-bg-btn:active{transform:scale(.94);}

/* Tanlangan rasm faqat shu ishtirokchi kartasi ichida ko'rinadi. */
#ekranMultiArea .ekm-panel.mb-multi-card-bg,
#u1MultiArea .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;
}

#pageEkran.mb-custom-bg #ekranMultiArea #ekranMultiCards .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;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

body.game-on #ekranMultiArea .ekm-panel.mb-multi-card-bg,
body.game-on #u1MultiArea .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 #ekranMultiArea .ekm-panel,
body.game-on #u1MultiArea .ekm-panel{
  background-color:#fff;
}

@media(max-width:700px){
  #ekranMultiArea .ekm-panel,
  #u1MultiArea .ekm-panel{border-radius:18px;}
  #ekranMultiArea .ekm-panel::before,
  #u1MultiArea .ekm-panel::before{border-radius:18px 18px 0 0;height:3px;}
  .ekm-bg-btn{width:21px;height:21px;font-size:10px;}
}

/* ================================================================
   v20260818-paper05 — KO'P ISHTIROKCHI KARTOCHKASI ICHKI FONI
   Tanlangan dizayn: "Rangli qog'ozlar".
   Faqat karta ICHKI foni. Sahifa/orqa fon, header va funksiyalar o'zgarmaydi.
   ================================================================ */
#ekranMultiArea .ekm-panel:not(.mb-multi-card-bg),
#u1MultiArea .ekm-panel:not(.mb-multi-card-bg){
  position:relative;
  overflow:hidden;
  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;
}

#ekranMultiArea .ekm-panel:not(.mb-multi-card-bg)::after,
#u1MultiArea .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 #ekranMultiArea .ekm-panel:not(.mb-multi-card-bg),
body.game-on #u1MultiArea .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 #ekranMultiArea .ekm-panel:not(.mb-multi-card-bg) .ekm-answer-row,
body.game-on #u1MultiArea .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;
}