.create-lobby-layout {
  grid-template-columns: 1fr;
}

.create-lobby-gate,
.create-lobby-form {
  /* width:100% explícito, no solo max-width: .layout tiene
     align-items:start (no stretch), así que sin esto el panel se
     encogía a su contenido mínimo en vez de llenar el ancho
     disponible hasta el tope de 480px — quedaba una columna
     angostísima con el texto partido palabra por palabra. */
  width: 100%;
  max-width: 480px;
  margin: var(--sp-10) auto;
  box-sizing: border-box;
}

.create-lobby-gate p:first-child {
  font-size: var(--fs-md);
  color: var(--text);
  margin: 0 0 var(--sp-2);
}

.create-lobby-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* [hidden] del navegador es un selector de atributo (misma especificidad
   que una clase) — sin esto, la regla de arriba (origen "autor", más
   prioridad que la hoja de estilos del navegador) le gana al hidden y el
   formulario queda visible SIEMPRE, atributo hidden o no. Mismo bug (y
   mismo arreglo) que ya se dio antes con #compareContent. */
.create-lobby-form[hidden] {
  display: none;
}

.create-lobby-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.create-lobby-form label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
}

.create-lobby-form input {
  background: var(--void);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-3);
  color: var(--text);
  font-family: "Barlow", sans-serif;
  font-size: var(--fs-body);
}

.create-lobby-form input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* El botón nativo de <input type="file"> ("Elegir archivos") es un
   pseudo-elemento propio (::file-selector-button / el viejo prefijo
   -webkit-file-upload-button en Chrome/Safari) — el fondo/borde puestos
   arriba en .create-lobby-form input NO lo alcanzan, solo estilan la
   caja del input. Sin esto queda con el botón gris de fábrica del
   navegador, pegado al lado de un formulario que por lo demás sigue
   el tema del sitio. */
.create-lobby-form input[type="file"] {
  padding: var(--sp-2);
}

.create-lobby-form input[type="file"]::file-selector-button,
.create-lobby-form input[type="file"]::-webkit-file-upload-button {
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--void);
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-right: var(--sp-3);
  transition: opacity 0.15s ease;
}

.create-lobby-form input[type="file"]::file-selector-button:hover,
.create-lobby-form input[type="file"]::-webkit-file-upload-button:hover {
  opacity: 0.85;
}

.create-lobby-form__error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.create-lobby-form__player-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.create-lobby-form__player-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.create-lobby-form__player-name {
  flex: 1 1 auto;
  min-width: 0;
}

.create-lobby-form__player-tag-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-sm);
  background: var(--void);
  overflow: hidden;
  flex: 0 0 90px;
}

.create-lobby-form__player-tag-row input {
  border: none;
  border-radius: var(--r-none);
  min-width: 0;
  flex: 1;
}

.create-lobby-form__player-hash {
  padding: 0 0 0 var(--sp-3);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.create-lobby-form__remove-player {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-sm);
  background: var(--void);
  color: var(--text-dim);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.create-lobby-form__remove-player:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.create-lobby-form__remove-player[hidden] {
  visibility: hidden;
}

.create-lobby-form__add-player {
  align-self: flex-start;
  margin-top: var(--sp-2);
  border: none;
  background: none;
  color: var(--teal);
  font-family: "Barlow", sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  padding: var(--sp-1) 0;
}

.create-lobby-form__add-player:hover {
  text-decoration: underline;
}

.create-lobby-form__submit {
  align-self: center;
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-sm);
}