/* FILHOS DA GAROA — 320x320 lógico, exibido em 640x640 (1 pixel do jogo = 2px) */
:root {
  --fundo: #07060a;
  --metal: #1b1714;
  --borda: #4a3c30;
  --borda-esc: #0a0807;
  --papel: #e8dcbc;
  --papel-esc: #c9b994;
  --tinta: #1e1610;
  --verde: #6ad06a;
  --amarelo: #e8c060;
  --laranja: #e8903a;
  --vermelho: #e0403a;
  --sangue: #a01a2a;
  --texto: #d8ccb0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: 'VT323', 'Courier New', monospace; color: var(--texto); }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
button { font-family: inherit; }

#moldura { width: 640px; height: 640px; transform-origin: center center; }
#tela {
  position: relative; width: 640px; height: 640px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 20% 10%, #3a2618 0%, transparent 40%),
    radial-gradient(ellipse at 90% 90%, #2e1a10 0%, transparent 45%),
    var(--metal);
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 8px #3a2c20, inset 0 0 60px #000;
}
.painel {
  position: absolute; background: #0c0a0a;
  border: 4px solid var(--borda-esc);
  box-shadow: 0 0 0 2px var(--borda), 0 0 0 4px #000, inset 0 0 0 2px #2a2018;
}
.papel {
  background: var(--papel); color: var(--tinta);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.25), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.25), transparent 50%);
  box-shadow: 0 0 0 2px var(--borda), 0 0 0 4px #000, inset 0 0 0 2px var(--papel-esc), inset 0 0 18px rgba(90,60,20,.35);
}

