/* ─────────────────────────────────────────────────────────────────────────────
   Accueil et salle d'attente.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Écran d'entrée ──────────────────────────────────────────────────────── */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  overflow-y: auto;
  padding: max(var(--pad), env(safe-area-inset-top)) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
  background-color: var(--ink-1);
  background-image: radial-gradient(var(--ink-2) 2.5px, transparent 3px);
  background-size: 30px 30px;
  cursor: pointer; /* un clic n'importe où fait entrer */
}

.splash__inner {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 5vh, 44px);
  width: min(100%, 760px);
  margin: auto;
  container-type: inline-size;
}

.splash .logo {
  justify-items: center;
}

/* Un seul gros dé qui tourne en attendant. */
.tray--splash {
  --die: clamp(96px, 30cqi, 190px);
  padding-block: calc(var(--die) * 0.1);
  animation: slab-in 700ms var(--ease-out) 200ms both;
}

.splash .btn {
  min-width: min(100%, 300px);
  animation: slab-in 700ms var(--ease-out) 320ms both;
}

.splash .facts-slot {
  animation: slab-in 700ms var(--ease-out) 520ms both;
}

.splash__note {
  color: var(--paper-dim);
  font-weight: 600;
  text-align: center;
  animation: slab-in 700ms var(--ease-out) 420ms both;
}

/* ── Accueil ─────────────────────────────────────────────────────────────── */

.home {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: calc(100dvh - 64px - var(--pad));
  padding-block: clamp(8px, 3vh, 40px);
}

.home__hero {
  display: grid;
  gap: clamp(18px, 3vh, 32px);
  /* Permet de dimensionner le logo d'après la largeur de cette colonne (unités cqi). */
  container-type: inline-size;
}

/* Le logo : « Mega » en étiquette inclinée, « Yahtzee » en très gros. */
.logo {
  display: grid;
  justify-items: start;
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 0.86;
}

.logo__line {
  display: block;
  animation: logo-in 800ms var(--ease-out) both;
}

.logo__line--mega {
  position: relative;
  z-index: 1;
  margin: 0 0 -0.12em 0.1em;
  padding: 0.18em 0.42em 0.12em;
  border-radius: 0.24em;
  background: var(--p0);
  color: var(--ink-0);
  font-size: clamp(1.2rem, 5.6cqi, 3.2rem);
  rotate: -5deg;
}

.logo__line--yahtzee {
  font-size: clamp(2.4rem, 14.6cqi, 8.6rem);
  letter-spacing: -0.03em;
  animation-delay: 90ms;
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: translateY(0.5em) scale(0.92);
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(-20% -20% -20% -20%);
  }
}

/* Une grande plage de couleur porte les dés de démonstration. */
.home__dice {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3vh, 26px);
  padding: clamp(22px, 5cqi, 44px) clamp(12px, 3cqi, 30px) clamp(16px, 3cqi, 26px);
  border-radius: var(--radius);
  background: var(--p1);
  /* Ici les unités cqi des dés se rapportent à cette plage. */
  container-type: inline-size;
  animation: slab-in 700ms var(--ease-out) 160ms both;
}

.home__dice .btn--ghost {
  --btn-fg: var(--ink-0);
  box-shadow: inset 0 0 0 2px var(--ink-0);
}

.home__dice .btn--ghost:disabled {
  --btn-bg: transparent;
  --btn-fg: var(--ink-0);
  box-shadow: inset 0 0 0 2px rgb(13 6 34 / 0.35);
  opacity: 0.55;
}

@keyframes slab-in {
  from {
    opacity: 0;
    transform: translateY(30px) rotate(1.5deg);
  }
}

.home__hint {
  max-width: 34ch;
  color: var(--ink-0);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-wrap: balance;
}

.home__pitch {
  max-width: 34ch;
  font-size: clamp(1.05rem, 2.2cqi, 1.3rem);
  font-weight: 600;
  color: var(--paper-dim);
  text-wrap: balance;
}

.home__panel {
  display: grid;
  gap: 16px;
  align-content: start;
  animation: slab-in 700ms var(--ease-out) 240ms both;
}

/* ── Arrivée par un lien d'invitation ────────────────────────────────────── */
/* Le panneau dit qui invite et dans quelle salle. Les onglets, le texte
   d'explication et le champ du code n'ont plus lieu d'être : le code est connu. */

.invite {
  display: grid;
  gap: 12px;
}

