/* Campo 3D interativo no sistema do blend Estádio (Playbook e Arena 3D)
   Carregado depois de interactive-field.css (do Codex, que não é editado) e de arena-ds.css.
   Aqui ficam só os ajustes de sistema: largura do container, fontes e tamanhos do arena-ds.css,
   superfícies e controles no padrão ds-*, contraste, foco, alvos de 44 px e os estados de carga.
   A interface do campo é a do Codex: nada some, só muda o acabamento.

   Regras que este arquivo segue (as mesmas do arena-ds.css):
   - nenhum texto abaixo de 12 px, nem sobre a cena 3D; tamanhos só da escala 12/14/16/18/22/28/40/56;
   - papéis do Estádio: serifa para título e leitura, Archivo para interface e números,
     mono para dado e rótulo (caixa alta só em rótulo);
   - texto sobre a cena (fase, legenda, dica, contexto, câmera) tem fundo escuro próprio, porque
     o contraste sobre o canvas não pode ser medido e o pior pixel da cena é claro;
   - o vermelho fica para a ação principal da página; no campo o destaque é o ciano do sistema,
     e as três cores da cena (ataque, defesa, bola) só aparecem na legenda e no próprio 3D;
   - hover só em quem tem mouse (no toque o estado ficava preso no último botão tocado);
   - o anel de foco é o do site (ciano, 3 px); dentro de caixas que cortam o que sai delas
     (o canvas, a pílula da câmera) ele fica por dentro. */

/* ---------- 1. Coluna, ritmo e variáveis ---------- */
.field-studio {
  --field-ink: var(--ds-night-deep);       /* fundo do quadro e dos campos de formulário */
  --field-panel: var(--ds-night-2);        /* faixas de controle e painel lateral */
  --field-line: var(--ds-line);
  --field-muted: var(--ds-ink-2);
  --field-scrim: rgba(6, 20, 39, .88);     /* fundo dos textos que ficam sobre a cena */
  --field-cyan: #62e4df;                   /* cor do ataque na cena 3D: a legenda e o campo falam a mesma cor */
  --field-red: #ef6672;                    /* cor da defesa na cena 3D */
  --field-gold: #ffd17d;                   /* bola, rótulos dourados e "olhe para isso" */
  width: min(100% - 2 * var(--ds-gutter), var(--ds-max));
  max-width: none;
  margin: clamp(20px, 2.5vw, 32px) auto clamp(48px, 6vw, 80px);
  scroll-margin-top: calc(var(--ds-header-h) + 16px);
  font-family: var(--ds-font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ds-ink);
}

/* ---------- 2. Cabeçalho do campo ---------- */
.field-studio .field-studio__heading { display: grid; justify-items: start; gap: 10px; padding: 0 0 clamp(16px, 2vw, 24px); }
.field-studio .field-studio__heading .eyebrow { margin: 0; }
.field-studio .field-studio__heading > p { max-width: 110ch; margin: 0; font: 400 16px/1.55 var(--ds-font-serif); color: var(--ds-ink-2); }
/* O h2 do Codex fica só para leitor de tela: sem ele a estrutura pularia do h1 para o h3 do painel */
.field-studio .field-studio__heading h2 {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Quadro: grade, faixas e rótulos ---------- */
.field-studio .field-studio__workspace { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--field-ink); box-shadow: var(--ds-shadow); }
/* A coluna do campo acompanha a altura do painel lateral: o palco cresce, não sobra faixa vazia embaixo */
.field-studio .field-studio__main { display: flex; flex-direction: column; }
.field-studio .field-studio__topbar { gap: 16px 20px; background: var(--field-panel); border-bottom: 1px solid var(--ds-line); }
.field-studio .field-studio__finder { background: var(--field-panel); border-bottom: 1px solid var(--ds-line); }
.field-studio .field-studio__transport { background: var(--field-panel); border-bottom: 1px solid var(--ds-line); }
.field-studio .field-studio__layers { background: var(--field-ink); }
.field-studio .field-studio__select, .field-studio .field-studio__variant { color: var(--ds-ink-2); }
/* Rótulos (Família, Conceito, Campo didático, Ver no campo) em mono, como os da Central de Jogos.
   O seletor dentro do rótulo fica com a letra de interface em 16 px (regra de formulário do
   styles.css); aqui ele só deixa de herdar a caixa alta e o espaçamento do rótulo. */
