/* ============================================================================
   hall-da-fama.css — página do Hall da Fama e Rankings Semanais.
   Mesma paleta "Dark Space" do dashboard.css e do pacotes.css: as três páginas
   têm que parecer o mesmo produto. Escopado em #hof-page.
   ============================================================================ */
#hof-page{
  --bg:#0a0612; --bg2:#130a22; --panel:#171025; --panel2:#1d1330;
  --line:rgba(157,78,221,.25); --line2:rgba(199,125,255,.45);
  --text:#ece6f7; --muted:#a89cc4; --muted2:#8577a3;
  --gold:#f0b429; --silver:#c8d2e0; --bronze:#cd7f32;
  --green:#4ade80; --purple:#a855f7; --purple2:#c084fc; --ruby:#f0637a;
  font:14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--text); background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
}
#hof-page *{ box-sizing:border-box; }
#hof-page a{ color:inherit; text-decoration:none; }
#hof-page ::-webkit-scrollbar{ width:9px; height:9px; }
#hof-page ::-webkit-scrollbar-thumb{ background:#3a2a54; border-radius:9px; }

/* brilho ambiente, igual às outras páginas */
#hof-page::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 14% -6%, rgba(157,78,221,.22), transparent 60%),
    radial-gradient(900px 560px at 88% 8%, rgba(123,44,191,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(240,180,41,.10), transparent 60%); }

#hof-page .shell{ position:relative; z-index:1; display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; }

/* ===== sidebar ===== */
#hof-page .side{ background:var(--bg2); border-right:1px solid var(--line); padding:18px 14px; }
#hof-page .logo img{ width:100%; max-width:200px; height:auto; display:block; margin:0 auto 22px; }
#hof-page .nav{ display:flex; flex-direction:column; gap:3px; }
#hof-page .nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  color:var(--muted); font-weight:600; font-size:13.5px; }
#hof-page .nav a:hover{ background:rgba(157,78,221,.12); color:var(--text); }
#hof-page .nav a.on{ background:rgba(157,78,221,.20); color:var(--text); box-shadow:inset 0 0 0 1px var(--line2); }
#hof-page .nav svg{ width:18px; height:18px; flex:none; }

/* ===== main ===== */
#hof-page .main{ padding:26px 30px 60px; max-width:1180px; }

#hof-page .hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
#hof-page .hero h1{ margin:0 0 6px; font-size:31px; letter-spacing:-.4px;
  background:linear-gradient(92deg,var(--gold),#fff3c4 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#hof-page .hero p{ margin:0; color:var(--muted); font-size:14px; max-width:620px; }

/* faixa da season */
#hof-page .season{ display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(240,180,41,.10),rgba(157,78,221,.10));
  border:1px solid var(--line2); border-radius:14px; padding:14px 20px; margin-bottom:22px; }
#hof-page .season .blk{ display:flex; flex-direction:column; gap:2px; }
#hof-page .season .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted2); }
#hof-page .season .v{ font-size:19px; font-weight:800; }
#hof-page .season .v.gold{ color:var(--gold); }
#hof-page .season .bar{ flex:1; min-width:180px; height:8px; border-radius:8px; background:rgba(255,255,255,.07); overflow:hidden; }
#hof-page .season .bar i{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--purple),var(--gold)); }

/* ===== abas ===== */
#hof-page .tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
#hof-page .tab{ padding:9px 15px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
  color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:7px; }
#hof-page .tab:hover{ border-color:var(--line2); color:var(--text); }
#hof-page .tab.on{ background:linear-gradient(120deg,rgba(157,78,221,.30),rgba(157,78,221,.14));
  border-color:var(--line2); color:#fff; }
#hof-page .tab.hof.on{ background:linear-gradient(120deg,rgba(240,180,41,.30),rgba(240,180,41,.10));
  border-color:rgba(240,180,41,.55); }

/* ===== painel de ranking ===== */
#hof-page .panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#hof-page .panel .head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 20px; border-bottom:1px solid var(--line); background:var(--panel2); flex-wrap:wrap; }
#hof-page .panel .head h2{ margin:0; font-size:17px; display:flex; align-items:center; gap:9px; }
#hof-page .panel .head .sub{ color:var(--muted); font-size:12.5px; }

/* tabela — rola sozinha em telas estreitas, o body nunca rola na horizontal */
#hof-page .tw{ overflow-x:auto; }
#hof-page table{ width:100%; border-collapse:collapse; min-width:640px; }
#hof-page th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted2); font-weight:700; padding:11px 20px; border-bottom:1px solid var(--line); }
#hof-page td{ padding:10px 20px; border-bottom:1px solid rgba(157,78,221,.10); font-size:14px; vertical-align:middle; }
#hof-page tr:last-child td{ border-bottom:none; }
#hof-page tbody tr:hover{ background:rgba(157,78,221,.07); }

#hof-page .pos{ width:56px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
#hof-page tr.p1 .pos,#hof-page tr.p2 .pos,#hof-page tr.p3 .pos{ font-size:19px; }
#hof-page tr.p1{ background:linear-gradient(90deg,rgba(240,180,41,.13),transparent 62%); }
#hof-page tr.p2{ background:linear-gradient(90deg,rgba(200,210,224,.10),transparent 62%); }
#hof-page tr.p3{ background:linear-gradient(90deg,rgba(205,127,50,.11),transparent 62%); }
#hof-page tr.p1 .nm{ color:var(--gold); font-weight:800; }
#hof-page tr.p2 .nm{ color:var(--silver); font-weight:700; }
#hof-page tr.p3 .nm{ color:var(--bronze); font-weight:700; }
/* faixa premiada: 4º e 5º ainda pontuam, e o corte precisa ser visível */
#hof-page tr.paid td{ box-shadow:inset 2px 0 0 rgba(240,180,41,.45); }
#hof-page tr.cut td{ border-bottom:2px dashed rgba(240,180,41,.35); }

