/* ==========================================================================
   O OUTRO LADO DA PORTA — estilo.css

   Quadro de HQ em cima, falas embaixo. O quadro assume a proporção do
   recorte e fica centrado: é assim que um close sai da mesma arte do plano
   geral, sem gerar imagem nova.

   Nas telas de arrastar, carta grande e espaço entre as coisas. Uma criança
   de 11 anos precisa reconhecer a figura e acertar o alvo com o dedo; carta
   pequena e tudo encostado transforma a tarefa cognitiva em tarefa motora.

   Nada fica vermelho por erro. O vermelho aqui é da porta.
   ========================================================================== */

:root {
    --fundo: #0a0a0c;
    --fundo-painel: #121216;
    --fundo-carta: #1a1a20;
    --borda: #2c2c34;
    --borda-clara: #45454f;
    --texto: #ded9cf;
    --texto-fraco: #8d8880;
    --vermelho: #b3121f;
    --vermelho-claro: #e0303c;
    --teal: #3c7f7a;
    --teal-claro: #5aa9a2;
    --ambar: #e8a33d;

    --palco-max: 1240px;
    --carta-pessoa: 152px;
    --carta-larga: 224px;
    --carta-cena: 208px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    height: 100%;
    background: var(--fundo);
    color: var(--texto);
    font-family: 'Garet', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

body { overflow: hidden; }

button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { user-select: none; -webkit-user-drag: none; }

/* `hidden` perde para qualquer classe que defina display — e o selo de
   gravação, que é inline-flex, aparecia antes de a gravação começar */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- telas */

.tela {
    display: none;
    position: absolute; inset: 0;
    flex-direction: column;
}
.tela.ativa { display: flex; }

/* ------------------------------------------------------------ carregando */

.carregando { margin: auto; text-align: center; color: var(--texto-fraco); }
.carregando p { letter-spacing: .12em; text-transform: lowercase; font-size: 1rem; }
.barra-carga {
    width: 260px; height: 3px; background: var(--borda);
    margin: 18px auto 0; overflow: hidden;
}
.barra-carga i { display: block; height: 100%; width: 0; background: var(--vermelho); transition: width .25s; }

/* ------------------------------------------------------------------ capa */

.capa {
    position: absolute; inset: 0;
    background: #000 center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.capa::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,.9) 78%);
}
/* sem o width:100% a pergunta longa empurra a caixa até os 900px e vaza
   da tela em painéis estreitos */
.capa-conteudo {
    position: relative; z-index: 2; text-align: center;
    padding: 0 24px; width: 100%; max-width: 900px;
}
.capa-conteudo .marca {
    color: var(--vermelho-claro);
    letter-spacing: .34em; text-transform: uppercase;
    font-size: .72rem; margin: 0 0 1.6em;
    text-shadow: 0 0 20px rgba(179,18,31,.7);
}
.capa-conteudo h1 {
    font-size: clamp(1.7rem, 4.6vw, 3.2rem);
    line-height: 1.22; letter-spacing: .01em;
    margin: 0 0 1.5em;
    color: #ece6da;
    text-shadow: 0 0 26px rgba(179,18,31,.5), 0 0 70px rgba(179,18,31,.28);
}

/* --------------------------------------------------------------- o palco */

.palco {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 18px 18px 6px;
    position: relative;
}

.quadro {
    position: relative; overflow: hidden;
    max-width: min(100%, var(--palco-max));
    max-height: 100%;
    background: #000;
    border: 1px solid var(--borda);
    box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
.quadro img { position: absolute; display: block; transition: opacity .28s; }
.quadro.preto { width: min(100%, var(--palco-max)); aspect-ratio: 16/9; background: #000; }

/* efeitos de quadro ---------------------------------------------------- */

.quadro.pisca img { animation: pisca 1.5s steps(1) infinite; }
@keyframes pisca {
    0%, 42%, 52%, 72%, 82%, 100% { filter: none; }
    46%, 76% { filter: brightness(.18); }
}

.quadro.tremor { animation: tremor .5s ease-in-out 3; }
@keyframes tremor {
    0%, 100% { transform: translate(0,0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, -2px); }
}

.quadro.falha img { animation: falha 2.4s steps(3) infinite; }
@keyframes falha {
    0%, 88%, 100% { opacity: 1; transform: translateX(0); filter: none; }
    90% { opacity: .55; transform: translateX(-5px); filter: hue-rotate(35deg) contrast(1.4); }
    93% { opacity: .9; transform: translateX(4px); }
    96% { opacity: .4; transform: translateX(-2px); filter: saturate(.2); }
}
.quadro.falha::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
}

.quadro.sombra::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 70% 45%, rgba(0,0,0,.85) 0%, transparent 55%);
    animation: aproxima 3.4s ease-in-out infinite alternate;
}
@keyframes aproxima { from { opacity: .35; } to { opacity: .95; } }

