/* 17 · sportsland — a missão (L05) e o Circuito Sportsland 2026/2027 (L04) num painel de embarque
   de letras giratórias (split-flap mecânico). Tudo sob #sportsland.
   Os dois quadros dividem a mesma célula da grade (.sl-wrap): nada de absolute em vw. */

#sportsland .sl-stage { background: var(--ink); }

/* ---------- Fundo: o asfalto molhado, faixa amarela subindo para a direita ---------- */
#sportsland .sl-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(80% 70% at 72% 40%, #2a1236 0%, #150a1c 55%, var(--ink) 100%); }
#sportsland .sl-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: brightness(.34) saturate(.6) contrast(1.06); transform-origin: 20% 80%; will-change: transform; }
#sportsland .sl-scrim {
  background:
    linear-gradient(90deg, rgba(14, 7, 19, .94) 0%, rgba(14, 7, 19, .8) 34%, rgba(14, 7, 19, .46) 62%, rgba(14, 7, 19, .6) 100%),
    linear-gradient(180deg, rgba(14, 7, 19, .72) 0%, rgba(14, 7, 19, 0) 24%, rgba(14, 7, 19, 0) 70%, rgba(14, 7, 19, .78) 100%);
}
#sportsland .sl-checker { z-index: 1; }

/* Com o texto 10% maior (--ts) a faixa cresce junto em tela larga (1320 → 1452 px, com ≥ 60 px de margem fora do
   gutter); abaixo de 1440 e com ?ts=1 é exatamente a do núcleo. Sem isso, a partir de ~1760 px "Nossa missão"
   (140,8 px) quebrava em duas linhas e "Entretenimento" (66 px) passava 10 px da coluna dos pilares. */
#sportsland .sl-wrap {
  max-width: max(var(--maxw), min(calc(var(--maxw) * var(--ts, 1)), 100% - 120px));
  position: relative; z-index: 2; display: grid; grid-template-areas: 'f'; align-items: center;
  padding-top: calc(var(--hud-h) + clamp(10px, 2.2vh, 28px)); padding-bottom: clamp(16px, 3.4vh, 40px);
}
#sportsland .sl-mission, #sportsland .sl-circuit { grid-area: f; min-width: 0; }

/* =========================================================
   Quadro 1 · Nossa missão
   ========================================================= */
#sportsland .sl-brand { margin: 0; line-height: 0; }
#sportsland .sl-logo { height: clamp(28px, 2.8vw, 44px); width: auto; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)); }
#sportsland .sl-brand__txt { display: inline-block; font: 700 calc((clamp(16px, .6vw + 10px, 20px)) * var(--ts, 1))/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--offwhite); }
#sportsland .sl-head { gap: clamp(6px, 1.2vh, 14px); }
#sportsland .sl-title { font-size: calc((clamp(60px, 7.2vw, 128px)) * var(--ts, 1)); text-shadow: 0 10px 50px rgba(14, 7, 19, .6); }
#sportsland .sl-statement {
  font: italic 800 calc((clamp(23px, 2.2vw, 40px)) * var(--ts, 1))/1.14 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  color: var(--offwhite); max-width: 26ch; text-wrap: balance; padding-top: .04em;
}

/* Fatos (L05) como chips: paralelogramo com fio mel, a mesma inclinação da tarja */
#sportsland .sl-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; max-width: 760px; } /* 760: na faixa larga os cinco fatos fecham em 3 fileiras, como em 1440 */
#sportsland .sl-chip {
  position: relative; isolation: isolate; padding: .6em 1.05em .54em;
  font: 600 calc((clamp(15px, .45vw + 10px, 18.5px)) * var(--ts, 1))/1.25 var(--f-display); letter-spacing: .02em; color: var(--text);
}
#sportsland .sl-chip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px; transform: skewX(-12deg);
  border: 1px solid rgba(244, 178, 35, .55); background: rgba(14, 7, 19, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .25);
}
#sportsland .sl-chip b { color: var(--honey); font-weight: 700; }
#sportsland .sl-caps { text-transform: uppercase; letter-spacing: .05em; }

