/* ===== مسافة شريط إشعارات الموبايل =====
   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 فوق كفاية — القاعدة دي كانت بتلغيه */

/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «خبّي فلوسك — فلوس وأسئلة»
   الأساسي **أخضر ورق الفلوس** (#8FCB63) — أخضر دافي مايل للزيتوني،
   زي لون الدولار. مقصود إنه يبعد عن «خليك لمّاح» (#1FAE86) اللي
   تركوازي بارد مايل للأزرق: الاتنين خضر بس الفرق بينهم واضح من أول
   نظرة — ده دافي وده بارد.
   اللون التاني دهبي — الأخضر والدهبي مع بعض بيقروا «فلوس» من غير
   ما نكتب كلمة. والأرقام كلها دهبي (--gold) عشان العين تلاقيها
   وسط الكلام — ودي أهم حاجة في الشاشة.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#141A0E; --bg2:#0F1409; --surface:#1E2716; --surface2:#2B371F; --line:#3E4E2C;
  --brass:#5E9E3E; --brass-hi:#8FCB63;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#C9962B; --teal-hi:#F2C14E;        /* اللون التاني (دهبي — أزرار السؤال) */
  --coral:#F0616B; --coral-hi:#F98F96;
  --gold:#F2C14E;                            /* لون الأرقام في كل مكان */
  --on-acc:#0E2005; --acc-sh:#37631E;     /* خط وظل الزرار الأساسي */
  --on-two:#2A1D02; --two-sh:#7A5A10;
  --on-coral:#2E0710; --coral-sh:#8A2138;
  --tint:#243318; --tint-ink:#CDE9A8;    /* خلفية العناصر المفعّلة */
  --ring:#8FCB6333;                              /* هالة التركيز */
  --ink-dim:#B9C7A6; --dim:#B9C7A6; --muted:#B9C7A6;
}

/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
  radial-gradient(1200px 500px at 50% -150px,#26361B 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,#5E9E3E,#8FCB63,#F2C14E)}

/* الأزرار */
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  color:var(--on-acc);box-shadow:0 6px 0 var(--acc-sh)}
.btn.primary:active{box-shadow:0 1px 0 var(--acc-sh)}
.btn.teal{background:linear-gradient(180deg,var(--teal-hi),var(--teal));
  color:var(--on-two);box-shadow:0 6px 0 var(--two-sh)}
.btn.teal:active{box-shadow:0 1px 0 var(--two-sh)}
.btn.coral{background:linear-gradient(180deg,var(--coral-hi),var(--coral));
  color:var(--on-coral);box-shadow:0 6px 0 var(--coral-sh)}
.btn.coral:active{box-shadow:0 1px 0 var(--coral-sh)}
.btn.ghost{border-color:var(--line)}

/* زراير الهيدر التلاتة (؟ / 🏠 / ⚙️) — مربّعات بنفس المقاس بالظبط.
   من غير القاعدة دي كل زرار بياخد عرض محتواه: «؟» ضيّق، والبيت أعرض،
   والترس (SVG) بمقاس تالت — فكانوا مش متساويين. */
.top .btn.sm{width:40px;height:40px;padding:0;border-radius:13px;font-size:17px;
  display:inline-grid;place-items:center;line-height:1}
.top #hz-settings-btn .hz-gear{width:20px;height:20px;vertical-align:0}
/* ═══ أيقونتين الهيدر: الألعاب والرئيسية ═══
   المقاس بالـem زي أيقونة الباب — فبيكبروا لوحدهم في نافذة التأكيد
   (اللي font-size بتاعها 46px) ويفضلوا صغيرين جوّه زرار الهيدر.
   مفيش fill ولا stroke هنا بالقصد: أيقونة الألعاب ألوانها مكتوبة جوّه
   الـSVG نفسه (بنفسجي/أخضر/ذهبي)، ولو حطينا fill هنا هيلغيها — لأن
   الـCSS بتغلب على خصائص الرسم المكتوبة في الوسم. */
.ico-games,.ico-home{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em}
.top #games-btn .ico-games,.top #home-btn .ico-home{width:19px;height:19px;display:block;vertical-align:0}

/* ═══ الهيدر على الشاشات الضيقة ═══
   بقى فيه تلات زراير (🎮 / 🏠 / ⚙️) بدل اتنين. على موبايل 360px التلاتة
   بياخدوا 120px + المسافات، فاسم اللعبة كان بيتكسر على تلات سطور.
   بنصغّر الصورة والزراير والاسم بالتدريج بدل ما نشيل حاجة. */
@media (max-width:430px){
  .top{gap:7px}
  .top img{width:37px;height:auto;transform:translateY(-8px)}
  .top .title{font-size:26px}
  .top .btn.sm{width:36px;height:36px;font-size:15px;border-radius:11px}
  .top #hz-settings-btn .hz-gear{width:18px;height:18px}
  .top #games-btn .ico-games,.top #home-btn .ico-home{width:17px;height:17px}
}
@media (max-width:360px){
  .top{gap:6px}
  .top img{width:33px;height:auto;transform:translateY(-7px)}
  .top .title{font-size:23px}
  .top .sub{font-size:11.5px}
  .top .btn.sm{width:33px;height:33px;font-size:14px;border-radius:10px}
  .top #hz-settings-btn .hz-gear{width:16px;height:16px}
  .top #games-btn .ico-games,.top #home-btn .ico-home{width:16px;height:16px}
}

/* الحقول */
.field:focus{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--ring)}

