:root {
  --fundo: #110e0c;
  --painel: #1b1714;
  --painel-2: #241f1b;
  --linha: #332c26;
  --texto: #f3ece4;
  --suave: #a8998b;
  --ouro: #f2b544;
  --ouro-escuro: #c98d1f;
  --vermelho: #e0525e;
  --raio: 14px;
  --titulo: 'Bricolage Grotesque', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 Inter, system-ui, sans-serif;
  padding-bottom: 96px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
h1, h2 { font-family: var(--titulo); line-height: 1.1; margin: 0 0 6px; }
h1 { font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 20px; font-weight: 700; }
.sub { color: var(--suave); font-size: 13px; }
q { display: block; color: var(--texto); opacity: .85; font-style: italic; margin-top: 4px; }
q::before, q::after { content: '"'; }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: rgba(17, 14, 12, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.marca { font-family: var(--titulo); font-weight: 800; font-size: 20px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.topo-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.btn-voltar {
  flex: none; background: var(--ouro); color: #1a1410; border: 0; border-radius: 99px;
  padding: 7px 14px 7px 10px; font-weight: 700; font-size: 14px;
}
.btn-voltar:hover { background: #f7c464; }
@media (max-width: 480px) { .topo.com-voltar .marca-texto { display: none; } }
.btn-eu {
  display: flex; align-items: center; gap: 8px;
  background: var(--painel-2); border: 1px solid var(--linha); border-radius: 99px;
  padding: 6px 14px 6px 8px; font-size: 14px; font-weight: 600;
}
.btn-eu:not(:has(.avatar)) { padding: 6px 16px; }

main { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.carregando, .vazio-msg { color: var(--suave); padding: 18px; text-align: center; background: var(--painel); border: 1px dashed var(--linha); border-radius: var(--raio); }
.vazio-msg.grande { margin-top: 40px; }
.vazio-msg a { color: var(--ouro); }
.carregando { margin-top: 40px; border: 0; }

.bloco { margin-top: 28px; }
.bloco.destaque { background: var(--painel); border: 1px solid var(--linha); border-radius: 20px; padding: 20px 16px; }
.bloco.destaque > .sub { margin: 0 0 16px; }
.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.titulo-linha h2 { margin: 0; }
.contador { font-size: 13px; color: var(--suave); background: var(--painel-2); padding: 2px 8px; border-radius: 99px; vertical-align: middle; font-family: Inter, sans-serif; font-weight: 500; }

/* avatar */
.avatar {
  --c: #888;
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); color: #1a1410;
  font-family: var(--titulo); font-weight: 800; font-size: 16px;
}
.avatar.p { width: 22px; height: 22px; font-size: 11px; vertical-align: middle; }
.avatar.g { width: 64px; height: 64px; font-size: 30px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chip:hover { color: var(--ouro); }
.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

/* estrelas: camada dourada recortada por --p */
.estrelas {
  --p: 0%;
  display: inline-block; position: relative; letter-spacing: 1px; line-height: 1;
  color: var(--linha); font-size: 14px; white-space: nowrap; vertical-align: -1px;
}
.estrelas::before {
  content: '★★★★★'; position: absolute; inset: 0; width: var(--p); overflow: hidden; color: var(--ouro);
}
.estrelas.grande { font-size: 38px; letter-spacing: 4px; }

/* posters */
.poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; background: var(--painel-2); }
.poster.sem { display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12px; color: var(--suave); }
.poster.mini { border-radius: 6px; }
.poster.vazio { border: 1px dashed var(--linha); background: transparent; }
.poster.xs { width: 46px; flex: none; border-radius: 6px; }
.poster.grande { width: 140px; flex: none; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }

.rank-num { font-family: var(--titulo); font-weight: 800; font-size: 28px; color: var(--ouro); text-align: center; }
.indicou { font-size: 13px; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.indicou .chip { color: var(--texto); }

/* ---------- palco do Top 5 do grupo ---------- */
.palco {
  --cortina: clamp(16px, 5vw, 60px);
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 -16px; padding: 46px calc(var(--cortina) + 4px) 22px;
  background: #0b0807;
  border-bottom: 1px solid rgba(242, 181, 68, .25);
}
@media (min-width: 1012px) { .palco { margin: 16px 0 0; border-radius: 24px; border: 1px solid rgba(242, 181, 68, .25); } }
/* fundo: cena do 1º lugar, escurecida */
.palco::before {
  content: ''; position: absolute; inset: -20px; z-index: -3;
  background: var(--capa, none) center 30%/cover;
  filter: blur(3px) brightness(.34) saturate(1.25);
}
.palco::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(242, 181, 68, .16), transparent 70%),
    linear-gradient(180deg, rgba(11, 8, 7, .3), rgba(11, 8, 7, .1) 40%, rgba(11, 8, 7, .85) 100%);
}

/* cortinas de veludo */
.cortina {
  position: absolute; top: 0; bottom: 0; width: var(--cortina); z-index: 3;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%, rgba(0, 0, 0, .55)) 0 0/calc(var(--cortina) / 2.2) 100%,
    linear-gradient(180deg, #8e1626, #5a0a15);
  box-shadow: 0 0 24px rgba(0, 0, 0, .7);
}
.cortina.esq { left: 0; border-bottom-right-radius: 70% 22%; }
.cortina.dir { right: 0; border-bottom-left-radius: 70% 22%; }
.bambinela {
  position: absolute; top: 0; left: 0; right: 0; height: 20px; z-index: 4;
  background: linear-gradient(180deg, #a51c2e, #6b0d1a);
  border-bottom: 3px solid #d9a441;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
.bambinela::after { /* franjas arredondadas */
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 11px; margin-top: 3px;
  background: radial-gradient(circle at 50% 0, #7d1120 8px, #d9a441 8.5px 9.5px, transparent 10px) 0 0/22px 11px repeat-x;
}

/* holofotes */
.feixe {
  position: absolute; top: -6%; width: 46%; height: 112%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 228, 160, .3), rgba(255, 228, 160, .05) 75%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; mix-blend-mode: screen; pointer-events: none;
}
.feixe.f1 { left: 4%; transform: rotate(-24deg); }
.feixe.f2 { right: 4%; transform: rotate(24deg); }

/* faíscas douradas subindo */
.faiscas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.faiscas i {
  position: absolute; bottom: 18%; left: var(--x); width: 3px; height: 3px; border-radius: 50%;
  background: #ffd98a; box-shadow: 0 0 6px 1px rgba(255, 200, 90, .8); opacity: 0;
}

/* letreiro de cinema */
.letreiro { position: relative; z-index: 2; text-align: center; margin: 4px auto 18px; max-width: 560px; }
.letreiro h1 {
  margin: 0; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(30px, 9vw, 52px); font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #fff3c4 10%, #f2b544 55%, #b97f17 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(242, 181, 68, .35));
}
.letreiro-sobre {
  display: inline-block; margin: 8px 0 4px; padding: 2px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #1a1410; background: var(--ouro);
}
.lampadas { display: flex; justify-content: space-between; padding: 0 6px; }
.lampadas i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffe7a8; box-shadow: 0 0 6px 2px rgba(255, 210, 110, .7);
}

/* pódio grande do grupo */
.podio.grupo {
  --h1: clamp(104px, 25vw, 170px);
  grid-template-columns: 1fr 1.14fr 1.45fr 1.14fr 1fr;
  padding: 26px 0 0; z-index: 1;
  max-width: 600px; margin: 0 auto;
}
.podio.grupo::before { display: none; }
.podio.grupo .p1 .podio-capa a {
  display: block; position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: 0 0 0 2px #f2b544, 0 0 40px rgba(242, 181, 68, .55), 0 16px 32px rgba(0, 0, 0, .7);
}
.podio.grupo .p1 .podio-capa .poster { box-shadow: none; border-radius: 0; }
.podio.grupo .p1 .podio-capa a::after { /* reflexo que passa pelo pôster */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%);
  transform: translateX(-120%);
}
.podio.grupo .coroa { width: 50%; }
.podio-info { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 10px; text-align: center; min-width: 0; }
.podio-nome {
  font-size: clamp(11px, 2.9vw, 14px); font-weight: 600; line-height: 1.2;
  hyphens: auto; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.podio-media { font: 800 clamp(14px, 3.8vw, 18px)/1.2 var(--titulo); color: var(--ouro); margin-top: 2px; }
.podio-votos { font-size: 11px; color: var(--suave); }
.podio-ind {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 6px 2px 2px; border-radius: 99px; background: rgba(255, 255, 255, .07);
}
.podio-ind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-ind .avatar.p { width: 16px; height: 16px; font-size: 9px; }
.p1 .podio-nome { color: #ffe29a; font-size: clamp(12px, 3.2vw, 16px); }
.p1 .podio-media { font-size: clamp(18px, 5vw, 26px); text-shadow: 0 0 14px rgba(242, 181, 68, .5); }
.podio.grupo .p4 .podio-ind span, .podio.grupo .p5 .podio-ind span { max-width: 6ch; }

.podio.grupo .poster.vazio { border-color: rgba(242, 181, 68, .45); background: rgba(0, 0, 0, .35); color: rgba(242, 181, 68, .55); }
.palco-cta { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 16px; }
.palco-cta .btn { padding: 11px 22px; border-radius: 99px; font-size: 15px; box-shadow: 0 6px 22px rgba(242, 181, 68, .3); }
.palco-cta .btn.zap { box-shadow: 0 6px 22px rgba(31, 168, 85, .3); }

/* ---------- ranking completo ---------- */
.rank-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rank-linha {
  display: grid; grid-template-columns: auto 58px 1fr auto; gap: 12px; align-items: center;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px 10px 10px;
}
.rank-linha:not(:has(.rank-pos)) { grid-template-columns: 58px 1fr auto; }
.rank-linha.no-palco { border-color: rgba(242, 181, 68, .45); background: linear-gradient(90deg, rgba(242, 181, 68, .1), var(--painel) 60%); }
.rank-pos { font: 800 22px/1 var(--titulo); color: var(--suave); width: 2.4ch; text-align: center; }
.no-palco .rank-pos { color: var(--ouro); }
.rank-linha:nth-child(1).no-palco .rank-pos { font-size: 28px; }
.rank-capa .poster { border-radius: 6px; }
.rank-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rank-titulo { font-weight: 700; font-size: 15px; line-height: 1.25; }
.rank-titulo:hover { color: var(--ouro); }
.rank-corpo > .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rank-corpo .chip { font-size: 13px; color: var(--texto); }
.rank-notas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.nota-pessoa {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--painel-2); border-radius: 99px; padding: 2px 8px 2px 2px; font-size: 12px;
}
.nota-pessoa b { color: var(--ouro); }
.nota-pessoa:hover { background: var(--linha); }
.rank-media { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rank-media > b { font: 800 24px/1 var(--titulo); color: var(--ouro); }
.rank-media .estrelas { font-size: 11px; }
.rank-media .sub { font-size: 11px; white-space: nowrap; }
.faltam { font-size: 11px; font-weight: 600; color: #1a1410; background: var(--ouro); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
@media (max-width: 480px) {
  .rank-linha { grid-template-columns: auto 46px 1fr auto; gap: 10px; padding: 10px 10px 10px 8px; }
  .rank-linha:not(:has(.rank-pos)) { grid-template-columns: 46px 1fr auto; }
  .rank-pos { font-size: 18px; }
  .rank-titulo { font-size: 14px; }
  .rank-media > b { font-size: 20px; }
}

.palco-vazio { position: relative; z-index: 2; margin: 10px auto; max-width: 340px; text-align: center; color: #e8dccd; padding: 26px 16px; border: 1px dashed rgba(242, 181, 68, .4); border-radius: 14px; }
.palco-regra { position: relative; z-index: 2; margin: 20px 0 0; text-align: center; font-size: 12px; color: #c9b9a6; }
.quase { position: relative; z-index: 2; margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 13px; color: #c9b9a6; }
.quase a { color: var(--texto); text-decoration: underline; text-decoration-color: rgba(242, 181, 68, .5); }
.quase a .sub { color: #c9b9a6; }

@media (prefers-reduced-motion: no-preference) {
  .feixe.f1 { animation: feixe-esq 7s ease-in-out infinite alternate; }
  .feixe.f2 { animation: feixe-dir 8s ease-in-out infinite alternate; }
  .faiscas i { animation: faisca var(--t) linear var(--d) infinite; }
  .lampadas i { animation: lampada 1.2s steps(1) infinite; }
  .lampadas i:nth-child(even) { animation-delay: .6s; }
  .podio.grupo .p1 .podio-capa a { animation: brilho-lider 2.6s ease-in-out infinite alternate; }
  .podio.grupo .p1 .podio-capa a::after { animation: reflexo 5s ease-in-out 2s infinite; }
  /* entrada do palco: cortinas abrem, depois o pódio sobe */
  .palco.animar .cortina.esq { animation: abre-esq 1s cubic-bezier(.6, 0, .2, 1) both; }
  .palco.animar .cortina.dir { animation: abre-dir 1s cubic-bezier(.6, 0, .2, 1) both; }
  .palco.animar .letreiro { animation: aparece .6s ease .5s both; }
  .palco.animar .podio .degrau { transform-origin: bottom; animation: degrau-sobe .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(.7s + var(--i) * 160ms); }
  .palco.animar .podio .podio-capa { animation: capa-cai .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(1s + var(--i) * 160ms); }
  .palco.animar .podio .podio-info { animation: aparece .4s ease both; animation-delay: calc(1.15s + var(--i) * 160ms); }
  .palco.animar .coroa { animation: coroa-cai .7s cubic-bezier(.3, 1.4, .5, 1) 2s both; }
}
@keyframes feixe-esq { from { transform: rotate(-30deg); } to { transform: rotate(-8deg); } }
@keyframes feixe-dir { from { transform: rotate(30deg); } to { transform: rotate(6deg); } }
@keyframes faisca {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-260px) translateX(14px); }
}
@keyframes lampada { 50% { background: #8a6a2a; box-shadow: none; } }
@keyframes brilho-lider {
  from { box-shadow: 0 0 0 2px #f2b544, 0 0 26px rgba(242, 181, 68, .35), 0 16px 32px rgba(0, 0, 0, .7); }
  to { box-shadow: 0 0 0 2px #ffe29a, 0 0 54px rgba(242, 181, 68, .7), 0 16px 32px rgba(0, 0, 0, .7); }
}
@keyframes reflexo { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
@keyframes abre-esq { from { width: 52%; } }
@keyframes abre-dir { from { width: 52%; } }

/* top 5 de cada um */
.pessoas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pessoa-card { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; transition: border-color .15s; }
.pessoa-card:hover { border-color: var(--ouro-escuro); }
.pessoa-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pessoa-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pessoa-nome .sub { font-size: 12px; }
.pessoa-topo .chamada { margin-left: auto; white-space: nowrap; }
.pessoa-card:hover .chamada { color: var(--ouro); }
.pessoa-card.sem-top5 { background: transparent; border-style: dashed; }
.pessoa-card.sem-top5 .degrau { filter: saturate(.25) brightness(.7); }
.pessoa-card.sem-top5 .podio { --h1: 40px; padding-top: 2px; }
.pessoa-card.sem-top5 .podio::before, .pessoa-card.sem-top5 .podio-capa { display: none; }
.podio .p1 .poster.vazio { box-shadow: none; }

/* grade de filmes */
.select, .campo {
  background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto);
  border-radius: 10px; padding: 10px 12px; font: inherit; width: 100%;
}
.select { width: auto; padding: 7px 10px; font-size: 14px; }
.campo:focus, .select:focus { outline: 2px solid var(--ouro-escuro); outline-offset: 1px; }
.grade { display: grid; gap: 16px 12px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.grade-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grade-item strong { font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.grade-item .sub { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.grade-capa { position: relative; transition: transform .15s; }
.grade-item:hover .grade-capa { transform: translateY(-3px); }
.selo {
  position: absolute; top: 6px; right: 6px;
  background: rgba(17, 14, 12, .85); color: var(--ouro);
  font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 99px;
}

/* atividade */
.atividade { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.atividade li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.atividade li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.atividade li > div > a:not(.chip) { font-weight: 600; color: var(--ouro); }
.atividade q { flex-basis: 100%; }
.atividade .sub { white-space: nowrap; }

/* perfil */
.perfil { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.perfil h1 { margin: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--suave); font-size: 14px; }
.stats b { color: var(--texto); }

/* ---------- pódio do Top 5 ---------- */
.podio {
  --gap: clamp(4px, 1.6vw, 12px);
  --h1: clamp(92px, 21vw, 140px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1.12fr 1.32fr 1.12fr 1fr; gap: var(--gap);
  align-items: end;
  padding: 34px clamp(4px, 2vw, 24px) 0;
}
/* holofote em cima do 1º lugar */
.podio::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -20px; width: 70%; height: 92%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(255, 214, 130, .22), transparent 70%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.podio-slot { display: flex; flex-direction: column; min-width: 0; }
.podio-capa { position: relative; padding: 0 6%; margin-bottom: -2px; z-index: 1; }
.podio-capa a, .podio-capa > .poster { display: block; }
.podio-capa .poster {
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s;
}
.podio-capa a:hover .poster { transform: translateY(-4px) rotate(-1deg); }
.podio-capa .poster.vazio { display: grid; place-items: center; color: var(--linha); font: 800 26px var(--titulo); box-shadow: none; }

/* materiais dos degraus */
.degrau {
  --m1: #3a322b; --m2: #241e19; --borda: #4c423a; --num: rgba(255, 255, 255, .14);
  position: relative; display: grid; place-items: start center;
  padding-top: 6px;
  background: linear-gradient(180deg, var(--m1), var(--m2));
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 3px 0 var(--borda), inset 0 -14px 20px rgba(0, 0, 0, .28), 0 14px 16px -10px rgba(0, 0, 0, .7);
}
.degrau::after { /* reflexo diagonal no material */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 42%, transparent 54%);
}
.degrau-num {
  font: 800 clamp(22px, 6vw, 40px)/1 var(--titulo); color: var(--num);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 rgba(0, 0, 0, .25);
}
.p1 .degrau { --m1: #ffd36e; --m2: #c4851c; --borda: #fff0bd; --num: rgba(92, 54, 0, .5); height: var(--h1); }
.p2 .degrau { --m1: #e6e9ee; --m2: #8f97a3; --borda: #ffffff; --num: rgba(40, 46, 56, .45); height: calc(var(--h1) * .72); }
.p3 .degrau { --m1: #e7a26a; --m2: #94552a; --borda: #ffd2a8; --num: rgba(70, 30, 5, .5); height: calc(var(--h1) * .52); }
.p4 .degrau, .p5 .degrau { --m1: #4a4038; --m2: #2a231e; --borda: #6a5d52; --num: rgba(255, 255, 255, .32); }
.p4 .degrau { height: calc(var(--h1) * .4); }
.p5 .degrau { height: calc(var(--h1) * .3); }
.p4 .degrau-num, .p5 .degrau-num { font-size: clamp(16px, 4.4vw, 28px); }

/* 1º lugar: coroa + brilho */
.p1 .podio-capa { padding: 0; }
.p1 .podio-capa .poster { box-shadow: 0 0 0 2px #f2b544, 0 0 34px rgba(242, 181, 68, .45), 0 14px 28px rgba(0, 0, 0, .6); }
.coroa {
  position: absolute; z-index: 2; left: 50%; top: 0; width: 42%;
  transform: translate(-50%, -72%) rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}

.podio-titulo { display: flex; flex-direction: column; gap: 1px; padding: 8px 2px 0; text-align: center; min-height: 3.6em; }
.podio-titulo a { font-size: clamp(11px, 2.9vw, 14px); font-weight: 600; line-height: 1.2; overflow: hidden; hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.podio-titulo a:hover { color: var(--ouro); }
.podio-titulo .sub { font-size: 11px; }
.p1 .podio-titulo a { color: var(--ouro); }

.podio-acoes { justify-content: center; margin-top: 18px; }
.bloco.destaque:has(> .podio) { padding-inline: clamp(8px, 2.5vw, 24px); }
.bloco.destaque:has(> .podio) > h2 { padding-inline: 8px; }

/* versão mini (cards da home) */
.podio.mini { --h1: 54px; --gap: 4px; padding: 20px 4px 0; }
.podio.mini .degrau { padding-top: 3px; border-radius: 4px 4px 0 0; }
.podio.mini .degrau-num { font-size: 18px; }
.podio.mini .p4 .degrau-num, .podio.mini .p5 .degrau-num { font-size: 13px; }
.podio.mini .podio-capa .poster { border-radius: 5px; }
.podio.mini .p1 .podio-capa .poster { box-shadow: 0 0 0 1.5px #f2b544, 0 0 18px rgba(242, 181, 68, .35); }
.podio.mini .podio-capa .poster.vazio { font-size: 14px; }
.podio.mini::before { top: -10px; }

/* entrada: degraus sobem do 5º ao 1º, capas caem em seguida */
@media (prefers-reduced-motion: no-preference) {
  .podio.animar .degrau { transform-origin: bottom; animation: degrau-sobe .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 140ms); }
  .podio.animar .podio-capa { animation: capa-cai .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 140ms + 260ms); }
  .podio.animar .podio-titulo { animation: aparece .4s ease both; animation-delay: calc(var(--i) * 140ms + 420ms); }
  .podio.animar .coroa { animation: coroa-cai .6s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: 1.15s; }
}
@keyframes degrau-sobe { from { transform: scaleY(0); } }
@keyframes capa-cai { from { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes coroa-cai { from { opacity: 0; transform: translate(-50%, -180%) rotate(-30deg); } }
.lista-notas { list-style: none; padding: 0; margin: 0; }
.lista-notas li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); align-items: flex-start; }
.lista-notas li > div { flex: 1; min-width: 0; }
.nao-viram { margin-top: 10px; }

/* filme */
.filme-hero {
  margin: 0 -16px; padding: 28px 16px 20px;
  background: linear-gradient(180deg, rgba(17, 14, 12, .45), var(--fundo) 95%), var(--capa, none) center top/cover;
}
.filme-cab { display: flex; gap: 18px; align-items: flex-end; }
.filme-cab > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.filme-cab p { margin: 0; }
.media-grande { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.media-grande .estrelas { font-size: 20px; }
.media-grande b { font-family: var(--titulo); font-size: 22px; }
.medalha { color: var(--ouro); font-weight: 600; font-size: 14px; }
@media (max-width: 520px) {
  .filme-cab { flex-direction: column; align-items: flex-start; }
  .poster.grande { width: 120px; }
}
.trailer {
  width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--raio);
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--thumb) center/cover;
  display: grid; place-items: center;
}
.trailer span { background: var(--ouro); color: #1a1410; font-weight: 700; padding: 12px 22px; border-radius: 99px; font-size: 16px; }
.trailer-video { aspect-ratio: 16/9; border-radius: var(--raio); overflow: hidden; }
.trailer-video iframe { width: 100%; height: 100%; border: 0; }
.sinopse { margin: 0; color: #dcd2c7; max-width: 68ch; }

/* dar nota */
.nota-linha { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.estrelas-input { position: relative; display: inline-block; }
.toques { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); }
.toques button { background: none; border: 0; padding: 0; }
.nota-valor { font-family: var(--titulo); font-size: 28px; color: var(--ouro); min-width: 2ch; }
.acoes { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.acoes.coluna { flex-direction: column; align-items: stretch; }

/* botões */
.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  background: var(--painel-2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px 16px; font-weight: 600; font-size: 14px;
}
.btn.primario { background: var(--ouro); border-color: var(--ouro); color: #1a1410; }
.btn.primario:hover { background: #f7c464; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-texto { background: none; border: 0; padding: 4px 0; color: var(--suave); font-size: 14px; text-decoration: underline; }
.btn-texto.perigo { color: var(--vermelho); }
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--ouro); color: #1a1410; border: 0; border-radius: 99px;
  padding: 14px 22px; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .2);
}
.fab:hover { background: #f7c464; }

/* modal */
.modal {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
  background: var(--painel); color: var(--texto);
  border: 1px solid var(--linha); border-radius: 20px; padding: 22px 18px;
}
.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.modal h2 { padding-right: 32px; }
.fechar { position: absolute; top: 12px; right: 12px; background: var(--painel-2); border: 0; border-radius: 50%; width: 32px; height: 32px; }
.modal .sub { margin: 4px 0 12px; }
.escolha-nomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.escolha-nomes button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--painel-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px; font-weight: 600;
}
.escolha-nomes button:hover { border-color: var(--ouro-escuro); }
.pin-cab { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.pin-cab h2 { margin: 0; }
.pin-form { display: grid; gap: 14px; }
.pin-rotulo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--texto); }
.campo.pin { font-size: 26px; letter-spacing: 12px; text-align: center; font-family: var(--titulo); }
.resultados { display: grid; gap: 6px; margin-top: 10px; }
.resultado {
  display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--painel-2); border: 1px solid transparent; border-radius: 10px; padding: 6px;
}
.resultado:hover { border-color: var(--ouro-escuro); }
.resultado img, .resultado .sem-img { width: 46px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--painel); }
.resultado > span { display: flex; flex-direction: column; min-width: 0; }
.resultado .sub { margin: 0; }
.etiqueta { font-size: 12px; color: var(--ouro); }
.carregando-item { opacity: .5; }
.editor-top5 { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; }
.editor-top5 li { display: flex; align-items: center; gap: 10px; background: var(--painel-2); border-radius: 10px; padding: 6px 8px; min-height: 52px; }
.editor-top5 .rank-num { font-size: 20px; width: 22px; }
.editor-top5 strong { flex: 1; font-size: 14px; min-width: 0; }
.editor-top5 .slot-vazio { background: transparent; border: 1px dashed var(--linha); }
.mover { display: flex; gap: 4px; }
.mover button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel); font-size: 12px; }
.mover button:disabled { opacity: .3; }
.sugestoes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.sugestoes button { display: flex; flex-direction: column; gap: 4px; width: 70px; flex: none; background: none; border: 0; padding: 0; font-size: 11px; text-align: left; }
.sugestoes .poster.xs { width: 70px; }

.aviso {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100;
  background: var(--texto); color: var(--fundo); font-weight: 600; padding: 10px 18px; border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); max-width: calc(100vw - 32px); text-align: center;
}
.aviso.erro { background: var(--vermelho); color: #fff; }
.aviso-acao { display: inline-block; margin-left: 8px; background: #1fa855; color: #fff; padding: 4px 12px; border-radius: 99px; font-size: 14px; }

.btn.zap { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn.zap:hover { background: #22bd60; }
.titulo-linha .acoes, .filme-cab .acoes { margin-top: 0; }
.filme-cab .acoes { margin-top: 10px; }

.bloco.chamando { animation: chamando 1.6s ease-out 2; }
@keyframes chamando {
  0% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .55); }
  100% { box-shadow: 0 0 0 16px rgba(242, 181, 68, 0); }
}