/* =========================================================================
 * F🚫dinha — Folha de estilo
 * Layout mobile-first: seções empilhadas, sem sobreposição de elementos.
 * ========================================================================= */

/* ------------------------------------------------------------- Tokens */
:root {
    --teal-50:  #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;

    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;

    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --shadow-sm: 0 1px 2px rgba(15, 118, 110, .10);
    --shadow-md: 0 3px 10px rgba(15, 118, 110, .12);
    --shadow-lg: 0 10px 24px rgba(15, 118, 110, .16);

    /* Cores da barra de tempo — âmbar a vermelho, longe do teal do anel. */
    --tempo-normal:  #eab308;
    --tempo-atencao: #f97316;
    --tempo-critico: #dc2626;

    --raio: 12px;
    --raio-lg: 18px;

    /* Largura útil do app. Acompanha a tela até o teto de 460px. */
    --largura-app: min(100vw - 20px, 460px);

    /* Tamanho base da carta na mão. O JS sobrescreve conforme a quantidade. */
    --carta-mao: 46px;
    --carta-mini: 35px; /* 58px * ESCALA_MINI (0.603) no client.js */
    --sprite: 58px;
}

/* --------------------------------------------------------------- Base */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gray-100);
    color: var(--gray-900);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    padding: 10px 10px calc(72px + env(safe-area-inset-bottom));
}

h1, h2, h3, p { margin: 0; }

.hidden { display: none !important; }

/* ------------------------------------------------------- Telas (cartões) */
#tela-modo-jogo,
#tela-salas,
#tela-inicial,
#tela-lobby,
#tela-fim {
    width: var(--largura-app);
    margin: 16px auto;
    background: #fff;
    border-radius: var(--raio-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--teal-100);
    padding: 20px;
}

.centralizar-tela {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

/* Faixa de título reaproveitada em várias telas. */
.faixa-titulo {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-700));
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    padding: 12px;
    border-radius: var(--raio);
    margin-bottom: 18px;
}

/* --------------------------------------------------------------- Botões */
button {
    font-family: inherit;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

button:focus-visible {
    outline: 3px solid var(--orange-400);
    outline-offset: 2px;
}

button:disabled { opacity: .5; cursor: not-allowed; }

/* Botões de ação em largura total: alvo de toque de 48px. */
#modo-local,
#modo-multiplayer,
#criar-sala,
#entrar,
#voltar-salas,
#jogar-novamente,
#voltar-salas-cheia,
#eliminado-continuar,
#eliminado-sair,
#config-comecar,
#config-voltar {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 1rem;
    color: #fff;
    background: var(--teal-600);
    box-shadow: var(--shadow-md);
}

#modo-multiplayer { background: var(--orange-600); }
#voltar-salas,
#voltar-salas-cheia,
#eliminado-sair,
#config-voltar { background: var(--gray-500); }

#modo-local:active,
#modo-multiplayer:active,
#criar-sala:active,
#entrar:active,
#jogar-novamente:active,
#voltar-salas:active,
#voltar-salas-cheia:active,
#eliminado-continuar:active,
#eliminado-sair:active,
#config-comecar:active,
#config-voltar:active { transform: translateY(1px); }

/* Hover só onde existe ponteiro de verdade: no celular ele gruda. */
@media (hover: hover) {
    #modo-local:hover,
    #criar-sala:hover,
    #entrar:hover,
    #jogar-novamente:hover,
    #eliminado-continuar:hover,
    #config-comecar:hover { background: var(--teal-700); box-shadow: var(--shadow-lg); }

    #modo-multiplayer:hover { background: var(--orange-700); box-shadow: var(--shadow-lg); }

    #voltar-salas:hover,
    #voltar-salas-cheia:hover,
    #eliminado-sair:hover,
    #config-voltar:hover { background: var(--gray-600); }
}

/* --------------------------------------------------------------- Campos */
input[type="text"], select {
    display: block;
    width: 100%;
    min-height: 46px;
    border: 2px solid var(--gray-200);
    border-radius: var(--raio);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
    background: #fff;
    color: var(--gray-900);
}

