/* =============================================================================
   TO PRO JOGO - novo.css: o visual novo, em acesso antecipado
   =============================================================================

   Tudo aqui vale SO com html[data-visual="novo"]. Sem o atributo, nenhuma
   regra desta folha casa com nada e o app e o clássico, pixel a pixel. E isso
   que torna o "voltar ao visual atual" seguro: nao ha dois CSS brigando, ha
   um só com uma camada opcional por cima. A suite testes/visual.mjs prova as
   duas coisas (todo seletor começa com o prefixo, e o clássico computa igual
   com e sem esta folha carregada).

   A ideia do desenho, em uma linha: vidro, preto profundo e um brilho de brasa.
   O laranja deixa de ser tinta de bloco e vira luz: um halo no alto da tela,
   que aparece atras do vidro da barra, a borda acesa dos cartoes-heroi e o
   botao "+" no centro da barra flutuante. O resto é neutro frio, tipografia
   do sistema grande e pesada, e espaço.

   Por que redefinir os TOKENS em vez de reescrever componente por componente:
   o app.css inteiro, e as folhas de outros agentes (marcar.css), pintam com
   var(--brand), var(--ink-800) etc. Trocando as variáveis, tudo que existe e
   tudo que vier a existir ja nasce no visual novo, sem regra nova.

   Especificidade: o app.css escreve o tema claro como :root[data-tema="claro"]
   (0,2,0). Por isso os tokens claros aqui vêm com os dois atributos (0,2,1), e
   os poucos componentes que o app.css sobrescreve no claro recebem
   [data-tema] no prefixo, para vencer sem !important.
   ========================================================================== */

