/* ============================================================
   MEGABRAIN — EKRAN 3 (Xitoycha/#pageXisobcha) KO'P ISHTIROKCHI
   KARTOCHKALARINI EKRAN 1 (#pageEkran) BILAN BIR XIL QILISH
   v20260910-ekran3-match01
   ============================================================
   MUAMMO: barcha o'lcham/fon qoidalari (multi-card-design.css,
   multi-card-fill-v20260826.css, multi-1366x768-tight-v20260826.css,
   mobile-participant-badge-mini-v20260826.css, mode-card-background.css)
   FAQAT "#ekranMultiArea" va "#u1MultiArea" selektorlariga yozilgan.
   Ekran 3'ning ko'p ishtirokchi konteyneri esa "#xMultiArea"/
   "#xMultiCards" — shu sabab u ushbu qoidalarning HECH biriga
   tushmay, faqat css/style.css dagi umumiy (bazaviy, kichikroq va
   fonsiz) ".ekm-panel" ko'rinishida qolib ketgan edi.

   YECHIM: shu fayl — yuqoridagi barcha fayllardagi "#ekranMultiArea"
   qoidalarini XUDDI O'SHA tartibda va qiymatlarda "#xMultiArea"/
   "#xMultiCards" uchun TAKRORLAYDI (asl fayllar o'zgartirilmagan).
   Natijada Ekran 3 kartalari Ekran 1 kartalari bilan piksel-piksel
   bir xil o'lcham va fon dizayniga ega bo'ladi. Boshqa hech qanday
   joyga (Ustun 1, Yaponcha va h.k.) ta'sir qilmaydi. */

/* ------------------------------------------------------------
   1) multi-card-design.css dan — Ekran uslubidagi karta dizayni
   ------------------------------------------------------------ */
#xMultiArea .ekran-multi-grid{
  gap:clamp(8px,1.1vw,16px);
  padding:clamp(5px,0.7vw,10px);
}

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

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

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

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

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

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

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

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

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

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

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

body.game-on #xMultiArea .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 #xMultiArea .ekm-name-badge{
  background:linear-gradient(180deg,#ffffff,#eef2ff);
  border-color:rgba(99,102,241,.22);
}

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

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

@media(max-width:700px){
  #xMultiArea .ekran-multi-grid{gap:7px;padding:4px;}
  #xMultiArea .ekm-panel{border-radius:16px;}
  #xMultiArea .ekm-panel::before{height:3px;border-radius:16px 16px 0 0;}
  #xMultiArea .ekm-name-badge{padding:5px 7px 5px 10px;border-radius:0 0 11px 11px;gap:5px;}
  #xMultiArea .ekm-settings-btn{width:21px;height:21px;}
  #xMultiArea .ekm-score-tag{font-size:.60rem;padding:2px 6px;}
}

/* v20260817-mc03-fix11 — yengil oq kartalar + har bir karta uchun fon tanlash */
#xMultiArea .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);
}

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

#xMultiArea .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);
}
#xMultiArea .ekm-name-tag{color:#334155;}

#xMultiArea .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 #xMultiArea .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 #xMultiArea .ekm-panel{
  background-color:#fff;
}

@media(max-width:700px){
  #xMultiArea .ekm-panel{border-radius:18px;}
  #xMultiArea .ekm-panel::before{border-radius:18px 18px 0 0;height:3px;}
}

/* v20260818-paper05 — ko'p ishtirokchi kartochkasi ICHKI foni:
   "Rangli qog'ozlar" — Ekran 1 bilan bir xil yakuniy ko'rinish. */
#xMultiArea .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;
}

#xMultiArea .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 #xMultiArea .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 #xMultiArea .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) mode-card-background.css dan — har-karta "sahifa foni" rejimi
   ------------------------------------------------------------ */
#pageXisobcha.mb-custom-bg #xMultiCards .ekm-panel{
  background:
    linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),
    var(--mb-bg-image) center / cover no-repeat !important;
}
body.game-on #pageXisobcha.mb-custom-bg #xMultiCards .ekm-panel{
  background:
    linear-gradient(rgba(15,23,42,.34),rgba(15,23,42,.34)),
    var(--mb-bg-image) center / cover no-repeat !important;
}