/* الشيبس والكاتيجوريز */
.chip.on,.cat-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}

/* شريط الحضور ودواير الأفاتارات */
.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)}

/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#101709)}
.ui-modal-title{color:var(--brass-hi)}

/* شاشة التعليمات */
.help-card{background:linear-gradient(180deg,var(--surface),#101709)}
.help-hero{background:linear-gradient(180deg,#26361B,var(--surface));border-bottom-color:var(--line)}
.help-hero h2{color:var(--brass-hi)}
.help-foot{background:linear-gradient(0deg,#101709,#101709ee);border-top-color:var(--line)}
.help-num{background:#0C1207;border-color:var(--line)}
.help-step .hl{color:var(--brass-hi)}

/* حتت متفرقة كانت بلون متثبّت */
.pts-chip,.owner-chip{background:var(--tint);border-color:var(--brass-hi);color:var(--tint-ink)}
.tier-chip{background:var(--tint);border-color:var(--brass-hi);color:var(--tint-ink)}
.safe-ctl button,.notch-ctl button{background:var(--bg2);border-color:var(--line)}


@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}

/* ══════════════════════════════════════════════════════════════════════
   خبّي فلوسك — العناصر الخاصة بيها
   ══════════════════════════════════════════════════════════════════════ */

/* شريط الوقت — بيقيس وقت الدور (أو وقت الرد على سؤال).
   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}}

/* ═══ الرقم ═══
   الأرقام هي بطل اللعبة، فليها خط وحجم ولون لوحدها في كل شاشة —
   العين لازم تلاقيها من غير ما تقرا اللي حواليها. */
.money-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}
.money-big.locked{color:var(--gold);letter-spacing:.5px}
.money-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:moneyPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes moneyPop{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 يقرره. */
.cr{display:flex;direction:rtl;align-items:center;justify-content:center;gap:6px;font-size:13.5px}
.cr .ca{font-style:normal;color:var(--ink-dim);font-size:15px;line-height:1}
.catc.on .cr .ca,.chip.on .cr .ca{color:var(--brass-hi)}
/* جملة الوحدة تحت الحدود — بتقول تكتب بإيه من غير ما تشرح */
.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 .cr{font-size:12.5px}
.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}
/* خانة الإدخال شفافة وفوق المربعات كلها — الكتابة بتترصّ من ناحية
   اليمين لوحدها، وكيبورد الأرقام بيطلع عادي على الموبايل. */
.dg-group{position:relative;display:flex;gap:5px;cursor:text}
.dg-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;
  font-size:16px;color:transparent;background:transparent;z-index:2;cursor:text;-webkit-appearance:none}
.dg-group:focus-within .dg.cell{border-color:var(--brass);box-shadow:0 0 0 2px var(--ring),inset 0 -3px 0 #0006}
/* input وspan في نفس الكلاس، فالتوسيط بـline-height مش بـgrid —
   الـgrid على input بيتلغي في متصفحات كتير. */
.dg{width:38px;height:50px;flex:0 1 38px;min-width:0;display:block;
  border-radius:11px;border:2px solid var(--line);background:var(--bg2);
  font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:46px;
  color:var(--ink);text-align:center;padding:0;box-shadow:inset 0 -3px 0 #0006}
input.dg:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--ring),inset 0 -3px 0 #0006}
/* الخانات المقفولة — رمادية وباهتة عشان تبان إنها مش مكان كتابة */
.dg.zero{color:#ffffff3d;background:#0000002e;border-style:dashed;box-shadow:none;cursor:default}
.dg-prev{text-align:center;font-family:'Lalezar','Tajawal',sans-serif;
  font-size:26px;color:var(--gold);min-height:30px;margin-bottom:4px}
.dg-prev.bad{color:var(--bad);font-size:16px;font-family:'Tajawal',sans-serif;font-weight:800}

/* ═══ كارت الفلوس في شاشة اللعب ═══
   فلوسك انت على الشمال (عشان ترد بصدق) وتقدّم صاحبك على اليمين. */
.money-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 .money-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.money{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}
.tb .dg{width:32px;height:42px;flex-basis:32px;font-size:22px;line-height:38px}
.tb .dg-prev{font-size:21px;min-height:25px}
.q-field{resize:none;font-family:'Tajawal',sans-serif;font-size:15px;line-height:1.6;margin-bottom:8px}
/* ═══ نصيحة السؤال ═══
   سطرين تحت خانة الكتابة وفوق زرار «اسأل» على طول. الخلفية والإطار
   بيفصلوها عن الكلام العادي عشان متتقراش كأنها تعليمات هامشية، والملوّن
   فيها هو اللي محتاج يتقرا في لمحة بس: «اسألوا أسئلة كويسة»، المثال،
   و«بلاش». الباقي رمادي عشان اللون ما يفقدش قيمته. */
.ask-tip{background:var(--bg2);border:2px dashed var(--line);border-radius:12px;
  padding:7px 10px;margin-bottom:8px;font-size:12.5px;line-height:1.75;
  color:var(--ink-dim);text-align:center}
.ask-tip .at-do{color:var(--brass-hi);font-weight:900}
.ask-tip .at-ex{color:var(--gold);font-weight:800}
.ask-tip .at-x{display:block;margin-top:3px;padding-top:4px;border-top:1px dashed var(--line)}
.ask-tip .at-no{color:var(--coral-hi);font-weight:900}
.ask-tip .at-bad{color:var(--coral);font-weight:800;text-decoration:line-through}
@media (max-width:360px){ .ask-tip{font-size:11.5px;padding:6px 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)}

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

/* ═══ الشاشات الضيقة ═══ */
@media (max-width:430px){
  .money-big{font-size:29px}
  .mc-side .money-big{font-size:22px}
  .money-reveal{font-size:31px}
  .catc{font-size:12px;padding:7px 10px}
  .pick-q{font-size:21px}
  .dg{width:33px;height:44px;flex-basis:33px;font-size:23px;line-height:40px}
  .tb .dg{width:28px;height:38px;flex-basis:28px;font-size:19px;line-height:34px}
  .q-big{font-size:19px}
  .ans-row .btn{font-size:13.5px;padding:13px 4px}
  .log{max-height:200px}
}
@media (max-width:360px){
  .money-big{font-size:25px}
  .mc-side .money-big{font-size:19px}
  .money-reveal{font-size:27px}
  .catc{font-size:11px;padding:6px 8px}
  .pick-q{font-size:19px}
  .digits{gap:4px}
  .dg{width:28px;height:38px;flex-basis:28px;font-size:19px;border-radius:9px;line-height:34px}
  .tb .dg{width:25px;height:34px;flex-basis:25px;font-size:17px;line-height:30px}
  .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%,#243318F2 0%,#080C05FA 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,.money-reveal{animation-duration:.01ms}
}