/* ---- Tokens: escuro (o :root do app.css também é o escuro) ---------------- */
html[data-visual="novo"]{
  --brand:#FF7A2E;
  --brand-lt:#FFA05C;
  --brand-dk:#E85A10;
  --brand-rgb:255,122,46;
  --brand-txt:#FF9A55;          /* laranja que pinta LETRA sobre o fundo */
  --sobre-brand:#1A0D05;        /* letra sobre o laranja: 6,6 de contraste */

  --ink-900:#000000;            /* a pagina: preto de verdade, como no OLED */
  --ink-800:#121214;            /* cartao */
  --ink-700:#1E1E21;            /* preenchimento: chip, botao cinza */
  --ink-600:#2E2E33;            /* trilho, divisor forte */
  --line:rgba(255,255,255,.08);
  --txt:#F5F5F7;
  --dim:#98989F;
  --dim2:#8E8E94;
  --dim3:#8A8A90;

  --ok:#30D158;
  --live:#FF453A;
  --moment:#FF375F;

  /* Os herois sao grafite com uma luz colorida vazando do canto: a cor fica
     na luz, e nao no bloco. O mesmo desenho nos dois temas, de proposito: um
     cartao escuro sobre pagina clara e o que da peso ao destaque. */
  --hero:radial-gradient(70% 50% at 100% 0%,rgba(255,138,60,.9) 0%,rgba(255,106,26,.38) 45%,rgba(255,106,26,0) 100%),
         radial-gradient(130% 90% at 100% 0%,rgba(255,106,26,.28) 0%,rgba(255,106,26,0) 70%),
         linear-gradient(165deg,#2B2B30 0%,#121214 72%);
  --hero-p:radial-gradient(120% 85% at 100% 0%,rgba(125,110,255,.5) 0%,rgba(125,110,255,0) 58%),
           linear-gradient(165deg,#2B2B30 0%,#121214 72%);
  --hero-g:radial-gradient(120% 85% at 100% 0%,rgba(48,209,160,.42) 0%,rgba(48,209,160,0) 58%),
           linear-gradient(165deg,#2B2B30 0%,#121214 72%);
  --mom-g:linear-gradient(140deg,#FF7A2E,#FF375F 72%);
  --glow:0 22px 44px -26px rgba(255,122,46,.6);

  --fundo:#000000;
  --barra:rgba(28,28,30,.85);
  --veu:rgba(0,0,0,.55);
  --mapa:#141416;

  /* So do visual novo */
  --aura:rgba(255,122,46,.17);              /* o halo de brasa no alto */
  --capa:radial-gradient(120% 110% at 85% 0%,rgba(255,122,46,.5) 0%,rgba(255,122,46,0) 60%),#0B0B0C;
  --vidro:rgba(28,28,30,.88);               /* barra flutuante */
  --vidro-topo:rgba(0,0,0,.62);             /* barra de cima */
  --vidro-borda:rgba(255,255,255,.1);
  --vidro-luz:rgba(255,255,255,.07);        /* o fio de luz na borda de cima */
  --tb-txt:#AEAEB2;
  --tb-on:#FFAA70;
  --tb-capsula:rgba(255,122,46,.16);        /* a aba atual: brasa */
  --tb-capsula-sombra:none;
  --folha:#1C1C1E;
  --campo-folha:#2C2C2E;                    /* campo dentro de folha ou cartao */
  --sombra:inset 0 0 0 1px rgba(255,255,255,.06);
  --sombra-leve:inset 0 0 0 1px rgba(255,255,255,.06);
  --sombra-flutua:0 12px 32px -10px rgba(0,0,0,.7);
  --mola:cubic-bezier(.34,1.56,.64,1);      /* mola curta, com um pouco de passo */
  --raio:22px;
}

/* ---- Tokens: claro -------------------------------------------------------- */
html[data-visual="novo"][data-tema="claro"]{
  --brand:#F26419;
  --brand-lt:#FF8A45;
  --brand-dk:#D24E0A;
  --brand-rgb:242,100,25;
  --brand-txt:#A63C08;          /* 5,5 sobre a pagina, 4,5 sobre o vidro no pior caso */
  --sobre-brand:#1A0D05;

  /* Cinzas frios, a escada da Apple: pagina cinza muito claro, cartao
     branco. A profundidade vem da diferenca entre os dois e de uma sombra
     quase invisivel, e nao de borda. */
  --ink-900:#F5F5F7;
  --ink-800:#FFFFFF;
  --ink-700:#EBEBF0;
  --ink-600:#D9D9DF;
  --line:rgba(60,60,67,.12);
  --txt:#0B0B0F;
  --dim:#636366;
  --dim2:#636366;
  --dim3:#66666B;

  --ok:#248A3D;
  --live:#D70015;
  --moment:#D30F5A;

  --hero:radial-gradient(70% 50% at 100% 0%,rgba(255,138,60,.92) 0%,rgba(255,106,26,.4) 45%,rgba(255,106,26,0) 100%),
         radial-gradient(130% 90% at 100% 0%,rgba(255,106,26,.3) 0%,rgba(255,106,26,0) 70%),
         linear-gradient(165deg,#2E2E33 0%,#161618 72%);
  --hero-p:radial-gradient(120% 85% at 100% 0%,rgba(125,110,255,.55) 0%,rgba(125,110,255,0) 58%),
           linear-gradient(165deg,#2E2E33 0%,#161618 72%);
  --hero-g:radial-gradient(120% 85% at 100% 0%,rgba(48,209,160,.46) 0%,rgba(48,209,160,0) 58%),
           linear-gradient(165deg,#2E2E33 0%,#161618 72%);
  --mom-g:linear-gradient(140deg,#F26419,#D30F5A 72%);
  --glow:0 20px 40px -24px rgba(242,100,25,.55);

  --fundo:#E8E8ED;
  --barra:rgba(255,255,255,.85);
  --veu:rgba(0,0,0,.3);
  --mapa:#E9E9EE;

  --aura:rgba(255,120,40,.16);
  --capa:radial-gradient(120% 110% at 85% 0%,rgba(255,120,40,.5) 0%,rgba(255,120,40,0) 62%),
         linear-gradient(#FFFFFF,#F5F5F7);
  --vidro:rgba(255,255,255,.85);
  --vidro-topo:rgba(245,245,247,.72);
  --vidro-borda:rgba(0,0,0,.06);
  --vidro-luz:rgba(255,255,255,.95);
  --tb-txt:#3C3C43;
  --tb-on:#A63C08;
  --tb-capsula:rgba(255,255,255,.9);        /* a aba atual: uma pilula branca saltada, como no controle segmentado */
  --tb-capsula-sombra:0 1px 4px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04);
  --folha:#FFFFFF;
  --campo-folha:#EBEBF0;
  --sombra:0 0 0 .5px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.04),0 10px 28px -14px rgba(0,0,0,.14);
  --sombra-leve:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04);
  --sombra-flutua:0 14px 36px -12px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.05);
}

/* ---- Base ----------------------------------------------------------------- */

/* Inter em todo aparelho (decisao do dono, rodada 5): o app.css ja a carrega
   do Google Fonts com os pesos 400 a 900, e a fonte do sistema fica so de
   reserva, para o instante antes de ela chegar (display=swap) ou sem rede. */
html[data-visual="novo"] body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  letter-spacing:-.011em;
}
html[data-visual="novo"] .leaflet-container{ font-family:inherit !important; }

/* O halo: preso ao fundo da coluna, e nao ao conteudo. Quem rola é a
   .rolagem, por dentro, então a luz fica parada no alto como uma fonte de
   luz de verdade, e os cartoes passam por baixo dela. */
html[data-visual="novo"] .app{
  background:radial-gradient(95% 34% at 50% -8%,var(--aura),rgba(0,0,0,0) 72%),var(--ink-900);
}

/* Barra de rolagem neutra (so aparece no computador): no visual novo o
   laranja nao pinta faixa de interface. */
html[data-visual="novo"] *{ scrollbar-color:rgba(128,128,128,.45) transparent; }
html[data-visual="novo"] *::-webkit-scrollbar-thumb,
html[data-visual="novo"] *::-webkit-scrollbar-thumb:hover{ background:rgba(128,128,128,.45); background-clip:padding-box; }

/* Numeros tabulares onde a leitura é em coluna: preco, hora, placar. */
html[data-visual="novo"] .preco,
html[data-visual="novo"] .num b,
html[data-visual="novo"] .slot,
html[data-visual="novo"] .dia b,
html[data-visual="novo"] .resumo b,
html[data-visual="novo"] .revisao-linha b,
html[data-visual="novo"] .pf-social b,
html[data-visual="novo"] .mh-slot,
html[data-visual="novo"] .card .pilha + span{ font-variant-numeric:tabular-nums; }

/* ---- Barra de cima: vidro, sem linha -------------------------------------- */

html[data-visual="novo"][data-tema] .appbar,
html[data-visual="novo"] .appbar.linha{
  background:var(--vidro-topo);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0;
  padding:12px 16px 10px;
  gap:10px;
}

/* Titulo grande, pesado e apertado: a hierarquia vem do tamanho. */
html[data-visual="novo"] .appbar h2{
  font-size:28px; font-weight:800; letter-spacing:-.035em; line-height:1.12;
}
html[data-visual="novo"] .appbar h2 .sm{ font-size:12.5px; font-weight:500; letter-spacing:-.005em; margin-top:2px; }
html[data-visual="novo"] .logo{ font-size:18px; letter-spacing:-.045em; }

html[data-visual="novo"] .ico,
html[data-visual="novo"] .voltar{ width:36px; height:36px; }
html[data-visual="novo"] .ico.f,
html[data-visual="novo"] .voltar{ background:var(--ink-700); }
html[data-visual="novo"] .ico.b{ color:var(--sobre-brand); box-shadow:0 6px 16px -6px rgba(var(--brand-rgb),.7); }
html[data-visual="novo"] .ordenar-btn{ width:36px; height:36px; border:0; }

/* ---- Abas de esporte: texto solto, a escolhida vira uma pilula ------------ */

html[data-visual="novo"] .chips{ gap:4px; padding:2px 16px 14px; }
html[data-visual="novo"] .chip{
  font-size:14px; font-weight:600; letter-spacing:-.015em;
  padding:8px 14px; border-radius:999px;
}
/* A escolhida é a cor do TEXTO invertida (preta no claro, branca no escuro),
   como no App Store. Laranja aqui seria bloco de cor, e ele é só acento. */
html[data-visual="novo"] button.chip.on,
html[data-visual="novo"] button.chip.br{ background:var(--txt); color:var(--ink-900); }
/* Chip que nao é botao é etiqueta (nivel, esporte no perfil): cinza calmo,
   e o nivel ganha o tom da marca so na letra. */
html[data-visual="novo"] span.chip{ background:var(--ink-700); color:var(--txt); font-size:13px; padding:7px 13px; }
html[data-visual="novo"] span.chip.br{ background:rgba(var(--brand-rgb),.14); color:var(--brand-txt); }

/* ---- Titulos de seção ----------------------------------------------------- */

html[data-visual="novo"] #saudacao{
  font-size:32px !important;        /* o tamanho vem inline no app.html */
  font-weight:800 !important;
  letter-spacing:-.04em !important;
  line-height:1.08;
}
html[data-visual="novo"] #subSaudacao{ font-size:15px; margin-top:6px !important; line-height:1.4; }

html[data-visual="novo"] .sec-t{ margin-bottom:12px; align-items:baseline; }
html[data-visual="novo"] .sec-t h3{ font-size:21px; font-weight:700; letter-spacing:-.03em; line-height:1.15; }
html[data-visual="novo"] .sec-t a,
html[data-visual="novo"] .sec-t button.link{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--brand-txt); white-space:nowrap; }
html[data-visual="novo"] #faixas > .faixa + .faixa{ margin-top:34px; }

html[data-visual="novo"] .rotulo{
  font-size:20px; font-weight:700; letter-spacing:-.028em; text-transform:none;
  color:var(--txt); margin-bottom:12px;
}
html[data-visual="novo"] .rotulo.mt16{ margin-top:30px; }
html[data-visual="novo"] .rotulo em{ color:var(--brand-txt); font-weight:600; }

html[data-visual="novo"] .pequeno{ font-size:13px; line-height:1.45; }
html[data-visual="novo"] .texto-corrido{ font-size:15px; line-height:1.55; color:var(--dim); }

/* ---- Cartoes, etiquetas, botoes ------------------------------------------- */

html[data-visual="novo"][data-tema] .card{
  border:0; border-radius:22px; padding:18px;
  box-shadow:var(--sombra); margin-bottom:12px;
}
/* O jogo em que falta gente é um cartao normal com a borda acesa: o aviso
   esta na luz, e nao num fundo salmao. */
html[data-visual="novo"][data-tema] .card.hi{
  background:var(--ink-800);
  box-shadow:var(--sombra),inset 0 0 0 1.5px rgba(var(--brand-rgb),.38);
}
html[data-visual="novo"] .card .pequeno{ font-size:13px; }

/* Laranja como LETRA escrito inline (preco no cartao de partida, na ficha da
   quadra): o ui.js e o arena.html pintam com var(--brand), que no claro é cor
   de preenchimento (3,2 sobre branco). Aqui a letra passa para o laranja de
   texto, que da AA. O seletor por atributo é o unico gancho sem mexer no JS
   (ver recomendacao de classe no retorno). */
html[data-visual="novo"] [style*="color:var(--brand)"]{ color:var(--brand-txt) !important; }
html[data-visual="novo"] #fichaQuadra .entre > div:last-child,
html[data-visual="novo"] #reservaPreco{ white-space:nowrap; }

html[data-visual="novo"] .tag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:5px 9px; border-radius:999px; white-space:nowrap;
}
html[data-visual="novo"] .tag.o{ background:rgba(var(--brand-rgb),.14); color:var(--brand-txt); }
html[data-visual="novo"] .tag.ok{ background:rgba(48,209,88,.16); color:var(--ok); }
html[data-visual="novo"] .tag.cinza{ background:var(--ink-700); color:var(--dim); }

html[data-visual="novo"] .pilha .vaga{ border-color:rgba(var(--brand-rgb),.6); }

html[data-visual="novo"] .btn{
  border-radius:999px; font-size:16px; font-weight:600; letter-spacing:-.015em;
  padding:15px 18px; color:var(--sobre-brand);
}
html[data-visual="novo"] .btn.sm{ font-size:14px; padding:10px 16px; }
html[data-visual="novo"][data-tema] .btn.gh{ background:var(--ink-700); border-color:transparent; color:var(--txt); }
html[data-visual="novo"] .btn.gh:hover:not(:disabled){ border-color:transparent; }
html[data-visual="novo"] .btn.wh{ color:#0B0B0F; }

/* ---- Vitrine de arenas ---------------------------------------------------- */

html[data-visual="novo"] .vitrine{ gap:14px; }
html[data-visual="novo"] .destaque,
html[data-visual="novo"] .destaque.roxo,
html[data-visual="novo"] .destaque.verde{
  width:min(84%,300px); height:372px; border-radius:30px; padding:20px;
  box-shadow:0 30px 50px -34px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.07); outline-offset:-1px;
}
html[data-visual="novo"][data-tema] .destaque .veu{
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,0) 62%);
}
/* O selo e o botao sao vidro sobre o heroi: a luz de tras atravessa. */
html[data-visual="novo"] .destaque .selo{
  top:16px; left:16px; font-size:12px; font-weight:600; letter-spacing:-.01em; padding:7px 12px;
  background:rgba(255,255,255,.14); border:0;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
}
html[data-visual="novo"] .destaque .quadra-svg{ opacity:.28; }
html[data-visual="novo"] .destaque h4{ font-size:27px; font-weight:800; letter-spacing:-.04em; line-height:1.05; margin-bottom:6px; }
html[data-visual="novo"] .destaque p{ font-size:13px; line-height:1.4; color:rgba(255,255,255,.74); }
html[data-visual="novo"] .destaque .preco{ font-size:13px; color:rgba(255,255,255,.74); margin-bottom:16px; }
html[data-visual="novo"] .destaque .preco b{ font-size:24px; font-weight:700; letter-spacing:-.03em; }
html[data-visual="novo"] .destaque .btn{
  background:rgba(255,255,255,.16); color:#FFFFFF; font-size:15px; padding:13px;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
html[data-visual="novo"][data-tema] .pontos i{ background:var(--ink-600); }
html[data-visual="novo"] .pontos i.on{ width:18px; background:var(--brand); }

html[data-visual="novo"] .trilha{ gap:12px; }
html[data-visual="novo"] .trilha .card{ margin:0; }
html[data-visual="novo"] .miniatura{ border-radius:16px; }
html[data-visual="novo"] .fp-mini .capa{ border-radius:18px; border:0; }
html[data-visual="novo"] .mapa{ border-radius:22px; border:0; box-shadow:var(--sombra-leve); }

/* ---- O heroi "próximo jogo" ------------------------------------------------ */

/* O primeiro cartao de "Seus próximos jogos" vira uma ilha escura com a luz de
   brasa. Os textos do cartao usam var(--txt)/var(--dim)/var(--brand) em
   estilo inline (ui.js, cartaoDePartida); redefinir as variaveis NESTE
   cartao faz tudo dentro dele virar claro sobre escuro sem tocar no ui.js e
   sem !important. */
html[data-visual="novo"][data-tema] #minhas > .card:first-child{
  --txt:#FFFFFF;
  --dim:rgba(235,235,245,.7);
  --brand:#FFA366;
  --brand-txt:#FFB27A;
  --ok:#30D158;
  --ink-800:#222226;
  --ink-700:rgba(255,255,255,.14);
  --ink-600:rgba(255,255,255,.22);
  --line:rgba(255,255,255,.12);
  position:relative;
  background:var(--hero);
  color:#FFFFFF;
  padding:22px 20px 20px;
  border-radius:28px;
  box-shadow:0 26px 48px -30px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.07); outline-offset:-1px;
}
html[data-visual="novo"] #minhas > .card:first-child::before{
  content:"Pr\00F3ximo jogo";   /* escape: a folha nao declara charset */
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-txt);
}
/* O titulo do jogo cresce: tamanho inline no ui.js, dai o !important. */
html[data-visual="novo"] #minhas > .card:first-child > .entre:first-child > div > div:first-child{
  font-size:22px !important; font-weight:800 !important; letter-spacing:-.035em !important; line-height:1.15;
}
html[data-visual="novo"] #minhas > .card:first-child .tag.o{ background:rgba(255,163,102,.2); }

