/* ===== مسافة شريط إشعارات الموبايل =====
   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}
.help-num{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;
  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}

/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «جمع الكلمة — بينك»
   لون جديد مش موجود في أي لعبة تانية: البنفسجي بتاع حبر سري والأزرق
   بتاع أسئلة ومعلومات والمرجاني بتاع المشنقة كلهم متاخدين. الخلفية
   بلون خوخي غامق بدل الكحلي عشان البلاطات الكريمي تنوّر عليها.
   نفس الألوان متطبّقة على كارت اللعبة في /solo/.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#150E1C; --bg2:#1B1226; --surface:#2A1A36; --surface2:#34203F; --line:#4A2E58;
  --brass:#E8489A; --brass-hi:#FF6FB5;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#2FC6B0; --teal-hi:#5FE0CD;        /* اللون التاني (الأزرار المساعدة) */
  --coral:#FF6D5A; --coral-hi:#FF8571;
  --on-acc:#2B0A1C; --acc-sh:#8F1F5B;     /* خط وظل الزرار الأساسي */
  --on-two:#04231E; --two-sh:#0D5A50;
  --on-coral:#2B0C07; --coral-sh:#8A2417;
  --tint:#3A1830; --tint-ink:#FFC2DE;    /* خلفية العناصر المفعّلة */
  --ring:#FF6FB533;                              /* هالة التركيز */
  --ink-dim:#C9B8D3; --dim:#C9B8D3; --muted:#C9B8D3;
  /* البلاطة — كريمي زي بلاطات الحروف الخشب، بحرف غامق */
  --tile-a:#FFF3D6; --tile-b:#F1DCA8; --tile-ink:#3A2410; --tile-line:#C9A45C; --tile-sh:#8A6A2E;
}

/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
  radial-gradient(1200px 500px at 50% -150px,#3A1A3E 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,#E8489A,#FF6FB5,#FFC048)}

/* الأزرار */
.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:23px}
  .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),#1B1226)}
.ui-modal-title{color:var(--brass-hi)}

