/* ==========================================================================
   creators.theclassic.games — tema épico do hub (2026-09-09)
   Mesma receita do analytics, do ranking e do painel de clãs (tcg-epic.css de lá): tinta
   escura com brilhos bronze, fumaça e brasas; títulos serifados (TLHeader) em degradê
   dourado com kicker e filete; molduras bronze com cantos dourados; botões dourados retos.
   Carregado no views/_head.php por ÚLTIMO (depois de app.css, do bloco H51, do creators.css
   e dos assets/css/modules/*.css): só sobrescritas, e por vir depois vence os empates de
   especificidade sem precisar de prefixo.
   Reverter = remover o <link>, as divs .tcg-sky/.tcg-embers e o kicker da casca do painel.
   NÃO toca na topbar (pele H51) nem no footer (pele F27). As cores semânticas continuam
   nos dados: cor do jogo (--gc), TCC Event (--tcce), ao vivo (--live), Twitch (--twitch),
   ok/atenção/erro e os tiers.
   ========================================================================== */

/* ---------- 0) Fontes ---------- */
@font-face {
    font-family: 'Amazon Ember'; font-weight: 400; font-style: normal; font-display: swap;
    src: local('Amazon Ember'), url(../fonts/AmazonEmber_W_Rg.woff) format('woff');
}
@font-face {
    font-family: 'Amazon Ember'; font-weight: 700; font-style: normal; font-display: swap;
    src: local('Amazon Ember Bold'), url(../fonts/AmazonEmber_W_Bd.woff) format('woff');
}
/* alias: pesos 500-800 de TLHeader no MESMO arquivo regular (o design system usa font-weight
   600/700 em títulos e números; sem o alias o navegador sintetiza um negrito borrado) */
@font-face {
    font-family: 'TLHeader'; font-weight: 500 800; font-style: normal; font-display: swap;
    src: local('TLHeaderEuro'), url(../fonts/TLHeaderEUROv2-Regular.woff) format('woff');
}

