* { box-sizing: border-box; }

:root {
  --ink: #d8d3cb;
  --dim: #6f6a63;
  --hot: #c8452f;
  --gx: 50%;
  --gy: 50%;
  --beam: 210px;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: none;
}

/* Com a câmera desligada o ponteiro faz as vezes do olhar, e aí ele precisa
   aparecer — a mira sozinha não diz onde o clique do jogador cai. */
body.ponteiro { cursor: crosshair; }

/* ---------- cena ---------- */

/* O preto das laterais. A cena é 4:3 e a tela quase nunca é: em vez de cortar
   o que não cabe, ela entra inteira e sobra moldura. Cortar a altura tirava
   justamente o chão e o teto do quarto, que são o que dá o tamanho dele. */
#world { position: fixed; inset: 0; background: #000; }

/* O fundo é o QUADRO ZERO do primeiro clipe, e não a foto que deu origem a
   tudo. Os dois mostram o mesmo quarto vazio, mas a foto tem o dobro da
   resolução, e a diferença aparecia justamente nas trocas: o clipe entrava e o
   quarto amolecia, saía e endurecia de volta. Vindo do próprio vídeo, o fundo
   e os clipes são a mesma imagem — e quando houver um segundo monstro em outro
   canto, ligar e desligar o vídeo dele não vai mudar nada em volta.
   A foto continua no repositório: foi dela que saíram a maquete e a máscara. */
.plate {
  position: absolute;
  inset: 0;
  background: url("assets/cena.png") center / contain no-repeat;
}

/* O fundo não leva filtro nenhum, e isso é uma correção e não um esquecimento.
   Ele escurecia a 62% desde quando o fundo era a foto original, que era clara e
   precisava virar noite. Hoje o fundo É o quadro zero dos clipes: escurecê-lo
   deixava o quarto parado num brilho e o quarto filmado noutro, e todo monstro
   que entrava acendia a luz — medido, 2,61 contra 5,12 do armário. */

/* Os clipes do susto. Ficam por cima da foto e cobrem a cena inteira: o quadro
   zero do primeiro clipe É o quarto vazio, então não há transição para esconder.
   O mesmo `contain` da foto, para os dois enquadrarem igual — se um cortasse e
   o outro não, a criatura sairia de um armário que não é o da foto. */
#filme {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---------- a tela de brilho ---------- */
#brilho { position: absolute; inset: 0; z-index: 8; background: #000; cursor: default; }
#brilho[hidden] { display: none; }
#brilhoQuadro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#brilhoPainel {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  width: min(520px, 86%); padding: 22px 26px 20px; text-align: center;
  background: rgba(0, 0, 0, .72); border: 1px solid #ffffff1f;
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .28em; color: #efeae1;
}
#brilhoTitulo { margin: 0; font-size: 11px; letter-spacing: .32em; }
#brilhoTexto { margin: 12px 0 0; font-size: 11px; line-height: 1.7; letter-spacing: .06em; color: #ffffffa6; }
#brilho .controle { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
#brilhoRange { flex: 1; accent-color: #e0453a; cursor: pointer; }
#brilhoOut { min-width: 3.5em; text-align: right; font-size: 10px; color: #ffffff8c; }
#brilhoPronto {
  margin-top: 18px; padding: 11px 22px; background: #000; color: #efeae1; cursor: pointer;
  border: 1px solid #ffffff3d; font: inherit; letter-spacing: .32em; text-indent: .32em;
  transition: border-color .2s, box-shadow .3s;
}
#brilhoPronto:hover { border-color: #e0453a; box-shadow: 0 0 26px rgba(224, 69, 58, .22); }

/* A poeira de luz: sobre a caixa da cena, entre os clipes e a vinheta. */
#poeira { position: absolute; z-index: 7; pointer-events: none; }

/* Um vídeo por vez, e a regra é positiva: só o que tem `.on` aparece. Com
   `hidden` em cada um, bastava um escapar para dois ficarem na tela — e o do
   ataque escapava, aparecendo parado no primeiro quadro no meio do idle.

   Escondidos por transparência, nunca por `display: none`. Tirado do fluxo, o
   navegador descarta o que já tinha pintado, e ao voltar precisa decodificar de
   novo — o intervalo entre uma coisa e outra é o piscar preto na troca de
   clipe. Transparentes, os cinco continuam decodificados e prontos, e a troca é
   só uma opacidade mudando. */
#filme video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 130ms linear;
}

/* Quem entra aparece na hora; quem sai é que desaparece devagar.
   Com os dois em travessia ao mesmo tempo, no meio do caminho ambos ficam
   translúcidos e o fundo — o quarto SEM ninguém — vaza na composição: um quarto
   de fundo puro quando os dois passam por 0,5. Isso se vê como o monstro
   piscando na troca de clipe, e quanto maior e mais claro ele for, pior.
   Entrando opaco de uma vez, nunca há esse vale. */
#filme video.on { opacity: 1; transition: none; }

/* Entrar e sair do quarto vazio é lento de propósito. Os clipes de cada monstro
   foram gerados em sessões diferentes e não têm o mesmo brilho — o do armário é
   metade mais claro que o do palhaço —, então a troca seca de um pelo outro
   acende e apaga a luz do quarto na cara do jogador. Passando pelo fundo, com
   quase um segundo de cada lado, o que se vê é o quarto respirando. */
/* Na troca de morador é o contrário: ali o fundo é o destino, e o cruzamento
   longo é justamente o que esconde a diferença de brilho entre os monstros. */
#filme.trocando video,
#filme.trocando video.on { transition: opacity 900ms ease-in-out; }