/* ---- Arena: dias e horarios ----------------------------------------------- */

html[data-visual="novo"] .dias{ gap:8px; padding:2px 0 18px; }
html[data-visual="novo"] .dia{
  border:0; border-radius:18px; padding:10px 14px; min-width:56px;
  background:var(--ink-800); box-shadow:var(--sombra-leve);
  font-size:11px; letter-spacing:.06em; color:var(--dim);
}
html[data-visual="novo"] .dia b{ font-size:19px; font-weight:700; letter-spacing:-.03em; margin-top:3px; }
html[data-visual="novo"] .dia.on{ background:var(--txt); color:var(--ink-900); box-shadow:none; }
html[data-visual="novo"] .dia.on b{ color:var(--ink-900); }

html[data-visual="novo"] .grade{ gap:10px; }
html[data-visual="novo"] .slot{
  border:0; border-radius:16px; padding:12px 4px 11px;
  background:var(--ink-800); box-shadow:var(--sombra-leve);
  font-size:17px; font-weight:600; letter-spacing:-.02em;
}
html[data-visual="novo"] .slot small{ font-size:11px; font-weight:500; letter-spacing:0; margin-top:2px; }
html[data-visual="novo"] .slot.aberta{
  background:rgba(var(--brand-rgb),.08);
  box-shadow:inset 0 0 0 1.5px rgba(var(--brand-rgb),.42);
}
html[data-visual="novo"] .slot.aberta small,
html[data-visual="novo"] .slot.meu small{ color:var(--brand-txt); }
html[data-visual="novo"] .slot.meu{
  background:rgba(var(--brand-rgb),.14);
  box-shadow:inset 0 0 0 1.5px var(--brand);
}
html[data-visual="novo"] .slot.on{ background:var(--brand); color:var(--sobre-brand); box-shadow:none; }
html[data-visual="novo"] .slot:disabled{ opacity:.38; box-shadow:none; background:transparent; }

/* Os numeros da arena e do perfil viram um painel, como o resumo do Saude. */
html[data-visual="novo"] .numeros{
  border:0; border-radius:22px; padding:16px 4px;
  background:var(--ink-800); box-shadow:var(--sombra);
}
html[data-visual="novo"] .num b{ font-size:22px; font-weight:700; letter-spacing:-.035em; }
html[data-visual="novo"] .num span{ font-size:12px; font-weight:500; }

/* ---- Listas, campos, interruptor ------------------------------------------ */

html[data-visual="novo"] .linha{ padding:14px 0; border-bottom-color:var(--line); }
html[data-visual="novo"] .linha .txt h5{ font-size:15px; font-weight:500; letter-spacing:-.015em; }
html[data-visual="novo"] .linha .txt p{ font-size:13px; }
html[data-visual="novo"] .linha .fim{ font-size:13px; }
html[data-visual="novo"] .linha .fim b{ font-size:15px; font-weight:500; color:var(--dim); letter-spacing:-.015em; }

html[data-visual="novo"] .campo label{ font-size:13px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--dim); }
html[data-visual="novo"][data-tema] .campo input,
html[data-visual="novo"][data-tema] .campo select,
html[data-visual="novo"][data-tema] .campo textarea{
  background:var(--ink-800); border:1px solid transparent; border-radius:14px;
  box-shadow:var(--sombra-leve); font-weight:500; padding:14px;
}
/* Na pagina o campo é o cartao branco; dentro de folha ou cartao (que ja
   sao brancos) ele afunda um tom, senao some. */
html[data-visual="novo"][data-tema] .folha .campo input,
html[data-visual="novo"][data-tema] .folha .campo select,
html[data-visual="novo"][data-tema] .folha .campo textarea,
html[data-visual="novo"][data-tema] .card .campo input,
html[data-visual="novo"][data-tema] .card .campo select,
html[data-visual="novo"][data-tema] .card .campo textarea{ background:var(--campo-folha); box-shadow:none; }
/* O foco vem depois das duas, para valer tambem dentro da folha. */
html[data-visual="novo"][data-tema] .campo input:focus,
html[data-visual="novo"][data-tema] .campo select:focus,
html[data-visual="novo"][data-tema] .campo textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.18);
}

/* Interruptor no desenho do iOS: 51x31, bolinha com sombra, e a bolinha anda
   por transform (GPU), nao por left. */
html[data-visual="novo"] .switch{
  border:0; border-radius:22px; padding:16px 18px; gap:14px;
  background:var(--ink-800); box-shadow:var(--sombra);
}
html[data-visual="novo"] .switch .txt b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
html[data-visual="novo"] .switch .txt span{ font-size:13px; line-height:1.4; margin-top:3px; }
html[data-visual="novo"] .switch .trilho{ width:51px; height:31px; border-radius:999px; background:var(--ink-600); }
html[data-visual="novo"] .switch .trilho::after,
html[data-visual="novo"] .switch.on .trilho::after{
  left:2px; top:2px; width:27px; height:27px; background:#FFFFFF;
  box-shadow:0 3px 8px rgba(0,0,0,.16),0 1px 1px rgba(0,0,0,.14);
  transition:transform .42s var(--mola);
}
html[data-visual="novo"] .switch.on .trilho{ background:var(--brand); }
html[data-visual="novo"] .switch.on .trilho::after{ transform:translateX(20px); }

/* ---- Capas (arena e perfil) ----------------------------------------------- */

