:root {
  --caixa: #f8f8f0;
  --borda: #3a4038;
  --tinta: #22261f;
  --apagado: #7a7f72;
  --vermelho: #d84040;
  --laranja: #f8a030;
  --verde: #58b858;
  --amarelo: #f8e858;
  --amarelo-escuro: #8a7a10;
  --superficie: #f1f2e9;
  --sombra: rgba(0, 0, 0, 0.38);
}

html, body {
  margin: 0;
  height: 100%;
  background: #0c120c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
}

button, input { font: inherit; }
button { color: inherit; }

#stage {
  position: relative;
  width: min(96vw, 152vh);
  aspect-ratio: 16 / 10;
  border: 4px solid #26362a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}

#tela3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.oculto { display: none !important; }

/* ---------- acessibilidade ---------- */
/* texto só para leitor de tela (heading da página antes do JS rodar) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* foco por teclado visível em qualquer controle (âmbar da paleta) */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}
/* respeita quem pede menos movimento: corta animações e transições de CSS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* micro-transições: painéis entram com fade curto em vez de corte seco */
@keyframes painel-entra {
  from { opacity: 0; transform: translateY(5px); }
}
#menu:not(.oculto), #msg:not(.oculto), #painel-acao:not(.oculto) {
  animation: painel-entra 0.13s ease-out;
}
.msg-lista li { transition: background 0.18s ease, color 0.18s ease; }
.scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.48; }

.controles {
  color: #5e7a5e;
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
/* caminho para as páginas de conteúdo: discreto, numa linha própria */
.links-conteudo {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
.links-conteudo a {
  color: #5e7a5e;
  text-underline-offset: 2px;
}
.titulo-privacidade {
  color: inherit;
  text-underline-offset: 2px;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: 1.2%;
  width: 27%;
  min-width: 190px;
  background: var(--caixa);
  border: 3px solid var(--borda);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; gap: 9px;
}
.hud-avatar {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 2px solid var(--borda);
  object-fit: cover; background: #dce4f0;
}
.hud-info { flex: 1; min-width: 0; }
.hud-faltas { color: var(--vermelho); font-weight: 800; }
.hud-estilo {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--apagado);
}
.hud-progresso {
  margin-top: 3px; padding-top: 3px;
  border-top: 1px solid #d2d4c7;
  color: var(--apagado); font-size: 10px; font-weight: 800; line-height: 1.15;
}
.hud-progresso[hidden] { display: none; }
/* A faixa DESENHADA precisa de contexto de empilhamento próprio: as pontas
   enviesadas de .faixa-visual usam z-index:-1 e, sem isto, iriam para trás do
   fundo opaco do card e desapareceriam. line-height:0 evita a linha-base
   fantasma do inline-block somar altura invisível ao card (o relógio móvel se
   posiciona pela base dos cards). */
.hud-faixa { position: relative; z-index: 0; line-height: 0; margin-bottom: 3px; }
.hud-graduacao { color: var(--verde); letter-spacing: 0.04em; }
.hud-historico { margin-top: 2px; }
#hud-p1 { left: 1.2%; }
#hud-p2 { right: 1.2%; }
.hud-nome { font-weight: 800; letter-spacing: 0.04em; font-size: clamp(13px, 1.9vh, 17px); }
.hud-pontos { font-size: clamp(12px, 1.8vh, 16px); margin: 2px 0 4px; }
.hud-folego { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--apagado); }
.barra { flex: 1; height: 9px; background: #d8d8cc; border-radius: 5px; overflow: hidden; border: 1px solid #b8b8aa; }
.barra i { display: block; height: 100%; border-radius: 4px; transition: width 0.25s; }
.barra i.ok { background: var(--verde); }
.barra i.medio { background: var(--laranja); }
.barra i.critico { background: var(--vermelho); animation: pisca 0.6s infinite; }
@keyframes pisca { 50% { opacity: 0.35; } }

#turno {
  position: absolute; top: 1.6%; left: 50%; transform: translateX(-50%);
  color: #e8f0dc; font-weight: 700; font-size: clamp(12px, 1.8vh, 15px);
  text-shadow: 0 2px 4px rgba(0,0,0,.6); letter-spacing: 0.06em;
}
#rotulo-posicao {
  position: absolute; bottom: 32.5%; left: 50%; transform: translateX(-50%);
  background: rgba(10, 20, 10, 0.65); color: #f4f8ea;
  padding: 4px 14px; border-radius: 14px;
  font-weight: 800; font-size: clamp(13px, 2vh, 17px); letter-spacing: 0.05em;
}

#toast-pontos {
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%) scale(0.8);
  background: var(--amarelo); color: #3a3208; border: 3px solid #8a7a10;
  padding: 6px 18px; border-radius: 12px;
  font-weight: 800; font-size: clamp(15px, 2.6vh, 22px);
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none !important;
}
#toast-pontos.ativo { opacity: 1; transform: translateX(-50%) scale(1); }

#flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none !important;
  transition: opacity 0.12s;
}
#flash.ativo { opacity: 0.45; }

