/* ============================================================
   جلسة — الطبقة الثانية: ألعاب جديدة · شريط جانبي · بوّابة · مؤشر
   ملف مستقلّ ويُحمّل **بعد** style.css عمداً، عشان ما نقع في فخّ
   ترتيب المصدر (كتلة @media في آخر الملف الأول كانت تغلب أي شي بعدها).
   ============================================================ */

/* ---------- ثيمات الألعاب الجديدة ---------- */
html[data-theme="mafia"] {
  --bg: #070506; --bg2: #150d0e; --panel: rgba(34, 20, 21, 0.44); --line: rgba(176, 36, 43, 0.32);
  --ink: #f1e4cd; --muted: #bda98c;
  --acc: #c9353c; --acc2: #d8c9a8; --glow: rgba(201, 53, 60, 0.45);
  --ok: #8fd6a0; --no: #ff6b6b;
}
html[data-theme="seen"] {
  --bg: #0b0703; --bg2: #1d1206; --panel: rgba(48, 30, 12, 0.42); --line: rgba(201, 139, 46, 0.32);
  --ink: #f7e9cd; --muted: #cfae7b;
  --acc: #d79a35; --acc2: #8a5a24; --glow: rgba(215, 154, 53, 0.45);
  --ok: #84dda1; --no: #e8776b;
}
html[data-theme="code"] {
  --bg: #060606; --bg2: #141010; --panel: rgba(30, 20, 20, 0.44); --line: rgba(224, 64, 47, 0.3);
  --ink: #efe5d4; --muted: #b3a894;
  --acc: #e0402f; --acc2: #d8cbb2; --glow: rgba(224, 64, 47, 0.42);
  --ok: #7ed3a0; --no: #ff6b6b;
}
html[data-theme="pick"] {
  --bg: #0a0803; --bg2: #1b1408; --panel: rgba(44, 32, 12, 0.42); --line: rgba(212, 175, 55, 0.34);
  --ink: #faeecd; --muted: #d0b981;
  --acc: #e0bb3c; --acc2: #22c55e; --glow: rgba(224, 187, 60, 0.45);
  --ok: #37d67a; --no: #ff7a6b;
}
html[data-theme="emoji"] {
  --bg: #0a0616; --bg2: #170e2c; --panel: rgba(35, 20, 62, 0.44); --line: rgba(139, 92, 246, 0.34);
  --ink: #f2eaff; --muted: #bfaee6;
  --acc: #9a6cf7; --acc2: #e0b32a; --glow: rgba(154, 108, 247, 0.48);
  --ok: #7dffb0; --no: #ff6b8a;
}
html[data-theme="updown"] {
  --bg: #080703; --bg2: #171207; --panel: rgba(42, 33, 12, 0.42); --line: rgba(245, 197, 66, 0.32);
  --ink: #fbf0d2; --muted: #d3bb7d;
  --acc: #f5c542; --acc2: #8a6a12; --glow: rgba(245, 197, 66, 0.45);
  --ok: #6ee7a0; --no: #ff7a6b;
}

html[data-theme="mafia"] .scene .scn[data-for="mafia"],
html[data-theme="seen"] .scene .scn[data-for="seen"],
html[data-theme="code"] .scene .scn[data-for="code"],
html[data-theme="pick"] .scene .scn[data-for="pick"],
html[data-theme="emoji"] .scene .scn[data-for="emoji"],
html[data-theme="updown"] .scene .scn[data-for="updown"] { display: block; animation: scIn .8s ease both }

