/* Matchpoint's phone and tablet layouts. */

.matchpoint .mp-control-label {
  min-height: 22px;
  align-items: center;
}

@media (min-width: 681px) and (max-width: 1100px) {
  .matchpoint .mp-hero {
    min-height: 610px;
  }

  .matchpoint .mp-hero-copy {
    width: 65%;
  }

  .matchpoint .mp-hero h1 {
    font-size: 9vw;
  }

  .matchpoint .mp-hero-lead {
    max-width: 370px;
  }

  .matchpoint .mp-mode {
    padding-inline: 20px;
  }

  .matchpoint .mp-mode h3 {
    font-size: 7vw;
  }

  .matchpoint .mp-mode p {
    font-size:var(--text-small);
  }

  .matchpoint .mp-mode-number {
    font-size:var(--text-small);
    letter-spacing: .06em;
  }

  .matchpoint .mp-mode-link {
    font-size:var(--text-small);
  }

  .matchpoint .mp-mode small {
    font-size:var(--text-small);
  }
}

@media (max-width: 680px) {
  .matchpoint .mp-hero {
    min-height: 660px;
  }

  .matchpoint .mp-hero-media[data-demo="unavailable"] {
    background-position: 58% center;
  }

  .matchpoint .mp-hero-media canvas {
    left: 50%;
    width: max(112%, 430px);
    height: 110%;
    transform: translateX(-50%);
  }

  .matchpoint .mp-hero::after {
    background: linear-gradient(180deg, #071a23c4 0%, #071a239e 32%, #071a2352 57%, #071a230d 78%, #071a23e0 100%);
  }

  .matchpoint .mp-hero-grid {
    display: block;
    padding-block: 60px 220px;
  }

  .matchpoint .mp-hero-copy {
    width: 100%;
  }

  .matchpoint .mp-hero-copy > .eyebrow {
    margin-bottom: 22px;
    font-size:var(--text-small);
    line-height: 1.6;
    letter-spacing: .16em;
  }

  .matchpoint .mp-hero h1 {
    font-size:var(--text-display);
    line-height: .9;
    margin-bottom: 22px;
    margin-left: -1px;
  }

  .matchpoint .mp-hero-lead {
    max-width: 34ch;
    margin-bottom: 24px;
    font-size:var(--text-body);
    line-height: 1.5;
    letter-spacing: -.025em;
  }

  .matchpoint .mp-hero .mp-play-button {
    width: 100%;
    max-width: 370px;
    min-height: var(--button-hero-height);
  }

  .matchpoint .mp-hero .mp-play-button > span {
    font-size:var(--text-section);
    padding: 12px 22px;
  }

  .matchpoint .mp-hero .mp-play-button b {
    min-width: 64px;
    font-size:var(--text-section);
  }

  .matchpoint .mp-hero-baseline {
    justify-content: space-between;
    min-height: 60px;
    padding-bottom: 12px;
    font-size:var(--text-small);
    letter-spacing: .12em;
  }

  .matchpoint .mp-modes {
    padding: 30px 0 26px;
  }

  .matchpoint .mp-rule-label {
    gap: 14px;
    margin-bottom: 8px;
  }

  .matchpoint .mp-rule-label h2 {
    font-size:var(--text-small);
    letter-spacing: .17em;
  }

  .matchpoint .mp-mode-grid {
    display: block;
  }

  .matchpoint .mp-mode,
  .matchpoint .mp-mode:first-child,
  .matchpoint .mp-mode:last-child {
    align-items: stretch;
    padding: 28px 0 24px;
    border: 0;
    border-bottom: 1px solid #071a234d;
  }

  .matchpoint .mp-mode:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .matchpoint .mp-mode h3 {
    font-size:var(--text-display);
    line-height: .96;
    margin: 12px 0 14px;
  }

  .matchpoint .mp-mode p {
    max-width: 42ch;
    margin-bottom: 12px;
    font-size:var(--text-body);
    line-height: 1.6;
  }

  .matchpoint .mp-mode-link {
    margin-top: 0;
    font-size:var(--text-small);
  }

  .matchpoint .mp-mode small {
    position: static;
    margin-top: 2px;
    font-size:var(--text-small);
    line-height: 1.6;
  }
}

.matchpoint .mp-control-label > span.mp-coming-soon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 5px 7px;
  border: 1px solid #dbf77b66;
  border-radius:var(--radius-surface);
  color: var(--lime);
  font-size:var(--text-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  opacity: 1;
  white-space: nowrap;
}

.matchpoint .mp-control-label:has(.mp-coming-soon) {
  align-items: center;
}

@media (max-width: 900px) {
  .matchpoint .mp-header-inner {
    height: 76px;
    gap: 20px;
  }

  .matchpoint .mp-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #74867b;
    border-radius:var(--radius-control);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    font: 600 var(--text-small) var(--body);
  }

  .matchpoint .mp-menu-toggle > span {
    font-size:var(--text-body);
  }

  .matchpoint .mp-menu-toggle[aria-expanded="true"] {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink);
  }

  .matchpoint .mp-nav {
    display: none;
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px clamp(20px, 4.5vw, 40px) 22px;
    background: var(--ink);
    border-top: 1px solid #40534b;
    box-shadow: 0 20px 30px #071a2340;
  }

  .matchpoint .mp-nav.is-open,
  .matchpoint .mp-nav[data-open="true"] {
    display: flex;
  }

  .matchpoint .mp-nav > a,
  .matchpoint .mp-nav > a[href*="rankings"],
  .matchpoint .mp-nav > .mp-sign-in {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 0;
    font-size:var(--text-body);
  }

  .matchpoint .mp-nav > .button {
    justify-content: space-between;
    min-height: 52px;
    margin-top: 10px;
    padding: 14px 18px;
  }

  .matchpoint .mp-surface-tabs button {
    min-height: 48px;
  }

  .matchpoint .mp-control-label {
    min-height: 22px;
    flex-wrap: wrap;
    align-items: center;
  }

  .matchpoint .mp-control-label > span.mp-coming-soon {
    display: inline-flex;
  }

  .matchpoint .film-close,
  .matchpoint .film-dialog-foot a {
    min-height: 44px;
  }

  .matchpoint .film-dialog-foot a {
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .matchpoint .mp-control-block > p {
    font-size:var(--text-small);
    line-height: 1.7;
  }

  .matchpoint .mp-courts-top {
    gap: 28px;
  }

  .matchpoint .mp-courts-top h2 {
    font-size: 7.2vw;
  }

  .matchpoint .mp-courts-copy {
    flex-shrink: 0;
    width: 285px;
    padding-top: 5px;
  }

  .matchpoint .mp-courts-copy > p {
    font-size:var(--text-small);
    margin-bottom: 22px;
  }

  .matchpoint .mp-control-block {
    padding-inline: 15px;
  }

  .matchpoint .mp-controls-heading h2 {
    font-size: 7.2vw;
  }

  .matchpoint .mp-controls-heading > p {
    font-size:var(--text-small);
    max-width: 230px;
  }

  .matchpoint .mp-control-label:has(.mp-coming-soon) {
    gap: 4px;
  }

  .matchpoint .mp-touch-note {
    flex-wrap: wrap;
  }

  .matchpoint .mp-touch-note p {
    max-width: 470px;
    font-size:var(--text-small);
  }

  .matchpoint .mp-touch-note .mp-text-link {
    min-height: 44px;
    margin-left: 40px;
    font-size:var(--text-small);
  }
}