/* ---------- 1) Tokens ---------- */
:root {
    --tcg-ink: #0d0c10;
    --tcg-bronze: #c59768;
    --tcg-bronze-deep: #a66b42;
    --tcg-gold: #f4d2a1;
    --tcg-cream: #fbf9f7;
    --tcg-panel: rgba(14, 12, 19, .86);
    --tcg-panel-solid: #15131a;
    --tcg-sub: rgba(0, 0, 0, .28);
    --tcg-line: rgba(197, 151, 104, .32);
    --tcg-line-soft: rgba(197, 151, 104, .16);
    --tcg-line-strong: rgba(197, 151, 104, .58);
    --tcg-sans: 'Amazon Ember', 'IBM Plex Sans', Arial, sans-serif;
    --tcg-gold-text: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768);
    --tcg-gold-btn: linear-gradient(180deg, #f4d2a1, #c59768);

    --bg: #0d0c10;
    --bg-soft: #100e15;
    --bg-card: #15131a;
    --bg-card-hover: #1d1a24;
    --border: rgba(197, 151, 104, .32);
    --text: #efe9e0;
    --text-dim: #a99e93;
    --text-faint: #7a7064;
    --accent: #c59768;
    --gold: #f4d2a1;
    --radius: 0;
    --font-display: 'TLHeader', Ellipsis, Times, 'Times New Roman', serif;
    --font-body: 'TL', Ellipsis, Times, 'Times New Roman', serif;
}
.topbar { --font-body: 'IBM Plex Sans', sans-serif; --bg-soft: #141416; --accent: #d8b36a; }

/* Texto em degradê dourado: títulos e grandes números. */
.cr-hero-title,
.cr-section-title,
.cr-page-title,
.cr-ctx-name,
.cr-gate-title,
.hero h1,
.notfound h1,
.cr-hero-stat b:not([style]),
.cr-stat--gold .cr-stat-value,
.cr-gauge-label,
.st-head-name {
    background: var(--tcg-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: #e0b878;
    -webkit-text-fill-color: transparent;
}
.cr-stat-value small { -webkit-text-fill-color: var(--text-dim); }
.st-head-name a, .st-head-name .cr-badge { -webkit-text-fill-color: initial; }
.st-head-name a svg { color: #9146ff; }

/* ---------- 2) Atmosfera (fixa, atrás de tudo) ---------- */
body { background: var(--tcg-ink); background-image: none; color: var(--text); }
.tcg-sky {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(197, 151, 104, .16), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(166, 107, 66, .12), transparent 70%),
        linear-gradient(180deg, #0f0e13 0%, #0a090c 100%);
}
.tcg-sky::before {
    content: ""; position: absolute; inset: 0;
    background: url(../img/tcg/smoke.jpg) center top / cover no-repeat;
    opacity: .28; mix-blend-mode: screen;
}
.tcg-sky::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(5, 4, 7, .72) 100%);
}
.tcg-embers { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tcg-embers i {
    position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 222, 170, .95) 0%, rgba(244, 160, 80, .55) 45%, transparent 70%);
    filter: drop-shadow(0 0 6px rgba(244, 170, 90, .6));
    opacity: 0;
    animation: tcgEmber var(--d, 16s) linear var(--t, 0s) infinite;
    will-change: transform, opacity;
}
.tcg-embers i:nth-child(1)  { left: 6%;  --d: 15s; --t: -2s;  --sx: 18px; }
.tcg-embers i:nth-child(2)  { left: 14%; --d: 19s; --t: -6s;  --sx: -24px; }
.tcg-embers i:nth-child(3)  { left: 23%; --d: 13s; --t: -9s;  --sx: 30px; }
.tcg-embers i:nth-child(4)  { left: 32%; --d: 21s; --t: -11s; --sx: -14px; }
.tcg-embers i:nth-child(5)  { left: 41%; --d: 16s; --t: -4s;  --sx: 22px; }
.tcg-embers i:nth-child(6)  { left: 50%; --d: 18s; --t: -13s; --sx: -30px; }
.tcg-embers i:nth-child(7)  { left: 59%; --d: 14s; --t: -1s;  --sx: 16px; }
.tcg-embers i:nth-child(8)  { left: 68%; --d: 20s; --t: -15s; --sx: -20px; }
.tcg-embers i:nth-child(9)  { left: 77%; --d: 17s; --t: -7s;  --sx: 26px; }
.tcg-embers i:nth-child(10) { left: 85%; --d: 22s; --t: -17s; --sx: -12px; }
.tcg-embers i:nth-child(11) { left: 92%; --d: 16s; --t: -5s;  --sx: -28px; }
.tcg-embers i:nth-child(12) { left: 36%; --d: 24s; --t: -19s; --sx: 8px; }
@keyframes tcgEmber {
    0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    8%   { opacity: .9; }
    50%  { transform: translate3d(var(--sx, 20px), -45vh, 0) scale(1); }
    100% { transform: translate3d(calc(var(--sx, 20px) * -1), -105vh, 0) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tcg-embers { display: none; } }

/* ---------- 3) Texto de apoio em Amazon Ember ---------- */
.cr-muted, .cr-faint, .cr-small, .cr-help, .cr-field-error, .cr-label, .cr-stat-label, .cr-stat-sub, .cr-badge, .cr-chip,
.cr-page-sub, .cr-card-sub, .cr-card-foot, .cr-card-title small, .cr-hero-text, .cr-hero-note, .cr-hero-stat span,
.cr-hero-live-row, .cr-hero-spark-label, .cr-hero-live-foot, .cr-creator-sub, .cr-creator-stat span, .cr-creator-foot,
.cr-creator-title, .cr-tile-who, .cr-tile-foot, .cr-game-card small, .cr-game-card .cr-game-hours + span, .cr-chart-kpis,
.cr-track-card p, .cr-track-list, .cr-track-example, .cr-tier-card, .cr-flow-step, .cr-faq summary, .cr-faq-body,
.cr-how-card, .cr-level span, .cr-level small, .cr-feed-row, .cr-notif, .cr-chat-msg, .cr-alert, .flash, .cr-empty,
.cr-table, .cr-pager, .cr-pn-label, .cr-pn-item, .cr-pn-toggle, .cr-ctx-sub, .cr-quick-card, .cr-progress-head,
.cr-progress-meta, .cr-gauge-sub, .cr-form, .cr-input, .cr-select, .cr-textarea, .cr-check, .cr-radio-card,
.cr-kv, .cr-cfg-kv, .cr-cfg-list, .cr-rules, .cr-rules-list, .cupom-how, .cupom-month-list, .cupom-period, .link-tips,
.link-row, .st-rules, .st-head-sub, .st-onb-check, .st-games-row, .st-explain-row, .st-games-legend, .af-rules, .af-step,
.cd-check-body, .cd-answer, .cd-answers summary, .cd-admin-response-text, .cd-status-grid, .cd-q .cr-label,
.cr-avisos, .cr-checklist, .cr-compare-row, .cr-contrato-totals, .cr-contrato-game-grid span, .cr-pace-marker b,
.cr-inicio-proj, .cr-reason, .cr-plat, .cr-check-loading, .cr-check-preview, .cr-gate-text, .cr-gate-hint,
.cr-gate-error, .cr-gate-features, .cr-empty-text, .cr-live-embed-title, .cr-live-embed-who small, .cr-notif-msg,
.cr-toast, .modal-loading, .mobile-nav-label, .mobile-nav-link .mnl-full, .game-cite-chip, .hero p, .notfound p,
.cr-delta, .cr-countdown-label, .cr-track-example b {
    font-family: var(--tcg-sans);
}
.cr-mono, .cr-copy .cr-input, .cr-content-link, .link-key { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* kicker (linha curta acima do título) + filete (tracinho dourado abaixo) */
.cr-hero-kicker, .tcg-kicker {
    display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
    font-family: var(--font-body); font-weight: 500; font-size: .68rem;
    letter-spacing: .34em; text-transform: uppercase; color: var(--tcg-bronze);
}
.cr-hero-kicker::before, .cr-hero-kicker::after, .tcg-kicker::before, .tcg-kicker::after {
    content: ""; flex: 0 0 auto; width: 34px; height: 1px; margin: 0;
    background: linear-gradient(90deg, transparent, var(--tcg-bronze));
}
.cr-hero-kicker::after, .tcg-kicker::after { background: linear-gradient(90deg, var(--tcg-bronze), transparent); }
.tcg-kicker-sm { font-size: .58rem; letter-spacing: .26em; margin-bottom: 4px; }
.tcg-kicker-sm::before, .tcg-kicker-sm::after { width: 18px; }
.cr-hero-title::after, .cr-section-title::after, .cr-page-title::after, .hero h1::after, .notfound h1::after {
    content: ""; display: block; width: 186px; height: 4px; margin: 14px 0 0;
    background: url(../img/tcg/dash.png) left center / contain no-repeat;
}
.hero h1::after, .notfound h1::after { margin: 14px auto 0; }
.cr-section-title::after { margin-top: 10px; }
.cr-page-title::after { margin-top: 10px; }

/* ---------- 4) Heros públicos (home, como participar, ao vivo) e login ---------- */
.cr-hero, .cr-how-hero, .cr-live-hero {
    margin: 6px 0 22px; padding: 30px 0 18px; border: 0; background: none; overflow: visible;
}
.cr-hero::after { display: none; }
.cr-hero-inner { gap: 36px; }
.cr-hero-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -.01em;
    text-transform: uppercase; text-wrap: balance;
}
.cr-hero-text { font-size: .98rem; margin-top: 12px; }
.cr-hero-actions { margin-top: 24px; }
.cr-hero-note { color: var(--text-dim); }
.cr-hero-panel { background: var(--tcg-panel); border: 1px solid var(--tcg-line); border-radius: 0; padding: 22px 22px 20px; }
.cr-hero-panel-title {
    font-family: var(--font-display); font-weight: 400; font-size: .98rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tcg-cream);
}
.cr-hero-stat { background: var(--tcg-sub); border: 1px solid var(--tcg-line-soft); border-radius: 0; }
.cr-hero-stat b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; }
.cr-hero-stat span { font-weight: 700; letter-spacing: .12em; color: var(--tcg-bronze); font-size: 10px; }
.cr-hero-live-row { background: var(--tcg-sub); border-radius: 0; border: 1px solid transparent; }
.cr-hero-live-row:hover { border-color: var(--tcg-line); }
.cr-hero-spark { border-top-color: var(--tcg-line); }
.cr-hero-spark-label b { font-family: var(--font-display); font-weight: 400; }
.hero { padding: 36px 16px 22px; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.01em; line-height: 1.05; text-wrap: balance; }
.hero p { margin-top: 12px; }

