/* SPARO — athlete card (FUT-style) shared component */
.acard {
  position: relative;
  width: 340px;
  border-radius: 22px;
  padding: 26px 24px 24px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--ac, #fff) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ac-bg, #1C1E23) 0%, #121419 100%);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ac, #fff) 42%, transparent), 0 30px 70px -30px #000;
  overflow: hidden;
  isolation: isolate;
}
.acard[data-arch="fast"]     { --ac: var(--fast);     --ac-bg: var(--fast-bg); }
.acard[data-arch="counter"]  { --ac: var(--counter);  --ac-bg: var(--counter-bg); }
.acard[data-arch="iron"]     { --ac: var(--iron);     --ac-bg: var(--iron-bg); }
.acard[data-arch="heavy"]    { --ac: var(--heavy);    --ac-bg: var(--heavy-bg); }
.acard[data-arch="complete"] { --ac: var(--complete); --ac-bg: var(--complete-bg); }

/* rarity border treatment */
.acard[data-r="legendary"] { box-shadow: inset 0 0 0 2px var(--gold), 0 0 50px -12px color-mix(in oklab, var(--warning) 60%, transparent), 0 30px 70px -30px #000; }
.acard[data-r="epic"]      { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 78%, transparent), 0 0 44px -16px color-mix(in oklab, var(--accent) 50%, transparent), 0 30px 70px -30px #000; }

/* shimmer sweep for epic/legendary */
.acard[data-r="legendary"]::after,
.acard[data-r="epic"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, color-mix(in oklab, var(--shimmer, #FCD34D) 55%, transparent) 50%, transparent 65%);
  background-size: 280% 100%;
  animation: shimmer 3.6s ease-in-out infinite;
}
.acard[data-r="legendary"]::after { --shimmer: #FCD34D; }
.acard[data-r="epic"]::after { --shimmer: #CFC4FF; }
@keyframes shimmer { 0% { background-position: 180% 0; } 55%, 100% { background-position: -80% 0; } }

.acard-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; }
.acard-score { display: flex; flex-direction: column; line-height: 0.84; }
.acard-score .n { font-family: var(--cond); font-weight: 700; font-size: 76px; color: var(--ac, #fff); font-variant-numeric: tabular-nums; }
.acard-score .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--muted); margin-top: 6px; }
.acard-rarity {
  font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: #101216; white-space: nowrap; flex: none;
}
.acard[data-r="common"]    .acard-rarity { background: var(--neutral); color: #f0f0f0; }
.acard[data-r="rare"]      .acard-rarity { background: var(--brand); }
.acard[data-r="epic"]      .acard-rarity { background: var(--accent); }
.acard[data-r="legendary"] .acard-rarity { background: linear-gradient(100deg, #FBBF24, #F59E0B); color: #2A1A00; }

.acard-avatar { width: 96px; height: 96px; font-size: 38px; margin: 18px auto 14px; position: relative; z-index: 2; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ac, #fff) 50%, transparent); }
.acard-id { text-align: center; position: relative; z-index: 2; }
.acard-name { font-family: var(--cond); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.acard-num { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 2px; }
.acard-arch { margin: 16px auto 6px; display: flex !important; justify-content: center; }
.acard-tagwrap { text-align: center; position: relative; z-index: 2; }
.acard-tag { font-size: 13.5px; color: color-mix(in oklch, var(--ac, #fff) 85%, #fff); font-style: italic; letter-spacing: 0.01em; }

.acard-metrics { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; position: relative; z-index: 2; }
.acard-mrow { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 12px; }
.acard-mrow .ml { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.acard-mrow .mbar { height: 7px; border-radius: 999px; background: #ffffff14; overflow: hidden; }
.acard-mrow .mbar i { display: block; height: 100%; border-radius: 999px; background: var(--ac, #fff); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.acard-mrow .mval { font-family: var(--cond); font-weight: 700; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.acard-mrow.dom .ml { color: var(--ac, #fff); }
.acard-mrow.dom .mval { color: var(--ac, #fff); }

/* faux QR */
.qrbox { display: grid; gap: 2px; background: #fff; padding: 10px; border-radius: 10px; }
.qrbox i { background: #16181D; border-radius: 1px; }
.qrbox i.off { background: transparent; }