/* droplist.css */

.droplist-box {
  background: rgba(0, 0, 0, 0.7);
  border: 3px solid #b8860b;
  border-radius: 15px;
  padding: 30px;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.droplist-box h2 {
  color: #ffd700;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'MedievalSharp', cursive;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  border-bottom: 2px solid #b8860b;
  padding-bottom: 15px;
}

/* FILTROS */
.drop-filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.drop-filters .filter-btn {
  background: rgba(139, 69, 19, 0.3);
  border: 2px solid #8b4513;
  color: #ffd700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'MedievalSharp', cursive;
}

.drop-filters .filter-btn:hover,
.drop-filters .filter-btn.active {
  background: linear-gradient(135deg, #b8860b, #ffd700);
  color: #000;
  transform: scale(1.05);
}

/* TABELAS */
.drop-table-container {
  overflow-x: auto;
  margin-bottom: 30px; /* espaço entre bosses */
}

.drop-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.drop-table th {
  font-family: 'MedievalSharp', cursive;
}

.drop-table td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
  border-right: 1px solid rgba(139, 69, 19, 0.2);
  background: rgba(0, 0, 0, 0.3);
}

.drop-table td:last-child { border-right: none; }
.drop-table tr:last-child td { border-bottom: none; }

.drop-table tr:hover td {
  background: rgba(139, 69, 19, 0.2);
}

/* ITENS / RATE */
.item-name {
  font-weight: bold;
  font-size: 1.1rem;
}

.drop-rate {
  color: #22c55e;
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
}

/* Cabeçalho Azul Noturno (borda completa) */
.drop-table thead th[colspan="2"] {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 12px;
  border: 2px solid #b8860b;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(184, 134, 11, 0.4);
}

/* ===== COR DINÂMICA (Bosses + Maps) ===== */

/* Bosses */
.drop-table-container[class*="boss-"] {
  --boss-color: #f1f5f9; /* cor padrão */
}

.drop-table-container[class*="boss-"] thead th[colspan="2"],
.drop-table-container[class*="boss-"] .item-name {
  color: var(--boss-color);
}

/* Maps */
.drop-table-container[class*="map-"] {
  --map-color: #f1f5f9; /* cor padrão */
}

.drop-table-container[class*="map-"] thead th[colspan="2"],
.drop-table-container[class*="map-"] .item-name {
  color: var(--map-color);
}
/* Island Bosses - azul de praia */
.island-bosses {
  --map-color: #38bdf8; /* Azul claro de praia (tailwind sky-400) */
}

.drop-table-container.island-bosses thead th[colspan="2"],
.drop-table-container.island-bosses .item-name {
  color: var(--map-color);
}
/* GRB Rewards - Roxo místico */
.grb-rewards {
  --map-color: #a78bfa; /* lilás/roxo (tailwind violet-400) */
}

.drop-table-container.grb-rewards thead th[colspan="2"],
.drop-table-container.grb-rewards .item-name {
  color: var(--map-color);
}
/* ===== MOBS dentro do GRB ===== */
.drop-table-container[class*="mobs-"] {
  --mob-color: #f1f5f9; /* cor padrão */
}

.drop-table-container[class*="mobs-"] thead th[colspan="2"],
.drop-table-container[class*="mobs-"] .item-name {
  color: var(--mob-color);
}

/* cores individuais */
.mobs-60 { --mob-color: #f87171; } /* vermelho suave */
.mobs-30 { --mob-color: #fbbf24; } /* amarelo dourado */
.mobs-15 { --mob-color: #34d399; } /* verde esmeralda */


/* ===== CORES DOS 19 BOSSES ===== */
.boss-mage1 { --boss-color: #60a5fa; } /* First Mage – azul claro */
.boss-mage2 { --boss-color: #a78bfa; } /* Second Mage – lilás */
.boss-mage3 { --boss-color: #f472b6; } /* Third Mage – rosa */
.boss-mage4 { --boss-color: #34d399; } /* Fourth Mage – verde */


.boss-cloron-dragon  { --boss-color: #f87171; } /* Cloron Dragon */
.boss-fantasma-dragon{ --boss-color: #a78bfa; } /* Fantasma Dragon */
.boss-greendieta     { --boss-color: #34d399; } /* Greendieta Seraphim */
.boss-kimuraki       { --boss-color: #fbbf24; } /* Kimuraki */
.boss-lich           { --boss-color: #9ca3af; } /* Lich */
.boss-dios           { --boss-color: #facc15; } /* Dios Exiel */
.boss-haruhion       { --boss-color: #38bdf8; } /* Haruhion */
.boss-cloron         { --boss-color: #ef4444; } /* Cloron */
.boss-keilun         { --boss-color: #22d3ee; } /* Keilun */
.boss-queen-vanus    { --boss-color: #f472b6; } /* Queen Vanus */
.boss-desiree        { --boss-color: #e879f9; } /* Desiree */
.boss-tanuvie        { --boss-color: #818cf8; } /* Tanuvie Dwight */
.boss-groot          { --boss-color: #4ade80; } /* Groot */
.boss-fantasma       { --boss-color: #c084fc; } /* Fantasma */
.boss-freezing       { --boss-color: #93c5fd; } /* Freezing Mirage */
.boss-astaroth       { --boss-color: #dc2626; } /* Astaroth – vermelho intenso */
.boss-ankylul        { --boss-color: #0ea5e9; } /* Ankylul Wild Dark – azul escuro vibrante */



/* ===== CORES DOS MAPAS ===== */
.map-proelium15 { --map-color: #60a5fa; }  /* Azul claro */
.map-proelium30 { --map-color: #fbbf24; }  /* Amarelo dourado */
.map-desert     { --map-color: #34d399; }  /* Verde esmeralda */
.map-desert2    { --map-color: #ef4444; }  /* Vermelho forte */
.map-stable     { --map-color: #a78bfa; }  /* Roxo/lilás */






/* RESPONSIVO */
@media (max-width: 768px) {
  .drop-table th,
  .drop-table td { padding: 8px 10px; font-size: 0.9rem; }
  .item-name { font-size: 1rem; }
  .drop-rate { font-size: 1rem; }
}

@media (max-width: 480px) {
  .drop-table th,
  .drop-table td { padding: 6px 8px; font-size: 0.8rem; }
  .drop-filters .filter-btn { padding: 8px 15px; font-size: 0.9rem; }
}
/* === FIX UNIFICADO DO DIVISOR ENTRE COLUNAS === */

/* 1) Tabela ocupa 100% */
.drop-table {
  width: 100%;
  table-layout: auto; /* 👈 deixa colunas dimensionarem automaticamente */
}

/* 2) Reset das bordas */
.drop-table td {
  border-right: none !important;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
  word-wrap: break-word;
}

/* 3) Divisor só na segunda coluna */
.drop-table td + td {
  border-left: 1px solid rgba(139, 69, 19, 0.3);
  text-align: center;
  white-space: nowrap;
  width: 150px;   /* 👈 largura confortável da coluna de % */
}


/* 4) Remove borda de baixo da última linha */
.drop-table tr:last-child td {
  border-bottom: none;
}