input[type="text"]:focus, select:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
}

label { font-size: .875rem; font-weight: 600; color: var(--gray-700); }

/* Interruptor deslizante para as regras. */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 46px;
    height: 26px;
    flex: 0 0 46px;
    background: var(--gray-300);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .25s ease;
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s ease;
}

input[type="checkbox"]:checked { background: var(--teal-500); }
input[type="checkbox"]:checked::after { transform: translateX(20px); }

/* --------------------------------------------------------- Lista de salas */
#lista-salas {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gray-200);
    border-radius: var(--raio);
    padding: 8px;
    background: var(--gray-50);
}

#lista-salas button {
    width: 100%;
    text-align: left;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: var(--raio);
    background: #fff;
    border: 1px solid var(--teal-200);
    color: var(--gray-900);
}

#lista-salas button:last-child { margin-bottom: 0; }

@media (hover: hover) {
    #lista-salas button:hover { background: var(--teal-50); border-color: var(--teal-500); }
}

#painel-regras {
    background: var(--teal-50);
    border: 1px solid var(--teal-200);
    border-radius: var(--raio);
    padding: 14px;
}

#toggle-regras {
    width: 100%;
    text-align: left;
    background: none;
    color: var(--teal-700);
    padding: 10px 0;
    font-size: .9rem;
}

#painel-regras label.interruptor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 600;
    color: var(--gray-900);
}

/* ---------------------------------------------------------- Tela de jogo */
#tela-jogo {
    width: var(--largura-app);
    margin: 0 auto;
    background: linear-gradient(180deg, var(--teal-50), var(--gray-100));
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.barra-jogo {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-700));
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 10px;
}

.barra-sala {
    background: var(--gray-800);
    color: var(--gray-100);
    text-align: center;
    font-size: .75rem;
    padding: 6px 10px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.barra-sala strong { color: var(--teal-300); font-weight: 600; }

/* A mesa é uma pilha de seções, não uma grade de posições fixas:
 * é o que sobrevive a telas estreitas. */
.mesa-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

/* --------------------------------------------------------- Quadro jogador */
.quadro-jogador {
    --acento: var(--teal-500);
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
    overflow: hidden;
    line-height: 1.2;
    transition: box-shadow .2s ease, opacity .2s ease, transform .15s ease;
}

/* -- Linha 1: dealer, nome, pontos --------------------------------------- */
.quadro-topo {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--teal-800);
    color: #fff;
    padding: 4px 5px;
}

.quadro-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ficha do distribuidor, desenhada em CSS: não depende de arquivo de imagem
 * e acompanha o tamanho da fonte do quadro. */
.ficha-dealer {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #7c2d12;
    font-size: .58rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1.5px #fff, 0 0 5px rgba(245, 158, 11, .85);
}

/* Troca de dealer: a ficha nova gira e assenta; a antiga encolhe e some.
 * As duas classes são adicionadas via JS no momento exato da mudança
 * (cache.dealer !== ehDealer) e removidas ao fim da animação. */
@keyframes dealer-entra {
    0%   { transform: scale(0.3) rotate(0deg);   opacity: 0; }
    60%  { transform: scale(1.15) rotate(300deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg);    opacity: 1; }
}

@keyframes dealer-sai {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.3); opacity: 0; }
}

.ficha-dealer.anim-entra {
    animation: dealer-entra 450ms ease-out;
}

.ficha-dealer.anim-sai {
    animation: dealer-sai 300ms ease-in forwards;
}

.quadro-pontos {
    flex: 0 0 auto;
    min-width: 19px;
    text-align: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 5px;
    border-radius: 999px;
}

/* -- Linha 2: carta baixada e placar da mão ------------------------------ */
.quadro-corpo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
}

.quadro-carta {
    position: relative;
    width: var(--carta-mini);
    height: var(--carta-mini);
    flex: 0 0 auto;
    border-radius: 5px;
}

.quadro-carta .carta { position: absolute; top: 0; left: 0; }

