/* A landing e o mural, com a mesma cara da abertura do jogo: preto de quarto
   escuro, o nome em serifa didone, etiquetas miúdas e espaçadas, e o vermelho
   do REC como única cor. */

:root {
  --fundo: #06070a;
  --papel: #efeae1;
  --cinza: #ffffff59;
  --fraco: #ffffff2e;
  --hot: #ff2f2f;
  --linha: #ffffff14;
  --serifa: "Bodoni Moda", Didot, "Bodoni MT", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--fundo); color: var(--papel);
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2 { font-weight: 400; margin: 0; }

/* ---------- topo ---------- */
#top {
  position: relative; min-height: 88vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 8vh 6vw 6vh;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60, 80, 110, .22), transparent 60%),
    linear-gradient(to bottom, transparent 55%, var(--fundo)),
    url("/play/assets/scene.png") center 40% / cover no-repeat;
  overflow: hidden;
}
#top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .12) 3px 4px);
  mix-blend-mode: multiply;
}
#top > * { position: relative; z-index: 1; }
#visor {
  position: absolute; top: 24px; left: 6vw; right: 6vw; display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: .22em; color: var(--fraco);
}
.langs { display: flex; gap: 1.4em; }
.langs a { text-decoration: none; color: var(--fraco); }
.langs a.on { color: var(--papel); }
.langs a:hover { color: var(--cinza); }
#top h1 {
  font-family: var(--serifa); font-size: clamp(2.6rem, 10vw, 8rem); line-height: .92;
  letter-spacing: .17em; text-indent: .085em; color: var(--papel);
  text-shadow: 0 0 42px rgba(140, 170, 200, .16), 0 2px 0 rgba(0, 0, 0, .85);
}
#top .tag { margin: 1.6em 0 0; font-size: 10px; letter-spacing: .42em; text-indent: .42em; color: var(--cinza); }
#top .pitch { max-width: 34em; margin: 3.5em auto 0; font-size: 14px; color: #ffffffb8; }
.play {
  display: inline-block; margin-top: 2.6em; padding: 1em 3.2em; text-decoration: none;
  letter-spacing: .38em; text-indent: .38em; font-size: 12px; color: var(--papel);
  border: 1px solid #ffffff3d; background: #ffffff08; transition: border-color .2s, background .2s, box-shadow .3s;
}
.play:hover { border-color: var(--hot); background: #ff2f2f14; box-shadow: 0 0 34px rgba(255, 47, 47, .18); }
#top .note { margin: 2.2em 0 0; font-size: 9px; letter-spacing: .22em; color: var(--fraco); }

/* ---------- números ---------- */
#stats { max-width: 1080px; margin: 0 auto; padding: 4vh 6vw 8vh; }
#stats .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha);
}
.n { background: var(--fundo); padding: 2.2em 1.4em; text-align: center; }
.n b { display: block; font-family: var(--serifa); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: .04em; }
.n span { display: block; margin-top: 1.1em; font-size: 9px; letter-spacing: .3em; color: var(--cinza); }
.n.death b { color: var(--hot); text-shadow: 0 0 24px rgba(255, 47, 47, .35); }