#barra { left: 12px; top: 12px; width: 424px; height: 40px; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; }
#attrs { font-size: 18px; white-space: nowrap; line-height: 18px; display: flex; gap: 10px; }
#attrs .at { display: inline-flex; align-items: center; gap: 2px; }
#attrs img { width: 16px; height: 16px; image-rendering: pixelated; margin-right: 1px; }
#attrs b { font-weight: normal; }
.v1 { color: var(--vermelho); } .v2 { color: var(--laranja); } .v3 { color: var(--amarelo); } .v4, .v5 { color: var(--verde); }
#obsbar { display: flex; align-items: center; gap: 2px; font-size: 14px; line-height: 12px; color: #9a8a7a; }
#obsbar .cel { width: 18px; height: 6px; background: #241c18; border: 1px solid #000; }
#obsbar .cel.on { background: var(--sangue); }
#obsbar.transborda .cel { animation: transborda .4s ease-in-out 4 alternate; }
@keyframes transborda { to { background: #e8dcbc; box-shadow: 0 0 6px var(--sangue); } }
.sem-efeitos #obsbar.transborda .cel { animation: none; }
#obsbar .cel.on.alto { background: var(--vermelho); box-shadow: 0 0 4px var(--vermelho); }
#obsbar span { margin-right: 6px; }

#dado { left: 444px; top: 12px; width: 184px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
#cdado { width: 28px; height: 28px; }
#dadolbl { font-size: 14px; line-height: 13px; color: #bfa98a; flex: 1; }
#dadoval { font-size: 30px; color: var(--amarelo); border: 2px solid #3a2e24; padding: 0 6px; min-width: 52px; text-align: center; font-weight: normal; background: #000; }
#dado.rolando { animation: tremor .08s infinite; }
#dado.oculto { box-shadow: 0 0 0 2px var(--sangue), 0 0 0 4px #000, 0 0 18px var(--sangue); }
#dado.oculto #dadoval { color: var(--vermelho); }
@keyframes tremor { 0% { transform: translate(0,0) } 25% { transform: translate(2px,-2px) } 50% { transform: translate(-2px,2px) } 75% { transform: translate(2px,2px) } }

#cena { left: 12px; top: 60px; width: 424px; height: 312px; }
#ccena { width: 416px; height: 304px; }
#cshader { position: absolute; width: 416px; height: 304px; image-rendering: pixelated; }
#local { position: absolute; left: 6px; bottom: 6px; font-size: 16px; color: #e8dcbc; background: rgba(0,0,0,.65); padding: 0 6px; }

#retrato { left: 444px; top: 60px; width: 184px; height: 252px; }
#cret { width: 176px; height: 244px; }
#nome { left: 444px; top: 318px; width: 184px; height: 30px; background: #2a0a10; color: var(--vermelho); font-size: 24px; text-align: center; line-height: 22px; letter-spacing: 2px; box-shadow: 0 0 0 2px var(--borda), 0 0 0 4px #000, inset 0 0 0 2px #5a1a20; }

#notas { left: 444px; top: 356px; width: 184px; height: 236px; padding: 6px 8px; cursor: pointer; overflow: hidden; }
#notas { background-image: var(--papel-img, none), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.25), transparent 60%); background-size: 100% 100%, auto; image-rendering: pixelated; }
#notas h3 { margin: 0 0 4px; font-size: 19px; font-weight: normal; border-bottom: 2px solid var(--tinta); }
#listanotas { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 15px; }
#listanotas li { margin-bottom: 6px; }
#listanotas li::before { content: '- '; }
#notas.pisca { animation: pisca .6s 2; }
@keyframes pisca { 50% { filter: brightness(1.4) sepia(1); } }

#dialogo { left: 12px; top: 380px; width: 424px; height: 212px; padding: 8px 12px; overflow-y: auto; font-size: 20px; line-height: 20px; cursor: pointer; scrollbar-width: thin; }
#texto p { margin: 0 0 8px; }
#texto p.velho { opacity: .45; }
#texto p.eco { color: #6a4a2a; font-style: italic; }
#texto p.rolagem { font-size: 17px; padding: 2px 6px; background: #1a1210; color: var(--amarelo); }
#texto p.rolagem.ok { color: var(--verde); }
#texto p.rolagem.falha { color: var(--laranja); }
#texto p.rolagem.oculta { color: var(--vermelho); background: #1a0608; }
#texto p.seta::after { content: ' ▼'; animation: blink 1s steps(2) infinite; color: var(--sangue); }
#texto p.digitando::after { content: '▌'; color: var(--laranja); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#escolhas { display: flex; flex-direction: column; gap: 2px; }
.esc { text-align: left; background: transparent; border: none; border-left: 4px solid transparent; font-size: 20px; line-height: 20px; padding: 2px 4px; color: var(--tinta); cursor: pointer; }
.esc:hover, .esc:focus { background: rgba(160,26,42,.12); border-left-color: var(--sangue); outline: none; }
.esc .n { color: var(--sangue); }
.esc.bloq { opacity: .4; cursor: not-allowed; }
.esc i { font-size: 16px; }
.tag { font-weight: normal; color: #5a3010; }
.tag.oculto { color: var(--sangue); }
.tag-obs { font-weight: normal; color: var(--sangue); text-shadow: 0 0 2px rgba(224,64,58,.5); }

#botoes { position: absolute; left: 12px; top: 602px; width: 616px; height: 30px; display: flex; justify-content: center; gap: 10px; }
#botoes button, .btn { background: #120e0c; color: var(--laranja); border: 2px solid var(--borda); box-shadow: 0 0 0 2px #000; font-size: 20px; padding: 0 12px; cursor: pointer; }
#botoes button:hover, .btn:hover { background: #2a1a10; color: var(--amarelo); }

#aviso { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); background: #000; color: var(--amarelo); font-size: 18px; padding: 2px 10px; border: 2px solid var(--borda); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; }
#aviso.on { opacity: 1; }

/* Obsessão */
#vinheta { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 transparent; transition: box-shadow 2s; z-index: 4; }
#tela.obs5 #vinheta { box-shadow: inset 0 0 80px rgba(120,0,10,.35); }
#tela.obs7 #vinheta { box-shadow: inset 0 0 140px rgba(150,0,10,.55); }
#tela.obs9 #vinheta { box-shadow: inset 0 0 200px rgba(180,0,10,.75); }
#tela.obs9 #cena { animation: tremor 3s infinite; }
.glitch { display: inline-block; animation: glitch 2.2s infinite; color: var(--sangue); }
@keyframes glitch { 0%, 88%, 100% { transform: none; filter: none; } 90% { transform: translate(2px,-1px) skewX(20deg); } 93% { transform: translate(-2px,1px); filter: blur(1px); } 96% { opacity: .3; } }
#listanotas li.delirio { color: var(--sangue); font-style: italic; transform: rotate(-2deg); }

/* Overlays */
#overlay { position: absolute; inset: 0; z-index: 10; background: rgba(5,4,6,.975); padding: 28px 36px; overflow-y: auto; font-size: 20px; }
#overlay.escondido { display: none; }
#overlay.papel-ov { background: var(--papel); color: var(--tinta); }
#overlay h2 { font-weight: normal; font-size: 30px; color: var(--vermelho); margin: 0 0 6px; letter-spacing: 1px; }
#overlay h3 { font-weight: normal; font-size: 22px; margin: 14px 0 4px; color: var(--amarelo); border-bottom: 2px solid #3a2c20; }
#overlay .sub { color: #9a8a7a; margin: 0 0 14px; }
#overlay .fechar { position: absolute; right: 18px; top: 14px; }
.grande { display: block; margin: 18px auto 0; font-size: 24px !important; padding: 2px 20px !important; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.linha-attr { display: grid; grid-template-columns: 1fr 34px 40px 34px; align-items: center; gap: 6px; margin: 10px 0; }
.linha-attr small { display: block; font-size: 16px; color: #9a8a7a; line-height: 15px; }
.linha-attr .v { text-align: center; font-size: 30px; color: var(--amarelo); }
.item { border-left: 4px solid var(--borda); padding: 2px 10px; margin: 8px 0; }
.item b { font-weight: normal; color: var(--amarelo); }
.item small { display: block; color: #9a8a7a; font-size: 17px; line-height: 16px; }
.lugar { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin: 6px 0; }
.lugar.fechado { opacity: .4; }
.lugar small { display: block; font-size: 16px; color: #9a8a7a; line-height: 15px; }
.fato-sel { display: block; width: 100%; text-align: left; background: transparent; border: 2px solid transparent; color: var(--tinta); font-size: 18px; line-height: 17px; padding: 4px 6px; cursor: pointer; }
.fato-sel:hover { border-color: var(--papel-esc); }
.fato-sel.on { border-color: var(--sangue); background: rgba(160,26,42,.1); }
.fato-sel .tags { font-size: 14px; color: #7a5a3a; }
.nota-full { margin: 6px 0; font-size: 18px; line-height: 17px; }
.nota-full s { color: #8a2a2a; }
.nota-full em { display: block; color: #1a5a2a; font-style: normal; }
.nota-full.delirio { color: var(--sangue); font-style: italic; }
.log-dado { font-size: 16px; color: #5a4a3a; }

/* Primeira página do jornal */
.jornal { background: #f2ead6; color: #111; padding: 16px 20px; border: 2px solid #111; box-shadow: 6px 6px 0 #000; }
.jornal .cab { display: flex; justify-content: space-between; border-bottom: 3px double #111; font-size: 15px; }
.jornal .mast { font-size: 52px; text-align: center; letter-spacing: 6px; line-height: 50px; margin: 4px 0; }
.jornal .manchete { font-size: 34px; line-height: 32px; margin: 10px 0 4px; }
.jornal .linha { font-size: 19px; font-style: italic; border-bottom: 1px solid #111; padding-bottom: 6px; }
.jornal ul { padding-left: 18px; font-size: 18px; line-height: 18px; }
.jornal .rep { font-size: 17px; color: #5a1010; }

/* Título */
#titulo-cv { position: absolute; inset: 0; width: 640px; height: 640px; }
.titulo-box { position: relative; text-align: center; margin-top: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
#overlay.titulo-ov { padding: 10px 20px; overflow: hidden; }
.titulo-box .btn { margin: 4px auto !important; width: 250px !important; font-size: 20px !important; background: rgba(10,6,8,.82); }
.titulo-box .btn:first-of-type { margin-top: auto !important; }
.versao { position: absolute; right: 12px; bottom: 8px; font-size: 14px; color: #8a6a5a; z-index: 2; }
#logo { width: 300px; image-rendering: pixelated; margin: 0 auto 4px; display: block; filter: drop-shadow(4px 4px 0 #000); }
.titulo-box h1 { font-weight: normal; font-size: 74px; line-height: 60px; margin: 0; color: #f0e0c0; text-shadow: 4px 4px 0 var(--sangue), 8px 8px 0 #000; letter-spacing: 4px; }
.titulo-box p { color: #c8a080; font-size: 20px; margin: 10px 0 30px; }
.titulo-box .btn { display: block; margin: 10px auto; width: 280px; font-size: 24px; }

/* Modo de teste */
.teste-grid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: center; font-size: 19px; }
.teste-grid select, .teste-grid input { font-family: inherit; font-size: 19px; background: #120e0c; color: var(--amarelo); border: 2px solid var(--borda); padding: 0 4px; }
.teste-grid input[type=number] { width: 60px; }
#nota-btn { position: absolute; left: 16px; top: 606px; z-index: 6; font-size: 14px !important; padding: 0 6px !important; color: var(--amarelo) !important; }
#dbg-btn { position: absolute; right: 16px; top: 606px; z-index: 6; font-size: 14px !important; padding: 0 6px !important; color: var(--verde) !important; }
pre.estado { font-size: 13px; line-height: 13px; white-space: pre-wrap; color: var(--verde); }

/* Mensagens de celular (estilo WhatsApp, em pixel) */
.chat { background: #0b141a; margin: -2px -6px 8px; padding: 0 8px 6px; display: flex; flex-direction: column; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #1f2c33; min-height: 60px; }
.chat-h { font-size: 16px; color: #e9edef; background: #1f2c33; margin: 0 -8px 6px; padding: 2px 8px; }
.chat-h span { color: #8696a0; font-size: 14px; margin-left: 6px; }
.bolha { max-width: 82%; padding: 3px 8px 2px; margin: 3px 0; font-size: 19px; line-height: 19px; color: #e9edef; position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.bolha.entra { background: #202c33; align-self: flex-start; }
.bolha.sai { background: #005c4b; align-self: flex-end; }
.bolha small { display: block; text-align: right; font-size: 13px; line-height: 12px; color: #8696a0; }
.bolha .tk.lido { color: #53bdeb; }
.bolha.pontos { display: flex; gap: 4px; padding: 8px 10px; }
.bolha.pontos i { width: 6px; height: 6px; background: #8696a0; animation: ponto 1s infinite; }
.bolha.pontos i:nth-child(2) { animation-delay: .2s; } .bolha.pontos i:nth-child(3) { animation-delay: .4s; }
@keyframes ponto { 50% { transform: translateY(-3px); opacity: .5; } }
.bolha.seta::after { content: ' ▼'; color: #8696a0; font-size: 14px; position: absolute; right: -16px; bottom: 2px; animation: blink 1s steps(2) infinite; }

/* Relatório de fim de ato */
.relatorio { border: 2px solid #3a2c20; background: #120e0c; padding: 8px 12px; margin: 6px 0 12px; font-size: 18px; line-height: 18px; }
.relatorio .perfil b { color: var(--vermelho); font-weight: normal; font-size: 24px; display: block; }
.relatorio .perfil small { color: #bfa98a; font-size: 17px; }
.relatorio .traj { color: #8a7a6a; font-size: 15px; margin: 6px 0; }
.relatorio .numeros { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; }
.relatorio .numeros b, .relatorio .manch b { color: var(--amarelo); font-weight: normal; }
.relatorio .pessoas { color: #9ab08a; font-size: 16px; }
.relatorio .manch { font-size: 16px; margin-top: 4px; }
.relatorio .perdido { color: #8a5a4a; font-size: 15px; font-style: italic; margin-top: 4px; }

/* Itens */
.tag-item { font-weight: normal; color: #2a6a3a; }
.item .usar { float: right; font-size: 16px; padding: 0 8px; color: var(--verde); }
.item .mostrar { float: right; font-size: 16px; padding: 0 8px; color: #9fb8c8; margin-left: 4px; }
.tag-sangue { color: #e04848; }
.tag-eco { color: #c8a0e0; }
.item small.uso { color: #7ab07a; }

/* Revelação dos dados ocultos */
.rv { opacity: .15; border-left: 4px solid #3a2c20; padding: 4px 10px; margin: 8px 0; transition: opacity .3s; font-size: 18px; line-height: 18px; }
.rv.on { opacity: 1; border-left-color: var(--sangue); }
.rv-esc { color: #bfa98a; }
.rv-dado { margin: 3px 0; }
.rv-num { display: inline-block; min-width: 38px; text-align: center; font-size: 26px; color: var(--vermelho); background: #000; border: 2px solid var(--sangue); }
.rv.pronto .rv-num { color: var(--amarelo); }
.rv-conta { color: #8a7a6a; font-size: 16px; }
.rv b { font-weight: normal; visibility: hidden; } .rv.pronto b { visibility: visible; }
.rv b.ok { color: var(--verde); } .rv b.falha { color: var(--laranja); }
.rv-conseq { visibility: hidden; font-size: 17px; } .rv.pronto .rv-conseq { visibility: visible; }
.rv-conseq span { display: block; }
.rv-conseq .certo { color: #9ad09a; } .rv-conseq .engano s { color: #c06050; } .rv-conseq .verdade { color: var(--amarelo); } .rv-conseq .mestre { color: #ff70c0; }

.jornal .prova { font-size: 17px; color: #1a4a2a; border-top: 1px dashed #111; padding-top: 4px; margin-top: 6px; }

/* Ligação */
.ligacao { background: #0d1418; margin: -2px -6px 8px; padding: 0 8px 6px; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #1d3a2a; }
.tel-h { display: flex; align-items: center; gap: 6px; font-size: 17px; color: #d0f0d8; background: #123020; margin: 0 -8px 6px; padding: 2px 8px; }
.tel-ico { color: #6ad06a; animation: blink 1.4s steps(2) infinite; }
.tel-t { color: #7ab08a; font-size: 15px; }
.onda { margin-left: auto; display: flex; gap: 2px; align-items: center; height: 14px; }
.onda i { width: 3px; background: #6ad06a; animation: onda .8s infinite ease-in-out; }
.onda i:nth-child(2) { animation-delay: .1s } .onda i:nth-child(3) { animation-delay: .25s } .onda i:nth-child(4) { animation-delay: .4s } .onda i:nth-child(5) { animation-delay: .15s }
@keyframes onda { 0%, 100% { height: 3px } 50% { height: 13px } }
.fala-tel { font-size: 19px; line-height: 19px; color: #d8e8dc; margin: 4px 0; position: relative; }
.fala-tel b { display: block; font-weight: normal; font-size: 14px; color: #6ad06a; letter-spacing: 1px; }
.fala-tel.minha { color: #a8b8ac; padding-left: 16px; } .fala-tel.minha b { color: #8a9a8e; }
.fala-tel.velho { opacity: .5; }
.fala-tel.seta::after { content: ' ▼'; color: #6ad06a; font-size: 13px; animation: blink 1s steps(2) infinite; }

/* Apps */
#overlay.app-ov { background: rgba(4,4,6,.97); padding: 18px 26px; }
.app-nav { background: #e8e4dc; color: #1a1a1a; border: 3px solid #000; box-shadow: 6px 6px 0 #000; }
.nav-barra { display: flex; gap: 8px; align-items: center; background: #b8b4ac; padding: 3px 8px; border-bottom: 3px solid #000; font-size: 15px; }
.nav-bolas i { display: inline-block; width: 9px; height: 9px; background: #8a2a2a; margin-right: 3px; } .nav-bolas i:nth-child(2) { background: #a88a2a } .nav-bolas i:nth-child(3) { background: #2a7a3a }
.nav-url { flex: 1; background: #f4f0e8; padding: 0 6px; border: 2px solid #6a665e; color: #3a3a3a; }
.nav-corpo { padding: 10px 14px; min-height: 260px; }
.nav-titulo { font-size: 24px; color: #1a3a6a; border-bottom: 2px solid #1a3a6a; margin-bottom: 8px; }
.nav-campo { border: 2px solid #3a3a3a; background: #fff; padding: 2px 8px; font-size: 20px; margin-bottom: 10px; }
.cursor { font-weight: normal; animation: blink .8s steps(2) infinite; }
.nav-load { height: 8px; background: #c8c4bc; margin: 8px 0; overflow: hidden; } .nav-load i { display: block; height: 100%; width: 30%; background: #1a3a6a; animation: carrega .9s linear; }
@keyframes carrega { from { width: 0 } to { width: 100% } }
.nav-bloco { border-left: 3px solid #1a3a6a; padding-left: 8px; margin: 8px 0; }
.nav-q { color: #6a665e; font-size: 15px; }
.nav-r { margin: 4px 0 6px; font-size: 18px; line-height: 18px; }
.nav-r b { font-weight: normal; color: #1a3a6a; } .nav-r small { display: block; color: #3a3a3a; font-size: 16px; line-height: 16px; }
.nav-r.dest b { color: #a01a2a; } .nav-r.dest { background: #f8e8d8; padding: 2px 4px; }
.nav-seg { font-size: 17px !important; margin: 4px 0; }
.nav-rodape { font-size: 13px; color: #6a665e; padding: 2px 8px; border-top: 2px solid #b8b4ac; }
.app-tel { width: 360px; margin: 0 auto; background: #0b0e12; border: 4px solid #1a1a1a; box-shadow: 0 0 0 3px #3a3a3a, 6px 6px 0 #000; border-radius: 0; }
.tel-topo { background: #15191f; color: #e8e8e8; padding: 4px 10px; font-size: 18px; border-bottom: 2px solid #2a2e36; }
.tel-topo span { color: #6a7a8a; font-size: 15px; margin-left: 6px; }
.feed { height: 420px; overflow-y: auto; padding: 0 8px; }
.post { border-bottom: 1px solid #22262e; padding: 6px 0; color: #dfe4ea; font-size: 18px; line-height: 18px; animation: entra .3s; }
.post-h b { font-weight: normal; color: #fff; } .post-h span { color: #6a7a8a; font-size: 14px; }
.post-n { color: #6a7a8a; font-size: 14px; margin-top: 2px; }
.post.apagado .post-t { color: #6a7a8a; font-style: italic; }
@keyframes entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1 } }
.corrida canvas { width: 352px; height: 211px; display: block; image-rendering: pixelated; border-bottom: 2px solid #2a2e36; }
.cr-mot { padding: 4px 10px; color: #e8e8e8; font-size: 18px; border-bottom: 2px solid #2a2e36; } .cr-mot b { font-weight: normal; color: #ffd27a; } .cr-mot small { display: block; color: #8a9aaa; font-size: 15px; }
.cr-chat { height: 170px; overflow-y: auto; padding: 4px 10px; }
.cr-l { color: #dfe4ea; font-size: 18px; line-height: 18px; margin: 5px 0; animation: entra .3s; } .cr-l b { font-weight: normal; color: #ffd27a; font-size: 14px; margin-right: 4px; }
.cr-l.eu { color: #a8b0b8; } .cr-l.eu b { color: #8a9aaa; }

/* Estilos de fala */
.est-ameaca { color: #3a1410; }
.est-grito { color: #a01a2a; font-size: 22px; animation: tremor .12s 4; }
.est-sussurro { color: #6a5a4a; font-size: 17px; font-style: italic; }
.est-escuro { color: #8a8478; }
.treme { display: inline-block; color: #a01a2a; animation: tremor .1s infinite; }
#tela.sacode { animation: tremor .08s 5; }
#dialogo.dlg-escuro { background: #141210; color: #8a8478; box-shadow: 0 0 0 2px #2a2420, 0 0 0 4px #000, inset 0 0 30px #000; }
#dialogo.dlg-escuro .esc { color: #a8a090; }
#dialogo.dlg-escuro .eco { color: #5a5248; }
/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; transition: background .2s; }
#tela.hud-escuro #hud, #tela.hud-lanterna #hud, #tela.hud-isqueiro #hud { -webkit-mask: linear-gradient(#000 0 0); }
#tela.hud-escuro #dialogo, #tela.hud-lanterna #dialogo, #tela.hud-isqueiro #dialogo { z-index: 4; }
.bateria { position: absolute; right: 200px; top: 66px; display: flex; align-items: center; gap: 6px; font-size: 16px; color: #e8e8e8; background: rgba(0,0,0,.75); padding: 1px 8px; border: 1px solid #555; }
.bateria b { font-weight: normal; color: #6ad06a; letter-spacing: -1px; }
.bateria.baixa b { color: #e0403a; }
.bateria.baixa span { color: #e0403a; animation: blink .8s steps(2) infinite; }

.est-intruso { color: #a01a2a; font-size: 18px; opacity: .85; animation: glitch 2.2s infinite; }
.relatorio .manchas { margin-top: 6px; border-top: 1px dashed #3a2c20; padding-top: 4px; }
.relatorio .manchas b { font-weight: normal; color: var(--vermelho); display: block; font-size: 16px; }
.relatorio .manchas span { display: block; color: #c8a090; font-size: 15px; line-height: 15px; }

/* Bloco que se deteriora com a Obsessão */
#notas.gasto1 { background-image: var(--papel-img, none), radial-gradient(circle at 75% 80%, rgba(110,70,30,.35) 0 18px, rgba(110,70,30,.15) 19px 22px, transparent 23px); }
#notas.gasto2 #listanotas li { transform: rotate(-.6deg); letter-spacing: .3px; }
#notas.gasto2 #listanotas li:nth-child(even) { transform: rotate(.8deg) translateX(2px); }
#notas.gasto3 { background-image: var(--papel-img, none), radial-gradient(ellipse at 20% 30%, rgba(140,10,20,.28) 0 14px, transparent 26px), radial-gradient(circle at 75% 80%, rgba(110,70,30,.35) 0 18px, transparent 23px); }
#notas.gasto3 h3::after { content: ' não durma'; color: #a01a2a; font-size: 13px; font-style: italic; }
#listanotas li.rasura { text-decoration: line-through; text-decoration-color: rgba(30,20,10,.7); text-decoration-thickness: 2px; }

/* Carta de ato */
#overlay.carta-ov { background: #000; padding: 0; cursor: pointer; }
.carta { position: absolute; inset: 0; animation: cartaEntra 1.4s ease-out; }
.carta img { width: 640px; height: 640px; image-rendering: pixelated; display: block; }
.carta-txt { position: absolute; left: 0; right: 0; bottom: 50px; text-align: center; text-shadow: 3px 3px 0 #000; }
.carta-txt span { display: block; color: #e0403a; font-size: 26px; letter-spacing: 8px; }
.carta-txt b { display: block; font-weight: normal; color: #f0e0c0; font-size: 46px; letter-spacing: 3px; line-height: 44px; }
.carta-txt small { display: block; color: #bfa98a; font-size: 20px; }
@keyframes cartaEntra { from { opacity: 0; filter: brightness(3) contrast(.5); } to { opacity: 1; filter: none; } }

/* Pesadelo */
#tela.sonho #ccena, #tela.sonho #cshader { filter: invert(1) hue-rotate(160deg) brightness(.5) contrast(1.7) saturate(2.2) sepia(.25); animation: respira 6s ease-in-out infinite; }
#tela.sonho #cret { filter: grayscale(1) contrast(1.5) brightness(.75) sepia(.5) hue-rotate(-40deg); }
#tela.sonho #dialogo { background: #0c0910; color: #d8c8e8; box-shadow: 0 0 0 2px #3a2440, 0 0 0 4px #000, inset 0 0 40px #2a0a20; }
#tela.sonho #dialogo .esc { color: #e8d8f0; } #tela.sonho #dialogo .esc .n { color: #e0408a; }
#tela.sonho #barra, #tela.sonho #dado, #tela.sonho #notas, #tela.sonho #botoes { opacity: .25; filter: blur(1px); }
#tela.sonho #nome { background: #1a0a20; color: #e0408a; }
#tela.sonho #vinheta { box-shadow: inset 0 0 160px rgba(120,0,60,.6); }
.est-sonho { color: #d8c8e8; letter-spacing: .6px; text-shadow: 0 0 6px rgba(224,64,138,.35); }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* Gravador */
#rec { position: absolute; left: 380px; top: 386px; z-index: 5; font-size: 15px; color: #e0403a; opacity: 0; pointer-events: none; }
#rec.on { animation: rec 2.4s; }
@keyframes rec { 0%, 80% { opacity: 1; } 10%, 30%, 50%, 70% { opacity: .2; } 100% { opacity: 0; } }
.fita { border: 2px solid #3a2c20; background: #120e0c; padding: 6px 10px; margin: 8px 0; }
.fita-h { display: flex; gap: 8px; align-items: center; color: #6ad06a; font-size: 16px; }
.fita-op { display: block; width: 100%; text-align: left; font-size: 18px !important; line-height: 18px; margin: 4px 0; padding: 4px 8px !important; color: #e8dcbc !important; }
.fita-op.recorte { color: #e0903a !important; border-style: dashed; }
.jornal .cita { margin: 8px 0; padding: 4px 12px; border-left: 4px solid #111; font-size: 22px; line-height: 22px; font-style: italic; }
.jornal .cita small { display: block; font-size: 15px; font-style: normal; }
/* Mural */
#overlay.mural-ov { background: #3a2616; background-image: radial-gradient(#5a3c22 1px, transparent 1px); background-size: 6px 6px; padding: 14px 18px; }
.mural { position: relative; width: 600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 14px; align-items: start; }
#mu-fios { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.fio { fill: none; stroke-width: 2.5; } .fio.certo { stroke: #c02020; } .fio.frouxo { stroke: #8a7a6a; stroke-dasharray: 4 4; }
.cartao { position: relative; min-height: 64px; background: #e8dcbc; color: #1e1610; border: none; box-shadow: 2px 3px 0 rgba(0,0,0,.5); font-family: inherit; font-size: 15px; line-height: 16px; padding: 15px 8px 8px; text-align: left; cursor: pointer; z-index: 1; transition: opacity .4s, filter .4s; }
.cartao::before { content: ''; position: absolute; left: calc(50% - 4px); top: 3px; width: 8px; height: 8px; background: #c02020; border-radius: 50%; box-shadow: 1px 1px 0 #000; }
.cartao.sel { outline: 3px solid #c02020; }
.cartao.del { background: #e8c8c0; color: #6a1010; font-style: italic; }
.cartao.morto { opacity: .55; filter: grayscale(.6); }
.cartao.morto::before { background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.cartao.ligado { background: #f0e4c4; box-shadow: 2px 3px 0 rgba(0,0,0,.5), inset 0 0 0 2px #c02020; }
.cartao.dica { animation: dica 1s ease-in-out infinite; }
@keyframes dica { 50% { box-shadow: 2px 3px 0 rgba(0,0,0,.5), 0 0 0 4px rgba(240,200,80,.8); } }
#tela.sem-efeitos .cartao.dica { animation: none; outline: 3px dashed #f0c850; }
.mu-concl { display: inline-block; max-width: 520px; background: #f0e4c4; color: #1e1610; padding: 6px 12px; box-shadow: 2px 3px 0 rgba(0,0,0,.5); text-align: left; transform: rotate(-1deg); }
.mu-concl small { display: block; color: #a01818; font-size: 13px; letter-spacing: 2px; }
.mu-alivio { display: block; color: #b8a888; font-size: 14px; margin-top: 4px; }
.mu-msg { min-height: 40px; margin-bottom: 10px; color: #f0e0c0; font-size: 18px; text-align: center; margin-top: 6px; }
/* Mapa */
.mapa { position: relative; width: 600px; height: 400px; margin: 0 auto; background: #0c1014; border: 2px solid #2a2e36; background-image: linear-gradient(#141a22 1px, transparent 1px), linear-gradient(90deg, #141a22 1px, transparent 1px); background-size: 24px 24px; overflow: hidden; }
.mapa svg { position: absolute; left: 0; top: 0; }
.tiete { fill: none; stroke: #1e3a5a; stroke-width: 6; }
.rio { fill: none; stroke: #3a7ac0; stroke-width: 3; stroke-dasharray: 6 4; opacity: .8; animation: corre 3s linear infinite; }
.rio.forte { stroke: #6ab0ff; stroke-width: 4; filter: drop-shadow(0 0 4px #3a7ac0); }
@keyframes corre { to { stroke-dashoffset: -20; } }
.rio-nome { fill: #5a8ab0; font-family: 'VT323', monospace; font-size: 14px; }
.pino { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #a01a2a; color: #fff; border: 2px solid #000; font-family: inherit; font-size: 13px; line-height: 12px; padding: 0; cursor: pointer; z-index: 3; }
.pino.no-rio { background: #e0403a; box-shadow: 0 0 0 3px rgba(106,176,255,.6); }
.bairro { position: absolute; transform: translate(-50%, 14px); font-size: 14px; color: #8a9aaa; white-space: nowrap; cursor: pointer; z-index: 2; }
.bairro.fechado { color: #3a4450; }
.mapa-info { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #e8e8e8; font-size: 16px; line-height: 16px; padding: 4px 8px; border: 1px solid #3a3a3a; max-width: 300px; z-index: 4; }
.mapa-info b { font-weight: normal; color: var(--amarelo); }

#overlay.mapa-ov { padding: 14px 20px; }
#overlay.mapa-ov .fechar { top: 8px; }

/* Aviso de mensagem / ligação, no canto direito */
#notif { position: absolute; right: 16px; top: 64px; z-index: 6; display: flex; align-items: center; gap: 6px; background: #0b141a; border: 2px solid #1f2c33; box-shadow: 0 0 0 2px #000; padding: 3px 10px 3px 6px; transform: translateX(240px); transition: transform .35s; pointer-events: none; }
#notif.on { transform: translateX(0); }
#notif .ni { color: #6ad06a; font-size: 18px; animation: blink 1s steps(2) infinite; }
#notif b { font-weight: normal; color: #e9edef; font-size: 18px; }
#notif small { color: #8696a0; font-size: 14px; }

/* Tecla SAP */
#botoes button.novo { color: #6ad06a; animation: blink 1.2s steps(2) infinite; }
.sap { border-left: 4px solid #3a5a3a; padding: 4px 10px; margin: 10px 0; }
.sap b { font-weight: normal; color: var(--verde); font-size: 21px; display: block; }
.sap p { margin: 2px 0 0; font-size: 18px; line-height: 18px; color: #d8ccb0; }
.sap-agora { background: #102010; border: 2px solid #2a4a2a; padding: 6px 10px; margin-bottom: 10px; font-size: 18px; line-height: 18px; }
.sap-agora b { display: block; font-weight: normal; color: var(--amarelo); }

/* Fim de jogo */
.fimjogo { text-align: center; }
.fj-sub { color: var(--vermelho); letter-spacing: 8px; font-size: 18px; }
.fimjogo h2 { font-size: 44px !important; color: #f0e0c0 !important; margin: 0 0 10px !important; }
.fj-num { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 17px; text-align: left; border: 2px solid #3a2c20; padding: 8px 12px; }
.fj-num b, .fj-capa { color: var(--amarelo); font-weight: normal; }
.fimjogo h3 { text-align: left; }
.fj-capa, .fj-mancha { text-align: left; font-size: 16px; line-height: 16px; margin: 3px 0; }
.fj-mancha { color: #c8a090; }
.fj-finais { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fj-finais span { border: 2px solid #3a2c20; padding: 2px 8px; color: #5a4a3a; font-size: 16px; }
.fj-finais span.on { color: var(--amarelo); border-color: var(--sangue); }

/* ---------- Sequência no ritmo (Naja, garoa) ---------- */
#overlay.ritmo-ov { background: #000; padding: 0; overflow: hidden; cursor: pointer; }
#rt { width: 640px; height: 640px; position: absolute; inset: 0; }
#rt-txt { position: absolute; left: 30px; right: 30px; bottom: 92px; text-align: center; font-size: 34px; line-height: 34px; color: #fff0e8; text-shadow: 3px 3px 0 #000, -2px 0 0 rgba(255,0,40,.7), 2px 0 0 rgba(0,80,255,.7); opacity: 0; transition: opacity .25s; pointer-events: none; }
#rt-txt.on { opacity: 1; animation: rt-bate .47s ease-out; }
#rt-txt.grande { font-size: 56px; line-height: 56px; letter-spacing: 4px; bottom: 260px; }
#rt-txt.frio { color: #d8f0ff; text-shadow: 2px 2px 0 #000; }
#rt-txt.sussurro { font-size: 26px; color: #c8b8b8; }
@keyframes rt-bate { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.rt-dica { position: absolute; right: 12px; top: 8px; font-size: 15px; color: rgba(255,255,255,.35); pointer-events: none; }
#rt-ok { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: auto; display: none; }
#rt-ok.on { display: block; animation: blink 1.2s steps(2) 2; }
.ritmo-ov.lento #rt { filter: saturate(.55) blur(.6px) !important; }
.ritmo-ov.lento #rt-txt { transition: opacity 1.2s; }
/* depois da garoa: o mundo fica nítido, frio, um pouco errado */
#tela.sob-garoa #ccena, #tela.sob-garoa #cshader { filter: saturate(.45) contrast(1.35) brightness(1.1) hue-rotate(-18deg); }
#tela.sob-garoa #cret { filter: contrast(1.25) saturate(.6); }

/* ---------- Conforto ---------- */
#tela.fonte-g #dialogo { font-size: 23px; line-height: 23px; }
#tela.fonte-g .esc { font-size: 22px; line-height: 22px; }
#tela.sem-efeitos .treme, #tela.sem-efeitos .glitch { animation: none; }
#tela.sem-efeitos.sacode { animation: none; }
#tela.sem-efeitos .ritmo-ov #rt-txt.on { animation: none; }
.esc.vista { color: #6a5a4a; }
.esc.vista::after { content: ' ·'; color: #9a8a7a; }
.menu-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.menu-grade .btn.grande { width: 100%; margin: 0; }
.opc { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.opc > b { width: 230px; font-weight: normal; color: var(--amarelo); }
.opc .btn.on { background: var(--sangue); color: #fff0e0; }
.opc input[type=range] { width: 200px; accent-color: #a01a2a; }
.hist p { margin: 0 0 8px; font-size: 19px; line-height: 20px; color: #c8bca0; }
.hist b { color: var(--laranja); font-weight: normal; }
.hist .h-esc { color: #7a9a7a; font-style: italic; }
.hist .h-zap { color: #a8d8b0; } .hist .h-tel { color: #b8c8e8; }
.hist .h-intruso { color: var(--sangue); font-style: italic; }
#t-cont small { display: block; font-size: 15px; color: #9a8a7a; line-height: 15px; }
#nome.mudo { color: #8a4a48; background: #1a0a0c; }
#cret.mudo { filter: brightness(.72) saturate(.8); }

/* ---------- Rotas de build ---------- */
.esc .tag-rota { color: #3a7ab0; }
.esc.rota { border-left-color: rgba(58,122,176,.5); }
.esc.rota.bloq { opacity: .55; }
.esc.rota.bloq .tag-rota { color: #5a6a7a; }

/* ---------- Conquistas ---------- */
#conq { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -90px); z-index: 30; background: #120c0a; border: 2px solid var(--amarelo); box-shadow: 0 0 0 2px #000, 4px 4px 0 #000; padding: 4px 14px; font-size: 18px; color: var(--amarelo); transition: transform .35s; pointer-events: none; white-space: nowrap; }
#conq.on { transform: translate(-50%, 0); }
#conq small { display: block; font-size: 15px; color: #b8a888; }
.conq-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.conq { background: #120e0c; border: 2px solid #2a2018; padding: 4px 8px; font-size: 17px; line-height: 17px; }
.conq b { display: block; color: #6a5a4a; font-weight: normal; font-size: 19px; }
.conq.on { border-color: #6a5420; } .conq.on b { color: var(--amarelo); }
.conq small { color: #8a7a6a; }
.perfil-fim { border: 2px solid #3a7ab0; padding: 6px 10px; margin: 10px 0; color: #a8c8e8; }
.perfil-fim b { color: #e8f0ff; font-weight: normal; font-size: 22px; display: block; }
.rotas-fechadas { font-size: 16px; color: #5a6a7a; padding: 2px 8px; }

/* celular: sem zoom de dois toques (atrapalha clicar rápido no diálogo) */
html, body, #tela, #dialogo, #escolhas, .esc, button { touch-action: manipulation; }

/* ---------- Sangue de Filho: a Transmuta começou ---------- */
#tela.sangue1 #ccena, #tela.sangue1 #cshader { filter: saturate(.82) contrast(1.12) brightness(1.05); }
#tela.sangue2 #ccena, #tela.sangue2 #cshader { filter: saturate(.62) contrast(1.28) brightness(1.1) hue-rotate(-8deg); }
#tela.sangue2 #cret { filter: contrast(1.15) saturate(.85); }
#tela.sangue1 #vinheta, #tela.sangue2 #vinheta { animation: pulso-sangue 1.3s ease-in-out infinite; }
#tela.sangue2 #vinheta { animation-duration: 1.05s; }
@keyframes pulso-sangue { 0%, 100% { box-shadow: inset 0 0 70px rgba(110,0,12,.22); } 12% { box-shadow: inset 0 0 90px rgba(150,0,14,.42); } 24% { box-shadow: inset 0 0 75px rgba(120,0,12,.26); } 36% { box-shadow: inset 0 0 88px rgba(140,0,14,.36); } }
#tela.sem-efeitos #vinheta { animation: none !important; }
#rt-txt.longo { font-size: 27px; line-height: 28px; }
#rt-txt.grande.longo { font-size: 40px; line-height: 42px; }
#rt-txt { left: 40px; right: 40px; }
#rt-txt.on { animation: rt-bate .47s ease-out; transform-origin: center bottom; }
@keyframes rt-bate { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* playtest */
.pt-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pt-save { text-align: left !important; display: block; width: 100%; white-space: normal !important; line-height: 1.15; padding: 6px 8px !important; }
.pt-save b { display: block; color: var(--amarelo); }
.pt-save small { display: block; font-size: 15px; opacity: .85; margin-top: 2px; }
.pt-save .pt-marcos { color: #9fb8c8; }
.pt-save .pt-manchas { color: #c46060; }
.pt-notas p { margin: 4px 0; font-size: 16px; }
.pt-notas b { color: #9fb8c8; font-weight: normal; }

/* depois de dar o braço: a noite pálida (o shader faz melhor; isto é a reserva) */
#tela.palido #ccena { filter: saturate(.5) brightness(.95) contrast(1.05); }
#tela.palido #cret { filter: saturate(.7); }

/* =================== Polimento de apresentação (frente de design) =================== */
/* ritmo: cada fala entra com um respiro curto; as opções chegam uma depois da outra.
   :where() zera a especificidade, para os estilos de fala (grito, intruso) manterem a própria animação */
:where(#texto) > p, .bolha, .fala-tel { animation: linha-entra .16s ease-out; }
@keyframes linha-entra { from { opacity: 0; transform: translateY(3px); } }
.esc { animation: esc-entra .22s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes esc-entra { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { :where(#texto) > p, .bolha, .fala-tel, .esc { animation: none; } }

/* HUD: a célula de Obsessão que acabou de acender pulsa; a plaquinha do lugar ganha um fio de sangue */
#obsbar .cel.nova { animation: celnova .3s steps(2) 4; }
@keyframes celnova { 50% { background: #fff0e0; box-shadow: 0 0 6px var(--vermelho); } }
#local { border-left: 3px solid var(--sangue); letter-spacing: 1px; z-index: 2; }
#local { transition: opacity .7s ease-out; }
#local.espera { opacity: 0; transition: none; }

/* cartão de lugar: o nome do lugar novo atravessa o terço de baixo da cena e some */
#cartao-local { position: absolute; left: 4px; right: 4px; bottom: 40px; text-align: center; padding: 8px 0 6px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.74) 18%, rgba(0,0,0,.74) 82%, transparent); opacity: 0; pointer-events: none; z-index: 2; }
#cartao-local b { display: block; font-weight: normal; font-size: 34px; line-height: 32px; color: #f0e0c0; letter-spacing: 3px; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(160,26,42,.45); }
#cartao-local small { display: block; font-size: 17px; color: var(--amarelo); letter-spacing: 2px; }
#cartao-local.on { animation: cartao 2.6s ease-out forwards; }
@keyframes cartao { 0% { opacity: 0; transform: translateY(6px); } 14% { opacity: 1; transform: none; } 76% { opacity: 1; } 100% { opacity: 0; } }
#tela.sonho #cartao-local { display: none; }

/* estilos de fala novos (campo estilo, na linha ou no nó) */
.est-ameaca { letter-spacing: .4px; text-shadow: 0 0 1px rgba(160,26,42,.35); }
.est-lembranca { color: #6a5a48; font-style: italic; border-left: 2px dotted #a08a6a; padding-left: 8px; }
.est-documento { font-size: 17px; line-height: 18px; color: #1a1712; background: #f6f0e0; border: 1px solid #b8a888; box-shadow: 2px 2px 0 rgba(0,0,0,.25); padding: 4px 8px; margin: 2px 4px 8px !important; transform: rotate(-.4deg); letter-spacing: .5px; }
.est-cartela { text-align: center; font-size: 30px; line-height: 30px; letter-spacing: 3px; color: var(--sangue); margin: 16px 0 !important; }
#texto p.est-cartela.seta::after { content: ''; }
#dialogo.dlg-lembranca { background-color: #d8c8a0; }
#dialogo.dlg-documento { background-color: #ece4cc; }
#tela.sonho .est-lembranca { color: #b8a8c8; border-left-color: #6a4a7a; }

/* zap: a foto do contato no topo; feed: cada perfil com o seu avatar gerado */
.chat-av { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: -2px 6px 0 2px; image-rendering: auto; box-shadow: 0 0 0 1px #000; }
.post-h .av { float: left; margin: 2px 6px 0 0; }
.post-t, .post-n { margin-left: 28px; }

/* a capa do Subsolo: página de jornal de verdade */
#overlay.jornal-ov { background: #120e0b; background-image: radial-gradient(ellipse at 50% 30%, #2a1e14, transparent 70%); padding: 18px 26px; }
.jornal { transform: rotate(-.5deg); animation: jornal-entra .5s ease-out; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px); }
@keyframes jornal-entra { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } }
.jornal .mast { font-size: 58px; letter-spacing: 10px; }
.jornal .fio-duplo { border-top: 3px solid #111; border-bottom: 1px solid #111; height: 4px; margin: 2px 0 4px; }
.jornal .corpo { display: flex; gap: 12px; margin-top: 8px; align-items: flex-start; }
.jornal .foto { margin: 0; flex: 0 0 208px; }
.jornal .foto canvas { width: 208px; height: 152px; border: 1px solid #111; }
.jornal .foto figcaption { font-size: 13px; line-height: 13px; color: #333; margin-top: 2px; }
.jornal .foto figcaption i { color: #777; }
.jornal .colunas { column-count: 2; column-gap: 12px; column-rule: 1px solid #c8bca0; font-size: 16px; line-height: 16px; text-align: justify; hyphens: auto; }
.jornal .colunas p { margin: 0 0 6px; }
.jornal .capitular::first-letter { float: left; font-size: 42px; line-height: 32px; padding: 2px 3px 0 0; color: #a01a2a; }

/* carta do ato: número, título e subtítulo entram em tempos */
.carta-txt span { animation: sobe .6s .5s both; }
.carta-txt b { animation: sobe .7s 1s both; }
.carta-txt small { animation: sobe .7s 1.6s both; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

/* fim de jogo: a última imagem fica por trás das contas */
.fj-fundo { position: absolute; left: 0; top: 0; width: 100%; height: 320px; background-size: cover; background-position: center; image-rendering: pixelated; opacity: .32; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); pointer-events: none; }
.fimjogo { position: relative; }

/* mural: o fio certo é puxado de uma ponta à outra; mapa: corpo em cima de rio pulsa */
.fio.certo { stroke-dasharray: 900; stroke-dashoffset: 900; animation: puxa .6s ease-out forwards; }
@keyframes puxa { to { stroke-dashoffset: 0; } }
.pino.no-rio { animation: pino 1.8s ease-in-out infinite; }
@keyframes pino { 50% { box-shadow: 0 0 0 6px rgba(106,176,255,.15); } }
#tela.sem-efeitos .pino.no-rio { animation: none; }

/* hud:'camera' — a cena pela tela do celular (foto, vídeo) */
.cam { position: absolute; left: 16px; top: 64px; width: 416px; height: 304px; pointer-events: none; }
.cam i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(240,240,240,.85); }
.cam i:nth-child(1) { left: 12px; top: 12px; border-width: 2px 0 0 2px; } .cam i:nth-child(2) { right: 12px; top: 12px; border-width: 2px 2px 0 0; }
.cam i:nth-child(3) { left: 12px; bottom: 12px; border-width: 0 0 2px 2px; } .cam i:nth-child(4) { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; }
.cam b { position: absolute; left: 22px; top: 18px; font-weight: normal; font-size: 16px; color: #ff4a3a; text-shadow: 1px 1px 0 #000; animation: blink 1.2s steps(2) infinite; }
.cam small { position: absolute; right: 24px; top: 18px; font-size: 15px; color: #f0f0f0; text-shadow: 1px 1px 0 #000; }
.cam-foco { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 2px solid rgba(255,220,90,.9); animation: foco 2.4s ease-in-out infinite; }
@keyframes foco { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 35% { transform: scale(.94); } 45% { transform: scale(1); } }
#tela.sem-efeitos .cam b, #tela.sem-efeitos .cam-foco { animation: none; }