/* ============================================================
 * TRUCO DOS BÃO — CAMADA DE INTERFACE (v2.1)
 *
 * Este arquivo é carregado DEPOIS do mesa.css e trabalha por
 * cima dele. Foi escrito separado de propósito: o mesa.css tem
 * 1.200 linhas com regras duplicadas e 19 !important, e mexer
 * lá dentro é caro e arriscado. Aqui fica tudo que é novo —
 * tokens, responsividade, micro-interações e identidade —
 * num arquivo que dá para ler inteiro.
 *
 * A migração do mesa.css para estes tokens pode ser feita aos
 * poucos, sem parar o jogo.
 * ============================================================ */


/* ============================================================
   1. TOKENS

   Antes as cores estavam espalhadas como literais em dezenas
   de regras. Trocar o verde da mesa exigia caçar #0f6d2f,
   #5aa06a e #1e7d32 em pontos diferentes do arquivo.
   ============================================================ */

:root {

    /* --- Marca --- */
    --tm-vermelho:        #cc0000;
    --tm-vermelho-escuro: #a30000;
    --tm-amarelo:         #ffaa00;

    /* --- Mesa --- */
    --tm-feltro:          #0f6d2f;
    --tm-feltro-claro:    #17853c;
    --tm-feltro-escuro:   #0a4d21;
    --tm-borda-mesa:      #6b4423;

    /* --- Estados --- */
    --tm-ok:              #1f9d3d;
    --tm-atencao:         #f1c40f;
    --tm-perigo:          #c0392b;
    --tm-neutro:          #7f8c8d;

    /* --- Cartas --- */
    --tm-carta-fundo:     #fdfdfb;
    --tm-carta-borda:     #d8d5cc;
    --tm-carta-preto:     #1a1a1a;
    --tm-carta-vermelho:  #cf2020;

    /* --- Superfícies --- */
    --tm-superficie:      #ffffff;
    --tm-fundo:           #f2f2f2;
    --tm-texto:           #2b2b2b;
    --tm-texto-fraco:     #6d6d6d;

    /* --- Profundidade --- */
    --tm-sombra-1: 0 1px 3px rgba(0,0,0,.12);
    --tm-sombra-2: 0 4px 12px rgba(0,0,0,.15);
    --tm-sombra-3: 0 10px 30px rgba(0,0,0,.25);

    /* --- Ritmo --- */
    --tm-raio:      12px;
    --tm-raio-g:    20px;
    --tm-transicao: .18s cubic-bezier(.4,0,.2,1);

    /* --- ESCALA RESPONSIVA ---
       O jogo inteiro era travado em pixels: mesa 260x260,
       carta 65x90, mão 250 de largura, zero media queries.
       Num celular de 360px ficava apertado, num de 430 sobrava
       vazio, e no desktop virava um filete no meio da tela.

       Agora tudo deriva desta variável. 420px é a largura de
       referência do desenho original. */
    --tm-escala: 1;
    --tm-largura-base: 420px;
}


/* ============================================================
   2. RESPONSIVIDADE
   ============================================================ */

.tm-container,
.tm-lobby-container,
.tm-sala-container,
.tm-perfil-container,
.tm-ranking-container {
    --tm-escala: min(1, calc(100vw / var(--tm-largura-base)));
    width: 100%;

    /* O 460 fica como reserva, para o caso de esta folha ser
       lida sem o largura.css — mas o valor de verdade é o da
       variável, que vale no site inteiro. */
    max-width: var(--tm-largura, 460px);
    margin-inline: auto;
    box-sizing: border-box;
}

/* --- Celular estreito (até 380px) --- */
@media (max-width: 380px) {

    .tm-mesa-card {
        width:  calc(260px * var(--tm-escala)) !important;
        height: calc(260px * var(--tm-escala)) !important;
        margin: calc(75px * var(--tm-escala)) auto calc(65px * var(--tm-escala)) !important;
    }

    .tm-carta {
        width:  calc(65px * var(--tm-escala)) !important;
        height: calc(90px * var(--tm-escala)) !important;
    }

    .tm-mao {
        width: auto !important;
        max-width: 96vw;
        gap: calc(15px * var(--tm-escala)) !important;
        margin-top: calc(80px * var(--tm-escala)) !important;
    }

    .tm-pos img { width: 50px !important; height: 50px !important; }

    .tm-acoes { gap: 8px; }
    .tm-btn-acao { padding: 10px 12px; font-size: 13px; }
}

/* --- Celular largo: aproveita a folga --- */
@media (min-width: 415px) {

    .tm-mesa-card {
        width:  290px;
        height: 290px;
    }

    .tm-carta { width: 70px; height: 97px; }
}

/* --- Tablet e desktop ---
   Jogo de carta funciona bem em retrato mesmo em tela grande.
   Em vez de esticar a coluna, ancoramos a mesa maior e
   centralizada, com respiro em volta. */
@media (min-width: 768px) {

    /* A largura da coluna saiu daqui.

       Eram 540px na mesa, 620 no lobby, 520 na sala e 460 no
       perfil — cada tela com o seu número, cada um nascido num
       dia diferente. No celular ninguém via, porque a tela é
       mais estreita que todos eles. No computador a coluna
       pulava de lugar a cada aba. Agora quem manda é o
       --tm-largura, no largura.css. */

    .tm-mesa-card {
        width:  360px;
        height: 360px;
        margin: 110px auto 100px;
    }

    .tm-carta { width: 82px; height: 114px; font-size: 15px; }

    .tm-mao { width: auto; gap: 18px; }

    .tm-pos img { width: 68px !important; height: 68px !important; }

    .tm-btn-acao { padding: 14px 26px; font-size: 16px; }
}

/* --- Altura curta (celular deitado) --- */
@media (max-height: 620px) and (orientation: landscape) {

    .tm-mesa-card {
        width: 200px;
        height: 200px;
        margin: 45px auto 35px;
    }

    .tm-carta { width: 52px; height: 72px; font-size: 11px; }
    .tm-mao { margin-top: 40px; min-height: 80px; }
    .tm-footer { display: none; }
}


/* ============================================================
   3. A MESA — profundidade e textura

   O feltro era uma cor chapada. Um gradiente radial simula a
   luz caindo no centro e um padrão sutil dá trama ao tecido,
   sem custar nenhum arquivo de imagem.
   ============================================================ */

.tm-mesa-card {
    background-image:
        radial-gradient(ellipse at 50% 38%,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,0)   58%),
        repeating-linear-gradient(45deg,
            rgba(0,0,0,.030) 0px, rgba(0,0,0,.030) 1px,
            transparent      1px, transparent      3px),
        repeating-linear-gradient(-45deg,
            rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px,
            transparent            1px, transparent            3px);

    box-shadow:
        inset 0 0 60px rgba(0,0,0,.34),
        inset 0 2px 0 rgba(255,255,255,.10),
        var(--tm-sombra-3);

    border: 3px solid rgba(0,0,0,.22);
    transition: background-color var(--tm-transicao);
}

/* Quando a sala define uma imagem de fundo, ela entra por
   style inline; a textura acima fica por cima, dando o mesmo
   acabamento sem esconder a arte. */
.tm-mesa-card[style*="background-image"] {
    background-blend-mode: overlay, normal, normal;
}

.tm-mesa::before {
    border-color: rgba(255,255,255,.22);
    box-shadow: inset 0 0 20px rgba(0,0,0,.15);
}


/* ============================================================
   4. CARTAS

   Os naipes eram caracteres de texto, que mudam de desenho
   conforme a fonte do sistema. Agora são SVG (ver mesa.js),
   e aqui vem o acabamento do papel.
   ============================================================ */

.tm-carta {
    background: linear-gradient(160deg, #ffffff 0%, var(--tm-carta-fundo) 55%, #f4f2ec 100%);
    border: 1px solid var(--tm-carta-borda);
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.18),
        0 3px 8px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
    color: var(--tm-carta-preto);
    font-weight: 700;
    transition:
        transform var(--tm-transicao),
        box-shadow var(--tm-transicao),
        filter var(--tm-transicao);
}

.tm-carta.tm-vermelho { color: var(--tm-carta-vermelho); }

.tm-carta .tm-naipe-svg {
    width: 42%;
    height: auto;
    fill: currentColor;
    display: block;
    margin: auto;
}

.tm-carta .tm-naipe-mini {
    width: 9px;
    height: 9px;
    fill: currentColor;
    display: block;
}

.tm-carta .tm-top,
.tm-carta .tm-bottom {
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
    font-size: .78em;
    letter-spacing: -.02em;
}

/* --- Verso da carta: identidade da marca ---
   Era um retângulo liso. É a peça mais vista do jogo. */
/* O VERSO DA CARTA — DEFINIÇÃO ÚNICA

   A carta virada precisa ser lida como CARTA em cima de qualquer
   feltro. A cor do feltro é escolhida mesa a mesa no painel: tem
   mesa verde, tem mesa azul, tem mesa preta. Um verso que confia
   no contraste com o fundo funciona numa mesa e some na outra —
   foi o que aconteceu com a mesa escura.

   A solução é a mesma do baralho de verdade: MOLDURA CLARA. O
   baralho de plástico tem aquela margem branca em volta do
   desenho justamente para a carta ter silhueta em cima do pano,
   seja qual for a cor do pano. Aqui a moldura é um anel branco
   por fora (box-shadow, que não come tamanho como um border
   comeria) mais a sombra projetada, que descola a carta do
   feltro.

   Antes esta regra perdia para três blocos !important no
   mesa.css. Eles foram removidos; esta é a única. */
.tm-carta-virada {
    background:
        repeating-linear-gradient(45deg,
            var(--tm-vermelho-escuro) 0px, var(--tm-vermelho-escuro) 4px,
            var(--tm-vermelho)        4px, var(--tm-vermelho)        8px);

    /* Moldura branca + sombra: silhueta em qualquer feltro. */
    border: 1px solid rgba(0,0,0,.35);
    box-shadow:
        0 0 0 2px #f3f3f3,
        0 3px 8px rgba(0,0,0,.5);

    position: relative;
    overflow: hidden;
}

.tm-carta-virada::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,0)   62%);
}


/* ============================================================
   5. MICRO-INTERAÇÕES

   Antes, clicar numa carta só fazia ela voar. Faltava tudo
   que existe entre a intenção e o resultado.
   ============================================================ */

/* --- Cartas jogáveis: convidam o toque --- */
.tm-mao .tm-carta.clicavel {
    cursor: pointer;
    animation: tmCartaEntra .28s cubic-bezier(.2,.9,.3,1.2) both;
}

.tm-mao .tm-carta.clicavel:hover,
.tm-mao .tm-carta.clicavel:focus-visible {
    transform: translateY(-14px) scale(1.04);
    box-shadow:
        0 8px 18px rgba(0,0,0,.28),
        0 0 0 2px var(--tm-atencao);
    z-index: 5;
}

.tm-mao .tm-carta.clicavel:active {
    transform: translateY(-6px) scale(.99);
    transition-duration: .06s;
}

/* --- Cartas bloqueadas: dizem que não é a vez --- */
.tm-mao .tm-carta.disabled {
    filter: grayscale(.45) brightness(.92);
    opacity: .7;
    cursor: default;
}

/* --- Sua vez: a mão inteira acorda --- */
.tm-mao.minha-vez {
    animation: tmPulsoSuave 2.4s ease-in-out infinite;
}

@keyframes tmPulsoSuave {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(241,196,15,0)); }
    50%      { filter: drop-shadow(0 0 10px rgba(241,196,15,.45)); }
}

@keyframes tmCartaEntra {
    from { transform: translateY(24px) rotate(4deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* --- Botões com resposta física --- */
.tm-btn-acao,
.tm-btn,
.tm-btn-sala,
.tm-btn-primary,
.tm-entrar {
    transition:
        transform .08s ease,
        filter var(--tm-transicao),
        box-shadow var(--tm-transicao),
        opacity var(--tm-transicao);
}

.tm-btn-acao:not(:disabled):hover,
.tm-btn-sala:not(:disabled):hover,
.tm-btn-primary:not(:disabled):hover,
.tm-entrar:not(:disabled):hover {
    filter: brightness(1.08);
    box-shadow: var(--tm-sombra-2);
}

.tm-btn-acao:not(:disabled):active,
.tm-btn-sala:not(:disabled):active,
.tm-btn-primary:not(:disabled):active,
.tm-entrar:not(:disabled):active {
    transform: translateY(2px) scale(.985);
}

.tm-btn-acao:disabled { cursor: not-allowed; }

/* --- Foco visível (não existia nenhum) --- */
:focus-visible {
    outline: 3px solid var(--tm-atencao);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Jogador da vez: destaque real --- */
.tm-player-wrapper.ativo {
    animation: tmVezPulso 1.9s ease-in-out infinite;
}

@keyframes tmVezPulso {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.06); }
}

.tm-player-wrapper.ativo img {
    box-shadow: 0 0 0 3px var(--tm-ok), 0 0 16px rgba(31,157,61,.6);
}

/* --- Placar reage à pontuação --- */
.tm-pontos {
    transition: transform .3s cubic-bezier(.2,.9,.3,1.4), color .3s;
}

.tm-pontos.tm-marcou {
    animation: tmPontuou .6s cubic-bezier(.2,.9,.3,1.4);
    color: var(--tm-ok);
}

@keyframes tmPontuou {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1);    }
}


/* ============================================================
   6. ESTADOS DE CONEXÃO

   O jogo não avisava nada. Quando o tempo real caía, ele
   silenciosamente passava a atualizar de 4 em 4 segundos e o
   jogador só sentia que tinha travado.
   ============================================================ */

.tm-conexao {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    transform: translateY(-100%);
    transition: transform .3s ease;
}

.tm-conexao.visivel { transform: none; }

.tm-conexao.reconectando { background: var(--tm-atencao); color: #4a3800; }
.tm-conexao.offline      { background: var(--tm-perigo); }
.tm-conexao.online       { background: var(--tm-ok); }

.tm-conexao .tm-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tmGira .7s linear infinite;
    vertical-align: -2px;
}

@keyframes tmGira { to { transform: rotate(360deg); } }


/* ============================================================
   7. CARREGAMENTO

   Entre abrir a mesa e as cartas aparecerem havia um vazio
   sem explicação nenhuma.
   ============================================================ */

.tm-carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    color: var(--tm-texto-fraco);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.tm-carregando .tm-cartas-loading {
    display: flex;
    gap: 8px;
}

.tm-carregando .tm-cartas-loading span {
    width: 26px;
    height: 36px;
    border-radius: 5px;
    background: linear-gradient(45deg, var(--tm-vermelho-escuro), var(--tm-vermelho));
    animation: tmSalta 1s ease-in-out infinite;
}

.tm-carregando .tm-cartas-loading span:nth-child(2) { animation-delay: .12s; }
.tm-carregando .tm-cartas-loading span:nth-child(3) { animation-delay: .24s; }

@keyframes tmSalta {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}


/* ============================================================
   8. BOTÃO DE SOM
   ============================================================ */

.tm-som-toggle {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 99990;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.62);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tm-sombra-2);
    transition: transform var(--tm-transicao), background var(--tm-transicao);
}

.tm-som-toggle:hover { transform: scale(1.08); background: rgba(0,0,0,.78); }
.tm-som-toggle svg   { width: 20px; height: 20px; fill: currentColor; }
.tm-som-toggle.mudo  { opacity: .62; }


/* ============================================================
   9. RANKING
   ============================================================ */

.tm-ranking-container {
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.tm-ranking-titulo {
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    color: var(--tm-texto);
}

.tm-ranking-sub {
    text-align: center;
    font-size: 12px;
    color: var(--tm-texto-fraco);
    margin-bottom: 20px;
}

.tm-ranking-filtros {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tm-filtro {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid #ddd;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--tm-texto-fraco);
    transition: var(--tm-transicao);
}

.tm-filtro.ativo {
    background: var(--tm-vermelho);
    border-color: var(--tm-vermelho);
    color: #fff;
}

.tm-linha-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--tm-superficie);
    border-radius: var(--tm-raio);
    margin-bottom: 8px;
    box-shadow: var(--tm-sombra-1);
    transition: transform var(--tm-transicao);
}

.tm-linha-rank:hover { transform: translateX(3px); }

.tm-linha-rank.tm-eu {
    background: #fff8e1;
    box-shadow: 0 0 0 2px var(--tm-amarelo), var(--tm-sombra-1);
}

.tm-rank-pos {
    font-size: 17px;
    font-weight: 800;
    min-width: 34px;
    text-align: center;
    color: var(--tm-texto-fraco);
}

.tm-linha-rank:nth-child(1) .tm-rank-pos { color: #d4a017; font-size: 21px; }
.tm-linha-rank:nth-child(2) .tm-rank-pos { color: #9aa0a6; font-size: 19px; }
.tm-linha-rank:nth-child(3) .tm-rank-pos { color: #b06a2c; font-size: 19px; }

.tm-rank-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
    flex-shrink: 0;
}

.tm-rank-info { flex: 1; min-width: 0; }

.tm-rank-nome {
    font-weight: 700;
    color: var(--tm-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-rank-detalhe { font-size: 11px; color: var(--tm-texto-fraco); }

.tm-rank-numero {
    text-align: right;
    flex-shrink: 0;
}

.tm-rank-numero strong {
    display: block;
    font-size: 19px;
    color: var(--tm-ok);
    line-height: 1.1;
}

.tm-rank-numero small { font-size: 10px; color: var(--tm-texto-fraco); }

.tm-patente {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #fff;
}

.tm-patente-bronze  { background: #b06a2c; }
.tm-patente-prata   { background: #9aa0a6; }
.tm-patente-ouro    { background: #d4a017; }
.tm-patente-mestre  { background: #6a2ca8; }
.tm-patente-lenda   { background: linear-gradient(90deg,#cc0000,#ffaa00); }

.tm-vazio {
    text-align: center;
    padding: 40px 20px;
    color: var(--tm-texto-fraco);
}


/* ============================================================
   10. HISTÓRICO DE PARTIDAS
   ============================================================ */

.tm-historico { margin-top: 24px; }

.tm-historico h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tm-texto-fraco);
    margin-bottom: 10px;
}

.tm-partida-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 6px;
    font-size: 13px;
}

.tm-partida-res {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.tm-partida-res.v { background: var(--tm-ok); }
.tm-partida-res.d { background: var(--tm-perigo); }

.tm-partida-info { flex: 1; }
.tm-partida-data { font-size: 11px; color: var(--tm-texto-fraco); }


/* ============================================================
   11. ACESSIBILIDADE

   Não havia nada: nenhum aria, nenhum foco, nenhum respeito a
   quem tem sensibilidade a movimento.
   ============================================================ */

.tm-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .tm-player-wrapper.ativo,
    .tm-mao.minha-vez {
        animation: none !important;
    }

    /* Sem movimento, o destaque da vez precisa de outro sinal */
    .tm-player-wrapper.ativo img {
        box-shadow: 0 0 0 4px var(--tm-ok) !important;
    }
}

@media (prefers-contrast: more) {
    .tm-carta { border-width: 2px; }
    .tm-carta.tm-vermelho { color: #b00000; }
}


/* ============================================================
   ============================================================
   VERSÃO 2.2 — REDESENHO DO LOBBY E DA MESA

   A 2.1 mexeu pouco no visual: tokens, textura e micro-interações.
   Continuava com cara de protótipo funcional. Este bloco vai
   fundo nas duas telas que o jogador mais vê.
   ============================================================
   ============================================================ */


/* ============================================================
   AMBIENTE

   O jogo vivia sobre fundo cinza claro de site. Uma mesa de
   carta pede penumbra em volta — é o que faz o feltro brilhar.
   ============================================================ */

body.tm-jogo {
    background:
        radial-gradient(ellipse at 50% 0%,   #23343f 0%, #16222b 45%, #0d151b 100%),
        #0d151b;
    min-height: 100vh;
    color: #e8eef2;
}

body.tm-jogo .tm-main { background: transparent; }

/* Vinheta: escurece os cantos e puxa o olho para o centro */
body.tm-jogo::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}

body.tm-jogo > * { position: relative; z-index: 1; }


/* ============================================================
   LOBBY — REDESENHO
   ============================================================ */

.tm-lobby-container { padding: 18px 16px 40px; }

/* --- Cabeçalho com o jogador --- */

.tm-lobby-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
}

.tm-lobby-hero img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.28);
    flex-shrink: 0;
}

.tm-hero-info { flex: 1; min-width: 0; }

.tm-hero-nome {
    font-weight: 800;
    font-size: 17px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-hero-stats {
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-top: 3px;
}

.tm-hero-stats strong { color: var(--tm-amarelo); }

/* --- Botão principal --- */

.tm-private-buttons { margin: 0 0 26px; }

.tm-btn-primary {
    width: 100%;
    padding: 17px 24px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #e02020 0%, #a80000 100%);
    box-shadow:
        0 6px 18px rgba(204,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.26);
    position: relative;
    overflow: hidden;
}

/* Brilho que atravessa o botão de tempos em tempos */
.tm-btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-22deg);
    animation: tmBrilho 4.5s ease-in-out infinite;
}

@keyframes tmBrilho {
    0%, 62% { left: -60%; }
    82%     { left: 120%; }
    100%    { left: 120%; }
}

.tm-btn-primary:disabled { background: #55606a; box-shadow: none; }
.tm-btn-primary:disabled::after { display: none; }

/* --- Título de seção --- */

.tm-lobby-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.52);
    margin: 0 0 16px;
    text-align: left;
}

.tm-lobby-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.20), transparent);
}

/* --- Card da sala: o item mais visto do lobby --- */

.tm-sala {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;

    background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    backdrop-filter: blur(6px);

    transition:
        transform var(--tm-transicao),
        border-color var(--tm-transicao),
        box-shadow var(--tm-transicao);
}

/* Faixa colorida na lateral indicando o estado */
.tm-sala::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--tm-neutro);
}