@media (max-width: 680px) {
  .matchpoint .wrap {
    padding-inline: clamp(20px, 5.1vw, 32px);
  }

  .matchpoint .mp-header-inner {
    height: 64px;
  }

  .matchpoint .mp-nav {
    top: 64px;
    max-height: calc(100dvh - 64px);
  }

  .matchpoint .mp-brand {
    font-size:var(--text-section);
  }

  .matchpoint .mp-play-button {
    display: flex;
    width: 100%;
    max-width: 370px;
    min-height: var(--button-hero-height);
  }

  .matchpoint .mp-play-button > span {
    flex: 1;
    padding: 13px 24px;
    font-size:var(--text-section);
  }

  .matchpoint .mp-play-button b {
    min-width: 70px;
    font-size:var(--text-page);
  }

  .matchpoint .mp-no-download {
    font-size:var(--text-small);
    line-height: 1.6;
    margin-top: 11px;
  }

  .matchpoint .mp-courts {
    padding: 62px 0 36px;
  }

  .matchpoint .mp-courts-top {
    display: block;
    margin-bottom: 24px;
  }

  .matchpoint .mp-courts-top .eyebrow {
    font-size:var(--text-small);
    letter-spacing: .09em;
  }

  .matchpoint .mp-courts-top h2 {
    font-size:var(--text-display);
    line-height: .9;
    margin-top: 22px;
  }

  .matchpoint .mp-courts-copy {
    width: auto;
    padding-top: 25px;
  }

  .matchpoint .mp-courts-copy > p {
    max-width: 40ch;
    font-size:var(--text-body);
    line-height: 1.7;
    margin-bottom: 25px;
  }

  .matchpoint .mp-surface-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .matchpoint .mp-surface-tabs button {
    justify-content: center;
    min-height: 52px;
    gap: 7px;
    padding: 11px 8px;
    font-size:var(--text-small);
  }

  .matchpoint .mp-surface-tabs button span {
    font-size:var(--text-title);
  }

  /* Keep the entire playable court in view. Its caption has its own dark panel. */
  .matchpoint .mp-court-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    background: var(--ink);
  }

  .matchpoint .mp-court-stage::after {
    display: none;
  }

  .matchpoint .mp-court-stage > img {
    position: relative;
    inset: auto;
    z-index: auto;
    order: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: contain;
    object-position: center;
  }

  .matchpoint .mp-court-topline {
    order: 0;
    min-height: 45px;
    padding: 12px 16px;
    font-size:var(--text-small);
    line-height: 1.5;
    letter-spacing: .06em;
    gap: 12px;
  }

  .matchpoint .mp-court-camera {
    white-space: nowrap;
  }

  .matchpoint .mp-court-bottomline {
    position: relative;
    inset: auto;
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 18px 14px;
    align-items: center;
    padding: 26px 20px;
  }

  .matchpoint .mp-court-bottomline > div {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .matchpoint .mp-court-bottomline .eyebrow {
    font-size:var(--text-small);
    line-height: 1.6;
    letter-spacing: .09em;
    margin-bottom: 11px;
  }

  .matchpoint .mp-court-bottomline h3 {
    font-size:var(--text-display);
    line-height: .92;
  }

  .matchpoint .mp-court-bottomline > p {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 44ch;
    margin: 0;
    font-size:var(--text-small);
    line-height: 1.7;
    color: #c1ccc7;
  }

  .matchpoint .mp-court-bottomline > a {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 52px;
    height: 52px;
    font-size:var(--text-section);
  }

  .matchpoint .mp-court-footnote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 25px;
    gap: 10px;
  }

  .matchpoint .mp-court-footnote > span {
    font-size:var(--text-small);
    letter-spacing: .07em;
  }

  .matchpoint .mp-court-footnote p {
    max-width: 40ch;
    font-size:var(--text-small);
    line-height: 1.7;
    margin: 0;
  }

  .matchpoint .mp-court-footnote > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    font-size:var(--text-small);
  }

  .matchpoint .mp-court-footnote > a span {
    padding-left: 22px;
  }

  .matchpoint .mp-controls {
    padding: 62px 0 42px;
  }

  .matchpoint .mp-controls > .wrap {
    display: flex;
    flex-direction: column;
  }

  .matchpoint .mp-controls-heading {
    order: 0;
    margin-bottom: 30px;
  }

  .matchpoint .mp-controls-heading .eyebrow {
    font-size:var(--text-small);
    line-height: 1.6;
    letter-spacing: .09em;
    margin-bottom: 22px;
  }

  .matchpoint .mp-controls-heading h2 {
    font-size:var(--text-display);
    line-height: .92;
  }

  .matchpoint .mp-controls-heading > p {
    max-width: 40ch;
    font-size:var(--text-body);
    line-height: 1.7;
    margin-top: 24px;
  }

  /* Show the controls for the device in hand before the keyboard reference. */
  .matchpoint .mp-touch-note {
    order: 1;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 14px;
    padding: 24px 20px 16px;
    margin-bottom: 32px;
    border: 1px solid var(--lime);
    background: var(--lime);
    color: var(--ink);
  }

  .matchpoint .mp-touch-note > svg {
    width: 24px;
    height: 32px;
    color: var(--ink);
  }

  .matchpoint .mp-touch-note h3 {
    margin-bottom: 10px;
    font-size:var(--text-title);
    font-weight: 800;
    line-height: 1.05;
  }

  .matchpoint .mp-touch-note p {
    color: #21382c;
    font-size:var(--text-small);
    line-height: 1.65;
  }

  .matchpoint .mp-touch-note .mp-text-link {
    min-height: 44px;
    align-items: center;
    color: var(--ink);
    font-size:var(--text-small);
    gap: 17px;
    border-color: #071a2340;
    padding-bottom: 0;
  }

  .matchpoint .mp-control-grid {
    order: 2;
    display: block;
  }

  .matchpoint .mp-control-block,
  .matchpoint .mp-control-block:first-child,
  .matchpoint .mp-control-block:last-child {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 18px 24px;
    align-items: center;
    padding: 25px 0 28px;
    border-right: 0;
    border-top: 1px solid #506058;
  }

  .matchpoint .mp-control-label {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 22px;
    margin: 0;
    font-size:var(--text-small);
    letter-spacing: .07em;
  }

  .matchpoint .mp-control-label > span:last-child {
    display: inline-flex;
    font-size:var(--text-small);
  }

  .matchpoint .mp-control-label > span.mp-coming-soon {
    font-size:var(--text-small);
    opacity: 1;
  }

  .matchpoint .mp-arrow-keys,
  .matchpoint .mp-space-key,
  .matchpoint .mp-depth-keys {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
    width: 100%;
    height: 108px;
    padding: 6px 0;
  }

  .matchpoint .mp-arrow-keys {
    gap: 6px;
  }

  .matchpoint .mp-arrow-keys > div {
    gap: 6px;
  }

  .matchpoint .mp-arrow-keys kbd {
    width: 35px;
    height: 34px;
    font-size:var(--text-title);
  }

  .matchpoint .mp-space-key kbd {
    height: 51px;
    font-size:var(--text-small);
    padding-inline: 12px;
  }

  .matchpoint .mp-depth-keys {
    gap: 12px;
  }

  .matchpoint .mp-depth-keys kbd {
    width: 43px;
    height: 46px;
    font-size:var(--text-title);
  }

  .matchpoint .mp-depth-keys > div {
    gap: 10px;
  }

  .matchpoint .mp-depth-keys > i {
    font-size:var(--text-title);
    margin-bottom: 18px;
  }

  .matchpoint .mp-depth-keys span {
    font-size:var(--text-small);
    letter-spacing: .07em;
  }

  .matchpoint .mp-control-block h3 {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size:var(--text-section);
    line-height: 1.03;
  }

  .matchpoint .mp-control-block > p {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 44ch;
    font-size:var(--text-body);
    line-height: 1.7;
  }

  .matchpoint .mp-practice {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-top: 0;
    padding-top: 25px;
    border-top: 1px solid #506058;
  }

  .matchpoint .mp-practice > div {
    align-items: center;
    gap: 12px;
  }

  .matchpoint .mp-practice p {
    max-width: none;
    font-size:var(--text-small);
  }

  .matchpoint .mp-practice > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin-left: 38px;
    padding: 0;
    color: var(--lime);
    font-size:var(--text-small);
  }

  .matchpoint .mp-practice > a span {
    font-size:var(--text-title);
  }

  .matchpoint .mp-faq {
    padding: 63px 0 64px;
  }

  .matchpoint .mp-faq h2 {
    font-size:var(--text-display);
    line-height: .9;
    margin: 23px 0;
  }

  .matchpoint .mp-faq-grid > div:first-child > p:last-child {
    font-size:var(--text-body);
    line-height: 1.7;
    margin-bottom: 30px;
  }

  .matchpoint .mp-questions summary {
    min-height: 72px;
    padding: 21px 0;
    font-size:var(--text-body);
    line-height: 1.5;
    gap: 18px;
  }

  .matchpoint .mp-questions summary > span {
    width: 27px;
    height: 27px;
    font-size:var(--text-title);
  }

  .matchpoint .mp-questions details > p {
    max-width: 100%;
    padding: 0 0 24px;
    font-size:var(--text-body);
    line-height: 1.75;
  }

  .matchpoint .mp-finale {
    padding: 62px 0 49px;
  }

  .matchpoint .mp-finale .eyebrow {
    font-size:var(--text-small);
    line-height: 1.7;
    letter-spacing: .1em;
  }

  .matchpoint .mp-finale h2 {
    font-size:var(--text-display);
    line-height: .86;
    margin: 26px 0 34px;
  }

  .matchpoint .mp-finale .mp-no-download {
    font-size:var(--text-small);
    line-height: 1.6;
    margin-top: 13px;
  }

  .matchpoint .film-dialog-head {
    gap: 12px;
  }

  .matchpoint .film-dialog-head h2 {
    font-size:var(--text-title);
    line-height: var(--leading-heading);
  }

  .matchpoint .film-close {
    min-width: 62px;
    flex-shrink: 0;
  }
}