/* Carta jogada: o CONTÊINER anima (não a .carta interna, que já usa
 * transform:scale inline para o tamanho mini — animar nela sobrescreveria
 * esse scale e a carta "pularia" de tamanho ao fim da animação).
 * Dispara só quando a carta passa de vazia para visível (ver client.js),
 * nunca ao limpar o quadro numa mão nova. */
@keyframes carta-assenta {
    0%   { transform: scale(0.55) rotate(-18deg) translateY(-10px); opacity: 0; }
    70%  { transform: scale(1.08) rotate(4deg)   translateY(0);     opacity: 1; }
    100% { transform: scale(1)    rotate(0deg)   translateY(0);     opacity: 1; }
}

.quadro-carta.anim-jogada {
    animation: carta-assenta 320ms ease-out;
}

/* Espaço reservado mesmo sem carta: sem isso o placar dança de posição
 * a cada vaza, e o olho perde a referência. */
.quadro-carta.carta-vazia {
    border: 1px dashed var(--gray-300);
    background: var(--gray-50);
}

.quadro-placar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.placar-valor {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    color: var(--gray-400);
}

.placar-valor.placar-neutro { color: var(--gray-400); }
.placar-valor.placar-certo  { color: var(--teal-600); }
.placar-valor.placar-passou { color: var(--orange-600); }
.placar-valor.placar-falta  { color: var(--gray-700); }

.placar-rotulo {
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gray-400);
    white-space: nowrap;
}

/* -- Linha 3: tempo da vez ----------------------------------------------- */
.quadro-barra {
    height: 3px;
    background: var(--gray-200);
}

/* Escala própria, deliberadamente fora do teal: o anel do quadro já usa
 * teal para dizer de quem é a vez. Aqui a cor mede tempo, não identidade. */
.quadro-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tempo-normal);
    transition: width .25s linear, background-color .3s ease;
}

.quadro-barra span.barra-normal   { background: var(--tempo-normal); }
.quadro-barra span.barra-atencao  { background: var(--tempo-atencao); }
.quadro-barra span.barra-critica  { background: var(--tempo-critico); }
.quadro-barra span.barra-pausada  { background: var(--gray-400); }

/* -- Estados ------------------------------------------------------------- */
.quadro-marca {
    text-align: center;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 2px;
    color: #fff;
}

.marca-eliminado {
    background: var(--tempo-critico);
    animation: marca-fade-in 250ms ease-in 450ms backwards;
}
.marca-ausente   { background: var(--gray-600); }
.marca-caiu      { background: var(--orange-500); }

.quadro-eliminado { filter: grayscale(1); opacity: .55; }
.quadro-inativo   { opacity: .7; }

/* Eliminado: shake sutil + fade + grayscale progressivo até o estado final
 * (que é o mesmo de .quadro-eliminado acima — a animação só faz a TRANSIÇÃO
 * até lá; o valor final da keyframe já bate com o estado estático, então não
 * há salto quando a classe transitória sai). Dispara uma única vez, no
 * instante em que a situação vira 'eliminado' (ver client.js). */
@keyframes eliminado-entra {
    0%   { transform: translateX(0);    opacity: 1;   filter: grayscale(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(5px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px);  opacity: .75; filter: grayscale(.6); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0);    opacity: .55; filter: grayscale(1); }
}

.quadro-jogador.anim-eliminado {
    animation: eliminado-entra 600ms ease-out;
}

/* Marca "ELIMINADO": aparece só depois que o shake termina, não junto. */
@keyframes marca-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Vez do jogador: anel externo em vez de borda, porque borda empurraria o
 * conteúdo e faria o quadro tremer a cada troca de turno. */
.quadro-vez {
    --escala-vez: 1.05;
    box-shadow: 0 0 0 3px var(--acento), 0 6px 16px rgba(0, 0, 0, .35);
    z-index: 4;
}

.quadro-vez.quadro-alerta {
    --acento: var(--orange-500);
    animation: pulso-vez 1s ease-in-out infinite;
}

.quadro-vez.quadro-pausado { --acento: var(--gray-400); }

