/*
 * GUIA DO ARQUIVO
 * Este é o CSS central do site: as páginas carregam este arquivo para obter seu visual.
 * Cada declaração termina com um comentário que explica o efeito da propriedade ou variável.
 * As variáveis em :root são os valores compartilhados; ajuste-as para mudar o tema em conjunto.
 * As classes pagina-* identificam telas; os blocos @media adaptam o layout a telas menores.
 * A ordem importa: regras mais abaixo podem ajustar ou substituir regras anteriores.
 */
:root {
    --assinatura-site: "Desenvolvido por Wasly Paumgartten"; /* Texto que o rodapé compartilhado exibe; o JavaScript lê esta variável. */
    --cor-fundo: #f2f5f8; /* Fundo padrão das páginas claras. */
    --cor-superficie: #ffffff; /* Fundo de cartões, formulários e painéis claros. */
    --cor-superficie-secundaria: #e8edf3; /* Fundo secundário para realces leves em páginas claras. */
    --cor-fundo-escuro: #101b2a; /* Fundo principal das telas do jogador e do apresentador. */
    --cor-painel-escuro: #18263a; /* Fundo dos cartões e painéis sobre o tema escuro. */
    --cor-painel-escuro-secundario: #203149; /* Fundo de elementos secundários no tema escuro. */
    --cor-texto: #182b43; /* Cor padrão do texto em páginas claras. */
    --cor-texto-secundario: #52657b; /* Texto auxiliar, legendas e informações de menor destaque. */
    --cor-texto-claro: #f7f9fc; /* Texto claro usado sobre fundos escuros ou primários. */
    --cor-texto-escuro: #15263b; /* Texto escuro de alto contraste em cartões claros. */
    --cor-borda: #cbd5e1; /* Borda padrão de cartões, campos e elementos claros. */
    --cor-borda-escura: #344962; /* Borda de painéis no tema escuro. */
    --cor-primaria: #1d4e78; /* Cor de marca aplicada a ações principais e links. */
    --cor-primaria-hover: #173e62; /* Variação da cor principal quando o ponteiro está sobre o botão. */
    --cor-sucesso: #087443; /* Texto de confirmação em fundos claros. */
    --cor-sucesso-fundo: #e6f4ec; /* Fundo de mensagens de sucesso em páginas claras. */
    --cor-sucesso-telao: #164b35; /* Fundo de feedback positivo na tela do jogador. */
    --cor-sucesso-borda: #58c88a; /* Borda de acerto e destaque de resposta correta. */
    --cor-erro: #b42318; /* Texto de erro em páginas claras. */
    --cor-erro-fundo: #fdebea; /* Fundo de mensagens de erro em páginas claras. */
    --cor-erro-telao: #632d30; /* Fundo de feedback negativo na tela do jogador. */
    --cor-erro-borda: #f08b8d; /* Borda de feedback negativo. */
    --cor-aviso: #8a5b00; /* Cor de texto para avisos e destaque do primeiro lugar. */
    --cor-aviso-fundo: #fff4d2; /* Fundo claro utilizado no destaque do primeiro lugar. */
    --cor-feedback-erro-claro: #ffb4ad; /* Texto de erro legível sobre fundos escuros. */
    --cor-feedback-sucesso-claro: #8de0ad; /* Texto de sucesso legível sobre fundos escuros. */
    --cor-destaque: #e5bd71; /* Cor de destaque para cronômetro, PIN e pontuação. */
    --cor-primeiro-fundo: #fff4d2; /* Fundo da linha do primeiro colocado. */
    --cor-primeiro-borda: #d5a94d; /* Borda da linha do primeiro colocado. */
    --cor-segundo-fundo: #edf1f5; /* Fundo da linha do segundo colocado. */
    --cor-segundo-borda: #aab7c6; /* Borda da linha do segundo colocado. */
    --cor-terceiro-fundo: #fff0e5; /* Fundo da linha do terceiro colocado. */
    --cor-terceiro-borda: #ce8c5a; /* Borda da linha do terceiro colocado. */
    --cor-alternativa-a-fundo: #c8203f; /* Vermelho carmesim da alternativa A (telão e celular). */
    --cor-alternativa-a-texto: #ffffff; /* Texto branco sobre o carmesim. */
    --cor-alternativa-b-fundo: #1f4fd8; /* Azul cobalto da alternativa B (telão e celular). */
    --cor-alternativa-b-texto: #ffffff; /* Texto branco sobre o cobalto. */
    --cor-alternativa-c-fundo: #e0a412; /* Amarelo mostarda da alternativa C (telão e celular). */
    --cor-alternativa-c-texto: #1c1503; /* Texto escuro sobre a mostarda, para manter contraste. */
    --cor-alternativa-d-fundo: #08825a; /* Verde esmeralda da alternativa D (telão e celular). */
    --cor-alternativa-d-texto: #ffffff; /* Texto branco sobre o esmeralda. */
    --cor-qrcode-escura: #000000; /* Cor dos módulos escuros gerados pela biblioteca do QR Code. */
    --cor-qrcode-clara: #ffffff; /* Cor do fundo claro gerado pela biblioteca do QR Code. */
    --cor-transparente: transparent; /* Valor transparente usado em bordas e realces sem preenchimento. */
    --sombra-painel: 0 0.75rem 1.875rem rgb(0 0 0 / 18%); /* Sombra mais forte para separar painéis escuros do fundo. */
    --sombra-clara: 0 0.5rem 1.875rem rgb(15 23 42 / 10%); /* Sombra suave para cartões e superfícies claras. */
    --fonte-principal: "Segoe UI", Arial, sans-serif; /* Família sem serifa usada como tipografia padrão do sistema. */
    --fonte-mono: ui-monospace, Consolas, monospace; /* Família monoespaçada disponível para números ou conteúdo técnico. */
    --peso-regular: 400; /* Peso normal da fonte. */
    --peso-medio: 600; /* Peso intermediário usado em rótulos e textos destacados. */
    --peso-forte: 700; /* Peso negrito usado em títulos e ações importantes. */
    --fonte-pequena: 0.875rem; /* Tamanho para textos auxiliares, navegação e metadados. */
    --fonte-base: 1rem; /* Tamanho padrão do texto corrido. */
    --fonte-media: 1.125rem; /* Tamanho intermediário para mensagens e subtítulos. */
    --fonte-grande: 1.375rem; /* Tamanho maior para destaques e títulos menores. */
    --fonte-titulo: 1.75rem; /* Tamanho padrão dos títulos principais. */
    --fonte-titulo-inicial: clamp(2rem, 5vw, 3.75rem); /* Tamanho fluido do título principal da página inicial. */
    --fonte-titulo-telao: clamp(2rem, 4vw, 4.25rem); /* Tamanho fluido da pergunta apresentada no telão. */
    --fonte-cronometro: clamp(0.875rem, 1.5vw, 1.375rem); /* Tamanho fluido do contador mostrado no telão. */
    --fonte-pin: 2.8rem; /* Tamanho do PIN exibido durante a entrada na partida. */
    --raio-pequeno: 0.4rem; /* Arredondamento discreto para controles compactos. */
    --raio-medio: 0.65rem; /* Arredondamento padrão de campos e cartões. */
    --raio-grande: 0.9rem; /* Arredondamento maior para painéis e cartões principais. */
    --raio-arredondado: 999px; /* Arredondamento em formato de cápsula. */
    --borda-fina: 1px; /* Espessura padrão de bordas. */
    --borda-media: 2px; /* Espessura maior para estados e elementos destacados. */
    --espaco-1: 0.25rem; /* Menor unidade de espaçamento reutilizável. */
    --espaco-2: 0.5rem; /* Espaçamento pequeno reutilizável. */
    --espaco-3: 0.75rem; /* Espaçamento curto para controles e grupos. */
    --espaco-4: 1rem; /* Espaçamento padrão entre elementos. */
    --espaco-5: 1.25rem; /* Espaçamento médio para painéis. */
    --espaco-6: 1.5rem; /* Espaçamento amplo entre seções. */
    --espaco-8: 2rem; /* Espaçamento grande para margens internas e externas. */
    --espaco-10: 2.5rem; /* Espaçamento extra para telas amplas. */
    --espaco-12: 3rem; /* Maior espaçamento disponível para áreas de destaque. */
    --largura-formulario: 45rem; /* Largura máxima padrão das páginas administrativas. */
    --largura-autenticacao: 27rem; /* Largura máxima dos cartões de login e cadastro. */
    --largura-relatorios: 58rem; /* Largura máxima ampliada da tela de relatórios. */
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Faz largura e altura incluírem padding e borda, facilitando calcular dimensões. */
}

html {
    font-family: var(--fonte-principal); /* Escolhe a família tipográfica. */
    color: var(--cor-texto); /* Define a cor do texto. */
    background: var(--cor-fundo); /* Define a cor ou camada de fundo do elemento. */
}

body {
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    font-family: var(--fonte-principal); /* Escolhe a família tipográfica. */
    font-size: var(--fonte-base); /* Define o tamanho do texto. */
    line-height: 1.5; /* Controla a distância vertical entre linhas de texto. */
    color: var(--cor-texto); /* Define a cor do texto. */
    background: var(--cor-fundo); /* Define a cor ou camada de fundo do elemento. */
}

button,
input,
textarea,
select {
    font: inherit; /* Herdar a tipografia do sistema evita estilos diferentes nos controles. */
}

button,
a {
    -webkit-tap-highlight-color: var(--cor-transparente); /* Remove o realce padrão do toque em dispositivos móveis. */
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--borda-media) solid var(--cor-primaria); /* Desenha um contorno externo sem alterar o espaço ocupado pelo elemento. */
    outline-offset: var(--espaco-1); /* Afasta o contorno externo da borda do elemento. */
}

a {
    color: var(--cor-primaria); /* Define a cor do texto. */
}

button {
    cursor: pointer; /* Indica visualmente o tipo de ação disponível ao passar o ponteiro. */
}

button:disabled {
    cursor: wait; /* Indica visualmente o tipo de ação disponível ao passar o ponteiro. */
    opacity: 0.65; /* Controla a transparência visual do elemento. */
}

[hidden] {
    display: none !important; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
}

.mensagem--neutra {
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
}

.mensagem--sucesso {
    color: var(--cor-sucesso); /* Define a cor do texto. */
}

.mensagem--erro {
    color: var(--cor-erro); /* Define a cor do texto. */
}

.nota,
.texto-secundario {
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
}

/* Telas administrativas: largura, títulos, botões, campos e mensagens das páginas protegidas. */
body.pagina-admin {
    width: min(100% - var(--espaco-8), var(--largura-formulario)); /* Define a largura do elemento. */
    margin: var(--espaco-10) auto; /* Controla os espaços externos ao redor do elemento. */
    padding-bottom: var(--espaco-8); /* Define o espaço interno abaixo do conteúdo. */
}

body.pagina-admin h1,
body.pagina-autenticacao h1 {
    margin: 0 0 var(--espaco-4); /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-size: var(--fonte-titulo); /* Define o tamanho do texto. */
    line-height: 1.2; /* Controla a distância vertical entre linhas de texto. */
}

body.pagina-admin h2 {
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
}

body.pagina-admin a,
body.pagina-admin button {
    display: inline-flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: center; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    min-height: 2.75rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin: var(--espaco-2) var(--espaco-2) var(--espaco-2) 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-3) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-pequeno); /* Arredonda os cantos do elemento. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

body.pagina-admin a {
    color: var(--cor-primaria); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-admin button {
    border-color: var(--cor-primaria); /* Altera a cor da borda sem mudar sua espessura. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-primaria); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-admin button:hover {
    background: var(--cor-primaria-hover); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-admin input,
body.pagina-admin textarea,
body.pagina-admin select {
    width: 100%; /* Define a largura do elemento. */
    min-height: 2.75rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin-top: var(--espaco-2); /* Define o espaço externo acima do elemento. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-pequeno); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-admin label {
    display: block; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    margin-top: var(--espaco-4); /* Define o espaço externo acima do elemento. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
}

body.pagina-admin textarea {
    min-height: 7.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    resize: vertical; /* Controla se e como uma área de texto pode ser redimensionada. */
}

body.pagina-admin #mensagem {
    min-height: 1.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin-top: var(--espaco-4); /* Define o espaço externo acima do elemento. */
    white-space: pre-wrap; /* Controla quebras de linha e preservação de espaços. */
}

body.pagina-login,
body.pagina-registro {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    width: 100%; /* Define a largura do elemento. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-6); /* Controla o espaço interno entre conteúdo e borda. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    background: var(--cor-fundo); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-login main,
body.pagina-registro main {
    width: min(100%, var(--largura-autenticacao)); /* Define a largura do elemento. */
    padding: var(--espaco-8); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-clara); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

body.pagina-login main p,
body.pagina-registro main p {
    line-height: 1.6; /* Controla a distância vertical entre linhas de texto. */
}

body.pagina-login label,
body.pagina-registro label {
    margin-top: var(--espaco-4); /* Define o espaço externo acima do elemento. */
}

body.pagina-login input,
body.pagina-registro input {
    width: 100%; /* Define a largura do elemento. */
    min-height: 2.875rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin-top: var(--espaco-2); /* Define o espaço externo acima do elemento. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-login button,
body.pagina-registro button {
    width: 100%; /* Define a largura do elemento. */
    margin-top: var(--espaco-6); /* Define o espaço externo acima do elemento. */
    border: var(--borda-fina) solid var(--cor-primaria); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-primaria); /* Define a cor ou camada de fundo do elemento. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

body.pagina-login button:hover,
body.pagina-registro button:hover {
    background: var(--cor-primaria-hover); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-login #mensagem,
body.pagina-registro #mensagem {
    min-height: var(--espaco-6); /* Impede que o elemento fique menor que a altura indicada. */
    margin-bottom: 0; /* Define o espaço externo abaixo do elemento. */
}

body.pagina-formulario {
    --largura-formulario: 45rem; /* Largura máxima padrão das páginas administrativas. */
}

body.pagina-formulario form > button {
    width: 100%; /* Define a largura do elemento. */
    margin-top: var(--espaco-6); /* Define o espaço externo acima do elemento. */
}

body.pagina-formulario fieldset {
    margin-top: var(--espaco-6); /* Define o espaço externo acima do elemento. */
    padding: var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
}

body.pagina-formulario .opcao-correta {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
    font-weight: var(--peso-regular); /* Define o peso visual da fonte. */
}

body.pagina-formulario .opcao-correta input {
    width: auto; /* Define a largura do elemento. */
    min-height: auto; /* Impede que o elemento fique menor que a altura indicada. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
}

body.pagina-formulario .importacao-perguntas p {
    margin-top: 0; /* Remove o espaço acima do texto explicativo dentro do quadro. */
}

.importacao-perguntas__acoes {
    display: flex; /* Coloca os botões de importar e baixar modelo lado a lado. */
    flex-wrap: wrap; /* Empilha os botões quando a tela for estreita. */
    gap: var(--espaco-2); /* Define o espaço entre os botões. */
}

.importacao-perguntas__acoes button {
    flex: 1 1 12rem; /* Divide a largura entre os botões, com largura mínima confortável. */
}

body.pagina-admin button.botao-secundario {
    border-color: var(--cor-primaria); /* Mantém a borda na cor principal. */
    color: var(--cor-primaria); /* Texto na cor principal sobre fundo claro. */
    background: var(--cor-superficie); /* Fundo claro para diferenciar da ação principal. */
}

body.pagina-admin button.botao-secundario:hover {
    background: var(--cor-superficie-secundaria); /* Realce leve ao passar o ponteiro. */
}

.importacao-perguntas__erros {
    margin: var(--espaco-2) 0 0; /* Separa a lista de erros da mensagem acima. */
    padding: var(--espaco-3) var(--espaco-3) var(--espaco-3) var(--espaco-6); /* Espaço interno com recuo para os marcadores. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do quadro de erros. */
    color: var(--cor-erro); /* Texto em cor de erro. */
    background: var(--cor-erro-fundo); /* Fundo claro de erro. */
    max-height: 16rem; /* Limita a altura quando houver muitas linhas com erro. */
    overflow-y: auto; /* Permite rolar a lista de erros. */
}

.importacao-perguntas__divisor {
    margin-top: var(--espaco-6); /* Separa a importação do cadastro manual. */
    font-weight: var(--peso-medio); /* Destaca levemente o texto divisor. */
}

body.pagina-listagem nav {
    margin: var(--espaco-5) 0; /* Controla os espaços externos ao redor do elemento. */
}

body.pagina-listagem nav a {
    margin-right: var(--espaco-2); /* Define o espaço externo à direita do elemento. */
}

.quiz,
.pergunta,
.partida {
    margin: var(--espaco-4) 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-5); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

.quiz h2,
.pergunta h2,
.partida h2 {
    margin-top: 0; /* Define o espaço externo acima do elemento. */
}

.alternativa {
    margin: var(--espaco-2) 0; /* Controla os espaços externos ao redor do elemento. */
}

body.pagina-perguntas form {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
    align-items: end; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
}

body.pagina-perguntas form label {
    flex: 1 1 11rem; /* Controla crescimento, redução e tamanho base do item Flexbox. */
}

body.pagina-perguntas form button {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
}

body.pagina-perguntas #mensagem,
body.pagina-quizzes #mensagem,
body.pagina-relatorios #mensagem {
    white-space: pre-wrap; /* Controla quebras de linha e preservação de espaços. */
}

body.pagina-partida #resultado {
    margin-top: var(--espaco-6); /* Define o espaço externo acima do elemento. */
    padding: var(--espaco-5); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie-secundaria); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-partida #pin {
    font-size: var(--fonte-pin); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    letter-spacing: 0.12em; /* Controla o espaço entre caracteres. */
}

body.pagina-partida #mensagem {
    white-space: pre-wrap; /* Controla quebras de linha e preservação de espaços. */
}

body.pagina-relatorios {
    --largura-formulario: var(--largura-relatorios); /* Largura máxima padrão das páginas administrativas. */
}

/* Entrada dos participantes: formulário público usado para informar PIN e nome no celular. */
body.pagina-entrada {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    padding: var(--espaco-6); /* Controla o espaço interno entre conteúdo e borda. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-entrada main {
    width: min(100%, 27.5rem); /* Define a largura do elemento. */
    padding: var(--espaco-6); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-painel-escuro); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-painel); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

body.pagina-entrada h1 {
    margin-top: 0; /* Define o espaço externo acima do elemento. */
    font-size: var(--fonte-titulo); /* Define o tamanho do texto. */
}

body.pagina-entrada label {
    display: block; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    margin-top: var(--espaco-4); /* Define o espaço externo acima do elemento. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
}

body.pagina-entrada input,
body.pagina-entrada button {
    width: 100%; /* Define a largura do elemento. */
    min-height: 3rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin-top: var(--espaco-2); /* Define o espaço externo acima do elemento. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
}

body.pagina-entrada input {
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-entrada button {
    margin-top: var(--espaco-5); /* Define o espaço externo acima do elemento. */
    border-color: var(--cor-primaria); /* Altera a cor da borda sem mudar sua espessura. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-primaria); /* Define a cor ou camada de fundo do elemento. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

body.pagina-entrada #mensagem {
    min-height: var(--espaco-6); /* Impede que o elemento fique menor que a altura indicada. */
    white-space: pre-wrap; /* Controla quebras de linha e preservação de espaços. */
}

body.pagina-entrada .mensagem--neutra,
body.pagina-jogador .mensagem--neutra {
    color: var(--cor-texto-claro); /* Define a cor do texto. */
}

body.pagina-entrada .mensagem--erro,
body.pagina-jogador .mensagem--erro {
    color: var(--cor-feedback-erro-claro); /* Define a cor do texto. */
}

body.pagina-entrada .mensagem--sucesso,
body.pagina-jogador .mensagem--sucesso {
    color: var(--cor-feedback-sucesso-claro); /* Define a cor do texto. */
}

/* Tela do jogador: layout mobile-first; mantém cronômetro e quatro respostas acessíveis sem rolagem. */
body.pagina-jogador {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    min-height: 100svh; /* Impede que o elemento fique menor que a altura indicada. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
}

body.pagina-jogador main {
    width: min(100%, 42rem); /* Define a largura do elemento. */
    min-height: calc(100svh - var(--espaco-6)); /* Impede que o elemento fique menor que a altura indicada. */
}

.cartao-jogador {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: inherit; /* Impede que o elemento fique menor que a altura indicada. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    padding: clamp(var(--espaco-4), 4vw, var(--espaco-8)); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-media) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-painel-escuro); /* Define a cor ou camada de fundo do elemento. */
    transition: background-color 0.25s ease, border-color 0.25s ease; /* Suaviza a mudança de uma ou mais propriedades ao longo do tempo. */
}

.cartao-jogador--resultado-acerto {
    border-color: var(--cor-sucesso-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-sucesso-telao); /* Define a cor ou camada de fundo do elemento. */
}

.cartao-jogador--resultado-falha {
    border-color: var(--cor-erro-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-erro-telao); /* Define a cor ou camada de fundo do elemento. */
}

.jogador__identificacao {
    margin: 0 0 var(--espaco-2); /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
}

.jogador__titulo {
    margin: 0 0 var(--espaco-3); /* Controla os espaços externos ao redor do elemento. */
    font-size: clamp(var(--fonte-grande), 5vw, var(--fonte-titulo)); /* Define o tamanho do texto. */
    line-height: 1.2; /* Controla a distância vertical entre linhas de texto. */
}

.jogador__cronometro {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 3rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    margin: 0 0 var(--espaco-4); /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-2) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-destaque); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    font-variant-numeric: tabular-nums; /* Controla a forma dos algarismos para facilitar sua leitura e alinhamento. */
}

.jogador__conteudo {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    min-height: 0; /* Impede que o elemento fique menor que a altura indicada. */
}

.jogador__pergunta {
    margin: 0 0 var(--espaco-4); /* Controla os espaços externos ao redor do elemento. */
    font-size: clamp(var(--fonte-media), 4.2vw, var(--fonte-grande)); /* Define o tamanho do texto. */
    line-height: 1.3; /* Controla a distância vertical entre linhas de texto. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.alternativas-jogador {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define a quantidade e a largura das colunas do Grid. */
    grid-template-rows: repeat(2, minmax(5rem, 1fr)); /* Define a quantidade e a altura das linhas do Grid. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.botao-resposta {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-width: 0; /* Impede que o elemento fique menor que o valor indicado. */
    min-height: 5rem; /* Impede que o elemento fique menor que a altura indicada. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-media) solid var(--cor-transparente); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    font-size: clamp(2rem, 12vw, 3.5rem); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    line-height: 1; /* Controla a distância vertical entre linhas de texto. */
    touch-action: manipulation; /* Ajusta como o navegador interpreta gestos de toque no controle. */
    transition: filter 0.15s ease, transform 0.15s ease; /* Suaviza a mudança de uma ou mais propriedades ao longo do tempo. */
}

.botao-resposta:active:not(:disabled) {
    transform: scale(0.97); /* Aplica uma transformação visual, como o pequeno efeito de pressionar. */
}

.botao-resposta:hover:not(:disabled) {
    filter: brightness(1.08); /* Aplica um efeito visual, neste caso ajustando o brilho no hover. */
}

.botao-resposta:disabled {
    cursor: default; /* Indica visualmente o tipo de ação disponível ao passar o ponteiro. */
    opacity: 0.7; /* Controla a transparência visual do elemento. */
}

.botao-resposta--a,
.opcao-telao--a {
    color: var(--cor-alternativa-a-texto); /* Define a cor do texto. */
    background: var(--cor-alternativa-a-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.botao-resposta--b,
.opcao-telao--b {
    color: var(--cor-alternativa-b-texto); /* Define a cor do texto. */
    background: var(--cor-alternativa-b-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.botao-resposta--c,
.opcao-telao--c {
    color: var(--cor-alternativa-c-texto); /* Define a cor do texto. */
    background: var(--cor-alternativa-c-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.botao-resposta--d,
.opcao-telao--d {
    color: var(--cor-alternativa-d-texto); /* Define a cor do texto. */
    background: var(--cor-alternativa-d-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.jogador__mensagem {
    min-height: var(--espaco-6); /* Impede que o elemento fique menor que a altura indicada. */
    margin: var(--espaco-3) 0 0; /* Controla os espaços externos ao redor do elemento. */
    line-height: 1.4; /* Controla a distância vertical entre linhas de texto. */
}

.feedback-resultado {
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    line-height: 1.5; /* Controla a distância vertical entre linhas de texto. */
}

.link-jogador {
    color: var(--cor-texto-claro); /* Define a cor do texto. */
}

/* Telas de jogador baixas: reduz espaços e altura dos botões para manter tudo visível. */
@media (max-height: 42rem) {
    body.pagina-jogador {
        padding: var(--espaco-2); /* Controla o espaço interno entre conteúdo e borda. */
    }

    body.pagina-jogador main {
        min-height: calc(100svh - var(--espaco-4)); /* Impede que o elemento fique menor que a altura indicada. */
    }

    .cartao-jogador {
        padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    }

    .jogador__titulo {
        margin-bottom: var(--espaco-2); /* Define o espaço externo abaixo do elemento. */
    }

    .jogador__cronometro {
        min-height: 2.5rem; /* Impede que o elemento fique menor que a altura indicada. */
        margin-bottom: var(--espaco-2); /* Define o espaço externo abaixo do elemento. */
    }

    .jogador__pergunta {
        margin-bottom: var(--espaco-2); /* Define o espaço externo abaixo do elemento. */
    }

    .alternativas-jogador {
        gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
        grid-template-rows: repeat(2, minmax(4rem, 1fr)); /* Define a quantidade e a altura das linhas do Grid. */
    }

    .botao-resposta {
        min-height: 4rem; /* Impede que o elemento fique menor que a altura indicada. */
    }
}

/* Apresentador: divide o telão entre controles à esquerda e palco/ranking à direita. */
body.pagina-telao {
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
}

.telao-layout {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr); /* Define a quantidade e a largura das colunas do Grid. */
    gap: var(--espaco-5); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-5); /* Controla o espaço interno entre conteúdo e borda. */
}

.painel-controle {
    position: sticky; /* Define o método de posicionamento do elemento. */
    top: var(--espaco-5); /* Define a distância do topo quando o posicionamento permite deslocamento. */
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    height: calc(100vh - var(--espaco-10)); /* Define a altura do elemento. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    gap: var(--espaco-5); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-5); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-painel-escuro); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-painel); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

.painel-controle__estado {
    color: var(--cor-texto-claro); /* Define a cor do texto. */
}

.painel-controle__titulo {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    font-size: var(--fonte-grande); /* Define o tamanho do texto. */
    line-height: 1.25; /* Controla a distância vertical entre linhas de texto. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.painel-controle__acoes {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    align-content: start; /* Distribui linhas ou grupos de itens no eixo transversal. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.painel-controle__acoes h2 {
    margin: 0 0 var(--espaco-2); /* Controla os espaços externos ao redor do elemento. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
}

.botao-controle {
    width: 100%; /* Define a largura do elemento. */
    min-height: 3.25rem; /* Impede que o elemento fique menor que a altura indicada. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-3) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-painel-escuro-secundario); /* Define a cor ou camada de fundo do elemento. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    text-align: left; /* Alinha o texto dentro do elemento. */
}

.botao-controle:hover:not(:disabled) {
    background: var(--cor-borda-escura); /* Define a cor ou camada de fundo do elemento. */
}

.botao-controle--principal {
    border-color: var(--cor-primaria); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-primaria); /* Define a cor ou camada de fundo do elemento. */
}

.botao-controle--principal:hover:not(:disabled) {
    background: var(--cor-primaria-hover); /* Define a cor ou camada de fundo do elemento. */
}

.botao-controle--encerrar {
    border-color: var(--cor-erro); /* Altera a cor da borda sem mudar sua espessura. */
}

.painel-controle__mensagem {
    min-height: var(--espaco-6); /* Impede que o elemento fique menor que a altura indicada. */
    margin: auto 0 0; /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    white-space: pre-wrap; /* Controla quebras de linha e preservação de espaços. */
}

.palco {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-width: 0; /* Impede que o elemento fique menor que o valor indicado. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    gap: var(--espaco-5); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.painel-telao,
.painel-classificacao,
.cartao-pergunta {
    min-width: 0; /* Impede que o elemento fique menor que o valor indicado. */
    padding: clamp(var(--espaco-4), 2.2vw, var(--espaco-8)); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-painel-escuro); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-painel); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

.entrada-partida {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 16rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: space-between; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    gap: var(--espaco-6); /* Define o espaço entre itens de Flexbox ou Grid. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
}

.entrada-partida__texto {
    flex: 1 1 18rem; /* Controla crescimento, redução e tamanho base do item Flexbox. */
}

.entrada-partida h2,
.painel-classificacao h2,
.podio-final h2 {
    margin-top: 0; /* Define o espaço externo acima do elemento. */
}

.entrada-partida__pin {
    margin: var(--espaco-2) 0; /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-destaque); /* Define a cor do texto. */
    font-size: var(--fonte-pin); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    letter-spacing: 0.12em; /* Controla o espaço entre caracteres. */
}

.entrada-partida__url {
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
}

.qrcode {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    width: 14rem; /* Define a largura do elemento. */
    min-height: 14rem; /* Impede que o elemento fique menor que a altura indicada. */
    flex: 0 0 14rem; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

.qrcode img,
.qrcode canvas {
    max-width: 100%; /* Limita a largura máxima do elemento. */
    height: auto; /* Define a altura do elemento. */
}

.cartao-pergunta {
    text-align: center; /* Alinha o texto dentro do elemento. */
}

.cartao-pergunta__cabecalho {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: space-between; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    gap: var(--espaco-4); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.cartao-pergunta__rotulo {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    letter-spacing: 0.08em; /* Controla o espaço entre caracteres. */
}

.cartao-pergunta__titulo {
    max-width: 65rem; /* Limita a largura máxima do elemento. */
    margin: var(--espaco-5) auto var(--espaco-6); /* Controla os espaços externos ao redor do elemento. */
    font-size: var(--fonte-titulo-telao); /* Define o tamanho do texto. */
    line-height: 1.15; /* Controla a distância vertical entre linhas de texto. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.cartao-pergunta__cronometro {
    display: inline-flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-width: 6rem; /* Impede que o elemento fique menor que o valor indicado. */
    min-height: 2.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: center; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-2) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-arredondado); /* Arredonda os cantos do elemento. */
    color: var(--cor-destaque); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
    font-size: var(--fonte-cronometro); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    font-variant-numeric: tabular-nums; /* Controla a forma dos algarismos para facilitar sua leitura e alinhamento. */
    white-space: nowrap; /* Controla quebras de linha e preservação de espaços. */
}

.alternativas-telao {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define a quantidade e a largura das colunas do Grid. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.opcao-telao {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 6.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    gap: var(--espaco-4); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-media) solid var(--cor-transparente); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    text-align: left; /* Alinha o texto dentro do elemento. */
}

.opcao-telao__letra {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    width: 3.5rem; /* Define a largura do elemento. */
    height: 3.5rem; /* Define a altura do elemento. */
    flex: 0 0 3.5rem; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    place-items: center; /* Alinha os filhos nos eixos horizontal e vertical de um Grid. */
    border: var(--borda-fina) solid currentColor; /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-pequeno); /* Arredonda os cantos do elemento. */
    font-size: var(--fonte-titulo); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

.opcao-telao__texto {
    font-size: clamp(var(--fonte-base), 1.7vw, var(--fonte-grande)); /* Define o tamanho do texto. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.opcao-telao--correta {
    outline: var(--borda-media) solid var(--cor-sucesso-borda); /* Desenha um contorno externo sem alterar o espaço ocupado pelo elemento. */
    outline-offset: var(--espaco-1); /* Afasta o contorno externo da borda do elemento. */
}

.painel-classificacao h2 {
    margin-bottom: var(--espaco-3); /* Define o espaço externo abaixo do elemento. */
}

.lista-ranking {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: 0; /* Controla o espaço interno entre conteúdo e borda. */
    list-style: none; /* Remove ou altera marcadores padrão de listas. */
}

.linha-ranking {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    grid-template-columns: minmax(3rem, auto) minmax(0, 1fr) auto; /* Define a quantidade e a largura das colunas do Grid. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-3) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

.linha-ranking__posicao {
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

.linha-ranking__nome {
    min-width: 0; /* Impede que o elemento fique menor que o valor indicado. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.linha-ranking__pontuacao {
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-variant-numeric: tabular-nums; /* Controla a forma dos algarismos para facilitar sua leitura e alinhamento. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    white-space: nowrap; /* Controla quebras de linha e preservação de espaços. */
}

.linha-ranking--primeiro {
    border-color: var(--cor-primeiro-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-primeiro-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.linha-ranking--segundo {
    border-color: var(--cor-segundo-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-segundo-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.linha-ranking--terceiro {
    border-color: var(--cor-terceiro-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-terceiro-fundo); /* Define a cor ou camada de fundo do elemento. */
}

.linha-ranking--vazio {
    grid-template-columns: 1fr; /* Define a quantidade e a largura das colunas do Grid. */
    font-weight: var(--peso-regular); /* Define o peso visual da fonte. */
}

.podio-final {
    padding: clamp(var(--espaco-5), 5vw, var(--espaco-12)); /* Controla o espaço interno entre conteúdo e borda. */
    text-align: center; /* Alinha o texto dentro do elemento. */
}

.podio-final h2 {
    font-size: clamp(var(--fonte-titulo), 5vw, 4rem); /* Define o tamanho do texto. */
}

.podio-final__lista {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Define a quantidade e a largura das colunas do Grid. */
    align-items: end; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    gap: var(--espaco-4); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.podio__item {
    min-width: 0; /* Impede que o elemento fique menor que o valor indicado. */
    padding: var(--espaco-6) var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-painel-escuro-secundario); /* Define a cor ou camada de fundo do elemento. */
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

.podio__item--primeiro {
    min-height: 13.75rem; /* Impede que o elemento fique menor que a altura indicada. */
    order: 2; /* Muda a ordem visual do item dentro do Flexbox ou Grid. */
    border-color: var(--cor-primeiro-borda); /* Altera a cor da borda sem mudar sua espessura. */
    background: var(--cor-primeiro-fundo); /* Define a cor ou camada de fundo do elemento. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
}

.podio__item--segundo {
    min-height: 11.25rem; /* Impede que o elemento fique menor que a altura indicada. */
    order: 1; /* Muda a ordem visual do item dentro do Flexbox ou Grid. */
}

.podio__item--terceiro {
    min-height: 9.375rem; /* Impede que o elemento fique menor que a altura indicada. */
    order: 3; /* Muda a ordem visual do item dentro do Flexbox ou Grid. */
    border-color: var(--cor-terceiro-borda); /* Altera a cor da borda sem mudar sua espessura. */
}

.podio__posicao {
    display: block; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    margin-bottom: var(--espaco-3); /* Define o espaço externo abaixo do elemento. */
    color: var(--cor-destaque); /* Define a cor do texto. */
    font-size: var(--fonte-grande); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

.podio__item--primeiro .podio__posicao {
    color: var(--cor-aviso); /* Define a cor do texto. */
}

.podio__item h3 {
    overflow-wrap: anywhere; /* Permite quebrar textos longos para evitar que ultrapassem o cartão. */
}

/* Telas médias: empilha controles e palco do apresentador e reorganiza seus controles. */
@media (max-width: 54rem) {
    .telao-layout {
        grid-template-columns: minmax(0, 1fr); /* Define a quantidade e a largura das colunas do Grid. */
        padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    }

    .painel-controle {
        position: static; /* Define o método de posicionamento do elemento. */
        height: auto; /* Define a altura do elemento. */
    }

    .painel-controle__acoes {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define a quantidade e a largura das colunas do Grid. */
    }

    .painel-controle__acoes h2 {
        grid-column: 1 / -1; /* Define em quais colunas do Grid o item será posicionado. */
    }
}

/* Celulares estreitos: coloca alternativas e pódio em uma coluna. */
@media (max-width: 38rem) {
    .painel-controle__acoes,
    .alternativas-telao,
    .podio-final__lista {
        grid-template-columns: minmax(0, 1fr); /* Define a quantidade e a largura das colunas do Grid. */
    }

    .cartao-pergunta__cabecalho {
        align-items: flex-start; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
        flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    }

    .opcao-telao {
        min-height: 5rem; /* Impede que o elemento fique menor que a altura indicada. */
    }

    .podio__item--primeiro,
    .podio__item--segundo,
    .podio__item--terceiro {
        min-height: auto; /* Impede que o elemento fique menor que a altura indicada. */
        order: initial; /* Muda a ordem visual do item dentro do Flexbox ou Grid. */
    }
}

/* Navegação comum, início e rodapé: estilos compartilhados entre as páginas públicas e administrativas. */
body.pagina-admin:not(.pagina-registro) {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    width: 100%; /* Define a largura do elemento. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: 0; /* Controla o espaço interno entre conteúdo e borda. */
}

body.pagina-registro {
    width: 100%; /* Define a largura do elemento. */
}

.topo-admin {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 4.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: space-between; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    gap: var(--espaco-4); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-3) var(--espaco-6); /* Controla o espaço interno entre conteúdo e borda. */
    border-bottom: var(--borda-fina) solid var(--cor-borda); /* Define a borda inferior do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-clara); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

.topo-admin__marca {
    flex: 0 0 auto; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

.navegacao-admin {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: flex-end; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.navegacao-admin a,
.navegacao-admin .formulario-sair button {
    display: inline-flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 2.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: center; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: var(--espaco-2) var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-pequeno); /* Arredonda os cantos do elemento. */
    color: var(--cor-texto); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

.navegacao-admin a:hover,
.navegacao-admin a[aria-current="page"] {
    border-color: var(--cor-primaria); /* Altera a cor da borda sem mudar sua espessura. */
    color: var(--cor-primaria); /* Define a cor do texto. */
    background: var(--cor-superficie-secundaria); /* Define a cor ou camada de fundo do elemento. */
}

.navegacao-admin .formulario-sair {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
}

.navegacao-admin .formulario-sair button {
    cursor: pointer; /* Indica visualmente o tipo de ação disponível ao passar o ponteiro. */
}

.admin-conteudo {
    width: min(100% - var(--espaco-8), var(--largura-formulario)); /* Define a largura do elemento. */
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    align-self: center; /* Substitui o alinhamento transversal definido pelo contêiner para este item. */
    margin: var(--espaco-8) auto; /* Controla os espaços externos ao redor do elemento. */
}

.acoes-cartao-quiz {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
    gap: var(--espaco-2); /* Define o espaço entre itens de Flexbox ou Grid. */
    margin-top: var(--espaco-4); /* Define o espaço externo acima do elemento. */
}

.acoes-cartao-quiz a,
.link-apos-cadastro {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
}

.topo-publico {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 4.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: space-between; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    gap: var(--espaco-4); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-3) clamp(var(--espaco-4), 6vw, var(--espaco-12)); /* Controla o espaço interno entre conteúdo e borda. */
    border-bottom: var(--borda-fina) solid var(--cor-borda); /* Define a borda inferior do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
}

.topo-publico__marca {
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

.topo-publico__links {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
}

.topo-publico__links a {
    display: inline-flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 2.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    padding: var(--espaco-2) var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-pequeno); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    font-weight: var(--peso-medio); /* Define o peso visual da fonte. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

body.pagina-login,
body.pagina-registro {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
    padding: 0; /* Controla o espaço interno entre conteúdo e borda. */
}

body.pagina-login main,
body.pagina-registro main {
    margin: auto; /* Controla os espaços externos ao redor do elemento. */
}

.pagina-inicial {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
}

.inicio-conteudo {
    display: grid; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    width: min(100% - var(--espaco-8), 70rem); /* Define a largura do elemento. */
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    align-self: center; /* Substitui o alinhamento transversal definido pelo contêiner para este item. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr); /* Define a quantidade e a largura das colunas do Grid. */
    gap: var(--espaco-10); /* Define o espaço entre itens de Flexbox ou Grid. */
    padding: var(--espaco-10) 0; /* Controla o espaço interno entre conteúdo e borda. */
}

.inicio-apresentacao__sobretitulo {
    color: var(--cor-primaria); /* Define a cor do texto. */
    font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    letter-spacing: 0.08em; /* Controla o espaço entre caracteres. */
    text-transform: uppercase; /* Controla a transformação visual de maiúsculas e minúsculas. */
}

.inicio-apresentacao h1 {
    max-width: 48rem; /* Limita a largura máxima do elemento. */
    margin: var(--espaco-3) 0 var(--espaco-4); /* Controla os espaços externos ao redor do elemento. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
    font-size: var(--fonte-titulo-inicial); /* Define o tamanho do texto. */
    line-height: 1.08; /* Controla a distância vertical entre linhas de texto. */
}

.inicio-apresentacao > p:not(.inicio-apresentacao__sobretitulo) {
    max-width: 43rem; /* Limita a largura máxima do elemento. */
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
}

.inicio-apresentacao__acoes {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-wrap: wrap; /* Permite que itens Flexbox passem para uma nova linha. */
    gap: var(--espaco-3); /* Define o espaço entre itens de Flexbox ou Grid. */
    margin-top: var(--espaco-6); /* Define o espaço externo acima do elemento. */
}

.botao-inicio {
    display: inline-flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 3rem; /* Impede que o elemento fique menor que a altura indicada. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: center; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    padding: var(--espaco-3) var(--espaco-5); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-medio); /* Arredonda os cantos do elemento. */
    color: var(--cor-primaria); /* Define a cor do texto. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

.botao-inicio--principal {
    border-color: var(--cor-primaria); /* Altera a cor da borda sem mudar sua espessura. */
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-primaria); /* Define a cor ou camada de fundo do elemento. */
}

.inicio-acesso-jogador {
    padding: var(--espaco-6); /* Controla o espaço interno entre conteúdo e borda. */
    border: var(--borda-fina) solid var(--cor-borda); /* Define espessura, estilo e cor da borda. */
    border-radius: var(--raio-grande); /* Arredonda os cantos do elemento. */
    background: var(--cor-superficie); /* Define a cor ou camada de fundo do elemento. */
    box-shadow: var(--sombra-clara); /* Adiciona sombra para separar visualmente o elemento do fundo. */
}

.inicio-acesso-jogador h2 {
    margin-top: 0; /* Define o espaço externo acima do elemento. */
    color: var(--cor-texto-escuro); /* Define a cor do texto. */
}

.inicio-acesso-jogador p {
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
}

.rodape-site {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    min-height: 2.5rem; /* Impede que o elemento fique menor que a altura indicada. */
    flex: 0 0 auto; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: center; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    padding: var(--espaco-2) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    color: var(--cor-texto-secundario); /* Define a cor do texto. */
    background: var(--cor-fundo); /* Define a cor ou camada de fundo do elemento. */
    font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    text-align: center; /* Alinha o texto dentro do elemento. */
}

.pagina-entrada,
.pagina-jogador,
.pagina-telao {
    display: flex !important; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
}

.pagina-entrada main,
.pagina-jogador main {
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    align-self: center; /* Substitui o alinhamento transversal definido pelo contêiner para este item. */
}

.pagina-entrada .rodape-site,
.pagina-jogador .rodape-site,
.pagina-telao .rodape-site {
    color: var(--cor-texto-claro); /* Define a cor do texto. */
    background: var(--cor-fundo-escuro); /* Define a cor ou camada de fundo do elemento. */
}

.pagina-jogador {
    height: 100vh; /* Define a altura do elemento. */
    height: 100svh; /* Define a altura do elemento. */
    min-height: 0; /* Impede que o elemento fique menor que a altura indicada. */
}

.pagina-jogador main {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    width: min(100%, 42rem); /* Define a largura do elemento. */
    min-height: 0; /* Impede que o elemento fique menor que a altura indicada. */
    flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    padding: var(--espaco-3); /* Controla o espaço interno entre conteúdo e borda. */
}

.pagina-jogador .cartao-jogador {
    min-height: 0; /* Impede que o elemento fique menor que a altura indicada. */
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
}

.resultado-final__titulo {
    margin: var(--espaco-4) 0 var(--espaco-2); /* Controla os espaços externos ao redor do elemento. */
    font-size: var(--fonte-titulo); /* Define o tamanho do texto. */
}

.resultado-final__elogio {
    color: var(--cor-feedback-sucesso-claro); /* Define a cor do texto. */
    font-size: var(--fonte-grande); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

.resultado-final__posicao {
    margin-top: var(--espaco-5); /* Define o espaço externo acima do elemento. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
}

.resultado-final__pontuacao {
    color: var(--cor-destaque); /* Define a cor do texto. */
    font-size: var(--fonte-media); /* Define o tamanho do texto. */
    font-weight: var(--peso-forte); /* Define o peso visual da fonte. */
}

.pagina-telao {
    min-height: 100vh; /* Impede que o elemento fique menor que a altura indicada. */
}

.pagina-telao .telao-layout {
    flex: 1; /* Controla crescimento, redução e tamanho base do item Flexbox. */
    min-height: 0; /* Impede que o elemento fique menor que a altura indicada. */
}

.botao-controle--link {
    display: flex; /* Escolhe o modelo de layout e a forma como os filhos são organizados. */
    align-items: center; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
    justify-content: flex-start; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    text-decoration: none; /* Controla decoração do texto, como o sublinhado de links. */
}

.painel-controle__acoes--final a {
    margin: 0; /* Controla os espaços externos ao redor do elemento. */
}

/* Telas menores: reorganiza o cabeçalho administrativo para a navegação caber. */
@media (max-width: 58rem) {
    .topo-admin {
        align-items: flex-start; /* Alinha os filhos no eixo transversal do Flexbox ou Grid. */
        flex-direction: column; /* Define se os itens Flexbox ficam em linha ou em coluna. */
    }

    .navegacao-admin {
        justify-content: flex-start; /* Distribui os filhos ao longo do eixo principal do Flexbox ou Grid. */
    }
}

/* Celulares: reduz espaços da navegação e transforma atalhos e página inicial em uma coluna. */
@media (max-width: 42rem) {
    .topo-admin,
    .topo-publico {
        padding: var(--espaco-3) var(--espaco-4); /* Controla o espaço interno entre conteúdo e borda. */
    }

    .navegacao-admin a,
    .navegacao-admin .formulario-sair button {
        min-height: 2.25rem; /* Impede que o elemento fique menor que a altura indicada. */
        padding: var(--espaco-2); /* Controla o espaço interno entre conteúdo e borda. */
        font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    }

    .admin-conteudo {
        width: min(100% - var(--espaco-6), var(--largura-formulario)); /* Define a largura do elemento. */
    }

    .inicio-conteudo {
        grid-template-columns: minmax(0, 1fr); /* Define a quantidade e a largura das colunas do Grid. */
    }

    .inicio-conteudo {
        gap: var(--espaco-6); /* Define o espaço entre itens de Flexbox ou Grid. */
        padding: var(--espaco-8) 0; /* Controla o espaço interno entre conteúdo e borda. */
    }

    .topo-publico__links {
        gap: var(--espaco-1); /* Define o espaço entre itens de Flexbox ou Grid. */
    }

    .topo-publico__links a {
        padding: var(--espaco-2); /* Controla o espaço interno entre conteúdo e borda. */
        font-size: var(--fonte-pequena); /* Define o tamanho do texto. */
    }
}

/* =============================================================================
   ÁREA ADMINISTRATIVA — TEMA ESCURO NO ESTILO DA TELA DO APRESENTADOR
   Vale para todas as páginas do admin (exceto login e cadastro). O layout.js
   adiciona a classe .pagina-painel ao body e monta:
     .admin-layout > .admin-menu (menu lateral) + .admin-palco (conteúdo)
   Nas páginas internas o conteúdo fica dentro de um .admin-painel.
   Usa as mesmas cores, bordas, raios e sombras de .painel-controle e .painel-telao.
   ============================================================================= */
:root {
    --admin-fonte: "Inter", var(--fonte-principal); /* Tipografia sem serifa; cai para Segoe UI sem a Inter. */
    --admin-menu-largura: 16.5rem; /* Largura do menu lateral em telas de computador. */
    --admin-texto-apoio: #a9b8ca; /* Cinza-azulado legível para textos de apoio sobre fundo escuro. */
    --admin-texto-rotulo: #7d8ea5; /* Tom mais discreto para rótulos pequenos. */
    --admin-campo-fundo: var(--cor-fundo-escuro); /* Fundo dos campos de formulário. */
    --admin-campo-foco: #5b8fc7; /* Borda dos campos em foco. */
    --admin-realce: var(--cor-destaque); /* Dourado do PIN e do cronômetro, usado como destaque. */
    --admin-elevacao-hover: -3px; /* Quanto os cartões sobem ao receber o ponteiro. */
    --admin-transicao: 180ms ease; /* Duração e curva das animações. */
    --admin-largura-conteudo: 64rem; /* Largura máxima dos painéis de conteúdo. */
}

/* Estrutura ------------------------------------------------------------------- */

body.pagina-admin.pagina-painel {
    width: auto; /* Desfaz a largura de formulário das regras antigas do admin. */
    margin: 0; /* Remove a margem centralizada antiga. */
    padding: 0; /* Remove o espaço inferior antigo. */
    font-family: var(--admin-fonte); /* Tipografia do painel. */
    color: var(--cor-texto-claro); /* Texto claro, como no apresentador. */
    background: var(--cor-fundo-escuro); /* Fundo azul-noite, como no apresentador. */
}

.admin-layout {
    display: grid; /* Menu e conteúdo lado a lado, como .telao-layout. */
    grid-template-columns: var(--admin-menu-largura) minmax(0, 1fr); /* Menu fixo e conteúdo flexível. */
    gap: var(--espaco-5); /* Mesmo espaço entre painéis do apresentador. */
    min-height: calc(100vh - 2.5rem); /* Ocupa a tela, descontando o rodapé. */
    padding: var(--espaco-5); /* Mesma margem externa do apresentador. */
}

/* Menu lateral (mesmo visual de .painel-controle) ------------------------------ */

.admin-menu {
    position: sticky; /* Fica visível enquanto o conteúdo rola. */
    top: var(--espaco-5); /* Distância do topo da janela. */
    display: flex; /* Empilha marca, menu e botão de sair. */
    flex-direction: column; /* De cima para baixo. */
    height: calc(100vh - var(--espaco-10)); /* Altura da janela menos as margens. */
    padding: var(--espaco-5) var(--espaco-4); /* Espaço interno. */
    overflow-y: auto; /* Rola o menu em janelas muito baixas. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Mesma borda do painel do apresentador. */
    border-radius: var(--raio-grande); /* Mesmos cantos arredondados. */
    background: var(--cor-painel-escuro); /* Mesmo fundo do painel do apresentador. */
    box-shadow: var(--sombra-painel); /* Mesma sombra. */
}

.pagina-painel .admin-menu__marca {
    display: flex; /* Logo e nome lado a lado. */
    justify-content: flex-start; /* Encosta à esquerda. */
    gap: var(--espaco-3); /* Espaço entre logo e nome. */
    min-height: auto; /* Desfaz a altura de botão das regras antigas. */
    margin: 0 0 var(--espaco-5); /* Separa a marca do menu. */
    padding: 0 var(--espaco-2) var(--espaco-5); /* Espaço para a divisória. */
    border: 0; /* Remove a borda antiga de link. */
    border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória abaixo da marca. */
    border-radius: 0; /* Sem cantos arredondados. */
    color: var(--cor-texto-claro); /* Nome em branco. */
    background: none; /* Remove o fundo branco antigo de link. */
    font-size: var(--fonte-media); /* Tamanho do nome. */
    font-weight: var(--peso-forte); /* Nome em negrito. */
}

.admin-menu__logo {
    flex: 0 0 auto; /* Impede que o logo encolha. */
    width: 2.25rem; /* Largura do logo. */
    height: 2.25rem; /* Altura do logo. */
    color: var(--admin-realce); /* Logo dourado, como o PIN do apresentador. */
}

.admin-menu__rotulo {
    margin: 0 0 var(--espaco-2) var(--espaco-3); /* Alinhado ao texto dos itens. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: var(--peso-medio); /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo em maiúsculas. */
}

.admin-menu__navegacao {
    display: flex; /* Lista de itens. */
    flex-direction: column; /* Um abaixo do outro. */
    gap: var(--espaco-1); /* Pequeno espaço entre itens. */
}

.pagina-painel .admin-menu__link,
.pagina-painel .admin-menu__sair {
    display: flex; /* Ícone e texto lado a lado. */
    justify-content: flex-start; /* Encosta à esquerda. */
    gap: var(--espaco-3); /* Espaço entre ícone e texto. */
    width: 100%; /* Ocupa a largura do menu. */
    min-height: 2.75rem; /* Área de clique confortável. */
    margin: 0; /* Remove margens antigas. */
    padding: var(--espaco-2) var(--espaco-3); /* Espaço interno. */
    border: var(--borda-fina) solid transparent; /* Reserva a borda para o estado ativo. */
    border-radius: var(--raio-medio); /* Mesmos cantos de .botao-controle. */
    color: var(--admin-texto-apoio); /* Texto em repouso. */
    background: transparent; /* Sem fundo em repouso. */
    font-family: inherit; /* Mesma fonte no botão de sair. */
    font-size: 0.9375rem; /* Tamanho do texto do menu. */
    font-weight: 500; /* Peso médio. */
    text-align: left; /* Texto à esquerda. */
    transition: background-color var(--admin-transicao), color var(--admin-transicao); /* Suaviza o hover. */
}

.pagina-painel .admin-menu__link:hover,
.pagina-painel .admin-menu__sair:hover {
    color: var(--cor-texto-claro); /* Texto branco sob o ponteiro. */
    background: var(--cor-painel-escuro-secundario); /* Mesmo fundo de .botao-controle. */
}

.pagina-painel .admin-menu__link--ativo,
.pagina-painel .admin-menu__link--ativo:hover {
    border-color: var(--cor-borda-escura); /* Contorno do item atual. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-painel-escuro-secundario); /* Fundo do item atual. */
    box-shadow: inset 3px 0 0 var(--admin-realce); /* Faixa dourada à esquerda. */
}

.admin-menu__link svg,
.admin-menu__sair svg {
    flex: 0 0 auto; /* Impede que o ícone encolha. */
    width: 1.25rem; /* Largura do ícone. */
    height: 1.25rem; /* Altura do ícone. */
    fill: none; /* Ícone de contorno. */
    stroke: currentColor; /* Acompanha a cor do texto. */
    stroke-width: 1.75; /* Espessura do traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.pagina-painel .admin-menu__rodape {
    margin: auto 0 0; /* Empurra o botão de sair para o fim do menu. */
    padding-top: var(--espaco-4); /* Espaço acima do botão. */
    border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória. */
}

.pagina-painel .admin-menu__sair:hover {
    border-color: var(--cor-erro); /* Borda vermelha, como .botao-controle--encerrar. */
}

/* Conteúdo --------------------------------------------------------------------- */

.admin-palco {
    display: flex; /* Painéis empilhados, como .palco. */
    min-width: 0; /* Evita estouro horizontal. */
    flex-direction: column; /* De cima para baixo. */
    gap: var(--espaco-5); /* Espaço entre painéis. */
}

.admin-palco > * {
    width: 100%; /* Ocupa a largura disponível... */
    max-width: var(--admin-largura-conteudo); /* ...sem linhas longas demais em monitores largos. */
}

.admin-painel {
    padding: clamp(var(--espaco-5), 2.2vw, var(--espaco-8)); /* Mesmo espaço interno de .painel-telao. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Mesma borda. */
    border-radius: var(--raio-grande); /* Mesmos cantos. */
    background: var(--cor-painel-escuro); /* Mesmo fundo. */
    box-shadow: var(--sombra-painel); /* Mesma sombra. */
}

body.pagina-painel h1 {
    margin: 0 0 var(--espaco-3); /* Espaço abaixo do título. */
    color: var(--cor-texto-claro); /* Título branco. */
    font-size: var(--fonte-titulo); /* Tamanho do título. */
    letter-spacing: -0.01em; /* Visual refinado. */
}

body.pagina-painel h2,
body.pagina-painel h3 {
    color: var(--cor-texto-claro); /* Subtítulos brancos. */
}

.pagina-painel .admin-painel p {
    color: var(--admin-texto-apoio); /* Textos de apoio em cinza-azulado. */
}

body.pagina-painel label {
    color: var(--cor-texto-claro); /* Rótulos dos campos em branco. */
}

body.pagina-painel input,
body.pagina-painel textarea,
body.pagina-painel select {
    border-color: var(--cor-borda-escura); /* Borda escura. */
    border-radius: var(--raio-medio); /* Cantos como os botões do apresentador. */
    color: var(--cor-texto-claro); /* Texto digitado em branco. */
    background: var(--admin-campo-fundo); /* Campo mais escuro que o painel. */
    font-family: inherit; /* Mesma fonte do painel. */
}

body.pagina-painel input:focus,
body.pagina-painel textarea:focus,
body.pagina-painel select:focus {
    border-color: var(--admin-campo-foco); /* Destaca o campo em foco. */
}

body.pagina-painel select option {
    color: var(--cor-texto-claro); /* Opções legíveis... */
    background: var(--cor-painel-escuro); /* ...sobre fundo escuro. */
}

body.pagina-painel input[type="radio"] {
    accent-color: var(--admin-realce); /* Botão de opção dourado. */
}

body.pagina-painel fieldset {
    border-color: var(--cor-borda-escura); /* Quadros com borda escura. */
}

body.pagina-painel legend {
    padding: 0 var(--espaco-2); /* Respiro ao redor da legenda. */
    color: var(--cor-texto-claro); /* Legenda em branco. */
    font-weight: var(--peso-medio); /* Leve destaque. */
}

/* Botões e links de ação: botão principal azul, como .botao-controle--principal. */
body.pagina-painel .admin-painel button {
    border-color: var(--cor-primaria); /* Borda azul. */
    border-radius: var(--raio-medio); /* Cantos do apresentador. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-primaria); /* Fundo azul. */
    font-family: inherit; /* Mesma fonte. */
}

body.pagina-painel .admin-painel button:hover:not(:disabled) {
    background: var(--cor-primaria-hover); /* Azul mais escuro no hover. */
}

/* Links de ação: botão secundário escuro, como .botao-controle. */
body.pagina-painel .admin-painel a {
    border-color: var(--cor-borda-escura); /* Borda escura. */
    border-radius: var(--raio-medio); /* Cantos do apresentador. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-painel-escuro-secundario); /* Fundo de .botao-controle. */
}

body.pagina-painel .admin-painel a:hover {
    background: var(--cor-borda-escura); /* Mesmo hover de .botao-controle. */
}

body.pagina-painel .admin-painel .btn-secundario,
body.pagina-painel .admin-painel .botao-secundario {
    border-color: var(--cor-borda-escura); /* Borda escura. */
    background: var(--cor-painel-escuro-secundario); /* Botão secundário escuro. */
}

body.pagina-painel .admin-painel .btn-secundario:hover:not(:disabled),
body.pagina-painel .admin-painel .botao-secundario:hover:not(:disabled) {
    background: var(--cor-borda-escura); /* Hover do botão secundário. */
}

body.pagina-painel .btn-perigo,
body.pagina-painel .admin-painel .btn-perigo {
    border-color: var(--cor-erro); /* Borda vermelha. */
    background: transparent; /* Vermelho só no contorno, como "Encerrar Quiz". */
}

body.pagina-painel .btn-perigo:hover:not(:disabled),
body.pagina-painel .admin-painel .btn-perigo:hover:not(:disabled) {
    background: var(--cor-erro); /* Preenche de vermelho no hover. */
}

/* Mensagens de retorno sobre fundo escuro. */
body.pagina-painel .mensagem--neutra {
    color: var(--admin-texto-apoio); /* Mensagem neutra. */
}

body.pagina-painel .mensagem--sucesso {
    color: var(--cor-feedback-sucesso-claro); /* Verde claro legível no escuro. */
}

body.pagina-painel .mensagem--erro,
body.pagina-painel .mensagem-erro,
body.pagina-painel .feedback-erro {
    color: var(--cor-feedback-erro-claro); /* Vermelho claro legível no escuro. */
}

/* Cartões das listagens (quizzes, perguntas e partidas). */
body.pagina-painel .quiz,
body.pagina-painel .pergunta,
body.pagina-painel .partida {
    border-color: var(--cor-borda-escura); /* Borda escura. */
    border-radius: var(--raio-medio); /* Cantos arredondados. */
    background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
}

/* Dentro dos cartões, os botões secundários usam o tom do painel para se destacarem do cartão. */
body.pagina-painel .admin-painel .quiz a,
body.pagina-painel .admin-painel .partida a,
body.pagina-painel .admin-painel .quiz .btn-secundario {
    background: var(--cor-painel-escuro); /* Um tom abaixo do cartão. */
}

body.pagina-painel .admin-painel .quiz a:hover,
body.pagina-painel .admin-painel .partida a:hover,
body.pagina-painel .admin-painel .quiz .btn-secundario:hover:not(:disabled) {
    background: var(--cor-borda-escura); /* Mesmo hover de .botao-controle. */
}

.pagina-painel .admin-painel .quiz-data {
    color: var(--admin-texto-rotulo); /* Data em tom discreto. */
    font-size: var(--fonte-pequena); /* Texto menor. */
}

.pagina-painel .admin-painel .alternativa {
    padding: var(--espaco-2) var(--espaco-3); /* Espaço interno da alternativa. */
    border-radius: var(--raio-pequeno); /* Cantos discretos. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-fundo-escuro); /* Faixa escura para cada alternativa. */
}

.acoes-gestao-quiz,
.form-edicao-botoes,
.dialogo-acoes {
    display: flex; /* Botões lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-2); /* Espaço entre botões. */
}

.pagina-painel .acoes-gestao-quiz button,
.pagina-painel .form-edicao-botoes button,
.pagina-painel .dialogo-acoes button {
    margin: 0; /* O espaçamento vem do gap. */
}

.form-edicao-quiz {
    margin-top: var(--espaco-4); /* Separa o formulário de edição do cartão. */
    padding-top: var(--espaco-4); /* Espaço acima dos campos. */
    border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória. */
}

/* Diálogo de exclusão. */
body.pagina-painel dialog {
    width: min(100% - var(--espaco-8), 28rem); /* Largura do diálogo. */
    padding: var(--espaco-6); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda escura. */
    border-radius: var(--raio-grande); /* Cantos do apresentador. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-painel-escuro); /* Fundo do painel. */
    box-shadow: var(--sombra-painel); /* Sombra do painel. */
}

body.pagina-painel dialog h2 {
    margin-top: 0; /* Remove o espaço acima do título. */
}

body.pagina-painel dialog p {
    color: var(--admin-texto-apoio); /* Texto de apoio. */
}

body.pagina-painel dialog::backdrop {
    background: rgb(0 0 0 / 60%); /* Escurece a página atrás do diálogo. */
}

/* Iniciar partida: PIN em dourado, como no telão. */
body.pagina-painel.pagina-partida #resultado {
    border-color: var(--cor-borda-escura); /* Borda escura. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro que o painel. */
}

body.pagina-painel.pagina-partida #pin {
    color: var(--admin-realce); /* PIN dourado. */
}

/* Importação de perguntas pelo Excel. */
.pagina-painel .importacao-perguntas__erros {
    color: var(--cor-feedback-erro-claro); /* Erros em vermelho claro. */
    background: var(--cor-erro-telao); /* Fundo vermelho escuro do apresentador. */
}

/* Painel inicial (dashboard) --------------------------------------------------- */

.dashboard__cabecalho {
    display: flex; /* Saudação à esquerda e usuário à direita. */
    align-items: flex-start; /* Alinha pelo topo. */
    justify-content: space-between; /* Afasta os blocos. */
    gap: var(--espaco-6); /* Espaço mínimo entre os blocos. */
    padding: clamp(var(--espaco-5), 2.2vw, var(--espaco-8)); /* Mesmo espaço de .painel-telao. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Mesma borda. */
    border-radius: var(--raio-grande); /* Mesmos cantos. */
    background: var(--cor-painel-escuro); /* Mesmo fundo. */
    box-shadow: var(--sombra-painel); /* Mesma sombra. */
}

.dashboard__sobretitulo {
    margin: 0 0 var(--espaco-2); /* Espaço acima do título. */
    color: var(--admin-realce); /* Rótulo dourado, como "RESULTADO FINAL" no telão. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: var(--peso-medio); /* Leve destaque. */
    letter-spacing: 0.1em; /* Espaçamento de rótulo em maiúsculas. */
}

body.pagina-painel .dashboard__titulo {
    margin: 0 0 var(--espaco-2); /* Espaço entre título e descrição. */
    font-size: clamp(1.75rem, 2.5vw, 2.25rem); /* Tamanho fluido da saudação. */
    line-height: 1.2; /* Linhas compactas. */
    letter-spacing: -0.02em; /* Visual elegante. */
}

.dashboard__descricao,
.dashboard__secao-descricao {
    margin: 0; /* Remove margens padrão. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
}

.dashboard__perfil {
    display: inline-flex; /* Inicial e nome lado a lado. */
    flex: 0 0 auto; /* Não encolhe. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre inicial e nome. */
    padding: 0.375rem var(--espaco-4) 0.375rem 0.375rem; /* Cápsula. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Contorno escuro. */
    border-radius: var(--raio-arredondado); /* Formato de cápsula. */
    background: var(--cor-painel-escuro-secundario); /* Fundo um tom acima. */
    font-size: var(--fonte-pequena); /* Texto compacto. */
    font-weight: var(--peso-medio); /* Nome destacado. */
    white-space: nowrap; /* Nome em uma linha. */
}

.dashboard__perfil-inicial {
    display: grid; /* Centraliza a letra. */
    place-items: center; /* Centro. */
    width: 2rem; /* Diâmetro. */
    height: 2rem; /* Diâmetro. */
    border-radius: 50%; /* Círculo. */
    color: var(--cor-fundo-escuro); /* Letra escura... */
    background: var(--admin-realce); /* ...sobre dourado. */
    font-weight: var(--peso-forte); /* Negrito. */
}

.dashboard__secao-cabecalho {
    margin: var(--espaco-2) 0 var(--espaco-4); /* Espaço ao redor do título da seção. */
}

body.pagina-painel .dashboard__secao-titulo {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço abaixo. */
    font-size: var(--fonte-media); /* Tamanho do título da seção. */
}

.atalhos-admin {
    display: grid; /* Grade de cartões. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas no desktop. */
    gap: var(--espaco-5); /* Mesmo espaço entre painéis do apresentador. */
}

.cartao-atalho {
    display: flex; /* Empilha ícone, título, texto e botão. */
    flex-direction: column; /* De cima para baixo. */
    padding: var(--espaco-6); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Mesma borda de .painel-telao. */
    border-radius: var(--raio-grande); /* Mesmos cantos. */
    background: var(--cor-painel-escuro); /* Mesmo fundo. */
    box-shadow: var(--sombra-painel); /* Mesma sombra. */
    transition: transform var(--admin-transicao), border-color var(--admin-transicao); /* Suaviza o hover. */
}

.cartao-atalho:hover {
    transform: translateY(var(--admin-elevacao-hover)); /* Cartão sobe levemente. */
    border-color: var(--admin-campo-foco); /* Contorno azul-claro no hover. */
}

.cartao-atalho__icone {
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    width: 3rem; /* Largura do quadrado. */
    height: 3rem; /* Altura do quadrado. */
    margin-bottom: var(--espaco-5); /* Espaço até o título. */
    border-radius: var(--raio-medio); /* Cantos. */
    color: var(--admin-realce); /* Ícone dourado. */
    background: var(--cor-painel-escuro-secundario); /* Fundo um tom acima. */
}

.cartao-atalho__icone svg,
.cartao-atalho__link svg {
    fill: none; /* Ícone de contorno. */
    stroke: currentColor; /* Acompanha a cor definida. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.cartao-atalho__icone svg {
    width: 1.5rem; /* Largura do ícone. */
    height: 1.5rem; /* Altura do ícone. */
    stroke-width: 1.75; /* Espessura do traço. */
}

body.pagina-painel .cartao-atalho__titulo {
    margin: 0 0 var(--espaco-2); /* Espaço até a descrição. */
    font-size: var(--fonte-media); /* Tamanho do título. */
}

.cartao-atalho__descricao {
    flex: 1 1 auto; /* Empurra o botão para baixo, alinhando cartões vizinhos. */
    margin: 0 0 var(--espaco-5); /* Espaço até o botão. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.9375rem; /* Levemente menor. */
    line-height: 1.6; /* Leitura confortável. */
}

.pagina-painel .cartao-atalho__link {
    display: flex; /* Texto e seta lado a lado. */
    justify-content: center; /* Centralizado. */
    gap: var(--espaco-2); /* Espaço até a seta. */
    width: 100%; /* Largura do cartão. */
    min-height: 3.25rem; /* Mesma altura de .botao-controle. */
    margin: 0; /* Remove margens antigas. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-primaria); /* Borda azul. */
    border-radius: var(--raio-medio); /* Cantos de .botao-controle. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--cor-primaria); /* Azul, como .botao-controle--principal. */
    font-weight: var(--peso-medio); /* Rótulo destacado. */
    transition: background-color var(--admin-transicao); /* Suaviza o hover. */
}

.pagina-painel .cartao-atalho__link:hover {
    background: var(--cor-primaria-hover); /* Azul mais escuro. */
}

.cartao-atalho__link svg {
    width: 1.125rem; /* Largura da seta. */
    height: 1.125rem; /* Altura da seta. */
    stroke-width: 2; /* Traço mais forte para o tamanho pequeno. */
    transition: transform var(--admin-transicao); /* Suaviza o movimento. */
}

.cartao-atalho__link:hover svg {
    transform: translateX(3px); /* A seta avança levemente. */
}

/* Rodapé compartilhado sobre o fundo escuro. */
.pagina-painel .rodape-site {
    color: var(--admin-texto-rotulo); /* Texto discreto. */
    background: var(--cor-fundo-escuro); /* Mesmo fundo da página. */
}

/* Telas médias: menu vira barra superior com itens roláveis. */
@media (max-width: 58rem) {
    .admin-layout {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
    }

    .admin-menu {
        position: static; /* Entra no fluxo da página. */
        flex-direction: row; /* Marca e sair lado a lado. */
        flex-wrap: wrap; /* Menu na linha de baixo. */
        align-items: center; /* Alinha verticalmente. */
        gap: var(--espaco-3); /* Espaço entre blocos. */
        height: auto; /* Altura do conteúdo. */
        padding: var(--espaco-3) var(--espaco-4); /* Barra compacta. */
        overflow: visible; /* Sem rolagem própria. */
    }

    .pagina-painel .admin-menu__marca {
        margin: 0; /* Sem espaço inferior. */
        padding: 0; /* Sem espaço da divisória. */
        border-bottom: 0; /* Sem divisória. */
    }

    .admin-menu__rotulo {
        display: none; /* Desnecessário na barra horizontal. */
    }

    .admin-menu__navegacao {
        order: 3; /* Abaixo da marca e do sair. */
        flex-direction: row; /* Itens lado a lado. */
        width: 100%; /* Linha inteira. */
        overflow-x: auto; /* Rola na horizontal, sem quebrar a página. */
        scrollbar-width: none; /* Esconde a barra no Firefox. */
    }

    .pagina-painel .admin-menu__link {
        width: auto; /* Largura do texto. */
        white-space: nowrap; /* Texto em uma linha. */
    }

    .pagina-painel .admin-menu__link--ativo,
    .pagina-painel .admin-menu__link--ativo:hover {
        box-shadow: inset 0 -3px 0 var(--admin-realce); /* Faixa dourada embaixo. */
    }

    .pagina-painel .admin-menu__rodape {
        margin: 0 0 0 auto; /* Sair à direita. */
        padding: 0; /* Sem espaço extra. */
        border-top: 0; /* Sem divisória. */
    }

    .pagina-painel .admin-menu__sair {
        width: auto; /* Largura do conteúdo. */
    }
}

/* Celulares: margens de 12–16px, cabeçalho empilhado e uma coluna de cartões. */
@media (max-width: 40rem) {
    .admin-layout {
        gap: var(--espaco-3); /* Menos espaço entre painéis. */
        padding: var(--espaco-3); /* Margem externa menor. */
    }

    .admin-painel,
    .dashboard__cabecalho,
    .cartao-atalho {
        padding: var(--espaco-5) var(--espaco-4); /* Espaço interno menor. */
    }

    .dashboard__cabecalho {
        flex-direction: column-reverse; /* Usuário acima da saudação. */
        gap: var(--espaco-4); /* Espaço entre os blocos. */
    }

    .dashboard__perfil {
        max-width: 100%; /* Não ultrapassa a tela. */
    }

    .dashboard__perfil > span:last-child {
        overflow: hidden; /* Corta nomes longos... */
        text-overflow: ellipsis; /* ...com reticências. */
    }

    .atalhos-admin {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
        gap: var(--espaco-3); /* Espaço menor. */
    }

    .admin-menu__sair span {
        position: absolute; /* Esconde "Sair da conta" visualmente... */
        width: 1px; /* ...mantendo o texto para leitores de tela. */
        height: 1px; /* Tamanho mínimo. */
        overflow: hidden; /* Oculta o conteúdo. */
        clip: rect(0 0 0 0); /* Recorta o texto. */
        white-space: nowrap; /* Evita quebra. */
    }
}

/* Menos movimento para quem prefere. */
@media (prefers-reduced-motion: reduce) {
    .cartao-atalho,
    .cartao-atalho__link svg {
        transition: none; /* Sem animação. */
    }

    .cartao-atalho:hover,
    .cartao-atalho__link:hover svg {
        transform: none; /* Sem deslocamento. */
    }
}

/* =============================================================================
   DENSIDADE DO ADMIN — proporções compactas para uso em desktop
   Fonte base de 15px, menu discreto, campos com 8px 12px de preenchimento e
   menos espaço entre os grupos do formulário. Fica no fim para ajustar as
   regras anteriores do admin.
   ============================================================================= */
:root {
    --admin-fonte-base: 0.9375rem; /* 15px: fonte base do painel. */
    --admin-fonte-controle: 0.875rem; /* 14px: menu, campos e botões. */
    --admin-campo-borda: rgb(203 213 225 / 22%); /* Cinza claro translúcido: borda suave sobre o fundo escuro. */
    --admin-campo-raio: 6px; /* Cantos discretos dos campos e botões. */
    --admin-campo-padding: 8px 12px; /* Preenchimento interno dos campos. */
    --admin-espaco-grupo: 0.75rem; /* Espaço entre grupos do formulário. */
}

body.pagina-admin.pagina-painel {
    font-size: var(--admin-fonte-base); /* Fonte base menor. */
}

body.pagina-painel h1 {
    font-size: 1.5rem; /* Título da página mais contido. */
}

body.pagina-painel .admin-painel h2 {
    font-size: 1.125rem; /* Subtítulos menores. */
}

.admin-painel {
    padding: var(--espaco-6); /* Painel com espaço interno menor. */
}

/* Menu lateral discreto. */
.admin-menu {
    padding: var(--espaco-4) var(--espaco-3); /* Menos espaço interno. */
}

.pagina-painel .admin-menu__marca {
    margin-bottom: var(--espaco-4); /* Menos espaço abaixo da marca. */
    padding-bottom: var(--espaco-4); /* Menos espaço até a divisória. */
    font-size: var(--fonte-base); /* Nome do sistema menor. */
}

.admin-menu__logo {
    width: 1.75rem; /* Logo menor. */
    height: 1.75rem; /* Logo menor. */
}

.admin-menu__navegacao {
    gap: 2px; /* Itens mais próximos. */
}

.pagina-painel .admin-menu__link,
.pagina-painel .admin-menu__sair {
    gap: 0.625rem; /* Espaço menor entre ícone e texto. */
    min-height: 2.125rem; /* Itens mais baixos. */
    padding: 6px 10px; /* Preenchimento discreto. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    font-size: var(--admin-fonte-controle); /* Texto do menu menor. */
    font-weight: 400; /* Sem negrito. */
}

.pagina-painel .admin-menu__link--ativo {
    font-weight: 500; /* Item atual levemente destacado. */
}

.admin-menu__link svg,
.admin-menu__sair svg {
    width: 1.0625rem; /* Ícones menores. */
    height: 1.0625rem; /* Ícones menores. */
}

/* Campos de formulário compactos e com borda suave. */
body.pagina-painel label {
    margin-top: var(--admin-espaco-grupo); /* Menos espaço entre grupos. */
    font-size: var(--admin-fonte-controle); /* Rótulo menor. */
    font-weight: 500; /* Rótulo sem negrito forte. */
}

body.pagina-painel input,
body.pagina-painel select,
body.pagina-painel textarea {
    min-height: 0; /* Remove a altura mínima antiga de 44px. */
    margin-top: var(--espaco-1); /* Rótulo bem próximo do campo. */
    padding: var(--admin-campo-padding); /* 8px 12px. */
    border-color: var(--admin-campo-borda); /* Borda suave. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    font-size: var(--admin-fonte-controle); /* Texto do campo menor. */
    line-height: 1.4; /* Altura de linha compacta. */
}

body.pagina-painel textarea {
    min-height: 4.5rem; /* Três linhas visíveis em vez de cinco. */
}

body.pagina-painel input[type="radio"],
body.pagina-painel input[type="file"] {
    padding: 0; /* Botões de opção sem preenchimento de campo. */
}

body.pagina-painel fieldset {
    margin-top: var(--espaco-4); /* Menos espaço acima dos quadros. */
    padding: var(--espaco-3) var(--espaco-4) var(--espaco-4); /* Quadros mais justos. */
    border-color: var(--admin-campo-borda); /* Borda suave, igual à dos campos. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
}

/* Botões compactos. */
body.pagina-painel .admin-painel button,
body.pagina-painel .admin-painel a {
    min-height: 2.25rem; /* Botões mais baixos. */
    padding: 7px 14px; /* Preenchimento compacto. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    font-size: var(--admin-fonte-controle); /* Texto menor. */
    font-weight: 500; /* Sem negrito forte. */
}

body.pagina-formulario form > button {
    margin-top: var(--espaco-5); /* Menos espaço acima do botão de salvar. */
}

body.pagina-painel #mensagem {
    margin-top: var(--espaco-3); /* Mensagem mais próxima do botão. */
    font-size: var(--admin-fonte-controle); /* Mensagem menor. */
}

/* Importação pelo Excel mais compacta. */
body.pagina-painel .importacao-perguntas p {
    margin-bottom: var(--espaco-3); /* Menos espaço até os botões. */
    font-size: var(--admin-fonte-controle); /* Texto menor. */
}

body.pagina-painel .importacao-perguntas #mensagemImportacao:empty {
    display: none; /* Não reserva espaço quando não há mensagem. */
}

.pagina-painel .importacao-perguntas__divisor {
    margin: var(--espaco-5) 0 0; /* Menos espaço antes do formulário manual. */
    font-size: var(--admin-fonte-controle); /* Texto menor. */
}

/* Dois campos na mesma linha (tempo e pontuação). */
.formulario-linha {
    display: grid; /* Grade de colunas. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas iguais. */
    gap: var(--espaco-4); /* Espaço entre as colunas. */
}

/* Alternativas em grade 2x2. */
.alternativas__grade {
    display: grid; /* Grade das alternativas. */
    grid-template-columns: 1fr 1fr; /* Alternativas 1 e 2 em cima, 3 e 4 embaixo. */
    gap: 15px; /* Espaço entre as alternativas. */
}

.alternativas__topo {
    display: flex; /* Título e "Correta" na mesma linha. */
    align-items: center; /* Alinha verticalmente. */
    justify-content: space-between; /* Título à esquerda, "Correta" à direita. */
    gap: var(--espaco-2); /* Espaço mínimo entre eles. */
}

body.pagina-painel .alternativas__topo label {
    margin-top: 0; /* Sem espaço extra acima dentro da grade. */
}

body.pagina-painel .alternativas .opcao-correta {
    gap: 6px; /* Botão próximo do texto. */
    color: var(--admin-texto-apoio); /* "Correta" em tom de apoio. */
    font-size: 0.8125rem; /* 13px: texto auxiliar. */
    font-weight: 400; /* Sem negrito. */
    cursor: pointer; /* Indica que é clicável. */
}

body.pagina-painel .alternativas .opcao-correta:has(input:checked) {
    color: var(--admin-realce); /* Destaca em dourado a alternativa marcada. */
}

body.pagina-painel .alternativas__item:has(input[type="radio"]:checked) input[type="text"] {
    border-color: var(--admin-realce); /* Contorno dourado no campo da alternativa correta. */
}

/* Painel inicial um pouco mais compacto. */
.dashboard__cabecalho,
.cartao-atalho {
    padding: var(--espaco-5) var(--espaco-6); /* Menos espaço interno. */
}

body.pagina-painel .dashboard__titulo {
    font-size: clamp(1.5rem, 2vw, 1.875rem); /* Saudação menor. */
}

body.pagina-painel .cartao-atalho__titulo {
    font-size: var(--fonte-base); /* Título do cartão menor. */
}

.cartao-atalho__descricao {
    font-size: var(--admin-fonte-controle); /* Descrição menor. */
}

.cartao-atalho__icone {
    width: 2.5rem; /* Quadrado do ícone menor. */
    height: 2.5rem; /* Quadrado do ícone menor. */
    margin-bottom: var(--espaco-4); /* Menos espaço até o título. */
}

.pagina-painel .cartao-atalho__link {
    min-height: 2.375rem; /* Botão do cartão mais baixo. */
}

/* Celulares: os campos lado a lado voltam a ficar empilhados. */
@media (max-width: 40rem) {
    .formulario-linha,
    .alternativas__grade {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
        gap: 0; /* Os rótulos já dão o espaçamento. */
    }

    .alternativas__grade {
        gap: var(--espaco-3); /* Espaço entre alternativas empilhadas. */
    }

    .admin-painel {
        padding: var(--espaco-4); /* Menos espaço interno no celular. */
    }
}
/* =============================================================================
   TELÃO DO APRESENTADOR (app/host.php) E TELA DO JOGADOR (app/player.html)
   Telão: painel de comando (25%) + palco (75%), sem rolagem.
   Celular: topo com PIN, nome, pontos e tempo + quatro botões gigantes.
   As cores das alternativas vêm de --cor-alternativa-* e são idênticas nas duas telas.
   ============================================================================= */
:root {
    --palco-fonte: "Inter", var(--fonte-principal); /* Tipografia das telas do jogo. */
    --palco-fundo: #0f172a; /* Azul-marinho quase preto do palco e do celular. */
    --palco-comando: #1e293b; /* Cinza chumbo do painel de comando. */
    --palco-superficie: rgb(148 163 184 / 8%); /* Fundo translúcido de cartões e métricas. */
    --palco-borda: rgb(148 163 184 / 16%); /* Borda discreta sobre o fundo escuro. */
    --palco-texto: #f1f5f9; /* Texto principal claro. */
    --palco-texto-apoio: #94a3b8; /* Texto de apoio. */
    --palco-texto-rotulo: #64748b; /* Rótulos pequenos em maiúsculas. */
    --palco-ouro: #e5bd71; /* Dourado do PIN, do selo de resultado e do 1º lugar. */
    --palco-ciano: #38bdf8; /* Cor do cronômetro em andamento. */
    --palco-alerta: #ef4444; /* Cor do cronômetro nos últimos 5 segundos. */
    --palco-azul: #2563eb; /* Ação principal do painel de comando. */
    --palco-azul-claro: #3b82f6; /* Borda e brilho da ação principal. */
    --palco-raio: 16px; /* Cantos dos cartões grandes do palco. */
    /* Motor de temas: o que um tema (.theme-*) pode trocar além das cores acima. */
    --palco-brilho-topo: rgb(37 99 235 / 14%); /* Luz que vem do topo do palco. */
    --palco-textura: none; /* Camada extra do fundo do palco e do celular (ex.: gramado). */
    --palco-acao-texto: #ffffff; /* Texto do botão principal do painel. */
    --palco-acao-hover: #60a5fa; /* Botão principal sob o ponteiro. */
    --palco-acao-sombra: rgb(37 99 235 / 70%); /* Brilho do botão principal. */
    --palco-capsula: rgb(148 163 184 / 14%); /* Fundo da cápsula de pontos do celular. */
    --palco-fonte-numeros: var(--palco-fonte); /* Cronômetro, PIN e pontos (tema pode usar fonte de placar). */
    --palco-alternativa-borda: 0 solid transparent; /* Borda dos botões A/B/C/D. */
    --palco-alternativa-textura: none; /* Textura sobre a cor das alternativas (ex.: listras de camisa). */
}

/* Telão e celular ocupam a tela inteira; o rodapé compartilhado não aparece. */
.pagina-palco .rodape-site,
.pagina-jogo .rodape-site {
    display: none; /* Remove o rodapé para não gerar rolagem. */
}

body.pagina-palco {
    height: 100vh; /* Exatamente a altura da tela. */
    margin: 0; /* Sem margens do navegador. */
    overflow: hidden; /* Telão sem barra de rolagem. */
    font-family: var(--palco-fonte); /* Tipografia do jogo. */
    color: var(--palco-texto); /* Texto claro. */
    background: var(--palco-fundo); /* Fundo do palco. */
}

.telao {
    display: grid; /* Painel de comando e palco lado a lado. */
    grid-template-columns: minmax(17rem, 25%) minmax(0, 1fr); /* 25% para o painel, 75% para o palco. */
    height: 100vh; /* Altura da tela. */
}

/* Painel de comando ---------------------------------------------------------- */

.comando {
    display: flex; /* Empilha os blocos do painel. */
    flex-direction: column; /* De cima para baixo. */
    gap: 1.25rem; /* Espaço entre os blocos. */
    padding: 1.75rem 1.5rem; /* Espaço interno. */
    overflow-y: auto; /* Rola só o painel, se a janela for baixa. */
    border-right: 1px solid var(--palco-borda); /* Divisa com o palco. */
    background: var(--palco-comando); /* Cinza chumbo. */
}

.comando__marca {
    margin: 0; /* Sem margens. */
    color: var(--palco-ouro); /* Marca dourada. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.14em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

.comando__marca span {
    color: var(--palco-texto-rotulo); /* "· ao vivo" discreto. */
}

.comando__titulo {
    margin: -0.5rem 0 0; /* Aproxima do rótulo da marca. */
    font-size: 1.25rem; /* Título do quiz. */
    font-weight: 700; /* Negrito. */
    line-height: 1.3; /* Linhas compactas. */
    overflow-wrap: anywhere; /* Quebra títulos longos. */
}

.comando__estado {
    display: inline-flex; /* Ponto e texto lado a lado. */
    align-self: flex-start; /* Cápsula do tamanho do conteúdo. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.5rem; /* Espaço entre ponto e texto. */
    margin: -0.25rem 0 0; /* Próximo do título. */
    padding: 0.25rem 0.75rem; /* Cápsula. */
    border-radius: 999px; /* Formato de cápsula. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    background: var(--palco-superficie); /* Fundo translúcido. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
}

.comando__ponto {
    width: 8px; /* Diâmetro do indicador. */
    height: 8px; /* Diâmetro do indicador. */
    border-radius: 50%; /* Círculo. */
    background: var(--palco-texto-rotulo); /* Cor padrão. */
}

.comando__estado[data-estado="lobby"] .comando__ponto { background: var(--palco-ciano); } /* Sala de espera: ciano. */
.comando__estado[data-estado="placar"] .comando__ponto { background: var(--palco-ouro); } /* Resultado: dourado. */
.comando__estado[data-estado="mostrando_botoes"] .comando__ponto {
    background: #22c55e; /* Respondendo: verde "ao vivo". */
    animation: palco-pulso 1.4s ease-in-out infinite; /* Pisca suavemente. */
}

.comando__sala {
    padding: 1.25rem; /* Espaço interno. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: 12px; /* Cantos arredondados. */
    background: var(--palco-fundo); /* Mais escuro que o painel. */
}

.comando__rotulo {
    margin: 0 0 0.5rem; /* Espaço abaixo. */
    color: var(--palco-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.12em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

.comando__pin {
    margin: 0; /* Sem margens. */
    color: var(--palco-ouro); /* PIN dourado. */
    font-size: clamp(2.25rem, 3.2vw, 3rem); /* PIN em destaque. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos com a mesma largura. */
    letter-spacing: 0.12em; /* Dígitos espaçados. */
    line-height: 1.1; /* Compacto. */
    text-shadow: 0 0 24px rgb(229 189 113 / 35%); /* Brilho dourado discreto. */
}

.comando__metricas {
    display: grid; /* Três métricas lado a lado. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Colunas iguais. */
    gap: 0.5rem; /* Espaço entre métricas. */
    margin: 1rem 0 0; /* Espaço acima. */
}

.comando__metricas div {
    padding: 0.5rem 0.625rem; /* Espaço interno. */
    border-radius: 8px; /* Cantos. */
    background: var(--palco-superficie); /* Fundo translúcido. */
}

.comando__metricas dt {
    overflow: hidden; /* Em painéis estreitos, corta o rótulo... */
    color: var(--palco-texto-rotulo); /* Rótulo discreto. */
    font-size: 0.625rem; /* Muito pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.04em; /* Espaçamento leve. */
    text-overflow: ellipsis; /* ...com reticências, sem sobrepor a métrica vizinha. */
    text-transform: uppercase; /* Maiúsculas. */
    white-space: nowrap; /* Uma linha. */
}

.comando__metricas dd {
    margin: 0.125rem 0 0; /* Próximo do rótulo. */
    font-size: 1.125rem; /* Valor em destaque. */
    font-weight: 700; /* Negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.comando__controles {
    display: flex; /* Botões empilhados. */
    flex-direction: column; /* De cima para baixo. */
    gap: 0.5rem; /* Espaço entre botões. */
}

.comando__grade {
    display: grid; /* Dois botões lado a lado. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Colunas iguais. */
    gap: 0.5rem; /* Espaço entre eles. */
}

.comando__grade:not(:has(> :not([hidden]))) {
    display: none; /* Some quando os dois botões da linha estão ocultos. */
}

/* Botões de comando: visual de painel de controle. */
.botao-comando {
    display: flex; /* Ícone e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.625rem; /* Espaço entre ícone e texto. */
    width: 100%; /* Largura da coluna. */
    min-height: 2.75rem; /* Área de clique confortável. */
    padding: 0.625rem 0.875rem; /* Espaço interno. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: 8px; /* Cantos. */
    color: var(--palco-texto); /* Texto do tema (claro no padrão). */
    background: var(--palco-superficie); /* Fundo translúcido. */
    font: 600 0.875rem/1.2 var(--palco-fonte); /* Tipografia do botão. */
    text-align: left; /* Texto à esquerda. */
    cursor: pointer; /* Indica clique. */
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; /* Suaviza estados. */
}

.botao-comando svg {
    flex: none; /* Ícone não encolhe. */
    width: 1.125rem; /* Largura do ícone. */
    height: 1.125rem; /* Altura do ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2; /* Espessura. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.botao-comando:hover:not(:disabled) {
    border-color: rgb(148 163 184 / 32%); /* Borda mais visível. */
    background: rgb(148 163 184 / 14%); /* Fundo mais claro. */
}

.botao-comando:active:not(:disabled) {
    transform: scale(0.98); /* Efeito de pressionar. */
}

.botao-comando:disabled {
    cursor: wait; /* Aguardando o servidor. */
    opacity: 0.55; /* Esmaecido. */
}

.botao-comando--principal {
    min-height: 3.25rem; /* Ação principal maior. */
    border-color: var(--palco-azul-claro); /* Borda azul. */
    color: var(--palco-acao-texto); /* Texto branco (o tema pode trocar). */
    background: linear-gradient(180deg, var(--palco-azul-claro), var(--palco-azul)); /* Azul com leve degradê. */
    box-shadow: 0 10px 24px -10px var(--palco-acao-sombra); /* Brilho abaixo. */
    font-size: 1rem; /* Texto maior. */
}

.botao-comando--principal:hover:not(:disabled) {
    border-color: var(--palco-acao-hover); /* Borda mais clara. */
    background: linear-gradient(180deg, var(--palco-acao-hover), var(--palco-azul-claro)); /* Degradê mais claro. */
}

.botao-comando--aviso {
    border-color: rgb(251 191 36 / 40%); /* Borda âmbar. */
    color: #fbbf24; /* Texto âmbar. */
    background: rgb(251 191 36 / 8%); /* Fundo âmbar translúcido. */
}

.botao-comando--aviso:hover:not(:disabled) {
    border-color: rgb(251 191 36 / 60%); /* Borda mais forte. */
    background: rgb(251 191 36 / 16%); /* Fundo mais forte. */
}

.botao-comando--perigo {
    border-color: #dc2626; /* Borda vermelha. */
    color: #ffffff; /* Texto branco. */
    background: #b91c1c; /* Vermelho sólido. */
}

.botao-comando--perigo:hover:not(:disabled) {
    border-color: #ef4444; /* Borda mais clara. */
    background: #dc2626; /* Vermelho mais claro. */
}

.botao-comando--perigo-contorno {
    border-color: rgb(248 113 113 / 40%); /* Contorno vermelho. */
    color: #fca5a5; /* Texto vermelho claro. */
    background: transparent; /* Sem preenchimento. */
}

.botao-comando--perigo-contorno:hover:not(:disabled) {
    border-color: rgb(248 113 113 / 60%); /* Contorno mais forte. */
    background: rgb(248 113 113 / 10%); /* Leve preenchimento. */
}

.botao-comando--destaque {
    min-height: 3.25rem; /* Mesmo porte da ação principal. */
    box-shadow: 0 10px 24px -10px rgb(220 38 38 / 70%); /* Brilho vermelho. */
}

.comando__links {
    display: grid; /* Links empilhados. */
    gap: 0.5rem; /* Espaço entre links. */
}

.comando__links a {
    padding: 0.625rem 0.875rem; /* Espaço interno. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: 8px; /* Cantos. */
    color: var(--palco-texto); /* Texto do tema (claro no padrão). */
    background: var(--palco-superficie); /* Fundo translúcido. */
    font-size: 0.875rem; /* Texto do link. */
    font-weight: 600; /* Leve destaque. */
    text-decoration: none; /* Sem sublinhado. */
}

.comando__links a:first-child {
    border-color: var(--palco-azul-claro); /* Ação principal após a partida. */
    background: var(--palco-azul); /* Azul. */
}

.comando__mensagem {
    min-height: 1.25rem; /* Reserva espaço para a mensagem. */
    margin: auto 0 0; /* Vai para o fim do painel. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    line-height: 1.45; /* Leitura confortável. */
}

/* Palco ------------------------------------------------------------------------ */

.palco-jogo {
    display: flex; /* As cenas ocupam toda a altura. */
    flex-direction: column; /* Uma cena por vez. */
    min-width: 0; /* Evita estouro horizontal. */
    padding: clamp(1.5rem, 3vw, 3rem); /* Respiro generoso. */
    overflow: hidden; /* Sem rolagem. */
    background:
        var(--palco-textura),
        radial-gradient(ellipse 80% 60% at 50% 0%, var(--palco-brilho-topo), transparent 70%),
        var(--palco-fundo); /* Textura do tema + luz vinda do topo. */
}

.palco-jogo > section {
    flex: 1; /* A cena preenche o palco. */
    min-height: 0; /* Permite encolher sem rolar. */
}

.palco-rotulo {
    margin: 0; /* Sem margens. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: 0.8125rem; /* Rótulo. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.16em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

/* Cena 1: sala de espera — com o painel de comando, forma o layout 25% · 45% · 30%.
   Dentro do palco (75% da tela): 3fr + 2fr = 60% + 40% = 45% + 30% da tela. */
.entrada-palco {
    display: grid; /* Coluna central e coluna de jogadores. */
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); /* 45% e 30% da largura total. */
    gap: clamp(1.5rem, 3vw, 3rem); /* Espaço entre as colunas. */
    min-height: 0; /* Permite encolher sem rolar. */
}

.entrada-palco__chamada {
    display: flex; /* Elementos empilhados... */
    flex-direction: column; /* ...de cima para baixo... */
    align-items: center; /* ...centralizados na horizontal... */
    justify-content: center; /* ...e na vertical. */
    min-height: 0; /* Permite encolher. */
    text-align: center; /* Textos centralizados. */
}

.entrada-palco__titulo {
    margin: 0.75rem 0 clamp(1rem, 3vh, 2rem); /* Espaço até o QR Code. */
    font-size: clamp(1.5rem, 2.6vw, 2.5rem); /* Instrução grande. */
    font-weight: 700; /* Negrito. */
    line-height: 1.15; /* Linhas compactas. */
    letter-spacing: -0.01em; /* Visual refinado. */
    text-wrap: balance; /* Quebra as linhas de forma equilibrada em telões menores. */
}

.entrada-palco__qr {
    padding: 16px; /* Moldura branca ao redor do QR. */
    border-radius: 20px; /* Cantos arredondados. */
    background: var(--cor-qrcode-clara); /* Fundo branco exigido pelo QR. */
    box-shadow: 0 24px 48px -16px rgb(0 0 0 / 60%); /* Sombra profunda. */
}

.entrada-palco__qr img,
.entrada-palco__qr canvas {
    display: block; /* Remove o espaço de linha abaixo da imagem. */
    width: clamp(9rem, 24vh, 15rem); /* QR proporcional à altura do telão. */
    height: auto; /* Mantém o quadrado. */
}

.entrada-palco__pin {
    margin: clamp(1rem, 3vh, 2rem) 0 0; /* Espaço abaixo do QR. */
    color: var(--palco-ouro); /* PIN dourado. */
    font-size: clamp(3.5rem, 7vw, 7rem); /* PIN gigante. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
    letter-spacing: 0.08em; /* Dígitos espaçados. */
    line-height: 1; /* Compacto. */
    text-shadow: 0 0 48px rgb(229 189 113 / 30%); /* Brilho dourado. */
}

.entrada-palco__link {
    margin: 0.75rem 0 0; /* Espaço acima. */
    font-size: 1.125rem; /* Texto do link. */
}

.entrada-palco__link a {
    color: #cbd5e1; /* Link claro. */
    text-decoration-color: rgb(203 213 225 / 40%); /* Sublinhado discreto. */
    text-underline-offset: 4px; /* Sublinhado afastado. */
}

/* Coluna de jogadores: reaproveita o painel .ranking-palco ("Melhores desta pergunta"). */
.entrada-palco__jogadores {
    align-self: stretch; /* Ocupa a altura toda do palco. */
}

.ranking-palco__cabecalho {
    display: flex; /* Título e contagem na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Contagem à direita. */
}

.ranking-palco__contagem {
    min-width: 2rem; /* Cápsula mínima. */
    padding: 0.125rem 0.625rem; /* Cápsula. */
    border-radius: 999px; /* Formato de cápsula. */
    color: var(--palco-fundo); /* Número escuro... */
    background: var(--palco-ouro); /* ...sobre dourado. */
    font-size: 0.875rem; /* Número. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
    text-align: center; /* Centralizado. */
}

.entrada-palco__jogadores .ranking-palco__lista {
    align-content: start; /* Itens a partir do topo. */
    min-height: 0; /* Permite encolher. */
    overflow-y: auto; /* Com muitos jogadores, a lista rola dentro do painel. */
    scrollbar-width: none; /* Sem barra de rolagem visível no telão. */
}

.ranking-palco__item--jogador {
    grid-template-columns: 2rem minmax(0, 1fr); /* Inicial e nome (sem pontos nem tempo). */
}

.ranking-palco__item--jogador:first-child {
    animation: palco-surgir 0.35s ease-out both; /* O jogador que acabou de entrar aparece com destaque. */
}

/* Inicial do jogador nas cores das alternativas, alternando entre elas. */
.ranking-palco__item--jogador .ranking-palco__posicao--a { color: var(--cor-alternativa-a-texto); background: var(--cor-alternativa-a-fundo); } /* Carmesim. */
.ranking-palco__item--jogador .ranking-palco__posicao--b { color: var(--cor-alternativa-b-texto); background: var(--cor-alternativa-b-fundo); } /* Cobalto. */
.ranking-palco__item--jogador .ranking-palco__posicao--c { color: var(--cor-alternativa-c-texto); background: var(--cor-alternativa-c-fundo); } /* Mostarda. */
.ranking-palco__item--jogador .ranking-palco__posicao--d { color: var(--cor-alternativa-d-texto); background: var(--cor-alternativa-d-fundo); } /* Esmeralda. */

/* Cena 2: pergunta e resultado */
.rodada {
    display: flex; /* Topo, pergunta e alternativas empilhados. */
    flex-direction: column; /* De cima para baixo. */
    gap: clamp(1rem, 2.5vh, 2rem); /* Espaço entre as partes. */
}

.rodada__topo {
    display: grid; /* Rótulo, cronômetro e contagem em três colunas. */
    grid-template-columns: 1fr auto 1fr; /* Cronômetro centralizado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 1rem; /* Espaço entre colunas. */
}

.rodada__respostas {
    text-align: right; /* Contagem encostada à direita. */
}

.cronometro {
    position: relative; /* Referência para o número no centro. */
    width: clamp(6rem, 12vh, 8.5rem); /* Tamanho do anel. */
    aspect-ratio: 1; /* Quadrado. */
}

.cronometro svg {
    width: 100%; /* Ocupa o quadrado. */
    height: 100%; /* Ocupa o quadrado. */
    transform: rotate(-90deg); /* O arco começa no topo. */
}

.cronometro__trilho,
.cronometro__arco {
    fill: none; /* Só o traço. */
    stroke-width: 8; /* Espessura do anel. */
}

.cronometro__trilho {
    stroke: rgb(148 163 184 / 15%); /* Trilho apagado. */
}

.cronometro__arco {
    stroke: var(--palco-ciano); /* Arco ciano. */
    stroke-linecap: round; /* Ponta arredondada. */
    filter: drop-shadow(0 0 8px rgb(56 189 248 / 55%)); /* Brilho do arco. */
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease; /* Movimento contínuo. */
}

.cronometro__numero {
    position: absolute; /* Sobre o anel. */
    inset: 0; /* Ocupa o anel inteiro. */
    display: grid; /* Centraliza o número. */
    place-items: center; /* Centro. */
    font-size: clamp(2rem, 4.8vh, 3rem); /* Número imponente. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.cronometro--alerta .cronometro__arco {
    stroke: var(--palco-alerta); /* Vermelho nos últimos segundos. */
    filter: drop-shadow(0 0 10px rgb(239 68 68 / 65%)); /* Brilho vermelho. */
}

.cronometro--alerta .cronometro__numero {
    color: #fca5a5; /* Número avermelhado. */
    animation: palco-pulso 1s ease-in-out infinite; /* Pulsa. */
}

.rodada__selo {
    margin: 0; /* Sem margens. */
    padding: 0.5rem 1.5rem; /* Cápsula. */
    border-radius: 999px; /* Formato de cápsula. */
    color: var(--palco-fundo); /* Texto escuro. */
    background: var(--palco-ouro); /* Selo dourado. */
    font-size: 0.875rem; /* Texto do selo. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: 0.16em; /* Espaçamento. */
    text-transform: uppercase; /* Maiúsculas. */
    animation: palco-surgir 0.4s ease-out both; /* Entra com destaque. */
}

.rodada__pergunta {
    display: grid; /* Centraliza o enunciado no espaço livre. */
    flex: 1; /* Ocupa o espaço entre o topo e as alternativas. */
    place-items: center; /* Centro. */
    margin: 0; /* Sem margens. */
    font-size: clamp(1.75rem, 3.4vw, 3.25rem); /* Enunciado grande. */
    font-weight: 700; /* Negrito. */
    line-height: 1.2; /* Linhas compactas. */
    letter-spacing: -0.01em; /* Visual refinado. */
    text-align: center; /* Centralizado. */
    text-wrap: balance; /* Linhas equilibradas. */
    overflow-wrap: anywhere; /* Quebra palavras longas. */
}

.rodada--resultado .rodada__pergunta {
    flex: 0 0 auto; /* No resultado, o enunciado cede espaço. */
    font-size: clamp(1.25rem, 2.2vw, 2rem); /* Enunciado menor. */
}

.rodada__corpo {
    display: grid; /* Alternativas (e ranking no resultado). */
    grid-template-columns: minmax(0, 1fr); /* Uma coluna durante as respostas. */
    gap: 1.25rem; /* Espaço entre colunas. */
    min-height: 0; /* Permite encolher. */
}

.rodada--resultado .rodada__corpo {
    flex: 1; /* Ocupa o resto do palco. */
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); /* Alternativas e ranking. */
}

.alternativas-palco {
    display: grid; /* Grade 2x2. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    gap: clamp(0.75rem, 1.5vw, 1.25rem); /* Espaço entre alternativas. */
    align-content: end; /* Encostadas embaixo. */
}

.rodada--resultado .alternativas-palco {
    align-content: center; /* No resultado, alternativas centralizadas ao lado do ranking. */
}

.alt-palco {
    position: relative; /* Referência para a barra de votos. */
    display: flex; /* Letra, texto e contagem em linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 1.25rem; /* Espaço entre os elementos. */
    min-height: clamp(5.5rem, 13vh, 9rem); /* Altura generosa. */
    padding: 1rem 1.5rem; /* Espaço interno. */
    overflow: hidden; /* Recorta a barra nos cantos. */
    border-radius: var(--palco-raio); /* Cantos arredondados. */
    color: #ffffff; /* Texto branco. */
    box-shadow: inset 0 -6px 0 rgb(0 0 0 / 18%), 0 16px 32px -16px rgb(0 0 0 / 70%); /* Profundidade. */
    font-size: clamp(1.125rem, 1.9vw, 1.75rem); /* Texto legível à distância. */
    font-weight: 600; /* Leve destaque. */
    line-height: 1.25; /* Compacto. */
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease; /* Suaviza a revelação. */
}

.alt-palco--a { background: var(--palco-alternativa-textura), var(--cor-alternativa-a-fundo); color: var(--cor-alternativa-a-texto); } /* Carmesim. */
.alt-palco--b { background: var(--palco-alternativa-textura), var(--cor-alternativa-b-fundo); color: var(--cor-alternativa-b-texto); } /* Cobalto. */
.alt-palco--c { background: var(--palco-alternativa-textura), var(--cor-alternativa-c-fundo); color: var(--cor-alternativa-c-texto); } /* Mostarda. */
.alt-palco--d { background: var(--palco-alternativa-textura), var(--cor-alternativa-d-fundo); color: var(--cor-alternativa-d-texto); } /* Esmeralda. */

.alt-palco__letra {
    display: grid; /* Centraliza a letra. */
    flex: none; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: clamp(2.75rem, 4.5vw, 3.75rem); /* Quadrado da letra. */
    aspect-ratio: 1; /* Quadrado. */
    border-radius: 12px; /* Cantos. */
    background: rgb(0 0 0 / 22%); /* Fundo escurecido. */
    font-size: 1.15em; /* Letra um pouco maior. */
    font-weight: 800; /* Extra negrito. */
}

.alt-palco__texto {
    flex: 1; /* Ocupa o espaço disponível. */
    overflow-wrap: anywhere; /* Quebra palavras longas. */
}

.alt-palco__contagem {
    flex: none; /* Não encolhe. */
    font-size: 1.4em; /* Número de votos em destaque. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.alt-palco__barra {
    position: absolute; /* Faixa na base do cartão. */
    bottom: 0; /* Encostada embaixo. */
    left: 0; /* A partir da esquerda. */
    width: var(--percentual, 0%); /* Proporcional aos votos. */
    height: 6px; /* Espessura. */
    background: rgb(255 255 255 / 75%); /* Faixa clara. */
    animation: palco-barra 0.8s ease-out both; /* Cresce ao revelar. */
}

.alt-palco--correta {
    box-shadow: 0 0 0 4px #ffffff, 0 0 48px rgb(255 255 255 / 30%); /* Contorno branco e brilho. */
    transform: scale(1.02); /* Ligeiramente maior. */
}

.alt-palco--correta .alt-palco__letra {
    color: var(--cor-alternativa-d-texto); /* Ícone branco... */
    background: #16a34a; /* ...sobre verde de acerto. */
    font-size: 0; /* Esconde a letra... */
}

.alt-palco--correta .alt-palco__letra::before {
    content: "✓"; /* ...e mostra o sinal de correto. */
    font-size: clamp(1.5rem, 2.4vw, 2rem); /* Tamanho do sinal. */
}

.alt-palco--apagada {
    opacity: 0.28; /* Alternativas erradas apagadas. */
    filter: saturate(0.4); /* Menos saturadas. */
}

/* Classificação no resultado */
.ranking-palco {
    display: flex; /* Título e lista. */
    flex-direction: column; /* De cima para baixo. */
    gap: 0.75rem; /* Espaço entre eles. */
    min-height: 0; /* Permite encolher. */
    padding: 1.25rem; /* Espaço interno. */
    overflow: hidden; /* Sem rolagem. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: var(--palco-raio); /* Cantos. */
    background: rgb(30 41 59 / 70%); /* Chumbo translúcido. */
    animation: palco-surgir 0.4s ease-out both; /* Entra suavemente. */
}

.ranking-palco__lista {
    display: grid; /* Linhas da classificação. */
    gap: 0.5rem; /* Espaço entre linhas. */
    margin: 0; /* Sem margens. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem números automáticos. */
}

.ranking-palco__item {
    display: grid; /* Posição, nome e pontos. */
    grid-template-columns: 2rem minmax(0, 1fr) auto auto; /* Posição, nome, pontos da pergunta e tempo. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.75rem; /* Espaço entre colunas. */
    padding: 0.625rem 0.75rem; /* Espaço interno. */
    border-radius: 10px; /* Cantos. */
    background: var(--palco-superficie); /* Fundo translúcido. */
    font-size: 1.0625rem; /* Texto legível. */
}

.ranking-palco__posicao {
    display: grid; /* Centraliza o número. */
    place-items: center; /* Centro. */
    width: 2rem; /* Círculo. */
    height: 2rem; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    background: rgb(148 163 184 / 15%); /* Fundo neutro. */
    font-size: 0.875rem; /* Número. */
    font-weight: 800; /* Extra negrito. */
}

.ranking-palco__item--top1 .ranking-palco__posicao { color: #3b2a06; background: var(--palco-ouro); } /* Ouro. */
.ranking-palco__item--top2 .ranking-palco__posicao { color: #1e293b; background: #cbd5e1; } /* Prata. */
.ranking-palco__item--top3 .ranking-palco__posicao { color: #3a1d08; background: #d0915f; } /* Bronze. */

.ranking-palco__nome {
    overflow: hidden; /* Corta nomes longos... */
    font-weight: 600; /* Leve destaque. */
    text-overflow: ellipsis; /* ...com reticências. */
    white-space: nowrap; /* Uma linha. */
}

.ranking-palco__pontos {
    font-weight: 700; /* Negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

/* Cena 3: pódio final */
.final-palco {
    display: flex; /* Conteúdo centralizado. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centro horizontal. */
    text-align: center; /* Texto centralizado. */
}

.final-palco__titulo {
    margin: 0.5rem 0 0; /* Espaço acima. */
    font-size: clamp(2rem, 4vw, 3.5rem); /* Título grande. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.02em; /* Visual refinado. */
}

.podio-palco {
    display: flex; /* Lugares lado a lado. */
    flex: 1; /* Ocupa o espaço vertical. */
    align-items: flex-end; /* Degraus alinhados pela base. */
    justify-content: center; /* Centralizados. */
    gap: clamp(1rem, 2vw, 2rem); /* Espaço entre lugares. */
    width: 100%; /* Largura do palco. */
    margin-top: 1.5rem; /* Espaço acima. */
}

.podio-palco__lugar {
    display: flex; /* Nome, pontos e degrau. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centralizados. */
    width: clamp(10rem, 16vw, 15rem); /* Largura de cada lugar. */
    animation: palco-subir 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; /* Sobe ao aparecer. */
}

.podio-palco__lugar--1 { animation-delay: 0.5s; } /* O 1º lugar aparece por último. */
.podio-palco__lugar--2 { animation-delay: 0.25s; } /* O 2º aparece em seguida. */

.podio-palco__nome {
    max-width: 100%; /* Não ultrapassa o degrau. */
    margin: 0; /* Sem margens. */
    overflow: hidden; /* Corta nomes longos... */
    font-size: clamp(1.125rem, 1.8vw, 1.5rem); /* Nome legível. */
    font-weight: 700; /* Negrito. */
    text-overflow: ellipsis; /* ...com reticências. */
    white-space: nowrap; /* Uma linha. */
}

.podio-palco__lugar--1 .podio-palco__nome {
    color: var(--palco-ouro); /* Campeão em dourado. */
    font-size: clamp(1.375rem, 2.2vw, 2rem); /* Nome maior. */
}

.podio-palco__pontos {
    margin: 0.25rem 0 1rem; /* Espaço até o degrau. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: 1.125rem; /* Pontuação. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.podio-palco__degrau {
    display: grid; /* Número no topo do degrau. */
    place-items: start center; /* Topo centralizado. */
    width: 100%; /* Largura do lugar. */
    padding-top: 1rem; /* Espaço acima do número. */
    border-radius: 14px 14px 0 0; /* Cantos superiores. */
    font-size: clamp(2rem, 3.5vw, 3rem); /* Número grande. */
    font-weight: 800; /* Extra negrito. */
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 35%); /* Brilho no topo. */
}

.podio-palco__lugar--1 .podio-palco__degrau { height: clamp(11rem, 30vh, 18rem); color: #3b2a06; background: linear-gradient(180deg, #f5d58a, #c99a3a); } /* Ouro. */
.podio-palco__lugar--2 .podio-palco__degrau { height: clamp(8rem, 22vh, 13rem); color: #1e293b; background: linear-gradient(180deg, #e2e8f0, #94a3b8); } /* Prata. */
.podio-palco__lugar--3 .podio-palco__degrau { height: clamp(6rem, 16vh, 10rem); color: #3a1d08; background: linear-gradient(180deg, #e9ac7c, #a8643a); } /* Bronze. */

.final-palco__restantes {
    margin: 1.5rem 0 0; /* Espaço acima. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: 1.125rem; /* Texto legível. */
}

/* Telas estreitas (notebook pequeno, tablet): painel em cima, com rolagem. */
@media (max-width: 60rem) {
    body.pagina-palco {
        height: auto; /* Altura do conteúdo. */
        overflow: auto; /* Permite rolar. */
    }

    .telao {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
        height: auto; /* Altura do conteúdo. */
    }

    .comando {
        border-right: 0; /* Sem divisa lateral. */
        border-bottom: 1px solid var(--palco-borda); /* Divisa inferior. */
    }

    .palco-jogo {
        min-height: 100vh; /* Palco com a altura da tela. */
    }

    .entrada-palco,
    .rodada--resultado .rodada__corpo {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
    }
}

/* Tela do jogador (celular) ---------------------------------------------------- */

body.pagina-jogo {
    height: 100dvh; /* Altura real da tela do celular. */
    margin: 0; /* Sem margens. */
    overflow: hidden; /* Sem barra de rolagem. */
    font-family: var(--palco-fonte); /* Tipografia do jogo. */
    color: var(--palco-texto); /* Texto claro. */
    background: var(--palco-textura), var(--palco-fundo); /* Fundo escuro (+ textura do tema). */
    -webkit-tap-highlight-color: transparent; /* Sem realce azul ao tocar. */
}

.jogo {
    display: grid; /* Topo, barra de tempo, corpo e mensagem. */
    grid-template-rows: auto auto minmax(0, 1fr) auto; /* O corpo ocupa o restante. */
    height: 100dvh; /* Tela inteira. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* Respeita entalhes do celular. */
    transition: background 0.4s ease; /* Suaviza a troca de cor no resultado. */
}

.jogo--acerto {
    background: radial-gradient(ellipse at 50% 35%, #0b7a52, #052e1f 75%); /* Tela verde de acerto. */
}

.jogo--erro {
    background: radial-gradient(ellipse at 50% 35%, #9b1c2c, #2b0a10 75%); /* Tela vermelha de erro. */
}

.jogo__topo {
    display: flex; /* Identidade, pontos e tempo em linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.75rem; /* Espaço entre blocos. */
    padding: 12px 16px; /* Margem de 16px nas laterais. */
}

.jogo__identidade {
    display: flex; /* Nome e PIN empilhados. */
    flex: 1; /* Ocupa o espaço livre. */
    flex-direction: column; /* De cima para baixo. */
    min-width: 0; /* Permite cortar nomes longos. */
}

.jogo__nome {
    overflow: hidden; /* Corta nomes longos... */
    font-size: 1rem; /* Nome. */
    font-weight: 700; /* Negrito. */
    text-overflow: ellipsis; /* ...com reticências. */
    white-space: nowrap; /* Uma linha. */
}

.jogo__pin {
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: 0.75rem; /* Pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento. */
}

.jogo__placar {
    display: flex; /* Número e rótulo. */
    align-items: baseline; /* Alinhados pela base do texto. */
    gap: 4px; /* Espaço pequeno. */
    padding: 6px 12px; /* Cápsula. */
    border-radius: 999px; /* Formato de cápsula. */
    background: var(--palco-capsula); /* Fundo translúcido. */
}

.jogo__pontos {
    font-size: 1.125rem; /* Pontuação. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.jogo__pontos-rotulo {
    color: var(--palco-texto-apoio); /* Rótulo discreto. */
    font-size: 0.6875rem; /* Pequeno. */
    font-weight: 600; /* Leve destaque. */
    text-transform: uppercase; /* Maiúsculas. */
}

.jogo__cronometro {
    display: grid; /* Centraliza o número. */
    flex: none; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: 2.75rem; /* Círculo. */
    height: 2.75rem; /* Círculo. */
    border: 3px solid var(--palco-ciano); /* Anel ciano. */
    border-radius: 50%; /* Círculo. */
    font-size: 1.125rem; /* Segundos. */
    font-weight: 800; /* Extra negrito. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.jogo__cronometro[hidden] {
    display: none; /* Some fora das rodadas. */
}

.jogo__cronometro--alerta {
    border-color: var(--palco-alerta); /* Anel vermelho nos últimos segundos. */
    color: #fca5a5; /* Número avermelhado. */
    animation: palco-pulso 1s ease-in-out infinite; /* Pulsa. */
}

.jogo__tempo {
    height: 4px; /* Barra fina. */
    background: rgb(148 163 184 / 15%); /* Trilho. */
}

.jogo__tempo span {
    display: block; /* Ocupa a barra. */
    height: 100%; /* Altura total. */
    background: linear-gradient(90deg, var(--palco-ciano), var(--palco-azul)); /* Degradê ciano-azul. */
    transform: scaleX(0); /* Começa vazia. */
    transform-origin: left; /* Encolhe para a esquerda. */
    transition: transform 0.1s linear; /* Movimento contínuo. */
}

.jogo__corpo {
    display: flex; /* O conteúdo preenche a área. */
    min-height: 0; /* Permite encolher sem rolar. */
    padding: 12px 16px; /* Margem de 16px nas laterais. */
}

/* Quatro botões gigantes, só com a letra. */
.jogo-botoes {
    display: grid; /* Grade 2x2. */
    flex: 1; /* Ocupa toda a área. */
    grid-template-columns: 1fr 1fr; /* Duas colunas. */
    grid-template-rows: 1fr 1fr; /* Duas linhas. */
    gap: 12px; /* Espaço entre botões. */
}

.jogo-botao {
    border: var(--palco-alternativa-borda); /* Sem borda no padrão; o tema pode engrossar. */
    border-radius: 18px; /* Cantos levemente arredondados. */
    color: #ffffff; /* Letra branca. */
    box-shadow: inset 0 -8px 0 rgb(0 0 0 / 20%), 0 12px 24px -12px rgb(0 0 0 / 70%); /* Relevo tátil. */
    font: 800 clamp(3.5rem, 18vw, 6rem)/1 var(--palco-fonte); /* Letra gigante. */
    text-shadow: 0 2px 0 rgb(0 0 0 / 20%); /* Leve relevo na letra. */
    cursor: pointer; /* Indica toque. */
    touch-action: manipulation; /* Toque imediato, sem atraso de zoom. */
    user-select: none; /* Não seleciona a letra ao tocar. */
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.25s ease, box-shadow 0.12s ease; /* Resposta tátil rápida. */
}

.jogo-botao--a { background: var(--palco-alternativa-textura), var(--cor-alternativa-a-fundo); color: var(--cor-alternativa-a-texto); } /* Carmesim. */
.jogo-botao--b { background: var(--palco-alternativa-textura), var(--cor-alternativa-b-fundo); color: var(--cor-alternativa-b-texto); } /* Cobalto. */
.jogo-botao--c { background: var(--palco-alternativa-textura), var(--cor-alternativa-c-fundo); color: var(--cor-alternativa-c-texto); text-shadow: none; } /* Mostarda. */
.jogo-botao--d { background: var(--palco-alternativa-textura), var(--cor-alternativa-d-fundo); color: var(--cor-alternativa-d-texto); } /* Esmeralda. */

.jogo-botao:active:not(:disabled) {
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 20%); /* Relevo afunda ao tocar. */
    filter: brightness(1.15); /* Brilho ao tocar. */
    transform: scale(0.95); /* Encolhe ao tocar. */
}

.jogo-botao:disabled {
    cursor: default; /* Sem indicação de clique. */
}

.jogo-botao--escolhido {
    box-shadow: 0 0 0 4px #ffffff, 0 0 32px rgb(255 255 255 / 35%); /* Contorno branco na escolha. */
    transform: scale(1.02); /* Ligeiramente maior. */
}

.jogo-botao--descartado {
    opacity: 0.2; /* Opções não escolhidas apagadas. */
    filter: saturate(0.3); /* Menos saturadas. */
}

/* Avisos centrais (espera, resposta enviada, resultado, final). */
.jogo-aviso {
    display: flex; /* Conteúdo centralizado. */
    flex: 1; /* Ocupa a área. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centro horizontal. */
    justify-content: center; /* Centro vertical. */
    gap: 12px; /* Espaço entre elementos. */
    padding: 16px; /* Espaço interno. */
    text-align: center; /* Texto centralizado. */
    animation: palco-surgir 0.35s ease-out both; /* Entra suavemente. */
}

.jogo-aviso__icone {
    display: grid; /* Centraliza o símbolo. */
    place-items: center; /* Centro. */
    width: 6rem; /* Círculo. */
    height: 6rem; /* Círculo. */
    border: 2px solid rgb(148 163 184 / 25%); /* Anel discreto. */
    border-radius: 50%; /* Círculo. */
    background: rgb(148 163 184 / 12%); /* Fundo translúcido. */
    font-size: 2.75rem; /* Símbolo grande. */
    font-weight: 800; /* Extra negrito. */
}

.jogo-aviso--espera .jogo-aviso__icone {
    border-color: var(--palco-ciano); /* Anel ciano. */
    color: var(--palco-ciano); /* Símbolo ciano. */
    animation: palco-anel 2s ease-out infinite; /* Onda pulsante de espera. */
}

.jogo-aviso__icone--a { border: 0; color: var(--cor-alternativa-a-texto); background: var(--cor-alternativa-a-fundo); } /* Letra escolhida: A. */
.jogo-aviso__icone--b { border: 0; color: var(--cor-alternativa-b-texto); background: var(--cor-alternativa-b-fundo); } /* Letra escolhida: B. */
.jogo-aviso__icone--c { border: 0; color: var(--cor-alternativa-c-texto); background: var(--cor-alternativa-c-fundo); } /* Letra escolhida: C. */
.jogo-aviso__icone--d { border: 0; color: var(--cor-alternativa-d-texto); background: var(--cor-alternativa-d-fundo); } /* Letra escolhida: D. */

.jogo-aviso--resultado .jogo-aviso__icone {
    width: 8rem; /* Círculo maior no resultado. */
    height: 8rem; /* Círculo maior no resultado. */
    border: 3px solid rgb(255 255 255 / 55%); /* Anel claro. */
    background: rgb(255 255 255 / 15%); /* Fundo claro translúcido. */
    font-size: 4rem; /* Símbolo grande. */
    animation: palco-surgir 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; /* Entra com impacto. */
}

.jogo-aviso--podio .jogo-aviso__icone {
    border: 0; /* Sem anel. */
    color: #3b2a06; /* Texto escuro. */
    background: linear-gradient(180deg, #f5d58a, #c99a3a); /* Medalha dourada. */
}

.jogo-aviso__icone--posicao {
    font-size: 2.25rem; /* Posição (ex.: 12º) cabe no círculo. */
}

.jogo-aviso--erro .jogo-aviso__icone {
    border-color: rgb(248 113 113 / 50%); /* Anel vermelho. */
    color: #fca5a5; /* Símbolo vermelho claro. */
}

.jogo-aviso__titulo {
    margin: 0; /* Sem margens. */
    font-size: 1.75rem; /* Título. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.01em; /* Visual refinado. */
}

.jogo-aviso--resultado .jogo-aviso__titulo {
    font-size: 2.25rem; /* Título maior no resultado. */
}

.jogo-aviso__texto {
    max-width: 22rem; /* Linhas curtas. */
    margin: 0; /* Sem margens. */
    color: rgb(248 250 252 / 75%); /* Texto de apoio. */
    font-size: 1.0625rem; /* Texto legível. */
    line-height: 1.45; /* Leitura confortável. */
}

.jogo-aviso__link {
    margin-top: 8px; /* Espaço acima. */
    padding: 12px 20px; /* Botão confortável. */
    border-radius: 12px; /* Cantos. */
    color: var(--palco-acao-texto); /* Texto do botão principal (branco no padrão). */
    background: var(--palco-azul); /* Azul. */
    font-weight: 600; /* Leve destaque. */
    text-decoration: none; /* Sem sublinhado. */
}

.jogo__mensagem {
    min-height: 1.5em; /* Reserva espaço para a mensagem. */
    margin: 0; /* Sem margens. */
    padding: 0 16px 12px; /* Margem de 16px nas laterais. */
    color: #cbd5e1; /* Texto claro. */
    font-size: 0.875rem; /* Texto pequeno. */
    text-align: center; /* Centralizado. */
}

/* Animações do telão e do celular --------------------------------------------- */

@keyframes palco-pulso {
    50% { opacity: 0.45; } /* Pisca suavemente. */
}

@keyframes palco-surgir {
    from { opacity: 0; transform: scale(0.92); } /* Começa menor e transparente. */
}

@keyframes palco-subir {
    from { opacity: 0; transform: translateY(40px); } /* Começa abaixo e transparente. */
}

@keyframes palco-barra {
    from { width: 0; } /* A barra de votos cresce do zero. */
}

@keyframes palco-anel {
    0% { box-shadow: 0 0 0 0 rgb(56 189 248 / 45%); } /* Onda começa no anel. */
    100% { box-shadow: 0 0 0 22px rgb(56 189 248 / 0%); } /* Onda se expande e some. */
}

@media (prefers-reduced-motion: reduce) {
    .pagina-palco *,
    .pagina-jogo * {
        animation: none !important; /* Sem animações para quem prefere menos movimento. */
        transition: none !important; /* Sem transições. */
    }
}

/* =============================================================================
   VER PERGUNTAS — destaque da alternativa correta
   ============================================================================= */
:root {
    --admin-correta: #10b981; /* Verde esmeralda do destaque da resposta correta. */
    --admin-correta-fundo: rgb(16 185 129 / 10%); /* Fundo verde bem sutil. */
    --admin-correta-borda: rgb(16 185 129 / 30%); /* Borda verde discreta. */
}

.lista-alternativas {
    display: grid; /* Alternativas empilhadas... */
    gap: var(--espaco-2); /* ...com espaço uniforme entre elas. */
}

.pagina-painel .admin-painel .alternativa {
    display: flex; /* Texto e selo na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Texto à esquerda, selo à direita. */
    gap: var(--espaco-3); /* Espaço mínimo entre texto e selo. */
    margin: 0; /* O espaçamento vem da grade. */
    border: 1px solid transparent; /* Reserva a borda para não deslocar o texto... */
    border-left-width: 4px; /* ...nem a faixa da correta. */
}

.pagina-painel .admin-painel .alternativa--correta {
    border-color: var(--admin-correta-borda); /* Borda verde sutil. */
    border-left-color: var(--admin-correta); /* Faixa esmeralda à esquerda. */
    color: #ffffff; /* Texto branco puro. */
    background: var(--admin-correta-fundo); /* Fundo verde translúcido. */
    font-weight: 500; /* Texto levemente mais forte. */
}

.alternativa__selo {
    flex: none; /* O selo não encolhe nem quebra. */
    color: var(--admin-correta); /* Verde esmeralda. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.04em; /* Espaçamento leve. */
    white-space: nowrap; /* Uma linha. */
}
/* =============================================================================
   RANKING DA RODADA E PÓDIO FINAL
   Durante a partida o telão mostra só os melhores de cada pergunta (pontos da
   pergunta + tempo). O acumulado aparece apenas no pódio final.
   ============================================================================= */
.ranking-palco__pontos {
    color: var(--palco-ouro); /* Pontos da pergunta em dourado. */
}

.ranking-palco__tempo {
    min-width: 3.5rem; /* Coluna de tempo alinhada entre as linhas. */
    color: var(--palco-texto-apoio); /* Tempo em tom de apoio. */
    font-size: 0.875rem; /* Menor que os pontos. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
    text-align: right; /* Alinhado à direita. */
}

.ranking-palco__vazio {
    padding: 1rem; /* Espaço interno. */
    border: 1px dashed var(--palco-borda); /* Contorno tracejado. */
    border-radius: 10px; /* Cantos. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    text-align: center; /* Centralizado. */
}

.final-palco__campeao {
    min-height: 1.5em; /* Reserva a linha mesmo vazia. */
    margin: 0.75rem 0 0; /* Espaço abaixo do título. */
    color: var(--palco-ouro); /* Dourado. */
    font-size: clamp(1.25rem, 2.2vw, 1.875rem); /* Destaque. */
    font-weight: 700; /* Negrito. */
    text-shadow: 0 0 32px rgb(229 189 113 / 40%); /* Brilho dourado. */
    animation: palco-surgir 0.6s ease-out 1.1s both; /* Aparece depois que o pódio sobe. */
}

/* Celular: posição na rodada abaixo dos pontos. */
.jogo-aviso__posicao {
    margin: 0; /* Sem margens. */
    padding: 6px 14px; /* Cápsula. */
    border-radius: 999px; /* Formato de cápsula. */
    background: rgb(255 255 255 / 14%); /* Fundo claro translúcido. */
    font-size: 0.9375rem; /* Texto. */
    font-weight: 700; /* Negrito. */
}

.jogo__placar[hidden] {
    display: none; /* Pontos só aparecem no resultado da rodada. */
}

/* =============================================================================
   PAUSAR / RETOMAR TEMPO
   Âmbar = tempo congelado, no telão e no celular.
   ============================================================================= */
:root {
    --palco-pausa: #f59e0b; /* Âmbar do estado pausado. */
    --palco-pausa-claro: #fcd34d; /* Âmbar claro para textos sobre fundo escuro. */
}

/* Botão de alternância no painel de comando. */
.botao-comando--pausa .icone-retomar,
.botao-comando--pausado .icone-pausar {
    display: none; /* Mostra só o ícone da ação disponível. */
}

.botao-comando--pausado .icone-retomar {
    display: inline; /* Pausado: ícone de "play" para retomar. */
}

.botao-comando--pausado {
    border-color: var(--palco-pausa); /* Borda âmbar. */
    color: #1c1503; /* Texto escuro... */
    background: var(--palco-pausa); /* ...sobre âmbar sólido: "Retomar" chama atenção. */
    box-shadow: 0 10px 24px -10px rgb(245 158 11 / 70%); /* Brilho âmbar. */
    animation: palco-pulso-suave 1.6s ease-in-out infinite; /* Pulsa para lembrar que está pausado. */
}

.botao-comando--pausado:hover:not(:disabled) {
    border-color: var(--palco-pausa-claro); /* Borda mais clara. */
    background: var(--palco-pausa-claro); /* Âmbar mais claro. */
}

.comando__estado[data-estado="pausado"] .comando__ponto {
    background: var(--palco-pausa); /* Indicador âmbar no status. */
}

/* Cronômetro do telão congelado. */
.cronometro__pausa {
    display: none; /* Só aparece durante a pausa. */
}

.cronometro--pausado .cronometro__arco {
    stroke: var(--palco-pausa); /* Anel âmbar. */
    filter: drop-shadow(0 0 10px rgb(245 158 11 / 60%)); /* Brilho âmbar. */
    transition: none; /* Congela sem animar. */
}

.cronometro--pausado .cronometro__numero {
    color: var(--palco-pausa-claro); /* Número âmbar. */
    animation: none; /* Sem pulsar, mesmo nos últimos segundos. */
    transform: translateY(-0.35em); /* Abre espaço para o rótulo "Pausado". */
}

.cronometro--pausado .cronometro__pausa {
    position: absolute; /* Sobre o anel... */
    right: 0; /* ...ocupando a largura... */
    bottom: 26%; /* ...abaixo do número. */
    left: 0; /* Largura total. */
    display: block; /* Visível na pausa. */
    color: var(--palco-pausa-claro); /* Âmbar. */
    font-size: clamp(0.5625rem, 1.1vh, 0.75rem); /* Rótulo pequeno. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: 0.16em; /* Espaçamento de rótulo. */
    text-align: center; /* Centralizado. */
    text-transform: uppercase; /* Maiúsculas. */
}

/* Celular: cronômetro congelado e botões bloqueados com aviso por cima. */
.jogo__cronometro--pausado,
.jogo__cronometro--pausado.jogo__cronometro--alerta {
    border-color: var(--palco-pausa); /* Anel âmbar. */
    color: var(--palco-pausa-claro); /* Número âmbar. */
    animation: none; /* Sem pulsar. */
}

.jogo-botoes {
    position: relative; /* Referência para o aviso de pausa. */
}

.jogo-botoes--pausado .jogo-botao {
    opacity: 0.25; /* Botões apagados... */
    filter: saturate(0.3) blur(1px); /* ...e desfocados: claramente indisponíveis. */
}

.jogo-pausa {
    position: absolute; /* Cobre a grade de botões. */
    inset: 0; /* Ocupa toda a área. */
    display: flex; /* Conteúdo centralizado. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centro horizontal. */
    justify-content: center; /* Centro vertical. */
    gap: 10px; /* Espaço entre os elementos. */
    padding: 24px; /* Espaço interno. */
    border: 2px solid rgb(245 158 11 / 45%); /* Contorno âmbar. */
    border-radius: 18px; /* Mesmos cantos dos botões. */
    background: rgb(15 23 42 / 72%); /* Véu escuro sobre os botões. */
    backdrop-filter: blur(2px); /* Desfoca o fundo. */
    text-align: center; /* Texto centralizado. */
    animation: palco-surgir 0.25s ease-out both; /* Entra rápido. */
}

.jogo-pausa__icone {
    display: grid; /* Centraliza o símbolo. */
    place-items: center; /* Centro. */
    width: 4.5rem; /* Círculo. */
    height: 4.5rem; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    color: #1c1503; /* Símbolo escuro... */
    background: var(--palco-pausa); /* ...sobre âmbar. */
    font-size: 1.5rem; /* Símbolo de pausa. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.1em; /* Aproxima as duas barras. */
}

.jogo-pausa__titulo {
    font-size: 1.75rem; /* Título. */
    font-weight: 800; /* Extra negrito. */
}

.jogo-pausa__texto {
    color: rgb(248 250 252 / 80%); /* Texto de apoio. */
    font-size: 1.0625rem; /* Texto legível. */
}

@keyframes palco-pulso-suave {
    50% { box-shadow: 0 10px 28px -6px rgb(245 158 11 / 90%); } /* O brilho do botão "Retomar" respira. */
}
/* =============================================================================
   TROCA DE QUIZ NA SALA DE ESPERA (painel de comando do telão)
   ============================================================================= */
.comando__troca {
    display: flex; /* Rótulo, seletor e dica empilhados. */
    flex-direction: column; /* De cima para baixo. */
}

.comando__troca[hidden] {
    display: none; /* Só aparece na sala de espera. */
}

.comando__seletor {
    width: 100%; /* Largura do painel. */
    min-height: 2.75rem; /* Mesma altura dos botões de comando. */
    padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* Espaço para a seta à direita. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: 8px; /* Cantos dos botões de comando. */
    color: var(--palco-texto); /* Texto claro. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem,
        var(--palco-fundo); /* Fundo escuro com seta própria. */
    font: 600 0.875rem/1.3 var(--palco-fonte); /* Tipografia dos controles. */
    cursor: pointer; /* Indica clique. */
    appearance: none; /* Remove o visual padrão do navegador. */
}

.comando__seletor:hover:not(:disabled) {
    border-color: rgb(148 163 184 / 32%); /* Borda mais visível. */
}

.comando__seletor:disabled {
    cursor: wait; /* Aguardando o servidor. */
    opacity: 0.6; /* Esmaecido. */
}

.comando__seletor option {
    color: var(--palco-texto); /* Opções legíveis... */
    background: var(--palco-comando); /* ...sobre fundo escuro. */
}

.comando__dica {
    margin: 0.375rem 0 0; /* Próxima do seletor. */
    color: var(--palco-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
    line-height: 1.4; /* Leitura confortável. */
}
/* =============================================================================
   TROCA DE QUIZ NA SALA DE ESPERA (painel de comando do telão)
   Menu suspenso + botão "Trocar quiz": a sala, o PIN e os jogadores continuam.
   ============================================================================= */
.comando__troca {
    display: flex; /* Rótulo, seletor, botão e dica empilhados. */
    flex-direction: column; /* De cima para baixo. */
    gap: 0.5rem; /* Espaço entre os elementos. */
}

.comando__troca[hidden] {
    display: none; /* Só aparece na sala de espera. */
}

.comando__troca .comando__rotulo {
    margin: 0; /* O espaçamento vem do gap. */
}

.comando__seletor {
    width: 100%; /* Largura do painel. */
    min-height: 2.75rem; /* Mesma altura dos botões de comando. */
    padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* Espaço para a seta à direita. */
    border: 1px solid var(--palco-borda); /* Borda discreta. */
    border-radius: 8px; /* Cantos dos botões de comando. */
    color: var(--palco-texto); /* Texto claro. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem,
        var(--palco-fundo); /* Fundo escuro com seta própria. */
    font: 600 0.875rem/1.3 var(--palco-fonte); /* Tipografia dos controles. */
    cursor: pointer; /* Indica clique. */
    appearance: none; /* Remove o visual padrão do navegador. */
}

.comando__seletor:hover:not(:disabled) {
    border-color: rgb(148 163 184 / 32%); /* Borda mais visível. */
}

.comando__seletor:disabled {
    cursor: wait; /* Aguardando o servidor. */
    opacity: 0.6; /* Esmaecido. */
}

.comando__seletor option {
    color: var(--palco-texto); /* Opções legíveis... */
    background: var(--palco-comando); /* ...sobre fundo escuro. */
}

#botaoTrocarQuiz:disabled {
    cursor: not-allowed; /* Inativo até escolher outro quiz (não é espera do servidor). */
}

.comando__dica {
    margin: 0; /* O espaçamento vem do gap. */
    color: var(--palco-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
    line-height: 1.4; /* Leitura confortável. */
}
/* =============================================================================
   EDITOR DE PERGUNTAS EM MASSA ("Ver perguntas")
   Campos que se fundem ao cartão (borda só no foco), ferramentas discretas por
   cartão e barra de salvar presa à base da tela.
   ============================================================================= */
:root {
    --editor-campo-foco: rgb(91 143 199 / 55%); /* Borda azul suave no foco. */
    --editor-campo-hover: rgb(148 163 184 / 8%); /* Fundo leve ao passar o ponteiro. */
    --editor-perigo: #f87171; /* Vermelho sutil do botão excluir. */
    --editor-salvar: #059669; /* Verde corporativo do botão salvar. */
    --editor-salvar-hover: #047857; /* Verde mais escuro no hover. */
}

.editor-seletor {
    max-width: 28rem; /* Seletor de quiz com largura contida. */
}

.editor-lista {
    display: grid; /* Cartões empilhados. */
    gap: var(--espaco-4); /* Espaço entre cartões. */
    margin-top: var(--espaco-4); /* Espaço acima da lista. */
}

/* Cartão de pergunta */
.editor-pergunta {
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-5); /* Espaço interno. */
    border: 1px solid var(--cor-borda-escura); /* Borda do tema escuro. */
    border-radius: var(--raio-medio); /* Cantos arredondados. */
    background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease; /* Suaviza destaques. */
}

.editor-pergunta:focus-within {
    border-color: rgb(91 143 199 / 45%); /* Realça o cartão em edição. */
}

.editor-pergunta--nova {
    border-style: dashed; /* Pergunta ainda não salva (criada por "Duplicar"). */
}

.editor-pergunta--erro {
    border-color: var(--cor-feedback-erro-claro); /* Pergunta com erro de validação. */
    box-shadow: 0 0 0 1px var(--cor-feedback-erro-claro); /* Contorno reforçado. */
}

.editor-pergunta__topo {
    display: flex; /* Número e ferramentas na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Ferramentas à direita. */
    gap: var(--espaco-3); /* Espaço mínimo. */
    margin-bottom: var(--espaco-2); /* Espaço até o enunciado. */
}

.editor-pergunta__numero {
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

.editor-pergunta__ferramentas {
    display: flex; /* Botões lado a lado. */
    gap: 2px; /* Bem próximos. */
}

/* Botões pequenos de ícone (subir, descer, duplicar, excluir) */
body.pagina-painel .admin-painel .ferramenta {
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    width: 2rem; /* Botão quadrado pequeno. */
    min-height: 2rem; /* Altura igual à largura. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0; /* Sem preenchimento herdado. */
    border: 1px solid transparent; /* Sem borda em repouso. */
    border-radius: 6px; /* Cantos discretos. */
    color: var(--admin-texto-apoio); /* Ícone em tom de apoio. */
    background: transparent; /* Sem fundo: discreto. */
}

body.pagina-painel .admin-painel .ferramenta:hover:not(:disabled) {
    border-color: var(--cor-borda-escura); /* Borda ao passar o ponteiro. */
    color: var(--cor-texto-claro); /* Ícone mais claro. */
    background: var(--cor-painel-escuro); /* Fundo sutil. */
}

body.pagina-painel .admin-painel .ferramenta:disabled {
    cursor: default; /* Não clicável (ex.: subir a primeira). */
    opacity: 0.3; /* Bem apagado. */
}

body.pagina-painel .admin-painel .ferramenta--perigo:hover:not(:disabled) {
    border-color: rgb(248 113 113 / 40%); /* Borda vermelha sutil. */
    color: var(--editor-perigo); /* Ícone vermelho. */
    background: rgb(248 113 113 / 10%); /* Fundo vermelho sutil. */
}

.ferramenta svg {
    width: 1rem; /* Ícone pequeno. */
    height: 1rem; /* Ícone pequeno. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do botão. */
    stroke-width: 2; /* Espessura. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

body.pagina-painel .editor-pergunta__rotulo {
    display: block; /* Rótulo em linha própria. */
    margin: var(--espaco-3) 0 2px; /* Próximo do campo. */
    padding: 0; /* Sem preenchimento de legenda. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

/* Campos que se fundem ao cartão: sem borda visível até o foco. */
body.pagina-painel .editor-pergunta .campo-inline {
    width: 100%; /* Ocupa o espaço disponível. */
    min-height: 0; /* Sem altura mínima herdada. */
    margin: 0; /* Sem margens herdadas. */
    padding: 6px 10px; /* Preenchimento compacto. */
    border: 1px solid transparent; /* Invisível em repouso. */
    border-radius: 6px; /* Cantos discretos. */
    color: var(--cor-texto-claro); /* Texto claro. */
    background: transparent; /* Funde com o cartão. */
    font-size: 0.9375rem; /* Texto legível. */
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; /* Suaviza o foco. */
}

body.pagina-painel .editor-pergunta .campo-inline:hover {
    background: var(--editor-campo-hover); /* Indica que é editável. */
}

body.pagina-painel .editor-pergunta .campo-inline:focus {
    border-color: var(--editor-campo-foco); /* Borda sutil só no foco. */
    outline: none; /* Substitui o contorno padrão... */
    background: var(--cor-fundo-escuro); /* ...por fundo mais escuro... */
    box-shadow: 0 0 0 3px rgb(91 143 199 / 15%); /* ...e um brilho suave. */
}

body.pagina-painel .editor-pergunta .campo-inline--enunciado {
    min-height: 3.25rem; /* Duas linhas. */
    font-size: 1.0625rem; /* Enunciado em destaque. */
    font-weight: 600; /* Negrito leve. */
    line-height: 1.4; /* Leitura confortável. */
    resize: vertical; /* Pode crescer para baixo. */
}

/* Tempo e pontuação */
.editor-pergunta__metas {
    display: flex; /* Lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-2) var(--espaco-5); /* Espaço entre os dois. */
    margin-top: var(--espaco-2); /* Espaço acima. */
}

body.pagina-painel .editor-meta {
    display: flex; /* Rótulo, campo e unidade em linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 4px; /* Bem próximos. */
    margin: 0; /* Sem margem de rótulo herdada. */
}

.editor-meta__rotulo,
.editor-meta__unidade {
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .editor-pergunta .campo-inline--numero {
    width: 5.5rem; /* Largura de número. */
    text-align: right; /* Números alinhados à direita. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

/* Alternativas: grade 2x2 com marcador de correta */
body.pagina-painel .editor-alternativas {
    display: grid; /* Grade das alternativas. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    gap: 6px var(--espaco-3); /* Espaço entre alternativas. */
    margin: 0; /* Sem margem de fieldset herdada. */
    padding: 0; /* Sem preenchimento de fieldset herdado. */
    border: 0; /* Sem borda de fieldset. */
}

body.pagina-painel .editor-alternativas legend {
    grid-column: 1 / -1; /* Legenda ocupa a linha toda. */
    float: left; /* Permite a legenda participar da grade. */
    width: 100%; /* Linha inteira. */
}

.editor-alternativa {
    display: flex; /* Marcador, campo e selo em linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 6px; /* Espaço entre os elementos. */
    padding: 3px 8px 3px 3px; /* Espaço interno. */
    border: 1px solid transparent; /* Reserva a borda... */
    border-left: 4px solid transparent; /* ...e a faixa da correta, sem deslocar o texto. */
    border-radius: 6px; /* Cantos discretos. */
    background: var(--cor-fundo-escuro); /* Faixa escura por alternativa. */
    transition: background-color 0.15s ease, border-color 0.15s ease; /* Suaviza a troca da correta. */
}

.editor-alternativa--correta {
    border-color: var(--admin-correta-borda); /* Borda verde sutil. */
    border-left-color: var(--admin-correta); /* Faixa esmeralda. */
    background: var(--admin-correta-fundo); /* Fundo verde translúcido. */
}

body.pagina-painel .editor-alternativa__marcador {
    position: relative; /* Referência para o radio invisível. */
    flex: none; /* Não encolhe. */
    margin: 0; /* Sem margem de rótulo herdada. */
    cursor: pointer; /* Indica clique. */
}

/* O radio nativo fica invisível (mas acessível); a letra é o botão visível. */
body.pagina-painel .editor-alternativa__marcador input[type="radio"] {
    position: absolute; /* Sobre a letra. */
    inset: 0; /* Mesma área da letra. */
    width: 100%; /* Área de clique da letra inteira. */
    height: 100%; /* Área de clique da letra inteira. */
    margin: 0; /* Sem margens. */
    opacity: 0; /* Invisível. */
    cursor: pointer; /* Indica clique. */
}

.editor-alternativa__letra {
    display: grid; /* Centraliza a letra. */
    place-items: center; /* Centro. */
    width: 1.875rem; /* Círculo. */
    height: 1.875rem; /* Círculo. */
    border: 1px solid var(--cor-borda-escura); /* Contorno discreto. */
    border-radius: 50%; /* Círculo. */
    color: var(--admin-texto-apoio); /* Letra em tom de apoio. */
    font-size: 0.8125rem; /* Letra. */
    font-weight: 700; /* Negrito. */
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; /* Suaviza a seleção. */
}

.editor-alternativa__marcador:hover .editor-alternativa__letra {
    border-color: var(--admin-correta); /* Prévia verde ao passar o ponteiro. */
    color: var(--admin-correta); /* Letra verde. */
}

.editor-alternativa__marcador input:checked + .editor-alternativa__letra {
    border-color: var(--admin-correta); /* Correta: contorno verde... */
    color: #04130d; /* ...letra escura... */
    background: var(--admin-correta); /* ...sobre verde sólido. */
}

.editor-alternativa__marcador input:focus-visible + .editor-alternativa__letra {
    outline: 2px solid var(--editor-campo-foco); /* Foco visível pelo teclado. */
    outline-offset: 2px; /* Afastado da letra. */
}

.editor-alternativa__selo {
    display: none; /* Só aparece na correta. */
    flex: none; /* Não encolhe. */
    color: var(--admin-correta); /* Verde esmeralda. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
    white-space: nowrap; /* Uma linha. */
}

.editor-alternativa--correta .editor-alternativa__selo {
    display: inline; /* "✓ Correta" na alternativa marcada. */
}

/* Barra de ações globais presa à base da tela */
.barra-salvar {
    position: sticky; /* Acompanha a rolagem... */
    bottom: var(--espaco-3); /* ...presa perto da base da tela. */
    z-index: 5; /* Acima dos cartões. */
    display: flex; /* Status e botões em linha. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Status à esquerda, botões à direita. */
    gap: var(--espaco-3); /* Espaço entre os blocos. */
    margin-top: var(--espaco-5); /* Espaço acima. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: 1px solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: rgb(16 27 42 / 92%); /* Fundo escuro quase opaco. */
    box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 60%); /* Sombra para cima: flutua sobre os cartões. */
    backdrop-filter: blur(6px); /* Desfoca o que passa por baixo. */
}

.barra-salvar[hidden] {
    display: none; /* Só aparece com um quiz carregado. */
}

.pagina-painel .admin-painel .barra-salvar__status {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.875rem; /* Texto. */
}

.pagina-painel .admin-painel .barra-salvar--alterada .barra-salvar__status {
    color: var(--cor-destaque); /* Dourado: há alterações pendentes. */
    font-weight: 600; /* Leve destaque. */
}

.barra-salvar__acoes {
    display: flex; /* Botões lado a lado. */
    gap: var(--espaco-2); /* Espaço entre eles. */
}

body.pagina-painel .admin-painel .barra-salvar button {
    margin: 0; /* Sem margens herdadas. */
}

body.pagina-painel .admin-painel .barra-salvar__salvar {
    border-color: var(--editor-salvar); /* Borda verde. */
    background: var(--editor-salvar); /* Verde corporativo. */
}

body.pagina-painel .admin-painel .barra-salvar__salvar:hover:not(:disabled) {
    background: var(--editor-salvar-hover); /* Verde mais escuro. */
}

body.pagina-painel .admin-painel .barra-salvar button:disabled {
    cursor: default; /* Nada a salvar/descartar. */
    opacity: 0.45; /* Apagado. */
}

@media (max-width: 40rem) {
    body.pagina-painel .editor-alternativas {
        grid-template-columns: minmax(0, 1fr); /* Uma alternativa por linha no celular. */
    }
}
/* =============================================================================
   MODAL "COMO JOGAR" (telão)
   Botão "? Como jogar" no canto do palco + dialog nativo com fundo desfocado e uma
   cena animada em HTML+CSS (ler no telão → responder no celular), nas cores do tema.
   ============================================================================= */

/* Texto só para leitores de tela (invisível na tela). */
.visualmente-oculto {
    position: absolute; /* Fora do fluxo. */
    width: 1px; /* Tamanho mínimo. */
    height: 1px; /* Tamanho mínimo. */
    overflow: hidden; /* Oculta o conteúdo. */
    clip: rect(0 0 0 0); /* Recorta tudo. */
    white-space: nowrap; /* Evita quebra de linha. */
}

.palco-jogo {
    position: relative; /* Referência para o botão "?" no canto. */
}

/* Botão do canto do palco: "? Como jogar" na espera; só o "?" durante a partida. */
.palco-ajuda {
    position: absolute; /* Flutua sobre o palco... */
    top: 12px; /* ...no canto superior... */
    right: 12px; /* ...direito. */
    z-index: 2; /* Acima das cenas. */
    display: inline-flex; /* Ícone e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.5rem; /* Espaço entre ícone e texto. */
    height: 40px; /* Altura confortável. */
    padding: 0 1rem 0 5px; /* Cápsula: o círculo do "?" encosta na esquerda. */
    border: 1px solid var(--palco-borda); /* Contorno tom sobre tom. */
    border-radius: 999px; /* Cápsula. */
    color: var(--palco-texto); /* Texto claro. */
    background: var(--palco-superficie); /* Vidro. */
    backdrop-filter: blur(8px); /* Desfoca o palco atrás. */
    font: 600 0.9375rem/1 var(--palco-fonte); /* Texto legível. */
    cursor: pointer; /* Indica clique. */
    opacity: 0.85; /* Presente, sem gritar. */
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, padding 0.2s ease; /* Hover suave. */
}

.palco-ajuda__icone {
    display: grid; /* Centraliza o "?". */
    place-items: center; /* Centro. */
    width: 30px; /* Círculo do "?". */
    height: 30px; /* Círculo do "?". */
    border-radius: 50%; /* Círculo. */
    color: var(--palco-acao-texto); /* "?" no contraste do botão principal... */
    background: linear-gradient(180deg, var(--palco-azul-claro), var(--palco-azul)); /* ...com a cor de ação do tema. */
    font-size: 1rem; /* "?" legível. */
    font-weight: 800; /* Extra negrito. */
}

.palco-ajuda:hover,
.palco-ajuda:focus-visible {
    border-color: var(--palco-azul-claro); /* Contorno na cor de ação. */
    box-shadow: 0 0 24px -6px var(--palco-acao-sombra); /* Brilho. */
    opacity: 1; /* Totalmente visível. */
    transform: translateY(-1px); /* Sobe levemente. */
}

/* Durante a partida: só o círculo, discreto (o canto divide espaço com a contagem de respostas). */
.palco-ajuda--compacto {
    gap: 0; /* Sem espaço para texto. */
    padding: 0 4px; /* Só o círculo. */
    opacity: 0.55; /* Discreto. */
}

.palco-ajuda--compacto .palco-ajuda__texto {
    position: absolute; /* Texto continua para leitores de tela... */
    width: 1px; /* ...mas some da tela. */
    height: 1px; /* ...mas some da tela. */
    overflow: hidden; /* Recorta. */
    clip: rect(0 0 0 0); /* Recorta tudo. */
}

/* Dialog: caixa de vidro grande, centralizada, feita para ser lida de longe. */
.modal-regras {
    width: min(100% - 2rem, 88rem); /* Grande no telão. */
    max-width: none; /* Sem o limite padrão do navegador. */
    max-height: calc(100vh - 2rem); /* Cabe na altura da TV. */
    padding: 0; /* A caixa interna define o espaço. */
    border: 0; /* Sem borda padrão. */
    color: var(--palco-texto); /* Texto do tema. */
    background: transparent; /* A cor vem da caixa interna. */
}

.modal-regras::backdrop {
    background: rgb(2 6 23 / 72%); /* Escurece o jogo... */
    backdrop-filter: blur(8px); /* ...e desfoca: a atenção vai para a explicação. */
}

.modal-regras[open] {
    animation: palco-surgir 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; /* Entra com um leve "pop". */
}

.modal-regras__caixa {
    position: relative; /* Referência para o botão fechar. */
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 3.5vw, 3.5rem); /* Respiro generoso. */
    border: 1px solid rgb(255 255 255 / 12%); /* Borda de vidro. */
    border-radius: 28px; /* Cantos generosos. */
    background:
        radial-gradient(60% 50% at 15% 0%, rgb(124 58 237 / 18%), transparent 70%),
        radial-gradient(50% 45% at 90% 100%, rgb(34 211 238 / 12%), transparent 70%),
        color-mix(in srgb, var(--palco-comando) 86%, transparent); /* Glassmorphism na cor do painel do tema. */
    backdrop-filter: blur(18px) saturate(140%); /* Vidro. */
    box-shadow: 0 40px 90px -24px rgb(0 0 0 / 75%), inset 0 1px 0 rgb(255 255 255 / 8%); /* Flutua sobre o telão + reflexo. */
    text-align: center; /* Título centralizado. */
}

.modal-regras__fechar {
    position: absolute; /* No canto... */
    top: 16px; /* ...superior... */
    right: 16px; /* ...direito. */
    display: grid; /* Centraliza o X. */
    place-items: center; /* Centro. */
    width: 44px; /* Botão confortável. */
    height: 44px; /* Botão confortável. */
    padding: 0; /* Sem preenchimento. */
    border: 1px solid var(--palco-borda); /* Contorno discreto. */
    border-radius: 50%; /* Círculo. */
    color: var(--palco-texto-apoio); /* X discreto. */
    background: var(--palco-superficie); /* Vidro. */
    cursor: pointer; /* Indica clique. */
    transition: color 0.15s ease, transform 0.3s ease; /* Hover suave. */
}

.modal-regras__fechar:hover {
    color: var(--palco-texto); /* X claro... */
    transform: rotate(90deg); /* ...girando um quarto de volta. */
}

.modal-regras__fechar svg {
    width: 1.25rem; /* Ícone. */
    height: 1.25rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do botão. */
    stroke-width: 2; /* Espessura. */
    stroke-linecap: round; /* Pontas arredondadas. */
}

.modal-regras__titulo {
    margin: 0.25rem 0 clamp(1.25rem, 3vh, 2.25rem); /* Espaço até a cena. */
    font-size: clamp(2rem, 3.6vw, 3.75rem); /* Título de impacto, legível de longe. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.03em; /* Visual refinado. */
    line-height: 1.05; /* Compacto. */
}

/* ---------- Cena dupla: telão (1) → seta → celular (2). Ciclo de 8 s. ---------- */
.como-jogar {
    --cj-altura: clamp(13rem, 36vh, 26rem); /* Altura comum das duas molduras (cabe na TV). */
    --cj-ciclo: 8s; /* Mesma duração em tudo: as duas cenas andam juntas. */
    display: grid; /* Telão, seta e celular lado a lado. */
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1.2fr); /* Telão maior; a frase do celular cabe em 2 linhas. */
    align-items: end; /* Molduras alinhadas pela base. */
    gap: clamp(1rem, 2.5vw, 2.5rem); /* Espaço entre as colunas. */
}

.como-jogar__passo {
    display: flex; /* Texto em cima, moldura embaixo. */
    flex-direction: column; /* Empilhados. */
    align-items: center; /* Centralizados. */
    gap: clamp(1rem, 2.4vh, 1.75rem); /* Espaço até a moldura. */
    min-width: 0; /* Pode encolher. */
}

.como-jogar__texto {
    display: flex; /* Número e frase. */
    align-items: center; /* Centralizados. */
    justify-content: center; /* No meio da coluna. */
    gap: 0.75rem; /* Espaço entre número e frase. */
    min-height: 2.6em; /* Duas linhas reservadas: as molduras ficam na mesma altura. */
    margin: 0; /* Sem margens. */
    font-size: clamp(1.25rem, 1.9vw, 2rem); /* Frase grande para a plateia. */
    font-weight: 700; /* Negrito. */
    line-height: 1.2; /* Compacto. */
    text-align: left; /* Frase alinhada ao número. */
}

.como-jogar__numero {
    display: grid; /* Centraliza o número. */
    flex: 0 0 auto; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: 1.8em; /* Círculo. */
    height: 1.8em; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    color: var(--palco-acao-texto); /* Número no contraste da ação. */
    background: linear-gradient(180deg, var(--palco-azul-claro), var(--palco-azul)); /* Cor de ação do tema. */
    box-shadow: 0 0 0 0 var(--palco-acao-sombra); /* Brilho controlado pela animação. */
    font-size: 0.8em; /* Proporcional à frase. */
    font-weight: 800; /* Extra negrito. */
}

/* O número da etapa da vez acende (1 enquanto o telão mostra a pergunta; 2 no celular). */
.como-jogar__passo--1 .como-jogar__numero { animation: cj-vez-1 var(--cj-ciclo) ease-in-out infinite; }
.como-jogar__passo--2 .como-jogar__numero { animation: cj-vez-2 var(--cj-ciclo) ease-in-out infinite; }

.como-jogar__seta {
    align-self: center; /* No meio da altura das molduras. */
    margin-top: 2.6em; /* Desconta a linha do texto acima. */
    color: var(--palco-ciano); /* Ciano. */
    animation: cj-seta var(--cj-ciclo) ease-in-out infinite; /* Pulsa na hora de olhar o celular. */
}

.como-jogar__seta svg {
    width: clamp(2rem, 3.5vw, 3.25rem); /* Seta grande. */
    height: clamp(2rem, 3.5vw, 3.25rem); /* Seta grande. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor da seta. */
    stroke-width: 2.5; /* Traço firme. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

/* Mockup do telão (todas as medidas internas em cqw = % da largura da tela). */
.cj-telao {
    container-type: inline-size; /* cqw = % da largura da moldura (vale também para o padding da tela). */
    width: min(100%, var(--cj-altura) * 1.6); /* Proporção 16:10 com a altura comum. */
    padding: 1.2%; /* Moldura da TV. */
    border-radius: 18px; /* Cantos da TV. */
    background: linear-gradient(160deg, #334155, #0b1020); /* Moldura metálica escura. */
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / 75%), 0 0 60px -20px var(--palco-acao-sombra); /* Sombra + brilho do tema. */
}

.cj-telao__tela {
    display: grid; /* Topo, pergunta e alternativas. */
    grid-template-rows: auto auto 1fr; /* Alternativas ocupam o resto. */
    aspect-ratio: 16 / 10; /* Tela de TV. */
    padding: 4cqw 4.5cqw; /* Respiro. */
    overflow: hidden; /* Recorta. */
    border-radius: 12px; /* Cantos da tela. */
    background:
        var(--palco-textura),
        radial-gradient(80% 60% at 50% 0%, var(--palco-brilho-topo), transparent 70%),
        var(--palco-fundo); /* O mesmo palco do tema. */
}

.cj-telao__topo {
    display: flex; /* Rótulo e relógio. */
    align-items: center; /* Centralizados. */
    justify-content: space-between; /* Nas pontas. */
    color: var(--palco-texto-rotulo); /* Rótulo do tema. */
    font-size: 2.2cqw; /* Rótulo. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.12em; /* Espaçado. */
}

.cj-relogio {
    width: 8cqw; /* Anel do cronômetro. */
    height: 8cqw; /* Anel do cronômetro. */
    transform: rotate(-90deg); /* Começa no topo. */
    fill: none; /* Só traço. */
    stroke-width: 4; /* Espessura do anel. */
}

.cj-relogio circle:first-child {
    stroke: var(--palco-borda); /* Trilho. */
}

.cj-relogio__arco {
    stroke: var(--palco-ciano); /* Cor do tempo no tema. */
    stroke-dasharray: 94.25; /* Circunferência (2πr). */
    stroke-dashoffset: 40; /* Quadro final: tempo correndo. */
    stroke-linecap: round; /* Ponta arredondada. */
    animation: cj-relogio var(--cj-ciclo) linear infinite; /* Esvazia enquanto a plateia responde. */
}

.cj-telao__pergunta {
    margin: 3cqw 0 4cqw; /* Respiro em volta. */
    font-size: 5.2cqw; /* Pergunta grande, como no telão real. */
    font-weight: 800; /* Extra negrito. */
    line-height: 1.15; /* Compacto. */
    animation: cj-pergunta var(--cj-ciclo) cubic-bezier(0.2, 0.9, 0.3, 1) infinite; /* Desliza de cima. */
}

.cj-telao__alts {
    display: grid; /* Grade 2x2... */
    grid-template-columns: 1fr 1fr; /* ...como no telão real. */
    gap: 2.2cqw; /* Espaço entre alternativas. */
    align-content: end; /* Encostadas embaixo. */
}

.cj-alt {
    display: flex; /* Letra e texto. */
    align-items: center; /* Centralizados. */
    gap: 2cqw; /* Espaço entre letra e texto. */
    padding: 2.4cqw 2.6cqw; /* Bloco gordo. */
    overflow: hidden; /* Texto longo não estoura. */
    border: var(--palco-alternativa-borda); /* Borda do tema (ex.: camisa no futebol). */
    border-radius: 1.8cqw; /* Cantos. */
    box-shadow: inset 0 -0.8cqw 0 rgb(0 0 0 / 18%); /* Relevo. */
    font-size: 3cqw; /* Texto da alternativa. */
    font-weight: 700; /* Negrito. */
    text-align: left; /* Texto à esquerda. */
    white-space: nowrap; /* Uma linha. */
    animation: cj-alt var(--cj-ciclo) cubic-bezier(0.2, 1.4, 0.4, 1) infinite; /* Surgem em sequência. */
    animation-fill-mode: backwards; /* No atraso inicial já fica no 1º quadro (invisível). */
}

.cj-alt b {
    display: grid; /* Centraliza a letra. */
    flex: 0 0 auto; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: 5.6cqw; /* Quadrado da letra. */
    height: 5.6cqw; /* Quadrado da letra. */
    border-radius: 1.2cqw; /* Cantos. */
    background: rgb(0 0 0 / 22%); /* Fundo escurecido. */
}

/* Cores reais das alternativas no tema da sala (as mesmas dos botões do celular). */
.cj-alt--a, .cj-botao--a { background: var(--palco-alternativa-textura), var(--cor-alternativa-a-fundo); color: var(--cor-alternativa-a-texto); }
.cj-alt--b, .cj-botao--b { background: var(--palco-alternativa-textura), var(--cor-alternativa-b-fundo); color: var(--cor-alternativa-b-texto); }
.cj-alt--c, .cj-botao--c { background: var(--palco-alternativa-textura), var(--cor-alternativa-c-fundo); color: var(--cor-alternativa-c-texto); }
.cj-alt--d, .cj-botao--d { background: var(--palco-alternativa-textura), var(--cor-alternativa-d-fundo); color: var(--cor-alternativa-d-texto); }

.cj-alt--b { animation-delay: 0.24s; } /* Entram uma depois da outra. */
.cj-alt--c { animation-delay: 0.48s; } /* Terceira. */
.cj-alt--d { animation-delay: 0.72s; } /* Quarta. */

/* Mockup do celular. */
.cj-celular {
    container-type: inline-size; /* cqw = % da largura da moldura (vale também para o padding da tela). */
    width: calc(var(--cj-altura) * 9 / 17); /* Proporção de celular com a altura comum. */
    max-width: 100%; /* Nunca estoura a coluna. */
    padding: 2.4%; /* Moldura do aparelho. */
    border-radius: 2.25rem; /* Cantos de celular. */
    background: linear-gradient(160deg, #334155, #0b1020); /* Moldura metálica escura. */
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / 75%), 0 0 60px -20px var(--palco-acao-sombra); /* Sombra + brilho do tema. */
}

.cj-celular__tela {
    position: relative; /* Referência para o toque e a tela de enviado. */
    display: grid; /* Topo e botões. */
    grid-template-rows: auto minmax(0, 1fr); /* Botões ocupam o resto. */
    gap: 5cqw; /* Espaço entre topo e botões. */
    aspect-ratio: 9 / 17; /* Tela de celular. */
    padding: 9cqw 5cqw 5cqw; /* Respiro (topo dá lugar ao entalhe). */
    overflow: hidden; /* Recorta. */
    border-radius: 1.85rem; /* Cantos da tela. */
    background: var(--palco-textura), var(--palco-fundo); /* O mesmo fundo do celular real. */
}

.cj-celular__tela::before {
    content: ""; /* Entalhe da câmera. */
    position: absolute; /* No topo... */
    top: 2.5cqw; /* ...da tela... */
    left: 50%; /* ...centralizado. */
    width: 26cqw; /* Pílula. */
    height: 4cqw; /* Pílula. */
    border-radius: 4cqw; /* Formato de pílula. */
    background: #0b1020; /* Preto do aparelho. */
    transform: translateX(-50%); /* Centralizado de verdade. */
}

.cj-celular__topo {
    display: grid; /* Nome e barra de tempo. */
    gap: 2.5cqw; /* Espaço entre eles. */
    text-align: left; /* Nome à esquerda. */
}

.cj-celular__topo strong {
    font-size: 8cqw; /* Nome do jogador. */
    font-weight: 800; /* Extra negrito. */
}

.cj-celular__tempo {
    height: 2cqw; /* Barra de tempo fina. */
    overflow: hidden; /* Recorta. */
    border-radius: 2cqw; /* Cápsula. */
    background: var(--palco-borda); /* Trilho. */
}

.cj-celular__tempo i {
    display: block; /* Preenchimento. */
    width: 55%; /* Quadro final: tempo correndo. */
    height: 100%; /* Altura total. */
    background: var(--palco-ciano); /* Cor do tempo no tema. */
    animation: cj-tempo var(--cj-ciclo) linear infinite; /* Encolhe com o tempo. */
}

.cj-celular__botoes {
    position: relative; /* Referência para o toque. */
    display: grid; /* Grade 2x2... */
    grid-template-columns: 1fr 1fr; /* ...como no celular real. */
    gap: 4cqw; /* Espaço entre botões. */
}

.cj-botao {
    display: grid; /* Centraliza a letra. */
    place-items: center; /* Centro. */
    border: var(--palco-alternativa-borda); /* Borda do tema. */
    border-radius: 7cqw; /* Cantos. */
    box-shadow: inset 0 -2cqw 0 rgb(0 0 0 / 20%); /* Relevo de tecla. */
    font-size: 20cqw; /* Letra gigante. */
    font-weight: 800; /* Extra negrito. */
    animation: cj-botao var(--cj-ciclo) cubic-bezier(0.2, 1.4, 0.4, 1) infinite; /* Surgem em sequência e as outras apagam. */
    animation-fill-mode: backwards; /* No atraso inicial já fica no 1º quadro (invisível). */
}

.cj-botao--b { animation-delay: 0.16s; } /* Entram uma depois da outra. */
.cj-botao--d { animation-delay: 0.48s; } /* Quarta. */

/* O botão escolhido (C): aparece, é tocado (encolhe) e acende. */
.cj-botao--c {
    box-shadow: 0 0 0 1.6cqw var(--palco-texto), 0 0 12cqw var(--palco-acao-sombra); /* Quadro final: escolhido. */
    animation-name: cj-escolhido; /* Linha do tempo própria. */
}

.cj-toque {
    position: absolute; /* Dedo tocando... */
    left: 25%; /* ...no centro do botão C. */
    top: 75%; /* ...no centro do botão C. */
    width: 26cqw; /* Círculo do toque. */
    height: 26cqw; /* Círculo do toque. */
    border: 1.6cqw solid rgb(255 255 255 / 90%); /* Anel branco. */
    border-radius: 50%; /* Círculo. */
    background: rgb(255 255 255 / 25%); /* Ponta do dedo translúcida. */
    box-shadow: 0 0 6cqw rgb(255 255 255 / 60%); /* Brilho do toque. */
    opacity: 0; /* Escondido no quadro final. */
    transform: translate(-50%, -50%); /* Centralizado no ponto. */
    pointer-events: none; /* Decorativo. */
    animation: cj-toque var(--cj-ciclo) ease-out infinite; /* Toque. */
}

.cj-celular__ok {
    position: absolute; /* Tela de "enviado"... */
    inset: 0; /* ...cobrindo o celular. */
    display: grid; /* Conteúdo centralizado. */
    place-content: center; /* Centro. */
    justify-items: center; /* Centralizado. */
    gap: 3cqw; /* Espaço entre itens. */
    padding: 6cqw; /* Respiro. */
    color: #ffffff; /* Texto branco sobre o verde. */
    background: radial-gradient(circle at 50% 35%, #0b7a52, #052e1f 80%); /* Verde do jogo. */
    opacity: 0; /* Escondida no quadro final (só aparece no ciclo). */
    animation: cj-ok var(--cj-ciclo) ease-out infinite; /* Aparece depois do toque. */
}

.cj-celular__check {
    display: grid; /* Centraliza o check. */
    place-items: center; /* Centro. */
    width: 28cqw; /* Círculo. */
    height: 28cqw; /* Círculo. */
    border: 1.6cqw solid rgb(255 255 255 / 55%); /* Anel claro. */
    border-radius: 50%; /* Círculo. */
    background: rgb(255 255 255 / 15%); /* Fundo translúcido. */
    font-size: 14cqw; /* Check grande. */
    font-weight: 800; /* Extra negrito. */
}

.cj-celular__ok strong {
    font-size: 9cqw; /* "Resposta enviada!". */
    font-weight: 800; /* Extra negrito. */
    line-height: 1.1; /* Compacto. */
}

.cj-celular__ok small {
    color: #a7f3d0; /* Verde claro. */
    font-size: 5.5cqw; /* Linha de apoio. */
}

/* Linha de regras de pontuação, abaixo da cena. */
.como-jogar__regras {
    display: flex; /* Duas regras lado a lado... */
    flex-wrap: wrap; /* ...quebrando se faltar espaço. */
    justify-content: center; /* Centralizadas. */
    gap: 0.75rem 2.5rem; /* Espaço entre elas. */
    margin: clamp(1.25rem, 3vh, 2rem) 0 0; /* Espaço acima. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem marcadores. */
    color: var(--palco-texto-apoio); /* Texto de apoio. */
    font-size: clamp(1rem, 1.3vw, 1.25rem); /* Legível de longe. */
}

.como-jogar__regras li {
    display: inline-flex; /* Ícone e texto. */
    align-items: center; /* Centralizados. */
    gap: 0.625rem; /* Espaço entre eles. */
}

.como-jogar__regras strong {
    color: var(--palco-texto); /* Destaque no tom principal. */
}

.como-jogar__icone svg {
    display: block; /* Sem espaço de linha. */
    width: 1.5em; /* Ícone proporcional ao texto. */
    height: 1.5em; /* Ícone proporcional ao texto. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do ícone. */
    stroke-width: 1.75; /* Espessura. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.como-jogar__icone--tempo { color: var(--palco-ciano); } /* Ciano, como o cronômetro. */
.como-jogar__icone--podio { color: var(--palco-ouro); } /* Dourado, como o pódio. */

.modal-regras__ok {
    justify-content: center; /* Texto centralizado. */
    gap: 0.75rem; /* Espaço até a seta. */
    width: auto; /* Largura do conteúdo. */
    min-height: 4rem; /* Botão grande. */
    margin: clamp(1.25rem, 3vh, 2.25rem) auto 0; /* Centralizado no fim. */
    padding-inline: clamp(2rem, 4vw, 3.5rem); /* Bem largo. */
    border-radius: 999px; /* Cápsula chamativa. */
    box-shadow: 0 12px 36px -10px var(--palco-acao-sombra); /* Brilho na cor de ação do tema. */
    font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* Texto grande. */
    font-weight: 800; /* Extra negrito. */
    animation: cj-convite 2.4s ease-in-out 1.5s infinite; /* "Respira" para chamar o clique. */
}

.modal-regras__ok svg {
    width: 1.25em; /* Seta. */
    height: 1.25em; /* Seta. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2.5; /* Traço firme. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

/* Linha do tempo (8 s): 0–30% pergunta e alternativas no telão; 30–50% botões no celular;
   ~55% toque no C; 62–92% "Resposta enviada!"; 94–100% tudo some e o ciclo recomeça. */
@keyframes cj-pergunta {
    0%, 3% { opacity: 0; transform: translateY(-60%); }
    11%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: none; }
}
@keyframes cj-alt {
    0%, 13% { opacity: 0; transform: scale(0.6) translateY(20%); }
    19%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: none; }
}
@keyframes cj-relogio {
    0%, 20% { stroke-dashoffset: 0; }
    90%, 100% { stroke-dashoffset: 70; }
}
@keyframes cj-vez-1 {
    0%, 30% { box-shadow: 0 0 0 0.35em var(--palco-acao-sombra); transform: scale(1.08); }
    36%, 94% { box-shadow: 0 0 0 0 transparent; transform: none; opacity: 0.55; }
    100% { box-shadow: 0 0 0 0.35em var(--palco-acao-sombra); transform: scale(1.08); opacity: 1; }
}
@keyframes cj-vez-2 {
    0%, 30% { box-shadow: 0 0 0 0 transparent; transform: none; opacity: 0.55; }
    36%, 92% { box-shadow: 0 0 0 0.35em var(--palco-acao-sombra); transform: scale(1.08); opacity: 1; }
    100% { box-shadow: 0 0 0 0 transparent; transform: none; opacity: 0.55; }
}
@keyframes cj-seta {
    0%, 26% { opacity: 0.35; transform: none; }
    32% { opacity: 1; transform: translateX(0.5em) scale(1.15); }
    38% { opacity: 1; transform: none; }
    44% { opacity: 1; transform: translateX(0.5em) scale(1.15); }
    52%, 100% { opacity: 0.35; transform: none; }
}
@keyframes cj-botao {
    0%, 33% { opacity: 0; transform: scale(0.5); }
    40%, 54% { opacity: 1; transform: none; }
    60%, 92% { opacity: 0.3; transform: none; } /* Outras alternativas apagam depois da escolha. */
    97%, 100% { opacity: 0; transform: none; }
}
@keyframes cj-escolhido {
    0%, 33% { opacity: 0; transform: scale(0.5); box-shadow: inset 0 -2cqw 0 rgb(0 0 0 / 20%); }
    40%, 53% { opacity: 1; transform: none; box-shadow: inset 0 -2cqw 0 rgb(0 0 0 / 20%); }
    56% { transform: scale(0.88); box-shadow: inset 0 -0.6cqw 0 rgb(0 0 0 / 20%); } /* Afundou com o toque. */
    60%, 92% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 1.6cqw var(--palco-texto), 0 0 12cqw var(--palco-acao-sombra); } /* Escolhido: brilho. */
    97%, 100% { opacity: 0; transform: none; }
}
@keyframes cj-toque {
    0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } /* Dedo chegando. */
    55% { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Toca. */
    63%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } /* Solta. */
}
@keyframes cj-tempo {
    0%, 36% { width: 100%; }
    90%, 100% { width: 25%; }
}
@keyframes cj-ok {
    0%, 62% { opacity: 0; transform: scale(1.12); }
    68%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}
@keyframes cj-convite {
    0%, 100% { transform: none; }
    50% { transform: scale(1.04); }
}

/* Telas estreitas (notebook pequeno, tablet): telão em cima, celular embaixo. */
@media (max-width: 60rem) {
    .como-jogar {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
        justify-items: center; /* Centralizado. */
    }

    .como-jogar__seta {
        margin-top: 0; /* Sem desconto de texto. */
        transform: rotate(90deg); /* Seta para baixo. */
        animation: none; /* Parada (a rotação ficaria brigando com a animação). */
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-regras[open],
    .modal-regras *,
    .palco-ajuda {
        animation: none !important; /* Mostra o quadro final parado. */
        transition: none !important; /* Sem transições. */
    }
}
/* =============================================================================
   GESTÃO DE USUÁRIOS (conta mestre) — admin/usuarios.php
   Indicadores no topo, tabela de contas com selos de plano/status, ações por
   ícone e modais de cadastro, senha e confirmação. No celular a tabela vira
   uma lista de cartões.
   ============================================================================= */
:root {
    --usuarios-ciano: #38bdf8; /* Indicador "Total de usuários". */
    --usuarios-verde: #10b981; /* Indicador "Ativos" e status ativo. */
    --usuarios-verde-claro: #34d399; /* Texto verde legível sobre o fundo escuro. */
    --usuarios-ambar: #fcd34d; /* Status pendente. */
    --usuarios-vermelho: #f87171; /* Indicador "Inativos" e status suspenso. */
    --usuarios-vermelho-claro: #fca5a5; /* Texto vermelho legível sobre o fundo escuro. */
    --usuarios-cinza: #94a3b8; /* Status cancelado e plano gratuito. */
    --usuarios-azul-claro: #93b4ff; /* Texto do selo Starter. */
    --usuarios-ouro-claro: #f3d08f; /* Texto do selo Pro. */
    --usuarios-linha-hover: rgb(148 163 184 / 5%); /* Fundo da linha sob o ponteiro. */
}

/* Rótulo "ADMINISTRAÇÃO" acima do item exclusivo da conta mestre no menu lateral. */
.admin-menu__rotulo--secao {
    margin-top: var(--espaco-5); /* Separa da navegação principal. */
}

/* Cabeçalho: título à esquerda e "Novo usuário" à direita. */
.pagina-usuarios .dashboard__cabecalho {
    align-items: center; /* Botão centralizado em relação ao título. */
}

body.pagina-painel .usuarios-botao-novo {
    display: inline-flex; /* Ícone e texto lado a lado. */
    flex: 0 0 auto; /* Não encolhe. */
    gap: var(--espaco-2); /* Espaço entre ícone e texto. */
    min-height: 2.5rem; /* Altura confortável. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-5); /* Botão largo. */
    border: var(--borda-fina) solid var(--palco-azul-claro); /* Borda azul viva. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos do painel. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--palco-azul); /* Azul da ação principal do telão. */
    font-family: inherit; /* Fonte do painel. */
    font-size: var(--admin-fonte-controle); /* Texto dos controles. */
    font-weight: 600; /* Leve destaque. */
    cursor: pointer; /* Indica clique. */
    transition: background-color var(--admin-transicao), transform var(--admin-transicao); /* Hover suave. */
}

body.pagina-painel .usuarios-botao-novo:hover {
    background: var(--palco-azul-claro); /* Azul mais claro no hover. */
    transform: translateY(-1px); /* Leve elevação. */
}

.usuarios-botao-novo svg {
    width: 1.125rem; /* Ícone "+". */
    height: 1.125rem; /* Ícone "+". */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2.25; /* Traço firme. */
    stroke-linecap: round; /* Pontas arredondadas. */
}

/* Indicadores estratégicos ----------------------------------------------------- */

.metricas-usuarios {
    display: grid; /* Grade de cartões. */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Quatro colunas no desktop. */
    gap: var(--espaco-4); /* Espaço entre cartões. */
}

.metrica {
    --metrica-cor: var(--usuarios-ciano); /* Cor do cartão; cada modificador troca. */
    position: relative; /* Referência para a faixa colorida. */
    overflow: hidden; /* Recorta a faixa nos cantos. */
    padding: var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-grande); /* Cantos dos painéis. */
    background: var(--cor-painel-escuro); /* Fundo dos painéis. */
    box-shadow: var(--sombra-painel); /* Sombra dos painéis. */
}

.metrica::before {
    content: ""; /* Faixa decorativa. */
    position: absolute; /* Presa ao topo do cartão. */
    inset: 0 0 auto; /* Largura inteira, no topo. */
    height: 3px; /* Faixa fina. */
    background: var(--metrica-cor); /* Cor do indicador. */
    opacity: 0.85; /* Levemente suavizada. */
}

.metrica--ativos {
    --metrica-cor: var(--usuarios-verde); /* Verde: atividade. */
}

.metrica--premium {
    --metrica-cor: var(--admin-realce); /* Dourado: assinantes pagos. */
}

.metrica--inativos {
    --metrica-cor: var(--usuarios-vermelho); /* Vermelho: sem acesso. */
}

.metrica__icone {
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    float: right; /* No canto superior direito. */
    width: 2.25rem; /* Quadrado do ícone. */
    height: 2.25rem; /* Quadrado do ícone. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    color: var(--metrica-cor); /* Ícone na cor do indicador. */
    background: color-mix(in srgb, var(--metrica-cor) 14%, transparent); /* Fundo translúcido na mesma cor. */
}

.metrica__icone svg {
    width: 1.25rem; /* Ícone. */
    height: 1.25rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do indicador. */
    stroke-width: 1.75; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

body.pagina-painel .metrica__rotulo {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Rótulo pequeno. */
    font-weight: 500; /* Peso médio. */
}

body.pagina-painel .metrica__valor {
    margin: var(--espaco-2) 0 var(--espaco-1); /* Respiro ao redor do número. */
    color: var(--cor-texto-claro); /* Número em branco. */
    font-size: 2rem; /* Número em destaque. */
    font-weight: 700; /* Negrito. */
    line-height: 1; /* Sem altura extra. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
    letter-spacing: -0.02em; /* Visual refinado. */
}

body.pagina-painel .metrica__detalhe {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
}

/* Barra da tabela: título, busca e filtros --------------------------------------- */

.usuarios-barra {
    display: flex; /* Título e filtros na mesma linha. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Filtros à direita. */
    gap: var(--espaco-3) var(--espaco-4); /* Espaço entre os blocos. */
    margin-bottom: var(--espaco-4); /* Espaço até a tabela. */
}

body.pagina-painel .admin-painel .usuarios-barra__titulo {
    margin: 0; /* Sem margens. */
    font-size: 1.0625rem; /* Título da seção. */
}

.usuarios-barra__contagem {
    color: var(--admin-texto-rotulo); /* Contagem discreta. */
    font-weight: 400; /* Sem negrito. */
}

.usuarios-barra__filtros {
    display: flex; /* Campos lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-2); /* Espaço entre campos. */
}

body.pagina-painel .usuarios-filtro {
    position: relative; /* Referência para o ícone de lupa. */
    display: block; /* Envolve o campo. */
    margin: 0; /* Sem a margem de rótulo herdada. */
}

body.pagina-painel .usuarios-filtro select,
body.pagina-painel .usuarios-filtro input {
    width: auto; /* Largura do conteúdo, não 100%. */
    margin: 0; /* Sem margens herdadas. */
    padding: 7px 12px; /* Campo compacto. */
    background-color: var(--cor-fundo-escuro); /* Mais escuro que o painel. */
}

body.pagina-painel .usuarios-filtro--busca input {
    width: 15rem; /* Busca mais larga. */
    padding-left: 2.125rem; /* Espaço para a lupa. */
}

.usuarios-filtro--busca svg {
    position: absolute; /* Sobre o campo... */
    top: 50%; /* ...centralizada na vertical... */
    left: 0.7rem; /* ...à esquerda. */
    width: 1rem; /* Ícone pequeno. */
    height: 1rem; /* Ícone pequeno. */
    transform: translateY(-50%); /* Ajuste fino do centro. */
    fill: none; /* Contorno. */
    stroke: var(--admin-texto-rotulo); /* Lupa discreta. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    pointer-events: none; /* Clique passa para o campo. */
}

body.pagina-painel.pagina-usuarios #mensagem:empty {
    display: none; /* Sem espaço vazio quando não há aviso. */
}

/* Tabela ------------------------------------------------------------------------ */

.tabela-usuarios__rolagem {
    overflow-x: auto; /* Rola na horizontal em telas médias, sem quebrar a página. */
    margin: 0 calc(var(--espaco-2) * -1); /* Aproveita a largura do painel. */
}

.tabela-usuarios {
    width: 100%; /* Largura do painel. */
    border-collapse: collapse; /* Bordas únicas entre células. */
    font-size: 0.875rem; /* Texto da tabela. */
}

.tabela-usuarios[hidden] {
    display: none; /* Sem resultados: esconde o cabeçalho também. */
}

.tabela-usuarios th {
    padding: var(--espaco-2) 0.625rem; /* Espaço interno, alinhado às células. */
    border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Linha abaixo do cabeçalho. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo. */
    text-align: left; /* Alinhado à esquerda. */
    text-transform: uppercase; /* Maiúsculas. */
    white-space: nowrap; /* Uma linha. */
}

.tabela-usuarios td {
    padding: var(--espaco-3) 0.625rem; /* Espaço interno (lateral justo para caber em notebooks). */
    border-bottom: var(--borda-fina) solid rgb(52 73 98 / 55%); /* Divisória suave entre linhas. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    vertical-align: middle; /* Centraliza na linha. */
    white-space: nowrap; /* Colunas curtas em uma linha. */
}

.tabela-usuarios tbody tr {
    transition: background-color var(--admin-transicao); /* Hover suave. */
}

.tabela-usuarios tbody tr:hover {
    background: var(--usuarios-linha-hover); /* Realce da linha sob o ponteiro. */
}

.tabela-usuarios tbody tr:last-child td {
    border-bottom: 0; /* Sem linha após o último usuário. */
}

.tabela-usuarios__linha--inativa .tabela-usuarios__usuario {
    opacity: 0.55; /* Contas suspensas/canceladas aparecem apagadas. */
}

.tabela-usuarios__usuario {
    display: flex; /* Avatar e textos lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre avatar e nome. */
    min-width: 12rem; /* Evita esmagar nome e e-mail. */
}

.tabela-usuarios__identificacao {
    display: flex; /* Nome acima do e-mail. */
    flex-direction: column; /* Empilhados. */
    min-width: 0; /* Permite cortar textos longos. */
    max-width: 13rem; /* E-mails longos não alargam a tabela. */
}

.tabela-usuarios__nome {
    display: flex; /* Nome e selo "Você" lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-2); /* Espaço até o selo. */
    color: var(--cor-texto-claro); /* Nome em branco. */
    font-weight: 600; /* Leve destaque. */
}

.tabela-usuarios__email {
    overflow: hidden; /* Corta e-mails longos... */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.8125rem; /* Texto menor. */
    text-overflow: ellipsis; /* ...com reticências. */
}

.tabela-usuarios__vazio {
    color: var(--admin-texto-rotulo); /* Traço discreto quando não há telefone. */
}

.tabela-usuarios__acesso[title] {
    cursor: help; /* Indica que há data, hora e IP no balão. */
}

/* Avatar: foto redonda ou iniciais nas cores das alternativas do jogo. */
.avatar {
    display: inline-grid; /* Centraliza iniciais ou foto. */
    flex: 0 0 auto; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: 2.375rem; /* Diâmetro. */
    height: 2.375rem; /* Diâmetro. */
    overflow: hidden; /* Recorta a foto no círculo. */
    border: 2px solid var(--cor-borda-escura); /* Anel discreto. */
    border-radius: 50%; /* Círculo. */
    color: var(--cor-texto-claro); /* Iniciais em branco. */
    background: var(--cor-painel-escuro-secundario); /* Fundo antes de carregar a foto. */
    font-size: 0.8125rem; /* Iniciais. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.02em; /* Respiro entre as letras. */
}

.avatar img {
    width: 100%; /* Ocupa o círculo. */
    height: 100%; /* Ocupa o círculo. */
    object-fit: cover; /* Recorta sem distorcer. */
}

.avatar--grande {
    width: 4.5rem; /* Prévia maior no modal. */
    height: 4.5rem; /* Prévia maior no modal. */
    font-size: 1.375rem; /* Iniciais maiores. */
}

.avatar--cor-0 {
    background: var(--cor-alternativa-a-fundo); /* Carmesim. */
}

.avatar--cor-1 {
    background: var(--cor-alternativa-b-fundo); /* Cobalto. */
}

.avatar--cor-2 {
    color: var(--cor-alternativa-c-texto); /* Letra escura sobre a mostarda. */
    background: var(--cor-alternativa-c-fundo); /* Mostarda. */
}

.avatar--cor-3 {
    background: var(--cor-alternativa-d-fundo); /* Esmeralda. */
}

/* Selos (badges) de plano e status. */
.selo {
    display: inline-flex; /* Ponto e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 0.375rem; /* Espaço entre ponto e texto. */
    padding: 2px 9px; /* Cápsula compacta. */
    border: var(--borda-fina) solid rgb(148 163 184 / 25%); /* Contorno suave. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    color: var(--usuarios-cinza); /* Cor padrão. */
    background: rgb(148 163 184 / 10%); /* Fundo translúcido. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
    line-height: 1.5; /* Altura da cápsula. */
    white-space: nowrap; /* Uma linha. */
}

.selo--plano {
    letter-spacing: 0.06em; /* Planos em maiúsculas espaçadas... */
    text-transform: uppercase; /* ...como PRO e STARTER. */
}

.selo--plano-starter {
    border-color: rgb(59 130 246 / 40%); /* Contorno cobalto. */
    color: var(--usuarios-azul-claro); /* Texto azul claro. */
    background: rgb(59 130 246 / 14%); /* Fundo cobalto translúcido. */
}

.selo--plano-pro {
    border-color: rgb(229 189 113 / 45%); /* Contorno dourado. */
    color: var(--usuarios-ouro-claro); /* Texto dourado claro. */
    background: rgb(229 189 113 / 14%); /* Fundo dourado translúcido. */
}

.selo--status::before {
    content: ""; /* Ponto de status. */
    width: 6px; /* Diâmetro. */
    height: 6px; /* Diâmetro. */
    border-radius: 50%; /* Círculo. */
    background: currentColor; /* Mesma cor do texto. */
}

.selo--status-ativo {
    border-color: rgb(16 185 129 / 35%); /* Contorno verde. */
    color: var(--usuarios-verde-claro); /* Texto verde. */
    background: rgb(16 185 129 / 12%); /* Fundo verde translúcido. */
}

.selo--status-pendente {
    border-color: rgb(245 158 11 / 35%); /* Contorno âmbar. */
    color: var(--usuarios-ambar); /* Texto âmbar. */
    background: rgb(245 158 11 / 12%); /* Fundo âmbar translúcido. */
}

.selo--status-suspenso {
    border-color: rgb(248 113 113 / 40%); /* Contorno vermelho. */
    color: var(--usuarios-vermelho-claro); /* Texto vermelho claro. */
    background: rgb(248 113 113 / 12%); /* Fundo vermelho translúcido. */
}

.selo--voce {
    padding: 0 7px; /* Selo menor ao lado do nome. */
    border-color: rgb(229 189 113 / 40%); /* Contorno dourado. */
    color: var(--admin-realce); /* Texto dourado. */
    background: transparent; /* Sem fundo. */
    font-size: 0.625rem; /* Bem pequeno. */
    letter-spacing: 0.06em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

/* Ações por linha: reaproveita .ferramenta do editor de perguntas. */
.acoes-usuario {
    display: flex; /* Ícones lado a lado. */
    justify-content: flex-end; /* Encostados à direita. */
    gap: 2px; /* Bem próximos. */
}

/* Modais ------------------------------------------------------------------------- */

body.pagina-painel dialog.modal-usuario {
    width: min(100% - var(--espaco-8), 36rem); /* Largura do formulário. */
    max-height: calc(100vh - var(--espaco-8)); /* Cabe na tela... */
    overflow-y: auto; /* ...rolando se precisar. */
    padding: var(--espaco-6); /* Espaço interno. */
    border-radius: var(--raio-grande); /* Cantos dos painéis. */
    box-shadow: 0 40px 80px -24px rgb(0 0 0 / 70%); /* Sombra profunda: flutua sobre a página. */
}

body.pagina-painel dialog.modal-usuario--estreito {
    width: min(100% - var(--espaco-8), 26rem); /* Modais curtos mais estreitos. */
}

body.pagina-painel dialog.modal-usuario::backdrop {
    background: rgb(2 6 23 / 70%); /* Escurece a página... */
    backdrop-filter: blur(4px); /* ...e desfoca o fundo. */
}

body.pagina-painel dialog.modal-usuario[open] {
    animation: palco-surgir 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; /* Entra com um leve "pop". */
}

.modal-usuario__topo {
    display: flex; /* Título e botão fechar na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Fechar à direita. */
    gap: var(--espaco-3); /* Espaço mínimo. */
    margin-bottom: var(--espaco-4); /* Espaço até o conteúdo. */
}

body.pagina-painel .modal-usuario h2 {
    margin: 0 0 var(--espaco-2); /* Espaço abaixo do título. */
    font-size: 1.125rem; /* Título do modal. */
}

body.pagina-painel .modal-usuario__topo h2 {
    margin: 0; /* O espaço vem do cabeçalho. */
}

body.pagina-painel .admin-painel .modal-usuario__fechar {
    display: grid; /* Centraliza o X. */
    place-items: center; /* Centro. */
    width: 2rem; /* Botão quadrado. */
    min-height: 2rem; /* Botão quadrado. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0; /* Sem preenchimento herdado. */
    border-color: transparent; /* Sem borda. */
    color: var(--admin-texto-apoio); /* X discreto. */
    background: transparent; /* Sem fundo. */
}

body.pagina-painel .admin-painel .modal-usuario__fechar:hover:not(:disabled) {
    color: var(--cor-texto-claro); /* X claro. */
    background: var(--cor-painel-escuro-secundario); /* Fundo sutil. */
}

.modal-usuario__fechar svg {
    width: 1.125rem; /* Ícone. */
    height: 1.125rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do botão. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
}

body.pagina-painel .modal-usuario__subtitulo {
    margin: 0 0 var(--espaco-2); /* Espaço até o primeiro campo. */
    font-size: 0.875rem; /* Texto de apoio. */
}

.modal-usuario__subtitulo strong {
    color: var(--cor-texto-claro); /* Nome do usuário em destaque. */
}

/* Foto de perfil: prévia + botões. */
.avatar-editor {
    display: flex; /* Prévia e ações lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-4); /* Espaço entre prévia e ações. */
    padding: var(--espaco-3); /* Espaço interno. */
    border: var(--borda-fina) dashed var(--cor-borda-escura); /* Área de envio tracejada. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro. */
}

.avatar-editor__acoes {
    display: flex; /* Botões e dica. */
    flex-wrap: wrap; /* Dica na linha de baixo. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-2); /* Espaço entre botões. */
}

body.pagina-painel .avatar-editor__escolher {
    display: inline-flex; /* Rótulo com aparência de botão. */
    align-items: center; /* Centraliza o texto. */
    min-height: 2rem; /* Altura de botão compacto. */
    margin: 0; /* Sem margem de rótulo herdada. */
    padding: 0 var(--espaco-3); /* Espaço lateral. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Contorno. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    background: var(--cor-painel-escuro-secundario); /* Botão secundário. */
    font-size: 0.8125rem; /* Texto pequeno. */
    cursor: pointer; /* Indica clique. */
    transition: background-color var(--admin-transicao); /* Hover suave. */
}

body.pagina-painel .avatar-editor__escolher:hover {
    background: var(--cor-borda-escura); /* Hover do botão secundário. */
}

.avatar-editor input[type="file"]:focus-visible + .avatar-editor__escolher {
    outline: 2px solid var(--admin-campo-foco); /* Foco visível pelo teclado. */
}

body.pagina-painel .admin-painel .avatar-editor__remover {
    min-height: 2rem; /* Altura de botão compacto. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-3); /* Espaço lateral. */
    border-color: transparent; /* Sem borda. */
    color: var(--usuarios-vermelho-claro); /* Texto vermelho claro. */
    background: transparent; /* Botão de texto. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .avatar-editor__remover:hover:not(:disabled) {
    background: rgb(248 113 113 / 10%); /* Fundo vermelho sutil. */
}

body.pagina-painel .avatar-editor__dica,
body.pagina-painel .modal-usuario__dica {
    flex-basis: 100%; /* Linha própria. */
    margin: var(--espaco-1) 0 0; /* Próxima dos botões/campo. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
}

/* Campos em duas colunas. */
.modal-usuario__grade {
    display: grid; /* Grade de campos. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    gap: 0 var(--espaco-4); /* Espaço entre colunas. */
}

.modal-usuario__campo--largo {
    grid-column: 1 / -1; /* Ocupa as duas colunas. */
}

.modal-usuario__campo[hidden] {
    display: none; /* Senha inicial só ao criar. */
}

body.pagina-painel .modal-usuario__limites {
    margin: var(--espaco-4) 0 0; /* Espaço acima. */
    padding: var(--espaco-2) var(--espaco-3); /* Faixa informativa. */
    border-left: 3px solid var(--admin-realce); /* Faixa dourada. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    background: rgb(229 189 113 / 8%); /* Fundo dourado bem leve. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .modal-usuario__feedback {
    min-height: 1.25rem; /* Reserva a linha da mensagem de erro. */
    margin: var(--espaco-3) 0 0; /* Espaço acima. */
    color: var(--cor-feedback-erro-claro); /* Vermelho claro legível no escuro. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.modal-usuario__acoes {
    justify-content: flex-end; /* Botões à direita. */
    margin-top: var(--espaco-2); /* Espaço acima dos botões. */
}

body.pagina-painel .admin-painel .modal-usuario__gerar {
    margin: var(--espaco-3) 0 0; /* Abaixo dos campos. */
    padding: 0; /* Botão de texto. */
    min-height: 0; /* Sem altura de botão. */
    border-color: transparent; /* Sem borda. */
    color: var(--admin-campo-foco); /* Azul de link. */
    background: transparent; /* Sem fundo. */
    font-size: 0.8125rem; /* Texto pequeno. */
    text-decoration: underline; /* Aparência de link. */
    text-underline-offset: 3px; /* Sublinhado afastado. */
}

body.pagina-painel .admin-painel .modal-usuario__gerar:hover:not(:disabled) {
    color: var(--cor-texto-claro); /* Mais claro no hover. */
    background: transparent; /* Continua sem fundo. */
}

/* Campo de senha com botão "olho" embutido. */
.campo-senha {
    position: relative; /* Referência para o botão. */
}

body.pagina-painel .campo-senha input {
    padding-right: 2.75rem; /* Espaço para o botão. */
}

body.pagina-painel .admin-painel .campo-senha__ver {
    position: absolute; /* Dentro do campo... */
    top: calc(50% + 2px); /* ...centralizado (compensa a margem do campo)... */
    right: 4px; /* ...à direita. */
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    width: 2rem; /* Botão quadrado. */
    min-height: 2rem; /* Botão quadrado. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0; /* Sem preenchimento herdado. */
    border-color: transparent; /* Sem borda. */
    color: var(--admin-texto-rotulo); /* Ícone discreto. */
    background: transparent; /* Sem fundo. */
    transform: translateY(-50%); /* Ajuste fino do centro. */
}

body.pagina-painel .admin-painel .campo-senha__ver:hover:not(:disabled),
body.pagina-painel .admin-painel .campo-senha__ver[aria-pressed="true"] {
    color: var(--cor-texto-claro); /* Ícone claro. */
    background: transparent; /* Sem fundo. */
}

.campo-senha__ver svg {
    width: 1.125rem; /* Ícone do olho. */
    height: 1.125rem; /* Ícone do olho. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do botão. */
    stroke-width: 1.75; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

/* Telas médias: indicadores em duas colunas. */
@media (max-width: 70rem) {
    .metricas-usuarios {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    }
}

/* Celulares: a tabela vira uma lista de cartões, um por usuário. */
@media (max-width: 48rem) {
    .pagina-usuarios .dashboard__cabecalho {
        flex-direction: column; /* Título acima do botão. */
        align-items: stretch; /* Botão na largura toda. */
    }

    body.pagina-painel .usuarios-botao-novo {
        justify-content: center; /* Texto centralizado no botão largo. */
    }

    .usuarios-barra__filtros,
    body.pagina-painel .usuarios-filtro,
    body.pagina-painel .usuarios-filtro--busca input,
    body.pagina-painel .usuarios-filtro select {
        width: 100%; /* Filtros empilhados na largura toda. */
    }

    .tabela-usuarios__rolagem {
        margin: 0; /* Sem compensação de margem. */
    }

    .tabela-usuarios thead {
        position: absolute; /* Cabeçalho fora da tela, mas acessível... */
        width: 1px; /* ...a leitores de tela. */
        height: 1px; /* Tamanho mínimo. */
        overflow: hidden; /* Oculta o conteúdo. */
        clip: rect(0 0 0 0); /* Recorta tudo. */
    }

    .tabela-usuarios,
    .tabela-usuarios tbody,
    .tabela-usuarios tr,
    .tabela-usuarios td {
        display: block; /* Linhas e células empilhadas. */
    }

    .tabela-usuarios tbody tr {
        display: grid; /* Cartão do usuário... */
        grid-template-columns: minmax(0, 1fr) auto; /* ...dados à esquerda, valores à direita. */
        gap: var(--espaco-2) var(--espaco-3); /* Espaço entre os campos. */
        margin-bottom: var(--espaco-3); /* Espaço entre cartões. */
        padding: var(--espaco-4); /* Espaço interno. */
        border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do cartão. */
        border-radius: var(--raio-medio); /* Cantos. */
        background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
    }

    .tabela-usuarios td {
        display: flex; /* Rótulo e valor na mesma linha. */
        align-items: center; /* Centraliza verticalmente. */
        justify-content: space-between; /* Rótulo à esquerda, valor à direita. */
        grid-column: 1 / -1; /* Linha inteira do cartão. */
        padding: 0; /* Sem preenchimento de célula. */
        border: 0; /* Sem divisórias. */
        white-space: normal; /* Permite quebrar. */
    }

    .tabela-usuarios td::before {
        content: attr(data-rotulo); /* Nome da coluna vindo do HTML. */
        color: var(--admin-texto-rotulo); /* Tom discreto. */
        font-size: 0.6875rem; /* Rótulo pequeno. */
        font-weight: 600; /* Leve destaque. */
        letter-spacing: 0.06em; /* Espaçamento de rótulo. */
        text-transform: uppercase; /* Maiúsculas. */
    }

    .tabela-usuarios td:first-child,
    .tabela-usuarios td:last-child {
        padding-bottom: var(--espaco-2); /* Respiro abaixo do usuário. */
        border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória do topo do cartão. */
    }

    .tabela-usuarios td:last-child {
        justify-content: flex-end; /* Ações à direita. */
        padding: var(--espaco-2) 0 0; /* Respiro acima das ações. */
        border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória antes das ações. */
        border-bottom: 0; /* Sem divisória embaixo. */
    }

    .tabela-usuarios td:first-child::before,
    .tabela-usuarios td:last-child::before {
        content: none; /* Usuário e ações dispensam rótulo. */
    }

    .tabela-usuarios__usuario {
        min-width: 0; /* Pode encolher no celular. */
    }

    body.pagina-painel .admin-painel .acoes-usuario .ferramenta {
        width: 2.5rem; /* Área de toque maior. */
        min-height: 2.5rem; /* Área de toque maior. */
    }
}

@media (max-width: 40rem) {
    .metricas-usuarios {
        gap: var(--espaco-3); /* Espaço menor entre indicadores. */
    }

    .metrica {
        padding: var(--espaco-4); /* Espaço interno menor. */
    }

    body.pagina-painel .metrica__valor {
        font-size: 1.625rem; /* Número menor. */
    }

    .modal-usuario__grade {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna de campos. */
    }

    body.pagina-painel dialog.modal-usuario {
        width: calc(100% - var(--espaco-4)); /* Quase a tela toda. */
        padding: var(--espaco-5) var(--espaco-4); /* Espaço interno menor. */
    }
}
/* =============================================================================
   MINHA CONTA (autogestão do cliente) — admin/minha_conta.php
   Cabeçalho com a identidade da conta e quatro cartões: perfil, assinatura e uso,
   segurança e gestão do plano. Reaproveita avatar, selos, avatar-editor e os
   modais da gestão de usuários.
   ============================================================================= */
:root {
    --conta-uso-ok: #10b981; /* Barra de uso com folga. */
    --conta-uso-alerta: #f59e0b; /* Barra de uso a partir de 80%. */
    --conta-uso-cheio: #ef4444; /* Barra de uso no limite. */
    --conta-uso-trilho: rgb(148 163 184 / 14%); /* Fundo vazio da barra. */
}

.conta-cabecalho__identidade {
    display: flex; /* Foto e textos lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-5); /* Espaço entre foto e nome. */
    min-width: 0; /* Permite cortar nomes longos. */
}

.conta-cabecalho .dashboard__descricao {
    display: flex; /* Selo do plano e data lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-2) var(--espaco-3); /* Espaço entre os itens. */
}

.conta-cabecalho__desde {
    color: var(--admin-texto-rotulo); /* Data discreta. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.selo--plano-mestre {
    border-color: rgb(229 189 113 / 45%); /* Contorno dourado. */
    color: var(--usuarios-ouro-claro); /* Texto dourado claro. */
    background: rgb(229 189 113 / 14%); /* Fundo dourado translúcido. */
}

/* Campos ocultos no painel (foto, e-mail para o gerenciador de senhas): as regras gerais
   de input do admin (largura 100%, preenchimento, borda) venceriam .visualmente-oculto. */
body.pagina-painel input.visualmente-oculto {
    width: 1px; /* Tamanho mínimo... */
    height: 1px; /* ...sem ocupar espaço... */
    min-height: 0; /* ...nem altura mínima herdada... */
    margin: 0; /* ...nem margens... */
    padding: 0; /* ...nem preenchimento... */
    border: 0; /* ...nem borda: não estoura a largura da página. */
}
/* Aviso de sucesso/erro das ações, entre o cabeçalho e os cartões. */
body.pagina-painel .conta-aviso {
    margin: 0; /* O espaço vem do gap do palco. */
    padding: var(--espaco-3) var(--espaco-4); /* Faixa compacta. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-left: 3px solid currentColor; /* Faixa na cor da mensagem. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-painel-escuro); /* Fundo dos painéis. */
}

body.pagina-painel .conta-aviso:empty {
    display: none; /* Só aparece quando há mensagem. */
}

/* Grade dos cartões: perfil à esquerda; assinatura e gestão do plano empilhadas à direita. */
.conta-grade {
    display: grid; /* Grade de cartões. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    grid-template-areas:
        "perfil assinatura"
        "perfil gestao"; /* A assinatura fica visível sem rolar. (Sem cartão de senha: login por código.) */
    gap: var(--espaco-5); /* Mesmo espaço entre painéis do palco. */
    align-items: start; /* Cada cartão com a própria altura. */
}

.conta-cartao--perfil {
    grid-area: perfil; /* Canto superior esquerdo. */
}

.conta-cartao--assinatura {
    grid-area: assinatura; /* Canto superior direito. */
}

.conta-cartao--gestao {
    grid-area: gestao; /* Canto inferior direito. */
}

.conta-cartao__topo {
    margin-bottom: var(--espaco-4); /* Espaço até o conteúdo. */
    padding-bottom: var(--espaco-3); /* Espaço até a divisória. */
    border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória do título. */
}

body.pagina-painel .admin-painel .conta-cartao__topo h2 {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço até a descrição. */
    font-size: 1.0625rem; /* Título do cartão. */
}

body.pagina-painel .admin-painel .conta-cartao__topo p {
    margin: 0; /* Sem margens. */
    font-size: 0.8125rem; /* Descrição pequena. */
}

.conta-cartao__acoes {
    display: flex; /* Botão à direita. */
    justify-content: flex-end; /* Encosta à direita. */
}

body.pagina-painel .admin-painel .conta-cartao__acoes button {
    margin: var(--espaco-2) 0 0; /* Sem margens laterais herdadas. */
}

body.pagina-painel .modal-usuario__feedback--info {
    color: var(--admin-texto-apoio); /* Aviso neutro (ex.: foto escolhida). */
}

/* Destaque do plano atual. */
.plano-destaque {
    --plano-cor: var(--usuarios-cinza); /* Cor do plano; cada código troca. */
    position: relative; /* Referência para o brilho. */
    overflow: hidden; /* Recorta o brilho. */
    padding: var(--espaco-4) var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid color-mix(in srgb, var(--plano-cor) 40%, transparent); /* Contorno na cor do plano. */
    border-radius: var(--raio-medio); /* Cantos. */
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--plano-cor) 22%, transparent), transparent 60%),
        var(--cor-fundo-escuro); /* Brilho no canto sobre fundo escuro. */
}

.plano-destaque--starter {
    --plano-cor: var(--palco-azul-claro); /* Cobalto. */
}

.plano-destaque--pro,
.plano-destaque--mestre {
    --plano-cor: var(--admin-realce); /* Dourado. */
}

body.pagina-painel .admin-painel .plano-destaque__rotulo {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

body.pagina-painel .admin-painel .plano-destaque__nome {
    margin: var(--espaco-1) 0 0; /* Próximo do rótulo. */
    color: color-mix(in srgb, var(--plano-cor) 70%, white); /* Nome na cor do plano, clareada. */
    font-size: 1.75rem; /* Nome em destaque. */
    font-weight: 700; /* Negrito. */
    line-height: 1.15; /* Compacto. */
    letter-spacing: -0.02em; /* Visual refinado. */
}

body.pagina-painel .admin-painel .plano-destaque__resumo {
    margin: var(--espaco-1) 0 0; /* Abaixo do nome. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

/* Barra de uso do limite de quizzes. */
.uso {
    --uso-cor: var(--conta-uso-ok); /* Cor da barra; o nível troca. */
    margin-top: var(--espaco-5); /* Espaço abaixo do destaque do plano. */
}

.uso--alerta {
    --uso-cor: var(--conta-uso-alerta); /* Âmbar: perto do limite. */
}

.uso--cheio {
    --uso-cor: var(--conta-uso-cheio); /* Vermelho: limite atingido. */
}

.uso--livre {
    --uso-cor: var(--admin-realce); /* Dourado: sem limite. */
}

.uso__cabecalho {
    display: flex; /* Rótulo e números na mesma linha. */
    align-items: baseline; /* Alinha pela base do texto. */
    justify-content: space-between; /* Números à direita. */
    gap: var(--espaco-3); /* Espaço mínimo. */
    margin-bottom: var(--espaco-2); /* Espaço até a barra. */
}

.uso__rotulo {
    color: var(--cor-texto-claro); /* Rótulo em branco. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 500; /* Peso médio. */
}

.uso__numeros {
    color: var(--admin-texto-apoio); /* Limite em tom de apoio. */
    font-size: 0.875rem; /* Texto. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.uso__numeros strong {
    color: var(--cor-texto-claro); /* Quantidade usada em destaque. */
    font-size: 1.125rem; /* Número maior. */
}

.uso__barra {
    height: 0.625rem; /* Barra fina. */
    overflow: hidden; /* Recorta o preenchimento nos cantos. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    background: var(--conta-uso-trilho); /* Trilho vazio. */
}

.uso__preenchimento {
    display: block; /* Ocupa a altura do trilho. */
    height: 100%; /* Altura do trilho. */
    min-width: 0.625rem; /* Mostra um ponto mesmo com uso zero. */
    border-radius: inherit; /* Cápsula. */
    background: linear-gradient(90deg, color-mix(in srgb, var(--uso-cor) 70%, transparent), var(--uso-cor)); /* Gradiente na cor do nível. */
    box-shadow: 0 0 12px color-mix(in srgb, var(--uso-cor) 45%, transparent); /* Brilho suave. */
    transition: width 0.6s ease; /* Anima mudanças de uso. */
}

.uso--livre .uso__preenchimento {
    opacity: 0.35; /* Sem limite: barra cheia, porém discreta. */
}

body.pagina-painel .admin-painel .uso__dica {
    margin: var(--espaco-2) 0 0; /* Abaixo da barra. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .uso--cheio .uso__dica {
    color: var(--cor-feedback-erro-claro); /* Limite atingido em vermelho claro. */
}

/* Limites e números da conta. */
.conta-limites {
    display: grid; /* Itens empilhados. */
    gap: var(--espaco-2); /* Espaço entre itens. */
    margin: var(--espaco-5) 0 0; /* Espaço acima. */
    padding: var(--espaco-4) 0 0; /* Espaço até a divisória. */
    border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória. */
    list-style: none; /* Sem marcadores. */
}

.conta-limites li {
    display: flex; /* Ícone e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre ícone e texto. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.875rem; /* Texto. */
}

.conta-limites strong {
    color: var(--cor-texto-claro); /* Números em branco. */
}

.conta-limites svg {
    flex: 0 0 auto; /* Não encolhe. */
    width: 1.125rem; /* Ícone. */
    height: 1.125rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: var(--admin-texto-rotulo); /* Ícone discreto. */
    stroke-width: 1.75; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

/* Gestão do plano: botão principal e zona de perigo. */
body.pagina-painel .admin-painel .conta-botao-plano {
    display: flex; /* Ícone e texto lado a lado. */
    gap: var(--espaco-2); /* Espaço entre ícone e texto. */
    width: 100%; /* Largura do cartão. */
    min-height: 2.75rem; /* Botão alto: ação principal do cartão. */
    margin: 0; /* Sem margens herdadas. */
    border-color: var(--palco-azul-claro); /* Borda azul viva. */
    background: var(--palco-azul); /* Azul da ação principal do telão. */
    font-weight: 600; /* Leve destaque. */
}

body.pagina-painel .admin-painel .conta-botao-plano:hover:not(:disabled) {
    background: var(--palco-azul-claro); /* Azul mais claro no hover. */
}

.conta-botao-plano svg {
    width: 1.125rem; /* Seta de upgrade. */
    height: 1.125rem; /* Seta de upgrade. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.zona-perigo {
    margin-top: var(--espaco-6); /* Afastada da ação principal. */
    padding: var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid rgb(248 113 113 / 30%); /* Contorno vermelho sutil. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: rgb(248 113 113 / 5%); /* Fundo vermelho quase imperceptível. */
}

body.pagina-painel .admin-painel .zona-perigo__titulo {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço até o texto. */
    color: var(--usuarios-vermelho-claro); /* Título vermelho claro. */
    font-size: 0.875rem; /* Título pequeno. */
}

body.pagina-painel .admin-painel .zona-perigo__texto {
    margin: 0 0 var(--espaco-3); /* Espaço até o botão. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .zona-perigo__botao {
    margin: 0; /* Sem margens herdadas. */
    border-color: rgb(248 113 113 / 45%); /* Contorno vermelho. */
    color: var(--usuarios-vermelho-claro); /* Texto vermelho claro. */
    background: transparent; /* Vermelho só no contorno. */
}

body.pagina-painel .admin-painel .zona-perigo__botao:hover:not(:disabled) {
    color: var(--cor-texto-claro); /* Texto branco... */
    background: var(--cor-erro); /* ...sobre vermelho no hover. */
}

/* Modal de planos: um cartão por plano. */
body.pagina-painel dialog.modal-planos {
    width: min(100% - var(--espaco-8), 46rem); /* Largo para três planos lado a lado. */
}

.planos-opcoes {
    display: grid; /* Cartões lado a lado. */
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); /* Quantos couberem. */
    gap: var(--espaco-3); /* Espaço entre cartões. */
    margin-top: var(--espaco-4); /* Espaço abaixo do subtítulo. */
}

.plano-opcao {
    --plano-cor: var(--usuarios-cinza); /* Cor do plano; cada código troca. */
    display: flex; /* Conteúdo empilhado... */
    flex-direction: column; /* ...de cima para baixo... */
    padding: var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-top: 3px solid var(--plano-cor); /* Faixa na cor do plano. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro. */
}

.plano-opcao--starter {
    --plano-cor: var(--palco-azul-claro); /* Cobalto. */
}

.plano-opcao--pro {
    --plano-cor: var(--admin-realce); /* Dourado. */
}

.plano-opcao--atual {
    border-color: color-mix(in srgb, var(--plano-cor) 55%, transparent); /* Contorno inteiro na cor do plano. */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--plano-cor) 35%, transparent); /* Reforço do plano atual. */
}

body.pagina-painel .modal-planos .plano-opcao__nome {
    margin: 0; /* Sem margens. */
    color: var(--cor-texto-claro); /* Nome em branco. */
    font-size: 1.125rem; /* Nome do plano. */
    font-weight: 700; /* Negrito. */
}

.plano-opcao__limites {
    flex: 1; /* Empurra o botão para a base do cartão. */
    margin: var(--espaco-2) 0 var(--espaco-4); /* Espaço ao redor. */
    padding: 0; /* Sem recuo. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    list-style: none; /* Sem marcadores padrão. */
}

.plano-opcao__limites li::before {
    content: "✓ "; /* Marcador de recurso. */
    color: var(--plano-cor); /* Na cor do plano. */
}

.plano-opcao__atual {
    padding: 6px 0; /* Mesma altura aproximada do botão. */
    color: var(--plano-cor); /* Na cor do plano. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
    text-align: center; /* Centralizado. */
}

body.pagina-painel .modal-planos .plano-opcao__aviso {
    margin: 0; /* Sem margens. */
    color: var(--usuarios-ambar); /* Âmbar: rebaixamento bloqueado. */
    font-size: 0.75rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .plano-opcao__escolher {
    width: 100%; /* Largura do cartão. */
    margin: 0; /* Sem margens herdadas. */
}

/* Troca de e-mail: campo do código + botão "Enviar código" na mesma linha. */
.conta-codigo-email__linha {
    display: flex; /* Campo e botão lado a lado. */
    gap: var(--espaco-2); /* Espaço entre eles. */
    align-items: stretch; /* Mesma altura. */
}

body.pagina-painel .conta-codigo-email__linha input {
    flex: 1; /* Campo ocupa o espaço livre. */
    min-width: 0; /* Pode encolher no celular. */
    letter-spacing: 0.3em; /* Dígitos espaçados. */
    font-variant-numeric: tabular-nums; /* Dígitos de mesma largura. */
}

.conta-codigo-email__linha button {
    flex: none; /* Botão do tamanho do texto. */
    white-space: nowrap; /* "Reenviar em 45 s" numa linha. */
}

/* Telas médias e celulares: uma coluna, assinatura logo após o cabeçalho. */
@media (max-width: 64rem) {
    .conta-grade {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
        grid-template-areas:
            "assinatura"
            "gestao"
            "perfil"; /* O que mais importa primeiro. */
    }
}

@media (max-width: 40rem) {
    .conta-cabecalho__identidade {
        gap: var(--espaco-3); /* Foto mais próxima do nome. */
    }

    .conta-cabecalho .avatar--grande {
        width: 3.5rem; /* Foto menor no celular. */
        height: 3.5rem; /* Foto menor no celular. */
    }
}
/* =============================================================================
   FLUXO CENTRADO NO QUIZ — "Meus quizzes" (admin/quizzes.php) e
   "Painel do quiz" (admin/gerenciar_quiz.php: cabeçalho, abas, perguntas e relatórios)
   ============================================================================= */
:root {
    --quiz-iniciar: #059669; /* Verde esmeralda do botão "Iniciar partida". */
    --quiz-iniciar-claro: #10b981; /* Verde mais claro do hover e do brilho. */
    --rel-bom: #10b981; /* Relatório: acertos e taxas altas. */
    --rel-medio: #f59e0b; /* Relatório: sem resposta e taxas médias. */
    --rel-ruim: #ef4444; /* Relatório: erros e taxas baixas. */
    --rel-azul: #5b8fc7; /* Relatório: barras de pontuação. */
    --rel-trilho: rgb(148 163 184 / 14%); /* Relatório: fundo vazio das barras. */
}

/* Meus quizzes: grade de cartões ------------------------------------------------ */

.quizzes-grade {
    display: grid; /* Cartões em grade. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); /* Quantos couberem, no mínimo 240px. */
    gap: var(--espaco-4); /* Espaço entre cartões. */
}

.quiz-cartao {
    --quiz-cor: var(--cor-alternativa-b-fundo); /* Cor do cartão; os modificadores alternam. */
    position: relative; /* Referência para a faixa colorida. */
    display: flex; /* Conteúdo empilhado... */
    flex-direction: column; /* ...de cima para baixo. */
    overflow: hidden; /* Recorta a faixa nos cantos. */
    padding: var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-grande); /* Cantos dos painéis. */
    background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
    transition: transform var(--admin-transicao), border-color var(--admin-transicao), box-shadow var(--admin-transicao); /* Hover suave. */
}

.quiz-cartao::before {
    content: ""; /* Faixa decorativa no topo. */
    position: absolute; /* Presa ao topo. */
    inset: 0 0 auto; /* Largura inteira. */
    height: 3px; /* Faixa fina. */
    background: var(--quiz-cor); /* Cor do cartão. */
}

.quiz-cartao:hover,
.quiz-cartao:focus-within {
    border-color: color-mix(in srgb, var(--quiz-cor) 55%, transparent); /* Contorno na cor do cartão. */
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--quiz-cor) 70%, transparent); /* Brilho colorido. */
    transform: translateY(var(--admin-elevacao-hover)); /* Sobe levemente. */
}

.quiz-cartao--cor-0 {
    --quiz-cor: var(--cor-alternativa-a-fundo); /* Carmesim. */
}

.quiz-cartao--cor-2 {
    --quiz-cor: var(--cor-alternativa-c-fundo); /* Mostarda. */
}

.quiz-cartao--cor-3 {
    --quiz-cor: var(--cor-alternativa-d-fundo); /* Esmeralda. */
}

.quiz-cartao__marca {
    display: grid; /* Centraliza a inicial. */
    place-items: center; /* Centro. */
    width: 2.5rem; /* Quadrado da inicial. */
    height: 2.5rem; /* Quadrado da inicial. */
    margin-bottom: var(--espaco-4); /* Espaço até o título. */
    border-radius: var(--raio-medio); /* Cantos. */
    color: var(--cor-texto-claro); /* Inicial em branco. */
    background: color-mix(in srgb, var(--quiz-cor) 85%, black); /* Cor do cartão, um pouco mais escura. */
    font-size: 1.125rem; /* Inicial. */
    font-weight: 700; /* Negrito. */
}

body.pagina-painel .admin-painel .quiz-cartao__titulo {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço até a descrição. */
    color: var(--cor-texto-claro); /* Título em branco. */
    font-size: 1.0625rem; /* Título do cartão. */
    line-height: 1.3; /* Compacto. */
    overflow-wrap: anywhere; /* Títulos longos sem espaço quebram. */
}

body.pagina-painel .admin-painel .quiz-cartao__descricao {
    display: -webkit-box; /* Necessário para limitar linhas... */
    flex: 1; /* Empurra metas e botão para a base. */
    margin: 0; /* Sem margens. */
    overflow: hidden; /* ...cortando o excesso... */
    font-size: 0.8125rem; /* Texto pequeno. */
    -webkit-box-orient: vertical; /* ...na vertical... */
    -webkit-line-clamp: 2; /* ...em no máximo duas linhas. */
}

.quiz-cartao__metas {
    display: flex; /* Números lado a lado. */
    flex-wrap: wrap; /* Quebra em cartões estreitos. */
    gap: var(--espaco-1) var(--espaco-4); /* Espaço entre os números. */
    margin: var(--espaco-4) 0; /* Espaço ao redor. */
    padding: 0; /* Sem recuo de lista. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    list-style: none; /* Sem marcadores. */
}

.quiz-cartao__meta--alerta {
    color: var(--usuarios-ambar); /* "0 perguntas" em âmbar: não dá para iniciar. */
}

body.pagina-painel .admin-painel .quiz-cartao__gerenciar {
    display: flex; /* Texto e seta lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centraliza no botão. */
    gap: var(--espaco-2); /* Espaço até a seta. */
    width: 100%; /* Largura do cartão. */
    border-color: var(--palco-azul-claro); /* Borda azul viva. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--palco-azul); /* Botão primário azul. */
    font-weight: 600; /* Leve destaque. */
    text-decoration: none; /* Sem sublinhado. */
}

body.pagina-painel .admin-painel .quiz-cartao__gerenciar:hover {
    background: var(--palco-azul-claro); /* Azul mais claro no hover. */
}

.quiz-cartao__gerenciar svg {
    width: 1rem; /* Seta. */
    height: 1rem; /* Seta. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
    transition: transform var(--admin-transicao); /* Seta anda no hover. */
}

.quiz-cartao__gerenciar:hover svg {
    transform: translateX(3px); /* Seta avança. */
}

/* Estado vazio (sem quizzes, sem perguntas, sem partidas). */
.quizzes-vazio {
    padding: var(--espaco-8) var(--espaco-5); /* Bloco espaçoso. */
    border: var(--borda-fina) dashed var(--cor-borda-escura); /* Contorno tracejado. */
    border-radius: var(--raio-grande); /* Cantos. */
    text-align: center; /* Centralizado. */
}

.quizzes-vazio[hidden] {
    display: none; /* Some quando há conteúdo. */
}

.quizzes-vazio__icone {
    display: inline-grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    width: 3rem; /* Círculo. */
    height: 3rem; /* Círculo. */
    margin-bottom: var(--espaco-3); /* Espaço até o título. */
    border-radius: 50%; /* Círculo. */
    color: var(--admin-realce); /* Ícone dourado. */
    background: rgb(229 189 113 / 12%); /* Fundo dourado translúcido. */
}

.quizzes-vazio__icone svg {
    width: 1.5rem; /* Ícone. */
    height: 1.5rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Dourado. */
    stroke-width: 1.75; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

body.pagina-painel .admin-painel .quizzes-vazio__titulo {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço até o texto. */
    font-size: 1rem; /* Título. */
}

body.pagina-painel .admin-painel .quizzes-vazio__texto {
    max-width: 30rem; /* Linhas curtas. */
    margin: 0 auto; /* Centralizado. */
    font-size: 0.875rem; /* Texto. */
}

body.pagina-painel .admin-painel .quizzes-vazio button {
    margin: var(--espaco-4) 0 0; /* Espaço acima do botão. */
}

/* Painel do quiz: cabeçalho ---------------------------------------------------- */

.quiz-cabecalho {
    align-items: center; /* Botão de iniciar centralizado em relação às informações. */
}

.quiz-cabecalho__info {
    min-width: 0; /* Permite quebrar títulos longos. */
}

body.pagina-painel .quiz-cabecalho .dashboard__titulo {
    overflow-wrap: anywhere; /* Títulos longos sem espaço quebram. */
}

body.pagina-painel .quiz-cabecalho__voltar {
    display: inline-flex; /* Seta e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-1); /* Espaço até o texto. */
    min-height: 0; /* Sem a altura de botão das regras antigas de link. */
    margin-bottom: var(--espaco-3); /* Espaço até o rótulo. */
    padding: 0; /* Sem preenchimento de botão. */
    border: 0; /* Sem contorno de botão. */
    color: var(--admin-texto-apoio); /* Link discreto. */
    background: none; /* Sem o fundo branco das regras antigas de link. */
    font-size: 0.8125rem; /* Texto pequeno. */
    text-decoration: none; /* Sem sublinhado. */
}

body.pagina-painel .quiz-cabecalho__voltar:hover {
    color: var(--cor-texto-claro); /* Mais claro no hover. */
}

.quiz-cabecalho__voltar svg {
    width: 1rem; /* Seta. */
    height: 1rem; /* Seta. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.quiz-cabecalho__metas {
    display: flex; /* Números lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-1) var(--espaco-5); /* Espaço entre os números. */
    margin: var(--espaco-3) 0 0; /* Espaço acima. */
    padding: 0; /* Sem recuo de lista. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.875rem; /* Texto. */
    list-style: none; /* Sem marcadores. */
}

.quiz-cabecalho__metas strong {
    color: var(--cor-texto-claro); /* Números em branco. */
}

.quiz-cabecalho__gestao {
    display: flex; /* Botões lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-2); /* Espaço entre botões. */
    margin-top: var(--espaco-4); /* Espaço acima. */
}

/* Botões discretos fora do painel (editar/excluir o quiz). */
body.pagina-painel .botao-discreto {
    display: inline-flex; /* Ícone e texto lado a lado. */
    gap: var(--espaco-2); /* Espaço entre ícone e texto. */
    min-height: 2rem; /* Botão baixo. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-3); /* Espaço lateral. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Contorno discreto. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    background: transparent; /* Sem fundo. */
    font-family: inherit; /* Fonte do painel. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 500; /* Peso médio. */
    cursor: pointer; /* Indica clique. */
    transition: background-color var(--admin-transicao), color var(--admin-transicao), border-color var(--admin-transicao); /* Hover suave. */
}

body.pagina-painel .botao-discreto:hover {
    color: var(--cor-texto-claro); /* Texto claro. */
    background: var(--cor-painel-escuro-secundario); /* Fundo sutil. */
}

body.pagina-painel .botao-discreto--perigo:hover {
    border-color: rgb(248 113 113 / 45%); /* Contorno vermelho. */
    color: var(--usuarios-vermelho-claro); /* Texto vermelho claro. */
    background: rgb(248 113 113 / 10%); /* Fundo vermelho sutil. */
}

.botao-discreto svg,
.abas__aba svg,
.perguntas-barra__acoes svg,
.rel-exportar svg {
    flex: 0 0 auto; /* Não encolhe. */
    width: 1rem; /* Ícone. */
    height: 1rem; /* Ícone. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do texto. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.quiz-cabecalho__iniciar {
    display: flex; /* Botão e dica empilhados. */
    flex: 0 0 auto; /* Não encolhe. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centralizados. */
    gap: var(--espaco-2); /* Espaço até a dica. */
}

/* "▶ INICIAR PARTIDA": a ação mais importante da página. */
body.pagina-painel .botao-iniciar {
    display: inline-flex; /* Ícone e texto lado a lado. */
    gap: var(--espaco-3); /* Espaço entre ícone e texto. */
    min-width: 16rem; /* Botão largo. */
    min-height: 4rem; /* Botão alto. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-8); /* Espaço lateral generoso. */
    border: var(--borda-fina) solid var(--quiz-iniciar-claro); /* Borda verde clara. */
    border-radius: var(--raio-grande); /* Cantos dos painéis. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: linear-gradient(135deg, var(--quiz-iniciar-claro), var(--quiz-iniciar)); /* Verde em gradiente. */
    box-shadow: 0 12px 28px -12px rgb(16 185 129 / 75%); /* Brilho verde. */
    font-family: inherit; /* Fonte do painel. */
    font-size: 1.0625rem; /* Texto grande. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.08em; /* Espaçado. */
    text-transform: uppercase; /* "INICIAR PARTIDA". */
    cursor: pointer; /* Indica clique. */
    transition: transform var(--admin-transicao), box-shadow var(--admin-transicao), filter var(--admin-transicao); /* Hover suave. */
}

body.pagina-painel .botao-iniciar:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--quiz-iniciar-claro), var(--quiz-iniciar)); /* Mantém o gradiente (a regra antiga trocaria o fundo). */
    box-shadow: 0 16px 34px -12px rgb(16 185 129 / 90%); /* Brilho mais forte. */
    filter: brightness(1.08); /* Um pouco mais claro. */
    transform: translateY(-2px); /* Sobe levemente. */
}

body.pagina-painel .botao-iniciar:disabled {
    border-color: var(--cor-borda-escura); /* Sem destaque... */
    background: var(--cor-painel-escuro-secundario); /* ...fundo apagado... */
    box-shadow: none; /* ...sem brilho... */
    color: var(--admin-texto-rotulo); /* ...e texto discreto. */
    cursor: not-allowed; /* Indica bloqueio. */
}

.botao-iniciar svg {
    width: 1.375rem; /* Triângulo de "play". */
    height: 1.375rem; /* Triângulo de "play". */
    fill: currentColor; /* Preenchido. */
}

body.pagina-painel .quiz-cabecalho__dica {
    max-width: 16rem; /* Mesma largura do botão. */
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
    text-align: center; /* Centralizado. */
}

/* Painel do quiz: abas --------------------------------------------------------- */

.quiz-abas {
    padding-top: var(--espaco-2); /* As abas ficam rente ao topo do painel. */
}

.abas {
    display: flex; /* Abas lado a lado. */
    gap: var(--espaco-1); /* Pequeno espaço entre elas. */
    margin-bottom: var(--espaco-5); /* Espaço até o conteúdo. */
    overflow-x: auto; /* Rola na horizontal se faltar espaço. */
    border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Linha de base das abas. */
    scrollbar-width: none; /* Sem barra no Firefox. */
}

body.pagina-painel .admin-painel .abas__aba {
    display: inline-flex; /* Ícone, texto e contagem lado a lado. */
    flex: 0 0 auto; /* Não encolhe. */
    gap: var(--espaco-2); /* Espaço interno. */
    min-height: 2.75rem; /* Área de clique confortável. */
    margin: 0 0 -1px; /* Sobrepõe a linha de base. */
    padding: 0 var(--espaco-4); /* Espaço lateral. */
    border: 0; /* Sem borda de botão. */
    border-bottom: 2px solid transparent; /* Reserva o sublinhado da aba ativa. */
    border-radius: 0; /* Sem cantos. */
    color: var(--admin-texto-apoio); /* Aba inativa discreta. */
    background: transparent; /* Sem fundo. */
    font-size: 0.9375rem; /* Texto da aba. */
    font-weight: 500; /* Peso médio. */
}

body.pagina-painel .admin-painel .abas__aba:hover:not(:disabled) {
    color: var(--cor-texto-claro); /* Mais clara no hover. */
    background: transparent; /* Continua sem fundo. */
}

body.pagina-painel .admin-painel .abas__aba[aria-selected="true"] {
    border-bottom-color: var(--admin-realce); /* Sublinhado dourado. */
    color: var(--cor-texto-claro); /* Aba ativa em branco. */
    font-weight: 600; /* Leve destaque. */
}

.abas__contagem {
    min-width: 1.5rem; /* Cápsula mínima. */
    padding: 1px 7px; /* Cápsula. */
    border-radius: var(--raio-arredondado); /* Formato de cápsula. */
    color: var(--admin-texto-apoio); /* Número discreto. */
    background: var(--cor-painel-escuro-secundario); /* Fundo um tom acima. */
    font-size: 0.75rem; /* Número pequeno. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.abas__aba[aria-selected="true"] .abas__contagem {
    color: var(--cor-fundo-escuro); /* Número escuro... */
    background: var(--admin-realce); /* ...sobre dourado na aba ativa. */
}

.abas__painel[hidden] {
    display: none; /* Só a aba ativa aparece. */
}

/* Aba Perguntas: barra de ferramentas. */
.perguntas-barra {
    display: flex; /* Dica e botões na mesma linha. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Botões à direita. */
    gap: var(--espaco-3); /* Espaço entre os blocos. */
}

body.pagina-painel .admin-painel .perguntas-barra__dica {
    flex: 1 1 18rem; /* Ocupa o espaço livre. */
    margin: 0; /* Sem margens. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.perguntas-barra__acoes {
    display: flex; /* Botões lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    gap: var(--espaco-2); /* Espaço entre botões. */
}

body.pagina-painel .admin-painel .perguntas-barra__acoes button {
    display: inline-flex; /* Ícone e texto lado a lado. */
    gap: var(--espaco-2); /* Espaço entre ícone e texto. */
    margin: 0; /* Sem margens herdadas. */
}

body.pagina-painel.pagina-gerenciar-quiz #mensagemPerguntas {
    margin: var(--espaco-3) 0 0; /* Espaço acima. */
}

body.pagina-painel.pagina-gerenciar-quiz #mensagemPerguntas:empty {
    display: none; /* Sem espaço vazio quando não há aviso. */
}

.pagina-gerenciar-quiz #perguntasVazio {
    margin-top: var(--espaco-4); /* Espaço abaixo da barra de ferramentas. */
}

/* Aba Relatórios: lista de partidas e relatório em tema escuro ----------------- */

.rel-estado {
    display: flex; /* Spinner e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centralizado. */
    gap: var(--espaco-3); /* Espaço até o texto. */
    padding: var(--espaco-8); /* Bloco espaçoso. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.875rem; /* Texto. */
}

.rel-estado--erro {
    color: var(--cor-feedback-erro-claro); /* Erro em vermelho claro. */
}

.rel-spinner {
    width: 1.25rem; /* Círculo. */
    height: 1.25rem; /* Círculo. */
    border: 3px solid var(--rel-trilho); /* Anel apagado... */
    border-top-color: var(--admin-realce); /* ...com um trecho dourado... */
    border-radius: 50%; /* Círculo. */
    animation: rel-girar 0.7s linear infinite; /* ...girando. */
}

@keyframes rel-girar {
    to {
        transform: rotate(360deg); /* Volta inteira. */
    }
}

body.pagina-painel .admin-painel .rel-lista-titulo,
body.pagina-painel .admin-painel .rel-secao__titulo {
    margin: 0 0 var(--espaco-3); /* Espaço até o conteúdo. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.08em; /* Espaçamento de rótulo. */
    text-transform: uppercase; /* Maiúsculas. */
}

.rel-partidas {
    display: grid; /* Partidas em grade. */
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); /* Quantas couberem. */
    gap: var(--espaco-2); /* Espaço entre partidas. */
    margin-bottom: var(--espaco-5); /* Espaço até o relatório. */
}

body.pagina-painel .admin-painel .rel-partida {
    display: grid; /* PIN, data e participantes empilhados. */
    justify-items: start; /* Alinhados à esquerda. */
    gap: 2px; /* Bem próximos. */
    margin: 0; /* Sem margens herdadas. */
    padding: var(--espaco-3); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-medio); /* Cantos. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro. */
    text-align: left; /* Texto à esquerda. */
}

body.pagina-painel .admin-painel .rel-partida:hover:not(:disabled) {
    border-color: rgb(91 143 199 / 55%); /* Contorno azul no hover. */
    background: var(--cor-fundo-escuro); /* Mantém o fundo. */
}

body.pagina-painel .admin-painel .rel-partida--ativa,
body.pagina-painel .admin-painel .rel-partida--ativa:hover:not(:disabled) {
    border-color: var(--admin-realce); /* Partida aberta com contorno dourado. */
    background: rgb(229 189 113 / 8%); /* Fundo dourado bem leve. */
}

.rel-partida__pin {
    color: var(--admin-realce); /* PIN em dourado, como no telão. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.06em; /* Espaçado. */
}

.rel-partida__data {
    color: var(--cor-texto-claro); /* Data em branco. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 600; /* Leve destaque. */
}

.rel-partida__meta {
    font-size: 0.75rem; /* Texto pequeno. */
}

.rel-cabecalho {
    display: flex; /* Datas e exportar na mesma linha. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Exportar à direita. */
    gap: var(--espaco-3); /* Espaço entre os blocos. */
    margin-bottom: var(--espaco-4); /* Espaço até os indicadores. */
    padding: var(--espaco-4) var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid rgb(229 189 113 / 30%); /* Contorno dourado. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: linear-gradient(120deg, rgb(229 189 113 / 10%), transparent 60%); /* Brilho dourado à esquerda. */
}

body.pagina-painel .admin-painel .rel-cabecalho__rotulo {
    margin: 0; /* Sem margens. */
    color: var(--admin-realce); /* Dourado. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 700; /* Negrito. */
}

body.pagina-painel .admin-painel .rel-cabecalho__datas {
    margin: 2px 0 0; /* Próximo do rótulo. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .rel-exportar {
    display: inline-flex; /* Ícone e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-2); /* Espaço entre ícone e texto. */
    text-decoration: none; /* Sem sublinhado. */
}

.rel-kpis {
    display: grid; /* Indicadores em grade. */
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); /* Quantos couberem. */
    gap: var(--espaco-3); /* Espaço entre indicadores. */
    margin-bottom: var(--espaco-4); /* Espaço até as seções. */
}

.rel-kpi {
    --kpi-cor: var(--cor-texto-claro); /* Cor do número; os modificadores trocam. */
    display: flex; /* Rótulo, número e detalhe empilhados. */
    flex-direction: column; /* De cima para baixo. */
    gap: 2px; /* Bem próximos. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro. */
}

.rel-kpi--bom {
    --kpi-cor: var(--rel-bom); /* Verde. */
}

.rel-kpi--medio {
    --kpi-cor: var(--rel-medio); /* Âmbar. */
}

.rel-kpi--ruim {
    --kpi-cor: var(--rel-ruim); /* Vermelho. */
}

.rel-kpi__rotulo {
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.06em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.rel-kpi__valor {
    color: var(--kpi-cor); /* Número na cor do indicador. */
    font-size: 1.5rem; /* Número em destaque. */
    font-weight: 700; /* Negrito. */
    line-height: 1.15; /* Compacto. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.rel-kpi__sub {
    color: var(--admin-texto-rotulo); /* Detalhe discreto. */
    font-size: 0.6875rem; /* Texto pequeno. */
}

.rel-kpis--compacto .rel-kpi__valor {
    font-size: 1.125rem; /* Números menores dentro da análise por pergunta. */
}

.rel-duas-colunas {
    display: grid; /* Duas seções lado a lado. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Colunas iguais. */
    gap: var(--espaco-4); /* Espaço entre elas. */
}

.rel-secao {
    margin-bottom: var(--espaco-4); /* Espaço entre seções. */
    padding: var(--espaco-4) var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
}

body.pagina-painel .admin-painel .rel-secao__titulo--sub {
    margin-top: var(--espaco-4); /* Subtítulo dentro de uma seção. */
}

.rel-rosca {
    display: flex; /* Rosca e legenda lado a lado. */
    flex-wrap: wrap; /* Legenda abaixo em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-5); /* Espaço entre rosca e legenda. */
}

.rel-legenda {
    display: grid; /* Itens empilhados. */
    gap: var(--espaco-2); /* Espaço entre itens. */
    margin: 0; /* Sem margens. */
    padding: 0; /* Sem recuo. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    list-style: none; /* Sem marcadores. */
}

.rel-legenda strong {
    color: var(--cor-texto-claro); /* Números em branco. */
}

.rel-legenda__ponto {
    display: inline-block; /* Ponto colorido antes do texto. */
    width: 0.625rem; /* Diâmetro. */
    height: 0.625rem; /* Diâmetro. */
    margin-right: var(--espaco-2); /* Espaço até o texto. */
    border-radius: 50%; /* Círculo. */
}

.rel-legenda__ponto--bom {
    background: var(--rel-bom); /* Verde. */
}

.rel-legenda__ponto--ruim {
    background: var(--rel-ruim); /* Vermelho. */
}

.rel-legenda__ponto--medio {
    background: var(--rel-medio); /* Âmbar. */
}

.rel-barra {
    display: flex; /* Rótulo, barra e valor na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre as partes. */
    margin-bottom: var(--espaco-2); /* Espaço entre barras. */
}

.rel-barra__rotulo {
    flex: 0 0 7rem; /* Coluna fixa de nomes. */
    overflow: hidden; /* Corta nomes longos... */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    text-overflow: ellipsis; /* ...com reticências. */
    white-space: nowrap; /* Uma linha. */
}

.rel-barra__trilho {
    flex: 1; /* Ocupa o espaço livre. */
    height: 0.5rem; /* Barra fina. */
    overflow: hidden; /* Recorta o preenchimento. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    background: var(--rel-trilho); /* Trilho vazio. */
}

.rel-barra__valor-barra {
    display: block; /* Ocupa a altura do trilho. */
    height: 100%; /* Altura do trilho. */
    border-radius: inherit; /* Cápsula. */
    background: var(--rel-azul); /* Azul da pontuação. */
}

.rel-barra__valor-barra--bom {
    background: var(--rel-bom); /* Verde. */
}

.rel-barra__valor-barra--medio {
    background: var(--rel-medio); /* Âmbar. */
}

.rel-barra__valor-barra--ruim {
    background: var(--rel-ruim); /* Vermelho. */
}

.rel-barra__valor {
    min-width: 2.75rem; /* Coluna de valores alinhada. */
    color: var(--cor-texto-claro); /* Valor em branco. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
    text-align: right; /* À direita. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.rel-destaques {
    display: grid; /* Dois destaques lado a lado. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Colunas iguais. */
    gap: var(--espaco-3); /* Espaço entre eles. */
}

.rel-destaque {
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border-left: 3px solid var(--rel-bom); /* Faixa colorida. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    background: rgb(16 185 129 / 8%); /* Fundo verde translúcido. */
}

.rel-destaque--ruim {
    border-left-color: var(--rel-ruim); /* Faixa vermelha. */
    background: rgb(239 68 68 / 8%); /* Fundo vermelho translúcido. */
}

body.pagina-painel .admin-painel .rel-destaque__rotulo {
    margin: 0 0 var(--espaco-1); /* Pequeno espaço até o texto. */
    color: var(--rel-bom); /* Verde. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.06em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

body.pagina-painel .admin-painel .rel-destaque--ruim .rel-destaque__rotulo {
    color: var(--usuarios-vermelho-claro); /* Vermelho claro. */
}

body.pagina-painel .admin-painel .rel-destaque__texto {
    margin: 0; /* Sem margens. */
    color: var(--cor-texto-claro); /* Pergunta em branco. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 500; /* Peso médio. */
}

body.pagina-painel .admin-painel .rel-destaque__meta {
    margin: var(--espaco-1) 0 0; /* Abaixo da pergunta. */
    font-size: 0.75rem; /* Texto pequeno. */
}

.rel-tabela-rolagem {
    overflow-x: auto; /* Tabelas largas rolam sem quebrar a página. */
}

.rel-tabela {
    width: 100%; /* Largura da seção. */
    border-collapse: collapse; /* Bordas únicas. */
    font-size: 0.8125rem; /* Texto da tabela. */
}

.rel-tabela th {
    padding: var(--espaco-2) var(--espaco-3); /* Espaço interno. */
    border-bottom: var(--borda-fina) solid var(--cor-borda-escura); /* Linha do cabeçalho. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.6875rem; /* Rótulo pequeno. */
    font-weight: 600; /* Leve destaque. */
    letter-spacing: 0.06em; /* Espaçado. */
    text-align: left; /* À esquerda. */
    text-transform: uppercase; /* Maiúsculas. */
    white-space: nowrap; /* Uma linha. */
}

.rel-tabela td {
    padding: var(--espaco-2) var(--espaco-3); /* Espaço interno. */
    border-bottom: var(--borda-fina) solid rgb(52 73 98 / 55%); /* Divisória suave. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
}

.rel-tabela td strong {
    color: var(--cor-texto-claro); /* Pontos em branco. */
}

.rel-tabela tr:last-child td {
    border-bottom: 0; /* Sem linha após a última. */
}

.rel-tabela tbody tr:hover {
    background: var(--usuarios-linha-hover); /* Realce da linha. */
}

.rel-posicao {
    display: inline-grid; /* Centraliza o número. */
    place-items: center; /* Centro. */
    width: 1.5rem; /* Círculo. */
    height: 1.5rem; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    color: var(--admin-texto-apoio); /* Número discreto. */
    background: var(--cor-fundo-escuro); /* Fundo escuro. */
    font-size: 0.75rem; /* Número pequeno. */
    font-weight: 700; /* Negrito. */
}

.rel-posicao--ouro {
    color: #3b2a05; /* Número escuro... */
    background: var(--admin-realce); /* ...sobre dourado. */
}

.rel-posicao--prata {
    color: #1e293b; /* Número escuro... */
    background: #cbd5e1; /* ...sobre prata. */
}

.rel-posicao--bronze {
    color: #3a2010; /* Número escuro... */
    background: #ce8c5a; /* ...sobre bronze. */
}

.rel-velocidade {
    display: flex; /* Posição, nome e tempo na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre as partes. */
    padding: var(--espaco-2) 0; /* Espaço vertical. */
    border-bottom: var(--borda-fina) solid rgb(52 73 98 / 55%); /* Divisória suave. */
    font-size: 0.8125rem; /* Texto. */
}

.rel-velocidade:last-child {
    border-bottom: 0; /* Sem linha após a última. */
}

.rel-velocidade__posicao {
    width: 1.75rem; /* Coluna da posição. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-weight: 700; /* Negrito. */
    text-align: center; /* Centralizada. */
}

.rel-velocidade__nome {
    flex: 1; /* Ocupa o espaço livre. */
    color: var(--cor-texto-claro); /* Nome em branco. */
}

.rel-velocidade__tempo {
    color: var(--palco-ciano); /* Tempo em ciano, como o cronômetro do telão. */
    font-weight: 600; /* Leve destaque. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

/* Análise por pergunta: <details> nativo como acordeão. */
.rel-pergunta {
    margin-bottom: var(--espaco-2); /* Espaço entre perguntas. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--cor-fundo-escuro); /* Fundo mais escuro. */
}

.rel-pergunta__resumo {
    display: flex; /* Número, texto, taxa e tempo na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre as partes. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    cursor: pointer; /* Indica clique. */
    list-style: none; /* Esconde o triângulo padrão... */
}

.rel-pergunta__resumo::-webkit-details-marker {
    display: none; /* ...também no Safari. */
}

.rel-pergunta__resumo::after {
    content: "▾"; /* Seta própria... */
    color: var(--admin-texto-rotulo); /* ...discreta... */
    transition: transform var(--admin-transicao); /* ...que gira ao abrir. */
}

.rel-pergunta[open] .rel-pergunta__resumo::after {
    transform: rotate(180deg); /* Aberta: seta para cima. */
}

.rel-pergunta__resumo:hover {
    background: var(--usuarios-linha-hover); /* Realce sob o ponteiro. */
}

.rel-pergunta__numero {
    flex: 0 0 auto; /* Não encolhe. */
    padding: 1px 7px; /* Cápsula. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    color: var(--cor-fundo-escuro); /* Número escuro... */
    background: var(--admin-realce); /* ...sobre dourado. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
}

.rel-pergunta__texto {
    flex: 1; /* Ocupa o espaço livre. */
    min-width: 0; /* Permite quebrar. */
    color: var(--cor-texto-claro); /* Pergunta em branco. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 500; /* Peso médio. */
}

.rel-pergunta__tempo {
    flex: 0 0 auto; /* Não encolhe. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.75rem; /* Texto pequeno. */
}

.rel-pergunta__corpo {
    padding: var(--espaco-3) var(--espaco-4) var(--espaco-4); /* Espaço interno. */
    border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória. */
}

.rel-selo {
    flex: 0 0 auto; /* Não encolhe. */
    padding: 1px 8px; /* Cápsula. */
    border-radius: var(--raio-arredondado); /* Formato de cápsula. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
}

.rel-selo--bom {
    color: var(--usuarios-verde-claro); /* Verde claro... */
    background: rgb(16 185 129 / 14%); /* ...sobre verde translúcido. */
}

.rel-selo--medio {
    color: var(--usuarios-ambar); /* Âmbar... */
    background: rgb(245 158 11 / 14%); /* ...sobre âmbar translúcido. */
}

.rel-selo--ruim {
    color: var(--usuarios-vermelho-claro); /* Vermelho claro... */
    background: rgb(239 68 68 / 14%); /* ...sobre vermelho translúcido. */
}

body.pagina-painel .admin-painel .rel-correta {
    margin: 0 0 var(--espaco-3); /* Espaço até os indicadores. */
    padding: var(--espaco-2) var(--espaco-3); /* Faixa compacta. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    color: var(--usuarios-verde-claro); /* Verde claro. */
    background: rgb(16 185 129 / 10%); /* Fundo verde translúcido. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
}

/* Telas médias e celulares ------------------------------------------------------ */

@media (max-width: 48rem) {
    .quiz-cabecalho {
        flex-direction: column; /* Informações em cima, iniciar embaixo. */
        align-items: stretch; /* Ocupa a largura. */
    }

    .quiz-cabecalho__iniciar {
        align-items: stretch; /* Botão na largura toda. */
    }

    body.pagina-painel .botao-iniciar {
        min-width: 0; /* Pode encolher. */
    }

    body.pagina-painel .quiz-cabecalho__dica {
        max-width: none; /* Largura toda. */
    }

    .rel-duas-colunas,
    .rel-destaques {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna. */
    }

    .perguntas-barra__acoes,
    body.pagina-painel .admin-painel .perguntas-barra__acoes button {
        width: 100%; /* Botões empilhados na largura toda. */
    }

    body.pagina-painel .admin-painel .perguntas-barra__acoes button {
        justify-content: center; /* Texto centralizado. */
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-cartao,
    .quiz-cartao__gerenciar svg,
    body.pagina-painel .botao-iniciar {
        transition: none; /* Sem animações para quem prefere menos movimento. */
    }

    .quiz-cartao:hover,
    .quiz-cartao:focus-within {
        transform: none; /* Cartão não sobe. */
    }
}

/* =============================================================================
   SOLICITAÇÃO DE PLANO E PAPEL "GERENTE"
   Minha conta: aviso de pedido em análise. Usuários: faixa de pedidos pendentes,
   selo laranja com Aprovar/Recusar na linha e selos de permissão.
   ============================================================================= */
:root {
    --solicitacao-cor: #fb923c; /* Laranja dos pedidos aguardando análise. */
    --solicitacao-claro: #fdba74; /* Laranja claro legível sobre o fundo escuro. */
    --solicitacao-fundo: rgb(251 146 60 / 12%); /* Fundo laranja translúcido. */
    --solicitacao-borda: rgb(251 146 60 / 40%); /* Contorno laranja suave. */
    --gerente-cor: #c4b5fd; /* Lilás do selo "Gerente". */
}

/* Minha conta: pedido em análise ---------------------------------------------- */

.solicitacao-plano {
    display: flex; /* Ícone, texto e botão lado a lado. */
    flex-wrap: wrap; /* Botão abaixo em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre as partes. */
    margin-bottom: var(--espaco-4); /* Espaço até o botão de trocar plano. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid var(--solicitacao-borda); /* Contorno laranja. */
    border-left: 3px solid var(--solicitacao-cor); /* Faixa laranja à esquerda. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--solicitacao-fundo); /* Fundo laranja translúcido. */
}

.solicitacao-plano__icone {
    display: grid; /* Centraliza o relógio. */
    flex: 0 0 auto; /* Não encolhe. */
    place-items: center; /* Centro. */
    width: 2rem; /* Círculo. */
    height: 2rem; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    color: var(--solicitacao-cor); /* Relógio laranja. */
    background: rgb(251 146 60 / 16%); /* Fundo laranja. */
}

.solicitacao-plano__icone svg,
.aviso-solicitacoes__icone svg {
    width: 1.125rem; /* Ícone de relógio. */
    height: 1.125rem; /* Ícone de relógio. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Cor do ícone. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.solicitacao-plano__texto {
    flex: 1 1 14rem; /* Ocupa o espaço livre. */
    min-width: 0; /* Permite quebrar. */
}

body.pagina-painel .admin-painel .solicitacao-plano__titulo {
    margin: 0; /* Sem margens. */
    color: var(--cor-texto-claro); /* Texto em branco. */
    font-size: 0.875rem; /* Texto. */
    font-weight: 500; /* Peso médio. */
}

body.pagina-painel .admin-painel .solicitacao-plano__detalhe {
    margin: 2px 0 0; /* Próximo do título. */
    font-size: 0.75rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .solicitacao-plano__retirar {
    min-height: 2rem; /* Botão compacto. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-3); /* Espaço lateral. */
    border-color: var(--solicitacao-borda); /* Contorno laranja. */
    color: var(--solicitacao-claro); /* Texto laranja claro. */
    background: transparent; /* Sem fundo. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .solicitacao-plano__retirar:hover:not(:disabled) {
    background: rgb(251 146 60 / 14%); /* Fundo laranja sutil. */
}

body.pagina-painel .admin-painel .conta-botao-plano:disabled {
    border-color: var(--cor-borda-escura); /* Sem destaque... */
    color: var(--admin-texto-rotulo); /* ...texto apagado... */
    background: var(--cor-painel-escuro-secundario); /* ...e fundo neutro enquanto há pedido em análise. */
    cursor: not-allowed; /* Indica bloqueio. */
}

/* Usuários: faixa de pedidos pendentes ---------------------------------------- */

.aviso-solicitacoes {
    display: flex; /* Ícone, texto e botão lado a lado. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço entre as partes. */
    margin-bottom: var(--espaco-4); /* Espaço até a tabela. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid var(--solicitacao-borda); /* Contorno laranja. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: var(--solicitacao-fundo); /* Fundo laranja translúcido. */
}

.aviso-solicitacoes[hidden] {
    display: none; /* Some quando não há pedidos. */
}

.aviso-solicitacoes__icone {
    display: grid; /* Centraliza o ícone. */
    place-items: center; /* Centro. */
    color: var(--solicitacao-cor); /* Relógio laranja. */
}

body.pagina-painel .admin-painel .aviso-solicitacoes__texto {
    flex: 1 1 16rem; /* Ocupa o espaço livre. */
    margin: 0; /* Sem margens. */
    color: var(--cor-texto-claro); /* Texto em branco. */
    font-size: 0.875rem; /* Texto. */
}

.aviso-solicitacoes__texto strong {
    color: var(--solicitacao-claro); /* Quantidade em laranja. */
}

body.pagina-painel .admin-painel .aviso-solicitacoes__botao {
    min-height: 2rem; /* Botão compacto. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 var(--espaco-3); /* Espaço lateral. */
    border-color: var(--solicitacao-borda); /* Contorno laranja. */
    color: var(--solicitacao-claro); /* Texto laranja claro. */
    background: transparent; /* Sem fundo. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .aviso-solicitacoes__botao:hover:not(:disabled),
body.pagina-painel .admin-painel .aviso-solicitacoes__botao[aria-pressed="true"] {
    color: #1c1003; /* Texto escuro... */
    background: var(--solicitacao-cor); /* ...sobre laranja quando o filtro está ligado. */
}

/* Usuários: pedido na linha da tabela ------------------------------------------ */

.tabela-usuarios__plano {
    display: flex; /* Plano atual e pedido empilhados. */
    flex-direction: column; /* De cima para baixo. */
    align-items: flex-start; /* Alinhados à esquerda. */
    gap: var(--espaco-1); /* Pequeno espaço entre eles. */
}

.solicitacao-linha {
    display: flex; /* Selo e botões. */
    flex-wrap: wrap; /* Botões na linha de baixo se faltar espaço. */
    align-items: center; /* Centraliza verticalmente. */
    gap: 4px; /* Bem próximos. */
    max-width: 11rem; /* Coluna compacta: selo em cima, botões embaixo. */
}

.selo--solicitacao {
    border-color: var(--solicitacao-borda); /* Contorno laranja. */
    color: var(--solicitacao-claro); /* Texto laranja claro. */
    background: var(--solicitacao-fundo); /* Fundo laranja translúcido. */
    letter-spacing: 0.04em; /* Levemente espaçado. */
    text-transform: uppercase; /* Como os selos de plano. */
    cursor: help; /* Data do pedido no balão. */
}

body.pagina-painel .admin-painel .solicitacao-linha__botao {
    min-height: 1.5rem; /* Botões pequenos. */
    margin: 0; /* Sem margens herdadas. */
    padding: 0 8px; /* Espaço lateral. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
}

body.pagina-painel .admin-painel .solicitacao-linha__botao--aprovar {
    border-color: rgb(16 185 129 / 45%); /* Contorno verde. */
    color: var(--usuarios-verde-claro); /* Texto verde claro. */
    background: rgb(16 185 129 / 12%); /* Fundo verde translúcido. */
}

body.pagina-painel .admin-painel .solicitacao-linha__botao--aprovar:hover:not(:disabled) {
    color: #04130d; /* Texto escuro... */
    background: var(--usuarios-verde); /* ...sobre verde sólido. */
}

body.pagina-painel .admin-painel .solicitacao-linha__botao--recusar {
    border-color: rgb(248 113 113 / 40%); /* Contorno vermelho. */
    color: var(--usuarios-vermelho-claro); /* Texto vermelho claro. */
    background: transparent; /* Sem fundo. */
}

body.pagina-painel .admin-painel .solicitacao-linha__botao--recusar:hover:not(:disabled) {
    background: rgb(248 113 113 / 14%); /* Fundo vermelho sutil. */
}

/* Selos de permissão. */
.selo--gerente {
    padding: 0 7px; /* Selo menor ao lado do nome. */
    border-color: rgb(196 181 253 / 40%); /* Contorno lilás. */
    color: var(--gerente-cor); /* Texto lilás. */
    background: rgb(196 181 253 / 10%); /* Fundo lilás translúcido. */
    font-size: 0.625rem; /* Bem pequeno. */
    letter-spacing: 0.06em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.selo--leitura {
    padding: 0 7px; /* Selo discreto no lugar das ações. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    background: transparent; /* Sem fundo. */
    font-size: 0.625rem; /* Bem pequeno. */
    font-weight: 500; /* Peso médio. */
}

/* =============================================================================
   GESTÃO DE PLANOS (admin/planos.php) E LIMITE DE PARTIDAS
   Cartões com preço ativo e limites, modal em abas com interruptores e campos
   de moeda; modal de upgrade quando a trava de partidas bloqueia o início.
   ============================================================================= */
:root {
    --plano-cartao-cor: var(--usuarios-cinza); /* Faixa do cartão; cada plano troca. */
    --plano-promo: #34d399; /* Verde do desconto promocional. */
}

.planos-grade {
    display: grid; /* Cartões em grade. */
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); /* Quantos couberem. */
    gap: var(--espaco-4); /* Espaço entre cartões. */
}

.plano-cartao {
    position: relative; /* Referência para a faixa. */
    display: flex; /* Conteúdo empilhado... */
    flex-direction: column; /* ...de cima para baixo. */
    overflow: hidden; /* Recorta a faixa. */
    padding: var(--espaco-5); /* Espaço interno. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-grande); /* Cantos. */
    background: var(--cor-painel-escuro-secundario); /* Um tom acima do painel. */
}

.plano-cartao::before {
    content: ""; /* Faixa colorida no topo. */
    position: absolute; /* Presa ao topo. */
    inset: 0 0 auto; /* Largura inteira. */
    height: 3px; /* Faixa fina. */
    background: var(--plano-cartao-cor); /* Cor do plano. */
}

.plano-cartao--starter {
    --plano-cartao-cor: var(--palco-azul-claro); /* Cobalto. */
}

.plano-cartao--pro {
    --plano-cartao-cor: var(--admin-realce); /* Dourado. */
}

.plano-cartao--outro {
    --plano-cartao-cor: var(--gerente-cor); /* Lilás para planos criados depois. */
}

.plano-cartao--inativo {
    opacity: 0.6; /* Inativo aparece apagado. */
}

.plano-cartao__topo {
    display: flex; /* Nome e selos. */
    flex-wrap: wrap; /* Selos quebram se faltar espaço. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Selos à direita. */
    gap: var(--espaco-2); /* Espaço mínimo. */
}

body.pagina-painel .admin-painel .plano-cartao__nome {
    margin: 0; /* Sem margens. */
    font-size: 1.25rem; /* Nome em destaque. */
    font-weight: 700; /* Negrito. */
}

.plano-cartao__selos {
    display: flex; /* Selos lado a lado. */
    flex-wrap: wrap; /* Quebra se necessário. */
    gap: 4px; /* Bem próximos. */
}

body.pagina-painel .admin-painel .plano-cartao__codigo {
    margin: 2px 0 0; /* Logo abaixo do nome. */
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-family: var(--fonte-mono); /* Código em fonte monoespaçada. */
    font-size: 0.75rem; /* Texto pequeno. */
}

.plano-cartao__precos {
    margin: var(--espaco-4) 0; /* Espaço ao redor. */
    padding: var(--espaco-3) 0; /* Espaço interno. */
    border-block: var(--borda-fina) solid var(--cor-borda-escura); /* Linhas acima e abaixo. */
}

.plano-preco {
    display: flex; /* Valores na mesma linha. */
    flex-wrap: wrap; /* Quebra se necessário. */
    align-items: baseline; /* Alinha pela base do texto. */
    gap: 0 var(--espaco-2); /* Espaço entre as partes. */
}

.plano-preco__valor {
    color: var(--cor-texto-claro); /* Preço em branco. */
    font-size: 1.625rem; /* Preço em destaque. */
    font-weight: 700; /* Negrito. */
    letter-spacing: -0.02em; /* Compacto. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.plano-preco--anual .plano-preco__valor {
    font-size: 1rem; /* Anual em tamanho menor. */
}

.plano-preco__ciclo,
.plano-preco__cheio,
.plano-preco__definir {
    color: var(--admin-texto-rotulo); /* Tom discreto. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.plano-preco__definir {
    font-style: italic; /* Indica que falta cadastrar. */
}

.plano-preco__promo {
    padding: 0 6px; /* Cápsula. */
    border-radius: var(--raio-arredondado); /* Formato de cápsula. */
    color: #04130d; /* Texto escuro... */
    background: var(--plano-promo); /* ...sobre verde. */
    font-size: 0.6875rem; /* Texto pequeno. */
    font-weight: 700; /* Negrito. */
}

.plano-cartao__limites {
    display: grid; /* Linhas empilhadas. */
    flex: 1; /* Empurra o rodapé para a base. */
    gap: var(--espaco-2); /* Espaço entre linhas. */
    margin: 0 0 var(--espaco-4); /* Espaço até o rodapé. */
    padding: 0; /* Sem recuo. */
    list-style: none; /* Sem marcadores. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.plano-cartao__limites li {
    display: flex; /* Rótulo e valor nas pontas. */
    justify-content: space-between; /* Valor à direita. */
    gap: var(--espaco-3); /* Espaço mínimo. */
}

.plano-cartao__rotulo {
    color: var(--admin-texto-rotulo); /* Rótulo discreto. */
}

.plano-cartao__limites strong {
    color: var(--cor-texto-claro); /* Valor em branco. */
    font-weight: 600; /* Semi-negrito. */
    text-align: right; /* À direita. */
}

.plano-cartao__rodape {
    display: flex; /* Uso e botão na mesma linha. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Nas pontas. */
    gap: var(--espaco-3); /* Espaço mínimo. */
}

body.pagina-painel .admin-painel .plano-cartao__uso {
    margin: 0; /* Sem margens. */
    font-size: 0.75rem; /* Texto pequeno. */
}

body.pagina-painel .admin-painel .plano-cartao__editar {
    margin: 0; /* Sem margens herdadas. */
}

/* Modal do plano. */
body.pagina-painel dialog.modal-plano {
    width: min(100% - var(--espaco-8), 40rem); /* Mais largo: três abas de campos. */
}

.modal-plano .abas__painel {
    min-height: 15rem; /* Altura estável ao trocar de aba. */
}

.plano-interruptores {
    display: grid; /* Interruptores empilhados. */
    align-content: end; /* Alinhados à base da linha. */
    gap: var(--espaco-2); /* Espaço entre eles. */
}

/* Interruptor (checkbox com aparência de chave). */
body.pagina-painel .interruptor {
    display: flex; /* Chave e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    gap: var(--espaco-3); /* Espaço até o texto. */
    margin: var(--espaco-2) 0 0; /* Espaço acima. */
    cursor: pointer; /* Indica clique. */
}

body.pagina-painel .interruptor input {
    position: absolute; /* Checkbox nativo invisível... */
    width: 1px; /* ...mas acessível pelo teclado. */
    height: 1px; /* Tamanho mínimo. */
    min-height: 0; /* Sem altura herdada. */
    margin: 0; /* Sem margens. */
    padding: 0; /* Sem preenchimento. */
    opacity: 0; /* Invisível. */
}

.interruptor__trilho {
    position: relative; /* Referência para a bolinha. */
    flex: 0 0 auto; /* Não encolhe. */
    width: 2.5rem; /* Trilho. */
    height: 1.375rem; /* Trilho. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    background: var(--cor-borda-escura); /* Desligado: cinza. */
    transition: background-color var(--admin-transicao); /* Troca suave. */
}

.interruptor__trilho::after {
    content: ""; /* Bolinha. */
    position: absolute; /* Dentro do trilho. */
    top: 3px; /* Margem interna. */
    left: 3px; /* Posição desligada. */
    width: 1rem; /* Diâmetro. */
    height: 1rem; /* Diâmetro. */
    border-radius: 50%; /* Círculo. */
    background: var(--cor-texto-claro); /* Branca. */
    transition: transform var(--admin-transicao); /* Desliza suave. */
}

.interruptor input:checked + .interruptor__trilho {
    background: var(--usuarios-verde); /* Ligado: verde. */
}

.interruptor input:checked + .interruptor__trilho::after {
    transform: translateX(1.125rem); /* Bolinha à direita. */
}

.interruptor input:focus-visible + .interruptor__trilho {
    outline: 2px solid var(--admin-campo-foco); /* Foco visível pelo teclado. */
    outline-offset: 2px; /* Afastado. */
}

.interruptor input:disabled + .interruptor__trilho {
    opacity: 0.5; /* Travado (plano de entrada). */
}

.interruptor > span:last-child {
    display: grid; /* Título e explicação empilhados. */
    line-height: 1.3; /* Compacto. */
}

.interruptor strong {
    color: var(--cor-texto-claro); /* Título em branco. */
    font-size: 0.875rem; /* Texto. */
}

.interruptor small {
    color: var(--admin-texto-rotulo); /* Explicação discreta. */
    font-size: 0.75rem; /* Texto pequeno. */
}

/* Campo de moeda com prefixo "R$". */
.campo-moeda {
    position: relative; /* Referência para o prefixo. */
}

.campo-moeda > span {
    position: absolute; /* Dentro do campo... */
    top: calc(50% + 2px); /* ...centralizado (compensa a margem do campo)... */
    left: 12px; /* ...à esquerda. */
    color: var(--admin-texto-rotulo); /* Prefixo discreto. */
    font-size: 0.875rem; /* Texto. */
    transform: translateY(-50%); /* Ajuste fino. */
    pointer-events: none; /* Clique vai para o campo. */
}

body.pagina-painel .campo-moeda input {
    padding-left: 2.25rem; /* Espaço para o "R$". */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

body.pagina-painel .plano-economia {
    margin: var(--espaco-4) 0 0; /* Espaço acima. */
    padding: var(--espaco-2) var(--espaco-3); /* Faixa compacta. */
    border-left: 3px solid var(--plano-promo); /* Faixa verde. */
    border-radius: var(--admin-campo-raio); /* Cantos discretos. */
    color: var(--usuarios-verde-claro); /* Texto verde claro. */
    background: rgb(16 185 129 / 8%); /* Fundo verde translúcido. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.modal-plano__rodape {
    display: flex; /* Excluir à esquerda, ações à direita. */
    flex-wrap: wrap; /* Quebra em telas estreitas. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: space-between; /* Nas pontas. */
    gap: var(--espaco-3); /* Espaço mínimo. */
    margin-top: var(--espaco-2); /* Espaço acima. */
}

.modal-plano__rodape .dialogo-acoes {
    margin-left: auto; /* Ações sempre à direita. */
}

body.pagina-painel .admin-painel .modal-plano__excluir,
body.pagina-painel .admin-painel .modal-plano__inativar {
    margin: 0; /* Sem margens herdadas. */
    border-color: transparent; /* Botão de texto. */
    color: var(--usuarios-vermelho-claro); /* Vermelho claro. */
    background: transparent; /* Sem fundo. */
}

body.pagina-painel .admin-painel .modal-plano__inativar {
    min-height: 0; /* Botão dentro do texto. */
    padding: 0; /* Sem preenchimento. */
    color: var(--usuarios-ambar); /* Âmbar: ação recomendada no lugar de excluir. */
    text-decoration: underline; /* Aparência de link. */
}

body.pagina-painel .admin-painel .modal-plano__excluir:hover:not(:disabled) {
    background: rgb(248 113 113 / 10%); /* Fundo vermelho sutil. */
}

body.pagina-painel .admin-painel .modal-plano__inativar:hover:not(:disabled) {
    color: var(--cor-texto-claro); /* Mais claro no hover. */
    background: transparent; /* Sem fundo. */
}

/* Modal de limite de partidas (Painel do quiz). */
.modal-limite {
    text-align: center; /* Conteúdo centralizado. */
}

.modal-limite__icone {
    display: inline-grid; /* Centraliza o cadeado. */
    place-items: center; /* Centro. */
    width: 3.5rem; /* Círculo. */
    height: 3.5rem; /* Círculo. */
    margin-bottom: var(--espaco-3); /* Espaço até o título. */
    border-radius: 50%; /* Círculo. */
    color: var(--solicitacao-cor); /* Laranja. */
    background: var(--solicitacao-fundo); /* Fundo laranja translúcido. */
    box-shadow: 0 0 0 6px rgb(251 146 60 / 6%); /* Halo. */
}

.modal-limite__icone svg {
    width: 1.5rem; /* Cadeado. */
    height: 1.5rem; /* Cadeado. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Laranja. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

.modal-limite__uso {
    margin: var(--espaco-4) 0 var(--espaco-2); /* Espaço ao redor. */
    text-align: left; /* Barra alinhada à esquerda. */
}

.modal-limite__uso .uso {
    margin-top: 0; /* Sem o espaço do cartão da Minha conta. */
}

.modal-limite .modal-usuario__acoes {
    justify-content: center; /* Botões centralizados. */
}

body.pagina-painel .admin-painel .modal-limite__upgrade {
    border-color: var(--palco-azul-claro); /* Borda azul viva. */
    color: var(--cor-texto-claro); /* Texto branco. */
    background: var(--palco-azul); /* Botão primário. */
    font-weight: 600; /* Leve destaque. */
    text-decoration: none; /* Sem sublinhado. */
}

body.pagina-painel .admin-painel .modal-limite__upgrade:hover {
    background: var(--palco-azul-claro); /* Azul mais claro. */
}

/* Minha conta: período de partidas esgotado e preço nas opções de plano. */
.conta-limites__item--cheio,
.conta-limites__item--cheio strong {
    color: var(--usuarios-vermelho-claro); /* Período esgotado em vermelho claro. */
}

body.pagina-painel .modal-planos .plano-opcao__preco {
    margin: var(--espaco-1) 0 0; /* Logo abaixo do nome. */
    color: var(--admin-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
}

.plano-opcao__preco strong {
    color: var(--cor-texto-claro); /* Valor em branco. */
    font-size: 1rem; /* Valor em destaque. */
}

.plano-opcao__preco s {
    color: var(--admin-texto-rotulo); /* Preço cheio riscado, discreto. */
}

/* =============================================================================
   CELULAR: TELA FINAL COMPARTILHÁVEL (app/player.html)
   O cartão vira uma imagem com o html2canvas: só recursos que ele reproduz bem
   (gradientes comuns, sombras); nada de backdrop-filter nem texto com gradiente.
   ============================================================================= */
.resultado-jogador {
    display: flex; /* Cartão e botão empilhados... */
    flex-direction: column; /* ...de cima para baixo... */
    align-items: center; /* ...centralizados. */
    gap: 1rem; /* Espaço entre cartão e botão. */
    width: 100%; /* Largura da tela. */
    padding: 0.5rem 0 1rem; /* Respiro vertical. */
}

.cartao-resultado {
    position: relative; /* Referência para o brilho do pódio. */
    width: min(100%, 22rem); /* Cartão no formato de celular. */
    overflow: hidden; /* Recorta os brilhos. */
    padding: 1.5rem 1.25rem 1.25rem; /* Espaço interno. */
    border: 1px solid rgb(129 140 248 / 35%); /* Contorno índigo. */
    border-radius: 24px; /* Cantos generosos. */
    color: #ffffff; /* Texto branco. */
    background:
        radial-gradient(120% 60% at 100% 0%, rgb(99 102 241 / 45%), transparent 60%),
        radial-gradient(90% 50% at 0% 100%, rgb(34 211 238 / 22%), transparent 60%),
        linear-gradient(160deg, #141c3a, #0b0f19); /* Gradiente da marca (o mesmo da landing). */
    box-shadow: 0 24px 50px -24px rgb(0 0 0 / 80%); /* Sombra projetada. */
    font-family: "Inter", "Segoe UI", Arial, sans-serif; /* Tipografia da marca na imagem. */
    text-align: center; /* Conteúdo centralizado. */
}

.cartao-resultado--podio {
    border-color: rgb(229 189 113 / 55%); /* Pódio: contorno dourado... */
    background:
        radial-gradient(120% 60% at 50% 0%, rgb(229 189 113 / 35%), transparent 60%),
        radial-gradient(90% 50% at 0% 100%, rgb(99 102 241 / 28%), transparent 60%),
        linear-gradient(160deg, #1d1a2e, #0b0f19); /* ...e luz dourada vinda de cima. */
}

.cartao-resultado__marca {
    display: flex; /* Logo e nome lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centralizado. */
    gap: 0.5rem; /* Espaço entre logo e nome. */
    font-size: 1rem; /* Nome da marca. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.02em; /* Refinado. */
}

.cartao-resultado__marca svg {
    width: 1.75rem; /* Logo. */
    height: 1.75rem; /* Logo. */
}

.cartao-resultado__quiz {
    margin: 0.5rem 0 0; /* Abaixo da marca. */
    color: #94a3b8; /* Cinza claro. */
    font-size: 0.8125rem; /* Texto pequeno. */
    overflow-wrap: anywhere; /* Títulos longos quebram. */
}

.cartao-resultado__posicao {
    display: flex; /* Medalha, posição e total na mesma linha. */
    align-items: baseline; /* Alinha pela base. */
    justify-content: center; /* Centralizado. */
    gap: 0.25rem; /* Espaço entre as partes. */
    margin: 1.25rem 0 0.25rem; /* Espaço ao redor. */
    font-size: 3.5rem; /* Posição gigante. */
    font-weight: 800; /* Extra negrito. */
    line-height: 1; /* Compacto. */
    letter-spacing: -0.04em; /* Números juntos. */
}

.cartao-resultado--podio .cartao-resultado__posicao {
    color: #f3d08f; /* Posição dourada no pódio. */
}

.cartao-resultado__medalha {
    margin-right: 0.25rem; /* Espaço até o número. */
    font-size: 2.5rem; /* Medalha grande. */
    letter-spacing: 0; /* Sem compactar. */
}

.cartao-resultado__posicao small {
    color: #94a3b8; /* "de 25" em cinza... */
    font-size: 1rem; /* ...pequeno. */
    font-weight: 600; /* Semi-negrito. */
    letter-spacing: 0; /* Sem compactar. */
}

.cartao-resultado__titulo {
    margin: 0.75rem 0 0; /* Espaço acima. */
    color: #ffffff; /* Branco. */
    font-size: 1.25rem; /* Mensagem de parabéns. */
    font-weight: 800; /* Extra negrito. */
    line-height: 1.25; /* Compacto. */
}

.cartao-resultado__acertos {
    margin: 0.375rem 0 0; /* Logo abaixo da mensagem. */
    color: #cbd5e1; /* Cinza claro. */
    font-size: 1rem; /* Texto. */
}

.cartao-resultado__acertos strong {
    color: #6ee7b7; /* Acertos em verde. */
    font-size: 1.125rem; /* Destaque. */
}

.cartao-resultado__pontos {
    display: flex; /* Número e rótulo empilhados. */
    flex-direction: column; /* De cima para baixo. */
    align-items: center; /* Centralizados. */
    margin: 1.25rem auto 0; /* Espaço acima. */
    padding: 0.875rem 1rem; /* Espaço interno. */
    border: 1px solid rgb(148 163 184 / 18%); /* Borda sutil. */
    border-radius: 16px; /* Cantos. */
    background: rgb(15 23 42 / 70%); /* Fundo escuro translúcido (sem desfoque, por causa da imagem). */
}

.cartao-resultado__pontos strong {
    color: #67e8f9; /* Pontos em ciano vibrante. */
    font-size: 2.5rem; /* Pontuação em destaque. */
    font-weight: 800; /* Extra negrito. */
    line-height: 1.05; /* Compacto. */
    letter-spacing: -0.03em; /* Números juntos. */
    font-variant-numeric: tabular-nums; /* Dígitos alinhados. */
}

.cartao-resultado__pontos span {
    color: #94a3b8; /* Rótulo cinza. */
    font-size: 0.75rem; /* Texto pequeno. */
    font-weight: 600; /* Semi-negrito. */
    letter-spacing: 0.12em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

.cartao-resultado__nome {
    margin: 1rem 0 0; /* Espaço acima. */
    color: #ffffff; /* Nome do jogador em branco. */
    font-size: 1rem; /* Texto. */
    font-weight: 700; /* Negrito. */
    overflow-wrap: anywhere; /* Nomes longos quebram. */
}

.cartao-resultado__rodape {
    margin: 0.75rem 0 0; /* Espaço acima. */
    padding-top: 0.75rem; /* Espaço até a divisória. */
    border-top: 1px solid rgb(148 163 184 / 14%); /* Divisória. */
    color: #64748b; /* Texto discreto. */
    font-size: 0.6875rem; /* Texto pequeno. */
    letter-spacing: 0.04em; /* Levemente espaçado. */
}

/* Botão "Compartilhar Resultado" (fora do cartão: não aparece na imagem). */
.botao-compartilhar {
    display: inline-flex; /* Ícone e texto lado a lado. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centraliza horizontalmente. */
    gap: 0.625rem; /* Espaço entre ícone e texto. */
    width: min(100%, 22rem); /* Mesma largura do cartão. */
    min-height: 3.5rem; /* Alvo de toque grande. */
    padding: 0 1.5rem; /* Espaço lateral. */
    border: 0; /* Sem borda. */
    border-radius: 999px; /* Cápsula. */
    color: #ffffff; /* Texto branco. */
    background: linear-gradient(135deg, #7c3aed, #2563eb); /* Gradiente da marca. */
    box-shadow: 0 10px 30px -10px rgb(124 58 237 / 80%), 0 0 0 1px rgb(165 180 252 / 25%); /* Brilho neon. */
    font-family: "Inter", "Segoe UI", Arial, sans-serif; /* Tipografia da marca. */
    font-size: 1rem; /* Texto. */
    font-weight: 800; /* Extra negrito. */
    cursor: pointer; /* Indica toque. */
    animation: compartilhar-pulsar 2.4s ease-in-out infinite; /* Chama a atenção sem exagero. */
}

.botao-compartilhar:active {
    transform: scale(0.97); /* Resposta ao toque. */
}

.botao-compartilhar:disabled {
    cursor: progress; /* Gerando a imagem. */
    opacity: 0.7; /* Apagado. */
    animation: none; /* Para de pulsar. */
}

.botao-compartilhar svg {
    width: 1.25rem; /* Ícone de compartilhar. */
    height: 1.25rem; /* Ícone de compartilhar. */
    fill: none; /* Contorno. */
    stroke: currentColor; /* Branco. */
    stroke-width: 2; /* Traço. */
    stroke-linecap: round; /* Pontas arredondadas. */
    stroke-linejoin: round; /* Junções arredondadas. */
}

@keyframes compartilhar-pulsar {
    0%, 100% { box-shadow: 0 10px 30px -10px rgb(124 58 237 / 80%), 0 0 0 1px rgb(165 180 252 / 25%); } /* Brilho normal. */
    50% { box-shadow: 0 10px 36px -6px rgb(99 102 241 / 95%), 0 0 0 4px rgb(165 180 252 / 18%); } /* Brilho mais forte. */
}

@media (prefers-reduced-motion: reduce) {
    .botao-compartilhar {
        animation: none; /* Sem pulsar para quem prefere menos movimento. */
    }
}

/* =============================================================================
   MOTOR DE TEMAS DA SALA (telão app/host.php e celular app/player.html)
   O tema é uma classe no <body> ("theme-<nome>") que só SOBRESCREVE variáveis
   definidas no :root do bloco "TELÃO DO APRESENTADOR E TELA DO JOGADOR"
   (--palco-*, --cor-alternativa-*). Sem classe = tema padrão (Dark Modern).
   Para criar um tema novo: copie o bloco .theme-futebol, troque os valores e
   inclua o nome em MOTOR_TEMAS (api/game/motor.php) e no seletor do telão.
   ============================================================================= */

/* Números do jogo (cronômetro, PIN e pontos) usam a fonte de números do tema. */
.cronometro__numero,
.entrada-palco__pin,
.ranking-palco__pontos,
.podio-palco__pontos,
.jogo__cronometro,
.jogo__pontos {
    font-family: var(--palco-fonte-numeros); /* Padrão: a mesma do jogo; tema pode usar fonte de placar. */
}

/* Troca de tema suave (o apresentador vê a prévia na hora). */
body.pagina-palco,
body.pagina-jogo,
.comando,
.palco-jogo {
    transition: background-color 0.5s ease, color 0.5s ease; /* Cores mudam sem piscar. */
}

/* ---------- Tema "Futebol / Estádio" ---------- */
body.theme-futebol {
    /* Gramado e superfícies */
    --palco-fundo: #0f3b1b; /* Verde escuro de gramado. */
    --palco-comando: #0a2a13; /* Painel do telão: verde mais fechado (banco de reservas). */
    --palco-superficie: rgb(255 255 255 / 7%); /* Cartões translúcidos claros. */
    --palco-borda: rgb(255 255 255 / 18%); /* Bordas brancas como as linhas do campo. */
    --palco-capsula: rgb(0 0 0 / 28%); /* Cápsula de pontos escura sobre a grama. */

    /* Texto: branco das linhas do campo */
    --palco-texto: #ffffff; /* Branco puro. */
    --palco-texto-apoio: #c8ead1; /* Verde bem claro. */
    --palco-texto-rotulo: #8fd3a2; /* Verde médio para rótulos. */

    /* Acentos: amarelo-limão neon (botões, cronômetro, PIN e pódio) */
    --palco-ouro: #ccff00; /* PIN, selos e destaque do 1º lugar. */
    --palco-ciano: #ccff00; /* Cronômetro e barra de tempo. */
    --palco-azul: #a3e635; /* Botão principal (base). */
    --palco-azul-claro: #ccff00; /* Botão principal (topo). */
    --palco-acao-texto: #0c2410; /* Texto escuro sobre o neon. */
    --palco-acao-hover: #e4ff66; /* Neon mais claro no hover. */
    --palco-acao-sombra: rgb(204 255 0 / 45%); /* Brilho neon. */

    /* Refletores do estádio e linhas do campo (10% de opacidade) */
    --palco-brilho-topo: rgb(255 255 255 / 12%); /* Luz branca vinda do topo. */
    --palco-textura:
        radial-gradient(circle at 50% 55%, transparent 0 9rem, rgb(255 255 255 / 10%) 9rem calc(9rem + 2px), transparent calc(9rem + 3px)),
        linear-gradient(90deg, transparent calc(50% - 1px), rgb(255 255 255 / 10%) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        radial-gradient(55% 45% at 12% -5%, rgb(255 255 255 / 16%), transparent 70%),
        radial-gradient(55% 45% at 88% -5%, rgb(255 255 255 / 16%), transparent 70%),
        repeating-linear-gradient(90deg, rgb(255 255 255 / 3.5%) 0 5rem, rgb(0 0 0 / 4%) 5rem 10rem); /* Círculo central, linha do meio, dois refletores e faixas de corte da grama. */

    /* Números com cara de placar de estádio */
    --palco-fonte-numeros: "Teko", "Oswald", "Arial Narrow", var(--palco-fonte); /* Fonte condensada de placar. */

    /* Botões A/B/C/D como camisas de time: cores sólidas, listras e borda branca grossa */
    --cor-alternativa-a-fundo: #dc2626; /* Vermelho. */
    --cor-alternativa-a-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-b-fundo: #1d4ed8; /* Azul. */
    --cor-alternativa-b-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-c-fundo: #facc15; /* Amarelo. */
    --cor-alternativa-c-texto: #1a1500; /* Letra escura. */
    --cor-alternativa-d-fundo: #111827; /* Preto (contrasta com o gramado). */
    --cor-alternativa-d-texto: #ffffff; /* Letra branca. */
    --palco-alternativa-borda: 4px solid #ffffff; /* Gola/contorno branco grosso. */
    --palco-alternativa-textura: repeating-linear-gradient(90deg, rgb(255 255 255 / 11%) 0 14px, transparent 14px 28px); /* Listras verticais de camisa. */
}

/* Números de placar: a fonte condensada pede um pouco mais de tamanho e espaçamento. */
body.theme-futebol .cronometro__numero,
body.theme-futebol .jogo__cronometro,
body.theme-futebol .jogo__pontos,
body.theme-futebol .entrada-palco__pin {
    letter-spacing: 0.04em; /* Dígitos de placar separados. */
}

body.theme-futebol .jogo__cronometro {
    font-size: 1.5rem; /* Teko é condensada: um pouco maior. */
    box-shadow: 0 0 14px rgb(204 255 0 / 35%); /* Anel neon brilhando. */
}

body.theme-futebol .jogo__pontos {
    font-size: 1.5rem; /* Pontos em fonte de placar. */
    color: #ccff00; /* Neon. */
}

/* Escolha do jogador: contorno neon em vez de branco (o branco já é a borda da camisa). */
body.theme-futebol .jogo-botao--escolhido {
    box-shadow: 0 0 0 5px #ccff00, 0 0 36px rgb(204 255 0 / 50%); /* Anel neon. */
}

/* Cartão final compartilhável também entra em campo. */
body.theme-futebol .cartao-resultado {
    border-color: rgb(204 255 0 / 45%); /* Contorno neon. */
    background:
        radial-gradient(120% 60% at 50% 0%, rgb(255 255 255 / 16%), transparent 60%),
        repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 3rem, transparent 3rem 6rem),
        linear-gradient(160deg, #14532d, #0a2a13); /* Refletor + gramado. */
}

body.theme-futebol .cartao-resultado__pontos strong,
body.theme-futebol .cartao-resultado--podio .cartao-resultado__posicao {
    color: #ccff00; /* Pontos e posição em neon. */
}

body.theme-futebol .botao-compartilhar {
    color: #0c2410; /* Texto escuro... */
    background: linear-gradient(135deg, #e4ff66, #a3e635); /* ...sobre o neon. */
    box-shadow: 0 10px 30px -10px rgb(204 255 0 / 70%); /* Brilho neon. */
}

/* ---------- Tema "Rose Gold Elegance" (claro, premium) ---------- */
body.theme-rosegold {
    /* Fundo blush muito claro e vidro translúcido */
    --palco-fundo: #fcf9f9; /* Blush/areia quase branco. */
    --palco-comando: #f6eded; /* Painel do telão um tom mais rosado. */
    --palco-superficie: rgb(255 255 255 / 62%); /* Vidro claro translúcido. */
    --palco-borda: rgb(183 110 121 / 24%); /* Borda rosé suave. */
    --palco-capsula: rgb(183 110 121 / 12%); /* Cápsula de pontos rosada. */

    /* Texto em chumbo para leitura perfeita no fundo claro */
    --palco-texto: #334155; /* Cinza chumbo escuro. */
    --palco-texto-apoio: #64748b; /* Cinza médio. */
    --palco-texto-rotulo: #a0727a; /* Rosé acinzentado nos rótulos. */

    /* Acentos rose gold */
    --palco-ouro: #b76e79; /* PIN, selos e 1º lugar em rose gold. */
    --palco-ciano: #b76e79; /* Cronômetro rosé. */
    --palco-alerta: #dc2626; /* Últimos segundos: vermelho legível no claro. */
    --palco-azul: #b76e79; /* Botão principal (base). */
    --palco-azul-claro: #d9a3a9; /* Botão principal (topo). */
    --palco-acao-texto: #ffffff; /* Texto branco sobre o rosé. */
    --palco-acao-hover: #c98791; /* Rosé mais claro no hover. */
    --palco-acao-sombra: rgb(183 110 121 / 45%); /* Brilho rosé. */

    /* Luz suave de champanhe vinda dos cantos */
    --palco-brilho-topo: rgb(232 190 184 / 55%); /* Brilho rosado no topo. */
    --palco-textura:
        radial-gradient(55% 45% at 0% 0%, rgb(240 210 204 / 70%), transparent 70%),
        radial-gradient(50% 45% at 100% 100%, rgb(192 170 131 / 22%), transparent 70%); /* Dois halos: rosé e champanhe. */

    /* Números elegantes com serifa */
    --palco-fonte-numeros: "Playfair Display", Georgia, serif; /* Serifa de convite. */

    /* Alternativas em tons joia suaves, com brilho metálico */
    --cor-alternativa-a-fundo: #a8505e; /* Rosé profundo. */
    --cor-alternativa-a-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-b-fundo: #5b6b9a; /* Azul empoeirado. */
    --cor-alternativa-b-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-c-fundo: #c0aa83; /* Champanhe dourado. */
    --cor-alternativa-c-texto: #33280f; /* Letra escura. */
    --cor-alternativa-d-fundo: #5f8a7a; /* Verde sálvia. */
    --cor-alternativa-d-texto: #ffffff; /* Letra branca. */
    --palco-alternativa-borda: 2px solid rgb(255 255 255 / 60%); /* Filete claro. */
    --palco-alternativa-textura: linear-gradient(135deg, rgb(255 255 255 / 26%), transparent 45%); /* Reflexo metálico. */
}

/* Fundo claro: o que era branco/escuro fixo passa a usar chumbo e rosé. */
body.theme-rosegold .botao-comando:not([class*="botao-comando--"]):hover:not(:disabled) {
    border-color: rgb(183 110 121 / 40%); /* Borda rosé. */
    background: rgb(183 110 121 / 10%); /* Fundo rosé leve. */
}

body.theme-rosegold .botao-comando--aviso {
    color: #b45309; /* Âmbar escuro (legível no claro). */
}

body.theme-rosegold .botao-comando--perigo-contorno {
    color: #b91c1c; /* Vermelho escuro (legível no claro). */
}

body.theme-rosegold .entrada-palco__link a,
body.theme-rosegold .jogo__mensagem,
body.theme-rosegold .jogo:not(.jogo--acerto):not(.jogo--erro) .jogo-aviso__texto {
    color: var(--palco-texto-apoio); /* Cinza legível. */
}

body.theme-rosegold .cronometro--alerta .cronometro__numero,
body.theme-rosegold .jogo__cronometro--alerta {
    color: #dc2626; /* Vermelho escuro no lugar do rosa-claro. */
}

body.theme-rosegold .ranking-palco {
    background: rgb(255 255 255 / 72%); /* Vidro claro. */
    box-shadow: 0 20px 40px -24px rgb(183 110 121 / 40%); /* Sombra rosada. */
}

body.theme-rosegold .alt-palco {
    box-shadow: inset 0 -6px 0 rgb(0 0 0 / 12%), 0 16px 32px -18px rgb(120 70 80 / 45%); /* Sombra suave (sem preto pesado). */
}

body.theme-rosegold .alt-palco--correta,
body.theme-rosegold .jogo-botao--escolhido {
    box-shadow: 0 0 0 4px var(--palco-ouro), 0 0 36px rgb(183 110 121 / 45%); /* Contorno rosé (o branco some no fundo claro). */
}

body.theme-rosegold .jogo-pausa {
    background: rgb(252 249 249 / 88%); /* Véu claro. */
}

body.theme-rosegold .jogo-pausa__texto {
    color: var(--palco-texto-apoio); /* Texto chumbo. */
}

/* Cartão final compartilhável em blush e rose gold. */
body.theme-rosegold .cartao-resultado {
    border-color: rgb(183 110 121 / 40%); /* Contorno rosé. */
    color: #334155; /* Texto chumbo. */
    background:
        radial-gradient(120% 60% at 100% 0%, rgb(240 210 204 / 90%), transparent 60%),
        radial-gradient(90% 50% at 0% 100%, rgb(192 170 131 / 30%), transparent 60%),
        linear-gradient(160deg, #fffafa, #f6eded); /* Blush com halos. */
    box-shadow: 0 24px 50px -24px rgb(183 110 121 / 55%); /* Sombra rosada. */
}

body.theme-rosegold .cartao-resultado__titulo,
body.theme-rosegold .cartao-resultado__nome {
    color: #334155; /* Chumbo. */
}

body.theme-rosegold .cartao-resultado__quiz,
body.theme-rosegold .cartao-resultado__posicao small,
body.theme-rosegold .cartao-resultado__pontos span,
body.theme-rosegold .cartao-resultado__acertos {
    color: #64748b; /* Cinza médio. */
}

body.theme-rosegold .cartao-resultado__acertos strong {
    color: #5f8a7a; /* Acertos em sálvia. */
}

body.theme-rosegold .cartao-resultado__pontos {
    border-color: rgb(183 110 121 / 22%); /* Borda rosé. */
    background: rgb(255 255 255 / 75%); /* Vidro claro. */
}

body.theme-rosegold .cartao-resultado__pontos strong,
body.theme-rosegold .cartao-resultado--podio .cartao-resultado__posicao {
    color: #b76e79; /* Pontos e posição em rose gold. */
}

body.theme-rosegold .cartao-resultado__rodape {
    border-top-color: rgb(183 110 121 / 18%); /* Divisória rosé. */
    color: #a0727a; /* Rodapé rosé. */
}

body.theme-rosegold .botao-compartilhar {
    background: linear-gradient(135deg, #d9a3a9, #b76e79); /* Rose gold. */
    box-shadow: 0 10px 30px -10px rgb(183 110 121 / 70%); /* Brilho rosé. */
}

/* ---------- Tema "Sunset Vibes" (jovem, gradiente quente) ---------- */
body.theme-sunset {
    /* Pôr do sol: pêssego → magenta → roxo profundo (o gradiente vive na textura) */
    --palco-fundo: #3b0f4f; /* Roxo profundo (cor sólida de base). */
    --palco-comando: #2a0b3a; /* Painel roxo mais fechado. */
    --palco-superficie: rgb(255 255 255 / 13%); /* Vidro claro sobre o gradiente. */
    --palco-borda: rgb(255 255 255 / 24%); /* Borda clara. */
    --palco-capsula: rgb(0 0 0 / 24%); /* Cápsula escura translúcida. */

    /* Texto branco puro */
    --palco-texto: #ffffff; /* Branco. */
    --palco-texto-apoio: #ffe3ef; /* Rosado bem claro. */
    --palco-texto-rotulo: #ffc2dc; /* Rosa claro. */

    /* Acentos quentes e vibrantes */
    --palco-ouro: #ffd23f; /* Amarelo sol no PIN e no 1º lugar. */
    --palco-ciano: #ffb347; /* Cronômetro laranja. */
    --palco-azul: #ff6a00; /* Botão principal laranja neon (base). */
    --palco-azul-claro: #ffa040; /* Botão principal (topo). */
    --palco-acao-texto: #2a0b3a; /* Texto roxo escuro no laranja (contraste). */
    --palco-acao-hover: #ffb347; /* Laranja claro no hover. */
    --palco-acao-sombra: rgb(255 106 0 / 55%); /* Brilho laranja. */

    --palco-brilho-topo: rgb(255 214 170 / 30%); /* Luz dourada no topo. */
    --palco-textura:
        radial-gradient(38% 30% at 82% 8%, rgb(255 236 170 / 50%), transparent 70%),
        linear-gradient(160deg, #ffb07c 0%, #ff5e8a 32%, #c2187a 60%, #3b0f4f 100%); /* Sol + degradê do pôr do sol. */

    /* Alternativas de alto contraste */
    --cor-alternativa-a-fundo: #ff2e88; /* Rosa choque. */
    --cor-alternativa-a-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-b-fundo: #6a1bd9; /* Roxo vibrante. */
    --cor-alternativa-b-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-c-fundo: #ffd000; /* Amarelo. */
    --cor-alternativa-c-texto: #3b0f4f; /* Letra roxa escura. */
    --cor-alternativa-d-fundo: #ff6b00; /* Laranja neon. */
    --cor-alternativa-d-texto: #ffffff; /* Letra branca. */
    --palco-alternativa-borda: 3px solid rgb(255 255 255 / 85%); /* Contorno branco: destaca sobre o degradê. */
    --palco-alternativa-textura: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 55%); /* Brilho no topo. */
}

/* Fontes em negrito no tema todo. */
body.theme-sunset .comando,
body.theme-sunset .palco-jogo,
body.theme-sunset .jogo,
body.theme-sunset .alt-palco {
    font-weight: 700; /* Negrito. */
}

body.theme-sunset .palco-jogo {
    text-shadow: 0 2px 12px rgb(59 15 79 / 45%); /* Sombra roxa: branco legível sobre o pêssego. */
}

body.theme-sunset .alt-palco--c {
    text-shadow: none; /* Letra escura no amarelo dispensa sombra. */
}

/* Cronômetro sobre o pêssego claro: disco roxo translúcido dá contraste ao anel e ao número. */
body.theme-sunset .cronometro {
    border-radius: 50%; /* Disco. */
    background: rgb(59 15 79 / 45%); /* Roxo translúcido. */
    box-shadow: 0 8px 24px -8px rgb(59 15 79 / 60%); /* Sombra suave. */
}

/* Celular: topo (nome, pontos, tempo) sobre faixa roxa translúcida, pelo mesmo motivo. */
body.theme-sunset .jogo__topo {
    background: linear-gradient(180deg, rgb(59 15 79 / 45%), transparent); /* Faixa roxa que some para baixo. */
}

body.theme-sunset .jogo__cronometro {
    background: rgb(59 15 79 / 45%); /* Disco roxo atrás do número. */
}

body.theme-sunset .ranking-palco {
    background: rgb(42 11 58 / 55%); /* Vidro roxo (no lugar do chumbo). */
}

body.theme-sunset .cartao-resultado {
    border-color: rgb(255 255 255 / 45%); /* Contorno claro. */
    background:
        radial-gradient(60% 40% at 85% 5%, rgb(255 236 170 / 55%), transparent 70%),
        linear-gradient(160deg, #ffb07c 0%, #ff5e8a 35%, #c2187a 65%, #3b0f4f 100%); /* Pôr do sol. */
}

body.theme-sunset .cartao-resultado__pontos strong,
body.theme-sunset .cartao-resultado--podio .cartao-resultado__posicao {
    color: #ffd23f; /* Amarelo sol. */
}

body.theme-sunset .botao-compartilhar {
    color: #2a0b3a; /* Texto roxo... */
    background: linear-gradient(135deg, #ffd23f, #ff6a00); /* ...sobre amarelo → laranja. */
    box-shadow: 0 10px 30px -10px rgb(255 106 0 / 75%); /* Brilho laranja. */
}

/* ---------- Tema "Lousa Escolar" (clássico, giz no quadro) ---------- */
body.theme-lousa {
    /* Ardósia/grafite com pó de giz */
    --palco-fundo: #2d3436; /* Grafite de quadro-negro. */
    --palco-comando: #23292a; /* Painel mais escuro (apagador). */
    --palco-superficie: rgb(255 255 255 / 6%); /* Cartões como giz apagado. */
    --palco-borda: rgb(248 249 250 / 24%); /* Traço de giz. */
    --palco-capsula: rgb(0 0 0 / 22%); /* Cápsula escura. */

    /* Texto off-white de giz */
    --palco-texto: #f8f9fa; /* Giz branco. */
    --palco-texto-apoio: #d5dbdb; /* Giz gasto. */
    --palco-texto-rotulo: #a4b0b0; /* Giz bem apagado. */

    /* Acentos em giz colorido */
    --palco-ouro: #ffeaa7; /* Giz amarelo no PIN e no 1º lugar. */
    --palco-ciano: #a0d8ef; /* Giz azul no cronômetro. */
    --palco-alerta: #ff9f9f; /* Giz vermelho. */
    --palco-azul: #a8e6a3; /* Botão principal em giz verde (base). */
    --palco-azul-claro: #c8f0c4; /* Botão principal (topo). */
    --palco-acao-texto: #1f2526; /* Texto grafite sobre o giz. */
    --palco-acao-hover: #d0f2cc; /* Verde mais claro no hover. */
    --palco-acao-sombra: rgb(168 230 163 / 30%); /* Brilho fraco (fosco). */

    --palco-brilho-topo: rgb(255 255 255 / 6%); /* Luz de sala de aula, bem discreta. */
    --palco-textura:
        radial-gradient(40% 22% at 22% 28%, rgb(255 255 255 / 6%), transparent 70%),
        radial-gradient(35% 20% at 75% 70%, rgb(255 255 255 / 5%), transparent 70%),
        radial-gradient(30% 18% at 60% 18%, rgb(255 255 255 / 4%), transparent 70%),
        repeating-linear-gradient(-12deg, rgb(255 255 255 / 1.5%) 0 2px, transparent 2px 7px); /* Borrões de apagador + pó de giz. */

    /* Números escritos à mão, como giz */
    --palco-fonte-numeros: "Gochi Hand", "Comic Sans MS", cursive; /* Letra cursiva de giz. */

    /* Botões em giz pastel, foscos */
    --cor-alternativa-a-fundo: #f4a6b7; /* Giz rosa. */
    --cor-alternativa-a-texto: #3a1d24; /* Letra escura. */
    --cor-alternativa-b-fundo: #9cc9f0; /* Giz azul. */
    --cor-alternativa-b-texto: #13283a; /* Letra escura. */
    --cor-alternativa-c-fundo: #f9e79f; /* Giz amarelo. */
    --cor-alternativa-c-texto: #3b3410; /* Letra escura. */
    --cor-alternativa-d-fundo: #a8e6a3; /* Giz verde. */
    --cor-alternativa-d-texto: #173a1a; /* Letra escura. */
    --palco-alternativa-borda: 2px dashed rgb(255 255 255 / 55%); /* Contorno tracejado de giz. */
    --palco-alternativa-textura: repeating-linear-gradient(45deg, rgb(255 255 255 / 9%) 0 2px, transparent 2px 6px); /* Textura fosca de giz. */
}

/* Ranking como um quadro menor, com contorno de giz. */
body.theme-lousa .ranking-palco {
    border: 2px dashed rgb(248 249 250 / 22%); /* Contorno tracejado de giz. */
    background: rgb(0 0 0 / 18%); /* Grafite um pouco mais escuro. */
}

/* Moldura de madeira em volta do quadro (telão). */
body.theme-lousa .palco-jogo {
    box-shadow: inset 0 0 0 10px #7a5634, inset 0 0 0 13px #4f3520, inset 0 0 60px rgb(0 0 0 / 45%); /* Madeira + sombra nas bordas. */
}

/* Letras escuras sobre o pastel: sem sombra de relevo. */
body.theme-lousa .jogo-botao,
body.theme-lousa .alt-palco {
    text-shadow: none; /* Giz não tem sombra. */
}

body.theme-lousa .alt-palco:not(.alt-palco--correta) .alt-palco__letra {
    background: rgb(255 255 255 / 35%); /* Quadrado da letra claro (fica bom no pastel). */
}

body.theme-lousa .cronometro__numero,
body.theme-lousa .jogo__cronometro,
body.theme-lousa .jogo__pontos,
body.theme-lousa .entrada-palco__pin {
    letter-spacing: 0.04em; /* Escrita à mão respira melhor. */
}

body.theme-lousa .cartao-resultado {
    border: 6px solid #7a5634; /* Moldura de madeira. */
    background:
        radial-gradient(60% 30% at 30% 20%, rgb(255 255 255 / 7%), transparent 70%),
        linear-gradient(160deg, #354042, #23292a); /* Quadro-negro. */
}

body.theme-lousa .cartao-resultado__pontos strong,
body.theme-lousa .cartao-resultado--podio .cartao-resultado__posicao {
    color: #ffeaa7; /* Giz amarelo. */
}

body.theme-lousa .botao-compartilhar {
    color: #1f2526; /* Texto grafite... */
    background: linear-gradient(135deg, #c8f0c4, #a8e6a3); /* ...sobre giz verde. */
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 60%); /* Sombra simples (fosco). */
}

/* ---------- Tema "Arcade Neon" (gamificação/cyberpunk) ---------- */
body.theme-arcade {
    /* Preto profundo com grade neon */
    --palco-fundo: #000000; /* Preto. */
    --palco-comando: #05050d; /* Painel quase preto. */
    --palco-superficie: rgb(0 243 255 / 6%); /* Vidro ciano. */
    --palco-borda: rgb(0 243 255 / 32%); /* Borda neon ciano. */
    --palco-capsula: rgb(255 0 255 / 16%); /* Cápsula magenta. */

    /* Texto branco com brilho */
    --palco-texto: #ffffff; /* Branco. */
    --palco-texto-apoio: #b8f7ff; /* Ciano bem claro. */
    --palco-texto-rotulo: #ff7bff; /* Rosa neon. */

    /* Neon: ciano, rosa choque e verde limão */
    --palco-ouro: #39ff14; /* Verde limão no PIN e no 1º lugar. */
    --palco-ciano: #00f3ff; /* Cronômetro ciano. */
    --palco-alerta: #ff2a6d; /* Rosa-vermelho neon. */
    --palco-azul: #ff00ff; /* Botão principal rosa choque (base). */
    --palco-azul-claro: #ff5cff; /* Botão principal (topo). */
    --palco-acao-texto: #000000; /* Texto preto no neon. */
    --palco-acao-hover: #ff8cff; /* Rosa mais claro no hover. */
    --palco-acao-sombra: rgb(255 0 255 / 65%); /* Brilho magenta. */

    --palco-brilho-topo: rgb(255 0 255 / 20%); /* Luz magenta no topo. */
    --palco-textura:
        radial-gradient(80% 45% at 50% 105%, rgb(255 0 255 / 28%), transparent 70%),
        linear-gradient(rgb(0 243 255 / 13%) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem,
        linear-gradient(90deg, rgb(0 243 255 / 13%) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem; /* Horizonte magenta + grade neon. */

    /* Números digitais */
    --palco-fonte-numeros: "Orbitron", "Courier New", monospace; /* Fonte de painel digital. */

    /* Botões super saturados */
    --cor-alternativa-a-fundo: #ff00ff; /* Rosa choque. */
    --cor-alternativa-a-texto: #ffffff; /* Letra branca. */
    --cor-alternativa-b-fundo: #00f3ff; /* Ciano neon. */
    --cor-alternativa-b-texto: #001a1c; /* Letra escura. */
    --cor-alternativa-c-fundo: #39ff14; /* Verde limão. */
    --cor-alternativa-c-texto: #031a00; /* Letra escura. */
    --cor-alternativa-d-fundo: #9d00ff; /* Roxo elétrico. */
    --cor-alternativa-d-texto: #ffffff; /* Letra branca. */
    --palco-alternativa-borda: 2px solid rgb(255 255 255 / 75%); /* Filete claro. */
    --palco-alternativa-textura: repeating-linear-gradient(0deg, rgb(0 0 0 / 10%) 0 2px, transparent 2px 4px); /* Linhas de monitor CRT. */
}

/* Texto com leve brilho neon. */
body.theme-arcade .comando,
body.theme-arcade .palco-jogo,
body.theme-arcade .jogo {
    text-shadow: 0 0 8px rgb(0 243 255 / 55%); /* Glow ciano. */
}

/* Letras escuras nos botões claros não brilham (ficariam borradas). */
body.theme-arcade .alt-palco--b,
body.theme-arcade .alt-palco--c,
body.theme-arcade .jogo-botao--b,
body.theme-arcade .jogo-botao--c {
    text-shadow: none; /* Sem glow. */
}

/* Cada alternativa brilha na própria cor. */
body.theme-arcade .alt-palco--a,
body.theme-arcade .jogo-botao--a { box-shadow: inset 0 -6px 0 rgb(0 0 0 / 22%), 0 0 26px rgb(255 0 255 / 55%); } /* Magenta. */
body.theme-arcade .alt-palco--b,
body.theme-arcade .jogo-botao--b { box-shadow: inset 0 -6px 0 rgb(0 0 0 / 22%), 0 0 26px rgb(0 243 255 / 55%); } /* Ciano. */
body.theme-arcade .alt-palco--c,
body.theme-arcade .jogo-botao--c { box-shadow: inset 0 -6px 0 rgb(0 0 0 / 22%), 0 0 26px rgb(57 255 20 / 50%); } /* Limão. */
body.theme-arcade .alt-palco--d,
body.theme-arcade .jogo-botao--d { box-shadow: inset 0 -6px 0 rgb(0 0 0 / 22%), 0 0 26px rgb(157 0 255 / 60%); } /* Roxo. */

body.theme-arcade .alt-palco--correta,
body.theme-arcade .jogo-botao--escolhido {
    box-shadow: 0 0 0 4px #ffffff, 0 0 48px rgb(255 255 255 / 55%); /* Escolha/acerto: anel branco forte. */
}

body.theme-arcade .ranking-palco {
    background: rgb(0 0 0 / 65%); /* Painel preto... */
    box-shadow: 0 0 28px -6px rgb(0 243 255 / 35%); /* ...com brilho ciano. */
}

body.theme-arcade .cronometro__numero,
body.theme-arcade .jogo__cronometro,
body.theme-arcade .jogo__pontos,
body.theme-arcade .entrada-palco__pin {
    letter-spacing: 0.06em; /* Dígitos de painel separados. */
}

body.theme-arcade .jogo__cronometro {
    font-size: 1rem; /* Orbitron é larga: um pouco menor no círculo. */
}

body.theme-arcade .entrada-palco__pin {
    text-shadow: 0 0 24px rgb(57 255 20 / 65%); /* PIN verde brilhando. */
}

body.theme-arcade .cartao-resultado {
    border-color: rgb(0 243 255 / 55%); /* Contorno ciano. */
    background:
        radial-gradient(90% 45% at 50% 105%, rgb(255 0 255 / 35%), transparent 70%),
        linear-gradient(rgb(0 243 255 / 12%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
        linear-gradient(90deg, rgb(0 243 255 / 12%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
        #000000; /* Grade neon. */
}

body.theme-arcade .cartao-resultado__pontos strong,
body.theme-arcade .cartao-resultado--podio .cartao-resultado__posicao {
    color: #39ff14; /* Verde limão. */
}

body.theme-arcade .botao-compartilhar {
    color: #000000; /* Texto preto... */
    background: linear-gradient(135deg, #00f3ff, #ff00ff); /* ...sobre ciano → rosa. */
    box-shadow: 0 0 28px rgb(255 0 255 / 60%); /* Brilho neon. */
}

/* ---------- Seletor "Aparência da Sala" (painel do telão, na sala de espera) ---------- */
/* Amostras de cor: círculos de 32px numa fileira; o nome do tema ativo fica embaixo. */
.comando__temas[hidden] {
    display: none; /* Só aparece na sala de espera. */
}

.temas-sala {
    display: flex; /* Círculos em fileira. */
    flex-wrap: wrap; /* Quebra se o painel for estreito. */
    gap: 0.625rem; /* Espaço entre círculos. */
    margin-top: 0.625rem; /* Abaixo do rótulo. */
}

.tema-opcao {
    width: 2rem; /* 32px. */
    height: 2rem; /* 32px. */
    padding: 0; /* Sem espaço interno. */
    border: 1px solid rgb(255 255 255 / 30%); /* Filete para separar do painel. */
    border-radius: 50%; /* Círculo. */
    cursor: pointer; /* Indica clique. */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Hover e seleção suaves. */
}

.tema-opcao:hover {
    transform: scale(1.12); /* Cresce levemente. */
}

.tema-opcao[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--palco-comando), 0 0 0 4px var(--palco-ouro); /* Anel de destaque no acento do tema. */
    transform: scale(1.08); /* Ativo um pouco maior. */
}

.tema-opcao:focus-visible {
    outline: 2px solid var(--palco-ouro); /* Foco visível pelo teclado. */
    outline-offset: 4px; /* Fora do anel. */
}

.temas-sala__nome {
    margin: 0.5rem 0 0; /* Logo abaixo dos círculos. */
    color: var(--palco-texto-apoio); /* Tom de apoio. */
    font-size: 0.8125rem; /* Texto pequeno. */
    font-weight: 600; /* Leve destaque. */
}

/* Cor/gradiente principal de cada tema. */
.tema-opcao--padrao { background: radial-gradient(circle at 30% 25%, #3b82f6, transparent 60%), #0f172a; } /* Azul-noite. */
.tema-opcao--futebol { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 10%) 0 4px, transparent 4px 8px), #16a34a; box-shadow: inset 0 -4px 0 #ccff00; } /* Gramado + faixa neon. */
.tema-opcao--rosegold { background: linear-gradient(135deg, #f6dcd8, #b76e79 55%, #c0aa83); } /* Rose gold metálico. */
.tema-opcao--sunset { background: linear-gradient(160deg, #ffb07c, #ff5e8a 40%, #c2187a 70%, #3b0f4f); } /* Pôr do sol. */
.tema-opcao--lousa { background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 18%), transparent 45%), #2d3436; box-shadow: inset 0 0 0 3px #7a5634; } /* Ardósia com moldura de madeira. */
.tema-opcao--arcade { background: conic-gradient(from 45deg, #00f3ff, #ff00ff, #39ff14, #00f3ff); box-shadow: inset 0 0 0 5px #000000; } /* Neon sobre preto. */

/* Futebol/lousa/arcade usam sombra interna: o anel do ativo precisa somar as duas. */
.tema-opcao--futebol[aria-checked="true"] { box-shadow: inset 0 -4px 0 #ccff00, 0 0 0 2px var(--palco-comando), 0 0 0 4px var(--palco-ouro); }
.tema-opcao--lousa[aria-checked="true"] { box-shadow: inset 0 0 0 3px #7a5634, 0 0 0 2px var(--palco-comando), 0 0 0 4px var(--palco-ouro); }
.tema-opcao--arcade[aria-checked="true"] { box-shadow: inset 0 0 0 5px #000000, 0 0 0 2px var(--palco-comando), 0 0 0 4px var(--palco-ouro); }

@media (prefers-reduced-motion: reduce) {
    body.pagina-palco,
    body.pagina-jogo,
    .comando,
    .palco-jogo,
    .tema-opcao {
        transition: none; /* Troca de tema instantânea. */
    }
}
/* =============================================================================
   ASSINATURAS (STRIPE) — admin/checkout.php, status em Minha conta e
   painel financeiro (admin/admin_financeiro.php)
   O cartão é digitado no Payment Element (iframe da Stripe); aqui só a moldura.
   ============================================================================= */

.checkout-voltar {
    color: var(--admin-texto-apoio); /* Link discreto no cabeçalho. */
    font-size: 0.875rem; /* Texto pequeno. */
    text-decoration: none; /* Sem sublinhado. */
    white-space: nowrap; /* Uma linha. */
}

.checkout-voltar:hover {
    color: var(--admin-realce); /* Dourado no hover. */
}

.checkout {
    display: grid; /* Resumo e pagamento lado a lado. */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* Pagamento um pouco maior. */
    gap: var(--espaco-5); /* Espaço entre os cartões. */
    align-items: start; /* Cada cartão com a própria altura. */
}

body.pagina-painel .checkout-resumo__rotulo {
    margin: 0 0 var(--espaco-3); /* Espaço até o conteúdo. */
    color: var(--admin-texto-rotulo); /* Rótulo discreto. */
    font-size: 0.75rem; /* Rótulo pequeno. */
    font-weight: 700; /* Negrito. */
    letter-spacing: 0.1em; /* Espaçado. */
    text-transform: uppercase; /* Maiúsculas. */
}

body.pagina-painel .checkout-resumo__plano {
    margin: 0 0 var(--espaco-4); /* Espaço até o seletor. */
    color: var(--cor-texto-claro); /* Branco. */
    font-size: 1.75rem; /* Nome do plano em destaque. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.02em; /* Refinado. */
}

/* Seletor Mensal / Anual (cápsula com dois botões). */
.checkout-ciclo {
    display: inline-flex; /* Dois botões lado a lado. */
    gap: 4px; /* Espaço entre eles. */
    margin-bottom: var(--espaco-4); /* Espaço até o preço. */
    padding: 4px; /* Moldura da cápsula. */
    border: var(--borda-fina) solid var(--cor-borda-escura); /* Borda do tema. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    background: rgb(2 6 23 / 35%); /* Fundo escuro. */
}

body.pagina-painel .admin-painel .checkout-ciclo button {
    min-height: 2rem; /* Botão baixo. */
    padding: 4px 16px; /* Cápsula. */
    border: 0; /* Sem borda. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    color: var(--admin-texto-apoio); /* Não selecionado: cinza. */
    background: transparent; /* Sem fundo. */
    font-weight: 600; /* Semi-negrito. */
}

body.pagina-painel .admin-painel .checkout-ciclo button[aria-checked="true"] {
    color: #1c1503; /* Selecionado: texto escuro... */
    background: var(--admin-realce); /* ...sobre dourado. */
}

.checkout-ciclo__selo {
    margin-left: 4px; /* Afasta do "Anual". */
    padding: 1px 6px; /* Selinho. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    color: #052e1f; /* Texto escuro... */
    background: var(--usuarios-verde-claro); /* ...sobre verde: economia. */
    font-size: 0.6875rem; /* Pequeno. */
    font-weight: 800; /* Extra negrito. */
}

body.pagina-painel .checkout-resumo__valor {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* "/mês" discreto. */
}

.checkout-resumo__valor strong {
    color: var(--cor-texto-claro); /* Valor em branco. */
    font-size: 2.25rem; /* Valor grande. */
    font-weight: 800; /* Extra negrito. */
    letter-spacing: -0.02em; /* Refinado. */
}

body.pagina-painel .checkout-resumo__nota {
    margin: var(--espaco-1) 0 var(--espaco-5); /* Espaço até a lista. */
    color: var(--admin-texto-rotulo); /* Discreto. */
    font-size: 0.8125rem; /* Pequeno. */
}

.checkout-resumo__lista {
    display: grid; /* Itens empilhados. */
    gap: var(--espaco-2); /* Espaço entre itens. */
    margin: 0; /* Sem margens. */
    padding: var(--espaco-4) 0 0; /* Espaço acima. */
    border-top: var(--borda-fina) solid var(--cor-borda-escura); /* Divisória. */
    list-style: none; /* Sem marcadores. */
    color: var(--admin-texto-apoio); /* Texto de apoio. */
    font-size: 0.875rem; /* Texto. */
}

.checkout-resumo__lista li::before {
    content: "✓ "; /* Marcador. */
    color: var(--usuarios-verde-claro); /* Verde. */
    font-weight: 700; /* Negrito. */
}

.checkout-elemento {
    min-height: 12rem; /* Reserva espaço enquanto o formulário seguro carrega. */
}

body.pagina-painel .checkout-carregando {
    display: flex; /* Spinner e texto. */
    align-items: center; /* Centralizados. */
    gap: var(--espaco-2); /* Espaço entre eles. */
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* Cinza. */
    font-size: 0.875rem; /* Texto. */
}

.checkout-spinner {
    width: 1rem; /* Círculo. */
    height: 1rem; /* Círculo. */
    border: 2px solid rgb(229 189 113 / 30%); /* Anel apagado... */
    border-top-color: var(--admin-realce); /* ...com um trecho dourado... */
    border-radius: 50%; /* Círculo. */
    animation: checkout-girar 0.7s linear infinite; /* ...girando. */
}

@keyframes checkout-girar {
    to { transform: rotate(360deg); } /* Volta inteira. */
}

/* Botão de pagar (e "Ir para Minha conta"): dourado, grande. */
body.pagina-painel .admin-painel .checkout-botao {
    display: flex; /* Centraliza o texto. */
    align-items: center; /* Centro. */
    justify-content: center; /* Centro. */
    width: 100%; /* Largura do cartão. */
    min-height: 3.25rem; /* Botão alto. */
    margin-top: var(--espaco-5); /* Espaço acima. */
    border: 0; /* Sem borda. */
    border-radius: var(--raio-arredondado); /* Cápsula. */
    color: #1c1503; /* Texto escuro... */
    background: linear-gradient(180deg, #f3d08f, var(--admin-realce)); /* ...sobre dourado. */
    box-shadow: 0 10px 28px -12px rgb(229 189 113 / 70%); /* Brilho dourado. */
    font-size: 1rem; /* Texto. */
    font-weight: 800; /* Extra negrito. */
    text-decoration: none; /* Link sem sublinhado. */
}

body.pagina-painel .admin-painel .checkout-botao:hover:not(:disabled) {
    background: linear-gradient(180deg, #f8dda6, #edc77f); /* Mais claro no hover. */
}

body.pagina-painel .admin-painel .checkout-botao:disabled {
    cursor: progress; /* Aguardando. */
    opacity: 0.6; /* Apagado. */
}

body.pagina-painel .checkout-mensagem {
    min-height: 1.25em; /* Reserva a linha do erro. */
    margin: var(--espaco-3) 0 0; /* Espaço acima. */
    color: var(--usuarios-vermelho-claro); /* Erro em vermelho claro. */
    font-size: 0.875rem; /* Texto. */
}

body.pagina-painel .checkout-seguranca {
    display: flex; /* Cadeado e texto. */
    align-items: center; /* Centralizados. */
    gap: var(--espaco-2); /* Espaço entre eles. */
    margin: var(--espaco-4) 0 0; /* Espaço acima. */
    color: var(--admin-texto-rotulo); /* Discreto. */
    font-size: 0.75rem; /* Pequeno. */
}

.checkout-seguranca svg {
    flex: 0 0 auto; /* Não encolhe. */
    width: 1rem; /* Cadeado. */
    height: 1rem; /* Cadeado. */
    fill: none; /* Contorno. */
    stroke: var(--usuarios-verde-claro); /* Verde: seguro. */
    stroke-width: 2; /* Traço. */
}

.checkout-sucesso {
    grid-column: 1 / -1; /* Ocupa as duas colunas. */
    max-width: 30rem; /* Cartão estreito... */
    justify-self: center; /* ...centralizado. */
    text-align: center; /* Texto centralizado. */
}

.checkout-sucesso[hidden],
.checkout-resumo[hidden],
.checkout-pagamento[hidden] {
    display: none; /* Some de verdade (o grid não reserva espaço). */
}

.checkout-sucesso__icone {
    display: inline-grid; /* Centraliza o check. */
    place-items: center; /* Centro. */
    width: 4rem; /* Círculo. */
    height: 4rem; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    color: #052e1f; /* Check escuro... */
    background: var(--usuarios-verde-claro); /* ...sobre verde. */
    font-size: 2rem; /* Check grande. */
    font-weight: 800; /* Extra negrito. */
}

body.pagina-painel .checkout-sucesso h2 {
    margin: var(--espaco-3) 0 var(--espaco-1); /* Espaço ao redor. */
    color: var(--cor-texto-claro); /* Branco. */
}

body.pagina-painel .checkout-sucesso p {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* Cinza. */
}

body.pagina-painel .checkout-aviso p {
    margin: 0 0 var(--espaco-4); /* Espaço até o link. */
    color: var(--admin-texto-apoio); /* Cinza. */
}

/* Minha conta: situação da assinatura paga. */
.assinatura-status {
    margin-bottom: var(--espaco-4); /* Espaço até o botão do portal. */
    padding: var(--espaco-3) var(--espaco-4); /* Espaço interno. */
    border: var(--borda-fina) solid rgb(52 211 153 / 35%); /* Verde: em dia. */
    border-radius: var(--raio-medio); /* Cantos. */
    background: rgb(52 211 153 / 7%); /* Fundo verde sutil. */
}

.assinatura-status--atrasado {
    border-color: rgb(251 191 36 / 45%); /* Âmbar: atenção. */
    background: rgb(251 191 36 / 8%); /* Fundo âmbar sutil. */
}

body.pagina-painel .assinatura-status__titulo {
    margin: 0 0 var(--espaco-1); /* Espaço até o texto. */
    color: var(--usuarios-verde-claro); /* Verde. */
    font-weight: 700; /* Negrito. */
}

body.pagina-painel .assinatura-status--atrasado .assinatura-status__titulo {
    color: var(--usuarios-ambar); /* Âmbar. */
}

body.pagina-painel .assinatura-status__texto {
    margin: 0; /* Sem margens. */
    color: var(--admin-texto-apoio); /* Cinza. */
    font-size: 0.875rem; /* Texto. */
}

body.pagina-painel .admin-painel .conta-botao-plano--portal {
    margin-bottom: var(--espaco-3); /* Espaço até o próximo botão. */
    border-color: var(--admin-realce); /* Contorno dourado... */
    color: #1c1503; /* ...texto escuro... */
    background: var(--admin-realce); /* ...sobre dourado. */
}

body.pagina-painel .admin-painel .conta-botao-plano--portal:hover:not(:disabled) {
    background: #f3d08f; /* Dourado mais claro. */
}

/* "Assinar o Pro" no modal de planos (link com cara de botão principal). */
body.pagina-painel .admin-painel .plano-opcao__escolher--assinar {
    display: flex; /* Centraliza o texto. */
    justify-content: center; /* Centro. */
    border-color: var(--admin-realce); /* Contorno dourado. */
    color: #1c1503; /* Texto escuro... */
    background: var(--admin-realce); /* ...sobre dourado. */
    font-weight: 700; /* Negrito. */
    text-decoration: none; /* Sem sublinhado. */
}

/* Painel financeiro: tabelas em grade 2x2. */
.financeiro-grade {
    display: grid; /* Grade de painéis. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Duas colunas. */
    gap: var(--espaco-5); /* Espaço entre painéis. */
    margin-top: var(--espaco-5); /* Espaço abaixo dos indicadores. */
    align-items: start; /* Cada painel com a própria altura. */
}

body.pagina-painel .financeiro-vazio {
    margin: var(--espaco-3) 0 0; /* Espaço acima. */
    color: var(--admin-texto-apoio); /* Cinza. */
    font-size: 0.875rem; /* Texto. */
}

.pagina-financeiro .tabela-usuarios small {
    color: var(--admin-texto-rotulo); /* E-mails e detalhes em tom discreto. */
}

@media (max-width: 64rem) {
    .checkout,
    .financeiro-grade {
        grid-template-columns: minmax(0, 1fr); /* Uma coluna em telas menores. */
    }
}