/* ═══════════════════════════════════════════════════════════════
   بطاقات الاشتراك الثلاث (الفضية × الذهبية × الماسية) — خلية الحروف
   منقولة كما هي من subscription_cards/design-reference.html (تكييفان
   موقعيّان فقط: خطوط Fallback المحلّية، وقاعدتا التكامل أسفل الملف).
   كل الألوان معرّفة كمتغيرات pk-* على .pk-scope (نهاري)
   و .dark .pk-scope (ليلي) — لا تعتمد على أسماء توكنز الموقع.
   ملفٌّ مشترك تستضيفه الرئيسية (#plans في index.html) ونافذة الاشتراكات
   داخل اللعبة (#subs في game.html) وصفحة /pricing — مصدر واحد بلا تكرار.
   ═══════════════════════════════════════════════════════════════ */

/* ── نطاق الألوان ── */
.pk-scope{
  --pk-card:#fffdf8; --pk-card2:#fbf6ec;
  --pk-ink:#2d2a21; --pk-dim:#7c7361;
  --pk-gold:#a8842c; --pk-gold-soft:#cdb06a; --pk-gold-bright:#e8d49a; --pk-on-gold:#3a2c08;
  --pk-line:#a8842c29; --pk-line2:#a8842c4d;
  --pk-wash:#a8842c14; --pk-wash2:#a8842c26;
  --pk-gem:#6c7276; --pk-silver:#8f8f99;
  --pk-gem-wash:#6c72761a; --pk-gem-line:#6c727640;
  --pk-sil-hi:#dfdfe7; --pk-sil-wash:#8f8f991a; --pk-sil-line:#8f8f9942;
  --pk-shadow-card:0 12px 30px #5b4a1f1f;
  --pk-shadow-pop:0 24px 60px -18px #5b4a1f4d;
  --pk-shadow-gold:0 10px 26px -8px #a8842c66;
  --pk-shadow-gold-lg:0 18px 40px -10px #a8842c80;
}
.dark .pk-scope, .pk-scope.dark{
  --pk-card:#272219; --pk-card2:#211c15;
  --pk-ink:#f3ead6; --pk-dim:#bdb091;
  --pk-gold:#d6b15a; --pk-gold-soft:#e6cd8f; --pk-gold-bright:#e8d49a; --pk-on-gold:#3a2c08;
  --pk-line:#d6b15a2e; --pk-line2:#d6b15a54;
  --pk-wash:#d6b15a1f; --pk-wash2:#d6b15a30;
  --pk-gem:#c3cdd2; --pk-silver:#c9c9d4;
  --pk-gem-wash:#c3cdd21f; --pk-gem-line:#c3cdd23d;
  --pk-sil-hi:#e6e6ee; --pk-sil-wash:#c9c9d41f; --pk-sil-line:#c9c9d43d;
  --pk-shadow-card:0 12px 30px #00000047;
  --pk-shadow-pop:0 24px 60px -18px #00000073;
  --pk-shadow-gold:0 10px 26px -8px #d6b15a4d;
  --pk-shadow-gold-lg:0 18px 40px -10px #d6b15a66;
}

/* ── الشبكة ── */
.pk-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px; max-width:1180px; margin:0 auto; align-items:stretch;
}

/* ── البطاقة ── */
.pk-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:28px; padding:38px 32px 34px;
  color:var(--pk-ink); font-family:'Cairo','Cairo Fallback',sans-serif;
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
}
.pk-card.pk-gold{ box-shadow:var(--pk-shadow-pop), 0 0 60px -18px var(--pk-gold); }
.pk-card.pk-gold:hover{ transform:translateY(-8px); box-shadow:var(--pk-shadow-pop), 0 0 85px -14px var(--pk-gold); }
.pk-card.pk-dia{ box-shadow:var(--pk-shadow-card); }
.pk-card.pk-dia:hover{ transform:translateY(-8px); box-shadow:var(--pk-shadow-pop); }

