/* ===== مسافة شريط إشعارات الموبايل =====
   env() هي القيمة الحقيقية من الجهاز (بتشتغل على iOS وأندرويد الجديد).
   لو رجّعت صفر — وده بيحصل كتير على أندرويد — بناخد حد أدنى 30px على الموبايل
   عشان المحتوى ما يقعش تحت الساعة والبطارية. */
:root{ --safe-top: env(safe-area-inset-top, 0px) }
/* الرقم الثابت اتشال — safe-top.js بيقيس القيمة الحقيقية من الجهاز */
/* ============ تحدي الشلة — ستايل «ليلة خيامية» ============ */
:root{
  --bg:#101A2B; --bg2:#0B1322; --surface:#182741; --surface2:#1F3152;
  --line:#2A3E63; --ink:#F4EDDF; --ink-dim:#B9C3D8;
  --brass:#F2A31B; --brass-hi:#FFB93E; --coral:#FF6D5A; --teal:#2FC6B0;
  --cA:#E4573D; --cB:#2F86EB; --cC:#17A87B;
  --ok:#2ec27e; --bad:#ff5c5c;
  --r:18px; --r-lg:26px;
  --shadow:0 6px 0 #000a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  margin:0;min-height:100%;color:var(--ink);
  font-family:'Tajawal',system-ui,sans-serif;font-size:16px;line-height:1.55;
  background:
    radial-gradient(1200px 500px at 50% -150px,#1B2C4C 0%,transparent 60%),
    var(--bg);
  overscroll-behavior:contain;
  /* ═══ المتصفح ممنوع يظبط السكرول من ورانا ═══
     كروم بيعمل «تثبيت سكرول»: أول ما ارتفاع حاجة فوق الشاشة يتغيّر
     بيحرّك مكان الصفحة عشان اللي انت شايفه يفضل مكانه. اللعبة هنا
     بتغيّر ارتفاعات جوّه الشاشة مع كل رسالة من السيرفر، والنتيجة كانت
     نطّة في نص الدور. إحنا بنمسك مكان الصفحة بنفسنا في render()، فلو
     سبنا التثبيت شغّال يبقى اتنين بيشدّوا في الصفحة في وقت واحد. */
  overflow-anchor:none;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-top)) 14px calc(30px + env(safe-area-inset-bottom))}
h1,h2,h3,.display{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;letter-spacing:.5px;margin:0}
button{font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}

