/* Projeto Evolucao - estilos do portal e dos jogos.
   Recortado das linhas 15-1190 do index.html em 2026-09-17. */

/* ============================================================
   PROGRAMA EVOLUÇÃO — Jornada pela Qualidade
   Os nomes dos tokens são os mesmos de antes de propósito: há
   var(--orange-400), var(--gray-500) etc. espalhados no markup e
   dentro de template literals no JS. Trocamos o valor, não o nome.
   ============================================================ */
:root {
    /* Os quatro azuis Autoglass entram exatos. As superficies escuras
       sao derivadas de #00298E em direcao ao preto: a paleta da marca
       nao tem tom abaixo do navy, e uma interface escura precisa deles.

       A REGRA que mantem o contraste em AA:
         · fundo preenchido com texto branco  -> so #00298E e #0649C9
         · texto, icone e traco sobre o escuro -> #037FF7 e #06A3F4
       Branco sobre #037FF7 da 3,9:1 e reprova. Por isso os dois azuis
       claros brilham SOBRE o escuro e nunca viram fundo de botao. */
    --navy-900: #04070F;   /* fundo da pagina */
    --navy-800: #081234;   /* superficie de card / sidebar */
    --navy-700: #0E1C4D;   /* superficie elevada */
    --navy-600: #0649C9;   /* Autoglass — fundo azul com texto branco (7,5:1) */
    --navy-500: #037FF7;   /* Autoglass — traco e brilho sobre o escuro */
    /* Autoglass */
    --blue-400: #00298E;   /* navy profundo — fundo com texto branco (12,3:1) */
    --blue-300: #06A3F4;   /* azul claro — icones e destaques sobre o escuro */
    --blue-200: #BCD4F2;
    --blue-100: #FFFFFF;
    --roxo-600: #0649C9;   /* fundo do item arrastavel (era roxo) */
    /* propulsao — so o botao de acao e os icones de "Antes de comecar" */
    --orange-600: #D8600F;
    --orange-500: #F0761E;
    --orange-400: #F78F3C;
    --orange-300: #F9D49D;
    --yellow-500: #E09400;
    --yellow-400: #F8A101;
    /* neutros */
    --gray-700: #5C7099;
    --gray-500: #8FA3C6;   /* texto silenciado — 7,4:1 sobre o fundo */
    --gray-300: #C6D6EE;
    --white: #FFFFFF;
    --danger: #FF6369;
    --success: #2FBF71;

    --borda: rgba(6,163,244,.16);
    --borda-forte: rgba(6,163,244,.30);
    --sombra: 0 18px 48px -24px rgba(0,0,0,.95);

    --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* O atributo `hidden` esconde SEMPRE. Sem isto, qualquer regra com `display`
   (grid, flex) vence o do navegador e o elemento continua na tela: o "Ocultar
   as respostas" do Foguete trocava o texto e a revisão não sumia. Era
   remendado caso a caso (#foguete, contagem, comemora); agora vale para todos. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--navy-900);
    color: var(--white);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }

/* Números em tabela e cronômetro não podem dançar entre um dígito e outro. */
table td, table th, .stat-value, .timer-display { font-variant-numeric: tabular-nums; }

a { color: inherit; }

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

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   CAMADA DE IMAGEM
   Nenhum texto encosta direto numa foto. Toda imagem de fundo leva
   um véu por cima, e o conteúdo sobe de camada. Era o que faltava
   quando o texto sumia dependendo da imagem.
   ============================================================ */
/* isolation cria um contexto de empilhamento próprio, então o z-index
   negativo abaixo fica preso a esta caixa e não escapa para trás do
   fundo da página. Sem isso o véu some em alguns navegadores. */
.tela { position: relative; isolation: isolate; overflow: hidden; }

.camada-imagem {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none; user-select: none;
    z-index: -1;
}
.camada-imagem img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: .5;
}
.camada-imagem::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(7,11,28,.55) 0%,
        rgba(7,11,28,.82) 60%,
        var(--navy-900) 100%);
}
/* Conteúdo normal não precisa de z-index: com a camada em -1, tudo que
   vem depois no fluxo já pinta por cima. Texto sempre vence imagem. */

/* ============================================================
   DECORAÇÃO
   Planetas presos ao container que os contém, medidos em % e
   clamp(). Nunca px. O pai corta o que passar da borda — era assim
   que eles acabavam em posição sem sentido.
   ============================================================ */
.planeta {
    position: absolute; z-index: -1;
    pointer-events: none; user-select: none;
    width: clamp(90px, 14vw, 260px); height: auto;
    opacity: .6;
    /* Nada no cenário fica completamente parado: um planeta imóvel no canto lê
       como imagem colada, não como corpo em órbita. Mesmas keyframes da tela
       pré-jogo, definidas lá embaixo. */
    will-change: transform;
    animation: derivaA 8.5s ease-in-out infinite;
}
/* Ciclos desencontrados: dois planetas na mesma tela derivando no mesmo
   compasso fariam a página pulsar em bloco e pareceria defeito. */
.planeta--inf-esq  { left: -5%;  bottom: -8%; }
.planeta--sup-dir  { right: -6%; top: -10%; animation: derivaB 7.3s ease-in-out infinite .6s; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent; border-radius: 12px;
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }

/* Um botão desligado precisa parecer desligado. O "Enviar resposta" só
   libera quando todas as linhas têm card. */
.btn:disabled, .btn:disabled:hover {
    background: rgba(143,163,198,.16); color: var(--gray-500);
    border-color: transparent; box-shadow: none;
    cursor: not-allowed; transform: none;
}

.btn-primary {
    background: var(--orange-500); color: #12070A; width: 100%;
    box-shadow: 0 10px 30px -14px rgba(240,118,30,.9);
}
.btn-primary:hover { background: var(--orange-400); box-shadow: 0 14px 34px -14px rgba(240,118,30,1); }

.btn-secondary {
    background: rgba(3,127,247,.14); color: var(--blue-100);
    border-color: rgba(3,127,247,.45);
}
.btn-secondary:hover { background: rgba(3,127,247,.26); border-color: var(--navy-500); }

.btn-ghost {
    background: transparent; color: var(--gray-300);
    border-color: var(--borda); padding: 9px 16px; font-size: 14px;
}
.btn-ghost:hover { color: var(--white); border-color: var(--borda-forte); }

.btn-danger  { background: rgba(229,72,77,.14); color: #FF9AA0; border-color: rgba(229,72,77,.4); }
.btn-danger:hover { background: rgba(229,72,77,.26); }

.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 9px; }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-group { margin-bottom: 18px; }

.form-group label {
    display: block; margin-bottom: 7px;
    font-size: 13.5px; font-weight: 500; color: var(--gray-300);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: 13px 16px;
    border: 1px solid var(--borda-forte); border-radius: 11px;
    background: rgba(7,11,28,.55); color: var(--white);
    font-family: inherit; font-size: 15px;
    transition: border-color .18s ease, background-color .18s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-700); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--blue-300);
    background: rgba(7,11,28,.8);
}
.form-group textarea { min-height: 88px; resize: vertical; }
.form-group select option { background: var(--navy-800); color: var(--white); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   1. LOGIN — split hero
   ============================================================ */
.login-screen {
    display: flex; min-height: 100vh;
    position: relative; overflow: hidden;
}
/* Link de jogo (?game=): a classe vem de um script no <head>, antes da
   primeira pintura — o jogador nunca vê o login do admin. */
.modo-jogo #loginScreen { display: none; }

.login-hero {
    flex: 1 1 52%;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(32px, 6vw, 88px);
    min-height: 320px;
}

.login-hero-texto { position: relative; z-index: 2; max-width: 26ch; }

.login-hero h1 {
    font-size: clamp(38px, 5.4vw, 62px);
    font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
    margin-bottom: 18px;
}
.login-hero h1 em {
    display: block; font-style: normal; color: var(--orange-400);
}
.login-hero p {
    font-size: clamp(16px, 1.5vw, 19px); color: var(--gray-300);
    max-width: 30ch;
}

/* O astronauta fica em pé sobre o solo lunar: as duas imagens andam
   juntas dentro de .login-arte, então a composição não se desmancha
   quando a tela muda de largura. */
.login-arte {
    position: absolute; z-index: -1;
    right: 2%; bottom: 0;
    width: clamp(260px, 44vw, 560px);
    pointer-events: none; user-select: none;
}
.login-solo { width: 100%; height: auto; display: block; }
.login-astronauta {
    position: absolute; left: 50%; bottom: 23%;
    width: 58%; height: auto;
    transform: translateX(-50%);
    /* `boia` e nao `flutua`: esta arte ja usa transform para se centralizar, e
       uma keyframe de transform apagaria o translateX(-50%). */
    will-change: translate;
    animation: boia 7s ease-in-out infinite .5s;
}

.login-painel {
    flex: 0 1 520px;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 5vw, 56px) var(--gutter);
    background: rgba(7,11,28,.72);
    border-left: 1px solid var(--borda);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: relative; z-index: 2;
}

.login-container { width: 100%; max-width: 380px; }

.login-logo {
    display: flex; align-items: center; gap: 14px; margin-bottom: 34px;
}
.login-logo img { width: 38px; height: auto; }
.login-logo h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.03em; }
.login-logo p { font-size: 13px; color: var(--gray-500); margin-top: 2px; }


