/* ===== مسافة شريط إشعارات الموبايل =====
   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:#2a2210;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:33px;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:62px;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 فوق كفاية — القاعدة دي كانت بتلغيه */

/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «حروف المشنقة — خشبة وحبل»
   اللون الأساسي مرجاني دافي (#FF7A5C) — مش مستعمل في أي لعبة تانية،
   فاللاعب يعرف إنه جوه أنهي لعبة من أول نظرة. الخلفية بنّي غامق زي
   الخشب، والأخضر محجوز للحرف الصح والأحمر للغلط — دول أهم إشارتين
   في اللعبة فماينفعش يتلخبطوا مع لون الواجهة.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#1A1210; --bg2:#241814; --surface:#2C1D18; --surface2:#3A2720; --line:#4A3128;
  --brass:#E8552F; --brass-hi:#FF7A5C;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#39A0C4; --teal-hi:#6FC7E4;        /* اللون التاني (الأزرار المساعدة) */
  --coral:#F0616B; --coral-hi:#F98F96;
  --on-acc:#2A0A03; --acc-sh:#8A2A12;     /* خط وظل الزرار الأساسي */
  --on-two:#04202E; --two-sh:#125A75;
  --on-coral:#2E0710; --coral-sh:#8A2138;
  --tint:#3B1C13; --tint-ink:#FFC2B0;    /* خلفية العناصر المفعّلة */
  --ring:#FF7A5C33;                              /* هالة التركيز */
  --glow:#FF7A5C55;                              /* نور الخانة اللي اتجابت صح */
  --ink-dim:#C9B2A8; --dim:#C9B2A8; --muted:#C9B2A8;
}

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

/* الأزرار */
.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)}

/* زراير الهيدر التلاتة (؟ / 🏠 / ⚙️) — مربّعات بنفس المقاس بالظبط.
   من غير القاعدة دي كل زرار بياخد عرض محتواه: «؟» ضيّق، والبيت أعرض،
   والترس (SVG) بمقاس تالت — فكانوا مش متساويين. */
.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}
/* ═══ أيقونتين الهيدر: الألعاب والرئيسية ═══
   المقاس بالـem زي أيقونة الباب — فبيكبروا لوحدهم في نافذة التأكيد
   (اللي font-size بتاعها 46px) ويفضلوا صغيرين جوّه زرار الهيدر.
   مفيش fill ولا stroke هنا بالقصد: أيقونة الألعاب ألوانها مكتوبة جوّه
   الـSVG نفسه (بنفسجي/أخضر/ذهبي)، ولو حطينا fill هنا هيلغيها — لأن
   الـCSS بتغلب على خصائص الرسم المكتوبة في الوسم. */
.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}

/* ═══ الهيدر على الشاشات الضيقة ═══
   بقى فيه تلات زراير (🎮 / 🏠 / ⚙️) بدل اتنين. على موبايل 360px التلاتة
   بياخدوا 120px + المسافات، فاسم اللعبة كان بيتكسر على تلات سطور.
   بنصغّر الصورة والزراير والاسم بالتدريج بدل ما نشيل حاجة. */
@media (max-width:430px){
  .top{gap:7px}
  .top img{width:27px;height:auto;transform:translateY(-8px)}
  .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:24px;height:auto;transform:translateY(-7px)}
  .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)}

/* شريط الحضور ودواير الأفاتارات */
.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)}

/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#1E120E)}
.ui-modal-title{color:var(--brass-hi)}