/* ── طبقة الخلفية: إطار ضوئي دوّار + غسلات + جزيئات ── */
.pk-fx{ position:absolute; inset:0; border-radius:28px; overflow:hidden; pointer-events:none; }
.pk-gold .pk-fx{ background:var(--pk-line2); }
.pk-dia  .pk-fx{ background:var(--pk-gem-line); }
.pk-spin{ position:absolute; inset:-75%; animation:pkspin 7s linear infinite; }
.pk-gold .pk-spin{ background:conic-gradient(from 0deg, transparent 0deg 295deg, var(--pk-gold) 327deg, var(--pk-gold-bright) 342deg, transparent 360deg); }
.pk-dia  .pk-spin{ background:conic-gradient(from 0deg, transparent 0deg 298deg, var(--pk-gem) 328deg, var(--pk-silver) 344deg, transparent 360deg); animation-duration:10s; animation-direction:reverse; }
.pk-cover{ position:absolute; border-radius:26.5px; background:linear-gradient(160deg,var(--pk-card),var(--pk-card2)); }
.pk-gold .pk-cover{ inset:1.5px; }
.pk-dia  .pk-cover{ inset:1px; border-radius:27px; }
.pk-wash-b{ position:absolute; left:0; right:0; bottom:0; height:140px; }
.pk-gold .pk-wash-b{ background:radial-gradient(120% 95% at 50% 140%, var(--pk-wash2), transparent 72%); }
.pk-dia  .pk-wash-b{ height:120px; background:radial-gradient(120% 95% at 50% 140%, var(--pk-gem-wash), transparent 72%); }
.pk-dia .pk-wash-t{ position:absolute; top:0; left:0; width:230px; height:190px; background:radial-gradient(100% 100% at 8% 0%, var(--pk-gem-wash), transparent 72%); }

/* جزيئات صاعدة (سداسيات ذهبية / شرارات ماسية) */
.pk-p{ position:absolute; opacity:0; }
.pk-gold .pk-p{ color:var(--pk-gold); }
.pk-p.p1{ bottom:-24px; right:16%; width:15px; animation:pkrise 8.5s linear 1.2s infinite; }
.pk-p.p2{ bottom:-24px; right:52%; width:10px; color:var(--pk-gold-soft); animation:pkrise 11s linear 4s infinite; }
.pk-p.p3{ bottom:-24px; left:14%; width:12px; animation:pkrise 9.5s linear 6.5s infinite; }
.pk-dia .pk-s1{ top:66px; left:24px; width:13px; color:var(--pk-gem); opacity:1; animation:pktw 3.2s ease-in-out .4s infinite; }
.pk-dia .pk-s2{ top:108px; left:46px; width:9px; color:var(--pk-silver); opacity:1; animation:pktw 3.2s ease-in-out 1.6s infinite; }
.pk-dia .pk-s3{ bottom:-20px; left:30%; width:11px; color:var(--pk-gem); animation:pkrise 10s linear 2.5s infinite; }

/* ── الشارات ── */
.pk-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:2;
  overflow:hidden; padding:7px 18px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg,var(--pk-gold-bright),var(--pk-gold));
  color:var(--pk-on-gold); font-family:'Alexandria','Alexandria Fallback',sans-serif; font-size:13px; font-weight:700;
  box-shadow:var(--pk-shadow-gold);
}
.pk-badge::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,#ffffff66 50%,transparent 65%);
  background-size:250% 100%; animation:pksheen 4.6s ease-in-out infinite; }
.pk-chip{
  position:absolute; top:24px; left:24px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:999px;
  background:var(--pk-gem-wash); border:1px solid var(--pk-gem-line); color:var(--pk-gem);
  font-family:'Alexandria','Alexandria Fallback',sans-serif; font-size:13px; font-weight:600;
}

/* ── جسم البطاقة ── */
.pk-body{ position:relative; display:flex; flex-direction:column; flex:1; }