/* ============================================================
   2. APP SHELL — sidebar + conteúdo
   ============================================================ */
.app-layout { display: none; min-height: 100vh; }

.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 248px;
    background: var(--navy-800);
    border-right: 1px solid var(--borda);
    padding: 26px 0; overflow-y: auto; z-index: 40;
}

.sidebar-header {
    display: flex; align-items: center; gap: 12px;
    padding: 0 22px 26px;
}
.sidebar-header img { width: 26px; height: auto; }
.sidebar-header h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.sidebar-header p { font-size: 11.5px; color: var(--gray-500); margin-top: 1px; }

.nav-menu { list-style: none; padding: 0 12px; }
.nav-item + .nav-item { margin-top: 3px; }

.nav-link {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px; border-radius: 10px;
    color: var(--gray-300); font-size: 14.5px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
.nav-link i { width: 18px; text-align: center; font-size: 15px; }
.nav-link:hover { background: rgba(3,127,247,.10); color: var(--white); }
.nav-link.active { background: var(--navy-600); color: #fff; font-weight: 600; }
.nav-sair { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }

.main-content { margin-left: 248px; padding: clamp(24px, 3.4vw, 44px) var(--gutter); }

.top-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.page-title h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.page-title p { color: var(--gray-500); margin-top: 5px; font-size: 14.5px; }

.user-menu { display: flex; align-items: center; gap: 11px; font-size: 14.5px; }
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--blue-400); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 15px;
}

/* ============================================================
   3. DASHBOARD
   Três superfícies distintas: chip de estatística, painel de dados
   e painel-citação. O tratamento diferencia o que cada coisa é.
   ============================================================ */
.dash-grid {
    display: grid; gap: 20px; margin-bottom: 26px;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    align-items: start;
}

.stats-grid {
    display: grid; gap: 14px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Chip: borda fina, raio pequeno, sem sombra. */
.stat-card {
    background: var(--navy-800);
    border: 1px solid var(--borda); border-radius: 14px;
    padding: 18px 20px;
}
.stat-card i {
    font-size: 17px; color: var(--blue-300);
    margin-bottom: 12px; display: block;
}
.stat-card .stat-value { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.stat-card .stat-label { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

/* Painel de dados: raio maior, sem borda, fundo elevado. */
.painel {
    background: var(--navy-800); border-radius: 20px;
    overflow: hidden;
}
.painel-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 19px 22px; border-bottom: 1px solid var(--borda);
}
.painel-topo h3 { font-size: 16.5px; font-weight: 600; }

/* Painel-citação: sem borda, lua ao fundo, texto grande. */
.painel-citacao {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, #16204A, #0C1230);
    border-radius: 20px; padding: 30px 26px;
    min-height: 230px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.painel-citacao .planeta { opacity: .5; }
.painel-citacao blockquote {
    position: relative; z-index: 1;
    font-size: 19px; font-weight: 600; line-height: 1.34;
    letter-spacing: -0.02em; max-width: 26ch;
}
.painel-citacao hr {
    position: relative; z-index: 1;
    width: 40px; height: 3px; border: 0; border-radius: 2px;
    background: var(--navy-500); margin-top: 18px;
}

.coluna-citacoes { display: flex; flex-direction: column; gap: 20px; }

/* Foto tratada como as outras imagens do site: sem borda reta em lugar
   nenhum. O filtro resolve o problema de a foto ser clara, de céu
   aberto, num painel escuro — dessatura, puxa para o azul da marca e
   abaixa o brilho; a máscara dissolve as bordas, deixando o miolo
   (onde está a pessoa, a ~30-60% do quadro) inteiro. */
.foto-fundo {
    position: absolute; z-index: -1;
    inset: 0 0 0 auto; width: 74%; height: 100%;
    object-fit: cover; object-position: 26% center;
    pointer-events: none; user-select: none;
    filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(.46) contrast(1.08);
    /* Os raios ficam ABAIXO de 100% de propósito: é isso que faz a
       transparência acontecer dentro da caixa, e não depois da borda —
       senão sobra um retângulo de corte seco. */
    -webkit-mask-image: radial-gradient(78% 74% at 58% 44%, #000 18%, transparent 68%);
    mask-image: radial-gradient(78% 74% at 58% 44%, #000 18%, transparent 68%);
}
.painel-citacao--foguete { min-height: 200px; }
/* Quebra em "Foguete não / tem ré." — com mais largura sobra um "ré."
   sozinho na segunda linha. */
.painel-citacao--foguete blockquote { max-width: 9ch; }

/* Lista de jogos recentes */
.lista-jogos { list-style: none; }
.lista-jogos li {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 22px;
}
.lista-jogos li + li { border-top: 1px solid var(--borda); }
.lista-jogos .lj-icone {
    width: 38px; height: 38px; flex: none; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(3,127,247,.16); color: var(--blue-300); font-size: 15px;
}
.lista-jogos .lj-nome { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.lista-jogos .lj-nome span {
    display: block; font-size: 12.5px; color: var(--gray-500); font-weight: 400;
}
.lista-jogos .lj-data { font-size: 12.5px; color: var(--gray-500); white-space: nowrap; }

/* ============================================================
   CARDS DE JOGO
   ============================================================ */
.card-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
    background: var(--navy-800);
    border: 1px solid var(--borda); border-radius: 18px;
    padding: 22px;
    display: flex; flex-direction: column;
    transition: border-color .18s ease;
}
.card:hover { border-color: var(--borda-forte); }

.card-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    font-size: 18px; margin-bottom: 15px;
}
.card-icon.blue   { background: rgba(3,127,247,.16); color: var(--blue-300); }
.card-icon.orange { background: rgba(240,118,30,.15); color: var(--orange-400); }
.card-icon.yellow { background: rgba(248,161,1,.15);  color: var(--yellow-400); }

.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.card p {
    color: var(--gray-500); font-size: 14px; line-height: 1.55;
    flex: 1 1 auto; margin-bottom: 15px;
}
.card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    /* O .card é flex em coluna: sem isto o selo estica na largura
       inteira em vez de abraçar o texto. */
    align-self: flex-start;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.badge-success { background: rgba(47,191,113,.15); color: #6FE0A4; }
.badge-warning { background: rgba(248,161,1,.15);  color: var(--yellow-400); }

/* ============================================================
   TABELAS
   ============================================================ */
.table-container {
    background: var(--navy-800); border-radius: 20px; overflow: hidden;
}
.table-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 19px 22px; border-bottom: 1px solid var(--borda);
}
.table-header h3 { font-size: 16.5px; font-weight: 600; }
.table-header select {
    padding: 9px 14px; border-radius: 10px;
    border: 1px solid var(--borda-forte);
    background: rgba(7,11,28,.55); color: var(--white);
    font-family: inherit; font-size: 14px;
}
.table-header select option { background: var(--navy-800); }

/* Tabela larga rola sozinha em vez de empurrar a página. */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; min-width: 640px; }
thead th {
    text-align: left; padding: 13px 22px;
    font-size: 12.5px; font-weight: 600; color: var(--gray-500);
    background: rgba(7,11,28,.34);
    white-space: nowrap;
}
tbody td { padding: 15px 22px; font-size: 14px; border-top: 1px solid var(--borda); }
tbody tr:hover td { background: rgba(3,127,247,.06); }

.chart-bar {
    width: 68px; height: 5px; border-radius: 3px;
    background: rgba(6,163,244,.16); margin-top: 6px; overflow: hidden;
}
.chart-bar-fill { height: 100%; border-radius: 3px; }
.chart-bar-fill.correct { background: var(--success); }
.chart-bar-fill.wrong   { background: var(--danger); }

/* ============================================================
   PAINEL DE ADMINISTRADORES
   ============================================================ */
.admin-section {
    background: var(--navy-800); border: 1px solid var(--borda);
    border-radius: 18px; padding: 24px; margin-bottom: 20px;
}
.admin-section h3 {
    font-size: 16.5px; font-weight: 600; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.admin-section h3 i { color: var(--blue-300); font-size: 15px; }

.admin-list { list-style: none; }
.admin-list li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 0;
}
.admin-list li + li { border-top: 1px solid var(--borda); }

/* ============================================================
   MODAIS
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(4,6,15,.76);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    padding: var(--gutter);
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--navy-800);
    border: 1px solid var(--borda-forte); border-radius: 20px;
    width: 100%; max-width: 620px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: var(--sombra);
    animation: modalEntra .2s ease-out;
}
@keyframes modalEntra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--borda);
}
.modal-header h2 { font-size: 19px; font-weight: 700; }

.modal-close {
    width: 34px; height: 34px; flex: none;
    border: 0; border-radius: 9px; background: transparent;
    color: var(--gray-500); cursor: pointer; font-size: 15px;
    transition: background-color .16s ease, color .16s ease;
}
.modal-close:hover { background: rgba(3,127,247,.12); color: var(--white); }

.modal-body { padding: 24px; overflow-y: auto; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 18px 24px; border-top: 1px solid var(--borda);
}
.modal-footer .btn-primary { width: auto; }

/* Builder de pares */
.pair-row {
    display: grid; grid-template-columns: 1fr 1fr auto;
    gap: 10px; margin-bottom: 10px; align-items: start;
}
.pair-row input {
    padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--borda-forte);
    background: rgba(7,11,28,.55); color: var(--white);
    font-family: inherit; font-size: 14px; min-width: 0;
}
.pair-row input::placeholder { color: var(--gray-700); }
.pair-row input:focus { outline: none; border-color: var(--blue-300); }
.pair-row button {
    width: 42px; height: 42px; flex: none;
    border: 1px solid rgba(229,72,77,.34); border-radius: 10px;
    background: rgba(229,72,77,.1); color: #FF9AA0;
    cursor: pointer; font-size: 14px;
    transition: background-color .16s ease;
}
.pair-row button:hover { background: rgba(229,72,77,.22); }

.btn-add-pair {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; margin-top: 6px;
    border: 1px dashed var(--borda-forte); border-radius: 11px;
    background: transparent; color: var(--gray-300);
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.btn-add-pair:hover { border-color: var(--blue-300); color: var(--blue-300); }

/* ---- Builder de perguntas (Foguete do Conhecimento) ----
   Reusa os inputs do .pair-row de propósito: é o mesmo formulário para quem
   preenche, e um segundo estilo de campo no mesmo modal só criaria ruído. */
.builder-ajuda {
    margin: 0 0 16px; font-size: 13px; line-height: 1.5;
    color: var(--gray-500); max-width: 62ch;
}
.pergunta-row {
    padding: 16px; margin-bottom: 14px;
    border: 1px solid var(--borda-forte); border-radius: 12px;
    background: rgba(7,11,28,.3);
}
.pergunta-topo {
    display: grid; grid-template-columns: 1fr auto;
    gap: 10px; align-items: start;
}
.pergunta-row input[type="text"] {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--borda-forte);
    background: rgba(7,11,28,.55); color: var(--white);
    font-family: inherit; font-size: 14px; min-width: 0;
}
.pergunta-row input[type="text"]::placeholder { color: var(--gray-700); }
.pergunta-row input[type="text"]:focus { outline: none; border-color: var(--blue-300); }
.pergunta-enunciado { font-weight: 600; }
.pergunta-topo button {
    width: 42px; height: 42px; flex: none;
    border: 1px solid rgba(229,72,77,.34); border-radius: 10px;
    background: rgba(229,72,77,.1); color: #FF9AA0;
    cursor: pointer; font-size: 14px;
    transition: background-color .16s ease;
}
.pergunta-topo button:hover { background: rgba(229,72,77,.22); }

.pergunta-alts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-top: 12px;
}
.pergunta-alt {
    display: grid; grid-template-columns: auto auto 1fr;
    gap: 9px; align-items: center; cursor: pointer;
}
/* 20px e não o tamanho nativo: o círculo é o controle mais importante desta
   linha — é ele que define a resposta certa — e o nativo fica pequeno demais
   para ser lido de relance entre oito campos de texto. */
.pergunta-alt input[type="radio"] {
    width: 20px; height: 20px; flex: none;
    accent-color: var(--success); cursor: pointer;
}
.pergunta-letra {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(6,163,244,.14); color: var(--blue-300);
    font-size: 12.5px; font-weight: 700;
}
/* O campo da alternativa marcada ganha a borda verde: mostra a resposta certa
   sem precisar procurar qual círculo está preenchido. */
.pergunta-alt:has(input[type="radio"]:checked) .pergunta-texto {
    border-color: rgba(40,167,69,.55);
}
.pergunta-dica {
    margin: 10px 0 0; font-size: 12px; color: var(--gray-700);
}
@media (max-width: 720px) {
    .pergunta-alts { grid-template-columns: 1fr; }
}

.link-box { display: flex; gap: 9px; }
.link-box input {
    flex: 1 1 auto; min-width: 0; padding: 12px 15px;
    border: 1px solid var(--borda-forte); border-radius: 11px;
    background: rgba(7,11,28,.55); color: var(--gray-300);
    font-family: inherit; font-size: 13.5px;
}
.link-box button {
    flex: none; padding: 12px 18px;
    border: 0; border-radius: 11px;
    background: var(--navy-600); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.link-box button:hover { box-shadow: 0 0 0 2px rgba(6,163,244,.5); }

/* ============================================================
   TELA PRÉ-JOGO
   Primeira coisa que o participante vê ao abrir o link. O relógio só
   começa quando ele clica em "Começar jogo".
   ============================================================ */
.pre-jogo {
    display: none;
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh;
    padding: clamp(28px, 6vw, 72px) var(--gutter);
    place-content: center;
}
.pre-jogo.ativa { display: grid; }

.pre-card {
    width: min(660px, 100%); margin-inline: auto;
    background: rgba(8,18,52,.74);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--borda-forte); border-radius: 24px;
    padding: clamp(26px, 4vw, 44px);
    text-align: center;
}

.pre-card h1 {
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 800; letter-spacing: -0.03em;
}
.pre-card h2 {
    font-size: clamp(16px, 2vw, 20px); font-weight: 700;
    color: var(--blue-300); margin-top: 5px;
}
/* O título que o admin deu ao jogo, embaixo do tipo. */
.pre-titulo-jogo {
    margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--white);
}
.pre-titulo-jogo:empty { display: none; }
/* "Como jogar?" logo abaixo do subtítulo, colada no "Antes de começar": as
   duas caixas leem como um bloco só de instrução. */
