/* ---------- Card ----------
   All sizes are in em; 1em = card width / 15, so the card scales from --card-w.
   Layout matches the 300x420 grid of the frame SVG in card.js (1em = 20 units).
   Each rarity defines its frame metal (--m1 light → --m3 dark) and trim color. */

.card {
  --m1: #f4f5f7; --m2: #a7acb3; --m3: #464a51;
  --trim: #e9ebef; --trim-dark: #3d4046;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  font-size: calc(var(--card-w) / 15);
  position: relative;
  border-radius: .9em;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 .08em, transparent .08em .5em),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 .08em, transparent .08em .5em),
    linear-gradient(155deg, var(--m1) 0%, var(--m2) 18%, var(--m3) 42%, var(--m2) 62%, var(--m1) 78%, var(--m3) 100%);
  box-shadow:
    inset .12em .12em .15em rgba(255,255,255,.55),
    inset -.12em -.12em .2em rgba(0,0,0,.55),
    0 0 0 .08em var(--trim-dark),
    0 .3em 1em rgba(0,0,0,.6);
  user-select: none;
  transition: transform .15s;
}

/* Frame metal follows the tribe (element) */
.card.t-fire   { --m1: #ffd9b8; --m2: #e0561c; --m3: #3e0d03; }
.card.t-frost  { --m1: #e2f7ff; --m2: #45a6dc; --m3: #0a2645; }
.card.t-nature { --m1: #ddf8cf; --m2: #4c9b46; --m3: #123313; }
.card.t-shadow { --m1: #e9dcf7; --m2: #5f3a8e; --m3: #140823; }
.card.t-storm  { --m1: #fff8c8; --m2: #cfae1c; --m3: #3f3103; }

/* Trim follows rarity: silver for low rarities, gold from epic up */
.card.uncommon  { --trim: #eef1f5; --trim-dark: #3f4652; }
.card.rare      { --trim: #f3f7ff; --trim-dark: #3a4a66; }
.card.epic      { --trim: #f4d98e; --trim-dark: #634510; }
.card.legendary { --trim: #fff1b8; --trim-dark: #7e520a; }
.card.ultra     { --trim: #ffd76e; --trim-dark: #6e4206; }

.card.legendary { box-shadow: inset .12em .12em .15em rgba(255,255,255,.6), inset -.12em -.12em .2em rgba(0,0,0,.55), 0 0 0 .08em var(--trim-dark), 0 0 1.1em rgba(255,200,60,.55), 0 .3em 1em rgba(0,0,0,.6); }
.card.ultra     { box-shadow: inset .12em .12em .15em rgba(255,255,255,.5), inset -.12em -.12em .2em rgba(0,0,0,.55), 0 0 0 .08em var(--trim-dark), 0 0 1.3em rgba(255,40,60,.65), 0 .3em 1em rgba(0,0,0,.6); }

/* Moving shine across the metal for the top rarities */
.card.legendary::before, .card.ultra::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 60%) 0 0 / 300% 100%;
  animation: sweep 4s linear infinite;
  z-index: 3;
  mix-blend-mode: overlay;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* Dark panel inside the metal; seams between nameplate / art / text show through */
.card .panel {
  position: absolute; inset: .75em;
  border-radius: .5em;
  background: radial-gradient(ellipse at 50% 40%, #241a10, #0c0805);
}

.card .frame-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

.card .nameplate {
  position: absolute; top: 1.05em; height: 2.1em; left: 1.9em; right: 1.9em;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel", Georgia, serif; font-weight: 700;
  color: #f8ebc9;
  text-shadow: 0 .08em .15em #000;
  letter-spacing: .03em;
  white-space: nowrap; overflow: hidden;
  z-index: 2;
}
.card .nameplate span { overflow: hidden; text-overflow: ellipsis; }

.card .art {
  position: absolute; top: 3.3em; height: 9.2em; left: 1.2em; right: 1.2em;
  background: #000 50% var(--art-y, 20%) / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel", Georgia, serif;
  color: rgba(255,255,255,.3);
  overflow: hidden;
}
.card .art::after { /* vignette */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 1.2em rgba(0,0,0,.75);
}
/* Holographic foil on Ultra art */
.card.ultra .art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(125deg, #ff0040, #ffb000, #40ff80, #00c0ff, #a040ff, #ff0040) 0 0 / 300% 300%;
  mix-blend-mode: color-dodge; opacity: .22;
  animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 300% 300%; } }

.card .textbox {
  position: absolute; top: 12.7em; height: 7.2em; left: 1.2em; right: 1.2em;
  background: radial-gradient(ellipse at 50% 30%, #fbf4e3, #eadbb8 70%, #d6c092);
  color: #2b2012;
  padding: 1.45em 1.5em .5em;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* Rarity gem on the seam between art and text (y = 252 on the frame grid) */
.card .gem {
  position: absolute; left: 50%; top: 12.6em;
  width: 4em; height: 2.5em;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 .3em var(--glow)) drop-shadow(0 .08em .12em rgba(0,0,0,.6));
  z-index: 3;
}
.card.legendary .gem, .card.ultra .gem { animation: gemPulse 2s ease-in-out infinite; }
@keyframes gemPulse { 50% { filter: drop-shadow(0 0 .7em var(--glow)) drop-shadow(0 .08em .12em rgba(0,0,0,.6)); } }

.card .rarity-label {
  font-family: "Cinzel", Georgia, serif; font-weight: 900;
  font-size: .6em; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--gem-deep);
  margin-bottom: .45em;
}
.card.common .rarity-label { color: #6b6f75; }
.card .rarity-label .tribe { margin-left: .5em; letter-spacing: .06em; color: var(--m3); }
.card .effect {
  font-size: .76em; line-height: 1.3;
  padding: 0 .6em;
}
.card .crest svg, .card .stat svg { display: block; width: 100%; height: 100%; }

/* Crown crest on top edge: epic and above */
.card .crest {
  display: none;
  position: absolute; left: 50%; top: -.75em;
  width: 3.6em; height: 1.2em;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 .1em .1em rgba(0,0,0,.6));
}
.card.epic .crest, .card.legendary .crest, .card.ultra .crest { display: block; }
.card.ultra .crest { width: 4.6em; height: 1.55em; top: -1em; }

/* Attack (shield) and HP (heart) badges at the bottom corners */
.card .stat {
  position: absolute; bottom: -.45em;
  width: 3.5em; height: 3.5em;
  z-index: 4;
  filter: drop-shadow(0 .15em .2em rgba(0,0,0,.7));
}
.card .stat.atk { left: -.45em; }
.card .stat.hp  { right: -.45em; }
.card .stat span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: .2em;
  font-family: "Cinzel", Georgia, serif; font-weight: 900;
  font-size: 1.35em; color: #fff;
  text-shadow:
    .06em 0 0 #2a1205, -.06em 0 0 #2a1205, 0 .06em 0 #2a1205, 0 -.06em 0 #2a1205,
    .05em .05em 0 #2a1205, -.05em -.05em 0 #2a1205, .05em -.05em 0 #2a1205, -.05em .05em 0 #2a1205,
    0 .12em .15em rgba(0,0,0,.6);
}
.card .stat.hp span { padding-bottom: .45em; }
.card .stat.hp.hurt span { color: #ffb0b0; }
.card .stat.buffed span { color: #8dff9a; }

.card .status {
  position: absolute; top: 3.6em; right: 1.6em; z-index: 3;
  display: flex; gap: .2em; font-size: .9em;
}

/* Keyword badges on the art (🛡 Guardian, 🪽 Flying) */
.card .status .kw {
  display: grid; place-items: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: rgba(10,8,16,.75); border: .08em solid var(--trim);
  font-size: .9em; box-shadow: 0 .1em .2em #000;
}
.card .status .kw.guardian { background: rgba(40,60,90,.9); }
/* Guardian: a steel shield ring around the whole card */
.card.guardian {
  outline: .2em solid rgba(175,205,235,.9);
  outline-offset: .1em;
}

/* Gem sockets: a row of holes at the bottom centre of the card */
.card .sockets {
  position: absolute; left: 50%; bottom: .55em; transform: translateX(-50%);
  display: flex; gap: .35em; z-index: 4;
}
.card .sock {
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #000, #2a2016 70%);
  box-shadow: 0 0 0 .1em var(--trim), 0 0 0 .2em var(--trim-dark), inset 0 .1em .2em #000;
}
.card .sock.filled {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 12%, transparent 13%),
    conic-gradient(from 45deg, var(--gc), color-mix(in srgb, var(--gc) 40%, #000), var(--gc), color-mix(in srgb, var(--gc) 60%, #fff), var(--gc));
  box-shadow: 0 0 0 .1em var(--trim), 0 0 0 .2em var(--trim-dark), 0 0 .5em var(--gc);
}
.card .sock.filled.g3 { box-shadow: 0 0 0 .1em #ffd27a, 0 0 0 .2em #8a4a08, 0 0 .7em #ff9a2e, 0 0 1.2em var(--gc); }
.card .effect .flavor { color: #6b5a3e; font-style: italic; opacity: .9; }