/* ============================================================
   VAZÔ WEB — o mesmo visual do app Android
   (bg_titulo, bg_card_titulo, bg_pill_perfil, DialogoVazo, VisualSala, opcoes.xml)
   ============================================================ */
:root {
  /* DialogoVazo */
  --fundo: #1E1E1E;
  --cartao: #2C2C2C;
  --aba-inativa: #333333;
  --verde: #4CAF50;
  --dourado: #FFD700;
  --cinza: #555555;
  --vermelho: #D32F2F;
  --azul: #4285F4;
  --roxo: #8E24AA;
  --texto-suave: #AAAAAA;
  /* tela inicial e salas */
  --vidro: rgba(7, 36, 18, .7);          /* #B3072412 */
  --vidro-borda: rgba(255, 255, 255, .25); /* #40FFFFFF */
  --pilula: rgba(255, 255, 255, .15);    /* #26FFFFFF */
  --pilula-borda: rgba(255, 255, 255, .4); /* #66FFFFFF */
  --branco-70: rgba(255, 255, 255, .7);  /* #B3FFFFFF */
  --ambar: #FFC107;
  --topo: env(safe-area-inset-top, 0px);
  --base: env(safe-area-inset-bottom, 0px);
  --esq: env(safe-area-inset-left, 0px);
  --dir: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: #0A4421; }
body {
  min-height: 100%;
  color: #fff;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  /* bg_titulo: degradê verde de cima para baixo + brilho radial no alto */
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(88, 224, 127, .2), rgba(88, 224, 127, 0) 100%),
    linear-gradient(180deg, #1F9D4A 0%, #16793A 50%, #0A4421 100%);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; border: 0; background: none; padding: 0; }
a { color: #FFD54F; }
img { max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }
.sem-js { padding: 24px; text-align: center; }

#palco { min-height: 100dvh; }
.tela {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--topo) var(--dir) var(--base) var(--esq);
}

/* carregando */
.carregando { flex: 1; min-height: 50dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--branco-70); }
.carregando.inicial { min-height: 100dvh; }
.carregando p { margin: 0; font-weight: 700; }
.giro { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ============================================================
   TELA INICIAL (titulo.xml)
   ============================================================ */
.tela-titulo { height: 100dvh; min-height: 520px; width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; }

/* cartão de vidro: bg_card_titulo */
.cabecalho-titulo, .botao-titulo, .botao-titulo-pequeno, .cabecalho-sala, .cartao-sala, .linha-jogador, .cartao-vazio {
  background: var(--vidro);
  border: 1.5px solid var(--vidro-borda);
  border-radius: 18px;
}
.cabecalho-titulo { display: flex; align-items: center; margin: 8px 16px 0; padding: 10px; flex: none; }
.meu-perfil { flex: 1; min-width: 0; display: flex; align-items: center; text-align: left; border-radius: 14px; }
.meu-perfil .avatar-perfil { flex: none; }
.meu-perfil-textos { flex: 1; min-width: 0; margin-left: 10px; display: flex; flex-direction: column; }
.meu-perfil-textos small { font-size: 11px; color: var(--branco-70); }
.meu-perfil-textos b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* bg_pill_perfil */
.pilula-perfil {
  flex: none; width: 58px; height: 46px; margin-left: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--pilula); border: 1px solid var(--pilula-borda); border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.pilula-perfil svg { width: 22px; height: 22px; }
.pilula-perfil.engrenagem { width: 38px; height: 38px; font-size: 18px; }

.zona-logo { flex: 9 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.logo-titulo { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.versao { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.build { font-size: 12px; color: var(--branco-70); margin-bottom: 2px; text-align: center; }
.pilula-instalar {
  flex: none; margin-top: 6px; padding: 6px 14px; border-radius: 20px;
  background: var(--pilula); border: 1px solid var(--pilula-borda); font-size: 13px; font-weight: 700;
}
.pilula-instalar:active { filter: brightness(1.35); }
.passos-instalar ol { margin: 0 0 4px; padding-left: 22px; color: #DDD; font-size: 15px; }
.passos-instalar li { margin-bottom: 6px; }

.zona-botoes { flex: 12 1 0; min-height: 0; display: flex; flex-direction: column; margin: 6px 24px 0; padding-bottom: 14px; }
.botao-titulo {
  flex: 1 1 0; min-height: 52px; max-height: 92px; margin-bottom: 8px;
  display: flex; align-items: center; padding: 0 10px 0 12px; text-align: left;
  transition: filter .12s, transform .12s;
}
.botao-titulo:active, .botao-titulo-pequeno:active, .pilula-perfil:active, .meu-perfil:active { filter: brightness(1.35); transform: scale(.985); }
.botao-titulo-textos { flex: 1; min-width: 0; margin-left: 12px; display: flex; flex-direction: column; justify-content: center; }
.botao-titulo-textos b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botao-titulo-textos small { font-size: 12px; color: var(--branco-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botao-titulo-seta { flex: none; width: 22px; height: 22px; opacity: .5; }
.botao-titulo-seta svg { width: 22px; height: 22px; }
.fileira-pequena { flex: .8 1 0; min-height: 44px; max-height: 70px; display: flex; gap: 8px; }
.botao-titulo-pequeno { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; font-size: 14px; font-weight: 700; }
.botao-titulo-pequeno svg { width: 18px; height: 18px; flex: none; }

/* fichas de pôquer (badge_local / badge_online / badge_placar) */
.ficha {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid #FFD54F; display: grid; place-items: center;
}
.ficha.local { background: linear-gradient(180deg, #66BB6A, #2E7D32); }
.ficha.online { background: linear-gradient(180deg, #AB47BC, #6A1B9A); }
.ficha.placar { background: linear-gradient(180deg, #FFA726, #E65100); }
.ficha i { position: absolute; inset: 2.5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .6); }
.ficha::after { content: ''; position: absolute; inset: 6.5px; border-radius: 50%; background: rgba(0, 0, 0, .2); }
.ficha svg { position: relative; z-index: 1; width: 27px; height: 27px; }

/* ============================================================
   POPUPS (DialogoVazo)
   ============================================================ */
.popup-fundo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(12px + var(--topo)) 4vw calc(12px + var(--base));
  background: rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .18s;
}
.popup-fundo.in { opacity: 1; }
.popup {
  width: min(100%, 440px); max-height: 100%; overflow: auto;
  background: var(--fundo); border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px;
  padding: 18px 20px;
  transform: scale(.96); transition: transform .18s;
  overscroll-behavior: contain;
}
.popup-fundo.in .popup { transform: none; }
.popup-titulo { margin: 0; padding-bottom: 12px; font-size: 22px; font-weight: 700; color: var(--verde); text-align: center; line-height: 1.2; }
.popup-texto { margin: 0; padding-bottom: 16px; font-size: 15px; color: var(--texto-suave); text-align: center; white-space: pre-line; }
.popup-corpo { display: flex; flex-direction: column; }
.popup > .linha-botoes, .popup > .coluna-botoes { margin-top: 16px; }
.popup-texto + .linha-botoes, .popup-texto + .coluna-botoes { margin-top: 0; }
.coluna-botoes { display: grid; gap: 8px; }
.linha-botoes { display: flex; gap: 8px; }
.linha-botoes > * { flex: 1 1 0; min-width: 0; }

/* botão chapado e arredondado */
.btn-vazo {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2;
  background: var(--cinza); transition: opacity .1s;
}
.btn-vazo:active { opacity: .7; }
.btn-vazo:disabled { opacity: .45; cursor: default; }
.btn-vazo.verde { background: var(--verde); }
.btn-vazo.vermelho { background: var(--vermelho); }
.btn-vazo.cinza { background: var(--cinza); }
.btn-vazo.azul { background: var(--azul); }
.btn-vazo.roxo { background: var(--roxo); }
.btn-vazo.dourado { background: var(--dourado); color: #3E2A00; }
.btn-vazo.grande { width: 100%; min-height: 58px; font-size: 18px; }
.btn-vazo.pequeno { padding: 10px 6px; font-size: 13px; }

.rotulo-secao { padding: 0 0 6px 2px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--texto-suave); letter-spacing: .02em; }
.popup-corpo > .rotulo-secao:first-child { margin-top: 0; }
.nota { margin-top: 6px; font-size: 12px; color: var(--texto-suave); text-align: center; }
.nota.centro { text-align: center; margin-top: 8px; }
.centro { text-align: center; }

/* entradas */
.campo {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: var(--cartao); border: 1px solid #444; color: #fff;
  font-size: 16px; outline: none;
}
.campo:focus { border-color: var(--verde); }
textarea.campo { resize: none; }
.popup-corpo .campo + .campo { margin-top: 10px; }

/* linha de escolha: selo redondo + título + subtítulo + seta */
.lista-opcoes { display: grid; gap: 10px; }
.linha-opcao, .opcao-lista {
  width: 100%; display: flex; align-items: center; text-align: left;
  background: var(--cartao); border-radius: 14px; padding: 12px;
  transition: opacity .1s;
}
.linha-opcao:active, .opcao-lista:active, .pref-item:active, .item-visual:active, .chip:active { opacity: .7; }
.selo-redondo { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.selo-redondo svg { width: 22px; height: 22px; }
.linha-opcao-textos { flex: 1; min-width: 0; margin-left: 12px; display: flex; flex-direction: column; }
.linha-opcao-textos b { font-size: 17px; }
.linha-opcao-textos small { font-size: 12px; color: var(--texto-suave); }
.linha-opcao-seta { flex: none; margin-left: 6px; font-size: 26px; line-height: 1; color: var(--texto-suave); }
.opcao-lista { flex-direction: column; align-items: stretch; padding: 14px 16px; border: 2px solid transparent; font-size: 16px; font-weight: 700; }
.opcao-lista b { font-size: 16px; }
.opcao-lista small { font-size: 13px; color: var(--texto-suave); font-weight: 400; }
.opcao-lista.marcada { border-color: var(--verde); }
.exemplo-cartas { display: flex; gap: 6px; margin-top: 10px; }
.mini-carta { width: 46px; aspect-ratio: 1 / 1.4; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

/* jogar com bots: chips, vidas */
.linha-chips { display: flex; gap: 6px; }
.chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 12px; background: var(--cartao); }
.chip b { font-size: 20px; line-height: 1.1; }
.chip small { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.chip.marcado { background: var(--verde); }
.chip.marcado small { color: rgba(255, 255, 255, .85); }
.linha-vidas { display: flex; align-items: center; justify-content: center; gap: 18px; }
.botao-redondo { width: 46px; height: 46px; border-radius: 50%; background: var(--aba-inativa); font-size: 24px; font-weight: 700; display: grid; place-items: center; }
.botao-redondo:active { opacity: .7; }
.coluna-vidas { min-width: 110px; text-align: center; }
.valor-vidas { font-size: 26px; font-weight: 700; }
.legenda-vidas { font-size: 12px; color: var(--texto-suave); }
.xp-texto { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--dourado); text-align: center; }

/* grades de fundos */
.popup-grade { width: min(100%, 440px); }
.grade-visuais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item-visual { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: var(--cartao); border: 2px solid transparent; }
.item-visual.marcado { border-color: var(--verde); }
.item-visual span { font-size: 12px; font-weight: 700; text-align: center; }
.item-visual small { font-size: 10px; color: #FFD54F; text-align: center; line-height: 1.2; }
.mini-verso { width: 58%; aspect-ratio: 1 / 1.4; object-fit: cover; border-radius: 6px; background: #fff; }
.mini-mesa { display: block; width: 100%; aspect-ratio: 1.4; border-radius: 8px; }
.item-visual.bloqueado .mini-verso, .item-visual.bloqueado .mini-mesa { opacity: .4; filter: grayscale(.5); }

/* perfil */
.perfil { align-items: center; text-align: center; }
.perfil .avatar-perfil { margin: 0 auto 6px; }
.perfil-nome { font-size: 22px; font-weight: 700; }
.perfil-id { font-size: 13px; color: var(--texto-suave); font-family: "Roboto Mono", ui-monospace, monospace; }
.perfil-conta { margin-top: 2px; font-size: 13px; color: var(--texto-suave); }
.perfil-apoio { margin-top: 6px; padding: 4px 12px; border-radius: 12px; background: rgba(255, 215, 0, .14); color: var(--dourado); font-size: 13px; font-weight: 700; }
.perfil-grade { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.perfil-grade div { background: var(--cartao); border-radius: 12px; padding: 8px 2px; display: flex; flex-direction: column; }
.perfil-grade b { font-size: 18px; }
.perfil-grade small { font-size: 11px; color: var(--texto-suave); }
.barra-xp { width: 100%; height: 8px; margin-top: 14px; border-radius: 8px; background: var(--aba-inativa); overflow: hidden; }
.barra-xp i { display: block; height: 100%; background: var(--verde); border-radius: 8px; }

/* avisos curtos (Toast) */
.avisos { position: fixed; left: 50%; bottom: calc(28px + var(--base)); transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: max-content; max-width: min(92vw, 420px); pointer-events: none; }
.aviso {
  padding: 10px 16px; border-radius: 22px; background: rgba(50, 50, 50, .95); color: #fff;
  font-size: 14px; text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.aviso.in { opacity: 1; transform: none; }

/* ============================================================
   OPÇÕES, AJUDA E SOBRE (opcoes.xml + pref_item_vazo.xml)
   ============================================================ */
.tela-info { background: var(--fundo); }
.barra-topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px; background: #1B1B1B; margin-top: calc(-1 * var(--topo)); padding-top: var(--topo); }
.barra-topo h1 { margin: 0; font-size: 20px; font-weight: 700; }
.botao-voltar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.botao-voltar svg { width: 24px; height: 24px; }
.botao-voltar:active { background: rgba(255, 255, 255, .15); }
.info-corpo { width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 16px 28px; }
.pref-categoria { padding: 18px 4px 8px; font-size: 13px; font-weight: 700; color: var(--verde); }
.pref-item { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 14px 16px; border-radius: 14px; background: var(--cartao); text-align: left; }
.pref-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pref-textos b { font-size: 16px; font-weight: 400; }
.pref-textos small { font-size: 13px; color: var(--texto-suave); }
.switch { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: #5A5A5A; transition: background .15s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ECECEC; transition: transform .15s; }
.switch.ligado { background: var(--verde); }
.switch.ligado i { transform: translateX(20px); background: #fff; }
.info-cartao { margin-top: 12px; padding: 16px; border-radius: 14px; background: var(--cartao); }
.info-cartao h2 { margin: 0 0 8px; font-size: 17px; color: var(--verde); }
.info-cartao p { margin: 0 0 8px; font-size: 14px; color: #DDD; }
.info-cartao p:last-child { margin-bottom: 0; }
.info-cartao.centro { text-align: center; }
.logo-sobre { width: 170px; margin: 0 auto 10px; display: block; }

/* ============================================================
   SALAS ONLINE (lista_salas.xml, sala_online.xml, VisualSala)
   ============================================================ */
.tela-sala { height: 100dvh; width: 100%; max-width: 640px; margin: 0 auto; }
.cabecalho-sala { flex: none; display: flex; align-items: center; gap: 6px; margin: 8px 16px 0; padding: 8px 10px; }
.cabecalho-sala .botao-voltar { width: 44px; height: 44px; }
.cabecalho-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecalho-textos b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho-textos small { font-size: 12px; color: var(--branco-70); }
.sala-rolagem { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
.sala-rodape { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 4px 16px calc(12px + var(--base)); }
.mensagem-sala {
  padding: 8px 12px; border-radius: 20px; text-align: center; white-space: pre-line;
  background: var(--pilula); border: 1px solid var(--pilula-borda); font-size: 13px;
}
.lista-salas, .lugares, .lista-ranking { display: grid; gap: 8px; }

.cartao-sala { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
.cartao-sala:active { filter: brightness(1.3); }
.cartao-sala .selo-redondo { width: 44px; height: 44px; }
.cartao-sala-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cartao-sala-textos b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-sala-textos small { font-size: 12px; color: var(--branco-70); }
.cartao-sala-textos em { font-size: 12px; font-style: normal; font-weight: 700; }
.vagas { flex: none; display: flex; flex-direction: column; align-items: center; }
.vagas b { font-size: 16px; }
.vagas small { font-size: 11px; color: var(--branco-70); }
.cartao-sala .linha-opcao-seta { color: rgba(255, 255, 255, .5); }

.verde { color: #69F0AE; }
.ambar { color: var(--ambar); }
.suave { color: var(--branco-70); }
.apagado { color: rgba(255, 255, 255, .47); }
.btn-vazo.verde, .btn-vazo.ambar { color: #fff; }

.linha-jogador { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 8px 10px; border-radius: 16px; cursor: pointer; }
.linha-jogador.eu { border-color: rgba(255, 215, 0, .55); }
.linha-jogador .avatar-perfil { flex: none; }
.linha-jogador-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-jogador-textos b { font-size: 16px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-jogador-textos small { font-size: 12px; }
.linha-jogador.livre { background: rgba(7, 36, 18, .2); border: 1.5px dashed rgba(255, 255, 255, .4); }
.linha-jogador.fechada { background: rgba(0, 0, 0, .25); border-color: transparent; cursor: default; }
.disco-livre, .disco-fechado { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.disco-livre { background: rgba(255, 255, 255, .13); border: 1.5px dashed rgba(255, 255, 255, .4); font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.disco-fechado { background: rgba(0, 0, 0, .2); font-size: 20px; }
.linha-jogador.livre b { color: rgba(255, 255, 255, .8); }
.linha-jogador.fechada b { color: rgba(255, 255, 255, .6); }
.selo-sala { flex: none; padding: 5px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.selo-sala.dono { color: var(--dourado); background: rgba(255, 215, 0, .2); border-color: var(--dourado); }
.selo-sala.pronto { color: #fff; background: #2E7D32; }
.selo-sala.aguardando { color: var(--ambar); background: rgba(255, 193, 7, .15); border-color: rgba(255, 193, 7, .4); }
.selo-sala.acao { color: #fff; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.expulsar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(211, 47, 47, .9); font-weight: 700; display: grid; place-items: center; }
.selo-apoio { display: inline-block; vertical-align: middle; flex: none; }
.chat p .selo-apoio { margin-right: 3px; vertical-align: -2px; }

.cartao-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; text-align: center; border-style: dashed; }
.cartao-vazio b { font-size: 16px; }
.cartao-vazio small { font-size: 13px; color: var(--branco-70); }
.cartao-vazio .btn-vazo { margin-top: 10px; min-width: 180px; }
.vazio-icone { font-size: 40px; line-height: 1; }

/* placares */
.abas { flex: none; display: flex; gap: 8px; margin: 10px 16px 0; }
.aba { flex: 1 1 0; padding: 10px 8px; border-radius: 20px; background: var(--pilula); border: 1px solid var(--pilula-borda); font-size: 13px; font-weight: 700; }
.aba.ativa { background: var(--verde); border-color: var(--verde); }
.posicao { flex: none; width: 30px; text-align: center; font-size: 18px; font-weight: 700; }
.valor-ranking { flex: none; font-size: 15px; font-weight: 700; color: #FFD54F; }
.linha-jogador.eu .posicao { color: var(--dourado); }

/* chat */
.popup-chat { display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-lista { height: min(45dvh, 320px); overflow-y: auto; padding: 10px 12px; border-radius: 12px; background: var(--cartao); font-size: 14px; }
.chat-lista p { margin: 0 0 6px; word-wrap: break-word; }
.chat-lista .nota { text-align: center; margin: 30% 0 0; }
.emojis-rapidos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.emoji-rapido { width: 38px; height: 38px; border-radius: 10px; background: var(--aba-inativa); font-size: 20px; }
.chat-envio { display: flex; gap: 8px; }
.chat-envio .campo { flex: 1; }
.chat-envio .btn-vazo { flex: none; padding: 12px 16px; }

/* faixa de conexão perdida */
.faixa-conexao {
  position: fixed; left: 0; right: 0; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--topo)) 14px 8px;
  background: rgba(183, 28, 28, .95); font-size: 13px; font-weight: 700;
}
.faixa-conexao span { flex: 1; }
.faixa-conexao button { padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-weight: 700; }

/* ============================================================
   MESA (canvas) e caixa do palpite (truco.xml)
   ============================================================ */
.tela-mesa { position: fixed; inset: 0; padding: 0; min-height: 0; overflow: hidden; background: #1B8E3C; }
/* tela deitada (computador, celular ou iPad de lado): a mesa ocupa a tela toda, no layout deitado (LayoutMesaDeitada);
   só numa tela larguíssima (ultrawide) ela fica no meio, para as cartas não ficarem longe demais umas das outras */
@media (min-aspect-ratio: 22/9) {
  .tela-mesa {
    width: calc(100vh * 22 / 9);
    width: calc(100dvh * 22 / 9);
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 60px rgba(0, 0, 0, .55);
  }
}
.mesa-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.caixa-palpite {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px; background: rgba(0, 0, 0, .9); border-radius: 4px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.caixa-palpite.arrastando { cursor: grabbing; }
.palpite-titulo { margin-bottom: 6px; font-size: 14px; font-weight: 700; text-align: center; }
.palpite-linha { display: flex; align-items: center; justify-content: center; }
.btn-app { border-radius: 4px; background: #D6D7D7; color: #1E1E1E; font-weight: 700; box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.btn-app:active { background: #BDBDBD; }
.palpite-mm { width: 44px; height: 44px; font-size: 20px; }
.palpite-valor { width: 40px; height: 44px; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.palpite-ok { height: 40px; margin-top: 8px; padding: 0 14px; font-size: 14px; text-transform: uppercase; }

/* ============================================================
   FIM DE PARTIDA (TelaDeFim)
   ============================================================ */
.fim-fundo { z-index: 60; }
.tela-fim { display: flex; flex-direction: column; align-items: stretch; }
.fim-selo {
  align-self: center; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; font-size: 38px;
  background: #2D2608; border: 3px solid var(--dourado);
}
.fim-selo.empate { background: #2E2E2E; border-color: var(--texto-suave); }
.fim-legenda { padding: 10px 0 2px; font-size: 12px; font-weight: 700; color: var(--texto-suave); text-align: center; letter-spacing: .15em; }
.fim-principal { padding-bottom: 14px; font-size: 26px; font-weight: 700; color: var(--dourado); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fim-principal.branco { color: #fff; }
.fim-empatados { margin-top: -10px; padding-bottom: 14px; font-size: 13px; color: var(--texto-suave); text-align: center; }
.fim-secao { margin-bottom: 6px; }
.fim-lista { display: grid; gap: 6px; }
.fim-linha { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; background: var(--cartao); }
.fim-icone { width: 26px; text-align: center; font-size: 16px; }
.fim-nome { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fim-estado { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.fim-estado.verde { color: var(--verde); }
.fim-estado.vermelho { color: var(--vermelho); }
.fim-estado.suave { color: var(--texto-suave); }
.fim-aviso { margin: 4px 0 8px; font-size: 14px; color: #FFE08A; text-align: center; }
.tela-fim .btn-vazo { width: 100%; margin-top: 8px; }
.tela-fim .linha-botoes .btn-vazo { margin-top: 0; }

/* telas baixas (celular deitado): tela inicial mais compacta */
@media (max-height: 560px) {
  .tela-titulo { min-height: 100dvh; }
  .zona-logo { flex-basis: 0; }
  .build { display: none; }
}
@media (min-width: 700px) {
  .tela-titulo { max-width: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   1.4.1 — perfil (PerfilDialog), escolhas Premium, amigos, menu da partida, anúncios
   ============================================================ */
.dourado { color: var(--dourado); }
.popup-perfil { width: min(100%, 460px); }
.perfil-app { gap: 0; }
.perfil-cabecalho { display: flex; align-items: center; gap: 14px; text-align: left; }
.perfil-cabecalho .avatar-perfil { flex: none; }
.perfil-cabecalho-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.perfil-cabecalho .perfil-nome { font-size: 24px; color: var(--verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-nivel { font-size: 14px; font-weight: 700; color: var(--dourado); }
.perfil-apoio-linha { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.perfil-id { text-align: left; padding: 2px 0; }
.perfil-sincronia { margin-top: 4px; font-size: 12px; color: #A5D6A7; }
.perfil-sincronia.alerta { color: #FFD54F; }
.perfil-mensagem { margin: 18px 0 4px; font-size: 14px; color: var(--texto-suave); text-align: center; }
.perfil-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.perfil-tiles div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--cartao); }
.perfil-tiles b { font-size: 22px; line-height: 1.15; }
.perfil-tiles small { font-size: 10px; color: var(--texto-suave); }
.perfil-abas { display: flex; gap: 6px; margin-top: 14px; }
.perfil-aba { flex: 1 1 0; padding: 10px 0; border-radius: 10px; background: var(--aba-inativa); color: var(--texto-suave); font-size: 12px; font-weight: 700; }
.perfil-aba.ativa { background: var(--verde); color: #fff; }
.perfil-modo { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--cartao); text-align: center; }
.perfil-modo > b { font-size: 14px; }
.perfil-mesas { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
.perfil-mesas div { display: flex; flex-direction: column; align-items: center; }
.perfil-mesas b { font-size: 16px; color: var(--texto-suave); }
.perfil-mesas b.dourado { color: var(--dourado); }
.perfil-mesas small { font-size: 10px; color: var(--texto-suave); }

/* seções recolhíveis (conquistas e reações) */
.secao-perfil { margin-top: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.secao-perfil > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--texto-suave); border-radius: 12px; }
.secao-perfil > summary::-webkit-details-marker { display: none; }
.secao-perfil > summary:active { background: rgba(255, 255, 255, .06); }
.secao-seta { font-style: normal; font-size: 20px; line-height: 1; transition: transform .15s; }
.secao-perfil[open] .secao-seta { transform: rotate(90deg); }
.secao-conteudo { padding: 0 8px 10px; }
.grade-conquistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.conquista { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--cartao); border: 1.5px solid transparent; opacity: .4; text-align: center; }
.conquista.tem { opacity: 1; border-color: var(--dourado); }
.conquista-emoji { font-size: 24px; line-height: 1.1; }
.conquista b { font-size: 11px; line-height: 1.15; }
.conquista small { font-size: 9px; line-height: 1.2; color: var(--texto-suave); }
.linha-reacoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reacao { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: var(--cartao); border: 1.5px solid transparent; }
button.reacao:active { transform: scale(.96); }
.reacao-emoji { font-size: 34px; line-height: 1.15; }
.reacao-emoji.apagado { filter: grayscale(.8); opacity: .5; }
.reacao b { font-size: 18px; }
.reacao-rotulo { font-size: 12px; font-weight: 700; }
.reacao small { font-size: 10px; color: var(--texto-suave); }
.reacao small.verde { color: var(--verde); font-weight: 700; }

/* escolhas Premium (efeito da carta / moldura da foto) */
.popup-escolhas { width: min(100%, 460px); }
.lista-escolhas { display: grid; gap: 8px; margin-top: 4px; }
.linha-escolha { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--cartao); border: 2px solid transparent; text-align: left; }
.linha-escolha.em-uso { border-color: var(--verde); }
.linha-escolha.bloqueada .avatar-perfil { opacity: .45; }
.linha-escolha:active { opacity: .75; }
.linha-escolha-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-escolha-textos b { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.linha-escolha-textos small { font-size: 12px; color: var(--texto-suave); }
.previa-efeito { flex: none; }
.popup-texto.mini { font-size: 13px; padding-bottom: 10px; }

/* amigos */
.bolinha-amigos { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--verde); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #16793A; }
.pilula-perfil { position: relative; }
.meu-id { font-size: 34px; font-weight: 700; letter-spacing: .08em; color: var(--dourado); }
.linha-campo { display: flex; gap: 8px; }
.linha-campo .campo { flex: 1; min-width: 0; text-transform: uppercase; }
.linha-campo .btn-vazo { flex: none; }
.mensagem-amigos { margin-top: 8px; font-size: 13px; color: var(--texto-suave); }
.mensagem-amigos.erro { color: #FF8A80; }
.mensagem-amigos.ok { color: var(--verde); }
.linha-offline { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; }
.linha-offline-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-offline-textos b { font-size: 16px; }
.linha-offline-textos small { font-size: 12px; color: var(--texto-suave); }
.lista-amigos { display: grid; gap: 8px; margin-top: 16px; }
.lista-amigos.no-popup { margin-top: 0; }
.lista-amigos > .rotulo-secao { margin-top: 6px; padding-bottom: 0; }
.rotulo-secao.verde { color: var(--verde); }
.alerta-amigos { padding: 8px 10px; border-radius: 10px; background: rgba(255, 179, 0, .13); color: var(--ambar); font-size: 12px; }
.linha-amigo { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--cartao); text-align: left; }
.linha-amigo.apagada { opacity: .75; }
button.linha-amigo:active { opacity: .7; }
.linha-amigo .avatar-perfil { flex: none; }
.linha-amigo-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-amigo-topo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.linha-amigo-topo b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-amigo-topo small { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.status-amigo { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-amigo.offline { color: #8A8A8A; }
.status-amigo.online { color: var(--verde); }
.status-amigo.sala { color: var(--ambar); }
.status-amigo.jogando { color: #EF5350; }
.linha-amigo .btn-vazo { flex: none; min-width: 92px; }
.perfil-amigo { flex-direction: row; align-items: center; gap: 12px; }
.perfil-amigo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sala-do-amigo { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--cartao); display: flex; flex-direction: column; }
.sala-do-amigo small { font-size: 12px; color: var(--texto-suave); }
.linha-confirma-amigo { flex-direction: row; align-items: center; gap: 12px; }
.linha-confirma-amigo > div { display: flex; flex-direction: column; }
.linha-confirma-amigo small { color: var(--dourado); font-weight: 700; }
.convite-sala { margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: var(--cartao); display: flex; flex-direction: column; align-items: center; }
.convite-sala small { color: var(--texto-suave); }
.falando { color: var(--verde); }
.voce { font-size: 12px; font-weight: 400; color: var(--texto-suave); }
.linha-ranking { border: 1.5px solid transparent; }
.valor-ranking { display: flex; flex-direction: column; align-items: flex-end; }
.valor-ranking small { font-size: 11px; }
.popup-denuncia .lista-opcoes { gap: 6px; margin-bottom: 10px; }
.popup-denuncia .opcao-lista { padding: 10px 12px; font-size: 14px; font-weight: 400; }

/* menu da partida (MenuDaPartida) */
.popup-menu-partida { width: min(100%, 420px); }
.lista-liga { display: grid; gap: 8px; }
.linha-liga { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--cartao); text-align: left; }
.linha-liga:active { opacity: .75; }
.linha-liga-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-liga-textos b { font-size: 16px; }
.linha-liga-textos small { font-size: 12px; color: var(--texto-suave); }
.pilula-liga { flex: none; min-width: 76px; padding: 5px 10px; border-radius: 20px; background: var(--cinza); font-size: 12px; text-align: center; }
.pilula-liga.ligado { background: var(--verde); }

/* anúncio do rodapé da tela inicial */
.anuncio-rodape { width: 100%; max-width: 728px; margin: 14px auto 0; min-height: 50px; padding-bottom: var(--base); }
.tela-titulo .anuncio-rodape { flex: none; margin: 6px auto calc(4px + var(--base)); }
.topo10 { margin-top: 10px; }