/* ============================================================
   وناااسة — Dashboard v2
   Soft neo-brutalism + Apple-grade micro-motion · RTL-first
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  /* Warm cream background with barely-there noise + far orbs for depth */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(249,216,46,.14) 0%, transparent 40%),
    radial-gradient(circle at 92% 12%, rgba(198,74,34,.06) 0%, transparent 36%),
    radial-gradient(circle at 88% 94%, rgba(43,83,159,.05) 0%, transparent 40%);
  background-attachment: fixed;
}
/* 🔤 [2026-09-30 — المالك: «الهيدر يختلف في صفحة المتجر وحسابي … مكان التذاكر وشعار وناااسة»] كان هنا letter-spacing:-.01em
   وwn-polish.css يلغيه بـ0 !important — وwn-polish تحمّله ٦ صفحات فقط، فشعارُ وناااسة بالمتجر وحسابي (وكل صفحةٍ بلاها) أضيقُ
   ١٫٥px من الداشبورد. قيمةٌ واحدة هنا بالمصدر بلا تعقّب، والإلغاء بwn-polish انشال. */
.brand-font { font-family: 'Blabeloo', 'Tajawal', sans-serif; font-weight: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ── Hard-lock to site (warm) theme — dashboard is a site-theme surface */
:root,
html[data-theme="site"],
html[data-theme="game"] {
  --t-primary:    #c64a22;
  --t-cta:        #f9d82e;
  --t-page:       #faf9f7;
  --t-surface:    #ffffff;
  --t-cream:      #f2eadf;
  --t-link:       #2b539f;
  --t-success:    #296230;
  --t-ink:        #2c3e50;
  --t-muted:      #4a4045;
  --bg:           #faf9f7;
  --bg-card:      #ffffff;
  --ink:          #2c3e50;
  --ink-muted:    #4a4045;
}

/* ── Tokens shared across components */
:root {
  --bd: 2.5px solid var(--ink);
  --bd-thick: 3px solid var(--ink);
  --sh-1: 3px 3px 0 var(--ink);
  --sh-2: 5px 5px 0 var(--ink);
  --sh-3: 8px 8px 0 var(--ink);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --wrap: 1240px;
  --pad-x: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================ HEADER */
.wa-hdr {
  position: sticky; top: 0; z-index: 80;
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;   /* الترويسة تملك خطّها — كانت ترث خطّ جسم كل صفحة (قائمةُ احتياطٍ تختلف بأربع صفحات) */
  background: rgba(250, 249, 247, .78);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1.5px solid rgba(44, 62, 80, .12);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.wa-hdr.is-scrolled {
  box-shadow: 0 6px 18px -12px rgba(44, 62, 80, .3);
  border-bottom-color: rgba(44, 62, 80, .22);
}
.wa-hdr-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex; align-items: center; gap: 20px;
}
.wa-logo-wrap { flex-shrink: 0; }
.wa-logo {
  font-size: clamp(26px, 3vw, 32px);
  color: var(--t-primary);
  display: inline-block;
  transition: transform .3s var(--ease-spring);
}
.wa-logo-wrap:hover .wa-logo { transform: rotate(-2deg) scale(1.05); }

.wa-nav {
  display: flex; gap: 4px;
  margin-right: 12px; /* RTL: gap from logo */
}
.wa-nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-muted);
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.wa-nav-link:hover { color: var(--ink); background: rgba(44, 62, 80, .05); }
.wa-nav-link.is-active { color: var(--ink); }
.wa-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 3px; border-radius: 2px;
  background: var(--t-cta);
}

.wa-hdr-actions {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: 10px;
}
/* 👤 [2026-09-30 — المالك: «تاكد كل شي موحد ١٠٠٪؟»] أزرار الضيف والمستخدم بالترويسة من مصدرٍ واحد لكل الصفحات: كانت بترويسة
   الداشبورد وحدها («دخول» أبيض + «أنشئ حساب» أصفر) وباقي الصفحات «دخول» أصفر وحده. الماركب بـwa-shell.js (GUEST_ACTIONS_HTML)
   والأنماط هنا مقصورةٌ على الترويسة — `.btn-sm` اسمٌ عامّ تستعمله ألعابٌ بأشكالها. */