.invite__title {
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

.invite__room {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invite__label {
  color: var(--paper-dim);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Le code, en petites tuiles (les mêmes que dans la salle d'attente). */
.code-tiles--small {
  gap: 6px;
}

.code-tiles--small .code-tiles__tile {
  width: 46px;
  border-radius: 11px;
  font-size: 1.8rem;
  box-shadow: none;
}

.home__panel.is-invited :is(.tabs, .is-off, #pane-join .field) {
  display: none;
}

/* Sur téléphone, le panneau d'invitation passe juste sous le logo : on voit
   sans faire défiler qu'on est attendu, et où saisir son pseudo. */
@media (max-width: 899px) {
  .home.is-invited {
    container-type: inline-size; /* le logo garde la taille qu'il a d'habitude */
  }

  .home.is-invited .home__hero {
    display: contents;
  }

  .home.is-invited :is(.home__panel, .home__extras) {
    order: 1;
  }

  .home.is-invited :is(.home__dice, .home__pitch, .leaderboard, .home__aside) {
    order: 2;
  }
}

/* Sur un téléphone étroit, les trois onglets rapetissent un peu pour que
   « Même écran » tienne en entier. */
.home__panel .tabs__tab {
  padding-inline: 4px;
  font-size: clamp(0.7rem, 3.5vw, 0.9rem);
}

/* ── Un panneau qui ne change pas de taille ──────────────────────────────── */
/* Le principe, utilisé deux fois ci-dessous : plusieurs blocs sont placés dans
   LA MÊME CASE d'une grille. Un seul est visible, les autres sont invisibles
   (classe « is-off ») mais comptent toujours pour la taille. La case a donc
   la hauteur du plus grand, quel que soit celui qu'on regarde. */

.home__panel .is-off {
  visibility: hidden;
}

/* Sous les onglets : l'explication de l'onglet, ou le message d'erreur à sa place. */
.home__message {
  display: grid;
  align-items: center;
  /* Deux lignes de message d'erreur tiennent toujours (ses marges comprises). */
  min-height: calc(3em + 16px);
}

.home__message > * {
  grid-area: 1 / 1;
}

.home__message .form-error {
  padding-block: 8px;
}

.home__lead {
  color: var(--paper-dim);
  font-weight: 600;
  text-wrap: balance;
}

/* Les champs. Deux rangées : le pseudo, puis le contenu de l'onglet.
   « Créer » et « Rejoindre » se partagent la seconde ; « Même écran », qui n'a
   pas besoin du pseudo, s'étale sur les deux. */
.home__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 16px;
}

#name-field {
  grid-area: 1 / 1;
}

#pane-create,
#pane-join {
  grid-area: 2 / 1;
}

#pane-local {
  grid-area: 1 / 1 / 3 / 2;
}

/* Le contenu d'un onglet. Son bouton d'action est toujours tout en bas : il
   est donc au même endroit dans les trois onglets. */
.home__pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home__pane > .btn--primary {
  margin-top: auto;
}

/* Liste des joueurs d'une partie sur un seul appareil. */
.local-names {
  display: grid;
  gap: 8px;
}

.local-names__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  animation: seat-in 420ms var(--ease-spring) both;
}

/* La pastille du joueur : son numéro (ou l'icône du robot) sur sa couleur.
   Un clic ouvre la palette juste en dessous. */
.local-names__color {
  display: grid;
  place-items: center;
  width: 46px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--c);
  color: var(--ink-0);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.2rem;
  transition:
    transform 200ms var(--ease-spring),
    background-color 250ms;
}

.local-names__color:hover {
  transform: scale(1.08) rotate(-4deg);
}

.local-names__color:active {
  transform: scale(0.92);
}

.local-names__color[aria-expanded='true'] {
  box-shadow:
    0 0 0 3px var(--ink-2),
    0 0 0 6px var(--c);
}

/* La palette occupe toute la largeur de la ligne. */
.local-names__palette {
  grid-column: 1 / -1;
  padding: 6px 2px 8px;
  animation: slab-in 320ms var(--ease-out) both;
}

/* Le niveau d'un robot : un bouton qui passe de facile à moyen à difficile. */
.local-names__level,
.seat__level {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--paper);
  font-weight: 800;
  font-stretch: 90%;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: transform 180ms var(--ease-spring);
}

.local-names__level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  background: var(--ink-3);
}

.local-names__level:hover,
.seat__level:hover {
  transform: scale(1.06);
}

.local-names__level:active,
.seat__level:active {
  transform: scale(0.92);
}

