/* =====================================================
   fix.css — Badlands Online Style Fixes
   ===================================================== */

/* ---------------------------------------------------
   1. Background fallback — castle image often missing
   --------------------------------------------------- */
#app {
  background:
    linear-gradient(
      180deg,
      rgba(10, 8, 5, 0.85) 0%,
      rgba(20, 15, 8, 0.7) 40%,
      rgba(10, 8, 5, 0.9) 100%
    ),
    url('https://www.badlands.online/static/images/castle-b2081532318fa056c2ed15b1ed7b4f57.jpg') center top / cover no-repeat fixed,
    #1a1510 !important;
  background-color: #1a1510 !important;
}

/* ---------------------------------------------------
   2. Fix navlogo — was 48pc (768px) yang terlalu besar
      Ganti ke max-width responsive
   --------------------------------------------------- */
img.navlogo {
  width: auto !important;
  max-width: min(600px, 80vw) !important;
  max-height: 160px !important;
  margin-top: 10px !important;
  object-fit: contain;
}

/* ---------------------------------------------------
   3. Handle broken images gracefully
      Sembunyikan broken icon, tampilkan background gelap
   --------------------------------------------------- */
img {
  /* Agar broken image tidak tampil aneh */
  min-height: 0;
}

img[src=""], img:not([src]) {
  display: none !important;
}

/* ---------------------------------------------------
   4. Navigation fix — topnav kadang overflow di mobile
   --------------------------------------------------- */
nav.topnav {
  z-index: 100;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(180, 140, 70, 0.2);
}

nav.topnav a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Aktif / hover nav lebih jelas */
nav.topnav a:hover,
nav.topnav a:focus {
  color: #e9d1ad !important;
}

/* ---------------------------------------------------
   5. Server status widget — tambahin padding & styling
   --------------------------------------------------- */
.serverstatus {
  border-radius: 12px;
  padding: 1rem !important;
  border: 1px solid rgba(180, 140, 70, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------
   6. Panel dark — sedikit lebih halus
   --------------------------------------------------- */
.panel-dark {
  border: 1px solid rgba(180, 140, 70, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------
   7. Biglink/Smalllink button — polish
   --------------------------------------------------- */
.biglink, .smalllink {
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
}

.biglink:hover, .smalllink:hover {
  box-shadow: 0 6px 20px rgba(180, 140, 70, 0.35);
  transform: translateY(-1px);
}

.biglink:active, .smalllink:active {
  transform: translateY(0);
}

/* ---------------------------------------------------
   8. Votes widget — positioning fix
   --------------------------------------------------- */
.votes {
  z-index: 50;
}

.votes img {
  border-radius: 6px;
  transition: opacity 0.2s ease;
  margin-bottom: 6px;
  display: block;
  width: 100%;
}

.votes img:hover {
  opacity: 0.85;
}

/* ---------------------------------------------------
   9. Blog cards — tambahkan hover effect lebih smooth
   --------------------------------------------------- */
.blog-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ---------------------------------------------------
   10. LED indicators — pastikan terlihat jelas
   --------------------------------------------------- */
.led-box {
  margin-bottom: 4px;
}

/* ---------------------------------------------------
   11. Scrollbar styling
   --------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #1a1510;
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 140, 70, 0.4);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 140, 70, 0.7);
}

/* ---------------------------------------------------
   12. Summary download links styling fix
   --------------------------------------------------- */
.summary.downloads a {
  display: inline-block;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.summary.downloads a:hover {
  background-color: #c4b07a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------
   13. Info panel icon alignment
   --------------------------------------------------- */
.info-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ---------------------------------------------------
   14. Feature cards polish
   --------------------------------------------------- */
.features div.featcon {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.features div.featcon:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7) !important;
}

/* ---------------------------------------------------
   15. Form inputs dark theme fixes
   --------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
select:focus,
textarea:focus {
  border-color: #e9d1ad !important;
  box-shadow: 0 0 0 2px rgba(233, 209, 173, 0.15) !important;
}