/* ============================================================
   קלף המלכה — סגנון משותף לקטלוג ולתצוגה המקדימה בפאנל
   ============================================================ */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ---- היפוך ----
   ⚠️ המבנה חייב להיות שלוש שכבות: עוטף (פרספקטיבה) → פנימי (מסתובב)
   → שתי פאות. אי אפשר לסובב את .card עצמו — יש עליו overflow:hidden
   והפאה האחורית נחתכת. */
.cardflip{position:relative; aspect-ratio:63/88; perspective:1400px; cursor:pointer;
  outline:none}
.cardflip-in{position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.cardflip.flipped .cardflip-in{transform:rotateY(180deg)}
.cardflip:focus-visible .cardflip-in{box-shadow:0 0 0 3px var(--tint,#8a7fb0)}

.card.face{position:absolute; inset:0; aspect-ratio:auto;
  backface-visibility:hidden; -webkit-backface-visibility:hidden}
.card.face.back{transform:rotateY(180deg)}
/* ⚠️ **backface-visibility מסתיר רק בעין, לא ללחיצות.** בלי השורות
   האלה הפאה שפונה לאחור עדיין תופסת את הלחיצה: לחיצה על "לדף שלה"
   פגעה ב-.foot של הפנים, עלתה לקלף, והפכה אותו חזרה — כלומר הכפתור
   "לא עבד". בדיקה עם element.click() לא תופסת את זה כי היא עוקפת
   את בדיקת הפגיעה; רק document.elementFromPoint חושף את זה. */
.cardflip.flipped .card.face.front{pointer-events:none}
.cardflip:not(.flipped) .card.face.back{pointer-events:none}

/* ההרמה עוברת לעוטף — על הפאות היא הייתה מתנגשת עם הסיבוב */
.cardflip:hover .cardflip-in{transform:translateY(-6px)}
.cardflip.flipped:hover .cardflip-in{transform:rotateY(180deg) translateY(-6px)}

/* רמז ההיפוך בפינה */
.fliphint{position:absolute; bottom:9px; inset-inline-start:11px; z-index:6;
  font-size:15px; line-height:1; color:#fff; opacity:.32; transition:.2s;
  text-shadow:0 1px 3px #000}
.cardflip:hover .fliphint{opacity:.85}

/* ---- גב הקלף ---- */
.card.back{background:linear-gradient(165deg,#1a1230,#100b1c 60%,#0b0714)}
.back-in{position:relative; z-index:5; height:100%; display:flex; flex-direction:column;
  padding:15px 15px 13px; gap:9px}
.back-head h3{margin:0; font-size:16px; letter-spacing:-.2px}
.back-head span{font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--tint,#8a7fb0); font-weight:800}
.offers{list-style:none; margin:0; padding:0; display:grid; gap:7px; overflow:hidden; flex:1;
  align-content:start}
.offers li{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:8px 10px}
.o-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.o-top b{font-size:12.5px}
.o-price{font-size:14px; font-weight:800; color:var(--tint,#e8c766); white-space:nowrap}
.o-price small{font-size:9.5px; font-weight:600; color:#9a8bb0; margin-inline-start:2px}
.offers p{margin:4px 0 0; font-size:10.5px; line-height:1.5; color:#9a8bb0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.back-empty{margin:0; font-size:12px; color:#9a8bb0; flex:1}
.back-abils{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.back-abils li{font-size:10.5px; color:#cbbfdb; padding-inline-start:11px; position:relative;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.back-abils li::before{content:'◆'; position:absolute; inset-inline-start:0;
  color:var(--tint,#8a7fb0); font-size:7px; top:3px}
.back-extra{font-size:10.5px; color:#9a8bb0}
/* ⚠️ זה <a> ולא <button> — צריך display/text-align/box-sizing מפורשים,
   אחרת הוא נופל לזרימת inline והכפתור מאבד את הצורה. */
.back-cta{display:block; text-align:center; text-decoration:none; box-sizing:border-box;
  width:100%; padding:9px; border-radius:10px; font-family:inherit;
  font-size:12.5px; font-weight:700; cursor:pointer; color:#fff;
  border:1px solid var(--tint,#8a7fb0); background:color-mix(in srgb, var(--tint,#8a7fb0) 22%, transparent);
  transition:.18s}
.back-cta:hover{background:var(--tint,#8a7fb0)}

.card{
  position:relative; aspect-ratio:63/88; border-radius:16px;
  background:linear-gradient(160deg,#1d1430,#120c1e 55%,#0d0817);
  border:1px solid var(--line,#2a1f3d); overflow:hidden; cursor:pointer;
  box-shadow:0 10px 30px -18px #000;
}
.card.faded{filter:grayscale(.85) brightness(.6)}
.card.faded::after{
  content:'הקלף עזב את האוסף'; position:absolute; inset:auto 0 42% 0; text-align:center;
  font-size:12px; font-weight:700; color:var(--muted,#9a8bb0); letter-spacing:1px;
}
.card .frame{position:absolute;inset:0;border-radius:16px;border:2px solid var(--tint,#555);
  opacity:.85;pointer-events:none;z-index:4}
.card .sheen{
  position:absolute;inset:-40%;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 48%,transparent 56%);
}
.card:hover .sheen{opacity:1;animation:sweep 1.1s ease}
@keyframes sweep{from{transform:translateX(-45%)}to{transform:translateX(45%)}}

.card .art{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0}
.card .art-fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  font-size:56px;opacity:.25;background:linear-gradient(160deg,#241a3c,#140d22)}
.card .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,#07040d 6%,rgba(7,4,13,.86) 34%,rgba(7,4,13,.15) 62%,transparent 82%)}

.card .top{position:absolute;top:10px;inset-inline:10px;z-index:5;display:flex;
  align-items:center;justify-content:space-between;gap:6px}
.house{font-size:10px;font-weight:800;letter-spacing:.8px;padding:4px 9px;border-radius:999px;
  background:rgba(0,0,0,.5);border:1px solid currentColor;backdrop-filter:blur(4px)}
.gem{width:22px;height:22px;border-radius:6px;transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 0 12px -2px currentColor;background:currentColor}

.card .body{position:absolute;inset-inline:0;bottom:0;z-index:5;padding:12px 13px 13px}
.card .name{font-size:19px;font-weight:800;line-height:1.15;margin:0 0 2px;text-shadow:0 2px 12px #000}
.card .title{font-size:11px;color:var(--gold,#e8c766);font-weight:600;margin:0 0 9px;opacity:.9}

.stats{display:grid;gap:5px;margin-bottom:9px}
.stat{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;font-size:10px}
.stat span{color:var(--muted,#9a8bb0);white-space:nowrap;max-width:70px;overflow:hidden;text-overflow:ellipsis}
.bar{height:4px;border-radius:99px;background:rgba(255,255,255,.11);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--tint,#888);
  box-shadow:0 0 8px -1px var(--tint,#888)}

.abilities{margin:0 0 9px;padding:0;list-style:none;display:grid;gap:3px}
.abilities li{font-size:10.5px;color:#cbbfdb;line-height:1.35;padding-inline-start:11px;position:relative}
.abilities li::before{content:'◆';position:absolute;inset-inline-start:0;color:var(--tint,#888);font-size:7px;top:3px}

/* כוכבים — מילוי חלקי דרך gradient על הטקסט עצמו,
   כך שאין צורך בחצאי-כוכב כתמונות */
.stars{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px}
.stars .sfill{
  position:relative;font-size:13px;letter-spacing:1.5px;line-height:1;
  background:linear-gradient(to left,var(--gold,#e8c766) var(--p,0%),rgba(255,255,255,.18) var(--p,0%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stars b{font-weight:800;color:var(--gold,#e8c766);font-size:12px}
.stars i{font-style:normal;color:var(--muted,#9a8bb0);font-size:10.5px}
.stars.pending span{color:var(--muted,#9a8bb0);font-size:10px;letter-spacing:.2px}

.card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-top:1px solid rgba(255,255,255,.09);padding-top:8px}
.price{font-size:13px;font-weight:800}
.price small{font-size:9px;color:var(--muted,#9a8bb0);font-weight:600}
.held{font-size:9.5px;font-weight:800;color:#0c0810;background:var(--gold,#e8c766);
  padding:3px 8px;border-radius:999px;letter-spacing:.4px}
.status-tag{font-size:9.5px;font-weight:700;color:var(--muted,#9a8bb0)}

/* חשיפת קלף */
.reveal{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,2,8,.9);backdrop-filter:blur(8px)}
.reveal.on{display:grid}
.reveal .flip{width:min(300px,78vw);aspect-ratio:63/88;transform-style:preserve-3d;
  animation:flipIn 1.15s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes flipIn{
  0%{transform:rotateY(180deg) scale(.75);opacity:0}
  55%{opacity:1}
  100%{transform:rotateY(0) scale(1);opacity:1}
}
.reveal .glow{position:absolute;width:min(300px,78vw);aspect-ratio:63/88;border-radius:16px;
  box-shadow:0 0 90px 10px var(--gold,#e8c766);opacity:0;animation:glow 1.4s ease forwards}
@keyframes glow{0%,40%{opacity:0}70%{opacity:.75}100%{opacity:.2}}
.reveal h2{position:absolute;bottom:12%;font-size:22px;color:var(--gold,#e8c766);
  opacity:0;animation:fadeUp .5s .9s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
  .card .name{font-size:15px}
  .card .title{font-size:9.5px;margin-bottom:7px}
  .abilities li{font-size:9.5px}
}

/* בתוך חשיפת קלף ובקלף מוקטן בטבלת המובילות אין היפוך אינטראקטיבי */
.reveal .cardflip-in, .lb-mini .cardflip-in{transform:none !important; transition:none}
.reveal .fliphint, .lb-mini .fliphint{display:none}