/* ==================================================================
 * quest.css — o tema do modo Quest
 *
 * Paleta própria, escopada em `body[data-jogo="quest"]`, com prefixo
 * `--q-`. Mesmo mecanismo dos outros modos: sem prefixo distinto a
 * ordem das folhas passaria a decidir a aparência, e sem o escopo por
 * jogo as variáveis herdariam para a HOME.
 *
 * Quest é o salão da corte à noite: pedra azulada, luar entrando por uma
 * vidraça, ouro velho na moldura. Frio como o Coup, mas mais escuro e
 * mais azul — Coup é ardósia esverdeada de palácio italiano, Quest é
 * pedra de castelo sob a lua. O vermelho fica reservado a Mordred: um
 * acento que só aparece perto de Traidor, nunca como cor geral — mesmo
 * raciocínio de Salem reservar o vermelho para o que mata.
 *
 * Contrastes medidos sobre o fundo (#10131c): pergaminho 14,6:1,
 * pergaminho fraco 6,9:1, ouro 7,8:1. Branco sobre o botão de ouro
 * (#8a6a2c): 4,7:1.
 * ================================================================== */

body[data-jogo="quest"] {
  --q-fundo:#10131c;
  --q-painel:#171b28;
  --q-painel-2:#1f2536;
  --q-linha:#2b3348;
  --q-pergaminho:#e6e8f0;
  --q-pergaminho-fraco:#9aa2ba;
  --q-ouro:#c9a44c;
  --q-ouro-bt:#8a6a2c;
  --q-mordred:#a1465a;
  --q-bem:#5c7fa6;
  --q-fonte:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;

  background:var(--q-fundo);
  color:var(--q-pergaminho);
}

#tela-quest-setup, #tela-quest-revelacao, #tela-quest-rodada, #tela-quest-debate,
#tela-quest-cacada, #tela-quest-ultima-chance, #tela-quest-fim, #tela-quest-ref {
  background:var(--q-fundo);
  color:var(--q-pergaminho);
  font-family:var(--q-fonte);
}

/* O cabeçalho reaproveita a moldura dos outros jogos; aqui só a cor. */
#tela-quest-setup .s-head, #tela-quest-ref .s-head { border-bottom-color:var(--q-linha); }
body[data-jogo="quest"] .marca-nome { color:var(--q-pergaminho); letter-spacing:.02em; }
body[data-jogo="quest"] .marca-sub { color:var(--q-ouro); font-style:italic; letter-spacing:.06em; }
body[data-jogo="quest"] .marca-icone { border-radius:9px; box-shadow:none; }
body[data-jogo="quest"] .lbl { color:var(--q-pergaminho-fraco); }
body[data-jogo="quest"] .nota { color:var(--q-pergaminho-fraco); opacity:.75; }
body[data-jogo="quest"] .link { color:var(--q-ouro); }

.qs-desc { color:var(--q-pergaminho-fraco); font-size:13.5px; line-height:1.6; margin-bottom:14px; }

/* A nota de idioma emprestado — mesma peça de Salem: o app diz em que
   língua vai narrar antes de a mesa descobrir pelo áudio. */
.qs-emprestado {
  border-left:3px solid var(--q-ouro); padding:8px 12px; margin-bottom:16px;
  background:var(--q-painel); color:var(--q-pergaminho-fraco); font-size:12.5px; line-height:1.5;
}

body[data-jogo="quest"] .players button {
  background:var(--q-painel); border-color:var(--q-linha); color:var(--q-pergaminho-fraco);
}
body[data-jogo="quest"] .players button.on {
  background:var(--q-ouro-bt); border-color:var(--q-ouro); color:#fff;
}

/* ================= RADIOGRUPOS (tabuleiro 4, preparação) ================= */
.qs-radio { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.qs-opcao-radio {
  display:flex; align-items:center; gap:10px; text-align:left; padding:12px 14px;
  border-radius:10px; background:var(--q-painel); border:1px solid var(--q-linha);
  color:var(--q-pergaminho-fraco); font-size:13.5px;
}
.qs-opcao-radio.on { border-color:var(--q-ouro); color:var(--q-pergaminho); }
.qs-opcao-radio::before {
  content:''; flex:none; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--q-linha); box-sizing:border-box;
}
.qs-opcao-radio.on::before { border-color:var(--q-ouro); background:radial-gradient(var(--q-ouro) 40%, transparent 44%); }

/* ================= INTERRUPTORES (papéis desconhecidos, caçada) =================
   Botão de verdade com role=switch, não caixa de marcar: o estado
   precisa ser lido por leitor de tela, e são decisões tomadas antes de
   apertar o botão de começar, não no meio do jogo. */
