/* SpotCars card — rebuilt for the website from the app prototype (cardex_car_card_studio-3 copy.html).
   Same anatomy, rarity tokens, foil / glare / reflection layers and text-above-light rule (SPOTCARS_SPEC §4). */

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --stripe { syntax: '<length>'; initial-value: 0px; inherits: false; }

@keyframes spinBorder { to { --angle: 360deg; } }
@keyframes flowBorder { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }
@keyframes prismFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes twinkle { from { opacity: .2; transform: scale(.98); } to { opacity: .85; transform: scale(1.02); } }
/* card-sized layers only (Safari: big rotated layers leak past the rounded frame and flicker as a strip) */
@keyframes auroraDrift { from { background-position: 0 0, 0 0; } to { background-position: 352px 620px, -352px 620px; } }
@keyframes stripeSlide { from { --stripe: 0px; } to { --stripe: -280px; } }
@keyframes glintSweep { 0%, 50% { transform: translateX(-240%) skewX(-20deg); } 100% { transform: translateX(400%) skewX(-20deg); } }
@keyframes priceSweep { 0%, 40% { left: -120%; } 85%, 100% { left: 160%; } }
@keyframes sealGlint { 0%, 70% { transform: translateX(-130%) rotate(25deg); } 100% { transform: translateX(130%) rotate(25deg); } }

