/* Match entrance and on-court labels, following the supplied visual references. */
#matchIntro .mi-band{
 min-width:0;width:max-content;max-width:88vw;padding:14px 28px;
 border:0;border-radius:0;gap:0;background:linear-gradient(90deg,#05271fe8,#082820ee 50%,#05271fe8);
 box-shadow:0 8px 24px #0004
}
#matchIntro .mi-row{width:auto;max-width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px}
#matchIntro .mi-team{min-width:0;justify-content:center;gap:0}
#matchIntro .mi-team b{font:900 clamp(24px,2.5vw,44px)/1.1 var(--fam);overflow-wrap:anywhere;text-shadow:0 2px 6px #0004}
#matchIntro .mi-vs{font:900 clamp(24px,2.5vw,44px)/1.1 var(--fam);background:none;color:#e9efeb;transform:none;padding:0}

/* One speed card in both the entrance and the rally. The shape is skewed,
   while the label and live number remain legible and keep their own baseline. */
#hud .shot-hud{left:28px;bottom:66px;width:200px;min-width:0;max-width:none;padding:12px 20px 13px;
 box-sizing:border-box;border:0;border-radius:0;background:none;box-shadow:none;display:block;isolation:isolate}
#hud .shot-hud::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:10px;
 background:linear-gradient(135deg,#06372eea,#05241fec);transform:skewX(-8deg);box-shadow:0 8px 22px #001b165c}
#hud .shot-hud>#contact,#hud .shot-hud>#aimLabel{display:none}
#hud .sh-speed{display:grid;grid-template-columns:max-content 1fr;align-items:baseline;column-gap:12px;row-gap:4px;margin:0;padding:0;border:0;font-synthesis:style}
#hud .sh-speed small{grid-column:1/-1;margin:0;font:800 italic 11px/1.2 var(--hud-font);letter-spacing:.14em;color:#81edb0}
#hud .sh-speed b{font:900 italic 58px/.94 var(--hud-num);letter-spacing:-2px;color:#f4fff9;text-shadow:0 0 13px #55eac05e;font-variant-numeric:tabular-nums}
#hud .sh-speed em{font:700 italic 16px/1 var(--hud-font);color:#a6bbb6;white-space:nowrap}

/* Full venue name above the court type, with the reference's blue side rule. */
#hud .court-label{display:grid;grid-template-columns:5px minmax(0,1fr);grid-template-rows:auto auto;
 left:24px;top:86px;align-items:center;column-gap:15px;row-gap:8px;padding:12px 22px 12px 0;
 max-width:min(370px,42vw);box-sizing:border-box;border:0;border-radius:0;
 background:linear-gradient(90deg,#08130ed9,#08130eb8 75%,#08130e00);box-shadow:none}
#hud .court-label i{grid-column:1;grid-row:1/3;width:5px;height:100%;min-height:49px;border-radius:1px;
 background:linear-gradient(#9edbff,#4c9cc7);box-shadow:0 0 8px #74bbdf33}
#hud .court-label #venueName{grid-column:2;grid-row:1;font:900 21px/1.15 var(--hud-font);letter-spacing:.01em;color:#fff;text-transform:uppercase;overflow-wrap:anywhere}
#hud .court-label #surfaceName{grid-column:2;grid-row:2;font:500 14px/1.15 var(--hud-font);letter-spacing:.18em;color:#bac7ce;text-transform:uppercase}
#hud .court-label #surfaceName::before{content:none}
@media(max-width:820px){
 #matchIntro .mi-band{padding:12px 18px}#matchIntro .mi-row{gap:16px}
 #hud .shot-hud{left:21px;bottom:20px;width:182px;padding:11px 17px}#hud .sh-speed b{font-size:50px}
 #hud .court-label{left:14px;top:86px;column-gap:10px;max-width:46vw;padding-right:12px}
 #hud .court-label #venueName{font-size:16px}#hud .court-label #surfaceName{font-size:11px}
}
@media(max-height:620px) and (min-width:821px){#hud .shot-hud{bottom:48px;width:182px}#hud .sh-speed b{font-size:50px}}