/* Subsolo à noite: um visual só, escuro de propósito. A paleta sai das fotos do ICC: o tijolinho, o
   cimento cinza, a luz fria da lâmpada tubular, o verde da placa de SAÍDA e o amarelo dos bancos.
   Layout: o jogo ocupa a tela inteira; as telas de texto ficam encostadas à esquerda, por cima do corredor. */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("../assets/fontes/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../assets/fontes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../assets/fontes/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("../assets/fontes/kalam-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-display: swap; src: url("../assets/fontes/courier-prime-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-display: swap; src: url("../assets/fontes/courier-prime-700.woff2") format("woff2"); }

:root {
  --breu: #0a0b09;
  --veu: rgb(10 11 9 / 0.86);
  --cimento: #8b8a83;
  --texto: #c9cec0;
  --tubo: #e3ecd9;
  --tijolo: #a65832;
  --saida: #5fe08f;
  --saida-fundo: #0c2e19;
  --banco: #d9a919;
  --papel: #e7e1ce;
  --tinta: #1f2433;
  --linha: rgb(227 236 217 / 0.32);
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --maquina: "Courier Prime", "Courier New", monospace;
  --placa: #1f5596;
  --papel-velho: #e6dcc0;
  --carimbo: #a3221a;
  --tinta-azul: #22305a;
  --mao: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--breu); color: var(--tubo); }
body { font: 500 16px/1.5 var(--display); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--banco); outline-offset: 3px; }

#tela { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }

