/* ============================================================
   SPIRE2 — card frame restyle (loads AFTER style.css)
   StS-quality frames: type-colored ornate borders, faceted cost
   gem, name plate band, full-bleed art canvas, parchment desc.
   ============================================================ */

.card {
  width: 168px;
  height: 236px;
  padding: 6px;
  border: none;
  border-radius: 13px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  cursor: pointer;
  /* frame = the card background itself (bevel gradient in type color) */
  --f0: #10141f;            /* frame deepest   */
  --f1: #2c3a58;            /* frame mid       */
  --f2: #5d76a8;            /* frame lit edge  */
  --hair: #9db8e8;          /* inner luminous hairline */
  --plate0: #1a2338;        /* name plate gradient     */
  --plate1: #0b101d;
  --tglow: rgba(120, 160, 230, .28);
  background:
    linear-gradient(158deg, var(--f2) 0%, var(--f1) 26%, var(--f0) 62%, #05070d 100%);
  box-shadow:
    0 0 0 1px #04060b,                     /* outer dark bevel line */
    inset 0 1px 0 rgba(255, 255, 255, .22), /* top bevel highlight  */
    inset 0 -2px 3px rgba(0, 0, 0, .55),    /* bottom bevel shade   */
    0 5px 14px rgba(0, 0, 0, .6);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}

/* inner luminous hairline ring */
.card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  box-shadow: 0 0 7px var(--tglow), inset 0 0 5px var(--tglow);
  opacity: .8;
  pointer-events: none;
  z-index: 3;
}

/* ---------- type palettes ---------- */
.card.attack {
  --f0: #200b0c; --f1: #5c241a; --f2: #b56a38;
  --hair: #ffb37c; --plate0: #47201a; --plate1: #180a09;
  --tglow: rgba(255, 122, 60, .32);
  background:
    linear-gradient(158deg, var(--f2) 0%, var(--f1) 26%, var(--f0) 62%, #0c0405 100%);
}
.card.skill {
  --f0: #071620; --f1: #16465a; --f2: #3f8ea8;
  --hair: #7ee4ff; --plate0: #123647; --plate1: #061019;
  --tglow: rgba(60, 205, 255, .3);
  background:
    linear-gradient(158deg, var(--f2) 0%, var(--f1) 26%, var(--f0) 62%, #03090e 100%);
}
.card.power {
  --f0: #170e24; --f1: #45285f; --f2: #8d64c2;
  --hair: #ecc86e; --plate0: #38234e; --plate1: #120a1c;
  --tglow: rgba(196, 148, 255, .32);
  background:
    linear-gradient(158deg, var(--f2) 0%, var(--f1) 26%, var(--f0) 62%, #0a0512 100%);
}

/* ---------- cost gem (faceted hex, overlaps top-left) ---------- */
.card .c-cost {
  position: absolute;
  top: -11px;
  left: -11px;
  width: 38px;
  height: 42px;
  z-index: 6;
  border: none;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .95) 0 2.5px, rgba(255, 255, 255, 0) 11px),
    conic-gradient(from 205deg at 50% 44%,
      #c9f6ff 0deg, #2fb9e0 58deg, #0a5e84 128deg,
      #0e88b8 190deg, #6fe6ff 258deg, #eafbff 320deg, #c9f6ff 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 20, 40, .9), 0 0 6px rgba(0, 40, 70, .8);
  filter: drop-shadow(0 0 1.5px #021019) drop-shadow(0 2px 4px rgba(0, 0, 0, .7))
          drop-shadow(0 0 6px rgba(40, 200, 255, .55));
}
/* dark facet seams inside the gem */
.card .c-cost::after {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(200deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%,
              rgba(2, 24, 40, 0) 60%, rgba(2, 24, 40, .5) 100%);
  pointer-events: none;
}

/* ---------- art canvas (full-bleed at top of interior) ---------- */
.card .c-artc {
  display: block;
  width: 100%;
  aspect-ratio: 20 / 11;
  height: auto;
  border-radius: 7px 7px 0 0;
  background: #070b14;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 -6px 10px -6px rgba(0, 0, 0, .8);
}

/* ---------- name plate band ---------- */
.card .c-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #f2ead6;
  letter-spacing: .9px;
  padding: 4px 4px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--plate0), var(--plate1));
  border-top: 1px solid rgba(0, 0, 0, .75);
  border-bottom: 1px solid rgba(0, 0, 0, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.card .c-name.upg {
  color: #74ffab;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 7px rgba(77, 255, 166, .55);
}

/* ---------- type ribbon divider ---------- */
.card .c-type {
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  text-align: center;
  color: var(--hair);
  opacity: .92;
  padding: 2.5px 0;
  border-bottom: none;
  background:
    linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, .5) 75%, transparent 96%);
  position: relative;
}
.card .c-type::before,
.card .c-type::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
  opacity: .55;
}
.card .c-type::before { top: 0; }
.card .c-type::after { bottom: 0; }

/* ---------- description panel (parchment-dark) ---------- */
.card .c-desc {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.32;
  color: #d8e2f2;
  padding: 4px 7px 5px;
  border-radius: 0 0 7px 7px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #171c2c, #0d111e 78%, #090c16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 8px 12px -10px rgba(0, 0, 0, .9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

/* ---------- rare: gold glow + animated foil sheen ---------- */
.card.rare {
  box-shadow:
    0 0 0 1px #4a3708,
    0 0 16px rgba(255, 210, 87, .38),
    inset 0 1px 0 rgba(255, 240, 190, .3),
    inset 0 -2px 3px rgba(0, 0, 0, .55),
    0 5px 14px rgba(0, 0, 0, .6);
}
.card.rare::before { border-color: #ffd257; box-shadow: 0 0 8px rgba(255, 210, 87, .45), inset 0 0 6px rgba(255, 210, 87, .3); }
.card.rare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255, 232, 170, .10) 42%,
    rgba(255, 255, 255, .20) 50%, rgba(255, 214, 120, .10) 58%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  animation: card-foil-sheen 4.2s linear infinite;
}
@keyframes card-foil-sheen {
  0%   { background-position: 130% 0; }
  60%  { background-position: -130% 0; }
  100% { background-position: -130% 0; }
}

/* ---------- selected / unplayable ---------- */
.card.selected {
  box-shadow:
    0 0 0 2px var(--cyan, #16e0ff),
    0 0 26px rgba(22, 224, 255, .85),
    0 10px 30px rgba(0, 0, 0, .65);
}
.card.selected::before { border-color: var(--cyan, #16e0ff); opacity: 1; }

.card.unplayable {
  opacity: .9;
  filter: saturate(.3) brightness(.6) contrast(.92);
}

/* ---------- small variant ---------- */
.card.small {
  width: 120px;
  height: 170px;
  padding: 5px;
  border-radius: 10px;
}
.card.small::before { inset: 3px; border-radius: 7px; }
.card.small .c-cost { width: 29px; height: 32px; font-size: 12.5px; top: -8px; left: -8px; }
.card.small .c-name { font-size: 9.5px; letter-spacing: .5px; padding: 3px 3px 2px; }
.card.small .c-type { font-size: 6px; letter-spacing: 1.8px; padding: 2px 0; }
.card.small .c-desc { font-size: 8.5px; line-height: 1.28; padding: 3px 5px 4px; }
.card.small:hover { transform: scale(1.06); }