.qs-opcao {
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  margin-bottom:14px; padding:13px 15px; border-radius:10px;
  background:var(--q-painel); border:1px solid var(--q-linha); color:var(--q-pergaminho);
}
.qs-opcao-txt { flex:1; min-width:0; }
.qs-opcao-txt b { display:block; font-size:13.5px; font-weight:600; }
.qs-opcao-txt span { display:block; margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--q-pergaminho-fraco); }
.qs-opcao-luz {
  flex:none; width:44px; height:26px; border-radius:13px;
  background:var(--q-painel-2); border:1px solid var(--q-linha); position:relative;
}
.qs-opcao-luz::after {
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--q-pergaminho-fraco); transition:transform .15s, background .15s;
}
.qs-opcao.on .qs-opcao-luz { background:var(--q-ouro-bt); border-color:var(--q-ouro); }
.qs-opcao.on .qs-opcao-luz::after { transform:translateX(18px); background:#fff; }

/* ================= COMPOSIÇÃO (prévia no setup) ================= */
.qs-comp { margin-bottom:16px; }
.qs-comp-titulo { font-size:13.5px; font-weight:600; margin-bottom:10px; }
.qs-times { display:flex; gap:10px; margin-bottom:16px; }
.qs-time {
  flex:1; text-align:center; padding:12px 6px; border-radius:10px;
  background:var(--q-painel); border:1px solid var(--q-linha);
}
.qs-time b { display:block; font-size:24px; line-height:1.1; }
.qs-time span { display:block; margin-top:4px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--q-pergaminho-fraco); }
.qs-time-bem b { color:var(--q-bem); }
.qs-time-mal b { color:var(--q-mordred); }

.qs-missoes-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--q-pergaminho-fraco); margin-bottom:8px; }
.qs-missoes { display:flex; gap:6px; margin-bottom:14px; list-style:none; padding:0; }
.qs-missoes li {
  flex:1; text-align:center; padding:8px 4px; border-radius:8px;
  background:var(--q-painel); border:1px solid var(--q-linha); font-size:12px;
}
.qs-missoes li i { display:block; font-style:normal; font-size:9.5px; color:var(--q-pergaminho-fraco); margin-bottom:2px; }
.qs-missoes li b { font-size:16px; }
.qs-missoes li.dupla { border-color:var(--q-mordred); }
.qs-missoes li.dupla span { display:block; font-size:8px; color:var(--q-mordred); margin-top:2px; line-height:1.2; }

.qs-especiais { list-style:none; padding:0; font-size:12px; color:var(--q-pergaminho-fraco); line-height:1.9; }
.qs-especiais li[data-lado="mal"] { color:var(--q-mordred); }
.qs-especiais li b { color:var(--q-pergaminho); }

/* ================= LIVRE (steppers) ================= */
.qs-steppers { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-height:280px; overflow-y:auto; }
.qs-stepper {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-radius:8px; background:var(--q-painel); border:1px solid var(--q-linha);
}
.qs-stepper[data-lado="mal"] .qs-stepper-nome { color:var(--q-mordred); }
.qs-stepper-nome { font-size:12.5px; }
.qs-stepper-ctrl { display:flex; align-items:center; gap:10px; flex:none; }
.qs-stepper-ctrl button {
  width:26px; height:26px; border-radius:7px; background:var(--q-painel-2);
  border:1px solid var(--q-linha); color:var(--q-pergaminho); font-size:14px; line-height:1;
}
.qs-stepper-ctrl button:disabled { opacity:.35; }
.qs-stepper-ctrl b { min-width:1.2em; text-align:center; font-variant-numeric:tabular-nums; }

.qs-bt {
  width:100%; margin-bottom:10px; padding:15px; border-radius:10px; font-size:14.5px;
  background:var(--q-painel); border:1px solid var(--q-linha); color:var(--q-pergaminho);
}
body[data-jogo="quest"] .prim.qs-bt {
  background:var(--q-ouro-bt); border-color:var(--q-ouro); color:#fff; font-size:15.5px;
}
body[data-jogo="quest"] .prim.qs-bt:disabled { opacity:.4; }
.qs-linha-link { margin:14px 0 12px; }

/* ================= REVELAÇÃO =================
   Olhos fechados: tela escura, uma fala grande, e só o encerrar. */
.qs-rev-core {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; min-height:0; overflow-y:auto;
}
.qs-rev-fala { font-size:22px; line-height:1.45; max-width:22em; color:var(--q-pergaminho); }
.qs-rev-passo { margin-top:20px; font-size:11px; color:var(--q-pergaminho-fraco);
  letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.qs-rev-foot { flex:none; padding:14px 20px calc(18px + var(--base)); text-align:center; }
.qs-rev-foot button { color:var(--q-pergaminho-fraco); font-size:12.5px; background:none; border:0; }

/* ================= RODADA / DEBATE / CAÇADA / ÚLTIMA CHANCE =================
   As quatro telas do ciclo pós-revelação partilham a mesma moldura:
   topo com "encerrar" + título, núcleo central, rodapé de ações. */
.qs-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 0; }
.qs-missao { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--q-ouro); }
.qs-abort { background:none; border:0; color:var(--q-pergaminho-fraco); font-size:12px; }