.quadro.feixe::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: conic-gradient(from 200deg at 50% 100%, transparent 0deg, rgba(255,240,200,.16) 12deg, transparent 26deg);
}

.quadro.vecna-ao-fundo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 62% 40%, rgba(120,20,30,.34) 0%, transparent 58%);
    animation: pulsa 3s ease-in-out infinite alternate;
}
@keyframes pulsa { from { opacity: .3; } to { opacity: .9; } }

/* marcadores do mapa --------------------------------------------------- */

.marcador {
    position: absolute; width: 12%; max-width: 82px;
    transform: translate(-50%, -50%);
    text-align: center; pointer-events: none;
}
.marcador i {
    display: block; width: 100%; aspect-ratio: 1;
    position: relative; overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(232,226,214,.85);
    background: rgba(10,10,12,.7);
    box-shadow: 0 0 16px rgba(0,0,0,.8);
}
.marcador i img { position: absolute; display: block; }
.marcador span {
    display: block; margin-top: 5px;
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: #e8e2d6; text-shadow: 0 1px 6px #000;
}
.marcador.saiu i { border-color: var(--vermelho-claro); opacity: .45; }
.marcador.saiu { animation: saiu 1.4s ease-out forwards; }
@keyframes saiu { to { transform: translate(-50%, -50%) translateX(30%); opacity: .3; } }

/* ------------------------------------------------------------- as falas */

.falas {
    flex: 0 0 auto; max-height: 42vh; overflow-y: auto;
    padding: 16px 20px 0;
    width: 100%; max-width: var(--palco-max); margin: 0 auto;
}
.fala {
    margin: 0 0 12px; opacity: .42; transition: opacity .3s;
    line-height: 1.5; font-size: clamp(1rem, 1.55vw, 1.22rem);
}
.fala.atual, .fala.vista { opacity: 1; }
.fala .quem {
    display: inline-block; font-weight: 700; letter-spacing: .12em;
    font-size: .74em; margin-right: .7em; vertical-align: .08em;
}
.fala.narrador { color: var(--texto); }
.fala.personagem { color: #efe9dd; }
.fala.atual .quem { text-shadow: 0 0 14px currentColor; }

/* ------------------------------------------------------------- o rodapé */

.rodape {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 20px 16px;
    width: 100%; max-width: var(--palco-max); margin: 0 auto;
}
.rodape .espaco { flex: 1; }

.bt {
    background: transparent;
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 12px 24px;
    font-size: .94rem; letter-spacing: .06em;
    transition: border-color .18s, background .18s, color .18s;
}
.bt:hover:not(:disabled) { border-color: var(--texto-fraco); background: rgba(255,255,255,.04); }

.bt.primario {
    border-color: var(--vermelho);
    background: rgba(179,18,31,.16);
    color: #f0e8e0;
}
.bt.primario:hover:not(:disabled) { background: rgba(179,18,31,.34); border-color: var(--vermelho-claro); }

.bt.gigante { padding: 16px 44px; font-size: 1.05rem; letter-spacing: .14em; }

.bt.discreto {
    border-color: transparent; color: var(--texto-fraco);
    font-size: .84rem; padding: 10px 12px;
}
.bt.discreto:hover:not(:disabled) { color: var(--texto); background: transparent; }
.bt.discreto.ligado { color: var(--ambar); }
.bt:disabled { opacity: .3; }

/* ------------------------------------------------- telas de ação: escolha */

.acao { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.acao-fundo { position: absolute; inset: 0; background: #000 center/cover no-repeat; opacity: .34; }
.acao-fundo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,12,.5), rgba(10,10,12,.96));
}
.acao-conteudo {
    position: relative; z-index: 2; margin: auto;
    width: 100%; max-width: 820px; padding: 28px 22px;
    text-align: center;
}

/* o que acabou de acontecer: a tela de ação é continuação, não recomeço */
.retomada {
    margin: 0 auto 1.6em;
    max-width: 620px; padding: 12px 18px;
    border-left: 2px solid var(--borda-clara);
    background: rgba(255,255,255,.03);
    text-align: left; font-size: .94rem; line-height: 1.45;
    color: var(--texto-fraco);
}
.retomada .quem {
    font-weight: 700; letter-spacing: .12em; font-size: .78em; margin-right: .6em;
}

