/* ============================================================================ The Classic Rankings — tema Forge (metal / cobre) ========================================================================== */ :root { --bg: #0c0c0e; --bg-soft: #141416; --bg-card: #1a1a1e; --bg-card-hover: #24242a; --border: #33333c; --text: #ece8e1; --text-dim: #9a948a; --text-faint: #666058; --accent: #d4894a; /* sobrescrita por jogo no */ --gold: #e8b043; --tcce: #5ec8a8; /* The Classic Coins Event */ --silver: #b8b4ae; --bronze: #a0673a; --danger: #d64545; --success: #6bbf6b; --radius: 2px; --font-display: 'Teko', sans-serif; --font-body: 'IBM Plex Sans', sans-serif; --sidenav-width: 220px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); background-image: linear-gradient(180deg, rgba(212, 137, 74, .05), transparent 28%), repeating-linear-gradient( 90deg, transparent, transparent 80px, rgba(255, 255, 255, .012) 80px, rgba(255, 255, 255, .012) 81px ); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } main, .game-main { flex: 1; width: 100%; padding: 24px 16px 48px; min-width: 0; } .container { max-width: 1180px; margin: 0 auto; width: 100%; } .container.game-layout { max-width: 1280px; } /* ---------------- topbar ---------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(12, 12, 14, .96); backdrop-filter: blur(8px); border-bottom: 2px solid rgba(212, 137, 74, .4); } .topbar-inner { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); white-space: nowrap; flex: none; } .brand-logo { width: 40px; height: 40px; object-fit: contain; flex: none; display: block; } .brand-text { display: flex; align-items: baseline; gap: 7px; } .brand-main { font-size: 24px; font-weight: 700; letter-spacing: 2px; } .brand-sub { font-size: 15px; font-weight: 600; letter-spacing: 5px; color: var(--accent); } .topnav { display: flex; gap: 4px; min-width: 0; align-items: center; } .topnav-item { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 6px; color: var(--text-dim); border: 1px solid transparent; transition: all .15s; flex: none; } .topnav-item .nav-logo, .mobile-nav-link .nav-logo { width: 28px; height: 28px; object-fit: contain; filter: saturate(.4); transition: filter .15s; flex: none; } .topnav-item:hover .nav-logo, .topnav-item.active .nav-logo, .mobile-nav-link:hover .nav-logo, .mobile-nav-link.active .nav-logo { filter: none; } .topnav-item:hover { color: var(--text); background: var(--bg-card); border-color: var(--border); } .topnav-item.active { border-color: var(--game-color, var(--accent)); background: var(--bg-card); } .topnav-item.topnav-premios { position: relative; border-color: rgba(232, 176, 67, .45); background: rgba(232, 176, 67, .08); } .topnav-item.topnav-premios .nav-tcc { filter: none; width: 30px; height: 30px; } .topnav-item.topnav-premios:hover, .topnav-item.topnav-premios.active { border-color: var(--gold); background: rgba(232, 176, 67, .16); } .hot-pill { position: absolute; top: -4px; right: -6px; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .8px; line-height: 1; padding: 3px 5px; border-radius: 8px; color: #1a1204; background: linear-gradient(135deg, #ffb347, #e8b043 55%, #f0d078); box-shadow: 0 0 0 1px rgba(232, 176, 67, .55), 0 0 10px rgba(232, 176, 67, .45); animation: hot-pulse 1.6s ease-in-out infinite; } @keyframes hot-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(232, 176, 67, .55), 0 0 8px rgba(232, 176, 67, .35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(232, 176, 67, .7), 0 0 14px rgba(232, 176, 67, .65); } } .topnav-item.nav-text-fallback { width: auto; min-width: 40px; padding: 6px 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .5px; } .topnav-item .nav-chip-text { line-height: 1; } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } .nav-toggle { display: none; width: 40px; height: 40px; padding: 0; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-toggle:hover { border-color: var(--accent); } .nav-toggle-bar { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; } .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* menu mobile (drawer) */ .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s; } .mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(340px, 88vw); background: var(--bg-soft); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s ease; box-shadow: -12px 0 40px rgba(0, 0, 0, .45); } .mobile-nav.open { transform: translateX(0); } .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; } .mobile-nav-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; } .mobile-nav-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; } .mobile-nav-close:hover { border-color: var(--accent); color: var(--accent); } .mobile-nav-body { overflow-y: auto; padding: 8px 12px 28px; flex: 1; } .mobile-nav-section { margin-top: 14px; } .mobile-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); padding: 4px 10px 8px; } .mobile-nav-list { display: flex; flex-direction: column; gap: 4px; } .mobile-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; color: var(--text); background: transparent; transition: background .15s, border-color .15s; } .mobile-nav-link:hover { background: var(--bg-card); } .mobile-nav-link.active { background: var(--bg-card); border-color: var(--game-color, var(--accent)); color: var(--game-color, var(--accent)); } .mobile-nav-link .mnl-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .mobile-nav-link .mnl-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .4px; } .mobile-nav-link .mnl-full { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.nav-open { overflow: hidden; } /* scrollbars escuras (menu, busca, sidenav, resumo) — evita a barra nativa "sem tema" */ .game-sidenav, .mobile-nav-body, .search-results, .chl-summary-text { scrollbar-width: thin; scrollbar-color: #4a453c transparent; } .game-sidenav::-webkit-scrollbar, .mobile-nav-body::-webkit-scrollbar, .search-results::-webkit-scrollbar, .chl-summary-text::-webkit-scrollbar { width: 8px; height: 8px; } .game-sidenav::-webkit-scrollbar-track, .mobile-nav-body::-webkit-scrollbar-track, .search-results::-webkit-scrollbar-track, .chl-summary-text::-webkit-scrollbar-track { background: transparent; } .game-sidenav::-webkit-scrollbar-thumb, .mobile-nav-body::-webkit-scrollbar-thumb, .search-results::-webkit-scrollbar-thumb, .chl-summary-text::-webkit-scrollbar-thumb { background: #3a3630; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .game-sidenav::-webkit-scrollbar-thumb:hover, .mobile-nav-body::-webkit-scrollbar-thumb:hover, .search-results::-webkit-scrollbar-thumb:hover, .chl-summary-text::-webkit-scrollbar-thumb:hover { background: #5a5348; background-clip: padding-box; } .game-sidenav::-webkit-scrollbar-corner, .mobile-nav-body::-webkit-scrollbar-corner, .search-results::-webkit-scrollbar-corner, .chl-summary-text::-webkit-scrollbar-corner { background: transparent; } /* ---------------- busca ---------------- */ .search-box { position: relative; width: min(320px, 36vw); } .search-box input { width: 100%; padding: 8px 14px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .15s; } .search-box input:focus { border-color: var(--accent); } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: none; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); max-height: 60vh; overflow-y: auto; } .search-results.open { display: block; } .search-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; } .search-item:hover { background: var(--bg-card-hover); } .search-item .si-name { font-weight: 600; } .search-item .si-sub { font-size: 12px; color: var(--text-dim); } .search-item .si-game { width: auto; height: 18px; margin-left: auto; flex: none; object-fit: contain; opacity: .9; } .search-item .si-game-txt { margin-left: auto; flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; } .search-group { padding: 6px 12px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); } .search-empty { padding: 12px; color: var(--text-dim); font-size: 13px; text-align: center; } /* ---------------- detalhe expandivel da linha do ranking ---------------- */ .rank-table tr.row-open > td { background: rgba(255, 255, 255, .03); } .rank-table tr.detail-row:hover > td { background: rgba(255, 255, 255, .015); } .detail-row > td { padding: 0 !important; border-bottom: 1px solid var(--border); } .detail-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .015); cursor: default; animation: detail-in .18s ease; } @keyframes detail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .detail-head .dh-id { min-width: 0; } .detail-head .dh-name { font-weight: 700; font-size: 16px; cursor: pointer; display: inline-block; } .detail-head .dh-name:hover { color: var(--accent); text-decoration: underline; } .detail-head .dh-sub { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; } .detail-head .dh-score { margin-left: auto; text-align: right; } .detail-head .dh-score b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent); line-height: 1.1; } .detail-head .dh-score span { font-size: 11px; color: var(--text-faint); } .detail-stats { display: flex; gap: 8px; flex-wrap: wrap; } .ds-chip { padding: 4px 12px; border-radius: 16px; font-size: 12px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); } .ds-chip b { color: var(--text); } .profile-stats { margin-bottom: 12px; } .profile-highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .ph-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .ph-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .ph-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; } .ph-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; font-family: var(--font-display); } .detail-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); } .di-grid { display: flex; flex-wrap: wrap; gap: 12px 10px; } .di-item { position: relative; width: 48px; text-align: center; } .di-item img { width: 42px; height: 42px; object-fit: contain; padding: 3px; background: rgba(0, 0, 0, .35); border: 1px solid var(--border); border-radius: 8px; } .di-qty { position: absolute; top: -7px; right: -4px; padding: 1px 6px; border-radius: 10px; background: var(--accent); color: #0b0e14; font-size: 10px; font-weight: 700; } .di-pts { display: block; font-size: 10px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; } .di-task { padding: 6px 12px; border-radius: 8px; font-size: 12px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); } .di-task b { color: var(--text); } .di-pts-inline { color: var(--text-faint); font-size: 11px; } /* area reservada do perfil: nome/avatar destacam no hover */ .rank-table .pc-name { cursor: pointer; display: inline-block; } .rank-table .pc-name:hover { color: var(--accent); text-decoration: underline; } .rank-table .pc-name-row, .rank-table .clan-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .rank-table .pc-prizes { display: inline-flex; align-items: center; gap: 5px; flex: none; } .rank-table .pc-prize { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; background: rgba(232, 176, 67, .12); border: 1px solid rgba(232, 176, 67, .4); font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--gold); line-height: 1.2; white-space: nowrap; } .rank-table .pc-prize .cur-ico { width: 16px; height: 16px; object-fit: contain; } .rank-table .pc-prize b { font-weight: 700; } /* ---------------- avatares / emblemas ---------------- */ .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--border); flex: none; } .avatar.lg { width: 84px; height: 84px; border-width: 2px; } .avatar.md { width: 52px; height: 52px; } .emblem { width: 20px; height: 20px; object-fit: contain; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; } .emblem.lg { width: 56px; height: 56px; } .emblem.sm { width: 15px; height: 15px; } a.p-clan:hover { color: var(--accent); } /* ---------------- cards / secoes ---------------- */ .card { background: linear-gradient(180deg, #1e1e24, var(--bg-card)); border: 1px solid #3a3a44; border-radius: var(--radius); } .section-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); min-width: 40px; } .section-title .title-logo, .section-title .game-cite-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; } /* citacao de jogo (logo + nome) — usar sempre que um jogo for mencionado */ .game-cite { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .game-cite-logo { width: 22px; height: 22px; object-fit: contain; flex: none; } .game-cite-name { line-height: 1.1; } .game-cite-link { color: inherit; text-decoration: none; } .game-cite-link:hover .game-cite-name { color: var(--accent); text-decoration: underline; } .game-cite-chip { padding: 3px 10px 3px 6px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-soft); text-transform: none; letter-spacing: 0; } .game-cite-chip .game-cite-logo { width: 18px; height: 18px; } .mobile-nav-label .game-cite { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; } .mobile-nav-label .game-cite-logo { width: 18px; height: 18px; } .rh-updated .game-cite-logo { width: 20px; height: 20px; } .pi-sub .game-cite-logo, .chi-sub .game-cite-logo { width: 18px; height: 18px; } /* ---------------- hero (home) ---------------- */ .hero { text-align: center; padding: 44px 16px 30px; } .hero h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p { color: var(--text-dim); max-width: 620px; margin: 10px auto 0; } .game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .game-card { display: block; padding: 26px 24px; position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(145deg, var(--bg-card), var(--bg-soft)); transition: transform .15s, border-color .15s; } .game-card:hover { transform: translateY(-3px); border-color: var(--gc, var(--accent)); } .game-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gc, var(--accent)); } .game-card h3 { font-family: var(--font-display); font-size: 24px; letter-spacing: 1px; } .game-card .gc-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; } .game-card .gc-count { margin-top: 14px; font-size: 13px; color: var(--gc, var(--accent)); font-weight: 600; } /* selecao de jogo com logo oficial */ .hero-compact { padding: 30px 16px 22px; } .game-card { text-align: center; } .game-card .game-logo { width: min(230px, 60%); max-height: 230px; object-fit: contain; display: block; margin: 0 auto 6px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); transition: transform .18s; } .game-card:hover .game-logo { transform: scale(1.04); } /* hero da pagina do jogo com logo */ .game-hero-logo { width: min(200px, 50%); max-height: 200px; object-fit: contain; display: block; margin: 0 auto 4px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); } /* podio de destaque */ .featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .podium-card { padding: 18px; } .podium-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .podium-title h4 { font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; } .podium-title a { font-size: 12px; color: var(--accent); } .podium-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; } .podium-row:hover { background: var(--bg-card-hover); } .podium-pos { font-family: var(--font-display); font-weight: 700; width: 26px; text-align: center; font-size: 16px; } .podium-row .p-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p-clan { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } .podium-row .p-score { font-family: var(--font-display); font-weight: 700; color: var(--accent); } /* ---------------- grade de rankings (pagina do jogo) ---------------- */ .cat-block { margin-bottom: 8px; } .rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .rk-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, background .15s, transform .15s; } .rk-card:hover { border-color: var(--accent); background: var(--bg-card-hover); transform: translateY(-2px); } .rk-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; border: 1px solid var(--border); overflow: hidden; } .rk-icon img { width: 100%; height: 100%; object-fit: contain; } .rk-card .rk-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rk-card .rk-name { font-weight: 600; font-size: 15px; } .rk-card .rk-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rk-card .rk-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; } .tag { font-size: 10px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } .tag.prize { display: inline-flex; align-items: center; gap: 4px; border-color: var(--gold); color: var(--gold); padding: 2px 8px 2px 5px; } .tag.prize .cur-ico { width: 14px; height: 14px; object-fit: contain; } .cur-ico { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; } /* chip de periodo: icone pequeno + rotulo */ .tag.p-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; } .tag.p-tag .p-ico { width: 14px; height: 14px; } /* card com imagem de fundo propria (assets/img/rankings/backgrounds) */ .rk-card.has-bg { background-size: cover; background-position: center right; } .rk-card.has-bg:hover { filter: brightness(1.12); } .rk-card.has-bg .rk-icon { background: rgba(13, 16, 23, .55); } /* destaque de ranking premiado (TCC / TCCE) */ .rk-card.has-prize-tcc { border-color: rgba(232, 176, 67, .65); box-shadow: 0 0 0 1px rgba(232, 176, 67, .18), inset 0 0 28px rgba(232, 176, 67, .05); } .rk-card.has-prize-tcce { border-color: rgba(94, 200, 168, .6); box-shadow: 0 0 0 1px rgba(94, 200, 168, .16), inset 0 0 28px rgba(94, 200, 168, .05); } .rk-card.has-prize-tcc.has-prize-tcce { border-color: rgba(232, 176, 67, .7); box-shadow: 0 0 0 1px rgba(232, 176, 67, .2), inset 0 0 28px rgba(232, 176, 67, .04), inset 0 -2px 0 rgba(94, 200, 168, .55); } .rk-card.has-prize:hover { border-color: var(--gold); } /* ---------------- pagina do ranking ---------------- */ .rank-header { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 22px; margin-bottom: 16px; } .rank-header .rk-icon { width: 64px; height: 64px; font-size: 32px; } .rank-header .rh-main { flex: 1 1 280px; min-width: 0; } .rank-header h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: 1px; line-height: 1.1; } .rank-header .rh-desc { color: var(--text-dim); font-size: 14px; margin-top: 6px; max-width: 52ch; line-height: 1.45; } .rank-header .rh-updated { margin-left: auto; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; font-size: 12px; color: var(--text-faint); } .rank-header .rh-actions { margin-top: 2px; } .rank-header .rh-actions .pg-btn { white-space: nowrap; display: inline-block; } .prize-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid rgba(241, 196, 15, .35); background: rgba(241, 196, 15, .06); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 16px; } .prize-banner .pb-title { font-family: var(--font-display); font-weight: 700; color: var(--gold); letter-spacing: .5px; } .prize-banner .pb-rules { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); } .prize-banner .pb-rules .cur-ico { width: 16px; height: 16px; } .prize-banner .pb-countdown { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); } .tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 8px; cursor: pointer; user-select: none; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .5px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); transition: all .15s; } .tab:hover { color: var(--text); } .tab.active { color: #0b0e14; background: var(--accent); border-color: var(--accent); } .tab .tab-cur { width: 18px; height: 18px; object-fit: contain; } .tab.has-prize-tcc:not(.active) { border-color: rgba(232, 176, 67, .55); color: var(--gold); background: rgba(232, 176, 67, .08); } .tab.has-prize-tcce:not(.active):not(.has-prize-tcc) { border-color: rgba(94, 200, 168, .55); color: var(--tcce); background: rgba(94, 200, 168, .08); } .tab.has-prize-tcc.has-prize-tcce:not(.active) { border-color: rgba(232, 176, 67, .55); box-shadow: inset 0 -2px 0 rgba(94, 200, 168, .55); } .table-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .table-tools input { padding: 8px 14px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-size: 14px; outline: none; width: min(300px, 100%); } .table-tools input:focus { border-color: var(--accent); } .table-tools .tt-total { font-size: 13px; color: var(--text-dim); } /* tabela */ .rank-table { width: 100%; border-collapse: collapse; font-size: 14px; } .rank-table th { text-align: left; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); padding: 10px 12px; border-bottom: 2px solid rgba(212, 137, 74, .35); } .rank-table td { padding: 9px 12px; border-bottom: 1px solid rgba(35, 43, 61, .5); } .rank-table tbody tr { cursor: pointer; transition: background .1s; } .rank-table tbody tr:hover { background: var(--bg-card-hover); } .rank-table .col-score { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; } .rank-table .col-extra { text-align: right; color: var(--text-dim); font-size: 13px; white-space: nowrap; } .rank-table .col-elo { text-align: left; white-space: nowrap; } .elo-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-dim); } .elo-badge img { width: 22px; height: 22px; object-fit: contain; flex: none; } .elo-badge.muted { color: var(--text-faint); font-weight: 500; } .elo-badge.elo-bronze { color: #c4783a; } .elo-badge.elo-prata { color: #c5cdd8; } .elo-badge.elo-ouro { color: #e8b043; } .elo-badge.elo-platina { color: #5ec8d8; } .elo-badge.elo-diamante { color: #5b9cf5; } .elo-badge.elo-mestre { color: #b07cf0; } .elo-badge.elo-desafiante { color: #f071b8; } .pos-cell { font-family: var(--font-display); font-weight: 700; font-size: 16px; width: 54px; text-align: center; } .pos-gold { color: var(--gold); text-shadow: 0 0 12px rgba(241, 196, 15, .5); } .pos-silver { color: var(--silver); } .pos-bronze { color: var(--bronze); } tr.row-top1 { background: linear-gradient(90deg, rgba(241, 196, 15, .10), transparent 60%); } tr.row-top2 { background: linear-gradient(90deg, rgba(189, 195, 199, .07), transparent 60%); } tr.row-top3 { background: linear-gradient(90deg, rgba(205, 127, 50, .07), transparent 60%); } .player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .player-cell .pc-name { font-weight: 600; } .player-cell .pc-sub { font-size: 12px; color: var(--text-dim); } .clan-name-row .clan-cell { min-width: 0; } .clan-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); max-width: 100%; } a.clan-cell, a.clan-link { color: var(--text-dim); text-decoration: none; cursor: pointer; } a.clan-cell:hover, a.clan-link:hover { color: var(--accent); text-decoration: underline; } .clan-inline { color: var(--text-dim); text-decoration: none; } .clan-inline:hover { color: var(--accent); text-decoration: underline; } .pager { display: flex; gap: 8px; justify-content: center; padding: 18px 0 4px; } .pager button { padding: 7px 16px; border-radius: 8px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-family: var(--font-body); font-size: 13px; } .pager button:disabled { opacity: .35; cursor: default; } .pager .pg-info { align-self: center; font-size: 13px; color: var(--text-dim); } .pager .pg-btn, .pg-btn { padding: 7px 16px; border-radius: 8px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); font-size: 13px; } /* variacao de posicao desde o inicio do dia (▲/▼/=) */ .delta { font-size: 10.5px; font-weight: 700; margin-left: 6px; letter-spacing: 0; vertical-align: 1px; } .delta.up { color: var(--success); } .delta.down { color: var(--danger); } .delta.same { color: var(--text-faint); } /* ---------------- hall da fama ---------------- */ .section-sub { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin: 22px 0 10px; } .hall-list { padding: 6px 10px; } .hall-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--border); color: var(--text); } .hall-list .hall-row:last-child { border-bottom: none; } .hall-row:hover { background: rgba(255, 255, 255, .025); } .hall-row .hall-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; } .hall-row .p-name { font-weight: 700; font-size: 15px; } .hall-game { display: flex; align-items: center; flex: none; } .hall-game-logo { width: auto; height: 20px; object-fit: contain; opacity: .9; } .hall-breakdown { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .hall-breakdown .bc-period { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .hall-rk { font-size: 12px; color: var(--text-faint); } .hall-titles { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); min-width: 74px; text-align: right; white-space: nowrap; } .champ-card { display: block; padding: 14px 16px; color: var(--text); transition: border-color .15s; } .champ-card:hover { border-color: var(--accent); } .champ-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .champ-head .champ-rk { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .champ-head .bc-period { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .champ-body { display: flex; align-items: center; gap: 10px; } .champ-body .p-name { font-weight: 700; } .champ-score { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } /* ---------------- transparencia / hub de premiacoes ---------------- */ .prizes-hero .prizes-switch { display: inline-flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; justify-content: center; } .prizes-switch-item { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); } .prizes-switch-item:hover { color: var(--text); border-color: rgba(232, 176, 67, .45); } .prizes-switch-item.active { color: #1a1204; background: linear-gradient(135deg, #e8b043, #f0d078); border-color: var(--gold); } .prizes-switch-item .hot-pill { position: static; margin-left: 2px; } .prizes-switch-item .cur-ico { width: 18px; height: 18px; } .totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; } .total-card { padding: 22px 24px; text-align: center; position: relative; overflow: hidden; } .total-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .total-card-tcce::before { background: linear-gradient(90deg, transparent, var(--tcce), transparent); } .total-card .total-value { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; } .total-card-tcce .total-value { color: var(--tcce); } .total-card .total-value .cur-ico.lg { width: 30px; height: 30px; } .total-card .total-label { font-size: 13px; color: var(--text); margin-top: 8px; font-weight: 600; } .total-card .total-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* feed de premiacoes pagas (lotes por ranking/periodo) */ .pp-feed { display: flex; flex-direction: column; gap: 12px; } .pp-batch { padding: 0; overflow: hidden; border-left: 3px solid var(--gc, var(--gold)); } .pp-batch.has-prize-tcce { border-left-color: var(--tcce); } .pp-batch-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(232, 176, 67, .06), transparent 55%); } .pp-batch.has-prize-tcce .pp-batch-head { background: linear-gradient(90deg, rgba(94, 200, 168, .07), transparent 55%); } .pp-rank { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: inherit; } .pp-rank:hover .pp-rank-name { color: var(--accent); } .pp-rank .rk-icon { width: 42px; height: 42px; font-size: 22px; flex: none; } .pp-rank-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pp-rank-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-rank-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); } .pp-batch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .pp-pool { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1; } .pp-batch.has-prize-tcce .pp-pool { color: var(--tcce); } .pp-pool .cur-ico { width: 20px; height: 20px; } .pp-when { font-size: 11px; color: var(--text-faint); white-space: nowrap; } .pp-winners { list-style: none; margin: 0; padding: 6px 0; } .pp-winner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .03); } .pp-winner:last-child { border-bottom: none; } .pp-winner:hover { background: rgba(255, 255, 255, .025); } .pp-pos { font-family: var(--font-display); font-weight: 700; font-size: 16px; width: 28px; flex: none; } .pp-winner .avatar.sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-soft); border: 1px solid var(--border); } .pp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pp-player { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-player:hover { color: var(--accent); } .pp-class { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); } .pp-class .class-icon { width: 14px; height: 14px; object-fit: contain; } .pp-amt { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--gold); } .pp-batch.has-prize-tcce .pp-amt { color: var(--tcce); } .pp-amt .cur-ico { width: 16px; height: 16px; } @media (max-width: 640px) { .pp-batch-head { flex-direction: column; align-items: stretch; gap: 10px; } .pp-batch-side { flex-direction: row; align-items: center; justify-content: space-between; } .pp-rank-name { white-space: normal; } .total-card .total-value { font-size: 32px; } } /* rankings premiados ativos */ .ap-game-block { margin-bottom: 28px; } .ap-game-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; font-size: 12px; font-weight: 700; background: rgba(232, 176, 67, .16); color: var(--gold); vertical-align: middle; } .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .ap-card { padding: 0; overflow: hidden; } .ap-card.has-prize-tcc { border-color: rgba(232, 176, 67, .55); } .ap-card.has-prize-tcce { border-color: rgba(94, 200, 168, .5); } .ap-head { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--border); color: inherit; } .ap-head:hover { background: var(--bg-card-hover); } .ap-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .ap-name { font-weight: 700; font-size: 15px; } .ap-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-currencies { display: inline-flex; gap: 4px; flex: none; } .ap-period { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.04); } .ap-period:last-child { border-bottom: none; } .ap-period-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ap-deadline { text-align: right; font-size: 12px; color: var(--text-dim); } .ap-countdown { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gold); } .ap-pool { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ap-pool-item { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); } .ap-pool-item strong { color: var(--gold); font-family: var(--font-display); font-size: 16px; } .ap-leaders { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(232, 176, 67, .06); border: 1px solid rgba(232, 176, 67, .18); } .ap-leaders-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 6px; font-weight: 700; } .ap-leaders-empty { font-size: 12px; color: var(--text-faint); } .ap-leader { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-radius: 6px; color: inherit; font-size: 13px; } .ap-leader:hover { background: rgba(255, 255, 255, .04); } .ap-leader-pos { font-family: var(--font-display); font-weight: 700; width: 28px; flex: none; font-size: 14px; } .ap-leader .avatar.sm { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; } .ap-leader-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-leader-score { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); flex: none; font-size: 12px; } .ap-leader-prize { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 4px; } .ap-leader-prize-item { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 14px; } .ap-class-note { margin-top: 6px; font-size: 11px; color: var(--text-faint); } .ap-rules { list-style: none; margin: 6px 0 0; padding: 0; } .ap-rules li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--text-dim); border-bottom: 1px dashed rgba(255,255,255,.04); } .ap-rules li:last-child { border-bottom: none; } .ap-rule-amt { display: inline-flex; align-items: center; gap: 4px; color: var(--text); } .ap-open { display: inline-block; font-size: 12px; font-weight: 600; color: var(--gold); } .ap-open:hover { text-decoration: underline; } .mobile-nav-premios .mnl-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mobile-nav-premios .hot-pill { position: static; } .game-chip { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; } /* campeoes anteriores */ .winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .winner-card { padding: 14px 16px; } .winner-card .wc-ref { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .winner-card .wc-row { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; } .winner-card .wc-row .wc-name { display: inline-flex; align-items: center; gap: 2px; min-width: 0; color: inherit; font-weight: 600; } .winner-card .wc-row a.wc-name:hover { color: var(--accent); } .winner-card .wc-row .wc-name .class-icon { flex-shrink: 0; margin-right: 2px; } .podium-row a.p-name { color: inherit; } .podium-row a.p-name:hover { color: var(--accent); } .hall-row a.p-name { color: inherit; } .hall-row a.p-name:hover { color: var(--accent); } .winner-card .wc-row .wc-score { margin-left: auto; color: var(--accent); font-family: var(--font-display); font-weight: 700; } /* ---------------- perfil (modal e pagina) ---------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(5, 7, 11, .78); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; backdrop-filter: blur(3px); } .modal-backdrop[hidden] { display: none; } .modal-card { position: relative; width: min(860px, 100%); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .modal-close { position: absolute; top: 10px; right: 12px; z-index: 5; width: 34px; height: 34px; background: rgba(0, 0, 0, .45); color: #fff; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; } .modal-loading { padding: 60px; text-align: center; color: var(--text-dim); } .profile-banner { height: 150px; background: linear-gradient(120deg, #1a2130, #10141d); background-size: cover; background-position: center; } .profile-head { display: flex; gap: 16px; align-items: flex-end; padding: 0 24px; margin-top: -42px; flex-wrap: wrap; } .profile-head .avatar.lg { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); } .profile-id h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: .5px; line-height: 1.1; } .profile-id .pi-sub { color: var(--text-dim); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .profile-section { padding: 18px 24px 0; } .profile-section:last-child { padding-bottom: 24px; } .profile-section h3 { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 10px; } .badges-row { display: flex; gap: 8px; flex-wrap: wrap; } /* abas de periodo das medalhas (menores que as tabs da tabela) */ .badge-tabs { margin-bottom: 10px; } .badge-tabs .tab { padding: 5px 14px; font-size: 13px; } .badge-tabs .tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 11px; text-align: center; } .badge-tabs .tab.active .tab-n { background: rgba(0, 0, 0, .18); } .badge-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; } .badge-chip .bc-pos { font-family: var(--font-display); font-weight: 700; } .badge-chip.b-gold { border-color: rgba(241, 196, 15, .6); } .badge-chip.b-gold .bc-pos { color: var(--gold); } .badge-chip.b-silver { border-color: rgba(189, 195, 199, .5); } .badge-chip.b-silver .bc-pos { color: var(--silver); } .badge-chip.b-bronze { border-color: rgba(205, 127, 50, .5); } .badge-chip.b-bronze .bc-pos { color: var(--bronze); } /* selo compacto do periodo (∞ = todo periodo, letra = semanal/mensal) */ .badge-chip .bc-period { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; font-size: 10px; font-weight: 700; cursor: help; background: rgba(139, 148, 167, .12); color: var(--text-dim); } .badge-chip .bc-period.p-alltime { background: rgba(232, 176, 67, .14); color: var(--accent); font-size: 12px; } .badge-chip .bc-period.p-daily { background: rgba(88, 214, 141, .14); color: #58d68d; } .badge-chip .bc-period.p-weekly { background: rgba(93, 173, 226, .14); color: #5dade2; } .badge-chip .bc-period.p-monthly { background: rgba(175, 122, 197, .16); color: #af7ac5; } /* medalha visual do ranking (icone fisico + posicao; tooltip diz o ranking) */ .badge-medal { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 64px; padding: 8px 4px 6px; cursor: help; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); transition: border-color .15s, transform .15s; } .badge-medal:hover { border-color: var(--accent); transform: translateY(-2px); } .badge-medal .bm-icon { width: 44px; height: 44px; object-fit: contain; } .badge-medal .bm-pos { font-family: var(--font-display); font-weight: 700; font-size: 12px; margin-top: 3px; color: var(--text-dim); } .badge-medal.b-gold { border-color: rgba(241, 196, 15, .55); } .badge-medal.b-gold .bm-pos { color: var(--gold); } .badge-medal.b-silver { border-color: rgba(189, 195, 199, .45); } .badge-medal.b-silver .bm-pos { color: var(--silver); } .badge-medal.b-bronze { border-color: rgba(205, 127, 50, .45); } .badge-medal.b-bronze .bm-pos { color: var(--bronze); } .badge-medal .bm-period { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; } .pvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .pvp-grid { grid-template-columns: 1fr; } } .pvp-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .pvp-list h4 { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; } .pvp-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; } .pvp-row .pr-kills { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--danger); } .pvp-row.friendly .pr-kills { color: var(--success); } .chart-box { height: 240px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .chart-box.tall { height: 300px; } .prize-list .pvp-row .pr-kills { color: var(--gold); } /* total acumulado pela conta (todas as premiacoes pagas) */ .prize-totals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .prize-totals .pt-label { font-size: 12px; color: var(--text-dim); } .prize-total { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; background: rgba(232, 176, 67, .08); border: 1px solid rgba(232, 176, 67, .35); font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gold); } .prize-total b { font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--text-dim); } /* ---------------- pagina do cla ---------------- */ .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .member-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; transition: border-color .15s, transform .12s; } .member-card:hover { border-color: var(--accent); transform: translateY(-1px); } .member-card .mc-body { min-width: 0; flex: 1; } .member-card .mc-name { font-weight: 600; } .member-card .mc-class { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .member-card .mc-best { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--accent); flex: none; } .member-card.member-star1 { border-color: rgba(241, 196, 15, .45); background: linear-gradient(90deg, rgba(241, 196, 15, .08), transparent 70%); } .member-card.member-star2 { border-color: rgba(189, 195, 199, .4); background: linear-gradient(90deg, rgba(189, 195, 199, .07), transparent 70%); } .member-card.member-star3 { border-color: rgba(205, 127, 50, .4); background: linear-gradient(90deg, rgba(205, 127, 50, .08), transparent 70%); } .member-card.member-star1 .mc-best { color: var(--gold); } .member-card.member-star2 .mc-best { color: var(--silver); } .member-card.member-star3 .mc-best { color: var(--bronze); } .mc-medals { display: flex; gap: 6px; margin-top: 4px; } .mc-medals .mm { font-size: 11px; font-weight: 700; font-family: var(--font-display); } .mc-medals .mm.g { color: var(--gold); } .mc-medals .mm.s { color: var(--silver); } .mc-medals .mm.b { color: var(--bronze); } /* ---------------- perfil de cla ---------------- */ .clan-hero { display: flex; align-items: center; gap: 18px; padding: 22px 22px 8px; background: radial-gradient(600px 200px at 0% 0%, rgba(232, 176, 67, .12), transparent); } .clan-hero .emblem.xl { width: 88px; height: 88px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); } .clan-hero-id h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.1; margin: 0; } .clan-hero-id .chi-sub { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; color: var(--text-dim); font-size: 13px; } .clan-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px 22px 8px; } .clan-stat { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; min-height: 72px; } .clan-stat .cs-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.15; } .clan-stat .cs-label { font-size: 11px; color: var(--text-faint); margin-top: 4px; text-transform: uppercase; letter-spacing: .6px; } .clan-stat .cs-podium { letter-spacing: 1px; } .clan-stat .cs-podium .g { color: var(--gold); } .clan-stat .cs-podium .s { color: var(--silver); } .clan-stat .cs-podium .b { color: var(--bronze); } .clan-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .clan-charts .chart-box.tall { grid-column: span 1; min-height: 280px; } @media (min-width: 900px) { .clan-charts .chart-box.tall { grid-column: span 2; } } .badge-link { display: inline-flex; text-decoration: none; } .badge-link:hover .badge-medal { border-color: var(--accent); } .clan-presence-table .clan-rk-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .clan-presence-table .clan-rk-link:hover { color: var(--accent); } .rk-mini { width: 22px; height: 22px; object-fit: contain; flex: none; } @media (max-width: 560px) { .clan-hero { padding: 16px 14px 4px; gap: 12px; } .clan-hero .emblem.xl { width: 64px; height: 64px; } .clan-hero-id h1 { font-size: 24px; } .clan-stats { padding: 8px 14px; grid-template-columns: repeat(2, 1fr); } } /* ---------------- footer / misc ---------------- */ .site-footer { margin-top: 48px; border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.35)); } .site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 28px 32px; padding: 36px 16px 28px; } .sf-col { min-width: 0; } .sf-logo { display: inline-block; margin-bottom: 12px; } .sf-logo img { display: block; height: 36px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); } .sf-text { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 32ch; } .sf-contact { margin: 0 0 14px; font-size: 13px; } .sf-contact a { color: var(--text); } .sf-contact a:hover { color: var(--accent); } .sf-social { display: flex; flex-wrap: wrap; gap: 8px; } .sf-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--accent); background: rgba(212, 137, 74, .12); border: 1px solid rgba(212, 137, 74, .28); transition: background .15s, border-color .15s, color .15s; } .sf-social-btn:hover { background: rgba(212, 137, 74, .22); border-color: var(--accent); color: #fff; } .sf-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); } .sf-list { list-style: none; margin: 0; padding: 0; } .sf-list li { margin: 0 0 8px; } .sf-list a { color: var(--text-dim); font-size: 13px; line-height: 1.4; } .sf-list a:hover { color: var(--accent); } .sf-games a { display: inline-flex; align-items: center; gap: 8px; } .sf-games img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; flex: none; } .site-footer-bar { border-top: 1px solid var(--border); padding: 14px 16px; text-align: center; font-size: 13px; color: var(--text-faint); } .site-footer-bar a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .site-footer-bar a:hover { color: #fff; } @media (max-width: 960px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; padding-top: 28px; } .sf-text { max-width: none; } } .empty-state { padding: 48px 16px; text-align: center; color: var(--text-dim); } .notfound { text-align: center; padding: 90px 16px; } .notfound h1 { font-family: var(--font-display); font-size: 64px; color: var(--accent); } /* ---------------- seletor de idioma ---------------- */ .lang-box { position: relative; flex: none; } .lang-btn { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 1px; cursor: pointer; transition: border-color .15s; } .lang-btn:hover { border-color: var(--accent); } .lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); flex: none; } .lang-code { line-height: 1; } .lang-caret { font-size: 10px; color: var(--text-dim); } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; z-index: 60; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); overflow: hidden; display: none; } .lang-menu.open { display: block; } .lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 14px; color: var(--text); } .lang-item:hover { background: var(--bg-card-hover); } .lang-item.active { color: var(--accent); font-weight: 600; } /* ---------------- filtro de classe ---------------- */ .class-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .class-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: all .15s; } .class-chip img { width: 22px; height: 22px; object-fit: contain; display: block; } .class-chip:hover { border-color: var(--accent); color: var(--text); } .class-chip.active { border-color: var(--accent); color: var(--accent); background: var(--bg-card-hover); } /* icone de classe inline (tabela, busca, perfil) */ .class-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; } .pc-sub .class-icon, .si-sub .class-icon { width: 14px; height: 14px; vertical-align: -3px; } .mc-class { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } /* ---------------- colunas ordenaveis ---------------- */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable::after { content: '\2195'; opacity: .35; margin-left: 5px; font-size: 10px; } th.sortable.sorted-asc::after { content: '\2191'; opacity: 1; color: var(--accent); } th.sortable.sorted-desc::after { content: '\2193'; opacity: 1; color: var(--accent); } .table-tools .tt-hint { font-size: 12px; color: var(--text-faint); } /* ---------------- conflitos PvP (explorador + secao do perfil) ---------------- */ .conflict-type { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; background: rgba(255, 255, 255, .08); color: var(--text-dim); white-space: nowrap; } .conflict-type.t-grande { background: rgba(231, 76, 60, .14); color: #e74c3c; } .conflict-type.t-medio { background: rgba(232, 176, 67, .14); color: var(--gold); } .conflict-type.t-pequeno { background: rgba(93, 173, 226, .14); color: #5dade2; } .conflict-type.t-evento, .conflict-type.t-agendado { background: rgba(175, 122, 197, .16); color: #af7ac5; } a.conflict-row { color: var(--text); border-radius: 6px; padding: 5px 6px; margin: 0 -6px; } a.conflict-row:hover { background: rgba(255, 255, 255, .05); text-decoration: none; } a.conflict-row .pr-kills { color: var(--accent); font-size: 13px; } .profile-section h3 .tab-n { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 11px; text-align: center; vertical-align: 2px; } /* ---------------- detalhe do conflito ---------------- */ .conflict-page { display: flex; flex-direction: column; gap: 16px; } .conflict-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; flex-wrap: wrap; } .conflict-hero .ch-back { display: inline-block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; } .conflict-hero .ch-back:hover { color: var(--accent); } .conflict-hero .ch-title-row { display: flex; align-items: center; gap: 14px; } .conflict-hero .ch-icon { width: 56px; height: 56px; font-size: 28px; flex: none; } .conflict-hero h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: 1px; line-height: 1.1; margin-bottom: 6px; } .conflict-hero .ch-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13px; color: var(--text-dim); } .conflict-hero .ch-meta strong { color: var(--text); font-weight: 600; } .conflict-hero .ch-game { margin-left: auto; } .conflict-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .conflict-stats .cs-item { background: var(--bg-card); padding: 14px 10px; text-align: center; } .conflict-stats .cs-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--gold); letter-spacing: .5px; line-height: 1.1; } .conflict-stats .cs-label { margin-top: 4px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; } .conflict-highlights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; } .chl-card { display: block; padding: 16px 18px; min-width: 0; } a.chl-card:hover { background: var(--bg-card-hover); } .chl-kicker { font-family: var(--font-display); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .chl-winner .chl-kicker { color: var(--gold); } .chl-mvp .chl-kicker { color: var(--accent); } .chl-body { display: flex; align-items: center; gap: 12px; min-width: 0; } .chl-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: .5px; line-height: 1.1; color: var(--text); } .chl-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .chl-summary-text { margin: 0; padding-right: 6px; color: var(--text-dim); line-height: 1.55; font-size: 14px; max-height: 120px; overflow: auto; } .class-icon.xl { width: 40px; height: 40px; margin-right: 0; vertical-align: middle; } .conflict-top-clans { padding: 16px 18px; } .ctc-list { display: flex; flex-direction: column; gap: 6px; } .ctc-row { display: grid; grid-template-columns: 40px minmax(110px, 160px) minmax(80px, 1fr) 72px minmax(90px, 120px); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 4px; color: var(--text); } .ctc-row:hover { background: rgba(255, 255, 255, .04); } .ctc-pos { font-family: var(--font-display); font-weight: 700; text-align: center; } .ctc-clan { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ctc-clan strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctc-bar-wrap { height: 8px; background: rgba(255, 255, 255, .06); border-radius: 99px; overflow: hidden; } .ctc-bar { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--gold)); } .ctc-kills { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); text-align: right; } .ctc-meta { font-size: 12px; color: var(--text-dim); text-align: right; white-space: nowrap; } .conflict-fronts { padding: 16px 18px; } .cf-list { display: flex; flex-direction: column; gap: 4px; } .cf-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: 14px; } .cf-row:last-child { border-bottom: 0; } .cf-n { font-family: var(--font-display); color: var(--text-faint); } .cf-guilds { color: var(--text-dim); min-width: 0; } .cf-kills { font-family: var(--font-display); font-weight: 700; color: var(--accent); } .conflict-boards { margin-top: 4px; } .conflict-tabs .tab { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); } .conflict-tabs .tab .tab-n { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 11px; text-align: center; } .conflict-tabs .tab.active .tab-n { background: rgba(0, 0, 0, .18); } .conflict-note { margin: 0 0 10px; } .conflict-tools { margin-top: 4px; } .conflict-tools select { padding: 8px 12px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-size: 14px; outline: none; max-width: min(240px, 100%); } .conflict-tools select:focus { border-color: var(--accent); } .table-wrap { overflow-x: auto; width: 100%; } .conflict-table { width: 100%; } .conflict-table th, .conflict-table td { padding: 10px 14px; vertical-align: middle; } .conflict-table .col-score, .conflict-table .col-extra, .conflict-table .col-share { white-space: nowrap; } .conflict-table .col-share { min-width: 120px; } .conflict-table .col-bal.pos { color: var(--success); } .conflict-table .col-bal.neg { color: var(--danger); } .conflict-table tbody tr[hidden] { display: none; } .share-bar { display: inline-block; width: 56px; height: 6px; margin-right: 8px; background: rgba(255, 255, 255, .06); border-radius: 99px; overflow: hidden; vertical-align: middle; } .share-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); } .share-pct { font-size: 12px; color: var(--text-dim); vertical-align: middle; } @media (max-width: 980px) { .conflict-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .conflict-highlights { grid-template-columns: 1fr 1fr; } .chl-summary { grid-column: 1 / -1; } .ctc-row { grid-template-columns: 36px minmax(0, 1fr) 64px; grid-template-areas: "pos clan kills" "pos bar meta"; } .ctc-pos { grid-area: pos; } .ctc-clan { grid-area: clan; } .ctc-bar-wrap { grid-area: bar; } .ctc-kills { grid-area: kills; } .ctc-meta { grid-area: meta; text-align: left; } } @media (max-width: 560px) { .conflict-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .conflict-highlights { grid-template-columns: 1fr; } .conflict-hero h1 { font-size: 24px; } .conflict-table .col-share { display: none; } .conflict-tools select { max-width: 100%; width: 100%; } } /* ---------------- listagem de conflitos ---------------- */ .conflicts-page { display: flex; flex-direction: column; gap: 16px; } .conflicts-hero .ch-lead { margin: 8px 0 0; max-width: 640px; font-size: 14px; color: var(--text-dim); line-height: 1.5; } .conflicts-hero h1 em { font-style: normal; color: var(--accent); } .conflicts-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .conflicts-filter-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius); background: rgba(212, 137, 74, .08); border: 1px solid rgba(212, 137, 74, .28); font-size: 13px; color: var(--text-dim); } .conflicts-filter-banner a { color: var(--accent); font-weight: 600; } .conflicts-tools { align-items: flex-start; } .conflicts-type-filter { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; } .conflicts-type-filter .class-chip .conflict-type { padding: 0; background: transparent; font-size: 12px; } .conflicts-type-filter .class-chip.active .conflict-type { color: inherit; } .conflicts-list { display: flex; flex-direction: column; gap: 10px; } .conflict-card { display: grid; grid-template-columns: minmax(160px, 210px) minmax(140px, 200px) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; color: var(--text); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; } .conflict-card:hover { background: var(--bg-card-hover); border-color: rgba(212, 137, 74, .45); transform: translateY(-1px); } .conflict-card[hidden] { display: none; } .cc-when { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cc-date { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .5px; line-height: 1.1; } .cc-duration { font-size: 12px; color: var(--text-faint); } .cc-stats { display: flex; flex-direction: column; gap: 8px; } .cc-kills strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); letter-spacing: .5px; line-height: 1; } .cc-kills span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; } .cc-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-dim); } .cc-meta b { color: var(--text); font-weight: 600; } .cc-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .cc-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .cc-winner-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .cc-winner-row strong { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-top { display: flex; flex-wrap: wrap; gap: 6px 12px; } .cc-top-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); max-width: 140px; } .cc-top-pos { font-family: var(--font-display); font-weight: 700; font-size: 13px; } .cc-top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-action { align-self: center; } .conflict-card:hover .cc-action .pg-btn { border-color: var(--accent); color: var(--accent); } @media (max-width: 980px) { .conflicts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .conflict-card { grid-template-columns: 1fr 1fr; grid-template-areas: "when stats" "side side" "action action"; } .cc-when { grid-area: when; } .cc-stats { grid-area: stats; } .cc-side { grid-area: side; } .cc-action { grid-area: action; justify-self: start; } } @media (max-width: 560px) { .conflict-card { grid-template-columns: 1fr; grid-template-areas: "when" "stats" "side" "action"; padding: 14px; } .cc-kills strong { font-size: 24px; } } /* ---------------- perfil da conta (/profile/{theclassic_id}) ---------------- */ .account-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid rgba(212, 137, 74, .35); background: rgba(212, 137, 74, .08); } .account-link:hover { background: rgba(212, 137, 74, .18); } .account-id-tag { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; } .account-stats { margin: 0 16px 8px; } .account-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .account-char { display: block; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-soft); transition: border-color .15s, background .15s, transform .15s; } .account-char:hover { border-color: var(--accent); background: var(--bg-card-hover); transform: translateY(-2px); } .account-char .ac-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .account-char .ac-best { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); } .account-char .ac-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; } .account-char .ac-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-dim); align-items: center; } .account-char .ac-badges { margin-top: 8px; font-size: 12px; color: var(--accent); font-weight: 600; } .account-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .account-charts .chart-box.tall { grid-column: 1 / -1; min-height: 220px; } .account-badge-list { display: flex; flex-direction: column; gap: 6px; } .account-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-soft); color: inherit; } .account-badge-row:hover { border-color: var(--accent); background: var(--bg-card-hover); } .account-badge-row .abr-meta { font-size: 13px; color: var(--text-dim); min-width: 0; } .account-badge-row .abr-meta b { color: var(--text); } .account-title-row.b-gold { border-left: 3px solid var(--gold); } .account-title-row.b-silver { border-left: 3px solid var(--silver); } .account-title-row.b-bronze { border-left: 3px solid var(--bronze); } .account-pvp-kpi { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); } .account-pvp-kpi b { color: var(--text); font-family: var(--font-display); font-size: 18px; } @media (max-width: 560px) { .account-stats { grid-template-columns: repeat(2, 1fr); } .account-charts { grid-template-columns: 1fr; } } /* ---------------- layout com sidenav de rankings (jogo em contexto) ---------------- */ .game-layout { display: flex; align-items: flex-start; gap: 20px; padding-top: 20px; padding-bottom: 48px; } .game-layout > .game-main { padding: 0; flex: 1; } .game-sidenav { position: sticky; top: 76px; flex: 0 0 var(--sidenav-width); width: var(--sidenav-width); max-height: calc(100vh - 96px); overflow-x: hidden; overflow-y: auto; padding: 12px 8px 16px 10px; background: linear-gradient(180deg, #1e1e24, var(--bg-card)); border: 1px solid #3a3a44; border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .game-sidenav .gs-title { display: flex; align-items: center; justify-content: center; margin: 0 0 12px; padding: 8px 6px 10px; border-bottom: 1px solid var(--border); text-decoration: none; } .game-sidenav .gs-logo { width: 72px; height: 72px; object-fit: contain; display: block; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); } .game-sidenav .gs-title-text { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; color: var(--text); } .game-sidenav .gs-overview { display: block; padding: 8px 10px; margin-bottom: 10px; border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text-dim); border: 1px solid transparent; } .game-sidenav .gs-overview:hover { color: var(--text); background: var(--bg-card-hover); } .game-sidenav .gs-overview.active { color: var(--accent); border-color: rgba(212, 137, 74, .35); background: var(--bg-soft); } .game-sidenav .gs-cat { margin-bottom: 12px; } .game-sidenav .gs-cat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); padding: 0 8px 4px; } .game-sidenav .gs-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); font-size: 13px; color: var(--text-dim); border: 1px solid transparent; line-height: 1.25; } .game-sidenav .gs-link:hover { color: var(--text); background: var(--bg-card-hover); } .game-sidenav .gs-link.active { color: var(--accent); border-color: rgba(212, 137, 74, .4); background: var(--bg-soft); font-weight: 600; } .game-sidenav .gs-ico { width: 20px; height: 20px; object-fit: contain; flex: none; } .game-sidenav .gs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-sidenav .gs-prize { margin-left: auto; display: inline-flex; gap: 2px; flex: none; } .game-sidenav .gs-prize .gs-cur { width: 14px; height: 14px; object-fit: contain; } .mobile-nav .gs-prize { margin-left: auto; display: inline-flex; gap: 2px; } .mobile-nav .gs-prize .gs-cur { width: 14px; height: 14px; object-fit: contain; } .mobile-nav .gs-cat { margin-bottom: 8px; } .mobile-nav .gs-cat-label { padding: 4px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); } .mobile-nav .gs-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-dim); border-left: 2px solid transparent; } .mobile-nav .gs-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-soft); } .mobile-nav .gs-overview { display: block; padding: 10px 14px; font-weight: 600; color: var(--text-dim); } .mobile-nav .gs-overview.active { color: var(--accent); } @media (max-width: 980px) { .topnav-desktop { display: none; } .nav-toggle { display: inline-flex; } .topbar-inner { gap: 10px; padding: 0 12px; } .brand-logo { width: 34px; height: 34px; } .brand-main { font-size: 20px; } .brand-sub { font-size: 12px; letter-spacing: 3px; } .topbar-actions { gap: 6px; } .search-box { width: min(220px, 42vw); } .search-box input { padding: 8px 10px; font-size: 13px; } .lang-btn { padding: 7px 8px; font-size: 12px; } .game-sidenav { display: none; } .game-layout { display: block; padding-top: 16px; } } @media (max-width: 560px) { .topbar-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding: 10px 12px; row-gap: 8px; } .brand { order: 1; } .topbar-actions { order: 2; width: 100%; margin-left: 0; } .search-box { flex: 1; width: auto; min-width: 0; } .search-box input { width: 100%; } .rank-header { padding: 16px; gap: 12px; } .rank-header h1 { font-size: 24px; } .rank-header .rh-updated { margin-left: 0; width: 100%; align-items: flex-start; text-align: left; } .rank-header .rh-desc { max-width: none; } .hall-breakdown .hall-rk { display: none; } .rank-table .col-extra, .rank-table th.col-extra { display: none; } .table-tools .tt-hint { display: none; } .class-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .class-chip { flex: 0 0 auto; } main { padding: 16px 12px 40px; } } @media (min-width: 981px) { .mobile-nav, .mobile-nav-backdrop, .nav-toggle { display: none !important; } }