.pre-card .pre-como-jogar { margin: 20px 0 14px; }   /* .pre-card: vence o margin do .pre-regras, que vem depois */

.pre-usuario { max-width: 400px; margin: 0 auto 24px; }
.pre-usuario label {
    display: block; margin-bottom: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--gray-300);
}
.pre-usuario input {
    width: 100%; padding: 14px 18px; text-align: center;
    border: 1px solid rgba(6,163,244,.42); border-radius: 12px;
    background: rgba(6,73,201,.28); color: var(--white);
    font-family: inherit; font-size: 15px;
    transition: border-color .18s ease, background-color .18s ease;
}
.pre-usuario input::placeholder { color: var(--gray-700); }
.pre-usuario input:focus {
    outline: none; border-color: var(--blue-300);
    background: rgba(6,73,201,.42);
}
/* Aviso de quem já jogou. Amarelo, não vermelho: não é erro dele. */
.pre-alerta {
    text-align: left; margin-top: 10px;
    background: rgba(240,200,48,.10);
    border: 1px solid rgba(248,161,1,.34); border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px; line-height: 1.45; color: var(--yellow-400);
}

.pre-regras {
    text-align: left;
    background: rgba(4,7,15,.45);
    border: 1px solid var(--borda); border-radius: 16px;
    padding: 20px 22px; margin-bottom: 26px;
}
.pre-regras h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.pre-regras ul { list-style: none; display: grid; gap: 11px; }
.pre-regras li {
    display: flex; gap: 13px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.5; color: var(--gray-300);
}
.pre-regras li i {
    flex: none; width: 18px; margin-top: 3px;
    text-align: center; color: var(--orange-500);
}
.pre-regras strong { color: var(--white); font-weight: 600; }

.pre-card .btn-primary { width: 100%; }

.pre-assinatura {
    width: min(660px, 100%); margin: 22px auto 0;
    text-align: center; font-size: 14.5px; line-height: 1.5;
    color: var(--blue-200);
}

/* --- os quatro elementos flutuando --------------------------------
   Ciclos desencontrados de propósito (5,2 / 6,0 / 7,3 / 8,5s) e com
   atraso diferente: se batessem juntos a tela pulsaria em bloco e
   pareceria defeito. Só transform — top/left forçariam reflow a cada
   quadro. --- */
.pre-deco {
    position: absolute; z-index: -1; height: auto;
    pointer-events: none; user-select: none;
    will-change: transform;
}
.pre-deco--planeta {
    left: -3%; top: -4%; width: clamp(110px, 16vw, 250px);
    animation: derivaA 8.5s ease-in-out infinite;
}
.pre-deco--foguete {
    right: 4%; top: 3%; width: clamp(66px, 10vw, 140px);
    animation: flutuaFoguete 5.2s ease-in-out infinite .4s;
}
.pre-deco--astronauta {
    left: 3%; bottom: 3%; width: clamp(100px, 14vw, 200px);
    animation: flutua 6s ease-in-out infinite .9s;
}
.pre-deco--lua {
    right: -2%; bottom: -4%; width: clamp(100px, 14vw, 210px);
    animation: derivaB 7.3s ease-in-out infinite .2s;
}

@keyframes flutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes flutuaFoguete {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(-3deg); }
}
@keyframes derivaA {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -8px); }
}
@keyframes derivaB {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6px, -7px); }
}

/* --- as mesmas boias, mas para quem JA usa transform -----------------
   As quatro keyframes acima animam `transform`, e animar `transform` SUBSTITUI
   o transform que o elemento usa para se posicionar: um elemento centrado com
   translateX(-50%) salta para o canto no primeiro quadro.

   Estas usam as propriedades individuais `translate:` e `rotate:`, que COMPOEM
   com o `transform` existente em vez de brigar com ele. Use estas em qualquer
   figura que ja tenha transform proprio. --- */
@keyframes boia {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}
@keyframes boiaGira {
    0%, 100% { translate: 0 0;     rotate: 0deg; }
    50%      { translate: 0 -11px; rotate: -3deg; }
}

/* ============================================================
   4. TELA DO JOGO — a peça de assinatura
   ============================================================ */
