/* طاولة السهرة — شكل صفحة اللعب (index.html). ينحمّل بعد theme.css.
   لو عدّلته: غيّر رقم النسخة بـ index.html (index.css?v=…).

   الأقسام بالترتيب: الشريط العلوي · شريط مخطط السهرة · الرئيسية · رأس اللعبة · شاشة «ابدأ جولة» · الفرق والنقاط
     · النوافذ · وسائل سين جيم · الإجابة من الجوال · ملخص السهرة · بطاقة التحدي (الصور/الأعلام/التمثيل) · المافيا
     · الحروف · حزر العلم · أسرع إصبع · الإجابات بجوال المقدّم · حطها على راسك · الدخول والتحميل · الرصيد والشراء
     · الفائز ولوحة النتائج · مخطط السهرة · الصفحة العامة (قبل الدخول) · طريق المليون · مربوطين
*/

body{ overflow-x:hidden; padding-bottom:40px; }
main{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:26px 22px 20px; }
.view[hidden]{ display:none; }
section.view{ animation:viewIn .45s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.challenge-cat[hidden], .challenge-hint-choice[hidden], .challenge-award[hidden], .clear-all-btn[hidden]{ display:none; }

/* ================= الشريط العلوي ================= */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 22px; min-height:68px;
  background:linear-gradient(180deg, rgba(11,10,18,.97), rgba(7,6,12,.95)); border-bottom:1px solid var(--line);
}
.topbar::after{ content:""; position:absolute; inset:auto 0 -1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(162,141,255,.5) 28%, rgba(236,72,153,.32) 72%, transparent); }
.brand{ display:flex; align-items:center; gap:10px; background:none; border:none; color:inherit; padding:0; flex-shrink:0; }
.brand-name{ font-family:var(--f-display); font-weight:700; font-size:1.08rem; white-space:nowrap; }
.nav-pills{
  display:flex; gap:2px; padding:4px; border-radius:999px; flex-wrap:wrap;
  background:rgba(255,255,255,.035); border:1px solid var(--line); margin-inline-start:8px;
}
.nav-pills button{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid transparent; color:var(--tx-2);
  font-size:.84rem; font-weight:600; padding:7px 12px; border-radius:999px; white-space:nowrap;
  transition:color .15s, background-color .15s;
}
.nav-pills button .ic{ width:17px; height:17px; opacity:.85; }
.nav-pills button:hover{ color:var(--tx); background:rgba(255,255,255,.05); }
.nav-pills button.active{ color:#fff; border-color:var(--line-2); background:linear-gradient(180deg, #24203a, #1a1729); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--pa, var(--v-hi)) 26%, transparent); }
.nav-pills button.active .ic{ color:var(--v-hi); opacity:1; }
.top-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
@media (min-width:641px){
  .topbar.stacked .top-actions{ order:1; }
  .topbar.stacked .nav-pills{ order:2; flex-basis:100%; margin-inline-start:0; justify-content:center; justify-content:safe center; background:none; border-color:transparent; padding:0;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .topbar.stacked .nav-pills::-webkit-scrollbar{ display:none; }
  .topbar.stacked .nav-pills button{ flex:0 0 auto; padding:7px 10px; gap:6px; }
}
.teams-btn, .buzz-btn-top, .bal-chip, .plan-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:40px;
  background:var(--glass); border:1px solid var(--line-2); color:var(--tx);
  font-size:.84rem; font-weight:600; padding:8px 14px; border-radius:999px; white-space:nowrap;
  transition:background-color .15s, border-color .15s;
}
.teams-btn:hover, .buzz-btn-top:hover, .bal-chip:hover, .plan-chip:hover{ background:var(--glass-2); border-color:var(--line-3); }
.teams-btn .ic, .buzz-btn-top .ic, .plan-chip .ic, .bal-chip .ic{ width:18px; height:18px; color:var(--v-hi); }
.buzz-btn-top.on{ border-color:var(--ok-line); color:#d1fae5; }
.buzz-btn-top.on .ic{ color:var(--ok); }
.bal-chip b{ color:var(--v-hi); font-weight:700; font-variant-numeric:tabular-nums; }
.bal-chip[hidden], .plan-chip[hidden]{ display:none; }
.plan-chip{ border-color:var(--v-line); background:var(--v-soft); }
.plan-chip small{ color:var(--tx-2); font-weight:600; font-variant-numeric:tabular-nums; }
.fs-btn .ic{ width:19px; height:19px; }
/* قراءة الأسئلة بالصوت */
.tts-wrap{ position:relative; flex-shrink:0; }
.tts-top{ position:relative; }
.tts-top .ic{ width:20px; height:20px; }
.tts-dot{ position:absolute; top:7px; inset-inline-end:7px; width:7px; height:7px; border-radius:50%; background:var(--tx-3); box-shadow:0 0 0 2px var(--bg, #08070d); }
.tts-top.on{ color:var(--tx); border-color:var(--v-line); }
.tts-top.on .tts-dot{ background:var(--ok, #22c55e); }
.tts-top.speaking .ic, .tts-say.speaking .ic{ animation:ttsPulse .9s ease-in-out infinite; color:var(--v-hi); }
@keyframes ttsPulse{ 50%{ transform:scale(1.18); } }
@media (prefers-reduced-motion:reduce){ .tts-top.speaking .ic, .tts-say.speaking .ic{ animation:none; } }
.tts-pop{ position:absolute; top:calc(100% + 10px); left:0; z-index:40; width:min(320px, calc(100vw - 20px)); display:grid; gap:12px; padding:14px;
  background:linear-gradient(180deg, #1c1a2b, #15131f); border:1px solid var(--line-2); border-radius:18px; text-align:right;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); animation:popIn .2s var(--ease); }
.tts-pop[hidden]{ display:none; }
.tts-h b{ display:block; font-family:var(--f-display); font-size:1.02rem; }
.tts-h small{ display:block; margin-top:2px; font-size:.8rem; color:var(--tx-3); line-height:1.6; }
.tts-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.88rem; font-weight:600; color:var(--tx-2); }
.tts-row[hidden]{ display:none; }
.tts-sw{ cursor:pointer; }
.tts-sw input{ position:absolute; opacity:0; width:1px; height:1px; }
.tts-sw i{ flex:0 0 auto; position:relative; width:44px; height:26px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid var(--line-2); transition:background .15s; }
.tts-sw i::after{ content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s var(--ease); }
.tts-sw input:checked + i{ background:var(--v); border-color:var(--v-line); }
.tts-sw input:checked + i::after{ transform:translateX(-18px); }
.tts-sw input:focus-visible + i{ outline:2px solid #fff; outline-offset:2px; }
.tts-seg{ display:flex; gap:4px; padding:3px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); }
.tts-seg button{ font:inherit; font-size:.8rem; font-weight:700; padding:6px 10px; border-radius:9px; border:0; background:none; color:var(--tx-2); }
.tts-seg button.on{ background:var(--s3); color:#fff; box-shadow:inset 0 0 0 1px var(--line-3); }
.tts-row select{ min-width:0; max-width:190px; font:inherit; font-size:.82rem; color:var(--tx); background:var(--s2, #15131f); border:1px solid var(--line-2); border-radius:10px; padding:6px 8px; }
.tts-note{ margin:0; font-size:.78rem; line-height:1.7; color:var(--tx-3); }
.tts-say{ display:inline-flex; align-items:center; gap:8px; margin:-6px auto 14px; padding:8px 14px; border-radius:999px; font:inherit; font-size:.84rem; font-weight:700;
  color:var(--tx-2); background:rgba(255,255,255,.05); border:1px solid var(--line-2); }
.tts-say:hover{ color:#fff; border-color:var(--line-3); }
.tts-say .ic{ width:18px; height:18px; }
.ml-meta .tts-say{ margin:0; padding:4px 10px; font-size:.78rem; }
@media (max-width:640px){
  .topbar{ padding:10px 14px; gap:10px; }
  .brand-name{ display:none; }
  .nav-pills{ order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; margin-inline-start:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .nav-pills::-webkit-scrollbar{ display:none; }
  .nav-pills button{ flex:0 0 auto; }
  .teams-btn span.lbl, .buzz-btn-top span.lbl, .plan-chip span.lbl{ display:none; }
  .teams-btn, .buzz-btn-top, .plan-chip{ padding:8px 11px; }
  .fs-btn{ display:none; }
  .tts-pop{ position:fixed; top:64px; left:10px; right:10px; width:auto; }
}

/* ================= شريط مخطط السهرة (أثناء اللعب) ================= */
.plan-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 22px; padding:10px 12px 10px 16px; border-radius:18px;
  background:linear-gradient(90deg, rgba(124,92,255,.16), rgba(124,92,255,.05)); border:1px solid var(--v-line);
  box-shadow:0 14px 34px -22px rgba(124,92,255,.8);
}
.plan-bar .pb-step{ font-family:var(--f-display); font-weight:700; font-size:.9rem; white-space:nowrap; }
.plan-bar .pb-step small{ color:var(--tx-2); font-family:var(--f-body); font-weight:600; }
.plan-bar .pb-track{ display:flex; gap:5px; flex:1 1 140px; min-width:120px; }
.plan-bar .pb-track i{ flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.1); }
.plan-bar .pb-track i.done{ background:var(--v); }
.plan-bar .pb-track i.live{ background:linear-gradient(90deg, var(--v), var(--v-hi)); box-shadow:0 0 12px var(--v-glow); }
.plan-bar .pb-now{ display:inline-flex; align-items:center; gap:8px; color:var(--tx); font-weight:600; font-size:.88rem; }
.plan-bar .pb-now .ic{ color:var(--v-hi); }
.plan-bar .pb-btns{ display:flex; gap:6px; margin-inline-start:auto; }

/* ================= الرئيسية ================= */
.home-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:10px 0 22px; }
.home-head h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem, 4.6vw, 3.1rem); line-height:1.15; margin:10px 0 8px; }
.home-head p{ color:var(--tx-2); max-width:58ch; }
.home-credits{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px 12px 18px; margin:0 0 18px; border-radius:18px; border:1px solid var(--line-2);
  background:linear-gradient(90deg, rgba(124,92,255,.10), rgba(255,255,255,.03) 60%); border-color:rgba(124,92,255,.28);
}
.home-credits[hidden]{ display:none; }
.home-credits .hc-txt{ font-size:.94rem; color:var(--tx-2); }
.home-credits .hc-txt b{ color:#fff; }
.planner-card{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:24px; align-items:center;
  padding:28px; margin-bottom:22px; border-radius:var(--r-xl);
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(124,92,255,.32), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--v-line); box-shadow:var(--sh-2);
}
.planner-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%); }
.planner-card h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem, 3vw, 2rem); line-height:1.25; margin:12px 0 8px; }
.planner-card p{ color:var(--tx-2); margin-bottom:18px; max-width:52ch; }
.planner-card .pc-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.pc-visual{ display:grid; gap:8px; }
.pc-step{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(5,5,7,.55); border:1px solid var(--line); font-size:.88rem; font-weight:600; }
.pc-step .gi{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--a) 18%, transparent); color:var(--ab); flex-shrink:0; }
.pc-step .gi .ic{ width:17px; height:17px; }
.pc-step .t{ margin-inline-start:auto; color:var(--tx-3); font-weight:500; font-size:.8rem; font-variant-numeric:tabular-nums; }
.pc-step.done{ opacity:.55; }
.pc-step.live{ border-color:var(--v-line); background:rgba(124,92,255,.12); }
.pc-progress{ height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin:4px 0 14px; max-width:380px; }
.pc-progress i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--v), var(--v-hi)); }
@media (max-width:760px){ .planner-card{ grid-template-columns:1fr; padding:22px; } }

.sec-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:6px 0 14px; }
.sec-title h3{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; }
.sec-title span{ color:var(--tx-3); font-size:.84rem; }
.mode-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }   /* 9 ألعاب = 3×3 */
@media (max-width:900px){ .mode-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .mode-grid .mode-card[data-view="rope"]{ grid-column:1 / -1; } }
@media (max-width:560px){ .mode-grid{ grid-template-columns:1fr; } }
.mode-card{
  position:relative; overflow:hidden; text-align:right; color:var(--tx);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:196px;
  padding:20px; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
  background:
    radial-gradient(120% 85% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016));
}
.mode-card::before{
  content:""; position:absolute; inset:auto -30% -60% auto; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 65%);
  opacity:.55; transition:opacity .3s; pointer-events:none;
}
.mode-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:var(--sh-2), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.mode-card:hover::before{ opacity:1; }
.g-tile{
  position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:15px; flex-shrink:0;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 34%, #15131f), color-mix(in srgb, var(--accent) 12%, #0e0d15));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.g-tile .ic{ width:24px; height:24px; stroke-width:1.9; }
.mode-card h3{ font-family:var(--f-display); font-weight:700; font-size:1.18rem; margin-top:4px; }
.mode-card p{ position:relative; font-size:.88rem; color:var(--tx-2); line-height:1.7; flex:1; }
.mc-cta{ position:relative; display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:700; color:var(--accent-bright); }
.mc-cta .ic{ width:16px; height:16px; transition:transform .2s var(--ease); }
.mode-card:hover .mc-cta .ic{ transform:translateX(-4px); }
.mc-badge{ position:absolute; top:18px; left:18px; font-size:.74rem; font-weight:700; border-radius:999px; padding:4px 10px;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-bright); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.mc-badge:empty{ display:none; }
.mc-badge.lock{ background:rgba(255,255,255,.05); color:var(--tx-3); border-color:var(--line); }
.home-tools{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:16px; }
@media (max-width:860px){ .home-tools{ grid-template-columns:1fr; } }
.tool-card{
  display:flex; align-items:center; gap:14px; text-align:right; color:var(--tx); width:100%;
  padding:16px 18px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line);
  transition:background-color .2s, border-color .2s, transform .2s var(--ease);
}
.tool-card:hover{ background:var(--glass-2); border-color:var(--line-2); transform:translateY(-2px); }
.tool-card .t-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--v-soft); color:var(--v-hi); border:1px solid rgba(124,92,255,.3); flex-shrink:0; box-shadow:0 8px 22px -10px rgba(124,92,255,.8); }
.tool-card .t-ic .ic{ width:21px; height:21px; }
.tool-card b{ display:block; font-family:var(--f-display); font-weight:700; font-size:.98rem; }
.tool-card small{ display:block; color:var(--tx-2); font-size:.82rem; line-height:1.6; }
.tool-card.danger .t-ic{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }

/* ================= رأس اللعبة ================= */
.back-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.back-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); color:var(--tx-2);
  font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px;
}
.back-btn:hover{ color:var(--tx); border-color:var(--line-2); background:var(--glass); }
.mode-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.mh-main{ display:flex; align-items:center; gap:16px; min-width:0; flex:1 1 420px; }
.mh-main .g-tile{ width:58px; height:58px; border-radius:18px; }
.mh-main .g-tile .ic{ width:28px; height:28px; }
.mode-header h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem, 3vw, 2.05rem); line-height:1.2; margin-bottom:4px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.mode-header p{ color:var(--tx-2); font-size:.92rem; line-height:1.7; max-width:80ch; }
.round-tag{ font-family:var(--f-body); font-size:.74rem; font-weight:700; border-radius:999px; padding:4px 11px;
  background:var(--glass-2); border:1px solid var(--line-2); color:var(--tx-2); }
