/* RADIO SO FLASHBACK - ajuste TOP 10 Minimal 2026-11-09.
   CSS carregado APENAS por index-minimal.php.
   Nao altera o Neon, audio, propagandas, ranking API nem scroller. */
@media (min-width:901px) {
  body.sf-minimal {
    /* Mais espaco para nome, artista e contagem sem tirar o destaque do album. */
    --minimal-right:clamp(252px,17.8vw,315px);
  }
  body.sf-minimal .sf-minimal-ranking {
    box-sizing:border-box;
    /* Mesmo eixo vertical da logo, abaixo do scroller fixo de 35px.
       Nao deslocar o grid, o vinil, nem o footer. */
    padding:calc(clamp(44px,6vh,60px) + 10px) clamp(9px,.95vw,15px) 7px !important;
    overflow:hidden;
    background:linear-gradient(270deg,rgba(3,8,23,.88),rgba(3,8,22,.36)) !important;
    border-left:1px solid rgba(111,159,229,.16) !important;
  }
  body.sf-minimal .sf-minimal-ranking-head {
    justify-content:center;
    margin:0 0 clamp(8px,1vh,11px);
    gap:7px;
  }
  body.sf-minimal .sf-minimal-ranking-head>span {font-size:24px;line-height:1;}
  body.sf-minimal .sf-minimal-ranking-head h2 {
    font-size:clamp(24px,2vw,31px);
    line-height:1;
  }
  body.sf-minimal .sf-minimal-ranking-head small {
    font-size:10px;letter-spacing:.5px;
  }
  body.sf-minimal .sf-minimal-rank-tabs {
    gap:7px;
    margin:0 0 clamp(7px,.85vh,10px);
  }
  body.sf-minimal .sf-minimal-rank-tabs button {
    height:30px;
    font-size:10px;
    transition:background-color .15s,filter .15s;
  }
  body.sf-minimal .sf-minimal-rank-tabs button:focus-visible {
    outline:2px solid #5bddff;outline-offset:1px;
  }
  body.sf-minimal .sf-minimal-rank-items {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#49638b transparent;
  }
  body.sf-minimal .sf-minimal-rank-row {
    box-sizing:border-box;
    flex:1 0 41px;
    min-width:0;
    min-height:41px;
    display:grid;
    grid-template-columns:20px 33px minmax(0,1fr) minmax(29px,max-content);
    align-items:center;
    column-gap:6px;
    padding:3px 1px;
    border-bottom:1px solid rgba(164,187,248,.14);
  }
  body.sf-minimal .sf-minimal-rank-row:hover {
    background:rgba(94,123,210,.10);
  }
  body.sf-minimal .sf-minimal-rank-position {font-size:15px;}
  body.sf-minimal .sf-minimal-rank-cover {width:33px;height:33px;border-radius:6px;}
  body.sf-minimal .sf-minimal-rank-name {min-width:0;gap:2px;}
  body.sf-minimal .sf-minimal-rank-name b {
    font-size:clamp(10.4px,.75vw,12px);
    line-height:1.15;
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow-wrap:anywhere;
  }
  body.sf-minimal .sf-minimal-rank-name small {
    font-size:10px;
    line-height:1.15;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  body.sf-minimal .sf-minimal-rank-count {font-size:10.5px;letter-spacing:-.15px;}
  body.sf-minimal .sf-minimal-rank-foot {
    padding-top:5px;
    font-size:9px;
    line-height:1.1;
  }
}
/* Quando o monitor e mais baixo, nao esconder as ultimas posicoes. */
@media (min-width:901px) and (max-height:750px) {
  /* Tambem alinhar com a logo quando a janela tem pouca altura. */
  body.sf-minimal .sf-minimal-ranking {padding-top:calc(clamp(44px,6vh,60px) + 7px) !important;padding-bottom:4px !important;}
  body.sf-minimal .sf-minimal-ranking-head {margin-bottom:5px;}
  body.sf-minimal .sf-minimal-rank-tabs {margin-bottom:5px;}
  body.sf-minimal .sf-minimal-rank-tabs button {height:27px;}
  body.sf-minimal .sf-minimal-rank-row {flex-basis:33px;min-height:33px;padding:2px 1px;}
  body.sf-minimal .sf-minimal-rank-cover {width:30px;height:30px;}
  body.sf-minimal .sf-minimal-rank-row {grid-template-columns:19px 30px minmax(0,1fr) minmax(29px,max-content);}
  body.sf-minimal .sf-minimal-rank-foot {padding-top:3px;}
}
/* O celular continua usando o botao TOP 10 ja existente; a lateral nao aparece. */
@media (max-width:900px) {
  body.sf-minimal .sf-minimal-ranking {display:none !important;}
}