/* Une ligne de robot a une colonne de plus (son niveau). */
.local-names__row:has(.local-names__level) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* « + Joueur » et « + Robot », côte à côte. */
.home__adders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Hors du panneau : les règles du jeu et les statistiques, côte à côte.
   (Sous le panneau sur téléphone, sous la phrase d'accroche sur grand écran.) */
.home__extras {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  animation: slab-in 700ms var(--ease-out) 300ms both;
}

.local-names__remove {
  height: 52px;
  background: var(--ink-3);
}

/* Les parties en direct, puis les anecdotes. */
.home__aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* « En direct » : les parties ouvertes au public, à regarder. Une carte par
   partie : ses joueurs (chacun à sa couleur), où elle en est, « Regarder ». */
.live {
  display: grid;
  gap: 10px;
  animation: slab-in 600ms var(--ease-out) both;
}

.live__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
}

/* Le voyant « en direct » : un point qui palpite. */
.live__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 var(--danger);
  animation: live-pulse 1.6s ease-out infinite;
}

@keyframes live-pulse {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.live__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.live__game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'players go'
    'meta    go';
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--ink-2);
  text-align: left;
  transition:
    transform 200ms var(--ease-spring),
    background-color 200ms;
}

.live__game:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--ink-3);
}

.live__game:disabled {
  opacity: 0.6;
}

.live__players {
  grid-area: players;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-weight: 800;
}

/* Chaque joueur à sa couleur, précédé d'une pastille (ou de l'icône du robot). */
.live__player {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c);
}

.live__player:not(:has(.icon))::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.live__player .icon {
  width: 1em;
  height: 1em;
}

.live__meta {
  grid-area: meta;
  color: var(--paper-dim);
  font-weight: 600;
  font-size: 0.85rem;
}

.live__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 99px;
  background: var(--p0);
  color: var(--ink-0);
  font-weight: 800;
  font-size: 0.85rem;
}

.live__go .icon {
  width: 18px;
  height: 18px;
}

.live__game:disabled .live__go {
  background: var(--ink-4);
  color: var(--paper-dim);
}

/* Refus (pseudo manquant, salle introuvable…) : le panneau fait « non » de la tête. */
.home__panel.is-refused {
  animation: refuse 380ms ease-in-out;
}

@keyframes refuse {
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(3px);
  }
}

.resume {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px;
  border-radius: var(--radius-s);
  background: var(--ink-3);
  font-weight: 600;
}

/* ── Bandeau du classement général ───────────────────────────────────────── */
/* Une barre de hauteur fixe. Ses « faces » (record de toujours, record de la
   semaine, dernière partie) se succèdent à l'intérieur, chacune dans sa
   couleur : le reste de la page ne bouge donc jamais. */

.leaderboard {
  position: relative;
  display: block;
  width: 100%;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--ink-3);
  text-align: left;
  box-shadow: var(--shadow);
  /* Permet d'adapter le texte à la largeur du bandeau lui-même (voir plus bas). */
  container-type: inline-size;
  animation: slab-in 700ms var(--ease-out) 200ms both;
  transition: transform 200ms var(--ease-spring);
}

.leaderboard:hover {
  transform: translateY(-3px) rotate(-0.6deg);
}

.leaderboard:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* Le classement vient de changer (une partie s'est terminée) : le bandeau sursaute. */
.leaderboard.is-fresh {
  animation: leaderboard-pop 620ms var(--ease-spring);
}

@keyframes leaderboard-pop {
  30% {
    transform: scale(1.06) rotate(-1.4deg);
  }
}

/* Une face : la pastille à gauche, le libellé au-dessus du nom, le score à droite. */
.leaderboard__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'badge label label more'
    'badge name  score more';
  align-content: center;
  column-gap: 12px;
  padding: 0 10px 0 11px;
  background: var(--c);
  color: var(--ink-0);
}

/* Rien à annoncer (classement vide, ou pas encore arrivé) : une face sobre. */
.leaderboard__face--quiet {
  --c: var(--ink-3);
  color: var(--paper);
}

/* La nouvelle face recouvre l'ancienne, de gauche à droite, par un bord en biais. */
.leaderboard__face.is-entering {
  animation: leaderboard-wipe 560ms var(--ease-out) both;
}

@keyframes leaderboard-wipe {
  from {
    clip-path: polygon(0 0, 0 0, -16% 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 116% 0, 100% 100%, 0 100%);
  }
}

.leaderboard__badge {
  grid-area: badge;
  align-self: center;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--c);
}

.leaderboard__face--quiet .leaderboard__badge {
  color: var(--paper-dim);
}