.qs-core { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px; gap:6px; min-height:0; overflow-y:auto; }
.qs-equipe { font:600 96px/1 Georgia,serif; color:var(--q-pergaminho); }
.qs-legenda { font-size:13.5px; color:var(--q-pergaminho-fraco); }
.qs-aviso { font-size:12px; color:var(--q-ouro); margin-top:14px; max-width:30ch; line-height:1.5; }

.qs-foot { flex:none; padding:12px 20px calc(18px + var(--base)); display:flex; flex-direction:column; gap:10px; }
.qs-foot .prim, .qs-foot > button.prim {
  width:100%; padding:16px; border:0; border-radius:10px; background:var(--q-ouro-bt); color:#fff;
  font:600 15px/1 inherit; letter-spacing:.4px;
}
.qs-lembrete-inline { font-size:12px; color:var(--q-pergaminho-fraco); text-align:center; margin-bottom:4px; }

.qs-numeros { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.qs-num {
  width:44px; height:44px; border-radius:10px; background:var(--q-painel);
  border:1px solid var(--q-linha); color:var(--q-pergaminho); font:600 16px/1 inherit;
}
.qs-num:active { background:var(--q-ouro-bt); border-color:var(--q-ouro); color:#fff; }

/* Debate */
.qs-debate-n { font:600 44px/1 Georgia,serif; color:var(--q-ouro); font-variant-numeric:tabular-nums; margin-bottom:14px; }
.qs-barra { width:min(100%, 280px); height:6px; border-radius:3px; background:var(--q-painel-2); overflow:hidden; margin-bottom:16px; }
.qs-barra i { display:block; height:100%; background:var(--q-ouro); transition:width .25s linear; }

/* Caçada / Última Chance: dois botões, um neutro e um de acento. */
.qs-lembretes { list-style:none; padding:0; font-size:13px; color:var(--q-pergaminho-fraco);
  line-height:1.7; max-width:30ch; text-align:left; }
.qs-lembretes li::before { content:'— '; }
.qs-foot .qs-sim, .qs-foot .qs-nao {
  width:100%; padding:15px; border-radius:10px; font-size:14px; border:1px solid var(--q-linha);
}
.qs-foot .qs-sim { background:var(--q-ouro-bt); border-color:var(--q-ouro); color:#fff; }
.qs-foot .qs-nao { background:none; color:var(--q-pergaminho-fraco); }

/* ================= FIM =================
   Reaproveita `.res`/`.porque`/`.botoes`/`.win-*` — o mesmo bloco da
   Resistência e do Lobisomem — só trocando o acento do botão principal. */
body[data-jogo="quest"] .res .porque { color:var(--q-pergaminho); }
body[data-jogo="quest"] .res .botoes button { border-color:var(--q-linha); color:var(--q-pergaminho-fraco); }
body[data-jogo="quest"] .res .botoes .prim { background:var(--q-ouro-bt); border-color:var(--q-ouro); color:#fff; }

.qs-fim-placar { display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
.qs-fim-missao {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; border:1px solid var(--q-linha); color:var(--q-pergaminho-fraco);
}
.qs-fim-missao.sucesso { border-color:var(--q-bem); color:var(--q-bem); }
.qs-fim-missao.fracasso { border-color:var(--q-mordred); color:var(--q-mordred); }
.qs-fim-aviso {
  font-size:11.5px; color:var(--q-pergaminho-fraco); line-height:1.5; max-width:32ch;
  margin:0 auto 16px; border-left:2px solid var(--q-mordred); padding-left:10px; text-align:left;
}

/* ================= REFERÊNCIA ================= */
.qs-lista {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px calc(22px + var(--base));
  display:flex; flex-direction:column; gap:14px;
}
.qs-ficha {
  display:flex; gap:14px; padding:12px; border-radius:12px;
  background:var(--q-painel); border:1px solid var(--q-linha);
}
.qs-ficha[data-lado="mal"] { border-left:3px solid var(--q-mordred); }
.qs-ficha[data-lado="bem"] { border-left:3px solid var(--q-bem); }
.qs-ficha img, .qs-sem-arte {
  flex:none; width:76px; height:116px; object-fit:cover; border-radius:8px;
  border:1px solid var(--q-linha); background:var(--q-painel-2);
}
.qs-ficha-txt { flex:1; min-width:0; }
.qs-ficha-txt h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.qs-ficha-lado { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--q-ouro); margin-bottom:7px; }
.qs-ficha[data-lado="mal"] .qs-ficha-lado { color:var(--q-mordred); }
.qs-ficha-hab { font-size:12.5px; line-height:1.5; color:var(--q-pergaminho); }