/* ===========================================================================
   Size It Up - pages du compte, du retour d authentification et du classement.
   Chargee APRES css/app.css, et seulement par ces trois pages : rien ici ne
   touche le jeu. Les jetons viennent de css/theme.css, aucune couleur en dur.
   =========================================================================== */

/* Un `display` pose par une classe l emporte sur la regle `[hidden]` du
   navigateur : sans cette ligne, les blocs marques hidden restent visibles et la
   page du compte montre en meme temps le formulaire de connexion et l espace du
   joueur connecte. Constate au banc, pas suppose. */
.siu-auth[hidden],
.siu-auth__form[hidden],
.siu-auth__actions[hidden],
.siu-auth__msg[hidden],
.siu-auth__note[hidden],
.siu-lb[hidden] {
  display: none;
}

/* --- Colonne commune ------------------------------------------------------ */

.siu-auth {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1rem;
  max-width: 34rem;
}

.siu-auth__card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow: var(--shadow-sm);
}

.siu-auth__form {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* --- Champs -------------------------------------------------------------- */

.siu-auth__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.siu-auth__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 .75rem;
  margin-bottom: .35rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--foreground);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.siu-auth__input:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent);
}

.siu-auth__hint,
.siu-auth__small {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted-foreground);
}

.siu-auth__small {
  margin-top: .5rem;
}

/* Les trois tons des messages : neutre, bon, mauvais. Jamais une couleur seule
   pour porter le sens, la phrase le dit aussi. */
.siu-auth__hint[data-ton="bon"],
.siu-auth__msg[data-ton="bon"],
.siu-auth__note[data-ton="bon"] {
  color: var(--success);
}

.siu-auth__hint[data-ton="mauvais"],
.siu-auth__msg[data-ton="mauvais"],
.siu-auth__note[data-ton="mauvais"] {
  color: var(--destructive);
}

/* --- Actions ------------------------------------------------------------- */

.siu-auth__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.siu-auth__actions .siu-primary-btn,
.siu-auth__actions .siu-secondary-btn {
  flex: 1 1 11rem;
  text-decoration: none;
}

.siu-auth__link {
  align-self: flex-start;
  margin-top: .6rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.siu-auth__link:hover {
  color: var(--foreground);
}

.siu-auth__msg {
  max-width: 34rem;
  margin-top: .75rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--foreground);
}

.siu-auth__note {
  padding: .6rem .75rem;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-md);
  background: var(--notice-bg);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--notice-fg);
}

/* --- Bandeau d identite -------------------------------------------------- */

.siu-auth__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.siu-auth__email {
  margin-top: .15rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* --- Chiffres du compte -------------------------------------------------- */

/* Cinq chiffres, cinq colonnes egales : `auto-fit` laissait le cinquieme seul sur
   une ligne, deux fois plus large que les autres. Sous 480px, deux lignes de trois
   puis deux, ce qui garde « Longest streak » lisible. */
.siu-auth__figures {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}

.siu-auth__figure {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--secondary) 55%, transparent);
}

.siu-auth__figure-key {
  font-size: var(--fs-xs);
  letter-spacing: .03em;
  color: var(--muted-foreground);
}

.siu-auth__figure-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--foreground);
}

/* --- Histogramme du compte ----------------------------------------------- */

.siu-auth__chart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  margin-top: .85rem;
}

.siu-auth__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.siu-auth__count {
  font-size: var(--fs-xs);
  color: var(--muted-foreground);
}

.siu-auth__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--secondary) 70%, transparent);
  overflow: hidden;
}

.siu-auth__bar {
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--primary);
}

.siu-auth__bucket {
  font-size: var(--fs-xs);
  letter-spacing: -.01em;
  color: var(--muted-foreground);
}

/* --- Classement ---------------------------------------------------------- */

.siu-lb {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 34rem;
  margin-top: .75rem;
  padding: 0;
  list-style: none;
}

.siu-lb__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--card) 88%, transparent);
}

.siu-lb__rank {
  font-size: var(--fs-sm);
  color: var(--muted-foreground);
}

.siu-lb__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.siu-lb__score {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--primary);
}

/* Les trois premieres lignes se detachent, sans couleur porteuse de sens. */
.siu-lb__row:nth-child(-n+3) {
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
}

@media (max-width: 479px) {
  .siu-auth__actions .siu-primary-btn,
  .siu-auth__actions .siu-secondary-btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  .siu-auth__figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .siu-auth__figure-value {
    font-size: var(--fs-lg);
  }

  .siu-auth__chart {
    gap: .25rem;
  }
}