/* The existing court, scores and controls remain the source of truth. */
html body.rotor-match-frame {
  --match-top: 112px;
  --match-bottom: 158px;
  --match-clear: linear-gradient(150deg, #ffffff16, #00000012 48%, #b6ef3c08);
  --match-edge: #f2ffcb60;
}
html body.rotor-match-frame > header {
  position: fixed; inset: 0 0 auto; height: calc(var(--match-top) + env(safe-area-inset-top));
  padding: calc(14px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0;
  box-sizing: border-box; display: flex; align-items: flex-start; justify-content: space-between;
  background: #030503f5; border-bottom: 1px solid #b6ef3c42; box-shadow: 0 10px 24px #0006;
  z-index: 45;
}
html body.rotor-match-frame > header .brand { font-size: 22px; line-height: 1; flex: none; }
html body.rotor-match-frame > header .brand small { margin-top: 7px; font-size: 9px; color: #d9e5cc; }
html body.rotor-match-frame .topActions { gap: 8px; align-items: center; }
html body.rotor-match-frame .topActions > .stadium-home-link { display: none; }
html body.rotor-match-frame .topActions :is(button,.rotor-club-button) {
  position: relative; inset: auto; min-height: 44px; border-radius: 22px;
  background: var(--match-clear); border: 1px solid var(--match-edge);
  box-shadow: inset 0 1px 1px #fff8, inset 0 -2px 3px #0008, 0 5px 12px #0005;
  color: #e8f3dd; font-size: 11px; padding: 9px 14px;
}
html body.rotor-match-frame .topActions #sound::after { content: none; }
html body.rotor-match-frame .topActions #pause { min-width: 44px; font-size: 19px; }
html body.rotor-match-frame .topActions .rotor-club-button { gap: 6px; padding: 7px 12px 7px 8px; }
html body.rotor-match-frame .topActions .rotor-club-button svg { width: 22px; height: 22px; }
html body.rotor-match-frame #scoreboard {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  min-height: 48px; border: 0; border-radius: 0; padding: 0 18px; gap: 20px;
  background: transparent; box-shadow: none;
}
html body.rotor-match-frame:not(.playing) #scoreboard { display: none !important; }
html body.rotor-match-frame #scoreboard b { color: #ffe45b; font-size: 36px; }
html body.rotor-match-frame #scoreboard > div {
  display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 12px;
  border: 1px solid #eeffcc66; border-radius: 12px;
  background: var(--match-clear); box-shadow: inset 0 1px 1px #fff7, inset 0 -2px 3px #0008, 0 5px 12px #0004;
}
html body.rotor-match-frame #scoreboard small { font-size: 10px; color: #e5efda; }
html body.rotor-match-frame #matchType,
html body.rotor-match-frame #matchType em { color: #d0dfbc; font-size: 10px; }
.match-frame-status {
  position: absolute; left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right));
  bottom: 11px; display: flex; align-items: center; gap: 14px; min-height: 32px;
  font: 650 10px/1.4 Inter, Arial, sans-serif; letter-spacing: .055em; pointer-events: auto;
}
.match-frame-signal { color: #edf5e2; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.match-frame-signal::before { content: ''; width: 6px; height: 6px; background: #cfddbf; border-radius: 50%; }
.match-frame-signal[data-live=true]::before { background: #b6ef3c; }
.match-frame-connection { color: #c6d8b6; overflow-wrap: anywhere; }
.match-frame-connection[data-connected=true] { color: #b6ef3c; }
.match-frame-opponent { margin-left: auto; color: #b6ef3c; min-height: 36px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
html body .match-frame-ready {
  margin-left: auto; min-height: 36px; padding: 8px 18px; border: 1px solid #ffe45b99;
  border-radius: 18px 8px 18px 8px; background: var(--match-clear); color: #ffe45b;
  box-shadow: inset 0 1px #ffffc67a, 0 4px 10px #0005; font: 750 10px/1.2 Inter, Arial, sans-serif;
}
.match-frame-opponent + .match-frame-ready { margin-left: 0; }
html body .match-frame-ready:disabled { opacity: .6; cursor: default; }
html body .match-frame-status [hidden] { display: none !important; }
html body.rotor-match-frame #flightHud {
  position: fixed; inset: auto 0 0; height: calc(var(--match-bottom) + env(safe-area-inset-bottom));
  padding: 10px max(24px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom));
  box-sizing: border-box; display: grid; grid-template-columns: 1fr minmax(220px, 1.3fr) 1fr;
  align-items: center; gap: 8px 28px; background: #030503f5; border-top: 1px solid #b6ef3c42;
  box-shadow: 0 -10px 24px #0006; z-index: 44;
}
.match-frame-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; color: #d2dfc3; font: 550 10px/1.3 Inter, Arial, sans-serif; }
.match-frame-stat { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.match-frame-stat strong { color: #edf4e4; font-size: 12px; font-variant-numeric: tabular-nums; }
.match-frame-transport { margin-left: auto; color: #c5d6b3; font-size: 9px; }
.match-frame-destinations {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; border-top: 1px solid #dbeccd24; padding-top: 5px;
}
html body.rotor-match-frame .match-frame-destinations :is(a,button) {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  min-height: 36px; padding: 5px 8px; border: 1px solid #eaffcc38; border-radius: 8px 16px 8px 16px;
  background: var(--match-clear); color: #dce9d0; text-decoration: none;
  box-shadow: inset 0 1px #ffffff40, inset 0 -1px #0008; font: 650 10px/1.2 Inter,Arial,sans-serif;
}
html body.rotor-match-frame .match-frame-destinations :last-child { color: #ffe889; }
html body.rotor-match-frame .match-frame-destinations button:disabled { opacity: .5; cursor: default; }
html body.rotor-match-frame #flightHud :is(.flightTelemetry,.boost,.ballStats) {
  position: static; inset: auto; transform: none; width: auto; margin: 0; min-width: 0;
}
html body.rotor-match-frame #flightHud .ballStats { justify-self: end; gap: 22px; }
html body.rotor-match-frame #flightHud .session { display: none; }
html body.rotor-match-frame #flightHud #flightSpeed,
html body.rotor-match-frame #flightHud .ballStats b { font-size: 25px; }
html body.rotor-match-frame #flightHud .flightTelemetry > small,
html body.rotor-match-frame #flightHud .ballStats small { color: #d2dfc3; font-size: 9px; margin-top: 3px; }
html body.rotor-match-frame #flightHud .energyCaption { margin: 0 0 5px; }
html body.rotor-match-frame #flightHud .energyLegend { margin-top: 5px; font-size: 8px; }
html body.rotor-match-frame #energyMeter { height: 13px; }
html body.rotor-match-frame .stadium-match-tools { bottom: calc(var(--match-bottom) + env(safe-area-inset-bottom) + 14px); }
html body.rotor-match-frame #readyHint { top: calc(var(--match-top) + env(safe-area-inset-top) + 16px); }
html body.rotor-match-frame .rotor-view-toggle { top: calc(var(--match-top) + env(safe-area-inset-top) + 14px); }
html body.rotor-match-frame .rotor-view-pip { top: calc(var(--match-top) + env(safe-area-inset-top) + 68px); max-height: calc(100dvh - var(--match-top) - var(--match-bottom) - 92px); }
html body.rotor-match-frame .rotor-club-center {
  top: calc(var(--match-top) + env(safe-area-inset-top) + 14px); bottom: calc(var(--match-bottom) + env(safe-area-inset-bottom) + 14px);
  max-height: none;
}
html body.rotor-match-frame #help { top: calc(var(--match-top) + 14px); bottom: calc(var(--match-bottom) + 14px); }
html body.rotor-match-frame.club-center-open :is(.rotor-view-toggle,.stadium-match-tools),
html body.rotor-match-frame.stadium-replay-open :is(.rotor-view-toggle,.stadium-match-tools) { visibility: hidden; }
html body.rotor-match-frame #resumePanel {
  top: 50%; transform: translate(-50%, -50%); border: 1px solid #f1ffdb80; border-radius: 28px;
  background: linear-gradient(145deg, #ffffff18, #02050285); backdrop-filter: none;
  box-shadow: inset 0 1px 1px #fff8, 0 16px 40px #0008;
}
html body.rotor-match-frame #resumePanel button { min-height: 44px; border-radius: 22px; background: var(--match-clear); color: #e9f6db; border-color: var(--match-edge); }
html body.rotor-match-frame #resumePanel #resume { color: #ffe45b; border-color: #ffe45b80; }
html body.rotor-match-frame :is(button,a):focus-visible { outline: 2px solid #ffe45b; outline-offset: 3px; }
@media (hover: hover) {
  html body.rotor-match-frame .topActions button:hover,
  html body.rotor-match-frame #resumePanel button:hover,
  html body.rotor-match-frame .match-frame-destinations :is(a,button):not(:disabled):hover,
  html body .match-frame-ready:not(:disabled):hover { border-color: #ffe45b; color: #fff3a4; background-color: #efffc20d; }
  .match-frame-opponent:hover { color: #fff3a4; text-decoration-thickness: 2px; }
}
@media (max-width: 1000px) {
  html body.rotor-match-frame { --match-top: 146px; }
  html body.rotor-match-frame #scoreboard { top: 60px; }
  html body.rotor-match-frame #scoreboard b { font-size: 29px; }
  html body.rotor-match-frame #scoreboard > div { min-height: 32px; padding: 3px 9px; }
  html body.rotor-match-frame #scoreboard small { font-size: 9px; }
  html body.rotor-match-frame #scoreboard { min-height: 36px; }
}
@media (max-width: 640px) {
  html body.rotor-match-frame { --match-top: 154px; --match-bottom: 172px; }
  html body.rotor-match-frame > header { padding-inline: 16px; }
  html body.rotor-match-frame > header .brand { font-size: 18px; }
  html body.rotor-match-frame > header .brand small { display: none; }
  html body.rotor-match-frame .topActions { gap: 5px; }
  html body.rotor-match-frame .topActions #sound { padding-inline: 9px; font-size: 9px; }
  html body.rotor-match-frame .topActions .rotor-club-button svg { display: none; }
  html body.rotor-match-frame .topActions .rotor-club-button { padding-inline: 10px; font-size: 9px; }
  .match-frame-status { left: 16px; right: 16px; gap: 8px; flex-wrap: wrap; bottom: 8px; font-size: 9px; }
  .match-frame-connection { margin-left: auto; }
  .match-frame-opponent { margin-left: 0; }
  html body .match-frame-ready { margin-left: auto; }
  html body.rotor-match-frame:not(.playing) { --match-top: 124px; }
  html body.rotor-match-frame #flightHud { grid-template-columns: 1fr 1fr; padding-inline: 16px; gap: 5px 18px; }
  html body.rotor-match-frame #flightHud .boost { grid-column: 1 / -1; grid-row: 3; }
  .match-frame-meta { gap: 13px; }
  .match-frame-stat { gap: 5px; font-size: 9px; }
  .match-frame-transport { display: none; }
  html body.rotor-match-frame .match-frame-destinations :is(a,button) { font-size: 9px; min-height: 40px; padding-inline: 4px; }
  html body.rotor-match-frame #flightHud :is(#flightSpeed,.ballStats b) { font-size: 20px; }
  html body.rotor-match-frame #flightHud .energyLegend { display: none; }
  html body.rotor-match-frame .rotor-club-center { left: 16px; right: 16px; width: auto; }
  html body.rotor-match-frame.playing #touch { bottom: calc(var(--match-bottom) + 75px); }
}
@media (max-height: 540px) and (min-width: 641px) {
  html body.rotor-match-frame { --match-top: 90px; --match-bottom: 126px; }
  html body.rotor-match-frame #scoreboard { top: 7px; }
  html body.rotor-match-frame > header .brand { max-width: 100px; }
  html body.rotor-match-frame .topActions .rotor-club-button { font-size: 0; padding: 8px; }
  html body.rotor-match-frame #flightHud { padding-top: 7px; padding-bottom: 7px; }
  html body.rotor-match-frame #flightHud .energyLegend { display: none; }
  html body.rotor-match-frame #flightHud :is(#flightSpeed,.ballStats b) { font-size: 19px; }
}
@media (prefers-reduced-transparency: reduce) {
  html body.rotor-match-frame :is(#resumePanel,.topActions button,.match-frame-ready) { background: #05060a; }
}
@media (forced-colors: active) {
  html body.rotor-match-frame :is(header,#flightHud,#resumePanel,.topActions button,.match-frame-ready) { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .match-frame-signal::before { background: Highlight; }
}