/* 12 · Master — areia, sol da tarde. Em cima: título e frase do slide 11 à esquerda, a foto s-master com
   a linha de quadra (.court) à direita. Embaixo, a régua das cinco faixas etárias: a bola anda em arcos de
   faixa em faixa (o rastro tracejado é revelado por um clipPath que acompanha a bola) e cada pouso acende a
   faixa e as suas três disputas. A altura da foto é medida pela tela (vh): a régua precisa caber embaixo. */
#master .mst-stage { background: transparent; }
#master .mst-wrap { position: relative; z-index: 2; }
#master .mst-lay { height: 100%; align-content: center; row-gap: clamp(16px, 3.2vh, 40px); padding-top: calc(var(--hud-h) + clamp(14px, 3.2vh, 40px)); padding-bottom: calc(var(--tide) + clamp(4px, 1.4vh, 18px)); } /* o pé fica acima da onda da maré */

#master .mst-head { grid-column: 1 / 7; align-self: center; gap: clamp(10px, 1.6vh, 18px); container-type: inline-size; }
/* o nome da frente no mesmo dialeto do 10 Elite e do 11 Open: a palavra em display larga, no MESMO tamanho (lá a
   letra é 25,5% da largura de 4 colunas da grade, com teto de 29%; aqui a coluna é de 6 — --w4 refaz as 4) */
#master .mst-title { --w4: calc(100cqi * 2 / 3 - var(--gap) / 3);
  font-size: min(calc(var(--w4) * .255 * var(--ts, 1)), calc(var(--w4) * .29), 17.6cqi); font-stretch: 125%; line-height: .96; letter-spacing: -.02em; padding-top: 0; white-space: nowrap; text-wrap: nowrap; } /* 17,6cqi: "MASTER" (5,6 em) nunca passa da coluna e encosta na foto */
#master .mst-sub { font-size: calc((clamp(19px, 1.5vw, 28px)) * var(--ts, 1)); max-width: 30em; text-wrap: balance; } /* a frase do slide, como o subtítulo do Elite (2 linhas na coluna) */
#master .mst-lede { max-width: 32ch; }

#master .mst-court { grid-column: 7 / 13; margin: clamp(8px, .9vw, 14px); } /* folga para a linha de quadra, que fica por fora da foto */
#master .mst-photo { height: clamp(180px, 33vh, 420px); background: linear-gradient(180deg, #9cc3de 0%, #cfe0e6 55%, #efe6d4 70%, #e6dac2 100%); }
#master .mst-photo img { object-position: 36% 38%; }
#master .mst-credit { padding: 4px 10px; border-radius: 999px; background: rgba(10, 24, 34, .66); color: var(--sand); text-shadow: none; }

/* ---------- a régua ---------- */
#master .mst-ruler { grid-column: 1 / -1; --ball: clamp(26px, 2.3vw, 40px); }
#master .mst-track { position: relative; height: clamp(56px, 8.4vh, 96px); }
#master .mst-arcs { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: calc(100% - 2px - var(--ball) / 2); overflow: visible; }
#master .mst-arcs .arc { stroke-width: 2.6; filter: none; opacity: .9; }
#master .mst-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(16, 38, 51, .12), rgba(16, 38, 51, .34) 8%, rgba(16, 38, 51, .34) 92%, rgba(16, 38, 51, .12)); }
#master .mst-ball { position: absolute; left: 0; bottom: 2px; z-index: 2; margin-left: calc(var(--ball) / -2); will-change: transform; }

#master .mst-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#master .mst-band { display: grid; justify-items: center; align-content: start; gap: clamp(6px, 1.1vh, 12px); padding-inline: 4px; }
#master .mst-tick { width: 12px; height: 12px; margin-top: -7px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px var(--sand), 0 0 0 5px rgba(203, 87, 45, .3); }
#master .mst-age { font-size: calc((clamp(28px, 2.6vw, 50px)) * var(--ts, 1)); font-stretch: 125%; color: var(--clay); }
/* as disputas: a .chip do núcleo no tamanho dela (legível já antes da bola: texto tinta, contorno terracota);
   o pouso da bola "acende" a cápsula enchendo de sol (a camada <i>) */
#master .mst-chips { display: grid; justify-items: center; gap: 8px; }
#master .mst-chip { position: relative; isolation: isolate; }
#master .mst-chip > i { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sun); opacity: 0; }

#master .mst-close { grid-column: 1 / -1; max-width: 70ch; }

/* tela baixa (1280 × 720, 1366 × 768): o nome da frente no tamanho do "Elite" pede folga — a pilha aperta
   (vãos, trilho da bola, cápsulas) para a tarja não encostar no HUD nem a frase final na maré */
@media (orientation: landscape) and (max-height: 800px) {
  #master .mst-lay { row-gap: 14px; padding-top: calc(var(--hud-h) + 12px); padding-bottom: calc(var(--tide) + 2px); }
  #master .mst-head { gap: 8px; }
  #master .mst-track { height: 46px; }
  #master .mst-band { gap: 6px; }
  #master .mst-chips { gap: 5px; }
  #master .mst-chip { padding-block: .42em .38em; }
}

/* tela em pé */
@media (orientation: portrait), (max-aspect-ratio: 5/4) {
  #master .mst-head { grid-column: 1 / -1; }
  #master .mst-title { --w4: calc(100cqi * 7 / 12 - var(--gap) * 5 / 12); } /* em pé o "Elite" ocupa 7 colunas */
  #master .mst-court { grid-column: 1 / -1; }
  #master .mst-photo { height: clamp(240px, 26vh, 440px); }
}