@font-face {
  font-family: 'MoreSugar';
  src: url('/fonts/MoreSugar-Regular.woff2') format('woff2');
  font-display: swap;
}

/* fonte de ícones: "block" evita mostrar a letra crua (ç, Ω...) antes do desenho carregar */
@font-face {
  font-family: 'MoreSugar-Extras';
  src: url('/fonts/MoreSugar-Extras.woff2') format('woff2');
  font-display: block;
}

:root {
  --ink: #000;
  --paper: #fff;
  --gray-5: #6b7280;
  --gray-7: #374151;
  --red: #dc2626;
  --gold: #ffd23f;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* áreas do notch / barra de gestos do celular (deitado, o notch do iPhone fica num dos lados) */
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px);
  --right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* o jogo é a tela inteira: nada de rolar a página */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'MoreSugar', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
}

/* fundo de rabiscos em cinza bem claro */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/img/fundo.svg') center / cover no-repeat;
  opacity: .08;
  z-index: -1;
  pointer-events: none;
  transition: opacity .3s;
}
/* durante a missão o nome em letra cheia sai do campo: o canvas desenha só 4 rabiscos de traço a 6% */
body.jogando::before { opacity: 0; }

a { color: inherit; }
button { font-family: inherit; color: inherit; }
b, strong { font-weight: 700; }

:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }

.xtra { font-family: 'MoreSugar-Extras'; font-weight: 400; font-style: normal; }
.hidden { display: none !important; }
/* o atributo hidden vale sempre (sem isso o .btn com display:inline-flex aparecia mesmo escondido: o INSTALAR no iPhone) */
[hidden] { display: none !important; }
/* tomada de trilha vazia não ocupa lugar */
.tomada:empty { display: none; }

/* ===== animações da casa ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pulse { animation: pulse 1.8s infinite; }

@keyframes glitch {
  0% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(2px); }
  75% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.glitch { animation: glitch 2.5s ease-in-out infinite; }

@keyframes blinkBW {
  0%, 100% { background: var(--ink); color: var(--paper); }
  50% { background: var(--paper); color: var(--ink); }
}
.blink { animation: blinkBW .7s infinite; }

@keyframes pop { from { transform: scale(.5) rotate(0deg); opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }

/* ===== campo do jogo ===== */
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23000'/%3E%3C/svg%3E") 16 16, crosshair;
}
/* prêmio: mira vermelha */
html.p-mira body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23dc2626' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='%23dc2626'/%3E%3C/svg%3E") 16 16, crosshair;
}
/* o antigo prêmio "campo xadrez" saiu do fundo (camuflava as notas): o vichy agora só emoldura o card do story */

/* ===== placar ===== */
.hud {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: calc(10px + var(--top)) calc(12px + var(--right)) 0 calc(12px + var(--left));
  pointer-events: none;
}
.hud[hidden] { display: none; }
.hud-lado { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.hud-lado.dir { justify-content: flex-end; }
.hud .st {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, .9);
  font-size: 13px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.hud .dia-pill { background: var(--red); border-color: var(--red); color: var(--paper); }
/* lucro: o número mais importante da tela, em casas de largura fixa (não "dança" quando muda) */
.hud .st.lucro {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3px 11px 4px;
  border-width: 2px;
  border-radius: 14px;
  background: var(--paper);
  letter-spacing: 0;
  line-height: 1;
}
.hud .lucro small { font-size: 10px; letter-spacing: .15em; color: var(--gray-7); }
.hud .lucro b { margin-top: 3px; font-size: 22px; white-space: nowrap; }
.hud .lucro b i { display: inline-block; width: .58em; font-style: normal; text-align: center; }
.hud .lucro b i.p { width: .24em; }
.hud .lucro b i.p:first-child { width: .5em; }
/* figurinha ganha na missão: só uma estrelinha piscando no placar (a figurinha aparece no fim) */
.hud-estrela { position: absolute; top: -10px; right: -12px; font-size: 20px; line-height: 1; color: var(--red); animation: pisca .5s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .2; } }
.tomada-hud { grid-column: 1 / -1; }
/* selo da série colado no relógio: preto em x1–x2, vermelho a partir de x3 (com o raio em x5+) e 5 bolinhas até o próximo */
.hud-centro { position: relative; }
.selo {
  position: absolute;
  top: 3px;
  left: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: filter .2s;
}
.selo b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.selo b .xtra { margin-right: 1px; font-size: 17px; }
.selo.quente b { background: var(--red); }
.selo.cinza b { background: #9ca3af; }
.bolinhas { display: flex; gap: 2px; }
.bolinhas i { width: 6px; height: 6px; border: 1.2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.bolinhas i.on { background: var(--ink); }
.selo.quente .bolinhas i.on { border-color: var(--red); background: var(--red); }
.hud-tempo b {
  display: block;
  min-width: 64px;
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
}
.hud-tempo.urgente b { color: var(--red); border-color: var(--red); animation: pulse .5s infinite; }
.hud .pausa {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}
.hud .pausa i { display: block; width: 4px; height: 14px; border-radius: 2px; background: var(--ink); }
/* área de toque de 44 px de altura (o desenho continua com 34) */
.hud .pausa::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* ===== telas (menu, fim, pausa, ranking...) ===== */
.tela {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* centraliza pelas margens automáticas abaixo: se não couber, rola sem cortar o topo */
  padding: calc(20px + var(--top)) calc(16px + var(--right)) calc(20px + var(--bottom)) calc(16px + var(--left));
  background: rgba(255, 255, 255, .86);
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tela.ativa { display: flex; animation: entra .35s var(--ease); }
/* centraliza quando cabe e rola (sem cortar o topo) quando não cabe */
.tela > :first-child { margin-top: auto; }
.tela > :last-child { margin-bottom: auto; }
.tela.rolavel { justify-content: flex-start; }
.tela.rolavel > :first-child { margin-top: 0; }

.caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 30rem;
  padding: 24px 18px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .5);
}
.caixa .big { font-size: 34px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }

/* ===== menu (Temporada 3, T3/DESIGN.md seção 7) =====
   Barra no alto (a pílula da carteira à esquerda, a engrenagem à direita) e a coluna do meio, centrada no que sobra.
   Em pé e no computador a coluna é uma só: .menu-id e .menu-acoes viram "display: contents" (os filhos entram direto
   na coluna) e o recorde e a meta do dia, que moram no .menu-id, descem pro fim pela ordem. No celular deitado os
   dois blocos viram 2 colunas (no fim deste arquivo). Nada aqui rola: tudo cabe de 360×740 a 1440×900. */
#telaMenu > .menu-barra { margin-top: 0; }
.menu-barra { flex: none; display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 6px; }
.menu-barra .aj-botao { margin-left: auto; }
.menu-centro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 26rem;
  margin: auto 0;
}
.menu-id, .menu-acoes { display: contents; }
.menu-recorde { order: 1; }
#menu-rodape { order: 2; }
/* o lockup (FEBRE 5.1): o Snip dançando à esquerda e o nome em 2 linhas à direita, SNIPER em vermelho. O Snip e a
   letra acompanham a menor medida da tela (no notebook baixinho encolhem antes de o menu rolar); o palco do Snip é do
   css/mascote.css (--snip-a = altura, --snip-l = largura) */
.menu-marca {
  --snip-a: clamp(96px, min(34vw, 16vh), 188px);
  --snip-l: calc(var(--snip-a) * .74);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-right: calc(var(--snip-l) * .18); /* o nome fica no meio da tela, não o conjunto */
}
.logo {
  margin: 0;
  font-size: clamp(38px, min(12vw, 7.4vh), 86px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: .95;
  text-align: left;
  cursor: default;
}
.logo-2 { color: var(--red); }
.tagline { margin: -4px 0 0; font-size: 14px; letter-spacing: .25em; color: var(--gray-7); }
.lider { margin: -6px 0 4px; min-height: 1.4em; font-size: 12px; letter-spacing: .15em; color: var(--gray-7); }
.lider b { color: var(--red); }

/* JOGAR e DESAFIO: título grande e, embaixo, a faixa ("▸ Mira Quente"; "Ficha Roubada · seu melhor $5.100") */
.menu-jogar, .menu-desafio { flex-direction: column; gap: 2px; line-height: 1.1; }
.mb-tit { display: inline-flex; align-items: center; gap: 8px; }
.mb-sub {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-sub:empty { display: none; }
.btn.menu-jogar { min-height: 66px; padding-top: 8px; padding-bottom: 9px; font-size: 24px; }
.menu-jogar .mb-sub { font-size: 13px; }
.btn.menu-desafio { min-height: 56px; padding-top: 7px; padding-bottom: 8px; font-size: 17px; }
.menu-desafio .mb-sub { color: var(--gray-7); }
/* as disputas: o DESAFIO na linha inteira (a 2ª linha dele é comprida: a faixa do dia e a sua nota de hoje) e, embaixo,
   CAMPEONATO e DUELO lado a lado (o que estiver sozinho ocupa a linha), com o selo "te desafiaram!" no canto do DUELO.
   O desenho do contrato punha DESAFIO e CAMPEONATO lado a lado, mas em 360 px as duas 2ªs linhas sumiam nas reticências */
.menu-disputa { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-disputa > .btn { flex: 1 1 0; min-width: 0; }
.menu-disputa > #btnDaily { flex-basis: 100%; }
.menu-disputa > .btn.menu-duelo { position: relative; }
.btn.menu-camp, .btn.menu-duelo { font-size: 15px; padding-left: 8px; padding-right: 8px; }
.menu-camp .mb-tit, .menu-duelo .mb-tit { gap: 6px; }
.mb-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-duelo .duelo-selo { position: absolute; top: -9px; right: 10px; margin: 0; animation: msSelo 1.2s var(--ease) infinite alternate; }
@keyframes msSelo { to { transform: scale(1.08) rotate(-3deg); } }
#desafioFaixa:not(:empty) + .dia::before { content: " · "; }
.menu-desafio .dia b { color: var(--ink); }
/* celular estreito (360 px): a 2ª linha do desafio aperta as letras pra caber a faixa inteira e o "vale o ranking de
   hoje" (título mais comprido ainda termina em reticências, sem empurrar o botão) */
@media (max-width: 379px) { .menu-desafio .mb-sub { letter-spacing: .03em; } }

/* os atalhos (faixas, carreira, ranking, figurinhas, loja): ícone em cima e nome embaixo, numa fileira só em qualquer
   tela (5 cabem em 360 px com a letra menor); a conta (★ 5, 12/44) fica pequena no canto de cima à esquerda (o da
   direita é do selo "novo"). A tomada da carreira entra na fileira: o #telaMenu na frente vence, pela especificidade,
   o "#menu-modos > .btn { flex: 1 }" do css/carreira.css */
.menu-modos { display: flex; flex-wrap: wrap; gap: 8px; }
#telaMenu #menu-modos { display: contents; }
#telaMenu .btn.menu-atalho {
  position: relative;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 66px;
  padding: 8px 4px 7px;
  font-size: 12px;
  letter-spacing: .06em;
}
#telaMenu .btn.menu-atalho .xtra { font-size: 26px; }
.ma-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-txt { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-atalho .ma-txt small { position: absolute; top: 5px; left: 8px; display: inline-flex; align-items: center; gap: 1px; font-size: 10px; letter-spacing: 0; opacity: .75; }
.menu-atalho .ma-txt small:empty { display: none; }
/* selo "novo" (prêmio liberado ainda sem escolha): etiqueta no canto, como nos prêmios */
.menu-atalho .selo-novo { position: absolute; top: -8px; right: -6px; margin: 0; }
@media (max-width: 419px) {
  .menu-modos { gap: 6px; }
  /* "figurinhas", o nome mais comprido, pede as letras um tiquinho mais juntas pra caber inteiro (360-419 px) */
  #telaMenu .btn.menu-atalho { gap: 2px; min-height: 54px; padding: 6px 2px 5px; font-size: 10px; letter-spacing: -.035em; }
  #telaMenu .btn.menu-atalho .xtra { font-size: 22px; }
  #telaMenu .menu-atalho .ma-ico { width: 22px; height: 22px; }
  .menu-atalho .ma-txt small { top: 3px; left: 5px; font-size: 9px; }
}
/* 360 px: 5 atalhos de ~62 px; "carreira" e "figurinhas" cabem inteiros com um fio a menos de respiro */
@media (max-width: 379px) {
  .menu-modos { gap: 4px; }
  #telaMenu .btn.menu-atalho { padding-left: 0; padding-right: 0; font-size: 9.5px; }
}

/* recorde: texto, sem cara de botão (o botão continua lá pros 10 toques do segredo do diamante) */
.menu-recorde { margin: 2px 0 0; }
.recorde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: var(--gray-7);
  font-size: 14px;
  letter-spacing: .04em;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.recorde .xtra { font-size: 20px; line-height: 1; }
.recorde small { font-size: 11px; letter-spacing: .14em; }
.recorde b { color: var(--ink); }

/* tela baixa em pé (360×740 com foguinho, duelo, carteira e meta, o caso mais cheio): respiros e botões um pouco
   menores, e a frase some (o Snip e o nome já dizem quem é) */
@media (max-height: 760px) and (min-height: 481px) {
  .menu-centro { gap: 8px; }
  .btn.menu-jogar { min-height: 58px; }
  .btn.menu-desafio { min-height: 50px; }
  .tagline { display: none; }
  .lider { margin-top: -4px; }
}
/* computador (tela larga e alta): a coluna do meio um pouco maior, com a letra da 2ª linha dos botões mais legível */
@media (min-width: 900px) and (min-height: 700px) {
  /* (32rem: os 5 atalhos com o nome inteiro; o Snip e o nome maiores, que sobra altura) */
  .menu-centro { max-width: 32rem; }
  .menu-marca { --snip-a: clamp(150px, 21vh, 200px); }
  .logo { font-size: clamp(60px, 8.6vh, 92px); }
  .btn.menu-jogar { min-height: 72px; font-size: 26px; }
  .menu-jogar .mb-sub { font-size: 14px; }
  .btn.menu-desafio { min-height: 62px; font-size: 18px; }
  .menu-desafio .mb-sub { font-size: 13px; }
  #telaMenu .btn.menu-atalho { min-height: 72px; font-size: 13px; letter-spacing: .03em; }
  #telaMenu .btn.menu-atalho .xtra { font-size: 28px; }
}

/* dica do teclado: só no computador (tela larga com mouse) */
.menu-dica { display: none; margin: -2px 0 0; font-size: 12px; letter-spacing: .1em; color: var(--gray-5); }
.menu-dica kbd { padding: 0 6px; border: 1.5px solid currentColor; border-radius: 6px; font: inherit; }
@media (min-width: 900px) and (min-height: 481px) and (hover: hover) {
  .menu-dica { display: block; }
}

/* pílula do alto do menu (a carteira): o mesmo alto da engrenagem, 44 px de toque */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px 6px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pilula:active { transform: scale(.96); }
/* a palavra antes do valor ("carteira") */
.pilula small { font-size: 10px; letter-spacing: .12em; color: var(--gray-7); }

/* topo das telas que rolam (ranking, figurinhas) */
.tela-topo {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin: 6px 0 22px;
}
.tela-topo h2 { margin: 0; font-size: 30px; font-weight: 900; }
.voltar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 30px;
  cursor: pointer;
}

/* ===== botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn .xtra { font-size: 1.3em; line-height: 1; text-transform: none; }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.grande { min-height: 58px; font-size: 22px; }
.btn.peq { min-height: 42px; padding: 8px 12px; font-size: 13px; }
.btn small { font-size: 11px; opacity: .7; }
/* selo "novo" (prêmio liberado ainda sem escolha) */
.selo-novo {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.2;
}

/* ===== fim de missão ===== */
/* a caixa fica no meio mesmo com a chuva como primeiro filho; a chuva cai atrás dela, só nas laterais */
#telaFim > .caixa { margin-top: auto; margin-bottom: auto; }
.caixa { position: relative; z-index: 1; }
.chuva-fim { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.chuva-fim span { position: absolute; top: -10%; color: var(--ink); animation: fall linear forwards; }
.chuva-fim span.r { color: var(--red); }
.caixa.fim { gap: 10px; }
.fim-col { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.fim-lucro { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: .01em; }
.fim-titulo { margin-top: -4px; font-size: 14px; letter-spacing: .25em; color: var(--gray-7); }
/* NOVO RECORDE: etiqueta vermelha girada −3°, tipo carimbo */
.newrec {
  display: none;
  padding: 4px 12px 5px;
  background: var(--red);
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.newrec.show { display: block; animation: pop .35s var(--ease); }
.results { display: flex; gap: 26px; }
.results .v { font-size: 24px; font-weight: 900; }
.results .k { font-size: 10px; letter-spacing: .2em; color: var(--gray-7); }
.fim-linha { margin: 0; font-size: 12px; letter-spacing: .1em; line-height: 1.5; color: var(--ink); }
#fim-objetivo { color: var(--red); }
.barrinha { display: inline-block; width: 64px; height: 8px; margin-left: 4px; border: 1.5px solid var(--ink); border-radius: 4px; vertical-align: middle; overflow: hidden; }
.barrinha i { display: block; height: 100%; background: var(--ink); }
.dia-end { margin: 0; font-size: 12px; letter-spacing: .15em; color: var(--gray-7); }
.dia-end:empty { display: none; }
/* figurinhas ganhas na missão, todas juntas */
.fim-figs { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; }
.fim-figs .xtra { font-size: 26px; line-height: 1; color: var(--red); }
.fim-figs.muitas .xtra { font-size: 19px; white-space: nowrap; }
.fim-figs.muitissimas .xtra { font-size: 15px; }
.fim-premio:empty { display: none; }
/* botões travados nos primeiros 600 ms (opacidade 0,5 → 1) */
#telaFim .btn, #telaFim input { transition: transform .15s, opacity .25s; }
#telaFim.travada .btn, #telaFim.travada input, #telaFim.travada .cartao-premio { pointer-events: none; opacity: .5; }
/* e todo botão que as tomadas põem no fim (a linha da carteira da loja, o desafiar/revanche das disputas), mesmo sem a
   classe .btn: o toque que sobrou da música não pode abrir a loja nem sair da tela */
#telaFim.travada button { pointer-events: none; }
/* o cartão inteiro já fica a 50%: os botões dele não somam mais transparência */
#telaFim.travada .cartao-premio .btn { opacity: 1; }

/* cartão "prêmio novo: usar agora / guardar" */
.cartao-premio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 26rem;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
}
.cartao-premio img { flex: none; width: 48px; height: 48px; }
.cp-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.cp-txt small { font-size: 10px; letter-spacing: .2em; color: var(--red); text-transform: uppercase; }
.cp-txt b { font-size: 14px; }
.cp-botoes { display: flex; flex-direction: column; gap: 4px; }
.cp-botoes .btn.peq { min-height: 44px; padding: 6px 10px; font-size: 12px; }
.cartao-premio.flutua {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--bottom));
  z-index: 65;
  width: calc(100vw - 32px);
  transform: translateX(-50%);
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .5);
  animation: entra .35s var(--ease);
}

.reg { display: flex; gap: 8px; width: 100%; justify-content: center; }
.reg input {
  flex: 1;
  min-width: 0;
  max-width: 220px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  font-family: 'MoreSugar', sans-serif;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.reg input::placeholder { color: var(--gray-5); }
.reg input:focus { outline: 2px dashed var(--ink); outline-offset: 3px; }
.regmsg { min-height: 1.2em; font-size: 12px; letter-spacing: .15em; }
.regmsg.err { color: var(--red); }

.end-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.end-actions.col { flex-direction: column; width: 100%; max-width: 18rem; }

.cred { margin: 0; font-size: 14px; letter-spacing: .06em; line-height: 1.7; color: var(--gray-7); }
.cred b { color: var(--ink); }

/* ===== ranking ===== */
.live {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  animation: pulse 1.2s infinite;
}
.rank { width: 100%; max-width: 48rem; }
.rank table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.rank th {
  padding: 8px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray-7);
}
.rank td { padding: 12px 8px; border-bottom: 1px solid var(--ink); text-align: left; }
.rank td.pos { font-weight: 900; }
.rank td.cash { font-weight: 700; }
.rank td.mt { color: var(--gray-5); }
.rank tr.me td { background: var(--ink); color: var(--paper); }
.rank .cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: .06em;
}
.rank .empty { padding: 24px 8px; font-size: 13px; letter-spacing: .12em; color: var(--gray-7); }

