/* Início. Componentes compartilhados moram no style.css; aqui só o que é
 * desta página: o herói com a sala recriada, os números, os recursos da
 * transmissão, o chão da Mesa, a árvore e o fecho. */

/* ===================================================================== */
/* Herói                                                                  */
/* ===================================================================== */

.heroi { padding-top: clamp(40px, 7vw, 96px); }

.heroi-grade {
  display: grid;
  gap: var(--e-6);
}

.heroi-contexto { margin-bottom: var(--e-5); color: var(--tx2); }
.heroi-contexto .no { margin-right: 2px; }

.heroi h1 {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 13ch;
}

.heroi-lado {
  display: grid;
  gap: var(--e-5);
  align-content: end;
}
.heroi-lado .acao-meta { margin-top: calc(-1 * var(--e-2)); }

@media (min-width: 1024px) {
  .heroi-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--e-5);
    align-items: end;
  }
  .heroi-titulo { grid-column: 1 / span 8; }
  .heroi-lado { grid-column: 9 / -1; padding-bottom: 10px; }
  .heroi-lado .lede { font-size: 1.125rem; }
}

/* ---------- A sala recriada (interface Sinal do app) ---------- */

.sala {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 64px;
  margin-top: clamp(40px, 6vw, 80px);
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: var(--r-painel);
  background: var(--bg);
  box-shadow: var(--elev);
  font-size: 13px;
  line-height: 1.3;
  user-select: none;
}

.sala-cabeca {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: 0 var(--e-4);
  border-bottom: 1px solid var(--line);
}
.sala-nome { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.sala-endereco { display: none; font-family: var(--f-dado); font-weight: 500; font-size: 12px; color: var(--tx2); }
.sala-presenca { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sala-presenca .no { width: 10px; height: 10px; border-width: 1.5px; }
.sala-conta { margin-left: 4px; font-family: var(--f-dado); font-weight: 500; font-size: 12px; }
.sala-rede { color: var(--ok); }
.sala-icone-fim { display: none; color: var(--tx2); }

.sala-meio { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }

.sala-palco {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--e-3);
  background: var(--void);
}

.tela {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-video);
  background: linear-gradient(180deg, var(--cena-ceu-1), var(--cena-ceu-2) 70%);
  box-shadow: 0 0 0 1px var(--line2);
}
.cena { width: 100%; height: 100%; }
.cena-estrelas { fill: var(--cena-lua); opacity: 0.6; }
.cena-lua { fill: var(--cena-lua); opacity: 0.35; }
.cena-pedra { fill: var(--cena-pedra); }
.cena-vulto { fill: var(--cena-chao); }
.cena-mapa rect { fill: var(--scrim); stroke: var(--line3); }
.cena-mapa path { fill: none; stroke: var(--line3); stroke-width: 2; }
.cena-mapa-eu { fill: var(--wire); }
.cena-mapa-outro { fill: var(--pessoa-1); }
.cena-serra-1 { fill: var(--cena-serra-1); }
.cena-serra-2 { fill: var(--cena-serra-2); }
.cena-chao { fill: var(--cena-chao); }
.cena-mira { fill: none; stroke: var(--tx); stroke-width: 2; opacity: 0.8; }
.cena-rabisco {
  fill: none;
  stroke: var(--pessoa-1);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tela-hud { position: absolute; }
.tela-hud--vida {
  left: 3%;
  bottom: 5%;
  width: 22%;
  height: 8px;
  border-radius: 2px;
  background: var(--scrim);
}
.tela-hud--vida i {
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  background: var(--ok);
  transform: scaleX(0.72);
  transform-origin: left center;
}
.tela-hud--municao {
  right: 16%;
  bottom: 6%;
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: clamp(10px, 1.4vw, 15px);
  color: var(--tx);
}
.tela-rabisco-nome {
  position: absolute;
  left: 79%;
  top: 50%;
  padding: 2px 6px;
  border-radius: var(--r-ctl);
  background: var(--pessoa-1);
  color: var(--on-act);
  font-weight: 700;
  font-size: 11px;
}

.palco-topo {
  position: absolute;
  top: calc(var(--e-3) + 10px);
  left: calc(var(--e-3) + 10px);
  right: calc(var(--e-3) + 10px);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.palco-quem {
  padding: 3px 7px;
  border-radius: var(--r-ctl);
  background: var(--scrim);
  font-weight: 700;
}
.palco-vendo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: var(--r-ctl);
  background: var(--scrim);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 12px;
}

.sala-conversa { display: none; }

.sala-barramento {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3);
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--s1);
}

.fonte {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  flex: none;
  height: 48px;
  padding: 0 var(--e-4) 0 var(--e-3);
  border-radius: var(--r-ctl);
}
.fonte b { display: block; font-size: 13px; }
.fonte small { display: block; font-size: 12px; color: var(--tx2); }
.fonte .no { width: 22px; height: 22px; }
.fonte--atual { background: var(--s2); }
.fonte--atual::after {
  content: '';
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--wire);
}
.fonte-losango {
  width: 18px;
  height: 18px;
  margin: 2px;
  border: 2px solid var(--wire);
  border-radius: 3px;
  transform: rotate(45deg);
}
.fonte--mesa { display: none; }