/* Campo de estrelas atrás do jogo e da tela de sucesso. Vai na própria
   body com o véu embutido no gradiente: assim nenhum texto encosta na
   foto e não nasce contexto de empilhamento novo para brigar com o
   subgrid das colunas. */
body.com-estrelas {
    background-image:
        linear-gradient(rgba(4,7,15,.74), rgba(4,7,15,.90)),
        url('img/estrelas.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.game-player {
    display: none;
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    padding-block: clamp(20px, 4vw, 44px) clamp(40px, 7vw, 80px);
    position: relative;
}

.jogo-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}

.timer-display {
    display: inline-flex; align-items: baseline; gap: 9px;
    font-size: 22px; font-weight: 700; color: var(--white);
    letter-spacing: -0.02em;
}
.timer-display::before {
    content: 'Tempo restante';
    font-size: 12.5px; font-weight: 500; color: var(--gray-500);
    letter-spacing: 0;
}
/* A cor só muda quando significa alguma coisa: reta final. */
.timer-display.urgente { color: var(--orange-500); }
.timer-display.urgente::before { color: var(--orange-400); }

/* --- Trilha do foguete --------------------------------------
   Anda com o relógio, não com as respostas: o foguete percorre a
   trilha conforme o tempo passa, e cada ponto é um minuto. --- */
.trilha {
    position: relative; height: 54px; margin-bottom: 26px;
    display: flex; align-items: center;
}
.trilha-linha {
    position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
    background: repeating-linear-gradient(90deg,
        rgba(6,163,244,.28) 0 7px, transparent 7px 14px);
}
.trilha-progresso {
    height: 100%; border-radius: 2px; width: 0%;
    background: linear-gradient(90deg, var(--blue-400), var(--navy-500));
    transition: width .45s cubic-bezier(.4,0,.2,1);
}
.trilha-pontos {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; width: 100%;
}
.trilha-ponto {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--navy-900);
    border: 2px solid rgba(6,163,244,.40);
    transition: background-color .3s ease, border-color .3s ease;
}
.trilha-ponto.ativo { background: var(--navy-500); border-color: var(--blue-300); }
.trilha-foguete {
    position: absolute; z-index: 2; top: 50%;
    left: 0; width: 34px; height: auto;
    transform: translate(-50%, -50%);
    transition: left .45s cubic-bezier(.4,0,.2,1);
    /* Mesma razao do login: o transform aqui posiciona. A boia so acrescenta um
       balanco enquanto o foguetinho corre o trilho. */
    animation: boiaGira 3.6s ease-in-out infinite;
    pointer-events: none;
}

.jogo-instrucao {
    background: rgba(3,127,247,.09);
    border: 1px solid rgba(3,127,247,.26);
    border-radius: 12px; padding: 13px 18px;
    font-size: 14.5px; color: var(--blue-100);
    text-align: center;
    margin-bottom: 20px;
}

.game-header { margin-bottom: 22px; }
.game-header h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
.game-header p { color: var(--gray-500); margin-top: 5px; }

/* --- Área de jogo: bandeja, slots e respostas -----------------
   Três colunas na tela, duas caixas no DOM: a bandeja (A) de um
   lado; do outro o tabuleiro, onde cada .linha carrega junto o
   seu slot (B) e a sua resposta (C).

   É por isso que sumiram o subgrid e o --pares: como toda .linha
   usa o mesmo grid-template-columns, a coluna de slots se alinha
   sozinha, e a altura de cada linha é a do conteúdo mais alto
   dela — exatamente o que o subgrid fazia, sem precisar de
   @supports para navegador sem subgrid.

   Só a bandeja tem objeto em forma de card. Era essa a confusão
   do teste com os colegas: as duas colunas antigas usavam a mesma
   classe, e nada na tela dizia qual lado se movia. --- */
/* As duas caixas ficam PARADAS durante a partida inteira:

   · `stretch` iguala a altura das duas, então a bandeja não encolhe
     conforme os cards saem dela;
   · o `min-height` do slot já reserva a altura do card mais alto
     (--alt-card, medida no JS), então nenhuma linha cresce quando
     recebe um card mais alto que a sua resposta.

   O tabuleiro é sempre a caixa mais alta — cada linha vale pelo menos
   um card, e a bandeja é a soma de cards que são todos ≤ esse máximo.
   Quem manda na altura das duas é ele, e ele não muda. */
.game-columns {
    display: grid;
    grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr);
    gap: clamp(16px, 2.4vw, 32px);
    align-items: stretch;
    margin-bottom: 28px;
}

/* Mesmo painel dos dois lados. A coluna do slot é de propósito mais
   larga que o card na bandeja: é isso que faz a altura medida lá valer
   como teto para o card aqui dentro. */
.bandeja, .tabuleiro {
    background: rgba(16,23,54,.6);
    border: 1px solid rgba(3,127,247,.28);
    border-radius: 18px;
    padding: 16px;
}

.jogo-rotulo {
    font-size: 13px; font-weight: 600;
    color: var(--gray-500); margin-bottom: 14px;
}

/* A caixa fica parada; quem gruda é a pilha por dentro. Num jogo longo
   a bandeja não pode sair da tela e deixar o card sem alcance do slot —
   o arrasto não rola a página sozinho. */
.pilha {
    display: flex; flex-direction: column; gap: 10px;
    position: sticky; top: 16px;
}
.pilha:empty::after {
    content: 'Tudo posicionado.';
    display: block; padding: 10px 2px;
    font-size: 13.5px; color: var(--gray-500);
}

.cenario {
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--roxo-600);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 12px 14px;
    /* Um pouco menor que o corpo do site: é o card mais alto que define
       a altura reservada em TODAS as linhas, então cada linha que ele
       economiza vale cinco na tela. */
    font-size: 14px; line-height: 1.4; font-weight: 600;
    color: var(--white);
    cursor: grab;
    /* sem isto, arrastar com o dedo rola a página em vez de mover
       o card */
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    box-shadow: 0 6px 16px -10px rgba(0,0,0,.9);
    transition: transform .16s ease, box-shadow .16s ease;
}
.cenario:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.95); }
.cenario:active { cursor: grabbing; }
.cenario .fa-grip-vertical { flex: none; padding-top: 3px; font-size: 13px; color: var(--blue-200); }
.cenario-txt { min-width: 0; }
.cenario.pegando { opacity: .35; }

/* O clone que segue o dedo ou o cursor. A largura vem do original,
   medida no JS. */
.cenario--fantasma {
    position: fixed; z-index: 300; margin: 0;
    pointer-events: none; cursor: grabbing;
    box-shadow: 0 22px 44px -18px rgba(0,0,0,1);
}

/* Um único momento de movimento na tela do jogo, uma vez só: o
   card do topo aponta para o primeiro slot. Para no primeiro
   toque. */
@keyframes cardConvida {
    0%, 62%, 100% { transform: none; }
    78%           { transform: translateY(-9px); }
}
.cenario.convida { animation: cardConvida 2.1s ease-in-out 2; }

.linha {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) minmax(0, 1fr);
    gap: clamp(12px, 1.6vw, 22px);
    align-items: stretch;
    margin-bottom: 10px;
}
.linha:last-child { margin-bottom: 0; }
.linha--rotulos { align-items: end; margin-bottom: 0; }

/* --alt-card é a altura do card mais alto, medida uma vez pelo JS. Os
   66px são o piso de quando a medida ainda não chegou. */
.slot {
    display: grid; align-items: center;
    min-height: var(--alt-card, 66px); padding: 5px;
    border: 2px dashed rgba(6,163,244,.30);
    border-radius: 12px;
    background: rgba(7,11,28,.35);
    transition: border-color .16s ease, background-color .16s ease;
}
/* O alvo só aparece quando importa: em repouso o poço é discreto,
   e acende em laranja — a cor de ação do app — enquanto há um
   card na mão. */
.slot.armado { border-color: var(--orange-400); background: rgba(240,118,30,.10); }
.slot.alvo   { border-style: solid; border-color: var(--orange-500); background: rgba(240,118,30,.18); }
/* Some a moldura do poço, mas NÃO o min-height: é ele que segura a
   altura da linha quando o card chega. */
.slot.cheio  { border: 0; background: none; padding: 0; }
.slot.cheio .cenario { box-shadow: inset 3px 0 0 var(--blue-300), 0 6px 16px -10px rgba(0,0,0,.9); }
/* Slot ocupado como alvo: a borda dele foi a zero, então o aviso de
   troca vem como anel. */
.slot.cheio.alvo { box-shadow: 0 0 0 2px var(--orange-500); border-radius: 12px; }

/* Escolhido pelo teclado — o equivalente a estar com o card na mão. */
.cenario.escolhido { box-shadow: 0 0 0 2px var(--orange-400), 0 10px 22px -12px rgba(0,0,0,.95); }

.dica-solte {
    font-size: 12.5px; color: var(--gray-500);
    text-align: center; pointer-events: none;
}

.resposta {
    align-self: center;
    font-size: 15px; line-height: 1.55;
    color: var(--gray-300);
    max-width: 46ch;
}

