/* Kita menumpang style gear.css, ini cuma tambahan khusus Building */

/* Warna Badge Type (Mirip style rarity-epic di gear.css) */
.type-defense { 
    color: #e74c3c; 
    font-weight: 700; 
    background: rgba(231, 76, 60, 0.1); 
    padding: 4px 10px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}

.type-trap { 
    color: #8e44ad; 
    font-weight: 700; 
    background: rgba(142, 68, 173, 0.1); 
    padding: 4px 10px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}

.type-weapon { 
    color: #d35400; 
    font-weight: 700; 
    background: rgba(211, 84, 0, 0.1); 
    padding: 4px 10px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}

.type-passive { 
    color: #27ae60; 
    font-weight: 700; 
    background: rgba(39, 174, 96, 0.1); 
    padding: 4px 10px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}

.type-common {
    color: #95a5a6;
    font-weight: 700; 
    background: rgba(149, 165, 166, 0.1); 
    padding: 4px 10px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}

/* Sedikit penyesuaian untuk gambar bangunan agar tidak kekecilan */
.gear-card img {
    /* Override ukuran gear.css (80px) jadi sedikit lebih besar untuk bangunan */
    width: 100px; 
    height: 100px;
}
/* Styling khusus untuk gambar Coming Soon */
.coming-soon-img {
    opacity: 0.5;       /* Agak transparan */
    border-radius: 8px; /* Sudut melengkung */
    padding: 5px;       /* Jarak ke tepi */
    border: 1px dashed rgba(255,255,255,0.3); /* Garis putus-putus */
}
/* =========================================
   PERBAIKAN TAMPILAN HP (RESPONSIF)
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. Perbaiki Navigasi (Supaya Logo & Menu tersusun ke bawah) */
  .nav-container {
    flex-direction: column; /* Susun ke bawah */
    height: auto; /* Tinggi otomatis menyesuaikan isi */
    padding: 15px;
    gap: 15px; /* Jarak antara logo dan menu */
  }

  .nav-menu {
    width: 100%;
    justify-content: center; /* Menu di tengah */
    padding: 0;
    gap: 10px;
  }

  /* 2. Perbaiki Grid Building (Supaya kotak tidak kekecilan) */
  /* Ubah 100px jadi 140px supaya di HP isinya 2 kolom pas, bukan 3 kolom sempit */
  .building-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 10px; /* Jarak antar kotak dirapatkan dikit */
    padding: 10px;
  }

  /* 3. Perbaiki Judul Halaman */
  .hero h1 {
    font-size: 2rem; /* Kecilkan font judul biar gak menuhin layar */
    margin-bottom: 20px;
  }
}