/* ===== مسافة شريط إشعارات الموبايل =====
   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}

/* ============ اللوبي ============ */
.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}
.join-url{direction:ltr;text-align:center;background:var(--bg2);border:2px dashed var(--line);
  border-radius:14px;padding:8px 10px;font-weight:700;word-break:break-all;cursor:pointer}
.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 .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}
.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)}
.rank-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:2px solid var(--line);
  border-radius:14px;padding:9px 12px;margin-bottom:7px;font-weight:800}
.rank-row .pos{font-family:'Lalezar';font-size:20px;color:var(--ink-dim);min-width:26px}
.rank-row .sc{margin-inline-start:auto;font-family:'Lalezar';font-size:21px;color:var(--brass-hi)}
.rank-row.me{border-color:var(--brass)}
/* كونفيتي */
.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}
.presence-bar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:110;display:flex;gap:6px;
  background:#0b1322ee;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:#16233b;border:2px solid #2fc6b0}
.pv .av{font-size:18px;line-height:1}
.pv.away{border-color:var(--coral);animation:pulseAway 1s infinite alternate}
.pv.off{border-color:#5b6b8c;opacity:.55}
.pv.gone{border-color:#5b6b8c;opacity:.4;filter:grayscale(1)}
.pv .bd{position:absolute;top:-7px;inset-inline-end:-7px;font-size:13px;filter:drop-shadow(0 1px 2px #000)}
/* ═══ النبضة على طبقة لوحدها ═══
   كانت أنيميشن على box-shadow، وده بيرسم من جديد كل فريم — وشريط
   الحضور ثابت فوق الصفحة، يعني الرسم ده بيتكرر مع كل حركة سكرول على
   شاشة كبيرة. دايرة على ::after بتكبر وتشفّ (transform + opacity)
   بتتعمل على الكارت مباشرة من غير أي إعادة رسم. */
.pv.away::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--coral,#ff6d5a);pointer-events:none;
  animation:pulseAway 1s infinite alternate}
@keyframes pulseAway{from{transform:scale(1);opacity:.55}to{transform:scale(1.35);opacity:0}}

/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.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}

/* احترام منطقة النوتش/شريط الحالة في المتصفح كمان */
.presence-bar{top:calc(8px + var(--safe-top))}
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}

/* تحذير الغشاش — تحت شريط الحضور */
.cheat-alert{position:fixed;top:calc(62px + var(--safe-top));left:50%;transform:translateX(-50%);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}   /* طبقة لوحدها — زي شريط الحضور فوق بالظبط */
.cheat-alert .ca-top{font-weight:900;font-size:14px;color:var(--coral);letter-spacing:.3px}
.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}
.cheat-alert .ca-one b{font-weight:700;opacity:.85}
@keyframes cheatPop{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

/* خلفية صلبة ورا شريط إشعارات الموبايل — عشان محتوى اللعبة ما يظهرش تحته */
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}

/* ذيل التنبيه — بيشاور على أفاتار اللي بيغش */
.cheat-alert{left:0;transform:none;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)}
@keyframes cheatPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
/* النبض الأصلي pulseAway فوق كفاية — القاعدة دي كانت بتلغيه */

/* ══════════════════════════════════════════════════════════════════════
   عناصر مشتركة مع باقي ألعاب «العب مع صاحبك» (الوقت واللقطة والنتايج)
   ══════════════════════════════════════════════════════════════════════ */
.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}
/* كارت «مستنيين صاحبك» في اللوبي — مكان فاضي بشكل مقصود مش كارت ناقص */
.p-tile.empty{border-style:dashed;opacity:.7;animation:none}

/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «جمع الكلمة — بينك» — نفس ثيم نسخة «اتحدّى نفسك» بالحرف، عشان اللي
   لعب أي نسخة يعرف على طول إن دي نفس اللعبة.
   ══════════════════════════════════════════════════════════════════════ */
