/* ===== مسافة شريط إشعارات الموبايل =====
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}
/* ============ شاشة البداية (الإعدادات) ============ */
.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: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}
/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.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}
/* احترام منطقة النوتش/شريط الحالة في المتصفح كمان */
.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}
/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
ثيم «حروف المشنقة — خشبة وحبل»
اللون الأساسي مرجاني دافي (#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)}
/* النوافذ الداخلية */
.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)}
/* بلوك «عن اللعبة» تحت اللعبة — مخفي لحد ما اللعبة ترسم.
لازم هنا مش في hazzar-ui.js: ده بيتحمّل في قبل أول رسم،
وده بيتحمّل في آخر الصفحة فالشرح كان بيومض بمقاسات المتصفح. */
.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: المسافة بين الفقرتين بدقة — بدل
اللي كان بيعمل
فجوة = ضعف ارتفاع السطر ومفيش تحكم فيها. */
.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}
/* ═══ الشاشات الضيقة ═══
على 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}
}
/* ══════════════════════════════════════════════════════════════════════
«اتحدّى نفسك» — الإضافات المشتركة بين ألعاب اللاعب الواحد
(نفسها في أسئلة ومعلومات): شاشة البداية، كارت الرقم القياسي، اللقب
والرقم في النتيجة، ورأس اللوحة بعمود واحد.
══════════════════════════════════════════════════════════════════════ */
/* شريط رقم الجولة والكاتيجوري */
.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 — انت لوحدك، واللي قصادك هو رقمك انت. */
.card.board{position:relative;padding:0;overflow:hidden}
.bd-head.solo{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.3fr 1fr;
background:linear-gradient(180deg,var(--surface2,var(--surface)),var(--surface))}
.bd-head.solo .bd-p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-head.solo .bd-av{font-size:26px;line-height:1}
.bd-head.solo .bd-nm{font-size:12px;font-weight:700;color:var(--ink-dim);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-head.solo .bd-p.me .bd-nm{color:var(--brass-hi)}
.bd-head.solo .bd-sc{font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:1.05;color:var(--brass-hi)}
.bd-head.solo .bd-sc.bump{animation:ptBumpSolo .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ptBumpSolo{0%{transform:scale(1)}35%{transform:scale(1.5);filter:brightness(1.5)}100%{transform:scale(1)}}
.bd-head.solo .bd-p.score,.bd-head.solo .bd-p.tally{border-inline-start:1px solid var(--line)}
.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:5px;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-row.solo{grid-template-columns:1fr}
/* ═══ شاشة البداية — كارت رقمك القياسي ═══
تحت الأفاتار، وبيتبع عدد الجولات المختار مع كل دوسة على + أو −.
مخفي خالص لو لسه ملعبش العدد ده. */
.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)}}
/* المراجعة في الآخر: أخضر للي جبتها وأحمر للي راحت */
.rev-round.ok{border-color:var(--ok)}
.rev-round.no{border-color:#5a2a30}
/* خانة التخمين بتتهزّ لما الإجابة تبقى غلط */
.shake{animation:fieldShake .4s}
@keyframes fieldShake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-2px)}}
.rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
@media (max-width:400px){
.bd-head.solo .bd-av{font-size:22px}
.bd-head.solo .bd-sc{font-size:23px}
.bd-tl{font-size:18px}
.final-score b{font-size:44px}
.grade-t{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
.rec-line.new,.shake{animation-duration:.01ms}
}