/* A MISSA POR DENTRO — interface
   Moldura escura de vitral/manuscrito; painéis de pergaminho com filete dourado. */
:root {
  --ouro: #C9A24D; --ouro-claro: #E8CD84; --ouro-esc: #8A6A2A;
  --vinho: #651D32; --vermelho: #8B2027; --azul: #233F74;
  --marfim: #F5E9CF; --marrom: #241C19; --marrom-2: #3A2E2A;
  --pergaminho: #F5E9CF; --tinta: #241C19; --tinta-suave: #5A463A;
  --fundo: #1A1412; --foco: #E8CD84;
  --f-titulo: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --f-texto: "Alegreya", Georgia, "Times New Roman", serif;
  --escala-texto: 1;
  --t: calc(1rem * var(--escala-texto));
  color-scheme: dark;
}
body.contraste {
  --ouro: #FFE600; --ouro-claro: #FFE600; --ouro-esc: #FFE600; --vinho: #000; --vermelho: #000; --azul: #000;
  --pergaminho: #FFFFFF; --tinta: #000; --tinta-suave: #000; --marfim: #FFF; --fundo: #000; --marrom: #000; --marrom-2: #000; --foco: #FF00FF;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--marfim); font-family: var(--f-texto); font-size: var(--t); line-height: 1.45; overflow: hidden; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.eyebrow { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--t) * .72); color: var(--ouro); margin: 0 0 .3em; }
.nota { color: var(--tinta-suave); font-style: italic; }
.pequena { font-size: calc(var(--t) * .8); }

/* ---------- botões ---------- */
.btn { cursor: pointer; border: 2px solid var(--ouro-esc); background: var(--marfim); color: var(--tinta); padding: .5em .9em; border-radius: 3px; font-family: var(--f-titulo); font-weight: 500; font-size: calc(var(--t) * .92); box-shadow: 0 2px 0 var(--ouro-esc); text-align: left; }
.btn:hover:not(:disabled) { background: #fff8e6; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--ouro-esc); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primario { background: var(--vinho); color: var(--marfim); border-color: var(--ouro); box-shadow: 0 2px 0 var(--marrom); }
.btn.primario:hover:not(:disabled) { background: var(--vermelho); }
.btn.link { background: none; border: none; box-shadow: none; color: var(--ouro-claro); text-decoration: underline; padding: .3em .4em; }
.btn small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: .8em; opacity: .85; }
body.contraste .btn { border-width: 3px; }
body.contraste .btn.primario { background: #000; color: #FFE600; border-color: #FFE600; }

/* ---------- início ---------- */
#inicio { height: 100%; overflow-y: auto; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse at top, #3A2420 0%, var(--fundo) 70%); }
.inicio-moldura { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 100%; }
#capa { width: 100%; height: auto; border: 4px solid var(--ouro); outline: 2px solid var(--marrom); box-shadow: 0 0 0 8px var(--marrom-2), 0 10px 40px #000a; }
.inicio-texto h1 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: .95; margin: 0 0 .25em; color: var(--marfim); text-shadow: 3px 3px 0 var(--vinho), 5px 5px 0 var(--marrom); letter-spacing: .02em; text-wrap: balance; }
.subtitulo { font-size: calc(var(--t) * 1.2); font-style: italic; color: var(--ouro-claro); margin: 0 0 1.2em; }
.menu-inicio { display: grid; gap: 10px; max-width: 420px; }
.menu-inicio .btn { padding: .65em 1em; }
.menu-sec { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 6px; }
#inicio .nota { color: #CDBB9B; }

/* ---------- jogo ---------- */
#jogo { height: 100%; display: flex; flex-direction: column; }
#jogo[hidden] { display: none; }
#hud { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--marrom); border-bottom: 2px solid var(--ouro-esc);
  padding-block: 6px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.tl-wrap { flex: 1 1 420px; min-width: 0; }
#timeline { display: flex; gap: 4px; align-items: stretch; }
.tl-cap { flex: 1; min-width: 0; padding: 2px 4px 3px; border: 1px solid #5A463A; border-radius: 2px; background: #2E2421; }
.tl-cap.atual { border-color: var(--ouro); background: #3A2A24; }
.tl-cap.feito { opacity: .75; }
.tl-nome { display: block; font-family: var(--f-titulo); font-size: calc(var(--t) * .66); letter-spacing: .06em; text-transform: uppercase; color: #CDBB9B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cap.atual .tl-nome { color: var(--ouro-claro); }
.tl-ticks { display: flex; gap: 2px; margin-top: 2px; }
.tl-tick { flex: 1; height: 5px; background: #5A463A; border: 0; padding: 0; border-radius: 1px; min-width: 4px; }
button.tl-tick { height: 14px; cursor: pointer; }
.tl-tick.feito { background: var(--ouro-esc); }
.tl-tick.atual { background: var(--ouro-claro); box-shadow: 0 0 0 1px var(--marfim); }
.tl-chegada { font-family: var(--f-titulo); font-size: calc(var(--t) * .7); background: #2E2421; color: #CDBB9B; border: 1px solid #5A463A; cursor: pointer; padding: 0 6px; }
.tl-chegada.atual { border-color: var(--ouro); color: var(--ouro-claro); }
.tl-atual { font-size: calc(var(--t) * .8); color: #CDBB9B; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.hud { padding: .3em .6em; font-size: calc(var(--t) * .8); background: #2E2421; color: var(--marfim); border-color: var(--ouro-esc); box-shadow: none; }
.btn.hud:hover:not(:disabled) { background: #3A2A24; }
.btn.hud[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro-claro); }

#palco { position: relative; flex: 1 1 auto; min-height: 140px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #120D0C; }
#tela { display: block; touch-action: none; box-shadow: 0 0 0 3px var(--ouro-esc), 0 0 0 6px var(--marrom); }
#somLegenda { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.chip-som { background: rgba(36,28,25,.9); color: var(--marfim); border: 1px solid var(--ouro-esc); padding: 2px 8px; font-size: calc(var(--t) * .8); border-radius: 2px; }
#objetivo { position: absolute; top: 8px; right: 8px; max-width: min(60%, 360px); margin: 0; background: rgba(36,28,25,.92); color: var(--marfim); border: 1px solid var(--ouro); padding: 4px 10px; font-size: calc(var(--t) * .82); border-radius: 2px; }
#dpad { position: absolute; left: max(10px, env(safe-area-inset-left, 0px)); bottom: 10px; display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
#dpad button { background: rgba(245,233,207,.85); border: 2px solid var(--ouro-esc); color: var(--marrom); font-size: 18px; border-radius: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
#dpad [data-k="dpadC"] { grid-column: 2; grid-row: 1; } #dpad [data-k="dpadE"] { grid-column: 1; grid-row: 2; }
#dpad [data-k="dpadD"] { grid-column: 3; grid-row: 2; } #dpad [data-k="dpadB"] { grid-column: 2; grid-row: 3; }

#painel { flex: 0 0 auto; max-height: 46%; overflow-y: auto; background: var(--pergaminho); color: var(--tinta); border-top: 4px double var(--ouro-esc);
  padding-block: 10px 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
#painel > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.leg-cab { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.leg-quem { font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--t) * .78); padding: 1px 6px; border-radius: 2px; background: var(--azul); color: var(--marfim); }
.leg-quem.q-assembleia { background: var(--vinho); }
.leg-quem.q-som { background: #5A463A; }
.leg-quem.q-narrador { background: var(--ouro-esc); }
.leg-passo, .postura { font-size: calc(var(--t) * .8); color: var(--tinta-suave); }
.postura { margin-left: auto; font-style: italic; }
.leg-texto { margin: .35em 0 .2em; font-size: calc(var(--t) * 1.08); min-height: 1.5em; }
.leg-texto.silencio { font-style: italic; color: var(--tinta-suave); }
.leg-texto.leitura { border-left: 4px solid var(--vermelho); padding-left: .7em; }
.leg-texto .ref { font-family: var(--f-titulo); color: var(--vermelho); font-size: .85em; }
.nota-parafrase { display: block; font-size: .78em; font-style: italic; color: var(--tinta-suave); margin-top: .2em; }
.leg-texto.resumo { font-size: var(--t); }
#legExtra { font-size: calc(var(--t) * .86); }
.transicao, .voce-respondeu { display: inline-block; margin: 2px 0; padding: 2px 8px; border: 1px dashed var(--ouro-esc); border-radius: 2px; color: var(--tinta-suave); }
.voce-respondeu { border-style: solid; color: var(--vinho); background: #fff8e6; }
#pontosLista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px auto 6px; }
.rotulo-pontos, .sem-pontos { font-size: calc(var(--t) * .82); color: var(--tinta-suave); }
.chip-ponto { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; border: 2px solid var(--ouro); background: #fff8e6; color: var(--tinta); padding: .25em .7em; border-radius: 999px; font-family: var(--f-texto); font-weight: 600; font-size: calc(var(--t) * .9); }
.chip-ponto .marca { color: var(--ouro-esc); font-size: .9em; }
.chip-ponto.visto { border-style: dashed; background: transparent; }
.chip-ponto.foco { box-shadow: 0 0 0 3px var(--vinho); }
.chip-ponto:hover { background: var(--marfim); }
#acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
#acoes .btn.primario { min-width: 11em; text-align: center; }

/* ---------- sobreposições ---------- */
#overlays { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.ov { position: absolute; inset: 0; pointer-events: auto; background: rgba(12,8,7,.55); display: flex; align-items: center; justify-content: center;
  padding-block: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.ov-caixa { position: relative; background: var(--pergaminho); color: var(--tinta); width: min(620px, 100%); max-height: 100%; overflow-y: auto; padding: 22px 24px 18px;
  border: 3px solid var(--ouro); outline: 3px solid var(--marrom); box-shadow: 0 0 0 7px var(--vinho), 0 18px 60px #000c; border-radius: 2px; }
.ov-caixa::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ouro-esc); pointer-events: none; opacity: .5; }
.ov-larga .ov-caixa { width: min(860px, 100%); }
.ov-caixa h2 { font-family: var(--f-titulo); font-weight: 700; font-size: calc(var(--t) * 1.45); margin: 0 0 .3em; color: var(--vinho); text-wrap: balance; }
.ov-caixa h3 { font-family: var(--f-titulo); font-size: calc(var(--t) * 1.02); color: var(--azul); margin: 1em 0 .3em; }
.ov-caixa p { margin: .45em 0; }
.ov-caixa .eyebrow { color: var(--ouro-esc); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.menu-vertical { display: grid; gap: 8px; margin-top: 12px; }
.progresso { font-family: var(--f-titulo); color: var(--azul); }

.dialogo-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.retrato { width: 60px; height: 45px; border: 2px solid var(--ouro); background: #3A2E2A; }
.papel { color: var(--tinta-suave); font-style: italic; }
.dialogo-texto { font-size: calc(var(--t) * 1.08); }

.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.selo { font-size: calc(var(--t) * .76); border: 1px solid currentColor; padding: 1px 7px; border-radius: 2px; background: #fff8e6; }
.selo b { font-family: var(--f-titulo); letter-spacing: .05em; }
.selo-geral { color: var(--azul); } .selo-brasil { color: #2F6B3A; } .selo-costume { color: var(--ouro-esc); } .selo-simplificacao { color: var(--vinho); }
body.contraste .selo { color: #000; }
.camada { border-left: 4px solid var(--azul); padding: 4px 0 4px 12px; margin: 10px 0; }
.camada-c { border-left-color: var(--ouro-esc); } .camada-p { border-left-color: var(--vinho); }
.camada h3 { margin: 0 0 .2em; font-size: var(--t); color: var(--tinta); font-family: var(--f-texto); font-style: italic; font-weight: 400; }
.camada-rot { font-family: var(--f-titulo); font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: .8em; color: var(--azul); }
.camada-c .camada-rot { color: var(--ouro-esc); } .camada-p .camada-rot { color: var(--vinho); }
.camadas-extra { display: flex; flex-direction: column; gap: 8px; }
.fonte { font-size: calc(var(--t) * .82); color: var(--tinta-suave); border-top: 1px solid #D9C9A6; padding-top: 6px; margin-top: 12px; }

.opcoes { display: grid; gap: 8px; margin: 10px 0; }
.btn.opcao.escolhida { background: var(--azul); color: var(--marfim); border-color: var(--ouro); }
.btn.opcao.feito { background: #E9DFC4; color: var(--tinta-suave); }
.comentario { min-height: 1.4em; font-size: calc(var(--t) * 1.02); color: var(--vinho); }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duas-col .col { display: grid; gap: 8px; align-content: start; }

.cartao h2 { text-align: left; }
.cartao-capitulo h2 { color: var(--azul); }
.cartao-catequese { border-color: var(--azul); }
.conversa { padding-left: 1.3em; } .conversa li { margin: .4em 0; }
.ov-cena .ov-caixa canvas.cena { width: 100%; height: auto; border: 3px solid var(--ouro); display: block; margin-bottom: 10px; }

.galeria .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
.gal-item { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: #fff8e6; border: 2px solid var(--ouro-esc); border-radius: 2px; color: var(--tinta); font-family: var(--f-texto); font-weight: 600; text-align: center; }
.gal-item canvas { width: 64px; height: 64px; }
.gal-item small { font-weight: 400; color: var(--tinta-suave); font-size: .8em; }
.gal-item.visto { border-style: dashed; }
.gal-item:hover { background: var(--marfim); }
.entrada-topo { display: flex; gap: 16px; align-items: flex-start; }
.entrada-topo > div { min-width: 0; }
.ilustra { width: 112px; height: 112px; flex: 0 0 auto; border: 3px solid var(--ouro); }
.entrada dl { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 8px 14px; }
.entrada dt { font-family: var(--f-titulo); color: var(--azul); font-size: calc(var(--t) * .86); }
.entrada dd { margin: 0; }
.fontes ul { padding-left: 1.2em; } .fontes li { margin: .3em 0; }
.lista-selos { list-style: none; padding: 0 !important; } .lista-selos li { margin: .5em 0; }
fieldset { border: 1px solid #D9C9A6; margin: 10px 0; padding: 8px 12px; }
legend { font-family: var(--f-titulo); color: var(--azul); padding: 0 4px; }
fieldset label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; cursor: pointer; }
input[type="radio"] { width: 1.1em; height: 1.1em; accent-color: var(--vinho); }
.visuais { display: flex; flex-wrap: wrap; gap: 6px; }
.visual-op { flex-direction: column; border: 2px solid transparent; padding: 6px 10px; border-radius: 2px; }
.visual-op:has(input:checked) { border-color: var(--vinho); background: #fff8e6; }
.visual-op canvas { width: 36px; height: 48px; }
.controles li { margin: .3em 0; }

/* ---------- final ---------- */
#final { height: 100%; overflow-y: auto; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse at top, #3A2420 0%, var(--fundo) 70%); }
#final > * { max-width: 680px; margin-left: auto; margin-right: auto; }
#final h1 { font-family: var(--f-titulo); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; color: var(--marfim); text-shadow: 3px 3px 0 var(--vinho); text-wrap: balance; margin: .2em auto .4em; }
#final h2 { font-family: var(--f-titulo); color: var(--ouro-claro); margin-top: 1.4em; }
#final .lead { font-size: calc(var(--t) * 1.15); }
#final .progresso { color: var(--ouro-claro); font-size: calc(var(--t) * 1.1); }
#final .nota { color: #CDBB9B; }
#final .linha-botoes { justify-content: flex-start; }

/* ---------- telas estreitas ---------- */
@media (max-width: 760px) {
  .inicio-moldura { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hud-botoes { width: 100%; justify-content: space-between; }
  .btn.hud { flex: 1; text-align: center; padding: .35em .3em; }
  .postura { margin-left: 0; width: 100%; }
  #painel { max-height: 52%; }
  .duas-col { grid-template-columns: minmax(0, 1fr); }
  .entrada dl { grid-template-columns: minmax(0, 1fr); }
  .ilustra { width: 80px; height: 80px; }
  .ov-caixa { padding: 18px 16px 14px; }
  #acoes .btn { flex: 1 1 auto; }
  #objetivo { left: 8px; right: 8px; top: auto; bottom: 8px; max-width: none; }
  #dpad { bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
body.reduzir * { transition: none !important; animation: none !important; }

#final h1:focus { outline: none; }