/* ===== الكروت بإطار مستوحى من باتلقراوندز =====
   الإطار صورة شفافة يرسمها tools/frames.mjs، والرسمة تحته، والنصوص فوقه.
   كل المواقع بالنسبة من لوحة ٤٠٠×٥٦٠، و1em = عُشر عرض الكرت. */
.card {
  --w: 92px; --nf: 1;
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); font-size: calc(var(--w) / 10);
  cursor: pointer; color: #2d1a0c; transform-style: preserve-3d; border: 0; background: none; box-shadow: none; display: block; overflow: visible;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.card > * { position: absolute; }
.card .fr { inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; z-index: 2; }

/* الرسمة تحت الإطار */
.card .cart { z-index: 1; overflow: hidden; background: #1a1020; display: grid; place-items: center; font-size: 3.4em;
  left: 24%; top: 10.36%; width: 52%; height: 47.14%; border-radius: 50%; }
.card.cpt .cart { left: 20%; top: 10.36%; width: 60%; height: 58.57%; }
.card.hero .cart { left: 19.5%; top: 9.64%; width: 61%; height: 59.64%; border-radius: 50% 50% 0 0 / 36.5% 36.5% 0 0; }
.card.hero.cpt .cart { height: 71.07%; border-radius: 50% 50% 0 0 / 30.65% 30.65% 0 0; }
.card .cart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.card.hero .cart img { object-position: center 8%; }

