/*
   dev feliph3 
   custom.css
  */


  .perfil-clan {
      color: #e0e0e0;
      font-family: Poppins, sans-serif;
  }

  .titulo-caixa {
      font-size: 14px;
      text-transform: uppercase;
      color: #e0e0e0;
      border-bottom: 1px solid #222;
      padding-bottom: 8px;
      margin-bottom: 15px;
      font-weight: 700;
  }

  .banner-clan {
      position: relative;
      background-size: cover;
      background-position: center;
      border: 1px solid #333;
      width: 100%;
      overflow: hidden;
      border-radius: 4px;
  }

  .banner-clan.grande {
      height: 280px;
  }

  .banner-clan.pequeno {
      height: 200px;
  }

  .overlay-banner {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
      display: flex;
      align-items: flex-end;
      padding: 20px;
  }

  .cabecalho-clan {
      display: flex;
      gap: 20px;
      align-items: center;
      width: 100%;
  }

  .container-logo {
      width: 120px;
      height: 120px;
      min-width: 120px;
      background: #111;
      border-radius: 4px;
      overflow: hidden;
  }

  .imagem-logo {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .info-clan h1 {
      margin: 0;
      font-size: 24px;
      color: #fff;
      text-shadow: 2px 2px 4px #000;
  }

  .meta-clan {
      display: flex;
      gap: 10px;
      font-size: 12px;
      margin-top: 5px;
  }

  .posicao-ranking {
      color: #ff7a00;
      font-weight: bold;
  }

  .rank-mestre {
      width: 24px;
      height: auto;
  }

  .grid-estatisticas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 15px 0;
  }

  .estatistica {
      background: #0b0b0b;
      border: 1px solid #222;
      padding: 10px;
      text-align: center;
  }

  .estatistica span {
      font-size: 11px;
      color: #888;
      display: block;
      text-transform: uppercase;
  }

  .estatistica strong {
      font-size: 15px;
      color: #eee;
  }

  .grid-destaques {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
  }

  .card-destaque {
      background: #0a0a0a;
      border: 1px solid #222;
      padding: 15px;
      text-align: center;
      position: relative;
  }

  .rank-1 {
      border-top: 3px solid #ffd700;
  }

  .rank-2 {
      border-top: 3px solid #c0c0c0;
  }

  .rank-3 {
      border-top: 3px solid #cd7f32;
  }

  .posicao-destaque {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 10px;
      color: #ff7a00;
  }

  .container-rank-destaque {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
  }

  .imagem-rank-fixed {
      max-height: 100%;
      max-width: 80px;
      object-fit: contain;
  }

  .nick-membro {
      font-weight: bold;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .pontos-membro {
      color: #888;
      font-size: 12px;
  }

  .caixa {
      background: #0b0b0b;
      border: 1px solid #222;
      padding: 15px;
      margin-top: 15px;
      border-radius: 4px;
  }

  .tabela-scroll {
      overflow-x: auto;
  }

  .cabecalho-membros {
      display: grid;
      grid-template-columns: 50px 2fr 100px 1.2fr 1.2fr 1.2fr;
      align-items: center;
      min-width: 700px;
      background: #151515;
      padding: 12px 15px;
      color: #ff7a00;
      font-size: 12px;
      font-weight: bold;
      border: 1px solid #222;
      margin-bottom: 4px;
  }

  .linha-membro {
      display: grid;
      grid-template-columns: 50px 2fr 100px 1.2fr 1.2fr 1.2fr;
      align-items: center;
      min-width: 700px;
      padding: 10px 15px;
      background: #0d0d0d;
      border: 1px solid #1a1a1a;
      margin-bottom: 2px;
  }

  .linha-membro:hover {
      background: #111;
      border-color: #333;
  }

  .membro-nick {
      color: #fff;
      font-weight: normal;
  }

  .position-num {
      color: #666;
      font-weight: normal;
  }

  .rank-miniatura {
      width: 24px;
      height: auto;
      display: block;
      margin: 0 auto;
  }

  .text-end {
      text-align: right;
  }

  .header-galeria {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
  }

  .controles-galeria button {
      background: #222;
      border: none;
      color: #fff;
      width: 30px;
      height: 30px;
      cursor: pointer;
      border-radius: 3px;
  }

  .controles-galeria button:hover {
      background: #ff7a00;
  }

  .galeria-viewport {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-bottom: 10px;
  }

  .galeria-item {
      min-width: 200px;
      height: 130px;
      border: 1px solid #333;
      flex-shrink: 0;
      border-radius: 4px;
      overflow: hidden;
  }

  .galeria-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .galeria-viewport::-webkit-scrollbar {
      height: 6px;
  }

  .galeria-viewport::-webkit-scrollbar-track {
      background: #0b0b0b;
  }

  .galeria-viewport::-webkit-scrollbar-thumb {
      background: #ff7a00;
      border-radius: 4px;
  }

  .galeria-viewport::-webkit-scrollbar-thumb:hover {
      background: #ff9a33;
  }

  .paginador {
      margin-top: 15px;
      text-align: center;
  }

  .paginador button {
      background: #111;
      border: 1px solid #222;
      color: #888;
      padding: 5px 12px;
      margin: 0 2px;
      cursor: pointer;
      border-radius: 2px;
  }

  .paginador button.ativo {
      background: #ff7a00;
      color: #000;
      border-color: #ff7a00;
      font-weight: bold;
  }

  @media (max-width: 768px) {

      .grid-estatisticas,
      .grid-destaques {
          grid-template-columns: 1fr;
      }
  }

  .border-theme {
      border: 1px solid var(--main-color) !important;
  }

  .bg-linear-green {
      background: var(--linear-green) !important;
  }

  .bg-linear-red {
      background: var(--linear-red) !important;
  }

  .bg-linear-redstrong {
      background: var(--linear-redstrong) !important;
  }

  .bg-linear-orange {
      background: var(--linear-orange) !important;
  }

  .bg-linear-yellow {
      background: var(--linear-yellow) !important;
  }

  .bg-linear-pink {
      background: var(--linear-pink) !important;
  }

  .bg-linear-grey {
      background: var(--linear-grey) !important;
  }

  .bg-linear-blue {
      background: var(--linear-blue) !important;
  }

  .bg-linear-purple {
      background: var(--linear-purple) !important;
  }

  .bg-linear-darkgrey {
      background: var(--linear-darkgrey) !important;
  }

  .bg-linear-next {
      background: var(--bg-linear-gradient-next) !important;
  }

  .bg-animeep {
      background: var(--animeepbg-linear-gradient) !important;
  }

  .bg-anime {
      background: var(--animebg-linear-gradient) !important;
  }

  .bg-anime-2 {
      background: var(--animebg-linear-gradient-2) !important;
  }

  .bg-footer {
      background: var(--bg-linear-gradient-footer) !important;
  }

  .ranking-countdown {
      margin-left: 12px;
      font-size: 12px;
      color: #cfcfcf;
      white-space: nowrap;
  }

  .ranking-countdown i {
      margin-right: 4px;
      opacity: .8;
  }

  .system-alert {
      position: relative;
      color: rgb(255, 255, 255);
      margin-top: 5px;
      margin-bottom: 10px;
      padding: 15px;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px;
      text-decoration: none;
      animation: 0.3s linear 0s 1 normal none running emergeLeftEffect;

  }

  /*
            dev feliph3
            player-profile.css
            */

  .perfil-jogador {
      color: #e0e0e0;
      font-family: Poppins, sans-serif;
  }


  .profile-header {
      display: flex;
      gap: 20px;
      background: #0b0b0b;
      border: 1px solid #222;
      padding: 20px;
      margin-bottom: 15px;
      align-items: center;
  }

  .rank-icon {
      position: relative;
      width: 100px;
      height: 100px;
      background: #111;
      border-radius: 4px;
      padding: 5px;
      border: 2px solid #333;
  }

  .rank-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .rank-lvl-badge {
      position: absolute;
      bottom: -8px;
      right: -8px;
      background: #ff7a00;
      color: #000;
      font-weight: 900;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 3px;
      border: 2px solid #0b0b0b;
  }

  .player-info {
      flex: 1;
  }

  .player-info h1 {
      margin: 0;
      font-size: 24px;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
  }

  .player-meta {
      display: flex;
      gap: 15px;
      font-size: 13px;
      margin-top: 8px;
      color: #888;
  }

  .player-meta b {
      color: #e0e0e0;
      font-weight: 600;
  }

  .player-meta i {
      color: #ff7a00;
      font-style: normal;
      font-weight: 800;
  }

  .ranking-badge {
      text-align: center;
      padding: 10px 15px;
      background: #111;
      border: 1px solid #222;
      border-radius: 4px;
      min-width: 120px;
  }

  .ranking-badge span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: #888;
      display: block;
  }

  .ranking-badge b {
      font-size: 28px;
      color: #ff7a00;
      display: block;
      font-weight: 900;
      margin-top: 5px;
  }

  .tab-navigation {
      display: flex;
      gap: 5px;
      background: #0b0b0b;
      border: 1px solid #222;
      padding: 10px;
      margin-bottom: 15px;
      border-radius: 4px;
  }

  .tab-btn {
      background: #111;
      border: 1px solid #222;
      color: #888;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      transition: all 0.2s;
      border-radius: 3px;
      white-space: nowrap;
  }

  .tab-btn:hover {
      border-color: #ff7a00;
      color: #e0e0e0;
  }

  .tab-btn.active {
      background: #ff7a00;
      border-color: #ff7a00;
      color: #000;
      font-weight: 800;
  }

  .stats-container {
      background: #0b0b0b;
      border: 1px solid #222;
      padding: 20px;
      margin-bottom: 15px;
      border-radius: 4px;
  }

  .section-title {
      font-size: 14px;
      text-transform: uppercase;
      color: #e0e0e0;
      border-bottom: 1px solid #222;
      padding-bottom: 8px;
      margin-bottom: 15px;
      font-weight: 700;
  }

  .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
  }

  .comp-column {
      background: #0d0d0d;
      border: 1px solid #222;
      padding: 15px;
      border-radius: 4px;
  }

  .comp-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #333;
  }

  .comp-header h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
  }

  .color-pvp h3 {
      color: #ff5a5a;
  }

  .color-pve h3 {
      color: #5aff7d;
  }

  .kd-badge {
      background: #111;
      border: 1px solid #333;
      padding: 4px 10px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 700;
      color: #e0e0e0;
  }

  .color-pvp .kd-badge {
      background: rgba(255, 90, 90, 0.1);
      border-color: rgba(255, 90, 90, 0.3);
      color: #ff5a5a;
  }

  .color-pve .kd-badge {
      background: rgba(90, 255, 125, 0.1);
      border-color: rgba(90, 255, 125, 0.3);
      color: #5aff7d;
  }

  .stat-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 13px;
  }

  .stat-row:last-child {
      border-bottom: none;
  }

  .stat-label {
      color: #888;
  }

  .stat-value {
      color: #e0e0e0;
      font-weight: 600;
  }

  .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 15px;
      margin-top: 15px;
  }

  .stat-card {
      background: #0d0d0d;
      border: 1px solid #222;
      padding: 15px;
      border-radius: 4px;
  }

  .stat-card-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      color: #ff7a00;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #333;
  }

  .weapons-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
  }

  .weapons-table th {
      background: #151515;
      padding: 12px 15px;
      text-align: left;
      border: 1px solid #222;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      color: #ff7a00;
  }

  .weapons-table td {
      padding: 10px 15px;
      border: 1px solid #222;
      font-size: 13px;
  }

  .weapons-table tr:hover {
      background: #111;
  }

  .missions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 15px;
  }

  .mission-card {
      background: #0d0d0d;
      border: 1px solid #222;
      padding: 15px;
      text-align: center;
      border-radius: 4px;
  }

  .mission-card.won {
      border-color: #5aff7d;
      background: rgba(90, 255, 125, 0.05);
  }

  .mission-card.lost {
      border-color: #ff5a5a;
      background: rgba(255, 90, 90, 0.05);
  }

  .mission-name {
      font-weight: 700;
      margin-bottom: 5px;
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
  }

  .mission-stats {
      font-size: 11px;
      color: #888;
  }

  .achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      margin-top: 15px;
  }

  .achievement-card {
      background: #0d0d0d;
      border: 1px solid #222;
      padding: 15px;
      text-align: center;
      border-radius: 4px;
      transition: all 0.2s;
  }

  .achievement-card:hover {
      border-color: #ff7a00;
      transform: translateY(-2px);
  }

  .achievement-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 10px;
      background: #111;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #333;
      padding: 10px;
  }

  .achievement-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .achievement-name {
      font-weight: 700;
      margin-bottom: 5px;
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
  }

  .achievement-desc {
      font-size: 11px;
      color: #888;
      line-height: 1.3;
  }

  .classes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
      margin-top: 15px;
  }

  .class-card {
      background: #0d0d0d;
      border: 1px solid #222;
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 15px;
      border-radius: 4px;
  }

  .class-icon {
      width: 50px;
      height: 50px;
      background: #111;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #333;
      padding: 8px;
  }

  .class-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .class-info {
      flex: 1;
  }

  .class-name {
      font-weight: 700;
      margin-bottom: 5px;
      color: #fff;
      font-size: 13px;
      text-transform: uppercase;
  }

  .class-time {
      font-size: 12px;
      color: #888;
  }

  .hidden {
      display: none;
  }

  @media (max-width: 768px) {
      .profile-header {
          flex-direction: column;
          text-align: center;
      }

      .ranking-badge {
          margin-top: 10px;
      }

      .player-meta {
          justify-content: center;
          flex-wrap: wrap;
      }

      .comparison-grid {
          grid-template-columns: 1fr;
      }

      .tab-navigation {
          overflow-x: auto;
          padding-bottom: 5px;
      }

      .tab-btn {
          padding: 8px 15px;
          font-size: 11px;
      }

      .stats-grid {
          grid-template-columns: 1fr;
      }

      .achievements-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 480px) {
      .achievements-grid {
          grid-template-columns: 1fr;
      }
  }

  :root {
      --yellow: #ffd54a;
      --text-muted: #bfbfbf;
  }

  .signature-user {
      width: 100%;
      max-width: 900px;
      min-height: 190px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      border-radius: 0;

      padding: 14px;
      font-family: Segoe UI, Arial, sans-serif;
  }

  .signature-background--rank-1-10 {
      background: linear-gradient(135deg, #0f0f10, #242528);
  }

  .signature-background--rank-11-20 {
      background: linear-gradient(135deg, #1b1c1f, #3a3d42);
  }

  .signature-background--rank-21-30 {
      background: linear-gradient(135deg, #222428, #4a4e55);
  }

  .signature-background--rank-31-40 {
      background: linear-gradient(135deg, #2a2d31, #575c63);
  }

  .signature-background--rank-41-50 {
      background: linear-gradient(135deg, #2f2a22, #635a47);
  }

  .signature-background--rank-51-60 {
      background: linear-gradient(135deg, #3a3324, #746845);
  }

  .signature-background--rank-61-70 {
      background: linear-gradient(135deg, #1e2630, #435465);
  }

  .signature-background--rank-71-80 {
      background: linear-gradient(135deg, #2a1e1e, #5a3c3c);
  }

  .signature-background--rank-81-90 {
      background: linear-gradient(135deg, #3b3422, #7a6b45);
  }

  .signature-user__patente {
      width: 140px;
      text-align: center;
  }

  .signature-user-patente__img {
      height: 120px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
  }

  .signature-user-patente__level {
      background: rgba(0, 0, 0, .65);
      font-size: 13px;
      padding: 4px 0;
      margin-top: 4px;
  }

  .signature-user__info {
      flex: 1;
      padding: 0 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  .signature-user-info__nick {
      font-size: clamp(20px, 4vw, 32px);
      font-weight: 700;
      color: var(--yellow);
  }

  .signature-user-info__rank {
      font-size: 14px;
      opacity: .85;
      color: var(--yellow);
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .signature-user-info__clan {
      font-size: 13px;
      opacity: .6;
  }

  .signature-user-info__stats {
      margin-top: auto;
      display: flex;
      gap: 24px;
      font-size: 13px;
      color: var(--text-muted);
  }

  .signature-user-info__stats span {
      color: var(--yellow);
      font-weight: 600;
  }

  .signature-user-info__playtime {
      border-left: 1px solid #444;
      padding-left: 16px;
  }

  .promotional-banner {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 12px;
      opacity: .6;
      letter-spacing: .5px;
  }

  .download-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 42px;
      height: 42px;
      border: none;
      background: #000a;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      transition: .25s;
  }

  .download-btn:hover {
      background: var(--yellow);
      color: #000;
      transform: scale(1.12);
  }

  .rk-alert-info {
      background: #1b1b1b;
      border: 1px solid #2a2a2a;
      color: #bbb;
      padding: 10px 12px;
      border-radius: 6px;
      margin-bottom: 12px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .rk-alert-info i {
      color: var(--main-color);
  }