/* ══════════════════════════════════════════════════════
   CardVault v3  —  cards.css
   Card anatomy (top → bottom):
     .card-header      rank pill · name inline | HP + type
     .card-art-frame   type-coloured decorative border
     .card-flavour     italic flavour text / character quote
     .card-attacks     1–2 attack rows
     .card-wrr         weakness · resistance · retreat (3 tier variants)
     .card-footer      rarity + card number
     .card-copyright   pinned absolute
   z-layers:  border-frame:20  holo:18  shimmer:17  content:1  texture:0
══════════════════════════════════════════════════════ */

/* ════════════════════════════════
   CARD SLOT  (3-D wrapper)
════════════════════════════════ */
.card-slot {
  position:absolute; inset:0;
  border-radius:20px;
  transform-style:preserve-3d;
  cursor:grab; user-select:none; touch-action:none;
}
.card-slot:active { cursor:grabbing; }

/* ════════════════════════════════
   SHARED FACE
════════════════════════════════ */
.card-face {
  position:absolute; inset:0; border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column;
}

/* ════════════════════════════════
   BACK FACE
════════════════════════════════ */
.card-back-face {
  background:linear-gradient(135deg,#111827 0%,#1e2d4a 50%,#111827 100%);
  border:2px solid rgba(79,142,247,.3);
  box-shadow:0 24px 64px rgba(0,0,0,.8), 0 0 40px rgba(79,142,247,.15);
  align-items:center; justify-content:center;
}
.card-back-pattern {
  width:75%; height:75%;
  border:1px solid rgba(79,142,247,.2); border-radius:10px;
  background:repeating-conic-gradient(rgba(79,142,247,.06) 0%,transparent .5%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative',serif; font-size:1.4rem;
  color:rgba(79,142,247,.35);
  box-shadow:inset 0 0 30px rgba(0,0,0,.3);
}

/* ════════════════════════════════
   FRONT FACE
════════════════════════════════ */
.card-front-face {
  background:#0b1120;
  border:2px solid var(--rarity-color, var(--common));
  box-shadow:
    0 24px 64px rgba(0,0,0,.8),
    0 0 40px var(--rarity-glow, rgba(156,163,175,.2)),
    0 0 90px var(--rarity-glow-wide, rgba(156,163,175,.05));
  flex-direction:column; padding:0; position:relative;
}
/* Diagonal line texture */
.card-front-face::before {
  content:''; position:absolute; inset:0; border-radius:18px;
  pointer-events:none; z-index:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0px,transparent 18px,
    rgba(255,255,255,.016) 18px,rgba(255,255,255,.016) 19px
  );
}
.card-front-face > * { position:relative; z-index:1; }

/* ════════════════════════════════
   HEADER  — name row | HP block
════════════════════════════════ */
.card-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px 6px;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.16) 100%);
  gap:6px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Rank + name on one row */
.card-name-row {
  display:flex; align-items:center; gap:5px;
  min-width:0; flex:1; overflow:hidden;
}