.field-studio :is(.field-studio__select, .field-studio__live, .field-studio__layers > span) { font: 500 12px/1.4 var(--ds-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-ink-2); }
.field-studio .field-studio__select select { letter-spacing: 0; text-transform: none; }
/* Quando a faixa quebra (celular estreito), o placar didático desce sozinho e continua à direita */
.field-studio .field-studio__live { margin-left: auto; }
.field-studio .field-studio__live b {
  font: 700 22px/1.1 var(--ds-font-ui); font-stretch: 74%;
  letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ds-cyan);
}

/* ---------- 4. Seletores e busca (mesmo desenho do .ds-select e do campo de busca do Playbook) ---------- */
.field-studio :is(.field-studio__select, .field-studio__speed, .field-studio__finder [data-field-options]) select {
  appearance: none; -webkit-appearance: none;
  height: 44px; padding: 0 40px 0 14px;
  border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm);
  background-color: var(--field-ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-ink-2) 50%), linear-gradient(135deg, var(--ds-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  color: var(--ds-ink); font-weight: 600; text-overflow: ellipsis; cursor: pointer;
}
.field-studio .field-studio__speed select { min-width: 78px; padding: 0 30px 0 12px; background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; }
@media (hover: hover) {
  .field-studio :is(.field-studio__select, .field-studio__speed, .field-studio__finder [data-field-options]) select:not(:disabled):hover { border-color: var(--ds-ink-3); }
}
.field-studio .field-studio__finder input {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm);
  background: var(--field-ink); color: var(--ds-ink);
}
.field-studio .field-studio__finder input::placeholder { color: var(--ds-ink-3); opacity: 1; }
.field-studio .field-studio__finder input:focus { border-color: var(--ds-cyan); box-shadow: 0 0 0 3px var(--ds-cyan-soft); }
.field-studio .field-studio__finder output { font: 500 12px/1.4 var(--ds-font-mono); letter-spacing: .03em; color: var(--ds-ink-2); }
/* A contagem em mono fica numa linha ao lado da busca; no celular ela desce para baixo do campo (interactive-field.css). */
@media (min-width: 651px) { .field-studio .field-studio__finder output { max-width: none; white-space: nowrap; } }

/* ---------- 5. Botões: um desenho só, estados por variável ----------
   --fb-* guardam fundo, texto e borda do estado normal e do hover; o :hover do Codex (que valia
   também no toque) é anulado e o hover de verdade só vale com mouse. */
.field-studio button {
  --fb-bg: transparent; --fb-fg: var(--ds-ink); --fb-line: var(--ds-line-strong);
  --fb-bg-hover: var(--fb-bg); --fb-line-hover: var(--ds-ink-2);
  min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--fb-line); border-radius: var(--ds-radius-sm);
  background: var(--fb-bg); color: var(--fb-fg);
  font: 600 14px/1.25 var(--ds-font-text); letter-spacing: 0;
}
.field-studio button:hover { background: var(--fb-bg); border-color: var(--fb-line); }

/* Ação principal do campo: reproduzir */
.field-studio .field-studio__transport .field-studio__play {
  --fb-bg: var(--ds-cyan); --fb-fg: var(--ds-night-deep); --fb-line: var(--ds-cyan);
  --fb-bg-hover: #5fe0ff; --fb-line-hover: #5fe0ff;
  min-width: 142px; gap: 10px; font-size: 16px; font-weight: 700;
  background: var(--fb-bg); color: var(--fb-fg); border-color: var(--fb-line);
}
.field-studio .field-studio__play > span { width: 16px; font-size: 16px; }
.field-studio .field-studio__transport > [data-field-replay] { gap: 8px; }

/* Interruptores em pílula, como os chips do Playbook: câmera, camadas, comparação e leituras relacionadas */
.field-studio :is(.field-studio__camera, .field-studio__layers, .field-studio__variant > div, .field-studio__related) button { border-radius: 999px; }
.field-studio .field-studio__layers button, .field-studio .field-studio__variant button, .field-studio .field-studio__related button { padding: 0 16px; font-size: 14px; }
.field-studio .field-studio__variant button { padding: 0 14px; }
.field-studio .field-studio__related button { --fb-fg: var(--ds-ink-2); padding: 0 14px; text-align: left; }
.field-studio .field-studio__camera button { --fb-line: transparent; min-width: 48px; padding: 0 14px; font-size: 14px; }

/* Estados: ficam depois dos desenhos acima para valerem sobre eles */
.field-studio button[aria-pressed="true"] {
  --fb-bg: var(--ds-ink); --fb-fg: var(--ds-night-deep); --fb-line: var(--ds-ink); --fb-line-hover: var(--ds-ink);
  background: var(--fb-bg); color: var(--fb-fg); border-color: var(--fb-line);
}
@media (hover: hover) {
  .field-studio button:not(:disabled):hover { background: var(--fb-bg-hover); border-color: var(--fb-line-hover); }
  .field-studio .field-studio__related button:not(:disabled):hover { --fb-fg: var(--ds-ink); color: var(--ds-ink); }
}

