/* =============================================================================
   TO PRO JOGO - Folha de estilo unica
   Paleta Laranja Areia sobre fundo escuro, tipografia Inter.

   Estrategia responsiva: o desenho nasce mobile, com no maximo 480px de
   largura util. Em telas maiores a mesma coluna e centralizada e ganha uma
   moldura suave - o app continua sendo um app, nao vira um site esticado.
   As telas de conteudo denso (vitrine, painel do dono) abrem em grade a
   partir de 900px, aproveitando o espaco sem quebrar o ritmo vertical.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

:root{
  /* Paleta ---------------------------------------------------------------- */
  --brand:#FF7A3D;        /* Laranja Areia - acao, marca, CTA */
  --brand-lt:#FFB067;     /* Areia Clara - hover, destaque suave */
  --brand-dk:#E0521C;     /* Terracota - gradiente, pressionado */
  --ink-900:#0C0A09;      /* Fundo do app */
  --ink-800:#171310;      /* Superficie, cards */
  --ink-700:#221B16;      /* Superficie elevada, chips */
  --ink-600:#332821;      /* Bordas fortes, divisores */
  --line:rgba(255,255,255,.09);
  --txt:#FFF6F0;
  --dim:#A2938A;
  --ok:#34C77F;
  --live:#E5252A;
  --moment:#FF3D77;
  --hero:linear-gradient(150deg,#FF7A3D 0%,#E0521C 48%,#7A2A0B 100%);
  --hero-p:linear-gradient(150deg,#3B2A5C 0%,#1E1436 100%);
  --hero-g:linear-gradient(150deg,#12463A 0%,#07231D 100%);
  --mom-g:linear-gradient(140deg,#FF7A3D,#FF3D77 70%,#8B1B55);
  --glow:0 14px 34px -12px rgba(255,122,61,.42);

  /* Estas quatro nasceram de cores que estavam cravadas no meio da folha.
     Virar variavel e o que permite o tema claro existir sem reescrever
     regra por regra. */
  --fundo:#080706;              /* atras da coluna do app */
  --barra:rgba(12,10,9,.9);     /* topo e rodape, translucidos */
  --veu:rgba(4,3,3,.72);        /* escurece o fundo sob as folhas */
  --mapa:#101512;               /* o vazio do mapa enquanto carrega */
  --dim2:#8A7A70;               /* texto apagado, um passo acima do --dim */
  --dim3:#6E605A;               /* dica, contador, rodape */

  --raio:14px;
  --largura:480px;
}

/* =============================================================================
   TEMA CLARO
   =============================================================================
   O claro e o padrao do app (ver Tema.aplicar no ui.js). O escuro continua
   inteiro, a um toque.

   Tres decisoes que valem explicacao:

   1. O fundo NAO e branco puro: e creme. O tom da pagina e o do cartao dao a
      hierarquia de profundidade que no escuro vem do #0C0A09 contra o
      #171310: o cartao se destaca por ser mais claro que a pagina, e nao por
      ter borda. Uma cor so em tudo achata a tela.

   2. O laranja e a marca, e marca nao pode clarear junto com o fundo. Sobre
      branco, o #FF7A3D de antes vibra demais e o texto branco em cima dele
      perde contraste. Entao o --brand desce um degrau (#E8621F) e o degrade
      fica mais quente e mais fechado: continua sendo o mesmo laranja areia,
      com o mesmo peso de destaque, agora legivel.

   3. As bordas passam a ser pretas transparentes, e nao brancas. Uma borda
      branca sobre fundo claro simplesmente nao existe.

   4. O claro NAO e branco: e creme (ver a escada de superficies abaixo).
   ========================================================================== */
:root[data-tema="claro"]{
  --brand:#E8621F;
  --brand-lt:#FF8A4C;
  --brand-dk:#C2410C;

  /* A escada de superficies inverte: quanto mais "alto" o elemento, mais
     claro ele fica, que e como a luz funciona no mundo.
     
     E creme, nao branco. O branco puro ao lado do laranja da marca esfria a
     tela e faz o app parecer um formulario; o creme e a mesma familia quente
     do laranja, e e o mesmo tom do texto dos nossos e-mails (#F5F1EC la), o
     que deixa o app e o que chega na caixa de entrada parecendo a mesma
     coisa. O cartao continua sendo o ponto mais claro, so que creme tambem:
     e a diferenca entre ele e a pagina que da profundidade, nao o branco. */
  --ink-900:#F5F0E8;            /* a coluna do app */
  --ink-800:#FDFAF5;            /* cartao */
  --ink-700:#EFE8DD;            /* chip, superficie elevada */
  --ink-600:#DDD3C3;            /* divisor forte */
  --line:rgba(28,20,15,.13);

  /* Os cinzas do texto sao um degrau mais escuros do que eram sobre branco:
     fundo creme e um pouco menos claro, e a dica pequena perdia contraste. */
  --txt:#1C1410;
  --dim:#63554C;
  --dim2:#6E6057;
  --dim3:#736558;

  --fundo:#EAE3D7;              /* um tom abaixo da coluna, para a moldura aparecer */
  --barra:rgba(245,240,232,.92);
  --veu:rgba(28,20,15,.45);
  --mapa:#E6DFD2;

  --ok:#0F8A50;
  --live:#D0191E;
  --moment:#E01B5F;

  /* O heroi mantem o mesmo desenho do escuro, so que sem o quase-preto no
     fim: sobre fundo claro aquele fecho preto virava um borrao. */
  --hero:linear-gradient(150deg,#FF9457 0%,#E8621F 52%,#B23C0D 100%);
  --hero-p:linear-gradient(150deg,#6D5AA6 0%,#3B2A5C 100%);
  --hero-g:linear-gradient(150deg,#1F8C73 0%,#0E5A49 100%);
  --mom-g:linear-gradient(140deg,#FF7A3D,#E01B5F 70%,#8B1B55);

  --glow:0 14px 30px -14px rgba(232,98,31,.45);
}

/* Onde o escuro contava com "branco sobre preto", o claro precisa do
   contrario. Sao poucos pontos, e todos tem o mesmo motivo: o elemento fica
   sobre a PAGINA, e nao sobre uma foto ou sobre o laranja. */
:root[data-tema="claro"] .btn.gh{ color:var(--txt); }
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .cam-card{ box-shadow:0 1px 2px rgba(28,20,15,.06); }
:root[data-tema="claro"] .tabbar{ border-top:1px solid var(--line); }
:root[data-tema="claro"] .appbar{ border-bottom:1px solid var(--line); }
:root[data-tema="claro"] .folha{ box-shadow:0 -18px 48px rgba(28,20,15,.22); }
:root[data-tema="claro"] .cam-replay,
:root[data-tema="claro"] .campo input,
:root[data-tema="claro"] .campo select,
:root[data-tema="claro"] .campo textarea{ background:var(--ink-800); }

/* Pontos que no escuro contavam com "branco translucido sobre preto". Sobre
   uma pagina clara, branco translucido simplesmente some. */
:root[data-tema="claro"] .pontos i{ background:rgba(28,20,15,.18); }
:root[data-tema="claro"] .destaque .veu{
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent 58%); }
:root[data-tema="claro"] .capa .veu{
  background:linear-gradient(to top,var(--ink-900),transparent 72%); }
:root[data-tema="claro"] .cam-play,
:root[data-tema="claro"] .tag.lv{ color:#FFF; }

/* A entrada e um caso a parte: o titulo e a promessa ficam logo acima da
   linha em que o veu ja virou a cor da pagina. No escuro, branco sobre
   quase-preto; no claro, branco sobre quase-branco, ou seja, invisivel.
   Aqui o texto vira escuro, e o laranja do "jogo" segue sendo o mesmo. */
:root[data-tema="claro"] .entrada .titulo{ color:var(--txt); }
:root[data-tema="claro"] .entrada .promessa{ color:var(--dim); }

/* Torradas e avisos coloridos. No escuro o texto e claro sobre um vidro
   escuro; no claro esse mesmo texto vira quase branco sobre quase branco e
   some. A cor de fundo continua a mesma, so o texto escurece ate ficar
   legivel, e a borda ganha corpo porque sombra clara nao separa nada. */
:root[data-tema="claro"] .torrada{ box-shadow:0 14px 34px rgba(28,20,15,.18); }
:root[data-tema="claro"] .torrada.ok,
:root[data-tema="claro"] .aviso.ok{ color:#0B6B3D; border-color:rgba(15,138,80,.55); }
:root[data-tema="claro"] .torrada.erro,
:root[data-tema="claro"] .aviso.erro{ color:#A3121A; border-color:rgba(208,25,30,.5); }
:root[data-tema="claro"] .aviso.info{ color:#8A3A10; border-color:rgba(232,98,31,.45); }

/* Mesmo caso, fora das caixas coloridas: vermelho e rosa claros nascidos para
   fundo preto. Texto corrido usa o cinza do tema, que ja e o certo nos dois.

   O .btn.perigo NAO entra aqui de proposito: apesar da regra la de cima que
   diz "fundo transparente, texto rosa claro", quem vale e a regra do modal,
   mais abaixo na folha, que pinta o botao de vermelho solido com texto
   branco. Escurecer o texto dele poria vermelho escuro sobre vermelho. */
:root[data-tema="claro"] .campo .erro{ color:#B01218; }
:root[data-tema="claro"] .tag.mo{ color:#A8144A; background:rgba(224,27,95,.13); }
:root[data-tema="claro"] .texto-corrido{ color:var(--dim); }

/* -----------------------------------------------------------------------------
   LARANJA COMO TEXTO, NO CLARO
   -----------------------------------------------------------------------------
   O #E8621F e a cor da marca e continua sendo ele em tudo que e PREENCHIMENTO:
   botao, chip ligado, degrade do heroi, barra de vagas. Ali o laranja e fundo,
   e quem precisa de contraste e o texto por cima dele, que ja e escuro.

   Como TEXTO sobre a pagina clara a conta se inverte: #E8621F sobre #F5F5F5 da
   3,1 de contraste, e texto pequeno precisa de 4,5. Nao da para so escurecer o
   --brand, porque ele e tambem o fundo dos botoes e escurece-lo apagaria a
   marca na tela inteira. Entao o laranja de TEXTO ganha um tom proprio, um
   degrau abaixo (5,0 de contraste), usado so onde a cor pinta letra.

   O tema escuro nao entra aqui: la o laranja claro sobre o quase-preto ja da
   mais de 7. */
:root[data-tema="claro"]{ --brand-txt:#A93C0B; }
:root[data-tema="claro"] a,
:root[data-tema="claro"] .logo b,
:root[data-tema="claro"] .sec-t a,
:root[data-tema="claro"] .sec-t button.link,
:root[data-tema="claro"] .rotulo em,
:root[data-tema="claro"] .tb.on,
:root[data-tema="claro"] .tb.on:hover,
:root[data-tema="claro"] .resumo.total b,
:root[data-tema="claro"] .entrada .titulo b,
:root[data-tema="claro"] .codigo input.cheio,
:root[data-tema="claro"] .brand,
:root[data-tema="claro"] .selo-cam,
:root[data-tema="claro"] .cam-atalho,
:root[data-tema="claro"] .fp-elenco b,
:root[data-tema="claro"] .fp-acao.on,
:root[data-tema="claro"] .fp-acao.revanche,
:root[data-tema="claro"] .fp-acao.revanche:hover,
:root[data-tema="claro"] .appbar .ico.b.on,
:root[data-tema="claro"] .espera svg,
:root[data-tema="claro"] .revisao-linha.total b,
:root[data-tema="claro"] .ordenar-btn:hover,
:root[data-tema="claro"] .tema-btn:hover,
:root[data-tema="claro"] .tema-ico:hover,
:root[data-tema="claro"] .aviso.nova .aviso-ico,
:root[data-tema="claro"] a.fp-autor:hover,
:root[data-tema="claro"] .fp-seguir,
:root[data-tema="claro"] .fp-nota .estrela,
:root[data-tema="claro"] .fp-quemviu,
:root[data-tema="claro"] .fp-acao[data-acao="nota"].on span,
:root[data-tema="claro"] .fp-vista .vezes b{ color:var(--brand-txt); }

/* A barra de "versao nova" continua com fundo quase preto nos dois temas: ali
   o laranja original e o certo. */
:root[data-tema="claro"] .faixa-versao-btn{ color:var(--brand); }

/* A troca de tema so anima quando a pessoa aperta o botao. Sem esta trava, a
   tela inteira faria um fade no primeiro carregamento. */
html.trocando-tema,
html.trocando-tema body,
html.trocando-tema .app,
html.trocando-tema .card,
html.trocando-tema .appbar,
html.trocando-tema .tabbar{ transition:background-color .22s ease, color .22s ease; }

html { background:var(--fundo); }

/* Barras de rolagem: finas, na cor da marca, sem trilho. No celular elas so
   aparecem enquanto o dedo rola; no desktop ficam discretas no canto. As
   faixas horizontais (chips, dias, vitrine) continuam sem barra - la o gesto
   e arrastar, e a barra so atrapalharia. */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,122,61,.55) transparent; }
*::-webkit-scrollbar{ width:6px; height:6px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--brand),var(--brand-dk)); border-radius:999px; border:1px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--brand-lt); background-clip:padding-box; }
*::-webkit-scrollbar-corner{ background:transparent; }

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--fundo);
  color:var(--txt);
  min-height:100vh;
  min-height:100dvh;
}

a { color:var(--brand); text-decoration:none; }
button, input, select, textarea { font-family:inherit; }

/* ==========================================================================
   Estrutura: coluna do app
   ========================================================================== */

.app{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--ink-900);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

@media (min-width:560px){
  body{ padding:22px 16px; }
  .app{
    min-height:calc(100vh - 44px);
    border-radius:26px;
    border:1px solid var(--line);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
    overflow:hidden;
  }
}

.rolagem{ flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:14px; }

/* Barra superior ----------------------------------------------------------- */

.appbar{
  display:flex; align-items:center; gap:11px;
  padding:14px 16px 10px; flex:none;
  position:sticky; top:0; z-index:40;
  background:var(--barra);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
/* Atencao ao nome: 'linha' tambem e a linha de lista la embaixo (.linha), que
   vem depois nesta folha e tem a mesma especificidade — ela vencia e zerava o
   respiro lateral do topo (padding:12px 0). Por isso o recuo, o espacamento e
   a borda sao declarados de novo aqui: .appbar.linha pesa mais que .linha e
   nao depende mais da ordem das regras. */
.appbar.linha{ padding:14px 16px 10px; gap:11px; border-bottom:1px solid var(--line); }
.appbar h2{ font-size:16px; font-weight:800; letter-spacing:-.02em; flex:1; color:var(--txt); min-width:0; }
.appbar h2 .sm{ font-size:10.5px; color:var(--dim); font-weight:500; display:block; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.voltar{ width:30px; height:30px; border-radius:50%; background:var(--ink-700); display:grid; place-items:center;
  color:var(--txt); flex:none; cursor:pointer; border:0; font-size:17px; line-height:1; padding-bottom:2px; }
.voltar:hover{ background:var(--ink-600); }

.ico{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--txt);
  flex:none; cursor:pointer; border:0; background:transparent; }
.ico.f{ background:var(--ink-700); }
.ico.b{ background:var(--brand); color:#1a0d05; }
.ico:hover{ filter:brightness(1.1); }

.logo{ font-size:19px; font-weight:900; letter-spacing:-.05em; color:var(--txt); }
.logo b{ color:var(--brand); }

/* Chips -------------------------------------------------------------------- */

.chips{ display:flex; gap:7px; padding:4px 16px 12px; overflow-x:auto; scrollbar-width:none; flex:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips.quebra{ flex-wrap:wrap; overflow:visible; }

.chip{ font-size:11.5px; font-weight:600; padding:7px 14px; border-radius:20px; color:var(--dim);
  white-space:nowrap; cursor:pointer; flex:none; border:0; background:transparent; transition:.15s; }
.chip:hover{ color:var(--txt); }
.chip.on{ background:var(--ink-700); color:var(--txt); }
.chip.br{ background:var(--brand); color:#1a0d05; }
.chip[disabled]{ opacity:.32; cursor:not-allowed; }

/* Secoes ------------------------------------------------------------------- */

.sec{ padding:8px 16px 0; }
.sec-t{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; }
.sec-t h3{ font-size:14px; font-weight:800; color:var(--txt); letter-spacing:-.015em; }
.sec-t a, .sec-t button.link{ font-size:11px; color:var(--brand); font-weight:700; background:0; border:0; cursor:pointer; }

.rotulo{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px; }
.rotulo em{ color:var(--brand); letter-spacing:0; text-transform:none; font-weight:700; font-style:normal; }

/* Botoes ------------------------------------------------------------------- */

.btn{ display:block; width:100%; text-align:center; font-size:13.5px; font-weight:700; padding:14px;
  border-radius:12px; background:var(--brand); color:#1a0d05; border:0; cursor:pointer; transition:.15s; }
.btn:hover:not(:disabled){ filter:brightness(1.07); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn.gh{ background:transparent; border:1px solid var(--ink-600); color:var(--txt); }
.btn.gh:hover:not(:disabled){ border-color:var(--brand); }
.btn.wh{ background:#fff; color:#111; }
.btn.mom{ background:var(--mom-g); color:#fff; }
.btn.sm{ padding:10px; font-size:12px; border-radius:10px; }
.btn.perigo{ background:transparent; border:1px solid rgba(255,107,110,.4); color:#FF9295; }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
.btn.carregando{ color:transparent; position:relative; }
.btn.carregando::after{ content:''; position:absolute; inset:0; margin:auto; width:17px; height:17px;
  border:2px solid rgba(26,13,5,.35); border-top-color:#1a0d05; border-radius:50%; animation:girar .7s linear infinite; }
.btn.gh.carregando::after{ border-color:rgba(255,255,255,.25); border-top-color:var(--brand); }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* NUNCA TELA PRETA: O CARREGANDO DA MIDIA
   ---------------------------------------
   Entre pedir o video e existir o primeiro quadro passa um tempo que depende
   da rede, e nesse intervalo um <video> sem capa e um retangulo preto. Preto
   nao informa nada: parece defeito, e a pessoa fecha.

   Esta camada ocupa o lugar do preto e diz o que esta acontecendo, com quanto
   ja baixou quando da para saber. Ela sai por esmaecimento assim que existe
   quadro, entao a troca nao pisca. */
.carregando-midia{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; align-content:center; gap:10px;
  background:#000; color:#fff; text-align:center; padding:12px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  transition:opacity .28s ease-out;
}
.carregando-midia.sumiu{ opacity:0; pointer-events:none; }
.carregando-midia .roda{
  width:30px; height:30px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22); border-top-color:var(--brand);
  animation:girar .8s linear infinite;
}
.carregando-midia .quanto{
  font-size:11px; font-weight:600; color:rgba(255,255,255,.72);
}
.carregando-midia.falhou .roda{ animation:none; border-top-color:rgba(255,255,255,.22); }

/* O medidor do player de replay: um arco que enche de 0 a 100 com o numero no
   meio. Uma roda girando nao diz nada, gira igual aos dois segundos e aos
   quarenta; o arco diz se falta muito. O SVG comeca girado -90 graus para o
   arco nascer no topo, e nao as tres horas. */
.carregando-midia .medidor{ position:relative; width:66px; height:66px;
  display:grid; place-items:center; }
.carregando-midia .medidor svg{ width:100%; height:100%; transform:rotate(-90deg);
  display:block; }
.carregando-midia .medidor circle{ fill:none; stroke-width:3.5; }
.carregando-midia .medidor .trilho{ stroke:rgba(255,255,255,.18); }
.carregando-midia .medidor .arco{ stroke:var(--brand); stroke-linecap:round;
  stroke-dasharray:106.8; stroke-dashoffset:106.8;
  transition:stroke-dashoffset .3s ease-out; }
.carregando-midia .medidor .quanto{ position:absolute; font-style:normal;
  font-size:14px; font-weight:800; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }

/* Sem duracao ainda nao ha fracao para mostrar. O arco vira um risco curto que
   gira, e o numero sai da frente: melhor nao dizer nada do que chutar. */
.carregando-midia.indeterminado .medidor svg{ animation:girarArco .9s linear infinite; }
.carregando-midia.indeterminado .medidor .arco{ stroke-dashoffset:80;
  transition:none; }
.carregando-midia.indeterminado .medidor .quanto{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .carregando-midia.indeterminado .medidor svg{ animation:none; }
}

/* O arco ja nasce girado -90 graus para comecar no topo. A volta tem de sair
   dali e voltar ali, senao cada ciclo daria um salto de 90 graus. */
@keyframes girarArco{ from{ transform:rotate(-90deg); } to{ transform:rotate(270deg); } }

.linha-btn{ display:flex; gap:8px; }
.linha-btn .btn{ flex:1; }

/* Formularios -------------------------------------------------------------- */

.campo{ margin-bottom:11px; }
.campo label{ display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); font-weight:800; margin-bottom:6px; }
.campo input, .campo select, .campo textarea{
  width:100%; background:var(--ink-800); border:1px solid var(--line); border-radius:11px;
  padding:13px; color:var(--txt); font-size:16px; font-weight:600; transition:.15s;
}
.campo textarea{ resize:vertical; min-height:92px; line-height:1.55; font-weight:500; }
/* A dica dentro do campo e dica, nao resposta: precisa ser lida sem ser
   confundida com texto ja digitado. Por isso ela nasce da cor do texto com
   transparencia, e nao de um cinza cravado: assim acompanha o tema e fica
   sempre no mesmo grau de leveza nos dois. */
.campo input::placeholder, .campo textarea::placeholder{
  color:color-mix(in srgb, var(--txt) 42%, transparent); font-weight:500;
}
/* Navegador sem color-mix cai neste, que e a mesma ideia escrita a mao. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .campo input::placeholder, .campo textarea::placeholder{ color:#8a7a70; }
  :root[data-tema="claro"] .campo input::placeholder,
  :root[data-tema="claro"] .campo textarea::placeholder{ color:#9c9086; }
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:0; border-color:var(--brand); background:var(--ink-700); }
.campo input:disabled{ opacity:.55; }
.campo .erro{ display:none; font-size:11px; color:#FF9295; margin-top:6px; font-weight:600; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea{ border-color:rgba(255,107,110,.6); }
.campo.invalido .erro{ display:block; }
.campo .dica{ font-size:10.5px; color:var(--dim3); margin-top:6px; line-height:1.5; }
.campo .contador{ float:right; font-size:9.5px; color:var(--dim3); font-weight:700; letter-spacing:0; text-transform:none; }
/* Campo de data (nascimento). No iPhone o input de data vazio encolhe, centra
   o texto e ganha o visual nativo; aqui ele fica com a mesma altura dos
   outros campos (50 px: 13 + 13 de respiro, 2 de borda e a linha do texto de
   16 px, medido no Chromium e no WebKit) e o texto a esquerda. O seletor do
   sistema continua o nativo. */
.campo input.campo-data{ -webkit-appearance:none; appearance:none; display:block;
  height:50px; line-height:1.2; text-align:left; }
.campo input.campo-data::-webkit-date-and-time-value{ text-align:left; min-height:1.2em; }
.campo input.campo-data::-webkit-calendar-picker-indicator{ opacity:.6; }
:root[data-tema="escuro"] .campo input.campo-data{ color-scheme:dark; }
/* Lembrete leve do perfil ("Complete sua data de nascimento"): um toque,
   sem modal e sem travar nada. */
.pf-lembrete{ display:block; width:100%; margin:0 0 14px; padding:11px 14px; border-radius:12px;
  border:1px dashed var(--line); background:transparent; color:var(--dim); font:inherit;
  font-size:13px; font-weight:700; text-align:left; cursor:pointer; }
.pf-lembrete::after{ content:" \203A"; color:var(--brand); }

.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.dupla.g23{ grid-template-columns:2fr 1fr; }

/* Interruptor -------------------------------------------------------------- */

.switch{ display:flex; align-items:center; gap:12px; background:var(--ink-800); border:1px solid var(--line);
  border-radius:12px; padding:13px 14px; cursor:pointer; }
.switch .txt{ flex:1; }
.switch .txt b{ display:block; font-size:12.5px; font-weight:700; color:var(--txt); }
.switch .txt span{ font-size:10.5px; color:var(--dim); display:block; margin-top:2px; line-height:1.4; }
.switch .trilho{ width:38px; height:22px; border-radius:12px; background:var(--ink-600); position:relative;
  flex:none; transition:.18s; }
.switch .trilho::after{ content:''; position:absolute; left:2px; top:2px; width:18px; height:18px;
  border-radius:50%; background:var(--dim2); transition:.18s; }
.switch.on .trilho{ background:var(--brand); }
.switch.on .trilho::after{ left:18px; background:#fff; }
.switch input{ display:none; }

/* Cartoes ------------------------------------------------------------------ */

.card{ background:var(--ink-800); border:1px solid var(--line); border-radius:var(--raio);
  padding:14px 15px; margin-bottom:11px; }
.card.hi{ border-color:rgba(255,122,61,.4); background:rgba(255,122,61,.07); }
.card.clicavel{ cursor:pointer; transition:.15s; }
.card.clicavel:hover{ border-color:rgba(255,122,61,.45); transform:translateY(-2px); }

.tag{ font-size:8.5px; font-weight:800; letter-spacing:.12em; padding:4px 8px; border-radius:5px;
  background:rgba(255,255,255,.92); color:#111; display:inline-block; }
.tag.o{ background:rgba(255,122,61,.18); color:var(--brand-lt); }
.tag.ok{ background:rgba(52,199,127,.16); color:var(--ok); }
.tag.lv{ background:var(--live); color:#fff; letter-spacing:.06em; }
.tag.mo{ background:rgba(255,61,119,.18); color:#FF6E97; }
.tag.cinza{ background:var(--ink-700); color:var(--dim); }

/* Avatares ----------------------------------------------------------------- */

.av{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12.5px; font-weight:800; color:#1a0d05;
  background:linear-gradient(140deg,var(--brand-lt),var(--brand)); }
.av.p{ background:linear-gradient(140deg,#9B87F5,#6D4AFF); color:#fff; }
.av.g{ background:linear-gradient(140deg,#5BE3B0,#12A97A); color:#04241a; }
.av.b{ background:linear-gradient(140deg,#7FB4FF,#2D7BFF); color:#031634; }
.av.lg{ width:58px; height:58px; font-size:19px; }
.av.mini{ width:28px; height:28px; font-size:9.5px; }

.pilha{ display:flex; align-items:center; }
.pilha .av + .av{ margin-left:-8px; border:2px solid var(--ink-800); }
.pilha .vaga{ width:28px; height:28px; border-radius:50%; background:var(--ink-700);
  border:1px dashed var(--brand); display:grid; place-items:center; font-size:13px;
  color:var(--brand); margin-left:-8px; flex:none; }

/* Linhas de lista ---------------------------------------------------------- */

.linha{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.linha:last-child{ border-bottom:0; }
.linha .txt{ flex:1; min-width:0; }
.linha .txt h5{ font-size:13px; font-weight:700; color:var(--txt); letter-spacing:-.01em; }
.linha .txt p{ font-size:11px; color:var(--dim); margin-top:2px; line-height:1.45; }
.linha .fim{ font-size:11.5px; color:var(--dim); text-align:right; flex:none; }
.linha .fim b{ display:block; font-size:13px; color:var(--txt); font-weight:700; }

/* Numeros ------------------------------------------------------------------ */

.numeros{ display:flex; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.num{ text-align:center; flex:1; }
.num b{ display:block; font-size:17px; font-weight:800; color:var(--txt); letter-spacing:-.02em; }
.num span{ font-size:9.5px; color:var(--dim); font-weight:600; }

.barra{ height:6px; border-radius:3px; background:var(--ink-700); overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--brand); border-radius:3px; transition:width .3s; }

/* Grades de horario -------------------------------------------------------- */

.grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
@media (min-width:420px){ .grade{ grid-template-columns:repeat(4,1fr); } }

.slot{ border:1px solid var(--ink-600); border-radius:11px; padding:10px 4px; text-align:center;
  font-size:12.5px; font-weight:700; color:var(--txt); cursor:pointer; background:transparent; transition:.15s; }
.slot small{ display:block; font-size:9px; color:var(--dim); font-weight:600; margin-top:3px; }
.slot:hover:not(:disabled){ border-color:var(--brand); }
.slot.on{ background:var(--brand); color:#1a0d05; border-color:var(--brand); }
.slot.on small{ color:rgba(26,13,5,.72); }
.slot.aberta{ border-color:rgba(255,122,61,.5); background:rgba(255,122,61,.09); }
.slot.aberta small{ color:var(--brand-lt); }
.slot:disabled{ opacity:.3; cursor:not-allowed; }
.slot:disabled small{ text-decoration:none; }
.slot.ocupado{ text-decoration:line-through; }

/* O meu jogo. Preenchido, e nao apenas contornado como o "faltam N": olhando
   a grade de longe, o que e meu tem que saltar antes do que esta disponivel. */
.slot.meu{ border-color:var(--brand); background:rgba(255,122,61,.16); color:var(--txt); }
.slot.meu small{ color:var(--brand-lt); }
.slot.meu:hover:not(:disabled){ background:rgba(255,122,61,.24); }

/* O horario que esta rolando agora.
   
   Vermelho e piscando, como o ao vivo da camera e a etiqueta do jogo em
   andamento: e um estado que muda sozinho, e quem passa o olho pela grade
   precisa perceber isso sem ler. O ponto pulsa porque a grade inteira e
   estatica, e movimento e a unica coisa que o olho procura sozinho.
   
   Este botao NAO fica desligado: e justamente na primeira meia hora de jogo
   que costuma faltar gente, e este e o unico lugar onde quem esta de fora
   descobre isso. O clique leva a tela da partida, onde o "quero jogar" vira
   pedido para quem organizou. */
.slot.rolando{
  border-color:var(--live); background:rgba(229,37,42,.12); color:var(--txt);
}
.slot.rolando:hover:not(:disabled){ background:rgba(229,37,42,.2); border-color:var(--live); }
.slot.rolando small{ color:var(--live); font-weight:700; }
.slot.rolando small::before{
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--live); margin-right:4px; vertical-align:middle;
  animation:pulsoSlot 1.8s ease-out infinite;
}
@keyframes pulsoSlot{
  0%{ box-shadow:0 0 0 0 rgba(229,37,42,.7); }
  70%{ box-shadow:0 0 0 6px rgba(229,37,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,37,42,0); }
}

.dias{ display:flex; gap:8px; padding:4px 0 16px; overflow-x:auto; scrollbar-width:none; }
.dias::-webkit-scrollbar{ display:none; }
.dia{ border:1px solid var(--ink-600); border-radius:12px; padding:9px 13px; text-align:center; flex:none;
  cursor:pointer; background:transparent; color:var(--dim); font-size:10px; font-weight:700;
  letter-spacing:.08em; transition:.15s; }
.dia b{ display:block; font-size:15px; color:var(--txt); font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.dia.on{ background:var(--brand); border-color:var(--brand); color:rgba(26,13,5,.72); }
.dia.on b{ color:#1a0d05; }
.dia:disabled{ opacity:.3; cursor:not-allowed; }

/* Vitrine ------------------------------------------------------------------ */

.vitrine{ display:flex; gap:12px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory; scroll-padding-inline:16px; }
.vitrine::-webkit-scrollbar{ display:none; }

.destaque{ width:min(74%, 262px); min-width:214px; flex:none; border-radius:18px; overflow:hidden; position:relative; height:320px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px; background:var(--hero);
  box-shadow:var(--glow); cursor:pointer; scroll-snap-align:start; }
.destaque.roxo{ background:var(--hero-p); box-shadow:none; }
.destaque.verde{ background:var(--hero-g); box-shadow:none; }
.destaque .veu{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.84),transparent 62%); }
.destaque .selo{ position:absolute; top:13px; left:13px; background:rgba(0,0,0,.55); color:#fff;
  font-size:10px; font-weight:700; padding:6px 11px; border-radius:20px;
  border:1px solid rgba(255,255,255,.16); z-index:3; }
.destaque .conteudo{ position:relative; z-index:3; }
.destaque h4{ font-size:18px; font-weight:900; letter-spacing:-.03em; color:#fff; margin-bottom:4px; }
.destaque p{ font-size:11px; color:rgba(255,255,255,.82); margin-bottom:10px; }
.destaque .preco{ font-size:11.5px; color:rgba(255,255,255,.86); margin-bottom:12px; }
.destaque .preco b{ font-size:17px; color:#fff; font-weight:800; }

.pontos{ display:flex; gap:5px; justify-content:center; padding:14px 0 8px; }
.pontos i{ width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.22); transition:.2s; }
.pontos i.on{ width:17px; background:var(--brand); }

.trilha{ display:flex; gap:10px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none; }
.trilha::-webkit-scrollbar{ display:none; }
.trilha .card{ width:min(52%, 196px); min-width:164px; flex:none; margin:0; }

.quadra-svg{ position:absolute; inset:0; width:100%; height:100%; }
.miniatura{ border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--ink-700),var(--ink-800)); flex:none; }

/* Mapa (Leaflet) ----------------------------------------------------------- */

.mapa{ height:172px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--mapa); position:relative; z-index:1; }
.mapa.alto{ height:230px; }
.mapa.editavel{ cursor:crosshair; }
.leaflet-container{ background:var(--mapa) !important; font-family:Inter,sans-serif !important; }
.leaflet-control-attribution{ background:var(--barra) !important; color:var(--dim3) !important; font-size:9px !important; }
.leaflet-control-attribution a{ color:var(--dim2) !important; }
.leaflet-bar a{ background:var(--ink-800) !important; color:var(--txt) !important;
  border-color:var(--ink-600) !important; }
.leaflet-bar a:hover{ background:var(--ink-700) !important; }
.pino{ width:28px; height:28px; border-radius:50% 50% 50% 2px; transform:rotate(-45deg);
  background:var(--brand); border:2px solid #1a0d05; box-shadow:0 4px 12px rgba(0,0,0,.6);
  display:grid; place-items:center; }
.pino span{ transform:rotate(45deg); font-size:10px; font-weight:900; color:#1a0d05; }
.pino.aberta{ background:var(--brand-lt); }

/* Barra inferior ----------------------------------------------------------- */

.tabbar{ margin-top:auto; display:flex; justify-content:space-around; align-items:center;
  padding:10px 6px calc(12px + env(safe-area-inset-bottom)); background:var(--barra);
  border-top:1px solid var(--line); backdrop-filter:blur(14px); flex:none;
  position:sticky; bottom:0; z-index:45; }
/* Cada aba ocupa a mesma fatia da barra, e nunca mais do que a sua.
   
   Com cinco abas o space-around dava conta; na sexta o rotulo mais longo
   ("FeedPlay") empurrava as vizinhas e a barra passava da largura do celular.
   Com flex:1 e min-width:0 a divisao e sempre em partes iguais, e o rotulo
   que nao couber e cortado com reticencias em vez de entortar a barra. */
.tb{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:8.5px; color:var(--dim);
  font-weight:600; cursor:pointer; background:0; border:0; padding:2px 2px; transition:.15s;
  flex:1 1 0; min-width:0; }
.tb span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb.on{ color:var(--brand); }
.tb:hover{ color:var(--txt); }
.tb.on:hover{ color:var(--brand); }
.tb svg{ width:19px; height:19px; }

/* Folha deslizante --------------------------------------------------------- */

.sobreposicao{ position:fixed; inset:0; background:var(--veu); backdrop-filter:blur(4px);
  z-index:900; display:none; align-items:flex-end; justify-content:center; }
.sobreposicao.on{ display:flex; animation:aparecer .18s ease; }
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }

/* O <video> nao pode ficar debaixo de um backdrop-filter: no WebKit do
   iPhone a camada do filtro pode engolir o quadro e sobra um retangulo
   preto, com o video tocando e o tempo correndo. Estas duas folhas sao as
   unicas que tem video dentro, entao so elas trocam o desfoque por um veu
   solido. O resto do app continua com o desfoque. Usa a mesma variavel
   --veu do resto do app (ja tem valor proprio para o tema claro e o
   escuro) em vez de uma cor fixa, para o veu continuar coerente nos dois
   temas. */
#folhaCamera, #folhaEstudio{ backdrop-filter:none; -webkit-backdrop-filter:none;
  background:var(--veu); }

.folha{ width:100%; max-width:var(--largura); background:var(--ink-800); border-radius:22px 22px 0 0;
  padding:16px 16px calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
  box-shadow:0 -22px 50px rgba(0,0,0,.7); max-height:88vh; overflow-y:auto;
  animation:subir .24s cubic-bezier(.2,.9,.3,1); }
@keyframes subir{ from{ transform:translateY(26px); } to{ transform:translateY(0); } }
@media (min-width:560px){ .sobreposicao.on{ align-items:center; } .folha{ border-radius:22px; max-height:84vh; } }

.pega{ width:36px; height:4px; border-radius:3px; background:var(--ink-600); margin:0 auto 16px; }
.folha h3{ font-size:16px; font-weight:800; letter-spacing:-.02em; margin-bottom:4px; }
.folha .sub{ font-size:11.5px; color:var(--dim); margin-bottom:16px; line-height:1.5; }

.resumo{ display:flex; justify-content:space-between; font-size:12.5px; padding:7px 0; color:var(--dim); }
.resumo b{ color:var(--txt); font-weight:700; }
.resumo.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-size:14px; }
.resumo.total b{ font-size:17px; color:var(--brand); }

/* Avisos ------------------------------------------------------------------- */

.aviso{ border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.55; margin-bottom:12px;
  display:flex; gap:10px; align-items:flex-start; }
.aviso b{ display:block; font-size:13px; margin-bottom:2px; }
.aviso.erro{ background:rgba(255,107,110,.1); border:1px solid rgba(255,107,110,.32); color:#FFC7C8; }
.aviso.ok{ background:rgba(52,199,127,.12); border:1px solid rgba(52,199,127,.35); color:#BCEFD6; }
.aviso.info{ background:rgba(255,122,61,.09); border:1px solid rgba(255,122,61,.3); color:#FFD2B4; }
.aviso.escondido{ display:none; }

.torrada{ position:fixed; left:50%; transform:translateX(-50%); bottom:88px; z-index:950;
  max-width:calc(var(--largura) - 32px); width:calc(100% - 32px);
  border-radius:13px; padding:13px 15px; font-size:12.5px; font-weight:600; line-height:1.5;
  box-shadow:0 18px 40px rgba(0,0,0,.6); backdrop-filter:blur(10px);
  animation:subir .22s cubic-bezier(.2,.9,.3,1); }
.torrada.ok{ background:rgba(52,199,127,.16); border:1px solid rgba(52,199,127,.42); color:#CFF5E4; }
.torrada.erro{ background:rgba(255,107,110,.16); border:1px solid rgba(255,107,110,.42); color:#FFD5D6; }

/* Estados vazios e carregamento -------------------------------------------- */

.vazio{ text-align:center; padding:44px 22px; }
.vazio .simbolo{ width:60px; height:60px; border-radius:18px; background:var(--ink-800);
  border:1px solid var(--line); display:grid; place-items:center; margin:0 auto 16px; }
.vazio h4{ font-size:15px; font-weight:800; color:var(--txt); margin-bottom:6px; letter-spacing:-.02em; }
.vazio p{ font-size:12.5px; color:var(--dim); line-height:1.6; max-width:280px; margin:0 auto 18px; }
.vazio .btn{ max-width:250px; margin:0 auto; }

/* ==========================================================================
   MEU TIME: a espera
   ==========================================================================

   A aba existe antes do conteudo de proposito, para o lugar dela no menu nao
   mudar depois. So que "em construcao" nao e promessa nenhuma: quem abre uma
   aba vazia merece saber o que vem, e e isso que esta tela conta. */

.tm-espera{ padding:34px 20px 40px; max-width:440px; margin:0 auto; text-align:center; }

.tm-brasao{ position:relative; width:132px; height:132px; margin:0 auto 20px; }
.tm-brasao .tm-anel{
  position:absolute; inset:0; width:100%; height:100%;
  animation:tmGira 26s linear infinite;
}
.tm-brasao .tm-escudo{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:62px; height:auto;
  filter:drop-shadow(0 6px 18px rgba(255,122,61,.28));
}
@keyframes tmGira{ to{ transform:rotate(360deg); } }

.tm-titulo{ font-size:19px; font-weight:900; letter-spacing:-.03em; color:var(--txt); margin-bottom:8px; }
.tm-linha{ font-size:13px; line-height:1.65; color:var(--dim); margin:0 auto 20px; max-width:340px; }

/* O ao vivo vem numa moldura propria porque e a novidade grande, e nao mais
   um item de lista. Vermelho, como todo estado que acontece agora. */
.tm-vivo{
  border:1px solid rgba(229,37,42,.4); background:rgba(229,37,42,.07);
  border-radius:16px; padding:15px 16px; margin-bottom:20px; text-align:left;
}
.tm-vivo .tag{ margin-bottom:9px; }
.tm-vivo b{ display:block; font-size:13.5px; font-weight:800; color:var(--txt);
  letter-spacing:-.01em; margin-bottom:4px; }
.tm-vivo span{ display:block; font-size:12px; line-height:1.6; color:var(--dim); }

.tm-lista{ list-style:none; text-align:left; display:grid; gap:2px; }
.tm-lista li{
  position:relative; padding:11px 2px 11px 20px;
  font-size:12px; line-height:1.6; color:var(--dim);
  border-bottom:1px solid var(--line);
}
.tm-lista li:last-child{ border-bottom:0; }
.tm-lista li::before{
  content:''; position:absolute; left:4px; top:17px;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}
.tm-lista b{ display:block; font-size:13px; font-weight:800; color:var(--txt);
  letter-spacing:-.01em; margin-bottom:2px; }

.tm-rodape{ margin-top:18px; font-size:11.5px; color:var(--dim); letter-spacing:.02em; }

@media (min-width:900px){
  .tm-lista{ grid-template-columns:1fr 1fr; gap:0 18px; }
}

/* A caixa dos avisos no aparelho (ver push.js). Some inteira quando o
   navegador nao tem suporte, entao nunca sobra um titulo orfao na tela. */
/* O botao do app e largo por padrao (width:100%). Dentro de uma linha flex
   isso o fazia ocupar a caixa inteira e espremer o texto numa coluna de uma
   palavra por linha, com o botao por cima. Aqui ele volta ao tamanho do
   proprio rotulo, e em tela estreita desce para a linha de baixo. */
.push-caixa{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.push-txt{ flex:1 1 190px; min-width:0; }
.push-txt b{ display:block; font-size:13.5px; font-weight:800; color:var(--txt);
  letter-spacing:-.01em; margin-bottom:3px; }
.push-txt span{ display:block; font-size:11.5px; line-height:1.6; color:var(--dim); }
.push-caixa .btn{ flex:0 0 auto; width:auto; min-width:112px; padding-left:18px; padding-right:18px; margin-left:auto; }

.esqueleto{ background:linear-gradient(90deg,var(--ink-800) 25%,var(--ink-700) 50%,var(--ink-800) 75%);
  background-size:200% 100%; animation:brilho 1.3s infinite; border-radius:var(--raio); }
@keyframes brilho{ to{ background-position:-200% 0; } }

/* Cabecalho com capa ------------------------------------------------------- */

.capa{ position:relative; height:170px; min-height:170px; flex:none; overflow:hidden; }
.capa .fundo{ position:absolute; inset:0; background:var(--hero); }
.capa .veu{ position:absolute; inset:0; background:linear-gradient(to top,var(--ink-900),transparent 66%); }
.capa .voltar{ position:absolute; top:14px; left:14px; background:rgba(0,0,0,.5); z-index:5; }
.capa .acoes{ position:absolute; top:14px; right:14px; display:flex; gap:8px; z-index:5; }
.capa .acoes .ico{ background:rgba(0,0,0,.5); }
.capa.baixa{ height:118px; min-height:118px; }

.sobreposto{ margin-top:-32px; position:relative; z-index:4; padding:0 16px 16px; }

.marca{ width:52px; height:52px; border-radius:14px; background:linear-gradient(150deg,#FFB067,#E0521C);
  display:grid; place-items:center; font-size:20px; font-weight:900; color:#2a1206; flex:none; }

/* Entrada (login e cadastro) ----------------------------------------------- */

.entrada{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 20px calc(28px + env(safe-area-inset-bottom)); overflow-y:auto; }
.entrada .fundo{ position:absolute; inset:0; background:var(--hero); opacity:.9; }
.entrada .veu{ position:absolute; inset:0;
  background:linear-gradient(to top,var(--fundo) 34%,transparent); }
.entrada .conteudo{ position:relative; z-index:5; }
.entrada .titulo{ font-size:36px; font-weight:900; letter-spacing:-.05em; color:#fff; line-height:1.02; }
.entrada .titulo b{ color:var(--brand); }
.entrada .promessa{ font-size:15px; color:rgba(255,255,255,.82); margin:12px 0 30px; line-height:1.5; font-weight:500; }
.entrada .rodape{ font-size:10px; color:var(--dim3); text-align:center; margin-top:18px; line-height:1.55; }
.entrada .rodape a{ color:var(--dim2); text-decoration:underline; }

/* Codigo de verificacao ---------------------------------------------------- */

.codigo{ display:flex; gap:8px; justify-content:center; margin:6px 0 20px; }
.codigo input{ width:46px; height:58px; text-align:center; font-size:23px; font-weight:800;
  background:var(--ink-800); border:1px solid var(--ink-600); border-radius:12px; color:var(--txt);
  transition:.15s; padding:0; }
.codigo input:focus{ outline:0; border-color:var(--brand); background:var(--ink-700); }
.codigo input.cheio{ border-color:rgba(255,122,61,.55); color:var(--brand); }
@media (max-width:360px){ .codigo input{ width:40px; height:52px; font-size:20px; } }

.contagem{ text-align:center; font-size:12px; color:var(--dim); margin-bottom:16px; }
.contagem b{ color:var(--txt); font-weight:700; }

/* Passos ------------------------------------------------------------------- */

.passos{ padding:0 16px 14px; flex:none; }
.passos .barra{ height:5px; }

/* Painel do dono ----------------------------------------------------------- */

.destaque-numero{ font-size:30px; font-weight:900; color:var(--txt); letter-spacing:-.03em; margin:7px 0 4px; }
.mini-grafico{ display:flex; gap:3px; height:54px; align-items:flex-end; margin-top:15px; }
.mini-grafico span{ flex:1; background:var(--brand); border-radius:3px 3px 0 0; min-height:3px; }
.eixo{ display:flex; justify-content:space-between; font-size:9px; color:var(--dim); margin-top:7px; }

.ocupacao{ margin-bottom:13px; }
.ocupacao:last-child{ margin-bottom:0; }
.ocupacao .topo{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--txt);
  font-weight:600; margin-bottom:6px; }

/* Grade larga em telas grandes --------------------------------------------- */

@media (min-width:900px){
  :root{ --largura:940px; }
  .colunas{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
  .colunas > .largura-cheia{ grid-column:1 / -1; }
  .destaque{ height:340px; }


  /* Os cartoes de jogo sao feitos para a largura de um celular. Numa coluna de
     940px, um por linha vira uma faixa larga e vazia; lado a lado eles voltam
     ao tamanho de leitura e cabem mais na tela. Vale para a faixa da inicial e
     para a lista da aba Jogos.

     A regra pede a classe, e nao o id: o FeedPlay tambem tem um #lista, que e
     a area de rolagem do rolo, e virar grade ali quebrava o feed inteiro. */
  .grade-jogos{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:10px; align-items:start;
  }
  .grade-jogos > .card{ margin-bottom:0; }
}

/* Utilitarios -------------------------------------------------------------- */

.centro{ text-align:center; }
.entre{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.oculto{ display:none !important; }
.p16{ padding-left:16px; padding-right:16px; }
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.mb8{ margin-bottom:8px; } .mb12{ margin-bottom:12px; } .mb16{ margin-bottom:16px; }
.dim{ color:var(--dim); }
.brand{ color:var(--brand); }
.ok{ color:var(--ok); }
.pequeno{ font-size:11px; line-height:1.55; }
.texto-corrido{ font-size:12.5px; color:#C9BAB0; line-height:1.65; }

/* ==========================================================================
   Faixa de versão nova
   --------------------------------------------------------------------------
   Topo, centralizada, na laranja da marca. Fica acima de tudo (inclusive das
   folhas deslizantes) porque é um recado sobre o app inteiro, não sobre a
   tela em que a pessoa está.

   Ela entra deslizando de cima e não some sozinha: sair da tela é
   consequência de atualizar, não de esperar. A única exceção é a confirmação
   pós-recarga (.ok), que é informativa e se retira depois de alguns segundos.

   O respiro do topo respeita o entalhe do iPhone via safe-area-inset.
   ========================================================================== */

.faixa-versao{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  left:50%;
  transform:translate(-50%,-140%);
  z-index:1000;

  display:flex; align-items:center; gap:12px;
  max-width:min(calc(100vw - 24px), 440px);
  padding:12px 14px;
  border-radius:14px;

  background:var(--brand);
  color:#1a0d05;
  box-shadow:0 16px 38px -12px rgba(255,122,61,.55), 0 2px 8px rgba(0,0,0,.35);

  font-size:13px; font-weight:700; line-height:1.4;
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
}

.faixa-versao.on{ transform:translate(-50%,0); opacity:1; }

.faixa-versao-texto{ flex:1; min-width:0; }

.faixa-versao-btn{
  flex:none; border:0; cursor:pointer;
  background:#1a0d05; color:var(--brand);
  font-family:inherit; font-size:12.5px; font-weight:800;
  padding:9px 15px; border-radius:9px;
  transition:.15s;
}
.faixa-versao-btn:hover{ background:#2a1a10; }
.faixa-versao-btn:active{ transform:translateY(1px); }

/* Confirmação depois da recarga: verde, sem botão, sai sozinha. */
.faixa-versao.ok{
  background:var(--ok);
  color:#04241a;
  box-shadow:0 16px 38px -12px rgba(52,199,127,.5), 0 2px 8px rgba(0,0,0,.35);
}

/* Desistência honesta: vermelho, sem botão, fica um pouco mais. */
.faixa-versao.erro{
  background:#3a1414;
  color:#ffd9d3;
  border:1px solid rgba(255,107,107,.45);
  box-shadow:0 16px 38px -12px rgba(255,107,107,.35), 0 2px 8px rgba(0,0,0,.35);
  font-weight:600;
}

@media (max-width:400px){
  .faixa-versao{ font-size:12.5px; padding:11px 12px; gap:10px; }
  .faixa-versao-btn{ padding:8px 12px; font-size:12px; }
}

/* ==========================================================================
   Tamanho mínimo do texto digitável
   --------------------------------------------------------------------------
   O Safari do iPhone dá zoom na página inteira quando o foco cai num campo
   com fonte menor que 16px. O usuário toca no e-mail, a tela salta, ele
   digita torto e precisa dar pinça para voltar. Não é preferência estética:
   16px é o limiar que desliga esse comportamento.

   A regra vale para tudo que se digita ou se escolhe, inclusive os campos
   com estilo embutido no HTML - por isso o !important, que aqui não é
   preguiça e sim o único jeito de vencer um `style=` inline.

   O que fica de fora: caixas de marcar, botões de rádio, seletor de cor e
   controle deslizante, que não recebem texto e não disparam o zoom.
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea{
  font-size:16px !important;
}

/* O campo do código de verificação é maior de propósito e continua assim. */
.codigo input{ font-size:23px !important; }

@media (max-width:360px){
  .codigo input{ font-size:20px !important; }
}

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   Rodapé preso na borda de baixo
   ==========================================================================

   A coluna do app tinha altura MÍNIMA de uma tela. Quando o conteúdo passava
   disso, a coluna crescia junto, a página inteira virava o elemento que rola
   e a .tabbar — sticky dentro dela — descia junto até o fim do documento.
   Por isso a barra só aparecia depois de rolar.

   Com altura FIXA de uma tela, quem rola é só a .rolagem, por dentro, e a
   barra fica sempre encostada embaixo. O min-height:0 é o que permite isso:
   sem ele, o tamanho mínimo automático do flex faz a .rolagem esticar até o
   tamanho do conteúdo em vez de criar a própria rolagem. */

.app{
  height:100vh;   /* navegador sem dvh */
  height:100dvh;  /* desconta a barra do Safari/Chrome no celular */
  max-height:100dvh;
}

.rolagem{ min-height:0; }

@media (min-width:560px){
  .app{
    height:calc(100vh - 44px);
    height:calc(100dvh - 44px);
    max-height:calc(100dvh - 44px);
  }
}

/* Foto no botão de perfil da barra de cima -------------------------------- */

.ico.foto{
  overflow:hidden; padding:0;
  font-size:11px; font-weight:800; letter-spacing:-.02em;
  background:var(--ink-700); color:var(--txt);
}
.ico.foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   Mapa: controles proprios
   ==========================================================================

   O zoom padrao do Leaflet e o rodape de creditos saiam do lugar dentro de um
   mapa de 172px de altura. No lugar deles: um botao de tela cheia e o credito
   dobrado atras de um "i" — dobrado, e nao removido, porque quem serve as
   telas de fundo exige a citacao. */

.mapa-ctrl{
  width:28px; height:28px; border-radius:9px;
  display:grid; place-items:center;
  border:1px solid var(--ink-600); background:var(--barra);
  color:var(--txt); cursor:pointer; padding:0;
  backdrop-filter:blur(8px); box-shadow:0 3px 10px rgba(0,0,0,.45);
  transition:.15s;
}
.mapa-ctrl:hover{ background:var(--ink-700); }
.mapa-ctrl svg{ width:15px; height:15px; }
.mapa-ctrl.pequena{ width:20px; height:20px; border-radius:7px; font-size:10px; font-weight:800; font-style:italic; }

.mapa-dia .mapa-ctrl{ background:rgba(255,255,255,.9); color:#2A211C; border-color:rgba(0,0,0,.14); }
.mapa-dia .mapa-ctrl:hover{ background:#fff; }

.leaflet-top.leaflet-right{ padding:8px; }
.leaflet-bottom.leaflet-right{ padding:8px; }

.mapa-credito{ display:flex; align-items:center; gap:6px; }
.mapa-credito span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:9px; color:var(--dim2); line-height:1.4;
  opacity:0; transition:opacity .22s ease;
  padding:0; border-radius:6px; background:var(--barra);
}
/* Aberto: o texto inteiro, quebrando linha em vez de cortar (o credito da
   Esri nao cabe em uma linha de 220px). So a opacidade anima. */
.mapa-credito.aberto span{ max-width:min(260px, calc(100vw - 72px)); padding:3px 7px; white-space:normal; text-align:right; opacity:1; }
@media (prefers-reduced-motion: reduce){ .mapa-credito span{ transition:none; } }
.mapa-dia .mapa-credito span{ color:#5A5049; background:rgba(255,255,255,.9); }

/* Tela cheia por CSS: o Safari do iPhone nao abre <div> em fullscreen. */
.mapa.cheio{
  position:fixed; inset:0; z-index:1200;
  width:100%; height:100vh; height:100dvh;
  max-height:none; border-radius:0; border:0;
}
body.com-mapa-cheio{ overflow:hidden; }

/* ==========================================================================
   Carrossel: setas de anterior e proximo
   ==========================================================================

   O carrossel continua sendo um contentor que rola — as setas so empurram o
   scrollLeft. Quem tem dedo continua arrastando; quem tem mouse ganha os dois
   botoes. Cada seta some sozinha quando nao ha mais para onde ir daquele
   lado, e as duas somem quando tudo ja cabe na tela. */

.carrossel{ position:relative; }

.seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; z-index:5;
  border:1px solid var(--ink-600); background:var(--barra); color:var(--txt);
  cursor:pointer; padding:0; backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.55); transition:.15s;
}
.seta:hover{ background:var(--ink-700); transform:translateY(-50%) scale(1.06); }
.seta svg{ width:17px; height:17px; }
.seta.ant{ left:6px; }
.seta.prox{ right:6px; }

.carrossel.sem-setas .seta{ display:none; }

/* Sem ponteiro que passeia — celular e tablet — o arrasto ja resolve e as
   setas so tapariam o conteudo. */
@media (hover:none){
  .seta{ display:none; }
}

/* O .leaflet-container la em cima pinta o fundo com !important, entao a tela
   clara precisa da mesma forca - senao a borda de carregamento fica preta. */
.mapa.mapa-dia.leaflet-container{ background:#E9E9E7 !important; }

/* ==========================================================================
   Modal de confirmacao
   ==========================================================================

   O confirm() do navegador estampa o dominio em cima da pergunta e ignora
   qualquer estilo. Dentro de um app instalado na tela inicial, ele denuncia
   que aquilo ali e uma pagina. Esta caixa faz o mesmo trabalho com a cara do
   app. */

.modal-fundo{
  position:fixed; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:var(--veu); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .16s ease;
}
.modal-fundo.on{ opacity:1; }

.modal-caixa{
  width:100%; max-width:330px;
  background:var(--ink-800); border:1px solid var(--line); border-radius:20px;
  padding:20px 18px 16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  transform:translateY(10px) scale(.98); transition:transform .18s ease;
}
.modal-fundo.on .modal-caixa{ transform:none; }

.modal-caixa h4{ font-size:15.5px; font-weight:900; letter-spacing:-.02em; color:var(--txt); }
.modal-caixa p{ font-size:12.5px; line-height:1.6; color:var(--dim); margin-top:7px; }
.modal-acoes{ display:flex; gap:9px; margin-top:18px; }
.modal-acoes .btn{ flex:1; }
.btn.perigo{ background:#E5484D; color:#fff; }
.btn.perigo:hover{ filter:brightness(1.08); }

/* ==========================================================================
   Pino do mapa
   ==========================================================================

   O antigo era um quadrado girado 45 graus. Este e uma gota de verdade, com
   contorno escuro para nao sumir na tela clara do dia e uma casa redonda no
   meio - onde entram as iniciais da arena ou, quando ela tem, a foto. */

.pin{ position:relative; width:36px; height:46px; filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
.pin svg{ width:36px; height:46px; display:block; }
.pin svg path{ fill:var(--brand); stroke:#1a0d05; stroke-width:2.4; stroke-linejoin:round; }
.pin svg circle{ fill:#1a0d05; opacity:.16; }
.pin.vaga svg path{ fill:var(--brand-lt); }

.pin b{
  position:absolute; top:9px; left:0; width:36px; text-align:center;
  font-size:11px; font-weight:900; letter-spacing:-.03em; color:#1a0d05;
}
.pin img{
  position:absolute; top:7px; left:8px; width:20px; height:20px;
  border-radius:50%; object-fit:cover; border:1.5px solid #1a0d05; background:#1a0d05;
}

/* Arena com vaga aberta agora pulsa devagar, para o olho achar sozinho. */
.pin.vaga::before{
  content:''; position:absolute; left:6px; top:5px; width:24px; height:24px;
  border-radius:50%; border:2px solid var(--brand-lt); opacity:.7;
  animation:pulsoPino 2s ease-out infinite;
}
@keyframes pulsoPino{
  0%{ transform:scale(.75); opacity:.75; }
  70%{ transform:scale(1.6); opacity:0; }
  100%{ opacity:0; }
}

/* ==========================================================================
   Balao do pino
   ========================================================================== */

.leaflet-popup-content-wrapper{
  background:var(--ink-800) !important; color:var(--txt) !important;
  border:1px solid var(--line) !important; border-radius:16px !important;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.85) !important;
}
.leaflet-popup-content{ margin:13px 14px !important; width:auto !important; }
.leaflet-popup-tip{ background:var(--ink-800) !important; border:1px solid var(--line) !important; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--dim) !important; padding:7px 8px 0 0 !important; }
.leaflet-container a.leaflet-popup-close-button:hover{ color:var(--txt) !important; }

.balao{ min-width:186px; }
.balao strong{ display:block; font-size:13.5px; font-weight:900; letter-spacing:-.02em; color:var(--txt); }
.balao span{ display:block; font-size:11.5px; color:var(--dim); margin-top:3px; line-height:1.5; }
.balao-acoes{ display:flex; gap:7px; margin-top:12px; }
.balao-acoes .btn{ flex:1; padding:9px 10px; font-size:11.5px; text-align:center; text-decoration:none; }

/* ==========================================================================
   Arte de story
   ==========================================================================

   A previa e o proprio canvas de 1080x1920 encolhido por CSS - nao existe uma
   segunda arte "de mentira" para manter em sincronia com a de verdade. O que
   a pessoa ve e exatamente o arquivo que vai sair. */

.story-fundo{
  position:fixed; inset:0; z-index:1500;
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--veu); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .16s ease;
}
.story-fundo.on{ opacity:1; }

.story-caixa{
  width:100%; max-width:var(--largura);
  background:var(--ink-800); border:1px solid var(--line);
  border-radius:22px 22px 0 0;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:92dvh; overflow-y:auto;
  transform:translateY(18px); transition:transform .2s ease;
}
.story-fundo.on .story-caixa{ transform:none; }

.story-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.story-topo h4{ font-size:15px; font-weight:900; letter-spacing:-.02em; color:var(--txt); }
.story-topo .ico{ font-size:19px; line-height:1; }

.story-corpo{ display:flex; gap:14px; align-items:flex-start; }
.story-tela{
  width:126px; height:auto; flex:none;
  border-radius:12px; border:1px solid var(--line); background:var(--ink-900);
}
.story-campos{ flex:1; min-width:0; }
.story-temas{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.story-campos .campo{ margin-bottom:10px; }

.story-acoes{ display:flex; gap:9px; margin-top:16px; }
.story-acoes .btn{ flex:1; }

.story-btn{ width:auto; margin-top:12px; padding:9px 13px; font-size:11.5px; }

@media (min-width:560px){
  .story-fundo{ align-items:center; }
  .story-caixa{ border-radius:22px; padding-bottom:18px; }
  .story-tela{ width:150px; }
}

/* ==========================================================================
   Logo da arena no lugar das iniciais
   ==========================================================================

   O quadradinho com as duas letras e o retrato provisorio da arena. Assim que
   ela manda uma logo, o mesmo quadrado passa a mostrar a imagem - no cabecalho
   da ficha, no painel do dono e dentro do pino do mapa. */

.marca.com-foto{ overflow:hidden; padding:0; background:var(--ink-700); }
.marca.com-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

.av.com-foto{ overflow:hidden; background:var(--ink-700); }
.av.com-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   Pino maior e balao com a foto
   ==========================================================================

   O pino de 36px sumia no mapa do celular, ainda mais com a foto dentro. Este
   tem 50 por 64, e a casa redonda do meio cresceu junto - de longe da pra ver
   de quem e a arena antes mesmo de tocar. */

.pin{ width:50px; height:64px; }
.pin svg{ width:50px; height:64px; }

.pin b{ top:13px; width:50px; font-size:14px; }

.pin img{ top:10px; left:11px; width:28px; height:28px; border-width:2px; }

.pin.vaga::before{ left:8px; top:6px; width:34px; height:34px; }

/* No balao a foto aparece em tamanho de olhar, e nao de miniatura. */
.balao{ min-width:206px; }
.balao-foto{
  width:100%; height:116px; object-fit:cover; display:block;
  border-radius:12px; margin-bottom:11px; background:var(--ink-700);
}

/* ==========================================================================
   Story no celular: a arte manda
   ==========================================================================

   Na largura do telefone a previa ficava do tamanho de um selo ao lado dos
   campos. Aqui ela sobe para cima, sozinha e grande - e o que vai ser postado,
   entao e o que precisa ser visto. */

@media (max-width:559px){
  .story-corpo{ flex-direction:column; align-items:stretch; }
  .story-tela{ width:min(56vw, 250px); margin:0 auto 6px; }
  .story-campos{ width:100%; }
}

/* No computador ela tambem estava pequena demais: 212px de largura mostra o
   texto da arte legivel sem empurrar os campos para fora. */
@media (min-width:560px){
  .story-tela{ width:212px; }
  .story-caixa{ max-width:520px; }
}

/* ==========================================================================
   Pino redondo com pezinho solto
   ==========================================================================

   A gota comprida foi trocada por uma bolinha gorda e uma gotinha separada
   embaixo, que aponta o lugar exato sem alongar o desenho. A bolinha e so
   moldura: quem manda no meio e a foto da arena - ou, sem foto, as duas
   iniciais. O 'corpo' e o 'furo' agora tem classe propria porque o desenho
   passou a ter dois circulos, e a regra antiga pintava os dois igual. */

.pin{ width:60px; height:66px; }
.pin svg{ width:60px; height:66px; }

/* opacity:1 na marra: a regra antiga .pin svg circle deixava a bolinha em 16%. */
.pin svg .corpo{ fill:var(--brand); stroke:#1a0d05; stroke-width:2.6; stroke-linejoin:round; opacity:1; }
.pin svg .furo{ fill:#1a0d05; opacity:.16; stroke:none; }
.pin.vaga svg .corpo{ fill:var(--brand-lt); }

/* line-height fixa para a caixa da letra medir o que aparenta e cair no meio
   da bolinha - sem ela a altura da linha empurrava as iniciais 4px pra baixo. */
.pin b{ top:19px; width:60px; font-size:18px; line-height:18px; }
/* A foto quase toma a bolinha: o que sobra dela vira uma borda grossa da
   mesma cor do pezinho, entao o pino continua sendo o pino da marca. */
/* box-sizing:border-box vale no app inteiro, entao 48px aqui e o diametro de
   fora: 38px de foto por dentro da borda de 5px. */
.pin img{ top:4px; left:6px; width:48px; height:48px; border:5px solid var(--brand); }
.pin.vaga img{ border-color:var(--brand-lt); }

/* O pulso da arena com vaga aberta acompanha o novo tamanho da bolinha. */
.pin.vaga::before{ left:5px; top:3px; width:50px; height:50px; }

/* ==========================================================================
   Camera na quadra
   ==========================================================================

   O selo aparece para qualquer pessoa: saber que a quadra e monitorada faz
   parte da escolha de marcar o horario. O que a camera MOSTRA e outra
   conversa, e quem decide isso e o servidor — o navegador so recebe o que a
   pessoa pode ver. */

.selo-cam{ display:inline-flex; align-items:center; gap:4px; color:var(--brand);
  font-weight:900; letter-spacing:.04em; }
.selo-cam svg{ display:block; }

.tag.cam{ display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,122,26,.14); color:var(--brand-lt);
  border:1px solid rgba(255,122,26,.35); }

.cam-card{ padding:13px 14px; }
.cam-linha{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:5px 0; }
.cam-nome{ font-size:13.5px; font-weight:800; color:var(--txt); letter-spacing:-.01em; }

.cam-btn{ width:auto; flex:none; padding:8px 12px; font-size:11.5px;
  display:inline-flex; align-items:center; gap:7px; }

/* O pontinho piscando e o unico jeito honesto de dizer "isto e agora". */
.cam-ponto{ width:7px; height:7px; border-radius:50%; background:#ff3b30;
  box-shadow:0 0 0 0 rgba(255,59,48,.7); animation:pulsoCam 1.8s ease-out infinite; }
@keyframes pulsoCam{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.7); }
  70%{ box-shadow:0 0 0 7px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

.cam-divisor{ height:1px; background:var(--line); margin:11px 0; }
.cam-titulo{ font-size:12px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); }

/* A busca de replay do dono.
   Os chips rolam na horizontal de propósito: no celular, uma grade de vinte
   datas empurraria a lista para fora da tela antes de ela começar. */
.cam-busca{ margin-bottom:10px; }
.cam-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cam-chips::-webkit-scrollbar{ display:none; }
.cam-chip{ flex:none; white-space:nowrap; font-size:12px; font-weight:800;
  letter-spacing:-.01em; padding:6px 11px; border-radius:999px;
  background:var(--ink-700); border:1px solid var(--line); color:var(--dim);
  cursor:pointer; }
.cam-chip:hover{ color:var(--txt); }
.cam-chip.on{ background:var(--brand); border-color:var(--brand); color:#1a0d05; }
.cam-data{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:4px; }
.cam-data input{ background:var(--ink-700); border:1px solid var(--line);
  border-radius:10px; color:var(--txt); font:inherit; font-size:13px;
  padding:6px 9px; min-width:0; }
.cam-dia{ font-size:11px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin:12px 0 6px; }
.cam-dia:first-child{ margin-top:0; }

/* A lista de replays e uma grade, nao uma pilha de tiras. Numa tela de
   celular sai uma coluna de cartoes largos; num tablet ou no desktop entram
   dois ou tres por linha, sem que nada precise ser recalculado em JavaScript. */
.cam-replays{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px; }
.cam-replay{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--ink-700); border:1px solid var(--line); border-radius:12px;
  padding:9px 11px; color:var(--txt); cursor:pointer; }
.cam-replay:hover{ border-color:var(--brand); }

/* A miniatura na lista de replays do jogo. A capa ocupa a largura inteira do
   cartao, em 16x9, que e o formato em que a camera da quadra grava. Numa tira
   de 64px a jogada nao se reconhecia: era um borrao verde igual ao do vizinho.
   Em tamanho grande da para saber qual lance e antes de abrir, que e a unica
   razao de existir miniatura. */
.cam-replay.com-mini{ display:flex; flex-direction:column; align-items:stretch;
  gap:9px; padding:9px; }
.cam-capa{
  position:relative; flex:none; width:100%; aspect-ratio:16/9; border-radius:10px;
  overflow:hidden; background:#2b2622; display:block;
}
.cam-mini{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* No cartao do dono o play fica no meio: a pastilha de espera desce. */
.cam-capa .mini-espera{ background-position:center calc(100% - 8px); }
.cam-capa .cam-play{
  position:absolute; inset:0; margin:auto; width:46px; height:46px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.75);
}
/* O triangulo vem do JavaScript com 11px. Dentro de um botao de 46px ele
   sumiria, entao a propria folha de estilo o acompanha. */
.cam-capa .cam-play svg{ width:17px; height:17px; }
.cam-play{ flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand); color:#1a0d05; }
.cam-quando{ display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.cam-replay .pequeno{ display:block; }

/* O palco do video e preto de proposito: a imagem da quadra e o assunto, e
   qualquer cor em volta rouba contraste dela. */
.cam-palco{ position:relative; background:#000; border-radius:12px; overflow:hidden; }

/* A cor da camera de 90 graus. O camera.js poe esta classe so nos videos com
   proporcao abaixo de 2,0, que hoje e exatamente essa camera. Os numeros vem
   de medicao de quadro, nao de gosto: ver o comentario no camera.js. */
.cor-viva{ filter:saturate(1.85) contrast(1.30) brightness(.92); }

/* O aviso de replay novo. Aparece e some sozinho: e uma noticia, nao um
   estado, e ficar na tela depois de lida so tira espaco da lista. */
.cam-chegou{ margin:0 0 8px; font-size:13px; font-weight:700; color:var(--brand);
  max-height:40px; overflow:hidden; transition:opacity .3s ease, max-height .3s ease,
  margin-bottom .3s ease; }
.cam-chegou.sumiu{ opacity:0; max-height:0; margin-bottom:0; }
.cam-palco video{ width:100%; display:block; max-height:60dvh; background:#000; }
.cam-acoes{ display:flex; gap:9px; margin-top:12px; }
.cam-acoes .btn{ flex:1; }

.ico-btn{ background:none; border:0; color:var(--dim); font-size:17px;
  line-height:1; padding:4px 2px; cursor:pointer; }
.ico-btn:hover{ color:var(--txt); }

/* O atalho para a camera, dentro do cartao da quadra no painel do dono.
   Discreto de proposito: o cartao inteiro e para editar a quadra, e este
   e o unico ponto dele que leva para outro lugar. */
.cam-atalho{
  display:block; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--line);
  font-size:12px; font-weight:800; letter-spacing:-.01em;
  color:var(--brand); text-decoration:none;
}
.cam-atalho:hover{ color:var(--brand-lt); }

/* A linha de acoes da camera: o teste do dono a esquerda, o estado do ao
   vivo a direita. Em tela estreita eles empilham em vez de espremer. */
.cam-linha-acoes{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end; flex:none;
}
.cam-teste{
  width:auto; flex:none; padding:8px 11px;
  font-size:10.5px; letter-spacing:.04em;
}


/* ==========================================================================
   EM ANDAMENTO
   ==========================================================================

   Faltava o estado do meio: o jogo ja comecou e ainda nao acabou. Sem ele a
   partida das 7h parecia so "proxima" ate virar "encerrada" de uma vez.

   Vermelho e piscando pela mesma razao do ao vivo da camera: e um estado
   que muda sozinho, e quem olha precisa perceber isso sem ler. */

.tag.agora{
  background:var(--live); color:#fff; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:5px; flex:none;
}
.tag.agora::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
  animation:pulsoAgora 1.8s ease-out infinite;
}
@keyframes pulsoAgora{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75); }
  70%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* Quem esta jogando agora merece o cartao em destaque na lista. */
.card.rolando{ border-color:rgba(229,37,42,.45); }

/* ---- Precisa de gente pra jogar: o cartao (05/10/2026) ---------------------

   Hierarquia de cima para baixo: o jogo e quantos faltam, quando, onde, quem
   ja esta e o preco por cabeca, e a acao. Mesma altura entre os cartoes: a
   trilha estica os cartoes (flex) e o rodape desce com margin-top:auto; o
   "onde" corta em uma linha em vez de empurrar o resto.
   Em andamento: borda e faixa de cima na cor do ao vivo, com um ponto que
   pulsa devagar (parado para quem pediu menos movimento). Cores so por
   variavel do app.css: claro e escuro saem do mesmo codigo. */
/* html[data-tema] na frente: vence o .card do novo.css (padding e sombra). */
html[data-tema] .trilha .card.opo-card{
  width:min(64%, 232px); min-width:200px;
  display:flex; flex-direction:column; gap:0; padding:14px 14px 12px;
}
.opo-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.opo-modal{
  min-width:0; font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opo-faltam{
  flex:none; font-size:11px; font-weight:800; line-height:1; padding:6px 9px; border-radius:999px;
  color:var(--brand-txt, var(--brand)); background:rgba(255,122,61,.14);
}
.opo-quando{ margin-top:10px; font-size:13px; font-weight:700; color:var(--txt); line-height:1.3; }
.opo-onde{
  margin-top:2px; font-size:12px; color:var(--dim); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opo-pe{ margin-top:auto; padding-top:12px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.opo-gente{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.opo-gente small{ font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.opo-preco{ text-align:right; display:flex; flex-direction:column; flex:none; }
.opo-preco b{ font-size:14px; font-weight:800; color:var(--txt); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.opo-preco small{ font-size:10.5px; color:var(--dim); }
.opo-acao{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; font-weight:800; color:var(--brand-txt, var(--brand));
}
.opo-acao span{ font-size:17px; line-height:1; }

html[data-tema] .card.opo-card.rolando{
  border-color:rgba(229,37,42,.55);
  box-shadow:var(--sombra, 0 0 0 transparent), inset 0 0 0 1.5px rgba(229,37,42,.42), inset 0 3px 0 var(--live);
  background-image:linear-gradient(180deg, rgba(229,37,42,.08), rgba(229,37,42,0) 46%);
}
.opo-agora{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em; line-height:1; padding:6px 9px; border-radius:999px;
  color:var(--live); background:rgba(229,37,42,.12);
}
.opo-agora i{
  width:7px; height:7px; border-radius:50%; background:var(--live);
  animation:pulsoOpo 2.2s ease-out infinite;
}
@keyframes pulsoOpo{
  0%{ box-shadow:0 0 0 0 rgba(229,37,42,.55); }
  70%{ box-shadow:0 0 0 7px rgba(229,37,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,37,42,0); }
}
.card.opo-card.rolando .opo-acao{ color:var(--live); }
@media (prefers-reduced-motion: reduce){ .opo-agora i{ animation:none; } }

/* ==========================================================================
   ESTÚDIO DE REPLAY
   ==========================================================================

   A folha ocupa o que precisar de altura e rola por dentro: é uma tela de
   trabalho, não um aviso. Em telefone ela vira quase a tela inteira, porque
   é onde a pessoa vai de fato editar o lance para postar. */

.est-folha{ max-height:94dvh; overflow-y:auto; }
.est-titulo{ font-size:15px; font-weight:900; letter-spacing:-.02em; }

/* O palco: preto atrás, sempre, para o recorte 9:16 não parecer defeito. */
.est-palco{
  position:relative; background:#000; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; touch-action:none; cursor:crosshair;
}
.est-palco canvas{
  display:block; max-width:100%; max-height:52dvh;
  width:auto; height:auto; margin:0 auto;
  position:relative; z-index:2;
}

/* A FONTE DO ESTUDIO PRECISA ESTAR SENDO DESENHADA
   ------------------------------------------------
   O Estudio nao mostra o <video>: ele copia cada quadro para o canvas, onde
   entram o recorte, a marca e a assinatura. O <video> vivia com display:none,
   e no computador funcionava.

   No iPhone nao: o WebKit so entrega quadro de um video que esta sendo
   desenhado. Fora disso o elemento carrega, sabe a duracao, avanca o tempo e
   toca o som, e drawImage devolve PRETO. Era o quadro preto com a marca e a
   data por cima, e so no aparelho dele.

   A primeira tentativa foi deixar o video na tela com opacity .01. Nao bastou:
   opacidade quase zero ainda e um convite para o aparelho pular o trabalho.
   Agora o video fica INTEIRO e OPACO, do tamanho do palco, e quem esconde ele
   e uma tapadeira preta por cima. Estar coberto por outro elemento nao tira o
   video da arvore de desenho, entao o quadro continua vindo.

   A ordem das camadas: video (0), tapadeira (1), tela do Estudio (2), ponto de
   enquadramento (3). */
.est-fonte{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; z-index:0;
}
.est-palco::before{
  content:''; position:absolute; inset:0; background:#000; z-index:1;
  pointer-events:none;
}

/* O ponto de enquadramento. Só aparece quando há sobra para escolher — no
   formato cheio ele some sozinho, porque ali não há decisão a tomar. */
.est-alvo{
  position:absolute; z-index:3; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid rgba(255,255,255,.9); border-radius:50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.35);
  pointer-events:none;
}
.est-alvo::before, .est-alvo::after{
  content:''; position:absolute; background:rgba(255,255,255,.9);
}
.est-alvo::before{ left:50%; top:7px; bottom:7px; width:1px; margin-left:-.5px; }
.est-alvo::after{ top:50%; left:7px; right:7px; height:1px; margin-top:-.5px; }

/* Zoom na edição (v6): de 1x a 4x. Ampliado, o palco vira "mão" (arrastar
   move o enquadramento que vai para o vídeo). O nível usa números tabulares
   para os botões não dançarem enquanto a pinça muda o valor. */
.est-zoom{ display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap; }
.est-zoom .btn{ display:inline-block; width:auto; min-width:40px; padding:7px 11px; font-size:13px; font-weight:800; line-height:1.2; }
.est-zoom-nivel{ min-width:44px; text-align:center; font-size:12.5px; font-weight:800; color:var(--txt); font-variant-numeric:tabular-nums; }
.est-zoom-dica{ flex:1 1 150px; font-size:10.5px; color:var(--dim); line-height:1.35; }
.est-palco.ampliado{ cursor:grab; }
.est-palco.ampliado:active{ cursor:grabbing; }

/* Linha do tempo ---------------------------------------------------------- */

.est-linha-tempo{ display:flex; align-items:center; gap:11px; margin-top:14px; }

.est-play{
  flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand); color:#1a0d05; display:grid; place-items:center;
  position:relative;
}
.est-play::before{
  content:''; width:0; height:0; margin-left:2px;
  border-left:11px solid #1a0d05; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.est-play.tocando::before{
  width:10px; height:12px; margin-left:0; border:0;
  background:#1a0d05; clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0);
}

.est-trilha{
  position:relative; flex:1; height:34px; border-radius:9px;
  background:var(--ink-700); border:1px solid var(--line); cursor:pointer;
}
.est-selecao{
  position:absolute; top:0; bottom:0; background:rgba(255,122,61,.24);
  border-left:2px solid var(--brand); border-right:2px solid var(--brand);
}
.est-agulha{
  position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px;
  background:#FFF6F0; border-radius:2px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.est-alca{
  position:absolute; top:50%; width:22px; height:34px; margin:-17px 0 0 -11px;
  border:0; background:transparent; cursor:ew-resize; padding:0;
  touch-action:none;
}
.est-alca::before{
  content:''; position:absolute; left:50%; top:5px; bottom:5px; width:6px;
  margin-left:-3px; border-radius:3px; background:var(--brand);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

.est-relogio{
  flex:none; min-width:46px; text-align:right;
  font-size:11.5px; font-weight:700; color:var(--dim);
  font-variant-numeric:tabular-nums;
}

.est-passos{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.est-passos .btn{ flex:1; min-width:88px; padding:8px 6px; font-size:11px; }

/* Opções ------------------------------------------------------------------ */

.est-rotulo{
  font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin:16px 0 8px;
}
.est-opcoes{ display:flex; gap:7px; }
.est-opcao{
  flex:1; cursor:pointer; text-align:center; padding:9px 6px;
  background:var(--ink-700); border:1px solid var(--line); border-radius:11px;
  color:var(--dim); font-family:inherit; transition:.15s;
}
.est-opcao:hover{ border-color:var(--brand); }
.est-opcao b{ display:block; font-size:13px; font-weight:800; color:var(--txt); }
.est-opcao span{ display:block; font-size:9.5px; margin-top:2px; }
.est-opcao.on{ background:var(--brand); border-color:var(--brand); }
.est-opcao.on b, .est-opcao.on span{ color:#1a0d05; }

.est-marca{
  display:flex; align-items:center; gap:9px; margin-top:16px; cursor:pointer;
  font-size:12.5px; color:var(--txt);
}
.est-marca input{ accent-color:var(--brand); width:16px; height:16px; }

/* O que vai sair ---------------------------------------------------------- */

.est-saida{
  margin-top:16px; padding:11px 13px; border-radius:11px;
  background:var(--ink-900); border:1px solid var(--ink-600);
  font-size:12px; color:var(--dim); line-height:1.6;
}
.est-saida b{ color:var(--txt); font-weight:800; }
.est-nota{ display:block; font-size:11px; color:var(--dim); margin-top:5px; line-height:1.5; }

.est-acoes{ display:flex; gap:9px; margin-top:14px; }
.est-acoes .btn{ flex:1; text-align:center; }

.est-aviso{
  margin-top:14px; padding:11px 13px; border-radius:11px; font-size:12px; line-height:1.6;
  background:rgba(255,122,61,.1); border:1px solid rgba(255,122,61,.3); color:var(--brand-lt);
}

.est-pronto{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.est-previa{
  width:100%; max-height:38dvh; display:block; margin:0 auto 11px;
  border-radius:12px; background:#000;
}
.est-pronto-info{ font-size:12px; color:var(--dim); }
.est-pronto-info b{ color:var(--ok); font-weight:800; }

@media (min-width:560px){
  .est-palco canvas{ max-height:46dvh; }
}


/* ==========================================================================
   FEEDPLAY — os momentos publicos
   ==========================================================================

   Um cartao por lance, largura inteira, rolagem vertical. O video manda: tudo
   que nao e o video (autor, quadra, acoes) fica em torno dele, nunca por cima.

   As tres acoes tem nome de quadra, e nao de rede social: "show de bola" no
   lugar de curtir, "na minha sumula" no lugar de salvar, "passa a bola" no
   lugar de compartilhar. O icone acompanha a frase — bola, prancheta, passe.
   ========================================================================== */

.fp-lista{ display:flex; flex-direction:column; gap:14px; padding:12px 0 20px; }

.fp-card{
  background:var(--ink-800); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}

/* Cabecalho ---------------------------------------------------------------- */

.fp-topo{ display:flex; align-items:center; gap:10px; padding:11px 13px; }
.fp-topo .txt{ flex:1; min-width:0; }
.fp-autor{
  font-size:13px; font-weight:800; color:var(--txt); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-onde{
  font-size:10.5px; color:var(--dim); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-mais{
  flex:none; width:30px; height:30px; border:0; background:transparent;
  color:var(--dim); border-radius:50%; cursor:pointer; display:grid; place-items:center;
}
.fp-mais:hover{ background:var(--ink-700); color:var(--txt); }

/* O video ------------------------------------------------------------------ */

.fp-palco{ position:relative; background:#000; aspect-ratio:16/9; }
.fp-palco video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }

/* O play so aparece antes do primeiro toque; depois o proprio video manda. */
.fp-play{
  position:absolute; inset:0; border:0; background:rgba(0,0,0,.28);
  display:grid; place-items:center; cursor:pointer; color:#fff;
}
.fp-play span{
  width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.9); display:grid; place-items:center;
}
.fp-play span::before{
  content:''; width:0; height:0; margin-left:4px;
  border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.fp-play.oculto{ display:none; }

.fp-duracao{
  position:absolute; right:9px; bottom:9px; padding:2px 7px; border-radius:6px;
  background:rgba(0,0,0,.62); color:#fff; font-size:10.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Legenda e elenco --------------------------------------------------------- */

.fp-legenda{ padding:11px 13px 0; font-size:13px; line-height:1.5; color:var(--txt); }

/* "Eu tava la": o elenco daquele horario, que o sistema ja conhecia. */
.fp-elenco{
  display:flex; align-items:center; gap:9px; padding:11px 13px 0;
  font-size:11px; color:var(--dim);
}
.fp-elenco .pilha{ flex:none; }
.fp-elenco b{ color:var(--brand); font-weight:700; }

/* Acoes -------------------------------------------------------------------- */

.fp-acoes{ display:flex; align-items:center; gap:4px; padding:10px 8px 11px; }

.fp-acao{
  display:flex; align-items:center; gap:6px; padding:8px 9px;
  border:0; background:transparent; border-radius:10px; cursor:pointer;
  color:var(--dim); font-family:inherit; font-size:12px; font-weight:700;
  transition:color .15s, background .15s;
}
.fp-acao:hover{ background:var(--ink-700); color:var(--txt); }
.fp-acao svg{ width:20px; height:20px; }
.fp-acao span{ font-variant-numeric:tabular-nums; }

/* Aceso. A bola preenche de laranja; a sumula fica so contornada, porque
   guardar e um gesto mais silencioso que elogiar. */
.fp-acao.on{ color:var(--brand); }
.fp-acao.on svg{ fill:rgba(255,122,61,.18); }

.fp-acao.revanche{
  margin-left:auto; color:var(--brand); border:1px solid rgba(255,122,61,.42);
}
.fp-acao.revanche:hover{ background:rgba(255,122,61,.12); color:var(--brand); }

/* Comentarios -------------------------------------------------------------- */

.fp-conversa{ border-top:1px solid var(--line); padding:11px 13px; }
.fp-conversa.oculto{ display:none; }

.fp-fala{ display:flex; gap:9px; margin-bottom:11px; }
.fp-fala .txt{ flex:1; min-width:0; font-size:12.5px; line-height:1.5; color:var(--txt); }
.fp-fala .txt b{ font-weight:800; margin-right:5px; }
.fp-fala .quando{ display:block; font-size:10px; color:var(--dim); margin-top:2px; }

.fp-escrever{ display:flex; gap:8px; align-items:center; }
.fp-escrever input{
  flex:1; min-width:0; background:var(--ink-900); border:1px solid var(--ink-600);
  border-radius:20px; padding:10px 14px; color:var(--txt); font-family:inherit; font-size:12.5px;
}
.fp-escrever input:focus{ border-color:var(--brand); outline:none; }
.fp-escrever button{
  flex:none; border:0; background:var(--brand); color:#1a0d05; font-family:inherit;
  font-size:12px; font-weight:800; padding:10px 15px; border-radius:20px; cursor:pointer;
}
.fp-escrever button[disabled]{ opacity:.4; cursor:not-allowed; }

/* Vazio e fim -------------------------------------------------------------- */

.fp-vazio{ padding:44px 24px; text-align:center; color:var(--dim); font-size:13px; line-height:1.6; }
.fp-vazio b{ display:block; color:var(--txt); font-size:15px; font-weight:800; margin-bottom:7px; }

/* O feed acaba. Scroll infinito e a mecanica que as pessoas mais odeiam em si
   mesmas — e aqui nao se vende tempo de tela, se vende quadra ocupada. */
.fp-fim{ padding:30px 24px 10px; text-align:center; color:var(--dim); font-size:12.5px; line-height:1.6; }
.fp-fim .btn{ margin-top:12px; }

/* A faixa da tela inicial -------------------------------------------------- */

.fp-faixa{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px 16px 4px; }
.fp-faixa::-webkit-scrollbar{ display:none; }

.fp-mini{
  flex:none; width:132px; cursor:pointer; border:0; padding:0; background:transparent;
  font-family:inherit; text-align:left;
}
.fp-mini .capa{
  position:relative; width:132px; height:186px; border-radius:12px; overflow:hidden;
  background:var(--ink-700); border:1px solid var(--line);
}
.fp-mini .capa img, .fp-mini .capa video{ width:100%; height:100%; object-fit:cover; display:block; }
.fp-mini .capa::after{
  content:''; position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
}
.fp-mini .sobre{ position:absolute; left:8px; right:8px; bottom:7px; z-index:1; }
.fp-mini .quadra{
  font-size:10.5px; font-weight:800; color:#fff; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-mini .bolas{
  display:flex; align-items:center; gap:4px; margin-top:3px;
  font-size:10px; font-weight:700; color:var(--brand-lt);
}
.fp-mini .bolas svg{ width:12px; height:12px; }

/* ==========================================================================
   FEEDPLAY v2
   O feed passa a ser um rolo de video que toca sozinho. Tudo que mudou:
   espacamento entre cartoes (eles estavam grudados porque a lista nao usava
   .fp-lista), abas, o "+", a linha da nota, o som, as folhas de avaliacao e
   de quem-viu, e a grade do perfil.
   ========================================================================== */

/* A lista: agora com respiro de verdade entre um lance e outro. */
.fp-lista{ display:flex; flex-direction:column; gap:18px; padding:12px 16px 24px; }

/* Abas ------------------------------------------------------------------- */

.fp-abas{ display:flex; gap:6px; padding:8px 16px 6px; border-bottom:1px solid var(--line); }
.fp-abas.oculto{ display:none; }
.fp-aba{
  border:0; background:transparent; color:var(--dim); font-family:inherit;
  font-size:12.5px; font-weight:800; letter-spacing:-.01em; padding:9px 12px;
  border-radius:20px; cursor:pointer; transition:.15s;
}
.fp-aba.on{ background:var(--ink-700); color:var(--txt); }

.fp-mais-btn{ margin-right:6px; }
.appbar .ico.b.on{ color:var(--brand); }

/* "Quero jogar" ------------------------------------------------------------ */

/* A espera, do lado de quem pediu. Não é alerta nem erro: é um estado, e por
   isso usa a cor de superfície e não a da marca. */
.espera{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; border-radius:12px;
  background:var(--ink-700); border:1px solid var(--line);
  color:var(--dim);
}
.espera svg{ flex:none; margin-top:1px; color:var(--brand); }
.espera b{ display:block; font-size:13px; font-weight:800; color:var(--txt); margin-bottom:2px; }
.espera span{ font-size:11.5px; line-height:1.5; }

/* A lista de quem pediu, do lado de quem organiza. Os dois botões ficam na
   mesma linha da pessoa: a decisão é sobre AQUELA pessoa, e separar o botão do
   rosto é o que faz alguém aceitar o pedido errado. */
.linha.pedido{ align-items:flex-start; }
.linha.pedido .txt{ padding-top:2px; }
.linha.pedido .recado{
  margin-top:5px; font-size:11.5px; font-style:italic;
  color:var(--dim2); line-height:1.5;
}
.pedido-btns{ display:flex; flex-direction:column; gap:6px; flex:none; }
.btn.mini{
  width:auto; min-width:76px; padding:7px 12px;
  font-size:11.5px; border-radius:9px;
}

/* O respiro entre faixas é regra, e não margem cravada em cada uma: quando a
   pessoa muda a ordem, a margem tem que continuar entre as faixas, e não
   viajar junto com aquela que foi movida. */
#faixas > .faixa + .faixa{ margin-top:18px; }
#faixas > .faixa:last-child{ margin-bottom:18px; }
#faixas > .faixa.oculto{ display:none; }

/* A revisão antes de marcar ------------------------------------------------ */
.revisao{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:4px; }
.revisao-linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:10px 12px; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--dim);
}
.revisao-linha:last-child{ border-bottom:0; }
.revisao-linha b{
  font-size:12.5px; font-weight:800; color:var(--txt);
  text-align:right; min-width:0; word-break:break-word;
}
.revisao-linha.total{ background:var(--ink-700); }
.revisao-linha.total b{ font-size:15px; color:var(--brand); }

/* Arrumar a ordem da tela inicial ------------------------------------------ */

/* O botão fica ao lado da saudação: discreto, mas na primeira dobra. */
.ordenar-btn{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--ink-700); color:var(--dim);
  transition:.15s;
}
.ordenar-btn:hover{ color:var(--brand); border-color:var(--brand); }
/* Enquanto arruma, o botao vira SALVAR e fica verde. Verde e nao laranja de
   proposito: o laranja e a cor de tudo que e acao normal na tela, e aqui
   precisa saltar de um jeito que diga "acabei". */
.ordenar-btn.on{ width:auto; padding:0 14px; border-radius:16px;
  background:var(--ok); border-color:var(--ok); color:#FFF; }
.ordenar-btn.on:hover{ background:var(--ok); border-color:var(--ok); color:#FFF;
  filter:brightness(1.08); }
.ordenar-btn.on .pequeno{ color:#FFF; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; }

/* Enquanto arruma, cada faixa ganha contorno e punho. O conteúdo continua
   visível de propósito: a pessoa está decidindo a ordem olhando o que cada
   faixa é, e uma lista de nomes soltos não ajudaria. */
body.arrumando .faixa{
  position:relative; border:1px dashed var(--ink-600); border-radius:14px;
  margin:8px 10px; padding-top:4px;
  /* Segura a rolagem da página enquanto o dedo arrasta a faixa. Sem isto o
     navegador entende o gesto como rolagem e a faixa não sai do lugar. */
  touch-action:none;
}
/* Arrumando, TODA faixa entra na lista, ate a que esta vazia agora (sem
   replay, sem evento, sem time desfalcado): a pessoa escolhe a ordem de
   todas, e a vazia aparece no lugar escolhido quando tiver conteudo. Fora
   do modo de arrumar, a vazia continua escondida (.oculto). */
body.arrumando #faixas > .faixa.oculto{ display:block !important; opacity:.78; }

/* Arrumando, cada faixa encolhe ate o titulo. O conteudo continua no lugar,
   so escondido: com sete faixas abertas a pessoa arrastava no escuro, porque
   a lista nao cabia em duas telas e ela nunca via de uma vez o que estava
   movendo e para onde. Fechadas, as sete cabem na mao. */
body.arrumando .faixa > *:not(.faixa-punho){ display:none; }
body.arrumando .faixa{ padding-top:0; margin:8px 10px; }
body.arrumando .faixa-punho{ padding:13px 12px; }
.faixa-punho{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 12px; border:0; background:transparent; cursor:grab;
  color:var(--dim); font:inherit; font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; text-align:left;
}
.faixa-punho:active{ cursor:grabbing; }
.faixa.pegando{
  opacity:.92; border-color:var(--brand); background:var(--ink-800);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* O play no canto da miniatura de replay, para não confundir com foto. */
.fp-mini .fp-mini-play{
  position:absolute; top:7px; right:7px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55); color:#fff;
}

/* O botão de trocar o tema ------------------------------------------------- */
/* A versao solta, usada so nas telas SEM cabecalho (entrada e cadastro). Nas
   demais o botao mora na barra de cima, ver .tema-ico e montarBotaoTema.
   Nos dois casos ele fica no MESMO canto: o alto, a direita. Estava embaixo
   antes, e embaixo ele disputava lugar com o rodape e com a faixa de gestos
   do iPhone. A distancia do topo conta o entalhe da tela. */
.tema-btn{
  position:fixed; right:14px; z-index:800;
  top:calc(14px + env(safe-area-inset-top));
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--ink-700); color:var(--dim);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:color .15s, border-color .15s, transform .15s;
}
.tema-btn:hover{ color:var(--brand); border-color:var(--brand); transform:translateY(-1px); }
@media (min-width:560px){ .tema-btn{ right:calc(50% - var(--largura)/2 + 14px); } }

/* No cabecalho ele e um icone como os outros, so que apagado: e um ajuste de
   preferencia, nao uma acao da tela, e nao deve competir com o botao laranja
   que fica do lado. */
.tema-ico{ color:var(--dim); }
.tema-ico:hover{ color:var(--brand); }
/* Nas telas com capa (arena, partida, pessoa, perfil) o botao entra no grupo
   de acoes do canto da capa, ao lado dos outros, e tem a cara deles. */
.capa .acoes .tema-ico{ color:var(--txt); }
.capa .acoes .tema-ico:hover{ color:var(--brand); }

/* A foto de quem esta logado, no lugar do icone da aba Perfil da barra de
   baixo. Anel laranja quando a aba esta ativa. */
.tb .tb-avatar{ width:20px; height:20px; flex:none; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-style:normal; line-height:1;
  font-size:9.5px; font-weight:800; letter-spacing:-.02em;
  background:var(--ink-700); color:var(--txt); box-shadow:0 0 0 1px var(--line); }
.tb .tb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb.on .tb-avatar{ box-shadow:0 0 0 2px var(--brand); }

/* A marca do ambiente de teste -------------------------------------------- */
/* Só aparece em dev.toprojogo.com (ver marcarAmbiente no ui.js). Fica presa no
   canto, por cima de tudo, e não intercepta toque: a ideia é lembrar de onde
   você está, nunca atrapalhar o que está sendo testado. */
.selo-ambiente{
  position:fixed; left:0; bottom:0; z-index:9000; pointer-events:none;
  padding:3px 10px 3px 8px; border-radius:0 10px 0 0;
  background:#B45309; color:#FFF7ED;
  font-size:10px; font-weight:900; letter-spacing:.14em;
}
.ambiente-teste body{ box-shadow:inset 0 0 0 2px #B45309; }

/* O sino e a caixa de avisos ---------------------------------------------- */

.sino-btn{ position:relative; }
/* O selo fica meio para fora do botão de propósito: dentro do círculo de 30px
   ele brigaria com o desenho do sino e ficaria ilegível no celular.

   Ele é redondo e pequeno. Com box-sizing:content-box o antigo somava
   16px de conteúdo + 8px de padding + 4px de borda e chegava a 28px: quase o
   tamanho do próprio botão, e por isso cobria o sino. Agora a medida é de
   borda a borda, então um dígito fecha um círculo de 14px e só dois ou mais
   alongam o selo em cápsula. */
.sino-selo{ position:absolute; top:-4px; right:-4px; box-sizing:border-box;
  min-width:14px; height:14px; padding:0 3px; border-radius:999px;
  background:var(--brand); color:#1a0d05;
  font-size:9px; font-weight:900; line-height:12px; text-align:center;
  border:1px solid var(--ink-900); }

.aviso{ display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:11px 2px; color:var(--txt); font:inherit; }
button.aviso{ cursor:pointer; }
button.aviso:hover{ background:var(--ink-700); border-radius:10px;
  border-bottom-color:transparent; }
.aviso:last-child{ border-bottom:0; }
.aviso-ico{ flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink-700); color:var(--dim); }
.aviso.nova .aviso-ico{ background:rgba(255,122,61,.14); color:var(--brand); }
.aviso-corpo{ min-width:0; flex:1; display:block; }
.aviso-titulo{ display:block; font-size:13.5px; font-weight:800;
  letter-spacing:-.01em; line-height:1.35; }
.aviso-corpo .pequeno{ display:block; margin-top:2px; }
.aviso-quando{ display:block; font-size:10.5px; color:var(--dim); margin-top:3px; }
.aviso-ponto{ flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--brand); margin-top:11px; }

/* Cabecalho do cartao ---------------------------------------------------- */

.fp-avatar-link{ display:block; flex:none; text-decoration:none; }
a.fp-autor{ text-decoration:none; display:block; }
a.fp-autor:hover{ color:var(--brand); }

.fp-seguir{
  flex:none; border:1px solid var(--brand); background:transparent; color:var(--brand);
  font-family:inherit; font-size:11px; font-weight:800; padding:6px 11px; border-radius:20px;
  cursor:pointer; transition:.15s;
}
.fp-seguir:hover{ background:rgba(255,122,61,.12); }
.fp-seguir:disabled{ opacity:.6; cursor:default; }

/* O palco ---------------------------------------------------------------- */

/* Video de celular costuma ser em pe. O palco segue a proporcao do proprio
   video ate um teto, em vez de forcar 16:9 e deixar duas faixas pretas. */
/* Todo cartão do feed tem a MESMA altura: 3 por 4, como o Instagram.
   Antes a altura vinha do vídeo (aspect-ratio:auto até 72vh), e a lista
   pulava de tamanho a cada cartão — o que atrapalha a rolagem e faz o feed
   parecer remendado.

   O vídeo entra com 'contain', e não 'cover': cortar um lance de quadra para
   caber em 3x4 tiraria justamente as laterais, que é onde a jogada acontece.
   Fica tarja preta em cima e embaixo, e o botão de tela cheia resolve para
   quem quer ver grande. */
.fp-palco{
  aspect-ratio:3/4;
  min-height:0;
  /* Recorta o que passar: a moldura manda, nunca o video. */
  overflow:hidden;
}

/* O video e a foto sao POSICIONADOS DENTRO da moldura, e nao filhos que ela
   tem de acomodar.
   
   Antes isto era um grid com place-items:center, e ai estava o erro: centrar
   um item desliga o esticamento, entao o height:100% do video nao tinha
   contra o que medir e ele ficava com a altura natural do arquivo. Um clipe
   em pe passava do quadro e o cartao saia mais alto que os outros, que era
   justamente o que a padronizacao 3x4 veio resolver.
   
   Com inset:0 a moldura define os quatro lados e o object-fit:contain cuida
   do resto: o video aparece inteiro, sem corte e sem esticar, com tarja
   preta onde sobra. */
.fp-palco video,
.fp-palco .fp-capa,
.fp-palco.foto img{
  position:absolute; inset:0;
  width:100%; height:100%; max-height:none;
  object-fit:contain; display:block;
  /* margin:0 porque o nome .fp-capa tambem e o do bloco "Capa" da folha de
     postar (.fp-capa{ margin-top:14px }, mais abaixo neste arquivo). Sem
     isto a capa do lance herdava os 14px: descia 14px dentro do palco,
     deixava uma faixa preta no topo e perdia 14px embaixo, e o video, sem
     margem, entrava no lugar certo. */
  margin:0;
}

/* Lance sem capa gravada que ganhou a miniatura do Stream: o carregando fica
   escondido atras dela. Se a miniatura falhar ela sai do HTML e o
   carregando volta a aparecer sozinho (ver capaDoStream no feed.html). */
.fp-palco .fp-capa ~ [data-carga]{ display:none; }

/* A capa: a mesma moldura do video, por cima dele, e some esmaecendo quando
   o video ja tem quadro (ver ligarCapa no feed.html). Nao recebe toque para
   o play, a pausa e os botoes continuarem valendo por baixo dela. */
.fp-capa{
  /* Sem z-index de proposito: ela vem logo depois do video no HTML, entao
     cobre o video e NAO cobre o som, o expandir e a duracao, que vem depois
     dela. Um z-index aqui passaria por cima dos tres. */
  pointer-events:none;
  opacity:1; transition:opacity .28s ease-out;
}
.fp-capa.sumiu{ opacity:0; }
.fp-palco.foto{ background:#000; }

/* O sinal de pausa. Fica no meio, grande o bastante para se ver de relance e
   translucido para nao brigar com o lance congelado atras dele. */
.fp-pausa{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.5); color:#fff;
  pointer-events:none; z-index:3;
  animation:pausaEntra .16s ease-out;
}
@keyframes pausaEntra{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }

/* Expandir, no alto do vídeo. Do lado oposto ao som, para o polegar não
   esbarrar num quando quer o outro. */
.fp-cheia{
  position:absolute; right:9px; top:9px; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(0,0,0,.62); color:#fff; display:grid; place-items:center;
  cursor:pointer; z-index:2;
}
.fp-cheia:hover{ background:rgba(0,0,0,.8); }

/* PUXAR O VIDEO PARA VER O QUE FICOU DE FORA
   ------------------------------------------
   O lance e enquadrado por cover: a camera grava 9:16 e o cartao mostra 16:9,
   entao sobra video fora da tela e nao ha nada que diga isso. A pessoa perde
   metade do lance sem saber que ela existe.

   Este botao existe para dizer que existe. Ele so aparece quando ha sobra de
   verdade, fica no canto de baixo a direita (o unico canto do palco onde nao
   ha nada) e pulsa devagar ate ser tocado uma vez.

   Ligado, o palco vira uma area de arraste: o dedo empurra o quadro e o resto
   do lance entra. */
.fp-mover{
  position:absolute; right:9px; bottom:9px; width:34px; height:34px;
  border-radius:50%; border:0; background:var(--brand); color:#1a0d05;
  display:grid; place-items:center; cursor:grab; z-index:3;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  animation:moverChama 2.6s ease-in-out infinite;
}
.fp-mover[hidden]{ display:none; }
.fp-mover:hover{ filter:brightness(1.08); }
.fp-mover.on{
  background:#fff; color:#111; animation:none;
  box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 3px rgba(255,122,61,.85);
}
@keyframes moverChama{
  0%, 100%{ box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(255,122,61,.6); }
  55%     { box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 9px rgba(255,122,61,0); }
}

/* Com o arraste ligado o gesto e nosso: sem isto o navegador rola a lista no
   meio do movimento e o quadro escapa da mao. */
.fp-palco.movendo{ cursor:grab; touch-action:none; }
.fp-palco.movendo video,
.fp-palco.movendo img{ will-change:object-position; }
/* Dentro da tela cheia o palco vira a tela toda, e o vídeo pode ocupar tudo. */
.fp-palco:fullscreen{ aspect-ratio:auto; width:100vw; height:100vh; background:#000; }
.fp-palco:fullscreen video,
.fp-palco:fullscreen img{ width:100%; height:100%; object-fit:contain; }

/* O rolo -------------------------------------------------------------------

   A rolagem do FeedPlay para de ser uma lista e vira um rolo: cada gesto
   para em UM lance, ele ocupa a largura toda e se ajusta na altura que
   sobra, sem meio cartao aparecendo em cima ou embaixo.

   Quem rola continua sendo a .rolagem, que ja tem altura fechada (a coluna do
   app mede uma tela e a barra de baixo fica presa nela). O encaixe mora nela;
   os cartoes so dizem onde parar.

   O cartao NAO tem altura em porcentagem: em coluna flex isso nao resolveria,
   porque a .fp-lista cresce com o conteudo. Ele usa flex:0 0 100%, que mede a
   base contra a altura da .fp-lista, e essa sim tem os 100% da .rolagem.

   Dentro do cartao o palco e o unico que estica: o cabecalho, a legenda, a
   nota e os botoes tem a altura que pedirem, e o video fica com o resto. Por
   isso o palco perde a proporcao fixa de 3x4 aqui: a proporcao passa a ser a
   do espaco disponivel, e o video aparece inteiro dentro dele, com tarja
   preta onde sobrar, preenchendo ou nao a tela conforme o arquivo. */

.fp-rolo{
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  padding-bottom:0;
  scrollbar-width:none;
}
.fp-rolo::-webkit-scrollbar{ display:none; }

.fp-rolo .fp-lista{
  display:flex; flex-direction:column;
  gap:0; padding:0; height:100%;
}

.fp-rolo .fp-card{
  flex:0 0 100%;
  min-height:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex; flex-direction:column;
  /* Sem cantos nem bordas laterais: o lance vai de borda a borda. */
  border-radius:0; border-left:0; border-right:0; border-top:0;
  /* Se a conversa abrir e passar da tela, quem rola e o proprio cartao.
     Sem overscroll-behavior aqui de proposito: quando ele nao tem o que
     rolar, o gesto tem de passar adiante e virar a troca de lance. */
  overflow-y:auto;
  scrollbar-width:none;
}
.fp-rolo .fp-card::-webkit-scrollbar{ display:none; }

.fp-rolo .fp-topo,
.fp-rolo .fp-legenda,
.fp-rolo .fp-elenco,
.fp-rolo .fp-nota,
.fp-rolo .fp-acoes{ flex:none; }

/* O que nao e cartao tambem vira uma tela do rolo.
   
   O fim da lista, o aviso de lista vazia e os esqueletos sao filhos diretos da
   mesma coluna flex de altura fechada. Sem base fixa, o flex encolhe eles ate
   quase nada, e o rolo, que so para em quem tem ponto de parada, passava
   direto por cima: o "Por hoje e isso" aparecia no meio da rolagem e sumia
   sem dar para ler nem clicar. Com uma tela inteira e parada propria, ele
   fecha o rolo como um ultimo cartao. */
.fp-rolo .fp-lista > *:not(.fp-card){
  flex:0 0 100%;
  min-height:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.fp-rolo .fp-fim,
.fp-rolo .fp-vazio{ display:grid; align-content:center; }

.fp-rolo .fp-palco{
  flex:1 1 auto;
  aspect-ratio:auto;
  max-height:none;
  /* Numa tela muito baixa o video viraria uma fresta; ai o cartao volta a
     rolar um pouco por dentro, que e o certo. */
  min-height:180px;
}

/* No rolo o video PREENCHE o quadro, sem tarja preta.
   
   Com 'contain' o arquivo aparecia inteiro e o que sobrava do quadro virava
   preto: um clipe em pe deixava duas faixas grossas nas laterais e um
   panoramico deixava duas em cima e embaixo, e o lance ficava pequeno no meio
   de uma moldura vazia. Com 'cover' o quadro fica cheio e o corte sai das
   pontas.
   
   O centro e a ancora: o object-position central faz a imagem crescer para os
   dois lados por igual, entao o que se perde e a borda, que e onde quase
   nunca esta a jogada.
   
   Em tela cheia volta o 'contain': ali a pessoa pediu para VER o lance, e
   nesse momento e melhor a tarja preta do que perder pedaco da quadra. */
.fp-rolo .fp-palco video,
.fp-rolo .fp-palco .fp-capa,
.fp-rolo .fp-palco.foto img{
  object-fit:cover;
  object-position:center center;
}
.fp-rolo .fp-palco:fullscreen video,
.fp-rolo .fp-palco:fullscreen img{ object-fit:contain; }

/* Em tela larga o rolo fica na largura de um celular, centrado, que e como
   as redes de video fazem no computador. */
@media (min-width:900px){
  .fp-rolo .fp-lista{ max-width:470px; margin:0 auto; }
}

/* ==========================================================================
   O IMERSIVO: a tela cheia que continua rolando
   ==========================================================================

   Tela cheia aqui nao e "um video grande e mais nada". E o rolo inteiro
   ocupando a tela: o encaixe continua valendo, cada gesto troca de lance, e o
   lance seguinte ja nasce em tela cheia. O cabecalho e os botoes vao junto,
   so que POR CIMA do video, como nas redes de video.

   Nao usa :fullscreen no seletor de proposito. No iPhone o Safari nao expande
   div nenhuma, entao o imersivo e feito com posicao fixa, que funciona em todo
   lugar; a tela cheia nativa entra como extra quando existe, so para sumir com
   a barra do navegador. O JavaScript poe a classe; o CSS nao pergunta como.
   Ver "TELA CHEIA" no feed.html. */

.fp-rolo.fp-imersivo{
  position:fixed; inset:0; z-index:90;
  width:100%; height:100%; max-width:none;
  background:#000;
  padding-bottom:0;
}

/* Nada mais rola atras enquanto o imersivo esta aberto. */
body.fp-com-imersivo{ overflow:hidden; }

.fp-imersivo .fp-lista{ height:100%; max-width:none; margin:0; }

.fp-imersivo .fp-card{
  position:relative;
  background:#000; border:0; border-radius:0;
  /* Nada rola por dentro do cartao aqui: quem rola e o rolo, de lance em
     lance. Rolagem dentro da rolagem em tela cheia so atrapalha o gesto. */
  overflow:hidden;
}

/* O palco cobre o cartao inteiro e sai do fluxo; o resto flutua sobre ele. */
.fp-imersivo .fp-palco{
  position:absolute; inset:0;
  flex:none; min-height:0; max-height:none;
}

/* Com o palco fora do fluxo, o cabecalho e o unico item de cima. A margem
   automatica embaixo dele empurra todo o resto para o pe da tela, seja qual
   for a combinacao de legenda, elenco e nota que aquele lance tem. */
.fp-imersivo .fp-topo{
  position:relative; z-index:3;
  margin-bottom:auto;
  padding:calc(12px + env(safe-area-inset-top)) 14px 30px;
}

.fp-imersivo .fp-legenda,
.fp-imersivo .fp-elenco,
.fp-imersivo .fp-nota,
.fp-imersivo .fp-acoes,
.fp-imersivo .fp-conversa{ position:relative; z-index:3; }

/* OS DOIS VEUS, SO ONDE HA TEXTO
   ------------------------------
   Texto branco sobre quadra clara some. Antes o veu de baixo era 52% da tela,
   um numero chutado: em lance sem legenda escurecia meio video a toa, e em
   lance com legenda longa acabava antes do texto.

   Agora a altura de cada veu e MEDIDA: o JavaScript mede onde o cabecalho
   termina e onde o bloco de baixo comeca, e escreve nas duas variaveis. O
   degrade vai do escuro junto ao texto ate transparente no fim, entao ele
   morre exatamente onde o texto acaba e o video aparece limpo no meio.

   Os dois ficam atras do conteudo (z-index 2) e nao roubam o toque. */
.fp-imersivo .fp-card::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:var(--fp-veu-topo, 110px);
  background:linear-gradient(to bottom,
    rgba(0,0,0,.86) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:2;
}
.fp-imersivo .fp-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:var(--fp-veu-pe, 210px);
  background:linear-gradient(to top,
    rgba(0,0,0,.90) 0%, rgba(0,0,0,.64) 38%, rgba(0,0,0,.26) 72%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:2;
}

/* Uma sombra rente em tudo que e texto. O degrade resolve o caso comum; a
   sombra segura o caso extremo, o lance filmado contra a quadra branca do
   meio-dia, onde ate preto a 90% ainda deixa a letra encostar no claro. */
.fp-imersivo .fp-topo,
.fp-imersivo .fp-legenda,
.fp-imersivo .fp-elenco,
.fp-imersivo .fp-nota,
.fp-imersivo .fp-acoes{ text-shadow:0 1px 3px rgba(0,0,0,.65); }

/* Tudo que era cinza sobre fundo claro vira branco sobre video. */
.fp-imersivo .fp-autor,
.fp-imersivo .fp-legenda,
.fp-imersivo .fp-nota b,
.fp-imersivo .fp-acao span{ color:#fff; }
.fp-imersivo .fp-onde,
.fp-imersivo .fp-nota,
.fp-imersivo .fp-vistas-n{ color:rgba(255,255,255,.78); }
.fp-imersivo .fp-acao{ color:#fff; }
.fp-imersivo .fp-quemviu{ color:var(--brand-lt); }

/* Os botoes, maiores e com sombra: no imersivo eles competem com o video
   inteiro atras, e o tamanho de lista nao aguenta essa briga. */
.fp-imersivo .fp-acoes{
  padding:12px 12px calc(16px + env(safe-area-inset-bottom));
  gap:6px;
}
.fp-imersivo .fp-acao{
  padding:9px 11px; border-radius:12px;
  background:rgba(255,255,255,.10);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.fp-imersivo .fp-acao svg{ width:22px; height:22px; }
.fp-imersivo .fp-acao.on svg{ fill:rgba(255,122,61,.35); }
.fp-imersivo .fp-acao.revanche{ border-color:rgba(255,255,255,.35); }

.fp-imersivo .fp-legenda{ padding:0 14px 8px; font-size:13.5px; }
.fp-imersivo .fp-nota{ padding:0 14px 4px; }
.fp-imersivo .fp-seguir{ border-color:rgba(255,255,255,.6); color:#fff; }
.fp-imersivo .fp-mais{ color:rgba(255,255,255,.8); }

/* Som e expandir sobem acima do veu e vao os dois para o alto a direita,
   empilhados. No pe eles brigavam com a fila de botoes: o som ficava embaixo
   de "curtir" e a duracao em cima de "Devolve essa". */
.fp-imersivo .fp-som,
.fp-imersivo .fp-cheia{ z-index:4; }

/* Em tela cheia o palco e o cartao inteiro, entao o canto de baixo a direita
   e onde moram os botoes. O puxador sobe para logo acima do bloco de texto,
   usando a mesma medida do veu. */
.fp-imersivo .fp-mover{
  z-index:5; right:12px;
  bottom:calc(var(--fp-veu-pe, 210px) + 10px);
  width:38px; height:38px;
}
.fp-imersivo .fp-cheia{ top:calc(14px + env(safe-area-inset-top)); right:12px; }
.fp-imersivo .fp-som{
  top:calc(52px + env(safe-area-inset-top)); right:12px;
  left:auto; bottom:auto;
}

/* A duracao sai: em tela cheia ela fica em cima dos botoes, e o tempo do
   lance nao e o que se procura com o video ocupando tudo. */
.fp-imersivo .fp-duracao{ display:none; }

/* O cabecalho abre espaco para os dois botoes do canto, senao o "Seguir"
   passa por baixo deles. */
.fp-imersivo .fp-topo{ padding-right:56px; }

/* A conversa vira uma folha no pe, com rolagem propria: ela e a unica coisa
   que pode passar da altura da tela aqui. */
.fp-imersivo .fp-conversa{
  max-height:52%; overflow-y:auto;
  background:rgba(0,0,0,.86); border-top:1px solid rgba(255,255,255,.14);
}

/* No computador o imersivo nao vira um video de dois metros: ele fica na
   proporcao de um celular, centrado, que e o que as redes de video fazem la. */
@media (min-width:900px){
  .fp-imersivo .fp-lista{ max-width:min(470px, calc(100vh * 0.62)); margin:0 auto; }
}

/* ==========================================================================
   A TELA CHEIA MOSTRA O LANCE INTEIRO, NA LARGURA TODA
   ==========================================================================

   Em qualquer tela cheia o lance aparece INTEIRO: contain, centrado, sobre o
   preto do palco. A pessoa pediu para ver o lance, e ali a tarja e melhor
   do que perder a borda da quadra. O centro vale por cima do que o puxador
   tiver deixado no style (por isso o !important), e ao sair volta sozinho.

   No computador o rolo deixa de ter a largura de um celular: o lance ocupa a
   largura toda. O #lista no seletor e para vencer os blocos do imersivo dos
   dois visuais sem depender da ordem dos arquivos. */
#lista.fp-imersivo .fp-lista{ max-width:none; margin:0; }
#lista.fp-imersivo .fp-palco video,
#lista.fp-imersivo .fp-palco .fp-capa,
#lista.fp-imersivo .fp-palco.foto img{
  object-fit:contain;
  object-position:50% 50% !important;
}
/* Com o lance inteiro nao ha o que puxar. */
#lista.fp-imersivo .fp-palco .fp-mover{ display:none; }

/* O CELULAR DEITA (ver o mesmo titulo no feed.html)
   ------------------------------------------------
   fp-girado: o celular esta em pe e nao ha trava de orientacao (iPhone), entao
   o quadro inteiro gira 90 graus no sentido horario. Ele mede a tela ao
   contrario (largura = altura da tela, altura = largura da tela, medidas pelo
   JavaScript em --fp-tela-l e --fp-tela-a), gira em torno do canto de cima
   a esquerda e anda uma largura de tela para a direita, cobrindo a tela
   exatamente. O alto do lance fica na direita da tela: e so deitar o celular
   para a esquerda. As folhas e o modal de confirmacao giram junto, senao
   abririam de lado. */
#lista.fp-imersivo.fp-girado,
body.fp-com-girado .sobreposicao,
body.fp-com-girado .modal-fundo{
  inset:auto; top:0; left:0; right:auto; bottom:auto;
  width:var(--fp-tela-a, 100dvh);
  height:var(--fp-tela-l, 100dvw);
  transform-origin:0 0;
  transform:translateX(var(--fp-tela-l, 100dvw)) rotate(90deg);
}
body.fp-com-girado .folha{ max-height:calc(var(--fp-tela-l, 100dvw) * .88); }
/* O arraste no quadro girado e lido pelo feed.html, no eixo do lance, e ele
   mesmo para exatamente no alto de cada lance. O encaixe nativo sai: com o
   quadro girado o Chromium refazia o encaixe depois da entrada e mandava a
   rolagem de volta ao primeiro lance (visto no teste feedplay-tela-cheia). */
#lista.fp-imersivo.fp-girado{ scroll-snap-type:none; }
#lista.fp-imersivo.fp-girado,
#lista.fp-imersivo.fp-girado *{ touch-action:none; }

/* A area segura: env(safe-area-inset-*) fala dos lados da TELA. Girado, o
   alto do lance e a direita da tela, a direita do lance e o pe da tela, o pe
   do lance e a esquerda e a esquerda do lance e o alto (onde fica o entalhe
   do iPhone em pe). Deitado de verdade, cada lado e o proprio. */
#lista.fp-deitado{
  --fp-sa-t:env(safe-area-inset-top, 0px);
  --fp-sa-r:env(safe-area-inset-right, 0px);
  --fp-sa-b:env(safe-area-inset-bottom, 0px);
  --fp-sa-l:env(safe-area-inset-left, 0px);
}
#lista.fp-deitado.fp-girado{
  --fp-sa-t:env(safe-area-inset-right, 0px);
  --fp-sa-r:env(safe-area-inset-bottom, 0px);
  --fp-sa-b:env(safe-area-inset-left, 0px);
  --fp-sa-l:env(safe-area-inset-top, 0px);
}

/* fp-deitado: o arranjo da tela baixa e larga. O autor no alto a esquerda;
   sair e som lado a lado no alto a direita; as acoes numa coluna compacta na
   direita, presa ao pe; legenda (ate duas linhas), elenco e nota no pe a
   esquerda, fora do caminho da coluna; a conversa abre como painel ao lado
   da coluna. Nada passa da area segura. */
#lista.fp-deitado .fp-topo{
  padding:calc(10px + var(--fp-sa-t)) calc(112px + var(--fp-sa-r)) 22px calc(14px + var(--fp-sa-l));
}
#lista.fp-deitado .fp-palco .fp-cheia,
#lista.fp-deitado .fp-palco .fp-som{
  top:calc(10px + var(--fp-sa-t)); bottom:auto; left:auto;
}
#lista.fp-deitado .fp-palco .fp-cheia{ right:calc(12px + var(--fp-sa-r)); }
#lista.fp-deitado .fp-palco .fp-som{ right:calc(56px + var(--fp-sa-r)); }

#lista.fp-deitado .fp-acoes{
  position:absolute; z-index:4; top:auto; left:auto;
  right:calc(6px + var(--fp-sa-r)); bottom:calc(8px + var(--fp-sa-b));
  width:56px; padding:0; gap:2px;
  display:flex; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-end;
}
#lista.fp-deitado .fp-acao{
  flex-direction:column; justify-content:center; gap:1px;
  width:56px; min-width:0; height:auto; padding:3px 0; margin:0;
  border-radius:10px; font-size:11px; line-height:1.2;
}
/* O "Devolve essa" guarda o fundo proprio (o circulo laranja no novo). */
#lista.fp-deitado .fp-acao:not(.revanche){ background:transparent; box-shadow:none; }
#lista.fp-deitado .fp-acao svg{ width:22px; height:22px; }
#lista.fp-deitado .fp-acao.revanche{ width:40px; height:40px; padding:0; margin-top:2px; border-radius:50%; }
#lista.fp-deitado .fp-acao.revanche svg{ width:20px; height:20px; }
/* No classico o "Devolve essa" leva o texto; aqui fica so o icone (o nome
   continua no title). */
#lista.fp-deitado .fp-acao.revanche span{ display:none; }

#lista.fp-deitado .fp-legenda,
#lista.fp-deitado .fp-elenco,
#lista.fp-deitado .fp-nota{
  padding-left:calc(16px + var(--fp-sa-l));
  padding-right:calc(80px + var(--fp-sa-r));
}
#lista.fp-deitado .fp-legenda{
  padding-top:0; padding-bottom:4px; font-size:13.5px; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
#lista.fp-deitado .fp-elenco{ padding-top:0; padding-bottom:4px; }
#lista.fp-deitado .fp-nota{ padding-top:0; padding-bottom:calc(10px + var(--fp-sa-b)); }

#lista.fp-deitado .fp-conversa{
  position:absolute; z-index:5; left:auto;
  top:calc(54px + var(--fp-sa-t)); bottom:calc(8px + var(--fp-sa-b));
  right:calc(68px + var(--fp-sa-r));
  width:min(340px, 46%); max-height:none; overflow-y:auto;
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
}

.fp-som{
  position:absolute; left:9px; bottom:9px; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(0,0,0,.62); color:#fff; display:grid; place-items:center; cursor:pointer;
}

/* A linha da nota -------------------------------------------------------- */

.fp-nota{
  display:flex; align-items:center; gap:6px; padding:10px 13px 0;
  font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.fp-nota b{ color:var(--txt); font-weight:800; font-size:13px; }
.fp-nota .estrela{ color:var(--brand); display:inline-flex; }
.fp-nota .estrela.dim{ color:var(--dim); }
.fp-nota .espaco{ flex:1; }

.fp-quemviu{
  display:inline-flex; align-items:center; gap:5px; border:0; background:transparent;
  color:var(--brand); font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; padding:4px 0;
}
.fp-quemviu:hover{ text-decoration:underline; }
.fp-vistas-n{ display:inline-flex; align-items:center; gap:4px; color:var(--dim); }

/* Acoes: agora sao seis; deixam quebrar a linha sem apertar. */
.fp-acoes{ flex-wrap:wrap; row-gap:2px; }
.fp-acao.on svg{ fill:rgba(255,122,61,.18); }
.fp-acao[data-acao="nota"].on span{ color:var(--brand); }

/* Folha: avaliacao ------------------------------------------------------- */

.fp-notas{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.fp-notas button{
  border:1px solid var(--ink-600); background:transparent; color:var(--txt);
  font-family:inherit; font-size:17px; font-weight:800; padding:14px 0; border-radius:12px;
  cursor:pointer; font-variant-numeric:tabular-nums; transition:.12s;
}
.fp-notas button:hover{ border-color:var(--brand); }
.fp-notas button.on{ background:var(--brand); border-color:var(--brand); color:#1a0d05; }

/* Folha: quem viu -------------------------------------------------------- */

.fp-vistas{ display:flex; flex-direction:column; }
.fp-vista{
  display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.fp-vista:first-child{ border-top:0; }
.fp-vista .txt{ flex:1; min-width:0; }
.fp-vista .txt b{ display:block; font-size:13px; font-weight:800; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-vista .txt span{ font-size:10.5px; color:var(--dim); }
.fp-vista .vezes{ text-align:right; font-variant-numeric:tabular-nums; }
.fp-vista .vezes b{ display:block; font-size:17px; font-weight:900; color:var(--brand); letter-spacing:-.02em; }
.fp-vista .vezes span{ font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }

/* Folha: criar um momento ------------------------------------------------ */

.fp-novo{ display:flex; flex-direction:column; }

/* Ideias do que postar: tres cartoes deslizaveis, desenho proprio. */
.fp-ideias{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fp-ideias::-webkit-scrollbar{ display:none; }
.fp-ideia{
  flex:0 0 min(62%, 220px); scroll-snap-align:start;
  text-align:left; border:1px solid var(--line); border-radius:14px;
  background:var(--ink-800); color:var(--txt); padding:0 0 12px; cursor:pointer;
  font-family:inherit; overflow:hidden; transition:border-color .15s, transform .15s;
}
.fp-ideia:active{ transform:scale(.985); }
.fp-ideia:hover{ border-color:var(--brand); }
.fp-ideia-arte{ position:relative; aspect-ratio:16/10; background:#1d1712; }
.fp-ideia-arte svg{ width:100%; height:100%; display:block; }
.fp-ideia-arte span{
  position:absolute; left:8px; bottom:8px; font-size:9.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#1a0d05;
  background:var(--brand); padding:3px 7px; border-radius:999px;
}
.fp-ideia b{ display:block; font-size:13.5px; font-weight:800; padding:10px 12px 2px; letter-spacing:-.01em; }
.fp-ideia small{ display:block; font-size:11.5px; color:var(--dim); line-height:1.45; padding:0 12px; }
@media (min-width:600px){ .fp-ideia{ flex-basis:calc(33.333% - 7px); } }
.fp-previa{ border-radius:14px; overflow:hidden; background:#000; max-height:46vh; display:grid; place-items:center; }
.fp-previa img, .fp-previa video{ width:100%; max-height:46vh; object-fit:contain; display:block; }

.fp-capa{ margin-top:14px; }
.fp-capa-linha{ display:flex; gap:12px; align-items:center; }
.fp-capa-linha img{ width:74px; height:74px; object-fit:cover; border-radius:10px; background:var(--ink-700); flex:none; border:1px solid var(--line); }
.fp-capa-ctl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.fp-capa-ctl input[type=range]{ width:100%; accent-color:var(--brand); }

/* ==========================================================================
   PERFIL — a grade de momentos (estilo rede social)
   ========================================================================== */

.pf-social{ display:flex; gap:0; margin:0 0 14px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.pf-social .num{ flex:1; text-align:center; padding:12px 6px; background:var(--ink-800); }
.pf-social .num + .num{ border-left:1px solid var(--line); }
.pf-social b{ display:block; font-size:17px; font-weight:900; letter-spacing:-.02em; color:var(--txt); font-variant-numeric:tabular-nums; }
.pf-social span{ font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }

.pf-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:12px; overflow:hidden; }

/* A grade e quadrada: em tres colunas numa coluna de 940px cada miniatura
   viraria um bloco de 310px, e nove delas empurram a barra de baixo para fora
   da tela. Em tela larga entram mais colunas, menores, que e tambem o que se
   quer ver ali: mais replays de uma vez.

   A regra mora AQUI, e nao no bloco de telas grandes la em cima, porque a
   definicao de .pf-grade vem depois dele no arquivo: com a mesma
   especificidade, quem chega por ultimo ganha, e o @media perdia em silencio. */
@media (min-width:900px){
  .pf-grade{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}
.pf-celula{
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--ink-700);
  border:0; padding:0; cursor:pointer; display:block;
}
.pf-celula img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-celula .tipo{ position:absolute; top:7px; right:7px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.pf-celula .stats{
  position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  display:flex; gap:8px; align-items:center; color:#fff; font-size:10.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pf-celula .stats i{ display:inline-flex; align-items:center; gap:3px; font-style:normal;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-celula.sem-capa{ display:grid; place-items:center; color:var(--dim); }
.pf-celula video.pf-previa{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
/* mini-vazia (e nao sem-capa): nome global proprio para nao colidir com
   .pf-celula.sem-capa acima, que ja existia e pinta a celula vazia do
   perfil. sem-capa sozinho pintaria essas celulas tambem, sem ninguem ter
   pedido. */
.mini-vazia{ background-color:#2b2622; }

/* Fundo de espera de toda miniatura de replay e de momento (ver
   esperaDeMiniatura em ui.js): cor escura que nao e preto, com a pastilha
   de icone e hora vinda do atributo style. A capa ou o quadro, com
   object-fit:cover centralizado, cobrem tudo quando chegam. O video em pe
   (1080x1920) num cartao deitado recorta em cima e embaixo, igual para a
   capa e para o video, porque os dois usam a mesma regra. */
.mini-espera{
  background-color:#2b2622; background-repeat:no-repeat; background-position:center;
  object-fit:cover; object-position:center;
}
.pf-celula:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
.pf-mais{
  position:absolute; top:4px; left:4px; width:28px; height:28px; border:0; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:16px; line-height:1; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(4px);
}
.pf-mais:hover{ background:rgba(0,0,0,.8); }
.pf-cabeca{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pf-postar{ width:auto; padding:7px 14px; font-size:12px; letter-spacing:0; text-transform:none; }
.pf-vazio{ padding:26px 16px; text-align:center; color:var(--dim); font-size:12.5px; line-height:1.6; }

.pf-seguir{ width:auto; padding:9px 18px; }
.pf-seguir.on{ background:var(--ink-700); color:var(--txt); border-color:var(--ink-600); }

/* ==========================================================================
   Instalar na tela inicial
   ==========================================================================

   O passo a passo de instalar um PWA não é um só: o iOS usa o botão de
   Compartilhar do Safari, o Android usa os três pontinhos do Chrome (ou,
   no Chromium, ganha um convite nativo). Por isso o corpo da folha é
   montado pelo instalar.js conforme a plataforma; este bloco cuida só do
   desenho, que é o mesmo nos três casos. */

#instFolha .folha{ position:relative; text-align:center; }
#instFolha .inst-fechar{ position:absolute; top:14px; right:14px; }

.inst-icone{ width:60px; height:60px; border-radius:18px; margin:4px auto 14px;
  background:var(--hero); box-shadow:var(--glow); color:#fff;
  display:grid; place-items:center; }

.inst-passos{ list-style:none; text-align:left; margin:16px 0 4px; padding:0; counter-reset:passo; }
.inst-passos li{ counter-increment:passo; display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  font-size:12.5px; line-height:1.5; color:var(--txt); border-top:1px solid var(--line); }
.inst-passos li:first-child{ border-top:0; padding-top:2px; }
.inst-passos li::before{ content:counter(passo); flex:none; width:21px; height:21px; border-radius:50%;
  background:var(--ink-700); color:var(--brand); font-weight:800; font-size:11px;
  display:grid; place-items:center; margin-top:1px; }

/* Os botoes do palco do FeedPlay (som e tela cheia) ficam acima da camada de
   "carregando" (.carregando-midia, z-index 4). Sem isto, enquanto um lance
   sem capa carrega, ou quando ele falha, a camada cobria os dois e o toque
   caia nela: nao dava para ligar o som nem entrar ou sair da tela cheia. */
.fp-palco .fp-som,
.fp-palco .fp-cheia{ z-index:5; }
/* Na tela cheia, pelo mesmo motivo, a camada de carregando fica abaixo do
   texto e dos botoes do lance (que la ficam por cima do video): acima dela so
   o video e a capa. */
.fp-imersivo .carregando-midia{ z-index:1; }

/* O selo da aba Time (ui.js, pintarSeloDoTime): convites e jogos do time
   esperando resposta. Mesmo desenho do selo do sino. */
nav.tabbar .tb[data-ir="../time"]{ position:relative; }
nav.tabbar .tb-selo{ position:absolute; top:2px; left:calc(50% + 6px); box-sizing:border-box;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--brand); color:#1a0d05; font-size:9.5px; font-weight:900; line-height:14px;
  text-align:center; border:1px solid var(--ink-900); pointer-events:none; }