.villains { margin-top: 4em; }
.villains h2, #wall h2 { font-size: 10px; letter-spacing: .42em; color: var(--cinza); }
.villain { display: grid; grid-template-columns: 96px 13em 1fr 4em; align-items: center; gap: 1.6em; margin-top: 1.6em; }
.villain img {
  width: 96px; height: 96px; object-fit: cover; display: block; border: 1px solid #ffffff1f;
  box-shadow: 0 0 0 1px #000, 0 0 24px rgba(255, 47, 47, .08); filter: saturate(.9);
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.villain:hover img { border-color: #ff2f2f66; box-shadow: 0 0 0 1px #000, 0 0 30px rgba(255, 47, 47, .28); transform: scale(1.03); }
.villain .nome { letter-spacing: .18em; font-size: 11px; }
.villain .nome i { display: block; font-style: normal; letter-spacing: .06em; font-size: 10px; color: var(--fraco); margin-top: .3em; }
.villain .barra { display: block; height: 3px; background: var(--linha); overflow: hidden; }
.villain .barra b { display: block; height: 100%; background: var(--hot); box-shadow: 0 0 12px rgba(255, 47, 47, .55); transition: width .6s ease-out; }
.villain .qtd { text-align: right; font-family: var(--serifa); font-size: 1.5rem; }
.rate { margin: 3em 0 0; font-size: 10px; letter-spacing: .3em; color: var(--cinza); }

/* ---------- mural ---------- */
#wall { max-width: 1080px; margin: 0 auto; padding: 0 6vw 10vh; border-top: 1px solid var(--linha); }
#wall .head { padding: 6vh 0 3vh; }
#wall .head p { margin: 1.2em 0 0; color: #ffffff8c; max-width: 40em; }
.tabs { display: flex; gap: 2.4em; margin-top: 2.6em; border-bottom: 1px solid var(--linha); }
.tabs a {
  padding: 0 0 1em; text-decoration: none; font-size: 10px; letter-spacing: .32em; color: var(--cinza);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.tabs a.on { color: var(--papel); border-bottom-color: var(--hot); }
.tabs a:hover { color: var(--papel); }

#scares { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2.2em 1.6em; margin-top: 2.6em; }
.scare { margin: 0; }
.tv {
  position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  border: 1px solid #ffffff1f; box-shadow: 0 0 0 1px #000, 0 0 28px rgba(255, 47, 47, .10);
  transition: box-shadow .3s, border-color .3s;
}
.scare:hover .tv { border-color: #ff2f2f66; box-shadow: 0 0 0 1px #000, 0 0 34px rgba(255, 47, 47, .26); }
.tv video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv .badge {
  position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 8px; letter-spacing: .24em; color: #ffffffb0; background: #00000080; padding: 4px 7px 4px 8px;
}
.tv .badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--hot); animation: pisca 1.9s ease-in-out infinite; }
@keyframes pisca { 0%, 45% { opacity: 1 } 55%, 100% { opacity: .15 } }

figcaption { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1em; margin-top: .9em; }
figcaption b { font-weight: 400; letter-spacing: .16em; font-size: 11px; }
figcaption > span { font-size: 10px; letter-spacing: .12em; color: var(--fraco); margin-top: .4em; }
.like {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; align-items: center; gap: .6em;
  background: none; border: 1px solid var(--linha); color: var(--cinza); padding: .45em .8em; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .1em; transition: color .2s, border-color .2s, transform .1s;
}
.like svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.like:hover { color: var(--papel); border-color: #ffffff3d; }
.like:active { transform: scale(.94); }
.like.on { color: var(--hot); border-color: #ff2f2f66; }
.like.on svg { fill: currentColor; }

.report {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  letter-spacing: inherit; text-decoration: none;
}
.report:hover { color: var(--hot); }
.report:disabled { cursor: default; color: var(--fraco); }

.empty { margin: 4em 0; text-align: center; font-size: 10px; letter-spacing: .3em; color: var(--cinza); }
.pages { display: flex; justify-content: center; align-items: center; gap: 3em; margin-top: 4em; font-size: 10px; letter-spacing: .3em; }
.pages .seta { text-decoration: none; color: var(--papel); }
.pages .seta.off { color: var(--fraco); }
.pages .onde { color: var(--cinza); }

footer { padding: 4vh 6vw 6vh; text-align: center; font-size: 9px; letter-spacing: .2em; color: var(--fraco); border-top: 1px solid var(--linha); }
footer p { max-width: 60em; margin: 0 auto; line-height: 2; }

@media (max-width: 640px) {
  .villain { grid-template-columns: 64px 1fr 3em; grid-template-areas: "img nome qtd" "img barra barra"; gap: .6em 1em; }
  .villain img { width: 64px; height: 64px; grid-area: img; }
  .villain .nome { grid-area: nome; }
  .villain .barra { grid-area: barra; }
  .villain .qtd { grid-area: qtd; }
  #top { min-height: 78vh; }
}