/* ---------- مشهد المافيا ---------- */
.scn[data-for="mafia"] { background: radial-gradient(90% 70% at 50% 4%, #1a1113, #070506 68%) }
.mskyline {
  position: absolute; left: -5%; right: -5%; bottom: 18vh; height: 46vh; opacity: .85;
  background: repeating-linear-gradient(90deg, transparent 0 26px, #0d0a0b 26px 86px, transparent 86px 104px, #100c0d 104px 176px);
  mask-image: linear-gradient(to top, #000 30%, transparent); -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
  animation: drift 60s ease-in-out infinite;
}
.mskyline.b2 { bottom: 22vh; height: 60vh; opacity: .5; filter: blur(1px); animation-duration: 80s; animation-direction: reverse }
.mlamp {
  position: absolute; left: 16%; top: -4vh; width: 44vh; height: 80vh; margin-left: -22vh;
  background: linear-gradient(to bottom, rgba(232, 200, 140, .2), rgba(232, 200, 140, .05) 46%, transparent 82%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: flick 3.6s ease-in-out infinite;
}
.msmoke { position: absolute; width: 66vh; height: 66vh; border-radius: 50%; filter: blur(60px); opacity: .13 }
.msmoke.a { background: #c9353c; left: 4%; bottom: -22vh; animation: float 30s ease-in-out infinite }
.msmoke.b { background: #d8c9a8; right: 6%; top: -16vh; opacity: .08; animation: float 40s ease-in-out infinite reverse }
.mhat { position: absolute; top: 12vh; left: 50%; width: min(30vw, 300px); margin-left: calc(min(30vw, 300px) / -2); opacity: .5 }
.mhat svg {
  width: 100%; fill: #0b0708; stroke: rgba(216, 201, 168, .45); stroke-width: 2; display: block;
  filter: drop-shadow(0 0 30px rgba(201, 53, 60, .35)); animation: crownFloat 8s ease-in-out infinite;
}
.bullet {
  position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #000 34%, rgba(216, 201, 168, .35) 40%, transparent 72%);
  box-shadow: 0 0 0 2px rgba(216, 201, 168, .16); animation: twk 5s ease-in-out infinite; animation-delay: var(--d);
}
.mfloor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24vh;
  background: linear-gradient(to top, rgba(14, 10, 11, .96), transparent); border-top: 1px solid rgba(201, 53, 60, .14);
}

/* ---------- مشهد سين جيم ---------- */
.scn[data-for="seen"] { background: radial-gradient(80% 60% at 50% 4%, #2a1c07, #0b0703 70%) }
.beam {
  position: absolute; top: 6vh; width: 40vh; height: 84vh;
  background: linear-gradient(to bottom, rgba(255, 205, 110, .2), transparent 76%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: flick 4s ease-in-out infinite;
}
.beam.l { left: 12% }
.beam.r { right: 12%; animation-delay: -1.6s }
.filmstrip {
  position: absolute; left: -10%; right: -10%; height: 74px; opacity: .5;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(215, 154, 53, .28) 18px 30px, transparent 30px 60px),
    linear-gradient(rgba(20, 13, 4, .9), rgba(20, 13, 4, .9));
  border-block: 2px solid rgba(215, 154, 53, .3); animation: strip 22s linear infinite;
}
.filmstrip.top { top: 8vh; transform: rotate(-4deg) }
.filmstrip.bot { bottom: 12vh; transform: rotate(3deg); animation-direction: reverse }
@keyframes strip { to { background-position: 600px 0, 0 0 } }
.reel { position: absolute; top: 50%; left: 50%; width: min(46vh, 46vw); height: min(46vh, 46vw); transform: translate(-50%, -50%); opacity: .22 }
.reel svg { width: 100%; height: 100%; fill: none; stroke: rgba(215, 154, 53, .6); stroke-width: 3; animation: spinSlow 40s linear infinite }
.seats {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(120, 20, 20, .4) 40px 96px);
  mask-image: linear-gradient(to top, #000, transparent); -webkit-mask-image: linear-gradient(to top, #000, transparent);
}

/* ---------- مشهد Codenames ---------- */
.scn[data-for="code"] { background: radial-gradient(80% 62% at 50% 6%, #171010, #060606 70%) }
.worldgrid {
  position: absolute; inset: 0; opacity: .1;
  background-image: linear-gradient(rgba(224, 64, 47, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 64, 47, .5) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(110% 80% at 50% 30%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 30%, #000, transparent 76%);
}
.routes {
  position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(224, 64, 47, .35); stroke-width: 1.4;
  stroke-dasharray: 5 9; animation: dash 22s linear infinite;
}
.grid25 {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: min(48vh, 48vw); opacity: .28;
}
.grid25 i {
  aspect-ratio: 1.5/1; border-radius: 4px; border: 1px solid rgba(216, 203, 178, .4);
  background: rgba(216, 203, 178, .07); animation: cellPulse 5s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes cellPulse { 0%, 100% { background: rgba(216, 203, 178, .05) } 42% { background: rgba(224, 64, 47, .22) } }

/* ---------- مشهد اختار الصح ---------- */
.scn[data-for="pick"] { background: radial-gradient(80% 60% at 50% 0%, #2a2007, #0a0803 70%) }
.spot {
  position: absolute; top: -6vh; width: 52vh; height: 96vh;
  background: linear-gradient(to bottom, rgba(255, 220, 120, .18), transparent 74%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: swingGo 8s ease-in-out infinite; transform-origin: 50% 0;
}
.spot.l { left: 14% }
.spot.r { right: 14%; animation-delay: -3s }
.podium {
  position: absolute; left: 50%; bottom: 8vh; width: min(52vw, 620px); height: 16vh; margin-left: calc(min(52vw, 620px) / -2);
  border-radius: 50%/28% 28% 72% 72%;
  background: radial-gradient(ellipse at 50% 30%, rgba(224, 187, 60, .28), transparent 70%); filter: blur(2px);
}
.abcd { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; gap: clamp(14px, 3vw, 40px) }
.abcd b {
  font: 900 clamp(26px, 4.4vw, 64px)/1 'Reem Kufi', serif; color: rgba(224, 187, 60, .34);
  text-shadow: 0 0 30px rgba(224, 187, 60, .35); animation: bob 6s ease-in-out infinite;
}
.abcd b:nth-child(2) { animation-delay: -1.4s }
.abcd b:nth-child(4) { animation-delay: -2.8s }
.abcd b.ok { color: rgba(34, 197, 94, .6); text-shadow: 0 0 40px rgba(34, 197, 94, .5) }
.sparks {
  position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1.6px 1.6px at 20% 30%, #e0bb3c, transparent), radial-gradient(1.3px 1.3px at 62% 22%, #e0bb3c, transparent),
    radial-gradient(1.8px 1.8px at 78% 58%, #e0bb3c, transparent), radial-gradient(1.2px 1.2px at 34% 72%, #e0bb3c, transparent);
  animation: twk 3.4s ease-in-out infinite;
}

/* ---------- مشهد الإيموجي ---------- */
.scn[data-for="emoji"] { background: radial-gradient(80% 62% at 50% 6%, #1d1039, #0a0616 70%) }
.qrain { position: absolute; inset: 0 }
.qrain i {
  position: absolute; left: var(--x); top: -10%; font: 900 clamp(30px, 5vw, 72px)/1 'Reem Kufi', serif;
  color: rgba(154, 108, 247, .22); font-style: normal; animation: qfall 9s linear infinite; animation-delay: var(--d);
}
@keyframes qfall { to { top: 110%; transform: rotate(220deg) } }
.bubbleq {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  width: min(30vh, 30vw); height: min(30vh, 30vw); border-radius: 34% 66% 58% 42%/48% 38% 62% 52%;
  border: 2px solid rgba(154, 108, 247, .4); display: grid; place-items: center;
  background: rgba(154, 108, 247, .06); animation: float 16s ease-in-out infinite;
}
.bubbleq span { font: 900 clamp(40px, 6vw, 92px)/1 'Reem Kufi', serif; color: rgba(224, 179, 42, .5); text-shadow: 0 0 34px rgba(154, 108, 247, .6) }
.eglow {
  position: absolute; left: 50%; bottom: -20vh; width: 80vw; height: 60vh; margin-left: -40vw;
  background: radial-gradient(ellipse at 50% 40%, rgba(154, 108, 247, .22), transparent 70%); animation: flick 5s ease-in-out infinite;
}

/* ---------- مشهد أعلى أو أقل ---------- */
.scn[data-for="updown"] { background: radial-gradient(80% 60% at 50% 4%, #241a06, #080703 70%) }
.cardfall { position: absolute; inset: 0 }
.cardfall i {
  position: absolute; left: var(--x); top: -20%; width: clamp(52px, 6vw, 88px); aspect-ratio: 2/3; border-radius: 7px;
  border: 1px solid rgba(245, 197, 66, .4); background: linear-gradient(150deg, rgba(30, 22, 6, .9), rgba(12, 9, 3, .9));
  box-shadow: 0 14px 30px -14px #000; transform: rotate(var(--r)); animation: cfall 13s linear infinite; animation-delay: var(--d);
}
@keyframes cfall { to { top: 115%; transform: rotate(calc(var(--r) + 260deg)) } }
.arrows { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: clamp(20px, 6vw, 90px); opacity: .3 }
.arrows b { font: 900 clamp(50px, 9vw, 140px)/1 sans-serif; color: var(--acc); text-shadow: 0 0 40px var(--glow) }
.arrows .up { animation: upA 3.4s ease-in-out infinite }
.arrows .dn { animation: dnA 3.4s ease-in-out infinite }
@keyframes upA { 50% { transform: translateY(-22px) } }
@keyframes dnA { 50% { transform: translateY(22px) } }
.chips {
  position: absolute; left: 0; right: 0; bottom: 6vh; height: 22vh; opacity: .4;
  background: repeating-radial-gradient(circle at 12% 60%, rgba(245, 197, 66, .3) 0 26px, transparent 27px 60px);
  mask-image: linear-gradient(to top, #000, transparent); -webkit-mask-image: linear-gradient(to top, #000, transparent);
}
.felt { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: linear-gradient(to top, rgba(18, 13, 4, .95), transparent) }

/* ============ الشريط الجانبي — يمشي معك في كل مكان ============ */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 150; width: 76px;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 10px;
  background: linear-gradient(to left, color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 30%, transparent));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  /* الشريط على اليسار فيزيائياً — فالخصائص هنا فيزيائية لا منطقية.
     الصفحة RTL، و`inline-start` فيها = اليمين، فيصير الإزاحة في الجهة الغلط. */
  border-right: 1px solid var(--line);
  transition: width .22s cubic-bezier(.3, 1, .4, 1); overflow: hidden;
}
.rail:hover, .rail:focus-within { width: 214px; box-shadow: 14px 0 50px -20px #000 }
.rail a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  color: var(--muted); font-weight: 800; font-size: 16px; white-space: nowrap; border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s, transform .16s; position: relative; flex: 0 0 auto;
}
.rail a .ni { width: 24px; height: 24px; flex: 0 0 auto }
.rail a span { opacity: 0; transform: translateX(8px); transition: opacity .18s, transform .18s }
.rail:hover a span, .rail:focus-within a span { opacity: 1; transform: none }
.rail a:hover { color: var(--ink); background: color-mix(in srgb, var(--acc) 14%, transparent); border-color: var(--line) }
.rail a.on { color: #0b0710; background: var(--acc); box-shadow: 0 6px 22px -6px var(--glow) }
html[data-theme="fib"] .rail a.on, html[data-theme="know"] .rail a.on, html[data-theme="emoji"] .rail a.on,
html[data-theme="code"] .rail a.on, html[data-theme="mafia"] .rail a.on { color: #fff }
.rail a .dot-new { position: absolute; top: 9px; left: 34px }
.rail-room {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px dashed var(--acc); color: var(--acc); white-space: nowrap; overflow: hidden;
}
.rail-room i { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); flex: 0 0 auto; animation: pulse 1.4s infinite }
/* الرمز ستة أرقام — ما يبان إلا والشريط مفتوح، وإلا انقصّ */
.rail-room b { font-family: 'Reem Kufi', sans-serif; font-size: 19px; letter-spacing: 2px; opacity: 0; transition: opacity .18s; white-space: nowrap }
.rail-room small { opacity: 0; font-size: 12px; color: var(--muted); transition: opacity .18s }
.rail:hover .rail-room b, .rail:hover .rail-room small, .rail:focus-within .rail-room b { opacity: 1 }
/* الشريط يسار الشاشة فيزيائياً — الحشوة لازم تكون يسار كمان، لا `inline-start` */
main, .top { padding-left: 96px }
/* الفانوس الزخرفي يقعد يسار البطل — نمنع الكلام يمشي فوقه */
@media (min-width: 821px) { .hero { padding-left: clamp(150px, 15vw, 230px) } }

@media (max-width: 900px) {
  .rail {
    top: auto; bottom: 0; right: 0; width: auto; height: 64px; flex-direction: row; gap: 2px; padding: 6px 8px;
    border-inline-end: 0; border-top: 1px solid var(--line); overflow-x: auto; justify-content: space-between;
  }
  .rail:hover, .rail:focus-within { width: auto }
  .rail a { flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 11px; border-radius: 11px }
  .rail a span { opacity: 1; transform: none; font-size: 11px }
  .rail a .ni { width: 20px; height: 20px }
  .rail a .dot-new { left: auto; right: 6px; top: 4px }
  .rail-room { margin: 0; padding: 6px 10px; flex-direction: column; gap: 0 }
  .rail-room small { display: none }
  main, .top { padding-left: clamp(16px, 4vw, 44px) }
  main { padding-bottom: 96px }
}

/* ============ بوّابة الدخول: ما فيه محتوى قبل التسجيل ============ */
html[data-gate="on"] .rail { display: none }
.gate { min-height: 74vh; display: grid; place-items: center; padding: 20px 0 }
.gate-card {
  width: min(560px, 94vw); text-align: center; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius: 28px; padding: clamp(26px, 5vw, 48px); background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px #000, 0 0 60px -30px var(--glow); animation: gateIn .5s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes gateIn { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }
.gate-mark {
  width: clamp(90px, 14vw, 140px); margin: 0 auto 6px; color: var(--acc); filter: drop-shadow(0 0 22px var(--glow));
  animation: lampGlow 3.6s ease-in-out infinite;
}
.gate-t {
  font-family: 'Lalezar', cursive; font-size: clamp(52px, 10vw, 96px); line-height: 1.1; margin: 0; font-weight: 400; color: #efe3c7;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--acc) 70%, transparent);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .6), 0 0 34px var(--glow);
}
.gate-sub { font-size: clamp(16px, 2vw, 20px); color: var(--ink); opacity: .9; font-weight: 700; margin: 2px 0 10px }
.gate-p { font-size: 16px; color: var(--muted); line-height: 1.95; font-weight: 600; margin: 14px 0 22px }

/* ============ أنيميشن الدخول — سريع، يشتغل مرّة ============ */
.intro { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; background: var(--bg) }
.intro.go { display: grid; animation: introOut .95s cubic-bezier(.6, 0, .2, 1) forwards }
.intro-in { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--acc) }
.intro-mark { width: 76px; height: 76px; filter: drop-shadow(0 0 26px var(--glow)); animation: introMark .95s cubic-bezier(.2, 1.4, .4, 1) both }
.intro-t {
  font-family: 'Lalezar', cursive; font-size: 64px; line-height: 1.1; color: var(--acc);
  text-shadow: 0 0 40px var(--glow); animation: introTxt .95s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes introMark { 0% { opacity: 0; transform: scale(.4) rotate(-40deg) } 55%, 100% { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes introTxt { 0% { opacity: 0; transform: translateY(16px); letter-spacing: 14px } 60%, 100% { opacity: 1; transform: none; letter-spacing: 1px } }
@keyframes introOut { 0%, 62% { opacity: 1; clip-path: circle(150% at 50% 50%) } 100% { opacity: 0; clip-path: circle(0% at 50% 50%) } }

/* انتقال سريع مرة بين الصفحات */
.fade { animation: fadeUp .22s cubic-bezier(.2, 1, .3, 1) both }

/* ============ المؤشر الجديد ============ */
.cur-ring { border: 0 !important; background: none; transition: width .16s, height .16s, margin .16s, opacity .16s }
.cur-ring .arc, .cur-ring .blade { position: absolute; inset: 0; display: none }
.cur-trail {
  position: fixed; z-index: 998; pointer-events: none; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); opacity: .45; will-change: transform;
}
html[data-cursor="off"] .cur-trail { display: none }
html[data-cur-skin="flame"] .cur-ring .arc {
  display: block; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--acc); border-right-color: var(--acc);
}
html[data-cur-skin="flame"] .cur-ring .a2 {
  inset: 7px; border-top-color: transparent; border-right-color: transparent;
  border-bottom-color: var(--acc2); border-left-color: var(--acc2); opacity: .85;
}
html[data-cur-skin="ring"] .cur-ring { border: 2px solid var(--acc) !important; border-radius: 50% }
html[data-cur-skin="blade"] .cur-ring .blade {
  display: block; background: linear-gradient(180deg, var(--acc), transparent 72%);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
html[data-cur-skin="double"] .cur-ring { border: 2px solid var(--acc) !important; border-radius: 4px }
html[data-cur-skin="double"] .cur-ring::after { content: ''; position: absolute; inset: -8px; border: 1px solid var(--acc); opacity: .45; border-radius: 6px }
html[data-cur-skin="crown"] .cur-ring { border: 2px dashed var(--acc) !important; border-radius: 50% }
html[data-cur-skin="crown"] .cur-ring::after { content: ''; position: absolute; inset: -11px; border: 1px solid var(--acc); opacity: .4; border-radius: 50% }
.cur-ring.hot { filter: drop-shadow(0 0 12px var(--glow)) }

/* ============ بطاقات الألعاب: ميلان ٣D ودخول متتابع ============ */
.gcards, .gxs { perspective: 1400px }
.gcard {
  aspect-ratio: 3/4; transform-style: preserve-3d;
  animation: cardIn .5s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) rotateX(-12deg) scale(.94) } to { opacity: 1; transform: none } }
.gcard.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) scale(1.03);
  box-shadow: 0 40px 80px -30px var(--gc), 0 0 50px -16px var(--gc);
}
.gcard.tilt .gcard-img { transform: scale(1.08) translateZ(24px) }
.gcard-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gc) 42%, transparent), transparent 62%);
  mix-blend-mode: screen;
}
.gcard.tilt .gcard-glow { opacity: 1 }
.gcard-hid {
  position: absolute; z-index: 4; top: 10px; inset-inline-end: 10px; font-size: 12px; font-weight: 900;
  padding: 5px 11px; border-radius: 99px; background: var(--no); color: #fff; box-shadow: 0 6px 18px -6px #000;
}
.gx { animation: cardIn .5s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 55ms) }
.gx-img { aspect-ratio: 3/4; position: relative; transform-style: preserve-3d }
.gx.tilt .gx-img { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04) }
.gx-len { display: inline-block; font-size: 12.5px; font-weight: 900; padding: 4px 11px; border-radius: 99px; margin-bottom: 9px; border: 1px solid currentColor }
.gx-len.short { color: #7dd3fc }
.gx-len.long { color: var(--acc) }
.gx-img .gcard-shine {
  position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(72deg, transparent 42%, color-mix(in srgb, var(--gc) 42%, transparent) 50%, transparent 58%);
}
.gx:hover .gcard-shine { animation: shineGo .85s ease-out }

/* ============ خانة المخفيّ ============ */
.hidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px }
.hidcard {
  display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hidcard.off { border-color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--panel)) }
.hid-img {
  width: 54px; height: 72px; flex: 0 0 auto; border-radius: 9px; background-image: var(--gimg); background-size: cover;
  background-position: center; border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent);
}
.hidcard.off .hid-img { filter: grayscale(1) brightness(.7) }
.hid-b { flex: 1; min-width: 0 }
.hidcard .btn { flex: 0 0 auto }
.hid-b b { display: block; font-size: 17px; font-weight: 800 }
.hid-b i { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 700 }
.admincard.hid { border-color: var(--muted) }

/* ============ شاشة فتح الغرفة — الرمز على طول ============ */
.roomboot { min-height: 60vh; display: grid; place-items: center }
.rb-card {
  text-align: center; border: 1px solid var(--acc); border-radius: 26px; padding: clamp(24px, 4vw, 42px);
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px #000, 0 0 50px -24px var(--glow); animation: gateIn .35s ease both;
}
.rb-lbl { margin: 0; color: var(--muted); font-weight: 700 }
.rb-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.wrap-code.big { font-size: clamp(48px, 11vw, 92px); letter-spacing: 12px }
.dotlive { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); margin-inline-end: 6px; animation: pulse 1.2s infinite }

/* ============ اللوبي الجديد ============ */
.lob { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 16px; align-items: start }
@media (max-width: 1000px) { .lob { grid-template-columns: 1fr } }
.lobg-in { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 18px; align-items: start }
@media (max-width: 600px) { .lobg-in { grid-template-columns: 1fr } }
.lobg-img {
  aspect-ratio: 3/4; border-radius: 14px; position: relative; overflow: hidden; transform-style: preserve-3d;
  background-image: var(--gimg); background-size: cover; background-position: center;
  border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); box-shadow: 0 18px 40px -20px #000;
}
.lobg-b h3 { margin: 0 0 3px; font-size: 26px; color: var(--gc) }
.lobg-b p { margin: 8px 0 12px; font-size: 15px; line-height: 1.85; color: var(--muted); font-weight: 600 }
.lobg-empty { text-align: center; padding: 24px 10px }
.lobg-empty b { display: block; font-family: 'Reem Kufi', sans-serif; font-size: 24px; color: var(--acc); margin-bottom: 8px }
.lobfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px;
  border: 1px solid var(--line); border-radius: 20px; padding: 16px 22px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--acc) 12%, transparent), var(--panel) 60%);
}
.lobfoot-x b { font-family: 'Reem Kufi', sans-serif; font-size: 30px; color: var(--acc); display: block; line-height: 1.1 }
.lobfoot-x span { font-size: 14px; color: var(--muted); font-weight: 700 }
.gpickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 60vh; overflow: auto; padding: 4px }
.wide-sheet { width: min(760px, 94vw) }
.gpick {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; cursor: pointer; text-align: center;
  border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 50%, transparent); transition: .2s;
  animation: cardIn .35s ease both; animation-delay: calc(var(--i, 0) * 35ms);
}
.gpick:hover { transform: translateY(-4px); border-color: var(--gc); box-shadow: 0 18px 40px -20px var(--gc) }
.gpick.sel { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 18%, transparent) }
.gpick-img { width: 100%; aspect-ratio: 3/4; border-radius: 11px; background-image: var(--gimg); background-size: cover; background-position: center }
.gpick-b b { display: block; font-size: 15px; font-weight: 800 }
.gpick-b i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700 }

/* ============ الساحة الموزّعة — ما فيه عمود في النص ============
   القياس على عرض **المسرح** لا عرض الشاشة: المسرح داخل شبكة الغرفة
   (لاعبون + مسرح + شات)، فلو قسناه بالشاشة تطلع ثلاثة أعمدة في مساحة عمودين. */
.room { grid-template-columns: 264px minmax(0, 1fr) 300px }
main { max-width: 1620px }
.stage { container-type: inline-size }
.arena { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start }
@container (min-width: 540px) {
  .arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .arena .ar-c { grid-column: 1 / -1; order: -1 }
}
@container (min-width: 940px) {
  .arena { grid-template-columns: minmax(200px, .8fr) minmax(0, 1.7fr) minmax(200px, .8fr) }
  .arena .ar-c { grid-column: auto; order: 0 }
}
/* لو المتصفّح ما يدعم استعلامات الحاوية نرجع لعمودين على الشاشات الواسعة */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
    .arena .ar-c { grid-column: 1 / -1; order: -1 }
  }
}
@media (max-width: 1180px) { .room { grid-template-columns: 1fr } }
.ar-s { display: flex; flex-direction: column; gap: 12px }
.ar-s:empty { display: none }
.mtitle {
  font-family: 'Reem Kufi', sans-serif; font-size: clamp(22px, 3.2vw, 32px); margin: 0 0 14px; color: var(--acc);
  text-shadow: 0 0 26px var(--glow); text-align: center;
}

