/* ========================================================================== ranking.theclassic.games — tema épico do hub (2026-09-08) Mesma receita do analytics (assets/css/tcg-epic.css de lá) e do pw144: 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 DEPOIS de app.css (tema Forge) e do bloco H51: só sobrescritas. Reverter = remover o , as divs .tcg-sky/.tcg-embers e os kickers/filetes das views. NÃO toca na topbar (pele H51) nem no footer (pele F27). A cor do jogo (--accent, injetada no ) continua nos dados: score, hover, ativo. Paleta dos gráficos ECharts: window.RK_THEME no _head.php (lida pelo app.js). ========================================================================== */ /* ---------- 0) Fontes ---------- TLHeader / TL / Duty vêm do bloco H51 do _head.php. Aqui: Amazon Ember (texto de apoio) e um alias de TLHeader para os pesos 600/700 apontando para o MESMO arquivo regular — o Forge usa "font-weight: 700" em quase todo número/título e sem isso o navegador sintetiza um negrito borrado. */ @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'); } @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-line: rgba(197, 151, 104, .32); --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); --bg: #0d0c10; --bg-soft: #100e15; --bg-2: #100e15; --bg-card: #15131a; --bg-card-hover: #1d1a24; --border: rgba(197, 151, 104, .32); --text: #efe9e0; --text-dim: #a99e93; --text-faint: #7a7064; --gold: #f4d2a1; --radius: 0; --font-display: 'TLHeader', Ellipsis, Times, 'Times New Roman', serif; --font-body: 'TL', Ellipsis, Times, 'Times New Roman', serif; } /* A topbar (pele H51, global da rede) redeclara as próprias vars; a busca dela usa --font-body, que fica na fonte original para o header não mudar. */ .topbar { --font-body: 'IBM Plex Sans', sans-serif; --bg-soft: #141416; } /* Texto em degradê dourado: títulos e os grandes números. Filhos com cor própria (em, moeda TCCE) redeclaram o fill. */ .hero h1, .section-title, .rank-header h1, .tw-hero h1, .conflict-hero h1, .clan-hero-id h1, .profile-id h2, .md-user-name, .md-login-title, .notfound h1, .total-card:not(.total-card-tcce) .total-value, .tc-stat-num, .tw-kpi-val, .conflict-stats .cs-value, .cc-kills strong, .hall-titles, .pp-batch:not(.has-prize-tcce) .pp-pool, .ub-pool-value, .detail-head .dh-score b { background: var(--tcg-gold-text); -webkit-background-clip: text; background-clip: text; color: #e0b878; -webkit-text-fill-color: transparent; } .hero h1 em, .tw-hero h1 em, .conflict-hero h1 em { color: inherit; -webkit-text-fill-color: transparent; } .tw-kpi-val small, .tw-kpi-val a, .tw-kpi-val a span { -webkit-text-fill-color: var(--text); } .tw-kpi-val small { -webkit-text-fill-color: var(--text-dim); } .total-card .total-value .cur-ico, .pp-pool .cur-ico { -webkit-text-fill-color: initial; } /* ---------- 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) Tipografia de apoio: texto pequeno em Amazon Ember ---------- */ .rh-desc, .rk-desc, .ap-desc, .tw-lead, .ch-lead, .md-login-text, .md-section-text, .md-login-hint, .total-sub, .empty-state, .tt-total, .tt-hint, .ref-note, .tc-hint, .hall-rk, .pp-when, .pp-rank-sub, .ap-deadline, .cc-meta, .ch-meta, .tw-panel-hint, .tw-meta, .chl-sub, .champ-score, .p-clan, .pc-sub, .si-sub, .gs-cat-label, .mobile-nav-label, .search-group, .cs-label, .tc-stat-label, .tw-kpi-lbl, .detail-title, .ap-class-note, .md-user-id, .cc-duration, .tw-tip-lbl, .tw-tip-stat-lbl, .ub-pool-label, .ub-recent-title, .ub-side-meta, .tc-count, .tc-reg-date, .tc-hist-date, .tc-champ-date, .tc-hall-record, .tc-timeline-date, .md-ref, .md-prize-label, .md-prize-none, .md-class-note, .di-pts, .di-pts-inline, .conflict-note, .cc-top-item, .pp-class, .ap-rules li, .ap-pool-item, .prize-totals .pt-label, .podium-title a, .hall-breakdown .bc-period, .champ-head .champ-rk, .wc-ref, .rk-meta, .rh-updated, .md-table th, .rank-table th, .conflict-table th, .tw-bids-week, .tw-bids-when, .tw-move-row, .tw-bids-row, .tw-score-row, .tw-clan-row, .tw-legend, .tw-week-label, .tw-updated, .ap-open, .prizes-switch-item, .pg-filter-item, .class-chip, .tag, .ds-chip, .di-task, .badge-chip, .game-chip, .conflict-type, .tc-chip, .ub-status, .gc-soon, .pb-unique, .ap-unique, .account-link, .account-id-tag, .pager button, .pager .pg-info, .pg-btn, .md-logout, .delta, .tab, .tcg-btn, .tw-moves-btn, .tw-select, .ref-bar select, .conflict-tools select, .table-tools input, .pp-search input, .tcg-hchip, .lang-menu, .search-results { font-family: var(--tcg-sans); } /* kicker (linha curta acima do título) + filete (tracinho dourado abaixo) */ .tcg-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tcg-bronze); } .tcg-kicker::before, .tcg-kicker::after { content: ""; flex: 0 0 auto; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--tcg-bronze)); } .tcg-kicker::after { background: linear-gradient(90deg, var(--tcg-bronze), transparent); } .tcg-filete { display: block; width: 186px; height: 4px; margin: 12px 0 14px; background: url(../img/tcg/dash.png) left center / contain no-repeat; } .tcg-filete-center { margin-left: auto; margin-right: auto; } /* ---------- 4) Heros centralizados (home, hall, premiações, meus dados) ---------- */ .hero { display: flex; flex-direction: column; align-items: center; padding: 36px 16px 22px; } .hero h1 { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; } .hero .tcg-filete { margin: 12px auto; } .hero p { margin: 0 auto; max-width: 640px; font-family: var(--font-body); font-weight: 500; font-size: .98rem; color: var(--text-dim); } .prizes-hero .prizes-switch { margin-top: 16px; } .md-hero .md-user { width: 100%; max-width: 760px; text-align: left; } /* ---------- 5) Títulos de seção: centralizados, dourados, com filete ---------- */ .section-title { justify-content: center; text-align: center; margin: 30px 0 16px; gap: 10px 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: .02em; } .section-title::after { content: ""; flex: 0 0 100%; min-width: 0; height: 4px; margin-top: 4px; background: url(../img/tcg/dash.png) center top / 186px 4px no-repeat; } .section-title .title-logo, .section-title .game-cite-logo { width: 30px; height: 30px; } .section-sub { font-family: var(--tcg-sans); font-weight: 700; font-size: .7rem; letter-spacing: .2em; color: var(--tcg-bronze); margin: 20px 0 10px; } /* ---------- 6) Molduras bronze com cantos dourados ---------- */ .card, .game-sidenav, .tw-kpi, .rk-card, .game-card, .pvp-list, .chart-box, .clan-stat, .ph-item, .account-char, .account-badge-row, .badge-medal, .conflict-stats .cs-item, .tc-match, .ub-side, .ub-pool, .ap-leaders, .prize-banner, .conflicts-filter-banner, .modal-card, .tw-tooltip, .detail-card, .tc-reg-item, .tw-tip-stat, .member-card { background: var(--tcg-panel); border: 1px solid var(--tcg-line); border-radius: 0; } .card, .game-sidenav, .tw-kpi, .game-card, .modal-card { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); } .card, .game-sidenav, .tw-kpi, .game-card { position: relative; } .card::before, .game-sidenav::before, .tw-kpi::before, .game-card::before, .card::after, .game-sidenav::after, .tw-kpi::after, .game-card::after { content: ""; position: absolute; inset: auto; width: 31px; height: 28px; pointer-events: none; z-index: 1; background: none; } .card::before, .game-sidenav::before, .tw-kpi::before, .game-card::before { left: -1px; top: -1px; background: url(../img/tcg/corner-tl.png) no-repeat; } .card::after, .game-sidenav::after, .tw-kpi::after, .game-card::after { right: -1px; bottom: -1px; background: url(../img/tcg/corner-br.png) no-repeat; } /* listas e cards pequenos ficam sem cantos (ruído); cards com overflow escondido usam deslocamento 0 (a borda opaca do PNG seria cortada) */ .pp-batch::before, .pp-batch::after, .ap-card::before, .ap-card::after, .conflict-card::before, .conflict-card::after, .member-card::before, .member-card::after, .tc-champ-card::before, .tc-champ-card::after, .md-char-card::before, .md-char-card::after, .md-dispute::before, .md-dispute::after, .winner-card::before, .winner-card::after, .champ-card::before, .champ-card::after, .table-card::before, .table-card::after, .tc-empty::before, .tc-empty::after { display: none; } .card[style*="overflow"]::before, .modal-card::before { left: 0; top: 0; } .card[style*="overflow"]::after, .modal-card::after { right: 0; bottom: 0; } .total-card::before { left: -1px; top: -1px; width: 31px; height: 28px; background: url(../img/tcg/corner-tl.png) no-repeat; } .total-card-tcce::before { background: url(../img/tcg/corner-tl.png) no-repeat; } .total-card-tcce { border-color: rgba(94, 200, 168, .45); } .game-card:hover, .rk-card:hover, .member-card:hover, .champ-card:hover, .account-char:hover, .badge-medal:hover, .conflict-card:hover, .account-badge-row:hover { border-color: var(--tcg-bronze); background: var(--bg-card-hover); } .game-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(197, 151, 104, .12); } .rk-card.has-bg:hover { filter: none; } .pp-batch { border-left-width: 3px; } .tc-champ-card { border-top-color: var(--tcg-gold); } .md-char-card, .account-title-row { border-left-width: 3px; } .conflict-stats { gap: 1px; background: var(--tcg-line); border-color: var(--tcg-line); border-radius: 0; } .modal-card { background: var(--tcg-panel-solid); } .md-login { padding: 34px 28px; } /* ---------- 7) Cards de jogo (home / hall) ---------- */ .game-card { padding: 26px 22px 24px; } .game-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; } .game-card .gc-sub { margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tcg-bronze); } .game-card .gc-count { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; height: 34px; padding: 0 18px; border: 1px solid var(--tcg-line-strong); color: var(--tcg-gold); font-family: var(--tcg-sans); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; transition: background .15s, border-color .15s; } .game-card:hover .gc-count { background: rgba(197, 151, 104, .12); border-color: var(--tcg-gold); } .game-card--soon:hover { border-color: var(--tcg-line); background: var(--tcg-panel); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); } .gc-soon { border-radius: 0; background: rgba(0, 0, 0, .45); } /* pódio da home + hall */ .podium-card { padding: 18px 20px; } .podium-title h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; color: var(--tcg-cream); text-transform: uppercase; } .podium-title a { font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tcg-gold); } .podium-row { border-radius: 0; } .podium-row:hover, .hall-row:hover { background: rgba(197, 151, 104, .07); } .podium-pos, .pos-cell, .pp-pos, .ap-leader-pos, .ctc-pos, .tw-pos { font-family: var(--font-display); font-weight: 400; } .podium-row .p-score, .hall-titles, .rank-table .col-score, .winner-card .wc-row .wc-score, .member-card .mc-best, .ctc-kills, .cf-kills, .pvp-row .pr-kills, .md-score, .tc-score-badge { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; } .hall-row { border-bottom-color: rgba(197, 151, 104, .16); } .hall-row .p-name, .podium-row .p-name, .pp-player, .ap-leader-name, .rk-card .rk-name, .ap-name, .pp-rank-name, .detail-head .dh-name, .player-cell .pc-name, .tc-player-name, .md-char-name { font-family: var(--font-body); font-weight: 700; color: var(--tcg-cream); } .hall-breakdown .bc-period { border-radius: 0; } .hall-titles { font-size: 1.35rem; } .champ-card { padding: 14px 16px; } /* ---------- 8) Sidenav de rankings ---------- */ .game-sidenav { padding: 14px 10px 18px; } .game-sidenav .gs-title { border-bottom-color: var(--tcg-line); } .game-sidenav .gs-title-text { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; } .game-sidenav .gs-overview, .mobile-nav .gs-overview { border-radius: 0; font-family: var(--tcg-sans); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; } .game-sidenav .gs-overview.active { color: var(--tcg-gold); border-color: var(--tcg-line-strong); background: rgba(197, 151, 104, .08); } .game-sidenav .gs-cat-label, .mobile-nav .gs-cat-label { font-family: var(--tcg-sans); font-weight: 700; font-size: .6rem; letter-spacing: .22em; color: var(--tcg-bronze); } .game-sidenav .gs-link { border-radius: 0; font-family: var(--font-body); font-weight: 500; } .game-sidenav .gs-link.active { color: var(--tcg-gold); border-color: var(--tcg-line-strong); background: rgba(197, 151, 104, .08); box-shadow: inset 3px 0 0 var(--tcg-bronze); } .mobile-nav .gs-link.active { color: var(--tcg-gold); border-left-color: var(--tcg-bronze); } /* ---------- 9) Grade de rankings (página do jogo) ---------- */ .rk-card { padding: 16px; } .rk-icon { border-radius: 0; background: rgba(0, 0, 0, .45); border: 1px solid var(--tcg-line); } .rk-card .rk-name { font-size: .95rem; } .tag { border-radius: 0; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border-color: var(--tcg-line); } .tag.prize { border-color: var(--tcg-gold); color: var(--tcg-gold); } .rk-card.has-prize-tcc { border-color: rgba(244, 210, 161, .55); box-shadow: 0 0 0 1px rgba(244, 210, 161, .14), inset 0 0 28px rgba(197, 151, 104, .06); } .rk-card.has-prize:hover { border-color: var(--tcg-gold); } /* ---------- 10) Página do ranking: cabeçalho, banner de prêmio, abas, tabela ---------- */ .rank-header { padding: 22px 24px; gap: 18px 22px; } .rank-header .rk-icon { width: 64px; height: 64px; } .rank-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; } .rank-header .rh-desc { max-width: 60ch; } .rank-header .rh-updated { color: var(--text-dim); } .prize-banner { border-color: rgba(244, 210, 161, .45); background: rgba(197, 151, 104, .08); padding: 12px 18px; } .prize-banner .pb-title { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tcg-gold); } .prize-banner .pb-rules { font-family: var(--tcg-sans); } .prize-banner .pb-countdown { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--tcg-gold); } .pb-unique, .ap-unique { border-radius: 0; border-color: rgba(244, 210, 161, .45); } .tabs { gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--tcg-line); } .tab { padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-dim); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .tab:hover { color: var(--tcg-gold); background: transparent; border-bottom-color: rgba(197, 151, 104, .4); } .tab.active { color: var(--tcg-gold); background: transparent; border-color: transparent; border-bottom-color: var(--tcg-bronze); } .tab.has-prize-tcc:not(.active), .tab.has-prize-tcce:not(.active):not(.has-prize-tcc), .tab.has-prize-tcc.has-prize-tcce:not(.active) { background: transparent; border-color: transparent; box-shadow: none; } .tab.has-prize-tcc:not(.active) { color: var(--tcg-gold); } .badge-tabs { border-bottom: 0; } .badge-tabs .tab { padding: 6px 10px; font-size: .62rem; } .badge-tabs .tab-n, .conflict-tabs .tab .tab-n, .profile-section h3 .tab-n { border-radius: 0; background: rgba(197, 151, 104, .14); } .conflict-tabs .tab { border: 0; border-bottom: 2px solid transparent; background: transparent; } .conflict-tabs .tab.active { border-bottom-color: var(--tcg-bronze); } .table-tools input, .pp-search input[type="search"], .ref-bar select, .tw-select, .conflict-tools select { border-radius: 0; background: rgba(0, 0, 0, .45); border: 1px solid var(--tcg-line); color: var(--text); font-size: .82rem; } .table-tools input:focus, .pp-search input[type="search"]:focus, .ref-bar select:focus, .conflict-tools select:focus { border-color: var(--tcg-bronze); box-shadow: 0 0 0 3px rgba(197, 151, 104, .14); } .class-filter { gap: 6px; } .class-chip { border-radius: 0; background: rgba(0, 0, 0, .35); border-color: var(--tcg-line); font-size: .74rem; } .class-chip:hover { border-color: var(--tcg-bronze); } .class-chip.active { border-color: var(--tcg-bronze); color: var(--tcg-gold); background: rgba(197, 151, 104, .1); } .rank-table th, .md-table th, .conflict-table th { font-weight: 700; font-size: .66rem; letter-spacing: .16em; color: var(--tcg-bronze); border-bottom: 1px solid var(--tcg-line-strong); } .rank-table td, .md-table td { border-bottom-color: rgba(197, 151, 104, .14); } .rank-table tbody tr:hover, .md-table tbody tr:hover { background: rgba(197, 151, 104, .07); } .rank-table .col-score { font-size: 1.05rem; } .pos-cell { font-size: 1.05rem; } .pos-gold { text-shadow: 0 0 12px rgba(244, 210, 161, .45); } tr.row-top1 { background: linear-gradient(90deg, rgba(244, 210, 161, .1), transparent 60%); } th.sortable.sorted-asc::after, th.sortable.sorted-desc::after { color: var(--tcg-gold); } .rank-table .pc-prize { border-radius: 0; font-family: var(--font-display); font-weight: 400; } .detail-card { border-left: 3px solid var(--tcg-bronze); background: rgba(197, 151, 104, .05); border-top: 0; border-right: 0; border-bottom: 0; } .ds-chip, .di-task { border-radius: 0; background: rgba(0, 0, 0, .35); } .di-item img { border-radius: 0; } .di-qty { border-radius: 0; background: var(--tcg-gold); } .pager button, .pg-btn, .pager .pg-btn, .md-logout { border-radius: 0; background: transparent; border: 1px solid var(--tcg-line-strong); color: var(--tcg-gold); font-weight: 700; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: 8px 16px; transition: background .15s, border-color .15s; } .pager button:hover:not(:disabled), .pg-btn:hover, .md-logout:hover { background: rgba(197, 151, 104, .12); border-color: var(--tcg-gold); color: var(--tcg-gold); } .md-logout:hover { color: #ff9d9d; border-color: rgba(200, 60, 60, .5); background: transparent; } .winners-grid { gap: 12px; } .winner-card .wc-ref { font-weight: 700; letter-spacing: .14em; color: var(--tcg-bronze); } /* botão dourado reto (404, login do Meus dados) */ .tcg-btn, .md-login-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; height: 42px; padding: 0 22px; border: 0; border-radius: 0; font-family: var(--font-body); font-weight: 700; font-size: .74rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #1d150c; background: linear-gradient(180deg, #f4d2a1, #c59768); box-shadow: 0 0 14px rgba(197, 151, 104, .22); cursor: pointer; } .tcg-btn:hover, .md-login-btn:hover { filter: brightness(1.08); } /* ---------- 11) Hub de premiações + transparência + Meus dados ---------- */ .prizes-switch-item { border-radius: 0; background: rgba(0, 0, 0, .35); border-color: var(--tcg-line); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .prizes-switch-item:hover { border-color: var(--tcg-bronze); color: var(--tcg-gold); } .prizes-switch-item.active { color: #1d150c; background: linear-gradient(180deg, #f4d2a1, #c59768); border-color: var(--tcg-gold); } .pg-filter-item { border-radius: 0; background: rgba(0, 0, 0, .35); border-color: var(--tcg-line); font-weight: 700; font-size: .72rem; } .pg-filter-item:hover { border-color: var(--tcg-bronze); } .pg-filter-item.active { border-color: var(--tcg-gold); box-shadow: inset 0 -2px 0 var(--tcg-gold); color: var(--tcg-cream); } .total-card { padding: 22px 24px; } .total-card .total-value { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; letter-spacing: .02em; } .total-card .total-label { font-family: var(--font-body); font-weight: 500; font-size: .84rem; margin-top: 8px; } .pp-batch-head { background: linear-gradient(90deg, rgba(197, 151, 104, .1), transparent 55%); border-bottom-color: var(--tcg-line); } .pp-pool, .pp-amt, .ap-countdown, .ap-pool-item strong, .ap-leader-prize-item, .ap-leader-score, .prize-total { font-family: var(--font-display); font-weight: 400; } .pp-pool { font-size: 1.4rem; } .pp-winner { border-bottom-color: rgba(197, 151, 104, .08); } .pp-winner:hover, .ap-leader:hover { background: rgba(197, 151, 104, .07); } .pp-class-sep { border-top-color: var(--tcg-line); } .ap-head { border-bottom-color: var(--tcg-line); } .ap-head:hover { background: rgba(197, 151, 104, .07); } .ap-period { border-bottom-color: rgba(197, 151, 104, .1); } .ap-leaders { background: rgba(197, 151, 104, .07); border-color: rgba(197, 151, 104, .22); } .ap-leaders-label { letter-spacing: .16em; } .ap-game-count { border-radius: 0; background: rgba(197, 151, 104, .16); } .prize-total { border-radius: 0; background: rgba(197, 151, 104, .08); border-color: rgba(197, 151, 104, .35); } .md-login-title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; text-transform: uppercase; } .md-login-error { border-radius: 0; } .md-user-name { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: .01em; text-transform: uppercase; } .md-game-title { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tcg-gold); } .md-game-title img { width: 26px; height: 26px; } .md-table th { border-bottom-color: var(--tcg-line); } .md-row-prize { background: rgba(197, 151, 104, .07); } .md-dispute.md-winning { border-color: rgba(244, 210, 161, .55); box-shadow: 0 0 0 1px rgba(244, 210, 161, .2), 0 6px 22px rgba(0, 0, 0, .35); } .md-char-card { border-left-color: var(--tcg-bronze); } .account-link { border-radius: 0; } /* ---------- 12) Perfil do jogador / clã (modal e página) ---------- */ .modal-close { background: rgba(0, 0, 0, .55); } .profile-banner { background: linear-gradient(120deg, #1d1a24, #0d0c10); } .profile-id h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .01em; text-transform: uppercase; } .profile-id .pi-sub { font-family: var(--tcg-sans); } .profile-section h3 { font-family: var(--tcg-sans); font-weight: 700; font-size: .66rem; letter-spacing: .2em; color: var(--tcg-bronze); border-bottom: 1px solid var(--tcg-line); padding-bottom: 8px; } .badge-chip { border-radius: 0; background: rgba(0, 0, 0, .35); font-family: var(--tcg-sans); } .badge-chip .bc-pos, .badge-medal .bm-pos { font-family: var(--font-display); font-weight: 400; } .badge-medal { background: rgba(0, 0, 0, .35); } .pvp-list { background: rgba(0, 0, 0, .28); padding: 12px 14px; } .pvp-list h4 { font-family: var(--tcg-sans); font-weight: 700; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tcg-bronze); } .chart-box { background: rgba(0, 0, 0, .28); } .clan-hero { background: radial-gradient(600px 200px at 0% 0%, rgba(197, 151, 104, .14), transparent); } .clan-hero-id h1 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: .01em; text-transform: uppercase; } .clan-hero-id .chi-sub { font-family: var(--tcg-sans); } .clan-stat { background: rgba(0, 0, 0, .28); } .clan-stat .cs-value { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--tcg-gold); } .clan-stat .cs-label { font-family: var(--tcg-sans); } .member-card .mc-class { font-family: var(--tcg-sans); } .mc-medals .mm { font-family: var(--font-display); font-weight: 400; } .account-char .ac-best, .account-pvp-kpi b { font-family: var(--font-display); font-weight: 400; } /* ---------- 13) Disputa Territorial, TOP Classe, Apostas ---------- */ .tw-hero, .tc-hero { padding: 22px 24px; } .tw-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: .01em; text-transform: uppercase; } .tw-hero-meta { font-family: var(--tcg-sans); } .tw-hero .rk-icon.tw-hero-ico { width: 64px; height: 64px; } .tw-kpi { padding: 12px 14px; } .tw-kpi-lbl { font-weight: 700; font-size: .58rem; letter-spacing: .08em; color: var(--tcg-bronze); white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } .tw-kpi-val { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; } .tw-toolbar { padding: 12px 16px; } .tw-select, .tw-moves-btn { border-radius: 0; background: rgba(0, 0, 0, .45); border-color: var(--tcg-line); } .tw-map-wrap { border-radius: 0; } .tw-panel-title { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tcg-gold); } .tw-pts, .tw-tip-stat-val, .tw-tip-name { font-family: var(--font-display); font-weight: 400; } .tw-tip-name { font-size: 1.15rem; letter-spacing: .03em; } .tw-tooltip { background: rgba(14, 12, 19, .97); border-color: var(--tcg-line-strong); } .tw-tip-owner { border-radius: 0; } .tw-tip-stat { background: rgba(0, 0, 0, .3); } .tw-score-row, .tw-clan-row, .tw-move-row, .tw-bids-row { border-bottom-color: rgba(197, 151, 104, .1); } .tw-bids-week { color: var(--tcg-bronze); font-weight: 700; letter-spacing: .14em; } .tc-stat { padding: 14px 10px; } .tc-stat-num { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; } .tc-stat-label { font-weight: 700; letter-spacing: .14em; color: var(--tcg-bronze); } .tc-round-title { font-family: var(--font-display); font-weight: 400; color: var(--tcg-gold); } .tc-match { border-radius: 0; background: rgba(0, 0, 0, .28); } .tc-match.tc-done { border-color: rgba(197, 151, 104, .45); } .tc-match-head { font-family: var(--tcg-sans); border-bottom-color: rgba(197, 151, 104, .12); } .tc-side-win { background: rgba(197, 151, 104, .12); } .tc-score-badge { border-radius: 0; background: rgba(0, 0, 0, .35); } .tc-side-win .tc-score-badge { color: var(--tcg-gold); border-color: var(--tcg-bronze); } .tc-class-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tcg-cream); } .tc-reg-item { border-radius: 0; } .tc-chip, .ub-status { border-radius: 0; } .tc-chip-title { color: var(--tcg-gold); border-color: var(--tcg-bronze); } .tc-champ-class { font-family: var(--font-display); font-weight: 400; } .tc-hall-row, .tc-timeline-row { border-bottom-color: rgba(197, 151, 104, .1); } .ub-bet-name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; text-transform: uppercase; } .ub-side { border-radius: 0; background: rgba(0, 0, 0, .28); } .ub-side-name { font-family: var(--font-display); font-weight: 400; } .ub-pool { border-radius: 0; background: rgba(197, 151, 104, .08); border-color: rgba(197, 151, 104, .25); } .ub-pool-value { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; } .ub-vs-mid { font-family: var(--font-display); font-weight: 400; } .ub-share, .ub-share-fill { border-radius: 0; } .ub-recent-row { border-bottom-color: rgba(197, 151, 104, .1); } /* ---------- 14) Conflitos PvP + Mini-TW ---------- */ .conflict-hero { padding: 20px 24px; } .conflict-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: .01em; text-transform: uppercase; } .conflict-hero .ch-icon { width: 56px; height: 56px; } .conflict-hero .ch-back { font-family: var(--tcg-sans); } .conflict-hero .ch-back:hover { color: var(--tcg-gold); } .conflict-stats .cs-item { padding: 14px 10px; border: 0; } .conflict-stats .cs-value { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; } .conflict-stats .cs-label { font-weight: 700; letter-spacing: .14em; color: var(--tcg-bronze); } .conflicts-filter-banner { background: rgba(197, 151, 104, .08); border-color: rgba(197, 151, 104, .28); font-family: var(--tcg-sans); } .conflicts-filter-banner a { color: var(--tcg-gold); } .conflict-type { border-radius: 0; } .conflict-card { padding: 16px 18px; } .conflict-card:hover { border-color: var(--tcg-bronze); } .cc-date, .cc-winner-row strong, .cc-top-pos { font-family: var(--font-display); font-weight: 400; } .cc-date { font-size: 1.1rem; } .cc-kills strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; } .cc-kicker, .chl-kicker { font-family: var(--tcg-sans); font-weight: 700; font-size: .62rem; letter-spacing: .2em; color: var(--tcg-bronze); } .chl-winner .chl-kicker { color: var(--tcg-gold); } .chl-name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: .02em; } .chl-card { padding: 16px 18px; } .ctc-row { border-radius: 0; } .ctc-row:hover { background: rgba(197, 151, 104, .07); } .ctc-bar-wrap, .ctc-bar, .share-bar, .share-bar > span, .ub-share { border-radius: 0; } .ctc-bar, .share-bar > span { background: linear-gradient(90deg, var(--tcg-bronze), var(--tcg-gold)); } .cf-row { border-bottom-color: rgba(197, 151, 104, .1); font-family: var(--tcg-sans); } .cf-n { font-family: var(--font-display); } a.conflict-row { border-radius: 0; } a.conflict-row:hover { background: rgba(197, 151, 104, .07); } /* ---------- 15) 404 ---------- */ .notfound { padding: 70px 16px 60px; display: flex; flex-direction: column; align-items: center; } .notfound h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; } .notfound p { font-family: var(--font-body); font-weight: 500; color: var(--text-dim); max-width: 520px; } .notfound .tcg-filete { margin: 14px auto; } .notfound-cta { margin-top: 22px; } /* ---------- 16) Menu mobile (drawer do site, fora da topbar) ---------- */ .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 { font-family: var(--font-display); font-weight: 400; 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 .mnl-full { font-family: var(--tcg-sans); } /* ---------- 17) Responsivo ---------- */ @media (max-width: 640px) { .hero h1 { font-size: 2rem; } .section-title { font-size: 1.4rem; } .tabs { gap: 0; } .tab { padding: 10px 9px; font-size: .62rem; letter-spacing: .1em; } .tcg-kicker { font-size: .6rem; letter-spacing: .26em; } .tcg-kicker::before, .tcg-kicker::after { width: 18px; } .total-card .total-value { font-size: 1.9rem; } }