/* أيقونة الباقة + هالة نابضة + لمعة */
.pk-tilewrap{ position:relative; width:60px; height:60px; margin-bottom:20px; }
.pk-halo{ position:absolute; inset:-10px; border-radius:24px; animation:pkglow 3.2s ease-in-out infinite; }
.pk-gold .pk-halo{ background:radial-gradient(circle,var(--pk-wash2),transparent 70%); }
.pk-dia  .pk-halo{ background:radial-gradient(circle,var(--pk-gem-wash),transparent 70%); animation-duration:3.6s; }
.pk-tile{ position:relative; width:60px; height:60px; border-radius:18px; display:grid; place-items:center; overflow:hidden; }
.pk-gold .pk-tile{ background:linear-gradient(160deg,var(--pk-wash2),var(--pk-wash)); border:1px solid var(--pk-line2); color:var(--pk-gold); }
.pk-dia  .pk-tile{ background:var(--pk-gem-wash); border:1px solid var(--pk-gem-line); color:var(--pk-gem); }
.pk-tile::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,#ffffff40 50%,transparent 62%);
  background-size:250% 100%; animation:pksheen 5.4s ease-in-out .8s infinite; }

.pk-name{ margin:0 0 4px; font-family:'Alexandria','Alexandria Fallback',sans-serif; font-weight:700; font-size:24px; color:var(--pk-ink); }

/* السعر — لمعان متحرك على الرقم */
.pk-price{ display:flex; align-items:flex-end; gap:6px; margin:14px 0 18px; }
.pk-amount{
  font-family:'Alexandria','Alexandria Fallback',sans-serif; font-weight:800; font-size:44px; line-height:1;
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pktxt 4s linear infinite;
}
.pk-gold .pk-amount{ background-image:linear-gradient(100deg,var(--pk-gold) 25%,var(--pk-gold-bright) 45%,var(--pk-gold) 65%); }
.pk-dia  .pk-amount{ background-image:linear-gradient(100deg,var(--pk-gem) 25%,var(--pk-silver) 45%,var(--pk-gem) 65%); animation-duration:4.5s; }
.pk-per{ color:var(--pk-dim); font-size:16px; padding-bottom:6px; }

.pk-sep{ height:1px; margin-bottom:20px; }
.pk-gold .pk-sep{ background:linear-gradient(90deg,transparent,var(--pk-line2),transparent); }
.pk-dia  .pk-sep{ background:linear-gradient(90deg,transparent,var(--pk-gem-line),transparent); }

/* ── المزايا: مربع صحّ مذهّب + نص مع رقم بارز ── */
.pk-feats{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:15px; flex:1; }
.pk-feats li{ display:flex; align-items:center; gap:12px; font-size:16.5px; font-weight:500; animation:pkfeat .55s ease var(--d,.05s) both; }
.pk-chk{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; }
.pk-gold .pk-chk{ background:linear-gradient(160deg,var(--pk-gold-bright),var(--pk-gold)); box-shadow:0 3px 8px -2px var(--pk-gold); color:var(--pk-on-gold); }
.pk-dia  .pk-chk{ background:linear-gradient(160deg,var(--pk-silver),var(--pk-gem)); box-shadow:0 3px 8px -2px var(--pk-gem); color:var(--pk-card); }
.pk-chk svg{ width:13px; height:13px; }
.pk-num{ font-family:'Alexandria','Alexandria Fallback',sans-serif; font-weight:800; font-size:17.5px; }
.pk-gold .pk-num{ color:var(--pk-gold); }
.pk-dia  .pk-num{ color:var(--pk-gem); }

/* ── زر الاشتراك — لمعة دورية + رفع عند التحويم ── */
.pk-cta{
  position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; gap:8px;
  width:100%; padding:15px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--pk-gold-bright),var(--pk-gold));
  color:var(--pk-on-gold); font-family:'Alexandria','Alexandria Fallback',sans-serif; font-weight:700; font-size:17px;
  box-shadow:var(--pk-shadow-gold);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s;
}
.pk-cta:hover{ transform:translateY(-2px); box-shadow:var(--pk-shadow-gold-lg); }
.pk-cta::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,#ffffff59 50%,transparent 65%);
  background-size:250% 100%; animation:pksheen 3.8s ease-in-out infinite; }