/* النصوص */
.card .cn, .card .ct, .card .cp, .card .cb, .card .cs { z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.card .cn { left: 17.5%; width: 65%; top: 51.79%; height: 8.93%; font-family: var(--display); color: #fff; line-height: 1; white-space: nowrap;
  font-size: calc(0.82em * var(--nf)); -webkit-text-stroke: 0.18em #0b0710; paint-order: stroke fill; }
.card.cpt .cn { top: 66.25%; font-size: calc(1.2em * var(--nf)); }
.card.hero .cn { top: 62.68%; }
.card.hero.cpt .cn { top: 74.1%; }
.card .ct { left: 23%; width: 54%; top: 63.57%; height: 17.86%; font-size: 0.5em; line-height: 1.35; font-weight: 600; color: #2d1a0c; padding: 0 0.15em; overflow: hidden; }
.card .ct b { font-weight: 700; color: #1a0d04; }
.card.hero .ct { left: 17.5%; width: 65%; top: 76.07%; height: 12.14%; }
.card .cp { left: 31.5%; width: 37%; top: 85.18%; height: 5.36%; font-family: var(--display); color: #fff; font-size: 0.62em; line-height: 1;
  -webkit-text-stroke: 0.18em #0b0710; paint-order: stroke fill; padding-top: 0.08em; white-space: nowrap; }
.card.hero .cp { left: 30.5%; width: 39%; top: 89.29%; height: 5%; }
.card.sm .cp { font-size: 0.78em; }
.card .cb { left: 9%; width: 16.5%; top: 11.07%; height: 13.93%; font-size: 0.86em; line-height: 1; filter: drop-shadow(0 0.06em 0 rgba(0,0,0,.6)); }
.card.hero .cb { left: 69%; width: 17.5%; top: 51.79%; height: 13.57%; }
.card.hero.cpt .cb { top: 63.21%; }
.card .cs { font-family: var(--display); color: #fff; line-height: 1; font-size: 1.3em; -webkit-text-stroke: 0.19em #0b0710; paint-order: stroke fill; padding-top: 0.14em; }
.card .cs.coin { left: 10.5%; top: 82.14%; width: 19%; height: 13.57%; }
.card .cs.drop { left: 70.5%; top: 83.93%; width: 19%; height: 13.57%; }
.card .cs.guard { left: 71%; top: 81.43%; width: 18%; height: 13.57%; }
.card .cs.rune { left: 70.5%; top: 81.43%; width: 19%; height: 13.57%; }
.card .cs.ico { font-size: 0.8em; -webkit-text-stroke: 0; padding-top: 0.2em; filter: drop-shadow(0 0.06em 0 rgba(0,0,0,.55)); }

/* لمعة، هولو، ومضة ذهبية: داخل جسم الكرت فقط */
.card .holo, .card .shine, .card .sweep { inset: 15% 11% 5%; border-radius: 0.6em; pointer-events: none; z-index: 4; }
.card.hero .holo, .card.hero .shine { inset: 8% 8% 5%; border-radius: 3em 3em 0.6em 0.6em; }
.card .holo { opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
  background: repeating-linear-gradient(115deg, #ff2d95 0%, #ffe14d 7%, #45ffb3 14%, #3ab8ff 21%, #b24dff 28%, #ff2d95 35%);
  background-size: 400% 400%; background-position: var(--mx, 50%) var(--my, 50%); }
.card.tilt .holo { opacity: .14; }
.card.tilt.sig .holo, .card.tilt.foil .holo, .card.tilt.hero .holo { opacity: .26; }
.card .shine { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 48%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: overlay; }
.card.lg .shine, .card.xl .shine, .card:hover .shine, .card.sel .shine { animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 140% 0 } 60%, 100% { background-position: -60% 0 } }
.card .sweep { overflow: hidden; mix-blend-mode: color-dodge; }
.card .sweep::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 170, .7), transparent); animation: sweep 3.4s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* هالة الكروت الأسطورية والشخصيات */
.card.sig::after, .card.hero::after { content: ''; position: absolute; inset: 14% 9% 4%; border-radius: 1em; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), #ff9d2e, #ffe36a, #b05cff, #ff4f9a, #ff9d2e); filter: blur(0.6em); opacity: .5; animation: legend 3.5s linear infinite; }
.card.hero::after { inset: 6% 6% 4%; border-radius: 4em 4em 1em 1em; }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes legend { to { --spin: 360deg; } }
.card.sm.sig::after, .card.sm.hero::after { display: none; }

/* ظهر الكرت */
.card.back .bk { inset: 3% 9% 4%; border-radius: 0.7em; background: url(/art/web/card_back.webp) center / cover;
  border: 0.22em solid #1a0f08; box-shadow: 0 0.3em 0.7em rgba(0,0,0,.55), inset 0 0 0 0.14em #c99a3c; }
.card.guardback .bk { background-image: url(/art/web/guard_back.webp); }

/* المقاسات */
.card.sm { --w: 92px; } .card.md { --w: 128px; } .card.lg { --w: min(270px, 72vw); } .card.xl { --w: min(320px, 80vw); }
@media (min-width: 900px) { .hand .card.sm { --w: 124px; } }

/* اليد بشكل مروحة */
.hand { overflow: visible !important; justify-content: center; padding-top: 18px !important; }
.hand .card { margin-inline-start: var(--ov, -14px); transform-origin: 50% 120%;
  transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)); transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), filter .2s; }
.hand .card:first-child { margin-inline-start: 0; }
.hand .card:hover, .hand .card.sel { transform: translateY(-26px) rotate(0deg) scale(1.12); z-index: 5; }
.hand .card.playable { filter: drop-shadow(0 0 0.35em rgba(110, 255, 170, .85)); animation: ready 1.8s ease-in-out infinite; }
@keyframes ready { 50% { filter: drop-shadow(0 0 0.8em rgba(110, 255, 170, 1)); } }

/* لوحات الأحداث والمكائد (عريضة، مو كروت لعب) */
.ecard { --w: 320px; position: relative; width: var(--w); font-size: calc(var(--w) / 10); color: #2a1606;
  filter: drop-shadow(0 0.35em 0 rgba(12, 6, 23, .9)) drop-shadow(0 0.6em 0.9em rgba(0, 0, 0, .45)); }
.ecard .cf { position: relative; border-radius: 0.9em; padding: 0.42em;
  background: url(/art/web/tex_gold.webp) 0 0 / 180% auto, linear-gradient(145deg, #fff3b8 0%, #e2b04a 18%, #8a5a14 36%, #f6d77a 52%, #a8741d 70%, #ffe9a0 86%, #7a4e10 100%);
  background-blend-mode: overlay; box-shadow: inset 0 0 0 0.12em #2a1606, inset 0 0 0 0.24em rgba(255, 240, 190, .55); }
.ecard .cin { position: relative; border-radius: 0.6em; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, #6a3f98 0%, #24083f 72%); box-shadow: inset 0 0 0 0.12em #2a1606, inset 0 0 1.2em rgba(0, 0, 0, .6); }
.ecard .cart { position: relative; margin: 0.45em 0.45em 0; flex: none; border-radius: 0.6em; overflow: hidden; background: #1a0b2c;
  box-shadow: 0 0 0 0.12em #2a1606, 0 0 0 0.3em #e9bf5c, 0 0 0 0.42em #2a1606; }
.ecard .cart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecard .cname { position: relative; z-index: 3; margin: -1.15em -0.15em 0; height: 2.3em; display: grid; place-items: center;
  background: linear-gradient(180deg, #f3e2b8 0%, #d2b07a 55%, #9c7444 100%);
  clip-path: polygon(0 18%, 6% 0, 94% 0, 100% 18%, 97% 50%, 100% 82%, 94% 100%, 6% 100%, 0 82%, 3% 50%); }
.ecard .cname span { font-family: var(--display); font-size: 1.45em; line-height: 1; color: #fff; white-space: nowrap; -webkit-text-stroke: 0.14em #0b0710; paint-order: stroke fill; }
.ecard .ctext { border-radius: 0.5em; padding: 0.35em 0.5em; line-height: 1.35; text-align: center; color: #2a1606; font-weight: 600;
  background: url(/art/web/tex_parchment.webp) center / cover, linear-gradient(#f6e7c1, #e2c98f); box-shadow: inset 0 0 0 0.1em #6b4a1a, inset 0 0 0.8em rgba(110, 70, 20, .45); }
.ecard .shine { position: absolute; inset: 0.42em; border-radius: 0.6em; pointer-events: none; animation: shine 2.4s ease-in-out infinite;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 48%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: overlay; }
#cine .ecard { position: absolute; left: 0; top: 0; }

/* طبقة السينما */
#cine { position: fixed; inset: 0; z-index: 72; pointer-events: none; overflow: hidden; perspective: 1000px; }
#cine .card { position: absolute; left: 0; top: 0; }
.rays { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .35) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); }
.ring { position: absolute; border-radius: 50%; border: 6px solid #fff; pointer-events: none; }
.spark { position: absolute; pointer-events: none; font-size: 22px; line-height: 1; }
.shard { position: absolute; pointer-events: none; background-size: cover; }
.dim { position: absolute; inset: 0; background: radial-gradient(circle, rgba(12, 6, 23, .35), rgba(12, 6, 23, .85)); }
.cine-title { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--display); color: var(--gold); font-size: clamp(30px, 9vw, 64px);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); white-space: nowrap; text-align: center; }
.cine-title small { display: block; font-size: .42em; color: #fff; -webkit-text-stroke: 2px var(--ink); }
.firerain { position: absolute; font-size: 34px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #cine { display: none; } }
.hand { min-height: calc(92px * 1.4 + 34px) !important; padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; align-items: flex-end; }
@media (min-width: 900px) { .hand { min-height: calc(124px * 1.4 + 40px) !important; } }
@media (max-height: 700px) { .hand .card.sm { --w: 78px; } .hand { min-height: calc(78px * 1.4 + 30px) !important; } }
.guide img { object-position: center 18%; }

.hand .card.tut-hi { transform: translateY(-30px) rotate(0deg) scale(1.15); z-index: 9; }
.hand .card { touch-action: none; user-select: none; -webkit-user-select: none; }