.barramento-acoes { display: none; }
.barramento-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--e-3);
  border-radius: var(--r-ctl);
  color: var(--tx);
  font-weight: 700;
  white-space: nowrap;
}
.barramento-botao--giz { background: var(--act); color: var(--on-act); }

@media (min-width: 640px) {
  .fonte--mesa { display: inline-flex; }
  .sala-endereco { display: inline; }
  .sala-icone-fim { display: block; }
}

@media (min-width: 1024px) {
  .sala-meio { grid-template-columns: minmax(0, 1fr) 300px; }
  .sala-palco { padding: var(--e-5); }
  .palco-topo { top: calc(var(--e-5) + 12px); left: calc(var(--e-5) + 12px); right: calc(var(--e-5) + 12px); }

  .sala-conversa {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    padding: var(--e-4);
    border-left: 1px solid var(--line);
    background: var(--s1);
  }
  .conversa-titulo { font-family: var(--f-display); font-weight: 600; font-size: 15px; }
  .conversa-dia {
    font-family: var(--f-dado);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tx3);
  }
  .mensagem { display: grid; grid-template-columns: 24px 1fr; gap: var(--e-2); }
  .mensagem p { margin: 0; color: var(--tx); }
  .mensagem time { font-family: var(--f-dado); font-weight: 500; font-size: 11px; color: var(--tx3); }
  .mensagem-no {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: var(--r-no);
    font-weight: 700;
    font-size: 11px;
  }
  .mensagem-no--leo { color: var(--pessoa-1); }
  .mensagem-no--bia { color: var(--pessoa-2); }
  .mensagem-no--caio { color: var(--pessoa-3); }
  .conversa-campo {
    margin-top: auto;
    padding: 10px var(--e-3);
    border: 1px solid var(--line2);
    border-radius: var(--r-cartao);
    color: var(--tx3);
  }

  .barramento-acoes { display: flex; gap: var(--e-1); margin-left: auto; padding-left: var(--e-4); border-left: 1px solid var(--line); }
}

/* ===================================================================== */
/* Números                                                                */
/* ===================================================================== */

.numeros { padding-block: clamp(56px, 8vw, 104px); }

.numeros-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.numeros-grade > div {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding: var(--e-5) var(--e-4) var(--e-5) 0;
  border-bottom: 1px solid var(--line);
}
.numeros-grade > div:nth-child(odd) { padding-right: var(--e-4); border-right: 1px solid var(--line); }
.numeros-grade > div:nth-child(even) { padding-left: var(--e-4); }
.numeros-grade dt {
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
}
.numeros-grade dd { margin: 0; color: var(--tx2); font-size: var(--fs-pequeno); }
.numero {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tx);
}

@media (min-width: 900px) {
  .numeros-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .numeros-grade > div,
  .numeros-grade > div:nth-child(odd),
  .numeros-grade > div:nth-child(even) {
    padding: var(--e-6) var(--e-5);
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .numeros-grade > div:first-child { padding-left: 0; }
  .numeros-grade > div:last-child { border-right: 0; }
}

/* ===================================================================== */
/* 01 Transmissão                                                        */
/* ===================================================================== */

.recursos {
  display: grid;
  gap: var(--e-5);
}
@media (min-width: 720px) {
  .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.recurso {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding: var(--e-3) var(--e-3) var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--r-painel);
  background: var(--s1);
}
.recurso h3, .recurso p { padding-inline: var(--e-3); }
.recurso h3 { margin-top: var(--e-3); }
.recurso p { color: var(--tx2); }

.recurso-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 168px;
  overflow: hidden;
  border-radius: var(--r-cartao);
  background: var(--void);
  font-size: 13px;
}

/* Uma tela por vez */
.mini-fontes { display: grid; gap: var(--e-2); justify-items: start; }
.mini-fontes .fonte { background: var(--s1); }
.mini-fontes .fonte--atual { background: var(--s2); }
.mini-escolha { display: flex; gap: var(--e-2); padding-left: 46px; }
.mini-botao {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--e-3);
  border: 1px solid var(--line2);
  border-radius: var(--r-ctl);
  font-weight: 700;
  font-size: 12px;
}
.mini-botao--giz { border-color: var(--act); background: var(--act); color: var(--on-act); }

/* Pausa */
.mini-pausa { display: grid; gap: var(--e-4); justify-items: center; }
.mini-teclas { display: flex; align-items: center; gap: 6px; color: var(--tx3); }
.mini-teclas kbd { font-size: 14px; padding: 0.3em 0.7em; }
.mini-pausada {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 6px var(--e-3);
  border: 1px dashed var(--line3);
  border-radius: var(--r-ctl);
  color: var(--tx2);
  font-weight: 700;
}

