.games-container { max-width: 1200px; margin: 0 auto; }
    #gameCards { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
    @media (min-width: 768px) { #gameCards { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1200px) { #gameCards { grid-template-columns: repeat(4, 1fr); } }
    .game-card {
      background: var(--glass-bg); border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg); padding: var(--space-lg);
      display: flex; flex-direction: column; gap: var(--space-md);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }
    .game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .game-card-icon { font-size: 2.5rem; flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-500), var(--orange)); border-radius: var(--radius-lg); margin-bottom: 4px; }
    .game-card-info { flex: 1; }
    .game-card-info h3 { margin-bottom: 4px; font-size: 1.1rem; }
    .game-card-info .desc { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 4px; line-height: 1.5; }
    .game-card-info .meta { font-size: 0.78rem; color: var(--text-muted); }
    .game-card-actions { display: flex; flex-direction: column; gap: 6px; }
    .game-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .game-tags span {
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(251,191,36,.12);
      border: 1px solid rgba(251,191,36,.25);
      color: #fbbf24;
      font-size: .78rem;
      font-weight: 800;
    }
    .rooms-section { margin-top: var(--space-xl); }
    .room-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
    .room-row .room-info { flex: 1; }
    .room-row .room-host { font-weight: 700; }
    .room-row .room-meta { font-size: 0.8rem; color: var(--text-muted); }
    .active-game-banner {
      background: linear-gradient(135deg, rgba(240,165,0,0.2), rgba(255,193,7,0.15));
      border: 2px solid var(--gold-500);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
      animation: winGlow 1.5s ease-in-out infinite;
    }
    .active-game-banner .banner-icon { font-size: 2.5rem; }
    .active-game-banner .banner-info { flex: 1; min-width: 200px; }
    .active-game-banner .banner-info h3 { margin: 0 0 4px; color: var(--gold-400); }
    .active-game-banner .banner-info .banner-meta { font-size: 0.85rem; color: var(--text-secondary); }
    @keyframes winGlow {
      0%, 100% { box-shadow: 0 0 30px rgba(240,165,0,0.25), 0 0 60px rgba(240,165,0,0.1); }
      50% { box-shadow: 0 0 50px rgba(240,165,0,0.5), 0 0 100px rgba(240,165,0,0.2); }
    }