/* O ataque entra seco. Uma passagem suave é justamente o que um susto não pode
   ter: os 130ms que escondem a costura entre dois clipes também avisariam que
   algo vem. */
#vAtaque { transition: none; }

/* Os monstros de geometria, entre o fundo e a cama. */
/* Sem `inset: 0`: a maquete cobre a caixa da cena, e não a janela. Ela existe
   para pôr monstros na perspectiva da foto — desenhada na janela inteira,
   estaria numa perspectiva que não é a de nada que se vê. Quem a posiciona é o
   layout, junto com os alvos. */
#stage {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* A mesma foto de novo, com tudo recortado menos a cama. É o que deixa um
   vulto passar ATRÁS dela — ver tools/PROFUNDIDADE.md. */
#front[hidden] { display: none; }
#stage[hidden] { display: none; }

#front {
  z-index: 3;
  -webkit-mask: url("assets/bed-mask.svg") center / contain no-repeat;
          mask: url("assets/bed-mask.svg") center / contain no-repeat;
}

/* A lanterna do olhar saiu daqui. Era a mesma foto clareada 2,2× e revelada
   num círculo onde o olhar pousava — coisa do tempo em que isto era um teste de
   rastreio e o círculo servia para provar que o rastreio funcionava.
   Multiplicar por 2,2 estoura a fresta da janela e satura o resto, e um jogo
   sobre não olhar não deveria acender o que o jogador olha. */

/* vinheta por cima de tudo, para o centro puxar o olho */
#vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 50%, transparent 42%, #000000a6 100%);
}

/* ---------- mira ---------- */

#reticle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  will-change: transform;
}

#reticle.on { opacity: 1; }

#reticle .ring {
  position: absolute;
  inset: 34px;
  border: 1px solid #ffffff59;
  border-radius: 50%;
}

#reticle .ring.wide {
  inset: 4px;
  border-color: #ffffff1f;
  border-style: dashed;
}

#reticle .bar {
  position: absolute;
  background: #ffffff8c;
}

#reticle .bar.n { left: 50%; top: 6px;  width: 1px; height: 14px; }
#reticle .bar.s { left: 50%; bottom: 6px; width: 1px; height: 14px; }
#reticle .bar.w { top: 50%; left: 6px;  height: 1px; width: 14px; }
#reticle .bar.e { top: 50%; right: 6px; height: 1px; width: 14px; }

#reticle .pip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px var(--hot);
}

/* rastro: pontos que mostram por onde o olhar passou nos últimos instantes */
#trail { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* Alvos, mira e grade ficam acima de tudo que é cena — inclusive da cama e da
   vinheta, que têm camada própria por causa dos monstros. */
#spots { position: absolute; inset: 0; z-index: 5; }

/* ---------- alvos ---------- */

.spot {
  position: absolute;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* O contorno fino do alvo. O anel de progresso divide a mesma circunferência
   com ele — daí `--ring` valer para os dois: mudou o tamanho do alvo, os dois
   acompanham juntos e o progresso continua correndo exatamente por cima. */
.spot { --ring: 34px; }

.spot::before {
  content: "";
  position: absolute;
  inset: var(--ring);
  border: 1px solid #ffffff17;
  border-radius: 50%;
  transition: inset .25s ease, border-color .25s ease;
}

.spot b {
  position: absolute;
  top: 100%;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffffff21;
  white-space: nowrap;
  transition: color .2s ease;
}

.spot.hit { --ring: 6px; }

.spot.hit::before { border-color: var(--hot); }

.spot.hit { box-shadow: 0 0 60px #c8452f2e; }

/* Enquanto a atração puxa, o alvo acende junto — o quarto reagindo a você
   chegando perto, em vez de a mira grudar do nada. */
.spot::after {
  content: "";
  position: absolute;
  inset: calc(30px - var(--pull, 0) * 26px);
  border-radius: 50%;
  background: radial-gradient(circle, #c8452f 0%, transparent 70%);
  opacity: calc(var(--pull, 0) * 0.5);
  transition: opacity .12s linear, inset .12s linear;
  pointer-events: none;
}
.spot.hit b { color: var(--hot); }

/* "Ele te viu": o progresso corre em volta do próprio círculo, e não numa
   barra embaixo dele. Uma barra à parte seria mais um lugar para o olho ir —
   e a única coisa que deve puxar o olhar aqui é o alvo.

   O anel é um setor cônico com o miolo recortado por máscara: preenche no
   sentido do relógio a partir do topo, sem precisar de SVG. */
/* O traço grosso que corre por cima do contorno, no sentido do relógio a partir
   do topo. É um setor cônico com o miolo recortado por máscara — não precisa de
   SVG, e fica preso à mesma circunferência do contorno. */
.spot u {
  position: absolute;
  inset: calc(var(--ring) - 2px);
  display: block;
  border-radius: 50%;
  background: conic-gradient(
    var(--hot) calc(var(--dwell, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side,
    transparent calc(100% - 5px), #000 calc(100% - 5px));
  opacity: 0;
  /* O preenchimento acompanha com um atraso curto: entre uma pergunta e outra o
     anel volta a zero, e sem isto o salto seria seco. */
  transition: opacity .25s ease, inset .25s ease, background .18s linear;
}

.spot.hit u,
.spot.call u { opacity: 1; }

.spot.call u { filter: drop-shadow(0 0 8px #c8452f8a); }

.spot.hit i { background: var(--hot); }

/* ---------- pálpebras ---------- */

.lid {
  position: fixed;
  left: 0;
  right: 0;
  height: 52vh;
  background: #000;
  pointer-events: none;
  z-index: 40;
  will-change: transform;
}

#lidTop    { top: 0;    transform: translateY(-100%); }
#lidBottom { bottom: 0; transform: translateY(100%); }

/* ---------- a morte ---------- */

/* A tela apaga junto com o grito, e não no golpe: primeiro se é atingido,
   depois se apaga. Meio segundo de queda — rápido o bastante para ser o fim, e
   não tão rápido que vire um corte de edição.
   Fica abaixo do painel de propósito: o jogo acabou, mas quem está mexendo nos
   controles continua enxergando o que faz. */
#morte {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 45;
  /* Rápido: o preto cai no último quadro do ataque, e cada décimo a mais é um
     pedaço do golpe que o jogador não vê. */
  transition: opacity .15s ease-in;
}

#morte.on { opacity: 1; }

/* ---------- grade de depuração ---------- */

#grid {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  pointer-events: none;
}

#grid[hidden] { display: none; }

#grid .cell {
  border: 1px solid #ffffff0a;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .2em;
  color: #ffffff12;
  transition: background-color .15s ease;
}

#grid .cell.hot { background: #c8452f1a; }

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

#hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 50;
  width: 262px;
  padding: 12px;
  background: #0a0a0ce6;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  cursor: auto;
  transition: opacity .2s ease;
}

#hud.faded { opacity: .12; }
#hud.faded:hover { opacity: 1; }

/* Esconder é esconder. O painel ocupa a esquerda da tela, que é justamente onde
   mora um dos monstros — apagado a 12% ele continua por cima dele, e a 12% de um
   quarto escuro ainda é mais claro que o quarto. */
#hud.sumido { display: none; }

/* Durante qualquer calibração os painéis saem da frente: eles cobrem o quadro,
   a janela e o radiador, que é justamente para onde se pede que você olhe. */
body.calibrating #hud,
body.calibrating #log {
  opacity: 0;
  pointer-events: none;
}

#hud header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
}

#hud header strong { color: var(--hot); }
#fps { color: var(--dim); }

.cam {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.cam canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1); /* espelho: mexer para a direita move para a direita */
}

/* O quadro cru fica invisível, mas presente: navegador costuma suspender a
   decodificação de um vídeo com display:none, e o recorte sairia preto. */
.cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#camTag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  background: #000000a6;
}

