/* ===== مسافة شريط إشعارات الموبايل =====
   env() هي القيمة الحقيقية من الجهاز (بتشتغل على iOS وأندرويد الجديد).
   لو رجّعت صفر — وده بيحصل كتير على أندرويد — بناخد حد أدنى 30px على الموبايل
   عشان المحتوى ما يقعش تحت الساعة والبطارية. */
:root{ --safe-top: env(safe-area-inset-top, 0px) }
/* الرقم الثابت اتشال — safe-top.js بيقيس القيمة الحقيقية من الجهاز */
/* ============ شخبط وافتكر (العب مع صاحبك) — الأساس المشترك (منسوخ من نسخة «اتحدّى نفسك» + الروم تحت) ============ */
:root{
  --bg:#101A2B; --bg2:#0B1322; --surface:#182741; --surface2:#1F3152;
  --line:#2A3E63; --ink:#F4EDDF; --ink-dim:#B9C3D8;
  --brass:#F2A31B; --brass-hi:#FFB93E; --coral:#FF6D5A; --teal:#2FC6B0;
  --cA:#E4573D; --cB:#2F86EB; --cC:#17A87B;
  --ok:#2ec27e; --bad:#ff5c5c;
  --r:18px; --r-lg:26px;
  --shadow:0 6px 0 #000a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  margin:0;min-height:100%;color:var(--ink);
  font-family:'Tajawal',system-ui,sans-serif;font-size:16px;line-height:1.55;
  background:
    radial-gradient(1200px 500px at 50% -150px,#1B2C4C 0%,transparent 60%),
    var(--bg);
  overscroll-behavior:contain;
  /* ═══ المتصفح ممنوع يظبط السكرول من ورانا ═══
     كروم بيعمل «تثبيت سكرول»: أول ما ارتفاع حاجة فوق الشاشة يتغيّر
     بيحرّك مكان الصفحة عشان اللي انت شايفه يفضل مكانه. اللعبة هنا
     بتغيّر ارتفاعات جوّه الشاشة مع كل رسالة من السيرفر، والنتيجة كانت
     نطّة في نص الدور. إحنا بنمسك مكان الصفحة بنفسنا في render()، فلو
     سبنا التثبيت شغّال يبقى اتنين بيشدّوا في الصفحة في وقت واحد. */
  overflow-anchor:none;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-top)) 14px calc(30px + env(safe-area-inset-bottom))}
h1,h2,h3,.display{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;letter-spacing:.5px;margin:0}
button{font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}

