/* ===== مسافة شريط إشعارات الموبايل =====
   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}

/* ============ اللوبي ============ */
.room-code{font-family:'Lalezar';font-size:56px;letter-spacing:8px;color:var(--brass-hi);
  text-shadow:0 4px 0 #000a;direction:ltr;text-align:center;line-height:1.1}
.join-url{direction:ltr;text-align:center;background:var(--bg2);border:2px dashed var(--line);
  border-radius:14px;padding:8px 10px;font-weight:700;word-break:break-all;cursor:pointer}
.qr-wrap{display:grid;place-items:center;padding:10px}
.qr-wrap svg,.qr-wrap img{background:#fff;padding:10px;border-radius:14px;box-shadow:0 5px 0 #000a}
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.p-tile{position:relative;background:var(--bg2);border:2px solid var(--line);border-radius:16px;
  padding:10px 6px;text-align:center;animation:pop .2s ease}
.p-tile .av{font-size:34px;line-height:1.2}
.p-tile .nm{font-weight:800;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tile .st{font-size:11px;color:var(--ink-dim)}
.p-tile.off{opacity:.45;filter:grayscale(.6)}
.p-tile .crown{position:absolute;top:-12px;right:-6px;font-size:20px;transform:rotate(15deg)}
.p-tile .kick{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;
  border:none;background:var(--coral);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 2px 0 #0009}
.stepper{display:flex;align-items:center;gap:12px;justify-content:center}
.stepper .val{font-family:'Lalezar';font-size:34px;min-width:56px;text-align:center;color:var(--brass-hi)}
.stepper button{width:46px;height:46px;border-radius:14px;font-size:24px}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-chip{display:flex;align-items:center;gap:8px;background:var(--bg2);border:2px solid var(--line);
  border-radius:14px;padding:10px;cursor:pointer;font-weight:800;font-size:14px;transition:transform .06s}
.cat-chip:active{transform:scale(.97)}
.cat-chip.on{border-color:var(--teal);background:#0d2b28;color:#8ff0e2}
.cat-chip.locked{opacity:.55;pointer-events:none}
.cat-chip .ic{font-size:20px}
.count-note{text-align:center;font-weight:800;color:var(--ink-dim)}
.count-note b{color:var(--brass-hi)}

/* ============ النتائج ============ */
.award{display:flex;align-items:center;gap:12px;background:var(--bg2);border:2px solid var(--line);
  border-radius:16px;padding:10px 14px;margin-bottom:8px;animation:pop .25s ease}
.award .aic{font-size:30px}
.award .at{font-weight:900}
.award .ad{font-size:13px;color:var(--ink-dim)}
.rank-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:2px solid var(--line);
  border-radius:14px;padding:9px 12px;margin-bottom:7px;font-weight:800}
.rank-row .pos{font-family:'Lalezar';font-size:20px;color:var(--ink-dim);min-width:26px}
.rank-row .sc{margin-inline-start:auto;font-family:'Lalezar';font-size:21px;color:var(--brass-hi)}
.rank-row.me{border-color:var(--brass)}
/* كونفيتي */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ===== شريط علوي أنضف + لوجو صورة ===== */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;filter:none;opacity:.95;
  background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral))}
/* اللوجو طولي، فبيتقاس بالعرض: الراجل بيطلع بنفس حجم شخصيات باقي
   الألعاب بدل ما يتصغّر عشان يدخل في مربّع. */
.top img{width: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}
.presence-bar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:110;display:flex;gap:6px;
  background:#0b1322ee;border:2px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 4px 14px #000a;
  max-width:94vw;overflow-x:auto;
  /* ═══ طبقة لوحدها ═══
     الشريط والتنبيه ثابتين فوق صفحة طويلة. من غير الترقية دي المتصفح
     بيعيد رسمهم مع كل فريم سكرول — وده اللي بيحسّه اللاعب «تهنيجة»
     في اللعب الطويل. */
  will-change:transform}
