/* ======================================================
   LANDING PAGE / SERVER STATUS
====================================================== */

/* ================= DASHBOARD CARDS ================= */
.cards{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.card{
  flex:1;
  min-width:250px;
}

/* ================= PROFILE ================= */
.profile-card{
  margin-top:20px;
}

.profile-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.profile-form input{
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(0,255,255,0.3);
  background:rgba(0,0,0,0.4);
  color:#fff;
}

/* ================= CLUSTER ================= */
.cluster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:15px;
}

.server-box{
  padding:15px;
  border-radius:12px;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(0,255,255,0.3);
}
.hero-information {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.server-status,
.visitor-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    color: #ffffff;
    background: rgba(5, 15, 22, 0.78);
    border: 1px solid rgba(42, 209, 192, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

.visitor-counter strong {
    color: #45e0ca;
}
.btn-games {
    color: #ffffff;
    background: linear-gradient(135deg, #7b35d5, #b14cff);
    border: 1px solid #c879ff;
    box-shadow: 0 0 16px rgba(177, 76, 255, 0.35);
}

.btn-games:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #9148e8, #c765ff);
    box-shadow: 0 0 24px rgba(177, 76, 255, 0.65);
    transform: translateY(-2px);
}