/* ============================================================
   وناااسة — 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;
}
.brand-font { font-family: 'Blabeloo', 'Tajawal', sans-serif; font-weight: normal; letter-spacing: -.01em; }
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;
  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;
}

/* ============================================================
   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); }
.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); }
.wa-avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--t-primary); color: #fff;
  border-radius: 50%;
  font-weight: 800; font-size: 14px;
  font-family: 'Blabeloo', sans-serif;
}
.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); }
.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; }
@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; }
.wa-empty-tip::before { content: '💡'; }

/* 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: 3px 10px;
  background: var(--t-primary); color: #fff;
  border-radius: 999px;
  font-size: 12px;
  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;
}
.wa-resume-inline .wa-resume-ic img { width: 100%; height: 100%; object-fit: cover; }
.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; }

/* ============================================ 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 {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 24px;
}
.wa-verify-banner { background: #fff8e0; }
.wa-freegift-banner { background: var(--t-cta); }
.wa-verify-icon, .wa-freegift-emoji { font-size: 24px; flex-shrink: 0; }
.wa-verify-body, .wa-freegift-body { flex: 1; font-size: 14px; color: var(--ink); line-height: 1.5; }
.wa-freegift-body strong { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 2px; }
.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 {
  width: 32px; height: 32px;
  background: transparent; border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--ink);
  flex-shrink: 0;
}
.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 {
  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;
}
.gcard-img--missing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.06) 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.06) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.06) 2px, transparent 2px);
  background-size: 60px 60px, 80px 80px, 50px 50px;
  pointer-events: none;
}
.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); }
.gcard-play svg { width: 14px; height: 14px; color: var(--ink); }

/* 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; }

@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--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; }
  .wa-verify-banner, .wa-freegift-banner { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .wa-verify-body, .wa-freegift-body { font-size: 13px; min-width: 0; flex-basis: 100%; }
  .wa-verify-resend, .wa-verify-dismiss, .wa-freegift-dismiss { flex-shrink: 0; }
  .wa-freegift-banner .btn-pri { flex: 1; justify-content: center; }
}
@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; }
  .cats-drawer { width: 100vw; }
  .cats-drawer-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .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; }