/* =============================================================================
   hub.css — بوابة Tumbleden («ألعابنا»). صفحة ثابتة تعرض بطاقات الألعاب وتقدّم كل لعبة.
   تشارك الألعاب نفس العالم الداكن، وكل لعبة تحتفظ بلونها: الذهبي لقائد الشحنات
   والبنفسجي لكلمة السر — وهما لونا المكعّبين في الشعار.
   ========================================================================== */

:root {
  --bg: #0b1226;
  --bg-top: #131c3d;
  --panel: #1a2445;
  --panel-2: #222f58;
  --line: rgba(214, 224, 255, .09);
  --text: #f3f1ff;
  --dim: #a3acc9;
  --gold: #ffc53d;
  --gold-deep: #c77a00;
  --violet: #a78bfa;
  --violet-deep: #6d42e0;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  scrollbar-color: #33406b transparent;
}
body {
  min-height: 100svh; font-family: "Baloo Bhaijaan 2", "Segoe UI", Tahoma, system-ui, sans-serif;
  color: var(--text); line-height: 1.5;
  /* إضاءة علوية واحدة + نسيج خافت من مكعّبات متناثرة — صدى الشعار لا زخرفة عائمة */
  background:
    radial-gradient(110% 70% at 50% -12%, #26356b 0%, rgba(38, 53, 107, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23c9d3ff' fill-opacity='.035'%3E%3Crect x='18' y='26' width='22' height='22' rx='6' transform='rotate(-14 29 37)'/%3E%3Crect x='150' y='12' width='16' height='16' rx='4.5' transform='rotate(21 158 20)'/%3E%3Crect x='96' y='118' width='26' height='26' rx='7' transform='rotate(9 109 131)'/%3E%3Crect x='196' y='170' width='18' height='18' rx='5' transform='rotate(-24 205 179)'/%3E%3Crect x='34' y='186' width='14' height='14' rx='4' transform='rotate(32 41 193)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 46%);
  background-color: var(--bg);
}
::selection { background: rgba(255, 197, 61, .32); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; }

.wrap {
  max-width: 1000px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

/* ---------- الرأس: الشعار والاسم ---------- */
.head { text-align: center; padding-block: clamp(18px, 6vw, 56px) clamp(26px, 5vw, 44px); }
.lockup { display: inline-flex; align-items: center; gap: clamp(10px, 2.6vw, 18px); }
.mark { width: clamp(64px, 17vw, 104px); height: auto; overflow: visible; cursor: pointer; }
.names { text-align: start; }
.word {
  font-size: clamp(44px, 12.5vw, 88px); font-weight: 800; line-height: .95; letter-spacing: -.02em;
  color: #fff6dd;
  text-shadow: 0 3px 0 rgba(10, 14, 32, .55), 0 18px 40px rgba(0, 0, 0, .35);
}
.arname { font-size: clamp(18px, 4.6vw, 26px); font-weight: 800; color: var(--gold); line-height: 1.3; margin-top: 2px; }
.tagline { color: var(--dim); font-size: clamp(15px, 3.8vw, 19px); margin: clamp(14px, 3vw, 20px) auto 0; max-width: 34ch; text-wrap: balance; }

/* اللحظة الوحيدة المتحرّكة: المكعّب الذهبي يتدحرج ويستقرّ على حافة البنفسجي عند الفتح،
   ويعيدها لمس الشعار. المحور نقطة التماس بين المكعّبين (بوحدات الـ viewBox). */
.tumbler, .base { transform-box: view-box; }
.tumbler { transform-origin: 33px 34px; }
.base { transform-origin: 27px 60px; }
.mark.play .tumbler { animation: tumble 1050ms var(--ease-out) both; }
.mark.play .base { animation: squash 1050ms var(--ease-out) both; }
@keyframes tumble {
  0%   { transform: translate(-6px, -46px) rotate(-150deg); opacity: 0; }
  12%  { opacity: 1; }
  48%  { transform: translate(0, 0) rotate(9deg); }
  66%  { transform: rotate(-4deg); }
  82%  { transform: rotate(1.5deg); }
  100% { transform: none; }
}
@keyframes squash {
  0%, 44% { transform: none; }
  52%     { transform: scale(1.05, .93); }
  70%     { transform: scale(.99, 1.01); }
  100%    { transform: none; }
}

/* ---------- البطاقات ---------- */
.cards { display: grid; gap: clamp(14px, 3vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 780px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto;
  column-gap: clamp(14px, 3.4vw, 20px); align-items: start;
  text-decoration: none; color: inherit; overflow: hidden;
  padding: clamp(18px, 4vw, 24px);
  background: linear-gradient(165deg, var(--panel-2), var(--panel) 70%);
  border: 1px solid color-mix(in srgb, var(--tint) 20%, var(--line)); border-radius: 28px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .04) inset, 0 16px 36px -12px rgba(0, 0, 0, .55);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.card.cargo { --tint: var(--gold); --tint-deep: var(--gold-deep); }
.card.words { --tint: var(--violet); --tint-deep: var(--violet-deep); }
.card:active { transform: scale(.985); }
.card:focus-visible { outline: 3px solid var(--tint); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px); border-color: color-mix(in srgb, var(--tint) 45%, transparent);
    box-shadow: 0 2px 0 rgba(255, 255, 255, .05) inset, 0 26px 50px -14px rgba(0, 0, 0, .6);
  }
  .card:hover .go { background: var(--tint); color: #14102b; }
  .card:active { transform: translateY(-2px) scale(.99); }
}

.card-art { flex: none; width: clamp(82px, 21vw, 112px); margin-top: 2px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.card-art svg { width: 100%; height: auto; display: block; }

.card-body { flex: 1; min-width: 0; }
.card-body h2 { font-size: clamp(22px, 5.4vw, 28px); font-weight: 800; line-height: 1.2; }
.card-body p { color: var(--dim); font-size: 15px; line-height: 1.65; margin-top: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags span {
  font-size: 12.5px; font-weight: 700; color: #c3cae3; line-height: 1;
  background: rgba(214, 224, 255, .07); border-radius: 999px; padding: 6px 10px 5px;
}

/* ذيل البطاقة بعرضها كله: الشريط ثم النجوم والعملات وزرّ المتابعة في سطر واحد */
.progress { grid-column: 1 / -1; margin-top: 18px; }
.bar { height: 8px; border-radius: 999px; background: rgba(214, 224, 255, .09); overflow: hidden; }
/* الامتلاء بقصّ لا بعرض: لا إعادة تخطيط أثناء الحركة، والطرف المدوّر يبقى مدوّراً.
   يبدأ من اليمين (بداية السطر في العربية). */
.bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(270deg, var(--tint-deep), var(--tint));
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px);
  transition: clip-path 800ms var(--ease-out);
}
[dir="rtl"] .bar i { clip-path: inset(0 0 0 calc(100% - var(--p, 0) * 100%) round 999px); }
.prow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 12px; }
.pstats { display: flex; gap: 14px; font-size: 14px; font-weight: 800; }
.stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stat b { font-weight: 800; color: var(--text); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ic.star { color: var(--gold); font-size: 17px; }
.ic.coin { color: #f6b93b; font-size: 16px; }

.go {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap;
  color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent);
  border-radius: 999px; padding: 9px 14px 8px 11px;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.go .ic { font-size: 16px; }
.card:active .go { background: var(--tint); color: #14102b; }

/* ---------- قريباً ---------- */
.soon {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border: 2px dashed rgba(214, 224, 255, .13); border-radius: 28px; color: var(--dim);
}
@media (min-width: 780px) { .soon { grid-column: 1 / -1; justify-content: center; } }
.soon-mark { width: 52px; height: 52px; flex: none; color: rgba(214, 224, 255, .3); }
.soon h2 { font-size: 18px; font-weight: 800; color: #c3cae3; line-height: 1.3; }
.soon p { font-size: 14.5px; }

.foot { text-align: center; color: #7d87a8; font-size: 13.5px; margin-top: clamp(28px, 6vw, 44px); }

@media (prefers-reduced-motion: reduce) {
  .mark.play .tumbler, .mark.play .base { animation: none; }
  .card, .bar i, .go { transition: none; }
}