/* ==========================================================================
   Dashboard Screen Styling
   ========================================================================== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--color-bg-card);
  backdrop-filter: var(--blur-glass);
  border: var(--border-glass);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-email {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  width: 100%;
  margin: auto;
  flex: 0 1 auto;
  min-height: 0;
}

.dashboard-card {
  background: var(--color-bg-card);
  backdrop-filter: var(--blur-glass);
  border: var(--border-glass);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.promo-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--color-gold-glow) 0%,
    transparent 80%
  );
}

.promo-card h2 {
  font-family: var(--font-family-title);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gold);
}

.promo-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.list-card {
  gap: 1.5rem;
}

.list-card h2 {
  font-family: var(--font-family-title);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.running-games-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding-right: 0.5rem;
}

.no-active-games {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  border: 1px dashed hsla(0, 0%, 100%, 0.05);
  border-radius: var(--radius-md);
  padding: 3rem;
  background: hsla(0, 0%, 0%, 0.15);
}

/* Running Game Card */
.game-card-item {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.06);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all var(--transition-smooth);
}

.game-card-item:hover {
  background: hsla(0, 0%, 100%, 0.06);
  border-color: hsla(0, 0%, 100%, 0.12);
  transform: translateY(-2px);
}

.game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-card-boss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.game-card-boss.suit-hearts,
.game-card-boss.hearts {
  color: var(--color-ruby);
}
.game-card-boss.suit-diamonds,
.game-card-boss.diamonds {
  color: var(--color-amber);
}
.game-card-boss.suit-clubs,
.game-card-boss.clubs {
  color: var(--color-emerald);
}
.game-card-boss.suit-spades,
.game-card-boss.spades {
  color: var(--color-sapphire);
}

.game-card-suit-icon {
  font-size: 1.1rem;
}

.game-card-boss-name {
  font-family: var(--font-family-title);
}

.game-card-health-indicator {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.game-card-hp-bar {
  width: 100%;
  height: 4px;
  background: hsla(0, 0%, 0%, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.game-card-hp-fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-ruby), var(--color-amber));
}

.game-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.game-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.game-card-actions .btn {
  flex: 1;
}

.btn-resign-icon {
  flex: 0 0 35px !important;
  min-width: auto;
  background: hsla(342, 85%, 52%, 0.1);
  color: var(--color-ruby);
  border: 1px solid var(--color-ruby-glow);
}

.btn-resign-icon:hover {
  background: var(--color-ruby);
  color: var(--color-text-primary);
}

/* Dashboard Game Card Badges */
.game-card-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-card-badge.badge-solo {
  background: var(--color-sapphire-glow);
  color: var(--color-sapphire);
  border: 1px solid var(--color-sapphire);
}

.game-card-badge.badge-multi {
  background: var(--color-gold-glow);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.game-card-badge.badge-lobby {
  background: var(--color-amber-glow);
  color: var(--color-amber);
  border: 1px solid var(--color-amber);
}

/* Premium Multiplayer Lobby Button Styling */
#btn-dashboard-new-multiplayer {
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
  text-shadow: 0 0 5px var(--color-gold-glow);
  box-shadow: 0 0 10px hsla(45, 95%, 50%, 0.1);
  transition: all var(--transition-smooth);
}

#btn-dashboard-new-multiplayer:hover:not(:disabled) {
  background: var(--color-gold);
  color: var(--color-bg-darkest);
  box-shadow: 0 0 15px var(--color-gold-glow);
  text-shadow: none;
}

/* Responsive queries for Dashboard */
@media (max-width: 800px) {
  .dashboard-content {
    grid-template-columns: 1fr;
    overflow-y: auto;
    flex: 1;
    margin: 0;
  }
  .dashboard-card {
    padding: 1.25rem !important;
  }
  .promo-card {
    padding: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  .dashboard-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    padding: 1rem;
  }

  .user-profile {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
  }

  .user-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}