.acao-enunciado {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1.45; margin: 0 0 1.8em;
}

.opcoes { display: flex; flex-direction: column; gap: 14px; }
.opcao {
    background: rgba(26,26,32,.85);
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 18px 24px;
    font-size: 1.04rem; text-align: left; line-height: 1.35;
    transition: border-color .18s, background .18s, transform .12s;
}
.opcao:hover { border-color: var(--teal); background: rgba(40,44,48,.92); transform: translateX(3px); }

/* a dica: um personagem fala, não é aviso do programa */
.dica {
    margin-top: 22px; padding: 15px 20px;
    border-left: 2px solid var(--ambar);
    background: rgba(232,163,61,.07);
    text-align: left; font-size: 1rem; line-height: 1.45;
}
.dica .quem { font-weight: 700; letter-spacing: .12em; font-size: .78em; margin-right: .6em; }

/* a resposta do personagem a uma tentativa que não fechou. Mesma caixa da
   dica, outra cor: é reação dentro da história, não ajuda oferecida. */
.dica.resposta { border-left-color: var(--teal); background: rgba(60,127,122,.09); }

/* --------------------------------------------------- telas de arrastar */

.mesa {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 22px 22px 8px;
    width: 100%; max-width: 1280px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 26px;
}
.mesa-cab { text-align: center; }
.mesa-cab h2 {
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    line-height: 1.35; margin: 0; font-weight: 400;
}
.mesa-instrucao {
    margin: .7em auto 0; max-width: 680px;
    color: var(--texto-fraco); font-size: .98rem; line-height: 1.45;
}

.faixa { display: flex; flex-direction: column; gap: 10px; }
.trilha-rotulo {
    text-align: center; color: var(--texto-fraco);
    font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
}

/* Zona de soltar. Sempre visível, e quando vazia diz o que fazer — uma
   faixa vazia sem nada dentro parece um pedaço quebrado da tela. */
.zona {
    display: flex; gap: 16px; flex-wrap: wrap;
    justify-content: center; align-items: center;
    border: 1px dashed var(--borda);
    padding: 14px; min-height: 96px;
    transition: border-color .16s, background .16s;
}
.zona.sobre { border-color: var(--teal-claro); border-style: solid; background: rgba(60,127,122,.12); }
.zona.vazia::before {
    content: attr(data-vazio);
    color: var(--texto-fraco); font-size: .82rem; letter-spacing: .06em;
    opacity: .6;
}
.zona.trilha { min-height: 210px; }
.zona.fita { min-height: 160px; }
.zona.encaixe { min-height: 92px; padding: 10px; border-color: transparent; background: rgba(0,0,0,.25); }
.zona.encaixe.vazia { border-color: var(--borda); }

/* carta ---------------------------------------------------------------- */

.carta {
    width: var(--carta-pessoa);
    background: var(--fundo-carta);
    border: 1px solid var(--borda);
    cursor: grab; user-select: none; touch-action: none;
    transition: border-color .16s, transform .12s, box-shadow .16s;
    flex: 0 0 auto;
}
.carta:hover { border-color: var(--teal); transform: translateY(-2px); }
.carta.arrastando { opacity: .35; }
.carta.parada { cursor: default; }
.carta.parada:hover { border-color: var(--borda); transform: none; }
.carta.fantasma {
    position: fixed; z-index: 99; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-3deg);
    box-shadow: 0 16px 40px rgba(0,0,0,.8);
    border-color: var(--teal); opacity: .95;
}
.carta .retrato {
    position: relative; width: 100%; overflow: hidden; background: #000;
}
.carta .retrato img { position: absolute; display: block; }

/* O corredor do Mundo Invertido e a estação à noite viram um retângulo
   preto num cartão de 200px. Como aqui ele precisa RECONHECER a cena, o
   recorte é clareado. Cartão pronto já vem claro e fica como está. */
.fig-recorte img { filter: brightness(1.42) contrast(1.05) saturate(1.08); }
.carta .rotulo {
    padding: 9px 8px; text-align: center;
    font-size: .88rem; line-height: 1.25;
    color: var(--texto); border-top: 1px solid var(--borda);
}
.carta.pista { width: var(--carta-larga); }
.carta.cena { width: var(--carta-cena); position: relative; }

/* dentro de um encaixe a carta fica menor, mas ainda reconhecível */
.encaixe .carta { width: 104px; }
.encaixe .carta.pista { width: 140px; }
.encaixe .carta.cena { width: 128px; }
.encaixe .carta .rotulo { font-size: .74rem; padding: 6px 4px; }