/* ---------- 6. Palco: fundo, textos sobre a cena e câmera ---------- */
.field-studio .field-studio__viewport {
  flex: 1 1 auto; height: auto; min-height: clamp(350px, 29vw, 430px);
  background: radial-gradient(ellipse at 50% 30%, var(--ds-night-3) 0, var(--field-ink) 74%);
}
.field-studio .field-studio__hud > [data-field-phase] {
  padding: 8px 12px; border: 1px solid var(--ds-line-strong); border-left: 3px solid var(--ds-cyan); border-radius: var(--ds-radius-sm);
  background: var(--field-scrim); color: var(--ds-ink);
  font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em;
}
.field-studio .field-studio__legend { padding: 8px 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); background: var(--field-scrim); color: var(--ds-ink); font-size: 12px; font-weight: 600; line-height: 1.3; }
.field-studio .field-studio__legend i { width: 8px; height: 8px; }
.field-studio .field-studio__context,
.field-studio .field-studio__hint {
  right: auto; width: fit-content; max-width: calc(100% - 40px);
  padding: 5px 10px; border-radius: var(--ds-radius-sm); background: var(--field-scrim);
  font-size: 14px; line-height: 1.4; text-shadow: none;
}
.field-studio .field-studio__context { color: var(--field-gold); font-weight: 600; }
.field-studio .field-studio__hint { color: var(--ds-ink); letter-spacing: 0; }
.field-studio .field-studio__context:empty, .field-studio .field-studio__hint:empty { display: none; }
.field-studio .field-studio__camera {
  gap: 2px; padding: 4px; border: 1px solid var(--ds-line-strong); border-radius: 999px;
  background: var(--field-scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.field-studio .field-studio__loading,
.field-studio .field-studio__fallback { background: radial-gradient(ellipse at 50% 45%, var(--ds-night-3), var(--field-ink)); color: var(--ds-ink-2); font-size: 16px; }
.field-studio .field-studio__loading > span { border-color: rgba(33, 212, 253, .2); border-top-color: var(--ds-cyan); }
.field-studio .field-studio__fallback strong { font: 600 22px/1.2 var(--ds-font-serif); color: var(--ds-ink); }
.field-studio .field-studio__fallback p { color: var(--ds-ink-2); }
.field-studio .field-studio__fallback a { color: var(--ds-cyan); font-weight: 600; text-decoration: none; }

/* ---------- 7. Linha do tempo, camadas e números ---------- */
.field-studio .field-studio__timeline input { accent-color: var(--ds-cyan); }
.field-studio .field-studio__timeline > span:last-child,
.field-studio .field-studio__layers output {
  font: 500 12px/1.4 var(--ds-font-mono); letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--ds-ink-2);
}
.field-studio .field-studio__layers > span { margin-right: 4px; }
.field-studio .field-studio__layers output { color: var(--ds-ink-3); }

/* ---------- 8. Painel lateral ---------- */
.field-studio .field-studio__lesson { background: var(--field-panel); border-left: 1px solid var(--ds-line); }
.field-studio .field-studio__kicker {
  margin: 0 0 12px; font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-cyan);
}
/* O título do conceito usa o h3 do sistema (a regra de aside do arena-ds.css o deixava um degrau abaixo) */
main .field-studio .field-studio__lesson h3 { margin: 0 0 12px; font-size: var(--ds-h3) !important; }
.field-studio .field-studio__lesson > [data-field-definition] { margin: 0 0 20px; font: 400 16px/1.6 var(--ds-font-serif); color: var(--ds-ink-2); }
.field-studio .field-studio__phases { gap: 6px; margin: 0 0 20px; }
.field-studio .field-studio__phases button, .field-studio .field-studio__stage-phases button {
  --fb-bg: var(--field-ink); --fb-line: var(--ds-line);
  background: var(--fb-bg); border-color: var(--fb-line);
}
/* Fases como os passos das páginas de conceito: interface 16 px, número em mono */
.field-studio .field-studio__phases button { gap: 12px; padding: 0 14px; font-size: 16px; font-weight: 500; text-align: left; }
.field-studio .field-studio__phases b, .field-studio .field-studio__stage-phases b {
  font: 500 12px/1 var(--ds-font-mono); font-variant-numeric: tabular-nums; color: var(--ds-ink-3);
}
.field-studio :is(.field-studio__phases, .field-studio__stage-phases) button[aria-current="step"] {
  --fb-bg: var(--ds-cyan-soft); --fb-line: rgba(33, 212, 253, .55); --fb-line-hover: rgba(33, 212, 253, .8);
  background: var(--fb-bg); border-color: var(--fb-line);
}
.field-studio :is(.field-studio__phases, .field-studio__stage-phases) button[aria-current="step"] b { color: var(--ds-cyan); }
.field-studio .field-studio__stage-phases { background: var(--field-panel); }
.field-studio .field-studio__insight { margin: 0 0 20px; padding: 0 0 0 14px; border-left: 2px solid var(--field-gold); }
.field-studio .field-studio__insight > span { font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; color: var(--field-gold); }
.field-studio .field-studio__insight p { margin: 8px 0 0; font: 400 16px/1.6 var(--ds-font-serif); color: var(--ds-ink); }
.field-studio .field-studio__lesson details { padding: 0; border-top: 1px solid var(--ds-line); }
.field-studio .field-studio__lesson summary { min-height: 48px; font-size: 16px; font-weight: 600; color: var(--ds-ink); }
.field-studio .field-studio__lesson summary::-webkit-details-marker { display: none; }
.field-studio .field-studio__lesson summary::after { content: "+"; content: "+" / ""; font-size: 20px; line-height: 1; color: var(--ds-cyan); }
.field-studio .field-studio__lesson details[open] > summary::after { content: "−"; content: "−" / ""; }
.field-studio .field-studio__lesson details p { margin: 0 0 14px; font: 400 16px/1.6 var(--ds-font-serif); color: var(--ds-ink-2); }
.field-studio .field-studio__lesson a { font-size: 16px; font-weight: 600; color: var(--ds-cyan); }
.field-studio .field-studio__related { margin: 12px 0 8px; }
.field-studio .field-studio__related > span { font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; color: var(--ds-ink-3); }
.field-studio .field-studio__related > div { gap: 8px; margin-top: 10px; }
.field-studio .field-studio__access output { font: 500 12px/1.6 var(--ds-font-mono); color: var(--field-gold); }

