/* Interface de Vésper. Tudo em pixel: a fonte é a mesma da tela de início
   (gerada por ferramentas/gerar-fonte.mjs) e só fica nítida em tamanhos
   múltiplos de 12 px — por isso tudo é 24, 36 ou 48. Além dela, cantos em degrau, bordas
   de latão sobre madeira escura e nenhuma sombra borrada. As cores vêm da
   paleta dos sprites (marrons, vinho e cinza) com o âmbar das lamparinas. */

@font-face { font-family: 'Vesper'; font-weight: 400; src: url('assets/fontes/Vesper-Regular.ttf'); font-display: block; }
@font-face { font-family: 'Vesper'; font-weight: 700; src: url('assets/fontes/Vesper-Bold.ttf'); font-display: block; }

:root {
  --noite: #06070c;
  --breu: #0c090f;
  --madeira: #1f1820;
  --madeira-clara: #2e2430;
  --latao: #c9a86a;
  --latao-escuro: #6e5636;
  --vinho: #7a2f3a;
  --texto: #ecdfc6;
  --fraco: #9d8f7c;
  --ambar: #f0bd58;
  --perigo: #d8483e;
  --ok: #9fd08a;
  --papel: #efe6cf;
  --tinta: #2c2a3a;
  --texto-pixel: 'Vesper', 'Courier New', monospace;
  --titulo-pixel: 'Vesper', 'Courier New', monospace;
  --mao: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  --serifa: Georgia, 'Times New Roman', serif;
  /* Cantos em degrau de 4 px: o recorte que dá cara de pixel às molduras. */
  --degrau: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--texto);
  font-family: var(--texto-pixel);
  font-size: 24px;
  line-height: 1.25;
  -webkit-font-smoothing: none;
  font-smooth: never;
  /* Sem ligaduras: em fonte bitmap, "fi" colado vira um borrão. */
  font-variant-ligatures: none;
}

#palco {
  position: absolute;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  background: var(--noite);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#tela { display: block; width: 100%; height: 100%; }
canvas { image-rendering: pixelated; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-weight: normal; margin: 0; }
h2 { font: bold 36px/1.25 var(--titulo-pixel); color: var(--ambar); margin-bottom: 10px; text-shadow: 3px 3px 0 #000; }
h3 { margin: 18px 0 8px; font: bold 24px/1.25 var(--titulo-pixel); color: var(--latao); text-transform: uppercase; letter-spacing: 1px; }
h4 { margin: 14px 0 6px; font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar); }
p { margin: 8px 0; line-height: 1.25; }
.sub { color: var(--fraco); font-size: 24px; margin: 0 0 10px; }
.rodape { margin-top: 14px; color: var(--fraco); font-size: 24px; }
.vazio { color: var(--fraco); }
.linha { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.icone { flex: none; vertical-align: middle; }

/* Moldura: fio escuro por fora, latão por dentro, madeira no meio. */
.moldura, #caixa, #objetivo, #acao, .mensagem {
  background: var(--madeira);
  border: 4px solid var(--breu);
  box-shadow: inset 0 0 0 4px var(--latao-escuro), inset 0 0 0 6px var(--latao), inset 0 0 0 10px var(--madeira);
  clip-path: var(--degrau);
}

/* Botão de pixel: relevo de dois tons que afunda ao clicar. */
button {
  font: bold 24px/1.25 var(--titulo-pixel);
  color: var(--texto);
  background: #3d2f42;
  border: none;
  border-radius: 0;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: inset -4px -4px 0 #231a27, inset 4px 4px 0 #5d4a63;
}
button:hover:not(:disabled) { color: var(--ambar); background: #49384f; }
button:active:not(:disabled) { box-shadow: inset 4px 4px 0 #231a27, inset -4px -4px 0 #5d4a63; }
button:disabled { opacity: 0.35; cursor: default; }
button.principal { background: #7a5a22; box-shadow: inset -4px -4px 0 #4a3512, inset 4px 4px 0 #b08a3c; color: #fff3d6; }

/* ---- HUD ---------------------------------------------------------------- */

#hud { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.2s steps(3); }
#hud.apagado { opacity: 0.25; }
#hud .canto { position: absolute; left: 18px; top: 14px; display: flex; flex-direction: column; gap: 8px; }
#vida { display: flex; gap: 4px; filter: drop-shadow(3px 3px 0 #000); }
#municao { display: flex; gap: 2px; filter: drop-shadow(2px 2px 0 #000); }
#municao:empty { display: none; }
#curativos { display: flex; align-items: center; gap: 6px; color: #e8dcc4; font: bold 24px/1 var(--titulo-pixel); text-shadow: 2px 2px 0 #000; filter: drop-shadow(2px 2px 0 #000); }
#curativos:empty { display: none; }
#local {
  align-self: flex-start; padding: 5px 12px 4px; font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar);
  background: var(--breu); border-left: 4px solid var(--latao);
}
#objetivo { position: absolute; right: 18px; top: 14px; width: 330px; padding: 16px 18px 14px; }
#objetivo span { display: block; color: var(--latao); font: bold 24px/1.25 var(--titulo-pixel); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
#objetivo p { margin: 0; font-size: 24px; line-height: 1.25; }
#teclas { position: absolute; right: 20px; bottom: 12px; color: rgba(236, 223, 198, 0.5); font-size: 24px; text-shadow: 2px 2px 0 #000; }

#acao {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  padding: 14px 20px 12px; font-size: 24px; white-space: nowrap; pointer-events: none;
}
#acao b { color: var(--ambar); font: bold 24px/1.25 var(--titulo-pixel); margin-right: 4px; }

