/* #451 — Canonical website face of the BeatOnStep sporting collectible.
   The seven accents/marks and distance crests match mobile-app/src/utils/sportCardVisual.ts.
   Rarity color follows the validated 1–7 star tier, never ownership or guessed performance. */
.bos-sport-face{
  position:relative;box-sizing:border-box;width:157px;height:218px;flex:none;
  padding:12px;border:1.7px solid var(--sport-accent);border-radius:19px;
  background:#181811;display:flex;flex-direction:column;justify-content:space-between;
  color:#f4f1e0;box-shadow:0 8px 24px #0007,0 0 17px color-mix(in srgb,var(--sport-accent) 23%,transparent);
  overflow:hidden;font-family:system-ui,-apple-system,sans-serif;text-align:left}
.bos-sport-face *{box-sizing:border-box}
.sport-skin--beginner{--sport-accent:#8E969A;--sport-shade:#30383C}
.sport-skin--amateur{--sport-accent:#AD7856;--sport-shade:#4A3024}
.sport-skin--regular{--sport-accent:#C5AC67;--sport-shade:#4C4228}
.sport-skin--intermediate{--sport-accent:#55977B;--sport-shade:#214237}
.sport-skin--expert{--sport-accent:#587DB3;--sport-shade:#233956}
.sport-skin--legend{--sport-accent:#9370AB;--sport-shade:#3D2E51}
.sport-skin--world_elite{--sport-accent:#B65767;--sport-shade:#4C2530}
/* Distance changes the crest, not the jewel finish assigned by stars. */
.bos-sport-top{display:flex;justify-content:space-between;align-items:center;
  gap:4px;color:#fcea07;font-size:9px;letter-spacing:1.2px;font-weight:900}
.bos-sport-top .bos-tier-icon{font-size:21px;line-height:1;color:var(--sport-accent);
  letter-spacing:0}
.bos-sport-art{flex:1;min-height:0;margin:6px 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;border:1.2px solid var(--sport-accent);
  border-radius:11px;background:#1F1E1B;overflow:hidden;padding:3px}
.bos-sport-bars{display:flex;justify-content:center;gap:4px;align-items:center;height:4px}
.bos-sport-bars i{display:block;width:7px;height:2px;background:var(--sport-accent);border-radius:2px}
.bos-sport-bars i:nth-child(even){opacity:.45}
.bos-sport-crest{border:2px solid var(--sport-accent);background:var(--sport-shade);
  color:#fff9e9;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;line-height:1;font-weight:900;letter-spacing:-.5px;
  box-shadow:0 0 12px #0003}
.bos-sport-signature{font-size:7px;font-weight:900;letter-spacing:.5px;
  color:var(--sport-accent);text-align:center;line-height:1.1}
.bos-sport-symbols{font-size:7px;line-height:1.1;color:var(--sport-accent);
  letter-spacing:1.1px;white-space:nowrap}
.bos-sport-foot{display:flex;flex-direction:column;gap:2px;min-width:0}
.bos-sport-category{font-size:8px;letter-spacing:.65px;color:var(--sport-accent);font-weight:900}
.bos-sport-name{font-size:13px;line-height:1.18;font-weight:900;overflow-wrap:anywhere;
  color:#f4f1e0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Seven star slots and jewel accents both express the validated tier. */
.bos-sport-stars{display:flex;align-items:center;gap:2px;min-height:14px;
  margin-top:2px;white-space:nowrap;font-size:13px;line-height:1}
.bos-sport-stars .is-filled{color:var(--sport-accent)}
.bos-sport-stars .is-outline{color:#716e61}
.bos-sport-unique{font-size:7.4px;line-height:1.25;font-weight:900;color:var(--sport-accent)}
.bos-sport-warning-icon{font-size:18px;font-weight:900;color:#ffc764;line-height:1}
.bos-sport-warning-label{font-size:7.2px;line-height:1.2;font-weight:900;color:#ffc764;overflow-wrap:anywhere}
.bos-sport-face.is-ghost{opacity:.72}
.bos-sport-face.is-ghost .bos-sport-unique{color:#b7b2a5}
.bos-sport-face.is-rejected{--sport-accent:#96938a}
.bos-sport-face.sport-featured .bos-sport-crest{border-width:2.7px;
  box-shadow:0 0 18px color-mix(in srgb,var(--sport-accent) 28%,transparent)}
.sport-skin--legend .bos-sport-art,
.sport-skin--world_elite .bos-sport-art{box-shadow:inset 0 0 13px #fff4bc12}
.sport-skin--world_elite .bos-sport-crest{box-shadow:0 0 12px color-mix(in srgb,var(--sport-accent) 27%,transparent)}
.sport-skin--legend .bos-sport-crest{box-shadow:0 0 12px color-mix(in srgb,var(--sport-accent) 27%,transparent)}
/* Catalogue: real card face + public metadata. Musical layout untouched. */
.sport-card .sport-summary{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:14px}
.sport-card .bos-sport-copy{flex:1;min-width:145px;max-width:100%}
.sport-card .bos-sport-copy h2{margin:10px 0}
.sport-card .bos-sport-copy .sport-ownership{margin:10px 0}
#results .sport-card .sport-summary .bos-sport-face{width:157px;height:218px}
#challenge-deck-cards .sport-deck-tile{display:flex;align-items:center;flex-wrap:wrap;
  gap:16px}
#challenge-deck-cards .sport-deck-copy{flex:1;min-width:135px}
#challenge-deck-cards .sport-deck-copy h3{font-size:16px}
.sport-gift-face{margin:0 auto 16px}
@media(max-width:390px){
  .sport-card .sport-summary{gap:11px}
  .sport-card .bos-sport-copy{min-width:120px}
}
@media(prefers-reduced-motion:reduce){
  .bos-sport-face{transition:none!important;animation:none!important}
}