/* ===== مسافة شريط إشعارات الموبايل =====
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)}
/* الشيب لازم يرد على الدوسة في نفس اللحظة. الحالة نفسها بتتغيّر محليًا
من setOpt، ودي الحتة الحسّية: ضغطة تحت الصباع + مفيش هايلايت أزرق
من المتصفح. من غيرهم اللوبي كان حاسس إنه واقف كل ما الهوست يدوس. */
.chip.click{cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:transform .07s ease,border-color .12s,background .12s,color .12s}
.chip.click:not(.locked):active{transform:scale(.93)}
.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))}
/* اللوجو **مربّع** — بست زي شخصيات ألعاب الشلة بالظبط، فبيتقاس مربّع
ومن غير رفع. القاعدة اللي كانت هنا منقولة من حروف المشنقة، ولوجوها
طولي فعلاً (height:auto + رفع 10px عشان راس الراجل تحاذي الاسم).
على لوجو مربّع نفس القاعدة كانت بتخلّي الصورة طايفة فوق سطر الاسم. */
.top img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 6px #0008)}
/* ===== زرار الخروج الثابت ===== */
.leave-fab{position:fixed;bottom:14px;inset-inline-start:14px;z-index:120;width:52px;height:52px;border-radius:50%;
border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer;
box-shadow:0 6px 0 #000a;transition:transform .07s}
.leave-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.ui-modal-ov{position:fixed;inset:0;z-index:300;background:#000b;display:flex;align-items:center;justify-content:center;
padding:20px;opacity:0;transition:opacity .16s;backdrop-filter:blur(3px)}
.ui-modal-ov.show{opacity:1}
.ui-modal{background:linear-gradient(180deg,var(--surface),#12203a);border:2px solid var(--line);border-radius:24px;
width:100%;max-width:400px;padding:24px 22px;box-shadow:0 20px 50px #000c;text-align:center;
transform:translateY(14px) scale(.97);transition:transform .18s}
.ui-modal-ov.show .ui-modal{transform:none}
.ui-modal-emoji{font-size:46px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px #0007)}
.ui-modal-title{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;margin:0 0 8px;color:var(--brass-hi)}
.ui-modal-body{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:18px}
.ui-modal-actions{display:flex;gap:10px}
.ui-modal-actions .btn{flex:1;margin:0}
/* ===== شاشة التعليمات (هيلب) الجديدة ===== */
.help-ov{position:fixed;inset:0;z-index:260;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.help-card{background:linear-gradient(180deg,#182741,#101d33);border:2px solid var(--line);border-radius:26px;
width:100%;max-width:540px;max-height:92vh;overflow:auto;box-shadow:0 22px 55px #000d}
.help-hero{position:sticky;top:0;background:linear-gradient(180deg,#1d2f4f,#182741);padding:20px 22px 16px;border-bottom:2px solid var(--line);text-align:center;z-index:2}
.help-hero img{width:89px;height:auto;filter:drop-shadow(0 8px 16px #0009)}
.help-hero h2{font-family:'Lalezar','Tajawal',sans-serif;font-size:30px;margin:6px 0 2px}
.help-hero .sub{color:var(--dim);font-size:14px;font-weight:700}
.help-body{padding:8px 20px 4px}
.help-step{display:flex;gap:14px;padding:14px 4px;border-bottom:1px dashed #ffffff12}
.help-step:last-child{border-bottom:none}
.help-num{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;
background:#0c1424;border:2px solid var(--line);box-shadow:inset 0 1px 0 #ffffff10}
.help-step h4{margin:0 0 3px;font-size:16.5px;font-weight:900}
.help-step p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.help-step .hl{color:var(--brass-hi);font-weight:800}
.help-step .warn{color:var(--coral);font-weight:800}
.help-foot{position:sticky;bottom:0;background:linear-gradient(0deg,#101d33,#101d33ee);padding:14px 20px 18px;border-top:2px solid var(--line)}
.help-chk{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;cursor:pointer;justify-content:center;margin-bottom:10px}
.help-chk input{width:17px;height:17px}
/* احترام منطقة النوتش/شريط الحالة في المتصفح كمان */
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}
/* خلفية صلبة ورا شريط إشعارات الموبايل — عشان محتوى اللعبة ما يظهرش تحته */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--safe-top);
background:var(--bg2,#0B1322);z-index:120;pointer-events:none}
/* الشاشات اللي بتغطي كل الموبايل — تحترم شريط الإشعارات هي كمان */
/* مسافة أزرار النظام تحت (شريط التنقّل أو شريط الإيماءات).
env(safe-area-inset-bottom) بيرجّع القيمة الحقيقية من الجهاز نفسه: صفر على
الموبايلات اللي مالهاش أزرار تحت، و24-48 بكسل على اللي ليها. يعني الحل
بيظبط نفسه على أي جهاز من غير ما نكتب أرقام ولا نتعرّف على موديل بعينه.
من غير السطر ده زرار «تمام يلا نلعب» كان بيقع تحت أزرار النظام. */
.ui-modal-ov,.help-ov{padding-top:calc(16px + var(--safe-top)) !important;
padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}
/* مفتاح ظبط المسافة فوق (جوه شيت المساعدة) */
.safe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 2px 2px;font-size:13px;color:var(--ink-dim,#B9C3D8)}
.safe-ctl{display:flex;align-items:center;gap:8px}
.safe-ctl button{width:30px;height:30px;border-radius:10px;font-size:18px;font-weight:900;line-height:1;
background:#0d1830;border:1px solid var(--line);color:inherit;cursor:pointer}
.safe-ctl button:active{filter:brightness(1.3)}
.safe-ctl b{min-width:34px;text-align:center;font-size:14px;color:var(--brass-hi,#FFB93E)}
.safe-hint{font-size:11px;color:var(--muted,#8fa0bd);line-height:1.5;padding:0 2px 6px;text-align:center}
/* أيقونات الباب */
.ico-door{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;stroke:currentColor}
.leave-fab .ico-door{width:22px;height:22px;vertical-align:-4px}
.ui-modal .ui-emoji .ico-door{width:38px;height:38px}
/* ═══ ثيم اللعبة ═══ */
/* ══════════════════════════════════════════════════════════════════════
ثيم «سلسلة الكلمات — لبني فاتح»
اللون الأساسي **لبني فاتح** (#A8D4F5) — مسحوب من پلوڤر الشخصية في
اللوجو نفسه (#A6BFD5)، بس أفتح وأنقى شوية عشان يشتغل نص وزرار على
خلفية غامقة. كان قبل كده سماوي معدني (#4ED6F0)؛ اتغيّر 2026-08-31
مع الرسمة الجديدة عشان الواجهة تبقى نفس عالم اللوجو.
الفرق بينه وبين أزرق «اسأل واستفيد» (#5B9DFF) فرق **تشبّع مش درجة**:
ده باهت وهادي زي القماش، وده مشبّع وملكي. ولازم يفضلوا كده — أي
تشبيع للبني هيخلّي الاتنين لعبة واحدة في عين اللاعب.
الخلفية كحلي مزرق، واللون التاني رملي دافي (#F0A93C) — بيدّي النَفَس
الدافي اللي في شعر وبشرة الشخصية، وبيفصل الأزرار المساعدة عن
الأساسية من غير لخبطة.
الأخضر محجوز للكلمة اللي اتجابت والأحمر للغلط — دول أهم إشارتين في
اللعبة فماينفعش يتلخبطوا مع لون الواجهة.
══════════════════════════════════════════════════════════════════════ */
:root{
--bg:#0B1626; --bg2:#0F2033; --surface:#152941; --surface2:#1E3855; --line:#2B4C72;
--brass:#6FAEDC; --brass-hi:#A8D4F5; /* الأساسي = لون اسم اللعبة */
--teal:#E0912B; --teal-hi:#F0A93C; /* اللون التاني (الأزرار المساعدة) */
--coral:#F0616B; --coral-hi:#F98F96;
--on-acc:#08202F; --acc-sh:#3A6B95; /* خط وظل الزرار الأساسي */
--on-two:#2B1704; --two-sh:#8A5410;
--on-coral:#2E0710; --coral-sh:#8A2138;
--tint:#12314A; --tint-ink:#C4E4FA; /* خلفية العناصر المفعّلة */
--ring:#A8D4F533; /* هالة التركيز */
--glow:#A8D4F555; /* نور الخانة اللي اتجابت صح */
--ink:#EDF4FA; --ink-dim:#A3BACE; --dim:#A3BACE; --muted:#A3BACE;
}
/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
radial-gradient(1200px 500px at 50% -150px,#16304F 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,#6FAEDC,#A8D4F5,#F0A93C)}
/* الأزرار */
.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:37px;height:37px}
.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:33px;height:33px}
.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),#0D1B2E)}
.ui-modal-title{color:var(--brass-hi)}
/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#0D1B2E)}
.help-hero{background:linear-gradient(180deg,#16304F,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#0D1B2E,#0D1B2Eee);border-top-color:var(--line)}
.help-num{background:#091422;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}
/* ══════════════════════════════════════════════════════════════════════
سلسلة الكلمات — العناصر الخاصة بيها
══════════════════════════════════════════════════════════════════════ */
/* شريط الوقت — بيقيس وقت الدور الواحد */
.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}}
/* ═══ خانات الحروف ═══
الكلمة **لازم** تفضل على سطر واحد: الصف مبيتكسرش، والمربعات هي اللي
بتصغّر لحد ما تدخل. --n = عدد الحروف (بيتحط من app.js)، وحجم الخط
بيتقسم عليه عشان الحرف يفضل جوّه مربعه. الوحدة vw مش % بالقصد:
الـ% جوه calc بتاعة font-size بتتحسب على خط الأب مش على العرض.
المسافة بين الخانات بتضيق مع الكلمة الطويلة كمان. */
.tiles{display:flex;flex-wrap:nowrap;justify-content:flex-start;--n:6;
gap:clamp(2px,calc(14px - var(--n) * 1px),5px)}
.tile{flex:0 1 27px;min-width:0;aspect-ratio:5/6;display:grid;place-items:center;
border-radius:8px;border:2px solid var(--line);background:var(--bg2);
font-family:'Lalezar','Tajawal',sans-serif;line-height:1;
font-size:clamp(10px,calc(36vw / var(--n)),19px);
color:transparent;position:relative;
box-shadow:inset 0 -2px 0 #0006}
/* الخانة المقفولة: خطوط خفيفة عشان تبان إنها ضهر حلقة مش مربع فاضي */
.tile::after{content:'';position:absolute;inset:5px;border-radius:5px;
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 -2px 0 #0008,0 0 0 1px #0004}
.tile.on::after{display:none}
/* ═══ حالة الخانة المليانة ═══
منوّرة = اتفتحت فعلاً (خمّنها أو طلبها) • باهتة = انكشفت في الآخر •
شبح = انت شايفها لأنك انت اللي كاتبها وهو لسه مشافهاش.
النور آخر قاعدة بالقصد: dim وhit ليهم نفس الوزن، فاللي بعدين بيكسب —
ولو كلاس علق بالغلط على خانة، الأولى تبان منوّرة مش مطفية. */
.tile.on.dim{color:#ffffff66;background:var(--bg2);border-color:var(--line);
box-shadow:inset 0 -2px 0 #0006}
.tile.on.ghost{color:#ffffff2e;background:var(--bg2);border-style:dashed;border-color:var(--line);
box-shadow:none}
.tile.on.ghost::after{display:none}
.tile.on.hit{color:var(--ink);background:var(--surface2);border-color:var(--brass-hi);
box-shadow:inset 0 -2px 0 #0008,0 0 0 2px var(--ring),0 0 12px var(--glow)}
/* أول حرف في كلمة لسه مقفولة — ده اللي صاحبك شايفه من الأول، فبيتعلّم
بلون اللعبة عشان اللاعب يفهم على طول إن ده «المفتاح» مش تخمينة جابها */
.tile.key{border-color:var(--brass);border-style:solid}
.tile.flip{animation:tileFlip .35s ease-out}
@keyframes tileFlip{from{transform:rotateY(90deg) scale(.9)}to{transform:none}}
/* ═══ عمود السلسلة ═══
صف لكل كلمة: رقمها على جنب، والكلمة في النص، وعلامة حالتها في الآخر.
الكلمة الأولى مستطيل كامل — هي ظاهرة من الأول فمالهاش داعي تتقسّم
خانات، وشكلها المختلف بيقول لوحده إنها «البداية». */
.chain{display:flex;flex-direction:column;gap:0}
.crow{display:grid;grid-template-columns:22px 1fr 22px;align-items:center;gap:8px;
padding:5px 8px;border:2px solid transparent;border-radius:12px;transition:background .18s,border-color .18s}
.crow .cn{font-family:'Lalezar','Tajawal',sans-serif;font-size:13px;color:var(--ink-dim);text-align:center;line-height:1}
.crow .cbody{min-width:0}
.crow .cmark{font-size:13px;text-align:center;line-height:1}
.crow .cword{font-family:'Lalezar','Tajawal',sans-serif;font-size:21px;line-height:1.25;
background:var(--surface2);border:2px solid var(--brass);border-radius:12px;
padding:5px 12px;display:inline-block;max-width:100%;overflow-wrap:anywhere;
box-shadow:inset 0 -2px 0 #0008}
.crow .cword.ph{background:var(--bg2);border:2px dashed var(--line);color:var(--ink-dim);
font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;box-shadow:none}
/* الكلمة اللي شغّالة دلوقتي — دي أهم صف في الشاشة، فليها إطار ونور */
.crow.cur{background:var(--tint);border-color:var(--brass-hi)}
.crow.cur .cn{color:var(--brass-hi)}
.crow.done{opacity:.92}
.crow.lock{opacity:.62}
.crow.rv.miss{opacity:.5}
.crow.rv .cword{font-size:19px}
.crow.rv.miss .cword{background:var(--bg2);border-color:var(--line);color:var(--ink-dim)}
/* ═══ الوصلة بين كل كلمتين ═══
بتوريك المصطلح اللي الكلمتين بيعملوه. خط رفيع فوق وتحت عشان العين
تقرا العمود كسلسلة مترابطة مش قايمة كلمات. */
.blink{position:relative;text-align:center;font-size:11.5px;font-weight:700;
color:var(--ink-dim);padding:2px 0;min-height:18px;line-height:1.3}
.blink::before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:31px;
width:2px;background:var(--line);border-radius:2px}
.blink.on{color:var(--brass-hi)}
/* ═══ محرّر التجهيز ═══ */
.chain.build .crow.edit{cursor:pointer}
.chain.build .crow.edit:active{transform:scale(.995)}
.ced-lbl{text-align:center;font-size:14px;margin-bottom:8px;color:var(--ink-dim)}
.ced-lbl b{color:var(--brass-hi)}
.ced-hint{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;min-height:22px}
.ced-hint .lk{background:var(--bg2);border:2px solid var(--line);border-radius:999px;
padding:2px 10px;font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.ced-hint .lk b{color:var(--brass-hi)}
.ced-card .btn.sm{width:42px;height:46px;font-size:22px;flex:none}
.pick-head{text-align:center;font-size:14.5px;color:var(--ink-dim);line-height:1.8;margin-bottom:10px}
.pick-head b{color:var(--ink)}
.waiting-emo{font-size:52px;line-height:1;margin-bottom:4px}
.sent-chain{margin-top:10px}
/* ═══ الشاشة المنقسمة ═══
فوق صاحبك (صغيّر — انت متفرّج)، وتحت لعبتك انت (هي الأساس). */
.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:4px}
.foe-head .fa{font-size:22px}
.foe-head .ft{margin-inline-start:auto;font-size:12.5px;color:var(--brass-hi);font-weight:800}
/* ═══ عنوان اللوحة ═══
الشاشة عليها عمودين شكلهم واحد (عشر صفوف خانات فوق عشر صفوف خانات)،
وقبل كده كان اللي بيفرّق بينهم سطر رمادي 11 بكسل — والعين كانت
بتتوه: مين فيهم بتاعي؟ دلوقتي فوق كل عمود عنوان بخط اللعبة العريض
وشريط جنبه بلون اللوحة: **دهبي لسلسلتك** و**رمادي لسلسلة صاحبك**،
نفس منطق «انت اللاعب وهو المتفرَّج عليه» اللي ماشي في المقاسات. */
.sect-lbl{display:flex;align-items:center;gap:9px;margin:2px 0 1px}
.sect-lbl .sl-t{font-family:'Lalezar','Tajawal',sans-serif;font-size:19px;line-height:1.25;
color:var(--brass-hi);white-space:nowrap}
/* الصفحة rtl، فالشريط بيقع على شمال الاسم. اللون لازم يبقى غامق
جنب الاسم وبيروح وهو ماشي بعيد عنه — يعني من الشمال (شفاف) لليمين
(لون). لو عكسناها الشريط بيبان مقطوع جنب الكلام. */
.sect-lbl::after{content:'';flex:1;height:3px;border-radius:3px;
background:linear-gradient(90deg,transparent 0%,var(--brass) 100%)}
.sect-lbl.foe-sect .sl-t{font-size:15px;color:var(--ink-dim)}
.sect-lbl.foe-sect::after{height:2px;background:linear-gradient(90deg,transparent 0%,var(--line) 100%)}
.sect-sub{font-size:11.5px;color:var(--ink-dim);font-weight:700;margin-bottom:6px}
/* ═══ الخط الفاصل بين المراجعة واللعب ═══
تحت السلسلة على طول وفوق خانة التخمين — «من هنا وطالع بتتفرّج، ومن
هنا ونازل بتلعب». (كان فوق السلسلة قبل 2026-08-31.) */
.play-lbl{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;font-size:17px;
color:var(--brass-hi);margin:14px 0 0;padding-top:11px;border-top:2px dashed var(--line)}
/* شريط الوقت جوّه حتة اللعب — بين الخط الفاصل وخانة الكتابة.
وبيفضل واخد مكانه حتى وهو مطفي: لو اختفى بـdisplay:none، خانة
الكتابة كانت هتتزحلق 14 بكسل لفوق كل ما الدور يعدّي ويرجع. */
.mine-card .timer{margin:8px 0 2px}
.mine-card .timer.hidden{display:block;visibility:hidden}
/* «اطلب حرف» مقفول لأنك لسه مجرّبتش تخمّن؟ السطر بيبقى تحذير مش شرح */
#ask-note.locked{color:var(--coral-hi,#FF8571);font-weight:800}
.fw-lbl{font-size:11.5px;color:var(--ink-dim);font-weight:800;margin-bottom:4px}
.fw-note{font-size:12.5px;color:var(--ink-dim);text-align:center;margin-top:6px}
/* نسخة الخصم أصغر — عمود عشر صفوف لازم يفضل «شاشة صغيرة» فوق، مش
يزاحم لوحتك انت اللي تحت. */
.foe-chain .crow{grid-template-columns:18px 1fr 18px;gap:6px;padding:2px 6px;border-radius:9px}
.foe-chain .crow .cn{font-size:11px}
.foe-chain .crow .cmark{font-size:11px}
.foe-chain .crow .cword{font-size:15px;padding:2px 9px;border-radius:9px}
.foe-chain .tile{flex-basis:17px;border-radius:5px;font-size:clamp(7px,calc(22vw / var(--n)),13px);
box-shadow:inset 0 -1px 0 #0006}
/* الخانة هنا نص المقاس، فالهالة بنفس السمك بتتحس أضعف */
.foe-chain .tile.on.hit{box-shadow:inset 0 -1px 0 #0008,0 0 0 2px var(--ring),0 0 9px var(--glow)}
.foe-chain .blink{min-height:10px;font-size:0;padding:0}
.foe-chain .blink::before{inset-inline-start:25px}
/* ═══ «عدّيهاله» — الحكم البشري ═══ */
.credit-box{margin-top:8px;background:var(--bg2);border:2px dashed var(--brass);
border-radius:14px;padding:8px 10px}
.credit-box .cb-lbl{font-size:12px;font-weight:800;color:var(--brass-hi);text-align:center;margin-bottom:6px}
.credit-box .cb-row{display:flex;align-items:center;gap:8px;padding:3px 0}
.credit-box .cb-g{flex:1;font-weight:800;font-size:15px;overflow-wrap:anywhere}
.credit-box .btn.sm{flex:none;font-size:12.5px;padding:6px 10px}
.mine-card{padding:14px}
.mine-head{text-align:center;font-weight:900;font-size:16px;margin-bottom:8px;color:var(--ink-dim);line-height:1.5}
.mine-head.active{color:var(--brass-hi)}
.mine-head.last{color:var(--coral)}
.mine-note{font-size:13.5px;color:var(--ink-dim);margin-top:6px}
.mine-note b{color:var(--brass-hi)}
/* التخمينات اللي جرّبها وطلعت غلط — عشان ما يعيدش نفسها ويحرق دور */
.wrong-box{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:8px}
.wrong-box .wl{font-size:11.5px;color:var(--ink-dim);font-weight:800}
.wrong-box .wchip{background:#3a1218;border:2px solid #6b2530;color:#ffb9bf;border-radius:999px;
padding:2px 10px;font-size:12.5px;font-weight:700;text-decoration:line-through}
.guess-box{margin-top:6px;transition:opacity .2s;background:var(--bg2);border:2px solid var(--line);
border-radius:16px;padding:12px}
.guess-box.off{opacity:.5}
/* خانة الكتابة وزرار «خمّن» فوق بعض بعرض الكارت كله، و«اطلب حرف»
تحتيهم بشكل تاني واضح — عشان اللي تحت الخانة على طول يبقى هو
زرار التخمين مش زرار الحرف. */
.guess-box .field{font-size:17px;text-align:center;font-weight:700}
.guess-box #ask-btn{width:100%;font-size:16px;padding:11px}
.guess-box .tg-lbl{text-align:center;font-size:12.5px;color:var(--ink-dim);font-weight:800;margin-bottom:6px}
/* تنبيه «الـ» — سطر واحد فوق خانة الكتابة، هادي عشان مايشدّش الانتباه
من الكلمة نفسها، بس واضح لأنه في طريق العين وهي نازلة على الخانة. */
.guess-box .al-note{margin-top:9px;text-align:center;font-size:11.5px;line-height:1.5;
font-weight:700;color:var(--ink-dim);background:#101E33;border:1px dashed #2C4868;
border-radius:10px;padding:5px 8px}
/* نسخة أكبر من الكلمة اللي عليه دلوقتي — دي بؤرة الدور، فخاناتها أوسع
من خانات العمود اللي تحت وبتتوسّط الكارت. */
.guess-box .tg-word .tiles{justify-content:center}
.guess-box .tg-word .tile{flex-basis:38px;font-size:clamp(13px,calc(52vw / var(--n)),26px);border-radius:10px}
/* ═══ عمودك انت = لوحة، مش قايمة كلمات ═══
خلفية غاطسة وإطار حواليه عشان يتقرا ككتلة واحدة اسمها «سلسلتي»،
ويبقى أوضح من عمود صاحبك اللي فوق (اللي أصلاً خاناته نص المقاس). */
#my-chain{background:#0000002e;border:2px solid var(--line);border-radius:14px;padding:6px 4px}
#my-chain .crow{padding:6px 8px}
/* ═══ كشف الجولة ═══ */
.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;margin-bottom:2px}
.ok-tag{color:var(--ok);font-weight:900;font-size:13px}
.bad-tag{color:var(--bad);font-weight:900;font-size:13px}
.rv-meta{text-align:center;margin-bottom:6px}
.rv-chain .crow{padding:3px 8px}
.rv-pts{text-align:center;margin-top:8px}
.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{padding:3px 0}
.rev-round .rr-w{font-family:'Lalezar','Tajawal',sans-serif;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.rev-round .rr-s{margin-bottom:6px}
/* ═══ الشاشات الضيقة ═══
على 360px الخانات بتاخد عرض أكتر من الشاشة، فبنصغّرها بالتدريج بدل
ما الصفحة تعمل سكرول أفقي. */
@media (max-width:430px){
.tile{flex-basis:24px;font-size:clamp(9px,calc(36vw / var(--n)),17px)}
.crow{grid-template-columns:19px 1fr 19px;gap:6px;padding:4px 6px}
.crow .cword{font-size:19px;padding:4px 10px}
.foe-chain .tile{flex-basis:15px;font-size:clamp(6px,calc(22vw / var(--n)),12px)}
.foe-chain .crow .cword{font-size:13.5px}
}
@media (max-width:360px){
.tile{flex-basis:21px;font-size:clamp(8px,calc(36vw / var(--n)),15px);border-radius:6px}
.crow{grid-template-columns:17px 1fr 17px;gap:5px;padding:3px 5px}
.crow .cword{font-size:17px}
.foe-chain .tile{flex-basis:13px}
.blink::before{inset-inline-start:25px}
}
/* ═══════════════ مربّع «حرف» بالعربي ═══════════════
بديل الإيموجي 🔡 في السلسلة العربي — نفس الفكرة (مربّع فيه أربع
حروف) بس بحروف عربية. كل المقاسات بالـem عشان نفس العنصر يشتغل في
زرار «اطلب حرف» (خط صغير) وفي فقاعة التشويق (خط كبير) من غير مقاس
تاني. الشبكة بتتقلب لوحدها في الصفحة الـrtl، فالترتيب بيطلع
ا ب فوق وت ث تحت زي القراية بالظبط. */
.abc-ar{display:inline-grid;grid-template-columns:1fr 1fr;
gap:0 .18em;vertical-align:middle;
font-family:'Tajawal',sans-serif;font-size:.56em;font-weight:800;
line-height:1;letter-spacing:0;
border:.1em solid currentColor;border-radius:.28em;padding:.18em .28em;
opacity:.92}
.abc-ar i{font-style:normal;text-align:center}
/* في فقاعة التشويق المربّع لوحده جوّه .pp-l، والفلكس بيوسّطه من غير
ما يزوّد طول الكارت زي ما الـinline كان بيعمل. */
.pend-pop .pp-l{display:flex;align-items:center;justify-content:center}
/* ═══════════════ لحظة التشويق ═══════════════
التخمينة (أو طلب الحرف) بتقعد لحظة معلّقة قدام الاتنين قبل ما تبان
صح ولا غلط. */
/* ═══ الفقاعة مثبّتة على الشاشة مش على الكارت ═══
كانت position:absolute في نص الكارت. كارت لعبتك بقى ~800 بكسل
(سلسلة عشر صفوف + حتة اللعب)، يعني «نص الكارت» بيقع برّه الشاشة —
فاللاعب كان بيدوس «خمّن» ويقعد ثانية ونص قدام شاشة ساكتة ويفتكرها
هنجت، والتشويق اللي الفقاعة معمولة عشانه بيضيع. دلوقتي fixed في نص
الشاشة: باينة دايمًا مهما كان مكان السكرول. مين صاحبها؟ السطر اللي
تحتيها بيقول («تخمينتك…» / «تخمينة صاحبك…») واللون بيفرّق كمان. */
.pend-pop{position:fixed;inset-inline:0;top:50%;transform:translateY(-50%);
z-index:112;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{
min-width:110px;max-width:min(86vw,320px);min-height:74px;padding:10px 18px;
display:grid;place-items:center;border-radius:16px;
border:3px solid var(--brass);background:var(--surface2);
font-family:'Lalezar','Tajawal',sans-serif;line-height:1.2;color:var(--ink);
box-shadow:0 10px 26px #000b,inset 0 -4px 0 #0007;
animation:ppPulse .62s ease-in-out infinite alternate;overflow-wrap:anywhere;text-align:center}
.pend-pop .pp-t{font-size:30px}
.pend-pop .pp-l{font-size:42px}
@keyframes ppPulse{to{transform:scale(1.06);border-color:var(--brass-hi)}}
.pend-pop .pp-who{font-size:12px;font-weight:800;color:var(--ink-dim);
background:#0a1620cc;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}
/* طلب الحرف مالوش «صح ولا غلط» — الحرف بيتقلب مكان الأيقونة وخلاص */
.pend-pop.open .pp-card{animation:none;border-color:var(--brass-hi);color:var(--brass-hi);
box-shadow:0 0 0 6px var(--ring),0 10px 26px #000b}
.pend-pop.open .pp-l{animation:tileFlip .3s ease-out}
@keyframes ppShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pend-pop.hit,.pend-pop.miss,.pend-pop.open{animation:ppOut .5s ease-in forwards}
@keyframes ppOut{0%,60%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(.9)}}
/* الكارت لازم يبقى مرجع للتموضع — من غير كده الفقاعة بتطلع برّه */
.foe-card,.mine-card{position:relative}
.pend-pop.me .pp-card{border-color:var(--teal)}
/* ═══════════════ لقطة آخر الجولة ═══════════════ */
.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%,#12293CF2 0%,#050D14FA 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.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(-10px) 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{min-width:96px;min-height:64px;padding:8px 14px}
.pend-pop .pp-t{font-size:25px}
.pend-pop .pp-l{font-size:34px}
.outro .ou-emo{font-size:70px}
.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}
}
/* ═══ سلسلة الكلمات لوحدك — الكلمة اللي عدّت بصفر ═══
بتبان مكشوفة بس مطفية وسط السلسلة وانت بتلعب (مش في الكشف بس)،
عشان تفضل تشوف الوصلة للي بعدها من غير ما تبان كأنك جبتها. */
.crow.miss{opacity:.62}
.crow.miss .cn{color:var(--bad)}
/* نقط الكلمة في الكشف بدل العلامة */
.crow .cmark .cpt{font-family:'Lalezar','Tajawal',sans-serif;font-size:13px;color:var(--ok);font-weight:400}
/* زرار «عدّي الكلمة» أصغر من «اطلب حرف» — ده آخر حل مش أول حركة */
.guess-box #skip-btn{width:100%;font-size:13.5px;padding:9px;margin-top:10px;opacity:.85}