/* Altura da faixa fixa da lupa (usada para reservar o espaço embaixo da estória) */
:root {
    --altura-faixa-lupa: 90px;
    /* A margem para a barrinha de baixo dos iPhones, mas com um teto: alguns navegadores
       Android (Firefox, 10/10/2026) diziam uma margem enorme e a gaveta da lupa ficava
       com um vazio embaixo */
    --margem-segura-baixo: min(env(safe-area-inset-bottom, 0px), 20px);
    --altura-gaveta-menu: 90px;
    --altura-gaveta-mercado: 130px;
    --altura-gaveta-pos-compra: 105px;
}

* {
    box-sizing: border-box;
}

/* Os botões não herdam a fonte sozinhos: forçamos a mesma do resto do app */
button {
    font-family: inherit;
    font-size-adjust: inherit;
}

/* =========================================================
   TELA MENU INICIAL
   ========================================================= */

#tela-menu-inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;

    flex: 1;
    width: 100%;
}

.titulo-menu {
    margin: 0;

    /* O robô grande em cima, o nome embaixo, tudo centralizado */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 248, 220, 0.4);
}

/* Largura fixa (e nunca mais larga que a tela): com "100%" alguns celulares
   calculavam a largura a partir do robô e o nome ficava minúsculo */
.titulo-menu-nome {
    width: 340px;
    max-width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* Toques rápidos nas cartinhas (sequência dev) sem o zoom do toque duplo */
    touch-action: manipulation;
}

.titulo-menu-robo {
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 0 12px rgba(255, 248, 220, 0.35));
}

.menu-botoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.botao-menu {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 78px;

    /* O ícone em cima, o texto embaixo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border: 2px solid #444;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-menu-quiz-preenchimento {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;

    background-color: #6fa3c9;
    transition: width 1s ease;
}

/* Ícone e texto ficam por cima do preenchimento azul do botão do quiz */
.botao-menu-icone,
.botao-menu-texto {
    position: relative;
    z-index: 1;
}

.botao-menu-icone {
    font-size: 26px;
    line-height: 1;
}

.botao-menu-texto {
    line-height: 1.2;
}

.botao-menu-cartas {
    background-color: #6fb8ac;
    border-color: #426e67;
}

.botao-menu-quiz {
    background-color: #a8c8e0;
    border-color: #647886;
}

.botao-menu-mercado {
    background-color: #d4a574;
    border-color: #7f6345;
}

.menu-dev {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Escondida até a sequência C-L-E no título */
.menu-dev[hidden] {
    display: none;
}

/* O pulinho de Lessi quando a sequência dev chega */
.titulo-menu-robo.lessi-pulinho {
    animation: lessi-pulinho 0.5s ease-out;
}

@keyframes lessi-pulinho {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-18px); }
    65% { transform: translateY(0); }
    80% { transform: translateY(-5px); }
}

.menu-dev button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 6px 16px;

    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;

    font-family: "Nunito", Arial, sans-serif;
    /* A Nunito tem letras minúsculas mais baixas que a Arial e parece menor:
       aqui ela é ampliada até ficar do mesmo tamanho visual da Arial */
    font-size-adjust: 0.52;
    background-color: #1f4a28;
}

.jogo {
    width: 100%;
    max-width: 450px;
    min-height: 100vh;
    padding: 30px 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: white;
}

.topo h1 {
    margin: 0;

    font-size: 22px;
    font-weight: normal;
    text-align: center;
}

.icone {
    font-size: 36px;
    color: white;

    background: none;
    border: none;
}

.icone-pequena {
    font-size: 18px;
}

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

.carta {
    width: 100%;
    height: 62px;
    padding: 0 10px;

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

    /* Verde mais claro que o fundo: contorno discreto, em harmonia com a mesa de jogo */
    border: 2px solid #3f7d4c;
    border-radius: 35px;
}

.palavra {
    font-size: 24px;
    color: #222;
}

/* =========================================================
   2. GRUPPO VERBALE (Verbo + Pronome)
   ========================================================= */

.verbo {
    background-color: #e1bc61;
}

@keyframes lampadaTrabalhando {
    from { fill: #ffe08a; }
    to { fill: #9a958a; }
}

/* O cabeçalho de cada capítulo: "Capitolo N" à esquerda, "🔊 Ascolta" à direita
   (com um capítulo só, sem título: o botão fica sozinho, à direita) */
.cabecalho-capitulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

/* A faixa da lupa: fica presa embaixo da tela enquanto se lê a estória */
/* A "gaveta": uma seção fixa embaixo da tela, da largura do jogo, com os cantos de cima
   arredondados. Usada pela lupa, pelos pontos do menu e pelo saldo do mercado.
   O conteúdo rola só na parte de cima e nunca passa por baixo dela
   (cada tela reserva o espaço embaixo: ver --altura-gaveta-...) */
.gaveta-fixa {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    width: 100%;
    max-width: 450px;

    padding: 10px 14px;
    /* nos iPhones com a barrinha embaixo, a faixa fica acima dela */
    padding-bottom: calc(10px + var(--margem-segura-baixo));

    background-color: #2d5e3a;
    /* Cantos de cima arredondados, como uma gaveta que sai de baixo */
    border: 2px solid #e1bc61;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4);
}

/* Dentro da gaveta, a tabela dos pontos não precisa de margem nem sombra */
.gaveta-pontos .mercado-resumo-tabela {
    margin-bottom: 0;
    box-shadow: none;
    /* Fundo creme: sem ele, entre as duas células aparecia um fio do verde
       da gaveta (um arredondamento de pixel de alguns celulares) */
    background-color: #f0ede4;
}

/* Nas gavetas dos pontos (menu e mercado) a tabela é compacta: letras e espaços menores */
.gaveta-pontos {
    padding-top: 8px;
    padding-bottom: calc(8px + var(--margem-segura-baixo));
}

.gaveta-pontos .mercado-resumo-tabela {
    font-size: 13px;
}

.gaveta-pontos .mercado-resumo-cabecalho th {
    padding: 4px 10px;
}

.gaveta-pontos .mercado-resumo-tabela td {
    padding: 5px 12px;
}

/* O botão da compra, dentro da gaveta do mercado: um pouco mais baixo */
.gaveta-pontos .botao-confirmar-compra {
    height: 44px;
    margin-top: 8px;
    font-size: 16px;
}

/* Espaço reservado embaixo do menu e do mercado para a gaveta dos pontos */
#tela-menu-inicial {
    padding-bottom: var(--altura-gaveta-menu);
}

#tela-mercado {
    padding-bottom: var(--altura-gaveta-mercado);
}

#tela-pos-compra {
    padding-bottom: var(--altura-gaveta-pos-compra);
}

/* ---------- Lessi no quiz: o fumetto e as expressões ---------- */

/* O fumetto: no lugar do antigo título, com a pontinha virada para Lessi */
.lessi-fumetto {
    position: relative;
    flex: 1;
    min-height: 50px;
    margin: 0 14px 0 8px;
    padding: 6px 12px;

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

    background-color: #f0ede4;
    border: 2px solid #426e67;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: #222;
    text-align: center;
}

/* A pontinha: um triângulo da cor da borda e, por cima, um menor da cor do fundo */
.lessi-fumetto::after,
.lessi-fumetto::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-color: transparent;
    border-right: 0;
}

.lessi-fumetto::after {
    right: -11px;
    border-width: 9px 0 9px 11px;
    border-left-color: #426e67;
}

