/* creators.theclassic.games — paginas publicas (home, como participar, ao vivo).
   Complementa assets/css/creators.css (vocabulario .cr-*); sem variaveis novas em :root. */

/* ---------- hero: lista "ao vivo" limitada a 4 linhas (o refresh JS devolve ate 50) ---------- */
.cr-hero-live > .cr-hero-live-row:nth-child(n+5) { display: none; }
.cr-hero-live .cr-empty { padding: 16px 10px; }
.cr-hero-live .cr-empty-title { font-size: 16px; }
.cr-hero-live .cr-empty-text { font-size: 12.5px; }
.cr-hero-spark { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(216, 179, 106, .25); }
.cr-hero-spark-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.cr-hero-spark-label b { color: var(--gold); font-family: var(--font-display); font-size: 15px; letter-spacing: .03em; }
.cr-hero-live-row .cr-hero-live-game { width: 16px; height: 16px; object-fit: contain; flex: none; }
.cr-hero-live-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }

/* ---------- carrossel dos melhores (cards sem link/CTA/redes — decisao 2026-08-30) ---------- */
.cr-top-card { height: 100%; cursor: default; }
.cr-top-card:hover { transform: none; }
.cr-top-card .cr-creator-avatar .avatar { width: 62px; height: 62px; }
.cr-rank-medal { position: absolute; left: -6px; top: -6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .03em; color: #181206; background: linear-gradient(135deg, #3a3a44, #24242a); border: 1px solid #4a4a55; color: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.cr-rank-medal.m1 { background: linear-gradient(135deg, #f5d87a, #c9962e); border-color: #e8cd8f; color: #181206; }
.cr-rank-medal.m2 { background: linear-gradient(135deg, #e0dcd5, #9d9891); border-color: #d6d2cb; color: #181206; }
.cr-rank-medal.m3 { background: linear-gradient(135deg, #d29a63, #8e5a2e); border-color: #c9905a; color: #1d150c; }
.cr-top-card.is-top3 { border-color: rgba(232, 176, 67, .35); }
.cr-top-card .cr-creator-stats { grid-template-columns: repeat(3, 1fr); }
.cr-top-card .cr-creator-stat b.gold { color: var(--gold); }
.cr-top-card .cr-creator-stat b.tcce { color: var(--tcce); }
.cr-top-card .cr-creator-stat b.twitch { color: #c4a3ff; }
.cr-top-score { font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; color: var(--accent); }
.cr-carousel-item.cr-carousel-item--wide { flex-basis: min(300px, 82vw); }

/* ---------- como se tornar criador (home) ---------- */
.cr-how-card p { margin: 0; }
.cr-how-card .cr-how-num { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #181206; }

/* ---------- conteudos recentes ---------- */
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cr-tile-like { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); min-width: 0; transition: border-color .15s, transform .15s; overflow: hidden; }
.cr-tile-like::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gc, var(--accent)); opacity: .85; }
.cr-tile-like:hover { border-color: var(--gc, var(--accent)); transform: translateY(-2px); }
.cr-tile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-tile-platform { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); flex: none; }
.cr-tile-platform.youtube { color: #ff5c5c; border-color: rgba(255, 0, 0, .4); }
.cr-tile-platform.tiktok { color: #7ee8e2; border-color: rgba(105, 201, 208, .45); }
.cr-tile-platform.instagram { color: #ff8fc0; border-color: rgba(225, 48, 108, .45); }
.cr-tile-platform.twitch { color: #c4a3ff; border-color: rgba(145, 70, 255, .5); }
.cr-tile-platform.kick { color: #53fc18; border-color: rgba(83, 252, 24, .4); }
.cr-tile-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cr-tile-who .avatar { width: 30px; height: 30px; }
.cr-tile-who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tile-who small { display: block; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tile-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.cr-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.cr-tile-thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: linear-gradient(135deg, #17171b, #0f0f12); }
.cr-tile-thumb-ph svg { width: 34px; height: 34px; opacity: .6; }
.cr-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); margin-top: auto; }
.cr-tile-foot .cr-badge { font-size: 10px; padding: 1px 7px; }
.cr-tile-foot .cr-tile-open { color: var(--accent); white-space: nowrap; }

/* ---------- jogos da rede ---------- */
.cr-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cr-game-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-align: center; min-width: 0; overflow: hidden; transition: border-color .15s, transform .15s; }
.cr-game-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gc, var(--accent)); }
.cr-game-card:hover { border-color: var(--gc, var(--accent)); transform: translateY(-2px); }
.cr-game-card img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.cr-game-card .cr-game-ph { width: 52px; height: 52px; border-radius: 50%; background: var(--gc, var(--accent)); opacity: .35; }
.cr-game-card b { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--text); }
.cr-game-card small { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cr-game-card .cr-game-hours { font-family: var(--font-display); font-size: 20px; letter-spacing: .03em; color: var(--gc, var(--accent)); line-height: 1; }
.cr-game-card .cr-game-bar { width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cr-game-card .cr-game-bar > span { display: block; height: 100%; width: 0; background: var(--gc, var(--accent)); border-radius: 999px; transition: width .6s ease; }
.cr-home-games { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cr-chart-kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; font-size: 12.5px; color: var(--text-dim); }
.cr-chart-kpis b { color: var(--gold); font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; margin-right: 4px; }

/* ---------- como participar ---------- */
.cr-how-hero { padding: 40px 28px 34px; }
.cr-track-card h3 { display: flex; align-items: center; gap: 10px; }
.cr-track-card h3 .cr-badge { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .04em; text-transform: none; }
.cr-track-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cr-track-block h4 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.cr-track-block h4 .cr-ico { color: var(--tc, var(--accent)); }
.cr-track-block p { margin: 0 0 6px; }
.cr-track-list li { line-height: 1.45; }
.cr-track-card .cr-track-list li::before { margin-top: 1px; }
.cr-track-example { margin-top: 10px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--tc, var(--accent)); border-radius: var(--radius); font-size: 13.5px; color: var(--text-dim); }
.cr-track-example b { color: var(--text); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cr-track-example em { font-style: normal; color: var(--gold); font-weight: 600; }
.cr-track-table { margin-top: 8px; }
.cr-track-table .cr-table th { font-size: 13px; padding: 8px 10px; }
.cr-track-table .cr-table td { padding: 6px 10px; font-size: 13px; }
.cr-track-table .cr-table td.num { font-size: 15px; }
.cr-track-card .cr-levels { margin-top: 8px; }
.cr-track-card .cr-level { padding: 8px 6px; }
.cr-track-card .cr-level b { font-size: 19px; }
.cr-track-card .cr-level small { font-size: 10.5px; }
.cr-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cr-tier-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); font-size: 12.5px; color: var(--text-dim); }
.cr-tier-card .cr-badge { margin-bottom: 6px; }
.cr-track-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cr-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cr-flow-step { padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; color: var(--text-dim); display: flex; gap: 8px; align-items: flex-start; }
.cr-flow-step b { font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--tc, var(--accent)); flex: none; }
.cr-how-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- ao vivo ---------- */
.cr-live-hero { padding: 36px 28px 30px; }
.cr-live-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cr-live-embed-card { padding: 12px; }
.cr-live-embed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cr-live-embed-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-live-embed-who .avatar { width: 40px; height: 40px; }
.cr-live-embed-who b { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: .03em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-live-embed-who small { display: block; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.cr-live-embed-title { font-size: 13px; color: var(--text-dim); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-live-side .cr-stats { grid-template-columns: repeat(2, 1fr); }
.cr-live-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.cr-creator-card.is-watching { border-color: var(--twitch); box-shadow: 0 0 0 1px rgba(145, 70, 255, .35); }
.cr-creator-card .cr-creator-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-creator-card .cr-creator-actions .cr-btn { flex: 1; }
.cr-creator-title { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-chips .cr-chip .cr-chip-count { font-family: var(--font-display); font-size: 14px; color: var(--accent); letter-spacing: .03em; }
.cr-live-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cr-live-cta .cr-empty-icon { margin: 0; font-size: 28px; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
    .cr-home-games, .cr-live-layout { grid-template-columns: 1fr; }
    .cr-tier-grid, .cr-flow { grid-template-columns: 1fr; }
    .cr-how-hero, .cr-live-hero { padding: 30px 20px 26px; }
}
@media (max-width: 640px) {
    .cr-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .cr-game-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .cr-live-side .cr-stats { grid-template-columns: repeat(2, 1fr); }
}