/* ===== مسافة شريط إشعارات الموبايل =====
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}}
/* التلات نقط اللي بتنبض — «بنكشف الإجابة...» في اللحظة اللي بين الدوسة
ورد السيرفر. الحركة هي اللي بتقول «إحنا شغّالين»، مش هنجان. */
.ov-dots{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle}
.ov-dots i{width:5px;height:5px;border-radius:50%;background:var(--brass-hi);
animation:ovDot 1.1s ease-in-out infinite}
.ov-dots i:nth-child(2){animation-delay:.16s}
.ov-dots i:nth-child(3){animation-delay:.32s}
@keyframes ovDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .ov-dots i{animation:none} }
/* أيقونة كارت الإحصائية — نفس كارت الجوايز في باقي الألعاب */
.award .aw-ic{font-size:30px}
/* الكاتيجوريز في شاشة البداية */
.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}
/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
ثيم «أسئلة ومعلومات — أزرق»
الألوان دي مأخوذة حرفيًا من كارت اللعبة في الصفحة الرئيسية، عشان اللي
يدوس على الكارت يلاقي نفس الهوية جوّه اللعبة: نفس لون الاسم، ونفس لون
الكروت والإطارات. الخلفية بتفضل غامقة ثابتة، واللون بيبان في العناصر.
القاعدة اللي فوق ماتلمسهاش — كل التظبيط بيتعمل من هنا بالتوريث.
══════════════════════════════════════════════════════════════════════ */
:root{
--bg:#0C1728; --bg2:#111d36; --surface:#182a4d; --surface2:#1F3459; --line:#2c4573;
--brass:#3B7BE0; --brass-hi:#5B9DFF; /* الأساسي = لون اسم اللعبة في الهوم */
--teal:#2FC6B0; --teal-hi:#5FE0CD; /* اللون التاني (الأزرار المساعدة) */
--coral:#FF6D5A; --coral-hi:#FF8571;
--on-acc:#05132B; --acc-sh:#1B4487; /* خط وظل الزرار الأساسي */
--on-two:#04231E; --two-sh:#0D5A50;
--on-coral:#2B0C07; --coral-sh:#8A2417;
--tint:#172E55; --tint-ink:#BFD9FF; /* خلفية العناصر المفعّلة */
--ring:#5B9DFF33; /* هالة التركيز */
--ink-dim:#AEBDD6; --dim:#AEBDD6; --muted:#AEBDD6;
}
/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
radial-gradient(1200px 500px at 50% -150px,#1C3560 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,#3B7BE0,#5B9DFF,#2FC6B0)}
/* الأزرار */
.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)}
/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#0E1B31)}
.ui-modal-title{color:var(--brass-hi)}
/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#0E1B31)}
.help-hero{background:linear-gradient(180deg,#1C3560,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#0E1B31,#0E1B31ee);border-top-color:var(--line)}
.help-num{background:#09131F;border-color:var(--line)}
.help-step .hl{color:var(--brass-hi)}
.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}
/* الذهبي اللي بتستعمله عناصر منقولة من ألعاب تانية — هنا هو لون اللعبة نفسه */
:root{ --gold:var(--brass-hi) }
/* ══════════════════════════════════════════════════════════════════════
أسئلة ومعلومات (اتحدّى نفسك) — شاشة السؤال
الشاشة كلها مبنية على فكرة واحدة: **الزرار اللي دوست عليه هو اللي
بيرد عليك**. مفيش شاشة نتيجة بتقلب على السؤال — نفس التلات اختيارات
بتفضل مكانها، الصح فيهم بيتلوّن أخضر واللي اتدوس غلط بيتلوّن أحمر.
وانت لوحدك الكشف بيحصل أول ما تدوس، فالإيقاع أسرع من نسخة اللاعبين —
عشان كده كل حاجة حركة قصيرة على نفس الشاشة، مش شاشة جديدة.
══════════════════════════════════════════════════════════════════════ */
/* شريط رقم السؤال والكاتيجوري والمستوى */
.round-badge{text-align:center;font-size:12.5px;color:var(--ink-dim);
background:var(--bg2);border:2px solid var(--line);border-radius:999px;
padding:6px 13px;margin:0 auto 12px;max-width:100%;width:max-content;line-height:1.5}
.round-badge b{color:var(--brass-hi);font-size:14.5px;font-family:'Lalezar','Tajawal',sans-serif}
/* ═══ اللوحة اللي فوق ═══
شريط واحد بتلات خانات: شكلك، ونقطك (مع السلسلة تحتها)، وكام صح
وكام غلط. مفيش عمود تاني ولا خط VS — انت لوحدك، واللي قصادك هو
رقمك انت. */
.board{position:relative;padding:0;overflow:hidden}
.bd-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.3fr 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;justify-content:center;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-av{font-size:26px;line-height:1}
.bd-nm{font-size:12px;font-weight:700;color:var(--ink-dim);max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-p.me .bd-nm{color:var(--brass-hi)}
.bd-sc{font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:1.05;color:var(--brass-hi)}
.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)}}
/* السلسلة — بتبان من تانية إجابة صح ورا بعض، وقبلها بتفضل فاضية بدل
ما تحجز مساحة برقم 1 مالوش أي معنى. */
.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:6px;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-p.score,.bd-p.tally{border-inline-start:1px solid var(--line)}
/* ═══ نقط السجل ═══
نقطة لكل سؤال عدّى — خضرا لو جبتها وحمرا لو لأ. ده اللي بيخلّي
اللاعب يعرف «أنا فين» من غير ما يستنى آخر اللعبة. */
.bd-dots{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.dt-col{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;
padding:7px 8px;min-height:26px;min-width:0}
.dt{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.dt.hit{background:var(--ok);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ok) 30%,transparent)}
.dt.miss{background:transparent;border:2px solid var(--bad);opacity:.75}
.dt-none{font-size:11px;color:var(--ink-dim)}
/* ═══ السؤال والاختيارات ═══ */
.qcard{padding:16px 14px}
.q-text{font-family:'Lalezar','Tajawal',sans-serif;font-size:23px;line-height:1.45;
text-align:center;word-break:break-word;margin-bottom:12px}
.qcard .timer{margin-bottom:12px}
/* الشريط الرفيع بتاع «بيعدّي لوحده». الإطار بينزّل من الطول
(box-sizing:border-box)، فلو سبناه 2px مايفضلش جوّاه غير شعرة. */
.timer.slim{height:8px;border-width:1px;margin:8px 0 0}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;
text-align:start;background:var(--surface2);color:var(--ink);
border:2px solid var(--line);border-radius:16px;padding:12px;
font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;
box-shadow:0 4px 0 #0007;
transition:transform .07s,box-shadow .07s,border-color .18s,background .18s,opacity .25s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #0007}
.opt:disabled{cursor:default}
/* اخترت خلاص → اللي مخترتهوش بيخفت. من غير كده التلاتة بيفضلوا بنفس
القوة واللاعب مش متأكد إن دوسته وصلت. (.dim مستثناة عشان الكشف
ليه تدرّجه هو) */
.opt:disabled:not(.mine):not(.right):not(.wrong):not(.dim){opacity:.55}
.opt-k{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
background:var(--bg2);border:1.5px solid var(--line);
font-family:'Lalezar','Tajawal',sans-serif;font-size:16px;color:var(--brass-hi)}
.opt-t{flex:1;min-width:0;word-break:break-word;line-height:1.4}
.opt-pk{flex:none;display:flex;gap:3px}
/* اخترتها — علامة فورية إن الدوسة وصلت، لحد ما الكشف ييجي من السيرفر
(جزء من الثانية) ويلوّنها صح أو غلط. */
.opt.mine{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}
.opt.mine .opt-k{border-color:var(--brass-hi);color:var(--brass-hi)}
/* بعد الكشف: الزراير بتبطّل تبان زراير — الظل بيروح فمحدش يحاول يدوس */
.opts.done .opt{box-shadow:none}
.opts.done .opt:active{transform:none}
.opt.right{border-color:var(--ok);color:#d8ffed;
background:linear-gradient(180deg,#12563c,#0e3f2c);animation:optRight .5s cubic-bezier(.2,1.3,.4,1)}
.opt.right .opt-k{background:var(--ok);border-color:var(--ok);color:#04210f}
.opt.wrong{border-color:var(--bad);color:#ffdcdc;
background:linear-gradient(180deg,#5a1f22,#3d1518);animation:optWrong .45s}
.opt.wrong .opt-k{border-color:var(--bad);color:#ffb3b3}
.opt.dim{opacity:.38}
@keyframes optRight{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes optWrong{10%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-3px)}}
/* شكلك بينطّ على الاختيار اللي دوست عليه */
.pk-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;
background:var(--bg2);border:2px solid var(--line);
animation:pkIn .42s cubic-bezier(.2,1.5,.4,1) both}
.pk-av.ok{border-color:var(--ok)}
.pk-av.no{border-color:var(--bad)}
.pk-av:nth-child(2){animation-delay:.1s}
@keyframes pkIn{from{opacity:0;transform:scale(.3) translateY(-10px)}}
/* سطر الحالة تحت الاختيارات — «اختار إجابة» / «بنكشف» */
.q-status{text-align:center;font-size:13.5px;color:var(--ink-dim);margin-top:12px;line-height:1.7}
.q-status .hot{color:var(--brass-hi)}
.q-status.waiting{color:var(--tint-ink)}
/* ═══ شريط النتيجة ═══ الإجابة الصح، وتحتها انت اخترت إيه وخدت كام */
.q-res{margin-top:13px;padding-top:11px;border-top:2px dashed var(--line);
animation:resIn .42s .1s both}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}}
.qr-ans{text-align:center;margin-bottom:9px}
.qr-ans .qr-lbl{display:block;font-size:11.5px;color:var(--ink-dim)}
.qr-ans b{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;line-height:1.3;color:var(--ok);word-break:break-word}
.qr-rows{display:flex;flex-direction:column;gap:6px}
.qr-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
background:var(--bg2);border:2px solid var(--line);border-radius:14px;
padding:7px 10px;font-size:13.5px;animation:resIn .4s both}
.qr-row:nth-child(1){animation-delay:.2s}
.qr-row:nth-child(2){animation-delay:.34s}
.qr-row.ok{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 26%,var(--bg2))}
.qr-row.no{border-color:var(--bad);background:color-mix(in srgb,#7a2020 26%,var(--bg2))}
.qr-row.none{border-style:dashed;opacity:.75}
.qr-av{font-size:18px;line-height:1;flex:none}
.qr-nm{font-weight:800;flex:none}
.qr-pick{flex:1;min-width:60px;color:var(--ink-dim);word-break:break-word}
.qr-mk{flex:none}
.qr-pt{flex:none;font-family:'Lalezar','Tajawal',sans-serif;font-size:17px;color:var(--ok)}
.qr-pt.zero{color:var(--ink-dim)}
/* ═══ لمعة الكشف ═══
بتغطي الشاشة بلون النتيجة أقل من ثانية وبتروح لوحدها. pointer-events
مقفولة عشان لو اللاعب دوس في نفس اللحظة الدوسة توصل للزرار اللي
تحتها مش للّمعة. */
.qflash{position:fixed;inset:0;z-index:120;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
animation:qfIn .15s ease-out, qfOut .3s .62s ease-in forwards}
.qflash.win{background:radial-gradient(circle at 50% 44%,#0e6b47cc 0%,#0e6b4700 62%)}
.qflash.lose{background:radial-gradient(circle at 50% 44%,#7a2020cc 0%,#7a202000 62%)}
.qflash.miss{background:radial-gradient(circle at 50% 44%,#3b4356cc 0%,#3b435600 62%)}
@keyframes qfIn{from{opacity:0}}
@keyframes qfOut{to{opacity:0}}
.qf-emo{font-size:74px;line-height:1;animation:qfPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes qfPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.qf-txt{font-family:'Lalezar','Tajawal',sans-serif;font-size:28px;text-shadow:0 3px 0 #000a}
.qflash.win .qf-txt{color:#7ef0bd}
.qflash.lose .qf-txt{color:#ffb3b3}
.qflash.miss .qf-txt{color:var(--ink-dim)}
/* ═══ شاشة النتيجة النهائية ═══ */
.rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
/* مراجعة الأسئلة — السؤال، والاختيارات والصح فيهم متعلّم، وتحتيهم
انت اخترت إيه بلونه. الفكرة إنك تطلع عارف الإجابات مش السكور بس. */
.rev-q{background:var(--bg2);border:2px solid var(--line);border-radius:16px;
padding:10px 12px;margin-bottom:10px}
.rq-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rq-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
background:var(--surface2);border:1.5px solid var(--line);
font-family:'Lalezar','Tajawal',sans-serif;font-size:12px;color:var(--brass-hi)}
.rq-cat{font-size:11.5px;color:var(--ink-dim)}
.rq-t{font-size:15px;font-weight:700;line-height:1.5;margin-bottom:7px;word-break:break-word}
.rq-opts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.rq-opt{font-size:12px;background:var(--surface);border:1.5px solid var(--line);
border-radius:999px;padding:2px 10px;color:var(--ink-dim)}
.rq-opt.right{border-color:var(--ok);color:#c9ffe6;font-weight:800;
background:color-mix(in srgb,#0f7a52 32%,transparent)}
.rq-rows{display:flex;flex-direction:column;gap:5px}
.rq-row{display:flex;align-items:center;gap:7px;border:2px solid var(--line);
border-radius:12px;padding:5px 9px;font-size:12.5px}
.rq-row.ok{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 22%,transparent)}
.rq-row.no{border-color:var(--bad);background:color-mix(in srgb,#7a2020 22%,transparent)}
.rq-row.none{border-style:dashed;opacity:.7}
.rq-av{font-size:15px;line-height:1;flex:none}
.rq-nm{font-weight:800;flex:none;min-width:44px}
.rq-ans{flex:1;min-width:0;color:var(--ink-dim);word-break:break-word}
.rq-mk{flex:none}
/* ═══ شاشة البداية — كارت رقمك القياسي ═══
تحت الأفاتار، وبيتبع عدد الأسئلة المختار مع كل دوسة على + أو − —
عشان اللاعب يعرف بيتحدّى إيه قبل ما يبدأ. مخفي خالص لو لسه ملعبش
العدد ده. تلات خانات بأرقام كبيرة وتحتيها كلمة، وسطر إجمالي باهت. */
.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)}}
/* ═══ الشاشات الضيقة ═══ */
@media (max-width:400px){
.q-text{font-size:20px}
.bd-av{font-size:22px}
.bd-sc{font-size:23px}
.bd-tl{font-size:18px}
.final-score b{font-size:44px}
.grade-t{font-size:26px}
.opt{font-size:15px;padding:11px 10px;gap:8px}
.opt-k{width:27px;height:27px;font-size:14px}
.qf-emo{font-size:62px}
.qf-txt{font-size:24px}
}
@media (max-width:360px){
.q-text{font-size:18.5px}
.opt{font-size:14px}
.bd-sc{font-size:21px}
.bd-nm{font-size:11px}
.round-badge{font-size:11.5px}
}
/* اللي مشغّل «قلّل الحركة» في نظامه — بنسيبله الألوان ونشيل النطّ */
@media (prefers-reduced-motion:reduce){
.opt.right,.opt.wrong,.pk-av,.q-res,.qr-row,.qf-emo,.bd-sc.bump,.rec-line.new{animation-duration:.01ms}
.qflash{animation:qfOut .01ms .55s forwards}
}