.leaderboard__badge .icon {
  width: 26px;
  height: 26px;
}

.leaderboard__label {
  grid-area: label;
  overflow: hidden;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard__name {
  grid-area: name;
  align-self: baseline;
  overflow: hidden;
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard__score {
  grid-area: score;
  align-self: baseline;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Le chevron : « il y a une suite, touche-moi ». */
.leaderboard__more {
  grid-area: more;
  align-self: center;
  display: grid;
  opacity: 0.6;
  transition:
    transform 200ms var(--ease-spring),
    opacity 200ms;
}

.leaderboard:hover .leaderboard__more {
  transform: translateX(3px);
  opacity: 1;
}

.leaderboard__more .icon {
  width: 20px;
  height: 20px;
}

/* Bandeau étroit (téléphone) : le texte se resserre pour qu'un long pseudo tienne. */
@container (max-width: 400px) {
  .leaderboard__face {
    column-gap: 10px;
  }

  .leaderboard__name {
    font-size: 1.05rem;
  }

  .leaderboard__score {
    font-size: 1.35rem;
  }
}

@media (min-width: 900px) {
  /* Grand écran : une grille de deux colonnes et quatre rangées.

       logo        classement
       dés         panneau      ← même haut, même bas
       phrase      en direct (s'il y a des parties à regarder), anecdotes
       boutons     (suite)

     Le panneau et l'encadré des anecdotes ont une taille fixe : changer
     d'onglet ou d'anecdote ne déplace rien. Tout est de plus accroché PAR LE
     HAUT : si le panneau grandit quand même (un joueur de plus dans « Même
     écran »), ce qui est au-dessus ne bouge pas — en particulier les
     onglets, qui restent sous le doigt. */
  .home {
    --side: 440px; /* largeur de la colonne de droite */
    grid-template-columns: minmax(0, 1fr) minmax(330px, var(--side));
    grid-template-areas:
      'logo   board'
      'dice   panel'
      'pitch  aside'
      'extras aside'
      '.      aside';
    /* La dernière rangée, élastique, prend la hauteur du bloc de droite quand
       il dépasse (plusieurs parties en direct) : la phrase et les boutons de
       gauche restent collés aux dés au lieu d'être repoussés vers le bas. */
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    align-content: start;
    row-gap: clamp(16px, 2.6vh, 28px);
    /* Marge du haut : elle grandit avec la hauteur de l'écran, pour que
       l'ensemble (environ 750px de haut) paraisse centré sans jamais l'être
       par calcul — sinon il se déplacerait à chaque changement de hauteur. */
    padding-top: clamp(8px, (100dvh - 64px - 780px) * 0.42, 170px);
    padding-bottom: 0;
    /* Le logo se dimensionne d'après la largeur de l'accueil (unités cqi). */
    container-type: inline-size;
  }

  /* Le bloc « logo + dés + phrase » s'efface : ses trois enfants prennent
     place directement dans la grille de l'accueil. */
  .home__hero {
    display: contents;
  }

  .home .logo {
    --column: calc(100cqi - var(--side) - 4vw); /* largeur de la colonne de gauche */
    grid-area: logo;
  }

  /* Sa taille suit la largeur de la colonne, sans dépasser une part de la
     hauteur de l'écran : sur un écran peu haut, le panneau reste visible. */
  .home .logo__line--mega {
    font-size: clamp(1.2rem, min(var(--column) * 0.056, 5.4vh), 3.2rem);
  }

  .home .logo__line--yahtzee {
    font-size: clamp(2.4rem, min(var(--column) * 0.146, 14vh), 8.6rem);
  }

  /* Les dés et le panneau partagent la même rangée : même bord haut, même
     bord bas. Si le panneau est plus grand, la plage de couleur s'étire et
     ses dés restent au milieu. */
  .home__dice {
    grid-area: dice;
    align-self: stretch;
    align-content: center;
  }

  /* Le bandeau du classement occupe la case libre à droite du logo, posé sur le panneau. */
  .leaderboard {
    grid-area: board;
    align-self: end;
  }

  .home__panel {
    grid-area: panel;
    align-self: stretch;
  }

  .home__pitch {
    grid-area: pitch;
    max-width: 46ch;
  }

  /* Les règles et les statistiques : sous la phrase d'accroche, à leur largeur. */
  .home__extras {
    grid-area: extras;
    justify-content: start;
    grid-template-columns: auto auto;
  }

  /* « En direct » puis les anecdotes, sous le panneau : l'arrivée d'une
     partie à regarder ne pousse que l'anecdote, en dessous. */
  .home__aside {
    grid-area: aside;
  }
}

/* Grand écran peu haut (petit ordinateur portable) : le logo remonte à côté
   des réglages du son et les rangées se resserrent, pour que tout tienne
   sans faire défiler. */
@media (min-width: 900px) and (max-height: 860px) {
  .home {
    margin-top: -36px;
    row-gap: 16px;
  }
}

/* ── Salle d'attente ─────────────────────────────────────────────────────── */

.lobby {
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding-block: clamp(8px, 4vh, 48px);
}

.lobby__invite {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.lobby__title,
.lobby__count {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

.lobby__count span {
  margin-left: 0.5em;
  color: var(--paper);
}

/* Le code : quatre grosses tuiles qui basculent une à une. */
.code-tiles {
  display: flex;
  gap: clamp(8px, 1.6vw, 14px);
  perspective: 900px;
}

.code-tiles__tile {
  display: grid;
  place-items: center;
  width: clamp(64px, 19vw, 132px);
  aspect-ratio: 1 / 1.12;
  border-radius: clamp(14px, 3vw, 24px);
  background: var(--paper);
  color: var(--ink-0);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(2.6rem, 12vw, 5.6rem);
  line-height: 1;
  box-shadow: var(--shadow);
  animation: tile-in 700ms var(--ease-spring) both;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}

.code-tiles__tile:nth-child(odd) {
  rotate: -3deg;
}

.code-tiles__tile:nth-child(even) {
  rotate: 2.5deg;
  background: var(--p0);
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: rotateX(-95deg) translateY(40px);
  }
}

.lobby__help {
  max-width: 44ch;
  color: var(--paper-dim);
  font-weight: 500;
}

/* « Copier l'invitation » et, s'il existe, « Partager… ». */
.lobby__share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lobby__room {
  display: grid;
  gap: 14px;
}

.seats {
  display: grid;
  gap: 8px;
}

.seat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-s);
  background: var(--c);
  color: var(--ink-0);
  font-weight: 800;
  font-size: 1.1rem;
}

.seat.is-new {
  animation: seat-in 520ms var(--ease-spring) both;
}

/* La place d'un robot : des hachures, comme sur une machine. D'un coup d'œil,
   on voit qui est un robot avant de lancer la partie. */
.seat--bot {
  background-image: repeating-linear-gradient(135deg, rgb(13 6 34 / 0.11) 0 9px, transparent 9px 18px);
}

.seat .bot-badge {
  font-size: 0.74rem;
}

@keyframes seat-in {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.8) rotate(-3deg);
  }
}

