/* Sport tiles (#534): the icon tiles of the sport strips on /live/sports/ (and /live/sports-old/) and the /sports-odds/ desk —
   a rounded icon box with the count badge on its top edge and the name underneath. Moved here from livesports.css (the badge gained a
   fallback for pages without --card-3); the selected tile is .is-on (a pressed button) or [aria-selected="true"] (a tab). Markup: inc/sport-tiles.php, assets/js/sport-tiles.js. */
.lvs-sport{--accent:var(--hi,#A78BFA);flex:0 0 auto;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;border:0;scroll-snap-align:start;color:var(--ink-3);cursor:pointer}
.lvs-sport .lvs-sport-ico{position:relative;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--hair);color:var(--ink-2);transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.lvs-sport .lvs-sport-ico svg{width:26px;height:26px}
.lvs-sport .lvs-sport-lbl{font-size:12px;font-weight:600;line-height:1.2;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;transition:color .16s}
.lvs-sport em{position:absolute;top:-6px;right:-6px;font-style:normal;font-size:11.5px;font-weight:800;line-height:1;padding:3px 5px;border-radius:999px;background:var(--card-3,var(--surface-3,#293046));border:1px solid var(--hair-2);color:var(--ink-3)}
.lvs-sport:hover .lvs-sport-ico{border-color:var(--hair-2);color:#fff;transform:translateY(-1px)}
.lvs-sport:hover .lvs-sport-lbl{color:#fff}
.lvs-sport.is-on .lvs-sport-ico,.lvs-sport[aria-selected="true"] .lvs-sport-ico{background:color-mix(in srgb,var(--accent) 16%,var(--card-2));border-color:color-mix(in srgb,var(--accent) 70%,transparent);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.lvs-sport.is-on .lvs-sport-lbl,.lvs-sport[aria-selected="true"] .lvs-sport-lbl{color:color-mix(in srgb,var(--accent) 80%,#fff)}
.lvs-sport.is-on em,.lvs-sport[aria-selected="true"] em{background:var(--accent);border-color:transparent;color:#0B0B13}
@media (max-width:640px){
	.lvs-sport{width:62px}
	.lvs-sport .lvs-sport-ico{width:50px;height:50px;border-radius:12px}
	.lvs-sport .lvs-sport-ico svg{width:23px;height:23px}
	.lvs-sport .lvs-sport-lbl{max-width:62px;font-size:12px}
}