.carta .ordem {
    position: absolute; left: 6px; top: 6px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(10,10,12,.88); border: 1px solid var(--teal-claro);
    color: var(--texto); font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
}

/* alvo (pessoa que recebe as pistas, ou função do plano) ---------------- */

.alvos { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }

/* O cruzamento do bloco 5: três POSTOS fixos — esquerda, o meio, direita —
   e não uma lista de tarefas. A linha atrás é o corredor, e ela existe
   para dizer que cada um fica parado no seu lugar. */
.alvos.postos { position: relative; align-items: stretch; flex-wrap: nowrap; }
.alvos.postos::before {
    content: ''; position: absolute; left: 4%; right: 4%; top: 50%;
    height: 2px; background: repeating-linear-gradient(90deg,
        var(--borda) 0 14px, transparent 14px 26px);
    z-index: 0;
}
.alvos.postos .alvo { position: relative; z-index: 1; }
.alvos.postos .alvo::after {
    content: 'POSTO';
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: var(--fundo);
    color: var(--texto-fraco);
    font-size: .58rem; letter-spacing: .22em; padding: 0 8px;
}
.alvos.postos .alvo[data-funcao="procurar"]::after { content: 'NO MEIO'; }

@media (max-width: 900px) {
    .alvos.postos { flex-wrap: wrap; }
    .alvos.postos::before { display: none; }
}

