/*
  css/lobby.css
  --------------------------------------------------------------------------
  Styles partages entre les ecrans de la phase pre-partie : creation de
  salon (createRoom), rejointe de salon (joinRoom) et salle d'attente
  (lobby). Les composants transverses (en-tete d'ecran, steppers, toggle,
  champs, cartes, liste de joueurs) sont definis ici pour etre reutilises
  par les trois ecrans.
  Depend de css/tokens.css (variables de design). Ne doit jamais
  definir de couleurs ou d'espacements en dur : passer par les tokens.
  --------------------------------------------------------------------------
*/

/* ====================================================================== */
/* En-tete d'ecran (bouton retour + titre)                                */
/* ====================================================================== */

.screen-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding-top: max(var(--space-3), var(--space-safe-top));
  padding-bottom: var(--space-2);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.screen-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background-color: transparent;
  flex-shrink: 0;
}

.screen-header__back:hover {
  background-color: var(--color-surface-sunken);
}

.screen-header__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ====================================================================== */
/* Banniere d'erreur                                                      */
/* ====================================================================== */

.screen-error {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-left: var(--space-3);
  margin-right: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-danger-contrast);
  background-color: var(--color-danger);
  border-radius: var(--radius-md);
  text-align: center;
}

.screen-error[hidden] {
  display: none !important;
}

/* ====================================================================== */
/* BETA B4 — Banniere de pause de salon (rooms.is_paused, voir             */
/* js/core/roomLifecycle.js#renderPauseBanner). Meme structure que         */
/* .screen-error mais coloration --color-warning (pas une erreur).         */
/* Partagee par game.js/vote.js/results.js.                                */
/* ====================================================================== */

.screen-pause-banner {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-left: var(--space-3);
  margin-right: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-warning-contrast);
  background-color: var(--color-warning);
  border-radius: var(--radius-md);
  text-align: center;
}

.screen-pause-banner[hidden] {
  display: none !important;
}

/* ====================================================================== */
/* Ecran Create Room                                                      */
/* ====================================================================== */

.create-room-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: var(--layout-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.cr-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-3);
  overflow-y: auto;
  min-height: 0;
}

/* -- Champ (fieldset) -------------------------------------------------- */

.cr-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}

.cr-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: 0;
}

/* -- Stepper (+/-) ----------------------------------------------------- */

.cr-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.cr-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.cr-stepper__btn:hover {
  background-color: var(--color-surface-sunken);
}

.cr-stepper__value {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  min-width: var(--space-8);
}

/* -- Toggle (Aléatoire / Choisir) -------------------------------------- */

.cr-toggle {
  display: flex;
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
}

.cr-toggle__btn {
  flex: 1 1 0;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: transparent;
  transition: background-color var(--duration-base) var(--easing-standard),
    color var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard);
}

.cr-toggle__btn--active {
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* -- Theme picker (liste de themes) ------------------------------------ */

.cr-theme-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cr-theme-picker[hidden] {
  display: none !important;
}

.cr-theme-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 40vh;
  overflow-y: auto;
}

.cr-theme-list__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
}

.cr-theme-list__status--error {
  color: var(--color-danger);
}

.cr-theme-list__retry {
  align-self: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cr-theme-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: var(--touch-target-min);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.cr-theme-item:hover {
  background-color: var(--color-surface-raised);
}

.cr-theme-item__checkbox {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.cr-theme-item__name {
  flex: 1 1 auto;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.cr-theme-item__count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* -- Pied d'ecran (bouton Creer sticky) -------------------------------- */

.cr-footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-3) var(--space-3);
  padding-bottom: max(var(--space-3), var(--space-safe-bottom));
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sticky-header);
}

.cr-footer__btn {
  width: 100%;
  min-height: var(--touch-target-comfortable);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}

.cr-footer__btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.cr-footer__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ====================================================================== */
/* Ecran Join Room                                                        */
/* ====================================================================== */

.join-room-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: var(--layout-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.jr-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-3);
  overflow-y: auto;
  min-height: 0;
}

.jr-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jr-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.jr-input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-md);
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--easing-standard);
}

.jr-input:focus {
  border-color: var(--color-focus-ring);
  outline: none;
}

.jr-input--code {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  letter-spacing: var(--space-1);
  text-transform: uppercase;
}

.jr-field__status {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: center;
  padding: var(--space-1) 0;
}

.jr-field__status--error {
  color: var(--color-danger);
}

.jr-field__status--info {
  color: var(--color-text-muted);
}

.jr-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.jr-footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-3) var(--space-3);
  padding-bottom: max(var(--space-3), var(--space-safe-bottom));
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sticky-header);
}

.jr-footer__btn {
  width: 100%;
  min-height: var(--touch-target-comfortable);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}

.jr-footer__btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.jr-footer__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ====================================================================== */
/* Ecran Lobby                                                            */
/* ====================================================================== */

.lobby-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: var(--layout-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.lobby-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3);
  overflow-y: auto;
  min-height: 0;
}

.lobby-code-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.lobby-code-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--space-1);
}

.lobby-code-card__code {
  display: flex;
  justify-content: center;
}

.lobby-code-card__letters {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-primary);
  letter-spacing: var(--space-2);
}

.lobby-code-card__copy {
  min-height: var(--touch-target-min);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.lobby-code-card__copy:hover {
  background-color: var(--color-surface-sunken);
}

.lobby-players-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lobby-players-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1);
}

.lobby-players-header__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--space-1);
}

.lobby-players-header__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.lobby-player-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.lobby-player-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  min-height: var(--touch-target-min);
}

.lobby-player-item--self {
  border: 2px solid var(--color-primary);
}

.lobby-player-item__name {
  flex: 1 1 auto;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-item__badge {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--space-1);
}

/* BETA B2 : badge de presence (js/realtime/presence.js), meme traitement
   visuel que .game-turn-order__offline (css/game.css). */
.lobby-player-item__offline {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.lobby-player-item__kick {
  flex-shrink: 0;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger);
}

.lobby-player-item__kick:hover {
  background-color: var(--color-surface-sunken);
}

.lobby-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  padding-bottom: max(var(--space-3), var(--space-safe-bottom));
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sticky-header);
}

.lobby-footer__btn {
  width: 100%;
  min-height: var(--touch-target-comfortable);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}

.lobby-footer__btn:hover:not(:disabled) {
  background-color: var(--color-accent);
  filter: brightness(1.1);
}

.lobby-footer__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-footer__btn--danger {
  color: var(--color-danger);
}

.lobby-footer__waiting {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  font-style: italic;
}

/* ====================================================================== */
/* Adaptations tablette/desktop                                           */
/* ====================================================================== */
@media (min-width: 768px) {
  .create-room-screen,
  .join-room-screen,
  .lobby-screen {
    max-width: 24rem;
  }

  .screen-header__title {
    font-size: var(--font-size-2xl);
  }

  .cr-stepper__value {
    font-size: var(--font-size-3xl);
  }

  .lobby-code-card__letters {
    font-size: var(--font-size-3xl);
  }
}