/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#1B1226)}
.help-hero{background:linear-gradient(180deg,#3A1A3E,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#1B1226,#1B1226ee);border-top-color:var(--line)}
.help-num{background:#120A18;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))}

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

/* الذهبي اللي بتستعمله عناصر منقولة من ألعاب تانية — هنا هو لون اللعبة نفسه */
:root{ --gold:var(--brass-hi) }

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

/* شريط رقم الكلمة والمستوى واللغة */
.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 12px;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(--brass-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;font-weight:800;color:#ffb861;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;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.dt-col{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;
  padding:7px 8px;min-height:26px;min-width:0}
.dt{width:9px;height:9px;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.miss{background:transparent;border:2px solid var(--bad);opacity:.75}
.dt-none{font-size:11px;color:var(--ink-dim)}

/* ═══ كارت الكلمة ═══ */
.wcard{padding:14px 12px 12px;overflow:hidden}
.wcard .timer{margin-bottom:10px}
.timer.slim{height:8px;border-width:1px;margin:8px 0 0}
.w-hint-line{text-align:center;font-size:13px;color:var(--ink-dim);margin-bottom:8px;line-height:1.6}
.w-hint-line b{color:var(--brass-hi)}

/* ═══ البلاطة ═══
   نفس العنصر بيتنقل من البعترة للخانة ويرجع — عشان كده مقاسها متغيّر
   واحد (--tile) بيتحسب في الجافاسكريبت على عرض الكارت وعدد الحروف،
   فالكلمة الطويلة بتصغّر البلاطات بدل ما تكسر السطر. */
.tile{position:absolute;width:var(--tile,44px);height:var(--tile,44px);
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--tile-a),var(--tile-b));color:var(--tile-ink);
  border:2px solid var(--tile-line);border-radius:calc(var(--tile,44px) * .24);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:calc(var(--tile,44px) * .58);line-height:1;
  box-shadow:0 4px 0 var(--tile-sh),0 6px 10px #0006;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transform:rotate(var(--rot,0deg));transition:filter .12s;z-index:2}
.tile:active{filter:brightness(1.08)}
.tile.en{font-family:'Tajawal',sans-serif;font-weight:800;font-size:calc(var(--tile,44px) * .5)}
/* بلاطة اتحطّت في خانة — بتبطّل مايلة وبتقعد في نص الخانة */
.slot .tile{position:absolute;inset:-2px;width:auto;height:auto;transform:none;--rot:0deg}
/* حرف المساعدة — مقفول في مكانه بإطار بينك، مفيش دوسة بتشيله */
.tile.lock{border-color:var(--brass-hi);box-shadow:0 4px 0 var(--acc-sh),0 0 0 3px var(--ring);cursor:default}
/* الكشف: الكلمة الصح خضرا، واللي راحت عليك برتقاني باهت */
.tile.ok{background:linear-gradient(180deg,#a8f0cc,#5fd39a);color:#053d22;border-color:#2ec27e;box-shadow:0 4px 0 #0f6b42}
.tile.rv{background:linear-gradient(180deg,#ffd9a3,#f2b25c);color:#4a2700;border-color:#e69a2e;box-shadow:0 4px 0 #8a5a12}
.tile.wave{animation:tileWave .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tileWave{0%{transform:translateY(0)}40%{transform:translateY(-10px) scale(1.08)}100%{transform:translateY(0)}}
.tile.in{animation:tileIn .38s cubic-bezier(.2,1.5,.4,1) both}
@keyframes tileIn{from{opacity:0;transform:scale(.3) rotate(var(--rot,0deg))}}

/* ═══ منطقة البعترة ═══ البلاطات متناثرة فيها بمواضع عشوائية ثابتة للكلمة */
.scatter{position:relative;height:var(--sh,150px);margin:2px 4px 10px;
  border-radius:16px;background:radial-gradient(circle at 50% 40%,#ffffff08,transparent 70%)}
.scatter.empty::after{content:'كل الحروف في الخانات 👇';position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-dim);font-size:13px;opacity:.7}

/* ═══ الخانات ═══ صف واحد بعدد الحروف، اتجاهه اتجاه اللغة */
.slots{display:flex;justify-content:center;gap:var(--gap,5px);flex-wrap:nowrap;min-height:calc(var(--tile,44px) + 4px);padding:2px 0}
.slot{position:relative;flex:none;width:var(--tile,44px);height:var(--tile,44px);border-radius:calc(var(--tile,44px) * .24);
  border:2px dashed var(--line);background:var(--bg2);transition:border-color .15s,background .15s}
.slot.next{border-color:var(--brass-hi);background:var(--tint)}
.slots.shake{animation:slotShake .45s}
.slots.shake .slot{border-color:var(--bad);border-style:solid}
@keyframes slotShake{10%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-3px)}}

/* ═══ الكلمة في سطر ═══ الحروف المتبعترة كبيرة في النص، بمسافة بينهم
   في العربي (التاء المربوطة في النص بتكسر الشكل لو اتلزقت) */
.wline{display:flex;justify-content:center;gap:var(--gap,6px);flex-wrap:wrap;padding:8px 0 12px;min-height:60px}
.wline .lt{position:relative;display:grid;place-items:center;width:var(--tile,40px);height:var(--tile,40px);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:calc(var(--tile,40px) * .62);line-height:1;color:var(--ink);
  background:var(--bg2);border:2px solid var(--line);border-radius:12px;transition:background .2s,border-color .2s,color .2s}
.wline .lt.en{font-family:'Tajawal',sans-serif;font-weight:800;font-size:calc(var(--tile,40px) * .52)}
.wline.ok .lt{background:linear-gradient(180deg,#a8f0cc,#5fd39a);color:#053d22;border-color:#2ec27e}
.wline.rv .lt{background:linear-gradient(180deg,#ffd9a3,#f2b25c);color:#4a2700;border-color:#e69a2e}
.wline .lt.hl{border-color:var(--brass-hi);color:var(--brass-hi)}
/* نمط الحروف المكشوفة تحت السطر: «م _ _ _ ة» */
.wpat{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;letter-spacing:6px;color:var(--brass-hi);
  margin-bottom:8px;line-height:1.3}
/* الاتجاه من dir="" بتاع اللغة — لو كتبنا direction هنا هتغلب الوسم،
   وكانت غالبة فعلاً: الحرف الأول في الكلمة الإنجليزي كان بيظهر على اليمين
   واللاعب بيفتكره الأخير */
.wpat[dir=ltr]{direction:ltr;unicode-bidi:isolate}
.wpat i{font-style:normal;color:var(--ink-dim);opacity:.6}
.wform{display:flex;gap:8px;align-items:stretch}
.wform .field{flex:1;min-width:0;font-size:20px;font-weight:800;text-align:center;padding:10px 12px;
  font-family:'Lalezar','Tajawal',sans-serif;letter-spacing:1px}
.wform .field.en{font-family:'Tajawal',sans-serif;text-transform:uppercase}
.wform .btn{flex:none;padding:10px 16px}
.wform.shake{animation:slotShake .45s}
.wform.shake .field{border-color:var(--bad)}

/* ═══ أزرار المساعدة ═══ تحت الخانات: لخبط، حرف، عدّي */
.w-tools{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.w-tools .btn{padding:9px 13px;font-size:14px;border-radius:14px}
.w-tools .btn b{color:var(--brass-hi)}
.w-tools .btn.ghost b{color:var(--brass-hi)}

/* سطر الحالة — تحت الأدوات */
.q-status{text-align:center;font-size:13.5px;color:var(--ink-dim);margin-top:10px;line-height:1.7}
.q-status.waiting{color:var(--tint-ink)}

/* ═══ شريط النتيجة ═══ الكلمة الصح، وتحتها خدت كام وفي قد إيه */
.q-res{margin-top:13px;padding-top:11px;border-top:2px dashed var(--line);animation:resIn .42s .1s both}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}}
.qr-ans{text-align:center;margin-bottom:9px}
.qr-ans .qr-lbl{display:block;font-size:11.5px;color:var(--ink-dim)}
.qr-ans b{font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:1.3;color:var(--ok);word-break:break-word;letter-spacing:1px}
.qr-ans.miss b{color:#f2b25c}
.qr-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;justify-content:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;
  padding:7px 10px;font-size:13.5px;animation:resIn .4s .2s both}
.qr-row.ok{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 26%,var(--bg2))}
.qr-row.no{border-color:var(--bad);background:color-mix(in srgb,#7a2020 26%,var(--bg2))}
.qr-row.none{border-style:dashed;opacity:.8}
.qr-av{font-size:18px;line-height:1;flex:none}
.qr-pick{color:var(--ink-dim)}
.qr-pt{flex:none;font-family:'Lalezar','Tajawal',sans-serif;font-size:19px;color:var(--ok)}
.qr-pt.zero{color:var(--ink-dim)}

/* ═══ لمعة الكشف ═══ بتغطي الشاشة أقل من ثانية وبتروح لوحدها */
.qflash{position:fixed;inset:0;z-index:120;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  animation:qfIn .15s ease-out, qfOut .3s .62s ease-in forwards}
.qflash.win{background:radial-gradient(circle at 50% 44%,#0e6b47cc 0%,#0e6b4700 62%)}
.qflash.lose{background:radial-gradient(circle at 50% 44%,#7a2020cc 0%,#7a202000 62%)}
.qflash.miss{background:radial-gradient(circle at 50% 44%,#3b4356cc 0%,#3b435600 62%)}
@keyframes qfIn{from{opacity:0}}
@keyframes qfOut{to{opacity:0}}
.qf-emo{font-size:74px;line-height:1;animation:qfPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes qfPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.qf-txt{font-family:'Lalezar','Tajawal',sans-serif;font-size:28px;text-shadow:0 3px 0 #000a}
.qflash.win .qf-txt{color:#7ef0bd}
.qflash.lose .qf-txt{color:#ffb3b3}
.qflash.miss .qf-txt{color:var(--ink-dim)}

/* ═══ شاشة البداية — شيبس شكل العرض ═══ تلات كروت بشرح تحت كل واحد */
.mode-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:6px}
.mode-chip{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:10px 6px;cursor:pointer;
  font-weight:800;font-size:13px;transition:transform .06s}
.mode-chip:active{transform:scale(.97)}
.mode-chip .ic{font-size:22px;line-height:1}
.mode-chip .sb{font-size:10.5px;font-weight:500;color:var(--ink-dim);line-height:1.45}
.mode-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}
.mode-chip.on .sb{color:var(--tint-ink);opacity:.8}

/* ═══ شاشة النتيجة النهائية ═══ */
.rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
/* مراجعة الكلمات — الكلمة الصح، وجنبها اللي كان قدامك، وتحتها النتيجة */
.rev-w{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:10px}
.rev-w.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.rev-w.no{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.rw-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;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:11.5px;color:var(--ink-dim)}
.rw-mk{margin-inline-start:auto;font-size:13px;font-weight:800}
.rw-mk.ok{color:var(--ok)}
.rw-mk.no{color:var(--bad)}
.rw-word{font-family:'Lalezar','Tajawal',sans-serif;font-size:24px;line-height:1.3;letter-spacing:1px;word-break:break-word}
.rw-word.en{font-family:'Tajawal',sans-serif;font-weight:800;font-size:20px;letter-spacing:2px}
.rw-scr{font-size:12.5px;color:var(--ink-dim);margin-top:2px;letter-spacing:2px}
.rw-scr i{font-style:normal;letter-spacing:0;margin-inline-end:4px}

/* ═══ شاشة البداية — كارت رقمك القياسي ═══ */
.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)}

/* ═══ شاشة النتيجة — اللقب والرقم ═══ */
.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(--brass-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)}}

/* ═══ الشاشات الضيقة ═══ */
@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}
  .qf-emo{font-size:62px}
  .qf-txt{font-size:24px}
  .mode-chip{font-size:12px;padding:8px 4px}
  .mode-chip .sb{font-size:10px}
  .w-tools .btn{padding:8px 10px;font-size:13px}
}
@media (max-width:360px){
  .bd-sc{font-size:21px}
  .bd-nm{font-size:11px}
  .round-badge{font-size:11.5px}
  .mode-grid{grid-template-columns:1fr}
  .mode-chip{flex-direction:row;justify-content:center;gap:8px}
  .mode-chip .sb{display:none}
}

/* اللي مشغّل «قلّل الحركة» في نظامه — بنسيبله الألوان ونشيل النطّ */
@media (prefers-reduced-motion:reduce){
  .tile.wave,.tile.in,.q-res,.qr-row,.qf-emo,.bd-sc.bump,.rec-line.new,.slots.shake,.wform.shake{animation-duration:.01ms}
  .qflash{animation:qfOut .01ms .55s forwards}
}