/* hub.css — صفحة الهب (الرئيسية + ردهة المسجّل)
   قدها وقدود | Arabic RTL Game Show Platform

   منقولة من «Lobby Home.dc.html» في Claude Design بعد ما اعتمد صالح الوصفة
   (٢٠٢٦-٠٨-١٦):  نعناعي فاتح · لمعة ذهبي وتركوازي · «ضباب هادئ» · انجراف · عادي · لاليزار

   ⚠ ثلاثة قرارات تحكم هذا الملف، لا تُغيَّر بلا سبب:

   ١) البانر فاتح، فاللمعة تشتغل `mix-blend-mode: multiply` — أي ضوء فوق خلفية
      فاتحة يختفي، فالطبقات هنا **تُعتّم** بدل ما تنوّر، وشدّتها مرفوعة ×١٫٧.
      لو رجعنا لبانر غامق: احذف الـmultiply وارجع الشفافيات لقيمتها الأصلية
      (٠٫٢٠ و٠٫١٧) وإلا تطلع بقعتين سوداوين.

   ٢) ألوان النص (--onB / --onB-soft) حبر غامق لأن الخلفية فاتحة. مربوطة
      بمتغيّرات عمدًا: تبديل البانر لغامق = تبديل سطرين، لا مطاردة ألوان.

   ٣) الشعار الوسطي يستخدم `logo-sticker-trim.png` لا `logo-sticker.png`.
      المربّعة فيها ٤٩٪ حشوة شفافة (٨٨٠×٨٨٠ ومحتواها ٧٠٣×٥٦١)، فلو استُخدمت
      هنا يطلع فراغ نصف ارتفاع الشعار تحته. المربّعة باقية كما هي لأن الداشبورد
      وبقية الأسطح معايرة عليها. */

:root {
  --hub-1: #E9F8F2;   /* نعناعي فاتح — الدرجات الثلاث للبانر */
  --hub-2: #D8F1E7;
  --hub-3: #F2FBF7;
  --hub-gold: 255, 200, 87;
  --hub-teal: 46, 230, 197;
  --onB: #1B1230;
  --onB-soft: rgba(27, 18, 48, .66);
  /* ارتفاع الشريط الزجاجي — يُطرح من ارتفاع الشاشة. القيم مقيسة (انظر
     الكتلة الأخيرة في هذا الملف) ومطابقة للحجز في css/site-header.css. */
  --hub-hdr: 65px;
}

/* ══ الهيكل: الشاشة الأولى كاملة بلا تمرير ══

   ⚠ `height` لا `min-height`: مع min-height كان البانر وصف الألعاب كلٌّ يطلب
   ارتفاعه الطبيعي فتتجاوز الشاشة (قِسناها: ٩٧١px داخل ٩٠٠). الآن الارتفاع
   محسوم والبانر هو اللي يتقلّص (flex: 1 1 auto + min-height: 0)، وصف الألعاب
   يأخذ حاجته كاملة لأنه هو المحتوى المهم. */
.hub {
  display: flex; flex-direction: column;
  min-height: 100svh; min-height: var(--app-vh, 100svh);
  /* `index.html` عنده `viewport-fit=cover`، فالمحتوى يُرسم تحت حواف النظام
     في التطبيق الغامر. الجانبان يُحشَّيان هنا؛ القاع يُطرح من ارتفاع
     `.hub-screen` تحت — حشوُه هنا كان يزيد الطول بدل ما يقصّه. */
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

.hub-screen {
  display: flex;
  flex-direction: column;
  /* ⚠ الارتفاع = المرئي − الشريط − حافة النظام السفلية:
       • `--app-vh` = المرئي المقيس (`js/lib/viewport-lock.js`). على تابلت
         أندرويد في التطبيق الغامر تُرجع وحدات الشاشة قيمة **أكبر** من
         المرئي، فصف الألعاب ينزل تحت الحافة. بلا الملف تبقى `100svh`.
       • `env(safe-area-inset-bottom)` = ما يرسمه النظام فوق المحتوى.
     السطر الأول احتياطي للمتصفحات اللي ما تعرف `env()`. */
  height: calc(100svh - var(--hub-hdr));
  height: calc(var(--app-vh, 100svh) - var(--hub-hdr) - env(safe-area-inset-bottom, 0px));
  min-height: 470px;   /* أرضية: تحتها ننزل لتمرير بدل ما ينهرس المحتوى */
}

/* ══ البانر ══ */
.hub-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;        /* بدونه يرفض التقلّص ويدفع الألعاب تحت الطية */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(14px, 2.6vh, 34px) clamp(16px, 4vw, 40px) clamp(66px, 11vh, 132px);
  /* المنحنى النصف دائري — نسبة أفقية/رأسية حتى يبقى القوس هادئًا على الشاشات العريضة */
  border-radius: 0 0 50% 50% / 0 0 clamp(40px, 6vw, 88px) clamp(40px, 6vw, 88px);
  background: linear-gradient(170deg, var(--hub-1) 0%, var(--hub-2) 52%, var(--hub-3) 100%);
}