/* Os 7 pilares: contorno apagado que acende da esquerda para a direita (--lit 0→1, pela rolagem) */
#sportsland .sl-pillars { display: grid; gap: clamp(8px, 1.4vh, 16px); justify-self: end; width: 100%; max-width: 560px; }
#sportsland .sl-plist { display: grid; }
#sportsland .sl-p {
  --lit: 0; position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: clamp(1px, .45vh, 6px) 0; border-bottom: 1px solid rgba(245, 238, 224, .08);
}
#sportsland .sl-p::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--lit));
  background: linear-gradient(90deg, var(--honey), rgba(244, 178, 35, .15) 70%, rgba(244, 178, 35, 0));
}
#sportsland .sl-p__n { font: 700 calc(12px * var(--ts, 1))/1 var(--f-mono); letter-spacing: .08em; color: color-mix(in srgb, var(--honey) calc(var(--lit) * 100%), rgba(245, 238, 224, .34)); }
#sportsland .sl-p__t {
  position: relative; font: italic 900 calc((clamp(30px, 3.4vw, 60px)) * var(--ts, 1))/1.12 var(--f-display); text-transform: uppercase; letter-spacing: -.005em;
  padding-top: .05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(245, 238, 224, .3);
}
#sportsland .sl-p__t::after {
  --x: calc(var(--lit) * 136% - 18%);
  content: attr(data-t); position: absolute; inset: 0; padding-top: inherit; -webkit-text-stroke: 0; color: transparent;
  background: linear-gradient(90deg, var(--offwhite) 0, var(--offwhite) calc(var(--x) - 16%), var(--honey) calc(var(--x) - 4%), rgba(244, 178, 35, 0) var(--x));
  -webkit-background-clip: text; background-clip: text;
}

/* =========================================================
   Quadro 2 · O painel de embarque do Circuito
   ========================================================= */
#sportsland .sl-circuit { display: grid; justify-items: center; perspective: 1600px; }
#sportsland .sl-board {
  --g: 3px; container-type: inline-size; position: relative; width: 100%; max-width: 1180px;
  padding: clamp(16px, 1.8vw, 28px) clamp(14px, 2vw, 30px) clamp(12px, 1.5vw, 22px); border-radius: 12px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(125, 85, 150, .16), transparent 60%), linear-gradient(180deg, #1a1220 0%, #100a15 100%);
  box-shadow: 0 0 0 1px rgba(245, 238, 224, .1), 0 0 0 7px #09060c, 0 0 0 8px rgba(245, 238, 224, .07),
    inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 90px rgba(0, 0, 0, .66), 0 10px 26px rgba(0, 0, 0, .45);
  transform-origin: 50% 100%;
}
#sportsland .sl-board__screw { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6a5c73, #1d1622 72%); box-shadow: 0 1px 1px rgba(0, 0, 0, .7); }
#sportsland .sl-board__screw:nth-of-type(1) { left: 8px; top: 8px; }
#sportsland .sl-board__screw:nth-of-type(2) { right: 8px; top: 8px; }
#sportsland .sl-board__screw:nth-of-type(3) { left: 8px; bottom: 8px; }
#sportsland .sl-board__screw:nth-of-type(4) { right: 8px; bottom: 8px; }