.lessi-fumetto::before {
    right: -8px;
    z-index: 1;
    border-width: 7px 0 7px 9px;
    border-left-color: #f0ede4;
}

/* Elogio: o fumetto fica dourado */
.lessi-fumetto-elogio {
    background-color: #fff6d8;
    border-color: #e1bc61;
}

.lessi-fumetto-elogio::after {
    border-left-color: #e1bc61;
}

.lessi-fumetto-elogio::before {
    border-left-color: #fff6d8;
}

.lessi-quiz {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 8px rgba(255, 248, 220, 0.3));
}

.lessi-quiz svg {
    width: 100%;
    height: 100%;
}

/* As expressões: cada uma mostra só os seus olhos e a sua boca */
.lessi-olhos-tristes,
.lessi-boca-aberta,
.lessi-boca-triste {
    display: none;
}

.lessi-fala .lessi-boca-sorriso,
.lessi-triste .lessi-olhos-felizes,
.lessi-triste .lessi-boca-sorriso {
    display: none;
}

.lessi-fala .lessi-boca-aberta,
.lessi-triste .lessi-olhos-tristes,
.lessi-triste .lessi-boca-triste {
    display: inline;
}

/* Um pouco de espaço entre a fileira de Lessi e a carta da palavra */
#tela-quiz .topo {
    margin-bottom: 4px;
}

/* =========================================================
   Tela da lista dos baralhos
   ========================================================= */

.baralho-item {
    background-color: white;
    border: 2px solid #426e67;
    border-radius: 20px;
    overflow: hidden;
}

.baralho-cabecalho {
    width: 100%;
    padding: 15px 20px;

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

    background-color: #6fb8ac;
    border: none;

    font-size: 18px;
    font-weight: bold;
    color: #222;
    text-align: left;
}

.baralho-seta {
    font-size: 16px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.baralho-item.aberto .baralho-seta {
    transform: rotate(0deg);
}

.baralho-detalhe {
    display: none;
    padding: 15px;
}

.baralho-item.aberto .baralho-detalhe {
    display: block;
}

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

    overflow-y: auto;
}

.tabela-traducao {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate; /* Permette il border-radius sugli elementi interni */
    border-spacing: 0;
    margin-bottom: 14px;

    font-size: 15px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #444;
}

.tabela-traducao th,
.tabela-traducao td {
    width: 50%;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.tabela-traducao td:first-child,
.tabela-traducao .cabecalho-colunas th:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

/* Rimuove l'ultimo bordo inferiore per non raddoppiare la cornice della tabella */
.tabela-traducao tr:last-child td {
    border-bottom: none;
}

.cabecalho-colunas th {
    border-bottom: 2px solid #444;
}

.tabela-traducao:has(.cabecalho-verbo) {
    border-color: #a3812f;
}

.tabela-traducao:has(.cabecalho-substantivo) {
    border-color: #4f9296;
}

.tabela-traducao:has(.cabecalho-adjetivo) {
    border-color: #5c8a56;
}

.cabecalho-categoria th {
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #444;
}

.cabecalho-verbo th {
    background-color: #e1bc61;
    color: #222;
    border-bottom-color: #a3812f;
}

.cabecalho-substantivo th {
    background-color: #9ed9dc;
    color: #222;
    border-bottom-color: #4f9296;
}

.cabecalho-adjetivo th {
    background-color: #acd3a7;
    color: #222;
    border-bottom-color: #5c8a56;
}

.carta-quiz {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 70px;
    padding: 0 20px;

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

    background-color: white;
    border: 2px solid #444;
    border-radius: 35px;
}

.carta-quiz-fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: var(--cor-carta-vazio, transparent);
}

.carta-quiz-preenchimento {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;

    background-color: var(--cor-carta-cheio, transparent);
}

.carta-quiz .palavra {
    position: relative;
    z-index: 1;

    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.quiz-timer-contorno {
    width: 100%;
    height: 14px;
    margin: 12px 0;

    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.quiz-timer-barra {
    height: 100%;
    width: 100%;

    background-color: var(--cor-timer, #e1bc61);
    border-radius: 10px;
}

@keyframes piscaBordo {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 1); }
    50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0); }
}

.opcao-correta-flash {
    animation: piscaBordo 0.6s infinite;
}