/* ---------- 5) Títulos de seção, de página e de card ---------- */
.cr-section { margin: 30px 0; }
.cr-section-title {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1; letter-spacing: .02em;
}
.cr-page-title { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; letter-spacing: .01em; line-height: 1.1; }
.cr-page-head { margin: 4px 0 20px; }
.cr-card-title {
    font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.2;
    letter-spacing: .04em; text-transform: uppercase; color: var(--tcg-cream);
    padding-left: 0; border-left: 0;
}
.cr-card-title small { margin-top: 3px; }
.cr-empty-title, .cr-track-block h4, .cr-how-card h3, .cr-game-card b, .cr-creator-name, .cr-live-embed-who b,
.cr-embed-cover, .mobile-nav-title, .st-head-name, .cr-track-card h3 {
    font-family: var(--font-display); font-weight: 400;
}
.cr-track-card h3 { font-size: 1.5rem; letter-spacing: .03em; }
.cr-track-block h4 { font-size: 1rem; letter-spacing: .05em; color: var(--tcg-cream); }
.cr-how-card h3 { font-size: 1.15rem; letter-spacing: .04em; color: var(--tcg-cream); }
.cr-creator-name { font-size: 1.2rem; letter-spacing: .02em; text-transform: uppercase; }
.cr-empty-title { color: var(--tcg-cream); letter-spacing: .04em; }