@keyframes pulso-vez {
    50% { box-shadow: 0 0 0 5px var(--orange-400), 0 6px 16px rgba(0, 0, 0, .35); }
}

/* Vaza vencida: anel dourado pulsante + leve scale no quadro do vencedor,
 * ecoando a cor da ficha do dealer (#fde047 → #f59e0b). Disparado uma única
 * vez pelo evento vencedor_jogada (não é estado persistente como quadro-vez,
 * por isso usa classe temporária removida ao fim da animação). */
@keyframes vaza-vencida-glow {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 3px 10px rgba(0, 0, 0, .28); }
    30%  { box-shadow: 0 0 0 4px rgba(245, 158, 11, .9), 0 6px 16px rgba(0, 0, 0, .3); }
    70%  { box-shadow: 0 0 0 4px rgba(245, 158, 11, .9), 0 6px 16px rgba(0, 0, 0, .3); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 3px 10px rgba(0, 0, 0, .28); }
}

.quadro-jogador.anim-vaza-vencida {
    animation: vaza-vencida-glow 750ms ease-in-out;
    z-index: 4;
}

/* Seu assento: base clara para você se achar na mesa de imediato. */
.quadro-local { --acento: var(--teal-400); }
.quadro-local .quadro-topo { background: var(--teal-600); }
.quadro-local .quadro-nome { font-size: .78rem; }
.quadro-local .placar-valor { font-size: 1.15rem; }
.quadro-local .placar-rotulo { font-size: .56rem; }

/* ============================================================ Mesa oval
 * O feltro tem proporção fixa e os assentos são posicionados em % sobre ele
 * (coordenadas no client.js). Encolhe junto com a tela sem quebrar a roda. */
.mesa-redonda {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.02;
    margin: 4px 0 10px;
}

/* Telas largas: a mesa deita, como uma mesa de verdade vista de cima. */
@media (min-width: 620px) {
    .mesa-redonda { aspect-ratio: 1 / 0.78; }
}

.feltro {
    position: absolute;
    inset: 9% 13%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 38%, var(--teal-600) 0%, var(--teal-700) 55%, var(--teal-900) 100%);
    border: 5px solid var(--teal-900);
    box-shadow:
        inset 0 3px 18px rgba(0, 0, 0, .35),
        0 6px 18px rgba(19, 78, 74, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------- Assentos */
.assento {
    position: absolute;
    /* left/top vêm do client.js; o translate ancora o quadro pelo centro,
     * então a coordenada é o ponto do assento, não o canto do cartão. */
    transform: translate(-50%, -50%) scale(var(--escala-vez, 1));
    width: clamp(88px, 27%, 124px);
    z-index: 2;
}

.assento.quadro-local {
    width: clamp(104px, 32%, 148px);
    z-index: 3;
}

/* ---------------------------------------------------------- Miolo da mesa
 * Três camadas com pesos diferentes: carta virada (gráfico), status (a frase
 * que importa), tensão (miúdo). Mão e vaza vivem no cabeçalho da tela. */
.quadro-mesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px;
    max-width: 86%;
    text-align: center;
}

.mesa-central {
    width: var(--sprite);
    height: var(--sprite);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 2px;
}

.mesa-central .carta { box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }

/* Frase principal sobre o feltro escuro. */
.mesa-status {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    min-height: 1.2em;
}

.mesa-status.status-vitoria { color: #86efac; }
.mesa-status.status-empate  { color: var(--gray-200); }
.mesa-status.status-pausa   { color: var(--orange-400); }
.mesa-status.status-espera  { color: rgba(255, 255, 255, .6); font-weight: 600; }
.mesa-status.status-vez     { color: rgba(255, 255, 255, .92); }

/* Sua vez: o centro precisa gritar, senão você espera sem perceber. */
.mesa-status.status-sua-vez {
    color: #fff;
    background: var(--orange-600);
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    animation: respira-vez 1.4s ease-in-out infinite;
}

@keyframes respira-vez {
    50% { background: var(--orange-500); }
}

/* Soma dos palpites contra as vazas disponíveis. */
.mesa-tensao {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .55);
}

