/* ═══════════════════════════════════════════════════════
   GAMBETA — tarjetas de mejora (el objeto hero)
   ═══════════════════════════════════════════════════════ */

.draft-head{ width:var(--shell); margin:0 auto clamp(18px,3vh,34px); text-align:center; }
.draft-kicker{
  font-family:var(--f-cond); font-weight:700; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  margin-bottom:10px;
  animation:kickIn .6s var(--ease-out) both;
}
@keyframes kickIn{ from{opacity:0; letter-spacing:.6em} to{opacity:1} }
.draft-title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(34px,6.4vw,72px); line-height:.88; margin:0;
  letter-spacing:.004em;
}
.draft-desc{ color:var(--ink-3); margin:10px 0 0; font-size:14px; }

.draft-rail{
  width:min(1240px,100% - 32px); margin-inline:auto;
  display:flex; gap:clamp(14px,2.4vw,34px); justify-content:center;
  align-items:flex-start; flex-wrap:wrap;
  perspective:1600px;
  padding:14px 0 8px;
}
.draft-foot{
  width:var(--shell); margin:22px auto 0;
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

/* ── La tarjeta ────────────────────────────────────── */
.card{
  --tilt-x:0deg; --tilt-y:0deg; --gx:50%; --gy:50%;
  position:relative;
  width:clamp(230px, 25vw, 322px);
  aspect-ratio:322/452;
  border-radius:22px;
  background:#0c0c0e;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 22px 50px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.05) inset;
  transform-style:preserve-3d;
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .3s;
  -webkit-tap-highlight-color:transparent;
}
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* entrada escalonada, con la rotación del mockup */
.card{ animation:cardDeal .82s var(--ease-back) both; }
.card:nth-child(1){ animation-delay:.05s; --rest-rot:-3.2deg; }
.card:nth-child(2){ animation-delay:.16s; --rest-rot:.6deg; }
.card:nth-child(3){ animation-delay:.27s; --rest-rot:3.4deg; }
.card:nth-child(4){ animation-delay:.38s; --rest-rot:-1.8deg; }
@keyframes cardDeal{
  0%{ opacity:0; transform:translate3d(0,120px,-260px) rotate(-14deg) scale(.86); filter:blur(10px); }
  60%{ filter:blur(0); }
  100%{ opacity:1; transform:translate3d(0,0,0) rotate(var(--rest-rot,0deg)) scale(1); }
}
.card:hover, .card:focus-visible{
  transform:rotate(0deg) translate3d(0,-16px,50px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035);
  box-shadow:0 40px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.16) inset;
  border-color:rgba(255,255,255,.3);
  z-index:5;
}

/* micro-brillo de vidriera */
.card::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform:translateX(-150%);
  animation:cardMicroShine 6s var(--ease-out) infinite;
}
@keyframes cardMicroShine{
  0%{ transform:translateX(-150%); }
  30%{ transform:translateX(150%); }
  100%{ transform:translateX(150%); }
}

/* Arte (canvas procedural o foto real) */
.card__art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform .7s var(--ease-out), filter .5s;
  filter:saturate(.82) contrast(1.06);
}
.card:hover .card__art{ transform:scale(1.14) translateY(-6px); filter:saturate(1) contrast(1.12); }

/* Gradientes de legibilidad */
.card__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,6,8,.94) 0%, rgba(6,6,8,.64) 26%, rgba(6,6,8,.12) 48%, rgba(6,6,8,.5) 78%, rgba(6,6,8,.9) 100%);
}
.card__vig{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 110% 80% at 50% 40%, transparent 45%, rgba(0,0,0,.6) 100%);
  mix-blend-mode:multiply;
}
.card__grain{
  position:absolute; inset:0; z-index:2; opacity:.09; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* brillo que sigue al mouse */
.card__gloss{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.16), transparent 55%);
  transition:opacity .3s;
}
.card:hover .card__gloss{ opacity:1; }

/* Contenido */
.card__body{
  position:relative; z-index:3;
  height:100%;
  display:flex; flex-direction:column;
  padding:18px 18px 20px;
}
.card__kicker{
  font-family:var(--f-cond); font-weight:800;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  text-align:center; color:#fff; opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.card__title{
  font-family:var(--f-display); font-weight:400;
  text-transform:uppercase; text-align:center;
  color:#fff; margin:4px 0 0;
  line-height:.82; letter-spacing:.002em;
  font-size:clamp(34px, 4.6vw, 60px);
  text-shadow:0 4px 20px rgba(0,0,0,.75), 0 1px 0 rgba(0,0,0,.6);
  transform:scaleY(1.06);
  transform-origin:top center;
}
.card__title[data-len="long"]{ font-size:clamp(25px,3.3vw,42px); }
.card__title[data-len="xlong"]{ font-size:clamp(20px,2.6vw,33px); line-height:.9; }

.card__spacer{ flex:1; min-height:16px; }