/* ===== figurinhas e prêmios ===== */
.fig-count { margin: -10px 0 22px; font-size: 12px; letter-spacing: .2em; color: var(--gray-7); }
.fig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 56rem;
}
.fig {
  aspect-ratio: 1 / 1.15;
  padding: 8px;
  border: 2px dashed #c4c4c4;
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fig .q { font-size: 30px; line-height: 1; color: #c4c4c4; }
.fig b { font-size: 10px; font-weight: 400; line-height: 1.35; letter-spacing: .06em; color: var(--gray-5); }
.fig.ok { border: 2px solid var(--ink); background: var(--paper); transform: rotate(var(--r, 0deg)); }
.fig.ok .g {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}
.fig.ok.r .g { color: var(--red); } /* 1 em cada 3 da página (a classe vem do álbum: o título da página não conta) */
.fig.ok b { font-weight: 700; color: var(--ink); }
.fig.new { animation: pop .6s var(--ease); }
/* título de cada página do álbum ("3 · loja  2/4"), na largura toda da grade; página completa ganha o carimbo */
.fig-pag {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 -4px;
  font-size: 20px;
  font-weight: 900;
  text-align: left;
}
.fig-pag:first-child { margin-top: 0; }
.fig-pag small { font-size: 12px; font-weight: 400; letter-spacing: .2em; color: var(--gray-7); }
.fig-completa {
  margin-left: auto;
  padding: 1px 8px;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.premios { width: 100%; max-width: 56rem; margin: 40px 0 10px; }
.premios h3 { margin: 0 0 22px; font-size: 22px; font-weight: 900; }
.premio-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.premio {
  width: 150px;
  padding: 14px 10px;
  border: 2px dashed #c4c4c4;
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gray-5);
  font-family: inherit;
  cursor: default;
  transition: transform .15s;
}
.premio { position: relative; }
.premio .g { font-size: 34px; line-height: 1; }
.premio img { width: 48px; height: 48px; }
.premio .selo-novo { position: absolute; top: -8px; right: -6px; }
/* prêmio em uso: carimbo "USANDO" em vez de virar um bloco preto */
.premio .usando {
  padding: 1px 7px;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}
.premio b { font-size: 13px; }
.premio small { font-size: 10px; letter-spacing: .15em; }
.premio.ok { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.premio.ok.on { border-color: var(--red); }

/* ===== moedinha escondida (easter egg), nos créditos ===== */
.segredo {
  width: 26px;
  height: 26px;
  margin-top: 6px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  font-family: 'MoreSugar', sans-serif;
  font-size: 14px;
  line-height: 1;
  opacity: .22;
  cursor: pointer;
  transition: opacity .3s, transform .3s var(--ease);
}
.segredo:focus-visible { opacity: 1; transform: rotate(20deg) scale(1.2); }
.segredo.achou { opacity: 1; animation: pulse 1s infinite; }

/* ===== aviso rápido ===== */
.toast {
  position: fixed;
  left: 50%;
  /* --sobe-toast: altura do cartão "prêmio novo" quando ele flutua no pé (o app.js mede); o aviso fica acima dele */
  bottom: calc(24px + var(--bottom) + var(--sobe-toast, 0px));
  z-index: 70;
  max-width: calc(100vw - 32px);
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 120px);
  transition: transform .3s var(--ease), opacity .3s, bottom .3s var(--ease);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* código Konami: visual antigo, neon verde no preto */
html.neon { filter: invert(1) hue-rotate(180deg) sepia(.5) saturate(4) hue-rotate(75deg); }

/* ===== chuva de $ (easter egg / recorde) ===== */
#burst { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
#burst span {
  position: absolute;
  top: -10%;
  color: var(--ink);
  animation: fall linear forwards;
}
#burst span.r { color: var(--red); }
@keyframes fall { to { transform: translateY(125vh) rotate(var(--rot, 180deg)); } }

/* ===== página 404 (usa este mesmo CSS) ===== */
html.pagina, html.pagina body { overflow: auto; height: auto; -webkit-user-select: auto; user-select: auto; }
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 24px;
}
.topbar > :first-child { justify-self: start; }
.ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 36px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.brand { padding: 4px 24px; font-size: 24px; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
.nf {
  min-height: 72vh;
  padding: 24px 16px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.nf-ico { font-size: 70px; line-height: 1; }
.nf-snip { display: block; width: 105px; height: 150px; margin-bottom: -6px; }
.nf-big { margin: 0; font-size: clamp(110px, 28vw, 220px); font-weight: 900; line-height: .9; }
.nf-txt { margin: 0; font-size: 26px; font-weight: 900; }
.nf-sub { margin: 0 0 10px; font-size: 13px; letter-spacing: .15em; color: var(--gray-7); }

/* ===== efeitos de passar o mouse: só onde tem mouse (no toque eles "grudam") ===== */
@media (hover: hover) {
  .btn:hover { transform: scale(1.05); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); }
  .premio.ok:hover { transform: rotate(-2deg) scale(1.04); }
  .segredo:hover { opacity: 1; transform: rotate(20deg) scale(1.2); }
  .pilula:hover { background: var(--ink); color: var(--paper); }
  .pilula:hover small, .menu-desafio:hover .mb-sub { color: inherit; }
}

/* ===== telas pequenas ===== */
@media (max-width: 640px) {
  .fig-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .premio { width: calc(50% - 6px); }
  .hud .st { font-size: 11px; padding: 4px 8px; letter-spacing: .06em; }
  .hud .st.lucro { padding: 3px 9px 4px; }
  .hud .dia-pill { font-size: 10px; padding: 3px 7px; }
  .hud-tempo b { min-width: 54px; font-size: 26px; }
  .caixa { padding: 20px 14px; gap: 11px; }
  .caixa .big { font-size: 28px; }
  .results { gap: 18px; }
  .results .v { font-size: 22px; }
  .caixa.fim { gap: 8px; }
  .fim-col { gap: 8px; }
  .rank table { font-size: 13px; }
  .rank .hide-sm { display: none; }
}
/* computador: lucro maior */
@media (min-width: 900px) {
  .hud .lucro b { font-size: 26px; }
  .fim-lucro { font-size: 64px; }
}
/* celular deitado: a tela de fim em 2 colunas (cabe sem rolar); o menu deitado vem logo abaixo */
@media (max-height: 480px) {
  .tela { padding-top: calc(10px + var(--top)); padding-bottom: calc(10px + var(--bottom)); }
  .caixa.fim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0 18px;
    max-width: 48rem;
    padding: 12px 16px;
  }
  .fim-col { gap: 6px; }
  /* o próximo objetivo (MS.objetivos) cabe numa linha: texto que passar da coluna termina em "…" em vez de empurrar a
     caixa pra baixo da tela */
  #fim-objetivo { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fim-lucro { font-size: 44px; }
  .results { gap: 16px; }
  .results .v { font-size: 20px; }
  .cp-botoes { flex-direction: row; }
  .btn { min-height: 40px; padding: 8px 14px; }
  .btn.grande { min-height: 44px; font-size: 18px; }
  .btn.peq { min-height: 38px; }
  /* fim: card pro story, postar no X e menu numa fileira só, e menos respiro entre os blocos (com foguinho, duelo,
     carteira e o "registrado como" juntos, a coluna da direita passava da tela) */
  .fim-col:last-child { gap: 4px; }
  .fim-col:last-child .end-actions { flex-wrap: nowrap; gap: 6px; }
  .fim-col:last-child .end-actions .btn.peq { min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
}
/* menu no celular deitado (844×390): 2 colunas lado a lado, quem é (logo, frase, líder, recorde, meta do dia) | o que
   fazer (foguinho e duelo, JOGAR, DESAFIO e os 4 atalhos numa fileira). A barra do alto continua no fluxo: a
   engrenagem nunca cai em cima do foguinho */
@media (max-height: 480px) and (min-width: 560px) {
  .menu-centro {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 0 28px;
    max-width: 52rem;
  }
  .menu-id, .menu-acoes { display: flex; flex-direction: column; min-width: 0; }
  .menu-id { align-items: center; gap: 6px; }
  .menu-acoes { gap: 8px; }
  .menu-marca { --snip-a: clamp(84px, 27vh, 118px); }
  .logo { font-size: clamp(34px, 11vh, 48px); }
  .tagline { margin: 2px 0 0; font-size: 12px; }
  .lider { margin: 0; }
  .menu-recorde { margin: 0; }
  #menu-rodape { align-self: stretch; }
  .btn.menu-jogar { min-height: 54px; padding-top: 5px; padding-bottom: 6px; font-size: 21px; }
  .btn.menu-desafio { min-height: 48px; padding-top: 4px; padding-bottom: 5px; font-size: 15px; }
  /* deitado, as 3 disputas numa fileira só (a altura é que falta): o DESAFIO mostra só a sua nota de hoje (a faixa
     sai) e o DUELO só o título */
  .menu-disputa > #btnDaily { flex-basis: 0; }
  #btnDaily #desafioFaixa { display: none; }
  #btnDaily #desafioFaixa + .dia::before { content: none; }
  .menu-duelo .mb-sub#dueloInfo { display: none; }
  .btn.menu-camp, .btn.menu-duelo { font-size: 14px; }
  #telaMenu .btn.menu-atalho { min-height: 52px; padding: 5px 2px; gap: 2px; letter-spacing: 0; }
  #telaMenu .btn.menu-atalho .xtra { font-size: 22px; }
  #telaMenu .menu-atalho .ma-ico { width: 22px; height: 22px; }
}
/* deitado e estreito (tela antiga de 568 px): os atalhos em 2×2, ícone ao lado do nome */
@media (max-height: 480px) and (min-width: 560px) and (max-width: 699px) {
  #telaMenu .btn.menu-atalho { font-size: 10px; letter-spacing: 0; }
}

/* telas registradas ainda vazias (esqueletos da loja e da carreira) */
.tela-vazia { margin: 24px auto; max-width: 420px; text-align: center; font-size: 18px; opacity: .75; }

/* ===== css/retencao.css ===== */
/* css/retencao.css — trilha R (retenção): foguinho (js/foguinho.js), duelo (js/duelo.js), ranking (js/nucleo/ranking.js),
   primeira missão e convite pra instalar (js/tutorial.js).
   No ar, o build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gray-*). */

/* ===== tomada menu-dia: pílula do foguinho + cartão do duelo, acima do JOGAR (no celular deitado, no alto da coluna
   das ações) ===== */
#menu-dia:not(:empty) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

/* ----- foguinho ----- */
.fogo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fogo-pilula {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  padding: 3px 12px 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}
/* glifo $ da fonte de desenhos = fogo (exclusivo do foguinho) */
.fogo-g { font-size: 24px; line-height: 1; color: var(--red); }
.fogo[data-estado="pendente"] .fogo-g { color: var(--gray-5); animation: fogoTreme 1.4s ease-in-out infinite; }
.fogo[data-estado="apagado"] .fogo-g { color: #c4c4c4; }
@keyframes fogoTreme {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-6deg) scale(1.08); }
  60% { transform: rotate(5deg) scale(.96); }
}
.fogo-n b { font-size: 17px; }
/* 7 bolinhas, de segunda a domingo */
.fogo-semana { display: inline-flex; align-items: center; gap: 3px; }
.fogo-semana i { width: 8px; height: 8px; border: 1.3px solid var(--ink); border-radius: 50%; background: var(--paper); }
.fogo-semana i.j { background: var(--ink); }
.fogo-semana i.j.hoje { border-color: var(--red); background: var(--red); }
.fogo-semana i.e { background: #c3cbe6; }                    /* dia salvo pelo escudo */
.fogo-semana i.hoje:not(.j) { border-color: var(--red); animation: pulse 1.2s infinite; }
.fogo-semana i.fut { border-color: #c4c4c4; }
.fogo-escudo { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; }
.fogo-escudo svg, .fogo-ganhou svg { width: 13px; height: 15px; fill: #c3cbe6; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.fogo-msg { font-size: 12px; letter-spacing: .1em; line-height: 1.3; color: var(--gray-7); }
.fogo-msg.aviso { color: var(--red); }

/* ----- novato (nunca acendeu o foguinho): "jogue o desafio #3 / acende o foguinho e +$4.000", que abre o desafio ----- */
.fogo-chama {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--red);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: entra .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fogo-chama .fogo-g { flex: none; color: var(--gray-5); animation: fogoTreme 1.4s ease-in-out infinite; }
.fogo-chama-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fogo-chama-txt b { font-size: 15px; letter-spacing: .06em; color: var(--red); }
.fogo-chama-txt small { font-size: 12px; letter-spacing: .06em; color: var(--gray-7); }
.fogo-chama:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }
@media (hover: hover) {
  .fogo-chama:hover { background: #fff5f5; }
}
/* ...e o botão "desafio do dia" ganha um anel vermelho que pulsa devagar */
html.ms-chama-dia #btnDaily { border-color: var(--red); color: var(--red); animation: msChama 1.8s ease-in-out infinite; }
@keyframes msChama {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fogo-chama .fogo-g, html.ms-chama-dia #btnDaily { animation: none; }
}

/* ----- cartão do duelo: "GABRIEL fez $13.300 no desafio #3. Bate?" [ACEITAR] [x] ----- */
.duelo-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
  animation: entra .35s var(--ease);
}
.duelo-txt { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; letter-spacing: .03em; overflow-wrap: anywhere; }
.duelo-vs, .duelo-bate { color: var(--red); }
.duelo-bate { white-space: nowrap; }
/* placar com esse amigo, guardado: "você 3 × 1 GABRIEL" */
.duelo-placar { display: block; font-size: 12px; letter-spacing: .06em; line-height: 1.3; color: var(--gray-7); }
.duelo-placar b { color: var(--ink); white-space: nowrap; }
.btn.duelo-aceitar { flex: none; min-height: 44px; padding: 8px 14px; border-color: var(--red); background: var(--red); font-size: 14px; }
.duelo-fechar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== tomada hud: meta do duelo escrita no placar (13 px, vermelha, sem pílula; fica acima do campo) ===== */
.duelo-meta {
  margin: 2px 0 0;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--red);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 6px var(--paper);
}
.duelo-meta.passou { color: var(--ink); animation: pop .35s var(--ease); }
.duelo-meta.passou b { color: var(--red); }

/* ===== tomada fim-extras: carimbo "+1 dia" e contagem; resultado do duelo e "desafiar amigo" ===== */
.fogo-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.3;
}
.fogo-fim-txt { display: inline-flex; align-items: center; gap: 4px; }
.fogo-fim .fogo-g { font-size: 20px; }
.fogo-carimbo {
  padding: 2px 9px 3px;
  border: 2px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: fogoCarimbo .45s var(--ease) both;
}
@keyframes fogoCarimbo { from { opacity: 0; transform: rotate(-4deg) scale(1.6); } }
.fogo-ganhou { display: inline-flex; align-items: center; gap: 3px; color: var(--red); }
.fogo-conta { color: var(--gray-7); }
.fogo-conta b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* acabou de acender (1 dia): "volta amanhã! próximo desafio em 7h12" em destaque */
.fogo-conta.destaque {
  padding: 2px 10px 3px;
  border: 2px solid var(--red);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  animation: pop .35s var(--ease) .3s both;
}
.fogo-conta.destaque b { color: var(--red); }
/* numa linha só até no celular estreito: "volta amanhã! próximo em 7h12" */
.fogo-conta.destaque { white-space: nowrap; }
.fogo-conta.destaque .fogo-longo { display: none; }
.fogo-volta { color: var(--red); font-weight: 700; }
.fogo-fim.lembrete { color: var(--gray-7); }
.fogo-fim.lembrete .fogo-g { color: var(--gray-5); }
.fogo-fim.lembrete b { color: var(--ink); }

.duelo-fim { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fogo-fim + .duelo-fim { margin-top: 8px; }
.duelo-res { margin: 0; font-size: 13px; letter-spacing: .06em; line-height: 1.3; }
.duelo-res.ganhou { color: var(--red); }
.duelo-res.ganhou b { color: var(--ink); }
.btn.ghost.duelo-desafiar { border-color: var(--red); color: var(--red); }
@media (hover: hover) {
  .btn.ghost.duelo-desafiar:hover { background: var(--red); color: var(--paper); }
}

/* ===== celular deitado: foguinho e duelo no alto da coluna das ações, mais baixinhos (a pílula e a frase numa linha
   só; o cartão do duelo numa fileira de 44 px) ===== */
@media (max-height: 480px) {
  .fogo { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
  .fogo-msg { font-size: 11px; }
  .fogo-chama { min-height: 40px; }
  .fogo-chama-txt { flex-direction: row; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
  .duelo-card { padding: 2px 2px 2px 10px; }
  .duelo-txt { font-size: 12px; line-height: 1.25; }
  .btn.duelo-aceitar { min-height: 38px; padding: 4px 10px; font-size: 13px; }  /* igual ao .btn.peq do núcleo no deitado */
  .duelo-fechar { width: 38px; height: 38px; font-size: 15px; }
}
/* deitado: fim em 2 colunas e sem altura sobrando; foguinho numa linha ("próximo em 7h12") e o duelo
   numa fileira só: resultado à esquerda, botão à direita */
@media (max-height: 480px) {
  .fogo-longo { display: none; }
  .fogo-fim { gap: 2px 8px; }
  .fogo-fim + .duelo-fim { margin-top: 2px; }
  .duelo-fim { flex-direction: row; justify-content: center; gap: 10px; width: 100%; }
  .duelo-res { flex: 0 1 auto; min-width: 0; font-size: 12px; text-align: right; }
  .btn.duelo-desafiar { flex: none; }
  /* deitado: o placar do amigo ("você 3 × 1 GABRIEL") fica embaixo do resultado, os dois à esquerda do botão
     (a fileira não fica mais alta que o botão) */
  .duelo-fim:has(.duelo-placar) { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 10px; }
  .duelo-fim:has(.duelo-placar) .duelo-res { grid-area: 1 / 1; align-self: end; }
  .duelo-fim .duelo-placar { grid-area: 2 / 1; align-self: start; min-width: 0; font-size: 11px; text-align: right; }
  .duelo-fim:has(.duelo-placar) .btn.duelo-desafiar { grid-area: 1 / 2 / 3 / 3; }
  .fogo-conta.destaque { font-size: 12px; padding: 1px 8px 2px; }
  .fogo-chama { padding: 4px 10px 4px 8px; gap: 6px; }
  .fogo-chama-txt b { font-size: 13px; }
  .fogo-chama-txt small { font-size: 11px; }
}
/* deitado e largo: foguinho e "desafiar amigo" lado a lado quando cabem (o fim do núcleo já usa a altura toda) */
@media (max-height: 480px) and (min-width: 640px) {
  #fim-extras:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; }
  #fim-extras .fogo-fim { font-size: 12px; letter-spacing: .02em; gap: 2px 6px; }
  #fim-extras .fogo-fim + .duelo-fim { margin-top: 0; }
  #fim-extras .duelo-fim { width: auto; }
  #fim-extras .btn.duelo-desafiar { padding: 6px 10px; font-size: 13px; letter-spacing: .04em; }
}

/* ===== ranking (js/nucleo/ranking.js): abas HOJE · SEMANA · GERAL · HALL DA FAMA, estado vazio e a sua posição ===== */
/* flex-shrink 0: a tela é uma coluna flex de altura fixa e, com overflow hidden, as abas encolheriam até sumir no deitado */
.rank-abas { flex-shrink: 0; display: flex; width: 100%; max-width: 48rem; margin: -10px 0 12px; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.rank-aba {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-left: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.rank-aba:first-child { border-left: 0; }
/* "hall da fama": o "da fama" some quando as 4 abas não cabem inteiras (celular em pé) */
.rank-aba i { font-style: normal; }
.rank-aba.on { background: var(--ink); color: var(--paper); }
.rank-aba:focus-visible { outline: 2px dashed var(--red); outline-offset: -5px; }
.rank .cta.vazio { flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px; font-size: 15px; line-height: 1.35; text-align: center; }
/* de que é a lista: "desafio #3 · a mesma rodada pra todo mundo", "temporada 1 · os campeões de antes..." */
.rank-sub { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; line-height: 1.3; color: var(--gray-7); text-align: center; }
/* a sua posição: presa no pé da tela, por cima da lista que rola */
.rank-eu:not(:empty) {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
  max-width: 48rem;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.3;
}
.rank-eu b { color: var(--red); font-size: 15px; }
/* presa no pé (lista maior que a tela): papel cobrindo o respiro da tela embaixo dela. Começa depois da borda, e
   borda + faixa = o padding-bottom da .tela, pra não criar rolagem a mais */
.rank-eu.preso:not(:empty)::after { content: ''; position: absolute; left: -2px; right: -2px; top: calc(100% + 1.5px); height: calc(18.5px + var(--bottom)); background: var(--paper); pointer-events: none; }

/* quadro vazio: o campeão de ontem em cima do convite ("ontem GK venceu o desafio #2 com $5.100") */
.rank .cta.vazio .vazio-ontem { margin: 0 0 -4px; font-size: 14px; letter-spacing: .06em; line-height: 1.35; }
.rank .cta.vazio .vazio-ontem b:last-child { color: var(--red); }

/* menu: "LUCAS te passou na semana por $1.200" no lugar do líder (toca e abre a SEMANA). A área de toque tem 44 px,
   mas a linha não fica mais alta (margem negativa) */
#lider.rival { color: var(--ink); }
.lider-rival {
  margin: -13px 0;
  padding: 13px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline wavy var(--red) 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lider-rival:focus-visible { outline: 2px dashed var(--red); outline-offset: -8px; }

/* fim da missão: "registrado como GABRIEL · #3 hoje · trocar" (no lugar do campo do nome) */
.reg-linha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; font-size: 13px; letter-spacing: .1em; line-height: 1.3; }
.reg-linha[hidden] { display: none; }
.reg-linha b { font-weight: 900; }
.reg-trocar {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .rank-aba { font-size: 12px; letter-spacing: .06em; padding: 0 4px; }
}
@media (max-width: 520px) {
  .rank-aba i { display: none; }
}
@media (max-height: 480px) {
  .rank-abas { margin: -14px 0 8px; }
  .rank-sub { margin: -4px 0 0; }
  .rank-eu.preso:not(:empty)::after { height: calc(8.5px + var(--bottom)); }
  .rank .cta.vazio { padding: 12px 8px; }
  .rank-aba { min-height: 40px; }
  .reg-trocar { min-height: 36px; }
  .reg-linha { font-size: 12px; }
}

/* ===== primeira missão (js/tutorial.js) ===== */
/* menu da 1ª visita: só o JOGAR e o DESAFIO em destaque (e a engrenagem, que guarda o som); os atalhos, o recorde, a
   meta do dia, o CAMPEONATO e o DUELO aparecem depois da 1ª missão */
html.ms-estreia #telaMenu .menu-modos,
html.ms-estreia #telaMenu .menu-recorde,
html.ms-estreia #telaMenu #menu-rodape,
html.ms-estreia #telaMenu .menu-dica,
/* FEBRE: as disputas novas (CAMPEONATO e DUELO) também esperam a 1ª música; o Snip fica (é a cara do jogo) */
html.ms-estreia #telaMenu .menu-camp,
html.ms-estreia #telaMenu .menu-duelo { display: none; }
/* ...e os atalhos chegam com um pulso (3 vezes) */
html.ms-revela #telaMenu .menu-atalho { animation: msRevela .8s var(--ease) 3; }
@keyframes msRevela {
  0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}
/* "pular" do treino: no pé da tela, abaixo do campo (o campo acaba 70 px acima do rodapé), por baixo da pausa */
.btn.treino-pular {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + var(--bottom));
  z-index: 25;
  width: max-content;
  min-width: 104px;
  min-height: 44px;
  margin: 0 auto;
  padding: 8px 18px;
  letter-spacing: .12em;
  animation: entra .35s var(--ease);
}
/* dicas que aparecem uma vez: canvas transparente entre o campo e o placar, que não pega toque */
.dicas-camada { position: fixed; inset: 0; z-index: 10; display: none; width: 100%; height: 100%; pointer-events: none; }
.dicas-camada.on { display: block; }
body:not(.jogando) .dicas-camada { display: none; }

/* ===== convite pra instalar (tomada fim-extras; no celular deitado, pé da coluna do lucro: js/tutorial.js). No menu
   não tem dica fixa: o convite aparece no momento certo, no fim da missão, e a dica do iPhone mora nos ajustes ===== */
.convite {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 26rem;
  padding: 6px 2px 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
  animation: entra .35s var(--ease);
}
.convite-g { flex: none; font-size: 28px; line-height: 1; color: var(--red); }
.convite-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; letter-spacing: .03em; }
.convite-tit { display: block; font-size: 14px; letter-spacing: .06em; }
.convite-sub { color: var(--gray-7); }
.convite-passos { margin: 2px 0 0; padding-left: 1.3em; color: var(--gray-7); }
.convite-passos b { color: var(--ink); }
.convite-passos svg { width: 13px; height: 16px; margin: 0 1px; vertical-align: -3px; fill: none; stroke: #2563eb; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn.convite-sim { flex: none; min-height: 44px; padding: 8px 12px; font-size: 13px; }
.convite-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* os 600 ms de trava do fim valem pro convite também (o toque que sobrou da missão não instala nem fecha) */
#telaFim.travada .convite button { pointer-events: none; }
/* deitado: o fim já usa a altura toda, então o convite fica numa faixa de 44 px: título e texto corridos, os 2 passos
   do iPhone encurtados numa linha ("[ícone] compartilhar → Adicionar à Tela de Início") */
@media (max-height: 480px) {
  .convite { padding: 1px 0 1px 8px; gap: 6px; }
  .convite-g { font-size: 20px; }
  .convite-txt { font-size: 12px; line-height: 1.2; letter-spacing: .02em; }
  .convite-tit { display: inline; font-size: 12px; letter-spacing: .03em; }
  .convite-tit::after { content: ': '; }
  .convite-longo { display: none; }
  .convite-passos { display: inline; margin: 0; padding: 0; list-style: none; }
  .convite-passos li { display: inline; }
  .convite-passos li + li::before { content: ' → '; }
  .btn.convite-sim { min-height: 38px; padding: 4px 10px; font-size: 12px; }
  .convite-x { width: 38px; height: 38px; font-size: 14px; }
}

/* ===== css/musica.css ===== */
/* css/musica.css — tela "suas músicas" (js/musica.js). No ar, o build.js junta no fim do style.css. */

/* a entrada: uma linha no bloco "jogo" dos ajustes (.aj-link, css/ajustes.css), só no aparelho do dono */
.mu-botao span { font-size: 18px; line-height: 1; color: var(--red); }

#telaMusicas .tela-topo h2 { padding-left: 52px; }

.mu-aviso {
  width: 100%;
  max-width: 48rem;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fbf5dd;
  font-size: 15px;
  text-align: left;
  line-height: 1.45;
}
.mu-aviso p { margin: 0 0 8px; }
.mu-aviso ul { margin: 0 0 8px; padding-left: 20px; }
.mu-aviso li { margin-bottom: 4px; }
.mu-aviso .mu-privado { margin: 0; padding-top: 8px; border-top: 1.5px dashed var(--ink); }

.mu-chave {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 48rem;
  margin: 16px 0 6px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.mu-chave input { width: 22px; height: 22px; accent-color: var(--red); flex: none; }

.mu-lista { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 48rem; margin: 8px 0 14px; }
.mu-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
}
.mu-linha.tem { background: #eef7e8; }
.mu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mu-txt small { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-5); }
.mu-txt b { font-size: 18px; }
.mu-disco { font-size: 13px; color: var(--gray-7); }
.mu-estado { font-size: 13px; color: var(--red); overflow-wrap: anywhere; }
.mu-botoes { display: flex; flex-direction: column; gap: 6px; flex: none; }
.mu-botoes .btn { white-space: nowrap; }
.mu-escolher { cursor: pointer; }
.mu-erro { margin: 0; font-size: 15px; color: var(--red); }
.mu-rodape { width: 100%; max-width: 48rem; margin: 0 0 24px; font-size: 12px; color: var(--gray-5); }

@media (max-width: 420px) {
  .mu-linha { flex-direction: column; align-items: stretch; }
  .mu-txt { text-align: center; }
  .mu-botoes { flex-direction: row; }
  .mu-botoes .btn { flex: 1; }
}

/* ===== css/loja.css ===== */
/* css/loja.css — trilha L (Fase 2): carteira, loja e visuais (js/loja.js, js/loja-catalogo.js).
   No ar, o build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gold, --gray-*). */

/* ===== visuais equipados que valem direto daqui ===== */
/* campo: cor lisa atrás dos alvos, só durante a missão (nada de padrão: a lição do xadrez). A cor vem do catálogo. */
html[data-loja-campo] body.jogando #game { background: var(--loja-papel, #fff); }
/* mira no computador: o cursor com o desenho comprado (a marca do toque é desenhada no canvas) */
html[data-loja-mira="mira-estrela"] body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M16 5L18.9 12L26.5 12.6L20.8 17.6L22.5 24.9L16 21L9.5 24.9L11.2 17.6L5.5 12.6L13.1 12Z'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23000'/%3E%3C/svg%3E") 16 16, crosshair;
}
html[data-loja-mira="mira-coracao"] body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M16 26C9 21 5 17 5 12.5C5 9 7.5 6.5 10.5 6.5C13 6.5 14.8 8 16 10C17.2 8 19 6.5 21.5 6.5C24.5 6.5 27 9 27 12.5C27 17 23 21 16 26Z'/%3E%3Ccircle cx='16' cy='15' r='1' fill='%23000'/%3E%3C/svg%3E") 16 15, crosshair;
}
html[data-loja-mira="mira-raio"] body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M18.2 4L9.8 17.4H15.3L13.4 28L22.2 14.1H16.7Z'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23000'/%3E%3C/svg%3E") 16 16, crosshair;
}
html[data-loja-mira="mira-flor"] body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='16' cy='10' r='4.6'/%3E%3Ccircle cx='21.7' cy='14.1' r='4.6'/%3E%3Ccircle cx='19.5' cy='20.9' r='4.6'/%3E%3Ccircle cx='12.5' cy='20.9' r='4.6'/%3E%3Ccircle cx='10.3' cy='14.1' r='4.6'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23000'/%3E%3C/svg%3E") 16 16, crosshair;
}
html[data-loja-mira="mira-diamante"] body.jogando #game {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4.6 13L10 7H22L27.4 13L16 28Z M4.6 13H27.4 M10 7L13.6 13L16 28 M22 7L18.4 13L16 28'/%3E%3C/svg%3E") 16 16, crosshair;
}