.seat__initial {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--c);
  font-weight: 900;
  font-stretch: 125%;
}

.seat__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat__tags,
.seat__offline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* « prêt » ou « pas prêt » : une étiquette qui se remplit quand le joueur l'est. */
.seat__ready {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgb(13 6 34 / 0.16);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.seat__ready.is-ready {
  background: var(--ink-0);
  color: var(--c);
}

.seat__ready .icon {
  width: 1em;
  height: 1em;
}

/* Le bouton « Je suis prêt », une fois enfoncé : il s'efface, la décision est prise. */
#ready-btn[aria-pressed='true'] {
  --btn-bg: var(--ink-3);
  --btn-fg: var(--paper);
}

/* ── Chat de la salle d'attente ──────────────────────────────────────────── */
/* Le fil des messages (hauteur fixe : il défile, la page ne bouge pas), puis
   les phrases toutes faites (voir .phrases dans base.css). */

.chat {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-s);
  background: var(--ink-2);
}

.chat__feed {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 128px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}

.chat__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}

.chat__line.is-new {
  animation: seat-in 420ms var(--ease-spring) both;
}

/* Un robot qui parle : son icône précède son pseudo. */
.chat__who .icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
}

/* L'auteur : son pseudo sur sa couleur. */
.chat__who {
  flex: none;
  max-width: 45%;
  padding: 1px 9px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--c);
  color: var(--ink-0);
  font-weight: 800;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat__text {
  min-width: 0;
}

.chat__empty {
  color: var(--paper-dim);
  font-weight: 500;
}

/* Le robot : son icône remplace l'initiale. */
.seat__initial .icon {
  width: 24px;
  height: 24px;
}

/* La croix pour renvoyer un robot (visible par l'hôte). */
.seat__remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--paper);
  transition: transform 180ms var(--ease-spring);
}

