/* =====================================================================
   ShotGram 1.3.8 — the Majlis (room + list + rankings + details).
   Calm, compact design: ONE blue accent, flat surfaces, small controls,
   no glows / text gradients / pulsing. The room uses its own class names
   (mj2-*) so the older Majlis layers (v106 / v112 / v134) never reach it.
   ===================================================================== */
:root {
  --mj-a: #2f8cff;            /* the one accent */
  --mj-a-soft: rgba(47, 140, 255, .14);
  --mj-a-text: #7fb6ff;
  --mj-panel: rgba(255, 255, 255, .06);
  --mj-line: rgba(255, 255, 255, .09);
  --mj-dim: rgba(255, 255, 255, .58);
  --mj-red: #ff4d5e;
}

/* ================================================================ room */
.majlis.mj2 {
  display: flex !important; flex-direction: column;
  background: var(--mj-bg, #0a0f1c) !important; overflow: hidden;
}
.majlis.mj2.hidden { display: none !important; }
.majlis.mj2 > .mj-live { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
.mj2-grow { flex: 1; min-width: 0; }

/* header */
.mj2-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.mj2-clan {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 56%;
  padding: 3px 10px 3px 3px; border: 0; border-radius: 12px; color: #fff; text-align: start; background: rgba(0, 0, 0, .28);
}
html[dir="rtl"] .mj2-clan { padding: 3px 3px 3px 10px; }
.mj2-emblem { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mj2-emblem .clan-badge { width: 24px; height: 24px; }
.mj2-clan-t { display: grid; gap: 2px; min-width: 0; }
.mj2-clan-t b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj2-clan-s { display: flex; gap: 4px; overflow: hidden; }
.mj2-clan-s i { font-style: normal; font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 6px; border-radius: 5px; white-space: nowrap; }
.mj2-active { background: var(--mj-a); color: #fff; }
.mj2-lv { background: var(--mj-a-soft); color: var(--mj-a-text); direction: ltr; }
.mj2-join { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; color: #fff; display: grid; place-items: center; background: var(--mj-a); }
.mj2-join svg { width: 15px; height: 15px; }
.mj2-top3 { display: flex; align-items: center; padding: 2px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.mj2-top3 > span { position: relative; margin-inline-start: -7px; }
.mj2-top3 > span:first-child { margin-inline-start: 0; z-index: 3; }
.mj2-top3 > span.t2 { z-index: 2; } .mj2-top3 > span.t3 { z-index: 1; }
.mj2-top3 .avatar { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px #0e1424; }
.mj2-top3 > span.t1 .avatar { box-shadow: 0 0 0 1.5px var(--mj-a); }
.mj2-top3-c { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; z-index: 4; }
.mj2-top3-c svg { width: 14px; height: 10px; display: block; }
.mj2-ic { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; color: #fff; display: grid; place-items: center; background: rgba(0, 0, 0, .28); }
.mj2-ic svg { width: 17px; height: 17px; }

/* chips under the header */
.mj2-chips { display: flex; align-items: center; gap: 6px; padding: 4px 12px 6px; }
.mj2-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 8px;
  border: 0; color: rgba(255, 255, 255, .9); font-size: 11.5px; font-weight: 600; white-space: nowrap; background: rgba(0, 0, 0, .28);
}
.mj2-chip svg { width: 13px; height: 13px; flex: none; }
.mj2-chip.rank span { color: var(--mj-a-text); }
.mj2-chip:not(.online) svg { color: var(--mj-a-text); }
.mj2-chip.online { border-radius: 999px; }
.mj2-chip.online b { font-size: 11.5px; font-weight: 700; }

/* seats */
.mj2-stage { padding: 6px 12px; display: grid; gap: 12px; align-content: start; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.mj2-host { display: grid; justify-items: center; }
.mj2-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
.mj2-seats.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mj2-seat { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; }
.mj2-ring {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  box-sizing: border-box; padding: 2px; background: rgba(255, 255, 255, .22); transition: box-shadow .15s ease;
}
.mj2-seats.c5 .mj2-ring { width: 46px; height: 46px; }
.mj2-seat.host .mj2-ring { width: 64px; height: 64px; }
.mj2-seat.taken .mj2-ring.r-owner, .mj2-seat.taken .mj2-ring.r-officer { background: var(--mj-a); }
.mj2-ring .avatar { width: 100% !important; height: 100% !important; }
.mj2-seat.empty .mj2-ring, .mj2-seat.locked .mj2-ring { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--mj-line); color: rgba(255, 255, 255, .45); }
.mj2-seat.empty .mj2-ring svg { width: 20px; height: 20px; }
.mj2-seat.locked .mj2-ring svg { width: 16px; height: 16px; }
.mj2-ring.speaking { box-shadow: 0 0 0 2px var(--mj-a), 0 0 0 5px rgba(47, 140, 255, .22) !important; }
.mj2-ring video.mj-cam { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; object-fit: cover; z-index: 1; }
.mj2-ring video.mj-cam.mirror { transform: scaleX(-1); }
.mj2-ring.has-cam .avatar { visibility: hidden; }
.mj2-mute { position: absolute; bottom: -1px; inset-inline-end: -1px; z-index: 3; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--mj-red); box-shadow: 0 0 0 2px #0e1424; }
.mj2-mute svg { width: 10px; height: 10px; }
.mj2-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; width: 18px; }
.mj2-crown svg { width: 18px; height: 13px; display: block; }
.mj2-role { position: absolute; top: -2px; inset-inline-start: -2px; z-index: 3; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #fff; background: var(--mj-a); box-shadow: 0 0 0 2px #0e1424; }
.mj2-role.mod { background: #5f7da8; }
.mj2-name { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; color: rgba(255, 255, 255, .9); }
.mj2-seat.empty .mj2-name, .mj2-seat.locked .mj2-name { color: rgba(255, 255, 255, .4); font-weight: 500; }
.mj2-pts { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--mj-dim); direction: ltr; }
.mj2-pts svg { width: 9px; height: 9px; color: var(--mj-a-text); }

/* raised hands + intro */
.mj2-handchip { justify-self: center; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 0; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 600; background: var(--mj-a-soft); box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .35); }
.mj2-hands-sheet { display: grid; gap: 4px; }
.mj2-hand { display: flex; align-items: center; gap: 10px; border: 0; color: inherit; padding: 8px 4px; border-radius: 10px; background: none; }
.mj2-hand .avatar { width: 32px !important; height: 32px !important; flex: none; }
.mj2-hand span { flex: 1; text-align: start; font-size: 14px; }
.mj2-hand b { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; background: var(--mj-a); color: #fff; }
.mj2-intro { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; text-align: start; color: #fff; width: 100%; border: 0; background: rgba(0, 0, 0, .25); }
.mj2-intro b { font-size: 11.5px; font-weight: 600; color: var(--mj-a-text); }
.mj2-intro p { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .85); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mj2-intro.open p { -webkit-line-clamp: unset; display: block; }
.mj2-intro.add { box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .35); }
.mj2-intro.add p { color: var(--mj-dim); font-size: 11.5px; }

/* chat */
.mj2-chat { position: relative; flex: 1 0 150px; min-height: 150px; display: flex; flex-direction: column; padding: 0 12px calc(56px + env(safe-area-inset-bottom, 0px)); }
.majlis.mj2 .mj2-msgs {
  flex: 1; min-height: 0; max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 6px 0 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%); mask-image: linear-gradient(to bottom, transparent, #000 12%);
}
.majlis.mj2 .mj2-msgs > * { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; flex: none; }
.majlis.mj2 .mj2-msgs > :first-child { margin-top: auto; }
.mj2-sys { font-size: 12px; line-height: 1.5; color: var(--mj-a-text); padding: 6px 10px; border-radius: 8px; background: rgba(47, 140, 255, .08) !important; max-width: 92%; }
.majlis.mj2 .mj-msg { display: flex; align-items: flex-start; gap: 7px; padding: 0; width: auto; max-width: 92%; font-size: 13px; }
.majlis.mj2 .mj-msg-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.majlis.mj2 .mj-msg-txt { display: grid; gap: 2px; min-width: 0; }
.majlis.mj2 .mj-msg-txt b { font-size: 11px; font-weight: 600; color: var(--mj-dim); margin: 0; }
.majlis.mj2 .mj-msg-txt span { font-size: 13px; line-height: 1.4; color: #fff; padding: 6px 10px; border-radius: 3px 12px 12px 12px; width: fit-content; max-width: 100%; background: rgba(0, 0, 0, .32); overflow-wrap: anywhere; }
html[dir="rtl"] .majlis.mj2 .mj-msg-txt span { border-radius: 12px 3px 12px 12px; }
.mj2-joined {
  position: absolute; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 3px; border-radius: 999px; font-size: 11.5px; color: #fff;
  background: rgba(0, 0, 0, .4); animation: mj2In .3s ease both;
}
html[dir="rtl"] .mj2-joined { padding: 0 3px 0 10px; }
.mj2-joined .avatar { width: 18px !important; height: 18px !important; }
.mj2-joined b { font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj2-joined span { color: var(--mj-dim); }
@keyframes mj2In { from { opacity: 0; transform: translateY(6px); } }

/* bottom: the message box (kept alive, never rebuilt) + small round buttons */
.mj2-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.mj2-bar > * { pointer-events: auto; }
.mj2-b { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 16px; background: rgba(0, 0, 0, .35); }
.mj2-b svg { width: 18px; height: 18px; }
.mj2-b.on, .mj2-b.go { background: var(--mj-a); }
.mj2-b.off { background: rgba(255, 77, 94, .22); color: #ff8a95; }
.mj2-b[hidden] { display: none; }
.mj2-b:disabled { opacity: .4; }
.majlis.mj2 > .mj-send {
  position: absolute !important; z-index: 5; order: 0 !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 12px; inset-inline-end: calc(12px + var(--mj2-n, 2) * 44px);
  padding: 0 !important; background: none !important; margin: 0;
}
.majlis.mj2 > .mj-send .input { height: 38px; width: 100%; border-radius: 999px !important; font-size: 16px; padding: 0 14px; color: #fff; background: rgba(0, 0, 0, .35) !important; border: 0 !important; box-shadow: none; }
.majlis.mj2 > .mj-send .input::placeholder { color: rgba(255, 255, 255, .45); }
.majlis.mj2 > .mj-send .input:focus { box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .6); }

/* Keep / Exit — a small card, not two giant circles */
.mj2-exit { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, .55); animation: mj2Fade .15s ease both; }
@keyframes mj2Fade { from { opacity: 0; } }
.mj2-exit::before { content: ''; grid-area: 1 / 1; width: min(280px, 82vw); height: 124px; border-radius: 14px; background: #141b2c; }
.mj2-exit-b { grid-area: 1 / 1; z-index: 1; display: flex; align-items: center; gap: 10px; width: min(280px, 82vw); height: 56px; padding: 0 16px; border: 0; background: none; color: #fff; text-align: start; }
.mj2-exit-b.keep { transform: translateY(-31px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); }
.mj2-exit-b.out { transform: translateY(31px); color: var(--mj-red); }
.mj2-exit-b span { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.mj2-exit-b span svg { width: 19px; height: 19px; }
.mj2-exit-b b { font-size: 14.5px; font-weight: 600; }
.mj2-exit-b small { font-size: 11.5px; color: var(--mj-dim); margin-inline-start: auto; }

@media (min-width: 900px) {
  .majlis.mj2 > .mj-live, .majlis.mj2 > .mj-send { max-width: 600px; }
  .majlis.mj2 > .mj-live { width: 100%; margin: 0 auto; position: relative; }
  .majlis.mj2 > .mj-send { max-width: none; inset-inline-start: calc(50% - 288px); inset-inline-end: calc(50% - 288px + var(--mj2-n, 2) * 44px); }
  .mj2-seats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ================================================================ shared bits */
.mjx-cat { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .7); }
.mjx-lv { direction: ltr; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: var(--mj-a-text); background: var(--mj-a-soft); white-space: nowrap; }
.mjx-lv i { font-style: normal; font-size: 9px; margin-inline-end: 2px; opacity: .8; }
.mjx-pts { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13px; color: #fff; white-space: nowrap; direction: ltr; }
.mjx-bolt { width: 12px; height: 12px; fill: var(--mj-a); flex: none; }
.mjx-crown { display: block; }
.mjx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.mjx-eq i { width: 2.5px; border-radius: 2px; background: var(--mj-a); animation: mjxEq 1s ease-in-out infinite; }
.mjx-eq i:nth-child(1) { height: 60%; } .mjx-eq i:nth-child(2) { height: 100%; animation-delay: .2s; } .mjx-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
@keyframes mjxEq { 50% { transform: scaleY(.45); } }
.mjx-role { font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 5px; white-space: nowrap; background: rgba(255, 255, 255, .07); color: var(--mj-dim); }
.mjx-role.r-owner { background: var(--mj-a); color: #fff; }
.mjx-role.r-officer, .mjx-role.r-moderator { background: var(--mj-a-soft); color: var(--mj-a-text); }
.mjx-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }
.mjx-empty small { color: var(--mj-dim); font-size: 12.5px; }
.mjx-empty-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mj-panel); color: var(--mj-a-text); }
.mjx-empty-ic svg { width: 20px; height: 20px; }
.mjx-btn { border: 0; border-radius: 8px; padding: 8px 16px; color: #fff; font-size: 13px; font-weight: 600; background: var(--mj-a); }
.mjx-loading { height: 100px; display: grid; place-items: center; }
.mjx-loading::after { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); border-top-color: var(--mj-a); animation: mjxSpin .8s linear infinite; }
@keyframes mjxSpin { to { transform: rotate(360deg); } }

/* ================================================================ the list (LIVE hub → Majlis tab) */
.mjx-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 12px; }
.mjx-banner { display: flex; align-items: center; gap: 10px; text-align: start; height: 52px; padding: 0 12px; border: 0; border-radius: 12px; color: #fff; background: var(--mj-panel); }
.mjx-banner-ic { order: -1; width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--mj-a-soft); color: var(--mj-a-text); }
.mjx-banner-ic svg { width: 16px; height: 16px; }
.mjx-banner-ic .mjx-crown { width: 18px; height: 13px; }
.mjx-banner b { display: block; font-size: 13.5px; font-weight: 700; }
.mjx-banner small { display: block; font-size: 11px; color: var(--mj-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-banner > b, .mjx-banner > small { grid-column: 2; }
.mjx-banner { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-content: center; }
.mjx-banner .mjx-banner-ic { grid-row: 1 / 3; grid-column: 1; }
.mjx-tabs { display: flex; gap: 18px; margin: 0 2px 8px; border-bottom: 1px solid var(--mj-line); }
.mjx-tabs button { border: 0; background: none; padding: 6px 0 9px; font-size: 14px; font-weight: 600; color: var(--mj-dim); position: relative; }
.mjx-tabs button.active { color: #fff; }
.mjx-tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #fff; }
.mjx-list { display: grid; gap: 2px; }
@media (min-width: 900px) { .mjx-list { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.mjx-card { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--mj-line); border-radius: 0; text-align: start; color: #fff; width: 100%; background: none; }
.mjx-card.is-skel { height: 84px; border-radius: 12px; border: 0; margin-bottom: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .07), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: mjxSk 1.2s linear infinite; }
@keyframes mjxSk { to { background-position: -200% 0; } }
.mjx-card:active { opacity: .7; }
.mjx-cover { position: relative; width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.mjx-cover-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mjx-cover-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 60%); }
.mjx-cover-badge { position: relative; z-index: 1; margin-top: -8px; }
.mjx-cover-badge .clan-badge { width: 32px; height: 32px; }
.mjx-cover-tag { position: absolute; bottom: 4px; left: 0; right: 0; z-index: 1; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; }
.mjx-top { position: absolute; top: 4px; inset-inline-start: 4px; z-index: 2; padding: 0 5px; line-height: 15px; font-size: 9px; font-weight: 700; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; }
.mjx-card.is-top .mjx-top { background: var(--mj-a); }
.mjx-body { flex: 1; min-width: 0; display: grid; align-content: center; gap: 4px; }
.mjx-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mjx-name b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-intro { font-size: 12px; color: var(--mj-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mjx-foot .grow { flex: 1; }
.mjx-mine { font-size: 10.5px; font-weight: 600; color: var(--mj-a-text); }
.mjx-faces { display: flex; }
.mjx-faces img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #0b0f1a; margin-inline-start: -5px; background: #333; }
.mjx-faces img:first-child { margin-inline-start: 0; }
.mjx-here { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mj-dim); }
.mjx-here svg { width: 13px; height: 13px; }
.mjx-here.on { color: #fff; }

/* ================================================================ dark sheets */
.sheet.mjx-host { background: #0f1525 !important; color: #fff !important; padding: 0 !important; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; }
.sheet.mjx-host .sheet-grip { background: rgba(255, 255, 255, .22) !important; }
.sheet.mjx-host .sheet-list:empty { display: none; }
.mjx-sheet { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.mjx-sheet > * { flex: none; }
.mjx-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 4px 0 10px; }
.mjx-head h3 { margin: 0; text-align: center; font-size: 15px; font-weight: 700; }
.mjx-x, .mjx-help { width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); justify-self: end; }
.mjx-help { justify-self: start; font-weight: 700; font-size: 13px; }
.mjx-x svg { width: 14px; height: 14px; }
.mjx-scope { display: flex; gap: 18px; padding: 0 2px 8px; }
.mjx-scope button { border: 0; background: none; padding: 0; font-size: 14.5px; font-weight: 700; color: rgba(255, 255, 255, .4); }
.mjx-scope button.active { color: #fff; }
.mjx-seg { display: flex; gap: 4px; padding: 3px; margin-bottom: 4px; border-radius: 9px; background: rgba(255, 255, 255, .06); }
.mjx-seg button { flex: 1; height: 28px; border-radius: 7px; border: 0; font-size: 12.5px; font-weight: 600; color: var(--mj-dim); background: none; white-space: nowrap; }
.mjx-seg button.active { color: #fff; background: rgba(255, 255, 255, .12); }
.mjx-rank-body { min-height: 180px; }
.mjx-prev { position: sticky; bottom: 2px; align-self: center; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 600; background: #1d2740; }

/* podium */
.mjx-podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 8px; padding: 22px 0 12px; }
.mjx-pod { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 6px 12px; border: 0; color: #fff; text-align: center; border-radius: 12px; min-width: 0; background: rgba(255, 255, 255, .05); }
.mjx-pod.p1 { padding-top: 28px; padding-bottom: 16px; background: rgba(47, 140, 255, .12); }
.mjx-pod.empty { opacity: .4; }
.mjx-pod-face { position: relative; display: grid; place-items: center; }
.mjx-pod-face .mjx-crown { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); width: 24px; height: 17px; z-index: 2; }
.mjx-pod.p1 .mjx-pod-face .mjx-crown { width: 28px; height: 20px; top: -22px; }
.mjx-pod-face .avatar, .mjx-pod-face .mjx-emblem { width: 50px !important; height: 50px !important; }
.mjx-pod.p1 .mjx-pod-face .avatar, .mjx-pod.p1 .mjx-pod-face .mjx-emblem { width: 60px !important; height: 60px !important; }
.mjx-pod-face .avatar { box-shadow: 0 0 0 2px #c9d4e3; }
.mjx-pod.p1 .mjx-pod-face .avatar { box-shadow: 0 0 0 2px var(--mj-a); }
.mjx-pod.p3 .mjx-pod-face .avatar { box-shadow: 0 0 0 2px #8ea6c4; }
.mjx-pod-face > i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .07); display: block; }
.mjx-pod-face em { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); min-width: 17px; height: 17px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; background: #26314a; }
.mjx-pod.p1 .mjx-pod-face em { background: var(--mj-a); }
.mjx-pod > b { font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.mjx-pod .mjx-pts { font-size: 12.5px; }
.mjx-pod-chips { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.mjx-emblem { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mjx-emblem .clan-badge { width: 60%; height: 60%; }
.mjx-pod .mjx-emblem { border-radius: 14px; }
.mjx-rows { display: grid; }
.mjx-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; background: none; color: #fff; text-align: start; border-radius: 10px; }
.mjx-row.me { background: var(--mj-a-soft); }
.mjx-row .mjx-no { width: 22px; text-align: center; font-size: 13px; font-weight: 600; color: var(--mj-dim); flex: none; }
.mjx-row .avatar { width: 38px !important; height: 38px !important; }
.mjx-row b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-row-chips { display: flex; gap: 4px; margin-top: 3px; }
.mjx-row .mjx-role { display: inline-block; margin-top: 3px; }
.mjx-mine-row { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin: 6px -16px 0; background: #161e33; font-size: 13px; }
.mjx-mine-row .mjx-no { font-weight: 700; color: var(--mj-a-text); }
.minw0 { min-width: 0; }
.mjx-explain { display: grid; gap: 10px; padding: 2px 2px 8px; font-size: 14px; }
.mjx-explain p { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.mjx-explain p svg { width: 15px; height: 15px; flex: none; }
.mjx-explain p > svg:not(.mjx-bolt) { color: var(--mj-a); }
.mjx-explain small { color: var(--muted, #888); line-height: 1.5; }

/* online */
.mjx-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); margin-bottom: 4px; }
.mjx-search svg { width: 15px; height: 15px; color: var(--mj-dim); }
.mjx-search input { flex: 1; border: 0; background: none; color: #fff; font-size: 16px; outline: none; min-width: 0; }
.mjx-online { display: grid; }
.mjx-person { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border: 0; background: none; color: #fff; text-align: start; border-bottom: 1px solid var(--mj-line); }
.mjx-person .avatar { width: 40px !important; height: 40px !important; }
.mjx-person b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-person-chips { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.mjx-person-chips .mjx-pts { font-size: 11.5px; color: var(--mj-dim); }
.mjx-person-chips .mjx-bolt { width: 10px; height: 10px; }
.mjx-seated { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 5px; background: var(--mj-a-soft); color: var(--mj-a-text); }
.mjx-seated svg { width: 10px; height: 10px; }

/* details */
.mjx-d-top { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.mjx-d-cover { width: 60px; height: 60px; border-radius: 14px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mjx-d-cover .clan-badge { width: 36px; height: 36px; }
.mjx-d-top b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mjx-d-sub { display: flex; gap: 5px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.mjx-tagchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 7px; border-radius: 5px; background: rgba(255, 255, 255, .07); }
.mjx-tagchip .clan-badge { width: 12px; height: 12px; }
.mjx-d-rank { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--mj-a-text); }
.mjx-d-rank .mjx-crown { width: 14px; height: 10px; }
.mjx-d-level { display: grid; justify-items: center; gap: 3px; flex: none; }
.mjx-hex { width: 40px; height: 44px; display: grid; place-items: center; background: var(--mj-a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mjx-hex b { font-size: 15px !important; font-weight: 700; }
.mjx-d-level small { font-size: 10.5px; color: var(--mj-dim); }
.mjx-d-bar, .mjx-ach-bar { width: 44px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; display: block; }
.mjx-d-bar i, .mjx-ach-bar i { display: block; height: 100%; border-radius: 3px; background: var(--mj-a); }
.mjx-d-next { margin: 6px 0 10px; font-size: 11.5px; color: var(--mj-dim); text-align: end; }
.mjx-d-card { display: block; width: 100%; text-align: start; color: #fff; border: 0; border-radius: 12px; padding: 12px; margin-bottom: 8px; background: var(--mj-panel); }
.mjx-d-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mjx-d-h b { font-size: 13.5px; font-weight: 700; }
.mjx-d-h svg { width: 15px; height: 15px; color: var(--mj-dim); }
.mjx-achs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mjx-ach { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.mjx-medal { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }
.mjx-medal svg { width: 18px; height: 18px; }
.mjx-medal em { position: absolute; top: -5px; inset-inline-end: -10px; font-style: normal; font-size: 9px; font-weight: 700; line-height: 14px; padding: 0 4px; border-radius: 4px; background: #26314a; color: #fff; }
.mjx-ach.t1 .mjx-medal, .mjx-ach.t2 .mjx-medal { color: var(--mj-a-text); background: var(--mj-a-soft); }
.mjx-ach.t3 .mjx-medal, .mjx-ach.t4 .mjx-medal, .mjx-ach.t5 .mjx-medal { color: #fff; background: var(--mj-a); }
.mjx-ach.t5 .mjx-medal { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.mjx-ach b { font-size: 11.5px; font-weight: 600; }
.mjx-ach small { font-size: 10px; color: var(--mj-dim); line-height: 1.3; }
.mjx-ach .mjx-ach-bar { width: 70%; }
.mjx-d-faces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mjx-d-faces::-webkit-scrollbar { display: none; }
.mjx-d-face { position: relative; flex: none; }
.mjx-d-face .avatar { width: 40px !important; height: 40px !important; }
.mjx-d-face i { position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #182036; display: none; background: var(--mj-a); }
.mjx-d-face.r-owner i, .mjx-d-face.r-officer i, .mjx-d-face.r-moderator i { display: block; }
.mjx-d-face.r-moderator i { background: #8ea6c4; }
.mjx-d-intro { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .8); white-space: pre-wrap; }
.mjx-d-actions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
.mjx-round { width: 42px; height: 42px; border-radius: 10px; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); flex: none; }
.mjx-round svg { width: 18px; height: 18px; }
.mjx-round .mjx-crown { width: 20px; height: 14px; }
.mjx-main { flex: 1; height: 42px; border: 0; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; background: var(--mj-a); }

/* intro editor */
.mjx-cat-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mjx-cat-pick button { border: 0; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: var(--surface-2, rgba(127, 127, 127, .14)); color: inherit; }
.mjx-cat-pick button.active { background: var(--mj-a); color: #fff; }

/* LIVE hub: the Majlis tab switches the grid to the list */
.lh-grid.is-majalis { display: block; }

/* Clans page shortcut — a plain row, like the rest of the page */
.mjx-clans-cta { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 6px 16px 12px; padding: 10px 12px; border: 0; border-radius: 12px; color: inherit; text-align: start; background: var(--surface-2, rgba(255, 255, 255, .06)); }
.mjx-clans-cta b { display: block; font-size: 14px; font-weight: 700; }
.mjx-clans-cta small { display: block; font-size: 12px; color: var(--muted, var(--mj-dim)); margin-top: 1px; }
.mjx-clans-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--mj-a-soft); color: var(--mj-a); flex: none; }
.mjx-clans-ic svg { width: 17px; height: 17px; }
.mjx-clans-cta .grow { flex: 1; min-width: 0; }

/* ================================================================ 1.3.8 — Majlis look (owner's choice) */
.majlis.mj2 { background-size: cover !important; background-position: center !important; }
.mj2-seat.taken .mj2-ring { background: var(--mj-ring, #2f8cff) !important; }
.mj2-seat.taken .mj2-ring.r-guest { background: rgba(255, 255, 255, .35) !important; }
.mj2-crown svg { width: 20px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

/* stage: two big speakers side by side, the rest smaller */
.mj2-stage-row { display: flex !important; justify-content: center; gap: 28px; }
.mj2-stage-row .mj2-seat .mj2-ring { width: 64px; height: 64px; }

/* circle + majlis: seats placed around an area */
.mj2-area { position: relative; width: 100%; max-width: 360px; margin: 6px auto 4px; aspect-ratio: 1 / .92; }
.mj2-area.a-circle { aspect-ratio: 1 / 1; max-width: 330px; }
.mj2-spot { position: absolute; transform: translate(-50%, -50%); width: 64px; }
.mj2-spot .mj2-seat { width: 100%; }
.mj2-spot .mj2-ring { width: 46px; height: 46px; }
.mj2-area-host { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mj2-area.a-majlis .mj2-area-host { top: 34%; }
.mj2-orbit { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); }
.mj2-rug { position: absolute; left: 20%; right: 20%; top: 46%; bottom: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); pointer-events: none; }

/* the editor sheet: short, so the room shows above it as a live preview */
.sheet.mjl-sheet { max-height: 56vh; overflow-y: auto; }
.mjl h4 { margin: 12px 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted, #9aa); }
.mjl h4:first-child { margin-top: 2px; }
.mjl-bgs { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mjl-bgs::-webkit-scrollbar { display: none; }
.mjl button { border: 0; background: none; color: inherit; padding: 0; display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.mjl-bgs i { display: block; width: 74px; height: 110px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mjl-bgs button.on i { box-shadow: 0 0 0 2px #2f8cff; }
.mjl-bgs span { max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted, #aab); }
.mjl-bgs button.on span { color: #fff; }
.mjl-lays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mjl-lays button { padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.mjl-lays button.on { background: rgba(47, 140, 255, .16); box-shadow: inset 0 0 0 1.5px #2f8cff; }
.mjl-dia { position: relative; display: block; width: 52px; height: 44px; }
.mjl-dia b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: translate(-50%, -50%); }
.mjl-dia b:first-child { width: 12px; height: 12px; background: #2f8cff; }
/* the 9 dots of each little diagram (1 = host) */
.d-grid b:nth-child(1) { left: 50%; top: 14%; } .d-grid b:nth-child(2) { left: 14%; top: 52%; } .d-grid b:nth-child(3) { left: 38%; top: 52%; } .d-grid b:nth-child(4) { left: 62%; top: 52%; } .d-grid b:nth-child(5) { left: 86%; top: 52%; } .d-grid b:nth-child(6) { left: 14%; top: 86%; } .d-grid b:nth-child(7) { left: 38%; top: 86%; } .d-grid b:nth-child(8) { left: 62%; top: 86%; } .d-grid b:nth-child(9) { left: 86%; top: 86%; }
.d-majlis b:nth-child(1) { left: 50%; top: 30%; } .d-majlis b:nth-child(2) { left: 90%; top: 12%; } .d-majlis b:nth-child(3) { left: 90%; top: 46%; } .d-majlis b:nth-child(4) { left: 90%; top: 80%; } .d-majlis b:nth-child(5) { left: 64%; top: 92%; } .d-majlis b:nth-child(6) { left: 36%; top: 92%; } .d-majlis b:nth-child(7) { left: 10%; top: 80%; } .d-majlis b:nth-child(8) { left: 10%; top: 46%; } .d-majlis b:nth-child(9) { left: 10%; top: 12%; }
.d-circle b:nth-child(1) { left: 50%; top: 50%; } .d-circle b:nth-child(2) { left: 50%; top: 6%; } .d-circle b:nth-child(3) { left: 81%; top: 19%; } .d-circle b:nth-child(4) { left: 94%; top: 50%; } .d-circle b:nth-child(5) { left: 81%; top: 81%; } .d-circle b:nth-child(6) { left: 50%; top: 94%; } .d-circle b:nth-child(7) { left: 19%; top: 81%; } .d-circle b:nth-child(8) { left: 6%; top: 50%; } .d-circle b:nth-child(9) { left: 19%; top: 19%; }
.d-stage b:nth-child(1) { left: 34%; top: 18%; } .d-stage b:nth-child(2) { left: 66%; top: 18%; width: 12px; height: 12px; background: #2f8cff; } .d-stage b:nth-child(3) { left: 10%; top: 66%; } .d-stage b:nth-child(4) { left: 30%; top: 66%; } .d-stage b:nth-child(5) { left: 50%; top: 66%; } .d-stage b:nth-child(6) { left: 70%; top: 66%; } .d-stage b:nth-child(7) { left: 90%; top: 66%; } .d-stage b:nth-child(8) { left: 30%; top: 92%; } .d-stage b:nth-child(9) { left: 70%; top: 92%; }
.mjl-sw { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mjl-sw::-webkit-scrollbar { display: none; }
.mjl-sw button { min-width: 50px; }
.mjl-sw i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.mjl-sw button.on i { box-shadow: 0 0 0 2px var(--surface, #111), 0 0 0 4px #2f8cff; }
.mjl-sw span { color: var(--muted, #aab); white-space: nowrap; }
.mjl-sw button.on span { color: #fff; }
.mjl-crown { background: rgba(255, 255, 255, .06); }
.mjl-crown svg { width: 22px; height: 16px; }
.mjl-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 16px; }
.mjl-actions .btn { height: 40px; border-radius: 10px; }

/* v1.3.9-fix34 — chat spacing: an old rule forced extra padding on every line (!important),
   and while typing the room makes space for the chat so the newest message stays visible */
.majlis.mj2 .mj-msg { padding: 0 !important; }
.majlis.mj2 .mj2-msgs { gap: 5px; }
.majlis.mj2.mj-typing .mj2-chips, .majlis.mj2.mj-typing .mj2-intro, .majlis.mj2.mj-typing .mj2-handchip { display: none; }
.majlis.mj2.mj-typing .mj2-stage { max-height: 24dvh; }
.majlis.mj2.mj-typing .mj2-chat { flex: 1 1 0; }