/* ------------------------------------------------------------
   3) multi-card-fill-v20260826.css dan — joyni to'liq egallash
   ------------------------------------------------------------ */
#xMultiArea .ekran-multi-grid{
  gap:clamp(5px,0.7vw,10px) !important;
  padding:clamp(2px,0.35vw,5px) !important;
  box-sizing:border-box !important;
}

#xMultiArea .ekm-panel{
  padding-top:clamp(34px,6%,46px) !important;
  padding-left:clamp(6px,2.2%,12px) !important;
  padding-right:clamp(6px,2.2%,12px) !important;
  padding-bottom:clamp(6px,2.2%,12px) !important;
}

#xMultiArea .ekm-waiting-block{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  justify-content:flex-start !important;
  gap:clamp(5px,1.2cqh,10px) !important;
  padding-top:clamp(4px,1cqh,10px) !important;
  box-sizing:border-box !important;
}
#xMultiArea .ekm-logo{
  width:min(94%,520px) !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:calc(100% - 52px) !important;
  object-fit:contain !important;
  transform:translateY(clamp(-10px,-1.2cqh,-3px));
}
#xMultiArea .ekm-start-mini{
  flex:0 0 clamp(30px,10%,44px) !important;
  height:clamp(30px,10%,44px) !important;
  max-height:44px !important;
  min-height:30px !important;
  width:min(92%,260px) !important;
}

#xMultiArea .ekm-panel .number-display{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

@media (min-width:701px){
  #xMultiArea .ekran-multi-grid{
    min-height:0 !important;
  }
}

@media (max-width:700px){
  #xMultiArea .ekran-multi-grid{
    gap:4px !important;
    padding:2px !important;
  }
  #xMultiArea .ekm-panel{
    padding-top:clamp(29px,7%,38px) !important;
    padding-left:5px !important;
    padding-right:5px !important;
    padding-bottom:5px !important;
    border-radius:14px !important;
  }
  #xMultiArea .ekm-waiting-block{
    padding-top:2px !important;
    gap:4px !important;
  }
  #xMultiArea .ekm-logo{
    width:96% !important;
    max-height:calc(100% - 42px) !important;
  }
  #xMultiArea .ekm-start-mini{
    width:94% !important;
    height:clamp(27px,9%,38px) !important;
    min-height:27px !important;
    font-size:clamp(.55rem,2.6vw,.72rem) !important;
    padding:0 8px !important;
  }
}

@media (max-width:700px) and (max-height:560px){
  #xMultiArea .ekm-panel{padding-top:27px !important;}
  #xMultiArea .ekm-logo{max-height:calc(100% - 36px) !important;}
}

/* ------------------------------------------------------------
   4) multi-1366x768-tight-v20260826.css dan — noutbuk (1366x768)
   ------------------------------------------------------------ */
