/* =========================================================
   Card face — full-bleed art, corner badges, bottom gradient
   (replaces the old .rarity-flag / .cd-flag / .card-name-strip rules)
   ========================================================= */
.card-face {
  position: absolute;
  inset: 0;
  /* No overflow:hidden here on purpose — .card-face-badge-tl relies on
     this being unclipped so it can protrude past the card's edge. The
     rounded-corner clipping itself happens one layer down, in
     .card-face-clip. */
  border-radius: var(--radius-md);
  /* Establishes a sizing context so badge widths/offsets and the rarity
     font-size below can be expressed in cqw (% of THIS element's own
     rendered width) instead of fixed px. That's what keeps proportions
     correct whether the card renders at ~200px in 卡片資料庫, ~88px in
     a 隊伍編輯 slot, or any other width — a fixed-px badge only looked
     right at one specific width and was oversized everywhere narrower. */
  container-type: inline-size;
  isolation: isolate;
}
.card-face-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.card-face-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  max-width: none;
}
.card-face-badge {
  position: absolute;
  top: 0;
  width: 34cqw;
  height: 34cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)) drop-shadow(0 0 4px rgba(0,0,0,0.6));
  z-index: 2;
}
.card-face-badge img { width: 100%; height: 100%; object-fit: contain; }
.card-face-badge-tr {
  right: -2cqw;
  top: -2cqw;
}
/* Element badge (top-left): deliberately a bit larger and pulled past the
   card's own edge, and painted last in the DOM (see CardFace.js) so it
   sits above the metallic border and the artwork underneath it. */
.card-face-badge-tl {
  left: -4cqw;
  top: -4cqw;
  width: 36cqw;
  height: 36cqw;
  z-index: 3;
}

.card-face-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(25,23,38,0.9) 78%);
  pointer-events: none;
}
.card-face-rarity {
  position: absolute;
  left: 5cqw;
  bottom: 2cqw;
  line-height: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15cqw;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 5px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
}

/* Rarity-specific gradient text. Keyed off the rarity's own id (ssr/sr/n) —
   if a rarity's id doesn't match one of these, it just keeps the flat
   color set inline from rarities.json (this covers "r" and any future
   custom rarity added via the admin, unchanged as requested). */
.card-face-rarity.rarity-grad {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.card-face-rarity.rarity-grad-ssr {
  background-image: linear-gradient(135deg, #E3FDF5, #FBFCDB, #FFE6FA);
}
.card-face-rarity.rarity-grad-sr {
  background-image: linear-gradient(135deg, #fffbe0, #ffff9c, #ff7300);
}
.card-face-rarity.rarity-grad-n {
  background-image: linear-gradient(135deg, #F5F7FA, #C3CFE2);
}

/* =========================================================
   Metallic gradient border, keyed by rarity
   ========================================================= */
.card-face-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 3px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 1;
}
.card-face-border-ssr {
  background: linear-gradient(135deg, #7CF5D8, #FFF04D, #FFC4FF, #7CF5D8);
}
.card-face-border-sr {
  background: linear-gradient(135deg, #8a5a00, #ffd700, #fffbe0, #ffb800, #8a5a00);
}
.card-face-border-r {
  background: linear-gradient(135deg, #6a4fa0, #c9a8f0, #e6d8ff, #9b7fd4);
}
.card-face-border-n {
  background: linear-gradient(135deg, #9aa0ab, #f1f1f5, #c3cfe2);
}

/* Live preview used in the admin card-image dropzone (same visual language
   as .card-btn/.card-face, but standalone — not a clickable grid item).
   overflow is intentionally visible for the same reason as .card-btn
   below — see the comment there. */
.card-preview-box {
  position: relative;
  width: 160px;
  aspect-ratio: 200 / 260;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  background: var(--bg-elevated);
  margin: 0 auto 10px;
}