.rows-viewport {
     width: 100%;
     height: 40vh;
     position: absolute;
     display: flex;
     flex-direction: column;
     bottom: 0%;
     bottom: clamp(20px, 2.08vw, 40px);
     display: none;
     z-index: 99;
 }

 .rows-stack {
     overflow-x: auto;
     z-index: 1;
 }

 .rows-stack::-webkit-scrollbar {
     display: none;
 }

 .card-row-clip,
 .series-row-clip,
 .top10-row-clip,
 .top10-movies-row-clip,
 .animes-row-clip,
 .comedy-row-clip,
 .drama-row-clip,
 .terror-row-clip {
     position: relative;
     padding: 0 2.95%;
     z-index: 5;
 }







 #cardrow,
 #cardrow-series,
 #cardrow-top10,
 #cardrow-top10-movies,
 #cardrow-animes,
 #cardrow-comedy,
 #cardrow-drama,
 #cardrow-terror {
     scroll-behavior: smooth;
     display: flex !important;
     gap: 16px;
     will-change: transform;
     transition: transform .22s cubic-bezier(.4, 0, .2, 1);
 }

 .card-row-clip,
 .series-row-clip,
 .top10-row-clip,
 .top10-movies-row-clip,
 .animes-row-clip,
 .comedy-row-clip,
 .drama-row-clip,
 .terror-row-clip {
     /* Define uma altura máxima base ou use max-height para animar */
     max-height: 250px;
     opacity: 1;
     /*    overflow: hidden; */
     overflow-x: auto;
     transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
 }

 .card-row-clip::-webkit-scrollbar,
 .series-row-clip::-webkit-scrollbar,
 .top10-row-clip::-webkit-scrollbar,
 .top10-movies-row-::-webkit-scrollbar,
 .animes-row-clip::-webkit-scrollbar,
 .comedy-row-clip::-webkit-scrollbar,
 .drama-row-clip::-webkit-scrollbar,
 .terror-row-clip::-webkit-scrollbar {
     display: none;
 }


 /* Classe que vai colapsar a linha suavemente */
 .row-collapsed {
     max-height: 0px !important;
     opacity: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     margin: 0 !important;
     pointer-events: none;
 }

 .rowLabel {
     color: #dddddd;
     padding-left: 10px;
     padding-bottom: 7px;
     font-weight: 600;
     letter-spacing: 0.6px;
     font-size: clamp(10px, 1.35vw, 14px);
 }

 .overlay-rowlist {
     position: absolute;
     bottom: 0;
     height: 110px;
     width: 100%;
     pointer-events: none;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.850) 4%, transparent 100%);
     z-index: 5;
 }


 /* 1. Remove QUALQUER outline/border nativo do container principal do Top 10 */
 .top10-card,
 .top10-card:focus,
 .top10-card:focus-visible,
 .top10-card:focus-within,
 .top10-card.focused {
     outline: none !important;
     border: none !important;
     box-shadow: none !important;
 }

 /* Container do Card Top 10 */
 .top10-card {
     position: relative;
     display: flex;
     flex-shrink: 0;
     flex-direction: row;
 }

 .top10-card {
     padding-left: 20px;
 }

 .top10-card[data-i="0"] {
     margin-left: -20px !important;
 }

 /* O Número Gigante Estilo Netflix (vazado com stroke) */
 .top10-number {
     position: absolute;
     top: clamp(18px, 1.82vw, 35px);
     font-size: clamp(64px, 6.25vw, 120px);
     font-weight: 900;
     line-height: 0.8;
     font-family: 'Impact', 'Trebuchet MS', 'Arial Black', sans-serif;
     color: #000;
     -webkit-text-stroke: 1px #595959;
     text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.9);
     z-index: 1;
     pointer-events: none;
     user-select: none;
 }

 /* O Poster (deslocado para a direita para dar espaço ao número) */
 .top10-card .card {
     position: relative;
     margin-left: clamp(20px, 2.08vw, 40px) !important;
     z-index: 10 !important;
     border-radius: 6px;
     transition: transform 0.2s ease;
 }

 /* Efeito ao FOCAR no card com o controle remoto */
 .top10-card.focused .card {
     outline: solid 2px;
     outline-offset: 1px;
 }

 .top10-card.focused .top10-number {
     -webkit-text-stroke: 1px #ffffff;
     color: #149dff;
 }

 .top10-icon {
     background-color: #149dff;
     position: absolute;
     top: 0;
     right: 0;
     border-radius: 0px 6px 0px 5px;
     width: 35px;
     height: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .top10-icon span {
     color: #ffffff;
     font-weight: 900;
     font-size: 0.7em;
 }






















 @media only screen and (max-width: 780px) {

     .rows-viewport {
         width: 100%;
         height: 50%;
         position: absolute;
         display: flex;
         flex-direction: column;
         bottom: 0;
         display: none;
         padding-bottom: 10px;
     }


     .rowLabel {
         color: #dddddd;
         padding-left: 10px;
         padding-bottom: 7px;
         font-size: clamp(12px, 1.35vw, 14px);
     }
 }