/* Aviso de rodapé, como o .ds-note */
.field-studio .field-studio__disclaimer { margin: 16px 0 0; padding: 14px 16px; border-left: 2px solid var(--ds-line-strong); font-size: 14px; line-height: 1.55; color: var(--ds-ink-3); }

/* ---------- 9. Foco ----------
   O anel do site (ciano, 3 px, 3 px de distância) vale em todo o campo. Onde a caixa corta o que
   passa da borda, o anel entra: o canvas (overflow: hidden) e a pílula da câmera. */
.field-studio .field-studio__canvas canvas:focus-visible { outline: 3px solid var(--ds-cyan) !important; outline-offset: -3px !important; }
.field-studio .field-studio__camera button:focus-visible { outline-offset: 1px !important; }

/* ---------- 10. Estados de carga e erro do carregador ---------- */
.field-studio > .playbook-state {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--field-panel); color: var(--ds-ink-2);
}
.field-studio > .playbook-state > :is(strong, p) { flex: 1 1 100%; margin: 0; }
.field-studio > .playbook-state strong { font: 600 var(--ds-h3)/1.2 var(--ds-font-serif); color: var(--ds-ink); }
.field-studio > .playbook-state p { max-width: 56ch; }
.field-studio > .playbook-state a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-cyan); font-weight: 600; text-decoration: none; }
/* Enquanto carrega, o painel ocupa ao menos a altura da tela, com o aviso no alto. O campo pronto é
   mais alto que a tela (1.730 px em 390 px de largura, perto de 1.000 px no computador): com o painel
   mais baixo, o começo da biblioteca aparecia embaixo e descia quando o campo chegava, até 0,28 de
   CLS num iPad em pé e 0,15 num celular de 430 px. Assim, nada abaixo do painel aparece antes do campo. */
.field-studio > .playbook-state:not(.playbook-state--error) { align-content: flex-start; min-height: max(clamp(320px, 38vw, 520px), 100vh); min-height: max(clamp(320px, 38vw, 520px), 100svh); }

/* ---------- 11. Telas menores ---------- */
@media (max-width: 950px) {
  .field-studio .field-studio__viewport { min-height: 420px; }
  .field-studio .field-studio__lesson { border-left: 0; border-top: 1px solid var(--ds-line); }
}
@media (max-width: 650px) {
  .field-studio .field-studio__viewport { min-height: 360px; }
  .field-studio .field-studio__topbar { gap: 8px 12px; }
  .field-studio .field-studio__live b { font-size: 18px; }
  .field-studio .field-studio__camera button { min-width: 44px; padding: 0 4px; }
  .field-studio .field-studio__stage-phases button { padding: 6px; }
}