/* Rabisco */
.mini-rabisco { width: 80%; height: auto; }
.mini-rabisco-traco { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mini-rabisco-traco--1 { stroke: var(--pessoa-1); }
.mini-rabisco-traco--2 { stroke: var(--pessoa-2); }
.mini-rabisco-nome {
  position: absolute;
  padding: 2px 6px;
  border-radius: var(--r-ctl);
  color: var(--on-act);
  font-weight: 700;
  font-size: 11px;
}
.mini-rabisco-nome--1 { left: 14%; top: 62%; background: var(--pessoa-1); }
.mini-rabisco-nome--2 { right: 14%; top: 18%; background: var(--pessoa-2); }

/* Degraus de qualidade */
.mini-degraus { list-style: none; display: grid; gap: 6px; width: min(240px, 80%); }
.mini-degraus li {
  display: flex;
  justify-content: space-between;
  padding: 7px var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 12px;
  color: var(--tx3);
}
.mini-degraus li span:last-child::after { content: ' fps'; }
.mini-degraus li.mini-degraus-atual { border-color: var(--wire); background: var(--wire-soft); color: var(--tx); }

.extras {
  margin-top: var(--e-7);
  gap: var(--e-4) var(--e-6);
}
@media (min-width: 720px) {
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== */
/* 02 A Mesa                                                              */
/* ===================================================================== */

.mesa-grade { display: grid; gap: var(--e-7); }
.mesa-grade .cabeca { margin-bottom: 0; }

.mesa-grupos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.mesa-grupos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 36px;
  padding: 0 var(--e-3);
  border: 1px solid var(--line2);
  border-radius: var(--r-ctl);
  color: var(--tx2);
  font-weight: 700;
  font-size: var(--fs-pequeno);
}
.mesa-grupos .icone { color: var(--wire); }

/* O chão da Mesa com três janelas reais. Os prints já trazem a própria
   barra de título, então a moldura é só a borda. */
.mesa-chao {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
  padding: clamp(16px, 3vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-painel);
}
.mesa-janela { box-shadow: var(--elev); }
.mesa-janela .janela-corpo { background: var(--s1); }
.mesa-janela--damas { grid-column: 1 / -1; }
.mesa-janela--enquete img { aspect-ratio: 672 / 300; object-fit: cover; object-position: top; }

.mesa-cursor {
  position: absolute;
  left: 52%;
  top: 30%;
  padding: 2px 7px;
  border-radius: var(--r-ctl);
  background: var(--pessoa-2);
  color: var(--on-act);
  font-weight: 700;
  font-size: 12px;
}
.mesa-cursor::before {
  content: '';
  position: absolute;
  left: -10px;
  top: -12px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid var(--pessoa-2);
  transform: rotate(-35deg);
}

@media (min-width: 1024px) {
  .mesa-grade .cabeca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-7); max-width: none; align-items: end; }
  .mesa-grade .cabeca h2 { grid-row: 1 / span 3; align-self: start; }
  .mesa-chao { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .mesa-janela--damas { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .mesa-janela--dados { grid-column: 8 / -1; grid-row: 1; }
  .mesa-janela--enquete { grid-column: 8 / -1; grid-row: 2; }
}

/* ===================================================================== */
/* 03 Por dentro                                                          */
/* ===================================================================== */

.arvore-grade { display: grid; gap: var(--e-6); margin-bottom: var(--e-6); }
@media (min-width: 1024px) {
  .arvore-grade { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
}

.arvore-caixa { margin: 0; padding: clamp(16px, 3vw, 40px); background: var(--void); }
.arvore { width: 100%; height: auto; }
.arvore-fios path { fill: none; stroke: var(--wire-line); stroke-width: 2; }
.arvore .no--vivo { fill: var(--live); }
.arvore-relay { fill: var(--bg); stroke: var(--tx); stroke-width: 3; }
.arvore-folha { fill: var(--bg); stroke: var(--tx2); stroke-width: 2.5; }
.arvore-rotulos text {
  fill: var(--tx2);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.fatos { display: grid; gap: var(--e-5); margin: 0; }
.fatos > div { display: grid; gap: var(--e-2); padding-left: var(--e-5); border-left: 2px solid var(--wire-line); }
.fatos dt { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.fatos dd { margin: 0; color: var(--tx2); }

/* ===================================================================== */
/* 04 Começar                                                             */
/* ===================================================================== */

.trilho-corpo > .passos { margin-bottom: var(--e-6); }

/* ===================================================================== */
/* Fecho                                                                  */
/* ===================================================================== */

.fecho { padding-bottom: var(--e-9); }

.fecho-painel {
  display: grid;
  justify-items: center;
  gap: var(--e-5);
  padding: clamp(48px, 8vw, 112px) var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--r-painel);
  text-align: center;
}
.fecho-painel h2 { font-size: var(--fs-display); letter-spacing: -0.04em; }
.fecho-painel .acao { justify-content: center; }

.fecho-nos { display: flex; align-items: center; width: min(240px, 60%); }
.fecho-nos .fio { flex: 1; }

.fecho-celular { display: none; max-width: 36ch; color: var(--tx3); font-size: var(--fs-pequeno); }
@media (hover: none) and (pointer: coarse) {
  .fecho-celular { display: block; }
}