@media (min-width:1320px) and (max-width:1410px) and (min-height:740px) and (max-height:790px){
  #pageXisobcha.active #xMultiArea.active{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 58px) !important;
    padding:2px 6px 5px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #pageXisobcha.active #xMultiArea.active > .stats-bar{
    flex:0 0 34px !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 2px 4px !important;
    padding:0 4px !important;
    gap:6px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #pageXisobcha.active #xMultiArea.active > .stats-bar .stat{
    padding:2px 8px !important;
    min-height:30px !important;
  }
  #pageXisobcha.active #xMultiArea.active > .stats-bar .stat-val{font-size:14px !important;line-height:1 !important;}
  #pageXisobcha.active #xMultiArea.active > .stats-bar .stat-lbl{font-size:8px !important;line-height:1 !important;}
  #pageXisobcha.active #xMultiArea.active > .stats-bar .mm-actions{gap:5px !important;}
  #pageXisobcha.active #xMultiArea.active > .stats-bar .mm-actions .btn-back{
    min-height:30px !important;height:30px !important;padding:3px 9px !important;font-size:11px !important;
  }

  #pageXisobcha.active #xMultiArea.active > .ekran-multi-grid{
    flex:1 1 0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:1px !important;
    gap:7px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    align-content:stretch !important;
    justify-content:stretch !important;
    grid-auto-rows:minmax(0,1fr) !important;
  }
  #pageXisobcha.active #xMultiArea.active > .ekran-multi-grid > .ekm-panel{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:29px 8px 6px !important;
    gap:3px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }
  #pageXisobcha.active #xMultiArea.active .ekm-name-badge{
    top:0 !important;
    padding:5px 7px 5px 11px !important;
    gap:5px !important;
    border-radius:0 0 13px 13px !important;
    max-width:78% !important;
  }
  #pageXisobcha.active #xMultiArea.active .ekm-name-tag{font-size:12px !important;max-width:105px !important;}
  #pageXisobcha.active #xMultiArea.active .ekm-settings-btn,
  #pageXisobcha.active #xMultiArea.active .ekm-bg-btn{width:21px !important;height:21px !important;}
  #pageXisobcha.active #xMultiArea.active .ekm-topbar{top:4px !important;padding:0 6px !important;}
  #pageXisobcha.active #xMultiArea.active .ekm-score-tag{font-size:9px !important;padding:2px 6px !important;}

  #pageXisobcha.active #xMultiArea.active .ekm-waiting-block{
    width:100% !important;height:100% !important;min-height:0 !important;
    padding:0 !important;gap:3px !important;justify-content:space-between !important;
  }
  #pageXisobcha.active #xMultiArea.active .ekm-logo{
    width:100% !important;max-width:none !important;
    flex:1 1 auto !important;min-height:0 !important;max-height:calc(100% - 42px) !important;
    object-fit:contain !important;transform:scale(1.10) translateY(-2px) !important;
  }
  #pageXisobcha.active #xMultiArea.active .ekm-start-mini{
    flex:0 0 34px !important;height:34px !important;min-height:34px !important;max-height:34px !important;
    width:88% !important;font-size:11px !important;padding:0 10px !important;
  }
  #pageXisobcha.active #xMultiArea.active .ekm-panel .number-display{
    flex:1 1 auto !important;min-height:0 !important;max-height:100% !important;
    padding:0 !important;line-height:1 !important;
  }
}

/* ------------------------------------------------------------
   5) mobile-participant-badge-mini-v20260826.css dan — telefon
   ------------------------------------------------------------ */
@media (max-width: 700px){
  #pageXisobcha #xMultiArea .ekm-name-badge{
    gap:3px !important;
    max-width:56% !important;
    padding:3px 4px 3px 7px !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:0 2px 6px -2px rgba(59,76,130,.16) !important;
  }
  #pageXisobcha #xMultiArea .ekm-name-tag{
    max-width:clamp(46px,18vw,92px) !important;
    font-size:clamp(8px,2.4vw,11px) !important;
    line-height:1.05 !important;
  }
  #pageXisobcha #xMultiArea .ekm-settings-btn,
  #pageXisobcha #xMultiArea .ekm-bg-btn{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:9px !important;
    line-height:18px !important;
    box-shadow:0 1px 4px rgba(59,76,130,.12) !important;
  }
  #pageXisobcha #xMultiArea .ekm-gear-icon{
    width:10px !important;
    height:10px !important;
  }
  #pageXisobcha #xMultiArea .ekm-bg-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  #pageXisobcha #xMultiArea .ekm-topbar{
    top:3px !important;
    padding:0 5px !important;
  }
  #pageXisobcha #xMultiArea .ekm-score-tag{
    font-size:8px !important;
    padding:1px 5px !important;
  }
}

@media (max-width: 420px){
  #pageXisobcha #xMultiArea .ekm-name-badge{
    max-width:52% !important;
    gap:2px !important;
    padding:2px 3px 2px 5px !important;
    border-radius:0 0 8px 8px !important;
  }
  #pageXisobcha #xMultiArea .ekm-name-tag{
    max-width:clamp(38px,16vw,68px) !important;
    font-size:8px !important;
  }
  #pageXisobcha #xMultiArea .ekm-settings-btn,
  #pageXisobcha #xMultiArea .ekm-bg-btn{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    font-size:8px !important;
    line-height:16px !important;
  }
  #pageXisobcha #xMultiArea .ekm-gear-icon{
    width:9px !important;
    height:9px !important;
  }
}