.wa-user-actions, .wa-guest-actions { display: flex; align-items: center; gap: 10px; }
.wa-user-actions[hidden], .wa-guest-actions[hidden] { display: none; }
.wa-guest-actions .btn-sm { min-height: 44px; touch-action: manipulation; padding: 8px 16px; font-size: 14px; font-weight: 800; border-radius: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink, #2d3319); transition: transform 80ms ease, box-shadow 80ms ease; }   /* ٤٤ = هدف اللمس — كانت تأخذه من wn-polish بصفحاته وحدها فتصير ٤١٫٧ بغيرها */
.wa-guest-actions .btn-sm.btn-pri { background: var(--cta, #f4c93b); color: var(--ink, #2d3319); box-shadow: 3px 3px 0 var(--ink, #2d3319); }
.wa-guest-actions .btn-sm.btn-ghost { background: #fff; color: var(--ink, #2d3319); box-shadow: 3px 3px 0 var(--ink, #2d3319); }
.wa-guest-actions .btn-sm:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink, #2d3319); }
.wa-guest-actions .btn-sm:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink, #2d3319); }

/* ============================================================
   Skeleton Screens — Header placeholder أثناء تحميل auth state
   (نفس فلسفة Facebook/LinkedIn: shimmer animation تشبه شكل المحتوى)
   ============================================================ */
.wa-hdr-skeleton {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: 10px;
  transition: opacity .2s ease;
}
.wa-hdr-skeleton[hidden] { display: none; }
.wa-skel {
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 75%);
  background-size: 200% 100%;
  animation: wa-shimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
}
.wa-skel--pill   { width: 90px;  height: 38px; border-radius: 999px; }
.wa-skel--circle { width: 38px;  height: 38px; border-radius: 50%; }
.wa-skel--avatar { width: 110px; height: 38px; border-radius: 14px; }
@keyframes wa-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* لما المستخدم يقدّر يفضّل reduce motion، اوقف الـ shimmer */
@media (prefers-reduced-motion: reduce) {
  .wa-skel { animation: none; background: rgba(0,0,0,.08); }
}

/* Tickets chip — star of the header */
.wa-tickets {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border: var(--bd);
  background: var(--t-cta);
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  position: relative;
}
.wa-tickets:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-2); }

/* ══ التذكرة المثقوبة — الشكل المعتمد بكل الصفحات (قرار المالك 2026-08-28؛
   كانت في wn-polish.css فتفرّقت الكبسولة بين الصفحات) ══ */
/* ── ⑧ التذكرة المثقوبة: ثقبا قَصّ حقيقيان + ظل يتبع الشكل (drop-shadow يحترم الـmask) ── */
  .wa-tickets, .gcard-price {
    -webkit-mask:
      radial-gradient(circle 7px at 0 50%,   transparent 6.5px, #000 7px),
      radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 7px at 0 50%,   transparent 6.5px, #000 7px),
      radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px);
    mask-composite: intersect;
    box-shadow: none !important;
    filter: drop-shadow(3px 3px 0 var(--ink, #2c3e50));
  }
  .gcard-price { filter: drop-shadow(2px 2px 0 var(--ink, #2c3e50)); }
  .wa-tickets { padding-inline: 18px !important; }
  .wa-tickets-label {
    border-inline-start: 2px dashed rgba(44, 62, 80, .4);
    padding-inline-start: 9px; margin-inline-start: 7px;
  }

.wa-tickets:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.wa-tickets svg { width: 18px; height: 18px; flex-shrink: 0; }
.wa-tickets-count { font-size: 16px; font-variant-numeric: tabular-nums; }
.wa-tickets-label { font-size: 13px; opacity: .75; font-weight: 700; }
/* ➕ [2026-08-03] الصليب **مرسومٌ هندسياً** لا حرفاً.
   كان «+» نصّاً، وموضعُ الحرف داخل مربّع الخط في Tajawal غير متوسّطٍ رأسياً —
   فقِيس بالبكسل: مرتفعٌ **١٫٧٥px** في دائرة ٢٢px (٨٪ من قطرها، ويُلاحَظ بالعين).
   و`line-height:1` وتغيير الـflex لم يحرّكاه، لأن العلّة في مقاييس الخط لا في
   الصندوق. الشريطان يتوسّطان بالشبكة توسّطاً هندسياً لا يتأثّر بأي خط، وطولهما
   نسبةٌ من القطر فيصحّ على مقاسي الجوال (١٨px) والديسكتوب (٢٢px) معاً.
   (الحرف يبقى في الـHTML — `aria-hidden` أصلاً — ويُخفى بـfont-size:0.) */
.wa-tickets-plus {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--ink); color: var(--t-cta);
  border-radius: 50%;
  font-weight: 900;
  margin-inline-start: 4px;
  font-size: 0;                       /* يخفي الحرف النصّي */
  line-height: 0;                     /* لا صندوقَ سطرٍ يزيد ارتفاع العنصر */
  position: relative;                 /* مرجعُ الشريطين المطلقين */
  /* 🔒 عنصرُ فلكس يقبل الانضغاط افتراضياً (flex-shrink:1) — فعلى شاشةٍ ضيّقة
     أو برصيدٍ طويل الرقم تنضغط الدائرة وتصير بيضاوية. تثبيتها يمنع ذلك. */
  flex-shrink: 0;
  transition: transform .3s var(--ease-spring);
}
/* ⚠️ `grid-area:1/1` وحده لم يكفِ: العقدة النصّية «+» **عنصرُ شبكةٍ ثالث** حتى
   بحجم صفر، فتفتح صفّاً ثانياً يدفع الصليب لأعلى (رُئي بالعين: مرتفعٌ في الثلث
   الأعلى). الوضع المطلق يُخرج الشريطين من التدفّق كلياً فيتوسّطان هندسياً مهما
   كان في العنصر من محتوى. */
.wa-tickets-plus::before,
.wa-tickets-plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 1px;
}
.wa-tickets-plus::before { width: 55%; height: 2px; }
.wa-tickets-plus::after  { width: 2px; height: 55%; }
.wa-tickets:hover .wa-tickets-plus { transform: rotate(90deg) scale(1.1); }

.wa-icbtn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border: var(--bd);
  background: #fff;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-icbtn:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-2); }
.wa-icbtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.wa-icbtn svg { width: 18px; height: 18px; }

.wa-profile-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  background: #fff;
  border: var(--bd);
  border-radius: 999px;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-profile-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-2); }
.wa-profile-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
/* [بلاغ المالك 17:24 «العرض يختلف الشكل عن الباقيات»] أفتار الترويسة كان
   قرصاً أحمر مصمتاً بلا حدّ، بينما بقيةُ الصفحات على هويّة البيت: حدٌّ حبريّ
   وخلفيةٌ فاتحة وحرفٌ بالحبر (`.ac-avatar` بحسابي · `.fr-av` بالأصدقاء ·
   `.havatar` بصفحة اللاعب). التوحيد هنا بنفس نسبها مصغّرةً لقياس الترويسة. */
.wa-avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  /* [بلاغ المالك 20:55] «خلّ اللون أحمر مب أصفر — أجمل، ووحّده على الأحمر» */
  background: var(--t-primary); color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 900; font-size: 14px;
  font-family: 'Blabeloo', sans-serif;
  box-sizing: border-box;
  /* 🎭 شخصيةُ اللاعب تُرسم خلفيةً (WNAvatar.paint) — القرصُ يملأ الدائرة والحدُّ من هنا */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
}
.wa-profile-greet { font-weight: 700; font-size: 14px; white-space: nowrap; }
.wa-profile-chev { width: 14px; height: 14px; opacity: .55; }

/* ============================================ MAIN LAYOUT */
.wa-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--pad-x) 80px;
  display: flex; flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}

/* ============================================ HERO */
.wa-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding-top: clamp(12px, 3vw, 32px);
}
.wa-hero-left { min-width: 0; }

.wa-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 22px;
}
.wa-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--t-success);
  position: relative;
}
.wa-eyebrow-dot::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--t-success);
  opacity: .3;
  animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(.5); opacity: .6; }
  100% { transform: scale(2); opacity: 0; }
}

.wa-hero-title {
  font-size: clamp(48px, 7vw, 88px);
  line-height: .95;
  color: var(--ink);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}
.wa-hero-word {
  display: inline-block;
  position: relative;
  color: var(--t-primary);
  transform: rotate(-2deg);
  margin-inline-start: 8px;
  padding: 2px 18px 6px;
  background: var(--t-cta);
  border: var(--bd-thick);
  border-radius: 18px;
  box-shadow: var(--sh-2);
  animation: wiggle 4s var(--ease-spring) infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(1deg); }
}
.wa-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: 28px;
  line-height: 1.7;
  text-wrap: pretty;
}

.wa-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 26px;
}

.btn-pri {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--t-cta);
  border: var(--bd-thick);
  border-radius: 14px;
  box-shadow: var(--sh-2);
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn-pri:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-3); }
.btn-pri:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-pri svg { width: 18px; height: 18px; transition: transform .3s var(--ease-spring); }
/* [قرار المالك 2026-08-30] زرُّ «العب» بصفحة اللعبة أخضر، ومحتواه **بالنص**
   (كان يلتصق بالحافة: `.btn-pri` بلا `justify-content`)، وبنفس محاذاة
   `vertical-align` المستقلّة عن الخطّ. خاصٌّ بهذا الزرّ لا بكل `.btn-pri`. */
/* ومحتواه **بالنص** (طلب المالك): `.btn-pri` بلا `justify-content` فكان
   يلتصق بحافة الزرّ الممتدّ. */
