/* Expert ranking cards only; football and basketball share this presentation. */
@media(max-width:760px){
 html body #app.route-rank>.wrap .rank-exact-card{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;min-height:0!important;height:auto!important;padding:12px 10px!important;gap:10px 0!important;margin:0!important}
 html body #app.route-rank>.wrap .rank-exact-identity{grid-column:1/-1!important;grid-row:1!important;grid-template-columns:30px 44px minmax(0,1fr)!important;gap:8px!important;padding:0!important}
 html body #app.route-rank>.wrap .rank-exact-identity>em{width:28px!important;height:36px!important;font-size:12px!important}
 html body #app.route-rank>.wrap .rank-exact-identity>em small{font-size:7px!important;margin-bottom:-8px!important}
 html body #app.route-rank>.wrap .rank-exact-identity img{width:42px!important;height:42px!important;border-width:2px!important;box-shadow:none!important}
 html body #app.route-rank>.wrap .rank-exact-identity h2{flex-wrap:wrap!important;gap:4px 6px!important;font-size:17px!important;line-height:1.3!important;margin:0 0 5px!important}
 html body #app.route-rank>.wrap .rank-exact-identity h2 i{font-size:9px!important;padding:3px 5px!important;margin:0!important}
 html body #app.route-rank>.wrap .rank-exact-identity p{font-size:11px!important;line-height:1.5!important;margin:0 0 4px!important}
 html body #app.route-rank>.wrap .rank-exact-identity strong{font-size:11px!important;line-height:1.5!important}
 html body #app.route-rank>.wrap .rank-exact-record{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important;align-items:center!important;height:auto!important;min-height:0!important;padding:9px 10px!important;gap:4px 10px!important;border-left:2px solid var(--rx-line)!important;border-top:1px solid var(--rx-line)!important;border-bottom:1px solid var(--rx-line)!important}
 html body #app.route-rank>.wrap .rank-exact-record>small{grid-column:1!important;grid-row:1!important;font-size:8px!important;line-height:1.3!important;letter-spacing:1px!important}
 html body #app.route-rank>.wrap .rank-exact-record>b{grid-column:1!important;grid-row:2!important;font-size:18px!important;line-height:1.4!important}
 html body #app.route-rank>.wrap .rank-exact-record>span{grid-column:2!important;grid-row:1/3!important;font-size:11px!important;line-height:1.6!important;text-align:right!important}
 html body #app.route-rank>.wrap .rank-exact-metric{grid-column:auto!important;grid-row:3!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:6px!important;min-height:0!important;height:auto!important;padding:7px 5px!important;border-left:0!important;border-right:1px solid var(--rx-line)!important}
 html body #app.route-rank>.wrap .rank-exact-metric:nth-child(3){grid-column:1!important}
 html body #app.route-rank>.wrap .rank-exact-metric:nth-child(4){grid-column:2!important}
 html body #app.route-rank>.wrap .rank-exact-metric:nth-child(5){grid-column:3!important;border-right:0!important}
 html body #app.route-rank>.wrap .rank-exact-metric small{font-size:8px!important;line-height:1.3!important;letter-spacing:.7px!important;white-space:nowrap!important}
 html body #app.route-rank>.wrap .rank-exact-metric b{font-size:24px!important;line-height:1.15!important}
 html body #app.route-rank>.wrap .rank-exact-metric span{font-size:10px!important;line-height:1.4!important}
 html body #app.route-rank>.wrap .rank-exact-metric>i{width:75%!important;height:3px!important;margin:0!important}
 html body #app.route-rank>.wrap .rank-exact-observe{grid-column:1/-1!important;grid-row:4!important;display:grid!important;gap:9px!important;padding:0!important;border-left:0!important}
 html body #app.route-rank>.wrap .rank-exact-observe>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:0!important;border-radius:6px!important}
 html body #app.route-rank>.wrap .rank-exact-observe>div>span{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;min-height:0!important;padding:10px 6px!important;gap:8px!important}
 html body #app.route-rank>.wrap .rank-exact-observe b{font-size:22px!important;line-height:1.2!important}
 html body #app.route-rank>.wrap .rank-exact-observe small{font-size:10px!important;margin:0!important;line-height:1.4!important}
 html body #app.route-rank>.wrap .rank-exact-observe footer{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)!important;gap:8px!important;margin:0!important;padding:0!important}
 html body #app.route-rank>.wrap .rank-exact-observe button{min-width:0!important;min-height:0!important;height:38px!important;padding:0 8px!important;border-radius:6px!important;font-size:12px!important;line-height:1.4!important}
}
@media(max-width:350px){
 html body #app.route-rank>.wrap .rank-exact-identity{grid-template-columns:26px 38px minmax(0,1fr)!important;gap:6px!important}
 html body #app.route-rank>.wrap .rank-exact-identity img{width:36px!important;height:36px!important}
 html body #app.route-rank>.wrap .rank-exact-identity>em{width:24px!important}
 html body #app.route-rank>.wrap .rank-exact-identity h2{font-size:16px!important}
 html body #app.route-rank>.wrap .rank-exact-metric b{font-size:22px!important}
 html body #app.route-rank>.wrap .rank-exact-record>b{font-size:16px!important}
 html body #app.route-rank>.wrap .rank-exact-record>span{font-size:10px!important}
 html body #app.route-rank>.wrap .rank-exact-observe>div>span{gap:5px!important}
}
@media(max-width:760px){
 html body #app.route-rank>.wrap .rank-exact-record>b,html body #app.route-rank>.wrap .rank-exact-metric>b{margin:0!important}
 html body #app.route-rank>.wrap .rank-exact-observe>div>span{height:auto!important}
}
@media(max-width:760px){
 html body #app.route-rank>.wrap .rank-exact-observe,html body #app.route-rank>.wrap .rank-exact-observe>div{height:auto!important;min-height:0!important}
}