/* شريط الرايات (بانر خيامية) */
.bunting{height:26px;margin:0 -14px 10px;position:relative;
  background:
    linear-gradient(135deg,transparent 50%,var(--coral) 50%) 0 0/26px 26px repeat-x,
    linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;
  filter:drop-shadow(0 3px 0 #0007);
}
.bunting.teal{background:
    linear-gradient(135deg,transparent 50%,var(--teal) 50%) 0 0/26px 26px repeat-x,
    linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;}

/* ============ عناصر عامة ============ */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.tight{padding:12px}
.center{text-align:center}
.muted{color:var(--ink-dim);font-size:.92em}
.small{font-size:.85em}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.hidden{display:none !important}
.mt{margin-top:12px}.mb{margin-bottom:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r);cursor:pointer;user-select:none;
  background:var(--surface2);color:var(--ink);
  padding:13px 18px;font-size:17px;font-weight:700;
  box-shadow:0 5px 0 #000a;transition:transform .06s,box-shadow .06s,filter .15s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#161006;box-shadow:0 6px 0 #7a4d00}
.btn.primary:active{box-shadow:0 1px 0 #7a4d00}
.btn.coral{background:linear-gradient(180deg,#ff8571,var(--coral));color:#2b0c07;box-shadow:0 6px 0 #8a2417}
.btn.coral:active{box-shadow:0 1px 0 #8a2417}
.btn.teal{background:linear-gradient(180deg,#4fe0cb,var(--teal));color:#04231e;box-shadow:0 6px 0 #0d5a50}
.btn.teal:active{box-shadow:0 1px 0 #0d5a50}
.btn.ghost{background:transparent;border:2px dashed var(--line);box-shadow:none}
.btn.big{width:100%;padding:16px;font-size:20px;border-radius:var(--r-lg)}
.btn.sm{padding:8px 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 #000a}
.btn.sm:active{box-shadow:0 1px 0 #000a}

.field{width:100%;background:var(--bg2);border:2px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:13px 14px;outline:none}
.field:focus{border-color:var(--brass)}
textarea.field{resize:vertical;min-height:74px}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
  border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
.chip.on{border-color:var(--brass);background:#243318;color:var(--brass-hi)}
.chip.click{cursor:pointer}
.chip .x{opacity:.7}

.toasts{position:fixed;bottom:14px;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:8px;z-index:99;pointer-events:none;padding:0 14px}
.toast{background:#000d;border:2px solid var(--line);color:var(--ink);border-radius:14px;
  padding:10px 16px;font-weight:700;max-width:480px;animation:pop .18s ease;box-shadow:0 4px 0 #000}
.toast.err{border-color:var(--coral)}
.toast.ok{border-color:var(--teal)}
@keyframes pop{from{transform:translateY(10px) scale(.95);opacity:0}}

.net-banner{position:fixed;top:0;left:0;right:0;z-index:130;text-align:center;
  background:var(--coral);color:#2b0c07;font-weight:800;padding:calc(8px + var(--safe-top)) 8px 8px;box-shadow:0 4px 0 #0008}

/* ============ الهيدر ============ */
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.top img{width:52px;height:52px;filter:drop-shadow(0 3px 0 #0008)}
.top .title{font-size:34px;line-height:1;color:var(--brass-hi);text-shadow:0 3px 0 #000a}
.top .sub{color:var(--ink-dim);font-size:13px;margin-top:2px}

/* ============ الهوم ============ */
.avatar-pick{display:flex;align-items:center;gap:10px}
.avatar-big{font-size:44px;width:72px;height:72px;display:grid;place-items:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:20px;cursor:pointer;
  box-shadow:0 4px 0 #000a;transition:transform .08s}
.avatar-big:active{transform:scale(.92)}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-dim);margin:14px 0}
.or::before,.or::after{content:'';flex:1;height:2px;background:var(--line);border-radius:2px}
.code-input{letter-spacing:10px;text-align:center;font-size:26px;font-weight:800;direction:ltr}

/* ============ شاشة البداية (الإعدادات) ============ */
.stepper{display:flex;align-items:center;gap:12px;justify-content:center}
.stepper .val{font-family:'Lalezar';font-size:34px;min-width:56px;text-align:center;color:var(--brass-hi)}
.stepper button{width:46px;height:46px;border-radius:14px;font-size:24px}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-chip{display:flex;align-items:center;gap:8px;background:var(--bg2);border:2px solid var(--line);
  border-radius:14px;padding:10px;cursor:pointer;font-weight:800;font-size:14px;transition:transform .06s}
.cat-chip:active{transform:scale(.97)}
.cat-chip.on{border-color:var(--teal);background:#0d2b28;color:#8ff0e2}
.cat-chip.locked{opacity:.55;pointer-events:none}
.cat-chip .ic{font-size:20px}
.count-note{text-align:center;font-weight:800;color:var(--ink-dim)}
.count-note b{color:var(--brass-hi)}

/* ============ النتائج ============ */
.award{display:flex;align-items:center;gap:12px;background:var(--bg2);border:2px solid var(--line);
  border-radius:16px;padding:10px 14px;margin-bottom:8px;animation:pop .25s ease}
.award .aic{font-size:30px}
.award .at{font-weight:900}
.award .ad{font-size:13px;color:var(--ink-dim)}
/* كونفيتي */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ===== شريط علوي أنضف + لوجو صورة ===== */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;filter:none;opacity:.95;
  background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral))}
/* اللوجو طولي، فبيتقاس بالعرض: الراجل بيطلع بنفس حجم شخصيات باقي
   الألعاب بدل ما يتصغّر عشان يدخل في مربّع. */
.top img{width:46px;height:auto;object-fit:contain;transform:translateY(-10px);filter:drop-shadow(0 3px 6px #0008)}

/* ===== زرار الخروج الثابت ===== */
.leave-fab{position:fixed;bottom:14px;inset-inline-start:14px;z-index:120;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer;
  box-shadow:0 6px 0 #000a;transition:transform .07s}
.leave-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.ui-modal-ov{position:fixed;inset:0;z-index:300;background:#000b;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .16s;backdrop-filter:blur(3px)}
.ui-modal-ov.show{opacity:1}
.ui-modal{background:linear-gradient(180deg,var(--surface),#12203a);border:2px solid var(--line);border-radius:24px;
  width:100%;max-width:400px;padding:24px 22px;box-shadow:0 20px 50px #000c;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .18s}
.ui-modal-ov.show .ui-modal{transform:none}
.ui-modal-emoji{font-size:46px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px #0007)}
.ui-modal-title{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;margin:0 0 8px;color:var(--brass-hi)}
.ui-modal-body{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:18px}
.ui-modal-actions{display:flex;gap:10px}
.ui-modal-actions .btn{flex:1;margin:0}
/* ===== شاشة التعليمات (هيلب) الجديدة ===== */
.help-ov{position:fixed;inset:0;z-index:260;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.help-card{background:linear-gradient(180deg,#182741,#101d33);border:2px solid var(--line);border-radius:26px;
  width:100%;max-width:540px;max-height:92vh;overflow:auto;box-shadow:0 22px 55px #000d}
.help-hero{position:sticky;top:0;background:linear-gradient(180deg,#1d2f4f,#182741);padding:20px 22px 16px;border-bottom:2px solid var(--line);text-align:center;z-index:2}
.help-hero img{width:89px;height:auto;filter:drop-shadow(0 8px 16px #0009)}
.help-hero h2{font-family:'Lalezar','Tajawal',sans-serif;font-size:30px;margin:6px 0 2px}
.help-hero .sub{color:var(--dim);font-size:14px;font-weight:700}
.help-body{padding:8px 20px 4px}
.help-step{display:flex;gap:14px;padding:14px 4px;border-bottom:1px dashed #ffffff12}
.help-step:last-child{border-bottom:none}
/* line-height:1 — من غيرها الإيموجي بياخد سطر body (1.55) ويبان فوق نص المربع على أندرويد (٢٠٢٦-٠٩-٢١) */
.help-num{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;line-height:1;
  padding-top:var(--hz-emoji-down,0);padding-bottom:var(--hz-emoji-up,0);   /* تصحيح مكان الإيموجي حسب خط الجهاز — hazzar-ui.js بيحسبه */
  background:#0c1424;border:2px solid var(--line);box-shadow:inset 0 1px 0 #ffffff10}
.help-step h4{margin:0 0 3px;font-size:16.5px;font-weight:900}
.help-step p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.help-step .hl{color:var(--brass-hi);font-weight:800}
.help-step .warn{color:var(--coral);font-weight:800}
.help-foot{position:sticky;bottom:0;background:linear-gradient(0deg,#101d33,#101d33ee);padding:14px 20px 18px;border-top:2px solid var(--line)}
.help-chk{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;cursor:pointer;justify-content:center;margin-bottom:10px}
.help-chk input{width:17px;height:17px}

/* احترام مسافة أزرار النظام تحت */
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}

/* (كان هنا تحذير الغشاش — مالوش معنى وانت لوحدك) */
/* خلفية صلبة ورا شريط إشعارات الموبايل — عشان محتوى اللعبة ما يظهرش تحته */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--safe-top);
  background:var(--bg2,#0B1322);z-index:120;pointer-events:none}

/* الشاشات اللي بتغطي كل الموبايل — تحترم شريط الإشعارات هي كمان */
/* مسافة أزرار النظام تحت (شريط التنقّل أو شريط الإيماءات).
   env(safe-area-inset-bottom) بيرجّع القيمة الحقيقية من الجهاز نفسه: صفر على
   الموبايلات اللي مالهاش أزرار تحت، و24-48 بكسل على اللي ليها. يعني الحل
   بيظبط نفسه على أي جهاز من غير ما نكتب أرقام ولا نتعرّف على موديل بعينه.
   من غير السطر ده زرار «تمام يلا نلعب» كان بيقع تحت أزرار النظام. */
.ui-modal-ov,.help-ov{padding-top:calc(16px + var(--safe-top)) !important;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}

/* مفتاح ظبط المسافة فوق (جوه شيت المساعدة) */
.safe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 2px 2px;font-size:13px;color:var(--ink-dim,#B9C3D8)}
.safe-ctl{display:flex;align-items:center;gap:8px}
.safe-ctl button{width:30px;height:30px;border-radius:10px;font-size:18px;font-weight:900;line-height:1;
  background:#0d1830;border:1px solid var(--line);color:inherit;cursor:pointer}
.safe-ctl button:active{filter:brightness(1.3)}
.safe-ctl b{min-width:34px;text-align:center;font-size:14px;color:var(--brass-hi,#FFB93E)}
.safe-hint{font-size:11px;color:var(--muted,#8fa0bd);line-height:1.5;padding:0 2px 6px;text-align:center}

/* أيقونات الباب */
.ico-door{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;stroke:currentColor}
.leave-fab .ico-door{width:22px;height:22px;vertical-align:-4px}
.ui-modal .ui-emoji .ico-door{width:38px;height:38px}

/* ══════════════════════════════════════════════════════════════════════
   عناصر مشتركة مع باقي ألعاب «العب مع صاحبك» (الوقت واللقطة والنتايج)
   ══════════════════════════════════════════════════════════════════════ */
.help-ov,.ui-modal-ov,.hz-ov{overscroll-behavior:contain}


/* شريط الوقت — بيقيس وقت الرد على السؤال.
   blink بتشتغل لما الوقت يقرب يخلص. */
.timer{height:12px;background:var(--bg2);border:2px solid var(--line);border-radius:999px;
  overflow:hidden;margin-bottom:12px}
.timer .fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral));
  border-radius:999px;transition:width .2s linear}
.timer.low .fill{animation:blink .6s infinite}
@keyframes blink{50%{opacity:.35}}

/* التلات نقط اللي بتنبض — «بنكشف الإجابة...» في اللحظة اللي بين الدوسة
   ورد السيرفر. الحركة هي اللي بتقول «إحنا شغّالين»، مش هنجان. */
.ov-dots{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle}
.ov-dots i{width:5px;height:5px;border-radius:50%;background:var(--brass-hi);
  animation:ovDot 1.1s ease-in-out infinite}
.ov-dots i:nth-child(2){animation-delay:.16s}
.ov-dots i:nth-child(3){animation-delay:.32s}
@keyframes ovDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .ov-dots i{animation:none} }

/* أيقونة كارت الإحصائية — نفس كارت الجوايز في باقي الألعاب */
.award .aw-ic{font-size:30px}

/* الكاتيجوريز في شاشة البداية */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.cat-chips .chip{font-size:12.5px;padding:5px 10px}
.cat-chips .cat-chip{flex-direction:column;gap:1px;align-items:center}
.cat-chips .cat-chip .ch{font-size:9.5px;margin-top:1px}


/* ═══ ثيم اللعبة ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «شخبط وافتكر» — بنفسجي ليلكي وأصفر ماركر
   اللعبة كلها سبورة بيضا وأقلام، فاللون الأساسي ليلكي (#C084FC) واللون التاني
   أصفر هايلايتر (#FCD34D). الليلكي مش متاخد في أي عيلة: أبعد من بنفسجي
   «الجاسوس» الأزرق (#9E7BFF) ومن بينك «حبر سري» و«جمع الكلمة»، وفي /solo/
   هو اللون البنفسجي الوحيد. نفس الألوان متطبّقة على كارت اللعبة في /solo/.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#130D1F; --bg2:#0F0A1A; --surface:#1C1430; --surface2:#251B3E; --line:#3A2A5E;
  --brass:#9D5CF0; --brass-hi:#C084FC;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#E9A23B; --teal-hi:#FCD34D;        /* اللون التاني (الأزرار المساعدة) — أصفر ماركر */
  --coral:#FF6D5A; --coral-hi:#FF8571;
  --on-acc:#1A0B2E; --acc-sh:#5B2E9A;     /* خط وظل الزرار الأساسي */
  --on-two:#2A1B02; --two-sh:#7A5A0E;
  --on-coral:#2B0C07; --coral-sh:#8A2417;
  --tint:#2E1F4F; --tint-ink:#E9D5FF;    /* خلفية العناصر المفعّلة */
  --ring:#C084FC33;                              /* هالة التركيز */
  --ink-dim:#BFB3D6; --dim:#BFB3D6; --muted:#BFB3D6;
  --gold:#E9A23B; --gold-hi:#FCD34D; --gold-dk:#7A5410;
  --board:#FBFCFE;                               /* السبورة البيضا والخانات اللي فيها رسومات */
}

/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
  radial-gradient(1200px 500px at 50% -150px,#2A1B47 0%,transparent 60%),
  var(--bg)}

/* الشريط اللي فوق */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;
  filter:none;opacity:.95;background:linear-gradient(90deg,#9D5CF0,#C084FC,#FCD34D)}

/* الأزرار */
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  color:var(--on-acc);box-shadow:0 6px 0 var(--acc-sh)}
.btn.primary:active{box-shadow:0 1px 0 var(--acc-sh)}
.btn.teal{background:linear-gradient(180deg,var(--teal-hi),var(--teal));
  color:var(--on-two);box-shadow:0 6px 0 var(--two-sh)}
.btn.teal:active{box-shadow:0 1px 0 var(--two-sh)}
.btn.coral{background:linear-gradient(180deg,var(--coral-hi),var(--coral));
  color:var(--on-coral);box-shadow:0 6px 0 var(--coral-sh)}
.btn.coral:active{box-shadow:0 1px 0 var(--coral-sh)}
.btn.ghost{border-color:var(--line)}

/* زراير الهيدر التلاتة (▦ / 🏠 / ⚙️) — مربّعات بنفس المقاس بالظبط. */
.top .btn.sm{width:40px;height:40px;padding:0;border-radius:13px;font-size:17px;
  display:inline-grid;place-items:center;line-height:1}
.top #hz-settings-btn .hz-gear{width:20px;height:20px;vertical-align:0}
.ico-games,.ico-home{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em}
.top #games-btn .ico-games,.top #home-btn .ico-home{width:19px;height:19px;display:block;vertical-align:0}
/* اللوجو مربّع — نفس مقاس شخصيات باقي الألعاب */
.top img{width:46px;height:46px;transform:none}

/* ═══ الهيدر على الشاشات الضيقة ═══ تلات زراير + الاسم على سطر واحد */
@media (max-width:430px){
  .top{gap:7px}
  .top img{width:42px;height:42px}
  .top .title{font-size:26px}
  .top .btn.sm{width:36px;height:36px;font-size:15px;border-radius:11px}
  .top #hz-settings-btn .hz-gear{width:18px;height:18px}
  .top #games-btn .ico-games,.top #home-btn .ico-home{width:17px;height:17px}
}
@media (max-width:360px){
  .top{gap:6px}
  .top img{width:38px;height:38px}
  .top .title{font-size:22px}
  .top .sub{font-size:11.5px}
  .top .btn.sm{width:33px;height:33px;font-size:14px;border-radius:10px}
  .top #hz-settings-btn .hz-gear{width:16px;height:16px}
  .top #games-btn .ico-games,.top #home-btn .ico-home{width:16px;height:16px}
}

/* الحقول */
.field:focus{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--ring)}

/* الشيبس */
.chip.on,.cat-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}

/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#140E24)}
.ui-modal-title{color:var(--brass-hi)}
.ui-modal-body b{color:var(--brass-hi)}
.mm-sub{display:block;margin-top:8px;font-size:13.5px;opacity:.9}

/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#140E24)}
.help-hero{background:linear-gradient(180deg,#2A1B47,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#140E24,#140E24ee);border-top-color:var(--line)}
.help-num{background:#0C0816;border-color:var(--line)}
.help-step .hl{color:var(--brass-hi)}

.safe-ctl button,.notch-ctl button{background:var(--bg2);border-color:var(--line)}

/* بلوك «عن اللعبة» تحت اللعبة — مخفي لحد ما اللعبة ترسم. */
.hz-info{display:none}
.hz-info.hz-ready{display:block}

/* التدرّج مرة واحدة فوق بس */
body{background-repeat:no-repeat;background-color:var(--bg)}

/* حد أدنى مضمون للمسافة السفلية */
.app{padding-bottom:max(48px, calc(30px + env(safe-area-inset-bottom)))}

/* ═══ تنسيق خطوات التعليمات ═══ */
.help-step{padding:16px 4px}
.help-step h4{margin:0 0 6px}
.help-step p{line-height:1.75}
.help-step p + p{margin-top:9px}

/* الزرار يمشي مع عمود اللعب مش مع حرف الشاشة */
.leave-fab{inset-inline-start:max(14px, calc((100vw - 560px) / 2 + 14px))}
@media (min-width:720px){.leave-fab{bottom:40px}}

/* الطبقات المنبثقة متسحبش الصفحة اللي وراها */
.help-ov,.ui-modal-ov,.hz-ov,.sk-intro{overscroll-behavior:contain}

/* ══════════════════════════════════════════════════════════════════════
   شخبط وافتكر (اتحدّى نفسك) — شاشة الرسم
   فوق: مربع الكلمة (يمين) والشبكة (شمال) جنب بعض، وتحتهم السبورة البيضا بأقلامها
   على الحرف — والتلاتة لازم يبقوا في شاشة واحدة (fitBoard في app.js بيظبط حجم
   السبورة على اللي فاضل من الشاشة). الرسمة بتطير لخانتها، والأستيكة بتمسح السبورة.
   ══════════════════════════════════════════════════════════════════════ */

/* شريط رقم الجولة */
.round-badge{text-align:center;font-size:12.5px;color:var(--ink-dim);
  background:var(--bg2);border:2px solid var(--line);border-radius:999px;
  padding:6px 13px;margin:0 auto 10px;max-width:100%;width:max-content;line-height:1.5}
.round-badge b{color:var(--brass-hi);font-size:14.5px;font-family:'Lalezar','Tajawal',sans-serif}

/* ═══ اللوحة اللي فوق ═══ شكلك | نقطك | افتكرت · نسيت */
.board{position:relative;padding:0;overflow:hidden}
.bd-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.3fr 1fr;
  background:linear-gradient(180deg,var(--surface2),var(--surface));border-bottom:2px solid var(--line)}
.bd-p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-av{font-size:26px;line-height:1}
.bd-nm{font-size:12px;font-weight:700;color:var(--ink-dim);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-p.me .bd-nm{color:var(--brass-hi)}
.bd-sc{font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:1.05;color:var(--gold-hi)}
.bd-sc.bump{animation:ptBump .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ptBump{0%{transform:scale(1)}35%{transform:scale(1.5);filter:brightness(1.5)}100%{transform:scale(1)}}
.bd-fire{font-size:11.5px;min-height:15px;line-height:1.3}
.bd-tl{font-family:'Lalezar','Tajawal',sans-serif;font-size:21px;line-height:1.1;display:flex;gap:6px;align-items:center}
.bd-tl .ok{color:var(--ok)}
.bd-tl .no{color:var(--bad)}
.bd-tl i{font-style:normal;color:var(--ink-dim);opacity:.6}
.bd-p.score,.bd-p.tally{border-inline-start:1px solid var(--line)}
/* نقطة لكل جولة: كاملة خضرا، فيها غلط دهبي، ولا كلمة حمرا، والحالية بتنبض */
.bd-dots{position:relative;z-index:1;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.dt-col{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;padding:7px 8px;min-height:26px;min-width:0}
.dt{width:10px;height:10px;border-radius:50%;display:block;flex:none}
.dt.hit{background:var(--ok);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ok) 30%,transparent)}
.dt.part{background:var(--gold-hi)}
.dt.miss{background:transparent;border:2px solid var(--bad);opacity:.75}
.dt.cur{background:var(--brass-hi);animation:dtPulse 1.3s ease-in-out infinite}
.dt.todo{background:transparent;border:2px solid var(--line)}
@keyframes dtPulse{50%{box-shadow:0 0 0 5px var(--ring)}}

/* ═══ الرسومات (SVG) ═══ سُمك الخط ثابت بالبكسل في أي مقاس (vector-effect) */
.art{display:block;width:100%;height:100%}
.art path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:2px}
.art.pad path,.art.big path{stroke-width:5px}
.art.mid path{stroke-width:2.6px}
.art.mini path{stroke-width:1.7px}
.art.thumb path{stroke-width:1.4px}

/* ═══ فوق: مربع الكلمة + الشبكة ═══ */
.sk-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px;align-items:stretch}
.word-box{margin:0;padding:10px 10px 9px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-height:128px;
  transition:border-color .2s}
.wb-n{font-size:12px;color:var(--ink-dim);text-align:center;font-weight:700;line-height:1.2}
.wb-n b{color:var(--brass-hi);font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:14px}
.wb-stage{flex:1;display:grid;place-items:center;min-height:56px}
.wb-word{text-align:center;line-height:1.15;color:var(--ink);text-wrap:balance;word-break:break-word;font-size:30px}
.wb-word.sz-s{font-size:40px}
.wb-word.sz-m{font-size:33px}
.wb-word.sz-l{font-size:27px}
.wb-word.sz-xl{font-size:22px}
.wb-wait{font-size:20px;color:var(--ink-dim)}
.wb-word.in{animation:wIn .45s cubic-bezier(.2,1.4,.4,1) both}
.wb-word.out{animation:wOut .35s ease-in both}
@keyframes wIn{0%{opacity:0;transform:scale(.55) rotate(-4deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes wOut{to{opacity:0;transform:scale(.8) translateY(-10px);filter:blur(5px)}}
.word-box .timer{margin:0;height:10px}
.wb-sec{font-size:13px;text-align:center;font-weight:800;color:var(--ink-dim);line-height:1}
.word-box.low{border-color:var(--coral);animation:lowPulse .5s ease-in-out infinite alternate}
.word-box.low .wb-sec{color:var(--coral-hi)}
@keyframes lowPulse{to{box-shadow:0 6px 0 #000a,0 0 0 3px #FF6D5A55}}

.grid-box{margin:0;padding:8px;display:grid;place-items:center}
.sk-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:4px;width:100%}
.gc{position:relative;aspect-ratio:1/1;background:#ffffff0d;border:1.5px dashed var(--line);border-radius:7px;overflow:hidden}
.gc-n{position:absolute;top:1px;inset-inline-start:3px;z-index:1;font-size:9.5px;font-weight:800;color:var(--ink-dim);line-height:1.2}
.gc-art{position:absolute;inset:0}
.gc.done{background:var(--board);border-style:solid;border-color:#CBD5E1}
.gc.done .gc-n{color:#64748B}
.gc.cur{border-style:solid;border-color:var(--brass-hi);animation:dtPulse 1.2s ease-in-out infinite}
.gc.pop{animation:gcPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes gcPop{0%{transform:scale(.6)}100%{transform:none}}

/* ═══ السبورة ═══ إطار ألومنيوم، وش أبيض لامع، وتحتها حرف عليه الأقلام والأستيكة */
.wboard{width:100%;max-width:100%;margin:0 auto 12px}
.wb-frame{padding:8px;border-radius:14px;background:linear-gradient(180deg,#E3E7EC,#A3ACB8 60%,#8E97A3);
  box-shadow:0 6px 0 #000a,inset 0 1px 0 #fffa}
/* touch-action على الوش نفسه (مش الـsvg بس) — سفاري الآيفون بيقرا الـdiv أحسن؛ والمسكة الطويلة متطلّعش قايمة/عدسة */
.wb-surface{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  background:linear-gradient(135deg,#FFFFFF 0%,#F2F5F9 55%,#FFFFFF 100%);box-shadow:inset 0 2px 8px #0002}
.pad{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.wb-hint{position:absolute;inset:0;display:grid;place-items:center;color:#94A3B8;font-weight:800;font-size:18px;
  pointer-events:none;transition:opacity .3s}
.wb-hint.gone{opacity:0}
/* الأستيكة: بتعدّي رايح جاي تلات مرات والخطوط بتختفي وراها */
.wb-eraser{position:absolute;width:26%;height:12%;left:-30%;top:6%;opacity:0;pointer-events:none;z-index:2}
.wb-eraser i{display:block;width:100%;height:100%;border-radius:6px;
  background:linear-gradient(180deg,#4B5563 0 56%,#E5E7EB 56% 100%);box-shadow:0 5px 10px #0005}
.wb-surface.wiping .wb-eraser{animation:erz .9s ease-in-out both}
.wb-surface.wiping .pad .ink{animation:inkWipe .9s ease-in both}
@keyframes erz{0%{left:-30%;top:6%;opacity:0;transform:rotate(-8deg)}6%{opacity:1}30%{left:80%;top:22%;transform:rotate(6deg)}
  55%{left:-4%;top:46%;transform:rotate(-6deg)}80%{left:80%;top:72%;transform:rotate(6deg)}94%{opacity:1}100%{left:104%;top:80%;opacity:0}}
@keyframes inkWipe{0%{opacity:1;filter:none}45%{opacity:.5;filter:blur(1.5px)}100%{opacity:0;filter:blur(4px)}}
.wb-tray{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 10px;padding:9px 12px 8px;
  border-radius:0 0 12px 12px;background:linear-gradient(180deg,#B8C0CB,#7D8693);box-shadow:0 5px 0 #000a}
.mk{width:44px;height:18px;border:0;padding:0;background:none;cursor:pointer;transition:transform .15s}
.mk i{display:block;width:100%;height:100%;border-radius:4px 10px 10px 4px;
  background:linear-gradient(90deg,var(--mk) 0 24%,#0003 24% 27%,#F1F5F9 27% 64%,var(--mk) 64% 74%,#F1F5F9 74% 100%);
  box-shadow:inset 0 -2px 0 #0002,0 2px 3px #0005}
.mk.on{transform:translateY(-6px) rotate(-7deg)}
.mk.on i{box-shadow:0 0 0 2px #fff,0 5px 8px #0006}
.tray-btn{width:38px;height:30px;border-radius:9px;border:0;background:#E5E7EB;color:#111;box-shadow:0 2px 0 #0005;
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.tray-btn:active{transform:translateY(2px);box-shadow:none}
/* الرسمة وهي طايرة لخانتها */
.sk-fly{position:fixed;z-index:60;pointer-events:none;transform-origin:0 0;background:var(--board);border-radius:6px;
  box-shadow:0 12px 30px #0007;transition:transform .6s cubic-bezier(.55,0,.2,1),border-radius .6s,box-shadow .6s}
.sk-fly.go{border-radius:40px;box-shadow:0 4px 10px #0005}


/* ═══ شاشة الجولة: الرقم والعد 3-2-1 ═══ */
.sk-intro{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px;
  padding-top:calc(20px + var(--safe-top));background:#0D0818e8;backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.sk-intro.show{opacity:1}
.sk-intro.out{opacity:0}
.ski-in{text-align:center;max-width:420px}
.ski-r{font-size:34px;color:var(--ink);line-height:1.2}
.ski-r b{color:var(--brass-hi)}
.ski-s{color:var(--ink-dim);font-weight:800;margin-top:4px}
.ski-tip{margin-top:14px;font-size:14px;color:var(--tint-ink);background:var(--tint);border:2px solid var(--line);
  border-radius:14px;padding:8px 12px;display:inline-block;line-height:1.6}
.ski-cd{font-size:92px;line-height:1.1;margin-top:18px;color:var(--brass-hi);text-shadow:0 6px 0 #000a;min-height:102px}
.ski-cd.pulse{animation:cdPulse .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes cdPulse{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.ski-skip{margin-top:14px;font-size:12.5px;color:var(--ink-dim)}

/* ═══ الرد فوق الكتابة والكشف ═══ */
.fb{display:flex;align-items:center;gap:11px;justify-content:center;background:var(--bg2);border:2px solid var(--line);
  border-radius:16px;padding:9px 12px;margin-bottom:12px;min-height:60px}
.fb .fb-ic{font-size:26px;line-height:1;flex:none}
.fb b{display:block;font-size:16.5px;font-weight:800;line-height:1.4}
.fb span:not(.fb-ic){display:block;font-size:13px;color:var(--ink-dim);line-height:1.5}
.fb.some{border-color:#C9962B}
.fb.some b{color:var(--gold-hi)}
.fb.win{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 26%,var(--bg2))}
.fb.win b{color:#7ef0bd}
.fb.lost{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.fb.lost b{color:#ffb3b3}
.fb.pop{animation:fbPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes fbPop{from{transform:scale(.9);opacity:.3}}

/* ═══ شاشة الكتابة ═══ الرسمة وتحتها خانتها — وبعد «صحّح» نفس الخانة بتتقلب صح/غلط */
.recall-card{padding:14px 10px}
.rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:500px){.rc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rc-cell{position:relative;background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:6px;
  display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.rc-n{position:absolute;top:9px;inset-inline-start:10px;z-index:1;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--brass);color:var(--on-acc);font-family:'Lalezar','Tajawal',sans-serif;font-size:12px;line-height:1;padding-top:2px}
.rc-art{position:relative;aspect-ratio:1/1;background:var(--board);border-radius:9px;overflow:hidden}
.rc-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#94A3B8;text-align:center;padding:6px}
.rc-in{padding:8px 6px;text-align:center;border-radius:10px;min-width:0}
.rc-res{text-align:center;line-height:1.35;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0 3px}
.rc-res:empty{display:none}
.rc-w{font-size:14.5px;font-weight:800}
.rc-cell.ok{border-color:var(--ok)}
.rc-cell.ok .rc-w{color:#7ef0bd}
.rc-cell.no{border-color:color-mix(in srgb,var(--bad) 65%,var(--line))}
.rc-cell.ok::after,.rc-cell.no::after{position:absolute;top:8px;inset-inline-end:9px;font-size:15px;line-height:1;z-index:1}
.rc-cell.ok::after{content:'✅'}
.rc-cell.no::after{content:'❌'}
.rc-pt{font-family:'Lalezar','Tajawal',sans-serif;color:var(--ok);font-size:17px;line-height:1.1;direction:ltr;unicode-bidi:isolate}
.rc-g{font-size:12.5px;color:#ffb3b3;word-break:break-word}
.rc-g.blank{color:var(--ink-dim)}
.rc-mv{font-size:11px;color:var(--teal-hi)}
.rc-cell.flip{animation:flipIn .45s ease}
@keyframes flipIn{0%{transform:perspective(500px) rotateY(75deg);opacity:.4}100%{transform:none;opacity:1}}

/* ═══ شاشة البداية — عدد الرسومات ═══ أربع كروت: الرقم كبير وتحته المستوى */
.dg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.dg-chip{display:flex;flex-direction:column;align-items:center;background:var(--bg2);border:2px solid var(--line);border-radius:14px;
  padding:7px 4px 6px;cursor:pointer;transition:transform .06s}
.dg-chip:active{transform:scale(.97)}
.dg-chip b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:30px;line-height:1.15;color:var(--ink)}
.dg-chip span{font-size:12.5px;font-weight:800}
.dg-chip i{font-style:normal;font-size:11px;color:var(--ink-dim)}
.dg-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}
.dg-chip.on b{color:var(--brass-hi)}
.dg-chip.on i{color:var(--tint-ink)}

/* ═══ شاشة البداية — كارت رقمك القياسي ═══ */
.rec-box{margin-top:12px;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px 8px}
.rec-h{text-align:center;font-size:13px;font-weight:800;color:var(--brass-hi);margin-bottom:8px}
.rec-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.rt{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:7px 4px;text-align:center;min-width:0}
.rt b{display:block;font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:22px;line-height:1.1;color:var(--ink)}
.rt b i{font-style:normal;font-size:14px;color:var(--ink-dim)}
.rt span{display:block;font-size:11px;color:var(--ink-dim);margin-top:2px}
.rec-f{margin-top:8px;font-size:11.5px;color:var(--ink-dim);text-align:center;line-height:1.6}
.rec-f b{color:var(--ink)}

/* ═══ شاشة النتيجة النهائية ═══ */
.rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
.grade-t{font-size:30px;color:var(--brass-hi);line-height:1.2}
.final-score{margin-top:10px;display:flex;align-items:baseline;justify-content:center;gap:6px}
.final-score b{font-family:'Lalezar','Tajawal',sans-serif;font-size:52px;line-height:1;color:var(--gold-hi);text-shadow:0 3px 0 #000a}
.final-score span{font-size:15px;color:var(--ink-dim);font-weight:800}
.final-sub{font-size:14px;color:var(--ink-dim);margin-top:2px}
.rec-line{margin-top:12px;display:inline-block;background:var(--bg2);border:2px dashed var(--line);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--ink-dim)}
.rec-line b{color:var(--brass-hi)}
.rec-line.new{border-style:solid;border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink);
  font-weight:800;animation:recPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes recPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
/* المراجعة: جولة جولة — الرسومات والكلمة تحت كل واحدة */
.rev-r{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 10px 8px;margin-bottom:10px}
.rw-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rw-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface2);border:1.5px solid var(--line);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:12px;color:var(--brass-hi)}
.rw-meta{font-size:12px;color:var(--ink-dim)}
.rw-mk{margin-inline-start:auto;font-family:'Lalezar','Tajawal',sans-serif;font-size:17px;direction:ltr;unicode-bidi:isolate}
.rw-mk.ok{color:var(--ok)}
.rw-mk.some{color:var(--gold-hi)}
.rw-mk.no{color:var(--ink-dim)}
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media (min-width:480px){.rev-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.rv-c{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:4px;text-align:center;min-width:0}
.rv-c.ok{border-color:color-mix(in srgb,var(--ok) 60%,var(--line))}
.rv-c.no{border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.rv-art{aspect-ratio:1/1;background:var(--board);border-radius:7px;overflow:hidden}
.rv-w{font-size:11.5px;font-weight:800;margin-top:3px;line-height:1.3;word-break:break-word}
.award .aw-ic{font-size:30px}

/* ═══ الشاشات الضيقة ═══ */
@media (max-width:400px){
  .bd-av{font-size:22px}
  .bd-sc{font-size:23px}
  .bd-tl{font-size:18px}
  .final-score b{font-size:44px}
  .grade-t{font-size:26px}
  .wb-word.sz-s{font-size:36px}
  .wb-word.sz-m{font-size:29px}
  .wb-word.sz-l{font-size:24px}
  .wb-word.sz-xl{font-size:20px}
  .mk{width:38px}
  .wb-tray{gap:8px}
}
@media (max-width:360px){
  .bd-sc{font-size:21px}
  .bd-nm{font-size:11px}
  .round-badge{font-size:11.5px}
  .dg-chip b{font-size:26px}
  .sk-top{gap:8px}
  .word-box{padding:8px 7px}
  .wb-word.sz-s{font-size:32px}
  .wb-word.sz-m{font-size:26px}
  .wb-word.sz-l{font-size:21px}
  .wb-word.sz-xl{font-size:18px}
  .mk{width:34px;height:16px}
  .rc-grid{gap:6px}
  .rc-w{font-size:13px}
}

/* اللي مشغّل «قلّل الحركة» في نظامه — بنسيبله الألوان ونشيل النطّ */
@media (prefers-reduced-motion:reduce){
  .wb-word.in,.wb-word.out,.gc.pop,.gc.cur,.rc-cell.flip,.fb.pop,.ski-cd.pulse,.word-box.low{animation-duration:.01ms}
}
.sk-spacer{pointer-events:none}

/* ══════════════════════════════════════════════════════════════════════
   شخبط وافتكر (العب مع صاحبك) — الروم: اللوبي، الحضور، الغشاش، التوقف، لوحة VS، صاحبك في سطر الجولة،
   نتيجة الجولة ورسومات صاحبك (الروم منقول من «سمسم والكنز (لاعبين)» بنفس الأسامي، على ألوان شخبط)
   ══════════════════════════════════════════════════════════════════════ */
.room-code{font-family:'Lalezar';font-size:56px;letter-spacing:8px;color:var(--brass-hi);
  text-shadow:0 4px 0 #000a;direction:ltr;text-align:center;line-height:1.1}
.qr-wrap{display:grid;place-items:center;padding:10px}
.qr-wrap svg,.qr-wrap img{background:#fff;padding:10px;border-radius:14px;box-shadow:0 5px 0 #000a}
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.p-tile{position:relative;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 6px;text-align:center;animation:pop .2s ease}
.p-tile .av{font-size:34px;line-height:1.2}
.p-tile .nm{font-weight:800;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tile .st{font-size:11px;color:var(--ink-dim)}
.p-tile.off{opacity:.45;filter:grayscale(.6)}
.p-tile.empty{border-style:dashed;opacity:.7;animation:none}
.p-tile .crown{position:absolute;top:-12px;right:-6px;font-size:20px;transform:rotate(15deg)}
.p-tile .kick{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;
  border:none;background:var(--coral);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 2px 0 #0009}
.chip.locked,.dg-chip.locked{pointer-events:none;opacity:.75}
.presence-bar{position:fixed;top:calc(8px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:110;display:flex;gap:6px;
  background:color-mix(in srgb,var(--bg2) 92%,#000);border:2px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 4px 14px #000a;
  max-width:94vw;overflow-x:auto;will-change:transform}
.presence-bar.hidden{display:none}
.pv{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:2px solid var(--brass-hi)}
.pv .av{font-size:18px;line-height:1}
.pv.away{border-color:var(--coral)}
.pv.off,.pv.gone{border-color:var(--line);opacity:.55}
.pv.gone{filter:grayscale(1)}
.pv .bd{position:absolute;top:-7px;inset-inline-end:-7px;font-size:13px;filter:drop-shadow(0 1px 2px #000)}
.pv.away::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--coral);pointer-events:none;animation:pulseAway 1s infinite alternate}
@keyframes pulseAway{from{transform:scale(1);opacity:.55}to{transform:scale(1.35);opacity:0}}
.cheat-alert{position:fixed;top:calc(62px + var(--safe-top));left:0;z-index:109;background:#2a0f14ee;border:2px solid var(--coral);border-radius:14px;
  padding:6px 12px;box-shadow:0 6px 18px #000a;max-width:94vw;text-align:center;animation:cheatPop .25s ease-out;will-change:transform;transform-origin:var(--tail,50%) 0}
.cheat-alert::before{content:'';position:absolute;top:-7px;left:var(--tail,50%);width:12px;height:12px;margin-inline-start:-6px;background:#2a0f14;
  border-inline-start:2px solid var(--coral);border-top:2px solid var(--coral);transform:rotate(45deg)}
.cheat-alert .ca-top{font-weight:900;font-size:14px;color:var(--coral)}
.cheat-alert .ca-names{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;margin-top:2px}
.cheat-alert .ca-one{font-size:11px;color:#ffd9d2}
@keyframes cheatPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.pause-note{position:fixed;z-index:60;bottom:calc(10px + env(safe-area-inset-bottom));
  inset-inline-start:max(78px, calc((100vw - 560px) / 2 + 78px));inset-inline-end:max(10px, calc((100vw - 560px) / 2 + 10px));
  background:var(--surface);border:1.5px solid var(--brass);border-radius:16px;padding:9px 12px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;font-size:13px}
.pause-note .pn-txt{flex:1;line-height:1.5}
.pause-note .pn-txt b{color:var(--brass-hi);font-weight:900}
.pause-note .pn-sub{color:var(--ink-dim);font-size:11px}
.pause-note .btn{flex:0 0 auto;padding:7px 10px;font-size:12px}
/* لوحة VS — نقطك (أصفر ماركر) ونقط صاحبك (ليلكي)، وتحت كل واحد 🧠 افتكر كام كلمة · 🏅 كسب كام جولة */
.bd-head{grid-template-columns:1fr 1fr}
.bd-p.foe .bd-sc{color:var(--brass-hi)}
.bd-st{display:flex;gap:7px;justify-content:center;font-size:11.5px;font-weight:800;margin-top:2px;white-space:nowrap}
.bd-st i{font-style:normal;color:var(--ink-dim)}
.bd-st i.ok{color:var(--ok)}
.bd-st i.hn{color:var(--gold-hi)}
.bd-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:'Lalezar','Tajawal',sans-serif;font-size:13px;
  color:var(--ink-dim);background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:0 7px;line-height:1.6}
.bd-dots{display:grid;grid-template-columns:1fr 1fr}
.bd-p.foe{border-inline-start:1px solid var(--line)}

/* ═══ سطر الجولة وفيه صاحبك ═══ (طلب المستخدم: إزاي صاحبك يبان «من غير ما يخلّ بالنظام ولا مساحة الرسم ولا
   مساحة بياناتي») — وانت بترسم مفيش شريط صور فوق ولا فقاعات: صاحبك كله في نفس سطر رقم الجولة اللي كان
   موجود أصلًا — شكله، اسمه، وصل لأنهي كلمة وشريط صغير، أو بيكتب/خلّص/برّه/إعلان. صفر سنتي من السبورة. */
.round-badge.duo{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:4px 6px 4px 12px;text-align:start;min-height:36px}
.rb-r{flex:none;white-space:nowrap}
.foe-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:72%;background:var(--surface);border:1.5px solid var(--line);
  border-radius:999px;padding:2px 9px 2px 4px;font-size:12px;line-height:1.3;transition:border-color .2s,background .2s}
.fc-av{position:relative;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--bg2);border:1.5px solid var(--brass-hi)}
.fc-nm{font-weight:800;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px}
.fc-tx{flex:none;font-weight:800;color:var(--ink-dim);white-space:nowrap;direction:rtl}
.fc-tx b{color:var(--brass-hi);font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:14px}
.fc-pb{flex:none;width:34px;height:5px;border-radius:9px;background:color-mix(in srgb,var(--ink-dim) 24%,transparent);overflow:hidden;display:block}
.fc-pb i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--brass),var(--brass-hi));transition:width .35s ease}
.foe-chip.recall{border-color:color-mix(in srgb,var(--gold-hi) 55%,var(--line))}
.foe-chip.recall .fc-pb i{background:var(--gold-hi)}
.foe-chip.done{border-color:color-mix(in srgb,var(--ok) 60%,var(--line))}
.foe-chip.done .fc-tx{color:var(--ok)}
.foe-chip.done .fc-pb i{background:var(--ok)}
.foe-chip.away{border-color:var(--coral);background:#2a0f14;animation:chipAway .9s ease-in-out infinite alternate}
.foe-chip.away .fc-tx{color:var(--coral-hi)}
.foe-chip.away .fc-av{border-color:var(--coral)}
.foe-chip.ad .fc-tx,.foe-chip.off .fc-tx{color:var(--tint-ink)}
.foe-chip.off,.foe-chip.gone{opacity:.7}
.foe-chip.gone .fc-av{filter:grayscale(1);border-color:var(--line)}
.foe-chip.away .fc-pb,.foe-chip.ad .fc-pb,.foe-chip.off .fc-pb,.foe-chip.gone .fc-pb{display:none}
@keyframes chipAway{from{box-shadow:0 0 0 0 #FF6D5A00}to{box-shadow:0 0 0 3px #FF6D5A55}}
@media (max-width:380px){ .fc-nm{max-width:62px} .fc-pb{width:24px} .round-badge.duo{gap:5px} }
@media (prefers-reduced-motion:reduce){ .foe-chip.away{animation:none} }

/* ═══ بعد «صحّح» — مستني صاحبك ═══ */
.wait-note{text-align:center;font-size:13.5px;color:var(--tint-ink);line-height:1.7;margin:2px 0 12px}
.wait-note b{color:var(--brass-hi)}

/* ═══ نتيجة الجولة ═══ */
.reveal-top h3{font-size:24px;color:var(--brass-hi);margin:2px 0 4px}
.rt-vs{display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rt-p{display:flex;align-items:center;gap:7px;background:var(--bg2);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 8px;font-weight:800;font-size:13.5px}
.rt-p.win{border-color:var(--ok)}
.rt-p .rt-av{font-size:19px;line-height:1}
.rt-p b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:19px;color:var(--gold-hi);line-height:1}
.rt-p i{font-style:normal;color:var(--ink-dim);font-size:12px}
.rt-p .rt-pts{direction:ltr;unicode-bidi:isolate;color:var(--ok);font-size:12.5px}
/* «نفس الكلمات»: الكلمة في النص، ورسمتك يمين ورسمة صاحبك شمال */
.pair-h{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:8px;margin-bottom:6px;font-size:12px;font-weight:800;color:var(--ink-dim);text-align:center}
.pair-h span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.pr-row:first-of-type{border-top:none}
.pr-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pr-art{position:relative;width:100%;max-width:104px;aspect-ratio:1/1;background:var(--board);border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.pr-cell.ok .pr-art{border-color:var(--ok)}
.pr-cell.no .pr-art{border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.pr-mk{position:absolute;top:3px;inset-inline-end:4px;font-size:12px;line-height:1;z-index:1}
.pr-g{font-size:11.5px;color:#ffb3b3;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:15px}
.pr-g.blank{color:var(--ink-dim)}
.pr-g .ok-pt{color:var(--ok);font-weight:800;direction:ltr;unicode-bidi:isolate}
.pr-mid{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.pr-mid b{font-size:14px;font-weight:800;line-height:1.3;word-break:break-word}
.pr-mid .rw-n{width:20px;height:20px;font-size:11px}
.art-wait,.art-none{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;color:#94A3B8;text-align:center;padding:4px;line-height:1.3}
.art-wait{font-size:16px}
/* «كل واحد كلماته»: كارت رسوماتك وكارت رسومات صاحبك */
.rv-c .rv-art{position:relative}
.rv-g{font-size:10.5px;color:#ffb3b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.rv-g.blank{color:var(--ink-dim)}
/* ═══ «🤝 احسبهاله» (١٠-٠٦) ═══ تحت كلمة صاحبك الغلط في نتيجة الجولة — حبّاية صغيرة باللون التاني (أصفر الماركر)
   زي «🔀 مكانها خانة»؛ في «كل واحد كلماته» الخانة ~٦٠px فبتاخد عرضها وتنزل سطرين لو لزم. نافذة المقارنة نفس «خليك لمّاح» */
.cr-btn{margin-top:3px;font:inherit;font-size:11px;font-weight:800;line-height:1.3;color:var(--teal-hi);cursor:pointer;
  background:color-mix(in srgb,var(--teal) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--teal-hi) 55%,transparent);
  border-radius:999px;padding:3px 8px;max-width:100%}
.rv-c .cr-btn{display:block;width:100%;font-size:10px;padding:2px 3px;border-radius:9px}
.cr-btn:active{transform:translateY(1px)}
.cr-by{color:var(--teal-hi)}
.cr-tip{font-size:12.5px;line-height:1.6;margin:0 0 8px}
.cu-cmp{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.cu-one{flex:1;background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;padding:8px 6px;text-align:center;min-width:0}
.cu-one b{display:block;font-size:16px;color:var(--ink);word-break:break-word}
.cu-one.ok{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 26%,var(--bg2))}
.cu-lbl{display:block;font-size:11px;color:var(--ink-dim);margin-bottom:2px}
.cu-eq{font-size:12px;color:var(--ink-dim);flex:none}
.rev-sub{font-size:12.5px;font-weight:800;color:var(--ink-dim);margin:8px 2px 6px;display:flex;align-items:center;gap:6px}
.rev-sub b{color:var(--ink)}
.rank-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:9px 12px;margin-bottom:7px;font-weight:800}
.rank-row.me{border-color:var(--brass)}
.rank-row .rk{font-family:'Lalezar','Tajawal',sans-serif;font-size:20px;color:var(--ink-dim);min-width:22px}
.rank-row .sc{margin-inline-start:auto;font-family:'Lalezar','Tajawal',sans-serif;font-size:21px;color:var(--brass-hi)}
.rank-row .det{flex-basis:100%;order:3;font-size:12px}
@media (max-width:400px){ .bd-st{font-size:10.5px;gap:5px} .pair-h,.pr-row{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:6px} .pr-mid b{font-size:13px} }

/* ═══ وقت التخمين ═══ شريط تحت «اكتب كل كلمة تحت رسمتها» والثواني جنبه (startGuess في app.js) */
.gt-row{display:flex;align-items:center;gap:8px;margin:10px 0 2px}
.gt-row .timer{flex:1;min-width:0}
.gt-sec{flex:none;min-width:48px;text-align:center;font-size:15px;font-weight:800;color:var(--teal-hi);font-variant-numeric:tabular-nums}
.gt-row.low .gt-sec{color:var(--coral-hi)}

/* ═══ تكبير الرسمة وقت التخمين ═══ (zoomOpen في app.js) — نفس «الرسام» */
.rc-art{cursor:zoom-in;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.zoom-ov{--zw:min(100%, calc(100vh - 150px), 640px);
  position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(14px + var(--safe-top)) 12px calc(14px + env(safe-area-inset-bottom));
  background:#0F0A1A00;transition:background-color .26s;cursor:zoom-out;-webkit-tap-highlight-color:transparent}
@supports (height:100dvh){.zoom-ov{--zw:min(100%, calc(100dvh - 150px), 640px)}}
.zoom-ov.on{background:#0F0A1AF2}
.zoom-top,.zoom-tip{opacity:0;transition:opacity .2s}
.zoom-ov.on .zoom-top,.zoom-ov.on .zoom-tip{opacity:1}
.zoom-ov.fade{opacity:0;transition:opacity .2s}
.zoom-top{display:flex;align-items:center;gap:8px;width:var(--zw);font-size:18px}
.zoom-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoom-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brass);color:var(--on-acc);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:16px;line-height:1;padding-top:2px}
.zoom-x{flex:none;width:44px;height:44px;border-radius:14px;border:2px dashed var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:20px;line-height:1;cursor:pointer}
.zoom-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.zoom-board{position:relative;width:var(--zw);aspect-ratio:1/1;background:var(--board);border-radius:16px;border:4px solid #CBD5E1;
  overflow:hidden;box-shadow:0 18px 50px #000a;transform-origin:center center}
.zoom-board .art{position:absolute;inset:0}
.zoom-tip{font-size:13px;color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){.zoom-ov,.zoom-top,.zoom-tip{transition:none}}

/* ═══ الأستيكة (١٠-٠٧ — مكان ↩️) ═══ زرار على الصينية جنب الأقلام: وانت ماسكها بتترفع وتميل وتنوّر زي القلم المختار.
   ودايرة تحت صباعك وانت بتمسح = مساحة المسح بالظبط (erRadius في app.js). */
.tray-er{padding:0;transition:transform .15s,background .15s,box-shadow .15s}
.tray-er svg{display:block;width:24px;height:24px;pointer-events:none}
.tray-er.on,.tray-er.on:active{transform:translateY(-6px) rotate(-7deg);background:var(--gold-hi);box-shadow:0 0 0 2px #fff,0 5px 8px #0006}
.er-cur{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;border:2px solid #64748B;background:#94A3B82E;
  pointer-events:none;opacity:0;z-index:3;will-change:transform}
.er-cur.on{opacity:1}
.pad.erasing{cursor:cell}