/* «ضباب هادئ»: طبقتان ضخمتان ناعمتان تنجرفان ببطء متفاوت */
.hub-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(82px);
  mix-blend-mode: multiply;
  pointer-events: none;
  will-change: transform;
}
.hub-glow-a {
  top: -30%; inset-inline-start: -26%;
  width: 92%; height: 112%;
  background: radial-gradient(ellipse, rgba(var(--hub-gold), .34) 0%, rgba(var(--hub-gold), 0) 68%);
  animation: hubDrift 42s ease-in-out infinite;
}
.hub-glow-b {
  bottom: -34%; inset-inline-end: -26%;
  width: 96%; height: 116%;
  background: radial-gradient(ellipse, rgba(var(--hub-teal), .289) 0%, rgba(var(--hub-teal), 0) 68%);
  animation: hubDrift 50s ease-in-out infinite reverse;
}
/* غسلة دافئة أسفل البانر تربطه بصف البطاقات */
.hub-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 118%, rgba(var(--hub-gold), .22), transparent 60%);
}

@keyframes hubDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34%      { transform: translate3d(7%, -5%, 0) scale(1.16); }
  67%      { transform: translate3d(-5%, 4%, 0) scale(.92); }
}

/* ══ محتوى البانر ══ */
.hub-hero {
  position: relative;
  max-width: 900px;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(6px, 1.1vh, 14px);
}
/* الشعار وحده المرن: النص لا يتقلّص، فلمّا يضيق البانر يصغر الشعار فقط */
.hub-logo {
  flex: 0 1 auto;
  min-height: 0;
  height: min(33vh, 350px);
  max-width: min(90vw, 640px);
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 50px rgba(var(--hub-teal), .5))
          drop-shadow(0 -8px 34px rgba(var(--hub-gold), .4));
  animation: hubFloat 4.5s ease-in-out infinite;
}
@keyframes hubFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(.4deg); }
}

/* لاليزار وزنه ٤٠٠ فقط — لا تكتب هنا font-weight أثقل، ما فيه ملف له */
.hub-slogan {
  margin: 0;
  font-family: 'Lalezar', 'Cairo', cursive;
  font-size: clamp(24px, 3.9vw, 49px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--onB);
  text-shadow: 0 1px 2px rgba(27, 18, 48, .12);
}
.hub-rule {
  width: clamp(72px, 9vw, 116px); height: 3px; border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgb(var(--hub-gold)), transparent);
}
.hub-sub {
  margin: 0;
  font-size: clamp(12.5px, 1.4vw, 16px);
  font-weight: 700;
  color: var(--onB-soft);
}

/* ══ صف الألعاب — يركب على المنحنى ══ */
.hub-rail {
  position: relative; z-index: 2; flex: none;
  margin-top: clamp(-96px, -8vh, -56px);
  padding: 0 clamp(14px, 3vw, 34px) clamp(20px, 3.4vh, 40px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 18, 48, .22) transparent;
}
.hub-rail::-webkit-scrollbar { height: 6px; }
.hub-rail::-webkit-scrollbar-thumb { background: rgba(27, 18, 48, .2); border-radius: 9999px; }
.hub-rail::-webkit-scrollbar-track { background: transparent; }