#camTag:empty { display: none; }

#eyeZoom {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  border-radius: 5px;
  background: #000;
  transform: scaleX(-1);
  image-rendering: pixelated;
}

#readouts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 10px 0;
  font-size: 11px;
}

#readouts dt { color: var(--dim); }
#readouts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  font-size: 11px;
  color: var(--dim);
}

.slider input { width: 100%; accent-color: var(--hot); }
.slider output { color: var(--ink); font-variant-numeric: tabular-nums; }

.actions { display: grid; gap: 6px; }

button {
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: #ffffff0d;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  cursor: pointer;
}

button:hover:not(:disabled) { background: #ffffff1a; }
button:disabled { opacity: .4; cursor: default; }

#status {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--dim);
  min-height: 2.4em;
}

kbd {
  font: inherit;
  font-size: 10px;
  padding: 0 3px;
  border: 1px solid #ffffff24;
  border-radius: 3px;
}

/* ---------- calibração ---------- */

#calib {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #050506;
}

#calib[hidden] { display: none; }

#calibTarget {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  transition: left .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1);
}

#calibTarget::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #c8452f5c;
  border-radius: 50%;
}

#calibTarget span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 16px var(--hot);
}

#calibTarget.armed span { animation: pulse .5s ease-in-out infinite alternate; }

@keyframes pulse { to { transform: scale(2.2); } }

/* ---------- instrução, antes de começar ---------- */

#brief {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-content: center;
  gap: 22px;
  padding: 8vw;
  background: #050506;
  text-align: center;
}

#brief[hidden] { display: none; }

#briefText {
  margin: 0;
  max-width: 30em;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ink);
  white-space: pre-line;
}

#briefGo {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

#briefGo b { color: var(--hot); font-weight: 400; }

/* ---------- calibração pelo cenário ---------- */

/* O alvo chamado cresce e pulsa. O nome vai para DENTRO dele: fora, seria mais
   um lugar para o olho ir, e o olho vai sempre onde há palavra — a calibração
   acabaria aprendendo com alguém que está lendo o rodapé. */
.spot.call {
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  --ring: 8px;
}

.spot.call::before {
  border-color: var(--hot);
  animation: call 1.1s ease-in-out infinite alternate;
}

.spot.call.armed::before { animation-duration: .55s; }

.spot.call b {
  position: static;
  top: auto;
  max-width: 96px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .14em;
  white-space: normal;
  text-align: center;
  color: var(--hot);
  text-shadow: 0 0 18px #000, 0 0 40px #000;
}

/* E os outros alvos perdem o nome enquanto a calibração corre: um só texto na
   tela, exatamente onde o olhar deve estar. */
body.calibrating .spot:not(.call) b { opacity: 0; }

/* O pulso do chamado mexe só no contorno; o progresso fica firme na sua
   circunferência, senão a barra pareceria encher e esvaziar sozinha. */
@keyframes call {
  to { inset: 0; border-color: #ffb4a3; }
}

/* ---------- quanto falta ---------- */

/* Uma linha no alto da tela, longe do centro e sem número para ler. */
#tally {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ffffff0a;
  z-index: 30;
}

#tally[hidden] { display: none; }

#tally i {
  display: block;
  height: 100%;
  background: var(--hot);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

/* ---------- painel de acompanhamento ---------- */

#log {
  position: fixed;
  top: 14px;
  right: 14px;
  transition: opacity .2s ease;
  z-index: 50;
  width: 272px;
  padding: 12px;
  background: #0a0a0ce6;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  cursor: auto;
  font-size: 11px;
}

