/* =============================================
   FILMES.CSS — Entre Tempos · Página de Filmes
   ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



html {
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  /* garante que os absolutos sejam contidos aqui */
}


body {
  background: #f2e8d5;
  font-family: 'Special Elite', serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('https://www.transparenttextures.com/patterns/aged-paper.webp');
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

header {
  position: relative;
  z-index: 10;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 2px solid #c4a96b;
}

header a {
  text-decoration: none;
  color: #3e4a59;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.2s;
}

header a:hover {
  color: #c0392b;
}

/* ── TÍTULO ── */
.page-titulo {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 30px 20px 10px;
}

.page-titulo h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 12vw, 130px);
  color: #1a1a1a;
  letter-spacing: 8px;
  line-height: 1;
  text-shadow: 4px 4px 0 #c4a96b;
}

.page-titulo .subtitulo {
  font-size: 14px;
  color: #7a6a50;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 8px;
}

.divisor {
  position: relative;
  z-index: 5;
  width: 80%;
  margin: 10px auto 30px;
  height: 2px;
  background: linear-gradient(to right, transparent, #c0392b, #c4a96b, #c0392b, transparent);
}

/* ── WRAPPER DE PÁGINA (largura total, base para as decorações) ── */
.pagina-filmes {
  position: relative;
  z-index: 1;
  min-height: 760px;
}

/* ── MURAL ── */
.mural-filmes {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 30px 120px;
}

.pagina-filmes {
  overflow-x: hidden;
}

/* ── IMAGENS DECORATIVAS DESKTOP ── */
.img-deco {
  position: absolute;
  pointer-events: none;
}

/* ─────────────────────────────────────
   LADO ESQUERDO
   ───────────────────────────────────── */

/* Chaplin pulando: canto superior, colado na borda esquerda do conteúdo central */
.img-chaplin {
  top: 6%;
  left: 68%;
  width: clamp(100px, 9vw, 170px);
  opacity: 0.92;
  filter: drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.18));
  transform: rotate(-4deg);
}

/* Relógio: topo esquerdo */
.img-relogio {
  top: -12%;
  left: 9%;
  width: clamp(180px, 16vw, 300px);
  opacity: 0.88;
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15));
  z-index: 1;
}

/* Escalada na corda: canto inferior esquerdo */
.img-escalada {
  bottom: 20%;
  left: -5%;
  width: clamp(250px, 23vw, 450px);
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  transform: rotate(90deg);
  z-index: 1;
}

/* Bond: canto inferior esquerdo, um pouco mais pro centro */
.img-bond {
  bottom: 6%;
  left: 15%;
  width: clamp(55px, 5vw, 90px);
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
}

/* Óculos: canto inferior esquerdo */
.img-oculos {
  bottom: -24%;
  left: 20%;
  width: clamp(90px, 8vw, 150px);
  transform: rotate(-4deg);
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.2));
}

/* ─────────────────────────────────────
   LADO DIREITO
   ───────────────────────────────────── */

/* Câmera: direita, abaixo do Padrinho */
.img-camera {
  top: 40%;
  right: 1%;
  width: clamp(80px, 8vw, 150px);
  transform: rotate(5deg);
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.3));
  opacity: 0.88;
}

/* Padrinho: canto superior direito */
.img-godfather {
  top: 21%;
  right: 5%;
  width: clamp(120px, 11vw, 220px);
  filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.25));
}

/* TV: meio direito */
.img-tv {
  top: 50%;
  right: 10%;
  width: clamp(80px, 8vw, 140px);
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.2));
}

/* Fight Club: canto inferior direito */
.img-fight {
  bottom: 0%;
  right: 3%;
  width: clamp(80px, 8vw, 140px);
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.35));
  opacity: 0.9;
}

/* ── TOP 5 WRAPPER ── */
.top5-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.top5-lista {
  flex: 1;
  min-width: 280px;
  max-width: 640px;
  margin: 0 auto;
  padding-left: clamp(0px, 9vw, 120px);
}

/* ── NAVEGAÇÃO MÊS ── */
.nav-mes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.top5-titulo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: #1a1a1a;
  letter-spacing: 4px;
  border-left: 5px solid #c0392b;
  padding-left: 15px;
  line-height: 1;
}