/* telas de texto */
.tela {
  position: fixed; inset: 0; z-index: 3; display: grid; overflow-y: auto;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#titulo { align-items: center; background: linear-gradient(90deg, rgb(10 11 9 / 0.95) 0%, rgb(10 11 9 / 0.82) 42%, rgb(10 11 9 / 0.1) 100%); }
.coluna { max-width: 34rem; display: grid; gap: 1.1rem; justify-items: start; padding-left: clamp(0px, 5vw, 64px); }
.marca { display: flex; align-items: center; gap: 0.8rem; }
.emblema { width: 2.6rem; height: 2.6rem; flex: none; }
.sobre { margin: 0; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cimento); }
.sobre b { color: var(--tubo); font-weight: 600; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
h1 {
  margin: 0; font-weight: 800; font-size: clamp(3.6rem, 15vw, 8.5rem); line-height: 0.82; letter-spacing: 0.01em;
  text-transform: uppercase; text-wrap: balance; color: var(--tubo); text-shadow: 0 0 18px rgb(227 236 217 / 0.35);
  animation: tubo 5s steps(1) infinite;
}
@keyframes tubo { 0%, 100% { opacity: 1; } 8% { opacity: 0.3; } 9% { opacity: 1; } 62% { opacity: 0.45; } 63% { opacity: 1; } }
.intro { margin: 0; max-width: 30rem; font-size: 1.2rem; line-height: 1.45; color: var(--texto); }
.comandos { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.3rem 0 0; color: var(--cimento); }
.comandos dt { color: var(--tubo); font-weight: 600; }
.comandos dd { margin: 0; }
body.toque .lista-teclado, body:not(.toque) .lista-toque { display: none; }
kbd { font: 600 0.9em var(--display); padding: 0 0.35em; border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 3px; }
.nota { margin: 0; font-size: 0.92rem; color: var(--cimento); }
.erro { margin: 0; color: var(--banco); }

/* botões: o principal é uma placa de SAÍDA */
.botao-saida, .botao { padding: 0.75rem 1.2rem; border-radius: 2px; text-transform: uppercase; cursor: pointer; }
.botao-saida {
  font: 800 1.35rem/1 var(--display); letter-spacing: 0.06em; color: var(--saida); background: var(--saida-fundo);
  border: 2px solid var(--saida); box-shadow: 0 0 22px rgb(95 224 143 / 0.25), inset 0 0 12px rgb(95 224 143 / 0.15);
}
.botao-saida::after { content: " ›"; }
.botao-saida:disabled { opacity: 0.4; cursor: wait; }
.botao { font: 600 1.1rem/1 var(--display); letter-spacing: 0.05em; background: transparent; border: 1px solid var(--linha); }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.mira { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgb(227 236 217 / 0.5); }
#aviso {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(90vw, 36rem); margin: 0; text-align: center; font-size: 1.15rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 1px 8px #000; opacity: 0; transition: opacity 0.6s;
}
#aviso.visivel { opacity: 1; }
.painel {
  position: absolute; display: grid; gap: 6px; width: 180px;
  left: max(18px, env(safe-area-inset-left, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.medidor { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 8px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cimento); }
.barra { height: 8px; padding: 1px; border: 1px solid var(--linha); }
.barra i { display: block; width: 100%; height: 100%; background: var(--tubo); }
.fino .barra { height: 5px; }
#hud.apagada #bateria .barra i { background: var(--cimento); opacity: 0.5; }
#hud.cansado #folego .barra i { background: var(--banco); }
.contagem {
  position: absolute; margin: 0; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cimento);
  right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.contagem b { font-size: 1.1rem; color: var(--papel); font-variant-numeric: tabular-nums; }
body.toque .painel { bottom: auto; top: max(14px, env(safe-area-inset-top, 0px)); }
body.toque #aviso { top: calc(max(14px, env(safe-area-inset-top, 0px)) + 64px); }
body.toque .contagem { bottom: auto; top: max(14px, env(safe-area-inset-top, 0px)); right: calc(max(18px, env(safe-area-inset-right, 0px)) + 56px); }

/* bilhete: folha de caderno */
#bilhete { place-items: center; align-content: center; gap: 1.2rem; background: rgb(10 11 9 / 0.72); }
.papel {
  position: relative; width: min(100%, 25rem); padding: 1.2rem 1.3rem 1.4rem 2.6rem;
  font: 400 1.15rem/1.7rem var(--mao); color: var(--tinta);
  background: var(--papel) repeating-linear-gradient(to bottom, transparent 0 calc(1.7rem - 1px), rgb(70 110 170 / 0.35) calc(1.7rem - 1px) 1.7rem);
  background-position: 0 1.2rem; transform: rotate(-1.2deg); box-shadow: 0 18px 40px rgb(0 0 0 / 0.6);
}
.papel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.9rem; width: 1px; background: rgb(190 60 60 / 0.4); }
.papel p { margin: 0 0 1.7rem; }
.papel .texto p:last-child { margin-bottom: 1.7rem; }
.papel .quando { font-size: 0.95rem; opacity: 0.7; }
.papel .assinatura { margin: 0; text-align: right; }
.papel .assinatura:empty { display: none; }
/* papel oficial datilografado (1968, 1973), com carimbo */
.papel.datilografado {
  font: 400 0.98rem/1.55 var(--maquina); color: #2a2620; background: var(--papel-velho);
  padding: 3.2rem 1.4rem 1.4rem; transform: rotate(0.8deg);
}
.papel.datilografado::before { display: none; }
.papel.datilografado p { margin: 0 0 0.9rem; }
.papel.datilografado .quando { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.papel.datilografado .texto p:first-child { font-weight: 700; letter-spacing: 0.08em; }
.carimbo {
  position: absolute; top: 0.8rem; right: 0.8rem; margin: 0; padding: 0.15rem 0.5rem; font: 700 0.9rem var(--maquina);
  letter-spacing: 0.15em; color: var(--carimbo); border: 3px solid var(--carimbo); transform: rotate(-8deg); opacity: 0.75;
}
/* carta de 1968, à mão, em tinta azul */
.papel.carta { color: var(--tinta-azul); background-color: #efe8d2; transform: rotate(1.4deg); }

/* a história por trás */
#historia { place-items: start center; background: rgb(10 11 9 / 0.94); }
/* centraliza quando cabe; quando não cabe, começa do topo e rola */
.caixa.larga { width: min(100%, 40rem); margin-block: auto; }
#historia .destaque { margin: 0; font-size: 1.2rem; color: var(--tubo); }
#historia p { margin: 0; color: var(--texto); line-height: 1.5; }
.linha-do-tempo { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.7rem 1rem; margin: 0.4rem 0; }
.linha-do-tempo dt { font-weight: 800; color: var(--tubo); text-transform: uppercase; letter-spacing: 0.04em; }
.linha-do-tempo dd { margin: 0; color: var(--texto); line-height: 1.5; }
@media (max-width: 30rem) { .linha-do-tempo { grid-template-columns: 1fr; gap: 0.2rem; } .linha-do-tempo dd { margin-bottom: 0.6rem; } }
#historia .fontes { font-size: 0.9rem; color: var(--cimento); }
#historia a { color: var(--tubo); }

/* o relógio de câmera quando a data volta para 1968 */
#relogio.falha { color: #ff8a7a; }

/* pausa e fim */
#pausa, #fim { place-items: center; background: var(--veu); }
.caixa { width: min(100%, 26rem); display: grid; gap: 0.9rem; }
.caixa h2 { margin: 0 0 0.2rem; font: 800 clamp(2.4rem, 9vw, 3.6rem)/0.9 var(--display); text-transform: uppercase; text-wrap: balance; }
#fim[data-tipo="vitoria"] h2 { color: var(--saida); }
#fim[data-tipo="derrota"] h2 { color: var(--tijolo); }
.caixa .texto { margin: 0; font-size: 1.15rem; color: var(--texto); }
.ficha {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; margin: 0.3rem 0 0.6rem; padding: 0.8rem 0;
  border-block: 1px solid var(--linha); font-variant-numeric: tabular-nums;
}
.ficha dt { align-self: center; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cimento); }
.ficha dd { margin: 0; text-align: right; font-weight: 600; }

/* controles de toque */
#toque { position: fixed; inset: 0; z-index: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.stick { position: absolute; left: 22%; top: 72%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgb(227 236 217 / 0.25); opacity: 0.45; }
.stick.ativo { opacity: 0.8; }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(227 236 217 / 0.25); }
.redondo {
  position: absolute; width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgb(227 236 217 / 0.35);
  background: rgb(10 11 9 / 0.4); font: 700 0.95rem var(--display); text-transform: uppercase; touch-action: manipulation;
}
#t-luz { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 84px); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 18px); }
#t-correr { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 74px); }
#t-correr.ativo { border-color: var(--banco); color: var(--banco); }
#t-pausa { width: 44px; height: 44px; font-size: 0.85rem; right: max(12px, env(safe-area-inset-right, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); }

/* o relógio de câmera barata, no canto */
#relogio {
  position: absolute; margin: 0; font: 600 0.95rem/1 ui-monospace, "Courier New", monospace; letter-spacing: 0.08em;
  color: rgb(227 236 217 / 0.7); text-shadow: 0 0 4px rgb(0 0 0 / 0.8);
  right: max(18px, env(safe-area-inset-right, 0px)); top: max(16px, env(safe-area-inset-top, 0px));
}
body.toque #relogio { display: none; }
/* o véu da descida para o subsolo */
#veu { position: fixed; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.9s; }
#veu.fechado { opacity: 1; }