#log[hidden] { display: none; }

#log header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* o ponto que pulsa enquanto o jogo continua alimentando a calibração */
#log header b {
  color: var(--hot);
  animation: pulse 1.4s ease-in-out infinite alternate;
}

#log header strong { color: var(--hot); }
#log header span { color: var(--dim); }

#log .models {
  display: grid;
  gap: 4px;
  margin-bottom: 9px;
}

#log .models span {
  padding: 3px 6px;
  border: 1px solid #ffffff14;
  border-radius: 4px;
  color: var(--dim);
}

#log .models span.on {
  border-color: #c8452f66;
  color: var(--ink);
  background: #c8452f14;
}

#log table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

#log th {
  text-align: left;
  font-weight: 400;
  color: var(--dim);
  padding-bottom: 3px;
  border-bottom: 1px solid #ffffff12;
}

#log td {
  padding: 2px 0;
  border-bottom: 1px solid #ffffff08;
}

#log td.n { text-align: right; padding-left: 6px; }
#log td.warn { color: #e0a33a; }
#log tr.bad td { color: var(--hot); }

#log .hint {
  margin: 8px 0 0;
  color: var(--dim);
  line-height: 1.4;
}

#logMap {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 9px;
  border-radius: 4px;
  background: #00000059;
}

#log .legend {
  margin: 5px 0 0;
  font-size: 10px;
  color: #ffffff2b;
  line-height: 1.35;
}

/* ---------- caixas de opção ---------- */

.picker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  font-size: 11px;
  color: var(--dim);
}

.picker select {
  font: inherit;
  font-size: 11px;
  padding: 4px 6px;
  color: var(--ink);
  background: #ffffff0d;
  border: 1px solid #ffffff1f;
  border-radius: 5px;
}

#log table.geo {
  margin-top: 8px;
  border-top: 1px solid #ffffff12;
  padding-top: 4px;
}

#log table.geo td { color: var(--dim); border: 0; padding: 1px 0; }
#log table.geo td:last-child { text-align: right; color: var(--ink); }
#log table.geo td.warn { color: #e0a33a; }

.checks {
  display: grid;
  gap: 4px;
  margin: 8px 0 10px;
  font-size: 11px;
  color: var(--dim);
}

.checks label {
  display: flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
}

.checks input { accent-color: var(--hot); margin: 0; }

#magnetOpts {
  margin: -2px 0 8px;
  padding-left: 18px;
  border-left: 1px solid #ffffff14;
}

#magnetOpts .slider { margin: 4px 0; }

/* Um alvo que o monstro da vez está cobrindo com o corpo. Ele não é apagado da
   lista, porque continua valendo como olhar no monstro — só deixa de ser
   desenhado, para não haver dois pontos disputando a atenção no mesmo canto da
   tela. */
.spot.engolido { opacity: 0; pointer-events: none; }

/* A recusa da câmera é dita na mesma linha que normalmente diz que ela está
   desligada — é a linha da privacidade, e negar o acesso é um fato dela. Muda
   de cor porque muda de assunto: deixa de ser garantia e passa a ser bloqueio. */
#abertura.negado #camera { color: #c86a6a }
#abertura.negado #camera i { background: #c86a6a; animation: none }

/* ------------------------------------------------------------ o jogo, limpo
   Jogando não há painel, não há rótulos e não há anéis nos alvos. Os nomes
   existem para desenvolver — eles dizem ao jogador exatamente onde o monstro
   vai aparecer, que é a informação que o jogo inteiro existe para negar.

   A mira fica, quase apagada. Tirá-la por completo deixaria o jogador sem saber
   se o olhar dele está sendo lido; a esta opacidade ela responde à pergunta sem
   virar um lugar para onde olhar. */
body.emJogo #hud { display: none }
body.emJogo #spots .spot { opacity: 0 !important; pointer-events: none }
/* Precisa vencer o `#reticle.on`, que existe para acender a mira quando há
   olhar — aqui a questão não é se ela acende, é o quanto. */
body.emJogo #reticle,
body.emJogo #reticle.on { opacity: .16 }
/* Dela sobra só o ponto do meio. Os anéis e as hastes são instrumento de
   medida: dizem o quanto o olhar está travado, que é justamente o que o jogador
   não deve ficar lendo enquanto joga. */
body.emJogo #reticle .ring,
body.emJogo #reticle .bar { display: none }

/* ------------------------------------------------------------ a calibração

   O quarto fica atrás de uma cortina. Ele é a primeira coisa que o jogo tem
   para mostrar, e revelá-lo aqui gastaria a chegada: o jogador entraria na
   partida já sabendo o cômodo de cor, e sabendo onde cada alvo fica. A cortina
   não é opaca até o fim — resta uma sombra do quarto, o bastante para os alvos
   não flutuarem no vazio e para a pessoa entender que está olhando um lugar. */
body.emCalibracao #world::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  background: #08080a;
  pointer-events: none;
}

/* Durante a calibração o alvo não diz o nome do lugar — diz para onde olhar. O
   nome é ferramenta de quem desenvolve, e aqui ele seria uma dica: o jogador
   sairia da calibração com a planta do quarto decorada. */
body.emCalibracao .spot b { display: none }
.spot .diga { display: none }
body.emCalibracao .spot.call .diga,
body.emCalibracao .spot.armed .diga {
  display: block;
  position: absolute;
  top: 100%;
  margin-top: 6px;
  font: 400 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .22em;
  color: #ffffff8a;
  white-space: nowrap;
}

#calibDiga {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 500 9px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .22em;
  color: #0a0a0c;
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------------ a morte
   Sem botão: quem acabou de levar um susto não procura onde clicar. */
