/* css/games.css
   Section "🎮 Jeux" (voir js/gamesUI.js, js/gamesData.js) : chip d'accès
   dans la topbar de l'écran de mise en relation, catalogue de jeux en
   grille, fiche détaillée en modale, et habillage "salle de jeu" de
   l'écran d'appel de groupe existant (.groups-screen, voir css/match.css)
   quand il est ouvert depuis un jeu plutôt que depuis l'annuaire libre. */

/* ---------- Chip d'accès (barre du haut, à côté de "X en ligne") ----------
   Icône seule (pas de libellé) : la barre du haut contient déjà le chip de
   langue + le compteur "en ligne" avant l'avatar de profil — sur un petit
   écran (≤360px), un 3ᵉ badge avec texte ferait déborder la ligne. */
.games-chip {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  font-size: 1.1rem;
  box-shadow: var(--shadow-brand);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.games-chip:active {
  transform: scale(0.96);
}

/* Rapetisse avec le reste de la barre du haut sur petit écran (voir
   @media (max-width: 600px), css/match.css) : évite que ces deux icônes ne
   poussent la barre à déborder ou à passer à la ligne. */
@media (max-width: 600px) {
  .match-topbar-actions .games-chip {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* ---------- Écran catalogue ---------- */
.games-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}

.games-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 760px);
  margin: 0 auto;
  padding: calc(var(--space-4) + var(--safe-top)) var(--space-5) var(--space-4);
}

.games-header > div {
  flex: 1;
}

.games-header p {
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
}

.games-header strong {
  font-size: var(--fs-md);
}

.games-content {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) calc(var(--space-8) + var(--safe-bottom));
}

.games-hero {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-brand);
}

.games-hero > span {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.games-hero h1 {
  margin-top: var(--space-3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

.games-hero p {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0.92;
}

/* ---------- Grille de jeux ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.game-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.game-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.game-card:active {
  transform: translateY(0) scale(0.98);
}

.game-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--gradient-live);
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.game-card-copy {
  min-width: 0;
  flex: 1;
}

.game-card-copy h2 {
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card-copy p {
  overflow: hidden;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-card-arrow {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* ---------- Fiche détaillée (modale) ---------- */
.game-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
  /* Certaines fiches ont beaucoup de règles/variantes (ex. Battle de
     culture générale, 10 catégories) : on limite la hauteur et on fait
     défiler le contenu plutôt que de laisser la modale déborder de
     l'écran sur mobile — titre et boutons (hors de ce conteneur) restent
     toujours visibles. */
  max-height: min(52vh, 420px);
  overflow-y: auto;
  text-align: left;
}

.game-detail-intro {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.game-detail-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.game-detail-rules li {
  position: relative;
  padding-left: 26px;
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.game-detail-rules li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: rgba(47, 122, 110, 0.14);
  color: var(--color-secondary);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
}

.game-detail-variants-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.game-variant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.game-variant-tag {
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(232, 163, 61, 0.16);
  color: var(--color-warn);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ---------- Habillage "salle de jeu" de l'écran de groupe ---------- */
.game-room-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.game-room-hero-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  font-size: 2rem;
}

.game-room-hero h1 {
  margin-top: var(--space-1);
}

.game-rules-link {
  margin-top: var(--space-2);
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.group-call-header .game-rules-link-incall {
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}