/* ===== مسافة شريط إشعارات الموبايل =====
env() هي القيمة الحقيقية من الجهاز (بتشتغل على iOS وأندرويد الجديد).
لو رجّعت صفر — وده بيحصل كتير على أندرويد — بناخد حد أدنى 30px على الموبايل
عشان المحتوى ما يقعش تحت الساعة والبطارية. */
:root{ --safe-top: env(safe-area-inset-top, 0px) }
/* الرقم الثابت اتشال — safe-top.js بيقيس القيمة الحقيقية من الجهاز */
/* ============ خبّي فلوسك — ستايل «فلوس وأسئلة» ============ */
:root{
--bg:#101A2B; --bg2:#0B1322; --surface:#182741; --surface2:#1F3152;
--line:#2A3E63; --ink:#F4EDDF; --ink-dim:#B9C3D8;
--brass:#F2A31B; --brass-hi:#FFB93E; --coral:#FF6D5A; --teal:#2FC6B0;
--cA:#E4573D; --cB:#2F86EB; --cC:#17A87B;
--ok:#2ec27e; --bad:#ff5c5c;
--r:18px; --r-lg:26px;
--shadow:0 6px 0 #000a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
margin:0;min-height:100%;color:var(--ink);
font-family:'Tajawal',system-ui,sans-serif;font-size:16px;line-height:1.55;
background:
radial-gradient(1200px 500px at 50% -150px,#1B2C4C 0%,transparent 60%),
var(--bg);
overscroll-behavior:contain;
/* ═══ المتصفح ممنوع يظبط السكرول من ورانا ═══
كروم بيعمل «تثبيت سكرول»: أول ما ارتفاع حاجة فوق الشاشة يتغيّر
بيحرّك مكان الصفحة عشان اللي انت شايفه يفضل مكانه. اللعبة هنا
بتغيّر ارتفاعات جوّه الشاشة مع كل رسالة من السيرفر، والنتيجة كانت
نطّة في نص الدور. إحنا بنمسك مكان الصفحة بنفسنا في render()، فلو
سبنا التثبيت شغّال يبقى اتنين بيشدّوا في الصفحة في وقت واحد. */
overflow-anchor:none;
-webkit-font-smoothing:antialiased;
}
.app{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-top)) 14px calc(30px + env(safe-area-inset-bottom))}
h1,h2,h3,.display{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;letter-spacing:.5px;margin:0}
button{font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}
/* شريط الرايات (بانر خيامية) */
.bunting{height:26px;margin:0 -14px 10px;position:relative;
background:
linear-gradient(135deg,transparent 50%,var(--coral) 50%) 0 0/26px 26px repeat-x,
linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;
filter:drop-shadow(0 3px 0 #0007);
}
.bunting.teal{background:
linear-gradient(135deg,transparent 50%,var(--teal) 50%) 0 0/26px 26px repeat-x,
linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;}
/* ============ عناصر عامة ============ */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);
padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.tight{padding:12px}
.center{text-align:center}
.muted{color:var(--ink-dim);font-size:.92em}
.small{font-size:.85em}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.hidden{display:none !important}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:none;border-radius:var(--r);cursor:pointer;user-select:none;
background:var(--surface2);color:var(--ink);
padding:13px 18px;font-size:17px;font-weight:700;
box-shadow:0 5px 0 #000a;transition:transform .06s,box-shadow .06s,filter .15s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#161006;box-shadow:0 6px 0 #7a4d00}
.btn.primary:active{box-shadow:0 1px 0 #7a4d00}
.btn.coral{background:linear-gradient(180deg,#ff8571,var(--coral));color:#2b0c07;box-shadow:0 6px 0 #8a2417}
.btn.coral:active{box-shadow:0 1px 0 #8a2417}
.btn.teal{background:linear-gradient(180deg,#4fe0cb,var(--teal));color:#04231e;box-shadow:0 6px 0 #0d5a50}
.btn.teal:active{box-shadow:0 1px 0 #0d5a50}
.btn.ghost{background:transparent;border:2px dashed var(--line);box-shadow:none}
.btn.big{width:100%;padding:16px;font-size:20px;border-radius:var(--r-lg)}
.btn.sm{padding:8px 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 #000a}
.btn.sm:active{box-shadow:0 1px 0 #000a}
.field{width:100%;background:var(--bg2);border:2px solid var(--line);color:var(--ink);
border-radius:var(--r);padding:13px 14px;outline:none}
.field:focus{border-color:var(--brass)}
textarea.field{resize:vertical;min-height:74px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
.chip.on{border-color:var(--brass);background:#243318;color:var(--brass-hi)}
.chip.click{cursor:pointer}
.chip .x{opacity:.7}
.toasts{position:fixed;bottom:14px;left:0;right:0;display:flex;flex-direction:column;
align-items:center;gap:8px;z-index:99;pointer-events:none;padding:0 14px}
.toast{background:#000d;border:2px solid var(--line);color:var(--ink);border-radius:14px;
padding:10px 16px;font-weight:700;max-width:480px;animation:pop .18s ease;box-shadow:0 4px 0 #000}
.toast.err{border-color:var(--coral)}
.toast.ok{border-color:var(--teal)}
@keyframes pop{from{transform:translateY(10px) scale(.95);opacity:0}}
.net-banner{position:fixed;top:0;left:0;right:0;z-index:130;text-align:center;
background:var(--coral);color:#2b0c07;font-weight:800;padding:calc(8px + var(--safe-top)) 8px 8px;box-shadow:0 4px 0 #0008}
/* ============ الهيدر ============ */
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.top img{width:52px;height:52px;filter:drop-shadow(0 3px 0 #0008)}
.top .title{font-size:34px;line-height:1;color:var(--brass-hi);text-shadow:0 3px 0 #000a}
.top .sub{color:var(--ink-dim);font-size:13px;margin-top:2px}
/* ============ الهوم ============ */
.avatar-pick{display:flex;align-items:center;gap:10px}
.avatar-big{font-size:44px;width:72px;height:72px;display:grid;place-items:center;
background:var(--bg2);border:2px solid var(--line);border-radius:20px;cursor:pointer;
box-shadow:0 4px 0 #000a;transition:transform .08s}
.avatar-big:active{transform:scale(.92)}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-dim);margin:14px 0}
.or::before,.or::after{content:'';flex:1;height:2px;background:var(--line);border-radius:2px}
.code-input{letter-spacing:10px;text-align:center;font-size:26px;font-weight:800;direction:ltr}
/* ============ شاشة البداية (الإعدادات) ============ */
.stepper{display:flex;align-items:center;gap:12px;justify-content:center}
.stepper .val{font-family:'Lalezar';font-size:34px;min-width:56px;text-align:center;color:var(--brass-hi)}
.stepper button{width:46px;height:46px;border-radius:14px;font-size:24px}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-chip{display:flex;align-items:center;gap:8px;background:var(--bg2);border:2px solid var(--line);
border-radius:14px;padding:10px;cursor:pointer;font-weight:800;font-size:14px;transition:transform .06s}
.cat-chip:active{transform:scale(.97)}
.cat-chip.on{border-color:var(--teal);background:#0d2b28;color:#8ff0e2}
.cat-chip.locked{opacity:.55;pointer-events:none}
.cat-chip .ic{font-size:20px}
.count-note{text-align:center;font-weight:800;color:var(--ink-dim)}
.count-note b{color:var(--brass-hi)}
/* ============ النتائج ============ */
.award{display:flex;align-items:center;gap:12px;background:var(--bg2);border:2px solid var(--line);
border-radius:16px;padding:10px 14px;margin-bottom:8px;animation:pop .25s ease}
.award .aic{font-size:30px}
.award .at{font-weight:900}
.award .ad{font-size:13px;color:var(--ink-dim)}
/* كونفيتي */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;
animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important}
}
/* ===== شريط علوي أنضف + لوجو صورة ===== */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;filter:none;opacity:.95;
background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral))}
/* اللوجو طولي، فبيتقاس بالعرض: الراجل بيطلع بنفس حجم شخصيات باقي
الألعاب بدل ما يتصغّر عشان يدخل في مربّع. */
.top img{width:46px;height:auto;object-fit:contain;transform:translateY(-10px);filter:drop-shadow(0 3px 6px #0008)}
/* ===== زرار الخروج الثابت ===== */
.leave-fab{position:fixed;bottom:14px;inset-inline-start:14px;z-index:120;width:52px;height:52px;border-radius:50%;
border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer;
box-shadow:0 6px 0 #000a;transition:transform .07s}
.leave-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.ui-modal-ov{position:fixed;inset:0;z-index:300;background:#000b;display:flex;align-items:center;justify-content:center;
padding:20px;opacity:0;transition:opacity .16s;backdrop-filter:blur(3px)}
.ui-modal-ov.show{opacity:1}
.ui-modal{background:linear-gradient(180deg,var(--surface),#12203a);border:2px solid var(--line);border-radius:24px;
width:100%;max-width:400px;padding:24px 22px;box-shadow:0 20px 50px #000c;text-align:center;
transform:translateY(14px) scale(.97);transition:transform .18s}
.ui-modal-ov.show .ui-modal{transform:none}
.ui-modal-emoji{font-size:46px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px #0007)}
.ui-modal-title{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;margin:0 0 8px;color:var(--brass-hi)}
.ui-modal-body{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:18px}
.ui-modal-actions{display:flex;gap:10px}
.ui-modal-actions .btn{flex:1;margin:0}
/* ===== شاشة التعليمات (هيلب) الجديدة ===== */
.help-ov{position:fixed;inset:0;z-index:260;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.help-card{background:linear-gradient(180deg,#182741,#101d33);border:2px solid var(--line);border-radius:26px;
width:100%;max-width:540px;max-height:92vh;overflow:auto;box-shadow:0 22px 55px #000d}
.help-hero{position:sticky;top:0;background:linear-gradient(180deg,#1d2f4f,#182741);padding:20px 22px 16px;border-bottom:2px solid var(--line);text-align:center;z-index:2}
.help-hero img{width:89px;height:auto;filter:drop-shadow(0 8px 16px #0009)}
.help-hero h2{font-family:'Lalezar','Tajawal',sans-serif;font-size:30px;margin:6px 0 2px}
.help-hero .sub{color:var(--dim);font-size:14px;font-weight:700}
.help-body{padding:8px 20px 4px}
.help-step{display:flex;gap:14px;padding:14px 4px;border-bottom:1px dashed #ffffff12}
.help-step:last-child{border-bottom:none}
.help-num{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;
background:#0c1424;border:2px solid var(--line);box-shadow:inset 0 1px 0 #ffffff10}
.help-step h4{margin:0 0 3px;font-size:16.5px;font-weight:900}
.help-step p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.help-step .hl{color:var(--brass-hi);font-weight:800}
.help-step .warn{color:var(--coral);font-weight:800}
.help-foot{position:sticky;bottom:0;background:linear-gradient(0deg,#101d33,#101d33ee);padding:14px 20px 18px;border-top:2px solid var(--line)}
.help-chk{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;cursor:pointer;justify-content:center;margin-bottom:10px}
.help-chk input{width:17px;height:17px}
/* احترام منطقة النوتش/شريط الحالة في المتصفح كمان */
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}
/* خلفية صلبة ورا شريط إشعارات الموبايل — عشان محتوى اللعبة ما يظهرش تحته */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--safe-top);
background:var(--bg2,#0B1322);z-index:120;pointer-events:none}
/* الشاشات اللي بتغطي كل الموبايل — تحترم شريط الإشعارات هي كمان */
/* مسافة أزرار النظام تحت (شريط التنقّل أو شريط الإيماءات).
env(safe-area-inset-bottom) بيرجّع القيمة الحقيقية من الجهاز نفسه: صفر على
الموبايلات اللي مالهاش أزرار تحت، و24-48 بكسل على اللي ليها. يعني الحل
بيظبط نفسه على أي جهاز من غير ما نكتب أرقام ولا نتعرّف على موديل بعينه.
من غير السطر ده زرار «تمام يلا نلعب» كان بيقع تحت أزرار النظام. */
.ui-modal-ov,.help-ov{padding-top:calc(16px + var(--safe-top)) !important;
padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}
/* مفتاح ظبط المسافة فوق (جوه شيت المساعدة) */
.safe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 2px 2px;font-size:13px;color:var(--ink-dim,#B9C3D8)}
.safe-ctl{display:flex;align-items:center;gap:8px}
.safe-ctl button{width:30px;height:30px;border-radius:10px;font-size:18px;font-weight:900;line-height:1;
background:#0d1830;border:1px solid var(--line);color:inherit;cursor:pointer}
.safe-ctl button:active{filter:brightness(1.3)}
.safe-ctl b{min-width:34px;text-align:center;font-size:14px;color:var(--brass-hi,#FFB93E)}
.safe-hint{font-size:11px;color:var(--muted,#8fa0bd);line-height:1.5;padding:0 2px 6px;text-align:center}
/* أيقونات الباب */
.ico-door{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;stroke:currentColor}
.leave-fab .ico-door{width:22px;height:22px;vertical-align:-4px}
.ui-modal .ui-emoji .ico-door{width:38px;height:38px}
/* ══════════════════════════════════════════════════════════════════════
عناصر مشتركة مع باقي ألعاب «العب مع صاحبك» (الوقت واللقطة والنتايج)
══════════════════════════════════════════════════════════════════════ */
.help-ov,.ui-modal-ov,.hz-ov{overscroll-behavior:contain}
/* ══════════════════════════════════════════════════════════════════════
خبّي فلوسك — العناصر الخاصة بيها
══════════════════════════════════════════════════════════════════════ */
/* شريط الوقت — بيقيس وقت الدور (أو وقت الرد على سؤال).
blink بتشتغل لما الوقت يقرب يخلص. */
.timer{height:12px;background:var(--bg2);border:2px solid var(--line);border-radius:999px;
overflow:hidden;margin-bottom:12px}
.timer .fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral));
border-radius:999px;transition:width .2s linear}
.timer.low .fill{animation:blink .6s infinite}
@keyframes blink{50%{opacity:.35}}
/* ═══ الرقم ═══
الأرقام هي بطل اللعبة، فليها خط وحجم ولون لوحدها في كل شاشة —
العين لازم تلاقيها من غير ما تقرا اللي حواليها. */
.word-big{font-family:'Lalezar','Tajawal',sans-serif;font-size:34px;line-height:1.15;
color:var(--gold);text-shadow:0 3px 0 #0009;word-break:break-word}
.word-big.locked{color:var(--gold);letter-spacing:.5px}
.word-reveal{font-family:'Lalezar','Tajawal',sans-serif;font-size:38px;line-height:1.15;
color:var(--gold);text-align:center;margin:6px 0;text-shadow:0 3px 0 #0009;
animation:wordPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes wordPop{from{transform:scale(.6);opacity:0}}
/* ═══ اختيار المدى ═══
صف أزرار صغيرة، كل واحد فيه المدى بس. من غير أيقونات ولا عدد
احتمالات — الأربع مديات نفس الصعوبة تقريبًا، فمفيش حاجة تتشرح. */
.cat-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:10px 0 4px}
.catc{background:var(--bg2);border:2px solid var(--line);border-radius:12px;
padding:7px 11px;color:var(--ink);font-family:'Tajawal',sans-serif;
font-weight:800;line-height:1.2;cursor:pointer;text-align:center;
box-shadow:0 3px 0 #0009;transition:transform .07s,box-shadow .07s,border-color .12s}
.catc:active{transform:translateY(3px);box-shadow:0 0 0 #0009}
.catc.on{background:var(--tint);border-color:var(--brass);color:var(--brass-hi);box-shadow:0 3px 0 var(--acc-sh)}
/* حدود الرينج: الصغير يمين والكبير شمال والسهم بينهم — الاتجاه
متحدد بالـflex مش سايبينه للـbidi يقرره. */
/* جملة الوحدة تحت الحدود — بتقول تكتب بإيه من غير ما تشرح */
.ch{display:block;font-size:10.5px;font-weight:700;color:var(--ink-dim);margin-top:3px;opacity:.85}
.catc.on .ch,.chip.on .ch{color:var(--brass-hi)}
.pick-q{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;font-size:24px;
line-height:1.3;color:var(--ink)}
/* الفئات في اللوبي */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.cat-chips .chip{font-size:12.5px;padding:5px 10px}
.cat-chips .cat-chip{flex-direction:column;gap:1px;align-items:center}
.cat-chips .cat-chip .ch{font-size:9.5px;margin-top:1px}
/* ═══ مربعات الرقم ═══
المربعات الرمادية (أصفار الخطوة) مقفولة وفيها صفر، فمستحيل تكتب
رقم مش على الخطوة. وعدد المربعات لوحده بيقولك حجم الفلوس: 4 مربعات
يبقى ميّات، و9 يبقى ملايين — من غير أي كلام مكتوب. */
.digits{display:flex;gap:5px;justify-content:center;align-items:center;margin:12px 0 6px;
flex-wrap:nowrap;direction:ltr}
/* خانة الإدخال شفافة وفوق المربعات كلها — الكتابة بتترصّ من ناحية
اليمين لوحدها، وكيبورد الأرقام بيطلع عادي على الموبايل. */
/* input وspan في نفس الكلاس، فالتوسيط بـline-height مش بـgrid —
الـgrid على input بيتلغي في متصفحات كتير. */
/* الخانات المقفولة — رمادية وباهتة عشان تبان إنها مش مكان كتابة */
/* ═══ كارت الكلمة في شاشة اللعب ═══
كلمتك انت على الشمال (عشان ترد بصدق) وتقدّم صاحبك على اليمين. */
.word-card{padding:12px 14px;background:linear-gradient(180deg,var(--bg2),var(--surface));
border-color:var(--line)}
.mc-row{display:flex;gap:12px;align-items:stretch}
.mc-side{flex:1;min-width:0}
.mc-side.foe{border-inline-start:2px dashed var(--line);padding-inline-start:12px;text-align:center}
.mc-lbl{font-size:12px;color:var(--ink-dim);font-weight:800;margin-bottom:3px}
.mc-side .word-big{font-size:26px}
.dots{display:flex;gap:5px;justify-content:center}
.dots .dot{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
background:var(--bg2);border:2px solid var(--line);font-size:13px;font-weight:900;color:var(--ink-dim)}
.dots .dot.miss{border-color:var(--bad);color:#ff9aa0;background:#3a1218}
.dots .dot.hit{border-color:var(--ok);color:#8ff0b8;background:#123a26}
/* «محاولاته: ▫▫▫» فوق و«محاولاتك: ▫▫▫ · فاضلك كذا دور» تحت.
بتاعة الخصم أصغر شوية — مكانها ضيّق وقبلها كلمة. */
.tries{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.tries .tl{font-size:12px;font-weight:800;color:var(--ink-dim)}
.tries .sep{color:var(--ink-dim);opacity:.6}
.tries .tn{font-size:12.5px;font-weight:800;color:var(--ink-dim)}
.tries.me{margin-top:10px;padding-top:9px;border-top:2px dashed var(--line)}
.tries.me .tl,.tries.me .tn{font-size:13px}
.tries.me .dots .dot{width:28px;height:28px;font-size:15px;border-radius:9px}
.mc-side.foe .tries .dots .dot{width:21px;height:21px;font-size:11px;border-radius:7px}
.mc-side.foe .tries .tl{font-size:11px}
.foe-tn{text-align:center;font-size:11px;font-weight:800;color:var(--ink-dim);margin-top:4px}
/* ═══ السجل ═══
بيتزوّد من تحت وبيفضل مسكّر على ارتفاع ثابت — لو سبناه يطول، زرار
الدور بينزل تحت الشاشة واللاعب بيدوّر عليه بالسكرول كل دور. */
.log-card{padding:10px 12px}
.log-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
/* overscroll-behavior مهمة: من غيرها لما السجل يوصل لآخره السكرول
بيتسحب للصفحة نفسها (scroll chaining) وينزّل اللاعب لتحت.
وscroll-behavior:smooth اتشالت — الحركة الناعمة جوّه عنصر مسكّر هي
اللي كانت بتسحب الصفحة على موبايلات كتير مع كل سؤال. */
.log{max-height:240px;overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;gap:7px;padding-inline-end:2px}
.log.flat{max-height:none;overflow:visible}
.log-empty{text-align:center;padding:14px 0}
.log-empty.hidden{display:none}
.lg{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:8px 11px}
.lg.me{border-color:var(--brass);background:var(--tint)}
.lg-top{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-dim)}
.lg-top b{color:var(--ink)}
.lg-av{font-size:16px}
.lg-txt{font-size:15px;font-weight:700;margin-top:3px;line-height:1.55;word-break:break-word}
.lg-txt.word{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;color:var(--gold)}
.lg-ans{margin-top:5px}
.lg-a{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:900}
.lg-a.yes{background:#123a26;color:#8ff0b8}
.lg-a.no{background:#3a1218;color:#ff9aa0}
.lg-a.maybe{background:#2f2a12;color:#f0d78a}
.lg-wait{font-size:12.5px;color:var(--ink-dim);font-weight:800}
.lg.g.hit{border-color:var(--ok)}
.lg.g.miss{border-color:#5a2a30}
/* ═══ صندوق الدور ═══ */
.turn-card{padding:12px 14px}
.turn-lbl{text-align:center;font-weight:900;font-size:16px;color:var(--brass-hi);margin-bottom:10px}
.wait-turn{text-align:center;font-weight:900;font-size:16px;color:var(--ink-dim);padding:10px 0}
.two-box{display:flex;flex-direction:column;gap:12px}
.tb{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.tb-h{font-weight:900;font-size:14px;margin-bottom:7px}
.tb .cat-row{margin:6px 0 2px;gap:5px}
.tb .catc{font-size:11.5px;padding:6px 9px}
.tb .digits{margin:8px 0 4px;gap:4px}
.q-field{resize:none;font-family:'Tajawal',sans-serif;font-size:15px;line-height:1.6;margin-bottom:8px}
/* الفرصة الأخيرة — صاحبك عرف رقمك ومعاك تخمينة واحدة */
.last-lbl{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;font-size:24px;
color:var(--coral-hi);line-height:1.25}
.last-sub{text-align:center;font-size:14px;color:var(--ink-dim);margin:4px 0 6px}
.last-sub b{color:var(--gold)}
/* ═══ لوحتك قفلت — خلصت تخميناتك أو أدوارك ═══
لازم تبان مختلفة عن «دور صاحبك — اتفرّج» بوضوح، عشان اللاعب يفهم
إنه خلاص خرج من الجولة مش مستني دوره. الإيموچي بيتهزّ مرة واحدة
والتلات نقط بتنبض — الحركة هي اللي بتقول «إحنا مستنيين»، مش هنجان. */
.over-box{text-align:center;padding:6px 0 2px;animation:ovIn .3s ease-out}
@keyframes ovIn{from{opacity:0;transform:translateY(8px)}}
.over-box .ov-emo{font-size:46px;line-height:1;margin-bottom:4px;
animation:ovShake .55s cubic-bezier(.36,.07,.19,.97) 1}
.over-box.won .ov-emo{animation:ovPop .6s cubic-bezier(.3,.8,.4,1) 1}
@keyframes ovShake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(5px)}
30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
@keyframes ovPop{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.over-box .ov-t{font-family:'Lalezar','Tajawal',sans-serif;font-size:24px;line-height:1.25;color:var(--coral-hi)}
.over-box.won .ov-t{color:var(--ok)}
.over-box .ov-s{font-size:14px;color:var(--ink-dim);margin-top:2px}
.over-box .ov-wait{font-size:14px;font-weight:800;margin-top:10px;color:var(--ink)}
.over-box .ov-wait b{color:var(--gold)}
.over-box .ov-note{font-size:12px;color:var(--ink-dim);margin-top:8px;
background:var(--bg2);border:2px dashed var(--line);border-radius:12px;padding:6px 10px;display:inline-block}
.ov-dots{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle}
.ov-dots i{width:5px;height:5px;border-radius:50%;background:var(--brass-hi);
animation:ovDot 1.1s ease-in-out infinite}
.ov-dots i:nth-child(2){animation-delay:.16s}
.ov-dots i:nth-child(3){animation-delay:.32s}
@keyframes ovDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){
.over-box,.over-box .ov-emo,.ov-dots i{animation:none}
}
/* ═══ الرد على السؤال ═══
السؤال بيتكتب كبير في النص — ده أهم كلام على الشاشة في اللحظة دي. */
.ask-in{text-align:center}
.q-big{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;line-height:1.45;
text-align:center;color:var(--ink);background:var(--bg2);border:2px dashed var(--line);
border-radius:16px;padding:14px 12px;margin:8px 0 12px;word-break:break-word}
.ans-row{display:flex;gap:8px}
.ans-row .btn{flex:1;padding:14px 6px;font-size:15px}
.ans-row .ok-b{background:linear-gradient(180deg,#4ade9c,#22a86a);color:#04200F;box-shadow:0 5px 0 #0b5c30}
.ans-row .no-b{background:linear-gradient(180deg,#f98f96,#e0505c);color:#2E0710;box-shadow:0 5px 0 #8a2138}
.ans-row .mb-b{background:linear-gradient(180deg,#f2c14e,#c9962b);color:#2A1D02;box-shadow:0 5px 0 #7a5a10}
.ans-row .btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0009}
/* ═══ شاشة التخبية ═══ */
.pick-head{text-align:center;font-size:14px;color:var(--ink-dim);line-height:1.8}
.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;justify-content:center}
.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}
.rv-guesses{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.gtag{border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:900;
background:#3a1218;color:#ff9aa0;border:1px solid #5a2a30}
.gtag.hit{background:#123a26;color:#8ff0b8;border-color:#1d6b45}
.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:#2f2a12;color:#f0d78a}
.rv-pts .pt.pen{background:#3a1218;color:#ff9aa0}
.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(--gold);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;color:var(--gold)}
/* ═══ الشاشات الضيقة ═══ */
@media (max-width:430px){
.word-big{font-size:29px}
.mc-side .word-big{font-size:22px}
.word-reveal{font-size:31px}
.catc{font-size:12px;padding:7px 10px}
.pick-q{font-size:21px}
.q-big{font-size:19px}
.ans-row .btn{font-size:13.5px;padding:13px 4px}
.log{max-height:200px}
}
@media (max-width:360px){
.word-big{font-size:25px}
.mc-side .word-big{font-size:19px}
.word-reveal{font-size:27px}
.catc{font-size:11px;padding:6px 8px}
.pick-q{font-size:19px}
.digits{gap:4px}
.ans-row{gap:6px}
.ans-row .btn{font-size:12.5px;padding:12px 3px}
}
/* ═══════════════ لقطة آخر الجولة ═══════════════
وقفة قصيرة بعد ما الجولة تقفل وقبل ما النتيجة تظهر — عشان لحظة
«عرفتها / مقدرتش» تاخد حقها بدل ما تعدّي في رمشة عين. */
.outro{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;text-align:center;padding:0 18px;
background:radial-gradient(600px 380px at 50% 45%,#3A2C12F2 0%,#0D0A04FA 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(-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(--brass-hi)}
.outro.lose .ou-txt{color:var(--coral-hi)}
.outro .ou-sub{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;color:var(--gold);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){
.outro .ou-emo{font-size:70px}
.outro .ou-txt{font-size:30px}
.outro .ou-sub{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
.outro .ou-emo,.outro .ou-txt,.outro .ou-sub,.word-reveal{animation-duration:.01ms}
}
/* ═══════════════ عناصر خاصة بالتحقيق ═══════════════
اللعبة دي بتتعامل مع **كلمات** مش أرقام، فمربعات الأرقام اللي في
«خبّي فلوسك» اتشالت وبقى مكانها خانة كتابة عادية. */
/* زرار الكاتيجوري: الأيقونة فوق والاسم تحتها */
.catc .ci{display:block;font-size:20px;line-height:1.1}
.catc .ch{display:block;font-size:11px;margin-top:2px}
/* كاتيجوري الجولة لما الاتنين مشتركين فيه — معلن وواضح */
.round-cat{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;
color:var(--brass-hi);background:var(--tint);border:2px solid var(--brass);
border-radius:14px;padding:8px 12px;margin:8px 0 6px}
/* خانة الكلمة المسحوبة/المكتوبة في شاشة الاختيار */
.word-slot{margin:10px 0 4px;min-height:44px}
.word-slot .word-big{margin-bottom:2px}
/* خانة التخمين — نفس شكل خانة السؤال عشان اللاعب يتعلّم شكل واحد */
.g-field{font-size:17px;text-align:center;font-weight:700;margin-bottom:8px}
/* ═══ «عدّيهاله» ═══
صندوق صغير جوّه كارت الكلمة، بيظهر لصاحب الكلمة بس ولما يكون فيه
تخمينة غلط. آخر تخمينة بس — واحدة في المرة. */
.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}
/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
ثيم «خليك لمَّاح — نعناعي»
الألوان دي مأخوذة حرفيًا من كارت اللعبة في الصفحة الرئيسية، عشان اللي
يدوس على الكارت يلاقي نفس الهوية جوّه اللعبة: نفس لون الاسم، ونفس لون
الكروت والإطارات. الخلفية بتفضل غامقة ثابتة، واللون بيبان في العناصر.
القاعدة اللي فوق ماتلمسهاش — كل التظبيط بيتعمل من هنا بالتوريث.
══════════════════════════════════════════════════════════════════════ */
:root{
--bg:#0B1A18; --bg2:#101f21; --surface:#16302f; --surface2:#1D3E3B; --line:#245853;
--brass:#1FAE86; --brass-hi:#35CFA4; /* الأساسي = لون اسم اللعبة في الهوم */
--teal:#38BDF8; --teal-hi:#7DD3FC; /* اللون التاني (الأزرار المساعدة) */
--coral:#FB7185; --coral-hi:#FDA4B4;
--on-acc:#04231C; --acc-sh:#0C6349; /* خط وظل الزرار الأساسي */
--on-two:#04202E; --two-sh:#0B5273;
--on-coral:#2E0710; --coral-sh:#8A2138;
--tint:#0F3730; --tint-ink:#A7F3D0; /* خلفية العناصر المفعّلة */
--ring:#35CFA433; /* هالة التركيز */
--ink-dim:#A9C4BE; --dim:#A9C4BE; --muted:#A9C4BE;
}
/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
radial-gradient(1200px 500px at 50% -150px,#17403A 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,#1FAE86,#35CFA4,#38BDF8)}
/* الأزرار */
.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:42px;height:42px}
.top .title{font-size:26px}
.top .btn.sm{width:36px;height:36px;font-size:15px;border-radius:11px}
.top #hz-settings-btn .hz-gear{width:18px;height:18px}
.top #games-btn .ico-games,.top #home-btn .ico-home{width:17px;height:17px}
}
@media (max-width:360px){
.top{gap:6px}
.top img{width:38px;height:38px}
.top .title{font-size:23px}
.top .sub{font-size:11.5px}
.top .btn.sm{width:33px;height:33px;font-size:14px;border-radius:10px}
.top #hz-settings-btn .hz-gear{width:16px;height:16px}
.top #games-btn .ico-games,.top #home-btn .ico-home{width:16px;height:16px}
}
/* الحقول */
.field:focus{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--ring)}
/* الشيبس والكاتيجوريز */
.chip.on,.cat-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}
/* المنصة (أول تلاتة) — الذهب بيمشي مع ثيم اللعبة، والفضة والبرونز زي ما هما */
.pod.p1 .bar{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--on-acc)}
/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#0C1F1D)}
.ui-modal-title{color:var(--brass-hi)}
/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#0C1F1D)}
.help-hero{background:linear-gradient(180deg,#17403A,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#0C1F1D,#0C1F1Dee);border-top-color:var(--line)}
.help-num{background:#081615;border-color:var(--line)}
.help-step .hl{color:var(--brass-hi)}
/* حتت متفرقة كانت بلون متثبّت */
.bank-card{border-color:var(--brass-hi);background:var(--tint)}
.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)}
/* --- خليك لمَّاح --- */
.secret-box{background:linear-gradient(135deg,var(--tint),var(--surface2));border:3px solid var(--brass-hi)}
.secret-box .lbl{color:var(--tint-ink);opacity:.85}
.secret-box .word{color:var(--brass-hi)}
.cluer-hero .big{filter:drop-shadow(0 4px 10px var(--ring))}
.big-timer{color:var(--brass-hi)}
/* بلوك «عن اللعبة» تحت اللعبة — مخفي لحد ما اللعبة ترسم.
لازم هنا مش في 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}
/* الذهبي اللي بتستعمله عناصر منقولة من ألعاب تانية — هنا هو لون اللعبة نفسه */
:root{ --gold:var(--brass-hi) }
/* ══════════════════════════════════════════════════════════════════════
لمّحها للاتنين — الحلبة والسلّم
الشاشة كلها مبنية على فكرة واحدة: **سباق**. فوق النقط جنب بعض،
وفي النص التلميحة، وتحتها انت وصاحبك وجهًا لوجه — واللي بيحصل عند
التاني بيبان لحظة بلحظة (بيفكر / خمّن / عدّاها) من غير ما يتكشف
نص تخمينه، وإلا يبقى نسخ ولصق.
══════════════════════════════════════════════════════════════════════ */
/* ═══ اللوحة ═══
نُصّين وخط واحد بينهم. الخط مرسوم **ورا** كل حاجة (bd-line)، والتلميحة
بتعدّي فوقه بخلفية صلبة فبتقطعه — فبيبان كأنه سلّم: خط نازل، وكل
تلميحة درجة، وتحتها تخمين الاتنين على جنبين الخط.
قبل كده كانت حلبة منفصلة + كارت تاني للتلميحات اللي عدّت. */
.board{position:relative;padding:0;overflow:hidden}
.bd-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-inline-start:-1px;
background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);z-index:0}
/* رأس اللوحة = النقط. كل واحد في عموده، والرقم تحت الاسم — قبل كده
كانوا في سطر واحد فرقم اليمين كان لازق في اسم الشمال. */
.bd-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
background:linear-gradient(180deg,var(--surface2),var(--surface));border-bottom:2px solid var(--line)}
.bd-p{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-av{font-size:21px;line-height:1}
.bd-nm{font-size:12.5px;font-weight:700;color:var(--ink-dim);max-width:100%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-p.me .bd-nm{color:var(--brass-hi)}
.bd-sc{font-family:'Lalezar','Tajawal',sans-serif;font-size:24px;line-height:1.05}
.bd-p.me .bd-sc{color:var(--brass-hi)}
.bd-p.foe .bd-sc{color:var(--teal-hi,var(--teal))}
.bd-sc.bump{animation:ptBump .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ptBump{0%{transform:scale(1)}35%{transform:scale(1.5);filter:brightness(1.5)}100%{transform:scale(1)}}
.bd-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
font-family:'Lalezar','Tajawal',sans-serif;font-size:12.5px;letter-spacing:.5px;
background:var(--bg2);border:2px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink-dim)}
/* درجة السلّم: رقم التلميحة + نصها، بعرض اللوحة كلها */
.bd-hint{position:relative;z-index:1;display:flex;align-items:center;gap:8px;
padding:7px 10px;background:var(--bg2);border-bottom:1px solid var(--line)}
.bd-n{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
background:var(--surface2);border:1.5px solid var(--line);font-size:11.5px;font-weight:800;color:var(--ink-dim)}
.bd-tx{flex:1;min-width:0;font-size:14.5px;line-height:1.35;word-break:break-word}
.bd-pt{flex:none;font-family:'Lalezar','Tajawal',sans-serif;font-size:14px;color:var(--tint-ink);
background:var(--tint);border:1.5px solid var(--brass-hi);border-radius:999px;padding:0 8px}
/* التلميحة الشغّالة — أكبر شوية وبهالة، وهي الوحيدة اللي بتتقلب */
.bd-hint.cur{padding:12px 10px;background:linear-gradient(180deg,var(--surface),var(--bg2));border-bottom:none}
.bd-hint.cur .bd-n{width:26px;height:26px;font-size:13.5px;color:var(--brass-hi);border-color:var(--brass-hi)}
.bd-hint.cur .bd-tx{font-family:'Lalezar','Tajawal',sans-serif;font-size:23px;line-height:1.3;
color:var(--brass-hi);text-shadow:0 2px 0 #0005}
.bd-tx.flip{display:inline-block;animation:hintFlip .5s cubic-bezier(.2,1.1,.35,1)}
@keyframes hintFlip{
0%{opacity:0;transform:rotateX(-85deg) translateY(-6px);filter:blur(2px)}
60%{opacity:1;transform:rotateX(7deg)}
100%{opacity:1;transform:none;filter:none}}
.bd-sub{position:relative;z-index:1;text-align:center;font-size:11.5px;color:var(--ink-dim);
padding:0 8px 7px;background:var(--bg2);border-bottom:1px solid var(--line)}
.bd-sub b{color:var(--brass-hi)}
.board .timer{position:relative;z-index:1;height:7px;border-width:0 0 1px 0;border-radius:0;margin:0}
/* صف التخمينات: خانتين على جنبين الخط */
.bd-row{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.bd-row:last-child{border-bottom:none}
.bd-cell{padding:6px 8px;font-size:12.5px;text-align:center;min-width:0;
word-break:break-word;line-height:1.4;background:color-mix(in srgb,var(--surface) 70%,transparent)}
/* الغلط أحمر والصح أخضر — دي أهم إشارتين في الكشف، فبتبان من نظرة */
.bd-cell.miss{color:#ffd2d2;background:color-mix(in srgb,#7a2020 34%,transparent);
box-shadow:inset 0 0 0 1px #a2434366}
.bd-cell.hit{color:#c9ffe6;background:color-mix(in srgb,#0f7a52 42%,transparent);
box-shadow:inset 0 0 0 1px #2ec27e88;font-weight:800}
.bd-cell.pass,.bd-cell.none,.bd-cell.think{color:var(--ink-dim);opacity:.85}
.bd-cell.sent{color:var(--tint-ink)}
.bd-row.live .bd-cell{background:color-mix(in srgb,var(--surface2) 75%,transparent);font-size:13.5px;padding:9px 8px}
.ar-dots{display:inline-flex;gap:2px;margin-inline-start:4px;vertical-align:1px}
.ar-dots i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;animation:arD 1.1s infinite}
.ar-dots i:nth-child(2){animation-delay:.18s}.ar-dots i:nth-child(3){animation-delay:.36s}
@keyframes arD{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
/* ═══ صندوق التخمين ═══ */
.turn-card .tb{display:flex;flex-direction:column;gap:8px}
.turn-card .tb .btn{margin:0}
.waitbox{text-align:center;padding:6px 4px}
.wb-emo{font-size:32px;line-height:1}
.wb-t{font-family:'Lalezar','Tajawal',sans-serif;font-size:18px;margin-top:4px}
.wb-s{margin-top:6px;font-size:13.5px;color:var(--ink-dim)}
/* ملحوظة ثابتة في اللوبي (التلميحات مش إعداد) + سلّم النقط بالأرقام */
.fixed-note{background:var(--bg2);border:1.5px dashed var(--line);border-radius:14px;
padding:10px 12px;text-align:center}
.fixed-note b{color:var(--brass-hi)}
.pt-scale{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.pts{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--surface);
border:1.5px solid var(--line);border-radius:12px;padding:4px 9px;min-width:62px}
.pts b{font-family:'Lalezar','Tajawal',sans-serif;font-size:17px;line-height:1;color:var(--brass-hi)}
.pts i{font-style:normal;font-size:10.5px;color:var(--ink-dim)}
.pts.dim b{color:var(--ink-dim)}
/* ═══ الكشف ═══ */
.rv-line{margin-top:8px;font-size:14.5px}
.rv-line .pt{background:var(--tint);color:var(--tint-ink);border-radius:999px;padding:2px 9px;font-weight:800}
.reveal-top .word-reveal{margin:8px 0 4px}
/* ═══ «احسبهالي صح» ═══ */
.credit-card{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.cb-ask{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;text-align:center}
.cb-ask .cb-lbl{margin:0}
.cb-ask .btn{margin:0}
.credit-card .cb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.credit-card .cb-row .btn{margin:0;margin-inline-start:auto}
.credit-card .cb-g{font-weight:800;background:var(--bg2);border:1.5px solid var(--line);
border-radius:999px;padding:3px 11px}
/* نافذة الحكم عند التاني */
.credit-ui .cu-cmp{display:flex;align-items:center;gap:8px;margin:4px 0 12px}
.cu-one{flex:1;background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;padding:8px 6px;text-align:center;min-width:0}
.cu-one b{display:block;font-size:16px;word-break:break-word}
.cu-one.ok{border-color:var(--ok);background:#0e3a2b}
.cu-lbl{display:block;font-size:11px;color:var(--ink-dim);margin-bottom:2px}
.cu-eq{font-size:12px;color:var(--ink-dim);flex:none}
.cu-note{margin-top:8px;text-align:center}
/* ═══ «عدّي الكلمة» ═══ كارت صغير تحت صندوق التخمين: يا زرار الطلب،
يا سطر إنك مستني موافقة صاحبك. */
.skip-wait{font-size:13px;color:var(--ink-dim);border-style:dashed}
#skip-box .btn.ghost{margin-top:8px;font-size:14px}
/* ═══ الشاشات الضيقة ═══ */
@media (max-width:360px){
.hint-big{font-size:26px}
.vs-nm{font-size:12px}
.tier-pill{font-size:11px}
}
/* ══════════════════════════════════════════════════════════════════════
«اتحدّى نفسك» — الإضافات المشتركة بين ألعاب اللاعب الواحد
(نفسها في أسئلة ومعلومات): شاشة البداية، كارت الرقم القياسي، اللقب
والرقم في النتيجة، ورأس اللوحة بعمود واحد.
══════════════════════════════════════════════════════════════════════ */
/* شريط رقم الجولة والكاتيجوري */
.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}
}