.game-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-actions .btn-primary { width: auto; min-width: 230px; }
.contador { font-size: 13.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* ============================================================
   5. TELA DE SUCESSO
   A única entrada animada da aplicação inteira.
   ============================================================ */
.sucesso {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: clamp(24px, 4vw, 48px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    border-radius: 24px;
    background: linear-gradient(150deg, #16204A, #0A0F28);
    padding: clamp(28px, 5vw, 56px);
    min-height: min(78vh, 620px);
    align-content: center;
    animation: sucessoEntra .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sucessoEntra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Tempo esgotado no Jogo dos Pares. O card, a grade, os chips e a assinatura
   continuam os mesmos — o que muda é o tom, e é de propósito que esta tela NÃO
   vire a do Foguete: lá é painel centrado sobre foto de tela cheia, aqui é card
   de duas colunas com gradiente chapado.
   A terceira regra não é estética, é necessidade: .sucesso-arte img é
   width:100%, e a arte de derrota é retrato 2:3 enquanto a de vitória é
   paisagem — a 100% de largura ela sairia com uns 600px de altura e estouraria
   o card. */
/* Ranking e revisão do Jogo dos Pares: mesmo card, uma coluna só e sem arte.
   Sem arte de propósito — reaproveitar o astronauta numa tela de tabela seria
   usar a mesma imagem em contexto diferente, que é o que se quer evitar. */
.sucesso--tabela { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sucesso--tabela .sucesso-texto { text-align: center; }
.sucesso-acoes {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 22px 0 0;
}
.sucesso-acoes .btn { width: auto; }
.sucesso--tabela .sucesso-acoes { justify-content: center; }

.sucesso--esgotou { background: linear-gradient(150deg, #1A1F3D, #070B1C); }
.sucesso--esgotou .sucesso-chip i { color: var(--gray-500); }
.sucesso--esgotou .sucesso-arte img {
    width: auto; height: min(340px, 44vh); margin: 0 auto;
}

.sucesso-texto { position: relative; z-index: 1; }
.sucesso h1 {
    font-size: clamp(30px, 4.4vw, 46px); font-weight: 800;
    letter-spacing: -0.03em; margin-bottom: 8px;
}
.sucesso > .sucesso-texto > p { color: var(--gray-300); margin-bottom: 26px; }

.sucesso-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.sucesso-chip {
    display: flex; align-items: center; gap: 12px;
    background: rgba(7,11,28,.5);
    border: 1px solid var(--borda); border-radius: 14px;
    padding: 14px 20px;
}
.sucesso-chip i { font-size: 20px; color: var(--success); }
.sucesso-chip .sc-label { font-size: 12.5px; color: var(--gray-500); }
.sucesso-chip .sc-valor {
    font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.sucesso-arte { position: relative; z-index: 1; }
.sucesso-arte img {
    width: 100%; height: auto; display: block;
    animation: flutua 6.4s ease-in-out infinite .3s;
}

.sucesso-assinatura {
    margin-top: 14px; text-align: center;
    font-size: clamp(15px, 1.5vw, 18px); font-weight: 700;
    letter-spacing: -0.01em; color: var(--orange-500);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
    position: fixed; z-index: 200;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px; left: auto;
    display: flex; align-items: center; gap: 12px;
    max-width: min(400px, calc(100vw - 32px));
    padding: 14px 18px;
    background: var(--navy-700);
    border: 1px solid var(--borda-forte); border-radius: 13px;
    box-shadow: var(--sombra);
    font-size: 14.5px;
    transform: translateY(150%); opacity: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.toast.show { transform: none; opacity: 1; }

.toast-icon {
    width: 30px; height: 30px; flex: none; border-radius: 9px;
    display: grid; place-items: center; font-size: 13px;
}
.toast-icon.success { background: rgba(47,191,113,.16); color: #6FE0A4; }
.toast-icon.error   { background: rgba(229,72,77,.16);  color: #FF9AA0; }

/* ============================================================
   ESTADO VAZIO
   Um convite para agir, não um aviso.
   ============================================================ */
.empty-state { text-align: center; padding: 64px 20px; }
.empty-state i { font-size: 42px; color: var(--gray-700); margin-bottom: 18px; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin-bottom: 7px; }
.empty-state p { color: var(--gray-500); font-size: 14.5px; }

/* ============================================================
   TELA DE AVISO (prazo expirado, jogo não encontrado)
   ============================================================ */
.aviso {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: var(--gutter); gap: 6px;
}
.aviso i { font-size: 52px; color: var(--orange-500); margin-bottom: 18px; }
.aviso h1 { font-size: 27px; font-weight: 700; }
.aviso p { color: var(--gray-500); max-width: 42ch; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    /* Em coluna única o box fica largo e baixo, e o recorte cortaria o
       foguete pela metade. Mais altura devolve o enquadramento. */
    .painel-citacao--foguete { min-height: 280px; }
    .sucesso { grid-template-columns: minmax(0, 1fr); }
    .sucesso-arte { max-width: 380px; margin-inline: auto; }
}

@media (max-width: 900px) {
    .login-screen { flex-direction: column; }
    .login-hero { flex: none; min-height: 46vh; padding-bottom: clamp(120px, 26vw, 200px); }
    .login-arte { width: clamp(190px, 44vw, 320px); right: 6%; }
    .login-painel {
        flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--borda);
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: static; width: auto; bottom: auto;
        padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--borda);
    }
    .nav-menu { display: flex; flex-wrap: wrap; gap: 4px; }
    .nav-sair { margin-top: 0; padding-top: 0; border-top: 0; }
    .main-content { margin-left: 0; }
    .form-row { grid-template-columns: 1fr; }
    .pair-row { grid-template-columns: 1fr auto; }
    .pair-row input { grid-column: 1; }
    .pair-row button { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
    /* O jogo é jogado no computador da empresa. Aqui a tela estreita
       só precisa continuar legível e sem rolagem horizontal — não há
       um modo de toque pensado para ela. */
    .game-columns { grid-template-columns: 1fr; }
    .bandeja { margin-bottom: 18px; }
    .pilha { position: static; }
    /* A resposta vem ACIMA do seu slot: empilhado, um slot solto
       não diria a que resposta pertence. */
    .linha { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
    .resposta { order: -1; max-width: none; }
    .linha--rotulos .jogo-rotulo:first-child { display: none; }
    .toast { right: 16px; left: 16px; max-width: none; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   FOGUETE DO CONHECIMENTO — "Rumo ao Planeta Sucesso"

   Paleta e raios são os da seção "Design tokens" do spec, escopados em
   #foguete para não disputarem com as variáveis do portal. A tipografia é a
   exceção deliberada: o spec pedia Bricolage + Space Grotesk por ser um site
   próprio; aqui o jogo mora dentro do portal, então o corpo fica no Inter que
   já está carregado e o Space Grotesk entra só onde faz diferença — os
   mostradores e os nomes dos planetas, que pedem voz de instrumento.

   A tela de voo é a única com hierarquia forte. As telas de parada são um
   painel centrado e quieto: quem está nelas está lendo uma pergunta, não
   admirando a interface.
   ============================================================ */
#foguete {
    --fg-fundo:      #070B1F;
    --fg-painel:     #0C112C;
    --fg-borda:      #2A3566;
    --fg-texto:      #F2F5FF;
    --fg-fraco:      #C3CBE8;
    --fg-legenda:    #9AA5C9;
    --fg-acento:     #FF7A1A;
    --fg-azul:       #4C8DFF;
    --fg-certo:      #3DD68C;
    --fg-errado:     #FF5470;
    --fg-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    /* Os títulos ganham voz própria, como nas maquetes: o Bricolage tem o peso
       de cartaz que o Space Grotesk, que é fonte de mostrador, não tem. */
    --fg-titulo:  "Bricolage Grotesque", Georgia, serif;

    position: fixed; inset: 0; z-index: 40;
    background: var(--fg-fundo);
    color: var(--fg-texto);
    overflow: auto;
}

.fg-tela { display: none; }
.fg-tela.ativa { display: flex; }

/* Os números não podem dançar: o relógio corre a tela inteira do jogo e um
   dígito de largura variável faz o bloco inteiro tremer a cada segundo. */
#foguete .fg-relogio,
#foguete .fg-contagem,
#foguete .fg-valor,
#foguete .fg-tabela td {
    font-family: var(--fg-display);
    font-variant-numeric: tabular-nums;
}

/* Rótulo de instrumento. Caixa alta aqui é vernáculo de painel de bordo, não
   enfeite — e é onde o spec e as maquetes a usam. Não vai em outro lugar. */
.fg-rotulo {
    margin: 0; font-size: 11px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--fg-legenda);
}

/* ---------- VOO ---------- */
.fg-voo {
    flex-direction: column; min-height: 100%;
    padding: clamp(10px, 1.6vh, 18px) var(--gutter);
    gap: clamp(8px, 1.4vh, 12px);
}
.fg-hud {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 20px; align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fg-borda);
}
/* Cada bloco lê na horizontal em vez de empilhar rótulo, valor e sub. Empilhado
   o HUD comia ~104px, e altura aqui é área de jogo: o canvas fica com o que
   sobra. Agora fica em ~60px. */
.fg-hud-bloco {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fg-hud-bloco--centro { justify-content: center; }
.fg-hud-bloco--fim    { justify-content: flex-end; }
.fg-hud-bloco .fg-rotulo { margin: 0; }

.fg-destino {
    margin: 0; font-family: var(--fg-titulo);
    font-size: clamp(18px, 2.1vw, 23px); font-weight: 800; letter-spacing: -.01em;
}
.fg-sub { margin: 0; font-size: 13px; color: var(--fg-fraco); }
.fg-contagem { margin: 0; font-size: 20px; font-weight: 700; }
.fg-relogio  { margin: 0; font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; }

/* Quatro marcas: um foguete de cliente consertado cada. Preenchem da esquerda
   para a direita conforme o jogador acerta. */
.fg-consertados { display: flex; gap: 6px; justify-content: center; align-self: center; }
.fg-marca {
    width: 26px; height: 5px; border-radius: 3px;
    background: var(--fg-borda);
    transition: background-color .25s ease;
}
.fg-marca.ok { background: var(--fg-certo); }

/* `align-items: start` e não `center`: com `center` o `align-self: stretch` da
   trilha não tem o que esticar e o painel encolhia para a altura do texto. Quem
   centraliza o canvas na coluna é a própria .fg-arena. */
.fg-palco {
    flex: 1; display: grid; grid-template-columns: 1fr auto;
    gap: clamp(16px, 3vw, 40px); align-items: stretch;
    justify-content: center; min-height: 0;
}
.fg-arena { align-self: center; }
/* O canvas tem 1040x650 lógicos e o CSS escala: a física não muda com o
   tamanho da janela do vendedor, mas a área de jogo ocupa a tela que existe.
   Sem isto ele ficava parado no meio de um monitor de 1440.

   A proporção passou de 1.46 para 1.60 (a das maquetes): o campo ficou
   genuinamente mais largo, não só maior — há mais espaço lateral para desviar.
   Os números de velocidade e abertura no CONFIG foram escalados junto. */
/* O canvas ocupa exatamente a altura que sobra, sem número mágico.
   `min(88vh, …)` parecia certo e cortava o rodapé: vh é a janela inteira, e o
   HUD, o rodapé, os paddings e os gaps também moram nela. Aqui a .fg-palco já
   é `flex: 1` dentro da .fg-voo, então ela recebe a sobra; o canvas só precisa
   preenchê-la e deixar a proporção decidir a largura. Assim ele acompanha
   qualquer janela sem ninguém recalcular o orçamento à mão. */
.fg-arena {
    position: relative; align-self: stretch; min-height: 0;
    display: grid; place-items: center;
    /* A contagem regressiva é absoluta em inset:0 e entra com scale(1.5).
       Elemento transformado conta para a área rolável do ancestral, e #foguete
       é overflow:auto — então cada número fazia aparecer barra de rolagem, a
       barra comia largura e altura, e o canvas (height:100% com aspect-ratio)
       mudava de tamanho três vezes seguidas antes de cada trecho.

       `clip` e não `hidden`: hidden criaria outro contêiner rolável aqui. Os
       8px de margem existem para não engolir o box-shadow de 7px do pulso de
       colisão (#fgCanvas.fg-bateu), que é o único desenho que legitimamente
       passa da borda do canvas. */
    overflow: clip;
    overflow-clip-margin: 8px;
}
#fgCanvas {
    display: block;
    width: auto; height: 100%;
    max-height: 100%; max-width: 100%;
    aspect-ratio: 1040 / 650;
    border: 1px solid var(--fg-borda); border-radius: 16px;
    background: var(--fg-fundo);
}

/* Contagem de 3s antes de cada trecho. Fica sobre o canvas, centrada, e o voo
   só arranca quando ela some — inclusive depois de uma colisão, que era onde o
   recomeço pegava o jogador de surpresa. */
.fg-contagem-regressiva {
    position: absolute; inset: 0; margin: 0;
    display: grid; place-items: center;
    /* Véu escuro por baixo do número: sem ele o dígito some dentro do campo de
       estrelas, e é ele que diz que o jogo ainda não começou. */
    border-radius: 16px;
    background: radial-gradient(closest-side, rgba(7,11,31,.72), rgba(7,11,31,.1));
    font-family: var(--fg-titulo); font-weight: 800;
    font-size: clamp(64px, 12vh, 132px); line-height: 1;
    color: var(--fg-texto);
    text-shadow: 0 0 34px rgba(7,11,31,.95), 0 6px 0 rgba(7,11,31,.5);
    pointer-events: none;
    animation: fg-conta .95s ease-out;
}
@keyframes fg-conta {
    0%   { transform: scale(1.5); opacity: 0; }
    22%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1);   opacity: .85; }
}
/* Colisão: um pulso vermelho e nada mais. É resposta a uma ação do jogador,
   que é o único tipo de movimento que esta tela tem. */
#fgCanvas.fg-bateu {
    animation: fg-bateu .5s ease;
    border-color: var(--fg-errado);
}
@keyframes fg-bateu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,84,112,0); }
    30%      { box-shadow: 0 0 0 7px rgba(255,84,112,.42); }
}

/* A trilha lê de baixo para cima porque é isso que o foguete faz. Inverter a
   leitura é a única liberdade que esta tela toma, e ela carrega informação:
   onde você está numa jornada de cinco paradas. */
/* Painel fechado, não lista solta: fundo, borda e cantos como os outros painéis
   do #foguete. As cinco paradas se distribuem na altura do canvas com
   space-between, em vez de se amontoarem no meio. */
.fg-trilha {
    list-style: none; margin: 0;
    /* 240 e não 200: "Planeta Desenvolvimento" e "Planeta Reconhecimento" não
       cabiam nos 200 e vazavam para fora do painel. Sai da largura do canvas,
       que é a faixa 1fr do .fg-palco e tem sobra. */
    width: 240px; align-self: stretch;
    padding: 20px 18px;
    border: 1px solid var(--fg-borda); border-radius: 20px;
    background: rgba(10,15,38,.86);
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    font-size: 14px; color: var(--fg-legenda);
}
/* Duas armadilhas de grid juntas faziam o nome da parada atual vazar do painel:
   1. `1fr` é `minmax(auto, 1fr)`, e o mínimo automático é a palavra mais longa.
      A faixa CRESCIA em vez de encolher, e a linha estourava a largura.
      `minmax(0, 1fr)` é o que a deixa encolher de verdade.
   2. a coluna do ícone era `auto`, e o planeta da parada atual pula de 40 para
      64px. Os 24px saíam justamente do texto — por isso só a parada atual
      estourava. Reservados desde sempre, o texto para de mudar de largura.
   O break-word é a garantia: se a fonte vier maior ou o Space Grotesk não
   carregar, a palavra quebra em vez de vazar. Só age quando não há alternativa. */
.fg-parada-trilha {
    display: grid; grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px; align-items: center;
    font-family: var(--fg-display); letter-spacing: .02em;
    overflow-wrap: break-word;
}
/* Cada parada com a sua arte. Eram cinco pontos iguais: o nome mudava e o
   desenho não, e a jornada não tinha lugar nenhum — só rótulos. */
.fg-planeta-trilha {
    width: 40px; height: auto;
    /* Centrado nos 64px reservados: sem isto os planetas de 40px encostariam na
       esquerda da coluna e só o da parada atual ficaria alinhado. */
    justify-self: center;
    filter: grayscale(.7); opacity: .5;
    transition: width .3s ease, filter .3s ease, opacity .3s ease;
}
.fg-parada-trilha.concluida { color: var(--fg-fraco); }
.fg-parada-trilha.concluida .fg-planeta-trilha { filter: none; opacity: .8; }
.fg-parada-trilha.atual { color: var(--fg-texto); font-weight: 700; }
.fg-parada-trilha.atual .fg-planeta-trilha {
    width: 64px; filter: none; opacity: 1;
    /* O destino atual é o único que se mexe: o olho vai para ele sem precisar
       de seta nem de cor extra. */
    animation: flutua 6s ease-in-out infinite;
}

/* Uma linha só. As duas já ficavam lado a lado; o que fazia quebrar era o
   flex-wrap somado à altura dos <kbd>. Cada linha aqui custa área de jogo. */
.fg-rodape {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: nowrap;
    padding-top: 8px; border-top: 1px solid var(--fg-borda);
    font-size: 13px; color: var(--fg-fraco);
}
.fg-rodape > * { min-width: 0; }
.fg-aviso  { margin: 0 0 0 auto; color: var(--fg-legenda); }
#foguete kbd {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 24px; padding: 0 7px;
    border: 1px solid var(--fg-borda); border-bottom-width: 3px;
    border-radius: 7px; background: var(--fg-painel);
    font-family: var(--fg-display); font-size: 13px; color: var(--fg-texto);
}

/* ---------- TELAS DE PARADA (conserto, pergunta, feedback, fim) ---------- */
.fg-parada {
    position: relative; overflow: hidden;
    align-items: center; justify-content: center;
    min-height: 100%; padding: clamp(20px, 5vh, 56px) var(--gutter);
}

/* Cenário de tela cheia atrás do painel, com véu por cima para o texto não
   depender da arte. Era a oficina com a URL cravada na regra, e por isso não
   dava para reusar; agora quem diz QUAL arte e QUANTO véu é cada tela, em duas
   variáveis. O véu fica fraco nas telas de fim porque o .fg-painel já é
   rgba(12,17,44,.90) com backdrop-filter: a legibilidade não vem do véu, ele só
   separa o painel do cenário. */
.fg-parada--cena::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--fg-cena) center / cover no-repeat;
}
.fg-parada--cena::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(7,11,31, var(--fg-veu, .62));
}
.fg-parada--cena > * { position: relative; z-index: 2; }

