/* 05 · A arena — manhã, ~08:30. Cena fixada com a órbita de drone (f-arena) varrida pela rolagem.
   Seis pontos numerados acompanham a órbita (posições rastreadas no filme, quadro a quadro) e acendem um a um;
   a legenda (3 × 2, embaixo à direita) guarda os seis; a nota fica embaixo à esquerda, baixa, para o caminho
   acessível (o último ponto, que termina no canto de baixo à esquerda do filme) ficar livre. Título no canto de
   cima com véu próprio; nada de ponto sob o título, a legenda, a nota ou o HUD (o JS apaga o ponto nessas zonas). */
#arena .ar-stage { background: #0c1c27; }
#arena .ar-frame { position: absolute; inset: 0; overflow: hidden; }
#arena .ar-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #b9ccd6 0%, #d9e2e5 12%, #6d9aa3 16%, #2f6d78 30%, #c9c2ae 34%, #6f8f4c 40%, #5d7d3e 100%); }
#arena .ar-film { background: transparent; }

/* pontos (posição por transform, escrita pelo JS) */
#arena .ar-pins { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#arena .ar-pin { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
#arena .ar-pin b { position: absolute; left: -16px; top: -16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--navy); font-family: var(--f-mono); font-weight: 700; font-size: calc(14px * var(--ts, 1)); box-shadow: 0 0 0 3px rgba(244, 239, 229, .92), 0 0 0 8px rgba(242, 151, 109, .28), 0 6px 18px rgba(0, 0, 0, .45); }
#arena .ar-pin b::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 200, 138, .85); opacity: 0; }
#arena .ar-pin.is-last b::after { animation: ar-ping 2.2s var(--ease-out) infinite; }
@keyframes ar-ping { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.reduced #arena .ar-pin.is-last b::after { animation: none; }
/* a etiqueta do ponto: a mesma cápsula de rótulo de mapa do 04 (navy, display 108 %, areia, fio claro) */
#arena .ar-pin span { position: absolute; left: 0; top: 0; transform: translate(26px, -50%); display: inline-flex; align-items: center; padding: 6px 13px 5px; border-radius: 999px; background: rgba(10, 24, 34, .86); box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(244, 239, 229, .16); font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(15px * var(--ts, 1)); letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--sand); white-space: nowrap; }

/* véus: canto do título (próprio, localizado) e pé com o .scrim--b do núcleo */
#arena .ar-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(64% 58% at calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter) + min(100%, var(--maxw)) * .14) 20%, rgba(8, 18, 27, .9) 0%, rgba(8, 18, 27, .7) 36%, rgba(8, 18, 27, .26) 62%, rgba(8, 18, 27, 0) 82%),
    linear-gradient(180deg, rgba(10, 24, 34, .7) 0%, rgba(10, 24, 34, 0) 20%); }
#arena .ar-scrim-b { z-index: 3; }
/* tela baixa (720–800 px): o pé (nota + legenda 3 × 2) ocupa ~30 % da altura, acima da parte forte do
   .scrim--b; o mesmo degradê do núcleo, esticado até o topo da legenda (itens apagados ≥ 4,5:1 sobre a areia) */
@media (orientation: landscape) and (max-height: 800px) {
  #arena .ar-scrim-b { background: linear-gradient(0deg, rgba(10, 24, 34, .95) 0%, rgba(10, 24, 34, .82) 34%, rgba(10, 24, 34, 0) 62%); }
}

#arena .ar-wrap { position: relative; z-index: 4; }
#arena .ar-lay { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; padding-top: calc(var(--hud-h) + clamp(18px, 4.6vh, 56px)); padding-bottom: clamp(14px, 2.6vh, 28px); }
#arena .ar-head { grid-row: 1; grid-column: 1 / 7; justify-self: start; gap: clamp(8px, 1.4vh, 16px); }
#arena .ar-title { color: var(--sand); padding-top: .04em; white-space: nowrap; }
#arena .ar-lede { max-width: 30ch; }
#arena .ar-foot { grid-row: 3; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
#arena .ar-note { grid-column: 1 / 5; display: grid; gap: 8px; justify-items: start; }
#arena .ar-note .footnote { color: var(--text-2); max-width: 44ch; }
/* legenda: 3 × 2; nome em display ≥ 17 px × ts, apoio em Inter 15 px × ts, névoa; apagado ainda se lê (.78, ≥ 4,5:1): o anel vazio × cheio de sol é que diz o estado */
#arena .ar-legend { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.2vh, 22px) var(--gap); border-top: 1px solid var(--line-2); padding-top: clamp(12px, 1.8vh, 18px); }
#arena .ar-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; opacity: .78; transition: opacity .35s; }
#arena .ar-legend li.is-on { opacity: 1; }
#arena .ar-legend i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: calc(14px * var(--ts, 1)); color: var(--sand); box-shadow: inset 0 0 0 1.5px rgba(244, 239, 229, .6); transition: background .35s, color .35s, box-shadow .35s; }
#arena .ar-legend li.is-on i { background: var(--sun); color: var(--navy); box-shadow: none; }
#arena .ar-legend li.is-live i { box-shadow: 0 0 0 4px rgba(242, 151, 109, .3); }
#arena .ar-legend p { display: grid; gap: 4px; padding-top: 4px; }
#arena .ar-legend b { font-family: var(--f-display); font-stretch: 108%; font-weight: 800; font-size: calc(17px * var(--ts, 1)); letter-spacing: .04em; line-height: 1.15; text-transform: uppercase; color: var(--sand); }
#arena .ar-legend span { font-family: var(--f-body); font-size: calc(15px * var(--ts, 1)); line-height: 1.3; color: var(--mist); }

.reduced #arena .ar-legend li { opacity: 1; }

/* tablet em pé: o filme vira uma faixa no meio; título em cima e legenda embaixo, fora da imagem.
   O palco vira grade e a .wrap/.lay somem da árvore de caixas (display: contents): a faixa ocupa a linha que
   sobra entre o cabeçalho e o pé, medida pelo próprio texto. Com top fixo (17svh) ela subia sobre a 2ª linha
   da linha fina em 820 × 1180 e 834 × 1194, e em 768 × 1024 descia sobre a legenda. Até 70vw de altura
   (~10:7): mais alta, a capa corta os lados e o "Rotas acessíveis" (canto esquerdo) se apagava na borda. */
@media (orientation: portrait) {
  #arena .ar-stage { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
    grid-template-rows: calc(var(--hud-h) + clamp(18px, 4.6vh, 56px)) auto clamp(16px, 2.4vh, 28px) minmax(0, 1fr) clamp(16px, 2.4vh, 28px) auto clamp(14px, 2.6vh, 28px); }
  #arena .ar-wrap, #arena .ar-lay { display: contents; }
  #arena .ar-frame { position: relative; inset: auto; grid-row: 4; grid-column: 1 / -1; align-self: center; height: min(100%, 70vw); }
  #arena .ar-veil { background: linear-gradient(180deg, rgba(10, 24, 34, .6) 0%, rgba(10, 24, 34, 0) 12%); }
  #arena .ar-scrim-b { display: none; }
  #arena .ar-head, #arena .ar-foot { position: relative; z-index: 4; grid-column: 2; }
  #arena .ar-head { grid-row: 2; }
  #arena .ar-lede { max-width: 40ch; }
  #arena .ar-foot { grid-row: 6; grid-template-columns: minmax(0, 1fr); }
  #arena .ar-note { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(12px, 1.8vh, 18px); }
  #arena .ar-note .footnote { max-width: none; }
  #arena .ar-legend { grid-column: 1 / -1; grid-row: 1; row-gap: 18px; }
}