#gd-play-btn {
  justify-content: center;
  background: var(--t-success, #296230) !important;
  color: #fff !important;
}
#gd-play-btn svg { width: 13px; height: 13px; color: currentColor; position: relative; top: 1.5px; }
.btn-pri:hover svg { transform: translateX(-3px); }
.btn-pri--sm { padding: 9px 16px; font-size: 14px; }
.btn-pri--sm svg { width: 14px; height: 14px; }

.btn-sec {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: #fff;
  border: var(--bd);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-sec:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-2); }
.btn-sec svg {
  width: 22px; height: 22px;
  color: var(--t-primary);
  background: var(--t-cta);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 5px 5px 5px 4px;
  flex-shrink: 0;
}

.wa-hero-chips {
  display: flex; flex-wrap: wrap; gap: 18px;
}
.wa-hero-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 600;
}
.chip-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }

/* ── Hero mascot — Wanaaasah character */
.wa-hero-mascot {
  position: relative;
  display: grid; place-items: center;
  min-height: 380px;
  isolation: isolate;
}
.wa-mascot-img {
  width: 100%; max-width: 360px;
  height: auto;
  display: block;
  filter: drop-shadow(6px 6px 0 var(--ink));
  animation: wa-mascot-bob 4s var(--ease) infinite, wa-mascot-drift 11s var(--ease-spring) infinite;
  position: relative; z-index: 2;
  will-change: transform;
}
@keyframes wa-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  25%      { transform: translateY(-14px) rotate(2deg) scale(1.02); }
  50%      { transform: translateY(-6px) rotate(-1deg) scale(1); }
  75%      { transform: translateY(-18px) rotate(3deg) scale(1.03); }
}
@keyframes wa-mascot-drift {
  0%, 100% { translate: 0 0; }
  33%      { translate: 16px 6px; }
  66%      { translate: -14px -8px; }
}
@media (prefers-reduced-motion: reduce) { .wa-mascot-img { animation: none; } }
.wa-mascot-star {
  position: absolute;
  font-size: 36px;
  color: var(--t-cta);
  filter: drop-shadow(2px 2px 0 var(--ink));
  z-index: 3;
  pointer-events: none;
  animation: spin 8s linear infinite;
}
.wa-mascot-star--1 { top: 4%;   right: 0%;  font-size: 44px; }
.wa-mascot-star--2 { top: 28%;  left: -2%;  font-size: 36px; animation-direction: reverse; animation-duration: 10s; color: var(--t-primary); }
.wa-mascot-star--3 { bottom: 8%; right: 6%; font-size: 30px; animation-duration: 12s; }
/* 🎨 [2026-09-13] النجومُ SVG داخل سطر الحرف الذي حلّت محلّه: صندوقُه نفسه (فمركزُ الدوران ثابت) وحبرُه نفسه — مقيسان بالبكسل بويب-كِت.
   الأولى والثالثة «✦» والثانية «★» */
.wa-mascot-star svg { width: .68em; height: .68em; margin: 0 -.04em; vertical-align: -.07em; }
.wa-mascot-star--2 svg { width: 1.02em; height: 1.02em; margin: 0; vertical-align: -.15em; }
@media (max-width: 1040px) {
  .wa-hero-mascot { display: none; }
}

/* ── Empty state */
.wa-empty {
  text-align: center;
  padding: clamp(40px, 8vw, 64px) 24px;
  border: var(--bd-thick);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-2);
  max-width: 520px;
  margin: 32px auto 0;
}
.wa-empty-mascot {
  width: 140px; height: 140px;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(4px 4px 0 var(--ink));
  animation: wa-empty-tilt 3s ease-in-out infinite;
}
@keyframes wa-empty-tilt {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .wa-empty-mascot { animation: none; } }
.wa-empty-title {
  font-family: 'Blabeloo', sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 900;
}
.wa-empty-text {
  font-size: 14.5px;
  color: var(--ink-muted);
  margin-bottom: 22px;
  line-height: 1.55;
}
.wa-empty-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--t-cta);
  border: var(--bd-thick);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  font-family: 'Blabeloo', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-empty-cta:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-2); }
.wa-empty-tips {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px dashed rgba(0,0,0,.1);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.wa-empty-tip { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
/* 🎨 [2026-09-13 «بدون إيموجيات فقط SVG»] كان ::before بإيموجي المصباح — صار SVG بالعلامة نفسها وبعرضه المقيس بويب-كِت (١٫٤٤em) فلا يتحرّك النصّ */
.wa-empty-tip-ic { width: 1.44em; height: 1.25em; flex: none; }

/* Quick stats strip */
.wa-quickstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
@media (max-width: 720px) { .wa-quickstats { grid-template-columns: repeat(2, 1fr); } }
.wa-qstat {
  background: var(--surface);
  border: var(--bd);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease-spring);
}
.wa-qstat:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-2); }
.wa-qstat-num {
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1; color: var(--t-primary);
  letter-spacing: -.02em; margin-bottom: 6px;
}
.wa-qstat-lbl { font-size: 13px; font-weight: 700; color: var(--ink-muted); }