/* ---- المافيا ---- */
.mrole {
  border: 2px solid var(--rc); border-radius: 20px; padding: 18px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 20%, transparent), var(--panel) 70%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 40px -18px var(--rc);
}
.mrole-e { font-size: 44px; line-height: 1; display: block; margin-bottom: 6px }
.mrole b { display: block; font-family: 'Reem Kufi', sans-serif; font-size: 26px; color: var(--rc) }
.mrole i { font-style: normal; font-size: 14.5px; color: var(--ink); opacity: .9; line-height: 1.75; font-weight: 600 }
.mmates, .mknown { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px }
.mmates span, .mknown span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 800; margin-bottom: 6px }
.mmates b, .mknown b { display: block; font-size: 15px; font-weight: 800; color: var(--ink) }
.mknown b.bad { color: var(--no) }
.mknown b.ok { color: var(--ok) }
.mdeadtag {
  margin-top: 12px; padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--no) 22%, transparent);
  color: var(--no); font-weight: 900; font-size: 14px;
}
.mtargets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px }
.mtgt {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border-radius: 15px; cursor: pointer;
  border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 46%, transparent); transition: .18s; position: relative;
}
.mtgt:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 14px 30px -16px var(--glow) }
.mtgt.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, transparent) }
.mtgt b { font-size: 14.5px; font-weight: 800; text-align: center; word-break: break-word }
.mtgt-av {
  width: 46px; height: 46px; border-radius: 13px; background: var(--bg2) center/cover; display: grid; place-items: center;
  font-weight: 900; color: var(--acc); border: 1px solid var(--line);
}
.mtally {
  position: absolute; top: -8px; inset-inline-start: -8px; min-width: 24px; height: 24px; border-radius: 9px;
  background: var(--no); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center;
}
.mnight, .mday { position: relative; overflow: hidden }
.moon { position: absolute; top: -40px; inset-inline-end: -30px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(216, 201, 168, .3), transparent 66%) }
.sunrise { position: absolute; top: -60px; left: 50%; width: 340px; height: 200px; margin-left: -170px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 200, 90, .28), transparent 70%) }
.mnews {
  margin: 0 0 16px; padding: 16px; border-radius: 16px; text-align: center; font-weight: 900; font-size: 19px;
  border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
}
.mnews.bad { border-color: var(--no); background: color-mix(in srgb, var(--no) 16%, transparent); color: var(--no) }
.mgrave .mgr {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; margin-bottom: 7px;
  background: color-mix(in srgb, var(--bg2) 42%, transparent); border: 1px solid var(--line);
}
.mgr-e { font-size: 22px }
.mgr b { font-size: 15px; font-weight: 800 }
.mgr i { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 700; margin-inline-start: auto }
.mcount { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); font-weight: 700 }
.mcount b { color: var(--acc); font-family: 'Reem Kufi', sans-serif; font-size: 20px }
.pl.dead { opacity: .5; filter: grayscale(.7) }
.skull { color: var(--no); margin-inline-start: 5px }
.crownbtn {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 60%, transparent); color: var(--muted);
  opacity: 0; transition: .18s;
}
.pl:hover .crownbtn { opacity: 1 }
.crownbtn:hover { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 16px -4px var(--glow) }
.crownbtn svg { width: 17px; height: 17px }
.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px }
.rolec { border: 2px solid var(--rc); border-radius: 16px; padding: 14px 10px; text-align: center; background: color-mix(in srgb, var(--rc) 12%, transparent) }
.rolee { font-size: 30px; display: block }
.rolec b { display: block; font-size: 16px; font-weight: 800 }
.rolec i { font-style: normal; font-size: 13px; color: var(--rc); font-weight: 800 }
.rolec small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px }