#hof-page .who{ display:flex; align-items:center; gap:11px; }
#hof-page .av{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#2a1b45,#1b1130); border:1px solid var(--line2);
  font-size:11px; font-weight:800; color:var(--purple2); image-rendering:pixelated; }
#hof-page .nm{ font-weight:600; }
#hof-page .lv{ font-size:11px; color:var(--muted2); }

#hof-page .delta{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--green); }
#hof-page .delta.money{ color:var(--gold); }
#hof-page .pts{ font-weight:800; color:var(--purple2); font-variant-numeric:tabular-nums; }

#hof-page .prize{ display:flex; gap:5px; flex-wrap:wrap; }
#hof-page .chip{ font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(157,78,221,.16);
  border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
#hof-page .chip.gold{ background:rgba(240,180,41,.16); border-color:rgba(240,180,41,.40); color:#ffd97a; }
#hof-page .chip.cos{ background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.35); color:#8ef0b4; }
#hof-page .dash{ color:var(--muted2); }

/* ===== Hall da Fama (cards do Top 5 da season) ===== */
#hof-page .hofgrid{ display:grid; gap:14px; padding:20px; }
#hof-page .hofcard{ display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:13px; padding:16px 18px; }
#hof-page .hofcard.r1{ border-color:rgba(240,180,41,.55); background:linear-gradient(115deg,rgba(240,180,41,.13),var(--panel2) 55%); }
#hof-page .hofcard.r2{ border-color:rgba(200,210,224,.42); background:linear-gradient(115deg,rgba(200,210,224,.09),var(--panel2) 55%); }
#hof-page .hofcard.r3{ border-color:rgba(205,127,50,.45); background:linear-gradient(115deg,rgba(205,127,50,.10),var(--panel2) 55%); }
#hof-page .hofcard .medal{ text-align:center; }
#hof-page .hofcard .medal .em{ font-size:34px; line-height:1; }
#hof-page .hofcard .medal .p{ font-size:11px; color:var(--muted2); font-weight:700; margin-top:3px; }
#hof-page .hofcard h3{ margin:0 0 3px; font-size:19px; }
#hof-page .hofcard .title{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px;
  padding:2px 9px; border-radius:999px; margin-bottom:7px;
  background:rgba(240,180,41,.16); border:1px solid rgba(240,180,41,.45); color:#ffd97a; }
#hof-page .hofcard .brk{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
#hof-page .hofcard .score{ text-align:right; }
#hof-page .hofcard .score .n{ font-size:31px; font-weight:900; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
#hof-page .hofcard .score .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted2); }

#hof-page .note{ margin-top:16px; color:var(--muted2); font-size:12px; line-height:1.65; }
#hof-page .note b{ color:var(--muted); }

@media (max-width:900px){
  #hof-page .shell{ grid-template-columns:1fr; }
  #hof-page .side{ border-right:none; border-bottom:1px solid var(--line); }
  #hof-page .nav{ flex-direction:row; flex-wrap:wrap; }
  #hof-page .main{ padding:20px 16px 50px; }
  #hof-page .hofcard{ grid-template-columns:56px minmax(0,1fr); }
  #hof-page .hofcard .score{ grid-column:1/-1; text-align:left; }
}

/* ===== tooltip dos prêmios cosméticos =====
   Preso ao <body> por JS, não com ::after no próprio chip: a tabela usa
   overflow-x:auto, o que cria contexto de recorte e cortaria um balão
   posicionado dentro dela. */
#hof-page .chip[data-tip]{ cursor:help; border-style:dashed; }
/* left/top:0 não é decoração: sem uma âncora, um position:fixed com width:auto
   encolhe contra o espaço que sobra a partir da posição ESTÁTICA dele (fim do
   body), e o balão nascia com 99px de largura e 369 de altura — uma coluna. */
#hof-tip{ position:fixed; left:0; top:0; z-index:9999; width:max-content; max-width:290px; padding:9px 12px; border-radius:9px;
  background:#221537; border:1px solid rgba(199,125,255,.55); color:#ece6f7;
  font:12.5px/1.55 "Inter",system-ui,sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.55);
  pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; }
#hof-tip.on{ opacity:1; transform:translateY(0); }
#hof-tip b{ color:#ffd97a; }

/* ===== estado de PRÉ-ESTREIA (Season 0) ===== */
#hof-page .season.estreia{ background:linear-gradient(120deg,rgba(240,180,41,.14),rgba(157,78,221,.12));
  border-color:rgba(240,180,41,.45); }
#hof-page .season .selo{ margin-left:auto; font-size:12.5px; font-weight:800; padding:7px 14px;
  border-radius:999px; background:rgba(240,180,41,.18); border:1px solid rgba(240,180,41,.50); color:#ffd97a; }
/* display:block, NÃO flex: com flex cada trecho de texto vira um item próprio e o
   gap separa até a pontuação — o ponto final depois de <b>24/08</b> caía numa
   linha sozinha. Parágrafo é texto corrido, não layout. */
#hof-page .previa{ display:block; margin-bottom:18px; line-height:1.6;
  padding:11px 16px; border-radius:11px; font-size:13px; color:var(--muted);
  background:rgba(157,78,221,.10); border:1px dashed var(--line2); }
#hof-page .previa b{ color:var(--text); }

/* estado sem dados — semana sem pontuação ainda */
#hof-page .vazio{ padding:34px 20px; text-align:center; color:var(--muted2); font-size:13.5px; line-height:1.7; }