#fim {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-content: center;
  gap: 26px;
  background: #000;
  text-align: center;
  animation: fimEntra 1.2s ease both;
}
#fim[hidden] { display: none }
@keyframes fimEntra { from { opacity: 0 } to { opacity: 1 } }

#fimTitulo {
  margin: 0;
  font: 400 clamp(28px, 6vw, 62px)/1 "Times New Roman", Times, serif;
  letter-spacing: .12em;
  color: #6e2020;
}
/* Compartilhar no mural: nome, botão e a nota do que acontece. */
#fimAcoes {
  display: grid; gap: 10px; justify-items: center; margin-top: 4px;
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .28em;
}
#fimAcoes[hidden] { display: none; }
#fimApelido {
  width: 260px; padding: 9px 10px; text-align: center; background: #000; color: #d9a0a0;
  border: 1px solid #ffffff1f; font: inherit; letter-spacing: .2em; outline: none;
}
#fimApelido:focus { border-color: #7a3a2c; }
#fimApelido::placeholder { color: #ffffff2e; letter-spacing: .28em; }
#fimCompartilhar {
  padding: 11px 22px; background: #000; color: #efeae1; cursor: pointer;
  border: 1px solid #ffffff3d; font: inherit; letter-spacing: .32em; text-indent: .32em;
  transition: border-color .2s, box-shadow .3s;
}
#fimCompartilhar:hover:not(:disabled) { border-color: #e0453a; box-shadow: 0 0 26px rgba(224, 69, 58, .22); }
#fimCompartilhar:disabled { color: #ffffff59; cursor: default; }
#fimCompartilhar.feito { color: #e0453a; border-color: #e0453a66; }
/* Depois de compartilhar, o botão vira "ver o mural": mesmo lugar, mesma cara. */
#fimVerMural {
  display: inline-block; padding: 11px 22px; background: #000; color: #e0453a; text-decoration: none;
  border: 1px solid #e0453a66; letter-spacing: .32em; text-indent: .32em; transition: box-shadow .3s;
}
#fimVerMural:hover { box-shadow: 0 0 26px rgba(224, 69, 58, .22); }
#fimVerMural[hidden] { display: none; }
#fimNota { max-width: 380px; font-size: 8px; letter-spacing: .2em; line-height: 1.7; color: #ffffff2e; }

/* A tela da morte tem cursor: é a única tela do jogo em que se escolhe com
   o mouse, e o ponteiro do jogo (o olhar) não está mais em jogo. */
#fim { cursor: default; }
#fim button, #fim a { cursor: pointer; }

/* As escolhas: jogar de novo, tela inicial. Entram junto com o vídeo. */
#fimBotoes { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
#fimBotoes[hidden] { display: none; }
#fimBotoes button {
  padding: 11px 22px; background: #000; color: #efeae1;
  border: 1px solid #ffffff3d; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .32em; text-indent: .32em; transition: border-color .2s, box-shadow .3s;
}
#fimBotoes button:hover { border-color: #e0453a; box-shadow: 0 0 26px rgba(224, 69, 58, .22); }
#fimMenu { color: #ffffff8c; }
@keyframes fimPisca { 0%, 100% { opacity: .25 } 50% { opacity: .75 } }

/* Os alvos que só existem para calibrar: fora dela, não estão na tela. Eles não
   são lugar nenhum do quarto — moram nas beiradas da janela, muitas vezes em
   cima da barra preta —, e deixá-los visíveis daria ao jogador pontos para
   vigiar onde não há nada para acontecer. */
.spot.soCalib { display: none }
body.emCalibracao .spot.soCalib { display: grid }

/* O menu enquanto o jogo acorda a câmera. As opções apagam porque nenhuma delas
   funciona agora, e a linha de baixo passa a contar o que está acontecendo. */
#abertura.aguardando #menu { opacity: .25; pointer-events: none }
#abertura.aguardando #camera i { animation: pisca .9s ease-in-out infinite }

/* A passagem da calibração para a partida. O quarto aparece do preto, vazio, e
   o jogo só começa quando ele já está na tela — entrar direto da calibração
   para um monstro a caminho é levar um susto antes de saber que a partida
   começou. */
body.entrando #world { animation: quartoChega 1.4s ease-out both }
@keyframes quartoChega { from { opacity: 0 } 55% { opacity: 0 } to { opacity: 1 } }


/* ---------- a calibração do Mira: seguir o ponto ---------- */

#seguir { position: fixed; inset: 0; z-index: 60; background: #000; }
#seguir[hidden] { display: none; }
#alvo { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); transition: left .35s cubic-bezier(.3,0,.2,1), top .35s cubic-bezier(.3,0,.2,1), opacity .3s; opacity: 0; }
#alvo i { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(#fff var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
#alvo u { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--hot, #ff5a3c); box-shadow: 0 0 10px var(--hot, #ff5a3c); }
#alvo b { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 10px; font-size: 12px; font-weight: 500; color: rgba(255, 140, 110, .9); white-space: nowrap; letter-spacing: .04em; }
#alvo.solto { border-color: rgba(255, 90, 60, .55); }
#alvo.solto i { background: conic-gradient(#ff5a3c var(--p, 0%), transparent 0); }
#alvo.raio::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--raio, 80px) * 2); height: calc(var(--raio, 80px) * 2); margin: calc(var(--raio, 80px) * -1) 0 0 calc(var(--raio, 80px) * -1); border-radius: 50%; border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
#alvo.dentro::after { border-color: rgba(140, 230, 160, .7); box-shadow: 0 0 18px rgba(140, 230, 160, .25); }
#alvo.dentro i { background: conic-gradient(#8fe3a2 var(--p, 0%), transparent 0); }
#vivo { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); pointer-events: none; }
#vivo[hidden] { display: none; }


