/* ---------- Collectible card (scales with font-size: card = 20em x 28em) ---------- */
.cc {
  --accent: #1e3a8a;
  --accent2: #0b1220;
  --frame: linear-gradient(145deg, #b5652b, #f0a868 30%, #8a4517 55%, #e09456 80%, #6e3510);
  --ink: #fff;
  --bar: #f0a868;
  width: 20em; height: 28em;
  perspective: 90em;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color: var(--ink);
  user-select: none;
  flex: none;
}
.cc.t-silver { --frame: linear-gradient(145deg, #8e9aa6, #f4f7fa 28%, #9aa6b2 50%, #e7ecf1 75%, #6c7884); --bar: #dfe6ec; }
.cc.t-gold   { --frame: linear-gradient(145deg, #a8741a, #ffe08a 28%, #c9921f 52%, #fff1b8 74%, #8b5e0f); --bar: #ffd45c; }
.cc.t-elite  { --frame: conic-gradient(from 210deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7fffd4, #fff59d, #ffb86b, #ff6ad5); --bar: #b9f3ff; }

.cc-flip { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.cc.flipped .cc-flip { transform: rotateY(180deg); }
.cc-face {
  position: absolute; inset: 0; border-radius: 1.1em; padding: .5em;
  background: var(--frame);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 .9em 2.2em rgba(0,0,0,.45), inset 0 0 0 .08em rgba(255,255,255,.35);
  overflow: hidden;
}
.cc-back { transform: rotateY(180deg); }
.cc.t-elite .cc-face::before { content: ""; position: absolute; inset: -40%; background: var(--frame); animation: holo 7s linear infinite; }
@keyframes holo { to { transform: rotate(360deg); } }
.cc-face > .cc-inner { z-index: 1; }

.cc-inner {
  position: relative; width: 100%; height: 100%; border-radius: .75em; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 18%, color-mix(in srgb, var(--accent) 85%, #fff 15%) 0%, var(--accent) 38%, var(--accent2) 100%);
}
.cc-pattern {
  position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08z M14 32.33v16.17' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 2.2em auto;
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.cc-rays {
  position: absolute; inset: -20%; opacity: .22; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.55) 0 2deg, transparent 2deg 12deg);
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 55%);
}

/* portrait */
.cc-portrait { position: absolute; left: 0; right: 0; top: 1.4em; bottom: 6.4em; display: grid; place-items: center; }
.cc-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.cc-mono {
  font-family: "Anton", Impact, sans-serif; font-size: 8.4em; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: .018em rgba(255,255,255,.75);
  text-shadow: 0 0 .25em rgba(255,255,255,.12);
  transform: translateY(-.04em) rotate(-6deg);
}
.cc-roleicon { position: absolute; width: 3.4em; height: 3.4em; top: .9em; left: .9em; opacity: .9; color: var(--bar); filter: drop-shadow(0 .2em .4em rgba(0,0,0,.4)); }

/* top corners */
.cc-ovr { position: absolute; top: .55em; left: .8em; text-align: center; line-height: .9; z-index: 2; }
.cc-ovr b { display: block; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 3.5em; text-shadow: 0 .06em .2em rgba(0,0,0,.45); }
.cc-ovr span { display: block; font-size: .78em; font-weight: 700; letter-spacing: .18em; opacity: .9; margin-top: .25em; }
.cc-ovr i { display: inline-block; margin-top: .45em; font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: .1em; padding: .18em .55em; border-radius: 1em; background: var(--frame); color: #111; }
.cc-tr { position: absolute; top: .75em; right: .8em; display: flex; flex-direction: column; align-items: flex-end; gap: .35em; z-index: 2; }
.cc-fmt { font-weight: 800; font-size: .8em; letter-spacing: .12em; padding: .22em .6em; border-radius: .35em; background: rgba(0,0,0,.35); border: .08em solid rgba(255,255,255,.35); }
.cc-cty { font-family: "Anton", Impact, sans-serif; font-size: 1.15em; letter-spacing: .06em; text-shadow: 0 .06em .2em rgba(0,0,0,.5); }

/* name + stats */
.cc-name { position: absolute; left: 0; right: 0; bottom: 3.9em; text-align: center; z-index: 2; padding: 0 .6em; }
.cc-name small { display: block; font-size: .95em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.cc-name strong { display: block; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1.05; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 .06em .25em rgba(0,0,0,.55); }
.cc-name::before { content: ""; position: absolute; left: 12%; right: 12%; top: -.45em; height: .12em; background: var(--frame); border-radius: 1em; }
.cc-stats { position: absolute; left: .45em; right: .45em; bottom: .45em; display: grid; grid-template-columns: repeat(2, 1fr); gap: .3em; z-index: 2; }
.cc-stats div { background: rgba(0,0,0,.42); border: .07em solid rgba(255,255,255,.22); border-radius: .5em; padding: .3em 0 .25em; text-align: center; line-height: 1; }
.cc-stats b { display: block; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.75em; color: var(--bar); }
.cc-stats span { display: block; font-size: .66em; font-weight: 700; letter-spacing: .16em; margin-top: .25em; opacity: .85; }
.cc-brand { position: absolute; left: 50%; top: 1.15em; transform: translateX(-50%); font-size: .55em; letter-spacing: .3em; font-weight: 700; opacity: .55; white-space: nowrap; z-index: 2; }
.cc-shine { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s ease; }
.cc:hover .cc-shine { background-position: -40% 0; }

/* ---------- back ---------- */
.cc-back .cc-inner { background: linear-gradient(180deg, #121722, #0a0d14); padding: .7em .75em .6em; display: flex; flex-direction: column; gap: .45em; }
.cb-head { display: flex; align-items: center; gap: .55em; padding-bottom: .45em; border-bottom: .07em solid rgba(255,255,255,.14); }
.cb-ovr { font-family: "Anton", Impact, sans-serif; font-size: 1.9em; line-height: 1; padding: .1em .3em; border-radius: .25em; background: var(--frame); color: #111; }
.cb-id { min-width: 0; line-height: 1.1; }
.cb-id strong { display: block; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.1em; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-id span { display: block; font-size: .68em; opacity: .7; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-body { flex: 1; display: flex; flex-direction: column; gap: .5em; min-height: 0; }
.cb-sec h4 { margin: 0 0 .25em; font-size: .62em; letter-spacing: .22em; font-weight: 800; color: var(--bar); text-transform: uppercase; display: flex; justify-content: space-between; }
.cb-sec h4 em { font-style: normal; color: #fff; opacity: .55; letter-spacing: .08em; }
.cb-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .2em .7em; }
.cb-bar { display: grid; grid-template-columns: 4.6em 1fr 1.6em; align-items: center; gap: .3em; font-size: .64em; }
.cb-bar label { opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-bar .tr { height: .42em; border-radius: 1em; background: rgba(255,255,255,.1); overflow: hidden; }
.cb-bar .tr i { display: block; height: 100%; border-radius: 1em; background: var(--bar); }
.cb-bar .tr i.lo { background: #f87171; } .cb-bar .tr i.mid { background: #fbbf24; } .cb-bar .tr i.hi { background: #4ade80; }
.cb-bar b { text-align: right; font-weight: 700; }
.cb-grids { display: flex; gap: .6em; }
.cb-grid { flex: 1; }
.cb-grid table { width: 100%; border-collapse: separate; border-spacing: .14em; font-size: .56em; }
.cb-grid td, .cb-grid th { text-align: center; padding: 0; }
.cb-grid th { font-weight: 600; opacity: .55; }
.cb-grid td { height: 1.75em; border-radius: .25em; font-weight: 700; color: #0b0f17; }
.cb-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: .18em; }
.cb-table div { background: rgba(255,255,255,.06); border-radius: .3em; padding: .2em 0; text-align: center; line-height: 1.05; }
.cb-table b { display: block; font-size: .8em; }
.cb-table span { display: block; font-size: .5em; letter-spacing: .14em; opacity: .6; }
.cb-foot { font-size: .5em; letter-spacing: .14em; opacity: .45; text-align: center; text-transform: uppercase; }
.cb-empty { font-size: .7em; opacity: .55; padding: .3em 0; }

/* swap faces at the half-way point (don't rely on backface-visibility alone) */
.cc-front { visibility: visible; transition: visibility 0s .3s; }
.cc-back { visibility: hidden; transition: visibility 0s .3s; }
.cc.flipped .cc-front { visibility: hidden; }
.cc.flipped .cc-back { visibility: visible; }
.cb-body { justify-content: space-evenly; }
.cb-bars { gap: .34em .7em; }
.cb-bar { font-size: .7em; grid-template-columns: 4.4em 1fr 1.5em; }
.cb-bar .tr { height: .5em; }

.cc-logo { position: absolute; top: .8em; left: 50%; transform: translateX(-50%); height: 2.3em; z-index: 2; opacity: .95; filter: drop-shadow(0 .1em .25em rgba(0,0,0,.45)); }
.cb-foot { display: flex; align-items: center; justify-content: center; gap: .9em; }
.cb-foot img { height: 2.6em; opacity: .85; }