.presence-bar.hidden{display:none}
.pv{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#16233b;border:2px solid #2fc6b0}
.pv .av{font-size:18px;line-height:1}
.pv.away{border-color:var(--coral);animation:pulseAway 1s infinite alternate}
.pv.off{border-color:#5b6b8c;opacity:.55}
.pv.gone{border-color:#5b6b8c;opacity:.4;filter:grayscale(1)}
.pv .bd{position:absolute;top:-7px;inset-inline-end:-7px;font-size:13px;filter:drop-shadow(0 1px 2px #000)}
/* ═══ النبضة على طبقة لوحدها ═══
   كانت أنيميشن على box-shadow، وده بيرسم من جديد كل فريم — وشريط
   الحضور ثابت فوق الصفحة، يعني الرسم ده بيتكرر مع كل حركة سكرول على
   شاشة كبيرة. دايرة على ::after بتكبر وتشفّ (transform + opacity)
   بتتعمل على الكارت مباشرة من غير أي إعادة رسم. */
.pv.away::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--coral,#ff6d5a);pointer-events:none;
  animation:pulseAway 1s infinite alternate}
@keyframes pulseAway{from{transform:scale(1);opacity:.55}to{transform:scale(1.35);opacity:0}}

/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.ui-modal-ov{position:fixed;inset:0;z-index:300;background:#000b;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .16s;backdrop-filter:blur(3px)}
.ui-modal-ov.show{opacity:1}
.ui-modal{background:linear-gradient(180deg,var(--surface),#12203a);border:2px solid var(--line);border-radius:24px;
  width:100%;max-width:400px;padding:24px 22px;box-shadow:0 20px 50px #000c;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .18s}
.ui-modal-ov.show .ui-modal{transform:none}
.ui-modal-emoji{font-size:46px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px #0007)}
.ui-modal-title{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;margin:0 0 8px;color:var(--brass-hi)}
.ui-modal-body{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:18px}
.ui-modal-actions{display:flex;gap:10px}
.ui-modal-actions .btn{flex:1;margin:0}
/* ===== شاشة التعليمات (هيلب) الجديدة ===== */
.help-ov{position:fixed;inset:0;z-index:260;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.help-card{background:linear-gradient(180deg,#182741,#101d33);border:2px solid var(--line);border-radius:26px;
  width:100%;max-width:540px;max-height:92vh;overflow:auto;box-shadow:0 22px 55px #000d}
.help-hero{position:sticky;top:0;background:linear-gradient(180deg,#1d2f4f,#182741);padding:20px 22px 16px;border-bottom:2px solid var(--line);text-align:center;z-index:2}
.help-hero img{width: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}

/* احترام منطقة النوتش/شريط الحالة في المتصفح كمان */
.presence-bar{top:calc(8px + var(--safe-top))}
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}

/* تحذير الغشاش — تحت شريط الحضور */
.cheat-alert{position:fixed;top:calc(62px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:109;
  background:#2a0f14ee;border:2px solid var(--coral);border-radius:14px;padding:6px 12px;
  box-shadow:0 6px 18px #000a;max-width:94vw;text-align:center;animation:cheatPop .25s ease-out;
  will-change:transform}   /* طبقة لوحدها — زي شريط الحضور فوق بالظبط */
.cheat-alert .ca-top{font-weight:900;font-size:14px;color:var(--coral);letter-spacing:.3px}
.cheat-alert .ca-names{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;margin-top:2px}
.cheat-alert .ca-one{font-size:11px;color:#ffd9d2}
.cheat-alert .ca-one b{font-weight:700;opacity:.85}
@keyframes cheatPop{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

/* خلفية صلبة ورا شريط إشعارات الموبايل — عشان محتوى اللعبة ما يظهرش تحته */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--safe-top);
  background:var(--bg2,#0B1322);z-index:120;pointer-events:none}

/* الشاشات اللي بتغطي كل الموبايل — تحترم شريط الإشعارات هي كمان */
/* مسافة أزرار النظام تحت (شريط التنقّل أو شريط الإيماءات).
   env(safe-area-inset-bottom) بيرجّع القيمة الحقيقية من الجهاز نفسه: صفر على
   الموبايلات اللي مالهاش أزرار تحت، و24-48 بكسل على اللي ليها. يعني الحل
   بيظبط نفسه على أي جهاز من غير ما نكتب أرقام ولا نتعرّف على موديل بعينه.
   من غير السطر ده زرار «تمام يلا نلعب» كان بيقع تحت أزرار النظام. */
.ui-modal-ov,.help-ov{padding-top:calc(16px + var(--safe-top)) !important;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}

/* مفتاح ظبط المسافة فوق (جوه شيت المساعدة) */
.safe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 2px 2px;font-size:13px;color:var(--ink-dim,#B9C3D8)}
.safe-ctl{display:flex;align-items:center;gap:8px}
.safe-ctl button{width:30px;height:30px;border-radius:10px;font-size:18px;font-weight:900;line-height:1;
  background:#0d1830;border:1px solid var(--line);color:inherit;cursor:pointer}
.safe-ctl button:active{filter:brightness(1.3)}
.safe-ctl b{min-width:34px;text-align:center;font-size:14px;color:var(--brass-hi,#FFB93E)}
.safe-hint{font-size:11px;color:var(--muted,#8fa0bd);line-height:1.5;padding:0 2px 6px;text-align:center}

/* أيقونات الباب */
.ico-door{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;stroke:currentColor}
.leave-fab .ico-door{width:22px;height:22px;vertical-align:-4px}
.ui-modal .ui-emoji .ico-door{width:38px;height:38px}

/* ذيل التنبيه — بيشاور على أفاتار اللي بيغش */
.cheat-alert{left:0;transform:none;transform-origin:var(--tail,50%) 0}
.cheat-alert::before{content:'';position:absolute;top:-7px;left:var(--tail,50%);width:12px;height:12px;
  margin-inline-start:-6px;background:#2a0f14;border-inline-start:2px solid var(--coral);
  border-top:2px solid var(--coral);transform:rotate(45deg)}
@keyframes cheatPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
/* النبض الأصلي pulseAway فوق كفاية — القاعدة دي كانت بتلغيه */

/* ══════════════════════════════════════════════════════════════════════
   عناصر مشتركة مع باقي ألعاب «العب مع صاحبك» (الوقت واللقطة والنتايج)
   ══════════════════════════════════════════════════════════════════════ */
.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:#2B0C07;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)}

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

/* ═══ الشاشات الضيقة ═══ */
@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:#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)}

/* شريط الحضور ودواير الأفاتارات */
.presence-bar{background:color-mix(in srgb,var(--bg2) 92%,#000);border-color:var(--line)}
.pv{background:var(--surface);border-color:var(--brass-hi)}
.pv.away{border-color:var(--coral)}
.pv.off,.pv.gone{border-color:var(--line)}

/* المنصة (أول تلاتة) — الذهب بيمشي مع ثيم اللعبة، والفضة والبرونز زي ما هما */
.pod.p1 .bar{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--on-acc)}

/* النوافذ الداخلية */
.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)}

/* حتت متفرقة كانت بلون متثبّت */
.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)}

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

/* ═══ شاشة التوقف المؤقت (نت حد قطع) ═══
   نفس شكلها في المحقق والمتهم عشان الإحساس يبقى واحد عبر الألعاب */
/* ملحوظة التوقف — شريط صغير تحت، مش شاشة بتقفل الدنيا.
   قبل كده كانت طبقة كاملة فوق كل حاجة: أول ما نت الملمّح يهزهز
   الشلة كلها كانت بتلاقي شاشة سودا «استنوه» وهما في نص التخمين. */
.pause-note{position:fixed;z-index:60;bottom:calc(10px + env(safe-area-inset-bottom));
  /* بتمشي مع عمود اللعب، وبتسيب مكان لزرار الخروج العايم (52px) عشان ميغطيش الكلام */
  inset-inline-start:max(78px, calc((100vw - 560px) / 2 + 78px));
  inset-inline-end:max(10px, calc((100vw - 560px) / 2 + 10px));
  background:var(--surface);border:1.5px solid var(--brass);border-radius:16px;
  padding:9px 12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;
  font-size:13px;animation:noteUp .22s ease}
@keyframes noteUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pause-note .pn-txt{flex:1;line-height:1.5}
.pause-note .pn-txt b{color:var(--brass-hi);font-weight:900}
.pause-note .pn-sub{color:var(--muted,#8fa0bd);font-size:11px}
.pause-note .btn{flex:0 0 auto;padding:7px 10px;font-size:12px}

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

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

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

/* ═══ تنسيق خطوات التعليمات ═══
   الخطوات بقت فقرة أو اتنين بدل سطر واحد، فالمسافات القديمة بقت ضيقة.
   p + p: المسافة بين الفقرتين بدقة — بدل <br><br> اللي كان بيعمل
   فجوة = ضعف ارتفاع السطر ومفيش تحكم فيها. */
.help-step{padding:16px 4px}
.help-step h4{margin:0 0 6px}
.help-step p{line-height:1.75}
.help-step p + p{margin-top:9px}

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

/* الطبقات المنبثقة متسحبش الصفحة اللي وراها لما توصل لآخر السكرول
   (scroll chaining) — من غير ده قفل شاشة التعليمات كان بيسيب اللاعب
   نازل عند الشرح اللي تحت اللعبة */
.help-ov,.ui-modal-ov,.hz-ov{overscroll-behavior:contain}

/* سطر التعادل فوق المنصة — المنصة لوحدها بتبان كإن واحد فوق والتاني
   تحته، فالسطر ده بيقول إن الاتنين (أو التلاتة) كسبوا بالأسامي. */
.tie-line{background:linear-gradient(180deg,#ffffff14,#ffffff08);
  border:2px dashed var(--line);border-radius:14px;
  padding:9px 12px;margin:0 0 12px;font-size:14px;line-height:1.5}
.tie-line b{display:inline-block}

/* الذهبي اللي بتستعمله عناصر منقولة من ألعاب تانية — هنا هو لون اللعبة نفسه */
: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}

/* ═══ اللوحة اللي فوق ═══
   نُصّين وخط واحد بينهم. الخط مرسوم **ورا** كل حاجة (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%;
  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: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)}}
/* السلسلة — بتبان من تانية إجابة صح ورا بعض، وقبلها بتفضل فاضية بدل
   ما تحجز مساحة برقم 1 مالوش أي معنى. */
.bd-fire{font-size:11.5px;font-weight:800;color:#ffb861;min-height:15px;line-height:1.3}
.bd-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:'Lalezar','Tajawal',sans-serif;font-size:13px;color:var(--ink-dim);
  background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:0 7px;line-height:1.6}

/* ═══ نقط السجل ═══
   نقطة لكل سؤال عدّى — خضرا لو جابها وحمرا لو لأ، كل واحد في عموده.
   ده اللي بيخلّي اللاعب يعرف «إحنا فين» من غير ما يستنى آخر اللعبة. */
.bd-dots{position:relative;z-index:1;display:grid;grid-template-columns:1fr 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}

/* ═══ الشاشات الضيقة ═══ */
@media (max-width:400px){
  .q-text{font-size:20px}
  .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}
  .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{animation-duration:.01ms}
  .qflash{animation:qfOut .01ms .55s forwards}
}