/* شريط الرايات (بانر خيامية) */
.bunting{height:26px;margin:0 -14px 10px;position:relative;
  background:
    linear-gradient(135deg,transparent 50%,var(--coral) 50%) 0 0/26px 26px repeat-x,
    linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;
  filter:drop-shadow(0 3px 0 #0007);
}
.bunting.teal{background:
    linear-gradient(135deg,transparent 50%,var(--teal) 50%) 0 0/26px 26px repeat-x,
    linear-gradient(225deg,transparent 50%,var(--brass) 50%) 13px 0/26px 26px repeat-x;}

/* ============ عناصر عامة ============ */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.tight{padding:12px}
.center{text-align:center}
.muted{color:var(--ink-dim);font-size:.92em}
.small{font-size:.85em}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.hidden{display:none !important}
.mt{margin-top:12px}.mb{margin-bottom:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r);cursor:pointer;user-select:none;
  background:var(--surface2);color:var(--ink);
  padding:13px 18px;font-size:17px;font-weight:700;
  box-shadow:0 5px 0 #000a;transition:transform .06s,box-shadow .06s,filter .15s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#161006;box-shadow:0 6px 0 #7a4d00}
.btn.primary:active{box-shadow:0 1px 0 #7a4d00}
.btn.coral{background:linear-gradient(180deg,#ff8571,var(--coral));color:#2b0c07;box-shadow:0 6px 0 #8a2417}
.btn.coral:active{box-shadow:0 1px 0 #8a2417}
.btn.teal{background:linear-gradient(180deg,#4fe0cb,var(--teal));color:#04231e;box-shadow:0 6px 0 #0d5a50}
.btn.teal:active{box-shadow:0 1px 0 #0d5a50}
.btn.ghost{background:transparent;border:2px dashed var(--line);box-shadow:none}
.btn.big{width:100%;padding:16px;font-size:20px;border-radius:var(--r-lg)}
.btn.sm{padding:8px 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 #000a}
.btn.sm:active{box-shadow:0 1px 0 #000a}

.field{width:100%;background:var(--bg2);border:2px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:13px 14px;outline:none}
.field:focus{border-color:var(--brass)}
textarea.field{resize:vertical;min-height:74px}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
  border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
.chip.on{border-color:var(--brass);background:#2a2210;color:var(--brass-hi)}
.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)}

/* ============ مرحلة كتابة الأسئلة ============ */
.progress-cats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.slot{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}
.slot.done{border-color:var(--teal)}
.slot .src-tag{font-size:12px;font-weight:800;color:var(--ink-dim)}
.slot .qtext{font-weight:800;margin:4px 0 8px}
.slot .mini-ch{display:flex;flex-direction:column;gap:4px;font-size:14px}
.slot .mini-ch span{padding:4px 10px;border-radius:10px;background:#0008}
.slot .mini-ch span.ok{background:#0d2b1c;color:#7fe3ae;border:1px solid #1d6b44}
.choice-edit{display:flex;align-items:center;gap:8px;margin-top:8px}
.choice-edit .mark{width:44px;height:44px;flex:none;border-radius:12px;border:2px solid var(--line);
  background:var(--bg2);font-size:20px;cursor:pointer}
.choice-edit .mark.on{background:#0d2b1c;border-color:var(--ok);color:var(--ok)}
.bank-card{border:2px solid var(--brass);border-radius:18px;padding:14px;background:#211a0b;animation:pop .18s ease}
.bank-card .bq{font-weight:800;font-size:17px;margin-bottom:10px}
.bank-card .bch{display:flex;flex-direction:column;gap:6px}
.bank-card .bch span{background:#0007;border-radius:12px;padding:8px 12px;font-weight:700}
.bank-left{font-size:13px;color:var(--ink-dim);text-align:center;margin-top:6px}
.waiting-list{display:flex;flex-direction:column;gap:8px}
.waiting-list .wrow{display:flex;align-items:center;gap:10px;background:var(--bg2);
  border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:800}
.waiting-list .wrow .ok{margin-inline-start:auto;color:var(--ok)}
.waiting-list .wrow .wr{margin-inline-start:auto;color:var(--ink-dim);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}

/* ============ الكويز ============ */
.q-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.q-idx{font-family:'Lalezar';font-size:22px;color:var(--brass-hi)}
.author-line{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink-dim);font-size:14px;margin-bottom:10px}
.timer{height:14px;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),var(--coral));
  border-radius:999px;transition:width .2s linear}
.timer.low .fill{animation:blink .6s infinite}
.q-text{font-size:23px;font-weight:800;line-height:1.5;margin:6px 0 16px}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  border:none;border-radius:var(--r-lg);padding:16px;font-size:18px;font-weight:800;color:#fff;
  cursor:pointer;box-shadow:0 6px 0 #0009;transition:transform .07s,box-shadow .07s,filter .2s,opacity .2s}
.choice:active{transform:translateY(4px);box-shadow:0 2px 0 #0009}
.choice .shape{font-size:22px;flex:none}
.choice.cA{background:linear-gradient(180deg,#f0684e,var(--cA))}
.choice.cB{background:linear-gradient(180deg,#4b9bf5,var(--cB))}
.choice.cC{background:linear-gradient(180deg,#23c493,var(--cC))}
.choice.dim{opacity:.35;filter:saturate(.4)}
.choice.picked{outline:4px solid #fff;outline-offset:-4px}
.choice.correct{outline:5px solid #b7ff9e;outline-offset:-5px;animation:bounce .5s}
.choice.wrong-pick{outline:4px dashed #ffd0c9;outline-offset:-4px}
.choice:disabled{cursor:default}
.choice .voters{margin-inline-start:auto;display:flex;gap:2px;font-size:18px;flex-wrap:wrap;justify-content:flex-end}
.choice .pts{position:absolute;top:-12px;left:10px;background:#fff;color:#111;border-radius:999px;
  font-size:13px;font-weight:900;padding:2px 10px;box-shadow:0 3px 0 #0008}
@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.answered-strip{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px;min-height:28px}
.answered-strip .a{font-size:22px;animation:pop .25s ease}
.owner-view{padding:26px 10px;text-align:center}
.owner-view .big-emoji{font-size:60px}
.mini-board{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.mini-board .mrow{display:flex;align-items:center;gap:10px;background:var(--bg2);
  border-radius:12px;padding:7px 12px;font-weight:800;border:2px solid var(--line)}
.mini-board .mrow.me{border-color:var(--brass)}
.mini-board .sc{margin-inline-start:auto;color:var(--brass-hi);font-family:'Lalezar';font-size:19px}

/* ============ النتائج ============ */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:18px 0 8px;min-height:190px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:120px}
.pod .pav{font-size:42px;animation:float 2.4s ease-in-out infinite}
.pod .pnm{font-weight:900;font-size:14px;text-align:center}
.pod .psc{font-family:'Lalezar';color:var(--brass-hi)}
.pod .bar{width:100%;border-radius:14px 14px 0 0;box-shadow:0 5px 0 #000a;
  display:grid;place-items:center;font-family:'Lalezar';font-size:30px;color:#161006}
.pod.p1 .bar{height:110px;background:linear-gradient(180deg,var(--brass-hi),var(--brass))}
.pod.p2 .bar{height:80px;background:linear-gradient(180deg,#cfd6e4,#9aa6bc);color:#101a2b}
.pod.p3 .bar{height:60px;background:linear-gradient(180deg,#e6976a,#c06b3e);color:#2b1204}
@keyframes float{50%{transform:translateY(-6px)}}
.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)}
details.review{background:var(--bg2);border:2px solid var(--line);border-radius:14px;margin-bottom:8px;overflow:hidden}
details.review summary{padding:10px 12px;cursor:pointer;font-weight:800;list-style:none;display:flex;gap:8px;align-items:center}
details.review summary::-webkit-details-marker{display:none}
details.review .rv-body{padding:0 12px 12px;border-top:2px dashed var(--line)}
.rv-ch{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:#0007;margin-top:6px;font-size:14px;font-weight:700}
.rv-ch.ok{background:#0d2b1c;border:1px solid #1d6b44}
.rv-ch .who{margin-inline-start:auto;font-size:16px}

/* كونفيتي */
.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:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 6px #0008)}

/* ===== زرار الخروج الثابت + شريط الحضور (ضد الغش) ===== */
.leave-fab{position:fixed;bottom:14px;inset-inline-start:14px;z-index:120;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer;
  box-shadow:0 6px 0 #000a;transition:transform .07s}
.leave-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
.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:88px;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))}

/* ===== لمّحها — لمسات خاصة (أخضر/ذهبي طاقة) ===== */
:root{--brass:#12b981;--brass-hi:#34e0a8;--teal:#22d3ee;--coral:#fb7185;--violet:#a78bfa}
.bunting,.bunting.teal{background:linear-gradient(90deg,#12b981,#34e0a8,#22d3ee)}
.btn.teal{background:linear-gradient(180deg,#4fd6ee,#22b8d4);color:#04222a;box-shadow:0 6px 0 #0a5866}
.btn.teal:active{box-shadow:0 1px 0 #0a5866}
.chip.on,.cat-chip.on{border-color:var(--brass-hi);background:#0e2f26;color:#a7f3d0}
.secret-box{background:linear-gradient(135deg,#0e2f26,#123a2e);border:3px solid var(--brass-hi);border-radius:22px;
  padding:22px 18px;text-align:center;margin-bottom:14px;box-shadow:inset 0 2px 0 #ffffff10}
.secret-box .lbl{font-size:12px;color:#7fdcc0;font-weight:800;margin-bottom:6px}
.secret-box .word{font-family:'Lalezar','Tajawal',sans-serif;font-size:38px;color:var(--brass-hi);line-height:1.2;filter:drop-shadow(0 3px 8px #0007)}
.secret-box .cat{margin-top:8px}
.clue-status{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-weight:800;font-size:16px;padding:8px 0}
.pts-chip{background:#2a2410;border:2px solid var(--brass);border-radius:999px;padding:4px 12px;font-weight:900;color:var(--brass-hi)}
.guess-item{display:flex;align-items:center;gap:10px;background:var(--bg2,#0b1322);border:2px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:8px;font-weight:700}
.guess-item.correct{background:#12301f;border-color:#1d6b44}
.guess-item .who{display:flex;align-items:center;gap:6px;min-width:0}
.guess-item .gtext{margin-inline-start:auto;font-weight:900;overflow-wrap:anywhere}
.guess-item.correct .gtext{color:#4ade80}
.big-timer{font-family:'Lalezar';font-size:22px;text-align:center;color:var(--brass-hi)}
.cluer-hero{text-align:center;padding:16px 0}
.cluer-hero .big{font-size:52px;filter:drop-shadow(0 4px 8px #0008)}

/* تحذير الغشاش — تحت شريط الحضور */
.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}

/* كارت «حد جاوب صح ومتحسبتش؟» */
.credit-card{border-color:#3a5a4e}
.credit-head{font-family:'Lalezar','Tajawal',sans-serif;font-size:19px;color:var(--brass-hi);text-align:center}
.credit-sub{font-size:12px;color:var(--muted,#8fa0bd);text-align:center;line-height:1.6;margin:4px 0 10px}
.credit-row{display:flex;align-items:center;gap:8px;width:100%;text-align:start;cursor:pointer;
  background:#12233a;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;
  font-family:inherit;font-size:14px;color:inherit}
.credit-row:active{filter:brightness(1.15)}
.credit-row .cr-who{font-weight:900;white-space:nowrap}
.credit-row .cr-txt{color:var(--ink-dim,#B9C3D8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.credit-row .cr-act{margin-inline-start:auto;font-size:12px;font-weight:900;color:var(--ok,#2ec27e);white-space:nowrap}
.credit-row.done{opacity:.6;cursor:default;border-color:#2c5b45;background:#12291f}
.credit-row[disabled]{cursor:default}

/* أيقونات الباب */
.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 فوق كفاية — القاعدة دي كانت بتلغيه */

/* ═══ ثيم اللعبة (مولّد) ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «خليك لمَّاح — نعناعي»
   الألوان دي مأخوذة حرفيًا من كارت اللعبة في الصفحة الرئيسية، عشان اللي
   يدوس على الكارت يلاقي نفس الهوية جوّه اللعبة: نفس لون الاسم، ونفس لون
   الكروت والإطارات. الخلفية بتفضل غامقة ثابتة، واللون بيبان في العناصر.

   القاعدة اللي فوق ماتلمسهاش — كل التظبيط بيتعمل من هنا بالتوريث.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0B1A18; --bg2:#101f21; --surface:#16302f; --surface2:#1D3E3B; --line:#245853;
  --brass:#1FAE86; --brass-hi:#35CFA4;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#38BDF8; --teal-hi:#7DD3FC;        /* اللون التاني (الأزرار المساعدة) */
  --coral:#FB7185; --coral-hi:#FDA4B4;
  --on-acc:#04231C; --acc-sh:#0C6349;     /* خط وظل الزرار الأساسي */
  --on-two:#04202E; --two-sh:#0B5273;
  --on-coral:#2E0710; --coral-sh:#8A2138;
  --tint:#0F3730; --tint-ink:#A7F3D0;    /* خلفية العناصر المفعّلة */
  --ring:#35CFA433;                              /* هالة التركيز */
  --ink-dim:#A9C4BE; --dim:#A9C4BE; --muted:#A9C4BE;
}

/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
  radial-gradient(1200px 500px at 50% -150px,#17403A 0%,transparent 60%),
  var(--bg)}

/* الشريط اللي فوق */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;
  filter:none;opacity:.95;background:linear-gradient(90deg,#1FAE86,#35CFA4,#38BDF8)}

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

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

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

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

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

/* شريط الحضور ودواير الأفاتارات */
.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),#0C1F1D)}
.ui-modal-title{color:var(--brass-hi)}

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

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

/* --- خليك لمَّاح --- */
.secret-box{background:linear-gradient(135deg,var(--tint),var(--surface2));border:3px solid var(--brass-hi)}
.secret-box .lbl{color:var(--tint-ink);opacity:.85}
.secret-box .word{color:var(--brass-hi)}
.cluer-hero .big{filter:drop-shadow(0 4px 10px var(--ring))}
.big-timer{color:var(--brass-hi)}

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

/* ═══════════════════════════════════════════════════════════════════
   خليك لمَّاح على جهاز واحد — اللي زيادة عن نسخة الشلة
   نفس الثيم البنفسجي بالحرف (الملف ده نسخة من lammah/style.css + الحتة
   دي). نفس كتلة الجاسوس على جهاز واحد بالحرف (محرّر الأسامي، قايمة الأسامي،
   الطبقة، العدّاد الدايري، الكشف) + سلّم التلميحات بتاع اللعبة دي.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ شاشة البداية — الأسامي ═══ */
.roster-edit{display:flex;flex-direction:column;gap:8px}
.pe-row{display:flex;align-items:center;gap:8px}
.pe-av{width:46px;height:46px;flex:none;font-size:24px;line-height:1;display:grid;place-items:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;cursor:pointer;
  box-shadow:0 3px 0 #000a;transition:transform .08s}
.pe-av:active{transform:scale(.92)}
.pe-name{flex:1;min-width:0;padding:11px 12px}
.pe-x{width:38px;height:38px;flex:none;border-radius:12px;border:2px solid var(--line);background:transparent;
  color:var(--ink-dim);font-weight:900;font-size:15px;cursor:pointer;transition:.12s}
.pe-x:hover{color:var(--coral);border-color:var(--coral)}
.pe-x:disabled{opacity:.25;pointer-events:none}

/* ═══ قايمة الأسامي (التوزيع والتصويت) ═══
   كل اسم زرار عريض — اللاعب ماسك الموبايل بإيد واحدة وبيدوس بصباعه
   الكبير، فالمستطيل كبير والاسم كبير. اللي خلص بيبهت ويتقفل. */
.roster{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.pr{display:flex;align-items:center;gap:12px;width:100%;text-align:start;font:inherit;color:var(--ink);
  background:linear-gradient(180deg,var(--surface),var(--bg2));border:2px solid var(--line);border-radius:18px;
  padding:12px 14px;cursor:pointer;box-shadow:0 5px 0 #000a;
  transition:transform .07s,box-shadow .07s,opacity .2s,border-color .2s;animation:pop .2s ease}
.pr:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
.pr .av{font-size:28px;line-height:1;width:38px;text-align:center;flex:none}
.pr .nm{font-weight:900;font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .st{font-size:13px;font-weight:800;color:var(--brass-hi);white-space:nowrap}
.pr:not(.done):not(.skip) .st{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
.pr.done{opacity:.55;border-color:#2c5b45;background:#12291f;box-shadow:none;cursor:default}
.pr.done .st{color:#4ade80}
.pr.skip{opacity:.45;box-shadow:none;cursor:default}
.pr.skip .st{color:var(--ink-dim)}
.pr:disabled{pointer-events:none}
.deal-hint{font-size:14.5px;line-height:1.7}

/* ═══ الطبقة اللي بتغطّي الشاشة (الكارت / التصويت) ═══
   لون الخلفية صلب مش شفاف بالقصد — اللي ورا الطبقة (قايمة الأسامي) مالوش
   لازمة للي ماسك الموبايل دلوقتي، والشفافية كانت هتزحم الكارت. */
.card-ov{position:fixed;inset:0;z-index:250;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(14px + var(--safe-top)) 18px calc(14px + env(safe-area-inset-bottom));
  overflow:auto;overscroll-behavior:contain;opacity:0;transition:opacity .18s}
.card-ov.show{opacity:1}
/* margin:auto مش justify-content:center — لو المحتوى أطول من الشاشة
   (موبايل قصير وكارت كبير) التمركز بيقطع أوله ومفيش سكرول يوصله.
   الهوامش التلقائية بتتمركز لما فيه مكان وبتصفّر لما مفيش. */
.co-in{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
/* الصفحة بتتثبّت عند مكانها طول ما الطبقة مفتوحة — الشرح في openOverlay */
body.ov-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.co-top{text-align:center;flex:none}
.co-top .av{font-size:34px;display:block;line-height:1.1}
.co-top b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:26px;display:block;color:var(--brass-hi);line-height:1.2}
.co-top .muted{margin-top:4px;line-height:1.6}
.card-ov .btn.big,.card-ov .btn.ghost{width:100%;max-width:420px;flex:none}
.card-ov .btn.ghost{padding:11px}
.co-hint{color:var(--ink-dim);font-size:13px;text-align:center;min-height:1.6em;flex:none}
/* «مش أنا — ارجع» بعد ما الكارت اتقلب: مضلّم ومقفول وباين إنه مقفول */
.card-ov .btn.ghost.locked{opacity:.32;border-style:solid;color:var(--ink-dim);pointer-events:none}
/* الرسايل الصغيرة لازم تبان فوق الطبقة (كانت تحتها) */
.toasts{z-index:320}

/* ═══ الكارت اللي بيتقلب ═══
   الوش الخلفي (اللوجو) هو اللي باين، والوش الأمامي (الكلمة) متخفي
   visibility:hidden لحد ما اللاعب يضغط — مش backface-visibility بس:
   أول ما يسيب صباعه الكلمة بتختفي في نفس الفريم قبل ما اللفة ترجع، فلو
   حد جنبه بصّ على الشاشة وهي بتتقلب مش هيلقط حاجة.
   touch-action:none عشان الضغطة الطويلة ما تتحوّلش لسكرول وتقطع الإمساك. */
.flip{position:relative;width:min(300px, 84vw, 44vh);perspective:1000px;cursor:pointer;flex:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;outline:none}
/* نسبة 3:4 بحيلة الـpadding مش aspect-ratio — WebView قديم من غيرها كان
   هيرسم الكارت بارتفاع صفر */
.flip::before{content:'';display:block;padding-top:133.33%}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.flip.show .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;
  box-shadow:0 18px 40px #000a, inset 0 1px 0 #ffffff14}
.face.back{border:3px solid var(--brass-hi);
  background-image:repeating-linear-gradient(45deg,#ffffff06 0 10px,transparent 10px 20px),linear-gradient(160deg,var(--surface2),var(--bg2))}
.face.back img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 8px 16px #000a)}
.face.back .bk{margin-top:14px;font-weight:900;font-size:17px;color:var(--tint-ink);line-height:1.5}
/* وش الجاسوس ووش البريء نفس الخلفية ونفس الإطار ونفس المقاس — الفرق في
   الكلام بس. لو الجاسوس كان أحمر كله، وهج الشاشة على وش اللاعب في أوضة
   مضلّمة كان هيفرق. */
.face.front{transform:rotateY(180deg);border:3px solid var(--brass-hi);
  background:linear-gradient(160deg,var(--tint),var(--surface2));visibility:hidden}
.flip.show .face.front{visibility:visible}
.cf{width:100%}
.cf .lbl{font-size:13px;color:var(--tint-ink);opacity:.85;font-weight:800;margin-bottom:8px}
.cf .word{font-family:'Lalezar','Tajawal',sans-serif;font-size:40px;line-height:1.2;color:var(--tint-ink);
  filter:drop-shadow(0 3px 8px #0007);overflow-wrap:anywhere}
.cf .cat{margin-top:12px}
.cf .tip{margin-top:14px;font-size:12.5px;color:var(--ink-dim);line-height:1.6}
.cf.spy .lbl{color:#fca5a5}
.cf.spy .word{color:var(--coral);font-size:30px}

/* ═══ التصويت على الطبقة ═══ */
.picks{width:100%;max-width:420px;flex:none}
.picks .vote-pick{margin-bottom:8px}

/* ═══ كارت الدور + العدّاد الدايري ═══ */
.turn-card{position:relative;background:linear-gradient(160deg,var(--tint),var(--surface2));border:3px solid var(--brass-hi);
  border-radius:24px;padding:18px 16px 18px;text-align:center;margin-bottom:12px;box-shadow:var(--shadow);transition:border-color .2s}
.turn-card .tc-lbl{font-size:13px;color:var(--tint-ink);opacity:.8;font-weight:800}
.turn-card .tc-av{font-size:54px;line-height:1.1;margin:6px 0 2px;filter:drop-shadow(0 6px 12px #0009)}
.turn-card .tc-nm{font-family:'Lalezar','Tajawal',sans-serif;font-size:36px;line-height:1.15;color:var(--tint-ink);overflow-wrap:anywhere}
.turn-card .tc-say{margin-top:6px;font-weight:800;color:var(--brass-hi)}
.turn-card.over{border-color:var(--coral)}
.ring{position:relative;width:128px;height:128px;margin:14px auto 0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring .rg-bg{fill:none;stroke:#ffffff14;stroke-width:9}
.ring .rg-fg{fill:none;stroke:var(--brass-hi);stroke-width:9;stroke-linecap:round;transition:stroke .2s}
.ring.low .rg-fg,.ring.over .rg-fg{stroke:var(--coral)}
.ring.low .ring-n{color:var(--coral);animation:blink .5s infinite}
.ring-n{position:absolute;inset:0;display:grid;place-items:center;font-family:'Lalezar','Tajawal',sans-serif;
  font-size:44px;color:var(--tint-ink);line-height:1;direction:ltr}
.ring-open{margin-top:12px;font-weight:900;color:var(--ink-dim)}
.pop{animation:pop .3s ease}

/* ═══ الكشف ═══ */
.big-emoji{font-size:56px;line-height:1.1;margin:6px 0}
.big-emoji.drum{display:inline-block;animation:drum .22s ease-in-out infinite alternate}
@keyframes drum{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(9deg) scale(1.1)}}
.spy-reveal{margin-top:10px;animation:pop .35s ease}
.spy-name{font-size:22px;font-weight:900;padding:9px 12px;margin:7px auto;max-width:360px;
  background:#3b1220;border:2px solid var(--coral);border-radius:16px;color:#fca5a5;animation:pop .4s ease}
.spy-name .av{font-size:26px}
.spy-name b{color:#fff}
.guess-item.spy-row{flex-direction:column;align-items:stretch;gap:6px;background:#3b1220;border-color:#7f2d42}
.judge{display:flex;gap:10px}
.judge .btn{flex:1;flex-direction:column;gap:2px;padding:14px 8px;font-size:17px;width:auto}
.judge .pts{font-size:12px;opacity:.85;font-weight:800}

@media (max-width:360px){
  .pr .nm{font-size:16px}
  .pr .av{font-size:24px;width:32px}
  .cf .word{font-size:34px}
  .turn-card .tc-nm{font-size:30px}
}

/* ═══ خليك لمَّاح بس — سلّم التلميحات ═══
   اللي عدّت فوق صغيرة ورقمها ونقطها باهتين، والتلميحة الشغّالة تحتيهم
   كبيرة (الشاشة في نص القعدة — لازم تتقري من بعيد) وتحتها العدّاد.
   نفس ترتيب لوحة نسخة الاتنين: ١ فوق و٢ تحتها… والشغّالة في الآخر. */
.ladder{padding:12px 14px 14px}
.hl-past{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.hl-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:#00000030;color:var(--ink-dim);font-size:14px}
.hl-row .hl-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);border:1.5px solid var(--line);font-size:12px;font-weight:900;color:var(--ink-dim)}
.hl-row .hl-t{flex:1;min-width:0;font-weight:700}
.hl-row .hl-p{flex:none;font-size:12px;font-weight:800;opacity:.6}
.hl-row.dim{opacity:.4}
.hl-cur{background:linear-gradient(160deg,var(--tint),var(--surface2));border:3px solid var(--brass-hi);border-radius:20px;padding:14px 14px 16px;text-align:center}
.hl-cur-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hl-badge{font-size:12.5px;font-weight:800;color:var(--tint-ink);opacity:.9}
.hl-pts{font-family:'Lalezar','Tajawal',sans-serif;font-size:20px;color:var(--brass-hi);line-height:1}
.hl-text{font-family:'Lalezar','Tajawal',sans-serif;font-size:34px;line-height:1.3;color:var(--tint-ink);overflow-wrap:anywhere;
  filter:drop-shadow(0 3px 8px #0007)}
.hl-last{margin-top:10px;font-size:13px;font-weight:800;color:var(--coral-hi)}
.ring.sm{width:96px;height:96px;margin-top:10px}
.ring.sm .ring-n{font-size:34px}
.ring.sm .rg-bg,.ring.sm .rg-fg{stroke-width:10}
details.review .rv-body{padding-top:8px;display:flex;flex-direction:column;gap:5px}
@media (max-width:360px){.hl-text{font-size:28px}}

/* عدّادات فوق الشاشة (الجولة / الكاتيجوري / النقط) — زي الجاسوس */
.counters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.counters .chip{font-weight:800}

/* ═══ الكشف بحركة هادية بعد الطبلة ═══ */
.secret-box.reveal-in{animation:revealIn .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes revealIn{from{opacity:0;transform:scale(.7) translateY(16px)}60%{opacity:1}to{opacity:1;transform:none}}
.guess-item.rise{animation:riseIn .38s ease both;animation-delay:calc(.25s + var(--i, 0) * 70ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}