#debug { position: fixed; left: 8px; top: 8px; z-index: 5; image-rendering: pixelated; width: 560px; max-width: 95vw; border: 1px solid #333; }

@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
  #aviso { transition: none; }
}

/* o que dá para fazer aqui, o que está no bolso */
#acao { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); margin: 0; padding: 0.3rem 0.7rem; font: 600 1.1rem/1.1 var(--display);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto); background: rgb(0 0 0 / 0.55); opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
#acao.visivel { opacity: 1; }
body.toque #acao { display: none; }
#bolso { margin-left: 0.8rem; }
#gas { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgb(190 200 170 / 0.32), rgb(120 130 105 / 0.72)); }
/* por dentro do armário: só as frestas da porta */
#frestas { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, #000 0 2.4vh, transparent 2.4vh 3.2vh); }
#ponto { position: absolute; left: 50%; bottom: 3.5rem; width: min(92vw, 34rem); transform: translateX(-50%); padding: 0.8rem 1rem; color: var(--texto); background: rgb(8 9 7 / 0.85); border-left: 3px solid var(--tubo); }
#ponto h2 { margin: 0 0 0.3rem; font: 800 1.3rem/1 var(--display); text-transform: uppercase; color: var(--tubo); }
#ponto p { margin: 0; line-height: 1.45; }
/* a tela de título */
.chamada { display: grid; gap: 0.3rem; font: 600 1rem/1.2 var(--display); color: var(--texto); }
.chamada small { font-weight: 400; color: var(--cimento); }
.chamada input { width: min(100%, 20rem); padding: 0.5rem 0.6rem; font: inherit; color: var(--texto); background: rgb(0 0 0 / 0.55); border: 1px solid var(--linha); border-radius: 2px; }
.aviso-quinta { margin: 0; font: 700 1.1rem/1.2 var(--display); color: var(--tijolo); text-transform: uppercase; letter-spacing: 0.04em; }
/* o relatório do fim */
#relatorio { margin: 0; padding: 1rem 1.1rem; max-width: none; }
#relatorio .texto { color: #1d1b16; }
#relatorio .quando { max-width: 62%; }
#relatorio .texto p { font-size: 0.95rem; margin: 0 0 0.45rem; font-weight: 400; letter-spacing: 0; color: inherit; }
#relatorio .texto p:first-child { font-weight: 700; letter-spacing: 0.08em; }
#fim { overflow-y: auto; }
/* a tela da memória */
#memoria { place-items: center; background: #050505; }
.nomes { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.5rem; font: 700 clamp(1.3rem, 5vw, 1.8rem)/1.15 var(--display); }
.nomes small { display: block; font-size: 1rem; font-weight: 400; color: var(--cimento); }
.foto-antiga { margin: 0.4rem 0 0.9rem; }
.foto-antiga img { display: block; width: 100%; height: auto; filter: contrast(1.05); }
.foto-antiga figcaption { font-size: 0.85rem; color: var(--cimento); }
#t-agir { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 168px); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 28px); }
#t-cola { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 84px); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 96px); }
#t-panfleto { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 8px); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 96px); }