/* Card A, "the trading card" (docs/mockups/profile-p2.html): the player's card, in one
   place for the app's profile (index.html, profile.css adds what only the profile has: the
   level to set, its move, the Bronze card) and the homepage's sample (home.html, home.css
   draws it a size smaller). Its own colours, the same on light and dark. */
.ca{border-radius:24px;padding:16px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,210,31,.22),transparent 55%),linear-gradient(160deg,#151517,#2E2E33);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.ca::after{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;border:2px solid rgba(255,255,255,.06);pointer-events:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ca{box-shadow:none;border:1px solid #3A3A3F}}
:root[data-theme="dark"] .ca{box-shadow:none;border:1px solid #3A3A3F}
.ca .row1{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}
.ca .lvl b{font-size:36px;color:#FFD21F;display:block}
.ca .lvl span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.ca .sport{font-size:11px;font-weight:800;letter-spacing:.12em;border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:6px 10px;margin-inline-start:auto}
.ca .med{width:76px;height:76px;border-radius:50%;margin:10px auto 10px;display:grid;place-items:center;font:900 28px/1 var(--font);font-stretch:80%;
  background:#FFD21F;color:#111;box-shadow:0 0 0 4px rgba(255,210,31,.25),0 0 0 9px rgba(255,255,255,.05)}
.ca .name{text-align:center;font-size:24px;overflow-wrap:anywhere}
.ca .vm{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FFD21F;color:#111;font-size:12px;font-weight:900;vertical-align:3px}
.ca .handle{text-align:center;font-size:13px;opacity:.75;margin-top:4px}
.ca .badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}
.bdg{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:6px 10px 6px 6px;font-size:12px;font-weight:800;white-space:nowrap}
.bdg .e{font-size:14px;line-height:1}
.bdg small{font-weight:700;opacity:.7}
.ca .bdg{background:rgba(255,255,255,.1);color:#fff}
.ca .bdg.found{background:#FFD21F;color:#111}
.ca .bdg.moment{background:transparent;box-shadow:inset 0 0 0 2px #FFD21F;color:#FFD21F}
.ca .ca-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;text-align:center} /* only the numbers that aren't zero, side by side */
.ca .ca-stats b{display:block;font-size:26px}
.ca .ca-stats span{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.7;display:block;white-space:nowrap} /* one line each, so the four line up ("SAVED CLIPS" wrapped) */
[dir=rtl] .ca .ca-stats span{white-space:normal;line-height:1.3}
.ca .ca-stats div+div{border-inline-start:1px solid rgba(255,255,255,.1)}
/* the photo in the medallion (P1.3) */
.ca .med.ph{overflow:hidden;padding:0}
.ca .med.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* Arabic letters at 10-11 px are hard to read: the card's small labels at 12 px in Arabic
   (the full check, 2026-10-18) */
:root[lang=ar] :is(.ca .lvl span,.ca .sport,.ca .ca-stats span){font-size:12px}