@media (max-width: 359px) {

  .matchpoint .mp-header-inner {
    gap: 12px;
  }

  .matchpoint .mp-brand {
    font-size:var(--text-title);
  }

  .matchpoint .mp-court-topline {
    padding-inline: 12px;
    font-size:var(--text-small);
    letter-spacing: .03em;
  }

  .matchpoint .mp-court-bottomline {
    padding-inline: 18px;
    column-gap: 10px;
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .matchpoint .mp-court-bottomline > a {
    width: 48px;
    height: 48px;
  }

  .matchpoint .mp-court-bottomline .eyebrow {
    font-size:var(--text-small);
  }

  .matchpoint .mp-control-block,
  .matchpoint .mp-control-block:first-child,
  .matchpoint .mp-control-block:last-child {
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: 19px;
  }

  .matchpoint .mp-control-label {
    font-size:var(--text-small);
  }

  .matchpoint .mp-control-label > span.mp-coming-soon {
    font-size:var(--text-small);
    padding-inline: 6px;
  }

  .matchpoint .mp-touch-note {
    padding-inline: 16px;
    gap: 12px;
  }

  .matchpoint .mp-touch-note h3 {
    font-size:var(--text-title);
  }
}

/* The landing uses the same action and compact-control language as the app. */
body.matchpoint :is(.mp-surface-tabs button,.mp-menu-toggle,.film-close) {
  min-height:var(--button-compact-height);
  border-radius:var(--button-radius);
  padding:var(--button-compact-padding-block) var(--button-compact-padding-inline);
  font:var(--button-weight) var(--button-compact-size)/var(--button-leading) var(--button-font);
  letter-spacing:var(--button-tracking);
  text-transform:uppercase;
}
body.matchpoint .mp-surface-tabs {gap:8px}
body.matchpoint .mp-surface-tabs button {flex:1;min-width:0;border-color:var(--button-secondary-border);color:var(--button-ink);background:transparent}
body.matchpoint .mp-surface-tabs button span {font:inherit}
body.matchpoint .mp-surface-tabs button[aria-pressed=true] {background:var(--button-bg);border-color:var(--button-ink);color:var(--button-ink)}
body.matchpoint .mp-surface-tabs button:hover {background:#dce3d4;border-color:var(--button-ink);color:var(--button-ink)}
body.matchpoint .mp-hero-pause {border-radius:var(--button-radius);border-color:var(--button-secondary-border);background:#071a2366}
body.matchpoint :is(.mp-questions summary,.mp-controller-setup summary) {
  min-height:var(--button-compact-height);
  font:var(--button-weight) var(--button-compact-size)/1.3 var(--button-font);
  letter-spacing:var(--button-tracking);
  text-transform:uppercase;
}
body.matchpoint .mp-questions summary>span {border-radius:var(--button-radius);font-weight:var(--button-weight)}
body.matchpoint :is(.mp-text-link,.mp-practice>a,.mp-court-footnote>a,.mp-mode-link) {
  min-height:var(--button-compact-height);
  font:var(--button-weight) var(--button-compact-size)/1.3 var(--button-font);
  letter-spacing:var(--button-tracking);
  text-transform:uppercase;
  white-space:normal;
}
body.matchpoint :is(.mp-text-link,.mp-practice>a,.mp-court-footnote>a) {display:inline-flex;align-items:center}
body.matchpoint :is(button,summary,.mp-text-link,.mp-practice>a,.mp-court-footnote>a):focus-visible {outline:3px solid var(--button-focus);outline-offset:4px}
@media(max-width:680px) {
  body.matchpoint .mp-surface-tabs button {padding-inline:12px;gap:8px}
  body.matchpoint .mp-practice {flex-wrap:wrap;align-items:center}
}