.mesa-tensao.tensao-sobra { color: var(--orange-400); }
.mesa-tensao.tensao-exato { color: var(--teal-200); }
.mesa-tensao.tensao-falta { color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------- Zona local */
.zona-local { display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------------- Cartas */
.carta {
    width: var(--sprite);
    height: var(--sprite);
    background-image: url('img/cards.png');
    background-repeat: no-repeat;
    display: block;
    border-radius: 6px;
}

/* Carta chave (manilha) usa a folha de sprites alternativa. O !important é
 * necessário porque `.carta` já define background-image. */
.carta.carta-chave {
    background-image: url('img/cardsE.png') !important;
}

/* A célula, o leque e o verso são definidos na seção "Mão do jogador". */
.carta.cursor-pointer { cursor: pointer; }

/* ----------------------------------------------------------- Mão do jogador
 * Painel próprio, destacado do feltro: é a área onde você age. */
.zona-mao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 10px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
    border: 1px solid var(--teal-200);
    border-radius: var(--raio);
    transition: border-color .25s ease, box-shadow .25s ease;
}

/* Sua vez: a própria mão se acende, e não só o feltro lá em cima. */
.zona-mao.mao-ativa {
    border-color: var(--orange-400);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, .25), var(--shadow-md);
}

.mao-dica {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gray-500);
    text-align: center;
}

.mao-dica.dica-ativa { color: var(--orange-700); font-weight: 700; }
.mao-dica.dica-vazia { color: var(--gray-400); font-style: italic; }

/* Trilho do leque. `--sobrepor` vem do client.js conforme o número de cartas:
 * positivo é espaço entre elas, negativo é sobreposição. */
.mao-cartas {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: calc(var(--carta-mao) + 8px);
    padding-top: 8px;
}

.mao-cartas > * + * { margin-left: var(--sobrepor, 6px); }

.celula-carta {
    position: relative;
    flex: 0 0 auto;
    width: var(--carta-mao);
    height: var(--carta-mao);
    transition: transform .15s ease;
}

.celula-carta .carta {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: scale(calc(var(--carta-mao) / var(--sprite)));
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* Cartas jogáveis ganham relevo; as demais ficam assentadas. */
.mao-ativa .celula-carta .carta { box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }

@media (hover: hover) {
    .celula-carta:has(.cursor-pointer):hover { transform: translateY(-10px); z-index: 20 !important; }
}

/* Toque: o dedo cobre a carta, então o retorno vem do deslocamento. */
.celula-carta:active { transform: translateY(-6px); }

/* Carta enviada: sobe rumo à mesa e some. Resposta imediata ao toque, sem
 * esperar o estado voltar do servidor. */
.carta-jogando {
    animation: joga-carta .35s ease-out forwards;
    pointer-events: none;
}

@keyframes joga-carta {
    to {
        transform: scale(calc(var(--carta-mao) / var(--sprite))) translateY(-46px);
        opacity: 0;
    }
}

.carta-verso {
    width: var(--carta-mao);
    height: var(--carta-mao);
    flex: 0 0 auto;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    background: repeating-linear-gradient(45deg, var(--teal-700) 0 5px, var(--teal-600) 5px 10px);
    border: 1px solid var(--teal-900);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------- Palpite
 * Linha própria acima da mão. Nunca sobrepõe as cartas. */
.slot-palpite:empty { display: none; }

#palpite {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--orange-400);
    border-radius: var(--raio);
    padding: 10px;
    box-shadow: var(--shadow-md);
}

.palpite-rotulo {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
}

#seletor-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.palpite-opcao {
    min-width: 42px;
    height: 42px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--gray-100);
    color: var(--gray-900);
    border: 2px solid var(--gray-200);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .palpite-opcao:hover { border-color: var(--teal-400); background: var(--teal-50); }
}

.palpite-opcao.selected {
    background: var(--teal-600);
    border-color: var(--teal-700);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .25);
}