#fgConserto, #fgPergunta, #fgFeedback { --fg-cena: url(../img/oficina.webp); }

/* O Ranking usa SEMPRE o espaço escuro, ganhando ou perdendo: o pátio de pouso
   tem "MISSÃO CONCLUÍDA" escrito numa placa, e isso seria mentira atrás do
   ranking de quem estourou o tempo. E tabela pede fundo calmo. */
#fgResultado         { --fg-cena: url(../img/planeta-sucesso.webp); --fg-veu: .52; }
#fgResultado.esgotou { --fg-cena: url(../img/espaco-pos-jogo.webp); --fg-veu: .28; }
#fgRanking           { --fg-cena: url(../img/espaco-pos-jogo.webp); --fg-veu: .28; }
#fgPronto            { --fg-cena: url(../img/espaco-pos-jogo.webp); --fg-veu: .28; }

/* Cor de destaque da FASE: laranja no treino, azul na partida que vale. Faixas
   de instrução e selos usam esta cor, então quem olha a tela sabe em que fase
   está sem ler o texto. O -rgb existe porque rgba() não aceita hex. */
#foguete        { --fg-fase: var(--fg-azul);   --fg-fase-rgb: 76,141,255; }
#foguete.treino { --fg-fase: var(--fg-acento); --fg-fase-rgb: 255,122,26; }

