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

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

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

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

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

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
  border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
.chip.on{border-color:var(--brass);background:#243318;color:var(--brass-hi)}
.chip.click{cursor:pointer}
.chip .x{opacity:.7}

.toasts{position:fixed;bottom:14px;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:8px;z-index:99;pointer-events:none;padding:0 14px}
.toast{background:#000d;border:2px solid var(--line);color:var(--ink);border-radius:14px;
  padding:10px 16px;font-weight:700;max-width:480px;animation:pop .18s ease;box-shadow:0 4px 0 #000}
.toast.err{border-color:var(--coral)}
.toast.ok{border-color:var(--teal)}
@keyframes pop{from{transform:translateY(10px) scale(.95);opacity:0}}

.net-banner{position:fixed;top:0;left:0;right:0;z-index:130;text-align:center;
  background:var(--coral);color:#2b0c07;font-weight:800;padding:calc(8px + var(--safe-top)) 8px 8px;box-shadow:0 4px 0 #0008}

/* ============ الهيدر ============ */
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.top img{width:52px;height:52px;filter:drop-shadow(0 3px 0 #0008)}
.top .title{font-size:34px;line-height:1;color:var(--brass-hi);text-shadow:0 3px 0 #000a}
.top .sub{color:var(--ink-dim);font-size:13px;margin-top:2px}

/* ============ الهوم ============ */
.avatar-pick{display:flex;align-items:center;gap:10px}
.avatar-big{font-size:44px;width:72px;height:72px;display:grid;place-items:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:20px;cursor:pointer;
  box-shadow:0 4px 0 #000a;transition:transform .08s}
.avatar-big:active{transform:scale(.92)}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-dim);margin:14px 0}
.or::before,.or::after{content:'';flex:1;height:2px;background:var(--line);border-radius:2px}
.code-input{letter-spacing:10px;text-align:center;font-size:26px;font-weight:800;direction:ltr}

/* ============ شاشة البداية (الإعدادات) ============ */
.stepper{display:flex;align-items:center;gap:12px;justify-content:center}
.stepper .val{font-family:'Lalezar';font-size:34px;min-width:56px;text-align:center;color:var(--brass-hi)}
.stepper button{width:46px;height:46px;border-radius:14px;font-size:24px}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-chip{display:flex;align-items:center;gap:8px;background:var(--bg2);border:2px solid var(--line);
  border-radius:14px;padding:10px;cursor:pointer;font-weight:800;font-size:14px;transition:transform .06s}
.cat-chip:active{transform:scale(.97)}
.cat-chip.on{border-color:var(--teal);background:#0d2b28;color:#8ff0e2}
.cat-chip.locked{opacity:.55;pointer-events:none}
.cat-chip .ic{font-size:20px}
.count-note{text-align:center;font-weight:800;color:var(--ink-dim)}
.count-note b{color:var(--brass-hi)}

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

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

/* ===== شريط علوي أنضف + لوجو صورة ===== */
.bunting,.bunting.teal{height:5px;margin:0 -14px 14px;border-radius:0 0 10px 10px;filter:none;opacity:.95;
  background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral))}
/* اللوجو طولي، فبيتقاس بالعرض: الراجل بيطلع بنفس حجم شخصيات باقي
   الألعاب بدل ما يتصغّر عشان يدخل في مربّع. */
.top img{width:46px;height:auto;object-fit:contain;transform:translateY(-10px);filter:drop-shadow(0 3px 6px #0008)}

/* ===== زرار الخروج الثابت ===== */
.leave-fab{position:fixed;bottom:14px;inset-inline-start:14px;z-index:120;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;cursor:pointer;
  box-shadow:0 6px 0 #000a;transition:transform .07s}
.leave-fab:active{transform:translateY(4px);box-shadow:0 1px 0 #000a}
/* ===== النوافذ الداخلية (بدل نوافذ المتصفح القبيحة) ===== */
.ui-modal-ov{position:fixed;inset:0;z-index:300;background:#000b;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .16s;backdrop-filter:blur(3px)}
.ui-modal-ov.show{opacity:1}
.ui-modal{background:linear-gradient(180deg,var(--surface),#12203a);border:2px solid var(--line);border-radius:24px;
  width:100%;max-width:400px;padding:24px 22px;box-shadow:0 20px 50px #000c;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .18s}
.ui-modal-ov.show .ui-modal{transform:none}
.ui-modal-emoji{font-size:46px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 8px #0007)}
.ui-modal-title{font-family:'Lalezar','Tajawal',sans-serif;font-size:22px;margin:0 0 8px;color:var(--brass-hi)}
.ui-modal-body{color:var(--dim);font-size:15px;line-height:1.75;margin-bottom:18px}
.ui-modal-actions{display:flex;gap:10px}
.ui-modal-actions .btn{flex:1;margin:0}
/* ===== شاشة التعليمات (هيلب) الجديدة ===== */
.help-ov{position:fixed;inset:0;z-index:260;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.help-card{background:linear-gradient(180deg,#182741,#101d33);border:2px solid var(--line);border-radius:26px;
  width:100%;max-width:540px;max-height:92vh;overflow:auto;box-shadow:0 22px 55px #000d}
.help-hero{position:sticky;top:0;background:linear-gradient(180deg,#1d2f4f,#182741);padding:20px 22px 16px;border-bottom:2px solid var(--line);text-align:center;z-index:2}
.help-hero img{width:89px;height:auto;filter:drop-shadow(0 8px 16px #0009)}
.help-hero h2{font-family:'Lalezar','Tajawal',sans-serif;font-size:30px;margin:6px 0 2px}
.help-hero .sub{color:var(--dim);font-size:14px;font-weight:700}
.help-body{padding:8px 20px 4px}
.help-step{display:flex;gap:14px;padding:14px 4px;border-bottom:1px dashed #ffffff12}
.help-step:last-child{border-bottom:none}
/* line-height:1 — من غيرها الإيموجي بياخد سطر body (1.55) ويبان فوق نص المربع على أندرويد (٢٠٢٦-٠٩-٢١) */
.help-num{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;line-height:1;
  padding-top:var(--hz-emoji-down,0);padding-bottom:var(--hz-emoji-up,0);   /* تصحيح مكان الإيموجي حسب خط الجهاز — hazzar-ui.js بيحسبه */
  background:#0c1424;border:2px solid var(--line);box-shadow:inset 0 1px 0 #ffffff10}
.help-step h4{margin:0 0 3px;font-size:16.5px;font-weight:900}
.help-step p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.help-step .hl{color:var(--brass-hi);font-weight:800}
.help-step .warn{color:var(--coral);font-weight:800}
.help-foot{position:sticky;bottom:0;background:linear-gradient(0deg,#101d33,#101d33ee);padding:14px 20px 18px;border-top:2px solid var(--line)}
.help-chk{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;cursor:pointer;justify-content:center;margin-bottom:10px}
.help-chk input{width:17px;height:17px}

/* احترام مسافة أزرار النظام تحت */
.leave-fab{bottom:calc(14px + env(safe-area-inset-bottom))}

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

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

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

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

/* ══════════════════════════════════════════════════════════════════════
   عناصر مشتركة مع باقي ألعاب «العب مع صاحبك» (الوقت واللقطة والنتايج)
   ══════════════════════════════════════════════════════════════════════ */
.help-ov,.ui-modal-ov,.hz-ov{overscroll-behavior:contain}


/* شريط الوقت — بيقيس وقت الرد على السؤال.
   blink بتشتغل لما الوقت يقرب يخلص. */
.timer{height:12px;background:var(--bg2);border:2px solid var(--line);border-radius:999px;
  overflow:hidden;margin-bottom:12px}
.timer .fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--brass-hi),var(--coral));
  border-radius:999px;transition:width .2s linear}
.timer.low .fill{animation:blink .6s infinite}
@keyframes blink{50%{opacity:.35}}

/* التلات نقط اللي بتنبض — «بنكشف الإجابة...» في اللحظة اللي بين الدوسة
   ورد السيرفر. الحركة هي اللي بتقول «إحنا شغّالين»، مش هنجان. */
.ov-dots{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle}
.ov-dots i{width:5px;height:5px;border-radius:50%;background:var(--brass-hi);
  animation:ovDot 1.1s ease-in-out infinite}
.ov-dots i:nth-child(2){animation-delay:.16s}
.ov-dots i:nth-child(3){animation-delay:.32s}
@keyframes ovDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .ov-dots i{animation:none} }

/* أيقونة كارت الإحصائية — نفس كارت الجوايز في باقي الألعاب */
.award .aw-ic{font-size:30px}

/* الكاتيجوريز في شاشة البداية */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.cat-chips .chip{font-size:12.5px;padding:5px 10px}
.cat-chips .cat-chip{flex-direction:column;gap:1px;align-items:center}
.cat-chips .cat-chip .ch{font-size:9.5px;margin-top:1px}

/* ═══ ثيم اللعبة ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ثيم «سمسم والكنز» — فيروزي بحري ودهبي كنز
   الرحلة في البحر (الخريطة والمركب) والكنز دهب، فاللون الأساسي فيروزي
   (#2FD6E6) واللون التاني دهبي. الفيروزي مش متاخد في أي عيلة تانية —
   أبعد من نعناعي «خليك لمَّاح» ومن لبني «سلسلة الكلمات» وأزرق «أسئلة
   ومعلومات» (أقرب جيرانه في /solo/). والدهبي هنا لون تاني بس (الكنز
   والقفل)، مش لون الاسم — فمش بيتلخبط مع كهرماني «المحقق والمتهم».
   نفس الألوان متطبّقة على كارت اللعبة في /solo/.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#071A1F; --bg2:#0A2228; --surface:#0E2C33; --surface2:#13383F; --line:#1E4D57;
  --brass:#14A8B8; --brass-hi:#2FD6E6;      /* الأساسي = لون اسم اللعبة في الهوم */
  --teal:#D9A631; --teal-hi:#F2C552;        /* اللون التاني (الأزرار المساعدة) — دهب الكنز */
  --coral:#FF6D5A; --coral-hi:#FF8571;
  --on-acc:#032227; --acc-sh:#0A5F68;     /* خط وظل الزرار الأساسي */
  --on-two:#2A1B02; --two-sh:#7A5A0E;
  --on-coral:#2B0C07; --coral-sh:#8A2417;
  --tint:#0D3B43; --tint-ink:#BDF3F8;    /* خلفية العناصر المفعّلة */
  --ring:#2FD6E633;                              /* هالة التركيز */
  --ink-dim:#A7C4C9; --dim:#A7C4C9; --muted:#A7C4C9;
  --gold:#F2C552; --gold-hi:#FBE08A; --gold-dk:#7A5410;
}

/* الخلفية — لون ثابت وهالة خفيفة بنفس درجة اللعبة */
body{background:
  radial-gradient(1200px 500px at 50% -150px,#0F4049 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,#14A8B8,#2FD6E6,#F2C552)}

/* الأزرار */
.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)}

/* زراير الهيدر التلاتة (▦ / 🏠 / ⚙️) — مربّعات بنفس المقاس بالظبط. */
.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}
.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}
/* اللوجو مربّع — نفس مقاس شخصيات باقي الألعاب */
.top img{width:46px;height:46px;transform:none}

/* ═══ الهيدر على الشاشات الضيقة ═══ تلات زراير + الاسم على سطر واحد */
@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:22px}
  .top .sub{font-size:11.5px}
  .top .btn.sm{width:33px;height:33px;font-size:14px;border-radius:10px}
  .top #hz-settings-btn .hz-gear{width:16px;height:16px}
  .top #games-btn .ico-games,.top #home-btn .ico-home{width:16px;height:16px}
}

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

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

/* النوافذ الداخلية */
.ui-modal{background:linear-gradient(180deg,var(--surface),#0A2228)}
.ui-modal-title{color:var(--brass-hi)}
.ui-modal-body b{color:var(--brass-hi)}
.mm-sub{display:block;margin-top:8px;font-size:13.5px;opacity:.9}

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

.safe-ctl button,.notch-ctl button{background:var(--bg2);border-color:var(--line)}

/* بلوك «عن اللعبة» تحت اللعبة — مخفي لحد ما اللعبة ترسم. */
.hz-info{display:none}
.hz-info.hz-ready{display:block}

/* التدرّج مرة واحدة فوق بس */
body{background-repeat:no-repeat;background-color:var(--bg)}

/* حد أدنى مضمون للمسافة السفلية */
.app{padding-bottom:max(48px, calc(30px + env(safe-area-inset-bottom)))}

/* ═══ تنسيق خطوات التعليمات ═══ */
.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}

/* الزرار يمشي مع عمود اللعب مش مع حرف الشاشة */
.leave-fab{inset-inline-start:max(14px, calc((100vw - 560px) / 2 + 14px))}
@media (min-width:720px){.leave-fab{bottom:40px}}

/* الطبقات المنبثقة متسحبش الصفحة اللي وراها */
.help-ov,.ui-modal-ov,.hz-ov,.voyage{overscroll-behavior:contain}

/* ══════════════════════════════════════════════════════════════════════
   سمسم والكنز (اتحدّى نفسك) — شاشة الصندوق
   الفكرة: **نفس القفل طول الصندوق**. البكر بتلف وانت بتكتب، القفل بيتشد
   مع «جرّب»، ولما يتفتح نفس العناصر بتنوّر وتطلع وتقع — مفيش شاشة تانية
   بتقلب. الرحلة (الخريطة والكنز وهو بيتقفل عليه) طبقة فوق الشاشة قبلها.
   ══════════════════════════════════════════════════════════════════════ */

/* شريط رقم الصندوق */
.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}

/* ═══ اللوحة اللي فوق ═══ شكلك | الكنز اللي معاك | فتحت · مقفول */
.board{position:relative;padding:0;overflow:hidden}
.bd-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.3fr 1fr;
  background:linear-gradient(180deg,var(--surface2),var(--surface));border-bottom:2px solid var(--line)}
.bd-p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px 8px;min-width:0}
.bd-av{font-size:26px;line-height:1}
.bd-nm{font-size:12px;font-weight:700;color:var(--ink-dim);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-p.me .bd-nm{color:var(--brass-hi)}
.bd-sc{font-family:'Lalezar','Tajawal',sans-serif;font-size:26px;line-height:1.05;color:var(--gold-hi)}
.bd-sc.bump{animation:ptBump .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ptBump{0%{transform:scale(1)}35%{transform:scale(1.5);filter:brightness(1.5)}100%{transform:scale(1)}}
.bd-fire{font-size:11.5px;min-height:15px;line-height:1.3}
.bd-tl{font-family:'Lalezar','Tajawal',sans-serif;font-size:21px;line-height:1.1;display:flex;gap:6px;align-items:center}
.bd-tl .ok{color:var(--ok)}
.bd-tl .no{color:var(--bad)}
.bd-tl i{font-style:normal;color:var(--ink-dim);opacity:.6}
.bd-p.score,.bd-p.tally{border-inline-start:1px solid var(--line)}
/* نقطة لكل صندوق: خضرا اتفتح، حمرا فضل مقفول، والحالي بينبض */
.bd-dots{position:relative;z-index:1;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.dt-col{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;padding:7px 8px;min-height:26px;min-width:0}
.dt{width:10px;height:10px;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.cur{background:var(--brass-hi);animation:dtPulse 1.3s ease-in-out infinite}
.dt.todo{background:transparent;border:2px solid var(--line)}
@keyframes dtPulse{50%{box-shadow:0 0 0 5px var(--ring)}}

/* ═══ الخزنة: وش الصندوق ورا القفل ═══
   ألواح خشب وحزام دهب في النص — القفل متعلّق عليه، وجزء من الصندوق باين
   حواليه (طلب المستخدم: «جزء من الصندوق ظاهر في الخلفية»). */
.vault{position:relative;overflow:hidden;padding:30px 10px 24px;min-height:258px;display:grid;place-items:center;
  border-color:#3B230E;
  background:
    radial-gradient(130% 95% at 50% 42%,transparent 50%,#000000a0 100%),
    repeating-linear-gradient(180deg,#7E4C22 0 40px,#5C3717 40px 43px),
    #6A401C}
.v-chest{position:absolute;inset:0;pointer-events:none}
.v-chest::before,.v-chest::after{content:'';position:absolute;top:0;bottom:0;width:24px;
  background:linear-gradient(90deg,#8E6412,#F6D774 45%,#B88A1E);box-shadow:0 0 0 1.5px #5A3B0A,0 4px 10px #0007}
.v-chest::before{inset-inline-start:7%}
.v-chest::after{inset-inline-end:7%}
.v-band{position:absolute;left:0;right:0;top:calc(52% - 4px);height:34px;
  background:linear-gradient(180deg,#F6D774,#C9962B 55%,#8E6412);box-shadow:0 0 0 1.5px #5A3B0A,0 5px 10px #0007}
.v-rv{position:absolute;width:9px;height:9px;border-radius:50%;top:calc(52% + 8px);z-index:1;
  background:radial-gradient(circle at 35% 35%,#FFF4C2,#9C6E12 70%);box-shadow:0 1px 0 #0008}
.v-rv.r1{left:12px}.v-rv.r2{right:12px}.v-rv.r3{left:calc(7% + 7px);top:18px}.v-rv.r4{right:calc(7% + 7px);top:18px}
/* قيمة الكنز اللي جوّه — بتقل لما سمسم يساعد */
.tv-chip{position:absolute;top:10px;inset-inline-start:10px;z-index:5;display:flex;align-items:center;gap:5px;
  background:#000000b0;border:1.5px solid #F2C55288;color:var(--gold-hi);border-radius:999px;padding:2px 11px;
  font-weight:800;font-size:13px;box-shadow:0 3px 0 #0006}
.tv-chip b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:18px;line-height:1.3}
.tv-chip.bump{animation:tvCut .8s ease}
@keyframes tvCut{0%{transform:none}25%{transform:scale(1.25);color:#ff9d7a;border-color:#ff6d5a}100%{transform:none}}

/* ═══ القفل ═══ حلقة صلب فوق، وجسم نحاس، وشباك بالبكر */
.padlock{position:relative;z-index:2;width:min(300px,82vw);--dh:44px;--wh:calc(var(--dh) * 1.9);
  display:flex;flex-direction:column;align-items:center}
.padlock[data-n="4"]{width:min(310px,84vw)}
.padlock[data-n="5"]{width:min(336px,88vw);--dh:40px}
.shackle{width:58%;height:84px;margin-bottom:-30px;position:relative;z-index:0;transition:transform .38s cubic-bezier(.2,1.6,.4,1)}
.shackle svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 0 #0007)}
.lock-body{position:relative;z-index:1;width:100%;border-radius:26px 26px 32px 32px;padding:20px 12px 12px;
  background:linear-gradient(160deg,#FCE496 0%,#E9B949 28%,#C9962B 62%,#A57314 100%);
  border:3px solid #6E4A0C;
  box-shadow:inset 0 3px 0 #FFF6CF,inset 0 -7px 0 #8A5D0E,0 10px 0 #3A2406,0 18px 30px #000c}
.lock-body::before,.lock-body::after{content:'';position:absolute;top:9px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF4C2,#8A5D0E 70%)}
.lock-body::before{left:12px}.lock-body::after{right:12px}
.dials{position:relative;display:flex;justify-content:center;gap:7px;padding:9px 10px;border-radius:15px;
  background:linear-gradient(180deg,#1B1208,#33230F 50%,#1B1208);box-shadow:inset 0 3px 9px #000d,0 1px 0 #FFF3C4}
/* خط القراية: إطار دهب بعرض الشباك في نص البكر */
.dials::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:calc(var(--dh) + 4px);transform:translateY(-50%);
  border-top:2px solid #F6D774;border-bottom:2px solid #F6D774;pointer-events:none;opacity:.85;border-radius:3px}
.dial{position:relative;flex:0 1 48px;min-width:0;height:var(--wh);overflow:hidden;border-radius:11px;
  background:linear-gradient(90deg,#5d6672 0%,#c9d0d8 22%,#eef1f4 46%,#c3cad3 74%,#5d6672 100%);
  box-shadow:inset 0 0 0 1px #0009}
/* ضلوع البكرة على الجنبين + ضل فوق وتحت عشان تبان مدوّرة */
.dial::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,#000000c0 0%,#00000030 30%,transparent 42%,transparent 58%,#00000030 70%,#000000c0 100%),
    repeating-linear-gradient(180deg,#0000 0 3px,#0002 3px 4px)}
.reel{position:absolute;left:0;right:0;top:calc((var(--wh) - var(--dh)) / 2);will-change:transform}
.reel span{display:block;height:var(--dh);line-height:calc(var(--dh) + 4px);text-align:center;
  font-family:'Lalezar','Tajawal',sans-serif;font-size:calc(var(--dh) * .78);color:#1A1E23;
  text-shadow:0 1px 0 #ffffffa0}
.dial .pin{position:absolute;z-index:3;bottom:3px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1;display:none}
/* خانة سمسم — متقفلة. ١٠-٠٨ (طلب المستخدم): بإطار أخضر (كان دهب) وعلامتها 🦜 */
.dial.lk,.padlock.long .dial.lk{border-color:#34D399;cursor:default;box-shadow:inset 0 0 0 2px #34D399,0 0 0 3px #34D39999,0 0 16px #34D39988}
.padlock.long .dial.lk::after{border-color:#34D399}
.dial.lk.glow{animation:dialHit 1.1s ease 2}
.dial.lk .pin{display:block}
.dial.glow{animation:dialGlow 1.2s ease 2}
@keyframes dialGlow{50%{box-shadow:inset 0 0 0 2px #fff,0 0 0 4px #F6D774,0 0 26px #F6D774}}
.dial.ok{background:linear-gradient(90deg,#1c6b45 0%,#7fe0ad 24%,#c9f7df 46%,#7fe0ad 74%,#1c6b45 100%);transition:background .3s}
.dial.ok .reel span{color:#053d22}
.lock-word{margin-top:8px;text-align:center;font-size:15px;line-height:1.2;color:#6E4A0C;text-shadow:0 1px 0 #FFF0B8;letter-spacing:.5px}
/* «جرّب» = القفل بيتشد: الحلقة بتطلع وتخبط، والجسم بيتهز */
.padlock.tug .shackle{animation:tug .58s ease}
.padlock.tug .lock-body{animation:bodyShake .42s .2s}
@keyframes tug{0%{transform:none}30%{transform:translateY(-11px)}55%{transform:translateY(1px)}72%{transform:translateY(-4px)}100%{transform:none}}
@keyframes bodyShake{20%,60%{transform:translateX(-4px) rotate(-1deg)}40%,80%{transform:translateX(4px) rotate(1deg)}}
/* اتفتح: الحلقة بتطلع، وبعدها القفل كله بيقع */
.padlock.open .shackle{transform:translateY(-34px)}
.padlock.fall,.vault .padlock.fall{animation:lockFall .85s cubic-bezier(.55,0,.85,.45) forwards}
@keyframes lockFall{to{transform:translateY(150%) rotate(16deg);opacity:0}}
.padlock.sad .lock-body{filter:saturate(.55) brightness(.82)}
/* قبل الرحلة ما تخلص القفل مستخبي — وبعدها بيكبر لمكانه (الزوم) */
.vault.pre .padlock,.vault.pre .tv-chip,.vault.pre .tries-chip{opacity:0}
.vault.zoomin .padlock{animation:zoomIn .65s cubic-bezier(.2,1.25,.4,1)}
@keyframes zoomIn{from{transform:scale(.42);opacity:0}}

/* ═══ الصندوق اتفتح ═══ نفس رسمة المشهد والغطا مفتوح، والكنز بيلمع */
.won-scene{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 55%,#2b1a0a00,#0b0603cc)}
.won-scene .rays{position:absolute;left:50%;top:52%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#FFE9A040 0 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:raysSpin 14s linear infinite,fadeIn .6s both}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}}
.won-scene .chest-svg{position:relative;width:min(250px,68vw);margin-top:26px;animation:chestPop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes chestPop{from{transform:scale(.6) translateY(30px);opacity:0}}
.won-scene .ch-lid{display:none}
.won-scene.open-now .ch-lid-open{animation:lidOpen .45s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes lidOpen{from{transform:scaleY(.05)}}
.won-scene.open-now .ch-treasure{animation:treasureUp .7s .35s cubic-bezier(.2,1.5,.4,1) both}
@keyframes treasureUp{from{transform:translateY(34px);opacity:.2}}
.won-pts{position:absolute;top:8px;left:0;right:0;text-align:center;z-index:5;direction:ltr;unicode-bidi:isolate;font-size:42px;line-height:1.1;color:var(--gold-hi);
  text-shadow:0 3px 0 #5A3B0A,0 0 18px #F6D77499;animation:ptsIn .6s .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ptsIn{from{transform:scale(.3);opacity:0}}
.won-pts.cut{animation:ptsCut .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes ptsCut{0%{transform:scale(1)}30%{transform:scale(.7);color:#ff9d7a}100%{transform:scale(1)}}
/* سمسم بييجي من فوق، بياخد شنطة التلت، ويطير */
.parrot-fly{position:absolute;z-index:6;width:74px;height:74px;left:-22%;top:2%;animation:parrotFly 2.2s .5s ease-in-out forwards}
.parrot-fly .parrot-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 6px #0008)}
.parrot-fly .pr-wing{transform-box:fill-box;transform-origin:20% 20%;animation:flap .18s ease-in-out infinite alternate}
@keyframes flap{to{transform:rotate(-24deg)}}
.parrot-fly .bag{position:absolute;bottom:-14px;left:22px;width:34px;height:34px;opacity:0;animation:bagOn .01s 1.4s forwards}
.parrot-fly .bag svg{width:100%;height:100%}
@keyframes bagOn{to{opacity:1}}
@keyframes parrotFly{0%{left:-22%;top:2%}40%{left:40%;top:42%}56%{left:41%;top:40%}100%{left:118%;top:-30%}}

/* ═══ كارت الكتابة ═══ الخانات، والرد، والكيبورد */
.play-card{padding:14px 12px}
@keyframes slotShake{10%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-3px)}}
/* الرد على آخر محاولة */
.fb{display:flex;align-items:center;gap:11px;justify-content:center;background:var(--bg2);border:2px solid var(--line);
  border-radius:16px;padding:9px 12px;margin-bottom:12px;min-height:60px}
.fb .fb-ic{font-size:26px;line-height:1;flex:none}
.fb b{display:block;font-size:16.5px;font-weight:800;line-height:1.4}
.fb span:not(.fb-ic){display:block;font-size:13px;color:var(--ink-dim);line-height:1.5}
.fb.none{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.fb.none b{color:#ffb3b3}
.fb.some{border-color:#C9962B}
.fb.some b{color:var(--gold-hi)}
.fb.all{border-color:var(--brass-hi);background:var(--tint)}
.fb.all b{color:var(--brass-hi)}
.fb.all span:not(.fb-ic){color:var(--tint-ink);font-weight:800;font-size:14px}
.fb.win{border-color:var(--ok);background:color-mix(in srgb,#0f7a52 26%,var(--bg2))}
.fb.win b{color:#7ef0bd}
.fb.lost b{color:var(--gold-hi)}
.fb.pop{animation:fbPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes fbPop{from{transform:scale(.9);opacity:.3}}
/* زرار سمسم (التطبيق بس) — منقّط زي أزرار المساعدة في باقي الألعاب */
.bonus-help{width:100%;margin-top:12px;min-height:50px;font-size:clamp(14px,4.2vw,16.5px);text-wrap:balance;
  border-color:#F2C55299;color:var(--gold-hi)}
#help-note{margin-top:12px;font-size:13.5px;line-height:1.7}

/* ═══ النتيجة تحت الكيبورد ═══ */
.q-res{margin-top:4px;animation:resIn .42s .1s both}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}}
.qr-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;justify-content:center;
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:8px 10px;font-size:14px}
.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-av{font-size:18px;line-height:1;flex:none}
.qr-pick{color:var(--ink-dim)}
.qr-pt{flex:none;font-family:'Lalezar','Tajawal',sans-serif;font-size:20px;color:var(--ok)}
.qr-pt.zero{color:var(--ink-dim)}
/* جملة سمسم بعد ما ياخد نصيبه — بتظهر بعد ما يطير */
.joke{display:flex;gap:10px;align-items:center;margin-top:10px;background:var(--tint);border:2px solid #F2C55266;
  border-radius:14px;padding:9px 12px}
.q-res.late .joke{animation:resIn .5s 2.5s both}
.jk-ic{font-size:30px;line-height:1;flex:none}
.joke b{display:block;color:var(--gold-hi);font-size:15px;line-height:1.5}
.joke span{display:block;font-size:13.5px;color:var(--tint-ink);line-height:1.5}

/* ═══ سجل المحاولات ═══ الأحدث فوق */
.log-card{padding:14px 12px}
.log-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.log-h h3{font-size:21px}
.log{display:flex;flex-direction:column;gap:6px}
.lg-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;padding:6px 10px}
.lg-row:first-child{animation:pop .25s ease}
.lg-n{flex:none;width:24px;height:24px;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:13px;color:var(--brass-hi)}
.lg-d{display:flex;gap:4px}
.lg-d i,.rw-code i{font-style:normal;width:25px;height:30px;display:grid;place-items:center;border-radius:6px;
  background:linear-gradient(180deg,#eef1f4,#c3cad3);color:#1A1E23;font-family:'Lalezar','Tajawal',sans-serif;font-size:19px;
  line-height:1;padding-top:3px;box-shadow:inset 0 -2px 0 #8e97a4}
.lg-r{margin-inline-start:auto;font-size:13.5px;font-weight:800;color:var(--ink-dim);white-space:nowrap}
.lg-row.some .lg-r{color:var(--gold-hi)}
.lg-row.all{border-color:color-mix(in srgb,var(--brass-hi) 50%,var(--line))}
.lg-row.all .lg-r{color:var(--brass-hi)}
.lg-row.none .lg-r{color:#ff9d9d}
.log-none{font-size:13px;color:var(--ink-dim);text-align:center;padding:8px 4px;line-height:1.7}

/* ═══ الرحلة (طبقة على الشاشة كلها) ═══ الخريطة ← الكنز بيتقفل عليه ← زوم على القفل */
.voyage{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:calc(16px + var(--safe-top)) 16px calc(40px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 50% 30%,#0F3A44,#05141A 70%);opacity:0;transition:opacity .35s;cursor:pointer}
.voyage.show{opacity:1}
.voyage.out{opacity:0;pointer-events:none}
.voy-in{width:100%;max-width:500px;text-align:center}
.voy-title{font-size:30px;color:var(--gold);margin-bottom:12px;text-shadow:0 3px 0 #000a}
.map-card{border-radius:16px;overflow:hidden;transform:rotate(-1.2deg);box-shadow:0 18px 40px #000c,0 0 0 3px #3B230E;
  animation:mapIn .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes mapIn{from{transform:rotate(-8deg) scale(.7);opacity:0}}
.map-svg{display:block;width:100%;height:auto}
.voy-cap{margin-top:16px;color:var(--ink);font-size:16px;font-weight:700;line-height:1.6}
.voy-cap b{color:var(--brass-hi);font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:21px}
.voy-skip{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center;color:var(--ink-dim);font-size:12.5px;opacity:.7}
/* الخريطة: النقط المنقطة، والعلامات، والمركب */
.map-svg .rd{transition:opacity .18s}
.map-svg .rd.far{opacity:.25}
.map-svg .rd.hid{opacity:0}
.map-svg .xm-in{transform-box:fill-box;transform-origin:center}
.map-svg .xm.cur .xm-in{animation:xPulse 1.1s ease-in-out infinite}
.map-svg .xm.hit .xm-in{animation:xHit .55s cubic-bezier(.2,1.6,.4,1)}
.map-svg .xm.todo{opacity:.6}
.map-svg .xm.won{opacity:.4}
.map-svg .xm.lost path{stroke:#7a6a58}
@keyframes xPulse{50%{transform:scale(1.28)}}
@keyframes xHit{0%{transform:scale(1)}40%{transform:scale(1.7) rotate(14deg)}100%{transform:scale(1.15)}}
.map-svg .ship-bob{animation:bob 1.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px) rotate(-3deg)}}
/* مشهد الكنز وهو بيتقفل عليه */
.chest-wrap{width:min(300px,76vw);margin:0 auto;transform-origin:50% 60%}
.chest-svg{display:block;width:100%;height:auto;overflow:visible}
.chest-svg .ch-lid-open,.chest-svg .ch-lid,.chest-svg .ch-treasure,.chest-svg .ch-lock,.chest-svg .ch-glow{transform-box:fill-box}
.chest-svg .ch-lid-open,.chest-svg .ch-lid{transform-origin:50% 100%}
.chest-svg .ch-glow{transform-origin:center}
.chest-svg .sp{transform-box:fill-box;transform-origin:center;animation:twinkle 1.3s ease-in-out infinite}
.chest-svg .sp.s2{animation-delay:.4s}.chest-svg .sp.s3{animation-delay:.8s}
@keyframes twinkle{50%{transform:scale(.3);opacity:.3}}
.intro .ch-treasure{animation:trIntro 1.05s cubic-bezier(.5,0,.85,.6) both}
@keyframes trIntro{0%{transform:translateY(-62px)}30%{transform:translateY(-70px)}45%{transform:translateY(-62px)}100%{transform:translateY(48px) scale(.86)}}
.intro .ch-lid-open{animation:lidFold .3s 1.05s ease-in both}
@keyframes lidFold{to{transform:scaleY(0)}}
.intro .ch-lid{animation:lidClose .34s 1.32s cubic-bezier(.3,1.5,.5,1) both}
@keyframes lidClose{from{transform:scaleY(0)}}
.intro .ch-glow{animation:glowOff .5s 1.15s both}
@keyframes glowOff{to{opacity:0;transform:scale(.5)}}
.intro .ch-lock{animation:lockDrop .5s 1.7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes lockDrop{from{opacity:0;transform:translateY(-70px)}}
.chest-wrap.zoom{animation:zoomLock .6s ease-in forwards}
@keyframes zoomLock{to{transform:scale(3.4);opacity:0}}

/* ═══ شاشة البداية — أرقام القفل ═══ تلات كروت: الرقم كبير وتحته المستوى */
.dg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.dg-chip{display:flex;flex-direction:column;align-items:center;background:var(--bg2);border:2px solid var(--line);border-radius:14px;
  padding:7px 4px 6px;cursor:pointer;transition:transform .06s}
.dg-chip:active{transform:scale(.97)}
.dg-chip b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:30px;line-height:1.15;color:var(--ink)}
.dg-chip span{font-size:12.5px;font-weight:800}
.dg-chip i{font-style:normal;font-size:11px;color:var(--ink-dim)}
.dg-chip.on{border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink)}
.dg-chip.on b{color:var(--brass-hi)}
.dg-chip.on i{color:var(--tint-ink)}

/* ═══ شاشة البداية — كارت رقمك القياسي ═══ */
.rec-box{margin-top:12px;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px 8px}
.rec-h{text-align:center;font-size:13px;font-weight:800;color:var(--brass-hi);margin-bottom:8px}
.rec-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.rt{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:7px 4px;text-align:center;min-width:0}
.rt b{display:block;font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:22px;line-height:1.1;color:var(--ink)}
.rt b i{font-style:normal;font-size:14px;color:var(--ink-dim)}
.rt span{display:block;font-size:11px;color:var(--ink-dim);margin-top:2px}
.rec-f{margin-top:8px;font-size:11.5px;color:var(--ink-dim);text-align:center;line-height:1.6}
.rec-f b{color:var(--ink)}

/* ═══ شاشة النتيجة النهائية ═══ */
.rv-emo{font-size:56px;line-height:1;margin-bottom:4px}
.grade-t{font-size:30px;color:var(--brass-hi);line-height:1.2}
.final-score{margin-top:10px;display:flex;align-items:baseline;justify-content:center;gap:6px}
.final-score b{font-family:'Lalezar','Tajawal',sans-serif;font-size:52px;line-height:1;color:var(--gold-hi);text-shadow:0 3px 0 #000a}
.final-score span{font-size:15px;color:var(--ink-dim);font-weight:800}
.final-sub{font-size:14px;color:var(--ink-dim);margin-top:2px}
.rec-line{margin-top:12px;display:inline-block;background:var(--bg2);border:2px dashed var(--line);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--ink-dim)}
.rec-line b{color:var(--brass-hi)}
.rec-line.new{border-style:solid;border-color:var(--brass-hi);background:var(--tint);color:var(--tint-ink);
  font-weight:800;animation:recPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes recPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.map-end{padding:8px}
.map-end .map-svg{border-radius:12px}
.award .aw-ic{font-size:30px}
/* المراجعة: صندوق صندوق */
.rev-w{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:10px}
.rev-w.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.rev-w.no{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.rw-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rw-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)}
.rw-meta{font-size:11.5px;color:var(--ink-dim)}
.rw-mk{margin-inline-start:auto;font-size:13px;font-weight:800}
.rw-mk.ok{color:var(--ok)}
.rw-mk.no{color:var(--bad)}
.rw-code{display:flex;gap:6px;justify-content:center}
.rw-code i{width:32px;height:38px;font-size:24px}

/* ═══ الشاشات الضيقة ═══ */
@media (max-width:400px){
  .bd-av{font-size:22px}
  .bd-sc{font-size:23px}
  .bd-tl{font-size:18px}
  .final-score b{font-size:44px}
  .grade-t{font-size:26px}
  .padlock{--dh:40px}
  .padlock[data-n="5"]{--dh:36px}
  .won-pts{font-size:36px}
}
@media (max-width:360px){
  .bd-sc{font-size:21px}
  .bd-nm{font-size:11px}
  .round-badge{font-size:11.5px}
  .padlock[data-n="5"] .dials{gap:5px;padding:8px 7px}
  .lg-d i{width:22px;height:27px;font-size:17px}
  .dg-chip b{font-size:26px}
}

/* اللي مشغّل «قلّل الحركة» في نظامه — بنسيبله الألوان ونشيل النطّ */
@media (prefers-reduced-motion:reduce){
  .padlock.tug .shackle,.padlock.tug .lock-body,.fb.pop,.won-pts,.won-scene .chest-svg,.parrot-fly,.rays,.dial.glow,.slots.shake{animation-duration:.01ms}
}

/* ══════════════════════════════════════════════════════════════════════
   القفل الطويل والبكر (١٠-٠٢ ب، طلب المستخدم: «ميبقاش في خانات… قفل طويل فيه ٣ بكرات… أنا اللي أحرّك
   البكرات بإيدي… وتحت البكرات زرار مكتوب فيه افتح»). البكرة نفسها هي مكان الإدخال: بتتسحب لفوق وتحت،
   وفوقها ▲ وتحتها ▼، وكل بكرة ليها شباكها وخط القراية بتاعها. touch-action:none = الصفحة متتسحبش معاها.
   ══════════════════════════════════════════════════════════════════════ */
.padlock.long{width:min(370px,93vw);--dh:48px;--wh:calc(var(--dh) * 2.6)}
.padlock.long[data-n="4"]{--dh:46px}
.padlock.long[data-n="5"]{--dh:42px}
.padlock.long .shackle{width:86%;height:74px;margin-bottom:-26px}
.padlock.long .shackle svg{width:100%;height:100%}
.padlock.long .lock-body{border-radius:24px;padding:10px 12px 14px}
.padlock.long .lock-word{margin:0 0 6px;font-size:14px;opacity:.85}
.padlock.long .dials{display:flex;justify-content:center;gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
.padlock.long .dials::after{display:none}
.reel-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 1 64px;min-width:0}
.nudge{width:100%;height:26px;border:0;border-radius:9px;padding:0;cursor:pointer;
  background:linear-gradient(180deg,#00000014,#00000030);color:#5A3B0A;font-size:12px;line-height:1;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #0000002a;touch-action:manipulation}
.nudge:active{background:#00000045;transform:translateY(1px)}
.nudge:disabled{opacity:.35;cursor:default}
.padlock.long .dial{flex:none;width:100%;height:var(--wh);border-radius:12px;cursor:grab;touch-action:none;outline:none;
  border:3px solid #2A1C0A;box-shadow:inset 0 0 0 1px #0009,0 2px 0 #FFF3C4}
.padlock.long .dial.drag{cursor:grabbing}
/* خط القراية: إطار دهب حوالين الرقم اللي في النص */
.padlock.long .dial::after{content:'';position:absolute;z-index:3;left:-1px;right:-1px;top:50%;height:calc(var(--dh) + 2px);transform:translateY(-50%);
  border-top:2px solid #F6D774;border-bottom:2px solid #F6D774;pointer-events:none;opacity:.9}
.padlock.long .dial.focus{box-shadow:inset 0 0 0 1px #0009,0 0 0 3px var(--ring),0 2px 0 #FFF3C4}
.padlock.long .dial:focus-visible{box-shadow:0 0 0 3px var(--brass-hi)}
.padlock.long .dial .pin{bottom:4px}
.padlock.long .reel span{font-size:calc(var(--dh) * .8)}
/* «افتح» — زرار حديد محفور على القفل نفسه */
.lock-go{display:block;margin:12px auto 0;width:min(240px,72%);height:56px;border-radius:16px;cursor:pointer;
  border:2px solid #1E1408;background:linear-gradient(180deg,#5A4020,#2E200C);color:var(--gold-hi);
  font-size:30px;line-height:1;padding-top:4px;letter-spacing:1px;text-shadow:0 2px 0 #0008;
  box-shadow:inset 0 2px 0 #ffffff26,inset 0 -3px 0 #0006,0 6px 0 #1A1006,0 10px 16px #0007;transition:transform .06s,box-shadow .06s}
.lock-go:active{transform:translateY(5px);box-shadow:inset 0 2px 0 #ffffff26,0 1px 0 #1A1006}
.lock-go:disabled{opacity:.55;cursor:default}
.lock-go:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}
.fb.some{border-color:color-mix(in srgb,var(--ok) 70%,var(--line))}
.fb.some b{color:#7ef0bd}
.lg-row.some .lg-r{color:#7ef0bd}
.vault{padding-top:26px;padding-bottom:22px}
@media (max-width:400px){
  .padlock.long{--dh:44px}
  .padlock.long[data-n="5"]{--dh:38px}
  .reel-col{gap:4px}
  .nudge{height:24px}
  .lock-go{height:52px;font-size:27px}
}
@media (max-width:360px){
  .padlock.long .dials{gap:6px}
  .padlock.long[data-n="5"] .dials{gap:4px}
}

/* ═══ القفل رفيع وطويل (١٠-٠٢ ج، طلب المستخدم: «تخلّي القفل رفيع شوية وطويل والحديدة المقوّسة باينة بتاعة القفل
   وطويلة برضو») ═══ عرض الجسم على قد البكر بالظبط، وأطول (بكر أطول + مسافة تحت «افتح»)، والحلقة U طويلة
   رجليها نازلين ورا الجسم — اترسمت بـpreserveAspectRatio=none + non-scaling-stroke عشان تمتد من غير ما تتخن. */
.padlock.long{--wh:calc(var(--dh) * 3)}
.padlock.long[data-n="3"]{width:min(234px,78vw)}
.padlock.long[data-n="4"]{width:min(292px,86vw)}
.padlock.long[data-n="5"]{width:min(346px,92vw)}
.padlock.long .shackle{width:72%;height:190px;margin-bottom:-62px}
.padlock.long[data-n="4"] .shackle{width:64%}
.padlock.long[data-n="5"] .shackle{width:56%}
.padlock.long .shackle svg{filter:drop-shadow(0 5px 0 #0007) drop-shadow(0 0 1px #0009)}
.padlock.long .lock-body{border-radius:20px 20px 30px 30px;padding:20px 12px 18px}
.padlock.long .lock-word{margin:0 0 10px}
.padlock.long .lock-go{margin-top:16px;width:86%}
.lock-foot{display:flex;justify-content:center;gap:22px;margin-top:16px}
.lock-foot i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF4C2,#8A5D0E 70%);box-shadow:0 1px 0 #0007}
.padlock.long.open .shackle{transform:translateY(-46px)}
.vault{padding-top:20px}
@media (max-width:400px){ .padlock.long .shackle{height:172px;margin-bottom:-58px} }

/* ═══ عدد المحاولات (١٠-٠٢ د) ═══ عدّاد «فاضل كام» قصاد الكنز، وبيحمرّ وينبض من 3. ولما يخلصوا: القفل بيغمق
   ويحمرّ، وجنزير بالعرض، وختم «مقفول خالص» */
.tries-chip{position:absolute;top:10px;inset-inline-end:10px;z-index:5;display:flex;align-items:center;gap:5px;
  background:#000000b0;border:1.5px solid #ffffff40;color:var(--ink);border-radius:999px;padding:2px 11px;
  font-weight:800;font-size:13px;box-shadow:0 3px 0 #0006}
.tries-chip b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:18px;line-height:1.3;color:var(--brass-hi)}
.tries-chip.warn{border-color:var(--bad);color:#ffb3b3;animation:triesWarn 1s ease-in-out infinite}
.tries-chip.warn b{color:#ff8f8f}
.tries-chip.bump{animation:tvCut .6s ease}
.tries-chip.warn.bump{animation:tvCut .6s ease,triesWarn 1s .6s ease-in-out infinite}
@keyframes triesWarn{50%{box-shadow:0 0 0 4px #ff5c5c44,0 3px 0 #0006}}
/* ═══ وقت المحاولة (١٠-٠٤) ═══ تحت «فاضل كام»، وبيحمرّ وينبض في آخر ٥ ثواني */
.time-chip{position:absolute;top:48px;inset-inline-end:10px;z-index:5;display:flex;align-items:center;gap:5px;
  background:#000000b0;border:1.5px solid #ffffff40;color:var(--ink);border-radius:999px;padding:2px 11px;
  font-weight:800;font-size:13px;box-shadow:0 3px 0 #0006;min-width:58px;justify-content:center}
.time-chip b{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400;font-size:18px;line-height:1.3;color:var(--brass-hi);font-variant-numeric:tabular-nums}
.time-chip.warn{border-color:var(--bad);color:#ffb3b3;animation:triesWarn 1s ease-in-out infinite}
.time-chip.warn b{color:#ff8f8f}
.vault.pre .time-chip{opacity:0}
.padlock.jammed .lock-body{filter:saturate(.35) brightness(.62) sepia(.3);transition:filter .6s}
.padlock.jammed .shackle{filter:brightness(.6)}
.padlock.jammed .dial{border-color:#5a1010}
.jam-chain{position:absolute;z-index:6;left:-10%;right:-10%;top:21%;height:22px;transform:rotate(-8deg);pointer-events:none;
  background:repeating-linear-gradient(90deg,#9AA3AF 0 16px,#5E6773 16px 18px,transparent 18px 22px);
  border-radius:6px;box-shadow:0 4px 8px #000a;animation:chainIn .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes chainIn{from{transform:rotate(-8deg) scaleX(0)}}
.jam-stamp{position:absolute;z-index:7;left:50%;top:82%;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;
  font-size:34px;line-height:1.1;color:#ff6b6b;border:4px solid #ff6b6b;border-radius:14px;padding:6px 16px 2px;
  background:#2a0a0acc;text-shadow:0 2px 0 #000a;white-space:nowrap;animation:stampIn .5s .15s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stampIn{from{transform:translate(-50%,-50%) rotate(-12deg) scale(2.2);opacity:0}}
/* «+0» و«+1000» كانوا بيطلعوا «0+» في الاتجاه العربي */
.qr-pt{direction:ltr;unicode-bidi:isolate}

/* ═══ المستوى السهل (١٠-٠٨) ═══ الرقم اللي جبته صح: بكرته بتتثبّت بإطار أخضر وعلامة ✓ (دهبي سمسم بيفضل للمساعدة)،
   ومربعه أخضر في سجل المحاولات. */
.dial.hit,.padlock.long .dial.hit{border-color:#34D399;cursor:default;box-shadow:inset 0 0 0 2px #34D399,0 0 0 3px #34D39999,0 0 16px #34D39988}
.padlock.long .dial.hit::after{border-color:#34D399}
.dial.hit .pin{display:block;font-size:0}
.dial.hit .pin::after{content:'✓';display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#10B981;color:#fff;
  font:900 11px/1 'Tajawal',sans-serif;box-shadow:0 1px 2px #0008}
.dial.hit.glow{animation:dialHit 1.1s ease 2}
@keyframes dialHit{50%{box-shadow:inset 0 0 0 2px #fff,0 0 0 5px #34D399,0 0 28px #34D399}}
.lg-d i.ok{background:linear-gradient(180deg,#bff3d8,#6fd9a6);color:#053d22;box-shadow:inset 0 -2px 0 #1c8a58,0 0 0 2px #34D399}
@media (prefers-reduced-motion:reduce){.dial.hit.glow{animation-duration:.01ms}}

/* ═══ سمسم بيثبّت الرقم (١٠-٠٨) ═══ بعد إعلان المكافأة: بيطير من اليمين لحد البكرة، بينقرها، وبيكمّل شمال. */
.sim-fix{position:fixed;z-index:70;width:60px;height:60px;pointer-events:none;
  transform:translate(var(--x),var(--y));animation:simIn .95s cubic-bezier(.25,.8,.35,1) both}
.sim-fix .parrot-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 6px #0009)}
.sim-fix .pr-wing{transform-box:fill-box;transform-origin:20% 20%;animation:flap .16s ease-in-out infinite alternate}
.sim-fix.peck .pr-wing{animation-duration:.55s}
.sim-fix.peck .parrot-svg{animation:simPeck .36s ease-in-out 3}
.sim-fix.away{animation:simOut .7s ease-in both}
.sim-fix.away .pr-wing{animation-duration:.16s}
.sim-fix .sf-say{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%) scale(0);transform-origin:50% 100%;white-space:nowrap;
  background:#fff;color:#10202A;font:800 13px/1.3 'Tajawal',sans-serif;padding:5px 10px;border-radius:12px;box-shadow:0 4px 12px #0007;
  transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.sim-fix.peck .sf-say{transform:translateX(-50%) scale(1)}
.sim-fix.away .sf-say{transform:translateX(-50%) scale(0)}
@keyframes simIn{from{transform:translate(calc(100vw + 30px),calc(var(--y) - 170px)) rotate(-16deg)}}
@keyframes simOut{to{transform:translate(-110px,calc(var(--y) - 210px)) rotate(12deg)}}
@keyframes simPeck{50%{transform:translate(-3px,13px) rotate(-14deg)}}
@media (prefers-reduced-motion:reduce){.sim-fix,.sim-fix .parrot-svg,.sim-fix .pr-wing{animation-duration:.01ms}}