/* ===========================================================
   BlindTest — multijoueur : salons, classement live, reveal partagé
   Uniquement les tokens et composants du design system partagé.
   =========================================================== */

/* ------------------- Partie (solo et multijoueur) ------------------- */

.bt-game__main {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
    min-width: 0;
}

.bt-game[data-mode="multi"] {
    max-width: 1080px;
}

.bt-game[data-mode="multi"] .bt-game__round {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: clamp(14px, 2vw, 20px);
    align-items: start;
}

.bt-game__players {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bt-game__players .bt-section__title { margin: 0; }

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

.bt-standings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-standing {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--md-outline-soft);
    border-radius: var(--radius-xs);
    background: var(--md-surface-1);
}
.bt-standing[data-self="true"] {
    border-color: var(--md-primary);
    background: var(--md-surface-2);
}
.bt-standing[data-left="true"] { opacity: 0.6; }

.bt-standing__rank {
    color: var(--md-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bt-standing__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bt-standing__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 700;
}

.bt-standing__label,
.bt-member__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-standing__meta {
    color: var(--md-on-surface-muted);
    font-size: 12px;
}
.bt-standing[data-state="answered"] .bt-standing__meta,
.bt-standing[data-state="ready"] .bt-standing__meta,
.bt-standing[data-state="done"] .bt-standing__meta { color: var(--md-success); }

.bt-standing__points {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bt-standings--final .bt-standing:first-child .bt-standing__rank { font-size: 1.2em; }

.bt-badge--self,
.bt-badge--host {
    padding: 0 8px;
    font-size: 10px;
}
.bt-badge--host {
    border-color: var(--md-primary);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.bt-badge--found {
    border-color: var(--md-success);
    color: var(--md-success);
}

/* Présence : pastille, doublée d'un texte (jamais la couleur seule) */
.bt-presence {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--md-on-surface-muted);
    border-radius: var(--radius-pill);
    flex: none;
}
.bt-presence[data-connected="true"] {
    border-color: var(--md-success);
    background: var(--md-success);
}

/* ------------------- Reveal partagé ------------------- */

.bt-others {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bt-others__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.bt-others__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-other {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline-soft);
    border-radius: var(--radius-xs);
    background: var(--md-surface-1);
}
.bt-other[data-self="true"] { border-color: var(--md-primary); }
.bt-other[data-found="true"] { border-left: 4px solid var(--md-success); }
.bt-other[data-status="skipped"] { opacity: 0.7; }

.bt-other__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.bt-other__head .bt-standing__name { flex: 1 1 auto; }

.bt-other__points {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bt-other__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--md-on-surface-variant);
    font-size: 13px;
}

/* ------------------- Salon ------------------- */

.bt-room {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
}

.bt-room__lobby {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
}

.bt-room__header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: start;
}

.bt-room__invite,
.bt-room__state {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bt-room__code {
    margin: 0;
    color: var(--md-primary);
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 800;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    user-select: all;
}

.bt-room__copy,
.bt-room__last {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bt-room__state .bt-badge { align-self: flex-start; }
.bt-room__state .bt-badge[data-status="in_game"] {
    border-color: var(--md-success);
    color: var(--md-success);
}

.bt-room__leave {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.bt-room__layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 22px);
    align-items: start;
}

.bt-room__members {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bt-room__members .bt-section__title,
.bt-room__settings-head .bt-section__title { margin: 0; }

.bt-room__settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bt-room__settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.bt-room__settings-head .bt-form__hint { margin: 0; }

.bt-play__layout--readonly .chip-filter,
.bt-play__layout--readonly input { cursor: default; }

.bt-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--md-outline-soft);
    border-radius: var(--radius-xs);
    background: var(--md-surface-1);
}
.bt-member[data-self="true"] { border-color: var(--md-primary); }
.bt-member[data-connected="false"] .bt-member__name { color: var(--md-on-surface-variant); }

.bt-member__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bt-member__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 700;
}

.bt-member__meta {
    margin: 0;
    color: var(--md-on-surface-muted);
    font-size: 12px;
}

.bt-room__anonymous {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bt-code-input {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.bt-card--highlight { border-color: var(--md-primary); }

@media (max-width: 960px) {
    .bt-game[data-mode="multi"] .bt-game__round { grid-template-columns: minmax(0, 1fr); }
    .bt-game__players { position: static; }
    .bt-room__header { grid-template-columns: minmax(0, 1fr); }
    .bt-room__leave { align-items: flex-start; }
    .bt-room__layout { grid-template-columns: minmax(0, 1fr); }
}