/* Responsividade */
@media only screen and (max-width: 600px) {
    .desktop-only { display: none; }
}
@media only screen and (min-width: 601px) {
    .mobile-only { display: none; }
}

/* -------------------------------------------------------
   TEMA: DEEP SPACE
   Void    var(--cg-fundo)  fundo principal
   Space   var(--cg-nav)  nav / header
   Nebula  var(--cg-card)  cards primarios
   Surface var(--cg-card-2)  cards secundarios
   Hover   var(--cg-hover)  hover
   Border  var(--cg-linha)  bordas
   Accent  var(--cg-ciano)  ciano (mantido)
   Accent2 var(--cg-azul)  azul (mantido)
------------------------------------------------------- */

/* Star field: padrao repetitivo de estrelas cobrindo toda a pagina */
body {
    background-color: var(--cg-fundo) !important;
    background-image: var(--cg-estrelas) !important;
    background-size:
        350px 350px,
        220px 220px,
        180px 180px,
        500px 500px,
        120px 120px !important;
    background-position:
        30px 40px,
        100px 120px,
        60px 160px,
        20px 80px,
        170px 30px !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

/* Links globais */
a         { color: var(--cg-link); text-decoration: none; }
/* 22/09/2026 — A REGRA a:visited FOI REMOVIDA DE PROPOSITO.
   Ela pintava TODO link ja visitado com a cor de link, e como 'a:visited' tem mais peso
   que uma classe, ganhava de qualquer .minha-classe{color:...}. Sintoma: o selo da obra
   na noticia (um <a> com texto branco sobre pilula azul) ficava azul sobre azul depois
   que a pessoa clicava nele uma vez. Nao precisa da regra: 'a{color:...}' ja vale para
   link visitado tambem — a cor roxa do navegador so aparece quando o autor nao define
   nenhuma. */
a:hover   { color: var(--cg-ciano); }

/* Superficies de card */
.rankover       { background: var(--cg-card) !important; position: relative; overflow: hidden; }
.rankover:hover { background: var(--cg-hover) !important; cursor: pointer; }

/* Anel orbital decorativo ao hover */
.rankover::after {
    content: '';
    position: absolute;
    right: -25px; bottom: -25px;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(54, 207, 227, 0.12);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}
.rankover:hover::after { opacity: 1; }

/* Inputs */
.input {
    background: var(--cg-input-bg) !important;
    border: 1px solid var(--cg-input-linha) !important;
    padding: 10px;
    color: var(--cg-input-txt);
}
.input:focus { border-color: var(--cg-ciano) !important; outline: none; }

/* Botao gradiente */
.mouse3       { cursor: pointer; color: white; background: linear-gradient(to right, var(--cg-ciano), var(--cg-azul)) !important; }
.mouse3:hover { background: linear-gradient(to right, var(--cg-azul), var(--cg-ciano)) !important; }

/* Texto nav */
.mouse       { color: var(--cg-muted); }
.mouse:hover { color: var(--cg-ciano); }

/* Nav animada */
.background-container {
    background: var(--cg-nav-img) repeat-x;
    animation: deslizar 30s linear infinite;
}
.backopacity       { background-color: var(--cg-nav-veu) !important; transition: background-color 0.5s ease; }
.backopacity:hover { background-color: var(--cg-nav) !important; }

@keyframes deslizar {
    0%   { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Card de ranking */
.rank2 { background: var(--cg-card) !important; border-radius: 1em; padding: 15px; color: var(--cg-txt-2); border: none; }

/* -------------------------------------------------------
   GRID WEBTOON -- TOP 100 / TENDENCIAS / POPULARES / ESTREANDO
------------------------------------------------------- */
.top-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    width: 92%;
    margin: 0 auto;
    padding: 0 0 36px;
}
@media (max-width: 600px) {
    .top-grid { grid-template-columns: repeat(3, 1fr); width: 96%; gap: 8px; padding: 0 2% 24px; }
}
.top-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    background: var(--cg-card);
    border: 1px solid var(--cg-linha);
}
.top-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
/* Top 3 glow borders */
.top-card-gold   { border-color: rgba(245,200,66,0.8)  !important; box-shadow: 0 0 22px rgba(245,200,66,0.28); }
.top-card-silver { border-color: rgba(192,200,208,0.7) !important; box-shadow: 0 0 14px rgba(192,200,208,0.2); }
.top-card-bronze { border-color: rgba(205,127,74,0.7)  !important; box-shadow: 0 0 12px rgba(205,127,74,0.18); }
.top-card-gold:hover   { box-shadow: 0 6px 24px rgba(245,200,66,0.35); }
.top-card-silver:hover { box-shadow: 0 6px 18px rgba(192,200,208,0.28); }
.top-card-bronze:hover { box-shadow: 0 6px 16px rgba(205,127,74,0.26); }
/* Podium layout */
.podio-wrap {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: center;
    width: 88%;
    max-width: 640px;
    margin: 0 auto 20px;
}
.podio-slot { flex: 1; min-width: 0; }
.podio-slot-center { flex: 1.4; }
.podio-label {
    text-align: center;
    font-size: 8pt;
    color: var(--cg-dim);
    padding: 6px 0 0;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.podio-label.gold   { color: var(--cg-ouro); }
.podio-label.silver { color: #c0c8d0; }
.podio-label.bronze { color: #cd7f4a; }
@media (max-width: 600px) {
    .podio-wrap { gap: 8px; width: 96%; }
    .podio-label { font-size: 7pt; }
}
.top-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}
.top-cover {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: filter 0.25s;
}
.top-card:hover .top-cover { filter: brightness(70%); }
.top-overlay {
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 12px);
    padding: 5px 10px 6px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
.top-overlay .ov-ctg {
    display: block;
    color: #ffd43b;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
}
.top-overlay .ov-sub {
    display: block;
    color: #ccd6dd;
    font-size: 9px;
    margin-top: 1px;
}
.top-num {
    position: absolute;
    bottom: 8px; left: 8px;
    font-size: 17px; font-weight: 900;
    color:var(--cg-sobre-img);
    background: rgba(4, 8, 15, 0.78);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.4;
    pointer-events: none;
    backdrop-filter: blur(3px);
    letter-spacing: 0.5px;
}
.top-num.gold   { color: var(--cg-ouro); border-color: rgba(245,200,66,0.5);  box-shadow: 0 0 8px rgba(245,200,66,0.25); }
.top-num.silver { color: #c0c8d0; border-color: rgba(192,200,208,0.4); }
.top-num.bronze { color: #cd7f4a; border-color: rgba(205,127,74,0.4);  }
.top-info {
    padding: 7px 7px 9px;
    border-top: 1px solid var(--cg-linha);
}
/* 26/08/2026: o título era UMA linha com reticências, e franquia grande virava uma
   parede de cards idênticos — "Sword Art Online Alterna…" repetido seis vezes, sem dar
   para saber qual temporada é qual. Agora são DUAS linhas; o min-height mantém os cards
   da mesma altura na grade mesmo quando o título cabe em uma linha só. O atributo title=
   (tooltip) continua trazendo o nome inteiro no computador. */
.top-title {
    font-size: 8.5pt; color: var(--cg-txt-2); font-weight: bold;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    white-space: normal; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3; min-height: 2.6em;
    margin-bottom: 5px;
}
.top-genres { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.top-tag {
    font-size: 6.5pt; padding: 1px 6px; border-radius: 8px;
    background: rgba(54,207,227,0.13); color: var(--cg-ciano);
    border: 1px solid rgba(54,207,227,0.25);
    white-space: nowrap;
}
.top-stats {
    font-size: 7.5pt; color: var(--cg-dim);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.top-score-r { color: var(--cg-ouro); font-weight: bold; }
.top-dot     { color: var(--cg-dim-2); }
@media (max-width: 600px) {
    .top-title { font-size: 7.5pt; }
    .top-tag   { font-size: 6pt; padding: 1px 4px; }
    .top-stats { font-size: 7pt; }
    .top-num   { font-size: 14px; padding: 1px 6px; }
}
/* Cabecalho de secao */
.sct-header {
    width: 92%; margin: 28px auto 14px;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--cg-txt); font-size: 16px; font-weight: bold;
}
.sct-header b { display: inline-flex; align-items: center; gap: 9px; }
.sct-header b::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--cg-ciano); }
.sct-header a {
    font-size: 12px; color: var(--cg-azul); font-weight: normal; text-decoration: none;
    border: 1px solid var(--cg-linha); border-radius: 14px; padding: 4px 13px;
    transition: background .2s, color .2s;
}
.sct-header a:hover { background: var(--cg-hover); color: var(--cg-txt-2); }
@media (max-width: 600px) { .sct-header { width: 96%; margin-top: 20px; } }