/* ---------- rarity tokens ---------- */
[data-rarity="common"] {
  --r-primary: #94a3b8; --r-secondary: #e2e8f0; --r-glow: rgba(148, 163, 184, .28);
  --r-bg-grad: linear-gradient(145deg, #161920 0%, #0b0d12 60%, #171a21 100%);
  --r-border-grad: conic-gradient(from var(--angle), #334155, #94a3b8, #f1f5f9, #64748b, #334155);
  --r-badge-bg: linear-gradient(135deg, #94a3b8 0%, #f1f5f9 50%, #64748b 100%); --r-badge-text: #0f172a;
  --r-flow: linear-gradient(90deg, #94a3b8, #f1f5f9, #64748b, #f1f5f9, #94a3b8);
  --holo: .25;
}
[data-rarity="rare"] {
  --r-primary: #0ea5e9; --r-secondary: #7dd3fc; --r-glow: rgba(14, 165, 233, .5);
  --r-bg-grad: linear-gradient(145deg, #081a2c 0%, #090d16 55%, #07223b 100%);
  --r-border-grad: conic-gradient(from var(--angle), #0369a1, #38bdf8, #e0f2fe, #0284c7, #0c4a6e, #38bdf8, #0369a1);
  --r-badge-bg: linear-gradient(135deg, #0284c7 0%, #7dd3fc 50%, #0369a1 100%); --r-badge-text: #041322;
  --r-flow: linear-gradient(90deg, #0ea5e9, #7dd3fc, #e0f2fe, #38bdf8, #0ea5e9);
  --holo: .45;
}
[data-rarity="epic"] {
  --r-primary: #a855f7; --r-secondary: #e9d5ff; --r-glow: rgba(168, 85, 247, .58);
  --r-bg-grad: linear-gradient(145deg, #1e0b36 0%, #0b0914 55%, #270c47 100%);
  --r-border-grad: conic-gradient(from var(--angle), #581c87, #a855f7, #f3e8ff, #c084fc, #3b0764, #a855f7, #581c87);
  --r-badge-bg: linear-gradient(135deg, #9333ea 0%, #f3e8ff 50%, #7e22ce 100%); --r-badge-text: #1b0630;
  --r-flow: linear-gradient(90deg, #a855f7, #e9d5ff, #8b5cf6, #f3e8ff, #a855f7);
  --holo: .6;
}
[data-rarity="mythic"] {
  --r-primary: #ef4444; --r-secondary: #fca5a5; --r-glow: rgba(239, 68, 68, .62);
  --r-bg-grad: linear-gradient(145deg, #2b090d 0%, #0e080a 55%, #380d14 100%);
  --r-border-grad: conic-gradient(from var(--angle), #7f1d1d, #ef4444, #fef2f2, #f87171, #450a0a, #ef4444, #7f1d1d);
  --r-badge-bg: linear-gradient(135deg, #dc2626 0%, #fecaca 50%, #991b1b 100%); --r-badge-text: #260505;
  --r-flow: linear-gradient(90deg, #ef4444, #fca5a5, #f87171, #fecaca, #ef4444);
  --holo: .72;
}
[data-rarity="legendary"] {
  --r-primary: #f59e0b; --r-secondary: #fef08a; --r-glow: rgba(245, 158, 11, .68);
  --r-bg-grad: linear-gradient(145deg, #241905 0%, #0c0d12 52%, #291d06 100%);
  --r-border-grad: conic-gradient(from var(--angle), #78350f, #f59e0b, #fffbeb, #eab308, #451a03, #f59e0b, #fef08a, #78350f);
  --r-badge-bg: linear-gradient(135deg, #d97706 0%, #fef08a 50%, #b45309 100%); --r-badge-text: #1c1002;
  --r-flow: linear-gradient(90deg, #f59e0b, #fef08a, #d97706, #fffbeb, #f59e0b);
  --holo: .85;
}
[data-rarity="grail"] {
  --r-primary: #22d3ee; --r-secondary: #a5f3fc; --r-glow: rgba(34, 211, 238, .65);
  --r-bg-grad: linear-gradient(135deg, #1a0b3a 0%, #062236 36%, #1c0d42 70%, #05291f 100%);
  --r-border-grad: conic-gradient(from var(--angle), #7928ca, #00d4ff, #00ff9d, #ffea00, #7928ca);
  --r-prism: linear-gradient(90deg, #7928ca, #00d4ff, #00ff9d, #ffea00, #7928ca);
  --r-badge-bg: var(--r-prism); --r-badge-text: #fff;
  --r-flow: var(--r-prism);
  --holo: 1;
}

/* ---------- shell ---------- */
.sc-card {
  --tilt-x: 0deg; --tilt-y: 0deg;
  position: relative;
  width: 352px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  font-family: 'Rajdhani', 'Plus Jakarta Sans', sans-serif;
  color: #f8fafc;
  user-select: none;
  -webkit-user-select: none;
}
.sc-card .shell {
  position: relative;
  border-radius: 26px;
  padding: 4px;
  background: var(--r-border-grad);
  animation: spinBorder 6s linear infinite;
  box-shadow: 0 30px 65px -12px rgba(0, 0, 0, .85), 0 0 38px -4px var(--r-glow);
  transform-style: preserve-3d;
}
[data-rarity="grail"].sc-card .shell {
  animation-duration: 2.8s;
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, .9), 0 0 45px rgba(0, 212, 255, .45), 0 0 85px rgba(121, 40, 202, .4);
}
.sc-card .body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 13px;
  border-radius: 22px;
  background: var(--r-bg-grad);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  transform-style: preserve-3d;
}

/* ---------- light layers (body only; text sits above them) ---------- */
.sc-card .texture, .sc-card .foil, .sc-card .glare, .sc-card .reflect, .sc-card .sparkles, .sc-card .gfx, .sc-card .veil {
  position: absolute; pointer-events: none;
}
.sc-card .texture {
  inset: 0; z-index: 1; opacity: .35;
  background-image:
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 0),
    linear-gradient(135deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%, transparent 75%, transparent);
  background-size: 16px 16px, 40px 40px;
}
.sc-card .foil {
  inset: 0; z-index: 7;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--light, 0) * var(--holo));
  background: linear-gradient(115deg, transparent 20%,
    color-mix(in srgb, var(--r-primary) 20%, transparent) 35%,
    color-mix(in srgb, var(--r-secondary) 36%, transparent) 43%,
    color-mix(in srgb, var(--r-primary) 18%, transparent) 51%, transparent 66%);
  background-size: 240% 240%;
  background-position: var(--holo-x, 50%) var(--holo-y, 50%);
}
[data-rarity="grail"].sc-card .foil {
  z-index: 2;
  background:
    repeating-linear-gradient(115deg, rgba(121, 40, 202, .4) 0%, rgba(0, 212, 255, .4) 7%, rgba(0, 255, 157, .36) 14%, rgba(255, 234, 0, .36) 21%, rgba(255, 196, 0, .3) 28%, rgba(121, 40, 202, .4) 35%),
    radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .55), transparent 55%);
  background-size: 250% 250%, 100% 100%;
  background-position: var(--holo-x, 50%) var(--holo-y, 50%), 0 0;
}
.sc-card .glare {
  inset: 0; z-index: 3; mix-blend-mode: overlay;
  opacity: calc(var(--light, 0) * .9);
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .08) 32%, transparent 65%);
}
.sc-card .reflect {
  inset: 0; z-index: 3; mix-blend-mode: screen; border-radius: inherit;
  opacity: calc(var(--refl-a, 0) * (.55 + var(--holo) * .45));
  background:
    radial-gradient(ellipse 60% 38% at var(--refl-x, 50%) var(--refl-y, 50%), color-mix(in srgb, var(--r-secondary) 12%, transparent), transparent 70%),
    linear-gradient(115deg, transparent calc(var(--band, 50%) - 13%),
      color-mix(in srgb, var(--r-primary) 10%, transparent) calc(var(--band, 50%) - 5%),
      color-mix(in srgb, var(--r-secondary) 30%, transparent) var(--band, 50%),
      color-mix(in srgb, var(--r-primary) 10%, transparent) calc(var(--band, 50%) + 5%),
      transparent calc(var(--band, 50%) + 13%));
}
/* "Shine: Full": a ~16 % copy of the foil + reflection over the photo and numbers */
.sc-card .veil { inset: 0; z-index: 12; opacity: .16; mix-blend-mode: color-dodge; border-radius: inherit; overflow: hidden; }
.sc-card .veil .foil, .sc-card .veil .reflect { z-index: auto; mix-blend-mode: normal; }
.sc-card .sparkles {
  inset: 0; z-index: 14; opacity: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 75% 18%, var(--r-secondary), transparent),
    radial-gradient(2.5px 2.5px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 65%, var(--r-primary), transparent),
    radial-gradient(2px 2px at 15% 82%, var(--r-secondary), transparent), radial-gradient(2.5px 2.5px at 60% 42%, #fff, transparent);
}
[data-rarity="legendary"].sc-card .sparkles { opacity: .75; animation: twinkle 3.2s infinite alternate ease-in-out; }
[data-rarity="grail"].sc-card .sparkles { opacity: 1; animation: twinkle 3.2s infinite alternate ease-in-out; }
.sc-card .gfx { display: none; }
[data-rarity="grail"].sc-card .gfx { display: block; }
.sc-card .aurora {
  inset: 0; z-index: 2; opacity: .5; mix-blend-mode: screen;
  background:
    radial-gradient(42% 30% at 25% 25%, rgba(139, 61, 255, .7), transparent 70%) 0 0 / 352px 620px repeat,
    radial-gradient(40% 28% at 75% 70%, rgba(0, 212, 255, .6), transparent 70%) 0 0 / 352px 620px repeat;
  animation: auroraDrift 16s linear infinite;
}
.sc-card .stripes {
  inset: 0; z-index: 2; opacity: .85; mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(118deg,
    rgba(139, 61, 255, .45) calc(var(--stripe) + 0px), rgba(0, 212, 255, .45) calc(var(--stripe) + 56px),
    rgba(0, 255, 157, .4) calc(var(--stripe) + 112px), rgba(255, 196, 0, .4) calc(var(--stripe) + 168px),
    rgba(255, 234, 0, .3) calc(var(--stripe) + 224px), rgba(139, 61, 255, .45) calc(var(--stripe) + 280px));
  animation: stripeSlide 9s linear infinite;
}
.sc-card .glint {
  top: 0; bottom: 0; left: 0; width: 38%; z-index: 14; mix-blend-mode: overlay;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .18) 58%, transparent);
  animation: glintSweep 5.5s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* ---------- content ---------- */
.sc-card .one { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card .txt { position: relative; z-index: 13; transform: translateZ(26px); }
.sc-card .txt-shadow { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(0, 0, 0, .4)); }

.sc-card .banner { display: none; align-items: center; gap: 9px; margin-bottom: 10px; }
[data-rarity="grail"].sc-card .banner { display: flex; }
.sc-card .banner i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #00d4ff, #fff); box-shadow: 0 0 6px rgba(0, 212, 255, .8); }
.sc-card .banner i:last-child { background: linear-gradient(90deg, #fff, #00ff9d, transparent); }
.sc-card .banner svg { width: 7px; height: 7px; fill: #fff; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(0, 212, 255, .9)); }
.sc-card .banner b {
  font: 900 10.5px/1 'Orbitron', sans-serif; letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(90deg, #fff, #c4b5fd, #67e8f9, #6ee7b7, #fde68a, #fff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: prismFlow 6s linear infinite;
}

.sc-card .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sc-card .badge {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 8px;
  background: var(--r-badge-bg); color: var(--r-badge-text);
  font: 900 .66rem/1.2 'Orbitron', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 15px var(--r-glow);
}
.sc-card .badge svg { width: 12px; height: 12px; }
[data-rarity="grail"].sc-card .badge {
  background-size: 300% 100%; animation: prismFlow 3s linear infinite;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 0 18px rgba(0, 212, 255, .55);
}
.sc-card .hp {
  min-width: 0; max-width: 55%; display: flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(8, 10, 18, .88), rgba(8, 10, 18, .88)) padding-box, var(--r-flow) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: flowBorder 5s linear infinite;
  box-shadow: 0 0 14px -4px var(--r-glow);
}
.sc-card .hp svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--r-primary); fill: var(--r-primary); fill-opacity: .25; }
.sc-card .hp-num {
  font: 900 18px/1.15 'Orbitron', sans-serif; letter-spacing: .5px;
  background: var(--r-flow); background-size: 300% 100%; animation: prismFlow 4s linear infinite;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.sc-card .hp-unit { align-self: flex-end; margin-bottom: 2px; font: 800 10px/1 'Orbitron', sans-serif; letter-spacing: 1px; color: var(--r-secondary); }

.sc-card .brand { margin-top: 12px; font: 800 12px/1.3 'Orbitron', sans-serif; letter-spacing: .34em; text-transform: uppercase; }
.sc-card .model {
  margin-top: 3px; font: 900 30px/1.15 'Orbitron', sans-serif; letter-spacing: .5px;
  background: linear-gradient(180deg, #fffbea 0%, var(--r-secondary) 38%, var(--r-primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px var(--r-glow));
  transform: translateZ(28px);
}
[data-rarity="grail"].sc-card .model {
  background: linear-gradient(90deg, #c4b5fd, #67e8f9, #6ee7b7, #fde68a, #c4b5fd); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: prismFlow 6s linear infinite;
}
.sc-card .meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; margin-top: 4px;
  font-size: 15px; font-weight: 600; letter-spacing: .4px; color: #e2e8f0; transform: translateZ(22px);
}
.sc-card .meta i { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--r-primary); box-shadow: 0 0 8px var(--r-primary); }

/* photo frame: sticker mode (cut-out car on a showroom backdrop in the rarity colours) */
.sc-card .photo {
  position: relative; z-index: 8; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .7), 0 0 18px -6px var(--r-glow);
  transform: translateZ(34px);
  overflow: hidden; clip-path: inset(0 round 16px);
  background:
    radial-gradient(ellipse 62% 80% at 50% -8%, color-mix(in srgb, var(--r-primary) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 46% 13% at 50% 88%, rgba(0, 0, 0, .85), transparent 72%),
    linear-gradient(to bottom, #12141b, #08090d 60%, color-mix(in srgb, var(--r-primary) 24%, #07080b) 100%);
}
.sc-card .photo::before {
  content: ''; position: absolute; left: -30%; right: -30%; bottom: 0; height: 48%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--r-primary) 35%, rgba(255, 255, 255, .12)) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--r-primary) 35%, rgba(255, 255, 255, .12)) 1px, transparent 1px);
  background-size: 26px 13px;
  transform: perspective(160px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 85%); mask: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 85%);
}
.sc-card .photo::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 54%; height: 1px; opacity: .7;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--r-primary) 70%, #fff), transparent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--r-primary) 45%, transparent);
}
.sc-card .photo .vignette { position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 24px rgba(0, 0, 0, .55); pointer-events: none; }
.sc-card .pop { position: relative; z-index: 9; height: 0; transform: translateZ(56px); pointer-events: none; }
.sc-card .pop img {
  position: absolute; left: 50%; bottom: 12px; max-width: 94%; max-height: 150px; width: auto; height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(1px 0 0 rgba(255, 255, 255, .9)) drop-shadow(-1px 0 0 rgba(255, 255, 255, .9))
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 16px 14px rgba(0, 0, 0, .6));
}
.sc-card .spot-no {
  position: absolute; left: 8px; top: 8px; z-index: 3; padding: 3px 7px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--r-primary) 55%, transparent); background: rgba(7, 8, 12, .62);
  font: 800 9px/1.2 'Orbitron', sans-serif; letter-spacing: .8px; color: #f8fafc; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.sc-card .spot-no.first { border-color: #e9b949; color: #fde68a; }
.sc-card .seal { position: absolute; right: 7px; top: 7px; z-index: 3; width: 19px; height: 19px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75)) drop-shadow(0 0 6px var(--r-glow)); }
.sc-card .seal svg { width: 100%; height: 100%; display: block; }
.sc-card .seal::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  animation: sealGlint 3.2s ease-in-out infinite; mix-blend-mode: overlay;
}

.sc-card .specs {
  position: relative; z-index: 8; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; overflow: hidden;
  transform: translateZ(24px);
}
.sc-card .spec { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 8px 12px; background: rgba(9, 10, 15, .94); }
[data-rarity="grail"].sc-card .spec { background: rgba(8, 10, 20, .93); }
.sc-card .spec svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--r-primary); filter: drop-shadow(0 0 5px var(--r-glow)); }
.sc-card .spec div { flex: 1; min-width: 0; }
.sc-card .spec small { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #94a3b8; }
.sc-card .spec b { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: .3px; color: #fff; }

.sc-card .value {
  position: relative; z-index: 8; margin-top: 10px; padding: 11px 15px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(15, 19, 30, .92), rgba(5, 7, 12, .96));
  border: 1px solid var(--r-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .6), 0 0 15px -3px var(--r-glow);
  transform: translateZ(30px);
}
[data-rarity="grail"].sc-card .value {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(13, 17, 32, .94), rgba(5, 7, 14, .96)) padding-box, var(--r-prism) border-box;
}
.sc-card .value::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: priceSweep 4.5s infinite;
}
.sc-card .value-meta { flex: 0 0 auto; max-width: 62%; display: flex; flex-direction: column; gap: 2px; }
.sc-card .value-meta small { font: 800 .66rem/1.2 'Orbitron', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--r-secondary); }
.sc-card .value-meta span { font: 600 .6rem/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.sc-card .price { flex: 1 1 0; min-width: 0; text-align: right; filter: drop-shadow(0 2px 8px var(--r-glow)); }
.sc-card .price span {
  font: 900 22px/1.3 'Orbitron', sans-serif; letter-spacing: .8px;
  background: var(--r-badge-bg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
[data-rarity="grail"].sc-card .price span,
[data-rarity="grail"].sc-card .hp-num {
  background: linear-gradient(90deg, #fff, #67e8f9, #c4b5fd, #fde68a, #fff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: prismFlow 3s linear infinite;
}

.sc-card .foot {
  margin-top: 11px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateZ(18px); text-shadow: 0 1px 1.5px rgba(0, 0, 0, .55);
}
.sc-card .foot-brand { flex-shrink: 0; font: 800 12.5px/1 'Orbitron', sans-serif; color: #f8fafc; }
.sc-card .foot-brand small { font-size: 11px; font-weight: 600; color: #94a3b8; }
.sc-card .foot-spot {
  min-width: 0; display: flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; font-weight: 600; color: #e2e8f0;
}
.sc-card .foot-spot > span:first-child { flex-shrink: 0; font-size: .86em; }
.sc-card .foot-spot strong { color: #f8fafc; font-weight: 700; }

/* tiny CSS flags (no external images, no emoji) */
.flag { flex-shrink: 0; display: inline-block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.flag-us { background: linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 45% 54% no-repeat, repeating-linear-gradient(#b22234 0 1.08px, #fff 1.08px 2.16px); }
.flag-de { background: linear-gradient(#000 0 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.flag-it { background: linear-gradient(90deg, #009246 0 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); }
.flag-fr { background: linear-gradient(90deg, #0055a4 0 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.flag-mc { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
.flag-jp { background: radial-gradient(circle, #bc002d 0 28%, #fff 30%); }
.flag-gb { background: linear-gradient(90deg, transparent 42%, #c8102e 42% 58%, transparent 58%), linear-gradient(transparent 38%, #c8102e 38% 62%, transparent 62%), linear-gradient(90deg, transparent 36%, #fff 36% 64%, transparent 64%), linear-gradient(transparent 30%, #fff 30% 70%, transparent 70%), #012169; }
.flag-nl { background: linear-gradient(#ae1c28 0 33.3%, #fff 33.3% 66.6%, #21468b 66.6%); }
.flag-se { background: linear-gradient(90deg, transparent 30%, #fecc00 30% 42%, transparent 42%), linear-gradient(transparent 42%, #fecc00 42% 58%, transparent 58%), #006aa7; }

/* ---------- card back (carbon twill, steel rim, twin stripes, app icon) ---------- */
.sc-back {
  position: absolute; inset: 0; border-radius: 26px; padding: 4px; backface-visibility: hidden;
  background: conic-gradient(from 210deg, #3b4252, #e5e7eb, #6b7280, #f8fafc, #4b5563, #d1d5db, #3b4252);
  box-shadow: 0 30px 65px -12px rgba(0, 0, 0, .85), 0 0 40px -8px rgba(226, 232, 240, .35);
}
.sc-back .in {
  position: relative; height: 100%; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .1) 0%, transparent 28%, transparent 62%, rgba(255, 255, 255, .06) 70%, transparent 80%),
    repeating-linear-gradient(45deg, #15171d 0 4px, #0b0c10 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 4px, transparent 4px 8px),
    #0b0c10;
}
.sc-back .in::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .1) 6px 18px, transparent 18px 28px, rgba(255, 255, 255, .1) 28px 40px, transparent 40px);
}
.sc-back .in::after {
  content: ''; position: absolute; inset: 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); pointer-events: none;
}
.sc-back .chk {
  position: absolute; left: 0; right: 0; bottom: 26px; height: 16px; opacity: .14;
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.sc-back img {
  position: relative; width: 92px; height: 92px; border-radius: 22.4%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 34px rgba(0, 0, 0, .7);
}
.sc-back .wm { position: relative; font: 900 20px/1 'Orbitron', sans-serif; letter-spacing: .14em; color: #fff; }
.sc-back .wm b { background: linear-gradient(180deg, #fff, #cbd5e1 50%, #94a3b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sc-back .tag { position: relative; font: 700 9.5px/1 'Orbitron', sans-serif; letter-spacing: .42em; color: #94a3b8; }

/* a single back that spins: the art is mirrored on the far half-turn so the logo never reads backwards */
.sc-back.spin { backface-visibility: visible; }
.sc-back.mirror .in { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .sc-card *, .sc-card .shell, .sc-back * { animation: none !important; }
}