/* A instrução de cada tela (setas no voo, Espaço no conserto), em cima e na
   cor da fase. Era rodapé cinza e ninguém lia. */
.fg-dica {
    display: block; margin: 0 auto 14px; max-width: 54ch;
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid rgba(var(--fg-fase-rgb), .45); background: rgba(var(--fg-fase-rgb), .12);
    font-size: 15px; line-height: 1.5; color: var(--fg-texto); text-align: center;
}

/* Voo de treino: .fg-so-treino só existe com #foguete.treino (comecarFoguete
   liga, fimDoTreino desliga). */
.fg-so-treino { display: none; }
#foguete.treino .fg-so-treino { display: block; }
#foguete.treino span.fg-so-treino { display: inline-block; }
/* Selo na cor da fase: a parada ("Planeta Identificação · parada 1 de 4") em
   toda tela de conserto e pergunta, o "Voo de treino" / "Missão valendo" do
   "Podemos começar?" e o "Treino" das faixas. */
.fg-selo-treino,
#fgConsertoParada, #fgPerguntaParada, #fgProntoRotulo {
    padding: 3px 12px; border-radius: 999px;
    border: 1px solid rgba(var(--fg-fase-rgb), .55); background: rgba(var(--fg-fase-rgb), .16);
    color: var(--fg-fase); font-weight: 700;
}
#fgConsertoParada, #fgPerguntaParada, #fgProntoRotulo {
    display: inline-block; font-size: 13px;
}
.fg-selo-treino {
    margin-right: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
#foguete.treino #fgDestino { color: var(--fg-acento); }
/* A trilha acenderia o Planeta Identificação, que não é a fase de treino.
   visibility, e não display, para o canvas não mudar de tamanho entre o
   treino e a partida. O relógio fica à vista, parado em 00:00. */
#foguete.treino .fg-trilha { visibility: hidden; }

/* "Uma tentativa por pergunta" colava no botão de confirmar; e no treino o
   selo da parada encostava na dica logo abaixo. */
#fgPergunta .fg-texto--fraco { margin-top: 16px; }
#fgPergunta .fg-dica { margin-top: 12px; }

/* Decoração flutuando nas telas de parada — mesmas keyframes da pré-jogo, com
   atrasos diferentes para nada bater no mesmo compasso. */
.fg-deco {
    position: absolute; z-index: 1; height: auto;
    pointer-events: none; user-select: none; opacity: .5;
    will-change: transform;
}
.fg-deco--planeta {
    left: 2%; bottom: 4%; width: clamp(90px, 13vw, 190px);
    animation: derivaB 7.3s ease-in-out infinite .2s;
}
.fg-deco--foguete {
    right: 4%; top: 6%; width: clamp(56px, 8vw, 110px);
    animation: flutuaFoguete 5.2s ease-in-out infinite .9s;
}

.fg-painel {
    position: relative;
    width: min(620px, 100%);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--fg-borda); border-radius: 18px;
    background: rgba(12,17,44,.90);
    backdrop-filter: blur(2px);
    text-align: center;
}
.fg-painel--largo { width: min(760px, 100%); }
.fg-painel h2 {
    margin: 10px 0 8px; font-family: var(--fg-titulo);
    font-size: clamp(23px, 3.3vw, 33px); font-weight: 800; line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--fg-texto);
}
.fg-texto {
    margin: 0 auto 18px; max-width: 54ch;
    font-size: 15px; line-height: 1.6; color: var(--fg-fraco);
}
.fg-texto--fraco { font-size: 13px; color: var(--fg-legenda); }
/* Em fluxo, não flutuando. Era `position:absolute; top:18px; right:20px` dentro
   de um .fg-painel que é text-align:center com padding clamp(24px, 4vw, 40px):
   o primeiro elemento do painel ocupa a largura toda e passava POR BAIXO do
   relógio — "Planeta Desenvolvimento · parada 2 de 4" era a colisão mais
   visível, e quanto mais estreita a janela, menor o padding e pior o encontro.
   Com linha própria o encavalamento deixa de ser possível em qualquer largura,
   em vez de ser empurrado para outro ponto de quebra.
   O <p> é o primeiro filho do painel nas três telas; no #fgFeedback, que é grid
   de duas colunas, a regra de grid-column: 1/-1 logo acima já o pega. */
.fg-relogio--canto {
    width: 100%; margin: 0 0 4px;
    text-align: right; font-size: 15px; color: var(--fg-legenda);
}

.fg-nave { position: relative; display: inline-block; margin-bottom: 8px; }
/* :not(.fg-ferramenta) é obrigatório, não zelo: a chave também é um img dentro
   do .fg-nave, e `.fg-nave img` tem especificidade maior que `.fg-ferramenta` —
   sem o :not, a chave boiava em vez de martelar. */
.fg-nave img:not(.fg-ferramenta) {
    height: clamp(130px, 22vh, 190px); width: auto;
    /* `boia` de novo: no feedback errado esta img leva rotate(24deg), e uma
       keyframe de transform endireitaria a nave no primeiro quadro. */
    animation: boia 5.6s ease-in-out infinite .8s;
}
/* A chave inglesa sobre o casco da nave. transform-origin no CABO (canto de
   baixo): girando pelo cabo ela lê como ferramenta empunhada, girando pelo
   centro lê como hélice.

   A arte é desenho chapado com contorno preto e o resto da cena é 3D lustroso;
   a sombra e o leve escurecimento abaixo são o que fazem ela assentar. Se ainda
   destoar, o caminho é gerar uma chave no estilo das outras artes. */
.fg-ferramenta {
    position: absolute; right: -26%; bottom: 8%;
    width: 68%; height: auto;
    transform-origin: 22% 82%;
    /* Clarear, não escurecer: a arte é cinza-médio sobre um painel escuro, e
       escurecida ela sumia dentro da silhueta da nave. */
    filter: drop-shadow(0 5px 10px rgba(3,5,16,.8)) brightness(1.22) contrast(1.05);
    pointer-events: none; user-select: none;
}
/* Martela em laço ENQUANTO alguém tecla (aoToqueConserto liga .martelando e
   desliga ~0,4s depois do último toque). Uma martelada solta de 0,22s por
   toque passava despercebida; antes do e.repeat, segurar a tecla é que fazia
   a chave tremer sem parar. */
.fg-ferramenta.martelando { animation: fg-martelada .22s ease-out infinite; }
@keyframes fg-martelada {
    0%   { rotate: 0deg; }
    35%  { rotate: -24deg; }
    70%  { rotate: 11deg; }
    100% { rotate: 0deg; }
}

.fg-selo {
    position: absolute; top: 12px; left: 50%; translate: -50% 0;
    padding: 4px 11px; border-radius: 6px;
    background: var(--fg-errado); color: #2A0410;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
}

/* Barra de conserto: não pontua e não tem tempo. O único retorno que ela dá é
   encher, então ela precisa encher de forma convincente. */
.fg-barra {
    height: 20px; margin: 10px 0 8px;
    border: 1px solid var(--fg-borda); border-radius: 999px;
    background: rgba(7,11,31,.75); overflow: hidden;
}
/* Astronauta comemorando: dois quadros trocando a cada segundo.
   Os dois saem da MESMA caixa de recorte (ver otimizar_imagens.py), então são
   250x333 os dois e a figura cai no mesmo lugar — daí empilharem em inset:0 sem
   nenhuma compensação de margem.

   190px e não mais: a figura ocupa só 250px do quadro de origem, e ampliar além
   disso embaça. Para um astronauta maior, o caminho é gerar o par de novo com a
   figura ocupando mais do quadro, não esticar estes. */
.fg-comemora {
    position: relative; margin: 0;
    width: 190px; aspect-ratio: 250 / 333;
}
/* Astronauta e nave lado a lado, como na maquete. Empilhados, o painel virava
   uma coluna alta com um boneco flutuando sobre um foguete — e a leitura era
   duas cenas, não uma. */
