/* -------- BF6 Cards (clean + responsivo + dark-friendly) -------- */

:root{
  --bf6-bg: #0e1116;
  --bf6-surface: #151a22;
  --bf6-surface-2: #1b212c;
  --bf6-border: #232a36;
  --bf6-text: #e6eaf0;
  --bf6-muted: #9aa6b2;
  --bf6-accent: #4CAF50;    /* verde RIP */
  --bf6-shadow: 0 10px 30px rgba(0,0,0,.35);
  --bf6-radius: 16px;
  --bf6-gap: 16px;
}

@media (prefers-color-scheme: light){
  :root{
    --bf6-bg: #f6f7fb;
    --bf6-surface: #ffffff;
    --bf6-surface-2: #f4f6fa;
    --bf6-border: #e7eaf0;
    --bf6-text: #121519;
    --bf6-muted: #637081;
    --bf6-shadow: 0 8px 24px rgba(18,21,25,.08);
  }
}

.bf6-wrap{
  display: grid;
  gap: var(--bf6-gap);
  color: var(--bf6-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}

.bf6-card{
  background: linear-gradient(180deg, var(--bf6-surface) 0%, var(--bf6-surface-2) 100%);
  border: 1px solid var(--bf6-border);
  border-radius: var(--bf6-radius);
  box-shadow: var(--bf6-shadow);
  padding: 16px;
}

/* Header */
.bf6-header{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.bf6-header::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 120px at -10% -40%, rgba(76,175,80,.07), transparent 60%),
              radial-gradient(600px 120px at 110% 140%, rgba(76,175,80,.06), transparent 60%);
  pointer-events:none;
}

