/* Estilo simples do Quiz Redes: sem framework, sem JavaScript.
   Pensado primeiro para celular (público do evento entra pelo QR code / Instagram). */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #f4f6f8;
    /* palavras longas sem espaço (ex: "IEEE802.11ac") quebram em vez de vazar da tela */
    overflow-wrap: anywhere;
}

.cabecalho {
    background-color: #0d3b66;
    padding: 16px 24px;
}

.cabecalho .logo {
    color: #ffffff;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
}

.conteudo {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

h1 {
    font-size: 1.6em;
    line-height: 1.3;
    color: #0d3b66;
}

h2 {
    font-size: 1.25em;
    color: #0d3b66;
}

a {
    color: #0d3b66;
}

.erro {
    padding: 10px 12px;
    color: #b3261e;
    font-weight: bold;
    background-color: #fbeaea;
    border-radius: 4px;
}

.placar {
    font-weight: bold;
    color: #333333;
}

/* ---------- Formulários ---------- */

.formulario {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formulario > label:not(.alternativa) {
    font-weight: bold;
}

.formulario input[type="text"] {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 1em; /* >= 16px evita o zoom automático do iPhone ao tocar no campo */
    border: 1px solid #b0b8c1;
    border-radius: 6px;
}

.dica {
    margin: -6px 0 4px;
    font-size: 0.85em;
    color: #555555;
}

.grupo-opcoes {
    margin: 0;
    padding: 0;
    border: none;
}

.grupo-opcoes legend {
    margin-bottom: 8px;
    font-weight: bold;
}

/* Alternativa = cartão inteiro clicável (o <label> envolve o rádio e o texto) */
.alternativa {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background-color: #ffffff;
    border: 2px solid #d8dee4;
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
}

.alternativa input[type="radio"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #0d3b66;
}

/* Destaque da opção escolhida, sem JavaScript */
.alternativa:has(input:checked) {
    border-color: #0d3b66;
    background-color: #e8f0f8;
}

.alternativa input:checked + span {
    font-weight: bold;
}

.consentimento {
    padding: 12px;
    font-size: 0.9em;
    background-color: #ffffff;
    border: 1px solid #d8dee4;
    border-left: 6px solid #0d3b66;
    border-radius: 4px;
}

.consentimento p {
    margin: 0;
}

/* ---------- Botões ---------- */

button,
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 1.05em;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #0d3b66;
    border: 2px solid #0d3b66;
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
}

.botao {
    color: #ffffff !important;
}

button:hover,
.botao:hover {
    background-color: #145088;
}

.botao-secundario {
    color: #0d3b66 !important;
    background-color: #ffffff;
}

.botao-secundario:hover {
    background-color: #e8f0f8;
}

.botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* ---------- Comentário do host ---------- */

.comentario {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 6px;
    border-left: 6px solid #999999;
    background-color: #ffffff;
}

.comentario h1 {
    margin-top: 0;
}

.comentario-acerto {
    border-left-color: #2e7d32;
    background-color: #eaf6ea;
}

.comentario-acerto h1 {
    color: #2e7d32;
}

.comentario-erro {
    border-left-color: #b3261e;
    background-color: #fbeaea;
}

.comentario-erro h1 {
    color: #b3261e;
}

.resposta-certa {
    margin-bottom: 0;
    padding: 10px 12px;
    background-color: #ffffff;
    border-left: 4px solid #2e7d32;
    border-radius: 4px;
}

/* ---------- Resultado ---------- */

.perfil {
    padding: 18px;
    margin: 16px 0;
    text-align: center;
    background-color: #fff4d6;
    border: 2px solid #e0a800;
    border-radius: 6px;
}

.perfil-titulo {
    margin: 0;
    font-size: 1.4em;
    font-weight: bold;
    color: #7a5c00;
}

.perfil-modo {
    margin: 4px 0 0;
    font-size: 1.1em;
    color: #7a5c00;
}

/* ---------- Ranking ---------- */

.tabela-rolagem {
    overflow-x: auto;
}

table.ranking {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

table.ranking th,
table.ranking td {
    padding: 10px;
    border: 1px solid #d8dee4;
    text-align: left;
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Só a coluna do apelido pode quebrar linha (apelidos de até 20 caracteres) */
table.ranking td.col-apelido {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

table.ranking th {
    background-color: #0d3b66;
    color: #ffffff;
}

/* Destaca a partida de quem acabou de jogar */
table.ranking tr.linha-destaque td {
    font-weight: bold;
    background-color: #fff4d6;
}

/* ---------- Celular ---------- */

@media (max-width: 480px) {
    body {
        font-size: 17px;
    }

    .cabecalho {
        padding: 12px 16px;
    }

    .conteudo {
        padding: 16px 14px 32px;
    }

    h1 {
        font-size: 1.3em;
    }

    /* Botões ocupam a largura toda, um embaixo do outro: mais fácil de acertar com o dedo */
    .botoes {
        flex-direction: column;
    }

    .botoes .botao {
        width: 100%;
    }

    /* Tabela cabe em 360px: menos espaço interno e fonte um pouco menor */
    table.ranking {
        font-size: 0.85em;
    }

    table.ranking th,
    table.ranking td {
        padding: 8px 5px;
    }
}