/* Rank pill */
.card-rank-tag {
  display:inline-block; flex-shrink:0;
  font-family:'Orbitron',monospace;
  font-size:.38rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:2px 5px; border-radius:3px; line-height:1.5;
  white-space:nowrap;
}
.rank-basic  { background:rgba(156,163,175,.15); color:#9ca3af; border:1px solid rgba(156,163,175,.28); }
.rank-stage1 { background:rgba(52,211,153,.12);  color:#34d399; border:1px solid rgba(52,211,153,.28); }
.rank-stage2 { background:rgba(96,165,250,.12);  color:#60a5fa; border:1px solid rgba(96,165,250,.28); }
.rank-ex {
  background:linear-gradient(90deg,rgba(245,200,66,.22),rgba(249,115,22,.22));
  color:#f5c842; border:1px solid rgba(245,200,66,.5);
  text-shadow:0 0 7px rgba(245,200,66,.7);
  animation:exGlow 1.6s ease-in-out infinite alternate;
}
@keyframes exGlow {
  from { box-shadow:0 0 4px rgba(245,200,66,.3); }
  to   { box-shadow:0 0 10px rgba(245,200,66,.75),0 0 22px rgba(249,115,22,.3); }
}

/* Card name — truncates, sits right of rank pill */
.card-name-top {
  font-family:'Cinzel Decorative',serif;
  font-size:.6rem; font-weight:700;
  color:#e0e4f6; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25; min-width:0;
}

/* HP block */
.card-hp-block {
  display:flex; align-items:center; gap:1px;
  flex-shrink:0; white-space:nowrap;
}
.card-hp-label {
  font-family:'Orbitron',monospace; font-size:.4rem;
  font-weight:700; color:rgba(255,255,255,.4);
  letter-spacing:.08em; margin-right:1px;
}
.card-hp-val {
  font-family:'Orbitron',monospace; font-size:.95rem;
  font-weight:900;
  color:var(--rarity-color,#e8eaf6);
  text-shadow:0 0 12px var(--rarity-glow,transparent);
  line-height:1;
}
.card-type-icon-top {
  margin-left:2px;
}

/* ════════════════════════════════
   ART FRAME
════════════════════════════════ */

.card-front-face {
  height: 100%;
}

.card-art-frame {
  margin:6px 8px 0;
  border-radius:8px; padding:3px;
  background:linear-gradient(135deg,
    var(--type-color,#4f8ef7) 0%,
    rgba(255,255,255,.14) 50%,
    var(--type-color,#4f8ef7) 100%
  );
  flex: 0 0 42%;
  min-height:80px;
  box-shadow:0 0 8px var(--type-color,rgba(79,142,247,.3));
  /* Make the inner art fill the available height */
  display:flex; flex-direction:column;
}
.card-art {
  width:100%;
  flex:1; min-height:0;          /* fill whatever the frame gives */
  border-radius:5px; overflow:hidden;
  display:block; position:relative;
  background:linear-gradient(135deg,#1a2540,#0d1420);
  box-shadow:inset 0 0 22px rgba(0,0,0,.65);
}
.card-art img {
  width:100%; height:100%; object-fit:cover; display:block; border-radius:5px;
}
.card-art-placeholder {
  position:absolute; inset:0; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a2540,#0d1420);
}

/* ════════════════════════════════
   FLAVOUR TEXT  (replaces type strip)
════════════════════════════════ */
.card-flavour {
  margin:4px 10px 0;
  font-family:'Rajdhani',sans-serif;
  font-size:.55rem; font-weight:400; font-style:italic;
  color:rgba(255,255,255,.52);
  line-height:1.35; letter-spacing:.01em;
  text-align:center;
  /* Clamp to 2 lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex-shrink:0;
  /* subtle type-tinted top rule */
  padding-top:3px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════
   ATTACKS
════════════════════════════════ */
.card-attacks {
  display:flex; flex-direction:column; gap:3px;
  padding:4px 8px 0;
  flex:0 1 auto; min-height:0; overflow:hidden;
}
.card-attack {
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.06);
  border-left:2px solid var(--type-color,rgba(255,255,255,.2));
  border-radius:5px; padding:4px 6px; flex-shrink:0;
}
.card-attack-top {
  display:flex; align-items:center; gap:4px; min-width:0;
}
.card-attack-cost {
  display:flex; gap:2px; flex-shrink:0; align-items:center;
}
.energy-pip {
  font-size:.65rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px;
  background:rgba(255,255,255,.1); border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  flex-shrink:0; overflow:hidden;
}
.energy-pip img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.card-attack-name {
  font-family:'Rajdhani',sans-serif;
  font-size:.68rem; font-weight:700;
  color:#ced4ee; letter-spacing:.02em;
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-attack-damage {
  font-family:'Orbitron',monospace;
  font-size:.78rem; font-weight:900;
  color:var(--rarity-color,#e8eaf6);
  text-shadow:0 0 8px var(--rarity-glow,transparent);
  white-space:nowrap; flex-shrink:0; margin-left:3px;
}
.card-attack-desc {
  font-family:'Rajdhani',sans-serif;
  font-size:.5rem; font-weight:400; font-style:italic;
  color:rgba(255,255,255,.42);
  line-height:1.35; margin-top:2px; letter-spacing:.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ════════════════════════════════
   WEAKNESS · RESISTANCE · RETREAT
   Three visual tiers based on rarity.
════════════════════════════════ */
.card-wrr {
  display:flex; align-items:stretch;
  margin:4px 8px 0;
  flex-shrink:0;
}

.wrr-cell {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px; flex:1; padding:3px 2px;
}
.wrr-label {
  font-family:'Orbitron',monospace;
  font-size:.36rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
  line-height:1; white-space:nowrap;
}
.wrr-val {
  display:flex; align-items:center; gap:3px;
  font-family:'Orbitron',monospace;
  font-size:.55rem; font-weight:700;
  color:rgba(255,255,255,.75);
}
.wrr-mod {
  font-family:'Orbitron',monospace;
  font-size:.52rem; font-weight:900;
}
.weakness-mod   { color:#f87171; }
.resistance-mod { color:#34d399; }

.wrr-divider {
  width:1px; align-self:stretch; margin:3px 0;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
}

/* Retreat pips */
.wrr-retreat-pips {
  display:flex; gap:2px; align-items:center; flex-wrap:nowrap;
}
.retreat-pip {
  font-size:.58rem; color:rgba(255,255,255,.5);
  line-height:1;
}

/* ── TIER 1  common–rare: clean, minimal ── */
.wrr-tier-1 {
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.2);
  border-radius:0;
}
.wrr-tier-1 .wrr-label { color:rgba(255,255,255,.32); }
.wrr-tier-1 .wrr-divider { background:rgba(255,255,255,.08); }

/* ── TIER 2  epic–legendary: angular, glowing ── */
.wrr-tier-2 {
  /* angled clip-path gives a parallelogram shape */
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  background:linear-gradient(90deg,
    rgba(0,0,0,.45) 0%,
    rgba(var(--type-color-rgb,79,142,247),.08) 50%,
    rgba(0,0,0,.45) 100%
  );
  border-top:1px solid var(--type-color,rgba(255,255,255,.2));
  border-bottom:1px solid var(--type-color,rgba(255,255,255,.15));
  box-shadow:0 0 10px var(--rarity-glow,transparent);
  border-radius:0;
}
.wrr-tier-2 .wrr-label {
  color:var(--type-color,rgba(255,255,255,.5));
  opacity:.7;
}
.wrr-tier-2 .wrr-val { color:#fff; }
.wrr-tier-2 .wrr-divider {
  background:linear-gradient(180deg,transparent,var(--type-color,rgba(255,255,255,.3)),transparent);
}
.wrr-tier-2 .wrr-mod { text-shadow:0 0 6px currentColor; }

/* ── TIER 3  mythical–secret: prismatic, intense ── */
.wrr-tier-3 {
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  background:linear-gradient(90deg,
    rgba(123,47,255,.15) 0%,
    rgba(0,207,255,.1)   30%,
    rgba(255,0,128,.1)   70%,
    rgba(123,47,255,.15) 100%
  );
  border-top:1px solid;
  border-bottom:1px solid;
  border-image:linear-gradient(90deg,
    #7b2fff,#00cfff,#ff0080,#ffd700) 1;
  animation:wrrPrismatic 3s linear infinite;
  border-radius:0;
}
@keyframes wrrPrismatic {
  from { filter:hue-rotate(0deg) brightness(1.1); }
  to   { filter:hue-rotate(360deg) brightness(1.3); }
}
.wrr-tier-3 .wrr-label {
  background:linear-gradient(90deg,#7b2fff,#00cfff,#ff0080);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:wrrPrismatic 3s linear infinite;
  opacity:1;
}
.wrr-tier-3 .wrr-val {
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.7);
}
.wrr-tier-3 .wrr-mod {
  text-shadow:0 0 10px currentColor;
  filter:brightness(1.4);
}
.wrr-tier-3 .wrr-divider {
  background:linear-gradient(180deg,
    transparent,rgba(255,255,255,.6),transparent);
  box-shadow:0 0 4px rgba(255,255,255,.4);
}
.wrr-tier-3 .retreat-pip {
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.8);
  animation:wrrPrismatic 3s linear infinite;
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 10px 16px; /* 16px bottom clears the copyright strip */
  margin-top:auto; flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.04);
}
.card-rarity-badge {
  font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  text-shadow:0 0 8px var(--rarity-glow,transparent);
}
.border-label { opacity:.58; font-size:.52rem; font-weight:400; }
.card-number  { font-family:'Orbitron',monospace; font-size:.44rem; color:rgba(255,255,255,.28); }

/* ════════════════════════════════
   COPYRIGHT STRIP
════════════════════════════════ */
.card-copyright {
  position:absolute; bottom:0; left:0; right:0; height:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',monospace; font-size:.33rem;
  letter-spacing:.1em; color:rgba(255,255,255,.18);
  z-index:22; pointer-events:none;
  border-radius:0 0 17px 17px;
  background:rgba(0,0,0,.48);
}

/* ════════════════════════════════
   BORDER FRAME OVERLAY  z:20
   background:transparent so card content beneath is never covered.
   Rings are drawn via box-shadow only.
════════════════════════════════ */
.card-border-frame {
  position:absolute; inset:0; border-radius:20px;
  pointer-events:none; z-index:20;
  background:transparent;
}
.card-border-frame::before,
.card-border-frame::after {
  content:''; position:absolute; pointer-events:none; border-radius:inherit;
}

/* NORMAL */
.border-normal .card-border-frame {
  box-shadow:inset 0 0 0 2.5px #b0b0b8,inset 0 0 0 4px rgba(255,255,255,.08),0 0 8px rgba(168,168,176,.32);
}

/* FOIL */
.border-foil .card-border-frame {
  box-shadow:
    inset 0 0 0 3px var(--type-color,#a78bfa),
    inset 0 0 0 4px rgba(255,255,255,.12),
    0 0 18px var(--type-color,#a78bfa);
  animation:foilShift 4s linear infinite;
}
.border-foil .card-border-frame::after {
  inset:3px; border-radius:17px;
  background:linear-gradient(125deg,transparent 0%,rgba(255,255,255,.0) 30%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.0) 70%,transparent 100%);
  animation:foilSweep 3.5s ease-in-out infinite;
}
@keyframes foilShift {
  0%  { filter:hue-rotate(0deg)   brightness(1.1); }
  50% { filter:hue-rotate(180deg) brightness(1.35); }
  100%{ filter:hue-rotate(360deg) brightness(1.1); }
}
@keyframes foilSweep {
  0%,39%  { transform:translateX(-120%) skewX(-12deg); opacity:0; }
  55%     { transform:translateX(120%)  skewX(-12deg); opacity:1; }
  56%,100%{ opacity:0; }
}

/* HOLLOW FOIL */
.border-hollow-foil .card-border-frame {
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.55),
    inset 0 0 0 5px rgba(0,207,255,.3),
    0 0 14px rgba(255,255,255,.28);
  animation:hollowSpin 3s linear infinite;
}
.border-hollow-foil .card-border-frame::after {
  inset:5px; border-radius:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
@keyframes hollowSpin {
  from { filter:hue-rotate(0deg)   saturate(1.9) brightness(1.25); }
  to   { filter:hue-rotate(360deg) saturate(1.9) brightness(1.25); }
}

/* SPECIAL */
.border-special .card-border-frame {
  box-shadow:
    inset 0 0 0 3px #ffd700,
    inset 0 0 0 6px rgba(184,134,11,.7),
    0 0 20px rgba(255,215,0,.5),0 0 45px rgba(255,215,0,.2);
  animation:specialGold 2.5s ease-in-out infinite alternate;
}
.border-special .card-border-frame::before {
  inset:0;
  background:repeating-linear-gradient(60deg,transparent,transparent 6px,rgba(255,230,100,.06) 6px,rgba(255,230,100,.06) 7px);
}
@keyframes specialGold {
  from { filter:brightness(1)   saturate(1.2); box-shadow:inset 0 0 0 3px #ffd700,inset 0 0 0 6px rgba(184,134,11,.7),0 0 20px rgba(255,215,0,.5),0 0 45px rgba(255,215,0,.2); }
  to   { filter:brightness(1.4) saturate(1.7); box-shadow:inset 0 0 0 3px #ffd700,inset 0 0 0 6px rgba(184,134,11,.7),0 0 32px rgba(255,215,0,.8),0 0 75px rgba(255,215,0,.36); }
}

/* SPECIAL FOIL */
.border-special-foil .card-border-frame {
  box-shadow:
    inset 0 0 0 4px var(--type-color,rgba(255,0,128,.9)),
    inset 0 0 0 7px rgba(255,255,255,.18),
    0 0 22px rgba(123,47,255,.65),0 0 55px rgba(0,207,255,.42),0 0 100px rgba(255,0,128,.28);
  animation:sfAurora 2s linear infinite,sfPulse 1.5s ease-in-out infinite alternate;
}
/* Default inner shimmer */
.border-special-foil .card-border-frame::after {
  inset:4px; border-radius:16px;
  opacity:.55; mix-blend-mode:screen;
  animation:sfSweep 2.8s ease-in-out infinite;
  background:linear-gradient(125deg,transparent 0%,rgba(0,207,255,.18) 20%,rgba(255,0,128,.22) 50%,rgba(123,47,255,.18) 80%,transparent 100%);
}
@keyframes sfAurora {
  from { filter:hue-rotate(0deg)   saturate(2.1) brightness(1.35); }
  to   { filter:hue-rotate(360deg) saturate(2.1) brightness(1.35); }
}
@keyframes sfPulse {
  from { box-shadow:inset 0 0 0 4px var(--type-color,rgba(255,0,128,.9)),inset 0 0 0 7px rgba(255,255,255,.18),0 0 22px rgba(123,47,255,.65),0 0 55px rgba(0,207,255,.42); }
  to   { box-shadow:inset 0 0 0 4px var(--type-color,rgba(255,0,128,1)),inset 0 0 0 7px rgba(255,255,255,.25),0 0 44px rgba(123,47,255,.9),0 0 100px rgba(0,207,255,.72),0 0 140px rgba(255,0,128,.42); }
}
@keyframes sfSweep {
  0%,100%{ transform:rotate(0deg)   scale(1);   opacity:.4; }
  50%    { transform:rotate(180deg) scale(1.05); opacity:.7; }
}

/* Type-specific Special Foil inner sheen */
.card-front-face[data-type="water"].border-special-foil .card-border-frame::after {
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%,rgba(56,189,248,.35) 0%,transparent 65%),
    radial-gradient(ellipse 60% 80% at 70% 65%,rgba(6,182,212,.28) 0%,transparent 60%),
    repeating-linear-gradient(-30deg,transparent 0px,transparent 8px,rgba(56,189,248,.07) 8px,rgba(56,189,248,.07) 9px);
}
.card-front-face[data-type="fire"].border-special-foil .card-border-frame::after {
  background:
    radial-gradient(ellipse 70% 90% at 50% 80%,rgba(251,146,60,.45) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 10%,rgba(239,68,68,.3) 0%,transparent 55%),
    repeating-linear-gradient(70deg,transparent 0px,transparent 5px,rgba(251,146,60,.07) 5px,rgba(251,146,60,.07) 6px);
}
.card-front-face[data-type="wind"].border-special-foil .card-border-frame::after {
  background:
    repeating-linear-gradient(-60deg,transparent 0px,transparent 12px,rgba(163,230,53,.12) 12px,rgba(163,230,53,.12) 13px,transparent 13px,transparent 24px,rgba(255,255,255,.06) 24px,rgba(255,255,255,.06) 25px),
    radial-gradient(ellipse 120% 40% at 50% 50%,rgba(163,230,53,.15) 0%,transparent 70%);
}
.card-front-face[data-type="earth"].border-special-foil .card-border-frame::after {
  background:
    radial-gradient(ellipse 60% 70% at 25% 75%,rgba(161,98,7,.4) 0%,transparent 55%),
    radial-gradient(ellipse 55% 60% at 75% 30%,rgba(120,80,20,.3) 0%,transparent 50%),
    repeating-linear-gradient(30deg,transparent 0px,transparent 10px,rgba(161,98,7,.06) 10px,rgba(161,98,7,.06) 11px);
}
.card-front-face[data-type="light"].border-special-foil .card-border-frame::after {
  background:
    conic-gradient(from 0deg at 50% 50%,rgba(253,230,138,.0) 0deg,rgba(253,230,138,.3) 60deg,rgba(255,255,255,.25) 90deg,rgba(253,230,138,.0) 120deg,rgba(253,230,138,.25) 240deg,rgba(255,255,255,.2) 300deg,rgba(253,230,138,.0) 360deg),
    radial-gradient(ellipse 70% 70% at 50% 50%,rgba(253,230,138,.12) 0%,transparent 70%);
}
.card-front-face[data-type="dark"].border-special-foil .card-border-frame::after {
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,rgba(129,140,248,.28) 0%,transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 20%,rgba(168,85,247,.2) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 80%,rgba(99,102,241,.2) 0%,transparent 55%),
    repeating-linear-gradient(45deg,transparent 0px,transparent 14px,rgba(129,140,248,.05) 14px,rgba(129,140,248,.05) 15px);
}
.card-front-face[data-type="omega"].border-special-foil .card-border-frame::after {
  background:
    radial-gradient(ellipse 60% 90% at 50% 50%,rgba(240,171,252,.3) 0%,transparent 60%),
    radial-gradient(circle 3px at 20% 30%,rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(circle 2px at 60% 15%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(circle 2px at 80% 70%,rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(circle 3px at 35% 80%,rgba(240,171,252,.8) 0%,transparent 100%),
    radial-gradient(circle 2px at 75% 45%,rgba(255,255,255,.5) 0%,transparent 100%),
    repeating-conic-gradient(rgba(240,171,252,.06) 0deg,transparent 1deg,transparent 4deg,rgba(240,171,252,.04) 5deg);
}

/* ════════════════════════════════
   EPIC+ HOLO & SHIMMER
════════════════════════════════ */
.holo-overlay {
  position:absolute; inset:0; border-radius:18px;
  pointer-events:none; mix-blend-mode:screen;
  transition:background .05s linear; z-index:18;
}
.card-shimmer {
  position:absolute; inset:0; border-radius:18px;
  pointer-events:none; z-index:17;
}
@keyframes shimmerPulse { 0%,100%{opacity:.2} 50%{opacity:.75} }

@keyframes cardGlow5 {
  from { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 40px rgba(245,200,66,.5),  0 0 90px  rgba(245,200,66,.15); }
  to   { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 75px rgba(245,200,66,.85),0 0 140px rgba(245,200,66,.32); }
}
@keyframes cardGlow6 {
  from { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 55px rgba(236,72,153,.6),  0 0 100px rgba(236,72,153,.2); }
  to   { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 95px rgba(236,72,153,.95),0 0 160px rgba(236,72,153,.42); }
}
@keyframes cardGlow7 {
  from { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 75px rgba(255,255,255,.75),0 0 130px rgba(255,255,255,.3);  }
  to   { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 120px rgba(255,255,255,1),0 0 200px rgba(255,255,255,.6); }
}
@keyframes epicEntranceGlow {
  0%   { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 0 transparent; }
  50%  { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 110px var(--rarity-glow),0 0 220px var(--rarity-glow-wide); }
  100% { box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 45px  var(--rarity-glow),0 0 90px  var(--rarity-glow-wide); }
}

/* ════════════════════════════════
   EVOLUTION CHAIN / EX RULE STRIP
   Sits between .card-attacks and .card-wrr
════════════════════════════════ */
.card-evo-strip {
  display:flex; align-items:center; gap:4px;
  margin:3px 8px 0;
  padding:3px 6px;
  border-radius:5px;
  flex-shrink:0;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  min-height:44px;
  overflow:hidden;
}

/* Type-tinted strip backgrounds */
.evo-type-water  { background:rgba(56,189,248,.08);  border-color:rgba(56,189,248,.2);  }
.evo-type-fire   { background:rgba(251,146,60,.08);  border-color:rgba(251,146,60,.2);  }
.evo-type-wind   { background:rgba(163,230,53,.08);  border-color:rgba(163,230,53,.2);  }
.evo-type-earth  { background:rgba(161,98,7,.1);     border-color:rgba(161,98,7,.25);   }
.evo-type-light  { background:rgba(253,230,138,.07); border-color:rgba(253,230,138,.2); }
.evo-type-dark   { background:rgba(129,140,248,.08); border-color:rgba(129,140,248,.2); }
.evo-type-omega  { background:rgba(240,171,252,.07); border-color:rgba(240,171,252,.2); }

.evo-label {
  font-family:'Orbitron',monospace;
  font-size:.42rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  white-space:nowrap; flex-shrink:0;
  margin-right:3px;
}

.evo-arrow {
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; color:rgba(255,255,255,.35);
  width:14px; height:14px;
}
.evo-arrow svg {
  width:100%; height:100%;
}

/* Pre-evolution portrait bubble */
.evo-bubble {
  width:36px; height:36px;
  border-radius:50%;
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
  position:relative;
}
/* Image fills and zooms inside the bubble */
.evo-bubble img {
  width:130%; height:130%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1);
}

/* Basic pre-evo: simple ring */
.evo-bubble-basic {
  border:1.5px solid rgba(255,255,255,.22);
  box-shadow:0 0 4px rgba(0,0,0,.4);
}

/* Stage 1 pre-evo: glowing type-coloured ring */
.evo-bubble-stage1 {
  border:2px solid var(--type-color,rgba(255,255,255,.4));
  box-shadow:0 0 6px var(--type-color,rgba(255,255,255,.2)),inset 0 0 4px rgba(0,0,0,.4);
  animation:evoBubblePulse 2.2s ease-in-out infinite alternate;
}
@keyframes evoBubblePulse {
  from { box-shadow:0 0 4px var(--type-color,rgba(255,255,255,.2)); }
  to   { box-shadow:0 0 10px var(--type-color,rgba(255,255,255,.45)),0 0 18px var(--type-color,rgba(255,255,255,.12)); }
}

/* EX Rule banner */
.evo-ex-rule {
  gap:5px;
  padding:4px 8px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.45) 0%,
    rgba(245,200,66,.1) 40%,
    rgba(245,200,66,.07) 60%,
    rgba(0,0,0,.45) 100%
  );
  border-color:rgba(245,200,66,.35);
  box-shadow:0 0 8px rgba(245,200,66,.15);
  animation:exRuleGlow 2s ease-in-out infinite alternate;
}
@keyframes exRuleGlow {
  from { box-shadow:0 0 4px rgba(245,200,66,.12); border-color:rgba(245,200,66,.25); }
  to   { box-shadow:0 0 12px rgba(245,200,66,.3),0 0 22px rgba(245,200,66,.1); border-color:rgba(245,200,66,.5); }
}

.evo-ex-icon {
  font-family:'Orbitron',monospace;
  font-size:.52rem; font-weight:900;
  color:#f5c842;
  text-shadow:0 0 8px rgba(245,200,66,.7);
  letter-spacing:.06em; flex-shrink:0;
}

.evo-ex-text {
  font-family:'Rajdhani',sans-serif;
  font-size:.38rem; font-weight:500;
  color:rgba(255,255,255,.6);
  line-height:1.3; letter-spacing:.01em;
  flex:1; min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ════════════════════════════════
   SUMMARY CARD BORDER OVERRIDES
════════════════════════════════ */
.summary-card.border-foil         { outline:2px solid #a78bfa; border-color:transparent; animation:foilShift 4s linear infinite; }
.summary-card.border-hollow-foil  { outline:2px solid #00cfff; border-color:transparent; animation:hollowSpin 3s linear infinite; }
.summary-card.border-special      { outline:2px solid #ffd700; border-color:transparent; animation:specialGold 2.5s ease-in-out infinite alternate; }
.summary-card.border-special-foil { outline:2px solid #ff0080; border-color:transparent; animation:sfAurora 2s linear infinite,sfPulse 1.5s ease-in-out infinite alternate; }