/* Duas metades iguais do painel, e não duas colunas do tamanho do conteúdo
   centradas: assim, as linhas que atravessam a grade (relógio, título, botão)
   têm a largura do painel inteiro, e o relógio cai no mesmo canto do conserto
   e da pergunta. Com colunas `auto`, ele parava a ~115px da borda. A linha da
   arte é 1fr: ela absorve a altura extra (ver --fg-altura-parada), e a arte
   fica CENTRADA nela, entre o relógio e o título. Alinhada por baixo, ela
   ficava espremida contra o título com um vão vazio em cima. */
#fgFeedback .fg-painel {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: clamp(8px, 2vw, 26px);
}
#fgFeedback .fg-comemora { justify-self: end; }
#fgFeedback .fg-nave { justify-self: start; }
#fgFeedback .fg-painel > :not(.fg-comemora):not(.fg-nave) { grid-column: 1 / -1; }
#fgFeedback.errou .fg-nave { grid-column: 1 / -1; justify-self: center; }

/* Conserto, pergunta e feedback com a mesma caixa: atracar() mede o painel do
   conserto (o mais alto) e grava a altura aqui. O painel não muda de tamanho
   entre as três telas da mesma parada, em qualquer tamanho de janela. */
#fgPergunta .fg-painel, #fgFeedback .fg-painel { min-height: var(--fg-altura-parada, auto); }
.fg-comemora img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* steps(1) e não um fade: a troca tem que ser seca. Em cross-fade os dois pares
   de braços aparecem juntos e o astronauta vira fantasma. O -1s no segundo
   quadro é o que dá exatamente um segundo para cada pose. */
.fg-comemora .bracos-cima  { animation: fg-bracos 2s steps(1) infinite; }
.fg-comemora .bracos-baixo { animation: fg-bracos 2s steps(1) infinite -1s; }
@keyframes fg-bracos {
    0%, 49.9%  { opacity: 1; }
    50%, 100%  { opacity: 0; }
}
/* A nave do feedback ao lado do astronauta de 190x253: nos 190px de altura da
   regra geral ela ficava 63px mais baixa, e a arte é inclinada ~24°, então ela
   ainda gasta altura de quadro na diagonal e parecia menor ainda.
   260 cabe na resolução — foguete.webp é 220x330 nativos, com a figura ocupando
   198x310 deles —, ao contrário do astronauta, que já está no teto dos 190px
   (ver o comentário do .fg-comemora acima).
   Escopado ao Feedback: a tela de Conserto é outra composição, com a chave e a
   nave quebrada, e não pede esta escala. */
#fgFeedback .fg-nave img {
    height: clamp(170px, 30vh, 260px);
}

/* No erro não há comemoração: fica a nave quebrada, apagada e tombada. */
#fgFeedback.errou .fg-nave img {
    transform: rotate(24deg);
    filter: grayscale(.55) brightness(.78);
}

.fg-barra-fill {
    width: 0; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--fg-acento), #FFB266);
    transition: width .11s ease-out;
}

/* ---------- PERGUNTA ---------- */
.fg-alternativas {
    display: grid; gap: 10px; margin: 22px 0;
    text-align: left;
}
.fg-alt {
    display: grid; grid-template-columns: auto 1fr;
    gap: 13px; align-items: center;
    min-height: 56px; padding: 13px 16px;
    border: 1px solid var(--fg-borda); border-radius: 13px;
    background: rgba(7,11,31,.55); color: var(--fg-texto);
    font-family: inherit; font-size: 15px; line-height: 1.45;
    text-align: left; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.fg-alt:hover { border-color: var(--fg-azul); }
.fg-alt-letra {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(76,141,255,.16); color: var(--fg-azul);
    font-family: var(--fg-display); font-size: 13px; font-weight: 700;
}
.fg-alt.marcada {
    border-color: var(--fg-acento); background: rgba(255,122,26,.1);
}
.fg-alt.marcada .fg-alt-letra { background: var(--fg-acento); color: #23120A; }

#foguete .btn { min-height: 48px; }
#fgConfirmar:disabled { opacity: .45; cursor: not-allowed; }


/* ---------- RESULTADO ---------- */
/* Dimensionado por ALTURA, e não por largura: as duas artes de fim são retrato
   2:3, e o `width: min(340px, 78%)` de antes — que servia à arte antiga, que era
   paisagem — daria 510px de altura dentro de um painel que não tem isso.
   O modificador --parado sumiu junto: ele existia porque as duas artes tinham
   proporções diferentes. Agora têm a mesma, e um caso só basta. */
.fg-astronauta {
    width: auto; height: min(260px, 34vh);
    animation: flutua 6.8s ease-in-out infinite .2s;
}
.fg-ladrilhos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; margin: 20px 0 16px;
}
.fg-ladrilho {
    padding: 16px; border: 1px solid var(--fg-borda); border-radius: 14px;
    background: rgba(7,11,31,.5);
}
.fg-valor { margin: 5px 0 0; font-family: var(--fg-titulo); font-size: 30px; font-weight: 800; }
/* O encerramento era uma linha de 13px na cor de legenda, último elemento,
   atrás de uma caixa de revisão que a empurrava para fora da dobra — ninguém
   lia, e a pergunta "posso fechar?" ficava sem resposta. Vira bloco, na mesma
   linguagem de borda e canto do .fg-ladrilho que a tela já usa. */
.fg-registrado {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 22px; padding: 14px 18px;
    border: 1px solid var(--fg-certo); border-radius: 14px;
    background: rgba(61,214,140,.10);
    color: var(--fg-texto); font-size: 14px;
}
.fg-registrado i { color: var(--fg-certo); }

.fg-link {
    display: block; margin: 12px auto 0; padding: 10px;
    border: 0; background: none; color: var(--fg-azul);
    font-family: inherit; font-size: 14px; text-decoration: underline;
    cursor: pointer;
}
.fg-revisao { margin-top: 18px; display: grid; gap: 10px; text-align: left; }
.fg-revisao-item {
    padding: 13px 16px; border-radius: 12px;
    border-left: 3px solid var(--fg-borda);
    background: rgba(7,11,31,.5); font-size: 14px; line-height: 1.5;
}
.fg-revisao-item.ok   { border-left-color: var(--fg-certo); }
.fg-revisao-item.erro { border-left-color: var(--fg-errado); }
.fg-revisao-item p { margin: 0 0 4px; color: var(--fg-fraco); }
.fg-revisao-enunciado { color: var(--fg-texto); font-weight: 600; }
.fg-revisao-correta { color: var(--fg-certo); }

/* ---------- RANKING ---------- */
.fg-filtro { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.fg-filtro-btn {
    min-height: 44px; padding: 0 18px;
    border: 1px solid var(--fg-borda); border-radius: 11px;
    background: transparent; color: var(--fg-fraco);
    font-family: inherit; font-size: 14px; cursor: pointer;
}
.fg-filtro-btn.ativo {
    border-color: var(--fg-acento); background: rgba(255,122,26,.12);
    color: var(--fg-texto); font-weight: 600;
}
.fg-tabela-scroll { overflow-x: auto; }
.fg-tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fg-tabela th {
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid var(--fg-borda);
    font-size: 11px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--fg-legenda);
}
.fg-tabela td {
    padding: 11px 12px; border-bottom: 1px solid rgba(42,53,102,.45);
    color: var(--fg-fraco);
}
.fg-tabela tr.fg-eu td {
    background: rgba(255,122,26,.11); color: var(--fg-texto); font-weight: 600;
}

/* ---------- acessibilidade e telas estreitas ---------- */
#foguete :focus-visible {
    outline: 2px solid var(--fg-acento); outline-offset: 2px; border-radius: 8px;
}
@media (max-width: 880px) {
    .fg-palco { grid-template-columns: 1fr; }
    /* O painel da trilha deita: largura fixa de 200px e `stretch` só fazem
       sentido ao lado do canvas. Em coluna única, sem `width: auto` aqui, o
       painel forçaria 200px e a tela ganharia rolagem horizontal. */
    .fg-trilha {
        width: auto; align-self: auto; padding: 14px 16px;
        flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 16px;
    }
    .fg-hud { grid-template-columns: 1fr; gap: 10px; }
    .fg-hud-bloco--centro, .fg-hud-bloco--fim { justify-content: flex-start; }
    .fg-consertados { justify-content: flex-start; }
    .fg-rodape { flex-wrap: wrap; }
    .fg-ladrilhos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    #fgCanvas.fg-bateu { animation: none; }
    /* Enfeite que se mexe sai. A contagem regressiva NAO sai: ela e regra de
       jogo, nao decoracao — so perde a pulsacao de entrada. E o astronauta
       congela com os bracos erguidos, que e a pose que diz "consertado". */
    .planeta, .pre-deco, .fg-deco,
    .fg-parada-trilha.atual .fg-planeta-trilha,
    .login-astronauta, .trilha-foguete, .sucesso-arte img,
    .fg-astronauta, .fg-nave img, .fg-ferramenta.martelando { animation: none; }
    .fg-contagem-regressiva { animation: none; }
    .fg-comemora .bracos-cima  { animation: none; opacity: 1; }
    .fg-comemora .bracos-baixo { animation: none; opacity: 0; }
}