.top5-titulo .mes-label {
  font-family: 'Special Elite', serif;
  font-size: 18px;
  color: #8c3b3b;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: capitalize;
  display: block;
  margin-top: 4px;
}

.seta-mes {
  background: #c0392b;
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.seta-mes:hover {
  background: #922b21;
  transform: scale(1.1);
}

.seta-mes:active {
  transform: scale(0.93);
}

/* ── LISTA ── */
.lista-filmes {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.filme-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed #c4a96b;
  transition: transform 0.2s;
  animation: entrar 0.35s ease both;
  cursor: default;
}

.filme-item.clicavel {
  cursor: pointer;
}

.filme-item.clicavel:hover {
  transform: translateX(6px);
  background: rgba(192, 57, 43, 0.05);
  padding: 12px 8px;
  margin-left: -8px;
  border-radius: 4px;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── BOTÃO DE UPVOTE (estilo reddit) ── */
.btn-upvote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 34px;
  padding: 4px 2px;
  font-family: 'Bebas Neue', sans-serif;
  color: #a89878;
  transition: color 0.15s, transform 0.15s;
}

.btn-upvote:hover {
  color: #c0392b;
  transform: translateY(-2px);
}

.btn-upvote:active {
  transform: translateY(0) scale(0.9);
}

.btn-upvote:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-upvote .upvote-seta {
  font-size: 16px;
  line-height: 1;
}

.btn-upvote .upvote-total {
  font-size: 13px;
  min-width: 18px;
}

.btn-upvote.votado {
  color: #c0392b;
}

@keyframes upvotePulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.btn-upvote.votado .upvote-seta {
  animation: upvotePulso 0.3s ease;
}

.filme-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: #c0392b;
  min-width: 45px;
  line-height: 1;
}

.filme-info {
  display: flex;
  flex-direction: column;
}

.filme-nome {
  font-family: 'Special Elite', serif;
  font-size: 17px;
  color: #1a1a1a;
  font-weight: bold;
}

.filme-dir {
  font-family: 'Special Elite', serif;
  font-size: 13px;
  color: #7a6a50;
  font-style: italic;
  margin-top: 1px;
}

.vazio {
  text-align: center;
  color: #b0a090;
  font-style: italic;
  padding: 40px 0;
  font-size: 16px;
  letter-spacing: 1px;
}

/* ── NOTAS FILMICAS ── */
.notas-filmicas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.nota {
  position: absolute;
  font-size: 24px;
  opacity: 0.06;
  animation: flutuar 8s infinite ease-in-out;
}

@keyframes flutuar {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(10deg);
  }
}

/* ── RODAPÉ ── */
.rodape-filmes {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: #b0a090;
  letter-spacing: 2px;
  border-top: 1px solid #c4a96b;
}

.carimbo {
  display: inline-block;
  border: 3px solid #c0392b;
  color: #c0392b;
  padding: 4px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  transform: rotate(-3deg);
  opacity: 0.6;
  margin-top: 10px;
}

/* ══════════════════════════════
   MODAL
   ══════════════════════════════ */
.modal-filme {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.modal-filme.ativo {
  display: flex;
}

.modal-conteudo {
  background: #f2e8d5;
  border-radius: 12px;
  padding: 40px;
  max-width: 660px;
  width: 90%;
  position: relative;
  animation: slideUp 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border: 3px solid #c0392b;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #c0392b;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.modal-fechar:hover {
  background: #922b21;
  transform: scale(1.1);
}

.modal-fechar:active {
  transform: scale(0.95);
}

.modal-titulo {
  text-align: center;
  margin-bottom: 24px;
}

.modal-titulo h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  color: #1a1a1a;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.modal-titulo p {
  font-size: 16px;
  color: #7a6a50;
  font-style: italic;
}

.modal-trailer {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #c0392b;
  background: #000;
}

.modal-trailer video {
  display: block;
  width: 100%;
  max-height: 360px;
  background: #000;
}

.modal-trailer iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.modal-trailer iframe[hidden],
.modal-trailer video[hidden] { display: none; }

.modal-descricao {
  background: rgba(192, 57, 43, 0.08);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #c0392b;
}

