/* ================================================================
   Top 10 / Lista — folha de estilos exclusiva (tema escuro)
   ================================================================ */

.post-wrap *,
.post-wrap *::before,
.post-wrap *::after {
    box-sizing: border-box;
}

/* Wrapper */
.post-wrap {
    max-width: 720px;
    margin: 48px auto 80px;
    padding: 0 1rem;
    font-family: 'Nunito', sans-serif;
    color: #f5f7ff;
}

/* ── Hero ───────────────────────────────────────────────── */
.top10-hero {
    background: #061426;
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #00e5ff;
    border-top: 2px solid #00e5ff;
    border-bottom: 2px solid #ff4fd8;
}

/* Hero com imagem destacada */
.top10-hero--has-thumb {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
}

.top10-hero-thumb {
    width: 100%;
    max-height: 380px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.top10-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.top10-hero--has-thumb .top10-hero-text {
    padding: 2rem 2rem 1.5rem;
}

.top10-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, #00e5ff 0 8px, transparent 8px 16px);
}

.hero-tag {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #00e5ff;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.top10-hero h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 15px;
    line-height: 1.8;
    color: #fff;
    margin: 0 0 1rem;
}

.top10-hero h1 span {
    color: #00e5ff;
}

.hero-sub {
    font-size: 14px;
    color: #a8b4cc;
    line-height: 1.6;
    max-width: 520px;
}

.pixel-deco {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 64px;
    opacity: 0.08;
    font-family: 'Press Start 2P', monospace;
    color: #00e5ff;
    line-height: 1;
}

/* ── Intro ──────────────────────────────────────────────── */
.intro-text {
    font-size: 15px;
    line-height: 1.8;
    color: #a8b4cc;
    margin-bottom: 2rem;
}

/* ── Section label ──────────────────────────────────────── */
.section-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #ffe14a;
    letter-spacing: 2px;
    margin: 2rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 229, 255, .25);
}

/* ── Track / Item cards ─────────────────────────────────── */
.track-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 1rem;
}

.track-card {
    background: #061426;
    border: 1px solid rgba(0, 229, 255, .2);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 1rem;
    align-items: start;
    transition: border-color .15s;
}

.track-card:hover {
    border-color: rgba(0, 229, 255, .5);
}

.track-card.gold   { border-left: 3px solid #EF9F27; }
.track-card.silver { border-left: 3px solid #a8b4cc; }
.track-card.bronze { border-left: 3px solid #D85A30; }
.track-card.normal { border-left: 3px solid #8a4cff; }

.rank-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: #a8b4cc;
    text-align: center;
    padding-top: 2px;
}

.rank-num.r1 { color: #EF9F27; font-size: 15px; }
.rank-num.r2 { color: #c8cdd6; }
.rank-num.r3 { color: #D85A30; }

.track-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
}

.track-game {
    font-size: 12px;
    color: #a8b4cc;
    margin: 0 0 6px;
}

.track-desc {
    font-size: 12px;
    color: #8a9ab8;
    line-height: 1.6;
    margin: 0;
}

/* ── Badges ─────────────────────────────────────────────── */
.track-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 2px;
    display: inline-block;
}

.badge-nes     { background: rgba(83,74,183,.25);  color: #b0aaff; border: 1px solid rgba(83,74,183,.5); }
.badge-snes    { background: rgba(24,95,165,.25);  color: #7ec8ff; border: 1px solid rgba(24,95,165,.5); }
.badge-genesis { background: rgba(239,159,39,.15); color: #ffcf70; border: 1px solid rgba(239,159,39,.4); }
.badge-gb      { background: rgba(59,109,17,.25);  color: #8fdb4a; border: 1px solid rgba(59,109,17,.5); }
.badge-arcade  { background: rgba(216,90,48,.2);   color: #ff9070; border: 1px solid rgba(216,90,48,.45); }
.badge-n64     { background: rgba(153,53,86,.25);  color: #ff99bb; border: 1px solid rgba(153,53,86,.5); }
.badge-ps1     { background: rgba(26,58,122,.3);   color: #7ab0ff; border: 1px solid rgba(26,58,122,.5); }
.badge-pc      { background: rgba(255,255,255,.08); color: #d0d8e8; border: 1px solid rgba(255,255,255,.15); }
.badge-ps5     { background: #003087; color: #fff; border: 1px solid #003087; }
.badge-xbox    { background: #16a34a; color: #fff; border: 1px solid #16a34a; }
.badge-atari   { background: #d0011b; color: #fff; border: 1px solid #d0011b; }

/* ── Closing ────────────────────────────────────────────── */
.closing {
    background: #061426;
    border-radius: 12px;
    padding: 1.5rem;
    font-size: 14px;
    color: #a8b4cc;
    line-height: 1.8;
    border: 1px solid rgba(0, 229, 255, .2);
    margin-top: 2rem;
}

.closing p + p { margin-top: 0.75rem; }
.closing strong { color: #fff; }

.author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 229, 255, .15);
}

.author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(138, 76, 255, .25);
    border: 1px solid rgba(138, 76, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #00e5ff;
    flex-shrink: 0;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.author-name {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.author-site {
    font-size: 12px;
    color: #a8b4cc;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 680px) {
    .post-wrap       { margin: 24px auto 48px; }
    .top10-hero      { padding: 1.8rem 1.4rem 1.6rem; }
    .pixel-deco      { display: none; }
    .track-card      { grid-template-columns: 40px 1fr auto; gap: .75rem; }
}

@media (max-width: 520px) {
    .top10-hero h1   { font-size: 11px; }
    .track-card      { grid-template-columns: 36px 1fr; }
    .track-badge     { display: none; }
    .closing         { padding: 1.1rem; }
}