/* ── Hero collage: 4 real game tiles, scattered + rotated */
.wa-hero-collage {
  position: relative;
  aspect-ratio: 1 / .95;
  min-height: 340px;
  isolation: isolate;
}
.hc-tile {
  position: absolute;
  border: var(--bd-thick);
  border-radius: var(--r-md);
  background: var(--t-cream);
  overflow: hidden;
  box-shadow: var(--sh-2);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease);
}
.hc-tile img {
  display: block;
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.hc-tile--a { /* big anchor — millionaire */
  top: 2%; right: 2%;
  width: 58%; height: 54%;
  transform: rotate(-3deg);
  z-index: 3;
  animation: float-tile 9s var(--ease) infinite;
}
.hc-tile--b { /* mafia */
  top: 6%; left: 4%;
  width: 42%; height: 38%;
  transform: rotate(4deg);
  z-index: 2;
  animation: float-tile 7s var(--ease) infinite .8s;
}
.hc-tile--c { /* darajat */
  bottom: 4%; right: 10%;
  width: 46%; height: 42%;
  transform: rotate(5deg);
  z-index: 2;
  animation: float-tile 8s var(--ease) infinite .4s;
}
.hc-tile--d { /* algham */
  bottom: 2%; left: 2%;
  width: 42%; height: 44%;
  transform: rotate(-4deg);
  z-index: 3;
  animation: float-tile 10s var(--ease) infinite 1.2s;
}
.hc-tile:hover {
  transform: rotate(0) scale(1.04);
  box-shadow: var(--sh-3);
  z-index: 5;
}
@keyframes float-tile {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

.hc-sticker {
  position: absolute;
  font-size: 28px;
  color: var(--t-primary);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 var(--ink));
  animation: spin 10s linear infinite;
}
.hc-sticker { top: 30%; right: -2%; }
.hc-sticker--2 {
  top: auto; right: auto;
  bottom: 28%; left: -4%;
  font-size: 22px;
  color: var(--t-cta);
  animation-duration: 14s;
  animation-direction: reverse;
}

/* ============================================ STATS */
.wa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 22px;
  background: #fff;
  border: var(--bd-thick);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.wa-stat {
  text-align: center;
  padding: 8px 4px;
  position: relative;
}
.wa-stat + .wa-stat::before {
  content: '';
  position: absolute;
  right: -7px; /* RTL: divider sits on the right of subsequent stats */
  top: 15%; bottom: 15%;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0, var(--ink) 4px, transparent 4px, transparent 8px);
  opacity: .3;
}
.wa-stat-num {
  display: block;
  font-family: 'Blabeloo', sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--t-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.wa-stat-lbl {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 700;
}

/* ============================================ RESUME BANNER */
.wa-resume {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fff6d9 0%, #ffeab8 100%);
  border: var(--bd-thick);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.wa-resume.is-closed { display: none; }
.wa-resume-bar {
  position: absolute;
  bottom: 0; right: 0; /* RTL */
  height: 4px;
  width: 48%;
  background: var(--t-primary);
  animation: pulse-bar 2s var(--ease) infinite;
}
@keyframes pulse-bar {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
.wa-resume-ic {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--t-cta);
  border: var(--bd);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  flex-shrink: 0;
  overflow: hidden;
}
.wa-resume-ic img { width: 100%; height: 100%; object-fit: cover; }
.wa-resume-body { flex: 1; min-width: 0; }
.wa-resume-eyebrow {
  display: inline-block;
  padding: 2px 8px;   /* [بلاغ المالك 2026-09-04] «صغّر كبسولتها شوي عشان الصورة تاخذ راحتها» */
  background: var(--t-primary); color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.wa-resume-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 2px;
}
.wa-resume-sub { font-size: 13.5px; color: var(--ink-muted); font-weight: 600; }

.wa-resume-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.wa-resume-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 22px;
  color: var(--ink-muted);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.wa-resume-close:hover { background: rgba(44,62,80,.08); color: var(--ink); transform: rotate(90deg); }

/* Inline resume card — lives inside hero column, not a standalone band */
.wa-resume-inline {
  margin-top: 22px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--t-cream);
  border: var(--bd);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  position: relative;
  max-width: 540px;
}
.wa-resume-inline::before {
  content: none;
}
.wa-resume-inline .wa-resume-ic {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-sm);
  border: var(--bd);
  overflow: hidden;
}
/* [بلاغ المالك 2026-09-04] صورة اللعبة العريضة كانت تُقصّ (cover) — تظهر كاملةً على خلفية الكرت */
.wa-resume-inline .wa-resume-ic img { width: 100%; height: 100%; object-fit: contain; background: var(--t-cta); }
.wa-resume-inline .wa-resume-body { flex: 1; min-width: 0; }
.wa-resume-inline .wa-resume-eyebrow {
  font-size: 10.5px; font-weight: 800;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.wa-resume-inline .wa-resume-title {
  font-size: 16px; font-weight: 900; color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.2;
}
.wa-resume-inline .wa-resume-sub {
  font-size: 12.5px; color: var(--ink-muted); font-weight: 600;
}
.wa-resume-inline.is-closed { display: none; }
/* 🐞 [بلاغ مجرّب 2026-08-28 عبر المالك] ثلاث رتوش على بطاقة «متوقفة · تكمل؟»:
   ① الشريط الأحمر (بقية البانر القديم) كان يطلع خارج حدود الكرت — انحذف هنا.
   ② «متوقفة · تكمل؟» كانت تنكسر سطرين — سطرٌ واحدٌ دائماً وزر «أكمل» أصغر.
   ③ صورة اللعبة تملأ ارتفاع الكرت لحدوده. */
.wa-resume-inline .wa-resume-bar { display: none; }
.wa-resume-inline { overflow: hidden; padding-block: 0; padding-inline-start: 0; }
.wa-resume-inline .wa-resume-ic {
  width: 84px; align-self: stretch; height: auto; min-height: 76px;
  border: none; border-inline-end: var(--bd); border-radius: 0;
}
.wa-resume-inline .wa-resume-body { padding-block: 12px; }
.wa-resume-inline .wa-resume-eyebrow { white-space: nowrap; }
.wa-resume-inline .btn-pri--sm { padding: 8px 18px; font-size: 13.5px; flex-shrink: 0; }

/* ============================================ SECTION HEADERS */
.wa-section-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.wa-section-title {
  font-family: 'Blabeloo', sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.wa-section-sub {
  font-size: 14.5px;
  color: var(--ink-muted);
  font-weight: 500;
}
.wa-section-more {
  padding: 8px 16px;
  background: #fff;
  border: var(--bd);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-section-more:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-2); }

/* ============================================ RECENTS STRIP */
.wa-recents-scroll {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 16px;
  margin: 0 calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.wa-recents-scroll::-webkit-scrollbar { display: none; }
.wa-recent {
  flex: 0 0 auto;
  width: 172px;
  padding: 14px;
  background: #fff;
  border: var(--bd);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  scroll-snap-align: start;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-recent:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-2); }
.wa-recent-art {
  width: 100%; aspect-ratio: 1.4;
  background: var(--c, #f9d82e);
  border: 2px solid var(--ink);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 44px;
  margin-bottom: 10px;
  filter: drop-shadow(2px 2px 0 rgba(44,62,80,.3));
}
.wa-recent-name { font-weight: 900; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.wa-recent-meta { font-size: 12px; color: var(--ink-muted); font-weight: 600; }

/* ============================================ FILTERS & SORT */
.wa-sort {
  display: inline-flex;
  background: #fff;
  border: var(--bd);
  border-radius: 999px;
  box-shadow: var(--sh-1);
  padding: 3px;
}
.wa-sort-btn {
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-muted);
  border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.wa-sort-btn.is-active {
  background: var(--ink);
  color: #fff;
}

.wa-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.wa-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s var(--ease);
  box-shadow: 2px 2px 0 var(--ink);
}
.wa-filter:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-2); }
.wa-filter-count {
  font-size: 12px;
  font-style: normal;
  padding: 1px 7px;
  background: var(--t-cream);
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 800;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.wa-filter.is-active {
  background: var(--t-cta);
  box-shadow: 3px 3px 0 var(--ink);
}
.wa-filter.is-active .wa-filter-count { background: var(--ink); color: var(--t-cta); }

/* ============================================ GAMES GRID */
.wa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* Email-verify + free-gift banners */
.wa-verify-banner, .wa-freegift-banner {
  /* الإكس مثبَّتٌ بالزاوية العليا ⇒ الأب نسبيّ وحشوةُ الطرف تحجز مكانه (تعديل المالك 2026-09-06) */
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  padding-inline-end: 46px;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--ink);
  /* 🩸 [2026-09-09] كان هنا `margin-bottom: 24px` — و`.wa-main` فليكسٌ عموديّ
     بـ`gap: clamp(36px,5vw,64px)`. الهامشُ يُضاف **فوق** الفجوة لا بدلاً منها،
     فصار بين البانرين ٨٠px مقيسة: تباعدُ أقسامٍ بين إشعارَين. الفجوةُ وحدها تكفي. */
}
.wa-verify-banner { background: #fff8e0; }
/* 🎨 [تعديل المالك 2026-09-06 «الأصفر ما يكون هو الأساس، خل اللون أبيض»]: الأبيض أساسٌ
   والأصفر يبقى لهجةً بزرّ الحبر وحده — نفس هيئة بقيّة الكروت. */
.wa-freegift-banner { background: var(--t-surface); }
/* 🎁 [هدية التوثيق 2026-09-06] نغمة «وصلت»: نفس البانر بخلفيةٍ خضراء ناعمة */
.wa-freegift-banner.is-done { background: #dff6dc; }
.wa-verify-icon { font-size: 24px; flex-shrink: 0; }
/* الهديّة **داخل** سطر العنوان: عنصرٌ مرن مستقلّ كان ينفرد بسطرٍ متى التفّ الصفّ */
/* 🎨 [2026-09-13 قاعدة المالك «بدون إيموجيات فقط SVG»] أيقونةُ الهديّة SVG بلون العنوان داخل **نفس الوعاء**
   الذي كان يحمل الإيموجي (خطُّه ١٧px وارتفاعُ سطره) — فالبانرُ وموضعُ العنوان بكسلاً بكسلاً كما كانا
   (مقيسٌ على كروم وويب-كِت بـ390 و1366؛ أيقونةٌ بلا وعاءٍ غيّرت الارتفاع ٠٫٥–١px). العرضُ ٢٢ = عرضُ إيموجي آبل بويب-كِت
   (التطبيقُ والآيفون)، وكروم يرسمه ٢١. */
.wa-freegift-ic { font-size: 17px; margin-inline-end: 7px; vertical-align: -1px; }
.wa-freegift-ic svg { width: 22px; height: 21px; display: inline-block; vertical-align: -4px; }
.wa-verify-body, .wa-freegift-body { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
.wa-freegift-body strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.wa-verify-resend {
  padding: 8px 14px; background: var(--ink); color: var(--t-cta);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  cursor: pointer;
}
.wa-verify-dismiss, .wa-freegift-dismiss {
  position: absolute; top: 7px; inset-inline-end: 7px;
  width: 28px; height: 28px;
  background: transparent; border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 1;
  cursor: pointer; color: var(--ink);
  opacity: .5; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-verify-dismiss:hover, .wa-freegift-dismiss:hover { opacity: 1; }
/* 👆 [2026-09-09] الـ✕ مرئيُّه ٢٨×٢٨ والعقد ٤٤ (مهارة الواجهة). التوسيع بعنصرٍ
   زائف لا بتكبير المرئي — والتوسّعُ **للخارج وحده**: الخلوص عن زرّ الإجراء
   ٥px مقيسة، فتوسيعٌ متماثل (٨ لكل جهة) يسرق نقراتٍ من الفعل الأساسي.
   فالنتيجة ٤٣×٤٤: عرضٌ أنقص بكسلٍ واحد مقابل صفر تداخل. */
@media (hover: none) {
  .wa-verify-dismiss::after, .wa-freegift-dismiss::after {
    content: ""; position: absolute;
    top: -8px; bottom: -8px;
    inset-inline-end: -10px;   /* حتى حافّة البانر */
    inset-inline-start: -5px;  /* يقف قبل زرّ الإجراء */
  }
}
.wa-verify-banner[hidden], .wa-freegift-banner[hidden], .wa-resume-inline[hidden] { display: none; }

/* Game card */
.gcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.gcard-price {
  flex-shrink: 0;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px 5px;
  background: var(--t-cta);
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
}
.gcard-price b { font-family: var(--font-display); font-size: 15px; font-weight: 900; line-height: 1; }
/* تطابقٌ تامّ مع «١ تذكرة»: تعبئةٌ فاتحة + نصٌّ وحدٌّ بلون الحبر. القناع والحشو
   والحواف والظل موروثةٌ من .gcard-price أصلاً — فما بقي إلا اللون. */
.gcard-price--free { background: var(--t-success-soft); color: var(--ink); border-color: var(--ink); }
.gcard-price--premium { background: #25d366; color: #fff; border-color: var(--ink); }
/* كبسولةٌ محايدة ريثما يصل السعر الحقيقي (أوّل زيارة). عرضُها ثابتٌ بمقاس
   «١ تذكرة» فلا يتغيّر تخطيط البطاقة لحظة وصول القيمة. */
.gcard-price--pending {
  width: 62px; height: 26px;
  background: linear-gradient(90deg, var(--t-surface-2, #efe9dd) 25%, rgba(255,255,255,.65) 50%, var(--t-surface-2, #efe9dd) 75%);
  background-size: 200% 100%;
  animation: wa-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gcard-price--pending { animation: none; } }
.gcard {
  position: relative;
  background: #fff;
  border: var(--bd-thick);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
  isolation: isolate;
  cursor: pointer;
  --card-color: #f9d82e;
}
.gcard:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-3); }
.gcard:hover .gcard-img { transform: scale(1.05); }

/* Real image art */
.gcard-img-wrap {
  aspect-ratio: 2/1;
  background: var(--card-color);
  position: relative;
  border-bottom: var(--bd-thick);
  overflow: hidden;
}
.gcard-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-spring);
}

/* Fallback when image is missing — show the game's first letter on its color */
.gcard-img--missing { position: relative; }
.gcard-img--missing .gcard-img { display: none; }
.gcard-img--missing::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 110px);
  font-weight: 900;
  color: var(--ink);
  opacity: .25;
  letter-spacing: -0.04em;
}
/* [قرار المالك 2026-09-06] لا نقاطَ بخلفيات الكروت بأي مكان — حُذفت زخرفة النقاط عن كرت الصورة المفقودة */
.gcard-art-decor {
  position: absolute;
  font-size: 22px;
  opacity: .7;
}
.gcard-art-decor--1 { top: 12%; right: 14%; animation: float 4s var(--ease) infinite; }
.gcard-art-decor--2 { bottom: 14%; left: 18%; animation: float 5s var(--ease) infinite .5s; }

/* ★ حاوية الكبسولات — كانت **بلا أي قاعدة CSS إطلاقاً** (display:block · static)،
   فكانت كل كبسولة تتموضع `absolute` عند `top:12 left:12` **بنفسها**. والنتيجة:
   بطاقةٌ بكبسولتين تضعهما **فوق بعض تماماً** — قِيس على «وناااسة اركيد»:
   «مجانية لفترة» و«الأشهر 🔥» كلتاهما عند x=469 y=1287 بالبكسل نفسه،
   فتغطّي الثانيةُ الأولى (بلاغ المالك: «كبسولتين متداخلة ببعض»).
   العلاج: الحاوية هي المتموضعة، والكبسولات تصير `static` داخل صفٍّ مرن. */
.gcard-badges {
  position: absolute;
  top: 12px; left: 12px; right: auto;  /* ★ يسار — عشان ما يغطي شعار وناااسة في الزاوية اليمين */
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.gcard-badge {
  position: static;
  padding: 4px 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1.5px solid var(--ink);    /* ★ موحّد على نمط "الأشهر": حد + ظل لكل الكبسولات */
  box-shadow: 2px 2px 0 var(--ink);
}
.gcard-badge--new { background: var(--t-link); color: #fff; }
.gcard-badge--hot { background: var(--t-cta); color: var(--ink); }
/* ★ الحد + الظل صارا في الأساس .gcard-badge (موحّد للكل) — هنا اللون فقط */
.gcard-badge--popular { background: var(--t-primary); color: #fff; }
.gcard-badge--top     { background: var(--t-success); color: #fff; }
.gcard-badge--premium { background: #9D174D; color: #fff; }   /* نبيتي */
.gcard-badge--free    { background: #0F766E; color: #fff; }   /* أخضر بحري غامق */

.gcard-body {
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  flex: 1;
}
.gcard-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.gcard-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.gcard-meta {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gcard-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--t-cream);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
}
.gcard-meta-item svg { width: 11px; height: 11px; }

.gcard-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(44, 62, 80, .2);
  display: flex;
}
.gcard-play {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  background: var(--t-cta);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.gcard:hover .gcard-play { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.gcard-play:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
/* [قرار المالك 2026-08-30] زرُّ اللعب أخضر لا أصفر — يتميّز عن كل ما حوله.
   🩸 **والمحاذاة بلا رقمٍ سحريّ.** جرّبتُ إزاحةً مقيسة (١٫٥px) فبقيت مرفوضة —
   والسبب أن القياس كان على **Tajawal** بمتصفّحي، بينما الخطّ يُحمَّل من قوقل
   وقد يسقط على «SF Arabic» داخل التطبيق، فمقاييسُه أخرى وأيُّ رقمٍ ثابتٍ يكذب.
   الحسم: `vertical-align: middle` — المتصفّح يحاذي مركزَ الأيقونة إلى
   **منتصف ارتفاع جسم الحروف** (baseline + x-height/2) محسوباً من **الخطّ
   الفعليّ أياً كان**. ولذلك يتحوّل الصفّ من flex إلى سطرٍ عاديّ: `vertical-align`
   لا يسري على عناصر flex. */
.gcard-play {
  background: var(--t-success, #296230) !important;
  color: #fff !important;
}
/* الإزاحة ١٫٥px مثبتةٌ بالقياس: مركزُ **كتلة** حبر المثلث يطابق مركزَ كتلة
   حبر «العب» بفارق ٠٫١٦px على Tajawal و٠٫٢٨px على خطّ النظام (مسحُ بكسلاتٍ
   على لقطةٍ حقيقية ×١٠). و`vertical-align:middle` جُرّب فرفع المثلث ٤٫٨px.
   والمقاسُ ١١px لا ١٤: جسمُ الحروف ~٥٫٦px، ومثلثٌ حبرُه ٨٫٢px يتجاوزه فوقاً
   وتحتاً فيُقرأ «مب على مستوى واحد» ولو كان مركزُه مضبوطاً. */
/* [قرار المالك 2026-08-30] أُلغيت الأيقونة — القاعدة تبقى لو رجعت أيقونةٌ يوماً */
.gcard-play svg { width: 11px; height: 11px; color: currentColor; position: relative; top: 1.5px; }

/* Locked variant */
.gcard.is-locked { cursor: default; }
.gcard.is-locked .gcard-art { filter: grayscale(.5) saturate(.7); }
.gcard.is-locked::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(250, 249, 247, .45);
  z-index: 3;
  pointer-events: none;
}
.gcard-lock {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: var(--bd);
  border-radius: 999px;
  box-shadow: var(--sh-1);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
}
.gcard-lock svg { width: 16px; height: 16px; }
.gcard.is-locked .gcard-play { opacity: .35; }

/* Featured (big) variant */
.gcard--wide { grid-column: span 2; }
.gcard--wide .gcard-art { aspect-ratio: 12/5; font-size: 96px; }
.gcard--wide .gcard-title { font-size: 26px; }
.gcard--wide .gcard-desc { font-size: 14.5px; -webkit-line-clamp: 3; }

/* [ملاحظة المالك 2026-09-06] شارات الكرت («جديدنا»، «الأشهر»، «الأكثر لعباً») أصغر شوي على الجوال تحديداً.
   [قرار المالك 2026-10-02] ① «خلها عاليمين ازين»: على الجوال **يمين** (الكمبيوتر يسار بالقاعدة الأساسية) — والحين صريحة بـ`left:auto`؛
   كانت `right` فوق `left:12px` الأساس (حاويةٌ ممدودة يتجاهل الـRTL يسارَها) فتُقرأ غلطةً تستحقّ «تصحيحاً». ② «صغرها اكثر كبيره
   صراحة» ⇒ اعتمد المقاس ٢ من ثلاثة: ٩px بدل ١٠٫٥ («جديدنا» ٥٦×٢٠ بدل ٦٧×٢٥) بنفس الشكل واللون والنص. ⛔ لا تُنقل لليسار ولا تُكبَّر بلا أمره. */
@media (max-width: 720px) {
  .gcard-badge { font-size: 9px; padding: 2px 6px; border-width: 1px; box-shadow: 1px 1px 0 var(--ink); }
  .gcard-badges { top: 7px; left: auto; right: 7px; gap: 3px; }
}
@media (max-width: 720px) {
  .gcard--wide { grid-column: span 1; }
  .gcard--wide .gcard-art { aspect-ratio: 5/3; font-size: 72px; }
  .gcard--wide .gcard-title { font-size: 19px; }
  .gcard--wide .gcard-desc { font-size: 13px; -webkit-line-clamp: 2; }
}

/* ============================================ CTA STRIP */
.wa-cta-strip {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  padding: 28px 32px;
  /* تراكوتا أعمق للكتلة المصمتة الكبيرة — يرفع التباين مع النص الكريمي إلى ٥.٣٠:١
     بلا ما نمسّ --t-primary المستخدم بالهيدر والفوتر (الهوية تبقى كما هي). */
  background: var(--t-primary-deep, #a83c17);
  color: var(--t-cream, #f2eadf);
  border: var(--bd-thick);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  flex-wrap: wrap;
}
.wa-cta-strip .btn-pri {
  background: var(--t-cta);
  color: var(--ink);
  flex-shrink: 0;
  margin-inline-start: auto;
  /* ضمان أن الزر فوق النجوم الزخرفيّة */
  position: relative;
  z-index: 1;
}
.wa-cta-body {
  min-width: 0; flex: 1;
  /* ضمان أن الكلام فوق النجوم الزخرفيّة */
  position: relative;
  z-index: 1;
}
/* ⚠️ اللون صريح هنا عمداً: colors_and_type.css يضع `color: var(--ink)` على
   `h1..h6/.brand-font` وعلى `p` — فيدهس الأبيض الموروث من .wa-cta-strip، وكان
   الناتج حبراً كحلياً على تراكوتا = **٢.٣٠:١** (الحد الأدنى ٤.٥). الآن ٥.٣٠:١. */
.wa-cta-title { font-size: clamp(24px, 3vw, 34px); margin-bottom: 4px; color: var(--t-cream, #f2eadf); }
.wa-cta-sub   { font-size: 15px; max-width: 56ch; color: var(--t-cream, #f2eadf); opacity: .95; }

/* النجوم الزخرفية تلفّ بلا نهاية — أطفئها عند طلب تقليل الحركة (كانت مغطّاة
   بالداشبورد فقط؛ هنا تغطّي الخمس صفحات اللي فيها الشريط). */
@media (prefers-reduced-motion: reduce) {
  .wa-cta-star { animation: none !important; }
}

.wa-cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* خلف .wa-cta-body و .btn-pri اللي عندهم z-index: 1 */
  color: var(--t-cta);
}
.wa-cta-star { position: absolute; font-size: 80px; opacity: .18; }
.wa-cta-star svg { width: .68em; height: .68em; margin: 0 -.04em; vertical-align: -.07em; }   /* 🎨 «✦» SVG بصندوق الحرف وحبره — مثل نجوم الهيرو */
.wa-cta-star--1 { top: -16px; right: -8px; animation: spin 18s linear infinite; }
.wa-cta-star--2 { bottom: -24px; right: 40%; font-size: 120px; animation: spin 24s linear infinite reverse; }
.wa-cta-star--3 { top: 30%; left: 18%; font-size: 40px; animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================ FAB */
.wa-fab {
  position: fixed;
  bottom: 24px; left: 24px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #25d366;
  color: #fff;
  border: var(--bd-thick);
  border-radius: 50%;
  box-shadow: var(--sh-2);
  z-index: 70;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-fab:hover { transform: translate(2px, -2px); box-shadow: var(--sh-3); }
.wa-fab svg { width: 26px; height: 26px; }

/* ============================================ REVEAL ON SCROLL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================ RESPONSIVE */
@media (max-width: 1040px) {
  .wa-nav { display: none; }
  .wa-hero { grid-template-columns: 1fr; }
  .wa-hero-mascot, .wa-hero-collage { max-width: 360px; margin: 0 auto; min-height: 280px; }
}
@media (max-width: 720px) {
  .wa-hdr-inner { gap: 10px; padding: 10px 14px; }
  .wa-tickets-label { display: none; }
  .wa-tickets { padding: 6px 10px 6px 8px; gap: 5px; font-size: 13px; }
  .wa-tickets-plus { width: 18px; height: 18px; } /* لا font-size هنا — الحرف النصي يبقى مخفياً (صليب هندسي، 2026-08-04) */
  .wa-tickets svg { width: 15px; height: 15px; }
  .wa-icbtn { width: 36px; height: 36px; }
  .wa-icbtn svg { width: 16px; height: 16px; }
  .wa-profile-greet { display: none; }
  .wa-profile-btn { padding: 4px; }
  .wa-avatar { width: 30px; height: 30px; font-size: 13px; }
  .wa-stats { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .wa-stat + .wa-stat:nth-child(3)::before { display: none; }
  .wa-resume { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wa-resume-actions { width: 100%; justify-content: space-between; }
  .wa-resume-inline { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .wa-resume-inline .btn-pri--sm { flex: 1; justify-content: center; }
  .wa-hero { padding-top: 8px; }
  .wa-hero-title { font-size: 36px; }
  .wa-hero-sub { font-size: 15px; margin-bottom: 20px; }
  .wa-hero-cta { width: 100%; }
  .wa-hero-cta .btn-pri { flex: 1; justify-content: center; }
  .wa-eyebrow { font-size: 12px; padding: 5px 12px 5px 8px; }
  .wa-hero-collage { min-height: 240px; max-width: 100%; }
  .hc-tile--a { width: 60%; height: 56%; }
  .hc-tile--b { width: 44%; height: 38%; }
  .hc-tile--c { width: 48%; height: 42%; }
  .hc-tile--d { width: 44%; height: 44%; }
  .hc-sticker { font-size: 22px; }
  .hc-sticker--2 { font-size: 18px; }
  .wa-cta-strip { flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 16px; }
  .wa-cta-strip .btn-pri { margin: 0; width: 100%; justify-content: center; }
  .wa-cta-title { font-size: 24px; }
  .wa-cta-sub { font-size: 14px; }
  .wa-section-title { font-size: 26px; }
  .wa-section-hdr { gap: 12px; }
  .wa-section-hdr .wa-sort { width: 100%; justify-content: center; }
  .wa-sort-btn { flex: 1; }
  .wa-filters { gap: 6px; }
  .wa-filter { padding: 7px 12px; font-size: 13px; }
  .wa-filter-count { padding: 1px 6px; font-size: 12px; }
  .wa-grid { grid-template-columns: 1fr; gap: 14px; }
  .gcard-img-wrap { aspect-ratio: 16/9; }
  .gcard-body { padding: 14px; }
  .gcard-title { font-size: 17px; }
  .gcard-meta { gap: 4px; }
  .gcard-meta-item { padding: 3px 8px; font-size: 12px; }
  .gcard-play { padding: 10px; font-size: 13px; }
  .wa-cats-strip { gap: 10px; padding: 6px 2px 22px; }
  .cat-tile { width: 130px; height: 168px; }
  .cat-tile-foot { padding: 8px 10px; }
  .cat-tile-name { font-size: 13px; }
  /* 🩸 [2026-09-09] `flex-basis:100%` كانت تُفرد النصَّ بسطرٍ كامل، فينفرد الأيقونةُ
     بسطرٍ فوقه والزرُّ بسطرٍ تحته: **ثلاثة صفوف** و١٦٦px لرسالةٍ من سطرين. الإشعار
     صفٌّ واحد: أيقونةٌ ونصٌّ وزرّ. واللفّ يبقى مسموحاً فالزرُّ ينزل وحده إن ضاق. */
  .wa-verify-banner, .wa-freegift-banner { flex-wrap: wrap; padding: 11px 13px; padding-inline-end: 40px; gap: 8px; }
  .wa-verify-body, .wa-freegift-body { font-size: 12.5px; line-height: 1.5; min-width: 140px; flex: 1 1 140px; }
  .wa-verify-resend, .wa-verify-dismiss, .wa-freegift-dismiss { flex-shrink: 0; }
  .wa-verify-resend { padding: 7px 11px; font-size: 12px; }
  /* 👆 عقدُ اللمس ٤٤×٤٤ (مهارة الواجهة): الزرّ كان ٣٧px — والصفُّ لا يطول لأن
     النصَّ بجانبه ٣٨px أصلاً، فالارتفاع يحكمه الأطول. مقيسٌ: ٦٥ ← ٦٦px. */
  .wa-verify-resend, .wa-freegift-banner .btn-pri { min-height: 44px; }
  .wa-freegift-banner .btn-pri { flex: 0 1 auto; justify-content: center; padding-inline: 12px; }
}
@media (max-width: 420px) {
  .wa-logo { font-size: 22px; }
  .wa-nav-link { display: none; }
  .wa-hero-title { font-size: 30px; }
  .wa-hero-word { padding: 1px 12px 4px; font-size: 26px; }
  .wa-section-title { font-size: 22px; }
  .wa-section-sub { font-size: 13px; }
  .wa-resume-inline .wa-resume-ic { width: 44px; height: 44px; }
  .wa-resume-inline .wa-resume-title { font-size: 14px; }
  .wa-resume-inline .wa-resume-sub { font-size: 11.5px; }
  .wa-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .wa-filter { padding: 8px 10px; font-size: 12.5px; justify-content: space-between; }
  .cat-tile { width: 116px; height: 152px; }
  .cat-tile-sym { font-size: 36px; }
  .wa-main { padding-block: 20px 60px; }
  .wa-fab { width: 50px; height: 50px; bottom: 16px; left: 16px; }
  .wa-fab svg { width: 22px; height: 22px; }
  .wa-eyebrow span { font-size: 12px; }
}
}


/* أهداف لمس مريحة (تدقيق الهوم 2026-07-18): روابط الفوتر والفهارس ≥44px عمودياً */
.wa-footer a { display: inline-block; padding-block: 10px; }
.wa-footer-socials a { padding: 10px; }
.legal-toc-list a { display: inline-block; padding-block: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   تذييلٌ مختصرٌ على الجوال (بلاغ المالك 2026-08-21: «احذف منها كثير… خلّها
   أقصر — فقط للتطبيق والموقع من الجوال، واللاب توب زي ما هو»)
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ الملف: القاعدة هنا في `dash2.css` لأنه **الورقة الوحيدة التي تحمّلها
   الصفحات الستّ عشرة كلّها** التي يحقن فيها `wa-shell.js` التذييل — بينما
   أنماط التذييل نفسها مكرّرة في `addons.css` و`shop-styles.css` (كلٌّ لنصف
   الصفحات). ولأن `dash2.css` يُحمَّل **قبلهما**، كل محدِّدٍ هنا مرفوعُ
   الأولوية (`footer.wa-footer` / `.wa-footer .wa-footer-col`) ليغلب المكرَّر
   بلا `!important`.
   ⚠️ الحدّ 720px **ليس اعتباطياً**: هو نفس حدّ شريط التنقّل السفليّ
   `.wn-bnav` في `wn-uiux-local.css` — فحيثما ظهر الشريط طُوي ما يكرّره
   التذييل. واللابتوب (≥721) لا تمسّه ولا قاعدةٌ واحدة.
   ما يبقى على الجوال: الاسم · التواصل الاجتماعي · الأسئلة الشائعة (قرار
   المالك 2026-08-09: «الأسئلة تبقى بالتذييل» حين استُبدلت بالليدربورد في
   الشريط) · سياسة الخصوصية · الشروط · **حذف الحساب (شرط متجر آبل — لا يُحذف
   أبداً)** · تواصل معنا · سطر الحقوق.
   ما يُطوى: الوصف التسويقي · الألعاب والمتجر (بالشريط السفليّ) · قصتنا ·
   عمود «للأعمال» كاملاً (B2B — وأيقونة واتساب توصل لنفس الرقم) · عناوين
   الأعمدة · وسطر البريد المكرَّر أسفلَ («تواصل معنا» يفتحه أصلاً). */
@media (max-width: 720px) {
  footer.wa-footer { padding: 22px 0 16px; margin-top: 28px; }
  .wa-footer .wa-footer-inner { padding-inline: 16px; }

  /* الشبكة تصير صفّاً ملفوفاً: سطر الهوية ثم كل الروابط الباقية في صفٍّ واحد */
  .wa-footer .wa-footer-grid {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0 16px; padding-bottom: 10px;
  }
  .wa-footer .wa-footer-grid > :first-child {
    flex: 1 0 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 6px;
  }
  .wa-footer .wa-footer-brand { font-size: 22px; margin: 0; }
  .wa-footer .wa-footer-tag { display: none; }
  .wa-footer .wa-footer-socials { gap: 4px; }
  .wa-footer .wa-footer-soc { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
  .wa-footer .wa-footer-soc svg { width: 15px; height: 15px; }
  .wa-footer .wa-footer-socials a { padding: 0; }   /* يلغي حشوة 10px أعلاه — المرئيّ يبقى ٣٤px */
  /* 👆 [2026-09-09] و«٣٤px هدفٌ مقبول» لم تكن مقبولةً بالعقد (٤٤). لكن التصغير
     كان مقصوداً لتقصير التذييل (طلب المالك 2026-08-21) — فلا نكبّر المرئيّ:
     نوسّع منطقة النقر بعنصرٍ زائف، والفجوة تُفتح ٤←١٠ حتى لا تتداخل منطقتان
     متجاورتان فتصير النقرة بينهما ملتبسة. الشكل كما هو، والهدف ٤٤×٤٤. */
  .wa-footer .wa-footer-socials { gap: 10px; }
  .wa-footer .wa-footer-soc { position: relative; }
  @media (hover: none) { .wa-footer .wa-footer-soc::after { content: ""; position: absolute; inset: -5px; } }

  /* المطويّ */
  .wa-footer .wa-fcol-biz,
  .wa-footer .wa-fitem-mobhide,
  .wa-footer .wa-footer-col h4,
  .wa-footer .wa-footer-bot-links { display: none; }

  /* الباقي: عناصر الصفّ نفسه (display:contents يذيب الحاوية لا العنصر —
     و`role="list"` على الـul يحفظ دلالة القائمة لقارئ الشاشة) */
  .wa-footer .wa-fcol-product,
  .wa-footer .wa-fcol-legal,
  .wa-footer .wa-footer-col ul { display: contents; }
  /* ⚠️ هدف اللمس: قاعدة `.wa-footer a { padding-block:10px }` أعلى الملف
     **ميتة** — قوسٌ زائدٌ عند السطر ١٢٩٦ يبتلعها (مقيسٌ: padding-top يحسب 0px).
     فنعيد الحشوة هنا صراحةً وداخل حدّ الجوال وحده — الهدف يصير ٣٦px بدل ١٦،
     واللابتوب لا يتأثّر لأن القاعدة داخل @media. */
  .wa-footer .wa-footer-col a { display: inline-block; padding-block: 10px; font-size: 13.5px; }

  .wa-footer .wa-footer-bot {
    padding-top: 10px; justify-content: center; text-align: center; font-size: 12px;
  }
}