/* ---------- o foco no olhar, em jogo ---------- */

/* Um desfoque leve por cima da cena, com um buraco nítido onde o olhar está.
   O raio do buraco e o da transição são em vmin para valerem em qualquer
   tela; o desfoque é pequeno de propósito: os monstros têm de continuar
   aparecendo na periferia, só a mira é que não precisa. */
#foco {
  position: absolute;
  inset: 0;
  /* Acima dos clipes (1), da maquete (2) e da cama (3), e abaixo da vinheta
     (4, que vem depois no documento): sem isto o desfoque ficava atrás dos
     vídeos e só desfocava a foto do fundo. */
  z-index: 4;
  pointer-events: none;
  display: none;
  /* Pouco, de propósito: 4 px num monitor de 57" já escondia o palhaço. O
     valor vem do painel (controle "foco"), para cada tela achar o seu. */
  -webkit-backdrop-filter: blur(var(--foco-blur, 3px));
  backdrop-filter: blur(var(--foco-blur, 3px));
  -webkit-mask-image: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), transparent 0, transparent 18vmin, #000 48vmin);
  mask-image: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), transparent 0, transparent 18vmin, #000 48vmin);
}
body.emJogo #foco.on { display: block; }
/* O rastro da mira é ferramenta de quem desenvolve: em jogo ele era a fileira
   de pontos vermelhos que sobrava mesmo com a mira apagada. */
body.emJogo #trail { display: none; }
/* Com o foco ligado a mira some de vez: o foco já diz onde o olhar está. */
body.emJogo:has(#chkFoco:checked) #reticle,
body.emJogo:has(#chkFoco:checked) #reticle.on { opacity: 0; }


/* ---------- o susto gravado ---------- */

/* A TV da morte: o espaço do vídeo reservado desde o primeiro quadro, com
   chiado até ele chegar, borda com um brilho suave no vermelho do texto, e a
   etiqueta da câmera. */
#fimTv {
  position: relative; justify-self: center;
  width: min(640px, 70vw); aspect-ratio: 16 / 9;
  background: #000; overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(176, 64, 64, .55);
  box-shadow: 0 0 34px rgba(110, 32, 32, .45), 0 0 90px rgba(110, 32, 32, .18), inset 0 0 40px rgba(0, 0, 0, .8);
}
#fimChiado {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: .75;
  transition: opacity .5s ease;
}
#fimTv.ligada #fimChiado { opacity: 0; }
/* As linhas de varredura, por cima de tudo. */
#fimTv::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#fimMidia { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
#fimMidia[hidden] { display: none; }
#fimTv.ligada #fimMidia { opacity: 1; }
#fimMidia img, #fimMidia video { display: block; width: 100%; height: 100%; object-fit: cover; }
#fimConta {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 clamp(48px, 9vw, 110px)/1 "Times New Roman", Times, serif;
  color: #c04848; text-shadow: 0 0 22px rgba(176, 64, 64, .75), 0 0 60px rgba(110, 32, 32, .5);
  pointer-events: none;
}
#fimBadge {
  position: absolute; top: 10px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 3px;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(176, 64, 64, .35);
  font: 500 9px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .28em; color: #d9a0a0;
}
#fimBadge i { width: 6px; height: 6px; border-radius: 50%; background: #e0453a; box-shadow: 0 0 8px #e0453a; animation: fimPisca 1.2s ease-in-out infinite; }
#fimQuem {
  margin: -12px 0 0;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .3em;
  color: #9a3a3a;
}