/* ---- سين جيم ---- */
.tpanel { position: relative }
.tpanel.mine { border-color: var(--acc) }
.tpanel.turn { border-color: var(--acc); box-shadow: 0 0 40px -16px var(--glow) }
.tp-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px }
.tp-h b { font-family: 'Reem Kufi', sans-serif; font-size: 21px; color: var(--acc); flex: 1; min-width: 0 }
.tp-s { font-family: 'Reem Kufi', sans-serif; font-size: 40px; line-height: 1.1; color: var(--ink); font-weight: 700 }
.tp-s small { font-size: 13px; color: var(--muted); margin-inline-start: 6px; font-family: 'Tajawal', sans-serif }
.tm.me { border-color: var(--acc); color: var(--acc) }
.tp-pw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.pwchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 45%, transparent);
}
.pwchip i { font-style: normal }
.pwchip.used { opacity: .3; text-decoration: line-through }
.sboard { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 10px }
@media (max-width: 900px) { .sboard { grid-template-columns: repeat(3, 1fr) } }
.scol { display: flex; flex-direction: column; gap: 8px }
.scat { border-radius: 13px; padding: 10px 6px; text-align: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 12%, transparent); min-height: 74px }
.scat span { font-size: 22px; display: block; line-height: 1.2 }
.scat b { font-size: 13.5px; font-weight: 800; display: block; line-height: 1.4 }
.stile {
  border-radius: 12px; padding: 14px 4px; cursor: pointer; font-family: 'Reem Kufi', sans-serif; font-size: 22px;
  border: 2px solid var(--line); color: var(--acc); background: color-mix(in srgb, var(--bg2) 46%, transparent); transition: .18s;
}
.stile:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); border-color: var(--acc); box-shadow: 0 14px 30px -14px var(--glow) }
.stile.used, .stile:disabled { opacity: .32; cursor: not-allowed; color: var(--muted) }
.sq-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.sq-act { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.actchip {
  font-size: 13.5px; font-weight: 900; padding: 6px 13px; border-radius: 99px; border: 2px solid var(--acc); color: var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent); animation: pulse 1.6s infinite;
}
.sq-img { display: grid; place-items: center; margin-bottom: 14px }
.sq-img img { width: min(320px, 80%); aspect-ratio: 1/1; object-fit: cover; border-radius: 18px; border: 2px solid var(--line) }
.sq-audio { width: 100%; margin-bottom: 14px }
.sq-q { font-family: 'Reem Kufi', sans-serif; font-size: clamp(21px, 3.2vw, 32px); line-height: 1.6; margin: 0 0 18px; text-align: center; color: var(--ink) }
.sq-q.sm { font-size: clamp(17px, 2.2vw, 22px); color: var(--muted) }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 620px) { .qopts { grid-template-columns: 1fr } }
.qopt {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: right;
  border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 46%, transparent); transition: .18s; width: 100%;
}
.qopt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 14px 30px -16px var(--glow) }
.qopt b { font-size: 17px; font-weight: 800; flex: 1; min-width: 0 }
.qletter {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-weight: 900;
  background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); border: 1px solid var(--line);
}
.qopt.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 20%, transparent) }
.qopt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, transparent) }
.qopt.right .qletter { background: var(--ok); color: #062 }
.qopt.wrong { border-color: var(--no); background: color-mix(in srgb, var(--no) 18%, transparent) }
.qopt:disabled { cursor: default }
.pwbar { display: flex; flex-direction: column; gap: 9px }
.pwbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 15px; cursor: pointer;
  border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 46%, transparent); transition: .18s; text-align: right; position: relative;
}
.pwbtn:hover:not(.off) { transform: translateX(-4px); border-color: var(--acc); box-shadow: 0 10px 26px -14px var(--glow) }
.pwbtn.off { opacity: .38; cursor: not-allowed }
.pw-e { font-size: 24px }
.pwbtn b { font-size: 16px; font-weight: 900 }
.pwbtn i { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.6 }
.pw-on, .pw-x { position: absolute; top: 8px; inset-inline-start: 10px; font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 99px }
.pw-on { background: var(--acc); color: #0b0710 }
.pw-x { background: var(--no); color: #fff }
.stealcard { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; pointer-events: none; background: rgba(5, 3, 10, .6); opacity: 0; transition: opacity .25s }
.stealcard.go { opacity: 1 }
.stc {
  border: 3px solid var(--no); border-radius: 24px; padding: 32px 44px; text-align: center; background: var(--bg2);
  box-shadow: 0 0 80px -20px var(--no); transform: scale(.8) rotate(-6deg); transition: transform .35s cubic-bezier(.2, 1.5, .4, 1);
}
.stealcard.go .stc { transform: none }
.stc-e { font-size: 66px; display: block; line-height: 1 }
.stc b { display: block; font-family: 'Reem Kufi', sans-serif; font-size: 32px; color: var(--no); margin: 6px 0 4px }
.stc i { font-style: normal; color: var(--ink); font-weight: 700 }
.pickplayer .sheet { width: min(520px, 94vw) }

/* ---- Codenames ---- */
.cw-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.cgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px }
@media (max-width: 620px) { .cgrid { gap: 6px } }
.cw {
  position: relative; aspect-ratio: 1.55/1; border-radius: 12px; cursor: pointer; display: grid; place-items: center; padding: 4px;
  border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 55%, transparent); transition: .18s;
}
.cw b { font-size: clamp(11px, 1.35vw, 16px); font-weight: 800; text-align: center; line-height: 1.35; word-break: break-word }
.cw:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 12px 26px -14px var(--glow) }
.cw:disabled { cursor: default }
.cw.mkA { box-shadow: inset 0 0 0 3px #3b82f6 }
.cw.mkB { box-shadow: inset 0 0 0 3px #ef4444 }
.cw.mkn { box-shadow: inset 0 0 0 3px #9a8f7a }
.cw.mkx { box-shadow: inset 0 0 0 3px #000, inset 0 0 22px -4px #000 }
.cw.rev b { opacity: .9 }
.cw.rev.kA { background: #1d4ed8; border-color: #3b82f6; color: #fff }
.cw.rev.kB { background: #b91c1c; border-color: #ef4444; color: #fff }
.cw.rev.kn { background: #4a4336; border-color: #9a8f7a; color: #e8dcc4 }
.cw.rev.kx { background: #07070a; border-color: #000; color: #ff6b6b }
.cw-tag { position: absolute; top: 3px; inset-inline-start: 5px; font-style: normal; font-size: 13px }
.cw-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.clog { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 }
.clog .chip { font-size: 13px; padding: 6px 11px }

/* ---- المسابقات ---- */
.emobox {
  font-size: clamp(46px, 9vw, 96px); line-height: 1.25; text-align: center; letter-spacing: 10px; margin-bottom: 10px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); animation: bob 4s ease-in-out infinite;
}
.whowrap { display: flex; flex-wrap: wrap; gap: 7px }
.whochip {
  font-size: 13.5px; font-weight: 800; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 45%, transparent); color: var(--muted);
}
.whochip.on { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent) }
.minilb { display: flex; flex-direction: column; gap: 6px }
.mlb { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 11px; background: color-mix(in srgb, var(--bg2) 40%, transparent); border: 1px solid var(--line) }
.mlb b { font-size: 15px; font-weight: 800 }
.mlb span { font-family: 'Reem Kufi', sans-serif; font-size: 18px; color: var(--acc) }

/* ---- أعلى أو أقل ---- */
.udrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center }
@media (max-width: 620px) { .udrow { grid-template-columns: 1fr } }
.udcard { border: 2px solid var(--line); border-radius: 20px; padding: 22px 16px; text-align: center; background: color-mix(in srgb, var(--bg2) 50%, transparent) }
.udcard.known { border-color: var(--acc) }
.udcard.hidden2 { border-style: dashed }
.udcard.rev { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent) }
.udl { font-size: 12.5px; font-weight: 900; color: var(--muted); display: block; margin-bottom: 6px }
.udcard b { display: block; font-family: 'Reem Kufi', sans-serif; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.4 }
.udcard em { display: block; font-style: normal; font-family: 'Reem Kufi', sans-serif; font-size: clamp(30px, 5vw, 52px); color: var(--acc); text-shadow: 0 0 26px var(--glow); line-height: 1.2 }
.udcard small { font-size: 12.5px; color: var(--muted); font-weight: 700 }
.udvs { font-family: 'Reem Kufi', sans-serif; font-size: 26px; color: var(--muted); text-align: center }
.udbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px }
.udbtn { padding: 22px 10px; border-radius: 20px; cursor: pointer; font-size: 23px; font-weight: 900; transition: .18s; border: 2px solid var(--line); background: color-mix(in srgb, var(--bg2) 46%, transparent) }
.udbtn.up:hover:not(:disabled) { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); transform: translateY(-5px) }
.udbtn.dn:hover:not(:disabled) { border-color: var(--no); background: color-mix(in srgb, var(--no) 18%, transparent); transform: translateY(-5px) }
.udbtn.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, transparent) }

/* ---- الجاسوس الموزّع ---- */
.spyfirst { text-align: center; font-size: 16px; color: var(--muted); font-weight: 700; margin-bottom: 16px }
.spyfirst b { color: var(--acc); font-size: 19px }
.spytips { display: grid; gap: 10px }
.spytip { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 40%, transparent) }
.spytip span { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-weight: 900; background: color-mix(in srgb, var(--acc) 20%, transparent); color: var(--acc) }
.spytip p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); font-weight: 600 }
.spyme.isspy { border-color: var(--no); box-shadow: 0 0 36px -18px var(--no) }
.placegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 52vh; overflow: auto }
.placeb { padding: 10px 8px; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 40%, transparent); transition: .16s }
.placeb:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px) }
.placeb.off { cursor: default; opacity: .75 }
.placeb.off:hover { transform: none; border-color: var(--line); color: inherit }

/* الزجاج للألواح الجديدة */
.mrole, .mtgt, .qopt, .pwbtn, .stile, .scat, .cw, .udcard, .udbtn, .hidcard, .gpick, .rb-card, .lobfoot, .gate-card,
.whochip, .mlb, .spytip, .placeb, .rolec, .mgr {
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}