/* Enigma — terminal de charadas bíblicas. Cores em tokens; "claro" é cinza neutro (padrão dos jogos). */
:root { --fg:#39ff6a; --fg-dim:#1f9e43; --glow:rgba(57,255,106,.45); --bg:#030a04; --alerta:#ff4d4d; --alerta-glow:rgba(255,77,77,.6); --linhas:rgba(0,0,0,.28); }
body[data-cor="ambar"] { --fg:#ffb000; --fg-dim:#a87300; --glow:rgba(255,176,0,.45); --bg:#0a0700; }
body[data-cor="ciano"] { --fg:#3ee8ff; --fg-dim:#1c8fa0; --glow:rgba(62,232,255,.4); --bg:#020a0c; }
body[data-cor="laranja"] { --fg:#ff9800; --fg-dim:#a86400; --glow:rgba(255,152,0,.45); --bg:#0b0702; }
body[data-cor="azul"] { --fg:#6aa8ff; --fg-dim:#3d64a3; --glow:rgba(106,168,255,.45); --bg:#03060c; }
body[data-cor="branco"] { --fg:#e8e8e8; --fg-dim:#8a8a8a; --glow:rgba(232,232,232,.35); --bg:#080808; }
body[data-tema="claro"] { --bg:#f2f2f2; --glow:transparent; --linhas:rgba(0,0,0,.035); --alerta:#c41d1d; --alerta-glow:transparent; --fg:#0b6b2a; --fg-dim:#5c8a68; }
body[data-tema="claro"][data-cor="ambar"] { --fg:#8a5a00; --fg-dim:#a08a5e; }
body[data-tema="claro"][data-cor="ciano"] { --fg:#00606f; --fg-dim:#5f8d94; }
body[data-tema="claro"][data-cor="laranja"] { --fg:#b35f00; --fg-dim:#a3845e; }
body[data-tema="claro"][data-cor="azul"] { --fg:#1d4f9e; --fg-dim:#6c84ab; }
body[data-tema="claro"][data-cor="branco"] { --fg:#1a1a1a; --fg-dim:#7a7a7a; }

* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); }
body {
  color:var(--fg); font-family:"VT323", ui-monospace, monospace;
  font-size:clamp(21px, 1.1vw + 14px, 29px); line-height:1.25;
  text-shadow:0 0 6px var(--glow); overflow:hidden; font-variant-ligatures:none; -webkit-tap-highlight-color:transparent;
}
button { font:inherit; color:inherit; text-shadow:inherit; }

#crt { position:fixed; inset:0; display:flex; flex-direction:column; height:100dvh;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--fg) 7%, var(--bg)) 0%, var(--bg) 75%); }
#crt::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, var(--linhas) 2px 4px); animation:pisca 6s infinite; }
@keyframes pisca { 0%,96%,100% { opacity:1 } 97% { opacity:.82 } 98% { opacity:1 } 99% { opacity:.9 } }

/* fim do tempo: a tela pulsa em vermelho, cada vez mais forte (--perigo vai de 0 a 1) */
#perigo { position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(255,0,0,.55) 100%), rgba(255,0,0,.12); }
#perigo.ativo { animation:pulsa var(--ritmo, 1s) ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity:calc(var(--perigo, .3) * .35) } 50% { opacity:calc(.25 + var(--perigo, .3) * .75) } }
#crt.tremor { animation:tremor .35s linear; }
@keyframes tremor { 20% { transform:translate(-4px,1px) } 40% { transform:translate(4px,-1px) } 60% { transform:translate(-3px,0) } 80% { transform:translate(2px,1px) } }
#crt.flash-ok::before, #crt.flash-erro::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:6; animation:flash .45s ease-out forwards; }
#crt.flash-ok::before { background:var(--fg); }
#crt.flash-erro::before { background:#ff1a1a; }
@keyframes flash { from { opacity:.35 } to { opacity:0 } }

header { display:flex; flex-wrap:wrap; gap:.15em 1em; align-items:center; padding:10px 16px; border-bottom:1px dashed var(--fg-dim); font-size:.85em; }
header .tit { letter-spacing:.12em; }
header .esp { flex:1; }
.urgente { color:var(--alerta); text-shadow:0 0 8px var(--alerta-glow); animation:alerta .5s steps(2) infinite; }
@keyframes alerta { 50% { opacity:.4 } }

#tela { flex:1; overflow-y:auto; padding:14px 16px 10px; scrollbar-width:thin; scrollbar-color:var(--fg-dim) transparent; }
#saida, #linha { max-width:52em; margin:0 auto; }
.l { white-space:pre-wrap; word-break:break-word; min-height:1.25em; }
.dim { color:var(--fg-dim); }
.alerta { color:var(--alerta); text-shadow:0 0 8px var(--alerta-glow); }
.ok { font-size:1.2em; letter-spacing:.08em; }
.eco { color:var(--fg-dim); }
.titulo { letter-spacing:.1em; }
#linha { display:none; white-space:pre-wrap; word-break:break-word; }
#linha.ativa { display:block; }
.cursor { display:inline-block; width:.55em; background:var(--fg); box-shadow:0 0 8px var(--glow); animation:cur 1s steps(2) infinite; }
@keyframes cur { 50% { opacity:0 } }

/* opções clicáveis do terminal */
.opc { display:flex; gap:.6em; width:100%; text-align:left; background:none; border:0; padding:.12em .3em; margin:0 -.3em; cursor:pointer; }
.opc:hover, .opc:focus-visible { background:var(--fg); color:var(--bg); text-shadow:none; outline:none; }
.opc .n { flex:none; }
.opc .t { flex:1; min-width:0; }
.opc .q { flex:none; color:var(--fg-dim); }
.opc:hover .q, .opc:focus-visible .q { color:var(--bg); }
.chave { display:flex; flex-wrap:wrap; gap:.3em .6em; align-items:baseline; padding:.35em 0; }
.chave .rot { flex-basis:100%; }
@media (min-width:700px) { .chave .rot { flex-basis:auto; min-width:11em; } }
.pil { background:none; border:1px solid var(--fg-dim); padding:0 .45em; cursor:pointer; }
.pil.on { background:var(--fg); color:var(--bg); text-shadow:none; border-color:var(--fg); }
.rank { display:grid; grid-template-columns:2.2em 1fr auto; gap:0 .8em; }
.rank .eu { text-decoration:underline; }

footer { display:flex; gap:.4em; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px dashed var(--fg-dim); font-size:.9em; }
footer .bt { flex:1; background:none; border:1px solid transparent; padding:.25em .3em; cursor:pointer; white-space:nowrap; }
footer .bt:hover, footer .bt:focus-visible, footer .bt.ativo { border-color:var(--fg-dim); outline:none; }
footer .bt.ativo { background:color-mix(in srgb, var(--fg) 14%, transparent); }

#entrada { position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:0; font-size:16px; border:0; padding:0; }

/* abertura em tela cheia (padrão dos jogos): ícone grande + nome; no PC lado a lado */
#abertura { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:24px; background:var(--bg); cursor:pointer; transition:opacity .45s; text-align:center; }
#abertura.sai { opacity:0; pointer-events:none; }
#abertura .icone { width:min(46vw, 230px); aspect-ratio:1; filter:drop-shadow(0 0 26px rgba(255,152,0,.35)); animation:liga .9s ease-out both; }
#abertura .icone img { width:100%; height:100%; display:block; }
@keyframes liga { 0% { transform:scaleY(.02); opacity:0 } 40% { transform:scaleY(.02); opacity:1 } 100% { transform:none } }
#abertura .nome { font-size:clamp(56px, 11vw, 120px); letter-spacing:.14em; line-height:1; min-height:1em; }
#abertura .frase { font-size:1.05em; min-height:1.3em; }
#abertura .toque { margin-top:6px; font-size:1em; padding:.3em 1em; border:1px solid var(--fg); background:none; animation:alerta 1.1s steps(2) infinite; }
#abertura .portal { display:flex; align-items:center; gap:10px; font-size:.8em; color:var(--fg-dim); }
#abertura .portal img { height:30px; width:auto; }
#abertura .portal b { color:#ff9800; font-weight:400; text-shadow:none; }
#abertura .lado { display:flex; flex-direction:column; align-items:center; gap:14px; }
@media (min-width:900px) and (min-height:500px) {
  #abertura { flex-direction:row; gap:6vw; }
  #abertura .icone { width:min(34vw, 380px); }
  #abertura .lado { align-items:flex-start; text-align:left; }
}

/* pausa: o arquivo some (não dá para pensar com o relógio parado) */
#crt.pausado #tela { visibility:hidden; }
#pausa { position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px; text-align:center; background:color-mix(in srgb, var(--bg) 88%, transparent); }
#pausa[hidden] { display:none; }
#pausa .pausa-tit { font-size:clamp(40px, 9vw, 84px); letter-spacing:.1em; animation:alerta 1.2s steps(2) infinite; }
#pausa .pil { font-size:1.2em; padding:.2em 1em; margin-top:8px; }