.card__desc{
  font-size:12.6px; line-height:1.42; color:rgba(255,255,255,.86);
  text-align:center; text-shadow:0 2px 8px rgba(0,0,0,.9);
  margin:0 0 12px;
}
.card__fx{
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
}
.chip{
  font-family:var(--f-cond); font-weight:700; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(4px); white-space:nowrap;
}
.chip--up{ color:#7dffbe; border-color:rgba(23,201,100,.55); background:rgba(6,50,28,.6); }
.chip--down{ color:#ff9c9c; border-color:rgba(224,59,59,.5); background:rgba(58,10,10,.6); }
.chip--tag{ color:var(--gold-2); border-color:rgba(232,177,58,.5); background:rgba(48,34,6,.6); }
.chip--info{ color:#b9dcff; border-color:rgba(74,168,255,.45); background:rgba(8,28,50,.6); }

/* ── Tiers ─────────────────────────────────────────── */
.card--premium{
  border-color:rgba(232,177,58,.55);
  box-shadow:0 22px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(232,177,58,.28) inset, 0 0 42px rgba(232,177,58,.14);
}
.card--premium .card__scrim{
  background:
    linear-gradient(180deg, rgba(24,16,2,.92) 0%, rgba(28,19,3,.6) 26%, rgba(20,14,2,.1) 48%, rgba(14,9,1,.5) 78%, rgba(10,7,1,.92) 100%);
}
.card--premium .card__art{ filter:saturate(.6) contrast(1.1) sepia(.42) hue-rotate(-8deg); }
.card--premium .card__kicker{ color:var(--gold-2); }
.card--premium::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(112deg, transparent 34%, rgba(255,229,163,.3) 47%, rgba(255,255,255,.42) 50%, rgba(255,229,163,.3) 53%, transparent 66%);
  transform:translateX(-130%);
  animation:shine 4.2s var(--ease-in-out) infinite;
  animation-delay:1.2s;
}
@keyframes shine{ 0%{transform:translateX(-130%)} 26%,100%{transform:translateX(130%)} }
.card--premium:hover{ box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(232,177,58,.6) inset, 0 0 70px rgba(232,177,58,.3); }

.card--legendaria{
  border-color:rgba(160,107,255,.6);
  box-shadow:0 22px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(160,107,255,.32) inset, 0 0 56px rgba(160,107,255,.2);
}
.card--legendaria .card__scrim{
  background:linear-gradient(180deg, rgba(14,4,28,.94) 0%, rgba(18,6,34,.6) 26%, rgba(12,4,24,.1) 48%, rgba(9,3,18,.55) 78%, rgba(6,2,12,.94) 100%);
}
.card--legendaria .card__art{ filter:saturate(.5) contrast(1.14) hue-rotate(190deg); }
.card--legendaria .card__kicker{ color:#d9c1ff; }
.card--legendaria::after{
  content:''; position:absolute; inset:-2px; z-index:5; pointer-events:none; border-radius:22px;
  background:conic-gradient(from var(--ang,0deg), transparent, rgba(160,107,255,.4), rgba(232,177,58,.3), transparent 30%);
  opacity:.8;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:2px;
  animation:orbit 3.6s linear infinite;
}
@keyframes orbit{ to{ transform:rotate(360deg) } }

.card--maldita{ border-color:rgba(224,59,59,.55); }
.card--maldita .card__art{ filter:saturate(.45) contrast(1.2) sepia(.5) hue-rotate(-32deg); }
.card--maldita .card__kicker{ color:#ff9c9c; }
.card--maldita::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 80% 40% at 50% 80%, rgba(224,59,59,.12), transparent 70%);
  animation:malditaHumo 3s var(--ease-in-out) infinite alternate;
}
@keyframes malditaHumo{
  0%{ opacity:.5; transform:translateY(0); }
  100%{ opacity:1; transform:translateY(-8px); }
}

/* Estados de selección */
.card.is-locked{ pointer-events:none; }
.card.is-fading{ opacity:.4; transform:scale(.95); animation:cardFade .5s var(--ease-in-out) forwards; }
@keyframes cardFade{ to{ opacity:0; transform:translate3d(0,40px,-200px) scale(.9); filter:blur(8px) grayscale(1); } }
.card.is-chosen{ transform:scale(1.05); z-index:10; animation:cardChosen .9s var(--ease-back) forwards; }
@keyframes cardChosen{
  0%{ transform:rotate(0) scale(1.035) translateY(-16px); }
  35%{ transform:rotate(0) scale(1.16) translateY(-30px); box-shadow:0 60px 120px rgba(0,0,0,.85); }
  100%{ transform:rotate(0) scale(1.1) translateY(-24px); }
}

/* Reroll / skip */
.draft-token{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-cond); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.draft-token b{ color:var(--gold-2); font-size:16px; }

/* ── Mini-tarjeta (inventario / codex) ─────────────── */
.minicard{
  position:relative; border-radius:11px; overflow:hidden;
  border:1px solid var(--line); background:#0d0d10;
  aspect-ratio:1/1.13; cursor:default;
  transition:transform .2s var(--ease-out), border-color .2s;
}
.minicard:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.minicard__art{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; }
.minicard__sc{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.5),rgba(8,8,10,.95)); }
.minicard__t{
  position:absolute; inset:auto 7px 7px; z-index:2;
  font-family:var(--f-display); text-transform:uppercase; font-size:14px; line-height:.9;
  text-shadow:0 2px 8px #000;
}
.minicard--premium{ border-color:rgba(232,177,58,.4); }
.minicard--premium .minicard__t{ color:var(--gold-2); }
.minicard--legendaria{ border-color:rgba(160,107,255,.45); }
.minicard--legendaria .minicard__t{ color:#d9c1ff; }

@media (max-width:820px){
  .card{ width:min(300px, 82vw); }
  .draft-rail{ gap:16px; }
}