.alvo {
    width: 252px;
    background: rgba(18,18,22,.8);
    border: 1px solid var(--borda);
    padding: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.alvo-fig {
    position: relative; width: 100%; overflow: hidden;
    background: #000; border: 1px solid var(--borda);
}
.alvo-fig img { position: absolute; display: block; }
.alvo.pessoa .alvo-fig { width: 132px; }
.alvo .alvo-nome {
    font-size: .96rem; line-height: 1.3; text-align: center; color: var(--texto);
}

/* a regra do grupo, no bloco 5 */
.regra-opcoes { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.regra-opcao {
    width: 268px;
    background: rgba(26,26,32,.85);
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 12px; font-size: .95rem; line-height: 1.35;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
    text-align: center;
    transition: border-color .16s, background .16s;
}
.regra-opcao:hover { border-color: var(--teal); }
.regra-opcao.escolhida { border-color: var(--teal-claro); background: rgba(60,127,122,.18); }
.regra-fig { position: relative; width: 100%; overflow: hidden; background: #000; }
.regra-fig img { position: absolute; display: block; }

/* ------------------------------------------------------- caderno de pistas */

.caderno {
    margin: auto; width: 100%; max-width: 640px;
    background: rgba(18,18,22,.94);
    border: 1px solid var(--borda); border-left: 3px solid var(--teal);
    padding: 28px 32px; position: relative; z-index: 2;
}
.caderno h2 {
    font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--texto-fraco); font-weight: 400; margin: 0 0 18px;
}
.caderno ul { margin: 0; padding: 0; }
.caderno li {
    list-style: none; padding: 11px 0 11px 22px; position: relative;
    line-height: 1.45; opacity: 0; transform: translateY(6px);
    animation: entra .5s ease-out forwards;
}
.caderno li::before { content: '—'; position: absolute; left: 0; color: var(--teal); }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------ nome e mochila */

.campo-nome { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.campo-nome input {
    background: rgba(10,10,12,.8);
    border: 1px solid var(--borda); border-bottom-color: var(--vermelho);
    color: var(--texto); font-family: inherit; font-size: 1.15rem;
    padding: 14px 18px; width: min(340px, 74vw); text-align: center;
}
.campo-nome input:focus { outline: none; border-color: var(--teal); }

.itens { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; padding: 6px 18px 0; }
.item {
    width: 176px;
    background: var(--fundo-carta);
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 14px 14px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    transition: border-color .16s, transform .12s, background .16s;
}
.item:hover { border-color: var(--ambar); transform: translateY(-3px); background: #20202a; }
.item-fig { position: relative; width: 100%; overflow: hidden; background: #000; }
.item-fig img { position: absolute; display: block; }
.item .nome { font-size: .98rem; letter-spacing: .04em; }

/* ------------------------------------------- reconto 1 · gramática */

.grade-topicos {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.topico {
    background: rgba(18,18,22,.8);
    border: 1px solid var(--borda);
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.topico-cab { text-align: center; }
.topico-nome {
    font-size: .74rem; letter-spacing: .16em; color: var(--teal-claro);
}
.topico-pergunta {
    margin-top: 5px; font-size: .95rem; line-height: 1.3; color: var(--texto);
}

/* A reação não é uma cena: é o que eles sentiram. Aqui ele marca palavras,
   quantas quiser, e nenhuma é a certa. */
.palavras {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 12px 4px;
}
.palavra {
    background: rgba(26,26,32,.85);
    border: 1px solid var(--borda);
    color: var(--texto);
    padding: 9px 14px; font-size: .92rem;
    border-radius: 999px;
    transition: border-color .16s, background .16s, color .16s;
}
.palavra:hover { border-color: var(--teal); }
.palavra.escolhida {
    border-color: var(--teal-claro);
    background: rgba(60,127,122,.22);
    color: #eef3f2;
}

/* ------------------------------------------- reconto 3 · contar */

.fita-parada {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    padding: 12px; border: 1px solid var(--borda); background: rgba(0,0,0,.3);
}
.fita-parada .carta.cena { width: 150px; }

.gravador {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 8px 0 18px;
}
.gravador audio { width: min(460px, 90vw); }

.selo-gravando {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--vermelho-claro); font-size: .95rem; letter-spacing: .1em;
}
.selo-gravando .ponto {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--vermelho-claro); animation: bate 1.1s ease-in-out infinite;
}
@keyframes bate { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

.aviso {
    max-width: 620px; text-align: center;
    color: var(--ambar); font-size: .94rem; line-height: 1.45;
    border-left: 2px solid var(--ambar); background: rgba(232,163,61,.07);
    padding: 12px 18px; margin: 0;
}

/* --------------------------------------------------------------- FIM */

.fim-tela { margin: auto; text-align: center; position: relative; z-index: 2; }
.fim-tela h1 {
    font-size: clamp(2.6rem, 9vw, 5.5rem);
    letter-spacing: .3em; margin: 0 0 1.2em;
    color: #e8e2d6; text-shadow: 0 0 30px rgba(179,18,31,.5);
    animation: entra 1.4s ease-out both;
}

/* ------------------------------------------------------------- o registro */

.registro {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 34px 22px;
    width: 100%; max-width: 940px; margin: 0 auto;
}
.registro h1 { font-size: 1.5rem; letter-spacing: .04em; margin: 0 0 6px; }
.registro .reg-titulo {
    font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--teal-claro); font-weight: 400; margin: 30px 0 10px;
}
.registro .sub { color: var(--texto-fraco); font-size: .88rem; line-height: 1.5; margin: 0 0 18px; }
.registro table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: .9rem; }
.registro th, .registro td {
    border-bottom: 1px solid var(--borda);
    padding: 10px 8px; text-align: left; vertical-align: top;
}
.registro th {
    color: var(--texto-fraco); font-weight: 400;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.registro .acoes-fim { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.botao-link {
    display: inline-block; text-decoration: none;
    border: 1px solid var(--borda); color: var(--texto);
    padding: 12px 24px; font-size: .94rem; letter-spacing: .06em;
}
.botao-link:hover { border-color: var(--texto-fraco); }
.status-banco { font-size: .9rem; color: var(--texto-fraco); margin-bottom: 8px; min-height: 1.2em; }
.status-banco.ok { color: var(--teal-claro); }
.status-banco.falhou { color: var(--ambar); }

/* ------------------------------------------------------------- responsivo */

@media (max-width: 900px) {
    :root { --carta-pessoa: 128px; --carta-larga: 190px; --carta-cena: 172px; }
    .alvo { width: 216px; }
    .regra-opcao { width: 232px; }
}

@media (max-width: 720px) {
    :root { --carta-pessoa: 110px; --carta-larga: 158px; --carta-cena: 148px; }
    .palco { padding: 10px 10px 4px; }
    .falas { max-height: 46vh; padding: 12px 14px 0; }
    .rodape { padding: 10px 14px 14px; gap: 8px; }
    .mesa { padding: 16px 14px 6px; gap: 20px; }
    .bt { padding: 11px 18px; font-size: .88rem; }
    .alvo { width: 172px; padding: 10px; }
    .alvo.pessoa .alvo-fig { width: 104px; }
    .regra-opcao { width: 200px; }
    .zona { gap: 10px; padding: 10px; }
    .zona.trilha { min-height: 170px; }
    .encaixe .carta { width: 82px; }
    .encaixe .carta.pista { width: 108px; }
    .encaixe .carta.cena { width: 104px; }
    .fita-parada .carta.cena { width: 112px; }
}

@media (max-height: 620px) {
    .falas { max-height: 34vh; }
}