/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#1E120E)}
.help-hero{background:linear-gradient(180deg,#3A211A,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#1E120E,#1E120Eee);border-top-color:var(--line)}
.help-num{background:#170D0A;border-color:var(--line)}
.help-step .hl{color:var(--brass-hi)}

/* حتت متفرقة كانت بلون متثبّت */
.pts-chip,.owner-chip{background:var(--tint);border-color:var(--brass-hi);color:var(--tint-ink)}
.tier-chip{background:var(--tint);border-color:var(--brass-hi);color:var(--tint-ink)}
.safe-ctl button,.notch-ctl button{background:var(--bg2);border-color:var(--line)}


@supports not (background:color-mix(in srgb,red 50%,#000)){
  .presence-bar{background:var(--bg2)}
}

/* ═══ شاشة التوقف المؤقت (نت حد قطع) ═══
   نفس شكلها في المحقق والمتهم عشان الإحساس يبقى واحد عبر الألعاب */
/* ملحوظة التوقف — شريط صغير تحت، مش شاشة بتقفل الدنيا.
   قبل كده كانت طبقة كاملة فوق كل حاجة: أول ما نت الملمّح يهزهز
   الشلة كلها كانت بتلاقي شاشة سودا «استنوه» وهما في نص التخمين. */
.pause-note{position:fixed;z-index:60;bottom:calc(10px + env(safe-area-inset-bottom));
  /* بتمشي مع عمود اللعب، وبتسيب مكان لزرار الخروج العايم (52px) عشان ميغطيش الكلام */
  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}

/* بلوك «عن اللعبة» تحت اللعبة — مخفي لحد ما اللعبة ترسم.
   لازم هنا مش في hazzar-ui.js: ده بيتحمّل في <head> قبل أول رسم،
   وده بيتحمّل في آخر الصفحة فالشرح كان بيومض بمقاسات المتصفح. */
.hz-info{display:none}
.hz-info.hz-ready{display:block}

/* التدرّج مرة واحدة فوق بس — من غيرها بيتكرر كل شاشة
   ويعمل خط أفقي باين عند كل تكرار (html{height:100%} بيحجّمه
   على ارتفاع الشاشة مش ارتفاع الصفحة). */
body{background-repeat:no-repeat;background-color:var(--bg)}

/* حد أدنى مضمون للمسافة السفلية — env() بترجع صفر على أجهزة
   أندرويد كتير عندها زراير تنقّل، فالمحتوى كان بيقع تحتها.
   max() بتاخد الأكبر: القيمة الحقيقية لو موجودة، وإلا 48px. */
.app{padding-bottom:max(48px, calc(30px + env(safe-area-inset-bottom)))}

/* ═══ تنسيق خطوات التعليمات ═══
   الخطوات بقت فقرة أو اتنين بدل سطر واحد، فالمسافات القديمة بقت ضيقة.
   p + p: المسافة بين الفقرتين بدقة — بدل <br><br> اللي كان بيعمل
   فجوة = ضعف ارتفاع السطر ومفيش تحكم فيها. */
.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}

/* الزرار يمشي مع عمود اللعب مش مع حرف الشاشة — على اللاب العريض
   كان بيروح في ركن الشاشة بعيد عن اللعبة. 280px = نص عرض .app */
.leave-fab{inset-inline-start:max(14px, calc((100vw - 560px) / 2 + 14px))}

/* الطبقات المنبثقة متسحبش الصفحة اللي وراها لما توصل لآخر السكرول
   (scroll chaining) — من غير ده قفل شاشة التعليمات كان بيسيب اللاعب
   نازل عند الشرح اللي تحت اللعبة */
.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}}

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

   الألوان من الدمية نفسها: خشب بنّي دافي، جسم رمادي فاتح، قبعة بنّي
   أغمق. **مش** بلون اللعبة المرجاني بالقصد — المرجاني لون الواجهة،
   ولو الدمية اتلوّنت بيه هتتلخبط مع الأزرار والعناوين. */
.gallows{width:100%;max-width:210px;height:auto;display:block;margin:0 auto}
.gallows .wood{fill:#C08A55}
.gallows .wood.dk{fill:#9A6B3F}
.gallows .ring{fill:none;stroke:#D9A62B;stroke-width:4.5}
.gallows .rope{fill:#D9A62B}
.gallows .rig{opacity:.9}

/* قطع الدمية — مخفية لحد ما الغلطة بتاعتها تيجي */
.gallows .p{opacity:0;transition:opacity .28s ease}
.gallows .p.on{opacity:1}
.gallows .p circle,.gallows .p rect,.gallows .p ellipse,.gallows .p path{
  fill:#D9D6D2;stroke:#A6A19C;stroke-width:2;stroke-linejoin:round}
.gallows .p.hat ellipse,.gallows .p.hat path{fill:#8C6845;stroke:#6E4F32}
/* الحبل والعقدة جوّه الـfig — لازم نرجّع لونهم، لأن قاعدة .p بتلوّن
   أي شكل جوّه القطع برمادي الدمية. */
.gallows .p.rope-live rect{fill:#D9A62B;stroke:none}
.gallows .p.noose-back ellipse{fill:none;stroke:#D9A62B;stroke-width:4.5}
.gallows.sm .p.noose-back ellipse{stroke-width:6}
/* النص القدامي من العقدة — نفس لون وسمك الحلقة اللي وراها بالظبط،
   عشان الاتنين يتقروا حلقة واحدة. من غير الجزء ده الرسمة بتبان راجل
   واقف **تحت** حبل، مش راجل الحبل في رقبته. */
.gallows .p.noose-neck path{fill:none;stroke:#D9A62B;stroke-width:4.5;stroke-linecap:round}
.gallows.sm .p.noose-neck path{stroke-width:6}
/* المشنقة الفاضية بتختفي بنفس سرعة ما القطع بتبان — فالتبديل مايبانش */
.gallows .wait{transition:opacity .28s ease}
.gallows .wait.off{opacity:0}
/* الأرض — مخفية إلا في حركة الإنقاذ */
.gallows .ground{fill:#6E4F32;opacity:0}

/* الشنقة: مش وقعة. الحبل بيتشد وينزل، والراجل بينزل معاه شدّة واحدة
   وبعدين يفضل يتأرجح لحد ما يهدا. transform-box بتخلّي نقطة الأصل
   من إحداثيات الرسمة نفسها، والعناصر دي ملهاش transform في الوسم
   فمفيش تعارض. */
/* اللف بس — حوالين نقطة تعليق الحبل في العارضة. أعلى الحبل هو نقطة
   اللف نفسها، فبيفضل ماسك فيها مهما اتأرجح. */
.gallows.hung .fig{animation:hangSwing 2.4s cubic-bezier(.2,1.5,.4,1) forwards;
  transform-box:view-box;transform-origin:122px 28px}
/* النزول بس — الراجل والعقدة اللي في رقبته */
.gallows.hung .man{animation:manDrop 2.4s cubic-bezier(.2,1.5,.4,1) forwards;
  transform-box:view-box}
@keyframes manDrop{
  0%{transform:translateY(0)}
  18%{transform:translateY(16.8px)}
  32%{transform:translateY(13.1px)}
  100%{transform:translateY(14.1px)}}
/* الشد بس — طول الحبل بيزيد قد ما الراجل نزل بالظبط، فآخره بيفضل
   ماسك في الرقبة في كل لقطة. مستطيل من غير حواف مدوّرة عشان الـscale
   ما يشوّهش أطرافه (ده اللي كان بايظ: rx مع scale = أطراف بيضاوية). */
.gallows.hung .p.rope-live{animation:ropeStretch 2.4s cubic-bezier(.2,1.5,.4,1) forwards;
  transform-box:view-box;transform-origin:122px 28px}
@keyframes ropeStretch{
  0%{transform:scaleY(1)}
  18%{transform:scaleY(1.30)}
  32%{transform:scaleY(1.234)}
  100%{transform:scaleY(1.252)}}
@keyframes hangSwing{
  0%,18%{transform:rotate(0)}
  32% {transform:rotate(11deg)}
  48% {transform:rotate(-8deg)}
  63% {transform:rotate(5.5deg)}
  77% {transform:rotate(-3deg)}
  89% {transform:rotate(1.4deg)}
  100%{transform:rotate(0)}}
/* الراس بتميل على جنب — دي اللمسة اللي بتفرّق بين «واقف» و«متشنق» */
.gallows.hung .fig .p.head circle{transform-box:view-box;transform-origin:122px 89px;
  animation:headTilt .5s ease-out .18s forwards}
@keyframes headTilt{to{transform:rotate(15deg)}}
@media (prefers-reduced-motion: reduce){
  .gallows.hung *,.gallows.saved *{animation-duration:.01ms;animation-iteration-count:1}}

/* ═══ أنقذته ═══
   الحكاية بالترتيب: العقدة بتتقطع وتتفتح وتقع، والحبل يتسحب لفوق،
   والمشنقة كلها تختفي، والأرض تبان، وهو ينزل عليها ويقف سليم.
   دي بديلة إيموجي الحمامة القديمة. */
/* 1) العقدة بتتقطع: القوس بيتفتح من طرفه ويقع */
.gallows.saved .p.noose-neck{animation:svCut 1.6s cubic-bezier(.35,.9,.4,1) forwards;
  transform-box:view-box;transform-origin:131px 89px}
@keyframes svCut{
  0%{transform:rotate(0) translateY(0);opacity:1}
  10%{transform:rotate(-16deg) translateY(0);opacity:1}
  32%{transform:rotate(-58deg) translateY(10px);opacity:.7}
  55%,100%{transform:rotate(-78deg) translateY(34px);opacity:0}}
.gallows.saved .p.noose-back{animation:svGo .45s ease-out .1s forwards}
@keyframes svGo{to{opacity:0}}
/* 2) الحبل بيتسحب لفوق ناحية العارضة */
.gallows.saved .p.rope-live{animation:svPull 1.6s cubic-bezier(.35,.9,.4,1) .12s forwards;
  transform-box:view-box;transform-origin:122px 28px}
@keyframes svPull{
  0%{transform:scaleY(1);opacity:1}
  38%{transform:scaleY(.34);opacity:.85}
  62%,100%{transform:scaleY(.05);opacity:0}}
/* 3) المشنقة نفسها بتختفي */
.gallows.saved .rig{animation:svGone .75s ease-in .3s forwards}
@keyframes svGone{to{opacity:0}}
/* 4) والأرض بتبان مكانها */
.gallows.saved .ground{animation:svGnd .55s ease-out .42s forwards}
@keyframes svGnd{to{opacity:1}}
/* 5) وهو بينزل عليها ويقف — نقطة اللف عند رجليه عشان يفضل واقف
      عليها وهو بيتلم من وقعة النزول. */
.gallows.saved .man{animation:svFall 1.6s forwards;
  transform-box:view-box;transform-origin:122px 167px}
@keyframes svFall{
  0%,26%{transform:translateY(0) scaleY(1) scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  57%{transform:translateY(26px) scaleY(1) scaleX(1);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  66%{transform:translateY(26px) scaleY(.88) scaleX(1.09)}
  79%{transform:translateY(18px) scaleY(1.05) scaleX(.97)}
  91%{transform:translateY(26px) scaleY(.97) scaleX(1.02)}
  100%{transform:translateY(26px) scaleY(1) scaleX(1)}}

/* نفس الوضع من غير حركة — شاشة النتيجة، الحركة اتشافت خلاص في اللقطة */
/* الحركات بقت على عناصر كتير (حبل، عقدة، خشبة، أرض، راجل)، فبنوقّفها
   كلها بقاعدة واحدة بدل ما ننسى واحدة. */
.gallows.still *{animation-duration:.01ms !important;animation-delay:0s !important}

/* نسخة الخصم اللي فوق — صغيرة، فالتفاصيل الرفيعة بتتقّل شوية عشان تفضل باينة */
.gallows.sm{max-width:96px}
.gallows.sm .p circle,.gallows.sm .p rect,.gallows.sm .p ellipse,.gallows.sm .p path{stroke-width:3}
.gallows.sm .ring{stroke-width:6}
/* ═══ خانات الحروف على الخشبة ═══ */
/* الكلمة **لازم** تفضل على سطر واحد: الصف مبيتكسرش، والمربعات هي
   اللي بتصغّر لحد ما تدخل. --n = عدد الحروف (بيتحط من app.js)، وحجم
   الخط بيتقسم عليه عشان الحرف يفضل جوّه مربعه.
   قبل كده الصف كان بيتكسر سطرين في الكلمة الطويلة، والكلمة بتتقرا
   مقطوعة نصين. */
/* المسافة بين الخانات بتضيق مع الكلمة الطويلة كمان — 14 مسافة ×6
   بكسل كانت بتاكل تلت العرض في كلمة من 15 حرف وتسيب الخانة 16 بكسل. */
.tiles{display:flex;flex-wrap:nowrap;justify-content:center;padding:10px 0;--n:6;
  gap:clamp(2px,calc(16px - var(--n) * 1px),6px)}
.tile{flex:0 1 40px;min-width:0;aspect-ratio:5/6;display:grid;place-items:center;
  border-radius:10px;border:2px solid var(--line);background:var(--bg2);
  font-family:'Lalezar','Tajawal',sans-serif;line-height:1;
  font-size:clamp(11px,calc(48vw / var(--n)),26px);
  color:transparent;position:relative;
  box-shadow:inset 0 -3px 0 #0006}
/* الخانة المقلوبة: خطوط خشب خفيفة عشان تبان إنها ضهر اللوح مش مربع فاضي */
.tile::after{content:'';position:absolute;inset:6px;border-radius:6px;
  background:repeating-linear-gradient(45deg,#ffffff08 0 4px,transparent 4px 8px)}
.tile.on{color:var(--ink);background:var(--surface2);border-color:var(--brass);
  box-shadow:inset 0 -3px 0 #0008,0 0 0 1px #0004}
.tile.on::after{display:none}
/* ═══ حالة الخانة المليانة ═══
   **منوّرة** = اللاعب جابها بنفسه: نفس خانة الكشف بالظبط بس بإطار
   أفتح وهالة حواليها. رمادي باهت = بانت لوحدها لما الكلمة اتكشفت في
   الآخر — مقروءة بس مطفية، عشان مايفتكرش إنه جابها.
   كانت خضرا قبل كده، والأخضر كان بيتخانق مع لون اللعبة وبيبان كأنه
   عنصر من لعبة تانية — النور بيقول نفس المعنى بلون اللعبة نفسها. */
.tile.on.dim{color:#ffffff66;background:var(--bg2);border-color:var(--line);
  box-shadow:inset 0 -3px 0 #0006}
/* النور آخر قاعدة بالقصد: dim وhit ليهم نفس الوزن، فاللي بعدين
   بيكسب. لو كلاس علق بالغلط على خانة، الأولى تبان منوّرة مش مطفية. */
.tile.on.hit{color:var(--ink);background:var(--surface2);border-color:var(--brass-hi);
  box-shadow:inset 0 -3px 0 #0008,0 0 0 2px var(--ring),0 0 14px var(--glow)}
.tile.flip{animation:tileFlip .35s ease-out}
@keyframes tileFlip{from{transform:rotateY(90deg) scale(.9)}to{transform:none}}
/* حروف الخصم اللي لسه ماجابهاش — انت شايفها، هو لأ */
.tile.ghost{color:#ffffff30;background:var(--bg2);border-style:dashed;border-color:var(--line);
  box-shadow:none}
.tile.ghost::after{display:none}

/* ═══ الكيبورد ═══
   7 أعمدة: العربي 35 حرف (28 + ة + 6 همزات) = 5 صفوف كاملة بالظبط،
   والإنجليزي 26 = 4 صفوف وآخر صف ناقص. المقاس محسوب عشان الإصبع
   يوصل من غير ما يدوس غلط. */
.keyboard{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.key{position:relative;height:44px;border-radius:11px;border:2px solid var(--line);background:var(--surface2);
  color:var(--ink);font-family:'Tajawal',sans-serif;font-size:19px;font-weight:800;
  cursor:pointer;box-shadow:0 3px 0 #0009;transition:transform .06s,box-shadow .06s,opacity .2s}
.key:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 #0009}
.key.hit{background:#123a26;border-color:var(--ok);color:#8ff0b8;box-shadow:0 3px 0 #05200f}
.key.miss{background:#3a1218;border-color:var(--bad);color:#ff9aa0;box-shadow:0 3px 0 #200509}
/* الحرف الغلط بيتشطب على المربع كله — من ركن فوق يمين لركن تحت شمال،
   مش خط على الحرف بس (كان text-decoration:line-through).
   ليه تدرّج مش عنصر مايل: شرايط التدرّج بتطلع عمودية على اتجاهه،
   فـ«لتحت يمين» بيدّي شطبة «/» بالظبط. والـ50% بتقع في مركز المربع،
   يعني الشطبة بتعدّي على الركنين التانيين مهما اتغيّر مقاس الزرار —
   والزرار قريب من المربع (46×44 على موبايل عادي) فالزاوية 45 درجة. */
.key.miss::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom right,
    transparent calc(50% - 1.6px), var(--bad) calc(50% - 1.6px),
    var(--bad) calc(50% + 1.6px), transparent calc(50% + 1.6px))}
.key:disabled{cursor:default}
/* مش دورك: الكيبورد بيبهت كله بدل ما يدوس ويستنى رفض من السيرفر */
.key:disabled:not(.hit):not(.miss){opacity:.32}
.keyboard.en .key{font-size:17px;letter-spacing:.5px}

/* ═══ الشاشة المنقسمة ═══
   فوق صاحبك (صغيّر — انت متفرّج)، وتحت لعبتك انت (هي الأساس). */
.foe-card{padding:12px 14px;background:linear-gradient(180deg,var(--bg2),var(--surface));
  border-color:var(--line)}
.foe-head{display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px;margin-bottom:6px}
.foe-head .fa{font-size:22px}
.foe-head .ft{margin-inline-start:auto;font-size:12.5px;color:var(--brass-hi);font-weight:800}
.foe-body{display:flex;align-items:center;gap:12px}
.foe-stat{flex:none;width:96px}
.foe-word{flex:1;min-width:0}
.fw-lbl{font-size:11.5px;color:var(--ink-dim);font-weight:800;margin-bottom:2px}
.fw-note{font-size:12.5px;color:var(--ink-dim);text-align:center}
.foe-word .tiles{padding:4px 0;gap:3px}
.foe-word .tile{flex-basis:26px;font-size:clamp(8px,calc(19vw / var(--n)),17px);border-radius:7px}
/* الخانة هنا نص المقاس، فالهالة بنفس السمك بتتحس أضعف — بنقوّيها
   شوية عشان النور يبان زي ما بيبان تحت بالظبط. */
.foe-word .tile.on.hit{box-shadow:inset 0 -2px 0 #0008,0 0 0 2px var(--ring),0 0 11px var(--glow)}

.mine-card{padding:14px}
.mine-head{text-align:center;font-weight:900;font-size:16px;margin-bottom:8px;color:var(--ink-dim)}
.mine-head.active{color:var(--brass-hi)}
.mine-note{font-size:13.5px;color:var(--ink-dim);margin-top:2px}
.mine-stat{margin:2px 0}

/* ═══ اختيار الكلمة ═══ */
.pick-head{text-align:center;font-size:14.5px;color:var(--ink-dim);line-height:1.7;margin-bottom:8px}
.word-slot{min-height:64px;display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;align-items:center;--n:6;
  border:2px dashed var(--line);border-radius:16px;padding:8px;background:#0004}
.word-slot.empty{color:var(--ink-dim)}
/* ═══ خانة الكتابة: عرض الكارت كله ═══
   مفيش زرار «تم» جنبها خالص (اتشال 2026-09-04) — كل حرف بيتكتب بيطلع
   فوق في مربعه على طول، فمفيش حاجة تتأكّد. */
.word-in{width:100%;font-size:18px;text-align:center;font-weight:800;margin-bottom:6px}
.word-sent{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;margin:10px 0;--n:6}
.waiting-emo{font-size:52px;line-height:1;margin-bottom:4px}

/* ═══ كشف الجولة ═══ */
.reveal-top .rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
.rv-row{padding:12px 14px}
.rv-row.me{border-color:var(--brass)}
.rv-head{display:flex;align-items:center;gap:8px;font-size:15px;flex-wrap:wrap}
.ok-tag{color:var(--ok);font-weight:900;font-size:13px}
.bad-tag{color:var(--bad);font-weight:900;font-size:13px}
.rv-tiles{padding:6px 0}
.rv-meta{text-align:center}
.rv-pts{text-align:center;margin-top:6px}
.rv-pts .pt{display:inline-block;background:var(--tint);color:var(--tint-ink);border-radius:999px;
  padding:3px 12px;font-weight:900;font-size:14px;margin:2px}
.rv-pts .pt.zero{background:#0006;color:var(--ink-dim)}
.rv-pts .pt.bonus{background:#123a26;color:#8ff0b8}
.score-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-weight:800}
.score-row .sc{background:var(--bg2);border:2px solid var(--line);border-radius:999px;padding:4px 14px}

/* ═══ النتيجة النهائية ═══ */
.rank-row .rk{font-family:'Lalezar';font-size:20px;color:var(--ink-dim);min-width:26px}
.rank-row .who{font-weight:900}
.rank-row .det{margin-inline-start:auto;font-size:11.5px;text-align:end}
.rank-row .sc{font-family:'Lalezar';font-size:21px;color:var(--brass-hi);min-width:44px;text-align:end}
.award .aw-ic{font-size:30px}
.rev-round{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px}
.rev-round .rr-n{font-weight:900;color:var(--brass-hi);font-size:13px;margin-bottom:4px}
.rev-round .rr-b{display:flex;gap:8px;align-items:center;padding:3px 0}
.rev-round .rr-w{font-family:'Lalezar','Tajawal',sans-serif;font-size:19px}

/* كارت «مستنيين صاحبك» في اللوبي — مكان فاضي بشكل مقصود مش كارت ناقص */
.p-tile.empty{border-style:dashed;opacity:.6}
.p-tile.empty .av{filter:grayscale(1)}

/* ═══ الشاشات الضيقة ═══
   على 360px الخانات والكيبورد بياخدوا عرض أكتر من الشاشة، فبنصغّرهم
   بالتدريج بدل ما الصفحة تعمل سكرول أفقي. */
@media (max-width:430px){
  .tile{flex-basis:34px;font-size:clamp(10px,calc(48vw / var(--n)),23px)}
  .key{height:41px;font-size:18px}
  .gallows{max-width:180px}
  .foe-stat{width:82px}
  .foe-word .tile{flex-basis:23px;font-size:clamp(8px,calc(20vw / var(--n)),15px)}
}
@media (max-width:360px){
  .tile{flex-basis:29px;font-size:clamp(9px,calc(48vw / var(--n)),20px);border-radius:8px}
  .keyboard{gap:5px}
  .key{height:38px;font-size:16px;border-radius:9px}
  .gallows{max-width:160px}
  .foe-stat{width:72px}
  .foe-word .tile{flex-basis:20px;font-size:clamp(7px,calc(20vw / var(--n)),13px)}
}

/* ═══════════════ تشويق الحرف ═══════════════
   الحرف بيقعد ثانية ونص معلّق قدام الاتنين قبل ما يبان صح ولا غلط.
   الفقاعة بتتحط جوّه كارت صاحب اللوحة، فوق المحتوى — عشان تبان إن
   الحرف ده رايح على مين. */
.pend-pop{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);
  z-index:8;display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;animation:ppIn .18s ease-out}
@keyframes ppIn{from{opacity:0;transform:translateY(-50%) scale(.8)}}
.pend-pop .pp-card{
  width:74px;height:88px;display:grid;place-items:center;border-radius:16px;
  border:3px solid var(--brass);background:var(--surface2);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:46px;line-height:1;color:var(--ink);
  box-shadow:0 10px 26px #000b,inset 0 -4px 0 #0007;
  animation:ppPulse .62s ease-in-out infinite alternate}
@keyframes ppPulse{to{transform:scale(1.07);border-color:var(--brass-hi)}}
.pend-pop .pp-who{font-size:12px;font-weight:800;color:var(--ink-dim);
  background:#0b1322cc;border-radius:999px;padding:3px 10px}
/* النتيجة بانت — الفقاعة بتاخد لونها وتختفي */
.pend-pop.hit .pp-card{animation:none;border-color:var(--ok);color:var(--ok);
  box-shadow:0 0 0 6px #2ec27e33,0 10px 26px #000b}
.pend-pop.miss .pp-card{animation:ppShake .34s ease-in-out;border-color:var(--bad);color:var(--bad);
  box-shadow:0 0 0 6px #ff5c5c33,0 10px 26px #000b}
@keyframes ppShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pend-pop.hit,.pend-pop.miss{animation:ppOut .45s ease-in forwards}
@keyframes ppOut{0%,55%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(.9)}}
/* الكارت لازم يبقى مرجع للتموضع — من غير كده الفقاعة بتطلع برّه */
.foe-card,.mine-card{position:relative}
.pend-pop.me .pp-card{border-color:var(--coral)}

/* ═══════════════ لقطة آخر الجولة ═══════════════
   وقفة قصيرة بعد ما الجولة تقفل وقبل ما النتيجة تظهر — عشان حركة
   الشنقة (أو فرحة النجاة) تتشاف قبل ما الشاشة تتغيّر. */
.outro{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  background:radial-gradient(600px 380px at 50% 45%,#16233dF2 0%,#080e19FA 70%);
  animation:ouIn .26s ease-out}
@keyframes ouIn{from{opacity:0}}
.outro.out{animation:ouOut .32s ease-in forwards}
@keyframes ouOut{to{opacity:0}}
.outro .ou-emo{font-size:86px;line-height:1}
/* الرسمة جوّه اللقطة — أكبر من اللي في اللعب عشان الحركة تتشاف */
.outro .ou-fig{width:100%;display:flex;justify-content:center}
.outro .ou-fig .gallows{max-width:228px}
.reveal-top .rv-fig{display:flex;justify-content:center;margin-bottom:2px}
.reveal-top .rv-fig .gallows{max-width:136px}
.outro.win .ou-emo{animation:ouFly 1.5s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes ouFly{0%{transform:translateY(26px) scale(.5);opacity:0}
  35%{transform:translateY(-6px) scale(1.14);opacity:1}
  60%{transform:translateY(0) scale(1)}
  100%{transform:translateY(-16px) scale(1.04)}}
.outro.lose .ou-emo{animation:ouDrop .7s cubic-bezier(.4,0,.7,1) forwards}
@keyframes ouDrop{0%{transform:translateY(-34px) scale(.7);opacity:0}
  70%{transform:translateY(6px) scale(1.08);opacity:1}
  100%{transform:translateY(0) scale(1)}}
.outro .ou-txt{font-family:'Lalezar','Tajawal',sans-serif;font-size:38px;line-height:1.1;
  color:var(--ink);opacity:0;animation:ouUp .38s ease-out .5s forwards}
.outro.win .ou-txt{color:var(--ok)}
.outro.lose .ou-txt{color:var(--bad)}
.outro .ou-sub{font-size:15px;color:var(--ink-dim);opacity:0;
  animation:ouUp .38s ease-out .66s forwards}
@keyframes ouUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:380px){
  .pend-pop .pp-card{width:62px;height:74px;font-size:38px}
  .outro .ou-emo{font-size:70px}
  .outro .ou-fig .gallows{max-width:190px}
  .outro .ou-txt{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  .pend-pop .pp-card,.outro .ou-emo,.outro .ou-txt,.outro .ou-sub{animation-duration:.01ms}
  .pend-pop .pp-card{animation-iteration-count:1}
}