.pk-dia .pk-cta::after{ animation-duration:4.4s; animation-delay:.9s; }

/* ── الحركات ── */
@keyframes pkspin{ to{ transform:rotate(360deg); } }
@keyframes pktxt{ 0%{ background-position:160% 0; } 100%{ background-position:-60% 0; } }
@keyframes pksheen{ 0%,55%{ background-position:210% 0; } 100%{ background-position:-110% 0; } }
@keyframes pkfeat{ 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes pktw{ 0%,100%{ opacity:.15; transform:scale(.55); } 50%{ opacity:.95; transform:scale(1.1); } }
@keyframes pkrise{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 10%{ opacity:.75; } 80%{ opacity:.2; } 100%{ transform:translateY(-215px) rotate(140deg); opacity:0; } }
@keyframes pkglow{ 0%,100%{ opacity:.5; } 50%{ opacity:.9; } }
@media (prefers-reduced-motion:reduce){ .pk-scope *{ animation:none !important; transition:none !important; } }

/* ── الباقة الفضية (pk-sil) ── */
.pk-card.pk-sil{ box-shadow:var(--pk-shadow-card); }
.pk-card.pk-sil:hover{ transform:translateY(-8px); box-shadow:var(--pk-shadow-pop); }
.pk-sil .pk-fx{ background:var(--pk-sil-line); }
.pk-sil .pk-spin{ background:conic-gradient(from 0deg, transparent 0deg 300deg, var(--pk-silver) 332deg, var(--pk-sil-hi) 346deg, transparent 360deg); animation-duration:12s; }
.pk-sil .pk-cover{ inset:1px; border-radius:27px; }
.pk-sil .pk-wash-b{ height:120px; background:radial-gradient(120% 95% at 50% 140%, var(--pk-sil-wash), transparent 72%); }
.pk-sil .pk-p{ color:var(--pk-silver); }
.pk-sil .pk-chip{ background:var(--pk-sil-wash); border-color:var(--pk-sil-line); color:var(--pk-silver); }
.pk-sil .pk-halo{ background:radial-gradient(circle,var(--pk-sil-wash),transparent 70%); animation-duration:4s; }
.pk-sil .pk-tile{ background:var(--pk-sil-wash); border:1px solid var(--pk-sil-line); color:var(--pk-silver); }
.pk-sil .pk-tile::after{ animation-duration:6.2s; animation-delay:2s; }
.pk-sil .pk-amount{ background-image:linear-gradient(100deg,var(--pk-silver) 25%,var(--pk-sil-hi) 45%,var(--pk-silver) 65%); animation-duration:5s; }
.pk-sil .pk-sep{ background:linear-gradient(90deg,transparent,var(--pk-sil-line),transparent); }
.pk-sil .pk-chk{ background:linear-gradient(160deg,var(--pk-sil-hi),var(--pk-silver)); box-shadow:0 3px 8px -2px var(--pk-silver); color:var(--pk-card); }
.pk-sil .pk-num{ color:var(--pk-silver); }
.pk-sil .pk-cta::after{ animation-duration:5s; animation-delay:1.6s; }

/* ── (تكامل الموقع — ليس من التصميم) ── */
/* حالتا «باقتك الحالية»/«باقة أدنى» (setPlanBtn في js/plans.js يطبّق مظهرهما inline): تعطيل لمعة pk-cta وارتفاع hover */
.pk-cta.pk-off::after{content:none}
.pk-cta.pk-off:hover{transform:none}
/* درس F3: لا حركة خلف نافذة بطمس backdrop-filter (وإلا يُعاد طمس الشاشة كل إطار) */
body:has(.auth-overlay:not(.hidden)) .pk-scope *,body:has(#pay-confirm:not(.hidden)) .pk-scope *{animation-play-state:paused!important}