.bf6-avatar{
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(76,175,80,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.bf6-identity{ display:flex; flex-direction:column; gap:6px; }
.bf6-name{ font-weight: 800; font-size: clamp(18px, 2.8vw, 24px); letter-spacing:.2px; }
.bf6-subtle{ color: var(--bf6-muted); font-size: 12.5px; }

.bf6-tag{
  display:inline-block; margin-top:4px;
  background: rgba(76,175,80,.12);
  color: #d6ffe0; border:1px solid rgba(76,175,80,.35);
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* Grid padrão (quando usar 3 colunas) */
.bf6-grid{
  display: grid;
  gap: var(--bf6-gap);
  grid-template-columns: repeat(12, 1fr);
}
.bf6-grid > .bf6-card{ grid-column: span 12; }
@media (min-width: 680px){
  .bf6-grid > .bf6-card{ grid-column: span 6; }
  .bf6-grid > .bf6-stats{ grid-column: span 12; }
}
@media (min-width: 980px){
  .bf6-grid > .bf6-card{ grid-column: span 4; }
  .bf6-grid > .bf6-stats{ grid-column: span 4; }
}

/* Linha única central (Estatísticas sozinha) */
.bf6-row-center{
  display:flex;
  justify-content:center;
}
.bf6-row-center .bf6-card{
  width:100%;
  max-width: 760px; /* ajuste livre 640–840 */
}

/* Grades de 2 colunas (linhas de baixo) */
.bf6-grid-two{
  display:grid;
  gap: var(--bf6-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .bf6-grid-two{ grid-template-columns: 1fr 1fr; }
}

/* Títulos e subtítulos */
.bf6-title{
  font-weight: 700; letter-spacing:.3px; margin-bottom: 10px;
  font-size: 14px; text-transform: uppercase; color: #cfe7d4;
}
.bf6-sub{ font-size: 13px; color: var(--bf6-text); opacity:.92; margin-bottom: 8px; }

/* Imagens padrão */
.bf6-img{
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  border:1px solid var(--bf6-border);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.bf6-img:hover{ transform: translateY(-2px) scale(1.01); }

/* Lista de estatísticas */
.bf6-stats-list{
  list-style:none; margin:0; padding:0; display:grid; gap:8px;
}
.bf6-stat-item{
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(255,255,255,.02);
  border:1px solid var(--bf6-border);
  border-radius:12px; padding:10px 12px;
}
.bf6-stat-name{ color:var(--bf6-muted); font-size:12.5px; }
.bf6-stat-value{ font-weight:700; font-variant-numeric: tabular-nums; }
.bf6-pill{
  display:inline-block; margin-left:8px; padding:2px 6px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid var(--bf6-border); font-size:11.5px;
}

/* Lista mini */
.bf6-mini{
  list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px;
  font-size:12.5px; color:var(--bf6-muted);
}
.bf6-mini li{ display:flex; justify-content:space-between; }

/* Thumbs (armas) */
.bf6-list-thumb{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.bf6-thumb{
  display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center;
  background:rgba(255,255,255,.02);
  border:1px solid var(--bf6-border); border-radius:12px; padding:8px;
  transition:transform .2s ease, border-color .2s ease;
}
.bf6-thumb:hover{ transform:translateY(-2px); border-color:rgba(76,175,80,.35); }
.bf6-thumb img{
  width:72px; height:72px; border-radius:10px; object-fit:cover; border:1px solid var(--bf6-border);
}
.bf6-bold{ font-weight:700; }
.bf6-thumb .bf6-subtle{ margin-top:2px; }

/* Micro animações / feedback */
@keyframes bf6Pulse {
  0%{ box-shadow:0 0 0 0 rgba(76,175,80,.35); }
  70%{ box-shadow:0 0 0 10px rgba(76,175,80,0); }
  100%{ box-shadow:0 0 0 0 rgba(76,175,80,0); }
}
.bf6-highlight{
  border-color: rgba(76,175,80,.55) !important;
  animation: bf6Pulse 1.6s ease-out 1;
}

/* Scroll */
.bf6-card::-webkit-scrollbar{ height:8px; width:8px; }
.bf6-card::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:8px; }
.bf6-card::-webkit-scrollbar-track{ background:transparent; }

/* Container pai */
.bf6-root{
  background: var(--bf6-bg);
  padding: clamp(10px, 2.5vw, 18px);
  border-radius: 20px;
  border: 1px solid var(--bf6-border);
}

/* ========== ULTRA COMPACTO: Classe mais jogada + Veículo mais usado ========== */
.bf6-card.bf6-compact{
  padding:10px;
  border-radius:12px;
}
.bf6-card.bf6-compact .bf6-title{ font-size:11.5px; margin-bottom:6px; }
.bf6-card.bf6-compact .bf6-sub{   font-size:11.5px; margin-bottom:6px; opacity:.9; }

/* Linha: imagem menor à esquerda + conteúdo à direita */
.bf6-card.bf6-compact-row{
  display:grid;
  grid-template-columns:96px 1fr;    /* bem compacto */
  column-gap:10px;
  align-items:start;
  grid-auto-rows:min-content;
}
.bf6-card.bf6-compact-row .bf6-title{ grid-column:1 / -1; margin-bottom:6px; }
.bf6-card.bf6-compact-row .bf6-sub,
.bf6-card.bf6-compact-row .bf6-mini{ grid-column:2 / -1; }

/* Imagem realmente pequena (ignora 16:9 padrão) */
.bf6-card.bf6-compact-row .bf6-img{
  grid-column:1 / 2;
  width:100%;
  height:72px !important;
  max-height:72px !important;
  aspect-ratio:auto !important;
  object-fit:cover;
  margin:0;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transform:none;
}
@media (min-width:980px){
  .bf6-card.bf6-compact-row .bf6-img{
    height:88px !important; max-height:88px !important;
  }
}

/* Listas ainda mais enxutas dentro dos compactos */
.bf6-card.bf6-compact .bf6-mini{
  font-size:11.5px;
  gap:4px; margin-top:6px;
  display:grid; grid-template-columns:1fr;
}
@media (min-width:680px){
  .bf6-card.bf6-compact .bf6-mini{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.bf6-card.bf6-compact .bf6-mini li{ gap:6px; }









/* — Cards de armas — */
.weapon-card {
  background: #2b2b2b;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 10px auto;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  text-align: center;
  transition: transform 0.2s ease;
}
.weapon-card:hover { transform: translateY(-2px); }

.alert-yellow { border-left: 5px solid #FFD700; }
.alert-orange { border-left: 5px solid #FF8C00; }
.alert-red    { border-left: 5px solid #FF4444; }

.weapon-card h4 { margin-bottom: 8px; color: #f0f0f0; }
.weapon-card p { margin: 3px 0; font-size: 14px; }

/* — Outros nomes — */
.outros-nomes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 800px;
  margin: auto;
}
.outros-nomes-item {
  flex: 1 1 calc(33.33% - 10px);
  text-align: center;
  min-width: 150px;
  color: white;
}
.adm-version {
  font-weight: bold;
  color: #ffcc00;
  font-size: 1.2em;
  text-transform: uppercase;
}

/* Responsividade */
@media screen and (max-width: 950px) {
  iframe[title="perfil"] { display: none; }
}

/* Botões principais */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  margin: 5px;
  transition: transform 0.2s ease, background 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-danger { background: #e53935; color: #fff; }
.btn-danger:hover { background: #c62828; }

.btn-success { background: #10B981; color: #fff; }
.btn-success:hover { background: #0d946b; }

.btn-primary { background: #3b82f6; color: #fff; margin-top: 15px; }
.btn-primary:hover { background: #2563eb; }

/* Card ID */
.info-card {
  background: #2b2b2b;
  padding: 8px 15px;
  border-radius: 6px;
  margin: 15px auto;
  max-width: 320px;
  text-align: left;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Iframe */
.stats-widget {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  margin: 15px auto;
  display: block;
}

/* Legendas */
.legend p {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  margin: 4px auto;
  width: fit-content;
  font-size: 13px;
  background: rgba(255,255,255,0.05);
}
.legend .yellow { color: #FFD700; }
.legend .orange { color: #FF8C00; }
.legend .red { color: #FF4444; }

/* Botões secundários */
.secondary-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 15px;
}
.secondary-buttons button {
  background: #3a3a3a;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  transition: background 0.2s;
}
.secondary-buttons button:hover { background: #555; }

/* Modal amigo */
#modal-amigo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#modal-amigo-content { color: white; text-align: center; font-family: sans-serif; }
#modal-amigo-content img {
  width: 100px;
  animation: pulse 2s infinite ease-in-out;
}
#modal-amigo-texto { font-size: 18px; margin-top: 20px; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}