/* medidas do painel (cqi = largura útil do painel) */
#sportsland .sl-board__head, #sportsland .sl-cols, #sportsland .sl-rows {
  --c-n: 2.1em; --c-tile: clamp(140px, 17cqi, 210px); --c-ref: clamp(118px, 14cqi, 176px); --c-gap: clamp(12px, 1.8cqi, 24px); --c-gaps: 3;
}
#sportsland .sl-board__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 0 4px clamp(10px, 1.4vh, 16px); border-bottom: 2px solid var(--honey); }
#sportsland .sl-board__k { color: var(--text-3); margin-bottom: 6px; }
#sportsland .sl-board__t { font: italic 900 calc((clamp(28px, 3.6cqi, 50px)) * var(--ts, 1))/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--offwhite); padding-top: .06em; }
#sportsland .sl-season { display: flex; align-items: center; gap: 14px; margin: 0; }
#sportsland .sl-season__k { color: var(--text-3); }
#sportsland .sl-year { --cw: clamp(24px, 3.3cqi, min(46px, 6.2vh)); display: block; }
#sportsland .sl-year .sl-c { color: var(--honey); }
#sportsland .sl-year.is-on .sl-flaps { filter: drop-shadow(0 0 14px rgba(244, 178, 35, .35)); }

#sportsland .sl-cols, #sportsland .sl-row { display: grid; grid-template-columns: var(--c-n) var(--c-tile) minmax(0, 1fr) var(--c-ref); column-gap: var(--c-gap); align-items: center; padding-inline: 8px; }
#sportsland .sl-cols { margin: 0; padding-block: 11px 7px; font: 500 calc(10.5px * var(--ts, 1))/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
#sportsland .sl-cols__ref { text-align: right; opacity: 0; transition: opacity .5s; }
#sportsland .sl-board.is-27 .sl-cols__ref { opacity: 1; }

#sportsland .sl-rows { display: grid; }
#sportsland .sl-row {
  --cw: clamp(16px, calc((100cqi - var(--c-n) - var(--c-tile) - var(--c-ref) - var(--c-gaps) * var(--c-gap) - 16px - 15 * var(--g)) / 16), min(40px, 5.4vh));
  --chh: calc(var(--cw) * 1.45);
  position: relative; padding-block: clamp(4px, .8vh, 8px); border-top: 1px solid rgba(245, 238, 224, .06);
}
#sportsland .sl-row__n { font: 700 calc(12px * var(--ts, 1))/1 var(--f-mono); color: var(--text-3); letter-spacing: .06em; }
#sportsland .sl-row__date { min-width: 0; }

/* logo da prova: o cartão branco recortado da L04 (logos pensados para fundo claro); sem o arquivo, o nome */
#sportsland .sl-tile { position: relative; display: block; justify-self: start; height: clamp(var(--chh), 7.2vh, calc(var(--chh) * 1.25)); aspect-ratio: 390 / 146; max-width: 100%; border-radius: 6px; }
#sportsland .sl-tile img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45)); }
#sportsland .sl-tile__txt { display: none; }
#sportsland .sl-tile.is-text { aspect-ratio: auto; width: 100%; height: auto; min-height: var(--chh); display: grid; align-items: center; }
#sportsland .sl-tile.is-text img { display: none; }
#sportsland .sl-tile.is-text .sl-tile__txt { display: grid; gap: 3px; min-width: 0; }
#sportsland .sl-tile__txt b { font: italic 800 calc((clamp(15px, 1.75cqi, 21px)) * var(--ts, 1))/1.06 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--offwhite); padding-top: .06em; }
#sportsland .sl-tile__txt small { font: 600 calc((clamp(10.5px, 1.05cqi, 13px)) * var(--ts, 1))/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* a coluna da edição 2026 aparece quando a linha vira para 2027 */
#sportsland .sl-ref { font: 500 calc((clamp(10.5px, 1.02cqi, 12.5px)) * var(--ts, 1))/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: right; white-space: nowrap; }
#sportsland .sl-ref b { color: var(--text-2); font-weight: 700; margin-right: .45em; }