/* ===== moedinha amarela com $ (a moeda do jogo é sempre amarela): o ícone da carteira ===== */
.loja-moeda {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: 'MoreSugar', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

/* ===== menu: a pílula da carteira (tomada menu-topo, no alto à esquerda; o desenho de pílula é o .pilula do
   style.css) é a única entrada da loja ===== */
.loja-pilula { position: relative; }
.loja-pilula .loja-moeda { width: 24px; height: 24px; font-size: 13px; }
.loja-pilula .pilula-rotulo { white-space: nowrap; }
.loja-pilula b { font-variant-numeric: tabular-nums; }
/* ponto vermelho: tem coisa que já dá pra comprar */
.loja-pilula.pode::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--red);
}

/* ===== meta do dia no menu (tomada menu-rodape): discreta, tracejada. Em pé: no pé do menu, numa fileira só ("meta do
   dia +$3.000 · 1/3 missões ▰▱▱"). Computador: na coluna livre da direita, embaixo da engrenagem, com a frase do
   degrau. Deitado: no pé da coluna da esquerda ===== */
.loja-meta-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 4px 12px 6px;
  border: 1.5px dashed var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.loja-meta-menu:active { transform: scale(.97); }
.lmm-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; }
.lmm-cab small { font-size: 10px; letter-spacing: .12em; color: var(--gray-7); white-space: nowrap; }
.lmm-premio { font-size: 13px; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lmm-txt { font-size: 13px; line-height: 1.25; }
.lmm-linha { display: flex; align-items: center; gap: 8px; }
.lmm-conta { flex: none; font-size: 11px; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lmm-linha .loja-barra-meta { flex: 1; min-width: 30px; }
/* os 3 degraus feitos: borda cheia e o "feita!" carimbado */
.loja-meta-menu.feita { border-style: solid; }
.loja-meta-menu.feita .lmm-premio { padding: 0 5px; border: 1.5px solid var(--red); border-radius: 4px; transform: rotate(-4deg); }

/* barrinha dos 3 degraus: um pedaço por degrau, cheio até onde a soma do dia chegou; degrau passado = vermelho */
.loja-barra-meta { display: inline-flex; gap: 3px; width: 100%; height: 8px; vertical-align: middle; }
.loja-barra-meta i {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ink) calc(var(--p, 0) * 100%), transparent 0);
}
.loja-barra-meta i.cheio { border-color: var(--red); background: var(--red); }
.loja-barra-meta.mini { width: 54px; height: 7px; margin-left: 4px; gap: 2px; }

/* ===== fim da missão (fim-extras): "+$4.300 na carteira · $12.300" e o que mais entrou ===== */
.loja-fim { display: flex; flex-direction: column; align-items: center; gap: 0; }
.fogo-fim + .loja-fim, .duelo-fim + .loja-fim { margin-top: 4px; }
.loja-fim-linha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 2px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loja-fim-linha:active { transform: scale(.96); }
.loja-mais { font-size: 17px; font-variant-numeric: tabular-nums; }
.loja-fim-saldo {
  margin-left: 2px;
  padding: 2px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.loja-fim-sub { margin-top: -6px; font-size: 12px; letter-spacing: .06em; line-height: 1.35; color: var(--gray-7); }
/* a meta do dia, no fim de toda missão (Clássico e carreira): quanto já somou hoje, ou o degrau pago agora */
.loja-fim-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--gray-7);
  white-space: nowrap;
}
.loja-fim-linha + .loja-fim-meta { margin-top: -6px; }
.loja-fim-meta.pagou { color: var(--red); font-weight: 700; }