#galeria {
  position: fixed; inset: 0; z-index: 80;
  background: #050506; color: #ddd;
  padding: 6vh 6vw; box-sizing: border-box; overflow-y: auto;
}
#galeria[hidden] { display: none; }
#galeriaTitulo {
  margin: 0 0 24px;
  font: 400 clamp(22px, 3.2vw, 34px)/1 "Times New Roman", Times, serif;
  letter-spacing: .18em; text-transform: uppercase; color: #ddd;
}
#galeriaLista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
#galeriaLista .vazio { grid-column: 1 / -1; font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #ffffff5c; }
.susto { margin: 0; background: #0c0c0e; border: 1px solid #1e1e22; border-radius: 6px; overflow: hidden; }
.susto img, .susto video { display: block; width: 100%; cursor: pointer; }
.susto figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; padding: 10px 12px 4px; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; }
.susto figcaption b { color: #b04040; font-weight: 500; }
.susto figcaption span { color: #ffffff5c; }
.susto nav { display: flex; gap: 8px; padding: 8px 12px 12px; }
.susto nav a, .susto nav button {
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; text-transform: uppercase;
  color: #ddd; background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 3px; padding: 7px 10px; text-decoration: none; cursor: pointer;
}
.susto nav button:hover { border-color: #7a3a2c; }
#galeriaVoltar {
  position: fixed; right: 6vw; bottom: 5vh;
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em;
  color: #ffffff8a; background: none; border: 0; cursor: pointer;
}

/* Na galeria há o que clicar: o cursor volta, e vira mão em cima dos sustos. */
#galeria, #galeria * { cursor: auto; }
#galeria .susto img, #galeria .susto video, #galeria button, #galeria a { cursor: pointer; }
#galeria a[hidden] { display: none; }
#lupa {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-content: center; gap: 14px;
  background: rgba(0, 0, 0, .92); cursor: zoom-out;
}
#lupa[hidden] { display: none; }
#lupa img, #lupa video { display: block; width: min(90vw, 1400px); height: auto; max-height: 82vh; object-fit: contain; border: 1px solid #2a2a2e; border-radius: 4px; }
#lupa p { margin: 0; text-align: center; font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #b04040; }



/* ---------- as telas de desenvolvimento ----------
   Painel, log, grade, a calibração antiga e o contador de alvos: só existem
   para quem desenvolve, e só aparecem com a tecla h. Fora disso não há como
   aparecerem do nada. */
body:not(.dev) #hud, body:not(.dev) #log, body:not(.dev) #grid,
body:not(.dev) #tally, body:not(.dev) #calib { display: none !important; }
/* A mira vermelha é da bancada. No jogo o olhar é o foco desfocado, e na
   calibração é o ponto vivo do seguir; fora do painel de desenvolvimento ela
   nunca aparece — nem no instante entre o menu e o prólogo, em que o quarto
   fica à mostra sem a classe de jogo. */
body:not(.dev) #reticle { display: none !important; }
/* Os pontos de interesse com nome (janela, parede, radiador…) e o brilho de
   quem está sendo olhado são da bancada também: no jogo as zonas dos monstros
   são invisíveis de propósito. Vazavam no respiro entre o prólogo e a
   partida, antes de a classe de jogo entrar. */
body:not(.dev) #spots { display: none !important; }

/* ---------- brilho, dos ajustes ---------- */
#world { filter: brightness(var(--brilho, 1)); }

/* ---------- a tela de ajustes ---------- */
#ajustes {
  position: fixed; inset: 0; z-index: 80;
  background: #050506; color: #ddd;
  padding: 6vh 6vw; box-sizing: border-box; overflow-y: auto;
  cursor: auto;
}
#ajustes[hidden] { display: none; }
#ajustes h2 {
  margin: 0 0 30px;
  font: 400 clamp(22px, 3.2vw, 34px)/1 "Times New Roman", Times, serif;
  letter-spacing: .18em; text-transform: uppercase; color: #ddd;
}
#ajustes .linha { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; max-width: 720px; margin-bottom: 26px; }
#ajustes .linha > label, #ajustes .linha > span.rotulo { font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #ffffff8a; text-transform: uppercase; }
#ajustes .campo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#ajustes select, #ajustes button, #ajustes .lang {
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; text-transform: uppercase;
  color: #ddd; background: #1a1a1e; border: 1px solid #2a2a2e; border-radius: 3px; padding: 9px 12px; cursor: pointer;
}
#ajustes select { min-width: 260px; }
#ajustes button:hover, #ajustes .lang:hover { border-color: #7a3a2c; }
#ajustes .lang[aria-current="true"] { color: #fff; border-color: #b04040; }
#ajustes input[type="range"] { width: 260px; accent-color: #b04040; }
#ajustes output, #ajustes .estado { font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; color: #ffffff8a; }
#ajustes .estado.ok { color: #8fe3a2; }
#ajVoltar {
  position: fixed; right: 6vw; bottom: 5vh;
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em;
  color: #ffffff8a; background: none; border: 0; cursor: pointer;
}


/* ---------- o prólogo ---------- */
/* O fundo entra preto de uma vez: ele aparece no instante em que as
   pálpebras do menu terminam de fechar, e um fundo que ainda estivesse
   esmaecendo mostraria o quarto por baixo. Quem entra devagar é o texto. */
#prologo {
  position: fixed; inset: 0; z-index: 72;
  display: grid; place-content: center; gap: 18px; padding: 8vw;
  background: #050506; text-align: center;
}
#prologo[hidden] { display: none; }
#prologo > * { animation: fimEntra 1.4s ease both; }
#prologo p { margin: 0; max-width: 34em; justify-self: center; }
#prologoTexto, #prologoTexto2 {
  font: 400 clamp(17px, 2.1vw, 26px)/1.5 "Times New Roman", Times, serif;
  color: #c9c4bd; letter-spacing: .02em;
}
#prologoGrito {
  margin-top: 10px;
  font: 400 clamp(34px, 6vw, 72px)/1 "Times New Roman", Times, serif;
  letter-spacing: .16em; color: #8c2626;
  text-shadow: 0 0 26px rgba(140, 38, 38, .55);
}
#prologoMeta {
  margin-top: 22px;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .32em; color: #ffffff8a;
}
#prologoPular {
  font: 500 9px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #ffffff3d;
  animation: fimPisca 2.4s ease-in-out infinite;
}
#prologoPular[hidden] { display: none; }

/* ---------- o relógio ---------- */
#relogio {
  position: fixed; left: 22px; top: 18px; z-index: 30;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em;
  color: #ffffff; opacity: .28; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
#relogio[hidden] { display: none; }
#relogio.fim { color: #d9a0a0; opacity: .6; }

/* ---------- quem sobreviveu ---------- */
#vitoria {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-content: center; gap: 22px;
  background: #050506; text-align: center;
  animation: fimEntra 2s ease both;
}
#vitoria[hidden] { display: none; }
#vitoriaTitulo {
  margin: 0;
  font: 400 clamp(28px, 6vw, 62px)/1 "Times New Roman", Times, serif;
  letter-spacing: .12em; color: #c9c4bd;
}
#vitoriaSub { margin: 0; font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #8c2626; }
#vitoriaVolta { margin: 0; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: #ffffff3d; animation: fimPisca 2.4s ease-in-out infinite; }