.seat__remove:hover {
  transform: scale(1.12) rotate(90deg);
}

.lobby__color,
.lobby__mode {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-s);
  background: var(--ink-2);
}

/* Les modes de jeu : les mêmes onglets que sur l'accueil (le choix est un
   bouton radio, pas un onglet). Trois libellés doivent tenir sur un téléphone. */
.mode-tabs .tabs__tab {
  padding: 4px;
  font-size: clamp(0.7rem, 3vw, 0.84rem);
  line-height: 1.15;
  white-space: normal; /* « Feuille commune » passe sur deux lignes s'il le faut */
}

.mode-tabs .tabs__tab[aria-checked='true'] {
  background: var(--paper);
  color: var(--ink-0);
}

/* Un invité voit le choix de l'hôte, sans pouvoir le changer. */
.mode-tabs .tabs__tab:disabled {
  cursor: default;
  transform: none;
}

/* Deux lignes réservées : l'explication change de longueur d'un mode à l'autre,
   et la liste des joueurs, dessous, ne doit pas sauter. */
.lobby__mode-help {
  min-height: 2.9em;
  color: var(--paper-dim);
  font-weight: 600;
  font-size: 0.9rem;
  text-wrap: pretty;
}

/* « Montrer la partie sur l'accueil » : un interrupteur, sous le mode de jeu.
   Toute la ligne est cliquable (c'est le <label> de la case). */
.listed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--ink-3);
  cursor: pointer;
}

.listed:has(:disabled) {
  cursor: default;
}

.listed__text {
  display: grid;
  gap: 2px;
}

.listed__title {
  font-weight: 800;
  font-size: 0.95rem;
}

.listed__help {
  color: var(--paper-dim);
  font-weight: 600;
  font-size: 0.85rem;
}

/* L'interrupteur : une case à cocher redessinée (une piste, un bouton rond qui glisse). */
.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 99px;
  background: var(--ink-4);
  cursor: inherit;
  transition: background-color 200ms;
}

.switch::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper-dim);
  transition:
    transform 260ms var(--ease-spring),
    background-color 200ms;
}

.switch:checked {
  background: var(--p0);
}

.switch:checked::before {
  transform: translateX(20px);
  background: var(--ink-0);
}

.switch:disabled {
  opacity: 0.55;
}

/* L'équipe d'un joueur : une pastille sombre, au nom écrit dans la couleur de
   l'équipe (lisible quelle que soit la couleur du joueur). */
.seat__team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 99px;
  background: var(--ink-0);
  color: var(--team);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.seat__team::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--team);
}

/* Celle qu'on peut toucher (la sienne, ou un robot pour l'hôte) : une double flèche l'annonce. */
button.seat__team {
  transition: transform 180ms var(--ease-spring);
}

button.seat__team::after {
  content: '⇄';
  color: var(--paper-dim);
}

button.seat__team:hover {
  transform: scale(1.06);
}

button.seat__team:active {
  transform: scale(0.92);
}

.seat.is-offline {
  background: var(--ink-3);
  color: var(--paper-dim);
}

.seat--empty {
  padding-left: 16px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-3);
  color: var(--paper-mute);
  font-weight: 600;
  font-size: 1rem;
}

/* Deux lignes sont toujours réservées : le message change de longueur selon
   la situation, et ce qui est dessous (le chat) ne doit pas bouger. */
.lobby__hint {
  display: grid;
  align-content: center;
  min-height: 2.9em;
  color: var(--paper-dim);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}

/* « Lancer sans attendre » : même bouton que « Lancer la partie », mais moins
   voyant. Le jaune est réservé au moment où tout le monde est prêt. */
#start-btn.is-forcing {
  --btn-bg: var(--ink-3);
  --btn-fg: var(--paper);
  /* Un texte plus long, dans un bouton de même hauteur : il doit tenir sur une ligne. */
  font-size: 1rem;
  font-stretch: 112%;
  white-space: nowrap;
}

@media (min-width: 860px) {
  .lobby {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 460px);
    gap: clamp(32px, 6vw, 96px);
  }

  /* À gauche, sous l'invitation : le chat, puis les anecdotes. */
  .lobby {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'invite room'
      'chat room'
      'facts room';
    row-gap: 24px;
  }

  .lobby__chat {
    grid-area: chat;
  }

  .lobby__invite {
    grid-area: invite;
    padding-top: 8px;
  }

  .lobby__room {
    grid-area: room;
  }

  .lobby__facts {
    grid-area: facts;
    align-self: start;
  }
}