/* ===== a loja ===== */
#telaLoja > * { flex-shrink: 0; } /* a tela é uma coluna flex que rola: nada encolhe até sumir no celular deitado */
#telaLoja .tela-topo { margin-bottom: 14px; }
.loja-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 48rem;
  margin-bottom: 14px;
}
.loja-saldo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}
.loja-saldo .loja-moeda { width: 30px; height: 30px; font-size: 17px; }
.loja-saldo b { font-size: 26px; font-variant-numeric: tabular-nums; }
.loja-saldo small { font-size: 12px; letter-spacing: .1em; color: var(--gray-7); }
.loja-meta {
  flex: 1 1 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 2px dashed var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
}
.loja-meta-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 14px; line-height: 1.35; }
.loja-meta-txt small { width: 100%; font-size: 12px; letter-spacing: .12em; color: var(--gray-7); }
.loja-meta-premio { color: var(--red); font-weight: 700; white-space: nowrap; }
.loja-meta-txt.feita b { color: var(--gray-5); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.loja-meta-txt.feita .loja-meta-premio {
  padding: 0 6px;
  border: 2px solid var(--red);
  border-radius: 4px;
  transform: rotate(-3deg);
}
.loja-meta-prog, .loja-meta-bonus { font-size: 12px; letter-spacing: .06em; line-height: 1.35; color: var(--gray-7); }
.loja-meta-prog { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }

/* abas: pílulas que quebram em 2 linhas no celular em pé (6 abas não cabem numa linha de 358 px sem cortar o nome) */
.loja-abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 48rem;
  margin: 0 0 12px;
}
.loja-aba {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loja-aba[aria-selected="true"] { background: var(--ink); color: var(--paper); }

.loja-painel { width: 100%; max-width: 48rem; }
.loja-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.loja-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.loja-item:active { transform: scale(.96); }
.loja-mini { display: block; width: 100%; max-width: 104px; height: auto; }
.loja-nome { font-size: 14px; line-height: 1.2; }
.loja-acao {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.loja-item.meu .loja-acao { background: var(--paper); color: var(--ink); }
/* em uso: o carimbo "USANDO" (igual ao dos prêmios das figurinhas) */
.loja-item.usando { border-color: var(--red); }
.loja-item.usando .loja-acao {
  border: 2px solid var(--red);
  border-radius: 4px;
  background: none;
  color: var(--red);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}
/* ainda não dá: tracejado cinza e quanto falta */
.loja-item.caro { border-style: dashed; border-color: #c4c4c4; }
.loja-item.caro .loja-acao { border-color: transparent; background: none; color: var(--gray-5); font-weight: 400; }
.loja-item.caro .loja-nome { color: var(--gray-7); }
/* 1º toque: pergunta; o 2º (em até 4 s) compra */
.loja-item.confirma { border-color: var(--red); }
.loja-item.confirma .loja-acao { border-color: var(--red); background: var(--red); animation: pulse .9s infinite; }
.loja-item.comprou { animation: pop .6s var(--ease); }

/* upgrades (só na carreira) */
.loja-ups { display: flex; flex-direction: column; gap: 10px; }
.loja-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 8px 10px 8px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
}
.loja-up-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.loja-up-cab b { font-size: 16px; }
.loja-niveis { display: inline-flex; gap: 4px; }
.loja-niveis i { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
.loja-niveis i.on { background: var(--ink); }
.loja-up-efeito { grid-column: 1; font-size: 12px; letter-spacing: .04em; line-height: 1.35; color: var(--gray-7); }
.btn.loja-up-btn { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; font-size: 12px; }
.btn.loja-up-btn.caro { border-color: #c4c4c4; background: var(--paper); color: var(--gray-5); }
.btn.loja-up-btn.confirma { border-color: var(--red); background: var(--red); animation: pulse .9s infinite; }

.loja-rodape { max-width: 36rem; margin: 16px auto 0; font-size: 12px; letter-spacing: .06em; line-height: 1.4; color: var(--gray-7); }

@media (hover: hover) {
  .loja-item:not(.caro):not(.usando):hover { transform: rotate(-1.5deg) scale(1.03); }
  .loja-meta-menu:hover { border-style: solid; }
  .loja-fim-linha:hover .loja-fim-saldo { background: var(--ink); color: var(--paper); }
  .loja-aba:not([aria-selected="true"]):hover { background: #f1f1f1; }
}

/* ===== celular deitado (844×390): cabeçalho numa linha só e a grade mais baixa ===== */
@media (max-height: 480px) {
  #telaLoja .tela-topo { margin: 0 0 6px; }
  #telaLoja .tela-topo h2 { font-size: 24px; }
  .loja-topo { flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
  .loja-saldo { padding: 2px 12px; }
  .loja-saldo .loja-moeda { width: 24px; height: 24px; font-size: 14px; }
  .loja-saldo b { font-size: 20px; }
  .loja-meta { padding: 4px 12px; }
  .loja-abas { margin-bottom: 8px; }
  .loja-grade { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .loja-item { padding: 6px 6px 8px; gap: 2px; }
  .loja-mini { max-width: 92px; }
  .loja-rodape { margin-top: 10px; }
  /* fim da missão: a linha da carteira e a da meta (o detalhe do que entrou fica na loja); a coluna da direita já
     vem cheia */
  .loja-fim-sub { display: none; }
  .loja-fim-linha { margin: 0; min-height: 38px; }
  .loja-fim-linha + .loja-fim-meta { margin-top: -5px; }
}
/* celular em pé e estreito: "+$43.000 na carteira $222.300" numa linha só */
@media (max-width: 380px) {
  .loja-fim-linha { gap: 4px; padding: 2px 4px; font-size: 13px; letter-spacing: .02em; }
  .loja-mais { font-size: 16px; }
  .loja-fim-saldo { padding: 2px 7px; }
}
/* em pé e no deitado: sem a frase do degrau; em pé, cabeçalho e conta lado a lado numa fileira só */
.loja-meta-menu .lmm-txt { display: none; }
@media (max-width: 779px) and (min-height: 481px) {
  #menu-rodape .loja-meta-menu { flex-direction: row; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; }
  #menu-rodape .lmm-cab { flex: none; gap: 0 8px; }
  #menu-rodape .lmm-linha { flex: 1; min-width: 0; }
}
/* computador: na coluna livre da direita, embaixo da engrenagem (fora da coluna do meio: não mexe na altura do menu) */
@media (min-width: 780px) and (min-height: 481px) {
  #menu-rodape .loja-meta-menu {
    position: absolute;
    z-index: 1;
    top: calc(76px + var(--top));
    right: calc(16px + var(--right));
    width: min(220px, calc((100% - 28rem) / 2 - 32px));
    min-height: 0;
    padding: 5px 10px 7px;
  }
  #menu-rodape .loja-meta-menu .lmm-txt { display: block; }
  /* a tomada fica sem altura (o cartão saiu do fluxo): não soma o respiro dela ao pé do menu */
  #telaMenu #menu-rodape { display: contents; }
}
/* deitado: no pé da coluna da esquerda, do tamanho do recorde (não da coluna inteira) */
@media (max-height: 480px) {
  #menu-rodape .loja-meta-menu { max-width: 17rem; min-height: 40px; margin: 0 auto; padding: 3px 12px 5px; }
}

/* ===== css/carreira.css ===== */
/* css/carreira.css — trilha C (carreira, Fase 3, Levas A e B). No ar, o build.js junta no fim do style.css; usa as cores
   de lá (--ink, --paper, --red, --gray-*). Tudo aqui é da carreira: nada muda no Clássico (as classes só existem nas
   telas da carreira e no body durante uma fase dela). */

/* ===== estrelas (svg inline: contorno preto; cheia = vermelha, vazia = papel) ===== */
.car-estrela { width: 1em; height: 1em; flex: none; vertical-align: -.14em; fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.car-estrela.cheia { fill: var(--red); }

/* ===== botão no menu (tomada "menu-modos": um dos 4 atalhos; a fileira e o tamanho vêm do style.css) ===== */
.car-botao small { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; opacity: 1; }
/* menu da 1ª visita (js/tutorial.js, trilha R): só o JOGAR em destaque; a carreira chega depois, com o mesmo pulso */
html.ms-estreia #telaMenu .car-botao { display: none; }
html.ms-revela #telaMenu .car-botao { animation: msRevela .8s var(--ease) 3; }

/* ===== pílula do objetivo no placar (tomada "hud"), uma linha só, acima do campo ===== */
.car-hud {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  margin: 2px auto 0;
  padding: 1px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 12px;
  letter-spacing: .05em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car-hud b { color: var(--red); }
.car-hud.feito { border-color: var(--red); }
/* metrônomo da fase "no compasso": a bolinha enche enquanto a janela de ±120 ms está aberta e pula na batida
   (vermelha no 1º tempo). Só aparece nessas fases */
.car-metro { display: none; }
.car-hud.com-metro .car-metro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.car-metro i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .18;
  transform: scale(calc(.7 + .6 * var(--b, 0)));
}
.car-metro.aberta i { opacity: 1; }
.car-metro.um.aberta i { background: var(--red); }
.car-ok { color: var(--red); font-weight: 900; }
.car-lim.perto { color: var(--red); }
/* marcas de ★★ e ★★★ (lucro): contorno até o lucro passar; acesas = vermelhas, com um pulo na hora. Só a da vez tem
   o valor; na pílula que não coube (compacta), nenhuma */
.car-marcas { white-space: nowrap; }
.car-marca { display: inline-flex; align-items: center; gap: 3px; vertical-align: -1px; }
.car-marca + .car-marca { margin-left: 6px; }
.car-marca-e { display: inline-flex; font-size: 11px; }
.car-marca-e .car-estrela { stroke-width: 2.2; }
.car-marca.acesa .car-estrela { fill: var(--red); }
.car-marca.acendeu .car-marca-e { animation: car-acende .55s var(--ease); }
@keyframes car-acende { 35% { transform: scale(1.7) rotate(-10deg); } }
.car-marca-v:empty, .car-hud.compacta .car-marca-v { display: none; }

/* ===== palco da fase: o papel liso do mundo atrás do campo e o chão desenhado nos 70 px de baixo (onde nada nasce),
   andando a 20 px/s. Chão a 16% de tinta (regra: ≤ 20%), período de 480 px, desenhado à mão ===== */
body.car-palco { background: var(--car-papel, var(--paper)); }
body.car-palco::after {
  content: "";
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(100% + 480px);
  height: 70px;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 480px 70px;
  opacity: .16;
  z-index: -1;
  pointer-events: none;
  animation: car-chao 24s linear infinite;
}
@keyframes car-chao { to { transform: translateX(-480px); } }
/* Rua (São Paulo): prédios, a faixa de pedestre e o bueiro */
body.car-rua::after, .car-mapa[data-mundo="rua"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 58h476'/%3E%3Cpath d='M14 58V22h34v36M22 30h6M36 30h6M22 40h6M36 40h6M22 50h6M36 50h6'/%3E%3Cpath d='M58 58V10h26v48M64 18h4M74 18h4M64 28h4M74 28h4M64 38h4M74 38h4M71 4v6'/%3E%3Cpath d='M92 58V30l14-8 14 8v28M100 40h12'/%3E%3Cpath d='M150 64h8M166 64h8M182 64h8M198 64h8M214 64h8'/%3E%3Cpath d='M244 58V16h40v42M252 24h8M268 24h8M252 36h8M268 36h8M252 48h8M268 48h8'/%3E%3Cpath d='M292 58V36h22v22M298 44h10'/%3E%3Cpath d='M338 63c0-3 8-4 16-4s16 1 16 4-8 4-16 4-16-1-16-4zM346 63h16'/%3E%3Cpath d='M392 58V8h30v50M398 16h6M410 16h6M398 26h6M410 26h6M398 36h6M410 36h6M398 46h6M410 46h6'/%3E%3Cpath d='M430 58V26h36v32M438 34h6M452 34h6M438 44h6M452 44h6'/%3E%3C/svg%3E");
}
/* Banco: colunas e a porta redonda do cofre */
body.car-banco::after, .car-mapa[data-mundo="banco"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 60h476M2 66h476'/%3E%3Cpath d='M20 60V20M36 60V20M14 20h28M16 14h24M14 60h28'/%3E%3Cpath d='M86 60V20M102 60V20M80 20h28M82 14h24M80 60h28'/%3E%3Cpath d='M170 36a18 18 0 1 0 36 0a18 18 0 1 0-36 0zM188 22v28M174 36h28M178 26l20 20M198 26l-20 20'/%3E%3Cpath d='M160 60V12h56v48'/%3E%3Cpath d='M262 60V20M278 60V20M256 20h28M258 14h24M256 60h28'/%3E%3Cpath d='M328 60V20M344 60V20M322 20h28M324 14h24M322 60h28'/%3E%3Cpath d='M392 60V40h60v20M398 40v-6h48v6M404 50h8M430 50h8'/%3E%3C/svg%3E");
}

/* Fliperama: gabinetes de fliperama, alavanca, fichas e estrelinhas */
body.car-fliperama::after, .car-mapa[data-mundo="fliperama"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 62h476'/%3E%3Cpath d='M18 62V14h40v48M18 22h40M24 28h28v16H24zM26 52l5-5M40 50h4M48 50h4'/%3E%3Cpath d='M70 62V20h36v42M70 28h36M76 33h24v14H76zM80 55h16'/%3E%3Cpath d='M136 62v-9M130 53h12M136 45a4 4 0 1 0 0.1 0'/%3E%3Cpath d='M168 58a6 6 0 1 0 12 0a6 6 0 1 0-12 0zM188 60a5 5 0 1 0 10 0a5 5 0 1 0-10 0zM176 46a5 5 0 1 0 10 0a5 5 0 1 0-10 0'/%3E%3Cpath d='M226 12v6M223 15h6M262 30v6M259 33h6'/%3E%3Cpath d='M290 62V10h44v52M290 20h44M297 26h30v18h-30zM300 54l5-5M314 52h4M322 52h4'/%3E%3Cpath d='M360 62V30l20-10 20 10v32M366 40h28'/%3E%3Cpath d='M424 60a6 6 0 1 0 12 0a6 6 0 1 0-12 0zM446 58a5 5 0 1 0 10 0a5 5 0 1 0-10 0'/%3E%3C/svg%3E");
}
/* Casa da Moeda, turno da noite: lua, estrelinhas, engrenagens, rolos de impressão e o ® (a noite fica no chão;
   o papel escurece só 3%, e a falsa continua à vista) */
body.car-moeda::after, .car-mapa[data-mundo="moeda"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='70' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 62h476'/%3E%3Cpath d='M30 8a12 12 0 1 0 12 18a9 9 0 1 1-12-18z'/%3E%3Cpath d='M70 10v6M67 13h6M118 22v6M115 25h6M236 8v6M233 11h6M400 14v6M397 17h6'/%3E%3Cpath d='M68 44a13 13 0 1 0 26 0a13 13 0 1 0-26 0zM76 44a5 5 0 1 0 10 0a5 5 0 1 0-10 0zM81 25v6M81 57v5M62 44h6M94 44h6M68 31l4 4M90 53l4 4M94 31l-4 4M72 53l-4 4'/%3E%3Cpath d='M108 52a8 8 0 1 0 16 0a8 8 0 1 0-16 0zM116 40v4M116 60v2M104 52h4M124 52h4'/%3E%3Cpath d='M150 40h76M150 40a7 7 0 0 0 0 14h76a7 7 0 0 0 0-14M150 58h76M160 58v4M216 58v4'/%3E%3Cpath d='M262 30h40v32h-40zM268 38h28M268 46h20M268 54h24'/%3E%3Cpath d='M336 40a12 12 0 1 0 24 0a12 12 0 1 0-24 0zM344 47V33h5a4 4 0 0 1 0 8h-5M349 41l5 6'/%3E%3Cpath d='M392 50a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM402 36v4M402 60v2M388 50h4M412 50h4M392 40l3 3M409 57l3 3'/%3E%3Cpath d='M436 44h36M436 44a6 6 0 0 0 0 12h36a6 6 0 0 0 0-12'/%3E%3C/svg%3E");
}

/* ===== mapa ===== */
#telaCarreira .tela-topo { margin-bottom: 12px; }
.car-total { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); font-size: 18px; font-weight: 900; }
.car-total small { font-size: 11px; font-weight: 400; color: var(--gray-7); }
.car-abas { display: flex; gap: 8px; width: 100%; max-width: 48rem; margin: 0 0 12px; }
.car-aba {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 14px 10px 16px 12px;
  background: var(--paper);
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.car-aba small { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; letter-spacing: .06em; color: var(--gray-7); }
.car-aba b { white-space: nowrap; }
.car-aba-curto { display: none; }
.car-aba.ativa { background: var(--mundo); transform: rotate(-1deg); }
.car-aba.trancado { border-style: dashed; }
.car-aba:active { transform: scale(.97); }

.car-mapa {
  position: relative;
  width: 100%;
  max-width: 48rem;
  padding: 22px 12px 80px;
  border: 2px solid var(--ink);
  border-radius: 22px 16px 24px 18px;
  background: var(--papel, var(--paper));
  transform: rotate(.4deg);
  overflow: visible;
}
/* chão do mundo no pé do mapa (o mesmo da fase) */
.car-mapa::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 70px;
  background-repeat: repeat-x;
  background-size: 480px 70px;
  background-position: left bottom;
  opacity: .16;
  border-radius: 0 0 20px 16px;
  pointer-events: none;
  animation: car-chao-mapa 24s linear infinite;
}
@keyframes car-chao-mapa { to { background-position: -480px bottom; } }
.car-mapa.trancado .car-trilha { opacity: .55; }

/* trilha: 4 colunas em cobrinha no celular em pé (1→4, desce, 8←5); 8 numa linha na tela larga */
.car-trilha { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 6px; margin: 0; padding: 0; list-style: none; }
.car-trilha li { position: relative; display: flex; justify-content: center; }
.car-trilha li:nth-child(5) { grid-row: 2; grid-column: 4; }
.car-trilha li:nth-child(6) { grid-row: 2; grid-column: 3; }
.car-trilha li:nth-child(7) { grid-row: 2; grid-column: 2; }
.car-trilha li:nth-child(8) { grid-row: 2; grid-column: 1; }
/* o caminho tracejado entre os nós */
.car-trilha li::before { content: ""; position: absolute; top: 29px; left: 50%; width: 100%; border-top: 2.5px dashed var(--ink); opacity: .5; z-index: -1; }
.car-trilha li:nth-child(4)::before { top: 50%; left: 50%; width: 0; height: calc(100% + 34px); border-top: 0; border-left: 2.5px dashed var(--ink); }
.car-trilha li:nth-child(n+5)::before { left: auto; right: 50%; }
.car-trilha li:nth-child(5)::before { display: none; }
.car-trilha li:nth-child(n+6)::before { left: 50%; right: auto; }

.car-no {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 2.6px solid var(--ink);
  border-radius: 50% 46% 52% 48%;
  background: var(--paper);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.car-no b .xtra { font-size: 30px; font-weight: 400; line-height: 1; }
.car-no.feita { background: var(--mundo); }
.car-no.trancada { border-style: dashed; color: var(--gray-5); cursor: default; }
.car-no.atual { border-color: var(--red); color: var(--red); animation: car-pulsa 1.1s var(--ease) infinite; }
.car-no.escolhida { transform: scale(1.1) rotate(-3deg); }
.car-no:active { transform: scale(.94); }
.chefe .car-no { width: 66px; height: 66px; margin-top: -4px; border-width: 3.2px; }
.car-est { position: absolute; top: calc(100% + 3px); left: 50%; display: flex; gap: 1px; transform: translateX(-50%); font-size: 14px; }
.car-no.trancada .car-est { visibility: hidden; }
@keyframes car-pulsa { 50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(220, 38, 38, .15); } }

.car-portao { position: relative; z-index: 1; margin: 30px 0 0; font-size: 14px; letter-spacing: .04em; line-height: 1.6; }
.car-portao small { color: var(--gray-7); }

/* balão da fase, apontando pro nó */
.car-balao {
  position: absolute;
  z-index: 4;
  width: min(290px, calc(100% - 8px));
  padding: 12px 14px 14px;
  border: 2px solid var(--ink);
  border-radius: 18px 14px 20px 16px;
  background: var(--paper);
  box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .6);
  text-align: center;
  animation: pop .25s var(--ease);
}
.car-balao[hidden] { display: none; }
.car-balao::after {
  content: "";
  position: absolute;
  left: var(--seta, 50%);
  bottom: -9px;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
}
.car-balao.embaixo::after { top: -9px; bottom: auto; transform: translateX(-50%) rotate(-135deg); }
/* celular em pé: o balão entra no fluxo, embaixo da trilha em cobrinha */
.car-balao.fluxo { position: relative; z-index: 2; left: auto; top: auto; width: auto; margin: 30px 2px 0; }
.car-balao p { margin: 0 0 6px; }
.car-fechar { position: absolute; top: 2px; right: 4px; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; }
.car-balao-nome { font-size: 18px; font-weight: 900; }
.car-balao-nome b { color: var(--red); }
.car-balao-obj { font-size: 15px; }
.car-balao-obj small { display: block; margin-top: 2px; font-size: 12px; color: var(--red); letter-spacing: .04em; }
.car-balao-obj .car-balao-ritmo { color: var(--gray-7); }
.car-balao-est { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 22px; }
.car-est-linha { display: inline-flex; gap: 2px; }
.car-balao-est small { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; letter-spacing: .03em; color: var(--gray-7); }
.car-balao-melhor { font-size: 12px; letter-spacing: .06em; color: var(--gray-7); }
.car-balao-tranca { font-size: 13px; color: var(--gray-7); }
.car-balao .btn { width: 100%; margin-top: 4px; }
.car-dica { margin: 0; font-size: 13px; line-height: 1.4; color: var(--red); }
/* fim da fase, depois de 2 falhas: o upgrade da loja que mais ajuda nela (toque = loja, aba dos upgrades) */
.car-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 14px;
  border: 1.5px dashed var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.car-upgrade:active { transform: scale(.97); }
.car-upgrade.pode { border-style: solid; }
.car-up-linha { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.car-upgrade b { color: var(--red); }
.car-upgrade small { font-size: 11px; letter-spacing: .04em; color: var(--gray-7); }
.car-upgrade .loja-moeda { width: 18px; height: 18px; font-size: 11px; }

/* ===== fim da fase ===== */
#telaCarreiraFim > .caixa { margin-top: auto; margin-bottom: auto; }
.car-fim { gap: 8px; }
.car-fim-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.car-fim p { margin: 0; }
.car-fim-fase { font-size: 16px; letter-spacing: .06em; }
.car-fim-fase b { color: var(--red); }
.car-fim-estrelas { display: flex; gap: 6px; font-size: 48px; }
.car-fim-estrelas .car-estrela { stroke-width: 1.5; animation: car-estrela .45s var(--ease) calc(.25s + var(--i, 0) * .28s) both; }
.car-fim-estrelas .car-estrela:not(.cheia) { animation: none; opacity: .9; }
@keyframes car-estrela { from { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.3) rotate(8deg); opacity: 1; } }
.car-fim-titulo { font-size: 14px; letter-spacing: .25em; color: var(--gray-7); text-transform: uppercase; }
.car-fim-lucro { font-size: 52px; font-weight: 900; line-height: 1; }
.car-fim-conta, .car-fim-obj { font-size: 12px; letter-spacing: .06em; line-height: 1.5; }
.car-fim-conta { color: var(--gray-7); }
.car-fim-falta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--red); letter-spacing: .06em; }
.car-mini { display: inline-flex; gap: 1px; font-size: 13px; }
.car-fim-novo { padding: 3px 10px; border-radius: 999px; background: var(--red); color: var(--paper); font-size: 12px; letter-spacing: .08em; animation: pop .35s var(--ease); }
.car-fim [hidden] { display: none; }
.car-fim .end-actions { display: flex; gap: 8px; width: 100%; justify-content: center; }
.car-fim .end-actions .btn { flex: 1; }
.car-fim .btn small { font-size: 12px; opacity: .8; }
#telaCarreiraFim .btn { transition: transform .15s, opacity .25s; }
#telaCarreiraFim.travada .btn { pointer-events: none; opacity: .5; }

/* ===== 4 mundos nas abas: tela estreita (celular em pé) em 2 × 2, com nome e estrelas lado a lado ===== */
@media (max-width: 699px) {
  .car-abas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .car-aba { min-width: 0; min-height: 44px; padding: 4px 6px; font-size: 13px; }
}
@media (max-width: 359px) {
  .car-aba-nome { display: none; }
  .car-aba-curto { display: inline; }
}

/* ===== tela larga: a trilha numa linha só ===== */
@media (min-width: 700px) {
  .car-trilha { grid-template-columns: repeat(8, 1fr); }
  .car-trilha li:nth-child(n) { grid-row: 1; grid-column: auto; }
  .car-trilha li::before, .car-trilha li:nth-child(4)::before, .car-trilha li:nth-child(n+5)::before, .car-trilha li:nth-child(n+6)::before {
    display: block; top: 29px; left: 50%; right: auto; width: 100%; height: 0; border-top: 2.5px dashed var(--ink); border-left: 0;
  }
  .car-trilha li:nth-child(8)::before { display: none; }
}

/* ===== celular deitado (844×390): tudo mais baixinho; o fim em 2 colunas, sem rolar ===== */
@media (max-height: 480px) {
  #telaCarreira .tela-topo { margin: 0 0 6px; }
  #telaCarreira .tela-topo h2 { font-size: 22px; }
  .car-total { font-size: 15px; }
  .car-abas { margin-bottom: 8px; }
  .car-aba { min-height: 40px; padding: 3px 8px; flex-direction: row; justify-content: center; gap: 10px; }
  .car-mapa { padding: 150px 10px 40px; }
  .car-mapa::after { height: 36px; background-size: 247px 36px; }
  .car-balao { padding: 8px 12px 10px; }
  .car-balao p { margin-bottom: 3px; }
  .car-balao-nome { font-size: 16px; }
  .car-balao-obj { font-size: 13px; }
  .car-balao-est { flex-direction: row; gap: 8px; font-size: 18px; }
  .car-balao .btn.grande { min-height: 40px; font-size: 16px; }
  .car-fim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0 18px;
    max-width: 48rem;
    padding: 12px 16px;
  }
  .car-fim-col { gap: 5px; }
  .car-fim-estrelas { font-size: 38px; }
  .car-fim-lucro { font-size: 40px; }
  .car-hud { margin-top: 2px; font-size: 11px; }
  .car-upgrade { min-height: 38px; padding: 2px 12px; font-size: 12px; }
}
/* celular em pé e estreito: a pílula do placar um pouco mais justa (objetivo, marcas e 2 limites na mesma linha) */
@media (max-width: 400px) {
  .car-hud { padding: 1px 8px; font-size: 11px; letter-spacing: .02em; }
}

/* ===== css/ajustes.css ===== */
/* css/ajustes.css — trilha P (Onda 4) + Temporada 3. Tela de ajustes (som, ritmo, jogo, backup), a tela de calibrar o
   atraso e a engrenagem do menu (js/ajustes.js; o esqueleto da tela e a engrenagem estão no index.html).
   No ar, o build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gray-*). */

/* ===== engrenagem: canto direito da barra do alto do menu (a carteira fica no esquerdo). Fica também na 1ª visita:
   o som (o botão de 3 estados) mora nos ajustes ===== */
.aj-botao {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform .35s var(--ease), background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.aj-botao svg { width: 24px; height: 24px; }
.aj-botao:active { transform: rotate(60deg) scale(.92); }
@media (hover: hover) {
  .aj-botao:hover { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
}

/* ===== tela: som, ritmo, jogo e backup (2 colunas a partir de 700 px: som | ritmo, jogo | backup) ===== */
#telaAjustes .tela-topo { max-width: 52rem; }
.aj-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 52rem;
  margin-bottom: 18px;
}
@media (min-width: 700px) {
  .aj-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
.aj-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  text-align: left;
  animation: aj-entra .35s var(--ease) both;
}
.aj-bloco + .aj-bloco { animation-delay: .06s; }
.aj-bloco h3 { margin: 0 0 2px; font-size: 20px; font-weight: 900; letter-spacing: .04em; }
/* cabeçalho do bloco "som": o título e o botão de 3 estados (tudo → só efeitos → mudo), a troca rápida */
.aj-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aj-cab h3 { margin: 0; }
.aj-mute {
  min-height: 44px;
  padding: 4px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aj-mute:active { transform: scale(.96); }
@media (hover: hover) {
  .aj-mute:hover, .aj-link:hover { background: var(--ink); color: var(--paper); }
}
@keyframes aj-entra { from { opacity: 0; transform: translateY(12px) rotate(-.6deg); } }

/* uma linha: chave (liga/desliga) · volume · porcentagem; a linha inteira tem 44 px de toque */
.aj-linha { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.aj-chave {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 124px;
  min-height: 44px;
  font-size: 16px;
  cursor: pointer;
}
.aj-chave input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: background .2s;
}
.aj-chave input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .25s var(--ease), background .2s;
}
.aj-chave input:checked { background: var(--red); }
.aj-chave input:checked::after { transform: translateX(20px); background: var(--paper); }
.aj-chave input:disabled { opacity: .35; cursor: default; }
.aj-chave input:disabled + span { opacity: .45; }
.aj-chave input:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
/* chave com nome comprido ("som do acerto"): a largura do nome, não a da coluna */
.aj-chave.larga { width: auto; }
/* nome de linha sem chave (velocidade, atraso, jogar como app), alinhado com os das chaves */
.aj-rot { flex: none; width: 124px; font-size: 16px; }
.aj-instalar .aj-rot { width: auto; white-space: nowrap; }
.aj-instalar .aj-nota { flex: 1; min-width: 0; text-align: right; }
.aj-instalar .btn { margin-left: auto; }
.aj-instalar .aj-rot .xtra { font-size: 20px; color: var(--red); }

/* volume: trilho de caneta com a parte cheia em tinta (--p, que o js/ajustes.js acerta) */
.aj-vol {
  --p: 100%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.aj-vol::-webkit-slider-runnable-track {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) var(--p), var(--paper) var(--p));
}
.aj-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .15s;
}
.aj-vol:active::-webkit-slider-thumb { transform: scale(1.15); }
.aj-vol::-moz-range-track { height: 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.aj-vol::-moz-range-progress { height: 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); }
.aj-vol::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.aj-vol:disabled { opacity: .3; cursor: default; }
.aj-vol:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.aj-pct { flex: none; width: 44px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.aj-pct.off { opacity: .35; }
.aj-nota { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gray-7); }
.aj-nota.ok, .aj-protege .ok { color: var(--ink); }

/* ===== ritmo: o atraso anda de 5 em 5 ms nos botões − e + (segurar repete) ===== */
.aj-passos { display: flex; align-items: center; gap: 6px; }
.aj-passo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.aj-passo:active { background: var(--ink); color: var(--paper); }
.aj-passo:disabled { opacity: .3; cursor: default; }
.aj-atraso { min-width: 64px; font-size: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.aj-calibra { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.aj-calibra .btn { flex: none; }

/* ===== jogo: jogar como app, a linha "suas músicas" do dono e os créditos ===== */
.aj-jogo .dica-ios { margin: -4px 0 2px; }
.aj-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 12px;
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aj-link::after { content: "›"; margin-left: auto; font-size: 20px; line-height: 1; }
.aj-link .xtra { font-size: 20px; line-height: 1; color: var(--red); }
.aj-link:active { transform: scale(.98); }
#ajustes-jogo:not(:empty) { display: flex; flex-direction: column; gap: 8px; }

/* ===== backup ===== */
.aj-txt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gray-7); }
.aj-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-acoes .btn { flex: 1 1 auto; white-space: nowrap; }
.aj-painel { display: flex; flex-direction: column; gap: 8px; animation: aj-entra .3s var(--ease) both; }
.aj-codigo {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fbf5dd;
  color: var(--ink);
  font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
  resize: none;
  -webkit-user-select: text;
  user-select: text;
}
.aj-codigo:focus { outline: 2px dashed var(--ink); outline-offset: 2px; }
.aj-codigo::placeholder { color: var(--gray-5); font-family: 'MoreSugar', sans-serif; font-size: 13px; }
.aj-confere { font-size: 13px; line-height: 1.4; }
.aj-confere:empty { display: none; }
.aj-confere.erro { color: var(--red); }
.aj-compara { width: 100%; border-collapse: collapse; font-size: 13px; }
.aj-compara th, .aj-compara td { padding: 2px 6px; text-align: left; font-variant-numeric: tabular-nums; }
.aj-compara thead th { font-size: 12px; font-weight: 400; color: var(--gray-7); border-bottom: 1.5px dashed var(--ink); }
.aj-compara tbody th { font-weight: 400; color: var(--gray-7); }
.aj-compara td:last-child { font-weight: 700; }
.aj-aviso { margin: 6px 0 0; font-size: 12px; color: var(--red); }
.aj-rodape { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1.5px dashed var(--ink); }
.aj-protege { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; color: var(--gray-7); }
.aj-protege > span { flex: 1; min-width: 0; }
.aj-protege .btn { flex: none; }

/* ===== calibrar o atraso: a roda (como uma mira) com o anel que fecha na batida, os 12 pontinhos dos toques que
   valeram e o resultado. Deitado: a roda à esquerda, o resto à direita ===== */
#telaCalibrar > .tela-topo { margin-top: 0; max-width: 40rem; }
.cal-caixa { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 26rem; margin: auto 0; }
.cal-roda {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: background .06s;
}
.cal-roda::before { content: ""; position: absolute; inset: 24px; border: 2px dashed var(--ink); border-radius: 50%; opacity: .3; }
.cal-anel { position: absolute; inset: -3px; border: 2.5px solid var(--red); border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform; }
.cal-num { position: relative; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-roda.bate { background: var(--ink); }
.cal-roda.bate .cal-num { color: var(--paper); }
.cal-roda.toca { animation: calToca .16s var(--ease); }
@keyframes calToca { 50% { transform: scale(.92); } }
.cal-lado { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cal-txt { margin: 0; font-size: 16px; line-height: 1.45; text-align: center; }
.cal-pontos { display: flex; gap: 6px; }
.cal-pontos i { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background .1s; }
.cal-pontos i.on { background: var(--ink); }
.cal-res { margin: 0; min-height: 1.4em; font-size: 13px; line-height: 1.4; color: var(--gray-7); text-align: center; }
.cal-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.cal-acoes .btn { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) {
  .cal-roda.toca { animation: none; }
}

/* ===== celular em pé estreito (360): os nomes das linhas mais curtos, pro atraso caber com os dois botões ===== */
@media (max-width: 380px) {
  .aj-chave:not(.larga), .aj-rot { width: 104px; }
  .aj-instalar .aj-rot { width: auto; }
  .aj-calibra { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* ===== celular deitado (844×390): colunas lado a lado, blocos mais baixos (a tela rola: são 4 blocos) ===== */
@media (max-height: 480px) {
  .cal-caixa { flex-direction: row; justify-content: center; gap: 28px; max-width: 44rem; }
  .cal-roda { width: 140px; height: 140px; }
  .cal-lado { flex: 1; min-width: 0; gap: 8px; }
  .cal-txt { font-size: 14px; }
  #telaAjustes .tela-topo { margin: 0 0 8px; }
  #telaAjustes .tela-topo h2 { font-size: 24px; }
  .aj-cols { gap: 10px; margin-bottom: 4px; }
  .aj-bloco { gap: 4px; padding: 10px 14px 12px; }
  .aj-bloco h3 { font-size: 17px; }
  .aj-codigo { min-height: 56px; }
  #ajPainelColar.conferido .aj-codigo { min-height: 0; height: 36px; }
  .aj-compara th, .aj-compara td { padding: 1px 6px; }
  .aj-aviso { margin-top: 3px; }
  .aj-rodape { gap: 2px; padding-top: 4px; }
}

/* ===== css/conta.css ===== */
/* css/conta.css — login (js/conta.js): a tela da conta, a entrada nos ajustes, o convite "garanta seu nome: entrar" do
   ranking (js/nucleo/ranking.js) e o link da privacidade nos créditos. No ar, o build.js junta no fim do style.css;
   usa as cores de lá (--ink, --paper, --red, --gold, --gray-*). */

/* ===== entrada nos ajustes: pílula no canto direito do topo ("entrar", o nome ou "escolher") ===== */
.aj-conta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 30%;
  min-height: 40px;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.aj-conta.dentro { background: var(--ink); color: var(--paper); }
.aj-conta.alerta { border-color: var(--red); background: var(--red); color: var(--paper); }
.aj-conta:active { transform: translateY(-50%) scale(.95); }
@media (hover: hover) {
  .aj-conta:hover { background: var(--ink); color: var(--paper); }
}
@media (max-height: 480px) {
  .aj-conta { min-height: 36px; padding: 4px 12px; }
}

/* ===== tela da conta ===== */
#telaConta .tela-topo { max-width: 52rem; }
.ct-corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 30rem;
  margin-bottom: 18px;
}
.ct-bloco {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  animation: ct-entra .35s var(--ease) both;
}
@keyframes ct-entra { from { opacity: 0; transform: translateY(12px) rotate(-.6deg); } }
.ct-col { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
.ct-bloco h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.ct-txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gray-7); }
.ct-nota { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gray-7); overflow-wrap: anywhere; }
.ct-nota:empty { display: none; }
.ct-nota.erro, .ct-aviso { color: var(--red); }
.ct-nota.ok { color: var(--ink); }

/* botão do Google (o próprio Google desenha dentro, num quadro; aqui só o lugar dele) */
.ct-google { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.ct-google:empty { display: none; }
.ct-carregando { font-size: 13px; color: var(--gray-7); animation: pulse 1.8s infinite; }

/* campos (e-mail, nome): 16 px pra o iPhone não dar zoom ao tocar */
.ct-form { display: flex; gap: 8px; }
.ct-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: .04em;
  -webkit-user-select: text;
  user-select: text;
}
.ct-form input::placeholder { color: var(--gray-5); }
.ct-form input:focus { outline: 2px dashed var(--ink); outline-offset: 2px; }
.ct-form .btn { flex: none; min-height: 44px; }
.ct-email .btn.ghost { align-self: stretch; }
/* link por e-mail fora do ar: "entrar por e-mail: em breve", tracejado e apagado (o Google continua) */
.ct-email .btn.ghost.ct-embreve:disabled { border-style: dashed; color: var(--gray-7); opacity: .8; }
.ct-link-teste { font-weight: 700; color: var(--ink); }

/* quem entrou */
.ct-quem { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ct-nome-linha { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 8px; max-width: 100%; }
.ct-nome { font-size: 26px; font-weight: 900; letter-spacing: .06em; line-height: 1.2; overflow-wrap: anywhere; }
.ct-nome.vazio { font-size: 18px; font-weight: 400; color: var(--gray-7); }
.ct-quem small { font-size: 12px; letter-spacing: .06em; color: var(--gray-7); }
/* link de texto com 44 px de toque, sem a linha ficar mais alta */
.ct-link {
  margin: -12px 0;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-sinc { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin: 0; font-size: 13px; letter-spacing: .04em; }
.ct-sinc > span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 1px;
}
.ct-sinc.vai > span::before { background: var(--gold); box-shadow: 0 0 0 1.5px var(--ink); animation: pulse 1s infinite; }
.ct-sinc.erro { color: var(--red); }
.ct-sinc.erro > span::before { background: var(--red); }
.ct-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-acoes .btn { flex: 1 1 auto; white-space: nowrap; }
.ct-acoes-col { flex-direction: column; }
.btn.ghost.ct-perigo { border-color: var(--red); color: var(--red); }
.btn.ct-perigo-cheio { border-color: var(--red); background: var(--red); color: var(--paper); }
@media (hover: hover) {
  .btn.ghost.ct-perigo:hover { background: var(--red); color: var(--paper); }
}
.ct-confirma {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 2px dashed var(--red);
  border-radius: 12px;
  animation: ct-entra .25s var(--ease) both;
}
.ct-confirma p { margin: 0; font-size: 13px; line-height: 1.4; }
/* contato pra ver, corrigir ou apagar os dados (logo embaixo do "apagar conta") */
.ct-contato { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gray-7); text-align: center; overflow-wrap: anywhere; }
/* toque de 44 px no e-mail sem a linha ficar mais alta */
.ct-contato a { display: inline-block; margin: -10px 0; padding: 10px 2px; color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* qual progresso fica: a mesma comparação da troca pelo código de backup */
.ct-compara { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-compara th, .ct-compara td { padding: 3px 6px; text-align: left; font-variant-numeric: tabular-nums; }
.ct-compara thead th { font-size: 12px; font-weight: 400; color: var(--gray-7); border-bottom: 1.5px dashed var(--ink); }
.ct-compara tbody th { font-weight: 400; color: var(--gray-7); }
.ct-compara td { font-weight: 700; }

/* privacidade: link de texto com toque de 44 px */
.ct-priv { margin: 0; font-size: 12px; letter-spacing: .06em; }
.ct-priv a { display: inline-block; margin: -12px 0; padding: 12px 6px; color: var(--gray-7); text-underline-offset: 3px; }

/* ===== celular deitado (844×390): duas colunas lado a lado, sem rolar ===== */
@media (max-height: 480px) {
  #telaConta .tela-topo { margin: 0 0 8px; }
  #telaConta .tela-topo h2 { font-size: 24px; }
  .ct-corpo { max-width: 52rem; gap: 6px; margin-bottom: 4px; }
  .ct-bloco { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0 18px; padding: 10px 14px; }
  .ct-col { gap: 6px; }
  .ct-bloco h3 { font-size: 17px; }
  .ct-txt { font-size: 13px; line-height: 1.35; }
  .ct-nome { font-size: 22px; }
  .ct-compara th, .ct-compara td { padding: 1px 6px; }
  .ct-form input, .ct-form .btn { height: 40px; min-height: 40px; }
}

/* ===== convite do ranking: "garanta seu nome: entrar" e "esse nome tem dono. É seu? entrar" (fim da missão) ===== */
.conta-entrar {
  margin: -14px 0;
  padding: 14px 4px;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.regmsg .conta-entrar { text-transform: none; }

/* ===== créditos: o link da privacidade ===== */
.cred-priv { font-size: 12px; line-height: 1.2; }
.cred-priv a { display: inline-block; margin: -10px 0; padding: 10px 6px; }

/* ===== css/ritmo.css ===== */
/* css/ritmo.css — Temporada 3 (ritmo): o placar e a tela de fim da missão de batida. Contrato em T3/DESIGN.md.
   O js/nucleo/ritmo.js põe as peças no HTML (a barrinha da música, o degrau do xN, o carimbo da nota e os julgamentos
   do fim) e as classes: .em-batida no #hud e no body (missão de batida), .febre no #hud e no #hSelo (FEBRE ligada),
   .batida e .quebrou no #telaFim. Fora do modo de batida nada daqui aparece: o placar e o fim do motor arcade
   (carreira) ficam como sempre. */

/* ===== placar ===== */
/* peças injetadas: só aparecem na missão de batida */
.bt-prog, .bt-degrau { display: none; }
.hud.em-batida .bt-prog, .hud.em-batida .bt-degrau { display: block; }
/* tempo que falta da música (m:ss) com a barrinha do quanto já tocou logo abaixo */
.hud.em-batida .hud-tempo b { min-width: 74px; font-size: 26px; font-variant-numeric: tabular-nums; }
.bt-prog { width: 100%; height: 5px; margin-top: 3px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); overflow: hidden; }
.bt-prog i, .bt-degrau i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
/* xN com o progresso até o próximo degrau (10 acertos por degrau) no lugar das 5 bolinhas do arcade */
.hud.em-batida .selo .bolinhas { display: none; }
.bt-degrau { width: 36px; height: 6px; border: 1.2px solid var(--ink); border-radius: 3px; background: var(--paper); overflow: hidden; }
.selo.quente .bt-degrau { border-color: var(--red); }
.selo.quente .bt-degrau i { background: var(--red); }
/* FEBRE: o selo vira neon parado, com o aro ciano (o multiplicador mostra o dobro), e dá um pulo só quando liga. Piscar
   8 vezes por segundo cansava a vista e puxava o olho pra longe das notas; quem pulsa na batida é o campo */
.selo.febre b { background: #ff2bd6; color: var(--paper); box-shadow: 0 0 0 2px #22d3ee, 0 0 10px rgba(255, 43, 214, .6); animation: bt-febre .35s var(--ease); }
.selo.febre .bt-degrau { border-color: #ff2bd6; }
.selo.febre .bt-degrau i { background: #22d3ee; }
.hud.febre .hud-tempo b { border-color: #ff2bd6; }
@keyframes bt-febre { from { transform: scale(1.6); } }
/* ao vivo a pausa não existe (js/nucleo/ritmo.js, marcarPausa): o botão some, mas guarda o lugar dele (o layout() do
   motor e o canto do celular deitado contam com esse canto ocupado; nada anda no HUD) */
.hud.sem-pausa .pausa { visibility: hidden; }
/* nas pistas o mouse só aperta a pista: sem a mira de atirador. Na vista "tiro na batida" (TIRO/DESIGN.md; o
   js/nucleo/ritmo-desenho.js põe .vista-tiro no body) o mouse MIRA: volta o cursor de atirador de sempre (style.css),
   com a mira que o jogador equipou na loja (css/loja.css). Desde o TIRO LIMPO (TIRO/DESIGN.md 10) a mira é só esse
   cursor: o desenho não põe mais nada em volta dele */
body.jogando.em-batida:not(.vista-tiro) #game { cursor: default; }

/* celular deitado (o mesmo corte do layout() do js/nucleo/ritmo.js: largura ≥ altura e altura < 560): o tempo e o xN
   saem de cima das pistas e vão pro canto direito, ao lado da pausa (o xN embaixo do tempo; em linha não cabe em
   640 × 360 sem pisar na pista da →), e as pistas sobem até perto do alto da tela. A meta do duelo desce pra baixo
   do lucro (no meio, ela ficaria em cima das notas). O layout() conta com o canto até ~108 px do alto (topoDir) */
@media (min-aspect-ratio: 1/1) and (max-height: 559.98px) {
  .hud.em-batida { grid-template-columns: minmax(0, 1fr) auto auto; }
  .hud.em-batida .hud-tempo b { min-width: 64px; padding: 1px 9px; font-size: 22px; }
  .hud.em-batida .selo { top: calc(100% + 5px); left: 0; right: 0; }
  .hud.em-batida .tomada-hud { grid-column: 1; justify-self: start; }
}

/* ===== tela de fim: os resultados do FNF no papel ===== */
.fb-nota, .fb-dados { display: none; }
#telaFim.batida .fb-nota, #telaFim.batida .fb-dados { display: flex; }
/* os números do arcade (alvos, precisão, maior série) dão lugar aos julgamentos */
#telaFim.batida .results { display: none; }

/* cabeçalho: o carimbo da nota à esquerda; o placar contando, o título e o NOVO RECORDE à direita; o resto da coluna
   (julgamentos, recorde, próximo objetivo, desafio) desce na largura toda */
#telaFim.batida .fim-col:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
}
#telaFim.batida .fim-col:first-child > * { grid-column: 1 / -1; }
#telaFim.batida .fim-col:first-child > .fb-nota { grid-column: 1; grid-row: 1 / span 3; }
#telaFim.batida .fim-col:first-child > #rCash,
#telaFim.batida .fim-col:first-child > #fimTitulo,
#telaFim.batida .fim-col:first-child > #newRec { grid-column: 2; justify-self: start; text-align: left; }
#telaFim.batida #rCash { font-size: 46px; font-variant-numeric: tabular-nums; }
#telaFim.batida #fimTitulo { margin-top: 0; font-size: 12px; letter-spacing: .2em; }
#telaFim.batida #newRec { font-size: 12px; animation: pop .35s var(--ease) .9s both, fb-pisca .5s steps(2) 1.25s 4; }
@keyframes fb-pisca { 50% { background: var(--ink); } }

/* o carimbo da nota: bate grande e torto depois que as barrinhas enchem */
.fb-nota { flex-direction: column; align-items: center; gap: 6px; }
.fb-nota b {
  display: grid;
  place-items: center;
  min-width: 96px;
  height: 96px;
  padding: 0 14px 4px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-6deg);
  animation: fb-carimbo .42s cubic-bezier(.25, 1.7, .45, 1) .95s both;
}
@keyframes fb-carimbo { from { transform: scale(3.2) rotate(-26deg); opacity: 0; } 55% { opacity: 1; } }
.fb-nota[data-nota="S+"] b { border-color: var(--red); background: var(--gold); color: var(--red); }
.fb-nota[data-nota="S"] b { border-color: var(--red); color: var(--red); }
.fb-nota[data-nota="C"] b, .fb-nota[data-nota="D"] b { color: var(--gray-7); }
.fb-fc {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: pop .35s var(--ease) 1.3s both;
}
.fb-fc[hidden] { display: none; }

/* NA MOSCA / ÓTIMO / BOM / ERROU: nome, barrinha (fração das notas da música) e o número subindo */
.fb-dados { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 22rem; justify-self: center; margin-top: 4px; }
.fb-julg { display: flex; flex-direction: column; gap: 5px; }
.fb-julg span { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 2.6em; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .1em; color: var(--gray-7); }
.fb-julg em { font-style: normal; text-align: left; text-transform: uppercase; white-space: nowrap; }
.fb-julg i { display: block; height: 11px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); overflow: hidden; }
.fb-julg i::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--c, var(--ink));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  animation: fb-barra .65s var(--ease) calc(.25s + var(--n, 0) * .12s) both;
}
@keyframes fb-barra { from { transform: scaleX(0); } }
.fb-julg b { font-size: 20px; font-weight: 900; line-height: 1; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.fb-julg .j-mosca { --c: var(--red); color: var(--red); }
.fb-julg .j-mosca b { color: var(--red); }
.fb-julg .j-bom { --c: var(--gray-7); }
.fb-julg .j-errou { --c: var(--gray-5); }
.fb-julg .j-errou b { color: var(--gray-5); }
.fb-linha, .fb-faixa { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.fb-linha b { font-size: 15px; }
.fb-faixa { margin-top: -2px; color: var(--gray-7); }
/* "essa ficou fora do ranking" (sem internet, carta velha, carta trocada): em vermelho, pra ninguém achar que valeu */
.fb-faixa.fb-aviso { margin-top: 4px; color: var(--red, #dc2626); letter-spacing: .06em; font-weight: 700; }

/* o resto do fim (o que os outros módulos põem) fica compacto embaixo; o DE NOVO é o que importa */
#telaFim.batida .caixa.fim { gap: 10px; }
#telaFim.batida .fim-col:last-child { gap: 6px; }
#telaFim.batida #fimRecorde, #telaFim.batida #fim-objetivo { font-size: 11px; line-height: 1.35; }
#telaFim.batida .dia-end { font-size: 11px; }
#telaFim.batida .fim-figs { font-size: 12px; }
#telaFim.batida .cartao-premio { gap: 8px; padding: 6px 8px; border-radius: 14px; }
#telaFim.batida .cartao-premio img { width: 36px; height: 36px; }
#telaFim.batida .cp-txt b { font-size: 13px; }
#telaFim.batida .cp-botoes .btn.peq { min-height: 40px; padding: 5px 10px; }
#telaFim.batida .loja-fim-linha { min-height: 36px; font-size: 13px; }
#telaFim.batida .loja-mais { font-size: 15px; }
#telaFim.batida .loja-fim-sub { margin-top: -4px; font-size: 11px; }
#telaFim.batida .reg input { padding: 8px 12px; }
#telaFim.batida .reg .btn { min-height: 44px; padding: 8px 14px; }
#telaFim.batida .regmsg:empty { min-height: 0; }
#telaFim.batida #btnAgain {
  min-width: min(100%, 17rem);
  min-height: 62px;
  border-color: var(--ink);
  background: var(--red);
  font-size: 26px;
  animation: fb-denovo 1.4s ease-in-out 1.6s infinite;
}
@keyframes fb-denovo { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.07) rotate(-1.5deg); } 90% { transform: scale(.98); } }
#telaFim.batida.travada #btnAgain { animation: none; }

/* QUEBROU!: o carimbo vermelho, sem registrar nem postar; o "de novo" pulsando */
#telaFim.quebrou .fb-nota b { min-width: 0; height: auto; padding: 8px 14px 10px; font-size: 38px; border-color: var(--red); color: var(--paper); background: var(--red); }
#telaFim.quebrou .fb-fc { background: none; color: var(--red); }
#telaFim.quebrou #btnStory, #telaFim.quebrou #btnShare { display: none; }
#telaFim.quebrou #btnAgain { animation: pulse .6s infinite; }

/* celular em pé (até 390×844, com tudo o que pode entrar no fim da 1ª música: figurinhas, prêmio, carteira, registrar):
   menos respiro, o próximo objetivo numa linha só e as figurinhas com o texto embaixo */
@media (max-width: 640px) and (max-height: 860px) {
  #telaFim.batida .caixa.fim { gap: 6px; }
  #telaFim.batida .fim-col:first-child { row-gap: 2px; }
  #telaFim.batida .fim-col:last-child { gap: 4px; }
  .fb-julg { gap: 3px; }
  .fb-julg i { height: 9px; }
  .fb-julg b { font-size: 17px; }
  #telaFim.batida #fim-objetivo { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #telaFim.batida .fim-figs { flex-wrap: wrap; justify-content: center; row-gap: 0; }
  #telaFim.batida .fim-figs b { white-space: nowrap; }
  #telaFim.batida #btnAgain { min-height: 54px; font-size: 23px; }
  #telaFim.batida .end-actions .btn.peq { min-height: 40px; }
}
/* celular estreito (360): o carimbo e o placar um pouco menores */
@media (max-width: 380px) {
  .fb-nota b { min-width: 76px; height: 76px; font-size: 54px; }
  #telaFim.batida #rCash { font-size: 36px; }
  #telaFim.quebrou .fb-nota b { font-size: 30px; }
}
/* celular deitado: o fim já vem em 2 colunas (style.css); tudo mais baixinho pra caber sem rolar */
@media (max-height: 480px) {
  .fb-nota b { min-width: 70px; height: 70px; padding: 0 10px 3px; border-width: 3px; font-size: 50px; }
  #telaFim.quebrou .fb-nota b { font-size: 26px; padding: 6px 10px 8px; }
  #telaFim.batida #rCash { font-size: 36px; }
  .fb-dados { gap: 3px; margin-top: 0; }
  .fb-julg { gap: 2px; }
  .fb-julg span { font-size: 10px; }
  .fb-julg i { height: 9px; }
  .fb-julg b { font-size: 16px; }
  #telaFim.batida #btnAgain { min-height: 48px; font-size: 20px; }
}
/* computador: 2 colunas (os resultados | o resto e o DE NOVO) */
@media (min-width: 900px) and (min-height: 600px) {
  #telaFim.batida .caixa.fim { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 0 32px; max-width: 54rem; padding: 26px 28px; }
  .fb-nota b { min-width: 118px; height: 118px; font-size: 88px; }
  #telaFim.batida #rCash { font-size: 56px; }
  .fb-julg b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-nota b, .fb-fc, .fb-julg i::after, #telaFim.batida #newRec, #telaFim.batida #btnAgain, .selo.febre b { animation: none; }
}

/* ---------- FEBRE/DESIGN.md 2.3: o fim do DUELO (VOCÊ VENCEU / PERDEU pra NOME, a diferença, REVANCHE) ----------
   No alto da coluna das ações; o REVANCHE toma o lugar do DE NOVO (que some no duelo: jogar de novo sem o oponente
   seria outra coisa). Compacto: a tela de fim não pode rolar no celular */
.fb-duelo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin: 0 0 6px; text-align: center; }
.fb-duelo[hidden] { display: none; }
.fb-duelo .fd-titulo {
  display: inline-block; padding: 2px 14px 4px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper, #fff);
  font-size: 22px; line-height: 1.1; letter-spacing: .02em; transform: rotate(-2deg); animation: pop .35s var(--ease) both;
}
.fb-duelo[data-fim="venceu"] .fd-titulo { background: var(--gold); color: var(--red); border-color: var(--red); }
.fb-duelo[data-fim="perdeu"] .fd-titulo { color: var(--gray-7); }
.fb-duelo[data-fim="espera"] .fd-titulo { font-size: 16px; border-style: dashed; animation: fb-pisca 1s steps(2) infinite; }
.fb-duelo .fd-dif { font-size: 12px; letter-spacing: .08em; color: var(--gray-7); font-variant-numeric: tabular-nums; }
.fb-duelo .fd-dif:empty { display: none; }
/* REVANCHE (grande, no lugar do DE NOVO) e DESAFIAR OUTRO (pequeno) na mesma linha */
.fb-duelo .fd-botoes { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: nowrap; width: 100%; }
.fb-duelo .fd-revanche { flex: 1 1 auto; max-width: 15rem; }
.fb-duelo .fd-outro { flex: 0 1 auto; white-space: nowrap; }
.fb-duelo[data-fim="espera"] .fd-botoes { display: none; }
/* ao vivo sem o veredito da sala (passou o teto): sem vencedor e sem REVANCHE (a sala não responde); DESAFIAR OUTRO fica */
.fb-duelo[data-fim="sem"] .fd-titulo { font-size: 16px; border-style: dashed; color: var(--gray-7); }
.fb-duelo[data-fim="sem"] .fd-revanche { display: none; }
#telaFim.duelo #btnAgain { display: none; }
@media (max-height: 480px) {
  .fb-duelo { gap: 3px; margin-bottom: 4px; }
  .fb-duelo .fd-titulo { font-size: 20px; }
  .fb-duelo .fd-revanche { min-height: 44px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-duelo .fd-titulo { animation: none; }
}

/* ===== css/faixas.css ===== */
/* css/faixas.css — Temporada 3 (G1): a tela FAIXAS (js/faixas.js), o treino livre estilo "freeplay" do FNF. No ar, o
   build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gray-*).
   A tela não rola: o topo e o painel (dificuldade, prévia e JOGAR) ficam parados e só a lista rola, se não couber.
   Em pé (até 699 px): uma coluna, a lista em cima e o painel no pé (a prévia e o JOGAR, no alcance do polegar); a
   dificuldade se troca nos nomes das colunas (normal | difícil), em cima das marcas. Deitado e no computador:
   2 colunas, a lista | o painel da faixa escolhida (título, rival, dificuldade, seu melhor e JOGAR).
   Normal é tinta; difícil é vermelho (a coluna, o número da faixa escolhida e o JOGAR). */

#telaFaixas { overflow: hidden; }
/* as margens automáticas do .tela (centralizar) saem: aqui quem divide a altura é o flex */
#telaFaixas > .tela-topo { flex: none; margin: 4px 0 10px; }
#telaFaixas > .fx-corpo { margin: 0; }

.fx-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 30rem;
}
.fx-coluna { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* os nomes das 2 colunas de recordes, alinhados com as marcas das faixas (mesmo respiro à direita: o da lista, a borda
   e o da faixa; o mesmo espaço da barra de rolagem). Em pé são pílulas: a troca da dificuldade */
.fx-cab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 6px 14px;
  overflow: hidden;
  scrollbar-gutter: stable;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gray-7);
}
.fx-cab-txt { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cab-difs { flex: none; display: flex; gap: 6px; }
.fx-cab-dif {
  flex: none;
  width: 60px;
  min-height: 34px;
  padding: 0 2px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  cursor: pointer;
  transition: opacity .2s, color .15s, background-color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.fx-cab-dif[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fx-cab-dif[data-dif="dificil"][aria-pressed="true"] { border-color: var(--red); background: var(--red); }
.fx-cab-dif:disabled { opacity: .35; cursor: default; }

/* ===== a lista ===== */
.fx-lista {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 4px 6px 8px 4px; /* folga pra sombra da escolhida, que sobe 2 px e sombreia 4 px */
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.fx-lista > li { flex: none; }
.fx-faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
/* a escolhida sai do papel, como uma figurinha levantada (traço de caneta, sem sombra borrada) */
.fx-faixa[aria-pressed="true"] { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.fx-faixa:active { transform: scale(.98); }
.fx-faixa:focus-visible { outline-offset: 3px; }
.fx-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fx-faixa[aria-pressed="true"] .fx-n { background: var(--ink); color: var(--paper); }
.fx-coluna[data-dif="dificil"] .fx-faixa[aria-pressed="true"] .fx-n { border-color: var(--red); background: var(--red); }
.fx-info { flex: 1; min-width: 0; }
.fx-tit { display: block; font-size: 17px; font-weight: 900; line-height: 1.15; }
.fx-inteira { white-space: nowrap; }
.fx-sub { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .06em; color: var(--gray-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* as marcas de cada dificuldade: a nota carimbada e o seu melhor embaixo; a coluna que não está escolhida fica apagada */
.fx-marcas { flex: none; display: flex; gap: 6px; }
.fx-slot { flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity .2s; }
.fx-slot.sem { visibility: hidden; }
.fx-slot small { min-height: 1.2em; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.fx-coluna[data-dif="normal"] .fx-slot[data-dif="dificil"],
.fx-coluna[data-dif="dificil"] .fx-slot[data-dif="normal"] { opacity: .38; }

/* a nota carimbada (a mesma cara da nota grande do fim, css/ritmo.css: vermelha no S+ e no S) */
.fx-nota {
  position: relative;
  display: inline-block;
  min-width: 32px;
  padding: 0 6px 1px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  font-style: normal;
  line-height: 1.3;
  text-align: center;
  transform: rotate(-4deg);
}
.fx-nota[data-nota="S"], .fx-nota[data-nota="S+"] { border-color: var(--red); color: var(--red); }
.fx-nota[data-nota="S+"] { background: #fff4c2; }
.fx-nota.vazia { border-style: dashed; border-color: var(--gray-5); color: var(--gray-5); font-weight: 400; }
/* sem errar (FC): o selinho vermelho no canto do carimbo */
.fx-slot.fc .fx-nota::after {
  content: "FC";
  position: absolute;
  top: -8px;
  right: -13px;
  padding: 1px 4px 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.3;
  transform: rotate(10deg);
}

/* ===== o painel: em pé, a prévia numa linha e o JOGAR embaixo ===== */
.fx-painel {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 10px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .5);
}
.fx-p-num, .fx-p-tit, .fx-p-sub, .fx-p-melhor, .fx-dif, .fx-dica { display: none; margin: 0; }
.fx-previa { margin: 2px 0 0; font-size: 12px; letter-spacing: .05em; line-height: 1.3; color: var(--gray-7); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* normal | difícil (o do painel grande) */
.fx-dif { padding: 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.fx-dif button {
  min-height: 38px;
  padding: 4px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.fx-dif button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fx-dif button[data-dif="dificil"][aria-pressed="true"] { background: var(--red); }
.fx-dif button:disabled { opacity: .35; cursor: default; }

.fx-jogar { width: 100%; flex-direction: column; gap: 1px; line-height: 1.1; }
.fx-jogar-tit { display: inline-flex; align-items: center; gap: 8px; }
.fx-jogar-sub { font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: none; opacity: .85; }
.fx-painel[data-dif="dificil"] .fx-jogar { border-color: var(--red); background: var(--red); }

/* o seu melhor da escolhida (só no painel grande) */
.fx-p-melhor { font-size: 14px; letter-spacing: .04em; }
.fx-p-melhor b { font-size: 18px; }
.fx-p-melhor .fx-nota { margin-left: 4px; font-size: 15px; }
.fx-fc { display: inline-block; padding: 1px 7px 0; border-radius: 999px; background: var(--red); color: var(--paper); font-size: 10px; letter-spacing: .12em; vertical-align: 2px; }
.fx-dica { font-size: 12px; letter-spacing: .08em; line-height: 1.9; color: var(--gray-5); }
.fx-dica kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1.5px solid currentColor; border-radius: 6px; font: inherit; }
.fx-dica kbd + kbd { margin-left: 3px; }

@media (hover: hover) {
  .fx-faixa:hover { background: #f5f5f4; }
  .fx-dif button:not([aria-pressed="true"]):not(:disabled):hover { background: #f0f0ef; }
}
@media (hover: hover) and (max-width: 699px) {
  .fx-cab-dif:not([aria-pressed="true"]):not(:disabled):hover { background: #f0f0ef; }
}

/* ===== deitado e computador: 2 colunas, a lista | o painel da faixa escolhida, no meio da tela ===== */
@media (min-width: 700px) {
  #telaFaixas { justify-content: center; }
  #telaFaixas > .tela-topo { max-width: 58rem; }
  .fx-corpo { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 24px; max-width: 58rem; }
  .fx-coluna { flex: 1.25 1 0; align-self: stretch; }
  .fx-painel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 20px;
    text-align: center;
  }
  .fx-p-num, .fx-p-tit, .fx-p-sub, .fx-p-melhor { display: block; }
  .fx-dif { display: inline-flex; }
  /* os nomes das colunas voltam a ser só nomes (a troca grande mora no painel), e a coluna que não está escolhida apaga */
  .fx-cab { align-items: flex-end; padding-bottom: 5px; }
  .fx-cab-dif, .fx-cab-dif[aria-pressed="true"], .fx-cab-dif[data-dif="dificil"][aria-pressed="true"] {
    min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 11px; letter-spacing: .1em;
  }
  .fx-cab-dif[aria-pressed="false"] { opacity: .38; }
  .fx-cab-dif[data-dif="dificil"][aria-pressed="true"] { color: var(--red); }
  .fx-p-num { font-size: 11px; letter-spacing: .18em; color: var(--gray-5); }
  .fx-p-tit { font-size: 28px; font-weight: 900; line-height: 1.1; }
  .fx-p-sub { margin-top: -4px; font-size: 13px; letter-spacing: .08em; color: var(--gray-7); }
  .fx-dif { margin-top: 4px; }
  .fx-previa { text-align: center; }
  .fx-jogar { margin-top: 4px; }
  .fx-jogar-sub { display: none; }
}
/* a dica do teclado, só com mouse e tela grande (como a do menu) */
@media (min-width: 900px) and (min-height: 481px) and (hover: hover) {
  .fx-dica { display: block; }
}
/* celular deitado (844×390): topo e painel mais baixos; a lista rola */
@media (max-height: 480px) {
  #telaFaixas > .tela-topo { margin: 0 0 6px; }
  #telaFaixas .tela-topo h2 { font-size: 24px; }
  .fx-faixa { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
  .fx-tit { font-size: 16px; }
  .fx-painel { gap: 7px; padding: 12px 14px; }
  .fx-p-num { display: none; }
  .fx-p-tit { font-size: 22px; }
  .fx-p-sub { margin-top: -3px; }
  .fx-dif button { min-height: 34px; }
}
/* celular em pé e baixo (360×740, iPhone SE 375×667): faixas e painel mais baixos, pra lista caber inteira */
@media (max-width: 699px) and (max-height: 760px) {
  #telaFaixas > .tela-topo { margin: 0 0 6px; }
  .fx-cab { padding-bottom: 4px; }
  .fx-cab-dif { min-height: 30px; }
  .fx-faixa { min-height: 50px; padding-top: 3px; padding-bottom: 3px; }
  .fx-tit { font-size: 16px; }
  .fx-sub { margin-top: 1px; }
  .fx-painel { gap: 6px; padding: 8px; }
  .fx-jogar.btn.grande { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
}
/* celular estreito (360 px): um respiro a menos pra caber o título */
@media (max-width: 380px) {
  .fx-faixa { gap: 8px; padding-right: 8px; }
  .fx-tit { font-size: 16px; }
  .fx-marcas, .fx-cab-difs { gap: 4px; }
  .fx-slot, .fx-cab-dif { width: 56px; }
  .fx-cab { gap: 4px; padding-right: 16px; }
  .fx-cab-dif { font-size: 11px; }
}

/* ===== css/competicao.css ===== */
/* css/competicao.css — FEBRE (Parte A, frente C): as telas da disputa assíncrona (js/competicao.js). Contrato em
   FEBRE/DESIGN.md 3. No ar, o build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gold,
   --gray-*), no mesmo papel e tinta das outras telas.
   CAMPEONATO (telaCampeonato): o "palco" (a música da semana, a contagem, JOGAR, os prêmios e a sua posição) e as
   listas (top 10 ao vivo e o pódio da semana passada). Em pé, uma coluna (o palco em cima, no alcance do polegar
   depois de rolar só a lista); deitado e no computador, 2 colunas.
   TURMAS (telaTurmas): a lista (as suas turmas, criar, entrar) ou a turma aberta (rei, abas, ranking, membros).
   O "vs" (.rank-vs) é o mesmo no ranking, no campeonato, nas turmas e no hub DUELO: um botão pequeno de tinta, com
   área de toque de 32 px. */

/* ---------- o "vs": enfrentar o fantasma ---------- */
.rank-vs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  margin-left: 8px;
  padding: 0 7px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
}
.rank-vs:hover { background: var(--ink); color: var(--paper); }
.rank-vs:active { transform: scale(.94); }
.rank-vs:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
/* na tabela do ranking o nome não quebra por causa do botão */
#rank td.nm .rank-vs { margin-left: 6px; }

/* ---------- CAMPEONATO ---------- */
.cp-corpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 30rem;
}
.cp-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  text-align: center;
}
.cp-rot { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-7); }
.cp-musica { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.1; color: var(--red); }
.cp-acaba { margin: 0; font-size: 13px; color: var(--gray-7); font-variant-numeric: tabular-nums; }
.cp-jogar { width: 100%; max-width: 20rem; margin-top: 4px; }
.cp-premios { margin: 0; font-size: 12px; }
.cp-premios b { color: var(--red); }
.cp-premios span { color: var(--gray-5); }
.cp-eu { margin: 0; min-height: 1.3em; font-size: 13px; }
.cp-sub { margin: 4px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* as listas (top 10, pódio e o ranking da turma) */
.cp-top, .cp-podio {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}
.cp-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--gray-5);
  font-size: 14px;
}
.cp-linha.me { font-weight: 900; background: var(--gold); }
.cp-pos { flex: none; width: 2.2em; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-placar { flex: none; font-variant-numeric: tabular-nums; }
.cp-linha .rank-vs { margin-left: 0; }
.cp-p1 .cp-pos { color: var(--red); }
.cp-p1 { font-size: 16px; }
.cp-vazio { padding: 10px 2px; color: var(--gray-7); font-size: 13px; list-style: none; }

/* ---------- TURMAS ---------- */
.tm-corpo { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 30rem; }
.tm-lista, .tm-turma { display: flex; flex-direction: column; gap: 12px; }
.tm-lista[hidden], .tm-turma[hidden] { display: none; }
.tm-quem { margin: 0; font-size: 13px; color: var(--gray-7); }
.tm-minhas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tm-item {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.tm-item:hover { background: var(--ink); color: var(--paper); }
.tm-item:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
.tm-form { display: flex; align-items: flex-end; gap: 8px; }
.tm-form label { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--gray-7); }
.tm-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16 px: o iPhone não dá zoom no campo */
}
.tm-form input[name="codigo"] { text-transform: uppercase; letter-spacing: .2em; }
.tm-form .btn { flex: none; min-height: 44px; }
.tm-nome { margin: 0; font-size: 24px; font-weight: 900; }
.tm-codigo { margin: 0; font-size: 13px; letter-spacing: .12em; color: var(--gray-7); }
.tm-rei { margin: 0; font-size: 14px; }
.tm-rei b { color: var(--red); }
.tm-abas { display: flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.tm-aba {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-left: 1.5px solid var(--ink);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tm-aba:first-child { border-left: 0; }
.tm-aba.on { background: var(--ink); color: var(--paper); }
.tm-aba:focus-visible { outline: 2px dashed var(--red); outline-offset: -5px; }
.tm-membros summary { cursor: pointer; font-size: 13px; }
.tm-membros ul { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 14px; }
.tm-membros li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
/* membro que entrou sem provar o nome (sem recibo de posse): a marca fica logo depois do nome, o "tirar" na ponta */
.tm-nv {
  margin-right: auto;
  padding: 1px 6px;
  border: 1px dashed var(--gray-7);
  border-radius: 999px;
  color: var(--gray-7);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tm-tirar {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: none;
  color: var(--red);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tm-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-msg { margin: 0; min-height: 1.3em; font-size: 13px; }
.tm-msg.err { color: var(--red); }

/* ---------- o hub DUELO (tomadas duelo-fantasma e duelo-turmas) ---------- */
.cp-hub { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cp-hub-dica { margin: 0; font-size: 12px; color: var(--gray-7); }
.cp-hub-sub { margin: 6px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cp-hub-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cp-hub-lista li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 32px; font-size: 13px; }
.cp-hub-rot { color: var(--gray-7); }
.cp-hub .tm-item { min-height: 38px; }

/* ---------- FAIXAS: "bata o seu melhor" (o botão "vs você" do js/faixas.js, ao lado do JOGAR) ----------
   Mora aqui porque é a disputa contra o seu fantasma (css/faixas.css carrega antes e cuida do resto da tela). Fica na
   mesma fileira do JOGAR, na altura dele: em pé a lista das faixas continua cabendo inteira sem rolar */
#telaFaixas .fx-acoes { display: flex; align-items: stretch; gap: 8px; width: 100%; }
#telaFaixas .fx-acoes .fx-jogar { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
/* o JOGAR mais estreito: o nome da faixa fica numa linha só (reticências), sem crescer a altura do painel */
#telaFaixas .fx-acoes .fx-jogar-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-contra {
  flex: none;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  padding: 4px 12px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.1;
}
.fx-contra[hidden] { display: none; }
.fx-contra-tit { font-size: 14px; letter-spacing: .06em; }
.fx-contra-sub { font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.fx-painel[data-dif="dificil"] .fx-contra { border-color: var(--red); color: var(--red); }
@media (hover: hover) { .fx-contra:hover { background: #f0f0ef; } }
@media (min-width: 700px) {
  #telaFaixas .fx-acoes { margin-top: 4px; }
}

/* ---------- deitado e no computador: o campeonato em 2 colunas ---------- */
@media (min-width: 700px) {
  .cp-corpo { flex-direction: row; align-items: flex-start; max-width: 58rem; gap: 24px; }
  .cp-palco { flex: 0 0 22rem; position: sticky; top: 0; }
  .cp-listas { flex: 1 1 auto; min-width: 0; }
}
/* celular deitado (pouca altura): o palco fica compacto */
@media (max-height: 480px) and (orientation: landscape) {
  .cp-palco { padding: 10px 12px; gap: 4px; }
  .cp-musica { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rank-vs:active { transform: none; }
}

/* ===== css/aovivo.css ===== */
/* css/aovivo.css — FEBRE (Parte A, frente V): o duelo AO VIVO (js/aovivo.js). Contrato em FEBRE/DESIGN.md 4.
   No ar, o build.js junta no fim do style.css; usa as cores de lá (--ink, --paper, --red, --gold, --gray-*).
   Traço de caneta como o resto: tinta preta no papel, o vermelho só no que é seu (principal, derrota) e o ouro na
   vitória. O lobby cabe sem rolar em 360×740 e deitado (844×390): uma coluna estreita, tudo em blocos baixos.
   Os botões secundários são "fantasma" (papel com borda); o principal de cada vista é o preto cheio. */

#telaAoVivo > .tela-topo { margin-bottom: 12px; }
.av-corpo {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.av-corpo .btn:not(.av-principal),
.av-fim .btn:not(.av-principal),
.av-tomada .btn:not(.av-principal) { background: var(--paper); color: var(--ink); }
.av-principal.ligado { background: var(--red); border-color: var(--red); }

.av-sub { margin: 0; font-size: 14px; color: var(--gray-7); line-height: 1.35; }
.av-grande { margin: 4px 0; font-size: 34px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.av-aviso {
  margin: 0;
  padding: 6px 10px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.av-linha { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.av-linha > .btn { flex: 1 1 8rem; }
.av-pisca { animation: av-pisca 1.2s ease-in-out infinite; }
@keyframes av-pisca { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .av-pisca { animation: none; } }

/* entrar com código */
.av-codigo { display: flex; gap: 8px; align-items: flex-end; justify-content: center; }
.av-codigo label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--gray-7); }
.av-codigo input {
  width: 7.2em;   /* 5 letras com o espaçamento largo (o ABCDE inteiro) */
  min-height: 46px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  font-family: inherit;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* a sala: código grande, os dois jogadores, a música e a ação */
.av-sala, .av-sala-quem, .av-sala-acao { display: flex; flex-direction: column; gap: 8px; }
.av-cod-rot { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-5); }
.av-cod { margin: -4px 0 2px; font-size: 44px; font-weight: 900; letter-spacing: .22em; line-height: 1.05; user-select: all; }
.av-jogs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.av-jog {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  text-align: left;
  font-size: 15px;
}
.av-jog.vazio { border-style: dashed; color: var(--gray-5); }
.av-jog.pronto { box-shadow: 3px 3px 0 var(--ink); }
.av-bone {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 3px 3px;   /* um boné visto de lado, no traço */
  background: var(--bone, transparent);
}
.av-nome { flex: 1; min-width: 0; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-nome small { font-weight: 600; color: var(--gray-5); }
.av-vit { font-size: 12px; font-weight: 900; color: var(--gold); -webkit-text-stroke: .5px var(--ink); }
.av-estado { flex: none; font-size: 12px; color: var(--gray-7); }
.av-jog.pronto .av-estado { color: var(--ink); font-weight: 900; }

.av-musica { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.av-musica label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--gray-7); flex: 1 1 10rem; }
.av-musica select {
  width: 100%;
  min-height: 42px;
  padding: 0 8px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.av-difs { display: flex; gap: 4px; }
.av-difs button {
  min-height: 42px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.av-difs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.av-difs button[data-dif="dificil"][aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.av-sair { align-self: center; min-height: 40px; padding: 6px 16px; font-size: 13px; }

/* contagem da largada */
.av-vs { margin: 0; font-size: 20px; font-weight: 900; display: flex; gap: 10px; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.av-vs b { color: var(--red); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* o resultado (lobby e tela de fim) */
.av-res, .av-fim-tit { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.2; }
.av-ganhou { color: var(--ink); text-shadow: 2px 2px 0 var(--gold); }
.av-perdeu { color: var(--red); }

/* a caixa do ao vivo na tela de fim (tomada fim-extras) */
.av-fim {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto 8px;
  padding: 8px 12px 10px;
  max-width: 24rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}
.av-fim-rot { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 900; }
.av-fim-placar { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* a tomada do hub DUELO (a section e o cartão são do js/mascote.js; aqui só o miolo) */
.av-tomada { display: flex; flex-direction: column; gap: 6px; }
.av-tomada-sub { margin: 0; font-size: 13px; color: var(--gray-7); }

/* deitado (celular): menos respiro em cima, código menor */
@media (max-height: 460px) {
  #telaAoVivo > .tela-topo { margin: 0 0 6px; }
  .av-corpo { gap: 6px; }
  .av-cod { font-size: 32px; }
  .av-grande { font-size: 26px; }
  .av-jog { min-height: 36px; }
}
/* deitado com largura: a sala em duas colunas (quem está | música e ação), senão o "sair da sala" passa do rodapé */
@media (max-height: 460px) and (min-width: 600px) {
  .av-corpo { max-width: 46rem; }
  .av-sala { flex-direction: row; align-items: flex-start; gap: 16px; }
  .av-sala-quem, .av-sala-acao { flex: 1 1 0; min-width: 0; }
  .av-sala-acao { justify-content: center; align-self: stretch; }
  .av-cod { font-size: 30px; }
}

/* ===== css/mascote.css ===== */
/* css/mascote.css — FEBRE (Parte A, frente M): o Snip (balão de fala, o palco dele no menu, a pílula do perfil), a
   tela PERFIL e o hub do DUELO. Contrato em FEBRE/DESIGN.md 5. O lugar do lockup no menu é do style.css (layout). */

/* ===== o Snip do menu: o canvas ocupa o palco inteiro; tocar nele = um bordão ===== */
.snip-palco {
  position: relative;
  flex: none;
  width: var(--snip-l, 96px);
  height: var(--snip-a, 124px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.snip-palco canvas { display: block; width: 100%; height: 100%; }
/* enquanto o jogo carrega (e se o script falhar), o Snip parado em imagem (img/snip.png, desenhada pelo próprio jogo:
   tools/icones_snip.mjs); o js/mascote.js tira quando o canvas desenha o primeiro quadro */
.snip-palco { background: url(/img/snip.png) 50% 100% / contain no-repeat; }
.snip-palco.vivo { background: none; }
.snip-palco:active canvas { transform: scale(.97); }

/* ===== balão de fala (MS.snip.falar) =====
   Fora do menu: no alto da tela, centrado (embaixo moram os botões do fim e das telas), por cima de tudo; não pega
   toque (nunca atrapalha um botão). No menu: sai da boca do Snip, à direita dele, por cima do nome */
.snip-fala {
  position: fixed;
  left: 50%;
  top: calc(10px + var(--top));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(22rem, calc(100vw - 32px));
  padding: 6px 14px 6px 6px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .55);
  text-align: left;
  pointer-events: none;
  transform: translateX(-50%);
}
.snip-fala[hidden] { display: none; }
/* no meio da música (só a fala marcada { jogando: true }): embaixo, abaixo das miras, onde mora a dica do tutorial.
   As notas descem de cima: nada pode tapar o caminho delas */
body.jogando .snip-fala { top: auto; bottom: calc(12px + var(--bottom)); }
/* celular deitado (o mesmo corte do css/ritmo.css e do layout() do js/nucleo/ritmo.js): as miras descem até H − 64, e
   o balão embaixo tapava as cédulas chegando (FEBRE/revisao.md achado 11). Ele vai pra coluna da direita, logo abaixo
   do tempo e do xN (o motor conta esse canto ocupado até ~108 px do alto, topoDir), sem ícone e sem passar da borda
   das pistas: elas ocupam o meio, 4 × min(92 px, (W − recuos) / 6), então sobra pelo menos 50vw − 184 px de cada lado.
   No iPhone com entalhe deitado (viewport-fit=cover) as pistas continuam centradas em W/2, mas o balão encosta em
   8 px + o recuo da direita: a largura máxima desconta esse recuo, senão ele voltava a cruzar a pista da → em 16 a 55 px
   (FEBRE/pendentes-rodada1.md achado 11). Desconta o maior dos dois lados: o iOS informa os dois iguais deitado (47/47,
   59/59, pros dois lados que girar), e o max() não deixa de fora o aparelho que informe só um deles */
@media (min-aspect-ratio: 1/1) and (max-height: 559.98px) {
  body.jogando .snip-fala {
    top: calc(112px + var(--top));
    right: calc(8px + var(--right));
    bottom: auto;
    left: auto;
    max-width: min(15rem, calc(50vw - 196px - max(var(--left), var(--right))));
    padding: 5px 10px;
    transform: none;
  }
  body.jogando .snip-fala .snip-fala-ico { display: none; }
  body.jogando .snip-fala .snip-fala-txt { font-size: 12px; }
  body.jogando .snip-fala.entra { animation: snipFalaLado .32s var(--ease); }
}
@keyframes snipFalaLado {
  0% { opacity: 0; transform: translateX(8px) scale(.9); }
  100% { opacity: 1; transform: none; }
}
.snip-fala-ico { flex: none; width: 34px; height: 34px; }
.snip-fala-txt { margin: 0; font-size: 14px; line-height: 1.25; letter-spacing: .03em; }
.snip-fala[data-humor="feliz"] { border-color: var(--red); }
.snip-fala.entra { animation: snipFalaEntra .32s var(--ease); }
.snip-fala.sai { opacity: 0; transition: opacity .25s; }
@keyframes snipFalaEntra {
  0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* no palco do menu: o balão sai da cabeça do Snip, pra direita, com o biquinho apontando pra ele (sem o ícone: o
   Snip grande está ali do lado) */
.snip-fala.no-palco {
  position: absolute;
  left: 72%;
  top: 2px;
  z-index: 3;
  max-width: min(15rem, calc(100vw - 150px));
  padding: 6px 12px;
  border-radius: 16px 16px 16px 4px;
  transform: none;
}
.snip-fala.no-palco .snip-fala-ico { display: none; }
.snip-fala.no-palco .snip-fala-txt { font-size: 13px; }
.snip-fala.no-palco.entra { animation: snipFalaPalco .32s var(--ease); }
@keyframes snipFalaPalco {
  0% { opacity: 0; transform: translate(-8px, 6px) scale(.85); }
  100% { opacity: 1; transform: none; }
}
/* no computador e no celular de pé com tela alta (≥ 800 px: iPhone 12 em diante) sobra altura entre a barra de cima e
   o lockup: o balão sobe pra cima da cabeça e o nome do jogo fica à mostra. Nos baixos (360×740, deitado) não cabe:
   ele passa por cima do nome, e é só por uns segundos */
@media (min-height: 800px), (min-width: 900px) and (min-height: 700px) {
  .snip-fala.no-palco { top: auto; bottom: calc(100% - 14px); left: 55%; max-width: 20rem; }
}

/* ===== a pílula do perfil no menu: a cabeça do Snip, "nv 7" e a barrinha do XP embaixo ===== */
.menu-perfil {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: auto;
  padding: 4px 12px 6px 6px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-perfil:active { transform: scale(.96); }
.menu-perfil canvas { width: 30px; height: 30px; }
.mp-nv { white-space: nowrap; }
.mp-barra {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) calc(var(--xp, 0) * 100%), #e5e7eb 0);
}
/* a engrenagem vem logo depois do perfil: o "margin-left: auto" passa pro perfil */
.menu-barra .menu-perfil + .aj-botao { margin-left: 0; }
@media (hover: hover) {
  .menu-perfil:hover { background: var(--ink); color: var(--paper); }
}
/* 1ª visita (menu limpo do tutorial): sem o perfil, que só tem graça depois da 1ª música */
html.ms-estreia #telaMenu .menu-perfil { display: none; }
html.ms-estreia #telaMenu .aj-botao { margin-left: auto; }

/* ===== tela PERFIL ===== */
#telaPerfil .tela-topo { max-width: 40rem; }
.pf { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 40rem; text-align: left; }
.pf-cab { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 20px; background: var(--paper); }
.pf-snip { flex: none; width: 104px; height: 132px; }
.pf-id { flex: 1; min-width: 0; }
.pf-nome { margin: 0; overflow: hidden; font-size: 24px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.pf-nome.vazio { color: var(--gray-5); font-size: 16px; }
.pf-titulo { margin: 2px 0 8px; font-size: 15px; letter-spacing: .08em; color: var(--gray-7); }
.pf-titulo b { color: var(--red); }
.pf-xp { height: 12px; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: #f3f4f6; }
.pf-xp-barra { display: block; width: calc(var(--xp, 0) * 100%); height: 100%; background: var(--red); transition: width .6s var(--ease); }
.pf-xp-txt { margin: 4px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--gray-7); }
.pf-sec { margin: 8px 0 0; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.pf-sec small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--gray-5); }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pf-stat { padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.pf-stat dt { font-size: 11px; letter-spacing: .06em; color: var(--gray-7); }
.pf-stat dd { margin: 2px 0 0; font-size: 20px; }
.pf-bones { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-bone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 60px;
  min-height: 60px;
  padding: 6px 6px 5px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.pf-bone-cor { width: 30px; height: 18px; border: 2px solid var(--ink); border-radius: 15px 15px 3px 3px; background: var(--bone); }
.pf-bone.on { border-width: 3px; border-color: var(--red); }
.pf-bone.preso { border-style: dashed; color: var(--gray-5); cursor: default; }
.pf-bone.preso .pf-bone-cor { opacity: .3; }
.pf-medalhas { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-medalha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 14px;
}
.pf-medalha.ouro { background: var(--gold); }
.pf-medalha.prata { background: #d1d5db; }
.pf-medalha.bronze { background: #e7a36b; }
.pf-vazio, .pf-dica { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--gray-5); }
.pf-dica { margin-top: 6px; }
@media (max-width: 379px) {
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-snip { width: 84px; height: 108px; }
}

/* ===== hub do DUELO: 3 caminhos; tomada vazia = "em breve" ===== */
.duelo-hub { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 40rem; text-align: left; }
.dh-cab { display: flex; align-items: center; gap: 12px; }
.dh-snip { flex: none; width: 80px; height: 100px; }
.dh-frase { margin: 0; font-size: 15px; line-height: 1.35; letter-spacing: .03em; }
.dh-selo { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--red); color: var(--paper); font-size: 14px; letter-spacing: .04em; }
.dh-caminho { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
.dh-tit { margin: 0; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; }
.dh-sub { margin: 2px 0 8px; font-size: 13px; color: var(--gray-7); }
.dh-embreve { display: none; margin: 0; font-size: 12px; letter-spacing: .12em; color: var(--gray-5); }
.dh-tomada:empty { display: none; }
.dh-tomada:empty + .dh-embreve { display: block; }
.dh-caminho:has(.dh-tomada:empty) { border-style: dashed; }
/* caminho preenchido: a frase de quem preencheu vale (a minha, genérica, sai pra não repetir) */
.dh-caminho:has(.dh-tomada:not(:empty)) .dh-sub { display: none; }
.dh-caminho:has(.dh-tomada:not(:empty)) .dh-tit { margin-bottom: 4px; }