: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)}
.chip.locked,.mode-chip.locked{pointer-events:none;opacity:.75}
/* شريط الحضور ودواير الأفاتارات */
.presence-bar{background:color-mix(in srgb,var(--bg2) 92%,#000);border-color:var(--line)}
.pv{background:var(--surface);border-color:var(--brass-hi)}
.pv.away{border-color:var(--coral)}
.pv.off,.pv.gone{border-color:var(--line)}
@supports not (background:color-mix(in srgb,red 50%,#000)){ .presence-bar{background:var(--bg2)} }
.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)}
/* ملحوظة التوقف — شريط صغير تحت، مش شاشة بتقفل الدنيا */
.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;animation:noteUp .22s ease}
@keyframes noteUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.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(--muted,#8fa0bd);font-size:11px}
.pause-note .btn{flex:0 0 auto;padding:7px 10px;font-size:12px}
.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}

/* ═══ اللوحة اللي فوق — VS ═══ نُصّين وخط بينهم، وفي كل نص: النقط، السلسلة،
   وسطر ✅ جاب · ❌ راحت · 💡 حروف. */
.board{position:relative;padding:0;overflow:hidden}
.bd-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-inline-start:-1px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);z-index:0}
.bd-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr 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;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-av{font-size:21px;line-height:1}
.bd-nm{font-size:12.5px;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:24px;line-height:1.05}
.bd-p.me .bd-sc{color:var(--brass-hi)}
.bd-p.foe .bd-sc{color:var(--teal-hi,var(--teal))}
.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-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.no{color:var(--bad)}
.bd-st i.hn{color:#ffd166}
.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{position:relative;z-index:1;display:grid;grid-template-columns:1fr 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}

/* ═══ البلاطة ═══ نفس نسخة «اتحدّى نفسك» بالحرف */
.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}
.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)}
/* سطر صاحبك — تحت الأدوات: بيحاول / جابها / عدّاها */
.foe-line{text-align:center;font-size:13px;color:var(--ink-dim);margin-top:10px;line-height:1.7;
  background:var(--bg2);border:1.5px dashed var(--line);border-radius:12px;padding:5px 10px}
.foe-line.hidden{display:none}
.foe-line.done{border-style:solid}
.foe-line .hot{color:var(--teal-hi,var(--teal))}
.q-status{text-align:center;font-size:13.5px;color:var(--ink-dim);margin-top:10px;line-height:1.7}
.q-status .hot{color:var(--brass-hi)}
.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-rows{display:flex;flex-direction:column;gap:6px}
.qr-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;
  padding:7px 10px;font-size:13.5px;animation:resIn .4s both}
.qr-row:nth-child(1){animation-delay:.2s}
.qr-row:nth-child(2){animation-delay:.34s}
.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-nm{font-weight:800;flex:none}
.qr-pick{flex:1;min-width:60px;color:var(--ink-dim);word-break:break-word}
.qr-mk{flex:none}
.qr-pt{flex:none;font-family:'Lalezar','Tajawal',sans-serif;font-size:17px;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}
.rank-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rank-row .rk{font-family:'Lalezar','Tajawal',sans-serif;font-size:20px;color:var(--ink-dim);min-width:22px}
.rank-row .who{font-weight:800}
.rank-row .det{flex-basis:100%;order:3;font-size:12px}
.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-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:2px 0 8px;letter-spacing:2px}
.rw-scr i{font-style:normal;letter-spacing:0;margin-inline-end:4px}
.rq-rows{display:flex;flex-direction:column;gap:5px}
.rq-row{display:flex;align-items:center;gap:7px;border:2px solid var(--line);
  border-radius:12px;padding:5px 9px;font-size:12.5px}
.rq-row.ok{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 22%,transparent)}
.rq-row.no{border-color:var(--bad);background:color-mix(in srgb,#7a2020 22%,transparent)}
.rq-row.none{border-style:dashed;opacity:.7}
.rq-av{font-size:15px;line-height:1;flex:none}
.rq-nm{font-weight:800;flex:none;min-width:44px}
.rq-ans{flex:1;min-width:0;color:var(--ink-dim);word-break:break-word}
.rq-mk{flex:none}
/* ═══ الشاشات الضيقة ═══ */
@media (max-width:400px){
  .bd-av{font-size:19px}
  .bd-sc{font-size:22px}
  .bd-st{font-size:10.5px;gap:5px}
  .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:20px}
  .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,.slots.shake,.wform.shake{animation-duration:.01ms}
  .qflash{animation:qfOut .01ms .55s forwards}
}