/* ---------- 6) Molduras bronze com cantos dourados ---------- */
.cr-card, .cr-card-flat, .cr-hero-panel, .cr-ctx-bar, .cr-panel-nav, .cr-faq, .cr-stat, .cr-creator-card,
.cr-tile-like, .cr-game-card, .cr-how-card, .cr-track-card, .cr-alert, .flash, .cr-notif, .cr-embed, .cr-toast, .modal-card {
    background: var(--tcg-panel); border: 1px solid var(--tcg-line); border-radius: 0;
}
.cr-card, .cr-card-flat, .cr-hero-panel, .cr-ctx-bar, .cr-panel-nav { position: relative; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.cr-card::before, .cr-card-flat::before, .cr-hero-panel::before, .cr-ctx-bar::before, .cr-panel-nav::before,
.cr-card::after, .cr-card-flat::after, .cr-hero-panel::after, .cr-ctx-bar::after, .cr-panel-nav::after {
    content: ""; position: absolute; width: 31px; height: 28px; pointer-events: none; z-index: 1;
}
.cr-card::before, .cr-card-flat::before, .cr-hero-panel::before, .cr-ctx-bar::before, .cr-panel-nav::before {
    left: -1px; top: -1px; background: url(../img/tcg/corner-tl.png) no-repeat;
}
.cr-card::after, .cr-card-flat::after, .cr-hero-panel::after, .cr-ctx-bar::after, .cr-panel-nav::after {
    right: -1px; bottom: -1px; background: url(../img/tcg/corner-br.png) no-repeat;
}
/* cards com barra lateral/topo colorida (identidade do jogo) ficam sem cantos: a barra é o ::before deles */
.cr-card.st-head::before, .cr-card.st-head::after, .cr-card.st-onb-hero::before, .cr-card.st-onb-hero::after,
.cr-card.cr-contrato-game::before, .cr-card.cr-contrato-game::after { display: none; }
.cr-card, .cr-card-flat { padding: 20px 22px; }
.cr-card-focus { border-color: var(--tcg-line-strong); box-shadow: 0 0 0 1px rgba(197, 151, 104, .08), 0 12px 30px rgba(0, 0, 0, .3); }
.cr-live-embed-card { padding: 18px 20px; }
.cr-stat { background: var(--tcg-panel); }
.cr-stat::before { opacity: 1; }
.cr-creator-card:hover, .cr-tile-like:hover, .cr-game-card:hover { border-color: var(--gc, var(--tcg-bronze)); }
.cr-top-card.is-top3 { border-color: var(--tcg-line-strong); }
.cr-creator-card.is-watching { border-color: var(--twitch); }
/* sub-painéis (blocos internos dos cards) */
.cr-creator-stat, .cr-quick-card, .cr-leader-row, .cr-radio-card, .cr-aviso, .cr-level, .cr-track-example, .cr-tier-card,
.cr-flow-step, .cr-checklist li, .cr-contrato-totals > div, .st-onb-check, .st-games-row, .st-reward, .st-explain-row,
.af-step, .cd-check, .cd-status-grid > div, .cd-answer, .cr-check-preview, .cr-chat-msg, .cr-notif-img, .cr-notif-ico,
.cr-cfg-color input[type="color"], .cr-tile-platform, .cr-tile-thumb, .cr-pager a, .cr-pager span, .cr-pager button {
    border-radius: 0; background: var(--tcg-sub); border-color: var(--tcg-line);
}
.cr-quick-card:hover, .cr-leader-row:hover, .cr-radio-card:hover { border-color: var(--tcg-bronze); background: rgba(197, 151, 104, .08); }
.cr-radio-card.active, .cr-radio-card:has(input:checked) { background: rgba(197, 151, 104, .1); }
.cr-radio-card.is-cooldown.active, .cr-radio-card.is-cooldown:has(input:checked) { background: rgba(250, 204, 21, .06); }
.cr-type-card--live.active, .cr-type-card--live:has(input:checked) { background: rgba(233, 25, 22, .08); }
.cr-chat-msg.admin { border-color: var(--tcg-line-strong); }
.cr-chat-msg.player { background: rgba(197, 151, 104, .12); border-color: var(--tcg-line-strong); }
.cr-empty { border: 1px dashed var(--tcg-line-strong); border-radius: 0; }
.cr-faq details { border-bottom-color: var(--tcg-line); }
.cr-faq summary { font-weight: 700; }
.cr-faq summary::after { color: var(--tcg-gold); font-family: var(--font-display); }
.cr-track-block { border-top-color: var(--tcg-line); }
.cr-track-example { border-left: 3px solid var(--tc, var(--tcg-bronze)); }
.cr-notif.unread { border-left: 3px solid var(--tcg-bronze); background: linear-gradient(90deg, rgba(197, 151, 104, .09), transparent 40%), var(--tcg-panel); }
.cr-notif:hover { border-color: var(--tcg-bronze); }
.cr-alert { box-shadow: none; }
.cr-alert-info { border-left-color: var(--tcg-bronze); }
.cr-alert-info .cr-ico { color: var(--tcg-bronze); }
.cr-feed-row, .cr-compare-row, .link-row, .cupom-month-list > div, .cr-card-foot, .cd-answers { border-color: var(--tcg-line-soft); }
.cr-kv dd.cr-kv-text { border-top-color: var(--tcg-line); }
.cupom-code { border: 1px dashed var(--tcg-line-strong); border-radius: 0; background: rgba(197, 151, 104, .07); color: var(--tcg-gold); font-family: var(--font-display); font-weight: 400; }
.link-key, .af-code { border-radius: 0; }
.cd-admin-response { border-radius: 0; border-color: var(--tcg-line-strong); border-left: 3px solid var(--tcg-gold); background: rgba(197, 151, 104, .07); }
.cd-admin-response .cr-stat-label { color: var(--tcg-gold); }
.modal-card { background: var(--tcg-panel-solid); }
.cr-toast { background: var(--tcg-panel-solid); border-color: var(--tcg-bronze); }
.cr-tile-thumb { border-color: var(--tcg-line-soft); }
.cr-tile-thumb-ph { background: linear-gradient(135deg, #15131a, #0a090c); }
.cr-rank-medal { border-radius: 0; }
.cr-rank-medal.m1 { background: var(--tcg-gold-btn); border-color: #f4d2a1; }

/* ---------- 7) KPIs, números e progresso ---------- */
.cr-stat { padding: 16px 18px 14px; }
.cr-stat-label { font-weight: 700; font-size: .64rem; letter-spacing: .16em; color: var(--tcg-bronze); }
.cr-stat-value { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; letter-spacing: .02em; color: var(--sc, var(--tcg-gold)); font-variant-numeric: tabular-nums; }
.cr-stat-sub { margin-top: 5px; }
.cr-num, .cr-progress-head b, .cr-gauge-label, .cr-countdown, .cr-level b, .cr-flow-step b, .cr-leader-pos, .cr-leader-score,
.cr-creator-stat b, .cr-game-card .cr-game-hours, .cr-chart-kpis b, .cr-top-score, .cr-chips .cr-chip .cr-chip-count,
.cr-contrato-totals b, .cr-contrato-game-grid b, .cr-compare-row > b, .st-reward-value, .st-explain-row b, .af-step b,
.cupom-best b, .cr-table .num, .cr-table .pos, .cr-hero-stat b, .cr-empty-title, .cr-how-num, .cr-rank-medal, .link-key {
    font-family: var(--font-display); font-weight: 400;
}
.cr-top-score, .cr-chips .cr-chip .cr-chip-count, .cr-leader-score, .cr-tile-open, .cr-tile-foot .cr-tile-open { color: var(--tcg-gold); }
.cr-progress-bar, .cr-pace-track, .cr-game-card .cr-game-bar, .cr-progress-bar > span, .cr-pace-fill, .cr-game-card .cr-game-bar > span { border-radius: 0; }
.cr-progress-bar, .cr-pace-track, .cr-game-card .cr-game-bar { background: rgba(0, 0, 0, .38); border: 1px solid var(--tcg-line-soft); }
.cr-progress-bar > span, .cr-pace-fill { background: linear-gradient(90deg, var(--tcg-bronze), var(--tcg-gold)); }
.cr-gauge-track { stroke: rgba(197, 151, 104, .16); }
.cr-gauge-label { font-weight: 400; }
.cr-how-num { border-radius: 0; background: var(--tcg-gold-btn); color: #1d150c; }
.cr-how-card .cr-how-num { font-weight: 400; }
.cd-q-num { background: var(--tcg-gold-btn); }
.cr-level.current { border-color: var(--tcg-bronze); background: rgba(197, 151, 104, .12); box-shadow: none; }
.cr-level.current b { color: var(--tcg-gold); }

/* ---------- 8) Botões, links, abas, chips, badges ---------- */
.cr-btn {
    height: 38px; padding: 0 18px; border: 1px solid var(--tcg-line-strong); border-radius: 0;
    background: transparent; color: var(--tcg-gold);
    font-family: var(--font-body); font-weight: 700; font-size: .72rem; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
}
.cr-btn:hover { border-color: var(--tcg-gold); color: var(--tcg-gold); background: rgba(197, 151, 104, .12); }
.cr-btn-gold, .cr-btn-primary { border: 0; color: #1d150c; background: var(--tcg-gold-btn); box-shadow: 0 0 14px rgba(197, 151, 104, .22); }
.cr-btn-primary { background: linear-gradient(180deg, #e2bd8a, #b5865a); }
.cr-btn-gold:hover, .cr-btn-primary:hover { color: #1d150c; filter: brightness(1.08); background: var(--tcg-gold-btn); }
.cr-btn-primary:hover { background: linear-gradient(180deg, #e2bd8a, #b5865a); }
.cr-btn-twitch { border: 0; background: var(--twitch); color: #fff; }
.cr-btn-twitch:hover { color: #fff; background: var(--twitch); filter: brightness(1.1); }
.cr-btn-discord { border: 0; background: #5865f2; color: #fff; }
.cr-btn-discord:hover { color: #fff; background: #5865f2; filter: brightness(1.1); }
.cr-btn-ghost { background: transparent; border-color: var(--tcg-line); color: var(--text); }
.cr-btn-ghost:hover { border-color: var(--tcg-gold); color: var(--tcg-gold); }
.cr-btn-danger { border-color: rgba(214, 69, 69, .5); color: #ff7b7b; background: transparent; }
.cr-btn-danger:hover { border-color: var(--danger); color: #fff; background: rgba(214, 69, 69, .2); }
.cr-btn-sm { height: 32px; padding: 0 12px; font-size: .64rem; letter-spacing: .12em; }
.cr-btn-lg { height: 46px; padding: 0 26px; font-size: .8rem; }
.cr-btn-icon { width: 36px; height: 36px; padding: 0; }
.cr-btn-block { width: 100%; height: auto; min-height: 38px; padding: 10px 14px; line-height: 1.25; white-space: normal; text-align: center; }
.cr-copy .cr-btn, .cr-input-group .cr-btn { height: auto; }
.cr-link { color: var(--tcg-gold); font-weight: 700; }
.cr-link:hover { color: #fff; text-decoration: none; }
.cr-pager a, .cr-pager span, .cr-pager button { font-family: var(--font-body); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tcg-gold); }
.cr-pager .active { border-color: var(--tcg-gold); background: rgba(197, 151, 104, .12); }
.cr-carousel-btn { border-radius: 0; border-color: var(--tcg-line-strong); background: rgba(13, 12, 16, .92); color: var(--tcg-gold); }
.cr-carousel-btn:hover { background: var(--tcg-gold); color: #1d150c; }
.cr-carousel-dots span.active { background: var(--tcg-gold); }
/* abas: sublinhado dourado */
.cr-tabs { gap: 2px; border-bottom: 1px solid var(--tcg-line); }
.cr-tab {
    padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--text-dim); box-shadow: none;
    font-family: var(--font-body); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.cr-tab:hover { color: var(--tcg-gold); border-color: transparent; }
.cr-tab.active { color: var(--tcg-gold); background: transparent; border-color: transparent; border-bottom-color: var(--tcg-bronze); box-shadow: none; }
/* chips e badges: cantos retos, Amazon Ember; as cores semânticas continuam as do design system */
.cr-chip { border-radius: 0; background: var(--tcg-sub); border-color: var(--tcg-line); font-weight: 700; font-size: .7rem; letter-spacing: .1em; }
.cr-chip:hover { border-color: var(--tcg-bronze); color: var(--text); }
.cr-chip.active { border-color: var(--tcg-gold); color: var(--tcg-gold); background: rgba(197, 151, 104, .12); box-shadow: none; }
.cr-badge { border-radius: 0; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; }
.game-cite-chip { border-radius: 0; background: var(--tcg-sub); border-color: var(--tcg-line); font-weight: 700; font-size: .72rem; letter-spacing: .04em; }
.cr-badge-count { font-family: var(--tcg-sans); }

/* ---------- 9) Formulários e tabelas ---------- */
.cr-input, .cr-select, .cr-textarea {
    background: rgba(0, 0, 0, .45); border: 1px solid var(--tcg-line); border-radius: 0; color: var(--text);
}
.cr-input:focus, .cr-select:focus, .cr-textarea:focus { border-color: var(--tcg-bronze); box-shadow: 0 0 0 3px rgba(197, 151, 104, .14); }
.cr-select { color-scheme: dark; }
.cr-label { font-weight: 700; font-size: .68rem; letter-spacing: .16em; color: var(--tcg-bronze); }
.cr-kv dt, .cr-cfg-kv dt, .cr-contrato-game-grid span, .cr-creator-stat span, .cr-level span, .af-step span, .cd-answer-q,
.cr-track-example b, .st-onb-check-row b { font-weight: 700; letter-spacing: .12em; color: var(--tcg-bronze); }
.cr-check input { accent-color: var(--tcg-bronze); }
.cr-gate-error, .cr-cfg-swatch, .cr-cfg-avatar { border-radius: 0; }
.cr-cfg-swatch, .cr-cfg-avatar { border-radius: 50%; }
.cr-table th {
    font-family: var(--tcg-sans); font-weight: 700; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--tcg-bronze); border-bottom: 1px solid var(--tcg-line-strong);
}
.cr-table td { border-bottom-color: var(--tcg-line-soft); }
.cr-table tbody tr:hover { background: rgba(197, 151, 104, .07); }
.cr-table .num { font-size: 1rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cr-table .pos { font-size: 1rem; }
.cr-table-dense th { font-size: .62rem; letter-spacing: .12em; }
.cr-table-empty { font-family: var(--tcg-sans); }

/* ---------- 10) Casca do painel logado ---------- */
.cr-ctx-bar { margin: 6px 0 16px; padding: 16px 22px; border-left-width: 1px; border-left-color: var(--tcg-line); }
.cr-ctx-name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .01em; text-transform: uppercase; }
.cr-ctx-sub { margin-top: 8px; }
.cr-panel-nav { padding: 16px 12px 14px; }
.cr-pn-label { font-weight: 700; font-size: .6rem; letter-spacing: .22em; color: var(--tcg-bronze); }
.cr-pn-group + .cr-pn-group { border-top-color: var(--tcg-line); }
.cr-pn-item { font-family: var(--font-body); font-weight: 500; font-size: .92rem; letter-spacing: .02em; border-radius: 0; }
.cr-pn-item:hover { background: rgba(197, 151, 104, .07); }
.cr-pn-item.active { color: var(--tcg-gold); background: rgba(197, 151, 104, .1); border-left-color: var(--tcg-bronze); }
.cr-pn-item .cr-ico { color: var(--tcg-bronze); }
.cr-pn-toggle { border-radius: 0; background: var(--tcg-panel); border-color: var(--tcg-line); font-family: var(--font-body); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.cr-pn-toggle-chev { color: var(--tcg-gold); }
.cr-quick-card b { font-family: var(--font-body); font-weight: 700; }
.cr-quick-card .cr-ico { color: var(--tcg-gold); }
.st-head, .st-onb-hero, .st-games-row { border-left-width: 3px; }
.cr-rules li::marker { color: var(--tcg-bronze); }
.cr-contrato-totals b { font-size: 1.2rem; white-space: nowrap; }
.cd-check { grid-template-columns: 36px minmax(0, 1fr); }
.cd-check > .cr-badge, .cd-check > .cr-btn { grid-column: 2; justify-self: start; }
.cr-notif-ico.is-new { color: var(--tcg-gold); border-color: var(--tcg-bronze); box-shadow: 0 0 0 3px rgba(197, 151, 104, .14); }

/* ---------- 11) Gráficos (ApexCharts) ---------- */
.apexcharts-tooltip.apexcharts-theme-dark { background: var(--tcg-panel-solid) !important; border: 1px solid rgba(197, 151, 104, .4) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); font-family: var(--tcg-sans); }
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: #100e15 !important; border-bottom: 1px solid rgba(197, 151, 104, .3) !important; }
.apexcharts-xaxistooltip { background: var(--tcg-panel-solid) !important; border-color: rgba(197, 151, 104, .4) !important; color: var(--text) !important; font-family: var(--tcg-sans); }
.apexcharts-xaxistooltip::before, .apexcharts-xaxistooltip::after { border-bottom-color: rgba(197, 151, 104, .4) !important; }
.cr-chart-empty { font-family: var(--tcg-sans); }

/* ---------- 12) Login, 404, menu mobile (fora da topbar) ---------- */
.cr-gate-title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; }
.cr-gate-features li::before { color: var(--tcg-gold); }
.notfound { padding: 70px 16px 60px; }
.notfound h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 9vw, 5.5rem); line-height: 1; }
.notfound p { max-width: 560px; margin: 8px auto 0; }
.mobile-nav { background: var(--tcg-panel-solid); border-left-color: var(--tcg-line); }
.mobile-nav-head { border-bottom-color: var(--tcg-line); }
.mobile-nav-title { letter-spacing: .04em; }
.mobile-nav-close { border-radius: 0; background: transparent; border-color: var(--tcg-line); }
.mobile-nav-link { border-radius: 0; }
.mobile-nav-link .mnl-name { font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: 0; }
.mobile-nav-link.active { border-color: var(--tcg-bronze); color: var(--tcg-gold); }
.mobile-nav-lang { border-radius: 0; }
.mobile-nav-lang.active { border-color: var(--tcg-bronze); color: var(--tcg-gold); }
.skip-link { background: var(--tcg-gold); }

/* ---------- 13) Responsivo ---------- */
@media (max-width: 900px) {
    .cr-hero, .cr-how-hero, .cr-live-hero { padding: 22px 0 14px; }
    .cr-hero-inner { gap: 24px; }
}
@media (max-width: 640px) {
    .cr-hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .cr-section-title { font-size: 1.35rem; }
    .cr-page-title { font-size: 1.5rem; }
    .cr-hero-kicker, .tcg-kicker { font-size: .6rem; letter-spacing: .26em; }
    .cr-hero-kicker::before, .cr-hero-kicker::after, .tcg-kicker::before, .tcg-kicker::after { width: 18px; }
    .cr-stat-value { font-size: 1.45rem; }
    .cr-ctx-name { font-size: 1.3rem; }
    .cr-card, .cr-card-flat { padding: 18px 18px; }
    .cr-hero-title::after, .cr-section-title::after, .cr-page-title::after { width: 140px; }
}