/* Mise en page des trois écrans — accueil, compteur, partie.
   ⚠️ AUCUNE valeur de token ici. Tout vient de tokens.css, donc de la spec. */

/* — Chrome d'écran ---------------------------------------------------------- */
.screen {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--border-subtle);
}

/* Le titre de barre est au corps du texte, pas au corps d'un titre : sur
   390 px, « Compteur de scores » à la taille d'un titre passe à deux lignes et
   double la hauteur de la barre. L'identité d'un écran vient de son contenu.
   ⚠️ Pas de troncature : un nom de jeu coupé sur son propre écran est pire
   qu'une barre haute. Essayé, vu, retiré. */
.screen__bar h1 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin: 0;
  flex: 1;
  min-inline-size: 0;
}

.screen__body {
  flex: 1;
  padding: var(--space-4);
  /* La barre d'actions est collante : sans réserve, elle recouvre la fin du
     contenu — et ce qui disparaît en premier est ce qui est en bas, donc le
     destructif. La réserve doit dépasser la hauteur de la barre (73 px mesurés),
     sinon la dernière ligne reste sous elle même défilement fait.
     Défaut vu au rendu, pas à la relecture. */
  padding-block-end: calc(var(--space-8) + var(--space-6));
}

/* Barre d'actions basse : la zone du pouce.
   Les actions répétées y vont ; ce qui est rare ou irréversible reste en haut. */
.screen__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4)
    calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--surface-base);
  border-block-start: 1px solid var(--border-subtle);
}

.screen__actions .btn {
  flex: 1;
}

/* L'action qui engage prend plus de place que celle qui continue. */
.screen__actions .btn--game {
  flex: 1.3;
}

.back {
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-title);
}

.hint {
  color: var(--text-secondary);
  font-size: var(--font-size-label);
  margin: 0;
}

/* — Accueil ----------------------------------------------------------------- */
.greeting {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
}

.section-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-secondary);
  margin: var(--space-6) 0 var(--space-3);
}

.section-label:first-of-type {
  margin-block-start: 0;
}

.tiles {
  display: grid;
  gap: var(--space-3);
}

/* Une tuile d'outil est FROIDE : elle ne porte aucun accent. C'est la
   frontière outil / jeu de direction.md, rendue opérante. */
.tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--target-comfort);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
}

.tile__text {
  flex: 1;
  min-inline-size: 0;
}

.tile__name {
  display: block;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

.tile__what {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-label);
}

.tile__go {
  color: var(--text-secondary);
  font-size: var(--font-size-title);
}

/* Une tuile de jeu est CHAUDE : elle porte l'accent, et lui seul. */
.tile--game {
  border-color: var(--accent);
}

.tile--game .tile__go {
  color: var(--accent);
}

.tile__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-label);
}

/* — Reprise ----------------------------------------------------------------- */
/* Empilée : sur 390 px, le nom du jeu et le bouton côte à côte écrasent les
   deux. La reprise est la première chose qu'on lit — elle ne se comprime pas. */
.resume {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  margin-block-end: var(--space-5);
}

.resume__text {
  flex: 1;
  min-inline-size: 0;
}

/* — Compteur ---------------------------------------------------------------- */
.roster {
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.tally {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-raised);
}

.tally[aria-current="true"] {
  border-color: var(--border-strong);
}

.tally__name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tally__score {
  font-size: var(--font-size-score);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
}

.tally--compact .tally__score {
  font-size: var(--font-size-display);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

/* — Partie en cours ---------------------------------------------------------- */
.turn {
  text-align: center;
  padding: var(--space-5) var(--space-4);
}

.turn__who {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-2);
}

.turn__at-risk {
  font-size: var(--font-size-score);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 0;
}

.turn__what {
  color: var(--text-secondary);
  font-size: var(--font-size-label);
  margin: var(--space-1) 0 0;
}

.stage {
  display: flex;
  justify-content: center;
  padding: var(--space-5) 0;
}

.bust {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  margin-block-start: var(--space-4);
}

.standings {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.target {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-label);
  margin: var(--space-4) 0 0;
}

.backlink {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-label);
}

.backlink a {
  color: var(--text-secondary);
}

/* Le joueur sélectionné porte ses jetons ; les autres restent compacts et
   cliquables. Sans ce modèle, soit tous les joueurs portent un mur de boutons,
   soit la différence entre les cartes paraît arbitraire. */
.tally[aria-current="true"] {
  border-color: var(--border-strong);
}

.tally--compact {
  cursor: pointer;
}