/* Lampo rosso sulla barra del tempo quando si sbaglia risposta */
@keyframes flashErroBarra {
    0% { background-color: var(--cor-timer, #e1bc61); }
    50% { background-color: #ff4d4d; }
    100% { background-color: var(--cor-timer, #e1bc61); }
}

.timer-flash-erro {
    animation: flashErroBarra 0.4s ease;
}

@keyframes piscaLaranja {
    0%, 100% { background-color: #f0a868; }
    50% { background-color: #f5c68f; }
}

.botao-ultima-carta {
    animation: piscaLaranja 1s ease-in-out infinite;
    cursor: default;
    border-color: #b8733a;
}

.quiz-opcoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.opcao-quiz {
    width: 100%;
    height: 50px;
    padding: 0 20px;

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

    background-color: #f0ede4;
    border: 2px solid #b3a585;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-passa {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    padding: 0 20px;

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

    background-color: #a8c8e0;
    border: 2px solid #647886;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

/* Tela "Siamo pronti?" antes do quiz */
.quiz-pronto {
    width: 100%;
    margin-top: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

/* Caixa com as regras do jogo, no estilo da caixa dos pontos do menu,
   mas com as cores do quiz */
.quiz-pronto-caixa {
    width: 100%;

    background-color: #f0ede4;
    border: 2px solid #647886;
    border-radius: 14px;
    overflow: hidden;
}

.quiz-pronto-cabecalho {
    padding: 10px;

    background-color: #a8c8e0;
    border-bottom: 2px solid #647886;

    text-align: center;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #222;
}

.quiz-pronto-lista {
    margin: 0;
    padding: 4px 16px;
    list-style: none;
}

.quiz-pronto-lista li {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 11px 0;
    border-bottom: 1px solid #ddd5c4;

    font-size: 17px;
    line-height: 1.35;
    color: #222;
}

.quiz-pronto-lista li:last-child {
    border-bottom: none;
}

.quiz-pronto-icone {
    flex-shrink: 0;
    width: 28px;

    font-size: 22px;
    text-align: center;
}

#quiz-pronto-segundos {
    font-weight: 800;
}

/* Pulsação suave que convida ao clique em "Iniziamo!" */
@keyframes pulsaBotaoComecar {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 200, 224, 0.6); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(168, 200, 224, 0); }
}

.botao-comecar-quiz {
    width: 100%;
    height: 62px;

    background-color: #a8c8e0;
    border: 2px solid #647886;
    border-radius: 35px;

    font-size: 22px;
    font-weight: 800;
    color: #222;

    animation: pulsaBotaoComecar 1.8s ease-in-out infinite;
}

.quiz-fim-ciclo {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    text-align: center;
}

/* Lessi grande no fim da missão, com um leve saltinho de alegria */
.fim-ciclo-lessi {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 14px rgba(255, 248, 220, 0.4));
    animation: saltinhoLessi 1.6s ease-in-out infinite;
}

@keyframes saltinhoLessi {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* O fumetto dos parabéns, com a pontinha para cima (para Lessi) */
.fim-ciclo-fumetto {
    position: relative;
    width: 100%;
    margin-top: 4px;
    padding: 14px 16px;

    background-color: #fff6d8;
    border: 3px solid #e1bc61;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fim-ciclo-fumetto::after,
.fim-ciclo-fumetto::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-color: transparent;
    border-top: 0;
}

.fim-ciclo-fumetto::after {
    top: -15px;
    border-width: 0 12px 15px 12px;
    border-bottom-color: #e1bc61;
}

.fim-ciclo-fumetto::before {
    top: -10px;
    z-index: 1;
    border-width: 0 9px 11px 9px;
    border-bottom-color: #fff6d8;
}

.fim-ciclo-titulo {
    margin: 0;

    font-size: 30px;
    font-weight: bold;
    color: #a67c00;
}

.fim-ciclo-subtitulo {
    margin: 4px 0 0 0;

    font-size: 17px;
    font-weight: 700;
    color: #222;
}

@keyframes brilhoCorreto {
    0%, 100% { box-shadow: 0 0 0 3px rgba(120, 255, 150, 1), 0 0 20px rgba(120, 255, 150, 0.8); }
    50% { box-shadow: 0 0 0 3px rgba(120, 255, 150, 0.4), 0 0 10px rgba(120, 255, 150, 0.3); }
}

.opcao-correta-brilho {
    animation: brilhoCorreto 1s ease-in-out;
    background-color: #ffffff;
}

@keyframes flashCorCarta {
    0% { box-shadow: 0 0 0 4px var(--cor-carta-cheio), 0 0 25px var(--cor-carta-cheio); }
    100% { box-shadow: 0 0 0 0px var(--cor-carta-cheio), 0 0 0px var(--cor-carta-cheio); }
}

.carta-flash-cor {
    animation-name: flashCorCarta;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

@keyframes pulseCarta {
    0%, 100% { transform: scale(1); }
    15%, 45%, 75% { transform: scale(1.06); }
    30%, 60%, 90% { transform: scale(1); }
}

@keyframes festaGrandeCarta {
    0% {
        box-shadow: 0 0 4px 2px var(--cor-carta-cheio),
                    0 0 10px 4px rgba(255, 248, 220, 0.3),
                    0 0 15px 6px rgba(255, 215, 100, 0.2);
    }
    16%, 50%, 84% {
        box-shadow: 0 0 20px 8px var(--cor-carta-cheio),
                    0 0 25px 10px rgba(255, 248, 220, 0.6),
                    0 0 40px 15px rgba(255, 215, 100, 0.6);
    }
    33%, 67% {
        box-shadow: 0 0 10px 4px var(--cor-carta-cheio),
                    0 0 15px 6px rgba(255, 248, 220, 0.4),
                    0 0 25px 8px rgba(255, 215, 100, 0.3);
    }
    100% {
        box-shadow: 0 0 0px 0px transparent;
    }
}

.carta-festa-grande {
    animation-name: festaGrandeCarta, pulseCarta;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes flashErroCarta {
    0% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 0); }
    30% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 1); }
    100% { box-shadow: 0 0 0 4px rgba(255, 77, 77, 0); }
}

.carta-flash-erro {
    animation-name: flashErroCarta;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

.quiz-fila-quadradinhos {
    width: 100%;
    margin-bottom: 8px;

    display: flex;
    justify-content: center;
    gap: 3px;
}

.fila-quadradinhos-quadrado {
    width: 15px;
    height: 15px;

    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.fim-ciclo-bravura {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#fim-ciclo-resultado-texto {
    font-weight: bold;
    color: #f0d78c;
}

.bravura-barra-contorno {
    width: 100%;
    height: 20px;

    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.bravura-barra {
    height: 100%;
    width: 0%;

    background-color: #f0d78c;
    border-radius: 10px;
}

.fim-ciclo-bravura-numero {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.fim-ciclo-cartas-dominadas {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carta-dominada-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 16px;
    border-radius: 20px;

    font-weight: bold;
    color: #222;
}

.fim-ciclo-total {
    width: 100%;

    display: flex;
    justify-content: space-between;

    font-size: 20px;
    font-weight: bold;
    color: white;

    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fim-ciclo-resultado-label {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.fim-ciclo-resultado-pilula {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 24px;
    border-radius: 30px;
    border: 2px solid #444;

    background-color: #c9973f;

    font-size: 20px;
    font-weight: bold;
    color: white;
}

.fim-ciclo-cartas-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.mercado-baralho {
    position: relative;
    margin-bottom: 46px;
}

/* Títulos das seções do mercado ("MAZZI", "CARTE SINGOLE"): faixa clara
   com traços dos dois lados, para separar bem os mazzi das cartas */
.mercado-secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 72px 0 18px;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #f0d78c;
}

/* O primeiro título fica mais perto do quadro dos pontos */
.mercado-secao-titulo:first-child {
    margin-top: 26px;
}

.mercado-secao-titulo::before,
.mercado-secao-titulo::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: rgba(240, 215, 140, 0.5);
}

.mercado-baralho-interno {
    position: relative;
    z-index: 1;
    background-color: #6fb8ac;
    border: 2px solid #426e67;
    border-radius: 20px;
    overflow: hidden;
}

.mercado-baralho-nome {
    margin: 0;
    padding: 14px;

    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.mercado-quadradinhos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;

    padding: 0 14px 14px;
}

.mercado-quadrado {
    width: 16px;
    height: 16px;

    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.mercado-quadrado-possuido {
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.9), 0 0 3px 1px rgba(255, 215, 100, 0.7);
}

.mercado-cartas-avulsas {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mercado-carta-avulsa {
    position: relative;
    margin-bottom: 40px;
}

.mercado-carta-avulsa-interno {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 55px;
    padding: 0 20px;

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

    border-radius: 12px;

    font-size: 16px;
    font-weight: bold;
    color: #222;
}

.mercado-preco-pilula {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    z-index: 0;

    background-color: #f0ede4;
    border: 2px solid #a67c00;
    border-radius: 20px;
    padding: 32px 10px 10px;

    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #a67c00;

    cursor: pointer;
    transition: transform 0.1s ease;
}

.mercado-preco-pilula:active {
    transform: scale(0.95);
}

/* Tocar no baralho ou na carta também seleciona: a mãozinha aparece em todo
   o bloco e a pílula "afunda" do mesmo jeito */
.mercado-baralho,
.mercado-carta-avulsa {
    cursor: pointer;
}

.mercado-baralho:active .mercado-preco-pilula,
.mercado-carta-avulsa:active .mercado-preco-pilula {
    transform: scale(0.95);
}

.mercado-carta-avulsa-interno.categoria-verbo {
    background-color: #e1bc61;
    border: 2px solid #a3812f;
}

.mercado-carta-avulsa-interno.categoria-substantivo {
    background-color: #9ed9dc;
    border: 2px solid #4f9296;
}

.mercado-carta-avulsa-interno.categoria-adjetivo {
    background-color: #acd3a7;
    border: 2px solid #5c8a56;
}

.mercado-carta-avulsa .mercado-preco-pilula {
    bottom: -30px;
    padding: 28px 10px 8px;
}

.mercado-preco-pilula-selecionada {
    transform: scale(0.85);
}

/* Bandeirinhas do mercado: no alto, à direita; a escolhida fica acesa,
   como os níveis da estória */
.mercado-idiomas {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-bottom: 4px;
}

.idioma {
    padding: 0;
    line-height: 0;

    background: none;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    overflow: hidden;

    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.idioma svg {
    display: block;
    width: 33px;
    height: 22px;
}

.idioma-selecionado {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.mercado-resumo-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;

    font-size: 15px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #426e67;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.mercado-resumo-cabecalho th {
    background-color: #6fb8ac;
    color: #222;
    padding: 8px 10px;
    text-align: center;
    font-weight: bold;
}

.mercado-resumo-tabela td {
    background-color: #f0ede4;
    padding: 8px 14px;
    color: #222;
    border-bottom: 1px solid #ddd;
}

.mercado-resumo-tabela tr:last-child td {
    border-bottom: none;
}

.mercado-resumo-tabela td:last-child {
    text-align: right;
    font-weight: bold;
    color: #a67c00;
}

.mercado-resumo-tabela td.mercado-carrinho-no-vermelho {
    color: #ff8080;
}

.botao-confirmar-compra {
    width: 100%;
    height: 55px;
    margin-top: 10px;

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

    background-color: #f0d78c;
    border: 2px solid #a67c00;
    border-radius: 35px;

    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.botao-confirmar-compra:disabled {
    opacity: 0.5;
    cursor: default;
    
}

/* =========================================================
   TELA PÓS-COMPRA
   ========================================================= */

#tela-pos-compra {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Lessi e o fumetto dos parabéns, centralizados em cima (o visual é o do fim da missão) */
.pos-compra-festa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    text-align: center;
}

.botoes-redondos {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
}

.botao-redondo {
    width: 70px;
    height: 70px;

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

    font-size: 34px;
    border: 2px solid white;
    border-radius: 50%;
}

.botao-redondo-home {
    background-color: #b8e0b0;
}

/* Botão redondo desativado (ex. a casa enquanto a IA escreve): fica apagado */
.botao-redondo:disabled {
    opacity: 0.35;
    cursor: default;
}

.botao-redondo-mercado {
    background-color: #b3dcf2;
}

.botao-redondo-frase {
    background-color: #f5e3a8;
}

/* Lessi pequena com o seu fumetto, no lugar do título de uma tela */
.topo-lessi {
    flex: 1;
    min-width: 0;
    margin: 0 8px;

    display: flex;
    align-items: center;
}

.topo-lessi-robo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 8px rgba(255, 248, 220, 0.3));
}

/* O fumetto com a pontinha à esquerda (para Lessi, que fica antes dele) */
.lessi-fumetto-esquerda {
    margin: 0 0 0 12px;
    font-size: 14px;
}

.lessi-fumetto-esquerda::after,
.lessi-fumetto-esquerda::before {
    right: auto;
    border-style: solid;
}

.lessi-fumetto-esquerda::after {
    left: -11px;
    border-width: 9px 11px 9px 0;
    border-color: transparent #426e67 transparent transparent;
}

.lessi-fumetto-esquerda::before {
    left: -8px;
    border-width: 7px 9px 7px 0;
    border-color: transparent #f0ede4 transparent transparent;
}

/* =========================================================
   A BARRA DE LESSI: fixa no alto da tela, como uma gaveta que desce
   de cima (borda dourada e cantos de baixo arredondados, gêmea das
   gavetas de baixo). Cada tela com a barra reserva o espaço em cima.
   ========================================================= */

:root {
    --altura-barra-lessi: 64px;
}

.barra-lessi {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    width: 100%;
    max-width: 450px;
    min-height: var(--altura-barra-lessi);
    padding: 6px 10px;
    /* nos iPhones com o "entalhe", a barra fica abaixo dele */
    padding-top: calc(6px + env(safe-area-inset-top));

    background-color: #2d5e3a;
    border: 2px solid #e1bc61;
    border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* O espaço reservado em cima, para o conteúdo nunca ficar embaixo da barra */
.tela:has(> .barra-lessi) {
    padding-top: calc(var(--altura-barra-lessi) - 14px);
}

/* Dentro da barra, tudo um pouco menor: casa, dado, Lessi e o fumetto */
.barra-lessi .icone {
    font-size: 30px;
    padding: 0 2px;
}

.barra-lessi .topo-lessi {
    margin: 0 4px;
}

.barra-lessi .topo-lessi-robo {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.barra-lessi .lessi-fumetto {
    min-height: 40px;
    padding: 4px 10px;
    font-size: 14px;
    /* Um "\n" no texto de Lessi vira uma quebra de linha */
    white-space: pre-line;
}

.barra-lessi .lessi-quiz {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

/* A casa desativada (enquanto Lessi escreve) fica apagada */
.icone:disabled {
    opacity: 0.35;
    cursor: default;
}

/* O fumetto com a pontinha à esquerda, na versão dourada ("Storia salvata!") */
.lessi-fumetto-esquerda.lessi-fumetto-elogio::after {
    border-color: transparent #e1bc61 transparent transparent;
}

.lessi-fumetto-esquerda.lessi-fumetto-elogio::before {
    border-color: transparent #fff6d8 transparent transparent;
}

/* No mercado, a barra tem duas linhas: as bandeirinhas (pequenas e centralizadas)
   e, embaixo, a casa e Lessi */
.barra-lessi-mercado {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.barra-lessi-mercado .mercado-idiomas {
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.barra-lessi-mercado .idioma svg {
    width: 24px;
    height: 16px;
}

.barra-lessi-mercado .idioma {
    border-width: 1.5px;
    border-radius: 4px;
}

/* No mercado, carrinho e saldo numa linha só: quatro células, rótulo e valor */
.mercado-resumo-uma-linha .mercado-resumo-valor {
    text-align: right;
    font-weight: bold;
    color: #a67c00;
    white-space: nowrap;
}

.gaveta-pontos .mercado-resumo-uma-linha td {
    padding: 5px 8px;
}

/* Uma linhazinha separa o carrinho do saldo */
.mercado-resumo-uma-linha td:nth-child(3) {
    border-left: 1px solid #ddd;
}

/* O primeiro título do mercado ("STRUTTURE") sem a margem de cima: logo abaixo da barra */
#mercado-conteudo > .mercado-secao-titulo:first-child {
    margin-top: 0;
}

/* =========================================================
   MERCADO COMPACTO: mais ofertas à vista entre a barra de cima
   e a gaveta de baixo
   ========================================================= */

/* As bandeirinhas em coluna, à direita da barra: a barra fica com uma linha só */
.barra-lessi-mercado {
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
}

.barra-lessi-mercado .topo {
    flex: 1;
    min-width: 0;
}

.barra-lessi-mercado .mercado-idiomas {
    flex-direction: column;
    gap: 5px;
}

/* Títulos das seções e blocos das ofertas: menos espaço vazio, o texto do mesmo tamanho */
.mercado-secao-titulo {
    margin: 40px 0 12px;
}

.mercado-baralho {
    margin-bottom: 38px;
}

.mercado-baralho-nome {
    padding: 10px 14px 8px;
}

.mercado-quadradinhos {
    padding: 0 14px 10px;
}

.mercado-preco-pilula {
    bottom: -30px;
    padding: 28px 10px 6px;
}

.mercado-carta-avulsa {
    margin-bottom: 34px;
}

.mercado-carta-avulsa-interno {
    height: 48px;
}

.mercado-carta-avulsa .mercado-preco-pilula {
    bottom: -27px;
    padding: 25px 10px 5px;
}

/* Na barra de Lessi, o ▲ de "Vedi le tue carte" continua pequeno */
.barra-lessi .icone-pequena {
    font-size: 20px;
}

/* As cartas e o ✓ escondidos nos passos das propostas */
.cartas[hidden] {
    display: none;
}

/* Lessi que pensa (bivios da modalidade "Usiamo alcune frasi") */
.lessi-rosto-pensando {
    display: none;
}

.lessi-pensando .lessi-rosto-normal {
    display: none;
}

.lessi-pensando .lessi-rosto-pensando {
    display: inline;
}

.lessi-pensando .lessi-frase-lampada {
    animation: lampadaTrabalhando 0.8s ease-in-out infinite alternate;
}

/* Enquanto há uma pílula, as palavras se afastam do meio para não ficarem embaixo dela */
.tabela-traducao tr td {
    transition: padding 1.1s ease-in-out;
}

@keyframes premio-brilho {
    0%, 60% { left: -30px; }
    85%, 100% { left: 110%; }
}

@keyframes premio-respira {
    0%, 100% { box-shadow: 0 0 0 2px #e1bc61, 0 2px 6px rgba(0, 0, 0, 0.25); }
    50% { box-shadow: 0 0 0 2px #f3d98a, 0 0 10px rgba(243, 217, 138, 0.7); }
}

/* =========================================================
   OS EXERCÍCIOS SOBRE A ESTÓRIA (11/10/2026): o cérebro que levanta pesos
   (no lugar do dado), a página dos exercícios e o fim do quiz da estória
   ========================================================= */

/* Um botão redondo escondido fica escondido de verdade (ex. o 🛒 no quiz da estória) */
.botao-redondo[hidden] {
    display: none;
}

.exercicios-lista {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cada exercício: o ícone, o nome com a descrição e, se houver, o preço em ⚡ */
.estoria-exercicio {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;

    text-align: left;
    background-color: #fff8dc;
    border: 2px solid #e1bc61;
    border-radius: 16px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.estoria-exercicio:active {
    transform: scale(0.98);
}

.estoria-exercicio-icone {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.estoria-exercicio-textos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.estoria-exercicio-nome {
    font-size: 18px;
    font-weight: 800;
    color: #2d5e3a;
}

.estoria-exercicio-descricao {
    font-size: 13px;
    color: #555;
}

.estoria-exercicio-descricao[hidden] {
    display: none;
}

/* No menu, o cérebro de "Verifica la tua bravura" do tamanho dos outros ícones */
.botao-menu-icone-imagem {
    display: block;
    width: 46px;
    height: 46px;
    margin: -8px auto -6px; /* o desenho é largo e baixo: maior, sem o botão crescer */
}

.estoria-exercicio[hidden] {
    display: none;
}

/* Discreta: a pílula cresce pouco e o brilho fica perto dela (não cobre as palavras vizinhas) */

/* ---------- A tela de escolha (12/10/2026): como os exercícios da estória ---------- */
.escolha-bravura-lista {
    margin-top: 24px;
}

.escolha-bravura-botao {
    position: relative;
    overflow: hidden;
}

/* O quiz: o preenchimento (quanto falta para a próxima missão) fica atrás do ícone e dos textos */
.escolha-bravura-preenchimento {
    z-index: 0;
    background-color: #dbe9f3;
}

.escolha-bravura-botao > :not(.escolha-bravura-preenchimento) {
    position: relative;
    z-index: 1;
}

/* =========================================================
   AVISO DE LESSI (13/10/2026)
   Uma janela no estilo do jogo, com o robô, um texto com negritos e os botões
   (mostraAvisoLessi em script.js). Primeiro uso: o cadeado das não contáveis.
   ========================================================= */

.aviso-lessi-veu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(10, 30, 15, 0.55);
}

.aviso-lessi {
    width: 100%;
    max-width: 380px;
    padding: 16px 16px 14px;
    background-color: #fff8dc;
    border: 2px solid #e1bc61;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.aviso-lessi-topo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.aviso-lessi-robo {
    width: 52px;
    height: 52px;
    flex: none;
}

.aviso-lessi-texto {
    font-size: 17px;
    line-height: 1.45;
    color: #2b2b2b;
}

.aviso-lessi-texto p {
    margin: 0 0 8px;
}

.aviso-lessi-texto b {
    color: #2d5e3a;
}

.aviso-lessi-botoes {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.aviso-lessi-botao {
    flex: 1;
    padding: 10px 8px;
    font-size: 16px;
    font-weight: 800;
    color: #555;
    background-color: #f0ede4;
    border: 2px solid #b3a585;
    border-radius: 14px;
    cursor: pointer;
}

.aviso-lessi-botao-principal {
    color: #1f4a28;
    background-color: #acd3a7;
    border-color: #3f7d4c;
}

/* O botão "Installa Lessicarte sul telefono" no menu (13/10/2026): discreto, embaixo dos outros */
.botao-instala-app {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 800;
    color: #2d5e3a;
    background-color: #fff8dc;
    border: 2px dashed #e1bc61;
    border-radius: 16px;
    cursor: pointer;
}

.botao-instala-app[hidden] {
    display: none;
}

/* =========================================================
   TUTORIAL ANIMADOS DE "SCEGLI LA CARTA GIUSTA" E DA OFICINA (15/10/2026)
   Mini cenas em SVG no lugar dos emojis, como nas vocalotte e no laboratório.
   As cenas ficam paradas enquanto não se veem (classe "cena-visivel", ver script.js).
   ========================================================= */
.tutorial-animado .quiz-pronto-icone {
    width: 70px;
}

.tutorial-cena {
    display: block;
    width: 70px;
    height: 50px;
    overflow: visible;
    font-family: "Nunito", Arial, sans-serif;
}

/* ---------- "Scegli la carta giusta" ---------- */
/* 1. A palavra italiana na cartinha muda */
.tut-quiz-parola {
    font-size: 10px;
    font-weight: 900;
    fill: #222;
    opacity: 0;
    animation: tutParola 6s linear infinite both;
}

.tut-quiz-parola-2 { animation-delay: 2s; }
.tut-quiz-parola-3 { animation-delay: 4s; }

@keyframes tutParola {
    0% { opacity: 0; }
    4%, 30% { opacity: 1; }
    34%, 100% { opacity: 0; }
}

/* 2. Um dedo toca a tradução certa, que fica verde */
.tut-quiz-opcao {
    font-size: 7.5px;
    font-weight: 800;
    fill: #222;
}

.tut-quiz-certa {
    animation: tutCerta 3.6s linear infinite;
}

@keyframes tutCerta {
    0%, 45% { fill: #ffffff; }
    50%, 90% { fill: #9fe09a; }
    100% { fill: #ffffff; }
}

.tut-dedo-toca {
    animation: tutDedoToca 3.6s ease-in-out infinite;
}

@keyframes tutDedoToca {
    0% { transform: translate(14px, 18px); opacity: 0; }
    15% { opacity: 1; }
    40%, 70% { transform: translate(0, 0); opacity: 1; }
    90%, 100% { transform: translate(14px, 18px); opacity: 0; }
}

.tut-onda {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: tutOnda 3.6s ease-out infinite;
}

@keyframes tutOnda {
    0%, 42% { transform: scale(0.6); opacity: 0; }
    46% { opacity: 1; }
    65%, 100% { transform: scale(2.4); opacity: 0; }
}

/* 3. A barra do tempo que se encurta */
.tut-quiz-seg {
    font-size: 11px;
}

.tut-barra-tempo {
    transform-box: fill-box;
    transform-origin: left center;
    animation: tutBarraTempo 4s linear infinite;
}

@keyframes tutBarraTempo {
    0% { transform: scaleX(1); fill: #7fc97a; }
    60% { fill: #f2c14e; }
    95% { transform: scaleX(0.04); fill: #e0675a; }
    100% { transform: scaleX(1); fill: #7fc97a; }
}

/* 4. Resposta rápida: muitos pontos; resposta lenta: poucos */
.tut-barra-rapida {
    transform-box: fill-box;
    transform-origin: left center;
    animation: tutBarraRapida 8s ease-in-out infinite;
}

@keyframes tutBarraRapida {
    0% { transform: scaleX(1); }
    12%, 45% { transform: scaleX(0.85); }
    50% { transform: scaleX(1); }
    78%, 97% { transform: scaleX(0.2); }
    100% { transform: scaleX(1); }
}

.tut-pontos-muitos,
.tut-pontos-poucos {
    font-weight: 900;
    fill: #8a6d1d;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.tut-pontos-muitos {
    font-size: 15px;
    animation: tutPontosMuitos 8s ease-out infinite;
}

.tut-pontos-poucos {
    font-size: 8px;
    animation: tutPontosPoucos 8s ease-out infinite;
}

@keyframes tutPontosMuitos {
    0%, 13% { opacity: 0; transform: scale(0.3); }
    18%, 42% { opacity: 1; transform: scale(1); }
    46%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes tutPontosPoucos {
    0%, 79% { opacity: 0; transform: scale(0.3); }
    84%, 96% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* 5. A carta se completa e o presente se abre: +200 */
.tut-dominio {
    transform-box: fill-box;
    transform-origin: left center;
    animation: tutDominio 5s ease-in-out infinite;
}

@keyframes tutDominio {
    0% { transform: scaleX(0.05); }
    45%, 95% { transform: scaleX(1); }
    100% { transform: scaleX(0.05); }
}

.tut-presente {
    font-size: 16px;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: tutPresente 5s ease-in-out infinite;
}

@keyframes tutPresente {
    0%, 48% { transform: scale(1) rotate(0); }
    52% { transform: scale(1.25) rotate(-12deg); }
    56% { transform: scale(1.25) rotate(12deg); }
    60%, 100% { transform: scale(1) rotate(0); }
}

.tut-bonus {
    font-size: 9px;
    font-weight: 900;
    fill: #8a6d1d;
    opacity: 0;
    animation: tutBonus 5s ease-out infinite;
}

@keyframes tutBonus {
    0%, 58% { opacity: 0; transform: translateY(6px); }
    64%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-cena,
    .tutorial-cena * {
        animation: none !important;
    }

    /* Paradas, as cenas mostram o estado "final": as palavras, o verde, os pontos */
    .tut-quiz-parola:first-of-type,
    .tut-pontos-muitos,
    .tut-bonus {
        opacity: 1;
    }
}

/* =========================================================
   造句 ZÀOJÙ (16/10/2026)
   O que muda em relação a Lessicarte: o nome no menu, as cartas com
   caracteres chineses e pinyin, e as cores dos tipos novos de carta.
   ========================================================= */

/* O nome no menu: 造句 a pincel, com o pinyin embaixo */
.titulo-zaoju {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.titulo-zaoju-hanzi {
    font-family: "Ma Shan Zheng", "Noto Sans SC", serif;
    font-weight: normal;
    font-size: 84px;
    line-height: 1;
    letter-spacing: 6px;
    color: #fff8dc;
}

.titulo-zaoju-pinyin {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #e1bc61;
}

/* Os caracteres e o pinyin de uma carta, um embaixo do outro */
.hanzi {
    display: block;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
    line-height: 1.15;
}

.pinyin {
    display: block;
    font-weight: 700;
    font-size: 0.6em;
    line-height: 1.2;
    opacity: 0.75;
}

/* Na carta do quiz: caracteres grandes */
.carta-quiz {
    min-height: 96px;
    padding: 8px 20px;
}

.carta-quiz .palavra .hanzi {
    font-size: 44px;
}

.carta-quiz .palavra .pinyin {
    font-size: 18px;
}

/* Nas tabelas de "Vedi le tue carte" */
.celula-chinesa .hanzi {
    font-size: 22px;
}

.celula-chinesa .pinyin {
    font-size: 13px;
}

/* No mercado: a carta avulsa cresce para caber o pinyin */
.mercado-carta-avulsa-interno {
    height: auto;
    min-height: 56px;
    padding: 6px 20px;
}

.mercado-carta-chinesa .hanzi {
    font-size: 22px;
}

.mercado-carta-chinesa .pinyin {
    font-size: 13px;
}

/* No fim da missão: as cartas completadas */
.carta-dominada-chinesa .hanzi {
    font-size: 22px;
}

.carta-dominada-chinesa .pinyin {
    font-size: 13px;
}

/* O 🧠 (a imagem do cérebro) dentro de um botão redondo */
.botao-redondo-imagem {
    width: 42px;
    height: 42px;
}

/* As cores dos tipos novos de carta (verbi, sostantivi e aggettivi vêm de Lessicarte) */
.tabela-traducao:has(.cabecalho-personagem) { border-color: #5a7fb0; }
.tabela-traducao:has(.cabecalho-tempo) { border-color: #b07090; }
.tabela-traducao:has(.cabecalho-numero) { border-color: #7f68a8; }
.tabela-traducao:has(.cabecalho-expressao) { border-color: #b8735a; }

.cabecalho-personagem th { background-color: #a9c8f0; color: #222; border-bottom-color: #5a7fb0; }
.cabecalho-tempo th { background-color: #f1c0d6; color: #222; border-bottom-color: #b07090; }
.cabecalho-numero th { background-color: #cdb9ec; color: #222; border-bottom-color: #7f68a8; }
.cabecalho-expressao th { background-color: #f2b7a0; color: #222; border-bottom-color: #b8735a; }

.mercado-carta-avulsa-interno.categoria-personagem { background-color: #a9c8f0; border: 2px solid #5a7fb0; }
.mercado-carta-avulsa-interno.categoria-tempo { background-color: #f1c0d6; border: 2px solid #b07090; }
.mercado-carta-avulsa-interno.categoria-numero { background-color: #cdb9ec; border: 2px solid #7f68a8; }
.mercado-carta-avulsa-interno.categoria-expressao { background-color: #f2b7a0; border: 2px solid #b8735a; }

/* =========================================================
   A INTERFACE EM CHINÊS (16/10/2026)
   Os textos vêm de textos.js: cada palavra numa etiqueta <ruby>,
   com o pinyin (<rt>) em cima dos caracteres.
   ========================================================= */

/* Os caracteres chineses dos textos: a Nunito não os tem, então vem a Noto Sans SC */
body {
    font-family: "Nunito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

ruby {
    ruby-position: over;
    /* Os caracteres ficam juntos, mesmo quando o pinyin é mais largo */
    ruby-align: center;
    /* O ajuste de tamanho da Nunito encolheria os caracteres chineses */
    font-size-adjust: none;
    line-height: 1.9;
}

rt {
    font-family: "Nunito", Arial, sans-serif;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.85;
    /* Um respiro entre o pinyin de uma palavra e o da seguinte */
    padding: 0 0.12em;
}

/* Nos botões e títulos em maiúsculas, o pinyin continua em minúsculas */
.mercado-secao-titulo rt,
.baralho-nome rt,
.quiz-pronto-cabecalho rt {
    letter-spacing: 0;
}

/* =========================================================
   MENU COM O ÍCONE À ESQUERDA (16/10/2026)
   Assim sobra mais largura para os caracteres e o pinyin
   ========================================================= */
.botao-menu {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 22px;
    text-align: left;
}

.botao-menu-icone {
    flex: none;
    width: 52px;
    font-size: 34px;
    text-align: center;
}

.botao-menu-icone-imagem {
    width: 52px;
    height: 52px;
    margin: 0 auto;
}

.botao-menu-texto {
    flex: 1;
    min-width: 0;
    font-size: 20px;
}

/* A língua materna: o título e as duas bandeirinhas com o nome da língua */
.menu-lingua {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: #fff8dc;
    font-weight: bold;
}

.menu-lingua-botoes {
    display: flex;
    gap: 8px;
}

.lingua-bandeira {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    border: 2px solid rgba(255, 248, 220, 0.35);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff8dc;
    font: inherit;
    font-size: 14px;
    opacity: 0.6;
    cursor: pointer;
}

.lingua-bandeira.lingua-selecionada {
    opacity: 1;
    border-color: #e1bc61;
    background: rgba(225, 188, 97, 0.2);
}

.lingua-bandeira svg,
.aviso-lessi-botao svg {
    width: 30px;
    height: 20px;
    border-radius: 3px;
    flex: none;
}

/* Na pergunta da primeira visita: os botões com bandeirinha e nome */
.aviso-lessi-botao:has(svg) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   A PAUSA DE 6 HORAS DO QUIZ (16/10/2026)
   O tempo que falta era um preenchimento azul atrás do botão, que parecia
   um defeito: agora é uma barrinha embaixo, e o botão fica apagado
   com o texto "下一个任务：…以后"
   ========================================================= */
.escolha-bravura-preenchimento {
    top: auto;
    bottom: 0;
    height: 6px;
    background-color: #6fa3c9;
}

.escolha-bravura-em-pausa {
    filter: saturate(0.4);
    opacity: 0.8;
}

.escolha-bravura-em-pausa .estoria-exercicio-descricao {
    display: none;
}

.escolha-bravura-espera {
    font-size: 14px;
    font-weight: bold;
    color: #3f6f93;
}

/* Sem a pausa entre as missões, a barrinha do tempo não aparece mais */
.escolha-bravura-preenchimento {
    display: none;
}

/* =========================================================
   A COZINHA DAS FRASES DE 小枣 (16/10/2026, ver cozinha.js)
   O tavolo girevole com os pratinhos, o pratão dividido em duas
   metades (adjetivo à esquerda, nome à direita), o wok e o prato servido
   ========================================================= */
.cozinha-cuoca.cozinha-cuoca-fala {
    animation: cozinhaAcena 0.5s ease;
}

@keyframes cozinhaAcena {
    30% { transform: rotate(-10deg); }
    60% { transform: rotate(8deg); }
}

.cozinha-dica {
    margin: 6px 4px 0;
    color: #fff8dc;
    font-size: 15px;
    text-align: center;
    min-height: 2.4em;
}

.cozinha-receita {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 6px 0;
}

.cozinha-passo {
    padding: 0 10px;
    border: 2px solid rgba(255, 248, 220, 0.3);
    border-radius: 99px;
    color: rgba(255, 248, 220, 0.6);
    font-size: 14px;
    font-weight: bold;
}

.cozinha-passo.agora {
    background-color: #e1bc61;
    border-color: #e1bc61;
    color: #222;
}

.cozinha-passo.feito {
    background-color: rgba(225, 188, 97, 0.25);
    border-color: transparent;
    color: #fff8dc;
}

.cozinha-passo.saltado {
    text-decoration: line-through;
    opacity: 0.6;
}

/* O tavolo girevole (转盘): a mesa de madeira e o disco que gira */
.cozinha-sala {
    display: grid;
    place-items: center;
    margin: 4px 0;
}

.cozinha-mesa {
    position: relative;
    border-radius: 50%;
    background-color: #7a2e22;
    box-shadow: inset 0 0 0 6px #59201a, 0 8px 18px rgba(0, 0, 0, 0.35);
    touch-action: none;
}

.cozinha-giro {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background-color: #f7f8f4;
    box-shadow: 0 0 0 2px #59201a;
}

.cozinha-giro::before {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 2px dashed #dfe5df;
}

.cozinha-marca {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "Ma Shan Zheng", "Noto Sans SC", serif;
    font-size: 40px;
    color: #dfe5df;
    pointer-events: none;
}

/* Os pratinhos de porcelana branca com a borda azul */
.cozinha-pratinho {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px #2f5fa6, inset 0 0 0 4px #ffffff, inset 0 0 0 5px #2f5fa6, 0 2px 4px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: opacity 0.25s;
}

.cozinha-comida {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Noto Sans SC", "PingFang SC", sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #222;
    transition: transform 0.2s;
}

.cozinha-pratinho:active .cozinha-comida {
    transform: scale(0.92);
}

.cozinha-pratinho.vazio .cozinha-comida {
    visibility: hidden;
}

.cozinha-pratinho.vazio {
    pointer-events: none;
}

.cozinha-pratinho.some {
    opacity: 0;
}

/* O pratão e o wok */
.cozinha-banco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 6px 0;
}

.cozinha-pratao {
    position: relative;
    width: 112px;
    height: 112px;
    flex: none;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 3px #2f5fa6, inset 0 0 0 7px #ffffff, inset 0 0 0 8px #2f5fa6, 0 4px 10px rgba(0, 0, 0, 0.3);
}

.cozinha-fundo {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
}

.cozinha-metade {
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    font-family: "Noto Sans SC", "PingFang SC", sans-serif;
    font-weight: 700;
    color: #222;
    cursor: pointer;
}

.cozinha-metade + .cozinha-metade {
    border-left: 2px dashed #c9d6cd;
}

.cozinha-metade.vazia span {
    font-size: 11px;
    font-weight: bold;
    color: #8a978f;
}

.cozinha-seta {
    font-size: 22px;
    color: #fff8dc;
}

.cozinha-wok {
    position: relative;
    width: 96px;
    flex: none;
}

.cozinha-wok img {
    display: block;
    width: 100%;
}

.cozinha-wok.sfrigola img {
    animation: cozinhaSacode 0.35s ease-in-out 3;
}

@keyframes cozinhaSacode {
    25% { transform: translateX(-4px) rotate(-3deg); }
    75% { transform: translateX(4px) rotate(3deg); }
}

.cozinha-vapor {
    position: absolute;
    left: 50%;
    top: 10%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #dfe5df;
    opacity: 0;
    pointer-events: none;
}

.cozinha-wok.sfrigola .cozinha-vapor {
    animation: cozinhaVapor 1s ease-out forwards;
}

.cozinha-wok.sfrigola .cozinha-vapor:nth-child(2) {
    animation-delay: 0.15s;
    margin-left: -22px;
}

.cozinha-wok.sfrigola .cozinha-vapor:nth-child(3) {
    animation-delay: 0.3s;
    margin-left: 16px;
}

@keyframes cozinhaVapor {
    0% { opacity: 0.9; transform: translateY(0) scale(0.6); }
    100% { opacity: 0; transform: translateY(-46px) scale(1.8); }
}

.cozinha-zizi {
    position: absolute;
    right: -6px;
    top: -8px;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #e1bc61;
    opacity: 0;
    pointer-events: none;
}

.cozinha-wok.sfrigola .cozinha-zizi {
    animation: cozinhaZizi 1s ease forwards;
}

@keyframes cozinhaZizi {
    20%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Os botões da cozinha */
.cozinha-comandos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.cozinha-botao {
    padding: 4px 16px;
    border: 2px solid #b3a585;
    border-radius: 16px;
    background-color: #f0ede4;
    color: #222;
    font: inherit;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}

.cozinha-botao-principal {
    background-color: #e1bc61;
    border-color: #a3812f;
}

.cozinha-botao:disabled {
    opacity: 0.4;
    cursor: default;
}

.cozinha-botao[hidden] {
    display: none;
}

.cozinha-voador {
    position: fixed;
    z-index: 20;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 700;
    color: #222;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.5, -0.2, 0.4, 1.2);
}

/* O prato servido */
.cozinha-servido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.cozinha-bandeja {
    width: 100%;
    padding: 16px 10px 12px;
    border-radius: 20px;
    background-color: #7a2e22;
    box-shadow: inset 0 0 0 5px #59201a, 0 8px 18px rgba(0, 0, 0, 0.35);
}

.cozinha-pratos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 6px;
}

.cozinha-prato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateY(8px);
    animation: cozinhaChega 0.35s ease forwards;
}

@keyframes cozinhaChega {
    to { opacity: 1; transform: none; }
}

.cozinha-tigela {
    min-width: 52px;
    height: 52px;
    padding: 0 10px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #222;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.cozinha-pinyin {
    font-size: 13px;
    font-weight: bold;
    color: #f6e9e4;
}

.cozinha-traducao {
    margin: 0;
    max-width: 34ch;
    color: #fff8dc;
    font-size: 20px;
    font-weight: bold;
    text-wrap: balance;
}

.cozinha-aviso-voz,
.cozinha-nota {
    margin: 0;
    color: rgba(255, 248, 220, 0.85);
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .cozinha-cuoca.cozinha-cuoca-fala,
    .cozinha-wok.sfrigola img,
    .cozinha-wok.sfrigola .cozinha-vapor,
    .cozinha-wok.sfrigola .cozinha-zizi,
    .cozinha-prato {
        animation-duration: 0.01ms;
    }
}

/* =========================================================
   A COZINHA CHINESA (16/10/2026, segunda versão)
   A parede de azulejos, o balcão de madeira, o 福 e a lanterna,
   o fogão com o fogo vivo e o vapor; no fim, o cartão da tradução
   ========================================================= */

/* A parede de azulejos verdes, com o rejunte claro */
#tela-cozinha {
    padding: 10px 10px 14px;
    border-radius: 20px;
    background-color: #2f5d4f;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.10) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 2px, transparent 2px);
    background-size: 34px 34px;
    box-shadow: inset 0 0 0 3px #1f4a28;
}

.cozinha-sala {
    position: relative;
}

/* O 福 de cabeça para baixo: nas casas chinesas quer dizer "a sorte chegou" */
.cozinha-fu {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background-color: #d7332b;
    border: 2px solid #e1bc61;
    transform: rotate(45deg);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.cozinha-fu span {
    transform: rotate(135deg);
    font-family: "Ma Shan Zheng", "Noto Sans SC", serif;
    font-size: 30px;
    line-height: 1;
    color: #ffd23f;
}

.cozinha-lanterna {
    position: absolute;
    right: 6px;
    top: -6px;
    width: 34px;
    height: auto;
    transform-origin: 50% 0;
    animation: cozinhaLanterna 4s ease-in-out infinite;
}

@keyframes cozinhaLanterna {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* O balcão de madeira onde ficam o pratão e o fogão */
.cozinha-banco {
    padding: 10px 8px 6px;
    border-radius: 14px;
    background-color: #8b5a3c;
    background-image: linear-gradient(#a06a47 0 8px, transparent 8px);
    box-shadow: 0 4px 0 #5e3b26;
}

/* O fogão e o wok em cima dele */
.cozinha-wok {
    position: relative;
    width: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cozinha-panela {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-bottom: -16px;
    transform-origin: 50% 80%;
}

.cozinha-fogao {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

/* Só o wok balança quando um ingrediente cai dentro */
.cozinha-wok.sfrigola img {
    animation: none;
}

.cozinha-wok.sfrigola .cozinha-panela {
    animation: cozinhaSacode 0.35s ease-in-out 3;
}

/* O fogo vivo: cada chama treme no seu ritmo */
.cozinha-chama {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: cozinhaChama 0.6s ease-in-out infinite alternate;
}

.cozinha-chama:nth-child(2) { animation-duration: 0.45s; animation-delay: 0.1s; }
.cozinha-chama:nth-child(3) { animation-duration: 0.7s; animation-delay: 0.2s; }
.cozinha-chama:nth-child(4) { animation-duration: 0.5s; animation-delay: 0.05s; }
.cozinha-chama:nth-child(5) { animation-duration: 0.65s; animation-delay: 0.15s; }

@keyframes cozinhaChama {
    from { transform: scaleY(0.75) scaleX(1.05); opacity: 0.85; }
    to { transform: scaleY(1.15) scaleX(0.92); opacity: 1; }
}

/* O vapor de sempre: fiapos que sobem devagar do wok */
.cozinha-fumaca {
    position: absolute;
    z-index: 3;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: cozinhaFumaca 3s ease-out infinite;
}

.cozinha-fumaca:nth-child(1) { margin-left: -24px; animation-delay: 0s; }
.cozinha-fumaca:nth-child(2) { margin-left: -4px; animation-delay: 1s; }
.cozinha-fumaca:nth-child(3) { margin-left: 16px; animation-delay: 2s; }

@keyframes cozinhaFumaca {
    0% { opacity: 0; transform: translateY(6px) scale(0.6); }
    25% { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-34px) translateX(6px) scale(1.6); }
}

.cozinha-vapor {
    z-index: 3;
    top: -4px;
}

.cozinha-zizi {
    z-index: 3;
}

.cozinha-seta {
    color: #fff8dc;
}

/* O cartão da tradução: papel creme com a borda dourada */
.cozinha-cartao {
    width: 100%;
    padding: 16px 18px 12px;
    border: 2px solid #e1bc61;
    border-radius: 16px;
    background-color: #fff8dc;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.cozinha-cartao .cozinha-traducao {
    max-width: none;
    color: #2b2b2b;
    font-size: 21px;
}

.cozinha-pontos {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed #d8c58f;
    color: #a3812f;
    font-size: 17px;
    font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
    .cozinha-chama,
    .cozinha-fumaca,
    .cozinha-lanterna {
        animation: none;
    }
}

/* A cozinha também começa abaixo da barra fixa de 小枣 */
#tela-cozinha {
    padding-top: calc(var(--altura-barra-lessi) - 4px);
}

/* Na ricetta, os passos feitos mostram os caracteres escolhidos */
.cozinha-passo-escolha {
    font-family: "Noto Sans SC", "PingFang SC", sans-serif;
    font-size: 17px;
    line-height: 1.9;
}

/* Os cinco passos da ricetta numa linha só, também com os caracteres escolhidos */
.cozinha-receita {
    flex-wrap: nowrap;
    gap: 4px;
}

.cozinha-passo {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 7px;
    font-size: 13px;
    white-space: nowrap;
}

.cozinha-passo-escolha {
    font-size: 15px;
}

/* 17/10: a cozinha ocupa toda a largura do celular, para os caracteres
   ficarem maiores (quem enxerga pouco agradece); a mesa cresce com o espaço livre */
#tela-cozinha {
    margin-top: -16px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 4px;
    padding-right: 4px;
}

.cozinha-comida {
    width: 84%;
    height: 84%;
}

.cozinha-banco {
    margin-left: 4px;
    margin-right: 4px;
}