/* ==========================================================================
   LOBBY CATEGORY SWITCHER & SOCCER CARD STYLES
   ========================================================================== */

/* --- 1. LOBBY CATEGORY SWITCHER --- */
.lobby-category-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 760px;
  margin: 1.75rem auto 1rem;
  padding: 0.75rem 0.95rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.lobby-cat-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.05rem 1.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.lobby-cat-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.lobby-cat-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.lobby-cat-tab#tabCatEvolution.active {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 4px 20px rgba(244, 63, 94, 0.22);
}

.lobby-cat-tab#tabCatSoccer.active {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

.lobby-cat-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.lobby-cat-icon.evo-logo {
  height: 24px;
  width: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.2s;
}

.lobby-cat-icon.soccer-icon {
  height: 24px;
  width: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.2s;
}

.lobby-cat-tab.active .lobby-cat-icon {
  opacity: 1;
}

.lobby-cat-title {
  white-space: nowrap;
}

.lobby-cat-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fda4af;
  white-space: nowrap;
}

.lobby-cat-badge.soccer-badge {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

/* --- 2. SOCCER GAME CARD IN LOBBY (SINGLE CARD) --- */
.soccer-games-single-grid {
  max-width: 540px !important;
  margin: 1.5rem auto 3rem !important;
  grid-template-columns: 1fr !important;
}

.game-card.soccer-card {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(145deg, #0e2019, #091611);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.16);
  cursor: pointer;
}

.game-card.soccer-card:hover {
  transform: translateY(-4px);
  border-color: #10b981;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(16, 185, 129, 0.32);
}

.soccer-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #064e3b, #047857) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.35) !important;
}

.soccer-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.soccer-badge-live {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
}

.soccer-pulse {
  background: #10b981 !important;
}

.btn-enter-soccer {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-enter-soccer:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.5);
}

@media (max-width: 640px) {
  .lobby-category-bar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    margin: 1.25rem 0.5rem 0.75rem;
  }
  .lobby-cat-tab {
    width: 100%;
    padding: 0.85rem 1.25rem;
  }
}