.round-tag:empty{ display:none; }
.round-tag.trial{ color:#a7f3d0; border-color:var(--ok-line); background:var(--ok-soft); }

/* ================= شاشة «ابدأ جولة» ================= */
section.gated .game-body, section.gated .game-only{ display:none !important; }
.round-gate[hidden]{ display:none; }
.rg-card{
  position:relative; overflow:hidden; max-width:680px; margin:6px auto 24px; padding:32px 26px 26px; text-align:center;
  border-radius:var(--r-xl); border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
  border-color:color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.12));
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
}
.rg-icon{ display:flex; justify-content:center; margin:6px 0 12px; }
.rg-icon .g-tile{ width:64px; height:64px; border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 7px color-mix(in srgb, var(--accent) 9%, transparent), 0 16px 40px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.rg-icon .g-tile .ic{ width:30px; height:30px; }
.rg-title{ font-family:var(--f-display); font-weight:800; margin:8px 0 6px; font-size:clamp(1.6rem, 3.4vw, 2.1rem); }
.rg-what{ color:var(--tx-2); font-size:.95rem; margin-bottom:18px; line-height:1.8; }
.rg-what b{ color:var(--tx); }
.rg-opts{ margin:0 auto 18px; max-width:560px; display:grid; gap:4px; }
.rg-opts .lbl{ font-size:.8rem; font-weight:700; color:var(--tx-3); margin:10px 0 6px; }
.rg-chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.rg-chips button{
  background:var(--glass); border:1px solid var(--line-2); color:var(--tx-2);
  border-radius:999px; padding:8px 14px; font-size:.86rem; font-weight:600; min-height:38px;
  transition:background-color .15s, border-color .15s, color .15s;
}
.rg-chips button:hover:not(.on){ color:var(--tx); border-color:var(--line-3); }
.rg-chips button.on{ background:color-mix(in srgb, var(--accent, var(--v)) 22%, transparent); border-color:color-mix(in srgb, var(--accent, var(--v)) 70%, transparent); color:#fff;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, var(--v)) 40%, transparent) inset, 0 8px 22px -12px color-mix(in srgb, var(--accent, var(--v)) 90%, transparent);
}
.rg-chips button small{ display:block; font-size:.7rem; font-weight:500; color:var(--tx-3); }
.rg-chips button.on small{ color:var(--tx-2); }
.rg-btns{ display:flex; flex-direction:column; gap:9px; max-width:400px; margin:0 auto; }
.rg-btns .btn-primary, .rg-btns .btn-ghost{ width:100%; min-height:50px; }
.rg-btns small{ font-weight:500; opacity:.82; }
.rg-note{ color:var(--tx-3); font-size:.82rem; margin-top:14px; line-height:1.7; }
.rg-sum{ margin:2px 0 8px; }
.rg-sum .rm-list{ display:inline-block; text-align:right; margin:0; }
.rg-done{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#d1fae5; background:var(--ok-soft); border:1px solid var(--ok-line); border-radius:999px; padding:6px 14px; font-size:.86rem; margin-bottom:8px; }
.rg-plan{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto 14px; padding:9px 14px; border-radius:14px;
  background:var(--v-soft); border:1px solid var(--v-line); color:#e4ddff; font-size:.86rem; font-weight:600; max-width:520px; }
.rg-plan .ic{ color:var(--v-hi); }

/* ================= الفرق والنقاط (درج جانبي) ================= */
.teams-overlay{ position:fixed; inset:0; background:rgba(2,2,6,.7); z-index:39; animation:fadeIn .2s ease; }
.teams-overlay[hidden]{ display:none; }
.teams-panel{
  position:fixed; top:10px; bottom:10px; left:10px; width:min(380px, calc(100vw - 20px)); z-index:40; overflow-y:auto;
  padding:22px 20px; border-radius:24px;
  background:linear-gradient(180deg, #16142a, #0f0e18 40%); border:1px solid var(--line-2); box-shadow:0 30px 80px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  animation:drawerIn .35s var(--ease);
}
@keyframes drawerIn{ from{ transform:translateX(-24px); opacity:0; } to{ transform:none; opacity:1; } }
.teams-panel[hidden]{ display:none; }
.teams-panel h3{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.teams-panel h3 .ic{ color:var(--v-hi); }
.teams-panel .th-sub{ font-size:.82rem; color:var(--tx-3); margin-bottom:18px; line-height:1.7; }
.team-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.team-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.team-row input.team-name-input{ flex:1; min-width:0; background:none; border:none; color:var(--tx); font-weight:600; font-size:.94rem; outline:none; padding:4px 0; }
.team-score-btns{ display:flex; gap:4px; }
.team-score-btns button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line-2); background:var(--glass); color:var(--tx); font-size:1rem; line-height:1; }
.team-score-btns button:hover{ background:var(--glass-2); }
.team-row .team-score-in{
  flex:0 0 62px; width:62px; min-width:0; text-align:center; font-family:var(--f-mono); direction:ltr; font-size:1rem; font-weight:600;
  color:var(--tx); background:rgba(0,0,0,.35); border:1px solid var(--line-2); border-radius:10px; padding:6px 4px; outline:none;
}
.team-row .team-score-in:focus{ border-color:var(--v); box-shadow:var(--ring); }
.team-remove{ background:none; border:none; color:var(--tx-3); font-size:.95rem; padding:4px 6px; border-radius:8px; }
.team-remove:hover{ color:var(--bad); background:var(--bad-soft); }
@media (max-width:440px){
  .team-row{ flex-wrap:wrap; row-gap:8px; }
  .team-row .team-name-input{ flex:1 1 calc(100% - 60px); }
  .team-row .team-remove{ order:1; }
  .team-row .team-score-btns{ order:2; margin-inline-start:22px; }
  .team-row .team-score-in{ order:3; flex:0 0 76px; width:76px; }
  .team-score-btns button{ width:34px; height:34px; }
}
.add-team-btn{ width:100%; background:none; border:1px dashed var(--line-3); color:var(--v-hi); font-size:.88rem; font-weight:700; border-radius:14px; padding:11px; margin:4px 0 16px; }
.add-team-btn:hover{ background:var(--v-soft); border-color:var(--v-line); }
.win-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:12px 14px; border:1px solid var(--v-line); border-radius:14px; background:var(--v-soft); }
.win-row label{ font-weight:700; font-size:.9rem; color:#ede9ff; flex:1 1 auto; display:flex; align-items:center; gap:8px; }
.win-row input{ width:96px; flex:0 0 96px; text-align:center; font-family:var(--f-mono); direction:ltr; font-size:1rem; font-weight:600;
  color:var(--tx); background:rgba(0,0,0,.4); border:1px solid var(--line-2); border-radius:10px; padding:7px; outline:none; }
.win-row input::placeholder{ color:var(--tx-3); font-family:var(--f-body); font-size:.82rem; }
.win-row input:focus{ border-color:var(--v); box-shadow:var(--ring); }
.win-row small{ flex:1 1 100%; color:var(--tx-2); font-size:.78rem; line-height:1.6; }
.reset-scores-btn{ width:100%; background:none; border:none; color:var(--tx-3); font-size:.82rem; text-decoration:underline; text-underline-offset:3px; padding:6px 0; }
.reset-scores-btn:hover{ color:var(--tx-2); }
.reset-all-btn{ width:100%; margin-top:12px; background:var(--bad-soft); border:1px solid var(--bad-line); color:#fecaca; font-size:.88rem; font-weight:700; border-radius:14px; padding:11px; }
.reset-all-btn:hover{ background:rgba(248,113,113,.2); }
.teams-close{
  position:absolute; top:16px; left:16px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--glass); color:var(--tx-2); font-size:.9rem; z-index:2;
}
.teams-close:hover{ color:#fff; background:var(--glass-2); }

/* ================= النوافذ ================= */
.modal-overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, rgba(18,14,36,.86), rgba(2,2,6,.93));
  animation:fadeIn .2s ease;
}
.modal-overlay[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  position:relative; width:min(520px, 100%); max-height:88vh; max-height:88dvh; overflow-y:auto; text-align:center;
  padding:30px 26px 24px; border-radius:var(--r-xl); color:var(--tx);
  background:linear-gradient(180deg, #17152a 0%, #0f0e18 100%); border:1px solid var(--line-2);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  animation:popIn .32s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.modal h3{ font-family:var(--f-display); font-weight:800; }
.rm-intro{ font-weight:700; margin-bottom:6px; color:var(--tx); }
.rm-list{ text-align:right; margin:0 0 14px; padding-inline-start:22px; line-height:1.95; font-size:.92rem; list-style:disc; color:var(--tx-2); }
.rm-list li::marker{ color:var(--v); }
.rm-note{ font-size:.86rem; color:var(--tx-2); margin-bottom:18px; line-height:1.75; }
.m-big-ic{ display:grid; place-items:center; width:64px; height:64px; border-radius:20px; margin:0 auto 10px; background:var(--v-soft); border:1px solid var(--v-line); color:var(--v-hi); font-size:1.9rem; }
.m-big-ic .ic{ width:30px; height:30px; }

/* سين جيم */
.trivia-board{ display:grid; grid-template-columns:repeat(var(--cols, 6), minmax(0, 1fr)); gap:10px; }
.tb-col{ display:grid; grid-template-rows:auto repeat(4, minmax(64px, 1fr)); gap:10px; min-width:0; }
.tb-cat{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:62px; padding:10px 8px;
  border-radius:14px; font-family:var(--f-display); font-weight:700; font-size:.92rem; line-height:1.35; color:var(--trivia-bright); border:1px solid rgba(16,185,129,.38);
  overflow-wrap:anywhere;
  background:linear-gradient(180deg, color-mix(in srgb, #10b981 30%, #0e0d15), color-mix(in srgb, #10b981 9%, #0e0d15)); border-color:rgba(52,211,153,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px -16px rgba(16,185,129,.9);
}
.tb-cell{
  position:relative; display:grid; place-items:center; min-height:64px; border-radius:14px; padding:6px 4px;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem, 2.6vw, 2.1rem); color:#fff; border:1px solid var(--line-2);
  transition:transform .18s var(--ease), border-color .18s, background-color .18s, box-shadow .2s;
  background:linear-gradient(180deg, #1d1b28, #121119);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 0 rgba(0,0,0,.28);
}
.tb-cell small{ position:absolute; bottom:6px; inset-inline:0; font-family:var(--f-body); font-size:.62rem; font-weight:600; color:var(--tx-3); }
.tb-cell:hover:not(:disabled){ transform:translateY(-3px); border-color:rgba(110,231,183,.6); box-shadow:0 14px 30px -14px rgba(16,185,129,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.tb-cell:disabled{ cursor:default; color:var(--tx-3); border-color:var(--line); font-size:1.2rem; background:#0f0e15; }
.tb-cell:disabled .by{ position:absolute; top:8px; inset-inline-start:8px; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
@media (max-width:760px){
  .trivia-board{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tb-col{ grid-template-rows:auto; grid-template-columns:repeat(4, 1fr); }
  .tb-col .tb-cat{ grid-column:1 / -1; min-height:44px; }
  .tb-cell{ min-height:54px; font-size:1.35rem; }
  .tb-cell small{ display:none; }
}
@media (max-width:430px){ .trivia-board{ grid-template-columns:1fr; } }
.tm-cat{ display:inline-flex; align-items:center; gap:6px; background:rgba(16,185,129,.14); color:var(--trivia-bright); border:1px solid rgba(16,185,129,.35);
  font-weight:700; font-size:.82rem; padding:5px 13px; border-radius:999px; margin-bottom:12px; }
.tm-points{ display:flex; flex-direction:column; align-items:center; line-height:1.05; margin-bottom:14px; }
.tm-points b{ font-family:var(--f-display); font-size:2.6rem; font-weight:800; background:linear-gradient(180deg, #fff, #c7f9e4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tm-points small{ font-size:.78rem; font-weight:600; color:var(--tx-2); margin-top:4px; }
.tm-question{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem, 2.4vw, 1.55rem); line-height:1.75; margin-bottom:20px; color:#fff; text-wrap:balance; }
.tm-answer{
  background:var(--ok-soft); border:1px solid var(--ok-line); color:#d1fae5;
  border-radius:14px; padding:13px 16px; margin-bottom:18px; font-weight:700; font-size:1.08rem;
}
.tm-hint{ background:var(--warn-soft); border:1px solid var(--warn-line); color:#fde68a; border-radius:14px; padding:11px 14px; margin-bottom:14px; font-weight:600; font-size:.92rem; }
.tm-btn-row{ display:flex; gap:9px; flex-wrap:wrap; }
.tm-btn-row .btn-primary{ flex:1 1 auto; }
.tm-btn-row .btn-ghost{ flex:0 0 auto; white-space:nowrap; }
.tm-award p{ font-size:.86rem; color:var(--tx-2); margin-bottom:10px; }
.tm-award[hidden]{ display:none; }
.team-award-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:10px; }
.team-award-btns button, .challenge-award > button[data-emojiaward], .challenge-award > button[data-flaward]{
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:11px 18px; font-weight:700; font-size:.9rem; color:#fff; min-height:44px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)); text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8); transition:transform .15s var(--ease), filter .15s;
}
.team-award-btns button:hover, .challenge-award > button[data-emojiaward]:hover, .challenge-award > button[data-flaward]:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.team-award-btns button.buzz-first, .challenge-award > button.buzz-first{ outline:3px solid #fff; box-shadow:0 0 0 7px rgba(255,255,255,.22); transform:scale(1.06); }
.team-award-btns button.buzz-first::before, .challenge-award > button.buzz-first::before{ content:"⚡ "; }

/* ================= (v11) 🃏 وسائل سين جيم ================= */
.tm-helps{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:2px 0 14px; }
.tm-helps[hidden], .th-bar[hidden]{ display:none; }
.th-open{ border:1px dashed var(--line-2); background:var(--glass); color:var(--tx-2); border-radius:999px; padding:7px 18px; font:inherit; font-weight:700; font-size:.9rem; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.th-open:hover{ border-color:rgba(110,231,183,.6); color:var(--tx); background:var(--glass-2); }
.th-active{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.th-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 12px; border-radius:999px; font-size:.88rem; font-weight:600; text-align:right;
  border:1px solid color-mix(in srgb, var(--c) 65%, transparent); background:color-mix(in srgb, var(--c) 18%, transparent); }
.th-chip > i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.th-chip b{ font-family:var(--f-display); }
.th-chip.off{ opacity:.6; }
.th-chip button{ border:0; border-radius:999px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; min-height:30px; }
.th-no{ padding:4px 12px; background:rgba(239,68,68,.22); color:#fecaca; }
.th-no:hover{ background:rgba(239,68,68,.4); }
.th-cancel{ width:30px; padding:0; background:var(--glass-2); color:var(--tx-2); }
.th-cancel:hover{ color:var(--tx); }
.th-pick{ width:100%; padding:12px 14px; border-radius:16px; background:var(--glass); border:1px solid var(--line); display:flex; flex-direction:column; gap:9px; text-align:right; }
.th-pick > p{ margin:0; font-weight:700; font-size:.92rem; }
.th-pick > p small{ color:var(--tx-3); font-weight:500; margin-inline-start:6px; }
.th-trow{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.th-trow .nm{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.th-trow .nm i, .th-team i{ width:10px; height:10px; border-radius:50%; background:var(--c); }
.th-trow .hs{ display:flex; gap:6px; flex-wrap:wrap; }
.th-h{ display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:6px 12px; border-radius:12px; border:1px solid var(--line-2); background:var(--glass-2); color:var(--tx); font:inherit; font-weight:600; font-size:.86rem; cursor:pointer; transition:transform .15s var(--ease), border-color .2s; }
.th-h b{ font-family:var(--f-display); color:var(--trivia-bright); }
.th-h:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--c); }
.th-h:disabled{ opacity:.35; cursor:default; }
.th-h.used{ text-decoration:line-through; }
.th-victims{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.th-team{ display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--c) 60%, transparent); background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--tx); font:inherit; font-weight:700; cursor:pointer; }
.th-x{ align-self:center; border:0; background:none; color:var(--tx-3); font:inherit; font-size:.85rem; cursor:pointer; padding:4px 12px; }
.th-x:hover{ color:var(--tx); }
.th-tag{ font-size:.78em; padding:1px 6px; border-radius:6px; background:rgba(0,0,0,.28); margin-inline-start:4px; }
.th-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; margin-top:14px; padding:10px 14px; border-radius:16px; background:var(--glass); border:1px solid var(--line); font-size:.88rem; }
.th-lbl{ color:var(--tx-2); font-weight:700; }
.th-tm{ display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.th-tm > i{ width:9px; height:9px; border-radius:50%; background:var(--c); margin-inline-end:2px; }
.th-ic{ display:inline-grid; place-items:center; min-width:28px; height:24px; padding:0 6px; border-radius:8px; background:var(--glass-2); border:1px solid var(--line-2); font-family:var(--f-display); font-size:.8rem; }
.th-ic.used{ opacity:.28; text-decoration:line-through; }
.th-info{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); background:var(--glass-2); color:var(--tx-2); font:inherit; font-weight:800; cursor:pointer; }
.th-info:hover{ color:var(--tx); }

/* ================= (v11) 📱 الإجابة من الجوال (الأعلام والصور) ================= */
.mc-box{ display:flex; flex-direction:column; gap:12px; margin-top:16px; text-align:right; }
.mc-box[hidden]{ display:none; }
.mc-tg.on{ border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.12); color:#bbf7d0; }

/* ================= (v11) 🏆 ملخص السهرة ================= */
.sum-modal .modal{ max-width:520px; }
.sum-img{ border-radius:18px; overflow:hidden; background:var(--glass); border:1px solid var(--line); min-height:220px; display:grid; place-items:center; }
.sum-img img{ display:block; width:100%; max-height:60vh; object-fit:contain; }
.sum-img img:not([src]){ display:none; }
.sum-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.sum-acts button{ flex:1 1 140px; }
.sum-acts button[hidden]{ display:none; }

/* ================= بطاقة التحدي (الصور/الأعلام/التمثيل) ================= */
.challenge-card{
  position:relative; overflow:hidden; text-align:center; padding:30px 24px; margin-bottom:18px; border-radius:var(--r-xl);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
  border-color:color-mix(in srgb, var(--accent, var(--v)) 22%, rgba(255,255,255,.12));
}
.fl-count{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-body); font-size:.8rem; font-weight:600; color:var(--tx-2);
  background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:4px 12px; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.fl-count:empty{ display:none; }
.challenge-cat{ display:inline-block; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-bright); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size:.82rem; font-weight:700; padding:5px 14px; border-radius:999px; margin-bottom:16px; }
.challenge-emoji{ font-size:3.4rem; line-height:1.3; margin-bottom:18px; }
.rebus-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0 auto 20px; max-width:440px; padding:18px 16px; border-radius:22px;
  background:linear-gradient(160deg, var(--paper), var(--paper-2)); border:1px solid rgba(255,255,255,.3);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.04), inset 0 1px 0 #fff;
}
.rebus-img{
  display:block; width:124px; height:124px; object-fit:cover; border-radius:14px;
  border:3px solid #fff; box-shadow:0 8px 18px -6px rgba(22,18,31,.45);
  background:#e9e5f7; animation:rebusWait 1.1s ease-in-out infinite alternate;
}
.rebus-img.loaded{ animation:none; background:none; }
@keyframes rebusWait{ from{ opacity:1; } to{ opacity:.55; } }
.rebus-plus{ font-family:var(--f-display); font-size:1.7rem; font-weight:800; color:#6c5aa8; flex:0 0 auto; }
.rebus-row.v2{ max-width:780px; gap:8px; }
.rebus-img.rebus-sprite{ animation:none; background-repeat:no-repeat; background-color:#e4e0f5; flex:0 0 auto; }
.rebus-txt{ font-family:var(--f-display); font-weight:800; font-size:2.4rem; line-height:1.2; color:var(--paper-ink); flex:0 1 auto; max-width:260px; text-align:center; padding:0 2px; }
.rebus-row.many .rebus-img{ width:100px; height:100px; }
.rebus-row.many .rebus-txt{ font-size:1.75rem; }
@media (max-width:420px){
  .rebus-img{ width:92px; height:92px; }
  .rebus-row.many .rebus-img{ width:74px; height:74px; }
  .rebus-txt{ font-size:1.8rem; }
  .rebus-row.many .rebus-txt{ font-size:1.3rem; }
}
.challenge-hint{ background:var(--warn-soft); border:1px solid var(--warn-line); color:#fde68a; border-radius:14px; padding:11px 14px; margin:0 auto 14px; max-width:560px; font-weight:600; font-size:.94rem; }
.challenge-hint-choice{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.challenge-hint-choice button{ flex:1 1 auto; max-width:220px; }
.challenge-btn-row{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.challenge-btn-row .btn-primary{ flex:1 1 auto; max-width:320px; }
.challenge-btn-row .btn-ghost{ flex:0 0 auto; white-space:nowrap; }
.challenge-answer{
  display:inline-block; min-width:min(100%, 360px); background:var(--ok-soft); border:1px solid var(--ok-line);
  border-radius:16px; padding:13px 20px; margin-bottom:18px; font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:#d1fae5;
}
.challenge-award{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.timer-widget{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:18px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line);
}
.timer-display{ font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate; font-size:2rem; font-weight:600; min-width:96px; text-align:center; font-variant-numeric:tabular-nums; color:#fff; }
.timer-display.warn{ color:var(--char-bright); text-shadow:0 0 18px rgba(249,115,22,.6); }
.timer-btns{ display:flex; gap:7px; }
.timer-btns button{ background:var(--glass); border:1px solid var(--line-2); color:var(--tx); border-radius:12px; padding:9px 14px; font-size:.86rem; font-weight:700; min-height:40px; }
.timer-btns button:hover{ background:var(--glass-2); }
.turn-banner{
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  padding:12px; border-radius:16px; margin-bottom:16px;
  background:color-mix(in srgb, var(--accent-bright) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent-bright) 40%, transparent); color:#fff;
}
.reveal-card .reveal-hint{ font-size:.86rem; color:var(--tx-2); margin-bottom:16px; }
.challenge-title{ font-family:var(--f-display); font-size:clamp(1.6rem, 4vw, 2.4rem); font-weight:800; color:#fff; margin-bottom:18px; line-height:1.35; }
.reveal-toggle{
  display:inline-flex; align-items:center; gap:8px; min-height:50px;
  background:linear-gradient(180deg, #fb923c, #ea580c); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:12px 26px; font-weight:700; font-size:1rem; box-shadow:0 12px 28px -10px rgba(249,115,22,.7);
}
.qr-section{ text-align:center; margin-bottom:18px; }
.qr-box{ display:inline-block; padding:18px; margin-top:12px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line-2); }
.qr-box svg{ width:180px; height:180px; display:block; margin:0 auto; border-radius:12px; background:#fff; padding:8px; }
.qr-hint{ font-size:.82rem; color:var(--tx-2); margin-top:12px; max-width:44ch; }

/* ================= المافيا ================= */
.mafia-online{ position:relative; display:flex; align-items:center; gap:16px; margin:0 0 12px; padding:14px 16px; border-radius:var(--r-xl); text-decoration:none; color:var(--tx); overflow:hidden;
  background:radial-gradient(ellipse 60% 140% at 0% 50%, rgba(239,68,68,.2), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(239,68,68,.38); box-shadow:var(--sh-1); transition:transform .5s cubic-bezier(.32,.72,0,1), border-color .3s; }
.mafia-online:hover{ transform:translateY(-2px); border-color:rgba(239,68,68,.65); }
.mafia-online .mo-art{ width:72px; height:102px; flex-shrink:0; border-radius:12px; background:#1a0f0a url("games/mafia-card-mafia.webp?v=8") center 22% / cover no-repeat;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,210,150,.4); transform:rotate(-4deg); }
.mafia-online .mo-txt{ flex:1; min-width:0; display:grid; gap:3px; }
.mafia-online .mo-k{ font-size:.7rem; font-weight:800; color:var(--mafia-bright); letter-spacing:.06em; }
.mafia-online b{ font-size:1.06rem; line-height:1.45; }
.mafia-online small{ color:var(--tx-2); font-size:.82rem; line-height:1.65; }
.mafia-online .mo-go{ flex-shrink:0; padding:10px 18px; border-radius:999px; background:var(--mafia); color:#fff; font-weight:800; font-size:.9rem; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(239,68,68,.8); }
.mo-row{ display:flex; gap:16px; flex-wrap:wrap; margin:0 6px 16px; font-size:.86rem; }
.mo-link{ color:var(--tx-2); text-decoration:underline; text-underline-offset:3px; }
.mo-link:hover{ color:var(--tx); }
.mo-code{ font-family:var(--f-mono, monospace); direction:ltr; unicode-bidi:isolate; letter-spacing:.12em; color:var(--mafia-bright); }
@media (max-width:560px){ .mafia-online{ flex-wrap:wrap; } .mafia-online .mo-art{ width:58px; height:82px; } .mafia-online .mo-txt{ flex-basis:calc(100% - 80px); } .mafia-online .mo-go{ width:100%; text-align:center; } }
.mafia-panel{ position:relative; padding:24px; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--sh-1); background:radial-gradient(ellipse 70% 45% at 50% -8%, rgba(239,68,68,.16), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-color:rgba(239,68,68,.22); }
.mafia-panel .rivet{ display:none; }
.intake .field-row{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.intake input{
  flex:1 1 160px; min-width:0; background:rgba(255,255,255,.03); border:1px solid var(--line-2); color:var(--tx);
  border-radius:12px; padding:11px 14px; font-size:.94rem; outline:none;
}
.intake input::placeholder{ color:var(--tx-3); }
.intake input:focus{ border-color:var(--mafia); box-shadow:0 0 0 3px rgba(239,68,68,.2); }
.btn-add{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:var(--mafia-bright); font-weight:700; border-radius:12px; padding:0 20px; font-size:.92rem; min-height:46px; }
.btn-add:hover{ background:rgba(239,68,68,.2); }
.player-list{ display:flex; flex-direction:column; gap:6px; margin:4px 0 6px; }
.player-list li{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:.9rem; }
.player-list .p-num{ color:var(--tx-3); font-family:var(--f-mono); font-size:.8rem; }
.player-list .p-name{ font-weight:600; }
.player-list .p-phone{ color:var(--tx-3); font-size:.78rem; margin-inline-start:8px; }
.player-list .p-remove{ background:none; border:none; color:var(--tx-3); font-size:1rem; padding:2px 8px; border-radius:8px; }
.player-list .p-remove:hover{ color:var(--bad); background:var(--bad-soft); }
.empty-hint{ font-size:.86rem; color:var(--tx-3); text-align:center; padding:12px 0; border:1px dashed var(--line-2); border-radius:12px; margin:4px 0 14px; }
.clear-all-btn{ display:block; width:100%; background:none; border:none; color:var(--tx-3); font-size:.8rem; text-align:center; padding:2px 0 14px; text-decoration:underline; text-underline-offset:3px; }
.clear-all-btn:hover{ color:var(--bad); }
.clear-all-btn.armed{ color:var(--mafia-bright); text-decoration:none; font-weight:700; }
.role-config{ border-top:1px dashed var(--line-2); padding-top:14px; margin-bottom:16px; display:flex; flex-direction:column; gap:10px; }
.role-row{ display:flex; align-items:center; justify-content:space-between; }
.role-row .rname{ display:flex; align-items:center; gap:8px; font-size:.9rem; }
.role-row .rdot{ width:9px; height:9px; border-radius:50%; }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line-2); background:var(--glass); color:var(--tx); font-size:1rem; line-height:1; }
.stepper button:hover{ border-color:var(--mafia); color:var(--mafia-bright); }
.stepper button:disabled{ opacity:.35; }
.stepper .n{ min-width:18px; text-align:center; font-family:var(--f-mono); font-size:.92rem; }
.form-warn{ font-size:.8rem; color:var(--bad); margin-top:8px; min-height:1em; }
.folder-note{ background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); color:var(--tx); border-radius:16px; padding:15px 16px; margin-bottom:18px; }
.folder-note b{ display:block; font-size:.96rem; margin-bottom:4px; }
.folder-note p{ font-size:.86rem; color:var(--tx-2); line-height:1.7; }
.player-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.p-card{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; padding:14px 15px; text-align:right; color:var(--tx); transition:border-color .15s, transform .15s var(--ease); }
.p-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.p-card .pc-top{ display:flex; align-items:center; justify-content:space-between; }
.p-card .pc-name{ font-weight:700; font-size:.98rem; }
.p-card .pc-icon{ font-size:.95rem; }
.p-card .pc-status{ display:block; font-size:.78rem; color:var(--tx-3); margin-top:6px; }
.p-card.sent .pc-status{ color:var(--ok); }
.p-card .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--tx-3); margin-inline-start:6px; }
.p-card.sent .dot{ background:var(--ok); }
.folder-actions{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.case-stamp{ font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate; font-size:.74rem; letter-spacing:1.5px; color:var(--tx-3); }
.case-stamp b{ color:var(--mafia-bright); font-weight:600; letter-spacing:2px; }
.ticket{ position:relative; width:min(460px, 100%); max-height:88vh; overflow-y:auto; text-align:right; padding:28px 24px 22px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, #1a1220 0%, #0f0e18 100%); border:1px solid rgba(239,68,68,.35); color:var(--tx); box-shadow:0 40px 100px -30px rgba(0,0,0,.9); animation:popIn .3s var(--ease); }
.ticket-close{ position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:11px; border:1px solid var(--line-2); background:var(--glass); color:var(--tx-2); font-size:.9rem; }
.ticket-role-badge{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.ticket-text{ font-family:var(--f-body); white-space:pre-wrap; font-size:.92rem; line-height:1.9; margin:0 0 18px; direction:rtl; color:var(--tx-2);
  background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:14px; padding:14px; }
.ticket-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.ticket-actions .btn-primary{ flex:1 1 auto; }
.ticket-hint{ font-size:.78rem; color:var(--tx-3); text-align:center; margin:12px 0 0; min-height:1em; }
.m-round{ font-size:.86rem; color:var(--tx-2); text-align:center; margin:10px 0 8px; line-height:1.7; }
.m-round:empty{ display:none; }
/* (v16) 📱 بطاقات المافيا بالجوال: الباركود + حالة كل لاعب + اختيارات الليلة */
.m-link{ display:flex; align-items:center; gap:18px; padding:16px; margin-bottom:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line-2); }
.m-link .ml-qr{ flex:0 0 auto; width:170px; height:170px; padding:8px; border-radius:14px; background:#fff; display:grid; place-items:center; }
.m-link .ml-qr svg{ display:block; width:100%; height:100%; }
.ml-wait{ color:var(--paper-ink); font-size:.8rem; text-align:center; line-height:1.6; }
.m-link .ml-txt{ flex:1 1 auto; min-width:0; }
.m-link .ml-txt b{ display:block; font-family:var(--f-display); font-size:1.08rem; margin-bottom:6px; }
.m-link .ml-txt p{ font-size:.86rem; color:var(--tx-2); line-height:1.7; margin-bottom:8px; }
.m-link .ml-st{ font-size:.82rem; color:var(--tx-3); margin-bottom:10px; min-height:1.2em; }
@media (max-width:560px){ .m-link{ flex-direction:column; text-align:center; } }
.p-card.seen .pc-status{ color:var(--ok); }
.p-card.seen .dot{ background:var(--ok); }
.p-card.on .pc-status{ color:var(--v-hi); }
.p-card.on .dot{ background:var(--v-hi); }
.p-card.off .pc-status{ color:var(--warn); }
.p-card.off .dot{ background:var(--warn); }
.player-list .p-dev{ font-size:.8rem; margin-inline-start:6px; }
.m-night{ margin-top:16px; padding:14px 16px; border-radius:18px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.25); }
.m-night .mn-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.m-night .mn-head b{ font-family:var(--f-display); margin-inline-end:auto; }
.m-night .mn-note{ font-size:.8rem; color:var(--tx-3); margin-bottom:6px; }
.m-night .mn-g{ padding:9px 0 3px; border-top:1px dashed var(--line-2); }
.m-night .mn-h{ display:flex; justify-content:space-between; gap:8px; font-weight:700; font-size:.9rem; }
.m-night .mn-c{ font-weight:500; font-size:.8rem; color:var(--tx-2); }
.m-night ul{ list-style:none; display:grid; gap:4px; margin-top:6px; }
.m-night li{ display:flex; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.03); font-size:.88rem; }
.m-night li.chg{ animation:mnFlash 2.4s var(--ease-out); }
@keyframes mnFlash{ from{ background:rgba(124,92,255,.38); } to{ background:rgba(255,255,255,.03); } }
.m-night em{ font-style:normal; font-size:.8rem; }
.m-night em.bad{ color:var(--mafia-bright); }
.m-night em.ok{ color:var(--ok); }
.m-night .ed{ font-style:normal; font-size:.74rem; color:var(--warn); }
.m-night .dim{ color:var(--tx-3); }
.m-night .mn-sum{ font-size:.84rem; margin-top:6px; }
.m-night .mn-sum.ok{ color:var(--ok); }
.m-night .mn-sum.warn{ color:var(--warn); }
.m-qr-big{ width:min(62vh, 78vw, 440px); margin:0 auto 12px; padding:14px; border-radius:18px; background:#fff; }
.m-qr-big svg{ display:block; width:100%; height:auto; }
.m-qr-cap{ font-size:.92rem; color:var(--tx-2); }
/* (v16) 🎯 أختار الأدوار بنفسي + 💬 شات العصابة عند المقدّم */
.m-manual{ display:flex; align-items:center; justify-content:center; gap:9px; margin:4px 0 14px; font-size:.88rem; color:var(--tx-2); cursor:pointer; text-align:center; }
.m-manual input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--mafia); }
.m-pick{ text-align:right; }
.m-pick .mpr-sub{ font-size:.86rem; color:var(--tx-2); line-height:1.7; }
.m-pick .mpr-key{ font-size:.8rem; color:var(--tx-3); margin:8px 0 12px; }
.mpr-list{ display:grid; gap:6px; }
.mpr-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.mpr-row b{ font-size:.92rem; min-width:0; overflow-wrap:anywhere; }
.mpr-chips{ display:flex; gap:4px; flex:0 0 auto; }
.mpr-chips button{ width:38px; height:36px; border-radius:10px; border:1px solid var(--line-2); background:var(--glass); font-size:1rem; line-height:1; opacity:.55; }
.mpr-chips button.on{ opacity:1; border-color:var(--mafia); background:rgba(239,68,68,.18); box-shadow:0 0 0 2px rgba(239,68,68,.25); }
.mpr-chips button[data-r="auto"].on{ border-color:var(--v); background:var(--v-soft); box-shadow:0 0 0 2px var(--v-line); }
.m-pick .mpr-sum{ font-size:.86rem; color:var(--tx); margin:12px 0 4px; line-height:1.8; }
.m-night .mn-chat{ margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid var(--line); font-size:.84rem; line-height:1.8; max-height:180px; overflow-y:auto; }
.m-night .mn-chat p{ margin:0; overflow-wrap:anywhere; }
.m-night .mn-chat b{ color:var(--mafia-bright); margin-inline-end:4px; }
/* (v18) 💬 زر ونافذة شات العصابة عند المقدّم */
.m-night .mn-chatbtn{ border-color:rgba(239,68,68,.45); }
.m-night .mn-n{ font-family:var(--f-mono); font-size:.78rem; color:var(--tx-2); }
.m-night .mn-new{ font-style:normal; font-size:.7rem; font-weight:800; color:#fff; background:var(--mafia); border-radius:999px; padding:1px 8px; }
.m-chatw{ text-align:right; width:min(560px, 100%); }
.mcw-sub{ font-size:.84rem; color:var(--tx-2); margin-bottom:12px; line-height:1.7; }
.mcw-list{ display:flex; flex-direction:column; gap:8px; max-height:min(60vh, 520px); overflow-y:auto; padding:10px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid var(--line); }
.mcw-m{ padding:8px 12px; border-radius:12px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.22); }
.mcw-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mcw-h b{ color:var(--mafia-bright); font-size:.88rem; }
.mcw-t{ font-family:var(--f-mono); font-size:.72rem; color:var(--tx-3); }
.mcw-m p{ margin-top:2px; font-size:.96rem; line-height:1.7; overflow-wrap:anywhere; }
.mcw-empty{ text-align:center; color:var(--tx-3); font-size:.88rem; padding:16px; }
.mcw-note{ font-size:.78rem; color:var(--tx-3); margin-top:10px; text-align:center; }
.m-round button{ background:none; border:none; color:var(--v-hi); font-weight:700; text-decoration:underline; text-underline-offset:3px; font-size:.86rem; }

/* ================= الحروف ================= */
.lt-legend{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.lt-chip{ display:flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; font-weight:700; font-size:.9rem; }
.lt-chip .dot{ width:14px; height:14px; border-radius:5px; background:var(--c); flex-shrink:0; box-shadow:0 0 12px var(--c); }
.lt-chip small{ color:var(--tx-2); font-weight:500; font-size:.8rem; }
.lt-chip .wins{ font-family:var(--f-mono); background:rgba(255,255,255,.06); border-radius:999px; padding:0 10px; }
.lt-note{ text-align:center; color:var(--tx-2); font-size:.88rem; margin:6px 0 10px; }
.lt-stage{ display:flex; justify-content:center; margin:14px 0 18px; overflow-x:auto; padding-bottom:4px; }
.lt-frame{
  --n:5;
  --hw: clamp(30px, calc(min(92vw, 860px) / (var(--n) + 1.4)), calc(470px / var(--n))); --hh: calc(var(--hw) * 1.1547); --gap: 5px;
  direction:ltr; position:relative; border-radius:22px; background:rgba(14,13,21,.9);
  padding: calc(var(--hh) * .14 + 12px) calc(var(--hw) * .2 + 12px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  border-top:12px solid var(--ta, #777); border-bottom:12px solid var(--ta, #777);
  border-left:12px solid var(--tb, #999); border-right:12px solid var(--tb, #999);
}
.lt-row{ display:flex; gap:var(--gap); }
.lt-row + .lt-row{ margin-top: calc(var(--hh) * -0.25 + var(--gap)); }
.lt-row.odd{ margin-left: calc((var(--hw) + var(--gap)) / 2); }
.lt-hex{
  width:var(--hw); height:var(--hh); flex:0 0 auto; border:none; padding:0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, #ffffff, var(--paper-2)); color:var(--paper-ink);
  font-family:var(--f-display); font-weight:800; font-size:calc(var(--hw) * .44); line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s var(--ease), filter .15s;
}
.lt-hex:hover:not(:disabled){ transform:scale(1.08); filter:brightness(1.05) drop-shadow(0 0 8px rgba(124,92,255,.8)); }
.lt-hex:disabled{ cursor:default; }
.lt-hex.owned{ background:var(--own); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.lt-hex.win{ animation: ltWin .8s ease-in-out infinite alternate; filter:brightness(1.18); }
.lt-hex.locked{ background:rgba(255,255,255,.06); color:var(--tx-3); font-size:calc(var(--hw) * .3); }
@keyframes ltWin{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.lt-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* (v17) الحروف: السؤال يطلع كلمة كلمة (الكلمات محجوزة مكانها عشان النافذة ما تتحرك) */
.tm-question .lw{ visibility:hidden; }
.tm-question .lw.on{ visibility:visible; animation:lwIn .3s var(--ease-out); }
@keyframes lwIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .tm-question .lw.on{ animation:none; } }
.lt-skip{ position:absolute; top:14px; inset-inline-end:14px; z-index:2; }   /* بزاوية النافذة: لما يختفي ما تتحرك الأزرار */
.lt-skip[hidden]{ display:none; }
.lt-big{
  width:92px; height:106px; margin:0 auto 16px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(145deg, var(--letters-bright), var(--letters)); color:#fff;
  font-family:var(--f-display); font-size:2.8rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* ================= حزر العلم ================= */
.fl-stage{ display:flex; justify-content:center; align-items:center; min-height:120px; margin:4px 0 22px; }
.fl-flag{ display:block; border-radius:10px; background-repeat:no-repeat; background-color:#fff;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.25);
  outline:6px solid rgba(255,255,255,.05); outline-offset:6px;
}

/* ================= أسرع إصبع ================= */
.buzz-panel .modal{ width:min(820px, 100%); text-align:right; }
.bz-intro{ color:var(--tx-2); font-size:.9rem; margin-bottom:6px; line-height:1.75; }
.bz-rules{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.bz-rules span{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:.8rem; font-weight:600; color:var(--tx-2); }
.bz-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; margin:16px 0; }
.bz-team{ background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-top:4px solid var(--c); border-radius:18px; padding:14px; text-align:center; }
.bz-team h4{ margin:0 0 10px; font-family:var(--f-display); font-weight:700; font-size:1rem; }
.bz-qr svg{ width:176px; height:176px; max-width:100%; display:block; margin:0 auto; background:#fff; border-radius:12px; padding:6px; }
.bz-status{ font-size:.84rem; margin-top:10px; color:var(--tx-3); font-weight:600; }
.bz-status.on{ color:var(--ok); }
.bz-names{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:6px; }
.bz-names span{ background:var(--glass-2); border:1px solid var(--line); border-radius:999px; padding:1px 10px; font-size:.78rem; font-weight:600; }
.bz-copy{ font-size:.78rem; margin-top:10px; background:none; border:1px dashed var(--line-3); color:var(--tx-2); border-radius:10px; padding:5px 12px; }
.bz-copy:hover{ color:#fff; border-style:solid; }
.bz-opt{ display:flex; align-items:center; gap:10px; font-size:.9rem; margin:4px 0 14px; cursor:pointer; color:var(--tx-2); }
.bz-opt input{ width:18px; height:18px; accent-color:var(--v); }
.bz-row{ display:flex; gap:10px; flex-wrap:wrap; }
.bz-room{ margin-top:12px; font-size:.82rem; color:var(--tx-3); }
.bz-err{ background:var(--bad-soft); border:1px solid var(--bad-line); color:#fecaca; border-radius:14px; padding:10px 14px; font-size:.88rem; margin:10px 0; }
.buzz-bar{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:55;   /* فوق نافذة السؤال عشان المقدّم يتحكم بالأزرار */
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(30,27,44,.98), rgba(19,17,28,.98)); color:var(--tx); border:1px solid var(--line-2);
  border-radius:999px; padding:8px 10px 8px 18px; box-shadow:0 20px 50px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:.9rem; font-weight:700; width:max-content; max-width:calc(100vw - 20px);   /* max-content: ما ينلف لسطرين بسبب left:50% */
}
.buzz-bar[hidden]{ display:none; }
.buzz-bar .bb-dot{ position:relative; width:11px; height:11px; border-radius:50%; background:#8b85a3; flex-shrink:0; }
.buzz-bar.armed{ border-color:rgba(248,113,113,.5); }
.buzz-bar.armed .bb-dot{ background:#ff4d4d; }
.buzz-bar.armed .bb-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#ff4d4d; animation:bbPulse .9s ease-out infinite; }
.buzz-bar.locked{ background:var(--c); color:#fff; border-color:rgba(255,255,255,.5); }
.buzz-bar button{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:inherit; border-radius:999px; padding:7px 13px; font-weight:700; font-size:.82rem; }
.buzz-bar button:hover{ background:rgba(255,255,255,.18); }
.buzz-bar button.bb-pen{ background:#e5484d; border-color:rgba(255,255,255,.6); color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.55); }
.buzz-bar button.bb-pen:hover{ background:#d13438; }
.bb-conn{ display:flex; gap:4px; }
.bb-conn i{ width:9px; height:9px; border-radius:50%; background:var(--c); opacity:.22; }
.bb-conn i.on{ opacity:1; box-shadow:0 0 8px var(--c); }
@keyframes bbPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.8); opacity:0; } }
body.has-buzz-bar{ padding-bottom:100px; }
body.has-buzz-bar .toast{ bottom:calc(var(--bb-h, 72px) + 12px); }   /* الإشعار فوق شريط الأزرار — ما يغطي أزراره */
body.has-buzz-bar .modal-overlay{ padding-bottom:96px; }
body.has-buzz-bar .modal{ max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); }
.buzz-panel:not([hidden]) ~ .buzz-bar{ display:none; }
@media (max-width:560px){
  .buzz-bar{ left:10px; right:10px; transform:none; bottom:10px; border-radius:20px; padding:10px; gap:8px; max-width:none; width:auto; }
  .buzz-bar > span:not(.bb-dot):not(.bb-conn){ flex:1 1 100%; text-align:center; }
}
.bb-timer{ font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:3px 12px; font-size:1rem; min-width:4.4em; text-align:center; }
.bb-timer.warn{ background:#fff; color:#c0271d; border-color:#fff; animation:bbWarn .5s ease-in-out infinite alternate; }
@keyframes bbWarn{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
.buzz-bar button.bb-tu{ background:#fff; color:#17132b; border-color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.55); }
.buzz-bar button.bb-tu:hover{ background:#f1edff; }
/* ===== خانة «مين ضغط»: ثابتة بزاوية الشاشة لين ينحل السؤال ===== */
.bz-log{ position:fixed; z-index:56; left:16px; bottom:calc(var(--bb-h, 72px) + 2px); width:min(290px, calc(100vw - 32px)); max-height:min(48vh, 440px);
  display:flex; flex-direction:column; padding:10px; border-radius:18px; text-align:right;
  background:linear-gradient(180deg, rgba(30,27,44,.97), rgba(19,17,28,.97)); border:1px solid var(--line-2);
  box-shadow:0 22px 50px -14px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06); animation:popIn .22s var(--ease); }
.bz-log[hidden]{ display:none; }
.bl-h{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.bl-h b{ flex:1; font-family:var(--f-display); font-size:.98rem; }
.bl-btn{ flex:0 0 auto; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:.85rem;
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--tx-2); }
.bl-btn:hover{ color:#fff; border-color:var(--line-3); }
.bl-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; overflow-y:auto; min-height:0; }
.bl-row{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:8px; padding:7px 9px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-inline-start:4px solid var(--c); }
.bl-n{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#fff; font-weight:800; font-size:.76rem; }
.bl-who{ min-width:0; }
.bl-who b{ display:block; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-who small{ display:block; font-size:.72rem; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-t{ font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.bl-st{ font-size:.74rem; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; background:rgba(255,255,255,.06); color:var(--tx-2); }
.bl-st i{ font-style:normal; font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate; }
.bl-st b{ font-family:var(--f-mono); unicode-bidi:isolate; }
.st-ans{ background:color-mix(in srgb, var(--c) 16%, transparent); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.st-ans .bl-st{ background:var(--c); color:#fff; }
.st-timeout .bl-st{ background:rgba(250,204,21,.16); color:#fde68a; }
.st-wrong .bl-st{ background:rgba(239,68,68,.18); color:#fca5a5; }
.st-late{ opacity:.88; }
.bl-foot{ margin:8px 0 0; font-size:.8rem; color:var(--tx-2); text-align:center; line-height:1.6; }
.bl-foot b{ font-family:var(--f-mono); }
.bl-pts{ margin-top:6px; font-size:.76rem; color:var(--tx-3); text-align:center; line-height:1.6; }
/* الشاشات العريضة: نافذة السؤال تتزحزح عشان الخانة ما تغطيها */
@media (min-width:900px){ body.has-buzz-log .modal-overlay{ padding-left:326px; } }
@media (max-width:899px){
  .bz-log{ left:10px; right:10px; width:auto; max-height:34vh; padding:8px; }
  .bl-h{ margin-bottom:6px; } .bl-h b{ font-size:.9rem; }
  .bl-list{ display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; }
  .bl-row{ flex:0 0 auto; max-width:78vw; padding:6px 8px; }
  body.has-buzz-log .modal-overlay{ padding-bottom:calc(var(--bb-h, 72px) + var(--bl-h, 90px)); }
}
/* ===== خلص وقت الجواب: ما فيه خصم تلقائي — المقدّم يختار يخصم على مين ويزيد لمين ===== */
.tu-modal .modal{ width:min(560px, 100%); }
.tu-modal:not([hidden]) ~ .buzz-bar{ display:none; }
.tu-clock{ width:64px; height:64px; margin:0 auto 10px; border-radius:20px; display:grid; place-items:center; font-size:2rem;
  background:color-mix(in srgb, var(--c, #7c5cff) 24%, transparent); border:1px solid color-mix(in srgb, var(--c, #7c5cff) 60%, transparent); }
.tu-sub{ color:var(--tx-2); font-size:.9rem; margin:2px 0 16px; }
.tu-sec{ text-align:right; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:18px; padding:12px 14px; margin-bottom:10px; }
.tu-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tu-head b{ font-weight:800; font-size:.98rem; }
.tu-sec.minus .tu-head b{ color:#fca5a5; }
.tu-sec.plus .tu-head b{ color:#86efac; }
.tu-step{ display:inline-flex; align-items:center; gap:2px; background:rgba(0,0,0,.28); border:1px solid var(--line-2); border-radius:999px; padding:3px; direction:ltr; }
.tu-step button{ width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; font-weight:800; font-size:1.1rem; line-height:1; }
.tu-step button:hover{ background:rgba(255,255,255,.18); }
.tu-step output{ min-width:2.4em; text-align:center; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:1.05rem; }
.tu-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tu-chip{ --c:#8b85a3; display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 14px; font-weight:700; font-size:.9rem;
  color:var(--tx); background:rgba(255,255,255,.04); border:1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tu-chip::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); flex-shrink:0; }
.tu-chip.none::before{ display:none; }
.tu-chip:hover{ background:color-mix(in srgb, var(--c) 18%, transparent); }
.tu-chip[aria-checked="true"]{ background:var(--c); border-color:#fff; color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px -10px var(--c); }
.tu-chip[aria-checked="true"]::before{ background:#fff; }
.tu-chip.none[aria-checked="true"]{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); box-shadow:none; }
.tu-late{ font-size:.78rem; }
.tu-sum{ min-height:1.5em; font-size:.88rem; color:var(--tx-2); margin:8px 0 14px; line-height:1.7; }
.tu-sum b{ font-family:var(--f-mono); unicode-bidi:isolate; color:var(--tx); font-weight:700; white-space:nowrap; }
.tu-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.tu-actions button{ flex:1 1 200px; }
/* ===== (v10) خلص الوقت وفيه أحد ضغط: المقدّم يقرر صح ولا غلط ===== */
.bd-modal .modal{ width:min(520px, 100%); border-top:6px solid var(--c, #7c5cff); }
.bd-modal:not([hidden]) ~ .buzz-bar, .ans-modal:not([hidden]) ~ .buzz-bar{ display:none; }
.bd-who{ color:var(--tx-2); font-size:1rem; margin:2px 0 18px; line-height:1.7; }
.bd-who b{ color:#fff; font-weight:800; }
.bd-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.bd-actions button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:96px; padding:14px 10px; border-radius:20px;
  border:1px solid rgba(255,255,255,.22); color:#fff; font-family:var(--f-display); font-weight:800; font-size:1.45rem; line-height:1.2;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .15s var(--ease), filter .15s; }
.bd-actions button small{ font-family:var(--f-body); font-size:.8rem; font-weight:700; opacity:.92; }
.bd-actions button small:empty{ display:none; }
.bd-actions button:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.bd-actions .bd-ok{ background:linear-gradient(180deg, #22b45e, #16a34a); }
.bd-actions .bd-no{ background:linear-gradient(180deg, #ef5b60, #e5484d); }
.bd-none{ font-size:.92rem; }
@media (max-width:420px){ .bd-actions button{ min-height:84px; font-size:1.25rem; } }
.buzz-bar button.bb-ok{ background:#16a34a; border-color:rgba(255,255,255,.6); color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.55); }
.buzz-bar button.bb-ok:hover{ background:#12923f; }
.st-ok .bl-st{ background:rgba(34,197,94,.2); color:#86efac; }
.buzz-flash.ok{ animation-duration:2.6s; }
.buzz-flash .bf-ans{ display:inline-block; font-family:var(--f-body); font-size:.36em; font-weight:700; margin-top:.6em; padding:.35em .95em; border-radius:999px; background:rgba(0,0,0,.24); }
/* ===== (v10) 📱 الإجابات بجوال المقدّم ===== */
.mh-acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ans-btn{ white-space:nowrap; }
.ans-modal .modal{ width:min(460px, 100%); }
.ans-qr{ position:relative; width:min(260px, 70vw); margin:6px auto 12px; padding:10px; background:#fff; border-radius:20px; box-shadow:0 18px 40px -18px rgba(0,0,0,.9); }
.ans-qr svg{ display:block; width:100%; height:auto; transition:opacity .3s ease; }
.ans-qr .ans-wait{ color:#5b5670; font-size:.9rem; line-height:1.7; padding:36px 8px; }
.ans-qr.done svg{ opacity:.1; }
.ans-qr .ans-ok{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:6px; color:#14532d; font-weight:800; font-size:1.05rem; }
.ans-qr .ans-ok b{ font-size:2.6rem; line-height:1; }
.ans-st{ min-height:1.6em; font-size:.92rem; font-weight:700; color:var(--tx-2); margin-bottom:8px; }
.ans-st.ok{ color:#86efac; }
.ans-note{ font-size:.84rem; color:var(--tx-3); line-height:1.7; margin:0 0 14px; }
.ans-acts{ display:flex; gap:10px; flex-wrap:wrap; }
.ans-acts button{ flex:1 1 150px; }
.ans-copy{ font-size:.78rem; margin-top:12px; background:none; border:1px dashed var(--line-3); color:var(--tx-3); border-radius:10px; padding:5px 12px; }
.ans-copy:hover{ color:#fff; border-style:solid; }
.ans-copy[hidden]{ display:none; }
.ans-auto{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px; font-size:.86rem; color:var(--tx-2); cursor:pointer; }
.ans-auto input{ width:18px; height:18px; accent-color:var(--v); }
/* ===== (v12) عدّاد الجواب الكبير فوق الشاشة + «انتهى الوقت» + 🔁 الإعادة ===== */
.bz-clock{ position:fixed; top:0; left:0; right:0; z-index:57; pointer-events:none; text-align:center; padding:8px 16px 0;
  background:linear-gradient(180deg, rgba(12,10,22,.97), rgba(12,10,22,.93)); border-bottom:3px solid var(--c, #7c5cff);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9); animation:popIn .2s var(--ease); }
.bz-clock[hidden]{ display:none; }
.bc-row{ display:flex; align-items:center; justify-content:center; gap:16px; min-height:64px; }
.bc-who{ font-family:var(--f-display); font-size:clamp(1.05rem, 2.2vw, 1.4rem); color:#fff; max-width:44vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-who b{ font-weight:800; }
.bc-who small{ font-family:var(--f-body); font-size:.78em; font-weight:600; color:var(--tx-2); margin-inline-start:8px; }
.bc-num{ min-width:1.7em; padding:0 .25em; border-radius:18px; font-family:var(--f-mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-size:clamp(2.6rem, 6vw, 3.9rem); font-weight:700; line-height:1.12; color:#fff;
  background:color-mix(in srgb, var(--c, #7c5cff) 34%, transparent); border:2px solid var(--c, #7c5cff); }
.bz-clock.warn{ border-bottom-color:#ef4444; }
.bz-clock.warn .bc-num{ background:#e5484d; border-color:#fff; animation:bcPulse .5s ease-in-out infinite alternate; }
@keyframes bcPulse{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
.bc-track{ height:8px; margin:8px -16px 0; background:rgba(255,255,255,.08); overflow:hidden; }
.bc-fill{ display:block; height:100%; background:var(--c, #7c5cff); transform-origin:right center; transition:transform .2s linear; }
.bz-clock.warn .bc-fill{ background:#ef4444; }
body.has-bz-clock .modal-overlay{ padding-top:100px; }
body.has-bz-clock .modal{ max-height:calc(100vh - 196px); max-height:calc(100dvh - 196px); }
@media (max-width:560px){
  .bc-row{ min-height:52px; gap:10px; } .bc-num{ font-size:2.3rem; } .bc-who{ max-width:56vw; }
  body.has-bz-clock .modal-overlay{ padding-top:86px; }
}
.buzz-flash.tup{ animation-duration:1.3s; }
.bd-rp{ text-align:right; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:18px; padding:12px 14px; margin:0 0 12px; }
.bd-rp[hidden]{ display:none; }
.bd-rp-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.bd-rp-h b{ font-size:.95rem; }
.bd-rp-h span{ font-size:.8rem; font-weight:700; color:var(--tx-3); white-space:nowrap; }
.bd-wave{ display:block; width:100%; height:74px; border-radius:12px; background:rgba(0,0,0,.28); }
.bd-rp-acts{ display:flex; gap:8px; margin-top:10px; }
.bd-rp-acts button{ flex:1 1 0; min-height:44px; }
.bd-rp-acts button:disabled{ opacity:.5; cursor:default; }
.bd-rp-note{ margin:8px 0 0; font-size:.78rem; color:var(--tx-3); line-height:1.6; }
.bd-rp-src{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; }
.bd-rp-src[hidden]{ display:none; }
.bd-rp-src span{ font-size:.82rem; font-weight:700; color:var(--tx-2); }
.bd-rp-src button{ font:inherit; font-size:.82rem; font-weight:700; min-height:34px; padding:5px 12px; border-radius:999px; cursor:pointer;
  color:var(--tx-2); background:rgba(255,255,255,.05); border:1px solid var(--line-2); }
.bd-rp-src button.on{ color:#fff; background:var(--v-soft); border-color:rgba(162,141,255,.75); }
.bd-rp-src button:disabled{ opacity:.55; cursor:default; }
.buzz-bar button.bb-rp{ background:#fff; color:#17132b; border-color:#fff; }
.bz-rec-st{ margin:-8px 0 14px; padding-inline-start:28px; font-size:.82rem; line-height:1.7; color:var(--tx-3); }
.bz-rec-st.ok{ color:#86efac; }
.bz-rec-st.bad{ color:#fca5a5; }
.buzz-flash{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  background:color-mix(in srgb, var(--c) 92%, #000); color:#fff; pointer-events:none;
  font-family:var(--f-display); font-size:clamp(2.4rem, 8vw, 5rem); font-weight:800;
  text-shadow:0 6px 24px rgba(0,0,0,.35); animation:bzFlash 1.5s ease forwards;
}
.buzz-flash[hidden]{ display:none; }
.buzz-flash .bf-name{ font-size:.5em; margin-top:.2em; opacity:.95; font-weight:600; }
@keyframes bzFlash{ 0%{ opacity:0; transform:scale(1.08); } 10%{ opacity:1; transform:scale(1); } 72%{ opacity:1; } 100%{ opacity:0; } }

/* ================= حطها على راسك ================= */
.hd-live{ margin:4px 0 18px; }
.hd-card{ text-align:center; padding:20px 18px 18px; border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line-2); border-top:6px solid var(--c); box-shadow:var(--sh-1); }
.hd-who{ font-family:var(--f-display); font-size:1.2rem; font-weight:700; }
.hd-who b{ color:var(--c); filter:brightness(1.35); }
.hd-who small{ color:var(--tx-2); font-family:var(--f-body); font-weight:600; font-size:.88rem; }
.hd-timer{ font-family:var(--f-mono); direction:ltr; font-size:clamp(3rem, 12vw, 6.4rem); font-weight:600; line-height:1.1; margin:6px 0 10px; color:#fff; }
.hd-timer.warn{ color:#ff9b8a; text-shadow:0 0 30px rgba(248,113,113,.5); }
.hd-count{ display:flex; gap:10px; justify-content:center; font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.hd-count span{ border-radius:14px; padding:4px 16px; }
.hd-count .ok{ background:var(--ok-soft); color:#a7f3d0; border:1px solid var(--ok-line); }
.hd-count .pass{ background:var(--glass); color:var(--tx-2); border:1px solid var(--line); }
.hd-log{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.hd-log span{ padding:4px 12px; border-radius:999px; font-weight:700; font-size:.88rem; }
.hd-log .ok{ background:var(--ok-soft); color:#a7f3d0; border:1px solid var(--ok-line); }
.hd-log .pass{ background:var(--glass); color:var(--tx-3); border:1px solid var(--line); }
.hd-done{ font-family:var(--f-display); font-size:1.15rem; font-weight:700; margin-bottom:12px; }
.hd-done b{ color:var(--c); filter:brightness(1.35); }
.hd-play-local{ margin-top:10px; font-size:.84rem; background:var(--v-soft); border:1px solid var(--v-line); color:#ede9ff; border-radius:12px; padding:8px 12px; font-weight:700; }
.hd-turn{ font-size:.84rem; font-weight:700; margin-top:8px; color:var(--tx-2); }
.hd-turn.done{ color:var(--ok); }
.hd-turn.none{ color:var(--tx-3); }

/* ================= الدخول والتحميل ================= */
.gh-hidden{ display:none !important; }
.auth-gate{ position:fixed; inset:0; z-index:120; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; }
.auth-gate[hidden]{ display:none; }
.ag-card{ position:relative; z-index:1; width:min(440px, 100%); padding:34px 26px 26px; text-align:center; border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line-2); box-shadow:var(--sh-2); }
.ag-logo{ display:flex; justify-content:center; }
.ag-logo .logo-mark{ width:56px; height:56px; border-radius:17px; }
.ag-title{ font-family:var(--f-display); font-weight:800; font-size:1.8rem; margin:12px 0 6px; }
.ag-sub{ color:var(--tx-2); font-size:.94rem; line-height:1.8; margin-bottom:18px; }
.ag-err{ background:var(--bad-soft); border:1px solid var(--bad-line); color:#fecaca; border-radius:14px; padding:11px 14px; font-size:.88rem; margin-bottom:14px; line-height:1.7; }
.ag-user{ display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 14px; }
.ag-user img{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--s2); }
.ag-user b{ display:block; font-size:1rem; }
.ag-user small{ color:var(--tx-3); font-size:.78rem; direction:ltr; unicode-bidi:isolate; }
.ag-state{ font-family:var(--f-display); font-size:1.3rem; font-weight:700; margin-bottom:8px; }
.ag-btns{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.boot-overlay{ position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; }
.boot-overlay[hidden]{ display:none; }
.boot-mark{ position:relative; }
.boot-mark .logo-mark{ width:64px; height:64px; border-radius:20px; }
.boot-mark::after{ content:""; position:absolute; inset:0; border-radius:20px; border:2px solid rgba(124,92,255,.6); animation:bootPulse 1.6s ease-out infinite; pointer-events:none; }
@keyframes bootPulse{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }
.boot-spinner{ width:120px; height:3px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
.boot-spinner::after{ content:""; position:absolute; inset:0 auto 0 0; width:40%; border-radius:inherit; background:linear-gradient(90deg, transparent, var(--v-hi), transparent); animation:bootBar 1.1s ease-in-out infinite; }
@keyframes bootBar{ from{ transform:translateX(-100%); } to{ transform:translateX(260%); } }
.boot-overlay h2{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; }
.boot-overlay p{ color:var(--tx-2); font-size:.92rem; }
.boot-overlay .boot-error{ color:#fecaca; max-width:40ch; }
.boot-overlay .boot-retry{ margin-top:8px; background:var(--glass); border:1px solid var(--line-2); color:var(--tx); font-weight:700; font-size:.9rem; border-radius:999px; padding:10px 20px; }

/* ================= الرصيد والشراء والحساب ================= */
.shop-modal{ width:min(860px, 100%); text-align:right; }
.shop-modal h3{ font-size:1.5rem; margin-bottom:4px; }
.shop-sub{ color:var(--tx-2); font-size:.92rem; margin-bottom:20px; }
.shop-note{ color:var(--tx-3); font-size:.84rem; margin-top:16px; line-height:1.8; }
.shop-note b{ color:var(--tx-2); }

/* ================= (v14) الدفع بالتحويل ================= */
.pay-modal{ width:min(500px, 100%); text-align:right; }
.pay-kicker{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:#e4ddff; background:var(--v-soft); border:1px solid var(--v-line); border-radius:999px; padding:4px 12px; margin-bottom:10px; }
.pay-modal h3{ font-size:1.45rem; margin-bottom:2px; }
.pay-sum{ color:var(--tx-2); font-size:.95rem; margin-bottom:18px; }
.pay-sum b{ color:#fff; font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.pay-q{ font-weight:700; margin-bottom:10px; }
.pay-apps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:16px; }
.pay-app{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:76px; padding:12px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--glass); color:var(--tx); font-family:var(--f-display); font-weight:800; font-size:1.08rem; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.pay-app small{ font-family:var(--f-body); font-weight:500; font-size:.76rem; color:var(--tx-3); }
.pay-app:hover{ border-color:var(--line-3); background:var(--glass-2); }
.pay-app:active{ transform:scale(.98); }
.pay-app.on{ border-color:var(--v-line); background:var(--v-soft); box-shadow:inset 0 0 0 1px var(--v-line); color:#fff; }
.pay-app:focus-visible{ outline:none; box-shadow:var(--ring); }
.pay-apps.sm .pay-app{ min-height:46px; font-size:.95rem; }
.pay-steps{ list-style:none; display:grid; gap:12px; margin:0 0 14px; padding:0; }
.pay-steps > li{ display:grid; grid-template-columns:30px minmax(0, 1fr); gap:12px; align-items:start; padding:14px; border-radius:var(--r); border:1px solid var(--line); background:var(--glass); }
.ps-n{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--v); color:#fff; font-weight:800; font-size:.9rem; box-shadow:0 6px 16px -6px var(--v-glow); }
.ps-t{ font-size:.95rem; line-height:1.7; margin-bottom:8px; }
.ps-t b{ color:#fff; unicode-bidi:isolate; }
.pay-num{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--r-sm); background:rgba(0,0,0,.28); border:1px dashed var(--line-3); }
.pay-num bdi{ flex:1 1 auto; min-width:0; font-family:var(--f-mono); font-size:1.25rem; font-weight:600; letter-spacing:.03em; color:#fff; direction:ltr; text-align:right; overflow-wrap:anywhere; }
.pay-num .btn-soft{ flex:none; }
.ps-name{ margin-top:6px; font-size:.84rem; color:var(--tx-2); }
.ps-hint{ margin-top:8px; font-size:.8rem; color:var(--tx-3); line-height:1.7; }
.pay-go{ width:100%; justify-content:center; text-decoration:none; }
.pay-foot{ font-size:.82rem; color:var(--tx-3); line-height:1.8; margin:0; }
.pay-foot b{ color:var(--tx-2); font-variant-numeric:tabular-nums; }
.pay-link{ background:none; border:0; padding:0; color:var(--tx-2); text-decoration:underline; text-underline-offset:3px; font:inherit; cursor:pointer; }
.pay-link:hover{ color:#fff; }
.pay-state{ text-align:center; padding:4px 2px 0; }
.pay-ic{ width:64px; height:64px; margin:0 auto 12px; border-radius:20px; display:grid; place-items:center; font-size:1.9rem; background:var(--v-soft); border:1px solid var(--v-line); }
.pay-state.ok .pay-ic{ background:var(--ok-soft); border-color:var(--ok-line); }
.pay-state.bad .pay-ic{ background:var(--bad-soft); border-color:var(--bad-line); color:#fecaca; }
.pay-state h4{ font-family:var(--f-display); font-size:1.2rem; font-weight:800; margin-bottom:6px; }
.pay-state p{ color:var(--tx-2); font-size:.92rem; line-height:1.8; margin-bottom:14px; }
.pay-state p b{ color:#fff; }
.pay-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.pay-row > a{ text-decoration:none; }
.pay-wait{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--tx-2); padding:28px 0; }
.pay-spin{ width:18px; height:18px; flex:none; border-radius:50%; border:2px solid var(--line-3); border-top-color:var(--v-hi); animation:paySpin .8s linear infinite; }
@keyframes paySpin{ to{ transform:rotate(360deg); } }
.pay-err{ color:#fecaca; background:var(--bad-soft); border:1px solid var(--bad-line); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:12px; font-size:.9rem; line-height:1.7; }
@media (max-width:560px){
  .pay-modal{ padding:26px 16px 20px; }
  .pay-num{ gap:8px; padding:9px 10px; }
  .pay-num bdi{ font-size:1.06rem; letter-spacing:.01em; }
  .pay-steps > li{ padding:12px 10px; gap:10px; }
  .pay-apps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion:reduce){ .pay-spin{ animation-duration:2.4s; } .pay-app{ transition:none; } }
.user-chip{ position:relative; flex-shrink:0; }
.uc-btn{ width:40px; height:40px; padding:0; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--s3); border:1px solid var(--line-2); color:var(--v-hi); font-size:1rem; font-weight:700; font-family:inherit; }
.uc-btn:hover, .uc-btn[aria-expanded="true"]{ border-color:var(--v); box-shadow:var(--ring); }
.uc-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
.uc-btn img[hidden], .uc-btn span[hidden]{ display:none; }
.uc-menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:30; width:max-content; min-width:230px; max-width:min(300px, calc(100vw - 20px));
  background:linear-gradient(180deg, #1c1a2b, #15131f); border:1px solid var(--line-2); border-radius:18px; padding:6px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); display:flex; flex-direction:column; gap:2px;
  animation:popIn .2s var(--ease);
}
.uc-menu.to-right{ left:auto; right:0; }
.uc-menu[hidden]{ display:none; }
.uc-item{ display:block; text-align:right; background:none; border:none; color:var(--tx); text-decoration:none; font-size:.9rem; font-weight:600; padding:10px 12px; border-radius:12px; font-family:inherit; }
.uc-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.uc-item[hidden]{ display:none; }
.uc-who{ padding:8px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:4px; text-align:right; min-width:0; }
.uc-who b{ display:block; font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uc-who small{ display:block; margin-top:2px; font-size:.78rem; color:var(--tx-3); direction:ltr; unicode-bidi:isolate; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* الباقات (الصفحة الرئيسية + نافذة الشراء) */
.ld-packs, .shop-packs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; align-items:stretch; }
.pack{
  position:relative; display:flex; flex-direction:column; text-align:right; padding:26px 22px 22px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.pack.best{ border-color:var(--v-line); background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(124,92,255,.28), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 30px 70px -30px rgba(124,92,255,.7), inset 0 0 0 1px rgba(124,92,255,.25); }
.pack .tag{ position:absolute; top:18px; left:18px; background:var(--v); color:#fff; font-size:.74rem; font-weight:700; border-radius:999px; padding:4px 12px; white-space:nowrap; box-shadow:0 6px 16px -6px var(--v-glow); }
.pack .n{ font-family:var(--f-display); font-size:3rem; font-weight:800; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.pack .nl{ color:var(--tx-2); font-size:.92rem; margin:6px 0 16px; }
.pack .price{ font-family:var(--f-display); font-size:1.7rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.pack .per{ color:var(--tx-3); font-size:.82rem; margin:2px 0 16px; min-height:1.3em; }
.pack .feats{ display:grid; gap:7px; margin:0 0 20px; font-size:.86rem; color:var(--tx-2); flex:1; }
.pack .feats li{ display:flex; align-items:center; gap:8px; }
.pack .feats .ic{ width:16px; height:16px; color:var(--v-hi); }
.pack .btn-primary{ width:100%; }
.pack:not(.best) .btn-primary{ background:var(--glass-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); border-color:var(--line-3); }
.pack:not(.best) .btn-primary:hover{ background:rgba(255,255,255,.12); box-shadow:none; }

/* ================= الفائز ولوحة النتائج ================= */
.win-modal{ z-index:65; }
.win-modal .modal{ border-top:6px solid var(--c, var(--v)); }
.win-cup{ font-size:3.8rem; line-height:1.15; animation:winPop .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes winPop{ 0%{ transform:scale(.3) rotate(-20deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.win-modal h3{ font-size:1.6rem; margin:6px 0 4px; }
.win-sub{ color:var(--tx-2); margin-bottom:16px; }
.win-list{ display:flex; flex-direction:column; gap:6px; margin:0 0 18px; text-align:right; }
.win-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border-inline-start:5px solid var(--c); font-weight:700; }
.win-list li:first-child{ background:color-mix(in srgb, var(--c) 22%, transparent); font-size:1.06rem; }
.win-list b{ font-size:1.12rem; }
.score-modal .modal, .plan-modal .modal{ width:min(640px, 100%); }
.sb-list{ display:grid; gap:10px; margin:6px 0 20px; text-align:right; }
.sb-row{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); overflow:hidden; }
.sb-row .bar{ position:absolute; inset:0 auto 0 0; width:var(--w, 0%); background:linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); transition:width .8s var(--ease); }
[dir="rtl"] .sb-row .bar{ inset:0 0 0 auto; background:linear-gradient(270deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); }
.sb-row > *{ position:relative; }
.sb-row .rk{ font-family:var(--f-display); font-weight:800; width:30px; text-align:center; color:var(--tx-2); }
.sb-row .nm{ font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:8px; min-width:0; }
.sb-row .nm i{ width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex-shrink:0; }
.sb-row .sc{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px; }
.sb-row .sc small{ font-family:var(--f-body); font-size:.8rem; font-weight:700; color:var(--ok); }
.sb-row.lead{ border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:16px 0 18px; }
.podium .pd{ display:flex; flex-direction:column; align-items:center; gap:6px; width:min(30%, 150px); }
.podium .pd .nm{ font-weight:700; font-size:.92rem; text-align:center; overflow-wrap:anywhere; }
.podium .pd .blk{ width:100%; border-radius:14px 14px 6px 6px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:1.4rem; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff 0%), color-mix(in srgb, var(--c) 45%, #000)); box-shadow:0 18px 40px -18px var(--c); }
.podium .pd.p1 .blk{ height:130px; } .podium .pd.p2 .blk{ height:96px; } .podium .pd.p3 .blk{ height:70px; }
.podium .pd .md{ font-size:1.8rem; line-height:1; }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.confetti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; opacity:.95; animation:confFall linear forwards; }
@keyframes confFall{ to{ transform:translateY(110vh) rotate(720deg); opacity:.9; } }
.pm-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:700; color:#e4ddff; background:var(--v-soft); border:1px solid var(--v-line); border-radius:999px; padding:5px 13px; margin-bottom:10px; }
.pm-next{ display:flex; align-items:center; gap:12px; text-align:right; margin:0 0 16px; padding:14px; border-radius:18px; background:rgba(255,255,255,.035); border:1px dashed var(--line-3); }
.pm-next b{ display:block; font-family:var(--f-display); font-weight:700; }
.pm-next small{ color:var(--tx-2); }
.pm-next .g-tile{ width:46px; height:46px; }
.pm-btns{ display:flex; flex-direction:column; gap:8px; }

/* ================= مخطط السهرة ================= */
.pl-wrap{ max-width:880px; margin:0 auto; }
.pl-steps{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.pl-steps span{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color:var(--tx-3); padding:6px 12px; border-radius:999px; border:1px solid var(--line); }
.pl-steps span b{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.06); font-size:.76rem; }
.pl-steps span.on{ color:#fff; border-color:var(--v-line); background:var(--v-soft); }
.pl-steps span.on b{ background:var(--v); }
.pl-card{ padding:24px; border-radius:var(--r-xl); margin-bottom:16px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border:1px solid var(--line-2); box-shadow:var(--sh-1); }
.pl-card h3{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.pl-card h3 .n{ display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--v-soft); border:1px solid var(--v-line); color:var(--v-hi); font-size:.86rem; }
.pl-card .sub{ color:var(--tx-2); font-size:.9rem; margin-bottom:14px; }
.pl-teams{ display:grid; gap:8px; margin-bottom:10px; }
.pl-team{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.pl-team i{ width:14px; height:14px; border-radius:50%; background:var(--c); flex-shrink:0; box-shadow:0 0 10px var(--c); }
.pl-team input{ flex:1; min-width:0; background:none; border:none; color:var(--tx); font-weight:600; font-size:.96rem; outline:none; padding:6px 0; }
.pl-team button{ background:none; border:none; color:var(--tx-3); border-radius:8px; padding:4px 8px; }
.pl-team button:hover{ color:var(--bad); background:var(--bad-soft); }
.pl-games{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.pl-game{ position:relative; display:flex; align-items:center; gap:12px; text-align:right; padding:12px 14px; border-radius:16px; color:var(--tx);
  background:rgba(255,255,255,.03); border:1px solid var(--line); transition:border-color .15s, background-color .15s; }
.pl-game .g-tile{ width:40px; height:40px; border-radius:12px; }
.pl-game .g-tile .ic{ width:20px; height:20px; }
.pl-game b{ display:block; font-size:.94rem; }
.pl-game small{ display:block; color:var(--tx-3); font-size:.76rem; }
.pl-game .ck{ margin-inline-start:auto; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-3); display:grid; place-items:center; flex-shrink:0; }
.pl-game .ck .ic{ width:14px; height:14px; opacity:0; color:#fff; stroke-width:2.6; }
.pl-game.on{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.pl-game.on .ck{ background:var(--v); border-color:var(--v-hi); }
.pl-game.on .ck .ic{ opacity:1; }
.pl-rounds{ display:grid; gap:10px; }
.pl-round{ display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.pl-round .no{ font-family:var(--f-display); font-weight:800; color:var(--tx-3); width:26px; text-align:center; font-variant-numeric:tabular-nums; }
.pl-round .g-tile{ width:42px; height:42px; border-radius:13px; }
.pl-round .g-tile .ic{ width:20px; height:20px; }
.pl-round .info b{ display:block; font-weight:700; }
.pl-round .info .sz{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.pl-round .info .sz button{ background:var(--glass); border:1px solid var(--line); color:var(--tx-2); border-radius:999px; padding:3px 10px; font-size:.78rem; font-weight:600; }
.pl-round .info .sz button.on{ background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:color-mix(in srgb, var(--accent) 65%, transparent); color:#fff; }
.pl-round .info small{ color:var(--tx-3); font-size:.8rem; }
.pl-round .acts{ display:flex; gap:4px; }
.pl-round .acts button{ width:32px; height:32px; border-radius:10px; background:var(--glass); border:1px solid var(--line); color:var(--tx-2); display:grid; place-items:center; }
.pl-round .acts button:hover:not(:disabled){ color:#fff; border-color:var(--line-3); }
.pl-round .acts button:disabled{ opacity:.3; }
.pl-round .acts .ic{ width:16px; height:16px; }
.pl-round.done{ opacity:.55; }
.pl-round.live{ border-color:var(--v-line); background:var(--v-soft); }
.pl-round .st{ font-size:.74rem; font-weight:700; border-radius:999px; padding:2px 9px; margin-inline-start:6px; vertical-align:middle; }
.pl-round .st.done{ color:var(--ok); background:var(--ok-soft); }
.pl-round .st.live{ color:#fff; background:var(--v); }
@media (max-width:560px){
  .pl-round{ grid-template-columns:auto minmax(0, 1fr); }
  .pl-round .no{ display:none; }
  .pl-round .acts{ grid-column:1 / -1; justify-content:flex-end; }
  .pl-card{ padding:18px; }
}
.pl-sum{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:16px 0; }
.pl-sum div{ padding:14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.pl-sum b{ display:block; font-family:var(--f-display); font-weight:800; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.pl-sum small{ color:var(--tx-2); font-size:.8rem; }
.pl-sum .warn b{ color:var(--warn); }
@media (max-width:560px){ .pl-sum{ grid-template-columns:1fr 1fr; } }
.pl-alert{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; font-size:.88rem; line-height:1.7; margin-bottom:14px; }
.pl-alert.warn{ background:var(--warn-soft); border:1px solid var(--warn-line); color:#fde68a; }
.pl-alert.ok{ background:var(--ok-soft); border:1px solid var(--ok-line); color:#d1fae5; }
.pl-alert .ic{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.pl-check{ display:grid; gap:8px; margin:6px 0 16px; }
.pl-check button{ display:flex; align-items:center; gap:10px; text-align:right; padding:11px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--tx); font-size:.9rem; }
.pl-check button:hover{ border-color:var(--line-2); background:var(--glass-2); }
.pl-check .ic{ color:var(--v-hi); }
.pl-check small{ margin-inline-start:auto; color:var(--tx-3); font-size:.8rem; }
.pl-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:4px; }

/* ================= الصفحة العامة (قبل الدخول) ================= */
body.on-landing{ overflow-x:hidden; }
body.on-landing .topbar, body.on-landing main{ display:none; }
.landing{ position:relative; z-index:3; min-height:100vh; }
.landing[hidden]{ display:none; }
.ld-wrap{ max-width:1200px; margin:0 auto; padding:0 22px; }
.ld-nav{ position:sticky; top:0; z-index:10; background:rgba(6,6,10,0); border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s; }
.ld-nav.scrolled{ border-bottom-color:var(--line); background:rgba(8,7,13,.95); }
.ld-nav-in{ max-width:1200px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:22px; }
.ld-brand{ display:flex; align-items:center; gap:10px; color:var(--tx); text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:1.1rem; }
.ld-brand:hover{ color:#fff; }
.ld-links{ display:flex; gap:4px; margin-inline-start:12px; }
.ld-links a{ color:var(--tx-2); text-decoration:none; font-size:.92rem; font-weight:500; padding:8px 12px; border-radius:999px; transition:color .15s, background-color .15s; }
.ld-links a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.ld-nav-cta{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.ld-login{ background:none; border:none; color:var(--tx); font-weight:600; font-size:.92rem; padding:8px 14px; border-radius:999px; }
.ld-login:hover{ background:rgba(255,255,255,.06); }
@media (max-width:860px){ .ld-links{ display:none; } }
.ld-hero{ position:relative; text-align:center; padding:64px 0 30px; }
.ld-chip{ display:inline-flex; align-items:center; gap:10px; padding:5px 14px 5px 6px; border-radius:999px; text-decoration:none; color:var(--tx-2); font-size:.86rem; font-weight:500;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .2s, color .2s; }
.ld-chip:hover{ color:#fff; border-color:var(--v-line); }
.ld-chip .new{ background:var(--v); color:#fff; font-weight:700; font-size:.76rem; border-radius:999px; padding:3px 10px; }
.ld-chip .ic{ width:15px; height:15px; }
.ld-h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.7rem, 8.2vw, 6.1rem); line-height:1.08; margin:26px auto 22px; max-width:14ch; text-wrap:balance; }
.ld-sub{ color:var(--tx-2); font-size:clamp(1rem, 1.6vw, 1.2rem); line-height:1.85; max-width:58ch; margin:0 auto 30px; }
.ld-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ld-cta .ic{ width:19px; height:19px; }
.ld-trust{ display:flex; gap:8px 22px; justify-content:center; flex-wrap:wrap; margin-top:22px; color:var(--tx-3); font-size:.86rem; }
.ld-trust li{ display:inline-flex; align-items:center; gap:7px; }
.ld-trust .ic{ width:16px; height:16px; color:var(--v-hi); }
.ld-err{ margin:16px auto 0; max-width:540px; background:var(--bad-soft); border:1px solid var(--bad-line); color:#fecaca; border-radius:14px; padding:11px 14px; font-size:.9rem; }
.ld-err[hidden]{ display:none; }

/* المسرح: شاشة اللعبة + بطاقات طايرة */
.ld-stage{ position:relative; max-width:980px; margin:58px auto 0; padding:0 10px; }
.ld-stage::before{ content:""; position:absolute; inset:-4% -8% -16%; background:radial-gradient(ellipse 55% 50% at 50% 42%, rgba(124,92,255,.42), rgba(124,92,255,.12) 45%, transparent 72%); z-index:-1; pointer-events:none; }
.st-screen{ position:relative; border-radius:26px; padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid var(--line-2);
  box-shadow:0 60px 120px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.08); }
.st-inner{ border-radius:16px; background:#08070d; border:1px solid var(--line); padding:18px; text-align:right; }
.st-bar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.st-bar .dots{ display:flex; gap:6px; } .st-bar .dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); }
.st-bar .ttl{ display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:700; font-size:.95rem; }
.st-bar .ttl .g-tile{ width:28px; height:28px; border-radius:9px; }
.st-bar .ttl .g-tile .ic{ width:15px; height:15px; }
.st-bar .sc{ margin-inline-start:auto; display:flex; gap:6px; }
.st-bar .sc span{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.st-bar .sc span i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.st-board{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.st-board .h{ font-family:var(--f-display); font-weight:700; font-size:.78rem; text-align:center; color:var(--trivia-bright); padding:9px 4px; border-radius:10px; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3); }
.st-board .c{ display:grid; place-items:center; height:52px; border-radius:10px; font-family:var(--f-display); font-weight:800; font-size:1.3rem; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid var(--line-2); }
.st-board .c.u{ color:transparent; background:rgba(255,255,255,.015); border-color:var(--line); position:relative; }
.st-board .c.u::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); position:absolute; }
.st-board .c.hot{ border-color:rgba(110,231,183,.7); box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 14px 30px -12px rgba(16,185,129,.8); }
.st-float{ position:absolute; border-radius:18px; padding:12px 14px; text-align:right;
  background:linear-gradient(180deg, rgba(32,29,47,.98), rgba(21,19,31,.98)); border:1px solid var(--line-2); box-shadow:0 30px 60px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  animation:floaty 7s ease-in-out infinite; will-change:transform; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.ld-stage.off .st-float, .ld-marquee.off .mq-track{ animation-play-state:paused; }   /* تتوقف الحركة لما تطلع من الشاشة */
.st-float.f1{ top:-34px; right:-34px; width:230px; animation-delay:-1s; }
.st-float.f2{ bottom:-40px; left:-36px; width:230px; animation-delay:-3s; }
.st-float.f3{ top:-28px; left:-62px; width:128px; padding:9px; animation-delay:-2s; }
.st-float.f4{ bottom:-26px; right:12%; animation-delay:-4.5s; display:flex; align-items:center; gap:10px; padding:10px 14px; }
.sf-k{ display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700; color:var(--tx-3); margin-bottom:6px; }
.sf-k .ic{ width:14px; height:14px; color:var(--v-hi); }
.sf-buzz{ display:flex; align-items:center; gap:10px; }
.sf-buzz .dot{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:#d95926; color:#fff; flex-shrink:0; box-shadow:0 0 22px rgba(217,89,38,.6); }
.sf-buzz .dot .ic{ width:18px; height:18px; }
.sf-buzz b{ display:block; font-size:.9rem; }
.sf-buzz small{ color:var(--tx-2); font-size:.76rem; }
.sf-ring{ margin-inline-start:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:.82rem; font-weight:600;
  background:conic-gradient(var(--v-hi) 0 72%, rgba(255,255,255,.1) 72% 100%); position:relative; }
.sf-ring::before{ content:""; position:absolute; inset:4px; border-radius:50%; background:#15131f; }
.sf-ring span{ position:relative; }
.sf-score{ display:grid; gap:7px; }
.sf-score div{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:.8rem; font-weight:700; }
.sf-score i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.sf-score .b{ height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.sf-score .b span{ display:block; height:100%; width:var(--w); background:var(--c); border-radius:inherit; }
.sf-phone{ width:100%; aspect-ratio:9/15; border-radius:20px; background:#0b0a12; border:1px solid var(--line-2); display:grid; place-items:center; position:relative; }
.sf-phone::before{ content:""; position:absolute; top:7px; width:34%; height:5px; border-radius:99px; background:rgba(255,255,255,.12); }
.sf-phone .btn{ width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, #6aa8ff, #2f6fd6 60%, #1d4fa8); box-shadow:0 0 30px rgba(57,135,229,.6), inset 0 -6px 12px rgba(0,0,0,.3);
  display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-weight:800; font-size:.8rem; }
.sf-plan{ display:flex; gap:6px; align-items:center; font-size:.78rem; font-weight:700; white-space:nowrap; }
.sf-plan span{ padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.sf-plan span.on{ background:var(--v-soft); border-color:var(--v-line); color:#fff; }
.sf-plan .ic{ width:13px; height:13px; color:var(--tx-3); }
@media (max-width:1060px){ .st-float.f1{ right:-8px; } .st-float.f2{ left:-8px; } .st-float.f3{ display:none; } }
@media (max-width:700px){
  .ld-hero{ padding-top:40px; }
  .ld-stage{ margin-top:40px; }
  .st-board{ grid-template-columns:repeat(3, 1fr); }
  .st-board .x{ display:none; }
  .st-float.f1{ top:auto; bottom:-30px; right:-4px; width:200px; }
  .st-float.f2, .st-float.f4{ display:none; }
  .st-bar .sc span:nth-child(n+2){ display:none; }
}
/* شريط الألعاب المتحرك */
.ld-marquee{ position:relative; margin:90px 0 0; padding:18px 0; border-block:1px solid var(--line); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track{ display:flex; gap:44px; width:max-content; direction:ltr; animation:mq 40s linear infinite; }
.mq-track span{ display:inline-flex; align-items:center; gap:10px; direction:rtl; font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--tx-2); white-space:nowrap; }
.mq-track .ic{ width:22px; height:22px; color:var(--v-hi); }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ld-marquee:hover .mq-track{ animation-play-state:paused; }
/* الأرقام */
.ld-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:56px auto 0; }
.ld-stat{ padding:22px; border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid var(--line); position:relative; overflow:hidden; }
.ld-stat b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem, 3.6vw, 2.6rem); line-height:1.1; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; text-align:right; }
.ld-stat span{ color:var(--tx-2); font-size:.9rem; }
@media (max-width:760px){ .ld-stats{ grid-template-columns:1fr 1fr; } }
/* الأقسام */
.ld-section{ padding:110px 0 0; }
.ld-head{ text-align:center; max-width:720px; margin:0 auto 42px; }
.ld-head .eyebrow{ margin-bottom:14px; }
.ld-h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem, 4.4vw, 3.1rem); line-height:1.15; margin-bottom:14px; text-wrap:balance; }
.ld-lead{ color:var(--tx-2); font-size:1.02rem; line-height:1.85; }
/* المميزات (بنتو) */
.ld-bento{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.bn{ position:relative; overflow:hidden; padding:26px; border-radius:var(--r-xl); min-height:250px; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line); box-shadow:var(--sh-1); }
.bn.wide{ grid-column:span 2; }
.bn h3{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; margin:14px 0 8px; }
.bn p{ color:var(--tx-2); font-size:.94rem; line-height:1.8; }
.bn .g-tile{ --accent:var(--v); --accent-bright:var(--v-hi); }
.bn-vis{ margin-top:auto; padding-top:22px; }
.bn-timeline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bn-timeline .r{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:.84rem; font-weight:600; }
.bn-timeline .r .gi{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:color-mix(in srgb, var(--a) 22%, transparent); color:var(--ab); }
.bn-timeline .r .gi .ic{ width:14px; height:14px; }
.bn-timeline .r small{ color:var(--tx-3); font-weight:500; }
.bn-timeline .r.on{ border-color:var(--v-line); background:var(--v-soft); }
.bn-timeline .ar{ color:var(--tx-3); }
.bn-timeline .ar .ic{ width:14px; height:14px; }
.bn-progress{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); margin-top:14px; overflow:hidden; }
.bn-progress i{ display:block; height:100%; width:42%; border-radius:inherit; background:linear-gradient(90deg, var(--v), var(--v-hi)); }
.bn-phones{ display:flex; gap:12px; justify-content:center; }
.bn-phones .ph{ width:64px; aspect-ratio:9/16; border-radius:14px; background:#0b0a12; border:1px solid var(--line-2); display:grid; place-items:center; }
.bn-phones .ph i{ width:56%; aspect-ratio:1; border-radius:50%; background:var(--c); box-shadow:0 0 22px var(--c); }
.bn-phones .ph.off i{ background:rgba(255,255,255,.1); box-shadow:none; }
.bn-tilt{ display:flex; justify-content:center; align-items:center; gap:18px; }
.bn-tilt .ph{ width:120px; height:62px; border-radius:14px; background:#0b0a12; border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--f-display); font-weight:800; transform:rotate(-8deg); box-shadow:0 20px 40px -20px rgba(6,182,212,.7); }
.bn-tilt .ar{ display:flex; flex-direction:column; gap:6px; font-size:.78rem; font-weight:700; }
.bn-tilt .ar span:first-child{ color:var(--ok); } .bn-tilt .ar span:last-child{ color:var(--tx-3); }
.bn-bars{ display:grid; gap:9px; }
.bn-bars div{ display:grid; grid-template-columns:70px 1fr 28px; gap:10px; align-items:center; font-size:.82rem; font-weight:700; }
.bn-bars .b{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.bn-bars .b span{ display:block; height:100%; border-radius:inherit; width:var(--w); background:var(--c); }
.bn-big{ font-family:var(--f-display); font-weight:800; font-size:3.2rem; line-height:1; unicode-bidi:plaintext; }
.bn-big small{ display:block; font-family:var(--f-body); font-size:.84rem; font-weight:500; color:var(--tx-2); margin-top:8px; }
@media (max-width:900px){ .ld-bento{ grid-template-columns:1fr 1fr; } .bn.wide{ grid-column:1 / -1; } }
@media (max-width:600px){ .ld-bento{ grid-template-columns:1fr; } .bn{ min-height:0; } }
/* بطاقات الألعاب */
.ld-games{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.ld-game{ position:relative; overflow:hidden; padding:24px; border-radius:var(--r-xl); display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .25s var(--ease), border-color .25s; }
.ld-game::before{ content:""; position:absolute; top:-90px; left:-90px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%); pointer-events:none; }
.ld-game:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.ld-game h3{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; }
.ld-game p{ color:var(--tx-2); font-size:.92rem; line-height:1.75; }
.ld-game ul{ display:grid; gap:7px; margin-top:auto; padding-top:6px; font-size:.86rem; border-top:1px solid var(--line); padding-top:14px; }
.ld-game li{ display:flex; gap:8px; align-items:baseline; color:var(--tx-2); }
.ld-game li b{ color:var(--accent-bright); white-space:nowrap; font-weight:700; }
/* الخطوات */
.ld-steps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; position:relative; }
.ld-step{ position:relative; padding:26px; border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border:1px solid var(--line); }
.ld-step .no{ font-family:var(--f-display); font-weight:800; font-size:3.4rem; line-height:1; color:transparent; -webkit-text-stroke:1.2px rgba(162,141,255,.6); margin-bottom:16px; display:block; }
.ld-step h3{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; margin-bottom:6px; }
.ld-step p{ color:var(--tx-2); font-size:.92rem; line-height:1.8; }
@media (max-width:760px){ .ld-steps{ grid-template-columns:1fr; } }
/* الأسئلة */
.ld-faq{ max-width:820px; margin:0 auto; }
.ld-faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.ld-faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 4px; font-family:var(--f-display); font-weight:600; font-size:1.06rem; }
.ld-faq summary::-webkit-details-marker{ display:none; }
.ld-faq summary::after{ content:"+"; display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid var(--line-2); color:var(--tx-2); font-family:var(--f-body); font-size:1.2rem; transition:transform .25s var(--ease), background-color .2s; }
.ld-faq details[open] summary::after{ transform:rotate(45deg); background:var(--v-soft); border-color:var(--v-line); color:#fff; }
.ld-faq details p{ color:var(--tx-2); font-size:.96rem; line-height:1.9; padding:0 4px 18px; }
/* الدعوة الأخيرة */
.ld-final{ margin:110px 0 0; position:relative; overflow:hidden; text-align:center; padding:64px 26px; border-radius:32px;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(124,92,255,.45), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid var(--v-line); box-shadow:0 50px 120px -50px rgba(124,92,255,.7); }
.ld-final h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.15; margin-bottom:14px; }
.ld-final p{ color:var(--tx-2); max-width:52ch; margin:0 auto 26px; font-size:1.04rem; }
.ld-foot{ margin-top:70px; padding:28px 0 36px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--tx-3); font-size:.88rem; }
.ld-foot nav{ display:flex; gap:6px 18px; flex-wrap:wrap; }
.ld-foot a{ color:var(--tx-2); text-decoration:none; }
.ld-foot a:hover{ color:#fff; }
/* (v13) بيانات البائع (الاسم · رقم وثيقة العمل الحر · التوثيق) — ميسّر ومنصة الأعمال يراجعونها */
.ld-seller{ flex-basis:100%; margin:2px 0 0; color:var(--tx-3); font-size:.82rem; line-height:1.85; white-space:pre-line; overflow-wrap:anywhere; }
.ld-seller[hidden]{ display:none; }
.ld-seller a{ color:var(--tx-2); text-decoration:underline; text-underline-offset:3px; }
/* ظهور عند التمرير */
.ld-section, .ld-hero{ scroll-margin-top:84px; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } .st-float, .mq-track{ animation:none; } }
/* ===== طريق المليون ===== */
:root{ --million:#facc15; --million-bright:#fef08a; }
.ml-wrap{ max-width:1180px; margin:0 auto; }
.ml-stage{ display:grid; grid-template-columns:minmax(0, 1fr) 248px; gap:18px; align-items:start; }
.ml-stage.one{ grid-template-columns:minmax(0, 1fr); max-width:980px; margin:0 auto; }
.ml-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.ml-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ml-team{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; font-weight:800;
  background:color-mix(in srgb, var(--c) 18%, transparent); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.ml-team i{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.ml-now{ color:var(--tx-2); font-weight:600; font-size:.95rem; }
.ml-now b, .ml-mini b, .ml-big, .ml-meta .for{ direction:ltr; unicode-bidi:isolate; }
.ml-now b{ color:var(--million-bright); font-family:var(--f-mono); font-size:1.05rem; }
.ml-lifes{ display:flex; gap:8px; flex-wrap:wrap; }
.ml-life{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(250,204,21,.35); background:rgba(250,204,21,.07); color:var(--tx); font:inherit; font-weight:700; font-size:.88rem; transition:border-color .2s, background .2s, opacity .2s; }
.ml-life .ic-w{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 4px; border-radius:999px; background:rgba(250,204,21,.18); color:var(--million-bright); font-family:var(--f-mono); font-size:.72rem; font-weight:800; }
.ml-life .ic-w .ic{ width:15px; height:15px; }
.ml-life:hover:not(:disabled){ border-color:var(--million); background:rgba(250,204,21,.14); }
.ml-life:disabled{ cursor:default; opacity:.45; }
.ml-life.used{ opacity:.3; text-decoration:line-through; }
.ml-qcard{ position:relative; padding:22px 24px 22px; border-radius:var(--r-xl); text-align:center; overflow:hidden;
  background:radial-gradient(120% 140% at 50% -30%, rgba(250,204,21,.16), transparent 55%), linear-gradient(180deg, rgba(124,92,255,.12), rgba(255,255,255,.02));
  border:1px solid rgba(250,204,21,.3); box-shadow:var(--sh-2); }
.ml-meta{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; font-size:.8rem; color:var(--tx-2); font-weight:600; }
.ml-meta span{ padding:3px 11px; border-radius:999px; background:var(--glass-2); border:1px solid var(--line); }
.ml-meta .lv1{ color:#86efac; } .ml-meta .lv2{ color:#fde68a; } .ml-meta .lv3{ color:#fca5a5; }
.ml-meta .for{ color:var(--million-bright); border-color:rgba(250,204,21,.35); }
.ml-q{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem, 2.5vw, 2.05rem); line-height:1.6; margin:0; text-wrap:balance; }
.ml-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ml-opt{ position:relative; display:flex; align-items:center; gap:12px; min-height:66px; padding:12px 16px; border-radius:20px; text-align:right; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border:1.5px solid var(--line-2); color:var(--tx);
  font:inherit; font-family:var(--f-display); font-weight:600; font-size:clamp(1rem, 1.55vw, 1.3rem); line-height:1.45;
  transition:transform .15s var(--ease), border-color .2s, background .25s, box-shadow .25s, opacity .3s;
  overflow:hidden;
}
.ml-opt .k{ flex:0 0 auto; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:rgba(250,204,21,.14); color:var(--million-bright); font-weight:800; font-size:1.05rem; transition:background .25s, color .25s; }
.ml-opt .t{ flex:1; min-width:0; }
.ml-opt .who{ display:flex; gap:4px; flex-wrap:wrap; max-width:40%; justify-content:flex-end; }
.ml-opt .who i{ width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.ml-opt:hover:not(:disabled){ border-color:rgba(250,204,21,.65); transform:translateY(-1px); }
.ml-opt:disabled{ cursor:default; }
.ml-opt.sel{ border-color:var(--million); background:linear-gradient(180deg, rgba(250,204,21,.3), rgba(250,204,21,.12)); box-shadow:0 0 0 3px rgba(250,204,21,.18), 0 0 30px -6px rgba(250,204,21,.6); }
.ml-opt.sel .k{ background:var(--million); color:#1c1604; }
.ml-opt.lock{ animation:mlPulse .9s ease-in-out infinite; }   /* لحظة التشويق قصيرة (ثواني) — نخليها */
.ml-opt.ok{ border-color:#22c55e; background:linear-gradient(180deg, rgba(34,197,94,.45), rgba(34,197,94,.18)); box-shadow:0 0 36px -6px rgba(34,197,94,.75); animation:mlPop .5s var(--ease); }
.ml-opt.ok .k{ background:#22c55e; color:#03140a; }
.ml-opt.no{ border-color:#ef4444; background:linear-gradient(180deg, rgba(239,68,68,.42), rgba(239,68,68,.16)); }
.ml-opt.no .k{ background:#ef4444; color:#fff; }
.ml-opt.dim{ opacity:.45; }
.ml-opt .pct{ position:relative; flex:0 0 auto; font-family:var(--f-mono); font-weight:800; font-size:.86rem; color:var(--million-bright); padding:3px 10px; border-radius:999px; background:rgba(250,204,21,.13); border:1px solid rgba(250,204,21,.32); direction:ltr; }
.ml-opt .af{ position:absolute; inset-inline-start:0; bottom:0; height:4px; background:linear-gradient(90deg, #f59e0b, var(--million)); opacity:.85; pointer-events:none; }
.ml-opt.rm .af, .ml-opt.rm .pct{ display:none; }
.ml-voting .ml-timer{ width:46px; height:46px; }
.ml-voting .ml-timer b{ font-size:1.05rem; }
.ml-opt.rm{ opacity:.14; }
.ml-opt.rm .t{ visibility:hidden; }
@keyframes mlPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(250,204,21,.18), 0 0 18px -6px rgba(250,204,21,.5); } 50%{ box-shadow:0 0 0 7px rgba(250,204,21,.28), 0 0 46px -4px rgba(250,204,21,.9); } }
@keyframes mlPop{ 0%{ transform:scale(.97); } 60%{ transform:scale(1.025); } 100%{ transform:none; } }
.ml-bar{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border-radius:18px; background:var(--glass); border:1px solid var(--line); text-align:center; }
.ml-bar .msg{ font-weight:800; font-size:1.02rem; }
.ml-bar.sel{ border-color:rgba(250,204,21,.45); background:rgba(250,204,21,.07); }
.ml-bar.ok{ border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.1); }
.ml-bar.no{ border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.1); }
.ml-dots::after{ content:"…"; display:inline-block; width:1.2em; text-align:right; animation:mlDots 1.2s steps(4, end) infinite; overflow:hidden; vertical-align:bottom; }
@keyframes mlDots{ 0%{ width:0; } 100%{ width:1.2em; } }
/* السلّم */
.ml-ladder{ position:sticky; top:110px; padding:10px; border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(250,204,21,.05), var(--s1) 30%); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.ml-step{ display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:10px; font-size:.88rem; color:var(--tx-3); transition:background .3s; }
.ml-step .no{ width:22px; text-align:center; font-family:var(--f-mono); font-size:.76rem; opacity:.8; }
.ml-step .amt{ flex:1; text-align:left; font-family:var(--f-mono); font-weight:700; }
.ml-step .sf{ width:18px; font-size:.78rem; text-align:center; }
.ml-step.safe{ color:var(--tx); }
.ml-step.done{ color:var(--million-bright); }
.ml-step.top .amt{ font-family:var(--f-display); color:var(--million-bright); }
.ml-step.cur{ background:linear-gradient(90deg, rgba(250,204,21,.38), rgba(250,204,21,.12)); color:#fff; box-shadow:inset 0 0 0 1px rgba(250,204,21,.65); }
.ml-mini{ display:none; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; color:var(--tx-2); }
.ml-mini .bar{ flex:1 1 100%; height:6px; border-radius:999px; background:var(--glass-3); overflow:hidden; }
.ml-mini .bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--million), #f59e0b); }
.ml-mini b{ color:var(--million-bright); font-family:var(--f-mono); }
/* رأي الجمهور */
.ml-aud{ padding:14px 16px; border-radius:18px; background:var(--glass); border:1px solid rgba(250,204,21,.25); }
.ml-aud h4{ margin:0 0 12px; font-size:.95rem; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ml-aud h4 small{ color:var(--tx-3); font-weight:600; }
.ml-bars{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; align-items:end; height:160px; max-width:520px; margin:0 auto; }
.ml-bars .b{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.ml-bars .b i{ display:block; width:100%; max-width:58px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, var(--million-bright), var(--million) 40%, #ca8a04); min-height:3px; transition:height .9s var(--ease); }
.ml-bars .b span{ font-family:var(--f-mono); font-weight:700; font-size:.9rem; direction:ltr; }
.ml-bars .b b{ font-family:var(--f-display); color:var(--million-bright); }
.ml-bars .b.off{ opacity:.35; }
/* المؤقت الدائري */
.ml-timer{ --p:100; position:relative; display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--million) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); transition:background .25s; }
.ml-timer::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--s2); }
.ml-timer b{ position:relative; font-family:var(--f-mono); font-size:1.25rem; font-weight:800; }
.ml-timer.warn{ background:conic-gradient(#ef4444 calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.ml-timer.warn b{ color:#fca5a5; }
.ml-timer.xl{ display:grid; width:180px; height:180px; margin:14px auto; }
.ml-timer.xl::before{ inset:12px; }
.ml-timer.xl b{ font-size:3.4rem; }
/* اتصل بصديق */
.ml-friend{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:radial-gradient(ellipse at 50% 45%, rgba(28,22,8,.9), rgba(4,4,7,.95)); animation:mlFade .25s ease; }
.ml-friend .box{ text-align:center; padding:26px 24px; border-radius:var(--r-xl); background:var(--s2); border:1px solid rgba(250,204,21,.35); width:min(100%, 420px); box-shadow:var(--sh-2); }
.ml-friend .ic.big{ width:44px; height:44px; color:var(--million-bright); }
.ml-friend h3{ font-family:var(--f-display); margin:6px 0 4px; font-size:1.5rem; }
.ml-friend p{ color:var(--tx-2); margin:0; }
@keyframes mlFade{ from{ opacity:0; } to{ opacity:1; } }
/* بطاقات البداية والنهاية */
.ml-card{ max-width:640px; margin:0 auto; padding:30px 26px; border-radius:var(--r-xl); text-align:center; box-shadow:var(--sh-2);
  background:radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--c, var(--million)) 22%, transparent), transparent 60%), var(--s1);
  border:1px solid color-mix(in srgb, var(--c, var(--million)) 40%, transparent); }
.ml-card h3{ font-family:var(--f-display); font-size:clamp(1.35rem, 3vw, 1.9rem); margin:6px 0 10px; line-height:1.5; }
.ml-card h3 b{ color:var(--c, var(--million-bright)); }
.ml-card p{ color:var(--tx-2); margin:0 0 10px; line-height:1.8; }
.ml-card .btn-lg{ margin-top:12px; }
.ml-kicker{ display:inline-block; font-size:.8rem; font-weight:700; color:var(--million-bright); background:rgba(250,204,21,.1); border:1px solid rgba(250,204,21,.3); padding:3px 12px; border-radius:999px; }
.ml-chair{ font-size:3.6rem; line-height:1; margin:6px 0 12px; filter:drop-shadow(0 10px 24px rgba(250,204,21,.35)); }
.ml-sub{ font-size:.9rem; }
.ml-big{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem, 7vw, 4rem); line-height:1.1; margin:6px 0 4px; color:var(--million-bright); text-shadow:0 10px 40px rgba(250,204,21,.35); }
.ml-gain{ font-weight:700; color:var(--tx) !important; }
.ml-board{ display:flex; flex-direction:column; gap:6px; margin:16px auto 6px; max-width:440px; }
.ml-row{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:14px; background:var(--glass-2); border:1px solid var(--line); text-align:right; }
.ml-row i{ width:10px; height:10px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.ml-row b{ flex:1; }
.ml-row span{ color:var(--tx-2); font-size:.9rem; }
.ml-row em{ font-style:normal; font-family:var(--f-mono); font-weight:800; color:var(--million-bright); min-width:36px; text-align:left; direction:ltr; }
.ml-row.wait{ opacity:.55; }
/* الكل يجاوب */
.ml-teams{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ml-tchip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--glass); font-weight:700; font-size:.9rem; transition:background .25s, border-color .25s; }
.ml-tchip i{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.ml-tchip.done{ border-color:color-mix(in srgb, var(--c) 70%, transparent); background:color-mix(in srgb, var(--c) 18%, transparent); }
.ml-tchip .ck{ color:var(--ok); } .ml-tchip .x{ color:var(--tx-3); } .ml-tchip .w{ opacity:.7; }
.ml-manual{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:16px; background:var(--glass); border:1px dashed var(--line-2); }
.mm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mm-row b{ display:inline-flex; align-items:center; gap:8px; }
.mm-row b i{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.mm-row span{ display:flex; gap:6px; }
.mm-row button{ width:42px; height:38px; border-radius:11px; border:1px solid var(--line-2); background:var(--glass-2); color:var(--tx); font:inherit; font-weight:800; cursor:pointer; }
.mm-row button:hover{ border-color:rgba(250,204,21,.6); }
.mm-row b em{ font-style:normal; font-weight:600; font-size:.78rem; color:var(--tx-3); margin-inline-start:4px; }
.mm-row.done b em{ color:var(--ok); }
.mm-hint{ margin:0 0 2px; font-size:.8rem; color:var(--tx-3); }
.ml-note{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:14px; background:var(--warn-soft); border:1px solid var(--warn-line); font-size:.9rem; color:#fde68a; }
.ml-note .ic{ width:18px; height:18px; flex:0 0 auto; }
.ml-note span{ flex:1; min-width:200px; }
@media (max-width: 860px){
  .ml-stage{ grid-template-columns:minmax(0, 1fr); }
  .ml-ladder{ display:none; }
  .ml-mini{ display:flex; }
}
@media (max-width: 560px){
  .ml-opts{ grid-template-columns:1fr; gap:9px; }
  .ml-opt{ min-height:56px; }
  .ml-qcard{ padding:18px 16px; }
  .ml-card{ padding:24px 16px; }
  .ml-life{ padding:7px 11px 7px 9px; font-size:.82rem; }
}
@media (prefers-reduced-motion: reduce){ .ml-opt.lock, .ml-opt.ok, .ml-dots::after{ animation:none; } }
/* =====================================================================
   v7 — تحسينات التصميم: نفس الهوية (أسود + بنفسجي)، تفاصيل أغنى، وحركة أخف
   ===================================================================== */
/* الشاشات الكبيرة (التلفزيون): الخط والمساحة يكبرون شوي */
@media (min-width:1600px){ html{ font-size:17px; } main{ max-width:1320px; } }
@media (min-width:1900px){ html{ font-size:18.5px; } main{ max-width:1480px; } }
@media (min-width:2500px){ html{ font-size:23px; } main{ max-width:1860px; } }

/* شريط الألعاب: أيقونة كل لعبة بلونها */
.nav-pills button[data-view="home"]{ --pa:var(--v-hi); }
.nav-pills button[data-view="trivia"]{ --pa:var(--trivia-bright); }
.nav-pills button[data-view="emoji"]{ --pa:var(--emoji-bright); }
.nav-pills button[data-view="letters"]{ --pa:var(--letters-bright); }
.nav-pills button[data-view="flags"]{ --pa:var(--flags-bright); }
.nav-pills button[data-view="heads"]{ --pa:var(--heads-bright); }
.nav-pills button[data-view="charades"]{ --pa:var(--char-bright); }
.nav-pills button[data-view="million"]{ --pa:var(--million-bright); }
.nav-pills button[data-view="mafia"]{ --pa:var(--mafia-bright); }
.nav-pills button[data-view="rope"]{ --pa:var(--rope-bright); }
/* ================= مربوطين ================= */
.mc-new{ display:inline-block; vertical-align:middle; margin-inline-start:6px; font-family:var(--f-body, inherit); font-size:.68rem; font-weight:800; letter-spacing:0;
  padding:2px 8px; border-radius:999px; color:#1a2e05; background:var(--rope-bright); }
.rp-host{ position:relative; }
.rp-loading{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:220px; color:var(--tx-2); font-weight:700; }
.rp-lv{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:20px; align-items:center; padding:18px; border-radius:var(--r-xl);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--th) 14%, transparent), transparent 62%), linear-gradient(180deg, #15131f, #0f0e17);
  border:1px solid color-mix(in srgb, var(--th) 30%, var(--line-2)); }
.rp-lv-art canvas{ width:100%; height:auto; aspect-ratio:560 / 220; display:block; border-radius:18px; border:1px solid rgba(255,255,255,.08); }
.rp-kick{ display:inline-block; font-size:.78rem; font-weight:700; color:var(--rope-bright); background:rgba(132,204,22,.1); border:1px solid rgba(132,204,22,.3); padding:3px 11px; border-radius:999px; }
.rp-lv-info h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.55rem, 3.2vw, 2.2rem); line-height:1.25; margin:10px 0 8px; }
.rp-diff{ display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.rp-diff i{ width:24px; height:7px; border-radius:99px; background:rgba(255,255,255,.12); }
.rp-diff i.on{ background:var(--rope); box-shadow:0 0 12px -3px var(--rope); }
.rp-diff span{ margin-inline-start:8px; font-size:.84rem; color:var(--tx-2); font-weight:700; }
.rp-lv-info p{ color:var(--tx-2); font-size:.9rem; line-height:1.7; }
.rp-lv-info p b{ color:#fdba74; }
.rp-join{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:14px; margin:14px 0; }
.rp-qr-card, .rp-kb{ background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px; }
.rp-qr-card{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 16px; align-items:center; }
.rp-qr{ grid-row:span 2; }
.rp-qr svg{ width:148px; height:148px; display:block; background:#fff; border-radius:12px; padding:6px; }
.rp-qr-card p, .rp-kb p{ font-size:.88rem; color:var(--tx-2); line-height:1.7; }
.rp-qr-card p b, .rp-kb p b{ display:block; color:var(--tx); font-size:1rem; margin-bottom:2px; font-family:var(--f-display); }
.rp-copy{ justify-self:start; font-size:.8rem; background:none; border:1px dashed var(--line-3); color:var(--tx-2); border-radius:10px; padding:5px 12px; }
.rp-copy:hover{ color:#fff; border-style:solid; }
.rp-kb ul{ display:grid; gap:7px; margin-top:10px; }
.rp-kb li{ display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--tx-2); }
.rp-kb li.in{ color:var(--rope-bright); font-weight:700; }
.rp-kb li.in kbd{ border-color:rgba(132,204,22,.6); }
.rp-kb kbd{ flex:0 0 96px; text-align:center; font-family:var(--f-mono); font-size:.76rem; padding:4px 8px; border-radius:8px; background:rgba(255,255,255,.07);
  border:1px solid var(--line-2); border-bottom-width:3px; color:var(--tx); direction:ltr; }
.rp-slots{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; list-style:none; margin:0 0 18px; padding:0; }
.rp-slot{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; min-height:62px;
  background:rgba(255,255,255,.02); border:1px dashed var(--line-2); color:var(--tx-3); }
.rp-slot.on{ color:var(--tx); border-style:solid; border-color:color-mix(in srgb, var(--c) 60%, transparent); background:color-mix(in srgb, var(--c) 13%, transparent); padding-inline-end:40px; }
.rp-slot.away{ opacity:.5; }
.rp-slot b{ font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-slot small{ display:block; font-size:.74rem; color:var(--tx-3); }
.rp-slot > span:not(.rp-av), .rp-slot b{ min-width:0; }
.rp-av{ flex:0 0 auto; position:relative; width:30px; height:34px; border-radius:11px; background:var(--c); box-shadow:inset 0 -9px 0 rgba(0,0,0,.18); }
.rp-av::before, .rp-av::after{ content:""; position:absolute; top:10px; width:8px; height:10px; border-radius:50%; background:#fff; box-shadow:inset -2.5px 0 0 #111827; }
.rp-av::before{ left:7px; } .rp-av::after{ left:16px; }
.rp-av.empty{ background:transparent; border:1.5px dashed var(--line-3); box-shadow:none; }
.rp-av.empty::before, .rp-av.empty::after{ display:none; }
.rp-x{ position:absolute; top:6px; inset-inline-end:6px; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:.72rem;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); color:var(--tx-2); }
.rp-x:hover{ color:#fff; background:rgba(239,68,68,.35); }
/* الأشكال: صورة كل لاعب + زر 🎨 + نافذة التعديل */
.rp-look-tip{ margin:0 0 10px; font-size:.86rem; color:var(--tx-2); line-height:1.75; }
.rp-look-tip b{ color:var(--tx); }
.rp-avc{ flex:0 0 auto; width:42px; height:58px; display:block; }
.rp-sl{ display:flex; flex-direction:column; min-width:0; }
/* اتصال الجوال: ⚡ مباشر (نفس الشبكة) أو ☁️ عبر النت */
.rp-net{ display:inline-block; font-style:normal; font-size:.68rem; font-weight:700; margin-top:3px; padding:1px 7px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.06); color:var(--tx-3); }
.rp-net.on{ color:#fde68a; background:rgba(250,204,21,.14); }
.rp-net:empty{ display:none; }
.rp-ed{ position:absolute; bottom:6px; inset-inline-end:6px; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:.86rem;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); }
.rp-ed:hover{ background:color-mix(in srgb, var(--c) 32%, transparent); border-color:var(--c); }
.rp-edm{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(4,3,10,.66); }
.rp-edm[hidden]{ display:none; }
.rp-edm-card{ width:min(760px, 100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; padding:18px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, #17152a, #0f0e18); border:1px solid color-mix(in srgb, var(--c) 40%, var(--line-2)); box-shadow:0 30px 80px -30px #000; animation:popIn .28s var(--ease); }
.rp-edm-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.rp-edm-h h3{ font-family:var(--f-display); font-weight:800; font-size:1.2rem; }
.rp-edm-x{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--tx-2); }
.rp-edm-x:hover{ color:#fff; border-color:var(--line-3); }
.rp-edm-f{ display:flex; justify-content:center; margin-top:14px; }
.rp-edm-f .btn-primary{ min-width:200px; }
.lk{ display:grid; grid-template-columns:minmax(0, 230px) minmax(0, 1fr); gap:16px; align-items:start; }
.lk-stage{ display:grid; gap:8px; padding:8px 8px 10px; border-radius:18px; border:1px solid var(--line-2);
  background:radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #0c0b15; }
.lk-cv{ width:100%; height:270px; display:block; }
.lk-rand{ font:inherit; font-size:.84rem; font-weight:700; padding:8px 12px; border-radius:12px; color:var(--tx); background:rgba(255,255,255,.06); border:1px solid var(--line-2); }
.lk-rand:hover{ border-color:var(--c); }
.lk-rows{ display:grid; gap:11px; }
.lk-row{ display:grid; grid-template-columns:62px minmax(0, 1fr); align-items:center; gap:10px; }
.lk-l{ font-size:.82rem; font-weight:700; color:var(--tx-2); }
.lk-ch{ display:flex; flex-wrap:wrap; gap:6px; }
.lk-c{ font:inherit; font-size:.86rem; font-weight:700; padding:7px 13px; border-radius:999px; color:var(--tx-2); background:rgba(255,255,255,.045); border:1px solid var(--line-2); transition:background .15s, border-color .15s, color .15s; }
.lk-c:hover{ color:var(--tx); border-color:var(--line-3); }
.lk-c.on{ color:#fff; background:color-mix(in srgb, var(--c) 30%, transparent); border-color:var(--c); }
.lk-c:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lk-face{ padding:0; width:52px; height:52px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.04); }
.lk-face canvas{ width:100%; height:100%; display:block; }
@media (max-width:640px){
  .lk{ grid-template-columns:1fr; }
  .lk-cv{ height:200px; }
  .lk-row{ grid-template-columns:54px minmax(0, 1fr); }
}
.rp-start{ text-align:center; }
.rp-go{ min-width:280px; font-size:1.12rem; padding:15px 28px; }
.rp-go small{ font-weight:600; opacity:.8; }
.rp-tip{ max-width:640px; margin:10px auto 0; color:var(--tx-2); font-size:.86rem; line-height:1.75; }
.rp-stage{ position:relative; width:100%; aspect-ratio:16 / 9; max-height:calc(100vh - 210px); max-height:calc(100dvh - 210px); margin-inline:auto;
  border-radius:var(--r-xl); overflow:hidden; background:#05040c; border:1px solid var(--line-2); box-shadow:0 30px 80px -40px #000; outline:none; }
.rp-stage[hidden]{ display:none; }
.rp-stage:fullscreen{ max-height:none; width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; border:0; }
.rp-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.rp-hud{ position:absolute; inset:10px 10px auto; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; pointer-events:none; }
.rp-hud > *{ pointer-events:auto; }
.rp-hl{ display:flex; flex-direction:column; gap:1px; padding:7px 14px; border-radius:14px; background:rgba(8,6,16,.6); border:1px solid rgba(255,255,255,.1); }
.rp-hl b{ font-family:var(--f-display); font-size:.98rem; } .rp-hl span{ font-size:.72rem; color:var(--tx-2); }
.rp-hs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.rp-hs span{ padding:6px 12px; border-radius:999px; background:rgba(8,6,16,.6); border:1px solid rgba(255,255,255,.1); font-size:.86rem; white-space:nowrap; }
.rp-hs b{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.rp-hb{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.rp-hb button{ padding:6px 12px; border-radius:999px; background:rgba(8,6,16,.6); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:.8rem; }
.rp-hb button:hover{ background:rgba(48,38,84,.85); }
.rp-off{ padding:6px 12px; border-radius:999px; background:rgba(239,68,68,.28); border:1px solid rgba(248,113,113,.5); font-size:.8rem; }
.rp-toast{ position:absolute; top:62px; left:50%; transform:translate(-50%, -8px); opacity:0; padding:9px 18px; border-radius:999px; max-width:90%;
  background:rgba(8,6,16,.8); border:1px solid rgba(255,255,255,.14); font-weight:700; font-size:.92rem; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-toast.in{ opacity:1; transform:translate(-50%, 0); }
.rp-over{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(4,3,10,.5); }
.rp-over[hidden]{ display:none; }
.rp-card{ width:min(440px, 92%); max-height:94%; overflow:auto; text-align:center; padding:24px; border-radius:var(--r-xl); background:linear-gradient(180deg, #17152a, #0f0e18);
  border:1px solid var(--line-2); box-shadow:0 30px 80px -30px #000; animation:popIn .32s var(--ease); }
.rp-card h3{ font-family:var(--f-display); font-weight:800; font-size:1.6rem; margin-bottom:4px; }
.rp-card > p{ color:var(--tx-2); }
.rp-stars{ display:flex; justify-content:center; gap:6px; font-size:2.5rem; line-height:1; margin-bottom:8px; }
.rp-stars i{ font-style:normal; color:rgba(255,255,255,.14); }
.rp-stars i.on{ color:#fde047; text-shadow:0 0 20px rgba(253,224,71,.55); }
.rp-res{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:16px 0 8px; }
.rp-res span{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.rp-res b{ font-family:var(--f-mono); font-size:1.25rem; } .rp-res small{ font-size:.74rem; color:var(--tx-3); }
.rp-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.rp-btns button{ flex:1 1 170px; }
@media (max-width:820px){
  .rp-lv, .rp-join{ grid-template-columns:1fr; }
  .rp-slots{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .rp-qr-card{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .rp-qr{ grid-row:auto; }
  .rp-copy{ justify-self:center; }
  .rp-hl{ display:none; }
  .rp-hs span{ padding:5px 9px; font-size:.76rem; }
  .rp-hb button{ padding:5px 9px; font-size:.74rem; }
  .rp-go{ min-width:0; width:100%; }
}

.nav-pills button:hover .ic, .nav-pills button.active .ic{ color:var(--pa, var(--v-hi)); opacity:1; }

/* الرئيسية: هلال صغير جنب «وش نلعب الليلة؟» */
.home-head h2::after{ content:""; display:inline-block; width:1.25em; height:1.25em; margin:-.3em .12em -.25em 0; vertical-align:-.05em;
  background:var(--moon) center/contain no-repeat; }

/* بطاقات الألعاب: لمسة لون اللعبة + أيقونتها كبيرة باهتة بالزاوية */
.mode-card::after{ content:""; position:absolute; inset:0 16% auto; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent-bright), transparent); opacity:.32; transition:opacity .25s; }
.mode-card:hover::after, .mode-card:focus-visible::after{ opacity:1; }
.mode-card > .g-tile, .mode-card > h3, .mode-card > .mc-cta{ position:relative; z-index:1; }
.mc-art{ position:absolute; left:-20px; bottom:-24px; width:136px; height:136px; color:var(--accent-bright); opacity:.08; pointer-events:none;
  transform:rotate(-14deg); transition:transform .55s var(--ease-out), opacity .3s; }
.mc-art .ic{ width:100%; height:100%; stroke-width:1.05; }
.mode-card:hover .mc-art, .mode-card:focus-visible .mc-art{ opacity:.2; transform:rotate(-5deg) scale(1.07); }

/* شاشة «ابدأ جولة»: نجوم خفيفة + مدار حول أيقونة اللعبة */
.rg-card::before, .challenge-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--stars-c), var(--stars-a); background-size:180px 180px, 260px 260px; background-position:20px 10px, 0 0; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 58% at 50% 0%, #000, transparent 76%); mask-image:radial-gradient(ellipse 80% 58% at 50% 0%, #000, transparent 76%); }
.rg-card > *, .challenge-card > *{ position:relative; }
.rg-icon .g-tile::after{ content:""; position:absolute; inset:-15px; border-radius:31px; border:1px dashed color-mix(in srgb, var(--accent) 42%, transparent); pointer-events:none; }
/* زر «ابدأ» وهو يجهّز الجولة */
.rg-btns .is-loading{ cursor:progress; }
.rg-btns .btn-primary.is-loading:disabled{ color:#fff; background:linear-gradient(180deg, #9076ff, #6c4cff); border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px -8px var(--v-glow), 0 0 0 1px rgba(124,92,255,.5); }
.rg-btns .btn-ghost.is-loading:disabled{ opacity:1; }
.is-loading .spin{ display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* سين جيم: لوحة أفخم، والخلية المأخوذة تتلون بلون الفريق */
.tb-cell:not(:disabled){ text-shadow:0 2px 14px rgba(16,185,129,.28); }
.tb-cell.won{ color:color-mix(in srgb, var(--c) 40%, #fff); border-color:color-mix(in srgb, var(--c) 52%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #0e0d15), color-mix(in srgb, var(--c) 10%, #0e0d15)); }
.tb-cell.won .by{ box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 10px var(--c); }

/* بطاقة السؤال/اللغز */
.modal::before{ content:""; position:absolute; inset:0 20% auto; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(162,141,255,.75), transparent); }

/* شاشة التحميل والدخول: نفس سماء الموقع */
.boot-overlay, .auth-gate{ background:radial-gradient(ellipse 60% 45% at 50% 0%, rgba(124,92,255,.24), transparent 70%), var(--stars-a) 0 0/260px 260px, var(--bg); }

/* الصفحة العامة: هلال فوق العنوان */
.ld-hero::before{ content:""; position:absolute; top:8px; left:max(4px, calc(50% - 600px)); width:170px; height:170px; pointer-events:none;
  background:var(--moon) center/contain no-repeat; }
.ld-hero > *{ position:relative; }
@media (max-width:700px){ .ld-hero::before{ width:78px; height:78px; top:-26px; left:-4px; opacity:.85; } }
/* المافيا: ملف قضية بتوهج أحمر خفيف */
.ld-stat::after{ content:""; position:absolute; inset:0 30% auto; height:1px; background:linear-gradient(90deg, transparent, rgba(162,141,255,.55), transparent); }
.ld-game::after{ content:""; position:absolute; inset:0 18% auto; height:1px; background:linear-gradient(90deg, transparent, var(--accent-bright), transparent); opacity:.4; }
@media (prefers-reduced-motion: reduce){ .mc-art{ transition:none; } .is-loading .spin{ animation-duration:1.6s !important; animation-iteration-count:infinite !important; } }