/* a MMIF em mel */
#sportsland .sl-row.is-hl { background: linear-gradient(90deg, rgba(244, 178, 35, .17), rgba(244, 178, 35, .05) 55%, rgba(244, 178, 35, 0)); box-shadow: inset 3px 0 0 var(--honey); border-top-color: rgba(244, 178, 35, .3); }
#sportsland .sl-row.is-hl + .sl-row { border-top-color: rgba(244, 178, 35, .3); }
#sportsland .sl-row.is-hl .sl-row__n, #sportsland .sl-row.is-hl .sl-c, #sportsland .sl-row.is-hl .sl-tile.is-text b { color: var(--honey); }
#sportsland .sl-row.is-hl .sl-ref b { color: var(--honey); }
#sportsland .sl-row.is-hl .sl-tile:not(.is-text) { box-shadow: 0 0 0 2px var(--honey), 0 0 26px rgba(244, 178, 35, .4); }

/* ---------- Plaquetas split-flap ----------
   Cada caractere: metade de cima (u) e de baixo (d) fixas + a aba (f) que dobra no eixo do meio.
   A aba tem frente (ff = metade de cima do caractere atual) e verso (fb = metade de baixo do próximo).
   --p (0→1) é a dobra; as sombras escurecem a aba perto de 90° e a metade que ela cobre. */
#sportsland .sl-flaps { display: flex; gap: var(--g); font: 700 calc((clamp(18px, 2cqi, 28px)) * var(--ts, 1))/1.2 var(--f-display); text-transform: uppercase; color: var(--offwhite); }
#sportsland .sl-c {
  --chh: calc(var(--cw) * 1.45);
  position: relative; flex: none; width: var(--cw); height: var(--chh);
  font: 700 calc((calc(var(--cw) * 1.2)) * var(--ts, 1))/var(--chh) var(--f-display); letter-spacing: 0; text-align: center; color: var(--offwhite);
  perspective: calc(var(--chh) * 4.5);
}
#sportsland .sl-c__u, #sportsland .sl-c__d, #sportsland .sl-c__f { position: absolute; left: 0; right: 0; height: 50%; }
#sportsland .sl-c__u, #sportsland .sl-c__d { overflow: hidden; }
#sportsland .sl-c__u, #sportsland .sl-c__f { top: 0; }
#sportsland .sl-c__d { bottom: 0; }
#sportsland .sl-c__u, #sportsland .sl-c__ff { background: linear-gradient(180deg, #2e2535 0%, #231b29 100%); border-radius: 3px 3px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
#sportsland .sl-c__d, #sportsland .sl-c__fb { background: linear-gradient(180deg, #1b141f 0%, #251d2b 100%); border-radius: 0 0 3px 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); }
#sportsland .sl-c__u::before, #sportsland .sl-c__d::before, #sportsland .sl-c__ff::before, #sportsland .sl-c__fb::before {
  content: attr(data-c); position: absolute; left: 0; right: 0; height: var(--chh); line-height: var(--chh); padding-top: .04em; white-space: pre;
}
#sportsland .sl-c__u::before, #sportsland .sl-c__ff::before { top: 0; }
#sportsland .sl-c__d::before, #sportsland .sl-c__fb::before { top: -100%; }
#sportsland .sl-c__f { display: none; transform-origin: 50% 100%; transform: rotateX(calc(var(--p, 0) * -180deg)); transform-style: preserve-3d; z-index: 2; }
#sportsland .sl-c.is-flip .sl-c__f { display: block; }
#sportsland .sl-c__ff, #sportsland .sl-c__fb { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#sportsland .sl-c__fb { transform: rotateX(180deg); }
#sportsland .sl-c__u::after, #sportsland .sl-c__d::after, #sportsland .sl-c__ff::after, #sportsland .sl-c__fb::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#sportsland .sl-c__ff::after { background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .85)); opacity: calc(var(--p, 0) * 1.7); }
#sportsland .sl-c__fb::after { background: linear-gradient(0deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .8)); opacity: calc((1 - var(--p, 0)) * 1.5); }
#sportsland .sl-c.is-flip .sl-c__u::after { background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 85%); opacity: calc(1 - var(--p, 0) * 1.7); }
#sportsland .sl-c.is-flip .sl-c__d::after { background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .18)); opacity: calc(max(0, var(--p, 0) - .42) * 1.7); }
/* o eixo da dobra e os dois pinos laterais */
#sportsland .sl-c::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; z-index: 3; background: rgba(0, 0, 0, .85); }
#sportsland .sl-c::before { content: ''; position: absolute; left: -1px; right: -1px; top: calc(50% - 2px); height: 4px; z-index: 4; background: linear-gradient(90deg, #07040a 0 2px, transparent 2px calc(100% - 2px), #07040a calc(100% - 2px)); }

