/* «كود نيمز» v2 — «مقرّ المخابرات» (٢٠٢٦/١٠/١٧ بطلب المالك: إعادة بناء القالب كامل)
   طاولة تحقيق بالليل، ٢٥ ملفّ سرّي تنقلب لصورة العميل، ولوحتا فريق ببنرات اللاعبين. */
.xg-cn .xg{background:
  radial-gradient(70% 55% at 50% 42%,rgba(255,214,140,.16),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6cqw),
  linear-gradient(180deg,#141a33 0%,#0c1024 60%,#070915 100%)}
.cn2 .xg-chip{background:linear-gradient(160deg,#1d2650,#10163a);border:2px solid rgba(255,214,140,.4)}
.cn2 .xg-title small u{text-decoration:none;color:var(--gold)}
.cn2 .xg-title b{color:#fff}
.cn-cw{display:inline-block;padding:.05em .55em;border-radius:.3em;background:#f3e6c4;color:#2a1d0c;transform:rotate(-1.5deg);box-shadow:0 .3em .6em rgba(0,0,0,.45);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 2px,transparent 2px 5px)}
.cn-cn{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;border-radius:50%;background:#c2304f;color:#fff;border:3px solid #ffd27a;margin-inline-start:.2em}
/* باقي كم تخمين من رقم التلميح (٢٠٢٦/١٠/١٨) */
.cn-tries{display:inline-flex;align-items:baseline;gap:.25em;margin-inline-start:.5em;padding:.1em .6em;border-radius:99px;font-size:.62em;background:rgba(255,210,122,.16);border:2px solid #ffd27a;color:#ffe7b0;vertical-align:middle}
.cn-tries b{font-size:1.35em;color:#fff}

.cn-stage{flex:1 1 auto;min-height:0;display:flex;gap:1.4cqw}
.cn-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.2cqh}
/* الطاولة */
.cn-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:1.1cqh .8cqw;
  padding:1.4cqh 1cqw;border-radius:2cqh;background:linear-gradient(160deg,#3a2616,#24170d);box-shadow:inset 0 0 0 .5cqh #5a3a22,inset 0 0 6cqh rgba(0,0,0,.55),0 2cqh 4cqh rgba(0,0,0,.5);perspective:900px}

/* البطاقة: ملفّ سرّي — وجهين */
.cn-c{position:relative;min-height:0;animation:cnDeal .5s calc(var(--i) * 25ms) both cubic-bezier(.2,1.2,.4,1)}
@keyframes cnDeal{from{opacity:0;transform:translateY(-3cqh) rotate(-4deg)}}
.cn-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.cn-c.o .cn-in{transform:rotateY(180deg)}
.cn-c.o:not(.flip) .cn-in{transition:none}
.cn-c.flip .cn-in{animation:cnTurn .9s cubic-bezier(.3,1.25,.5,1) both}
@keyframes cnTurn{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(90deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}
.cn-f,.cn-k{position:absolute;inset:0;border-radius:1.1cqh;backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* الوجه: مانيلا بشريط سرّي ومشبك */
.cn-f{background:linear-gradient(170deg,#f6e3b4,#e2c88c);color:#2a1d0c;box-shadow:inset 0 -.6cqh 0 rgba(120,80,20,.25),0 .5cqh 1cqh rgba(0,0,0,.45)}
.cn-f::before{content:"";position:absolute;top:0;right:12%;width:30%;height:14%;border-radius:0 0 .6cqh .6cqh;background:#d6b673}
.cn-f::after{content:"سرّي";position:absolute;bottom:6%;left:-6%;transform:rotate(-14deg);padding:0 .8em;font-size:max(8px,1.25cqh);font-weight:900;color:rgba(178,34,52,.45);border:2px solid rgba(178,34,52,.4);border-radius:.3em}
.cn-f i{position:absolute;top:.5cqh;left:.7cqh;font-style:normal;font-weight:900;font-size:max(11px,1.9cqh);color:#7a5a24}
.cn-f b{font-size:max(15px,3.4cqh);font-weight:900;line-height:1.1;text-align:center;padding:0 .4em;z-index:1}
.cn-f em{position:absolute;bottom:.4cqh;right:.5cqh;display:flex;align-items:center;gap:.2em;font-style:normal;z-index:2}
.cn-f em .av{width:max(16px,2.6cqh)!important;height:max(16px,2.6cqh)!important;font-size:max(9px,1.3cqh)!important;margin-inline-start:-.6cqh;box-shadow:0 0 0 2px #fff}
.cn-f em u{text-decoration:none;min-width:1.5em;text-align:center;border-radius:99px;background:#c2304f;color:#fff;font-weight:900;font-size:max(12px,2cqh);padding:0 .3em}
.cn-c.vt .cn-f{outline:.45cqh solid #ffcf4a;outline-offset:-.45cqh;animation:cnVote 1.2s ease-in-out infinite}
@keyframes cnVote{50%{transform:translateY(-.4cqh)}}
/* الظهر: صورة اللي ورا الملفّ */
.cn-k{transform:rotateY(180deg);gap:.2cqh;padding-top:.6cqh}
.cn-k svg{height:58%;width:auto;filter:drop-shadow(0 .6cqh .6cqh rgba(0,0,0,.35))}
.cn-k b{font-size:max(12px,2.3cqh);font-weight:900;line-height:1}
.cn-k small{font-size:max(9px,1.4cqh);font-weight:900;opacity:.85}
.cn-k.b{background:radial-gradient(120% 90% at 50% 20%,#5c9bff,#1d3f9c);color:#fff}
.cn-k.r{background:radial-gradient(120% 90% at 50% 20%,#ff7a80,#9c1d2a);color:#fff}
.cn-k.n{background:radial-gradient(120% 90% at 50% 20%,#e9dfc6,#b3a688);color:#3a3326}
.cn-k.x{background:radial-gradient(120% 90% at 50% 30%,#3a1016,#050508);color:#ff6b75;box-shadow:inset 0 0 0 .5cqh #ff4d5d}
.cn-c.o.x .cn-k{animation:cnBoom .6s 2}
@keyframes cnBoom{50%{box-shadow:inset 0 0 0 .5cqh #ffcf4a,0 0 4cqh #ff4d5d}}
.cn-by{position:absolute;top:.4cqh;right:.4cqh}
.cn-by .av{width:max(18px,3cqh)!important;height:max(18px,3cqh)!important;box-shadow:0 0 0 2px #fff}
.cn-c.o:not(.flip) .cn-k{filter:saturate(.85) brightness(.92)}

/* أدوات الستريمر */
.cn-host{flex:0 0 auto;display:flex;gap:.8cqw;justify-content:center;align-items:center}
.cn-host input{width:28cqw;padding:1cqh 1cqw;border-radius:1.2cqh;border:2px solid rgba(255,214,140,.5);background:rgba(0,0,0,.4);color:#fff;font:900 max(15px,2.6cqh) Tajawal,sans-serif}
.cn-host select{padding:1cqh .8cqw;border-radius:1.2cqh;border:2px solid rgba(255,214,140,.5);background:#141a3a;color:#fff;font:900 max(15px,2.6cqh) Tajawal,sans-serif}
.cn-host button{padding:1cqh 1.6cqw;border-radius:1.2cqh;border:0;cursor:pointer;background:var(--gold);color:#2b1d00;font:900 max(15px,2.5cqh) Tajawal,sans-serif}
.cn-host button.ghost{background:rgba(255,255,255,.1);color:#fff}

/* لوحة الفريق */
.cn-team{flex:0 0 19cqw;display:flex;flex-direction:column;gap:1cqh;padding:1.4cqh .9cqw;border-radius:2cqh;min-height:0;overflow:hidden;opacity:.62;transition:opacity .4s,transform .4s,box-shadow .4s;
  background:linear-gradient(180deg,var(--tc1),var(--tc2));border:3px solid var(--tb)}
.cn-team.b{--tc1:#1c3477;--tc2:#0d1838;--tb:#4f8dff}
.cn-team.r{--tc1:#6e1823;--tc2:#2a0a10;--tb:#ff6b72}
.cn-team.now{opacity:1;transform:scale(1.02);box-shadow:0 0 0 .4cqh rgba(255,214,140,.5),0 0 5cqh var(--tb)}
.cn-team header{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.cn-team header > b{font-size:max(17px,3.2cqh);font-weight:900;color:#fff}
.cn-left{display:flex;align-items:baseline;gap:.25em}
.cn-left b{font-size:max(26px,6cqh);font-weight:900;line-height:1;color:#ffd27a}
.cn-left small{font-size:max(11px,1.8cqh);font-weight:900;color:#dfe6ff}
.cn-agents{display:flex;flex-wrap:wrap;gap:.3cqh .2cqw;justify-content:center}
.cn-agents i{width:max(20px,1.9cqw);height:max(24px,2.3cqw);display:block;opacity:.3;filter:grayscale(.8)}
.cn-agents i.got{opacity:1;filter:none}
.cn-agents svg{width:100%;height:100%}
.cn-team ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6cqh;min-height:0;overflow:hidden;flex:1}
.cn-p{position:relative;display:flex;align-items:center;gap:.5em;padding:.5cqh .5cqw;border-radius:1.2cqh;background:rgba(255,255,255,.08);overflow:hidden;isolation:isolate;
  font-size:max(13px,2.1cqh);font-weight:900;color:#fff;min-height:5.8cqh}
.cn-p.has-bn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bn) center var(--bny,50%)/cover}
.cn-p.has-bn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.78))}
.cn-p .av{width:max(22px,3.8cqh)!important;height:max(22px,3.8cqh)!important;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.cn-p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cn-p em{font-style:normal;font-size:.85em;padding:0 .4em;border-radius:99px;background:#3ee08f;color:#06301c}
.cn-more{text-align:center;color:#dfe6ff;font-weight:900}
.cn-team p{margin:0;text-align:center;font-size:max(11px,1.7cqh);font-weight:800;color:#dfe6ff}

@media (max-aspect-ratio: 1/1){
  .cn-stage{flex-direction:column}
  .cn-team{flex:0 0 auto;max-height:18cqh}
  .cn-team ol{flex-direction:row;flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){ .cn-c,.cn-in,.cn-c.vt .cn-f{animation:none!important;transition:none!important} }

/* «كيف تنلعب؟» الخاصّة (قسمين: الستريمر والمتابعين) */
.cn-how .hg-card{width:min(1040px,95vw)}
.cnh-idea{margin:0;font-size:clamp(16px,2.3vh,22px);font-weight:800;line-height:1.6;text-align:center}
.cnh-idea b{color:var(--jw,#ffd54a)}
.cnh-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,20px)}
.cnh-s{display:flex;flex-direction:column;gap:10px;padding:clamp(12px,2vh,18px);border-radius:20px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12)}
.cnh-s h3{margin:0;font-size:clamp(18px,2.6vh,24px);font-weight:900}
.cnh-s ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cnh-s li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(14px,2vh,18px);font-weight:800;line-height:1.5}
.cnh-s li em{font-style:normal;flex:0 0 auto;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:#c2304f;color:#fff;font-weight:900}
.cnh-s li b{color:var(--jw,#ffd54a)}
.cnh-qr{display:flex;align-items:center;gap:12px;margin-top:auto;padding:8px;border-radius:14px;background:#fff;color:#14102b;font-weight:900;width:fit-content}
.cnh-qr canvas{display:block;width:clamp(84px,12vh,120px);height:auto;image-rendering:pixelated}
.cnh-qr span{direction:ltr}
.cnh-ex{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:14px;background:linear-gradient(160deg,#f6e3b4,#e2c88c);color:#2a1d0c}
.cnh-ex small{font-weight:900;color:#7a5a24}
.cnh-ex b{font-size:clamp(17px,2.4vh,22px);font-weight:900}
.cnh-ex span{font-weight:800}
.cnh-ex u{text-decoration:none;padding:0 .3em;border-radius:.3em;background:#2a56c4;color:#fff}
@media (max-width:720px){ .cnh-cols{grid-template-columns:1fr} }
.cnh-key{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(255,214,140,.12);border:2px dashed rgba(255,214,140,.5)}
.cnh-key b{direction:ltr;text-align:right;font-size:clamp(17px,2.4vh,22px);color:#ffd54a}
.cnh-key small{font-weight:800;opacity:.85}

/* ═══ (٢٠٢٦/١٠/١٩) شرح مبسّط + انضمام بالفريقين ═══ */
.cn-how .hg-card.cnh-simple{width:min(760px,94vw)}
.cnh-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cnh-steps li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(17px,2.5vh,23px);font-weight:800;line-height:1.55}
.cnh-steps em{flex:0 0 auto;font-style:normal;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f3e6c4;color:#2a1d0c;font-weight:900}
.cnh-link{direction:ltr;unicode-bidi:isolate;padding:2px 10px;border-radius:8px;background:#f3e6c4;color:#2a1d0c!important}
.cnh-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cnh-rules li{display:flex;gap:12px;align-items:center;font-size:clamp(17px,2.6vh,24px);font-weight:800;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.cnh-rules i{font-style:normal;font-size:1.4em}
/* الانضمام: ملفّين — الأزرق والأحمر */
.lobby.cn-tl .cn-jw{font-style:normal;padding:0 .3em;border-radius:.2em}
.lobby.cn-tl .cn-jw.b{color:#5aa2ff}
.lobby.cn-tl .cn-jw.r{color:#ff5a6a}
.cn-tj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,22px);width:100%;margin-top:8px}
.cn-tjt{display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px;border-radius:6px;background:#efe2c0;color:#2a1d0c;box-shadow:0 10px 24px rgba(0,0,0,.4);position:relative;
  border-top:10px solid var(--tc)}
.cn-tjt.b{--tc:#3d7bff;transform:rotate(-.6deg)}
.cn-tjt.r{--tc:#e63a4c;transform:rotate(.6deg)}
.cn-tjt header{display:flex;justify-content:space-between;align-items:center;font-size:clamp(18px,2.6vh,26px);font-weight:900}
.cn-tjt header em{font-style:normal;min-width:44px;text-align:center;padding:2px 10px;border-radius:99px;background:var(--tc);color:#fff}
.cn-tjt p{margin:0;font-size:clamp(15px,2.1vh,20px);font-weight:800}
.cn-tjt p b{color:var(--tc)}
.cn-tjl{display:flex;flex-wrap:wrap;gap:6px;min-height:44px}
.cn-tjp{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:rgba(0,0,0,.08);font-weight:800;font-size:clamp(13px,1.8vh,17px)}
.cn-tjp .av{width:30px!important;height:30px!important;font-size:15px!important}
.cn-tjp.more{padding:4px 12px}
.cn-tje{font-style:normal;opacity:.6;font-weight:800}

/* ── وضع الجواسيس (٢٠٢٦/١٠/٢٨): شاشة «مين جاسوس كلّ فريق؟» فوق اللوحة ── */
.cn-mid{position:relative}
.cn-spyp{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(8,10,24,.82);border-radius:2cqh}
.cn-spyc{width:min(96%,120cqh);display:grid;gap:2cqh;justify-items:center;text-align:center;padding:3cqh 3cqw;border-radius:2.4cqh;
  background:linear-gradient(180deg,#f3e7c8,#e3d1a4);color:#2a1c06;box-shadow:0 2cqh 5cqh rgba(0,0,0,.5),inset 0 0 0 .5cqh rgba(120,80,20,.35)}
.cn-spyc h3{font-size:5cqh;font-weight:900;margin:0}
.cn-spyc>p{font-size:2.8cqh;font-weight:800;margin:0}
.cn-spyt{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;width:100%}
.cn-spyt section{border-radius:1.8cqh;padding:1.6cqh;background:rgba(255,255,255,.55);box-shadow:inset 0 .6cqh 0 var(--tc)}
.cn-spyt section.b{--tc:#2f6fd0}.cn-spyt section.r{--tc:#d8343c}
.cn-spyt header{font-size:3cqh;font-weight:900;color:var(--tc);margin-bottom:1cqh}
.cn-spyt section>div{display:grid;justify-items:center;gap:.6cqh;min-height:14cqh;align-content:center}
.cn-spyt section>div .av{width:9cqh !important;height:9cqh !important;font-size:4cqh !important}
.cn-spyt section>div b{font-size:3cqh;font-weight:900}
.cn-spyt section>div i{font-style:normal;font-size:2.4cqh;font-weight:800;opacity:.6}
.cn-spyt em{font-style:normal;font-size:2.2cqh;font-weight:900;padding:.3cqh 1.4cqh;border-radius:99px;background:rgba(0,0,0,.12)}
.cn-spyt em.ok{background:#2fb56a;color:#fff}
.cn-spyq{display:flex;align-items:center;gap:2cqw;padding:1.4cqh 2cqw;border-radius:1.6cqh;background:#fff;text-align:right}
.cn-spyq canvas{width:16cqh !important;height:16cqh !important;display:block;image-rendering:pixelated}
.cn-spyq b{display:block;font-size:2.8cqh;font-weight:900}
.cn-spyq u{display:block;font-size:3.2cqh;font-weight:900;text-decoration:none;color:#1d4fae;direction:ltr;text-align:right}
.cn-spyq small{display:block;font-size:2.2cqh;font-weight:800;opacity:.75}
.cn-p.spy{outline:.35cqh solid #ffcb5b;outline-offset:-.35cqh}
.cn-spyb{font-style:normal;background:#ffcb5b;color:#2a1600 !important;padding:0 1cqh;border-radius:99px;font-size:1.8cqh !important}
.cn-spyn{color:#ffcb5b}