#mensagens {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  width: 760px; display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.mensagem { display: flex; gap: 12px; align-items: center; padding: 14px 18px 12px; font-size: 24px; line-height: 1.25; animation: surgir 0.2s steps(3); }
.mensagem.pista { color: #d6ecc8; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }

#cartao {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; background: linear-gradient(transparent 30%, rgba(6, 7, 12, 0.7) 45%, rgba(6, 7, 12, 0.7) 55%, transparent 70%);
}
#cartao.animar { animation: cartao 3.6s steps(12); }
#cartao .numero { font: bold 24px/1.25 var(--titulo-pixel); letter-spacing: 6px; text-transform: uppercase; color: var(--ambar); }
#cartao .titulo { font: bold 48px/1.25 var(--titulo-pixel); margin-top: 16px; text-shadow: 4px 4px 0 #000; }
@keyframes cartao { 0%, 100% { opacity: 0; } 18%, 78% { opacity: 1; } }

/* ---- Diálogo -------------------------------------------------------------- */

#dialogo { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(4, 5, 10, 0.75) 80%); }
#dialogo.entrando .caixa-dialogo { animation: surgir 0.2s steps(3); }
.caixa-dialogo {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 1000px; min-height: 232px; padding: 20px; display: flex; gap: 20px; cursor: pointer;
}
.caixa-dialogo.protagonista { flex-direction: row-reverse; }
.retrato-quadro {
  flex: none; width: 200px; height: 200px; padding: 4px; background: #2b2230;
  box-shadow: inset 0 0 0 4px var(--latao); align-self: flex-start;
}
.retrato-quadro canvas { display: block; width: 192px; height: 192px; }
.caixa-dialogo.protagonista .retrato-quadro { background: #33262a; }
.caixa-dialogo.protagonista .retrato-quadro canvas { transform: scaleX(-1); }
.caixa-dialogo .conteudo { flex: 1; min-width: 0; }
.caixa-dialogo .cabecalho { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 4px solid var(--latao-escuro); }
.caixa-dialogo.protagonista .cabecalho { flex-direction: row-reverse; }
.caixa-dialogo .nome { font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar); }
.caixa-dialogo.protagonista .nome { color: #e08a7a; }
.caixa-dialogo .papel-pessoa { font-size: 24px; color: var(--fraco); }
.caixa-dialogo .fala { margin: 0; font-size: 24px; line-height: 1.25; min-height: 58px; }
.caixa-dialogo .seta { position: absolute; right: 26px; bottom: 16px; color: var(--ambar); font-size: 24px; animation: pulsar 0.8s steps(2) infinite; }
@keyframes pulsar { 50% { transform: translateY(4px); } }
.opcoes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.opcao {
  text-align: left; font: 24px/1.25 var(--texto-pixel); padding: 8px 12px 6px 36px; position: relative;
  background: #2a2030; box-shadow: none; border-left: 4px solid transparent;
}
.opcao::before { content: '>'; position: absolute; left: 14px; color: var(--fraco); }
.opcao.ativa, .opcao:hover:not(:disabled) { background: #3d2f42; border-left-color: var(--ambar); color: var(--texto); }
.opcao.ativa::before { color: var(--ambar); }

/* ---- Modal (enigmas, pausa, narração) ------------------------------------- */

#modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 4, 8, 0.72); }
#caixa { width: 680px; max-height: 704px; overflow-y: auto; padding: 22px 30px; scrollbar-color: var(--latao-escuro) transparent; animation: surgir 0.2s steps(3); }
#caixa.escuro { width: 820px; background: rgba(6, 7, 12, 0.72); box-shadow: none; border-color: transparent; clip-path: none; text-align: center; }
#caixa.tremer { animation: tremer 0.3s steps(4); }
@keyframes tremer { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.aviso { min-height: 24px; color: var(--perigo); font-size: 24px; }

.narracao p { font-size: 24px; line-height: 1.25; opacity: 0; animation: aparecer 1.2s steps(6) forwards; }
.narracao h2 { margin-bottom: 20px; }
@keyframes aparecer { to { opacity: 1; } }
.liberado { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: #f0c14a; font: bold 24px/1.25 var(--titulo-pixel); }
.controles-iniciais { display: grid; gap: 2px; margin: 26px 0 8px; color: var(--fraco); font-size: 24px; }

/* Cabeçalho dos painéis: título entre dois filetes de latão com losango. */
.cabecalho-painel { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cabecalho-painel h2 { margin: 0; white-space: nowrap; }
.cabecalho-painel i { flex: 1; height: 4px; background: var(--latao-escuro); position: relative; }
.cabecalho-painel i::after { content: ''; position: absolute; top: -4px; width: 12px; height: 12px; background: var(--latao); transform: rotate(45deg); }
.cabecalho-painel i:first-child::after { right: 0; }
.cabecalho-painel i:last-child::after { left: 0; }
.sub.centro { text-align: center; }
#caixa.largo { width: 900px; max-height: 704px; padding: 22px 30px; }

/* Enigmas: texto e dicas à esquerda, o mecanismo à direita. */
.enigma-corpo { display: flex; gap: 28px; align-items: flex-start; }
.enigma-texto { flex: 1; min-width: 0; }
.enigma-texto p:first-child { margin-top: 0; }
.enigma-mecanismo { flex: none; width: 430px; padding: 14px; background: #171119; box-shadow: inset 0 0 0 4px var(--latao-escuro); }
.enigma-mecanismo h3:first-of-type { margin-top: 8px; }

/* Pausa: ficha da investigadora à esquerda, menu e contagens à direita. */
.pausa-corpo { display: flex; gap: 30px; align-items: flex-start; }
.ficha { flex: none; width: 232px; padding: 16px; background: #171119; box-shadow: inset 0 0 0 4px var(--latao-escuro); text-align: center; }
.ficha .retrato-quadro { margin: 0 auto 12px; }
.ficha .nome { font-weight: bold; color: var(--ambar); }
.ficha .vidas { display: flex; justify-content: center; gap: 4px; margin: 8px 0; }
.ficha .onde { color: var(--texto); }
.ficha .parte { color: var(--fraco); }
.pausa-lado { flex: 1; min-width: 0; }
.menu.lista-pausa { margin-top: 0; align-items: stretch; gap: 4px; }
.menu.lista-pausa button { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 40px; text-align: left; }
.menu.lista-pausa button::before { left: 12px; }
.menu.lista-pausa button.ativa:not(:disabled) { background: #33273a; box-shadow: inset 4px 0 0 var(--ambar); }
.descricao-pausa { min-height: 60px; margin: 14px 0; padding: 10px 14px; background: #171119; color: var(--fraco); border-left: 4px solid var(--latao-escuro); }
.contas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.conta { display: flex; align-items: center; gap: 10px; }
.conta span { flex: 1; color: var(--fraco); }
.conta b { color: var(--texto); }

.visor {
  font: bold 48px/1.25 var(--titulo-pixel); letter-spacing: 14px; text-align: center; padding: 8px 0 6px 14px;
  background: #0a0c08; color: #9fe0a8; box-shadow: inset 0 0 0 4px var(--latao-escuro);
}
.visor.palavra { font-size: 36px; letter-spacing: 8px; }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 6px; justify-content: center; margin: 10px 0; }
.teclado button { font-size: 24px; padding: 7px 0; }
.interruptor { width: 70px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0; }
.interruptor .alavanca { width: 16px; height: 36px; background: #5a4a60; margin-top: 28px; }
.interruptor.ligado .alavanca { margin-top: 0; background: var(--ambar); box-shadow: 0 0 0 4px #7a5a22; }
.cifra { font: bold 36px/1.25 var(--titulo-pixel); letter-spacing: 6px; text-align: center; padding: 10px; color: #9fe0a8; }
.cifra.saida { background: #0a0c08; box-shadow: inset 0 0 0 4px var(--latao-escuro); }
.casas { min-width: 120px; text-align: center; }
.regua { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; font-size: 24px; color: var(--fraco); text-align: center; }
.regua span { display: flex; flex-direction: column; padding: 4px 0 2px; background: #15101a; }
.regua b { font: bold 24px/1.25 var(--titulo-pixel); color: var(--texto); font-weight: normal; }
.travado { opacity: 0.35; pointer-events: none; }
.dica { margin: 8px 0 0; padding: 2px 0 0 12px; border-left: 4px solid var(--ambar); font-size: 24px; line-height: 1.25; color: #d9cbb0; }
.pedir-dica { margin-top: 12px; font-size: 24px; }

/* ---- Caderno de Investigação ---------------------------------------------- */

#caderno { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 4, 8, 0.8); }
.caderno { display: flex; width: 1040px; height: 640px; animation: surgir 0.2s steps(3); }
.lombada { display: flex; flex-direction: column; gap: 6px; padding-top: 64px; width: 230px; }
.lombada button {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 13px 14px; font-size: 24px;
  background: #5a4630; box-shadow: inset 4px 4px 0 #7a6244, inset 0 -4px 0 #3a2c1c; color: var(--texto);
}
.lombada button.ativa { background: var(--papel); box-shadow: inset 4px 4px 0 #fff8e4, inset 0 -4px 0 #cdbf9f; color: #3a2616; margin-left: -10px; }
.folha {
  flex: 1; padding: 30px 36px; overflow-y: auto; color: var(--tinta); border: 4px solid #3a2616;
  background: repeating-linear-gradient(var(--papel) 0 30px, #d5c8a8 30px 32px); scrollbar-color: #b9ab8a transparent;
  box-shadow: inset 0 0 0 4px #fff8e4, 8px 8px 0 rgba(0, 0, 0, 0.5);
}
.folha h2 { color: #5a3a1c; text-shadow: none; }
.folha h3 { color: #8a6a3a; }
.folha h4 { color: #5a3a1c; }
.folha .sub, .folha .rodape, .folha .vazio { color: #7a6f5c; }
.cartao {
  display: block; width: 100%; text-align: left; padding: 12px 14px 10px; margin: 8px 0; font: 24px/1.25 var(--texto-pixel);
  background: #f8f0da; border: 4px solid #cdbf9f; color: var(--tinta); box-shadow: none;
}
button.cartao:hover:not(:disabled) { border-color: #8a6a3a; background: #fff8e4; color: var(--tinta); }
.cartao .nome { display: flex; justify-content: space-between; gap: 10px; }
.titulo-cartao { font-size: 24px; }
.cartao .estado { color: #7a6f5c; font-size: 24px; }
.cartao .estado.ok { color: #3f7a52; }
.cartao .dica { color: #4a4234; border-left-color: #8a6a3a; }
.cartao.pessoa { display: flex; gap: 14px; align-items: flex-start; }
.cartao.pessoa canvas { flex: none; background: #d9ceb2; border: 4px solid #8a6a3a; }
.cartao .humor { color: #8a4a2a; font-size: 24px; }
.cartao.documento { display: flex; align-items: center; gap: 10px; }
.cartao.documento .estrela { width: 18px; }
.cartao.documento .estado { margin-left: auto; }
ul.lista { margin: 6px 0; padding-left: 22px; line-height: 1.25; font-size: 24px; }
ul.pistas { font-size: 24px; line-height: 32px; list-style: square; }
.folha .pedir-dica { background: #d9ceb2; box-shadow: inset -4px -4px 0 #b9ab8a, inset 4px 4px 0 #f8f0da; color: var(--tinta); }

/* ---- Leitor de documentos (os papéis mantêm caligrafia e tipografia de papel) */

#leitor {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(rgba(30, 24, 16, 0.88), rgba(3, 4, 8, 0.96));
}
#leitor.entrando .papel { animation: pousar 0.35s ease-out; }
@keyframes pousar { from { opacity: 0; translate: 0 40px; rotate: 4deg; } }
.aviso-doc { font: bold 24px/1.25 var(--titulo-pixel); letter-spacing: 2px; text-transform: uppercase; color: var(--fraco); }
.aviso-doc.novo { color: var(--ambar); }
.mesa-leitura { width: 1100px; height: 520px; display: flex; align-items: center; justify-content: center; overflow: auto; scrollbar-color: var(--latao-escuro) transparent; }
.papel {
  width: 520px; min-height: 380px; padding: 38px 42px; color: var(--tinta); font: 19px/1.7 var(--serifa);
  background: linear-gradient(135deg, #f3ebd6, #e6dcc0); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(120, 90, 40, 0.18);
  rotate: -0.8deg; transition: transform 0.2s; transform-origin: center; -webkit-font-smoothing: auto;
}
.papel p { margin: 0 0 14px; line-height: inherit; }
.tipo-carta, .tipo-manuscrito, .tipo-bilhete { font-family: var(--mao); color: #262a52; font-size: 18px; line-height: 1.9; }
.tipo-manuscrito { background: repeating-linear-gradient(#f1e8d2 0 33px, #b8c0d8 33px 34px); padding-top: 34px; line-height: 34px; }
.tipo-manuscrito p { margin-bottom: 34px; }
.tipo-bilhete { width: 380px; min-height: 240px; background: #f1e59a; rotate: 2deg; }
.tipo-jornal { width: 560px; font-size: 16px; line-height: 1.55; background: linear-gradient(#e2dbc8, #d5ccb4); color: #23211c; text-align: justify; }
.tipo-jornal p:first-child { font: 12px 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; border-bottom: 3px double #23211c; padding-bottom: 8px; text-align: center; }
.tipo-jornal p:nth-child(2) { font-size: 30px; font-weight: bold; line-height: 1.15; text-align: left; letter-spacing: -0.5px; }
.tipo-datilografado, .tipo-registro { font-family: 'Courier New', monospace; font-size: 17px; color: #2a2826; }
.tipo-datilografado p:first-child, .tipo-datilografado p:nth-child(2) { text-align: center; font-weight: bold; letter-spacing: 3px; margin-bottom: 6px; }
.tipo-datilografado p:nth-child(2) { margin-bottom: 26px; text-decoration: underline; }
.tipo-registro { background: repeating-linear-gradient(#efe6cf 0 37px, #c9a0a0 37px 38px); line-height: 38px; padding-top: 26px; }
.tipo-registro p { margin: 0; }
.tipo-registro p:first-child { font-weight: bold; letter-spacing: 2px; }
.tipo-terminal { background: #0a140f; color: #7fe0a8; font: 24px/1.25 var(--texto-pixel); rotate: 0deg; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 4px #1d3a2c; }
.tipo-foto { width: 620px; }
.tipo-foto.so-foto { padding: 18px 18px 54px; background: #ece6d6; min-height: 0; }
.tipo-foto:not(.so-foto) { font-family: var(--mao); color: #55504a; display: flex; flex-direction: column; justify-content: center; text-align: center; background: #d9d0ba; }
canvas.foto { display: block; width: 100%; image-rendering: auto; }
.controles { display: flex; gap: 8px; align-items: center; }
.controles .pagina { min-width: 70px; text-align: center; color: var(--fraco); }
.controles .marcado { color: var(--ambar); }

/* ---- Tela de início ------------------------------------------------------- */

#titulo { position: absolute; inset: 0; }
#titulo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Submenus: faixa escura à esquerda para o texto ler bem sobre a cena. */
#titulo:has(.titulo-painel:not([hidden]))::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 760px; background: linear-gradient(90deg, rgba(4, 5, 11, 0.9) 55%, transparent); pointer-events: none; }
.titulo-painel { z-index: 1; }

/* Conquistas (ui/conquistas.js): a lista e o aviso no alto da tela. */
.conquistas { max-height: 400px; overflow-y: auto; padding-right: 10px; text-align: left; scrollbar-width: thin; scrollbar-color: #7a5a22 #15101a; }
.conquistas-total { margin-bottom: 6px; color: var(--ambar); font: bold 24px/1.25 var(--titulo-pixel); }
.conquistas h4 { margin: 14px 0 6px; }
.conquistas-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.conquista { display: flex; align-items: center; gap: 12px; padding: 8px 10px 6px; background: rgba(21, 16, 26, 0.75); border: 4px solid #3a3350; opacity: 0.72; }
.conquista.feita { border-color: var(--latao); opacity: 1; }
.conquista canvas { flex: none; }
.conquista b { display: block; font: bold 24px/1.25 var(--titulo-pixel); color: #f6ecd4; }
.conquista span { display: block; font-size: 24px; line-height: 1.2; color: var(--fraco); }
.titulo-painel.largo { width: 1040px; }
.titulo-painel.largo .menu { margin-top: 16px; }
.folha .conquistas { max-height: 380px; }
.folha .conquista { background: #e6dcc0; border-color: #b9ab8a; }
.folha .conquista.feita { border-color: #a8853a; background: #f1e7c8; }
.folha .conquista b { color: #3a2616; }
.folha .conquista span, .folha .conquistas-total { color: #6a5a3c; }
#conquista { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 22px 8px 16px; background: #1a1420; border: 4px solid var(--latao); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6); pointer-events: none; }
#conquista.entrando { animation: aparecer 0.5s steps(5); }
#conquista span { display: block; color: var(--latao); font: bold 24px/1 var(--titulo-pixel); letter-spacing: 2px; text-transform: uppercase; }
#conquista b { display: block; font: bold 24px/1.25 var(--titulo-pixel); color: #f6ecd4; }
#conquista small { display: block; font-size: 24px; line-height: 1.2; color: var(--fraco); }

/* Corrida de enigmas (ui/corrida.js): sala, placar dos dois competidores e o enigma da vez. */
.corrida { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(4, 5, 11, 0.86); }
.corrida-caixa { width: 760px; padding: 22px 30px 18px; background: var(--breu); }
.corrida-caixa.larga { width: 1060px; }
.corrida-caixa h2 { margin: 0 0 12px; }
.corrida-caixa p { margin: 0 0 12px; }
.corrida-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
.corrida-menu button { min-width: 320px; text-align: left; }
.corrida-codigo { display: block; width: 100%; margin: 0 0 10px; padding: 8px 10px; resize: none; background: #0a0c08; color: #9fe0a8; border: 4px solid var(--latao-escuro); font: 12px/1.3 'Courier New', monospace; word-break: break-all; -webkit-user-select: text; user-select: text; }
.corrida-senha { display: block; width: 100%; margin: 6px 0 0; padding: 10px 12px; background: #0a0c08; color: #f0e6c8; border: 4px solid var(--latao-escuro); font: inherit; font-size: 22px; letter-spacing: 2px; -webkit-user-select: text; user-select: text; }
.corrida-senha-mostra { color: var(--ambar); letter-spacing: 2px; }
.corrida .aviso { min-height: 30px; margin: 10px 0 0; color: var(--ambar); }
.corrida-topo { display: flex; align-items: center; justify-content: space-between; width: 1060px; }
.corrida-cartao { display: flex; align-items: center; gap: 14px; min-width: 330px; padding: 8px 14px 8px 8px; background: var(--breu); border: 4px solid var(--latao-escuro); }
.corrida-cartao.ela { flex-direction: row-reverse; text-align: right; padding: 8px 8px 8px 14px; }
.corrida-cartao.ela .corrida-marcas { justify-content: flex-end; }
.corrida-cartao.treino { justify-content: center; min-height: 96px; color: var(--fraco); }
.corrida-cartao.fora { opacity: 0.45; }
.corrida-cartao canvas { width: 72px; height: 72px; background: #15101a; }
.corrida-cartao b { display: block; margin-bottom: 8px; font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar); }
.corrida-marcas { display: flex; gap: 6px; }
.corrida-marcas i { width: 22px; height: 22px; background: #2a2433; box-shadow: inset 0 0 0 3px #4a4058; }
.corrida-marcas i.feita { background: #f0c14a; box-shadow: inset 0 0 0 3px #a8853a; }
.corrida-tempo { font: bold 48px/1 var(--titulo-pixel); color: #f6ecd4; text-shadow: 4px 4px 0 #000; }
.corrida-corpo { display: flex; gap: 28px; align-items: flex-start; min-height: 330px; }
.corrida-corpo .enigma-texto { flex: 1; }
.corrida-corpo .enigma-mecanismo { flex: 0 0 440px; }
.corrida-contagem, .corrida-fim { flex: 1; align-self: center; text-align: center; }
.corrida-contagem { font: bold 96px/1 var(--titulo-pixel); color: var(--ambar); }

/* Créditos (ui/creditos.js): coluna de texto que sobe, personagens na base. */
#titulo:has(.creditos:not([hidden]))::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 760px; background: linear-gradient(90deg, rgba(4, 5, 11, 0.9) 55%, transparent); pointer-events: none; }
.creditos { position: absolute; inset: 0; z-index: 1; }
.creditos-janela { position: absolute; left: 84px; top: 36px; bottom: 170px; width: 600px; overflow: hidden; text-align: center; }
.creditos.reduzido .creditos-janela { overflow-y: auto; }
.creditos-rolo { will-change: transform; padding-bottom: 20px; }
.creditos-rolo h1 { margin: 0; font: bold 96px/1.25 var(--titulo-pixel); letter-spacing: 6px; color: #f6ecd4; text-shadow: 6px 6px 0 #1a2140; }
.creditos-sub { margin-bottom: 72px; font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar); }
.creditos-rolo section { margin-bottom: 48px; }
.creditos-rolo h3 { margin: 0 0 6px; font: 24px/1.25 var(--texto-pixel); color: var(--fraco); text-transform: uppercase; letter-spacing: 2px; }
.creditos-rolo p { margin: 0; font: bold 24px/1.5 var(--titulo-pixel); color: #f6ecd4; }
.creditos-especiais { margin-top: 84px; }
.creditos-especiais h2 { margin: 0 0 16px; font: bold 24px/1.25 var(--titulo-pixel); color: #f0c14a; text-transform: uppercase; letter-spacing: 2px; }
.creditos-rolo .creditos-final { margin-top: 220px; color: var(--ambar); }
.creditos-faixa { position: absolute; left: 0; bottom: 0; width: 1280px; height: 150px; pointer-events: none; }
.creditos-dica { position: absolute; right: 20px; top: 12px; margin: 0; text-shadow: 2px 2px 0 #000; }
.titulo-painel { position: absolute; left: 84px; top: 0; bottom: 0; width: 600px; display: flex; flex-direction: column; justify-content: center; animation: aparecer 1s steps(8); }
.marca .sobretitulo { font: bold 24px/1.25 var(--titulo-pixel); letter-spacing: 3px; text-transform: uppercase; color: var(--fraco); }
.marca h1 { font: bold 48px/1.25 var(--titulo-pixel); letter-spacing: 6px; color: #f6ecd4; text-shadow: 6px 6px 0 #1a2140, 12px 12px 0 rgba(0, 0, 0, 0.5); margin: 14px 0 6px; }
.marca .subtitulo { font: bold 24px/1.25 var(--titulo-pixel); color: var(--ambar); }
.marca.pequena h2 { font-size: 36px; }
.marca.pequena p { font-size: 24px; }
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 40px; }
.menu button {
  background: none; box-shadow: none; padding: 10px 0 10px 34px; position: relative;
  font-size: 24px; color: rgba(236, 223, 198, 0.65);
}
.menu button::before { content: '>'; position: absolute; left: 6px; color: var(--ambar); opacity: 0; }
.menu button:hover:not(:disabled) { background: none; }
.menu button.ativa:not(:disabled) { color: #fff; }
.menu button.ativa:not(:disabled)::before { opacity: 1; animation: pulsar 0.8s steps(2) infinite; }
/* Seleção de capítulos: cada item é um cartão com ícone, nome e legenda. */
.menu.capitulos { gap: 10px; margin-top: 28px; }
.menu button.cartao-capitulo { display: flex; align-items: center; gap: 16px; width: 560px; padding: 10px 14px 8px 34px; text-align: left; background: rgba(21, 16, 26, 0.7); border: 4px solid #3a3350; }
.menu button.cartao-capitulo.ativa:not(:disabled) { border-color: var(--latao); background: rgba(40, 30, 44, 0.85); }
.menu button.cartao-capitulo:disabled { opacity: 1; color: #6a6680; border-style: dashed; }
.cartao-capitulo small { display: block; font: 24px/1.25 var(--texto-pixel); color: var(--fraco); }
.cartao-capitulo:disabled small { color: #6a6680; }
.descricao-item { min-height: 84px; margin: 20px 0 0; font-size: 24px; line-height: 1.25; color: var(--texto); }
.descricao-item:empty { display: none; }
.titulo-painel .rodape { margin-top: 30px; }

.config { display: grid; gap: 6px; margin: 14px 0; }
.opcao-config { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 12px; background: #171119; }
.opcao-config:nth-child(even) { background: #1c151f; }
.opcao-config .rotulo { display: flex; align-items: center; gap: 12px; }
.passo { padding: 6px 10px; }
.barra-seg, .seletor { display: flex; align-items: center; gap: 8px; }
.segmentos { display: flex; gap: 4px; padding: 4px; background: #0c090f; box-shadow: inset 0 0 0 4px var(--latao-escuro); }
.seg { width: 14px; height: 24px; padding: 0; background: #2a2030; box-shadow: none; }
.seg.cheio { background: var(--ambar); box-shadow: inset 0 -6px 0 #b4802e; }
.seg:hover:not(:disabled) { background: #6e5636; }
.seg.cheio:hover:not(:disabled) { background: #ffd67e; }
.barra-seg .valor { width: 60px; text-align: right; color: var(--fraco); }
.valor-seletor { min-width: 170px; padding: 4px 10px; text-align: center; font-weight: bold; color: var(--ambar); background: #0c090f; box-shadow: inset 0 0 0 4px var(--latao-escuro); }
.acao-config { min-width: 170px; }

.controles-lista { display: grid; gap: 2px; margin: 4px 0; }
.controles-lista .linha { margin: 6px 0; }
.controles-lista .rodape { margin-top: 4px; }
.controle { display: grid; grid-template-columns: 1fr 156px 156px; gap: 8px; align-items: center; font-size: 24px; }
.controle { padding: 2px 12px; background: #171119; }
.controle:nth-child(even) { background: #1c151f; }
/* Cada comando parece uma tecla: face clara em cima, base escura embaixo. */
.tecla { font-size: 24px; padding: 2px 4px 7px; text-align: center; background: #4a3b52; box-shadow: inset 0 -6px 0 #231a27, inset 0 0 0 2px #6a5672; }
.tecla:hover:not(:disabled) { background: #5a4963; }
.tecla.esperando { background: #7a5a22; color: #fff3d6; }

/* ---- Game over ------------------------------------------------------------ */

/* O mundo perde a cor quando a jogadora cai. */
#tela.caida { filter: grayscale(1) contrast(1.15) brightness(0.55); transition: filter 0.6s steps(6); }

/* A cena de game over é um canvas de 640×360 (gameOverCena.js), ampliado 2×. */
#gameover { position: absolute; inset: 0; }
#gameover .vesper-go-camada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#gameover .vesper-go-camada canvas { pointer-events: auto; outline: none; }

/* ---- Controles de toque (ui/toque.js) ------------------------------------ */

html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
#tela, #toque, #abertura, #titulo canvas { touch-action: none; }
#toque { position: absolute; inset: 0; pointer-events: none; }
.toque-jogo > * { position: absolute; pointer-events: auto; touch-action: none; }
.alavanca {
  left: 46px; bottom: 40px; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(10, 10, 18, 0.34); border: 4px solid rgba(201, 168, 106, 0.4);
}
.alavanca.ativa { border-color: rgba(201, 168, 106, 0.8); }
.pino {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: rgba(201, 168, 106, 0.5); border: 4px solid rgba(241, 230, 204, 0.75); pointer-events: none;
}
.toque-botao, .toque-voltar {
  display: flex; align-items: center; justify-content: center; padding: 0; min-width: 0;
  background: rgba(10, 10, 18, 0.4); border: 4px solid rgba(201, 168, 106, 0.5); box-shadow: none; color: #f1e6cc;
}
.toque-botao { border-radius: 50%; }
.toque-botao:active { background: rgba(122, 90, 34, 0.75); border-color: #e8c878; }
.toque-botao canvas { opacity: 0.85; pointer-events: none; }
.toque-atacar { right: 44px; bottom: 44px; width: 132px; height: 132px; }
.toque-interagir { right: 196px; bottom: 30px; width: 108px; height: 108px; }
.toque-interagir.chamando { border-color: #f0c14a; background: rgba(122, 90, 34, 0.55); animation: pulsar 0.9s steps(4) infinite; }
.toque-atirar { right: 236px; bottom: 150px; width: 96px; height: 96px; border-color: rgba(240, 120, 80, 0.6); }
.toque-atirar.mirando { background: rgba(160, 60, 30, 0.7); border-color: #ffb08a; }
.toque-caderno { right: 44px; bottom: 200px; width: 76px; height: 76px; }
.toque-pausa { right: 136px; bottom: 200px; width: 76px; height: 76px; }
.toque-voltar { position: absolute; right: 14px; top: 12px; padding: 10px 22px 8px; font: bold 24px/1.25 var(--titulo-pixel); background: rgba(10, 10, 18, 0.8); }
@keyframes pulsar { 50% { border-color: rgba(240, 193, 74, 0.35); } }
/* Com toque: as dicas de tecla somem, o aviso de ação vira botão e sobe para longe dos polegares. */
body.toque #teclas, body.toque .tecla-acao, body.toque .rodape { display: none; }
body.toque #acao { pointer-events: auto; bottom: 250px; }
body.toque #mensagens { bottom: 20px; width: 620px; }
.regua span { cursor: pointer; }
body.toque .regua { grid-template-columns: repeat(9, 1fr); }
body.toque .regua span { padding: 5px 0 2px; }

#girar { display: none; position: fixed; inset: 0; z-index: 10; background: #05050a; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#girar b { display: block; margin-bottom: 8px; color: var(--ambar); font: bold 24px/1.25 var(--titulo-pixel); }
#girar span { color: var(--fraco); }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) { #girar { display: flex; } }

#abertura { position: absolute; inset: 0; background: #05050a; }
#abertura canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.45s steps(6); }
#fade.ativo { opacity: 1; }

#erro { position: absolute; inset: auto 10px 10px 10px; margin: 0; padding: 10px; background: #3a1414; color: #ffd0d0; font: 13px 'Courier New', monospace; white-space: pre-wrap; }