html[data-visual="novo"] .capa .fundo{ background:var(--capa); }
html[data-visual="novo"][data-tema] .capa .veu{ background:linear-gradient(to top,var(--ink-900),rgba(0,0,0,0) 70%); }
html[data-visual="novo"] .capa .voltar,
html[data-visual="novo"] .capa .acoes .ico{
  width:38px; height:38px;
  background:var(--vidro); color:var(--txt);
  box-shadow:inset 0 0 0 .5px var(--vidro-borda),0 4px 14px -6px rgba(0,0,0,.3);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
html[data-visual="novo"] .marca{ border-radius:16px; }

/* A entrada (index, antes do login) usa a mesma luz da capa: o grafite do
   heroi, esmaecendo ate a pagina clara, virava um cinza sujo no meio. */
html[data-visual="novo"] .entrada .fundo{ background:var(--capa); opacity:1; }
html[data-visual="novo"] .entrada .titulo{ font-size:44px; font-weight:800; letter-spacing:-.05em; }
html[data-visual="novo"] .entrada .promessa{ font-size:16px; line-height:1.45; }
html[data-visual="novo"] .tema-btn{
  border:0; background:var(--vidro); color:var(--txt);
  box-shadow:inset 0 0 0 .5px var(--vidro-borda),0 4px 14px -6px rgba(0,0,0,.3);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}

/* ---- Barra de baixo: pilula de vidro flutuante ---------------------------- */

/* Sai do fluxo e flutua sobre a .rolagem. E so assim que o vidro tem o que
   desfocar: o conteudo passa por baixo dela. A .rolagem ganha o respiro de
   baixo para o ultimo cartao nao ficar escondido atras da pilula. */
html[data-visual="novo"][data-tema] .tabbar{
  position:absolute; left:12px; right:12px; top:auto;
  bottom:max(12px,env(safe-area-inset-bottom));
  margin:0; padding:6px; gap:2px;
  border:0; border-radius:32px;
  justify-content:space-between;
  background:var(--vidro);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  box-shadow:inset 0 0 0 .5px var(--vidro-borda),inset 0 1px 0 var(--vidro-luz),var(--sombra-flutua);
}
html[data-visual="novo"] .rolagem{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
html[data-visual="novo"] .torrada{ bottom:calc(96px + env(safe-area-inset-bottom)); }

html[data-visual="novo"] .tb{
  gap:3px; padding:7px 0 6px; border-radius:26px;
  font-size:10px; font-weight:600; letter-spacing:-.005em;
  color:var(--tb-txt);
}
html[data-visual="novo"] .tb svg{ width:23px; height:23px; }
html[data-visual="novo"] .tb:hover{ color:var(--txt); }
/* A aba atual ganha uma capsula por tras (branca no claro, de brasa no
   escuro) e a letra no laranja de texto. Os tons sairam da conta de
   contraste no pior fundo possivel sob o vidro, preto ou branco puro (ver
   visual.mjs, parte 8). */
html[data-visual="novo"][data-tema] .tb.on,
html[data-visual="novo"][data-tema] .tb.on:hover{
  color:var(--tb-on);
  background:var(--tb-capsula);
  box-shadow:var(--tb-capsula-sombra);
}

/* O botao central de marcar horario (contrato com o ui.js/marcar.js): um
   circulo de brasa com luz propria, dentro da pilula e sem vazar dela. */
html[data-visual="novo"] .tb.tb-mais{ flex:0 0 auto; padding:0 4px; background:transparent; justify-content:center; }
/* O ui.js injeta o desenho clássico do "+" (fundo var(--brand), anel e margem
   negativa para ele saltar da barra) num <style id="estiloTbMais"> ANTES
   deste arquivo. Aqui ele é redesenhado para morar dentro da pílula: o
   seletor tem o prefixo, então vence pela especificidade, e a ordem no
   <head> garante o empate (testes/integracao.mjs guarda as duas coisas).
   O fundo sólido é o laranja escuro da marca, e não var(--brand): o "+"
   branco sobre var(--brand) fica em 2,6:1, abaixo do 3:1 que um ícone
   precisa; sobre --brand-dk fica em 3,6 no escuro e 4,3 no claro. O brilho
   de cima é só um fio de luz, para o círculo parecer brasa e não bola. */
html[data-visual="novo"] .tb-mais .tb-mais-circ{
  width:48px; height:48px; max-width:none; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; overflow:visible;
  font-size:28px; font-weight:400; line-height:1; color:#FFFFFF;
  background-color:var(--brand-dk);
  background-image:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 52%);
  box-shadow:0 3px 9px -3px rgba(var(--brand-rgb),.7),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(0,0,0,.08);
}
html[data-visual="novo"] .tb-mais .tb-mais-circ svg{ width:24px; height:24px; }
/* O toque já encolhe o botão inteiro (a mola do .tb:active, mais abaixo);
   sem isto o círculo encolheria duas vezes, pelo :active do ui.js também. */
html[data-visual="novo"] .tb.tb-mais:active .tb-mais-circ{ transform:none; }
/* 360px: 7 posições numa pílula. Com o respiro da tela larga, cada aba
   ficava com 42px e "Meu time" e "FeedPlay" ganhavam reticências. Abaixo de
   381px a pílula encosta um pouco mais na borda e perde o espaço entre as
   abas, e cada rótulo volta a caber inteiro. */
@media (max-width:380px){
  html[data-visual="novo"][data-tema] .tabbar{ left:8px; right:8px; padding:5px 4px; gap:0; }
  html[data-visual="novo"] .tb.tb-mais{ padding:0 2px; }
  html[data-visual="novo"] .tb{ letter-spacing:-.02em; }
}
/* Se o botao central trouxer rotulo, ele segue lido pelo leitor de tela mas
   sai da vista: o circulo ja diz o que faz e a pilula nao comporta mais uma
   linha de texto. */
html[data-visual="novo"] .tb-mais > span:not(.tb-mais-circ){
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---- Folhas (reserva, momento e o fluxo Marcar horario) ------------------- */

html[data-visual="novo"] .sobreposicao{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
html[data-visual="novo"][data-tema] .folha{
  background:var(--folha); border-top:0;
  border-radius:34px 34px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.18);
}
html[data-visual="novo"] .pega{ width:38px; height:5px; background:var(--ink-600); }
html[data-visual="novo"] .folha h3{ font-size:22px; font-weight:700; letter-spacing:-.03em; }
html[data-visual="novo"] .folha .sub{ font-size:14px; }
html[data-visual="novo"] .resumo{ font-size:14px; }
html[data-visual="novo"] .resumo.total b{ font-size:20px; letter-spacing:-.03em; }
html[data-visual="novo"] .revisao{ border:0; border-radius:18px; background:var(--ink-700); }
@media (min-width:560px){
  html[data-visual="novo"][data-tema] .folha{ border-radius:30px; }
}

/* ---- Marcar horario: a folha do "+" --------------------------------------- */

/* A folha de marcar é uma tela de tarefa, e no visual novo ela segue o
   desenho das telas do app: pagina cinza (a --ink-900), cartoes brancos sem
   borda com sombra quase invisivel, a escolhida marcada por luz (um anel da
   marca) e nao por bloco de cor. As regras do marcar.css que desenham
   borda de 1,5px em tudo sao do classico e ficam intactas la; aqui elas sao
   repintadas, com o prefixo, e so aqui. */
html[data-visual="novo"] .mh{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
html[data-visual="novo"] .mh-folha{ background:var(--ink-900); }
/* No escuro a pagina do app é preto puro, e uma folha preta sobre ela
   sumiria. A folha sobe um degrau, como a folha do iOS no escuro: fundo
   #1C1C1E e cartoes #2C2C2E. Os tokens sao redefinidos so dentro dela, e
   tudo que o marcar.css e as regras abaixo pintam com var(--ink-*) sobe
   junto, sem regra a mais. */
html[data-visual="novo"][data-tema="escuro"] .mh-folha{
  --ink-900:#1C1C1E; --ink-800:#2C2C2E; --ink-700:#3A3A3C; --ink-600:#48484A;
}

/* No celular a folha para 12px abaixo do topo da tela (mais a area do
   relogio), como a folha de pagina do iOS: a tela de baixo aparece
   escurecida em cima, e fica claro que fechar volta para ela. */
@media (max-width:559px){
  html[data-visual="novo"] .mh-folha{
    height:calc(100vh - 12px - env(safe-area-inset-top));
    height:calc(100dvh - 12px - env(safe-area-inset-top));
    border-radius:28px 28px 0 0; overflow:hidden;
    box-shadow:0 -10px 40px rgba(0,0,0,.22);
  }
  html[data-visual="novo"] .mh-topo{ padding-top:8px; }
}
@media (min-width:560px){
  html[data-visual="novo"] .mh-folha{ border:0; border-radius:30px; }
}

/* Topo: a mesma pagina, sem faixa de outra cor; um fio de linha separa o
   que rola. Titulo no tamanho da barra do iOS, peso do resto do visual. */
html[data-visual="novo"] .mh-topo{ background:var(--ink-900); border-bottom:.5px solid var(--line); padding-bottom:12px; }
html[data-visual="novo"] .mh-etapa{ font-size:12px; font-weight:600; letter-spacing:-.005em; text-transform:none; }
html[data-visual="novo"] .mh-titulo{ font-size:17px; font-weight:700; letter-spacing:-.022em; }
/* Voltar e fechar: circulo cinza de 34px, como os botoes da barra de cima,
   dentro de um alvo de toque de 44px (o fundo so pinta o miolo). */
html[data-visual="novo"] .mh-voltar,
html[data-visual="novo"] .mh-fechar,
html[data-visual="novo"] .mh-voltar:active,
html[data-visual="novo"] .mh-fechar:active{
  padding:5px; background:var(--ink-700); background-clip:content-box; color:var(--txt);
}
html[data-visual="novo"] .mh-voltar svg,
html[data-visual="novo"] .mh-fechar svg{ width:17px; height:17px; stroke-width:2.6; }
html[data-visual="novo"] .mh-prog{ gap:4px; margin:12px 14px 0; }
html[data-visual="novo"] .mh-prog i,
html[data-visual="novo"] .mh-prog i::after{ height:3px; border-radius:999px; }
html[data-visual="novo"] .mh-trilha{ font-size:13px; font-weight:500; letter-spacing:-.01em; margin-top:10px; }

html[data-visual="novo"] .mh-corpo{ padding:18px 16px 26px; }
html[data-visual="novo"] .mh-lead,
html[data-visual="novo"] .mh-nada{ font-size:14px; line-height:1.45; }

/* Opcoes (arena, quadra, jogo): cartao do visual novo. */
html[data-visual="novo"] .mh-lista{ gap:12px; }
html[data-visual="novo"] .mh-op{
  border:0; border-radius:22px; padding:16px 14px 16px 16px; min-height:74px;
  background:var(--ink-800); box-shadow:var(--sombra-leve);
}
html[data-visual="novo"] .mh-op.on{
  background:var(--ink-800);
  box-shadow:var(--sombra-leve),inset 0 0 0 1.5px var(--brand);
}
html[data-visual="novo"] .mh-op.sugerida{ box-shadow:var(--sombra-leve),inset 0 0 0 1.5px rgba(var(--brand-rgb),.4); }
html[data-visual="novo"] .mh-op-marca{ border-radius:14px; font-weight:700; letter-spacing:-.02em; color:var(--brand-txt); }
html[data-visual="novo"] .mh-op-txt b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
html[data-visual="novo"] .mh-op-txt small{ font-size:13px; line-height:1.35; }
html[data-visual="novo"] .mh-op-fim small{ font-size:11px; font-weight:500; }
html[data-visual="novo"] .mh-op-fim b{ font-size:17px; font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
html[data-visual="novo"] .mh-selo{ border-radius:999px; font-weight:700; letter-spacing:.04em; background:rgba(var(--brand-rgb),.14); }
html[data-visual="novo"] .mh-busca input{ border:0; border-radius:14px; background:var(--ink-700); }

/* Dias: o mesmo desenho do .dia da tela da arena no visual novo. */
/* scroll-padding: a faixa encaixa cada dia pelo começo (scroll-snap do
   marcar.css), e sem ele o encaixe gruda o dia na borda da tela e esconde
   o "Hoje". Com 16px o dia para no mesmo respiro do resto da folha. */
html[data-visual="novo"] .mh-dias{ gap:8px; padding-bottom:10px; margin-bottom:12px; scroll-padding:0 16px; }
html[data-visual="novo"] .mh-dia{
  border:0; border-radius:18px; min-width:58px;
  background:var(--ink-800); box-shadow:var(--sombra-leve);
}
html[data-visual="novo"] .mh-dia span{ font-size:11px; font-weight:600; letter-spacing:.04em; }
html[data-visual="novo"] .mh-dia b{ font-size:20px; font-weight:700; }
html[data-visual="novo"] .mh-dia small{ font-size:11px; font-weight:500; }
html[data-visual="novo"] .mh-dia.on{ background:var(--txt); color:var(--ink-900); box-shadow:none; }
html[data-visual="novo"] .mh-dia.on b{ color:var(--ink-900); }

/* Titulos de grupo: como o .rotulo do visual novo, frase e nao caixa alta. */
html[data-visual="novo"] .mh-periodo,
html[data-visual="novo"] .mh-rotulo{
  font-size:17px; font-weight:700; letter-spacing:-.025em; text-transform:none;
  color:var(--txt); margin:8px 0 12px;
}
html[data-visual="novo"] .mh-periodo em{ font-size:13px; font-weight:600; letter-spacing:-.005em; margin-left:6px; }

/* Horarios: cartoes sem borda; o desfalcado é a luz da marca, como o
   .slot.aberta da arena no visual novo. */
html[data-visual="novo"] .mh-grade{ gap:10px; margin-bottom:22px; }
html[data-visual="novo"] .mh-slot{
  border:0; border-radius:16px; min-height:64px;
  background:var(--ink-800); box-shadow:var(--sombra-leve);
}
html[data-visual="novo"] .mh-slot b{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
/* Na grade de 4 colunas (tela a partir de 420px) "seu jogo · faltam 9" nao
   cabe numa linha, e a quebra comum deixava o "9" sozinho embaixo. O
   balance divide o texto em duas linhas de tamanho parecido. */
html[data-visual="novo"] .mh-slot small{ font-size:11px; font-weight:500; padding:0 4px; text-wrap:balance; }
html[data-visual="novo"] .mh-slot.vaga{
  background:rgba(var(--brand-rgb),.08);
  box-shadow:inset 0 0 0 1.5px rgba(var(--brand-rgb),.42);
}
html[data-visual="novo"] .mh-slot.vaga small{ font-weight:600; }
html[data-visual="novo"] .mh-slot.meu{
  background:rgba(var(--brand-rgb),.14);
  box-shadow:inset 0 0 0 1.5px var(--brand);
}
html[data-visual="novo"] .mh-slot.on{ box-shadow:var(--sombra-leve),inset 0 0 0 2px var(--brand); }
html[data-visual="novo"] .mh-slot.ocupado,
html[data-visual="novo"] .mh-slot.bloqueado{ background:transparent; box-shadow:none; opacity:.38; }
html[data-visual="novo"] .mh-slot.bloqueado{ border:1px dashed var(--ink-600); }
html[data-visual="novo"] .mh-legenda{ font-size:12px; font-weight:500; border-top:.5px solid var(--line); padding-top:14px; }

/* Resumo e ficha do time: o painel agrupado do iOS. */
html[data-visual="novo"] .mh-resumo,
html[data-visual="novo"] .mh-elenco{
  border:0; border-radius:22px; padding:2px 16px; margin-bottom:22px;
  background:var(--ink-800); box-shadow:var(--sombra);
}
html[data-visual="novo"] .mh-linha{ font-size:15px; padding:13px 0; border-bottom-width:.5px; }
html[data-visual="novo"] .mh-linha b{ font-weight:600; letter-spacing:-.015em; }
html[data-visual="novo"] .mh-linha.total b{ font-size:20px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
html[data-visual="novo"] .mh-jogador{ padding:11px 0; border-bottom-width:.5px; }
html[data-visual="novo"] .mh-jogador b{ font-size:15px; font-weight:600; letter-spacing:-.015em; }
html[data-visual="novo"] .mh-jogador small{ font-size:12.5px; }
html[data-visual="novo"] .mh-convite{ margin-bottom:18px; }
html[data-visual="novo"] .mh-convite b{ font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.15; }
html[data-visual="novo"] .mh-convite small{ font-size:14px; margin-top:6px; }
html[data-visual="novo"] .mh-recado{ font-size:14px; }

/* Quantas pessoas: a escolhida é preenchida, como o .slot.on da arena. */
html[data-visual="novo"] .mh-pessoas{ gap:10px; }
html[data-visual="novo"] .mh-pessoa{
  border:0; border-radius:16px; min-height:50px; font-weight:600;
  background:var(--ink-800); box-shadow:var(--sombra-leve); font-variant-numeric:tabular-nums;
}
html[data-visual="novo"] .mh-pessoa.on{ background:var(--brand); color:var(--sobre-brand); box-shadow:none; }
html[data-visual="novo"] .mh-cabeca{ font-size:14px; margin-bottom:20px; }
html[data-visual="novo"] .mh-cabeca b{ font-weight:700; }

/* Interruptor e campos: o mesmo desenho do .switch e do .campo do visual novo. */
html[data-visual="novo"] .mh-switch{
  border:0; border-radius:22px; padding:16px 18px; gap:14px; margin-bottom:16px;
  background:var(--ink-800); box-shadow:var(--sombra);
}
html[data-visual="novo"] .mh-switch-txt b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
html[data-visual="novo"] .mh-switch-txt small{ font-size:13px; line-height:1.4; margin-top:3px; }
html[data-visual="novo"] .mh-trilho{ width:51px; height:31px; border-radius:999px; background:var(--ink-600); }
html[data-visual="novo"] .mh-trilho::after{
  left:2px; top:2px; width:27px; height:27px; background:#FFFFFF;
  box-shadow:0 3px 8px rgba(0,0,0,.16),0 1px 1px rgba(0,0,0,.14);
  transition:transform .42s var(--mola);
}
html[data-visual="novo"] .mh-switch[aria-checked="true"] .mh-trilho{ background:var(--brand); }
html[data-visual="novo"] .mh-switch[aria-checked="true"] .mh-trilho::after{ transform:translateX(20px); }
html[data-visual="novo"] .mh-campo{ margin-bottom:16px; }
html[data-visual="novo"] .mh-campo label{ font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; margin-bottom:8px; }
html[data-visual="novo"] .mh-campo select,
html[data-visual="novo"] .mh-campo textarea{
  border:1px solid transparent; border-radius:14px; padding:13px 14px;
  background:var(--ink-800); box-shadow:var(--sombra-leve); font-weight:500;
}
html[data-visual="novo"] .mh-campo select:focus,
html[data-visual="novo"] .mh-campo textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.18); }

/* Pronto: o circulo cheio de brasa, com a luz por baixo. */
html[data-visual="novo"] .mh-fim{ padding:34px 8px 26px; }
html[data-visual="novo"] .mh-fim-ico{
  border:0; color:#FFFFFF; background:var(--brand-dk);
  box-shadow:0 16px 34px -14px rgba(var(--brand-rgb),.8),inset 0 1px 0 rgba(255,255,255,.3);
}
html[data-visual="novo"] .mh-fim b{ font-size:26px; font-weight:800; letter-spacing:-.04em; }
html[data-visual="novo"] .mh-fim p{ font-size:15px; line-height:1.45; }

/* Carregando, vazio e erro. */
html[data-visual="novo"] .mh-esq{ border-radius:22px; }
html[data-visual="novo"] .mh-simbolo{ border:0; border-radius:18px; background:var(--ink-700); }
html[data-visual="novo"] .mh-estado b{ font-size:17px; font-weight:700; }
html[data-visual="novo"] .mh-estado p{ font-size:14px; }

/* Acao: a mesma pagina, sem faixa; o secundario é texto na cor da marca,
   como o botao simples do iOS, para a hierarquia ficar clara ao lado do
   botao cheio. */
html[data-visual="novo"] .mh-acao{ border-top:.5px solid var(--line); padding:12px 16px; }
html[data-visual="novo"] .mh-acao .btn{ min-height:52px; font-size:16px; }
html[data-visual="novo"] .mh-acao .btn + .btn{ margin-top:4px; }
html[data-visual="novo"][data-tema] .mh-acao .btn.gh{ background:transparent; color:var(--brand-txt); }
html[data-visual="novo"] .mh-rodape{ font-size:10px; letter-spacing:0; }

/* ---- Microinteracoes: mola curta, so transform e opacity ------------------ */

html[data-visual="novo"] .card.clicavel,
html[data-visual="novo"] .btn,
html[data-visual="novo"] .chip,
html[data-visual="novo"] .dia,
html[data-visual="novo"] .slot,
html[data-visual="novo"] .tb,
html[data-visual="novo"] .ico,
html[data-visual="novo"] .voltar,
html[data-visual="novo"] .destaque,
html[data-visual="novo"] .fp-mini,
html[data-visual="novo"] .switch,
html[data-visual="novo"] .mh-op,
html[data-visual="novo"] .mh-slot{ transition:transform .42s var(--mola),opacity .2s ease; }

html[data-visual="novo"] .card.clicavel:hover{ transform:none; }
html[data-visual="novo"] .card.clicavel:active,
html[data-visual="novo"] .destaque:active,
html[data-visual="novo"] .fp-mini:active,
html[data-visual="novo"] .switch:active{ transform:scale(.975); }
html[data-visual="novo"] .btn:active:not(:disabled),
html[data-visual="novo"] .chip:active,
html[data-visual="novo"] .dia:active,
html[data-visual="novo"] .slot:active:not(:disabled),
html[data-visual="novo"] .mh-op:active,
html[data-visual="novo"] .mh-slot:active{ transform:scale(.95); }
html[data-visual="novo"] .tb:active,
html[data-visual="novo"] .ico:active,
html[data-visual="novo"] .voltar:active{ transform:scale(.88); }

/* Movimento reduzido: nada anda. O app.css ja encurta as animacoes; aqui a
   mola e o encolher do toque saem por completo. */
@media (prefers-reduced-motion:reduce){
  html[data-visual="novo"] *,
  html[data-visual="novo"] *::before,
  html[data-visual="novo"] *::after{ transition:none !important; animation:none !important; }
  html[data-visual="novo"] .card.clicavel:active,
  html[data-visual="novo"] .destaque:active,
  html[data-visual="novo"] .fp-mini:active,
  html[data-visual="novo"] .switch:active,
  html[data-visual="novo"] .btn:active:not(:disabled),
  html[data-visual="novo"] .chip:active,
  html[data-visual="novo"] .dia:active,
  html[data-visual="novo"] .slot:active:not(:disabled),
  html[data-visual="novo"] .mh-op:active,
  html[data-visual="novo"] .mh-slot:active,
  html[data-visual="novo"] .tb:active,
  html[data-visual="novo"] .ico:active,
  html[data-visual="novo"] .voltar:active{ transform:none; }
}

/* =============================================================================
   feednovo: barra de cima, play dos replays, FeedPlay em tela e barra que
   encolhe. Tudo com o prefixo, como o resto desta folha.
   ========================================================================== */

/* ---- Barra de cima: botoes redondos de vidro ------------------------------ */

/* Os botoes cinza da barra (perfil, sino, busca, tema) viram vidro, o mesmo
   da pilula de baixo. O laranja (.ico.b) continua cheio: e a acao da tela. */
html[data-visual="novo"] .appbar{ align-items:center; }
html[data-visual="novo"] .appbar .ico.f{
  color:var(--txt);
  background:var(--vidro);
  box-shadow:inset 0 0 0 .5px var(--vidro-borda),inset 0 1px 0 var(--vidro-luz),0 3px 10px -5px rgba(0,0,0,.28);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
/* Os icones novos sao de traco fino: um pouco maiores, para o peso visual
   ficar igual ao dos antigos. */
html[data-visual="novo"] .appbar .ico svg.ic-novo{ width:19px; height:19px; }
html[data-visual="novo"] .appbar .ico.b svg.ic-novo{ width:18px; height:18px; }

/* O selo de nao lidos continua o mesmo, so encostado no botao maior. */
html[data-visual="novo"] .appbar .sino-selo{ top:-3px; right:-3px; }

/* ---- Meus replays: o play numa pastilha de vidro -------------------------- */

html[data-visual="novo"] .fp-mini .fp-mini-play{
  top:8px; right:8px; width:26px; height:26px;
  background:rgba(18,18,20,.34); color:#FFFFFF;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 2px 8px -2px rgba(0,0,0,.4);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}
html[data-visual="novo"] .fp-mini .fp-mini-play svg{ width:12px; height:12px; margin-left:1.5px; }

/* ---- FeedPlay: um lance por tela ------------------------------------------ */

/* A reserva do pe: a altura da pilula (63px), a distancia dela ate a borda e
   um respiro. Fica DENTRO do cartao, entao a pilula flutua sobre esse espaco
   vazio e nunca sobre os botoes do lance. */
html[data-visual="novo"] .fp-rolo{
  --fp-reserva:calc(75px + max(12px, env(safe-area-inset-bottom)));
}

/* O respiro de 100px que a .rolagem ganha no visual novo e o que deixava a
   ponta do lance seguinte aparecer embaixo: a lista media a tela menos 100px
   e a area visivel era a tela inteira. No rolo ele sai, e a reserva vai para
   dentro de cada cartao. Assim a altura de um cartao e exatamente a altura
   visivel da rolagem, e o encaixe para sempre num lance inteiro. */
html[data-visual="novo"] .rolagem.fp-rolo{
  padding-bottom:0;
  scroll-padding:0;
  scroll-snap-type:y mandatory;
}
html[data-visual="novo"] .fp-rolo .fp-lista{ height:100%; padding:0; gap:0; }
html[data-visual="novo"] .fp-rolo .fp-card,
html[data-visual="novo"] .fp-rolo .fp-lista > *:not(.fp-card){
  flex:0 0 100%;
  height:100%;
  box-sizing:border-box;
  padding-bottom:var(--fp-reserva);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
html[data-visual="novo"] .fp-rolo .fp-card{
  background:transparent; border:0; border-radius:0; box-shadow:none;
}

/* Cabecalho do lance */
html[data-visual="novo"] .fp-rolo .fp-topo{ padding:10px 16px 12px; gap:12px; }
html[data-visual="novo"] .fp-topo .av{
  width:40px; height:40px; font-size:13px;
  box-shadow:0 0 0 2px var(--ink-900),0 0 0 3.5px rgba(var(--brand-rgb),.85);
}
html[data-visual="novo"][data-tema] a.fp-autor{
  font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--txt);
}
html[data-visual="novo"] .fp-onde{ font-size:12px; color:var(--dim); margin-top:2px; letter-spacing:-.005em; }
html[data-visual="novo"][data-tema] .fp-seguir{
  border:0; background:rgba(var(--brand-rgb),.13); color:var(--brand-txt);
  font-size:13px; font-weight:700; letter-spacing:-.01em; padding:8px 14px; border-radius:999px;
}
html[data-visual="novo"] .fp-mais{ width:34px; height:34px; background:var(--ink-700); color:var(--dim); }

/* O video: uma moldura arredondada que fica com todo o espaco que sobra. */
html[data-visual="novo"] .fp-rolo .fp-palco{
  margin:0 12px; border-radius:24px; min-height:160px;
  isolation:isolate;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.55);
}

/* Os botoes sobre o video: vidro escuro, icone branco. */
html[data-visual="novo"] .fp-palco .fp-som,
html[data-visual="novo"] .fp-palco .fp-cheia{
  width:36px; height:36px; color:#FFFFFF;
  background:rgba(18,18,20,.4);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.24);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
html[data-visual="novo"] .fp-palco .fp-som{ left:12px; bottom:12px; }
html[data-visual="novo"] .fp-palco .fp-cheia{ right:12px; top:12px; }
html[data-visual="novo"] .fp-palco .fp-mover{ right:12px; bottom:12px; width:36px; height:36px; }
html[data-visual="novo"] .fp-palco .fp-duracao{
  left:12px; top:12px; right:auto; bottom:auto;
  padding:4px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; color:#FFFFFF;
  background:rgba(18,18,20,.4);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.24);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
html[data-visual="novo"] .fp-palco svg{ stroke-width:1.8; }

/* Legenda, elenco e nota */
html[data-visual="novo"] .fp-legenda{ padding:12px 18px 0; font-size:15px; line-height:1.45; letter-spacing:-.012em; }
html[data-visual="novo"] .fp-elenco{ padding:10px 18px 0; gap:10px; font-size:12.5px; }
html[data-visual="novo"][data-tema] .fp-elenco b{ color:var(--brand-txt); font-weight:700; }
html[data-visual="novo"] .fp-nota{ padding:8px 18px 0; gap:6px; font-size:12.5px; color:var(--dim); }
html[data-visual="novo"] .fp-nota b{ font-size:14px; font-weight:700; }
html[data-visual="novo"] .fp-nota .estrela{ color:var(--brand-txt); }
html[data-visual="novo"][data-tema] .fp-quemviu{ color:var(--brand-txt); font-size:12.5px; font-weight:600; }

/* A fila de acoes: uma linha so, icones de traco fino com o contador ao
   lado, e o "Devolve essa" no fim da fila, so com o icone. */
html[data-visual="novo"] .fp-acoes{
  flex-wrap:nowrap; justify-content:space-between; gap:0;
  padding:6px 10px 2px;
}
html[data-visual="novo"] .fp-acao{
  gap:5px; padding:8px 7px; min-width:0; border-radius:999px;
  color:var(--txt); font-size:13px; font-weight:600; letter-spacing:-.01em;
}
html[data-visual="novo"] .fp-acao svg{ width:24px; height:24px; stroke-width:1.7; }
html[data-visual="novo"] .fp-acao.on{ color:var(--brand-txt); }
html[data-visual="novo"] .fp-acao.on svg{ fill:rgba(var(--brand-rgb),.22); }
html[data-visual="novo"][data-tema] .fp-acao.revanche{
  flex:none; margin-left:0; border:0; padding:0;
  width:42px; height:42px; justify-content:center;
  background:rgba(var(--brand-rgb),.13); color:var(--brand-txt);
}
html[data-visual="novo"] .fp-acao.revanche svg{ width:22px; height:22px; stroke-width:1.6; }
html[data-visual="novo"] .fp-card .fp-topo svg{ stroke-width:1.7; }
html[data-visual="novo"] .fp-nota svg{ stroke-width:1.7; }

html[data-visual="novo"] .fp-conversa{ padding:12px 18px; }

/* ---- Tela cheia (o imersivo) ---------------------------------------------- */

/* O rolo cobre a tela inteira e a pilula fica por baixo dele: aqui nao ha o
   que reservar, e o cartao volta a ter a altura da tela, um por vez. */
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-card,
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-lista > *:not(.fp-card){ padding-bottom:0; }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-card{ background:#000000; }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-palco{ margin:0; border-radius:0; box-shadow:none; }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-topo{
  padding:calc(14px + env(safe-area-inset-top)) 62px 30px 16px;
}
html[data-visual="novo"][data-tema] .fp-imersivo a.fp-autor{ color:#FFFFFF; }
html[data-visual="novo"] .fp-imersivo .fp-onde,
html[data-visual="novo"] .fp-imersivo .fp-nota{ color:rgba(255,255,255,.8); }
html[data-visual="novo"] .fp-imersivo .fp-legenda{ padding:0 18px 8px; }
html[data-visual="novo"] .fp-imersivo .fp-elenco{ padding:0 18px 6px; }
html[data-visual="novo"] .fp-imersivo .fp-nota{ padding:0 18px 4px; }
html[data-visual="novo"] .fp-imersivo .fp-nota .estrela,
html[data-visual="novo"][data-tema] .fp-imersivo .fp-elenco b,
html[data-visual="novo"][data-tema] .fp-imersivo .fp-quemviu{ color:#FFB287; }
html[data-visual="novo"][data-tema] .fp-imersivo .fp-seguir{ background:rgba(255,255,255,.18); color:#FFFFFF; }
html[data-visual="novo"] .fp-imersivo .fp-mais{ background:rgba(255,255,255,.14); color:#FFFFFF; }
html[data-visual="novo"] .fp-imersivo .fp-topo .av{ box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 0 3.5px #FFFFFF; }

/* rodada3: na tela cheia as acoes saem da fileira de baixo e viram uma coluna
   na lateral direita, como nos videos curtos: icone grande e branco, com
   sombra para ler sobre qualquer lance, o contador pequeno embaixo, e o
   "Devolve essa" por ultimo, num circulo laranja. A coluna e presa ao pe do
   cartao, acima da safe-area; o texto (legenda, elenco, nota) fica no canto
   de baixo a esquerda, com a largura limitada para nao bater nela. */
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acoes{
  position:absolute; z-index:4; left:auto; top:auto; right:8px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:60px; padding:0; gap:14px;
  flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-end;
}
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acao{
  flex-direction:column; gap:3px; width:60px; min-width:0; padding:0; border-radius:0;
  background:transparent; box-shadow:none; filter:none; color:#FFFFFF;
  font-size:12px; font-weight:600; letter-spacing:0;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acao svg{
  width:28px; height:28px; stroke-width:1.8;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acao span{ color:#FFFFFF; }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acao.on{ color:#FFB287; }
html[data-visual="novo"][data-tema] .fp-rolo.fp-imersivo .fp-acao.revanche{
  width:50px; height:50px; margin-top:2px; padding:0; border-radius:50%;
  justify-content:center; background:var(--brand-dk); color:#FFFFFF;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.2);
}
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-acao.revanche svg{ width:24px; height:24px; filter:none; }

/* O texto de baixo: branco, com a coluna fora do caminho. */
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-legenda{ padding:0 84px 8px 16px; }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-elenco{ padding:0 84px 6px 16px; color:rgba(255,255,255,.92); }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-nota{
  padding:0 84px calc(18px + env(safe-area-inset-bottom)) 16px; color:rgba(255,255,255,.88);
}

/* O degrade de baixo fica escuro de verdade em toda a altura do texto (a
   altura dele e medida pelo feed.html, ate 18px acima da primeira linha), e
   so se desfaz nesse respiro de cima. Assim "1 pessoa em quadra" le em AA
   ate sobre quadra branca. */
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-card::after{
  background:linear-gradient(to top,rgba(0,0,0,.9) 0px,rgba(0,0,0,.78) calc(100% - 18px),rgba(0,0,0,0) 100%);
}

/* Os botoes do alto, a direita: sair da tela cheia, som e, quando ha o que
   puxar, o puxador, empilhados. Nenhum desce ate a coluna. */
html[data-visual="novo"] .fp-imersivo .fp-palco .fp-som{ left:auto; right:12px; bottom:auto; top:calc(58px + env(safe-area-inset-top)); }
html[data-visual="novo"] .fp-imersivo .fp-palco .fp-cheia{ top:calc(14px + env(safe-area-inset-top)); }
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-palco .fp-mover{ bottom:auto; right:12px; top:calc(102px + env(safe-area-inset-top)); }

/* ---- A barra de baixo que encolhe (toda tela com a barra) ----------------- */

/* O ui.js liga .tabbar-compacta rolando para baixo e desliga rolando para
   cima, em qualquer tela com a barra (rodada 4; antes era so o FeedPlay). A
   barra encolhe 20% ancorada no pe, os rotulos somem e os icones descem para
   o meio. So transform e opacity; com movimento reduzido a troca e seca (o *
   do bloco de movimento reduzido zera as transicoes). Durante a troca de
   tema (html.trocando-tema) a transicao da barra fica com a do app.css, que
   esmaece as cores; fora dela, com a do encolher. */
html[data-visual="novo"] .tabbar{ --encolher:cubic-bezier(.2,.8,.25,1); }
html[data-visual="novo"][data-tema] .tabbar{ transform-origin:50% 100%; }
html[data-visual="novo"][data-tema]:not(.trocando-tema) .tabbar{ transition:transform .36s var(--encolher); }
html[data-visual="novo"][data-tema] .tabbar.tabbar-compacta{ transform:scale(.8); }
html[data-visual="novo"] .tabbar .tb > span:not(.tb-mais-circ){ transition:opacity .18s ease; }
html[data-visual="novo"] .tabbar-compacta .tb > span:not(.tb-mais-circ){ opacity:0; }
html[data-visual="novo"] .tabbar .tb > svg{ transition:transform .36s var(--encolher); }
html[data-visual="novo"] .tabbar-compacta .tb > svg{ transform:translateY(7px); }
/* A foto da aba Perfil acompanha o encolher, como os icones. */
html[data-visual="novo"] .tabbar .tb > .tb-avatar{ transition:transform .36s var(--encolher),box-shadow .15s; }
html[data-visual="novo"] .tabbar-compacta .tb > .tb-avatar{ transform:translateY(7px); }
html[data-visual="novo"] .tb .tb-avatar{ width:23px; height:23px; font-size:9.5px; }

/* =============================================================================
   rodada2: barra de baixo com os icones novos e a grade "Seus replays" da aba
   Jogos rolando junto. Tudo com o prefixo, como o resto desta folha.
   ========================================================================== */

/* A aba atual ganha um preenchimento sutil na forma principal do icone (a
   classe "c" que o ui.js poe nos desenhos novos). */
html[data-visual="novo"] .tb.on svg.ic-novo .c{ fill:currentColor; fill-opacity:.16; }

/* Aba Jogos: a grade e as abas moram dentro da #lista (jogos.html move os
   dois). A #lista ja tem o respiro lateral; aqui sai o segundo, e as abas
   voltam a encostar nas bordas para rolar de lado como antes. */
html[data-visual="novo"] #lista > #secaoReplays{ padding-left:0; padding-right:0; margin-top:4px; margin-bottom:10px; }
html[data-visual="novo"] #lista > #abas{ margin:0 -16px 6px; }
html[data-visual="novo"] .grade-jogos > #secaoReplays,
html[data-visual="novo"] .grade-jogos > #abas{ grid-column:1 / -1; }
html[data-visual="novo"] #secaoReplays .pf-grade{ border-radius:18px; gap:4px; }
html[data-visual="novo"] #btnRecolherReplays{ width:100%; }

/* =============================================================================
   salvar: o botao de arrumar as faixas da tela inicial, no modo de edicao.
   O html[data-visual="novo"] .ordenar-btn la de cima prende a largura em 36px
   e vence o width:auto do .ordenar-btn.on do app.css: o texto vazava do
   circulo e saia da tela pela direita. Aqui, editando, ele vira pilula de
   largura automatica, com o check e "Salvar" inteiros. Verde de "acabei",
   como no classico, nos tons que passam de 4,5:1 com a letra.
   ========================================================================== */
html[data-visual="novo"] .ordenar-btn.on{
  width:auto; height:36px; padding:0 14px 0 11px; gap:6px; border-radius:999px;
  display:inline-flex; align-items:center; white-space:nowrap;
  background:#30D158; color:#04240F;
}
html[data-visual="novo"][data-tema="claro"] .ordenar-btn.on{ background:#1F7A35; color:#FFFFFF; }
html[data-visual="novo"] .ordenar-btn.on .pequeno{
  color:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em; text-transform:none;
}
html[data-visual="novo"] .ordenar-btn.on svg{ flex:none; stroke-width:2; }

/* =============================================================================
   rodada4: o botao de sair da tela cheia e o modal de confirmacao.
   ========================================================================== */

/* Na tela cheia o palco nao pode isolar a pilha: com isolation:isolate (que
   ele tem no rolo, para o canto arredondado) os botoes dele (sair da tela
   cheia, som, puxador) ficavam presos DENTRO do palco, abaixo do cabecalho do
   lance (z-index 3), que cobre a largura toda no alto. O toque no "sair"
   caia no cabecalho, e o botao parecia morto. Na tela cheia o palco nao tem
   canto arredondado, entao o isolamento nao faz falta. */
html[data-visual="novo"] .fp-rolo.fp-imersivo .fp-palco{ isolation:auto; }

/* O modal de confirmacao (UI.confirmar), no desenho das folhas. */
html[data-visual="novo"] .modal-fundo{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
html[data-visual="novo"][data-tema] .modal-caixa{
  max-width:340px; padding:24px 20px 18px; border:0; border-radius:28px;
  background:var(--folha); box-shadow:var(--sombra-flutua);
}
html[data-visual="novo"] .modal-caixa h4{ font-size:20px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
html[data-visual="novo"] .modal-caixa p{ font-size:14.5px; line-height:1.5; color:var(--dim); margin-top:8px; }
html[data-visual="novo"] .modal-acoes{ gap:10px; margin-top:20px; }
html[data-visual="novo"] .modal-acoes .btn{ min-height:48px; border-radius:999px; font-size:15px; }

/* =============================================================================
   rodada5: os cartoes-heroi com o laranja da marca dominante, e a abertura
   com a bola animada (o desenho e do assets/js/abertura.js).
   ========================================================================== */

/* Rodada 9 (substitui o cartao todo laranja da rodada 5, pedido do dono): o
   desenho de antes, grafite com a luz laranja do canto de cima a direita, so
   que com a luz ampliada. O #FF7A3D nasce no canto e ocupa cerca de metade
   do cartao, dissolvendo no preto na metade de baixo, que e onde mora o
   texto branco (AA medido sobre o escuro, testes/rodada5.mjs). O selo e o
   botao voltam ao vidro de antes (regras gerais do .destaque, acima). O
   "proximo jogo" segue a mesma logica; como o titulo dele fica em cima, a
   luz dele comeca um tom mais fundo (#E85A10), onde o titulo grande em
   branco passa de 3:1. Os de cor propria (.roxo e .verde) nao mudam. */
html[data-visual="novo"][data-tema]{
  --hero:radial-gradient(170% 110% at 100% 0%,#FF7A3D 0%,rgba(255,122,61,.96) 32%,rgba(244,104,36,.8) 50%,rgba(232,90,16,.42) 63%,rgba(232,90,16,0) 76%),
         linear-gradient(180deg,#1C1C20 0%,#0D0D0F 100%);
  --hero-jogo:radial-gradient(170% 110% at 100% 0%,#E85A10 0%,rgba(232,90,16,.96) 32%,rgba(214,78,12,.8) 50%,rgba(194,65,12,.42) 63%,rgba(194,65,12,0) 76%),
              linear-gradient(180deg,#1C1C20 0%,#0D0D0F 100%);
}
html[data-visual="novo"][data-tema] #minhas > .card:first-child{ background:var(--hero-jogo); }
/* Selo e etiquetas do "proximo jogo" continuam pilulas brancas com letra
   laranja-escura: ficam sobre a luz, e ali o texto claro nao passaria. */
html[data-visual="novo"] #minhas > .card:first-child::before{
  display:inline-block; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.94); color:#7C2D12;
}
html[data-visual="novo"][data-tema] #minhas > .card:first-child .tag{
  background:rgba(255,255,255,.94); color:#7C2D12;
}

/* ==========================================================================
   rodada8: a torrada do visual novo desce do topo (ui.js, torradaNova)
   ==========================================================================
   Rodada 9: o mesmo desenho da faixa de "Nova versao disponivel" do
   atualizacao.js (.faixa-versao, app.css): mesma posicao (12px abaixo do
   entalhe), mesmo cartao (raio 14px, 12px 14px, sombra com a cor do fundo),
   mesma letra (13px, peso 700) e a mesma entrada (desce de -140% em .28s,
   com a mesma curva). As cores sao as da propria faixa, fixas nos dois temas
   para o texto passar em AA: ok #30D158 com #04241A (8,2:1), erro #3A1414
   com #FFD9D3 (12,5:1), info o laranja #FF7A3D com #1A0D05 (7,3:1). Fundo
   solido, sem vidro; acima de tudo; entra e sai so por transform e opacity. */
html[data-visual="novo"] .torrada.torrada-nova{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); bottom:auto; left:50%;
  width:max-content; max-width:min(calc(100vw - 24px), 440px);
  z-index:10000;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:0; border-radius:14px;
  font-size:13px; font-weight:700; line-height:1.4;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  animation:none;
  opacity:0;
  transform:translate(-50%, -140%);
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
  cursor:pointer;
}
html[data-visual="novo"] .torrada.torrada-nova.entrou{ opacity:1; transform:translate(-50%, 0); }
html[data-visual="novo"] .torrada.torrada-nova.ok{
  background:#30D158; color:#04241A;
  box-shadow:0 16px 38px -12px rgba(52,199,127,.5), 0 2px 8px rgba(0,0,0,.35);
}
html[data-visual="novo"] .torrada.torrada-nova.erro{
  background:#3A1414; color:#FFD9D3;
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.45), 0 16px 38px -12px rgba(255,107,107,.35), 0 2px 8px rgba(0,0,0,.35);
}
html[data-visual="novo"] .torrada.torrada-nova.info{
  background:#FF7A3D; color:#1A0D05;
  box-shadow:0 16px 38px -12px rgba(255,122,61,.55), 0 2px 8px rgba(0,0,0,.35);
}
html[data-visual="novo"] .torrada-nova .torrada-ic{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.12);
}
html[data-visual="novo"] .torrada-nova.erro .torrada-ic{ background:rgba(255,255,255,.1); }
html[data-visual="novo"] .torrada-nova .torrada-ic svg{ display:block; width:18px; height:18px; }
/* Tela estreita: o mesmo ajuste da faixa de versao (app.css, max-width:400px). */
@media (max-width:400px){
  html[data-visual="novo"] .torrada.torrada-nova{ font-size:12.5px; padding:11px 12px; gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  html[data-visual="novo"] .torrada.torrada-nova{ transform:translate(-50%, 0); transition:opacity .2s ease; }
}


/* ==========================================================================
   rodada9: a barra de baixo parada entre as telas (View Transitions)
   ==========================================================================
   O app e multipagina. O script do tema no <head> de cada tela liga, so no
   visual novo, "@view-transition { navigation: auto }": numa navegacao do
   mesmo site o navegador faz um esmaecer curto entre as duas paginas. A
   barra ganha nome proprio (view-transition-name), sai do esmaecer e troca
   sem animacao, entao parece parada; so o conteudo troca. Onde nao ha
   suporte (Firefox; Safari antes do 18.2) a navegacao e a de sempre. */
html[data-visual="novo"] nav.tabbar{ view-transition-name:tpj-barra; }
html[data-visual="novo"]::view-transition-old(root),
html[data-visual="novo"]::view-transition-new(root){ animation-duration:.18s; }
html[data-visual="novo"]::view-transition-group(tpj-barra),
html[data-visual="novo"]::view-transition-new(tpj-barra){ animation:none; }
html[data-visual="novo"]::view-transition-old(tpj-barra){ display:none; }
@media (prefers-reduced-motion: reduce){
  html[data-visual="novo"]::view-transition-group(*),
  html[data-visual="novo"]::view-transition-old(*),
  html[data-visual="novo"]::view-transition-new(*){ animation:none !important; }
}

/* =============================================================================
   BOTAO LARANJA: TEXTO E ICONE BRANCOS (decisao do Alex, 01/10/2026)
   =============================================================================
   Todo botao de fundo laranja do app e da pagina inicial passa a ter texto e
   icone brancos, nos dois temas.

   Contraste (WCAG 2.x, 1.4.3: texto de botao de 14 a 16 px e texto normal,
   precisa de 4,5:1). Branco sobre o laranja de antes NAO passa:
     #FF7A2E (--brand, escuro) 2,6:1    #F26419 (--brand, claro) 3,2:1
     #E85A10 (--brand-dk, escuro) 3,6:1 #D24E0A (--brand-dk, claro) 4,3:1
   Entao o FUNDO do botao desce para o tom mais escuro da propria paleta que
   passa: #C2410C (a Terracota do tema claro, --brand-dk do app.css), 5,2:1
   com branco; no hover (brilho 1,07) fica 4,6:1. Fora dos botoes o laranja
   da marca continua o mesmo.

   Como: o botao redefine --brand (e --sobre-brand, a letra sobre o laranja)
   so dentro dele. O fundo de cada botao ja e var(--brand), entao ele escurece
   sem regra nova de fundo, e os botoes cinza (.gh), brancos (.wh), de
   momento (.mom) e de perigo seguem com as cores deles. */
html[data-visual="novo"]{ --btn-laranja:#C2410C; --sobre-btn:#FFFFFF; }

html[data-visual="novo"] .btn,
html[data-visual="novo"] .ico.b,
html[data-visual="novo"] .slot.on,
html[data-visual="novo"] .hp-folha-quadra .slot.hp-escolhido,
html[data-visual="novo"] .cam-chip.on,
html[data-visual="novo"] .cam-play,
html[data-visual="novo"] .est-play,
html[data-visual="novo"] .est-opcao.on,
html[data-visual="novo"] .fp-escrever button,
html[data-visual="novo"] .fp-mover,
html[data-visual="novo"] .fp-notas button.on,
html[data-visual="novo"] .mh-pessoa.on,
html[data-visual="novo"] .hp-pular{ --brand:var(--btn-laranja); --brand-rgb:194,65,12; --sobre-brand:var(--sobre-btn); }

html[data-visual="novo"] .ico.b,
html[data-visual="novo"][data-tema] .appbar .ico.b.on,
html[data-visual="novo"] .slot.on,
html[data-visual="novo"] .slot.on small,
html[data-visual="novo"] .hp-folha-quadra .slot.hp-escolhido,
html[data-visual="novo"] .cam-chip.on,
html[data-visual="novo"][data-tema] .cam-play,
html[data-visual="novo"] .est-play,
html[data-visual="novo"] .est-opcao.on,
html[data-visual="novo"] .est-opcao.on b,
html[data-visual="novo"] .est-opcao.on span,
html[data-visual="novo"] .fp-escrever button,
html[data-visual="novo"] .fp-mover:not(.on),
html[data-visual="novo"] .fp-notas button.on,
html[data-visual="novo"] .mh-pessoa.on,
html[data-visual="novo"] .hp-pular{ color:var(--sobre-btn); }
/* O pause/play do estudio e desenhado com borda e fundo da cor do texto. */
html[data-visual="novo"] .est-play::before{ border-left-color:var(--sobre-btn); }
html[data-visual="novo"] .est-play.tocando::before{ background:var(--sobre-btn); }

/* O girando do botao ocupado: branco sobre o laranja. */
html[data-visual="novo"] .btn:not(.gh):not(.wh).carregando::after{ border-color:rgba(255,255,255,.35); border-top-color:var(--sobre-btn); }