.tm-sala-livre::before      { background: linear-gradient(180deg,#2ecc71,#1f9d3d); }
.tm-sala-aguardando::before { background: linear-gradient(180deg,#ffcc00,#f39c12); }
.tm-sala-emjogo::before     { background: linear-gradient(180deg,#e74c3c,#a80000); }

.tm-sala:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 10px 26px rgba(0,0,0,.40);
}

.tm-sala:active { transform: translateY(-1px); }

/* Sala em jogo: apagada, mas ainda legível */
.tm-sala-emjogo {
    opacity: .62;
    cursor: default;
}

.tm-sala-emjogo:hover { transform: none; }

/* Sala livre chama mais atenção */
.tm-sala-livre {
    border-color: rgba(46,204,113,.34);
    box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(46,204,113,.14);
}

/* --- Logo do patrocinador --- */

.tm-sala-logo {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.tm-sala-logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

/* --- Texto do card --- */

.tm-sala-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tm-sala-id {
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-ocupacao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.60);
}

/* Vagas como pontinhos: lê-se sem precisar do número */
.tm-vagas { display: flex; gap: 3px; }

.tm-vaga {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.tm-vaga.ocupada { background: var(--tm-amarelo); }

.tm-livre, .tm-aguardando, .tm-emjogo {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tm-livre      { background: rgba(46,204,113,.20); color: #4ade80; }
.tm-aguardando { background: rgba(241,196,15,.20); color: #fcd34d; }
.tm-emjogo     { background: rgba(231,76,60,.20);  color: #f87171; }

/* --- Botão entrar --- */

.tm-entrar {
    flex-shrink: 0;
    padding: 11px 18px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #2ecc71, #1f9d3d);
    box-shadow: 0 3px 10px rgba(31,157,61,.36);
}

.tm-entrar:disabled {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.40);
    box-shadow: none;
    cursor: default;
}

.tm-lobby-carregando { color: rgba(255,255,255,.52); }


/* ============================================================
   MESA — REDESENHO
   ============================================================ */

/* --- Placar: virou painel, não texto solto --- */

.tm-placar-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 10px auto 0;
    max-width: 420px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.028));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 16px rgba(0,0,0,.30);
    backdrop-filter: blur(8px);
}

.tm-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.tm-pontos {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.tm-centro-placar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

.tm-valor-mao-texto {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tm-amarelo);
    white-space: nowrap;
}

/* Trilha das três vazas */
.tm-rodadas { display: flex; gap: 5px; }

.tm-box {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    transition: background var(--tm-transicao), transform var(--tm-transicao);
}

.tm-box.verde    { background: linear-gradient(135deg,#2ecc71,#1f9d3d); transform: scale(1.18); }
.tm-box.vermelho { background: linear-gradient(135deg,#e74c3c,#a80000); transform: scale(1.18); }
.tm-box.empate   { background: linear-gradient(135deg,#f1c40f,#d68910); transform: scale(1.18); }

/* Jogos ganhos */
.tm-jogos { display: flex; flex-direction: column; gap: 4px; }

.tm-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
}

.tm-bolinha.verde {
    background: var(--tm-amarelo);
    box-shadow: 0 0 8px rgba(255,170,0,.7);
}

/* --- A mesa: madeira em volta do feltro --- */

.tm-mesa-card {
    border-radius: 50% / 14%;
    border: 10px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.tm-mesa-card::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    z-index: -1;
    background:
        linear-gradient(145deg, #8b5e34 0%, #5d3c1f 42%, #7a512c 68%, #4a2f18 100%);
    box-shadow:
        0 18px 44px rgba(0,0,0,.55),
        inset 0 2px 3px rgba(255,255,255,.20),
        inset 0 -3px 6px rgba(0,0,0,.42);
}

/* Volta ao quadrado arredondado em tela pequena: o oval
   come área útil demais no celular */
@media (max-width: 420px) {
    .tm-mesa-card { border-radius: 30px; }
}

/* --- Nomes dos jogadores ---
   Estavam colados no avatar e o emoji cobria o texto. */

.tm-pos .nome {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: rgba(0,0,0,.55);
    padding: 3px 10px;
    border-radius: 20px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-inline: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.tm-cartas-restantes {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(255,255,255,.55);
}

/* --- Emoji menor e mais para baixo, para não cobrir o nome --- */

.tm-emoji {
    width: 20px !important;
    height: 20px !important;
    bottom: -4px !important;
}

.tm-emoji img,
.tm-emoji .tm-emoji-img {
    width: 20px !important;
    height: 20px !important;
}

.tm-pos img,
.tm-player-wrapper .tm-avatar-jogador {
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
}

/* --- Área da mão --- */

.tm-mao {
    background: rgba(0,0,0,.22);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
    padding: 12px 14px;
    box-sizing: border-box;
}

.tm-mao.minha-vez {
    border-color: rgba(241,196,15,.35);
    background: rgba(241,196,15,.07);
}

/* --- Botões de ação --- */

.tm-btn-acao {
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
}

.tm-btn-truco    { background: linear-gradient(135deg,#2ecc71,#1a8f38); }
.tm-btn-desistir { background: linear-gradient(135deg,#e74c3c,#a02820); }
.tm-btn-virar    { background: linear-gradient(135deg,#5d6d7e,#3d4a56); }

.tm-btn-virar.ativo {
    background: linear-gradient(135deg,#f1c40f,#c79a00);
    color: #3a2c00;
}

.tm-btn-acao:disabled {
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.35);
    box-shadow: none;
}


/* ============================================================
   EMBARALHAMENTO E DISTRIBUIÇÃO

   Uma mão nova simplesmente aparecia: as cartas surgiam na mão
   do nada. Agora existe o gesto.
   ============================================================ */

.tm-monte {
    position: fixed;
    z-index: 9000;
    pointer-events: none;
}

.tm-monte-folha {
    position: absolute;
    inset: 0;
    transform: translate(calc(var(--i) * 1px), calc(var(--i) * -1.5px));
}

.tm-monte.embaralhando .tm-monte-folha:nth-child(1) { animation: tmEmb1 .6s ease-in-out; }
.tm-monte.embaralhando .tm-monte-folha:nth-child(2) { animation: tmEmb2 .6s ease-in-out; }
.tm-monte.embaralhando .tm-monte-folha:nth-child(3) { animation: tmEmb1 .6s ease-in-out .08s; }
.tm-monte.embaralhando .tm-monte-folha:nth-child(4) { animation: tmEmb2 .6s ease-in-out .08s; }
.tm-monte.embaralhando .tm-monte-folha:nth-child(5) { animation: tmEmb1 .6s ease-in-out .16s; }

@keyframes tmEmb1 {
    0%,100% { transform: translate(0,0) rotate(0deg);      }
    30%     { transform: translate(-16px,-5px) rotate(-9deg); }
    60%     { transform: translate(9px,3px) rotate(6deg);   }
}

@keyframes tmEmb2 {
    0%,100% { transform: translate(0,0) rotate(0deg);      }
    30%     { transform: translate(16px,-4px) rotate(9deg);  }
    60%     { transform: translate(-9px,3px) rotate(-6deg);  }
}

.tm-carta-voando {
    position: fixed;
    z-index: 9001;
    pointer-events: none;
    transition: transform .42s cubic-bezier(.25,.8,.35,1), opacity .42s ease-in;
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

/* Cartas da mão entram uma a uma depois da distribuição */
.tm-mao.recem-distribuida .tm-carta {
    animation: tmCartaChega .42s cubic-bezier(.2,.9,.3,1.3) both;
}

@keyframes tmCartaChega {
    from { transform: translateY(60px) scale(.6) rotate(-12deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}


/* ============================================================
   AJUSTES RESPONSIVOS DO REDESENHO
   ============================================================ */

@media (max-width: 380px) {
    .tm-pontos       { font-size: 27px; }
    .tm-sala-logo    { width: 52px; height: 52px; }
    .tm-sala-id      { font-size: 14px; }
    .tm-entrar       { padding: 9px 13px; font-size: 12px; }
    .tm-placar-topo  { gap: 8px; padding: 10px 12px; }
    .tm-pos .nome    { max-width: 78px; font-size: 10px; margin-top: 14px; }
}

@media (min-width: 768px) {
    /* .tm-lobby-container: a largura agora vem do --tm-largura */
    .tm-sala            { padding: 18px; }
    .tm-sala-logo       { width: 72px; height: 72px; }
    .tm-sala-id         { font-size: 18px; }
    .tm-pontos          { font-size: 42px; }
    .tm-placar-topo     { max-width: 520px; }
    .tm-pos .nome       { max-width: 120px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-btn-primary::after,
    .tm-monte.embaralhando .tm-monte-folha { animation: none !important; }
    .tm-btn-primary::after { display: none; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.3
   ============================================================
   ============================================================ */


/* ============================================================
   1. PLACAR ENCOSTADO NO HEADER

   Estava flutuando como cartão solto no meio do vazio, com
   margem em cima e largura menor que a tela. Agora é uma faixa
   colada no topo, ocupando toda a largura e mais baixa.
   ============================================================ */

.tm-container { padding-top: 0; }

.tm-placar-topo {
    max-width: none;
    width: 100%;
    margin: 0 0 6px;
    padding: 9px 14px;
    border-radius: 0 0 18px 18px;
    border-left: none;
    border-right: none;
    border-top: none;
    gap: 10px;
    box-sizing: border-box;

    position: sticky;
    top: 0;
    z-index: 60;

    background: linear-gradient(180deg, rgba(22,34,43,.97), rgba(17,27,34,.94));
    box-shadow: 0 4px 18px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
}

.tm-placar-topo .tm-pontos { font-size: 30px; }

.tm-placar-topo .tm-titulo {
    font-size: 10px;
    letter-spacing: 1.2px;
}

.tm-placar-topo .tm-valor-mao-texto { font-size: 9px; }

.tm-placar-topo .tm-bloco-lado {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* A mesa começa mais perto do placar */
.tm-mesa-card { margin-top: 62px; }

@media (min-width: 768px) {
    .tm-placar-topo { border-radius: 0 0 22px 22px; padding: 11px 20px; }
    .tm-placar-topo .tm-pontos { font-size: 36px; }
    .tm-mesa-card { margin-top: 78px; }
}


/* ============================================================
   2. OVERLAYS SEGUEM O FORMATO DA MESA

   O overlay do truco tinha canto arredondado fixo de 26px
   enquanto a mesa é oval. As duas formas não batiam e ficava
   um retângulo estranho por cima do oval.
   ============================================================ */

.tm-overlay-final,
.tm-overlay-truco {
    border-radius: inherit !important;
    inset: 0;
    padding: 18px;
    box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(8,14,18,.95) 0%,
        rgba(8,14,18,.90) 62%,
        rgba(8,14,18,.82) 100%);
    backdrop-filter: blur(3px);
    animation: tmOverlayEntra .22s ease-out;
}

@keyframes tmOverlayEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* A borda dourada seguia o retângulo; agora acompanha o oval */
.tm-overlay-truco {
    box-shadow: inset 0 0 0 3px rgba(241,196,15,.85);
}

.tm-truco-titulo {
    font-size: 19px !important;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
    margin-bottom: 14px !important;
}

.tm-truco-espera {
    font-size: 13px !important;
    color: rgba(255,255,255,.75) !important;
}

.tm-acoes-truco .tm-btn {
    width: 148px;
    padding: 11px 0;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

.tm-truco-aceitar  { background: linear-gradient(135deg,#2ecc71,#1a8f38); }
.tm-truco-aumentar { background: linear-gradient(135deg,#f1c40f,#c79a00); color: #3a2c00; }
.tm-truco-correr   { background: linear-gradient(135deg,#e74c3c,#a02820); }


/* ============================================================
   3. NOMES MAIS PERTO DO AVATAR
   ============================================================ */

.tm-pos .nome {
    margin-top: 2px;
    padding: 2px 9px;
    font-size: 10.5px;
}

@media (min-width: 768px) {
    .tm-pos .nome { margin-top: 3px; font-size: 12px; }
}


/* ============================================================
   4. EMOJI MAIOR
   ============================================================ */

.tm-emoji {
    width: 27px !important;
    height: 27px !important;
    bottom: -9px !important;
}

.tm-emoji img,
.tm-emoji .tm-emoji-img {
    width: 27px !important;
    height: 27px !important;
    border: 2px solid rgba(255,255,255,.9);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .tm-emoji,
    .tm-emoji img,
    .tm-emoji .tm-emoji-img { width: 31px !important; height: 31px !important; }
}


/* ============================================================
   5. CONTADOR DE CARTAS REMOVIDO

   O numerozinho embaixo de cada avatar era a quantidade de
   cartas que faltavam na mão daquele jogador. Poluía sem
   explicar. Continua no aria-label, para leitor de tela.
   ============================================================ */

.tm-cartas-restantes { display: none !important; }


/* ============================================================
   6. CARTA VOANDO SEM TRAVAMENTO

   A animação transicionava left/top, que força o navegador a
   recalcular layout a cada quadro. Pior no jogador da direita:
   a carta começava fora da largura da tela, criando overflow
   horizontal e um repinte extra bem no início do movimento —
   o "tranco" que você via só desse lado.

   Agora tudo é transform, que a GPU compõe sem tocar no layout.
   ============================================================ */

html, body { overflow-x: hidden; }

.tm-carta-mov {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    margin: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition:
        transform .46s cubic-bezier(.22,.68,.30,1),
        opacity   .46s ease;
}


/* ============================================================
   ============================================================
   AJUSTES 2.4 — SALA E PLACAR
   ============================================================
   ============================================================ */


/* ============================================================
   1. PLACAR SEM FOLGA PARA O HEADER

   Ainda sobrava um respiro entre o header e a faixa do placar.
   O container da mesa tinha margem própria e o body um
   espaçamento herdado do tema.
   ============================================================ */

body.tm-jogo .tm-main { padding-top: 0; margin-top: 0; }

.tm-container {
    padding-top: 0;
    margin-top: 0;
}

.tm-placar-topo {
    margin-top: 0;
    top: 0;
}

/* O sticky do placar precisa considerar o header sticky */
body.tm-jogo .tm-header { margin-bottom: 0; }


/* ============================================================
   2. SALA — NOMES LEGÍVEIS

   Estavam em cinza escuro sobre fundo escuro: praticamente
   invisíveis (o "Paulo" da captura mal aparecia).
   ============================================================ */

.tm-sala-container { padding: 18px 16px 40px; }

.tm-sala-titulo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    text-align: center;
    margin-bottom: 22px;
}

.tm-player-name {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    margin-top: 7px;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-inline: auto;
}

.tm-player-pronto {
    color: #4ade80 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-top: 2px;
}

.tm-status-sala {
    color: rgba(255,255,255,.62) !important;
    font-size: 13px;
    font-weight: 600;
}


/* ============================================================
   3. CONTORNO ACOMPANHANDO O AVATAR

   O avatar é redondo e o contorno verde era um quadrado com
   canto suave — as duas curvas não batiam e ficava aquela
   moldura sobrando nos cantos.
   ============================================================ */

.tm-player-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
}

.tm-player-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50% !important;   /* redondo, como o avatar */
    object-fit: cover;
    display: block;
    border: 3px solid rgba(255,255,255,.16);
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    transition: border-color var(--tm-transicao), box-shadow var(--tm-transicao);
}

/* Pronto: o anel segue a curva do avatar */
.tm-player-box.pronto {
    outline: none !important;
    border-radius: 0 !important;
}

.tm-player-box.pronto .tm-player-avatar {
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46,204,113,.28), 0 4px 14px rgba(0,0,0,.45);
}

/* Bot: anel âmbar, também redondo */
.tm-player-box.tm-eh-bot .tm-player-avatar {
    border-color: rgba(255,170,0,.75);
}

.tm-player-box.tm-eh-bot.pronto .tm-player-avatar {
    border-color: #ffaa00;
    box-shadow: 0 0 0 3px rgba(255,170,0,.24), 0 4px 14px rgba(0,0,0,.45);
}

/* Lugar vazio */
.tm-player-empty {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.03);
    box-sizing: border-box;
}

.tm-remover-bot {
    top: -2px;
    right: 50%;
    margin-right: -36px;
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.tm-times {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.tm-equipe {
    display: flex;
    gap: 12px;
}

.tm-vs {
    color: rgba(255,255,255,.30);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    align-self: center;
    padding: 0 4px;
}


/* ============================================================
   4. BOTÕES DA SALA COM ÍCONE

   Eram quatro barras vermelhas idênticas: nada distinguia
   "Mudar Times" de "Sair da sala" a não ser ler o texto.
   ============================================================ */

.tm-botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}

.tm-btn-sala {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
}

.tm-btn-sala svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Mudar Times em amarelo, como pedido */
.tm-btn-times {
    background: linear-gradient(135deg, #ffc22e, #e09000);
    color: #3a2600;
}

.tm-btn-bot {
    background: linear-gradient(135deg, #5b6b7c, #3b4854);
}

.tm-btn-sala-primary {
    background: linear-gradient(135deg, #2ecc71, #1a8f38);
}

.tm-btn-sala.aguardando {
    background: linear-gradient(135deg, #7f8c8d, #5d6a6b) !important;
}

.tm-btn-sair-sala {
    background: linear-gradient(135deg, #e74c3c, #a02820);
}

.tm-btn-sala-whats {
    background: linear-gradient(135deg, #25d366, #128c4a);
}

.tm-btn-sala-sec {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}

.tm-btn-sala:disabled {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.35);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Link de convite --- */

.tm-link-box {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tm-link-box input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
    font-size: 12px;
}

.tm-link-box button {
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

/* --- Temas de mesa --- */

.tm-subtitulo {
    color: rgba(255,255,255,.55);
    border-top-color: rgba(255,255,255,.09);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/* ============================================================
   5. AVISO DE SALA / LOGIN NO TEMA ESCURO
   ============================================================ */

body.tm-jogo .tm-aviso {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
}

body.tm-jogo .tm-aviso a { color: var(--tm-amarelo); }

/* O recado de quem caiu aqui vindo de um link de campeonato já
   encerrado. Ocupa uma linha e sai da frente: o lobby é para
   escolher mesa, não para ler avisos. */
.tm-aviso-lobby {
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 13.5px;
    line-height: 1.35;
}


/* ============================================================
   ============================================================
   AJUSTES 2.4 — SALA E HEADER
   ============================================================
   ============================================================ */


/* ============================================================
   1. PLACAR SEM FOLGA ATÉ O HEADER

   Sobrava um espaço fino. Vinha do wpautop, que transformava a
   quebra de linha inicial do shortcode num <p> vazio antes do
   container. O trim() no PHP resolve a origem; isto aqui é a
   rede de segurança para qualquer outro nó vazio no caminho.
   ============================================================ */

.tm-main > p:empty,
.entry-content > p:empty,
.tm-container > p:empty { display: none !important; }

.tm-container,
.tm-sala-container { margin-top: 0; padding-top: 0; }

.tm-placar-topo { margin-top: 0; }


/* ============================================================
   2. SALA — TÍTULO E JOGADORES
   ============================================================ */

.tm-sala-container {
    padding: 16px 16px 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.tm-sala-titulo {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    margin: 6px 0 22px;
}

.tm-times {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.tm-equipe {
    display: flex;
    gap: 10px;
}

.tm-vs {
    align-self: center;
    font-weight: 900;
    font-size: 15px;
    color: rgba(255,255,255,.35);
    letter-spacing: 1px;
    padding: 0 2px;
}

/* --- Avatar: o anel agora acompanha a curva da foto ---

   Antes era `border: 4px solid` com border-radius de 16px.
   A borda desenha no box externo, então o contorno ficava
   visivelmente mais quadrado que a imagem. Trocando por
   box-shadow o anel segue exatamente o mesmo raio. */

.tm-player-avatar {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    object-fit: cover;
    border: none;
    box-shadow:
        0 0 0 3px var(--tm-ok),
        0 4px 14px rgba(0,0,0,.42);
    display: block;
}

.tm-player-box.pronto .tm-player-avatar {
    box-shadow:
        0 0 0 3px var(--tm-amarelo),
        0 0 16px rgba(255,170,0,.5);
}

.tm-player-box.pronto { outline: none; }

.tm-player-empty {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 2px dashed rgba(255,255,255,.18);
    box-sizing: border-box;
    color: rgba(255,255,255,.28);
    font-size: 28px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Nome: estava cinza escuro sobre fundo escuro --- */

.tm-player-name {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-player-pronto {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tm-amarelo);
    text-align: center;
    margin-top: 1px;
}

.tm-remover-bot {
    width: 20px;
    height: 20px;
    font-size: 13px;
    top: -5px;
    right: -5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.tm-status-sala {
    color: rgba(255,255,255,.60);
    font-size: 13px;
    font-weight: 600;
    margin: 18px 0 22px;
}

.tm-subtitulo {
    color: rgba(255,255,255,.45);
    border-top-color: rgba(255,255,255,.10);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/* ============================================================
   3. BOTÕES DA SALA COM ÍCONE

   Os SVG já estavam no HTML, mas sem regra de tamanho: um SVG
   inline sem width/height assume 300x150 e estourava o botão.
   ============================================================ */

.tm-botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.tm-btn-sala {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 14px;
    box-sizing: border-box;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .08s ease, filter var(--tm-transicao), opacity var(--tm-transicao);
}

.tm-btn-sala svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    flex-shrink: 0;
}

.tm-btn-sala:not(:disabled):hover  { filter: brightness(1.10); }
.tm-btn-sala:not(:disabled):active { transform: translateY(2px) scale(.99); }

.tm-btn-sala:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Cores por função ---
   "Mudar Times" era vermelha como as outras, o que dava peso de
   ação destrutiva a uma ação inofensiva. Agora é amarela. */

.tm-btn-times {
    background: linear-gradient(135deg, #ffc933, #e09400);
    color: #3a2600;
}

.tm-btn-bot {
    background: linear-gradient(135deg, #5d6d7e, #34495e);
}

.tm-btn-pronto,
.tm-btn-sala-primary {
    background: linear-gradient(135deg, #2ecc71, #1a8f38);
}

.tm-btn-sala-primary.aguardando,
.tm-btn-pronto.aguardando {
    background: linear-gradient(135deg, #7f8c8d, #5d6d7e) !important;
}

.tm-btn-whats,
.tm-btn-sala-whats {
    background: linear-gradient(135deg, #34c759, #1faa46);
}

.tm-btn-sair-sala {
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.75);
    box-shadow: none;
    border: 1px solid rgba(255,255,255,.12);
}

.tm-btn-sair-sala:hover { background: rgba(204,0,0,.22); color: #fff; }

/* --- Link de convite --- */

.tm-link-box {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tm-link-box input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    font-size: 12px;
}

.tm-link-box button {
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

/* --- Temas de mesa --- */

.tm-mesa-tema {
    border-radius: 14px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.tm-mesa-tema.selected {
    border-color: var(--tm-amarelo);
    box-shadow: 0 0 12px rgba(255,170,0,.45);
}


/* ============================================================
   4. AVISO DA SALA
   ============================================================ */

.tm-aviso {
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    border-radius: 16px;
}

.tm-aviso a { color: var(--tm-amarelo); }


@media (min-width: 768px) {
    /* .tm-sala-container: a largura agora vem do --tm-largura */
    .tm-player-avatar,
    .tm-player-empty   { width: 88px; height: 88px; border-radius: 24px; }
    .tm-player-name    { max-width: 92px; font-size: 13px; }
    .tm-sala-titulo    { font-size: 26px; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.5 — LAYOUT SEM ROLAGEM
   ============================================================
   ============================================================ */


/* ============================================================
   1. O CONTAINER DO TEMA ESTAVA CRIANDO AS BORDAS

   O gap acima do placar e as faixas escuras dos lados não vinham
   do placar: vinham do <main class="tm-conteudo"> do tema, que
   tem padding de 20px e max-width de 760px. Nas telas de jogo
   ele não deve limitar nada.
   ============================================================ */

body.tm-jogo .tm-conteudo {
    max-width: none;
    padding: 0;
    margin: 0;
}


/* ============================================================
   2. PLACAR REALMENTE 100%

   Mesmo com width:100% ele ficava preso à largura máxima do
   container. Este recorte o faz ocupar a viewport inteira,
   independentemente do que houver em volta.
   ============================================================ */

.tm-placar-topo {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tm-placar-topo .tm-pontos { font-size: 27px; }


/* ============================================================
   3. MESA QUE CABE NA TELA

   Antes o tamanho era fixo em pixels e o conjunto
   placar + jogadores + mesa + mão + botões estourava a altura
   do celular, obrigando a rolar no meio da partida.

   Agora a mesa deriva da MENOR entre a largura e a altura
   disponíveis, então ela encolhe sozinha em tela baixa.
   ============================================================ */

/* A variável precisa viver no BODY, não no container.

   As animações (carta saindo da mão, embaralhamento) criam clones
   anexados ao document.body, fora do .tm-container. Com a variável
   declarada só no container, o calc() abaixo ficava inválido nesses
   clones — e como a regra é !important, ela também vencia o tamanho
   inline definido pelo JavaScript.

   O efeito era silencioso e total: a carta virada do embaralhamento
   é uma div vazia, então colapsava para 0x0 e a animação inteira
   ficava invisível. A carta jogada virava uma lasca do tamanho do
   texto. Foi isto que apagou as duas animações. */

:root,
body.tm-jogo {
    --tm-mesa: min(70vw, 34vh, 320px);
}

.tm-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tm-mesa-card {
    width:  var(--tm-mesa) !important;
    height: var(--tm-mesa) !important;
    margin: calc(var(--tm-mesa) * .22) auto calc(var(--tm-mesa) * .16) !important;
}

/* Cartas e mão acompanham a escala da mesa */
.tm-carta {
    width:  calc(var(--tm-mesa) * .245) !important;
    height: calc(var(--tm-mesa) * .34) !important;
    font-size: calc(var(--tm-mesa) * .052);
}

.tm-mao {
    width: auto !important;
    max-width: 96vw;
    min-height: 0 !important;
    margin: calc(var(--tm-mesa) * .10) auto 0 !important;
    padding: 8px 12px;
    gap: 10px !important;
}

.tm-pos img,
.tm-player-wrapper .tm-avatar-jogador {
    width:  calc(var(--tm-mesa) * .20) !important;
    height: calc(var(--tm-mesa) * .20) !important;
    min-width: 42px;
    min-height: 42px;
}


/* ============================================================
   4. AÇÕES FIXAS NO RODAPÉ

   Truco, Desistir e Virar ficavam no fim do fluxo e, em tela
   pequena, abaixo da dobra: era preciso rolar no meio da mão
   para pedir truco. Agora acompanham a tela.
   ============================================================ */

.tm-acoes {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;

    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));

    background: linear-gradient(180deg, rgba(13,21,27,.86), rgba(13,21,27,.97));
    border-top: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 18px rgba(0,0,0,.42);
}

.tm-acoes .tm-btn-acao {
    flex: 1;
    max-width: 165px;
    padding: 12px 8px;
    font-size: 13px;
}

/* Espaço para a mão não ficar embaixo da barra de ações */
body.tm-jogo .tm-container { padding-bottom: 78px; }

/* O botão de som subiria por cima da barra */
.tm-som-toggle { bottom: calc(74px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
    .tm-acoes .tm-btn-acao { padding: 14px 10px; font-size: 15px; max-width: 200px; }
    body.tm-jogo .tm-container { padding-bottom: 88px; }
    .tm-placar-topo .tm-pontos { font-size: 34px; }
}

/* Tela bem baixa: aperta tudo mais um pouco */
@media (max-height: 700px) {
    :root,
    body.tm-jogo { --tm-mesa: min(68vw, 32vh, 280px); }
    .tm-placar-topo { padding: 6px 12px; }
    .tm-placar-topo .tm-pontos { font-size: 24px; }
    .tm-pos .nome { font-size: 9.5px; padding: 2px 7px; }
}


/* ============================================================
   5. SALA — RESPIROS

   Os blocos estavam colados: foto encostada no nome, nome
   encostado no "aguardando jogadores", e os temas de mesa
   grudados nos botões.
   ============================================================ */

.tm-players { margin-bottom: 6px; }

.tm-player-name  { margin-top: 14px; }
.tm-player-pronto{ margin-top: 4px; }

.tm-status-sala  { margin: 26px 0 8px; }

.tm-subtitulo    { margin: 30px 0 14px; }

.tm-mesas-grid   { margin-bottom: 34px; }

.tm-botoes       { margin-top: 0; gap: 12px; }

.tm-link-box     { margin-top: 22px; }


/* ============================================================
   6. SLOTS VAZIOS REDONDOS

   Os avatares são círculos e os espaços vazios eram quadrados
   arredondados: as duas formas não conversavam.
   ============================================================ */

.tm-player-avatar,
.tm-player-empty {
    border-radius: 50% !important;
}

.tm-player-empty {
    border: 2px dashed rgba(255,255,255,.20);
    background: rgba(255,255,255,.04);
}

/* --- O "x" de remover bot caía no slot ao lado ---
   A caixa do jogador esticava além da foto, então o canto
   superior direito dela ficava sobre o slot seguinte. */

.tm-player-card { position: relative; }

.tm-player-box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-inline: auto;
}

.tm-remover-bot {
    top: -2px;
    right: -2px;
}


/* ============================================================
   7. BOTÕES DO HEADER COM ÍCONE
   ============================================================ */

.tm-header .tm-btn {
    gap: 5px;
}

.tm-header .tm-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

.tm-btn-regras {
    background: rgba(255,255,255,.11);
    color: rgba(255,255,255,.88);
}

.tm-btn-regras:hover { background: rgba(255,255,255,.18); }

/* Em tela estreita, os botões do header viram só ícone */
@media (max-width: 400px) {
    .tm-header .tm-btn span { display: none; }
    .tm-header .tm-btn { padding: 8px 10px; }
    .tm-header .tm-player-name { max-width: 72px; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.6 — ANIMAÇÕES E MESA SEM HEADER
   ============================================================
   ============================================================ */


/* ============================================================
   1. CAMADA DO BARALHO

   Antes as cartas animadas eram soltas no body e herdavam
   regras do jogo. Agora vivem numa camada própria.
   ============================================================ */

.tm-camada-baralho {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.tm-camada-baralho .tm-carta {
    position: fixed;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.55);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.tm-folha {
    transition: transform .26s cubic-bezier(.3,.7,.4,1), opacity .3s ease;
}

.tm-carta-voando {
    transition:
        transform .42s cubic-bezier(.25,.75,.35,1),
        opacity   .42s ease-in;
}

/* O monte antigo saiu de cena junto com as keyframes dele */
.tm-monte,
.tm-monte-folha { display: none !important; }


/* ============================================================
   2. MESA SEM HEADER

   Na tela de jogo o header não é mais impresso. O placar passa
   a ser o primeiro elemento e o espaço que sobra vai para a
   mesa, que fica maior.
   ============================================================ */

.tm-main.tm-sem-header { padding-top: 0; }

body.tm-jogo .tm-main.tm-sem-header .tm-placar-topo {
    border-top: none;
    padding-top: calc(8px + env(safe-area-inset-top));
}

/* Sem header sobra altura: a mesa cresce um pouco */
body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(76vw, 38vh, 350px); }

@media (max-height: 700px) {
    body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(72vw, 35vh, 300px); }
}

/* Navegadores sem :has() apenas mantêm o tamanho anterior —
   o layout continua correto, só não aproveita a folga extra. */


/* ============================================================
   3. A CARTA JOGADA PRECISA SER VISTA SAINDO DA MÃO

   A guarda que evita carta duplicada podia pular a animação
   inteira. Agora, se ela não puder registrar a jogada otimista,
   a carta ainda assim voa — só não entra em mesaDesenhada.
   ============================================================ */

.tm-carta-mov {
    box-shadow: 0 10px 26px rgba(0,0,0,.55) !important;
    z-index: 9999;
}


/* ============================================================
   ============================================================
   AJUSTES 2.7
   ============================================================
   ============================================================ */


/* ============================================================
   1. ANEL DO TEMPO

   O CSS trazia stroke-dasharray: 215, calculado para raio 34,
   enquanto o círculo era desenhado com raio 29 — circunferência
   real de 182. O traço era 18% maior que a volta, então o anel
   fechava antes do tempo acabar. E cx="34" com r="29" num SVG de
   60 de largura passava da borda: o círculo saía descentrado e
   cortado do lado direito.

   Agora o SVG tem viewBox, o círculo está centrado, e a
   circunferência é calculada em tempo de execução a partir do
   raio real (ver mesa.js). O dasharray sai daqui de propósito.
   ============================================================ */

.timer-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
    overflow: visible;
}

.timer-circle .path {
    fill: none;
    stroke: #00ff80;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke .25s linear;
    /* stroke-dasharray e dashoffset vêm do JavaScript */
}


/* ============================================================
   2. MESA MENOR PARA TODOS CABEREM

   Os avatares dos jogadores de cima e de baixo ficam FORA da
   mesa, então o que precisa caber na tela não é a mesa: é a
   mesa mais dois avatares mais dois nomes. Os coeficientes
   anteriores só contavam a mesa.
   ============================================================ */

/* Coeficientes resolvidos numericamente contando TODO o
   conjunto: placar + avatar e nome de cima + mesa + avatar e
   nome de baixo + mão + barra de ações. A folga mínima ficou
   em 51px, no Android de 640px de altura. */

:root,
body.tm-jogo { --tm-mesa: min(70vw, 36vh, 320px); }

body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(74vw, 38vh, 340px); }

@media (max-height: 700px) {
    :root,
    body.tm-jogo { --tm-mesa: min(60vw, 30vh, 250px); }
    body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(62vw, 31vh, 260px); }
}

/* Margens menores: o espaço vai para os avatares */
.tm-mesa-card {
    margin: calc(var(--tm-mesa) * .16) auto calc(var(--tm-mesa) * .12) !important;
}


/* ============================================================
   3. EMOJI MENOR E NOME AFASTADO

   O emoji cobria o nome de novo. Diminuindo o emoji e
   empurrando o nome para baixo, os dois convivem.
   ============================================================ */

.tm-emoji {
    width: 21px !important;
    height: 21px !important;
    bottom: -7px !important;
}

.tm-emoji img,
.tm-emoji .tm-emoji-img {
    width: 21px !important;
    height: 21px !important;
    border-width: 1.5px;
}

.tm-pos .nome {
    margin-top: 12px;
    font-size: 10px;
    padding: 3px 9px;
    background: rgba(0,0,0,.72);
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

@media (min-width: 768px) {
    .tm-emoji,
    .tm-emoji img,
    .tm-emoji .tm-emoji-img { width: 25px !important; height: 25px !important; }
    .tm-pos .nome { margin-top: 14px; font-size: 12px; }
}


/* ============================================================
   4. RELÓGIO DO TRUCO
   ============================================================ */

.tm-truco-relogio {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: .5px;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
}

.tm-truco-relogio #tm-truco-seg {
    display: inline-block;
    min-width: 22px;
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.tm-truco-relogio #tm-truco-seg.urgente {
    color: var(--tm-perigo);
    animation: tmPiscaUrgente .9s ease-in-out infinite;
}

@keyframes tmPiscaUrgente {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: .55; transform: scale(1.14); }
}

.tm-truco-espera {
    line-height: 1.5;
    padding: 6px 10px;
}


/* ============================================================
   ============================================================
   AJUSTES 2.8 — MESA CENTRADA E MÃO FIXA
   ============================================================
   ============================================================ */


/* ============================================================
   1. O EMOJI ESTAVA PRESO NUM PISO DE 42px

   A regra dos avatares era `.tm-pos img`, que atinge TODA imagem
   dentro da posição do jogador — inclusive a do emoji. E ela
   traz `min-width: 42px`, que vence qualquer largura menor,
   mesmo declarada com !important: min-width ganha de width por
   definição da cascata.

   Por isso o emoji aparecia do tamanho do avatar por mais que eu
   reduzisse o número. Agora a regra do avatar é específica e o
   emoji tem o piso zerado.
   ============================================================ */

.tm-pos img:not(.tm-emoji-img),
.tm-player-wrapper .tm-avatar-jogador {
    width:  calc(var(--tm-mesa) * .19) !important;
    height: calc(var(--tm-mesa) * .19) !important;
    min-width: 40px;
    min-height: 40px;
}

.tm-emoji {
    width:  17px !important;
    height: 17px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    bottom: -5px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
}

.tm-emoji img,
.tm-emoji .tm-emoji-img {
    width:  17px !important;
    height: 17px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-width: 1.5px;
}

@media (min-width: 768px) {
    .tm-emoji,
    .tm-emoji img,
    .tm-emoji .tm-emoji-img { width: 21px !important; height: 21px !important; }
}


/* ============================================================
   2. NOME MAIS ABAIXO

   Com o emoji menor e centrado sob o avatar, o nome desce o
   suficiente para não ser coberto por ele.
   ============================================================ */

.tm-pos .nome {
    margin-top: 15px;
    font-size: 9.5px;
    padding: 3px 8px;
    max-width: 88px;
}

@media (min-width: 768px) {
    .tm-pos .nome { margin-top: 17px; font-size: 11px; max-width: 110px; }
}


/* ============================================================
   3. MESA CENTRADA VERTICALMENTE

   Sobrava um vazio enorme embaixo porque tudo era empilhado a
   partir do topo. Agora o container é uma coluna flex da altura
   da tela e a mesa usa margem automática: ela absorve o espaço
   livre de cima e de baixo em partes iguais.
   ============================================================ */

body.tm-jogo .tm-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* desconta a barra do navegador móvel */
    box-sizing: border-box;

    /* Espaço reservado para a mão e as ações, que são fixas.

       Este número é o que decide onde a mesa fica: ela se
       centraliza no que sobra entre o placar e esta borda de
       baixo. Se a reserva não bater com a altura real da mão,
       a mesa sai do centro por METADE do erro — e o erro
       aparece como "a mesa está um pouco baixa", que é
       exatamente o tipo de coisa que se vê e não se explica.

       --tm-mao-base é a distância do fim da tela até onde a
       faixa da mão começa. Ela é declarada aqui e reusada pela
       media query de 768px, onde a mão sobe mais: assim a
       reserva acompanha a mão por construção, em vez de repetir
       um número que já saiu de sincronia uma vez. */
    /* A CONTA SAIU DA MEDIDA, NÃO DO CHUTE

       Era `* .34 + 26px`. Media a mão em sete telas, do iPhone
       SE ao iPad, e a altura dela é reta em relação à mesa:

           320x568   mesa 164.7  mão  80.3
           390x844   mesa 257.4  mão 113.7
           768x1024  mesa 450.5  mão 183.2
           834x1112  mesa 489.3  mão 197.1

       A reta que passa por esses pontos é `* .36 + 21px`. Com o
       .34 antigo a reserva batia no celular por sorte de escala
       e errava 4px no tablet — e o erro vira METADE dele de
       desalinho na mesa, que é o "a mesa está um pouco baixa"
       que ninguém consegue apontar. */
    --tm-mao-alt: calc(var(--tm-mesa) * .36 + 21px);
    --tm-acoes-alt: 62px;
    --tm-mao-base: var(--tm-acoes-alt);

    padding-bottom: calc(var(--tm-mao-base) + var(--tm-mao-alt) + env(safe-area-inset-bottom));
}

.tm-placar-topo { flex: 0 0 auto; }

/* margin auto em item flex = centralização no espaço livre */
.tm-mesa-card {
    flex: 0 0 auto;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   4. MÃO NUMA BARRA FIXA DE LARGURA TOTAL

   As cartas ficavam logo abaixo da mesa e o avatar do jogador
   de baixo passava por cima delas. Agora a mão é uma faixa
   própria, ancorada acima da barra de ações.
   ============================================================ */

.tm-mao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--tm-acoes-alt, 62px) + env(safe-area-inset-bottom));
    z-index: 65;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px !important;
    padding: 10px 12px !important;
    min-height: 0 !important;

    background: linear-gradient(180deg, rgba(13,21,27,.90), rgba(13,21,27,.97));
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 16px rgba(0,0,0,.38);
}

.tm-mao.minha-vez {
    background: linear-gradient(180deg, rgba(38,32,10,.92), rgba(20,17,8,.97));
    border-top-color: rgba(241,196,15,.40);
}

/* A carta na mão pode ser um pouco maior: a faixa é só dela */
.tm-mao .tm-carta {
    width:  calc(var(--tm-mesa) * .26) !important;
    height: calc(var(--tm-mesa) * .36) !important;
}

/* O botão de som subia por cima das duas faixas */
.tm-som-toggle {
    bottom: calc(var(--tm-acoes-alt, 62px) + var(--tm-mao-alt, 90px) + 10px + env(safe-area-inset-bottom));
    width: 38px;
    height: 38px;
}

.tm-som-toggle svg { width: 17px; height: 17px; }


/* ============================================================
   5. NADA COBRE NADA

   O jogador de baixo fica na borda inferior da mesa. Como a
   mesa agora é centrada e as faixas são fixas, garantimos que
   o avatar e o nome dele tenham espaço próprio.
   ============================================================ */

.tm-pos.bottom {
    z-index: 12;
}

.tm-mesa-card { overflow: visible; }

/* Overlays continuam acima de tudo dentro da mesa */
.tm-overlay-final,
.tm-overlay-truco { z-index: 999; }


/* ============================================================
   ============================================================
   AJUSTES 2.9
   ============================================================
   ============================================================ */


/* ============================================================
   1. MOVIMENTO REDUZIDO SEM MATAR O JOGO

   A regra de acessibilidade usava `*` com
   `transition-duration: .01ms !important`. Isso atinge também a
   carta em voo — e !important de folha de estilo vence estilo
   inline comum. Com "Reduzir movimento" ligado no aparelho, a
   carta teleportava para a mesa por mais que o JavaScript
   estivesse correto.

   O deslocamento da carta não é enfeite: é o que mostra quem
   jogou o quê e de onde. Aqui devolvemos o movimento às peças
   funcionais, encurtado. A decoração (pulsos, brilhos, riffle)
   continua desligada.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .tm-carta-mov,
    .tm-carta-voando,
    .tm-camada-baralho .tm-carta {
        transition-duration: 220ms !important;
    }

    /* Decoração continua desligada */
    .tm-player-wrapper.ativo,
    .tm-mao.minha-vez,
    .tm-btn-primary::after,
    .tm-folha { animation: none !important; }
}


/* ============================================================
   2. JOGADORES LATERAIS LONGE DA BORDA

   O deslocamento era fixo em -75px, sem relação com o tamanho
   da mesa. Numa tela de 375px a mesa deixa ~49px de margem, e
   um avatar 75px para fora começava 26px FORA da tela — por
   isso o nome aparecia cortado no canto esquerdo.

   Agora o afastamento é proporcional à mesa, e para dentro.
   ============================================================ */

.tm-pos.left  { left:  calc(var(--tm-mesa) * -0.075) !important; right: auto !important; }
.tm-pos.right { right: calc(var(--tm-mesa) * -0.075) !important; left:  auto !important; }

.tm-pos.top    { top:    calc(var(--tm-mesa) * -0.30) !important; }
.tm-pos.bottom { bottom: calc(var(--tm-mesa) * -0.26) !important; }

/* Nome dos laterais é mais estreito: ali o espaço é curto */
.tm-pos.left .nome,
.tm-pos.right .nome {
    max-width: 74px;
    font-size: 9px;
}

@media (min-width: 768px) {
    .tm-pos.left .nome,
    .tm-pos.right .nome { max-width: 100px; font-size: 10.5px; }
}

/* Mesa um pouco menor: é o que garante margem lateral real */
:root,
body.tm-jogo { --tm-mesa: min(66vw, 34vh, 310px); }

body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(70vw, 36vh, 330px); }

@media (max-height: 700px) {
    :root,
    body.tm-jogo { --tm-mesa: min(58vw, 29vh, 245px); }
    body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(60vw, 30vh, 255px); }
}


/* ============================================================
   3. EMOJI UM POUCO MAIOR
   ============================================================ */

.tm-emoji,
.tm-emoji img,
.tm-emoji .tm-emoji-img {
    width:  20px !important;
    height: 20px !important;
}

.tm-emoji { bottom: -6px !important; }

@media (min-width: 768px) {
    .tm-emoji,
    .tm-emoji img,
    .tm-emoji .tm-emoji-img { width: 24px !important; height: 24px !important; }
}


/* ============================================================
   AJUSTES 2.10 — LATERAIS MAIS PARA FORA

   Na 2.9 eu puxei os jogadores laterais para dentro porque o
   nome estava saindo da tela. Puxei demais: eles ficaram
   colados na mesa.

   Recalculei o afastamento máximo possível mantendo o nome
   dentro da tela em todos os aparelhos. O limite do pior caso
   (iPhone 12) é 0,188 da largura da mesa; usando 0,16 sobra
   margem de segurança e eles ficam bem mais para fora.
   ============================================================ */

.tm-pos.left  { left:  calc(var(--tm-mesa) * -0.16) !important; right: auto !important; }
.tm-pos.right { right: calc(var(--tm-mesa) * -0.16) !important; left:  auto !important; }

/* Nas telas largas sobra margem: pode afastar ainda mais */
@media (min-width: 500px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.22) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.22) !important; }
}

@media (min-width: 768px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.26) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.26) !important; }
}

/* O nome dos laterais fica um pouco mais estreito para que o
   afastamento maior não empurre a ponta dele para fora. */
.tm-pos.left .nome,
.tm-pos.right .nome {
    max-width: 70px;
}

@media (min-width: 500px) {
    .tm-pos.left .nome,
    .tm-pos.right .nome { max-width: 88px; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.11
   ============================================================
   ============================================================ */


/* ============================================================
   CARTA EM VOO PRESA NO FLUXO DA PÁGINA

   A carta que voa da mão para a mesa é um clone anexado
   DIRETAMENTE ao <body>. Ela depende de `.tm-carta-mov`, que
   pede `position: fixed` para que left/top sejam coordenadas
   de tela.

   Só que existe esta regra, mais acima:

       body.tm-jogo > * { position: relative; z-index: 1; }

   `body.tm-jogo > *` tem especificidade (0,1,1) e vence
   `.tm-carta-mov` (0,1,0). Resultado: o clone nascia
   `relative`, e left/top viraram deslocamento a partir do fim
   do documento em vez de posição na tela. A carta voava
   perfeitamente — centenas de pixels abaixo da área visível.
   Quando o clone era removido, o render colocava a carta na
   mesa de uma vez. Daí a sensação de que a carta "aparece"
   sem movimento.

   O recolhimento da vaza não sofria disso porque aquele código
   grava `clone.style.position = "fixed"` inline, e estilo
   inline vence folha de estilo.

   A mesma regra atingia outros três elementos anexados ao
   body: a camada do embaralhamento, a barra de conexão e o
   botão de som — todos com `position: fixed` na classe, todos
   sendo rebaixados para `relative`.
   ============================================================ */

body.tm-jogo > .tm-carta-mov,
.tm-carta-mov {
    position: fixed !important;
    z-index: 9999 !important;
}

body.tm-jogo > .tm-camada-baralho,
.tm-camada-baralho {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
}

body.tm-jogo > .tm-conexao,
.tm-conexao {
    position: fixed !important;
    z-index: 99998 !important;
}

body.tm-jogo > .tm-som-toggle,
.tm-som-toggle {
    position: fixed !important;
}


/* ============================================================
   A BATIDA NA MESA

   O voo termina com a carta em escala 1.14 — ela ainda está no
   ar. O que vem aqui é o instante seguinte: ela encosta no
   feltro e as cartas que já estavam lá sentem.

   A carta passa do ponto e volta (1.14 -> .95 -> 1.02 -> 1),
   que é o amassado do papel contra a mesa, e a sombra abre por
   um momento.

   POR QUE O TRANCO NÃO É MAIS NA MESA

   A primeira versão sacudia o `.tm-mesa-card` inteiro. Aplicar
   `transform` nele promove o feltro — um radial-gradient do
   tamanho da mesa, com pseudo-elemento por cima — a uma camada
   de composição nova. O Safari do iOS re-rasteriza tudo aquilo
   no primeiro quadro da animação, e isso aparece como uma
   piscada na mesa a cada carta jogada.

   O tranco passou para as CARTAS que já estão na mesa: são
   elementos pequenos, sem fundo pesado, que a GPU move sem
   repintar nada. O olho lê o mesmo impacto, e o feltro fica
   parado.
   ============================================================ */

@keyframes tmBatidaCarta {
    0%   { transform: scale(1.14); }
    34%  { transform: scale(.950); }
    66%  { transform: scale(1.022); }
    100% { transform: scale(1); }
}

.tm-cartas-area .tm-carta.tm-carta-batida {
    animation: tmBatidaCarta .30s cubic-bezier(.3,.85,.35,1) both;
    box-shadow:
        0 2px 3px rgba(0,0,0,.40),
        0 10px 26px rgba(0,0,0,.50) !important;
}

/* As vizinhas dão um pulinho — é o que vende o peso da carta
   que acabou de cair. */
@keyframes tmAbaloCarta {
    0%   { transform: translate3d(0,0,0); }
    30%  { transform: translate3d(0,2px,0); }
    68%  { transform: translate3d(0,-1px,0); }
    100% { transform: translate3d(0,0,0); }
}

.tm-cartas-area .tm-carta.tm-abalo {
    animation: tmAbaloCarta .19s ease-out both;
}

/* Com movimento reduzido a batida encolhe, mas não some: ela
   é o que confirma que a carta chegou. O abalo das vizinhas,
   esse sim, é puro efeito — e sai. */
@media (prefers-reduced-motion: reduce) {

    .tm-cartas-area .tm-carta.tm-carta-batida {
        animation-duration: .16s;
    }

    .tm-cartas-area .tm-carta.tm-abalo { animation: none !important; }
}


/* ============================================================
   O "X" DE REMOVER BOT, COLADO NA FOTO

   O botão era filho da .tm-player-box, que é uma coluna com
   foto, nome e "pronto". Ancorado no canto dessa caixa, ele
   dependia de qual das três regras de .tm-remover-bot vencia —
   e uma `margin-right: -36px`, de uma versão em que o botão era
   centralizado por outro caminho, sobreviveu ao redesenho. O
   `right: -2px` da regra mais recente não zerava essa margem,
   então o x acabava 36px à direita, em cima do slot vizinho.

   Agora ele vive dentro de uma moldura que envolve só a foto.
   O canto da moldura É o canto da foto, sem cálculo.
   ============================================================ */

.tm-player-foto {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.tm-player-foto .tm-remover-bot {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;          /* mata a margem herdada */

    width: 24px !important;
    height: 24px !important;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(13,21,27,.92);   /* separa do avatar */
    background: #d0342b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.tm-player-foto .tm-remover-bot:hover { background: #ef4436; }
.tm-player-foto .tm-remover-bot:active { transform: scale(.92); }


/* ============================================================
   SALA — A COLUNA DO JOGADOR

   Três coisas estavam desalinhadas:

   1. O avatar parecia maior que o slot vazio. Os dois eram 74px
      (88px no desktop), mas o slot vazio é `border-box` com
      borda de 2px — mede 74 na tela — e o avatar leva o anel em
      `box-shadow`, que desenha 3px PARA FORA. Na prática 80.
      Agora o avatar é 68px e o anel completa exatamente 74.

   2. O nome estava a 14px da foto, longe demais para se ler
      como legenda dela.

   3. O "pronto" era texto embaixo do nome. Ele alongava a
      coluna de quem estava pronto e não a dos outros, e o
      "Aguardando jogadores" acabava colidindo com essa sobra.
      Virou selo na foto: o estado deixou de mexer na altura.
   ============================================================ */

/* 1. Avatar do tamanho do slot vazio, anel incluído */

.tm-player-avatar {
    width: 68px;
    height: 68px;
}

.tm-player-empty {
    width: 74px;
    height: 74px;
}

@media (min-width: 768px) {
    .tm-player-avatar { width: 82px; height: 82px; }
    .tm-player-empty  { width: 88px; height: 88px; }
}


/* 2. Nome colado na foto */

.tm-player-name {
    margin-top: 6px;
}


/* 3. Selo de pronto, logo abaixo do "x" */

.tm-player-check {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 3;

    width: 24px;
    height: 24px;
    border-radius: 50%;

    background: #22c55e;
    border: 2px solid rgba(13,21,27,.92);   /* separa do avatar */
    box-shadow: 0 2px 8px rgba(0,0,0,.45);

    display: flex;
    align-items: center;
    justify-content: center;

    animation: tmCheckEntra .22s cubic-bezier(.2,.9,.3,1.3) both;
}

.tm-player-check svg {
    width: 13px;
    height: 13px;
    fill: #06240f;
}

@keyframes tmCheckEntra {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* O texto antigo não é mais gerado; a regra fica desligada
   caso algum cache ainda sirva o JS anterior. */
.tm-player-pronto { display: none; }


/* 4. "Aguardando jogadores" com respiro de verdade */

.tm-status-sala {
    margin: 34px 0 10px;
}


/* ============================================================
   SALA — COLUNAS DE LARGURA FIXA

   As colunas desalinhavam porque cada uma media uma coisa
   diferente. Três motivos somados:

   1. O anel do avatar é `box-shadow`, que NÃO ocupa espaço de
      layout. A foto mede 68px na caixa mas 74px na tela.

   2. O slot vazio é 74px de verdade, `border-box`. Então uma
      coluna com jogador media 68 e uma vazia media 74.

   3. A .tm-player-box é `width: fit-content`, e o nome pode
      passar da foto. Cada nome dava uma largura de coluna.

   Resultado: quatro colunas de larguras diferentes, o "VS"
   empurrado para cima dos avatares e nada batendo com nada.

   Agora a coluna tem largura fixa igual ao diâmetro visível do
   avatar (74px, 88px no desktop). A foto de 68px centraliza
   dentro dela e o anel de 3px de cada lado completa exatamente
   os 74 — encaixando com o slot vazio. O nome fica preso à
   largura da coluna e corta com reticências.
   ============================================================ */

.tm-player-card {
    width: 74px;
    flex: 0 0 74px;
    padding: 0;
    box-sizing: border-box;
}

.tm-player-box {
    width: 100%;
    margin-inline: 0;
}

.tm-player-foto {
    display: block;
    margin-inline: auto;
    width: fit-content;
}

.tm-player-name {
    width: 100%;
    max-width: 100%;
}

.tm-player-empty {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .tm-player-card { width: 88px; flex-basis: 88px; }
}

/* Espaçamento igual entre parceiros e entre as duplas */
.tm-times  { gap: 12px; }
.tm-equipe { gap: 12px; }

/* O "VS" alinhado com o CENTRO DA FOTO, não com o centro da
   coluna: a coluna inclui o nome embaixo, então centralizar
   nela deixava o VS caído. */
.tm-vs {
    align-self: flex-start;
    margin-top: 26px;
    min-width: 24px;
    text-align: center;
}

@media (min-width: 768px) {
    .tm-vs { margin-top: 33px; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.12 — MESA E JOGADORES
   ============================================================
   ============================================================ */


/* ============================================================
   1. JOGADORES MAIS PARA FORA

   Os laterais estavam a 0,16 da largura da mesa e o de baixo a
   0,26. O limite real é o nome não sair da tela — recalculei
   contra o pior caso (tela de 360px) e ainda sobra margem.
   ============================================================ */

.tm-pos.left  { left:  calc(var(--tm-mesa) * -0.24) !important; right: auto !important; }
.tm-pos.right { right: calc(var(--tm-mesa) * -0.24) !important; left:  auto !important; }

.tm-pos.bottom { bottom: calc(var(--tm-mesa) * -0.36) !important; }

@media (min-width: 500px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.30) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.30) !important; }
}

@media (min-width: 768px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.34) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.34) !important; }
}


/* ============================================================
   2. NOME COLADO NO AVATAR

   O nome estava a 15px porque o emoji ficava centrado embaixo
   da foto e cobria o texto. Resolver a distância sem resolver
   o emoji só trocaria um problema pelo outro.

   Então o emoji saiu do centro e foi para o canto inferior
   direito da foto — mesma solução do selo de "pronto" na sala.
   Com o centro livre, o nome sobe para 4px.
   ============================================================ */

.tm-emoji {
    left: auto !important;
    right: -4px !important;
    bottom: -4px !important;
    transform: none !important;
}

.tm-pos .nome {
    margin-top: 4px;
    max-width: 92px;
}

@media (min-width: 768px) {
    .tm-pos .nome { margin-top: 6px; max-width: 112px; }
}

.tm-pos.left .nome,
.tm-pos.right .nome { max-width: 76px; }

@media (min-width: 500px) {
    .tm-pos.left .nome,
    .tm-pos.right .nome { max-width: 92px; }
}


/* ============================================================
   3. O FORMATO DA MESA DE PLÁSTICO

   Aquela mesa quadrada de bar tem uma silhueta muito
   específica: o tampo é quadrado de cantos suaves, mas cada
   canto tem uma MORDIDA côncava, onde a perna encaixa. É essa
   concavidade que faz o olho reconhecer o objeto — sem ela é
   só um quadrado arredondado.

   Não dá para fazer canto côncavo com border-radius, que só
   arredonda para dentro. A saída é máscara: quatro círculos
   transparentes, um em cada canto, combinados por interseção.
   Onde os quatro concordam em ser opacos, o tampo aparece.

   POR QUE UMA CAMADA SEPARADA

   Máscara recorta o elemento E TODOS os filhos dele. Os
   avatares dos jogadores são filhos do #tm-mesa e ficam
   propositalmente para fora da borda — mascarar o #tm-mesa
   cortaria os quatro pela metade. Por isso o tampo virou uma
   camada própria, irmã dos avatares, e só ela leva a máscara.

   SE O NAVEGADOR NÃO SUPORTAR

   Sem `mask-composite`, as quatro máscaras se somam em vez de
   se cruzar, e a soma é opaca em todo lugar: volta a ser um
   quadrado arredondado, inteiro. Degrada para o desenho
   anterior, nunca para uma mesa quebrada.
   ============================================================ */

.tm-mesa-tampo {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 13%;

    /* Raio da mordida, proporcional ao tamanho da mesa */
    --tm-canto: calc(var(--tm-mesa) * 0.155);

    -webkit-mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    mask-composite: intersect;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.13),
        inset 0 -6px 16px rgba(0,0,0,.34);
}

/* A textura pressionada no plástico: as duas diagonais que
   saem dos cantos, como no tampo de verdade. Bem apagadas —
   é para dar leitura de material, não para virar desenho. */
.tm-mesa-tampo::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 10%;
    pointer-events: none;
    background:
        linear-gradient(to bottom right,
            transparent calc(50% - 0.5px), rgba(0,0,0,.09) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(to bottom left,
            transparent calc(50% - 0.5px), rgba(0,0,0,.09) 50%, transparent calc(50% + 0.5px));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* O card em si não pinta mais nada: quem pinta é o tampo. */
.tm-mesa-card {
    background: none !important;
    border-radius: 13%;
}

/* A borda acompanha a mesma mordida, senão sobraria um anel
   quadrado em volta de um tampo recortado. */
.tm-mesa-card::after {
    inset: -11px;
    border-radius: 14%;

    --tm-canto: calc(var(--tm-mesa) * 0.17);

    -webkit-mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    mask-composite: intersect;
}

/* A regra de mistura seguia o style inline, que agora vive no
   tampo. */
.tm-mesa-tampo[style*="background-image"] {
    background-blend-mode: overlay, normal, normal;
}


/* ============================================================
   ============================================================
   AJUSTES 2.13 — A MESA É UMA PEÇA SÓ
   ============================================================
   ============================================================

   Na foto, tampo e lateral são a MESMA peça de plástico: mesma
   cor, mesmo material, só mudando a luz que bate em cada uma.
   Eu tinha deixado a borda com o gradiente de madeira antigo,
   marrom, o que fazia parecer duas mesas empilhadas.

   Agora a borda usa a mesma cor do tampo (--tm-feltro), só que
   escurecida por uma camada preta translúcida — que é
   exatamente o que a lateral de uma mesa é: a mesma cor,
   virada para longe da luz.

   E o tampo ganhou as marcas de moldagem que a foto tem: o
   sulco acompanhando a borda, as duas diagonais saindo dos
   cantos e o disco no centro, onde fica o encaixe do
   guarda-sol.
   ============================================================ */

.tm-mesa-tampo {
    background-color: var(--tm-feltro, #1a7a3a);
}

/* A lateral: mesma cor, virada para a sombra */
.tm-mesa-card::after {
    background-color: var(--tm-feltro, #1a7a3a) !important;
    background-image:
        linear-gradient(180deg,
            rgba(0,0,0,.30) 0%,
            rgba(0,0,0,.46) 45%,
            rgba(0,0,0,.62) 100%) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.55),
        inset 0 2px 3px rgba(255,255,255,.14),
        inset 0 -3px 8px rgba(0,0,0,.35);
}

/* ---- As marcas de moldagem ---- */

.tm-mesa-tampo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;

    /* Anula o anel da versão anterior desta regra, que ficava
       sobrando por baixo das marcas novas. */
    box-shadow: none;

    background:
        /* disco central */
        radial-gradient(circle at 50% 50%,
            transparent calc(9% - 1px), rgba(0,0,0,.10) 9%,
            rgba(0,0,0,.10) calc(9% + 1px), transparent calc(9% + 2px)),

        /* as duas diagonais, de canto a canto */
        linear-gradient(to bottom right,
            transparent calc(50% - 0.6px), rgba(0,0,0,.10) 50%, transparent calc(50% + 0.6px)),
        linear-gradient(to bottom left,
            transparent calc(50% - 0.6px), rgba(0,0,0,.10) 50%, transparent calc(50% + 0.6px));
}

/* O sulco que acompanha a borda. Vai num elemento próprio para
   poder ter a mesma mordida nos cantos que o tampo — um sulco
   retangular dentro de um tampo recortado entregaria o truque. */
.tm-mesa-tampo::before {
    content: "";
    position: absolute;
    inset: 6%;
    pointer-events: none;
    border-radius: 11%;

    --tm-canto: calc(var(--tm-mesa) * 0.125);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.11),
        inset 0 1px 0 1px rgba(255,255,255,.06);

    -webkit-mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    mask-composite: intersect;
}


/* ============================================================
   A MOLDURA DO TRUCO ACOMPANHANDO A MESA

   O painel era um retângulo de cantos arredondados dentro de
   uma mesa recortada: as quatro pontas dele passavam por cima
   das mordidas e o desenho não fechava.

   Agora ele leva a MESMA máscara do tampo. E a moldura amarela
   já era `box-shadow: inset` em vez de `border` — que é
   justamente o que faz ela funcionar aqui: sombra interna é
   pintura do elemento, então a máscara a recorta junto e o
   traço amarelo entra na curva da mordida em vez de ser
   cortado fora dela.
   ============================================================ */

.tm-overlay-final,
.tm-overlay-truco {
    border-radius: 13% !important;

    --tm-canto: calc(var(--tm-mesa) * 0.155);

    -webkit-mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        radial-gradient(circle var(--tm-canto) at 0    0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 0,    transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 0    100%, transparent 98%, #000 100%),
        radial-gradient(circle var(--tm-canto) at 100% 100%, transparent 98%, #000 100%);
    mask-composite: intersect;

    /* As mordidas comem os cantos: o conteúdo precisa de mais
       folga lateral para não encostar na curva. */
    padding: 14px 22px;
}

.tm-overlay-truco {
    box-shadow: inset 0 0 0 4px rgba(241,196,15,.9);
}

/* Os botões de resposta encolhem junto, senão a folga maior os
   empurraria para fora. */
.tm-acoes-truco .tm-btn { width: 132px; }

@media (min-width: 500px) {
    .tm-acoes-truco .tm-btn { width: 150px; }
}


/* ============================================================
   PAINEL DO TRUCO — SEM MOLDURA E MAIS COMPACTO

   A borda amarela saiu. Ela vinha de quando o painel era um
   retângulo solto sobre a mesa e precisava se separar dela.
   Agora que ele tem a mesma silhueta do tampo, a moldura só
   duplicava um contorno que a própria forma já dá — e ainda
   roubava largura útil dos botões.

   Os espaços em volta dos botões somavam 29px acima (14 do
   título + 15 da lista) e 14 abaixo. Num painel com três
   botões empilhados dentro de uma mesa de 310px, isso é o que
   empurrava tudo contra as bordas.
   ============================================================ */

.tm-overlay-truco {
    box-shadow: none;
}

.tm-truco-titulo {
    margin-bottom: 8px !important;
}

.tm-acoes-truco {
    margin-top: 0;
    gap: 7px;
}

.tm-truco-relogio {
    margin-top: 8px;
}

/* Sem a moldura, a folga lateral pode encolher: sobra largura
   para os botões respirarem. */
.tm-overlay-final,
.tm-overlay-truco {
    padding: 12px 16px;
}

.tm-acoes-truco .tm-btn {
    width: 148px;
    padding: 10px 0;
}

@media (min-width: 500px) {
    .tm-acoes-truco .tm-btn { width: 164px; }
}


/* ============================================================
   A LINHA AMARELA VINHA DE OUTRO LUGAR

   Eu tinha desligado o `box-shadow` do painel, mas o traço
   amarelo que sobrou nas laterais não era sombra: é um
   `border: 3px solid #f1c40f !important` declarado no
   mesa.css. O !important passa por cima de qualquer regra
   posterior sem !important — por isso a moldura continuou lá.

   Como a borda é do próprio elemento, a máscara a recortava
   nos cantos: sobravam quatro traços soltos nas laterais, sem
   nada fechando as pontas. Fica pior do que a moldura inteira.
   ============================================================ */

.tm-overlay-truco {
    border: none !important;
    box-shadow: none !important;
}


/* ============================================================
   NÓS / ELES EM TAMANHO DE LEITURA

   Estavam em 10px — menores que qualquer outra coisa da tela,
   num lugar que o jogador consulta o tempo todo para saber de
   que lado está o placar. Dobrados para 20px, com o
   espaçamento entre letras reduzido na mesma proporção, senão
   o rótulo cresceria mais na largura do que na altura.
   ============================================================ */

.tm-placar-topo .tm-titulo {
    font-size: 20px;
    letter-spacing: 0.6px;
    font-weight: 800;
    color: rgba(255,255,255,.78);
}

@media (max-width: 380px) {
    .tm-placar-topo .tm-titulo { font-size: 17px; }
}


/* ============================================================
   BOTÕES DO FIM DE PARTIDA

   REVANCHE e SAIR AGORA não tinham regra nenhuma de layout:
   ficavam colados um no outro, sem respiro, e num par onde um
   dos botões encerra a partida essa proximidade é convite a
   toque errado.
   ============================================================ */

#botoes-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
}

#botoes-final .tm-btn {
    width: 168px;
    padding: 12px 0;
    margin: 0;
}

@media (min-width: 500px) {
    #botoes-final .tm-btn { width: 186px; }
}

/* O subtítulo (placar da revanche) também estava colado no
   título. */
#subtitulo-final {
    margin-top: 6px;
}


/* ============================================================
   ============================================================
   AJUSTES 2.15 — RESPOSTA VISUAL
   ============================================================
   ============================================================ */


/* ============================================================
   O GRITO

   A palavra grande no meio da tela. Entra estourando de 0.4
   para 1.08 e volta a 1 — o passo além do ponto é o que dá a
   sensação de impacto — e sai desbotando para cima.

   `pointer-events: none` não é detalhe: sem isso a palavra
   ficaria por cima dos botões de resposta do truco no momento
   exato em que o jogador precisa tocar neles.
   ============================================================ */

.tm-grito {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99993;

    pointer-events: none;
    user-select: none;
    white-space: nowrap;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(34px, 12vw, 64px);
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;

    text-shadow:
        0 3px 0 rgba(0,0,0,.55),
        0 0 26px rgba(0,0,0,.75);

    animation: tmGrito 1.15s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes tmGrito {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.40); }
    18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
    30%  {             transform: translate(-50%,-50%) scale(1); }
    72%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-92%) scale(1.04); }
}


/* ============================================================
   O CONFETE

   Papel picado caindo de fora da tela. Cada pedaço é um <i>
   com atraso, duração e giro próprios, sorteados no
   JavaScript — é a variação que faz não parecer um enfeite
   repetido.

   A camada é `fixed` e cobre a tela inteira, então precisa
   ignorar toque por completo: durante a queda o jogador ainda
   pode querer pedir revanche.
   ============================================================ */

.tm-confete {
    position: fixed;
    inset: 0;
    z-index: 99992;
    pointer-events: none;
    overflow: hidden;
}

.tm-confete i {
    position: absolute;
    top: -24px;
    border-radius: 2px;
    opacity: .95;
    animation-name: tmConfete;
    animation-timing-function: cubic-bezier(.25,.6,.55,1);
    animation-fill-mode: forwards;
}

@keyframes tmConfete {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    80% { opacity: 1; }
    100% {
        transform: translateY(105vh) rotate(var(--tm-giro, 360deg));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-confete { display: none; }
    .tm-grito { animation-duration: .7s; }
}


/* O subtítulo do fim ficou com duas informações; precisa
   caber sem espremer. */
#subtitulo-final {
    font-size: 13px;
    line-height: 1.35;
    max-width: 92%;
    text-align: center;
}


/* ============================================================
   GRITO E CONFETE PRECISAM VENCER O body.tm-jogo > *

   Os dois são filhos diretos do <body>, e aquela regra tem
   especificidade (0,1,1) contra (0,1,0) das classes deles.
   Nasciam `position: relative` no fim do documento — o grito
   aparecia centenas de pixels abaixo da tela e a camada de
   confete colapsava para altura zero. Nada aparecia, e não
   havia erro nenhum para investigar.

   É a terceira vez que essa regra derruba um elemento novo
   anexado ao body. Fica valendo: tudo que for para o <body>
   nesta tela precisa declarar a posição com !important.
   ============================================================ */

body.tm-jogo > .tm-grito,
.tm-grito {
    position: fixed !important;
    z-index: 99993 !important;
}

body.tm-jogo > .tm-confete,
.tm-confete {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99992 !important;
}


/* ============================================================
   O GRITO E O CONFETE PRECISAM DE !important NA DURAÇÃO

   Na linha 722 existe esta regra de acessibilidade:

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

   O seletor `*` com !important vence qualquer regra sem
   !important, por mais específica que seja. Com "Reduzir
   movimento" ligado no aparelho, a animação do grito terminava
   em 0,01ms — e ela termina em `opacity: 0`. O elemento era
   criado, animado até o fim e removido, tudo invisível. Sem
   erro nenhum, sem nada para investigar.

   Foi o mesmo que já aconteceu com a carta em voo, e a resposta
   é a mesma: isto não é decoração. O grito é a confirmação de
   que a ação aconteceu, e o confete é a resposta a uma vitória.
   Respeitamos a preferência ENCURTANDO o movimento, não
   apagando a informação.
   ============================================================ */

.tm-grito {
    animation-duration: 1.15s !important;
    animation-iteration-count: 1 !important;
}

.tm-confete i {
    animation-iteration-count: 1 !important;
}

@media (prefers-reduced-motion: reduce) {

    /* Volta a aparecer — a regra anterior escondia a camada */
    .tm-confete { display: block; }

    .tm-grito { animation-duration: .8s !important; }

    /* Queda mais curta e mais lenta: menos movimento na tela,
       mas ainda legível como comemoração. */
    .tm-confete.suave i {
        animation-duration: 2.6s !important;
    }

    .tm-confete.suave i {
        animation-name: tmConfeteSuave;
    }
}

@keyframes tmConfeteSuave {
    0%   { transform: translateY(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(58vh); opacity: 0; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.20 — O PLACAR
   ============================================================
   ============================================================

   O placar é a informação que o jogador mais consulta e era a
   faixa mais apertada da tela: 6px de respiro em cima e embaixo,
   com números de 27px espremidos entre eles.

   Ganhou altura e os rótulos NÓS/ELES cresceram junto. A mesa
   não perde nada: ela é dimensionada em vh e se ajusta sozinha.
   ============================================================ */

.tm-placar-topo {
    padding: 13px 14px !important;
    gap: 12px;
}

.tm-placar-topo .tm-titulo {
    font-size: 26px;
    letter-spacing: 0.4px;
    font-weight: 800;
    line-height: 1.05;
    color: rgba(255,255,255,.86);
}

.tm-placar-topo .tm-pontos {
    font-size: 34px !important;
    line-height: 1.05;
}

.tm-placar-topo .tm-valor-mao-texto { font-size: 11px; }

@media (min-width: 500px) {
    .tm-placar-topo { padding: 15px 18px !important; }
    .tm-placar-topo .tm-titulo { font-size: 30px; }
    .tm-placar-topo .tm-pontos { font-size: 40px !important; }
}

/* Telas baixas: o placar continua maior que era, mas cede um
   pouco para a mesa não encolher demais. */
@media (max-height: 700px) {
    .tm-placar-topo { padding: 10px 12px !important; }
    .tm-placar-topo .tm-titulo { font-size: 22px; }
    .tm-placar-topo .tm-pontos { font-size: 30px !important; }
}

@media (max-width: 380px) {
    .tm-placar-topo { gap: 8px; }
    .tm-placar-topo .tm-titulo { font-size: 21px; }
    .tm-placar-topo .tm-pontos { font-size: 28px !important; }
}


/* ============================================================
   NÓS / ELES ALINHADOS PELO MEIO

   O rótulo e o número são de tamanhos muito diferentes (26 e
   34px) e estavam alinhados pela linha de base, que é o padrão.
   Com essa diferença de corpo, a base do "NÓS" cai bem abaixo
   do centro do "4" e o conjunto parece torto.

   Alinhados pelo centro, os dois passam a dividir o mesmo eixo.
   ============================================================ */

.tm-placar-topo,
.tm-placar-topo .tm-bloco-lado {
    align-items: center;
}

.tm-placar-topo .tm-titulo {
    display: flex;
    align-items: center;
    align-self: center;
    line-height: 1;
    padding-bottom: 2px;   /* compensa a altura das maiúsculas acentuadas */
}

.tm-placar-topo .tm-pontos {
    display: flex;
    align-items: center;
    align-self: center;
    line-height: 1;
}


/* ============================================================
   NÓS / ELES ALINHADOS PELO MEIO

   O rótulo e o número têm alturas de linha muito diferentes
   (26px contra 34px). Alinhados pela base do bloco, o rótulo
   ficava caído em relação ao centro óptico do número. Subiu 2px
   e passou a alinhar pelo meio da caixa.
   ============================================================ */

.tm-placar-topo .tm-bloco-lado {
    align-items: center;
}

.tm-placar-topo .tm-titulo {
    display: flex;
    align-items: center;
    align-self: center;
    position: relative;
    top: -2px;
}


/* ============================================================
   ============================================================
   AJUSTES 2.22
   ============================================================
   ============================================================ */


/* ---------- A derrota ----------

   Cinzas, não papel picado: pedaços maiores, queda lenta,
   opacidade mais baixa. E o feltro esmaece por dois segundos,
   que é o que separa "a partida acabou" de "a partida acabou
   mal".                                                        */

.tm-confete.triste i {
    animation-duration: 3.4s !important;
    animation-timing-function: cubic-bezier(.35,.15,.6,1) !important;
    opacity: .62;
    border-radius: 1px;
}

.tm-mesa-card.tm-derrota .tm-mesa-tampo {
    animation: tmDerrota 2.6s ease-out both;
}

@keyframes tmDerrota {
    0%   { filter: none; }
    22%  { filter: saturate(.25) brightness(.62); }
    70%  { filter: saturate(.25) brightness(.62); }
    100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-confete.triste i { animation-duration: 2.8s !important; }
    .tm-mesa-card.tm-derrota .tm-mesa-tampo { animation: none; }
}


/* ---------- NÓS / ELES um pouco mais para baixo ---------- */

.tm-placar-topo .tm-titulo {
    top: 3px;
}


/* ============================================================
   A FAIXA DA MÃO NÃO ENCOLHE

   A altura da faixa vinha do conteúdo. Quando a última carta
   saía — e nas duas vezes por mão em que a mão fica vazia — a
   faixa despencava para a altura do próprio padding, e tudo
   embaixo dela subia junto: barra de ações, botão de som, a
   mesa se recentrando. Um solavanco na tela inteira a cada
   vaza, e é isso que se lê como travamento.

   Agora ela reserva a altura de uma carta o tempo todo. Vazia
   ou cheia, ocupa o mesmo espaço.
   ============================================================ */

.tm-mao {
    min-height: calc(var(--tm-mesa) * .36 + 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A carta usa 26% da mesa em largura e 36% em altura; os 24px
   são o padding vertical (12px de cada lado). Se a medida da
   carta mudar, esta linha muda junto — as duas vêm da mesma
   variável de propósito. */


/* ============================================================
   RANKING — TÍTULO LEGÍVEL E FILTRO DE LUGAR

   O título e o subtítulo usavam `var(--tm-texto)`, que vale
   #2b2b2b. Era a cor de texto de quando o site tinha fundo
   claro; sobre a penumbra do jogo virou cinza-escuro sobre
   quase-preto. O título "RANKING" simplesmente não aparecia.
   ============================================================ */

.tm-ranking-titulo {
    color: #fff !important;
    font-size: 26px;
}

.tm-ranking-sub {
    color: rgba(255,255,255,.62) !important;
    font-size: 14px;
}

/* ---------- Estado e cidade ---------- */

.tm-ranking-lugar {
    display: flex;
    gap: 10px;
    margin: 14px 0 18px;
}

.tm-ranking-lugar select {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    box-sizing: border-box;

    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    color: #fff;
    font-size: 15px;
    font-family: inherit;

    -webkit-appearance: none;
    appearance: none;

    /* A setinha vai em background porque `appearance: none`
       remove a nativa — sem isso o campo parece um input de
       texto que não aceita digitação. */
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
        linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) calc(50% + 2px),
        calc(100% - 12px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.tm-ranking-lugar select:disabled {
    opacity: .45;
    background-image: none;
}

.tm-ranking-lugar select:focus {
    outline: none;
    border-color: rgba(46,204,113,.55);
}

/* No iOS o menu do select herda o fundo claro do sistema */
.tm-ranking-lugar select option { background: #1b2830; color: #fff; }


/* ============================================================
   A VAGA É UM BOTÃO

   O círculo tracejado com "+" já parecia clicável — e não era.
   Agora é, e por isso precisa se comportar como botão: área de
   toque cheia, reação ao toque e foco visível para quem navega
   por teclado.
   ============================================================ */

button.tm-player-empty {
    padding: 0;
    background: none;
    font: inherit;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .16s ease, color .16s ease, transform .12s ease;
}

button.tm-player-empty:hover {
    border-color: rgba(46,204,113,.65);
    color: rgba(46,204,113,.95);
}

button.tm-player-empty:active { transform: scale(.93); }

button.tm-player-empty:focus-visible {
    outline: 2px solid rgba(46,204,113,.8);
    outline-offset: 3px;
}


/* ============================================================
   O BALÃO DA DICA

   Ancorado no rodapé da tela, com o personagem entrando pela
   direita e o balão à esquerda dele. Fica FORA do caminho dos
   controles da mesa: quem quiser trocar de time ou adicionar
   bot enquanto lê a dica, consegue.

   Por isso a camada não captura toque — só o balão e o
   personagem, que também não precisam capturar. A dica sai
   sozinha; não é um obstáculo a ser dispensado.
   ============================================================ */

.tm-dica {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    z-index: 70;

    display: flex;
    justify-content: center;
    pointer-events: none;

    animation: tmDicaEntra .42s cubic-bezier(.2,.9,.3,1.05) both;
}

.tm-dica[hidden] { display: none; }

.tm-dica.saindo {
    animation: tmDicaSai .32s ease-in both;
}

@keyframes tmDicaEntra {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tmDicaSai {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(20px); }
}

.tm-dica-caixa {
    display: flex;
    align-items: flex-end;
    gap: 4px;

    width: 100%;
    max-width: 520px;
    padding: 0 12px;
    box-sizing: border-box;
}

.tm-dica-balao {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;

    margin-bottom: 22px;
    padding: 13px 15px;

    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* O rabicho, apontando para o personagem */
.tm-dica-balao::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 14px;
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 9px solid transparent;
}

.tm-dica-balao p {
    margin: 0;
    color: #17222a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.tm-dica-personagem {
    flex: 0 0 auto;
    width: auto;
    height: 132px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 -4px 18px rgba(0,0,0,.45));
}

@media (max-width: 380px) {
    .tm-dica-personagem { height: 108px; }
    .tm-dica-balao { font-size: 13px; padding: 11px 13px; }
}

/* Telas baixas: o personagem cede, o texto fica */
@media (max-height: 640px) {
    .tm-dica-personagem { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-dica { animation-duration: .2s !important; }
    .tm-dica.saindo { animation-duration: .2s !important; }
}


/* ============================================================
   O AVISO DE PRAZO

   Fica logo abaixo dos times, onde o olho já está. Muda de cor
   nos últimos oito segundos — antes disso um aviso vermelho
   piscando durante vinte e cinco segundos vira ruído e as
   pessoas param de ler.
   ============================================================ */

.tm-prazo {
    margin: 10px auto 0;
    padding: 9px 14px;
    max-width: 320px;

    border-radius: 12px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .2px;

    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.tm-prazo[hidden] { display: none; }

.tm-prazo.urgente {
    background: rgba(224,75,60,.16);
    border-color: rgba(224,75,60,.40);
    color: #f0938a;
    animation: tmPrazoPulso 1s ease-in-out infinite;
}

@keyframes tmPrazoPulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .68; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-prazo.urgente { animation: none; }
}


/* ============================================================
   PÁGINA DE RESULTADO

   Dupla vencedora em cima, perdedora embaixo. A hierarquia é
   dada pela cor da borda lateral e pela opacidade, não pelo
   tamanho: encolher a dupla perdedora seria humilhá-la, e essas
   pessoas vão jogar de novo daqui a dois minutos.
   ============================================================ */

.tm-resultado-container {
    max-width: 620px;
    margin: 0 auto;
    padding: 22px 16px 40px;
}

.tm-resultado-vazio {
    text-align: center;
    color: rgba(255,255,255,.55);
    padding: 40px 0;
}

.tm-resultado-topo { text-align: center; margin-bottom: 26px; }

.tm-resultado-titulo {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .3px;
}

.tm-resultado-placar {
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.tm-resultado-placar span {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    margin: 0 8px;
    vertical-align: middle;
}

.tm-resultado-dupla {
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    border-left: 4px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.tm-resultado-dupla.venceu { border-left-color: #2ecc71; }
.tm-resultado-dupla.perdeu { border-left-color: rgba(224,75,60,.7); opacity: .88; }

.tm-resultado-dupla h2 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.50);
}

.tm-resultado-jogador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.tm-resultado-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.22);
    flex-shrink: 0;
}

.tm-resultado-info { min-width: 0; }

.tm-resultado-nome {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-resultado-stats {
    display: block;
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

.tm-resultado-acoes {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.tm-btn-compartilhar {
    background: linear-gradient(135deg, #2ecc71, #1e9e53);
    color: #fff;
}

.tm-btn-secundario {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    text-align: center;
    text-decoration: none;
}

.tm-rank-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
}

.tm-rank-acoes .tm-btn-sala { width: 100%; max-width: 300px; }


/* ============================================================
   A ABERTURA EM TELA CHEIA

   Cobre tudo. Diferente do balão que existia na sala, aqui a
   intenção é justamente impedir a interação: enquanto os
   quatro não chegaram, não há jogada válida a fazer, e uma
   mesa meio operável convida a tocar em carta que ainda não é
   sua vez.

   Por isso `pointer-events` fica ativo — é uma barreira, não
   um enfeite — e não há botão de fechar. Ela sai sozinha.
   ============================================================ */

.tm-abertura {
    position: fixed !important;
    inset: 0 !important;

    /* 99997: acima de TUDO que o jogo desenha.

       As camadas que o JavaScript anexa ao body durante a mão
       são 9000 (embaralhamento), 9100 (carta indo para a mesa),
       9999 (carta em movimento) e 5000 (recolhimento da vaza).
       Todas ficam embaixo.

       O único que fica em cima é a barra de conexão, em 99998, e
       de propósito: se a internet cair no meio do carregamento,
       a tela de carregando não sai nunca. Esconder o aviso ali
       seria deixar a pessoa olhando um carregando eterno sem
       saber por quê. Ele é um bilhete do sistema, não um pedaço
       da mesa vazando.

       O número sozinho não bastava — ver a nota no mesa.php
       sobre o contexto de empilhamento. Ele só passou a valer
       depois que a tela virou filha direta do body. */
    z-index: 99997 !important;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background:
        radial-gradient(ellipse at 50% 30%, rgba(20,32,40,.94) 0%, rgba(8,13,17,.98) 70%),
        #0b1116;

    /* SEM ANIMAÇÃO DE ENTRADA.

       Havia uma, esmaecendo de zero até um em 0,3s. Fazia sentido
       quando a tela era criada pelo JavaScript depois que a
       página já estava no ar — aparecer de estalo seria brusco.

       Agora ela nasce junto com a página, e o esmaecer virou
       exatamente o problema que ela deveria resolver: por três
       décimos de segundo a mesa aparece POR TRÁS da tela
       semitransparente. Medido: opacidade 0,98 quando o
       navegador terminou de pintar — quase pronta, e ainda
       assim vazando.

       O esmaecer de SAÍDA continua: ali ele revela algo que a
       pessoa quer ver, em vez de esconder algo que ela não
       deveria ter visto. */
}

.tm-abertura[hidden] { display: none; }


/* ------------------------------------------------------------
   ENQUANTO A TELA DE CARREGANDO ESTÁ NO AR, NADA MAIS DESENHA

   O <html> ganha a classe .tm-abrindo enquanto a tela está
   coberta. Debaixo dela, as camadas de animação que o
   JavaScript anexa ao body simplesmente não são desenhadas.

   Isso é redundante com o z-index — e é redundante de
   propósito. O empilhamento já falhou uma vez aqui, calado, e
   o sintoma foi a carta voando por cima da tela de espera. Uma
   trava que depende de um número só volta a falhar no dia em
   que alguém anexar mais uma camada com um número maior. Esta
   não depende de número nenhum: não existe z-index que vença
   `display: none`.

   Só os filhos DIRETOS do body entram na regra. As cartas da
   mesa e da mão moram dentro do container e já estão cobertas
   pela tela; escondê-las aqui seria apagar a mesa que o jogo
   está montando por baixo para revelar depois.
   ------------------------------------------------------------ */
html.tm-abrindo > body > .tm-camada-baralho,
html.tm-abrindo > body > .tm-carta-mov,
html.tm-abrindo > body > .tm-carta,
html.tm-abrindo > body > .tm-carta-voando {
    display: none !important;
}

.tm-abertura.saindo { animation: tmAberturaSai .38s ease-in both; }

@keyframes tmAberturaSai { from { opacity: 1; } to { opacity: 0; } }

.tm-abertura-conteudo {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 0 16px 34px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}


/* ---------- A DICA ----------

   Uma linha só, embaixo das cartas que saltam. O tamanho é
   deliberadamente modesto: isto é o que se lê enquanto se espera,
   não o motivo de estar na tela. Uma versão anterior tinha dica,
   título e contagem juntos, e virou tela de leitura — quem abria
   a mesa parava para ler em vez de esperar.

   `min-height` reserva duas linhas. Sem isso, uma dica curta e
   uma longa mudam a altura do bloco e as cartas da animação
   pulam de lugar entre uma partida e outra. */

.tm-abertura-dica {
    margin: 0;
    min-height: 2.9em;

    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    color: rgba(255, 255, 255, .62);

    animation: tmDicaEntra .5s ease-out .35s both;
}

.tm-abertura-dica span {
    display: block;
    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 187, 51, .75);
}

/* Entra depois das cartas, não junto: o olho vai primeiro para
   o movimento e só então encontra o texto parado. */
@keyframes tmDicaEntra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (max-height: 700px) {
    .tm-abertura-conteudo { gap: 18px; padding-bottom: 24px; }
    .tm-abertura-dica { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-abertura,
    .tm-abertura.saindo { animation-duration: .2s !important; }
}


/* ============================================================
   O BOTÃO DE CONFIRMAR DURANTE A CONTAGEM

   O número fica dentro do próprio botão em que a pessoa vai
   tocar. Um aviso separado, em outro canto da tela, disputaria
   atenção com o botão — e é o botão que resolve.

   O vermelho entra só nos últimos quatro segundos. Antes disso
   é informação; a partir daí é urgência, e urgência que dura
   dez segundos deixa de ser lida.
   ============================================================ */

#btn-pronto.contando {
    background: linear-gradient(135deg, #2ecc71, #1e9e53);
    color: #fff;
}

#btn-pronto.contando.urgente {
    background: linear-gradient(135deg, #e8563f, #c0392b);
    animation: tmContagemPulso .9s ease-in-out infinite;
}

@keyframes tmContagemPulso {
    0%, 100% { transform: none; }
    50%      { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    #btn-pronto.contando.urgente { animation: none; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.31 — EMOJI, PLACAR E NOMES
   ============================================================
   ============================================================ */


/* ---------- A reação ----------

   O caractere entra por cima do emoji neutro, no mesmo círculo.
   Trocar o <img> por texto no lugar faria o círculo mudar de
   tamanho no meio da animação.                                */

.tm-emoji-char {
    position: absolute;
    inset: 0;
    display: none;

    align-items: center;
    justify-content: center;

    font-size: 15px;
    line-height: 1;

    background: #fff;
    border-radius: 50%;
}

.tm-emoji.reagindo .tm-emoji-char { display: flex; }
.tm-emoji.reagindo img { visibility: hidden; }

@media (min-width: 768px) {
    .tm-emoji-char { font-size: 18px; }
}


/* ---------- O menu de escolha ----------

   Cinco alvos de 44px, que é o mínimo para dedo. Numa fileira
   só: duas linhas exigiriam mirar, e isso aqui é para ser
   tocado sem pensar, no meio da jogada.                       */

.tm-emoji-menu {
    display: flex;
    gap: 4px;
    padding: 7px;

    background: linear-gradient(165deg, #24343f, #16222b);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0,0,0,.55);

    animation: tmEmojiMenu .16s cubic-bezier(.2,.9,.3,1.05);
}

@keyframes tmEmojiMenu {
    from { opacity: 0; transform: translateY(6px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

.tm-emoji-menu button {
    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.06);

    font-size: 23px;
    line-height: 1;
    cursor: pointer;

    transition: background .14s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.tm-emoji-menu button:hover { background: rgba(255,255,255,.16); }
.tm-emoji-menu button:active { transform: scale(.88); }

@media (prefers-reduced-motion: reduce) {
    .tm-emoji-menu { animation: none; }
}


/* ---------- NÓS / ELES 2px acima ---------- */

.tm-placar-topo .tm-titulo { top: 1px; }


/* ============================================================
   O NOME DO JOGADOR PODE USAR DUAS LINHAS

   Estava em `white-space: nowrap` com reticências, então
   "Gordo de Contagem" virava "GORDO DE C…" — quatro jogadores
   e nenhum identificável. Numa mesa em que se joga com
   conhecido, o nome é a informação.

   Duas linhas e ponto: a terceira empurraria o nome sobre as
   cartas.
   ============================================================ */

.tm-pos .nome {
    white-space: normal;
    max-width: 108px;
    line-height: 1.15;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Nome de uma palavra só, comprido, não pode estourar a
       largura da coluna. */
    overflow-wrap: anywhere;
}

.tm-pos.left .nome,
.tm-pos.right .nome { max-width: 92px; }

@media (max-width: 380px) {
    .tm-pos .nome { max-width: 92px; }
    .tm-pos.left .nome,
    .tm-pos.right .nome { max-width: 80px; }
}

@media (min-width: 768px) {
    .tm-pos .nome { max-width: 130px; }
    .tm-pos.left .nome,
    .tm-pos.right .nome { max-width: 112px; }
}


/* ============================================================
   O EMOJI CRESCE ENQUANTO REAGE

   O selo neutro tem 17px — tamanho de indicador, não de
   mensagem. Um caractere ali dentro fica ilegível, ainda mais
   nos avatares laterais.

   Enquanto a reação está no ar ele vai a 34px e volta. Cresce a
   partir do centro do selo, então não desloca o avatar nem o
   nome embaixo: só transform, sem tocar no layout.
   ============================================================ */

.tm-emoji.reagindo {
    width: 34px !important;
    height: 34px !important;
    margin-left: -8.5px;    /* metade do que cresceu, para não deslocar */
    margin-top: -8.5px;
    z-index: 4;
}

.tm-emoji.reagindo .tm-emoji-char {
    font-size: 21px;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
    animation: tmEmojiPop .3s cubic-bezier(.2,.9,.3,1.25);
}

@keyframes tmEmojiPop {
    0%   { transform: scale(.4); opacity: 0; }
    55%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 768px) {
    .tm-emoji.reagindo {
        width: 40px !important;
        height: 40px !important;
        margin-left: -8px;
        margin-top: -8px;
    }
    .tm-emoji.reagindo .tm-emoji-char { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-emoji.reagindo .tm-emoji-char { animation-duration: .15s; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.32
   ============================================================
   ============================================================ */


/* ============================================================
   O EMOJI NÃO ABRIA PORQUE NINGUÉM CONSEGUIA ACERTAR NELE

   O selo tem 17px. A recomendação para alvo de toque é 44px, e
   não é conservadorismo: 17px é menor que a área de contato de
   um dedo adulto. O toque quase sempre caía no avatar, que fica
   logo atrás e ocupa 60px.

   O código estava certo — o alvo é que era pequeno demais.

   A correção não muda o desenho: um pseudo-elemento invisível
   estende a área sensível para 45px em volta do selo. O que se
   vê continua sendo uma bolinha de 17px; o que responde ao dedo
   é um quadrado de 45px.

   Só no SEU selo. Nos outros a área continua pequena, porque
   ali não há nada para tocar.
   ============================================================ */

.tm-emoji.meu {
    cursor: pointer;
    z-index: 5;
}

.tm-emoji.meu::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    /* invisível, mas capturando o toque */
}

/* Uma dica de que dá para tocar: sem isso o selo parece
   decoração, que foi o que ele sempre foi até agora. */
.tm-emoji.meu::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(46,204,113,.55);
    pointer-events: none;
}

.tm-emoji.meu.reagindo::after { border-color: transparent; }


/* ============================================================
   ESPAÇO PARA AS DUAS LINHAS DO NOME

   A segunda linha existia mas era cortada: a etiqueta tinha
   altura de uma linha só, então "METALEIRO MINEIRO" mostrava a
   primeira e escondia metade da segunda atrás da mesa.
   ============================================================ */

.tm-pos .nome {
    height: auto;
    min-height: 0;
    padding: 4px 9px;
    border-radius: 10px;
    max-height: none;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Os laterais e o de baixo ganham folga extra: são os que
   encostavam no feltro. */
.tm-pos.left  { z-index: 12; }
.tm-pos.right { z-index: 12; }
.tm-pos.top   { z-index: 12; }

.tm-pos.top .nome    { margin-top: 4px; }
.tm-pos.bottom .nome { margin-top: 4px; }


/* ============================================================
   PERFIL — "TROCAR FOTO" ABAIXO DA FOTO, TUDO CENTRADO
   ============================================================ */

.tm-perfil-avatar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.tm-perfil-avatar-box .tm-btn-avatar {
    position: static;
    display: inline-block;
    margin: 0;
    text-align: center;
}


/* ============================================================
   "VOLTAR ÀS MESAS" LEGÍVEL

   O botão secundário nasceu para fundo claro: texto quase
   branco sobre superfície branca. No tema escuro ele
   desapareceu — o botão estava lá, o texto não.
   ============================================================ */

.tm-btn-sala-sec,
.tm-btn-secundario {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: #ffffff !important;
}

.tm-btn-sala-sec:hover,
.tm-btn-secundario:hover {
    background: rgba(255,255,255,.16) !important;
}


/* ============================================================
   ÚLTIMAS PARTIDAS — O TEXTO ESTAVA APAGADO

   Placar e nome do adversário saíam em cinza clarinho sobre
   fundo claro. Era a informação principal da linha, e era a
   única que não dava para ler.
   ============================================================ */

.tm-partida-info,
.tm-partida-linha,
.tm-historico-item .tm-hist-texto {
    color: #17222a !important;
    opacity: 1 !important;
    font-weight: 700;
}

.tm-partida-data,
.tm-historico-item .tm-hist-data {
    color: rgba(23,34,42,.62) !important;
    opacity: 1 !important;
}


/* A exigência de patente na lista de mesas. Cor por degrau: o
   jogador reconhece a própria patente antes de ler o texto. */
.tm-sala-nivel {
    display: inline-block;

    /* A caixa de informações do cartão é uma coluna flex, e item
       de flex estica na largura toda: o `inline-block` daqui era
       ignorado e a pastilha saía do tamanho da coluna, não do
       texto. Com "BRONZE OU +" quase ninguém notava — a palavra é
       longa. Com "LIVRE" ela virou uma barra cinza com uma
       palavrinha no canto. */
    align-self: flex-start;

    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;

    /* A etiqueta é uma etiqueta: não quebra.

       Sem isto ela quebrava dentro da pílula quando o cartão
       tinha o botão comprido ("FICAR NA DE FORA") comendo a
       largura — e o cartão inteiro crescia por causa de duas
       palavras. Encurtar o texto ajudou; garantir a linha única
       é o que resolve. */
    white-space: nowrap;
}

/* A mesa sem exigência tem etiqueta como as outras, mas
   apagada: ela informa que NÃO há porteiro. Com a cor de uma
   patente, LIVRE pareceria mais uma delas — e a etiqueta existe
   justamente para dizer o contrário. */
.tm-nivel-livre  { background: rgba(255,255,255,.07);  color: rgba(255,255,255,.55); }

.tm-nivel-bronze { background: rgba(176,110,54,.22); color: #d99a5e; }
.tm-nivel-prata  { background: rgba(190,199,207,.20); color: #cfd6dd; }
.tm-nivel-ouro   { background: rgba(241,196,15,.18);  color: #f1c40f; }
.tm-nivel-mestre { background: rgba(155,89,182,.20);  color: #c08fd8; }
.tm-nivel-lenda  { background: rgba(231,76,60,.20);   color: #f0938a; }


/* ============================================================
   A PRÉ-VISUALIZAÇÃO DO CARTAZ

   A imagem tem 9:16 — mais alta que a maioria das telas em pé.
   Por isso a altura manda: `max-height` com a largura seguindo
   por `auto`. Ao contrário, num celular estreito a imagem
   passaria da tela e o botão de compartilhar ficaria fora de
   alcance, que é justamente o botão que a tela existe para
   oferecer.
   ============================================================ */

.tm-cartaz-luz {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(4,8,11,.93);
    padding: 16px;
    box-sizing: border-box;

    animation: tmCartazEntra .22s ease-out;
}

@keyframes tmCartazEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tm-cartaz-painel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-height: 100%;
}

.tm-cartaz-img {
    max-height: calc(100vh - 150px);
    max-width: 100%;
    width: auto;
    height: auto;

    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
}

.tm-cartaz-acoes {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 420px;
}

.tm-cartaz-acoes .tm-btn {
    flex: 1;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .tm-cartaz-luz { animation: none; }
}


/* ============================================================
   O EMOJI SAÍA COMO CÍRCULO BRANCO

   Duas causas somadas, e as duas invisíveis no código:

   1. O balão é branco e eu não declarei a cor do texto. O
      caractere herdava o branco do tema — branco sobre branco.

   2. Vários emojis têm uma variante em TEXTO, monocromática,
      pintada com a cor da fonte. Sem forçar a variante colorida,
      o sistema pode escolher justamente essa.

   A cor escura resolve a primeira. A pilha de fontes de emoji
   e o seletor \FE0F no JavaScript resolvem a segunda.
   ============================================================ */

.tm-emoji-char,
.tm-emoji-menu button,
.tm-chat-menu button .tm-chat-emoji {
    color: #17222a;
    font-family:
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
        "Android Emoji", "EmojiSymbols", sans-serif;
}


/* ============================================================
   O BALÃO DE FALA

   O botão fica à esquerda do avatar, espelhando o selo de
   reação à direita: reagir de um lado, falar do outro. Mesmo
   alvo de toque generoso do emoji, pelo mesmo motivo.
   ============================================================ */

.tm-chat-abre {
    position: absolute;
    left: -4px;
    bottom: -4px;
    z-index: 5;

    width: 22px;
    height: 22px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid rgba(13,21,27,.9);
    border-radius: 50%;
    background: #fff;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tm-chat-abre svg { fill: #17222a; }

/* Área sensível de 45px sem mudar o desenho — o botão tem 22px,
   metade do mínimo para dedo. */
.tm-chat-abre::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
}

.tm-chat-abre:active { transform: scale(.9); }


/* ---------- A lista de frases ---------- */

.tm-chat-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;

    width: min(300px, calc(100vw - 24px));
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    background: linear-gradient(165deg, #24343f, #16222b);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,.6);

    animation: tmEmojiMenu .16s cubic-bezier(.2,.9,.3,1.05);
}

.tm-chat-menu button {
    padding: 11px 13px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.9);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    line-height: 1.3;

    cursor: pointer;
    transition: background .14s ease;
    -webkit-tap-highlight-color: transparent;
}

.tm-chat-menu button:hover  { background: rgba(255,255,255,.15); }
.tm-chat-menu button:active { background: rgba(46,204,113,.24); }

/* ---------- A marca do recado ----------

   Um ponto antes da frase, só nas que o parceiro bot entende
   como sinal. Verde para "tenho carta boa", vermelho para
   "minhas cartas estão ruins".

   Um ponto e não uma palavra: a lista é escolhida em dois
   segundos no meio da mão, e uma legenda em cada linha faria a
   pessoa ler duas vezes para mandar uma frase. Quem quiser saber
   o que é, segura o dedo e o título aparece. */

.tm-frase-sinal {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    vertical-align: middle;
    flex: 0 0 auto;
}

.tm-frase-sinal.boa  { background: #2ecc71; }
.tm-frase-sinal.ruim { background: #e74c3c; }


/* ---------- A fala na mesa ---------- */

.tm-fala {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 20;

    width: max-content;
    max-width: 190px;
    padding: 9px 12px;

    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.5);

    color: #17222a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.28;
    text-align: center;

    pointer-events: none;
}

.tm-fala[hidden] { display: none; }

/* O rabicho apontando para o avatar */
.tm-fala::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-top: 8px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.tm-fala.entrando {
    animation: tmFala .26s cubic-bezier(.2,.9,.3,1.15);
}

@keyframes tmFala {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Nos jogadores de cima a fala nasceria fora da tela */
.tm-pos.top .tm-fala {
    bottom: auto;
    top: calc(100% + 10px);
}

.tm-pos.top .tm-fala::after {
    bottom: auto;
    top: -7px;
    border-top: none;
    border-bottom: 8px solid #fff;
}

@media (prefers-reduced-motion: reduce) {
    .tm-fala.entrando { animation: none; }
    .tm-chat-menu { animation: none; }
}


/* ============================================================
   O PAINEL DA MÃO DE DEZ

   Mais alto que o do truco porque carrega as três cartas do
   parceiro. Como o overlay é do tamanho da mesa e a mesa é
   quadrada, o conteúdo rola por dentro quando não couber — em
   tela baixa, a alternativa seria o botão "VAMOS JOGAR" ficar
   fora do alcance.
   ============================================================ */

.tm-overlay-dez {
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: 12px 14px;
}

.tm-dez-titulo {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #f1c40f;
    text-align: center;
}

.tm-dez-sub {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255,255,255,.72);
    text-align: center;
}

.tm-dez-rotulo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-align: center;
    margin-bottom: 5px;
}

.tm-dez-cartas {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 12px;
}

/* As cartas do parceiro entram menores: são referência para
   decidir, não cartas para jogar. */
.tm-dez-cartas .tm-carta {
    width:  calc(var(--tm-mesa) * .17) !important;
    height: calc(var(--tm-mesa) * .24) !important;
    font-size: 9px !important;
}

.tm-dez-acoes {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
}

.tm-dez-acoes .tm-btn {
    width: 150px;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-dez-vou { background: linear-gradient(135deg,#2ecc71,#1e9e53); color: #fff; }
.tm-dez-nao { background: linear-gradient(135deg,#e8563f,#c0392b); color: #fff; }

.tm-dez-esperando {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,.66);
    text-align: center;
    line-height: 1.35;
}

.tm-dez-relogio {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .6px;
    color: rgba(255,255,255,.45);
}

.tm-dez-relogio #tm-dez-seg {
    font-size: 19px;
    font-weight: 900;
    color: #fff;
    margin-right: 3px;
}

.tm-dez-relogio #tm-dez-seg.urgente { color: #ff6b5e; }


/* ============================================================
   ============================================================
   AJUSTES 2.36
   ============================================================
   ============================================================ */


/* ============================================================
   A LOGO NOS CANTOS DA MESA

   Ela ocupava o tampo inteiro, atrás das cartas. Numa mesa de
   bar a marca está na borda, no cinzeiro, no guarda-sol — nunca
   no meio, onde as cartas caem. Grande no centro ela disputa
   com a única coisa que o jogador precisa enxergar.

   Quatro cópias da mesma imagem, uma por canto, a 20% do lado.
   Quando `--tm-logo` não existe, `var()` deixa a propriedade
   inválida e o navegador cai em `none` — mesa sem tema continua
   limpa, sem precisar de regra extra.
   ============================================================ */

.tm-mesa-tampo {
    background-image: var(--tm-logo), var(--tm-logo), var(--tm-logo), var(--tm-logo);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 11% 11%, 89% 11%, 11% 89%, 89% 89%;
}

.tm-mesa-tampo[style*="--tm-logo"] {
    /* A marca fica discreta: presença, não anúncio. */
    background-blend-mode: soft-light;
    opacity: 1;
}


/* ============================================================
   LOBBY — STATUS AO LADO DO NÚMERO E FUNDO DA COR DA MESA
   ============================================================ */

/* O avatar da mesa recebe a cor dela: a marca passa a ter
   contexto, e mesa sem logo deixa de ser um quadrado cinza. */
.tm-sala-logo {
    background: var(--tm-cor-mesa, rgba(255,255,255,.08)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
}

.tm-sala-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Status e lotação na mesma linha: são a mesma pergunta —
   "dá para entrar agora?" */
/* ------------------------------------------------------------
   O RODAPÉ DO CARTÃO É UMA LINHA SÓ

   Ele tem duas coisas — o estado da mesa e a lotação — e as
   duas juntas respondem "dá para entrar agora". Com
   `flex-wrap: wrap`, a etiqueta mais comprida quebrava em duas
   linhas e o cartão crescia 29px: "EM JOGO" virava "EM" em cima
   de "JOGO", e no iPhone SE o rodapé chegava a três linhas.

   O efeito colateral era pior que o defeito em si: numa lista,
   um cartão mais alto que o vizinho parece um cartão com alguma
   coisa a mais, e ali não havia nada a mais — era só a palavra
   que não coube.

   Medido em 320, 360 e 390: com `nowrap` os dois cabem lado a
   lado em todas, sem vazar da largura da tela.
------------------------------------------------------------ */
.tm-sala-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

.tm-sala-rodape > div { white-space: nowrap; }


/* ============================================================
   DESKTOP — OS BOTÕES ACOMPANHAM A LARGURA DA MESA

   Em tela larga a barra de ações se esticava de ponta a ponta
   enquanto a mesa ficava com 400px no centro. O jogador olhava
   para o meio e clicava a 700px dali.
   ============================================================ */

@media (min-width: 900px) {

    .tm-acoes {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(560px, 92vw);
        border-radius: 16px 16px 0 0;
    }

    .tm-mao {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(560px, 92vw);
    }
}


/* ============================================================
   SALA — VAGA REDONDA, TEMA QUADRADO

   A vaga é uma pessoa que vai chegar, e pessoa aqui é círculo:
   é o mesmo formato do avatar que vai ocupar aquele lugar.
   O tema é um objeto, e objeto é quadrado — além de que a marca
   dentro de um círculo sempre sai cortada nos cantos.
   ============================================================ */

.tm-player-empty,
button.tm-player-empty {
    border-radius: 50% !important;
}

.tm-tema-opcao,
.tm-temas-lista button,
.tm-temas-lista .tm-tema {
    border-radius: 12px !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}


/* A contagem regressiva da abertura. Grande o bastante para ser
   lida de longe, com o celular ainda na mão errada. */




@keyframes tmConta {
    0%   { opacity: 0; transform: scale(1.5); }
    22%  { opacity: 1; transform: scale(1); }
    100% { opacity: .85; transform: scale(1); }
}

@media (max-height: 700px) {
}

@media (prefers-reduced-motion: reduce) {
}


/* ============================================================
   DESKTOP — A FAIXA DE BAIXO ALINHADA COM A MESA

   No celular a mão e as ações ocupam a largura toda, e isso
   está certo: a largura toda é o tamanho da mesa.

   No desktop a mesa tem largura limitada e as duas faixas
   continuavam esticando de ponta a ponta da janela. O resultado
   é uma mesa de 34vh no meio e dois trilhos de 1600px embaixo,
   sem relação visual nenhuma entre eles.

   `--tm-mesa` é a mesma variável que dimensiona a mesa, então
   as faixas passam a acompanhá-la por construção: mudar o
   tamanho da mesa move as três coisas juntas.
   ============================================================ */

@media (min-width: 768px) {

    .tm-mao,
    .tm-acoes {
        left: 50%;
        right: auto;
        transform: translateX(-50%);

        width: 100%;
        max-width: calc(var(--tm-mesa) * 1.55);

        border-radius: 18px 18px 0 0;
    }

    .tm-acoes {
        border-radius: 18px;
        bottom: calc(env(safe-area-inset-bottom) + 10px);
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* Os três botões dividem a faixa em partes iguais, em vez
       de cada um ter largura própria e sobrar buraco no meio. */
    .tm-acoes .tm-btn-acao {
        flex: 1 1 0;
        max-width: none;
    }

    .tm-mao {
        bottom: calc(var(--tm-mao-base, 82px) + env(safe-area-inset-bottom));
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* Aqui a mão sobe 20px a mais que no celular, para a barra
       de ações poder descolar do fim da tela. A reserva do
       container lê a MESMA variável, então a mesa continua
       centralizada sem ninguém ter que somar nada à mão. */
    body.tm-jogo .tm-container {
        --tm-mao-base: calc(var(--tm-acoes-alt) + 20px);
    }
}

/* Telas largas de verdade: a mesa cresce, e com ela as faixas.
   O teto evita que num monitor ultrawide os botões fiquem tão
   distantes um do outro que exijam mover o braço. */
@media (min-width: 1200px) {

    .tm-mao,
    .tm-acoes { max-width: min(calc(var(--tm-mesa) * 1.7), 720px); }
}


/* ---------- Janela da revanche e a de fora ---------- */

.tm-revanche-aviso {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.7);
    text-align: center;
    max-width: 260px;
}

.tm-revanche-aviso[hidden] { display: none; }

#btn-revancha.urgente {
    background: linear-gradient(135deg,#e8563f,#c0392b) !important;
}

/* ============================================================
   TEMA DA MESA EM UMA LINHA SÓ

   Com seis temas e quadros de 96px, o sexto caía para a segunda
   linha e empurrava os botões para fora da tela. Em vez de
   tamanho fixo, cada quadro passa a valer 1/6 da faixa: entrar
   um sétimo tema encolhe todos juntos, sem quebrar linha.
   ============================================================ */

.tm-temas-lista {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.tm-temas-lista::-webkit-scrollbar { display: none; }

.tm-temas-lista .tm-tema,
.tm-temas-lista button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 92px;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

.tm-temas-lista img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ============================================================
   ============================================================
   AJUSTES 2.38
   ============================================================
   ============================================================ */


/* ============================================================
   TEMA DA MESA EM UMA LINHA SÓ

   O ajuste anterior mirou `.tm-temas-lista`, que não existe: o
   contêiner é `.tm-mesas-grid` e cada opção é `.tm-mesa-tema`.
   Por isso nada mudou.

   Agora cada quadro vale uma fração da faixa em vez de ter
   largura fixa. Entrar um sétimo tema encolhe todos juntos, sem
   quebrar linha — e a rolagem lateral existe como último
   recurso, para quando encolher mais deixaria de ser clicável.
   ============================================================ */

.tm-mesas-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    justify-content: center;
    align-items: center;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.tm-mesas-grid::-webkit-scrollbar { display: none; }

.tm-mesa-tema {
    flex: 1 1 0 !important;
    min-width: 44px !important;      /* alvo de toque */
    max-width: 74px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 6px !important;
    box-sizing: border-box;
}

.tm-mesa-tema .tm-mesa-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ============================================================
   A LOGO DO TEMA: UMA SÓ, NO MEIO

   Quatro cópias nos cantos viraram padrão de papel de parede —
   o olho lê textura, não marca. Uma no centro, com o dobro do
   tamanho, é a mesa de bar: uma marca, uma vez.
   ============================================================ */

.tm-mesa-tampo {
    background-image: var(--tm-logo);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center center;
}


/* ============================================================
   O JOGADOR DE BAIXO ENCOSTA NA MESA

   Ele estava a 0,36 da largura da mesa abaixo dela, longe o
   bastante para parecer de outra cena. Subindo até sobrepor a
   borda, ele passa a fazer parte da mesa — que é a posição de
   quem está sentado nela.

   O z-index garante que ele fique POR CIMA do tampo, e não
   sumindo atrás dele.
   ============================================================ */

.tm-pos.bottom {
    bottom: calc(var(--tm-mesa) * -0.22) !important;
    z-index: 14;
}

@media (min-width: 500px) {
    .tm-pos.bottom { bottom: calc(var(--tm-mesa) * -0.20) !important; }
}


/* ============================================================
   O TRANCO DO TRUCO

   A mesa inteira sacode quando alguém canta. É o equivalente
   visual de bater a mão na mesa — e o truco é a única jogada do
   jogo que se anuncia gritando.

   A intensidade cresce com a aposta: truco balança, seis
   balança mais, nove sacode. Quem joga aprende a reconhecer o
   tamanho da encrenca antes de ler o painel.

   Sacode o CONTÊINER, não o tampo: o tampo tem máscara e
   filtro, e animar transform nele força o navegador a
   re-rasterizar o feltro inteiro — foi o que causou a piscada
   na versão 2.13.
   ============================================================ */

@keyframes tmTruco1 {
    0%,100% { transform: translate3d(0,0,0); }
    15%  { transform: translate3d(-5px,2px,0); }
    35%  { transform: translate3d(4px,-2px,0); }
    55%  { transform: translate3d(-3px,1px,0); }
    75%  { transform: translate3d(2px,0,0); }
}

@keyframes tmTruco2 {
    0%,100% { transform: translate3d(0,0,0) rotate(0); }
    12%  { transform: translate3d(-9px,3px,0) rotate(-.35deg); }
    30%  { transform: translate3d(8px,-4px,0) rotate(.35deg); }
    48%  { transform: translate3d(-7px,3px,0) rotate(-.25deg); }
    68%  { transform: translate3d(5px,-2px,0) rotate(.2deg); }
    86%  { transform: translate3d(-3px,1px,0) rotate(0); }
}

@keyframes tmTruco3 {
    0%,100% { transform: translate3d(0,0,0) rotate(0); }
    10%  { transform: translate3d(-14px,5px,0) rotate(-.6deg); }
    26%  { transform: translate3d(13px,-6px,0) rotate(.6deg); }
    42%  { transform: translate3d(-11px,5px,0) rotate(-.5deg); }
    58%  { transform: translate3d(9px,-4px,0) rotate(.4deg); }
    74%  { transform: translate3d(-6px,3px,0) rotate(-.25deg); }
    90%  { transform: translate3d(3px,-1px,0) rotate(0); }
}

.tm-container.tm-tremendo-1 { animation: tmTruco1 .38s ease-out; }
.tm-container.tm-tremendo-2 { animation: tmTruco2 .52s ease-out; }
.tm-container.tm-tremendo-3 { animation: tmTruco3 .68s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .tm-container.tm-tremendo-1,
    .tm-container.tm-tremendo-2,
    .tm-container.tm-tremendo-3 { animation: none; }
}


/* ============================================================
   ============================================================
   AJUSTES 2.39
   ============================================================
   ============================================================ */


/* ============================================================
   AS LÁGRIMAS DA DERROTA

   A forma da gota vem de um border-radius assimétrico: redonda
   embaixo, pontuda em cima. É o desenho clássico de lágrima, e
   sai mais leve que um SVG repetido vinte e duas vezes.

   A queda ACELERA — `ease-in`, não linear. Gota que cai em
   velocidade constante parece bolha subindo ao contrário.
   ============================================================ */

.tm-lagrimas {
    pointer-events: none;
    overflow: hidden;
}

.tm-lagrimas i {
    position: absolute;
    top: -40px;

    width: 9px;
    height: 15px;

    background: linear-gradient(180deg, rgba(210,235,255,.35), rgba(140,195,240,.85));
    border-radius: 50% 50% 50% 50% / 68% 68% 32% 32%;
    box-shadow: 0 0 7px rgba(150,200,245,.45);

    transform: scale(var(--tm-escala, 1));

    animation-name: tmLagrima;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes tmLagrima {
    0% {
        transform: translateY(0) scaleY(var(--tm-escala,1)) scaleX(var(--tm-escala,1));
        opacity: 0;
    }
    12%  { opacity: .95; }
    /* Alonga enquanto acelera, como gota de chuva na janela */
    70%  { transform: translateY(70vh) scaleY(calc(var(--tm-escala,1) * 1.7)) scaleX(var(--tm-escala,1)); opacity: .9; }
    100% { transform: translateY(104vh) scaleY(calc(var(--tm-escala,1) * 2)) scaleX(calc(var(--tm-escala,1) * .8)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-lagrimas { display: none; }
}


/* ============================================================
   OS BOTÕES DO FIM: ÍCONE + RÓTULO

   O compartilhar em azul separa as três ações por natureza:
   verde continua o jogo, azul leva para fora dele, vermelho
   encerra. Antes eram dois verdes e um vermelho, e o
   compartilhar se lia como "jogar de novo".
   ============================================================ */

/* ------------------------------------------------------------
   O ÍCONE ANDA COM O TEXTO, E NÃO NO CANTO

   "Aproxima o ícone de voltar ao campeonato."

   Estes botões eram uma linha flex: ícone, vão de 9px, rótulo. O
   rótulo é um item flexível e o botão tem largura fixa — então,
   quando o texto não cabe numa linha e quebra em duas, o rótulo
   continua ocupando TODA a largura que sobra e centraliza as
   duas linhas dentro dela. O ícone fica encostado na borda
   esquerda e o texto no meio do botão, com um vão de dedo entre
   os dois. Foi o que ele fotografou em "VOLTAR AO CAMPEONATO",
   o único rótulo de duas linhas dos três.

   Em fluxo de texto isso não acontece: o ícone é só mais uma
   palavra da frase, e a centralização de cada linha o carrega
   junto. Nos rótulos de uma linha o resultado é idêntico ao de
   antes; no de duas, o ícone encosta na primeira palavra, que é
   onde ele deveria estar desde o começo.
------------------------------------------------------------ */
#botoes-final .tm-btn {
    display: block;
    text-align: center;
}

#botoes-final .tm-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex-shrink: 0;

    display: inline-block;
    vertical-align: -3px;
    margin-right: 7px;   /* o vão de 9px do flex, agora entre palavras */
}

#btn-share-final,
.tm-btn-compartilhar {
    background: linear-gradient(135deg, #3a9bdc, #2472a4) !important;
    color: #fff !important;
}


/* ============================================================
   O JOGADOR DE BAIXO POR CIMA DO PAINEL

   Ele desce um pouco — encostado na mesa, não invadindo — e
   passa a ficar ACIMA do overlay final.

   O painel de fim de partida cobre a mesa inteira, e cobrindo
   junto o avatar de quem está lendo. Ver a própria foto ali
   embaixo é o que mantém a noção de que a mesa continua sendo
   sua enquanto se decide a revanche.
   ============================================================ */

.tm-pos.bottom {
    bottom: calc(var(--tm-mesa) * -0.27) !important;
    z-index: 1000;
}

@media (min-width: 500px) {
    .tm-pos.bottom { bottom: calc(var(--tm-mesa) * -0.25) !important; }
}


/* ============================================================
   OS GRITOS PRECISAM SER LIDOS

   Texto branco com sombra sobre um feltro claro some. E o
   grito dura um segundo: se não for legível de imediato, não é
   legível nunca.

   Três camadas de legibilidade, nesta ordem de importância:
   contorno escuro em volta da letra, que garante contraste
   sobre QUALQUER cor de mesa; sombra projetada, que descola do
   fundo; e brilho, que dá presença.
   ============================================================ */

.tm-grito {
    font-size: clamp(42px, 15vw, 82px) !important;
    letter-spacing: 2px;

    -webkit-text-stroke: 3px rgba(8,14,18,.92);
    paint-order: stroke fill;

    text-shadow:
        0 4px 0   rgba(0,0,0,.65),
        0 0 18px  rgba(0,0,0,.9),
        0 0 44px  rgba(0,0,0,.75);
}

/* Nos aparelhos sem `paint-order`, o contorno cobriria metade
   da letra. A sombra sozinha ainda segura a leitura. */
@supports not (paint-order: stroke) {
    .tm-grito { -webkit-text-stroke: 0; }
}

/* Uma placa escura por trás, do tamanho do texto. É o que
   sustenta a leitura sobre feltro rosa, laranja ou branco. */
.tm-grito::before {
    content: "";
    position: absolute;
    inset: -14px -26px;
    z-index: -1;
    border-radius: 18px;
    background: radial-gradient(ellipse at center,
        rgba(6,11,15,.82) 0%, rgba(6,11,15,.55) 60%, rgba(6,11,15,0) 100%);
}


/* ============================================================
   ============================================================
   AJUSTES 2.40 — FICHA DO JOGADOR E PERFIL ESCURO
   ============================================================
   ============================================================ */


/* ---------- A ficha ---------- */

.tm-ficha-luz {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;

    background: rgba(4,8,11,.86);
    animation: tmFichaEntra .18s ease-out;
}

@keyframes tmFichaEntra { from { opacity: 0; } to { opacity: 1; } }

.tm-ficha {
    width: 100%;
    max-width: 320px;
    padding: 24px 22px;
    box-sizing: border-box;

    background: linear-gradient(160deg, #22323d, #16222b);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    box-shadow: 0 20px 56px rgba(0,0,0,.62);

    text-align: center;
    animation: tmFichaSobe .22s cubic-bezier(.2,.9,.3,1.05);
}

@keyframes tmFichaSobe {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.tm-ficha-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.22);
    margin-bottom: 12px;
}

.tm-ficha-nome {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.tm-ficha-patente {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(176,110,54,.25);
    color: #d99a5e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.tm-ficha-local {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

/* O ponto de presença antes do texto: a cor responde antes da
   palavra ser lida. */
.tm-ficha-estado {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 700;
}

.tm-ficha-estado::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
}

.tm-ficha-estado.online         { color: #6fdc9b; }
.tm-ficha-estado.online::before { background: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,.8); }

.tm-ficha-estado.offline         { color: rgba(255,255,255,.42); }
.tm-ficha-estado.offline::before { background: rgba(255,255,255,.32); }

.tm-ficha-numeros {
    display: flex;
    gap: 8px;
    margin: 16px 0 4px;
}

.tm-ficha-numeros div {
    flex: 1;
    padding: 10px 4px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
}

.tm-ficha-numeros b {
    display: block;
    font-size: 19px;
    font-weight: 900;
    color: #fff;
}

.tm-ficha-numeros span {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: rgba(255,255,255,.5);
}

.tm-ficha-nota {
    margin: 14px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.5);
}

.tm-ficha-acoes {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}

.tm-ficha-acoes .tm-btn {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-ficha-add     { background: linear-gradient(135deg,#2ecc71,#1e9e53); color: #fff; }
.tm-ficha-remover { background: rgba(224,75,60,.20); border: 1px solid rgba(224,75,60,.4) !important; color: #f0938a; }

/* A foto do jogador convida ao toque */
.tm-player-wrapper { cursor: pointer; }


/* ============================================================
   PERFIL COM A CARA DO RANKING

   O perfil era a última tela clara do jogo: cartão branco,
   texto cinza-escuro, dentro de um app inteiro em penumbra.
   Passa a usar o mesmo vidro escuro do ranking e do lobby.
   ============================================================ */

.tm-perfil-card {
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
    color: #e8eef2;
}

.tm-perfil-card h1,
.tm-perfil-card h2,
.tm-perfil-card h3,
.tm-perfil-nome { color: #fff !important; }

.tm-perfil-card input,
.tm-perfil-card select {
    background: rgba(0,0,0,.28) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 16px !important;      /* abaixo disso o iOS dá zoom */
}

.tm-perfil-card input::placeholder { color: rgba(255,255,255,.38) !important; }

.tm-perfil-card input:focus,
.tm-perfil-card select:focus {
    outline: none;
    border-color: rgba(46,204,113,.55) !important;
}

/* Os quatro números */
.tm-perfil-stats > div,
.tm-stat-box {
    background: rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
}

.tm-perfil-stats b,
.tm-stat-box b,
.tm-stat-valor { color: #6fdc9b !important; }

.tm-perfil-stats span,
.tm-stat-box span,
.tm-stat-rotulo { color: rgba(255,255,255,.55) !important; }

/* Histórico de partidas */
.tm-historico-item,
.tm-partida-linha {
    background: rgba(255,255,255,.05) !important;
    border-radius: 12px !important;
}

.tm-partida-info,
.tm-historico-item .tm-hist-texto { color: #fff !important; }

.tm-partida-data,
.tm-historico-item .tm-hist-data { color: rgba(255,255,255,.5) !important; }

.tm-btn-avatar { color: #6fdc9b !important; }


/* ============================================================
   ============================================================
   AJUSTES 2.41 — PERFIL
   ============================================================
   ============================================================ */


/* ============================================================
   O HISTÓRICO ESTAVA BRANCO

   Minhas regras anteriores miraram `.tm-historico-item` e
   `.tm-partida-linha`, que não existem. A classe real é
   `.tm-partida-item` — por isso as linhas continuaram brancas,
   agora com texto claro por cima, ficando ilegíveis.

   É a segunda vez que erro o nome da classe nesta tela. Ficou
   anotado: conferir no template antes de escrever o seletor.
   ============================================================ */

.tm-partida-item {
    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 8px;
}

.tm-partida-item .tm-partida-info > div:first-child {
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
}

.tm-partida-item .tm-partida-data {
    color: rgba(255,255,255,.5) !important;
    font-size: 12px;
    margin-top: 2px;
}

.tm-partida-res {
    width: 30px;
    height: 30px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
}

.tm-partida-res.v { background: #1e9e53; }
.tm-partida-res.d { background: #c0392b; }


/* ============================================================
   OS CAMPOS DO PERFIL

   Nome ocupava a linha inteira, e estado e cidade vinham
   empilhados embaixo: três campos de largura cheia, um sob o
   outro, sem hierarquia. O apelido é o campo principal; o lugar
   é complemento e cabe numa linha só, com o estado curto ao
   lado da cidade.
   ============================================================ */

.tm-perfil-campos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.tm-perfil-campos > input,
.tm-perfil-lugar select,
.tm-perfil-lugar input {
    width: 100%;
    padding: 13px 15px;
    box-sizing: border-box;

    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    color: #fff;
    font-size: 16px;      /* abaixo disso o iOS dá zoom ao focar */
    font-family: inherit;

    transition: border-color .16s ease, background .16s ease;
}

.tm-perfil-campos input::placeholder { color: rgba(255,255,255,.38); }

.tm-perfil-campos input:focus,
.tm-perfil-lugar select:focus {
    outline: none;
    border-color: rgba(46,204,113,.55);
    background: rgba(0,0,0,.38);
}

/* Estado e cidade lado a lado. O estado tem duas letras: dar a
   ele metade da linha seria desperdiçar o espaço da cidade,
   que é o campo que se digita. */
.tm-perfil-lugar {
    display: flex;
    gap: 8px;
}

.tm-perfil-lugar select { flex: 0 0 118px; }
.tm-perfil-lugar input  { flex: 1 1 auto; min-width: 0; }

/* A seta do select some no tema escuro em alguns navegadores */
.tm-perfil-lugar select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
        linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 2px),
        calc(100% - 13px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.tm-perfil-campos .tm-btn-sala {
    margin-top: 2px;
    padding: 14px 0;
    border-radius: 12px;
    font-weight: 800;
}


/* ============================================================
   ============================================================
   AJUSTES 2.42
   ============================================================
   ============================================================ */


/* ============================================================
   O SELO DE EMOJI AGORA É DESENHO

   O SVG preenche o círculo inteiro, então o fundo branco sai:
   ele existia para dar contraste a um caractere, e desenho tem
   contraste próprio. Era esse fundo que aparecia sozinho
   quando o caractere não desenhava.
   ============================================================ */

.tm-emoji-char {
    background: none;
    padding: 0;
}

.tm-emoji-char svg { display: block; }

.tm-emoji.reagindo .tm-emoji-char {
    box-shadow: none;
}

.tm-emoji-menu button svg { display: block; margin: 0 auto; }


/* ============================================================
   OS JOGADORES POR CIMA DO PAINEL DO TRUCO

   O painel ocupa a mesa inteira e os avatares laterais ficam
   sobre a borda dela — o suficiente para serem cobertos.

   Saber QUEM pediu enquanto se decide é metade da informação:
   truco do jogador que só pede com mão feita é uma decisão,
   truco do que pede sempre é outra. Os quatro sobem acima do
   painel.
   ============================================================ */

.tm-pos.left,
.tm-pos.right,
.tm-pos.top {
    z-index: 1000;
}


/* ============================================================
   O TRANCO MAIS FORTE

   Amplitudes quase dobradas e uma sacudida a mais em cada
   nível. O truco é a única jogada que se anuncia gritando —
   merece ser sentida antes de ser lida.
   ============================================================ */

@keyframes tmTruco1 {
    0%,100% { transform: translate3d(0,0,0); }
    12%  { transform: translate3d(-9px,4px,0); }
    28%  { transform: translate3d(8px,-4px,0); }
    44%  { transform: translate3d(-7px,3px,0); }
    62%  { transform: translate3d(5px,-2px,0); }
    80%  { transform: translate3d(-3px,1px,0); }
}

@keyframes tmTruco2 {
    0%,100% { transform: translate3d(0,0,0) rotate(0); }
    10%  { transform: translate3d(-16px,6px,0) rotate(-.7deg); }
    24%  { transform: translate3d(15px,-7px,0) rotate(.7deg); }
    38%  { transform: translate3d(-13px,6px,0) rotate(-.55deg); }
    54%  { transform: translate3d(11px,-5px,0) rotate(.45deg); }
    70%  { transform: translate3d(-8px,4px,0) rotate(-.3deg); }
    86%  { transform: translate3d(4px,-2px,0) rotate(0); }
}

@keyframes tmTruco3 {
    0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
    8%   { transform: translate3d(-24px,9px,0) rotate(-1.2deg) scale(1.012); }
    20%  { transform: translate3d(22px,-10px,0) rotate(1.2deg) scale(1.012); }
    32%  { transform: translate3d(-19px,8px,0) rotate(-1deg) scale(1.008); }
    46%  { transform: translate3d(16px,-7px,0) rotate(.8deg); }
    60%  { transform: translate3d(-12px,6px,0) rotate(-.6deg); }
    74%  { transform: translate3d(8px,-4px,0) rotate(.4deg); }
    88%  { transform: translate3d(-4px,2px,0) rotate(0); }
}

.tm-container.tm-tremendo-1 { animation: tmTruco1 .48s cubic-bezier(.36,.07,.19,.97); }
.tm-container.tm-tremendo-2 { animation: tmTruco2 .66s cubic-bezier(.36,.07,.19,.97); }
.tm-container.tm-tremendo-3 { animation: tmTruco3 .86s cubic-bezier(.36,.07,.19,.97); }


/* ============================================================
   OS GRITOS — SEGUNDO ESTILO

   O primeiro estilo era contorno grosso mais placa difusa. Este
   troca a placa por uma FAIXA sólida atravessando a tela, com o
   texto em negativo dentro dela.

   A diferença prática: a faixa não depende de o texto ser
   grande para funcionar, e ela mesma vira o sinal — dá para
   reconhecer que houve um grito pelo canto do olho, antes de
   ler a palavra.
   ============================================================ */

.tm-grito {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;

    padding: 18px 0;
    box-sizing: border-box;

    font-size: clamp(38px, 13vw, 74px) !important;
    letter-spacing: 3px;

    background: linear-gradient(90deg,
        rgba(10,16,21,0) 0%,
        rgba(10,16,21,.96) 12%,
        rgba(10,16,21,.96) 88%,
        rgba(10,16,21,0) 100%);

    -webkit-text-stroke: 0;
    text-shadow: 0 3px 14px rgba(0,0,0,.8);

    border-top: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
}

/* A placa do estilo anterior não é mais necessária */
.tm-grito::before { content: none; }

@keyframes tmGrito {
    0%   { opacity: 0; transform: scaleY(.2); }
    16%  { opacity: 1; transform: scaleY(1.06); }
    28%  {             transform: scaleY(1); }
    72%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(.85) translateY(-14px); }
}


/* ============================================================
   O AVISO DA DECISÃO DO PARCEIRO

   Fica acima dos botões, não abaixo: é informação que muda a
   escolha, então precisa ser lida ANTES de o dedo ir ao botão.

   A cor diz o que aconteceu antes da palavra ser lida —
   vermelho para quem correu, verde para quem aceitou, amarelo
   para quem subiu a aposta.
   ============================================================ */

.tm-truco-parceiro {
    margin: 0 auto 9px;
    padding: 7px 12px;
    max-width: 190px;

    border-radius: 10px;
    border: 1px solid transparent;

    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .2px;
    text-align: center;
    line-height: 1.25;
}

.tm-parceiro-correu {
    background: rgba(224,75,60,.18);
    border-color: rgba(224,75,60,.42);
    color: #f0938a;
}

.tm-parceiro-aceitou {
    background: rgba(46,204,113,.16);
    border-color: rgba(46,204,113,.40);
    color: #7fe0a6;
}

.tm-parceiro-aumentou {
    background: rgba(241,196,15,.16);
    border-color: rgba(241,196,15,.42);
    color: #f5d76e;
}


/* ============================================================
   ============================================================
   AJUSTES 2.44
   ============================================================
   ============================================================ */


/* ============================================================
   A LOGO CENTRADA NO QUADRO DO TEMA

   O botão tinha padding mas nada alinhava a imagem dentro dele:
   a logo encostava no topo e sobrava um vazio embaixo. Com
   flex e `object-fit: contain`, cada marca se centra sozinha
   independente da proporção — e elas são todas diferentes.
   ============================================================ */

.tm-mesa-tema {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tm-mesa-tema .tm-mesa-logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0;
}


/* ============================================================
   O STATUS COMO LEGENDA DO NOME

   Ele subiu no HTML e aqui vira subtítulo: menor, mais claro,
   colado no título. A faixa própria que ele ocupava embaixo dos
   jogadores desaparece, e são uns 40px que voltam para a mesa.
   ============================================================ */

.tm-sala-titulo {
    margin-bottom: 2px;
}

.tm-status-sala {
    margin: 0 0 18px !important;
    padding: 0 !important;

    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.52);
    text-align: center;
}

/* Os jogadores encostam menos no topo agora que a legenda os
   antecede. */
.tm-players {
    margin-bottom: 14px;
}


/* ============================================================
   ============================================================
   AJUSTES 2.45
   ============================================================
   ============================================================ */


/* ---------- A faixa do grito, com o texto centrado ----------

   A faixa passou a ocupar a largura toda da tela, e sem
   `text-align` o texto herdava o alinhamento do contêiner e
   colava à esquerda. */

.tm-grito {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------- A logo maior no meio da mesa ---------- */

.tm-mesa-tampo {
    background-size: 56%;
}


/* ============================================================
   O EMOJI MAIS DISCRETO

   Mesmo lugar, mesma duração — só o peso muda.

   Ele saltava de 17px para 34px, o dobro, com sombra e um pop
   de escala 1.12. Isso é reação de conquista, não de piscadela.
   Um emoji é comentário de canto de mesa: aparece, se lê e
   passa.

   Agora cresce para 26px, sem sombra, e entra com um pop curto
   que não passa do tamanho final. O anel verde do próprio selo
   também desaparece enquanto a reação está no ar, para não
   competir com o desenho.
   ============================================================ */

.tm-emoji.reagindo {
    width: 26px !important;
    height: 26px !important;
    margin-left: -4.5px;
    margin-top: -4.5px;
}

.tm-emoji.reagindo .tm-emoji-char {
    box-shadow: none;
    animation: tmEmojiPop .22s cubic-bezier(.25,.9,.35,1);
}

@keyframes tmEmojiPop {
    0%   { transform: scale(.62); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

@media (min-width: 768px) {
    .tm-emoji.reagindo {
        width: 30px !important;
        height: 30px !important;
        margin-left: -4px;
        margin-top: -4px;
    }
}


/* ============================================================
   ============================================================
   AJUSTES 2.47 — ESPAÇOS DE ANÚNCIO
   ============================================================
   ============================================================

   Dois espaços, nos dois únicos momentos em que o jogador está
   parado: escolhendo a mesa e esperando ela encher. Dentro da
   partida não existe espaço e não vai existir — anúncio ao lado
   de uma decisão de truco atrapalha a jogada e queima o jogo.

   Sem código cadastrado o bloco nem é criado, então não há
   buraco reservado esperando preenchimento.
   ============================================================ */

.tm-anuncio {
    display: block;
    overflow: hidden;
    text-align: center;
}

.tm-anuncio:empty { display: none; }

/* Na lista de mesas, ocupa o lugar de um cartão e se parece
   com um — mas sem a borda verde, que ali significa "dá para
   entrar". */
.tm-anuncio-lobby {
    min-height: 100px;
    margin-bottom: 12px;
    padding: 10px;
    box-sizing: border-box;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
}

/* ------------------------------------------------------------
   NA CHAVE DO CAMPEONATO

   Entre o botão de convidar e a lista dos outros campeonatos. O
   rodapé é uma coluna com `gap: 10px`, e era isso que dava os
   dois vãos — dez em cima, dez embaixo, o bloco no meio.

   "Abaixa um pouco o banner do campeonato e diminui mais a
    margem de baixo."

   Então o vão deixa de ser simétrico: mais oito em cima, quatro
   a menos embaixo. O banner desce e cola na lista, que é a
   diferença entre um bloco solto no meio do rodapé e um bloco
   que pertence ao pedaço de baixo da tela.

   A margem de baixo é NEGATIVA porque quem espaça é o `gap` do
   pai: para tirar do vão que ele deu, é preciso devolver.
------------------------------------------------------------ */
.tm-anuncio-camp {
    margin: 8px 0 -4px;
    padding: 2px 10px 10px;
    box-sizing: border-box;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}

/* No rodapé da sala */
.tm-anuncio-sala {
    margin: 20px auto 8px;
    padding: 10px;
    max-width: 100%;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}

/* ------------------------------------------------------------
   A ETIQUETA, E O QUANTO ELA EMPURRA O QUE VEM DEPOIS

   Não é exigência do AdSense, é honestidade: o jogador reconhece
   o bloco como anúncio em vez de tentar tocar nele achando que é
   mesa. Ela fica.

   "Sobe um tiquinho o pôster da imagem pra ficar com a mesma
    distância lá em cima."

   Medido: o pôster tinha 32px de vão em cima e 11px embaixo. Os
   11px são o padding da caixa — os outros 21 eram esta etiqueta:
   uma linha de 15px de altura (9px de fonte com entrelinha
   herdada) mais 6px de margem.

   Entrelinha 1 e margem 4 tiram 10px de cima sem tirar a
   etiqueta da tela.

   O resto vem do padding de cima da caixa: a etiqueta PASSA A
   MORAR nesse espaço em vez de ficar embaixo dele.

   Ele pediu mais uma vez, e a única coisa que ainda ocupava
   altura era a etiqueta em si. Ela encolheu para 8px com
   entrelinha 1 — continua legível porque é maiúscula e espaçada,
   e o papel dela é ser reconhecida de relance, não lida.

   Medido, do topo da caixa até o pôster: 32px no começo, 24
   depois de apertar a margem, 18 com a etiqueta morando no
   padding, 13 quando ela encolheu, e 11 agora — os mesmos 11px
   de baixo e da esquerda. O mesmo vão nos quatro lados, que era
   o pedido.
------------------------------------------------------------ */
.tm-anuncio-lobby,
.tm-anuncio-sala,
.tm-anuncio-camp { padding-top: 2px; }

.tm-anuncio::before {
    content: "publicidade";
    display: block;
    margin-bottom: 0;
    line-height: 1;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
}

.tm-anuncio ins,
.tm-anuncio iframe { max-width: 100%; }

/* ------------------------------------------------------------
   OS TRÊS FORMATOS DE BANNER

   IMAGEM  — a arte pronta do anunciante.
   CÓDIGO  — o bloco do AdSense, como veio.
   CARTÃO  — foto 4x5 à esquerda; título, texto e botão à direita.

   Sobre o `hidden`: não há regra aqui. O rodízio é do servidor,
   um banner por acesso, e o que chega à página é só ele — não
   existe irmão escondido para esconder. Foi uma versão inteira
   deste arquivo atrás, com relógio na tela, e o motivo de ela ter
   saído está escrito no `includes/banners.php`.
------------------------------------------------------------ */
.tm-banner {
    display: block;
    line-height: 0;          /* sem o vão de linha embaixo da imagem */
}

/* ------------------------------------------------------------
   SEM O SUBLINHADO DE LINK

   O banner é um <a>, e o tema sublinha todo link do conteúdo:

       .tm-conteudo a { color: #ffbb33; text-decoration: underline }

   Um `text-decoration: none` no `.tm-banner` não vencia — a
   regra do tema tem duas classes, a minha tinha uma. E
   `text-decoration` PROPAGA para dentro: era por isso que o
   título e o texto do cartão apareciam riscados, e não só o
   endereço.

   A resposta é o seletor com a mesma raiz, e não um
   `!important`: `!important` ganha da regra de hoje e ganha
   também da regra certa de amanhã.
------------------------------------------------------------ */
.tm-conteudo a.tm-banner,
a.tm-banner {
    text-decoration: none;
    color: inherit;
}

/* ------------------------------------------------------------
   E O MESMO VALE PARA TODO BOTÃO QUE É <a>

   Achado ao fotografar a tela do campeonato para conferir outra
   coisa: CONVIDAR PELO WHATSAPP e VOLTAR AO LOBBY apareciam com
   o texto sublinhado. Pelo mesmo motivo do banner — o
   `.tm-btn-sala` tem uma classe, o `.tm-conteudo a` tem classe
   mais elemento, e ganha.

   Vale para todos: é um botão em qualquer tela onde apareça, e
   botão sublinhado é a mistura das duas coisas que o jogador
   sabe distinguir sozinho.
------------------------------------------------------------ */
.tm-conteudo a.tm-btn-sala {
    text-decoration: none;
}

.tm-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ------------------------------------------------------------
   O CARTÃO

   Duas colunas: a foto com largura fixa e o texto no que sobra.
   A foto é 4x5 de verdade — `aspect-ratio` mais `object-fit`
   fazem o recorte, então uma arte quadrada ou deitada continua
   cabendo sem esticar ninguém.

   `line-height: 0` é herdado da regra de cima, que existe para a
   imagem não deixar um vão embaixo. Dentro do cartão há TEXTO, e
   texto com entrelinha zero fica ilegível — por isso a altura de
   linha volta aqui.
------------------------------------------------------------ */
.tm-banner-cartao {
    display: flex;
    align-items: stretch;
    gap: 12px;
    line-height: 1.3;
    text-align: left;
}

.tm-banner-foto {
    flex: 0 0 88px;
    display: block;
}

.tm-banner-foto img {
    width: 88px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Sem `aspect-ratio` — navegador velho — a proporção 4x5 vira
   altura fixa. Melhor uma conta a mais do que um cartão com a
   foto esticada. */
@supports not (aspect-ratio: 4 / 5) {
    .tm-banner-foto img { height: 110px; }
}

.tm-banner-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.tm-banner-titulo {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}

/* Duas linhas e para. A terceira empurraria o botão para fora do
   cartão, e o botão é a única coisa ali que a pessoa PODE fazer. */
.tm-banner-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-size: 12px;
    line-height: 1.35;
    color: rgba(255,255,255,.66);
}

.tm-banner-botao {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 999px;

    background: #4dd68c;
    color: #06331a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.2;
    white-space: nowrap;
}

/* A caixa do anúncio na lista de mesas tem altura mínima de
   100px pensada para arte deitada. O cartão é mais alto que
   isso, e é ele que manda. */
.tm-anuncio-lobby .tm-banner-cartao,
.tm-anuncio-camp .tm-banner-cartao { min-height: 110px; }
}


/* ============================================================
   MÃO DE DEZ ENXUTA

   Sobraram três coisas: o título, as cartas do parceiro e os
   dois botões. O subtítulo some quando vazio, e o relógio virou
   só o número — grande, porque agora é o único elemento
   temporal da tela.
   ============================================================ */

.tm-dez-sub:empty { display: none; }

.tm-dez-titulo {
    font-size: 20px;
    margin-bottom: 12px;
}

.tm-dez-cartas {
    margin-bottom: 16px;
    gap: 7px;
}

.tm-dez-cartas .tm-carta {
    width:  calc(var(--tm-mesa) * .19) !important;
    height: calc(var(--tm-mesa) * .27) !important;
}

.tm-dez-acoes .tm-btn {
    width: 160px;
    padding: 12px 0;
    font-size: 14px;
}

/* ============================================================
   A MÃO DE DEZ TEM QUE CABER NA MESA

   Duas queixas na mesma foto: "tá com uma linha em cima" e "o
   conteúdo desceu muito" — com o botão NÃO VOU cortado pela
   borda de baixo do feltro.

   As duas eram o mesmo defeito. O conteúdo do painel era medido
   em pixels fixos (título 20px, botões 12px de altura interna,
   espaços de 12 e 16px) enquanto o painel tem o tamanho da
   MESA, que é proporcional à tela. Em celular pequeno o
   conteúdo passava do painel: com `justify-content: center`,
   conteúdo maior que a caixa transborda nas DUAS pontas, e
   ainda aparecia a barra de rolagem do `overflow-y: auto`.

   A "linha em cima" é a marca de luz do tampo — um
   `box-shadow` branco por dentro da borda da mesa — aparecendo
   através do fundo do painel, que é translúcido nas beiradas
   (alfa .82). Com o conteúdo empurrado para baixo, sobrava uma
   faixa de mesa nua no topo e aquela luz virava um risco.

   Correção: tudo que gasta altura passa a ser proporcional ao
   --tm-mesa, como as cartas já eram; e o fundo do painel fica
   opaco em cima, onde encosta na luz do tampo.
   ============================================================ */

.tm-overlay-dez {
    /* Opaco de verdade. O painel da mão de dez cobre a mesa
       inteira por vários segundos e é onde se lê a mão do
       parceiro: transparência aqui só atrapalha a leitura — e
       era ela que deixava o risco de luz do tampo passar. */
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(9,15,20,1) 0%,
            rgba(9,15,20,1) 70%,
            rgba(7,12,16,1) 100%) !important;

    /* Sem barra de rolagem. Se o conteúdo couber — e agora
       cabe —, ela nunca teria o que rolar; se um dia não
       couber, uma barra cinza dentro do feltro é pior aviso do
       que o próprio aperto. */
    overflow: hidden !important;

    padding: 10px 18px !important;
}

.tm-dez-titulo {
    font-size: clamp(15px, calc(var(--tm-mesa) * .075), 21px) !important;
    line-height: 1.15 !important;
    margin: 0 0 calc(var(--tm-mesa) * .028) !important;
}

/* Escopado no .tm-dez-parceiro de propósito: a mesma classe
   .tm-dez-rotulo é usada dentro do botão VOU JOGAR, e mexer
   nela sem escopo mexe no rótulo do botão. */
.tm-dez-parceiro .tm-dez-rotulo {
    margin-bottom: calc(var(--tm-mesa) * .016) !important;
}

.tm-dez-cartas {
    margin-bottom: calc(var(--tm-mesa) * .042) !important;
    gap: calc(var(--tm-mesa) * .022) !important;
}

.tm-dez-cartas .tm-carta {
    width:  calc(var(--tm-mesa) * .165) !important;
    height: calc(var(--tm-mesa) * .235) !important;
}

.tm-dez-acoes {
    gap: calc(var(--tm-mesa) * .024) !important;
}

.tm-dez-acoes .tm-btn {
    width: clamp(120px, calc(var(--tm-mesa) * .62), 180px) !important;
    padding: calc(var(--tm-mesa) * .036) 0 !important;
    font-size: clamp(12px, calc(var(--tm-mesa) * .054), 15px) !important;
    line-height: 1.1 !important;
}

/* Tela baixa: o que sai é a legenda, não o botão.

   Num celular curto o painel fica com uns 165px de altura útil
   e o conteúdo passava disso. Alguma coisa tem que sair, e a
   escolha é entre a legenda "as cartas do seu parceiro" e o
   botão NÃO VOU ficar cortado. A legenda explica o que as
   cartas ali já dizem — elas estão dentro do painel da decisão,
   e a própria mão do jogador está embaixo, na faixa dele. O
   botão não tem substituto. */
@media (max-height: 700px) {

    .tm-dez-parceiro .tm-dez-rotulo { display: none !important; }

    /* E o preço dentro dos botões sai pela mesma razão, medido
       do mesmo jeito: com ele, o painel passava 10px da mesa num
       iPhone SE. O preço é a nota de rodapé da decisão; o botão
       inteiro é a decisão. Quem tem tela curta lê a regra na
       tela de ajuda — ninguém lê nada com um botão cortado. */
    .tm-dez-preco { display: none !important; }

    .tm-dez-titulo {
        font-size: clamp(14px, calc(var(--tm-mesa) * .07), 18px) !important;
        margin-bottom: calc(var(--tm-mesa) * .022) !important;
    }
}

/* O RÓTULO DO BOTÃO VERDE ESTAVA CINZA

   "VOU JOGAR" é um <span class="tm-dez-rotulo"> dentro do
   botão, e a classe .tm-dez-rotulo foi feita para a legenda das
   cartas: 10px, cinza a 50%. Herdando isso, a ação principal
   do painel aparecia mais apagada que a secundária — verde
   escrito em cinza claro ao lado de "NÃO VOU" em branco cheio.
   O olho lê botão apagado como botão desligado.

   Aqui o rótulo volta a ser texto de botão. */
.tm-dez-vou .tm-dez-rotulo {
    font-size: inherit !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: .4px !important;
    margin: 0 !important;
}

.tm-dez-relogio {
    margin-top: 14px;
    font-size: 0;              /* mata o espaço entre elementos */
}

.tm-dez-relogio #tm-dez-seg {
    font-size: 26px;
    font-weight: 900;
    color: rgba(255,255,255,.75);
    margin: 0;
}

.tm-dez-relogio #tm-dez-seg.urgente { color: #ff6b5e; }


/* ============================================================
   AS FOTOS MAIS JUNTAS NA FORMAÇÃO DA MESA

   As quatro colunas têm largura fixa de 74px e o intervalo era
   de 12px entre elas e 12px entre as duplas. Somando com o
   "VS", a fileira ficava mais larga que o necessário e a mesa
   parecia dispersa.

   Encurtando para 6px entre parceiros e 8px entre as duplas, a
   dupla se lê como dupla — dois avatares juntos de um lado,
   dois do outro — em vez de quatro avatares soltos em fila.
   ============================================================ */

.tm-equipe { gap: 6px; }
.tm-times  { gap: 8px; }

.tm-vs {
    min-width: 20px;
    margin-left: 2px;
    margin-right: 2px;
}

/* A folga vertical também: a etiqueta do nome já separa as
   linhas, e o espaço extra em cima e embaixo só empurrava o
   tema da mesa para fora da tela. */
.tm-players  { margin-bottom: 10px; }
.tm-player-card { padding-top: 0; padding-bottom: 0; }


/* ============================================================
   O CONTADOR DENTRO DO "VOU JOGAR"

   O número mora no botão que ele aciona. Quando zera, é esse
   botão que acontece — e ver o número correndo ali dentro diz
   isso sem precisar de nenhuma frase explicando.
   ============================================================ */

.tm-dez-vou {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.tm-dez-conta {
    min-width: 24px;
    padding: 1px 0;

    border-radius: 999px;
    background: rgba(0,0,0,.26);

    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.tm-dez-conta:empty { display: none; }

/* Nos últimos segundos o botão inteiro pulsa: é ele que vai
   disparar sozinho, então é ele que precisa chamar atenção. */
.tm-dez-vou.urgente {
    animation: tmDezPulso .85s ease-in-out infinite;
}

@keyframes tmDezPulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-dez-vou.urgente { animation: none; }
}


/* ============================================================
   ============================================================
   O MODAL DE CONFIRMAÇÃO
   ============================================================
   ============================================================

   Substitui o `confirm()` do navegador em todo o jogo. Além de
   feio no meio de uma mesa de truco, o diálogo do sistema
   congela o JavaScript enquanto está aberto — trava animação,
   cronômetro e tempo real — e no iPhone exibe o endereço do
   site em cima, quebrando a ilusão de aplicativo.
   ============================================================ */

.tm-confirmar-luz {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    box-sizing: border-box;

    background: rgba(4,8,11,.82);
    backdrop-filter: blur(3px);

    animation: tmConfEntra .16s ease-out;
}

.tm-confirmar-luz.saindo { animation: tmConfSai .18s ease-in both; }

@keyframes tmConfEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmConfSai   { from { opacity: 1; } to { opacity: 0; } }

.tm-confirmar {
    width: 100%;
    max-width: 330px;
    padding: 24px 22px 20px;
    box-sizing: border-box;

    background: linear-gradient(160deg, #24343f, #16222b);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.65);

    text-align: center;
    animation: tmConfSobe .2s cubic-bezier(.2,.9,.3,1.05);
}

.tm-confirmar-luz.saindo .tm-confirmar { animation: none; }

@keyframes tmConfSobe {
    from { opacity: 0; transform: translateY(16px) scale(.95); }
    to   { opacity: 1; transform: none; }
}

.tm-confirmar h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
}

.tm-confirmar p {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(255,255,255,.62);
}

.tm-confirmar-acoes {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tm-confirmar-acoes .tm-btn {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-confirmar-ok     { background: linear-gradient(135deg,#2ecc71,#1e9e53); color: #fff; }
.tm-confirmar-perigo { background: linear-gradient(135deg,#e8563f,#c0392b); color: #fff; }

/* O botão de voltar vem depois e é o mais neutro: quem abre o
   diálogo por engano precisa que a saída seja a opção fácil,
   não a de aparência mais convidativa. */
.tm-confirmar-nao {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.9);
}

.tm-confirmar-nao:focus-visible {
    outline: 2px solid rgba(255,255,255,.5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tm-confirmar-luz,
    .tm-confirmar { animation: none !important; }
}


/* ============================================================
   ============================================================
   A FAIXA DA MÃO NÃO ENCOLHE — AGORA DE VERDADE
   ============================================================
   ============================================================

   Eu já tinha "corrigido" isto na 2.22, e não funcionou. O
   motivo: duas regras anteriores zeram a altura com
   `min-height: 0 !important`, e `!important` vence qualquer
   declaração normal, esteja ela onde estiver no arquivo. A
   minha reserva de altura era simplesmente ignorada.

   É a segunda vez nesta base que um `!important` antigo come
   uma regra nova em silêncio — a primeira foi o
   `prefers-reduced-motion` matando as animações. O padrão é o
   mesmo: `!important` escrito para resolver um problema local
   vira uma armadilha para todo mundo que vier depois.

   Aqui a altura é reservada por um pseudo-elemento em vez de
   por `min-height`. Um filho invisível com a altura de uma
   carta ocupa espaço de verdade, e nenhum `!important` de
   min-height alcança isso.
   ============================================================ */

.tm-mao::before {
    content: "";
    flex: 0 0 0;
    width: 0;

    /* A altura de uma carta. Vem da mesma variável que
       dimensiona as cartas, então as duas mudam juntas. */
    height: calc(var(--tm-mesa) * .36);
}

/* O reservador não pode virar uma coluna no meio das cartas:
   largura zero e sem participar do `gap`. */
.tm-mao { gap: 10px; }
.tm-mao::before { margin-right: -10px; }


/* ============================================================
   ============================================================
   AJUSTES 2.55
   ============================================================
   ============================================================ */


/* ---------- A faixa do grito sem esmaecer nas pontas ----------

   O degradê existia para a faixa "nascer do nada" nas bordas.
   Na prática ele come as primeiras e as últimas letras quando
   a palavra é longa — CORRERAM e ACEITARAM chegam perto da
   ponta. Fundo sólido de ponta a ponta. */

.tm-grito {
    background: rgba(10,16,21,.96);
}


/* ---------- A legenda das cartas do parceiro ---------- */

.tm-dez-rotulo {
    display: block;
    margin-bottom: 6px;

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    text-align: center;
}


/* ---------- A sequência da mesa, no lobby ----------

   Laranja de brasa: é a mesa "quente", a que ninguém está
   conseguindo derrubar. */

.tm-sala-seq {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 9px;
    border-radius: 999px;

    background: rgba(230,126,34,.18);
    border: 1px solid rgba(230,126,34,.38);
    color: #e8a05a;

    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .3px;
}


/* ============================================================
   AS DUPLAS NO PERFIL
   ============================================================ */

.tm-duplas { margin-top: 22px; }
.tm-duplas[hidden] { display: none; }

.tm-duplas h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-align: center;
}

.tm-dupla-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 13px;
    margin-bottom: 8px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}

.tm-dupla-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tm-dupla-item > div:not(.tm-dupla-troféu) {
    flex: 1;
    min-width: 0;
}

.tm-dupla-rotulo {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

.tm-dupla-nome {
    display: block;
    margin-top: 1px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-dupla-item b {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 900;
    color: #6fdc9b;
}

.tm-dupla-troféu {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    border-radius: 50%;
    background: rgba(230,126,34,.16);
}

.tm-dupla-recorde b { color: #e8a05a; }


/* ============================================================
   O DIÁLOGO DE ESCOLHA

   Mesma caixa da confirmação, com uma lista de botões. Cada
   botão pode ter uma linha de detalhe embaixo — em decisões
   irreversíveis, dizer o que acontece vale mais que um rótulo
   curto e bonito.
   ============================================================ */

.tm-confirmar-lista .tm-confirmar-acoes .tm-btn {
    display: block;
    padding: 13px 14px;
    line-height: 1.25;
    text-align: center;
}

.tm-confirmar-lista .tm-btn small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .78;
}


/* ---------- Quem saiu da partida ----------

   O avatar fica esmaecido e ganha um selo. Sem isso, o parceiro
   passa a partida achando que o outro está jogando muito rápido
   e muito mal, sem entender o motivo. */

.tm-pos.automatico .tm-avatar-jogador,
.tm-pos.automatico img.tm-player-avatar {
    filter: grayscale(.7) brightness(.8);
}

.tm-pos.automatico .nome::after {
    content: " (saiu)";
    font-size: .82em;
    opacity: .62;
    font-weight: 600;
}


/* ============================================================
   ============================================================
   AJUSTES 2.57
   ============================================================
   ============================================================ */


/* ---------- Os gritos um pouco menores ----------

   Estavam em 13vw, o que num iPhone dá quase 51px. Com a faixa
   sólida por trás garantindo o contraste, o tamanho não precisa
   mais fazer todo o trabalho de legibilidade sozinho — e
   palavras longas como ACEITARAM cabiam raspando.

   11vw dá folga nas pontas e continua legível de relance, que é
   o único requisito de um texto que fica um segundo na tela. */

.tm-grito {
    font-size: clamp(32px, 11vw, 60px) !important;
    letter-spacing: 2px;
    padding: 15px 0;
}


/* ============================================================
   ============================================================
   AMIGOS E CONVITES
   ============================================================
   ============================================================ */

.tm-btn-amigos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    padding: 12px 0;
    margin-bottom: 16px;

    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;

    color: rgba(255,255,255,.85);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
    cursor: pointer;
}

.tm-btn-amigos svg { fill: currentColor; }
.tm-btn-amigos:active { transform: scale(.99); }

.tm-btn-amigos-sala { width: 100%; margin-top: 10px; }


/* ---------- A lista ---------- */

.tm-amigos-luz {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    box-sizing: border-box;
    background: rgba(4,8,11,.86);
}

.tm-amigos {
    width: 100%;
    max-width: 340px;
    max-height: 78vh;
    padding: 22px 20px 18px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background: linear-gradient(160deg, #24343f, #16222b);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.65);
}

.tm-amigos h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    text-align: center;
}

.tm-amigos-lista {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
}

.tm-amigos-vazio {
    margin: 22px 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.5);
    text-align: center;
}

.tm-amigo {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;
    margin-bottom: 7px;

    background: rgba(255,255,255,.05);
    border-radius: 12px;
}

/* Quem está online vem com a borda acesa: é a única
   informação que muda a decisão de chamar ou não. */
.tm-amigo.online {
    background: rgba(46,204,113,.09);
    border: 1px solid rgba(46,204,113,.24);
}

.tm-amigo img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tm-amigo > div { flex: 1; min-width: 0; }

.tm-amigo-nome {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-amigo-estado {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,.45);
}

.tm-amigo.online .tm-amigo-estado { color: #6fdc9b; }

.tm-amigo-convidar {
    flex-shrink: 0;
    padding: 7px 12px;

    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg,#2ecc71,#1e9e53);

    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-amigo-convidar:disabled { opacity: .6; cursor: default; }


/* ---------- O convite que chega ----------

   Faixa no topo, acima de tudo. No topo e não no rodapé porque
   o rodapé é onde ficam os botões do jogo, e um convite
   aparecendo em cima de um botão é um toque errado esperando
   acontecer.                                                  */

.tm-convite {
    top: calc(env(safe-area-inset-top) + 10px);
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    width: min(380px, calc(100vw - 24px));
    padding: 10px 12px;
    box-sizing: border-box;

    background: linear-gradient(135deg, #24343f, #16222b);
    border: 1px solid rgba(46,204,113,.4);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.6);

    animation: tmConviteEntra .3s cubic-bezier(.2,.9,.3,1.05);
}

@keyframes tmConviteEntra {
    from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tm-convite img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tm-convite-texto { flex: 1; min-width: 0; line-height: 1.2; }

.tm-convite-texto b {
    display: block;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-convite-texto span {
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
}

.tm-convite-ir {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg,#2ecc71,#1e9e53);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.tm-convite-nao {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.6);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .tm-convite { animation: none; }
}


/* ---------- O pedido de largar a mão ---------- */

.tm-overlay-largar {
    flex-direction: column;
    justify-content: center;
    padding: 16px;
}

.tm-largar-titulo {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #f1c40f;
    text-align: center;
}

.tm-largar-quem {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.8);
    text-align: center;
}

.tm-largar-esperando {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.62);
    text-align: center;
}

#tm-largar-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#tm-largar-corpo .tm-btn {
    width: 175px;
    padding: 11px 0;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-largar-sim { background: linear-gradient(135deg,#e8563f,#c0392b); color: #fff; }
.tm-largar-nao { background: linear-gradient(135deg,#2ecc71,#1e9e53); color: #fff; }


/* A de fora, no lobby. Laranja de espera: não é o verde de
   entrar agora, nem o cinza de porta fechada. */
.tm-entrar-fora {
    background: linear-gradient(135deg,#e67e22,#c25e10) !important;
    color: #fff !important;
    opacity: 1 !important;
}


/* ============================================================
   ============================================================
   A ABERTURA COM O CARREGANDO DE CARTAS
   ============================================================
   ============================================================

   Saem o personagem e o balão; entram as três cartas saltando —
   o mesmo carregando do ranking. É a única imagem do jogo que
   já significa "espere", e ela diz isso sem palavra nenhuma.

   O personagem funcionava como ilustração, mas competia com a
   informação: quem abria a mesa via primeiro um desenho grande
   e só depois descobria quantos jogadores faltavam.
   ============================================================ */

.tm-abertura {
    align-items: center;           /* era flex-end, por causa do personagem */
}

.tm-abertura-conteudo {
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 24px;
}

/* O carregando herda a animação do ranking; aqui só cresce um
   pouco, porque numa tela cheia ele é o elemento principal. */
.tm-abertura .tm-cartas-loading span {
    width: 34px;
    height: 47px;
    border-radius: 6px;
}

/* Sem margem embaixo: ela separava o carregando do status, que
   não existe mais. Agora o carregando é o único elemento da
   tela e fica no centro exato. */
.tm-abertura .tm-carregando { margin-bottom: 0; }

/* O status volta ao fluxo: ele estava posicionado de forma
   absoluta para flutuar acima do personagem, que não existe
   mais. */






/* A contagem de 3 fica no lugar do status, grande */



/* ============================================================
   ============================================================
   QUANDO O JOGO RODA INSTALADO
   ============================================================
   ============================================================

   Sem a barra de endereço sobram uns 90px de altura. Eles vão
   para a mesa, que é o elemento que mais se beneficia — e a
   diferença entre jogar no navegador e no aplicativo passa a
   ser visível, que é o argumento para alguém instalar.

   As áreas seguras passam a importar de verdade: instalado, o
   conteúdo vai até a borda física da tela, e sem respeitar o
   `safe-area-inset` o placar fica atrás do entalhe do iPhone.
   ============================================================ */

html.tm-instalado body.tm-jogo {
    --tm-mesa: min(76vw, 40vh, 350px);
}

html.tm-instalado .tm-placar-topo {
    padding-top: calc(13px + env(safe-area-inset-top));
}

html.tm-instalado .tm-header,
html.tm-instalado .tm-header-home {
    padding-top: calc(12px + env(safe-area-inset-top));
}

/* Instalado, o gesto de "puxar para atualizar" do navegador não
   existe — mas o de arrastar a página sim, e numa mesa fixa ele
   só faz a tela tremer. */
html.tm-instalado,
html.tm-instalado body {
    overscroll-behavior-y: none;
}

/* A barra inferior do sistema (a listra do iPhone) fica por
   cima dos botões se não houver folga. */
html.tm-instalado .tm-acoes,
html.tm-instalado .tm-tabbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}


/* ============================================================
   ============================================================
   INSTALAR NA TELA DE INÍCIO
   ============================================================
   ============================================================ */

/* ---------- A tarja ----------

   Discreta e removível. Ela pede algo ao jogador antes de ele
   ter pedido qualquer coisa, então não pode disputar espaço com
   as mesas — que é o motivo de ele ter aberto a tela.          */

.tm-tarja-instalar {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 12px;
    margin-bottom: 14px;

    background: linear-gradient(135deg, rgba(46,204,113,.14), rgba(46,204,113,.06));
    border: 1px solid rgba(46,204,113,.28);
    border-radius: 12px;
}

.tm-tarja-texto { flex: 1; min-width: 0; line-height: 1.25; }

.tm-tarja-texto b {
    display: block;
    font-size: 13.5px;
    color: #fff;
}

.tm-tarja-texto span {
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
}

.tm-tarja-sim {
    flex-shrink: 0;
    padding: 8px 13px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg,#2ecc71,#1e9e53);
    color: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-tarja-nao {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.55);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}


/* ---------- O passo a passo do iPhone ---------- */

.tm-instalar-luz {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    box-sizing: border-box;
    background: rgba(4,8,11,.88);
}

.tm-instalar {
    width: 100%;
    max-width: 340px;
    padding: 24px 22px 20px;
    box-sizing: border-box;

    background: linear-gradient(160deg, #24343f, #16222b);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.65);
}

.tm-instalar h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-align: center;
}

.tm-instalar-passos {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.tm-instalar-passos li {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;
    margin-bottom: 8px;

    background: rgba(255,255,255,.06);
    border-radius: 12px;

    font-size: 13.5px;
    line-height: 1.3;
    color: rgba(255,255,255,.85);
}

.tm-instalar-passos b { color: #fff; }

/* O ícone real que a pessoa vai procurar na tela dela. Mostrar
   vale mais que descrever: "o quadradinho com a seta para cima"
   é uma frase que ninguém consegue seguir olhando o celular. */
.tm-instalar-icone {
    flex-shrink: 0;
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: rgba(255,255,255,.10);
    color: #6fdc9b;
    fill: #6fdc9b;
}

.tm-instalar-num {
    font-size: 15px;
    font-weight: 900;
    color: #6fdc9b;
}

.tm-instalar-aviso {
    margin: 0 0 10px;
    padding: 10px 12px;

    background: rgba(241,196,15,.12);
    border: 1px solid rgba(241,196,15,.34);
    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
    color: #f5d76e;
    text-align: center;
}

.tm-instalar-texto {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.72);
    text-align: center;
}

.tm-instalar-fechar {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

/* Instalado, nada disso faz sentido */
html.tm-instalado .tm-tarja-instalar { display: none; }


/* ============================================================
   ============================================================
   TELA CHEIA: O ENTALHE E A LISTRA DO IPHONE
   ============================================================
   ============================================================

   Instalado, o `viewport-fit=cover` faz o conteúdo ir até a
   borda FÍSICA da tela — inclusive por baixo do relógio, do
   sinal e da bateria. É o que dá o visual de aplicativo, e é o
   que estava escondendo o placar.

   Duas correções de método aqui:

   1. A regra é `@media (display-mode: standalone)`, não a
      classe que o JavaScript põe. O CSS sabe sozinho que está
      instalado; depender do JS significa que qualquer erro
      anterior no arquivo deixaria o placar atrás do relógio.

   2. `!important` em tudo. As regras originais de padding
      dessas barras já têm `!important`, e sem ele estas aqui
      seriam ignoradas em silêncio — que é como esta correção
      falhou na primeira tentativa.
   ============================================================ */

@media (display-mode: standalone) {

    /* O placar do jogo */
    .tm-placar-topo {
        padding-top: calc(13px + env(safe-area-inset-top)) !important;
    }

    /* O cabeçalho com a logo — lobby, ranking, perfil */
    .tm-header {
        padding-top: calc(7px + env(safe-area-inset-top)) !important;
    }

    /* O cabeçalho enxuto do login, cadastro e recuperar senha */
    .tm-header-home {
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
    }

    /* Páginas sem cabeçalho nenhum: a home */
    .tm-home {
        padding-top: env(safe-area-inset-top);
    }
}

/* O iPhone antes do iOS 15 não entende `display-mode` em
   media query. A classe do JavaScript cobre esses. */
html.tm-instalado .tm-placar-topo {
    padding-top: calc(13px + env(safe-area-inset-top)) !important;
}

html.tm-instalado .tm-header {
    padding-top: calc(7px + env(safe-area-inset-top)) !important;
}

html.tm-instalado .tm-header-home {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
}


/* ============================================================
   A ÚLTIMA MESA DA LISTA ESTAVA CORTADA

   A barra de MESAS/RANKING/PERFIL é fixa e flutua por cima do
   conteúdo. Sem reservar a altura dela embaixo, a lista termina
   atrás da barra — e a última mesa, justamente a que exige
   rolar até o fim para encontrar, é a que nunca aparece
   inteira.

   A conta: 58px da barra, mais a listra do iPhone, mais uma
   folga para a mesa não ficar colada.
   ============================================================ */

.tm-lobby-container,
.tm-ranking-container,
.tm-perfil-container,
.tm-resultado-container {
    padding-bottom: calc(58px + env(safe-area-inset-bottom) + 24px) !important;
}

/* A lista em si também: em telas onde ela rola por dentro, o
   padding do contêiner não alcança. */
.tm-lista-salas {
    padding-bottom: 8px;
}


/* ============================================================
   A ESPERA, SÓ O CARREGANDO

   Saíram o texto de status, a dica e a contagem. O conteúdo
   agora é uma coisa só e vai ao centro exato da tela.

   As regras antigas posicionavam vários elementos empilhados,
   com o carregando ancorado acima do resto — sem elas, ele
   ficaria fora do meio.
   ============================================================ */

.tm-abertura {
    align-items: center;
    justify-content: center;
}

.tm-abertura .tm-carregando {
    margin: 0;
}

.tm-abertura .tm-cartas-loading span {
    width: 34px;
    height: 47px;
    border-radius: 6px;
}


/* ============================================================
   ============================================================
   AJUSTES 2.68 — LOBBY MAIS DIRETO
   ============================================================
   ============================================================ */


/* ---------- A patente no header ----------

   Fica à esquerda da foto, na mesma linha. Pequena: é
   referência, não troféu — quem quiser ver os números vai ao
   perfil. */

.tm-header-patente {
    display: inline-flex;
    align-items: center;

    margin-right: 8px;
    padding: 3px 10px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;

    /* Sem patente conhecida, o seletor de cor abaixo não casa e
       este cinza neutro é o que aparece. */
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.75);
}

.tm-header-patente.tm-patente-bronze { background: rgba(176,110,54,.22);  color: #d99a5e; }
.tm-header-patente.tm-patente-prata  { background: rgba(190,199,207,.20); color: #cfd6dd; }
.tm-header-patente.tm-patente-ouro   { background: rgba(241,196,15,.18);  color: #f1c40f; }
.tm-header-patente.tm-patente-mestre { background: rgba(155,89,182,.20);  color: #c08fd8; }
.tm-header-patente.tm-patente-lenda  { background: rgba(231,76,60,.20);   color: #f0938a; }

/* O bloco da direita precisa caber os dois. A logo já reserva
   espaço para 120px; a patente cabe dentro disso. */
.tm-header-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 360px) {
    /* Tela estreita: a patente cede lugar à logo, que é a
       identidade do jogo. */
    .tm-header-patente { display: none; }
}


/* ---------- Sem o cartão de estatísticas ----------

   O lobby começa direto no que interessa. A margem de cima
   compensa o cartão que saiu. */

.tm-lobby-container { padding-top: 16px; }

.tm-private-buttons { margin-top: 0; }


/* ============================================================
   ============================================================
   A ROLAGEM QUE NÃO CHEGAVA AO FIM
   ============================================================
   ============================================================

   Dois problemas somados, e cada um sozinho já bastaria.

   1. A SALA FICOU DE FORA. Na 2.66 eu reservei o espaço da
      barra inferior no lobby, no ranking, no perfil e no
      resultado — e esqueci da sala. Ela tinha 40px de folga
      embaixo, menos que a barra do navegador, então o último
      elemento ficava por baixo.

   2. `100vh` NÃO É A TELA. No iPhone, `100vh` é a altura COM a
      barra de endereço escondida. Com a barra visível — que é
      como a página abre — o conteúdo é mais alto que o visível,
      e o primeiro gesto de rolagem é gasto escondendo a barra
      em vez de rolar. Daí a sensação de "tem que tentar de
      novo".

      `100dvh` é a altura de verdade, que muda junto com a
      barra. O `100vh` fica antes como reserva para navegador
      antigo que não entenda `dvh`.
   ============================================================ */

/* O `!important` aqui não é preguiça.

   A folha do tema tem `body { min-height: 100vh }` e as duas
   folhas são registradas em lugares diferentes — não há garantia
   de qual o WordPress imprime por último. Sem o `!important`,
   esta correção funcionaria ou não dependendo da ordem, que é o
   pior tipo de bug: o que aparece em um aparelho e some no
   outro sem ninguém mudar nada.

   Fazer o `tm-ui` depender do `truco-style` resolveria a ordem,
   mas com um risco pior: se o tema for trocado e aquele handle
   sumir, o WordPress deixa de imprimir a folha inteira do jogo. */
body,
.tm-main {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.tm-sala-container {
    padding-bottom: calc(58px + env(safe-area-inset-bottom) + 24px) !important;
}

/* A caixa do link é o último elemento da sala e a que mais
   sofria: ela ficava inteira embaixo da barra. */
.tm-link-box { margin-bottom: 8px; }


/* ============================================================
   ============================================================
   AJUSTES 2.73 — OS BOTÕES DA SALA
   ============================================================
   ============================================================ */


/* ---------- Sair da mesa em vermelho ----------

   Ele estava com o mesmo cinza de "adicionar bot" e "chamar um
   amigo", que são ações de montar a mesa. Sair é o contrário
   das outras três: desfaz o que se veio fazer. A cor precisa
   dizer isso antes de a pessoa ler o rótulo. */

.tm-btn-sair-sala {
    background: linear-gradient(135deg, #e8563f, #c0392b) !important;
    border: none !important;
    color: #fff !important;
}

.tm-btn-sair-sala svg { fill: currentColor; }


/* ---------- Chamar um amigo alinhado com os demais ----------

   Ele ficava solto abaixo da caixa do link, com largura própria
   e sem o alinhamento dos outros. Voltou para dentro do bloco
   de botões, então herda tudo — largura, altura, ícone à
   esquerda, texto centralizado. Sobra só garantir que o antigo
   estilo isolado não o puxe para fora. */

.tm-btn-amigos-sala {
    width: auto;
    margin-top: 0;
}

/* O bloco de botões da sala. A classe é `tm-botoes` — conferi
   no template antes de escrever, porque nesta base já errei o
   nome da classe duas vezes escrevendo de memória. */
.tm-botoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.tm-botoes .tm-btn-sala {
    width: 100%;
    justify-content: center;
}


/* ============================================================
   ============================================================
   AS AÇÕES FORAM PARA ONDE ELAS AGEM
   ============================================================
   ============================================================

   Adicionar bot e trocar times eram botões de largura cheia no
   rodapé, longe do que modificam. Agora o bot fica embaixo da
   cadeira que vai ocupar, e a troca de times fica entre as duas
   duplas.

   O ganho não é só de espaço: some a etapa mental de traduzir
   "adicionar bot" em "onde ele vai cair?". Você toca no lugar.
   ============================================================ */


/* ---------- "adicionar bot" no lugar do nome ---------- */

/* ESTES ESTILOS SÃO DO TEXTO, NÃO DA CLASSE DA AÇÃO.

   `tm-vaga-bot` passou a marcar as duas coisas que adicionam
   bot: o círculo e o rótulo. Quando o estilo do rótulo ficava
   nessa classe, ele caía também no círculo — e `border: none`
   apagava a borda tracejada, fazendo o círculo sumir. Sobrava
   um "+" solto no escuro.

   A classe da AÇÃO é `tm-vaga-bot`; a classe da APARÊNCIA do
   rótulo é `tm-vaga-bot-texto`. Separadas, uma não estraga a
   outra. */
.tm-vaga-bot-texto {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 3px 2px;

    background: none;
    border: none;

    color: rgba(255,255,255,.42);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    line-height: 1.2;

    cursor: pointer;
    transition: color .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.tm-vaga-bot-texto:hover    { color: rgba(255,255,255,.8); }
.tm-vaga-bot-texto:active   { transform: scale(.94); }
.tm-vaga-bot:disabled       { opacity: .5; cursor: default; }

/* O círculo: aparência de cadeira vazia, com a borda tracejada
   que a classe do rótulo estava apagando. */
.tm-player-empty.tm-vaga-bot {
    border: 2px dashed rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.04) !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255,255,255,.45);
}

.tm-player-empty.tm-vaga-bot:hover {
    border-color: rgba(46,204,113,.55) !important;
    color: rgba(46,204,113,.95);
}

.tm-player-empty.tm-vaga-bot:active { transform: scale(.93); }


/* ---------- O VS virou botão ---------- */

.tm-vs-trocar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 6px 4px;
    border: none;
    background: none;

    color: inherit;
    font-family: inherit;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.tm-vs-texto {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(255,255,255,.45);
}

/* A seta é o botão. Em 17px ela parecia enfeite ao lado do
   "VS" e o alvo de toque ficava abaixo do mínimo para dedo. */
.tm-vs-trocar svg {
    width: 30px;
    height: 30px;
    fill: rgba(241,196,15,.85);
    transition: transform .2s ease, fill .16s ease;
}

.tm-vs-trocar {
    min-width: 46px;
    min-height: 46px;
}

@media (min-width: 768px) {
    .tm-vs-trocar svg { width: 34px; height: 34px; }
}

.tm-vs-trocar:hover svg { fill: #f1c40f; }

/* Meia volta ao tocar: o desenho faz o que o botão faz. */
.tm-vs-trocar:active svg { transform: rotate(180deg); }

/* Com menos de dois na mesa não há o que trocar. Fica visível,
   mas apagado — esconder faria o VS sumir e a mesa perder a
   divisão entre os lados. */
.tm-vs-trocar.inativo {
    pointer-events: none;
}

.tm-vs-trocar.inativo svg { opacity: .25; }


/* ============================================================
   ============================================================
   A CADEIRA VAZIA
   ============================================================
   ============================================================

   O círculo saiu oval porque a vaga passou a ter DOIS filhos —
   o círculo e o texto — e o cartão os dispunha lado a lado. O
   botão virou item de flex numa linha e esticou na largura.

   Duas correções, e as duas são necessárias: a coluna organiza
   os dois um sobre o outro, e a proporção travada garante o
   círculo mesmo que a largura mude de novo.
   ============================================================ */

.tm-player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tm-player-empty {
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* A cadeira inteira é um alvo só. O texto embaixo herda o
   destaque do círculo ao passar o dedo, para os dois se lerem
   como uma coisa. */
.tm-player-card:hover .tm-player-empty {
    border-color: rgba(46,204,113,.55);
    color: rgba(46,204,113,.95);
}

.tm-player-card:hover .tm-vaga-bot-texto {
    color: rgba(255,255,255,.8);
}

.tm-vaga-bot-texto {
    font-size: 10.5px;
    letter-spacing: .2px;
}


/* ------------------------------------------------------------
   A CADEIRA VAZIA SOBE UM PIXEL

   Pedido do Paulo, e é ajuste de olho, não de conta: na fileira
   de lugares da sala, a cadeira vazia lê um fio mais baixa que
   os avatares ocupados ao lado. A borda tracejada tem 2px e é
   clara por dentro e escura por fora, então a linha que o olho
   segue não é a mesma borda da foto do vizinho, que é sólida —
   e essa diferença de meio pixel para cada lado aparece como um
   degrau.

   `position: relative` + `top`, e não `transform`: o círculo já
   usa transform no :active (o afundadinho do toque) e o rótulo
   também. Somar o deslocamento ali obrigaria a repetir os -1px
   dentro de cada estado, e o dia em que alguém acrescentasse um
   :hover com transform o pixel voltaria calado.
   ------------------------------------------------------------ */
.tm-player-empty.tm-vaga-bot,
.tm-vaga-bot-texto {
    position: relative;
    top: -1px;
}


/* A revanche voltou a ser um botão de verdade. Quando o prazo
   vence sem ela, ele fica desabilitado com "SEM REVANCHE" —
   este estilo é o que o deixa com cara de aviso em vez de
   botão apagado. */
#btn-revancha:disabled {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.7) !important;
    cursor: default !important;
    opacity: 1 !important;
}

#btn-revancha:disabled svg { opacity: .45; }


/* ============================================================
   GRITOS DE FRASE, NÃO SÓ DE PALAVRA

   "A PRIMEIRA VAI À MISSA" não cabe no tamanho de "TRUCO". Três
   faixas de tamanho conforme o comprimento, para as curtas
   continuarem grandes.
   ============================================================ */

.tm-grito-medio {
    font-size: clamp(26px, 8.5vw, 46px) !important;
    letter-spacing: 1.5px;
}

.tm-grito-longo {
    font-size: clamp(19px, 6vw, 34px) !important;
    letter-spacing: .8px;
    line-height: 1.15;

    /* Duas linhas, se precisar: numa frase, quebrar é melhor que
       espremer as letras até ficarem ilegíveis. */
    white-space: normal;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}


/* ---------- Aviso de conta bloqueada ---------- */

.tm-bloqueado {
    max-width: 420px;
    margin: 40px auto;
    padding: 26px 22px;
    box-sizing: border-box;

    background: rgba(232,86,63,.08);
    border: 1px solid rgba(232,86,63,.32);
    border-radius: 16px;
    text-align: center;
}

.tm-bloqueado h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 900;
    color: #f0938a;
}

.tm-bloqueado p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,.78);
}

.tm-bloqueado-ajuda {
    font-size: 12.5px !important;
    color: rgba(255,255,255,.45) !important;
}


/* ============================================================
   A COLUNA DA SALA, CENTRALIZADA

   `.tm-sala-container` tinha `margin-inline: auto` lá no começo
   do arquivo. Uma regra posterior escreveu `margin-top: 0` — e
   `margin-top` é uma propriedade DIFERENTE de `margin-inline`,
   mas o navegador resolve as duas dentro do mesmo `margin`
   computado: a declaração posterior, sendo mais específica em
   ordem, redefine o eixo que ela toca e o `auto` horizontal
   permanece... exceto que a regra vencedora na cascata passa a
   ser a de `margin-top`, e nela não há `auto` nenhum.

   O sintoma só aparece em tela larga, onde o `max-width` faz
   diferença: no celular a coluna ocupa tudo e centralizada ou
   não dá no mesmo. Por isso passou tanto tempo despercebido.

   Aqui as duas coisas são declaradas juntas, uma vez só.
   ============================================================ */

.tm-sala-container,
.tm-lobby-container,
.tm-ranking-container,
.tm-perfil-container,
.tm-resultado-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------
   OS BOTÕES ACOMPANHAM A LARGURA DA COLUNA

   Na 2.85 eu pus `max-width: 460px` aqui achando que estava
   centralizando. O efeito foi o oposto do pretendido: o bloco
   de botões ficou MAIS ESTREITO que os vizinhos — a fileira de
   temas e o espaço de publicidade usam a largura inteira da
   coluna — e um bloco estreito no meio de blocos largos parece
   desalinhado mesmo estando centrado.

   Alinhamento não é só "estar no meio": é ter a mesma borda
   esquerda e a mesma borda direita dos elementos de cima e de
   baixo. Sem cap, os três blocos começam e terminam no mesmo
   lugar.
------------------------------------------------------------ */
.tm-botoes {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;

    /* `stretch` faz os filhos ocuparem a coluna por natureza.
       Uma regra antiga deixava `center`, e aí cada botão só não
       encolhia porque tinha `width: 100%` — bastava um botão
       novo sem essa linha para ele nascer torto. */
    align-items: stretch;
}

.tm-botoes .tm-btn-sala {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* A caixa do link segue a mesma regra: largura da coluna. */
.tm-link-box {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* ============================================================
   O CONVITE PARA VIRAR CONTA

   Amarelo de aviso, não verde de oferta: o recado é que algo
   está pendente, não que há uma promoção. E fica no topo do
   lobby, visível toda vez — uma tarja que aparece uma vez e
   some não serve para uma condição que dura.
   ============================================================ */

.tm-convite-conta {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    margin-bottom: 14px;

    background: rgba(241,196,15,.10);
    border: 1px solid rgba(241,196,15,.30);
    border-radius: 12px;
}

.tm-convite-conta-texto { flex: 1; min-width: 0; line-height: 1.3; }

.tm-convite-conta-texto b {
    display: block;
    font-size: 13.5px;
    color: #f1c40f;
}

.tm-convite-conta-texto span {
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
}

.tm-convite-conta a {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 999px;

    background: linear-gradient(135deg,#f1c40f,#d4a30c);
    color: #2a2000;

    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-decoration: none;
}


/* O botão de convidado é estilizado no CSS do TEMA, junto dos
   outros botões da home.

   Estava aqui e não funcionava: a home não carrega o CSS do
   plugin. O <button> ficava com o cinza padrão do navegador e o
   texto branco herdado do tema — branco sobre cinza claro, sem
   contraste nenhum.

   A regra tem que morar onde moram as irmãs dela. */


/* ============================================================
   A OFERTA DE CADASTRO NO PERFIL

   Verde, e não o amarelo de aviso do lobby: aqui não é alerta,
   é convite. O jogador veio ver os próprios números e a
   mensagem diz o que fazer com eles.
   ============================================================ */

.tm-perfil-convidado {
    margin: 0 0 22px;
    padding: 16px 18px;

    background: rgba(46,204,113,.09);
    border: 1px solid rgba(46,204,113,.28);
    border-radius: 14px;
    text-align: center;
}

.tm-perfil-convidado h4 {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6fdc9b;
}

.tm-perfil-convidado p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.78);
}

.tm-perfil-convidado a {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;

    background: linear-gradient(135deg,#2ecc71,#1e9e53);
    color: #fff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-decoration: none;
}

.tm-perfil-convidado small {
    display: block;
    margin-top: 9px;
    font-size: 11.5px;
    color: rgba(255,255,255,.42);
}


/* ============================================================
   OS 2px DA CADEIRA VAZIA

   O círculo tracejado nascia um fio abaixo dos avatares reais,
   porque o avatar tem borda de 3px e o círculo vazio tem 2 — a
   diferença empurra a caixa para baixo. E o "Adicionar bot"
   fica onde ficaria o nome, que tem outra altura de linha.

   Dois pixels que ninguém sabe nomear mas todo mundo enxerga
   como "torto".
   ============================================================ */

/* `!important` porque as regras originais são mais específicas
   que estas — e brigar por especificidade com seletor mais
   longo só empurra o problema para a próxima correção. */
.tm-player-empty    { margin-top: -2px !important; }
.tm-vaga-bot-texto  { margin-top: 4px !important; }


/* ============================================================
   O "?" DA MESA MUDOU DE LUGAR

   Ele era item do flex do placar, e o bloco que ficava aqui
   cuidava de impedir que o conteúdo da barra escorregasse por
   baixo dele em telas estreitas.

   Saiu do placar: numa barra que já carrega dois placares, as
   rodadas e o valor da mão, não havia espaço sobrando. Agora
   mora numa linha própria entre o placar e o feltro, e o estilo
   dele está no regras.css, junto das outras duas aparências do
   mesmo botão.

   O bloco antigo foi removido em vez de deixado aqui: duas
   definições da mesma classe em arquivos diferentes é como
   nascem as regras que ninguém sabe qual vence.
   ============================================================ */

@media (max-width:360px){
    /* Em 320px o conteúdo do placar já enchia a barra inteira;
       o botão sobrava 2px para fora. Dois pixels a menos em cada
       vão resolvem sem mexer no tamanho de nada. */
    .tm-placar-topo{ gap:6px; }
}

/* ============================================================
   MODO VIRAR: METADE VERSO, METADE CARA

   Antes, ligar o VIRAR punha a mão inteira de costas. As três
   cartas viravam retângulos iguais e o jogador escolhia no
   escuro — descartava sem saber o que estava mandando.

   Agora a carta continua legível e recebe METADE do verso por
   cima, na diagonal. O canto de cima à esquerda, que é por onde
   se lê a carta, fica sempre limpo; a metade de baixo à direita
   mostra o verso, dizendo o que vai acontecer com ela.

   Isto é só do lado de quem joga. Para os adversários a carta
   continua chegando como VIRADA — quem decide o que cada um vê
   é o servidor, em filtrar_para().
   ============================================================ */

.tm-carta.vai-virar {
    position: relative;
    overflow: hidden;

    /* Contorno na mesma cor do botão VIRAR ligado: a carta e o
       botão dizem a mesma coisa ao mesmo tempo. */
    box-shadow: 0 0 0 2px var(--tm-amarelo), 0 4px 10px rgba(0,0,0,.35);
}

/* A metade de baixo à direita, com o mesmo verso do baralho */
.tm-carta.vai-virar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;

    clip-path: polygon(100% 0, 100% 100%, 0 100%);

    background:
        repeating-linear-gradient(45deg,
            var(--tm-vermelho-escuro) 0px, var(--tm-vermelho-escuro) 4px,
            var(--tm-vermelho)        4px, var(--tm-vermelho)        8px);

    /* O drop-shadow acompanha o recorte, então desenha uma linha
       clara exatamente sobre a diagonal — a divisa entre as duas
       metades, sem precisar de mais um elemento. */
    filter: drop-shadow(-1.5px -1.5px 0 rgba(255,255,255,.9));
}

/* O valor precisa ficar por cima da metade virada nas bordas */
.tm-carta.vai-virar .tm-top {
    position: relative;
    z-index: 4;
}

/* Toque/hover continuam valendo no modo virar */
.tm-carta.vai-virar.clicavel:hover::before,
.tm-carta.vai-virar.clicavel:focus-visible::before {
    filter: drop-shadow(-1.5px -1.5px 0 #fff) brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .tm-carta.vai-virar::before { transition: none; }
}

/* ==========================================================
   APAGAR A CONTA

   Fica no rodapé do perfil, em letra miúda e cor apagada. A
   hierarquia visual aqui é uma decisão de produto: a saída
   precisa ser ENCONTRÁVEL sem procurar, e não precisa ser
   convidativa. Um botão vermelho grande ao lado de "Ver
   ranking" seria as duas coisas erradas ao mesmo tempo.

   O vermelho só entra depois que a pessoa abriu o painel e
   está a um clique do irreversível.
========================================================== */

/* Fora do cartão agora: a borda de cima sumiu porque a própria
   aresta do cartão já faz a separação, e uma segunda linha logo
   abaixo dela criaria um degrau sem sentido. */
.tm-apagar{
    margin:14px auto 4px;
    text-align:center;
}

.tm-apagar-link{
    background:none;
    border:0;
    padding:6px 10px;

    font-size:12.5px;
    font-family:inherit;
    color:rgba(255,255,255,.45);
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
}

.tm-apagar-link:hover,
.tm-apagar-link:focus-visible{ color:rgba(255,120,110,.95); }

.tm-apagar-painel,
.tm-apagar-fim{
    margin-top:10px;
    padding:18px 18px 16px;

    background:rgba(200,40,40,.07);
    border:1px solid rgba(220,70,60,.32);
    border-radius:14px;
    text-align:left;
}

.tm-apagar-painel h4,
.tm-apagar-fim h4{
    margin:0 0 9px;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.1px;
    text-transform:uppercase;
    color:#ff8a7d;
}

.tm-apagar-painel p,
.tm-apagar-fim p{
    margin:0 0 11px;
    font-size:13.5px;
    line-height:1.5;
    color:rgba(255,255,255,.82);
}

.tm-apagar-painel ul{
    margin:0 0 12px;
    padding-left:20px;
    font-size:13.5px;
    line-height:1.65;
    color:rgba(255,255,255,.82);
}

/* A nota sobre o histórico dos outros jogadores: informação de
   segunda ordem, e a cor diz isso sem precisar de rótulo. */
.tm-apagar-nota{
    font-size:12.5px !important;
    line-height:1.5 !important;
    color:rgba(255,255,255,.58) !important;
}

.tm-apagar-aviso{
    padding:10px 12px;
    background:rgba(255,190,60,.10);
    border:1px solid rgba(255,190,60,.30);
    border-radius:10px;
    font-size:13px !important;
    color:rgba(255,255,255,.86) !important;
}

.tm-apagar-aviso a{ color:#ffd166; }

.tm-apagar-painel label{
    display:block;
    margin:4px 0 6px;
    font-size:12.5px;
    color:rgba(255,255,255,.72);
}

.tm-apagar-painel input{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    margin-bottom:14px;

    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;

    color:#fff;
    font-size:15px;   /* abaixo de 16px o iPhone dá zoom sozinho ao focar */
    font-family:inherit;
}

.tm-apagar-painel input:focus{
    outline:none;
    border-color:rgba(255,120,110,.6);
}

.tm-apagar-botoes{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.tm-apagar-botoes .tm-btn-sala{ flex:1 1 150px; }

.tm-apagar-btn{
    background:linear-gradient(135deg,#e0483c,#b32d2e) !important;
    border-color:rgba(255,120,110,.4) !important;
    color:#fff !important;
}

.tm-apagar-btn:disabled{ opacity:.6; cursor:default; }

/* Na página própria o botão é um só e ocupa a largura toda —
   não há um "cancelar" ao lado dele disputando espaço, porque
   cancelar ali é simplesmente voltar. */
.tm-excluir-pagina .tm-apagar-btn{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:2px;
}

/* ---------- A PÁGINA /excluir-conta ---------- */

.tm-excluir-pagina .tm-perfil-card{ padding:20px 18px 18px; }

/* Quem está prestes a sumir, no alto da tela.

   A foto e os números não são enfeite: são a informação mais
   relevante para a decisão. "48 partidas, 19 vitórias" faz
   pensar de um jeito que "tem certeza?" não faz. */
.tm-excluir-quem{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.tm-excluir-quem img{
    width:52px; height:52px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    border:2px solid rgba(255,255,255,.14);
}

/* O cartão do perfil centraliza tudo por dentro, e o nome
   herdava isso — ficava boiando no meio em vez de nascer
   colado na foto. */
.tm-excluir-quem div{ min-width:0; line-height:1.35; text-align:left; }

.tm-excluir-quem strong{
    display:block;
    font-size:16px;
    color:#fff;
}

.tm-excluir-quem span{
    font-size:12.5px;
    color:rgba(255,255,255,.55);
}

/* A saída sem dano fica embaixo e em verde: numa tela cujo
   assunto é destruir alguma coisa, o botão mais visível tem de
   ser o que NÃO destrói. */
.tm-excluir-volta{
    margin:16px 0 0;
    text-align:center;
}

.tm-excluir-volta .tm-btn-sala{
    display:inline-block;
    min-width:200px;
}

.tm-apagar-fim{
    background:rgba(46,204,113,.08);
    border-color:rgba(46,204,113,.30);
    text-align:center;
}

.tm-apagar-fim h4{ color:#6fdc9b; }


/* ============================================================
   OS JOGADORES DOS LADOS SE ALINHAM PELA FOTO

   Pedido do Paulo, e o defeito tem uma causa exata.

   A caixa de cada jogador é uma coluna: foto em cima, nome
   embaixo. Nas laterais ela é centralizada com `top: 50%` mais
   `transform: translateY(-50%)` — ou seja, o que fica no meio da
   mesa é o centro da COLUNA INTEIRA, não o centro da foto.

   Enquanto todo mundo tem nome de uma linha, dá no mesmo. Mas
   "WILSINHO DA TABU" quebra em duas linhas e "MARMOTA" não: a
   coluna da esquerda fica mais alta, e metade dessa altura extra
   sobe a foto. As duas fotos, que deveriam estar na mesma linha
   uma da outra, saem desalinhadas — e quem olha não liga isso ao
   tamanho do nome, só vê a mesa torta.

   Um nome não pode mover uma foto. Aqui o nome sai do fluxo da
   coluna: ele passa a ser posicionado a partir da base da foto,
   e cresce para baixo sem empurrar nada. A caixa volta a ter a
   altura da foto, e `translateY(-50%)` finalmente centraliza o
   que se queria centralizar.

   Só nas laterais. Em cima e embaixo o alinhamento é horizontal
   e o nome nunca teve como atrapalhar.
   ============================================================ */

.tm-pos.left  > .nome,
.tm-pos.right > .nome {
    position: absolute;

    /* O `+ 5px` repõe exatamente o `gap` da coluna, que deixa de
       valer quando o nome sai do fluxo. Sem ele o nome subiria
       5px e a correção apareceria como "o nome encostou na
       foto" — trocar um desalinho por outro.

       O afastamento em si continua sendo o `margin-top` que já
       existia, e que muda de 15 para 17px na tela grande. Ele é
       deixado de fora desta regra de propósito: repetir o
       número aqui congelaria o valor do celular e o da tela
       grande deixaria de valer, calado. */
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);

    /* `width: max-content` não é enfeite: sem ele o nome vira
       uma coluna de uma letra por linha.

       Caixa posicionada de forma absoluta se encolhe até o
       conteúdo — mas o teto desse encolhimento é o espaço da
       borda esquerda até o fim do elemento pai. Com `left: 50%`
       e um pai da largura da FOTO, sobram uns 30px, e o
       navegador quebra a linha em cada letra para caber. No
       fluxo normal isso não acontecia porque a coluna dava a
       largura.

       Com max-content a caixa pede a largura natural do texto, e
       o `max-width` que já existe (74px no celular, 110 na tela
       grande) continua sendo quem manda quebrar. */
    width: max-content;

    white-space: normal;
}


/* ============================================================
   O EMOJI DO JOGADOR DA DIREITA MUDA DE LADO

   O selo de reação mora no canto inferior DIREITO da foto. Nos
   três primeiros jogadores isso é só um canto; no da direita é
   o canto que já está fora.

   Esse jogador é empurrado para fora da mesa de propósito — o
   deslocamento chega a 34% da largura da mesa nas telas
   grandes — e a foto dele encosta na borda da tela. O emoji,
   4px mais para fora ainda, cai no que não existe: some pela
   direita, e a pessoa não vê a reação que o adversário mandou.

   Espelhado, ele passa a ocupar o lado que sobra — o lado de
   dentro, virado para o feltro, onde há espaço de sobra. Só
   nesse jogador: nos outros o canto direito não incomoda
   ninguém, e mover todo mundo seria trocar um acerto por uma
   simetria que ninguém pediu.
   ============================================================ */

.tm-pos.right .tm-emoji {
    right: auto !important;
    left: -4px !important;
}


/* ============================================================
   ============================================================
   AJUSTES 2.62
   ============================================================
   ============================================================ */


/* ------------------------------------------------------------
   1. "SAIU" NO AVATAR, NÃO NO NOME

   Quem fecha a aba passa a ser jogado pelo bot, e isso precisa
   ficar claro: sem aviso, o parceiro atravessa a partida achando
   que o outro está jogando rápido demais e mal demais, sem
   entender que quem está ali é a máquina.

   O aviso existia — um "(saiu)" grudado no fim do nome. Só que
   o nome é a parte mais apertada da caixa: tem 9,5px de altura,
   largura limitada e corta com reticências quando não cabe.
   Justamente o lugar onde um aviso desaparece.

   Agora ele é uma tarja sobre a foto. A foto é o maior elemento
   do jogador e a única coisa que o olho procura quando quer
   saber quem é quem — e a tarja é feita em CSS, sem tocar no
   JavaScript, que monta a caixa do jogador uma vez só e não
   deve recriar nada a cada estado.
   ------------------------------------------------------------ */

.tm-pos.automatico .tm-player-wrapper {
    position: relative;
}

.tm-pos.automatico .tm-player-wrapper::after {
    content: "SAIU";

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;

    padding: 2px 7px;
    border-radius: 6px;

    background: rgba(10, 14, 18, .86);
    border: 1px solid rgba(255,255,255,.28);

    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1.1;
    white-space: nowrap;

    pointer-events: none;
}

@media (min-width: 768px) {
    .tm-pos.automatico .tm-player-wrapper::after {
        font-size: 11px;
        padding: 3px 9px;
    }
}

/* O "(saiu)" sai do nome: dito duas vezes, uma delas cortada. */
.tm-pos.automatico .nome::after {
    content: none;
}


/* ------------------------------------------------------------
   2. OS JOGADORES DAS LATERAIS ENCOSTAM NA MESA

   Eles estavam inteiramente FORA do feltro: em 390px de tela, o
   tampo terminava em 324 e a foto começava em 327. Ninguém
   senta assim numa mesa — e, empurrados para a borda, eram eles
   que levavam para fora da tela o emoji e o balão de fala.

   O quanto dá para aproximar tem um limite, e não é estético: a
   carta jogada por eles cai numa faixa ao lado do centro, e a
   foto não pode cobri-la. Medi essa faixa em quatro tamanhos de
   tela; o menor vão entre a carta e a foto era de 32px, ou 0,13
   da largura da mesa. Aproximando 0,09 sobram cerca de 10px em
   todos, com a foto agora encostando no tampo em vez de boiar
   ao lado dele.
   ------------------------------------------------------------ */

.tm-pos.left  { left:  calc(var(--tm-mesa) * -0.15) !important; }
.tm-pos.right { right: calc(var(--tm-mesa) * -0.15) !important; }

@media (min-width: 500px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.21) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.21) !important; }
}

@media (min-width: 768px) {
    .tm-pos.left  { left:  calc(var(--tm-mesa) * -0.25) !important; }
    .tm-pos.right { right: calc(var(--tm-mesa) * -0.25) !important; }
}


/* ------------------------------------------------------------
   3. O BALÃO DE FALA: MAIS QUADRADO E DENTRO DA TELA

   Duas coisas, e a segunda é a que estragava a frase.

   O balão tinha 190px de largura e nascia CENTRADO no avatar.
   Nos jogadores das laterais, metade dele caía para fora: medi
   56px de frase cortada pela borda da tela em 390px, e 58px em
   360px. A frase não estava sendo cortada pelo CSS do balão —
   estava saindo da tela.

   Então o balão dos laterais deixa de ser centrado e passa a
   ser ancorado pelo lado de DENTRO: ele cresce para o feltro,
   que é onde há espaço. Mesma ideia do emoji.

   E a largura cai para 132px, que é o pedido de deixá-lo mais
   quadrado: a mesma frase que ocupava duas linhas largas passa
   a ocupar três ou quatro curtas, e o balão fica com proporção
   de bilhete em vez de faixa.
   ------------------------------------------------------------ */

.tm-fala {
    max-width: 132px;
}

/* Ancorado pelo lado de dentro, não pelo centro. */
.tm-pos.left .tm-fala {
    left: 0;
    right: auto;
    transform: none;
}

.tm-pos.right .tm-fala {
    left: auto;
    right: 0;
    transform: none;
}

/* O rabicho acompanha: ele aponta para a FOTO, e a foto deixou
   de estar no meio do balão. */
.tm-pos.left .tm-fala::after {
    left: 20px;
    margin-left: 0;
}

.tm-pos.right .tm-fala::after {
    left: auto;
    right: 20px;
    margin-left: 0;
}

/* A animação de entrada tem translateX(-50%) dentro dela, que
   é o que centrava o balão. Nos laterais isso o jogaria de
   volta para fora no primeiro quadro — daí uma entrada só
   deles, sem o deslocamento horizontal. */
.tm-pos.left  .tm-fala.entrando,
.tm-pos.right .tm-fala.entrando {
    animation-name: tmFalaLado;
}

@keyframes tmFalaLado {
    0%   { opacity: 0; transform: translateY(8px) scale(.92); }
    100% { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   4. CADA BALÃO ONDE HÁ ESPAÇO

   Pedido do Paulo: nos jogadores de cima e de baixo o balão vai
   para o LADO; nos das laterais, fica EM CIMA.

   A regra por trás é uma só — o balão ocupa o vazio, não o
   feltro:

   O de cima e o de baixo estão no eixo vertical da mesa. Com o
   balão em cima ou embaixo, ele cai justamente sobre o tampo:
   medido em 390px, o balão do jogador de cima ficava entre y=237
   e y=305, e o feltro começa em y=236. Ou seja, em cima das
   cartas. Do lado deles, ao contrário, sobra a tela inteira —
   eles ficam no meio, e o vazio está à esquerda e à direita.

   Os das laterais são o oposto: estão colados na borda da tela,
   onde não há espaço horizontal nenhum (foi o que cortava a
   frase), e têm todo o vão de cima livre.

   E o lado escolhido para cada um não é sorteio. No jogador de
   baixo — você — o botão de falar mora à esquerda e o selo de
   reação à direita: falar de um lado, reagir do outro. O balão
   nasce do lado do botão que o gerou. No de cima ele vai para a
   direita, onde não esbarra em nada.
   ------------------------------------------------------------ */

.tm-pos.top .tm-fala,
.tm-pos.bottom .tm-fala {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);

    /* Na tela estreita, metade da largura menos a foto é tudo o
       que existe: sem este teto o balão do jogador do meio
       passaria da borda, que é o defeito que acabamos de tirar
       dos laterais. */
    max-width: min(132px, calc(50vw - 46px));
}

.tm-pos.top .tm-fala {
    left: calc(100% + 9px);
    right: auto;
}

.tm-pos.bottom .tm-fala {
    right: calc(100% + 9px);
    left: auto;
}

/* O rabicho deita: antes apontava para baixo (ou para cima, no
   jogador do topo); agora aponta para o lado, para a foto. */
.tm-pos.top .tm-fala::after,
.tm-pos.bottom .tm-fala::after {
    top: 50%;
    bottom: auto;
    margin-top: -6px;
    margin-left: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.tm-pos.top .tm-fala::after {
    left: -8px;
    right: auto;
    border-left: none;
    border-right: 8px solid #fff;
}

.tm-pos.bottom .tm-fala::after {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 8px solid #fff;
}

/* A entrada precisa preservar o translateY(-50%) que centraliza
   o balão na foto. A animação padrão carrega um
   translateX(-50%) que serviria para o balão centrado — aqui
   ele jogaria o balão meia largura para a esquerda no primeiro
   quadro, e a pessoa veria o balão dando um pulo ao aparecer. */
.tm-pos.top .tm-fala.entrando,
.tm-pos.bottom .tm-fala.entrando {
    animation-name: tmFalaLateral;
}

@keyframes tmFalaLateral {
    0%   { opacity: 0; transform: translateY(-50%) scale(.92); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}


/* O balão dos laterais sobe mais alguns pixels.

   Medindo o estrago: acima da foto do lateral, o balão cresce
   para dentro e vai encontrar a carta do jogador DE CIMA, que
   cai no meio do tampo. Em 360px de largura ele tapava 22% dela;
   em 320px, 61%.

   Subir o balão é o que custa menos: ele passa a nascer 18px
   acima da foto em vez de 10, e some da frente da carta sem
   ficar mais estreito — estreitar seria transformar a frase numa
   coluna de oito linhas. */
.tm-pos.left .tm-fala,
.tm-pos.right .tm-fala {
    bottom: calc(100% + 18px);
}

/* Tela curta: o balão do lateral sobe ainda mais.

   Em 320x568 os 18px não bastavam — o balão ainda terminava
   abaixo da borda de cima da carta central e tapava 47% dela.
   Aqui a mesa ocupa quase a tela inteira e não existe largura
   para estreitar o balão sem virar coluna de letras; o que
   sobra é altura, então é altura que ele usa. */
@media (max-height: 620px) {
    .tm-pos.left .tm-fala,
    .tm-pos.right .tm-fala {
        bottom: calc(100% + 48px);
    }
}


/* ============================================================
   O FIM DA PARTIDA COM GENTE ESPERANDO

   Três coisas na mesma tela, e uma delas é a que estourava o
   painel: o texto de explicação. Ele tinha 12,5px num painel do
   tamanho da mesa que ainda precisa caber título, subtítulo e
   três botões — e o último botão saía pela borda do feltro.

   Agora a explicação encolhe (é contexto, lê-se uma vez) e a
   contagem cresce (é o que muda, e é o que a pessoa fica
   olhando). O painel inteiro passa a ser medido em proporção da
   mesa, como o da mão de dez, para caber em qualquer tela.
   ============================================================ */

.tm-revanche-aviso {
    margin: 0 0 8px !important;
    max-width: 100% !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* A explicação: menor, é contexto. */
.tm-revanche-aviso .tm-aviso-texto {
    font-size: clamp(9.5px, calc(var(--tm-mesa) * .042), 12px);
    line-height: 1.3;
    color: rgba(255,255,255,.62);
    max-width: 95%;
}

/* A contagem: é o que está acontecendo agora. */
.tm-revanche-aviso .tm-aviso-conta {
    font-size: clamp(12px, calc(var(--tm-mesa) * .055), 15px);
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--tm-amarelo, #ffaa00);
}

.tm-revanche-aviso .tm-aviso-conta:empty { display: none; }

.tm-revanche-aviso .tm-aviso-conta.urgente {
    color: #ff6b52;
    animation: tmContaPulso .9s ease-in-out infinite;
}

@keyframes tmContaPulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-revanche-aviso .tm-aviso-conta.urgente { animation: none; }
}


/* ---- O painel do fim cabe inteiro na mesa ----

   Mesmo problema que a mão de dez tinha: medidas em pixels
   fixos dentro de uma caixa do tamanho da mesa, que é
   proporcional à tela. Na foto do Paulo o botão de baixo estava
   cortado pela borda do feltro. */

#overlay-final {
    overflow: hidden !important;
    padding: 10px 16px !important;
}

#titulo-final {
    font-size: clamp(15px, calc(var(--tm-mesa) * .075), 22px) !important;
    margin-bottom: calc(var(--tm-mesa) * .02) !important;
}

#subtitulo-final {
    font-size: clamp(9.5px, calc(var(--tm-mesa) * .042), 12.5px) !important;
    margin-top: calc(var(--tm-mesa) * .012) !important;
    line-height: 1.3;
}

#botoes-final {
    gap: calc(var(--tm-mesa) * .026) !important;
    margin-top: calc(var(--tm-mesa) * .03) !important;
}

#botoes-final .tm-btn {
    width: clamp(128px, calc(var(--tm-mesa) * .62), 190px) !important;
    padding: calc(var(--tm-mesa) * .032) 0 !important;
    font-size: clamp(11px, calc(var(--tm-mesa) * .048), 14px) !important;
    line-height: 1.1 !important;
}

#botoes-final .tm-btn svg {
    width:  calc(var(--tm-mesa) * .055);
    height: calc(var(--tm-mesa) * .055);
    max-width: 17px;
    max-height: 17px;
}

/* Tela curta: sobra a contagem, sai a explicação.

   Em 320x568 o painel ainda estourava 42px mesmo com tudo
   proporcional — ali a mesa ocupa quase a tela inteira e não há
   como caber título, explicação de três linhas, subtítulo e dois
   botões.

   O que sai é a explicação. Ela conta o que já está dito de
   outro jeito: o título diz se ganhou ou perdeu, e a contagem
   diz o que vai acontecer. O que não pode sair é o botão, que é
   a única coisa ali que a pessoa PODE fazer. */
@media (max-height: 620px) {
    .tm-revanche-aviso .tm-aviso-texto { display: none; }

    /* Faltavam ainda 14px depois de tirar a explicação. Vêm do
       subtítulo, que é a terceira maneira de dizer a mesma
       coisa: "VITÓRIA!" no título, "Você e fulano venceram" no
       subtítulo, e o placar já está na barra de cima. */
    #subtitulo-final { display: none; }
}


/* ------------------------------------------------------------
   O PAINEL DO FIM: SEM O RISCO EM CIMA, E MAIS ALTO

   Mesmo risco claro que a mão de dez tinha, mesma causa: o
   tampo da mesa tem uma marca de luz por dentro da borda — um
   box-shadow branco — e o fundo do painel era translúcido nas
   beiradas (alfa .82). A luz passava através e virava um traço
   atravessado logo acima do título.

   Fundo opaco resolve, e aqui a transparência não fazia falta
   nenhuma: é uma tela de resultado, ninguém precisa ver o
   feltro através dela.

   E o conteúdo sobe. Ele estava centrado na vertical, com folga
   igual em cima e embaixo; ancorado no topo, ganha uns 11px de
   altura e a tela respira embaixo, que é onde ficam os botões.
   ------------------------------------------------------------ */

#overlay-final {
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(9,15,20,1) 0%,
            rgba(9,15,20,1) 70%,
            rgba(7,12,16,1) 100%) !important;

    /* ------------------------------------------------------
       E O CONTEÚDO DESCE

       Ele já esteve centrado; passou a ficar ancorado no topo
       quando o painel não cabia na mesa e o botão de baixo saía
       cortado. Naquele momento a escolha era certa: com o
       conteúdo maior que a caixa, prender no topo garante que o
       que se perde é a folga, não um botão.

       Só que depois disso o painel inteiro passou a caber — o
       fim.js mede isso nas sete telas —, e a âncora virou
       sobra: a tela de derrota ficava colada no alto com um vão
       grande embaixo.

       Cabendo, centrar é o certo. E um empurrãozinho para baixo
       por cima disso, que foi o que ele pediu: o título é o que
       o olho procura, e ele fica mais perto do meio da mesa.
    ------------------------------------------------------ */
    justify-content: center !important;

    padding-top: calc(var(--tm-mesa) * .062) !important;

    padding-bottom: calc(var(--tm-mesa) * .042) !important;
}

/* E DEPOIS SUBIU 10px

   "Nessa tela final sobe a mensagem 10px."

   O deslocamento é do CONTEÚDO, por `top`, e não das margens do
   painel. Tentei primeiro pelas margens — 20px a mais embaixo
   sobem o bloco centrado em 10px — e quebrou nas telas pequenas:
   aqueles 20px são espaço de verdade, e o painel deixou de caber
   em três das sete telas que o fim.js mede. Espremer o botão de
   sair para subir o título dez pixels é um mau negócio.

   `position: relative` + `top` move o desenho sem tocar no
   cálculo do layout. O painel continua exatamente do tamanho que
   era, e o que sobe é o que ele pediu que subisse.

   E SÓ ONDE CABE

   Num iPhone SE o painel já nasce apertado: o título fica a 12px
   da borda de cima, contra 46px num tablet. Subir dez ali
   deixaria dois — o título encostado na moldura, que é feio de
   um jeito diferente do problema que ele quis resolver.

   O `min-height: 800px` é a linha onde há folga para gastar.
   Medido nas telas do fim.js, depois do ajuste o título fica a
   12px no menor aparelho e a 36px no tablet: em nenhuma delas
   ele encosta. */
@media (min-height: 800px) {

    #overlay-final > h2,
    #overlay-final > p,
    #overlay-final > #botoes-final {
        position: relative;
        top: -10px;
    }
}

/* O texto de explicação encosta no subtítulo.

   Os dois dizem partes da mesma frase — "vocês venceram" e "e
   por isso seguem na mesa" — e estavam lidos como dois blocos
   separados, com o vão de entrelinha de ambos somando entre
   eles. */
.tm-revanche-aviso {
    margin-top: -4px !important;
}

.tm-revanche-aviso .tm-aviso-texto {
    line-height: 1.25;
}


/* ============================================================
   A DE FORA TEM TELA

   "Ficar na de fora" existia no servidor e no lobby, mas não
   tinha para onde levar: a sala empurrava quem esperava para a
   mesa, e a mesa respondia "você não faz parte desta partida".
   A fila era um lugar sem endereço.

   Agora ela é uma seção da sala, com duas vagas — como a mesa
   tem quatro — e, para quem está nela, o placar da partida que
   está rolando. É o que se faz num bar: quem espera a vez
   acompanha o jogo, e é acompanhando que se escolhe contra quem
   se quer jogar.
   ============================================================ */

.tm-placar-espera {
    margin: 0 0 14px;
    padding: 10px 12px;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
}

.tm-placar-espera[hidden] { display: none; }

.tm-placar-espera-titulo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    text-align: center;
    margin-bottom: 8px;
}

.tm-placar-espera-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tm-placar-espera-lado {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.tm-placar-espera-nomes {
    font-size: 11px;
    line-height: 1.25;
    color: rgba(255,255,255,.72);

    /* Nome comprido não pode empurrar o número para fora. */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tm-placar-espera-pontos {
    margin-top: 2px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.tm-placar-espera-x {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.3);
}


/* ---- As duas vagas da fila ---- */

.tm-de-fora[hidden] { display: none; }

.tm-de-fora-titulo {
    margin-top: 18px;
    margin-bottom: 10px;
}

/* A fila desce um pouco e fica LONGE dos botões.

   Na foto do iPhone o selo "1º" quase encostava no ESTOU
   PRONTO: a foto de quem espera e o botão que decide a partida
   viravam um bloco só, e o polegar não sabe onde acaba um e
   começa o outro. O selo ainda sai 4px para fora do cartão, e o
   espaço de baixo é o que o protege. */
.tm-de-fora-vagas {
    display: flex;
    justify-content: center;
    gap: 26px;

    /* padding, e não margin, no topo: a margem de baixo do
       título e uma margem de cima aqui colapsariam numa só, e a
       fila não desceria um pixel. */
    padding-top: 6px;
    margin-bottom: 22px;
}

.tm-de-fora-vagas .tm-player-card {
    position: relative;
}

/* O selo de ordem: quem espera quer saber se é o próximo. */
.tm-selo-espera {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 3;

    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;

    background: var(--tm-amarelo, #ffaa00);
    color: #241900;

    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.tm-de-fora .tm-player-name-vaga {
    color: rgba(255,255,255,.32);
}

.tm-de-fora .tm-player-name.tm-sou-eu {
    background: rgba(255,170,0,.16);
    color: #ffd479;
}

/* A vaga vazia da fila não é clicável: entrar na de fora se faz
   pelo lobby, não daqui. Sem a mão do cursor, ninguém tenta. */
.tm-vaga-fora {
    cursor: default;
    opacity: .55;
}


/* ---- A sequência da mesa ----

   Faixa estreita, acima do placar: é contexto sobre a mesa, não
   sobre a partida. O fogo dá o tom sem precisar de adjetivo —
   "3 seguidas" com chama diz mais que "dupla invicta". */

.tm-sequencia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 0 0 10px;
    padding: 6px 12px;

    background: linear-gradient(135deg, rgba(255,120,0,.16), rgba(255,60,0,.10));
    border: 1px solid rgba(255,140,0,.28);
    border-radius: 999px;

    font-size: 12px;
    line-height: 1.3;
    color: rgba(255,255,255,.86);
    text-align: center;
}

.tm-sequencia[hidden] { display: none; }

.tm-sequencia-chama {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.tm-sequencia-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-sequencia strong {
    color: #ffb457;
    font-weight: 800;
}

#tm-sequencia-quem {
    color: rgba(255,255,255,.6);
}


/* ============================================================
   A DUPLA PREFERENCIAL

   Duas pessoas que combinaram jogar sempre juntas. A interface
   dela é pequena de propósito: um botão na lista de amigos, um
   convite com SIM e NÃO, um aviso quando o acordo passa a
   existir, e uma aba no ranking. O que a dupla muda de verdade
   acontece sozinho — os dois entram e saem das mesas juntos —
   e coisa que funciona sozinha não precisa de tela.
   ============================================================ */

.tm-amigo-dupla {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 6px 10px;

    border: 1px solid rgba(255,170,0,.45);
    border-radius: 999px;
    background: rgba(255,170,0,.14);

    color: #ffc766;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-amigo-dupla:disabled { opacity: .6; cursor: default; }

/* O convite de dupla tem SIM e NÃO, e o de mesa não: aquele é
   para agora e some sozinho; este é um acordo. */
.tm-convite-dupla .tm-convite-ir,
.tm-dupla-feita .tm-convite-texto b {
    white-space: nowrap;
}

.tm-convite-dupla {
    border-color: rgba(255,170,0,.5) !important;
}

.tm-dupla-feita {
    border-color: rgba(46,204,113,.55) !important;
}


/* ---- O ranking de duplas ---- */

.tm-ranking-abas {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 12px;
}

.tm-aba {
    flex: 1 1 0;
    max-width: 160px;
    padding: 9px 10px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.04);

    color: rgba(255,255,255,.62);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.tm-aba.ativa {
    background: rgba(255,170,0,.16);
    border-color: rgba(255,170,0,.42);
    color: #ffc766;
}

/* As duas fotos da dupla, sobrepostas: uma dupla é uma coisa
   só, e duas fotas lado a lado leriam como duas pessoas. */
.tm-rank-fotos {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.tm-rank-fotos img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(20,26,32,.95);
}

.tm-rank-fotos img:last-child { margin-left: -12px; }

.tm-rank-minha-dupla {
    margin: 0 0 10px;
    padding: 9px 12px;

    background: rgba(255,170,0,.10);
    border: 1px solid rgba(255,170,0,.26);
    border-radius: 10px;

    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.8);
    text-align: center;
}

.tm-rank-minha-dupla strong { color: #ffc766; }

#tm-rank-lugar[hidden],
#tm-rank-ativos[hidden] { display: none; }

/* A dupla do momento, no topo da lista de amigos. */
.tm-dupla-atual {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 12px;
    padding: 8px 10px;

    background: rgba(255,170,0,.10);
    border: 1px solid rgba(255,170,0,.26);
    border-radius: 10px;

    font-size: 12.5px;
    color: rgba(255,255,255,.78);
}

.tm-dupla-atual[hidden] { display: none; }

.tm-dupla-atual img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.tm-dupla-atual span { flex: 1 1 auto; min-width: 0; }
.tm-dupla-atual b    { color: #ffc766; }

.tm-dupla-desfazer {
    flex: 0 0 auto;
    padding: 5px 9px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}


/* ============================================================
   O "+" NO AVATAR

   A foto do adversário sempre abriu a ficha dele, com o botão de
   adicionar aos amigos. Nada dizia isso: foto redonda na mesa
   parece enfeite, e quem não tentou por acaso nunca descobriu
   que dava para tocar.

   O selo fica no canto SUPERIOR direito porque os outros dois
   cantos já têm dono — o de reação embaixo (à esquerda no
   jogador da direita) e a tarja SAIU no meio. Três marcas
   disputando o mesmo canto seria trocar um problema de
   descoberta por um de bagunça.
   ============================================================ */

.tm-add-amigo {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 9;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;
    border-radius: 50%;

    background: rgba(46,204,113,.92);
    border: 1.5px solid rgba(255,255,255,.85);
    box-shadow: 0 2px 5px rgba(0,0,0,.45);

    color: #06331a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;

    /* O clique é da FOTO, não do selo: ele é uma placa, não um
       botão. Deixá-lo capturar o toque criaria um alvo de 17px
       dentro de um alvo de 50px, e errar a placa por um pixel
       pareceria um clique que não funcionou. */
    pointer-events: none;
}

/* No jogador da direita o selo vai para a esquerda, pela mesma
   razão do emoji: aquele canto está fora da tela. */
.tm-pos.right .tm-add-amigo {
    right: auto;
    left: -3px;
}

@media (min-width: 768px) {
    .tm-add-amigo {
        width: 20px;
        height: 20px;
        font-size: 15px;
    }
}

/* Quem saiu já tem a tarja: duas marcas na mesma foto brigam. */
.tm-pos.automatico .tm-add-amigo { display: none; }


/* ============================================================
   A VOZ DA MESA

   Cada jogador escolhe a sua, e é ela que os outros ouvem
   quando ele pede truco, corre ou aceita. A lista fica no
   perfil, junto da foto: as duas dizem quem a pessoa é para os
   outros — uma pelos olhos, outra pelo ouvido.
   ============================================================ */

.tm-voz-escolha {
    margin: 0 0 20px;
    text-align: left;
}

.tm-voz-escolha h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    text-align: center;
}

.tm-voz-nota {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255,255,255,.5);
    text-align: center;
}

.tm-voz-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-voz-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    width: 100%;
    padding: 11px 14px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(255,255,255,.04);

    font-family: inherit;
    text-align: left;
    cursor: pointer;

    transition: border-color .15s, background .15s;
}

.tm-voz-item:active { transform: scale(.99); }

.tm-voz-item.escolhida {
    background: rgba(255,170,0,.13);
    border-color: rgba(255,170,0,.45);
}

.tm-voz-nome {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
}

.tm-voz-item.escolhida .tm-voz-nome { color: #ffc766; }

.tm-voz-info {
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
}

/* ==========================================================
   A DUPLA DE AGORA

   O acordo é permanente, a dupla de hoje não. A faixa precisa
   dizer os dois: quem é a dupla preferencial, e se ela está
   valendo neste momento.
========================================================== */

.tm-dupla-atual span { display: flex; flex-direction: column; line-height: 1.25; }

.tm-dupla-estado {
    font-size: 10.5px;
    color: rgba(255,255,255,.5);
    letter-spacing: .2px;
}

/* Verde quando está valendo: é a única informação da faixa que
   muda de um minuto para o outro, e ela merece ser vista sem
   ler. */
.tm-dupla-atual:has(.tm-dupla-agora[data-sim="0"]) .tm-dupla-estado {
    color: #7fdc9a;
}

.tm-dupla-agora {
    flex: 0 0 auto;
    padding: 5px 10px;

    border: 1px solid rgba(255,199,102,.5);
    border-radius: 999px;
    background: rgba(255,199,102,.16);

    color: #ffc766;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
}

.tm-dupla-agora[data-sim="0"] {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
}

/* A pergunta que chega quando os dois se encontram on-line.
   Mesmo desenho do convite de dupla — é a mesma família de
   aviso, e inventar um segundo estilo só faria a pessoa
   reaprender a mesma caixa. */
.tm-convite.tm-dupla-online b { color: #ffc766; }


/* ============================================================
   O PAINEL DO TRUCO — A LINHA DE CIMA E O CONTEÚDO BAIXO

   "O texto na mesa ao pedir truco e outras coisas tá ficando
    muito embaixo e com uma linha em cima, tira a linha e sobe
    mais a imagem uns pixels."

   É o mesmo defeito que a mão de dez teve, na mesma família de
   painéis — e a causa é a mesma nos dois.

   A LINHA não é borda de ninguém. É o brilho branco embutido no
   TAMPO da mesa, um `inset` claro na beirada de cima, aparecendo
   POR TRÁS do painel: o fundo dele era translúcido (alfa .82 nas
   beiradas). Enquanto o conteúdo cabia, ninguém via; com o
   conteúdo transbordando, sobrava uma faixa de mesa nua no topo
   e aquela luz virava um risco.

   O CONTEÚDO BAIXO é transbordamento. Medido no navegador, a
   320px o bloco do painel ficava 134px MAIOR que o feltro: o
   título subia para fora por cima e o relógio descia para fora
   por baixo. Tudo em pixel fixo — título 19px, botões de 148px
   com 10px de altura cada — dentro de uma caixa que encolhe com
   a tela.

   A correção é a mesma da mão de dez: fundo opaco no topo e
   tudo que gasta altura proporcional ao --tm-mesa, como as
   cartas já eram.

   E o empurrãozinho para cima que ele pediu vem da folga de
   baixo ser maior que a de cima: num flex centrado, é isso que
   levanta o conteúdo — sem transform, que quebraria no
   :active dos botões.
   ============================================================ */

.tm-overlay-truco,
.tm-overlay-largar,
.tm-overlay-dez {

    /* ------------------------------------------------------
       O ARO DA MESA FICA APARECENDO

       Por um dia este painel cobriu o cartão inteiro, aro
       incluído. Eu tinha ido atrás de uma faixa clara no topo e
       apostado que era o brilho embutido do aro — o painel
       cobrindo tudo fazia a faixa sumir, e a medida fechava.

       Fechava pela razão errada. A linha que ele via era o
       `border-top` que a tipografia das páginas de texto põe em
       todo <h2> (ver o bloco "A MESA NÃO É UMA PÁGINA DE
       TEXTO"). Cobrir o aro escondia um sintoma que nem era
       aquele, e de quebra apagava a moldura da casa — que é
       identidade da mesa, não sobra de layout.

       Então o painel volta a parar na borda interna do aro: o
       `inset: 0` que ele herda do .tm-overlay-final. A moldura
       continua à vista em volta, como ele pediu.
    ------------------------------------------------------ */

    /* Opaco de verdade. É o que corta o risco de luz do tampo. */
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(9,15,20,1) 0%,
            rgba(9,15,20,1) 70%,
            rgba(7,12,16,1) 100%) !important;

    overflow: hidden !important;

    /* Embaixo mais que em cima: o conteúdo centrado sobe a
       diferença. */
    /* Com o aro de volta, o painel tem 20px a menos em cada
       lado — e o conteúdo, que cabia justo, passou a transbordar
       uns poucos pixels. A folga sai daqui, mantendo a de baixo
       maior que a de cima: é ela que levanta o texto. */
    padding: calc(var(--tm-mesa) * .030)
             calc(var(--tm-mesa) * .058)
             calc(var(--tm-mesa) * .062) !important;
}

.tm-truco-titulo {
    font-size: clamp(10.5px, calc(var(--tm-mesa) * .062), 19px) !important;
    line-height: 1.12 !important;
    margin: 0 0 calc(var(--tm-mesa) * .022) !important;
    width: 100% !important;
}

.tm-acoes-truco {
    gap: calc(var(--tm-mesa) * .014) !important;
}

.tm-acoes-truco .tm-btn {
    width: clamp(100px, calc(var(--tm-mesa) * .54), 164px) !important;
    padding: calc(var(--tm-mesa) * .023) 0 !important;
    font-size: clamp(11px, calc(var(--tm-mesa) * .048), 15px) !important;
    line-height: 1.1 !important;
}

.tm-truco-relogio {
    margin-top: calc(var(--tm-mesa) * .020) !important;
    font-size: clamp(8px, calc(var(--tm-mesa) * .034), 11px) !important;
    line-height: 1.1 !important;
}

.tm-truco-relogio #tm-truco-seg {
    font-size: clamp(12px, calc(var(--tm-mesa) * .052), 17px) !important;
    min-width: calc(var(--tm-mesa) * .07) !important;
}

/* O aviso "fulano correu" entra ACIMA dos botões e é o que mais
   cresce quando aparece: sem encolher junto, ele sozinho põe o
   painel para fora do feltro de novo. */
.tm-truco-parceiro {
    margin: 0 auto calc(var(--tm-mesa) * .022) !important;
    padding: calc(var(--tm-mesa) * .020) calc(var(--tm-mesa) * .038) !important;
    max-width: calc(var(--tm-mesa) * .62) !important;
    font-size: clamp(10px, calc(var(--tm-mesa) * .042), 12.5px) !important;
}

.tm-truco-espera {
    font-size: clamp(10px, calc(var(--tm-mesa) * .044), 13px) !important;
    line-height: 1.45 !important;
    padding: calc(var(--tm-mesa) * .016) calc(var(--tm-mesa) * .030) !important;
}

/* O painel de largar a mão é irmão deste: mesmo feltro, mesmo
   aperto, e no celular curto ele também transbordava. */
.tm-largar-titulo {
    font-size: clamp(12px, calc(var(--tm-mesa) * .060), 19px) !important;
    margin: 0 0 calc(var(--tm-mesa) * .024) !important;
}

.tm-largar-quem,
.tm-largar-esperando {
    font-size: clamp(10px, calc(var(--tm-mesa) * .044), 14px) !important;
    line-height: 1.3 !important;
    margin: 0 0 calc(var(--tm-mesa) * .022) !important;
}

.tm-overlay-largar .tm-btn {
    width: clamp(100px, calc(var(--tm-mesa) * .62), 190px) !important;
    padding: calc(var(--tm-mesa) * .024) 0 !important;
    font-size: clamp(11px, calc(var(--tm-mesa) * .044), 15px) !important;
    margin-bottom: calc(var(--tm-mesa) * .016) !important;
}


/* ---- O preço de cada porta na mão de dez ----

   Recusar entrega 2, jogar põe a mão em 4. Miúdo de propósito:
   é uma nota de rodapé dentro do botão, não um segundo rótulo
   disputando a leitura com o primeiro. */
.tm-dez-preco {
    display: block;
    margin-top: 1px;
    font-size: clamp(8px, calc(var(--tm-mesa) * .032), 10.5px);
    font-weight: 700;
    letter-spacing: .2px;
    opacity: .72;
    text-transform: none;
}


/* ============================================================
   O AVISO QUE NINGUÉM VIA

   "Ao salvar, a notificação que salvou não aparece na tela,
    coloca ela mais visível."

   Ele existia: um retângulo cinza-escuro, rgba(20,20,20,.94),
   preso ao RODAPÉ da página — sobre fundo escuro, encostado na
   barra de navegação, a 400px de distância do botão que a
   pessoa acabou de apertar. Tinha tudo para não ser visto, e
   não era.

   Três coisas mudam, e as três são sobre ser visto:

   ONDE — sai do rodapé e entra pelo alto, logo abaixo do
   cabeçalho. É para onde a tela rola e para onde o olho volta.

   COR — verde deu certo, vermelho não deu. O aviso passa a
   dizer o resultado antes de ser lido; cinza não diz nada.

   MOVIMENTO — ele desliza para dentro. Num aviso que aparece e
   some sozinho, o movimento é o que chama o olho: cor parada,
   num canto, a gente não vê.
   ============================================================ */

.tm-toast {

    /* ------------------------------------------------------
       A CAUSA DE VERDADE: ELE NÃO ESTAVA FIXO

       O aviso é filho direto do <body>, e existe nesta folha
       uma regra antiga e necessária:

           body.tm-jogo > * { position: relative; z-index: 1 }

       Ela cria o contexto de empilhamento da mesa — e rebaixa
       para o fluxo normal QUALQUER elemento solto no corpo. O
       `position: fixed` do toast era engolido por ela.

       Resultado: o aviso não ficava preso à tela; ele caía no
       FIM do documento, depois de todo o conteúdo. Na foto que
       ele mandou é exatamente isso — o retângulo está no rodapé
       do cartão, no fluxo, e com a página rolada para cima
       simplesmente não aparece.

       Não era um aviso discreto demais. Era um aviso no lugar
       errado. As caixas de diálogo da mesa já declaravam
       `position: fixed !important` inline por causa desta mesma
       regra; o toast nunca tinha recebido o mesmo tratamento.
    ------------------------------------------------------ */
    position: fixed !important;

    /* Abaixo do cabeçalho grudento (68px) e do entalhe do
       iPhone. Não POR CIMA dele: cobrir a marca do site para
       avisar que salvou é trocar um problema por outro. */
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    bottom: auto !important;

    padding: 14px 22px !important;
    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;

    background: linear-gradient(180deg, #23323d, #1a2831) !important;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 44px rgba(0,0,0,.6) !important;

    animation: tmToastEntra .26s cubic-bezier(.2,.9,.3,1.06);
}

@keyframes tmToastEntra {
    from { opacity: 0; transform: translate(-50%, -16px) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, 0)     scale(1);   }
}

.tm-toast-ok {
    background: linear-gradient(180deg, #27ae60, #1d8449) !important;
    border-color: rgba(255,255,255,.28);
    color: #fff !important;
}

.tm-toast-erro {
    background: linear-gradient(180deg, #d0483a, #a32d22) !important;
    border-color: rgba(255,255,255,.24);
    color: #fff !important;
}

/* E o botão confirma no lugar onde o dedo está. */
.tm-btn-salvo {
    background: linear-gradient(180deg, #1d8449, #14663699) !important;
    filter: saturate(1.15);
}


/* ============================================================
   A MESA NÃO É UMA PÁGINA DE TEXTO

   "Continua com uma border de 1px acima do texto... o texto
    pode subir um pouco. Observe isso em todas as ações que
    geram a ação no centro da mesa."

   Medi a foto dele pixel a pixel: uma linha de UM pixel,
   rgb(31,37,41) sobre o painel rgb(8,15,19), 276px de largura
   dentro de um painel de 330. A diferença de cor bate exatamente
   com `rgba(255,255,255,.09)` sobre aquele fundo — e essa cor
   existe num lugar só do projeto:

       .tm-conteudo h2 {
           margin-top: 34px;
           padding-top: 18px;
           border-top: 1px solid rgba(255,255,255,.09);
       }

   É a tipografia das páginas de TEXTO — a que faz cada seção da
   política de privacidade começar com um risco em cima. E o tema
   embrulha tudo o que a página imprime em
   `<main class="tm-conteudo">`. A mesa entra por shortcode,
   dentro do conteúdo: os títulos dos painéis são <h2>, então
   herdaram o risco, os 18px de recuo acima do texto e até a cor
   âmbar do artigo no lugar do amarelo do jogo.

   Uma causa, as duas queixas: a linha É o border-top; o texto
   baixo SÃO os 18px de padding.

   Por isso vale para os quatro painéis de uma vez — truco, mão
   de dez, largar e o de fim de partida. Ele pediu "em todas as
   ações que geram a ação no centro da mesa", e é assim que se
   atende a isso: consertando o que elas têm em comum, e não uma
   por uma.
   ============================================================ */

/* Só os títulos. O <p> do artigo só mexe na margem de BAIXO —
   incluí-lo aqui foi um exagero meu, e ele encurtou em 4px o
   painel de fim de partida, que é montado com um parágrafo de
   explicação. Consertar o que não estava quebrado quebrou
   outra coisa: o teste do painel final pegou na hora. */
.tm-mesa-card h1,
.tm-mesa-card h2,
.tm-mesa-card h3,
.tm-overlay-final h1,
.tm-overlay-final h2,
.tm-overlay-final h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* E a cor volta a ser a do jogo. O seletor do artigo
   (.tm-conteudo h2) tem mais peso que a classe do título
   sozinha, então ele estava pintando de âmbar de página o que é
   amarelo de mesa. */
.tm-truco-titulo  { color: #f1c40f !important; }
.tm-largar-titulo { color: #f1c40f !important; }
.tm-dez-titulo    { color: #fff !important; }


/* ============================================================
   [hidden] TEM DE ESCONDER

   "Cliquei em sair da de fora e não saiu."

   Na foto dele, quem está na FILA vê o botão ESTOU PRONTO —
   que é justamente o botão que o código manda esconder para
   quem espera:

       if (pronto) pronto.hidden = souDeFora;

   O atributo `hidden` do HTML vale por um `display: none` que
   vem da folha do navegador — e QUALQUER `display` declarado
   numa classe ganha dele. `.tm-btn-sala` é `display: flex`.
   Medido: com `hidden = true`, o botão continua com
   `display: flex` e 44px de altura.

   O projeto vinha remendando isso um elemento por vez —
   `.tm-de-fora[hidden]`, `.tm-dupla-atual[hidden]`. Cada
   remendo conserta um caso e deixa o próximo para o próximo
   defeito. Esta regra fecha a categoria inteira: onde o código
   diz `hidden`, some.
   ============================================================ */

[hidden] { display: none !important; }


/* ============================================================
   O LAYOUT DA MESA NO TOPO

   "Deixa alinhando pelo meio ainda, mas deixa a opção de o
    administrador do jogo poder clicar em um layout que a mesa
    sobe e fica alinhada na parte de cima do navegador."

   O PADRÃO CONTINUA SENDO O MEIO

   A mesa é um item de flex com `margin: auto`, e é isso que a
   centraliza no que sobra entre o placar e a faixa da mão. Essa
   regra não foi tocada: quem não mexer em nada continua com a
   mesa exatamente onde ela sempre esteve.

   O QUE A OPÇÃO FAZ

   Troca a centralização por um encosto no alto: a margem de
   cima deixa de ser `auto` e passa a ser só o necessário para a
   caixa do jogador de cima caber, e a de baixo fica com todo o
   espaço que sobrar. A mesa sobe até a parte de cima do
   navegador e a folga toda vai para baixo dela.

   POR QUE A MARGEM NÃO É ZERO

   As quatro caixas de jogador são filhas da mesa e ficam de
   propósito para FORA da borda do feltro — a de cima sobe cerca
   de 21% do tamanho da mesa. Com margem zero, "alinhar no topo"
   cortaria o nome do jogador de cima atrás do placar.

   O número desceu três vezes e subiu meio passo, sempre a
   pedido dele: começou em .22 (4px de sobra em 1920x1080 — para
   o olho, colado), foi a .25 (14 a 21px), a .30 ("pode descer um
   pouco"), a .34 ("abaixa mais um pouco") e parou em .34 menos
   5 pixels ("sobe 5px").

   Os 5px entram como pixel mesmo, e não como mais um centésimo,
   porque foi assim que ele pediu — 5px é 5px em qualquer tela.
   Um centésimo da mesa valeria 1,6px no celular e 3,1px no
   monitor: seria obedecer ao pedido em média e errar nas duas
   pontas.

   O ponto de referência é o .30: é exatamente o quanto a caixa
   do jogador de cima sobe acima do feltro
   (`.tm-pos.top { top: calc(var(--tm-mesa) * -0.30) }`). Nele a
   margem paga o que a caixa gasta e o que sobra é só o respiro
   do container — 29px iguais em qualquer tela. Cada centésimo
   acima disso é folga de verdade, proporcional à mesa: em .34
   menos 5px, a sobra vai de 34px no celular a 36px no monitor.

   Continua sendo topo, e o teste não confia em pixel para dizer
   isso: ele mede a MESMA tela nos dois layouts e exige que a
   mesa no topo esteja sensivelmente mais alta que a
   centralizada. É a única definição de "topo" que não envelhece
   a cada ajuste de gosto.

   Tudo em fração da mesa, como o resto do layout: a mesma
   proporção vale no celular e no monitor, sem número escrito à
   mão para cada tela.

   Quem liga isto é o administrador, em Truco Mineiro >
   Aparência. A classe no <body> vem de lá.
   ============================================================ */

/* A FOLGA É ABSOLUTA; A SALIÊNCIA DA CAIXA É QUE É PROPORCIONAL

   Era `* .34 - 5px`, e funcionava porque a mesa tinha o MESMO
   tamanho em toda tela grande: 310px, o teto. Medindo o que a
   régua produz em vários tamanhos de mesa:

       mesa 257  saliência  67  folga 34
       mesa 310  saliência  83  folga 36
       mesa 380  saliência 104  folga 39
       mesa 450  saliência 125  folga 42

   A folga passeia junto com a mesa — 0,04 de cada pixel dela. Se
   a mesa nunca muda, ninguém percebe; no tablet, onde ela cresce,
   a folga que ele ajustou quatro vezes ("pode descer um pouco",
   "abaixa mais", "sobe 5px") sairia do lugar sozinha.

   O que precisa ser proporcional é a SALIÊNCIA (a caixa do
   jogador de cima, que sobe 0,30 da mesa menos 10px). O que ele
   ajustou é a folga, e folga é distância: 35px são 35px no
   celular e no iPad.

   Daí `.30 + 6px`: paga a saliência e entrega os mesmos 35px de
   folga em qualquer tamanho de mesa. Em 310 dá o mesmo lugar de
   antes — a régua muda, o desenho não. */
body.tm-jogo.tm-mesa-topo .tm-mesa-card {
    margin-top:    calc(var(--tm-mesa) * .30 + 6px) !important;
    margin-bottom: auto !important;
}


/* ============================================================
   O BOTÃO FLUTUANTE DO LAYOUT — SÓ PARA O ADMINISTRADOR

   "Coloca esse botão na tela flutuando ali ao lado da
    interrogação das regras, mas só aparece pro admin master."

   Quem decide se ele existe é o PHP: o botão é impresso dentro
   de um `current_user_can`, e o endpoint confere a permissão de
   novo. Esconder por CSS seria pior que não esconder — o botão
   continuaria no HTML de todo mundo, visível para quem abre o
   inspetor, e daria a impressão de estar protegido.

   Aqui é só a aparência. O botão nasce com a classe
   `.tm-ajuda-mesa`, a mesma da interrogação, então herda de
   graça o tamanho, o redondo, a cor, o `translateY(16px)` que
   tira os dois da linha de altura zero e até o encolhimento no
   clique. Isso é de propósito: dois botões vizinhos que não são
   idênticos ficam parecendo que um deles está errado.
   ============================================================ */

/* A linha nasceu para um botão só. Com dois, eles se encostavam. */
.tm-ajuda-mesa-linha { gap: 8px; }

/* O DESENHO DENTRO DO BOTÃO É O ESTADO ATUAL

   O quadradinho é a mesa, a moldura é a tela. Com o layout de
   topo ligado, ele sobe dentro da moldura — o mesmo movimento
   que o botão acabou de fazer com a mesa de verdade.

   Um ícone fixo obrigaria a ler o título para saber o que está
   valendo, e título em botão redondo no celular ninguém lê:
   não há como passar o mouse. */
.tm-btn-layout .tm-icone-mesa {
    transition: transform .18s ease;
}

body.tm-mesa-topo .tm-btn-layout .tm-icone-mesa {
    transform: translateY(-3px);
}

/* Ligado tem cor. A interrogação ao lado fica cinza o tempo
   todo; se este também ficasse, o administrador precisaria
   clicar para descobrir em que estado está. */
body.tm-mesa-topo .tm-btn-layout {
    color: #ffbb33;
    border-color: rgba(255,187,51,.42);
    background: rgba(255,187,51,.12);
}

/* Enquanto a resposta do servidor não chega. */
.tm-btn-layout[disabled] { opacity: .55; cursor: default; }


/* ============================================================
   O CAMPEONATO

   Oito duplas, três rodadas, um campeão.

   A CHAVE É UMA TABELA, E O NAVEGADOR JÁ SABE ALINHAR TABELA

   A tentação num mata-mata é desenhar as chaves com linhas
   ligando um confronto ao outro — e aí vira coordenada, canvas,
   e um cálculo diferente para cada largura de tela. Aqui são
   três colunas de cartões: quatro na primeira, dois na segunda,
   um na terceira. A forma do torneio aparece pela quantidade,
   sem uma linha sequer.

   No celular as três colunas viram três blocos empilhados, que é
   como se lê uma chave num papel pequeno mesmo.
   ============================================================ */

.tm-camp {
    padding: 16px 14px 40px;
    color: #e9eef2;
}

.tm-camp-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
}

/* O RODAPÉ EM COLUNA

   Compartilhar, convidar, o que cada rodada paga, os outros
   campeonatos e a saída — nesta ordem, um por linha, largura
   cheia. Empilhados eles viram uma lista de saídas óbvia; lado a
   lado no celular virariam botões estreitos demais para o dedo. */
.tm-camp-rodape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.tm-camp-rodape > .tm-btn-sala { width: 100%; }

/* VOLTAR AO LOBBY FICA POR ÚLTIMO, E DISCRETO

   É a saída, não o que se quer que a pessoa faça nesta tela.
   Mas existe: num aplicativo aberto da tela de início não há
   botão "voltar" do navegador, e sem este a única saída da chave
   era fechar o jogo. */
.tm-camp-lobby {
    margin-top: 4px;
    opacity: .85;
}

/* Sair da chave: a saída do JOGADOR, ao lado da saída da TELA.
   Discreta como ela — quem chegou aqui veio para jogar, e o
   botão só existe para quem mudou de ideia. */
.tm-camp-sair {
    margin-top: 4px;
    background: rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.6) !important;
    box-shadow: none !important;
}

/* O número do campeonato, no lugar do nome que ele não tem. */
.tm-camp-numero {
    color: rgba(255,255,255,.35);
    font-weight: 700;
}

.tm-camp-sub {
    margin: 14px 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255,255,255,.55);
}

.tm-camp-lista { display: flex; flex-direction: column; gap: 8px; }

.tm-camp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    text-decoration: none;
    color: #e9eef2;
}

.tm-camp-item-nome { font-weight: 700; }

.tm-camp-situacao,
.tm-camp-item-situacao {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    white-space: nowrap;
}

.tm-camp-rolando   { background: rgba(46,204,113,.16); color: #7fe0a4; }
.tm-camp-encerrado { background: rgba(255,187,51,.16); color: #ffbb33; }

.tm-camp-vazio,
.tm-camp-carregando {
    font-size: 13px;
    color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   A VAGA DA FASE SEGUINTE

   Mesmo desenho de um confronto de verdade, e é essa a ideia: a
   chave existe inteira desde o primeiro dia, com dois lugares
   vazios na semifinal e um na final esperando quem vier.

   Tracejada e mais apagada para não se confundir com jogo que
   já tem gente. Uma vaga vazia igual a um confronto cheio faria
   o jogador procurar nomes que ainda não existem.
------------------------------------------------------------ */
.tm-camp-vaga-jogo {
    border-style: dashed !important;
    opacity: .55;
}

.tm-camp-lado-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
}

/* O TOPO CENTRALIZADO

   O título, a situação e o aviso da mesa aberta ficavam
   alinhados à esquerda, como o resto do site. Numa tela que é
   uma TABELA — uma chave de torneio — o topo alinhado à esquerda
   fica pendurado num canto: não há coluna de texto para ele
   acompanhar, só blocos centrados embaixo.
*/
.tm-camp-cabeca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    text-align: center;
}


/* ---------- A MESA DELE, ANTES DE TUDO ---------- */

/* Um jogador com partida aberta não deve ter de procurar a
   própria vez debaixo da chave inteira. */
.tm-camp-minha-mesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(135deg, #1f8f4d, #146b39);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}

.tm-camp-minha-mesa strong { font-size: 15px; letter-spacing: .5px; }
.tm-camp-minha-mesa span   { font-size: 12.5px; opacity: .85; }


/* ---------- MONTAGEM ---------- */

/* `minmax(0, 1fr)`, e não `1fr`.

   `1fr` é `minmax(auto, 1fr)`, e o `auto` não deixa a coluna
   encolher abaixo do conteúdo mínimo dela. Basta uma vaga com
   "convite enviado" — que é `nowrap` — para a linha inteira
   passar da largura da coluna do site: medido, 457px de conteúdo
   dentro de 402px de caixa, com metade da segunda dupla fora da
   tela. Com o mínimo em zero, quem encolhe é o nome, que já tem
   reticências para isso. */
.tm-camp-duplas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

@media (min-width: 620px) {
    .tm-camp-duplas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.tm-camp-dupla {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.tm-camp-num {
    width: 22px;
    flex: 0 0 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,.4);
}

/* ------------------------------------------------------------
   A VAGA: FOTO EM CIMA, NOME EMBAIXO

   Era foto à esquerda e nome à direita, numa linha. Com dois
   assentos lado a lado numa coluna de 400px, sobravam uns 60px
   para cada nome — "Mineiro Preguiçoso" virava "Mineiro Pre…"
   antes mesmo de a tela ser estreita.

   Em coluna, o nome usa a largura inteira da vaga e pode cair
   para uma segunda linha. É o mesmo desenho dos confrontos da
   chave, e é o que a mesa faz com os quatro jogadores: a cara é
   o que se reconhece, o nome é a legenda dela.
------------------------------------------------------------ */
.tm-camp-vaga {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    color: #e9eef2;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}

.tm-camp-vaga-vazia {
    justify-content: center;
    color: rgba(255,255,255,.45);
    border-style: dashed;
}

/* ------------------------------------------------------------
   A VAGA EM QUE DÁ PARA JOGAR

   "Aumenta a fonte disso e coloca assim: clique aqui para
    jogar."

   Ela é a única coisa a fazer nesta tela para quem chegou pelo
   link e ainda não está na chave — e estava escrita com a mesma
   letra fraca de 13px do resto, que servia para dizer "vaga
   livre" e não para chamar alguém.

   Quinze pixels e mais branco. Não vira dourado nem ganha fundo:
   quem está de fora vê ATÉ QUATORZE dessas na tela, e quatorze
   chamarizes acesos ao mesmo tempo não chamam para lugar
   nenhum — só apagam a chave, que é o que a pessoa veio ver.

   A frase inteira cabe em três linhas de 173px e a vaga tem
   87px de piso: nenhuma dupla fica mais alta que a outra por
   causa dela.
------------------------------------------------------------ */
.tm-camp-vaga-jogar {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(255,255,255,.78);
}

/* TODAS AS VAGAS DA MESMA ALTURA

   A ocupada tem foto e nome; a vazia tem só a palavra; e a de
   convite pendente tem ainda a linha "convite enviado". Sem um
   piso, a fileira de oito duplas fica com degraus — e com o piso
   na vaga comum ela ainda ficava, porque a linha do convite
   estica só aquela.

   Medido: 74px a comum, 87px a de convite. O piso é a mais alta
   das três, e o `justify-content: center` transforma a sobra em
   ar dos dois lados nas outras. */
.tm-camp-vaga { min-height: 87px; }

.tm-camp-foto {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}

/* Duas linhas e para. Três fariam uma dupla ficar mais alta que
   a outra, e a fileira de oito voltaria a ter degraus. */
.tm-camp-nome {
    width: 100%;
    font-size: 10.5px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.tm-camp-bot { opacity: .78; }

/* Convite enviado e ainda sem resposta: a vaga é dele, mas o
   campeonato não começa até ele responder. A tela diz as duas
   coisas. */
.tm-camp-pendente { border-color: rgba(255,187,51,.4); }

.tm-camp-marca {
    font-size: 9px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #ffbb33;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   O × QUE TIRA O JOGADOR DA VAGA

   "Aumentar o x para excluir o jogador da montagem do
    campeonato."

   Ele sai do fluxo e vai para o canto: no meio da coluna
   empurraria a foto para o lado.

   O QUE ESTAVA PEQUENO NÃO ERA O DESENHO, ERA O ALVO

   O × media nove pixels de largura por quinze de altura — cento
   e trinta pixels quadrados de alvo, numa tela de celular onde o
   dedo cobre quarenta por quarenta. Errar o × não é errar por
   nada: o resto da vaga é a área de ARRASTAR, então o toque que
   passa perto levanta o jogador em vez de removê-lo.

   Por isso o glifo cresce (15 → 24px) mas quem cresce mesmo é a
   caixa: quarenta por quarenta, com o × centrado dentro dela.
   Quarenta é a medida do dedo — é o alvo que não se erra.

   E ele não invade a foto: a foto tem 34px e fica centrada no
   meio da vaga, a mais de trinta pixels da borda direita, então
   a caixa cresce sobre o canto vazio. A área de arrastar
   continua inteira.

   Sem fundo: dezesseis vagas com um botão redondo aceso no canto
   virariam dezesseis chamarizes numa tela onde o que se quer
   olhar são as duplas. O que ficou mais forte foi o traço — a
   .42 de branco um × de vinte e quatro pixels já se vê de longe,
   e escurecer o canto seria pedir atenção para a saída em vez de
   para as duplas.
------------------------------------------------------------ */
.tm-camp-x {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: rgba(255,255,255,.42);
}

/* ------------------------------------------------------------
   ARRASTAR JOGADORES DE UMA VAGA PARA OUTRA

   Três estados, e cada um responde a uma pergunta que o dedo
   faz:

     - `touch-action: none` nas vagas que se pegam: sem isso o
       navegador do celular entende o arrasto como rolagem da
       página e o `pointermove` nunca chega;

     - `.tm-camp-pegou` é "estou com esta na mão";

     - `.tm-camp-livre` acende TODOS os destinos possíveis no
       momento em que algo é levantado. É a diferença entre uma
       tela onde se descobre arrastando e uma onde se vê onde
       pode largar.
------------------------------------------------------------ */
.tm-camp-vaga[data-pega] { touch-action: none; }

.tm-camp-vaga[data-pega]:hover { border-color: rgba(255,255,255,.25); }

.tm-camp-pegou {
    border-color: #ffbb33 !important;
    background: rgba(255,187,51,.14) !important;
    transform: scale(.94);
}

.tm-camp-livre {
    border-color: rgba(77,214,140,.55) !important;
    border-style: dashed !important;
    background: rgba(77,214,140,.1) !important;
}

/* A minha vaga fica marcada mesmo parada: numa chave de dezesseis
   caras pequenas, achar a própria leva mais tempo do que deveria. */
.tm-camp-eu { box-shadow: inset 0 0 0 1px rgba(120,190,255,.55); }

.tm-camp-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tm-camp-acoes .tm-btn-sala { flex: 1 1 180px; }

.tm-camp-impedimento {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255,187,51,.85);
}

/* A contagem da largada. Verde, e não amarela como o
   impedimento: uma diz que falta alguma coisa, a outra diz que
   está tudo pronto — e as duas aparecem no mesmo lugar da tela,
   uma depois da outra. */
.tm-camp-largada {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #4dd68c;
}


/* ---------- A CHAVE ---------- */

.tm-camp-chave {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* As três rodadas empilhadas, uma embaixo da outra. Numa coluna
   de 460px, três colunas de confronto dariam 140px cada — nome
   de dupla nenhum cabe nisso. */

.tm-camp-rodada h3 {
    margin: 0 0 8px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: rgba(255,255,255,.5);
}

.tm-camp-jogo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12.5px;
}

/* A mesa que está rolando agora tem de saltar aos olhos entre
   sete que já acabaram. */
.tm-camp-jogo-rolando {
    border-color: rgba(46,204,113,.45);
    background: rgba(46,204,113,.08);
}

/* ------------------------------------------------------------
   AS CARAS, E O NOME EMBAIXO

   O confronto já foi quatro nomes em texto corrido, separados
   por barras. Numa coluna de 460px isso vira "Porteiro de Sobe e
   Desce / João da C…" — a linha não cabe, e cortada não diz quem
   está jogando.

   Foto é o que se reconhece de longe; o nome embaixo é a
   legenda. Duas caras de cada lado, o placar no meio.
------------------------------------------------------------ */
.tm-camp-lado {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}

.tm-camp-lado-b { justify-content: flex-end; }

.tm-camp-cara {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 52px;
    flex: 0 0 52px;
}

.tm-camp-cara img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

/* O nome cabe em duas linhas e para. Três linhas fariam os
   confrontos da mesma rodada ficarem de alturas diferentes, e a
   coluna passa a parecer torta. */
.tm-camp-cara b {
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: rgba(255,255,255,.72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.tm-camp-cara-bot img { opacity: .72; }

.tm-camp-cara-vazia {
    color: rgba(255,255,255,.25);
    font-size: 20px;
}

/* Quem passou fica inteiro; quem caiu esmaece. Riscar o nome
   embaixo de uma foto ficaria ilegível nesse tamanho — aqui o
   contraste faz o trabalho que o risco fazia no texto. */
.tm-camp-venceu b   { color: #fff; }
.tm-camp-venceu img { border-color: rgba(46,204,113,.55); }

.tm-camp-perdeu     { opacity: .38; }
.tm-camp-perdeu img { filter: grayscale(1); }

.tm-camp-versus {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: rgba(255,255,255,.3);
}

/* ------------------------------------------------------------
   O PLACAR NO MEIO

   "Deixa os placares dos jogos em andamento e encerrados pra
    saber o quanto falta pra acabar."

   Em cima os JOGOS, que é o que fecha a mesa (melhor de dois).
   Embaixo, miúdos, os tentos do jogo em curso — só enquanto a
   partida está rolando, porque numa mesa encerrada eles são o
   placar de um jogo que já acabou e confundiriam com o que
   decidiu.
------------------------------------------------------------ */
.tm-camp-placar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 6px;
    min-width: 42px;
}

.tm-camp-jogos {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
}

.tm-camp-jogos i {
    font-style: normal;
    font-size: 10px;
    color: rgba(255,255,255,.35);
    margin: 0 2px;
}

.tm-camp-tentos {
    font-size: 10px;
    color: #7fe0a4;
    white-space: nowrap;
}

/* O ESTADO, ESCRITO

   A borda verde já dizia "esta mesa está rolando" e as caras
   apagadas já diziam "esta dupla caiu". Só que os dois são
   pistas de COR, e cor sozinha não é informação: de relance, ou
   com pouco contraste na tela, aquele "2 x 0" tanto pode ser o
   resultado final quanto o momento do jogo. */
.tm-camp-estado {
    font-size: 8.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255,255,255,.35);
}

.tm-camp-estado-rolando   { color: #7fe0a4; }
.tm-camp-estado-encerrado { color: rgba(255,255,255,.4); }

.tm-camp-campeao {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,187,51,.20), rgba(255,187,51,.06));
    border: 1px solid rgba(255,187,51,.45);
}

.tm-camp-coroa {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #ffbb33;
    color: #1a1408;
    font-weight: 800;
}

.tm-camp-campeao strong { color: #fff; font-size: 15px; }

.tm-camp-convite {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(255,187,51,.10);
    border: 1px solid rgba(255,187,51,.35);
}

.tm-camp-convite { text-align: center; }
.tm-camp-convite p { margin: 0 0 10px; font-size: 13.5px; }


/* ---------- A LISTA DE AMIGOS ---------- */

.tm-camp-escolher {
    position: fixed !important;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.72);
}

.tm-camp-escolher-caixa {
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 18px;
    border-radius: 14px;
    background: #16222b;
    border: 1px solid rgba(255,255,255,.12);
}

.tm-camp-escolher-caixa h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #fff;
}

.tm-camp-amigos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.tm-camp-amigo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: #e9eef2;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.tm-camp-amigo img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* ------------------------------------------------------------
   CHAMAR PELO WHATSAPP DE DENTRO DA JANELA DA VAGA

   "Quando clicar pra convidar aparecer junto com os amigos a
    opção de mandar o link via whatsapp."

   Verde igual ao do rodapé — é o mesmo convite, e cor diferente
   para a mesma ação faria parecer outra coisa. Fica embaixo da
   lista e acima do FECHAR: a resposta preferida é um amigo da
   lista; o link é a saída para quem ainda não está aqui.

   Aqui só entra o que o `.tm-btn-sala` não dá: largura e
   `text-decoration: none` ele já tem, e o sublinhado do tema
   (`.tm-conteudo a`) nem alcança esta janela — ela pendura no
   `<body>`, fora do conteúdo. Regra que não muda nada é regra
   que engana quem for mexer depois: parece que está segurando
   alguma coisa, e não está.
------------------------------------------------------------ */
.tm-camp-whats-vaga {
    margin-bottom: 8px;
    background: #25d366 !important;
    color: #06331a !important;
}

/* O botão do campeonato no lobby. Ele é um <a>, e não um
   <button>: leva para outra tela, e link que se comporta como
   link pode ser aberto em outra aba, copiado, guardado. */
.tm-btn-campeonato {
    background: linear-gradient(135deg, #b8860b, #8a6508) !important;
}

/* A linha de campeonato no perfil. Duas caixas em vez de quatro:
   ela só aparece para quem já disputou, e esticar dois números
   pela largura de quatro faria a linha parecer defeituosa. */
.tm-perfil-camp { grid-template-columns: 1fr 1fr !important; margin-top: 10px; }
.tm-perfil-camp .tm-stat span { color: #ffbb33; }

/* ------------------------------------------------------------
   A CHAVE CABE NA COLUNA DO SITE

   Ela já foi mais larga. A ideia era pôr as três rodadas lado a
   lado num monitor, e para isso a tela do campeonato ganhava uma
   largura própria de 960px — a única do site fora dos 460 do
   largura.css.

   Ele preferiu o contrário, e tem razão: uma tela que estica
   quando todas as outras não esticam é uma tela que parece de
   outro site. A chave empilha em três blocos, um por rodada, que
   é como se lê um mata-mata num papel pequeno de qualquer jeito.

   Nada aqui força largura: o `.tm-container` do largura.css
   manda, como em todas as outras telas.
------------------------------------------------------------ */



/* ============================================================
   OS DOIS BOTÕES DE COMEÇAR

   Criar mesa privada e jogar o campeonato são duas escolhas
   diferentes, e estavam grudadas uma na outra como se fossem
   um bloco só — dois retângulos altos encostados, ocupando a
   primeira dobra inteira do lobby.

   Um vão entre eles e menos altura em cada um: continuam sendo
   a primeira coisa da tela, sem empurrar as mesas públicas para
   baixo da dobra. Quem abre o lobby quase sempre quer as mesas.
   ============================================================ */
.tm-private-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tm-private-buttons .tm-btn-primary {
    padding: 13px 20px;
    font-size: 15.5px;
    border-radius: 13px;

    /* O do campeonato é um <a> e o da mesa é um <button>, e os
       dois nascem com alturas diferentes: o link herda o
       line-height do texto do site e vinha 8px mais alto, além
       de sublinhado. Dois botões colados de tamanhos diferentes
       parecem um erro de montagem. */
    line-height: 1.2;
    text-decoration: none !important;

    /* E a cor: o <a> herdava o amarelo de link do tema, que
       sobre o dourado do campeonato quase não se lê. */
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Compartilhar a tabela: o botão genérico e o do WhatsApp, que é
   para onde ela vai na prática. */
.tm-camp-share { width: 100%; }

.tm-camp-whats {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #25d366 !important;
    color: #06331a !important;
    font-weight: 800;
}


/* ============================================================
   A PÁGINA DE BAIXAR O JOGO

   "Cria uma página para download do jogo em APK pra pessoa
    clicar e baixar o jogo pro android dele."

   Ela tem uma coisa só para fazer. Por isso é uma coluna
   estreita, centralizada, com o botão do Android como o maior
   elemento e tudo o mais em volta servindo a ele: o tamanho do
   arquivo no próprio botão, os três passos da instalação
   embaixo, e o caminho do iPhone para quem não pode usar
   nenhum dos dois.
============================================================ */

.tm-baixar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 16px 40px;
    text-align: center;
}

.tm-baixar-titulo {
    margin: 6px 0 0;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

.tm-baixar-titulo strong { color: var(--tm-amarelo, #ffbb33); }

.tm-baixar-sub {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.4;
    color: rgba(255,255,255,.62);
}

/* O botão do Android é o maior da tela porque é a única coisa
   que a página pede. */
.tm-baixar-android {
    padding: 18px;
    font-size: 16px;
}

.tm-baixar-android svg { width: 22px; height: 22px; }

.tm-baixar-vazio {
    display: block;
    padding: 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.22);
    background: rgba(255,255,255,.04);
    font-size: 14px;
    color: rgba(255,255,255,.8);
}

.tm-baixar-nota {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
}

.tm-baixar-nota code {
    background: rgba(0,0,0,.35);
    padding: 1px 5px;
    border-radius: 5px;
}

/* Pedido registrado: o botão para de convidar, e o que responde
   passa a ser o parágrafo abaixo dele. */
.tm-baixar-pedido {
    opacity: .7;
    cursor: default;
}

.tm-baixar-recado {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,187,51,.10);
    border: 1px solid rgba(255,187,51,.28);
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.88);
    text-align: left;
}

.tm-baixar-passos {
    margin-top: 6px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    text-align: left;
}

/* O tema dá a todo <h2> do conteúdo uma linha por cima e 34px
   de margem — serve para separar seções de um texto corrido, e
   aqui deixava um risco solto dentro do quadro. A regra do tema
   tem duas partes (`.tm-conteudo h2`), então esta precisa de
   duas também para ganhar. */
.tm-conteudo .tm-baixar-passos h2,
.tm-baixar-passos h2 {
    margin: 0 0 10px;
    padding-top: 0;
    border-top: none;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.tm-baixar-passos ol {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.82);
}

.tm-baixar-passos li { margin-bottom: 8px; }
.tm-baixar-passos li:last-child { margin-bottom: 0; }

.tm-baixar-jogar { margin-top: 4px; opacity: .85; }


/* ============================================================
   A FORMA DE PONTUAR

   "Cria a opção de escolher a forma de pontuação antes de entrar
    na partida. Isso é definido em uma chave seletora na sala de
    espera (...) e fica escrito no lobby pra quem tá de fora
    saber a forma que tá sendo jogado."

   Duas peças: a CHAVE, na sala, onde se escolhe; e a ETIQUETA,
   no lobby, onde se lê. A etiqueta é discreta de propósito — ela
   informa quem está escolhendo mesa, não disputa com o nome da
   mesa nem com "dá para entrar agora".
============================================================ */

/* ------------------------------------------------------------
   O BLOCO NÃO ESTICA A PÁGINA

   "Tira essa linha e diminui a margem de distância pra não
    esticar muito a página."

   O título nasceu com a classe .tm-subtitulo, que no mesa.css é
   um separador de seção: risco em cima, 15px de respiro embaixo
   do risco e 25 a 30px de margem. Ele foi feito para "Tema da
   mesa", no fim da sala, onde separa duas coisas diferentes.

   Aqui o risco separava o que ninguém tinha juntado: quem vê
   dois botões grandes, um aceso, já entende que é uma escolha.
   E cada pixel gasto aqui empurra ESTOU PRONTO para fora da
   tela, numa página que já rola.

   A nota precisa do dobro de classe porque o tema dá margem a
   todo <p> do conteúdo (.tm-conteudo p, 0-1-1) — a mesma pegadinha
   de sempre.
------------------------------------------------------------ */
.tm-escala { margin: 0 0 10px; }

.tm-escala .tm-subtitulo {
    border-top: 0;
    padding-top: 0;
    margin: 8px 0 6px;
}

.tm-escala .tm-escala-nota { margin: 5px 0 0; }

.tm-escala-chave {
    display: flex;
    gap: 8px;
}

/* Cada opção é a sequência de números, e mais nada: quem joga
   truco lê 1-3-6-9-12 e já sabe o que é. */
.tm-escala-op {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.tm-escala-op:hover { border-color: rgba(255,255,255,.24); }

.tm-escala-ativa {
    border-color: #2fa84f;
    background: rgba(47,168,79,.16);
    color: #fff;
}

.tm-escala-nota {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
}

/* A etiqueta do lobby, embaixo do botão da mesa que está
   jogando. A coluna encolhe com o botão (flex-shrink: 0 nele) e
   os números não quebram em duas linhas. */
.tm-sala-acao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tm-sala-escala {
    margin-top: 0;
    font-size: 10.5px;
    letter-spacing: .4px;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
}

/* O rótulo da escala na página de regras. */
.tm-escala-rotulo { font-weight: 400; opacity: .7; }

/* ------------------------------------------------------------
   A MESMA CHAVE, NA CHAVE DO CAMPEONATO

   "E coloca esse seletor no campeonato também."

   Mesmas classes, e de propósito: quem já virou a chave na sala
   de espera reconhece a daqui sem ler nada. O que muda é o
   entorno — ela fica entre as dezesseis vagas e os botões de
   COMPLETAR COM BOTS e COMEÇAR, e precisa de ar dos dois lados
   para não parecer parte de nenhum dos dois.
------------------------------------------------------------ */
.tm-camp-escala { margin: 0 0 14px; }

/* Para os quinze que não montam a chave, ela é leitura: sem
   mão de clique e sem o realce de quem passa o dedo por cima.
   Apagá-la seria pior — quem foi convidado precisa ver em que
   pontuação vai jogar antes de aceitar. */
.tm-escala-op[disabled] {
    cursor: default;
    opacity: .75;
}

.tm-escala-op[disabled]:hover { border-color: rgba(255,255,255,.12); }

.tm-escala-op[disabled].tm-escala-ativa {
    opacity: 1;
    border-color: #2fa84f;
}


/* ============================================================
   A MESA NO TABLET

   O teto de 310px é o do celular, onde ele existe porque a tela
   é estreita: 66vw de 390 já são 257, e o teto quase nunca pega.
   Num iPad ele pega sempre — a mesa fica do tamanho de um
   porta-copos num tampo de 768 por 1024, com 229px de vazio de
   cada lado e 215px sobrando acima e abaixo do feltro.

   Aqui o teto sobe para 500 e a fatia da altura vai de 34vh para
   44vh: no iPad em pé dá 450px de feltro, com folga de sobra
   para o placar em cima e a mão embaixo. As cartas da mão, os
   nomes dos jogadores e os cantos do feltro saem todos desta
   mesma variável — crescem junto, sem regra nova para cada um.

   Esta regra vem DEPOIS de todas as outras de propósito: as
   anteriores repetem `--tm-mesa` em vários pontos do arquivo, e
   entre iguais quem manda é a última.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1200px) and (min-height: 600px) {

    /* QUEM DECIDE O TETO É A CAIXA DO JOGADOR DE CIMA

       Medindo a mesa cheia (quatro jogadores, nome de duas
       linhas, cartas na mão) em 768x1024, o vão entre o placar e
       a caixa do jogador de cima encolhe assim:

           mesa 310 -> 141px      mesa 400 -> 53px
           mesa 340 -> 111px      mesa 420 -> 33px
           mesa 380 ->  72px      mesa 450 ->  4px

       Em 450 o nome do jogador quase encosta no placar, e o
       layout "mesa no topo" deixa de ter para onde subir. Em 400
       ainda sobram 53px — é onde a mesa cresce o máximo sem
       comer o que está em volta dela.

       39vh dá 399px no iPad em pé; o teto de 420 é para o iPad
       grande, que tem altura de sobra. */
    :root,
    body.tm-jogo { --tm-mesa: min(56vw, 39vh, 420px); }

    /* Sem o header sobra altura: a mesa pega um pouco mais. */
    body.tm-jogo:has(.tm-sem-header) { --tm-mesa: min(58vw, 41vh, 440px); }
}


/* ============================================================
   O LOBBY DO TABLET
   ============================================================ */
@media (min-width: 700px) and (max-width: 1200px) and (min-height: 600px) {

    /* ------------------------------------------------------------
       O LOBBY EM DUAS COLUNAS

       Com a coluna a 640px, o cartão de mesa fica com o nome
       encostado na esquerda, o botão na direita e um deserto no
       meio — a mesma informação de antes espalhada no dobro do
       espaço. Em duas colunas cada cartão volta a ter a largura
       que ele tem no celular (~314px), que é a que foi desenhada,
       e cabe o dobro de mesas sem rolar a tela.

       `align-items: start` porque os cartões têm alturas
       diferentes (mesa com nível mínimo tem uma linha a mais):
       sem isso a grade estica o mais baixo para igualar ao vizinho
       e a etiqueta de pontuação descola do botão.
    ------------------------------------------------------------ */
    /* DUAS COLUNAS, E O CARTÃO EM DUAS FAIXAS

       "Eu falei pra aumentar as fontes, imagens... mas eu prefiro
        com 2 colunas."

       As duas coisas juntas não cabiam do jeito que o cartão era:
       com as peças 20% maiores e 358px de largura, o botão ao
       lado do texto comia o espaço do nome e "Cooperrita" virava
       "Coope…".

       Quem cede é o ARRANJO, não o tamanho. O botão desce para
       uma faixa própria, embaixo: o nome passa a ter a largura
       inteira do cartão menos a logo, e o alvo de toque fica
       maior ainda, atravessado. Duas colunas com letra grande,
       que é o que ele pediu. */
    .tm-lista-salas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }

    .tm-lista-salas .tm-sala { flex-wrap: wrap; }

    .tm-lista-salas .tm-sala-info { flex: 1 1 0; min-width: 0; }

    .tm-lista-salas .tm-sala-acao {
        flex: 1 0 100%;
        align-items: stretch;
    }

    .tm-lista-salas .tm-sala-acao > button { width: 100%; }

    /* Com a coluna esticada, a etiqueta de pontuação encostaria
       na esquerda: ela é legenda do botão, e legenda fica embaixo
       do que ela explica. */
    .tm-lista-salas .tm-sala-acao .tm-sala-escala { text-align: center; }

    .tm-lista-salas .tm-sala { margin-bottom: 0; }

    /* ------------------------------------------------------------
       O ANÚNCIO ATRAVESSA AS DUAS COLUNAS

       "Na versão de tablet coloca a publicidade com 100% de
        largura."

       Na grade de dois ele nascia ocupando uma célula: ficava do
       tamanho de um cartão de mesa, encostado num, e o olho lia os
       dois como um par — mesa e mesa. Atravessando as duas
       colunas ele volta a ser o que é, uma faixa entre as mesas, e
       o anunciante ganha a largura que pagou.

       A margem de baixo sai junto: quem separa as linhas agora é o
       `gap` da grade, e a margem por cima dele abriria um degrau
       só embaixo do anúncio.
    ------------------------------------------------------------ */
    .tm-lista-salas .tm-anuncio-lobby {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
}

/* ============================================================
   O TABLET, POR DENTRO — TUDO MAIOR

   "Deixa a versão para tablet maior, com os elementos maiores,
    ficou tudo muito pequeno."

   A primeira volta mexeu no ESPAÇO: coluna mais larga, mesa
   maior, lobby em duas colunas. As PEÇAS continuaram do tamanho
   do celular — pastilha de 10,5px, botão de 37px de altura,
   título de 12px. Espalhadas num tampo de 768 por 1024, viram
   letra de telefone numa tela grande.

   Tablet não é celular largo: é tela vista de mais longe, com o
   mesmo dedo mirando alvos que ficaram proporcionalmente
   menores. Cresce o que se lê e o que se toca — cerca de 20%,
   que é onde a diferença aparece sem virar caricatura.

   Tudo aqui é override de valor, sem mudar estrutura: quem
   decide o desenho continua sendo a folha de cima, e esta faixa
   só ajusta números. É de propósito — assim uma mudança de
   layout no celular chega ao tablet sozinha.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1200px) and (min-height: 600px) {

    /* ---------- o cartão de mesa ---------- */

    .tm-sala { padding: 18px; gap: 16px; }

    .tm-sala-logo { width: 78px; height: 78px; border-radius: 18px; }

    .tm-sala-id { font-size: 20px; }

    .tm-sala-nivel { font-size: 13px; padding: 3px 11px; }

    .tm-livre, .tm-aguardando, .tm-emjogo { font-size: 12.5px; padding: 4px 12px; }

    .tm-ocupacao { font-size: 15px; gap: 8px; }

    .tm-vaga { width: 9px; height: 9px; }

    .tm-sala-escala { font-size: 13px; }

    /* ---------- o que se toca ---------- */

    .tm-entrar { font-size: 16px; padding: 15px 26px; border-radius: 14px; }

    .tm-btn-primary { font-size: 20px; padding: 20px 0; border-radius: 16px; }

    .tm-btn-amigos { font-size: 16px; padding: 16px 0; }

    .tm-btn-sala { font-size: 17px; padding: 18px 22px; }

    /* ---------- os títulos ---------- */

    /* O `.tm-conteudo` na frente não é enfeite: o tema dá
       tamanho a todo h1/h2/h3 do conteúdo (`.tm-conteudo h3`,
       0-1-1), e uma classe sozinha (0-1-0) perde para ele. Sem o
       prefixo, estes dois títulos ficavam do tamanho do celular
       enquanto o resto crescia. */
    /* 20 e não 15: o tema já leva este h3 a 16,5px no celular
       (`.tm-conteudo h3`), e um "aumento" para 15 seria uma
       diminuição. O número tem de ser lido junto com quem manda
       hoje, não com o valor escrito na regra de origem. */
    .tm-conteudo .tm-lobby-title { font-size: 20px; }

    .tm-conteudo .tm-subtitulo { font-size: 14px; letter-spacing: 1.8px; }

    /* ---------- a sala de espera ---------- */

    .tm-escala-op { font-size: 19px; padding: 17px 12px; border-radius: 16px; }

    .tm-escala-nota { font-size: 14px; }

    /* ---------- a chave do campeonato ---------- */

    .tm-conteudo .tm-camp-titulo { font-size: 30px; }

    .tm-conteudo .tm-camp-numero { font-size: 26px; }

    .tm-camp-situacao,
    .tm-camp-item-situacao { font-size: 13.5px; padding: 4px 10px; }

    .tm-camp-foto { width: 44px; height: 44px; flex: 0 0 44px; }

    .tm-camp-nome { font-size: 13px; }

    .tm-camp-vaga { min-height: 104px; padding: 11px 8px; }

    .tm-camp-num { font-size: 15px; }

    /* ---------- a mesa ----------

       O feltro, as cartas e os avatares já crescem sozinhos: saem
       do --tm-mesa. O que não sai dele — os botões de truco e o
       placar — ficava para trás, e era o que sobrava de tamanho
       de telefone na tela do jogo. */

    .tm-btn-acao { font-size: 18px; padding: 17px 30px; border-radius: 14px; }

    .tm-placar-topo .tm-pontos { font-size: 42px; }
}