/* O botão do mural na galeria: aceso quando o susto já está lá. */
.susto nav button.mural.feito { color: #e0453a; border-color: #e0453a66; }


/* ------------------------------------------------------------ no celular
   O jogo é de tela larga: o quarto é 4:3 e os alvos moram nele. Em pé, o
   aparelho mostra um quarto do tamanho de um selo, e o jogo pede para deitar.
   Deitado, o que não cabe é o que foi desenhado para monitor: a morte, a
   galeria, os ajustes e o painel do brilho ganham arranjos de altura curta. */
#vire {
  display: none; position: fixed; inset: 0; z-index: 200;
  place-content: center; padding: 8vw; background: #000; color: #d8d3cb; text-align: center;
  font: 500 11px/1.8 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .26em;
}
#vire i { display: block; width: 46px; height: 84px; margin: 0 auto 28px; border: 2px solid #ffffff59; border-radius: 9px; animation: vira 2.4s ease-in-out infinite; }
#vire b { display: block; margin-bottom: 12px; font: 400 clamp(26px, 8vw, 40px)/1 "Times New Roman", Times, serif; letter-spacing: .12em; color: #efeae1; }
#vire span { display: block; color: #ffffff8c; }
@keyframes vira { 0%, 15% { transform: rotate(0) } 55%, 100% { transform: rotate(-90deg) } }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 700px) { #vire { display: grid; } }

@media (max-height: 520px) and (orientation: landscape) {
  /* A morte: o vídeo à esquerda, grande; o nome, o mural e as escolhas à direita. */
  #fim {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "tv titulo" "tv quem" "tv acoes" "tv botoes";
    column-gap: 24px; row-gap: 10px; align-content: center; justify-content: center;
    padding: 0 4vw; text-align: left;
  }
  #fimTv { grid-area: tv; width: min(56vw, 84vh * 16 / 9); align-self: center; }
  #fimTitulo { grid-area: titulo; align-self: end; font-size: clamp(20px, 6.5vh, 32px); }
  #fimQuem { grid-area: quem; margin: 0; }
  #fimAcoes { grid-area: acoes; justify-items: start; gap: 8px; margin: 4px 0 0; }
  #fimApelido { width: min(220px, 100%); box-sizing: border-box; }
  #fimNota { max-width: 300px; }
  #fimBotoes { grid-area: botoes; justify-content: start; flex-wrap: wrap; margin: 0; }
  #fimBotoes button { white-space: nowrap; }
  #fimBotoes button, #fimCompartilhar, #fimVerMural { padding: 9px 14px; }
  #fimConta { font-size: clamp(40px, 16vh, 90px); }

  /* A galeria e os ajustes: menos margem, dois sustos por linha, e o botão de
     voltar com fundo, porque a lista rola por baixo dele. */
  #galeria, #ajustes { padding: 4vh 4vw 14vh; }
  #galeriaLista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #galeriaTitulo, #ajustes h2 { margin-bottom: 16px; }
  #galeriaVoltar, #ajVoltar { right: 4vw; bottom: 3vh; padding: 10px 12px; background: #050506; border: 1px solid #2a2a2e; border-radius: 3px; color: #ddd; }
  #ajustes .linha { grid-template-columns: 110px 1fr; gap: 12px; margin-bottom: 16px; }
  #ajustes select { min-width: 200px; }
  #ajustes input[type="range"] { width: 200px; }

  /* O brilho: a foto vai para a direita e o painel fica na barra preta da
     esquerda — na tela curta, o painel embaixo tapava a Bride, que é
     justamente o que a pessoa precisa enxergar de leve. */
  #brilhoQuadro { object-position: 100% 50%; }
  #brilhoPainel {
    left: 3vw; bottom: auto; top: 50%; transform: translateY(-50%);
    width: calc(100vw - 133.1vh - 6vw); min-width: 220px; max-height: 92vh; box-sizing: border-box; overflow-y: auto;
    padding: 12px 14px; text-align: left;
  }
  #brilhoTitulo { font-size: 10px; letter-spacing: .26em; }
  #brilhoTexto { margin-top: 8px; font-size: 10px; line-height: 1.5; }
  #brilho .controle { margin-top: 10px; gap: 10px; }
  #brilhoPronto { margin-top: 10px; padding: 8px 14px; }

  /* O prólogo, o aviso da calibração e a vitória: menor, para caber sem rolar. */
  #prologo { gap: 10px; padding: 5vw; }
  #prologoTexto, #prologoTexto2 { font-size: clamp(14px, 4.2vh, 20px); }
  #prologoGrito { margin-top: 4px; font-size: clamp(26px, 9vh, 48px); }
  #prologoMeta { margin-top: 10px; }
  #brief { padding: 5vw; }
  #briefText { font-size: 14px; }
  #vitoria { gap: 14px; }
}

/* Os links e os botões da galeria lado a lado, com o texto no meio: o link
   é inline, e esticado pelo flex ficava com o texto encostado em cima. */
.susto nav a, .susto nav button, #fimVerMural { display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }

/* No toque não há mouse nem "hover", os botões precisam de dedo, e os cinzas
   de monitor somem na tela fina do celular: sobem um tom. */
@media (pointer: coarse) {
  #fimBotoes button, #fimCompartilhar, #fimVerMural, #brilhoPronto, #galeriaVoltar, #ajVoltar, .susto nav button, .susto nav a { min-height: 40px; }
  #fimNota { color: #ffffff73; font-size: 9px; }
  #fimMenu, #prologoMeta, #galeriaVoltar, #ajVoltar, #briefGo,
  #ajustes .linha > label, #ajustes .linha > span.rotulo, #ajustes output, #ajustes .estado { color: #ffffffc4; }
  .susto figcaption span, #galeriaLista .vazio { color: #ffffff99; }
  #prologoPular, #vitoriaVolta { color: #ffffff8c; }
  #brilhoTexto { color: #ffffffd6; }
  #brilhoOut { color: #ffffffc4; }
  #relogio { opacity: .5; }
}