/* ---------- caixa inferior ---------- */
#caixa {
  position: absolute; left: 1%; right: 1%; bottom: 1.2%; height: 30%;
}
#menu, #msg, #painel-acao {
  position: absolute; inset: 0;
  background: var(--caixa);
  border: 3px solid var(--borda);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
  font-size: clamp(14px, 2.2vh, 18px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#menu { display: flex; flex-direction: column; }
#msg { display: flex; flex-direction: column; }
#msg .painel-cta { margin-top: auto; }

.menu-recap {
  color: var(--apagado); font-weight: 700; font-size: 0.75em;
  border-bottom: 2px solid #d8d8cc; margin-bottom: 5px; padding-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* menu 2x2 estilo Pokémon: duas opções em cima, duas embaixo */
.menu-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0; min-height: 44px;
  padding: 6px 9px; border: 2px solid #d2d4c7; border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left;
  font-weight: 700; line-height: 1.2;
}
.menu-item .cursor { visibility: hidden; font-size: 0.8em; }
.menu-item .nome { min-width: 0; overflow-wrap: anywhere; }
.menu-item.sel {
  background: #e4e8d2;
  border-color: var(--borda);
  box-shadow: 0 0 0 2px var(--amarelo);
}
.menu-item.sel .cursor { visibility: visible; }
.menu-item.sem-folego { color: #b0b0a2; }
.menu-item .custo { margin-left: auto; font-weight: 600; color: var(--apagado); font-size: 0.85em; }
.menu-item.sem-folego .custo { color: var(--vermelho); }
.menu-rodape {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 8px; margin-top: auto; padding-top: 7px;
}
.menu-dica { color: var(--apagado); font-size: 0.72em; font-weight: 600; line-height: 1.25; }
.menu-dica .alerta { color: var(--vermelho); }
.menu-acoes { display: flex; gap: 7px; }
.menu-acoes button { min-height: 44px; white-space: nowrap; padding-inline: 12px; }

.msg-titulo { font-weight: 800; margin-bottom: 4px; }
.msg-passos { line-height: 1.45; }
.msg-lista { margin: 4px 0 4px 22px; padding: 0; line-height: 1.4; }
.msg-lista li { margin: 2px 0; padding: 1px 6px; border-radius: 6px; }
.msg-lista li.ativo {
  background: var(--amarelo);
  font-weight: 700;
  box-shadow: 0 0 0 2px #8a7a10 inset;
}
.acao-extra { color: var(--vermelho); font-weight: 700; font-size: 0.9em; }
.acao-resultado { font-weight: 700; margin: 6px 0 2px; line-height: 1.4; }
.acao-passos { margin: 7px 0; }
.acao-passos summary {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 8px 12px;
  cursor: pointer; list-style: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  color: var(--tinta); background: var(--superficie);
  border: 2px solid #c7cabc; border-radius: 10px;
  font-weight: 900; font-size: 0.9em; text-transform: uppercase;
}
.acao-passos summary::-webkit-details-marker { display: none; }
.acao-passos summary::before {
  content: "▶"; flex: none;
  color: var(--amarelo-escuro); font-size: 0.78em;
  transition: transform 0.16s ease;
}
.acao-passos[open] summary {
  background: #e4e8d2; border-color: var(--borda);
}
.acao-passos summary:active { background: #e4e8d2; }
.acao-passos[open] summary::before { transform: rotate(90deg); }
.acao-passos > .msg-lista { margin-top: 8px; margin-bottom: 8px; }
.chip-pontos {
  display: inline-block; margin-top: 6px; padding: 2px 12px;
  background: var(--amarelo); border: 2px solid #8a7a10; border-radius: 10px;
  font-weight: 800; font-size: 0.9em;
}
.painel-cta {
  display: block; width: 100%; min-height: 46px; margin-top: 10px;
  position: sticky; bottom: 0;
  border: 2px solid var(--borda); border-radius: 11px;
  background: var(--amarelo); color: #4e420b;
  font-weight: 900; cursor: pointer;
}

.passo-rotulo {
  display: inline-block; margin: 2px 0;
  font-size: 0.68em; font-weight: 800; letter-spacing: 0.08em;
  color: #8a7a10;
}
.passo-rotulo:empty { display: none; }

.replay-ops { display: flex; gap: 10px; margin-top: 10px; }
.replay-ops button {
  flex: 1; min-height: 48px;
  font: inherit; font-weight: 800; cursor: pointer;
  background: #fff; color: var(--tinta);
  border: 3px solid var(--borda); border-radius: 10px; padding: 8px 18px;
}
.replay-ops button.sel { background: #e4e8d2; box-shadow: 0 0 0 3px var(--amarelo); }
.replay-ops small { font-weight: 600; color: var(--apagado); }

/* ---------- overlay INFO ---------- */
.painel {
  position: absolute; left: 12%; right: 12%; top: 10%; bottom: 32%;
  background: var(--caixa); border: 3px solid var(--borda); border-radius: 14px;
  padding: 16px 22px; box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.4);
  font-size: clamp(14px, 2.1vh, 18px);
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.painel h2 { margin: 0 0 8px; font-size: 1.3em; }
.info-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.info-cabecalho h2 { min-width: 0; }
.bt-fechar {
  width: 48px; height: 48px; flex: none;
  border: 2px solid var(--borda); border-radius: 50%;
  background: #fff; font-weight: 900; cursor: pointer;
}
.info-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tag {
  background: #e4e8d2; border: 2px solid var(--borda); border-radius: 10px;
  padding: 1px 10px; font-weight: 700; font-size: 0.75em;
}
.tag.pontos { background: var(--amarelo); }
.tag.finaliza { background: #f0c8c8; }
.info-fonte { font-size: 0.85em; color: #444a3e; line-height: 1.5; margin-bottom: 10px; word-break: break-all; }
.info-passos { line-height: 1.5; }

/* ---------- telas ---------- */
.tela {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(8, 14, 8, 0.62);
}
.titulo-bloco, .selecao-bloco, .perfil-bloco, .fim-bloco, .ranking-bloco {
  width: min(640px, 100%);
  max-height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--caixa); border: 3px solid var(--borda); border-radius: 22px;
  padding: 24px 30px; text-align: center;
  box-shadow: 6px 8px 0 var(--sombra);
}
.titulo-bloco { width: min(620px, 100%); }
.perfil-bloco { width: min(600px, 100%); }
.bt-primario, .bt-secundario {
  min-height: 48px;
  border: 3px solid var(--borda); border-radius: 12px;
  padding: 9px 18px;
  font-weight: 900; letter-spacing: 0.04em; cursor: pointer;
}
.bt-primario {
  background: var(--amarelo); color: #4e420b;
  box-shadow: 0 3px 0 var(--amarelo-escuro);
}
.bt-secundario { background: #fff; color: var(--tinta); }
/* botão de largura cheia dentro do menu do título; serve para <a> de conteúdo
   (o seletor .titulo-acoes > .bt-primario é de filho direto e não pega aqui).
   box-sizing explícito: <button> já vem border-box do navegador, <a> não, e sem
   isso o padding somaria à min-height e o link ficaria mais alto que os botões */
.bt-largo {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 9px;
  text-align: center; text-decoration: none;
}
.bt-apoio {
  width: 100%; min-height: 48px; margin-top: 9px;
  border: 2px solid #8f7840; border-radius: 12px;
  padding: 7px 14px; background: #fff8df; color: #594813;
  font-weight: 900; letter-spacing: 0.04em; cursor: pointer;
}
.bt-apoio:disabled { cursor: wait; opacity: 0.68; }
.apoio-retorno {
  margin: 7px auto 4px; color: var(--verde);
  font-size: 0.78em; font-weight: 900;
}
/* Aviso de versão nova: vazio na maior parte do tempo, então não reserva
   espaço nem empurra o CTA de jogar quando não há nada a dizer. */
.titulo-versao:empty { display: none; }
.titulo-versao { margin: 8px auto 0; width: min(440px, 100%); }
.titulo-versao-aviso {
  margin: 0 auto 6px; color: var(--verde);
  font-size: 0.78em; font-weight: 900;
}
.tela-cabecalho {
  display: grid; grid-template-columns: 48px 1fr 48px;
  align-items: center; gap: 8px; margin-bottom: 8px;
}
.tela-cabecalho::after { content: ""; width: 48px; }
.tela-cabecalho h2 { margin: 0; line-height: 1.1; }
.tela-cabecalho h2[tabindex="-1"]:focus { outline: none; }
.bt-voltar-tela {
  width: 48px; height: 48px;
  border: 2px solid var(--borda); border-radius: 12px;
  background: #fff; font-size: 32px; line-height: 1; font-weight: 700; cursor: pointer;
}
/* A marca é uma imagem, e o nome vive num <h2 class="sr-only"> que rotula a
   seção. A arte não traz texto desenhado: o slogan abaixo é texto traduzível. */
.titulo-marca { display: flex; justify-content: center; }
.logo-marca { width: clamp(200px, 34vh, 340px); height: auto; max-width: 100%; }
.titulo-slogan {
  margin: 6px 0 0; color: var(--moldura); font-weight: 800;
  font-size: 0.82em; letter-spacing: 0.14em; text-transform: uppercase;
}
.tela .sub { color: var(--apagado); font-weight: 700; margin: 4px 0 14px; }
.rodape { color: var(--apagado); font-size: 0.72em; margin: 12px 0 0; }
.titulo-acoes { width: min(440px, 100%); margin: 14px auto 8px; }
.titulo-acoes > .bt-primario { width: 100%; }
.titulo-acoes-secundarias {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px;
}
.titulo-preferencias {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  width: min(440px, 100%); gap: 10px; margin: 10px auto 0;
}
.titulo-preferencias-controles {
  display: flex; align-items: center; justify-content: flex-start;
  min-width: 0;
}
.titulo-idioma {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  gap: 6px;
}
.titulo-idioma > span {
  color: var(--apagado); font-size: 0.72em; font-weight: 900; letter-spacing: 0.08em;
}
.titulo-idioma select {
  min-width: 76px; min-height: 48px; padding: 6px 30px 6px 12px;
  border: 2px solid #c7cabc; border-radius: 10px;
  background: #fff; font-size: 0.74em; font-weight: 900; cursor: pointer;
}
.titulo-preferencias-acoes { display: flex; align-items: center; gap: 8px; }
.titulo-icone-acao {
  width: 48px; height: 48px; flex: none; padding: 10px;
  border: 2px solid #c7cabc; border-radius: 10px;
  background: #fff; color: var(--verde); cursor: pointer;
}
.titulo-icone-acao svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.titulo-som-botao svg path:first-child { fill: currentColor; stroke: currentColor; }
.titulo-som-botao .icone-som-mudo { display: none; }
.titulo-som-botao[aria-pressed="false"] {
  color: var(--apagado); background: #f1f1eb;
}
.titulo-som-botao[aria-pressed="false"] .icone-som-ondas { display: none; }
.titulo-som-botao[aria-pressed="false"] .icone-som-mudo { display: block; }
.titulo-compartilhar svg circle { fill: currentColor; }
.titulo-compartilhar:disabled { cursor: wait; opacity: 0.55; }
#titulo-compartilhar-status {
  grid-column: 1 / -1; width: 100%; margin: 0; color: var(--apagado);
  font-size: 0.66em; font-weight: 800;
}
#titulo-compartilhar-status:empty { display: none; }

/* Convite ao nome de tatame: acolhedor e opcional. Fica na escolha de estilo,
   antes dos cards, e no fim da luta, antes da súmula. Na seleção ele é mais um
   card da pilha, então acompanha a largura dos cards de estilo, nunca uma caixa
   estreita no meio deles. */
#selecao-convite:empty { display: none; }
.convite-nome, .convite-salvo {
  width: 100%; box-sizing: border-box;
  margin: 0 auto 8px; padding: 7px 10px;
  border: 2px solid #bcd8bc; border-radius: 12px; background: #eef7ee;
}
/* No fim da luta o convite acompanha a súmula, não a largura do bloco inteiro. */
#ranking-envio.convite-nome { width: min(440px, 100%); }
/* Onde sobra largura, a pergunta fica na MESMA linha do campo: a tela de
   escolha de estilo precisa terminar no LUTAR sem rolagem, e cada linha a mais
   no convite era altura tirada de lá. */
@media (min-width: 761px) {
  #selecao-convite.convite-nome {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  }
  #selecao-convite.convite-nome .ranking-chamada { flex: none; margin: 0; }
  #selecao-convite.convite-nome .ranking-form { flex: 1; min-width: 220px; }
  #selecao-convite.convite-nome #convite-status { flex-basis: 100%; margin: 0; }
}
.convite-nome .ranking-chamada {
  margin: 0 0 7px; color: var(--tinta);
  font-size: 0.76em; font-weight: 800;
}
.convite-nome .ranking-form { flex-wrap: nowrap; gap: 8px; }
.convite-nome .ranking-form input { min-width: 0; width: auto; flex: 1; }
.convite-nome .ranking-form button {
  flex: none; padding: 7px 10px; font-size: 0.7em;
  background: #fff; color: var(--tinta); border-color: #7fae7f;
}
.convite-nome #convite-status, .convite-nome #ranking-status {
  margin: 7px 0 0; min-height: 0; color: var(--apagado);
  font-size: 0.68em; font-weight: 700;
}
.convite-nome #convite-status:empty,
.convite-nome #ranking-status:empty { display: none; }
.convite-salvo {
  color: #2f6b2f; font-size: 0.76em; font-weight: 800; text-align: center;
}
.convite-depois {
  display: block; min-height: 48px; margin: 2px auto 0; padding: 2px 8px;
  font: inherit; font-size: 0.72em; font-weight: 700; cursor: pointer;
  background: none; border: none; color: var(--apagado); text-decoration: underline;
}

.card-arq {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 72px;
  border: 3px solid var(--borda); border-radius: 12px;
  padding: 9px 14px; margin: 8px 0; cursor: pointer; text-align: left;
  background: #fff;
}
.card-arq.sel { background: #e4e8d2; box-shadow: 0 0 0 3px var(--amarelo); }
.card-arq .swatch {
  width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--borda);
  flex: none;
}
.card-main b { font-size: 1.05em; letter-spacing: 0.04em; }
.card-main small { display: block; color: var(--apagado); font-weight: 600; }
.selecao-rival {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border: 2px solid #c5a73a;
  border-radius: 12px;
  background: #fff5c7;
  color: #51450f;
  font-size: 0.86em;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.selecao-bloco .desc { min-height: 2.4em; margin: 10px 0 12px; }
/* O LUTAR nunca sai da tela. A pilha de estilos cresce (rival, convite ao nome,
   três cards, descrição) e em janela baixa a ação primária ficava abaixo da
   dobra, exigindo rolar para começar a luta. Grudado no fim do bloco, ele
   continua no fluxo e só se fixa quando há rolagem. */
.selecao-bloco > .bt-primario {
  width: 100%; position: sticky; bottom: 0; z-index: 1;
}
.selecao-bloco > .bt-primario:disabled { cursor: wait; opacity: 0.68; }
.fim-acoes {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-top: 10px;
}
.fim-bloco > .bt-apoio { width: min(440px, 100%); }

.sumula { margin: 0 auto 14px; border-collapse: collapse; }
.sumula th, .sumula td { padding: 4px 18px; border-bottom: 2px solid #d8d8cc; }
.sumula th { font-size: 0.8em; letter-spacing: 0.08em; color: var(--apagado); }
.sumula td:first-child { text-align: left; font-weight: 700; }

.perfil-titulo, .xp-ganho {
  width: min(440px, 94%);
  box-sizing: border-box;
  margin: 10px auto;
  padding: 9px 12px;
  border: 2px solid #d2d4c7;
  border-radius: 12px;
  background: #f1f2e9;
  text-align: left;
}
.graduacao-topo { display: flex; align-items: center; gap: 12px; }
.graduacao-topo > span:last-child { min-width: 0; }
.graduacao-topo b {
  display: block; font-size: 0.78em; letter-spacing: 0.06em; line-height: 1.1;
}
.graduacao-topo small {
  display: block; margin-top: 2px; color: var(--apagado);
  font-size: 0.58em; font-weight: 800; letter-spacing: 0.08em;
}
/* O nome do jogador ocupa o lugar do rótulo genérico e é conteúdo, não legenda:
   fica na tinta cheia e nunca empurra o cartão quando é longo. */
.graduacao-topo .graduacao-nome {
  color: var(--tinta); font-size: 0.64em; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faixa-visual {
  position: relative; display: inline-block; flex: none;
  width: 118px; height: 19px; border: 2px solid #252a24; border-radius: 3px;
  background: var(--cor-faixa); box-shadow: inset 0 1px rgba(255,255,255,.35);
}
.faixa-visual::before, .faixa-visual::after {
  content: ""; position: absolute; left: -3px; width: 11px; height: 19px;
  top: -2px; background: var(--cor-faixa); border: 2px solid #252a24;
  transform: skewY(-17deg); z-index: -1;
}
.faixa-visual::after { left: auto; right: -3px; transform: skewY(17deg); }
.faixa-branca { --cor-faixa: #f2f0df; }
.faixa-azul { --cor-faixa: #305da8; }
.faixa-roxa { --cor-faixa: #70458d; }
.faixa-marrom { --cor-faixa: #75472f; }
.faixa-preta { --cor-faixa: #242526; }
/* coral: vermelha E preta, metade a metade no comprimento. As pontas
   enviesadas ficam sólidas, porque gradiente em ::before/::after distorce. */
.faixa-coral { --cor-faixa: linear-gradient(90deg, #b0332e 0 50%, #242526 50% 100%); }
.faixa-coral::before { background: #b0332e; }
.faixa-coral::after { background: #242526; }
/* a largura acompanha o número de graus da faixa (a preta tem 6) */
.faixa-ponteira {
  position: absolute; display: flex; align-items: center; justify-content: space-evenly;
  right: 7px; top: 0; width: calc(13px + var(--graus, 4) * 6px); height: 100%; padding: 0 3px;
  box-sizing: border-box; background: #202223;
}
.faixa-preta .faixa-ponteira { background: #a52b2b; }
.faixa-ponteira i {
  display: block; width: 3px; height: 14px; border-radius: 1px;
  background: rgba(255,255,255,.17);
}
.faixa-ponteira i.ativo { background: #f7f5e9; box-shadow: 0 0 2px #fff; }
/* variante dos cards de luta: mesma faixa, orçamento de largura do HUD */
.faixa-visual-compacta {
  width: min(88px, 100%); height: 11px; border-width: 1px; border-radius: 2px;
}
.faixa-visual-compacta::before, .faixa-visual-compacta::after {
  width: 7px; height: 11px; top: -1px; border-width: 1px;
}
.faixa-visual-compacta::before { left: -2px; }
.faixa-visual-compacta::after { left: auto; right: -2px; }
.faixa-visual-compacta .faixa-ponteira {
  right: 5px; width: calc(9px + var(--graus, 4) * 4px); padding: 0 2px;
}
.faixa-visual-compacta .faixa-ponteira i { width: 2px; height: 7px; }
.perfil-barra {
  height: 6px; margin: 8px 0 5px; overflow: hidden;
  border: 1px solid #b8b8aa; border-radius: 5px; background: #d8d8cc;
}
.perfil-barra i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--verde); transition: width .35s;
}
.graduacao-detalhe {
  display: flex; justify-content: space-between; gap: 12px;
  color: var(--apagado); font-size: 0.66em; font-weight: 700;
}
.graduacao-detalhe strong { color: var(--tinta); white-space: nowrap; }
.perfil-historico {
  display: block; margin-top: 5px; color: var(--apagado);
  font-size: 0.64em; font-weight: 700; text-align: center;
}
.xp-ganho { margin-top: -4px; }
.promocao {
  margin: -2px 0 8px; padding: 4px 8px; border-radius: 7px;
  background: var(--amarelo); color: #4e420b;
  font-size: 0.78em; font-weight: 900; letter-spacing: 0.06em; text-align: center;
}

/* ---------- ranking online (tela + bloco na tela de fim) ---------- */
.ranking-bloco { width: min(680px, 100%); }
.ranking-bloco h2 { margin: 0 0 2px; }
#ranking-lista { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ranking-tabela { width: 100%; min-width: 430px; }
.ranking-tabela td:first-child { text-align: center; }
.ranking-tabela td:nth-child(2) { text-align: left; font-weight: 700; }
.ranking-tabela tr.voce td { background: var(--amarelo); }
.ranking-aviso { margin: 18px 0; color: var(--apagado); font-weight: 700; }
.ranking-seu-total {
  margin: 8px 0 5px; color: var(--apagado);
  font-size: 0.7em; font-weight: 800;
}
.ranking-convite {
  margin: 12px 0; padding: 10px 12px;
  border: 2px solid #d2d4c7; border-radius: 12px; background: #f1f2e9;
}
.ranking-convite h3 {
  margin: 0 0 4px; color: var(--verde); font-size: 0.8em; letter-spacing: 0.06em;
}
.ranking-convite > p {
  margin: 4px 0; color: var(--apagado); font-size: 0.68em; font-weight: 700;
}
.ranking-link { display: flex; gap: 6px; margin: 8px 0 5px; }
.ranking-link input {
  min-width: 0; min-height: 48px; box-sizing: border-box; flex: 1; padding: 6px 8px;
  border: 2px solid var(--borda); border-radius: 9px;
  background: #fdfdf6; color: var(--tinta); font: inherit; font-size: 0.67em;
}
.ranking-link button {
  min-height: 48px; padding: 6px 10px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: var(--amarelo); color: #4e420b;
  font: inherit; font-size: 0.68em; font-weight: 900;
}
.ranking-convite-resumo { color: var(--verde) !important; }
#ranking-convite-status { min-height: 1.1em; }

/* O perfil usa uma única régua de conteúdo. Progressão vem primeiro; nome e
   acesso ocasional seguem sem variar largura ou criar cartões dentro de cartões. */
.perfil-bloco > .sub { margin: 2px 0 10px; }
.perfil-secao {
  width: min(500px, 100%); box-sizing: border-box;
  margin: 10px auto; text-align: left;
}
.perfil-secao-titulo {
  margin: 0 0 5px 2px;
  color: var(--apagado); font-size: 0.66em; font-weight: 900;
  letter-spacing: 0.1em;
}
.perfil-secao > .perfil-titulo {
  width: 100%; margin: 0;
}

/* O nome da conta é a identidade do jogador no app: fica no topo do perfil,
   antes de qualquer campo de edição. */
.perfil-identidade {
  margin: 0 0 2px;
  color: var(--verde);
  font-size: 0.82em; font-weight: 900; letter-spacing: 0.05em;
  text-align: center; overflow-wrap: anywhere;
}

/* Boas-vindas de quem recuperou a conta. Fica DENTRO do perfil, não flutuando
   sobre o tatame: legenda solta na cena é proibida no projeto. */
.perfil-volta {
  margin: 0 auto 8px; padding: 9px 12px;
  width: min(500px, 100%); box-sizing: border-box;
  border: 2px solid var(--verde); border-radius: 12px;
  background: #eaf6ea; color: #1f4a1f;
  font-size: 0.72em; font-weight: 800; line-height: 1.35; text-align: center;
  animation: volta-entra 0.32s ease-out;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.perfil-volta.saindo { opacity: 0; transform: translateY(-6px); }
@keyframes volta-entra {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* Acesso à conta é progressivo: fechado vira uma única linha; aberto revela o
   segredo mascarado e deixa rotação sob "opções avançadas". */
.conta-bloco {
  width: min(500px, 100%); box-sizing: border-box; overflow: hidden;
  margin: 10px auto 0;
  border: 2px solid #d2d4c7; border-radius: 12px; background: #f1f2e9;
  text-align: left;
}
.conta-resumo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 62px; padding: 10px 13px;
  border: 0; background: transparent; color: var(--tinta);
  text-align: left; cursor: pointer;
}
.conta-resumo:focus-visible {
  outline: 3px solid var(--amarelo); outline-offset: -4px;
  border-radius: 10px;
}
.conta-resumo > span:first-child { min-width: 0; }
.conta-resumo strong {
  display: block; font-size: 0.7em; letter-spacing: 0.07em;
}
.conta-resumo small {
  display: block; margin-top: 2px; color: var(--apagado);
  font-size: 0.62em; font-weight: 700; line-height: 1.3;
}
.conta-resumo-seta {
  flex: none; color: var(--verde); font-size: 1.25em; font-weight: 900;
}
.conta-bloco.aberto .conta-resumo { border-bottom: 1px solid #d2d4c7; }
.conta-conteudo { padding: 12px 13px 10px; }
.conta-conteudo[hidden] { display: none; }
.conta-conteudo > .ranking-aviso { margin: 6px 0; }
.conta-bloco h3 {
  margin: 0 0 4px; color: var(--verde);
  font-size: 0.72em; letter-spacing: 0.07em;
}
.conta-bloco h4 {
  margin: 10px 0 4px; color: var(--verde); font-size: 0.72em; letter-spacing: 0.06em;
}
.conta-conteudo > p, .conta-aviso, .conta-avancado > p {
  margin: 4px 0; color: var(--apagado); font-size: 0.68em; font-weight: 700;
}
.conta-codigo-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px; margin: 9px 0 7px;
}
.conta-codigo-linha input,
.conta-entrar input {
  min-width: 0; min-height: 48px; box-sizing: border-box; padding: 6px 8px;
  border: 2px solid var(--borda); border-radius: 9px;
  background: #fdfdf6; color: var(--tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em; font-weight: 800; letter-spacing: 0.08em; text-align: center;
}
.conta-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.conta-codigo-linha button,
.conta-acoes-principais button,
.conta-avancado > button,
.conta-acoes button,
.conta-entrar .bt-secundario {
  min-height: 48px; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: #fdfdf6; color: var(--tinta);
  font: inherit; font-size: 0.66em; font-weight: 900;
}
.conta-codigo-linha #conta-copiar { background: var(--amarelo); color: #4e420b; }
.conta-acoes-principais {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; margin: 7px 0 4px;
}
.conta-acoes button:first-child { background: var(--amarelo); color: #4e420b; }
.conta-entrar { margin-top: 6px; }
.conta-entrar .ranking-form { display: flex; gap: 6px; margin: 6px 0; }

/* Chegada pelo QR: o código já está no campo, então o que falta é a
   confirmação. O bloco se destaca e o botão pulsa uma vez, porque a queixa real
   foi "escaneei e não importou" olhando para uma tela que estava só esperando um
   toque. */
.conta-entrar-qr {
  margin-top: 10px; padding: 9px 10px;
  border: 2px solid var(--verde); border-radius: 12px; background: #eaf6ea;
}
.conta-entrar-qr h4 { color: var(--verde); }
.conta-qr-chamada {
  margin: 2px 0 6px; color: #1f4a1f;
  font-size: 0.7em; font-weight: 900; line-height: 1.35;
}
/* No bloco do QR o campo ganha a linha inteira e o botão vai abaixo. Dividir a
   linha com o botão cortava o código pela metade ("BJJ-SSMV-N…"), e foi
   exatamente essa aparência de valor truncado que fez parecer que o QR não
   tinha importado nada. */
/* Pedido de confirmação do código que veio pelo QR, na tela de título. Fica em
   destaque porque é a primeira coisa que a pessoa precisa responder: sem isso
   ela cai no jogo sem nenhum sinal de que havia uma conta esperando. */
.conta-prompt {
  width: min(440px, 96%); box-sizing: border-box;
  margin: 0 auto 10px; padding: 11px 12px;
  border: 3px solid var(--verde); border-radius: 12px; background: #eaf6ea;
  animation: volta-entra 0.3s ease-out;
}
.conta-prompt h3 {
  margin: 0 0 4px; color: var(--verde);
  font-size: 0.8em; letter-spacing: 0.06em;
}
.conta-prompt p {
  margin: 4px 0; color: #1f4a1f; font-size: 0.68em; font-weight: 700; line-height: 1.35;
}
.conta-prompt-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em !important; font-weight: 900 !important;
  letter-spacing: 0.08em; text-align: center;
  padding: 7px 6px; border: 2px solid var(--borda); border-radius: 9px;
  background: #fdfdf6; overflow-wrap: anywhere;
}
.conta-prompt-acoes { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.conta-prompt-acoes button {
  /* 50px e não 48: com borda e arredondamento o retângulo medido caía em 47,
     abaixo do mínimo de alvo de toque do projeto. */
  min-height: 50px; box-sizing: border-box; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: var(--amarelo); color: #4e420b;
  font: inherit; font-size: 0.7em; font-weight: 900;
}
.conta-prompt-acoes .bt-secundario { background: #fdfdf6; color: var(--tinta); }
#conta-prompt-status { min-height: 1.1em; font-size: 0.66em; font-weight: 800; }
#conta-prompt-status.erro { color: var(--vermelho); }

/* Saída do beco: quando o nome é de outra conta, o caminho é entrar nela pelo
   código, e o botão fica junto da mensagem, onde a pessoa travou. */
.nick-usar-codigo {
  margin-top: 6px; min-height: 48px; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: var(--amarelo); color: #4e420b;
  font: inherit; font-size: 0.66em; font-weight: 900;
}
.conta-entrar-qr .ranking-form { display: grid; grid-template-columns: 1fr; gap: 6px; }
.conta-entrar-qr .ranking-form input { width: 100%; }
.conta-entrar .bt-destaque {
  min-height: 48px; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: var(--amarelo); color: #4e420b;
  font: inherit; font-size: 0.68em; font-weight: 900; white-space: nowrap;
  animation: destaque-pulsa 1.1s ease-out 3;
}
@keyframes destaque-pulsa {
  50% { box-shadow: 0 0 0 4px rgba(248, 232, 88, 0.75); }
}
.conta-entrar input {
  flex: 1; font-family: inherit;
}
.conta-entrar .ranking-form button {
  min-height: 48px; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 9px;
  background: var(--amarelo); color: #4e420b;
  font: inherit; font-size: 0.68em; font-weight: 900;
}
/* min-height 48px: é um alvo de toque, e a regra de mobile do projeto vale
   também para as divulgações discretas. Medido em 34px antes disto. */
.conta-avancado-botao {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; margin-top: 6px; padding: 7px 2px;
  border: 0; border-top: 1px solid #d2d4c7; background: transparent;
  color: var(--apagado); font: inherit; font-size: 0.62em; font-weight: 900;
  letter-spacing: 0.06em; cursor: pointer; text-align: left;
}
.conta-avancado-botao span { color: var(--verde); font-size: 1.35em; }
.conta-avancado { padding: 2px 0 3px; }
.conta-avancado[hidden] { display: none; }
.conta-avancado > button { margin-top: 5px; }
.conta-qr { display: flex; flex-direction: column; align-items: center; }
/* Sem image-rendering: pixelated. O canvas é desenhado com folga de resolução
   (js/ui/qr.js) e aqui ele só encolhe; com "pixelated" essa redução vira
   módulo de tamanho desigual, que é o que faz a câmera não ler. */
.conta-qr-imagem {
  width: min(280px, 76vw); height: auto;
  margin: 8px 0 4px; border: 2px solid var(--borda); border-radius: 9px;
  background: #fff;
}
.conta-qr-legenda {
  margin: 0 0 6px; color: var(--apagado);
  font-size: 0.64em; font-weight: 700; text-align: center;
}
#conta-status { min-height: 1.1em; font-size: 0.68em; font-weight: 800; }
#conta-status.erro { color: var(--vermelho); }

.ranking-identidade {
  width: min(500px, 100%); box-sizing: border-box;
  margin: 10px auto; padding: 10px 12px;
  border: 2px solid #d2d4c7; border-radius: 12px; background: #f1f2e9;
  text-align: left;
}
.ranking-identidade > label {
  display: block; margin-bottom: 5px;
  font-size: 0.72em; font-weight: 900; letter-spacing: 0.06em;
}
.ranking-identidade > label small { color: var(--apagado); }
.ranking-identidade .ranking-form { flex-wrap: nowrap; justify-content: stretch; gap: 7px; }
.ranking-identidade .ranking-form input { min-width: 0; width: auto; flex: 1; }
.ranking-identidade .ranking-form button { flex: none; }
#ranking-inicio-status {
  margin: 5px 0 0; min-height: 1.2em;
  color: var(--apagado); font-size: 0.66em; font-weight: 700;
}
#ranking-inicio-status.erro { color: var(--vermelho); }
#ranking-indicacao-status {
  margin: 3px 0 0; color: var(--verde); font-size: 0.66em; font-weight: 800;
}

/* auto nas laterais: o convite é uma caixa de largura fixa e precisa centrar */
#ranking-envio { margin: 0 auto 10px; }
.ranking-chamada { margin: 0 0 7px; font-size: 0.8em; font-weight: 700; color: var(--apagado); }
.ranking-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ranking-form input {
  min-height: 48px; box-sizing: border-box;
  font: inherit; font-size: max(16px, 0.85em); width: 168px; padding: 7px 10px;
  border: 2px solid var(--borda); border-radius: 10px; background: #fdfdf6;
}
.ranking-form button {
  min-height: 48px;
  font: inherit; font-size: 0.75em; font-weight: 800; cursor: pointer;
  background: var(--amarelo); color: #4e420b;
  border: 2px solid var(--borda); border-radius: 10px; padding: 7px 12px;
}
#ranking-depois { margin-top: 6px; }
#ranking-status {
  margin: 7px 0 0; min-height: 1.2em;
  font-size: 0.75em; font-weight: 800; color: var(--apagado);
}
.ranking-bloco > .bt-secundario { width: 100%; margin-top: 8px; }

/* ---------- celular / toque ---------- */

/* Controles flutuantes legados. As ações móveis agora ficam no próprio painel. */
#botoes-touch { display: none; }

@media (hover: none) and (pointer: coarse) {
  .controles { display: none; } /* dicas de teclado não fazem sentido no toque */
}

/* retrato estreito: o palco vira tela cheia e a UI se reorganiza */
@media (orientation: portrait) and (max-width: 760px) {
  html, body { overflow: hidden; }
  body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .controles { display: none; }
  #stage {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex: none;
    aspect-ratio: auto;
    border: none; border-radius: 0; box-shadow: none;
  }
  .hud {
    top: calc(8px + env(safe-area-inset-top));
    width: calc(50% - 14px); min-width: 0; min-height: 103px;
    box-sizing: border-box; align-items: flex-start;
    padding: 5px 6px; border-width: 2px; gap: 6px;
  }
  #hud-p1 { left: calc(6px + env(safe-area-inset-left)); }
  #hud-p2 { right: calc(6px + env(safe-area-inset-right)); }
  .hud-avatar { width: 30px; height: 30px; }
  .hud-nome {
    font-size: 10px; line-height: 1.05;
    overflow-wrap: anywhere;
  }
  .hud-estilo { font-size: 7px; line-height: 1.05; }
  .hud-progresso {
    margin-top: 2px; padding-top: 2px;
    font-size: 7px; line-height: 1.12;
  }
  /* em 320px a .hud-info tem ~98px de orçamento */
  .hud .faixa-visual-compacta { width: min(72px, 100%); height: 9px; }
  .hud .faixa-visual-compacta .faixa-ponteira i { height: 6px; }
  .hud-faixa { margin-bottom: 2px; }
  .hud-historico { margin-top: 1px; }
  .hud-pontos { margin: 2px 0; font-size: 9px; line-height: 1.05; }
  .hud-folego { gap: 4px; font-size: 7px; line-height: 1; }
  .barra { height: 7px; }
  #turno {
    top: calc(var(--hud-cards-bottom, 111px) + 10px);
    z-index: 2; padding: 3px 8px;
    border-radius: 12px; background: rgba(10, 20, 10, 0.72);
    font-size: 10px; line-height: 1; white-space: nowrap;
  }
  #toast-pontos {
    top: calc(var(--hud-cards-bottom, 111px) + 39px);
  }
  #caixa {
    height: 33%; left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #menu, #msg, #painel-acao { padding: 9px 10px; font-size: 14px; border-width: 2px; }
  .menu-grade { gap: 6px; }
  .menu-item { min-height: 48px; padding: 6px 7px; }
  .menu-item .cursor { display: none; }
  .menu-rodape {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px; padding-top: 6px;
  }
  .menu-acoes { display: grid; grid-template-columns: 1fr 1.35fr; }
  .menu-acoes button { min-height: 48px; }
  #rotulo-posicao { bottom: calc(35% + env(safe-area-inset-bottom)); font-size: 12px; padding: 3px 10px; }
  #toast-pontos { top: 11%; font-size: 15px; }
  .painel {
    left: 10px; right: 10px; top: calc(12px + env(safe-area-inset-top));
    bottom: calc(35% + env(safe-area-inset-bottom));
    padding: 12px 14px; font-size: 14px;
  }
  .tela {
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
    align-items: center;
  }
  .titulo-bloco, .selecao-bloco, .perfil-bloco, .fim-bloco, .ranking-bloco {
    width: 100%; max-width: none; max-height: 100%;
    padding: 16px 14px; border-radius: 20px;
  }
  .logo-marca { width: clamp(170px, 56vw, 250px); }
  .titulo-slogan { margin-top: 4px; font-size: 0.74em; letter-spacing: 0.1em; }
  .titulo-bloco .sub { margin-bottom: 7px; font-size: 0.88em; }
  .perfil-titulo { margin: 7px auto; padding: 7px 9px; }
  .faixa-visual { width: 102px; }
  .titulo-acoes { margin-top: 10px; }
  .titulo-acoes .bt-primario, .titulo-acoes .bt-secundario { min-height: 48px; }
  .convite-nome, .convite-salvo { margin-bottom: 8px; padding: 9px 10px; }
  .convite-nome .ranking-form { gap: 7px; }
  .convite-nome .ranking-form button { padding: 7px 10px; }
  .titulo-preferencias { margin: 7px auto 0; }
  .titulo-idioma select { min-height: 48px; }
  .rodape { margin-top: 7px; }
  .tela-cabecalho { margin-bottom: 5px; }
  .card-arq { min-height: 72px; margin: 7px 0; padding: 8px 10px; }
  .card-main b { font-size: 1em; }
  .card-main small { font-size: 0.78em; line-height: 1.25; }
  .selecao-bloco .desc { margin: 8px 0 10px; font-size: 0.92em; }
  .sumula { margin-bottom: 9px; }
  .sumula th, .sumula td { padding: 3px 7px; }
  .perfil-bloco > .sub { margin-bottom: 8px; }
  .perfil-secao, .ranking-identidade, .conta-bloco { margin-top: 8px; margin-bottom: 8px; }
  .ranking-identidade { padding: 10px; }
  .ranking-identidade .ranking-form { flex-wrap: nowrap; gap: 7px; }
  .ranking-identidade .ranking-form input { min-width: 0; width: auto; flex: 1; }
  .ranking-identidade .ranking-form button { padding: 7px 10px; }
  .conta-codigo-linha { grid-template-columns: 1fr 1fr; }
  .conta-codigo-linha input { grid-column: 1 / -1; }
  .conta-codigo-linha button { width: 100%; }
  .ranking-convite > p { font-size: 0.72em; }
  .ranking-tabela { font-size: 0.76em; }
  .ranking-tabela th, .ranking-tabela td { padding-left: 5px; padding-right: 5px; }
  .replay-ops { gap: 8px; flex-wrap: wrap; }
  .replay-ops button { min-width: 135px; padding: 8px 12px; }
  .fim-acoes { grid-template-columns: 1fr; }
}

@media (orientation: portrait) and (max-width: 360px) {
  .titulo-bloco, .selecao-bloco, .perfil-bloco, .fim-bloco, .ranking-bloco {
    padding: 12px 10px;
  }
  .titulo-bloco .sub { font-size: 0.8em; }
  .titulo-acoes { margin-top: 8px; }
  .titulo-acoes-secundarias { margin-top: 7px; }
  .rodape { font-size: 0.66em; }
  .graduacao-topo { gap: 8px; }
  .faixa-visual { width: 94px; }
  .card-arq { min-height: 66px; }
  .ranking-identidade .ranking-form { flex-wrap: wrap; }
  .ranking-identidade .ranking-form input,
  .ranking-identidade .ranking-form button { width: 100%; }
  .convite-nome .ranking-form { flex-wrap: wrap; }
  .convite-nome .ranking-form input,
  .convite-nome .ranking-form button { width: 100%; flex: none; }
  .conta-acoes-principais { grid-template-columns: 1fr; }
  .conta-entrar .ranking-form { flex-wrap: wrap; }
  .conta-entrar .ranking-form input,
  .conta-entrar .ranking-form button { width: 100%; }
  #caixa { height: 40%; }
  #rotulo-posicao { bottom: calc(42% + env(safe-area-inset-bottom)); }
  .painel { bottom: calc(42% + env(safe-area-inset-bottom)); }
}

/* Celular deitado: usa toda a tela e troca pilhas altas por faixas horizontais. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  html, body { overflow: hidden; }
  body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .controles { display: none; }
  #stage {
    width: 100vw; height: 100vh; height: 100dvh; flex: none;
    aspect-ratio: auto; border: none; border-radius: 0; box-shadow: none;
  }
  .hud {
    width: 36%; min-width: 0; box-sizing: border-box;
    padding: 5px 7px; border-width: 2px; gap: 6px;
  }
  .hud-avatar { width: 34px; height: 34px; }
  .hud-progresso { font-size: 8px; }
  .hud .faixa-visual-compacta { width: min(78px, 100%); height: 10px; }
  .tela {
    padding:
      calc(8px + env(safe-area-inset-top))
      calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      calc(8px + env(safe-area-inset-left));
  }
  .titulo-bloco, .selecao-bloco, .perfil-bloco, .fim-bloco, .ranking-bloco {
    max-height: 100%; padding: 12px 16px; border-radius: 18px;
  }
  #caixa {
    height: 48%; left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(7px + env(safe-area-inset-bottom));
  }
  #menu, #msg, #painel-acao { padding: 8px 12px; font-size: 13px; }
  .menu-grade { gap: 5px 8px; }
  .menu-item { min-height: 48px; }
  .menu-rodape { padding-top: 5px; }
  .menu-acoes button { min-height: 48px; }
  #rotulo-posicao { bottom: calc(51% + env(safe-area-inset-bottom)); }
  .painel {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    top: calc(8px + env(safe-area-inset-top));
    bottom: calc(51% + env(safe-area-inset-bottom));
  }
}

/* Orientação sozinha não prova que há espaço horizontal. Ao abrir o teclado
   num celular em pé, o viewport pode ficar mais largo do que alto e ativar as
   regras de landscape. As composições em colunas só entram quando a largura
   útil também comporta cada cartão sem esmagar texto ou campos. */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 600px) and (max-width: 1000px) {
  .titulo-bloco {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr);
    grid-template-areas:
      "marca progresso"
      "slogan progresso"
      "sub progresso"
      "acoes idioma"
      "rodape rodape";
    align-items: center; gap: 4px 18px;
  }
  .titulo-marca { grid-area: marca; }
  .titulo-slogan { grid-area: slogan; margin: 0; font-size: 0.7em; }
  .titulo-bloco > .sub { grid-area: sub; margin: 0; font-size: 0.82em; }
  .titulo-bloco > .perfil-titulo { grid-area: progresso; width: 100%; margin: 0; }
  .titulo-acoes { grid-area: acoes; width: 100%; margin: 5px 0 0; }
  .titulo-preferencias { grid-area: idioma; width: 100%; margin: 5px 0 0; }
  .titulo-bloco > .rodape { grid-area: rodape; margin: 2px 0 0; }
  .logo-marca { width: clamp(140px, 30vh, 210px); }
  .titulo-acoes .bt-primario,
  .titulo-acoes .bt-secundario { min-height: 48px; padding-block: 6px; }
  .titulo-idioma select { min-height: 48px; }

  .selecao-bloco {
    width: min(860px, 100%);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch; gap: 8px 10px;
  }
  .selecao-bloco > .tela-cabecalho { grid-column: 1 / -1; margin: 0; }
  .selecao-bloco > .selecao-rival { grid-column: 1 / -1; margin: 0; padding: 5px 10px; }
  .selecao-bloco > .card-arq {
    min-height: 96px; margin: 0; padding: 8px 10px;
  }
  .selecao-bloco > .desc {
    grid-column: 1 / 3; min-height: 48px; margin: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .selecao-bloco > .bt-primario { grid-column: 3; min-height: 48px; }
}

/* O perfil precisa de colunas mais largas que as outras telas: além do cartão
   de progressão, a segunda coluna contém campo editável e CTA localizado. */
@media (orientation: landscape) and (min-width: 720px) and (max-height: 600px) and (max-width: 1000px) {
  .perfil-bloco {
    width: min(860px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cabecalho cabecalho"
      "identidade identidade"
      "sub sub"
      "boasvindas boasvindas"
      "progresso nome"
      "conta conta";
    align-items: start; gap: 3px 12px;
  }
  .perfil-bloco > .tela-cabecalho { grid-area: cabecalho; margin: 0; }
  .perfil-bloco > .perfil-identidade { grid-area: identidade; }
  .perfil-bloco > .sub { grid-area: sub; margin: 0 0 2px; }
  #perfil-boasvindas { grid-area: boasvindas; }
  .perfil-bloco > section.perfil-secao { grid-area: progresso; }
  #ranking-perfil { grid-area: nome; }
  #ranking-conta { grid-area: conta; }
  .perfil-bloco > .perfil-secao,
  .perfil-bloco > .ranking-identidade,
  .perfil-bloco > .conta-bloco { width: 100%; margin: 2px 0; }
}

/* Última defesa para celulares estreitos, inclusive quando o teclado muda a
   orientação calculada pelo navegador. Campos importantes ganham uma linha
   inteira e os CTAs vão abaixo, sem reduzir a área digitável. */
@media (max-width: 480px) {
  .ranking-identidade .ranking-form,
  .conta-entrar .ranking-form,
  .ranking-link {
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
  .ranking-identidade .ranking-form input,
  .ranking-identidade .ranking-form button,
  .conta-entrar .ranking-form input,
  .conta-entrar .ranking-form button,
  .ranking-link input,
  .ranking-link button {
    width: 100%; min-width: 0;
  }
  .conta-codigo-linha { grid-template-columns: 1fr 1fr; }
  .conta-codigo-linha input { grid-column: 1 / -1; width: 100%; }
  .conta-codigo-linha button { width: 100%; }
  .conta-acoes-principais,
  .fim-acoes { grid-template-columns: minmax(0, 1fr); }
}