/* ==========================================
   ARQUIVO: arquivos/css/jogo.css
   VISUAL MODERNO EM TELA CHEIA (TV E PC): ABERTURA, INTRODUÇÃO, HUD, JANELA DE INVESTIGAR, MAPA, DOSSIÊ, ARQUIVO E FINAL
   ========================================== */

/* Tudo é medido em "cqw" (1% da largura do palco 16:9). Assim o jogo fica
   igualzinho numa TV grande ou num notebook: só muda o tamanho. */

:root {
  --fundo: #05070c;
  --texto: #f2f4f8;
  --texto-2: #a9b3c4;
  --texto-3: #6f7a8d;
  --vermelho: #e3202b;
  --vermelho-escuro: #8e0e16;
  --amarelo: #f6c445;
  --verde: #3ddc84;
  --azul: #3a78ff;
  --ciano: #4fd6ff;
  --borda: rgba(255, 255, 255, 0.14);
  --borda-forte: rgba(255, 255, 255, 0.3);
  --fonte-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fonte-texto: "Titillium Web", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html,
body {
  height: 100%;
  height: 100dvh; /* celular: só a parte visível, sem a barra do navegador */
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { font: inherit; color: inherit; }
input { user-select: text; }
body.ocupado { cursor: progress; }

/* ---------- Palco 16:9 ---------- */
.palco {
  position: relative;
  width: min(100vw, 177.7778vh);
  height: min(56.25vw, 100vh);
  /* celular: mede pela parte visível da tela (a barra do navegador não corta o jogo ao girar) */
  width: min(100dvw, 177.7778dvh);
  height: min(56.25dvw, 100dvh);
  container-type: size;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, #142037 0%, #080c15 55%, #04060a 100%);
}

/* ---------- Destaques do texto ---------- */
mark { background: none; color: inherit; padding: 0; }
mark.destaque { color: var(--amarelo); font-weight: 700; }
mark.traco { color: var(--ciano); font-weight: 700; }

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7cqw;
  padding: 0.95cqw 1.9cqw;
  border-radius: 0.8cqw;
  border: 0.12cqw solid var(--borda-forte);
  background: linear-gradient(180deg, #2a303d, #161a23);
  font: 700 1.45cqw/1 var(--fonte-titulo);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0.1cqw 0 rgba(255, 255, 255, 0.12), 0 0.4cqw 1cqw rgba(0, 0, 0, 0.45);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.btn:hover { border-color: rgba(255, 255, 255, 0.65); transform: translateY(-0.1cqw); }
.btn:active,
.btn.apertado { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn svg { width: 1.6cqw; height: 1.6cqw; flex: 0 0 auto; }
.btn-primario { background: linear-gradient(180deg, #f03441, #b3121c); border-color: #ff7079; box-shadow: 0 0 1.6cqw rgba(227, 32, 43, 0.45), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.25); }
.btn-verde { background: linear-gradient(180deg, #2fbf6e, #157a43); border-color: #73f2aa; box-shadow: 0 0 1.6cqw rgba(61, 220, 132, 0.4); }
.btn-fantasma { background: rgba(255, 255, 255, 0.05); }
.btn-pequeno { font-size: 1.15cqw; padding: 0.65cqw 1.2cqw; }
.btn-grande { font-size: 1.8cqw; padding: 1.2cqw 2.4cqw; }

.btn-a,
.btn-b {
  display: inline-grid;
  place-items: center;
  width: 1.55cqw;
  height: 1.55cqw;
  border-radius: 50%;
  font: 800 0.95cqw/1 var(--fonte-titulo);
  background: var(--verde);
  color: #04210f;
  flex: 0 0 auto;
}
.btn-b { background: var(--vermelho); color: #fff; }

/* Foco visível quando joga com controle ou teclado */
.palco :focus { outline: none; }
body.modo-controle .palco :focus {
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 0.22cqw #fff, 0 0 2.2cqw 0.35cqw rgba(246, 196, 69, 0.85) !important;
  transform: translateY(-0.15cqw) scale(1.035);
}

/* ---------- Telas e camadas ---------- */
.tela {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.tela.ativa { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s linear 0s; }

.camada {
  position: absolute;
  inset: -1px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  background: rgba(4, 6, 11, 0.96);
}
.camada.aberta { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s; }

.camada-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.6cqw 2.4cqw 1cqw;
}
.camada-cabecalho h2 {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  margin: 0;
  font: 800 2.8cqw/1 var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.camada-cabecalho h2 svg { width: 2.6cqw; height: 2.6cqw; color: var(--vermelho); }
.camada-cabecalho p { margin: 0.4cqw 0 0; color: var(--texto-2); font-size: 1.25cqw; }

/* ---------- Logotipo (próprio do jogo) ---------- */
.logo { display: flex; align-items: center; gap: 1cqw; }
.logo .emblema { flex: 0 0 auto; filter: drop-shadow(0 0 0.8cqw rgba(227, 32, 43, 0.35)); }
.logo-textos { display: flex; flex-direction: column; line-height: 1; }
.logo-l1 { font: 700 1cqw/1 var(--fonte-titulo); letter-spacing: 0.32em; text-transform: uppercase; color: #d5dbe6; }
.logo-l2 { font: italic 800 2.35cqw/0.95 var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.01em; color: #ff2533; text-shadow: 0 0.15cqw 0.8cqw rgba(0, 0, 0, 0.6); }
.logo-l2 em { font-style: italic; color: inherit; margin-left: 0.1cqw; }
.logo-pequeno .emblema { width: 3.8cqw; height: 3.8cqw; }

/* ---------- Logo do sistema (arquivos/img/logo.webp) ---------- */
.logo-titulo { margin: 0; line-height: 0; animation: surgir 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.logo-imagem {
  display: block;
  width: auto;
  height: auto;
  max-width: 62cqw;
  max-height: 22cqw;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0.6cqw 2.4cqw rgba(0, 0, 0, 0.75));
  transition: max-width 0.6s ease, max-height 0.6s ease;
}
.tela-titulo.com-menu .logo-imagem { max-width: 48cqw; max-height: 14cqw; }
.logo-hud {
  display: block;
  width: auto;
  height: 5cqw;
  max-width: 26cqw;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0.2cqw 0.8cqw rgba(0, 0, 0, 0.6));
}

/* =========================================================
   TELA DE ABERTURA
   ========================================================= */
.tela-titulo { display: grid; place-items: center; overflow: hidden; }
.titulo-mundo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118cqw;
  aspect-ratio: 1600 / 715;
  transform: translate(-50%, -48%);
  animation: deriva 70s ease-in-out infinite alternate;
}
.titulo-mundo img,
.titulo-mundo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.titulo-mundo img { opacity: 0.6; }
@keyframes deriva {
  from { transform: translate(-52%, -48%) scale(1); }
  to { transform: translate(-48%, -50%) scale(1.08); }
}
.titulo-vinheta {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(4, 6, 10, 0.25) 0%, rgba(4, 6, 10, 0.9) 72%),
    linear-gradient(0deg, rgba(4, 6, 10, 0.95) 0%, transparent 35%);
}
.rota-titulo { fill: none; stroke: var(--vermelho); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(227, 32, 43, 0.9)); }
.ponto-titulo { fill: var(--amarelo); animation: brilhar 2.4s ease-in-out infinite; }
@keyframes brilhar { 50% { opacity: 0.3; } }

.titulo-centro { position: relative; z-index: 2; text-align: center; margin-top: -3cqw; }
.logo-grande { flex-direction: column; gap: 1.4cqw; animation: surgir 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.logo-grande .emblema { width: 8.5cqw; height: 8.5cqw; animation: girarLeve 6s ease-in-out infinite; }
.logo-grande .logo-textos { align-items: center; }
.logo-grande .logo-l1 { font-size: 2cqw; letter-spacing: 0.55em; margin-bottom: 0.4cqw; }
.logo-grande .logo-l2 { font-size: 7.4cqw; text-shadow: 0 0.4cqw 2.4cqw rgba(0, 0, 0, 0.8); }
@keyframes surgir { from { opacity: 0; transform: translateY(3cqw) scale(0.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes girarLeve { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.titulo-sub { margin: 1.2cqw 0 0; color: var(--texto-2); font-size: 1.5cqw; letter-spacing: 0.08em; animation: surgir 1.2s 0.3s both; }
.titulo-aperte {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  margin-top: 3.6cqw;
  padding: 0.6cqw 1.2cqw;
  border: 0;
  border-radius: 0.8cqw;
  background: none;
  color: #fff;
  cursor: pointer;
  font: 700 1.6cqw/1 var(--fonte-titulo);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: pulsar 1.6s ease-in-out infinite;
}
.titulo-aperte kbd { font: inherit; padding: 0.2cqw 0.6cqw; border: 0.12cqw solid #fff; border-radius: 0.4cqw; letter-spacing: 0.05em; }
@keyframes pulsar { 50% { opacity: 0.35; } }
.titulo-menu { display: flex; flex-direction: column; align-items: center; gap: 1cqw; margin-top: 2.8cqw; }
.titulo-menu .btn { min-width: 28cqw; font-size: 1.7cqw; padding: 1.05cqw 2cqw; animation: surgir 0.6s both; }
.titulo-menu .btn:nth-child(2) { animation-delay: 0.08s; }
.titulo-menu .btn:nth-child(3) { animation-delay: 0.16s; }
.titulo-menu .btn:nth-child(4) { animation-delay: 0.24s; }
.titulo-menu .btn:nth-child(5) { animation-delay: 0.32s; }

.ficha {
  position: absolute;
  right: 2.4cqw;
  bottom: 2.4cqw;
  z-index: 2;
  width: 23cqw;
  padding: 1.3cqw 1.5cqw;
  border-radius: 1cqw;
  border: 0.1cqw solid var(--borda);
  background: rgba(14, 18, 27, 0.82);
  backdrop-filter: blur(6px);
}
.ficha h2 { margin: 0 0 0.6cqw; font: 700 1cqw var(--fonte-titulo); letter-spacing: 0.25em; text-transform: uppercase; color: var(--texto-2); }
.ficha-patente { font: 800 2.1cqw/1 var(--fonte-titulo); text-transform: uppercase; color: var(--amarelo); margin-bottom: 0.7cqw; }
.ficha-linha { display: flex; justify-content: space-between; font-size: 1.15cqw; padding: 0.3cqw 0; border-top: 0.08cqw solid var(--borda); }
.ficha-linha strong { font-weight: 700; }
.digitos { font: 800 1.35cqw var(--fonte-titulo); letter-spacing: 0.15em; color: var(--verde); }
.ficha-barra { height: 0.45cqw; margin: 0.8cqw 0 0.4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ficha-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--vermelho), var(--amarelo)); border-radius: 1cqw; }
.ficha-proxima { margin: 0; color: var(--texto-2); font-size: 1cqw; }

.rodape-dicas {
  position: absolute;
  left: 2.4cqw;
  bottom: 2.4cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  color: var(--texto-2);
  font-size: 1.1cqw;
}
.rodape-dicas .controle-ok { color: var(--verde); }

/* =========================================================
   INTRODUÇÃO DO CASO
   ========================================================= */
.tela-intro { background: #000; overflow: hidden; }
.intro-fundo { position: absolute; inset: 0; overflow: hidden; }
.intro-fundo .cena { position: absolute; inset: 0; animation: kenburns 30s ease-in-out infinite alternate; }
.intro-fundo .cena-img { animation: none; transform: none; }
.intro-escuro {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 3, 6, 0.94) 0%, rgba(2, 3, 6, 0.72) 42%, rgba(2, 3, 6, 0.15) 100%),
    linear-gradient(0deg, rgba(2, 3, 6, 0.9) 0%, transparent 38%);
}
.intro-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 6% -4%, rgba(227, 32, 43, 0.65), transparent 40%);
  mix-blend-mode: screen;
  animation: sirene 1.1s ease-in-out infinite alternate;
}
@keyframes sirene { from { opacity: 0.25; } to { opacity: 1; } }
.intro-topo {
  position: absolute;
  top: 2.6cqw;
  left: 3.2cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.6cqw 1.5cqw;
  border-radius: 0.4cqw;
  background: var(--vermelho);
  font: 800 1.5cqw/1 var(--fonte-titulo);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  box-shadow: 0 0 2cqw rgba(227, 32, 43, 0.7);
  animation: entrarEsquerda 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.intro-topo i { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #fff; animation: pulsar 0.6s infinite; }
@keyframes entrarEsquerda { from { opacity: 0; transform: translateX(-6cqw); } to { opacity: 1; transform: none; } }
.intro-quadros { position: absolute; left: 3.2cqw; top: 8.6cqw; width: 60cqw; height: 36cqw; }
.intro-quadro { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.intro-quadro.ativo { opacity: 1; visibility: visible; }
.intro-quadro > * { opacity: 0; transform: translateY(1.6cqw); }
.intro-quadro.ativo > * { animation: subir 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.intro-quadro.ativo > *:nth-child(2) { animation-delay: 0.15s; }
.intro-quadro.ativo > *:nth-child(3) { animation-delay: 0.35s; }
.intro-quadro.ativo > *:nth-child(4) { animation-delay: 0.55s; }
@keyframes subir { to { opacity: 1; transform: none; } }
.intro-rotulo { font: 700 1.35cqw/1 var(--fonte-titulo); letter-spacing: 0.25em; text-transform: uppercase; color: var(--amarelo); }
.intro-quadro h2 { margin: 1cqw 0 1.4cqw; font: 800 5.2cqw/0.98 var(--fonte-titulo); text-transform: uppercase; text-shadow: 0 0.3cqw 2cqw rgba(0, 0, 0, 0.8); }
.intro-quadro p { margin: 0; max-width: 52cqw; font-size: 2.05cqw; line-height: 1.35; font-weight: 600; }
.intro-local {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  margin: 0 0 1.4cqw;
  padding: 0.7cqw 1.5cqw 0.7cqw 1cqw;
  border-radius: 0.8cqw;
  border: 0.1cqw solid var(--borda-forte);
  background: rgba(8, 12, 22, 0.75);
  font: 800 2.6cqw/1 var(--fonte-titulo);
  text-transform: uppercase;
}
.intro-local svg { width: 2.6cqw; height: 2.6cqw; }
.intro-local small { margin-left: 0.4cqw; font: 600 1.6cqw/1 var(--fonte-texto); text-transform: none; color: var(--texto-2); }
.intro-suspeito { display: flex; align-items: center; gap: 1.6cqw; margin-top: 2cqw; }
.intro-suspeito .avatar { width: 9cqw; height: 9cqw; border-radius: 1cqw; border: 0.15cqw solid var(--vermelho); box-shadow: 0 0 2cqw rgba(227, 32, 43, 0.5); }
.intro-suspeito div { font: 700 1.5cqw/1.25 var(--fonte-titulo); text-transform: uppercase; color: var(--texto-2); letter-spacing: 0.08em; }
.intro-suspeito strong { display: block; color: #fff; font-size: 2.2cqw; }
.intro-missao { display: grid; gap: 1cqw; margin-top: 0.4cqw; }
.intro-missao div { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.9cqw; font-weight: 600; }
.intro-missao b { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 0.1cqw solid var(--borda-forte); font-size: 1.7cqw; font-weight: 400; }
.intro-relogio svg { width: 2.2cqw; height: 2.2cqw; }
.intro-relogio { display: inline-flex; align-items: center; gap: 1cqw; margin-top: 1.6cqw; padding: 0.8cqw 1.4cqw; border-radius: 0.8cqw; background: linear-gradient(135deg, var(--vermelho), var(--vermelho-escuro)); font: 800 2cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.intro-rodape { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: 2.8cqw; display: flex; align-items: center; justify-content: space-between; }
.intro-pontos { display: flex; gap: 0.6cqw; }
.intro-pontos span { width: 3.4cqw; height: 0.42cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.intro-pontos span.feito { background: var(--vermelho); }
.intro-pontos span.ativo i { display: block; height: 100%; background: var(--vermelho); animation: encher linear forwards; animation-duration: var(--duracao, 7s); }
@keyframes encher { from { width: 0; } to { width: 100%; } }
.intro-botoes { display: flex; gap: 1cqw; }

/* =========================================================
   HUD DO JOGO (como no print: imagem à esquerda, texto e botões à direita)
   ========================================================= */
.tela-jogo { display: grid; grid-template-rows: 6.8cqw minmax(0, 1fr); }

.hud-topo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 1.4cqw;
  padding: 0 1.6cqw;
  border-bottom: 0.22cqw solid var(--vermelho);
  background: linear-gradient(90deg, rgba(48, 6, 10, 0.9) 0%, rgba(10, 12, 18, 0.94) 32%, rgba(8, 10, 16, 0.97) 100%);
  box-shadow: 0 0.3cqw 1.6cqw rgba(227, 32, 43, 0.25);
}
.hud-topo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/mapa-mundi.svg") right 30% center / 46cqw auto no-repeat;
  opacity: 0.25;
  pointer-events: none;
}
.hud-relogio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.55cqw 1.3cqw;
  border-radius: 0.8cqw;
  background: linear-gradient(135deg, #e52a35, #9a0f18);
  box-shadow: 0 0 1.6cqw rgba(227, 32, 43, 0.45), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.25);
}
.hud-relogio > svg { width: 2.6cqw; height: 2.6cqw; }
.hud-relogio-textos { display: flex; flex-direction: column; min-width: 11cqw; }
.hud-relogio-textos strong { font: 800 1.65cqw/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.04em; }
.hud-relogio-textos span { font-size: 1.2cqw; line-height: 1.3; }
.hud-relogio.mudou .hud-relogio-textos span { animation: piscarHora 0.9s ease; }
@keyframes piscarHora { 0% { color: var(--amarelo); transform: scale(1.12); } 100% { color: inherit; transform: none; } }

/* relógio de ponteiros: o ponteiro grande dá uma volta a cada hora que passa */
.hud-relogio > .relogio-ponteiros { width: 3.2cqw; height: 3.2cqw; flex: 0 0 auto; overflow: visible; }
.rp-aro { fill: rgba(0, 0, 0, 0.2); stroke: #fff; stroke-width: 3; }
.rp-marcas { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.6; stroke-linecap: round; }
.rp-hora line,
.rp-minuto line { stroke: #fff; stroke-linecap: round; }
.rp-hora line { stroke-width: 3.8; }
.rp-minuto line { stroke-width: 2.6; }
.rp-centro { fill: #fff; }
.rp-hora,
.rp-minuto { transform-box: view-box; transform-origin: 24px 24px; transition: transform var(--passo-relogio, 0.35s) linear; }
.rp-hora { transform: rotate(var(--ponteiro-hora, 0deg)); }
.rp-minuto { transform: rotate(var(--ponteiro-minuto, 0deg)); }
.hud-relogio.sem-transicao .rp-hora,
.hud-relogio.sem-transicao .rp-minuto { transition: none; }
.hud-relogio-textos span { transform-origin: left center; }
.hud-relogio.contando { box-shadow: 0 0 2.6cqw rgba(246, 196, 69, 0.6), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.25); }
.hud-relogio.contando .rp-minuto line { stroke: var(--amarelo); }
.hud-relogio.tique .hud-relogio-textos span { animation: tiqueHora 0.22s ease-out; }
.hud-relogio.tique .relogio-ponteiros { animation: tiqueRelogio 0.22s ease-out; }
@keyframes tiqueHora { from { color: var(--amarelo); transform: scale(1.14); } }
@keyframes tiqueRelogio { from { transform: scale(1.12); } }
.hud-prazo { display: flex; flex-direction: column; gap: 0.3cqw; padding-left: 1cqw; border-left: 0.1cqw solid rgba(255, 255, 255, 0.35); font-size: 0.9cqw; }
.hud-prazo-trilho { width: 9cqw; height: 0.45cqw; border-radius: 1cqw; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.hud-prazo-trilho i { display: block; height: 100%; background: #fff; border-radius: 1cqw; transition: width 0.8s ease; }
.hud-relogio.alerta .hud-prazo-trilho i { background: var(--amarelo); }
.hud-relogio.critico .hud-prazo-trilho i { background: #ffd0d3; animation: pulsar 0.8s infinite; }
.hud-mais {
  position: absolute;
  right: 1.2cqw;
  bottom: -1cqw;
  padding: 0.2cqw 0.6cqw;
  border-radius: 1cqw;
  background: var(--amarelo);
  color: #231900;
  font: 800 1.1cqw/1 var(--fonte-titulo);
  opacity: 0;
  pointer-events: none;
}
.hud-mais.mostrar { animation: maisHoras 1.8s ease forwards; }
@keyframes maisHoras {
  0% { opacity: 0; transform: translateY(0.8cqw) scale(0.6); }
  15% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1.2cqw); }
}
.hud-mapa {
  position: relative;
  height: 5cqw;
  aspect-ratio: 1600 / 715;
  padding: 0;
  border: 0.1cqw solid var(--borda);
  border-radius: 0.6cqw;
  background: rgba(8, 18, 36, 0.7);
  cursor: pointer;
  overflow: hidden;
}
.hud-mapa img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.hud-ponto { position: absolute; width: 0.75cqw; height: 0.75cqw; margin: -0.375cqw 0 0 -0.375cqw; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 0.25cqw rgba(227, 32, 43, 0.35), 0 0 1cqw var(--vermelho); animation: pulsoPonto 1.6s infinite; }
@keyframes pulsoPonto { 50% { box-shadow: 0 0 0 0.55cqw rgba(227, 32, 43, 0), 0 0 1cqw var(--vermelho); } }
.hud-direita { display: flex; align-items: center; gap: 0.9cqw; }
.selo-patente { padding: 0.45cqw 0.9cqw; border-radius: 2cqw; border: 0.1cqw solid rgba(246, 196, 69, 0.6); color: var(--amarelo); font: 700 1.05cqw/1 var(--fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.hud-config { width: 3.6cqw; height: 3.6cqw; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 0.1cqw solid var(--borda); background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: transform 0.3s; }
.hud-config:hover { transform: rotate(45deg); }
.hud-config svg { width: 2cqw; height: 2cqw; color: #cfd6e2; }

.hud-corpo {
  display: grid;
  grid-template-columns: 47.5% minmax(0, 1fr);
  gap: 1.3cqw;
  padding: 1.3cqw 1.6cqw 1.5cqw;
  min-height: 0;
}

/* imagem da cidade */
.painel-imagem {
  position: relative;
  min-height: 0;
  border-radius: 1.1cqw;
  overflow: hidden;
  border: 0.14cqw solid rgba(255, 255, 255, 0.6);
  background: #0b1020;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.6), 0 0 1.4cqw rgba(255, 255, 255, 0.1);
}
.painel-imagem .cena,
.palco .cena-camada { position: absolute; inset: 0; }
.cena-camada { transition: opacity 0.9s ease; }
.cena-camada.entrando { opacity: 0; }
.chip-local {
  position: absolute;
  top: 1.2cqw;
  left: 1.2cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.55cqw 1.1cqw 0.55cqw 0.8cqw;
  border-radius: 0.6cqw;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(6px);
  font: 700 1.45cqw/1 var(--fonte-titulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-local svg { width: 1.5cqw; height: 1.5cqw; }
.faixa-chegada {
  position: absolute;
  left: 0;
  bottom: 9%;
  z-index: 2;
  padding: 1cqw 3cqw 1.1cqw 2cqw;
  background: linear-gradient(90deg, rgba(227, 32, 43, 0.95), rgba(150, 12, 20, 0.92) 70%, transparent);
  transform: translateX(-105%);
  pointer-events: none;
}
.faixa-chegada small { display: block; font: 700 1cqw/1 var(--fonte-titulo); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; }
.faixa-chegada strong { display: block; font: 800 3.6cqw/1 var(--fonte-titulo); text-transform: uppercase; margin-top: 0.2cqw; }
.faixa-chegada span { font-size: 1.3cqw; font-weight: 600; }
.faixa-chegada.mostrar { animation: faixa 3.2s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes faixa {
  0% { transform: translateX(-105%); }
  14% { transform: translateX(0); }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* coluna da direita */
.coluna-direita { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.3cqw; min-height: 0; }
.painel-texto {
  position: relative;
  min-height: 0;
  border-radius: 1.1cqw;
  overflow: hidden;
  border: 0.1cqw solid rgba(255, 255, 255, 0.17);
  background: linear-gradient(160deg, rgba(27, 32, 45, 0.97), rgba(9, 11, 17, 0.98));
  box-shadow: inset 0 0 3cqw rgba(0, 0, 0, 0.55), 0 1cqw 2.4cqw rgba(0, 0, 0, 0.5);
}
.painel-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.45) contrast(1.15);
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 80%);
  mask-image: linear-gradient(to left, #000 10%, transparent 80%);
  transition: background-image 0.6s;
}
.painel-conteudo {
  position: absolute;
  inset: 0;
  padding: 2.3cqw 2.6cqw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  --escala-texto: 1;
}
.painel-conteudo.entrando > * { animation: subir 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) both; opacity: 0; transform: translateY(1cqw); }
.painel-conteudo.entrando > *:nth-child(2) { animation-delay: 0.08s; }
.painel-conteudo.entrando > *:nth-child(3) { animation-delay: 0.16s; }
.painel-conteudo.entrando > *:nth-child(4) { animation-delay: 0.24s; }

.texto-principal {
  position: relative;
  margin: 0;
  padding-left: 1.7cqw;
  font-size: calc(2.15cqw * var(--escala-texto));
  line-height: 1.36;
  font-weight: 600;
}
.texto-principal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5cqw;
  bottom: 0.5cqw;
  width: 0.34cqw;
  border-radius: 0.2cqw;
  background: var(--vermelho);
  box-shadow: 0 0 1cqw rgba(227, 32, 43, 0.65);
}
.dica-acao { margin: 1.8cqw 0 0 1.7cqw; color: var(--texto-3); font-size: 1.15cqw; }
.dica-acao b { color: var(--texto-2); }

.painel-titulo { display: flex; align-items: center; gap: 0.8cqw; margin: 0 0 0.4cqw; font: 800 2.2cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.painel-titulo svg { width: 2.2cqw; height: 2.2cqw; color: var(--verde); }
.painel-sub { margin: 0 0 1.4cqw; color: var(--texto-2); font-size: 1.2cqw; }
.painel-sub b { color: var(--amarelo); }
.painel-botoes { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.7cqw; }

/* =========================================================
   TESTEMUNHAS QUE FALAM: retrato do personagem + balão de fala
   ========================================================= */
.depoimento { display: grid; grid-template-columns: 14.5cqw minmax(0, 1fr); gap: 1.8cqw; align-items: start; }
@keyframes pular { from { transform: scale(0.4); } to { transform: none; } }
.depoimento-personagem { display: flex; flex-direction: column; align-items: center; text-align: center; animation: pular 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pc-retrato {
  position: relative;
  width: 14.5cqw;
  aspect-ratio: 120 / 130;
  border-radius: 1.4cqw;
  overflow: hidden;
  background: var(--fundo-pc, #2e4057);
  box-shadow: inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.2), 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.45);
}
.pc-retrato::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.3), transparent 62%); }
.pc-retrato svg { position: relative; display: block; width: 100%; height: 100%; }
.pc-nome { margin-top: 0.8cqw; font: 800 1.45cqw/1.05 var(--fonte-titulo); color: var(--ciano); text-transform: uppercase; letter-spacing: 0.03em; }
.pc-local { margin-top: 0.25cqw; color: var(--texto-2); font-size: 1.05cqw; line-height: 1.25; }
.pc-repetido {
  margin-top: 0.45cqw;
  padding: 0.2cqw 0.65cqw;
  border-radius: 1cqw;
  background: rgba(61, 220, 132, 0.16);
  color: var(--verde);
  font: 700 0.95cqw/1.2 var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* balão de fala branco, com a pontinha apontando para quem está falando */
.balao {
  position: relative;
  margin: 1.2cqw 0 0;
  padding: 1.4cqw 1.7cqw;
  border-radius: 1.4cqw;
  background: #fbfbfd;
  color: #1d2333;
  box-shadow: 0 0.6cqw 1.8cqw rgba(0, 0, 0, 0.45);
  font-size: calc(1.8cqw * var(--escala-texto));
  line-height: 1.38;
  font-weight: 600;
  cursor: pointer;
  animation: balao 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
  transform-origin: left 3.6cqw;
}
.balao::before {
  content: "";
  position: absolute;
  left: -1.3cqw;
  top: 3.2cqw;
  border-style: solid;
  border-width: 0.9cqw 1.4cqw 0.9cqw 0;
  border-color: transparent #fbfbfd transparent transparent;
}
@keyframes balao { from { opacity: 0; transform: scale(0.85) translateX(-1cqw); } to { opacity: 1; transform: none; } }
.balao mark.destaque { padding: 0 0.25cqw; border-radius: 0.3cqw; background: #ffe27a; color: #1d2333; }
.balao mark.traco { padding: 0 0.25cqw; border-radius: 0.3cqw; background: #cdeeff; color: #0b4f6c; }
.palavra { transition: opacity 0.14s ease; }
.palavra.oculta { opacity: 0; }
.balao mark { transition: background-color 0.14s ease; }
.balao mark.oculta { background: transparent; }

/* boca que mexe, olhos que piscam e cabeça que balança */
.pc-boca-meia,
.pc-boca-aberta { opacity: 0; }
.falando .pc-boca-fechada { animation: bocaFechada 0.36s steps(1, end) infinite; }
.falando .pc-boca-meia { animation: bocaMeia 0.36s steps(1, end) infinite; }
.falando .pc-boca-aberta { animation: bocaAberta 0.36s steps(1, end) infinite; }
@keyframes bocaFechada { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bocaMeia { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bocaAberta { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
.pc-palpebra { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); animation: piscarOlho 4.2s ease-in-out var(--piscar, 0s) infinite; }
@keyframes piscarOlho { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.pc-cabeca { transform-box: view-box; transform-origin: 60px 100px; animation: respirarPc 3.4s ease-in-out infinite; }
@keyframes respirarPc { 50% { transform: translateY(0.8px) rotate(-1deg); } }
.falando .pc-cabeca { animation: falarPc 0.8s ease-in-out infinite; }
@keyframes falarPc { 25% { transform: rotate(1.6deg) translateY(-0.6px); } 75% { transform: rotate(-1.6deg); } }

/* avisos (sono, imprevisto) */
.evento { text-align: center; padding-top: 1cqw; }
.evento-icone { font-size: 6.4cqw; line-height: 1; animation: flutuar 2.4s ease-in-out infinite; }
.evento.imprevisto .evento-icone { animation: tremer 0.5s ease 3; }
@keyframes flutuar { 50% { transform: translateY(-0.8cqw); } }
@keyframes tremer { 25% { transform: translateX(-0.6cqw) rotate(-8deg); } 75% { transform: translateX(0.6cqw) rotate(8deg); } }
.evento h3 { margin: 1cqw 0 0.6cqw; font: 800 2.8cqw/1 var(--fonte-titulo); text-transform: uppercase; color: var(--amarelo); }
.evento.imprevisto h3 { color: #ff8a8f; }
.evento p { margin: 0 auto; max-width: 40cqw; font-size: 1.85cqw; line-height: 1.38; font-weight: 600; }
.evento .painel-botoes { justify-content: center; }

/* botões de ação (VER, VIAJAR, INVESTIGAR, DOSSIÊ) */
.acoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; height: 9cqw; }
.acao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55cqw;
  padding: 0;
  border-radius: 1cqw;
  border: 0.12cqw solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, #2c313d 0%, #171b24 100%);
  font: 700 1.8cqw/1 var(--fonte-titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0.1cqw 0 rgba(255, 255, 255, 0.13), 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.5);
  transition: transform 0.15s, box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.acao svg { width: 3.4cqw; height: 3.4cqw; }
.acao:hover { transform: translateY(-0.2cqw); border-color: rgba(255, 255, 255, 0.6); }
.acao.ativa {
  border-color: var(--verde);
  background: linear-gradient(180deg, #1d4a33 0%, #0f2419 100%);
  box-shadow: 0 0 0 0.1cqw var(--verde), 0 0 2cqw rgba(61, 220, 132, 0.55), inset 0 0 1.6cqw rgba(61, 220, 132, 0.22);
}
.acao-azul { background: linear-gradient(180deg, #2f66ea 0%, #163a9e 100%); border-color: #6b94ff; }
.acao-selo {
  position: absolute;
  top: -0.75cqw;
  right: 0.7cqw;
  padding: 0.22cqw 0.6cqw;
  border-radius: 1cqw;
  background: var(--vermelho);
  font: 700 0.85cqw/1 var(--fonte-texto);
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.5);
}
.acao-selo.ok { background: var(--verde); color: #04210f; }

/* =========================================================
   MAPA DE VIAGEM
   ========================================================= */
.camada-mapa { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(ellipse at 45% 40%, #0e1c38 0%, #050810 70%); }
.mapa-area {
  position: relative;
  margin: 0 2.4cqw;
  border-radius: 1.2cqw;
  overflow: hidden;
  border: 0.1cqw solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(ellipse at 50% 50%, #12305a 0%, #0a1a33 65%, #071226 100%);
}
.mapa-area > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-area #paises path { fill: #24324d; stroke: #3d5277; stroke-width: calc(0.9px * var(--k, 1)); stroke-linejoin: round; transition: fill 0.35s ease; }
.mapa-area #paises path.pais-opcao { fill: #2a4a7c; }
.mapa-area #paises path.pais-atual { fill: #7a1e27; }
.mapa-area #paises path.pais-foco { fill: #c48f2c; }
.m-linha { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: calc(1.4px * var(--k, 1)); stroke-dasharray: calc(6px * var(--k, 1)) calc(7px * var(--k, 1)); }
.m-linha.equador { stroke: rgba(246, 196, 69, 0.55); stroke-width: calc(1.8px * var(--k, 1)); }
.m-texto-linha { fill: rgba(255, 255, 255, 0.55); font: 600 15px var(--fonte-texto); }
.m-texto-linha.equador { fill: rgba(246, 196, 69, 0.85); }
.m-continente { fill: rgba(255, 255, 255, 0.2); font: 800 30px var(--fonte-titulo); letter-spacing: 6px; text-anchor: middle; }
.m-oceano { fill: rgba(140, 190, 255, 0.35); font: italic 600 19px var(--fonte-texto); text-anchor: middle; letter-spacing: 2px; }
.m-relevo-rotulo { fill: rgba(255, 220, 170, 0.75); font: 600 15px var(--fonte-texto); }
.m-relevo-rotulo.rio { fill: rgba(143, 208, 255, 0.85); font-style: italic; }
.m-relevo-rotulo.deserto { fill: rgba(255, 214, 140, 0.55); font-style: italic; letter-spacing: 1px; }
.m-montanha { fill: #9c7b52; stroke: #3b2c1c; stroke-width: 0.8; }
.m-rio { fill: none; stroke: #5fb7ff; stroke-width: calc(2.4px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.m-trajeto { fill: none; stroke: rgba(255, 120, 128, 0.7); stroke-width: calc(2.5px * var(--k, 1)); stroke-dasharray: calc(3px * var(--k, 1)) calc(7px * var(--k, 1)); stroke-linecap: round; }
.m-trajeto-ponto { fill: rgba(255, 120, 128, 0.8); }
.m-arco { fill: none; stroke: rgba(246, 196, 69, 0.75); stroke-width: calc(3px * var(--k, 1)); stroke-dasharray: calc(10px * var(--k, 1)) calc(9px * var(--k, 1)); stroke-linecap: round; animation: arcoAnda 1s linear infinite; }
@keyframes arcoAnda { to { stroke-dashoffset: calc(-19px * var(--k, 1)); } }
.m-rastro { fill: none; stroke: #fff; stroke-width: calc(3.5px * var(--k, 1)); stroke-linecap: round; }
.m-atual-anel { fill: none; stroke: var(--vermelho); stroke-width: 3; animation: anel 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes anel { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.m-atual { fill: var(--vermelho); stroke: #fff; stroke-width: 3; }
.m-destino circle { fill: var(--amarelo); stroke: #1b1400; stroke-width: 2.5; transition: r 0.2s; }
.m-destino text.m-num { fill: #1b1400; font: 800 16px var(--fonte-titulo); text-anchor: middle; dominant-baseline: central; }
.m-destino.foco circle { fill: #fff; r: 19px; }
.m-rotulo rect { fill: rgba(6, 10, 20, 0.86); stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.m-rotulo text { fill: #fff; font: 700 19px var(--fonte-titulo); letter-spacing: 0.5px; text-transform: uppercase; }
.m-rotulo.atual rect { fill: rgba(150, 14, 22, 0.92); stroke: #ff8088; }
.m-rotulo.foco rect { fill: var(--amarelo); stroke: #fff; }
.m-rotulo.foco text { fill: #1b1400; }
.m-aviao { fill: #fff; stroke: #1b2233; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }

.mapa-rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4cqw; align-items: stretch; padding: 1.2cqw 2.4cqw 1.6cqw; }
.lista-destinos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.destino {
  display: grid;
  grid-template-columns: 3.2cqw minmax(0, 1fr);
  align-items: center;
  column-gap: 0.9cqw;
  padding: 0.85cqw 1.1cqw;
  border-radius: 1cqw;
  border: 0.12cqw solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #252b3a, #141822);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.destino:hover,
.destino.foco { border-color: var(--amarelo); box-shadow: 0 0 1.6cqw rgba(246, 196, 69, 0.45); }
.destino-num { grid-row: span 3; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--amarelo); color: #1b1400; font: 800 1.7cqw/1 var(--fonte-titulo); }
.destino strong { font: 800 1.75cqw/1.05 var(--fonte-titulo); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destino small { color: var(--texto-2); font-size: 1.05cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destino em { font-style: normal; color: #9fc2ff; font-size: 0.95cqw; }
.mapa-dica { align-self: center; max-width: 17cqw; margin: 0; color: var(--texto-2); font-size: 1.1cqw; line-height: 1.6; }
.mapa-dica .btn-a { vertical-align: middle; }
.mapa-voando {
  position: absolute;
  left: 50%;
  bottom: 1.6cqw;
  z-index: 5;
  padding: 1cqw 2.4cqw;
  border-radius: 1cqw;
  background: rgba(6, 10, 20, 0.85);
  border: 0.1cqw solid rgba(255, 255, 255, 0.25);
  font: 700 1.4cqw/1.2 var(--fonte-titulo);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transform: translate(-50%, 1cqw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.mapa-voando strong { display: block; font-size: 3cqw; letter-spacing: 0.04em; color: var(--amarelo); }
#voando-relogio { display: inline-block; margin-top: 0.3cqw; font-size: 1.7cqw; color: #fff; }
#voando-relogio.tique { animation: tiqueHora 0.22s ease-out; }
.voando-horas { display: block; margin-top: 0.35cqw; font-size: 1.05cqw; letter-spacing: 0.12em; color: var(--texto-2); }
.camada-mapa.voando .mapa-voando { opacity: 1; transform: translate(-50%, 0); }
.camada-mapa.voando .mapa-rodape,
.camada-mapa.voando .camada-cabecalho button { opacity: 0.25; pointer-events: none; }

/* =========================================================
   DOSSIÊ
   ========================================================= */
.camada-dossie { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dossie-corpo { display: grid; grid-template-columns: 33cqw minmax(0, 1fr); gap: 2cqw; padding: 0.4cqw 2.4cqw 2cqw; min-height: 0; }
.dossie-tracos { display: flex; flex-direction: column; gap: 0.8cqw; min-height: 0; overflow-y: auto; padding: 0.6cqw; }
.traco-grupo h3 { margin: 0 0 0.45cqw; font: 700 1.15cqw/1 var(--fonte-titulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5cqw; }
.chip {
  padding: 0.45cqw 0.85cqw;
  border-radius: 2cqw;
  border: 0.12cqw solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  font: 600 1.15cqw/1.2 var(--fonte-texto);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.chip:hover { border-color: rgba(255, 255, 255, 0.6); }
.chip.ativo { background: var(--ciano); border-color: var(--ciano); color: #00222e; box-shadow: 0 0 1.2cqw rgba(79, 214, 255, 0.5); }
.dossie-limpar { align-self: flex-start; }
.dossie-direita { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1cqw; min-height: 0; }
.dossie-contagem { font: 800 1.6cqw/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.06em; }
.dossie-contagem b { color: var(--amarelo); font-size: 2.1cqw; }
.dossie-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.8cqw; padding: 0.4cqw; }
.suspeito {
  position: relative;
  padding: 0.5cqw 0.4cqw 0.7cqw;
  border-radius: 0.9cqw;
  border: 0.12cqw solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #212737, #12161f);
  text-align: center;
  cursor: pointer;
  transition: filter 0.4s, opacity 0.4s, transform 0.2s, border-color 0.2s;
}
.suspeito .avatar { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.6cqw; }
.suspeito span { display: block; margin-top: 0.45cqw; font: 700 1.02cqw/1.05 var(--fonte-titulo); text-transform: uppercase; }
.suspeito.descartado { filter: grayscale(1) brightness(0.45); opacity: 0.55; }
.suspeito.descartado::after { content: "✕"; position: absolute; top: 0.4cqw; right: 0.6cqw; color: var(--vermelho); font: 800 1.5cqw/1 var(--fonte-titulo); }
.suspeito.chefe { border-color: rgba(227, 32, 43, 0.75); }
.suspeito.com-mandado { border-color: var(--verde); box-shadow: 0 0 1.2cqw rgba(61, 220, 132, 0.5); }
.dossie-ficha { min-height: 0; padding: 1.1cqw 1.4cqw; border-radius: 1cqw; border: 0.1cqw solid var(--borda); background: rgba(255, 255, 255, 0.04); overflow-y: auto; }
.dossie-ficha strong { display: block; font: 800 1.9cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.dossie-ficha p { margin: 0.5cqw 0; font-size: 1.3cqw; color: var(--texto-2); }
.dossie-ficha .tracos-lista { display: flex; flex-wrap: wrap; gap: 0.5cqw; margin-top: 0.6cqw; }
.dossie-ficha .tracos-lista span { padding: 0.25cqw 0.7cqw; border-radius: 1cqw; background: rgba(79, 214, 255, 0.12); color: var(--ciano); font-size: 1.05cqw; }
.dossie-acao { display: flex; gap: 1.2cqw; align-items: center; }
.dossie-acao .btn { flex: 1; font-size: 1.7cqw; padding: 1.1cqw; }
.dossie-mandado { flex: 1; padding: 1cqw 1.4cqw; border-radius: 1cqw; border: 0.12cqw dashed var(--borda-forte); color: var(--texto-2); font-size: 1.3cqw; }
.dossie-mandado.ok { border-style: solid; border-color: var(--verde); color: var(--verde); }

/* =========================================================
   ARQUIVO (VER): CIDADE, PISTAS E ALMANAQUE
   ========================================================= */
.camada-arquivo { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.abas { display: flex; gap: 0.7cqw; }
.aba {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.75cqw 1.5cqw;
  border-radius: 2cqw;
  border: 0.12cqw solid var(--borda-forte);
  background: rgba(255, 255, 255, 0.04);
  font: 700 1.35cqw/1 var(--fonte-titulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.aba svg { width: 1.5cqw; height: 1.5cqw; }
.aba.ativa { background: var(--vermelho); border-color: #ff7a82; box-shadow: 0 0 1.4cqw rgba(227, 32, 43, 0.5); }
.abas-dica { color: var(--texto-3); font-size: 1cqw; margin-left: 0.6cqw; align-self: center; }
.arquivo-corpo { min-height: 0; padding: 0.4cqw 2.4cqw 2cqw; }

.arquivo-cidade { display: grid; grid-template-columns: 38cqw minmax(0, 1fr); gap: 2.2cqw; height: 100%; min-height: 0; }
.arquivo-esquerda { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1cqw; min-height: 0; }
.arquivo-foto { position: relative; min-height: 0; border-radius: 1cqw; overflow: hidden; border: 0.12cqw solid rgba(255, 255, 255, 0.4); }
.arquivo-foto .cena { position: absolute; inset: 0; }
.arquivo-texto { min-height: 0; overflow-y: auto; padding-right: 0.6cqw; }
.arquivo-texto h3 { margin: 0; font: 800 3.4cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.arquivo-texto h3 small { display: block; margin-top: 0.4cqw; font-size: 1.5cqw; color: var(--texto-2); letter-spacing: 0.08em; }
.arquivo-texto .texto-principal { margin-top: 1.4cqw; font-size: 1.7cqw; }
.fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9cqw; margin-top: 1.6cqw; }
.fato { padding: 0.8cqw 1.1cqw; border-radius: 0.9cqw; border: 0.1cqw solid var(--borda); background: rgba(255, 255, 255, 0.04); }
.fato.largo { grid-column: span 2; }
.fato dt { font: 700 0.95cqw/1 var(--fonte-titulo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }
.fato dd { margin: 0.35cqw 0 0; font-size: 1.25cqw; line-height: 1.35; font-weight: 600; }

.minimapa { position: relative; width: 100%; aspect-ratio: 1600 / 715; border-radius: 0.8cqw; overflow: hidden; background: rgba(10, 26, 51, 0.8); border: 0.1cqw solid var(--borda); }
.minimapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.minimapa g path { fill: #24324d; stroke: #3d5277; stroke-width: 0.7; stroke-linejoin: round; }
.minimapa g path.pais-foco { fill: #c48f2c; stroke: #ffe3a3; stroke-width: 1.2; }
.mini-ponto { fill: var(--vermelho); stroke: #fff; stroke-width: 2.5; }
.mini-anel { fill: none; stroke: var(--vermelho); stroke-width: 3; animation: anel 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }

.pistas-lista { height: 100%; overflow-y: auto; padding-right: 0.8cqw; }
.pistas-cidade { margin-bottom: 1.6cqw; }
.pistas-cidade h4 { display: flex; align-items: center; gap: 0.7cqw; margin: 0 0 0.7cqw; font: 800 1.7cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.pistas-cidade h4 svg { width: 1.7cqw; height: 1.7cqw; }
.pistas-cidade h4 span { font: 600 1.05cqw var(--fonte-texto); color: var(--texto-3); text-transform: none; }
.nota { display: grid; grid-template-columns: 9cqw minmax(0, 1fr); gap: 1cqw; padding: 0.7cqw 0; border-top: 0.08cqw solid var(--borda); font-size: 1.4cqw; line-height: 1.35; }
.nota small { color: var(--texto-3); font-size: 1cqw; line-height: 1.3; }
.vazio { color: var(--texto-2); font-size: 1.6cqw; text-align: center; margin-top: 6cqw; }

.almanaque { display: grid; grid-template-columns: 34cqw minmax(0, 1fr); gap: 2cqw; height: 100%; min-height: 0; }
.almanaque-esquerda { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.9cqw; min-height: 0; }
.busca {
  width: 100%;
  padding: 0.8cqw 1.2cqw;
  border-radius: 0.8cqw;
  border: 0.12cqw solid var(--borda-forte);
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
  font: 600 1.3cqw var(--fonte-texto);
}
.busca::placeholder { color: var(--texto-3); }
.lista-paises { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6cqw; align-content: start; overflow-y: auto; padding: 0.4cqw; min-height: 0; }
.pais-botao {
  padding: 0.65cqw 0.9cqw;
  border-radius: 0.8cqw;
  border: 0.1cqw solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
}
.pais-botao strong { display: block; font: 700 1.3cqw/1.1 var(--fonte-titulo); text-transform: uppercase; }
.pais-botao small { color: var(--texto-3); font-size: 0.95cqw; }
.pais-botao.selecionado { border-color: var(--amarelo); background: rgba(246, 196, 69, 0.1); }
.lista-paises .vazio { grid-column: 1 / -1; margin-top: 2cqw; font-size: 1.3cqw; }
.almanaque-detalhe { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1cqw; min-height: 0; }
.almanaque-topo { display: grid; grid-template-columns: minmax(0, 1fr) 27cqw; gap: 1.4cqw; align-items: end; }
.almanaque-topo h3 { margin: 0; font: 800 3cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.almanaque-topo h3 small { display: block; margin-top: 0.3cqw; font-size: 1.3cqw; color: var(--texto-2); letter-spacing: 0.06em; }
.almanaque-fatos { overflow-y: auto; min-height: 0; padding-right: 0.6cqw; }
.almanaque-fatos .fatos { margin-top: 0; }

/* =========================================================
   JANELA DE INVESTIGAR (os 3 locais da cidade, cada um com seu desenho)
   ========================================================= */
.camada-investigar { top: 6.8cqw; display: grid; place-items: center; background: rgba(4, 6, 11, 0.78); } /* o relógio do topo fica sempre à vista */
.janela-investigar {
  position: relative;
  width: 80cqw;
  padding: 2.1cqw 2.4cqw 1.7cqw;
  border-radius: 1.6cqw;
  border: 0.12cqw solid var(--borda-forte);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(227, 32, 43, 0.2), transparent 62%),
    linear-gradient(165deg, #1b2131 0%, #0d1018 100%);
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, 0.75), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.08);
  transform: translateY(2cqw) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.camada-investigar.aberta .janela-investigar { transform: none; }
.janela-investigar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.38cqw;
  border-radius: 1.6cqw 1.6cqw 0 0;
  background: linear-gradient(90deg, var(--vermelho), #ff6a3d 55%, var(--amarelo));
}
.investigar-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; margin-bottom: 1.8cqw; }
.investigar-topo h2 {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  margin: 0;
  font: 800 2.8cqw/1 var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.investigar-topo h2 svg { width: 2.6cqw; height: 2.6cqw; color: var(--vermelho); flex: 0 0 auto; }
.investigar-topo p { margin: 0.6cqw 0 0; color: var(--texto-2); font-size: 1.3cqw; }

.investigar-locais { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
/* trilha pontilhada ligando os locais (enfeite) */
.investigar-caminho {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 9cqw;
  border-top: 0.34cqw dotted rgba(246, 196, 69, 0.6);
  pointer-events: none;
}
.lugar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35cqw;
  min-width: 0;
  padding: 0.8cqw 0.8cqw 1.1cqw;
  border-radius: 1.2cqw;
  border: 0.12cqw solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, #252c3d, #121620);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.5);
  animation: lugarEntra 0.55s var(--atraso, 0s) cubic-bezier(0.2, 1.25, 0.4, 1) backwards;
  transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s;
}
@keyframes lugarEntra { from { opacity: 0; transform: translateY(3cqw) scale(0.92); } }
.lugar:hover { border-color: rgba(255, 255, 255, 0.6); transform: translateY(-0.3cqw); }
.lugar:active { transform: scale(0.97); }
.lugar-desenho {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.6cqw;
  border-radius: 0.8cqw;
  background: #0b1020;
}
.lugar-desenho svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lugar-desenho::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.lugar strong { display: block; font: 800 1.75cqw/1.05 var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.lugar small { display: block; color: var(--texto-2); font-size: 1.15cqw; line-height: 1.3; }
.lugar-custo {
  position: absolute;
  top: 1.3cqw;
  right: 1.3cqw;
  z-index: 1;
  padding: 0.35cqw 0.7cqw;
  border-radius: 1cqw;
  background: var(--amarelo);
  color: #231900;
  font: 800 1.2cqw/1 var(--fonte-titulo);
  box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.45);
}
.lugar.ouvido { border-color: rgba(61, 220, 132, 0.4); }
.lugar-ouvido {
  position: absolute;
  top: 1.3cqw;
  left: 1.3cqw;
  z-index: 1;
  padding: 0.35cqw 0.7cqw;
  border-radius: 1cqw;
  background: var(--verde);
  color: #04210f;
  font: 800 1.1cqw/1 var(--fonte-titulo);
  box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.45);
}
.lugar.ouvido .lugar-desenho svg { filter: saturate(0.65) brightness(0.88); }
body.modo-controle .palco .lugar:focus { border-color: #fff; }
.investigar-dica { margin: 1.6cqw 0 0; text-align: center; color: var(--texto-2); font-size: 1.15cqw; }
.investigar-dica .btn-a { vertical-align: middle; margin: 0 0.2cqw; }

/* caminhada até o local: os outros saem, o escolhido vai para o meio e as pegadas chegam até ele */
.janela-investigar.caminhando .lugar:not(.escolhido) {
  opacity: 0;
  transform: scale(0.86);
  filter: blur(0.25cqw);
  transition: opacity 0.3s ease, transform 0.35s ease, filter 0.3s ease;
}
.janela-investigar.caminhando .investigar-caminho,
.janela-investigar.caminhando .investigar-dica,
.janela-investigar.caminhando .investigar-topo .btn { opacity: 0; transition: opacity 0.25s ease; }
.janela-investigar.caminhando .lugar.escolhido {
  z-index: 3;
  border-color: rgba(246, 196, 69, 0.8);
  box-shadow: 0 0 2.4cqw rgba(246, 196, 69, 0.35), 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.5);
}
.pegadas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pegada {
  position: absolute;
  width: 1.6cqw;
  height: 2.7cqw;
  margin: -1.35cqw 0 0 -0.8cqw;
  transform: rotate(var(--giro, 90deg));
}
.pegada.esquerda { transform: rotate(var(--giro, 90deg)) scaleX(-1); }
.pegada svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--amarelo);
  opacity: 0;
  filter: drop-shadow(0 0 0.45cqw rgba(246, 196, 69, 0.65));
  animation: pegada 1.5s var(--atraso, 0s) ease-out forwards;
}
@keyframes pegada {
  0% { opacity: 0; transform: scale(1.7); }
  14% { opacity: 1; transform: scale(1); }
  60% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0.25; transform: scale(1); }
}
.lugar.chegou .lugar-desenho { animation: chegouLocal 0.6s ease-out; }
@keyframes chegouLocal { from { box-shadow: 0 0 0 0 rgba(246, 196, 69, 0.95); } to { box-shadow: 0 0 0 1.6cqw rgba(246, 196, 69, 0); } }

/* =========================================================
   PISTA CERTA: alguém de máscara aparece (desenhos próprios do jogo).
   5 jeitos sorteados pelo jogo.js: corrida, espiada, ponta dos pés,
   skate e carro de fuga (e a maioria pode vir pela esquerda ou pela direita).
   ========================================================= */
.ladrao-cena {
  --dur: 2.9s; /* o jogo.js informa a duração de cada jeito */
  position: absolute;
  inset: 6.8cqw 0 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 30% at 50% 78%, rgba(246, 196, 69, 0.14), transparent 70%),
    rgba(4, 6, 11, 0.9);
  animation: ladraoFundo var(--dur) ease both;
}
@keyframes ladraoFundo { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.ladrao-aviso { position: absolute; top: 5.5cqw; left: 0; right: 0; z-index: 3; text-align: center; animation: ladraoAviso var(--dur) ease both; }
.ladrao-aviso strong {
  display: block;
  font: 800 4.6cqw/1 var(--fonte-titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amarelo);
  text-shadow: 0 0.3cqw 1.4cqw rgba(0, 0, 0, 0.7);
}
.ladrao-aviso span { display: block; margin-top: 0.8cqw; font-size: 1.8cqw; font-weight: 600; color: #fff; text-shadow: 0 0.2cqw 1cqw rgba(0, 0, 0, 0.7); }
@keyframes ladraoAviso {
  0%, 22% { opacity: 0; transform: translateY(-1.2cqw) scale(0.92); }
  32% { opacity: 1; transform: none; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.ladrao { position: absolute; left: 0; bottom: 6cqw; z-index: 1; width: 22cqw; aspect-ratio: 140 / 170; }
.ld-espelho { width: 100%; height: 100%; }
.ladrao.espelhado .ld-espelho { transform: scaleX(-1); } /* vem da direita para a esquerda */
.ladrao svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* o corpo: correndo (pernas e braços balançando, corpo inclinado e quicando) */
.ld-corpo,
.ld-perna-a,
.ld-perna-b,
.ld-braco-a,
.ld-braco-b { transform-box: view-box; }
.ld-corpo { transform-origin: 66px 102px; animation: ldQuica 0.17s ease-in-out infinite alternate; }
.ld-perna-a,
.ld-perna-b { transform-origin: 66px 102px; }
.ld-braco-a,
.ld-braco-b { transform-origin: 63px 63px; }
.ld-perna-a { animation: ldPerna 0.34s ease-in-out infinite alternate; }
.ld-perna-b { animation: ldPerna 0.34s ease-in-out infinite alternate-reverse; }
.ld-braco-a { animation: ldBraco 0.34s ease-in-out infinite alternate-reverse; }
.ld-braco-b { animation: ldBraco 0.34s ease-in-out infinite alternate; }
@keyframes ldQuica { from { transform: rotate(7deg); } to { transform: translateY(-4px) rotate(7deg); } }
@keyframes ldPerna { from { transform: rotate(-36deg); } to { transform: rotate(36deg); } }
@keyframes ldBraco { from { transform: rotate(-42deg); } to { transform: rotate(42deg); } }
.ld-pupila { transform: translateX(1.7px); transition: transform 0.15s ease; }
.ld-poeira circle { transform-box: fill-box; transform-origin: center; animation: ldPoeira 0.34s ease-out infinite; }
.ld-poeira circle:nth-child(2) { animation-delay: 0.11s; }
.ld-poeira circle:nth-child(3) { animation-delay: 0.22s; }
@keyframes ldPoeira { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: translateX(-8px) scale(1.4); } }
.ld-rastro,
.ld-poeira { transition: opacity 0.15s ease; }
.ld-alerta { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.ld-roda { transform-box: fill-box; transform-origin: center; }

/* parado atrás do muro (espiada) */
.ladrao.estatico .ld-corpo,
.ladrao.estatico .ld-perna-a,
.ladrao.estatico .ld-perna-b,
.ladrao.estatico .ld-braco-a,
.ladrao.estatico .ld-braco-b { animation: none; transform: none; }
.ladrao.estatico .ld-corpo { transition: transform 0.2s ease; }
.ladrao.estatico .ld-rastro,
.ladrao.estatico .ld-poeira { opacity: 0; }
.ladrao.estatico .ld-pupila { transform: none; }
.ladrao.olha-esq .ld-pupila { transform: translateX(-1.9px); }
.ladrao.olha-dir .ld-pupila { transform: translateX(1.9px); }
.ladrao.olha-esq .ld-corpo { transform: rotate(-4deg); }
.ladrao.olha-dir .ld-corpo { transform: rotate(4deg); }

/* na ponta dos pés: passos lentos, corpo subindo e descendo, mãos para a frente */
.ladrao.pontas .ld-corpo { animation: ldPontasCorpo 0.165s ease-in-out infinite alternate; }
.ladrao.pontas .ld-perna-a { animation: ldPontasPerna 0.33s ease-in-out infinite alternate; }
.ladrao.pontas .ld-perna-b { animation: ldPontasPerna 0.33s ease-in-out infinite alternate-reverse; }
.ladrao.pontas .ld-braco-a { animation: ldPontasBraco 0.33s ease-in-out infinite alternate; }
.ladrao.pontas .ld-braco-b { animation: ldPontasBraco 0.33s ease-in-out infinite alternate-reverse; }
.ladrao.pontas .ld-rastro,
.ladrao.pontas .ld-poeira { opacity: 0; }
.ladrao.pontas .ld-pupila { animation: ldDesconfia 1.1s steps(1, end) infinite; }
@keyframes ldPontasCorpo { from { transform: translateY(3px) rotate(11deg); } to { transform: translateY(-3px) rotate(11deg); } }
@keyframes ldDesconfia { 0% { transform: translateX(1.9px); } 50% { transform: translateX(-1.9px) translateY(0.4px); } }
@keyframes ldPontasPerna { from { transform: rotate(-22deg); } to { transform: rotate(20deg); } }
@keyframes ldPontasBraco { from { transform: rotate(-70deg); } to { transform: rotate(-50deg); } }

/* no skate: pernas firmes na prancha, braços abertos para o equilíbrio e rodinhas girando */
.ladrao.skate .ld-corpo { animation: ldSurfa 0.8s ease-in-out infinite alternate; }
.ladrao.skate .ld-perna-a { animation: none; transform: rotate(-16deg); }
.ladrao.skate .ld-perna-b { animation: none; transform: rotate(18deg); }
.ladrao.skate .ld-braco-a { animation: ldSkateBracoA 0.8s ease-in-out infinite alternate; }
.ladrao.skate .ld-braco-b { animation: ldSkateBracoB 0.8s ease-in-out infinite alternate; }
.ladrao.skate .ld-roda { animation: ldRoda 0.28s linear infinite; }
@keyframes ldSurfa { from { transform: rotate(4deg); } to { transform: translateY(1.5px) rotate(-1deg); } }
@keyframes ldSkateBracoA { from { transform: rotate(-80deg); } to { transform: rotate(-66deg); } }
@keyframes ldSkateBracoB { from { transform: rotate(72deg); } to { transform: rotate(86deg); } }
@keyframes ldRoda { to { transform: rotate(360deg); } }

/* olha para o detetive sem parar (skate) */
.ladrao.olhando .ld-pupila { transform: translate(-0.8px, 0.6px); }
.ladrao.olhando .ld-alerta { animation: ldAlerta 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }

/* para, olha para o detetive e aparece o "!" */
.ladrao.parado .ld-corpo,
.ladrao.parado .ld-perna-a,
.ladrao.parado .ld-perna-b,
.ladrao.parado .ld-braco-a,
.ladrao.parado .ld-braco-b { animation: none; transform: none; }
.ladrao.parado .ld-rastro,
.ladrao.parado .ld-poeira { opacity: 0; }
.ladrao.parado .ld-pupila { transform: translate(-0.8px, 0.6px); }
.ladrao.parado .ld-alerta { animation: ldAlerta 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes ldAlerta { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }

/* ---------- 1) corrida: passa correndo, para no meio, olha e foge ---------- */
.ladrao.v-corrida { animation: ladraoCorre 2.6s both; }
.ladrao.v-corrida.espelhado { animation-name: ladraoCorreVolta; }
@keyframes ladraoCorre {
  0% { transform: translateX(-26cqw); animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1); }
  32% { transform: translateX(39cqw); }
  62% { transform: translateX(39cqw); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.55); }
  100% { transform: translateX(126cqw); }
}
@keyframes ladraoCorreVolta {
  0% { transform: translateX(104cqw); animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1); }
  32% { transform: translateX(39cqw); }
  62% { transform: translateX(39cqw); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.55); }
  100% { transform: translateX(-48cqw); }
}

/* ---------- 2) espiada: os olhos aparecem por cima do murinho, olham para os lados e somem ---------- */
.ld-muro { position: absolute; left: 29cqw; bottom: 0; z-index: 2; width: 42cqw; height: 21cqw; }
.ld-muro svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ladrao.v-espiada { left: 39cqw; animation: ldEspia 3.2s both; }
@keyframes ldEspia {
  0%, 8% { transform: translateY(46%); animation-timing-function: ease-out; }
  22% { transform: translateY(23%); }
  54% { transform: translateY(23%); animation-timing-function: cubic-bezier(0.2, 1.8, 0.4, 1); }
  58% { transform: translateY(11%); }
  68% { transform: translateY(11%); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  74%, 100% { transform: translateY(50%); }
}

/* ---------- 3) ponta dos pés: passa devagarinho, é visto e sai em disparada ---------- */
.ladrao.v-pontas { animation: ldPontas 3.5s both; }
.ladrao.v-pontas.espelhado { animation-name: ldPontasVolta; }
@keyframes ldPontas {
  0% { transform: translateX(-22cqw); animation-timing-function: linear; }
  52% { transform: translateX(39cqw); }
  67% { transform: translateX(39cqw); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.6); }
  86%, 100% { transform: translateX(108cqw); }
}
@keyframes ldPontasVolta {
  0% { transform: translateX(100cqw); animation-timing-function: linear; }
  52% { transform: translateX(39cqw); }
  67% { transform: translateX(39cqw); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.6); }
  86%, 100% { transform: translateX(-30cqw); }
}

/* ---------- 4) skate: passa voando e dá um pulo no meio (a sombra fica no chão) ---------- */
.ladrao.v-skate { bottom: 4.5cqw; animation: ldSkate 2.4s linear both; }
.ladrao.v-skate.espelhado { animation-name: ldSkateVolta; }
@keyframes ldSkate { from { transform: translateX(-26cqw); } to { transform: translateX(126cqw); } }
@keyframes ldSkateVolta { from { transform: translateX(104cqw); } to { transform: translateX(-48cqw); } }
.v-skate svg { transform-origin: 50% 90%; animation: ldPulo 2.4s both; }
@keyframes ldPulo {
  0%, 39% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  48% { transform: translateY(-24%) rotate(-7deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  57% { transform: none; animation-timing-function: ease-out; }
  60% { transform: translateY(2%); }
  64%, 100% { transform: none; }
}
.v-skate .ld-sombra { transform-box: fill-box; transform-origin: center; animation: ldPuloSombra 2.4s both; }
@keyframes ldPuloSombra {
  0%, 39% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  48% { transform: translateY(41px) scale(0.6); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  57%, 100% { transform: none; }
}

/* ---------- 5) carro de fuga: chega derrapando, o motorista mascarado buzina e acelera ---------- */
.ladrao.v-carro { bottom: 4.5cqw; width: 31cqw; aspect-ratio: 220 / 120; animation: ldCarro 3.2s both; }
.ladrao.v-carro.espelhado { animation-name: ldCarroVolta; }
@keyframes ldCarro {
  0% { transform: translateX(104cqw); animation-timing-function: cubic-bezier(0.15, 0.6, 0.35, 1); }
  35% { transform: translateX(35cqw); }
  61% { transform: translateX(35cqw); animation-timing-function: cubic-bezier(0.65, 0, 0.95, 0.45); }
  92%, 100% { transform: translateX(-36cqw); }
}
@keyframes ldCarroVolta {
  0% { transform: translateX(-35cqw); animation-timing-function: cubic-bezier(0.15, 0.6, 0.35, 1); }
  35% { transform: translateX(34cqw); }
  61% { transform: translateX(34cqw); animation-timing-function: cubic-bezier(0.65, 0, 0.95, 0.45); }
  92%, 100% { transform: translateX(105cqw); }
}
.ld-carro-corpo { transform-box: view-box; transform-origin: 58px 108px; transition: transform 0.22s ease; }
.ld-freada,
.ld-fumaca { opacity: 0; transition: opacity 0.2s ease; }
.ld-fumaca circle { transform-box: fill-box; transform-origin: center; }
.v-carro .ld-pupila { transform: translateX(-1.2px); }
.v-carro .ld-roda { animation: ldRodaCarro 0.22s linear infinite; }
@keyframes ldRodaCarro { to { transform: rotate(-360deg); } }
.ladrao.freando .ld-carro-corpo { transform: rotate(-4deg); } /* freada: a traseira levanta */
.ladrao.freando .ld-freada,
.ladrao.v-carro.parado .ld-freada { opacity: 0.8; }
.ladrao.freando .ld-roda { animation-duration: 0.6s; }
.ladrao.v-carro.parado .ld-carro-corpo { transition: transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1); }
.ladrao.v-carro.parado .ld-roda { animation: none; }
.ladrao.acelerando .ld-carro-corpo { transform-origin: 168px 108px; transform: rotate(3deg); } /* arrancada: a frente levanta */
.ladrao.acelerando .ld-roda { animation-duration: 0.14s; }
.ladrao.acelerando .ld-fumaca { opacity: 1; }
.ladrao.acelerando .ld-fumaca circle { animation: ldFumaca 0.45s ease-out infinite; }
.ladrao.acelerando .ld-fumaca circle:nth-child(2) { animation-delay: 0.15s; }
.ladrao.acelerando .ld-fumaca circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes ldFumaca { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: translateX(14px) scale(1.8); } }

/* =========================================================
   BANDEIRAS (desenhos nas pistas, nas anotações e no Almanaque)
   ========================================================= */
.bandeira-pista {
  display: inline-block;
  vertical-align: middle;
  width: 7.2cqw;
  aspect-ratio: 3 / 2;
  margin: 0.3cqw 0.4cqw;
  border-radius: 0.3cqw;
  overflow: hidden;
  box-shadow: 0 0.2cqw 0.7cqw rgba(0, 0, 0, 0.35);
  transition: opacity 0.14s ease, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.bandeira-pista.oculta { transform: scale(0.35); }
.bandeira-pista svg,
.mini-bandeira svg { display: block; width: 100%; height: 100%; }
.nota .bandeira-pista { width: 4.4cqw; }
.mini-bandeira {
  display: inline-block;
  vertical-align: -0.12em;
  width: 1.9cqw;
  aspect-ratio: 3 / 2;
  margin-right: 0.6cqw;
  border-radius: 0.15cqw;
  overflow: hidden;
  box-shadow: 0 0 0 0.06cqw rgba(255, 255, 255, 0.25);
}
.fato-bandeira { display: flex; align-items: center; gap: 1cqw; }
.fato-bandeira .mini-bandeira { flex: none; width: 6.4cqw; margin: 0; border-radius: 0.3cqw; }

/* =========================================================
   FINAL DO CASO: a polícia prende o suspeito (vitória)
   ou ele foge no veículo dele e o detetive sai triste (derrota)
   ========================================================= */
.final-cena {
  position: absolute;
  inset: 6.8cqw 0 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 32% at 50% 80%, rgba(246, 196, 69, 0.13), transparent 70%),
    rgba(4, 6, 11, 0.92);
  animation: ladraoFundo var(--dur) ease both;
}
.final-cena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5.6cqw; height: 0.2cqw; background: rgba(255, 255, 255, 0.1); }
.final-sirene { position: absolute; inset: 0; animation: fsSirene 0.5s steps(1, end) infinite; }
@keyframes fsSirene {
  0% { background: radial-gradient(ellipse 60% 75% at 0% 0%, rgba(227, 32, 43, 0.38), transparent 70%); }
  50% { background: radial-gradient(ellipse 60% 75% at 100% 0%, rgba(47, 111, 255, 0.38), transparent 70%); }
}
.final-carimbo {
  position: absolute;
  left: 82%;
  top: 17cqw;
  z-index: 4;
  padding: 0.6cqw 2.4cqw;
  font: 800 6.2cqw/1 var(--fonte-titulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde);
  border: 0.5cqw solid var(--verde);
  border-radius: 1cqw;
  background: rgba(4, 6, 11, 0.55);
  opacity: 0;
  transform: translateX(-50%) rotate(-12deg) scale(2.6);
}
.final-carimbo.bate { animation: fsCarimbo 0.42s cubic-bezier(0.5, 0, 0.6, 1.4) forwards; }
@keyframes fsCarimbo {
  0% { opacity: 0; transform: translateX(-50%) rotate(-12deg) scale(2.6); }
  70% { opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(1); }
}

/* vitória: o suspeito corre, o policial vem atrás, alcança e algema */
.ladrao.fs-suspeito { animation: fsFoge 5s both; }
.ladrao.fs-policial { animation: fsPersegue 5s both; }
@keyframes fsFoge {
  0% { transform: translateX(-26cqw); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  35%, 100% { transform: translateX(56cqw); }
}
@keyframes fsPersegue {
  0%, 5% { transform: translateX(-30cqw); animation-timing-function: cubic-bezier(0.3, 0.55, 0.5, 1); }
  41%, 100% { transform: translateX(38cqw); }
}
.fs-suspeito .ld-braco-a,
.fs-suspeito .ld-braco-b,
.fs-policial .ld-braco-a,
.fs-suspeito .ld-corpo { transition: transform 0.25s ease; }
.ladrao.fs-policial .ld-alerta,
.ladrao.fs-detetive .ld-alerta { display: none; }
.ladrao.rendido .ld-braco-a { transform: rotate(-120deg); }
.ladrao.rendido .ld-braco-b { transform: rotate(120deg); }
.ladrao.rendido .ld-pupila { transform: translateX(-1.9px); }
.ladrao.algemado .ld-braco-a,
.ladrao.algemado .ld-braco-b { transform: rotate(28deg); }
.ladrao.algemado .ld-corpo { transform: rotate(-3deg); }
.ladrao.algemado .ld-pupila { transform: translate(0, 0.8px); }
.fs-algemas {
  position: absolute;
  left: 22%;
  top: 50%;
  width: 15%;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.fs-algemas svg { display: block; width: 100%; height: auto; }
.ladrao.algemado .fs-algemas { opacity: 1; transform: none; }
.ladrao.algemando .ld-braco-a { transform: rotate(-80deg); }
.ld-algemas { transition: opacity 0.15s ease; }
.ladrao.algemou .ld-algemas { opacity: 0; }

/* derrota: o suspeito passa no veículo dele, para, ri e foge */
.ladrao.fs-veiculo { bottom: 4.5cqw; width: 31cqw; aspect-ratio: 220 / 120; animation: fsVeiculo 6.4s both; }
.ladrao.fs-veiculo.v-helicoptero { animation-name: fsHeli; }
@keyframes fsVeiculo {
  0% { transform: translateX(-40cqw); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  14% { transform: translateX(34cqw); }
  31% { transform: translateX(34cqw); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  45%, 100% { transform: translateX(118cqw); }
}
@keyframes fsHeli {
  0% { transform: translate(-40cqw, -8cqw); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  14% { transform: translate(34cqw, -2cqw); }
  31% { transform: translate(34cqw, -2cqw); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  45%, 100% { transform: translate(112cqw, -34cqw); }
}
.fs-veiculo .ld-roda { animation: ldRoda 0.22s linear infinite; }
.ladrao.fs-veiculo.parado .ld-roda { animation: none; }
.ladrao.fs-veiculo.acelerando .ld-roda { animation-duration: 0.12s; }
.ladrao.fs-veiculo.acelerando .ld-fumaca { opacity: 1; }
.ladrao.fs-veiculo.acelerando .ld-fumaca circle { animation: fsFumaca 0.45s ease-out infinite; }
.ladrao.fs-veiculo.acelerando .ld-fumaca circle:nth-child(2) { animation-delay: 0.15s; }
.ladrao.fs-veiculo.acelerando .ld-fumaca circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes fsFumaca { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: translateX(-14px) scale(1.8); } }
.vf-corpo { transform-box: view-box; transform-origin: 110px 108px; transition: transform 0.2s ease; }
.ladrao.rindo .vf-corpo { animation: fsRindo 0.16s ease-in-out infinite alternate; }
.ladrao.acelerando .vf-corpo { transform: rotate(-3deg); }
@keyframes fsRindo { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
.ld-helice { transform-box: fill-box; transform-origin: center; animation: fsHelice 0.1s linear infinite alternate; }
@keyframes fsHelice { from { transform: scaleX(1); } to { transform: scaleX(0.12); } }
.fs-relogio { position: absolute; right: 9cqw; top: 15cqw; z-index: 2; font-size: 7cqw; line-height: 1; animation: fsRelogio 0.4s ease-in-out 8 alternate; }
@keyframes fsRelogio { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* derrota: o detetive chega cabisbaixo, com uma nuvem de chuva em cima, suspira e vai embora */
.ladrao.fs-detetive { width: 18cqw; animation: fsDetetive 6.4s both; }
@keyframes fsDetetive {
  0%, 37% { transform: translateX(-26cqw); animation-timing-function: linear; }
  61% { transform: translateX(32cqw); }
  77% { transform: translateX(32cqw); animation-timing-function: linear; }
  100% { transform: translateX(6cqw); }
}
.ladrao.triste .ld-corpo { animation: fsTristeCorpo 0.7s ease-in-out infinite alternate; }
.ladrao.triste .ld-perna-a { animation: fsTristePerna 0.7s ease-in-out infinite alternate; }
.ladrao.triste .ld-perna-b { animation: fsTristePerna 0.7s ease-in-out infinite alternate-reverse; }
.ladrao.triste .ld-braco-a,
.ladrao.triste .ld-braco-b { animation: fsTristeBraco 1.4s ease-in-out infinite alternate; }
.ladrao.triste .ld-rastro,
.ladrao.triste .ld-poeira { opacity: 0; }
.ladrao.triste .ld-pupila { transform: translate(0.6px, 1.6px); }
.ladrao.triste.parado .ld-corpo { animation: none; transform: rotate(12deg) translateY(5px); }
.ladrao.triste.parado .ld-perna-a,
.ladrao.triste.parado .ld-perna-b,
.ladrao.triste.parado .ld-braco-a,
.ladrao.triste.parado .ld-braco-b { animation: none; transform: none; }
.dt-boca { transform-box: fill-box; transform-origin: center; }
.ladrao.triste .dt-boca { transform: scaleY(-1) translateY(-1px); }
@keyframes fsTristeCorpo { from { transform: rotate(9deg) translateY(3px); } to { transform: rotate(9deg) translateY(5px); } }
@keyframes fsTristePerna { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes fsTristeBraco { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.fs-nuvem { position: absolute; left: 14%; top: -23%; width: 72%; opacity: 0; transition: opacity 0.5s ease; }
.fs-nuvem svg { display: block; width: 100%; height: auto; overflow: visible; }
.ladrao.triste .fs-nuvem { opacity: 1; }
.nv-gota { animation: nvChove 0.55s linear infinite; }
@keyframes nvChove { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }

/* =========================================================
   HORA DE DORMIR (janela que conta as horas de sono, da noite ao amanhecer)
   ========================================================= */
.camada-sono { top: 6.8cqw; display: grid; place-items: center; background: rgba(4, 6, 11, 0.78); } /* relógio do topo à vista */
.janela-sono {
  --manha: 0;
  position: relative;
  width: 46cqw;
  padding: 1.8cqw 2.6cqw 2.2cqw;
  border-radius: 1.6cqw;
  border: 0.12cqw solid var(--borda-forte);
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #0a1033 0%, #18245f 62%, #26337a 100%);
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, 0.75);
  transform: translateY(2cqw) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.camada-sono.aberta .janela-sono { transform: none; }
/* o céu clareia a cada hora de sono */
.janela-sono::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #3f69b8 0%, #9b6f9e 55%, #e58f66 100%);
  opacity: var(--manha);
  transition: opacity 0.4s linear;
}
/* estrelas que piscam e somem quando amanhece */
.janela-sono::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 9% 14%, #fff 0 0.12cqw, transparent 0.17cqw),
    radial-gradient(circle at 21% 36%, #fff 0 0.09cqw, transparent 0.14cqw),
    radial-gradient(circle at 33% 9%, #fff 0 0.1cqw, transparent 0.15cqw),
    radial-gradient(circle at 74% 12%, #fff 0 0.12cqw, transparent 0.17cqw),
    radial-gradient(circle at 86% 31%, #fff 0 0.09cqw, transparent 0.14cqw),
    radial-gradient(circle at 92% 8%, #fff 0 0.1cqw, transparent 0.15cqw),
    radial-gradient(circle at 14% 62%, #fff 0 0.08cqw, transparent 0.13cqw),
    radial-gradient(circle at 88% 58%, #fff 0 0.08cqw, transparent 0.13cqw),
    radial-gradient(circle at 63% 24%, #fff 0 0.07cqw, transparent 0.12cqw);
  opacity: calc(1 - var(--manha) * 1.4);
  transition: opacity 0.4s linear;
  animation: estrelas 1.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes estrelas { from { filter: brightness(0.6); } to { filter: brightness(1.4); } }
.janela-sono > * { position: relative; z-index: 1; }
.sono-ceu { position: relative; height: 9.4cqw; margin-bottom: 0.4cqw; }
.sono-lua,
.sono-sol { position: absolute; left: 50%; top: 0.4cqw; width: 8.4cqw; height: 8.4cqw; margin-left: -4.2cqw; overflow: visible; }
.sono-lua {
  fill: #ffd96b;
  filter: drop-shadow(0 0 1.6cqw rgba(255, 217, 107, 0.6));
  opacity: calc(1 - var(--manha) * 1.15);
  transform: translateY(calc(var(--manha) * 7cqw)) rotate(calc(var(--manha) * -25deg));
  transition: transform 0.4s linear, opacity 0.4s linear;
}
.sono-sol {
  fill: #ffd23f;
  stroke: #ffd23f;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2cqw rgba(255, 210, 63, 0.75));
  opacity: 0;
  transform: translateY(6cqw) scale(0.6);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.janela-sono.acordou .sono-sol { opacity: 1; transform: none; }
.sono-raios { transform-box: view-box; transform-origin: 50px 50px; animation: girarSol 14s linear infinite; }
@keyframes girarSol { to { transform: rotate(360deg); } }
.sono-zzz { position: absolute; left: 58%; top: 1.6cqw; width: 6cqw; height: 6cqw; font: 800 2cqw/1 var(--fonte-titulo); color: #cfe0ff; }
.sono-zzz i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; animation: zzz 2.4s ease-in infinite; }
.sono-zzz i:nth-child(2) { font-size: 2.6cqw; animation-delay: 0.8s; }
.sono-zzz i:nth-child(3) { font-size: 3.2cqw; animation-delay: 1.6s; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 1.5cqw) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(4cqw, -3.5cqw) scale(1.1); }
}
.janela-sono.acordou .sono-zzz { display: none; }
.janela-sono h2 {
  margin: 0 0 0.6cqw;
  font: 800 3cqw/1 var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--amarelo);
  text-shadow: 0 0.2cqw 1cqw rgba(0, 0, 0, 0.55);
}
.janela-sono.acordou h2 { color: #fff; animation: pular 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.sono-texto { max-width: 38cqw; margin: 0 auto 1.2cqw; font-size: 1.35cqw; line-height: 1.4; color: #eef2ff; text-shadow: 0 0.1cqw 0.6cqw rgba(0, 0, 0, 0.6); }
.sono-contador {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 14cqw;
  padding: 0.8cqw 2.4cqw 1cqw;
  border-radius: 1.2cqw;
  border: 0.1cqw solid rgba(255, 255, 255, 0.2);
  background: rgba(3, 6, 20, 0.45);
}
.sono-contador strong { font: 800 7cqw/1 var(--fonte-titulo); color: #fff; text-shadow: 0 0.3cqw 1.4cqw rgba(0, 0, 0, 0.5); }
.sono-contador span { margin-top: 0.3cqw; font: 700 1.2cqw/1 var(--fonte-titulo); letter-spacing: 0.2em; text-transform: uppercase; color: #cfe0ff; }
.sono-contador.tique strong { animation: tiqueSono 0.32s ease-out; }
@keyframes tiqueSono { from { color: var(--amarelo); transform: scale(1.28); } }
.sono-prazo { margin: 1cqw 0 0; font-size: 1.3cqw; color: #eef2ff; text-shadow: 0 0.1cqw 0.6cqw rgba(0, 0, 0, 0.6); }
#sono-continuar { margin-top: 1.4cqw; animation: surgir 0.4s both; }

/* =========================================================
   PROVA DE PROMOÇÃO (fica por cima da tela final; o Almanaque abre por cima dela)
   ========================================================= */
.camada-prova { z-index: 22; display: grid; place-items: center; }
.camada-arquivo { z-index: 23; }
.cartao-prova { width: 56cqw; }
.prova-selo {
  display: inline-block;
  margin-bottom: 1cqw;
  padding: 0.4cqw 1.4cqw;
  border-radius: 2cqw;
  background: rgba(246, 196, 69, 0.15);
  color: var(--amarelo);
  font: 800 1.3cqw/1.2 var(--fonte-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prova-pergunta { margin: 0 0 1.6cqw; font: 700 2.2cqw/1.35 var(--fonte-texto); color: #ffffff; }
.prova-pergunta .bandeira-pista { display: block; width: 12cqw; margin: 1cqw auto 0; }
.prova-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin-bottom: 1.4cqw; }
.prova-opcao { justify-content: flex-start; font-size: 1.6cqw; text-align: left; }
.prova-letra {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.4cqw;
  height: 2.4cqw;
  margin-right: 0.8cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font: 800 1.3cqw/1 var(--fonte-titulo);
}
.prova-opcao:disabled { opacity: 0.55; }
.prova-opcao.certa { opacity: 1; background: var(--verde); border-color: var(--verde); color: #04210f; }
.prova-opcao.errada { opacity: 1; background: #ff6b73; border-color: #ff6b73; color: #2a0006; }
.cartao .prova-resultado { margin: 0 0 1.4cqw; font: 700 1.7cqw/1.3 var(--fonte-texto); }
.cartao .prova-resultado.certo { color: var(--verde); }
.cartao .prova-resultado.errado { color: #ff9aa0; }
.prova-botoes { display: flex; justify-content: center; gap: 1.2cqw; }

/* =========================================================
   MENU, AJUDA E CONFIRMAÇÃO
   ========================================================= */
.camada-menu,
.camada-confirmar,
.camada-ajuda { display: grid; place-items: center; }
.cartao {
  width: 40cqw;
  padding: 2.2cqw 2.4cqw;
  border-radius: 1.4cqw;
  border: 0.12cqw solid var(--borda-forte);
  background: linear-gradient(160deg, #1b2131, #0d1018);
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.7);
  text-align: center;
}
.cartao h2 { margin: 0 0 1.4cqw; font: 800 2.6cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.cartao p { margin: 0 0 1.6cqw; font-size: 1.5cqw; line-height: 1.4; color: var(--texto-2); }
.menu-botoes { display: grid; gap: 0.9cqw; }
.menu-botoes .btn { width: 100%; justify-content: flex-start; font-size: 1.6cqw; }
.confirmar-botoes { display: flex; justify-content: center; gap: 1.2cqw; }

.cartao-ajuda { width: 74cqw; text-align: left; }
.ajuda-colunas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.4cqw; }
.ajuda-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9cqw; }
.ajuda-passos li { display: grid; grid-template-columns: 3cqw minmax(0, 1fr); gap: 0.9cqw; align-items: start; font-size: 1.3cqw; line-height: 1.35; }
.ajuda-passos b { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 1.5cqw; font-weight: 400; }
.ajuda-passos strong { color: var(--amarelo); }
.ajuda-controles h3 { margin: 0 0 0.8cqw; font: 800 1.6cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.ajuda-controles table { width: 100%; border-collapse: collapse; font-size: 1.2cqw; }
.ajuda-controles td { padding: 0.5cqw 0.4cqw; border-top: 0.08cqw solid var(--borda); }
.ajuda-controles td:first-child { width: 45%; font-weight: 700; color: #fff; }
.ajuda-rodape { margin-top: 1.8cqw; text-align: center; }

/* =========================================================
   FINAL DO CASO
   ========================================================= */
.camada-final { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, #1a2238 0%, #05070c 70%); }
.final-caixa { width: 74cqw; text-align: center; }
.final-titulo { margin: 0; font: 800 5.4cqw/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.02em; animation: estourar 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.final-titulo.vitoria { color: var(--verde); text-shadow: 0 0 3cqw rgba(61, 220, 132, 0.45); }
.final-titulo.derrota { color: #ff6b73; text-shadow: 0 0 3cqw rgba(227, 32, 43, 0.45); }
@keyframes estourar { from { opacity: 0; transform: scale(1.6); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.final-meio { display: grid; grid-template-columns: 15cqw minmax(0, 1fr); gap: 2.2cqw; align-items: center; margin: 2cqw auto 1.4cqw; text-align: left; }
.final-retrato { position: relative; }
.final-retrato .avatar { width: 15cqw; height: 15cqw; border-radius: 1.2cqw; border: 0.18cqw solid #fff; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.7); }
.final-retrato span { display: block; margin-top: 0.6cqw; text-align: center; font: 800 1.6cqw/1 var(--fonte-titulo); text-transform: uppercase; }
.carimbo {
  position: absolute;
  left: 50%;
  top: 42%;
  padding: 0.4cqw 1.2cqw;
  border: 0.45cqw solid;
  border-radius: 0.6cqw;
  font: 800 3.2cqw/1 var(--fonte-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: carimbar 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: var(--atraso, 0.9s);
}
.carimbo.preso { color: var(--verde); border-color: var(--verde); }
.carimbo.escapou { color: #ff6b73; border-color: #ff6b73; }
@keyframes carimbar {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
.final-texto { font-size: 1.75cqw; line-height: 1.42; font-weight: 600; }
.final-numeros { display: flex; justify-content: center; align-items: stretch; gap: 1.2cqw; margin: 1.4cqw 0; flex-wrap: wrap; }
.final-numero { min-width: 13cqw; padding: 0.9cqw 1.2cqw; border-radius: 1cqw; border: 0.1cqw solid var(--borda); background: rgba(255, 255, 255, 0.04); }
.final-numero small { display: block; font: 700 0.95cqw/1 var(--fonte-titulo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }
.final-numero strong { display: block; margin-top: 0.3cqw; font: 800 2.4cqw/1 var(--fonte-titulo); }
.final-numero.pontos strong { color: var(--amarelo); font-size: 3cqw; }
.final-selo { display: inline-block; margin: 0 0.6cqw 1cqw; padding: 0.6cqw 1.4cqw; border-radius: 2cqw; font: 800 1.4cqw/1 var(--fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; animation: estourar 0.6s 1.6s both; }
.final-selo.recorde { background: var(--amarelo); color: #231900; box-shadow: 0 0 2cqw rgba(246, 196, 69, 0.6); }
.final-selo.promocao { background: var(--azul); color: #fff; box-shadow: 0 0 2cqw rgba(58, 120, 255, 0.6); }
.final-botoes { display: flex; justify-content: center; gap: 1.2cqw; margin-top: 1.2cqw; }

/* confete da vitória */
.confete { position: absolute; top: 0; z-index: 70; width: 0.7cqw; height: 1.1cqw; border-radius: 0.15cqw; pointer-events: none; }

/* =========================================================
   AVISOS
   ========================================================= */
.toast {
  position: absolute;
  left: 50%;
  top: 1.4cqw;
  z-index: 60;
  max-width: 60cqw;
  padding: 0.9cqw 1.6cqw;
  border-radius: 1cqw;
  border: 0.1cqw solid var(--borda-forte);
  background: rgba(10, 14, 24, 0.94);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.6);
  font: 600 1.3cqw/1.3 var(--fonte-texto);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s ease;
  pointer-events: none;
}
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { border-color: var(--vermelho); }
.toast.erro.com-botao { pointer-events: auto; }
.toast .btn { margin-left: 1cqw; }

.carregando { position: absolute; right: 1.6cqw; bottom: 1.6cqw; z-index: 50; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 0.3cqw solid rgba(255, 255, 255, 0.2); border-top-color: var(--vermelho); opacity: 0; transition: opacity 0.2s; animation: girar 0.8s linear infinite; pointer-events: none; }
.carregando.mostrar { opacity: 1; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-girar { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  .aviso-girar {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 30px;
    background: #05070c;
    color: #fff;
    font: 700 22px/1.4 var(--fonte-titulo);
    text-align: center;
  }
}

/* =========================================================
   CENÁRIOS (imagem da IA ou desenho provisório)
   ========================================================= */
.cena { overflow: hidden; background: #0b1020; }
.cena > svg,
.cena > img,
.cena > .cena-tinta { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cena-img { object-fit: cover; transform-origin: 50% 55%; animation: kenburns 38s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.cena-tinta { pointer-events: none; mix-blend-mode: multiply; }
.periodo-amanhecer .cena-tinta { background: rgba(255, 180, 138, 0.35); }
.periodo-entardecer .cena-tinta { background: rgba(255, 154, 77, 0.45); }
.periodo-noite .cena-tinta { background: rgba(58, 74, 140, 0.8); }

.anim-nuvem { animation: nuvem 90s linear infinite; }
@keyframes nuvem { from { transform: translateX(-180px); } to { transform: translateX(820px); } }
.anim-onda { animation: onda 3s linear infinite; }
@keyframes onda { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.anim-balanco { animation: balanco 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes balanco { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(3px) rotate(2deg); } }
.anim-gira { animation: gira 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.anim-gira-lenta { animation: gira 70s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gira { to { transform: rotate(360deg); } }
.anim-passaro { animation: passaro 26s linear infinite; }
@keyframes passaro {
  0% { transform: translate(-40px, 0); }
  25% { transform: translate(160px, -12px); }
  50% { transform: translate(340px, 4px); }
  75% { transform: translate(520px, -10px); }
  100% { transform: translate(700px, 0); }
}
.anim-asa { animation: asa 0.45s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes asa { from { transform: scaleY(1); } to { transform: scaleY(-0.4); } }
.anim-estrela { animation: estrela 3s ease-in-out infinite; }
.anim-luz { animation: estrela 2.2s ease-in-out infinite; }
@keyframes estrela { 50% { opacity: 0.25; } }
.anim-sol { animation: sol 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sol { 50% { transform: scale(1.06); } }
.anim-chama { animation: chama 0.35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes chama { from { transform: scale(1, 1); } to { transform: scale(0.85, 1.15); } }
.anim-fumaca { animation: fumaca 4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fumaca {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translate(18px, -60px) scale(1.6); opacity: 0; }
}
.anim-geiser { animation: geiser 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes geiser {
  0%, 55%, 100% { transform: scaleY(0.05); opacity: 0; }
  62% { transform: scaleY(1); opacity: 1; }
  80% { transform: scaleY(0.9); opacity: 0.9; }
  92% { transform: scaleY(0.2); opacity: 0.3; }
}
.anim-aurora { animation: aurora 9s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: translateX(-20px); opacity: 0.55; } to { transform: translateX(20px); opacity: 0.95; } }
.anim-trem { animation: trem 9s linear infinite; }
@keyframes trem { 0% { transform: translateX(-420px); } 45%, 100% { transform: translateX(700px); } }
.anim-onibus { animation: onibus 14s linear infinite; }
@keyframes onibus { from { transform: translateX(-120px); } to { transform: translateX(700px); } }
.anim-camelo { animation: camelo 40s linear infinite; }
@keyframes camelo { from { transform: translateX(700px); } to { transform: translateX(-140px); } }
.anim-pinguim { animation: pinguim 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pinguim { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.anim-petala { animation: petala 7s linear infinite; }
@keyframes petala {
  from { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translate(-90px, 400px) rotate(540deg); opacity: 0.7; }
}
.anim-neve { animation: neve 8s linear infinite; }
@keyframes neve { from { transform: translate(0, -20px); } to { transform: translate(-30px, 420px); } }
.anim-bondinho { animation: bondinho 12s ease-in-out infinite; }
@keyframes bondinho {
  0%, 8% { transform: translate(var(--x1), var(--y1)); }
  46%, 54% { transform: translate(var(--x2), var(--y2)); }
  92%, 100% { transform: translate(var(--x1), var(--y1)); }
}
.anim-pipa { animation: pipa 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pipa { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-8px); } }
.anim-cabeca { animation: cabeca 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes cabeca { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
.anim-palma { animation: palma 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes palma { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.anim-nevoa { animation: nevoa 14s ease-in-out infinite alternate; }
.anim-toalha { animation: nevoa 10s ease-in-out infinite alternate; }
@keyframes nevoa { from { transform: translateX(-40px); } to { transform: translateX(40px); } }

/* "clip" corta igual ao "hidden", mas não deixa a tela rolar sozinha
   (por exemplo, quando um botão recebe foco perto da borda) */
.palco,
.tela-titulo,
.tela-intro,
.intro-fundo,
.painel-imagem,
.painel-texto,
.cena,
.lugar-desenho,
.arquivo-foto,
.minimapa,
.hud-mapa,
.mapa-area { overflow: clip; }

/* com uma janela aberta por cima, o cenário da cidade (atrás) fica parado: sobra fôlego para as animações da janela */
.tela-jogo.coberta .painel-imagem *,
.tela-jogo.coberta .painel-imagem *::before,
.tela-jogo.coberta .painel-imagem *::after { animation-play-state: paused !important; }

/* "Animações: reduzidas" no menu de pausa (o jogo não segue mais o ajuste do sistema sozinho) */
.animacao-reduzida .palco *,
.animacao-reduzida .palco *::before,
.animacao-reduzida .palco *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
/* (sem nenhuma transição: as janelas abrem na hora e o controle/teclado já encontra os botões) */