.modal-descricao h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: #1a1a1a;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.modal-descricao p {
  font-size: 15px;
  color: #3e3e3e;
  line-height: 1.7;
}

/* ══════════════════════════════
   DESKTOP: esconde stickers mobile
   ══════════════════════════════ */
.stickers-mobile {
  display: none;
}

/* ══════════════════════════════
   NOTEBOOK / TELAS MÉDIAS (601px – 1500px)
   As decorações usavam tamanho em vw quase igual ao do
   Full HD, mas nessas larguras a margem lateral do mural
   é bem menor — por isso invadiam o texto do TOP 5.
   Aqui elas ficam menores e coladas na borda.
   ══════════════════════════════ */
@media (min-width: 601px) and (max-width: 1200px) {
  /* Centraliza o bloco TOP 5 de verdade nessa faixa
     (antes o flex:1 + padding-left jogava a caixa pra
     esquerda, deixando tudo torto e colado nas decorações) */
  .top5-wrapper {
    justify-content: center;
  }

  .top5-lista {
    flex: none;
    width: 100%;
    max-width: 520px;
    padding-left: 0;
  }

  .img-chaplin {
    top: 4%;
    left: auto;
    right: 1%;
    width: clamp(50px, 6vw, 85px);
    opacity: 0.75;
  }

  .img-relogio {
    top: 4%;
    left: 1%;
    bottom: auto;
    width: clamp(70px, 9vw, 120px);
    opacity: 0.7;
  }

  .img-godfather {
    top: 6%;
    right: 1%;
    width: clamp(65px, 7vw, 100px);
    opacity: 0.8;
  }

  .img-escalada {
    bottom: 6%;
    left: -4%;
    width: clamp(120px, 14vw, 210px);
    opacity: 0.7;
  }

  .img-bond {
    display: none;
  }

  .img-camera {
    top: 32%;
    right: 0.5%;
    width: clamp(45px, 5vw, 75px);
    opacity: 0.75;
  }

  .img-tv {
    top: 48%;
    right: 2%;
    width: clamp(45px, 5vw, 70px);
    opacity: 0.7;
  }

  .img-oculos {
    bottom: 8%;
    left: 3%;
    width: clamp(45px, 5vw, 70px);
    opacity: 0.7;
  }

  .img-fight {
    bottom: 2%;
    right: 1%;
    width: clamp(45px, 5vw, 70px);
    opacity: 0.75;
  }

}

/* ══════════════════════════════
   TABLET ESTREITO / JANELA PEQUENA (601px – 900px)
   Faixa onde ainda menos espaço sobra — reduz mais
   as decorações para não brigar com o conteúdo.
   ══════════════════════════════ */
@media (min-width: 601px) and (max-width: 900px) {
  .img-chaplin,
  .img-godfather,
  .img-camera,
  .img-tv,
  .img-oculos,
  .img-fight {
    width: 46px;
  }

  .img-relogio {
    width: 70px;
  }

  .img-escalada {
    width: 130px;
  }

  .top5-lista {
    max-width: 460px;
  }
}

/* ══════════════════════════════
   MOBILE (≤ 600px)
   ══════════════════════════════ */