/* Confirmação nomeada: "Pedir 2" em vez de um ✓ sem contexto. */
.palpite-confirmar {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    background: var(--orange-600);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

.palpite-confirmar:disabled {
    background: var(--gray-200);
    color: var(--gray-500);
    cursor: not-allowed;
}

@media (hover: hover) {
    .palpite-confirmar:not(:disabled):hover { background: var(--orange-700); }
}

/* -------------------------------------------------------- Faixa de avisos */
#faixa-aviso { padding-top: calc(8px + env(safe-area-inset-top)); }

/* ------------------------------------------------------------ Lobby/timer */
#timer-sala {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--orange-600);
    text-align: center;
    padding: 12px;
    background: var(--orange-50);
    border: 1px solid var(--orange-200);
    border-radius: var(--raio);
    font-variant-numeric: tabular-nums;
}

#jogadores-lobby p { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
#jogadores-lobby p:last-child { border-bottom: none; }

#ranking-final p { padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
#ranking-final p:last-child { border-bottom: none; }

/* ------------------------------------------------------------------ Logs */
#logs-container {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--gray-900);
    border-top: 3px solid var(--teal-500);
    padding: 10px 12px calc(64px + env(safe-area-inset-bottom));
    color: var(--gray-200);
    font-size: .78rem;
}

#logs-container p { padding: 3px 0; }
#logs-container p.text-red-600    { color: #fca5a5; }
#logs-container p.text-green-600  { color: #6ee7b7; }
#logs-container p.text-orange-600 { color: var(--orange-400); }
#logs-container p.text-blue-600,
#logs-container p.text-blue-700   { color: #93c5fd; }
#logs-container p.text-purple-600,
#logs-container p.text-purple-700 { color: #c4b5fd; }
#logs-container p.text-yellow-600 { color: #fde047; }
#logs-container p.text-gray-600   { color: var(--gray-400); }

#toggle-logs {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 100;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--gray-800);
    color: #fff;
    font-size: .82rem;
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------- Diversos */

/* Telas largas: a mesa ganha ar, mas a coluna não estica sem limite. */
@media (min-width: 620px) {
    :root { --largura-app: 560px; --carta-mao: 52px; }
    #logs-container { left: auto; right: 0; width: 420px; border-left: 3px solid var(--teal-500); }
}

/* ================================================================= Logs Melhorados */

#logs-container {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--raio);
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    font-family: 'Courier New', monospace;
}

#mensagens {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-entrada {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: white;
    border-left: 3px solid var(--gray-300);
    transition: all 0.2s ease;
}

.log-entrada:hover {
    background: var(--gray-50);
    box-shadow: var(--shadow-sm);
}

.log-timestamp {
    flex-shrink: 0;
    color: var(--gray-500);
    font-weight: 600;
    font-size: 11px;
    min-width: 52px;
    letter-spacing: 0.5px;
}

.log-icone {
    flex-shrink: 0;
    font-size: 14px;
    display: inline-block;
    width: 16px;
    text-align: center;
}

.log-texto {
    flex: 1;
    word-break: break-word;
    color: var(--gray-800);
}

/* Variações por tipo de evento */
.log-sucesso {
    border-left-color: #10b981;
    background: #f0fdf4;
}

.log-sucesso .log-texto {
    color: #065f46;
    font-weight: 500;
}

.log-erro {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.log-erro .log-texto {
    color: #7f1d1d;
    font-weight: 500;
}

.log-aviso {
    border-left-color: var(--orange-500);
    background: var(--orange-50);
}

.log-aviso .log-texto {
    color: #7c2d12;
    font-weight: 500;
}

.log-info {
    border-left-color: var(--teal-500);
    background: var(--teal-50);
}

.log-info .log-texto {
    color: var(--teal-900);
}

.log-empate {
    border-left-color: #eab308;
    background: #fefce8;
}

.log-empate .log-texto {
    color: #713f12;
    font-weight: 500;
}

.log-especial {
    border-left-color: #a855f7;
    background: #faf5ff;
}

.log-especial .log-texto {
    color: #581c87;
    font-weight: 500;
}

.log-default {
    border-left-color: var(--gray-300);
}

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