.hub-cards {
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  width: max-content; min-width: 100%;
  margin: 0 auto; box-sizing: border-box;
}

.hub-card {
  width: clamp(216px, 28vw, 340px);
  border-radius: 30px;
  padding: 3px;               /* الحشوة هي الإطار المتدرّج */
  flex-shrink: 0;
  box-shadow: 0 26px 56px rgba(6, 32, 36, .34);
  transition: transform .3s ease;
}
.hub-card-classic  { background: linear-gradient(135deg, #FFC857 0%, #2EE6C5 100%); }
.hub-card-kashkool { background: linear-gradient(135deg, #8E5BD8 0%, #1B6B5E 100%); }
/* الرفع للبطاقات القابلة للعب فقط — «قريباً» ما ترتفع لأنها ما تُضغط */
.hub-card.is-live:hover { transform: translateY(-8px); }

.hub-card-in {
  height: 100%;
  border-radius: 27px;
  background: var(--surface-primary, #fff);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, .9vh, 11px);
  padding: clamp(11px, 1.5vh, 17px) clamp(9px, 1vw, 13px);
  box-sizing: border-box;
}

.hub-badge {
  align-self: flex-start; margin-inline-start: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: .4px;
  padding: 5px 12px; border-radius: 9999px;
}
.hub-badge-live { color: #08312A; background: var(--brand-teal-soft, #9FF2E1); }
/* نفس المعالجة البنفسجية بلا قفل — تُستخدم على PBE حيث كشكول قابلة للعب */
.hub-badge-new  { color: #4A2E85; background: rgba(142, 91, 216, .16); }

/* الحاوية تقصّ عمدًا: أي شعار يكبر لا يخرج من البطاقة.
   الارتفاع بـclamp لا min: الأرضية تمنع البطاقة من الانهيار، والسقف يمنعها
   من دفع الزر تحت الطية على الشاشات القصيرة. */
.hub-shot {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: clamp(88px, 21vh, 232px); overflow: hidden;
}
.hub-shot img { max-height: 100%; object-fit: contain; }
.hub-shot-classic img { width: 100%; }

/* ⚠ توسيط بصري لا حسابي. ذيل الكاف في «كشكول» يمتد يمين الكلمة بحبر شبه
   معدوم، فمركز صندوق الصورة ٥٠٪ بينما مركز كتلة الحبر ٤٢٫٧٪ — توسيط الصندوق
   يخلّي الشعار يبان مزاحًا يسارًا. الإزاحة = ٥٠ − ٤٢٫٧ ≈ ٧٫٣٪.
   والعرض ٨٦٪ مقصود: ٨٦÷٢ + ٧٫٣ = ٥٠٫٣٪ ⇒ رياضيًا يستحيل يخرج من المربع. */
.hub-shot-kashkool img { width: 86%; transform: translateX(7.3%); }

.hub-name {
  font-family: 'Lalezar', 'Cairo', cursive;
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-primary, #1E1438);
}

.hub-play {
  width: 100%; min-height: clamp(42px, 5.4vh, 50px);
  border-radius: 9999px; border: none;
  background: linear-gradient(135deg, #FFC857 0%, #2EE6C5 100%);
  color: var(--text-primary, #1E1438);
  font-family: inherit; font-size: clamp(14px, 1.5vw, 17px); font-weight: 900;
  cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  animation: hubPulse 2.6s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, .55), 0 12px 30px rgba(46, 230, 197, .38); }
  50%      { box-shadow: 0 0 0 16px rgba(255, 200, 87, 0), 0 12px 30px rgba(46, 230, 197, .38); }
}

/* ══ بطاقة كشكول تلبس ثيمها ══
   عالم كشكول بنفسجي نيون، وتدرّج الكلاسيك (ذهبي→تركوازي) يطلع أخضر على طرفه
   فيبان غريبًا على البطاقة. الوصفة منقولة حرفيًا من `--lw-cta` في
   css/lista-tokens.css وهي نفس ما يستخدمه `.lwh-cta-main` داخل كشكول.

   ⚠ بنفسجي كامل لا بنفسجي→أخضر: ملاحظة مكتوبة في التوكنز نفسها — النص الأبيض
   لا يُقرأ على طرف الأخضر النيون. التدرّج بنفسجي→أخضر زخرفي للحدود فقط،
   وهو فعلًا ما يزال إطار البطاقة. */
.hub-card-kashkool .hub-play {
  /* نسخة طبق الأصل من `--lw-cta` بعد تعميقه في css/lista-tokens.css.
     مكتوبة صراحةً لأن الهب لا يحمّل توكنز كشكول — أي تغيير هناك يتكرر هنا. */
  background: linear-gradient(135deg, #A65CFF 0%, #7C34D8 45%, #4C1A99 100%);
  color: #FFFFFF;
  animation: hubPulseKashkool 2.6s ease-in-out infinite;
}
@keyframes hubPulseKashkool {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 92, 255, .55), 0 12px 30px rgba(91, 33, 182, .42); }
  50%      { box-shadow: 0 0 0 16px rgba(166, 92, 255, 0), 0 12px 30px rgba(91, 33, 182, .42); }
}

/* كشكول ما لها رابط بعد — <span> لا <a>، بقرار صالح */

/* ══ النص التعريفي — تحت الطية ══
   بلا خلفية بقصد: يقع على تدرّج الـbody الدافئ بين صف الألعاب والفوتر، فأي
   لون هنا يصير شريطًا ثالثًا بين النعناعي والكريمي.
   line-height ١٫٩٥ للفقرات و١٫٥ للعنوان: العربي بالشدّة والهمزة يُقصّ تحت ١٫٤. */
.hub-about {
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 34px);
}
.hub-about-in {
  max-width: 760px; margin: 0 auto; text-align: center;
}
.hub-about h2 {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-family: 'Lalezar', 'Cairo', cursive;
  font-weight: 400;
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.5;
  color: var(--onB);
  text-wrap: balance;
}
.hub-about p {
  margin: 0 0 clamp(10px, 1.2vw, 15px);
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.95;
  color: var(--onB-soft);
  text-wrap: pretty;
}
.hub-about strong { color: var(--onB); font-weight: 800; }
.hub-about-more { margin-bottom: 0; }
.hub-about-more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 800; color: var(--onB);
  /* التسطير صريح: base.css يصفّر تسطير الروابط، فبدونه يقرأ الرابط كنصّ عريض
     لا كرابط — والتمييز باللون وحده يسقط في WCAG 1.4.1. */
  text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ══ الفوتر — بلون البانر نفسه ══ */
.hub-foot {
  background: linear-gradient(170deg, var(--hub-2) 0%, var(--hub-1) 60%, var(--hub-3) 100%);
  padding: clamp(24px, 3.4vw, 40px) clamp(16px, 4vw, 34px);
}
.hub-foot-in {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
}
.hub-foot-brand { display: flex; align-items: center; gap: 12px; }
.hub-foot-brand img { height: 44px; width: auto; display: block; }
.hub-foot-brand span { font-size: 13px; font-weight: 600; color: var(--onB-soft); text-wrap: pretty; }
.hub-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.hub-foot-links a {
  font-size: 14px; font-weight: 800; min-height: 44px;
  display: flex; align-items: center;
  color: var(--onB-soft); text-decoration: none;
}
.hub-foot-links a:hover { color: var(--onB); }

/* ══ الشاشات القصيرة والجوال ══ */
@media (max-width: 560px) {
  /* ⚠ `--hub-hdr` انتقل لآخر الملف (٢٠٢٦-٠٨-٢٠): صار يتبع `data-auth`
     كذلك، والقيمة القديمة ٥٦px كانت تنقص ٦px عن الشريط المسجّل فيقفز
     صف الألعاب لحظة ما يقيسه JS. */
  .hub-foot-in { justify-content: center; text-align: center; }
}

/* ══ الجوال الأفقي ══
   ٨٤٤×٣٩٠ يترك ٣١٦px فقط تحت الشريط، والبطاقة وحدها كانت ٢٣٢. الأرضية
   min-height:470px كانت تفرض تمريرًا بـ١٥٤px قبل ما تبين الألعاب.
   الحل: تُرفع الأرضية هنا، ويُضحّى بالسطر الثانوي والفاصل، ويتقلّص كل شيء
   بوحدات vh حتى يبقى الشرط قائمًا: الشعار والألعاب في شاشة واحدة. */
@media (max-height: 560px) and (orientation: landscape) {
  .hub-screen { min-height: 0; }
  .hub-stage { padding: 6px clamp(14px, 3vw, 28px) clamp(30px, 8vh, 54px); }
  .hub-hero { gap: 4px; }
  .hub-logo { height: min(30vh, 150px); }
  .hub-slogan { font-size: clamp(17px, 6.4vh, 26px); }
  .hub-rule, .hub-sub { display: none; }

  .hub-rail { margin-top: clamp(-46px, -7vh, -26px); padding-bottom: clamp(8px, 2.4vh, 16px); }
  .hub-card { width: clamp(178px, 24vw, 250px); border-radius: 22px; }
  .hub-card-in { border-radius: 19px; gap: 4px; padding: 8px 10px; }
  .hub-badge { font-size: 10.5px; padding: 3px 9px; }
  .hub-shot { height: clamp(52px, 15vh, 96px); }
  .hub-name { font-size: clamp(15px, 5.4vh, 19px); }
  /* أرضية ٤٠px لا ٣٤: هذا الزر هو الفعل الأساسي في الصفحة، وقِسناه ٣٤px
     على العرضي — يمرّ WCAG 2.5.8 (٢٤px) لكنه ضيق للإبهام. */
  .hub-play { min-height: 40px; }
}

/* ══ شاشات فائقة القِصر (غلاف Galaxy Fold ٦٥٣×٢٨٠) ══
   ٢٠٦px تحت الشريط لا تكفي بطاقةً (١٨١) وشعارًا، فكان الشعار ينكمش إلى صفر
   ويختفي كليًا. تمريرٌ صادق أفضل من شعار ممحوّ: نرفع حسم الارتفاع ونثبّت
   أرضية للشعار. */
@media (max-height: 340px) and (orientation: landscape) {
  .hub-screen { height: auto; min-height: 0; }
  .hub-logo { flex: none; height: 56px; }
  .hub-stage { padding-bottom: 26px; }
  .hub-rail { margin-top: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-glow, .hub-logo, .hub-play, .hub-card-kashkool .hub-play { animation: none !important; }
  .hub-card { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   نصوص أزرار البطاقات — تُختار بالـCSS لا بالـJS (٢٠٢٦-٠٨-٢٠)
   ══════════════════════════════════════════════════════════════════════════
   الزر يحمل النصّين معًا، و`data-auth` على <html> (يكتبه سكربت الرأس المتزامن
   في index.html) يخفي واحدًا قبل أول رسم. قبلها كان hub.page.js يكتب النص بعد
   ٥ طبقات استيراد، فالمسجّل يقرأ «سجّل والعب» ثم تنقلب أمامه لـ«ادخل اللعبة».
   ⚠ بلا العلم (جافاسكربت مقفول) يظهر نصّ الزائر — وهو الافتراضي الآمن، لأن
   وجهة الزر ساعتها login.html فعلًا. */
.hub-play .lbl-in{display:none;}
html[data-auth="in"] .hub-play .lbl-out{display:none;}
html[data-auth="in"] .hub-play .lbl-in{display:inline;}

/* ══════════════════════════════════════════════════════════════════════════
   ارتفاع الشريط الحقيقي — مقيس لا مخمّن (٢٠٢٦-٠٨-٢٠)
   ══════════════════════════════════════════════════════════════════════════
   `.hub-screen` يطرح هذا الرقم من ارتفاع الشاشة، فأي فرق بينه وبين الواقع
   يزحف على صف الألعاب لحظة ما يصحّحه hub.page.js. كان ٦٤/٥٦px تخمينًا
   والحقيقي ٦٥ و٥٨–٦٢ — فيقفز ٦px على كل جوال مسجّل.

   ⚠ نفس أرقام `#qqHeader:empty` في css/site-header.css بالضبط. عدّلهما معًا،
   وتحقّق بـ`node scripts/header-reserve-probe.mjs`. القياس في JS باقٍ كشبكة
   أمان لحالات ما نتوقعها (خط ما نزل، لغة أعرض)، لكنه ما عاد يصحّح خطأً ثابتًا. */
@media (max-width: 700px) {
  :root                { --hub-hdr: 58.13px; }
  html[data-auth="in"] { --hub-hdr: 62px; }
}
@media (max-width: 345px) {
  :root                { --hub-hdr: 52.13px; }
  html[data-auth="in"] { --hub-hdr: 54px; }
}
@media (max-width: 340px) {
  html[data-auth="in"] { --hub-hdr: 52px; }
}

/* ═══════════════════════════════════════════════════════════════
   تنبيه التروفي — يطلع في الرئيسية بعد القيم  (js/lib/trophy-toast.js)
   ═══════════════════════════════════════════════════════════════
   ⚠️ طبقة فوق الصفحة لا شريط جانبي: الخبر «فتحت إنجازًا» يستحق وقفة
   قصيرة، وشريطٌ يمرّ في زاوية الشاشة يُقرأ إشعارَ نظامٍ يُتجاهل. */
.tw-wrap{
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(16, 10, 34, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.tw-wrap.is-in{ opacity: 1; }
.tw-card{
  position: relative; width: min(430px, 100%);
  padding: clamp(16px, 3.4vh, 26px) clamp(16px, 3vw, 26px);
  border-radius: 22px; background: linear-gradient(180deg, #FFFDF6, #FBF3E2);
  border: 2px solid transparent;
  background: linear-gradient(180deg, #FFFDF6, #FBF3E2) padding-box,
              linear-gradient(135deg, #F0D089, #B9862B 40%, #F6E0A6 65%, #B9862B) border-box;
  box-shadow: 0 24px 60px rgba(20, 12, 40, 0.35);
  transform: translateY(10px) scale(.97); transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.tw-wrap.is-in .tw-card{ transform: none; }
.tw-kicker{
  margin: 0 0 12px; text-align: center; font-weight: 900;
  color: #9A6E12; font-size: clamp(12.5px, 1.3vw, 16px);
}
.tw-list{ display: grid; gap: 10px; }
.tw-item{
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 10px; border-radius: 16px; background: rgba(255,255,255,0.7);
  border: 1px solid rgba(185,134,43,0.22);
}
.tw-art{
  position: relative; width: clamp(46px, 6vw, 62px); height: clamp(46px, 6vw, 62px);
  display: grid; place-items: center; flex: none;
}
.tw-art img{ width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; }
/* ⚠️ البديل **تحت** الصورة لا مخفيًّا خلف شرط: `onerror` يحذف الصورة فيظهر
   وحده. تخزين حالة «هل نزلت؟» في JS يضيف مصدر حقيقة ثانيًا بلا داعٍ. */
.tw-fallback{ position: absolute; inset: 0; display: grid; place-items: center; color: #D9A93C; }
.tw-fallback svg{ width: 60%; height: 60%; }
.tw-txt{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tw-txt b{ font-size: clamp(14px, 1.5vw, 18px); color: #1E1438; font-weight: 900; }
.tw-txt span{ font-size: clamp(11.5px, 1.15vw, 13.5px); color: #6B5F86; }
.tw-btns{ display: flex; gap: 8px; margin-top: 14px; }
.tw-see, .tw-ok{
  flex: 1; text-align: center; border: 0; cursor: pointer; font-family: inherit;
  font-weight: 900; border-radius: 13px; text-decoration: none;
  padding: clamp(9px, 1.6vh, 13px) 10px; font-size: clamp(12.5px, 1.25vw, 15px);
}
.tw-see{ background: rgba(30,20,56,0.07); color: #1E1438; }
.tw-ok{ background: linear-gradient(135deg, #FFC857, #E8A62E); color: #2A1C00; }
.tw-see:hover, .tw-ok:hover{ filter: brightness(1.05); }
.tw-ok:focus-visible, .tw-see:focus-visible{ outline: 3px solid #2EE6C5; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .tw-wrap, .tw-card{ transition: none; }
}