@media (max-width: 600px) {

  .page-titulo h1 {
    font-size: clamp(44px, 16vw, 72px);
    letter-spacing: 4px;
  }

  .deco-desktop {
    display: none !important;
  }

  .mural-filmes {
    padding: 10px 0 60px;
    overflow: visible;
  }

  /* container mobile */
  .stickers-mobile {
    display: block;
    position: relative;
    height: 0;
    overflow: visible;
    z-index: 4;
    pointer-events: none;
  }

  .stickers-mobile .lado-esq,
  .stickers-mobile .lado-dir {
    position: static;
    width: auto;
    display: block;
  }

  /* todas as imagens mobile: posição absoluta livre */
  .stickers-mobile img {
    position: absolute !important;
    margin: 0 !important;
  }

  /* RELÓGIO: abaixo da escalada no mobile */
  .img-escalada {
    top: 20px !important;
    /* era -180px */
    left: -130px !important;
    /* era -130px */
    width: 340px !important;
    transform: rotate(90deg) !important;
    z-index: 2 !important;
  }

  .img-relogio {
    top: -300px !important;
    /* era bottom: -80px */
    left: -80px !important;
    bottom: auto !important;
    width: 230px !important;
    transform: none !important;
    z-index: 3 !important;
  }


  /* CHAPLIN: topo direito */
  .img-chaplin {
    top: -170px !important;
    right: -10px !important;
    left: auto !important;
    width: 110px !important;
    transform: rotate(-4deg) !important;
    z-index: 4 !important;
  }

  /* PADRINHO: direita, abaixo do Chaplin */
  .img-godfather {
    top: 30px !important;
    right: 40px !important;
    left: auto !important;
    width: 70px !important;
    z-index: 4 !important;
  }

  /* CÂMERA: direita, ao lado do Padrinho */
  .img-camera {
    top: 20px !important;
    right: -15px !important;
    left: auto !important;
    width: 90px !important;
    transform: rotate(5deg) !important;
    z-index: 4 !important;
  }

  /* TV: direita, meio da página */
  .img-tv {
    top: 280px !important;
    right: -20px !important;
    left: auto !important;
    width: 130px !important;
    z-index: 4 !important;
  }

  /* ÓCULOS: movido para cima no mobile */
  .img-oculos {
    top: 460px !important;
    left: -10px !important;
    right: auto !important;
    width: 95px !important;
    transform: rotate(-4deg) !important;
    z-index: 4 !important;
  }

  /* FIGHT CLUB: movido para cima no mobile */
  .img-fight {
    top: 440px !important;
    right: -10px !important;
    left: auto !important;
    width: 90px !important;
    z-index: 4 !important;
  }

  /* BOND: oculto no mobile */
  .img-bond {
    display: none !important;
  }

  .top5-wrapper {
    flex-direction: column;
    gap: 16px;
    padding: 0 80px;
  }

  .top5-lista {
    padding-left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .nav-mes {
    gap: 8px;
    margin-bottom: 16px;
  }

  .seta-mes {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .top5-titulo {
    font-size: 32px;
  }

  .top5-titulo .mes-label {
    font-size: 15px;
  }

  .filme-num {
    font-size: 26px;
    min-width: 36px;
  }

  .filme-nome {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .filme-dir {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modal-conteudo {
    padding: 30px 20px;
  }

  .modal-titulo h2 {
    font-size: clamp(20px, 6vw, 32px);
  }

  .modal-descricao p {
    font-size: 13px;
  }

  .modal-trailer video {
    max-height: 220px;
  }
}

/* Editor com linguagem de cartaz e sala de cinema. */
.btn-gerenciar-top { color: #922b21; border-width: 2px; box-shadow: 3px 3px 0 #c4a96b; }
.btn-gerenciar-top:hover { background: #1a1a1a; color: #f2e8d5; }
.editor-top__caixa { border: 4px double #1a1a1a; border-left: 8px solid #c0392b; }
.editor-top__caixa::before {
  content: "FILME · FILME · FILME";
  display: block;
  margin: -16px 44px 18px 0;
  padding: 5px 8px;
  background: #1a1a1a;
  color: #f2e8d5;
  font: 11px 'Special Elite', serif;
  letter-spacing: .2em;
  text-align: center;
}
/* =============================================
   SISTEMA DE VOTOS — estilo Reddit
   ============================================= */
.voto-coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 28px;
  flex-shrink: 0;
}

.voto-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #b0a090;
  padding: 3px;
  transition: color 0.15s, transform 0.15s;
}

.voto-btn:hover {
  color: #c0392b;
  transform: scale(1.2);
}

.voto-btn.voto-up.ativo {
  color: #c0392b;
}

.voto-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: #4a3f2c;
  min-width: 18px;
  text-align: center;
}

@media (max-width: 600px) {
  .filme-item {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .filme-num {
    order: 1;
    flex-shrink: 0;
  }
  .filme-info {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .voto-coluna {
    order: 3;
    flex-direction: row;
    flex-basis: auto;
    min-width: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: 4px;
    gap: 6px;
  }
  .voto-btn { font-size: 18px; padding: 5px; }
  .voto-btn:active { transform: scale(0.9); }
  .voto-score { font-size: 15px; }
}