/* ---------- Janelas estreitas (tablet em pé) ---------- */
@media (max-width: 900px) {
  #sportsland .sl-board__head, #sportsland .sl-cols, #sportsland .sl-rows { --c-ref: 0px; --c-gaps: 2; --c-tile: clamp(128px, 20cqi, 180px); }
  #sportsland .sl-cols, #sportsland .sl-row { grid-template-columns: var(--c-n) var(--c-tile) minmax(0, 1fr); }
  #sportsland .sl-ref, #sportsland .sl-cols__ref { display: none; }
}
/* ---------- Tela em pé (tablet): missão empilhada, véu mais fechado sobre a faixa ---------- */
@media (max-aspect-ratio: 4/5) {
  #sportsland .sl-mission { row-gap: clamp(36px, 4.6vh, 72px); }
  #sportsland .sl-copy, #sportsland .sl-pillars { --span: 1 / -1; }
  #sportsland .sl-pillars { justify-self: start; max-width: none; }
  #sportsland .sl-title { font-size: calc((clamp(60px, 10vw, 128px)) * var(--ts, 1)); }
  #sportsland .sl-statement { font-size: calc((clamp(24px, 3.6vw, 40px)) * var(--ts, 1)); }
  #sportsland .sl-chip { font-size: calc((clamp(15px, 1.9vw, 19px)) * var(--ts, 1)); }
  #sportsland .sl-chips { max-width: none; }
  #sportsland .sl-p__t { font-size: calc((clamp(30px, 5.4vw, 60px)) * var(--ts, 1)); }
  #sportsland .sl-bg img { filter: brightness(.26) saturate(.55) contrast(1.06); }
  #sportsland .sl-scrim { background: linear-gradient(180deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .66) 30%, rgba(14, 7, 19, .66) 70%, rgba(14, 7, 19, .92) 100%); }
}
@media (max-width: 980px) {
  #sportsland .sl-pillars { justify-self: start; max-width: none; }
  #sportsland .sl-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  #sportsland .sl-p__t { font-size: calc((clamp(26px, 4.4vw, 40px)) * var(--ts, 1)); }
}

/* ---------- Movimento reduzido: os dois quadros um embaixo do outro, estado final ---------- */
.reduced #sportsland .sl-stage { height: auto; overflow: visible; }
.reduced #sportsland .sl-wrap { grid-template-areas: none; row-gap: clamp(80px, 14vh, 160px); padding-top: calc(var(--hud-h) + clamp(48px, 8vh, 96px)); padding-bottom: clamp(72px, 12vh, 140px); }
.reduced #sportsland .sl-mission, .reduced #sportsland .sl-circuit { grid-area: auto; }
/* a missão ocupa a primeira tela inteira: na parada do apresentador o cabeçalho do painel não aparece cortado no rodapé */
.reduced #sportsland .sl-mission { min-height: calc(100vh - var(--hud-h) - clamp(48px, 8vh, 96px)); min-height: calc(100svh - var(--hud-h) - clamp(48px, 8vh, 96px)); align-content: center; }
.reduced #sportsland .sl-p { --lit: 1; }
.reduced #sportsland .sl-cols__ref { opacity: 1; transition: none; }